Potluck - JS × Web Components × Security × They took our jobs!
Syntax - Tasty Web Development Treats26 Sep 2018

Potluck - JS × Web Components × Security × They took our jobs!

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:33 - Would you ever consider doing a live Syntax show? Yes! Get tickets at JAMstack_conf 4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now? Google’s answer to React Native. Flutter NativeScript 9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation? Not cool. Always do server-side validation. Netlify Cloudflare 14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project? Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura) 21:51 - What are your thoughts on 100 Days of Code Challenge? Consistency and accountability. The best way to get good. 100 Days of Code 25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React? Dynamic vs static. What are your needs, how often does the content change. Next.js Use for dynamic needs It can do static exports too Convert to markdown Nothing special other than Routing and SSR (Server request getInitialProps) Gatsby.js Use for static needs Gatsby has lots of adapters 30:38 - What are websockets and when should they be used? A request that is always open - it responds to events instead of pinging, pushing or pulling data 35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them? Syntax Ep 50 - Progressive Web Apps 40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like Snipcart and Stripe Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident. Look up PIPEDIA 43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood. Pausable function that can return multiple values - call .next() on it 46:54 - Are web components worth it in 2018? Web Components Polymer Svelte 49:52 - How soon the designers replace React Developers with the invent of tools like Framer X? Not soon. Your job is changing and will continually change SouthPark - They Took Our Jobs! 56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into? ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO Lawn Tools Wes: B is for Build YouTube Channel Shameless Plugs Scott’s Level Up Pro Subscription Wes’ Advanced React Course Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Avsnitt(963)

891: Light and Dark Mode

891: Light and Dark Mode

Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode! Show Notes 00:00 Welcome to Syntax! 01:05 Brought to you by Sentry.io. 02:06 Light and dark mode, things to consider. 02:31 Light and dark mode from scratch. drop-in.css. 04:41 Calculations vs assigned color. 05:32 color-mix and relative color. 08:15 Foreground and background variables. –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%); –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%); 09:13 Setting color scheme. 12:38 light-dark function in CSS. 15:48 Manually setting dark mode. 18:43 The challenges with shared caching. 19:33 Tailwind CSS implementation. Tailwind dark-mode. 19:52 Shoehorning in dark mode. 22:25 Other things to consider. 22:28 Color contrast. Lea Verou contrast-color. 24:39 Logos. 25:22 Icons and images. 26:20 Accessibility. Polypane. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

7 Apr 27min

890: Accepting Money on the Internet in 2025

890: Accepting Money on the Internet in 2025

Wes and Scott talk about the ins and outs of accepting payments online—from choosing processors like Stripe and PayPal to handling fraud, taxes, custom checkouts, and more. Show Notes 00:00 Welcome to Syntax! 02:34 Payment processors Stripe PayPal Square Authorize.net 09:29 Checkouts 18:22 The checkout flow 23:10 Methods of accepting money 25:30 Brought to you by Sentry.io 28:34 Merchant of Record Lemon Squeezy Gumroad Paddle Beacons 32:51 Handling fraud, disputes, and refunds 41:25 Sick Picks + Shameless Plugs Sick Picks Scott: Parcel Wes: Parcels App Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

2 Apr 46min

889: Planning A Build

889: Planning A Build

Scott and Wes talk about the planning process for a major redesign of the Syntax.fm website. They share their thoughts on organizing tasks, choosing tech, handling styling, and the debates that come with deciding what to keep and what to change. Show Notes 00:00 Welcome to Syntax! 01:36 Brought to you by Sentry.io. 02:48 Why we need version 3.0 of Syntax.fm. Level Up Tutorials, Travis Neilson. 04:41 Project planning and organization. 05:53 The codebase. 09:50 The CSS changes. Episode 770: Design Systems With Brad Frost. 12:27 Tooling. 15:54 Development process. 16:38 Mobile and responsiveness. 18:37 Saving VS Code extension into the repo. 19:56 Using a dev container. 20:53 AI agent rules. 21:35 Code styles. 23:42 Canadian podcast. 24:33 Content storage. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

31 Mars 29min

888: You Need a Monorepo × Client Only React × TanStack + More

888: You Need a Monorepo × Client Only React × TanStack + More

26 Mars 52min

887: Vibe Coding Is a Problem

887: Vibe Coding Is a Problem

Is Vibe Coding the future of software development or just a fun way to experiment? Scott and Wes talk about coding with AI, the risks of ignoring the details, and the cool (and sometimes cursed) projects they’ve Vibe Coded. Show Notes 00:00 Welcome to Syntax! 00:31 “Personal Software”. 01:30 What exactly is Vibe Coding. 02:46 The challenges of coding with AI. Levelsio Airplane Game. 04:49 Brought to you by Sentry.io. 05:39 Vibe coding quality concerns. 07:25 Vibe Coding as a learning tool. 10:11 Things we’ve Vibe Coded. Scott’s Piano UI on X. Episode 876: MIDI & Music In the Browser. Wes’ Roomba on X. Wes’ Roomba on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

24 Mars 16min

886: AWS and IAC for Dummies with SST

886: AWS and IAC for Dummies with SST

Wes and Scott talk about Infrastructure as Code and how SST makes deploying to AWS easier than ever. They dive into SST’s features, developer experience, and how it simplifies managing services like databases, email, and more. Plus, insights on Cloudflare integration, auto-scaling, and real-world use cases. Show Notes 00:00 Welcome to Syntax! Supper Club × Next.js on AWS + Serverless with Dax Raad 02:37 Brought to you by Sentry.io 04:52 Intro to SST config SST AWS 05:40 Overview of Scott’s SST config file 12:33 Exploring SST’s endless capabilities SST’s docs Cloudflare 15:42 The SST developer experience Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan Supper Club × Flightcontrol with Brandon Bayer 19:05 SST console and GUI overview 22:13 Resource management and pricing 24:52 Secrets management 27:38 Tunneling and security https://sst.dev/docs/live 30:52 Simplifying DNS 35:18 Sick Picks + Shameless Plugs Sick Picks Scott: Aquaphor Healing Ointment Wes: Magnetic Picture Hanger Frame Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

19 Mars 39min

885: CSS Fonts Fallbacks, Variable and Trimming

885: CSS Fonts Fallbacks, Variable and Trimming

Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. Damnit Sans. 02:53 @font-face. 03:27 Font Display. 07:40 Avoiding layout shift. Fallbacks. 10:45 Variable fonts. Fontaine. font-kit Wakamai Fondue. Syntax Ep. 782. Font Variation Settings. 16:23 Variable font sizing. 17:46 v-fonts. 19:10 text-box-trim & text-box-edge. text-box-trim examples. 21:28 Browser support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

17 Mars 23min

884: Typescript Just Got 10x Faster

884: Typescript Just Got 10x Faster

Wes and Scott talk with Anders Hejlsberg and Daniel Rosenwasser about TypeScript’s leap to native code. They discuss the challenges, trade-offs, and the decision to port TypeScript to Go, unlocking faster compilation, better concurrency, and new possibilities for AI-assisted development. Show Notes 00:00 Welcome to Syntax! 00:38 TypeScript compiler goes native 05:24 Challenges in rebuilding TypeScript 08:49 How long has this been in development? 10:32 What does porting TypeScript to native entail? 16:36 Why choose Go? 26:48 The porting process 35:02 Brought to you by Sentry.io 35:27 Type checking and parallel compilation 42:36 Fixing TypeScript’s performance bottlenecks 49:09 Large TypeScript codebases 54:11 What’s the timeline for the new compiler? 58:39 Optimization and AI 01:00:32 New features? 01:04:15 Sick Picks + Shameless Plugs Sick Picks Daniel: pprof-it Anders: USB Hand Warmers Shameless Plugs TypeScript Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

11 Mars 1h 8min

Populärt inom Politik & nyheter

svenska-fall
motiv
aftonbladet-krim
p3-krim
fordomspodden
flashback-forever
rss-viva-fotboll
rss-krimstad
aftonbladet-daily
rss-sanning-konsekvens
spar
blenda-2
rss-vad-fan-hande
rss-krimreportrarna
rss-frandfors-horna
dagens-eko
olyckan-inifran
krimmagasinet
rss-expressen-dok
svd-nyhetsartiklar