Syntax - Tasty Web Development Treats: Recent Episodes
Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
Wes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started.
Show Notes * 00:00 Welcome to Syntax! * 01:17 Brought to you by Sentry.io * 02:04 Fun audio experiments + Bebot * 05:32 What is MIDI? + Web MIDI API * 14:18 Advanced examples with WEBMIDI.js + WEBMIDI.js * 17:02 Outputting MIDI messages * 24:40 Exploring the Web Audio API + webmidirtc * 31:20 Audio sampling in the browser * 37:35 Media Recorder * 39:21 Fun projects + MIDI chord machine * 42:08 Sick Picks + Shameless Plugs
Sick Picks * Scott: MX Master 3S * Wes: Microcontoller
Shameless Plugs * The MOST Starred JS Projects
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
JavaScript is missing a built-in way to make variables reactive—but Signals might change that. Scott and Wes break down what Signals are, how they compare to React state, and how different frameworks like Preact, Solid, Vue, and Qwik are already using them.
Show Notes * 00:00 Welcome to Syntax! * 01:49 Brought to you by Sentry.io. * 02:28 Why JavaScript needs reactive variables. * 03:16 What exactly are signals? + Signals Proposal. * 04:02 Understanding computed state. * 04:59 How signals differ from React state. * 06:12 How different frameworks handle reactivity. * 07:09 DOM Parts. + Pull Request. * 07:26 HTML Template Instantiation. + Template Instantiation. * 09:10 Comparing signals across frameworks: Preact, Solid.js, Vue, and more. + PreactJS Signals.
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
Is your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time!
Show Notes * 00:00 Welcome to Syntax! * 00:58 Brought to you by Sentry.io. * 02:01 What makes apps slow? * 02:10 Loading too much. * 03:26 Slow database work. * 04:04 Slow server. * 04:54 Waterfall requests. * 06:34 How do I know what is slow? * 06:45 Web vitals. * 12:50 Streaming. * 14:05 Network tab. * 18:18 Performance tab. * 22:53 Caching. * 22:59 Client-side caching. * 23:38 Server-side caching. + Valkey.io. + Redis.io. * 25:40 Local data. * 26:11 Gzip. * 29:23 CDN. * 30:57 Images. + Cloudinary. + Cloudflare Images. + Imgix. + Vercel Images. * 31:08 Serving. * 34:16 Compressing. * 35:06 Ship fewer images. * 35:50 Loading JS. + Async vs Defer Attributes. * 37:00 CSS. * 38:28 Preloading & Prefetch. * 39:40 Preloading on hover. * 41:44 Ship less code. * 43:49 Icons + Nucleo App. * 47:01 Fonts + Tolin.ski. * 51:13 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Skywalkers on Netflix. * Wes: Oxo Swivel Peeler.
Shameless Plugs * Scott: Syntax 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
Wes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries.
Show Notes * 00:00 Welcome to Syntax! * 01:24 Brought to you by Sentry.io * 02:44 What is Standard Schema and how does it work? + Standard Schema Spec + Fabian Hiller + Valibot + David Blass + ArkType + Colin McDonnell + Zod * 06:00 Benefits of Standard Schema * 08:54 Implementation and usage * 11:25 Is this primarily for end users or library authors?
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
Wes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech.
Show Notes * 00:00 Welcome to Syntax! * 01:04 Best container element for a grid of products? * 04:50 TypeScript null checks * 09:44 Adapt to AI or get left behind + Syntax Episode 870 * 13:13 Why did 3D never take off? + three.js + React Three Fiber + Rep Fitness Rack Builder + Maxime Heckel + GitHub Universe + The element * 18:53 Podcast audio and video in one feed? + Who Smarted? * 21:06 Brought to you buy Sentry.io * 22:30 Best and worst browsers for web dev? + Firefox + Edge + Chrome + Arc + Safari * 27:39 Why use a lock file for managing dependency versions + Don’t gitignore your lock files! * 30:34 Should you build your own sync engine? + Scott’s Naive Sync Example * 34:21 Best practices when starting a new project from scratch + Habit Path * 38:33 How to deploy a SvelteKit app on something other than Vercel or Netlify + Coolify Crash Course * 42:54 The reality of online opinions in tech * 48:10 Spending $120k on an app idea * 54:12 Sick Picks + Shameless Plugs
Sick Picks * Scott: My Mind * Wes: Metal Detector
Shameless Plugs * Scott: Syntax 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
Scott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project.
Show Notes * 00:00 Welcome to Syntax! * 04:12 What are AI Agents? + Cursor Features, Windsurf Features. * 07:25 Brought to you by Sentry.io. * 07:50 Chat Mode. * 08:11 Composer Mode. * 08:55 Agent Mode. * 10:03 Inline Chat Mode. * 11:02 JavaScript Set Methods Demo. + Wes’ Example on X. * 16:10 Fire Dispatch Data. * 20:01 Rules Files. + Cursor Directory. * 22:37 Use screenshots. * 23:36 Refactoring to separate files. * 23:53 Use it to experiment.
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
Wes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development.
Show Notes * 00:00 Welcome to Syntax! * 00:50 The origins of Windsurf and Codeium + Windsurf + Codeium + Vs Code + Cursor * 03:14 Rethinking IDE UX * 05:45 Will Microsoft eventually implement these AI features in VS Code? * 09:27 The "agentic" editor concept * 17:58 The future of software development with AI * 24:37 AI in large codebases * 28:22 Brought to you by Sentry.io * 28:46 How does AI stay current with frequent language/library updates? * 33:07 Behind Windsurf's fresh design * 35:23 Challenges with forking VS Code * 38:47 AI and future innovations * 43:04 How Windsurf approaches AI experimentation * 45:11 Pricing and user segments * 48:38 Will Windsurf ever run in the browser? * 50:58 Sick Pick + Shameless Plugs
Sick Picks * Kevin: Ricoh GR IIIx * Varun: Di2 Shifter
Shameless Plugs * Windsurf
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
Scott and Wes explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno.
Show Notes * 00:00 Welcome to Syntax! * 00:41 Brought to you by Sentry.io. * 01:29 Running TypeScript in Node. * 01:45 Experimental Type Stripping. * 03:17 TypeScript refresher. * 04:05 TypeScript can be compiled and/or Type Stripped. * 05:09 Current Node implementation is only type stripping. * 05:40 Limitations of no compiling. + 05:57 Enums. + 08:30 Other issues. + 08:35 Parameter properties. * 09:20 Experimental transform types. * 10:01 Importing types with type keyword. * 11:17 No need for sourcemaps. * 11:42 No dependencies. + 13:08 Other tools. + 13:25 tsx. + 14:28 ts-node. + 14:44 JSDoc. + 16:30 Deno and Bun.
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
Wes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks.
Show Notes * 00:00 Welcome to Syntax! * 00:27 Brought to you by Sentry.io * 01:16 The state of JavaScript Twitter fantasy football * 02:27 Syntax features + The State of JavaScript survey * 05:27 Logical assignment * 07:49 Strings * 08:18 Arrays * 14:16 Sets + 2025 New Years resolution: use maps and sets more and objects / arrays less. * 16:10 Browser APIs * 22:50 Library tiers list * 27:21 Upgrading from M1 Mac + Chris Coyier - M4 * 30:08 Front-end frameworks * 32:18 The top front-end frameworks used at work * 33:49 What is the highest paying framework? * 35:01 Meta frameworks * 36:32 Meta frameworks pain points * 42:33 Testing tools * 43:58 Build tools * 44:41 Most used libraries * 46:33 Back-end frameworks * 48:34 JavaScript runtimes * 50:35 Serverless runtimes * 51:25 Other languages people are using * 52:49 AI tools * 53:37 The State of JS Awards * 57:18 Sick Picks + Shameless Plugs
Sick Picks * Wes: Headted Vest * Scott: Super Mario Party Jamboree
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
What’s the deal with Zero Sync? Scott and Wes dive into this cutting-edge database tech, exploring its real-time interactivity, blazing-fast performance, and how it stacks up against the competition. Plus, they break down setup, querying, authentication, and whether it’s ready for prime time.
Show Notes * 00:00 Welcome to Syntax! * 01:59 Brought to you by Sentry.io. * 02:21 Today’s agenda. * 02:52 What is Zero Sync? + The Docs. + InstantDB. * 07:02 Zerobugs loading speed. * 11:04 Real-time interactivity. * 11:38 Why is it different? * 12:11 How to get it set up. + 12:58 Querying Data. + 16:22 Writing data. + 16:31 Upsert. + 17:39 Authentication and permissions. - Johannes Schickling Ep 767. + 19:27 Preloading. + 19:41 Migrations and deployment. * 20:17 Some extras. * 21:16 CreateSubscriber. * 23:08 Can you use this today? + Zero Syn Roadmap. + Scott’s YouTube Video.
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
Scott and Wes look into their crystal ball to predict what’s coming in web development next year. From the rise of on-device AI to the vanilla CSS comeback, Bun’s big moves, and React’s evolution, this episode is packed with bold predictions and hot takes!
Show Notes * 00:00 Welcome to Syntax! * 02:00 Brought to you by Sentry.io. * 03:09 The agenda. * 03:40 Temporal Javascript api will ship in Safari and Chrome. + Temporal Proposal. * 06:23 On device AI. + WebGPU API + Dawn Native WebGPU * 10:26 Models will plateau. + Bolt.new, v0, Lovable.dev. * 13:40 Web Awesome will become the most used web components library. + Web Awesome. * 15:57 We will be using more web components. * 16:59 A push towards the ‘standard stack’. * 19:38 We can really use relative color. * 21:39 Vanilla CSS comeback. * 23:35 A complete Mixins / Functions API for CSS. * 24:27 Conditionals will ship in all browsers. * 25:50 People will still make vertical centering jokes. * 27:08 VSCode will be feature parity with Cursor. * 28:22 Framework choice will matter less with AI tools. * 29:12 OpenAI will launch a browser. + Dupe.com. + Buy Now! The Shopping Conspiracy. + Krazy Binz. * 37:18 React will drop Babel. + BabelJS. * 38:05 React Server Components will pop. * 39:46 Remix will relaunch as something entirely different. * 41:11 React Native will have it’s time. * 42:06 Svelte will get component-based islands or data loading. * 44:19 Server Runtimes, Bun will continue to do non-standard, lovable things. * 44:44 Bun will release a PAS to compete with NPM, Vercel, and Vite. * 46:06 Laravel will release a CMS. * 47:57 Vite will stay king. * 48:03 Rolldown ships in the next version of Vite. + Rolldown. + Statamic. * 49:35 Sick Picks & Shameless Plugs.
Sick Picks * Scott: PHILIPS A19 Ultra Definition Dimmable Light Bulb. * Wes: Stats App.
Shameless Plugs * Scott: Syntax 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
Scott and Wes challenge each other’s knowledge on everything from array sorting quirks to browser isolation types in a rapid-fire trivia format. They dive deep into performance optimizations, TypeScript type safety, and HTML best practices while uncovering surprising edge cases that every web developer should know about.
Show Notes * 00:00 Welcome to Syntax! * 00:43 Brought to you by Sentry.io. * 01:23 Question 1: Array Sort Default Behavior. * 03:24 Question 2: Splitting Into Individual Words & Characters. * 06:06 Question 3: NodeJS Stream Backpressure. * 09:07 Question 4: Custom Middleware Rate Limiting. * 13:00 Question 5: Transform Function Property Changes. * 15:18 Question 6: TranslateZ & Will-Change Performance. * 17:52 Question 7: Table Structure Best Practices. * 20:23 Question 8: Dialog vs Div with Dialog Role. * 23:21 Question 9: TypeScript Unknown vs Any & Never. * 26:31 Question 10: Response Type Safety in TypeScript. * 29:48 Question 11: Browser Isolation Types. * 32:54 Question 12: HTML Quirks Mode Behavior.
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
Scott and Wes ring in the new year, answering listener questions on the rise of durable objects, handling tricky tab state in e-commerce apps, and their top picks for headless CMS. They also chat about the future of CSS, deployment platforms, and whether Syntax beanies might finally be a thing!
Show Notes * 00:00 Welcome to Syntax! * 00:52 Brought to you by Sentry.io. * 03:10 What Are Durable Objects? * 08:25 CSS Anchor Positioning: Cross-Browser Support Update. + Implement CSS Anchor Positioning. * 12:48 Freelancers: UX and Design Skills vs. Functional Expertise. * 16:47 Choosing the Best Deployment Platform. + Syntax Episode 615. * 20:49 Making Websites WCAG Compliant. + Polypane. * 22:35 Managing Tab State in Complex Apps. * 28:43 Will CSS Ever Be Complete? * 33:21 When Will Syntax Beanies Drop? + Syntax Swag Store. * 35:21 The Best Headless CMS for a Tech Blog. * 42:15 From Many Packages to Monolithic Frameworks. * 46:41 Sick Picks + Shameless Plugs.
Sick Picks * Scott: The Sheet with Jeff Marek. * Wes: 28” 4K+ BenQ Programming Monitor.
Shameless Plugs * Scott: Syntax 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
Scott and Wes look back at 2024 and share highlights from a big year for Syntax and the web dev world. They review their 2024 predictions to see what they got right (and wrong), and break down the major moments in web development from CSS improvements to AI editors and beyond.
Show Notes * 00:00 Welcome to Syntax! * 01:30 Changes to the Syntax podcast. * 05:56 What happened this year? + 06:07 React. + 06:36 Solid Start. + 07:04 Tanstack Start. + 07:43 Remix + 09:42 AI Editors. + 11:53 Vite 6. + 14:02 Bluesky. + 19:52 CSS. * 22:17 What did we do? + 22:21 React Miami. - React Miami Episode. + 22:26 JSNation Amsterdam. + 23:55 JSNation US + React Summit. + 24:57 Terminal Feud. + 26:28 Laravel + Terminal basketball game. + 27:02 Syntax San Francisco meetup. + 27:23 GitHub Universe. + 28:07 FITC. + 28:38 153 Syntax Episodes + Video. * 29:32 Our 2024 Predictions Reviewed. + 29:46 Types in JS will have real movement. + 31:29 Temporal API will ship in 1 browser. + 32:50 Perf tooling gets easy for everyone to understand. + 33:29 CSS continues to get better where you need less JS. + 34:25 Svelte v5 is very fast. + 34:38 The year of the server in frameworks. + 35:28 Astro is going to have a good year. + 36:13 React server components. + 37:03 Remix moves away from page-based loaders, to component loaders. + 37:18 Hono will become more ubiquitous. + 38:28 We will see a route matching Proposal move ahead. + 39:23 Bun releases full node compat. + 40:42 We will see a new Linter + formatter entirely replace. + 42:16 New TypeScript typechecker. - Ezno. + 43:40 Lightning CSS pops - or does it? + 45:10 You’ll hear more about Rspack and Turbopack. + 45:51 Vite isn’t going to release anything big in 2024. + 46:24 Relative color will land in all major browsers. + 48:14 CSS contrast-color will land in chrome. + 48:48 Scroll animation landing in 2 browsers. + 50:03 The year of CSS discovery. + 51:09 Safari will Ship 3 missing PWA Support. + 52:11 Firefox usage will continue to slip. + 56:53 Paid Arc features. + 57:14 More XR web experiences as Apple releases in Vision Pro. + 59:55 AI Tooling. + 01:00:57 Small Models that run in the browser. + 01:01:38 Apps get Sherlocked by OpenAI. + 01:02:04 On prem corporate AI. * 01:04:49 Sick Picks + Shameless Plugs.
Sick Picks * Scott: TCGPocket App. * Wes: Huge Bag of Croc Charms
Shameless Plugs * Scott: Syntax 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
Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains.
Show Notes * 00:00 Welcome to Syntax! + Scott’s Svelte5 Overview. * 01:27 Brought to you by Sentry.io. * 02:06 What’s new in Svelte 5? + 02:13 Runes. - 04:47 $state - 07:00 $state.snapshot - 11:47 $derived - 12:46 $derived.by - 15:41 $effect - 17:24 $effect.pre - 18:05 $effect use cases. - 22:20 $props - 24:57 Binding state. - 27:15 $inspect * vsode-wrap-svelte. - 28:46 $inspect(…).with + 30:42 Snippets. + 34:22 Events now onclick instead of on:click. + 36:09 Custom events now just props instead of createEventDispatcher. * 36:31 Serif Font on website. * 40:01 Performance. + Benchmarks Doc. + Benjamin McCann Tweet. * 46:41 Is Svelte becoming React? * 49:21 Migration. * 51:41 What’s next and wish list for Svelte. * 57:12 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Dragon Quest 3. * Wes: Dresscode.dev.
Shameless Plugs * Scott: Syntax 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
Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure.
Show Notes * 00:00 Welcome to Syntax! * 00:30 Brought to you by Sentry.io. * 01:43 Why store data locally. + 01:55 User preferences and settings. + 02:50 Not logged in state (shopping carts, etc). + 03:30 Data for faster loading. + 03:51 Privacy concerns. + 04:25 Large files or drafts. + 05:50 Auth tokens. * 07:08 Where to store data. + 07:11 Cookies. + 07:48 Local storage. + 09:15 Session storage. + 10:35 IndexedDB. * 12:15 BYOJS Storage. * 13:41 SQlite via WASM. * 14:12 Penalties of SQLite in browser via WASM. * 15:29 PGLite. * 16:23 Dealing with migrations. * 16:55 The advantages of the approach. * 18:42 Dexie. * 19:59 Patch messages. * 21:25 A few options. + TinyBase Docs. + Local First Web.
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
Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.
Show Notes * 00:00 Welcome to Syntax! * 00:48 Zach background and role at ByteDance * 03:10 ByteDance’s web and native apps + How ByteDance Became the World’s Most Valuable Startup + Lynx + ByteDance GitHub + Coze + Lark + MarsCode * 06:48 What is Module Federation? + Zephyr Cloud * 15:49 Evolution from V1 to V2 of Module Federation * 24:47 When to consider Module Federation * 29:46 How would you publish a utils package in Module Federation? * 32:59 How would you do a major upgrade? * 36:36 Brought to you by Sentry.io * 37:01 Who owns the update process? * 39:40 Handling multiple frameworks * 42:10 ModernJS and Meta frameworks + ModernJS + Rspress * 47:20 Does ByteDance have its own JavaScript runtime? + NAPI * 50:02 Why Zack built Rspack + Rspack + Rsbuild * 58:15 The future of Rspack and custom bundlers + Unpack * 01:04:24 Module Federation’s major features * 01:07:29 Sick Picks & Shameless Plugs
Shameless Plugs * Zack: + Zephyr Cloud + Midscene.js
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
Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs.
Show Notes * 00:00 Welcome to Syntax! * 00:50 Brought to you by Sentry.io. * 01:15 The history of video streaming. * 02:10 How video streaming works: The Tech. * 03:54 How video streaming works: Transcoding. * 06:37 How video streaming works: Variants. + ffmpeg. + Wes’ R2-video-streaming. + Wes’ Transcoding. + YT-DL. + YT-DLP. * 13:13 Dynamic ad insertion. * 14:29 Bandwidth and hosting. + Mux. * 18:03 Cloudflare. * 19:13 The costs. + Wes Bos Tweet Cloudflare TOS. + Steve Tenuto tweet. * 25:39 Media players. + Media Chrome. * 29:42 CDN. * 32:04 Access control. * 33:35 Solutions. + Mux. + Cloudflare Stream. + Bunny.net Stream + AWS Media Convert. + Cloudinary. + Bitmovin. * 41:55 Some other features. * 45:47 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Anker MagGo. * Wes: PolyCapture.
Shameless Plugs * Scott: Syntax 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
Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.
Show Notes * 00:00 Welcome to Syntax! * 02:48 Brought to you by Sentry.io. * 03:54 How do you go deeper? * 04:23 Pick a project and build it. * 06:36 Read the docs. + Svelte Docs. * 09:07 Read the source. * 11:19 Consume content: blogs, conference talks, etc. + Dot Conferences on YouTube. + GitNation JavaScript Conferences. * 16:24 Discord and Reddit. * 19:31 Get mentorship and ask questions.
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
Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget.
Show Notes * 00:00 Welcome to Syntax! * 03:01 Brought to you by Sentry.io * 04:14 Understanding signal-to-noise ratio * 06:48 Using de-noise + iZotope Voice De-noise * 09:12 The importance of mic technique * 10:28 Dealing with electrical noise * 11:15 The proximity effect * 13:01 Sound treatment vs sound proofing + Sound Wavelength Calculator + Syntax 516: Wes’ New Soundproof Office + Studiobricks + Randy’s Studiobricks video + GIK Acoustics * 23:33 Do egg crates work for sound treatment? * 25:22 USB mics vs XLR mics + Shure MV6 + Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn * 27:06 Video composition * 30:18 How to improve your lighting * 35:37 Choosing the right camera * 36:58 The importance of codecs and bitrates * 38:14 What to look for in a webcam * 38:50 Randy’s packages for $50, $150 and $500-$1000 budgets * 40:02 The $50 package/selecting your mic + Feelworld PM1 + Fifine K688 + heyday Stone White Desktop Mic * 43:53 The $150 package + Neewer lights * 45:32 The $500-$1000 package + Shure MV6 + Insta360 Link 2 + Insta360 Link 2c + Elgato Cam Link 4k + Sonay a6000 * 51:07 Mic stand recommendations + VIVO * 56:50 Sick picks & Shameless Plugs
Sick Picks * Randy: etymologynerd on TikTok
Shameless Plugs * Randy: Randy’s 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
Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners.
Show Notes * 00:00 Welcome to Syntax! * 00:50 Brought to you by Sentry.io. * 02:23 Apple developer accounts and certificates. * 06:58 Hono, SvelteKit, and using them together. * 11:14 Rspack & Rsbuild over Vite? + Rspack, Rsbuild. + Rolldown, Rollup. + oxc. + Turborepo. * 21:01 Quoting projects without seeing under the hood. * 25:26 HTTP cookies, partitioned cookies, and chips. + Partitioned Cookies. * 30:29 Redirect codes; 301, 302, 303, 307 + 418 I’m a teapot. * 36:22 Gaining inspiration for talks and posts. * 40:02 My loading state is too fast! Should I use setTimeout? + setTimeout Docs. * 42:29 Interviews and landing the job. * 49:50 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Stainless Steel Cookware. * Wes: Dim Lightbulbs, steelpan.guy on TikTok.
Shameless Plugs * Scott: Potluck Submissions. * Wes: Syntax 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
Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers.
Show Notes * 00:00 Welcome to Syntax! * 00:49 Pre-loading, prefetching, and pre-connecting. + CSS Wizardy. + CSS Wizardy on GitHub. * 02:06 Brought to you by Sentry.io. * 03:16 Benefits of pre-loading, prefetching, and pre-connecting? * 07:02 The Speculation Rules API. + mdn web docs. * 08:20 Isn’t that expensive? * 08:53 Eagerness of the Speculation Rules API. * 09:55 What is the cost for the site? * 14:42 What is the cost for the user? * 15:49 Next Master. + Next Master. * 18:07 The current prevalence.
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
Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation.
Show Notes * 00:00 Welcome to Syntax! * 01:15 The Framer Motion story + Motion * 05:16 What’s the status of Framer Motion today? * 09:08 What tech is Motion built on? * 13:40 Is Motion entirely WAAPI? * 16:06 Why hasn’t the Web Animation API gained more traction? * 17:46 Does Matt design his demos? * 19:25 Performance and testing * 25:34 Brought to you by Sentry.io * 28:10 Have other animation libraries influenced Motion? + Svelte + GSAP + Anime.js * 31:49 Micro-Optimizations in JS * 36:02 How do you test frame rates? * 38:03 Graphics programming and shaders + Maxime Heckel + Maxime’s blog * 39:58 What is the future of Motion? * 41:42 What’s the difference between layout animations and the Vue Transition API? * 46:35 Sick Picks & Shameless Plugs
Sick Picks * Matt: + Grime music + P Money + Ghetts
Shameless Plugs * Matt: + Motion.dev + Sponsor Motion
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
Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs!
Show Notes * 00:00 Welcome to Syntax! * 00:53 Brought to you by Sentry.io. * 01:15 About the survey. + Follow along! State of Frontend Survey * 02:10 Frameworks. * 06:15 Rendering frameworks. * 07:35 State management. * 09:14 Other libraries. + Just: Dependency-free Utilities. * 13:34 Data. + Syntax Episode 453. + Syntax Episode 833. * 16:39 Hosting. + AWS Amplify. * 19:51 Continuous Integration. * 21:30 Micro-frontends. * 23:25 Package Managers. + pnpm Link Workspace Packages. + Corepack. * 28:35 JS Runtimes. * 29:47 Typescript. * 33:13 Browser Technologies. * 35:05 What is app property? * 38:20 Progressive Web Apps. * 40:11 Styling tools. * 43:17 Testing. * 45:39 Code editors. * 49:02 Build tools. * 49:17 Linting tools. * 50:26 Operating systems. * 51:17 The future trends. * 54:14 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Candle Warmer. * Wes: Flighty iOS App.
Shameless Plugs * Scott: Syntax on Bluesky
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
Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected.
Show Notes * 00:00 Welcome to Syntax! * 01:17 Brought to you by Sentry.io. * 02:09 How do Cloudflare Tunnels work? + 03:52 Publicly exposed webhooks. + 04:09 Apple Pay. + 04:40 Snipcart. * 04:54 Accessing servers when away. + Jellyfin, Home Assistant. * 07:47 How to set up Cloudflare Tunnels. * 10:00 Security risks. + Cloudflare Access & Zero Trust.
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
Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors.
Show Notes * 00:00 Welcome to Syntax! * 00:32 Cassidy’s keynote at GitHub Universe * 03:23 New Copilot features * 04:55 Use cases for prompt engineering * 09:20 UI and UX enhancements * 19:18 Copilot Extensions * 20:38 Brought to you by Sentry.io * 21:26 Multi-line suggestions? * 27:00 How do you develop new ideas in this space? + GitHub Next * 35:42 Copilot in Xcode + GitHub Copilot code completion in Xcode is now available in public preview * 39:16 VS Code experimental features + @code
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
Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro.
Show Notes * 00:00 Welcome to Syntax! * 01:22 Brought to you by Sentry.io. * 03:10 What is state? * 03:29 Common state jargon. + 03:48 Reactive State. + 04:14 Store. + 04:46 Immutable vs Mutable State. + 05:53 State updaters. + 06:15 Signals. - Solid.js Signal Docs. + 06:49 Observables. + 07:07 UI is a function of state. + 08:39 State Machine. + 10:58 Binding state. + 11:36 Global vs local. + 11:49 Computed State, derived state, selector state. * 12:41 Approaches to state management. + 12:52 Reducer based. + 16:39 Mutation based state. + 21:17 Atom based state. * 25:15 Ways to hold state. + 25:17 Holding state in an object. + 27:38 Holding state in the URL. - Syntax Shows. + 29:34 Holding state in IndexedDB, local storage, and cookies. + 32:16 Holding state with FormData. + 33:56 Holding state with Signals. - Signals Proposal. + 37:27 Holding state with the server database. * 38:55 Global State vs Component State. + Habit Path. * 40:39 Sharing state. + 42:58 State libraries. + 45:26 Zustand. + 50:24 Jotai. + 51:50 xState. + 54:56 Easy Peasy. + 55:24 Pinia. + 56:01 TanStack Query. * 57:02 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Cremo Mens Body Wash, Bentgo Adult. * Wes: Adult Bento Box.
Shameless Plugs * Wes: Syntax 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
You’ve got a project, and you need the right tool—but how do you know if that JavaScript package is the one? Scott and Wes guide you through finding and validating packages, from checking NPM to scoping out social proof, so you can pick tools you can trust.
Show Notes * 00:00 Welcome to Syntax! * 00:29 Brought to you by Sentry.io. + Take The Pledge * 01:44 How to find a JS package. + 02:56 Searching via NPM. + 03:28 Searching via Socket.dev. + 06:02 Searching via Reddit. + 06:24 Searching via Perplexity. + 08:31 Searching via Google autocomplete. + 09:25 Searching via Awesome repo. + 09:51 Searching via social networks. + 10:47 Searching via established projects. * 11:19 Evaluating the quality of a package. + 12:02 Validating via GitHub Issues. - html2canvas. + 13:58 Are there types? + 15:16 Validating via Socket. + 16:15 Validating via Bundlephobia. + 17:15 Validating via the docs. + 17:55 Validating via GitHub Search. + 18:14 Validating via GitHub Insights. - GitHub Network Dependents. + 20:19 Validating via the package.json file. - Syntax Episode 563.
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
Scott and Wes talk with Scott Jehl about the benefits, challenges, and use cases of web components, particularly in design systems and performance.
Show Notes * 00:00 Welcome to Syntax! * 00:55 Scott’s background and career + Responsible Responsive Design + Webpagetest.org * 06:46 An overview of web components * 09:06 Why should people care about web components? * 13:16 Should you write your own web components? * 14:39 Reactivity in web components * 15:56 DOM parts * 18:23 Styling web components * 22:08 Brought to you by Sentry.io * 22:33 CSS custom properties + Mux Player Customizer * 24:28 Responsive video * 28:27 The polyfill use case * 30:55 Shadow DOM challenges * 36:04 Web components in design systems * 41:58 How are people using web components? * 43:25 Web components and server-side rendering * 45:00 Scott’s thoughts on build tools * 47:33 Sick Picks & Shameless Plugs
Sick Picks * Scott: Enhance
Shameless Plugs * Scott: + Squarespace is hiring + Web Components Demystified - Get 30% off with coupon code “syntax” + Web Components Community Group
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
Scott and Wes are back with their annual Syntax Holiday Gift Guide! They’ve curated the best gadgets, tools, games, and even kitchen essentials for the dev in your life — plus a few treats anyone would love to unwrap.
Show Notes * 00:00 Welcome to Syntax! * 00:46 Brought to you by Sentry.io. + Open Source Pledge Members. * 01:59 Syntax holiday gift guide. * 02:25 Our absolute favorites. + Leatherman Arc. + Peak Design Everyday. + 1.5 KG of Maldon, Salt Cellars. + Anker Cube. + Anker MagGo. + Theragun, Off-Brand Massage Gun. + Subscription to Cursor, Claude, ChatGPT. + Syntax Swag. * 13:33 Our (Scott’s) top games. + Factorio. + Cascadia. + Azul. + SteamDeck. * 19:01 Gifts under $30. + Braided USB-C Cables + Right Angle Thunderbolt. + Battery Daddy. + MagSafe Popsocket. + Hempz Apple Cider + Nutmeg Hand Lotion. + Mens Cremo Body Wash. * 27:50 Clothing gifts. + Uniqlo Stretch Selvedge Denim. + Naked and Famous Selvedge Denim. + Scott DU/ER Jeans. + Wool Toque + Anything from Huckberry. * 35:02 Desk item gifts. + MX3s Master Mouse + Target Candles + Candle Melter Wax. + Laptop Stand - Rain Design mStand. - Any Foldable Amazon Stand + Desk Treadmill. + Insta360 Link 2. + Small Rig Rotatable Collar Mount. + Thermal Printer. + Cable Management Straps + Clips + Mini Tripod. + Super Clamp. + Fishskyn. * 45:02 Kids gifts. + Yoto Player. + Toniebox. + First Cat in Space. + Bathbombs. + Kahn Academy Kids App. + Codespark. * 51:11 Kitchen gifts. + Carbon Steel Frying Pan. + Viral Egg Cooker. + Glass Straws. + Danish Whisk. + Oxo Salt + Pepper Grinders. + Paper Wheels. + Whetstone. + WÜSTHOF Nakiri Knife. + Carbon Knife Co. + Can Tumbler Glasses. + Squirrel Rice Paddle. + OTOTO Splatypus Jar Spatula. * 59:02 Eatables. + Hot Sauce: - Truff Hot Sauce. - Secret Aardvark. - Cholula Gift Pack. - Laoganma Chili Crisp. - Merfs. + Bachan’s Japanese BBQ Sauce. * 01:00:51 Smart home gifts. + Smart Dimmers + ESP32 + WS2815 LED Strips * 01:03:06 Shameless Plugs.
Shameless Plugs * Scott: Syntax 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
Scott and Wes unpack their experiences as electric car owners, sharing the highs and lows of making the switch. From range anxiety to charging infrastructure and cost savings, they talk about everything from the tech perks to the unexpected challenges of driving electric.
Show Notes * 00:00 Welcome to Syntax! * 02:11 Brought to you by Sentry.io. * 03:14 What cars and how long have we had them. + Hyundai IONIQ 5. + Tesla Model Y Long Range. * 10:41 Range and dealing with range anxiety. * 11:45 The EPA specs. * 12:24 Things that affect range. * 14:46 Charging. * 17:52 Charging levels. + 17:56 Level 1 charging. + 19:01 Level 2 charging. + 19:39 Level 3 charging. + 20:10 Charging standards. * 21:51 Electric car pricing. * 25:56 Regenerative braking. * 27:27 General maintenance. * 29:04 Pricing and expenses. * 31:48 Machine Gun Kelly Effect. * 36:46 Would you go completely electric? * 38:46 Electric-only tech. * 40:57 Buying a new EV. * 42:21 Edison Motors website, TikTok.
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
Scott and Wes talk with Taylor Desseyn about the shifting developer job market. Taylor shares practical tips for standing out, building genuine connections, and finding opportunities in a competitive hiring landscape.
Show Notes * 00:00 Welcome to Syntax! * 01:38 Meet Taylor Desseyn * 03:51 Is the dev job market as bad as it seems? * 06:47 How to stand out when applying for a dev job? * 11:03 Who is getting hired? * 14:16 What tech/languages are companies hiring for right now? * 16:37 Is there less work? * 20:10 The small things that get you hired * 24:19 What to do when you get laid off * 27:42 Brought to you by Sentry.io * 28:07 How to make yourself more appealing to employers * 32:39 Networking tips and tricks * 39:01 Remote work and office return trends * 40:58 Why you should negotiate carefully * 43:38 What’s the most important thing right now for getting hired? * 45:48 Should devs understand stakeholders and business goals? * 46:42 Creating a good resume * 52:00 Sick Picks & Shameless Plugs
Sick Picks * Taylor: heydey mic * Randy Rektor’s YouTube Channel
Shameless Plugs * Taylor: + Torc + Guidance Counselor 2.0
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
Scott and Wes serve up listener questions on everything from SvelteKit’s limits and the quirks of branded types in TypeScript to handling email queues and secure token storage in cookies. Plus, they get into app security, the evolution of checkout flows, and why QA teams can actually be game-changers for dev teams.
Show Notes * 00:00 Welcome to Syntax! * 00:50 Catching up. * 01:52 Brought to you by Sentry.io. * 02:56 What are the limitations of SvelteKit? * 06:41 Svelte 5 updates. * 07:53 Branded types in TypeScript. + EggHead.io Blog. * 11:56 Queue applications and a ‘poor man’s queue’. * 17:20 The real value of a functional QA team. * 21:34 Invoker commands. + Invokers Explained. + Denver Script Talk. * 26:29 Growing security and permissions concerns. + Little Snitch. * 33:03 Stripe vs PayPal in 2024. * 38:24 Christmas gift guide. * 38:39 Websockets vs streams vs polling. * 41:04 Storing access and refresh tokens in a cookie. * 45:41 Shipping with TypeScript errors. * 49:34 Sick Picks + Shameless Plugs.
Sick Picks * Scott: The Black Stuff Deodorant. * Wes: Apple Watch Charging Brick.
Shameless Plugs * Scott: Syntax 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
Scott and Wes react to the big GitHub Universe announcements, recorded live at GitHub Universe. They dive into Copilot’s new features, exploring how its advancements stack up against Cursor AI in the battle for the ultimate AI-driven developer tool.
Show Notes * 00:00 Welcome to Syntax! * 01:12 Our Syntax Meetup. * 02:54 AI is everywhere. * 03:22 Sherlocking and jockeying for position. * 04:49 GitHub Copilot introduces alternative LLMs. + GitHub Copilot * 06:31 New tools are build upon existing LLMs. * 09:14 VSCode reclaiming ground from Cursor. + Cursor * 10:31 The new features. + 10:34 Multi-file editing. + 10:54 Use-cases for multi-file editing. + 12:58 Multi-model selection. + 13:05 Repo indexing. + 13:50 Copilot instructions. + 14:34 Examples of Cursor rules. + 16:39 No mention of multiple-line suggestions. + 18:02 Multi-file edit? + 20:26 Code review. + 22:36 GitHub Pull Requests plugin. + 24:34 Investing in AI ‘big bets’. + 26:29 Scott’s mysterious YouTube unreleased feature. + 27:11 3-minute YouTube shorts. - Wes’ TikTok. + 28:29 GitHub Marketplace. + 32:18 Copilot Workspace. + 34:53 Copilot Workspace features yet to come. + 36:25 GitHub Spark. - Bolt.new. * 42:44 Final thoughts on Copilot vs Cursor. * 44:03 What products do you think are in trouble? * 50:26 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Waymo. * Wes: Waymo.
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
Scott and Wes talk with Andrea Giammarchi (aka WebReflection) about his projects, including LinkDOM and PyScript, and the exciting future of running Python in the browser via WebAssembly.
Show Notes * 00:00 Welcome to Syntax! * 01:04 Andrea’s background and early work + LinkDOM * 07:25 Brought to you by Sentry.io * 09:56 Pyscript * 14:31 Why run Python in the browser? * 20:17 Using WebAssembly to run different languages in JS * 23:33 The advantages of WebAssembly * 25:55 What excites Andrea about WASM + Proposal: ESX as core JS feature * 31:10 What is WASI? * 32:21 Andrea’s experience with IOT and microcontrollers * 35:35 How can the JS ecosystem be improved? * 38:07 Should we have reactivity in the browser? + Signals * 41:06 Andrea’s thoughts on server-side APIs * 43:43 Andrea’s thoughts on TypeScript * 49:13 Sick Picks & Shameless Plugs
Sick Picks * Andrea: ESP32
Shameless Plugs * Andrea: Andrea’s X / Twitter
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
Scott and Wes continue to share hair-raising developer horror stories submitted by listeners. From accidentally severing access to crucial databases to a limitless coupon code that cost millions, these tales will have you on the edge of your seat. Tune in for more wild mishaps, close calls, and hard-learned lessons from the dark side of coding. You won’t want to miss this second round of spooky web dev stories!
Show Notes * 00:00 Welcome to Syntax! * 00:49 Brought to you by Sentry.io. * 01:32 ‘Monkey Business’ * 03:21 ‘Spooky Integration Bug’ * 06:25 ‘Worst Case Wake Up’ * 08:57 ‘Severed Trunk and Missing Backups’ * 11:21 ‘Brute Force Too Brutal’ * 12:30 ‘A Dorm Room Bee Movie’ * 15:46 ‘No Goats’ * 16:45 ‘Pokémon Problems’ * 18:08 ‘Late Night’ * 22:21 ‘Bootcamp Bungle’ * 26:19 ‘Film School F Up’ * 30:26 ‘AWS Clusterf’ * 31:26 ‘Limitless Coupon Disaster’ + Episode #451, Episode #609. * 33:55 ‘Ruined Vacation’ * 35:47 ‘Console.swear’ * 37:28 ‘Another Coupon Disaster’ * 40:46 ‘The Doctor’ + Wes’ Burner List. * 43:01 ‘Marketing Nightmare’ * 45:10 What did we learn this year? + 45:12 You need processes. + 48:42 Ask for help. + 49:44 Dry-run queries + soft delete. + 51:14 Code reviews. - Episode #830. + 52:11 Version control. * 53:58 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Nobody Wants This. * Wes: Truffle Hot Sauce.
Shameless Plugs * Scott: syntax.fm. * Wes: syntax.fm/spooky.
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
Scott and Wes unpack the spookiest web dev stories submitted by listeners in this episode. From forgotten MX records to infinite loops, these real-life coding horrors will have you double-checking your WHERE clauses and git backups.
Show Notes * 00:00 Welcome to Syntax! * 00:39 Brought to you by Sentry.io. * 00:48 What is Spooky Stories? + Submit a story. * 02:45 ‘Needs a Coffee’ * 04:43 ‘Deleting Github’ + Defunkt X Post. * 07:42 ‘Rejected’ * 09:08 ‘Infinite Loop’ * 09:26 ‘MySqueeel Horror’ * 11:02 ‘Pet Company’ * 12:09 ‘Git Corrupted’ * 12:57 ‘Circular Horror’ * 14:25 ‘The Haunting of the Forgotten MX Records’
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
Scott and Wes talk with Søren Bramer Schmidt, Founder and CEO of Prisma, about database best practices, including the latest developments in serverless, local-first, and typed SQL solutions.
Show Notes * 00:00 Welcome to Syntax! * 02:55 Søren’s thoughts on GraphQL * 03:53 Brought to you by Sentry.io * 06:57 Common database mistakes * 08:52 Prisma’s stability and user experience * 10:42 Typed SQL and advanced querying + Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM + Prisma Optimize * 20:47 Serverless challenges and solutions + Prisma Accelerate * 27:11 Cloudflare’s potential to dethrone AWS * 29:13 Prisma and local-first development + Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024 * 35:30 Making local-first development mainstream * 40:10 Challenges with async * 42:43 Søren’s thoughts on Drizzle * 43:41 Søren’s favorite database * 47:21 The read your writes problem * 48:58 Prisma hosted Postgres * 51:44 Sick Picks & Shameless Plugs
Sick Picks * Søren: Cursor
Shameless Plugs * Søren: + 1: Prisma Optimize + 2: Prisma Postgres (coming soon)
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
Get your productivity game on point! Scott and Wes serve up the best tools for web developers, covering everything from password managers and to-do apps to mind-mapping tools and little scripts that make life easier. Plus, find out what snippet managers they swear by and how they keep their email under control.
Show Notes * 00:00 Welcome to Syntax! * 03:01 Brought to you by Sentry.io. * 03:44 Syntax meetup San Francisco. * 04:26 Breakdancing update. + Kid Cruz Instagram. * 05:18 Password management. + 1Password. * 08:30 Apple stomping on apps. * 09:50 To-do applications. + Things. + Getting Things Done. + Tweek. * 18:18 To-do in code. + Todo Tree. + Better Comments. * 20:21 Snippets. * 25:55 Mind-mapping. + MindNode. + FigJam. * 29:01 Note-taking. + Obsidian. + Stashpad. + ObservableHQ. + Jupyter. * 36:34 Little scripts. + Script Kit. * 39:50 Email. + Superhuman. * 48:11 Some honorable mentions. + Habitpath.io. + Focus. * 52:10 Sick Picks + Shameless Plugs.
Sick Picks * Scott: The Legend of SwordQuest. * Wes: The Economics of Everyday Things.
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
CJ joins Scott and Wes to dive into why he’s all-in on Hono, a fast and lightweight web framework for every JavaScript runtime. From familiar route creation to type-safe middleware, find out how Hono keeps things simple, powerful, and ready to use inside Next.js.
Show Notes * 00:00 Welcome to Syntax! * 00:46 Brought to you by Sentry.io. * 01:11 What is Hono? + Watch CJ’s Video Here * 03:21 Syntax Meetup San Francisco. * 04:02 Why I like Hono, and why you should try it. * 04:08 Familiar route creation. + Connect: an extensible HTTP server framework for node. * 05:45 Supports every JS Runtime. * 07:00 How a service worker works. * 08:48 Helpers. * 09:16 Middleware. * 10:40 Sentry middleware. * 10:55 JSX support. * 13:21 Organizing route handlers while keeping Types. * 14:24 Type safety. + hono-open-api-starter. + zod-openapi. * 15:46 Defining base type. + Pinojs * 17:36 Validation. * 18:52 Hono RPC client. * 22:09 Hono inside of Next.js. * 23:30 Testing. * 25:22 The community. * 27:34 Type 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
Do you really need a framework? Scott and Wes bring on CJ to break down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity. They dive into everything from rendering strategies to auth solutions, deployment options, and how to choose the right tool for the job.
Show Notes * 00:00 Welcome to Syntax! * 01:32 Brought to you by Sentry.io. * 03:17 What is a framework? + Syntax Meetup San Francisco. * 08:21 Examples of frameworks for Vue, Svelte and Angular. * 12:39 What questions do you need to answer? * 12:44 What or where do you need to ship? * 14:12 How do you render it? * 18:22 Where are you deploying it? * 24:03 How do you store data? * 24:09 Existing API. * 26:03 Integrated server. * 26:22 Database. + Supabase. * 26:59 Does it have RPC or server actions? * 34:27 Do you need authentication? * 38:45 Auth packages. + LuciaJS. + Lucia announcement. + Lucia preview. + NPM Arctic Oauth. + Auth utilities. + Better-Auth. + Scott’s Drop-In Auth. * 42:10 Does it include email? * 42:52 What does the TypeScript story look like? * 43:32 How does it handle images? * 44:35 How do we work with CSS? * 46:02 How long has it been around? * 47:37 How mature is the ecosystem? * 48:35 Is there community support? * 50:21 Portability. * 51:18 Hiring. * 52:17 Sick Pick + Shameless Plugs.
Sick Picks * CJ: Infinite Health. * Scott: USB A to C adapters. * Wes: Citric Acid.
Shameless Plugs * Scott: Syntax 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
Scott and Wes serve up ways developers can use AI tools like Claude, GitHub Copilot, and more to boost productivity. From error tracing to refactoring code and automating mundane tasks, they break down how AI can handle the heavy lifting so you can focus on the fun stuff!
Show Notes * 00:00 Welcome to Syntax! * 01:23 Brought to you by Sentry.io. * 01:43 Using AI tools effectively. * 05:29 Stack trace reading and error finding. * 08:37 San Francisco Syntax Meetup! * 09:19 Research and validation. * 12:19 Completing mundane tasks. * 14:10 Refactoring. * 18:56 Simple typescript. * 20:29 Summarizing docs and source code. * 23:56 Quick hits.
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
Scott and Wes talk with Tanner Linsley, creator of TanStack, about the React ecosystem, and the evolution and futue of TanStack’s suite of tools, including TanStack Router and TanStack Start.
Show Notes * 00:00 Welcome to Syntax! * 02:59 What is TanStack Start? + UnJS + Nitro + Vinxi * 06:17 What is the Vite Environment API? * 07:21 Was it always the plan to use Vite? * 08:02 TanStack Router and client-side vs server-side * 16:18 How TanStack Start will work * 27:26 Moving from Create React App to TanStack * 30:42 Brought to you by Sentry.io * 31:15 Will TanStack Router ever support other frameworks? * 33:54 How will TanStack Start handle forms? * 36:13 TanStack Virtual * 39:41 What is the future of TanStack? + Convex * 42:49 How Tanner writes documentation * 47:55 Server functions and middleware * 54:41 When will TanStack Start be in beta? * 57:00 Sick Picks + Shameless Plugs
Sick Picks * Tanner: + LG C4 + Ultra Slim Fit TV Wall Mount
Shameless Plugs * Tanner: + TanStack Blog + @TKDodo
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
Scott and Wes answer your burning questions! They cover everything from moving off create-react-app and the benefits of Next.js, to transitioning from junior to senior dev, working with QA teams, and even dive into game development with Godot.
Show Notes * 00:00 Welcome to Syntax! * 00:31 DenverScript. * 03:14 Brought to you by Sentry.io. * 03:54 Question 1: Moving off create-react-app. + Proposal: TC39 Import Attributes. + HTML iframe srcdoc Attribute. * 09:10 Question 2: Working together with QA teams. * 13:46 Question 3: Benefits of React with Next.js Framework. + Svelte Turnstile. + Next.js Pages Router vs Next.js App Router. * 17:38 Question 4: What are your real names? * 19:22 Question 5: Thoughts on RTO and WFH. * 27:50 Question 6: Where can I find you Sick Picks? + Sick Picks. + Sick Picks Scraper. * 29:34 Question 7: From JR developer to SR developer. * 31:41 Question 8: Godot and game development. + Godot Engine. + GDScript. + Phind. * 39:37 Question 9: Inherent advantage between Callbacks and Events. * 44:44 Question 10: Transitioning to freelance with corporate experience. * 49:44 Question 11: Dealing with negative feedback. * 57:05 Sick Picks & Shameless Plugs.
Sick Picks * Scott: audiobookshelf, Plappa App. * Wes: New Syntax Swag.
Shameless Plugs * Scott: Syntax 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
From CAPTCHAs to shadow banning, Scott and Wes break down the best strategies for keeping your app safe from spam and fraud. They cover tools like email verification, rate limiting, shadow banning, and more to protect your users and data.
Show Notes * 00:00 Welcome to Syntax! * 00:15 The problem. * 02:47 Brought to you by Sentry.io. * 04:23 CAPTCHA. * 06:24 Data collection. * 07:11 Stripe Radar score calculation. * 09:12 Rate limiting. * 11:34 Shadow banning. * 13:53 Email verification. * 15:38 Tie to accounts. * 16:23 Tied to real identity. * 19:36 Manual approval. * 21:19 Blocking ASN. * 23:17 Honey pot field. * 24:28 SMS verification. * 25:05 Mechanical Turk.
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
Scott and Wes talk with GitHub’s Sarah Vessels about the ins and outs of code reviews, their critical role in collaborative development, and tips for making your reviews more effective.
Show Notes * 00:00 Welcome to Syntax! * 00:59 What is a code review? + How to review code effectively: A GitHub staff engineer’s philosophy * 04:18 Strategies for an effective code review processes * 06:59 Should you test and fix in the same pull request? * 07:57 How to ask for code reviews * 12:12 Feature flags and their role in code management + flipper + scientist + scientist - JS * 20:03 Who should do code reviews? * 23:34 Should you review your own code? * 25:04 Brought to you by Sentry.io * 25:29 Code comments vs pull requests * 27:35 Dealing with egos in the code review process * 30:18 What automations are essential? + project-pull-mover * 34:35 Underutilized tools + GitHub Protips: Tips, tricks, hacks, and secrets from Sarah Vessels * 36:25 Commit strategies and squash * 39:30 GitHub’s branching system * 41:14 Git gone wrong * 42:30 What is the correct way to merge into main? * 43:47 What was it like working on GitHub Sponsors? + GitHub Sponsors + thanks.dev * 46:58 Sick Picks & Shameless Plugs
Sick Picks * Sarah: https://store.steampowered.com/steamdeck
Shameless Plugs * Sarah: https://github.com/sponsors
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
Scott and Wes share 14 game-changing tips they wish they’d known earlier in their web dev careers. From embracing tools to learning by doing, these insights will help you level up your skills faster!
Show Notes * 00:00 Welcome to Syntax! * 02:09 Brought to you by Sentry.io. * 03:45 13 Web Development Tips I Wish I Knew Sooner. * 03:49 Number 1 - No one is all-knowing. * 05:39 Number 2 - People with extremely strong opinions. * 11:13 Number 3 - Using tools to help you isn’t a bad thing. * 12:34 Number 4 - Approach new technology with a mixed dose of skepticism and open-mindedness. * 16:05 Number 5 - Things make more sense the more you actually use them. * 18:40 Number 6 - Willingness to change your mind is a strong skill. * 20:06 Number 7 - Doing is better than reading or watching. * 22:29 Number 8 - Asking questions is good. * 26:45 Number 9 - Everyone doesn’t learn the same. * 30:41 Number 10 - You don’t need a SAAS for everything. * 35:53 Number 11 - You don’t need to worry about scale. * 37:49 Number 12 - Learning the fundamentals will always pay off. * 40:07 Number 13 - Working in public will make you more hireable. * 42:48 Number 14 - You can interview without accepting a job offer. * 45:29 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Glasses. * Wes: Oxo Whisk, Danish Whisk.
Shameless Plugs * Scott: Syntax 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
Scott and Wes serve up the pros and cons of modern authentication methods like magic links, 2FA, and SMS codes. Learn how each technique works, the security trade-offs, and what might be the best approach for your apps.
Show Notes * 00:00 Welcome to Syntax! * 00:11 Brought to you by Sentry.io. * 00:34 Logging in Verification. * 01:09 Magic Links. + 01:24 Pros of magic links. + 03:50 How magic links work. + 04:25 Cons to magic links. * 06:21 Magic Sessions. + 06:37 Using email verification. + 07:12 Using code verification. + 07:55 Previously trusted device verification. + 08:14 Classic email and verification process. + 09:54 Email Code. * 10:51 Gmail verification options. * 12:01 OAuth.
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
Scott and Wes talk with Topher Martini, a former Engineering Program Manager at Apple, about his extensive experience over two decades in the tech industry. Topher shares his journey at Apple, from starting as an intern in 2001 to working on groundbreaking products like iPhone, iPad, and Vision Pro.
Show Notes * 00:00 Welcome to Syntax! * 00:40 What it was like working on the first iPhone * 04:47 How Topher landed at Apple early in his career * 08:40 How Apple’s culture has changed over time * 11:03 What makes a great employee? * 16:37 Tips for better communication * 17:54 Are meetings a good means of communication? * 20:05 What makes a bad employee? * 22:21 What does it take to get hired at a company like Apple? * 26:16 Brought to you by Sentry.io * 26:55 The relationship between passion and career * 29:08 Topher’s advice for growing in your career * 31:50 What is a sabbatical? * 33:36 Teaching tech to kids * 35:49 Topher’s work on self-driving cars + Aurora * 39:33 AI’s impact on tech and the future * 41:22 What can developers do to stand out and be relevant in a world of AI? * 43:30 Topher’s thoughts on career development + One Small Step Can Change Your Life: The Kaizen Way + Paul Copplestone * 44:47 What is a light field camera? * 46:47 Spatial media and Vision Pro * 48:10 The nifty stuff in Topher’s background * 49:53 Something wild that happened while Topher was at Apple * 51:34 Sick Picks & Shameless Plugs
Sick Picks * Topher: + Bambu Lab P1S 3D Printer + Bento 3D
Shameless Plugs * Topher: Topher’s 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
In part 2 of covering the best apps for web developers, Scott and Wes dive into must-have tools that will level up your workflow. From screenshot utilities to development tools and video production apps, this episode is packed with recommendations to boost your productivity and creativity.
Show Notes * 00:00 Welcome to Syntax! * 01:44 Brought to you by Sentry.io. * 02:30 Utilities. + 02:48 BetterTouchTool. + 09:31 Hyperkey. + 11:46 Amethyst. + 12:51 Klack. + 13:47 Bottom (Btm). + 14:54 Pearcleaner + 16:40 App Cleaner. + 17:35 Rocket Emoji. + 20:27 Clippy. * 23:37 Screenshots and Screen Recordings. + 24:05 Dropshare. + 25:29 OBS with Source Record. + 29:20 Screen Studio. + 30:58 Detail.co. + 31:22 Cap. + 32:08 Kap. + 32:46 CleanShot X * 34:15 Video and Production. + 34:24 DaVinci Resolve. + 37:46 Affinity Pro. + 39:42 PrincipleForMac. + 40:39 Inkscape. * 41:34 Development tools. + 41:38 DBngin. + 43:12 TablePlus. + 45:48 MongoDB Compass. + 46:14 Proxyman. + 47:00 Wireshark. + 47:31 Polypane. + 48:30 Setapp. + 49:44 SVG Grabber. * 51:42 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Untold Sign Stealer. * Wes: Magentiles Marble Run.
Shameless Plugs 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
Scott walks Wes through the new Syntax Production Assistant Desktop App, designed to streamline and automate their complex publishing process. From tech stack choices like Svelte5 and Rust to AI-driven features, they dive into how this tool keeps everything consistent.
Show Notes * 00:00 Welcome to Syntax! * 00:44 Brought to you by Sentry.io. * 01:37 What was the idea? * 05:42 The tech. + Svelte5, Tauri, Rust, FFMPEG. * 08:32 Markdown editor. + ink-mde, Dillinger. * 09:32 Epoch timestamps. + Epoch.vercel. * 10:01 Updating front-matter. * 10:10 Dexie.js function. * 11:25 Backing up data. * 11:58 Rust functions. * 12:58 Why a desktop app and not a website? * 14:38 Some small AI features. * 16:26 Challenges with OAuth. * 20:03 Publishing challenges. * 23:29 Could this work on Windows? * 23:54 Debugging. * 26:23 Deciphering Apple logs.
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
In this episode of Syntax, Wes and Scott talk with Taylor Otwell, the creator of Laravel. Taylor shares insights on his journey from creating Laravel in his free time to building a strong community and user base. He discusses Laravel’s growth, including the major features and tools that were developed over the years. Taylor also shares his outlook on the PHP ecosystem, productivity tips, and plans for Laravel Cloud, a new deployment platform for PHP and Laravel applications.
Show Notes * 00:00 Welcome to Syntax! * 00:29 Laracon * 03:13 Laravel’s inspiration and features + Intertia + Livewire * 07:18 Why don’t we have a “Laravel for JavaScript”? * 09:02 What parts of Laravel came first? * 10:07 The Laravel ecosystem + Forge + Vapor * 12:29 Laravel Cloud * 14:00 What parts of Laravel are Intertia and what parts are React? * 15:57 How many people are using Laravel? * 16:59 Taylor’s productivity and development philosophy * 24:43 Brought to you by Sentry.io * 25:19 What makes a beautiful API? * 29:33 Taylor’s thoughts on typing PHP * 30:41 Features Taylor would like to see in PHP * 33:03 What people get wrong about modern PHP * 34:22 PHP stacks and CMSs + Nginx + FrankenPHP + Statamic * 37:30 Taylor’s thoughts on WordPress * 38:14 Lambo memes * 43:44 Taylor’s coding setup + Sublime Text + Vs Code * 45:36 Sick Picks + Shameless Plugs
Sick Picks * Taylor: + Tiny Glade + No Man’s Sky
Shameless Plugs * Taylor: Laravel Cloud
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
Scott and Wes serve up a discussion on AI coding assistants with a deep look at Cursor AI, exploring its unique features like multi-line auto-complete and Smart Rewrites. They also discuss why Cursor’s intuitive UI stands out and tackle the big question: is it worth the investment?
Show Notes * 00:00 Welcome to Syntax! * 01:16 Brought to you by Sentry.io. * 01:48 Handling objections around AI assistants. * 02:55 Context windows and how they’re improving functionality. + Syntax.fm Episode 728 with Kevin Hou of Codeium * 04:08 Cursor’s UI. * 04:51 This is cool, why is it not a plugin? * 08:12 What makes the UI interesting. * 09:13 Smart Rewrites. * 11:44 It can create multiple files. * 13:05 Using the chat interface. * 16:32 Another chat example. * 20:22 The main features of Cursor. * 21:55 Multi-line auto-complete. * 23:55 Using docs for additional context. * 27:26 AI is here to help you, not replace you. * 33:27 Is it worth it? * 33:55 The pricing. * 44:10 Sick Picks & Shameless Plugs.
Sick Picks * Scott: The Iron Historian, Scott’s Salt & Pepper Mills. * Wes: Oxo Salt & Pepper Mills.
Shameless Plugs * Scott: Syntax.fm Zed Theme.
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
Wes unveils his Hack-Week project —a thermal printer controlled by JavaScript that prints out Sentry.io errors in real-time. Scott and Wes dive into the nitty-gritty of how it works, from the ESC/POS protocol to tackling socket issues, and whether the project was worth the effort.
Show Notes * 00:00 Welcome to Syntax! * 00:38 Brought to you by Sentry.io. * 01:10 What is Hack Week? * 01:41 The project. + Follow the posts on X. * 02:40 Why a receipt printer? * 03:55 How do these printers work? + ESC/POS. * 05:20 Communicating with the printer. * 07:24 ESC/POS Encoder. * ESC/POS Encoder. * 08:42 Socket issues. * 09:56 Using Transformers.js to stop ‘toxic comments’. + Xenova’s toxic-bert. + Implementation in Wes’ code. * 10:48 Back to socket issues. * 12:18 Integrating with Sentry. * 15:01 Printing images with Playwright. * 16:17 Was it worth it?
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
In this episode of Syntax, Wes and Scott talk with Daniel Thompson-Yvetot about Tauri. They dive into what Tauri is, the motivations behind its development, its open-source ecosystem, use cases, and more.
Show Notes * 00:00 Welcome to Syntax! * 02:01 What is Tauri? * 02:59 What’s new in Tauri 2.0? * 06:41 The benefits of Tauri over Electron * 11:28 Can you use Node? * 14:21 Mac, Linux, and Windows + Verso + Servo * 25:05 How does Tauri make money? + CrabNebula * 30:05 Brought to you by Sentry.io * 30:30 Accessing Swift from JavaScript * 31:44 What’s the hardest part of a project like this? + Haptics Plugin * 37:00 Some of the apps that have shipped with Tauri + Cody + GitButler + Tauri Discord + Awesome Tauri * 43:18 The future of Tauri * 50:23 Sick Picks & Shameless Plugs
Links * Rustlings * Cassidy Williams
Sick Picks * Daniel: 5secondfilms
Shameless Plugs * Guest: Manufacturing European Software (Coming Soon)
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
In this Potluck episode of Syntax, Scott and Wes answer your questions, from weighing the trade-offs between numerous small npm packages and a few larger ones to managing the challenges of work-from-home life. They also explore CSS modules, strategies for shrinking JavaScript bundles, and even where to find the best replacement ear cups for your headphones.
Show Notes * 00:00 Welcome to Syntax! * 00:38 Commentating basketball. * 01:16 Brought to you by Sentry.io. * 02:09 The video podcast doesn’t translate well to audio. * 04:08 Many small npm packages vs a few large. * 09:55 Developers dealing with WFH, ADHD, and kids. * 15:59 CSS modules for scoping styles to components. * 20:55 Scoped CSS in React? * 23:21 Reducing JS bundle sizes. + Bundle Phobia. + Javascript Bundle Analysis [Beta]. * 29:44 Balancing learning, doing, and teaching. * 33:04 Making maps local first. * 36:20 How to pronounce ‘schema’. + Wes Bos Tweet. * 37:09 HTML tag. * 40:11 Where to get replacement ear cups for headphones? + wickedcussions. + Scott’s Audeze Headphones. * 42:21 ESLint and hiding errors. * 48:48 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Allen Wrench Set. * Wes: Clarkson’s Farm – Amazon Prime.
Shameless Plugs * Wes: Syntax.fm, 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
Scott and Wes serve up a hasty discussion on side projects, sharing their latest Hack Week experiments and tips on how to turn fun ideas into profitable ventures. They cover everything from finding inspiration to choosing the right tech, and even offer advice on how to finish what you start.
Show Notes * 00:00 Welcome to Syntax! * 01:11 Brought to you by Sentry.io. * 01:27 Wes’ Hack Week project. * 02:30 Scott’s Hack Week project. * 04:18 Where do you get ideas for side projects? * 09:22 End goals for a side project. * 14:47 Other end goals. * 16:45 What tech should you use? + drop-in. * 20:34 Keeping notes. * 23:14 Finishing side projects. * 26:39 Shameless Plugisode!
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
In this episode of Syntax, Wes and Scott talk with CJ Reynolds about the resurgence of meetups in a post-COVID world. They discuss the benefits of attending and speaking at meetups, and the logistics of organizing them. CJ also shares his experiences running the DenverScript meetup, including sourcing speakers, finding venues, and ensuring a welcoming community.
Show Notes * 00:00 Welcome to Syntax! * 01:35 Brought to you by Sentry.io * 01:49 CJ’s history hosting meetups + DenverScript + Code Talent * 06:35 How do you structure a meetup? * 09:50 How do you raise awareness for a meetup and get people to attend? + Meetup.com + Guild * 13:27 How to pay for a meetup * 15:22 How to get speakers at meetups * 16:50 The length of these talks * 17:03 Does live-streaming hurt attendance? + Syntax 806 - The King of Drag and Drop: Alex Reardon * 19:32 Is there a vetting process for finding speakers? + Syntax 019 - How to Get Into Speaking at Conferences * 24:26 A meetup doesn’t have to be talks + Develop Happy Hour * 27:48 What’s the worst part about hosting a meetup? * 29:37 What was your first meetup like? * 33:27 What’s the best meetup you’ve been to and why? * 37:10 How to be a good attendee * 40:45 Are meetups back? * 44:00 Tips for organizing a great meetup * 45:29 How to find a meetup * 47:37 Sick Picks & Shameless Plugs
Sick Picks * CJ: Fillo’s Walking Tamales
Shameless Plugs * CJ: + DenverScript + You Should Use Hono in your Next Project
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
Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow.
Show Notes * 00:00 Welcome to Syntax! * 01:03 Brought to you by Sentry.io. * 01:27 File management applications. + 01:43 DaisyDisk. + 04:19 Marta. + 07:50 EasyFind. + 10:16 Czkawka. + 12:53 Backblaze. + 14:40 Hazel. + 17:42 AutoMounter. * 18:43 Media applications. + 18:52 Automator HIEC to JPG. + 20:04 Rant on QuickView. + 20:32 DVD idea. + 22:06 IINA. + 24:07 Capture One. + 25:02 YouTube Enhance. + 27:16 HandBrake. + 28:05 MakeMKV. + 30:33 Overkill for Mac. + 33:42 Search by Image. + 37:09 eqMac. * 37:37 Utility applications. + 37:52 Stats & iStat Menu. * 40:19 Alternatives to popular Mac applications. + 40:23 Ice. + 41:03 PearCleaner. + 43:08 Numi. + 44:17 Bottom (btm). + 44:53 Sip Color Picker. * 50:25 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Wilde Chips * Wes: Apple TV+: The Big Conn
Shameless Plugs * Scott: Syntax 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
Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.
Show Notes * 00:00 Welcome to Syntax! * 00:33 Breakdancing in the Olympics. * 05:29 Brought to you by Sentry.io. * 05:44 Why your CSS sucks. * 07:01 You’re styling the wrong element. * 11:01 Nesting too deep. * 12:37 You don’t understand specificity. * 14:56 Your classes don’t use a system. * 16:24 You’re using values instead of CSS vars. * 20:16 You don’t understand block vs inline vs inline-block. + CSS Logical Properties * 21:16 You aren’t using the right tool for the job. + CSS Flexbox, CSS Grid. * 24:15 You’re setting the value in too many places. * 24:31 You’re scoping to tightly or not tightly enough.
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
In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem.
Show Notes * 00:00 Welcome to Syntax! * 00:34 What is Deno? * 05:08 Deno 2.0 * 07:49 NPM compatibility * 09:40 What parts of Node aren’t doable in Deno? * 11:22 Do we need a hard break from Require? * 13:51 Package management * 16:25 Security and performance benefits of Deno * 20:57 Brought to you by Sentry.io * 20:57 Thoughts on Bun and Node additions * 26:25 Ryan’s favorite Deno projects + Lume + Fresh + webgpu-examples + gpucraft minecraft clone + deno + webgpu + gpucraft example + Shaderplay + Orillusion * 28:42 Will we ever see a unified file system API? * 31:49 Typescript * 36:12 Jupyter Notebooks with Deno + Polars * 39:11 AI and WASM in JavaScript * 42:01 Deno 2.0 features and future * 43:08 Sick Picks & Shameless Plugs
Sick Picks * Ryan: McCarren Park
Shameless Plugs * Ryan: https://deno.com/enterprise
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
In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more.
Show Notes * 00:00 Welcome to Syntax! * 02:33 Brought to you by Sentry.io * 03:25 Why HTML is important * 06:52 Semantic vs non-semantic * 07:58 The basic structure of an HTML page + HTML elements reference + The Main element * 08:45 Doctype * 15:24 Nav * 18:47 Section * 20:41 Aside * 22:09 Article * 22:54 Span * 27:18 Why use a span when you have a div and a paragraph tag? * 29:29 Figure and Caption * 31:16 Fieldset * 31:53 UL vs OL * 32:44 DFN + The Definition element * 34:16 Form * 36:56 Button vs Anchor * 38:22 Headings + 674 - A11y Treats - Heading Design * 40:21 Output + The Output element * 41:46 Dialog * 42:04 Tables * 44:03 Media + media-chrome * 45:06 Canvas + https://githubuniverse.com/ + https://maximeheckel.com/ * 46:07 On graphics programming * 47:38 Search + 354 - The Surprisingly Exciting World of HTML Elements * 48:27 Sick Picks + Shameless Plugs
Sick Picks * Scott: 2Pack Traditional Natural Bamboo Wok Brushes * Wes: Logitech MX Master 3S
Shameless Plugs * Syntax YouTube Channel * The Easiest Way to Infinite Scroll with React | Full Example
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
In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.
Show Notes * 00:00 Welcome to Syntax! * 00:46 Brought to you by Sentry.io. * 01:35 Scroll-driven animations. + Syntax 695: 5 New CSS Features You Should Know + Scroll-driven animations demos and tools. * 04:13 @keyframes. * 05:22 animation-timeline. * 11:35 animation-range. * 08:49 View-based timelines. * 17:45 Neat uses: Dave Rupert on styling :stuck.
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
In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more!
Show Notes * 00:00 - Welcome to Syntax!. * 01:43 - Brought to you by Sentry.io. * 02:19 - The evolution of CSS. * 04:07 - CSS versioning and spec levels. + CSS RFC. * 17:49 - Use-cases for allow-discrete. * 20:34 - State queries. * 24:19 - Where does the baseline data come from? * 25:17 - Will the RFC become official? + The latest in Web UI (Google I/O ‘24). * 27:33 - New features Una is excited about. * 29:44 - Select. + https://open-ui.org/components/customizableselect. + https://codepen.io/argyleink/pen/YzoEPOG. * 38:31 - New features Adam is excited about. * 39:24 - text-box-trim. * 40:59 - State queries. * 54:56 - Sick Picks + Shameless Plugs.
Sick Picks * Una: Logitech MX Master 3 * Adam: Teenage Engineering K.O. II
Shameless Plugs * Una: Una.im * Adam: The CSS Podcast
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
In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape.
Show Notes * 00:00 Welcome to Syntax! * 00:36 Brought to you by Sentry.io * 01:24 Overview and features of daily.dev * 07:05 daily.dev's origin story * 10:06 How Product Hunt fueled initial growth * 12:21 Monetization and business model * 13:53 Content and user experience + Syntax Squad * 22:21 Written content vs video content * 24:29 Tech stack + Terraform + Pulumi + React + Vercel + Fastify + Postgres + Go * 25:37 Building a positive community * 30:32 Moderation and tagging * 35:03 Francesco's favorite place to publish right now * 36:56 Quadrupling down on Rust + Rust * 39:38 Francesco's favorite Rust framework + Actix * 41:18 Sick Picks & Shameless Plugs
Sick Picks * Francesco: daily. dev
Shameless Plugs * Francesco: Francesco's 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
In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more!
Show Notes * 00:00 - Welcome to Syntax! * 01:48 - Brought to you by Sentry.io * 04:37 - The future of JavaScript frameworks * 09:09 - How to use Caddy for local development + SvelteKit + Vite * 14:27 - When to use an API + Strapi * 17:38 - Where does Scott get his amazing t-shirts? + Sentry.shop + Syntax Snack Pack * 21:33 - Best screwdriver for kids toys + PicQuic Sixpac Plus + LTT Screwdriver * 24:31 - Strategies for database design + MongoDB + Prisma * 30:21 - Do we need frameworks? + 796 - Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native + Frontend Masters * 32:19 - Best tech stack for building a basic login system + 336 - How To Build Your Own Auth * 37:56 - Syntax video episodes * 40:25 - Component props in JSX * 45:26 - Sick Picks & Shameless Plugs
Sick Picks * Scott: Loop Quiet Ear Plugs * Wes: Gecko's Toes Water Hose Rack
Shameless Plugs * Scott: 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
In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them.
Show Notes * 00:00 - Welcome to Syntax! * 01:30 - Brought to you by Sentry.io. * 02:11 - What makes a good CSS component system? * 07:54 - Component vs part of a component * 13:26 - CSS Modules * 15:56 - Scoped CSS + @scope - (82% support!) ff behind flag - https://developer.mozilla.org/en-US/docs/Web/CSS/@scope * 21:07 - How is Panda different from style components? + Panda + StyleX * 00:00 - Utility CSS + TailwindCSS + Uno * 31:08 - Utility Sprinkles * 34:13 - CSS variables + https://open-props.style
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
Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks.
Show Notes * 00:00 Welcome to Syntax! * 01:18 Brought to you by Sentry.io. * 01:51 What Alex does at Atlassian + react-beautiful-dnd + Pragmatic drag and drop * 04:38 What makes drag and drop tricky. * 06:38 Use-cases. * 10:54 What security is in place? * 12:30 How to make it feel native. * 19:20 Is the drag and drop spec ongoing? * 20:03 How do you build this headless? * 21:33 How does drag and drop work with frameworks? * 23:48 Making drag and drop feel the same across mobile and desktop. * 26:09 What's the key to really good drag performance? * 29:58 How do you make drag and drop accessible? * 34:57 Pragmatic drag and drop code vs application code. + Shoelace + shadcn * 40:00 How does testing work? + Playwright + Cypress * 43:15 Internal adoption at Atlassian. * 44:27 Working on high-impact projects. * 49:15 Versioning and internal adoption at Atlassian. * 51:29 Sick Picks + Shameless Plugs.
Sick Picks * Alex: Coffee, James Hoffmann YouTube Channel.
Shameless Plugs * Alex: Dom Events.
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
Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem.
Show Notes * 00:00 Welcome to Syntax! * 01:41 Brought to you by Sentry.io. * 02:28 The State of React 2023. * 03:11 The Main API Painpoints. + 04:31 forwardRef. + 05:27 memo. + 06:39 Context API. + 07:18 StrictMode. + 08:45 Double rendering. + 09:36 State management. * 11:58 Hooks Pain Points. + 12:11 useEffect. + 12:33 Dependency arrays. * 13:11 New API Pain Points. + 13:19 React Server Components. + 14:40 Taint API. * 15:19 Libraries. + 17:02 Jotai. + 17:45 Apollo Client. + 19:05 Redux. + 20:57 Redwood. + 21:26 React Aria. + 21:55 Astro. + 22:04 The most negative. * 23:35 Component Libraries. * 25:50 Other Component Libraries. + 25:53 Mantine. + 27:47 Details element. + Tolin.ski/demos. + 28:59 Honorable mentions. * 29:07 Animations. * 29:28 Data Visualization. * 31:26 CSS Tools and Libraries. * 33:14 Styled Components. * 34:16 Meta Frameworks. * 38:50 Hosting. * 40:08 Other Services. * 40:45 Back-end language trivia. * 43:00 State management. * 43:40 Data Loading. * 44:08 Other Tools. * 44:09 Testing Libraries. * 44:45 React Renderers. * 47:58 Podcasts, thank you! * 48:14 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Thermacell. * Wes: Nerf Guns
Shameless Plugs * Wes: Syntax.fm.
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
Scott and Wes debate whether your website really needs JavaScript to function. They explore the principles of web standards, progressive enhancement, and test popular websites like Shopify and Netflix to see how they perform without JavaScript.
Show Notes * 00:00 Welcome to Syntax! * 00:11 Take 2 * 01:43 Brought to you by Sentry.io. * 02:19 The clip summarized. + 03:16 Your website should load, be readable and be (mostly) styled without JavaScript. + 07:32 Web standards first. If it can be done without JavaScript, it should be. - 08:09 What if the CSS doesn’t load? - 10:20 Linking - 10:24 Forms. - 12:11 Links (Duh, but also c’mon!) - 12:35 Query parameters. + 13:57 Server render if possible. * 15:20 Progressive Enhancement. + 17:24 CSS Page Transitions. * 19:07 Let’s test websites out. + 19:15 Shopify. + 22:16 Syntax.fm. + 25:23 Netflix. - 27:27 Local first and offline service workers. + 29:27 TikTok. + 29:33 GitHub.
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
Scott and Wes chat with Glauber Costa from Turso about the evolution of databases and the fascinating technology behind Turso. They dive into topics like the benefits of massive multi-tenancy, vector search, and why Glauber made the switch from NoSQL to relational databases.
Show Notes * 00:00 Welcome to Syntax! * 00:36 Turso’s relationship with Drizzle. * 02:10 What is Turso? * 04:23 Brought to you by Sentry.io. * 04:48 Using libSQL without Turso. * 06:21 An explanation of Vector Search. * 07:16 Vector databases are being ‘Sherlocked’ by larger databases. * 09:24 Why did you move from NoSQL to Relational? * 12:00 Allows for massive multi-tenancy - what does that mean? * 15:27 Transactional schema changes. * 16:30 Why would you want 10,000 databases? * 19:02 What makes SQLite cheaper? * 22:59 The strategy for building a business around an inexpensive tool. * 26:13 Pull requests and branching within SQLite. * 28:52 Database snapshots for rollbacks. * 31:14 Driving the cost of a database to zero allows for rethinking architecture. * 32:35 SQLite informing Turso’s edge functionality. * 36:56 Automatic replica database syncing. * 39:10 Is the database a bottleneck? * 39:25 Embedded Replicas. * 40:04 How do embedded replicas handle conflict resolution from offline users? * 41:43 If the server is offline, can the database live in the client or WASM? * 43:09 Conflict resolution. * 44:47 What makes Turso stand out? * 47:51 What was it like working on the Linux Kernel? * 51:57 Do you use Linux? * 52:46 Sick Picks & Shameless Plugs.
Sick Picks * Glauber: Understanding yourself, What is Aphantasia.
Shameless Plugs * Glauber: React Rally Park City, UT, Turso, Laravel.
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
Scott and Wes serve up a gameshow-style quiz with STUMP’d, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights!
Show Notes * 00:00 Welcome to Syntax! * 01:17 Brought to you by Sentry.io. * 02:03 The longest game of Rock, Paper, Scissors. * Round 1 * 03:22 In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other? * 05:56 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits? * Round 2 * 09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area. * 11:34 What is the “Temporal Dead Zone” in JavaScript, and how does it relate to variables declared with let and const * Round 3 * 13:29 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue. * 17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM? * Round 4 * 20:05 Explain the process of Critical Rendering Path optimization in modern web browsers * 26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript. * Round 5 * 30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development. * 32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores. * Round 6 * 35:26 Explain the concept of “code splitting” in modern JavaScript applications. * 37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility. * Round 7 * 45:15 Explain the concept of “Server-Sent Events” (SSE) in web development. * 47:37 What’s the difference between contain layout and contain paint? * 49:30 Sick Picks & Shameless Plugs.
Sick Picks * Scott: diskprices. * Wes: Slime Tire Sealant.
Shameless Plugs * Scott: Syntax 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
Scott and Wes serve up six exciting new JavaScript proposals, including Promise.try and Math.sumPrecise. They break down what each proposal means for developers and how these new features could change the way we write JavaScript.
Show Notes * 00:00 Welcome to Syntax! * 01:45 Understanding the stages of JavaScript Proposals. * 04:04 Promise.try - Stage 3. * 05:39 Math.sumPrecise - Stage 2.7. * 07:28 Floating point math. * 09:07 ShadowRealm - Stage 2.7. * 11:39 Brought to you by Sentry.io. * 12:03 Regex Escape - Stage 2. * 13:33 Defer Module Evaluation - Stage 2.7. * 15:09 Iterator Sequencing - Stage 2.
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
In episode 800 of Syntax, Scott and Wes sit down with John Resig, the creator of jQuery, to discuss the current state of React and TypeScript. They dive into the evolution of frontend frameworks, the challenges of server-side rendering, and the tech stack at Khan Academy.
Show Notes * 00:00 Welcome to Syntax! * 00:59 Brought to you by Sentry.io. * 01:32 What is jQuery? * 05:31 Did you anticipate the success jQuery had? * 07:16 allow-discrete, @starting-style. + Install Nothing: App UIs With Native Browser APIs - Scott Tolinski. * 07:54 Building the community around jQuery. * 11:16 jQuery plugins. * 13:00 Did you ever make money from jQuery? * 16:13 What is your role at Khan Academy. * 17:58 What is the tech stack at Khan Academy? * 21:56 Why do you want to change your CSS and JS framework? * 24:03 TypeScript vs Flow. * 25:25 GraphQL federation. * 28:08 What was your frontend framework journey? * 30:23 Is there any part of React you wish would improve? * 32:37 Reservations using React Router. * 33:14 Khan Academy web platform vs native platform. * 35:21 What do you use for state management? * 38:48 What’s harder than it should be on the web today? + Kilian’s Question On X. + Polypane.app. * 42:46 Opinions on JavaScript Sprinkles. * 44:04 What’s with the $ sign in jQuery? * 45:29 The challenges of having your name in such a widely used software. * 51:06 Challenges with server-side rendering in React. * 52:42 Sick Picks & Shameless Plugs. * 54:48 What are the performance issues associated with internationalization? * 56:57 Back to Sick Picks & Shameless Plugs.
Sick Picks * John: Biome, Remix, Lingui.
Shameless Plugs * John: Khan Academy.
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
Scott and Wes serve up the latest and most under-utilized browser APIs that are changing the game for web development. From the @starting-style CSS API to scroll-snap and popovers, they break down how these tools can elevate your projects with minimal effort.
Show Notes * 00:00 Welcome to Syntax! + Install Nothing: App UIs With Native Browser APIs – Scott Tolinski. + Tolin.ski Demos. * 01:03 Brought to you by Sentry.io. * 02:15 When to use these tools. * 03:45 @starting-style CSS API. * 08:23 Transition behavior allow-discrete. + Dialog CSS. * 11:56 calc-size(auto). * 16:19 scroll-snap. + Swiper Indicators. + Slide Show. + Scroll To Options Snap-Additions. + Adam Argyle Tweet. * 22:05 View Transitions. + Cross-document view transitions for multi-page applications * 33:28 Popover API. + Tolin.ski Demos Popover Basic. + Tolin.ski Demos Popover Action. + Tolin.ski Demos Popover Anchor. + Tolin.ski Demos Popover Compat + Tolin.ski Demos Popover Mobile-Nav. * 41:15 Dialog. + Tolin.ski Demos Drawer CSS. * 48:12 Details. + Tolin.ski Cool-Treats Accordion. * 53:26 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Emerge Tools. * Wes: Apple TV+ Hacks.
Shameless Plugs * Scott: Local First from Scratch.
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
Scott and Wes serve up an episode on reverse proxy servers. They discuss popular options like CF Tunnels, Caddy, Nginx, Apache, and more, explaining why you might need one for load balancing, SSL certificates, security, and managing multiple servers.
Show Notes * 00:00 Welcome to Syntax! * 01:30 Brought to you by Sentry.io. * 02:25 What is reverse proxy? * 03:16 Some examples of reverse proxies. * 05:04 Why do you need a reverse proxy? + 05:09 Combining multiple servers. + 06:51 Load balancing. + 07:23 SSL certificates. + 10:30 Security. - 10:37 Conceal your true IP. - 11:24 Access management. + 12:31 Routing static assets. + 13:31 CDN / local. * 15:55 Caddy × websocket 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
Scott and Wes chat with Alex Blokh and Andrew Sherman, the co-founders of Drizzle ORM, about building a modern ORM from the ground up. They dive into the importance of type safety, creating filters with Drizzle, and the differences between Drizzle and other ORMs like Prisma.
Show Notes * 00:00 Welcome to Syntax! + Syntax × Drizzle Swag. * 01:15 What is Drizzle? * 02:36 The genesis of Drizzle. * 04:15 The process of building an ORM. * 05:38 ‘100% Type-Safe’ and why that’s not a great goal. * 07:50 Who is responsible for writing the complicated TypeScript? * 09:40 Is an ORM necessary for anyone working with data? * 12:15 Creating a product that fits different complexities. * 13:19 Brought to you by Sentry.io. * 13:44 Creating filters in Drizzle. Callback-based, or imported. Why? * 19:22 Drizzle vs Prisma vs Kysely. * 22:45 Are you friendly with Prisma? * 23:35 Relational queries. * 25:17 Query vs select. * 27:42 Maintaining so many different technologies. * 30:37 Switching databases. * 31:39 Drizzle Studio. + Drizzle Studio Syntax Theme. * 35:00 Accessing Cloudflare D1 SQLite requires connection through a worker. * 37:40 Drizzle Kit. * 41:37 Will you ever support MongoDB? * 42:10 Supporting PGlite and local data storage landscape. + DrizzleORM v0.30.6 release notes. * 44:00 Being a developer in Ukraine in 2024. + How to support Ukraine: Savelife, United24. * 51:07 Drizzle is expanding. * 53:50 Sick Picks + Shameless Plugs.
Sick Picks Andrew - Smart Swim Goggles.
Shameless Plugs Andrew - Savelife, United24. Scott - Syntax × Drizzle Swag.
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
Scott and Wes tackle a variety of audience questions, from the nuances of over-engineering to the energy consumption of AI LLMs. They also discuss the pros and cons of monorepos, frameworks, and the ever-important question: Do you really need to learn all the developer tooling?
Show Notes * 00:00 Welcome to Syntax! * 00:41 Brought to you by Sentry.io. * 01:07 Challenges around a resume playback function. * 05:56 Why use Google Forms for Potluck questions? * 07:57 What constitutes over-engineering and how to avoid it. * 13:28 Webview vs native component based mobile apps. * 18:06 Running and managing monorepos. * 20:59 Energy consumption of AI LLMs vs static web content. + A guide to LLM inference and performance. + From Words to Watts: Benchmarking the Energy Costs of LLM Inference. * 25:19 Why do we need frameworks? + Frank M Taylor Blog Post. * 33:05 Handling ad-blockers blocking Sentry and other tools. + Syntax GitHub. * 38:25 Creating sites without JavaScript. * 42:49 Do I really have to learn all the various developer tooling? + Wes Bos Tweet. * 44:47 What are the best ways to network and meet other developers? * 50:16 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Tweek App/ * Wes: Rain-X Waterless Car Wash.
Shameless Plugs * Scott: Swag Store. * Wes: Audio Player Updates.
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
Scott and Wes dish out the intricacies of hosting private fonts using Cloudflare Pages. They explore the challenges of font security, the benefits of a font server, and the nuances of caching and whitelisting to keep your fonts secure and efficient.
Show Notes * 00:00 Welcome to Syntax! * 01:53 Behind the Code: Brought to you by Sentry.io. * 03:12 The problem with hosting fonts. + Scott’s Fonts. * 05:42 The solution, a font server with Cloudflare Pages. * 09:37 Utilizing a Key Value Store. * 10:53 Storing a whitelist. * 13:42 Why not just use a bucket? + Check out the code. * 15:24 Should whitelisting be done in JavaScript or cores? * 17:23 How do you cache to multiple origins? * 18:15 Multiple URLs in an allow origin. * 19:17 Font security and foundry challenges. * 21:43 Moving Domains on Cloudflare.
Check out the font Syntax uses! MD-IO.
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
Scott and Wes sit down with Vjeux from Meta to dive deep into the origins and evolution of Prettier, the widely-used code formatter. They discuss the challenges faced, the decision-making process behind its features, and what the future holds for this indispensable tool in the developer’s toolkit.
Show Notes * 00:00 Welcome to Syntax! * 01:45 Brought to you by Sentry.io. * 02:19 New swag! * 03:25 Who is Vjeux? * 06:56 Is management the key to successful projects? * 08:50 The genesis of Prettier. * 12:08 Why other JS formatters didn’t work. * 16:56 Focusing on edge-cases. * 17:41 The goal for Prettier. + Prettier Philosophy. * 18:31 Next step, integrations. * 19:37 Should you run Prettier on save or commit? * 21:34 Does Prettier’s limitations lead to higher adoption? + Prettier Config. * 25:01 What was the most controversial default setting? * 28:14 Does Facebook use semicolons? * 29:18 Getting approval to devote 6 months to Prettier. * 31:42 Working with Mark Zuckerberg. * 32:43 Was there ever consideration to augment ESLint instead? + Prettier vs. Linters. * 35:34 What are your thoughts on the Rust-based alternatives? * 36:44 Prettier’s $10,000 bounty. * 39:32 What is the future of Prettier? * 44:54 Prettier is available in almost every language. * 47:59 Advice for other open-source maintainers. * 53:26 Sick Picks & Shameless Plugs.
Sick Picks * Vjeux: TransformersJS.
Shameless Plugs * Vjeux: Prettier x Syntax Swag.
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
Scott and Wes dive into the local first landscape, exploring the benefits and possibilities of local first apps. They highlight some of their favorite tools and discuss why local first is gaining traction among developers.
Show Notes * 00:00 Welcome to Syntax! * 00:27 Behind the Code: Brought to you by Sentry.io. * 01:06 Catch up with Wes and Scott. * 03:00 The local first space. + Scott’s Blog: The Spectrum of Local First Libraries. + Syntax 739: The Lofi Movement. * 04:27 Some local first apps we love. + Linear. + Tweek.so. + Superhuman. * 05:15 The advantages of local first. * 06:07 localfirstweb.dev. + 09:21 Triplit. + 15:33 Evolu. + 22:32 RxDB. + 24:08 ElectricSQL. + 26:57 Pouchdb. + 28:46 TinyBase. + 32:08 Replicache. + 44:31 PowerSync. * 48:21 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Battery Jump Starter. * Wes: Battery Tire Pump.
Shameless Plugs * Wes: Syntax Swag
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
Scott and Wes break down the importance of sitemaps for SEO. They dive into the different file formats, essential fields, and common pitfalls to avoid when creating and submitting your sitemap to search engines.
Show Notes * 00:00 Welcome to Syntax! + New Swag Coming Soon. + Tolin.ski. * 02:09 Brought to you by Sentry.io. * 02:39 Sitemaps. * 04:36 Why do you need a sitemap? * 06:34 Sitemap file formats. + 08:31 Choosing a file format. + 09:17 Site map file size limits. + 10:32 Fully-qualified URLs. * 10:50 Fields and metadata. + 10:58 What fields matter for SEO? * 14:20 What to avoid in your sitemap? + 14:23 Dynamic user pages and account pages. + 14:43 Parameter-based URLs. + 16:01 Redirects, duplicates or disallowed pages. + 16:11 Unlisted pages. * 17:07 How do you make a sitemap? * 20:06 What to do once you have a sitemap. + 20:08 Validation. + 20:20 Submit to search engine. - Bing Webmaster Tools. - Google Search Console. + 22:11 Cache them!
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
Scott and Wes chat with Richard Davison from AWS about LLRT, a new runtime tailored specifically for Lambda. They dive into the benefits of using LLRT, challenges with JavaScript in serverless, and why Rust was chosen for its development.
Show Notes * 00:00 Welcome to Syntax! * 01:07 Who is Richard Davison? * 05:11 What is LLRT and what’s the motivation for building it? * 08:25 AWS Lambda example. * 11:20 What makes LLRT specifically tailored to Lambda? * 14:55 Brought to you by Sentry.io. * 15:22 Node.js in Lambda. * 16:00 What are some challenges that people have with JavaScript in serverless? * 17:20 Lambda memory configuration. * 19:23 Managing cost of compute. * 21:29 Simpler and faster than Node, Bun, Dino, but not a replacement. * 22:31 The benchmarks. * 27:00 Quick.js, the main reason for the performance gains. + Fabrice Bellard QuickJS. * 28:03 The Quick.js engine. * 30:35 What was the reason behind creating Quick.js? * 33:46 What made you pick Rust for LLRT? * 36:34 Abstractions and the value of speed. * 39:08 The JIT Compiler. * 42:38 Compile cache. * 43:27 De-optimizations. * 44:59 Node.js Compat, what to use and avoid with LLRT. + GitHub AWS Labs Compatibility Chart. * 47:52 Will you target with WinterCG spec? * 50:22 Streams API. * 52:06 What about WebSockets? * 53:10 Is this going to be promoted from a labs project? * 54:49 Sick Picks + Shameless Plugs.
Sick Picks * Richard: QuickJS Engine, JSLinux.
Shameless Plugs * Richard: Javascript
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
Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!
Show Notes * 00:00 Welcome to Syntax! + State of JS 2023. * 03:04 Brought to you by Sentry.io. * 03:43 New Syntax Swag! + Syntax Swag Store. * 04:42 Front end frameworks. * 08:30 Front end framework pain-points. * 12:17 Metaframeworks. * 17:45 Metaframework pain-points. * 22:17 Build tools. + Rolldown. * 24:45 Build tool pain-points. * 25:54 JavaScript runtimes. * 28:19 Edge + serverless runtimes. * 29:30 Backend frameworks. * 33:17 Non-JavaScript languages. * 36:12 Hosting service. * 38:50 Usage. * 40:05 Javascript usage. * 41:03 Missing features. * 45:04 Industry sector. * 47:37 The awards. * 51:34 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Electric Lighter. * Wes: Monkey Noodle.
Shameless Plugs * Wes: Syntax Swag Store.
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
Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.
Show Notes * 00:00 Welcome to Syntax! * 01:31 Brought to you by Sentry.io. * 02:42 What is a token? + Quizgecko GPT-4 Token Counter. * 04:22 Context window sometimes called “max tokens”. + OpenAI Platform Models. + Claude Models. * 10:42 Understanding input length. * 11:59 Models + services with big token counts. + Gemini Docs. * 13:22 Generating open API documentation for a complex API. * 17:29 Generating JSDoc style typing. + Drop-In stolinski GitHub. * 21:07 Generating seed data for a complex database. + bytedash w3cj GitHub. * 24:34 Summarizing 8+ hours of video. * 29:35 Some things we’ve yet to try. * 31:32 What about cost? + Google AI for Developers Cost.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
CJ: X Instagram YouTube TwitchTV
Randy: X Instagram YouTube Threads
Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.
Show Notes * 00:00 Welcome to Syntax! * 00:30 Who is Paul Copplestone? * 01:17 Why ‘Supa’ and not ‘Super’? * 02:26 How did Supabase start? + 04:29 How long from inception to joining Y Combinator? + 05:10 Was it always intended to be open source? - Why Open Source. + 07:22 How many users chose to self-host? + 07:49 Open source mindset. * 08:42 Simplicity in design. * 10:32 How do you take Supabase one step beyond the competition? * 12:35 How do you decide which libraries are officially supported vs community maintained? + 15:17 You don’t need a client library! * 16:48 Edge functions for server-side functionality. * 18:51 The genesis of pgvector. * 20:59 The product strategy. * 22:25 What’s the story behind Supabase’s awesome docs? * 25:26 The tech behind Supabase. + 25:39 What is the UI built on? + 27:33 Consolidation follows kaizen. + 28:54 What else is involved in the stack? + 31:47 Authentication. + 32:35 Storage engine. + 33:13 For self-hosting. * 35:46 How do you balance business goals with open source? * 42:01 What’s next for Supabase? * 44:15 Supabase’s GA + new features. + Top 10 LAunches from Supabase GA Week. * 48:24 Who runs the X account? * 50:39 Sick Picks + Shameless Plugs.
Sick Picks * Paul: Apple Vision Pro.
Shameless Plugs * Paul: PostgreSQL.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
CJ: X Instagram YouTube TwitchTV
Randy: X Instagram YouTube Threads
Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.
Show Notes * 00:00 Welcome to Syntax! * 00:46 Brought to you by Sentry.io. * 02:24 What is Vue? + 04:13 Similar to Svelte, different from React. * 05:35 How to get started with Vue. + 05:43 Script tag. + 06:01 CLI. + 07:10 The value of an opinionated CLI. * 10:51 Why do you like Vue.js over React or Svelte? + 11:03 Less boilerplate. + 15:24 Self-closing tags. + 16:09 Svelte parsing HTML tags incorrectly. - Hacker News Article. + 17:08 Easily adding event handlers to elements. + 18:20 Conditional rendering. + 19:19 What is a directive? + 20:29 ‘Borrowing’ from Angular One. + 21:07 Styles are built in. + 22:11 Tailwind for scoping. + 26:08 State management. + 30:28 Ref Functions similar to Svelte Runes. + 32:03 Global state management. + 34:24 Pinia. * 36:18 What is the full-stack application platform for Next.js? * 38:00 Nuxt auto-imports. + sveltekit-autoimport. * 39:37 Creating API functions and server side codes. * 41:12 The future of Vue and compilers for front end frameworks. * 41:43 Vue’s compiler. * 44:19 Are people actually using Vue? * 46:50 Laravel and Vue. * 48:29 Sick Picks & Shameless Plugs.
Vue.js: The Documentary.
Sick Picks * Scott: Jordan Roam Slides. * CJ: USB Charging Hub
Shameless Plugs * Scott: Syntax on GitHub * CJ: Syntax.fm
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
Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.
Show Notes * 00:00 Welcome to Syntax! * 00:54 Brought to you by Sentry.io. + Sentry Open Source. + Giving away $500,000 to open source projects. * 01:56 What is open source? * 03:19 This is not legal advice. * 03:51 Source available ≠ open source. + No Permission. * 06:39 The benefits of open source. + 07:26 Educational. + 07:52 More Secure. + 09:32 Community-oriented. - Scott’s Habit Path * 11:29 Types of licenses. + 12:09 Permissive licenses. - 12:26 MIT License. - 14:37 Apache 2.0 license. + 15:31 Copy Left licenses. - 15:58 GNU GPLv3. + 18:16 Copy Left + permissive. - 18:23 (Mozilla Public License) MPL. + 19:31 Business licenses. - 19:35 Functional Source License. - 23:16 Companies using BUSL. - 24:41 Server Side Public License (SSPL). * 26:56 Choosing and acknowledging licenses. * 29:13 Applying a license to your directory.
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
Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.
Show Notes * 00:00 Welcome to Syntax! * 00:30 What does the React Compiler do? * 05:04 Will React Compiler help with managing Context? * 06:39 What happens if you’re not using a React Compiler? + react.dev Playground. * 09:30 Will this work on any NextJS version? * 12:18 What are React Server Components? * 16:28 Shipping all the data inside an encapsulated component. * 20:17 Clearing up the frustrations around retrofitting server components. * 23:13 Handing migration. * 28:30 Is this just a fetch request with props? * 36:41 How closely are the NextJS and React teams working? * 41:53 Will we ever get Async Client Components? * 43:52 Async Local Storage API. * 45:31 Turbopack. * 57:51 Sick Picks & Shameless Plugs.
Sick Picks * Tim: Apple TV Sci-Fi.
Shameless Plugs * Tim: Turbopack, Next.js 15 RC, Sentry NextJS.
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
In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.
Show Notes * 00:00 Welcome to Syntax! * 00:13 How to submit a question for future episodes. + Potluck Questions. * 02:46 Brought to you by Sentry.io. * 03:21 Logging from a site. * 08:39 Blogging in 2024. * 11:49 Sharing website environmental data. + Green Web Foundation. + Website Carbon Calculator. + Syntax Site Results. + Scott’s Site Results. * 17:38 Using LangChain when working with LLMs. * 21:03 CSS Hyphens and Overflow-Wrap. + Hyphens Browser Compatibility. + Overflow-Wrap. * 25:52 Similarities between WASM, JVM and .NET. * 27:25 Writing unit testing and integration testing. * 32:00 How can new parents stay current on web development trends? * 34:47 Working globally as a freelance developer. * 37:26 Scott’s audio setup. Why audio interfaces have DSP built in. + ChaseBliss Pedal. * 43:04 UI libraries for synth/audio plugins. * 44:02 CSS module scripts. + CSS Modules in CSS Module Scripts. * 48:39 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Deep Cover Podcast. * Wes: Pressure Washer Surface Cleaner.
Shameless Plugs * Wes: Syntax.fm/videos.
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
Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.
Show Notes * 00:00 Welcome to Syntax! * 02:07 Brought to you by Sentry.io. * 02:33 The file system API. * 03:08 The Cache API. + Mozilla Developer Cache API. + Airhorner, a good example. * 04:24 Size restrictions per browser. * 07:04 How tools like Riverside.fm use IndexedDB. * 08:47 Data eviction (too much data). * 10:16 What we’re using it for and how. * 12:17 How do we do this in code? * 14:37 Creating the cache. * 16:18 Retrieving from cache manually. * 19:00 Adding metadata. * 19:37 A live debugging. * 22:39 Persistent storage. + web.dev Persistent Storage. + Hackernoon Persistent Storage. * 26:10 Media score. + Chrome Autoplay Policy.
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
Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.
Show Notes * 00:00 Welcome to Syntax! * 00:57 Who is Stephen Nixon? + Process Type Foundry. + Mark Simonson Proxima Nova. * 05:42 What is a type foundry exactly? + ArrowType. * 09:09 Font / type making. + 09:15 How do you make a font? - RoboFont. - Glyphs. + 11:58 Fonts vs typefaces. + 13:02 How many fonts have you made? + 14:17 What are variable fonts and how can web developers utilize them? + 19:22 Animating fonts. - Variable Fonts. - Recursive. + 20:28 Do you code your demo sites yourself? + 21:50 Are variable fonts more complex to design (and develop). - Matthew Carter Adobe Fonts, Matthew Carter Wiki. - Multiple Masters Variable Fonts. - Just My Type. + 27:03 Hand painted fonts. - House industries. - Golden Sign Co. - Gen Ramirez. + 29:39 Creating a monospace font. + 32:19 Creating fonts with dyslexia accessibility in mind. * 37:58 Typography for the web. + 38:29 What are some 80/20 rules developers can employ to make more visually appealing typography? + 40:58 Type scale calculations. - Scott’s Fluid Type Calculator. + 45:42 What are your biggest web type pet peeves. + 48:46 Do you have any favorite type tools? - Wakamifondue. - Fixing Variable Font Inheritance. * 50:34 Supper Club Questions. + 50:44 How do you feel about ligatures in coding fonts? - Ligatures In Programming Fonts Hell No. + 55:11 What font do you use? - Name Sans v05. - Name-Mono. + 56:43 What is your favorite font of all time? - Typotheque. - Soehne. - Grillitype Typefaces. - Phnotype. * 58:49 Sick Picks + Shameless Plugs.
Sick Picks * Stephen: Children of Time, No-Recipe Recipes.
Shameless Plugs * Stephen: ArrowType, Skewing Fonts.
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
In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.
Show Notes * 00:00 Welcome to Syntax! * 01:06 Brought to you by Sentry.io. * 01:49 Today’s format. * 02:23 Beginner vs advanced TypeScript. + DHH Tweet. * 09:23 Does Sveltekit replace Svelte with Astro? * 13:09 Handling multiple languages. * 19:52 Falling out of love with React. * 25:53 Shipping private packages via NPM. + npm-install. + Working with the npm registry. * 29:00 How do you feel about importing packages from a URL? * 30:36 VueJS vs Svelte. * 36:15 Leetcode type interview questions. * 41:58 Learning a new language for personal growth. * 46:21 Always starting, never finishing. + Scott’s Fluid Type Calculator. * 50:23 Code quality vs tackling tickets. * 55:36 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Quick Look Plugins. * CJ: Sony WFC700n-b.
Shameless Plugs * Scott: Syntax 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
Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.
Show Notes * 00:00 Welcome to Syntax! * 01:14 Brought to you by Sentry.io. * 02:05 Why you might need a cloud storage provider. * 03:07 How we use cloud storage. + Dropshare. * 08:16 Why you may need larger storage. * 09:49 The big players in this space. + Amazon S3. + Cloudflare R2. + Backblaze B2. + Synology C2. + Google Cloud Storage. + Microsoft Azure. + Digital Ocean Spaces. + Oracle. + Bunny.net. + Amazon S3 Glacier. * 14:34 Storage fees. * 18:31 Why so cheap? * 20:49 Bandwidth (egress). + Cloudflare Bandwidth Alliance. * 26:46 Operation fees - costs money.
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
Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it!
Show Notes * 00:00 Welcome to Syntax! * 01:20 Who is Brian Holt? * 02:26 Who is Marco Bambini? * 05:12 Why are people starting to talk so much about SQLite now? * 08:47 What makes SQLite special or interesting? * 09:46 What is a big misconception about SQLite? * 11:13 Installed by default in operating systems. * 12:03 A perception that SQLite is intended for single users. * 13:36 Convincing developers it’s a full-featured solution. * 15:11 What does SQLite do better than Postgres or MySQL? * 17:30 SQLite Cloud & local first features. * 20:38 Where does SQLite store the offline information? * 23:08 Are you typically reaching for ORMs? * 25:00 What is SQLite Cloud? * 27:29 What makes for an approachable software? * 29:18 What make SQLite cloud different from other hosted SQLite options? * 32:13 Is SQLite still evolving? * 34:40 What about branching? * 37:37 What is the GA timeline? * 40:04 How does SQLite actually work? * 41:19 Questions about security. * 44:28 But does it scale? * 45:52 Sick Picks + Shameless Plugs.
Sick Picks Brian: Trainer Road Marco: Tennis
Shameless Plugs * Brian: SQLite Cloud, Frontend Masters - Containers.
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
Today, Scott and Wes dive into the 11 habits of effective web developers, from understanding stakeholder goals to maintaining a work-life balance. We’ll explore the importance of continuous learning, having a problem-solver mentality, and being empathetic towards coworkers and users—let’s get into it!
Show Notes * 00:00 Welcome to Syntax! + Previous Episode: 754. * 00:50 Brought to you by Sentry.io. + 01:24 Denver weather is something else. * 02:15 Habit #1: You understand stakeholder and business goals. * 05:34 Habit #2: You’re curious and always learning. * 07:43 Habit #3: You have an open mind about new technology. * 11:29 Habit #4: You ask for help. * 13:43 Habit #5: You help others. + 16:51 Chicken drumsticks. * 17:35 Habit #6: You have a “problem solver” mentality. + 24:44 Hose repair. * 26:02 Habit #7: You have fun with what you do. * 29:56 Habit #8: You understand work-life balance. * 33:18 Habit #9: You are empathetic to your co-workers and users. * 37:19 Habit #10: You pay attention to detail. * 41:18 Habit #11: You’re part of the community. * 45:55 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Solar Lanterns. * Wes: Ninja Obstacle Course.
Shameless Plugs * Scott: Syntax 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
Today, Scott and Wes are diving into Pocketbase, a fantastic tool for web developers to quickly set up a CMS without breaking a sweat. We’ll cover everything from its Go-based architecture to its slick admin interface and how you can get started hosting it for free on Fly.io.
Show Notes * 00:00 Welcome to Syntax! * 01:34 Brought to you by Sentry.io. * 02:26 Overview of Pocketbase. * 06:51 Written in Go, but no extending needed. + Host for free on Fly.io. * 07:37 Hooks. * 08:05 Authentication + roles. * 09:23 The admin experience. * 11:18 Managing export collections. * 13:21 Creating your own schema. * 13:53 Adding indexes. * 14:08 API rules. * 15:01 Adding complex roles. * 16:15 Full-featured admin with a great UI. * 16:59 Collection API preview. * 17:41 Docs with app-specific context. * 18:54 Logs. * 19:02 Settings. * 19:42 Executable vs npm install. * 20:29 Are the collections fully typed? * 21:01 Some more settings. * 22:56 One click Coolify install. + Svelte Kit / Svelte 5 / Pocketbase Example. + Svelte / Pocketbase Starter. + Pocketbase Typegen.
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
Today we’re serving up an episode on 1Password with Senior Rust Developer Andrew Burkhart, delving into how 1Password works, tackling conflict resolution and security challenges, and exploring the benefits of using Rust.
Show Notes * 00:00 Welcome to Syntax * 00:57 Who is Andrew Burkhart? * 01:36 How does 1Password work? * 03:24 What’s the data flow on creating a new login? * 05:40 The conflict resolution challenges of pull first, push second. * 06:46 Merging strategies: How do you chose which device wins the conflict? * 08:27 1Password’s sync is fast and reliable. * 11:20 Nuances of the extension. * 12:59 The value of Hackathons. * 13:40 What’s the main benefit of 1Password using Rust? * 15:41 Watchtower processing. * 17:15 1Password SSH. * 18:17 1Password env. * 19:11 Some other cool tools. * 20:33 Does the increased security make developing challenging? * 25:26 What’s 1Password’s security onboarding like? * 27:47 1Password and WASM. * 31:45 Tokio as the asynchronous runtime for Rust. * 34:25 Scott’s Rust based video app. * 35:03 What is an FFI? * 38:13 How did you learn Rust? + Jon Gjengset - Rust Nation UK YouTube. + Let’s Get Rusty YouTube. * 41:13 Why is the 1Password team so big? * 42:40 Are there teams that manage individual applications for errors? * 43:45 Challenges with WASM. * 48:59 Syntax horror stories. + Episode 586 with Eric Sartorius. * 52:50 Sick Picks + Shameless Plugs.
Sick Picks * Andrew: Nix Mini 3, Asynchronous Programming in Rust.
Shameless Plugs * Andrew: 1Password.
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
In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons.
Show Notes * 00:00 Welcome to Syntax! * 01:48 Brought to you by Sentry.io. * 02:53 Nav / Mobile Nav. * 08:43 Header. * 10:41 Toast message. + Wes’ TikTok Demo. * 18:51 Portal. * 21:02 Drawer. * 22:56 Auth forms. * 28:49 Dialog / Modal. * 31:30 Whats the difference between popover and dialog? * 33:48 Confirm. + Scott’s YouSureAboutThat. * 35:46 Bonus tip on becoming a better developer. * 36:29 Admin menu. + Level Up Tutorials - Side Menu Demo. * 37:51 Scott’s package directory rant. * 40:26 Mobile only / Desktop only. * 40:41 Client only. * 40:57 Admin table. * 41:23 The dump. * 43:39 Share / Social links. + Syntax ShareWindow. * 45:44 Markdown renderer. * 45:58 Tabs. * 46:08 User menu. * 46:18 Icon. * 48:07 Loading. * 49:21 Drop-down menu. * 49:31 Accordion. + CSS Tricks - How to Animate the Details Element. * 52:13 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Supercommunicators. * Wes: Klack, Mech Vibes.
Shameless Plugs * Scott: Syntax 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
In today’s episode, Scott and Wes dive into the final part of our JavaScript Promises series, covering deferred promises, fetch, flow control, concurrency with libraries like p-map and p-limit, and integrating TypeScript.
Show Notes * 00:00 Welcome to Syntax! * 00:31 Brought to you by Sentry.io. * 01:11 Deferred promises. + Promise.withResolvers(). + Wes’ TikTok. * 06:10 Fetch. * 09:04 Flow Control. * 12:19 Concurrency, Throttling, Queuing. + p-map. + p-limit. * 16:13 TypeScript and Promises.
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
Scott and Wes dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project.
Show Notes * 00:00 Welcome to Syntax! * 01:13 Brought to you by Sentry.io. * 01:30 React Native is different than Cordova or other webview platforms. * 04:18 Is there a ‘write once deploy everywhere’ aspect? * 05:48 What are some React Native apps people may not realize? + Mercari: Buying & Selling App. * 07:13 What about Twitter + Facebook? * 09:15 What is Expo? Is Expo Required? + expo.dev. * 13:27 Does it require a Mac to build an iOS app? * 14:58 React Native and routing. + Expo Router. * 16:56 How do native apps normally work without a URL? * 18:35 Can you use CSS with React Native? * 20:27 Do React Native or Tamagui translate to CSS or Yoga? + Tamagui. + Yoga Layout. * 21:02 React Native app styling on Android and iOS. * 22:20 React Native’s own JavaScript engine. + React Native Docs: Using Hermes. * 23:30 Does Hermes have full JS support? * 23:52 What is the new architecture of React Native? + New Architecture. + React Native JSI. * 26:11 Avoiding translation errors. * 27:24 Will this change break a lot of older React Native apps? * 28:24 Has React Native improved update stability? * 29:55 Where else can React Native run? * 32:52 JavaScript on smart TVs and other smart devices. * 33:57 Bridging to native APIs. + Tauri. * 37:14 State management. + Redux.js. + MobX State Tree. * 39:30 What are some tools + libraries that you install on most projects? + JestJS. + Maestro. + Detox. * 41:58 How do you manage authentication? * 44:55 Does Facebook use React Native? * 47:15 Supper Club Questions. * 50:29 Sick Picks + Shameless Plugs.
Sick Picks * Robin: Awesome Sock Club Wes’ X Post.
Shameless Plugs * Guest: Infinite Red, ChainReactConf, React Native Radio.
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
In this Potluck episode of Syntax, Scott and Wes tackle community questions on handling overwork, teaching programming to family, and React’s Server Components. They also discuss quantifying accessibility improvements, choosing course platforms, and navigating professional growth in challenging workplaces.
Show Notes * 00:00 Welcome to Syntax! + Thanks to Codeium. + Syntax Episode 728 with Codeium. * 01:37 Brought to you by Sentry.io. * 02:38 Rewarding hard work with more work. * 07:14 April Fools Episode. + Syntax Episode 750 on April Fools. * 09:03 Teaching programming to your family. + Codespark. * 15:56 React Server Components using JS runtime. * 19:58 What happened to the intro music? * 23:06 How can I quantify my work to the executive leadership team? * 29:16 Should I host my own course website or use Udemy? * 35:34 Navigating professional growth in toxic workplaces. * 40:43 Getting started in native dev with tools like Tamagui. + Syntax Episode 601 on Tamagui. * 45:42 Cloudflare, what the heck is it? * 50:49 Sick Picks + Shameless Plugs.
You’re looking for this > https://sentry.shop/products/sentry-aint-broke-tee
Sick Picks * Scott: Folex. * Wes: CalDigit TS4.
Shameless Plugs * Scott: Syntax on YouTube * Wes: Ditto
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
We’re diving into part 2 of our 3-part series on Promises, focusing on error handling, aborts, and essential helper methods. We’ll explore how to manage errors effectively and improve performance with abort signals. Let’s get into it!
Show Notes * 00:00 Welcome to Syntax! * 00:41 Brought to you by Sentry.io. * 02:00 Cancelling promises. * 05:16 Why would you reach for an abort signal? * 06:26 Promise helpers. + 07:04 Promise.all() vs Promise.allSettled(). + 09:12 promiseInstance.finally() + 09:26 Promise.any() and Promise.race() * 12:08 Error handling strategies. + Tuple await-to-js. + Youtube - 5 Async + Await Error Handling Strategies. * 17:30 Promise.race() example. * 18:54 Static Promise.reject() and .resolve() methods.
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
In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects.
Show Notes * 00:00 Welcome to Syntax! * 00:49 Brought to you by Sentry.io. * 01:14 Introducing Brad Frost. * Brad Frost.com. * Atomic Design by Brad Frost. * Brad (@brad_frost) on Twitter. * Brad on LinkedIn. * Brad on Mastodon. * Brad on YouTube. * Brad on GitHub. * Brad Frost on CodePen. * Big Medium | Design for What’s Next. * 06:26 What is a design system? * 11:48 How do you keep design and code in sync? * Material Design. * Shopify Polaris. * Carbon Design System. * The Design System Ecosystem | Brad Frost. * 15:52 How do you use Shopify, WordPress, React, etc. through a design system? * 19:19 How is CSS handled? * 25:19 What’s the benefit of going all in on web components? * 28:49 Do small startups need to worry about design systems? * 32:36 How do design tokens work? * 37:38 How do you deal with pushback on design systems? * 41:05 How do you go outside the guidelines? * 44:52 What system do you use for naming things? * 49:06 How do you best document your language choices? * 50:41 Supper Club questions.
- Thinking in Systems.
- Miriam Eric Suzanne.
-
Zeldman on Web and Interaction Design.
-
57:12 Sick Picks + Shameless Plugs.
Sick Picks * Brad: Rubblebucket.
Shameless Plugs * Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024.
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
Welcome to a special live edition of Syntax, recorded at React Miami! Join Scott and Wes as they dish out games galore, from Spot the Syntax Error to JS or NAYS, all while engaging with the audience in this lively session of coding camaraderie. Plus, who’s the better programmer? Stay tuned to find out!
Show Notes * 00:00 Welcome to Syntax! * 00:54 Meet the Syntax team. * 01:22 The plan for today. * 02:38 .map() .filter() .reduce() * 06:39 Syntax Error. * 15:37 JS or NAYS. * 21:08 Audience Stump’d. * 24:51 Q + EH.
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
Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects.
Show Notes * 00:00 Welcome to Syntax! * 01:30 Brought to you by Sentry.io. * 02:03 What’s in the update? * React 19 Beta Release Notes. + 03:03 Actions + server actions. - Syntax Episode 766. - 04:54 Using server actions for a checkout. + 06:11 Web components. - Custom Elements Everywhere. + 09:44 use() API. - 10:31 With promises. - 14:25 With context. - 17:32 How does Zustand work? * Stately.ai. * X @DavidKPiano. + 18:26 No more ForwardRef. + 20:05 Ref cleanup. + 20:43 Document metadata. * 24:14 Upgrading to React 19.
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
In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality.
Show Notes * 00:00 Welcome to Syntax! * 01:10 Brought to you by Sentry.io. * 01:28 What is Overtone? * 03:45 Can you explain the experience you’re trying to achieve? * 06:43 What makes the best music app? Is it local first? * 08:03 Is it best to create a local first app from the ground up? * 10:31 What are the considerations when making a local first app? * 13:04 What database are you using? * Riffle. * 16:12 How do you handle authentication? * 19:15 Pick the tech based on the problem. * 20:40 WASM for Non-JS or heavy lifting tasks. * 24:39 How did you get SQLite running in the browser? * 27:58 What about WA-SQLite, how does it compare to Riffle? * TLDraw Make-real. * 29:24 The backstory of Effect for TypeScript. * 34:04 What actually is Effect? * 39:32 Consolidating tools. * 42:30 What’s a cool aspect of Effect that is often overlooked? * 45:47 Building a web server with this. * EffectTS RPC. * 48:16 Will this ever get “Bluebirded”? * 50:29 What about promises? * Zio World * 52:19 Sick Picks + Shameless Plugs.
Sick Picks * Johannes: Open Telemetry, Sentry Open Telemetry.
Shameless Plugs * Johannes: localfirst.fm.
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
Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications.
Show Notes * 00:00 Welcome to Syntax! * Show 718 React Server Components. * 02:04 Brought to you by Sentry.io. * 03:04 What are form actions? * GitHub Add React.useActionState PR * 04:05 Almost entirely React. * 04:31 What is the ‘server’ in Vanilla React? * 06:10 Would React ever ship their own server? * 07:29 What are actions? * 08:34 Two huge benefits to actions. + 08:45 Avoid custom useEffects or third party libraries. + 09:17 Calling server code from the client without any APIS. * 11:31 Some examples of actions. * 12:54 Can these actions be done in a client component? * 13:40 Where to use actions. + 13:49 On a form submit. + 15:30 In an event handler. + 15:57 In a useEffect(). * 17:13 How to actually use an action. * React Hooks + 17:30 useActionState() hook. - 18:49 The state of the action. - 19:35 The bound action. - 19:46 The pending state. + 23:16 useFormStatus() hook. * 24:38 Action inputs. * 26:13 Server vs client. * 28:30 This is not PHP. * 30:31 What is optimistic UI? + 33:26 useOptimistic() hook. * 37:02 Some final thoughts. * 40:18 Sick Picks + Shameless Plugs.
Sick Picks * Good Follows: Alex Katt. * Scott: Tiny Portable Ultra-Mini Air Pump. * Wes: AVerMedia 4k Capture Card.
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
In this 3-course series, Scott and Wes serve up some JavaScript Promises treats. In part 1, they unravel the concept of promises and delve into common examples of their usage, from creating and waiting on promises, to database queries and user permissions.
Show Notes * 00:00 Welcome to Syntax! * 01:27 Brought to you by Sentry.io. * 02:32 What is a promise? * Promise mdn web docs. * 03:27 Common examples of promises. + 03:45 A fetch call to an API returns a promise. + 05:54 A database query or Insert command + 07:18 A request for user permissions. + 07:37 A wait function. * 08:08 Resolve or rejecting promises. * 09:33 Creating promises. + 09:46 New promise. + 11:09 Promise.withResolvers(). + 11:37 An async function. * 14:34 Waiting on a promise. + 15:09 .then(). + 16:50 Await. + 17:44 Why use one wait method over the other?
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
Join Scott and Wes as they delve into the fascinating realm of Biome.JS alongside Emanuele Stoppa, the mastermind behind it all. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Grab a seat at the table and find out!
Show Notes * 00:00 Welcome to Syntax! * 00:10 Brought to you by Sentry.io. * 01:49 Who is Emanuele Stoppa and what is Biome? * 03:18 What happened to Rome? * 05:49 Who’s paying for Biome to be developed? * 07:28 How many people are working on Biome? * 09:24 Why do we even need Biome? * 11:38 Why are other tools so slow? * 12:55 Cost of compute. * 14:01 The cache management. * 14:30 Why was the decision made to move to Rust? * 16:35 The bigger the company, the pricier the compute. * 19:49 How to get started with Biome. * 23:08 Will Biome offer more features than Prettier? * 24:12 Language support. * 26:02 A language parser for every language? * 27:45 Will plugins need to be written in Rust? * GritQL GitHub. * 31:25 Ezno, TypeScript Compiler. * 33:13 Will we ever see a new TypeScript type-checker? * 35:38 What are your thoughts on the types proposal? * Proposal Type Annotations. * 38:03 What does your average day look like? * 41:10 What is your role at Astro? * 41:46 What other languages do you know? * 43:22 Biome VCS. * 45:14 GitHub action setup. * 47:04 Supper Club Questions. * 47:09 What text editor, theme and font are you using? * 48:26 What do you do to stay up to date? * 48:54 Sick Picks & Shameless Plugs.
Sick Picks * Emanuele: Ripley IMDB, Netflix.
Shameless Plugs * Emanuele: Astro, BiomeJS.
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
Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you’ll gain invaluable insights and techniques to scrape (almost) any website with ease.
Show Notes * 00:00 Welcome to Syntax! * 03:13 Brought to you by Sentry.io. * 05:00 What is scraping? * Socialblade. * 08:01 Examples of past scrapers. * Canadian Tire. * 10:06 Cloud app downloader. * 16:13 Other use cases. * 16:58 Scraping 101. * 17:28 Client Side. * 19:08 Private API. * Proxyman. * 22:40 Server rendered. * 23:27 Initial state. * 24:57 What format is the data in? * Google Puppeteer Extension. * 27:08 Working with the DOM. * 27:12 Linkedom npm package. * 29:02 querySelector everything. * 31:28 How to find the elements without classes. * 34:08 Use XPath selectors for select by word. * 34:53 Make them as flexible as you can. Classes change! * 35:10 AI is good at this! * 36:26 File downloading. * 38:20 Working with protected routes. * Proxyman. * 40:41 Programatically retrieve authentication keys because they are short-lived. * Fetch Cookie. * 43:20 Deal-breakers. * Mechanical Turk. * 44:58 What happened with Amazon? * Uniqlo Self-Checkout * 46:42 Wes’ portable refrigerator utopia. * 47:25 Sick Picks & Shameless Plugs.
Sick Picks * Scott: KeyboardCleanTool. * Wes: Yabai.
Shameless Plugs * Scott: Syntax 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
Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it.
Show Notes * 00:00 Welcome to Syntax! * 01:57 Brought to you by Sentry.io. * 02:26 What is okay to steal? + 02:57 Color palettes. + 03:14 Font stacks. + 06:26 Type scales. - Warp’s CSS Gradient Border. - Sentry’s Date Picker. + 08:52 General layout patterns. + 10:39 General vibes. * 11:20 What is NOT okay to steal? + 11:26 Whole site designs. + 13:32 Taking too many things from ‘what to steal’ list. + 16:30 Text copy. - Wes’ Parity Purchasing Power. * 18:48 What we’ve had stolen + how it feels. * 21:45 Where to find inspiration. + 21:56 Code inspiration. - CSS Scan Buttons. - CSS Scan Box Shadows. - Codrops. - CodePen + 25:18 Design inspiration. - Bentro Grids. - Dribble. - Site Inspire. - SaaS Landing Pages. - One Page Love. - Type Wolf. - Mobbin. - Syntax Newsletter. - Hoverstat.es. - Internet Gems. + 32:48 UX inspiration. - Good UI. - The Component Gallery. - Open UI. - Nicely Done. * 35:25 How to capture inspiration.
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
Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast.
Show Notes * 00:00 Welcome to Syntax! * 01:17 Who is Ben Vinegar? * Episode 434 with Ben. * 02:21 Brought to you by Sentry.io. * 04:00 Cloudflare analytics engine. * Counterscale.dev. * Episode 634 with Armin. * 09:08 What is clickhouse? * 11:01 Can Clickhouse be used for things outside of analytics tracking? * 13:46 What kind of events are you able to track? * 15:00 How do you assign values to track? * Counterscale Schema. * 18:40 Data type limitations. * 19:55 The troubles with sampling data. * 23:57 Sample intervals. * 24:24 Pricing for these services. * 25:34 How it actually runs. * 27:31 Infrastructure costs and pricing models. * 30:19 Running production apps in Cloudflare. * 31:49 Cloudflare and HonoJS. * 32:47 One year with Sentry and Ben’s role with Syntax. * Episode 600 with David. * 39:33 How does it feel going from a software project to a media project? * Syntax Team. * 43:00 How do you sell Syntax to Sentry? * 48:37 Sick Picks & Shameless Plugs
Sick Picks * Ben: Randy’s YouTube, Boom.
Shameless Plugs * Ben: Counterscale.dev
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
Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.
Show Notes * 00:00 Welcome to Syntax! * 00:47 Brought to you by Sentry.io. * 01:44 A recording bug. * 03:18 VSCode versions. * 05:59 Tabs or no tabs. * 10:32 Navigation tips. * 11:35 Mouse and trackpad input. * 13:43 Move, select and expand by * 19:07 Interface tips. * 19:17 Sidebars. * 24:23 Sticky headers. * 26:21 Activity bar. * 30:30 Show or hide? * 31:35 Profiles. * 32:43 Keyboard Shortcuts. * 32:49 Renaming. * 34:32 Extensions. + 34:45 Text pastry. + 36:43 Better comments. + 39:03 Auto rename tag. + 40:02 Change case. + 40:25 Permute lines. + 41:26 File utils. + 43:20 Sort JSON objects. + 43:50 SQLite viewer. + 44:29 Spell checker. + 45:42 APC. * 49:19 Themes. * Syntax Theme * 53:05 Final tricks. * Log Wrapper * 57:44 What about the AI stuff? * 01:00:10 Sick Picks & Shameless Plugs.
Sick Picks * Scott: Flicker Free Ultra Definition Phillips Bulbs. * Wes: Clear Shoe Box Organizers.
Shameless Plugs * Scott: Syntax Newsletter.
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
Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights!
Show Notes * 00:00 Welcome to Syntax! * 02:16 Brought to you by Sentry.io. * 03:14 JavaScript Services. + 03:43 Valtown. + 05:44 Observable. + 06:35 Notebooks. + 08:23 Deno Juypter Notebooks. + 09:51 Svelte Repl. + 10:32 Playgrounds: TypeScript, Tailwind, etc… * 11:05 CSS Services. + 11:10 CodePen. * 13:14 Full stack services. * 13:47 Your own stack. Hot Tips & Cool Treats. + Wes’s Hot Tips. + Scott’s Cool Treats. + 21:01 Bun file routing. + 24:25 Tooling and tips. * 26:30 Database. + 26:51 Write to a file. + 27:40 LowDB. + 29:00 SQLite + Drizzle. + 29:40 Google Sheets. + 30:06 Sheet DB.
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
Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome.
Show Notes * 00:00 Welcome to Syntax! * 00:47 Brought to you by Sentry.io. * 02:49 What is Shoelace? * 07:21 What is Font Awesome? * 08:07 Font Awesome is getting into Web Components? * 11:35 What is Shoelace’s relationship with Web Awesome? * 13:33 Is the idea to make it quick to get up and running? * 15:46 What is the autoloader? * 16:29 Where does Web Awesome fit in the ecosystem? * 18:13 What does the styling game look like? * 20:33 What is Part in CSS? * CSS Part mdn web docs * 22:06 The reason we’re so stoked with Web Components. * 23:32 Custom elements are a natural progression. * 24:51 What are your thoughts on Open UI initiatives? * Floating UI * Close Watcher * Can I Use * 27:40 Wes’ escape key conundrum. * 30:21 A bug on the Syntax site. * 31:19 Let’s talk about Kickstarter. * 35:24 Do you know what premium inputs will be available in Web Awesome? * 36:12 Rich text editor. * 40:18 Setting goals. * 41:48 Kickstarter giveaways. * 42:47 Have you tried drag and drop? * Pragmatic Drag and Drop * 44:57 The layout component. * 48:50 What are your favorite components? * 50:29 Sick Picks + Shameless Plugs.
Sick Picks * Konnor: Enhance.dev, Extism.org * Cory: Lit.dev
Shameless Plugs * Cory: Kickstarter * Konnor: Everyone involved in open UI
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
Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home.
Show Notes * 00:00 Welcome to Syntax! * 00:51 Brought to you by Sentry.io. * 01:17 When should I use Light DOM or Shadow DOM? * 03:43 Do you know of any good tools for extracting data/content from Markup/HTML? * LinkeDOM on GitHub * 08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024. * LocalFirst.fm * MeteorJS UI Updates * 15:05 Please get the Goodhertz creator on the pod! Would be a great show. * Goodhertz Audio Software * 16:34 Effects that involve the JavaScript ‘wheel’ event. * Runway.com * GSAP Animate Anything * CSS Scroll-Driven Animations * 23:15 Best tool for rapidly creating UI from the ground up. * Episode 751 * Thinkmill.com * 27:44 Wes, what’s with your frame rate? * Frame Rate Testing Results on X * 32:31 Is there any way to host a whole website setting on my PC at home? * CJ and Self-Host 101 * Hetzner.com * Cloudflare Docs Create a Tunnel * 36:52 Offline functionality like saving data and syncing data to database? * Episode 739 * Local-First Web Development * Syntax Side Dish Explainer Playlist * 39:41 Creating a GPT-like tool that can listen to long audio files. * OpenAI Speech to Text * Insanely Fast Whisper * Deepgram * 43:51 Sick Picks.
Sick Picks * Scott: Hair Powder * Wes: Mini Grease Gun
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
Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools.
Show Notes * 00:00 Welcome to Syntax! * 01:24 Brought to you by Sentry.io * 03:00 CSS Is getting Functions and Mixins! * CSS Mixins and Functions Explainer * CSS Working Group Discussion * 06:19 Functions and mixins, how are they different? * 07:26 Don’t get hung up on the syntax, or maybe do. * 09:12 CSS Functions. * 12:02 Some use-cases. * 15:58 CSS Mixins. * 16:31 Tailwind-like classes. * 17:53 Tailwind-like arbitrary syntax. * 20:08 Fluid typography. * 21:13 Let’s talk about logic.
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
We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization.
Show Notes * 00:00 Welcome to Syntax! * 00:32 Who is Oliver Dunk? * 02:00 Brought to you by Sentry. * 03:17 Manifest V3. * 08:59 How many rules can you add? * 09:56 What even is a rule? * 10:52 Is Google trying to kill ad blockers? * 13:56 What are the bad guys doing with Chrome extensions? * 15:17 Can a browser extension access HTTP-only cookies? * 16:06 Is Chrome reviewing all of these extensions? * 19:06 Is there a way to side-step Google’s review process? * Reddit Thread, The real threat of Manifest V3 * 20:32 Do you see the negative chatter? * 21:18 Service workers - how do do you access the DOM? * 23:32 Do you think we’ll see more DOM APIs in service workers? * 25:58 Do you have a favorite Chrome extension? * 28:33 Has Google ever explored something comparable to Boost? * SidePanel * 33:09 Let’s talk about the development stack. * 35:54 1Password and Chrome. * 38:39 What is the best way to debug an extension? * YouTube Chrome for Developers * 40:33 Manifest V3 and the web request blocking API. * 41:57 Known tracking payloads. * 44:04 Do you think there is a path forward that makes ad-block developers happy? * 44:45 Do you run an ad blocker? * 45:20 Whitelisting and opt-ins. * 46:38 What’s your tech setup? * 47:18 What do you do to stay up to date? * 47:51 Sick Picks + Shameless Plugs. * 51:47 Wait, is Safari adopting V3 as well?
Sick Picks * Oliver: Defunctland YouTube, LEMMiNO YouTube
Shameless Plugs * Oliver: Chrome Extensions Getting Started, WebExtension Playground
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
Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career.
Show Notes * 00:00 Welcome to Syntax! * 00:17 How can a front-end developer advance in their career? * 01:10 Brought to you by Sentry. * 01:30 Syntax newsletter. * Snack Pack * 02:02 How do you get better at being a developer? + 02:22 Asking questions. + 08:09 Get your hands dirty. + Hot Tips, Cool Treats + 14:07 Share what you know. + 17:35 Target your skills for what is needed. + Ryan Carniato Tweet + Episode 577 + Justin Fagnani Tweet + Episode 595 + 21:12 Get out of your comfort zone. * 26:55 Getting a better job. + 27:27 Understand the stakeholders. + 29:18 Find the metric the business cares about and do that. + 30:01 Make an impression as being the person that gets things done fast and reliably. + 31:47 Improve communications. + 35:04 Be the person they want to have in meetings. + 37:44 Use systems and tools to help your deficiencies. + 39:01 Dress to impress. + 39:32 Care. + 39:40 Cut the cynicism. + Energy Vampire + 42:16 Don’t put bad stuff out into the world publicly. + 44:29 Get your camera + mic dialed in. * 46:23 Leveling up at life. + 46:32 Take care of your shit. + 47:40 Exercise. + Episode 748 + 47:57 Eat well. + 48:22 Sleep as much as you can. + 48:26 Clean your workspace. + 49:17 Learn new skills. + 49:31 Take care of yourself. + Habit Path * 54:09 Sick Picks.
Sick Picks * Scott: Zeiss Lens Care Pack * Wes: Woosh Screen Cleaner
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
Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching.
Show Notes * 00:00 Welcome to Syntax! * 01:22 Syntax is on YouTube. * 02:16 Let’s talk about the cache problem. * 03:33 User-specific data and caching security. * 06:27 Why might this pop up? + 06:29 Marketing A/B testing - cookie based. + 06:55 User-selected features - such as themes. + 06:58 Language or geo-based items - accept language. + 07:11 Images - WebP for some browsers, jpg for others. + 07:45 JSON/HTML based on accept header. + 08:17 Different encoding. * 08:26 Content negotiation. * 08:54 The solutions. + 09:04 Provide different URLs/Query parameter. + 11:19 Don’t cache the page, cache the data based on query. + 15:01 Implement a “Cache Key” - one render for every option. + Netlify + Fastly + Cloudflare + 18:17 Use edge logic. + 19:52 Just do it client-side.
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
Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development.
Show Notes * 00:00 Welcome to Syntax! * 00:48 Who is Corbin Crutchley? * 02:08 Brought to you by Sentry.io. * 02:32 Hilton, like the hotel? * 05:57 What is the best framework? * 07:23 How do you compare these frameworks? * 10:00 Do you feel like the metaframeworks are comparable? * 11:02 Exciting announcements from ng-conf? * 11:42 Are Wiz and Angular merging? * 14:17 Angular signals and Vue comparison. * PreactJS Signals * 17:53 Adding signals to vanilla JavaScript and browsers. * 21:02 What is derived state? * 23:11 How can we store state within these different frameworks? * 24:37 Passing children. * 26:40 Which has the best implementation for passing children? * 28:52 What’s the approach for building framework agnostic components? * TanStack Store * 30:31 How much of it is framework specific? * 31:35 Headless or DOM-based? * 32:48 What are the best practices for writing this? * 35:28 What’s the biggest framework pain point? * 36:21 Is there a language that requires significantly more code? * 38:52 What about Web Components? * 39:58 Your book is free? * Framework Field Guide * Shout-out Eduardo Pratti and Kevin Aguilar. * 42:42 What’s the process of writing a book like this? * 45:44 Not a physical book? * 46:17 Walk us through the tech stack. * 48:27 Supper Club Questions. * 48:33 What text editor, theme and font do you use? * 49:53 What terminal and shell do you use? * 50:19 How do you stay up to date? * 53:39 Do you have advice for beginners? * 55:26 Sick Picks + Shameless Plugs.
Sick Picks * Corbin: Shiki Syntax Highlighter
Shameless Plugs * Corbin: Framework Field Guide
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
Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.
Show Notes * 00:00 Welcome to Syntax! * 02:39 We’re on YouTube. * 03:14 The four categories of UI libraries or frameworks. * 03:46 What does a UI component need to do? + 04:14 Must be functional. + 06:20 They must fit styling. + 06:33 They must be accessible. + 08:09 “Internationalizationable.” + 09:29 They must handle theming and variants. * 10:05 A few common UI components. + 10:14 Date Pickers. + 12:10 Dropdowns. + 13:21 Toast message. + Svelte French Toast + 15:11 Some honorable mentions. * 16:10 Headless components. + 18:54 React Aria. + Behavior, Accessibility, Internationalization + 19:34 Radix UI Primitives. + 20:16 Downshift JS. + 21:29 Tanstack Table and Forms. * 26:00 Unstyled components. + 28:04 Shoelace. + 32:47 React Aria Components. + 33:00 Headless UI. + 33:04 Radix UI. + 37:12 Base UI. * 38:23 What’s up with Google’s design? * 40:22 Styled Starters. + React Aria Components Starter + ShadCN + Tailwind Catalyst + MeltUI * 47:50 What is the process for overriding with custom elements. * 51:10 UI Kits and Design Systems. * 53:06 Some things to consider. * JS Nation * 55:41 A few more options to consider. + Pigment CSS + Base UI + Shoelace + BaseLayer + JollyUI + DraftUI + Radix UI + PenguinUI + Tailwind CSS + TailwindUI + VerveUI + DaisyUI + ChakraUI + Flowbite + FloatingUI + Downshift JS + Mantine * 59:02 Sick Picks & Shameless Plugs.
Sick Picks * Wes: Battery Daddy * Scott: Lazy Susan, Rechargeable Batteries, Charger
Shameless Plugs * Scott: Syntax 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
Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year.
Show Notes * 00:00 Welcome to Syntax! * 01:16 Brought to you by Sentry.io. * 02:17 jQuery 1.2 released! * 07:38 jQuery Mobile. * 09:34 Skeuomorphism. * 10:25 How do you slice up your .PSDs? * Slicy By MacRabbit * 12:34 Cufon, new font method. * 14:06 CSS rounded corners. * CSS3Please * 15:17 Coda Tip. * 16:48 Top 5 CoffeeScript Features. * 18:44 Conference Talks to Spotlight. * BatmanJS, your new favorite JavaScript superhero * 20:35 WordPress 2.3! * 21:15 PHP 5.2.0 * PHP 5.2.0 Release Announcement * 21:53 Sponsored by Media Temple.
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
Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites.
Show Notes * 00:00 Welcome to Syntax! * 00:59 Who is Anne Thomas? * 02:30 Who is Trudy MacNabb? * 04:06 Shopify themes, how does one build a theme? * 05:34 Do you have enough control with LiquidJS? * 07:52 Changing components of a liquid template. * 08:58 LiquidJS improving their dev tools. * 09:29 LiquidJS email marketing. * 10:32 Can you make your own LiquidJS methods? * Too Many Tabs * 11:34 How would you create a theme from scratch using modern tools? * 13:30 What about local dev and live reload? * Shopify Tools CLI * 15:17 Is Shopify improving? * 17:13 What do you hate about Shopify themes? * Shopify Tools Theme Kit * 18:59 Have you used Hydrogen? * Shopify Hydrogen * 20:09 Headless has sacrifices. * 22:02 Are people building full websites in Shopify? * 23:56 Apps and integrations. * 25:56 Are people creating businesses around these integrations? * 29:16 What are design packs? * 31:26 Do you run your own servers? * 31:57 How does billing work with clients? * 33:18 Apps being ‘Sherlocked’. * ‘Sherlocking’ Explained * 35:21 Where is the data stored? * 36:35 Can you make a custom UI? * 38:40 What are the downsides of building apps on Shopify? * 39:17 Are you expected to maintain versions? * 40:46 Do you manage all the support independently? * 42:01 How do you match with their existing themes? * 43:54 What are the most popular blocks? * 45:17 Does Shopify provide bundlers or compilers? * 46:47 Shopify moving to blocks. * 47:38 Living as a digital nomad. * Syntax Episode 586 on Nomad Developing * 49:48 A new app Anne and Trudy launched. * 51:35 Limited by block size. * 54:08 Sick Picks + Shameless Plugs.
Sick Picks * Trudy: Bar of Shampoo * Anne: Alie Ward Ologies Podcast
Shameless Plugs * Trudy: 25% off using SYNTAX25 at Design Packs
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
Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements.
Show Notes * 00:00 Welcome to Syntax! * 01:14 Brought to you by Sentry.io. * 03:10 A very quick disclaimer. * 03:32 A brief view of our fitness history. * 06:19 Why is fitness important for developers? * 09:12 Setting your goals. * 13:06 Getting started with fitness. + 13:13 Body-weight. + 13:58 Stretching. + 16:47 Fun activities that don’t feel like workouts. + 17:48 Lifting weights. + Stronglifts + StartingStrength * 25:47 Home gym gear. * Rogue Stall Bar * 37:14 Fitness programs. * 40:53 I guess we have to talk about diet. * MacroFactorApp * 46:37 Motivation. * 47:42 Supplements. * BulkSupplements.com Creatine * 51:23 Sick Picks.
Sick Picks * Wes: Wikday Pull Up Bands * Scott: Booty Bands
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
Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills!
Show Notes * 00:00 Welcome to Syntax! * 00:41 Syntax on YouTube. * 01:28 What is middleware? * 05:04 Some real-world examples of middleware. + 05:10 Authentication. + 07:44 Redirecting users to a specific instance. + 08:28 Logging + statistics. + 09:41 Debugging. + 10:00 Timers. + 10:46 A/B testing. + 11:59 Error handling + logging. + 12:23 Caching. + 13:02 Multi-tenant applications. * 15:08 Where does it run? * 18:07 What are the limitations? * 21:52 Next.js middleware is one file only. * NextJS Middleware * 23:35 Sveltekit solution. * Sveltekit Hooks * 24:31 Connect style. * Fastify Express * Fastify Middle * 25:28 One last thing, NPM Installing.
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
Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work.
Show Notes * 00:00 Welcome to Syntax! * 01:55 Should developers know how to run their own servers? * 04:57 What is “bare metal”? * 11:49 What the hell is Kubernetes? * 12:25 Why would somebody need Kubernetes? * 15:37 Using Kubernetes to spin up different instances on cloud providers. * etcd * 16:43 Kubernetes managing traffic spikes. * 18:46 How much downtime can you handle? * 22:11 What exactly is a container? * 24:06 What containers do you prefer? * Docker * Containerd * 25:28 Some additional terminology. * OCI Open Container Initiative * 26:43 What about WASM? * WASM WebAssembly * 29:31 Building a Docker container. * 31:11 Why would someone want to use a WebAssembly container? * 32:12 Are people shipping this technology? * 33:36 What functions would you put in WASM? * 36:57 How does someone make a WASM image? * 39:22 A little more about Spin. * Fermyon Spin * 39:56 What type of processors are used in these servers? * 42:27 What are home servers running on? * Turing Pi 2 * Daniel Mangum * Universal Blue * 46:40 How should someone get started with Kubernetes? * Kubernetes.io * Rawkode YouTube * Kubesimplify * Learnk8s * 48:51 Infrastructure as code. * CDK for Terraform * GraalVM * 55:19 Sick Picks & Shameless Plugs.
Sick Picks * David: + Golem.cloud + Restate.dev
Shameless Plugs * David: + Rawkode 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
Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers.
Show Notes * 00:00 Welcome to Syntax! * 01:37 Syntax is on YouTube. * 02:09 Do we really need tooling? * 04:02 Popular tools are predominantly plug and play. * 06:15 What can tooling do for us? * 07:16 The tools in today’s workflow. + 07:21 Linters. + 11:29 Compilers and transpilers. + 13:30 Formatters. + 16:18 Tokenizers and Parsers. + 16:46 Bundlers. + 17:59 Macros. * 20:26 The new tools in the space. + 20:47 Biome, one toolchain for your web project. + 28:27 Oxc, the JavaScript oxidation compiler. + 33:01 Deno, code formatting. + 34:13 ESBuild, an extremely fast bundler for the web. + 34:37 Rolldown, fast Rust-based bundler for JavaScript. + 38:34 Ezno, TypeScript type checker. + 40:24 UnJS, Unleash JavaScript’s Potential. + 41:45 Lightning CSS, CSS parser, transformer, bundler, and minifier. * 42:31 Is JavaScript good enough to handle these tools? * 43:26 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Shinobi-Geddon: The 1980s Ninja Craze * Wes: Bachans Japanese Barbecue Sauce
Shameless Plugs * Scott: Syntax 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
Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology.
Show Notes * 00:00 Welcome to Syntax! * 01:19 Brought to you by Sentry.io. * 02:20 Easily reproducible environments. * 02:57 Containerization technology. * Containerization * OS-level Virtualization * 04:42 Docker is brand name containerization, there are others. + Podman + Containerd + Buildah + LXD * 05:26 Why would a web developer want to use Docker? * 08:19 How do you get started with Docker? + Download Docker Desktop + Start With Docs + Docker 101 * 09:14 How does Docker work? * Docker Sentry * Docker Registry * Docker Layers * 16:46 Adding Docker to an existing project. * SvelteKit Dockerfile * Node.js / Express * CLI Runner Twitchbot * Development PHP / Mongodb Dockerfile * 21:37 What is Docker Compose? * Docker Compose * 22:50 What are some ‘gotchas’ or things to look out for when setting up a project? * Coding Garden Example
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
CJ: X Instagram Tiktok TwitchTV YouTube
Randy: X Instagram YouTube Threads
Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, Sentry.io, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director.
Show Notes * 00:00 Welcome to Syntax! * 01:06 Who is Cameron McEfee? * 03:00 What does a Creative Director do? * 09:47 In a creative and collaborative field, how do you deal with hurt feelings? * 12:32 Experiences at GitHub (404/500 pages). * 15:35 Who is responsible for all the Octocat variations? * GitHub Octodex * 17:18 Did you ever get in trouble for using famous IP? * 21:07 Working at Sentry.io. * 25:08 What is your illustration process? * 27:04 What is GuideGuide? * GuideGuide * Moo Tokenizer/Lexer * 33:13 Grid Notation. * 36:10 Can ‘good colors’ be calculated, can good design be math’d? * 40:46 What was the process of building your own plugin? * 43:37 Adding guides with JavaScript APIs. * 44:44 Recreating application UIs within plugins. * GoodHertz * 50:22 How are you architecting these plugins? * 52:44 Sick Picks & Shameless Plugs.
Sick Picks * Cameron:
- Ember Mug
- Waterparks Spotify
- Execute Program
Shameless Plugs * Cameron: GuideGuide 50% off
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
Scott and CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans.
Show Notes * 00:00 Welcome to Syntax! * 01:20 Brought to you by Sentry.io. * 02:16 What book changed your life? + Whatever you think, think the opposite + It’s not how good you are, it’s how good you want to be + Crucial Conversations thanks @benvinegar * 04:58 What are the web development fundamentals for beginners? + Command Line Power User * 08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? + Chris Coyer’s Post * 11:51 Advice for migrating an existing React project to TypeScript. * 20:38 Countdown apps, performance vs accuracy. * 25:19 Are you listening to podcasts? Which ones? * 31:46 With AI on the rise, will free-tier plans become a thing of the past? + Coolify + Syntax 730: Own Your Own Paas * 35:59 What is SemVer anyway? + semver.org + npmjs + TypeScript on Semantic Versioning * 40:14 A question on ergonomics, home office aesthetics and productivity. * 47:59 Do you ever stop to consider VueJS in 2024? Why or why not? + unjs.io * 52:12 Sick Picks + Shameless Plugs.
Sick Picks * Scott: Ellenos Yogurt * CJ: Flat Iron Pepper
Shameless Plugs * Syntax.fm 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
Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records.
Show Notes * 00:00 Welcome to Syntax! * TypeScript * 01:05 Brought to you by Sentry.io. * 03:20 How do you combine string literal types? * Template Literal Types * 06:34 What is a TypeScript Generic and why would you use one? * TypeScript Generics * 08:12 How do you write a conditional type? * TypeScript Conditional Types * 09:58 Generating TypeScript type from a function. * Stricter Generators * 14:09 How do d.ts files work? * Module .d.ts * 16:25 Name one difference between a type and an interface. * Types vs Interfaces * 19:15 What is a tripple-slash directive and why would you use them? * Tripple-Slash Directives * 20:52 What is a TypeScript record and what is it used for? * Utility Types
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
Scott and Wes are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning.
Show Notes * 00:00 Welcome to Syntax! * 00:41 Brought to you by Sentry.io * 01:05 Who is Xenova? * 02:08 What is Hugging Face? * 03:29 What is Transformers.js? * 06:16 How was the library developed? * SponsorBlock * 09:04 How is it able to run? * 10:09 Do they have to run in Python and how does Onnx work? * Onnx.ai * Hugging Face Optimum * 14:19 What are some things you can do with this tech? * 16:15 Vision tools. * 17:38 This is actually running locally. * 18:35 Doodle Dash * 21:09 They currently run on CPU, what is required to make it run on GPU? * 24:44 Can you run in JavaScript? * 28:32 How it works with image vectors. * 34:23 Why would people want to run it in another language? * 35:55 Resizing images in the browser instead of on the server. * 38:55 Applications distributed on the web vs running locally. * 43:54 Electron has Node and Chrome, where would you run Transformers.js? * 44:32 The API of Transformers.js * 46:30 Object Detection. * Semantic Image Search Client * Real-Time Object Detection * Background Removal Tool * 48:33 What is the easiest way to get started? * 51:26 Real-time speech recognition on the horizon? * 52:08 Will we ever be able to run Stable Diffusion via JavaScript? * 56:10 The Web LLM. * 57:22 Practical applications for YouTube. * 59:39 What we want to build for Syntax.fm. * 01:06:43 Mean pooling, why it’s necessary. * 01:09:30 Stopping YouTube spam comments. * 01:10:34 K-Means Clustering. * Text Clustering * 01:13:49 Quantization. * 01:17:35 Sick Picks + Shameless Plugs.
Sick Picks * Xeonva: WebGPU
Shameless Plugs * Xenova: Xenova on X
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
Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights.
Show Notes * 00:00 Welcome to Syntax! * 03:18 Brought to you by Sentry.io. * 04:08 What is LoFi? * localfirst.dev * 05:02 The Seven Ideals for Local-first. + 05:29 1: No Spinners. + 06:48 2: Your work is not trapped on one device. + 07:56 3: The network is optional. + 08:50 4: Seamless collaboration with your colleagues. + 09:35 Oops, we for got to read 5: The Long Now. + 09:37 6: Security and privacy by default. + 09:45 7: You retain ultimate ownership and control. + Actual Budget Finance App + Ink & Switch * 13:01 Sounds great, let’s go! Not so fast, this stuff is hard. * 14:07 The technology involved. + 14:30 CRDT (Conflict-free Replicated Data Types). + Wikipedia Definition + James Long dotJS 2019 dotconfrences + 17:48 How does it prioritize conflict resolutions? + 19:36 Websockets. + 20:17 IndexedDB + SQLite. + 21:23 Service Workers. * 22:16 The software involved. + 22:24 Replicache. + 24:48 YJS. + 25:06 Electric SQL. * 25:51 The most basic LoFi application. * 31:26 Some bigger concepts. * 32:34 Answering some common questions. * 35:19 Some real-world examples of LoFi. * Habit Path by Scott Tolinski * 37:18 What about Apple PWA nonsense? * 38:20 This seems similar to real-time software and multiplayer. * 38:47 Sounds like too much work. * Triplit Fullstack Database * Electric SQL * Evolu * 40:46 Some useful links. + Local-First Web Development + Local-First Lo.fi YouTube + Local-First Ink & Switch + Local-First Reddit + Syntax GitHub Local-First * 43:30 Sick Picks + Shameless Plugs.
Sick Picks * Wes: Dresscode.dev * Scott: Monarch Money
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
Process is important. This show is dedicated to examples of non-developer tasks that can be improved by coding scripts. Join Scott and Wes for a deep dive into automation magic.
Show Notes * 00:00 Welcome to Syntax! * 02:11 Brought to you by Sentry.io. * 03:02 FFmpeg, a tool for video producers. * FFmpeg * FFprobe * 06:35 Markdown validation. * Syntax Markdown Validation * 09:21 AI timestamps for inform editing process. * Episode 456 Transcript * 12:19 Generating clips for social media. * 13:31 YouTube find and replace tool. * YouTube Find & Replace - work in progress * 15:03 What other scripts can you create? * 16:17 Packaging a tool for a non-developer to use. + 16:54 Apple Scripts + 17:45 Stand-alone website. + 19:25 Script Kit: Shortcut to Everything + 20:19 Other ways to run scripts. + ZX + Dax * 22:05 Get in touch with your tips.
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
Get ready to learn all about the JSR package registry with Wes, Scott, and special guest Luca Casonato of Deno, as they discuss its benefits, share insights on when to use it, and teasing some secret features that promise to enhance your coding journey.
Show Notes * 00:00 Welcome to Syntax! * 00:37 Brought to you by sentry.io. * 00:51 Who is Luca Casonato? * 01:18 Why do we need another package registry? * Wes Bos Tweet * 04:35 Is it ESM only? * 06:08 What exactly is JSR? * 07:22 How do you install things from this registry? * 09:38 NPM specifier in NodeJS? * 12:18 Why can’t we just fix NPM? * 14:28 When you make things easier, people make cooler stuff. * 17:49 A little bit about auto-documentation. * 21:18 Auto-Types. * 22:33 Can’t you just put TypeScript files on an NPM? * 24:04 Package Provenance. * NPM Package Provenance * 25:14 Does JSR have any plans for scanning dependencies? * 27:56 GitHub action integration. * 30:08 Does JSR replace url imports in Deno? * Import Maps, Ep.596 * 32:15 What about publishing JSX, TSX, CSS, WASM, etc? * 34:16 What are Slow Types? * 36:34 Do you think we’ll ever see another implementation of a TypeScript type checker? * 38:23 Types as comments or adding types to JavaScript. * 40:10 What is the anticipated timeline? * 41:52 Are there any parts of TypeScript that you don’t like? * 43:32 What about when TypeScript breaks? * 46:20 JSR community funding. * 49:39 Are you planning on pre-registering popular names? * 52:26 Super secret new features! * 56:39 Sick Picks + Shameless Plugs.
Sick Picks * Luca: Hono
Shameless Plugs * Luca: jsr.io
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
Scott and Wes introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies.
Show Notes * 00:00 Welcome to Syntax! * 01:06 Brought to you by Sentry.io. * 04:39 What got you into web development? * 09:23 Does a degree in computer sciences help you in your day to day as a web developer? * Bell Curve Meme * 11:39 Wes downloads every single .com domain name. * 15:19 What was your very first web development job? * 18:12 How did you go from C# to websites? * 21:12 What is the worst thing you’ve had to do as a developer? * 22:31 What are some of your favorite projects? * Is It New Years Day * Dung Hero * 26:32 What tech are you into right now? What inspires you? * 27:52 Why do you like experimenting with new technologies? * 29:39 Hono v4.0.5. * 30:29 HTMZ * 31:44 If you were to build a startup today, what would your stack be? * 32:39 What’s your tech setup? * Coding Garden GitHub * RK Royal Kludge Keyboard * 37:51 What got you into live-streaming? * 40:13 Why do you use a blue screen? * 41:19 What’s your philosophy on teaching? * Bloom’s Taxonomy * 43:56 What are your non-developer hobbies? * CJ Skateboarding with Syntax deck * CJ’s floofy doggo, Pig * Sony VX10000 * Sony Mavica * 51:00 Sick Picks + Shameless Plugs.
Sick Picks * CJ: Ergonomics, More on Ergonomics * Scott: Project Farm YouTube trash bag comparison * Wes: Kitchy Pizza Cutter Wheel
Shameless Plugs * CJ: Coding Garden * Scott: Syntax 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
Wes shares the story of how the Taliban stole his .af domain. Scott and Wes discuss top-level domain (TLD) best practices, how to find unique custom domain names for your website, and how to avoid having yours stolen.
Show Notes * 00:00 Welcome to Syntax! * 00:16 Brought to you by Sentry.io * 01:11 The story of how the Taliban stole my domain. * 05:10 When you purchase a domain, does that country receive the registration fee? * Country Code Top-Level Domain * Infrastructure Top-Level Domain * Generic Top-Level Domain * Sponsored Top-Level Domain * 07:29 Notion lost their .so domain. * Notion * 09:18 .ai domain names. * 09:53 Other popular TLD options. * tolin.ski * wes.io * 12:05 What are the best TLDs? * 13:18 iwantmyname
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
Scott and Wes welcome HTMX creator Carson Gross to discuss the versatile applications and optimal scenarios for using HTMX, alongside insights into its creation and evolution. Join us as we explore the future prospects and improvements as we look towards HTMX 2.0.
Show Notes * 00:00 Welcome to Syntax! * 00:52 Brought to you by Sentry.io * 02:22 Who is Carson Gross? * BigSkySoftware GitHub * BigSkySoftware * 03:53 What exactly is HTMX? * htmx.org * htmx.org/examples * 07:04 What made you want to create something like HTMX? * intercooler.js * 10:01 Would HTML look more like HTMX if we were to rebuild it today? * 12:54 Isn’t HTMX a step backward into old-school AJAX? * 16:09 When would you avoid using HTMX? * 17:56 Does HTMX put an unnecessary load on the server? * 21:46 What are your thoughts on rendering everything on the server? * 26:29 What is your favorite stack? * 28:49 Things that are lost moving to the JavaScript framework world. * 30:16 HTMX coupling your front end and back end. * 32:28 How do you feel about web components? * 33:40 What are the big templating engines and your top pick? * HTMX Essays * 36:33 Object-oriented HTML. * 37:38 Is there an offline story or a “local-first” story for HTMX? * 38:44 What does the future of HTMX look like given its rise in popularity? * 40:03 HTMX and X (Twitter). * Syntax Show 726 * HTMX on X * 42:30 The Microsoft story. * 45:26 Carson’s thoughts on de-escalating the language around HTMX. * 47:44 Sick Picks + Shameless Plugs.
Sick Picks * Carson: AlpineJS, Datastar
Shameless Plugs * Carson: Hypermedia Systems, HTMX Swag
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
In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval.
Show Notes * 00:00 Welcome to Syntax! * 01:35 Brought to you by Sentry.io. * 02:49 I have over 100,000 user images on Cloudinary. How do I migrate to another service? * Cloudflare-Cloudinary Proxy * 07:27 Switching from Mac to PC. * Figma, DaVinci Resolve * 12:32 What’s your take on the Safari 17.4 PWA removal debacle for EU users? * Bug Report * Fullscreen API Bug Report * 19:45 Is there any clear front-runner when it comes to monorepo tools? * 23:44 Some big web apps have a div relatively high in the DOM with a class like “scroll-container” or “cursor-events”, why is that? * 32:15 Is ChatGPT Plus worth it? I’m trying to avoid death by 1000 subscriptions. * ElevenLabs * 37:47 Performance vs accuracy when working with timers. * 40:37 How do you update the dependencies to work with a current version of Node? Also, if you are building from scratch, how do you determine what dependencies to use? * Syntax show 425: Updating Project Dependencies * 45:52 Clarification on the browser blocking. * Mozilla’s vision for Firefox MV3 * 49:19 Problems when working with JavaScript’s new Date(). * 54:27 Sick Picks + Shameless Plugs.
Sick Picks * Scott: LED Flashlight
Shameless Plugs * Wes: Syntax 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
Wes and Scott explore the web standards and email authentication methods that keep your email from going to spam; DMARC, SPF and DKIM. If you send email via a custom domain name, you need to listen to this!
Show Notes * 00:00 Welcome to Syntax! * 01:06 Brought to you by Sentry.io. * 02:08 What exactly are SPF, DKIM, and DMARC? * 02:53 Different ways that you may want to send email. + 03:23 Transactional emails. + Resend, email for developers + 05:07 Email marketing. + 05:47 Anything else that sends email on your behalf. * 07:13 SPF (Sender Policy Framework). * Postmark defines SPF * Postmark SPF in 5 Minutes * 08:34 You can only have one SPF record. * 10:18 DKIM (DomainKeys Identified Mail). * Postmark defines DKIM * 13:39 DMARC (Domain-based Message Authentication, Reporting, and Conformance). * Convertkit * 16:38 RUA Reporting. * 18:03 How to set up reporting. * 21:08 Does emails marked as spam hurt the IP that sends them? * 22:18 Other things to consider. * Special thanks to David Flanagan for the help on this! @rawkode
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
Scott and Wes are joined by security expert, Alex Sexton of Stripe to cover all things: client security, XSS, attack vectors, and CSP (content security policy).
Show Notes * 00:00 Welcome to Syntax! * 00:31 Brought to you by Sentry.io. * 00:57 Who is Alex Sexton? * 04:44 Stripe dashboard is a work of art. * 05:08 Tell us about the design system. * React Aria * 08:59 Who develops the iOS app? * 09:50 Stripe’s CSP (content security policy). * 12:50 What even is a content security policy? * Content Security Policy explanation * 13:57 Douglas Crockford of Yahoo on security. * Douglas on GitHub * 15:13 Security philosophy. * 16:59 What about inline styles and inline JavaScript? * 19:41 How do we safely set inline styles from JS? * 20:20 Setting up with meta tags. * 22:52 What are common situations that require security exceptions? * 26:24 Potential damage with inline style tags. * 32:45 Looping vulnerabilities. * 36:32 What about JavaScript injection? * 37:09 Myspace Samy Worm. * Myspace Samy Worm Wiki * Sentry.io Security Policy Reporting * 42:02 Does a CSP stop code from running in the console? * 43:28 What are some general security best practices? * 46:35 Strategies for rolling out a CSP. * 51:49 Final tip, Strict Dynamic. * Strict Dynamic * 56:36 Where does the CSP live within Stripe? * Original Black Friday story * 59:35 One last story. * 01:01:20 Sick Picks + Shameless Plugs
Sick Picks + Shameless Plugs * Alex: Wes Bos’ Instagram
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
Scott and Wes talk about the benefits of owning your own PaaS (platform as a service), the main alternatives in the space, and ways to make passion projects more financially viable.
Show Notes * 00:00 Welcome to Syntax! * 01:12 Brought to you by Sentry.io. * 01:56 What is a PaaS? * NGINX * 04:21 Challenges with payment structures. * Render * 07:02 What is Kubernetes? * Kubernetes * 07:51 What are the differences between Kubernetes and Docker? * Docker Swarm * 09:15 Reasons to own your own PaaS. * Nelify * Bluehost * 15:05 “Pokémon or Web Service” * Original 150 Pokémon Characters * 16:49 The players and their pros and cons. * 18:51 Where can you host these services? + 19:47 Kubero. + Kubero + 21:50 Coolify. + Coolify + Coolify pricing + 28:15 Caprover. + Caprover + 29:03 Dokku. + Dokku + Shokku + Ledokku + Atlas + Nixpacks + 32:53 Piku. + Piku + 33:24 Cuber. + Cuber + 34:13 Acorn. + Acorn + Coolify creator, Andras Bacsai on X * 36:44 The challenges of hosting your own PaaS. * 38:46 Jekyll ran on a PC under a desk. * Jekyll * 39:36 Sometimes less is, in fact, more. * 40:09 Final thoughts. * 45:03 Scott got Bun to work on Coolify. * 51:01 Sick Picks + Shameless Plugs.
Sick Picks * Wes: GripStic Chip Bag Sealer Amazon, GripStic Chip Bag Sealer Aliexpress * Scott: Caseta Diva Smart Dimmer
Shameless Plugs * Wes: Syntax 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
In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations.
Show Notes * 00:00 Welcome to Syntax! * 01:00 Brought to you by Sentry.io. * 01:33 Why scope your CSS? * 03:21 Scott’s hot take. * 05:43 How does @scope CSS work? * 07:31 Similar to a component-based workflow. * 08:00 Not having to specify a selector for your scope. * 09:52 Pseudo inline hover styles. * 11:31 Donut scope. * 13:01 “Inverted donut-hole scope” * 14:50 Browser support + limitations.
Mozilla @scope
The Style Element
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
In this supper club, Scott and Wes welcome Kevin Hou, Head of Product Engineering at Codeium, a blazing fast AI-powered code completion and chat tool for developers.
Show Notes * 00:00 Welcome to Syntax! * 05:31 An introduction to Codeium. * 07:56 What information are you sending the AI to get such good completions? * Codeium compliance * 09:15 Codeium runs a 'Language Server'. * 11:15 Crawling dependency tree and abstract syntax tree. * 12:07 Using Codeium Live. * 12:34 How big of a codebase can you run this on? * 14:39 Sending select amounts of data to AI. * 16:06 Does Codeium maintain codebase preferences and styling (ie. snake case)? * 17:39 Will Codeium scan the dependency? * 19:23 AI UI, have we found the best format? * 21:55 Crazy ideas in tech. * 22:53 Additional AI UI inputs. * 24:14 How do you make an AI model? * 28:42 How does Codeium manage the product roadmap? * 32:09 Do AI models get worse over time? How does Codeium validate that it's not? * Open AI Evals * 35:39 How is Codeium THAT fast? * 36:49 What programming langauges does Codeium use? * 38:55 Codeium Playground. * Codeium Playground * 39:15 Caching as a performance improvement. * 39:58 What is the pipe between Codeium and editor? * 40:17 Codeium chat service. * 41:44 A WebSocket system allowing push and pull communication. * 43:13 Closed Beta for GPT 4.0. * 46:12 The dreaded closing quote bug. * 48:26 Sometimes bugs bug Wes. * 49:49 Supper Club Questions * 51:40 Perplexity.ai * 52:35 What editor does Kevin use? * 55:31 Sick Picks + Shameless Plugs
Sick Picks * Kevin: Lapse.com
Shameless Plugs * Kevin: Codeium.com
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
Join Wes and Scott for a 30,000 foot, ‘soup-to-nuts’ view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting.
Show Notes * 00:00 Welcome! * 00:21 30,000 foot view of web development * 02:37 Brought to you by Sentry.io * 02:55 Starting with design tools. * 06:10 Code Tooling + 06:22 Text Editors + 09:34 Terminal + 14:28 Build Tools + 16:07 Browser and dev tools + 18:21 Formatter and linter. * 21:43 CSS (how you style your website). * 25:34 Programming languages. * 27:14 Backend with metaframework. * 29:36 Backend without metaframework. * 32:20 Runtimes (JavaScript). * What is Bun? The New JS Runtime * The Deno Show * 34:02 User interface libraries. * Shoelace.style * 39:43 Data management: Databases * 41:42 Data management: ORM * WTF is an ORM * You should learn Drizzle, the TypeScript SQL ORM * 42:53 Other data management considerations. * 43:33 Image pipelines. * 45:52 Hosting, CDN, CI. * Where Should You Host Your App? Hosting Providers Compared * Hasty Treat WTF × SSR vs JamStack vs Serverless? * 47:21 Hosting your site. * 50:19 The finishing touches. + 50:26 Brought to you by Sentry.io + 52:18 Captcha * 55:03 Sick Picks + Shameless Plugs.
Sick Picks * Scott: GreatScottLab, Show #594 * Wes: AliExpress Board, Wes’ Demo
Shameless Plugs * Scott: Syntax on YouTube * Wes: Syntax 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
Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications.
Show Notes * 00:00 Welcome * 02:07 Brought to you by Sentry.io * 02:53 What exactly is HTMX? * 04:30 What you need to know before working in HTMX. + 04:35 You need a server. + 05:35 You’ll most likely need a templating engine. + 06:42 You most likely do not need as much client-side JS. + 08:33 You don’t work in JSON + 11:15 Not something you can swap out your UI with in a SPA. + 11:48 Brings back AJAX * 13:32 So, what can it do? * 15:20 And what it doesn’t do. + 18:25 It doesn’t do server-side responses. * 19:09 What about animations? * 19:20 What about CSS? * 19:57 What about Web Components? * 20:06 What about third-party client-side JS? * 20:18 What about WebSockets and SSE? * HTMX WebSockets * 20:30 What about extensions? * HTMX Extensions * 21:00 Wes’ “bomb” question. * 24:16 What Scott likes about HTMX. * 25:45 What Scott doesn’t like about HTMX. * HTMX Multi-Swap * 30:33 Hype, Meta Framework. * Hype
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
Wes and Scott talk with Jen Simmons about the latest updates to Safari, reporting bugs to Apple, understanding color in CSS, new CSS switch controls, and testing your websites in Vision Pro hardware.
Show Notes * 00:00 Welcome to Syntax! * 00:03 Brought to you by Sentry.io * 01:05 Meet Jen Simmons. * 03:15 Safari has been killing it lately * Safari Release Notes * WebKit Features in Safari 17.0 * WebKit Features in Safari 17.1 * WebKit Features in Safari 17.2 * 10:25 Wes’ cOnSpirACy about Apple and APIs * 18:18 Where is the best place to report bugs to Apple? * Bugs.Webkit.org * Jen on Mastodon * Web Compat * 20:35 What’s happening with CSS Color gamuts and models? * 33:57 Is contrast color ever going to to land? * 36:25 Where is the CSS Grid and Masonry proposal at? * 44:20 Will we be able to target a specific row in a grid? * 46:17 What are CSS switch controls? * 48:44 How can web devs view their websites in Vision Pro devices? * Apple Vision Pro * Running your app in Simulator or on a device * 54:26 In what ways are HTML / CSS / JavaScript running where we don’t realize it? * 58:43 Sick Picks
Sick Picks * Jen: Walking.
Shameless Plugs * Jen: webkit.org X
- Feedback Assistant at Apple
- Sessions - WWDC23 - Apple Developer
- Webkit Standards Positions
- Safari Technology Preview
- Safari Technology Preview Release Notes
- What’s new in CSS at WWDC23
- Rediscover Safari developer features at WWDC23
- What’s new in Web Apps at WWDC23
- Meet Safari for spatial computing at WWDC23
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions.
Show Notes * 00:08 Welcome * 01:27 Syntax Brought to you by Sentry.io * 02:45 Welcome Randy, our new Producer! * Randy’s YouTube * 04:14 A ‘Canadian Podcast’ * 04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries? * 08:21 What powers the “in-app” browsers and how can we test our sites on it? * Inject tracking code * Tauri * 13:16 A deep dive on generators and iterators. * An Insight into Iteration Protocol through Infinite Scroll in Angular * 15:25 Video podcast observations * 17:18 PROBLEM I need a way of managing state. * 22:34 Why is Virtual Dom (a la React) suddenly bad? * 28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate. * 29:07 Updated logo and monster truck intro. * 30:19 Back to OG Images. * 31:51 Are “import * as X” exports build stripped? * 36:46 What is the difference between S3 storage and a CDN. * Backblaze CDN * 45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer? * 50:04 Sick Picks + Shameless Plugs
Sick Picks * Scott: Perplexity.ai, Serversideup * Wes: Zojirushi Rice Cooker
Shameless Plugs * Wes: Wes Bos Courses * Scott: Sentry
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Randy: YouTube
Scott: X Instagram Tiktok LinkedIn Threads
Unveiling Svelte 5! delving into its latest features. From the impressive speed and simplicity to its compact size, discover what makes this new release so exciting.
Show Notes * 00:00 Welcome * 00:39 Syntax Is A Video Podcast! * @syntaxfm on YouTube * 01:52 Brought To You By Sentry.io * 02:42 Svelte 5 Introduction * Svelte 5 Intro * 05:45 What Are Runes? + 06:21 $state() + 11:49 $props() + Class as a rest prop + 16:41 $effect() + 21:17 $inspect() * 23:03 What Are Snippets? * 27:33 What Are Events? * 30:02 Built In Functions * 32:42 Smaller Output * Reddit example * 33:31 Speed * Benchmarks * 35:00 Anticipated Release * Try it today
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Thomas Steiner talks with us about Project Fugu, an effort from Google to enable new classes of applications to run on the web. What is Project Fugu? What are some of Thomas’ favorite APIs to use? What is an IWA vs a PWA? And more!
Show Notes * 00:32 Welcome * 01:52 Who is Thomas Steiner? * 02:57 What is the overall goal of Project Fugu? * 08:17 When might we see these APIs come to all browsers? * 14:10 Do you have examples of companies pushing for an API? * 18:53 What happens with the face detection API? * 28:33 What is an IWA? * 35:17 What is the web transport API for? * 37:11 What is MIDI? * 41:20 Nintendo Joycon hack * 45:28 File handlers in a PWA * 50:38 File System Observer API coming soon * 56:26 Sick Picks * Onnx * HuggingFace * Chrome for Developers * Fugu API Tracker * Google I/O 2023 * LEGO Education SPIKE * Igalia * CapCut * Descript * Better Touch Tool
Sick Picks * Laser printers
Shameless Plugs * HowFuguIsMyBrowser
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
We’re doing a Tasty overview of Drizzle in this episode. What is Drizzle? What are different types of databases? How do you host databases? What have we built with Drizzle? And how does Drizzle handle relational data, TypeScript, querying, selects, transactions, and more!
Show Notes * 00:10 Welcome * 00:52 Syntax Brought to you by Sentry * 01:50 What is Drizzle? * 09:11 Different types of databases * 17:58 Why pay for SQLite hosting? * 20:36 Defining your data structures * 24:27 What we’ve built using Drizzle * 28:28 Relational data * 36:17 TypesScript and Drizzle * 40:53 Querying + Selects with Drizzle * 46:23 Transactions * 47:09 Syntax Drizzle Studio theme * 48:27 Sick Picks * Drizzle ORM * Drizzle ORM - Overview * Meet Drizzle Studio * Benchmarks * Sequel Pro * TablePlus * phpMyAdmin * Cloudflare D1 * Bun * habitpath.io * Chartable * Neon * Answer Overflow * Drizzle Studio Themes
Sick Picks * Scott: BlackBerry - Apple TV (CA) * Wes: Candle Warmer Lamp
Shameless Plugs * Syntax Tiktok
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
It is time. Wes and Scott attempt to blow your minds by talking about time, who’s tracking time, where does time come from, what time is it in your browser vs someone else’s server, and standards around time.
Show Notes * 00:25 Welcome * 00:55 Thanks to Chris Enns * LemonProductions.ca * Chris Enns on Twitter * Podcast tutorials by Chris Enns on YouTube * 03:14 What is time in the browser? * 06:27 What are atomic clocks? * Atomic Clocks and Cloudflare * 08:22 Network time * 09:35 Device time * 11:11 Why is time so important? * 14:35 Epoch time * Syntax epoch convertor * 16:58 ISO 8601 standard * ISO 8601 * 19:20 RFC 3339 * RFC3339 * 20:35 Time zone support * 21:59 The Temporal API
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Wes and Scott talk with Brian LeRoux about not using a bundler, handling TypeScript, live reloading, Enhance being a meta framework, how Enhance handles CSS, his experience at AWS: Reinvent, and the state of JavaScript run times in 2024.
Show Notes * 00:31 Welcome * 01:00 Introducing Brian Leroux * 01:32 Syntax Brought to you by Sentry * 01:54 You can’t fix bugs you can’t see * 03:14 Not using a bundler * 05:48 Downsides of not using a bundler * 11:13 What about TypeScript? * 13:58 Is there a waterfall of imports? * 18:29 What happens to live reloading? * 22:12 The browser upgrade path * 26:39 Is Enhance a meta framework? * 29:02 What are you doing about SSR web components? * 33:24 Can you refresh part of the application? * 36:22 What about state management and Enhance? * 42:52 How does Enhance handle CSS? * 48:26 How was AWS: Reinvent? * 54:47 What’s happening with the Begin CLI? * 55:55 Any thoughts on new JavaScript run times? * 59:51 Sick Picks * brian.io * Quickstart - Architect documentation * Enhance * aws-lite
Sick Picks * Analogue Pocket
Shameless Plugs * Begin — The Cloud Platform for Functional Web Apps
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more.
Show Notes * 00:10 Welcome * 00:52 Syntax Brought to you by Sentry * 01:39 New Heights with Scott and Wes * 04:33 What are React Server Components? * 10:52 The difference between server components and client components * Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it. * 11:37 Why would you want to run something server side? * 15:22 Components are server rendered by default * 16:40 What is JS sprinkles? * 17:29 How do server components work? * 18:51 Moving an existing site to React server components take a while * 20:27 The rules * 27:12 Form Actions + Server Actions * 32:07 Buttons can have actions * 36:32 React Suspense * 39:13 What we like * Ryan Florence thread * 41:54 What we don’t like * 47:13 Design patterns * 47:35 Other things * RSC Devtools * Introducing Waku * Mux * 49:22 Sick Picks
Sick Picks * Scott: ASUS ZenDrive V1M External DVD Drive * Wes: Leatherman Arc
Shameless Plugs * Scott: Syntax YouTube * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
We’re kicking off 2024 by talking about productivity tips we’re using to stay focused, to do apps, calendars, focus states, and customizing our code editor.
Show Notes * 00:25 Welcome * 00:46 Syntax Brought to you by Sentry * 01:11 Welcome to 2024 * Anxiety and Uncertainty with Dr. Courtney Tolinski - Syntax #670 * 01:42 Getting systems in place * 03:30 Examining your current habits * 08:14 Tracking habits * 12:16 Neural Pathway Chain Breakers * habitpath.io/waitlist * STREAKS * A Passwordless Future Passkeys with Anna Pobletts - Syntax #710 * Clerk * 14:26 Todos * Stronglifts app * Getting Things Done * Things * Height * 20:14 The calendar as the ultimate tool * Cron Calendar * 23:52 Using Focus states * Focus App * 29:09 Customizing VS Code with an extension * Apc Customize UI++ - Visual Studio Marketplace * 31:14 Momentum
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Yagiz Nizipli talks about his involvement with Node.js, implementing .env, how he finds areas to improve in performance, the happy path vs the hot path, and new features coming to Node.js.
Show Notes * 00:32 Welcome * 01:01 Introducing Yagiz Nizipli * 02:21 What is your involvement in Node.js? * 03:27 Implementing .env * 07:03 Why was 20,000 lines of C required? * 11:00 How do you begin to find performance issues? * 15:17 How do you measure improvements? * 26:27 The happy path vs the hot path * 27:36 Is Rspack ready for prime time? * RSpack * 28:47 Bundle Size VS runtime perf? Whats more important? * 30:51 What’s it like working on a large project like Node? * 38:26 Will Node ever get TypeScript support? * 40:22 What are loaders? * 44:24 Node.js is getting a config file? * 51:37 Sick Picks
Sick Picks * Oxc * @Boshen_c
Shameless Plugs * @yagiznizipli
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
Wes and Scott answer your questions about duopoly in tech, tech stacks for creating content, switching from frontend to full stack, DSA knowledge, email HTML, and more!
Show Notes * 00:10 Welcome * 02:21 Syntax Brought to you by Sentry * 03:31 Are you concerned about duopolistic companies taking over the web? * 11:29 What stack do you you use for videos and sharing content? * 15:02 How do you know once your ready to officially make the switch from frontend to full stack? * 17:58 As someone new to tech and looking to apply for junior front end positions, how much should i know about DSA’s? * Friends that work at big tech companies - did you need Data Structures and Algorithms to get hired? I get an lots of messages from new devs asking how to learn these things. Many of them say the need it to work at FAANG type companies * 21:59 Which tools would you recommend for crafting HTML emails from scratch? * Foundation * MJML * React Email * 25:03 Hey are you guys setting up your own CI/CD like github action or gitlab CI? * Netlify * Vercel * 28:25 What do you think about unstyled component libs. Eg: Ark? * Ark UI * 31:47 Do I need to have every single feature on mobile as I do on a desktop? * Obsidian - Sharpen your thinking * Missive ‐ Team Email, Chat & Tasks * 39:15 How can I get better at planning my code? * shaky.github.bushong.net * Monodraw for macOS — Helftone * Octopus.do, Visual Sitemap Tool, Website Planner, Architecture * Mermaid | Diagramming and charting tool * 42:32 What exactly makes it so that a piece of logic is client/frontend logic vs backend logic? * 46:17 Sick Picks
Sick Picks * Scott: Sleeping Queens Card Game, 79 Cards : Toys & Games * Wes: Package drop box
Shameless Plugs * Scott: Syntax Newsletter * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
CSS :has() is out in all browsers and Wes and Scott have got the top 10 reasons you should start using :has() now.
Show Notes * 00:25 Welcome * 02:28 Syntax Brought to you by Sentry * 03:02 Overview of :has * 07:09 The anywhere selector * 09:41 Previous element * 12:59 Layout targetting * 15:45 Form validation styling * 17:51 All siblings * 21:07 Quantity queries * 24:19 Empty children * 24:56 Nested dropdown navs * 26:36 Attribute matching
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with Eric Meyer about his start on the web, the early days of CSS, where CSS is headed, are we going to lose a browser, and more!
Show Notes * 00:32 Welcome * 01:26 Who is Eric Meyer? * 05:44 In the earliest days, what browsers supported CSS? * 10:23 The current web platform test suite * web-platform-tests * 17:59 Are CSS features shipping faster these days? * 20:45 CSS learning from preprocessors * 26:24 What do you think about Tailwind and inline CSS? * 33:26 Alternative spaces where CSS may be used * CSS Speech Module Level 1 * The World Wide Web Consortium Issues CSS2 as a W3C Recommendation * 37:17 Do companies push CSS forward for a business use case? * 44:06 Trying to keep up with all the things is difficult * 48:19 What’s on Eric Meyer’s CSS wishlist? * 54:35 Supper Club Questions * Bruce Lawson * Firefox Nightly desktop, Android and iOS. * SerenityOS * The Ladybird browser project * Thunderbird — Free Your Inbox. — Thunderbird * Arc from The Browser Company * Mozilla Foundation - Homepage * 01:58 Sick Picks
Sick Picks * Polypane
Shameless Plugs * Igalia - Open Source Consultancy and Development * meyerweb.com
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
Wes and Scott give their predictions for 2024 in JavaScript, frameworks, server-side JS, tooling, CSS, developer ecosystem, and AI tooling.
Show Notes * 00:10 Welcome * 01:10 Syntax Brought to you by Sentry * 02:00 Types in JS will have real movement * 05:10 Temporal API will ship in 1 browser * 06:38 Perf tooling gets easy for everyone to understand * 07:32 CSS continues to get better where you need less JS * 08:35 The year of the server in frameworks * 10:32 Svelte v5 is very fast * SvelteKit • Web development, streamlined * 12:04 Astro is going to have a good year * Astro * 4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello) * 14:22 React server components * dai-shi/waku: ⛩️ The minimal React framework * Waku * 19:45 Remix moves away from page-based loaders, to component loaders * 20:52 Hono will become more ubiquitous * Hono - Ultrafast web framework for the Edges * 23:23 Node will introduce TypeScript support via loaders * 24:48 We will see a route matching Proposal move ahead * URL Pattern Standard * 26:34 Bun releases full node compat * 27:34 We will see a new Linter + formatter entirely replace * Language support | Biome * HTML support · Issue #1326 · oxc-project/oxc * Prettier · Opinionated Code Formatter * 31:44 New TypeScript typechecker * 32:42 Lightning CSS pops - or does it? * 34:37 You’ll hear more about Rspack and Turbopack * 35:55 Vite isn’t going to release anything big in 2024 * Vite | Next Generation Frontend Tooling * 36:55 CSS contrast-color will land in chrome * 37:27 Relative color will land in all major browsers * 37:48 Scroll animation landing in 2 browsers * 38:40 The year of CSS discovery * 41:20 Safari will Ship 3 missing PWA Support * 44:10 Firefox usage will continue to slip * 47:43 Paid Arc features * 47:55 More XR web experiences as Apple releases in Vision Pro * 49:07 AI Tooling * Galileo AI * v0 by Vercel * Transformers.js * 51:07 Small Models that run in the browser * 52:08 Apps get sherlocked by OpenAI * 53:24 On prem corporate AI * 54:15 Sick Picks
Sick Picks * Scott: ISO100 protein power, Weekend at Bernie’s * Wes: Roborock S8 Pro Ultra Vaccum + Mop
Shameless Plugs * Scott: Syntax Newsletter * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more.
Show Notes * 00:25:15 Welcome * 01:27:04 Syntax Brought to you by Sentry * 01:52:00 Examples of how Wes uses print CSS * 03:42:16 Using it for invoices or receipts * 05:08:24 Delivering a book as a PDF * 05:42:16 How do you load CSS only for printing? * 10:41:08 Using units in CSS * 11:29:15 CSS Counters * MDN: CSS Counters
body { counter-reset: chapter; / create a chapter counter scope / } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; / add 1 to chapter / } h1 { counter-reset: subchapter; / set section to 0 / } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; } * 14:31:10 Named Pages
@page title { @top { / no header for title pages / content: “”; } } @page chapter { @top { content: “This is a chapter page”; } } * 15:27:09 Margins, Headers + footers, Page Numbers * 18:01:18 Debugging Print CSS * 19:57:18 Getting into a PDF * Docraptor * Playwright * Puppeteer * JSPdf * 24:45:04 Other Things to consider
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with Anna Pobletts of Passage about passkeys, how passkeys work, how to implement passkeys on your website or app, what the recommended UI is for passkeys, what happens to your passkey if you lose your phone, and more.
Show Notes * 00:32 Welcome * 01:36 Why do we need something like Passkeys? * 03:34 What are Passkeys for? * 10:04 What took us so long to get to Passkeys? * 11:07 Where’s the two factor part of Passkeys? * 13:08 How are Passkeys phishing resistant? * 14:44 What happens to your Passkey if you lose your phone? * 18:40 What’s the password recovery workflow like with Passkeys? * 23:08 Having a backup device helps a lot with Passkeys * 24:58 Why companies should use two factor or Passkeys * 29:26 What are the standards and tech behind Passkeys? * 32:38 What kinds of companies are implementing Passkeys? * 34:34 What is the recommended UI for telling users about Passkeys? * 39:17 How do you implement Passkeys on your app or website? * 41:47 1Password open sourced low level libraries * 47:34 What does the future look like for Passkeys? * 51:07 Supper Club questions * 53:44 Sick Picks * 1Password * Have I Been Pwned * 1Password Watchtower * Passkeys.directory * passkeys.dev * FIDO Alliance - Open Authentication Standards More Secure than Passwords
Sick Picks * Cascadia
Shameless Plugs * Passage by 1Password
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott:X Instagram Tiktok LinkedIn Threads
In this potluck episode of Syntax, Wes and Scott answer your questions about naming things in programming, use case for generators, CSS @Layers follow up, database prefixes, generalist vs specialist, where’s the sick pick page, and more!
Show Notes * 00:08 Welcome * 01:20 Syntax Brought to you by Sentry * 01:48 How much of programming is genuine advanced technical stuff vs just fancy complex sounding names for things? * 05:10 I found a non-trivial use case for GENERATORS! * 11:05 CSS @Layers follow up from 668 * Hacking the Tonal - Proxying, Intercepting + Debugging Traffic? - Syntax #668 * Allow authors to apply new css features (like cascade layers) while linking stylesheets · Issue #7540 · whatwg/html * 15:37 On a previous episode, what did you mention regarding database-prefix? * 18:20 Is it better to be a generalist or specialist as a front end dev? * 23:20 I can’t find the sick picks page on the new site. Any plans to bring that back? * Filtering and Discovery Notes · Issue #935 · syntaxfm/website * 24:25 Can you guys give some advice about how to grow and improve as developers while struggling with ADHD? * Supper Club × Coding with ADHD with Dr. Courtney Tolinski - Syntax #532 * 29:55 Any chance you could make an embeddable player? * 31:32 Could you have the people behind Cards Against Humanity on a future supper club episode? * Cards Against Humanity * Poor Charlie’s Almanack: The Essential Wit and Wisdom of Charles T. Munger * Cards Against Humanity 99% Sale * Warehouse | Blackbox * Yowza * 34:50 What are some of the differences between being a professional developer in Canada versus the United States? * 40:58 Is HTML Over The Wire awesome, or super awesome? * 42:52 How can I develop locally with a postgres database and Prisma / Vercel for hosting? * Env Variables and Modes | Vite * 46:23 Sick Picks
Sick Picks * Scott: Mother In Law’s Gochujang Fermented Chile Sauce, MIL Kimchi Gochujang and Gochugaru * Wes: SEOUL SISTERS Korean Kimchi Powder
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk through the ways they improved performance on the Syntax.fm website, how they knew it was slow to begin with, and the various changes they made to caching, and loading transcripts to improve the speed of the site.
Show Notes * 00:25 Welcome * 01:32 Adding a database requires queries * 03:32 How did we know the site was slow? * 04:25 Syntax Brought to you by Sentry * 07:45 Changing the way transcripts are being loaded * 13:41 Caching * 21:16 Caching Headers
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more!
Show Notes * 00:24 Welcome * 01:18 Syntax Brought to you by Sentry * 02:05 SSR JS sites more the norm * solidjs.com * Remix - Build Better Websites * Next.js by Vercel - The React Framework * SvelteKit • Web development, streamlined * Astro * 04:14 TypeScript Inferred becomes hot * 05:20 Types In JS? * ECMAScript proposal for type syntax that is erased - Stage 1 * 07:55 Deno gets hotter * 11:12 JS runtimes mature * htmx * 11:50 We will see a new TS Type Checker written in Rust * 14:06 New JS APIs * What’s the status of this project? · Issue #1101 · dudykr/stc * Wes Bos on X: "Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3 * tc39/proposals: Tracking ECMAScript Proposals * JS Fundamentals - Decorators - Syntax #653 * 16:29 Writing towards Winter CG Spec Popular. * WinterCG * 17:09 Edge Rendering More Common * Prettier on X: "We setup a $20k bounty for a rust-based compatible printer with prettier. * $20k Bounty was Claimed! · Prettier * 18:09 A new JS framework * 19:05 Page Transitions API * 19:51 Rust becomes more popular * 24:00 More WASM * Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion - Syntax #643 * FFmpeg * Fastly * 25:11 React Beta Docs launch after 5 year dev cycle * 26:47 We start to see CSS Container Queries in production * 29:05 CanIUse issues? * 31:20 CSS Subgrid * 32:56 More AI * 34:06 Tooling * Vite | Next Generation Frontend Tooling * Announcing Biome | Biome * Lightning CSS * Rspack * Turbopack * 36:08 People sour on React * 36:47 People sour on eslint * 37:16 Houdini does nothing * CSS Houdini| MDN * Is Houdini Ready Yet? * 39:57 How’d we do? * 40:40 Sick picks
Sick Picks * Scott: Super Mario Bros.™ Wonder * Wes: Tineco Pure ONE S11 Cordless Vacuum Cleaner
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk about understanding the integration of different components in AI models, the choice between traditional models and Language Learning Models (LLM), the relevance of the Hugging Face library, demystify Llama, discuss spaces in AI, and highlight available services.
Show Notes * 00:25:20 Welcome * 00:55:00 Syntax Brought to you by Sentry * 01:17:00 Understanding how the pieces fit together * 02:31:18 Models or LLM? * 04:43:22 What about Hugging Face? * 08:05:18 What’s Llama? * 08:51:15 What are spaces? * 09:29:06 Services available to you * 12:26:16 What are tokens in AI? * 17:38:18 What is temperature with AI? * 20:33:08 Using top_p * 21:06:00 Using fine-tuning to extend existing models * 22:11:19 Prompts are what you send to the model * 23:17:00 Streaming * 24:48:17 Embeddings * 27:34:17 OpenAI maintains Evals * 28:40:14 Different libraries for working with AI
- Hugging Face
- Creator of Swift, Tesla Autopilot & Tensorflow. New AI language Mojo with Chris Lattner
- LLaMA
- Spaces - Hugging Face
- OpenAI
- Anthropic \ Introducing Claude
- Replicate
- Fireworks Console
- gpt-tokenizer playground
- openai/tiktoken: tiktoken is a fast BPE tokeniser for use with OpenAI’s models.
- Supper Club × OpenAI, Future of programming, LLMs, and Math with Andrey Mishchenko
- Raycast Pro
- Amazon SageMaker (AMS SSPS)
- openai/evals
- LangChain
- PyTorch
- TensorFlow
- ai - npm
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this Supper Club episode of Syntax, Wes and Scott talk with Feross Aboukhadijeh about his work on Socket which helps to make sure the code you get from npm is safe and secure. They also touch on his work on Wormhole and Web Torrent.
Show Notes * 00:30 Welcome * 00:57 Who is Feross Aboukhadijeh? * 01:33 What is Socket? * [Socket.dev](https://socket.dev * dominictarr (Dominic Tarr) * pull-stream/pull-stream: minimal streams * 03:59 Introducing AI package summaries * Example of the AI summaries * Introducing AI Package Summaries * 07:04 Is Socket’s focus on visibility of a open source project? * 10:01 What was the inspiration for Socket? * Introducing “safe npm”, a Socket npm Wrapper - Socket * 16:22 How does Socket detect possible security issues? * Removed packages * event-source-polyfill protestware attack * john wick spam attack * 18:55 How many projects are you injesting for Socket to scan? * 26:00 What kinds of things are people trying to inject in code? * CS253 Web Security * 29:54 How do I hook Socket up to my project or GitHub? * 32:08 Do we still need to use shrink wrap? * 36:34 How did you implement the torrent spec in JavaScript for WebTorrent? * WebTorrent Desktop * WebTorrent FAQ * 43:11 Why did you build Wormhole? * Wormhole * 47:33 How expensive is it to maintain Wormhole? * Riverside.fm - Record Podcasts And Videos From Anywhere * 50:37 What do you think of decentralized code repos? * Radicle * Project Fugu * Fugu Tracker * 54:29 Understanding passkeys * 56:15 Supper Club questions * GitHub Theme - Visual Studio Marketplace * Web Serial API - Web APIs | MDN * 01:03:04 Sick Picks
Sick Picks * Harry Potter audio books
Shameless Plugs * ChatGPT
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more.
Show Notes * 00:25 Welcome * 01:31 Syntax Brought to you by Sentry * 02:01 Explain CSS Contain and why it exists? * 07:27 In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them? * Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X * 10:31 Which of the following elements are fake? * 13:00 Which of the following HTML tags are deprecated? * 16:38 What is the samp element? * 17:27 Name the 7 parts of CSS Houdini * 21:07 In JavaScript for loop with 10 items, how can you exit a loop early? * 22:34 What is the difference between a pseudo element and a pseudo class? * 25:59 How could you implement CSS :has with JavaScript? * 27:56 What are two attributes that would make an SVG more accessible? * 29:43 How can you stop your process from exiting if you have an unhandled rejection? * 32:27 How do you prevent flex children from getting squished? * 34:40 In TypeScript, what does using keyof and typeof together do? * 37:19 What does ARIA stand for? * 37:39 Name 5 limitations that a serverless or edge function have over tradtional long running server? * 40:38 Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size. * 42:03 If I’m building an application that needs to announce a change to the user, how would I do that? * 43:46 Name the 5 different Git elements methods on a document? * 45:39 What does the CSS prospective property do? * 48:23 Sick picks
Sick Picks * Scott: Pushpin hangers * Wes: Niimbot Label Maker, Bearclaw Screws)
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott give a high level overview of the observer pattern, what is the observer, what are downsides to too many observers, and more.
Show Notes * 00:25 Welcome * 01:42 Syntax Brought to you by Sentry * 02:16 High level overview * Syntax 694: What’s Up With Angular with Mark Techson * Godot Engine * 03:36 What might you observe in game development? * 06:50 What is the observer? * 08:11 What are some downsides to too many observers? * 10:17 IntersectionObserver, MutationObserver, and PerformanceObserver * 12:25 ResizeObserver * 13:04 What about addEventListener? * @BenLesh on Callbacks being faster than observables * 16:13 Signals are becoming a big thing
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk through new and proposed JavaScript APIs including ones related to regex, sourcemaps, structured clone, temporal, JSON modules, and more!
Show Notes * 00:10 Welcome * 01:26 Syntax Brought to you by Sentry * 02:55 RegExp Escaping Proposal * tc39/proposal-regex-escaping: Proposal for investigating RegExp escaping for the ECMAScript standard * 05:25 Intl.DurationFormat * tc39/proposal-intl-duration-format * 07:55 Standardized Sourcemaps * tc39/source-map-rfc: RFCs for the source map debug format. * 10:43 Structured Clone * structuredClone() global function - Web APIs | MDN * 12:54 Temporal * Hasty Treat - Temporal Date Objects in JavaScript * Tracking issue for syncing with IETF standardization work (req’d before implementers can ship unflagged) · Issue #1450 · tc39/proposal-temporal * 20:59 FindLast and findLastIndex * tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex. * 22:27 JSON modules * tc39/proposal-json-modules: Proposal to import JSON files as modules * 24:46 Regex Modifiers * RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online * 26:50 Array Grouping * tc39/proposal-array-grouping: A proposal to make grouping of array items easier * 30:48 Array Methods * tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change. * 6 or so New Approved and Proposed JavaScript APIs * 32:12 Promise.withResolvers * 35:08 Function.prototype.memo * tc39/proposal-function-memo: A TC39 proposal for function memoization in the JavaScript language. * 37:48 Node has a Proposed ESM Detection flag * 39:54 Node has navigator.userAgent * 41:29 Built in .env support * 42:52 Permissions model & test runner continues to be worked on * 44:06 HTML Web charts * Proposal: Web Charts · Issue #9295 · whatwg/html * 45:39 autopause * Add autopause attribute to media elements to allow automatic pausing of media · Issue #9793 · whatwg/html * 46:30 Meta Tag for AI generated content * Proposal: Meta Tag for AI Generated Content · Issue #9479 · whatwg/html * Schema.org - Schema.org * Syntax × Sentry Swag Store – Syntax × Sentry Shop * Syntax - A Tasty Treats Podcast for Web Developers. * 50:13 Poster frame * HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements · Issue #9812 · whatwg/html * 50:57 Popover invoker * Popover does not know what triggered it · Issue #9111 · whatwg/html * 51:25 Autocomplete on ‘contenteditable’ Elements * Autocomplete on ‘contenteditable’ Elements · Issue #9065 · whatwg/html * 52:17 Sick Picks
Sick Picks * Scott: Escaping Twin Flames cult documentary * Wes: Lao Gan Ma spicy Chili Oil
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects.
Show Notes * 00:25 Welcome * 01:18 Syntax Brought to you by Sentry * 01:44 What is ARIA? * WAI-ARIA Roles | MDN * An in-depth guide to ARIA roles - The A11Y Project * 02:48 What is aria-label?
// A button with an ARIA role and label * 06:36 What’s the difference between a title and aria-label on a button? * 08:34 Are you really going to get sued if your website isn’t accessible? * 11:53 What are Roles for? * 16:33 6 different types of Roles * 21:25 What is aria-labelledby?
I agree to the Terms and Conditions. * 23:13 Checking your code for accessibility * eslint-plugin-jsx-a11y - npm * WAVE Web Accessibility Evaluation Tools * Polypane * 24:31 Feedback and future show ideas
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with James Mikrut about Payload, how Payload isn’t just a CMS, where Payload fits in a tech stack, why they picked Drizzle for an ORM, what Payload Cloud is, and where’s the Rails for JavaScript?
Show Notes * 00:31 Welcome * 02:00 Who is James Mikrut and what’s the idea behind Payload? * 05:22 Payload isn’t just a CMS * Payload * Payload on GitHub * Payload on Twitter * Payload on YouTube * 09:08 Where does Payload fit in the tech stack? * KeystoneJS * Supabase * Retool * 11:22 Is Payload using TypeScript? * 13:44 Why did you pick Drizzle? * Drizzle ORM * 18:08 Do you have to maintain MongoDB and Drizzle? * SvelteKit * 26:31 Does Payload have visual editing elements? * 30:34 Do you build a custom UI for users? * 35:10 What is Payload Cloud? * 38:12 Where is the Rails for JavaScript? * Next.js by Vercel * Laravel Spark * Deploy your Laravel PHP application painlessly * RedwoodJS: The App Framework for Startups | RedwoodJS.com * 41:39 How do you manage contributions from open source? * 43:46 GitHub + AI * 48:18 Syntax Brought to you by Sentry * Error Management Magic: Introducing the Sentry Plugin for Payload * 50:26 Supper Club questions
Shameless Plugs Payload on GitHub
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this potluck episode of Syntax, Wes and Scott answer your questions, including: Will TypeScript ever go away? Should I write canvas-rendered web apps? How can I execute untrusted JS code in node? How can I use continuous integration with WordPress? Any advice for learning Rust?
Show Notes * 00:09 Welcome * 01:16 How to ask questions for potluck episodes * Ask a question for Syntax potluck episodes * 02:19 Syntax Brought to you by Sentry * 04:34 Will TypeScript ever go away? * Migrating millions of lines of code to TypeScript * 08:12 What is your opinion on entirely canvas-rendered web apps, such as those built with Flutter? * Flutter on the Web * Flutter Gallery * html2canvas - Screenshots with JavaScript * 13:43 Tailscale VPN is cool * Tailscale · Best VPN Service for Secure Networks * Tunnel | Zero Trust App Connector | Cloudflare * 16:36 What is Bandcamp? * Bandcamp * Stream and listen to music online for free with SoundCloud * 18:56 How can I execute untrusted JS code with node? * WebAssembly * Cloudflare Workers® * Deno, The next-generation JavaScript runtime * Fastly * 23:46 I’d love to get your thoughts on modern devops and continuous integration for building out WordPress websites. * Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields * Vite | Next Generation Frontend Tooling * Alpine.js * 30:39 How do I orchestrate color adapting icons for use inline and in background images? * svg.wesbos.com * svg.wesbos.com/cat.svg * 35:53 Are there any publicly available libraries for web components? * Shoelace: A forward-thinking library of web components. * Open UI * 40:20 What’s a good project idea for learning Rust? * Tauri Apps * 45:17 Do you ever plan to do more podcasts with Scott’s wife or another psychologist / psychiatrist? * 47:02 Have you tried MongoDB vector search for AI embeddings? * Atlas Vector Search | MongoDB * Vector Database for Vector Search | Pinecone * Xata * 49:44 Syntax highlighting in VS Code * Comment tagged templates - Visual Studio Marketplace * 52:38 Sick Picks
Sick Picks * Scott: The Spider-Man of Paris (2023) - IMDb * Wes: Amazon.ca : instant read digital thermometer
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
What are @Layers in CSS, when and where should you be using them, how do you write them, and who’s using them already?
Show Notes * 00:23 Welcome * 01:49 Syntax Brought to you by Sentry * 02:55 Where is this supported? * 07:21 How do we write layers? * 10:47 How do you write your CSS? * 16:20 Nesting * 20:35 Who else is using @Layer?
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with Salma Alam-Naylor all about her role in DevRel, what’s involved in working in DevRel, avoiding burnout, which platforms to focus on, and so much more.
Show Notes * 00:31 Welcome * 01:07 Syntax Brought to you by Sentry * 01:52 New jobs and onboarding * 03:34 What is Devrel? * 11:34 How much of devrel is using your own product? Dogfooding the service? * 14:49 What are things devrel people do? * 20:32 Devrel burnout issues * 24:53 Once you put a number on something, you’re measuring that number * 29:31 Is there any way to know if devrel is working? * 33:47 How could someone get into devrel? * 37:37 What platforms should you focus on? * 44:12 What’s something devrel gets wrong? * 47:50 What do you think about speaking at conferences? * 51:58 What do you use to stay up on with tech? * 53:59 Sick picks
Sick Picks * Wikipedia on Hell.com * Web Archive of Hell.com * Fffffound * https://twitter.com/webdesignmuseum
Shameless Plugs * Follow Salma on Twitch
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott answer a listener’s question about their process for building a website in 2023. Do you start with design? With code? How do you decide on which CMS or if you need a CMS? How do you choose a backend framework? And where do you host it?
Show Notes * 00:10 Welcome * 02:12 Syntax Brought to you by Sentry * 03:06 How do you build a website? * 04:57 Start with the design * Figma * Design Systems with Brad Frost * 11:12 Choose a Frontend / Components * Pug * EJS * React * Svelte * Remix * Storybook * 25:16 Real data or fake data? * Polypane * DrizzleORM * 29:34 Do you need a CMS or not? * Statamic * Syntax 254: Headless CMS Break Down & Roundup * WordPress.org * Astro * 35:16 Choosing a backend language or framework * 39:56 Testing * 44:50 Where do you host your website? * Vercel * Netlify Drop * Glitch * CodePen * 50:04 Sick Picks
Sick Picks * Scott: Chip clips * Wes: Soft close used toilet seat Amazon Warehouse Deals
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim.
Show Notes * 00:25 Welcome * 01:10 :nth-child(4 of .neat) * selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use * 06:43 CSS Motion Path * 10:38 Scroll Snap * Practical CSS Scroll Snapping * 14:36 Scroll Driven Animations * Scroll-driven Animations * Supper Club × Bramus Van Damme on CSS * 16:58 Margin Trim
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with Mark Techson about the recent Angular announcements and updates. How did Angular implement signals? What’s new in Angular 17? How does Angular handle CSS or UI component libraries?
Show Notes * 00:30 Welcome * 01:11 Syntax Brought to you by Sentry * 01:39 What’s changing with Angular? * Special Angular Event * Angular * 03:19 What happened to Angular.js, and what’s happening now? * StackBlitz * Analog | Analog * Supper Club × Self Hosted Backend-as-a-service with Brandon Roberts * 08:19 What makes Angular special? * 13:21 How did Angular implement signals? * 17:17 What is a computed value? * 18:54 What’s new in Angular 17? * 25:10 What’s the meta framework story with Angular? * Angular Material UI component library * CDK | Angular Material * Angular - Angular elements overview * 27:40 Adding close to the metal if statements * 31:03 View transitions * 32:34 How does Angular handle CSS? * 39:31 How does Angular integrate with UI component libraries? * 41:07 What are headless components? * 41:45 Does Angular work well with web components? * 42:43 Supper Club Questions * Accessibility in Visual Studio Code * Technology Radar Thoughtworks * RedMonk – The developer-focused analyst firm * Mermaid | Diagramming and charting tool * 49:38 Sick Picks
Sick Picks * Godot Engine - Free and open source 2D and 3D game engine
Shameless Plugs * #goodmorningwithmark on Twitter * #goodmorningwithmark 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
In this episode of Syntax, Wes and Scott talk about the lessons they learned while launching the new Syntax website including launching now, transcription bugs, error monitoring, black text on black backgrounds, and more.
Show Notes * 00:10 Welcome to Syntax * 01:41 Syntax Brought to you by Sentry * 02:43 Don’t wait. Launch! * 04:28 Transcript bug * Most Powerful Speech-to-Text API | Deepgram * 09:01 Error monitoring is a must * 12:36 Timestamp error * 16:20 Black text on black background might hide things * 17:33 WASM Vercel file system * 21:18 Things have gotten easier to launch * PlanetScale: The world’s most advanced database platform — PlanetScale * 23:36 Switching from OpenAI to Anthropic Claude and AI Responses aren’t always JSON * 25:34 Local dev is fast * Navigation API * 31:37 Mind your payloads * 32:41 GitHub Milestones * 33:57 Almost forgot the Robots.txt * 36:17 Chron job timeout * Inngest * 40:06 TypeScript errors don’t need to be zero to launch * 42:25 GitHub Actions pipeline bug * 43:23 Basic testing will do * Playwright * 44:56 Have a designer to work with * Airbase * 52:07 Sick Picks
Sick Picks * Scott: Dog Poop Bags With Dispenser * Wes: Resistance band
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Courses
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott explain what Stale While Revalidate is, why you should use it, and explore whether you should use it all the time on all the things.
Show Notes * 00:25 Welcome * 01:05 Syntax Brought to you by Sentry * 01:34 What is Stale While Revalidate? * 03:13 Why is caching important? * Max age calculator * Can I Use * 05:09 Where does a cache live? * 07:05 Limit how often an API is being hit * 11:51 What about Stale while Revalidate? * 18:30 Why wouldn’t you just use Stale While Invalidate on everything? * Syntax 484: Cache Control Headers Explained
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with Rita Kozlov And Brendan Irvine-Broque about Cloudflare Workers, Cloudflare AI, browser rendering API, Cloudflare’s D1 database, WinterCG, miniflare, and more!
Show Notes * 00:32 Welcome * 01:53 Syntax Brought to you by Sentry * 02:20 What are Cloudflare Workers? * Announcing WinterJS * Cloudflare Workers® * Puppeteer | Puppeteer * 06:23 How long did Workers take to ship? * 07:31 Can you run your entire business on Cloudflare Workers? * 10:52 Interesting use cases for Cloudflare Workers * 12:33 What makes the edge important? * 18:05 Managing GDPR compliance * 19:02 What are the tradeoffs of building with Cloudflare Workers? * Cloudflare Queues * 20:22 How does Workers pricing work? * 26:54 What are situations where you might need longer times? * 28:50 Browser rendering API * Browser Rendering docs * 29:43 What is Cloudflare D1 database product? * Cloudflare D1 * 31:05 Cloudflare Hyperdrive * Hyperdrive * “Serverless” Databases * 34:27 Cloudflare Workers don’t use a Node.js runtime * Introducing workerd: the Open Source Workers runtime * 37:13 What is WinterCG? * WinterCG * 45:09 Will we ever see a standard for server routing? * TCP sockets · Cloudflare Workers docs * 49:30 What is miniflare? * 🔥 Miniflare · Miniflare * 54:05 Can I run Python on Cloudflare? * 55:49 Cloudflare AI * Partnering with Hugging Face to make deploying AI easier * Cloudflare + AI * WebGPU API * Cache · Cloudflare Workers docs * 57:04 Supper Club questions * 59:38 Sick Picks
Sick Picks * Get a bench scrape
Shameless Plugs * Cloudflare Discord
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content.
Show Notes * 00:00 Syntax + Sentry Announcement! * 01:35 Welcome * 02:23 Syntax Brought to you by Sentry * 03:16 How to implement a theme * 10:27 Writing the CSS * 11:38 Glasses wearers protip * 13:02 Class on the body and server side rendering issue * 14:02 CSS Variables * 15:05 Color variables in CSS * 21:07 Working in half pixel sizes * 22:40 Variable usage * 25:23 Naming variables after what they style * 30:42 Component level variables * 33:27 Using zones * 38:41 Themes should be defined as light or dark * 39:20 Issues: Moving from light to dark * 42:29 Issues: Drop shadow in dark mode * 44:00 Issues: Flash of unthemed content * 44:40 Issues: Opacity values * 49:45 Issues: SVG need change color * 55:56 Help is on the way! * 59:57 SIIIIICK ××× PIIIICKS ×××
- website/src/styles/themes/level-up.css at v2
- The 2023 State of CSS Survey Part 2 × CSS Frameworks × Tooling × Browser Usage
- “color-contrast” | Can I use… Support tables for HTML5, CSS3, etc
- The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – Bram.us
××× SIIIIICK ××× PIIIICKS ××× * Scott: Kala (@engineer.everything)
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott talk about why you should be using JavaScript maps sets, whether you can access them directly, what makes them great, and what weak versions of both are.
Show Notes * 00:26 Welcome * 01:34 Syntax Brought to you by Sentry * 01:54 What makes Maps a spicy buffalo object? * 07:46 API of Map * 08:51 Looping over items in a Map * 09:27 Can you change the size of a map after it’s been created? * 10:07 Can you access properties directly? * 12:13 Where have we used a map as a cache? * 13:32 What makes a set an array honey garlic array? * 17:28 When should you be using sets instead of an array? * Proposed Highlight API is built on Sets * 21:47 Can you spread sets like an array? * 22:40 Weak versions of map and set * WeakMap and Garbage collection
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this supper club episode of Syntax, Wes and Scott talk with Darcy Clarke about his career path in tech, working with Wes back in the day, why he decided to build vlt volt, and the biggest sick pick list yet!
Show Notes * 00:32 Welcome * 01:38 Building a tweet wall back in the day * 08:54 How did you land at npm? * npm * 19:40 Why do we need another package manager and registry? * 22:11 What is vlt volt? * vlt: a new home for open source * vlt /vōlt/ (@vltpkg) / X * Shipping ESM with Mark Erikson * Bun * Yarn * Nx * 27:18 Do you see a future where we don’t pre-compile before shipping? * 29:32 Why would pnpm be faster than npm? * 31:14 What are the problems with symlinking? * 33:08 What’s happening with Yarn? * Verdaccio * Cloudsmith * jfrong * Sonatype * socket.dev * Snyk.io * Dependency Confusion * 37:42 What do you think about config files? * antfu Config of File Nesting for VS Code * The massive bug at the heart of the npm ecosystem * WebTorrent * 41:02 VS Code tip - file nesting patterns * 41:59 How does on-prem registry work? * 47:29 Where does Socket.dev and Snyk security fit? * 52:46 Sick Picks * 04:41 How did you get vlt.sh? * 05:30 How did you get @Darcy?
Sick Picks * Flat Coat Goldendoodle * Scientific American * Nespresso * BlackBerry (2023) - IMDb * BlackBerry (2023) Letterboxd * Matthias Wandel * Blink-182 Official Site * Moneen * Bring Me The Horizon
Shameless Plugs * vlt: a new home for open source
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this potluck episode of Syntax, Wes and Scott answer your questions about hosting NextJS, spicy sidedishes, putting forms in modern websites, why is everyone abandoning TypeScript, CSS Survey follow up, do devs need to be into CSS, and more!
Show Notes * 00:10 How to submit a question to Syntax * Syntax Potluck Listener Questions * 00:45 Syntax meet up in Toronto * 02:11 Syntax Brought to you by Sentry * 02:36 Vendor lock in with NextJS? * Next.js by Vercel * Vercel * SST * Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589 * Cloudflare Pages * Netlify * Open source Next.js serverless adapter * 09:48 🌶️ Spicy Sidedish: Stop calling Firefox the new IE * Jen Simmons * 16:40 Can you compare Database as a service and provide your recommendation and suggestions? * “Serverless” Databases — Syntax Podcast 551 * PlanetScale * Firebase * 20:00 How do I do native forms outside of CMS like WordPress? * Builder.io * 28:01 Why have Svelte and Turbo abandoned Typescript? * 32:17 Why are companies hesitant to migrate to Next? * 33:36 Is React Native dead? * 38:33 Do I use the keyword “new” when throwing an Error or not? * 41:59 touch-action use case * Announcing Quina * Quina - Menu * Announcing Hondo * Hondo - a word game in 100 words or less * 42:57 Subgrid and the :has selector usage * 46:02 Is it okay to be a front end developer and not be as interested in CSS? * Tool Academy (American TV series) * 51:12 Could you explain what are workers, processes, jobs, tasks, and deamons? * 56:29 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Infamous International: The Pink Panthers Story * Wes: PowerBlock Adjustable Dumbbells For Home Gym & Commercial Use * Syntax episode 3
Shameless Plugs * Scott: Syntax on TikTok * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about the secret sauce that’s going into the creation of the new Syntax.fm website including the styling, search, tooling, database, hosting, and more.
Show Notes * 00:21:15 Welcome * 01:10:11 Where did the name “Secret Sauce” come from? * 03:16:00 Syntax Brought to you by Sentry * 04:32:11 What Syntax.fm is built in? * SvelteKit • Web development, streamlined * muxinc/media-chrome: Custom elements (web components) for making audio and video player controls that look great in your website or app. * Media Chrome Docs * 07:24:01 How we’re doing search * flexsearch - npm * 12:22:20 Styling * Prettier · Opinionated Code Formatter * PostCSS - a tool for transforming CSS with JavaScript * 16:00:05 Tooling * Fast, disk space efficient package manager | pnpm * 18:55:11 Database * Prisma | Next-generation ORM for Node.js & TypeScript * 21:11:11 Services * Deepgram * OpenAI * Anthropic \ Introducing Claude * 24:34:11 Hosting * Vercel: Develop. Preview. Ship. For the best frontend teams * PlanetScale: The world’s most advanced database platform — PlanetScale * Cloudflare - The Web Performance & Security Company | Cloudflare
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Jason Lengstorf about his journey in video creation, live streaming, and tech education. What’s up with Jason’s new studio? How does he prep for a live stream?
Show Notes * 00:32 Welcome * 02:21 Syntax Brought to you by Sentry * 02:39 Who is Jason Lengstorf? * 05:43 Why did you decide to go full time on Learn with Jason? * 10:04 Jason’s new YouTube series idea * 13:36 Jason gets a special delivery * 14:30 What’s in Jason’s new studio? * 20:14 What’s the ideal medium for content in 2023? * 24:28 Treat decisions as forever, for now. * 26:01 Is live streaming as difficult to get into as it seems? * 29:21 How do you prepare for a live stream? * 32:58 How do you decide what to create? * 38:23 How do you feel about React? * 40:21 What are your thoughts on AI? * 49:08 Supper Club questions * 56:25 Sick Picks
- Sarah Drasner’s Site
- Animation With Svelte (with Scott Tolinski) — Learn With Jason
- Gatsby
- Netlify
- Jessica Kobeissi
- ANDREW HUANG
- Theo Browne
- Cassidy Williams
- Bytes - The Best JavaScript Newsletter
- ZSA Moonlander:
- ErgoDox EZ
- Operator Fonts
- Night Owl
- SyntaxFM by SyntaxFM
- MD IO
- ILME-FX3 | Interchangeable-lens Cameras
- FE 24-70 mm F2.8 GM
Sick Picks * Synergy - Share one mouse & keyboard across computers
Shameless Plugs LearnWithJason.dev: Learn. Build. Grow. Together.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
In this episode of Syntax, Wes and Scott relate even more spooky listener submitted coding horrors including crypto copy paste, Big Brother bug, losing $50,000, 2,000 SMS, a $20,000 hour, and more.
Show Notes * 00:09 Velcome to Synax * 01:09 Syntax Brought to you by Sentry * 01:36 Stories are anonymous! * 01:57 Crypto copy + paste * 03:48 Big Brother Bug * 07:00 One of 6 laptops that can fix npm * 07:57 Auto-submitting payments * 09:42 40,000 orders shipped and refunded * 11:16 Dropping the analytics database * 11:40 dev was actually production * 12:40 Updating the DNS * 13:40 Losing ~$50,000 * 15:30 Clearing 80 million records * 16:21 Web chat DDoS * 18:00 URL Shortener #$@%# * Ontario’s rejected licence plates for 2022 | CP24.com * Boonta Vista: A “political” podcast for “smart” people * 21:12 Sending an email to 20,000 users * 21:42 Moving code to GitHub * 23:32 “Lorem sale” * 26:08 2,000 SMS messages * 27:00 International shipment of kiosks * 28:19 Crashing production * Slow DB Queries | Sentry Documentation * 31:01 Hitting customers credit card limit * 32:01 Infinite redirect loop * 32:53 My first commit * 33:23 Augmented reality game prize mistakes * 35:15 A $20,000 hour * 35:57 Site went down for 3 days * 37:42 Accidentally truncated the prod database * 38:48 Off by one error * 40:05 Exposing database credentials * 42:08 Delete a temp directory on prod * 44:51 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Race to the Summit * Wes: 100LBS Strong Magnetic Hooks
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes relate some spooky listener submitted coding horrors including updates for a large furniture retailer, pull request oversights, disallowing everything in a robots.txt, massive email fail, and more.
Show Notes * 00:21 Welcome * 01:22 Whetting your whistle * 01:52 Syntax Brought to you by Sentry * 02:13 Site updates for one of the largest furniture retailers in my country * 04:18 The Embarrassing Test Page Incident * 05:54 The Pull Request Oversight * 08:02 Making changes to a JSON file * 13:11 Deploying a “disallow everything” robots.txt * 14:45 GDPR Deletion * 16:11 Dropping the backing disk for the production postgres * 17:05 Accidentally pushing staging code as an update * 18:34 Email fail * 19:25 Hot mobile app prayers * 22:28 Bogus ACH info * 23:51 Wiring money error * 26:44 Payment gateway test not production
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects.
Show Notes * 00:32 Welcome * 01:02 Syntax Brought to you by Sentry * 01:34 Introducing Brad Frost * Brad Frost.com * Atomic Design by Brad Frost * Brad (@brad_frost) on Twitter * Brad on LinkedIn * Brad on Mastodon * Brad on YouTube * Brad on GitHub * Brad Frost on CodePen * Big Medium | Design for What’s Next * 06:43 What is a design system? * 12:12 How do you keep design and code in sync? * Material Design * Shopify Polaris * Carbon Design System * The Design System Ecosystem | Brad Frost * 16:13 How do you use Shopify, WordPress, React, etc. through a design system? * 19:41 How is CSS handled? * 25:40 What’s the benefit of going all in on web components? * 29:13 Do small startups need to worry about design systems? * 33:03 How do design tokens work? * 38:17 How do you deal with pushback on design systems? * 41:46 How do you go outside the guidelines? * 45:24 What system do you use for naming things? * 49:34 How do you best document your language choices? * 51:09 Supper Club questions * Thinking in Systems: International Bestseller: Donella H. Meadows, Diana Wright: 9781603580557: Amazon.com: Books * Miriam Eric Suzanne * Zeldman on Web and Interaction Design - Famous for stating the obvious. * 57:54 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Rubblebucket
Shameless Plugs * Frostapalooza! | Brad Frost * FROSTAPALOOZA - A Concert Party Happening On August 17th 2024
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk through recent developments in AI and how they might be useful for developers, whether AI is still worthy of the hype, and whether developer jobs are at risk from AI.
Show Notes * 00:10 Welcome * 03:10 Syntax Brought to you by Sentry * 03:49 v0.dev * v0 by Vercel * 09:28 Anthropic and Claude * Claude * Syntax Listener Survey * 18:02 Facebook’s Meta AI * AI at Meta * 18:48 Cloudflare AI * Large language model (LLM) * Speech to text * Translation * Sentiment Analysis * Image classification * Embedding * 27:24 AI Hardware announced * Rewind * 29:39 Cloudflare Hugging face * Hugging Face – The AI community building the future. * StarCoder: A State-of-the-Art LLM for Code * Vectorize: a vector database for shipping AI-powered applications * 36:28 OpenAI Function calling * Function calling and other API updates * 38:55 GPT-4V * GPT-4V(ision) system card * 42:36 GitHub CoPilot * 44:03 Are we still on the AI hype train? * 48:27 Are our jobs at risk as developers? * 52:24 Spotify DJ AI * Spotify Debuts a New AI DJ * 53:29 ChatGPT plugins * ChatGPT plugins * 55:19 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Coding App for Kids | codeSpark Academy * Wes: Peter Santenello, Roblox
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about all the libraries we don’t need to use anymore thanks to their features being built into the browsers now.
Show Notes * 00:24 Welcome * 01:55 Syntax Brought to you by Sentry * 02:17 Why did people use jQuery? * jQuery * lukeed/polka: A micro web server so fast, it’ll make you dance! * 05:12 Writing our own jQuery plugins * 07:23 AJAX requests * jQuery.ajax() * 08:29 Express * Migrating to Express 5 * 14:58 Underscore.JS * Underscore.js * 19:27 Require.js * RequireJS * 21:06 LeftPad * Coder unpublished 17 lines of JavaScript and “broke the Internet” | Ars Technica * 23:13 Grid systems * 960 Grid System * Susy | OddBird * 26:24 Sass, Less, etc. * Can Vanilla CSS Replace Sass Yet? — Syntax Podcast 603 * 26:58 Sockets.io * Socket.IO * 29:50 What else is going to get jQuery’d?
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Chris Lattner about Mojo, a new programming language for AI developers. Should developers learn Python? Where does Mojo run? What is Chris excited about in AI’s future?
Show Notes * 00:31 Welcome * 01:05 Introducing Chris Lattner * Chris Lattner’s Homepage * Chris Lattner on Wikipedia * Chris Lattner on GitHub * Chris Lattner on Twitter * Modular (@Modular_AI) / X * Modular: AI development starts here * Swift.org - Welcome to Swift.org * 03:50 What’s the history behind the hardware? * 08:10 What’s the difference between a compiled language vs an interpreted language? * 12:13 Is Mojo a programming language? * Mojo 🔥: Programming language for all of AI * 15:12 Are Python libraries compatible with Mojo? * 15:26 Why did you choose Python? * 16:49 Why is AI so Python focused? * 19:19 Should web developers learn Python? * 21:40 Where does Mojo run? * 25:05 How did you use the flame emoji for the Mojo file extension? * 29:05 How does machine learning actually work? * 37:36 Will Mojo be open source in some way? * 39:16 How do you start developing a new programming language? * 43:14 What is the future of developer jobs? * 45:30 What are you excited about with AI in the future? * 47:24 Supper Club questions * Welcome to a World of OCaml * 52:59 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Exercise
Shameless Plugs * Mojo 🔥: Programming language for all of AI
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, it’s part 2 of Wes and Scott’s reactions to the 2023 State of CSS survey including CSS frameworks, tooling, browser usage, SVG and CSS, and the CSS Awards.
Show Notes * 00:10 Welcome * Reacting to State of CSS Survey — Syntax Podcast 672 * State of CSS 2023 * 01:15 Syntax Brought to you by Sentry * 01:29 CSS Frameworks * Bootstrap · The most popular HTML, CSS, and JS library in the world. * Open Props: sub-atomic styles * Lightning CSS * 10:57 How happy are you with CSS frameworks? * 17:21 Other tools * CSS Analytics - Project Wallace * 19:34 Top utilities in use * 24:48 Browser usage * 29:01 CSS usage * 33:25 Browser incompatibilities * 36:42 SVG and CSS * 44:28 Resources for learning CSS * Kevin Powell | CSS Evangelist * Fireship - Learn to Code Faster * LeveUp Tutorials * 46:55 Awards * Panda CSS - Build modern websites using build time and type-safe CSS-in-JS * 50:48 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: A Timeline of the 1970s Heavyweight Boxing Division (Boxing Documentary) / Full Boxing Timelines * Wes: NEIKO 10181A Step Drill Bit Set
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk through tips for upping your home office vibe, including cable management, lighting, ergonomics, and even roller blade wheels.
Show Notes * 00:18 Welcome * 00:46 Syntax Brought to you by Sentry * 01:13 Creating a great home office * Scott’s New Office × The Levelup Lodge — Syntax Podcast 461 * Wes’ New Soundproof Office — Syntax Podcast 516 * 03:22 Lighting * 06:08 Clutter and cords * Alex Tech 25ft - 1/2 inch Cord Protector Wire * D-Line CC-1 Light Duty Floor Cord Cover/Cable Protector * Cable Clips * WireRun Under Desk Cable Manager 14" * 10:33 Clean * 13:42 Sound absorption * Bose QuietComfort 35 II review * Wyze Noise-Cancelling Headphones * 19:26 Ergonomics * VIVO Single Monitor Height Adjustable Counterbalance Pneumatic Arm Desk Mount Stand * 23:17 Roller blade wheels for your chair * Office Owl Caster Wheels
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk with David East about Google’s new cloud based full-stack, multiplatform app development workflow, Project IDX.
Show Notes * 00:22 Welcome * 01:31 Browser in the car * 02:16 Syntax Brought to you by Sentry * 02:24 Who is David East? * David East * David East * David East (@_davideast) / X * Learn from David East’s courses | Frontend Masters * Firebase | Google’s Mobile and Web App Development Platform * 04:32 What is IDX? * Project IDX * Flutter - Build apps for any screen * Welcome to nix.dev — nix.dev documentation * 13:15 What’s the experience of IDX? * Nx: Smart, Fast and Extensible Build System * 16:42 IDX isn’t just a toy - it’s a dev machine * 20:29 What’s the offline mode like? * 23:30 How are VS Code extensions handled? * 27:03 Is multiplayer or project sharing on the road map? * 28:45 How is latency taken care of? * 31:43 This could be faster than local dev environment * 36:18 Portability of your projects * 42:25 What do you think about iPad coding? * 44:28 Phone testing with IDX * Firebase Test Lab * 46:59 How is AI being integrated? * 50:23 Supper Club questions * Introducing Operator | Fonts by Hoefler&Co. * MD IO by Mass-Driver - Future Fonts * 55:25 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× CSS
Shameless Plugs * The Bad At Css Podcast
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott answer your questions about Bun, using custom auth headers, the difference between trpc, REST, or GraphQL, documenting your code, why learn Rust, and more!
Show Notes Take the Syntax Survey
Attend the Syntax Meetup Oct 10th in Toronto
- 00:00 Syntax Survey
- 00:24 Syntax Meetup
- 01:02 Welcome
- 01:24 Scott’s macOS bug
- Tauri Apps
- 02:19 Syntax Brought to you by Sentry
- 02:40 What are your thoughts on Bun?
- Bun — A fast all-in-one JavaScript runtime
- Zig Programming Language
- Deno, The next-generation JavaScript runtime
- Cloudflare Workers
- Netlify Connect
- Storybook
- Histoire
- 11:25 How can I add custom auth header for image requests done by the browser?
- 17:32 What are the differences between trpc, REST, and graphql?
- 24:48 What kind of teams would use trpc, REST, or graphql?
- 27:12 Are there any podcast guest opportunities on Syntax?
- 32:21 With no initial documentation, how do you suggest we document our intricate code, business logic, and integrations?
- 38:53 Rust didn’t invent this, they’re common paradigms in languages
- 41:05 Why Rust?
- Rust Programming Language
- 43:52 Is Scott still using his Tonal?
- Tonal
- 44:42 What did I do to make Fetch rebel against me?
- Proxyman
- 50:40 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Glow Up * Wes: SendCutSend
Shameless Plugs * Scott: Syntax on TikTok * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website?
Show Notes * 00:26 Welcome * 01:21 Syntax Brought to you by Sentry * 01:41 Why do we care about Headings? * How-to: Accessible heading structure - The A11Y Project * 03:12 Heading design provides an outline for your website * 08:45 Using H1 classes? * 10:28 Is the logo an H1? * 13:03 Giving an ARIA level * 17:14 Can headings be visually hidden? * 21:00 Benefits of good heading design * 22:27 Tooling * Heading outlines - ADG * HTML Standard * Polypane, The browser for ambitious web developers * HeadingsMap - Chrome Web Store * HeadingsMap – Get this Extension for 🦊 Firefox (en-US)
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Taylor Desseyn about his work as a job recruiter, how hiring has changed over the last few years, what soft and tech skills developers need, what not to do when applying, and how AI is affecting the hiring process.
Show Notes * 00:35 Welcome * 01:10 Syntax Brought to you by Sentry * 01:35 Who is Taylor Desseyn? * taylor desseyn (/tdesseyn) * Taylor Desseyn on LinkedIn * World-class technical talent on tap | Gun.io * taylor desseyn (@tdesseyn) / X * Taylor Desseyn * 03:49 Why are recruiters just sending emails? * 05:26 How much does a recruiter make? * 06:44 How have things changed in the last couple of years? * 09:22 How can developers stand out when applying? * 13:52 What do developers do that cost them jobs? * 28:46 What soft skills are employers looking for? * 32:01 What tech skills are showing up in job postings? * 34:57 Are resumes dead? * 40:16 How does Gun.io vet people? * World-class technical talent on tap | Gun.io * 43:15 How is AI changing hiring? * 46:03 What’s working on social media marketing in hiring? * 48:33 Supper Club questions * 53:39 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Group Chat - Dee Murthy - * Watch Painkiller | Netflix Official Site
Shameless Plugs * Guidance Counselor 2.0 | Podcast on Spotify * The Unicorn Finders | Podcast on Spotify
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more!
Show Notes * 00:25:21 Welcome * 01:31:22 Soccer update * 03:52:05 Syntax Brought to you by Sentry * 04:03:18 StateOfCSS.com * State of CSS 2023 * 04:21:11 Top 5 Most Used Features * 09:13:09 Drop-shadow * 13:00:11 Subgrid * 18:31:21 Logical properties * 20:11:20 Media range * 20:52:11 Object view box * 23:10:14 Anchor positioning * 28:21:09 Intrinsic sizing keywords * 29:32:00 View Transitions API * Can I use… Support tables for HTML5, CSS3, etc * Astro * Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580 * 31:43:18 Updates to colors in CSS * 35:07:05 Accent color, current color * 36:36:11 Scroll snap and overscroll behaviour * 39:04:22 Touch action * 40:16:01 Line clamp or variable font * Variable Fonts * 45:28:11 Accessibility features * 48:33:12 :Has has jumped * 49:32:11 @Property * 53:52:13 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6) * Wes: Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers
Shameless Plugs * Scott: Syntax Podcast (@syntaxfm) | TikTok * Wes: Web Unleashed 2023 - FITC
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about the building desktop apps using Electron vs Tauri.
Show Notes * 00:26 Welcome * 00:55 Syntax Brought to you by Sentry * 01:15 Check my hair app * Tauri Apps * Electron * Hand Mirror on the Mac App Store * SoFriendly/2fhey * 04:19 What is Tauri? * 08:23 The experience of writing apps in Electron vs Tauri * 16:17 Electron Forge * 20:02 Building the same app in Electron vs Tauri
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about signs and symptoms of anxiety, what the long term effects are of anxiety, how to know if you need help, and what kinds of things you can do to deal with anxiety and uncertainty.
Show Notes * 00:35 Welcome * 01:11 Syntax Brought to you by Sentry * 02:23 Introducing Dr. Courtney Tolinski * Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout — Syntax Podcast 236 * Supper Club × Coding with ADHD with Dr. Courtney Tolinski — Syntax Podcast 532 * 04:13 What is anxiety? * 06:44 Is there a difference between anxiety and just not wanting to do something? * 08:58 What kinds of physical symptoms are there? * 15:43 What are the longer term effects of anxiety? * 17:34 How do you know if you need help with anxiety? * 21:05 What can I do to solve my anxiety? * Psychology Today Canada: Health, Help, Happiness + Find a Therapist * Obsidian - Sharpen your thinking * How We Feel * Apple Reveals More iOS 17 Features Not Available Until Later This Year - MacRumors * Meditation and Sleep Made Simple - Headspace * Bearable Symptom Tracker, Mood Journal, & Health App * BreathingApp — Personal breathing trainer for a better health * 30:15 How can we recognize anxiety triggers? * 33:26 What advice do you have for dealing with uncertainty? * 37:54 How can I deal with keeping up with everything and feeling like I’m falling behind? * 43:02 Navigating big life decisions * 51:39 Supper Club questions * Being Well Podcast with Dr. Rick Hanson and Forrest Hanson * Celebrity Book Club with Steven & Lily on Apple Podcasts * Criminality * 58:01 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Fullstar Compact Vegetable Chopper - Vegetable Cutter, Food Chopper, Veggie Chopper, Onion Chopper, Vegetable Chopper With Container, Vegetable Slicer, Vegetable Cutter, Mandoline Slicer (6 Inserts): Home & Kitchen
Shameless Plugs * Learning Differently (@learning.differently) • Instagram photos and videos * Zarlengo Foundation Learning Evaluation Center| Denver, Colorado
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes reviews his experience building with Svelte and SvelteKit including templating, data fetching, actions, managing state, request handlers, and more.
Show Notes * 00:10 Welcome * 01:12 Syntax Brought to you by Sentry * 02:11 What is Svelte vs SvelteKit * From React To SvelteKit — Syntax Podcast 390 * Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173 * Svelte • Cybernetically enhanced web apps * SvelteKit • Web development, streamlined * 05:59 Templating in Svelte * 18:20 Data fetching in SvelteKit * 25:23 Actions * 28:58 State * 32:41 Binding values * 36:18 Hooks * 37:25 Request handlers * Special elements • Docs • Svelte * website/src/actions/anchor.ts at v2 · syntaxfm/website * website/src/actions/click_outside.ts at v2 · syntaxfm/website * 39:23 Svelte Actions * 42:26 Popover API * 45:33 Routing * 47:22 Layouts * 50:08 Styling * 57:09 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Aqara Smart Lock U100 * Wes: Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral)
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about how you can intercept and debug traffic going out from your computer or other internet connected devices in your home, or your garage!
Show Notes * 00:25 Welcome * 01:55 Syntax Brought to you by Sentry * 02:17 Scott’s story of wanting to intercept data * Tonal * 06:36 Other examples * 08:38 Different types of traffic * 14:52 TCP vs UDP * 16:07 Why would you want to run a proxy? * 24:20 Applications to use * Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy * Proxyman · Native, Modern Web Debugging Proxy · Inspect network traffic from Mac, iOS, Android devices with ease * Intercept, debug & mock HTTP with HTTP Toolkit * mitmproxy - an interactive HTTPS proxy * Wireshark · Go Deep * Little Snitch * Capturing Modes - Fiddler Everywhere * Hacksore on Twitter * How I Hacked my Car :: Programming With Style
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Stuart Bloxham about how he learned to code, what his interview process was like when applying for a job, how he found the time to make it all work, and his thoughts on bootcamps and ways to learn.
Show Notes * 00:36 Welcome * Stuart Bloxham on GitHub * Stuart Bloxham on LinkedIn * 02:09 How did you decide to be a web developer? * 08:22 Did you have clarity when your kid was born? * 10:20 What was the interview process like? * 18:25 What and how did you learn? * 20:28 What’s the state of bootcamps in 2023? * 22:03 How important have soft skills been? * 25:14 How do you know when you’re ready to apply for a job? * 35:24 Do you like coding? * 37:49 How did you find the time to make it all work? * 41:42 How did you deal with burnout? * 43:06 Supper Club questions * 45:34 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Flowerhorn cichlid
Shameless Plugs * Stuart Bloxham’s Portfolio
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott review the projects they built during Sentry’s Hackweek: a realtime Markdown multiplayer editor, and a hardware recording button.
Show Notes * 00:11 Welcome * 00:57 What is a hack week? * 01:55 Syntax Brought to you by Sentry * 03:42 Scott’s project: a multiplayer editor * Liveblocks | Collaborative experiences in days, not months * PartyKit | Everything is better with friends * BlockNote - Javascript Block-Based text editor | BlockNote * Dev toolkit for building collaborative editors – Tiptap * microsoft/monaco-editor: A browser based code editor * syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub * Convex | The fullstack TypeScript development platform * The Everything App * 13:57 Multiplayer is so much easier * 19:56 Wes’ project: A recording button * Oracle VM VirtualBox * Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac * Karabiner-Elements * folivora.ai - Great Tools for your Mac! * Home Assistant * The World’s Leading 2D and 3D Platform | Unity Pro Free Trial * SendCutSend | Online Laser Cutting and Waterjet Cutting * blender.org - Home of the Blender project - Free and Open 3D Creation Software * 42:31 Learning to skateboard * 43:59 F1 documentary follow up * 45:30 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: BetterDisplay: Unlock your displays on your Mac! * Wes: LOVIMAG Magnetic Hooks Heavy Duty
Shameless Plugs * Scott: Syntax on TikTok * Wes: @WesBos on X.com
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers?
Show Notes * 00:24 Welcome * 02:31 What’s up with CSS nesting? * "CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works 👇 * 04:10 How does CSS nesting work? * 09:23 What the ampersand does in nesting * 21:05 It works with media queries * 25:29 How does it work on all the browsers? * 29:32 Lightning CSS * Lightning CSS
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Fred Schott all things Astro with the announcement of Astro version 3, marketing open source projects, Starlight docs, keeping up to date, and making major version numbers less scary.
Show Notes * 00:35 Welcome 3x guest Fred Schott! * Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580 * Pika Pkg — Syntax Podcast 212 * 05:11 What is Astro? * 07:37 What’s new in Astro v3? * Astro 3.0 | Astro * 14:18 Behind the scenes improvements in Astro v3 * 18:17 HMR Enhancements * 20:10 What’s the hosting partner deal with Vercel? * Vercel: Our Official Hosting Partner | Astro * 28:04 Docs template Starlight announcement * Starlight 🌟 Build documentation sites with Astro * 31:28 How often do you release updates? * 33:47 Marketing open source * Time to suit up | Astro Shop * SvelteKit • Web development, streamlined * 36:18 Making major version numbers less scary * 40:04 Does Astro use Vite? * Vite | Next Generation Frontend Tooling * 42:01 Is it different working on a framework than a tool like Snowpack? * 43:53 Thoughts on cloud text editors * Project IDX * 47:02 How do you keep up to date? * 48:43 Do you write in TypeScript? * 51:31 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Factorio
Shameless Plugs * Astro (@astrodotbuild)
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this potluck episode of Syntax, Wes and Scott answer your questions about learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more!
Show Notes * 00:11 Welcome * 01:42 Scott’s butt pincher * Affenpinscher * 06:08 You keep missing my favorite thing about Civet * Civet * 07:31 What soft skills can I learn to help me in my career? * HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks * 12:42 Have you thought about release notes or a what’s new section? * Conventional Commits * How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium * 15:57 Can you explain headless CMS and what the use-cases/implementations are? * 19:24 Any suggestions for dealing with web components and the client’s tracking scripts * How to Read Flamegraphs 🔥 * Chromium F12 Profiler: The Main Thread Pane * Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto * 25:27 Why do we need .d.ts files in TypeScript? * 30:15 What is inset in CSS? * inset - CSS: Cascading Style Sheets | MDN * 35:06 Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation? * Anthropic \ Home * Getting Started 🚀 Astro Documentation * ChatGPT Plugin - AskTheCode | GPTStore.ai * ChatGPT Plugin - Scraper | GPTStore.ai * Overview | TanStack Query Docs * Custom instructions for ChatGPT * 40:59 why is the following true: the string “undefined”.includes(undefined)? * 43:27 How do you organize your code directories? * 48:50 Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element? * 54:32 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Surge power bar * Wes: Little Hippo Alarm
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about concerts, getting tired because of being old, landscaping, spinning on your head, gym updates, awful search engines and awful ethics for YouTubers, rewiring old engines, and what’s being streamed.
Show Notes * 00:10 Welcome * 01:49 Being tired * The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre * 05:08 Landscaping * 10:53 Gym updates * 23:01 House projects * 28:39 Why are search engines so awful these days? * 39:20 Internet routing * 45:17 Linus Tech Tips ethics and issues * 48:29 Rewiring a kid’s ATV * 50:49 What we’re watching * The Stronger By Science Podcast * Watch Full Swing | Netflix Official Site * Break Point | Official Trailer | Netflix * Watch Formula 1: Drive to Survive | Netflix Official Site * 58:37 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The First Cat in Space Ate Pizza * Wes: Steam cleaner
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Mark Erikson about his work in helping others understand shipping ESM, how to deal with permutations, whether default imports are helpful, whether TypeScript has made it easier, and what Mark’s tool stack is for building.
Show Notes * 00:36 Welcome * 01:45 Introducing Shipping ESM with Mark Erikson * Mark Erikson (@acemarke) * Wes Bos on Twitter: “publishing packages that work in esm and cjs is such a nightmare. I’ve run into so many issues today and took forever to get the proper package.json exports. I can’t wait until we’re 100% esm. I think I have every single combo covered.” * Mark’s Dev Blog * Blogged Answers: My Experience Modernizing Packages to ESM * Greatest Hits: The Most Popular and Most Useful Posts I’ve Written * arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages * publint * 07:01 How did we get to this space in modules? * 16:30 How do you deal with permutations? * 22:13 Do bundlers get in the way or helping? * 26:16 Are default imports useful? * 30:35 Are the types wrong errors * 33:41 Has TypeScript made this easier? * 37:56 What’s your tool stack for building? * 39:32 How do you test? * 41:35 Will we ever stop bundling? * 48:03 What about source maps? * 52:32 Supper Club Questions * What is Windows Subsystem for Linux * Eagle Oceanic Next * DroidSansMono NF Font * 55:18 React Types has more downloads than React? * 59:42 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Shirley Wu—Taking up space (Keynote, Outlier 2023)
Shameless Plugs * Replay (@replayio) * Replay - The time-travel debugger from the future.
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about concerts, getting tired because of being old, landscaping, spinning on your head, gym updates, awful search engines and awful ethics for YouTubers, rewiring old engines, and what’s being streamed.
Show Notes * 00:10 Welcome * 01:49 Being tired * The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre * 05:08 Landscaping * 10:53 Gym updates * 23:01 House projects * 28:39 Why are search engines so awful these days? * 39:20 Internet routing * 45:17 Linus Tech Tips ethics and issues * 48:29 Rewiring a kid’s ATV * 50:49 What we’re watching * The Stronger By Science Podcast * Watch Full Swing | Netflix Official Site * Break Point | Official Trailer | Netflix * Watch Formula 1: Drive to Survive | Netflix Official Site * 58:37 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The First Cat in Space Ate Pizza * Wes: Steam cleaner
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them.
Show Notes * 00:11 Welcome * 02:18 What are OG images? * 06:19 Testing OG images * Polypane, The browser for ambitious web developers * Meta Tags — Preview, Edit and Generate * Sharing Debugger - Meta for Developers * Card Validator | Twitter Developers * 08:27 Creating an OG image * vercel/satori: Enlightened library to convert HTML and CSS to SVG * Open Graph (OG) Image Generation | Vercel Docs * Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel * 09:41 Dynamically generating OG images * wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses * 21:16 Using Puppeteer * Puppeteer | Puppeteer * Puppeteer · Browser Rendering docs * Cloudinary - Image and Video Upload, Store ad Monetization * Fast and reliable end-to-end testing for modern web apps | Playwright * 28:47 Canva API * Build The Tools Behind Great Design | Canva Developers
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Aiden Bai about his work on Million.js that aims to make React a lot faster. How does Million.js make React faster? And most importantly: has Aiden ever used a VCR?
Show Notes * 00:35 Welcome * 00:57 Introducing Aiden Bai * Aiden Bai * aidenybai on GitHub * @aidenybai on Twitter * Aiden Bai on YouTube * Million.js * 01:57 What is Million.js? * 03:20 How does React do rendering now? * 04:31 How does Million.js make it faster? * 07:37 What goes into creating a compiler? * 08:24 How do you go from learning JavaScript to writing compilers? * 11:05 Wyze WebRTC stream work * 13:13 What are you using to benchmark and test? * solidjs.com * js-framework-benchmark * xkcd: Compiling * 18:19 What does a slowly rendering site look like? * 23:54 How do you handle find on page with large amounts of code? * 25:32 What does 70% faster with Million.js mean? * Hyper™ * Warp: Your terminal, reimagined * 26:44 Why are maps slow? * Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion — Syntax Podcast 643 * 28:19 Benefits of the Macro API * 31:12 Does Million.js work across the board? * 33:03 Does it ever break projects? How do you test Million.js? * 35:35 How do you keep up on your GitHub issues? * 37:40 What other areas of tech are you interested in working on? * partytown * 39:32 What was the inspiration for your website? * 43:52 Supper Club questions * Gruvbox with Material Palette * iTerm2 - macOS Terminal Replacement
××× SIIIIICK ××× PIIIICKS ××× * Barbie (2023) directed by Greta Gerwig • Reviews, film + cast • Letterboxd * Teenage Mutant Ninja Turtles: Mutant Mayhem (2023) directed by Jeff Rowe • Reviews, film + cast • Letterboxd
Shameless Plugs * Million Kitchen Sink
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott jump into part 2 of their look at Rust for JavaScript developers, including variables in Rust, type systems in Rust, signed and unsigned integers, and more.
Show Notes * 00:10 Welcome * 00:43 Audio issue bugs * 03:17 Building decks * 06:06 Variables in Rust * Syntax 647: Rust for JavaScript Developers - Node vs Rust Concepts
let x = 5; // x is immutable let mut x = 5; // x is mutable const MAX_POINTS: u32 = 100_000; // must be defined at compile time
* 10:42 Type System in Rust
* 15:52 Types in Rust
* 19:06 Why does Rust have signed and unsigned integers?
* 23:35 Slicing strings with &str
* 27:35 enum
* 27:55 struct
* 28:19 Vec
* 29:33 HashMap and HashSet
* 33:00 Converting Signed to Unsigned Numbers
let unsigned_value: u8 = 200; let signed_value: i8 = unsigned_value as i8;
* 36:12 What’s up with &str?
* 43:31 Rust error messages
* 45:28 What is a Struct?
struct User { username: String, email: String, sign_in_count: u64, active: bool, } // You can create an instance of a struct like this: let user1 = User { email: String::from("someone@example.com"), username: String::from("someusername123"), active: true, sign_in_count: 1, }; impl User { fn login(&mut self) { self.login_count += 1; } }
* 49:17 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Thermacell Patio Shield * Wes: Magnet Phone Mount
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about 8 tricks to try when using the Fetch() API.
Show Notes * 00:23 Welcome * 02:14 1) Stream The Result
// Create a new TextDecoder instance const decoder = new TextDecoder(); // Make the fetch request fetch('https://api.example.com/streaming-data') .then(response => { // Check if the response is valid if (!response.ok) { throw new Error('Network response was not ok'); } // Stream the response data using a TextDecoder const reader = response.body.getReader(); // Function to read the streamed chunks function read() { return reader.read().then(({ done, value }) => { // Check if the streaming is complete if (done) { console.log('Streaming complete'); return; } // Decode and process the streamed data const decodedData = decoder.decode(value, { stream: true }); console.log(decodedData); // Continue reading the next chunk return read(); }); } // Start reading the chunks return read(); }) .catch(error => { // Handle errors console.log('Error:', error); });
* 06:05 2) Download Progress
* Download progress example
* 09:40 3) Cancel Streams - Abort Controller
// Create an AbortController instance const controller = new AbortController(); // Set a timeout to abort the request after 5 seconds const timeout = setTimeout(() => { controller.abort(); }, 5000); // Fetch request with the AbortController fetch('https://api.example.com/data', { signal: controller.signal })
* 11:32 4) Testing if JSON is returned
* 13:18 5) async + await + catch
const data = await fetch().catch(err => console.log(err));
- 14:42 6) to awaited - return error and data at top level
const [err, data] = collect(fetch()) if(err) // ....
* await-to-js - npm
* 16:58 7) Dev tools - Copy as fetch
* 17:54 8) You can programatically create a Request, Response and Headers objects
const myRequest = new Request('https://traffic.libsyn.com/syntax/Syntax_-_641.mp3', { headers: { 'Content-Type': 'text/plain', } }); fetch(myRequest)
In this supper club episode of Syntax, Wes and Scott talk with Andrew Lisowski about working on Descript, web streams vs local storage, using state machines, writing CSS with Radix, monorepos, and more.
Show Notes * 00:35 Welcome * 01:07 What is Descript? * Descript | All-in-one video & podcast editing, easy as a doc. * Work — Sandwich * 02:21 Who is Andrew Lisowski? * Andrew Lisowski (@HipsterSmoothie) / X * hipstersmoothie.com * Descript (@DescriptApp) / X * devtools.fm * 04:51 How does Descript interact with the webcam? * 08:52 Web streams vs local first * Web Streams Explained — Syntax Podcast 587 * 10:06 How are you exporting video? * GitHub - Yahweasel/libav.js: This is a compilation of the libraries associated with handling audio and video in ffmpeg—libavformat, libavcodec, libavfilter, libavutil, libswresample, and libswscale—for emscripten, and thus the web. * Riverside.fm - Record Podcasts And Videos From Anywhere * 14:40 How does Descript deal with recording fails? * 17:17 How does Descript design and build the UI? * 19:37 What did you like about state machines? * XState - JavaScript State Machines and Statecharts * 24:12 How are you writing your CSS with Radix? * Themes – Radix UI * Home | Open UI * 30:30 How does the marketing site’s tech stack compare? * 31:44 Playwright vs Cypress * Fast and reliable end-to-end testing for modern web apps | Playwright * JavaScript Component Testing and E2E Testing Framework | Cypress * 36:26 What tech do you use for monorepos? * 37:01 What’s your build tool? * Workspaces | Yarn - Package Manager * Turbo * webpack * 40:18 Moving to the web means moving things to the backend * 41:37 Descript focuses AI tools on helping creators * Eye Contact: AI Video Effect | Descript * 50:50 Supper Club questions * Topre Switch Mechanical Keyboards * REALFORCE | Premium Keyboard, PBT, Capacitive Key Switch * Iosevka * Github Dark High Contrast - Visual Studio Marketplace * 56:21 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Lexical * shadcn/ui
Shameless Plugs * devtools.fm
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about new approved and proposed JavaScript API changes including Promise.withResolvers, .at(), Immutable Array Methods, Array.fromAsync, and more.
Show Notes * 00:10 Welcome * 04:55 What are we going to cover? * 06:10 Promise.withResolvers * 09:40 .at() * You probably knew about JavaScript’s new .at() method for accessing array items. Did you know it works for strings too? * @IAmAndrewLuca * 15:59 Immutable Array Methods * Wes Bos: "🔥 Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3. .toReversed() .toSorted() .toSpliced() - remove items .with() - replace items * 21:48 Array.fromAsync * Proposal for array.fromAsync * 27:15 Array Grouping * Proposal for Array grouping * 31:04 Observable Events? * Observable Events? * 35:28 Import Attributes * 39:21 v.emplace method * 41:15 Decorators * Proposal for Pattern Matching * 45:42 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Artifact.news * Wes: LED lights for bikes
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is.
Show Notes * 00:25 Welcome * 01:00 Are decorators finally here? * TC39 proposal * How this compares to other versions of decorators * 06:47 What are use cases for decorators? * 10:55 How do you define a decorator? * 14:20 Auto Accessor
on classes
@loggged class C {}
on fields
class C { @logged x = 1; }
Auto Accessor
class C { accessor x = 1; }
sugar for below
class C { #x = 1; // # means private get x() { return this.#x; } set x(val) { this.#x = val; } }
Can be decorated and decorator can return new get and set and init functions
function logged(value, { kind, name }) { if (kind === "accessor") { let { get, set } = value; return { get() { console.log(`getting ${name}`); return get.call(this); }, set(val) { console.log(`setting ${name} to ${val}`); return set.call(this, val); }, init(initialValue) { console.log(`initializing ${name} with value ${initialValue}`); return initialValue; } }; } // ... }
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
* Wes Bos on Bluesky
* Scott on Bluesky
* Syntax on Bluesky
Can you have a Vercel like experience on your own AWS? Scott and Wes talk with Brandon Bayer about Flightcontrol - what it is, how to use it on your app, pricing, and more.
Show Notes * 00:32 Welcome * 01:28 Who is Brandon Bayer? * Brandon 🚀 Flightcontrol (@flybayer) / X * Flightcontrol (@Flightcontrolhq) / X * Blitz.js - The Missing Fullstack Toolkit for Next.js * Flightcontrol — AWS Without Pain * Tailwind Connect 2023 | Tailwind CSS Live Event * 03:00 How do you fly? * 06:10 What is Flightcontrol? * 10:00 Why doesn’t Amazon make it easier? * 11:34 Which parts of the AWS stack should I use? * 15:08 Creating the infrastructure * 19:01 Ongoing deployment * 20:05 What languages does Flightcontrol support? * 23:35 How are events or cron handled? * 25:24 What is Temporal? * Open Source Durable Execution Platform | Temporal Technologies * 29:05 What are Nixpacks? * GitHub - railwayapp/nixpacks: App source + Nix packages + Docker = Image * 35:50 How is Flightcontrol priced? * How To Get Free AWS Credits - Flightcontrol * 44:44 How does Flightcontrol help with scaling? * Serverless Compute Engine – AWS Fargate – AWS * 46:11 What are your thoughts on ReactJS, Server components? * 49:57 Supper Club questions * Keychron K3 Ultra-slim Wireless Mechanical Keyboard (Version 2) * Learn to Code - for Free | Codecademy * 57:20 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * EAA AirVenture Oshkosh | Oshkosh, Wisconsin | Fly-In & Convention * Ko Tao * Ko Lanta Yai
Shameless Plugs * Flightcontrol — AWS Without Pain
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this potluck episode of Syntax, Wes and Scott answer your questions about TypeScript just being fancy duct tape, dealing with back pain while coding, rate limits on cloud services, what to use for email provider, is Firebase a legit platform, and more!
Show Notes * 00:11 Welcome * 03:11 The Sunday scaries * 06:03 Is TypeSctipt just a bunch of fancy Duck Tape? * Is TypeScript saving us? * 12:29 How do you go years into programming without back pain? * Hasty Treat - Stretching For Developers with Scott — Syntax Podcast 293 * 23:51 Why don’t cloud services provide an option to shut off services when a spending limit is reached? * DigitalOcean | Cloud Hosting for Builders * Vercel: Develop. Preview. Ship. For the best frontend teams * 28:41 How do you choose a CSS library for any project? * The most advanced responsive front-end framework in the world. | Foundation * 960 Grid System * 38:26 What’s happening to Level Up Tuts? * Level Up Tutorials - Learn modern web development * Wheels - Skateboard Wheels - 60mm Cali Roll - Shark Wheel * 43:43 Not a sponsored Yeti spot * 45:16 What do you do for email hosting? * Google Workspace * TechSoup Canada * Proton Mail: Get a private, secure, and encrypted email account * Outlook * Microsoft 365 Plans * Scheduling Software Everyone Will Love · SavvyCal * Synology Photos * 50:34 Is Firebase ok to run an app long term with? * Firebase * 58:57 Am I wrong to not do productive work intensely? * 01:34 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: MagSafe Charger, Anker 3-in-1 Cube with MagSafe * Wes: 6amLifestyle Headphone Hanger Stand Under Desk
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about why Threads, Instagram, and all things Facebook have what seems like really messy HTML and CSS?
Show Notes * 00:10 Welcome * Scott on Threads * Wes on Threads * 00:35 Threads has got divs * 02:42 Tight scoping * 09:44 Avoids specificity * 10:37 Dealing with ad blockers and scraping * 15:45 Divs are free, what’s the big deal? * 20:19 Facebook is tracking everything * 27:57 React Native
Shameless Plugs * Scott: Sentry
- Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Ryan Florence about Remix, working at Shopify, the history of licensing and pricing, quitting Twitter, the state of React Server components, and more.
Show Notes * 00:35 Welcome * Ryan Florence * Ryan Florence (@ryanflorence) / X * React Training * React Router Docs Moved * ryanflorence (Ryan Florence) · GitHub * 01:42 Collarbone update * 06:47 What is Remix? * Remix.run * 11:43 Server actions * 15:33 What was the history around licensing? * 20:30 Open source is weird now * 22:21 Working with Shopify and Hydrogen * Remixing Shopify | Remix * CSS Zen Garden: The Beauty of CSS Design * The Zen of CSS Design: Visual Enlightenment for the Web: Shea, Dave, Holzschlag, Molly E.: 9780321303479: Amazon.com: Books * 28:04 On quitting Twitter * 35:33 What’s coming up with v2 of Remix? * 40:30 The reality of breaking changes * 44:18 What’s the status of React Server components? * 49:46 Will Remix ever have React Server components in it? * 50:55 How should we be fetching our data? * 53:04 Do you have a wishlist for JSX? * 58:45 Supper Club questions * Strapi - Open source Node.js Headless CMS 🚀 * Sidekiq * GitHub - i-tu/Hasklig: Hasklig - a code font with monospaced ligatures * GitHub - sindresorhus/terminal-snazzy: Elegant Terminal theme with bright colors * 08:24 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Minivans
Shameless Plugs * Shopify
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about JavaScript runtimes available to use, what to consider, and packages to use.
Show Notes * 00:10 Welcome * 01:00 Scott’s glasses * 03:46 All the runtimes * Bun — A fast all-in-one JavaScript runtime * Edge Functions Supabase Docs * Edge Functions Netlify Docs * Deno — A modern runtime for JavaScript and TypeScript * Fast and low overhead web framework, for Node.js | Fastify * What Is Edge Computing? Alibaba * 05:15 A note for anyone new to JavaScript * 08:40 Winter CG * WinterCG * 11:05 Fetch * sindresorhus/ky: JavaScript HTTP client based on the browser Fetch API * website/src/routes/shows/+page.svelte * 14:53 URL * 20:02 addEVentListener * whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api · GitHub * 22:53 Web streams * Web Streams Explained — Syntax Podcast 587 * 26:03 Structured Clone * Structured JSON | Worker Tools * 33:43 What does JSON 5 do? * 34:48 Markdown flavors * 36:46 File * 40:32 AbortController and AbortSignal * DOM Standard * DOM Standard * 42:45 Packages for building * linkedom - npm * 44:05 Honking the Hono.dev * Itty Router * Itty Dev * Hono.dev * 55:25 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Macro Factor * Wes: CRP Products
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about Rust, and how the concepts might translate for JavaScript developers looking to try writing in Rust.
Show Notes * 00:26 Welcome * 01:08 Wes’ big beer bottle and Red Green * RedGreenTV on YouTube * 05:03 Thrift store finds * 06:19 Rust in JavaScript * TOML: Tom’s Obvious Minimal Language * 11:07 Documentation * Docs.rs * Practice.rs * 16:46 Memory safety * 17:43 What about promises in Rust? * 19:24 Error handling in Rust * 27:39 What’s with the double colon?
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Andris Reinman about his work on all things email - spam, DMARC, SPF, why there’s no good CSS in email, and his current project: Email Engine.
Show Notes * 00:36 Welcome * 01:56 Introducing Andris Reinman * Andris Reinman on GitHub * Andris Reinman (@andrisreinman) * Nodemailer :: Nodemailer * 04:34 Why is email so difficult? * Free DMARC Monitoring from Postmark * ConvertKit: The creator marketing platform * 09:48 What has changed in email? * 10:52 What are DMARK, SPF and BIMI? * 18:48 Is Mailtrain an open source alternative to Mailchimp? * Mailtrain-org/mailtrain: Self hosted newsletter app * 22:52 Why can’t we use CSS in email? * 29:05 Why is email so expensive? * 32:39 How do you keep your emails out of the spam folder? * 35:42 What is Email Engine? * EmailEngine Email API * 40:16 Is Email Engine self hosted? * 41:01 How does Ethereal email work? * Ethereal Email * 46:16 What email client do you use? * 49:44 Are any email clients harder to send to? * 55:23 Supper Club questions * iTerm2 - macOS Terminal Replacement * 59:29 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Programming Internet Email: Mastering Internet Messaging Systems: Wood, David: 9781565924796: Books - Amazon.ca
Shameless Plugs * EmailEngine Email
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about what polyfills, transpiling, and monkey patching mean, how and when to do it, and libraries that can help you out.
Show Notes * 00:10 Welcome * 01:07 Toast follow up * 02:45 What are transpiling, ponyfill, polyfill, and monkey patching * TC39 Proposals * Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3 * 11:18 Transpiling unsupported CSS * 15:11 Polyfills * Popover polyfill * 19:22 Polyfilling CSS * 21:06 HTML polyfills * 27:47 How to transpile and polyfill * Babel * TypeScript: JavaScript With Syntax For Types * CoffeeScript * Civet * cronn/jsxtransformer: Pipeline for transforming JSX files using Babel.js and Uglify.js * Svelte • Cybernetically enhanced web apps * Polyfill.io * core-js - npm * 35:46 Shiv and shims * Shim vs Shiv * 38:16 Monkey patching * 49:08 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Cable sleeve * Wes: Air Purifier * AliExpress
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about toast messages for validation, errors, confirmations, and more.
Show Notes * 00:24 Welcome * 01:04 Why use these types of notifications * 03:34 Old school checking stories * 05:35 What kinds of toast messages are there? * 10:02 Why toast? * 11:38 Best practices for toast messages * 17:09 Timeouts and manual close auto close * 19:38 Multiple messages stacking on top of each other * 22:56 Using a toast library * Building a toast component * react-hot-toast - The Best React Notifications in Town * Real-time notification system for products | MagicBell * 28:29 Form validation * Form validation with HTML5 and JavaScript * 33:36 HTML inputs
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Jake Champion about his work with Fastly and Polyfill, the difference between WASY and WASM, what Winter CG is, and what makes Fastly different.
Show Notes * 00:35 Welcome * 02:06 Who is Jake Champion? * Jake (@JakeDChampion) * JakeChampion on GitHub * 04:31 How long as Polyfill been around? * 06:11 What is Fastly? * Fastly * Polyfill * WASMTime * SpiderMonkey JavaScript/WebAssembly Engine * 12:09 What are people running on the edge with Fastly? * 16:29 What is Winter CG compliance? * Winter CG proposal * 17:55 What about node API’s being in platforms * 21:18 What is WASY vs WASM? * 24:37 Who is Web Assembly for? * 31:34 Is there anything WASM is not good for? * 41:39 What makes the Fastly runtime different from others * Hono * Smashing Mag - Web Workers * Worker Tools * 47:07 Supper Club questions * iTerm2 * Zsh for Humans * 50:26 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Luther TV Series * Forrest Gump
Shameless Plugs * Fiddle on Fastly * js-compute
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this potluck episode of Syntax, Wes and Scott answer your questions about Prisma, CSS variables in React components, JS notebooks, transcribing podcasts, keeping up with dev skills, selling a domain, and more.
Show Notes * 00:10 Welcome * 00:42 Harassed by a big truck * 03:20 Corrections and omissions * Syntax 627 - Electronics for Beginners * 05:57 Should I be using $executeRawUnsafe with Prisma? * 09:48 unset and initial * 11:54 true and false outside ARIA attributes * 14:56 Is there a way to modify the CSS variables from the React component? * 18:58 How do you feel about the JS notebooks landscape? * Jupyter * yunabe/tslab: Interactive JavaScript and TypeScript programming with Jupyter * Val Town * The notes app for your working memory - Stashpad * Obsidian - Sharpen your thinking * Light Table * 27:39 Is it possible to transcribe your podcasts? * World’s Most Powerful Speech-to-Text API | Deepgram * 29:05 Any tips for keeping my developer skills up without burning out? * 36:35 Any advice for selling a domain? * Escrow.com | Never buy or sell online without using Escrow.com. * 42:13 How do you update and future-proof project dependencies? * Syntax 425 - Updating Project Dependencies * 47:14 When I write TypeScript code, I always wonder if it’s a generally good practice to use Type-Only import when importing types? * 53:54 How would you go about conditional wrapper tags in Astro, Svelte or React? * 56:07 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Ancient Architects * Wes: Small Rig
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about how to get help for a bug or error you’re getting in someone else’s code.
Show Notes * 00:26 Welcome * 01:54 Building a reproduction of the error * 03:55 Creating a gist * Gist * 04:48 Be responsive. Be ready. * 08:03 Where do you go first for support? * 09:44 Search for your issue first * GitHub Issues * 10:53 Be nice
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Steve Krouse about val.town, what it is, his philosophies on teaching people to code, the tech stack for val.town, and the benefits of inspiring kids to learn to code.
Show Notes * 00:36 Welcome * 01:27 Who is Steve Krouse? * Steve Krouse * Future of Coding * stevekrouse (Steve Krouse) · GitHub * Steve Krouse (@stevekrouse) on Twitter * Coding Classes for Kids & Teens | Coding for Kids | The Coding Space * 03:06 What is Val.town? * Val Town * 08:35 Where did the inspiration for social dev environments come from? * 12:52 WYSIWYG code vs being code first * 16:30 How does val.town inspire people? * 20:26 How do you prevent people abusing val.town? * 24:57 What’s the UI story for snippets on val.town? * 27:31 Do you plan to support express? * 29:03 What’s the tech stack behind the front end of val.town? * 30:35 What’s the tech stack for the back end of val.town? * 34:37 How do you measure for pricing? * 37:07 Who is using val.town? * 42:00 What’s your methodology for teaching kids to code? * 47:44 Supper Club questions * GitHub - pomdtr/sunbeam: Generate powerful TUIs from simple scripts written in any language. * Deno — A modern runtime for JavaScript and TypeScript * A Small Matter of Programming * The Unison language * CodeMirror * A Small Matter of Programming: Perspectives on End User Computing * Stripe Press — Ideas for progress * pomdtr/sunbeam: Generate powerful TUIs from simple scripts written in any language. * Seymour Papert * woofjs.com * Bret Victor * Welcome | Future of Coding * Tom MacWright (@tmcw) * 55:54 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * SwitchBot Wi-Fi Smart Lock
Shameless Plugs * Val Town
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott try to stump each other with questions about JavaScript, HTTP status error codes, memory safety, and a bit of web history thrown in.
Show Notes * 00:11:07 Welcome * Displaced Gamers * 00:46:00 In which year was JavaScript introduced? * 02:59:16 What status code is returned by server when a resource isn’t found? * 03:32:00 Which http status code indicates the client must authenticate itself? * 04:34:17 What is a pseudo class and give an example? * 05:15:11 What JavaScript function allows you to delay the execution of a function? * 06:02:06 Who first proposed using separate style sheet language for the web? * 08:08:14 Which of the following statements about JavaScript strict are true? * 08:50:11 What is event driven programming in Node.js? * 10:26:08 In GraphQL, how do you mark a field as deprecated? * 10:47:24 How does xHTML differ from HTML? * 11:48:21 Which of the following statements is true about objects in JavaScript? * 13:20:19 What is a type erase in TypeScript? * 14:21:23 In TypeScript which syntax can be used to define a user defined type guard? * 16:02:12 What is a closure in JavaScript? * 17:40:00 Which node.js module provides asynchronus file I/O? * 18:54:08 What does memory safety mean? * 21:57:11 What does http2 introduce to improve speed? * 23:58:05 What are strategies for optimizing HTML5 video? * 26:28:11 Which of the following is not a correct way to create a new object? * 28:13:20 What is the difference between function declaration and function expression? * 30:49:11 What is the value of this inside an arrow function defined in a non-arrow function? * 31:22:11 What is a type guard? * 33:03:11 What is the order of execution in JavaScript? * 35:11:01 Which version of ecmascript was scrapped? * 39:41:00 What is the result of the following comparison in JavaScript? * 41:37:21 What were the major criticisms of CSS in it’s early days? * 46:48:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Projector * Wes: USB plug
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Colby Fayock about Cloudinary’s new AI tools, media flow, removing backgrounds, using AI for video templates, and Colby’s stack for creating YouTube content.
Show Notes * 00:36 Welcome * 01:11 Who is Colby Fayock? * ColbyFayock.com * Colby Fayock (@colbyfayock)on Twitter * ColbyFayock - Twitch * colbyfayock on GitHub * Colby Fayock (@colbyfayock) • Instagram * 01:57 What is Cloudinary? * Image and Video Upload, Storage, Optimization and CDN * 03:03 What’s with the space jellyfish? * 03:52 How is Cloudinary using AI for the web? * Developer resources for using images and videos in your apps * 09:54 What is media flow? * 13:00 Who is the target audience for AI tools from Cloudinary? * 17:03 Removing backgrounds * Remove Background from Image for Free – remove.bg * iPhone Messages stickers: How to make and use them - 9to5Mac * 21:14 Cloudinary’s Video API * ascorbic/unpic-img: Multi-framework responsive image component * 22:44 Function calling in OpenAI * 26:22 How do you deal with the random generation of AI? * 29:00 What are the community SDKs for Cloudinary? * 37:04 What’s your process for creating content for YouTube? * 42:49 Supper Club Questions * Open Broadcaster Software | OBS * Facecam Pro – Elgato * Recut — Automatic Video Editor * Night Owl - Visual Studio Marketplace * iTerm2 - macOS Terminal Replacement * Oh My Zsh - a delightful & open source framework for Zsh * 51:40 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Ready To Drink Cold Brew Coffee | Trader Joe’s
Shameless Plugs * Colby Fayock on YouTube
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Colby Fayock about Cloudinary’s new AI tools, media flow, removing backgrounds, using AI for video templates, and Colby’s stack for creating YouTube content.
Show Notes * 00:36 Welcome * 01:11 Who is Colby Fayock? * ColbyFayock.com * Colby Fayock (@colbyfayock)on Twitter * ColbyFayock - Twitch * colbyfayock on GitHub * Colby Fayock (@colbyfayock) • Instagram * 01:57 What is Cloudinary? * Image and Video Upload, Storage, Optimization and CDN * 03:03 What’s with the space jellyfish? * 03:52 How is Cloudinary using AI for the web? * Developer resources for using images and videos in your apps * 09:54 What is media flow? * 13:00 Who is the target audience for AI tools from Cloudinary? * 17:03 Removing backgrounds * Remove Background from Image for Free – remove.bg * iPhone Messages stickers: How to make and use them - 9to5Mac * 21:14 Cloudinary’s Video API * ascorbic/unpic-img: Multi-framework responsive image component * 22:44 Function calling in OpenAI * 26:22 How do you deal with the random generation of AI? * 29:00 What are the community SDKs for Cloudinary? * 37:04 What’s your process for creating content for YouTube? * 42:49 Supper Club Questions * Open Broadcaster Software | OBS * Facecam Pro – Elgato * Recut — Automatic Video Editor * Night Owl - Visual Studio Marketplace * iTerm2 - macOS Terminal Replacement * Oh My Zsh - a delightful & open source framework for Zsh * 51:40 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Ready To Drink Cold Brew Coffee | Trader Joe’s
Shameless Plugs * Colby Fayock on YouTube
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about what headless components are, the why and when to use headless components, and how to best implement them.
Show Notes * 00:07 Welcome * 02:33 Tailwind Connect * Tailwind Connect 2023 | Tailwind CSS Live Event * 04:37 Headless component overview * Downshift * Headless UI * 06:57 A country dropdown component * 12:52 Possibly like Svelte actions? * 18:46 What do headless components provide? * 19:13 Examples of headless component projects * Microsoft Edge Demo * 24:24 How does this compare to web components? * Tanstack Table * Tanstack Virtual * 26:29 Checking out Shoelace * Shoelace * 28:42 Figma announcements * What’s New in Figma * 31:21 What does headless mean? * 36:24 SIIIIICK ××× PIIIICKS ××× * 41:20 AI Voices
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hacker News Recap /Hacker News Recap on Apple Podcasts * Wes: Calipers
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about what Lightning CSS is, how it works, and why you should consider using it in your projects.
Show Notes * 00:25:22 Welcome * 01:04:11 Overview of Lightning CSS * Lightning CSS * Devon Govett (@devongovett) * Parcel * 04:56:11 What’s in Lightning CSS? * OKLCH * 21:39:11 CSS Layers * 24:57:14 Text decoration
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Armin Ronacher about his contributions to open source, queues and messaging in apps, scaling up a queue, and how it all works at Sentry.
Show Notes * 00:35 Welcome * 01:49 Who is Armin Ronacher? * Armin Ronacher * mitsuhiko (Armin Ronacher) * Armin Ronacher (@mitsuhiko) * Armin Ronacher * Armin Ronacher * Apache Kafka * 04:11 What are queues and what are they used for? * 08:02 Do you listen or poll for updates in the queue? * 12:49 Does this help when a provider goes down? * 18:31 How do you architect a queue? * 20:20 How does it scale up? * 27:05 How does Sentry manage all the data flowing in from events? * Redis Message Broker | Redis Enterprise * Messaging that just works — RabbitMQ * Using RabbitMQ — Celery 5.3.1 documentation * 33:45 How do you visualize the data? * 37:15 Edge case that Sentry had to fix * 40:22 How are you using Rust? * Rust Programming Language * 43:32 Why is Python so popular in the AI space? * 45:17 What do you think about JavaScript on the server? * 48:02 Supper Club questions * 50:44 How do you stay motivated with programming?
××× SIIIIICK ××× PIIIICKS ××× * Bilderbuch * Bilderbuch on Spotify
Shameless Plugs * Rye - An Experimental Package Management Solution for Python
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about the benefits and potential drawbacks of using an ORM on your next project, as well as what some of the popular ORMs are.
Show Notes * 00:10 Welcome * 00:39 Dental cleanings * 03:00 What’s an ORM? * 05:51 Benefits of using an ORM * 12:54 Validation in ORM * 19:18 What about Types? * 23:44 Popular ORMs * Prisma * Sequelize * Objection.js * Knex.js * DrizzleORM - next gen TypeScript ORM * Mongoose ODM v7.3.1 * TypeORM * waterline.js * 42:41 Potential downsides to using an ORM * 45:53 Database schemas * 52:30 Hooks or events * 55:27 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: I Think You Should Leave with Tim Robinson * Wes: Wise, Formerly TransferWise: Online Money Transfers
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about where you should register a domain name, explain DNS, and the process for moving a domain from one registrar to another.
Show Notes * 00:25 Welcome * 02:04 Domain name registration vs DNS * 03:58 Domain name flattening * 05:07 Domain name privacy * 05:31 Proxy registrations * 06:44 Bait and switch registrars * 11:56 Domain registrars we found * 13:09 NameCheap and Spaceship * Namecheap * Spaceship * 17:42 GoDaddy * GoDaddy * 19:26 Ghandi * Gandi.net * 21:16 Porkbun * Porkbun * 22:18 Hover * Hover.com * 24:24 Name * Name.com * 26:24 Cloudflare * Cloudflare * 28:04 What’s the process for moving d * iwantmyname * DNSimpleomains to a new registrar? * 30:38 I Want My Name and DNS Simple * 33:05 Finding domain names * 37:28 What would you pick to register a domain today?
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Dustin Schau about Netlify Connect, Gatsby, GraphQL, and more.
Show Notes * 00:35 Welcome * 01:20 Who is Dustin Schau? * Dustin Schau (@SchauDustin) * Develop and deploy websites and apps in record time | Netlify * 02:49 Is Valhalla from Gatsby? * How to Source Content from a Headless CMS | Gatsby * Valhalla Content Hub | Gatsby * Netlify Connect Brings All Content Sources & CMS Apps Together * 05:41 Valhalla is now Netlify Connect * 09:32 How often should you scrape or cache from another API? * 10:36 What about auth? * 13:41 Will Netlify Connect be open source or paid? * 18:48 Is GraphQL it? * Overview | urql Documentation * GQty * 22:35 What odd data sources are you trying to connect? * 26:06 How does Gatsby send out to APIs? * 29:00 What CMS should people use? * The Markdown CMS | Tina * The platform to bring your best ideas to life | Contentful * The Composable Content Cloud - Sanity.io * 31:22 What do you think of component based CMS? * SEO Enterprise Rank Tracker - A Keyword Rank Tracking Tool Like No Other | Nozzle.io * 35:36 What are your thoughts on the React ecosystem? * 43:33 What’s the future for Gatsby? * 46:14 Supper Club questions * folivora.ai - Great Tools for your Mac! * Noodlesoft – Noodlesoft – Simply Useful Software * Dank Mono: The coding typeface for aesthetes * DSchau/dotfiles: :wrench: .files, including ~/.macos — sensible defaults for macOS development (catered to Node.js) * Deploy app servers close to your users · Fly * Hono - Ultrafast web framework for the Edges * Stream Movies & TV Shows | Plex * The Free Software Media System | Jellyfin * 56:29 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Arc Browser * Resend React Email
Shameless Plugs * Netlify * Netlify Connect
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this potluck episode of Syntax, Wes and Scott answer your questions about rate-limiting an API, using Wasp, Enums in TypeScript, styling React projects, using Edge functions, and more.
Show Notes * 00:11 Welcome * 01:53 Connecting at conferences * JSNation – the main JavaScript conference of 2023 * RenderATL 2023 | May 31 - June 2, 2023. | 80+ Speakers * 04:10 What technique do you use for consuming a rate-limited API? * 07:58 Is Wasp-lang.dev ticking all the boxes for an awesome full-stack JavaScript framework? * Wasp * 14:36 How do you guys feel about skeleton UIs? * Skeleton | Open UI * 19:10 How can i forward my http only auth cookies to my backend API? * 22:28 What’s your opinion on using Enums in TypeScript? * 29:46 How much off the clock time away from coding related activities do you have in a typical week? * 37:10 What’s the best approach for styling React projects? * 42:49 Donut scoping * Scope donuts | Stubbornella * 45:21 How do I add user registration and content uploading features to a website? * Next.js by Vercel - The React Framework * Laravel - The PHP Framework For Web Artisans * Image and Video Upload, Storage, Optimization and CDN * RedwoodJS: The App Framework for Startups | RedwoodJS.com * SvelteKit • Web development, streamlined * Learn Node — The best way to learn Node.js, Express, MongoDB, and Friends * AdonisJS - A fully featured web framework for Node.js * 53:25 Do you see any benefits in using edge functions if your audience is local? * 59:20 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: * BOJACK 37 Values 480 Pcs Electronics Component Fun Kit with Power Supply Module, Jumper Wire,Precision Potentiometer,830 tie-Points Breadboard Compatible with STM32,Raspberry Pi,Arduino : Electronics * Wes: * Local and regional eSIMs for travellers - Airalo
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about AsyncLocalStorage, why more frameworks aren’t using it yet, some examples, as well as some footguns.
Show Notes * 00:22 Welcome * 01:44 What is AsyncLocalStorage? * 03:14 What is context? * 07:49 Why aren’t more frameworks using AsyncLocalStorage for context for middleware? * 10:16 Examples of usage * 14:20 Footguns
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Nick Hehr about the fun ways to get started with micro controllers, writing JavaScript for hardware, and ideas for projects to build involving hardware and software.
Show Notes * 00:36 Welcome to Syntax * 01:04 Introducing Nick Hehr * Nick Hehr (@hipsterbrown) * HipsterBrown (@hipsterbrown@toot.cafe) - Toot Café * HipsterBrown * HipsterBrown (Nick Hehr) * Nick Hehr on CodePen * 03:58 Running JavaScript on microcontrollers * 06:20 What was your first project that got you into this? * 12:12 Is the ESP32 the most popular controller? * 14:12 Where do you buy hardware? * Arduino - Home * Adafruit Industries, Unique & fun DIY electronics and kits * AliExpress - Online Shopping for Popular Electronics, Fashion, Home & Garden, Toys & Sports, Automobiles and More products - AliExpress * SparkFun Electronics * Introduction 🚀 xs-dev Documentation * Welcome to Robo Wizard | Robo Wizard * 16:52 What are people building with boards? * 18:30 What does the JavaScript look like? * 22:16 Can you make a Fetch request? * 25:45 What about Arduino? * 31:54 What’s a good starter project? * Johnny-Five: The JavaScript Robotics & IoT Platform * meganetaaan/stack-chan: A JavaScript-driven M5Stack-embedded super-kawaii robot. * TC53 - Ecma International * dtex/j5e: Framework for embedded devices using ECMA-419, the ECMAScript® embedded systems API specification, based on Johnny-Five’s API * HipsterBrown/on-air-light: An offline-first IoT on-air light for video meetings, using ESP32 & JS * ESPHome — ESPHome * Being in the video game with Augmented Climbing | The Kid Should See This * 36:03 Emulation and debugging * 39:13 What else have you made? * 44:31 ESP Home * 54:35 SIIIIICK ××× PIIIICKS ××× * 00:32 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * The Opus Intro Kit – Fellow * jdxcode/rtx: Runtime Executor (asdf rust clone) * Code: The Hidden Language of Computer Hardware and Software: Petzold, Charles: 9780137909100: Books - Amazon.ca
Shameless Plugs * Introduction 🚀 xs-dev Documentation
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk through an introduction to electronics that you can do in your own home with microcontrollers.
Show Notes * 00:08 Welcome * 00:52 What we’re talking about * Arduino - Home * ESP32 – The best products with free shipping | only on AliExpress * 02:15 Airtag Sidebar * 04:05 Projects We’ve Worked On * 06:34 How do you run software on the microcontroller * 08:50 Microcontrollers are extendable * 12:05 Fixing a dryer * 14:06 Sprinkler system * 15:48 Microcontrollers * 20:28 AC and DC Voltage * 25:45 Amperage and watts * 28:19 Extension cords ideally would have fuses * 31:18 What’s the risk of not having enough power? * 32:09 GPIO * 35:45 Resistance * How Resistors Work - Unravel the Mysteries of How Resistors Work! * 41:12 Capacitors * 42:02 Sensors * 5/1pcs HLK LD2410C 24G mmWave FMCW Millimeter Wave 5M Human Presence Status Radar Sensor Motion Detection Modul High Sensitivity * 46:47 Relays * 48:33 Coding microcontrollers * Web Serial API * ESPHome — ESPHome * Johnny-Five: The JavaScript Robotics & IoT Platform * Espruino - JavaScript for Microcontrollers * Introduction - The Rust on ESP Book * Welcome to Quick.js! - quick.js * 52:32 A note on Soldering * 53:12 Projects for kids * 54:31 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Razor blade * Wes: ESP32 – The best products with free shipping | only on AliExpress
Shameless Plugs * Scott: Syntax Discord * Wes: Wes’ Instagram
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about some of the GitHub features you may not have used very much including projects, milestones, labels, and actions.
Show Notes * 00:26 Welcome * 01:53 That’s sick * 04:05 What we’ve used in the past * Trello * Jira | Issue & Project Tracking Software | Atlassian * 06:13 Working with Github Projects * About Projects * 11:57 Milestones * About milestones * 14:35 GitHub Labels * Managing labels * 19:51 GitHub Actions * Features • GitHub Actions * Level Up Tutorials - Learn modern web development
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Andrey Mishchenko about working at OpenAI, getting started in machine learning, what RLHF is, the impact of plugins on ChatGPT, and what the future holds for developers in a world with ChatGPT tools.
Show Notes * 00:33 Welcome * 00:59 ChatGPT introduction * 02:17 Who is Andrey Mishchenko? * 03:17 What is circle packing? * 05:04 When did you start at OpenAI? * 06:21 Levels of interaction * 08:39 How do you train the model to understand? * 11:13 What’s RLHF? * 13:56 What are plugins for ChatGPT? * 16:11 What languages are you using to code for AI? * 19:15 Did you have any idea ChatGPT would be so popular? * 21:13 Did your math degree help get into language modeling? * 28:34 Do Wes or Scott worry they’re going to lose their job? * 33:24 How has farming been shaken up by AI? * 34:59 Do you think the pace of AI will continue? * 35:30 Will plugins change how people use AI tools? * 41:21 What does AI do better than anything else? * 49:11 Supper Club questions * 55:04 SIIIIICK ××× PIIIICKS ××× * Andrey Mishchenko - Member of Technical Staff - OpenAI * Bing Chat (GPT-4) in Google - Chrome Web Store * ChatGPT plugins * Introduction - OpenAI API
××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs 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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott use the fact that Svelte is being converted from TypeScript to JavaScript with JSDoc to talk about the benefits of working that way, why they are doing it, and what you can do with JSDoc that TypeScript alone doesn’t let you do.
Show Notes * 00:10 Welcome * 01:12 Roof update * 02:15 TypeScript haters need not apply * 03:17 What is JSDoc? * 04:27 What is our history with JSDoc? * 06:37 Why is Svelte moving to JSDoc? * 08:11 Why is JSDoc better than TypeScript? * 12:31 You can type things you can’t in TypeScript * 16:37 Param, Function and returns Descriptions * 21:32 Spoiler - it’s still TypeScript * 33:23 SIIIIICK ××× PIIIICKS ××× * Get Started With TypeScript the Easy Way * TypeScript without TypeScript – JSDoc superpowers * TypeScript: Documentation - JSDoc Reference * Dev Vlog: April 2023 - TypeScript vs JSDoc, Transitions API, Dominic Gannaway joins Svelte team * Svelte repo is finally being converted from Typescript to Javascript with JSDoc * If you are on a JS project and are missing the TypeScript hinting in your editor, you can still type your code with JSDoc syntax comments and VS Code will detect and use it! * Sprinkle in a little JSDoc on top of your TypeScript when needed - helpful to adding descriptions to returned values, or marking things as deprecated * TypeScript to JSDoc
××× SIIIIICK ××× PIIIICKS ××× * Scott: Watch MerPeople | Netflix Official Site * Wes: 18V ONE+ 45W HYBRID SOLDERING STATION (TOOL ONLY) | RYOBI Tools
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about all the nothing in CSS: 0 vs 0px, no, none, hidden, initial and unset.
Show Notes * 00:22 Welcome * 01:50 The @ property * 03:33 Hiding Things * 10:07 Ghost Spaces * 17:47 Collapsing margins * 18:33 0 units vs 0 * 23:42 Unset and initial * 27:42 HTML Bonus
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Matt Rothenberg and Idan Gazit from GitHub about GitHub Next, Copilot, AI based projects at Github, and what the future is for developers with AI.
Show Notes * 00:38 Welcome * 01:23 Who are Matt and Idan? * Matt Rothenberg * @mattrothenberg * Matt Rothenberg on CodePen * Matt Rothenberg on GitHub) * Idan Gazit * @idangazit * Idan Gazit vis.social * Idan Gazit on GitHub * 02:22 What’s the history of GitHub Next? * GitHub Copilot · Your AI pair programmer * ChatGPT | OpenAI * 05:18 How do you come up with new ideas? * 06:37 Did GitHub Copilot blow up fast? * 13:18 Do we need powerful models for all situations? * 16:40 How does Copilot know my codebase? * Inside GitHub: Working with the LLMs behind GitHub Copilot | The GitHub Blog * 21:34 What’s Copilot X? * Introducing GitHub Copilot X * 24:57 What is it like to have a hit like Copilot? * 31:27 What is the future for developers due to AI? * 35:11 What other AI based projects are you working on? * 42:10 Are there any flops from GitHub Next? * 46:59 How do you think about Code Brushes? * GitHub Next | Code Brushes * 48:46 Supper Club questions * Breeze | Afternoon Labs * Introduction - The Rust on ESP Book * Recursive Sans & Mono * Bearded Theme - Visual Studio Marketplace * Zed - Code at the speed of thought * Warp: The terminal for the 21st century * 59:16 SIIIIICK ××× PIIIICKS ×××
Shameless Plugs * GitHub Next * githubnext/githubnext: A public point of contact for GitHub Next * Ariakit - Toolkit for building accessible UIs * Liveblocks | Collaborative experiences in days, not months
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk through the work in progress on the new Syntax website, how to tackle all the moving parts, what stack they picked, AI, and more.
Show Notes * 00:10 Welcome * 00:56 Leaky roofs * 02:18 How we divided the workload for the new Syntax site * Issues of Syntax v2 * V2 of the website * 02:55 Dark mode vs light mode * 04:46 Our project management stack * 06:36 High school dances * 08:36 Tech stack for Syntax v2 * Prisma | Next-generation ORM for Node.js & TypeScript * PlanetScale: The world’s most advanced database platform * 16:44 PostCSS and Sveltekit * SvelteKit • Web development, streamlined * Vercel: Develop. Preview. Ship. For the best frontend teams * 17:57 Auth * Authorizing OAuth Apps * oAuth APIs Explained — Syntax Podcast 599 * 23:15 Transcription * Otter.ai - Voice Meeting Notes & Real-time Transcription * Amazon Transcribe – Speech to Text - AWS * Introducing Whisper * WhisperX: Automatic Speech Recognition with Word-level Timestamps (& Diarization) * Speech-to-Text: Automatic Speech Recognition Google Cloud * Deepgram: World’s Most Powerful Speech-to-Text API * 35:54 Theming system * CSS Zen Garden: The Beauty of CSS Design * 43:38 AI Shownotes * 53:02 Ingest process * 00:24 Markdown as the source of truth * 01:50 AI Embeddings * Vector Database for Vector Search | Pinecone * Introducing Ask Netlify: a new way of engaging with Netlify Docs with AI-Powered interactions * 09:22:24 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Jury Duty * Wes: Ted Lasso
Shameless Plugs * Scott: Syntax Discord * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about JavaScript executables - what is it? What’s the benefit of them? And what kind of tooling exists to support them?
Show Notes * 00:25 Welcome * 01:12 What are JavaScript executables? * 04:39 Deploying tooling * 06:01 Running on a USB stick * 07:57 The size * 12:19 Fastly * The edge cloud platform behind the best of the web | Fastly * Deno — A modern runtime for JavaScript and TypeScript * Bun — A fast all-in-one JavaScript runtime
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Bramus Van Damme all about CSS, what the CSS Working Group is, how he got good at blogging, setting custom property types in CSS, view transition API, and so much more.
Show Notes * 00:35 Welcome Bramus Van Damme * 02:29 Who is Bramus? * Bramus Van Damme - Developer Relations Engineer - LinkedIn * Original Content – Bram.us * Bramus on Twitter (@bramus) * bramus on GitHub (Bramus!) * 03:33 What is the CSS Working Group? * CSS WG Blog * w3c/csswg-drafts: CSS Working Group Editor Drafts * 11:18 How did you get so good at blogging? * CSS Trig functions * 14:02 Scroll Driven Animations * Bram.us: Scroll linked animations with scrolltimeline and viewtimeline/ * Chrome Dev blog: Scroll driven animations/ * MDN Animation timeline * Scroll-driven-animations.style * 25:53 What’s going on with Houdini? * IsHoudiniReadyYet.com * CSS Props and Vals * 27:09 Why do you need to set a custom property type in CSS? * 29:08 How do you debug values in CSS? * 30:12 What is Scope Styling? * 34:50 But when can I use it? * 36:18 What’s the status of the view transition API? * View Transitions * 40:53 What are you looking forward to in CSS? * 42:19 Would CSS ever get a strict mode? * 47:05 Supper Club Questions * ZSH - THE Z SHELL * zsh-users/antigen: The plugin manager for zsh. * web.dev * Blog - Chrome Developers * Welcome to Feedly * 52:40 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Meetups
Shameless Plugs * Scroll-driven-animations.style
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this potluck episode of Syntax, Wes and Scott answer your questions about not becoming dependent on Copilot, CSS variable limitations, finding Sick Picks, lodash hate, and more!
Show Notes * 00:11 Welcome * 00:55 Ice, ice baby * 02:01 Reactathon * Reactathon returns May 2-3, 2023 * The edge cloud platform behind the best of the web | Fastly * 04:49 Submit your question for our next potluck * 05:24 How do you suggest adding form / database to Svelte? * Svelte • Cybernetically enhanced web apps * Astro * 08:18 What can’t go into a CSS custom prop? * 12:42 Are there any really good certifications for Javascript or general full stack development? * 16:21 What is the most exciting thing about teaching programming for both of you? * 19:37 What is the most challenging thing you have ever overcome in this field? * 21:55 How can junior to mid-level devs make the most out of GitHub Copilot while avoiding getting dependent on it and hurting their abilities in the long run? * 26:23 Any tips on driving a culture of code quality in a team? * 30:28 How soon should Sentry be brought into a new project being built from scratch? * 33:11 Is there a place where I can search through all the Sick Picks? * Syntax Sick Picks * 34:40 Why is box-sizing: border-box; not the default? * 37:51 Is using lodash in a NextJS web application a terrible idea nowadays? * 40:42 What is the best practice for storing JWT token? * 43:53 Any tips on converting ajax requests to use Fetch API? * patch-package - npm * 45:11 Any suggestions for tips for updating a very dated React Native codebase? * 50:56 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Tales of Taboo podcast Spotify / Apple Podcasts * Wes: Rubber Flooring
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about the reasons your node_modules folder gets so large, and what you can do to help keep the file size down.
Show Notes * 00:24 Welcome * 00:51 The punching bag of Javascript * DaisyDisk * 02:03 Spoiler alert - it’s text * 04:49 What actually increases the size? * 07:29 Types * 09:27 Polyfills * 11:09 Raycast Snippets and BetterTouchTool * 12:44 Babel * 15:08 Markdown * 15:52 Translations * 18:23 What is the solution? * Raycast * Bundlephobia | Size of npm dependencies * Better Touch Tool * Fast, disk space efficient package manager | pnpm
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style.
Show Notes * 00:34 Welcome * 01:05 Guest introduction * Adam on Bluesky * Adam on Twitter * 01:48 CSS buckets * New CSS Relative Units · January 6, 2023 * 03:16 rex rch ric rlh * 08:06 Gradient.style * CSS HD Gradients * Open Props: sub-atomic styles * 13:49 What are style queries vs container queries vs state queries? * una.im | Style Queries * Getting Started with Style Queries - Chrome Developers * CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc * 18:09 Trig functions * Trigonometric functions in CSS * CSS Trigonometric Functions: cos() and sin(): dots on a circle * 19:57 Live transitions * Understand Disney’s 12 principles of animation | Creative Bloq * 25:08 View transitions * View Transitions Demo * View Transitions API - Web APIs | MDN * 26:01 Text-wrap balance * CSS text-wrap: balance - Chrome Developers * 26:45 Text-wrap pretty * 27:44 What’s the future of the browser landscape? * 31:44 nth-child(An+B [of S]) * 33:06 Cascade layers * 34:40 CSS Nesting * 38:03 Animate discrete properties * 39:42 Linear function * Linear easing generator * 41:33 Media query range syntax * 42:04 Subgrid everywhere * 44:41 Media query range and variables? * UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612 * 45:32 env variables * Hasty Treat - CSS Nesting 1 — Syntax Podcast 343 * 46:59 Animation composition * 49:50 Select menu HTML element * 52:16 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs * Onewheel // Future Motion * Adam Argyle
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this episode of Syntax, Wes and Scott talk about your options for hosting your app including some of the big players, but also others you may not have heard of.
Show Notes * 00:11 Welcome * 01:06 Explaining basic concepts in hosting providers * 07:55 How is hosting priced? * 10:09 The big names in hosting * Amazon Web Services * Google Cloud * Microsoft Azure * DigitalOcean | The Cloud for Builders * Sales Cloud * Flightcontrol — AWS Without Pain * Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589 * 16:29 Render * Render * 23:50 Vercel * Vercel: Develop. Preview. Ship. For the best frontend teams * 28:04 Heroku * Cloud Application Platform | Heroku * 31:58 Digital Ocean * 36:10 Linode * Create your account - Linode * 38:34 Netlify * Develop and deploy websites and apps in record time | Netlify * The Deno Show — Syntax Podcast 322 * Decap CMS | Open-Source Content Management System * 46:30 Fly * Deploy app servers close to your users · Fly * Railway * 54:19 Cloudflare * Cloudflare - The Web Performance & Security Company | Cloudflare * 00:43 Deno deploy * Deno Deploy | Deno * 03:04 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Automators - Relay FM * Wes: Dropbox.com
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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 * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky
In this Hasty Treat, Scott and Wes talk about Signals - what are signals and why is everyone talking about them suddenly?
Show Notes * 00:25 Welcome * 01:40 Chipping away at projects * 03:20 WTF are signals? * Signals * Framework reimagined for the edge! - Qwik * SolidJS · Reactive Javascript Library * Zone * Vanilla * 09:03 What are the boundaries on signals? * 10:49 Why are signals so popular now? * 15:57 When wouldn’t you use signals?
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
In this supper club episode of Syntax, Wes and Scott talk with Dylan Jhaveri about his work at Mux, how Mux ingests and spits out video, and where Mux fits in a tech stack for developers working with video and audio.
Show Notes * 00:36 Welcome * 01:27 Who is Dylan Jhaveri? * Dylan (@dylanjha) * The Internet’s video infrastructure | Mux * Mux Player * 03:04 Why did you build Mux Player? * FFmpeg * FFmpeg WASM * 06:19 How did you chose to go with web components? * CanIUse Mediasource * 09:36 What is Mux? * 15:20 Can you stitch or clip video via the API with Mux? * 18:07 Do you think hls will be supported in Chromium or Firefox? * 21:56 How does Mux process videos into 5 versions? * 26:35 Is Web assembly in use for video? * 27:55 Has Mux researched AI for video? * 31:13 Building a podcast transcription video * 36:49 Do you have to use MP4? What about webM? * 39:36 Media Chrome video player * Elements for building media players * 44:58 What’s Mux Data? * Mux Data * 49:33 Slick Mux website * Mux.com * 52:13 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Cruise
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
In this episode of Syntax, Wes and Scott talk about UI elements and best practices with UI elements, as well as UI elements that exist in browsers.
Show Notes * 00:10 Welcome * 01:10 Making demos for fun * 02:47 Why we’re talking UI elements * 03:48 Bad UI elements in the browser * Syntax 602: Modals, Popups, Popovers, Lightboxes * Progress * 10:47 Decent UI elements in browser * 19:49 Enter Open UI * Open UI * 34:39 Accordion hunks * 38:15 Pop overs * 42:15 Focus group * 46:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Fishskyn * Wes: Flavacol & Butter Flavoured Coconut Oil
Shameless Plugs * Scott: Sentry replays * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk all things Bluesky, the AT Protocol it’s built in, the terminology of Bluesky, and how the API currently works.
Show Notes * 00:07 Welcome * 00:53 Welcome to the Bluesky * Wes Bos on Bluesky * Scott on Bluesky * Syntax on Bluesky * 03:14 What could the new Twitter be? * 07:56 What is Bluesky? * Nostr * Bluesky * Twitter Blue * Bluesky Staging * Bluesky FAQ * 10:25 Why is social media important? * 14:01 What is AT Protocol? * 22:06 Lexicon for Bluesky * 28:10 Small group of devs building Bluesky * Cravings by Chrissy Teigen | Fun Recipes & Cookware * 29:54 Blocking issues * 31:53 Bluesky API * Samy on Darknet Diaries ep61
Shameless Plugs * Scott: Sentry) * Wes: Wes Bos Tutorials
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
In this supper club episode of Syntax, Wes and Scott talk with Zach Lloyd about how Google Sheets works, why Zach wanted to build Warp, why did they use Rust to write Warp in, is Warp going to come to Windows, and more!
Show Notes * 00:20 Welcome * 01:12 Who is Zach Lloyd? * Zack on Twitter * Zack on LinkedIn * Warp Terminal × Next Gen Terminals — Syntax Podcast 579 * Warp: The terminal for the 21st century * 03:41 How does Google Sheets work? * GWT * 13:38 What is Warp and why did you build it? * Introducing Warp * 16:50 Why did you build Warp in Rust? * Rust Programming Language * Harfbuzz * Adventures in Text Rendering: Kerning and Glyph Atlases * 23:20 How would you move Warp to Windows? * 26:02 How would you run Warp on the web? * 31:24 How are the blocks done inside Warp? * 36:23 Would Warp ever add a shell? * 40:04 Is better completion support coming to Warp? * 44:42 Warp AI features * 52:08 Supper Club questions * 56:52 SIIIIICK ××× PIIIICKS ××× * Oh My Zsh - a delightful & open source framework for Zsh
××× SIIIIICK ××× PIIIICKS ××× * Tonal | The World’s Smartest Home Gym Machine For Strength & Fitness
Shameless Plugs * Join Us | Warp
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
In this episode of Syntax, Wes and Scott talk about the tech stack they used to create the Syntax giveaway site for the Sentry + Syntax announcement week. What were the features of the site, how’d they generate proper codes, and how’d they stop developers from hacking the system?
Show Notes * 00:07 How to do a giveaway and distribute it? * 04:26 Building in the spirit of Syntax * 05:44 The tech stack * SvelteKit • Web development, streamlined * Prisma | Next-generation ORM for Node.js & TypeScript * Syntax × Sentry MMXXIII | Product Blog • Sentry * PlanetScale: The world’s most advanced database platform * My Places - Google My Maps * sveltekit-basic-auth/hooks.server.ts at main · ghostdevv/sveltekit-basic-auth * Voucherify: Free Random Codes Generator * 09:48 Hosted on Vercel * Vercel * 13:04 What are the features of the site? * 19:10 Generating the codes properly * 26:48 Releasing locked coupon codes * 29:13 Client to server side connections * 32:56 Stopping developers from gaming the giveaway * 46:29 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Super Mario Bros. Movie (2023) - IMDb * Wes: The Strong National Museum of Play
Shameless Plugs * Scott: Application Performance Monitoring & Error Tracking Software | Sentry * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about RPC, what it means, why are we talking about it now, tRPC, and will RPC take off?
Show Notes * 00:22 Welcome * 01:51 What does RPC mean? * 04:52 Why are we talking RPC now? * 10:27 Hype around RPC * Supper Club × Solid.js with Ryan Carniato — Syntax Podcast 577 * 11:05 Isn’t this just a REST endpoint? * 13:23 Considerations around RPC * 16:11 What about tRPC? * Supper Club × tRPC With Alex KATT Johansson — Syntax Podcast 526 * 18:08 Will RPC take off?
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
In this supper club episode of Syntax, Wes and Scott talk with Donata and Hans Skillrud of Termageddon on GDPR, privacy policies, cookie pop ups, and the various legal and ethical reasons to implement them properly.
Show Notes * 00:36 Welcome * 01:47 Who are Donata and Hans? * Donata Stroink-Skillrud Esq., CIPP on Twitter * Hans Skillrud on Twitter * Termageddon * Termageddon on Instagram * Termageddon on LinkedIn * 03:39 What are privacy policies and a terms of service? * 4 Things to Look for in a Privacy Policy Generator - Termageddon * Why accessibility is important when it comes to cookie consent - Termageddon * 09:15 Does scrolling to the bottom and pretending to read terms work? * 10:49 Do people ever read the terms of service? * 15:57 Do companies ever actually get in trouble for violating privacy? * 20:06 What is GDPR and the impact on small business owners? * 32:30 Cookie war and pop ups * 35:40 Essential cookies * 42:42 Alternatives to Google Analytics * The Google Analytics alternative without compromise - Fathom Analytics * Self-hosted website analytics | Ackee * 43:39 Denying cookies, but still able to create accounts? * 48:57 Is there legal concerns with AI? * Can ChatGPT (AI) write your Privacy Policy? - Termageddon * 56:25 What is Termageddon? * 58:59 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * EPIX From TV Series
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
In this potluck episode of Syntax, Wes and Scott answer your questions about type guards vs type casting, crypto usage, feedback for Syntax, custom status pages, SEO and metadata, uploading images, home automation, and more!
Show Notes * 00:12 Welcome * 01:23 Scott’s new gear * MT-48 * Volt USB Audio Interfaces * 07:36 Are type guards safer and superior to type casting? * 13:51 I know you guys (lightly) rag on Crypto, but do you see any use-case there for proof-of-personhood? * 23:34 Where do I give feedback outside of Twitter? * User Feedback | Sentry Documentation * 27:19 Do you have custom status pages created for your platforms? * UptimeRobot: Free Website Monitoring Service * Privacy Badger * Status.io - Hosted Status Pages * Statuspage | Atlassian * DigitalOcean Status * 35:12 Is metadata only good for SEO? Does SEO matter on pages you can only view if you’re logged in? * 39:00 How do you upload images from authenticated users? * 46:30 What do you think of Zed? * Zed - Code at the speed of thought * 53:21 I’ve got ADHD - any tips for focusing and staying on track? * 56:54 How do I convince my partner to accept more home automation? * 02:15 What kind of tools and processes do you use and find effective when learning? * Obsidian * Mind Map & Brainstorm Ideas - MindNode * 06:42 Would it make any sense to use the Fetch API with a long running stream? * 08:31 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Project Farm * Wes: Splatypus
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about CSS Color Functions, the benefits of dynamic css color, relative color syntax, color contrast, and color mix.
Show Notes * 00:26 Welcome * 00:49 Why we’re talking CSS Color Functions * 01:57 Benefits of dynamic CSS color * 03:14 Relative color syntax * 06:51 Color contrast * 09:26 Color mix
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
In this supper club episode of Syntax, Wes and Scott talk with Nicholas Zakas about his creation of ESLint, what’s coming up in ESLint, and his work as a coach and mentor for programmers.
Show Notes * 00:34 Welcome * 01:20 Guest introduction * Human Who Codes * Nicholas C. Zakas (@nzakas@fosstodon.org) * Twitter @slicknet * nzakas on GitHub * @humanwhocodes) on Instagram * Human Who Codes on YouTube * 04:24 Why did you want to build ESLint? * 09:08 How does ESLint work? * 13:25 How do you work on a project for a decade? * 17:12 At what point do you pay attention to JavaScript proposed changes? * 20:37 Config systems in JavaScript * 31:18 ESLint in Rust? * 41:07 Are we going to see ESLint for more languages? * 47:06 What kind of coaching do you do for programmers? * 02:46 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Apollo Neuro
Shameless Plugs * Understanding JavaScript Promises
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
In this episode of Syntax, Wes and Scott go through all the features of Sass and decide where we are at with Native CSS alternatives, giving each feature a rating of replaceable, plausible, or missing.
Show Notes * 00:11 Welcome * 01:17 Easter updates * 04:17 Getting into Sass * 06:03 What is PostCSS? * 09:52 CSS Variables * 13:49 CSS Nesting * CSS Nesting - Chrome Developers * postcss-plugins/plugins/postcss-nesting at main · csstools/postcss-plugins * 23:13 Colors * CSS5 Color Functions — Syntax Podcast 479 * 29:08 CSS Looping * 34:20 Mixins or extends * 39:34 CSS Partials * Features - PostCSS Preset Env - CSSTools * 44:29 CSS Math * 49:40 Functions * Is Houdini Ready Yet? * 52:04 Firefox and Safari support * 55:08 Back to Functions * 56:21 BEM Syntax * 58:51 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Solar Lantern * Wes: Cotton Candy Machine
Shameless Plugs * Scott: Sentry * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk through the differences between modals, popups, popovers, lightboxes, and dialog boxes.
Show Notes * 00:31 Welcome * 02:25 What’s popping up? * 02:59 What’s a modal? * 08:33 Pop overs and lightboxes * 10:41 Explicit dismiss and light dismiss * 11:30 Inert property * inert * 16:30 Backdrop pseudo element * Dialog with animation * 19:26 Dialog * 28:12:11 Making accessibility easier
const showButton = document.getElementById('showDialog'); const favDialog = document.getElementById('favDialog'); const outputBox = document.querySelector('output'); const selectEl = favDialog.querySelector('select'); const confirmBtn = favDialog.querySelector('#confirmBtn'); // "Show the dialog" button opens the modally showButton.addEventListener('click', () => { favDialog.showModal(); }); // "Favorite animal" input sets the value of the submit button selectEl.addEventListener('change', (e) => { confirmBtn.value = selectEl.value; }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', () => { outputBox.value = ReturnValue: ${favDialog.returnValue}.; }); 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
In this supper club episode of Syntax, Wes and Scott talk with Nate Weinert, creator of Tamagui, about what Tamagui is, how styling works in React native, building and designing the Tamagui website, and more.
Show Notes * 00:29 Welcome * 01:22 Who is Nate Weinert? * Nate (@natebirdman) * natew on GitHub * Tamagui — React Native + Web UI kit * tamagui: The worlds fastest React UI kit also happens to work on Native + Web seamlessly 🙏 * 02:34 What is Tamagui? * 04:02 How does styling work in React native? * 05:35 What is React native web? * 08:27 What does Tamagui do besides styling? * 14:38 How did you build and design the Tamagui website? * Stitches — CSS-in-JS with near-zero runtime * Next.js by Vercel - The React Framework * 16:50 What are the docs made with? * 20:25 What are Atomic Styles? * 26:16 How is layout handled in react native? * 29:26 Where are things going in the React world? * App.js Conference 2023 * react-native-reanimated - npm * 37:45 Supper Club questions * iTerm2 - macOS Terminal Replacement * 47:15 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * ABEO Footwear - Shop Biomechanical Sandals, Shoes and Orthotics
Shameless Plugs * foobully - Twitch * Tamagui — React Native + Web UI kit
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
In the 600th episode of Syntax, Wes and Scott talk about the big announcement about Syntax’s future, exciting new opportunities coming for the show, and more!
Show Notes * 00:11 Scott’s big announcement * 00:58 Our big announcement * 01:39 Guest introduction * David Cramer (@zeeg) * Application Performance Monitoring & Error Tracking Software | Sentry * Sentry (@getsentry) * 02:28 Background on how we got here * 05:53 What does this mean for the podcast? * 08:58 Why did Sentry want to partner with Syntax? * 15:39 What does this mean for more + better Syntax? * 18:56 We want to hear from you * 23:17 Clarifications * 23:42 What’s David Cramer’s background? * 31:44 Helping spread the Syntax vibe * World Famous HOTBOYS * 35:40 Silly questions * 37:52 What’s the ROI on Wes’ TikToks? * 38:37 Is Syntax going to become purple? * 40:46 The new Syntax website * 47:16 Giveaway coming! * 51:32 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * David Cramer: Vitest | A blazing fast unit test framework powered by Vite * Scott: Valley Heat Podcast - A Podcast About The Neighborhood * Wes: CCS - The Premier Online Skate Shop for Skateboards & Skate Gear
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk all things oAuth - what is oAuth? What terms do you need to understand when working with oAuth? And tips for working with oAuth.
Show Notes * 00:26 Welcome * Office Space * HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more! — Syntax Podcast 590 * 01:56 What is oAuth? * 05:30 Terminology in oAuth * 07:52 Once you have a client ID * 09:41 The callback URL * 12:11 The refresh token * 14:09 How a token could be stolen * 17:43 State token
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
In this supper club episode of Syntax, Wes and Scott talk with Fabian Kägy about modern WordPress development, including what the local dev experience is like, changes to the block editor, how version control is handled, and more!
Show Notes * 00:34 Welcome * 01:20 Who is Fabian Kägy? * Fabian Kägy * Fabian Kaegy (@fabiankaegy) * Fabian Kägy (@fabiankaegy) on Instagram * fabiankaegy on GitHub * 10up | finely crafted websites and tools * 03:32 What is the local WordPress development workflow like in 2023? * @wordpress/env * Free Local WordPress Development * 05:35 Why do people still want to use WordPress? * Builder.io - Drag & Drop Headless CMS * Website Builder — Create a Website in Minutes — Squarespace * Website Builder | Wix.com * Build optimized websites quickly, focus on your content | Docusaurus * 09:08 Changes because of the block editor * 11:50 Using a JSON file to configure design styles for your site * 13:48 What is it like to develop with headless WordPress? * 10up/10up-toolkit: Official 10up asset building toolkit. * 16:59 Are people using WordPress for applications besides websites? * 19:20 What does version control look like in WordPress? * 21:57 Are plugins using the database or the file system? * 23:38 Is jQuery still a must have for WordPress? * 25:30 How do you enqueue JavaScript? * 27:56 Does WordPress support live reloading? * 28:22 How can you host WordPress on the web? * WordPress Hosting | WP Engine® * WordPress for the Enterprise | WordPress VIP * 29:11 What is the editing experience like in WordPress in 2023? * The Composable Content Cloud - Sanity.io * WPML - The WordPress Multilingual Plugin * Polylang – Making WordPress multilingual * 34:01 How is WordPress handling CSS in 2023? * 41:44 How do you make WordPress fast? * Simplenote * Tumblr * Pocketcasts * 47:23 Where can you learn about WordPress development? * Learn WordPress - There’s always more to learn | Learn WordPress * 10up - Gutenberg Best Practices | 10up - Gutenberg Best Practices * 50:12 With blocks, do you write less PHP? * ACF | Advanced Custom Fields Plugin for WordPress * 50:59 Supper Club Questions * 55:09 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Watch Shrinking | Apple TV+
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
In this episode of Syntax, Wes and Scott answer coding questions posed by ChatGPT like what’s the difference between rem and em in CSS, the difference between a callback function and a promse in Node, what are Fastify plugins, and more!
Show Notes * 00:19 The premise for this Stump’d * 05:46 Scott’s weekend story * 09:36 What is the difference between a for loop and a while loop in JavaScript? * 11:11 What is the difference between the “em” and “rem” units in CSS, and when would you use each of them? * 13:15 What is the difference between a callback function and a promise in Node.js? * 14:57 In JavaScript, what is the difference between a function declaration, a function expression, and an arrow function, and how do they affect the concept of hoisting? * 18:39 How do you define a custom scalar type in GraphQL? * 21:30 With Deno, can you provide an example of an experimental API that requires the “–unstable” flag and explain its purpose? * 26:59 What’s the difference between a div and a span? * 28:01 What is aspect ratio? * 29:07 If it’s not supported by all browsers, how could you maintain aspect ratio? * 30:11 Can you explain the purpose of the beforeUpdate lifecycle function in Svelte, and provide a simple use case for it? * 32:33 What is the difference between unknown and any in TypeScript, and when should each be used? * 34:42 In TypeScript, what is a mapped type, and how can you use it to create a new type that makes all properties of an existing type optional? * 36:21 What are Fastify plugins, and how can they be used to extend the functionality of a Fastify application? * 37:57 In React, what is the purpose of the React.memo higher-order component, and how does it help improve the performance of a functional component? * 39:53 How would you create a custom HTML element that is styled with CSS and has dynamic behavior using JavaScript? * 41:57 What is the Intersection Observer API, and how can you use it to implement infinite scrolling in a web application? * 49:00 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Rodge Tapes * Wes: Shenzhen Rebow Technology - Neon Sign
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the fact that import maps are in Safari Technical preview, and what that means for web developers.
Show Notes * 00:26 Welcome * 02:16 Import maps just dropped * 04:09 Which browsers support it? * 06:01 What is a map? * 06:40 How does the syntax work? * 09:35 What about dependency resolution? * 10:25 What about bundlers? * 13:17 How does this work with Deno? * Deno — A modern runtime for JavaScript and TypeScript * Import Maps | Manual | Deno * whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api * 20:12 What about with node? * Support import maps and bare import specifiers · Issue #43326 · microsoft/TypeScript * Policies | Node.js v17.9.1 Documentation * 21:22 What about Typescript? * 22:43 Downsides to import maps
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
In this supper club episode of Syntax, Wes and Scott talk with Justin Fagnani about working with web components, using Lit, how routing and state are handled, thoughts on signals, and what is the future of web components?
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:49:11 Guest introduction * 01:03:00 Sponsor: Sentry * 02:02:11 Why do people use React when we have web components and lit? * 03:57:14 Who is Justin Fagnani? * Justin Fagnani * Justin Fagnani (@justinfagnani) * Justin Fagnani · GitHub * Justin Fagnani - Fosstodon * Lit (@buildWithLit) * Lit * Google App Maker * 04:55:02 What are web components? * The Extensible Web Manifesto * 05:59:08 What is the shadow dom? * 08:56:02 Was there an intention for a layer on top of web components? * 13:22:09 What is Lit? * 16:19:23 What are the benefits of using a library for web components? * Custom Elements Everywhere * 21:20:14 Why would write in React and not in web components? * 24:24:18 How does CSS work with web components and Lit? * 28:00:14 Using constructable stylesheets * ::part * Constructable stylesheets/ * 29:58:18 Does Lit do anything with CSS? * 32:01:01 Does Lit do routing? * Lit Mobx * 34:06:02 How does Lit work with state? * 34:52:15 What about signals? * 38:49:00 Is Server Side Rendering possible with web components? * 41:03:07 What websites are using Lit and/or web components? * 44:26:08 What’s the difference between Lit and Polymer? * 45:44:17 What is the future of web components? * 48:09:14 Supper club questions * GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts * 56:36:20 SIIIIICK ××× PIIIICKS ××× * 55:27 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * The Last of Us | Official Website for the HBO Series | HBO.com
Shameless Plugs * Lit * Lit Discord
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
In this potluck episode of Syntax, Wes and Scott answer your questions about what to do with client projects, testing animations, evaluating front-end frameworks, tools to use when learning, and coding related injuries.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:10 Welcome * 00:25 Sponsor: Sentry * 01:22 Landscaping update * 02:27 What do you do when you are done a client project? * 10:09 Should I keep animations in our tests so our tests match prod behavior? * 14:05 How does ChatGPT fill the responses to the prompt? * 17:14 What is the best way to evaluate and choose a front-end framework for a project? * 21:10 Should functions only be used strictly for code that is going to be re-used? * 26:03 What kind of tools and processes do you use when learning? * Obsidian * Roam Research – A note taking tool for networked thought. * 30:19 What are your opinions on using “display: grid” simply to be able use the gap property on the elements inside? * 33:57 What do you guys think of being a 1-language dev? * 36:38 What are some tips you have to push back on requirements from clients? * 41:11 Have you guys ever had any coding related stress injuries, like back issues or carpal tunnel? * MoErgo Glove80 Wireless Split Ergonomic Keyboard * GitHub Next | Hey, GitHub! * 48:41 What do you think of using “Feature Flags” in the codebase to enable / disable features at runtime? * 51:19 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: History for Granite * Wes: GreatScott!, bigclivedotcom
Shameless Plugs * Scott: LevelUp Discord * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about what can be done with the OpenAI API, how to get started with it, pricing, tuning your model, and gotchas for getting started with the OpenAI API.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:26 Welcome * 01:17 Sponsor: Sentry * 02:39 What is the OpenAI API? * 05:11 Getting started with the API * 07:41 How run OpenAI * OpenAI API * 14:16 GPT4 update * 17:58 Tune your models * 19:46 Generating questions with ChatGPT * 24:30 Speech to text * Otter.ai - Voice Meeting Notes & Real-time Transcription * Descript | All-in-one video & podcast editing, easy as a doc. * 26:12 Related API * 27:33 LangChain * 32:12 Save your replies
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
In this supper club episode of Syntax, Wes and Scott talk with Travis Neilson about his work at Google, YouTube music, and where AI is at now, and where it’s headed in the future.
Show Notes * 00:37 Welcome * 00:55 Guest introduction * Travis Neilson (@travisneilson) * Travis Neilson dot com * Travis Neilson on Skills Gap, Design, Focus and Working at Google — Syntax Podcast 142 * Awwards Conference talk * https://www.youtube.com/LittleMusicBoxes * 06:29 Convos about AI * 07:49 How do we keep humanity with AI? * 15:42 Is this the printing press or is this putting everyone out of a job? * 19:21 What is Google using AI for these days? * 25:59 How do we keep human interface via AI? * 31:18 What is the evolution of AI chat windows? * 34:05 How do you nourish your AI with data? * 39:59 Halluncinations in AI * 47:46 What models are exciting to you? * 52:01 We’re building the window for the next generation * 54:55 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * The Age of Spiritual Machines * The Singularity is Near * The Shape of Design
Shameless Plugs 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
In this episode of Syntax, Wes and Scott answer your questions about learning web dev at an older age, making your apps look better, building a video streaming site, mono repo vs regular, and more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:11 Welcome * 00:31 Sponsor: Sentry * 01:43 DST update * Tales of Taboo * 03:45 Is it too late to learn web dev at an older age? * 10:20 How do people produce work so quickly? * 13:47 How can I make my web apps look better visually? * Dribbble - Discover the World’s Top Designers & Creative Professionals * Tailwind UI - Official Tailwind CSS Components & Templates * CSS · Bootstrap * 18:41 Not losing the niceties with not having to do a full page load * 22:23 Should I use a script to generate an index JS/TS file? * 24:55 If you were going to make a video streaming website, what technologies would you use? * The API to Video | Mux * Vimeo – Video Experience Platform * Live Streaming on AWS | AWS Solutions * Video on Demand | AWS Solutions * Cloudflare Stream | Video streaming made easy and affordable at scale * 29:11 What should I do if my boss wants me to move up the business ladder? * 31:58 I’m confused about hydration in frameworks like SvelteKit. * 37:07 What’re the advantages of a mono repo over a regular one? * 39:50 Is it better to stay put at a place even if you’re unhappy right now? * 43:13 How should I ingest tv scripts into a database? * 46:24 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Stronger By Science Podcast * Wes: Merten and Storck Carbon Steel
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about why you might need to tunnel to your local computer, and how to set that up securely.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:24 Welcome * 01:09 GitHub tarball web streams * 05:09 Sponsor: Sentry * 05:48 Why would I need security locally? * Caddy Server * 11:23 Cookie issues * 13:04 Examples of things that need a secure context * MDN Features restricted to secure contexts * 14:58 What is tunneling? * 19:22 Cloudflare Tunnels * Cloudflared * Cloudflare Tunnel * 20:50 nGrok * ngrok * 23:22 Local tunnel * Local Tunnel * 24:55 Tunnel to * Tunnel to dev - Expose your local web server to the internet with a public URL * 26:02 Cloudflare subdomain
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
In this supper club episode of Syntax, Wes and Scott talk with Dax Raad about building on serverless infrastructure, Next.js, and SST.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:36 Welcome * 01:05 Sponsor: Sentry * 02:05 Who is Dax Raad? * Dax on Twitter * thdxr.com * Tomorrow.fm Podcast * SST.dev * 04:22 Why doesn’t AWS have a simple way to build on top of it? * 07:46 What is Open Next? * Vercel * Next.js * Open-Next.js * 10:25 How many people are involved in building Open Next? * 11:14 Mapping Next.js to Amazon products * 14:25 What is the edge? * 18:56 Pricing in serverless * 23:33 What about image assets? * 25:02 Is the CDK a layer on top of something Amazon is doing? * Amazon CDK * 27:23 What is terraform? * Terraform * 28:50 What is SST and why SST? * 30:54 Do I build with SST or on top of SST? * 32:06 How do you do local development with SST? * 37:01 What about databases with SST? * 40:12 What about build pipelines? * 42:28 What is Seed? * Seed * 43:52 Any advice for someone learning AWS? * SST on YouTube * 46:05 Supper Club questions * Neovim * Toyko Night theme * Nerd Fonts * Astro * TypeScript * Alacritty * i3 * Cloudflare * Inside the Meteoric Rise—and More Epic Flop—of HQ Trivia * 52:45 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Planetscale
Shameless Plugs * Rebase.tv * @RebaseTV on Twitter * Tomorrow.fm episode on Rebase.tv
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
In this episode of Syntax, Wes and Scott are in the same room together brainstorming new ideas for the Syntax.fm website: search, transcripts, video, tags, audio player, podcast hosting, and more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 01:08 Sponsor: Sentry * 01:43 Brainstorming for Syntax’s new website * 02:27 Are there good podcast websites out there? * 03:26 Homepage design * 07:33 How would you handle login? * 09:40 Search on the site * SvelteKit docs * Flexsearch * 13:59 Transcripts * Open AI Whisper * Whisper AI for podcasters * 18:25 The player * 21:11 Tagging * 23:45 Video * Linus Tech Tips - WAN Show * 27:45 Show notes * 29:57 Surfacing good content on the podcast * 35:30 Interactions * 36:25 Deploy to Podcast Host * Libsyn * Editor Chris on Mastodon * 38:43 Code base * Syntax website on GitHub * 45:21 Listener feedback * 46:27 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Screen door dog * Wes: Apple Watch bands
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes explain the what, why, and how of web streaming, and some of the jargon you might encounter with web streams.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:26:11 Welcome * 00:59:07 Sponsor: Sentry * 01:39:17 What are Web Streams? * 03:15:11 Why are web streams picking up steam lately? * 04:41:21 How are web streams streaming? * 09:28:11 Searching a database can use streaming * 13:07:11 Web stream jargon * 18:06:11 FileReader is a Stream * 19:31:05 Other Types of Streams * Cloudlfare HTML Rewriter * 21:50:05 ReadableStream and Writable Stream * 27:23:00 Creating a Writable Stream * 28:39:11 TextDecoderStream
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
In this supper club episode of Syntax, Wes and Scott talk with Eric Sartorius about his life as a digital nomad - including recently climbing Kilimanjaro, his tips for travel deals, crazy experiences while travelling, and what he brings on the road with him.
Show Notes * 01:02 Guest introduction * EricSartorius.com * Eric on GitHub * PureFunc * Train Surfing * Get Stream * 02:51 Where have you travelled? * 04:27 What are the challenges of being a digital nomad? * 09:08 How do you research before travel? * 13:04 How do you approach applying for a job? * 21:10 Do you travel with other digital nomads? * R16 video * 22:43 What are the best locations you’ve been? * 24:21 What about health and insurance? * Tiny Toones * TSA post raw meat on carousel * 28:21 What motivated you to want to climb Kilimanjaro? * 41:14 What gear do you travel with for web dev? * Osprey Talon 33 * Packing cubes * Outlier * Google Fi * Google Flights explore * 51:12 Using credit card points for flights * 54:45 How do you handle customs? * 00:13 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Comfort 2.0 Czech sock shoes
Shameless Plugs * PureFunc * @TheEpicLife on Instagram * Pamoja Safaris
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
In this episode of Syntax, Wes and Scott talk through all the reasons your website might be slow, and how you can troubleshoot a slow website such as issues on the server, large assets, caching, CSS, JavaScript, latency, and more.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:11 Welcome * Glove 80 keyboard * Raycast * 03:06 Sponsor: Sentry * 05:15 What makes a website slow? * Uses.tech * 06:29 Server Generation Times * 13:33 Large payloads * Redis * Gzip * Brotli compression * Cloudflare * Cloudinary * 18:13 Assets being too large * 23:01 Caching assets * 28:25 CDN * 30:35 Caching 101 * 37:04 Render blocking requests * 40:01 CSS * 42:25 JavaScript * 44:51 Latency * 49:17 Flash of dark mode or unsigned out * 55:00 Data uris * Content-visibility * vite-plugin-singlefile * Pool in your URL * 58:11 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: 3Blue1Brown * Wes: Suavecito Firme Clay Pomade
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about two new services that allow you to run Node in the browser, WebContainers + NodeBox. Why Node in the browser? How does it work? And what are the differences and limitations of the services?
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:25 Welcome * 01:14 Sponsor: Sentry * 02:45 Webcontainers and NodeBox * Introducing WebContainers * Code Sandbox * CodePen * Replit * GitHub Codespaces * 06:42 Why Node.js in the browser? * 11:08 How does it work? * 13:10 Clientside APIs * 14:27 Using iFrame to proxy messages * 17:39 Are these open source? * 19:22 Differences between the two services * 21:10 Wes to Figma, Scott to Penpot * Figma * Penpot * 24:51 Limitations
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
In this supper club episode of Syntax, Wes and Scott talk with Steve Sewell about Builder.io, Qwik, Partytown, and the tricks and tips he’s learned in building apps for the modern web.
Show Notes * 00:37 Welcome * 01:14 Guest introduction * Steve on Twitter * Steve on GitHub * Builder.io * Builder.io/demo * 04:07 Builder works with any tech stack? * 06:29 Where is the structure of the site coming from? * 07:28 What is Builder.io? * 11:34 What’s the workflow for updating content? * 13:03 What is Builder built in? * Mobx * 14:36 Moving from Figma to HTML * 18:41 Is an app like this divs all the way down? * 24:55 Stories of browser gremlins building? * 26:29 Advice for anyone building drag and drop * Fullstory * 29:04 Does FPS play a part in development? * 33:31 Do you use SVG? * 36:15 Where does Qwik and Partytown fit into all of it? * Qwik * Partytown * 46:45 How does accessibility play into Builder? * 49:44 Supper club questions * 54:30 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Dead Space Remake
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
In this episode of Syntax, Wes and Scott talk about the current landscape of AI, how AI is trained, is AI going to take your job, who’s going to train AI, and adding AI to your applications.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:11:10 Welcome * 01:58:01 Sponsor: Sentry * 03:16:05 What this episode is not going to be * 07:36:11 The current landscape * Chat GPT * GitHub Copilot * Warp Completions * Midjourney * Bing AI * From Bing to Sydney * Why a Chat with Bing Left Me Deeply Unsettled * Tensorflow * Stable Diffusion * Amazing AI * Dall E * 15:26:11 Timeline of growth of AI * AI Timeline * 16:24:11 What is a model for AI? * 24:20:11 How do you use AI? * 33:14:00 Code brushes * 35:57:18 Midjourney * Yandex * 40:13:18 Is it going to take your job? * Canva * Cal * 50:22:19 Cost prohibitive * 52:26:20 Who’s going to train the robots? * 57:29:12 Adding AI to your apps * 58:50:11 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Motion sensor * Wes: Apple Watch Ultra
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the difference between sloppy code and clean code, how to establish rules for your code base, and how to enforce your rules.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:24 Welcome * 00:46 Sponsor: Sentry * 01:51 Uses performance issues * Uses.tech * 04:23 Understand Sloppy Code * 10:17 Syntax website timestamp issue * 12:56 Establish rules to fix sloppy code * 16:35 Adding a feature, do you refactor an unrelated function? * 23:07 How do you enforce rules? * GitHub Actions
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
In this supper club episode of Syntax, Wes and Scott talk with Fred Schott about all things Astro v2.0. What is Astro and why should you use it? How do islands work? Images, edge, AI, error overlays, hybrid rendering, and more!
Show Notes * 00:40 Welcome * 01:08 Guest introduction * FredKSchott.com * @Fredkschott on Twitter * Fred on GitHub * 02:17 What is Astro and why should someone use it? * 04:57 What can you build with Astro? * 06:11 What’s an island in content? * 09:43 How do routes work with Astro? * 12:30 How is Markdown handled in Astro? * mdxjs * 14:32 How does Astro work on the edge? * 18:15 How does Astro v2 handle data fetching? * 23:25 Integrations with Astro * 26:38 Astro AI bot? * AI Langchain * 30:40 Error overlay design * 36:10 What are some of the most important upgrades in v2? * 37:18 Hybrid rendering * 40:27 Astro’s image component * Squoosh * 44:39 What happened to snowpack? Pikapkg? * 46:48 What is the financial model for Astro? * 50:28 Supper Club questions * Obsidian
××× SIIIIICK ××× PIIIICKS ××× * Chat Langchain
Shameless Plugs * Astro * Astro Discord
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
In this episode of Syntax, Wes and Scott talk about why they’re digging Warp as their terminal app of choice, what the terminal is, and some of their wishlist items for Warp.
Show Notes * 00:09 Welcome * 02:11 Disclaimers * 04:17 What is the terminal? * 06:54 What we’ve used for terminal * Get Warp * Hyper Terminal * iTerm * Alacritty * 11:14 Terminal terminology * CommandLinePowerUser.com * WSL * OhMyPosh * OhMyZsh * Starship * Ion * 17:35 The basic features of Warp * 20:45 Autocomplete issues * Fig * 25:06 Sticky header * 26:13 Blocks * 29:17 The prompt * 30:38 Sharing blocks and live sessions * 32:29 AI Command Search * AI Command search * 35:51 Remote SSH * 37:53 Window management * Launch configurations * 38:42 Workflows * 40:19 The command palette * 42:36 How does Warp make money? * 43:54 Warp requires an account * 46:09 Annoyances and wishlists * 58:29 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: 50 Pokemon Cards for $5 * Wes: iPad Sorter Station
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the reasons why you should log errors, how it’s not just for debugging, where to save logs, and apps and packages to help with logging.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:25 Welcome * 01:37 Sponsor: Sentry * 02:16 What is logging? Why log? * 04:59 Logging isn’t just for debugging * 08:22 What do we log? * 13:34 What not to log * 14:58 Development, staging, and production * 17:36 Logging bots * 19:33 Where to put logs * 20:59 How to log * Log Tail * Paper Trail * Sematext Logs * DataDog * Winston * Pino
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
In this supper club episode of Syntax, Wes and Scott talk with Ryan Carniato about Solid.JS, SolidStart, how web components work with Solid, why he chose JSX, and what the future of Solid is.
Show Notes * 00:37 Welcome * 01:38 Who is Ryan Carniato? * @RyanCarniato on Twitter * Ryan on Dev.to * Solid.JS * 02:37 Why did you build Solid? * Knockout.JS * Marko JS * 09:15 What is Solid? * 12:55 What does it mean to compile to vanilla JavaScript? * SolidStart * Tanstack Query * 19:39 What are observables and signals? * 27:17 How are web components used inside of Solid? * 29:38 Why aren’t we using web components more? * 32:37 Why would someone pick SolidStart vs Solid? * 39:07 Why did you choose JSX? * 44:45 How did you build live code examples into documentation? * SolidJS Docs * Solid-Movies.app * 47:19 What is Solid.JS built on? * 53:36 What is the future of Solid? * 00:39 Supper club questions * 02:57 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Alice in Borderland
Shameless Plugs * Ryan on Twitch * Ryan on YouTube
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
In this potluck episode, Scott and Wes talk home electicity, and then answer your questions about native web components, JS class mixins, JavaScript for marketers, managing application secrets, and more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:10 Welcome * 01:09 Sponsor: Sentry * 02:18 Electrical house update * Klien Wirestrippers * 07:45 Custom Syntax podcast browser * Custom Syntax browser * 09:29 When using browser native web components (i.e. extends HTMLElement), should the whole application be wrapped in a component tree similar to how React apps do it? * Deno * Using Web Components with Next or any SSR Framework * 16:12 Should I avoid JS/TS class mixins? * 21:07 Is it acceptable to have any string value as a value for a CSS custom property? * 26:48 Should agencies consider building marketing sites with JS frameworks or is Wordpress still the best option here? * 33:56 What are the main things to think about when laying the foundations for an app or project that will hopefully grow into something big? * 41:24 Will Javascript skills give me an edge over other local digital marketers? * WordPress * Ghost * 46:00 What tool, if any, do you use for publishing packages? * 50:19 Do you have any suggestions on how I can find time to code more? * Bit * 54:17 how do you both manage your application secrets (API keys, database credentials etc) when deploying to Digital Ocean or Linode? * 58:52 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Physical 100 * Wes: Leviton D23LP-2RW Decora Smart Wi-Fi Mini Plug-In Dimmer
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
In this Hasty Treat, Scott and Wes talk about what you can do to better organize your config files.
Show Notes * 00:21 Welcome * 02:20 Electric car ski tripping * 05:01 Why config files? * 07:47 Custom Vite config files * Wes’ Vite config
define: { __VERSION__: JSON.stringify(process.env.npm_package_version), }, * 11:16 Node has failed us * 13:30 Cosmic config * Cosmiconfig * 16:46 File nesting * 21:01 Standardize on a format
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
In this supper club episode of Syntax, Wes and Scott talk with Miško Hevery about why developers should check out Qwik, the benefits of lazy loading, sharing state between components, and other Builder.io projects like Partytown and Mitosis.
Show Notes * 00:35 Welcome * 01:19 Guest intro * Miško Hevery * @MHevery * 01:58 What is Resumability? * 05:06 What is Qwik? * Qwik * Qwik City * 07:03 Why would you want to make a component resumable? * 12:08 Qwik code can be lazy loaded * 15:28 How is server side rendering handled? * 18:12 How does Vite help? * 22:40 A bit more about hydration * 31:03 How does the server collection information? * 32:11 How do you share state between components? * 34:45 How is data fetching handled? * 37:47 Why are you using JSX? * 41:53 Dealing with components in other frameworks * Mitosis * 49:21 What is Partytown? * Partytown * 54:30 Supper Club questions
××× SIIIIICK ××× PIIIICKS ××× * Thinking Fast and Slow
Shameless Plugs * Builder.io
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
In this episode of Syntax, Wes and Scott talk about their respective processes for converting JavaScript to TypeScript in their projects, why you might want to, and tooling for moving to TypeScript.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:10 Welcome * 00:36 Sponsor: Sentry * 02:23 Electrical updates * 08:16 Moving to TypeScript * 09:34 What are you doing with GraphQL? * GraphQL Codegen * 11:35 Why move to TypeScript? * 12:00 Refactoring is easier * 14:58 Better DX * 18:42 Adding a tsconfig.json file * 22:43 Figure out your tooling * 23:50 Type Checker * 25:13 MongoDB to TypScript Generator * 26:44 Eslint-Typescript * 28:03 Deprank * Deprank * 29:18 Refactor and rename to .ts * 32:40 Typing your code * 43:04 Utilities and unions * 46:11 Where do you put your types? * 49:29 Typing Dependencies * Definitely Typed * Raycast Search npm * 54:26 Global types * 01:08 Now what? * 03:58 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Elegrp USB C Walloutlet * Wes: Barrina Shop Lights
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk through quick tips to improve performance of your website, and the tools available to help diagnose and fix perf issues.
Show Notes * 00:25 Welcome * 00:50 Polish And Perf explained * 02:05 What kinds of tools are available to improve performance * Lighthouse in Chrome * PageSpeed * 09:32 Identify route caching and http caching * 14:25 Partytown * Partytown * 15:19 Unnecessary network calls
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
In this supper club episode of Syntax, Wes and Scott talk with Tim McNamara, author of Rust in Action about what Rust is, how to get started learning Rust, and ideas of good projects to begin learning Rust with.
Show Notes * 00:37 Welcome * 01:26 Guest introduction * Rust in Action * Tim on Twitter * Tim on YouTube * 03:51 What was it like to write a book on Rust? * 07:52 What drew you to Rust? * 13:01 The approachability of Rust * 21:41 What’s a good introductory project with Rust? * 25:15 Why would someone learn Rust? * It’s time to try WASM * 40:23 What is a crate and cargo in Rust? * 44:17 Running Rust in various places * 50:53 Should the average web developer try Rust? * 52:13 Supper club questions * 54:17 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * kokako
Shameless Plugs * Tim McNamara - How to learn Rust
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
In this episode of Syntax, Wes and Scott talk through what ESM is, and why you want to move your projects to ESM.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:10 Welcome * 00:51 Sponsor: Sentry * 02:32 Our experiences with ESM * 06:54 Why ESM? * 11:42 Top Level Await * 16:16 Assert Import type eventually * Scott’s Vite chunk import map * 21:00 Converting code to ESM * 27:22 .JS on end of files * 32:12 Imports and exports * 37:52 TypeScript * 40:24 Bundling / Transpiling * Vite Node * 43:42 Dependencies * Sindre thread * 45:16 Publishing * 53:25 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Egg dispenser * Wes: Pure Cinema Podcast
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk through their wishlist for CSS in 2023 including mixins, range selectors, fit text, robust color functions, overflown, and more.
Show Notes * 00:26 Welcome * 01:09 Snow skate update * 03:01 Mixins * 05:06 Range selector * 09:36 :first-of-column :last-of:column / row * Ability to target items in nth-row of autofilled, implicit grid * 11:43 Fit Text * 13:34 Overflow-x, overflow-y control * 15:36 Full support for CSS with Inline Styles * 16:24 nth-of-found() * 18:18 Robust Color functions * 22:19 resize: both but no overflow or scroll * 23:39 Animate height auto * 23:57 Full attr() support * 25:07 CSS References * CSS References * 26:59 overflown + :stuck * 28:56 Multi-line selectors * 30:35 Container Queries - select the container itself * 32:04 :is-scrolled - select a container when it’s scrolled
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
In this supper club episode of Syntax, Wes and Scott talk with Caleb Porzio about Livewire, Alpine.js, what is it with PHP devs making cool stuff, TypeScript thoughts, and more.
Show Notes * 00:36 Welcome * 01:05 Buffalo and Canada * History of Target in Canada * 06:23 Who is Caleb Porzio? * @CalebPorzio on Twitter * 09:26 What is Livewire? * Livewire * Alpine.js * HotWired * 12:58 Are these MVC frameworks? * 18:11 What is the process behind the scenes? * 20:36 How does Hotwire handle rendering? * 25:38 What is Alpine.js? * 33:19 Why are PHP devs making interesting things? * Laravel * Tailwind * 40:32 What is a nextTick in JavaScript? * Microtask Guide * 46:20 TypeScript thoughts * 48:05 Server side rendering? * Morph * 49:25 Supper Club questions * Ergodox Keyboards * Glove 80 Keyboards * Natty Theme * MonoLisa * 59:40 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Ugmonk Analog
Shameless Plugs * Make VS Code Awesome * Alpine.js * Livewire
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
In this episode of Syntax, Wes and Scott look through the results of the State of JS survey for 2022.
Show Notes * State of JS 2022 * 00:26 Welcome * 01:24 Thoughts on the survey in general * 04:24 Country of origin * 05:53 Salaries * 08:14 Higher education * 08:58 JavaScript features * 15:41 Browser APIs * 21:15 Library Usage * 26:11 Interest in frontend frameworks * 28:40 Framework usage * 31:41 Rendering frameworks * 34:57 Build tools usage over time * 39:37 Monorepo tools * Moon * 46:41 Backend frameworks * Civet * 47:42 JavaScript run times * 51:01 TypeScript JavaScript balance * 52:17 JavaScript flavors * 57:03 Resources * Fireship Dev
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes explain what container queries are, use cases for them, new units of measurement, and possible issues with container queries.
Show Notes * 00:28 Welcome * 01:46 What are Container Queries? * Tweet about Container Queries * 03:28 Use cases for Container Queries * Home Assistant * Can I Use? * 06:11 The syntax of container queries * 13:42 New units * 22:27 Old iOS versions may cause issues
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
In this supper club episode of Syntax, Wes and Scott talk with Simen & Espen from Sanity about what Sanity is, who uses Sanity, what is a content lake, how Sanity works with React or TypeScript, what GROQ is, how portable text works, and of course, the supper club questions.
Show Notes * 00:36 Welcome * 01:37 Who are you and what is Sanity? * 04:04 What kinds of services use Sanity? * 06:18 What is a content lake? * 07:26 Enabling code access to Sanity Studio * 13:12 Implenting Sanity into a React app * 14:49 What is GROQ? * 21:04 Is GraphQL still the best way to query data? * 25:32 Workflows in Sanity * 27:48 What is portable text? * 35:19 How does Sanity work with TypeScript? * 38:51 Ecommerce options with Sanity * 41:29 Supper club questions * 50:33 SIIIIICK ××× PIIIICKS ××× * Syntax 533 - Zod Schema * Elden Ring * Risk of Rain * Sharp * Syntax 526 - Supper Club with on TRPC
××× SIIIIICK ××× PIIIICKS ××× * Espen bread * Medium Tall
Shameless Plugs * Sanity Syntax code
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
In this potluck episode of Syntax, Wes and Scott answer your questions about HTML tags, budgeting, recession proofing your business, software dev vs software engineer, taking payments, and more.
Show Notes * 00:11:11 Welcome * 01:29:11 When should you use article and section in HTML? * 08:03:08 Does your business suffer from the economic recession? * 15:47:18 How do you manage your money or budget? * PlainTextAccounting * YNAB * Copilot * 20:51:11 What should I consider using? There’s a lot of options. CommonJS, AMD, UMD, es modules? * 26:30:09 What’s the difference between a software developer and software engineer? * 30:36:11 How do you handle payment for your course platforms? * Braintree * Gumroad * Paddle * Stripe * 38:33:23 Why is this false? “I’m a string” instanceof String * 40:38:22 Do you all use Mac spaces for organizing windows? * Arc * 45:55:21 Do you have any tips that would help my front end team avoid rendering a DOM with invalid element nesting? * 48:48:14 Would you do an episode commenting on the CSS Nesting survey released this week? * Help Choose CSS Nesting Syntax * 53:57:01 How do you guys go about prioritizing your work? * Height.app * Things * 58:50:19 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Bundle of Eucalyptus * Wes: Recycling bin brackets
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the differences between building it yourself vs paying for a service to do it for you, such as cron jobs, checkout, hosting, images, video, and more.
Show Notes * 00:24 Welcome * 03:19 Buying vs building topic * 07:09 Strategy * 09:50 Escapability * 14:56 Services You Could Use * Sentry * Postmark * 16:34 Efficiency of using a service * 18:08 Cron jobs * 20:43 Checkout * Recurly * Lemon Squeezy * Stripe * Braintree * 24:29 Hosting * 26:00 Screenshots and open graph images * Cloudinary * Vercel OG * Puppeteer * 29:25 Search * Algolia * Elastic * MongoDB * 33:32 Auth * PasswordJS * 36:55 Images * 39:46 Video Hosting * Vimeo * Mux * Amazon Kinesis
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
In this supper club episode of Syntax, Wes and Scott talk with Katherine Mello about her journey into coding from liberal arts to bootcamp education, data visualization, and coding for a sustainable focused company.
Show Notes * 00:34 Welcome * 01:10 Guest introduction * Rolling With Kat * 03:05 Bag milk? * 04:34 What is Tangible Materials? * Tangible Materials * 07:27 How did you end up at Tangible? * Full Stack Academy * 10:05 Are bootcamps worth it? * 14:46 How important were in person classes to you? * All We Can Save * Braiding Sweetgrass * 20:46 What do you enjoy about data visualization? * D3 * Data visualization society * Three.js * Observable * Color Wheel * 27:21 Working at WeWork * WeWork: Or the Making and Breaking of a $47 Billion Unicorn • Official Trailer * 34:14 What is your tech stack at Tangible? * 38:26 What backend would Wes use for a project? * Svelte Kit * Supabase * Super Bass * 42:10 Is there environmental web hosting? * 43:47 Supper Club Questions * Uplift Desks * 50:22 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Climavores
Shameless Plugs * Drinking from the Garden Hose * Hiring at Tangible Materials
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
In this episode of Syntax, Wes and Scott talk through their goals for 2023 including coding, tooling, courses and platforms, social media, and fitness.
Show Notes * 00:17 Welcome * 02:38 What’s a cantina? * 06:33 Scott’s coding goals * Animated grid layouts * Tauri * 14:39 Wes’ code goals * Uses * Stripe * Stripe Elements * Shoelace * 23:17 Tooling * Vite Plugin List Directory Contents * 26:39 Scott’s courses and platform * LevelUp.video * 29:36 Wes’ courses * Wes Bos Tutorials * 31:11 Scott’s fitness goals * 35:55 Wes’ fitness goals * 39:44 Apple Watch for fitness * 41:54 Syntax podcast goals * 50:13 Scott’s social media goals * Scott on TikTok * LevelUp Newsletter * 52:35 Wes’ social media goals * Wes on TikTok * 58:02 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Menu * Wes: JB Weld Clearweld, big version
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about Satisfies and as const.
Show Notes * 00:25 Welcome * 02:04 Xmas recap * Peloton * 04:09 Satisfies and as const * 06:16 What is const? * 10:30 Helping with currency * 12:44 Bos monster server update * 14:13 Satisfies
export const currencies = { USD: 'US Dollars', CAD: 'Canadian Dollar', EUR: 'Euro', } as const; export type Currency = typeof currencies; export type CurrencyCode = keyof Currency; 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
In this supper club episode of Syntax, Wes and Scott talk with Sarah Drasner about her new book, Engineering Management for the Rest of Us, what it’s like moving from management to coding and back, the book writing process, and her Fortnite VS Code theme.
Show Notes * 00:36 Welcome * 01:59 Who is Sarah Drasner? * @Sarah_Edo on Twitter * @Sarah_Edo on Mastodon * @Sdras on CodePen * @SDras on GitHub * SarahDrasnerDesign.com * Google * Engineering Management for the Rest of Us * Amazon: Engineering Management for the Rest of Us * Netlify * 05:25 How did you figure out what to do in management? * 07:20 How do you get out of engineer’s way? * The Engineer Manager pendulum * 09:39 Do you spend time on making the person happy in the job? * 15:51 Should managers code? * 19:16 Was it difficult to step out of coding? * 21:07 Why do people leave jobs? * 24:04 Dealing with conflict and reorgs * 28:36 What makes a good retro? * 31:25 What was your process for writing a book? * SVG Animations: From Common UX Implementations to Complex Responsive Animation * Scrivener * Egghead * Mayfly Design * Sarah Drasner’s articles on CSS Tricks * Sarah Drasner’s articles on Smashing Magazine * 43:44 Supper Club questions * Sarah Drasner’s VS Code snippets and themes * Creating a VS Code theme * Wes Bos Cobalt 2 VS Code theme * Partytown beta * 53:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Paper Koi Lantern: a DIY Kit
Shameless Plugs * Engineering Management for the Rest of Us
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
In this episode of Syntax, Wes and Scott talk about their predictions in web development for 2023.
Show Notes * 00:07 Welcome * 01:25 SSR JS sites more the norm * 03:32 React doing forms * 05:39 TypeScript Inferred becomes hot * 08:11 Deno gets hotter * 12:51 JS Runtimes Mature * HTMX * 15:00 We will see a new TS Type Checker written in Rust * 19:20 New JS APIs * 23:37 Writing towards Winter CG Spec Popular. “Worker Ready” script * STC * 27:05 A new JS framework * SolidJS * Qwik * 29:44 Page Transitions API * 32:40 Scott was right / Scotts gonna be right * 34:06 Rust becomes more Popular * 36:00 React Beta Docs launch after 5 year dev cycle * 37:45 CSS Container Queries in Production * 41:07 Svelte and Sveltekit Glow Up * 43:38 CSS Subgrid * 49:19 WASM * 51:51 AI * Open AI * 53:16 Houdini * 54:30 People souring on React, Eslint * 57:47 Machine learning * 01:08 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Cron * Wes: Wyze Headphones
Shameless Plugs * Scott: LevelUp SvelteKit Tutorial * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk through some TypeScript Fundamentals around type narrowing, type guards, and type predicates.
Show Notes * 00:24 Welcome * 01:40 Rocking predicates * 02:54 What is a type in TypeScript? * 04:11 Type Narrowing * 08:18 Type Guard * 16:19 Type Predicates
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this supper club episode of Syntax, Wes and Scott talk with Kilian Valkhof about his work on Polypane, a browser for developers. How is Polypane built? Why does he have a focus on accessibility in Polypane?
Show Notes * 00:39 Welcome * 01:48 Who is Kilian Valkhof? * kilianvalkhof.com * @kilianvalkhof on Twitter * 04:50 What is Polypane? * Polypane * @Polypane on Twitter * FromScratch * 09:31 How is Polypane built? * 14:18 What about the Dev tools tab? * 20:15 Outline tab * 23:23 Color picker * 27:33 Canvas rules and guides * 32:16 Accessibility background and tools * 40:28 How do you parse the CSS? * 42:51 What else do you want people to know about Polypane? * 44:42 Supper Club questions * 53:59 SIIIIICK ××× PIIIICKS ×××
Shameless Plugs * Fix Contrast * Superposition
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
In this episode of Syntax, Wes and Scott revisit their 2022 predictions and see which ones they got right, and which they got wrong.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes * 00:09 Welcome * Syntax 420: 2022 Predictions * 01:44 Svelte popularity * Svelte * Svelte Kit * 04:09 Next.js data layer * 05:06 Web components UI * Open UI * 06:19 Rust popularity * Rust * 10:07 Serverless and Cloud functions * 10:42 Tailwind popularity * 16:20 Sponsor: Sentry * 17:59 Next gen dev tools * 19:46 CSS Container queries * 21:45 GraphQL * 26:26 Deno * 29:44 TypeScript * 34:28 Sponsor: Sanity * 35:07 Server comeback * 36:21 Checkouts and payment processers * Lemon Squeezy * 43:05 Sponsor: Auth0 * 44:18 Temporal API * 46:44 Remote dev thin client popularity * 49:49 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: JADENS Label Maker Machine with Tape * Wes: Chipolo One Spot
Shameless Plugs * Scott: LevelUp Svelte Kit Tutorial * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the current state of building desktop apps with Electron or Tauri.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes * 00:33 Welcome * 01:18 Sponsor: Sentry * 02:47 Sponsor: Prismic * 04:01 Our experience with building desktop apps * Level Up Tutorials: Level 1 Electron * Hair.WesBos.com * 10:04 Frameworks for building apps * 10:56 Tauri vs Electron * Tauri * Electron * 23:38 Tooling * vite-plugin-electron
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
In this supper club episode of Syntax, Wes and Scott talk with Kenneth Lyerly about his career path into coding, and how he manages to hold two jobs.
Show Notes * 00:38 Welcome * Ken.dev * Ken on Github * 01:59 How do you have two jobs? * 09:46 When did you start a second job? * 16:02 Any tips for someone wanting to switch into coding? * 24:03 Do you have advice for people trying to market themselves? * 31:38 What is working these days for marketing efforts? * 34:47 Where can devs learn about marketing? * 35:50 Barbershop culture * 39:47 Supper club questions * Snazzy Labs custom Touch ID button * Tech Meme Ride Home podcast * 44:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Traeger Grills
Shameless Plugs * Suavecito * ResortPass
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
In this potluck episode of Syntax, Wes and Scott answer your questions about how to give feedback on the podcast, deciding on a business model for courses, what to do about Twitter, and more.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:10 Welcome * 01:51 Podcast feedback * 04:46 Can you talk about how you made the decision to re-write LevelUp? * Strangler Fig * 13:54 How did you get a score for your website? * Google Pagespeed * 19:30 Where will we move to when Twitter implodes? * Twitter Blue * 26:29 Sponsor: Linode * 27:06 How did you arrive at your business model? * 33:15 Advice for getting into freelancing web dev? * 38:49 Sponsor: Sentry * 40:07 How to feel more “senior” as a developer * 43:30 How do you manage notifications between various apps? * Hazel * 50:46 Label makers * Nimbot label makers * 54:14 Sponsor: Freshbooks * 54:45 How are people testing node apps? * JestJS * Vitest * Mocha * ChaiJS * 56:38 What are your thoughts on the TanStack Router? * Tanstack * Astro * SvelteKit * Nozzle * 01:09 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Sensibo Air * Wes: We Crashed
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk about your options for database when you’re working with serverless.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:25 Welcome * 00:51 Sponsor: LogRocket * 01:44 Sponsor: Prismic * 03:17 Why Serverless and related databases? * 07:45 Deploying on Deno * Deno * 08:44 Using a database with serverless functions * Syntax 542 - Serverless Limitations * 11:53 Using purpose built databases * Planetscale * Supabase * Cloudflare D1 * Cloudflare Key Value Store * AWS DynamoDB * AWS Auroa * FaunaDB * Neon * Railway * MongoDB Serverless * Redis * Cassandra * 15:01 The results of the test * 17:35 Solutions
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
In this supper club episode of Syntax, Wes and Scott talk with Jonny Burger about why and how he built Remotion, his app that lets you create MP4 videos using React.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing.
Show Notes * 00:36 Welcome * 01:24 Who is Jonny Burger? * Jonny.io * Jonny on GitHub * Jonny on Twitter * 03:51 Why did you create Remotion? * Remotion.dev * 07:36 What types of videos are people making? * 10:53 What is the tech stack? * Puppeteer * Lottie * 18:31 What is Idempotence? * 19:50 What is lottie? * 22:56 Motion blur trail * Motion blur trail demo * 25:17 Sponsor: Gatsby * 26:12 Chrome rendering * 29:58 When would you choose JPG or PNG? * 31:43 Are you using ffmpeg in the browser? * ffmpeg * 36:00 Sponsor: Tuple * 37:43 What player do you use for playback? * 39:54 How did you take this idea to a product? * 44:05 Supper Club questions * LG C9 TV * iTerm * 50:12 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Yoga with Adriene * Cosmic Kids Yoga
Shameless Plugs * Toopo.art
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
In this episode of Syntax, Wes and Scott look at the the Web Almanac’s report on the role of JavaScript on the web in 2022.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:11 Welcome * 01:17 College football update * 04:07 Web almanac for 2022 * JavaScript in the 2022 Web Almanac * 06:25 Unused JavaScript * 07:47 JavaScript requests per page * 09:38 Bundlers * 14:01 Pages using Babel * 16:01 How JavaScript is requested * 19:22 Sponsor: Sentry * 20:56 Loading render blocking tags * 22:48 Dynamic import, web workers, source maps * 24:33 Libraries and frameworks * Owl Carousel * Lazy Sizes * 29:30 Websites using web components * 31:35 Websites with JavaScript security issues * 32:43 Sponsor: Auth0 * 33:58 Jamstack * 37:09 JavaScript used by Jamstack sites * 38:03 Jamstack hosting * 39:46 Popular Static site generators * 44:49 Progressive web apps and service workers * 50:29 jQuery inside WordPress themes * WeCrashed * 51:13 Project Fugu * Project Fugu * 52:51 Web push notifications * 55:49 CMSs * 00:45 Sponsor: Freshbooks * 01:40 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: White Lotus * Wes: Ubiquiti
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk through the various rendering methods in use today and the pros / cons of each.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:26 Welcome * 01:31 What is rendering? * 02:41 Sponsor: Sentry * 03:58 Sponsor: Sanity * 04:55 Rendering methods * 05:48 Single page application (SPA) * 07:36 Multi-page Application * 09:14 Static Site Generation (SSG) * 11:10 Service Side Rendered (SSR) * 13:08 Partial hydration * 14:03 Progressive hydration * 15:38 Island architecture * 16:25 Progressive enhancement * 18:18 Incremental Static Generation * 19:12 Streaming SSR * 19:53 Resumability * 21:51 Edge rendering * 23:11 Missing from the list
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
In this supper club episode of Syntax, Wes and Scott talk with Vu Le about his path to working at Disney. How did he learn to code? How do you get a job at Disney? What’s the tech stack inside a Disney team?
Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing.
Show Notes * 01:40 Who is Vu Le? * 03:33 How did you learn to code? * 04:57 How do you get a job at Disney? * 09:01 Internal CMS development at Disney * 10:19 What types of languages do you use internally? * 15:22 Do you have a design system? * 19:52 How do you handle versions and updates? * 22:42 Sponsor: Tuple * 23:37 Do you get involved in testing? * Vitest * 25:06 What are you using for GraphQL? * GraphQL * 25:34 How are you handling CSS? * Theme UI * 31:43 Does Disney do remote work? * 34:38 Perks of working at Disney * 38:16 Supper Club questions * GMMK Pro Keyboard * Santa Cruz bicycles * JetBrains Mono * 45:13 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Garden hose connectors
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
In this episode of Syntax, Wes and Scott talk about their preferred coding styles and preferences they use, and why.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:11 Welcome * 02:35 Function definition * 06:43 File path aliases * 09:36 Implicit vs Explicit Return * 13:49 Array.reduce() VS literally anything else * 17:37 Loop vs array method * 22:55 Sponsor: Linode * 23:37 Updating vs creating a new var * 30:36 Iterable to Array * 34:46 Sponsor: LogRocket * 36:16 Destructuring vs Object.property * 39:22 Destructuring Arrays vs Reference by index * 41:40 Number(string) vs +string * 43:35 Incrementing * 45:06 Multiple ifs * 47:48 Multiple ifs vs switch vs Ternary * 51:05 Promises / Error Catching * 53:50 if(falsy) block VS return false; * 55:51 Sponsor: Freshbooks * 56:26 Spaces vs tabs * 58:39 Trailing commas * 00:40 Semicolons * 02:49 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Video Archives Podcast * Wes: Ubiquiti Wifi
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about new features coming to GitHub including Hey, GitHub!, GitHub Blocks, GitHub Copilot CLI, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:23 Welcome * 01:49 Responsive web design update * 03:12 Let’s go * 05:32 Sponsor: Linode * 06:01 Sponsor: LogRocket * 07:23 GitHub Next * GitHub Next * 08:17 GitHub Copilot for the CLI * 11:52 Synthesizing results * Syntax 540 - Responsive Design Techniques * 13:31 Hey GitHub * Syntax 481 - Supper Club Voice Coding with Pokey Rule * 16:55 GitHub Blocks * 18:58 GitHub Code search * 21:36 GitHub Collaborative workspaces * 23:43 GitHub Copilot for your own codebase * 25:10 GitHub Copilot Radar * 29:15 GitHub AI Pull Requests
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
In this supper club episode of Syntax, Wes and Scott talk with Jared Sumner about why and how he created Bun, what Zig is, and the future of Bun.
Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Tuple.app.
Show Notes * 00:37 Welcome * 01:44 Who is Jared Sumner? * Jarred Sumner on Twitter * Bun * Bun Discord * Bun on GitHub * 02:31 Why did you make Bun? * 09:43 Using web API vs Node modules? * 13:25 Do we still use npm? * 15:42 Support for HTML Rewriter * 16:46 Where do you see Bun being used? * 19:25 Do you think someone will write a type checker? * 21:18 Sponsor: Tuple * 22:07 What is Zig? * 24:57 Did you have a history of learning languages? * 28:16 Have you ever thought of putting Bun on hardware? * 29:59 Is there a package.json file in Bun projects? * 31:34 What can’t Node just get faster? * 32:16 What is the future of Bun? * 36:27 Thoughts on types in JavaScript? * 41:16 Why did you build an SQLite client into Bun? * 42:54 Supper Club questions * Starship * Warp * 48:52 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Bun meme
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
In this potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:10 Welcome * 01:53 TikTok update * 02:46 What strategies do you use to find the good stuff? * Tweetdeck * 11:17 What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? * 15:56 Should we use TypeScript for a new blog? * 20:45 Sponsor: Sanity * 21:45 Is there any reason to still use string concatenation over template literals? * 26:13 What should React devs use to get initial scaffolding in place? * Create React App * Vite * Turbo Pack * 29:38 What’s the deal with Playwright? * Playwright * 34:28 Sponsor: LogRocket * 35:19 What separates a “scripting” language from a “programming” language? * 39:37:14 Sponsor: Prismic * 40:23:02 Do you have any tips on how to change a defeated programmer mindset? * Partydown * 47:34:07 How has your use of and work in the browser changed with Arc? * Arc Browser * Syntax 514 - Supper Club × Arc Browser with Hursh Agrawal * 49:18:15 Why would I attach an event listener with the useCapture argument as true? * 51:33:24 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Screwless plates / 4 pack of screwless plates * Wes: Shoe Boxes for Cords
Shameless Plugs * Scott: LevelUp TikTok * Wes: Wes Bos TikTok
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
In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes * 00:23 Welcome * 01:08 Sponsor: Sentry * 01:59 Sponsor: MagicBell * 03:11 Topic introduction * 04:44 Function limit * Puppeteer * 08:51 Node support * 10:00 Cron jobs * 11:12 Local development * Miniflare * 11:45 Database access * SQLite * 12:42 Sharing code * 13:07 Environmental variables * Netlify environmental variables * 14:37 Timeouts * 15:47 Sass is expensive * 17:26 Infastructure as code * 19:02 Search * Algolia
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this supper club episode of Syntax, Wes and Scott talk with Scott and Wes! Talking about BBQ, electric cars, workout equipment, home renos - but they do sneak in a bit of coding talk!
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. https://tuple.app/syntax
Show Notes * 00:37:11 Welcome * 03:18:10 Saskatchewan and Saskatoon Berries * Saskatoon Berry Barn * 05:02:14 TV shows we’re watching * Amazing Race Canada * America’s Dance Crew * Lakefront Luxury * 12:49:12 New house vibe * 18:29:06 Sponsor: Kontent * 19:13:20 Sauna thoughts * 22:58:24 Home gym thoughts * Woodupp * Tonal * 40:22:16 Sponsor: Tuple * 41:17:11 3D printer * 44:11:09 How many things can you take on? * 48:23:11 BBQ talk * Amazing Ribs * 55:26:11 Electric car update * Ioniq 5 * 57:45:07 Supper Club questions * Level Up Tutorials VS Code Theme * Quokka VS Code Extension * Quokkajs * Console-Ninja
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
In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:47 Clean Talk * 03:55 The menu of responsive design * Syntax 154 with Sara Soueidan * 06:52 Responsive design basics * 11:54 What should you build for first in 2022? * 16:15 Shrink and grow until it looks bad * 21:36 Menus in responsive * 23:43 Sponsor: Linode * 24:13 Grid systems * 28:08 Grid and Flexbox * CSS Grid Course * Flexbox Course * Can I Use * 35:02 Sponsor: LogRocket * 36:00 Container queries * 45:56 FitText * 49:12 How do you test these types of things? * 51:15 Future techniques coming * 53:28 Sponsor: Freshbooks * 53:56 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Lutron Light switches * Wes: Sunco Lighting BR30
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes * 00:13 Welcome * 01:39 Sponsor: Sentry * 02:41 Auth0 * 03:57 A bit more auth * 05:24 New RFC * RFC: First class support for promises and async/await * 08:30 What are the basics of this proposal? * 10:12 Scott gets a little Svelte-y * 11:44 Why is this being proposed? * 17:14 Infinite loop possibility * 18:44 Why is Svelte API better in this use case? * Tanstack * Smooshgate
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
In this supper club episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno. Why was Deno created? What is Deno written in? How is Deno so much faster? And what’s the future of Deno?
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:36 Welcome * Tinyclouds.org * Ry on GitHub * Deno * Deno Discord * 01:18 The introduction of Node * 02:51 Why are you still betting on JavaScript for the web? * 05:34 Why did you make Deno? * 09:04 How does TypeScript fit into the landscape? * 11:40 How is Deno so much faster? * 13:28 Sponsor: Sanity * 14:17 What is Deno written in? * 15:56 Should developers be learning Rust? * 18:27 Will libraries that work on npm eventually work in Deno? * 21:52 Are we going to use Node API’s or web spec? * 24:31 Sponsor: Sentry * 25:31 What is tooling like for Deno? * WinterCG * Deno VS Code Extension * 29:27 What is Deno deploy? * Deno Deploy * 34:01 Deno’s framework Fresh * 38:56 Client side vs server side rendering * 41:27 Sponsor: Gatsby * 42:28 What’s the future of Deno? * 43:39 Supper club questions * 53:30 SIIIIICK ××× PIIIICKS ×××
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
In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:06 Welcome * Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1 * 01:22 Smart home updates * 04:05 Box sizing: border box * 06:57 CSS Columns * 09:20 Aspect Ratio * Can I Use CSS Properties Rotate * 09:53 Transitions and animations * 13:36 Transition time * 17:05 Steps as a timing function * 19:01 Sponsor: Prismic * 19:43 Blend modes * 23:57 Responsive web design * 26:31 Prefers Color Scheme * 27:48 Popular breakpoints * 30:57 Sponsor: LogRocket * 32:06 Feature queries and @ supports * 34:59 Logical and physical properties * 37:59 css-in-js * Sam Magura - Why We’re Breaking Up with CSS-in-JS * Brad Frost - Why We’re Breaking Up with CSS in JS * 42:28 Sass * 43:20 Print styles * 45:38 Sponsor: Sanity * 46:38 Longhand properities * 48:21 Non-existant properties * 52:06 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Front Bumper Drillless Plate Holder * Wes: 1U Server Rack
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about creating short form content for TikTok, Reels, Shorts, and tweets. What are some of the benefits and limitations of creating for vertical video, and what tools are they using to create videos.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:23 Welcome * 01:39 Sponsor: Sentry * 02:40 Sponsor: Freshbooks * 04:05 Short form content intro * WesBos.com/tips * Wes on TikTok * LevelUp Tutorials on TikTok * Scott Stolinski on TikTok * 07:16 The good and the bad of short form content * 17:13 Repurposing content * 18:36 Content that works * 21:12 Tips for making short form content * 24:19 Limitations of short form content * 31:49 Tools for editing * Screenflow * Descript * Detail.co
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
In this supper club episode of Syntax, Wes and Scott recorded a live open table episode with guests calling in to talk about Wasm, building Riverside.fm, home networking, getting a job at Microsoft, Svelte and Sveltekit, htmx, and more!
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch!
Show Notes * 00:30 Welcome * 01:49 Safari aspect ratio bug * 04:17 Thoughts on Vercel announcements? * NextJS Conf * 10:07 Gideon Riverside CTO * Riverside.fm Careers * 14:44 Do JS devs need to branch out? * 16:52 Wasm * Web Assembly (WASM) * Rustlings * 19:46 Sponsor: Auth0 * 21:03 Which company will Vercel aquire next? * Guillermo Rauch * Akamai Acquires Linode * 27:12 Svelte Kit and Vercel * 30:20 Why don’t you terminate your own ethernet cables? * 30:58 How does Fly.io compare to Vercel? * Fly.io * 31:36 Did Wes learn Vue? * 32:10 Brad jumping on the Remix train * Remix * 34:18 Layout shift caused by images in Markdown * 38:30 Maintaining home networking * Ubiquiti * 44:44 Taking a course lead to a job with Microsoft * Soumya’s YouTube - Geekysrm / website / Twitter * 47:38 Sponsor: Appwrite * 48:39 Are you still using your Synology NAS? * Synology * 53:53 Is Svelte ready for smaller team projects? * Svelte Kit * Wyze * 56:03 HTMX * htmx * Alpine.js * 01:49 Docker Wasm preview * Introducing the Docker+Wasm Technical Preview * WebAssembly System Interface
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
In this Potluck episode of Syntax, Wes and Scott answer your questions about meeting IRL, bookmarks, SSG vs SSR, domain privacy, deploying monorepos, and more.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:08 Welcome * 01:20 Weather updates * 02:21 How often have you gotten together in real life? * Jamstack Conf * Reactathon * 05:33 What are people using to bookmark sites? * Arc Browser * 09:03 When not to use Static Site Generation (SSG), and when to use Server-side Rendering (SSR)? * Svelte Kit * 13:53 How do you do correct error handling to catch everything? * Sentry.io * 21:13 Sponsor: Sentry * 22:50 Is there any benefit to using getters and setters in classes set them over plain methods? * 27:47 Will there ever be a js framework that can SSR on a non-JS backend? * Render * pnpm * 32:40 Have either of you thought about learning and teaching Python or Django? * 34:56 What is your opinion on purchasing “Domain Privacy” with each domain? * 37:49 Sponsor: Sanity * 38:44 Domain privacy continued * 39:22 How you deploy monorepo packages? * Tanstack * Vite * 43:48 As a member of a non margin group should I avoid applying for jobs when they say they welcome applicants who are of a marginalized group to support diversity? * 46:12 When would you, if ever, choose good-old React over something like Next JS? * 53:24 Sponsor: Freshbooks * 54:16 Is it preferred to import via absolute reference or relative reference? * 00:23 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Air Compressor * Wes: Blue Flush Cutter Mini Diagonal Cutting Pliers Side Cutter Nippers Wire Cutter
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about Zod, a TypeScript-first schema validation with static type inference. How are we using Zod? What do we like? And our thoughts on the Zod ecosystem.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:24 Welcome * 01:48 Sponsor: LogRocket * 02:54 Sponsor: Linode * 04:07 Minecraft thoughts * Minecraft * 06:25 Scratch * Scratch * 07:19 What is Zod? * Zod * Zod comparison * 10:05 Features of Zod * 13:24 How we’re using Zod * 14:40 How Zod works with MongoDB * 15:51 3rd party plugins * 19:35 Zod ecosystem * Zod Ecosystem * 22:22 Asynchronous validation
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
In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about ADHD, how to tell if you have ADHD, issues related to ADHD for computer workers, anxiety vs ADHD, and more.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch!
Show Notes * 00:36 Welcome * 02:11 Guest introduction * 03:00 Do I have ADHD? * CHADD * 09:12 What is the threshold for diagnosis? * 11:43 Are there other issues for computer workers? * Arc Browser * Syntax 513 - The Productivity Episode * 15:27 Avoiding difficult or boring things * 17:04 Structuring your day * 18:41 Sponsor: LogRocket * 20:12 Any tips for working in a distracting environment? * MyNoise.net * Headspace * 23:40 Can I learn to deal with things? * 27:28 How can I support a team member with ADHD? * Missive * 31:51 Sponsor: Appwrite * 32:47 Any lifestyle changes to help with ADHD? * 38:26 How do you find medical help? * 42:39 How do you tell the difference between discipline vs ADHD? * 47:05 Anxiety vs ADHD? * 48:36 Dyslexia and ADHD * 53:31 Inheritable or genetic * 54:50 Don’t rely on self-diagnoses * Psychology Today * 55:48 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Taking Charge of Adult ADHD * Bird feeder
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
In this episode of Syntax, Wes and Scott tell more of your scary web dev stories including lorem ipsum mistakes, naming something Skynet, blackouts, Twitch streaming, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:12 Weeeeeelcome * 02:11 Slipsum mistake * Slipsum * 03:40 Brotli scaling explosion * When JavaScript Bytes * 05:14 Email loop * Breaking Production with 56,000 emails * 05:36 DevOops Magento store * Example.com * 08:26 Scary animal stories * 11:09 Naming something Skynet * 11:58 2003 Blackout * 13:16 ExtJS error binding * 17:09 Sponsor: Linode * 17:55 Lead gen forms and captcha * Issue Renaming upper-case ‘Sirupsen’ to ‘sirupsen’ * Follow up * 19:51 Scarlet Letter * 21:51 MongoDB achievement story * Adam Coster * 26:14 Sponsor: Auth0 * 28:11 Drupal and mysql database fun * 30:10 Nervous Twitch * 34:03 FTP access story * 37:24 Sponsor: LogRocket * 38:53 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Ear foam tips * Wes: Stepped drill bit / Aliexpress link
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes explain more buzz words like schema, promises, async, sync, dom vs shadow dom vs page HTML, props, and more.
Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:21 Welcome * 01:17 Sponsor: Appwrite * 03:16 Sponsor: Sanity * 04:08 Schema * Zod * Apollo GraphQL * 07:25 Promises * 08:47 Async, Sync, Parallel and Concurrent * 13:15 Dom vs Shadow Dom VS Page HTML * 16:21 Methods vs Functions * 18:18 Props * 20:27 HTTP Requests are Stateless
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
In this supper club episode of Syntax, Wes and Scott talk with Filipe Ferreira of Sky TV about the tech stack used to deliver streaming TV content, build Apple TV apps, host media, and more.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Sponsorname - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
retool.com/syntax
Sponsorname - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.
Show Notes * 00:36 Welcome * 02:15 Guest introduction * fbritoferreira.com * @SkyShowtime * Peacock * 04:13 What do the systems look like inside of Sky? * GraphQL * Redis * Apollo GraphQL * 06:26 Do you use federation? * 07:50 How do you handle caching? * 11:24 What’s the tech stack for the front end? * 13:30 Do you cache on client side? * 15:27 How long has Sky been serverless? * 16:55 Sponsor: Gatsby * 18:05 How was Sky’s Apple TV app built? * 21:17 Where did you host media? * AWS Streaming * Mux * 24:37 Supporting live events * 28:03 Sponsor: Storyblok * 30:05 What language are you writing the GraphQL layer? * The Guild * 32:22 How do you define your types? * 36:40 Supper Club questions * Apple Magic Keyboard with Touch ID * Magic Keyboard with Touch ID and Numeric Keypad * 44:28 Sponsor: ReTool * 45:22 AppWrite * AppWrite * 48:42 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Anker 733 Power Bank (GaNPrime PowerCore 65W)
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
In this episode of Syntax, Wes and Scott tell your spookiest scary web dev stories including spooky render times, push notification hell, dark Friday, and more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:15 Welcome * 03:00 Spooky Render Times * React Virtualized * React Window * 09:19 Push Notification Hell * 13:11 Dark Friday * 14:19 Tiny Ints with Big Problems * 16:57 A/B Testing * 18:47 Confirm Purchase button mistake * 21:21 Sponsor: Sentry * 22:34 Dike Leak * 25:14 A Steep Grade * 32:41 Falkland Islands mixup * 33:40 Conference mixup * 36:34 Sponsor: Prismic * 37:58 Doctor Who Ipsum * 43:55 Marketplace payouts * 46:38 Sponsor: Freshbooks * 47:42 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: PopSocket Wallet * Wes: Water flosser
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about Qwik, a new framework designed for the edge. How are things like hydration, lazy loading, rendering, and optimization handled by Qwik?
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:18 Welcome * 01:25 Sponsor: Sentry * 02:47 Sponsor: Sanity * 04:50 What is Qwik? * Qwik * 08:05 What is SSR? * 09:25 Working with hydration * 15:31 Lazy loading, reduced rendering, and Qwik optimizer * 17:30 Edge first * 18:55 Data loading or data actions issues * 20:49 Qwik City * Qwik City
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
In this supper club episode of Syntax, Scott talks with Alex Johansson about his work on tRPC, how it compares to other tools like GraphQL, and what’s next for tRPC?
Polypane - Sponsor If you want to build a great website or web app, there’s a million things you need to take care of: responsive design, accessibility, SEO, Meta tags and page structure, to name just a few. Polypane is the browser for developers with tools that help with literally every part of modern web development, helping you save hours (and frustration!) with every project. It shows your site in multiple fully-synced viewports at once, Gives you advice on better accessibility and gives you insight into your performance and quality. Go to polypane.app/syntax to start a 14 day free trial and use SYNTAX20 for a 20% discount at checkout.
FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
Show Notes * 00:37 Welcome * 01:56 Guest introduction * @Alexdotjs on Twitter * Alex on GitHub * Katt.dev * tRPC.io * 02:47 What is tRPC? * 06:56 How does type safety work? * 10:38 Sponsor: Polypane * 13:20 What is Zod? * 17:39 How does tRPC relate to GraphQL? * 23:47 Sponsor: FireHydrant * 25:25 What about a data loader? * 29:04 React or NextJS adapters * 30:41 How does it feel when people start building off your project? * 33:58 Sponsor: Kontent by Kentico * 37:34 What’s next for tRPC? * 42:42 How is error handling done? * 48:43 Supper Club questions * 54:42 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Kysely
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
In this episode of Syntax, Wes and Scott talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:10 Welcome * 02:15 Cleaning Sick Pick * Bar Keepers Friend * 04:40 Web Almanac * Web Almanac * 08:23 CSS stylesheets size grow * 09:49 Popular CSS Class names * 15:29 How many websites use !important? * 18:11 Popular pseudo classes * 20:27 Sponsor: Prismic * 21:38 CSS Attribute Selectors * 27:03 Most popular units * 32:23 calc properties * 33:13 Sponsor: LogRocket * 35:15 Top operators when using calc * 36:21 Custom Property Names * 37:39 Property Value types * 38:00 Functions * 39:27 Color names * 42:02 Format of color * 43:50 Most popular gardient on the web * 47:27 Sponsor: Freshbooks * 47:57 We don’t know the web * 50:39 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Dawn * Wes: Flat speaker wire
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes take Matt Busche’s suggestion and talk all about bookmarklets and scripts to modify or manipulate web pages.
MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
NAME - Sponsor COPY HERE
Show Notes * 00:25 Welcome * 02:02 What are bookmarklets? * Matt Busche’s fav bookmarklets Gist * Bookmarklet Maker * CSS Tricks - Web Development Bookmarklets * 04:49 Using an Immediately invoked function expression * 09:22 Greasemonkey * Greasemonkey
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
In this supper club episode of Syntax, Wes and Scott talk with TJ DeVries about his work on Neovim, programming in Lua, the benefits of RPC, live streaming your work day, and PDE.
FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Show Notes * 00:36 Welcome * 01:13 Guest introduction * Teej_dv on Twitter * TJ Devries * Teej_DV on Twitch * TJ on YouTube * Telescope on GitHub * Neovim on GitHub * Syntax 508 with The Primeagan * 03:15 The difference between Vim and Neovim * 06:14 Why did you choose to write in Lua? * Lua * Luajit * 13:26 What is adapative UI in Neovim? * 17:38 Lunarvim and alternatives * Fvim * LunarVim * 20:24 Personalized development environment PDE * PDE * Firenvim * 22:40 Sponsor: FireHydrant * 23:21 Benefits of RPC * 30:34 Is working on Neovim your job? * Sponsor Neovim * Sourcegraph * 31:30 What is your approach to streaming? * 34:11 Did you go to school for computer science? * 39:12 Sponsor: Gatsby * 39:46 Supper Club questions * System76 * Pop * Dactyl Manuform Keyboard Kit * Jetbrains Mono * 49:52 Sponsor: Hasura * 50:47 SIIIIICK ××× PIIIICKS ×××
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
In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:11 Welcome * 01:15 Fogging the boats * 04:25 Use the platform * 06:32 URLSearchParams * 10:04 Pushstate and History API * Pushstate * 13:46 Internationalization API * Internationalization API * Syntax episode 153 * 16:03 FormData API * MDN Docs * Clipboard API tutorial * 20:31 Sponsor: Prismic * 21:23 All of the DOM API * 24:12 Vanilla JS * 26:06 Localstorage and IndexDB * 29:18 Web Animations API * 31:10 Sponsor: LogRocket * 32:39 Endless other browser apis * 38:22 Shadow DOM and Web Components * Web Components for beginners * 42:57 CSS variables * 46:05 HTML * 47:27 Sponsor: Sanity * 49:19 More HTML * 54:12 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Cable sleeve * Wes: Kindling splitter
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:25 Welcome * 01:06 Sponsor: Sentry * 01:59 Sponsor: Freshbooks * 02:27 What does that even mean? * 02:55 Everything in JavaScript is an Object! * 04:43 X is just Syntactic Sugar * 09:00 Functions are first class citizens * 10:04 Object Literals or Template Literals * 11:12 Declarative vs Imperative
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
In this supper club episode of Syntax, Wes and Scott talk with Nikolas Burk from Prisma about the role an ORM plays in a tech stack, how Prisma has changed over the years, ways to query data in Prisma, and how migrations work with Prisma.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.
FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.
Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax.
Show Notes * 00:35 Welcome * 01:30 Guest intro * @NikolasBurk on Twitter * 04:56 How has Prisma evolved? * Prisma * Keystone * GraphQL * 10:44 What was Prisma V1? * 17:04 Is there any GraphQL specific functions in Prismic? * 21:26 Sponsor: Hasura * 22:26 What role does an ORM play in a tech stack? * 29:54 What is Planetscale? * Planetscale * The T3 Stack * 32:22 Where does TRPC fit? * tRPC * 33:46 Sponsor: Storyblok * 35:28 What is an ORM? * Prisma VS Code plugin * 42:00 How do migrations work with Prisma? * 45:58 Query your data with Prisma client * 49:43 Have you looked into alternative JavaScript environments? * 55:16 Sponsor: FireHydrant * 57:05 Supper Club questions * 58:50 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Lichess
Shameless Plugs * Prisma blog
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
In this episode of Syntax, Wes and Scott answer your questions about whether you should use emoji in naming grid elements, how to estimate project times, responsive design tips, animating gradient backgrounds, and more.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:10 Welcome * 01:22 Shooting some pucks at the football game * 04:06 Should we use emoji naming conventions for our grid template areas instead of just words? * Screenshot of Grid question * 08:38 How do you estimate a reliable timeline for a project? * 12:18 Do you think about sustainable web development? * 16:24 What kind of tips and tricks around responsive design do you have? * 18:22 Sponsor: Linode * 18:55 How would you go about documenting your achievements throughout your career to reflect on during interviews and employee reviews? * 23:33 How do you plan long term for projects or goals? * Forever Jobless Goals worksheet * 28:22 Can you please make a fundamentals episode that only cares about clarifying the terms everyone assume to be well known to even beginner devs? * 22 Buzzwords Explained * 31:01 Sponsor: LogRocket * 32:20 How would one go about animating a gradient background based on mouse movement? * JavaScript 30 * 38:13 Is there any way using the children API to render the close button and menu items in different locations in the menu component? * @Luke_lafr come on the show! * 42:04 Where should I begin with design systems? * 48:10 Sponsor: Sanity * 49:24 Is JSON always safe? * 55:01 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Thorn Razor, Rockwell Blade Bank * Wes: Milwaukee 48-22-1902 Fastback II
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials / Beginner JavaScript
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
In this Hasty Treat, Scott and Wes talk about the ways they get unstuck when working on the last bit of a project to help push it over the finish line.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:26 Welcome * 02:05 Sponsor: Linode * 02:59 Sponsor: LogRocket * 03:48 The last 10 percent * 05:25 Break those things into Tasks * 08:11 Just do it * 09:10 Rewards * 11:25 Be ok with good enough * 14:21 Keep the end in sight * 15:00 Do it “Quick a minute”
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
In this supper club episode of Syntax, Wes and Scott talk with bdougie about his work on Open Sauced, thoughts on getting into open source development, and his live streaming set up.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.
Get started at Firehydrant.com/syntax
Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.
Show Notes * 00:36 Welcome * 01:52 Guest introduction * OpenSauced.pizza * @Bdougieyo on TikTok * bdougie on Twitch * Open Sauced on YouTube * bdougie on YouTube * Jamstack * Netlify * 03:36 What was the inspiration for Open Sauced? * 08:23 GitHub GraphQL API * 13:22 What are your thoughts on GraphQL? * GraphQL * 14:36 What is the T3 stack? * 16:30 Sponsor: Hasura * 17:53 What is the goal for Open Sauced? * Open Sauced Beta for Hacktoberfest * 20:08 What is your focus with live streaming? * T3 Stack * Vite * The Primeagan on Syntax Episode 508 * Octoverse * Hot Open Sauced Pizza * 21:39 What hardware and software do you live stream with? * Rode Procaster * Wave XLR * GoXLR * OBS * 25:26 Should adults be on TikTok? * 30:31 How do you build an algorithm? * 32:44 Sponsor: Storyblok * 34:01 Supper club questions * Keychron K2 * Warp * Ghostwriter from Replit * A first look at GitHub Copilot * Stable Diffusion * Fig * 43:17 Sponsor: FireHydrant * 44:36 Interviews with open source maintainers * 45:55 How should maintainers get paid? * Patreon * GitHub Sponsors * Neovim * Vim Adventures * Lunar Vim * 47:47 SIIIIICK ××× PIIIICKS ××× * 51:34 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * bdougie: Warp
Shameless Plugs * bdougie on Twitter * saucedopen on Twitter
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
In this episode of Syntax, Wes talks through all the gear, renovations, and upgrades he’s made to his new home office. Lighting, soundproofing, desk, windows, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:38 Welcome * 02:24 Scouting a house with an office * 03:54 Why didn’t you hire someone? * 08:50 Goals for the office * 10:30 Soundproofing * 19:49 Decouple the ceiling * 25:52 Sponsor: LogRocket * 26:54 The door * 33:23 Sponsor: Prismic * 33:59 The desk * 40:40 Cable management * 47:12 Lighting * 49:03 The room and windows * 51:22 Flooring * 55:12 Sponsor: Freshbooks * 55:47 Things yet to be done * 01:03:49 Costs * 01:06:10 SIIIIICK ××× PIIIICKS ××× * Desk Haus Apex Pro Max * Alien Tape
××× SIIIIICK ××× PIIIICKS ××× * Scott: Pretend Podcast * Wes: Nano Tape
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about a new framework called Enhance. What is Enhance and how does it differ from other new frameworks like Astro?
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:27 Welcome * 01:12 Sponsor: Sentry * 02:06 Sponsor: Sanity * 03:40 What is Enhance? * Enhance.dev * 06:17 Singe file components
export default function HelloWorld({ html, state }) { const { attrs } = state const { greeting='Hello World' } = attrs return html` ${greeting} ` }
* Astro
* 09:23 State and Props
* 14:01 CSS
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
In this supper club episode of Syntax, Wes and Scott talk with Hursh Agrawal of The Browser Company about Scott’s favorite browser, Arc. How do you make a browser in 2022? Will there be a Windows version? And who is the target market for Arc?
FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes * 00:34 Welcome * HurshAgrawal.com * @Hursh * 02:53 What is Arc and why create another browser? * Arc browser * The browser company * 05:36 What is different about Arc? * 08:20 Who is the target market for Arc? * 09:30 Sponsor: Auth0 * 10:39 How do you make a browser? * 13:38 Will there be a Windows version of Arc? * 15:57 Where did the CMD-T functionality come from? * 19:27 Sponsor: FireHydrant * 20:39 How do you build on top of the Chrome engine? * 24:17 How does The Browser Company make money? * 27:26 Do you mess with the user agent? * 29:05 Why do you require account set up to use Arc? * 32:58 Sponsor: Gatsby * 33:59 How did you come up with your theming engine? * 36:15 Supper Club Questions * Warp * Hacker News * Changelog * Every * Ben Thompson Bundling and Unbundling * 42:59 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Jabra speakerphone
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
In this episode of Syntax, Wes and Scott talk through what they do to get things done - apps for to do list tracking, calendar blocking, and how they determine a productive day.
StoryBlok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 02:49 What is a productive day? * 04:56 What’s an unproductive day? * 07:43 Techniques for work * Getting Things Done * Eat That Frog * Height * 14:57 Weighting tasks * 18:29 Pomodoro technique * 20:53 Sponsor: StoryBlok * 22:46 The hard schedule * 29:24 Blocking out distractions * Focus * Self Control * 32:20 Sponsor: LogRocket * 33:34 Tips We Have * 42:55 Sponsor: Freshbooks * 43:32 Software to help get things done. * Things * Todoist * Omnifocus * Transmit * Savvycal * Centered * Remarkable * 56:21 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: USB C Female to USB Male Adapter * Wes: Measuring tape
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk all about GitHub Co-Pilot and whether it’s ethical, secure, worth it, gonna make you dumb, just going to get in your way, or the greatest thing for programmers to use.
Sentry - Sponsor Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity.
From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity.
From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness.
Show Notes * GitHub Copilot * Code Whisperer * 00:29 Welcome * 01:12 Sponsor: Sentry * 02:06 Sponsor: Sanity * 03:07 GitHub Co-Pilot is now paid * 05:51 Is it ethical? * 08:02 Is it secure? * 10:16 Is it going to take our jobs? * 13:34 Is it worth it? * 16:21 Does it make you dumb? * 17:53 Does it get in the way?
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
In this supper club episode of Syntax, Wes and Scott talk with Thomas Mann about Raycast - an app that can replace Spotlight on your Mac, and do so much more.
FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics.
Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax
Show Notes * @ThomasPaulMann * 01:49 What is Raycast? * Raycast * Raycast Store * 08:11 Do you have designers on your team to help guide UI? * 10:13 Why build it native instead of HTML and CSS? * 13:12 Why did you choose React? * 21:54 How do you figure out what’s possible in system level APIs? * 26:40 Snippets make use of SQLite * SQLite * 29:05 Encrypted local storage data * 33:11 Any plans for theming for Raycast? * 35:20 What is the pricing model? * 37:06 What was your Y combinator experience like? * Y Combinator * Careers * 42:08 Any plans for future features? * 44:08 Supper Club questions * Leopold FC660C Black 65% Dye Sub PBT Mechanical Keyboard * iTerm * Starship * 51:25 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Nothing Ear Buds
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
In this episode of Syntax, Wes and Scott talk about what APIs are, the API standards that exist, and walk through the various layers of what goes into making an API.
Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:10 Welcome * 02:40 What are APIs? * 06:09 API Standards * 13:56 What about GRPC? * 15:52 What is TRPC? * 19:19 Sponsor: Payments Hub * 20:25 API Cake Layers * mySQL * Postgres * Mongo DB * SQLite * SQLizer * 26:51 Server layer * 33:28 Sponsor: LogRocket * 34:36 Authentication layer * 43:28 Caching layer * 46:09 Sponsor: Freshbooks * 46:38 Client layer * Prisma: Package, but also a service * keystone: Package * Strapi: Package * Sanity: Service * Prismic: Service * Hasura: Open Source and Service * Contentful * https://hygraph.com/ * 48:01 Should I use x or y? * 51:35 Tools * GraphQL Playground * Graphiql * Postman * Insomnia * TablePlus * Studio3T * 56:27 SIIIIICK ××× PIIIICKS ××× * 00:20 Knife Talk
××× SIIIIICK ××× PIIIICKS ××× * Scott: Sharp Pebble * Wes: Laser level
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, and more.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:27 Welcome * 01:30 Sponsor: Prismic * 02:54 Sponsor: Sentry * 03:53 Do we use Post CSS? * 05:22 Presets and plugins * 06:19 Plugins we’re using
"postcss-import" @import './elements/headings.css';
* 09:48 PostCSS Nested
* 12:59 Variables (Custom Properties)
* 15:50 Media Query Ranges
* PostCSS Media Minmax
* 17:16 Custom Media Queries
"postcss-media-minmax" @media screen and (width >= 500px) and (width <= 1200px)
"postcss-custom-media" @custom-media --below_small (width < env(--small_bp)); @media (--above_small) {}
* 18:35 Env Vars
"postcss-env-function" env(--small_bp)
* 20:12 Color Function and Color Function Notation
/* color-function */ p { color: color(display-p3 1 0.5 0); color: color(display-p3 1 0.5 0 / .5); }
* Syntax 479: CSS Color Functions
* Post CSS Color Functional Notation
* Post CSS Preset Env
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
In this supper club episode of Syntax, Wes and Scott talk with The Primeagan about his streaming set up, how he decides what to stream, why he makes the kind of content he does, and why he loves Vim.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform.
Show Notes * 00:35 Welcome * 01:48 Guest introduction * ThePrimeagen on YouTube * ThePrimeagen on Twitch * @ThePrimeagen on Twitter * Why I Make Content * 03:53 Dropping in on skateboarding * Tony Hawk’s Pro Skater * 05:43 What do you do? * 07:17 How do you plan your live streams? * 10:05 Sponsor: Hasura * 11:27 Do you do interactive content via OBS on stream? * OBS * 16:22 What languages do you use on stream? * Bun * Zig * 22:03 What do you try to build on stream? * 24:53 Sponsor: StoryBlok * 25:45 Why do you use Vim? * 38:42 Do you ever have to do pair programming with Vim? * 40:43 What kind of hardware are you playing with? * Arduino * 42:52 Supper club questions * Lemur * Pop * Kinesis Advantage 2 * 56:20 SIIIIICK ××× PIIIICKS ×××
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
In this episode of Syntax, Wes and Scott answer your questions about picking the right tech stack, whether useEffect is still useful, benefit to use uses setTimeout, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. a0.to/syntax
Show Notes * 00:23 Welcome
* 02:39 What’s the best way of comparing the efficiency of object literals created from a factory function vs objects created by new’ing a class.
* Perf.link
* 06:54 How can I always see the full signature in VS Code?
* 10:40 What’s your process for picking a stack when starting a project?
* 14:41 Sponsor: Linode
* 15:23 Is snapshot testing really worth it?
* TS QuickFixes
* 20:54 What are your thoughts on ISR Incremental Static Regeneration?
* 25:20 Is useEffect public enemy #1?
* Goodbye, useEffect: David Khourshid
* 29:02 Sponsor: LogRocket
* 30:17 Is there any benefit to use uses setTimeout instead of setInterval?
* MongoDB
* Prisma
* 37:13 HTML to PDF a great solution I use is gotenberg.dev
* gotenberg.dev
* 40:12 Although async/await might make for code that is easier to grok, I find it worse for chaining functions.
* Pipeline Operator proposal
* 45:07 How do you guys stay focused for meaningful periods of time?
* 48:36 How should code formatters be configured and combined?
* Prettier
* ES Lint
* Editor Config
* No-Sweat™ Eslint and Prettier Setup
* 51:56 What’s your opinion on the latest Sveltekit changes with load, file based routing, and more?
* Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0
* Astro
* Nano Store
* 55:53 Sponsor: Auth0
* 56:47 SIIIIICK ××× PIIIICKS ×××
In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:24 Welcome * 01:37 Sponsor: LogRocket * 02:34 Sponsor: Linode * 03:18 Standing and getting mic’d * 04:20 What is Deno? * Deno Changes * 07:13 What were they doing before this? * How could we support typescript without vendoring it? * 21:22 Enterprise support and search
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
In this supper club episode of Syntax, Wes and Scott talk with Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, and more.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Show Notes * 00:34 Welcome * 03:23 Who is Steve Ruiz? * Steve Ruiz * 04:45 What is tldraw and what was your inspiration for it? * tldraw * Globs * Excalidraw * tldraw on GitHub * 11:04 Why didn’t you use canvas? * 16:15 How do you make an algorithm? * Perfect Free Hand * 19:33 Do you use pointer events? * 23:44 What are you using to manage state? * 29:42 How do you handle zooming? * Creating Zoom UI * 32:28 Where do you store the data for tldraw? * Project Fugu * 37:08 Why use indexdb? * 38:05 Sponsor: Gatsby * 39:49 How difficult was it to make it work on mobile? * React Use Gesture * 41:59 Does it work offline? * 43:25 Supper Club Questions * Monokai Pro * Framer Classic * Hacker News * One Lone Coder on YouTube * Displaced Gamer * Coding Secrets * 52:28 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Last Call BBS
Shameless Plugs * Steve: tldraw.dev
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
In this episode of Syntax, Wes and Scott review the websites you’ve submitted including Ruben Oliveira, Adam Collier, Consolecmnd, Brad Preston, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes * 00:16 Welcome * 02:05 Setting up Wes’ new office * 06:18 rubenoliveira.tech * Ruben Oliveira * 17:22 adamcollier.co.uk * Adam Collier * 22:56 Sponsor: Sanity * 24:13 Consolecmnd.com * ConsoleCMND * 32:37 sz-development.tech * SZ-Development * 44:07 Sponsor: LogRocket * 44:57 Richardcarrigan.com * Richard Carrigan * 49:52 Bradpreston.dev * Brad Preston * 54:18 Sponsor: MagicBell * 55:17 Mikemneves.com * Mike Mneves * 01:05 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Packing Cubes * Wes: Volt 1
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about margins. There are a lot of techniques for dealing with margins - padding instead of margin, only margin or padding bottom, Flexbox for everything, Grid for everything, or a spacing Div.
Sentry - Sponsor Find out about Sentry’s Dex Conference.
From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness.
This is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. Whether you join us in-person in San Francisco or virtually from your home, you’ll have the opportunity to share your thoughts, engage with other developers, and walk away with your own personal madness sorting algorithm.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes * 00:30 Welcome * 01:39 Sponsor: Sentry * 02:50 Sponsor: Auth0 * 04:25 Introduction to margins * 08:28 Margin vs padding * 11:46 New techniques * 14:32 The spacer div * 17:36 Why do it as a component vs a class?
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
In this supper club episode of Syntax, Wes and Scott talk with Brandon Roberts about Appwrite, how Appwrite works, who it’s for, as well as his thoughts on Angular, Remix, and more.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Show Notes * 00:36 Welcome * 01:10 Who is Brandon Roberts? * @BrandonTRoberts * 02:00 What is Appwrite? * Appwrite * Getting started with Appwrite * 03:17 What database layer does Appwrite use? * 08:17 Is this working client side or server side? * 09:54 Great docs and examples * 12:55 How is deployment handled? * Appwrite on Digital Ocean * 15:30 Sponsor: Lightstep Incident Response * 16:36 Appwrite’s focus on developer experience * Appwrite to do with Svelte * 19:56 Realtime database options with Appwrite * 22:40 Cloud functions in Appwrite * 26:01 How does Appwrite scale? * Docker Swarm * 27:28 Who is Appwrite for? * Flutter * 30:03 What is Ionic? * Ionic * 32:12 What do you enjoy about working in Angular? * Angular * 35:08 Sponsor: Hasura * 36:30 Supper club questions * Night owl
Shameless Plugs * Guest: React Router
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
In this episode of Syntax, Wes and Scott talk through the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, and more.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:11 Welcome * 04:34 What are threads? * 06:12 Concurrent vs parallel * 09:22 Green screen web cam example * 13:02 Examples of what you could use web workers for * Party Town * Deno * 19:52 Sponsor: LogRocket * 20:42 Post Message API and Web Workers * 25:57 What about WASM? * 27:28 Offline sync * 28:14 What are service workers? * 31:20 How do you caching sites for offline use? * 32:39 Web worker vs service worker * 34:12 Sponsor: Sanity * 35:40 What is the lifecycle of a service worker * 38:18 Possible issues with Service Workers * 42:46 Debugging service workers * Svelte Kit Service workers * Workbox * 43:04 Testing and local development * Service Workers notes from Wes’ Workshop * 46:45 Sponsor: Freshbooks * 49:59 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads * Wes: Samsung Frame TV
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the past 499 episodes of Syntax, what have been the most downloaded episodes, their favorite episodes, and the sickest of sick pics.
Sentry - Sponsor Attend Dex
If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
Show Notes * 00:28 Welcome * 01:44 Sponsor: Sentry * 03:28 Sponsor: Payments Hub * 04:36 20 million! * 05:57 Our current recording process * Libsyn * 09:09 Top 10 episodes * 162 - The Fundementals JS * 92 - React Hooks * 158 - The Fundamentals HTML + CSS * 66 - The React Episode * 44 - How to Learn New Things Quickly * 198 - How to Get Better at Problem Solving * 20 JavaScript Array and Object Methods to make you a better developer * 188 - The Fundamentals - Server Side * 174 - How to Build an API * 120 - Gatsby vs Next * 18:00 Our favorite episodes * 193 - Spooky Stories * 400 - Horror Stories 2021 * 250 - Scott Teaches Wes Svelte and Sapper * 60 - Undocumented Web * 23:00 Questions from Twitter * Twitter questions
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
In this supper club episode of Syntax, Wes and Scott talk with the author of Svelte, Rich Harris, about what influenced the creation of Svelte, his thoughts on web components, the virtual DOM, why companies are switching to Svelte, and what’s next for Svelte.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Show Notes * 00:33 Welcome * 02:10 Who is Rich Harris? * Rich Harris on Twitter * 02:55 What is Svelte? * Svelte * Vercel * Svelte Kit * 06:52 What influenced the template language for Svelte? * 10:03 What do you use the const tag for? * 10:49 Sponsor: Gatsby * 12:04 What about immutability issues? * 17:49 What about web components? * 21:51 Why does Svelte not need the virtual DOM? * 27:34 Sponsor: Lightstep Incident Response * 28:45 What is your favorite part of working in Svelte? * 32:31 Why are companies switching to Svelte? * 34:35 What is the SvelteKit timeline? * 38:52 What’s the next version of Svelte include? * Motion * 41:36 Any thoughts on new backend JavaScript environments? * Web Interoperability * 45:39 Supperclub Questions * 52:40 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Rich: Mullvad VPN
Shameless Plugs * Svelte Origins
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
In this Hasty Treat, Scott and Wes talk about their thoughts on the different types of tech jobs you can get, and the pros and cons of each style of job in tech.
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:10 Welcome * 01:47 The types of jobs * Wes’ tweet about developer jobs * 03:02 Our experiences * 05:58 Tech company * 09:46 Freelancer or Entrepreneur * 11:14 What are the pros of working at a agency? * 18:38 Cons to agency life * 26:19 Sponsor: Lightstep Incident Response * 27:49 Pros of tech company jobs * 30:47 Cons of working at tech companies * 37:46 Sponsor: Freshbooks * 38:51 Pros of in house tech jobs * 46:01 Cons of tech work * 51:29 Sponsor: LogRocket * 52:28 Pros of freelance or entrepreneur * 57:20 Cons of entrepreneur life * 00:03 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Wes: Soap pump * Scott: Pro breaking tour
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk about proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:11 Welcome * 00:58 Sponsor: Sentry * 02:17 Sponsor: Sanity * 03:32 CSS @when and @else * CSS When and Else
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }
* 05:42 CSS Grid 3 Masonry
* CSS Grid
.grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; }
* David Desandro
* Rachel Andrew
* 09:00 CSS Caret
* CSS Caret
* 10:32 CSS Nesting
* CSS Nesting
* Syntax 343 CSS Nesting
* Postcss-preset-env
* 13:14 ENV Vars
* ENV Variables
* 14:58 Media Query Ranges
* MDN Media Queries
@media (width < env(--small_bp));
@media (100px < width < 1000px);
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
In this supper club episode of Syntax, Wes and Scott talk with Josh Larson from Shopify about headless ecommerce, including Hydrogen from Shopify, how integrations work with Shopify, and what the tech stack is behind Hydrogen.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Show Notes * 00:38 Welcome * 01:12 Guest introduction * 03:16 What is Hydrogen from Shopify? * Hydrogen * Shopify Oxygen * 11:23 Why would you want to go headless? * 15:26 Sponsor: Hasura * 16:56 Where does custom logic fit? * 18:45 What is the stack behind Hydrogen? * 24:16 Sponsor: Lightstep Incident Response * 25:33 How much code is JavaScript vs React? * 33:43 How do integrations work? * 38:28 Supper Club Questions * In Bed By 7pm VS Code Theme * Zsh * Hyper * Laravel * Vite * Cloudflare Workers * Rust * Rust for JS * 48:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * The Story Of by Vice
Shameless Plugs * @JPLHomer * Shopify Editions
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
In this potluck episode of Syntax, Wes and Scott answer your questions about middleman for API fetching, when to introduce SvelteKit, generating PDFs serverside, trade offs of being an entrepreneur vs employee, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:18 Welcome * 02:50 Is there a way to create a “middleman” to fetch data from an API once a day? * Redis * 06:53 Should I wait before introducing team members to SvelteKit? * SvelteKit V1 issues * 10:28 What options do we have for generating PDFs serverside? * WKHTML to PDF * Puppeteer * PhantomJS * html2canvas * Generate Invoice Workers * 15:47 Sponsor: Prismic * 17:08 How do you say thank you to sponsors? * 18:32 How would you compare the tradeoffs of working at a tech company vs. an agency vs. freelancing vs. entrepreneurship? * 20:47 What’s the best way for an oldie like me to catch up? * CSS Grid.io * Modern CSS Layouts * 26:08 I’m wondering what do you think about tRPC? * trpc.io * Create t3 app * 29:00 Sponsor: LogRocket * 30:03 PDF creator Cloudflare worker * 32:50 How do you feel about keeping separate accounts for things like Twitter? * 37:28 Does using prototypes mean you are not doing functional programming? * 42:09 PHP vs JavaScript based CMS * Ghost * Keystone * Strapi * 45:15 Sponsor: Auth0 * 46:21 Why do you think this mindset that with age comes an inability to learn? * Syntax 44 How to Learn New Things Quickly * 51:32 Are there other payment providers you guys recommend or should I stick with Stripe and hope for the best? * Stripe * Paypal * 56:10 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Literature and History * Wes: Kitchen faucet
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the various web browers that might show up in your analytics and whether you need to worry about supporting them or not.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes * 00:25 Welcome * 01:19 Sponsor: Sentry * 02:29 Sponsor: MagicBell * 03:51 Big browsers and their engines * 05:29 Cloaked browsers * 08:16 What’s so great about Arc? * Arc * 11:33 JavaScript engines * 13:30 iOS Browsers * Open Web Advocacy * 15:07 Android browsers * 18:04 The rest of the browsers * 19:24 Tor browser * 20:20 Opera mini * 22:48 UC browser * 23:42 Opera mobile * 24:57 KaiOS * 26:26 Ringtone memories
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
In this supper club episode of Syntax, Wes and Scott talk with Lee Robinson from Vercel about React Suspense, server components, the edge, and more!
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Show Notes * 00:35 Welcome * 01:34 Guest introduction * LeeRob.io * Vercel * 02:25 Syntax hosted on Vercel * 04:08 What is suspense? * 06:50 Benefits of selective hydration * 13:15 Sponsor: Lightstep Incident Response * 14:24 How does suspense know you’re doing something inside of it? * 18:02 How does this connect to server components in React? * 22:00 How do we use this in NextJS? * 24:32 NextJS routing future * Layouts RFC * 33:11 Will I ever be able to use web components inside NextJS? * 36:12 Sponsor: Gatsby * 37:14 What’s happening with the Edge? * Edge Runtime * 47:37 What should we use for databases? * 50:39 Supper Club dessert questions * OhMyPosh * Hyper * Warp * Svelte * Hackernews * Reddit * 58:57 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * AirPods
Shameless Plugs * Careers at Vercel
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
In this episode of Syntax, Wes and Scott talk through their web dev wish list of things they want to just work already!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:11 Welcome * 02:20 Write Custom animation transitions * 03:32 date input translate to JavaScript date * 06:48 Smooth and animated drag and drop * 08:35 TypeScript Interfaces are faster than Types * 10:35 Request animation frame * 12:52 Custom Elements / Web Components * 13:52 Authentication * Web Authentication API * 16:12 Sponsor: Linode * 17:48 useIsomporphic vs useLayoutEffect * 19:48 useEffect dependency array * 21:27 fragments without fragments * 24:46 Overflow hidden without hiding shadows * 27:11 Fluid text * 28:52 Sponsor: Sentry * 29:34 translate3d vs translate * 30:59 Gradient borders * 33:33 Independent transforms * 36:16 animate height auto * 38:40 Sponsor: Freshbooks * 39:02 Auto synced deps when changing package file * 40:36 Peer dependencies * 42:32 VS Code Reload after plugins install is kinda annoying * 43:04 Safari updates * 44:20 Apps checking for passwords * 45:02 File name casing as changes * 45:56 Better sounding commit names * 46:33 Test runner that is the same and just works * 47:32 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Arc browser / Video * Wes: Battery powered glue gun
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk the appreciation of coding projects that supposedly serve no purpose, but can be great ways to learn something new.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 00:39 I am excited about coding * 02:40 Sponsor: LogRocket * 03:58 Sponsor: Linode * 04:24 Projects that serve no purpose * Bookit * 05:46 Scratching your own itch * 10:06 Discount finder * 11:20 Webcam or audio manipulation * 12:43 TTFS * Parcel * Vite
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
In this supper club episode of Syntax, Wes and Scott talk with Syed Balkhi about his experiences blogging and developing plugins in the WordPress ecosytem.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Sponsorname - Sponsor Show Notes * 00:32 Welcome * 01:52 Guest introduction * WPBeginner * WP Beginner YouTube * CSS Tricks * Smashing Magazine * 04:33 What tips do you have for blogging and audience building? * AnswerthePublic * 09:09 How do you manage so many people? * 13:07 What was your background before this all got big? * 13:43 Sponsor: Hasura * 15:01 How do you design your products? * 18:40 YouTube, TikTok, and video * 25:12 Why the WordPress hate? * 29:03 What types of websites are being created in WordPress? * Easy Digital Downloads * WooCommerce * MemberPress * 34:13 Sponsor: Lightstep Incident Response * 35:26 What schools are you building? * Balkhi Foundation * Pencils of Promise * 40:51 Supper Club questions * Copyhackers * Swiped * Uncanny Automator * 53:07 SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Streaks App * Ready Player Two * WP Forms * AwesomeMotive
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
In this Potluck episode of Syntax, Wes and Scott answer your questions about resolving node version errors, using social media, bundler for building React component, and how does Syntax get made?
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * OhMyPosh * OhMyZ.sh * Warp * 02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile? * 07:50 Any advice for using social media to network? * 16:44 What bundler are you reaching for when building a React component library? * tsdx * Vite * 18:37 Do you have experience with optimizing third party scripts like Google Analytics? * Partytown * 21:37 What’s your opinion on a “offline-first” mentality? * PouchDB * CouchDB * Supabase * MongoDB Realm * 25:09 Sponsor: Prismic * 26:48 How do you make web components with Svelte? * Build web components in Svelte * Using custom elements in Svelte * 30:35 When talking about “responsive” web design do people generally mean using flexbox or grid? * Responsive Design at 10 * Responsive Web Design * A Book Apart - Responsive Web Design * 35:24 Sponsor: Sentry * 36:53 Do you have any tips for staying in React-land for just spinning up a fresh site quickly? * 40:47 Who or what helps you produce and distribute the podcast? * Lemon Productions * Chris Enns on Twitter * 46:08 Should a majority of _lodash functions be considered deprecated follow up * 48:18 Sponsor: Freshbooks * 48:52 Do you have any tips or tricks to deal with backend data date issues? * 52:23 Is the “col” system the peak of how we handle CSS, or should we start using more built-in functions? * 55:25 Why you you need CSS Color Functions at runtime instead of just pre-calculating these values once as a build step using LESS or SASS? * 58:58 SIIIIICK ××× PIIIICKS ××× * 03:12 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Can tumbler glasses * Wes: Car Sound Deadener
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What’s on Bun’s roadmap? And why do we need another JavaScript runtime?
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:23 Welcome * 01:21 Sponsor: Freshbooks * 02:07 Sponsor: Lightstep Incident Response * 03:20 What is Bun? * Bun * Deno * 08:20 Why is Bun so fast? * Zig * 12:32 Module support * 15:11 What’s not implemented yet in Bun? * What’s not implemented in Bun yet * 17:01 Config file in toml * 18:08 Bun roadmap * Bun roadmap * 20:27 Why do we need another JavaScript environment?
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
In this supper club episode of Syntax, Wes and Scott talk with Adam Cowley about how Neo4j Database can help when working with data for your next app.
Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Show Notes * 00:15 Welcome * 01:24 Guest introduction * 03:15 Browser innovation and testing * 05:01 What is a graph database? * Neo4j Cypher * Sanity Groq * 08:11 Is there a specific type of data that works best in a graph database? * 11:57 Sponsor: Lightstep Incident Response * 13:14 What’s AuraDB vs Neo4js? * 15:01 Whiteboard friendly data model * 19:52 How are GraphQL and graph related? * 23:08 Can you sync with MongoDB? * 24:41 How do you pull data into a div on the web? * 29:19 Why are you used for data science a lot? * 30:43 Sponsor: Gatsby * 31:51 Is visualization an important part of Neo4js? * Neo4j Bloom * 36:01 Do you have to think about indexing with graph databases? * 39:43 Are there uses Neo4j isn’t as good for? * 40:22 Do you have to cache queries? * 41:26 Dessert questions * Intellijet Idea * Cobalt 2 Theme * 50:36 Shameless Plug * Neo4j Desktop * Neo4j Cloud * 54:45 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Hue Lights
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
In this episode of Syntax, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:07 Welcome * 01:56 Functional vs object oriented * 03:49 Interfaces vs types * 05:38 Tabs vs spaces * 07:02 Semicolons vs no semicolons * 08:10 Let vs const * 09:33 Do you explicitly type or allow TypeScript do it’s magic? * 11:26 Naming variables * Naming convention for programming * 15:13 Methods of looping * 18:03 if statement curlys * 20:57 Naming files * 24:46 Inline testing vs running test as a process * 25:31 Sponsor: Freshbooks * 26:37 CSS property:val; or property: val; * 27:40 CSS nesting? * 29:49 Alphabetizing CSS properties * 31:11 Rems, Ems, PX, Etc… * 33:37 How do you center something in CSS? * 35:22 How do you make something 100% height? * 36:52 Sponsor: Sentry * 37:30 Should comments exist? * Better Comments * Wes’ custom parser for VS Code * Todo Tree * 42:31 Creating HTML * 45:28 Components in app or in isolation? * 47:41 Sponsor: Sanity * 48:45 Single component per file vs multiple * Storybook * 50:22 Naming components * 51:19 General stuff * 53:55 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Scott’s iPad case for kids * Wes: Garbage can with custom bags.
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes try to stump each other with coding interview questions like what is a higher order component? What is functional programming? And more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Show Notes * 00:26 Welcome * 01:47 Sponsor: Lightstep Incident Response * 03:00 Sponsor: Sentry * 04:10 What is a higher order component? * 05:34 What is functional programming? * 09:00 What’s the purpose of cache busting and how do you achieve it? * Wes’ course for Beginner JavaScript * 10:37 What is short circuit evaluation? * 13:19 What is a closure? * 15:49 What is the reason for wrapping the contents of a JavaScript source file in a function that is then invoked? * 17:30 Can you describe how CSS specificity works? * 20:15 How does prototypal inheritance differ from classical inheritance? * 23:56 What is the difference between a parameter and an argument?
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
In this supper club episode of Syntax, Wes and Scott talk with Kristi Perreault of Liberty Mutual about why they’re using serverless functions, what languages they write in, managing security and montoring, and Kristi’s journey into tech as a career.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Stack Overflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code.
Listen to new episodes twice a week, wherever you get your podcasts.
Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident.
Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt.
Show Notes * 00:33 Welcome
* 03:24 Guest introduction
* @kperreault95
* Kristi Perreault on Dev.to
* Kristi Perreault AWS Hero
* Liberty Mutual
* 04:55 Developers at Mutual Liberty
* 07:05 What did you do before serverless functions?
* 08:36 Why are you using serverless functions?
* 12:39 What languages are you writing for serverless functions?
* 15:53 Sponsor: Hasura
* 17:22 Where does all the code live?
* 20:58 AWS CDK
* AWS CDK
* CDK Workshop
* 25:55 Sponsor: Lightstep Incident Response
* 27:07 How did you get into tech?
* 31:44 How do you organize all the functions?
* 33:51 How important is security?
* 35:23 What are IM roles?
* 36:16 How do you deal with spiking and monitoring?
* Datadog
* Splunk
* 41:20 Sponsor: Stackoverflow Podcast
* 42:02 Have you used Edge functions?
* 42:50 Supper Club Questions
Off by None newsletter
Ready Set Cloud
××× SIIIIICK ××× PIIIICKS ××× * Loki on Disney+
Shameless Plugs * Real World Serverless Podcast
* Serverless Denver Group
* AWS Summits
* @ServerlessCO
Kristi Perreault on Medium
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
In this potluck episode of Syntax, Wes and Scott answer your questions about peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:03 Welcome * 01:53 Configuring home internet routers * 04:42 Scott’s Home Assistant update * Mushroom Theme * 07:52 Could you explain to me peer-dependencies and how does it work? * 13:24 Using Vitest do you still have to transpile code? * 16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD. * 18:49 How can I update the “updatedAt” field of the document on every save automatically? * 20:40 What is aggregation, and when do you use it? * 25:33 Sponsor: Prismic * 27:27 How does NVM relate to PNPM? * pnpm * nvm * 30:45 I’m looking to upskill from front-end JavaScript? * 33:53 Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly? * Creating a private npm package * 37:51 Sponsor: LogRocket * 39:14 Should a majority of lodash functions be considered deprecated? * angus c just * 42:36 Please do an episode on programming/learning with ADHD. * 44:04 Should I still be putting images in sprites? * 49:20 Does Mux have a simple mechanism for adding auth to each video or group of videos? * Mux Create playback restriction * 53:48 Sponsor: Sanity.io * 55:02 Is there copyright issues with using public APIs? * Moneypuck * 59:38 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Toto Bidet * Wes: Sodastream
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about clamp and interpolate and how you might want to use them in your next project.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
NAME - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
Show Notes * 00:25 Welcome * 00:52 Sponsor: Sentry * 01:31 Sponsor: Payments Hub * 02:40 Topic introduction * 05:05 What is Clamp?
CSS clamp:
font-size: clamp(1rem, 10vw, 2rem);
JavaScript Clamp:
const clamp = (num, min, max) => Math.min(Math.max(num, min), max)
- 09:12 What is Interpolate?
- D3 Interpolate
- 12:56 Interpolate in colors
- 14:37 Quantize
- D3 Quantize
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
In this supper club episode of Syntax, Wes and Scott talk with Pokey Rule about using his voice to code, and the current state of voice coding software.
Stackoverflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code.
Listen to new episodes twice a week, wherever you get your podcasts.
directus - Sponsor Directus is an open-source data platform that instantly layers on top of any SQL database. Our Data Engine empowers engineers with dynamic REST+GraphQL APIs, workflow automation, built-in auth, caching, and asset transformations. And the included Data Studio democratizes your database, allowing even non-technical users to browse, manage, and visualize database content through a no-code data collaboration app.
Get started in minutes with a free Directus Community Cloud project.
Show Notes * 00:33 Welcome * 01:35 Guest introduction * Con 2021 - Cursorless: keyboards and mice are sooo last year!! by Pokey Rule * Emily Shea * 05:12 How does coding with your voice work? * Talon Voice * Cursorless Talon * 09:45 How do you handle triggering wrong words? * 11:41 Sponsor: The Stack Overflow Podcast * 12:26 Example of voice coding * Parrot * 14:21 What are the noises you make for? * 24:29 Working on multiple lines at the same time * 27:37 How do you decide where the hats go? * 31:18 Sponsor: directus * 32:59 What is the community of users like for this? * Tree Sitter * “Incremental, zero-config Code Nav using stack graphs” by Douglas Creager * 35:20 Does eye tracking work? * 36:48 What kind of mic do you use? * DPA Microphone * The Voice Book * 39:25 Supper Club questions * Dark Abyss VS Code theme * Kinesis Freestyle 2 * Charybdis Nano keyboard * Nexstand * Arxiv Sanity * Subvocal Recognition * Imagen Research * Midjourney * 54:11 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Git Imerge
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials * Pokey: YouTube channel, Sponsor Pokey on GitHub
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
In this episode of Syntax, Wes and Scott talk about their experiences speaking at conferences, why they’ve done it, how they prepare talks, and tips for anyone interested in wanting to give talks.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:02 Welcome * 01:38 Stanley Cup update * 03:13 Legoland update * 04:09 Topic introduction * Nicole Sullivan * Tweet looking for questions * 05:03 Why speak at conferences? * 08:56 Travelling for free * 09:50 Getting paid to speak at conferences * 12:23 Doing in person workshops * 14:55 How do you get into speaking? * 19:25 Meetups * 20:30 Sponsor: Linode * 21:15 What should you speak about? * 26:27 Something you did a deep dive on * 29:21 Sponsor: Freshbooks * 30:04 Flight protection and travel insurance * 32:59 Idea: update to a library * 33:28 How to get conferences to invite you to speak? * 36:03 How do you prepare for a talk? * 42:40 How to find conferences looking for speakers * 44:09 How to create a topic that will get picked * 46:59 Sponsor: Sentry * 48:06 Software for your slides * Slides.js * Slides.com * MDX Deck * Notion * Figma * Google Slides * Lydia Hallie * Keynote * 56:28 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Risk for iOS * Wes: Barrina LED T5 Integrated Single Fixture
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about new CSS color functions, and tips for viewing the different options and ways of presenting color that are coming.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 00:25 Welcome * 01:35 Sponsor: Linode * 02:22 Where the CSS spec for Color functions are at the moment * 05:13 New CSS Color mix function * 10:29 Color for the color challenged * 12:53 Color contrast function * 15:06 Programatically alter colors * Anyone have a really great CSS Variables color system strategy? * Color for the color challenged * Better color tools * the color-contrast() function * Benjamin Moore Paints as CSS Colours
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
In this supper club episode of Syntax, Wes and Scott talk with Shawn Wang about his thoughts on developer experience, why DX is important, and the importance of learning in public.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:32 Welcome * 01:56 Guest introduction * swyx.io * Why Temporal? * 06:09 What is Developer Experience? * Sarah Drasner * 08:35 Is VS Code considered DX? * 09:28 Why is internal DX important? * Vercel * NextJS * 11:44 Is DX helpful to small organizations as well? * 15:27 Parsimony * Parsimony * 16:43 Is productivity the main focus? * 21:09 Sponsor: Hasura * 22:48 What are your thoughts on React? * 27:31 Designing for API success * 30:44 Sponsor: LogRocket * 32:07 What is external developer experience? * 36:05 Learning in public * 40:46 Supper Club questions * dx.tips * Retreon VS Code Theme * Agnoster ZSH Theme * freeCodeCamp * Frontend Masters * QConf * Learn in Public
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Stormlight Archive
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk about their tips for better communication in email, Zoom calls, code reviews, or asking for help.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes * 00:10 Welcome * 01:39 Furnace wiring fun * Ecobee * Tweet asking for communication tips * 05:37 Email communication * SavvyCal * Calendly * 15:07 Recognizing a big ask * Simeon Griggs - How to ask for things * 24:01 Sponsor: Sentry * 25:52 Code review communication * 30:39 Sponsor: Sanity * 32:22 Sharing information with a video * 35:42 In person or one on ones * 39:36 Video calls * Storyboard.fm * 40:54 Realize it’s ok to stop talking * 42:27 Sponsor: Auth0 * 44:13 Tips from Twitter * 53:08 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Drachinifel * Wes: Lepy LP-2020A Hi-Fi Stereo Audio
Shameless Plugs * Scott: LevelUp Tutorials on YouTube * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * WICG Shared Element Transitions * 00:21 Welcome * 01:33 Sponsor: Prismic * 02:43 Sponsor: LogRocket * 04:18 Browser animations on the web vs native apps * 06:15 What is the targeted use case for it? * 06:56 Shared Element to Root Transitions * 11:14 Entry and Exit * 17:33 How to enable this in Chrome * Example Code * Shared Element Transition history * Sarah Drasner’s demo
async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // Set up animations using WA-API on the next frame. requestAnimationFrame(() => { document.documentElement.animate(keyframes, { ...animationOptions, pseudoElement: "::page-transition-container(message)", }); }); // Note that when this callback finishes, the animations will start with the tagged elements. }); }
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
In this supper club episode of Syntax, Wes and Scott talk with Tim Leland - developer of browser extensions like WeatherExtension and Link Shortener Extension.
Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.
If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.
Listen to new episodes every Tuesday, wherever you get your podcasts.
WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time.
WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more!
Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
Show Notes * 00:33 Welcome * 02:21 Guest introduction * @tim_leland * TimLeland.com * WeatherExtension * Link Shortener Extension * 03:40 Why develop browser extensions? * 07:58 How did you market your extensions? * 09:43 Where is a Chrome extension running? * Caddy * 14:29 What’s your URL shortener extension? * 18:50 OneLink service * 20:30 SSL Domains * 21:35 Sponsor: The Postlight Podcast * 23:00 Maliciousness with URL shorteners * 28:26 How do you come up with ideas? * 30:03 Running Chrome extensions as Firefox extensions * 34:03 Does blogging still work? * 36:38 Sponsor: Sendlayer * 37:53 Supper club questions * Tim Leland /uses/ * 45:12 ××× SIIIIICK ××× PIIIICKS ××× * Tchibo Coffee machine
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Tasty Treat, Scott and Wes talk about the current state of home automation, and the kinds of software and hardware they’re using in their homes to automate their lives.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:11 Welcome * Syntax Ep181 Automating Stuff * 02:18 Protocols * 07:35 Software * Homebridge * Hoobs * Home Assistant * 11:28 Using Homebridge * 16:51 Home Assistant vs Homebridge * 24:35 Home Assistant automations * 27:26 Wyze cams * 33:13 Sponsor: Sentry * 34:31 Hardware * Philips Hue * Leviton * Synology * Node-RED * Docker Wyze Bridge * U-Tec * 38:00 Bulbs * 40:24 Buttons * Lutron Aurora Smart Bulb Dimmer Switch * Flic Button * 42:53 IR Blasters * 45:57 Sensors * 47:56 Motion sensors * 52:05 Sponsor: Auth0 * 53:28 Switched switches * 57:36 Sprinklers * 58:54 NFC * /r/Homeassistant * Shelly * 01:04:03 Sponsor: Freshbooks * 01:05:01 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Severence on Apple TV+ * Wes: INKZALL
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Beginner JavaScript
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
In this episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them?
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:25 Welcome * 01:14 Sponsor: LogRocket * 02:24 Sponsor: Sanity * 04:19 What are viewport units? * The Large and small and dynamic viewports * 05:22 What are the new viewport units? * Large small and dyanmic viewports * 07:57 What’s small and large? * 11:52 How do viewport units help developers? * 12:39 What about the keyboard on mobile? * Keycode.info * 16:37 When can we start using new viewport units?
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
In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.
If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.
Listen to new episodes every Tuesday, wherever you get your podcasts.
WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time.
WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more!
Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
Show Notes * 00:36 Welcome * 02:31 Who is Eduardo? * EduardoBoucas.com * @eduardoboucas * 04:29 What is a serverless function? * 06:42 What is the edge and an edge function? * Edge Functions Explained * Deno * 08:41 Sponsor: Hasura * 09:18 The internet is global, and server locations matter * 17:09 Chaining multiple edge functions * 20:18 Sponsor: WP Mail SMTP * 21:18 Why use Deno? * 25:06 What are the limitations of using Deno? * 28:12 Why not run NodeJS servers on the edge? * 30:02 Do you see a future where people are writing packages that work anywhere? * 32:00 Sponsor: Postlight Podcast * 32:53 What about databases and serverless functions? * Planetscale * 38:14 What language does Netlify use to write apps in? * Netlify Edge Handlers * 44:08 Supper Club questions * Warp * S Town Podcast
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott answer your questions about headless WordPress, Regex, their health and fitness, CSS custom properties in media queries, and more.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
Show Notes * 00:10 Welcome * 03:30 If I host a NextJS app on Digital Ocean, should I use a Digital Ocean database? * 09:14 Will either of you ever do a regex course? * Regex101 * 13:58 Is it possible to use the WordPress users database as the same database that the app uses? * WPGraphQL * 18:46 Sponsor: Sentry * 19:43 How is health and fitness going for the both of you? * 26:08 Does Wes know who Gendo Ikari is? * 27:36 Dart popularity follow up * 29:40 Is it vital that I should learn another programming language? * 33:42 Sponsor: Sanity * 34:54 If I’m trying to get my first job in web development, do I need to be familiar with design software? * Figma * 40:01 Thank you for the confidence to apply for a web dev job * Syntax 463 with Tom Preston-Werner * 41:55 What advice will you give in terms of setting up core important things around network, state management, folder structure? * 45:37 .TECH Domain Names * 46:22 I just had an interview with a “major tech company” and your article on using string templates was really helpful. * Template Strings * 48:43 If 80% of the time ew need to use preventDefault on form submission, why don’t the simply change the HTML spec? * 50:01 What’s the rationale for not supporting CSS custom properties in media queries when using max/min width? * CSS Env * MDN CSS Env * 55:37 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: * You Must Remember This Podcast * Wes: Tools
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.
MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:25 Welcome * 01:19 Sponsor: MagicBell * 02:31 Sponsor: LogRocket * 03:40 Don’t say stupid * 05:03 :Has * MDN :Has
``` // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find Hi
// would not find hi
``` * 06:13 Jargon check * 11:01 Some examples * 13:25 Nest navigations * 13:51 Can I use it? * 15:52 Is and Where * MDN :where
In the past we would write
header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; }
:where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer
:where(header, main, footer) p:hover {}
Also super handy in avoiding css blocks being ignored for unsupported features.
// Doesn't work div:has(p), div:some_new_selector(p) // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p))
* When to use :Where
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
In this supper club episode of Syntax, Wes and Scott talk with Connor Finlayson about his experience building and teaching no code projects.
Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco.
If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered.
Listen to new episodes every Tuesday, wherever you get your podcasts.
SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster.
You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code.
Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube.
Show Notes * 00:38 Welcome to Syntax * 01:54 Guest introduction * Unicorn Factory * ConnorFinlayson.com * Connor’s YouTube channel * 04:49 What is no code? * 10:57 Is no code going to replace programmers? * 14:57 Sponsor: Postlight Podcast * 15:59 What are your favorite tools for no code? * Zapier * Webflow * Make.com * Airtable * Memberstack * Jetboost * Bubble * 19:23 When do you need to use real JavaScript? * 23:23 Where do you find information about no code? * 25:26 Sponsor: SeedProd * 39:25 How do you handle version control? * 43:26 Are there native apps in no code land? * Notion * Editor X * 46:16 What is AirTable? * 49:36 Cost of no code tools * 52:45 Sponsor: Strapi * 53:45 Supperclub Questions * 06:42 Shameless Plugs * CodeMeetsNoCode * 09:49 Sick Picks * Flowbase * Relume
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott are live from Reactathon 2022!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * Live video version
* 00:32 Welcome
* 04:10 Hot Take Tweets
* What is your JavaScript Hot Take or unpopular opinion?
* 05:42 Semi colons are not optional
* 06:11 For loops are not needed
* 07:19 People forget about ES Harmony
* 08:11 Sponsor: Sentry
* 09:23 A good website should function without JavaScript
* 10:28 Classes were a mistake
* 10:54 Stay as close to the platform primatives
* 11:36 TypeScript is overrated and overhyped
* 11:50 Kickin it old school
* PNG Fix
* MM Swap image
* Rounded Corner images (sliding Doors)
* var that = this;
* IE CSS Hack
* Test for Opera var test = /^function \(/.test([].sort);
* 25:09 Sponsor: Payments Hub
* 26:29 Syntax Error
* Mercurius Library
* 31:19 JS or NAY-S
* 39:02 Sponsor: Freshbooks
* 39:23 Q&A
* Syntax episode with Josh Wardle
* 39:57 Using Array methods or for loops
* 41:12 What web tech is overhyped and what’s under hyped?
* 43:01 Would you rather use Dvorak or Mac butterfly keyboard?
* 43:41 Name all provinces and territories in Canada
* 44:39 Fav Syntax.fm episode
* 45:38 How did Wes and Josh meet?
* 46:52 What’s your favorite Trader Joes snack?
* 47:29 Would you hire a European or American developer?
* 49:04 How would you validate a product idea for Saas business?
* 49:48 What podcasts do you listen to?
* Steve O Podcast
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about ways to prevent malicious people from using or abusing your app.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:26 Welcome * 01:04 Sponsor: Linode * 02:06 Sponsor: Sentry * 02:59 What kind of bad things can happen to your application? * 06:24 How do you stop bad actors? * 12:20 Nonce tokens * 14:10 CSRF * CSRF Explained * 14:50 Captcha * hCaptcha * 17:06 DDOS * Cloudlfare DDOS * 17:38 Ban known bad ASNS
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
In this supper club episode of Syntax, Wes and Scott talk with Anselm Hannemann about burning out, trying out gardening, and how getting away from the screen can help restore your creative energy.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube.
SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster.
You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code.
Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory.
Show Notes * 00:39 Welcome * 01:58 Guest introduction * HelloAnselm.com * Anselm on Twitter * Web Development Reading List Newsletter * 10:04 Doing things yourself as a form of therapy * 14:33 Sponsor: Hasura * 16:34 Rules for digital usage? * 19:25 How do you learn you’re burned out? * 26:30 Sponsor: Strapi * 28:10 Gardening * Gardening site * Garden on Instagram * The Post Apocalyptic Inventor * 29:46 What do you feed your plants? * 34:09 Irrigation issues * 35:52 Sponsor: SeedProd * 38:03 Dealing with weeds * 40:54 What about chickens? * 44:20 Farming as a business * 45:39 Incorporating tech into the gardening * 54:06 Supper Club Questions * Today I Learned Stefan Judis * Web Design Weekly * 59:09 ××× SIIIIICK ××× PIIIICKS ×××
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk all about how they use Git inside of VS Code, extensions they use, and the various ways to interact with Git in VS Code.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
SPONSOR - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
SPONSOR - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:21 Recording Syntax in Riverside * Riverside * 01:22 Welcome * 04:57 CLI vs VS Code * VS Code * 07:27 Git Jargon * 11:50 UI tools we’ve used * Git Tower * Git Kraken * GitHub for Desktop * iTerm * Warp * Git SCM * 14:09 Ways to interact with Git in VS Code * 19:41 Source control tab * 26:28 Sponsor: Linode * 27:47 File History * 30:29 Diffing or Compare * 36:24 Conflict resolution * 42:56 Automation with post-commit commands * 46:10 Sponsor: LogRocket * 47:14 Extensions * GitLens * Git History * Git Graph * Conventional Commits * 53:59 Git config tip * 55:24 Sponsor: Freshbooks * 56:02 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Espanso * Wes: AirPod cleaning kit
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes answer a question about caching, cache control headers, an explanation of the fields for caching.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * Time to live calculator * Reminx Conf * Opera * The United States of Insanity - Official Trailer * 00:24 Welcome * 01:11 Sponsor: Sentry * 02:28 Sponsor: LogRocket * 03:08 My struggle has been with caching, cache control headers and would love a better explanation on some of the fields? * 04:48 What is a header? * 06:05 What is caching? * 08:21 Time to live (TTL) * 09:08 Benefits of a cache * 10:03 Specifying how long to cache * 11:06 max-age * 12:45 stale-while-revalidate * 16:17 stale-if-error * 16:54 must-revalidate * 17:21 private * 18:03 immutable * 19:29 no-transform * 20:45 Cache Control Request Directives
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
In this supper club episode of Syntax, Wes and Scott talk with Tom Pretson-Werner about his work on RedwoodJS, the importance of documentation, and the new Redwood Startup Fund.
AIOSEO - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, AIOSEO, also known as All in One SEO for WordPress. It’s becoming one of the most powerful SEO toolkit and is now used by over 3 million websites to improve search rankings.
Shipshape (Whiskey, Web and Whatnot) - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey!
Show Notes * 00:34 Welcome * 01:36 Guest introduction * Tom Preston-Werner on Twitter * Kai’s Power Tools * 04:23 Math is weird * 07:21 User interface design * 08:53 Sponsor: AIOSEO * 10:24 What is RedwoodJS? * RedwoodJS * Chatterbug * 15:31 Is JavaScript the stack you should be using these days? * 18:40 Freedom vs decisions in software * Where Good Ideas Come From * 23:10 RedwoodJS docs and video strategy * RedwoodJS Docs * Readme Driven Development * 29:13 The tech behind RedwoodJS * Apollo * Storybook * 36:20 Sponsor: Shipshape (Whiskey, Web and Whatnot) * 36:58 Redwood Startup Fund * The Redwood Startup Fund * 42:28 Supper club questions * VS Code * Netlify * Hacker News * RedwoodJS on Discord * RedwoodJS Discourse * RedwoodJS on Twitter
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk through TypeScript tooling, build tools, configs, and editors.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:08 Welcome * 01:57 Tooling * tsc * esbuild * swc * bun * Zig * 13:45 LogRocket * 15:01 Server side or node-ish * Deno * ts-node * wds * 26:09 MagicBell * 27:42 Build tools * Vite * Parcel * Nextjs * Svelte Kit * Rome * 33:25 Configs * tsconfig * typescript-eslint * 39:08 Sponsor: Freshbooks * 40:00 Editors * VS Code * Webstorm * 44:58 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: Tonie * Wes: Burst Toothbrush
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Scott talks about his new office setup where he records videos and podcasts, writes codes, and gets his steps in.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:15 Welcome * 01:24 Office ideas * Heat pumps on Technology Connections * Neewer lighting * 05:00 Sponsor: Sanity * 06:10 Sponsor: Sentry * 07:37 Levelup Lodge tour * 09:40 Lighting * 13:57 The desk * Karlby Countertop * Fully Jarvis legs * Desk Haus * 19:32 Audio gear * M-Audio BX8 * Gik Acoustics * Nero * Scarlett 2i2 * Caldigit TS3 Plus * Electrovoice RE20 * Cloudlifter cL1 * DBX 286s * Sony Alpha 7 III * Audeze LCD 1 * 25:25 Tech setup * 33:00 Misc items * 35:43 Movie posters * Shaw Brothers posters
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this supper club episode of Syntax, Wes and Scott talk with Jared Palmer about Turbo Repo, how it fits in your tech stack, and what it was like being acquired by Vercel.
Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey!
Show Notes * 00:35 Welcome * Jared Palmer * 02:15 What is Turbo Repo? * Turbo Repo * Vercel * tsdx * 03:27 Where does Turbo Repo fit in your stack? * 06:04 What are Google, Meta, or Twitter doing? * 15:35 Sponsor: Whiskey, Web and Whatnot * 16:45 What’s the cost of adding Turbo Repo to a project? * 21:19 Changing based on environmental variables * 23:18 Does this replace how you define your workplace? * 24:08 How do you share the cache? * 25:25 What don’t you cache? * 27:35 What about Gatsby images? * 28:44 Can Turbo Repo help with re-running compiles? * 36:54 Supper Rapid Fire Questions * Oceanic Next * GitHub Dark * Kotlin * 52:47 Selling Turbo Repo to Vercel * 55:49 Shameless Plugs
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this potluck episode of Syntax, Wes and Scott answer your questions about protestware, NoSQL, Next.js, the Syntax.fm website, ESM, Jest, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes * 00:10 Welcome * 01:30 What are the good reasons to use nextjs apart from personal preference? * 05:15 How did you decide to build Syntax.fm? * Uses.tech * 09:09 Why does my M1 Mac feel slower than my Intel Mac? * 14:44 Do you alphabetize your larger javascript objects by key name? * 17:14 Sponsor: Prismic * 19:06 Why did you choose noSQL database over SQL databse? * 25:13 What does it mean to support ESM? * 30:23 Sponsor: LogRocket * 31:35 Are open source maintainers doing harm by inserting protestware into packages? * Protestware found lurking in popular npm package * 40:30 Should I write the game logic on the backend or on the frontend? * 46:30 Sponsor: Auth0 * 48:20 Sick Picks
××× SIIIIICK ××× PIIIICKS ××× * Scott: Eons Mysteries of Time podcast * Wes: Mr Bio Multi cable
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about why we need Web Interop? Yet another standards body? Our thoughts on Serverless, Edge Compute, and more.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:23 Welcome * 01:25 Sponsor: Sentry * 02:25 Sponsor: Sanity * 04:10 The Syntax Lift adventure * 06:04 A new Community Group for Web-interoperable JavaScript runtimes. * 07:07 JavaScript environments * 09:19 What’s bun? * Bun * 13:28 Are we excited about this? * 16:27 What’s the future of this?
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
In this supper club episode of Syntax, Wes and Scott talk with Victor Savkin about NX Monorepo development.
Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey!
Visit whiskeywebandwhatnot.fm or find them wherever you listen to podcasts.
Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at strapi.io/demo, find your missing content workflow piece on our marketplace,and learn more about Strapi and how it help you on our Youtube channel.
Show Notes * 00:29 Welcome * 02:42 Guest introduction * 04:07 What tools did Google use? * 10:49 What do bigger companies use for version control? * 14:40 What is Nx? * Nx * 21:02 How does Nx help you upgrade projects? * 27:42 Sponsor: Whiskey Web and Whatnot * 28:33 How does Nx fit into the existing tooling? * 37:27 Sponsor: Strapi * 39:02 Caching and skipping builds * 44:50 The problem with caching * 48:44 Is it used for images or video? * 51:40 Small projects can benefit as well * 53:13 Lightning questions * Happy Hacking KB * IntelliJ * LunarVim * VS Code * 02:23 Shameless Plugs
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this episode of Syntax, Wes and Scott talk about 10 browser API’s you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:13 Welcome * 01:05 Dishwasher talk * 04:30 getUserMedia * Hair.WesBos.com * Javascript 30 * 07:22 FileSystem * Level Up Tutorials: Browser APIs * Electron * 12:50 Geolocation * 15:07 Sponsor: Prismic * 16:41 Permissions * 22:36 Web Animations * Web Animations API * Framer Motion * Motion One * 26:31 Resize Observer * Resize Observer API * 29:33 Sponsor: LogRocket * 30:45 Clipboard * Clipboard API * 34:10 Web storage * Web storage * 37:11 Sponsor: Freshbooks * 38:09 SpeechSynthesis * 41:32 SpeechRecognition * 46:14 ××× SIIIIICK ××× PIIIICKS ×××
××× SIIIIICK ××× PIIIICKS ××× * Scott: RCA to HDMI adapter * Wes: SlimLED
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about TypeScript Fundamentals, including narrowing, discriminating unions, and type guards.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
Show Notes * 00:24 Welcome * 01:35 Sponsor: Sentry * 02:23 Sponsor: Payments Hub * 05:21 Intro to TypeScript fundamentals * 06:28 What is Type Narrowing? * 09:32 typeof * 11:58 instanceof * 13:29 Custom typeguards * 16:12 this is * 17:59 discriminated unions
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
In this episode of Syntax, Wes and Scott talk about what edge functions are, the upsides and downsides of edge functions, and what they’re used for.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Show Notes * 00:10 Welcome * 01:56 A big announcement * 04:33 What is the Edge? * 08:27 The upsides of edge functions * 12:13 Cold start * 18:21 Sponsor: Linode * 19:24 What are downsides of edge functions? * 27:27 Sponsor: LogRocket * 28:35 What is the use case for an edge function? * 34:52 Authentication * 37:23 Caching * 40:51 Are there flavors of edge functions? * 44:00 Sponsor: Freshbooks * 46:06 What are edge functions not used for? * 47:39 What companies offer this? * 50:58 Sick Picks * Netlify announcing serverless compute with edge functions * Syntax 310 Serverless, Deno and TypeScript with Brian Leroux * Vercel Middleware * AWS Lambda
××× SIIIIICK ××× PIIIICKS ××× * Scott: Patented History of Innovations * Wes: Fastmov Precut Parchment Paper
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about why people still use Axios over Fetch, and why people wouldn’t use Axios.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:22 Welcome * Twitter thread of questions from listeners * 01:25 Sponsor: Linode * 02:07 Sponsor: Sentry * 03:04 What’s Axios? * Syntax 224 - Serverless Cloud Functions * 04:10 Why someone wouldn’t use Axios? * 07:06 Interceptors * 09:30 Catching expired JWT and renewing it * 10:26 Upload or download progress events * 12:03 Valid status API * 13:45 Defaults * 15:32 Custom timeouts
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
In this episode of Syntax, Wes and Scott ask each other hiring questions asked of JavaScript developers in job interviews.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * JavaScript Interview Questions * 00:13 Let’s get STUMP’d * 01:08 Cleaning out the garage * 05:05 What are 4 methods available on weakmap? * 07:07 How do you make an object iterable in JavaScript? * 09:29 How do you make the first letter of a string into uppercase? * 10:26 What is the typeof operator? * 11:53 What are classes in ES6? * 13:21 How do you enumerate key and value pairs of an object? * 15:44 Kontent by Kentico * 17:08 What is an event queue? * 21:05 Why do you need JSON? * 24:49 Why do you need a promise? * 25:45 Explain the range overflow property * 28:21 How do you return all matching strings against a matching expression? * 30:14 Sponsor: LogRocket * 30:51 What is a thunk function? * 33:46 Can you redeclare let or const variables? * 34:17 What are enhanced object literals? * 35:56 What is the difference between call, apply, and bind? * 38:52 Sponsor: Freshbooks * 39:57 What are benefits of modules and why would you need them? * 43:50 ××× SIIIIICK ××× PIIIICKS ××× * 48:47 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Who ARTed Podcast * Wes: Patio furniture
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about the coupon engines they’ve built and use on their courses.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:26 Welcome * 01:12 Sponsor: Prismic * 02:32 Sponsor: LogRocket * 04:06 What we use for coupons * Stripe * Braintree * 06:27 Structure of our coupons * 10:43 Products and carts * 13:59 Country validation * 15:11 Affiliate codes * 16:36 Chaining rules together * 19:41 Tracking coupons * 20:54 Automatically applied coupons * 22:12 Quick tips for coupons
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
In this potluck episode of Syntax, Wes and Scott answer your questions about working on a team, dealing with imposter syndrome, animating on the web, using the table element, landing pages for apps, and building full stack apps with NextJS.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Show Notes * 00:10 Welcome * 01:05 The mustard bandit podcast * 02:54 How can Developers work with designers and Product managers seamlessly? * 06:37 How do I deal with imposter syndrome? * 10:46 Any good coffee shops in Denver? * 17 of Denver’s Best Coffee Shops * 11:38 Do you use Table element or CSS Grid for tabular data? * 13:18 How do you manage animations without a library? * Greensock * 17:05 Sponsor: Sentry * 18:01 What do you use for icon libraries? * Icons8 * Font Awesome Icons * React Icons * Flat Icons * 25:10 How do you unregister the service worker to clear site data? * Syntax 346 - Selling T Shirts * 29:15 Sponsor: Sanity.io * 30:47 Since NextJS has API routes, could you build a full-stack application using just NextJS? * 35:41 Do you keep your landing pages and home pages seperate from your app? * 37:35 Where’s the line for moving something hosted on a developer server to moving it to production? * CodePen * Replit * Netlify * 41:44 How do you deal with ignorant or demanding clients? * 45:54 As a JS/TS developer, which other language should I learn to compliment my skills? * Rust * PHP * 50:58 Sponsor: Freshbooks * 51:49 ××× SIIIIICK ××× PIIIICKS ××× * 58:41 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Glass Drinking Straws * Wes: Lawn Lift
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Beginner Javascript
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
In this Hasty Treat, Scott and Wes talk about Svelte Cubed and working in 3D in the browser.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:21 Welcome * 01:00 Sponsor: LogRocket * 01:41 Sponsor: Prismic * 02:45 Intro to 3D in the browser * Svelte Cubed * Getting started with Svelte Cubed * 03:49 Declarative vs imperative * 07:43 How does Three.JS work? * ThreeJS * 12:28 Orbit controls * 15:47 Svelte Cannon * Svelte Cannon * Blender
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
In this episode of Syntax, Wes and Scott answer your questions about multi tenant apps, JS sprinkles, kids coding, server error handling, and more.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:26 Welcome * 01:01 Buying a new car * Hyundai Ioniq 5 * 08:20 What would you recommend old-school jQuery folks, external agency vendors, and modern devs that want to work together? * 11:59 Are React dumb/presentational components only possible at the leaf components of an application? * 15:35 How old should a kid be to learn programming? * Scratch * Minecraft * 20:28 Sponsor: Sentry * 21:34 Without pointing me to a paid error program like sentry, how do you guys manage this rabbit hole? * 27:05 How do you judge how much server you need? * MongoDB Atlas * Google Pagespeed * 31:57 For websites that aren’t applications how would you best organize your JavaScript? * 35:17 How do you diagnose slowdowns and bad user experience? * 41:31 Sponsor: Sanity * 43:13 Do you default export your React components when using TypeScript? * 47:42 Besides web sockets or polling at a predefined interval and refreshing the page to fetch new data, can you think of any Next-specific solutions or recommend any packages that could help make this relatively simple? * Supabase * Firebase * Meteor * 52:13 We should look into ‘tunneling’. * 56:42 How do I build a multi-tenant app? * Caddy Server * nginx * Approximated.app * Vercel offers this via a middleware * Cloudflare SSL for SaaS * 00:56 Sponsor: Freshbooks * 01:34 SIIIIICK ××× PIIIICKS
××× SIIIIICK ××× PIIIICKS ××× * Scott: Vivid * Wes: Right angle Lightning cables
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about their tips and tricks for being consistent if you’re trying to create.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes * 00:44 String cheese theory * 01:49 Sponsor: Sentry * 03:41 Sponsor: MagicBell * 05:26 Being consistent is the key to success * 07:12 Commit to it * 09:13 Plan and schedule * 13:42 Being accountable to someone * 18:11 Break things down into smaller tasks * 20:25 Measure goals * 22:14 Revise the plan
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
In this episode of Syntax, Wes and Scott talk through their process for making content on the internet for their YouTube channels, blog posts, courses, conference talks, and podcasts.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:09 Welcome * 03:02 Creating YouTube videos * Scott’s YouTube channel * 09:42 Conference talks * Notion * Stackblitz * Reactathon * Raycast * 17:05 Sponsor: Linode * 17:32 Tech for making slides * 19:37 Courses - how to decide what to do? * 26:44 How Wes breaks down a course topic * 30:00 Arranging a course layout * 33:19 Sponsor: LogRocket * 34:17 Writing blog posts * 41:58 Sponsor: Sanity * 43:32 How we organize the podcast * 51:10 SIIIIICK ××× PIIIICKS
××× SIIIIICK ××× PIIIICKS ××× * Scott: ZENOVA Under Desk Treadmill Walking Pad * Wes: Trader Joe’s Hot Sauce with Yuzu
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about a proposal for type syntax in JavaScript.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:25 Welcome * 01:13 Sponsor: Sentry * 02:03 Sponsor: Sentry * 02:44 The proposal announced * A proposal for type syntax in JavaScript * Proposal types as comments * 03:24 What are types? * 08:33 Types as comments * 10:51 Why not JS Doc? * 13:39 What it looks like * 19:02 Possible downsides * 21:37 Why not define a type system for JS in TC39 instead? * Why not define a type system for JS in TC39 instead? * 22:41 The Proposal vs Typescript
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
In this episode of Syntax, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more.
Prismic - Sponsor NEEDS AUDIO RECORDING FIRST
Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * Uses.tech
* 00:10 Welcome
* 03:35 How to submit your site for highlight
* 04:11 bald.design
https://www.bald.design
* 10:38 Anh Hoang Nguyen
https://www.hoanganh.dev
* 15:08 kennytye.com
https://www.kennytye.com
* 22:42 Sponsor: Freshbooks
* 24:10 rubenoliveira.tech
http://rubenoliveira.tech
* 28:47 abgn.me
https://abgn.me
* 32:02 Sponsor: LogRocket
* 33:19 bradleyshellnut.com
https://bradleyshellnut.com
* 41:11 hunterjennings.dev
https://www.hunterjennings.dev
* 46:19:16 Sponsor: Prismic
* 47:42:19 matthewfarlymn.com
https://matthewfarlymn.com
* 55:00:01 SIIIIICK ××× PIIIICKS
××× SIIIIICK ××× PIIIICKS ××× * Scott: Bad Vegan * Wes:
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about Vitest, how testing is handled, how code coverage works, and whether they think they’ll use it.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes * 00:21 Welcome * 02:47 Sponsor: Sentry * 03:48 Sponsor: MagicBell * 04:55 What’s is Vitest? * 09:06 How is testing handled? * 10:59 HappyDOM * 14:13 Code coverage baked in * 16:25 Files acting as folders
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
In this episode of Syntax, Wes and Scott talk through the tech stack they use to manage their course websites.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
.TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc.
Show Notes * 00:10 Welcome * 02:50 CSS Redesign of LevelUpTuts * 03:56 Overview of our platforms * 06:06 The API * ExpressJS * MongoDB * GraphQL * Fastify * Mercurius * Mongoose * 15:13 Sponsor: Kontent by Kentico * 17:07 Customer dashboard * Svelte Kit * 21:21 Viewing experience * React * GitHub * VideoJS * Mux * Vimeo * 30:53 Hosting * 35:51 Sponsor: LogRocket * 36:45 Admin tooling * Flexbox * Postmark * Drip * Pancake Charts * 47:37 Authentication * PassportJS * 50:30 Transactional Email * Nodemailer * Pug * Inky * mjml * 52:36 Checkout * Stripe * Stripe Checkouts * Stripe Elements * Braintree * Paypal * 55:58 Hosting * Digital Ocean * Digital Ocean Platform * Render * Cloudflare * 57:48 Sponsor: .TECH * 59:39 Other parts
××× SIIIIICK ××× PIIIICKS ××× * Scott: Toniebox Audio Player Starter Set * Wes: Vissles v84 Keyboard
Shameless Plugs * Scott: LevelUp Tutorials - Svelte 3D Course * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about getting SSL certificates set up between your hosting, Cloudflare, and other web apps you may use.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:21 Welcome * 01:13 Sponsor: LogRocket * 02:06 Sponsor: Prismic * 03:23 Wes’ story of SSL * Render * 05:43 How LetsEncrypt works * LetsEncrypt * 08:32 What is Cloudflare? * Cloudflare * 10:33 The problem Wes ran into * 12:27 Support is tricky * 13:54 What is Cloudapp? * Cloudapp * Vercel * 15:34 Two SSL Certs are needed * 16:41 First solution * 17:36 Second solution * 22:36 What about A Records?
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
In this potluck episode of Syntax, Wes and Scott answer your questions about handling auth, are web dev real developers, handling Git conflicts, converting PNG to Box-Shadow, bad docs vs no docs, making Shopify headless, and more.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:10 Welcome * 01:32 Fool’s winter * 03:25 How do you handle authentication in an app? * 09:42 Responding to people who don’t think developers are real developers? * 12:21 How do you handle git conflicts in package-lock.json and/or yarn.lock files? * 14:42 I built a small project which converts .png images to CSS box-shadow values. * Img to Box Shadow * 16:37 January 19th, 2038 at 03:14:08 is the end of epoch * Office Space * 20:31 Sponsor: Sentry * 22:44 Should I begin to add PropTypes to my packages and projects? * 25:59 What’s worse: bad documentation or no documentation? * 27:37 How do you find the motivation or discipline to follow through in side projects? * 29:48 I need to take an existing Shopify site and make it headless - what should I use? * 37:55 Sponsor: Sanity * 39:18 You have a ?token= query param and some token value for it. Could you explain a bit more on what is that for? * 44:05 Have you thought about selling Syntax.fm shirts? * 46:05 Can I migrate my Express routes to Next.js’ API and get the same httpOnly cookies workflow? * 52:03 Sponsor: Freshbooks * 52:52 Sick Picks
××× SIIIIICK ××× PIIIICKS ××× * Scott: Okeeffe’s Lip Balm * Wes: Okeef’s Working Hands
Level Up Course Drop - https://youtu.be/LATf_lVYoMQ?t=829 Shameless Plugs * Scott: Level Up Course Drop * Wes: Wes Bos Course player update
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
In this Hasty Treat, Scott and Wes talk about the differences between SSR, JamStack, and Serverless.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Visit Retool.com/syntax for more information.
Show Notes * 00:21 Welcome * 01:20 Sponsor: LogRocket * 02:26 Sponsor: Retool * 03:49 What exactly is server side rendering vs. tech like Jamstack and serverless? * Cloudinary * Mux * 12:15 Why use one or the other? * Svelte Kit * Syntax.fm * 16:55 Where does Serverless fit into this? * 19:12 What’s the ideal scenario?
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
In this second part episode of Syntax, Wes and Scott continue talking about the 2021 State of JavaScript survey: mobile and desktop libraries, testing, monorepo, runtimes, flavors of JavaScript, and more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 00:10 Welcome * 01:20 Scott’s new sound panels * 03:32 Instacart * 2021 State of JS Survey * Tauri * 07:46 Mobile and Desktop libraries * 13:50 Testing * Vitest * Playwright * Cypress * 19:48 Sponsor: Sentry * 21:26 Monorepo tooling * 27:00 Sponsor: Sanity.io * 28:18 JavaScript Runtimes * 30:51 JavaScript Flavors * 32:32 Non JavaScript Languages * 39:38 Utilities * Syntax 401: Monorepo * pnpm * Turborepo * 40:19 Resources * Syntax.fm 403: JavaScript in 2022 - New, Coming and Proposed Features * 43:18 Opinions * 47:21 Features missing from JavaScript * 49:30 Awards * 52:58 Sponsor: Freshbooks * 53:38 SIIIIICK ××× PIIIICKS * 56:41 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: StoryPal * Wes: Heartbeat Hot Sauce * Matty Matheson on Hot Ones * Gordon Ramsay on Hot Ones
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 01:26 Sponsor: LogRocket * 02:15 Sponsor: Linode * 03:51 How Wes sells stickers * Syntax 346: Selling And Shipping T Shirts with TypeScript * 04:27 Where the stickers are printed * Zigpac * 06:30 How the stickers were designed * 07:38 How do you ship them anywhere in the world for $5? * 10:46 Packing the stickers * 13:58 How did Wes sell the stickers? * 16:51 Any concern about two people ordering at the same time? * 17:13 One thing that did break * Pushover * 18:13 How the stickers were shipped * Stallion Express * APC * 25:42 Costs for stickers * 28:37 TypeScript sticker logo
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
In this episode of Syntax, Wes and Scott take a look at the 2021 State of JS survey that was recently published, including demographics, salary, browser APIs, overall happiness, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
Show Notes * 2021 State of JS Survey * 01:51 Winter birthday fun * 05:38 The State of JS survey * 07:37 Demographics * 09:18 Salary range * 09:58 Language features * 14:05 Browser APIs * 17:36 Custom elements and Shadow DOM * 18:18 Page visibility API * 19:28 File system API * 19:58 Web share API * 22:15 Sponsor: Linode * 23:12 Libraries * 27:30 Stimulus * 29:21 Trends * 31:32 Happiness with the state of front end frameworks * 32:28 Sponsor: LogRocket * 34:04 Backend Frameworks * 38:16 Backend tool satisfaction * 44:35 Happiness of build tools * 46:32 Sponsor: Freshbooks * 48:27 The best podcast in web development * 49:05 Sick Picks
××× SIIIIICK ××× PIIIICKS ××× * Scott: Inventing Anna * Wes:Everlane Crewneck Sweater
Shameless Plugs * Scott: LevelUp Course Drop Party * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes do a little this vs that with map vs reduce, forEach vs for in, .hasOwnProperty() vs in vs .hasOwn(), CSS absolute + left/right/top/bottom vs transform, and more.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 01:30 Sponsor: Prismic * 02:58 Sponsor: Sentry * 04:21 .filter() and .map() (every, one, etc…) VS Reduce * 09:17 .forEach() vs for in / for of * 15:52 .hasOwnProperty() vs in vs .hasOwn() * 19:37 CSS absolute + left/right/top/bottom vs transform * 22:54 Object.assign({}, obj) vs {…spread} * Animal Friendly idioms
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
In this episode of Syntax, Wes and Scott talk with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
Hashnode: Everything you need to start blogging as a developer!
Show Notes * Ben Vinegar * 00:20 Guest introduction * 05:58 Seeing bug reports from Sentry * 07:38 Distributed tracing for full stack developers * 12:16 Amazon X Ray * AWS Xray * 15:32 Using Tracing * 19:40 Sponsor: Kontent by Kentico * 20:58 Cloudflare Worker Integration * 22:30 How does Sentry have open source and a business? * Heroku * App Platform * Media Temple * Dreamhost * WordPress Calypso * 32:30 Sponsor: Hashnode * 34:07 What is the tech stack of Sentry? * 38:20 Sentry switching to TypeScript * Sentry switching to TypeScript * 44:36 Running JavaScript on other websites * 51:24 Sponsor: Sentry * 53:08 Sick Picks
××× SIIIIICK ××× PIIIICKS ××× * Scott: Last Seen * Wes: SEOUL Sisters Korean Kimchi Seasoning * Ben: Worst Scene / Best Scene * I Was There Too
Shameless Plugs * Scott: LevelUp Tutorials * Wes: Wes Bos Tutorials
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
In this Hasty Treat, Scott and Wes talk about new proposed features coming to JavaScript in 2022.
MagicBell - Sponsor Magic Bell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:23 Welcome * 01:25 Sponsor: MagicBell * 02:50 Sponsor: Sentry * 04:20 Weird audio tics * 05:19 Fetch in Node.js * 09:54 URL imports in Node.js * 11:41 JSON Modules * 15:01 Node in import url scheme * 17:30 Pipeline Operator * 21:21 Reversible String Split * 23:56 JavaScript Module Blocks * 25:22 String.cooked * 26:34 BigInts Math
URL imports in Node.js
- @MylesBorins
- Pipeline Operator
- String.cooked
- BigInts Math
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
In this episode of Syntax, Wes and Scott answer your questions about selling themes, which browser to use, where to keep your 2FA codes, Remxi vs Svelte Kit, and more!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Show Notes * 00:11 Welcome * 02:10 Can you explain import.meta? * 07:20 What are your thoughts on publishing and selling HTML & CSS/SASS templates/themes? * 12:00 When is it best to use a semantic menu vs a nav? * 16:14 Sponsor: Sentry.io * 17:36 As a newbie in web dev., which browser do you recommend, Chrome or Firefox Dev. Edition? * 20:25 Are TypeScript types are like creating models in Mongoose? * 26:16 If you use 2FA, where do you store your recovery codes? * 1Password * 29:32 Do you know a programming language which similar syntax to js and without the need of a runtime-framework? * Syntax 429 - Cloudflare Workers * 32:54 I am not feeling the hype for Remix. I would rather put my energy into SvelteKit. * Remix * Svelte Kit * 36:41 Sponsor: Sanity * 38:09 Do you guys have any advice on getting unstuck from tutorial hell and at what point do you think someone is ready to apply for junior web dev jobs? * 41:36 Do you feel frameworks like Next.js, Remix, etc. abstract too much the complexity that it takes to build full-stack web apps? * 44:19 How do you keep up on new technologies? * Swyx * Scott’s Newsletter * Intent to Ship * 54:04 Sponsor: Freshbooks * 55:06 Sick Picks!
××× SIIIIICK ××× PIIIICKS ××× * Scott: The River Runner (2021) - IMDb * Wes: Mike’s Hot Honey
Shameless Plugs * Scott: LevelUp YouTube channel * Wes: Wes Bos on TikTok
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
In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos.
Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
Visit retool.com/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:25 Welcome * 01:42 Sponsor: LogRocket * 02:54 Sponsor: Retool * 04:33 Topic introduction * 06:44 How to get a handle on something new in a library? * 10:27 How to contribute to comments * 12:55 Looking through Issues * 15:01 Looking at Pull Requests * 15:43 Check Milestones * 17:58 Look at Files Changed tab
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
In this episode of Syntax, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work?
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Show Notes * 00:27:02 Guest introduction * Wordle * 02:45:13 How did Wordle go viral initially? * 05:27:14 Where did the idea for Wordle come from? * 07:07:06 What's your background? * Reddit.com * 12:52:23 Writing just HTML CSS and JavaScript * 15:58:24 Wordle has 2 external dependancies * 16:41:06 Sponsor: Sentry * 17:40:23 The tech stack of Wordle * Lit Elements * just-merge * gzip * Cloudflare * AWS S3 * 22:21:04 Would you use web components again? * 29:36:08 How much did hosting cost? * 29:55:01 How does Wordle remember my streak? * 33:56:07 Do you play Wordle everyday? * 36:28:11 Sponsor: Sanity * 37:16:07 How do you land on internet hits so often? * 40:33:15 Are you aware of the clones? * Gordle * 44:33:15 Sponsor: Freshbooks * 45:17:10 Selling Wordle to the New York Times * 49:05:20 Dealing with the domain name * 54:15:09 What's his opener word? * 56:03:03 Juice * Juice it or Lose it talk * 59:10:06 Sick Picks!
××× SIIIIICK ××× PIIIICKS ××× * Josh: Tupperware * Scott: Giant tub of Epsom Salt * Wes:
Shameless Plugs * Josh: Wordle * Scott: KeystoneJS Course * Wes: All Courses
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
In this Hasty Treat, Scott and Wes talk about the pros and cons of JavaScript servers, Serverless, and Cloudflare Workers.
Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
Hashnode: Everything you need to start blogging as a developer!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 00:26:13 Welcome * 01:12:15 Sponsor: Hashnode * 02:27:10 Sponsor: Linode * 03:30:09 Topic introduction * Netlify Functions * Fastify * AWS Lambda * 09:46:02 Hosted Linux servers * 13:41:11 Serverless functions * MongoDB * SvelteKit * 16:34:02 Connecting to a database in serverless * 20:14:14 Cloudflare Workers * Cloudflare Workers * Works with Workers * 25:39:09 What do we recommend? * Render.com
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
In this episode of Syntax, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Tabnine - Sponsor Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code.
It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours.
Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams.
Show Notes * 00:11 Welcome * 01:05 This chapter is mid * Wes does TikTok * 04:28 Harry xli * Harryxli * 15:00 AustinBaird.software * AustinBaird.software * 19:45 Sponsor: Linode * 21:10 ognjenbostjancic.com * ognjenbostjancic.com * 28:19 ndo.dev * ndo.dev * 35:37 Sponsor: LogRocket * 37:02 jacksportfolio.com * JacksPortfolio.com * 41:51 einargudni.com * einargudni.com * 43:22 Kids advert break * 46:05 Back to einargudni.com * 48:24 Sponsor: Tabnine * 50:41 cyrillappert.ch * hslu.cyrillappert.ch * 54:30 Sick Picks * 59:02 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Alpinist (2021) - IMDb * Wes: Instant Pot Air Fryer Lid
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses
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
In this Hasty Treat, Scott and Wes are inspired by a Reddit post to talk about how to work better with your team.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes * 00:24 Welcome * 01:57 Sponsor: Sentry * 03:26 Sponsor: Sanity * 04:48 Summary of the Reddit post * 06:46 We are a team * 09:05 Coding with ego * 12:32 Follow the leader * 13:59 Getting better at asking questions * 15:01 Ask for clarity * 15:43 Understanding the guidelines * 18:12 Interpersonal tips * 19:49 Celebrating wins
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
In this episode of Syntax, Scott and Wes talk all about monorepos - the why's and the how's of using them on your projects.
Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes * 00:11 Welcome
* 01:46 Our experiences with monorepos
* 05:04 Why use monorepos?
* 09:37 How long have we been using monorepos?
* 10:16 Tools for starting a monorepo
* pnpm
* Nom link
* 16:22 Sponsor: Kontent by Kentico
* 17:33 What's the process for managing libraries?
* 20:10 Installing / uninstalling things
* 21:07 Shared dependencies
* 27:45 Sponsor: LogRocket "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", "update": "pnpm recursive up -L -i"
* 29:23 Turborepo
* Turborepo
* 39:32 nX
* nx
* 45:38 Sponsor: Freshbooks
* 46:32 Lerna
* Lerna
* 48:09 Rushjs
* Rushjs
* 52:35 Sick Picks
* 59:17 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Wyze v3, 10 micro sd * Wes: Tineco A11 Vaccum
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses
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
In this Hasty Treat, Scott and Wes talk about their process for updating project dependencies.
Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sponsor - MagicBell MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
Show Notes * 00:25 Weeeeelcome * 00:52 Sponsor: LogRocket * 01:29 Sponsor: Magic Bell * 03:32 What are dependancies? * 04:04 Wes updates all the things * 05:30 How to check if there are any updates * 07:05 Upgrade isolated, Minor deps first. * 09:16 Upgrade Minor groups after that * 09:56 Then upgrade Major dependencies * 14:47 Finally upgrade any stand along dependencies * 15:44 Test test test * 16:19 Watch error logging * 17:05 Pray
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
In this episode of Syntax, Scott and Wes talk through what to focus on at a beginner, intermediate, and advanced levels of coding skills.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes * 02:30 Semantic HTML * 07:36 JavaScript Data * 08:54 Issues & technical workflow * 11:40 Emailing People * Syntax 117: How to Email Busy People * 13:49 Make something animated with CSS * Open Props Style * 16:04 Make a full stack contact form in a framework * 16:52 Sponsor: Sentry * 18:59 CSS Variables * 22:36 Server Side fundamentals * 24:28 Meeting Skills * 28:36 Help organize a codebase or repo. * 30:26 Make something animated with JS * 31:40 Write a bot * 33:35 Sponsor: Linode * 34:51 Write CI / CD actions / tools * 37:55 Advanced Typescript * 38:32 Teach at your company * 39:35 Speak at a conference * 40:45 Make something 3D * Frame 3D * React 3 Fiber * Svelte Cubed * 42:03 Scrape and write something to collect data * 44:15 Sick Picks! * 48:43 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: 14 Peaks: Nothing Is Impossible - Netflix * Wes: Booty Slippers
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale! * Psychology of Devx * Gitpod Community * Workshops as Code * Ghuntley.com
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
In this Hasty Treat, Scott and Wes talk about CSS + JS Hacks that they're ok with using.
Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:53 What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do? * 02:09 Sponsor: Sentry * 03:12 Sponsor: Freshbooks * 05:32 Negative margins in CSS * 07:53 Not Passing a radix to parseInt() * 10:17 -50% translation 50% direction * 11:27 Overwriting Arguments in a function * 13:20 non-standard-element * 17:26 Button must have a type * 18:56 Triangles out of borders * 20:40 Overflow:hidden to clear a float * 20:55 Always pass noopener to links! * 22:16 Inline styles
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
In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.
retool.com/syntax
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:11 Intro * 01:10 Watching movies with kids * 02:49 How do you protect images on your website? * 07:21 How did you guys learn Typescript? * 13:26 Should I worry about learning Typescript now or stay focused on mastering JS first? * 18:16 Sponsor: Prismic * 20:03 How do you decide what to learn? * 26:26 I want to become full stack and learn a backend language, which one should I choose? * 28:07 Do Svelte components not support media queries? * 29:30 Any advice or suggestions on how to approach Auth or Payment? * 32:53 Sponsor: LogRocket * 33:59 Any experience working with a team on a different time zone? * 42:49 Do you have any experience or recommendations for introducing prettier late in a project? * 48:57 What are your thoughts on monorepos? * 52:57 Sponsor: Retool * 55:14 What does it mean to know JS? * 59:39 What would you do if you had to start over? * 03:49 Sick Picks * 07:09 Shameless Plugs * Paw Patrol Movie * Encanto * Luca * Tweet: When should a JR dev learn typescript? * Typescript Handbook * Selling and Shipping T-Shirts with Typescript * Svelte Kit * Remix * Height * Clocker * iState Menus * Turborepo * Nx
××× SIIIIICK ××× PIIIICKS ××× * Scott: Learning Differently * Wes: Truff Hot Sauce
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale! * Psychology of Devx * Gitpod Community * Workshops as Code * Ghuntley.com
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
In this Hasty Treat, Scott and Wes talk about Remix!
Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:32 Rrrremix Remix * 02:03 Sponsor: Sentry * 03:48 Sponsor: Sentry * 05:51 What is Remix? * 07:51 Built on Fetch * 12:28 Frameworks are getting so good * 13:30 Data loading * 14:36 Actions * 19:09 Error boundary and catch boundary differences * 20:15 Differences between Remix and Gatsby, and other SSG * 21:33 What about hot reloading? * 22:47 Nested layouts and nested routes * 24:25 Typescript support * 26:33 Hosting anywhere * Remix Docs * Remix on GitHub * Remix on Twitter * Remix on YouTube
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
In this episode of Syntax, Wes and Scott talk through their predictions for 2022.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community.
Hashnode: Everything you need to start blogging as a developer!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes * 00:11 Welcome... * 01:31 Svelte is king * Svelte * Svelte Kit * 03:57 Next.js * Next.js * Next.js Live * 06:40 Web components * Open UI * Syntax 353 Stylin the Unstylables * 11:42 Rust popularity * Rust * Rome * 15:58 Sponsor: LogRocket * 17:12 Serverless and Cloud Functions * 18:19 Cloudflare becoming a major player * Cloudflare Pages * 20:05 Tailwind * Tailwind * Open Props * 24:10 Glow Up * 24:35 Next gen dev tools * OhMyZsh * Warp * Fig * iTerm * Starship * 27:32 Sponsor: Hashnode * 29:48 CSS Container queries, Layers, and More! * 31:45 GraphQL * 34:13 Deno * Deno * 37:41 Typescript * 43:36 Server come back * 45:13 Sponsor: Freshbooks * 46:02 Checkouts and payment processors * Wise * 51:30 Temporal API * 53:20 Remote Dev / Thin Client * 55:16 Sick Picks * 00:16 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: A Show About Animals * Wes: Wise
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale! * Psychology of Devx * Gitpod Community * Workshops as Code * Ghuntley.com
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
In this Hasty Treat, Scott and Wes talk about some Javascript one liners that speed up your coding experience in one line.
Sponsor - Linode Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:24:12 Welcome
* 01:24:11 Sponsor: Linode
* 02:11:02 Sponsor: Sentry
* 03:54:18 Twitter ask for One Liners
* 04:24:05 Math random const getPsuedoID =() => Math.floor(Math.random() * 1e15);
* 05:43:09 Random color
* Paul Irish random color '#'+Math.floor(Math.random()*16777215).toString(16);
* 06:41:06 Console.log as an object. console.log({ dog, person }); VS Marketplace Link
* 08:29:17 Edit anything document.designMode = "on"
* 10:15:15 Temporal date export const today = Temporal.Now.plainDateISO();
* 11:44:05 Console(log) const myFunc = (age) ⇒ console.log(age) || updateAge()
* 13:26:13 Remove a prop const { propToRemove, ...rest } = obj;
* 15:29:01 PHP style debugging preElement.innerText ={JSON.stringify(val, '', ' ')}* **16:31:00** First and Last Destructurevar {0: first, length, [length - 1]: last} = [1,2,3];* **17:34:17** Speed up audio videodocument.querySelector('audio, video’).playbackRate = 2* Overcast
* **19:44:15** Sleep functionlet sleep = (time = 0) => new Promise(r => setTimeout(r, time))* **20:26:00** If statements on one lineIf (!thing) return 'something'`
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
In this episode of Syntax, Scott and Wes review their predictions and highlights for 2021.
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you're looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code "syntax5".
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes * 02:21 Wes highlights * 05:33 Scott's highlights * 07:42 Writing admin tools for fun * 13:33 Sponsor: .TECH Domain Name * 14:30 Tech that was hot in 2021 * 17:18 Sveltekit * Pancake by Rich Harris * Svelte * Svelte Kit * 19:54 Remix * Remix * 20:36 Astro * Astro * 22:51 NextJS 11 and 12 * NextJS * 25:14 Vite and Parcel 2 * Vite * Parcel * 26:52 Web3 * 28:00 Prisma * Prisma * 30:35 Typescript * Typescript * 33:08 Sponsor: Sentry * 35:25 Reviewing past predictions * 36:54 ESM * 39:47 Remote work will grow up * Discord * Notion * Height * 40:38 Deno * 45:11 React * 46:02 Tooling fade away * 47:29 Rome * Rome * 48:47 Rust * 49:36 Programming communities * Twitter Spaces * Clubhouse * Circle * Github Discussions * Tiktok * Benawad on TikTok * Wes Bos on TikTok * 51:08 Wasm * 51:26 Typescript * 52:35 React * 53:40 More web component frameworks * 56:43 Gatsby * 57:26 CSS updates * Syntax 354 with Miriam Suzanne * 01:00:06 Serverless * 01:01:13 Enterprise jamstack * 01:02:01 Sponsor: Mux * 01:03:05 Sick Picks * 01:08:03 Shameless Plug
××× SIIIIICK ××× PIIIICKS ××× * Scott: Rocket League Sideswipe * Wes: Home Work on Discovery+
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale! * Psychology of Devx * Gitpod Community * Workshops as Code * Ghuntley.com
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
In this Hasty Treat, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes.
Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:54 Luks of the past * 03:19 Sponsor: Sanity * 04:26 Sponsor: LogRocket * 05:04 Has package-lock.json ever saved your bacon? * 08:27 Why do you not talk about Angular? * 11:28 How do you handle package updates? * Wes Bos tweet on npm-update * 17:43 How do you keep learning in your career? * 21:02 How does the movie selection work on planes? * Emby
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
In this episode of Syntax, Scott and Wes talk with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 01:20 Guest introduction * 02:46 Coding in the browser anywhere * Gitpod * JetBrain * 04:58 How does GitPod work in the browser? * NoYaml * Cobalt2 * Finding VS Code Extensions for Gitpod * 09:27 How does GitPod actually work? * 10:57 What is Kubernetees? * 13:11 Is there a full VS Code environment? * 18:21 Sponsor: Linode * 19:01 Who are the heavy users of Gitpod? * 24:32 Teams on Gitpod * Gitpod Roadmap * Centered.app * 30:11 Do the developers of Gitpod use Gitpod to build Gitpod? * Gitpod Careers * 32:51 What language is Gitpod written in? * 33:15 Sponsor: Logrocket * 34:10 Living in a van coding * 38:16 How do you stay productive on the go? * 40:18 What was The NFT Bay? * The NFT Bay * 44:54 Is there any good in Web3 ideas? * Lularoe Documentary * 49:42 Sponsor: Freshbooks * 50:13 Selling NFTs is difficult * 51:34 Sick Picks! * 58:40 Shameless Plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Sweet Bobby Podcast * Wes: Woosh Cloths * Pauline Uniqlo * Geoff Helinox Chair
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale! * Psychology of Devx * Gitpod Community * Workshops as Code * Ghuntley.com
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
In this Hasty Treat, Wes and Scott talk about what's new in Gatsby v4.
Sponsor - Prismic Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:26 Welcome * 01:41 Sponsor: Prismic * 02:35 Sponsor: Sentry * 03:26 Gatsby v4! * Gatsby * What’s new in Gatsby 4 * 04:26 Any node version requirements? * 05:22 Three rendering options * 15:47 Parallel Queries * 16:28 Data sync * 16:57 Gatsby admin deprecated * Nextjs
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
In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 02:07 Google Chrome to start measuring user experience beyond the completion of page load * 05:47 How can I ensure that I am executing npm commands safely? * 07:58 How should I prefix booleans? * 09:46 How do I decide between using an enum vs a union type in Typescript * 13:40 What is Web Assembly? * 18:34 Sponsor: Sanity * 19:45 what happened to Scott using Linux? * PopOS * 22:44 Sponsor: Linode * 23:57 How do you batch requests in nodejs to an api? * 26:15 What are micro-frontends? * 29:55 Sponsor: Sentry * 31:16 Since Astro seems so amazing, aren’t you tempted to rebuild your site now in Astro instead of Sveltekit? * Astro * 33:04 Can you please shed some light on redirects in express/ koa? * 36:41 How do deal with ADHD? * 41:52 Should I repeat the name of the issue in the commit message or just "Resolves #$issue-number"? * 44:21 Do browsers update automatically? * 47:52 What do you do when working on a big project? * 49:55 Can you guys help to breakdown and explain jargons and differences of RPC, REST, gRPC, GraphQL? * 53:25 How to ask a question * 53:42 Sick Picks * 56:17 Shamless plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Satechi 3-in-1 Magnetic Wireless Charging Stand * Wes: The Always Sunny podcast
Shameless Plugs * Scott: Astro Course * Wes: All Courses
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
In this Hasty Treat, Wes and Scott talk about how to do things in Svelte.
Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes * 00:28 Welcome * 02:18 Lead pipe talk * 04:33 Sponsor: Freshbooks * 05:05 Sponsor: Logrocket * 06:34 Intro to Svelte * 07:44 Get Local State running * Writable-stores * 10:47 Arrow functions * 11:53 Functions that update state * React Hooks in Svelte * React Use Svelte Store * 14:36 Live / Reactive Variables * 17:03 Context * 20:45 Conditional rendering * 24:57 Input binding * 28:02 Should Wes rewrite his video player in Svelte? * 30:07 Child elements * 32:10 Vercel hires Rich Harris
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
In this episode of Syntax, Scott and Wes talk with Anth Rogan about JavaScript and hardware - from cars, to factories, and the internet.
Bryntum - Sponsor Bryntum’s suite of web components help developers quickly add powerful project and resource scheduling capabilities to their React, Angular, Vue or vanilla JS apps. The SDKs include extensive API docs and plenty of examples. Try them online at bryntum.com/examples/gantt or bryntum.com/examples/scheduler-pro. Visit Bryntum.com/syntax for a 45-day free trial.
Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 01:02 Guest introductions * Anth Rogan on LinkedIn * 05:44 What kinds of things did you work on at Nissan? * 09:02 Why are car head units based in the past? * 11:35 What are cars running for UI? * 14:04 What are PLC's? * 17:02 What kinds of regulations exist for automotive software? * 22:28 Sponsor: LogRocket * 23:03 Deeper look at PLC's * 26:56 What's Node-RED? * Node-RED * 29:37 JavaScript is popular in industry? What else is used? * 31:06 Sponsor: Brymtum Products * 32:57 How do you learn about this tech? * PLC Subreddit * 35:24 What were you doing with Nissan head units? * OBD2 Scanner * 37:15 Web bluetooth API research * 39:13 What's MQTT? * MQTT * 41:29 Sponsor: Linode * 42:14 Using IoT and machine learning to find issues * 46:53 New opportunities in industry tech coming * 52:40 Cottage IoT dreams * 56:27 Relaxing in Minecraft * 57:42 Sick Picks - Anth * 58:38 Sick Pick - Scott * 59:49 Sick Pick - Wes * 02:12 Shameless plugs
××× SIIIIICK ××× PIIIICKS ××× * Scott: Spotless for macOS * Wes: Wago Lever Nuts * Anth: Daily.dev
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale!
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
In this Hasty Treat, Wes and Scott talk about Meta Tags.
Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 00:25 Welcome * Syntax 379 - The Link Tag * 01:24 Sponsor: Sanity * 02:50 Sponsor: Sentry * 04:28 What are Meta Tags? * 05:01 What is charset? * 07:41 The viewport tag * That’s a Nice Touch on TikTok * 10:25 SEO and page data * 12:03 Browser display tags * 14:20 Dead tags * 16:24 Robot tags * 17:53 Adult ratings tag * 18:18 Google site verification tags * Google Verification tags * 19:35 Open Graph social tags * Facebook Meta tags * Open Graph * 22:54 Generator tag * 25:54 http-equiv tag * http equiv * 27:20 Apple specific tags * Apple specific tags
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
In this episode of Syntax, Scott and Wes talk about all the things that have improved the lives of web developers over the years.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes * 00:16:18 Topic introduction * 01:03:00 Leaf blowing and house updates * 02:57:01 We complain a lot * 04:13:22 Typescript improvements * 06:20:00 Optional chaining * 07:01:06 Async, Await and Promises * 07:57:05 Array methods and tools for immutability * 09:13:16 DOM interactions with getElementBy * 10:34:10 Arrow functions * 11:13:06 Classes! + All of ES6 was a huge breath of fresh air * 12:18:07 Looping * 13:22:00 Prettier Code is a huge game changer * Prettier * ESLint * 15:51:00 Sponsor: Freshbooks * 17:04:15 CSS updates * 17:41:11 CSS Variables * 18:41:15 Flexbox and Grid * 20:16:10 VH, VW units * 20:47:24 Overflow scroll on mobile * 21:54:10 Color formats * 23:08:06 Sticky headers * 23:45:06 HTML 5 * Introducing HTML5 By Bruce Lawson and Remy Sharp * A Book Apart * 27:54:00 Web components * 28:29:09 Sponsor: Sentry * 30:01:17 Tooling * Syntax 12 Why Is Everyone Switching to VS Code? * 31:28:13 Speed of latest crop → ESBuild, Vite, Snowpack, parcel * Vite * Snowpack * 33:33:03 Image compression * 37:08:21 Hot module reloading * 39:11:09 Image resizing, video hosting, accepting credit cards * Gatsby * Cloudinary * Spritecow * SmushIt * Stripe * Braintree * Entrepreneur friendly licensing * 39:48:18 Entrepreneur friendly licensing * 40:43:18 Sponsor: Linode * 42:11:10 Developer Tools in the browser * Tweet from @Bentlegen * Chris Coyier - Let’s Suck at Github Together * Chrome.io * 43:52:17 Insights into errors and troubleshooting * 44:49:13 Cross browser and cross device testing * 47:12:19 Hosting and SSL Certificates * 48:14:08 Scaling up * 49:53:13 Scaling with containers * 50:14:09 When did we start using Github? * 53:52:12 ××× SIIIIICK ××× PIIIICKS ××× Scott * 59:42:22 ××× SIIIIICK ××× PIIIICKS ××× Wes
××× SIIIIICK ××× PIIIICKS ××× * Scott: Tonal * Wes: Reboot your Portfolio / Canadian Couch Potato
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 50%! * Wes: All Courses - Black Friday sale!
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
In this Hasty Treat, Wes and Scott talk about their experiences using Github Co-pilot.
Show Notes * 00:58 Wake up early and let's go * 02:19 Sponsor: LogRocket * 03:21 Sponsor: Freshbooks * 03:56 What is Github Co-Pilot? * GitHub Co-Pilot * 06:01 Scott is a GitHub Star * 07:03 Examples of GitHub Co-Pilot usage * 09:43 Writing pseudo code * Emmet * 12:51 Using it for loop callbacks * 13:52 What langauges does GitHub Co-Pilot work with? * 14:54 It plays nice with HTML files * 15:48 Svelte component example * 16:31 Benefits for course creators * 17:35 Some scary things * 21:04 Could GitHub start charging for this? * 22:30 Good at writing types * 23:59 Gripes * 24:54 Converting code to Parcel 2 * Parcel
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
In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes * 01:13 Furniture shortages * 02:29 Managing stuff * 03:05 Basic troubleshooting skills are missing * 06:09 Sanity check * CodePen * Codesandbox * 08:05 Isolate the issue * 08:57 Commenting out code is free * 12:17 Replicate the issue * 15:07 Svelte and VS Code error * Svelte * VS Code * 17:02 Wes' course upgrades * Parcel 2 * Patch package * 18:07 Sponsor: Logrocket * 19:15 Rollback * 20:30 Reading the error message * Syntax 47 - How to Get Better at Debugging * Syntax 152 - Debugging Tools * 23:59 Crack open the node modules directory * 26:06 Sponsor: Freshbooks * 27:29 Write step by step comments to the code * 29:01 Consider outside sources * 30:56 Using the right tools for the job * 33:19 Rubber ducking it * 34:16 Wes' Big Mouth Bass story * 37:20 Scott's blown away by his leaf blower * 39:56 Copy paste a message into Google * Twitter - What are your tips for troubleshooting code or a system that doesn't work? * 41:33 Logs and metrics * 42:36 CI CD issues and Error Handler * 43:41 Using a step debugger * 44:24 Explain what's happening to someone else * 45:31 Read the documentation * 47:05 Take a break, have a cuppa * 48:42 Sponsor: Mux * 50:57 SIIIIICK PIIICKS * 57:05 Shamless plugs
Links * @jimbomoso - Do you know of any resources for developing/improving code trouble shooting?
××× SIIIIICK ××× PIIIICKS ××× * Scott: Forehead * Wes: EGO EXINNO 240W/120W Chargers
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code 'Syntax' for $10 off!
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
In this Hasty Treat, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes * 04:30 The last time we upgraded * 07:05 Initial thoughts on new MacBook Pro * Apple MacBook Pro * 09:23 How much RAM you might need * 11:33 M1 Pro or M1 Max? * 12:37 Justification as a business expense * Figma * Sketch * We recently found that the new 2021 M1 MacBooks cut our Android build times in half. * VS Code * Microsoft releases M1-native Visual Studio Code for developing apps * Notion * Height * Sublime Text * 14:52 Shortening the feedback cycle * 15:57 Using VS Code * 21:20 Video editing on M1 MacBook Pro * Mkbhd - M1 Macbook Pro review * Synology * Syntax.fm Ep220 The Synology Show * Recut * Davinci Resolve * 24:27 Screenflow export comparison * Screenflow * 29:32 VS Code improvements * SWC * pnpm * 32:57 The tools are no longer the bottleneck * 33:37 Hardware upgrades * 34:10 The notch * Bartender * 36:11 macOS icons have more padding * 37:03 Charging and battery * TS3 Plus * 38:32 Fans and heat * 39:18 Touch bar is gone * 39:36 External displays * 41:03 Battery * 41:54 LG Display issue * 42:51 Touch ID reader in a better spot * 43:25 What's happening to your old MacBook Pro? * 45:21 Ports and keyboards
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off?
05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!!
11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks.
16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener.
21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this?
24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.?
27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go).
31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming!
38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for creating new content types or adding new features? Or do they only see the input fields of all the contents that can be added to a specific page? Thank you!
42:14 - Dave: Hey guys, love the podcast! I understand that CORS prevention is in place in the browser to help improve security/prevent malicious requests across domains, but I don’t understand why you can get around this by performing the request server side, for example via cURL? If I were a malicious actor, surely I could just send my cross domain request through a proxy to avoid the CORS issue? I’m sure I’m missing something obvious here, can I please get your thoughts on this?
44:48 - Lemon: How do you implement authentication with GraphQL? Especially in Fastify, I know Scott recently moved over from Meteor to Fastify, so I too was checking Fastify but couldn’t find a satisfying auth solution that fits well with GraphQL.
48:08 - Zack Vogel: I love when you play games on the podcast. I’m a high school technology teacher and I play a game with my students called the 5 Second Rule. It’s based on a board game, but I have changed the topics to technology-themed questions. The game works like this. One person reads a topic “Name Three VS Code Extensions” and the other person has five seconds to respond with three correct answers.
I think this could be a fun game to play on the podcast.
Links * http://www.seeeyewear.com/ * https://www.warbyparker.com/ * https://www.costco.com/ * MariaDB dynamic columns * https://en.wikipedia.org/wiki/Grok * https://twitter.com/argyleink * https://remarkable.com/ * https://figma.com/ * https://graphql.org/ * https://www.meteor.com/ * https://www.fastify.io/ * https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing
××× SIIIIICK ××× PIIIICKS ××× * Scott: myQ Chamberlain Smart Garage Control * Wes: ATOTO Head Unit
Shameless Plugs * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 04:00 - Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds
06:25 - Middleware (beta): Enabling full flexibility in Next.js with code over configuration
08:16 - React 18 Support: Native Next.js APIs are now supported, as well as suspense
09:56 - AVIF Support: Opt-in for 20% smaller images
11:58 - Bot-aware ISR Fallback: Optimized SEO for web crawlers
13:10 - Native ES Modules Support: Aligning with the standardized module system
14:39 - URL Imports (alpha): Import packages from any URL, no installs required
Links * https://twitter.com/mattgperry * Introducing Middleware
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
In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Guests * Tomek Sulkowski
Show Notes 02:45 - What is StackBlitz?
05:28 - What makes it different?
08:20 - How does offline work?
12:18 - What are web containers? How does this fit in?
17:45 - How does this all work (WASM, Node.js in the browser, etc.)?
21:00 - What does performance look like?
31:06 - What about VS Code extensions?
32:48 - Monorepos?
35:12 - Databases? Sqlite?
35:36 - Are there any limitations?
37:02 - What is Turbo?
40:58 - How is this different from similar apps?
Links * https://stackblitz.com/ * https://jsbin.com/?html,output * https://jsfiddle.net/ * https://codepen.io/ * https://code.visualstudio.com/ * Fugu API Tracker (fugu-tracker.web.app) * https://www.docker.com/ * https://spidermonkey.dev/ * https://github.com/chakra-core/ChakraCore * https://sli.dev/ * https://vscode.dev/ * https://codesandbox.io/ * https://www.gitpod.io/
××× SIIIIICK ××× PIIIICKS ××× * Scott: HaloLock Universal Ring * Wes: Car LED Light Upgrade * Tomek: The Dresden Files
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! * Tomek StackBlitz
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
In this Hasty Treat, Scott and Wes talk about Astro — what it is and why you should check it out!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:08 - What is it, what does it do?
- Framework for server-first static apps
- Use any front-end framework
- Does not ship JS unless you explicitly define a component to ship JS
05:20 - The syntax
- .astro files is a mash-up of Svelte and React
- Frontmatter for server-side JS
- Template syntax is basically JSX
- TS baked in
07:48 - State management
- In client-side JS only, no state in .astro files
10:50 - CSS
- Svelte style
- Local, scoped
In this episode of Syntax, Scott and Wes are back with another edition of “Stump’d!” where they try to stump each other with interview questions.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 06:05 - Which property allows you to control the shape or appearance of the marker of a list?
06:33 - What is a pseudo element? What is a pseudo class?
09:15 - What is the difference between block, inline and inline-block elements?
10:15 - What is a combinator selector?
11:12 - What is specificity? How do you calculate specificity?
14:37 - True or False — The translate() function can move the position of an element on the z-axis?
16:44 - What is the difference between “resetting” and “normalizing” CSS?
17:51 - How can you load CSS resources conditionally?
19:45 - Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa?
22:30 - When to use CSS grid vs flexbox?
25:12 - What are all eight @-rules in CSS?
28:01 - Which property is used to underline, overline, and strikethrough text?
29:52 - What is DOM reflow?
32:14 - How do you serve your pages for feature-constrained browsers? What techniques do you use?
34:00 - What is the property for controlling image-scroll?
36:23 - What are the three different types of CSS gradients?
Links * https://github.com/sudheerj/javascript-interview-questions * https://github.com/learning-zone/css-interview-questions
××× SIIIIICK ××× PIIIICKS ××× * Scott: https://height.app/ * Wes: Anker Mini Car Charger
Shameless Plugs * Scott: Astro Course - Sign up for the year and save 25%! * Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about PNPM and monorepos!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 4:40 - What is pnpm?
- https://pnpm.io/
- Performant npm
- https://www.youtube.com/watch?v=hiTmX2dW84E
- Find and remove node modules
find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
08:30 - Why monorepo?
- Internal packages all in one place
- Forks and custom packages easier
- Commands that control everything at once
10:33 - Workspaces
- Not exclusive to pnpm
- Yarn, npm, pnpm all have them now
- Different syntax
packages: - "packages/**"
12:48 - How it works in practice
- All commands run through root
- Use in host, hook up my monorepo to render run commands
- Filter and recursive
"install:all": "pnpm recursive install","clean": "pnpm recursive exec -- rm -rf node_modules; rm shrinkwrap.yaml; rm -rf node_modules","ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui",
16:35 - Using submodules
- https://paigeniedringhaus.substack.com/p/march-2021-git-submodules
- Why submodules?
- Public and private
Links * https://www.npmjs.com/package/npx * https://yarnpkg.com/
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
For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could useEffect be right?) Next thing you know, they ended up bringing in a guy with an angle grinder to get access to the server cage.
04:15 - No one from Denver can buy
06:38 - Bug accidentally gives $90 million to users
- https://www.cnbc.com/2021/10/01/defi-protocol-compound-mistakenly-gives-away-millions-to-users.html
08:34 - Share Pointy Knives
- Hi! I’m a developer at a consulting firm in Sweden, writing C# on the backend and using React with either JavaScript or TypeScript and hosting things in Azure 99% of the time (and 1% in SharePoint). I was in my last week at my last job before I was due to start my new job. Worked 12 h/day to keep up with all the handovers etc. to colleagues so they would have a chance to continue working on the solutions I have taken care of. One project was a process tool hosted in SharePoint Online. The guy who would oversee it had -1% experience with SharePoint (which I pointed out to my bosses). But to make things a bit easier, I wrote a deploy script to ease things a bit. Starts the terminal and runs the script towards the acceptance environment. Umpteen million errors appear… Which is strange, because there would only be about 20 commands (which can cause errors like these). I log into the environment to double check if I now accidentally entered the wrong values in the script (which looked okay according to me). But I get a 404 error when I try to reach the environment… I log into the admin interface; I discover that the site is gone… Also checking the trash can, there are no things there. Very strange. I find that I’m in a different folder than the one where I saved my script… In that folder there is an old deploy script that was used when the project was started a thousand years ago (which was not used after the project was “finished”). The first thing the script does is force delete the site and then try to create a new empty site… The site is gone with lists and everything (lists are a SharePoint thing, think of it as sql-lite), there are no backups of the acceptance environment (although it is very important). I just feel a little panicked about how I’m going to solve this. However, I remember testing a tool six months ago to copy entire environments. Where the first attempt was made on the acceptance environment. Finds the cloned environment and can use the same tool to clone it back. It took only 8-12 hours of work to create all the new things done in the environment in the last 6 months instead of X number of hours to build everything from scratch.
- Once I updated a feature that saves accessories on orders (same solution). However, I failed to add all the new fields to the production environment. Which meant that accessories were not saved at all… Which was discovered after a week… I fixed the error in 5 minutes and the sellers had to contact x number of customers to double check what kind of accessories they would have for their orders…
11:22 - External HD
- One time I needed to format a server. It was an outdated Windows server. I selected all the files and copied and pasted to an external hard drive. My drive was pretty fast and it took like a minute. I was like: “Wow! That’s a great external hd”. Formatted the server and, as soon as I realized it didn’t copy 10% of the files, I had that face. We all know that face. Anyways. Tried to restore the files using some HD recovery tools but they were all corrupted, not by the formatting itself but for the installation of the new OS. My boss was pissed! I was very young so I blame it on the server. I’m not proud of it. But why the heck they would ask a developer to format a server in the first place? By the way, my birthday is on Halloween. Spoooky.
13:07 - Hey Loser
- I was testing new code to automate mass-mailings to our customers. Who knows what demon drove me but I wrote the “test” mailings like ransom notes: “Dear loser! Fork over all your $$$ or else!” Well, all was looking great and I wa s feeling pretty pleased with myself. Progress bars were sliding and counters were spinning. But I could hear a rising commotion from the marketing guys behind me. Phones ringing, voices raised. Turns out I had moronically wired myself to the production database! Even worse for me, I’d only been at the company a month or two. I thought my goose was cooked and the Big Boss was plenty mad, but I owned up right away and apologized. We put out a cover story that we’d been hacked and all was forgiven.
15:01 - HE HATE ME
- I was part of the developer team that accidentally leaked the 8 cities the XFL, an alternate football league, a week before their press conference. ewrestling.com/article/wwe-ac… We were using Contentful and Gatsby. A junior dev entered the information into the prod space instead of the UAT space and when we released some bug fixes, it picked up the contact us content update. I found out after seeing stories pop up in Google News when I was about to go to sleep. Was taking the content down when we started getting calls from the CIO of the WWE. The league went bust because of COVID.
19:23 - I Don’t Have Memory of This
- I had two pretty bad code changes that only showed their problems when they went live in production. Around 6 years ago, I was running into a large performance issue with some of our queries running slowly against this giant DB. We were using JPA/Hibernate and we had a bunch of joins that were done lazily. I switched a few of them to eager so that they would create a single SQL statement instead of a bunch (or thousands). The change worked fine on my dev environment, QA, and staging. Staging was supposed to be representative of production. So we went live and within minutes the entire system went down because of out of memory errors. We quickly switched back to the lazy joins. We found out that staging had more memory and fewer DB records than production though they were supposed to be exactly the same.
21:05 - Your Performance is Slowing us down
- Back when VMWare was becoming a thing, like 2010 or so. I was working at an ecomm site and we were seeing slow performance between the app server and some data services. I decided to build a little multithreaded logger that could track when a query to Oracle Financials was running too slow and generate a warning. Oracle Financials was doing the credit card transactions, orders, and all the rest of the sites DB work. The code had no impact on my dev, QA, and staging environments. We were hitting well over our minimum number of concurrent users. We deployed it to production and then the system got slower and slower, but never crashed. Again, production and staging were set up differently. Staging was a bare-metal server. Production was running on an ESXi server on a host that was split 4 ways. The multi-threaded code meant to detect performance degradations was slowing the whole system down when it tried to synchronize data across threads. I was pretty embarrassed by both these two issues. It went to show that production is its own special thing and that you really don’t know if your server-side code is really going to work until it starts running there.
23:15 - Dead Button
- Way back when mainframes were king, a guy I worked with pushed a button in, that if released, would immediately take down the entire company. He stood there for 4 hours, holding the button in, until we could let it crash after business hours. We gave him a chair after 2 hours.
25:12 - No Deploys on Fridays
- I was a junior dev working on our company’s website. They were HTML + nunjucks templates that were later being integrated with the backend using some Python witchcraft. There was also a metric ton of JS libraries added (like Babra for page transitions, threejs for a cool interactive animation on the landing page etc.). Didn’t really get much of all this package.json stuff at that seniority level. So after running yarn or npm or whatever, and seeing some warnings about a couple packages being outdated, I decided to update some of them. It ran great locally, but I didn’t build the prod version, as I didn’t know there could be any differences. I was working on some minor feature (or maybe even some minor bug) and the PM decided there’s no time for code review. So I pushed it to the repo, the backend guy did his integration, and launched it on prod. As it turned out, there were some breaking changes in one of the libraries I decided to update. It crashed the entire site. On Friday. At 4:30PM. And that, kids, is why you don’t deploy on Fridays.
27:33 - Stupid Selfie
- Horror story for you Wes. I work for one of the biggest retailers in the UK and we were working on an app that would go on a ‘media wall’ in their flagship store in London. Basically a giant 200-inch screen in the middle of the store that social content can go on. Turns out that I left my local Dev version connected to the production API when I uploaded a couple of stupid selfies of my big head in the office. Get a call the next day to ask why my face is on the medial wall.
28:37 - Soda
- I was a computer operator back in the late 1960’s, operating a Honeywell mainframe. The consoles were huge, about the size of a dishwashing machine, with the console typewriter and printer inset in the middle, on top. I had a soft drink on the console, next to the typewriter mechanism. We were told never to bring a drink into the room but we all did it, especially on third shift. Long story short, someone called my name, I turned around and knocked the glass of soda into the console. Had to be completely replaced – machine was down for two days. My boss was not happy.
31:22 - Oof
- A bigger horror story. I had my own software company in the 90’s and was in Singapore, customizing my software package for Johnson & Higgins Insurance Brokers – I had their Asian contract for my Insurance Broker/Accounting package. I spent a good 40 hours on Saturday and Sunday, making all the changes they asked for, getting ready for a demo on Monday morning. I finished up about 4am on Monday morning and was cleaning up my files. All this work was done on a Novell server. Print files had an extension of .prt and I had a ton of them in the main directory from all of the testing I had done. I was cleaning out old files, getting ready to back everything up and I thought I would delete all of the print files. I mistakenly keyed in erase .prg, instead of erase .prt (or whatever the delete command was – can’t remember it now). Programming files have a .prg extension – I had deleted all of my updated files from the weekend. In desperation I called Novell in Utah, hoping they could help me recover the files, but no-go. The demo Monday morning was not fun.
33:24 - Young Dev
- I was a young dev right out of college. My first job was at a child support company where we had desktop apps that would handle case information more efficiently than using Excel. My first project was to write a POC that would later be implemented into a new, bigger app that consolidated all the “POCs” for various parts of the child support process. For some odd reason, I still don’t know why to this day, my boss wanted me to write this “new” app on top of an old app with a bunch of legacy code. I never understood why but as a young dev fresh out of school, you tend to just do what you’re told. In school, I mainly used PHP/HTML/CSS for learning how to work with a database; this job however used C#/.NET for their desktop apps so I was doing a lot of learning as I went. I remember finally learning how to connect to the database and run some SQL after fighting with this old pile of legacy code. In early versions, I chose to handle creates/updates for these records in the same function. My young, dumb self wrote a try catch statement that would attempt to create the record and if it failed, it would try to update the record. Before the first production release, I updated the flow to handle creates/updates in separate functions - but never removed the update in the catch block of the original function now used for creates only. Somehow I, or any PM/QA, never failed on a create and hit this catch block while testing. Fast-forward probably 9-12 months later, I got a ticket to investigate why every case’s data looked the same in Production. I login to the app, search a few case numbers and sure enough, every case’s data is the same. I began freaking out as I had no clue how this could’ve happened. I mean it had never happened in all the dev work, testing, and months of live Production use. After I investigated with a senior dev, we realized the try block had failed and the update query in the catch block ran for that record - we also realized that I left off the where clause in the related SQL query to specify which record needs updating - so ALL records got updated with this data. Thankfully, we kept regular back-ups and were able to restore the data to a recent timeframe without users losing a ton of work. We commented out that database update call and redeployed the code ASAP. Also the senior dev was cool about it and was like “hey, it happens to all of us at some point”. Let’s just say I’ve learned a ton since then and definitely steer clear from writing code like that. You live and you learn I suppose.
38:40 - Where Wolf
- Here’s my development tale of terror: One night I was burning the midnight oil trying to get caught up on a never-ending workload. At the time I was working for an online travel booking site. It was after 11, and the last thing I had to do for the night was to rename one of the hotels in our production database. So I wrote my query:
UPDATE hotels SET name=‘Some Hotel Chain’;One problem, I FORGOT THE WHERE CLAUSE. Suddenly, over 5,000 hotels in our production database all had the same name. This was around 2003, so well before the time of point-in-time restores, and we were only backing up the database every week at that point. I was panicking. Fortunately, I had a dump of the production database that I had created only a couple of hours earlier sitting on my local hard drive. So thankfully, I was able to restore almost all of the hotel names, save for a couple that signed up after that data dump, and my boss was none the wiser. That’s when I learned that working late hours is not worth it, because at some point you are so tired that you can no longer make good decisions.
41:19 - I Want Your Job
- When I first started out I worked for a consultancy and they trained us in sales meetings to help managers get promoted because we were coming in to make them “look good”. This was okay b/c obviously, we were coming in as a contractor; however, after being laid off due to 9/11 (yes, this was about 20 years ago), I was looking for a new job and during an interview when asked where I’d like to be in X years, I mentioned to the hiring manager that I wanted to eventually do what he was doing. Well, I guess he didn’t take it that I wanted to make him get promoted to then take his spot. Safe to say I didn’t get hired. 🤦♂️😜
××× SIIIIICK ××× PIIIICKS ××× * Scott: Portable Air Compressor * Wes: ESR Magnet Phone Mount
Shameless Plugs * Scott: Latest courses on Prisma and Astro - Sign up for the year and save 25%! * Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about web dev horror stories — real things that have happened to real developers
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:36 - https://twitter.com/CameronPak/status/1445051951843061767
04:48 - https://twitter.com/susanlangenes/status/1445049321871712257
05:29 - https://twitter.com/DevJordanW/status/1445052979644706823
06:12 - https://twitter.com/HerbieDuah/status/1445088892177108994
07:04 - https://twitter.com/bbbryan14/status/1445400072921956357
07:43 - https://twitter.com/stephendennis30/status/1445074683062362114
07:59 - https://twitter.com/Tim__Moran/status/1445102727701221377?s=20
08:37 - https://twitter.com/SoyAlejandroAl/status/1445063677896450048
09:34 - https://twitter.com/sudonetizen/status/1445132694531231760
11:09 - https://twitter.com/chrislaughlin/status/1445049210840178690?s=20
11:58 - https://twitter.com/sbitaxi/status/1445208793072156675
12:44 - https://twitter.com/AlexHBruns/status/1445067663919755269
13:05 - https://twitter.com/costerad/status/1445069263568580616
14:02 - https://twitter.com/gcnx86/status/1445045635250638853
14:25 - https://twitter.com/JustMetMe_app/status/1445041678167920640
14:47 - https://twitter.com/alanshortis/status/1445048899899645959
15:50 - https://twitter.com/Swizec/status/1445191324215353347
16:17 - https://twitter.com/_RobJohansen/status/1445137057236467722
17:14 - https://twitter.com/fienen/status/1445040513678196743
17:57 - https://twitter.com/TechBill777/status/1445172824822452226
18:54 - https://twitter.com/Zircoz/status/1445041440770252806
Links * https://twitter.com/wesbos/status/1445039778035032068
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks!
06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like.
11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I’m curious what you think about hosting your own MongoDB server? I’m relatively new to Mongo but want to start working with it for smaller projects. I’ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I’m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it’s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work.
14:42 - Mike: Not a question but more of a rant… It’s 2021, almost 2022, can we all stop using ‘foo’ and ‘bar’ and ‘baz’ when teaching a programming concept? I applaud both of you because I don’t recall seeing any of your content ever using such atrocious terms, however, I’m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ‘foo’ is just confusing to beginners. That’s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo
18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs?
23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don’t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that’s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this?
27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I’ve read about these topics and watched videos but haven’t really seen how to implement these things. Any good resource recommendations?
31:57 - Matt: How do you know if you can trust an NPM package, from an unknown developer, that does not have many GitHub stars and has relatively few downloads? (The repo that made me ask this question is https://github.com/Wondermarin/react-color-palette). NPM audit automatically runs when you install a package, do any of you ever use additional security checks?
38:32 - Yosef: Hi I’m a beginner front-end developer and I heard you saying that being able to copy prototypes is a valuable skill, so I found some Figma free template and I copied them, the question is can I put them in my portfolio or deploy them?
40:00 - Nick: Hey dudes! I picked up a freelance project to make a brochure-style website and found myself having trouble to decide on what tools to pick for this site. I wanted to ask you and get your take, what tools/tech would you use to build a brochure site? By this, I mean the site should have mainly company information that is ideally editable by the stakeholders and has a contact form. Thanks!
44:22 - Casey: Hi Scooter and Wild Wes! Why do I feel so dirty when I’m forced to use negative values in CSS?
45:45 - Gnommer: Do you use some cloud sync service to backup your directory with projects? I mean OneDrive, Dropbox etc.
I tried to use it alongside with Git, and it just messed my files so badly. On the other side I feel very uncomfortable without any backup apart from Github. BTW, according to last Potluck: polish ‘ł/Ł’ is pronounced like ‘w’ in ‘what a sick podcast you have’. Best from Poland ;)
Links * https://www.ryzerobotics.com/tello * https://www.mongodb.com/cloud/atlas * https://snyk.io/ * https://deno.land/ * https://kit.svelte.dev/ * https://astro.build/ * https://www.gatsbyjs.com/ * https://www.dropbox.com/ * https://www.backblaze.com/ * https://www.synology.com/ * https://support.apple.com/en-us/HT201250
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Way Down * Wes: Wooster Shortcut
Shameless Plugs * Scott: Modern GraphQL with Prisma - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:44 - What is Just?
- https://github.com/angus-c/just
- No dependencies
- It’s written in JS, so you can copy+paste them if you really need it
- Types available
- https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5
06:46 - Some nice ones
- just-safe-set → deeply setting dynamic object properties
set(data, 'a.long[0].path', value)
- object-typeof
- Why not use
typeof?- Everything is an object
- Why not use
array.isArray?- Handy to have a switch statement
- Why not use
- just-*-case
- Camel, kebab, snake
- just-compare
10:54 - Why?
- This is the NPM install of Stack Overflow copy+paste
- Handy as hell
- Battle-tested
- Lots of ways to do simple stuff
- Sometimes the simple stuff has weird edge cases - these are caught
- Sometimes your checks can be messy
- Check if an object is empty
- 25 lines
- Just install it
12:05 - Other
- Great to learn and test yourself
- There are tests for each function
- Run them
- See them fail
- Try and make it so all the tests pass without looking at the source
Links * https://github.com/angus-c/just * https://github.com/antony
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
In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:45 - Recording Setup
- Zoom to chat
- Record on Zoom
- Quicktime
- Logic
- Riverside
- Wes:
- Heil PR-40
- dbx 286s
- Scott:
- Electro-Voice RE20
- Cloudlifter
- dbx 286s
09:13 - Notes
- Shows begin as a Notion doc
- Big outlines with a point-based outline to where to go
- Sometimes points are detailed, other times are just one-word reminders as to what to hit
- Sponsors pulled from a Notion relational table
- Shows are created in a kanban board but moved to a calendar view
12:37 - How do you find stuff to talk about?!
- Technical skills
- Hasty
- Tasty
- Potluck
- Game shows
- Collabs
- ShopTalk Collab
- Changelog Collab
- Soft skills
- Productivity
- Apps
- We Cooked It: Explainer Episode
- Add ideas to the list anytime it pops into your head
21:02 - Editing
- Podcast Royale
- We record a clap for syncing
- Upload to Dropbox for our editors
22:07 - Hosting
- Libsyn
- Archaic feeling, but covers everything
22:36 - The website
- Next.js
- Open source
- PRs are submitted adding the latest episodes
24:10 - Transcripts
- Generated
24:40 - Would you still start one?
- Podcast vs YouTube vs Twitch
29:20 - Getting popular / Marketing
- How do you do it?
- Consistency is key
- Need external audience
35:34 - Sponsors
- Five to six hours per week in prep
- Most of our sponsors are products we already used
- We sell and manage all our sponsors ourselves
42:17 - What about Patreon?
- Ad-free version?
46:04 - Live shows
- Confs
- Livestream
Links * Delicious Brains * Syntax Ep 004: JavaScript Tooling * LulaRich
××× SIIIIICK ××× PIIIICKS ××× * Scott: Untold: Crime & Penalties * Wes: Roadrunner: A Film About Anthony Bourdain
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 04:39 - color-contrast()
- Part of CSS5! Maybe.
- The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.
06:01 - Accent color
- https://davidwalsh.name/css-accent-color
07:34 - currentcolor
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword
08:54 - Profiled color values - color()
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()
11:00 - color-mix()
- https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()
- The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount.
- Would be handy for programmatically generating colors - 10% more blue for a border? Sure!
14:18 - Space-separated functional color notations
rgba(255 255 255 0)instead ofrgba(255,255,255,0.5)
15:28 - RGB and HSL with Alpha
- rgb() and hsl() can take alpha and percent values -
rgb(0 0 0 / 50%)orrgb(0 0 0 / 0.5)
18:22 - Hex + Alpha values
- RRGGBBAA
- How do you remember?!?!
- Transparent
21:49 - lch(), lab(), hwb() notation
- CIELAB color space aka Lab is a color space.
- A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color
- Lab is intended as perceptually uniform
- Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space.
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
Links * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value * https://twitter.com/argyleink
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes 02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why not?
06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app?
11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It’s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I’m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is…it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I’m afraid they’ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I’ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers!
16:14 - Scott, I just finished your “SvelteKit” course and now I’m working on “Building Svelte Components”. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it’s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I’ve only ever written unit tests with Jest in Vue. I’m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you’ve got on testing with SvelteKit would be much appreciated. I’ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you’ve both taught me so much! Thank you, peace, love, and happiness <3
20:25 - Hi Wes and Scott, I am weak when it comes to dev ops. I would like to confidently set up and deploy my applications on AWS and manage dev/prod environments. Any course recommendations to learn how to do this and how it all works so I really understand? If you don’t personally, can you tweet this out so other developers can share their thoughts?
22:30 - You both have praised MDX in the past but why would you use it? I understand that it lets you put JSX in your Markdown, but that seems counter to the purpose of using Markdown files for content. Markdown is a portable format for static content and independent of any front-end framework. That makes it a good choice for writing posts and rendering them in any site. Once you inject a React component into it, doesn’t that eliminate the portability and the static nature of Markdown? At that point, why not just have a dynamic website where you have complete control of how content is rendered? What are your thoughts?
27:14 - Hey Scott and Wes! I, like you both, am a developer with young kids (I have 3 boys age 6 and under). Needless to say, my house has a lot of energy in it. My job is quite flexible, which I appreciate, because it gives me some freedom to structure my day in a way that helps out my family. My question for you both is this: as a web developer with a spouse and young kids working from home, how do you both maintain a healthy work-life balance (avoid working too much, find time for yourselves, family time, etc.) Thanks so much!
33:46 - Should I write a portfolio site using just the three fundamentals (HTML, CSS, JS) or should I write them in something I am comfortable with such as Angular/React? Unsure if using a framework for a portfolio site is a good idea.
36:38 - How do you handle hosting when using WordPress as a headless CMS with something like Gatsby? WordPress needs good PHP hosting, while Gatsby needs good CI integration.
38:52 - How frequently do you use div tags, versus trying to find a ‘better’ tag? Love the pod btw.
40:48 - This is less of a question and more of a heads up for other listeners. Beware of scam job opportunities. I recently encountered a scam where they used a website that seemed like a very normal and reasonable job board for a major company. I went through the whole process until they asked for personal info, and I asked for verification of their person. They couldn’t provide it so I left. But they had profiles matching the actual employees at the company. They had emails. They had an HR department and employees. They had a very legitimate operation going on. Make sure to take a second and verify with the company before giving away personal information or depositing any of their money into your account.
47:38 - What percentage of North Americans keep their mobile device longer than three years? Five years? Eight years? I am a freelancer and I want to put a clause in my contract of what age of device my app will support, but I can’t seem to find this information. Just more general answers like “most people expect a phone to last two-three years.”
Links * https://kit.svelte.dev/ * https://www.cypress.io/ * https://www.svelteradio.com/ * https://www.digitalocean.com/blog/ * https://caddyserver.com/ * https://daringfireball.net/
××× SIIIIICK ××× PIIIICKS ××× * Scott: LuLaRich * Wes: Flame Bulb
Shameless Plugs * Scott: Web Components For Beginners - Sign up for the year and save 25%! * Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:56 - Why much of modern web development is just recreating PHP
- Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP
05:44 - Mixing templating and logic
- We do this with JSX
07:39 - Each request has its own scope
08:57 - Massive standard lib
- Format a date? No sweat!
- Image resizing? Sure!
- Audio bindings? Sure!
10:16 - URL-based routing
- Next.js pages
- Serverless functions
11:13 - Server-rendered
- Hotwire
11:38 - $_GET, $_POST, are just available
- Next.js hooks
12:29 - Variable interpolation
12:59 - All-in-one frameworks
- Laravel did it
- CakePHP
- CodeIgnighter
13:32 - Direct DB access
- SQL statements
14:37 - Why do people hate PHP?
- WordPress
- Inconsistent API
- Their first code was PHP and they sucked
- PHP has come a long way
- It used to not be safe
- Blocking by default - no async/await
17:48 - Why is JS still better?
- Shared code between frontend and backend
- Single language
- Huge ecosystem (could be a con)
Links * Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles * https://vuejs.org/ * https://www.hey.com/
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
In this episode of Syntax, Scott and Wes do a crossover episode with Changelog’s JS Party! Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 02:49 - Frontend Feud Rules
04:06 - Round 1
10:28 - Round 2
17:26 - Round 3
25:37 - Round 4
35:15 - Round 5
42:03 - Round 6
Links * Changelog * JS Party * Chris Coyier * Dave Rupert * Wes Bos * Scott Tolinski * Jerod Santo * Amelia Wattenberger * Divya * The Feud At The Seventh Mountain * Amelia’s repo visualizer * CSS-Tricks * freeCodeCamp * Wes Bos’ courses * Changelog Merch * Level Up Tutorials
Shameless Plugs * Scott: All courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the hottest new tech they love!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:30 - Lucy Language
- https://lucylang.org/
- A concise language for describing Finite State Machines
06:10 - MDSvex
- https://github.com/pngwn/MDsveX
- Mdx for Svelte
- Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities
- https://github.com/rehypejs/awesome-rehype
09:56 - RECut
- https://getrecut.com/
12:26 - Fig
- https://fig.io/
- It’s an app you install on your computer, it adds autocomplete to your terminal
- Works with most popular terminals
- Autocompletes git commands
- NPM commands + tons more - npm install ___ works
- Adds descriptions of what each command does
- Mac only - again another reason why Mac is best!
- Themeable
- Why not use Fish/ZSH?
- This isn’t a replacement for anything, it’s just autocomplete on top
- These fish plugins are to vim, as Fig is to VS Code
- Better UI is KEY
15:56 - Warp
- https://www.warp.dev/
- Rust-based termnial
- Very fast
- Extensions and themes
- Share commands and sessions
- Great for remote server dev
- Share terminal state - with share links
19:33 - Raycast
- https://www.raycast.com/
- App launcher
- File Finder
- Workflow runner
- Everyone is asking why is it better than Alfred
- better UI
- Better outputs math
- Better defaults - currency conversion
- Fast as hell
- Better integrations
- More Flexible
21:26 - Table Plus
- https://tableplus.com/
- Fantastic little DB tool
23:59 - Obsidian Update
-
https://obsidian.md/
-
Wes: I haven’t got into it - find myself still going back to VS Code
26:50 - Descript Update
- https://www.descript.com/
- All-in-one audio and video editing, like a doc
Links * https://chriscoyier.net/ * https://hyper.is/ * https://www.alfredapp.com/ * https://strapi.io/ * https://studio3t.com/ * https://www.mindnode.com/ * https://remarkable.com/ * https://www.notion.so/ * https://joplinapp.org/ * http://www.telestream.net/screenflow/overview.htm * https://shinywhitebox.com/
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
In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 07:28 - Thoughts
- Apples to oranges, so unfortunately, no super legit ability to compare.
- SvelteKit isn’t analogous with a custom React setup that uses CSR
- SSR is usually going to be faster - we can ship less JS
- Some big things changed beyond React → SvelteKit
- Apollo → GFetch
- Plyr → Vime
- HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer.
- SvelteKit isn’t analogous with a custom React setup that uses CSR
- Whole conversion took a couple of months.
- Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough
16:14 - Converting React components to Svelte
- useState becomes just a straight-up variable
- Graphql calls were hooks now just imported generated functions
- Remove extranous fragments
- Convert {things && } to {#if thing}{/if}
- becomes
24:06 - Spark joys
- State
- Our checkout flow became way more transparent, way easier with Svelte stores
- Render flow
- Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to
- Overall developer experience
- It’s honestly a joy to work in and I don’t want to go back
- Making a library
- Package dir, new SvelteKit project,
svelte-kit package - I made svelte-toy - https://github.com/leveluptuts/svelte-toy
- svelte-element-query - https://github.com/leveluptuts/Svelte-Element-Query
- svelte-simple-datatable fork
- Package dir, new SvelteKit project,
- Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie
sitemap.xml.ts - CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props
- Animations are all done with Svelte’s internal animations lib
32:45 - Hosting
- adapter-node
- Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU,
- Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere
35:50 - Things to do
- Admin tools
- Pancake lib for charts
37:00 - Challenges
- ESM is not always smooth sailin
- Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
- Solution was to use lodash.has as the dependency
- Apollo included all React as a dep unless you import from @core
- Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod.
- TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible
- Drag animations
Cloudinary
42:46 - Wes’ questions
- What about the ecosystem?
- What about forms + DOM data?
- Serverless functions?
- Do you always bind to state? Or just access directly?
formData = writable({ title: "yo" }) {$formData.title}
* Is it stable?
* Deno - Snel
Links * https://leveluptutorials.com/ * https://vitejs.dev/
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Skeptics Guide To The Universe Podcast * Wes: Pressure Washer Nozzle
Shameless Plugs * Scott: Web Components 101 - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:42 - What are webhooks?
- User-defined HTTP callbacks
- When something happens, ping this URL with this data
- Examples:
- When something sells, ping this URL
- When someone reverses a charge, lock their account
- Trigger a build of the website when the content changes
- Then someone buys a shirt, generate a shipping label and save it to the DB
07:57 - Sending End
- Can be a great way to hook two services together
09:13 - Receiving End
- Often you will be the one that accepts the webhook ping
- In this case, you set up an endpoint
11:00 - Payloads
- Almost all will send a JSON body that you parse out
- The method send is variable
11:51 - Auth
- On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not.
- On the sending end, you can often set up headers with auth - same with the method
- Can be a replacement for a serverless function
13:18 - Testing webhooks
- Can be a pain in the ass
- ngrok - expose locally
- localtunnel
- Insomnia
- Postman
- Stripe has a great VS code extension
- Snipcart has an awesome dashboard
- Will also tell you when one failed
- webhook.site
- https://expose.dev/
- IFTTT
- Zapier
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
In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below: https://a0.to/syntax.
Show Notes 04:50 - Regex indicies
- New
dflag in a regex - https://regex101.com/
- This will tell you the indexes (indicies) of the regex matches
- Handy if you need to highlight or replaces matches in a string
- We can ask for the start and end positions of each matched capture group
07:16 - Class updates
- Private fields
- Properties and Methods to be kept private
- Prefix them with a
# - =Helpful for internal state and methods which should not be accessed directly or at all by external
- In React how we have __INTERNTAL_NEVER USE THIS
class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside
* Getters and setters introduced in es5
* https://www.w3schools.com/js/js_object_accessors.asp
class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works
09:07 - Class fields
- This may seem super old because we have been polyfilling it forever
- Right now if you want an instance field on a class, you need to declare it in the constructor
- Now we can just declare them inside the class
10:36 - Static fields and methods
- As above can also be static with the static keyboard
- Works for methods too
- Explain what a static method is
13:17 - Top level await
- So handy in modules. Need to pull in some data? Simple.
15:19 - Ergonomic brand checks for private fields
- Used for checking if a private field on a class exists using the
inkeyword
16:00 - .at() method
- Strings and arrays - we can use square brackets to reference items of the array
- Super handy for grabbing the last item of an array
// 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B
* Why not use array[-1]?
* We used to use slice(-1)
* What about indexOf?
21:34 - Handy hasOwn method
- https://github.com/tc39/proposal-accessible-object-hasownproperty
24:51 - Class static block
- A static block allows you to run code before creating an optional static property during initialization
- https://github.com/tc39/proposal-class-static-block
Links * https://github.com/tc39/proposals/blob/master/finished-proposals.md
××× SIIIIICK ××× PIIIICKS ××× * Scott: Ultraloq Smart Lock * Wes: Magnatiles
Shameless Plugs * Scott: Web Components Course - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 04:06 - Rural internet is huge for:
- Access to information
- Remote work
- Opens up job opportunities for many residents who can’t relocate due to family
- Home values
- Big city folk moving into rural areas and driving prices up is another issue altogether
- Smart rural home
05:46 - Previous setup
- We have a cottage
- LTE Routers
- Yagi Antennas
- Worked well, but slow
- $4/gig over 100gb
- Grey market - one went up/down
- Alternatives
- WISP - no access
- XPLORNET @ (hughesnet) - BRUTAL
- Bell LTE - $$$ - slow
08:35 - The signup, install, price
- $129 CAD Deposit ($100 USD)
- $650 for the dish
- $120/month
- Unlimited bandwidth
- Needs a clear view of the northern sky
- Clear from obstructions is key
- Every 1 foot up is 2 foot of obstructions cleared
- I put it on a 25ft piece of wood
- Bought a pipe adaptor from Starlink
09:59 - The performance
- These numbers are not impressive to anyone with fiber, but are LIFE CHANGING to rural folks
- From 30mbps - 200mbps down - some users posted ~350 down
- Upload from 25mpbs - 80mbps (better than you can pay for where I live in the city)
- Ping is around 40ms
- Downtime is measured in seconds
- Youtube streams super smoothly
- Zoom works great
- Facebook + Instagram issues
- Many reported changing DNS fixed it
14:21 - The equipment
- Starlink comes with a router
- Does not support bridge mode
- Doesn’t have WPS
- Only one hard-wired port
- POE-only
- UniFi Dream Machine
- Three access points
- POE switch for Starlink Router
- Gives you stats
- The ethernet is hard-wired into the dish, so you have to drill a huge hole in the house
Links * Starlink * Wyze * UniFi Dream Machine
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project?
05:26 - What ever happened to CSS Houdini?
08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it.
11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud?
15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career?
18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation?
22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription!
29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers.
32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier?
37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript.
40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any!
43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed?
Links * https://sass-lang.com/ * https://postcss.org/ * https://ishoudinireadyyet.com/ * https://astro.build/ * https://kit.svelte.dev/ * https://www.widevine.com/ * https://frame.work/ * https://www.prisma.io/ * https://www.mongodb.com/ * https://www.postgresql.org/ * https://mongoosejs.com/ * https://keystonejs.com/ * https://frontity.org/ * https://webpack.js.org/
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hot App * Wes: Pet Food Mat
Shameless Plugs * Scott: Web Components Course - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:50 - What is it?
- Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior.
03:26 - noImplicitAny
- The
anytype in TypeScript is exactly that - it can be anything. - TypeScript will try to
inferthe type. When it can’t it will beany. - Sometimes you need
any, but if that is the case, you must explicitly type it asany. - If something is implicitly
any- it might be a mistake, or you forgot to type it. Risky!
06:01 - noImplicitThis
- You must type
this- it can’t be implicitly inferred.
06:47 - strictFunctionTypes
- If you have a type that is a function and it doesn’t 100%.
07:44 - alwaysStrict
- Always turns on strict mode. You can’t do things like redeclare
varvariables.
09:25 - strictNullChecks
- Makes you check that the item is actually there before accessing a value or method from it.
- Imagine you filter or find on an array, or query selector a DOM element. There is a possibility that nothing is there.
strictNullChecksmakes you check that it’s there - like an if statement. - Optional chaining is super handy here.
11:18 - strictBindCallApply
12:38 - strictPropertyInitialization
13:37 - useUnknownInCatchVariables
Links * https://www.typescriptlang.org/tsconfig#strict
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
In this episode of Syntax, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
Show Notes 03:10 - What is STUMP’D?
04:27 - What is a first class function?
06:27 - What is the purpose of using object is method?
09:31 - What is the purpose of Error object?
11:00 - What are the advantages of minification?
12:37 - How do you declare namespace?
15:38 - What are JS labels?
19:20 - List the methods that are available on a WeakSet?
- What is the difference between a set and a WeakSet?
23:33 - What is the use of preventDefault method?
26:15 - What is a spread opperator?
27:35 - What is the output of below spread operator array?
[...'John Resig']
30:19 - How do you load CSS and JS files dynamically?
32:00 - What are tasks in event loop?
34:15 - What is a WeakMap?
37:35 - How do get query string values in JavaScript?
40:50 - What is the purpose of some method in arrays?
42:15 - How do you delete a cookie?
Links * https://30secondsofinterviews.org/ * https://www.interviewbit.com/javascript-interview-questions/ * https://github.com/sudheerj/javascript-interview-questions * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label * https://es6.io/
××× SIIIIICK ××× PIIIICKS ××× * Scott: Builderment * Wes: Lawn Mower Blade Balancer
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about toxic clients — how to identify them, and what to do about them.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:33 - Warning Signs of a potential toxic client
- Doesn’t have project well thought out.
- Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget.
- Ill Communicator
- Contacts you at odd times.
- Thinks that you should answer every email in an hour.
- Contacts you in inappropriate ways, via text message, social media. OR doesn’t respond to emails in a timely manner giving you blockers.
- Jerk
- The rude client
- Thinks they can be rude because they are giving you money
- Hundreds of emails
- Tries to be flashy upfront (dinners, etc.)
- Scatterbrain or way too big.
- Facebook for nurses
18:06 - What to do about toxic clients
- Communicate your needs clearly. Set expectations.
- “I work best when…”
- “I answer emails once every two days”
- Set clear deadlines for deliverables, feedback and revisions (one revision backed in, more at x hourly rate, etc.).
- Just be VERY clear. If something doesn’t work for them, they will hopefully tell you.
- Get things in writing.
- Put things clearly in a working agreement for your client to approve. That way you have something to show in case things go south and you can say, “You agreed to the following things”.
- Fire them
- You can fire clients. Honestly, some of them just aren’t worth the time and effort. It’s usually the cheapest clients who demand the most from you. Don’t let them take more of your time and energy than they are paying for.
- Firing clients is very simple.
- Hi so and so, I don’t feel like we’re a good match for this project, so I’ll be canceling our work agreement. Good luck on your project.
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
In this episode of Syntax, Scott and Wes talk about advice for new devs, our advice and opinions for how new devs can level up.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:59 - Get comfortable with your code not working
- All of our code is broken much of the time.
02:40 - Compound learning and momentum is your biggest tool
- There is no formation without repetition.
- It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs.
04:05 - Learn to read error messages
- Is this error coming from my code?
- Is this coming from the library? If so, maybe the library wasn’t expecting that.
- Is this coming from the browser? An extension? Is it even related?
- Stack trace is a treasure map
09:42 - Take the time to learn the concepts that scare you
- They are often easier than they seem (though not every time).
10:40 - We all struggle
- This stuff is hard — give yourself a break.
12:56 - Taking a walk is good for solving bugs
- It’s hard to walk away from broken code, but it really helps.
14:33 - Get comfortable with the command line
- You’ll need it
18:09 - The ability to replicate a design pixel perfect is a valuable skill
- You will be shocked at how many devs can’t or don’t do this. If you want to avoid spending extra time on something, don’t make the designers tell you to go back and fix simple spacing, color, and detail things.
21:26 - You are on a team
- Don’t get stuck in the "us vs them" mentality of internal company teams (e.g. devs vs designers). You are all working together to make something.
24:10 - You are not an expert
- Even if you think you are an expert, you should always be seeking out alternate viewpoints and ideas. You are a student forever in this game.
26:14 - Scaffold with comments
- It helps keep you organized once you get into the mess
28:30 - From Twitter
- Tweet thread - https://twitter.com/wesbos/status/1417139639861735424
29:30 - Ben Newton
- Soft skills are about as important as coding skills if you want to go far.
- https://twitter.com/BenENewton/status/1417140062211526658
32:46 - Eric McCormick
- Don’t be afraid to push yourself beyond your comfort zone.
- https://twitter.com/edm00se/status/1417140503527792640
33:31 - Jason Liggi
- You don’t have to code for fun.
- https://twitter.com/Liggi/status/1417141600124346371
35:34 - Andrew Nickerson
- Start by building a project that’s interesting to you.
https://twitter.com/Nickvisual/status/1417140742531674118
37:15 - Michael Powers
- Ask questions, break things once in a while, learn vanilla everything even if it feels like a waste of time.
- https://twitter.com/mgrpowers/status/1417141364525912064
39:33 - Jason Liggi
- Doesn’t matter how long you do this job, MOST stuff out there will probably be unknown and confusing.
- https://twitter.com/Liggi/status/1417141322478235653
40:14 - Swashata
- Learn to read documentation
- https://twitter.com/swashata/status/1417142055436910598
49:59 - Max Stoiber
- Know your tradeoffs.
- https://twitter.com/mxstbr/status/1417142461709828101
43:34 - Pat Clarke
- Build a rapport with PMs/clients beyond the technical.
https://twitter.com/LeftShotDev/status/1417142505494269954
44:21 - Musa Barighzaai
- Leave things better than you found them.
https://twitter.com/mbarighzaai/status/1417142734993907715
45:20 - David Moore
- Build things that excite you.
- https://twitter.com/DavidIMoore/status/1417145783581741067
Links * https://johnlindquist.com/ * https://github.com/albertlauncher/albert
××× SIIIIICK ××× PIIIICKS ××× * Scott: Raycast * Wes: Amazon iPhone Repair Kits
Shameless Plugs * Scott: Web Components 101 - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:20 - Layout is hard
blockvsinlinevsinline-block- Learn what this means!
- Flexbox
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Grid
- Avoid floats
- Wes’ Flexbox Course
- Wes’ CSS Grid Course
- Scott’s Modern CSS Layouts Course
07:43 - I can’t get my thing to get the right style
- Use a scoping system like BEM, CSS in JS, CSS Modules
- Don’t style via IDs
- Avoid
!important
11:00 - My thing isn’t looking the way it’s coded
- Dev tools
- Write CSS in the browser
- Check class names
12:11 - I don’t know if I can delete this CSS
- Use tools like https://purgecss.com/
- http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
15:51 - Look at things holistically
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 04:07 - Can you explain the concept of memoization in JS?
07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”?
09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it’s very close, and I never looked at their code base, so there’s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else’s design. I’m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this?
16:36 - How do you decide how specific a (React) component should be?
22:03 - My question is about the npm run eject feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists?
24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on leveluptutorials.com using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique?
31:13 - I’m setting up a webinar. I’m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I’m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they’re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I’d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover?
33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site?
38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What’s your approach?
41:07 - Can you disable local fonts from the OS and check if the site actually loads them?
46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do?
49:09 - Question to Scott: Have you ever thought of calling your students Scott’s Tots?
Links * https://mux.com/ * https://vimeo.com/ * https://github.com/cure53/DOMPurify * https://wesbos.com/sanitize-html-es6-template-strings * https://svelte.dev/ * https://vercel.com/ * https://begin.com/ * https://en.wikipedia.org/wiki/Scott%27s_Tots
××× SIIIIICK ××× PIIIICKS ××× * Scott: I Think You Should Leave Season 2 * Wes: Underground Wire Locator
Shameless Plugs * Scott:
1: Level Up Tuts Pro - Sign up for the year and save 25%!
2: Become a Level Up Tutorials Author
* Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the tag — why it’s weird and wonderful, and what you can do with it!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:16 - What is it?
- https://ryanflorence.dev/p/ship-weird
- The link tag is weird.
- First, it’s not for links! It’s for establishing a relationship between the current HTML document and a resource.
05:11 - CSS / Media attr
07:13 - Web fonts
08:09 - Favicons
- Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons
08:36 - Preload + Prefetch Resource
- Audio, document, fetch, font, image, script, style, track, video, worker + more
10:15 - Fetch request (shoutout Ryan)
11:27 - Preconnect
- Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.
13:01 - Module
13:30 - Integrity
- SHA
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
In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 04:20 - HTML
- HTML is the language you write to get text and elements to show up on the screen
- Elements can describe the content they contain
- p
- img
- Or be structural and describe the areas of the website
- div
- h
- header, footer
- Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements
- HTML elements have default styling applied to them before you write any CSS
- This comes from the browser and can be manipulated
- However, by default all elements are either block or inline-display
08:11 - CSS
- If HTML is the bones, CSS is the clothes and skin
- CSS dictates how a website looks
- Without CSS, you have text on a blank page and images
- CSS stands for Cascading Style Sheets (“cascading” being the key word)
- Adding CSS to a page
- Link tag
- Style tag
- Inline styles
- Selectors
- You can select an element on the page via element, class, id, attribute
- Syntax is selector, brackets, property, value
- Property
- A property is what you are changing (e.g. background-color)
- Value determines how the thing looks
background: red;
- Specificity
- Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS.
- People develop systems like BEM to organize this
- General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling.
!importantexists to override everything, but as a general rule, NEVER use it. Seriously.
- Some interaction
- Most interaction is done in JavaScript, but CSS has some basics
- hover, active, focus
- Most interaction is done in JavaScript, but CSS has some basics
- Pseudo selectors
- You’ll often see people reaching for libraries to make CSS easier and more consistent
- Common examples are Bootstrap, Foundation, and TailwindCSS
- For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS.
- In addition to properties, you can now write your own custom properties for CSS.
- While this could be seen as an advanced technique, I believe the new normal is CSS variables first.
- CSS variables are indicated by
—variableName: value;where variable name takes the place of a property. - You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet.
37:08 - JavaScript
- JavaScript is used to add interaction to a website
- It makes your website dynamic
JavaScript the Language
- We have a base programming language that has nothing to do with HTML
- It has things like:
- Variables - ways to store things
- Numbers + Math
- Data Containers - Objects and Arrays
- Functions - Code grouped together to achieve a certain purpose
- It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things:
- Formatting time + money
- Alerting the user
- Logging a value to developer tools
- Capitalizing things
- Sorting lists of things
- Round or randomize numbers
- Fetch data
- Talk to a sever
- Promises
- Logic and flow control
JavaScript the DOM
- When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model)
- Events
- JavaScript is mostly event-driven - when something happens, do something else
- When you click something and want something else to happen
- There are lots of events
- mouse, touch, pointer
- Ready
- Forms
- Submit, change, keyboard, etc.
- Can be used to fetch data
fetch()- you’ll often hear it called Ajax, or XMLHttpRequest
- Can be used to make more HTML
- Whole set of APIs for creating elements
- The DOM can be traversed
Links * https://css-tricks.com/ * https://getbootstrap.com/ * https://get.foundation/ * https://tailwindcss.com/
××× SIIIIICK ××× PIIIICKS ××× * Scott: Tony Hawk’s Pro Skater 1 + 2 * Wes: Mini Split Air Conditioner
Shameless Plugs * Scott:
1: Level Up Tuts Pro - Sign up for the year and save 25%!
2: Become a Level Up Tutorials Author
* Wes:
1: All Courses - Use the coupon code ‘Syntax’ for $10 off!
2: Javascript Notes & Reference
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
In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:35 - Levels of using TypeScript
- Typing your code
- Typing your code, but getting a little bit more dynamic using utility types
-
Creating your own utility types!
-
TypeScript is a language in itself
- Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/
- https://www.typescriptlang.org/docs/handbook/utility-types.html
07:29 - Partial
08:23 - ReadOnly
09:00 - Required
09:33 - Record
- A record is an object type that is a bit more restrictive
- Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.
10:47 - Omit
- I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field
11:34 - Pick
- Given a type, pick these properties
12:39 - Return Types
- Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function.
13:30 - Case
- These case types are useful for when you are doing template literal types
UppercaseLowercaseCapitalizeUncapitalize
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you’re just starting out, scoped CSS, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
Show Notes 01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance.
08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and how would you decide which to use?
16:03 - I recently took Wes’ Advanced React course and went on to build my first custom React app! Thanks Wes! When the time came to deploy the app, I was surprised by the asymmetry in hosting options for the front vs. backend. It seems that there are 1000 slick, free-teir options for hosting my front-end. But finding a host for my Keystone backend: barf. I messed around with Heroku but troubleshooting was a nightmare, and I eventually settled on a Digital Ocean droplet. My inner system admin is secretly happy to have another OS instance to manage, but I hate paying 5 dollars a month to host a silly project that will probably never be seen by anyone, and I’m already irritated with the amount of care and feeding the backend needs. What gives? Why are there so many choices for frontend hosts and so few for the backend? Are there hosted backends that have auth, database, image hosting, etc and take care of the nitty-gritty with a newbie-friendly free-tier? Maybe I should I be looking into serverless?
23:21 - Since Drupal has evolved beyond awkward kloog of v7 entity/ctools/json-services/phptemplate erc into v9 with excellent graphql/json/rest support and tomb(?) for non drupal web would you recommend Drupal as for a blogger/businesses’ internal network doc/publishing/communications system (ie Drupal not as website itself)?
29:43 - I have just started my web development freelancing business and I feel like I am having a hard time getting a lot of response from small business who currently don’t even have a website (or have a terrible one). Is there any advice you can give about talking people into hiring a web developer when they CLEARLY need help? I plan to use NextJS and Sanity for all of my sites. My first client project is already built using it and it was a great developer experience!
34:30 - What would you guys consider the best alternative to the BEM naming convention? I personally follow a method with very few classes (I’ve seen this called GPS) which takes advantage of the CSS cascade, but I do think it may suffer from readability problems if I handed my stuff to another developer to work on. Interested to hear your thoughts.
39:16 - I have been self teaching myself web development for a little over a year now and your show has been a big help! I am getting to the point now where I feel I am nearly qualified for jobs and will be starting the application journey soon. I currently work in supply chain management at a big corporation with a background in industrial engineering (of which I hold a Bachelors degree). My question for you is - seeing that I have work experience at a big company and a STEM background, do you think this holds any weight in terms of being qualified for a dev job? What I am mainly wondering is how much I should leverage this during interviews and on my resume.
Links * https://www.gatsbyjs.com/ * https://tina.io/ * https://vercel.com/ * https://www.netlify.com/ * https://circleci.com/ * https://github.com/Nexedi/renderjs * https://keystonejs.com/ * https://www.drupal.org/ * https://medium.com/@jescalan/bem-is-terrible-f421495d093a
××× SIIIIICK ××× PIIIICKS ××× * Scott: I Was There Too Podcast * Wes: Mattias Random Stuff YouTube Channel
Shameless Plugs * Scott: Advanced Svelte Techniques - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:47 - GitHub CoPilot
- AI-powered autocompletion
- Not going to take your job
07:18 - Next.js 11
- Image updates
- Multiplayer
08:20 - Astro
- Build faster websites with less client-side JavaScript
09:50 - Notion API
- Get database
- Query database
- Pages
- Block children
11:27 - Petite Vue
- Petite Vue is an alternative distribution of Vue optimized for progressive enhancement
- Similar to Alpine.js
- Without a build step
13:58 - Stackblitz
- Node in the browser
- Not in the cloud
- Rolled
15:22 - Solid.js
- Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs.
16:37 - Stately
- From the company that made xState
18:05 - Web3
- Let us know if you want a show about it
- Ethereum JavaScript API
- Apps that run on the Blockchain
Links * https://alpinejs.dev/ * https://svelte.dev/ * https://xstate.js.org/
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
In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 07:23 - What’s your favorite stack right now?
28:52 - What are your thoughts on WordPress? Do you still use it?
33:59 - What do you want for listeners of Syntax?
38:21 - How do you deal with FOMO / the pressure to learn new tech?
Links * https://shoptalkshow.com/469/ * Chris Coyier * Dave Rupert * Syntax 372: CSS Container Queries, Layers, Scoping and More with Miriam Suzanne * https://svelte.dev/ * https://kit.svelte.dev/ * https://mercurius.dev/ * https://www.prisma.io/ * https://keystonejs.com/ * https://graphql.org/ * https://redwoodjs.com/ * https://nuxtjs.org/ * https://astro.build/ * https://vercel.com/ * https://wordpress.org/ * https://dayoneapp.com/ * https://automattic.com/ * https://mongoosejs.com/ * https://www.blink182.com/ * https://newsroom.spotify.com/2021-02-22/a-new-era-for-podcast-advertising/ * Chase Reeves YouTube Channel * https://xdebug.org/
××× SIIIIICK ××× PIIIICKS ××× * Dave: + 1: Haikyu!! + 2: Nintendo Garage * Chris: Ray App * Wes: + 1: Connor Ward YouTube Channel + 2: Ryan Knorr YouTube Channel
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don’t talk about that often.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:48 - What are favicons?
- Requesting favicons by default /favicon.ico
07:38 - Sizing favicons
- 16x16 is OG - don’t do that now
- You can specify multiple sizes
09:41 - File formats
- .ico files
- .png favicons
13:40 - Animated favicons
- Canvas Base64
11:36 - SVG favicons
17:19 - Dark mode favicons
18:55 - App Coloring
- Isn’t there a new Safari version?
Links * https://en.wikipedia.org/wiki/Favicon * https://caniuse.com/ * https://keycode.info/ * https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons * https://fav.farm/ * https://deno.land/ * https://uses.tech/ * Missive
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?
8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.
11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?
19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)
25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.
27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this.
30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated.
34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions?
40:21 - What are your thoughts on ReScript as an alternative to TypeScript?
44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything!
48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance!
52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction.
Links * Svelte * Create React App * Next.js * Vercel * iShowU * Descript * Screenflow * Aria Air * FitBit * Apple Health * https://www.gov.uk/ * Keystone * rescript * TypeScript * Angular * Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript * Puppeteer * uses.tech * wes.tech
××× SIIIIICK ××× PIIIICKS ××× * Scott: SvelteKit * Wes: Wyze Sprinkler Controller
Shameless Plugs * Scott: Svelte Components Course - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:15 - What is a linter anyway? Why do you want to lint your CSS?
- Does stylelint fix errors or just tell you errors?
04:42 - Getting setup
- .stylelintrc
- stylelint extension
- Sass
- High perf animations
- stylelint order
- Max nesting depth
- Declaration strict value
{ "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } }
Links * https://github.com/stylelint/awesome-stylelint
* JSLint
* JSHint
* ESLint
* VS Code
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
In this episode of Syntax, Scott and Wes talk about everything coming in React 18!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
Show Notes 04:32 - Automatic Batching
- Don’t worry about re-renders
08:32 - New Render API
const root = ReactDOM.createRoot(document.getElementById('root')); root.render();
* No more hydrate method (yay!)
10:44 - Suspense
}>
* Suspense is basically a promise resolver component - nothing inside will render until promise is resolved.
* SuspenseList lets you coordinate the order in which loading indicators show up.
16:43 - StrictEffects Mode
- https://github.com/reactwg/react-18/discussions/19
- Will allow components to mount, unmount, and mount again
- Will help with fastrefresh and really good dev experience
18:43 - useTransition() Hook
- Not an animation hook. They named it this because of the future ability to add animations to React core.
- Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete.
- We classify state updates in two categories:
- Urgent updates reflect direct interaction, like typing, hover, dragging, etc.
- Transition updates transition the UI from one view to another.
23:11 - SSR Improvements
- React.Lazy will work on the Server
- Finally!
- https://github.com/reactwg/react-18/discussions/37
- Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs.
- React Server Components
34:45 - ELI5
- https://github.com/reactwg/react-18/discussions/46
36:37 - Next.js
- Next.js will probably have support for a lot of these features soon.
Links * https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html * https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj * https://github.com/reactwg/react-18 * https://github.com/reactwg/react-18/discussions * Svelte * Syntax 127: Hasty Treat - React Suspense * Deno
××× SIIIIICK ××× PIIIICKS ××× * Scott: SoundSource App * Wes: The Changelog 443: Exploring Deno Land
Shameless Plugs * Scott: Building Svelte Components - Sign up for the year and save 25%! * Wes: Beginner JavaScript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:08 - Next Gen Bundlers are here!
- They are easy
- They are fast
- They are bundlers
- They are code splitters
- They are dev environments
- HMR / Fast Refresh
07:13 - What do they use under the hood?
- Parcel uses SWC (Rust)
- Vite uses esbuild (Go)
10:29 - How do you use them?
- Usually point your app at an HTML file
- Your HTML file has an ES module
- It then goes and loads everything from there
-
They have adaptors for different types of files
- CSS
- Images
- Etc.
-
You can also point it directly at files
14:59 - Common use-cases
- React / JSX
- OOTB
- Vue
- Svelte
- TypeScript
- Both just work
- Custom Babel config
- Plugins for both
- Sass
- Vite: Detects it, asks to install it
- Parcel: Detects it, installs it for you
- PostCSS Processors
20:29 - Custom API
- Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed.
- Example use-case: a really nice WordPress dev package.
20:57 - Which one?
- Both are really good!
- Parcel 2 has been in dev for 2+ years - unsure when it will launch.
- Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev.
- Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.)
- Life is good!
Links * Top Chef * Master Chef * Snowpack * Webpack * Parcel * SWC * Vite * esbuild * Rollup * SvelteKit * Strapi
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
In this episode of Syntax, Scott and Wes review your portfolios!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 03:59 - cudd.io
- Shared component animation between home / about really nice
- Readable, clear
- Simple
- Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2
- Nice SSR from Next.js
- CSS vars
- Very tall cards without much text, looks like a mistake
- Better on a short browser window - peep the tall and skinny
- Card heading should be h3 or h4
10:35 - damonbolesta.com
- Nice design = super fun!
- Good color palette
- Shows your skills straight up
- Animation
- Not accessible - EASY fixes with Axe Dev Tools
- Text on background images hard to read
- White text on buttons
- Bold some words in your bio
- Border radius
21:52 - walterkjenkins.com
- Map is fun
- Contrast issues with the color choices
- Transparency not needed on body content
- Cursive font for links / buttons is a no for me dog
- Labels on social media icons
- Hero overlaps section below it
- Maps data processing should be h4
29:40 - suhit.me
- This is an example of a really good one
- Wicked domain name
- Design is ON POINT, like this is the type of polish I like to see - I’d hire on this
- Can’t get enough Inter font
- Fun little animation
- I’d go a little easier on the box-shadow
- Github even has a custom readme
- Resume
- Very modern - JS, TS, Bootstrap
- TypeScript A+
- Drop the “5” and “3” from “HTML” and “CSS”
- I’d add color to the resume, its likely not printed
- Don’t need to say Github and LinkedIn in front of the URLs
37:20 - jacobpawlak.com
- Initial loading is great - transitions are hot
- Typography looks nice - not sure about those serif all-cap nav items
- Slider not very usable
- View circle on hover is cool, but I’m not sure about following your mouse, covers text
- T-shirt portfolio is awesome
- Fun little bits in the footer
- SSL is broken - fix that sh!t
- Links don’t show over background images - common issue today
- External links should probably be indicated as such
- HTML, paragraphs as h3 & h4, h5, should be - (i.e. “here are a few of my recently completed…” should be a
) * Design of resume is KEY - different colors, eh?
47:04 - mrtnvh.com
- This is a good example of subtle flex of skills
- FAST AF
- Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites)
- Personal Photo A+
- Position sticky
- Love the skills layout on the about page
- Email is a button
- I can’t copy your email
- We have mailto links - don’t reinvent
- A+
Links * Top Chef * Syntax 354: The Surprisingly Exciting World of HTML Elements
××× SIIIIICK ××× PIIIICKS ××× * Scott: What Had Happened Was Podcast * Wes: WAGO Lever-Nuts
Shameless Plugs * Scott: Building Svelte Components - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:24 - Synchronous / Async
05:23 - Multi-threaded
- JavaScript has a single “main thread”
- But you can have more threads with web workers
08:12 - Blocking
- JavaScript can stop other things on the page from running
- A script tag can block HTML from being parsed
- Most stuff in JavaScript is non-blocking
- Node.js write to filesystem can be blocking
10:27 - Concurrent + Parallel
- JavaScript start/stop are concurrent
- The API runs on a different thread
- Doesn’t REALLY matter
- https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html
13:22 - Consecutive / Waterfall
- One after another
13:48 - Callback
- A function to run when this thing happens or is done
- Click event callback
- Websocket on data callback
- Like a tweet stream
- Data fetch callback
- Almost entirely replaced with async + await
- http://callbackhell.com/
- https://caolan.github.io/async/v3/
17:56 - Script Tag Async + Defer
- Doesn’t block other content
- Runs when ready - doesn’t care about DOMcontentLoaded
- Wait until the page is loaded before running
- If the script tag is above content, don’t wait for it
- Good for things that aren’t called on page load
21:54 - Lazy
- Load it in later - maybe when it’s scrolled into view, or as needed
- Not mission-critical
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
In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them!
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 03:13 - Elements
- Learn to open the Elements panel and the console right away — right-click inspect element is weak!
- Drag-and-drop elements
- Edit as HTML
- Click to select use in JS console
- $0 →
- Add Attribute
- Breadcrumbs
- Flex (Chrome now!)
- Break on → Node removal
- Scroll into view
- Expand / Collapse
16:59 - Styles
- :hov
- .cls
- Element style
- Layout - Box Model
- Layout - Grid
- Layout - Flexbox
- Toggle Print/Light/Dark
25:03 - Panel
- Escape to open close
- No longer has to be JUST Console
- Computed Styles
- Great to find out what value it’s actually using without scrolling through the cascade
- Toggle browser styles on and off
- Fonts Tab
- Super handy to find the used font, spacing, size, weight, etc.
- You can also see all fonts used on a page
- Animations Tab
- Changes
- Shows the CSS that has changed since you have been goofing around.
38:18 - Settings
- Show what’s new
- https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo
- Experiments
43:39 - Compatibility
Links * Firefox * Chrome Canary * Brave * Can I Use
××× SIIIIICK ××× PIIIICKS ××× * Scott: Problematic Roller Coasters * Wes: Scrapyard Finds! Repair-A-Thon! Cordless Tools Galore!
Shameless Plugs * Scott: Svelte Kit - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals — what they do, where they’re at, and how you might use them.
Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:32 - Seven new JavaScript proposals
- https://github.com/tc39/proposals
06:25 - JSON Modules
- https://github.com/tc39/proposal-json-modules
- Builds on the import assertions
- No named exports
- Not executed, to avoid security issues
- Not in Node yet
09:55 - Array Find From Last
- https://github.com/tc39/proposal-array-find-from-last
- The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.
11:40 - Async Do
- https://github.com/tc39/proposal-async-do-expressions
- Async do will allow you to group together a block of code and mark it as async.
- No need for an iife
- Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level.
Promise.all([ async do { let result = await fetch('thing A'); await result.json(); }, async do { let result = await fetch('thing B'); await result.json(); }, ]).then(([a, b]) => console.log([a, b]));
14:33 - Change Array By Copy
- https://github.com/tc39/proposal-change-array-by-copy
- Like old array methods, but returns a new array rather than mutating
17:48 - Temporal
- https://github.com/tc39/proposal-temporal
- Stage 3, looking good!
- Amazing, large, very good Date API
- Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript
18:35 - As Patterns
- https://github.com/zkat/proposal-as-patterns
- Scott don’t get it
- Stage 0
- when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … }
20:47 - Pattern Matching
- https://github.com/tc39/proposal-pattern-matching
- VERY Rust-like
- https://doc.rust-lang.org/1.6.0/book/patterns.html
- Stage 1
{props => match (props) { when ({ loading }) { ; } when ({ error }) { ; } when ({ data }) { ; } }}
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?
11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev?
22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development.
26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos.
32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated.
37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine?
39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app?
43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation?
47:18 - Is there any benefit to using prop types in TypeScript for React projects?
48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts?
Links * https://www.npmjs.com/package/react-to-webcomponent * https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 * LearnNode.com * Transistor.fm
××× SIIIIICK ××× PIIIICKS ××× * Scott: A Death In Cryptoland Podcast * Wes: Affinity Designer
Shameless Plugs * Scott: Svelte Kit - Sign up for the year and save 25%! * Wes: Beginner JavaScript Notes
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
In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:40 - What is it?
- https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute
- Someone can submit a form FROM or TO your domain, automatically.
07:50 - Solutions
- SameSite Cookie
- https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6
- Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link.
- Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent.
- None — Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests.
- CSRF Token
- Check Origin / Referrer Headers
- Captcha
- Ask for Password
- Token
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
In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
Guests * Miriam Suzanne
Show Notes 02:21 - When did you come on board with container queries?
10:27 - How would you declare specificity?
- Layer example:
@layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } }
13:08 - What is your background?
18:20 - What are container queries?
22:06 - What is the background on contain? How does it work?
- https://developer.mozilla.org/en-US/docs/Web/CSS/contain
29:25 - Is it still under development?
- https://www.igalia.com/open-prioritization/index
33:51 - Have you tried the EQ polyfill from Johnathan Neal yet?
35:21 - How far out are we?
38:10 - What is Scope?
44:00 - How will MQ and CQ work together?
45:49 - Do you use inline and block?
48:44 - What browser do you use?
Links * OddBird * Susy * Jonathan Neal * FireFox * Codepen * https://github.com/w3c/csswg-drafts * https://twitter.com/TerribleMia
××× SIIIIICK ××× PIIIICKS ××× * Scott: Reelgood * Wes: Embroidery machine
Shameless Plugs * Miriam: OddBird * Scott: + 1: SvelteKit + 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about SvelteKit — what it is and why you might want to use it.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:28 - What is it?
- Total platform for building Svelte apps
- Built in Vite.js
- Includes all of the Vite goodness but it hides behind the scenes for the most part
- Host anywhere
05:16 - Is it CSR, SSR, SSG, WTF?!
- All of the above. Uses adapters to control the output:
kit: { // hydrate the `element in src/app.html target: '#svelte', adapter: adapter() }`
09:45 - What you get out of the box
- File-based routing
- API routes
- Layouts and layout resets
- Fancy file titles [slug] __layout
- Code splitting & preloading
- PostCSS
- TypeScript support
17:03 - Neat small things
- Glob import
- https://github.com/svelte-add/svelte-add
Links * SvelteKit * Next.js * Gatsby.js * Sapper * tailwindcss * @chriscoyier
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Coudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes?
06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding?
12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file?
21:41 - I am new to using CMSs and I was wondering for applications that require a lot of content management where a CMS or headless CMS such as Contentful is ideal but also requires dynamic queries such as recommended content to the end-user based on browsing history. How do you approach integrating the user data in combination with the data being received and handled from the CMS? A separate API and database? Or is this a scenario that a CMS doesn’t fit?
25:56 - When solving a problem, do you do it through trial and error? Or do you carefully think through every solution and choose the best one before actually implementing it into code?
28:14 - How can we take advantage of this new partnership between 1Password + SecretHub! I feel like this is getting into DotEnv but sounds so much more interesting.
32:34 - When creating types in TypeScript, when should someone use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. I am struggling to understand why I would ever use a type.
36:34 - I’ve recently started using TypeScript in React, and typically I’m just using function components. I’ve seen some people saying that classes are really great with TypeScript in React but I haven’t found any real use case/benefits myself yet. How about you guys, do you use classes in React/TypeScript?
38:17 - What are your opinions on generators like Yeoman?
44:26 - I’ve been looking for a career in web for a couple of years now and I’ve recently landed a job with a small agency getting paid hourly making WordPress websites, that I’ll be starting in two weeks. I’m worried that I’m going to get stuck pushing Divi sites all the time. I know this is a good opportunity for me but I was hoping you guys can shed some light and give me some tips on how I can put my skills to good use.
48:35 - What are your approaches for caching a GraphQl API?
52:30 - You mentioned in an earlier Potluck that Svelte is probably the easiest framework to learn. How confident can one be to start a new project with Svelte? Being a technical lead, can I propose our team to work with Svelte? Are there enough material/solution on the web and is the community established?
Links * ZMA Supplement * Tina * https://twitter.com/gusfune/status/1372243283758419977 * 1Password * SecretHub * TypeScript * Syntax 348: TypeScript Fundamentals — Getting a Bit Deeper * Syntax 042: Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman * https://www.npmjs.com/package/zx * Yeoman * Mercurius * Apollo * Svelte
××× SIIIIICK ××× PIIIICKS ××× * Scott: Contigo Shake & Go * Wes: Deli Containers
Shameless Plugs * Scott: + 1: Become a Level Up Tutorials Author + 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Wes’ experiment building a vaccine bot!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 07:32 - First step
- Finding the data. Open up dev tools.
- Copy as Node.js Fetch in Chrome
- Two ways to do this - Puppeteer, or raw requests, or a mix.
11:03 - Variablizing it
- Store IDs
- Booking form IDs
- Vaccine IDs
12:56 - Finding out any restrictions
- Is there a cookie?
- Is there an XSRF?
- Do these things change?
- How often can you hit it?
15:20 - Caching
- Array variable
16:59 - Delivering the notifications
- Telegram
Links * https://github.com/wesbos/vaxbot
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
In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 04:55 - Components
- Strategies
- Example:
type Props = { value: string; } const App = (props: Props) => <div />
* Return type? JSX.Element
* FC or FunctionComponent
* It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to
* It could be useful for a return type
12:13 - Props
- Default props:
const defaultJoke: JokeProps = { joke: 'LOL JOE', id: 'YEAH', status: 200, }; function JokeItem({ joke = defaultJoke }: JokeProps): JSX.Element { return ( - {joke.joke} = {joke.id}
); }
* Because props are always destructured, you often have to make a new type for your props. You can’t just type each argument by itself.
18:38 - State
- Just like Generics, State can be inferred
- If your type is simple and you’re using useState, it just works:
const [user, setUser] = useState(null);
22:27 - useEffect
- Nothing special required
- Good use of void: If you want to use a Promise function but not worry about await or .then(), you can pop a void in front of it:
useEffect(() => { console.log('Mounted'); // getJoke().then(console.log).catch(console.error); void getJoke(); }, [getJoke]);
26:09 - Refs
- Very similar to state however some interesting things with null:
const ref1 = useRef(null!); - “Instantiating the ref with a current value of null but lying to TypeScript that it’s not null.”
29:33 - Custom Hooks
- This is a great use case for Tuples
31:00 - Context
- This is probably the most complex thing in this list
- First define the types
- Use generic to pass in types OR null
- This can also be non-null if you have default values in createContext:
const AppCtx = React.createContext(null);
35:21 - Events
- The React events system is better than Vanilla JS
- Can handle them inline and have it inferred:
onClick={e ⇒ yeah(e.target)}
const onSetType = (e: React.ChangeEvent) => setType(e.target.value)
* React has a bunch of events built in — many of them take a Generic argument so you can specify the type of element that triggered it. Handy for native API methods like play and pause.
39:27 - ForwardRef
- Again use of <> to pass in forwarded ref type as param 1, Props types as param 2:
type Props = { children: React.ReactNode; type: "submit" | "button" }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef((props, ref) => ( {props.children} ));
41:30 - ESLint
- Typescript-react is good
- Extend your own
- Most JS rules apply to TS
46:20 - React as Global React 17
- Also add JSX: True to eslint globals for typing things like JSX.Element
- global.d.ts
import * as react from "react" import * as react_dom from "react-dom" declare global { type React = typeof react type ReactDOM = typeof react_dom }
48:08 - TSConfig
jsx: "react"- React emit .js files with JSX changed
- Preserve .jsx file output
- React-native → .js files with jsx not changed
53:05 - Frameworks?
- Next.js makes this a TREAT
- Gatsby just use .tsx extensions
- https://www.gatsbyjs.com/plugins/gatsby-plugin-ts-config/
Links * https://github.com/typescript-cheatsheets/react * Tanner Linsley * https://github.com/wesbos/eslint-config-wesbos * Deno * Architect * https://fav.farm/ * Snowpack * Vite * Parcel 2 * Foam
××× SIIIIICK ××× PIIIICKS ××× * Scott: Obsidian * Wes: Folding Allen Keys
Shameless Plugs * Scott: + 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! + 2: SvelteKit Course * Wes: Beginner Javascript Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about making money as a creator — how to do what you love, make money doing it, and not feel yucky about it!
Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 06:37 - Community supported
- Sell licenses
- Premium plugin
- Single payment
- $x per year
- Sell training
- Online
- In-person
- Sell support
- Donation-supported
- Patreon (usually has bonus content)
- Tips
- Open Collective
- Sell merch
- Teespring
16:00 - Corporation supported
- Display ads
- Sponsored segments
- Corporate sponsors
- Sponsored content
- Interesting collabs
- Stickers
Links * Syntax 330: React Query + More React with Tanner Linsley * Syntax 340: Servers with Matt from Caddy * Wes’ CSS Grid 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
In this episode of Syntax, Scott and Wes bike shed some common developer opinions.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 04:27 - Event params
- e, evt, ev, or event?
06:36 - CSS variables
- —red or —primary?
09:31 - CSS colors
- https://twitter.com/rem/status/1386694431710007298
- RGB, HSL, HEX?
11:52 - Default exports vs named exports
14:45 - JavaScript import ordering
17:09 - Foo / Bar / Baz in examples
21:18 - Light vs dark themes
24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x
26:54 - VScode vs WebStorm (IDE) vs Vim
31:12 - TypeScript Generics: vs
34:39 - Indentation-base syntax
- https://twitter.com/LeahLundqvist/status/1386693374305095680
37:37 - Max line length
40:21 - One reduce, vs multiple .map()/flat(),filter()
async function getStatus() { const res = await sendCommand('AT!GSTATUS'); const result = res.result .split('\n') .map((x: string) => x.split(`\t\t`)) .flat() .filter(Boolean) .map((x: string) => x.trim()) .map((x: string) => x.split(` \t`)) .flat() .filter((x: string) => x.includes(':')) .map((x: string) => x.split(`:`)) .map(([prop, val]: [string, string]) => [prop, val.trim()]) return Object.fromEntries(result); }
42:50 - index.js files
- https://twitter.com/sevilhelm/status/1386693971112562694
- ComponentName.js vs ComponentName/index.js
- https://twitter.com/rleggos/status/1386694773021552641
48:20 - Ligatures and fancy fonts
- https://twitter.com/badsyntax/status/1386695010859507713
50:30 - Regular functions vs anon functions in a variable vs arrow functions
- function hey() {}
- const hey = function() {}
- const hey = () ⇒ {}
52:44 - Explicit return vs implicit return
××× SIIIIICK ××× PIIIICKS ××× * Scott: Ego Mower * Wes: Pass-Through Socket Set
Shameless Plugs * + Scott:
1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions!
2: Github Actions with Brian Douglas
* Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:45 - What is it?
- Drag and drop is really for desktop apps
- You can drag and drop anything from any browser to any browser
- The important thing here is that this is a set of browser standards that allow different apps to communicate
07:50 - How to implement
- Make an element draggable
- Listen on elements for drag events
- The events bubble up, so you can listen on the parent element as items are added/removed
09:06 - DataTransfer API
- You can store anything you want in it
- getData / setData API
- Reference strings
11:35 - Accepting drops
- When you dragOver, you need to preventDefault()
- Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location
13:01 - Drop Image
- Set whatever you want
16:00 - Drop Effect
- What does it look like when you drop it? Does it go back?
- dataTransfer.effectAllowed
- e.dataTransfer.setDragImage(nothing, 0, 0);
18:02 - Security concerns
20:34 - Shortcomings:
- Edge cases out the WAZOO
- Margin caused dragout events
- Lots of if statements
- It’s up to you to do EVERYTHING
- CSS, classes, hover styles, etc.
- Accessibility
- Inaccessible by default, unless using mouse keys
- Have to announce everything
- Mobile
26:14 - Lbs
- Transmat API
Links * Figma * Notion * Missive
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
In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 02:34 - What is semantic HTML?
- What is the content? HTML should describe the content first and foremost.
04:04 - Why semantic HTML?
- Accessibility
- SEO
- Styling is easier
-
HTML tags that have meaning:
- Almost all of them
-
Common ones:
/and * to 20:04 - Structural / Layout tags
-
- You can have more than one header
- Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know
-
/
- and strike?
- / /
- A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.
- and
- While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range).
-
`32:12 - Visual vs Semantic tags
- Almost all tags in HTML are semantic
- vs and vs and are NOT deprecated like many have said* The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important.* *35:40 - HTML tags with no meaning:
37:51 - Some elements have special functionality or styling
- and tag - + 40:59 - What elements would we like to see?*******` *****- Modal element * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog - Textarea that grows with content - Animated accordion - A better table * One that works with grid/flex/modern CSS, auto-sizing, max/min widths - From Twitter: * VirtualList * Carousel - HOT DRAMA * Date range * Hero * tag that figured its level out by itself. Useful for components that can go anywhere * Icon tag * Cookie banner * ``` tag that shows HTML elements without encoding ``` + You can kinda do this with display block on script and style tags Links - Sara Soueidan ××× SIIIIICK ××× PIIIICKS ××× - Scott: Hat Washer - Wes: Netflix's This is a Robbery Shameless Plugs - Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! - Wes: All Courses - Use the coupon code 'Syntax' for $10 off! 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*****
In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes Can it be styled? Solutions 04:28 - Just style the defaults
- Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
- This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
- Select
- Input - number, date, etc.
- Very hard to style
- Often need
appearance: none;for mobile
- Checkbox / Radio
- Generally speaking, these CSS Properties can be applied to all inputs:
- font-size
- color
- padding
- margin
- background / images
- outline (remember focus)
- border
08:20 - Overlap with more dom elements, set background images
- Checkbox / Radio / Toggle buttons
- Often used
:beforeand:afteralong with labels — e.g. label + input:checked
- Often used
- Select can have element overlap
14:13 - Re-implement the UI with JavaScript
- Video / Audio
- HUGE rabbit hole of things to code
- Very important to maintain accessibility
15:46 - Use a UI Library
- Bootstrap
- Foundation
- Ant Design
- Carbon Design
- Fast
- Lightning Design System
- Material Design
- Chakra
17:20 - Open UI
- Documenting all the different types of web UI controls
- https://open-ui.org/
- https://twitter.com/stubbornella/status/1384889551924121605
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”?
How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience?
06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work.
09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful.
12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish?
18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use?
23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this?
28:28 - Why are radio buttons called radio buttons?
30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible:
- Could make me money now
- Help me to hit the ground running when I graduate
- Get me a job easily
- Make me all kinds of cash
Thoughts?
35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js?
(not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) )
39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well?
45:31 - What’s the best way to be able to host personal projects (frontend + backend) for free on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway.
Links * https://type-scale.com * https://www.leveluptutorials.com/tutorials/modern-css-design-systems * https://www.npmjs.com/package/soap * Vercel * Glitch * Codepen * Code Sandbox * PM2
××× SIIIIICK ××× PIIIICKS ××× * Scott: Wyze Sprinkler Controller * Wes: Retevis
Shameless Plugs * Scott:
1: Become a Level Up Tutorials Author
2: Github Actions with Brian Douglas - Sign up for the year and save 25%!
* Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:17 - What is technical debt
- Outdated or hard to update code
- If you groan when you have to work on it, it might be a sign of technical debt
- Brittle code, easily breakable
- Quirks and features
06:55 - Why does it occur
- Over time, any garden left un-pruned will become overgrown
- Many people, many code styles
- Using hot new frameworks / techniques
- This is why seasoned developers don’t jump on new things
- You allow users to do literally anything
13:18 - Techniques for avoiding it
- Deny your FOMO of new things
- Abstract
- Write good tests
- Don’t put off refactors
- Update dependencies frequently
- Good standards
- Etsy has thousands of devs
20:08 - Examples in the real world
- Airline websites open in new windows all the time
- Cellphone carrier flashes the screen 100x
22:15 - Unfixable technical debt
- Agency work sometimes
Links * Next * React Router * TailwindCSS * Redux * Etsy * Dave Ramsey
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website.
05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line?
18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support?
07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular
22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money.
30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch?
36:52 - Do you guys ever see your premium courses pirated on sites like Udemy, Skillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this?
39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it?
42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys!
50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work.
54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice?
Links * Fastify * RedwoodJS * Keystone.js * 10up * Vite * Safari + Dev tools * Browsersync * localtunnel * ngrok * Xcode simulator * Mike Birbiglia * Brian Douglas YouTube Channel
××× SIIIIICK ××× PIIIICKS ××× * Scott: 3 in 1 Multi USB Charging Cable * Wes: Milk Frother
Shameless Plugs * Scott:
1: Become a Level Up Tutorials Author
2: Github Actions with Brian Douglas - Sign up for the year and save 25%!
* Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 05:20 - Astro
- What it is:
- astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React.
- https://twitter.com/georges_gomes/status/1380801812656226304
- Why we’re excited about it:
- Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data.
- Scoped CSS by default (a la Svelte). Sass out of the box.
- Collections import for .md files
// pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- <main> <h1>Blog Postsh1> {blogPosts.map((post) => ( <PostPreview post={post} /> )} main>
12:06 - ViteKit
- What it is:
- Framework-agnostic
- API routes
- Pages (frontend, optional hydration)
- Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.
15:58 - Svelte Kit
- What it is:
- https://kit.svelte.dev/docs
- https://svelte.dev/blog/sveltekit-beta
- New framework for building Svelte apps
19:07 - Remix.run
- What it is:
- Remix.run
- Fullstack React framework
- Why we’re excited about it:
- Made by Michael Jackson, Ryan Florence
- License-based
- React-based
- Caching-focused, uses “the platform”
- Centralized data loading, works without client JS if needed
- Better nested routing
Links * Sapper * Vite * Snowpack
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
In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.
Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes Deep end stuff 03:30 - any vs unknown
06:20 - never
- https://twitter.com/Igorbdsq/status/1351681019196436482
09:14 - .d.ts - Definition files
- Usually for existing libraries that don’t have types
- Can be generated or hand-written
- Also really handy for pure JS projects, you still get good autocomplete because of these
13:25 - Type generation
- Can be generated from GraphQL, or Schemas, or from JSON Output
17:20 - TypeScript generics (variables)
- Kind of like functions, they return something different based on what you pass it
- makeFood
- makeFood
- This function makes food and shares lots of the same functionality between making a pizza and sandwich
- If the only thing that differs is the type returned, we can use generics
- You often see this as a single char T
- It can be anything
- Promise is a generic
- querySelector uses generics
21:48 - Promises / Async + Await
- Functions now return a Promise type, but with a generic
- Promise
- Promise
- Promise>, Request, Request
- stringified
- added headers
29:48 - Type assertion (type casting)
- Type assertion is when you want to tell TypeScript “Hey I know better than you”.
- Two ways:
- as keyword (most popular)
someValue as HTMLParagraphElement- Tagged before
- someValue
- as keyword (most popular)
34:14 - TypeScript without TypeScript (JSDoc / TSDoc)
- Really nice!
- You can also add comments / descriptions
- https://github.com/developit/redaxios/blob/master/src/index.js
40:08 - Interfaces vs Types
- Interfaces have better perf
- https://twitter.com/wesbos/status/1362418379919937545
- https://blog.logrocket.com/types-vs-interfaces-in-typescript/
- What do you default to?
How we write TypeScript 44:27 - Interface or Types
- Scott - Types
- Wes - Interfaces
44:50 - any vs unknown
- Scott - any
- Wes - unknown / any
46:52 - Any (No Implicit or Implicit Allowed)
- Scott - No implicit any
- Wes - No implicit any
48:31 - Return types (Implicit or Explicit)
- Scott - Explicit always
- Wes - Not always
50:49 - Compile (TSC, Strip TS)
- Scott - Strip
- Wes - Both
52:38 - Type Assertion (as or )
- Scott - as
- Wes - as
53:09 - Arrays (Dog[] or Array)
- Scott - Dog[]
- Wes - Dog[]
54:02 - Assert or Generic (if both work)
- querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’);
- Scott - querySelector(’.thing’);
- Wes - querySelector(’.thing’);
Links * Syntax 324: TypeScript Fundamentals * Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools * Axios * VS Code * Syntax 310: Serverless, Deno and TypeScript with Brian Leroux * Cloudinary * Notion
××× SIIIIICK ××× PIIIICKS ××× * Scott: Powerowl 16 Battery Recharger * Wes: Fairywill Pro P11
Shameless Plugs * Scott: Level 2 Node Authentication - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Git Rebase — what it is and how and when to use it!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:12 - Why and when to rebase?
git rebase -iis interactive- Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits.
- Common uses:
- Squash all commits into one or multiple commits
- Reword commits
- These lines can be re-ordered — they are executed from top to bottom.
p, pick = use commitr, reword = use commit, but edit the commit messagee, edit = use commit, but stop for amendings, squash = use commit, but meld into previous commitf, fixup = like “squash”, but discard this commit’s log messagex, exec = run command (the rest of the line) using shellb, break = stop here (continue rebase later with ‘git rebase --continue’)d, drop = remove commitl, label = label current HEAD with a namet, reset = reset HEAD to a labelm, merge [-C | -c ] [# ]
Links * Git Rebasing
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
In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
Show Notes 01:58 - T-Shirts 101
- T-Shirts are cool
- I sold 100 right away to get the kinks out
- Then I did pre-order
- The stack
- TypeScript
- React
- Next.js
09:08 - Selling: Front-end
- Snipcart
- It’s a button
- When Someone buys, they scrape the site for the HTML
- If you only have a client-side rendered button, you use the JSON API instead
- Integrated into Gatsby pretty easily
- Wrote one custom hook to count inventory and disable when sold out
- I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment.
10:10 - Selling: Shipping Quotes
- Snipcart has integration for USPS, etc.
- You can also do custom shippers
- It’s a webhook
- They also take care of customs declaration
13:30 - Selling: Backend
- Next.js Dashboard
- Integrate with ChitChats, Stallion Express, and SnipCart.
- The tech
- Shipping Labels
- Packing slip
18:05 - Fulfilling
- Printing labels
- Designed with CSS + React
- Print CSS is wild
- Fan Fold labels were way better
- I switched to Stallion Express
- Cheaper
- Printing packing slips
- Batch scanning
- Scanning → Mark as shipped
- Started with webcam
- Bought scanner for cheap
- QR code was better because my tokens were long
- Data matrix is often better
- Sending notifications
- Hit the endpoint via Snipcart
28:48 - The physical part
- T-Shirts printed from local supplier
- U-Haul to get them here
- Bags printed in China (about 40 cents each)
- I wrote a bunch of code to organize by size
- This cut down on moving around (14 hours if you save 30 seconds per shirt)
- Some got stickers
- Multiples were the hardest
- 24 different types of shirts
- some wanted 4xl
- some wanted tall
- 24 different types of shirts
36:30 - Common questions
- Why did you do this yourself?
- Fun project
- I learned a ton
- This is how you don’t burn out
- Why not print-on-demand? (DTG)
- Tonal
- Embroidery
- Quality
- Money
- Pay people in my community
- Control
- Bags, stickers, etc…
- stickermule
- Why not $companyThatHandlesIt
- I want to do stickers
- I want to do decks
- Why not Shopify
- Large orders still need major fulfillment strategies
- Code has to be written or money spent
44:16 - Other lessons learned
- Queues would be good here
- Sometimes you had to wait 3+ seconds for the confirmation of shipping
- No one reads, it was pre-order
- Don’t buy shipping right away — people email about incorrect addresses
- Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds)
- Pre-order is great because you can offer many sizes
- Async JS to do things at most 50 at a time
Links * Wyze Plug
××× SIIIIICK ××× PIIIICKS ××× * Scott: Pixeleyes AutoMounter * Wes: Baratza Encore Conical Burr Coffee Grinder
Shameless Plugs * Scott: Level 2 Node Authentication - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 07:22 - Why?
- Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
- This is in line with how we write components.
- It will change the way we write CSS.
08:49 - The Syntax
- Containers need to be defined as containers via containment context
.container { contain: size layout; }
New contain value:
.inline-container { contain: inline-size; }
This is the same as the logical properties. Assuming you read LTR, or RTL:
- size - width and height
- inline-size = width
- block-size = height
/* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } }
18:49 - How to try them today
- Download and/or update Chrome Canary
- Go to chrome://flags
- Search and enable “CSS Container Queries”
- Restart the browser
19:27 - Demos
- Need Chrome Canary + Flag
- https://codepen.io/collection/XQrgJo
- https://codepen.io/una/pen/LYbvKpK?editors=1100
Links * Miriam Suzanne * Susy * Miriam’s CSS Sandbox * https://css.oddbird.net/rwd/query/explainer/ * Canary * @addyosmani * The CSS Podcast * @jon_neal
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
In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them.
Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 3:50 - Network
- See all requests, filter by type or name
- Used to understand all requests coming or going
- Turn off caching
- View timing
- See the true GZIP size
- Slow down network speed
- See time for page load
- Copy as fetch or CURL
- View request, response, and headers
- See CORS issues
- See which requests have happened
- See if an asset is cached (both in dev tools, also Cloudflare)
- See blocked requests because of extensions
- Tip: You can see the network info from the console in Firefox
22:03 - Memory
- See what is taking up memory
- Strings
- DOM nodes
- Objects
- Actual .js
26:44 - Performance
- Click record and use the site
- Flame chart useful for finding slow functions and debugging janky animations
- Get FPS in coordination with flame chart
- Save performance recording data to be able to share for debugging
- You can also upload saved data to debug without using the site
30:48 - Console
- Interfaces with the JS runtime
- Shows errors, warnings, and logs
- Tip: Negate noisy warnings/errors that clutter your console with
- - Tip: Use $0 to select current element
- $1 for second last
- $r for current React element
- Tip: Use $$ to shortcut Query SelectorAll and Array.from
- Tip: Use $ to shortcut Query Selector
40:28 - Storage / Application
- Working with LocalStorage, Cookies, Index DB, and Session Storage
44:56 - Audit / Lighthouse (Chrome and Firefox)
- Run lighthouse to check for performance, accessibility, and UI stuff
- Not the silver bullet audit that many people think it is
- Colors are sometimes like “Really?!”
- Can be helpful regardless
50:28 - DOM Tab
- Firefox only
- Shows everything that is in the scope of the browser
Links * Adam Wathan * Ben Vinegar
××× SIIIIICK ××× PIIIICKS ××× * Scott: dupeGuru * Wes: Moccamaster Coffee Maker
Shameless Plugs * Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:22 - What is it?
- https://drafts.csswg.org/css-nesting-1/#nest-prefixed
- https://twitter.com/argyleink/status/1371874777548267520
06:02 - Why nest?
- Easier to read
- Easier to write
- Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up.
08:13 - When to use nesting
- Nesting is often overused
- Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it)
- .container .item {} .container .item a {}
- Use it for scoping
10:06 - Nesting prefixes
- In order to nest CSS, you must first start it with a nesting selector
.tweet { & > p { } &.media-included { color: green; } & + .tweet { } // sibling & p { } // descentang }
* Component-based — tweet, card, company, Link
article{ color: blue; & { color: red; } }
and must be the first child of a compound selector
12:44 - @nest rule / media queries
- Mostly just a visual way to show nested
.foo { display: grid; @media(orientation: landscape) { & { grid-auto-flow: column; } } }
.foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } @media (min-inline-size > 1024px) { & { max-inline-size: 1024px; } } } } /* equivalent to .foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-inline-size > 1024px) { .foo { max-inline-size: 1024px; } } */
16:30 - How to use nesting today
- Literally any CSS preprocessor
- PostCSS to use spec
Links * Syntax 274: How does stuff get added to CSS? Adam Argyle answers! * Sass * PostCSS * CSS Variables
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
In this episode of Syntax, Scott and Wes talk about how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
Show Notes 02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it?
06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts.
15:22 - I’m trying to teach myself web development and I’m having problems making up the logic for my personal projects. I would have to watch YouTube tutorials or look at other people’s code in order to implement simple features to my website and I’ve been feeling pretty stupid for not spending the time to think of it. I feel like I’m missing out on knowing how to problem solve for myself whenever I copy other people’s code and try to understand them afterwards.
19:27 - I just landed my first web development job after following The Odin Project and building personal projects for about a year. It tripled my income so I am incredibly excited! I have been using a PHP framework which was developed by one of my coworkers and has no documentation. In order to understand the code, I either have to read a bunch of source code or ask one of the other developers questions. While I am doing well, I can’t help but feel as if I am working way too slow and asking way too many questions. I assume this is imposter syndrome and lots of people deal with it, but how would you suggest dealing with this type of anxiety?
25:11 - Monorepos, yes or no?
29:43 - As a brand new self-taught web developer, how would you know if you’re ready to apply for junior positions?
32:03 - Will there ever be a .eat domain or are the pre-order sites just ripping you off? Would like to know who decides what TLDs are possible or not.
35:26 - I’m currently employed as a fullstack developer but want to build a portfolio for future job hunting. Would you say it’s ok to reference a project or two from an employer? My problem is that the only projects I have outside are mostly just smaller tools built for myself for fun.
39:29 - Should developers always use their real first and last name when presenting themselves as a professional online (e.g. Twitter, LinkedIn, Github, personal site). Or is it acceptable to use a fake last name for example? My wife is quite conscious about privacy online, so would prefer I retain some anonymity. But also, my last name is a bit generic, and not very Googleable. I thought having a more snappy and interesting name would help me stand out, and be easier to find with a quick Google. You guys both have awesome names that are very unique and are hard to forget.
43:59 - How do you find time to work and keep up with updates and libraries etc. having a wife & kids?
46:06 - I am a beginner in making course content. I am trying to create a programming tutorial, but every time I try to record some tutorials I have to compromise on audio quality. Lots of background noises get captured on audio. Can you both share some tips to make soundproofing room? What tricks do you both use?
53:33 - As someone who recently learned/is learning how to build websites using express/node/react, with a little know how with Python and Django too, how do you start building a portfolio that isn’t just a bunch of practice/show-pieces? How do I get a client?
59:53 - Should I be using multiple web apps on a single site or try to make them all one? If I have a site that displays blog posts about parks for example, then a page with all the parks listed out that link to a page about each single park’s details, should I be making the entire thing in one app? Or make a blog app and publish it, then make a different app for the other content and publish it using a subdomain?
Links * Syntax 266: Video for the Web 2020 and Beyond * Cloudinary * Mux * Vimeo * LesMills * Bitmovin * Brightcove * Wista * Cloudflare * AWS MediaLive * Keystone.js * Gatsby * Syntax 331: Hasty Treat - Hireable Skills for 2021 * ICANN * dbx 286s * Electro-Voice RE20 * reMarkable
××× SIIIIICK ××× PIIIICKS ××× * Scott: CamLink 4k * Wes: TS80p Mini Soldering Iron
Shameless Plugs * Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! * Wes: Fullstack Advanced React & GraphQL - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows!
.TECH - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 04:05 - Easy Snippet
- https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet
05:33 - Add Missing Function Declaration
- https://twitter.com/wesbos/status/1369393437062074377
07:30 - Error Lens
- https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
09:08 - Declare Missing Members
- https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension
10:29 - ES7 React/Redux/GraphQL/React-Native Snippets
- https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
11:59 - File Utils:
- https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils
13:59 - GitLens — Git supercharged
- https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
15:15 - ES6-String-HTML
- https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
16:41 - Wrap Console Log Simple
- https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple
17:18 - Text Pastry
- https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry
19:14 - Better Comments
- https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
20:14 - Tip: Use Emmet everywhere
- https://emmet.io/
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
In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, best practices, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Guests * Matt Holt
Show Notes 02:08 - Who are you and what do you do?
03:22 - Why would you want to build a web server?
08:45 - How do SSL certs work?
14:03 - Why do you even need a web server?
23:03 - Is it better to have a web server serve your images?
20:31 - What is load balancing and why might you need it?
31:35 - Is server administration a lost art?
38:03 - What is a sidecar proxy?
38:50 - How do chron jobs work?
39:50 - Why is GO so fast? Why is it good?
46:32 - Should every website have an SSL certificate?
Links * Floss Weekly 364 * Caddy * Let’s Encrypt * Certbot * PM2 * https://doesmysiteneedhttps.com * Tello Drone
××× SIIIIICK ××× PIIIICKS ××× * Matt: LG Stick Vacuum * Scott: Alen Pure BreatheSmart Air Purifier * Wes: Tello EDU
Shameless Plugs * Matt: Matt Holt Sponsorships * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about a common problem you’ll encounter in your development career — the n+1 problem.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:00 - What is the n+1 problem?
- The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships.
09:33 - The solution
- The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids.
11:11 - Should you care?
- Sometimes no: its often fine to do multiple DB Calls
- Facebook DataLoader
- Mercurious
- Many ORMs take care of this for you
- These then break it down into my appropriate SQL
- MongoDB Ruby: eager loading
- Laravel ORM does it
- Aggregation pipelines
- Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en
- Mongoose Populate
- Apollo Studio
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
It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 04:50 - https://shaquilhansford.com/
- Not optimized for desktop
- Lots of spacing issues overall
- Too many accordions - could be lists in multiple columns
- Social links could be in the footer
- Twitter is on point - iwantyoutohire.me
- Phone number on website is good
11:31 - https://www.benlammers.dev/
- Gimmy dat yellow
- The design and polish is really good
- Data URI images can overload CPU
- Semantic headings, but HTML should use some work
- Four H1s on the page
- 20 H2s
- 40 H3s
- Main tag
20:28 - https://www.zubairaziz.com/
- Lots of empty space
- Photo is key
- Not sure what to do when I land on the page
- Blog is nice, but two posts from May - add more or drop it
- Portfolio is just enough
- Nav animation should only happen on initial load
29:39 - https://codebyfil.dev/
- This is a great example of something that is good, but needs a bit of polish
- Tone down the border radius
- Tone down the box shadow
- Border and drop shadow
- Images aren’t links
- Footer padding or space - contact is ridding the bottom
- Scott’s HTML breakdown
- Four H1s
- Six H2s
- Four H3s
- 18 H4s
- Five H5s
37:39 - https://www.johngeorgesample.com/
- Clean but maybe too clean
- Nav is too distractingly too big
- Need active link indicator in main nav
- div div div div - take a look at those semantic HTML tags
- No H1 or H2
- HTML needs work brother
- Use × instead of X
- Asterisk doesn’t work on mobile
46:52 - https://stordahl.dev/
- Great images
- Nice typography
- Sign-up for newsletter is great
- Store = A+
- Scott’s HTML breakdown
- Two H1s, one of which is just nice to meet you
- Zero H2s
- Articles should be articles
- No section
- 1px move on hover is nice - could use a transition
Links * Axe Accessibility Testing * Gatsby * Next.js * https://feathericons.com/ * Snipcart * GeoGuessr
××× SIIIIICK ××× PIIIICKS ××× * Scott: Walkabout Mini Golf * Wes: 60w Portable Charger
Shameless Plugs * Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! * Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL.
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:38 - What is it?
- https://graphql-code-generator.com/
- Code generation for GraphQL APIs
04:34 - What can it do?
- Generate React hooks for any of the major player Apollo client (urql)
- Types for the full stack — resolvers, mutations
07:49 - How we use it
- Generate a schema file to keep client and server in sync in mono repo
- Creates all React Hooks
- Generates all types for both resolvers, and anything client-side
Links * React Query * Apollo * Typescript * Cypress * https://periqles.herokuapp.com/ * https://the-guild.dev/ * Swagger
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
In this episode of Syntax, Scott and Wes talk about building your own authentication — diving deep into JWT, sessions, tokens, cookies, local storage, CSRF, and how it all works!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Show Notes 01:51 - Overview
- Level Up uses a JWT & secure cookie-based authentication and tracks sessions via a db table.
- Accounts.js
05:13 - JWT
- Base 64 encoded (not encrypted) token that contains data. We have both
accessTokens andrefreshTokens. - JWT has three parts:
- Header
- What kind of algo was used
- Payload
- Data about the user
- Username
- UserID
- refreshToken, authToken, sessionId
- Signature
- This ensures that no one monkeyed with the above parts. If you change your email in the payload, the signature is not invalid, because in order to generate the signature, it uses the header and payload as part of it.
- Header
- accessToken
- A short lived JWT that contains the
sessionToken,userIdand expires after 90min.
- A short lived JWT that contains the
- refreshToken
- A long lived JWT that contains just the
sessionTokenand doesn’t expire.
- A long lived JWT that contains just the
- JWT can be decoded and read, but you have to encode them with your secret.
- JWT can be stored anywhere, there are two main places:
20:26 - Cookies
- We use httpOnly, secure cookies to store the accessToken and the refreshToken. The accessToken is a session cookie and is removed whenever the browser is closed. The refreshToken is valid for 100 days but is also re-created and revalidated for 100 more days each time the accessToken is generated.
- Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server.
- Note: Safari has stricter rules than others for same domain cookies (e.g.
localhostwon’t work).
34:26 - Sessions
- Sessions are when a user logs in on a device. If you open a phone and log in and a computer and log in, those will create two different sessions. A session contains information about the user’s connection (like their IP) but it also contains the userId which allows us to create new accessTokens from a valid session.
- Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false.
- Sessions also have
sessionTokenwhich are generated on authentication or create account.
38:10 - CORS
- Cross-origin-resource-sharing
- Can be super tricky to get working cross-domain
- You usually have to actually visit the website for the cookie to be set, even with lax cors
46:06 - CSRF
48:47 - Authentication process
- bcrypt.js
52:13 - Helper Packages
- NextAuth.js is super easy
- Passport.js
- auth0
Links * Caddy * Fastify
××× SIIIIICK ××× PIIIICKS ××× * Scott: reMarkable 2 * Wes: Opration Odessa
Shameless Plugs * Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! * Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about environment variables — what they are, where you should keep them, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:54 - What are they?
- API Keys
- Secrets
- Database URLs
- NODE_ENV
06:16 - Type of env variables
- Plain text
- Encrypted
- Frontend
- Backend
- .env files
.envis a good package for all langs.env.local
- Framework env variables
- System env variables
- Host-provided variables
16:20 - Where should you keep them?
- 1Password
- 1Password CLI
17:34 - Other gotchas
- Netlify Limit is 4096
- Netlify needs a clear cache before it works
THING=yo node index.js- cross-env
- NODE_OPTIONS="–inspect"
- Require before run
Links * Digital Ocean App Platform * Render * Vercel * Netlify
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
It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax.
Show Notes 02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file?
04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects?
10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks!
18:32 - Should a model name be singular or plural?
22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app?
25:46 - What’s the difference between adaptive and responsive design?
32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier?
36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching.
42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in?
45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks.
48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this?
Links * VSCode Peek Definition * Obsidian * Render * Adam Wathan * Gumroad * Braintree * MJML * https://github.com/unlayer/react-email-editor * Redwings shoes
××× SIIIIICK ××× PIIIICKS ××× * Scott: Tosowoong Enyme Powder Wash * Wes: Carhartt Gloves
Shameless Plugs * Scott: Testing with Cypress - Sign up for the year and save 25%! * Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed?
05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast?
09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects?
10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses)
12:48 - Could you all talk about protected/private routes in Next.js? I’m coming from create react app type routing.
16:07 - What would be doing for a living if not a developer?
17:50 - What do you think about Clubhouse? Are you guys planning to talk over there some time?
24:18 - Vue or React? Which do you think will be the top? And should developers learn both?
Links * https://twitter.com/aaronendsley/status/1361375032342110210 * Svelte
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
In this episode of Syntax, Scott and Wes talk about their desk setups and how they’ve evolved, both as coders and video and course creators.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.
Show Notes 03:36 - Desk
- Scott
- Ikea countertop on Jarvis Legs.
- Four presets - sit, stand, horse stance, lunge
- Ikea countertop on Jarvis Legs.
- Wes
- 8" Ikea Butcher Block countertop on legs
- LackRack on wheels underneath
- Desk at cottage is Maple Live Edge Slab on Hairpin Legs
09:01 - Chair
- Scott
- Steelcase Gesture
- Wes
- Polished Aluminum Herman Miller Aeron
- Roller Blade Wheels!
15:39 - Display
- Scott
- Vivo Stand
- 38" LG Curved Ultrawide
- Vissles-M, Portable Touchscreen Monitor
- BenQ Monitor Light
- Wes
- LG 32" 4k Ultra HD
- Dell Ultra HD 4k Monitor
- Rain Design 10032 mStand Laptop Stand
22:49 - Headphones
- Scott
- Ultrasone
- Wes
- QC35s w/ Wicked Cushions - wish they charged over Wireless
24:58 - Mouse + Keyboard
- Scott
- Keychron K3 with optical
- Apple Magic Trackpad
- Wes
- Apple Magic Keyboard - extended in Space Grey
- Logitech Mx2
29:18 - Laptop
- Both
- MacBook Pro
33:43 - Dock + Connecting it all together
- Scott
- Caldigit TS3+
- Satechi USB-C Slim Multi-Port with Ethernet Adapter
- Under desk rack
- Wes
- Everything is in a Lackrack
- Caldigit TS3+
- Single Cable Hookup
- Two monitors
- 6+ webcams
- Elgato CamLink
- 2 HDDs
- Microphone
- Amazon Powered USB Hub
- Startech Rack Mounted Power Strip
41:36 - Camera + Capture
- Scott
- Sony a7 iii
- Elgato CamLink
- Wes
- Sony RX100 iii
44:11 - Microphone + Capture
- Scott
- Audient Nero Monitor Controller
- M-Audio BX8
- EV RE20
- Focusrite Scarlett 2i2
- dbx 286s
- Cloudlifter CL-1
- BSW RE320POP
- Wes
- Heil PR40 + shock mount, boom arm, pop filter
- Focusrite Scarlett 2i2
- ART EQ 351
- dbx 286s
- BSW RE320POP
49:06 - Lighting
-
Scott
- Neewer Bi-Color 480 LED
- Traditional three-point lighting (key, fill, backlight)
- Philips Hue above for color pop
-
Wes
-
Neewer Bi-Color 480 LED on a Wyze Plug
- Two Backfill LED Color lights
- BenQ Screenbar
55:22 - Storage / Backup / Home Server
- Syntax 220: The Synology Show - Backups and Home Server
- Scott
- Synology DS918+ 8TB
- Wes
- Synology DS918+ 16TB (DS920+ is the latest)
- 16TB of drives - I don’t use anywhere NEAR that
- LaCiE Rugged or WD Passport for Time Machine
57:50 - Other / Wish list
- Scott
- ReMarkable 2 tablet
- Apple Pro Display XDR
- Wes
- Mindnode
- Elgato Stream Deck
- LG 5K2K Curved Display
Links * GraphQL Code Generator * KeystoneJS * BSW * Ikea Lack Side Table * Better Touch Tool
Shameless Plugs * Scott: Testing with Cypress - Sign up for the year and save 25%! * Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about hireable skills or 2021 — what you need to know to get a job and grow in your career this year!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:17 - Code in general
- Clean, commented, organized
- Take the extra hour before an application and polish it
06:10 - JS
- Basics of the language - storing data in Arrays and Objects
- Looping and flow control
- Array methods
- Promises + async await
- DOM basics - select an element, listen for clicks, update elements
- Node basics
- Most of your JS basics apply here
- Read Files, write files
- Fetch data and return it
08:38 - CSS
- Attention to detail - pixel-perfect replication of designs
- Works well on mobile
- No reliance on libraries - complete reliance on Bootstrap or Tailwind is a red flag. If you use these things, explain clearly why they are useful to you (e.g. augment your skills, not relied on).
12:54 - Real-world libraries
- One of the following: React, Vue, Angular
- Node.js - sending Server data as a response
- JSON
- Express, Next.js
- Popular helper libs
- Date functions / Moment (Moment is old but its still 2x more popular)
- Lodash
- CSS
- Scoped CSS
- Pattern libraries
17:15 - What about data structures and algorithms?
- Yes you obviously need to know about arrays and objects - probably maps and sets too
- Links lists? Tree structures? Traversal?
- https://twitter.com/wesbos/status/1353729683486076930
20:26 - Soft skills
- Know how to talk to PMs and other devs.
- Know how to stay on top of timelines and schedules while communicating.
- You won’t last long in any work environment where you aren’t able to fit in.
- Many devs sometimes get a big head about doing tech - this is not something you want to emulate. Ignore any kind of internal “us vs them” attitude. It’s about the big picture and you’ll go further.
- Write good, short, emails that don’t sound like you are mad.
Links * LeetCode * Syntax 117: Hasty Treat - How To Email Busy People
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
In this episode of Syntax, Scott and Wes talk with Tanner Linsley about React Query, how it works, why you might want to use it, and more!
Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Guests * Tanner Linsley
Show Notes 01:56 - What do you do?
- nozzle.io
- React Query
06:04 - What is React Query?
24:19 - How does React Query use dev tools?
31:20 - What about React Context?
36:59 - Server-rendered components?
42:40 - Thoughts on static sites?
50:38 - What is the stack?
Links * Redux * Axios * Syntax 206: State Machines, CSS and Animations with David K Piano * RTK Query * Relay * Remix * Twin.macro * Tailwind CSS * React Static * Next * TanStack
××× SIIIIICK ××× PIIIICKS ××× * Tanner: React Query - Essentials Course * Scott: Govee TV LED Backlights * Wes: 1Password
Shameless Plugs * Tanner: Nozzle.io * Scott: Testing with Cypress - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more!
Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:55 - What Is Cypress?
- A visual testing studio that uses a jQuery-like syntax to test your application in browser.
- Very modern testing solution.
07:36 - Used to be only Chrome
- Now available for Safari, Firefox, Edge, etc.
??? - What frameworks is it for?
- Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results.
- Can also run on ci/cd via a headless mode.
- React component testing is experimental.
10:58 - Automation
- Cypress studio new feature that writes tests for you.
12:37 - Data
- Intercept + Fixtures or through plugins
15:01 - Cost?
- It’s free!
- There is a paid product called Cypress Dashboard that allows you to record tests long-term.
Links * Cypress * bos.af * Jest * Better Touch Tool
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
It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected.
04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions?
08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee?
12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over!
18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this?
22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it?
29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new?
35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem.
42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue?
Links * SnipCart * Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More! * FileReader API * Syntax 322: The Deno Show * Syntax 044: How To Learn Things Quickly * Twilio * Postmark * Begin.com * RabbitMQ * Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry.
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hario Filter-In Cold Brew Tea Bottle * Wes: Slonik USB Headlamp
Shameless Plugs * Scott: Testing With Cypress - Sign up for the year and save 25%! * Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:38 - What is a TypeScript compiler?
- Do we still need Babel / WebPack?
07:49 - Babel
- Transpiler
- It doesn’t do typechecking
- New JS features that aren’t in TypeScript yet
10:22 - SWC
- Rust based compiler
- Doesn’t do type checking (yet)
- https://github.com/swc-project/swc/issues/571
13:03 - Deno
- Uses tsc right now
- Might move to Rust
- https://github.com/denoland/deno/issues/5432
13:36 - Surcase
- https://github.com/alangpierce/sucrase#transforms
14:46 - ESBuild
- Compiles, but doesn’t do any type checking
- Fastest
17:39 - What about bundlers?
- Parcel
- Snowpack
- Webpack
- ESBuild
- When might you still need a bundler?
- To handle different types of files that are non-standard
- Like importing CSS and images
- To handle different types of files that are non-standard
- Treeshaking
- Smaller bundle files
- Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that
- Polyfills
- Typescript does convert to syntax, but will not polyfill features
- Something like Promise
- Syntax can be transpiled to old code
- Methods like allSettled aren’t
Links * Syntax 324: TypeScript Fundamentals * Syntax 322: The Deno Show
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
In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 04:32 - Why does an impression matter?
- All of this stuff comes together to work in your favour when you are hunting for a job.
05:14 - What goes into an online presence?
- Twitter
- Share what you know
- Online website
- Design
- Messaging
- Effort
- Personal life
- Blog
- Resume
- It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them.
07:25 - A couple stories
- @HenriHelvetica
- You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries.
- I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work.
- I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.”
09:40 - Ash Connolly
- https://ashconnolly.com/
https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0 - Software Engineer
- Using new tech with high end clients
- Review
- Pros
- Clean, simple design, but doesn’t feel like it’s missing something
- Animations are a nice touch
- Easy to see their work (e.g. photo, title, short paragraph, link)
- Testimonials is good, I might change the word testimonials, but that’s small
- Cons
- Nitpick - footer emphasis color looks like a link
- HTML is good, but missing some semantic tags like , , , too reliant on divs
- Resume
- Pros
- Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog).
- Work history - good way of describing what he did. “Carried out performance audits and site speed improvements”
- Links to writings and side projects
- Cons
- Lists Brad Frost as someone who shared his post. This feels a little weird.
- Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS.
- Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that.
- Pros
- Pros
20:48 - Matthew Bidwell
- https://matty.dev/
- Backend dev
- Not focused on dev
- Review:
- Banging domain
- It’s clear who he is, what he is about
- Links to Twitter, Github and LinkedIn right away
- Blog posts showing he knows what he’s talking about
24:42 - Leah Lundqvist
- https://leah.link
- Review:
- Pros
- Fantastic aesthetics on site
- Good lead paragraph
- Cons
- I’m not sure what work she actually does
- Github pages are great for digging but not curation or showing off
- Same with Twitter
- For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone.
- Don’t make them hunt for it
- Twitter review:
- Unreal
- Pinned tweet
- Pros
31:04 - Ismail Ghallou
- https://smakosh.com/
- Best one yet
- Clear explanation right off the bat
- Dribbble - shows me he’s up on the latest
- Open source
- Testimonials
- Talks
- Blog
- https://twitter.com/smakosh - Twitter lines up
- Most recent tweets about tech
40:18 - Jhey Tompkins
- https://jhey.dev/
- Whimsey
- Sound!
- Good use of CSS and SVG animation
46:28 - Wes’ website
- websos.com
- Can’t view source
- Whimsey
- The right kind of animation
- The link to the Syntax podcast has no indication that it’s going to take you offsite.
- The background image is good, but not as good with a wide browser.
- Custom scrollbars are nice
- Overall the site is a delight
53:25 - Scott’s website
- scotttolinski.com
- Font’s a little big
- Link to documentary is great
- Bio should include links
- Page animations are great
- Showing personal life / interests is good
- Super fast
Links * https://twitter.com/wesbos/status/1350961135269400580 * Syntax 298: Voice Coding is Really Good with Josh Comeau * Josh Comeau * Doug DeMuro
××× SIIIIICK ××× PIIIICKS ××× * Scott: Swedish Dishcloths * Wes: Paper Wheels Knife Sharpening System
Shameless Plugs * Scott: Testing with Cypress - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:04 - The Events
- http://keycode.info/
- keydown
- beforeInput
- Keypress - deprecated
- inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc.
- keyup
- change event - only fires when you focus out
- https://github.com/w3c/uievents/issues/220
08:02 - Event meta data
"key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false
* Others:
+ .locale
+ .repeat
16:46 - Media keys
- https://developers.google.com/web/updates/2019/02/chrome-73-media-updates
- play, pause, ect
- Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow
18:32 - When might you use key codes?
- Space bar to stop a video on a page
- Building a game
- Making a web app feel more like an app
Links * Better Touch Tool * Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management
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
In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes What is TypeScript? 03:12 - Types?
- What are types and why should you care?
- JS is a typed language, it’s just not strongly typed
- JS does not care about reassignment of a variable to a new type
- Does not care about your types, but they do exist
06:34 - The Fundamentals
- You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like.
- Create a variable: Will it be a string? A number? A custom type of show?
- Create a function: What params does it take? What type are they? What does it return?
- Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed.
- This can allow you to prevent shipping code that has these errors by checking your code.
- Some of the biggest benefits here come via errors in your text editor
13:30 - Explaining the types
- You can create your own types
- Strings
- Numbers
- We only have numbers in TS, no floats/ints
- We do have BigInt though, but not something most people will use
- Arrays
- Will be a list of another type
- Unions
- This type will be one of the possible options
- String of DRAFT PUBLISHED or ARCHIVED
- Intersections
- An intersection type combines multiple types into one
- Objects
- These are custom types where each property is its own type
- Any
- Explicit any
- Implicit any
- Language types
- These things are technically just Objects, but they have their own types
- Dates
- Timeouts
- DOM Elements / Nodes
- Void
- When a function returns nothing — usually used with side effects like click handlers
- Enum
- A set of named constants
- Used when you have a select amount of values — I like to think of these as the select lists of TS
- String unions are also used for this same thing
- A set of named constants
30:28 - Inference
- Automatic detection of types
- Typescript will try to infer your types based on their definition
- Not every type can be inferred, leading to implicit anys and the need for explicit types
33:25 - Getting types
- Most popular packages already have types — you install them like
npm i @types/whatever - If a package doesn’t have types, you have to create them yourself, which can be annoying
- MakeTypes
- Console log a JSON.stringify(obj), and pipe it in
- Node has types
- Vanilla JS has types, for the language and all of the DOM - HTMLInputElement
- React has types
- Typing Node modules that don’t have types
Overall benefits 40:39 - Type hinting
- With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect
- This seems like a small deal but in practice leads to being much more efficient
42:50 - Refactoring
- Rename a function, type, or variable and it will be updated everywhere in the project!
- Moving a function to a new file is actually part of TypeScript
- Drag + Drop file, update imports
48:10 - Compiling
- TSC vs Babel / Esbuild
- Only TSC type checks
- Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD
Links * Snipcart * GraphQL * Snowpack
××× SIIIIICK ××× PIIIICKS ××× * Scott: + 1: LumiPets + 2: LumiPets Bear * Wes: Phomemo Label Printer
Shameless Plugs * Scott: ESM & Snowpack - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 02:55 - Previous iterations
- Originally on Drupal 7
- Full re-write to Meteor + Blaze
- Two sites — store.leveluptutorials.com and leveluptutorials.com
- Meteor + React
- Meteor + Apollo
- Combine store and site
- Move to TypeScript
- NOW
05:30 - Big choices
- No Babel up and down the stack
- UI
- Mostly unchanged — React + Styled Components + SCSS
- Moving more to SCSS, CSS vars
- Build and dev done via Snowpack
- 50ms hot reloadin’
- Mega fast development workflow has been a huge plus
- Errors in the UI via Snowpack
- Wrote a custom GraphQL importer plugin
- Mostly unchanged — React + Styled Components + SCSS
- API
- ESBuild
- Insane speeds
- Wrote a custom GraphQL importer plugin
- Mercurious / Fastify
- ESBuild
- Codegen
- GraphQL code gen to create everything we need for a fully typed codebase
- Auto-generated React Hooks
- Hosting
- render.com for both
- CLI
- Custom avalanche CLI that removes the guesswork and makes bulk operations easy
- Caddy server for easy
leveluptutorials.devin local environments - Testing
- Jest → API
- Cypress → UI
Links * Digital Ocean app platform * https://beta.leveluptutorials.com/
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
In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more!
Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
Show Notes 02:13 - What is it?
- A secure runtime for JavaScript and TypeScript
- Built by Ryan Dhal — same guy who initially built Node.js
- API is JS or TS out of the box
04:55 - Does it replace / what is it in relation to?
- Node
- It’s a replacement for Node.js
- Express
- Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs
- https://github.com/oakserver/oak
- Serverless
- Deno can be used for anything, so it can be used for serverless functions, or a traditional web server
- Serverless, Deno and TypeScript with Brian Leroux
- React / Vue / Svelte
- These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until.
- https://alephjs.org/
- SSR
- It comes with all browser APIs out of the box!
- Fetch
- Window + Add Event listener
- Webpack / Parcel / Snowpack
- Deno is a bundler
- Prettier
- Deno is a formatter
- TSC
- Deno is a TypeScript compiler and runtime
- ESLint
- Deno is a linter
- Jest
- Deno is a Test Runner
- NPM
- Deno is a package manager - it pulls in packages from URLs
14:51 - Modules
- ES modules from the start
- Modules are loaded from URLs
- Why? No package registry to worry about
- This is how the browser works
- Import from URL
- You can also specify it in the json file
- https://github.com/oakserver/oak/blob/main/deps.ts
- https://deno.land/
- Fetch is built in!
- It’s a browser API, but who cares?!
- Browser APIs
- window.add event Listener
- Deno is event based, like the browser
20:10 - A nice standard library
- https://github.com/denoland/deno/tree/master/std
22:14 - WASM
- Deno can run WASM with the same APIs that the browsers can
- Node is doing this too (experimental)
25:06 - Multi-threading with Web Workers
26:13 - Speed
- It’s fast!
- They took everything they learned from Node - good and bad
- Built in Rust
- From what we understand:
- V8 is written in C++
- Node is written in C, C++ and JavaScript
- How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two.
- https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs
29:44 - Security
- Sandboxed
- —allow-read
- —allow-net
- -allow-write
- https://deno.land/manual@v1.6.3/getting_started/permissions#permissions-list
- You can specify which dirs it can access
33:39 - Run from anywhere
- https://www.npmjs.com/package/npx
- Deno run https://cool.com/whatever.ts
37:43 - Async out of the box
- Everything is based on async + await / promises right away. No callback APIs, no promise wrapping.
- Top level await
38:53 - Node Compatibility
- Node APIs are being filled
- This means if a browser package ships an ES module of a package, we can just import it
42:21 - What we’ve built
- A bunch of sample scripts
- Lots of simple demos
- Very intuitive
- Fetched and downloaded every single Syntax mp3
- https://twitter.com/wesbos/status/1326345600141582336
46:54 - Hosting
- Literally any linux server (Linode, Digital Ocean, etc.)
- https://begin.com/
- https://fly.io/
48:29 - Final thoughts
- Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source.
- Wes: If You know JS or TS, you are already 90% there.
- The package ecosystem isn’t there yet
- Battle-tested
××× SIIIIICK ××× PIIIICKS ××× * Scott: Boom/Bust: The Rise and Fall of HQ Trivia * Wes: Orthopaedic Pillow
Shameless Plugs * Scott: Deno 101 For Web Developers - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 03:10 - What is AVIF?
- AVIF is derived from the keyframes of an AV1 video
- Royalty free (big deal)
- What about WebP?
- Basically half the file size of a WebP for free, which was already about half the size of a jpeg
- It’s a lossy format — ie it inherently will degrade the image
- https://jakearchibald.com/2020/avif-has-landed/
- No animation
10:53 - How to implement
- Cloudinary is in beta, but you can try it
- Gatsby supports it
- https://squoosh.app/
- Imagemin
- https://github.com/nucliweb/imagemin-avif
- https://avif.io/
- https://github.com/dreampiggy/AVIFQuickLook
- https://github.com/vercel/next.js/pull/20765
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
It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more.
04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice?
11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it?
18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical?
22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects!
25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch?
30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc.
35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal?
40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose?
47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming?
55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users?
Links * Syntax Listener Questions * Bundle Phobia * Shopify * Snipcart * Styled Components * BEM * Mux
××× SIIIIICK ××× PIIIICKS ××× * Scott: Double Sided Mounting Tape * Wes: Secret Aardvark Habanero Hot Sauce
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes 05:00 - How do you define type at the start of a new project?
15:03 - How do media queries and screen sizes affect your system?
16:58 - Why are systems in type important?
20:21 - How do you design a type system?
- Scott’s type system:
/* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize);
Links * https://type-scale.com/
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
In this episode of Syntax, Scott and Wes are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Magic Bell - Sponsor MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 04:17 - All I Want for Christmas in React is:
- Suspense for data fetching
- On mount animations
- Unmount for me
- Single file components
preventDefaultshortcut- Input to state mapping
09:45 - JS or Nay-s (or Both)
- Shout out to Pigeonhole
- Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python?
- Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces?
- Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines?
- Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri?
- Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger?
- Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors?
- Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte?
- Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine?
18:44 - Overrated / Underrated
- Deno
- ESM import from URL (no npm)
- Remix.run
- Xstate
27:49 - Hot Take Tweets
- https://twitter.com/wesbos/status/1336367385683636225
34:34 - Listener Questions
- Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance?
- Q: TypeScript all the things?
- Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.?
- Q: Can you share some exclusive BBQ tips?
- Q: What do you expect of Blitz.js in the next few years?
- Q: What’s the first node module you install in a brand new React project besides React itself?
- Q: Thoughts on using languages other than JS and TS with React like Kotlin?
- Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website?
Links * Watch the live recording of this episode: https://www.youtube.com/watch?v=8xJpxj6T1BQ * Formik * Mux * Syntax Ep 206: State Machines, CSS and Animations with David K Piano * Check My Hair - Wes Bos * Houdini.How * Rust * Cloudinary * LockPickingLawyer YouTube Channel
××× SIIIIICK ××× PIIIICKS ××× * Scott: VS Code color conversion extensions * Wes: Acrylic lock picking kit
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about nothing — null, undefined, void, false, 0, ‘’, NaN, [], {}, never — all sorts of values that could mean the things that do not exist.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:35 - Undefined
- Implicitly nothing
- A variable declared, but not set is undefined
04:25 - Null
- Explicitly nothing
04:41 - Null vs Undefined
- Null has a value of nothing
- Undefined does not have a value
- You can set variables to either
- If you want to set a score variable to nothing, set it to null
- If you want to un-set a value, set it to undefined
- == will check if a value is either null or undefined
05:35 - Void
- In Javascript
- You can pop void in front of calling a function and it will return undefined (even if that function returns a value)
- I’ve seen it on links that go nowhere (don’t do this — use a button)
- To prevent an arrow function from leaking
onSubmit="javascript:void()"is a quick-n-easy prevent default on forms
- In Typescript
- Void is when you don’t care about what is returned from a function, or if nothing is returned
- A click handler that goes off and does stuff (side effect) can return void
09:15 - Never (in Typescript)
- Some functions will never return:
- Functions that throw errors
- Functions that have infinite loops
- Also, unreachable variables have a type of never
if(true == false) { let var = 'this will never be true'; }
11:05 - Falsy values
- 0, -0, 0n
- false
- ‘’ (empty string)
- Empty array
- Is a value
- Its .length can be falsy
- Empty object
- Is a value
- Its object.keys(object) length can be falsy (0)
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
In this episode of Syntax, Scott and Wes talk about their predictions for 2021!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
Show Notes 02:06 - ESM
- Scott: It’s going to be big
- Snowpack
- Wes: Everything going forward should be ESM
05:44 - Wes: Remote work will grow
- Whole new talent pool opens up
- Whole new living situations open up
08:23 - Scott: Deno will grow
- Deno 101 for Web Developers
11:12 - Wes: Tooling will fade away
- Less setup, more behind the scenes
- Rome
- Deno
- Linter
- Formatter
- Transpiler
- Tester
- Parcel2
- Snowpack
- Nextjs
14:14 - Scott: Greater usage of other languages to build Javascript
- esbuild
- Rust
- Go
19:35 - Wes: Programming communities will gain traction
- Github Discussions
- Forem
- Circle
- spectrum
- Discourse
23:25 - Scott: More WASM
- Mongo
- Spline
27:19 - Typescript
- Wes: Typescript will become more popular
- Scott: Tooling will get better
- VS Code
29:37 - React
- Scott:
- Scoped CSS in React will evolve
- SSR and hydration will be better
- Wes:
- People will fall out of love with React
- Or more magic will get added to React
32:52 - Scott: More web component frameworks
- Stencil
33:17 - Scott: Markdown and mdx-like frameworks will skyrocket in use
33:59 - Wes: Gatsby
- Hosted GraphQL / SSR / Render on demand
- Solve the pain of long build times
- Syntax 308: Gatsby vs Next.js in 2021
- Next.js
35:24 - Scott: AR tech will grow
- Target AR app
36:38 - Wes: AI will become accessible
- Something as easy as a search result
- RTX Voice
38:43 - VS Code
- Scott:
- It will continue dominating
- Cloud and shared coding env will become better
- Figma
- Wes:
- Github Codespaces
40:18 - CSS
- Wes:
- Color functions
- More use of built-in features
- Scoped CSS
- Scott:
- People are going to love and use CSS variables
- Modern CSS Design Systems Course
42:39 - Serverless
- Scott:
- Ease of use will get better and better
- Wes:
- Netlify
- Vercel
45:30 - Wes: Enterprise Jamstack will become a thing
- Cloudflare hosting
- Next.js
- Gatsby
- Sapper
- SvelteKit
46:30 - PWAs might become more popular
- Apple will never want you to go around the app store
××× SIIIIICK ××× PIIIICKS ××× * Scott: Ted Lasso * Wes: Neewer Dimmable Bi-Color LED
Shameless Plugs * Scott: Deno 101 for Web Developers - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about keyboard shortcuts, window management, and how to stay productive.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:54 - Karabiner-Elements
06:11 - Better Touch Tool
13:55 - ScreenFlow
17:52 - VS Code Shortcuts
21:20 - Text Expander
23:00 - Clipy
Links * Davinci Resolve * Divvy * Uberlayer * Elgato Stream Deck * iShowU * Rocket * Clipy source
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
In this episode of Syntax, Scott and Wes talk about 2020 in review — predictions, hits and misses, hot tech, what they worked on, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 01:43 - Predictions from 2020
- CSS Subgrid
- CSS Houdini
- CSS features not supported in older browsers yet
- Scrollsnap - IE 11 and up. Lot’s of mobile issues.
position:sticky- no IE at all
- NPM tink
- Installer-less npm
- Load packages at runtime into a shared cache across all projects
- Intelligently download the parts you need
- Yarn PnP / Yarn 2
- Hard links to eliminate package duplication
- Shared cache across all projects
- Pika & Snowpack
- Deno
- React
- Suspense in more libraries
- Suspense for Server Rendering
- Meteor
- New ownership. v1.9 just dropped with lots of promise for future growth
- Svelte 3
- Vue 3
- Apollo
- 3.0 came out
- Fine grain cache control
- Hooks API
- Custom logic over how things are read and merged
- New dev tools
- Next.js
- 10.0 came out
- Images!
- Gatsby
- A single useQuery (made possible by suspense)
- Serverless
- Going to get easier
- Begin
- Next.js / Now Functions
- Headless CMS Thunderdome
- Sanity
- WordPress
- WPGraphQL
- Keystone
- Strapi
- RedwoodJS
- Blitz.js
- Cypress
- End to end testing
- We got Firefox support in 2020
- Modulz
- Exports to JS component
- Figma
- Was already amazing in 2019
- Constantly improving and adding new features
- Can import from Sketch
- Auto Layout
- Spline
42:24 - What other tech was hot in 2020?
- ES Modules is king
- We’re ready in the browser
- Node shipped stable
- Deno has it
- Snowpack
- Bundlers and tools
- Snowpack
- Vite
- Rollup made gains
- Rome
- GraphQL got way easier
- Battle of the Types
- Typescript
- Flow
- Reason
- Rust
- Wasm
- Viable to use
- Starting to exist in more real ways
52:53 - Working from home
- Remote work is hotter than ever
- Starlink is coming
- Webcams - Cam Link
- Discord
- Remote Pairing
- Live Share - I used VS Code with Jed from Keystone
- Tuple
57:13 - Code libraries
- React Query
- Alpine.js
- Stencil
59:25 - Personal / Professional updates
- Hard year for productivity
- Published more than 100 episodes of Syntax
Links * Syntax 216: Tech To Watch In 2020 * Adam Argyle * https://ishoudinireadyyet.com/ * Syntax 212: Pika Pkg * Fred Schott * Level Up Tutorials: Deno 101 For Web Developers * React Suspense * Sapper * How to Supercharge Your Productivity with GraphQL Tooling by Scott Tolinski * Wes’ Master Gatsby Course * Syntax 308: Gatsby vs Next.js in 2021 * Syntax 299: Hasty Treat - Bundlers in 2020 * https://github.com/ffmpegwasm/ffmpeg.wasm
××× SIIIIICK ××× PIIIICKS ××× * Scott: Innr Bulbs * Wes: Pendleton Weighted Blanket
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about how hosting and web services pricing works, and how to figure out what you need, and what you don’t.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:55 - Per minute
- Spin up, do the work, spin down
- Popular in serverless space
- Can apply to other types of computing such as graphics, AI, machine learning, etc.
03:49 - By resources
- Ram
- CPU
- Disk space
06:02 - Per “dyno”
- These are Heroku Linux servers
- You can add more dynos and make your app faster
- They scale it for you
08:54 - By bandwidth
- Sitting files
- Inbound (ingress)
- Output
12:24 - By DB calls or entries
- Databases
14:04 - By users
- This is more of a Sass thing, but can bleed into hosting too
- Seat-based - Netlify does something like this
17:23 - By apps
- Digital Ocean app platform
- Each app is $5
21:22 - By “work”
- Cloudinary does transforms on images
- Mux
Links * Heroku * AWS * Digital Ocean * Meteor Galaxy * Linode * Rackspace * MediaTemple * GoDaddy * Bluehost * Backblaze B2 * Mux * GraphQL * Github * Netlify * 1Password * Cloudinary * Firefox Containers * Chrome grouped tabs * Brave * Digital Ocean app platform * Cloudflare * Vercel * Prisma
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
It’s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 00:47 - Roch Tolinski — You guys are doing a downtown job!!!
02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition?
10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro?
13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute.
19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains.
24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses?
31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version?
35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients?
39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen?
42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time.
44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this.
47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do?
53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved?
Links * https://isapplesiliconready.com/ * https://github.com/ThatGuySam/doesitarm * https://www.electronjs.org/blog/apple-silicon#how-does-it-work * Missive * VS Code * Screenflow * Figma * Sketch * Brew * MongoDB * iTerm2 * Hyper * Davinci Resolve * https://remix.run/ * React Router * ExpressionEngine * Keystone.js * Advanced Custom Fields * Dreamweaver * Sapper * Svelte * https://svelte.dev/blog/whats-the-deal-with-sveltekit * Rollup * https://www.snowpack.dev/ * Udemy * Laravel * https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys * Vercel * Netlify * Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills? * Design is a Job by Mike Monteiro
××× SIIIIICK ××× PIIIICKS ××× * Scott: + 1: Chameleon: Hollywood Con Queen + 2: Q Clearance: The Hunt for QAnon * Wes: truLOCAL
Shameless Plugs * Scott: Deno 101 For Web Developers - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the PS5 bot debacle, and how they would do it differently!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:12 - Scott’s strategy
- Go to Reddit and refresh until someone posts a link and then GO GO GO
- Don’t buy on sites that allow simple bots to work
- TBH I don’t know how to code this type of bot and would prob end up accidentally buying a ton of stuff
05:06 - Wes’ strategy
-
https://mcbroken.com/
-
You need a way to find out of there is stock
- Find out of there is an API endpoint you can hit (inspect element)
- If there is not, you’ll need to scrape the site.
- Fetch(url). text()
- Regex
- Cheerio
- Puppeteer (slower, easier to run)
- Save any data that you want in a database. Text-based database is great.
- Lowdb
- SQLite
- DynamoDB (if doing serverless)
- Re-run the scrape every N mins
- When there IS a match you can:
- Send a text message - Twilio
- Send an email - Postmark
- Try to fill out the form and submit it yourself
- document.querySelector()
11:35 - Things that get in the way
- Blocked IP
- Use a VPN
- Captcha or Cloudflare
- Run it on your local computer
- Use Puppeteer to get all cookies and headers
Links * https://twitter.com/bahamagician/status/1329430249151533066 * stocktrack.ca
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
In this episode of Syntax, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, and more!
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests * Brian Leroux
Show Notes 02:17 - What’s your background?
06:18 - What is serverless? Why is serverless so awesome?
14:07 - What changes from moving from an existing app to a new app?
16:15 - What is a cold start?
17:46 - What languages are suitable for serverless?
19:14 - What do you think about Deno?
24:23 - How does Architect work?
31:14 - What do you think about Typescript?
40:35 - Do you think websites should work without JavaScript?
44:51 - What about sharing code?
Links * Begin * Architect * Scott Tries Begin * Lambda * https://alephjs.org/ * Deno * Typescript * Digital Ocean * Azure * Remix * Svelte * Puppeteer * Yumda * DynamoDB
××× SIIIIICK ××× PIIIICKS ××× * Brian: Begin Fingerprinting * Scott: Been Here For Too Long * Wes: Grabber Tool
Shameless Plugs * Brian: Begin Proxy * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:15 - The things we tried
- Zoom Breakout rooms
- Hopin - $$$
- Streamyard
04:24 - What we used
- Discord
- Room as a waiting room
- Roles to give access
- An a/v room where Wes and Scott were hanging
- Lots of questions about Slack vs Discord
- OBS
- ObS to stream to three locations
- ObS Streamlabs does this easily
- Screen capture did a better job than using the video source from Discord
- Youtube, Youtube, and MUX
- Streamlabs can stream to 4 sources at once
- MUX
- How we got Syntax.fm/live to work
- Create a new live stream on Mux via their UI
- Get stream address and key
- Point Streamlabs to it
- HLS m3u8 address from Mux into a HLS react player
- Looping intro video
- Principle for mac
- Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY
- Music
- Song Scott wrote
- Recording Audio
- Wes recorded two streams locally
- All audio on stream was piped through BlackHole on Scott’s machine
- Used Loopback to pipe Discord audio into an input
- Scott + Guest were on the same channel, possibly compressed
- Sounded good!
Links * Zoom * Hopin * Streamyard * Discord * OBS * MUX * Slack * Spectrum * Streamlabs * VLC * Twitch * react-hls-player * Principal * BlackHole * Loopback
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
In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true?
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:34 - Server-rendered
- Both do server rendered
- Gatsby is gone at build time
- Next is done at build and on deploy
05:26 - Static generation
- getStaticProps()
- getServerSideProps()
08:25 - Re-rendering pages
- Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed.
- Gatsby-cloud
- Next.js has the revalidate flag that will re-render when stale
18:54 - Data management
- Gatsby has a built in GraphQL API feature with
- Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want.
23:16 - Client-side data
- Neither do anything, next.
26:33 - Dynamic Pages
- List of 100 shoes, each one gets a page
- List of four types of shoes: basketball, runners, casual, bowling, etc.
- List of 10 colors: each color gets its own page.
- List of 12 sizes, each size gets its own page.
- Now it gets complicated when you do this:
- Show me basketball shoes, in red, in size 5
- 600 pages minimum
- What about size 6+7?
- Then you get into having to fetch data on the client side - but all your data is in GraphQL?!
- The queries are different!
- Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794
30:41 - Routing
- Neither do nested routing still
- Both do folder based wrapper
34:50 - Hosting
- Anywhere
35:54 - Images
- Compression/resize
- Lazy loading
- SVG
- Blur up
- Next 10 released first revision of Next.js image
- It’s not as good as Gatbsy-image
- Must specify width and height, whereas gatsby has fixed and fluid
- Compression
- No blur up
- Yes lazy loading
- both don’t support gifs
- Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it
- Not for long! https://twitter.com/ascorbic/status/1320770231657238529
- Next.js is just `+ Next does remote images
- Neither have quality or format auto like Cloudinary does
- Gatsby images have to be compressed at build time
- Next.js can do it on the fly
- assuming your server has the right tooling installed
* The GOLD STANDARD - https://gridsome.org/docs/images/
- assuming your server has the right tooling installed
- Lib authors need to give this a look
- https://twitter.com/mxstbr/status/1323279745275101184
-
https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image
46:20 - Server or Serverless -
Gatsby - none. You can do it with Netlify, Begin, AWS, Gatsby doesn’t care.
- Next.js - can do server with API routes. Can do serverless if you host on Vercel.
49:44 - SEO
- Tags
- Gatsby - Helmet
- Next - Head
- Sitemap
- Plugin for both
49:55 - Plugin Ecosystem
- Gatsby has lots of plugins that you install
- Next.js has some too. Seems Gatsby is easier in this regard because plugins can manage and normalize data into the GRaphQL Layer.
53:10 - Auth
- Neither do auth
- The first to do baked-in auth solution could get big gains.
- See Scott’s Svelte Meteor accounts set up. It good. https://github.com/leveluptuts/svelte-accounts-ui
55:00 - E-commerce
- Gatsby - options are mostly limited to Snipcart and Shopify like iframe drop in solutions where the majority of operations take place on another site and service.
- Next.js - hey released a starter boilerplate that leans on an existing headless cart
- https://rainierwatch.com/
Links * Syntax 120: Gatsby vs Next * Gatsby * Next.js * Svelte * Meteor * Vercel * GraphQL * https://www.swyx.io/react-sfcs-here/ * React Query * SWR * React Router * gatsby-image * Cloudinary * imgIX * Begin * Netlify * https://reactioncommerce.com/ * Shopify * SnipCart * WooCommerce
××× SIIIIICK ××× PIIIICKS ××× * Scott: Cobra Drain Zip It * Wes: Deli Containers: + Mixed Boys + Small Boys + Medium Boys + Large Boys
Shameless Plugs * Scott: Animating Svelte - Sign up for the year and save 25%! * Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off!
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`
In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:54 - Decouple the UI from the logic
- This wasn’t impossible with class-based components, but we started using HOC to do this.
- With hooks, it makes you decouple what it does and how it looks.
- Makes things like GraphQL code gen possible
- Multiple pieces of state or functionality
- Share commonly used functionality among projects and components
10:31 - Reduction in code
- Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.”
13:30 - useEffect’s dependencies
- These give you access to targeted control over side effects rather than just something changed.
14:15 - Easier to grok
- What happens? When? Where? It’s mostly in the hook.
16:09 - Simplicity in usage
- Thing, updateThing is more targeted than set state
- Ref makes way more sense with useRef
- String refs weren’t great, the function ref thing was obnoxious
21:07 - Gripes about Hooks
- Naming is kind of odd
- Vue did a better job with the names
Links * https://github.com/pmndrs/jotai * https://github.com/rehooks * https://twitter.com/youyuxi/status/1327328144525848577/photo/1
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
It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 03:17 - Home + Cooking
- Cold Brew Maker
- 1 Gal - https://amzn.to/3pcKkKM
- 2 Quart - https://amzn.to/3eIV921
- Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit
- Precut parchment - https://amzn.to/35dtWld
- Gaffers Tape - https://amzn.to/3lfH7aG
- Tineco Pure S12 - https://amzn.to/3kelPsX
- Instant Read Thermometer - https://amzn.to/3k9VNHf
- Tea Haus - https://teahaus.com/
- Whetstone - https://amzn.to/32nYi2z
- Re-usable Silicone Mats - https://amzn.to/35dtWld
- Air Fryer - https://amzn.to/38uX4X1
13:27 - Games
- Baba Is You
- Untitled Goose Game
- Hades
- Jackbox Party Pack
17:16 - Tech
- Headphones
- Sony WH1000XM4 - https://amzn.to/2Ube8c8
- Bose QC35 - https://amzn.to/3lrKrQp
- Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html
- USB-C Hub - https://amzn.to/3keljem
- Black Camo Wicked Cushions - https://amzn.to/3eGQA8q
- Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3
- Braided USB Cables
- Lightning: https://amzn.to/2IkqLiT
- USB-C: https://amzn.to/3lfrBeX
25:24 - Smart Home
- Wyze Cams - https://amzn.to/2UmPINf
- Light Switches
- Lutron Dimmer - https://amzn.to/2U7OBk2
- Leviton Dimmer: https://amzn.to/3pbzaFZ
- Google Nest Hub
33:22 - Desk Stuff
- Fatigue Mat - https://amzn.to/3eIXXw5
- Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ
- MX3 Mouse - https://amzn.to/3lg8SQn
- Wireless Charger Pad - https://amzn.to/36gIdNj
- Anker USB charging Hub - https://amzn.to/3n7IGYV
36:43 - Live Streaming / Sick WFH Setups
- Elgato Stream Deck - https://amzn.to/35ehXnk
- Elgato Camlink - https://amzn.to/3kih6Gl
- Knockoff Camlink - https://amzn.to/3eIX0Ux
- Husky Adjustable Desk: https://www.homedepot.com/p/Husky-62-in-Adjustable-Height-Work-Bench-Table-HOLT62XDB12/301810799
- Neewer Dimmable Bi-Color LED Studio Key - https://amzn.to/32rYAVX
- RGB LED - https://amzn.to/3kg1LWZ
- Vivo Pneumatic Mic Arm - https://amzn.to/2Ube8c8
49:07 - Fitness
- Concept 2 Rower
- Powerblocks
- Cheap bands - https://amzn.to/35cZ1W4
- Kettle Bells - https://amzn.to/3eFocnc
51:44 - Clothes
- https://www.dvlpr.io/
- Naked and Famous Super Guy Jeans
- https://huckberry.com/
- https://shop.lululemon.com/p/men-joggers/Abc-Jogger/_/prod8530240?color=29283
- Everlane Uniform Crewneck
- Levis Denim Shirts: Barstow Western
- Fjallraven Flannels
Links * https://www.eufylife.com/
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:46 - What are conventional commits?
- https://www.conventionalcommits.org/en/v1.0.0/
04:55 - How do you keep track of all the details?
- https://commitizen-tools.github.io/commitizen/
- https://github.com/commitizen/cz-cli
- https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits
07:42 - How does it relate to SemVer?
Links * https://github.com/conventional-changelog/conventional-changelog * https://github.com/netflix/unleash * Deno
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
It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.
03:20 - Which JS library/framework do you think beginners might find the easiest to understand?
05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?
09:23 - My question is about the difference between a framework and a library. Should we have two separate words?
12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.
17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?
21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?
29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?
35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?
38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website?
40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.
47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.)
48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?
50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?
54:20 - What’s your approach for handling padding + margin with components?
57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do?
59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?
Links * Syntax 002: Webcam and audio access with WebRTC and getUserMedia() * Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy * Daily.co * Twilio * Svelte * https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case * Master Gatsby * Syntax 292: How to Make Freelancing Easier * https://github.com/formium/tsdx * https://nx.dev/react * https://github.com/lerna/lerna * https://www.npmjs.com/package/babel-plugin-module-resolver * Deno * Rust * wasm-pack * https://rocket.rs/ * Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More! * Modern CSS Layouts * Modern CSS Design Systems * Digital Ocean App Platform
××× SIIIIICK ××× PIIIICKS ××× * Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook * Wes: Levi’s Barstow Western Shirt
Shameless Plugs * Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%! * Wes: Master Gatsby - Black Friday Sale: All courses 50% off!
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
In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for!
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 02:49 - Wes’ story
06:28 - What is the role of client-side validation?
- Help the user input the correct data as they type it.
- Show correct data in UI.
- Show correct UI.
- Just about all of these things are for the user’s benefit, and how they feel when using the site.
11:10 - What is the role of server-side validation?
- Validate that all the data is correct before it’s saved to the database
- Security first and foremost
15:03 - What process should a store follow to validate on the server?
- Check that correct types are coming in. Very easy with Graphql.
- Get current stock and price information from unique ids from the database.
- Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user.
17:17 - What do you do if you don’t want people messing with your React state?
@fvilers/disable-react-devtoolsif (process.env.NODE_ENV === 'production') disableReactDevTools()- We do this on LUT. Why? Because it’s a deterrent.
Links * uses.tech * Flipp App * GraphQL
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
In this episode of Syntax, Scott and Wes talk with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Guests * Benjamin Dunphy
Show Notes 03:48 - How do you get started running a conference?
10:05 - Which conferences have you run?
18:05 - How do you get speakers?
23:21 - What about paying speakers?
28:26 - Speaker goody bags?
32:40 - You started your own catering company?
35:32 - How has Coronavirus affected the conference space?
43:06 - Should online conferences try to replicate live conferences?
Links * Reactathon * Jamstackconf * Epicodus * Meetup * Flutter * Lifted Plate * DevRelCon * EventLoop * Modern Web Summit * @Swizec * Sanity Review Changes * @tylermcginnis * Syntax 250: Scott Teaches Wes Svelte and Sapper
××× SIIIIICK ××× PIIIICKS ××× * Ben: Serverless Handbook for Frontend Engineers * Scott: Tineco Pure One S12 * Wes: Chromecast
Shameless Plugs * Ben: + EventLoop + Modern Web Summit * Scott: Animating Svelte - Sign up for the year and save 50%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 04:33 - The spec
- https://drafts.csswg.org/css-grid-3/
- https://twitter.com/wesbos/status/1320735900343668738
06:10 - How it works
masonry-auto-flow: next;- It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.
- Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.
grid-template-columnsandgrid-template-rowscan now be marked as masonry and this specifies which axis will be masonry.
09:06 - The implicit grid
- https://drafts.csswg.org/css-grid-3/#%23implicit-grid
- The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis.
- Interesting in a column situation (see images).
13:25 - Thoughts
- Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.
Links * David DeSandro * https://metafizzy.co/ * Chris Coyier * https://caniuse.com/ * Isotope * Flickity
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
It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 03:30 - How is this going to work?
- Ask a Potluck Question
- Do a Sick Pick
- Take on a Stump’d Question
- Do a Shameless Plug
04:45 - Brad
- https://bradgarropy.com/
- Sick Pick: Rogue Fitness Weighted Vests
- Shameless Plug: Murphy
11:54 - Brittany
- Shameless Plug: ZTM Academy
- Andrei Neagoie
16:43 - Jesse
- Stump’d Question: What are portals in React?
- Shameless Plug: codeSTACKr YouTube Channel
- Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount
23:44 - Henri
- Shameless Plug: https://twitter.com/HenriHelvetica
- Shameless Plug: JamstackTORONTO
31:27 - Jason
- Stump’d Question: What does “use strict” do and what are the benefits?
36:48 - Spence
- mdx-embed
- https://github.com/PaulieScanlon/mdx-embed
41:33 - James
- Potluck Question: How do you keep people engaged in a workshop?
- Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators?
- Shameless Plug: YouTube for Developers
- Shameless Plug: James Q Quick YouTube Channel
54:24 - Austin
- Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together
- Shameless Plug: https://erickka.art/
66:21 - Dave
- Sick Pick: mmhmm
- Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS?
78:56 - Gareth
- Potluck Question: What do you think about the future of mobile development vs traditional mobile app development?
- Sick Pick: https://darkreader.org/
- Shameless Plug: Level Up Tutorials Discord
89:51 - Ackzell and Lewis
- Ackzell:
- Sick Pick: JSConf Mexico
- Shameless Plug: Ackzell YouTube Channel
- Lewis:
- Potluck Question: What is your daily routine like, and you do you decide to prioritize projects?
Links * What Syntax 300 live on Twitch * Discord * Mux * React HLS Player * https://30secondsofinterviews.org/ * https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek * https://madewithsvelte.com/mdsvex * OBS * Streamlabs * ESLint * Prettier * Missive
Shameless Plugs * Scott: Level Up Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:39 - What is a bundler?
- On the one hand, you can write HTML, CSS and JavaScript and open it in the browser
- On the other hand, your build could be super complex
03:24 - What goes into configuring a bundler?
- Templating language you use (Jsx, Pug, Vue, etc.)
- JavaScript you write and compile to:
- ES6/7/8/9
- Typescript
- CoffeeScript
- Polyfills
- Environmental variables
- CSS loading
- Image compression
- Asset Chunking
- Tree shaking
05:12 - Webpack
- Hardest to learn, most used currently
07:38 - Rollup
- Scott’s pick as best option for most features vs ease of use
- Very powerful
- Mmmr, tree shaking, plugins, esm
09:52 - Parcel
- Scott’s simplicity winner pick
- Easiest to get started with
- It’s a bundler, but also a dev tool
- Hot reload
- Local server
- Config is done via your package.json
- Lots of plugins available
12:01 - Npm, Yarn and Yarn 2
- It’s a dependency installer rather than a bundler
13:27 - Snowpack
- Scott’s speed pick of the week
- Uses ESM by default
- Like Sonic after a triple shot of espresso
- HRM
- Perfect for dev builds, as well as production builds
15:51 - Isobuild / Meteor
- Scott’s underdog pick of the litter
16:48 - Rome
- Scott’s mystery pick of the week
- New tool to do it all
- Bundler, but also a linter
17:54 - Deno
- Linter
- Typescript formatter
- Bundler (bundle into a single .js file)
20:44 - Let your tool take care of it
- Gatsby (webpack)
- Next.js (webpack)
- Gridsome
- Create React App
- Vite (Rollup)
- Broccoli.js
Links * Babel * Gulp * Syntax 212: Pika Pkg * Fred Schott * Pika * Rust * Go * Software Engineering Daily: Deno and TypeScript with Elio Rivero
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
In this episode of Syntax, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests * Josh Comeau
Show Notes 01:48 - What is your background?
04:33 - Coding with your voice
08:32 - How do you code for a living if you can only do it for a few minutes a day?
21:56 - How has it impacted your productivity?
22:46 - Is it easier with a typed language like Typescript?
26:05 - What about accessibility?
27:14 - How good is the eye tracker?
29:30 - What got you into animation?
35:29 - Favorite app for animations?
40:12 - Being a teacher
41:44 - Is it worth going to a bootcamp?
44:57 - Interactivity in teaching
Links * joshwcomeau.com * @concordia_btcmp * @gatsbyjs * @khanacademy * @unsplash * Talon * Using Python to Code by Voice * Neuralink * Tobii 5 * Moleskine Apps * VLC * VSCode * freeCodeCamp * Syntax 246: Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne * https://joshwcomeau.com/css/full-bleed/ * Nintendo Switch * Navigator.vibrate * Voice Driven Development
××× SIIIIICK ××× PIIIICKS ××× * Josh: The Utterly Uninteresting and Unadventurous Tales of Fred, the Vampire Accountant * Scott: The Neighborhood Listen * Wes: Every Tool’s a Hammer by Adam Savage
Shameless Plugs * Josh: CSS for Javascript Developers | An online course that teaches the fundamentals of CSS for React/Vue devs * Scott: Animating Svelte - Sign up for the year and save 25%! * Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about web dev certifications — are they worth it, or a waste of time?
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 02:12 - Certifications
05:30 - We have standards, and people move faster than standards.
- jQuery moved faster than vanilla JS
- Typescript is sometimes preferred over regular JS
- We have universities that offer web developer certs and many of them are a joke
- The point is that programming is the wild west — it’s far too broad and moves far too fast for us to try and fit it in a box
10:28 - Do certifications mean anything?
14:30 - How do you know if you have enough skills (when you’re job hunting)?
19:04 - Some jobs do require a certification
- AWS
Links * https://openjsf.org/certification/ * https://www.sentiatechblog.com/imposter-syndrome-how-to-display-front-end * https://twitter.com/wesbos/status/1318192217824124928 * https://twitter.com/photonstorm/status/1318193404312944641 * https://twitter.com/Ky1e_S/status/1318193954085634048 * https://twitter.com/ArleyM/status/1318194323821912067 * https://twitter.com/ajitbohra/status/1318194600335470592
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
In this episode of Syntax, Scott and Wes are back for another episode of spooky web dev stories — listener-submitted stories about web dev gone wrong.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 03:28 - Jack Rhysider Story
06:28 - Dirty Dicks JSON
08:23 - CMS Disaster
10:58 - Oh No Hotel
11:19 - FTP
12:19 - Push Notification Hell
13:16 - DVD Nightmare
15:15 - Bad Words Again
16:23 - Mo Money
17:01 - Bass Ackwards
18:17 - Taxi Coding
19:36 - Bad Env
21:30 - Login As
21:50 - Email Subscribers Plugin
22:33 - 1 in 300 Chance of the C-Word
24:24 - Production Target
26:12 - A Happy SEO Ending
28:26 - Just Oof
29:48 - I’ve Fallen and I Can’t Get Up
30:54 - Crypto
32:34 - rm -rf
33:42 - Never Deploy on Fridays
35:31 - Million Dollar Scramble
36:22 - Deleting Production
37:11 - 500,000 Concurrent Problems
39:14 - Deleting a Government Website
40:36 - You Ruined the Surprise!
45:23 - Mr. D Hole
46:48 - One Expensive Race Condition
48:43 - Yikes
51:11 - Always Be Closing
51:44 - Adidas - All Day I Delete A Site
Links * @JackRhysider * Darknet Diaries Podcast * ExpressionEngine * #ghosts * chefkoch.de * Sendgrid * Magento * Evite
××× SIIIIICK ××× PIIIICKS ××× * Scott: Fastify * Wes: + 🇨🇦 Mr Chefer Meat Thermometer + 🇺🇸 Mr Chefer Meat Thermometer
Shameless Plugs * Scott: Level Up Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Temporal Date Objects in JavaScript — a WICKED AWESOME API for working with times and dates.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 05:11 - Temporal Now
- You can get now
Temporal.now.___
07:58 - Temporal Instants
- A
Temporal.Instantrepresents a fixed point in time, without regard to calendar or location.- Most common way to show it is nanoseconds since unix epoch.
- Can be formatted a few different ways.
09:59 - Calendar
- Support for different types of calendars
11:43 - Durations
- Temporal.Duration
- There are .from and .add and subtract() methods
12:47 - Other interesting parts
- Timezones
- Temporal.ZonedDateTime
- Temporal.YearMonth - represents a ym = new Temporal.YearMonth(2019, 6) // => 2019-06
14:51 - Polyfill (unstable)
Links * Fixing JavaScrip Date - Maggie Pint * https://github.com/tc39/proposal-temporal * https://github.com/tc39/proposal-temporal/blob/main/docs/calendar.md#methods * https://github.com/tc39/proposal-temporal/blob/main/docs/duration.md
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
In this episode of Syntax, Scott and Wes talk about spooky web dev stories — listener-submitted stories about web dev gone wrong.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:12 - The Most Expensive Boolean Ever
06:19 - An Actual Logging Issue
09:37 - Snitches Get Stitches
10:41 - The Spooky Office Skeleton
12:04 - Prevent the Default of Making Money
13:52 - Computer Magic Trick
14:42 - Update Score
15:59 - Change Reaction
19:30 - Personal Mongodb
20:26 - Hello Rob!
22:08 - SSN Regex
23:06 - WordPress Plugins
23:52 - Loggin Ya In, Ya F’in Dummy
24:58 - A Hostel Coding Environment
25:59 - A Graceful Exit
27:27 - Favicon DDOS
28:07 - Common Cents
29:03 - Open Source Vendors
33:04 - Don’t Leave the Country
35:09 - Apostrophe Catastrophe
35:43 - Env
36:05 - A Christmas Miracle
36:43 - The One Million Dollar Bill
39:00 - The Hacker Who Dropped the DB
40:19 - The Tech Lead Who Uses Alert Statements
46:14 - Lorem Ipsum
46:58 - Malicious Compliance
Links * Indigo.ca * r/MaliciousCompliance
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hades Game * Wes: + LED Flame Bulb + Smaller LED Flame Bulbs
Shameless Plugs * Scott: Animating Svelte - Sign up for the year and save 25%! * Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about stretching for developers — techniques, misconceptions, and how to feel better.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:21 - Devs do the following
- Head forward looking at screen
- Shoulders forward
- Sitting a lot
- Weak core
- Carpel tunnel from typing
06:02 - Stretching misconceptions
- Static holds
- Dynamic controlled movements first and foremost
07:52 - Stretches to help
- Dynamic twists
- Cat / Cow
- Flat down / Curl up spine
- Arm hang to decompress spine
- Wrist stretches and strengthening for carpel tunnel
- Horse stance at standing desk to be office weird person
- Shoulder circles
- Doorway stretches
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
In this episode of Syntax, Scott and Wes talk about how to make freelancing easier — how to avoid burnout, and tips and tricks to make it successful.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 02:15 - Code
- Use starters and resets and component libraries
- Don’t build in something you don’t know, unless you have time and budget to do so — WP is good enough for most projects
- Feel free to go over time on projects if you are learning something new
- Re-use code from project to project
- Target similar types of clients
13:09 - Communication
- Often, clear and frequent
- People won’t be mad for being too informed — just know when to leave out the technical jargon
- Clients typically don’t care about Git, React, etc. — they care about results
- Don’t overwhelm them
- Train your clients that you aren’t available 24/7
22:19 - Time management
- Set calendar alerts early and often to not miss communications
- Set meetings at 9am, don’t wait around all day for meetings
- Block off large amounts of time for dev — you won’t be able to get meaningful work done in one-hour slots
27:54 - Contracts + quoting
- Have a boilerplate contract that you can just fill in
- Same for a quote
- Value-based billing
33:47 - Billing + taxes
- Don’t be shy when talking about money. Be clear on what you need, when you need it, and on what terms. This is business.
- This is your art, but it’s also your business
- Pay quarterly taxes - most likely
- Or don’t and take the small hit — then you can pay once a year
- Put taxes into another account if you aren’t good with money
- Get a billing management system or get an accountant — you need to focus on working on code
- Wave Apps, Xero, Freshbooks
42:03 - Marketing
- Be loud — people need to know what you offer
- The best marketing is a referral from a previous client
- If you show up, return emails and do a good job, you’ll kill it
- Show people what you are excited about: blog posts, videos, tweets, etc.
- Go where your clients are:
- Do you want to be serving small businesses? Family and friends
- Do you want to be a hired gun for a technical team? Conferences/Twitter, blog posts
48:25 - Final thoughts
- Scott — It’s ok if freelancing isn’t for you. Not everyone is great at all of these factors, myself included. However, with practice, you can be your own boss, work on your own terms, and make money. Also, don’t be afraid to take on longer contracts with established teams and companies.
- Wes — Freelancing can be a great filler between jobs or career transitions.
Links * Syntax 117: Hasty Treat - How To Email Busy People * Freshbooks - Breaking the Time Barrier * Design Is a Job - Mike Monteiro * Wave * Xero * Freshbooks
××× SIIIIICK ××× PIIIICKS ××× * Scott: Displaced Gamers YouTube Channel * Wes: Battery Adapter for DeWALT 20V Max 18v Dock Power Connector
Shameless Plugs * Scott: React For Everyone - Sign up for the year and save 25%! * Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:54 - The problem
- This only affects the client-side
05:28 - What are some solutions:
- Do nothing and hope the user refreshes.
- Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available:
- Prompt the user to refresh
- Just refresh the user (store current state in localstorage and restore)
- Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link.
- Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user.
- Hot code push.
- Vuepress has “hot reloading” baked in.
Links * https://twitter.com/wesbos/status/1306969658751361024 * Notion * Vuepress * Meteor
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
It’s another potluck! In this episode, Scott and Wes answer your questions about getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 01:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack?
03:48 - Why did you not mention Stencil when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it?
- Example of a stencil component:
``` import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-first-component', }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() { return ( My name is {this.name}
); } }
``` 06:12 - Is https://www.syntax.fm supposed to not work? I get a 404.
07:34 - I’m wondering what advice you’d have for someone self-taught switching from a totally non-tech industry (non profit arts, in my case) where I work in a tech role. I’ve hustled and built a portfolio of projects and learned a ton from both of your courses, but I feel that my experience is seen as less valuable because I don’t work in a traditional software/web development environment. Any tips for getting over the final hurdle of getting a dev job?
11:11 - What makes a software engineer senior?
13:08 - I have a Gatsby / Netlify client project about to launch. What’s the best approach in handing over to the (non technical) client? Do I keep in my Github account and just give the client the Netlify CMS login, or create the a Github account for the client that I can access for any maintenance? What do other devs do?
17:55 - I recently blocked all cookies on my mobile browser (Google Chrome), and I noticed something weird. A couple of sites that I know for a fact to have been built using NextJS weren’t working as expected (surprise surprise). They would load as usual, and after a second or so, all the content on the page disappeared, with the error message “sorry: an unexpected error has occurred”. In some cases, the error was printed in the site’s font, and with the same background color on the body. Why does blocking cookies do this to NextJS sites?
21:21 - How often do you make commits? I always hear, “commit often”, but I am hesitant because I feel like I may change my code later on before I make a pull request? I really liked your episode on Git Fundamentals, I would love to see a tutorial/deep dive into Git workflows and practices (when to commit / how often) Should I commit even though I know what I’m working on isn’t complete or I need to refactor it?? What is code review etiquette?
26:59 - Wes, how do you handle captioning and transcripts on your courses? Do you use some tool or service for that or do you do it by hand?
31:11 - I am a recent graduate of a code school that focused on React and Rails. The company that I currently work for uses Angular for part of their stack. I eventually would like to move into a dev spot, but I am finding that Angular feels a bit stuffy and I am not as excited about it as React, Svelte, Vue, etc. I am afraid that if I dive into Angular, I will become less relevant down the road. I want to learn everything, but I only have so much time and don’t want to stunt my growth as a developer. Any thoughts or advice on this would be sick!
36:38 - How do you handle SVGs in React? I know that SVGR exists, but I’d like to avoid adding another dependency if it’s something I can roll on my own. In the past, I’ve created functions that take parameters like fill or stroke to control color, and return a string of SVG code with the arguments interpolated in. Then I place that string into a component using dangerouslySetInnerHTML. I haven’t seen this method used anywhere else, and is probably not best practice. But also, it works, so maybe it’s fine?
39:52 - What social media platforms should you use as a Dev? What is cool to have? What are their benefits?
48:14 - Have you tried an ultrawide monitor for coding, such as 34" or 38"? I feel the extra width would be great for a single monitor setup, but haven’t been able to see one live where I live.
Links * Syntax 269: Hasty Treat - Target=_blank security issue? What’s the deal with noopener and noreferrer? * Syntax 280: Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More! * 8 Mile * Syntax 286: Git Fundamentals * Rev * Angular * React * Svelte * SVGR * LevelUp Tuts Discord * Dev.to * freeCodeCamp
××× SIIIIICK ××× PIIIICKS ××× * Scott: + 1: Knife Cleaner + 2: Scraper + 3: Chainmail Scrubber * Wes: Scriptable App
Shameless Plugs * Scott: ReactJS For Everyone - Sign up for the year and save 25%! * Wes: Master Gatsby Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in JavaScript.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:11 - What are enums?
- A type restricting variables to one value from a predefined set of constants
- Direction = UP / DOWN / LEFT / RIGHT
- Role = ADMIN EDITOR AUTHOR VIEWER
- Day of the Week
05:12 - In GraphQL
- enum Role { ADMIN EDITOR AUTHOR VIEWER}
- Then
07:05 - In TypeScript
- First, declare the type:
- enum direction = { UP, DOWN, LEFT, RIGHT }
- Then when you defined your function, use that type
- type User { role: Role } or type User { role: [Role] }
08:49 - In JavaScript
- Not in JS yet
- There is a proposal in stage 1
- https://github.com/rbuckton/proposal-enum
- And a babel plugin:
- https://www.npmjs.com/package/babel-plugin-const-enum
- Can use case/switch
- Can use Object or Map keys
Links * Syntax 287: Hasty Treat - Records and Tuples in JavaScript
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
In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 03:00 - iFrames
- Sidebar menu
- target
05:42 - JavaScript image hovers
- Dreamweaver
- Photoshop Slice and Select Tool
08:24 - CSS Pie
09:42 - Animated gifs of people and construction
- http://textfiles.com/underconstruction/
11:20 - CSS Zoom 1 / IE CSS Hacks
- Forced IE 7 to redraw floats
13:42 - Layout trends
- 800x600 fixed websites
- 960gs
- Golden Grid
- 12-col grid creators
16:26 - Sprite maps
- Spritecow
- ☠️ Killed icon fonts
- ☠️ Killed by SVG icons
18:40 - Firebug and Firebug Lite
- Lite was a bookmarklet
20:14 - Image maps / Background gradients
- 1px wide and 2000px tall image to make repeating gradients
- Squidfingers
- Subtle Patterns
- Hero Patterns
- CSS3 Patterns
25:53 - Web rings
27:41 - Glossy buttons
28:09 - Flaming text
- FlamingText.com
30:01 - Marquee tags
- Staggered
- Speed attribute
31:26 - Spacer gifs
34:30 - AngelFire / GeoCities
36:11 - Xanga / LiveJournal
37:29 - Above the fold content
- Abovethefold.fyi
39:36 - Homestar Runner
Links * Drupal Omega theme * Syntax 032: Designing, Templating, Inlining and Sending Email * Mailchimp * Litmus * Email on Acid * Herman Miller Aeron
××× SIIIIICK ××× PIIIICKS ××× * Scott: New Rustacean Podcast * Wes: Autonomous Ergo Chair
Shameless Plugs * Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%! * Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes ??? -
02:42 - Immutability
05:08 - Records
- Immutable object
- Syntax
#{x: 1, y: 2}
05:56 - Tuples
- Immutable array
- Syntax
#[1,2,3,4]
07:18 - For both
- Referred to as a compound primitive
- Can contain only primitives, not objects
- They are compared deeply by their contents rather than their identity
assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 });
* Potential for optimizations
+ Optimizations for making deep equality checks fast
+ Optimizations for manipulating data structures
- Works well with type systems
- Better integration with the debugger
- Accessed through normal record.scott object like syntax
13:39 - Stage 2
Links * https://github.com/tc39/proposal-record-tuple
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
In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, best practices, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 03:12 - What is Git?
04:16 - Why do you need it?
06:31 - UI vs command line
09:03 - Commands 101
- https://git-scm.com/
init.gitignorefile is key right off the bat
addadd -p- quick review of all the changes you’ve made
commit- Multiple adds and commits
- Commit messages should be descriptive
push- What are origins?
pullclonecheckoutmergefetchstashfork- Merge vs pull request
- Git vs GitHub / Alternatives
- Bitbucket
- GitLab
44:25 - Common issues
- Merge conflicts
- Files being tracked unintentionally
- “How do I delete file from GitHub?”
git rm -ralias gri="git ls-files --ignored --exclude-standard | xargs -0 git rm -r"
- Databases in Git?
49:10 - Git clients
- https://git-scm.com/downloads/guis
- CLI
- “Hub”
- Github CLI
- GitHub desktop app
- VS Code integration
- Source tree
- Kraken
- Tower
Links * VS Code * GitLens * GitHub * Bitbucket * GitLab * Drupal * GitKraken * Tower
××× SIIIIICK ××× PIIIICKS ××× * Scott: What Had Happened Was Podcast * Wes: Yeti Products
Shameless Plugs * Scott: React For Everybody - Sign up for the year and save 25%! * Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes Wes:
- First money: check for $300
- First website: Pool company
- First ad sense income: Craigonomics
- First YouTube: import large SQL database with bigdump
- First online Product: Sublime Text - Ryan Christiani
- First in-person teaching: HackerYou
- First project at agency: Jet Cooper
Scott:
- First dev gig: parents tea store
- First design gig: Perpetual
- First YouTube video: Adobe Premier 101
- First BIG YouTube video: Sass Tutorials
- First ad sense income: scotttolinski.com blog post about music promotion sites
- First online product: Sass Mastery
- First project at agency: Nu Step
Links * https://twitter.com/wesbos/status/1276500155789910016 * Audiojungle * Themeforest * Juno College * @steveschoger * Smashing Mag * Css Tricks * Packt Publishing
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
In this episode of Syntax, Scott and Wes talk about writing good CSS.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 02:11 - Frameworks
- Utility: Tailwind, Taycons, Bulma
- Frameworks: Foundation, Bootstrap
- Classless base starters: https://github.com/dbohdan/classless-css
- HTML5 UP / A template
13:37 - Preprocessors
- Sass
- Stylus
- Less
- Regular CSS
- Variables
- Color functions - not yet
19:42 - Tools
- PostCSS is like Babel for CSS. Some good plugins:
- https://github.com/postcss/postcss#plugins
- CSS min/max for clamp
- Autoprefixer
- Autoreset - reset a component
- Gap instead of grid-gap
- Simple-vars
- Postcss-modules
- SugarSS
- Preset env
34:19 - Stylint
- Stylint
- More than just a basic linter
- Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable
36:37 - Removing unwanted CSS
- PurgeCSS - Tailwind uses this
- PurifyCSS
41:17 - Writing maintainable CSS / scoping solutions
- Component-based
- CSS Modules
- Naming Convention Based
- BEM
- SMACSS
- CSS Variables
- Powerful when utilized with things like calc() to avoid out of sync values
- Know which browsers you need to support
Links * Syntax 197: Hasty Treat - Tips For Writing Good CSS * Compass * Susy * Grunt * Gulp * Linaria * Astroturf * Houdini * Svelte
Syntax Highlight * Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/
××× SIIIIICK ××× PIIIICKS ××× * Scott: Rustlings * Wes: Class Action Park Documentary
Shameless Plugs * Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%! * Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about time block planning — what it is and how it can help you increase your productivity!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 01:50 - What is time block planning
03:12 - How TBP has helped Scott stay focused
04:46 - How it helps family life
05:57 - How to plan your week
11:00 - How to deal with setbacks
Links * Cal Newport * Todoist * Deep Work * Deep Questions
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
In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 04:28 - Float-based layouts
- Clearfix
- ☠️ Killed by Flexbox, and then Grid
09:29 - Loading Screens:
- Two websites - one flash and one HTML
- Splash screen
11:22 - Hit counters
12:28 - Guestbooks
13:28 - Flash
- 3rd party player
- Media dragged its feet FOREVER
- ☠️ Killed by Steve Jobs
18:46 - Fonts
- The Golden Layout
- Cufon / sIFR / Images of text
- Typekit
- ☠️ Killed by font-face
24:15 - Folder-based version control
- ☠️ Killed by Git
26:22 - FTP
- ☠️ Killed by Git, then many other things
28:40 - CSS Zen Garden
- CSS Zen Garden
- ☠️ Killed by CSS being better
32:02 - TextMate
- Coda
- Notepad++
- Adobe GoLive
- FrontPage
- Macromedia / Dreamweaver
- ☠️ Killed by Sublime Text, then VSCode
33:58 - Sliding doors
- A technique for rounded corners on buttons
☠️ Killed by CSS
35:29 - PNG Fix
- ☠️ Killed by the death of IE6
37:53 - 9-Panel layouts
- ☠️ Killed by CSS
39:20 - CSS 3 Please
- CSS 3 Please
- Paul Irish
- ☠️ Killed by modern CSS
Links * Silverlight * Chris Coyier
××× SIIIIICK ××× PIIIICKS ××× * Scott: Fancierstudio 600 LED Light Panel Kit * Wes: Allen Key Drill Bit Set
Shameless Plugs * Scott: React 3D and Advanced Animating React with Framer Motion - Sign up for the year and save 25%! * Wes: Master Gatsby Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about home offices, backyard offices, costs, and pros and cons!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:40 - Structure options:
- Existing sheds
- Build your own
- likely not allowed
- Drop-in offices
- Rubbermaid shed
07:18 - Electrical
07:58 - Insulation
09:01 - Heating
11:30 - Cooling
16:01 - Interior
16:42 - WiFi
17:12 - Costs ~ $4k
- Electrical - $2k
- Flooring - $600
- Paneling- $900
- AC - $1000
- Fan - $100
Links * https://twitter.com/bradwestfall/status/1284299864210210817 * https://bradfrost.com/blog/post/brad-frost-web-headquarters/ * Technology Connections - Space Heater Nonsense * Technology Connections - Personal “air conditioners” aren’t what they seem * Technology Connections - Cassette adapters are remarkably simple * Caldigit * Ubiquity Outdoor Access Point
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
It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 01:15 - What are your guy’s thoughts on Mozzila’s layoffs and how it will affect developers?
08:42 - Right now I am a math teacher. I am married with 2 kids (3 and 1) so finding time to code is difficult. My current situation includes waking up at 4:30 am everyday just to get in some time before the kids wake up. Do either of you have any tips about finding a balance between raising kids, getting stuff done around the house, having a full time job and trying to teach yourself web development to transition into a different career?
13:23 - If you had to use a drag-n-drop framework using React, which one would you choose?
15:49 - E2E vs Visual Regression Testing? At which web-app development cycle to implement each? Best tools open source vs purchase?
20:36 - I teach a Highschool course in web development. For a group of students who have a solid knowledge of HTML/CSS and a decent understanding of JavaScript, would Svelte be a good framework for entering into component-based development for the first time?
22:33 - What’s a good Google Analytics alternative in 2020? I have a site on Netlify that the $9/mo seems a bit steep for, for what the site is, and flipping the domain through Cloudflare just for the analytics seems crazy; but is it worth it? Alternatives would be awesome, as I’d love to get off the Google overlords.
29:22 - I have noticed about a dozen to 100 unique clones of my git repos after each push. It doesn’t matter if the repo is initialized, picture added or the readme updated. The repos are still cloned. The traffic section shows the views to my repo at 1 sometimes 2. Is this normal? Is this how interested employers keep tabs on you? Are there a lot of malicious git users? What is happening?
32:30 - With Apple switching to their own processors is it silly for anyone to buy a Mac for development before that releases? Do you guys have experience with Windows, and which would you still prefer today if you needed to buy?
40:28 - Have you ever been approached by or heard of GitAds.io? They’re trying to pay developers to put ads onto popular open source libraries on Github, and they approached me recently, and I wasn’t sure what to think about them. What do you think?
45:16 - I just listened to your TLD game. It made me wonder your opinions on personal site domain names? Should it always try to be yourname.dev? What about .me or other domains?
47:53 - What’s the best way to introduce new technology or processes to a team?
Links * Rust * Firefox * MDN * Jen Simmons * Safari * React DnD * React Beautiful DnD * React Spring * Framer Motion * Cypress * Percy.io * Svelte * Heap * Fathom * GitAds.io * .TECH * Syntax 179: Hasty Treat - The TLD Game * Javascript30 * Syntax 206: Hasty Treat - The New MacBook Pro for Web Development
××× SIIIIICK ××× PIIIICKS ××× * Scott: Turbo Boost Switcher for Mac OS X * Wes: Roller Blade Wheels for your chair
Shameless Plugs * Scott: React 3D - Sign up for the year and save 25%! * Wes: Master Gatsby
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
In this Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:32 - Plans for the Fall
06:59 - Fav Hasty
- Scott
- Ep 161: Hasty Treat - VSCode Extensions & Themes
- Ep 165: Hasty Treat - VSCode Treats Part 2
- Ep 167: Hasty Treat - VSCode Love Part 3
- Ep 277: Hasty Treat - 5 Things That Make Your Site Slow
- Wes
- Ep 211: Hasty Treat - Modules in Node
08:55 - Fav Tasty
- Scott
- Ep 236: Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout
- Ep 250: Scott Teaches Wes Svelte and Sapper
- Wes
- Ep 224: Serverless / Cloud Functions - Part 1
- Ep 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy
10:22 - Top Episodes of 2020
- 10: Ep 214: 2020 Fitness
- 09: Ep 228: More on Severless - Databases × Files × Secrets × Auth × More!
- 08: Ep 220: The Synology Show - Backups and Home Server
- 07: Ep 222: Are Web Dev GUIs Going to Replace Us?
- 06: Ep 210: Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!
- 05: Ep 212: Pika Pkg
- 04: Ep 224: Serverless / Cloud Functions Part 1
- 03: Ep 218: Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!
- 02: Ep 226: Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More!
- 01: Ep 216: Tech to Watch in 2020
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
It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 02:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it.
08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind?
12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions?
18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why?
21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :)
30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out.
34:35 - How do you go about creating reusable React components (reusable from project to project)? Do you create packages and publish them to NPM? Or do you have another method for storing code for components that you will likely need to use again?
38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects?
40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc.
46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful?
48:00 - Getting my first dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle that can be enterprise code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness?
Links * https://github.com/jxnblk/mdx-deck * https://mdsvex.com/ * Spectacle * MDsveX * Vue.js * Redux * VueX * Better Comments * Kap * Redwood.js * Blitz.js * GraphQL * https://github.com/ryanmcdermott/clean-code-javascript
××× SIIIIICK ××× PIIIICKS ××× * Scott: Easy Snippet * Wes: WOW Pool Noodles
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 03:28 - What is the difference between HTML and React event handling?
05:55 - What are JavaScript data types?
07:00 - In which states can a Promise be?
07:48 - Discuss the differences between an HTML specification and a browser’s implementation thereof.
09:14 - What is a stateless component?
10:10 - What is a pure function?
10:51 - What is the output of the following code?
const a = [1, 2, 3] const b = [1, 2, 3] const c = "1,2,3" console.log(a == c) console.log(a == b)
13:35 - What is memoization?
15:15 - How do you pass an argument to an event handler in React?
15:59 - What is HTML5 Web Storage? Explain localStorage and sessionStorage.
Links * 30 Seconds of Interviews
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
It’s another potluck! In this episode, Scott and Wes answer your questions about React subscriptions, ES Modules in Node, how to cook a chicken thigh, being a good dad and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That’s why
Stackbit is the best way to Jamstack. stackbit.com.
Show Notes 02:11 - What are “subscriptions” in React, or in programming in general? The React docs mention that setting up a subscription is an example of a side effect, but what exactly is a subscription, and how do you set one up?
05:43 - Using the latest node esm imports, is it possible to use aliases? Using the old require() syntax I used the npm package module-alias (https://www.npmjs.com/package/module-alias), but I cannot seem to find a solution for node v14 imports. In a deeply nested file, I find the import ‘…/…/…/some/folder’ syntax to be awful compared to require(’@/some/folder’).
09:20 - I’ve been a full-time developer for over 10 years and my company has a fairly flat hierarchy. I want to take on more responsibility (and salary) but my company doesn’t have anything like a “lead developer” position. Any ideas for how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I’m already doing it all.
12:59 - In Wes’ website episode, he mentioned using Gatsby Parallels for images. Why not git LFS?
17:25 - For Wes: Any Big Green Egg tips for beginners? I just ordered a kamado style grill and I’d appreciate any tasty tips you’ve got.
22:45 - Inline code is considered harmful because of potential XSS attacks. Lighthouse recommends inlining critical CSS to improve page speed. What do you think about this tradeoff?
26:30 - What advice would both of you have for being a first-time father, and how can I best prepare? My wife is pregnant, and we are both very excited! I want to do the best I can at being a good father. Our baby is due in January. As both of you are fathers (multiple times), I would love to hear your thoughts.
32:58 - Are present web developers merely crud bastards for corporate culture? If not, What entrepreneurial opportunities are open with Javascript and hooking up React with backend Node/Laravel and reading the Google Map docs? Of course the list isn’t exhaustive but you get my point right? Note: I’m not interested in selling courses and creating frameworks.
37:08 - Do you have any use for ES6 Generators and yield? It seems that they are a mechanism for async-await “under the hood,” so using ‘async-await’ is probably sufficient.
39:10 - With a legacy project that has old build dependencies how do you decide when to retool and fix all the npm audit issues?
46:10 - In what instances do you prefer to use rem vs em vs pixels for font size? I usually think about it like so: if I’m okay with an element’s font size being sized based on the parent, then I’ll use em. If not, then I’ll use rem. I almost never use pixels anymore except sometimes on the html element. But even then, I usually use a percentage. In practice, I’ve found it a bit hard to gauge what to expect with ems because of nesting issues. So, I’ve mostly been leaning towards rem. Though I also understand that using rems can be less modular. How do you guys make the decision?
52:49 - Hello chaps. Thank you so much for the show, I’ve learned an awful lot through listening. I’ve been dabbling in development for some time now and have taken on a project for an Express site which aside from a few static pages will include a shop with a small number of items (<5), customer dashboard (order tracking and submitting supplementary order info), and an image centric journal/blog section. I’ve listened and re-listened to your CMS roundup which is great, but having worked through Wes’ Node course I’m kinda thinking why would I spend the time integrating a CMS when I can just build an ‘Add Post’ page for admin users, save the posts in Mongo, upload images to my server, and use Cloudflare’s free tier CDN. Please explain why this is (or isn’t🤷♂️) a bad idea, and more generally share your wisdom on when a CMS is or isn’t actually necessary. PEAACE!
Links * Meteor * Babel * https://nodejs.org/api/esm.html#esm_transpiler_loader * Gatsby Parallel Runner * Git LFS * Syntax 247: Hasty Treat - Wes’ New Personal Website * Big Green Egg * Mongoose * Obsidian * Notion
××× SIIIIICK ××× PIIIICKS ××× * Scott: Foam * Wes: How to use a multimeter
Shameless Plugs * Scott: Modern Design Systems - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about tips and tricks for using Gatsby in your projects
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:02 - React Helmet
- Make a re-usable SEO component that sets defaults. Spread children to override.
04:27 - When in doubt, stop the build and restart
- Gatsby clean
- Nuke node_modules + package-lock
05:34 - Use ESM to use ES Modules everywhere - share functions between gatsby-node and gatsby-browser
06:44 - Run the build command locally to troubleshoot prod
- Dev mode isn’t SSG’d - people overlook this
08:06 - Wrap your layout automatically in gatsby-ssr and gatbsy-browser
- wrapPageElement and wrapRootElement
09:50 - Consider just adding the layout component manually to each page
- This will allow you to skip the layout if you need to have a page that isn’t typical
11:21 - Layout is not suitable for unmount animations
- Orchestrating individual component animations in Gatsby isn’t easy, use wrapPageElement to write your animations or delays for internally unmounted components.
12:59 - use onCreatePage to pass context to the layout
exports.onCreatePage = ({ page, actions }) => { const { createPage } = actions; if (page.path.match(/thumbnail/)) { page.context.layout = 'thumbnail'; createPage(page); } };
14:03 - You don’t have to query for everything
- Hard-coding data in html/jsx is super valid
15:32 - Gatsby Parallel Runner
- For lots of images
Links * Gridsom * Google Cloud * Cloudinary * Sanity Image
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
In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Guests * Adam Argyle
Show Notes 01:48 - Who are you and what do you do?
04:13 - How does stuff get added to CSS?
06:44 - Github issue proposal or public document
- Shares use case
- Problem made succinct
- StrawMan solution
- JS demo
10:12 - Time
- Multiple proposals
- Comments
- Back and forth
- Bikeshedding
20:00 - Editor’s draft spec (Stage 1)
- CSS typed
- Examples
- Provided code logic
- Implementor interest
- Can go stale
- Explainer
- Implementor
- Prototype behind flags in browser
- Intent to Prototype (I2P)
24:42 - Working Draft (Stage 2)
- WPTs
- Prototype behind flags in browser
- Needs two or more to graduate
- Intent to Ship (I2S)
24:54 - Conference Calls
- Around 10 items to discuss
- Issues or proposals
- Flexible list
- Things can be injected as emergency
- Things can get punted to the next call
25:26 - Face 2 Face (F2F)
- Four times a year
- Presentations
- Breakout sessions
- Houdini focus groups, etc
- Try to resolve as many Github issues as possible
27:34 - Candidate Recommendation (Stage 3)
- Could still be behind a flag
- Edge cases are being worked through
- WPTs and standards are being nudged into a final state
44:20 - Roles
- Spec author
- Community Member
- Color
- Internationalization
- Box Model
- AOM
- JS APIs
- Renderers
- etc
- Implementor
- It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real
46:32 - Questions
- What language is CSS written in?
- What's the deal with Houdini?
Links * https://github.com/w3c/csswg-drafts * @rachelandrew * @hj_chen * Incomplete List of Mistakes in the Design of CSS * 10 Things I Regret About Node * https://ishoudinireadyyet.com/
××× SIIIIICK ××× PIIIICKS ××× * Adam Wok * Scott: Balance Pad * Wes: Security Bit Set
Shameless Plugs * Adam: The CSS Podcast * Scott: CSS Design Systems - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 04:18 - Find slow process
- Getting through email
- Cleaning my desk
06:29 - Set clear goals (smart goals)
- Is my inbox less crazy?
- Don’t spend too much time
- Do a 30-day challenge
09:46 - Ask around
- What are people you know using and why
- Time-blocking
- Batching
- Eat that frog
Links * Streaks * Matt Cutts — Try something new for 30 days * 1Writer * Notable * Dropbox * Notion * Obsidian * Todoist
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
In this episode of Syntax, Scott and Wes talk about React State libraries, should you use them, pros, cons, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 01:24 - Context
- Have we used?
- Scott: Yes
- Wes: Yes
- Pros
- Built into React
- As simple or complex as you want
- Cons
- Takes effort to optimize
- Takes effort to plan and organize aka can get out of hand quickly
08:49 - Redux
- Have we used?
- Scott: Yes
- Wes: Yes
- Pros
- Huge user base
- Legacy of growth and improvements
- Modern API
- Even though it’s hard to learn, it has a clear “how to build with it” path
- Dev tools
- Cons
- Complex
- Thing that calls a thing that calls a thing that calls a thing
- Confusion around what additional packages are needed, e.g. ducks, saga, whatever
17:08 - XState
- Have we used?
- Scott: Yes
- Wes: No
- Pros
- Enforces solid design patterns
- Very safe
- Awesome tooling like UI to see state machines
- https://xstate.js.org/viz/
- Cons
- Knowledge overhead - having to understand state machines
- Complex syntax
23:26 - Zustand
- Have we used?
- Scott: Yes
- Wes: No
- Pros
- Fast, scalable, easy to use
- Simpler
- No context providers
- Cons
- Smaller community 2.6k stars on Github
- Can inform components transiently (without causing render)
27:04 - Apollo Client
- Have we used?
- Scott: Yes
- Wes: Yes
- Pros
- Fits in well with your GraphQL API
- Dev tools
- Cons
- Complex, large syntax for simple operations
- Dev tools
- SSR story is really complex. It’s hard because they aren’t also the framework.
31:35 - RXJS
- Have we used?
- Scott: No
- Wes: No
- Observable based
33:02 - React Query
- Have we used?
- Scott: No
- Wes:
- Pros
- Fast growing community
- Awesome dev tools
- Cons
- Not sure if this can be used for application state or just data
35:37 - Recoil
- Have we used?
- Scott: Yes
- Wes: No
- Pros
- Very good for complex, splintered state needs
- Cons
- Overly complex for most use cases
38:34 - MobX
- Have we used?
- Scott: No
- Wes: No
- Pros
- Big community
- Not just React
- Powerful
- Observable capabilities
- Cons
- Uses decorators, but doesn’t have to?
43:15 - Easy Peasy
- Have we used?
- Scott: No
- Wes: No
- Pros
- Simple API (easy peasy)
- Redux dev tools supported
45:06 - Meteor ReactiveDict / ReactiveVar
- Have we used?
- Scott: Yes
- Wes: No
- Pros
- Very simple
- Get, set
- Is Reactive
- Cons
- Lock-in to Meteor
46:19 - Final Thoughts On State
- Wes: Go for simpler solutions
- Scott: I think application state should be separate from application data, but maybe that’s because there isn’t a solution that does both how I want
Links * Svelte * Meteor * Syntax 206: State Machines, CSS and Animations with David K Piano * Syntax 268: Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More! * Zustand CodeSandbox * swr
××× SIIIIICK ××× PIIIICKS ××× * Scott: Becoming Bond * Wes: IRWIN VISE-GRIP GrooveLock Pliers Set
Shameless Plugs * Scott: Modern CSS Design Systems - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:26 - The old Syntax site
- Next.js
- Custom server for
- API - shows, Latest shows, sick picks
- On-demand page builds
- Custom routing
06:41 - The new Syntax site
- Next.js has solved those things now, no need for a custom server.
- API Routes
- On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose
- Custom routing is now done with [pages]
- Very fast to load
- Very fast to build
- Very fast to deploy
- It’s now a “dynamic static site”
- Zeit Now 1 to “Vercel”
- Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen.
13:23 - Why not:
- Gatsby
- Entire site would need to be regenerated exactly at 9am eastern
- API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes
- Sapper
Links * Next.js * Gatsby * Sapper * Vercel
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
In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests * Filipe Névola * @filipenevola
Show Notes 01:20 - What is your background?
03:41 - What exactly is Meteor?
12:00 - What are the biggest misconceptions of modern meteor?
18:20 - What do you say to people who think Meteor is dead?
21:33 - How does data get from your Meteor into your React app?
- Example of getting data on client side
``` import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => { const { user, isLoggedIn, page } = useTracker(() => { // The publication must also be secure const subscription = Meteor.subscribe('page', pageId) const page = Pages.findOne({ _id: pageId }) const user = Meteor.user() const userId = Meteor.userId() const isLoggingIn = Meteor.loggingIn() return { page, isLoading: !subscription.ready(), user, userId, isLoggingIn, isLoggedIn: !!userId } }, [pageId]) if (!isLoggedIn) { return Create an Account Log in } return {page.title} {page.content}
{ e.preventDefault(); Meteor.logout(); }}>Log out ({user.username}) }
```
27:50 - What do you think is the ideal usecase for Meteor?
31:09 - Why did Meteor 1.0 fail to maintain hype?
36:41 - What does Meteor’s future look like?
45:27 - Are there any plans to integrate serverless into Meteor?
46:55 - Any little known features of Meteor that people might be interested in?
Links * Meteor * Tiny Capital * Deno * Meteor Galaxy * Mongoose * Parcel * Apollo * MongoDB * Svelte * Meteor repo * Meteor Up * https://howtocreateanapp.dev/ * https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A * Cordova * Missive * Meteor Forums
××× SIIIIICK ××× PIIIICKS ××× * Filipe: + 1: Galaxy + 2: Terere * Scott: Amplifi Alien Router * Wes: Parcel - Global Package Tracking
Shameless Plugs * Filipe: @filipenevola * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:35 - What’s the big deal?
- If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer”
- Retail Me Not uses it
- Valid use cases:
- Same domain change the page from a popup
- Cross domain changing page data
- Example: https://mathiasbynens.github.io/rel-noopener/
05:39 - Why doesn’t the browser just fix it?
- Safari did - You can use rel=“opener” to allow it
- Firefox did
- Chrome hasn’t yet
- https://twitter.com/HugoGiraudel/status/801475801397030912
10:48 - Does this hurt SEO?
- It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead.
Links * @argyleink
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
It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 02:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”?
06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips.
11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel).
13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level?
18:01 - Why should you choose Styled Components over other ways of writing CSS?
22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa.
26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better?
31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal.
37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do.
Links * inputmag.com * Focus app * TSdx * Rollup * Webapck * Parcel * Beginner Javascript * Typescript * Darknet Diaries
××× SIIIIICK ××× PIIIICKS ××× * Scott: Malicious Life Podcast * Wes: LaCie Rugged USB-C External HDD
Shameless Plugs * Scott: Modern CSS Design Systems - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 02:50 - What is turbolinks?
- Generate HTML on the server
- Send it over the ajax request
- Load it in the page
03:55 - Who is using Turbolinks?
- GitHub
- Basecamp
- Hey.com
05:24 - Turbo Links javascript browser bundle
- Intercepts any link click
- Fetches the page HTML
09:19 - JS Sprinkles
- Vanilla JS
- jQuery
- Stimulus
- Alpine JS
Links * Turbolinks * Syntax 254: Headless CMS Break Down & Roundup * pjax * Svelte * Next.js
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
In this episode of Syntax, Scott and Wes talk about the future of video for the web!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 08:19 - Scott’s Background in video
- Started editing in middle school
- Worked professionally as an editor and production assistant for magazine
- Created specialty flash video players
- Have been hosting video content since the start of my web career
09:12 - Terminology
- Transcoding - digital to digital conversion of one format to another
- Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server)
10:51 - Streaming vs Downloading
- Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing.
11:16 - Formats
- MP4
- WebM
- DASH
- HLS (HTTP Live Streaming)
- m3u8
21:35 - Players
- shaka-player - https://github.com/google/shaka-player/
- hls.js - https://hls-js.netlify.app/demo/
- dash.js - https://github.com/Dash-Industry-Forum/dash.js
- video.js - https://videojs.com/
- jw player - https://www.jwplayer.com/
- Bit Movin player - https://bitmovin.com/docs/player
- Ooyala Brightcove - https://www.brightcove.com/en/
27:48 - Services Roundup 🐴
- YouTube - free
- Vimeo - $
- MUX - $$
- Wistia -
- Cloudflare - $$
- JW Player - $
- Cloudinary - $$$
- Brightcove - $$$
- Azure - $$
- Bit Movin - $$
- AWS - $$
46:59 - What Scott did and how/why
- upchunk
- Mux
- Video.js
- Custom uploader
- Using polling
Links * Basecamp * Hey * Inbox * YouTube * Wistia * Drip * ConvertKit * Vimeo * https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski * https://www.vidbeo.com/blog/hls-vs-dash * HLS Can I Use * youtube-dl * Syntax Ep 254: Headless CMS Break Down & Roundup * Cloudflare * Mux * Framer Motion * Cloudinary * upchunk
××× SIIIIICK ××× PIIIICKS ××× * Scott: Flexibility Focus Podcast * Wes: Mustie1 YouTube Channel
Shameless Plugs * Scott: CSS Variables Course - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat it’s another edition of the Top Level Domain Game!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:25 - How it works
We pick a TLD from a list, and the other person needs to guess:
- Is it for a country or business? +5 points
- What country, business, or type of business is it for? +5 points
- How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ https://www.101domain.com/
- Is scott._ and wes._ available? -10 points for each
04:00 - .sd
- Scott: 5 + -5 + -126 + -10 + 10 = -126
05:46 - .ong
- Wes: 5 + -5 + -30 + 20 = -10
07:53 - .koeln
- Scott: 5 + -5 + -20 + 20 = -126
09:23 - .co.ke
- Wes: 10 + -15 + 0 = -15
11:00 - .tr
- Scott: 5 + -5 + 0 + 0 = -126
12:25 - .ist
- Wes: -5 + 5 + -10 + 0 = -25
13:57 - .xn—45q11c
- Scott: 5 + 5 + -295 + 10 = 20 = -401
16:40 - .reit
- Wes: 10 + -1460 + 10 = -1465
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
In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests * Jerome Hardaway
Show Notes 01:50 - Captain America of Tech
03:25 - Where do you work and what type of stuff do you work on?
08:03 - What was your introduction to programming?
15:46 - When did you start Vets Who Code?
24:13 - What is the stack behind Vets Who Code?
29:56 - How do you help prep vets to get jobs?
41:32 - How can you be an ally and amplify black voices in tech?
50:05 - Everybody against racism
Links * Vets Who Code * Quicken Loans * Eventbrite * Animate.css * Laws of UX * react-spring * General Assembly Code Bootcamps * uses.tech * keycode.info * Tech Talent Pipeline * @vetswhocode
××× SIIIIICK ××× PIIIICKS ××× * Jerome: + 1: HBO’s Watchmen + 2: https://vidr.io/ * Scott: Explained on Netflix * Wes: Jeremy Fielding YouTube Channel
Shameless Plugs * Jerome: Vets Who Code * Scott: Design Systems with CSS Variables - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:00 - So you made a form:
- Contact form
- Sales form
- Email signup for newsletter
- Bug report
- Sign up for an account
- Password reset
03:00 - Now someone is going to:
- Have a bot that submits it
- Maliciously write a bot that submits thousands
04:14 - So what can you do?
4:54 - Honey pot
- This is a field that is either hidden or you tell the user not to fill in
- Can goof up autofill
- Works in many cases
07:37 - IP Throttle
- Only allow each IP to do an action a certain number or times inside a window
- You may only try signing up once per 10 mins
09:48 Block known ASN
12:37 - Captcha
- Soft captcha: “What is 1 plus 1?”
- Annoying captcha: Type these letters
- Google captcha: Train our self driving cars
- Hidden captcha
- Cloudflare hCaptcha
Links * Cloudflare * Digital Ocean * Google reCaptcha * Cloudflare hCaptcha * Cloudinary
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
In this episode of Syntax, Scott and Wes talk about what they wish existed in React!
DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes React 03:53 - Unmount delay for animation
06:20 - Suspense with SSR released (or not because I think they are shelving it)
- Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858
09:24 - File based components
- Like Svelte and Vue
- This would look like a file with a special scoped
In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 05:04 - Satellite
- High latency
- Satellite congestion
- Oneweb
- Starlink
08:43 - WISP
- Can be different techs - LTE, LOS, Long range WiFi
- Local towers put up in town
- 900mhz, 5 + 2.5gz
- Pretty cowboy
12:09 - Cellular LTE
- Goes over the cell signal
- Can be super fast or slow depending on your reception
- Cell plans can be rate limited
12:52 - Routers
- WE826-T2
- Rooter / Golden Orb / Wifix
- Based on Open WRT
- https://www.ofmodemsandmen.com/
- Nighhawk M1
- ZTE MF288
17:03 - Modem
- Two types of modems:
- Host modems
- PCI-e / M2 Cards
- Sierra Wireless
- AT Commands
- Band locking
- Enable carrier aggregation
- Get detailed values on modem power
- See cell tower IDs
23:16 - Antennas
- Omni
- Yagi
- Gotta get them high
- Lots of connectors - Type N, SMA, RP SMA
25:47 - Boosters
- Adds noise
26:04 - Plans
- Some plans are phone only
- Some plans are tower restricted
- Most Hot spot plans are a rip off
- Calyx Institute
- Canada:
- Bell Internet Five
- Telus Smart Hub
29:27 - Speeds
- Depends on tower, congestion
- Depends on pre paid, post paid or first responder
- Depends on if you hit the cap or not
30:15 - Tools:
- Cell Mapper
- LTE Hacks Facebook group
- LTE Fix website
Links * Syntax 169: Hasty Treat - Remote Internet
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
It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 01:37 - Q: Why does React bill itself as a library instead of a framework?
03:14 - Q: Are y’all still using Firefox now that it has been six months?
06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace!
09:34 - Q: Who would win in a thumb war, Wes or Scott?
10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache.
14:53 - Q: Should I start a new project with jQuery or React?
17:21 - Q: I’m a young teen (<16) with a passion for all things web dev. However, without being able to legally have a job, I’m unable to make any money and am therefore running on a $50 Raspberry Pi and a 10+ year old monitor. As much as I love my Pi, just running npm install can be agonizing sometimes, not to mention the amount of space node_modules take up on a device with 16GB of storage! So basically, any pointers on getting income (and practice!) in the web development field when your under 16? And just in general, what advice do you have to young teen learning to code? Thanks in advance! P.S. You know you’ve got something going when a teenaged boy would rather listen to your podcast than watch Star Wars or Marvel with his friends! ;) So keep up the amazing work.
22:12 - Q: Is it worth my time to learn design patterns in JavaScript?
24:28 - Q: I have a question regarding Figma design to HTML/CSS conversion. When translating the design into code, do you keep the font-size, padding, height of images the same as defined in design or do you take something different? Let’s suppose top nav bar is 115px, then do you make it the same as well, or something else?
29:03 - Q: You both are great at technical communication — how do you get better at technical communication when self-learning?
33:06 - Q: What tools (or other methods) do y’all use to manage spinning up new projects with all the assorted directory structures, tools, and configs, you prefer? For example, when I start a new project, these days I like TS, Prettier, ESLint, and want those to play nicely together. I find I’m constantly copying files from one project to the other but haven’t found a good abstraction that allows me to setup a new project with the assorted files. Bonus points for a solution that can keep shared configs and deps up to date.
36:10 - Q: I am 26 years old and working a full-time job. I am currently looking at the possibility between work and spending time with my partner. I get maybe an hour a week (maybe two) to focus on learning Javascript. I feel like it is taking me literally forever to get anywhere, and when I do learn something, there is always a better way of doing it! And then when I do sit down and get the time I just feel like I have no direction. Your podcast has been giving me small boosts of motivation, so thanks for that. But is 26 too old to make a move into development?
39:39 - Q: How do you step up a web development project to an enterprise-level? There are so many simple tutorials and quick wins all over the internet, but how do you get more knowledge about bigger enterprise-ready technical stuff. E.g. How to organize a Vue app with >60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management?
42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it?
Links * React * Firefox * Brave * CodeSandbox * VS Code in the browser * CodePen * Source Making Design Patterns * Figma Auto Layout
××× SIIIIICK ××× PIIIICKS ××× * Scott: + 1: Myths and Legends Podcast + 2: Fictional Podcast * Wes: Parchment Paper Baking Sheets
Shameless Plugs * Scott: Sapper For Beginners - Sign up for the year and save 25%! * Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:13 - attr()
04:14 - calc()
06:05 - :is()
07:20 - sin, cos, tan, acos, asin, sqrt, pow
08:52 - clamp()
12:13 - minmax()
14:24 - fit-content()
15:35 - filter
- blur()
- grayscale()
- sepia()
- opacity()
- contrast()
- url()
Links * https://twitter.com/wesbos/status/1256229763225657348/photo/1
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
In this episode of Syntax, Scott and Wes continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:17 - Typing
- Take an online typing test or skills - https://www.keybr.com/
07:02 - Bash / Terminal
- WSL
- What directory am I in?
- SSH
- How to copy / paste / remove files and folders
- z
- Nice prompt (ZSH or fish)
- Know how to get out of VIM/VI and how to use it for fast editing
- Know how to make an alias
13:19 - Text editors
- Command Palette
- Keyboard shortcuts (just look them up!)
- Click through to source
- Multiple cursors
- Find/replace master
- Find and replace across files
18:37 - Regex
- Regex101
- https://regexone.com will teach you just enough
22:03 - OS Basics
- Switching apps
- Unzipping
- File organization
- Searching for/in files
28:50 - Googling
- Learn how to google well
- What words to use and what not to
- Basic operators “-”, ",
- Use Reddit: for opinions
- Add dates - example: Library has been out for 6 months, and you can filter out
33:08 - Navigating GitHub
- Explore for finding interesting projects and creators
- Know how to clone a repo
- Create repo and push to it
- https://octolinker.now.sh/ to click through to files
- Use Octotree to navigate
36:20 - Navigating source
- View source
- Where to start in a repo (ie the entrance to a project)
- Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills
- Access to the minds of other developers
37:31 - Knowing how to pick the right dev tools pane
- Is it network based?
- Does it happen once you click something?
- Toggling CSS on/off
- When console logging makes sense vs using a better tool
Links * TypingTest.com * Wes’ Command Line Power User * Karabiner * BetterTouchTool * Alfred
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Fabric of the Cosmos * Wes: Cosmonaut Stylus
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 01:38 - Why?
04:20 - What is System76?
- System76 Lemur Pro
08:53 - What is Pop OS?
- Pop OS
09:41 - How has Linux compared to Mac?
- Pop OS is a great distro with lots of features, but command line knowledge is still necessary
10:07 - I can still run:
- Alfred
- Figma
- VSCode
- DaVinci Resolve
- Zoom
- Brave
- Chrome
- Firefox
10:43 - I can’t run:
- ScreenFlow
- Logic
- Sketch
13:46 - What do I miss?
- Trackpad gestures
- It’s not as polished of an experience
Links * Dell * Toughbook
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
In this episode of Syntax, Scott and Wes talk with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com
Guests * Ian Ramzy
Show Notes 02:08 - Who are you and what’s your background?
05:34 - Why did you build this?
13:55 - What is it built in?
- Express server
- Web sockets
16:10 - Why is there no tooling?
- GetUserMedia
- WebRTC
- Twilio STUN/TURN/ICE infrastructure
- https://www.twilio.com/docs/stun-turn/faq
VideoChat.peerConnection = new RTCPeerConnection({ iceServers: token.iceServers, });
24:31 - How does your server deal with an influx of users?
27:11 - How do each of these features work?
- Auto-scaling video quality
- Text chat
- Screen sharing
- Picture in picture
- Live captions
- Loading animation
- No download required, entirely browser based
- Direct peer to peer connection ensures lowest latency
- Single use disposable chat rooms
41:32 - Have you looked into any of the recording APIs?
Links * ZipCall * Zoom * jQuery * WebTorrent * Heroku * Adopter.js * Figma
××× SIIIIICK ××× PIIIICKS ××× * Ian: Notion * Scott: Summoning Salt * Wes: 4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module
Shameless Plugs * Ian ZipCall * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections.
Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.
Show Notes 03:27 - Images
- Resize client-side when uploading
- Lazy load or progressive JPG
- Width + height so the content doesn’t shift with placeholders
- Compress your images - lossless and lossy
- Use SVG where possible
08:33 - Scripts + CSS assets
- Hasty Treat - 5 Things That Make Your Site Slow
- Hasty Treat - 5 More Things That Make Your Site Slow
08:51 - Video
- Variable-rate video is key
09:13 - Connections that go in-n-out a lot
- Save form state on page refresh
- Show UI when user goes offline
window.addEventListener('offline', updateOnlineStatus);window.addEventListener('online', updateOnlineStatus);
- Retrying in _____
10:27 - Service workers!
- Serves up local cache initially
12:05 - Fonts
- Font-display CSS https://css-tricks.com/font-display-masses/
- Sometimes possible: tree shake your fonts - load only the characters you need
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
14:04 - CSS tricks
- Text over background image — make sure you also set a color so the text will show while the image is loading
14:37 - Testing slow connections
- Dev tools
- Mimic a speed, or 3G
Links * ImageOptim * Slack * Discord * Cloudflare * Workbox by Google * Chrome Dev Tools * Firefox Dev Tools
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
In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 02:38 - What and why
- A headless CMS doesn’t mean you have to use a static site generator
- A headless CMS has an API:
- REST
- GraphQL
- GROQ
- A headless CMS can pipe its content into:
- Static Site on build - like Gatsby
- An app on run/refresh
- An existing website - widget
- What makes a CMS? Do you need a UI?
- What is the threshold?
- Is a hotdog a sandwich?
- Things to think about when choosing an API
- Auth - Rules + roles + levels
- How easy is it to create new data types?
- Is it code or UI?
- Can my mom use it?
- Can you create one-off content types? (e.g. settings pages)
- Custom workflows
- dRafts, revisions, roll backs
- How are images handled? Do you need another service for that?
- Pre-determined UI
- Is custom UI possible?
- Two-way relationships?
- Tags?
- Data validation?
- UI + API?
- Hosting?
- Pricing?
- Content movability?
- Can you get your data out?
- Schemas
- Users
- Revisions
- CORS or realtime API?
- APIs
- Can you insert data via the API? (or just pull)
- Node API
- Importing data
24:37 - Hosted
- Sanity
- Prismic
- Contentful
- Dato CMS
- Storyblok
- 8Base
- Agility CMS
- Seems to be making a big corporate play
36:59 - Self-Hosted
- WordPress
- WordPress REST API
- GraphQL API
- WP GraphQL
- Advanced Custom Fields for custom UI
- Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced
- The theme UI from plugins is often lost
- Drupal
- contentacms.org
- Craft CMS
- Ghost
- Strapi
- Keystone
- Joomla (JK!)
44:33 - API (BYOUI)
- Hasura
- Prisma
- Firebase
47:37 - Git Based
- Netlify
- Forestry
50:30 - Other
- Google Sheets
- Sheety
- Airtable
- Tina CMS
- Not a CMS
- Markdown under the hood
- Notion
Links * https://twitter.com/wesbos/status/1254772936935739393 * Pixel & Tonic * GraphCool * GraphCMS * Sapper
××× SIIIIICK ××× PIIIICKS ××× * Scott: DEWALT Random Orbit Sander * Wes: Shelf Brackets
Shameless Plugs * Scott: New course on Sapper - Sign up for the year and save 25%! * Wes: Wes’ YouTube Channel
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
In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:26 - Types of Slow connections
- Slow upload
- Slow download
- This could be that your kids are watching a show and your partner is on a zoom call
- High latency
- Intermittent
07:47 - Loading UI
- Show loading UI for everything, but after X seconds
- Page transitions on SPAs
- Form switches - enter country, get list of provinces/shipping/whatever
11:58 - Account for XHR failures
- Sometimes I’m in a loading state forever
- State machines will account for this
13:26 - “Still working” timeouts
- Some sort of timeout so the user can get feedback
Links * Sentry * Sapper * Backblaze
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
It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future?
16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog?
11:13 - Q: Do my students NEED to understand recursion to be effective JS devs?
15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser.
22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that?
26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids?
30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs?
33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy?
36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”?
41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication?
45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used .env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example.
48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale?
55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: https://twitter.com/remix_run. This of course is in addition to Redwood and Blitz.
Links * Prism * VS Code * gatsby-remark-vscode * CodeSandbox * vscode-textmate * System76 Linux Laptop * JS Refactor * ScratchJr * Javascript30 * GraphiQL Pokedex * AWS * Auth0 * Okta * mLab * Jetpack Backup * Remix * Redis * Redwood * Blitz * Next.js * Encarta
××× SIIIIICK ××× PIIIICKS ××× * Scott: EGO battery-powered lawn gear * Wes: AmazonBasics Notebook Laptop Stand Arm Mount Tray
Shameless Plugs * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:21 - When was IE11 made?
03:48 - When is it deprecated?
04:44 - How to make the decision?
- Look at your analytics
- Look at your users
- Is a 2% drop in sales worth it?
09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone?
- Modern Flexbox
- CSS Grid
- CSS Variables
10:26 - Can you partially support it?
- Major features
- Progressive enhancement
- Gracefully degrade
- Polyfill
11:16 - What about testing?
Links * wesbos.com * VirtualBox * modern.ie * IE11 * Surface Book
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
In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com
Show Notes 03:14 - General premise
- Sapper compiles away, removing framework code from build
- Component & Props based
- Easy reactivity
- Built-in tools like animation
- Template-based
07:57 - Svelte 101
- .svelte files
- Files can include ``` The answer is {answer}
``` 20:08 - Template logic
+ If statements
{#if user.\_id}
{/if}
+ Loops
{#each cats as kittens}
+ Promise tags
``` {#await promise} ...waiting
{:then number} The number is {number}
{:catch error} {error.message}
{/await}
```
23:12 - Events
+ On directive
+ Functions can also be inline
+ Modifiers
Click me
26:11 - Baked-in goodies
+ Animation
+ Dimensions
{text}
+ Lifecycle methods
+ Advanced State Via Stores
- A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.
+ import { writable } from ‘svelte/store’;
+ export const count = writable(0);
+ count.update(0)
+ Slots
+ React helmet like stuff, ie 36:39 - Sapper
+ Similar to Next.js
+ Folder routes
+ Static export with all of the good stuff like service workers and preloading Links
+ Svelte
+ Sapper
+ r/webdev
+ Vue.js
+ ScottTolinski.com
+ WesBos.com
+ Next.js
+ ScottTolinski.com Github Repo
+ Gatsby.js
+ Shawn Swyx ××× SIIIIICK ××× PIIIICKS ×××
+ Scott: Lewisia Battery Backup Solar Fountain Pump
+ Wes: Firefox Containers Shameless Plugs
+ Scott: LevelUpTuts YouTube Channel
+ Wes: Wes’ New Website 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
In this Hasty Treat, Scott and Wes talk about Scott’s new website!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 02:25 - Relaxed fit development
- Not concerned with it being perfect
- Will act as a loose digital garden, so it needs to be flexible
- Keep my talks and podcast appearances somewhere
04:40 - The stack
- Svelte / Sapper
- CSS variables
- Static generation with markdown
- No API
- Hosted on Netlify
08:15 - Why?
- I dropped that db life in 2015 and never looked back
- I’m a developer - markdown is good for me
- I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself.
- Full page animations. Orchestration. Fully SSG.
- Code is painless to add to — adding a blog post is as easy as creating a markdown file
Links * ScottTolinski.com * Svelte * Sapper * Maggie Appleton * Shawn Swyx
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
In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes ES2019 04:03 - Array.flatMap()
05:30 - Array.flat()
07:37 - Array.fromEntries()
09:50 - String.trimStart() and String.trimEnd()
11:23 - Function.toString()
11:57 - Object Key Order
- Integer keys in ascending order (and strings like “1” that parse as ints)
- String keys, in insertion order (ES2015 guarantees this and all browsers comply)
- Symbol names, in insertion order (ES2015 guarantees this and all browsers comply)
ES2020 14:50 - Big int
18:09 - Nullish coalescing
20:57 - Optional Chaining
24:55 - promise.allSettled
25:33 - Dynamic import
27:14 - string.matchAll(regex) and string.replaceAll
29:30 - globalThis
30:44 - Module Namespace Exports
33:11 - Navigator.share() API
36:34 - Async Hooks
37:39 - Pipline Operator
39:59 - Top Level Await
Links * https://twitter.com/wesbos/status/1181584047144878080 * https://twitter.com/wesbos/status/1238472679893671938 * https://twitter.com/wesbos/status/1230515254687301635 * Regex101 * Regexr * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare * Sketch * CloudApp * Figma * https://nodejs.org/api/async_hooks.html * Gulp * https://v8.dev/features/top-level-await * https://github.com/tc39/proposal-pipeline-operator
××× SIIIIICK ××× PIIIICKS ××× * Scott: Sapper * Wes: Dewalt Oscillating Multitool
Shameless Plugs * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 05:04 - The stack
- Gatsby
- Styled components
- React
- MDX
07:04 - The content
- Blog posts
- Twitter Hot Tips
09:54 - Styling
- Styled components
- Less
16:54 - MDX
17:45 - Serverless functions
Links * wesbos.com * bos.af * WordPress * ACF * Netlify * Gatsby * React * MDX * My New Website! Here are the deets * Next * Operator Mono * Mono Lisa * Puppeteer * gatsby-image * Jason Lengstorf * gatsby-plugin-prettier-build * Cloudinary
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
In this episode of Syntax, Scott and Wes talk with Heather Payne about bootcamps — how to get the most out of them and what to look out for!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Guests * Heather Payne
Show Notes 07:52 - Bootcamps
- What do you teach in the bootcamp?
- How long is it?
- SHow do you validate and pick topics?
- What makes a good bootcamp student?
- Do bootcamps work?
- How do you get the most out of a bootcamp?
20:45 - Finding a job
- How do you prepare for an interview?
- What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp?
- Do you see any common traits in the few that don’t get jobs?
- What about getting a job in the current climate?
43:30 - Other
- How do income share agreements work?
- Pay what you can income share agreements
- How do you tell if a bootcamp is good?
Links * Heather Payne * Juno College * WordPress * React * Council on Integrity in Results Reporting * Zoom
××× SIIIIICK ××× PIIIICKS ××× * Heather: Whereby * Scott: Original Grind Coffee Co. Cold Brew Coffee Maker (1 Gallon) * Wes: iStat Menus
Shameless Plugs * Heather: Juno’s Continuing Education Online Courses * Scott: Design Systems In Figma - Sign up for the year and save 25%! * Wes: Wes’ New Website - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 02:23 - Event bubbling
- Some events bubble, some don’t
- Clicks bubble
- Mouseevents bubble
- Focus doesn’t bubble
04:10 - Event capturing
- Capture: down, bubble up
- Canceling: prevent default
- target` vs currentTarget
- currentTarget is what got clicked
- target is what you listened for the click on
- event.isTrusted
- addEventListener once: true
Links * Javascript30 * BeginnerJavascript
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
It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service.
10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)?
16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them.
18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team?
23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using?
27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code.
29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each?
33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved.
38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components?
42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework?
46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file?
51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects?
55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice?
Links * imgIX * Netlify * Sass * Less * Bootstrap * Stylus * PostCSS * WordPress * Reddit * StaticGen * Gridsom * Vue * Laravel * Hugo
××× SIIIIICK ××× PIIIICKS ××× * Scott: Jelle’s Marble Runs * Wes: Hyundai HHC2GNK Vertical Style Electric Air Compressor
Shameless Plugs * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 02:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.”
This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here.
05:03 - Lots to unpack here
- Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here.
- Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code.
08:20 - So what can you do?
- Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already
- Show the dev that even though it looks weird, it’s better for readability.
- Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier).
- Put together a solid argument for it, written down.
- Use it in a smaller project. Everyone is against prettier at first, but once they use it, they realize how amazing it is.
- Can you just Prettier the code yourself and then format it otherwise before you check it in? This depends on if you have existing formats.
Links * Prettier * js-beautify
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
It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt.
08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around?
13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future?
19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers?
21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json?
27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app?
30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype?
34:34 - Q: When you are looking to refactor code, do you have a process you like to follow?
41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why?
46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here?
49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down?
51:51 - Q: Should I use the mongoDB or mongoose node module in my project? What are the differences?
55:48 - Q: Is it a bad practice if I mix up React Bootstrap and Material UI in one React project?
Links * gqless * Prisma * The Blitz.js Manifesto (A New Fullstack React Framework) * Begin * Shopify * Snipcart * Magento * Sanity * Gatsby * Syntax 157: Hasty Treat - What is a Headless CMS? * @dog_rates * Wondery - Joe Exotic
××× SIIIIICK ××× PIIIICKS ××× * Scott: Jackbox Games - Murder Party Two * Wes: Tiger King
Shameless Plugs * Scott: Custom React Hooks - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 03:01 - Shipping too much JS
- Code splitting
- Webpack Bundle Analyzer
- Look at dependencies of libraries
- Use fewer libraries
06:38 - Not bundling code
- Build process
08:24 - Not compressing code
- Google Closure Compiler
- Gzip via your server serving assets
- Minify CSS + JS
11:45 - Loading JS asynchronously
- Where should I put
In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website?
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 5:40 - Banners and popups
- Interfere
- Static
- Dismissible
- Cookie/localstorage
- When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated.
- Private client-side-only PWAs are hard
14:35 - Good styling
- What happens if they add an image?
- Do they have access to the branded fonts and colors in their WYSIWYG?
- Can you revoke 100px red Times New Roman?
18:32 - Page alerts
- Yellow, green, red
- Alerts on existing pages
21:08 - New pages
- Is there a good template for new pages?
- Can they easily set the slug?
- whatever.com/covid19
- Can they add it to the nav?
23:52 - Google’s “Hours of Operation”
- Is that easy to change?
- Meta tags: https://schema.org/OpeningHoursSpecification
25:43 - Other
- Own your audience!
- Email newsletter ready to rock
- Online pickup? Basic scheduling software
- https://www.cityhive.net/
- https://snipcart.com/
- Live streaming - have a YouTube account ready to go, even if empty
34:38 - Deployment
- Detail how to deploy everything
- It might have been years and the CSS will only compile on Node 6 and Gulp 3
- Do any caches need clearing?
- Does the CSS need to be cache busted?
Links * 1Password * Cloudflare
××× SIIIIICK ××× PIIIICKS ××× * Scott: + Mellow Groovy Sounds YouTube Channel + Mellow Grovvy AOR / West Coast Mix #4 * Wes: Used projectors are cheap and can be a great deal
Shameless Plugs * Scott: All Courses - 50% everything! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 3:00 - TTFB
- Slow DNS lookup
- Server on the other side of the world
- Slow server processing
- Network speed back to the browser
6:21 - Requests
- Too many requests
- Too large
- Waterfalling your requests
9:44 - Assets are too large
- Images are the biggest bloat in a site
- Compress and optimize via build tool or ImageOptim
- Make smaller
- Picture fill for mobile
14:48 - Lazy loading
- lazy=“true”
- Intersection observer
- Preload slider images two ahead
18:03 - Not using a CDN
- What is a CDN?
- Cloudflare is free, others are very cheap - we used Cloudfront
- Netlify is free and comes with a CDN
Links * WordPress * Webpack * Gulp * gatsby-image * Cloudinary * Cloudflare * Cloudfront * Netlify
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
In this episode of Syntax, Scott and Wes talk about working from home. How do we do our best in these unprecedented times? Here are our tips for working from home and staying productive and sane!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 2:39 - Your space
- You need a table
- Card table or dining room table
- Keyboard + monitor
- Don’t work from your bed or couch
- Headphones can get you in the zone (noise-canceling ftw)
16:36 - Routine
- Shower, shave, makeup
- Clear start and stop times - even if that means it’s 5am to 11am because you are splitting
- Taking breaks is important
25:24 - Focus
- TODO list - write a list of what you hope to do at the start of the day, check things off, feel good about yourself
- Eat That Frog - for the 100th time
- Don’t watch or check the news during work hours
- Block the terms related to the pandemic or politics on social media - you don’t need that info there
- DOOM Scrolling
30:11 - Self care
- Video games or relaxing things post work
- Exercise
- Kettlebells, spin bike, bodyweight workouts
- Stronger by Science has a great episode about this - https://www.strongerbyscience.com/podcast-episode-38/
- Kettlebells, spin bike, bodyweight workouts
- Zoom Happy Hours
- Don’t overly rely on substances to get you through
- Get your VD (vitamin D)
- Don’t stress out yourself at night - don’t look up news before bed
43:20 - Managing kids and sharing time with your partner
- First of all, props to you all - this is really hard, mentally and physically
- This will vary greatly depending on your SO’s job, number and age of kids
- Our SOs have work and jobs of their own
- Watching young kids is hard work
- Give each other 30 min brakes
- Kids need routine - put something in place
- Some times Uncle Mickey needs to take over, and that’s ok
- Communication is key
- Schedule Examples:
- 6-12 and 12-6
- 4 hours each
- 2 hour trade off
- Focus time (calls, deep work) and half-focus time (emails, etc.)
- Have empathy with everyone: co-workers, SO, kids
- Check in on your peeps
- Keep an eye on your co-workers, even the extroverted ones
Links * Super Strong Neodymium Magnets * Elgato Cam Link 4k * Keychron K1 * Eat That Frog! * uses.tech * Animal Crossing * Love Is Blind * Powerblocks * Peloton * Strange Brew * Wes’ Twitter thread - How are you managing child care? * Syntax Twitter thread - Send us your work from home tips!
××× SIIIIICK ××× PIIIICKS ××× * Scott: Oculus Quest * Wes: Slumberpod
Shameless Plugs * Scott: All Courses - 50% off! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 1:48 - What the heck is abstraction?
- I like to think of it as sweeping under the rug
- Vue and React devs should be very familiar with the concept
4:44 - When to abstract
- When things are getting too heavy
- Personal preference
- Some people have an arbitrary line limit
7:25 - When not to abstract
- When savings are minimal
- When it just adds a pointless layer
9:40 - Personal code abstractions vs public
- My personal focus is on API simplicity and baked-in smart defaults
- More specific
- Public APIs need to be more flexible or at least for some components
Links * React * Vue * Svelte * Max MSP * chakra UI
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
In this episode of Syntax, Scott and Wes talk with Dr. Courtney Tolinski about mental health and web development.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:20 - Depression
- Honestly just explaining depression would be great. Too many times I’ve heard “but you don’t look sad”
- As someone who struggles with depression, what are some things I can do to rekindle and things I enjoy like developing and hobbies? This would greatly benefit me for learning more dev related things outside of doing it for work.
- My depression is due to some other cause in personal life - two years into it.
- Coding has bought me little life back as this is the only thing I have to do.
- What can we do from an outsider's view to someone who might have depression?
12:23 - Anxiety
- Imposter Syndrome x 1000
- How to deal with increased anxiety during these times?
- How to avoid anxiety and feel useless when working products that you don’t appeal to you?
- Wanted to ask the Dr about why do I feel that I have to work on 1000 projects that seem to never finish? 😣This is inducing a lot of anxiety sometimes.
- I am on depression medication. Sometimes, I feel scared that I am so slow and don’t feel accomplished enough like people working at FANG, etc, being a SE.
- How to deal with the anxiety caused by today’s events around the world and the need to isolate yourself from society even though we crave human interaction?
29:12 - Focus and job performance
- How to keep motivation and focus? I find myself enjoying work but having a hard time focusing on it. All the “distraction-free” apps don’t work because I can turn them off and I feel they literally have no power over me.
- Hardcore mode
- Pomodoro technique
35:10 - Motivation and remote work
- Bore-out
- Burnout
- How do you deal with loss of focus and happiness in web development (especially on remote jobs)?
- Working for yourself at home, you don’t get a chance to bounce ideas and encouragement from others in an office. What’re some good ways to compensate for that to ensure you maintain a positive mindset?
- Work on new things
- Find ways to try new things
40:38 - Stress
- Correctly identifying source of (negative?) stress. Not lashing out when under stress.
- How to avoid eating to cope with stress?
Links * Eat That Frog! - Brian Tracy * Pomodoro technique * Healthline * How to Talk so Little Kids Will Listen: A Survival Guide to Life with Children Ages 2-7
××× SIIIIICK ××× PIIIICKS ××× * Courtney: Animal Crossing: New Horizons, How to Talk So Kids Will Listen & Listen So Kids Will Talk, The Whole-Brain Child: 12 Revolutionary Strategies to Nurture Your Child’s Developing Mind * Scott: The Engineering Mindset YouTube Channel * Wes: Toca Boca
Shameless Plugs * Scott: All Courses - Sign up for the year and save 50%! * Wes: All Courses - Eveything is 50% off! Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about security and how to get good at passwords.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 7:35 - Setting passwords
- Absolutely 100% must be unique for EVERY SINGLE WEBSITE
9:38 - Generated passwords
- Make a sentence: lovetoEatPizza
- Decide on casing
- Make your own algorithm:
- 3rd letter replaced by 4th letter of domain
- number on end is double the number of chars in the domain
13:52 - Use a password Manager
- Have the password manager generate the password for you
- Get it on your phone
- You must go 100% all in
- 1password
- Dashlane
- Bitwarden - open source version of Dashlane
- LastPass - awful
17:45 - Password manager tips
- Turn off your browser password manager - this is a crutch and causes them to become out of sync and this is why I see people annoyed by them
- For the love of god, make you master password something you can remember
- You can add family members to your plan that will approve it
- 1password’s Watchtower feature
20:50 - Biometrics
- Face ID, Touch ID
- Blood
21:37 - 2FA codes
- Authy
- Google Authenticator
- Authenticator +
- 1Password for 2FA codes
- Backup codes
- You can also backup the QR code
29:55 - Text message codes
- Don’t
- My sister got sim jacked, PayPal drained, phone number was gone for 7 days
- Lock transfer - ask your phone provider - mine has voice recognition
Links * Have I been pwned? * Shop Talk Show: One on One with a Hacker * Mailchimp
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
It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, and more!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 3:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode?
5:36 - The dreaded monitor question, flat or curved?
8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first?
12:35 - What is AMP and should I be using it?
16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js?
21:46 - Would you ever consider moving from Mongo / Mongoose?
24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program.
33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill?
36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity.
40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using utils or utilities inside src, but curious if there is a more common way.
44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new.
48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it.
53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will github.com/webruin map to github.com/newname?
Links * Cloudflare * AMP * Blitz.js * Brandon Blitz * Meteor * Mongoose * DynamoDB * uses.tech * Course Report - Modern Labor * Passport.js * Syntax 058: Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More * Syntax 015: Advice for New Developers, Imposter Syndrome and Interviewing at Google * Syntax 075: Hasty Treat - Feedback and Criticism * Brendan Eich
××× SIIIIICK ××× PIIIICKS ××× * Scott: Stronger by Science Podcast * Wes: iStat Menus
Shameless Plugs * Scott: Animating React with Framer Motion - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website.
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 2:36 - What is it?
5:43 - How do you calculate it?
- Big Mac Index
- Purchasing Power Parity
- Spotify Pricing Index
- Glassdoor
- Just ask developers what they make
8:04 - How do you implement it?
- Cloudflare headers
- Dealing with VPNs
- Does it work with sales?
16:09 - Is it client-side only?
Links * country-emoji npm package
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
In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 1:26 - Hooks vs Render Props
- Hooks win hands down
- useState
- useReducer
- useRef
- useContext
- useEffect
- Custom hooks to hide and encapsulate functionality
35:06 - How we use them
-
Scott
- Index that imports all custom hooks
- Babel alias to hooks folder
- Import { useHook } from ‘hooks’
- useContextState
-
Wes
-
useResizeObserver
- useForm
- useGridRower
- useWickedFavIcon
45:54 - Which built-in hooks do we not use?
- useImperativeHandle
- useCallback
- useDebugValue
48:22 - Are hooks harder to learn?
- Wes: Yes — but easier to maintain after the fact
- Scott: Yes — harder conceptually and initially but easier after concepts are understood
50:29 - Are classes going away?
- Wes: I say yes
- Scott: Double yes
Links * Syntax Ep 092: React Hooks * Making setInterval Declarative with React Hooks - Dan Abramov * babel-plugin-module-resolver * awesome-uses * uses.tech
××× SIIIIICK ××× PIIIICKS ××× * Scott: Ars Technica War Stories * Wes: Mpow CH1 Kids Headphones
Shameless Plugs * Scott: All Courses - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 2:34 - Finding someone
- Virtual Assistant
- Offset timezones can be handy
- Flexible is great - two hours here, two hours there
5:55 - Types of tasks to delegate
- Support
- Email replies
- Mail and shipping items
- Invoicing
- Expenses
- Research - find emails for X
- Blog post edits
- Sponsorships
14:50 - Standard Operating Procedures
- If something happens more than once, make an SOP
- Common questions that come up
18:07 - Tools
- 1Password
- Missive
- Custom backend tools for:
- Managing courses
- Issuing refunds
- Chromebook
- Google Docs
21:52 - Hours
Links * 1Password * Missive * Notion * Freshbooks * Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase
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
In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, and more.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:20 - Productivity
- Make a todo list and prioritize
- Get ideas out of your brain
- Use a tool like Notion as a second brain
- Batch related things together
- Recharge when you need it
- Have a system and stick to it
16:34 - Finishing projects
- Start
- Do a little every day
- Go all-in for a few days
- Clearly identify what needs to be done (Github issues, todo app)
23:30 - Planning tips
- I use Mind Node
- Whimsical
- Write it down when you have an idea
- Put everything in a calendar
30:24 - Communication
- Be honest and upfront with deadlines
- Give yourself padding — many people are overly optimistic
- Don’t let people expect communication from you, at all, or at all times
- Assume good intentions
- Don’t be a jerk to clients or coworkers
40:28 - Skill and career advancement
- FDD — fun driven development
- Share what you learn
- Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff
- Solve your own problems
- Apply and interview for anything that’s interesting
- Track your progress
- I want to ___, I wish I could ____, You are lucky that you get to _____
- Just start! Seriously. Plan on doing something.
Links * Todoist * Things * Notion * Evernote * Notable * Beginner Javascript * Level 1 Electron * uses.tech * Rework * Jason Freid * David Heinemeier Hanson * It Doesn’t Have To Be Crazy At Work * Mind Node * Whimsical * Javascript30 * CodeSandbox * Streaks * Xerf Xpec YouTube Channel
××× SIIIIICK ××× PIIIICKS ××× * Scott: Katsumi Horii Project - Sky Cruisin’ Album * Wes: AmpliFi ALIEN Router
Shameless Plugs * Scott: Animating React with Framer Motion - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 2:45 - What do you personally use Cloudflare for?
- DNS provider
- Domain registration at cost
- Caching
- DDoS protection
- Hiding server IP address
- Free HTTPS
- Firewall rules
- Scrape shield
- Lightweight stats
- Serverless functions
- DNS
- Cloudflare Warp
16:40 - What are you not using?
- KV storage
- Video streaming
- Deep customization around blocking/errors
19:49 - How do you set it up?
Links * Cloudflare * Beginner Javascript * Digital Ocean * DNS Simple * Let’s Encrypt * Syntax Ep 224: Serverless / Cloud Functions - Part 1 * Begin * 7-Eleven hit “Dance The Slurp”
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
In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:47 - Wes tried Cloudflare Workers
- Also this is so cool:
Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc.
- A word on Digital Ocean
- Kubernetes + FAAS allows you to scale up/down
13:54 - Secret management
- Some have a great UI
- Some have a CLI
- Some only have production
- Some have dev/staging/prod
16:24 - Vendor lock-in
- Two kinds of vendor lock-in
- Lock into a low-level provider (Like AWS, or MongoDB)
- Lock into a framework
- Questions to ask:
- Can I go, take my app as-is, and host it on another provider?
- Can I refactor the config and run my code as-is?
- Do I need to refactor my code for it to run on other platforms?
- Next.js will only run on Now
- There is a community package
- Begin all runs on Arc.codes
- Firebase is locked in?
25:12 - Sharing dependencies
- Each function will have its own package.json, which can be a pain
- Publish utils a private module
- AWS Layers
- Import/export
- Bundle and tree shake
30:26 - Local development
- Now dev
- NPX sandbox
- Wrangler for Cloudflare workers
36:40 - Existing applications
- Difficult to move with many routes, but easy to move a Graphql API that has one single route
- Maybe do piece by piece instead of all at once
- Begin has http express method
45:21 - Data
- Any DB you want
- Dynamo DB integrated into many
- Firebase
- KV Storage for Cloudflare workers
- Fauna
48:14 - File storage
- Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary
- Many also have this integrated as well
52:18 - Auth
- Serverless is ephemeral and stateless
- JWT likely as sessions will work, but doesn’t really make sense
Links * Cloudflare Workers * Akamai * MongoDB Stitch * Hitler uses Kubernetes * Digital Ocean * Kubernetes * Firebase * Google Cloud * Architect * Next.js * Now.sh * Begin * Netlify * Now * Wrangler * Apollo Federation * Monaco * Postman * Codesandbox * DynamoDB * Amazon S3 * Backblaze B2 * Cloudinary
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Power of Bad by John Tierney * Wes: Socket Organizer
Shameless Plugs * Scott: Animating React with Framer Motion - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:30 - The General Idea
- Toward Responsive Elements — Brian Kardell
6:20 - Problems
- It’s not as easy as, “how do we write them”
- Some of the requirements may need a fundamental change to browser engines
- May be very impractical and take a long time
“Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell
8:56 - What’s been happening?
- Lots of conversations
- Dead ends
“How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell
- ‘containment’ and ResizeObserver,
- Implemented in all browsers in about 2 years
12:00 - Progress
- Lot’s of discussion
- Goog, Moz, Apple, smart people
- Not there yet
- Big ideas that could go somewhere
.foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); }
“A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell
- Or a system based on resizeObserver
“In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell
- https://github.com/ZeeCoder/container-query
- https://github.com/FreddyFY/styled-container-query
Links * uses.tech * Ian Kilpatrick * Jared Palmer’s tsdx
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
It’s another potluck! In this episode, Scott and Wes answer your questions about Gastby vs everything, Next, Vue, Rails, working with agencies, CSS, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%.
Show Notes 1:39 - This may be a crazy question but I need to build a similar system to Level Up Tutorials where people can access content based on a monthly subscription. Any recommendations where to start with either Next.js or Gastby.js? How do I check to see if a person is up-to-date with payment?
4:14 - What's your favorite new tab page?
6:19: CSS vs SCSS vs Styled Components? When you are developing a React or Next.js application which styling method do you guys use and why? Which one is “best practice”, or a more efficient way of going about it?
11:14 - What do you think of lit-html?
15:25 - I’m relatively new to React, and primarily learning the create-react-app way. When do you go for the create-react-app approach when building an application, and when do you customize the config? I’m uncertain when it’s time to escape the ‘create-react-app’ approach. Also, when escaping it, which main configurations are you grabbing?
18:19 - Is there a reason hasty treat intros are 2.5x the length of normal episodes? Now that Overcast has intro skipping it’d be nice if the intros were uniform in length.
21:23 - I see Kyle Matthews coming out with a lot of input on how Gatsby can be used for web applications as well. After listening to several of your podcasts, where you talk about Gatsby, it doesn’t seem like you agree, and would go for Next.js instead. In your opinion is the development at Gatsby really heading in the direction of SSG and web application?
27:17 - I’ve hopped on the Vue train from jQuery land, and am loving both Nuxt and Gridsome. However, I keep hearing all these good things about Gatsby. Would you guys say that it is worth it to learn Gatsby (and the whole react ecosystem for that matter) over Gridsome? This is mostly for small-medium-ish side-project web sites that connect to a headless CMS.
30:04 - What are your thoughts on CSS pre-processors nowadays? With all the advance and new features from CSS, do you guys really think that it is still worthy to use it those?
32:11 - Scott, can you talk a bit about why you decided to switch back to Meteor after putting in all the effort to convert LUT to Next.js? I am about to start a new fullstack project and was considering Next until I heard you switched back. Maybe I should consider Meteor instead?
40:21 - I’ve recently started an internship at one of my favorite tech companies where I’m using EmberJS and Ruby on Rails. I love the team I’m on (the people are so nice) but I’m not super passionate about the tech stack. I’d much rather be using something like React and NodeJS/Express in my day-to-day coding. Do you think it’s worth staying in a position (if I were to try and get a full-time gig in this role) if you don’t like the tech stack, but really like the people?
40:51 - I’m thinking of doing a bootcamp that teaches Ruby on Rails for backend. I hear a lot that Ruby is a dying language, but at the same time, I know it’s used for a lot of big-timers, such as Airbnb and Shopify. Could you please explain the relevance that Ruby/Ruby on Rails will have in 2020 forward, as well as if it’s worth learning for newer web developers at this point?
45:15 - What is the deal with CMSs/headless CMSs? I hear you guys talk about them all the time (Sanity, Keystone, Prisma?) but I’m not sure what they are good for. To me, they just seem like a UI to my database, but isn’t that what my application is? It just seems like it would be easier to have my frontend talk to my backend talk to my database instead of learning how each CMS wants things to be done and programming for that? Am I missing the point?
48:11 - What does Svelte needs for each of you to use it instead of React in personal and future developments?
50:38 - I freelance on the side as well as have a 9-5. The other dev I work with mentioned he’d help if I ever needed/wanted help on a client project. What are your thoughts on doing freelance work with someone who you also work with at your job?
52:01 - My team is currently in the design phase for a rewrite of our biggest product. We are switching from perl backend (y i k e s) to node (yay) but for some reason, our tech lead decided on hapi for the node framework. I have spent a little time with hapi and it seems cool but I am not sure about its longevity when compared to more established frameworks like express. How do you feel about hapi and should I push for a different framework?
54:29 - I’m a lead dev that recently joined an agency for the first time. What 🔥tips do you have for livin’ and devin’ in that agency life? Especially around time management, time estimation and dealing with clients.
Links * Stripe * Braintree * Recurly * Firefox * lit-html * Overcast * @kylemathews * Gatsby Build * Vue.js * Nuxt.js * Gridsome * postcss-preset-env * Meteor * Ember * Ruby on Rails * Personal Capital * Airbnb * Shopify * Missive * Sanity * Keystone * Prisma * Svelte * hapi * koa * Express * Matt Stauffer's Blog
××× SIIIIICK ××× PIIIICKS ××× * Scott: Caffeine by Michael Pollan * Wes: Matt Stauffer - Setting Up Your Webcam, Lights, and Audio for Remote Work, Podcasting, Videos, and Streaming
Shameless Plugs * Scott: New course on Framer Motion - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about how to make servers fast!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:58 - Ram / Memory
- Things like variables, functions, callstacks, application cache, sessions are all stored in memory
- Large processes can eat up lots of memory
- Reading 1,000,000 lines of a CSV
- npm installing
- Swap Memory
- If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection)
- Garbage collection can take up CPU resourced
- High-performance databases
7:52 - CPU
- The processor on your server - the brains of the computer
- A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks
- A faster CPU means your node app will start more quickly
9:26 - GPU
- Most servers don’t have a GPU
- GPUs are not only good for graphics, but they are great at solving complex tasks
- Bitcoin mining is fast on a GPU
- Machine Learning
11:47 - Disk Space
- SSD vs HDD
- The files have to be read from the hard drive and served up to the web server - the hard drive speed determines how fast they can be read, and how fast they can be written
- SSD is more expensive but makes for a much faster application
- HDD is cheaper and is better for storing larger files that aren’t as time-sensitive
- An SSD will mean your node app will start faster and serve up files more quickly
Links * Atlas * Digital Ocean
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
In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 4:05 - What is Serverless?
- URL driven
- Startup/shut down (Heroku works this way)
- Digital Ocean droplet works differently
8:15 - What are the benefits?
- Scale up specific functions rather than everything - aka potentially cheaper
- Security - your singular server instance being hacked is not a possibility
- Less knowledge overhead required
- You don’t need to manage your own server
- Empowers front-end devs to do more
- Faster deploys
- Only re-deploy the code that changed
17:05 - What can you host on Serverless?
- Static Files - SPA (React)
- Single functions
- It can be in JS, Python, GO, PHP
18:07 - What can’t you host on Serverless?
- Entire applications
- Large apps have slow coldstarts
- 500mb limit
23:40 - Raw Providers
- Google Cloud
- Azure
- AWS Lambda
- SAP
- Red Hat
- IBM Cloud Functions
- Cloudflare Workers
- Kind of cool because they work like service workers where you can intercept any HTTP request
27:33 - Easy Providers + Frameworks
- Begin + Arc.codes
- Zeit Now + Next.js
- Anything + Serverless
- Netlify
- AWS Amplify
- Apex Up - TJ Holowaychuk
- Open Faas + Digital Ocean
Links * Heroku * Digital Ocean * Meteor Galaxy * Codepen Radio: Preprocessors and Lambda * Zeit Now * Wes’ tweet about serverless * @maxsteenbergen * uses.tech * Google Cloud * Azure * AWS Lambda * SAP * Red Hat * IBM Cloud Functions * Cloudflare Workers * Begin * Arc.codes * Severless * Netlify * AWS Amplify * Apex Up * Open Faas * @tjholowaychuk * Scott tries Begin.com * SyntaxFM Reddit
××× SIIIIICK ××× PIIIICKS ××× * Scott: Matt McMuscles YouTube Channel * Wes: Modern Vintage Gamer
Shameless Plugs * Scott: Scott’s YouTube Channel * Wes: Beginner Javascript Course - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 4:53 - The 411
- Previous knowns as Pop Motion Pose
- Animation library with focus on ease of use
- Utilizes both spring and duration based animations
7:19 - Pose
- Pose was previously more pose based - aka you made scenes and toggled between them
- This still exists within Motion as variants, but isn’t the main way
8:06 - The New New
- motion.div
- animate prop is basically a live value for the animation
- initial for initial state
- exit for animating out with use of animatePresence
- Hard stuff made easy
- drag prop
- Full control over properties like duration and easing
- Orchestration features, this then that
- Variants
- Multiple scenes allow you to orchestrate many animations with a single state change
- Handles hover and tap easily
- Scroll values
- SVG path animations
19:45 - Final Thoughts
- Framer Motion is easier
- React Spring is much smaller
- React Spring makes very complex animation possible
Links * Framer Motion * React Spring * Framer Motion Examples * Framer X
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
In this episode of Syntax, Scott and Wes talk about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more!
Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 1:30 - What is “codeless”?
- The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern?
- All types of jobs are being replaced by computers
- Truckers
- Cashiers
- Lawnmowers
- Doctors
- Why not web developers?
7:22 - First experience building sites with a GUI?
- Dreamweaver
10:18 - Entire website builders:
- Wix
- Squarespace
- Webflow
- Modulz
- Grid.io
- Wordpress Builders
13:17 - When are GUIs useful?
- Brochure site
- Basic e-commerce
20:26 - Is a GUI/Codeless always better?
- It depends what you’re capable of doing
25:21 - Levels of hell GUI assistance in builders
- CMS - Just modifying content and basic markup
- Access to code, drag blocks into place
- No or minimal access to code
- No modification outside of options
31:36 - Are there GUIs for making applications?
- Native Mobile
- Zapier
36:54 - Are jobs at risk?
-
Yes
- I think a lot of WordPress tinkering has already been replaced
- The guy who knows what buttons to push is at risk?
- Webmaster jobs where the roll was just occasionally updating HTML and text
-
No
-
Government
- Educational institutions
- Major corporations that can’t have their content stored via a service
39:55 - Our favorite GUIs to help development
-
Scott:
- Netlify
- Heroku
- Studio 3T
- VS Code
-
Wes:
-
Sketch CSS Export
- Digital Ocean
- Cyberduck
- Transmit
- ZSH
- VS Code
Links * Roomba’s first autonomous lawnmower * Notepad++ * Geocities * Angelfire * Sketch * Figma * Gatsby * Excel * Meteor * Recurly * Gumroad * Begin.com
××× SIIIIICK ××× PIIIICKS ××× * Scott: Baron of Botox * Wes: Owlet Smart Sock
Shameless Plugs * Scott: How To Build A GraphQL API - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:19 - What are our hobbies?
-
Wes: Focus on one thing, learn it, move along
- Kombucha, Fermentation and Curing Projects
- Bike flipping
- Kids ride on repairs + hacks
- ATV fixing
- ICE to Battery conversion
-
Scott:
-
Dance - 15+ years
- Weightlifting / fitness
- Video games
- Watching hockey
- Design
- Computing / coding
- Snowboarding
- Kung fu movies
9:00 - Why are they good?
- Fuel your coding project
- Maybe could even become your key to a job you love
- They keep your mind sharp
- Good for downtime
- Good for mental health and mood
- Can be meditative
- Be cognizant of what they do to your mental state
- Promotes creativity and critical thinking
- Fun man
17:54 - How do you find a hobby?
-
Wes
- I always need an end game
- I want to grow hot peppers
- I want a wicked ATV for cheap
- I think batteries are fascinating but I need something real to do
-
Scott - I start with the fascination
-
I think dancing is cool, but I could never learn
- I think _____ is cool, but I don’t know where to start
-
Deep dark YouTube holes
-
YouTube has an endless selection of educational content
- Facebooks groups or forums
-
Meetups / volunteering
-
Introverts will have a hard time with this, push yourself
22:50 - What is your hobby?
- Tweet us @syntaxfm
- SyntaxFM Reddit
Links * Oculus Quest
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
In this episode of Syntax, Scott and Wes talk about running backups and a home server — Synology setups, apps, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:03 - What is it?
- A little headless computer
5:07 - Drives
- WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$
6:25 - RAID
11:17 - Power
- Backup
- Time Machine over the network
- You can upgrade the memory
- SSDs
22:40 - Backing up your Backups
- Mirror folders to Backblaze B2
- Slow, but worth it
30:53 - Apps
- Plex + Emby
- Storage Analyzer
- Docker - anything really
- Node js ;)
- Security cameras
- Pi-hole or custom DNS server
- Moments
- Drive
Links * Screenflow * Synology * DS918+ * DS219+ * WD Red Drives * Seagate Iron Wolf * Govee Thermometer * Now * Squizzy * Backblaze B2 * Plex * Emby * Storage Analyzer * DaisyDisk * Docker * Node.js * Raspberry Pi * Dokku * Synology vs Blue Iris * Moments app * Pi-hole * Discourse
××× SIIIIICK ××× PIIIICKS ××× * Scott: Lululemon Men’s Jogger * Wes: DS918+
Shameless Plugs * Scott: How to Build a GraphQL API - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the non-glamorous skills that will improve your life as a developer!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Show Notes 3:13 - Why it’s needed
- Make you a better dev
- Make big tasks easier
7:00 - Why we don’t do it
- Because it’s hard
- It’s boring - sometimes
- It’s not our focus
7:24 - Good command line skills
- Get around file system
- Copy, move, delete things
8:58 - Keyboard skills
- Jump by word/line/BOL/EOL
- Learn 1 new shortcut per week
- Custom keybindings for common tasks
14:22 - Communication and interpersonal skills
- Check out Syntax 125: Hasty Treat - Communication Skillz
14:41 - Time management
- Focus apps to help
- How long will something take?
- Revisit past projects when they are done and see how long it took
16:36 - Good file hygiene
- Good folder structure
- Delete old cruft
- Clear your recycle
- Desktop and downloads are off-limits
- Create template structures or tools for commonly used structures
Links * Wes’ Command Line Power User Course * Synology * VSCode * React PropTypes Generate * Syntax 125: Hasty Treat - Communication Skillz * CleanMyMac * DaisyDisk
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
It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more!
.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam?
10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics?
12:00 - What is one thing that really annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be?
15:08 - Have you tried Fauna DB?
19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course.
23:58 - A site you’re maintaining is hacked, how do you handle fixing it?
30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that I don’t even know how to use them. What do you guys do for managing bookmarks on browsers?
34:15 - How would you recommend integrating React and other modern JS frameworks into (more or less) “static” or “brochure” websites? Say for instance I have a banking website that has mostly static content, but also has complicated JS pieces such as calculators, location finders and sign-up forms? I currently reach for jQuery & jQuery plugins for these pieces of functionality, but React and Vue sound like they could also help solve these one-off pieces of functionality. Most tutorials and examples are based on creating apps from the ground up, but what if you only want to sprinkle these frameworks in and only use them where JS is necessary? How might the both of you solve for these scenarios?
38:00 - I was wondering whether you could share which backpack, or bag do you use for carrying your laptops? I’m looking for something that would be useful for carrying my 16" Macbook Pro, but also could hold some other stuff like groceries, clothes, or other various things that one may want to put there.
41:50 - Do you write out a vanilla fetch() in your components that need it, or do you use a fetch “wrapper” written by yourself or someone else? If so, what does it look like?
46:16 - Have you ever done any automation projects using a Raspberry Pi? I am trying my hand at remote access to the solar power setup at our ‘bach’ (pronounced ‘batch’) here in New Zealand, which is the same thing as a ‘cottage’ in Canada. Finding it hard to find good resources for this online as most get really technical really fast. My idea is to take the RS485 modbus data and just send it up to a DB every 5 minutes or so.
51:38 - What do Wes and Scott think about beards and have you ever thought about growing one?
Links * Syntax 215: Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components * r/SyntaxFM/ * Fauna * Hasura * neo4j * Wes’ Advanced React Course * Pocket * Full Stack Radio 132: Caleb Porzio - Just Enough JavaScript with Alpine.js * Peak Design Everyday Bag * Raspberry Pi * Extreme ironing
××× SIIIIICK ××× PIIIICKS ××× * Scott: Shogun Wheel Yoga Wheel * Wes: Velcro Cable Ties
Shameless Plugs * Scott: How To Make a GraphQL Server - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about community building online — some of the different software techniques and things you can do to either get started with a web community or join one.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 7:16 - Chat options
- Slack
- Discord
- Level Up Tutorials Discord
- Faster communication
9:00 - Forum based
- Indexable
- Searchable
- Slower communication
- Discourse
- Spectrum
- Facebook groups
- Syntax Reddit
27:27 - Commenting systems
- YouTube comments
- Comments systems in general
Links * Github * Slack * Discord * Discourse * Spectrum * Reddit * r/reactjs
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
In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 6:39 - CSS Subgrid
8:10 - CSS Houdini
11:20 - CSS features not supported in older browsers yet
- Scrollsnap - IE 11 and up. Lot’s of mobile issues.
- position:sticky - no IE at all
14:24 - NPM tink
- installer-less npm
- Load packages at runtime into a shared cache across all projects
- Intelligently download the parts you need
17:25 - Yarn PnP
- Hard links to eliminate package duplication
- Shared cache across all projects
18:31 - Pika & Snowpack
21:10 - Deno
- New Node?
25:39 - React
- Suspense in more libraries
- Suspense for Server Rendering
- Meteor
- New ownership. v1.9 just dropped with lots of promise for future growth
- Svelte 3
- Vue 3
- Apollo
- Next.js
36:37 - Serverless
- Going to get easier
- Begin.com
- Next.js / Now Functions
38:14 - Gatsby
- A single useQuery (made possible by suspense)
39:36 - Headless CMS Thunderdome
42:20 - Next Gen Frameworks
- Keystone
- Strapi
- Meteor
- Vulcan.js
43:46 - Cypress
- End to end testing
- Currently no Firefox support, but hopeful for 2020
44:21 - Modulz
- Exports to JS component
45:00 - Figma
- Was already amazing in 2019
- Constantly improving and adding new features
- Can import from Sketch
Links * Syntax 109: CSS Grid Level 2 aka Subgrid * CSS Houdini * Interactive Introduction to CSS Houdini * Tweetdeck * Next Generation Package Management * tink * Pika * Yarn PnP * Syntax 212: Pika Pkg * Snowpack * Entropic * Deno * Ryan Dahl - 10 Things I regret About Node.js * https://github.com/denoland/deno * Cloudflare * Hover * Meteor * Meteor roadmap * tiny * Svelte 3 * Apollo * Nextjs * Vue * Begin * Firefox * Keystone * Strapi * Vulcan.js * Prisma * Hasura * Syntax 209: Hasty Treat - Wes Teaches Scott about Keystone.js * Cypress * Modulz * Framer * Figma * Sketch * James Quick YouTube Channel
××× SIIIIICK ××× PIIIICKS ××× * Scott: Govee Thermometer * Wes: Rack Mount Power Bar
Shameless Plugs * Scott: Fullstack React and Firebase - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Wes’ new website, uses.tech — the stack he chose for building it, as well as what it does and how to use it!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:23 - What is uses.tech?
5:33 - The stack
8:13 - Avatars
10:43 - Filtering
15:51 - Github actions
19:25 - Favicon
21:30 - Search
22:03 - Hosting
Links * uses.tech * awesome-uses repo * Gatsby * React * Gatsby Node API * Clearbit API * unavatar * Now.sh * webserv.nl * country-emoji * Andrew Luca * joi * Making setInterval Declarative with React Hooks * Netlify * Algolia
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
In this episode of Syntax, Scott and Wes talk about fitness — how to stay in shape as a developer, nutrition, goals, and more!
DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.Start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it’s going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:42 - Past year reflections
-
Scott
- Tried several different lifting
- Breaking didn’t happen as much, so my cardio took a hit
- I finally found a full body plan / bro split that has been very effective
- Weight belt has really helped my form
-
Wes
-
Overcommitted in 2019
- Feeling great - physically
- Gained about 12 pounds past where I want to be - rough year!
- Noticeable loss in energy when I don’t hit the gym
- DevLifts since November
- Cardio / HIIT up
12:15 - What we’re doing now
-
Scott
- 4 day split
- Chest/Triceps
- Back/biceps
- Shoulders
- Legs
- Abs every day
-
Wes
-
3 days a week
- Set A - Chest and back
- Set B - Legs and chest
- Set C - Legs and back
- Cardio finisher (BLASTERS)
-
At home helpers
-
Kettle bells
- Foam roller
30:32 - Nutrition
-
Scott
- Nothing too hardcore, salads for lunch - not religiously though
- Good dinners
- IF occasionally (e.g. not eating before 10 and not eating after dinner snacks)
- Desert items allowed
-
Wes
-
Macro Tracking - still want to enjoy things
- Low Carb
- High on veggies
- Brussel sprouts
- Green beans
- Salads
- Chickpeas
- Olives
- Still super into fermentation, crunchy + sour + fizzy + spicy
- No sweets either
- Beer is my downfall
41:04 - Supplements
-
Scott
- Not doing anything right now other than high quality protein
- On meds for nerve damage
- Probiotic
- Fish Oil
- Psylluim husk
-
Wes
-
Megafood Men’s Once Daily Multivitamin - they are natural and organic, empty stomach
- Magnesium
- Fish Oil
- Lions Mane
- Ashwagandha
- Shilajit
53:49 - Year Looking Forward
-
Scott
- New gym remodel going to help life
- Yoga once twice a week
- Breaking once a week
- Lifting every day
- Stretching every day
- VR Gaming (I burned 400 cals last night playing Super Hot)
- Goals to dead lift 350, weighted GHR, continue to progress at current rate
- Make cardio a thing
-
Wes
-
Lose a Few Pounds + Energy + consistency
- Kettle Bells in office
- Consistent Gym before life takes a dive
- Lock down macros
- Stretches
- Less beer
- HIIT
Links * HeavySet App * Syntax 020: Fitness, Nutrition, and Losing Weight * Syntax 084: Fitness for Developers * Skinny Taste Recipes * Daniel Tiger * MegaFood Men’s One Daily Multivitamin * Examine.com * Caffeine App * Superhot VR
××× SIIIIICK ××× PIIIICKS ××× * Scott:
+ Fitness Blender
+ Bob & Brad YouTube Channel
+ Jeremy Ethier YouTube Channel
- Wes: TechBoss Torch Lighter
Shameless Plugs * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about a month of using Firefox — what they liked, what they didn’t, and whether or not they’ll keep using it.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 3:42 - Dev tools are really good
19:16 - Browsing experience
22:40 - Setup and switchover tips
26:45 - What we didn’t like
29:57 - Will we stay?
Links * Firefox * Errors in Firefox * Debugging messages in Firefox * Harald Kirschner * GraphQL * 1Password * WhatsApp * Videostream for Chromecast
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
In this episode of Syntax, Scott and Wes talk with Fred Schott about Pika Pkg, a new kind of package registry for the modern web.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:24 - What is Pika?
9:40 - What about peer dependencies?
12:53 - What does migration look like?
17:30 - Are these tools making things easier?
21:25 - What is the Pika Registry?
34:48 - What is the Pika editor?
41:13 - Is it open source?
47:30 - What about security?
Links * Fred Schott * @FredKSchott * Pika * @pikapkg * Snowpack * Pika Builders * Babel * Typescript * Webpack * CSZ * Parcel * Deno * VSCode * Entropic * Homebrew * Plex * Synology NAS * Luke Jackson * Toolsday Podcast
××× SIIIIICK ××× PIIIICKS ××× * Fred: Idle Supermarket * Scott: Theragun * Wes: Emby
Shameless Plugs * Fred: Pika * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about modules in Node — what are they, how they’re different from browser modules, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:06 - How were they done before?
5:11 - How do they work?
7:07 - How to use Modules in Node
9:57 - Gotchas
13:18 - What should you use?
Links * Node * Node Modules * Babel * ESM * Meteor * Keystone * MJS
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
It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more!
Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelancing. Use the coupon “SYNTAX” and get 25%.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages?
5:30 - Q: What makes a font “good”? I stumbled upon haleyfiege.fun/fonts, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective?
9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework?
12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out?
15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load?
21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks!
25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.?
28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription?
39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)?
44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm?
47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work?
Links * Lighthouse * Syntax203: Hasty Treat - What Are Github Actions? * Lighthouse Batch NPM Package * Lighthouse Action GitHub Action * Next.js * haleyfiege.fun/fonts * Radnika Next * Sipsby * Babel * Shop Talk Show * CodePen Radio * Heist Podcast * Mixergy * The Dream * React Podcast * Indie Hackers * Akimbo * Command Line Heroes * Blazor * Braintree * Syntax055: Hasty Treat - User Role Systems * Clean Code concepts adapted for JavaScript * codecademy * Javascript30 * CakePHP * Drupal * WordPress
××× SIIIIICK ××× PIIIICKS ××× * Scott: Aerial America * Wes: Streamer for Chromecast
Shameless Plugs * Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Wes teaches Scott about Keystone.js — best practices, things to avoid, why you should check it out, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:10 - What is Keystone?
7:38 - How do you handle mutations?
14:26 - What’s the hosting situation like?
19:34 - Shortcomings
21:40 - Plugins
Links * KeystoneJS * Prisma * Hasura * Next.js * GraphQL * Stripe API * WordPress * ThinkMail * Drupal * Redux * Now * MongoDB * MongoDB Compass * pm2 * TypeScript * Apollo Helpers * GraphCool
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
In this episode of Syntax, Scott and Wes do a 2019 year in review — the most popular Syntax episodes, what they learned, some personal updates, plans for next year, and more!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:40 - Plans for 2020
- Syntax Live March 2019
- Plans for 2020
- Twitter has done really well for @syntaxfm
- Community feels great
9:20 - Top 10 Syntax episodes of 2019
- Syntax162: The Fundamentals - JS
- Syntax120: Gatsby vs Next
- Syntax158: The Fundamentals - HTML + CSS
- Syntax126: Bootcamps vs School vs Self-Learning
- Syntax138: What’s New in Web Development
- Syntax130: The VueJS Show (Scott teaches Wes)
- Syntax146: CSS the Cool Parts
- Syntax174: How to Build an API
- Syntax154: SVGs with Sara Soueidan
- Syntax106: A Look Forward to 2019
25:17 - Personal stuff
-
Scott
- Brooklyn Tolinksi
- 2019 was really tough for me
- Level Up courses for 12 months
- Huge changes to my production values and office
- Huge changes to LUT codebase (React hooks, Typescript, Next.js, Mongoose)
-
Wes
-
New Baby in June / 3 months Paternity Leave
- Bought a cottage
- Hardest course to make was Beginner JS — it was a slog, hard to stay motivated at times, with 80 hours of recording alone
- Course Platform re-write (Next.js)
39:17 - Stuff we learned
-
Scott
- Better speaker
- Lots of TypeScript
- Better debugging
- Hooks
- Svelte
- General improvement in JS writing and programming skills
-
Wes
-
Really good at Vanilla.js DOM API
- React Hooks
- Suspense
- Audio Visualization
- Shape Detection API - Faces, Barcodes, Text
- Headless CMS: Prismic, Sanity, WordPress GraphQL, Keystone.js, Hasura
- Very good understanding of the nitty gritty of JS (closures, objects, this, new keyword, classes, etc.)
Links * Reactathon * freeCodeCamp Podcast * CSS Houdini * Syntax109: Hasty Treat - CSS Grid Level 2 aka Subgrid * Syntax092: React Hooks * Dev Mugs * TypeScript * Svelte * Prismic * Sanity * WPGraphQL * Keystone.js * Hasura
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Dream Podcast * Wes: Synology DiskStation DS918+
Shameless Plugs * Scott: React & TypeScript For Everyone - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about launching courses — a behind-the-scenes look at their platforms, processes, best practices, and what it takes to get a course published.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:13 - Scott’s process
8:48 - Wes’ process
20:57 - Additional tips
Links * Beginner Javascript * Level Up Tutorials * Figma * Tim Smith * YouTube * Vimeo * HandBrake * Screenflow * Backblaze B2 * VS Code
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
In this episode of Syntax, Scott and Wes talk with David K Piano about state machines, CSS, animations and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:30 - Who is David K Piano?
4:00 - Did you have a background in animation prior to web development?
5:45 - How did you build the CSS Responsive House on Codepen?
8:36 - What are state machines?
14:47 - How does it relate to programming?
17:20 - How do you go about changing states?
20:20 - Is this similar to how RxJS works?
21:40 - How would state machine work in CSS?
29:07 - Perspective in CSS
34:47 - How do you like Twitch vs YouTube?
35:48 - How do you add XState to a current project?
41:42 - Visualizing sate machines
46:15 - Do you have a day job as well?
Links * @davidkpiano * David’s Codepen * CSS Responsive House * InVision * Framer * Figma * XState * RxJS * React * Apollo * Vue.js * Javascript30 * Tailwind CSS * GROQ.dev * Keyframe.rs * Babel * Twitch * Keygrame.rs Patreon
××× SIIIIICK ××× PIIIICKS ××× * David: Lynn Fisher * Scott: The Big One * Wes: American Factory
Shameless Plugs * David: XState and Keyframe.rs * Scott: React and Typescript for Everyone - Sign up for the year and save 25%! * Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about the new 16" MacBook Pro and how it performs as a web development machine.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:24 - Why did the old ones suck?
4:43 - What did we get and why?
-
Wes
- 32GB RAM
- 2.3GHz 8-core i9
- 1TB SSD
-
Scott
-
64GB RAM
- 2.4GHz 8-core i9
- 8gb AMD Radeon Pro 5500M
- 2TB SSD
9:40 - Is it still the best?
- The MacBook Pro is the workhorse of developers
- Keyboard is amazing
- Screen is even bigger
- Esc key is back
- Touch ID is very fast
- Heat is good
- Speed is very fast. Great for video editing, recording, etc…
- Trackpad feels great
15:18 - Still not good:
- Webcam sucks
- Ports
16:09 - Y NAWTS:
- Why not Windows?
- Why not Hackintosh?
- Why not iMac?
Links * 16" MackBook Pro * Surface Book * Alfred * CalDigit TS3 Plus Thunderbolt 3 Dock
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
In this episode of Syntax, Scott and Wes bring you an entire episode of sick picks — the 2019 gift guide!
Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:48 - Gadgets
- Apple Watch
- Sabrent Qi Wireless Charger
- Sony wh-1000xm3
- Bose QC35 II
- Sabrent 8-in-1 hub
- Satechi Aluminum Multi-Port Adapter
- Anker 5-in-1 quick charge hub
- 3 in 1 charge cable
- Elgato Cam Link
16:59 - Smart Home Automation
- Google Nest Home Hub
- Wyze cams + plugs + bulbs
- Ecobee thermostat
- Google Chromecast
- Google Home
- Smart Powerstrip
27:14 - Laptop Stands
- 12 South
- Rain Design mStand
- Roost
- Nexstand
29:59 - Phone Cases
- RhinoShield
30:52 - Mechanical Keyboards
- Ctrl Keyboard
- Keychron K1
- Code Keyboard
34:34 - Mice
- Logitech MX Master Mouse
35:27 - Tripods
- Lammcou Flexible Tripod
- GorillaPod
37:04 - Cameras
- Sony a7 III
38:06 - Experiential
- Massage
- Float
- Knife Skills Class
- Butcher Class
- Cooking Class
40:08 - Food
- Cold Brew Coffee Maker
- Prep Naturals Glass Meal Prep Containers
- Blue Top Creamy Buffalo
- Heartbeat Hot Sauce Pineapple Habanero
- Maldon Salt
- Weck jars
- Thick sheet pans
- Precut parchment
- Instant Read Thermometer
- Umai Dry Steak Aging
- Charcuterie bags
- Mesh produce bags
- Beeswax wraps
- Yeti drinkware
49:24 - Grooming & Wellness
- Theragun
- Foam roller
- Power Blocks
- Japanese nail clippers
Links * Anker * Deal Extreme * Prismic YouTube Channel
Shameless Plugs * Scott: Level Up Pro - Sign up for the year and save 25%! * Wes: Beginner Javascript 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
In this Hasty Treat, Scott and Wes talk about Gihub Actions — what they do, why you might be interested in them, best practices and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 2:30 - What are Github Actions?
4:40 - Examples of Github Actions
6:02 - Will Github Actions replace continuous integration services?
9:19 - Libraries
Links * Codeship * Github Actions * nextdiff * Figma Action
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
It’s another potluck! In this episode Scott and Wes talk about tabs vs spaces, coding music, SEO, React vs Angular vs Vue vs Svelte, Rapping, Soy sauce and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:18 - Q: I am potentially starting a job as an Angular developer (modern angular). But I am scared that, even though I will continue to stay on the cutting edge in my personal projects, using Angular in my job will make it harder to get a job after that in more modern tech like React. Do you think there is any truth to this?
5:30 - Q: Yo guys, saw soy sauce stirred up quite the controversy…lol. What are some big developer disagreements you guys have?
11:40 - Q: In JavaScript, ! == is the same as ! =, but I was told there was a slight technical difference. I cannot find what the difference is. Could you elaborate on this?
14:17 - Q: What are the rules on using another dev’s repos as a boiler plate? Example: Using Wes’s advanced react starter files to utilize his set up for my own project?
15:35 - Q: What music do you listen to while you code? As an extension, could we crowd source a dev playlist and host it on Spotify?
20:26 - Q: How do you go about working with different technologies and stacks (front-end related) when you have to accommodate for the client or other developers’ biases towards specific things. For example, you have to learn a different set of tools because in a new project someone doesn’t like what you use and says X is a better tool for the job.
23:11 - Q: I know there is no magic SEO silver bullet, but what are some best practices for implementing SEO into your website or web application?
27:26 - Q: When dealing with responsive sites, how do you go about respecting the request in iOS safari to show desktop sites?
28:45 - Q: I get confused about your usage of the word ‘app’. You don’t make iPhone or Android apps, but you often through the word around like “I would create a Node App”, or “Some of the apps I made” etc. Is it just website applications, or how exactly should I interpret “Node App” or “Web App” compared to a mobile app?
31:36 - Q: I wanted to ask your thoughts on transform class properties plugin from Babel? Heard the podcast on react state, I found it mind blowing when setting everything up without constructors.
36:53 - Q: I am a beginner, I have mostly learned front-end so far (HTML/CSS, JavaScript, React). Should I first get pretty good at these before I start learning some back-end? Or, should I actually start learning back-end now and have a basic knowledge of both front-end and back-end?
39:00 - Q: If for some reason React died today and you were no longer able to use it, which framework would you pick up and use full time? Would it be Vue or Angular? Or something new like Svelte?
40:11 - Q: What habits, strategies, or specific tools do you rely on to prevent your hard drives from filling up with useless files?
find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
47:20 - Q: Which JS library is most like the Tesla Cybertruck?
Links * Tailwind CSS * Syntax Spotify Playlist * Head Bob Spotify Playlist * Retired Scenester Metalcore Spotify Playlist * DaisyDisk * CleanMyMac * Backblaze * Tesla Cybertruck * RxJS * SynthWave '84 VS Code Theme * RoboCopJS
××× SIIIIICK ××× PIIIICKS ××× * Scott: Keychron K1 Mechanical Keyboard * Wes: Everlane Uniform Crew Neck
Shameless Plugs * Scott: Black Friday Sale on All Courses * Wes: Beginner Javascript 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
In this Hasty Treat, Scott and Wes talk about new CSS Logical Properties.
Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io.
Show Notes 2:27 - The Box Model
5:32 - Grid and Flexbox
10:17 - Widths and Heights
11:20 - Text Align
Links * New CSS Logical Properties! * Elad Shechter * Adam Argyle
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
In this episode of Syntax, Scott and Wes celebrate 200 episodes of Syntax with a live Q&A!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 2:27 - With 2020 around the corner, what are your wild predictions for the the future of web design and development?
8:44 - Are site builders going to replace us as web developers?
13:30 - What does the future look like for Syntax?
19:01 - What emerging tech advancements most excite you for the next 5-10 years?
23:27 - What is the future of web hosting? What should hosting companies do differently?
27:40 - Why do you set your base font size to 10px?
32:40 - If you could go back in time, what would you say to yourself?
36:29 - How do you make an iFrame go 100% high?
39:10 - What’s one thing you see developers stress out about for no reason?
44:46 - Do you feel overwhelmed with creating new content when there’s so much already out there?
48:42 - How do you stay sane with your naming conventions?
51:15 - If Gatsby is best for static websites and Next is best for apps, how does Create React App compare?
54:30 - How much is too much or too little magic in a framework or library?
58:11 - Does Kait ever get tired of you buying a bunch of stuff?
61:45 - What is your office setup?
64:01 - How long until we can use Suspense for data loading with libraries other than Relay?
Links * Pigeonhole * Keystone * VulcanJS * NextJS * Gatsby * Meteor * Wix * Squarespace * Modulz * Figma * Sketch * Framer * Netlify * dnsimple * Digital Ocean * AWS * Heroku * Syntax016: Rems vs Ems * Seth Godin * Notion * Laravel * Blaze * Relay * SWR * Suspense * Project Farm YouTube Channel
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Missing Crypto Queen * Wes: Bosch Wiper Blades
Shameless Plugs * Scott: React and Typescript * Wes: Beginner Javascript * Black Friday Sale - Get 50% off! + Scott’s Courses + Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about making courses — techniques, best practices, things to avoid, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:07 - Validating your ideas
4:44 - Generating ideas
6:38 - Figuring out which ideas will stick
10:00 - Show your expertise
14:02 - Pay attention to what’s popular
15:50 - Collect email addresses
Links * Microsoft Excel Stream Highlights * Refactoring UI * Adam Wathan * Steve Schoger * Scott’s Svelte 3 course * Wes’ Sublime Text articles
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
In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Prismic - Sponsor Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax.
Show Notes 2:43 - Gather info
- What is this thing trying to do?
- Use tools
- DevTools are your best friend during this phase
8:01 - Know where to look (and use tools)
- Dev tools for client side
- Error logs
- Sentry
- LogRocket
- The most experienced people in any field know how to ask the right questions.
- Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve.
10:00 - Look at the end game
- What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture.
13:17 - Read Again
- Error logs provide the best clues. Read them closely.
- Actually read your code — don’t skim it.
- Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts.
18:08 - Make it simple (break it into smaller parts)
- Limit the number of inputs and outputs
- Get it working in a limited capacity (e.g. safe mode, Codepen, etc.)
- Comment out major sections of code until you have a working example
- Does this problem exist outside of the framework?
- Does this work in a clean environment?
25:35 - Take yourself out of your environment
- You should be able to take a look at the problem at all zoom levels
- Does it work locally but not on the server?
- Does it work in other browsers?
27:32 - Stay calm
- It’s easy to get nervous or worked up when the stakes are high
- It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath
- Take a shower, lift weights (seriously)
30:14 - Talk it over
- Getting the perspective of another developer can be invaluable
32:28 - Make things obvious
- Use debugger or label logs — don’t let it be ambiguous
- For CSS bugs, use primary colors to make things stand out
- Use the right tool to make the problem stand out
- Layers for CSS issues
- Network for network issues
- Performance tab (etc.)
35:12 - Use Git correctly to free up your techniques
- If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix.
36:10 - Don’t jump at solutions
- Take the time to fully dissect the problem
- Question you assumptions
- It can’t possibly be a problem with ____. Well maybe it is.
- Wes once spent hours trying to diagnose a check engine light when the gas cap was lose.
43:51 - Get good at pattern matching
- This comes with experience
- When did this problem start?
- Did we deploy any code? Did we change any logic?
44:54 - Get good at googling
- Being able to describe your problem is key.
- Search the error from Firefox
Links * DevTools * Sentry * LogRocket * CodePen * Syntax 154: SVGs with Sara Soueidan * @walpolea * Syntax 152: Debugging Tools + Tips * @bowlendev * @dan_abramov * Ryan Dahl on creating Node.js * @LaurieonTech * Firefox * DuckDuckGo
××× SIIIIICK ××× PIIIICKS ××× * Scott: Jeremy Ethier Youtube Channel * Wes: Marpac Rohm Sound Machine
Shameless Plugs * Scott: Typescript in React Course - Sign up for the year and save 25%! * Wes: Beginner Javascript 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
In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.
Sizzy - Sponsor Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co.
Show Notes 4:08 - Use a system
4:50 - Use overrides and cascading
- Embrace the cascade
- Don’t rewrite the same CSS over and over again
- Understand why scoping is good
9:07 - Nail down typography early
- You can always revisit if it isn’t what you need
10:36 - Pick a pattern and stick to it
- BEM
- Functional CSS
- CSS in JS
14:39 - Don’t style based on element type (kind of) — a class should describe the component
17:09 - Good naming techniques
- Describe what it is, not what it looks like
- Thing
- ThingChild
- ThingChild-modifier
- ThingChild
- Scale sizes (e.g. s, m, l, xl)
21:43 - Other tips
- Group like CSS together
- Chunk into different files
- Write good comments
- CSS properties FTW
Links * Stylus * Webpack * Parcel
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
In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 6:35 - Our backgrounds in design
12:41 - Foundations
- Consistency makes a big difference
- Use “training wheel” tools until you are confident
- Always work within a system
- Less is more - subtle is better
19:39 - Color
- Color theory
- Complementary colors and shades
- Stick to color pallet generators until you are good enough
28:51 - Spacing
- More spacing than you think you need
- Vertical rhythm
- Letter spacing: -1px
- Consistent margin and padding
34:47 - Typography
- Sans vs serifs
- Finding fonts
- Use proven combinations until you know your way around
41:49 - Interaction
- Design for all states (e.g. standard, visited, active, hover, etc.)
- Animations should be quick
- Interactions should make sense
45:04 - Concerns beyond visuals
- Accessibility via color contrast
- Thin fonts and light grey are awful
- Think about the poor Windows users
48:47 - Inspiration + Resources
- Take inspiration from the best — you’ll find your own voice after enough work
- Go easy on trends - blobby characters with purple hair
- Take a trip around the world wide web
- Stripe
- Dribbble
- Site Inspire
- codrops
- Refactoring UI
Links * Designer Starter Pack - Andrea Crofts * LastPass * Colour Lovers * Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google * Bloomberg * Dropbox * FontPair * FontJoy * Figma - Google Font Pairings * Type Scale * Creative Market * Radnika Next * Stripe * Dribbble * Syntax 72: Accessibility * Firefox * Site Inspire * codrops * Refactoring UI * Adam Wathan * Steve Schoger
××× SIIIIICK ××× PIIIICKS ××× * Scott: Reelgood * Wes: Magnesium
Shameless Plugs * Scott: FullStack React with NextJS - Sign up for the year and save 25%! * Wes: Beginner Javascript
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
In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 2:50 - Buying a domain
10:47 - Selling a domain
13:50 - Transferring a domain
Links * who.is * GoDaddy * JavaScript.co * BeginnerJavaScript.com * LearnNode.com * BeginnerJS.com * KitBos.com * Cloudflare * Learn.li * Learnli.co * Escrow.com * Hover * Bob.com * Sedo.com * Park.io
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
It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more!
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so?
10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion?
13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it?
15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior?
19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients?
21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees.
24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic and on privacy related to online services in general?
29:08 - Q: What are your thoughts about using a CMS that uses flat files vs one that uses a traditional MySQL or Postgres database for a company blog that won’t have insane traffic? We’re currently evaluating Grav CMS and Craft CMS.
32:17 - Q: Have you used data attributes as custom elements in CSS and JS?
37:32 - Q: Why do so many people jump on styled-components/CSS in JS? Are these all people who have never used Sass/SCSS?! It seems like such a PITA to get Sass working with either of these. It feels like coding tables vs HTML 5. To me it seems like a step backwards.
44:26 - Q: When do you, if ever, reach for a component library, like Material or Bootstrap? Currently working a corporate job where it’s almost expected to use one of these for all internal applications. I usually prefer to make my own, but I’m wondering if I’m just making my life more difficult than it needs to be? Any advice?
48:30 - Q: Could you guys chat about Git clients and which ones you guys use and why? Or are you guys hardcore terminal geeks?
Links * Gatsby * Next.js * Bling.js * Syntax 118: The Smart Home * Grav CMS * Craft CMS * prismic * Sanity * Contentful * Tiny CMS * Forestry * Airdale Chemical * Material * Bootstrap * VS Code
××× SIIIIICK ××× PIIIICKS ××× * Scott: HeavySet - Gym Workout Log * Wes: Baroness Von Sketch
Shameless Plugs * Scott: FullStack React with NextJS - Sign up for the year and save 25%! * Wes: Beginner Javascript 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
In this Hasty Treat, Scott and Wes bring you more web dev horror stories!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:26 - Perf Woes
3:42 - Always Backup Your Backups
4:54 - Kill Children
6:03 - Robots Don’t Eat Food
8:32 - Email Goof Up
9:44 - Hundreds of Thousands of Date Issues
10:46 - Spooky August
12:32 - You’re up to .bat
13:17 - Printed Code
15:12 - ThinkGeek
16:12 - It would take a while to Ketchup on all these orders
17:05 - This story makes me want to stick my head in async
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
In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 2:09 - Scott’s Disastrous Git Clean
4:35 - Magic Updates the Gathering
8:52 - YAAAAS
9:37 - Token Trouble
12:16 - jQuery Plugins
15:22 - Success!
18:00 - Parental Advisory
21:47 - Students Changing Grades
22:46 - Lorem Sh!tsum
26:22 - Drowning in a Waterfall
28:53 - Magneto Upgrades
30:00 - JOHN CENA
33:24 - Migration Migraine
35:39 - Primary Key Nightmare
36:26 - The $20,000 YAML formatter
Links * Adam J. Sontag * jQuery * GitLab * Gitlab Database Incident * Magento * Meteor
××× SIIIIICK ××× PIIIICKS ××× * Scott: Dyson Hand Vacuum * Wes: /r/ AbsoluteUnits
Shameless Plugs * Scott: Fullstack React with JS9 - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 1:59 - My device history
- OG Droid → Nexus → Pixel
- Misconceptions of android
- It’s Windows for phones
- It’s cheaper or not as nice
5:03 - Why switch?
6:39 - Who wins what?
-
Android
- Homescreen
- Low light photography
- Usability
- Squeeze assistant
- Google search integrated everywhere
- Search
- Keyboard
- Notification
-
iOS
-
Apps
- Performance
- Camera overall
- Device quality
- Fun stuff
- Haptics
Links * 1Password * LastPass * Gboard
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
In this episode of Syntax, Scott and Wes talk with Brad Touesnard of Delicious Brains about migrating, deploying, and hosting WordPress.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Hasura - Sponsor Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at hasura.io to try it out in 30 seconds!
Show Notes 3:50 - Why did start Delicious Brains?
5:25 - What plugins does Delicious Brains make?
11:40 - Migrating WordPress
16:50 - Migrating databases
24:20 - How do you do version control with WordPress?
37:06 - What’s the easiest way to deploy and host WordPress?
40:23 - What are some examples of managed WordPress hosts?
46:58 - What does your deployment process look like from beginning to end?
50:22 - Thoughts on headless WordPress
53:12 - Is serverless WordPress a thing?
Links * Delicious Brains * WP Migrate DB Pro * WP Offload Media * WP Offload SES * SpinupWP * Heroku * Now.sh * WP Engine * Flywheel * Advanced Custom Fields * Composer * WP Packagist * WordPress.org * React * Laravel * Pagely * Kinsta * GoDaddy * WordPress.com * SiteFround * Buddy * Digital Ocean * Laravel Forge * npm * Codeship * Gatsby * Laravel Vapor * Installing via Composer * WordPress deployment workflow * Managing your WordPress site with Git and Composer
××× SIIIIICK ××× PIIIICKS ××× * Brad: Teppanyaki Grill * Scott: Succession and The Righteous Gemstones * Wes: Magnatiles
Shameless Plugs * Brad: All Products * Scott: Svelte For Beginners - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:20 - What is SSR?
4:16 - Why SSR at all?
8:39 - Platforms that do SSR out of the box
11:18 - Gotchas
- useLayoutEffect
import { useEffect, useLayoutEffect } from 'react'
const useIsoLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect
export default useIsoLayoutEffect
18:20 - Tools
Links * Next.js * Gatsby * Webpack * Parcel * Meteor * React * NoSSR component * Syntax 127: Hasty Treat - React Suspense
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
In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:53 - Requests and responses
9:21 - What is a server?
10:33 - Ports
13:50 - Database connection and interaction
15:16 - Cookies and sessions
15:48 - Writing files and directory permissions
19:34 - Headers
22:13 - Error Handling
22:50 - Logs
25:04 - Async data handling
26:33 - Routing
30:44 - Mime types
36:26 - Authentication
37:49 - Environmental variables
40:37 - Deployment
43:24 - Advanced
Links * GraphQL * Node * React For Beginners * Next.js * Meteor * Papertrail * pjax * jQuery * Github * iMazing HEIC Converter * Now.sh * Netlify * Twitter streaming API * B is for Build
××× SIIIIICK ××× PIIIICKS ××× * Scott: Samcrac YouTube Channel * Wes: Wyze Plugs
Shameless Plugs * Scott: Svelte For Beginners - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about their experiences with float tanks!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 2:28 - What is a float tank?
6:47 - What are the benefits?
8:50 - How did you feel during the float?
17:28 - Would you do it again?
Links * The Joe Rogan Experience
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
It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time?
9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application?
13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach?
15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use.
23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail?
27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks to be made. I’ll handle some minor deployment issues without billing, but I struggle with where to draw the line. What suggestions do you have?
35:19 - This question is for Wes. I live in Central New York, and every time I go on the highway heading north or south I see several Ontario license plates. Where are ya’ll going all the time? Is there a secret Canadian spot down here?
38:20 - Each time I re-open an old project I lose so much time with npm dependencies being outdated and it drives me mad! I’m starting to dislike npm and everything around it, but is it npm only? How does other languages like php, python or GO handle this mess of dependencies? Are we better today than yesterday and I’m just complaining about nothing?
43:50 - Which podcast player do you use (Android, PC, or other phone/tablet), and why? Where do you listen to them?
Links * Flexbox * React Native * CSS Grid * Normalize * iTerm2 * zsh * Fish * Hyper * Wes’ Command Line Power User Course * Overcast * Pocket Casts * Planet Money * Joe Rogan * The Indicator
××× SIIIIICK ××× PIIIICKS ××× * Scott: Garmin vivoactive 3 * Wes: Untitled Goose Game
Shameless Plugs * Scott: Svelte For Beginners - Sign up for the year and save 25%! * Wes: Wes’ Instagram
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
In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, best practices, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:06 - Wes:
- Features are logged into software (Github, Jira, etc.)
- I use a Kanban board - I bubble them up and down in the order in which I want to release them
- I don’t plan for Q1, Q1, etc…
- Tear off an issue, tackle it, test and deploy.
10:39 - Scott:
- All issues/features get a priority tag (e.g. p1 → p4) regardless of the system
- Bugs go in Github
- Features and platform improvements go in Notion
- Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.)
Links * Github * Trello * Kanban * Jira * Canny * Notion * Getting Things Done
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
In this episode, Scott and Wes talk with Etienne Lemay, developer of Missive, about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 0:57 - What is Missive?
6:10 - What is the desktop app built in?
9:44 - Did you use any particular libraries for the front-end?
11:44 - How are you managing state?
13:37 - Is it challenging to do all of this in JS?
15:07 - What was the catalyst for the “multi-conversation swipe”?
21:32 - What is the mobile app built in?
24:00 - What are the advantages of Cordova?
30:30 - How do you manage offline/syncing/etc. so well in a JS app?
34:56 - How do you test it?
36:52 - Have you looked into Cypress?
39:35 - How do you style it?
Links * @EtienneLem * Missive * Spark * CoffeeScript * Backbone * Redux * Typescript * Electron * Webpack * Javascript30 * Cordova * React Native * Fastlane * Amazon S3 * Cypress * Sass * TailwindCSS * Svelte * Syntax 176: Building Steam Games with React
××× SIIIIICK ××× PIIIICKS ××× * Scott: Disgraceland Podcast * Wes: Wagner 590 Spray Gun * Etienne: Prettier
Shameless Plugs * Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! * Etienne: Missive
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
In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, best practices, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:03 - Habits we’re trying to build
- Scott
- Focus on one project at a time
- Alfred tasks to quit apps and block sites
- Not being efficient with my time
- Daily todo lists and utilizing calendar
- Too much screen time
- Listening to music in the background instead of having the TV on
- Focus on one project at a time
- Wes
- Flossing
- Mindless context switching
13:37 - General strategies for building habits
- Make them trackable
- Easy enough to not ignore them
- Quantifying them is key
- Make them small enough
- Be accountable
- Tell other people your habits and have them remind you about them
- Replace bad habits with good things
- Design a sticker
- Reply to three emails
- Drink some water
- Celebrate your wins productively
- Keep the streak alive
- Can’t do x until y is done
Links * uhabits * Done * Loop * K-Safe * Alfred * Codepen * Atomic Habits * The Power of Habit
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
In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 3:03 - Backend
- Express
- Node
- GraphQL
- MongoDB
14:45 - Frontend
- React
- Next.js
- Styled components
- Stay as close to real CSS as possible
22:39 - Deployment process
- Serverless
- Now
- Ideally one app that handles everything
28:38 - Email
- Syntax Ep 32: Designing, Templating, Inlining and Sending Email
- mjml
- Juice
- Inky
- Nodemailer
- Postmark
- Mailjet
- Mandrill
- Get everyone set up and working in two different systems, so you can switch easily if something goes wrong
33:32 - Users / Auth / Cookies / Permissions
- Use something a pre-existing package or service rather than role your own (though it can get expensive quickly)
- Passport
- Auth0
- accounts-js
38:48 - Images
- Cloudinary
- imgIX
41:50 - Other things to be aware of
- Handling cash
- Stripe
- PayPal
- Braintree
- Recurly
- Queueing
Links * Ruby on Rails * Django * Meteor * MySQL * PHP * Postgres * Mongoose * Drip * ConvertKit * Feathers * David Luecke * Tweetdeck * Next.js * react-router * Reach Router * Gatsby * Digital Ocean * Heroku * Redux * Svelte * Gridsome * Mailchimp
××× SIIIIICK ××× PIIIICKS ××× * Scott: K-Safe * Wes: Bon Appetit YouTube Channel
Shameless Plugs * Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! * Wes: Flexbox.io 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
In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:16 - Alfred workflows
9:32 - Smart home routines
13:16 - Bash scripts & aliases
18:43 - Other
Links * Alfred * Wyze Cam * Google Home * Drip * Divvy
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
It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)?
11:30 - Q: What is your opinion on AWS Lambda functions?
15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date?
21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship?
30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job?
36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’?
41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax?
44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector?
46:39 - Q: What the best way to handle media queries in Gatsby with styled components?
Links * Webpack * Parcel * Gulp * Codeship * Semaphore * r/reactjs * r/webdev * Wordpress * Upwork * Fiverr * Svelte * Syntax 173: Hasty Treat - Wes & Scott Look At Svelte 3 * Firefox CSS Grid Inspector
××× SIIIIICK ××× PIIIICKS ××× * Scott: DIY Air Filter + Box Fan + Air Filter * Wes: Ripride with Andy Roy - Episode 6 with Steve-O
Shameless Plugs * Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 1:55 - The rules of the game
We pick a TLD from a list, and the other person needs to guess:
- Is it for a country or business? -5 points
- What country, business, or type of business is it for? -5 points
- How much per year does it cost to register? You may also say “unregisterable” +/- off by $$
- is scott.___ and wes.___ available? -10 for each
5:40 - .BO
7:51 - .BZH
9:50 - .BANANAREPUBLIC
11:15 - .BABY
14:04 - .KR
16:09 - .MOTO
17:25 - .AW
19:16 - .IM
Links * 101Domain
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
In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 5:42 - Recording
-
Wes:
- Screenflow
- Uberlayer
- Loopback
- Heil PR40
- Heil PL-2T
- dbx 286s
- Focusrite Scarlett 2i2
-
Scott:
-
Screenflick
- iShow HD
- Divvy
- Principal for Mac
- EV RE-20
- dbx 286s
- Focusrite Scarlett 2i2
- Sony a7 III
- Logic
33:04 - Editing
-
Wes:
- Screenflow
- Speed up slow typing
- Edit out some goof-ups (but not all)
- Edit immediately after recording so I’m in the same headspace and can easily re-record
-
Scott:
-
Hire a video editor
- Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think
- Normalize audio
- DaVinci Resolve 16
42:31 - Hosting
-
Wes:
- Wistia
- Vimeo
- Rev
- Backblaze
- Amazon S3
- My own course platform, with additional controls added via React
-
Scott:
-
YouTube
- Vimeo
- Plyr Video Player
- Backblaze
- Amazon S3
- Custom course platform
52:46 - Common Questions
Links * Syntax 014: Our Stacks Explained * Adobe Premier Pro * Figma * VS Code * Audio-Technica AT2020 * Blue Bluebird * BSW * Sweetwater * Tim Smith - Video Editing
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hyperdrive * Wes: PicQuic Screwdriver
Shameless Plugs * Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - Sign up for the year and save 25%! * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:43 - Servers need to be started and baby sat
4:48 - There is no built-in file system based routing
6:34 - Some "gotchas"
7:02 - Functional programming
8:17 - Async vs sync
11:11 - Event lifecycles
12:09 - Dependencies
14:17 - Keyed arrays
Links * Wes’ tweet thread * Forever * PM2
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
In this episode, Scott and Wes talk with Drew Conley about building games with Javascript.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:58 - What is Danger Crew?
5:25 - Did you have a background in game dev before this?
8:36 - What were the initial resources you went to to make a game in React?
10:27 - How much of it is Canvas?
13:06 - What other libraries are you using?
14:00 - How did you lay out the environments?
16:35 - How is text rendered?
22:40 - How did you do all of the animation?
26:08 - What performance issues did you run into?
27:31 - How do you handle user states and saves?
29:21 - Is there any server side aspect?
30:42 - What was the process for creating the level editor?
34:38 - How did you publish the game / wrap it as an executable to sell?
38:16 - How do you update it?
39:43 - How difficult was creating the game logic?
41:20 - The dev theme in the game is super prominent, did that make working on it more fun?
Links * Steam * Danger Crew * aseprite * Buy Danger Crew * Drew Conley * Pixels to SVG * GameMaker * Making an editor * Electron
××× SIIIIICK ××× PIIIICKS ××× * Drew: Strange Planet Instagram * Wes: MX Master Config Tweet Thread * Scott: Figma
Shameless Plugs * Drew: Danger Crew * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! * Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify
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
In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:54 - What is the difference between NULL and undefined?
5:40 - What is short circuit evaluation in JS?
7:25 - What is use strict?
9:07 - What is the only value not equal to itself in JS?
10:36 - When would you create a static class member?
11:54 - What is a pure function?
13:08 - What is JSONP?
14:24 - Describe the layout of the CSS box model?
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
In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Show Notes 2:15 - How do you build an API from scratch?
3:54 - Choose an API type
- REST
- GraphQL
8:15 - Setup some sort of server that will accept requests and send responses
- Express
- Koa
- Meteor
11:11 - Document the endpoints
- What is the end point
- What parameters are required
- Filters
- Sorting
- Headers required
- What you get back when you hit this endpoint
- Any request limits
- Examples in common languages
- JS
- PHP
- Ruby
21:20 - Naming
- Make it obvious
27:39 - Securing
- Only accept requests from logged-in users
- oAuth
- Cookie/Session
- jwt
- API key
- CORS
- Check roles - access level
- Syntax 055: Hasty Treat - User Role Systems
32:42 - Protecting
- Rate limit
- Whitelist / blacklist
- Cloudflare
36:00 - Write resolvers
- Modify data if needed
- Send back the data requested
- Send back the correct HTTP code
- Log what happened
37:56 - Tools
- Postman
- Swagger
Links * Stripe
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hoax Podcast * Wes: Solar Lights
Shameless Plugs * Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more!
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 2:16 - What is Svelte?
11:32 - Sapper
13:05 - Svelte Native
14:58 - Questions we have
- What’s the Typescript story here?
- How hard would it be to convert a large React app to Svelte?
- Will Svelte be able to capture the market share it needs to grow and compete?
- Would you (Wes & Scott) use this?
Links * https://svelte.dev/examples#hello-world * Mustache * Webpack * Rollup.js * Next.js * Sapper * Svelte Native * React Native * Svelte - Typescript support * Rethinking Reactivity
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
It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis.
4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up.
9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.).
13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project?
18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :)
22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it!
26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well.
29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project?
34:15 - Q: Do you plan to launch a Syntax.fm app?
45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation?
Links * Develop Denver * AWS * Zeit * Heroku * CircleCI * Buddy.works * Travis CI * Gitlab CI * Kubernetes * VSCode * Typescript * Blazor * Linkedin
××× SIIIIICK ××× PIIIICKS ××× * Scott: VIVO Premium Heavy Duty Arm * Wes: AmazonBasics Pro-Style Spring Sprayer Kitchen Faucet, Oil-Rubbed Bronze
Shameless Plugs * Scott: LevelUpTutorials Pro - Gatsby Ecommerce * Wes: All Courses - Beginner JS 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
In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:40 - Create React Library
6:55 - Documentation libraries
10:54 - What I’m building
13:13 - Linking library to projects
14:52 - Improvements and community thoughts
Links * Rollup * testing-library/react-testing-library * transitive-bullshit/create-react-library * leveluptuts/fresh * How To Make a React Component Library - Making A React Library * React Styleguidist * Storybook * Docz * DocSource * npm-link * Yarn * wesbos/dump * wesbos/Waait
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
In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:38 - What is state?
4:58 - What kind of things are kept in state?
- Data
- Temporary client side data
- From forms, button clicks, etc.
- Cached server data
- Data from API
- Temporary client side data
- UI status
- AKA isModalOpen
- isToggled
12:48 - Global state vs. Local state
- Ask yourself: does the data need to be accessed outside this component?
- If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.
- Do you count Apollo API calls as global state?
21:15 - Managing Local state
- useState, setState
- Passing state & update functions down
- State machines
31:12 - Approaches to Global state
-
Redux
- Complicated, hard to learn
- Very useful, organized and structured
- Actions, reducers and more
- Time traveling do to nature of store
- Immutability
- Tons of Redux based hooks libs
-
Mobx
-
Based on Observables
- An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.
-
Context
-
Functions just work and update global state.
- Downside is there are no fancy tools
-
Apollo
-
Apollo quires for data in global cache
- Apollo client for global UI state
- Not quite there, isn’t super elegant
Links * Thinkso * Learn Node! * Meteor Session * xstate-react * React Context * Mobx * easy-peasy * hype.codes * providerCompose.js * Relay * React Podcast
××× SIIIIICK ××× PIIIICKS ××× * Scott: Command Line Heroes * Wes: MASSDROP CTRL MECHANICAL KEYBOARD
Shameless Plugs * Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up! * Wes: All Courses — Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work.
Netlify Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.
Show Notes 4:31 - Remote internet options
7:55 - Modems and routers
10:52 - Antennas
13:47 - Boosters
14:54 - Plans, data and speeds
20:11 - Other things to think about
Links * Deadmau5 house * ZTE MF288 * Netgear LB1120 * Mofi Routers * ZBT WE826T * Rogers * Ubiquiti Networks * Tomato Firmware
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
In this episode of Syntax, Scott and Wes talk about blogging — both the specifics of content (how to make great content), as well as the mechanics of where and how to publish blog posts.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 7:06 - What are some of the different platforms for publishing a blog?
23:41 - How to structure a blog post?
29:10 - How to direct traffic to a blog post?
38:51 - How do you make technical content in-depth and also succinct?
Links * WordPress * Gatsby * Squarespace * Netlify * Tumblr * Medium * Hacker Noon * Freedcamp * Devtoo * Smashing Magazine * Net Magazine * Gridsome * GraphQL * Vuepoint * Next * Nuxt * Everything I wish I knew running a sole proprietorship business * @peterc * JavaScript Weekly * Cooperpress * Seth Godin * Overreacted - Dan Abramov
××× SIIIIICK ××× PIIIICKS ××× * Scott: Business Wars * Wes: Spectacular Failures
Shameless Plugs * Scott: Level Up Tutorials Pro — Subscribe before price goes up! * Wes: All Courses — Use the coupon code ‘Syntax’ for $10 off!
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
It’s another VSCode episode! In this Hasty Treat, Scott and Wes talk all the things they love about VSCode — things to learn, how to get around more quickly, using keyboard commands, being more efficient, using snippets and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Show Notes 2:14 - Things to learn
- Jump by word, line
- Select by word
- Command Palette (cmd + shift + p)
- Move and copy lines - option up down or with shift
- Multi cursor
- Find and replace in files
- Use the Insiders build if you like updates every day
11:03 - Keyboard commands
- Cmd + b to hide sidebar
- Cmd + shift + x
13:55 - Snippets
- Snippet Generator
- Get to know defaults as well as tabs
- Mongo Snippets for Node-js
Links * VSCode Marketplace * VSCode Insiders Build * React Snippets * JavaScript (ES6) Code Snippets * HTML Snippets * ES7 React/Redux/GraphQL/React-Native snippets * Vue VSCode Snippets * Atom Snippets * Text Expander
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
It’s another Syntax potluck! In this episode, Scott and Wes answer your questions about remote work, AI agendas, motivation, fitness, the future of coding, and much more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
FreshBooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:03 - Q: I hear you both talk about “state” a lot in your podcasts. And while I understand a little about it, I never understand it in the context you both use it. Can you enlighten us?
6:52 - Q: I have an idea for a project that is suited for web sockets, push text/images/documents to a bunch of users in real time. I just learned about Firebase’s real-time database, and it looks like it would be pretty easy to implement my idea. What are your thoughts, pros/cons, of these two technologies?
10:42 - Q: How’s your fitness going?
12:15 - Q: Let’s say both of you gents were junior developers that had basic knowledge and skills in HTML, CSS and JavaScript but you had all the experience and knowledge of how to best master those skills and where the industry was heading. What would be the outline and focus of your road-map knowing what you do now?
17:22 - Q: Is it worth it to find a remote dev job at an early stage of your career? Considering the stuff I learn from my seniors and other devs on the team, I wonder if I will lose the opportunity to learn stuff from my team members?
19:49 - Q: How do I keep myself motivated in coding?
22:47 - Q: What’s y’all’s opinion on using some obscure (at least in my opinion) features of a language, such as Javascript bitwise operators, in a production app that dozens of other engineers maintain, and will continue to maintain long after you leave the company? It seems hard to read and immediately understand, which possibly makes it harder to debug/refactor in the future. Is it the responsibility of future devs to learn if they don’t know, or should you find a different way to code the solution in the first place?
26:00 - Q: Wes, I keep hearing you talk about working from your Dropbox. Do you sync up everything? Even things like your node module folders?
29:26 - Q: Have you talked about Firefox Developer Edition? It looks like it should be very useful, but I can’t quite make the transition.
32:58 - Q: Hey guys, what your opinion of CSS naming convention methodologies such as BEM?
35:04 - Q: I would like to refer to the question from ep 140 about fronted development possibly dying. I don’t feel satisfied with the answer, so maybe I could state the question differently: With the machine learning being developed rapidly in recent years, will the web change, causing reduction of front-end jobs? Maybe we will just be training smart algorithms and developing them instead? What do you think?
40:32 - Q: How do you deal with anxiety and fear during interviews that might hinder your ability to give the best impression of yourself or solve coding challenges?
Links * FeathersJS * Syntax 020: Fitness, Nutrition, and Losing Weight * Syntax 084: Fitness for Developers * Syntax 164: A Story About Kanye West and Learning to Code * Syntax 140: Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More! * FireBase * Slack * Dropbox * Backblaze * FireFox developer edition * Brave * Wix * Squarespace * How you can train an AI to convert your design mockups into HTML and CSS * How AI And Machine Learning Are Transforming Front-End Development?
××× SIIIIICK ××× PIIIICKS ××× * Scott: Wyze Sense * Wes: Arthur on CBC kids
Shameless Plugs * Wes: CSS Grid Course * Scott: Gatsby Ecommerce Course, and Dev Tools & Debugging 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
In this Hasty Treat, Scott and Wes talk about more of their favorite VSCode tasty treats - extensions, features, keyboard shortcuts and more!
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.
Show Notes 3:45 - Extensions
- Git Blame
- Apollo GraphQL
- VS Code Spell Checker
9:36 - Features
- Indent lines in explorer - Workbench > Tree Indent & Guides
- Breadcrumbs
- Commit all & visual git commands
- Change branch in lower left
- Rename Symbol
Links * Syntax 161: Hasty Treat - VSCode Extensions & Themes * Alfred * Playlist.js
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
In this episode of Syntax, Scott and Wes talk with Harry Dry about the crazy story behind his Kanye West dating site, how he taught himself to code, and how to come up with cool side projects!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 2:30 - How did you get into web dev and come up with the idea for the Kanye West dating website?
10:29 - Do you have a background in design?
13:05 - What’s your story?
15:28 - Do you wear yeezys?
36:26 - What made you decide to take this story and make a bit site out of it? What was the plan?
40:45 - How did you learn to code? How did you decide what to learn next?
45:30 - How do you push through hard problems?
48:50 - Any final advice to offer?
Links * The Kanye Story * TheNetNinja * @rogerfederer * Refactoring UI * @GonzoVice * Dang That’s Delicious * Puck * @joerogan * Code Academy * ChatKit by Pusher * @grantimahara * Mythbusters * @elonmusk * Marketing Examples * @goodmarketinghq * @harrydry
××× SIIIIICK ××× PIIIICKS ××× * Scott: BattleBots * Wes: Logitech MX Master 2S Wireless Mouse * Harry: Twitter Demetricator * Harry: CAMP LIFE: BIG JOHN FURY GIVES TOUR OF VINTAGE CARAVAN
Shameless Plugs * Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! * Scott: Dev Tools and Debugging and Gatsby and E-commerce
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
In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.
Show Notes 2:03 - Twitter Accounts
- Scott: HeyDesigner
- Wes: Mathias Bynens
5:00 - Web Dev Resources
- Scott: Scotch.io
- Wes: Webgems.io
7:37 - Design Resources
- Scott: UI Movement
- Wes: Creative Market
11:36 - Desktop Tools
- Scott: Pock
- Wes: MongoDB Compass
14:59 - YouTube
-
Scott:
- JSConf
- stance
-
Wes:
-
Andrew Camarata
- dotconferences
Links * Studio3t
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
In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.
FreshBooks - Sponsor Get a 30 day free trial of FreshBooks at FreshBooks and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:07 - Variables + Scoping
- var/let/const
- Block scope
- Function scope
- Scope lookup
6:06 - Types
- Objects
- Reference vs. copy
7:15 - Functions
- Types of functions
- Anonymous vs. named
- Expressions
- Arrow functions
- Methods
9:33 - DOM
- Selecting
- Updating
- Creating
15:07 - Prototypes + this
this- Objects
20:16 - Events
- Listening, callbacks
- dispatchEvent
- Bubbling
22:05 - Arrays
- Push, pop, manipulate
- Spread, rest
- Map, filter, reduce
- Arrays vs. objects
- Mutation vs. immutable
26:25 - Flow control
- Looping
- If
- Promises + Async + Await
29:47 - Security and accessibility
- XSS and innerHTML
32:04 - Things you should know, but not necessarily master
- Modules
- Closures
- Ajax requests
35:26 - Clean code
- Clean Code Javascript
Links * Syntax 043: 20 Javascript Array and Object Methods to make you a better developer * Syntax 141: Hasty Treat - Async + Await Error Handling Strategies * Syntax 072: Accessibility
××× SIIIIICK ××× PIIIICKS ××× * Scott: BaseCS * Wes: Owlet Baby Monitor
Shameless Plugs * Scott’s new E-Commerce and Gatsby Course * Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about everything they love regarding VSCode: themes, fonts, extensions, techniques and more!
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.
Show Notes 3:18 - Theme
- Cobalt 2
- SyntWave '84
4:58 - Fonts
- Dank Mono
- Operator Mono
7:12 - Five things we love
-
Wes:
- Bracket Pair Colorizer
- Permute Lines, Unique Lines
- Breadcrumbs
- Toggle Quotes
- Snapshot Tools
-
Scott:
-
Better Comments
- Import Cost
- Ctrl+Click Go To Definition
- Wrap Console Log Simple
- Git History
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
In this episode of Syntax, Scott and Wes talk with Jason Bahl (author of WPGraphQL) about GraphQL, headless WordPress, frameworks in WordPress, React in WordPress, and more!
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.
Show Notes 4:55 - Data in WordPress
6:26 - WPGraphQL
10:31 - What were your initial thoughts/first experiences with GraphQL?
16:58 - Does it use MySQL queries or wpQuery?
19:36 - How does authentication work?
24:38 - What does the WP local dev experience look like in 2019?
26:49 - What about deployment? How do you handle migrating data?
30:10 - How does WPGraphQL handle mutations?
32:46 - What are the preferred hosting methods for a headless WordPress setup?
36:44 - Do you see any push back about giving up much of what WordPress gives you out of the box?
41:23 - What are techniques for preventing all of WordPress from loading When you’re using it exclusively for the API?
43:40 - How does WPGraphQL support custom post types, taxonomies and fields, etc?
Links * WPGraphQL * Kyle Mathews * GraphQL * Gatsby * WordPress * Meteor * Apollo GraphQL * GraphiQL * WPGraphiQL * WAMP * Flywheel * Local by Flywheel * PhpStorm * Lando * Laravel * React * Netlify * Jason Schuller * Leeflets * Press75 * Advanced Custom Fields * WPGraphQL Tax Query * WPGraphQL Meta Query * WPGraphQL for Advanced Custom Fields * Jason’s Twitter * WPGraphQL Twitter
××× SIIIIICK ××× PIIIICKS ××× * Scott: Figma * Wes: CalDigit TS3 Plus Thunderbolt 3 Dock * Jason: Local by Flywheel
Shameless Plugs * Scott’s new course - Dev Tools & Debugging * Wes - All Courses - Use the coupon code ‘Syntax’ for $10 off! * Jason - WPGraphQL * Jason - Gatsby
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
In this Hasty Treat, Scott and Wes talk about front end security and what to do in order to avoid hacking.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Show Notes 2:53 - SSL
- Encrypted transfer of information
- Digitally binds a cryptographic key to an organization’s details
- Web-cam, geolocation, etc.
6:15 - innerHTML
- React’s dangerouslySetInnerHTML
- Name intentionally chosen to be frightening
- Allows you to write HTML to the DOM
- Data should be sanitized before used in prop
- Removes unexpected data from string
- Used to prevent cross site scripting attacks
10:25 - Don’t trust the client
- The client can be manipulated to send any info to your server
- E-commerce example — don’t take the price total from the front end to make the charge, DB call and calculate on the server
- Validate form inputs via HTML 5 field validation/check data types on the server
- Don’t allow your users to send an object when it should just be a string
- Get this for free with GraphQL via types
13:41 - PCI Compliance
- Protect card holder data
- SSL or Secure iFrame
- Encrypt transmission of card data
- Restrict access to card holder data
- Restrict physical access
- Front of front-end
16:44 - Tips
- Don’t put a name on sensitive fields if you are using JS
- HTTP only cookies
- Local Storage tokens
- XSS
Links * React * GraphQL * Express
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
In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:54 - Learning fundamentals vs framework specialists
- Learning vs getting a job
- Abstractions work well until they don’t and you need to debug them
HTML
7:58 - Semantic markup
9:15 - Accessibility basics
9:57 - Attributes
CSS
16:13 - Specificity
22:42 - Selectors
24:52 - Layouts
27:53 - Box model
32:50 - Positioning
36:42 - Forms and inputs
40:45 - Block vs inline vs inline-block
43:09 - Sizing units
44:40 - Typography
47:53 - Media Queries
Links * Interviewing candidates with a lack of fundamentals - Tweet * Jean-Philippe Sirois Tweet * Syntax 72: Accessibility * Syntax 107: Hasty Treat - CSS Units
××× SIIIIICK ××× PIIIICKS ××× * Scott: I Think You Should Leave with Tim Robinson * Wes: Forearm Forklift Lifting and Moving Straps
Shameless Plugs * Scott’s new course - “Debugging and Dev Tools” * Wes’ courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Show Notes 2:11 - What is a headless CMS?
- It’s a system or CMS that has no front-end (aka head)
- Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages
4:37 - Some examples
- Can be used with any type of website that can consume an API
- WordPress API + Gatsby
- Hosted Service + React App
7:06 - Why?
- Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc.
- Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like
- Optimizes for performance with static builds
- Hide the implementation details and back-end from view
10:19 - Live vs statically-generated website
- Syntax 120 - Gatsby vs Next
10:55 - How?
- Connects to API via normal fetch calls/GraphQL/whatever you use
- Needs to host your back-end either as a service or on a host
- Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify
Links * WordPress * Sanity.io * React * Syntax 120 - Gatsby vs Next * Netlify * GraphQL * Cobalt * Gatsby.js * Drupal * Next.js * Nginx
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
It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity.
Show Notes 1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy?
10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake.
14:35 - Q: Scott, what was the stack you were using at Ford?
17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”?
22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state?
25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you?
30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists?
32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why?
36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a career?
42:11 - Q: What are your recommendations in terms of resources for first time dads (and moms) like books, podcasts, etc. and generally good co-parenting advice for working professionals?
46:45 - Q: Loved the show with Travis. Had a question about “the gap”. Similar to design ambitions/taste surpassing current skill, when did you feel like your code had “grown up” and that you could actually DO what you envisioned with Javascript?
Links * Syntax 044: How to Learn New Things Quickly * Scott’s Spotify playlist - “Rap Music To Code To = Level Up Tutorials” * Scott’s Spotify playlist - “Golden Era” * Scott’s music picks * Apache - Apache Ain’t Shit * MF DOOM - MM…Food * Kendrick Lamar - To Pimp A Butterfly * GZA - Liquid Swords * Gang Starr - Daily Operation * Slick Rick - The Ruler’s Back * Redman & Method Man - Blackout * Q-Tip - The Renaissance * Enter The Wu-Tang (36 Chambers)[Expanded Edition] - Wu-Tang Clan * Pete Rock on Spotify * Preemo on Spotify * Codeland Conference * Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google
××× SIIIIICK ××× PIIIICKS ××× * Scott: Oculus Quest All-in-one VR Gaming Headset * Wes: Marpac Rhom Portable White Noise Sound Machine
Shameless Plugs * Scott’s new course - “Dev Tools and Debugging” * Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up Netlify for more info.
Show Notes 3:50 - CCS Preprocessor parable
6:09 - Efficiency
10:40 - When to learn new systems
13:03 - Common pain points
14:42 - Pushing yourself to foster growth
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
In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity.
Show Notes 6:05 - What are SVGs?
- It’s an image you can edit
16:17 - Icon fonts
- Better tools
- Fails in certain areas
- SVG sprite icons
- Grunticon
24:24 - SVG files / Build tools
- SVGO / SVGOMG
31:50 - Where to find SVGs
- Noun project
- Exporting from Sketch/Illustrator/Figma
- Freepik
- Iconmoon
33:48 - What is the viewbox?
40:39 - Animating SVG
43:41 - Accessibility & text with SVG
45:44 - Graphing with SVG
- D3.js
47:58 - Filters
Links * Font Awesome * Grunticon * Grunt * gulp.js * React * Vue.js * Sketch * Illustrator * Figma * imagemin * gulp-imagemin * Gatsby.js * gatsby-plugin-sharp * jakearchibald/svgomg * Noun Project * Freepik * Icomoon * GreenSock * Snap.svg * SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner * Codrops * D3.js
××× SIIIIICK ××× PIIIICKS ××× * Sara: Netlify * Wes: Wise Contact Sensors
Shameless Plugs * Sara’s Website & Workshop Dates * Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
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 * Sara’s Twitter
In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more!
Log Rocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
Show Notes 5:48 - Intl.NumberFormat
9:17 - Intl.ListFormat
12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat
14:27 - Intl.PluralRules
Links * Standard built-in objects * Language Subtag Registry
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
In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible.
Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:41 - Tools
- CLDD - console.log driven development
- How To Pause Your Code With Breakpoints In Chrome DevTools
- Other types of break points
- XHR
- DOM break on attribute change
- DOM break on children
- Conditional break
- Break on exception
- Break on event listener
21:49 - Network requests
- Doesn’t take place in your site/dom, so might not always have all info in your console, debugger
- Network tab in dev tools shows you all requests going in and out of your app
- Filters by type, sees length in request
- Sees headers, responses and more
- Failed requests will be red
26:50 - Debugging mindset
- Check different browsers
- Check the docs/examples
- Isolate when possible
- “What has changed?”
- Get minimal working code
- Rubber Duck Debug
- Step back and re-think
Links * Debugging Visual Studio Code (Node) - James Q Quick * CodePen * Spencer Carli’s Youtube
××× SIIIIICK ××× PIIIICKS ××× * Wes: DeWALT Lawn Mower * Scott: Cold Brew Coffee Maker
Shameless Plugs * Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off! * Level 2 React Native with GraphQL
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
In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal — what it is, how it could influence dev, and what they’d like to see.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 1:38 - What is a Standard Lib?
- Still experimental
- Built-in modules don’t have to be downloaded because they ship with the browser
- Not exposing built-in modules globally has a lot of advantages:
- They won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker)
- They won’t consume any memory or CPU unless they’re actually imported
- They don’t run the risk of naming collisions with other variables defined in your code
6:47 - Key Value Storage is the first one:
- KV Storage: the Web’s First Built-in Module
8:36 - What do we want to see?
- Deep clone
- Basically all of Lodash
util.isDeepScrictEqualAsync json.parse()/json.stringify- UUID
- URL Lib for building and parsing URLs
- Missing Array Methods
- Most of underscore JS
15:53 - International
- Currency Formatting
- Lists
- DateTimeFormat
- RelativeTimeFormat
Links * JavaScript Standard Library Proposal * Add remaining Underscore / Lodash features * JavaScript standard library contents
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
In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbook and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:18 - Jason Lengstorf - What do you do?
9:37 - Gatsby refresher
- Gatsby is statically generated
gatsby-config.jsfile determines which plugins you usegatsby-node.jsallows us to hook into Gatsby at different points and do things like source content and dynamically create pagesgatsby-browser.jscontains code that should hook into browser events
13:54 - Gatsby themes
- Layouts in Gatsby are done the same way in React - simply create a component with children
- How is this different than a plugin?
- Is it a collection of plugins?
- How do you share themes?
- Can they include functionality (plugins?) Like Markdown rendering?
- What about a theme that needs a UI once activated?
- What about custom fields for Gatsby?
- Do you foresee a marketplace like WordPress themes?
- Are there some themes already out there?
- What will come for themes soon?
34:07 - Questions about Gatsby
- What do you think about WordPress?
- E-commerce?
- How do you make money?
- Suggested way of doing dynamic things
- What is the future of Gatsby?
Links * Gatsby * Jason Lengstorf * Livestream * Progressive Disclosure of Complexity * Gatsby Themes * Sanity * Gatsby + Sanity.io * Snipcart * Axios * Algolia * Netlify * Airtable * Hope in Source - Henry Zhiu
××× SIIIIICK ××× PIIIICKS ××× * Jason: Kamado Joe Grill * Scott: Zojirushi Hybrid Water Boiler and Warmer * Wes: Waterproof Digital Instant Read Meat Thermometer
Shameless Plugs * Jason’s Weekly Live stream * Scott’s Courses * Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
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
In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Show Notes 3:00 - Types of workshops
- Public
- Private
4:29 - Choosing a topic
- Create original content
- Create custom content for companies
5:55 - Building content
- Choose seven to eight different little things
- ES6
- Progressive web apps
- Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application
- Gatsby website
- React Beer application
- React Notes Application
- Process:
- Build the app
- Rewind back to starter files
- Build it again while writing notes
- Follow your own notes to see if it makes sense
13:25 - General information
- How long should it be?
- Fixed price vs split cost
- How many people?
16:46 - Other Tips:
- Break away from your app and show other apps using - gives better context
- Stop often and ask if anyone needs help
- Give large breaks
- Give challenges for those who need more to do
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
It’s another Potluck! In this episode, Scott and Wes answer your questions about CSS, Angular, Svelte, dev job preparation and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at Sanity. Get an awesome supercharged free developer plan on Sanity.
Show Notes 3:23 - Q: How big is too big for state? I have an object of around 1000 items which will be used in a search box on the frontend of my site, but the list of items won’t be updated very often. What is the most efficient way to store these items and deliver them to the browser? Would you use state, a JSON object, a MongoDB document or some other way I haven’t thought of?
7:17 - Q: How much do I need to know before I start applying for dev jobs?
9:26 - Q: Do you folks have any opinions on Skeleton loaders, and any thoughts on how best to implement them? At my day job we’ve recently implemented skeleton loaders in a way that inherits the parent styles. Would love to know if there’s any best practices for this or ways we can improve our setup.
13:01 - Q: Do you think we still need to use CSS resets like normalize and sanitizer?
14:56 - Q: Scott, can you tell the story of how you landed an interview for a job in Japan? I am moving to Japan next year and wondering how that opportunity arose for you.
20:04 - Q: Do you guys have an opinion on angular good or bad? Or is it that you’re more comfortable and have used React and Vue more often, so they’re largely at the center of any framework discussions?
22:54 - Q: Could you talk about naming and structuring files/folders in your applications? How do you name components and folders? Do you follow some sort of path of how to structure files in a web app?
29:01 - Q: Do you think that Node is almost too powerful to handle some of the simpler tasks (a site that just needs a contact form for instance), or am I just missing some very simple configuration? It seems like other languages, such as PHP, might be better suited for some of these simple tasks and Node is really just meant for larger scale application? I guess what my question really boils down to is, for a freelancer, I understand that I need to have my hands in a lot of different tech stacks, but should I really dive in on PHP (or something else) to handle some of these simpler features a client might need?
33:24 - Q: What do you guys think about Svelte? Before everything goes WASM will Svelte be the future of web programming?
37:24 - Q: What smart phones and laptops do you use for work? (specific model and why)
42:38 - Q: Should I apply for other jobs even if my contract might get renewed? Should I feel loyal to a company?
××× SIIIIICK ××× PIIIICKS ××× * Scott: DaVinci Resolve 16 * Wes: Affinity Photo
Shameless Plugs * Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. * Scott: Scott’s Crouses
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
In this Hasty Treat, Scott and Wes talk about how to identify and work on your weaknesses.
Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.
Show Notes 2:45 - Why care about weaknesses?
- If we avoid the things we’re afraid of or bad at we’ll always grow in lopsided ways
7:32 - As a developer
- What skills / languages are you not good at or afraid of?
14:06 - As an employee
- Communication
- Company and personal goals
- Efficiency
- Compatibility
16:54 - As a human
- How you treat people
- Sharing your time
- What you’re neglecting
- Your living space
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
In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS in 2019.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Show Notes 2:28 - Clip path
6:35 - Filters
16:24 - Background mix blend mode
21:47 - Border images
25:46 - Multiple background images
27:47 - Multiple background gradients
28:25 - Radial gradients
29:06 - Multiple box-shadows
34:30 - HEX + Alpha
40:41 - Viewport units
42:17 - Calc
44:32 - CSS variables
47:44 - Text decoration
Links * Can I use
* Clippy - CSS clip generator
* CSS Filters
* Tweet: Using mix-blend-mode:multiply
* CSS blend mode generator
* Lea Verou
* Codepen - Scott’s digital text animations
* Steve Schoger
* Mother-effing HSL
* Diana Adrianne
××× SIIIIICK ××× PIIIICKS ××× * Scott: Solar string lights * Wes: Digital Calipers
Shameless Plugs * Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. * Scott: Animating React
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
In this Hasty Treat, Scott and Wes are back with another AMA. This time they talk about their spouses, careers outside of tech, lots of favorites (movies, colors, clothes), and more!
Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.
Show Notes 2:58 - What do your wives do?
6:40 - If you had to choose a different career, what would you do?
If you started learning another (programming) language today, what would it be?
11:50 - Favorites (e.g. colors, movies, brands, etc.)
18:08 - Who inspires you?
26:19 - What’s your ratio of client work, learning new tech, and teaching via your courses, talks or Syntax.fm? You guys seem awfully busy, and it’s making me feel kinda lazy.
Links * Pigeonhole Live
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
In this episode of Syntax, Scott and Wes talk all about side hustles with special guest Courtland Allen, from Indie Hackers! They talk about the story behind Indie Hackers, how to start your own side hustle, where to find ideas, listener questions, and more.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at LogRocket.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:05 - What’s the back story behind Indie Hackers?
5:30 - What is a side hustle?
11:21 - How do you validate your idea?
13:15 - What are some different types of side hustles?
31:55 - What about people who don’t like marketing?
33:57 - What are some important pieces of side hustles?
39:04 - How do you sell a business?
42:40 - Listener Questions:
- Q: How do you stop the side hustle from affecting your main job in regards to things like overtime, sleep and commitment?
- Q: Should you frame yourself as a one-man-band or as a company?
- Q: Have you heard stories of people living in cheap places, making bank? Are there any white whales you have been chasing to interview?
Links * Carrd * Balsamiq Mockups * Flickity * Nomad List * Evan You * Evan You Patreon * Park.io * Making $125,000 a Month as a Solo Founder with Mike Carson of Park.io * Patreon * Drift * Stripe
××× SIIIIICK ××× PIIIICKS ××× * Courtland: Post-it Notes and Poor Charlie’s Almanack: The Wit and Wisdom of Charles T. Munger * Scott: Akimbo * Wes: Elastic Wallet
Shameless Plugs * Courtland: IndieHackers Podcast * Scott: Animating React * Wes: CSS Grid 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
In this Hasty Treat, Scott and Wes talk about Shadow Doms - what they are, the individual pieces involved with them, why they’re important, and how to get started using them.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”.
Show Notes 2:41
- What is the shadow DOM?
4:25
- What elements are shadow DOM?
5:47
- Styling shadow DOM elements
8:54
- Creating your own
9:22
- Frameworks
Links * Using shadow DOM * Shadow DOM v1: Self-Contained Web Components * Polymer * Svelte 3 * Wildhoney - ReactShadow
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
In this episode of Syntax, Scott and Wes talk to Travis Neilson about his career at Google, the challenges he faced, how to choose projects tips for devs wanting to get better at design, and more.
Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.
Sanity - 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 2:43 - Career path
- On ambitions and where it all started
23:15 - Being all in
- On how to choose your next project
33:31 - Working at Google
- On the day-to-day at Google, the challenges of a big team, and constraints
43:23 - Design tips for developers
- Advice for devs who want to get better at design but are struggling
- Thoughts on CSS frameworks
- The one thing devs often get wrong about design
Links * Travis Neilson’s Website * Travis Neilson’s Podcasts * Helvetica — Gary Hustwit * How one typeface took over movie posters * Just My Type: A Book About Fonts * Work-Life Balance is a Joke
××× SIIIIICK ××× PIIIICKS ××× * Travis: Cults and Extreme Belief and Google Method Podcast * Scott: Sony Noise Canceling Headphones WH1000XM3 * Wes: Little People Big Dreams Book Series
Shameless Plugs * Wes’ Courses & Wes’ Youtube * Animating React * How to Use Adobe XD
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
In this Hasty Treat, Scott and Wes discuss different error handling strategies.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:07 - Try / Catch
- This can be done at call time or inside the function
4:10 - Higher Order Function
- Makes a function that returns a new function which in turn calls your original function (but with a
.catchchained on)
7:46 - Handle the error when you call it
- Use async/await but chain a
.catchonto the end
9:03 - Node.js Unhandled Rejection Event
process.on('unhandledRejectionEvent', callback)
9:40 - What do do with those errors
- Send to error tracking service
- Possible to give the user a reference number
- Display good error text to user
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - Media Queries, NPM Vulnerabilities, Web VR and AR, Fullstack JS vs JAMstack for freelancers, switching jobs, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:46
- Q: I recently started a static site so I want as much of the site as possible to change layout with just CSS for responsive design. I am comfortable with media queries but find often times the design is very different between sizes. It is easy to tame the complexity of repeated data for the different component views keeping everything in sync but is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in the static HTML have any effect on SEO?
7:08
- Q: How should a mid developer know when its time to leave the current company? Is tech stack (e.g frameworkless) a decent reason even though he/she is happy at the place, but feels like they are not growing enough?
11:19
- Q: Should I worry about the critical vulnerabilities when installing an NPM package?
15:06
- Q: I’ve had the idea for styling one site two different ways (professional/artistic) and giving visitors a button to toggle between the two. Too gimmicky? Secondary: how did you pick your brand colors?
20:19
- Q: Any SICK TIPS on career change? I’m a full-time employee with two kids and a lovely wife, who wants a fulfilling career. I throw as much time in as I can to study, but I feel like it isn’t enough to apply for jobs.
20:49
- Q: Within the next two years, how well do you think WebVR and WebXR technologies would fit within mainstream web development (think A-Frame, SparkAR, React 360 in normal websites and applications)?
30:39
- Q: Should I learn Fullstack JS or JAMstack for freelancing?
35:34
- Q: Is front-end development dying?
37:30
- Q: How do you deal with CSS-in-JS when you have one-off stuff, or coupled components/selectors like a [CSS] grid container and a grid child (think
grid-area)? CSS-in-JS feels very verbose for this use case.
42:07
- Q: Scott always talks about Meteor. I thinks its really cool too. What’s the future of it and why didn’t it take off? It seems to have slowed down. They seem to have moved on to other projects like GraphQL stuff.
Links * Influx * WebVR * WebXR * Google Maps will use a core Waze feature to improve public transit
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Making of a Manager * Wes: DeWalt Oscillating Tool
Shameless Plugs * Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. * Scott: Animating React
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
In this special Hasty Treat, Scott and Wes answer your questions about money, investments, online presence and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Show Notes 2:33 - Besides coding/teaching, do you have any another source of income (stocks, bonds, crypto, etc.)?
9:03 - How do I build my online presence?
13:05 - What’s your favorite tasty treat (as in actual food)?
16:33 - Wes, lets talk about the + symbol that you use to start the prompt for Cobalt2 — whats up with that?
18:41 - How do you get out of a rut?
Links * Canadian Couch Potato
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
In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.
Show Notes 5:38 - New Promise static methods
Promise.allPromise.race()Promise.allSettled()Promise.any()
10:16 - Lazy loading images
- Addy Osmani’s Lazy-Loading blog post
14:25 CSS Houdini aka JS in CSS
-
- CSS Houdini Experiments
20:32 - Subgrid
- Syntax 109: Hasty Treat - CSS Grid Level 2 aka Subgrid
- Subgrid is coming to Firefox - Jen Simmons
- Bugzilla
24:31 - Native modules in browser
type="module"- dynamic
import()
27:08 - Node Native Modules update
- package.json will now have a type entry where
- NodeJS - Plan For New Modules Implementation
- New ESM Implementation
29:17 - PWA install app and Google PlayStore
- Already shipped in Chrome
- Java API that communicates through services with Chrome
- Trusted Web Activity aka TWA
- All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods
- Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite
- Passing the PWA Criteria
- Performance Score with a minimum of 80/100, tested with Lighthouse
- All current Google Play Store rules
35:49 - CSS Scroll Snap
- In many browsers already
scroll-padding
38:17 - Aspect Ratio Unit
- Designing An Aspect Ratio Unit For CSS
39:32 - CSS nesting
- Disallows cross-domain cookies unless on the same domain/subdomain
Links * Gatsby * Promise.allSettled() * Promise.any() * Apollo * CodePen * UC Browser * Parcel * Node.js * Myles Borins’ Twitter * Twitter Lite * Google Maps Go * Instagram Lite * Lighthouse * Opera * Can I Use - modules * Apple’s ITP
××× SIIIIICK ××× PIIIICKS ××× * Scott: Finding Drago * Wes: The Punk Rock MBA
Shameless Plugs * Scott’s Gridsome Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them.
Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.
Show Notes 2:52 - What is a CSS framework?
- Pre-written CSS that takes over the basic styling of your app
- Can include just utilities or lots of styles (minimal to overboard)
- Twitter Bootstrap and Zurb Foundation were the pioneers
- Follow different CSS styles from “functional CSS” to utility-first to BEM
7:33 - Functional (aka Utility) based
- Tachyons
- Tailwind
9:59 - Preprocessor based
- Bootstrap
11:33 - Styled Components based
- Rebass
- Styled Systems
- Facepaint
15:50 - Why use one?
- Makes styling FAST
- Makes hard things easy
- Some, like Bootstrap, have themes
- Keeps your own CSS minimal and organized
- Built on an established system
- Lots of people use the same CSS
19:22 - Why not use one?
- CSS class hell
- Stops you from learning how CSS works
- Size (not all have this problem)
- Brotli, Purify CSS
- You will be overriding a ton of it
- You like exclusively writing the code you need and nothing else
Links * Jamstack * Gatsby * Hugo * Jekyll * Bootstrap * Foundation * Tailwind CSS * Tachyons * Styled System * REBASS * Facepaint * Brotli * Purify CSS * Cloudflare
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
In this episode of Syntax, Scott and Wes talk about working remotely — problems, challenges, and how to keep yourself sane, productive and efficient.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 4:34 - Find your spots
- Coffee shops
- Cafes
- Library
7:40 - Deal with Distractions
- Log out of Twitter/Facebook/Instagram
- Delete Apps — only use the browser
- Put phone and computer on “do not disturb”
- Focus App
11:33 - Prioritize your tasks
- Drifting is possible when it isn’t clear what you need to do
- If you don’t have someone telling you what to do, it can be hard to get started
- Todo lists
17:15 - Make time to be social
- Go to meet ups
- Chat in Slack or Discord rooms
- Talk to people at work spaces
21:48 - Get fresh air
- Go for a walk
- Open the windows
24:03 - Get moving
- Hit the gym
- Do push-ups in your office
28:09 - Have a separate work space
- Designated office
- Don’t work from the couch with the TV on
- Clean your damn office 😂
38:16 - Act like you are going to work
- Dress well
- Fix up, look sharp - get yourself ready to go
40:44 - Take Breaks (not too many, not too long)
- Some people like the Pomodoro Technique
- Take a lunch break away from your computer
- Don’t make a break longer than 15 minutes or so
Links * Focus * Discord * Todoist * Getting Things Done * Eat That Frog * The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing
××× SIIIIICK ××× PIIIICKS ××× * Scott: Doug DeMuro’s YouTube Channel * Wes: Yeti Rambler 14 oz.
Shameless Plugs * Scott’s Gridsome Course * Wes’ YouTube Channel
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
In this Hasty Treat, Scott and Wes talk about cranky developers — those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a “fad” or unnecessary.
Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:20 - How to deal with cranky devs
- Many experienced developers prefer older, stable technology for a reason. They have been through it before.
7:14 - Questions to ask when considering new tech:
- Is it better for the product?
- Is it better for the users?
- Is it better for the business?
- Is it better for the developer?
16:39 - How to convince them:
- Proof of concept - show them it’s better.
18:28 - Things to acknowledge:
- There are risks in changing technologies.
- There are costs - training, tooling, hosting.
21:20 - Some people are not interested in improving themselves
- They got the job they want and are short sighted about the future.
- You can appeal to management about making progressive choices.
- If management isn’t interested, you should look for a new job.
Links * Sass * Backbone * Babel * Gulp Babel * ES6 * React for Beginners * Missive * Swix * React * Flux * Glamorous * PayPal * GraphCool * Facebook * Netflix * MJML * Juice
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
It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.
Show Notes 6:54 - Who’s Snackin’ On React
Guess which of these websites have their homepage partially or fully built in React?
- EltonJohn.com or ArianaGrande.com?
- Ferrari.com or Lamborghini.com?
- Starbucks.com or Dunkindonuts.com?
- WayFair.com or Ikea.com?
- Walgreens.com or Cvs.com?
10:55 - Hook’d on Hooks
-
Wes:
- useSocket
- useStaticQuery (gatsby)
- useKeyPress
-
Scott
-
useLocalStorage
- useClickOutside
- useMeasure
- useGesture
17:47 - This, That, Both, or Neither?
- Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read?
- Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland?
- Easy Peasy: A React state library, or children’s spoon set?
- Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children?
- Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear?
- Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV?
- Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company?
- Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API?
26:22 - Tag Team Coding React
- Fetch Data from the data jokes API
- Show a loading indicator
- Have a button to fetch a new joke
36:24 - Stump’d
- What is a react PureComponent for?
- Why might you use a callback with setState?
- How would you reverse an array without mutating the original array?
- Can you explain what a “downtown job” is?
- When would you use useReducer?
- What makes useLayoutEffect different from useEffect?
- What propType would you use for an object that contains a number and a string
43:11 - Unpopular Opinions. Overrated, Underrated?
- Our own unpopular opinions
- Scott: React devs like to make things harder than they need to be.
- Dan Abramov
- Ryan Florence
- Sebastian Markbage
- Jared Palmer
- Sean Thomas Larkin
- Sergey Ryzhov
- Sophie Alpert
- Parker McMullin
- Vue does it better _____
52:45 - Q + EH with Wes and Scott
- What where the first apps you worked on?
- What React problem stumped you for the longest time?
- What’s your most expensive mistake?
- Do we need classes in Javascript?
- How do you explain what you do to your mom?
- How do you explain React?
- What made you start wanting to code?
- What’s the hackiest thing you’ve ever done?
- Where do you see yourselves in 10 years?
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
In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off.
6:19 - Include list of technologies used
7:25 - Include list of problems solved
7:48 - Use company logos (if allowed)
9:13 - Show mockups on modern laptops/phones
10:04 - Show your work (mockups, sketches, layouts, etc.)
11:39 - Keep it updated
12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on.
14:11 - What about using side projects and tutorials?
16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these.
- A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice.
Links * Wordpress * Google * Ford * Air Canada * Dribbble * Github * Instagram
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:21
- Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)?
5:12
- Q: Do you have any suggestions for picking a headless CMS?
8:55
- Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search?
15:13
- Q: How much importance would you place in the design of a resume? Is it worth the cost?
21:09
- Q: With the new React Hooks and Context API, do we still need Redux?
25:37
- Q: If either of you could change anything about your personal tech stack, what would it be and why?
29:07
- Q: Do you prefer to use React’s defaultProps or plain JS default function parameters to give your component’s props some default values?
30:44
- Q: You guys chat CMS sometimes - why no love for Umbraco?
35:53
- Q: I’m ready for a new challenge, how do I break this to my employer?
38:16
- Q: What’s the difference between
const add = (a, b) => { return a + b }andfunction add (a, b) { return a + b }?
Links * Udacity * Coursera * Contentful * Ghost * Prismic * Strapi * HeadlessCMS * Sanity * WordPress * Drupal
××× SIIIIICK ××× PIIIICKS ××× * Scott: J.A. Henckels International 10-piece Capri Granitium Nonstick Cookware Set * Wes: IRWIN VISE-GRIP 2078300 Self-Adjusting Wire Stripper, 8"
Shameless Plugs * Scott’s Gridsome Series * Wes’ YouTube
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
In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Show Notes 3:03 - What is Bike Shedding?
- Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished.
4:39 - Tabs vs spaces
- Two spaces
5:50 - Single vs double quotes
- Single in JS, double in HTML
7:05 - Semicolons or not
- Semicolons
9:01 - Grouping/ordering CSS properties
- Wes: Format
- Scott: Alphabetical
12:35 - var vs let vs const
- Scott:
constfor life —letwhen needed - Wes:
constby default — change toletwhen needed
14:24 - Default vs named exports
- Use both
- Mix-n-match
15:58 - Should designers code?
- If interested, sure
17:58 - Which front-end framework
- Whichever one best suits your needs
19:30 - Vim/Emacs vs Atom/VS Code/Sublime
- VS Code
21:53 - Small perf wins
- Micro optimization often aren’t needed
25:14 - Browser support
- If you’re required to support it, then support it
25:47 - Block formatting
- Function block
- Else on a new line vs else after block
29:07 - Trailing comma
Links * Law of Triviality * React * Vue.js * AngularJS * Ember.js * Vim * Emacs * Atom * Sublime * VS Code
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
In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntax and get your first two months free.
Show Notes 2:22 - What’s the deal with VueJS?
- Combines ideas from Angular 1, React and Blaze
- Ease of Angular 1
- App structure of React
8:02 - Components
-
Template syntax is similar to handlebars
- aka {{stuff}}
-
v-bind:property
-
v-bind:property or simply :bind allows you to dynamically bind a value to a property
-
Props
-
Props must be declared before they can be used in a template.
-
Script tag
-
Where imports happen
- Where props are defined, computed properties, action events and lifecycle
-
Actions
-
v-on:click="doSomething" @click="doSomething"- These will run a doSomething event defined in your script export via methods
-
Lifecycle
-
How does data fetching work?
-
CSS
-
Can be scoped to file by adding
In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more!
Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.
Show Notes 3:08 - What is a frontend framework?
- JavaScript based
- Controls applications such as:
- Routing
- Rendering
- Data Fetching
- Examples:
- React
- Angular
- VueJS
- Ember
- Backbone
- Svelte
- Controls applications such as:
5:54 - When to use a frontend framework
- The Link between your JavaScript data and the DOM (your HTML) isn’t live
- The use of frameworks makes re-updating the DOM (after the initial variable update) easy
- You need an opinionated way to handle complexity
- Example:
- You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button
- Event Handlers - binding and un-binding
- Example:
- Your client wants a fast, modern experience
- Seamless routing and page transitions
- Fast prototyping
- Access to battle-tested libraries
- Security
- Perf
14:24 - When not to use a frontend framework
- When using CMS like WordPress and Drupal
- A medium amount of JavaScript is needed - Vanilla JS will work fine
- Modals
- Slideshows
- Form submits
- Static pages, no JS functionality
- Updating an existing project
17:20 - Why can’t I just use jQuery?
- Vanilla JS contains all of jQuery’s available DOM APIs
- Frameworks provide structure
- Organizes code for big projects
Links * Syntax 039: Is jQuery Dead?
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
In this episode Wes and Scott talk about how to find freelance clients — tangible things you can do to position yourself and set yourself up for success.
Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Show Notes 1:27 - Question from Andreas Trattner: I am a backend developer with 4+ years experience working on large systems in Europe and am considering moving toward freelancing/contracting. However, I find it difficult to discover quality opportunities. Any tips you can share on how to strategically get projects?
- There isn’t a secret trove of work, and there’s no one way to do it.
4:50 - Relationships
- Trust and relationships rule all. The best paying gigs are never advertised.
- Who should you know?
- Other developers
- How? Meetups, Conferences, Twitter, Slack rooms, Friends
- Tip: Volunteering is a great way to get in to conferences, plus you often get to know people
- Tip: If you are friends of a friend who gets a lot of work, as for a introduction
- Designers and marketers
- You usually work together
- How? Twitter, Email, Dribbble, Instagram
- Project managers
- How? Cold emails, tweets
- Office managers
- Life blood of the office - they know everyone
- Often move into other roles
- How? Meetups, previous employees
- Entrepreneurs
- Lots of connections, often switching gears
- How? Demo camps, Facebook marketing groups
- Venture capitalists
- Have dozens of companies and tons of connections
- How? Demo camps, introductions, cold email
- Other developers
19:08 - Display of expertise
- It certainly is an option to just be really freaking good at what you do
- Speaking at conferences and local meetups
- Working on open source
- Helping in chat rooms
- Posting guides
- Maintaining docs
- Offering reviews / Make things public
- Performance - Harry Roberts from CSS Wizardry
- Accessibility - HeydonWorks
- WordPress speed
- React checking
- Start a podcast
- Blogging
- Volunteering
9:22 - Visibility
- You need to let everyone know what you do. Your mom’s uncle’s friend’s cousin on Facebook might casually ask for recommendations.
- Instagram / Photos. Showing people what you are doing and what you are working on will make a mental note in their head that you do that type of work.
- Facebook / Twitter / Instagram
- Blogging
- This makes the “vetting” process much easier
- Tweeting
- YouTube videos
- Slack channels you are involved in
38:02 - Other tactics
- SEO - Locality (Toronto designer), specific technologies (Redux contractor)
- Craigslist
- This one sucks, but it can lead to decent work occasionally
- You need to be more vigilant in screening, most clients will suck
- Cold asks - Just ask people what works well
- “Hey, I’m looking to book a few contracts starting June 2019. I love working with ______ and you can see my work here”
- Put a phone number on your website. Seriously.
- UpWork
- Won’t make as much money here because of competition
- Local business listings
- Find online and offline biz listings
- Old fashioned — putting your card on bulletin boards
47:29 - Maintaining Relationships
- Check in every few months with non-biz related contact
- But also just straight up ask for work
- Christmas / Thank-you gifts
Links * Canadian Couch Potato
××× SIIIIICK ××× PIIIICKS ××× * Scott: Google Drive Scanner * Wes: Endy Mattress
Shameless Plugs * Scott’s React Hooks For Everyone * Wes’ All Courses
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
In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes Not live yet - it may/will change. Be warned!
3:59 - The problem we have with React right now
- API calls
- Image loading
- Code splitting
7:16 - What is React Suspense?
- First we convert our async data fetching functions into resources
- Resources can then be read inside render - above the return
- Resources can be read from cache
- Resources can be preloaded into a cache if you anticipate needing them
- Resources reads are blocking for that function - you can’t return JSX until the resource is read
- In your component that fetches data, there is no need to maintain a loading state
- Then, anywhere higher up in that tree, you can introduce a suspense component
- The suspense component can detect if any of it’s children are currently loading data
- If they are, we can then choose to show a loader via the fallback prop
- We can also choose to show nothing via the maxDelay prop — this is helpful for fast connections that shouldn’t see the spinner for a short split-second
15:20 - Support
- React.lazy and suspense for code splitting is already here
- The React.lazy function lets you render a dynamic import as a regular component
- Loadable Components is recommended if you need splitting with SSR
- Data Resources is not here yet
Links * React 16.x Roadmap
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
In this episode Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills.
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.
The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.
Show Notes 3:59 - Our experiences
-
Scott:
- Went to college - Go Blue!
- Worked odd jobs while self teaching
- Was mentored and taught more while working at my first job
- Self directed since then
- Started teaching via LUT in 2012
-
Wes:
-
Went to university for Business Tech - entirely self-taught
- Led and created part-time HTML + CSS program at HackerYou
- Led and created first bootcamp at HackerYou
- Led and created first JS part-time at HackerYou
- Been offered jobs at colleges + universities
10:02 - School - $$$
-
Pros
- The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding
- Co-ops can help you find what you like and what you don’t like
- Life skills that involve you being on your own and figuring things out more
- You are exposed to interesting people and ideas
- CS Degree work can open more career doors
- Professional networking
- Many companies wont hire you without some sort of bachelor’s degree (this might change)
-
Cons
-
Not everyone has the time or money to devote two to five years to school — especially to something they might not end up enjoying
- Potentially outdated staff and course material
- Wes was often asked to lead a video editing course, print design course and a web development course
- Lot’s of distractions
23:10 - Bootcamp - $$
-
Pros
- Very fast, lots of info, but can be a bit overwhelming
- You can get up-to-speed extremely quickly
- Focused on hire-ability and job-ready skills
- Focused information
- Personality is really the deciding factor here - lots of people do well, and some don’t
-
Cons
-
Hit or miss — quality of bootcamps aren’t vetted, so do your research
- Talk to someone who took it, find out who the instructors are
- You absolutely must continue learning after the bootcamp
- The bootcamp is just a push and you are expected to continue learning once you are done
- Not great for individuals that can’t handle the pace
- You have to quit your job
37:09 - Self-Taught - $
-
Pros
- Self-directed people will prevail here
- Can be drip-fed while earning money at another job
- Can be supplemented by a job (e.g. you are front-end and want to go full stack)
- Can get real world experience as a freelancer while you evolve
-
Cons
-
Not for everyone
- Can be difficult to self-motivate
- Hard to get help - sometimes you can be stuck for hours on a two-second fix
- Potentially discouraging
- You might go down the wrong path without guidance on what you should learn
47:11 - Part Time Programs - $
-
Pros
- Fantastic way to get up to speed with a new tech
- Goes at a good pace - twice a week usually
- Offered on weekends and evenings where you can maintain a regular job
- Very low risk - you can try it out
-
Cons
-
Might not be as fast as you like it
- Quality is all over the map
49:55 - Mentored Self Learning - $
-
Pros
- Best to do with a mentor on the job
- Mentor can help steer what to learn in your free time
- Good feedback and a place to ask lots of questions
-
Cons
-
Can’t be done without someone willing to mentor you
- Only as good as your mentor
52:55 - What approach would we take?
- Bootcamp > then immediately supplement with courses
Links * Notion
××× SIIIIICK ××× PIIIICKS ××× * Scott: Digital Minimalism by Cal Newport * Wes: American Kingpin
Shameless Plugs * Scott’s React Hooks For Everyone * Wes’ All Courses
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
In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:59 - Why it’s important
- Projects can live or die by the team’s communication
- Project timelines can be disrupted leading to big problems with scheduling
5:53 - How to improve communication skills
- PRACTICE
- Pay attention to what works
- Have a system – standups, weekly meetings, etc.
- Over communicating can be annoying but effective
- Realize that people can’t read your mind, so having your intentions and timelines public and known is important
9:12 - Building good habits
- Need to practice
- Build systems to support new habits
11:04 - Tools we use to communicate
- Email / Standups
- Notion
- GitHub Issues
- Slack
- Missive
Links * Syntax 075: Hasty Treat - Feedback and Criticism
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - are classes dead?, tutorials vs real life, the smart home, developers and mental health, and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 1:30
- Q: What advice would you give to someone wanting to get involved with the open source community, coming from closed-source full-time work? How do people make time to code on the side and balance a life/family?
5:38
- Q: In Syntax 060, you mentioned making your life easier as a motivation. How do you get your data from sites that may not have an API? Web scraping? Any tools you’d recommend?
11:34
- Q: Do you think React aims toward a world with functional components only or will class based components always play a role?
17:10
- Q: Just feedback on the recent Smart Home podcast…I really enjoyed it! I have about 48 (color) HUE lights throughout my home, and use an IFTTT applet for my Ring PRO doorbell, so when someone rings the doorbell, all the lights in the home blink (e.g. so I can see when an Amazon Prime package arrives, or know someone is at the front door, etc…while I’m working and wearing my Bose QC35II’s, and of course listening to your podcast)! I’m a huge fan of the podcast since early last summer (I rarely comment, but you guys are great)!
21:37
- Q: What would you do in the event your clients sends you a “thank you” card along with cash that is MUCH lower than you are preparing to invoice them? Would you remove it from the invoice, ask them what they would prefer, etc? I’m stuck in an awkward situation and it doesn’t even cover the hosting costs.
24:39
- Q: I’ve heard a lot of good things about Next.js, but what exactly is it? How does it compare to just using the create-react-app? Is it worth it to migrate a small side project that I have to Next.js?
28:26
- Q: I take tutorials all the time for web dev. I have taken many of both of your courses. Thank you, they are great! I am completely self taught and have zero computer science education whatsoever. As well as your courses and other tutorials have taught me various languages and libraries, they do not prepare me for real work interviews or jobs. No offense. How do I make the jump from tutorials to real life?
34:39
- Q: Do you have exercises to warm up your brain before you start coding? I always find it a bit difficult to jump straight into a project. I would never start working out before warming up and I feel that’s also true about development!
36:42
- Q: How should developers deal with depression and mental health?
Links * Sentry * Freshbooks * Syntax 060: The Undocumented Wed * Syntax 118: The Smart Home * IFTTT Hue/Ring applet * Syntax 120: Gatsby vs Next * Next.js
××× SIIIIICK ××× PIIIICKS ××× * Scott: Clarity Money * Wes: Wyze Camera
Shameless Plugs * Scott’s React Hooks For Everyone * Wes’ CSS Grid 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
In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Show Notes 4:20 - How should we track users?
- Token based - generally stored in the client
- Session based - stored on the server
- Token Based (JWT)
6:00 - Token-based auth
- Stateless - the server does not maintain a list of logged in users
- Scalable - you can use serverless functions easily
- Cross domain
- Data can be stored in JWT
- Easy to use on non-web sites like mobile apps
- Hard to expire tokens — you must maintain a list of blacklisted tokens
7:48 - Session-based auth
- Stateful - generally you maintain a list of session IDs
- Passive - once signed in, no need to send token again
- Easy to destroy sessions
10:48 - How do we identify the user on each request? localStorage or Cookies?
- A common misconception is that localStorage is for tokens while cookies is for sessions
- With localStorage, we need to grab the token and send them along on each request
- With cookies, the data is sent along on each request
11:25 - Security Issues
- XSS for Tokens - make sure bad actors can’t run code on your site
- Sanitize inputs
- XSRF - CSRF tokens are needed
Links * Cookies vs Tokens: The Definitive Guide
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
In this episode, Wes and Scott talk about life management — the systems and tools for managing all the the busy details of life and work.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 5:00 - Todos
- GTD philosophy
- Todoist
- Things
12:31 - Focusing
- Focus app
- Turn off all notifications on iOS and desktop
- Rename apps
- Ask yourself why you feel the way you do
- Should be doing email? Do I need to eat that frog?
- Why do I not enjoy this?
- Sticky note on screen or desk
21:27 - How we track ideas, thoughts, and notes
- Get everything out of your head
- Markdown files
- Evernote
- Notion
27:23 - Calendar and schedule
- Google calendar
- USB light switch
33:30 - Goal tracking / Life progression
- Keep concepts and ideas in Notion
- Milestones (bigger ideas) are separated
- Use the system that works best for you
36:58 - Fun things with Notion
- What is Notion?
- Cross-linking/referencing between boards
- Episode calendar and possible episodes kanban
Links * Freshbooks * Sentry * Todoist * Things * Getting Things Done: The Art of Stress-Free Productivity * Focus * Notion * Evernote * Bryant Electric USB light switch * Bear app * Airtable
××× SIIIIICK ××× PIIIICKS ××× * Scott: LG Ultrawide Monitor * Wes: LG 4k 32" Monitor
Shameless Plugs * Scott’s React Hooks For Everyone Course * Wes’ Courses
Tweet us your tasty treats! * Scott’s Instagram * LevelUpTutorials Instagram * Wes’ Instagram * Wes’ Twitter * Wes’ Facebook * Scott’s Twitter
In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:55
- How YouTube has affected our careers
3:45
- YouTube money is just OK
6:28
- SEO is king
7:15
- The title is most important
8:59
- Description is important
11:00
- Use Tags. All of them.
12:00
- Scheduled content works
13:26
- Keeping Viewers
15:20
- Pinning comments
15:41
- Liking Comments
17:00
- Practice Finishing Sentences
17:34
- Collaborate when you can
19:00
- Use all the features YouTube has to offer
20:44
- Don’t get sucked into the BS
Links * TubeBuddy
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
In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com.
Show Notes 5:07 - Server Side Rendering
- Next.js will render on demand — this allows you to have server rendered pages on demand.
- Think of a blog website — publish a new blog post and it will immediately start working.
- Authenticated pages can be server rendered, and thus, pre-loaded for better performance.
- Gatsby runs at build time only — so you need to have all of your data ready at build time.
- Pro: This makes for very fast page load.
- Con: Large websites can take a long time to build.
- Con: Gatsby can do network fetches from the client, but these lose the benefit of SSR.
- Ease of SSR:
- Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component.
- This will probably get easier with Suspense. Demos are simple, but any real application requires harder config.
- Gatsby is Easy Peeezy!
- Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component.
11:09 - Data
- Next.js is unopinionated. Like React, it doesn’t care where your data comes from.
- getInitalProps();
- Gatsby has a number of “source” plugins which will pull in data from sources — markdown, WordPress, API, file system. Once you have that data sourced, you can query it with GraphQL.
22:50 - Routing and Creating Pages
- Next.js makes you create a page in a pages directory. You can nest these as deep as you like. If you want to pass query params, you must do so with a
?query=string. There are several third-party options for getting around this that require a node server. - Gatsby allows you to programmatically create pages with their createPage API.
- For both navigating between pages, they make a Link Component available.
30:49 - Plugins
- In Gatsby, everything goes through the Gatsby pipeline. This makes things like image compression, pagination, sass, service workers and many other progressive web app pieces very easy.
- Gatsby makes building a really good website easy.
- Gatsby Image is SOOOOO amazing.
- The scope of Next.js is much smaller. They give you a few things, but you generally bring your own approach for most things
- Routing
- Linking and prefetching
- Dynamic Importing
38:42 - Deploying and Hosting
- Gatsby is just HTML, CSS, and JS at the end of the day, so it can be deployed almost anywhere — Netlify, Github Pages, cheap PHP hosting, etc.
- Next.js is a Node app. It can be integrated into an existing Express app, or run by itself. Requires a Node server to run it.
- Next.js has a static generation option, but you’re better off using Gatsby for that.
44:41 - The verdict?
- Us Next.js for Apps, Gatsby for Websites
Links * LogRocket * The Armoury * Next.js * Gatsby * Netlify * Node * Express
××× SIIIIICK ××× PIIIICKS ××× * Scott: Motion LED Lights * Wes: The Dream Podcast
Shameless Plugs * Scott’s Pro Gatsby 2 Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about side projects — what you can learn, why they’re great, how to come up with ideas, and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:17 - Why?
- Keeps you sharp
- It’s actually useful
- Try new technology
5:28 - How to come up with ideas
- What sucks in your life?
- How do you get a competitive advantage in life?
12:10 - Quick and dirty tech
- Next.js
- Express
- diskDB
- Meteor
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
In this episode, Wes and Scott talk about the Smart Home — all the different tech available, how it works together, pitfalls to avoid, hardware, software, and more!
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.
Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.
Show Notes 2:25 - The tech
- Wifi devices
- Zigbee
- Can operator on low power
- Usually Cheaper
- Water Sensor, door sensor, temperature
- iOS
- HomeKit sucks
- You need an Apple TV or iPad to access outside of your house
9:13 - Controlling your smart home
- Smart Things
- Home Assistant
- Host your own
- Lots of add-ons
- You need to babysit it
- Android
- Google Assistant
- Google Pixel squeeze to assistant is way better than saying “Hey Google”.
- Google Home
- Google Home is awesome
- Custom sayings with IFTTT
- Custom via Routines
- Alexa
23:52 - Software
- Stringify
- IFTTT
- Basic automations
- Makers accounts
- Web hooks to trigger actions
- Homebridge
- Make non-iOS stuff work with HomeKit
- Swipe up control is nice
28:15 - Hardware
- Light Switches
- Leviton
- Lutron
- Bulbs
- LIFX
- Philips Hue
- AMAZING
- Much cheaper now than before
- Blinds
- Chromecast — turn the TV off
- Plugs
- Wemo
- Leviton
- Sonoff
- Power strip
- Change each plug or have timers
- Thermostat
- Ecobee 3 Lite
- Ecobee 4 with Alexa
- Nest
- Nest-E
- Cameras
- Ring Doorbells
- Ring Flood Light Camera
- Super slow to open the app
- Wyze cameras
- Small one
- Larger Panning Camera
- Mesh Wifi
- Google Wifi
- Amplifi
- Fire Alarms / CO2
- Nest Protect
- Dumb
- Lithium
- Garage Door Opener
- Non-connected “smart items”
- Solar powered lights on a timer. No app needed, no WiFi connection needed
- Roomba - meh. We play “find the body” when it comes home.
- Locks - Code based lights
67:32 - What we want in the future
- Scott
- Motion sensors
- Door sensors
- Locks
- Blinds
- More bulbs
- Wes
- Fireplace
- Constantly recording cameras
- Sensors galore
- Windows open
- Doors open
- Garage door
- Zigbee Hub
- Xiaomi Sensors
- Gear Best
Links * Sanity * Stackbit * Google Home Mini * Amazon Echo * Google Pixel * Apple Homepod * Raspberry Pi * GearBest
××× SIIIIICK ××× PIIIICKS ××× * Scott: Philips Hue * Wes: All the recommendations from above
Shameless Plugs * Scott’s Level Up Pro * Wes’ Courses
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
In this Hasty Treat, Scott and Wes tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:05
- Subject lines
11:26
- The body
14:33
- Best practices
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more!
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.
Techmeme Ride Home Podcast From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player.
Show Notes 1:55
- Q: Do you prefer to have your backend and frontend in separate Git repos or together? What are the trade-offs?
5:12
- Q: In web dev, what’s the difference between a freelancer and independent contractor?
9:45
- Q: Default export vs named export?
11:35
- Q: I’m looking to change careers, but I’m 41 this year. Is it too late?
16:12
- Q: Have you guys made much use of multicolumn layout? If so, only for text, or have you come up with (or seen elsewhere) any interesting out-of-the-box uses?
20:11
- Q: Since you publish your courses’ source code on Github, what do you think about people using that to learn instead of buying your course? Is it an intentional decision, or is it a compromise you’re willing to make?
23:52
- Q: When is a certification needed for both jobs and side-projects?
29:35
- How do you deal with spammers filling out forms?
34:05
- Q: Could you better explain what a slug is? I’ve heard the term thrown around on a number of your episodes, but I don’t really know what it means.
37:44
- Q: I am currently going through some currency conversion stuff for a project, what would you recommend to use for international conversions?
Links * Sanity * Techmeme Ride Home Podcast * Concurrently * Rachel Andrew * CSS Grid auto height of elements? * Cloudflare * Intl.NumberFormat
××× SIIIIICK ××× PIIIICKS ××× * Scott: Voxon Screwdriver Set * Wes: Technology Connections
Shameless Plugs * Scott’s Level Up Pro * Wes’ Courses
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
In this Hasty Treat, Scott and Wes continue their discussion about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Show Notes 2:28
- Typescript and Types
5:42
- Jest and Testing
7:48
- Exceptions & Error Tracking
Links * Sentry * Log Rocket * Rollbar * Jest
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
In this episode Scott and Wes continue their discussion about the freelance client lifecycle—from design and development, to project hand-off, and everything in between.
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:47 - Design
- Collect all assets from your client
- Logo
- Brand guidelines
- List of likes and dislikes
- Create initial look and feel
- Don’t show client too early—they can be distracted by little unfinished things
- Back up the “whys” of what you did. Otherwise, it’s just a pretty picture and and the client only thinks about it in terms of taste. Remember, you are the expert they hired, so it’s not totally subjective—you have the expertise and you need to flex that.
- This button is teal because it’s your call to action—this is the button that makes you money so we want to highlight that
- Grey text on white background is hard to read—you’ll be leaving people out if you do this.
- When possible, draw circles or golden ratio lines around everything ;)
- Be prepared for non-standard feedback
- E.g. this feels cloudy, can it look more sunny? Please make it pop, etc.
- Don’t get offended by feedback on creative work
- Clients didn’t go to art school and don’t know about good feedback.
- Clients will ignore all finished aspects of a design and only focus on the one minor thing that’s incorrect.
- Revisions
17:58 - Development
- Clear requirements make development much easier.
- Sometimes this starts at the same time or in the process of design.
- Only show dev progress if client is capable of understanding dev process.
- Showing a developed site too early can cause clients to worry about visual aspects that aren’t yet in line with the design.
- Showing to early is also a recipe for a feedback list of things you already know.
- Give regular progress updates, as previously established. Make it happen on a schedule so expectations are set and so you won’t forget. Stick to your timeline!
- Clients don’t care about technical jargon.
- Don’t tell clients about Gatsby/React as much as telling them about the benefits, how fast the site is, etc.
23:48 - Feedback and revisions
- Feedback is done in revisions or rounds.
- For smaller projects, have your client email (one email) a list of feedback.
- For larger projects, and more technical clients, use bug tracking software, such as Github issues, Trello, etc.
- Write down everything, and then have a follow-up call to discuss the feedback.
30:08 - Deployment
- Get your client to pay for domains and hosting.
- Make sure their old website has everything off of it, or host the website somewhere else.
- If you’re moving servers, best to just point the A records at the new server.
- If changing nameservers for DNS, make sure the client doesn’t have email or any other apps on that server that will be nuked or broken when moving.
- Many clients use their server to uploaded PDFs and other files that may still need to be accessible.
- If you are changing URL structure, you’ll need to be aware of any redirects.
- Backup strategies
- Restoration strategies
40:05 - Handoff
- Create a video detailing how to do each thing
- Don’t give more options than they need in the back end.
- Do in-person training when possible.
- Only teach them the things that are important for their day to day usage.
44:28 - Bug fixes and support
- Very common for clients with wrong idea of project guidelines to want to add on at the end of a project.
- Not about adding new, non-established features.
- Emergency bugs require an emergency response if they are your fault
- Set expectations and be careful what you promise.
48:03 - What to do when things go to shit
- There should be a trail of communication leading up to things going awry.
- Project is behind.
- Product is not met with acceptance.
- Client isn’t paying.
- When to fire your client.
Links * Syntax 112: The Freelance Client Lifecycle - Part 1 * Syntax 088: Pre-launch Checklist
××× SIIIIICK ××× PIIIICKS ××× * Scott: Synology 4 bay NAS DiskStation DS918+ * Wes: Backblaze
Shameless Plugs * Scott’s Level Up Pro * 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
In this Hasty Treat, Scott and Wes talk about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:11 - ESLint / JSHint / Linters in general
- Eslint took over as a flexible solution for code style and quality
- Use plugins and presets to set your rules for different types of project
- Don’t be afraid to tweak rules, they are not the word of god
10:55 - Prettier
- Strictly formatting
- Can work with or without ESLint
- Provides an enforceable standard for teams
- Configurable
- Prettier for CSS, PHP, GraphQL, etc.
18:46 - VS Code
- Red underlines like spellcheck for code
- Tooltip for lint errors
- Fix on save vs fix on command
Links * ESLint * JSHint * Prettier * Wes’ dotfiles
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
In this episode Scott and Wes talk about the freelance client lifecycle—from gathering requirements, to project hand-off, and everything in between.
Techmeme Ride Home Podcast From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.
Show Notes 03:29 - Gathering Requirements
- Probably the most important part of the process. If you botch this, you’ll be dealing with change orders and scope-creep throughout the entire project. Poor planning is why agencies have project managers and why many freelancers hate their clients.
- Ask lots of questions
- Get lots of examples
- Break down each page into functionality
- Ask about budget
- Clarify who will be updating the site
- Do this in person if possible
17:00 - Quote
- Figuring out the quote
- Break it down into major functional areas that don’t necessarily depend on each other.
- Multi-staged quotes are great because if it’s too expensive, the client knows they can add additional features later in the project.
- Explain the tech you will use in relation to how it will help their business, or how easy it will be for them to manage.
- Presenting the quote
- List what will be included
- List what won’t be included
- Make your quote valid for two weeks
- Create a template that looks professional
- Our agency had a professional template, printed on heavy paper in an embossed folder with our logo on it.
- You don’t have to go this far, but experience matters. Think Apple. You can quote more if you have a higher perception of quality.
30:20 - Timelines
- Timelines should include hard dates. You should have a “hard on” and and “hard off”.
- Assume 24-hour turnaround on questions
- Be generous with your estimates. Under promise, over deliver.
- Quoting time is a huge skill
35:58 - Contract
- You best have one
- Spell out what the client is getting (from quote)
- At the very least, have the client sign your quote
- Clear communication and a good relationship is extremely important
- Use online templates, or have a lawyer create something specific
41:09 - Setting Expectations
- Don’t make yourself available 24/7
- Establish a professional environment by not being too casual
- Your choices will set the course for your relationship
- Don’t be too quick to reply to email
- Schedule emails for 10a.m.
Links * Syntax 036: Hasty Treat - Freelancing Hot Tips * docracy * Boomerang for Gmail
××× SIIIIICK ××× PIIIICKS ××× * Scott: The Great Suspender * Wes: Food Busker YouTube Channel
Shameless Plugs * Scott’s Level 1 Styled Components Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about tidying up your code - why it’s important and how it can make your (dev) life better.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:24 - Removal
- Unneeded comments
- Unused CSS
- Unused Functions
8:06 - Organizing
- A system that works for you
- Know when to break things out into a new file, components, functions otherwise
- Index file works sometimes - other times it’s too much work
11:45 - Tiding Up
- Refactoring bad/old code
- Non-ironically, does this code spark joy?
- Unused Functions
- Add in comments
- Folding - use a code formatter
- CSS
Links * Tidying Up with Marie Kondo * Better Comments VS Code * Prettier * ESLint * Nicole Sullivan - Object Oriented CSS
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
In this episode Scott and Wes talk about work life balance. These tips aren’t hard-and-fast - part of the beauty of being a web developer is that you do get to enjoy some flexibility. Work is a big part of our live and these are tips that will hopefully allow you to get the most enjoyment out of both work and life.
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.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
Show Notes 8:06 - Know when you work best
- The 9-5 isn’t for everyone - you know when you work best, so use that to your advantage
9:39 - Work when it’s time to work, life when it’s time to life
- Don’t do laundry during work time
11:08 - Make it clear to family members when you are working
- Wishy-washy in-between can cause tension - are you working? Can I interrupt you?
- Working after hours
- Text if you need me
14:34 - Have a defined space for work
- If I bring my laptop downstairs, I don’t bring a charger
- Clean yo nasty desk space
- It’s a mental shift when you sit down - “okay now I am working”
21:14 - Know how to “zone it”
- Headphones
- Music or podcasts
- Block all distractions
- Close email
- Pay attention to what gets you there, when it stops working, change it up
24:46 - Keep hobbies
- Away from screens
- Physical or relaxing or both
26:37 - Exercise
- Good for mind and body
- Huge gains long term and short term
27:31 - Prioritize your to-do list
- One reason many people over-work is that they feel they have too much to do
- Add items to your to-do list when they pop into your head - out of your head, into your system
31:28 - Walk away from difficult problems
- Your brain will chew on problems as time goes on and help you solve them
- Literally take a walk outside
34:04 - Meetups, conferences or tutorials
- Reinvigorate your hunger for coding and make you happier both at home and work
- Easy to get burned out from working too much (or not paying enough attention to your work)
Links * Wes’ Head Bob Spotify playlist * Portable Text from Sanity * Portable Text * Forget about Gutenberg, no seriously * What you need to know about block text
××× SIIIIICK ××× PIIIICKS ××× * Scott 1: Todoist * Scott 2: Notion * Wes: PassSource
Shameless Plugs * Scott’s Level Up Tutorials Pro * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about CSS Grid Level 2 - aka subgrid.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:27 - CSS Grid Level 2 and subgrid
- CSS subgrid will allow you to place grid-items’ children along the same lines at the parent grid
5:40 - How it works - Why do we need it? What problem do we have right now?
- Create your grid as normal - you can create columns, rows, named lines, etc.
- Your grid-item will also be display grid - this is nothing new - just regular nesting of grid
- The magic comes in when you want to define the rows and or columns of the sub-item. You can inherit the parent item’s grid-rows / columns by simply saying
display: subgrid
11:19 - Browser support
- It’s about a year out
Links * Sentry is hiring * Grid Level 2 and Subgrid by Rachel Andrew * Css Grid Level 2 specs * CSS Grid Level 2: Here Comes Subgrid
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more!
DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it.
Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off.
Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.
Show Notes 1:40
- Where is the best place to start with JS coming from WordPress?
5:36
- How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.?
17:13
- What new skills, frameworks, projects are you look forward to learning in 2019?
21:35
- Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests?
28:24
- What’s your best tip for young coders to stay productive and not lose time?
32:08
- I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing?
37:26
- What is React Native? How do people tend to use it? If you want a native and web app, do they share code?
Links * WordPress * Gatsby * Javascript30 * Dead Man’s Snitch * Corntab * Syntax106: A Look Forward to 2019 * Drip * Segment.io * Hotjar
××× SIIIIICK ××× PIIIICKS ××× * Scott: Tiding Up on Netflix * Wes 1: Capital Gaines by Chip Gaines
Shameless Plugs * Scott’s Level 1 Styled Components Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about CSS units (e.g. rems vs ems, px, ch, vmax), when and why you want to be using them, tips and tricks, and more!
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 2:32
- Typography with CSS units
12:04
- Pixels
15:17
- Viewport units
15:51
- ch units
16:35
- inch/cm for print
17:19
- Percentages
18:10
- Media queries
19:41
- Flexbox (flex-grow)
20:28
- CSS Grid: flexible units: 1fr 2fr
Links * Sentry
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
In this episode Wes and Scott take a look back at 2018 as well as a look forward to what’s coming in 2019.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
CSS In Depth and In Motion - Sponsor Electron in Action from Manning Publications guides you, step-by-step, as you learn to build cross-platform desktop applications that run on Windows, OSX, and Linux. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout.
Show Notes 3:00 - What was hot in 2018?
- Tooling got easier
- GraphQL got easier and more accessible
- New GraphQL companies left and right
- CSS has gotten more awesome
- React
- Improvement in React Dev Tools
- JavaScript frameworks overall
- Edge adopting Chrome engine
- Microsoft bought Github
- Vue continues to impress and evolve
- VS Code continued to get amazing
31:29 - Predictions for 2019
- Headless CMS game is going to get really real
- We’re gonna see rails for JavaScript start making some noise
- React will continue to see growth
- Design tools will get more code-y (Figma, etc.)
- VueJS will continue to see growth
- Developer Experience Tools will continue to get easier
- Wasm
- Code splitting easier
- ES6 Modules in Node
- Server Side Hot reloading
41:00 - Scott’s Year in Review
- Released 12 courses
- Major growth in Level Up as a platform
- Hired first employees to work and grow site
- Greatly improved quality and video production
- Gave first conf talks and spoke internationally
44:03 - Wes’ Year in Review
- Released two courses - CSS Grid and Advanced React
- Started work on JavaScript course
- Delegated lots of development to contractor
- Continued to work well with assistant
- Spoke at lots of confs
- Live Syntax!
- Grew Instagram
- Continued hot tips on twitter
47:00 - BIG ANNOUNCEMENT
- We’re both having babies!
48:09 - Wes’ Goals for 2019
- Keep doing what I’m doing!
- New Website!
- JavaScript course
- Platform upgrades - been in the works for months - working on a faster rollout
- CSS course? VS Code course? More React?
- 8 YouTube Videos
- Instagram to 30k
- Parental Leave
52:26 - Scott’s Goals for 2019
- Courses
- First non-Scott LUT courses (big plans / announcements here )
- Parental Leave
- Major platform updates that are stuck in bottleneck
- More hires, more growth
- More free content
- More teaching from real world code
- Codebase to Hooks & Suspense
Links * Next.js * Gatsby * Parcel * Hasura * Prisma * TakeShape * GraphCMS * Contentful * WPGraphQL * Apollo * Github * VS Code * Microsoft Edge * WordPress * Svelte * Vue.js * Syntax 067: Goal Setting
××× SIIIIICK ××× PIIIICKS ××× * Scott: Fake or Fortune? * Wes: Heavyweight
Shameless Plugs * Scott’s new course on design systems * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about pointer events in CSS and JS - what they are, their differences, why you may want to use them, potential downfalls and more!
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:24
- CSS pointer events
10:50
- JavaScript pointer events
14:24
- What are pointer events
17:56
- Browser support
Links * CSS pointer events * JS pointer events * Pointer events support in WebKit * Pointer events Polyfill * Wes’ Javascript 30 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
In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more!
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
CSS In Depth and In Motion - Sponsor CSS in Depth in Motion from Manning Publications is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout.
Show Notes 4:15
- When to use position fixed/static/absolute/relative/sticky
15:18
- When to use height, width, max-height, max-width, top, bottom, left, right, etc.
21:28
- What about relationships between containers and their children?
27:37
- What about positioning behaviors of elements like ,
</code>, <code><video></code>, etc.?</li> </ul> <p>30:09</p> <ul> <li>Floating and clearing</li> </ul> <p>35:55</p> <ul> <li>Flexbox, Grid and responsive design</li> </ul> <p>36:58</p> <ul> <li>Mobile-first or desktop-first?</li> </ul> <p>41:20</p> <ul> <li>Viewport units - vw, vh, vmin, vmax, etc</li> </ul> <h2><a id="Links\_51" name="Links\_51"></a>Links</h2> <ul> <li><a href="http://keycode.info/">Keycode.info</a></li> </ul> <h2><a id="\_SIIIIICK\_\_PIIIICKS\_\_54" name= "\_SIIIIICK\_\_PIIIICKS\_\_54"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://www.wbur.org/lastseen">Last Seen Podcast</a></li> <li>Wes: <a href="https://wesbos.com/drone-javascript/">Flying a DJI Tello Drone with React and Node.js</a></li> </ul> <h2><a id="Shameless\_Plugs\_59" name= "Shameless\_Plugs\_59"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro">Scott’s Design Systems Course</a></li> <li><a href="https://wesbos.com/courses">Wes’ Courses</a></li> </ul> <h2><a id="Tweet\_us\_your\_tasty\_treats\_64" name= "Tweet\_us\_your\_tasty\_treats\_64"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>
In this Hasty Treat, Scott and Wes continue their discussion of libraries and tech that where super hot in the past, but not so much any more.
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:40 - jQuery UI / jQuery Mobile
- jQuery UI
- jQuery Mobile
- Sencha Touch
6:10 - Flash / Silverlight
- Flash
- Cufon
- Silverlight
- Netflix
- Happy Gilmore
- The Wedding Singer
10:54 - Grid systems
- 960.gs
- Golden
- Susy
- Bootstrap
- Foundation
16:02 - CoffeScript
- CoffeScript
- Compass
18:18 - Underescore.js
- Underscore.js
- Lodash
- jsPerf
20:04 - Less CSS
- Less CSS
- Vue.js
- Drupal
- Cappuccino
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on Typescript, e-commerce platforms vs custom, working for agencies, job-hopping and more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Vue.js In Action - Sponsor Vue.js in Action from Manning Publications is a great way to learn Vue.js. If you’re looking for a book that will teach you Vue.js from start to finish, this is the one. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout.
Show Notes 1:20
- How do you distinguish between normal and virtual pixels on high dpi devices. How do you call Pixels? Which tools do you use for optimizing Images?
5:02
- What are your thoughts on TypeScript (and selfishly, I’d like to learn about using it with React)? Any temptation to try it out if you’re not already doing so? Why or why not? Any resources you’d like to share on TypeScript?
8:35
- I have heard you guys say good things about Digital Ocean before, but am reading a lot of bad reviews about them on various websites. Are these just frustrated developers or is there any merit to these claims?
12:48
- If you were to build an eCommerce store, given that your business requirements specify that custom functionality is needed, would it be smart to roll your own solution or use Magento/Shopify/Woocommerce? If the later, what is the developer experience like? Which has the greater ability to implement custom functionality for server and client side code?
19:50
- I feel like I’m pretty “bos” at starting projects but so terrible at finishing them. As people who finish courses and projects all the time, what is your advice for getting to that finish line?
23:32
- Could you please explain how you organize your files? What is the folder structure you use for both your projects and other documents/videos and stuff?
31:38
- You guys mention working for “agencies” in the past. As a freelance web developer, what’s the best way to find these agencies, and to be employed by them? Also, can you explain what “agencies” are?
38:14
- I once read an interview Wes gave in which he mentioned that frequently changing jobs is the best way to get salary increases. Do you both believe that to be true? Is job-hopping a bad thing? Is the criticism of it justified?
41:53
- If I choose to use Next.js, does that mean I won’t be able to use new React features like hooks and suspense until/if the Next.js team implements those?
43:12
- When do you use and when do you use to wrap your many returned components from
render()?
Links * Devon Govett tweet about Typescript * Digital Ocean * Magento * Shopify * WooCommerce * Reaction Commerce * Snipcart * Next.js * Gatsby.js * True Grit Texture Supply
××× SIIIIICK ××× PIIIICKS ××× * Scott: Undertale * Wes: Ghostly Pixels
Shameless Plugs * Scott’s Level Up Pro * Wes’ YouTube Channel
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
In this Hasty Treat, Scott and Wes talk about libraries that have been super hot in the past, but not so much any more.
Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntax and get a free pair of socks!
Show Notes 4:14
- Grunt / Gulp
8:56
- Backbone / Marionette
13:00
- Bower / Components
15:46
- Compass
Links * Grunt * Gulp * Backbone * Marionette * Bower * Components * Compass
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
To celebrate episode 100, Wes and Scott are talking about Syntax - their most popular episodes, stats, Q&A, and a bunch of cool stuff about what it’s been like making this show for 100 episodes.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:45 - Celebrating 100 episodes
04:18 - Our first episode
- Syntax001 - React Tools
06:23 - Our first sponsor
- Delicious Brains
09:37 - Most popular episodes
- 10 - Syntax074 - 11 Habits of Highly Effective Developers
- 09 - Syntax039 - Is jQuery Dead?
- 08 - Syntax046 - What’s New in Javascript
- 07 - Syntax048 - VS Code Round Two
- 06 - Syntax050 - Progressive Web Apps
- 05 - Syntax018 - All About CSS Grid
- 04 - Syntax051 - Our Workflows: Design, Development, Git, Deployment
- 03 - Syntax066 - The React Episode
- 02 - Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer
- 01 - Syntax044 - How to Learn New Things Quickly
21:35 - Top countries
- Just passed 3 million downloads
- 10 - Poland - 38,731 downloads
- 09 - Brazil - 40,475 downloads
- 08 - Netherlands - 47,601 downloads
- 07 - India - 50,724 downloads
- 06 - Sweden - 55,378 downloads
- 05 - Australia - 80,654 downloads
- 04 - Germany - 109,842 downloads
- 03 - Canada - 138,250 downloads
- 02 - United Kingdom - 231,835 downloads
- 01 - United States - 1,220,519 downloads
27:34 - Top players
- AppleCoreMedia
- Overcast
- Chrome
- Pocket Casts
- iTunes
30:35 - Lessons learned about sponsors
- Pays the bills - editing, hosting, etc…
- Podcast Royale - Podcast production
- Libsyn - Podcast hosting
- They want hard numbers
- Conversions are hard to track
- It’s really cool companies and users that enjoy the product hook up
- How do we get them?
35:10 - Favorite episodes
- Wes - Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer
- Scott - Syntax044 - How to Learn New Things Quickly
38:49 - Q&A
- Q: What’s your favorite soundboard sound?
- Q: What’s your recording process like? Do you each record your streams locally then edit them together or are there any “hax” you guys have cooked up as developers?
- A: Pay someone who is good at editing
- We both have good recording gear
- We record separate files and send them our production team, Podcast Royale, for editing
- We do show notes in Dropbox Paper, which are also edited by Podcast Royale
- Q: Does Scott practice his segues, or do they just come to him on the fly?
- A: On the fly 😎
- Q: Although I am all for peace, why did you choose “peace” as your outro statement?
- A: It was a random note from Wes in the first episode and we stuck with it
- Q: how did you meet each other and decided to start the podcast?
- A: We both released a course around the same time with the same name - we started talking and the rest is history
- Syntax007 - Scott Tolinski Origin Story
- Syntax008 - Wes Bos Origin Story
51:20 - Most asked questions
- What episode was it that you ______ ?
- Can my boss come on the show and talk about bitcoin?
- Can you sick pick my thing?
- Can you do an episode on VueJS?
- Can you do an episode on Angular?
- NO EP TODAY?
54:20 - Random thoughts
- Neat to have community - lots of experts
- Twitter is great
- Sales of our own products
- Transformed Level Up Tuts
- Doing fitness, hobbies, and life as a developer is fun
- Learned a lot from researching shows and from community feedback
- Different voices can give different breakthroughs
57:10 - Future of Syntax
- No. 1 goal is to always be a fun, helpful show
- Not going to become a promotional tour stop
- Maybe more interviews
- Easy to listen to and and understand
Links * Netlify * Podcast Royale * Libsyn * Dropbox Paper * Studio 3T
××× SIIIIICK ××× PIIIICKS ××× * Wes: MongoDB Compass * Scott: Notion
Shameless Plugs * Scott - Level Up Pro * Wes - All courses
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
In this Hasty Treat, Scott and Wes talk about the costs of running a business when you’re a solopreneur or solo founder.
Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntax and get a free pair of socks!
Show Notes 3:48 - Email
- GSuite
- Missive
- Drip
- Postmark
- Mailchimp
- Mandrill
- SendGrid
- Mailgun
10:44 - Transactional Costs
- Stripe
- PayPal
- Braintree
12:31 - Software
- Sketch
- Figma
- Screenflow
- iShowU
- DaVinci
- Notion
- Todoist
- Things
- Principle For Mac
- Textexpander
- Transmit
- Cyberduck
17:03 - Services
- PO Box
17:18 - Domains
- Hover
- Cloudflare
- Name.com
- Gandi
19:30 - Backup
- NAS
- Dropbox
- Backblaze
- S3
22:12 - Labor
- Assistant
- Part-time developer
- Contractors for projects
24:53 - Insurance
- Prescriptions
- Dental
- Optical
- Critical illness
- Home insurance is higher because of business
26:51 - Professional
- Accountant
- Lawyer
- Bookkeeper
- TransferWise
29:08 - Hosting
- CDNs
- Galaxy
- Heroku
- Dokku
- Netlify
- Compose
- Vimeo
- Amazon S3
- Digital Ocean
- Now.sh
- Bluehost
- mlab
34:16 - Travel
- Taxi / Hotel
- Dinner
- Transportation
- Uber
Links * Codepen Radio - Software We Pay For
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
In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the State of Javascript - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 1:48
- What is the State of JS survey
3:58
- The tech behind State of JS
12:55
- How was the data collected?
16:38
- JavaScript Flavors
23:14
- Frameworks
31:49
- DataLayer
34:53
- Backend
40:09
- Other Tools
44:37
- Opinions
47:48
- Awards
49:58
- Criticism
Links * Nivo * Gatsby * Netlify * Reason * Parcel * Relay * Express * KeystoneJS * Ghost * Jest * GraphQL * VueX * Storybook * Real Analysis of Angular, React, and Vue
××× SIIIIICK ××× PIIIICKS ××× * Sacha: DIY and woodworking * Wes: Alex French Guy Cooking * Scott: Silverback Open 2018
Shameless Plugs * Sacha - Vulcan.js * Scott - Level Up Pro * Wes - All courses
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
In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid.
Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.
Show Notes 3:25 - What
--example-name, represent custom properties- called using
var() - Overwrite with a more specific style
- Use JavaScript to append .style.setPropert(
-
How are they scoped?
- Just like normal CSS
- Can be set on :root {}
- Can be set on any element down
9:10 - Why
-
Uses:
- Can make more sense if used semantically
- var(–accent) vs var(–yellow)
-
Independent values for things that can’t be broken up:
-
box-shadow: 2px 2px 2px 2px red
- transform: rotate(var(–rotate)) scale(2);
-
Inline properties can be picked up by regular CSS (color, size, etc.)
-
hey - Themes that can easily be changed at runtime for entire app
19:15 - Calculations
- You can use them inside of calc()
- Animations
20:10 - Bummers
- Not super well supported just yet (IE 11)
- No good fallback other than manual fallback
- Syntax - Old Browsers, Fallbacks and Polyfills series
- Part 1
- Part 2
- Part 3
- PostCSS Custom Properties
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
In this episode Wes and Scott bring you their holiday gift guide - things, ideas or experiences that would make great gifts for any developer, ranging from a few bucks to a few hundred bucks.
Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntaxfm and get a free pair of socks!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:57 - Foodie Gifts
- Hot Sauce
- Merfs
- Every Cholula Hot Sauce
- Jalapeno from Trader Joes
- Blue Top Creamy Buffalo
- Everything but the bagel Spice
- Loose leaf Teas from Teahaus.com
- Wes’ Tea Steeper
- Scott’s Tea Mug & Steeper
- Flavored Salts (No link, just go find them)
- Savory Spice Shop
- Rainbeers - make it yourself
- Beer Making Kit
- Umai Dry Steak Aging and Charcuterie Bags
11:27 - Experiences
- Knife Skills Class
- Butchering Class
- Cooking Class
- Float tank Subscription
- Massages
18:15 - Subscriptions
- Headspace
- Spotify
- HBO Go
- YouTube TV
- MeUndies Underwear Subscription
- Memrise
- LastPass
- Magazines
- Mantry Crates
- Kids Crates
23:07 - Books / Audible
- BadBlood
- Beat the bank - for Canadians Only
- American Kingpin
- Rich Dad / Poor Dad
- Kingpin: How One Hacker Took Over the Billion-Dollar Cybercrime Underground
- Anything You Want
- Essentialism
- The E-Myth Revisited
29:47 - Clothes
- Uniqlo Jeans - w/ elastic
- Carhart Beanie (TOQUE)
- Naked and Famous Raw Selvedge Denim Jeans
- Skinny Guy
- Weird Guy
- Nudie Raw Selvedge Denim “thin Finn”
- “Unbranded” Raw Denim
- Custom Leather Belt
- TNF Fanorak Windbreaker
- Hoodies
- Adidas Black-on-black NMD crewneck
- Champion Hoodie
- Sneakers
- Nike Airmax 270
- Jordans DonTrip
- RayBans with mirrors
- Original Wayfarer Sunglasses
- Under Armour Boxer Jock Underwear
- Reebok Boxer Brief Underwear
- dvlpr.io Merch
39:08 - Gadgets
- Mechanical Keyboards
- CTRL Keyboard
- WASD Keyboard
- Code Keyboard
- Ergodox
- 10W qi Wireless Fast Charger Charging Pad
- USB C Gadgets
- 8-in-1 USB Type-C Hub with HDMI
- USB C Hub
- LaCie Rugged USB-C Hard Drive
- Koomus Car CD Slot Magnet Mount for your phone
- Anker Portable Battery
- Extra Long Braided Phone Cables
- Lighting
- Micro USB
- USB-c
- Anker USB Power Block
- 4 ports with Fast Charge
- 6 ports with Fast Charge
- Wifi Hotspot
- SkyRoam Solis
- Magnet Breakway USB-C Cable that handles 87w
- Tello Programable drone
- High end mini screwdrivers
- MaxCraft 7-in-1
- iFixIt 64 bit set
48:00 - Smart Home
- Google Home
- Ring Doorbel
- Nest Doorbell
- Ring Floodlight Security Camera
- EcoBee
- WeMo Plugs
- TP Link Smart Plug
- Leviton Smart Wifi Dimmers
- LIFX Bulbs
- Sonoff $5 wifi Switch
54:40 - Grooming and Wellness
- Seki clippers
- CBD balm
- A nice comb
- Burts Bees Lip Balm in a tin
58:57 - High End
- Apple AirPods
- Bose QC 35 Wireless Headphones
- Samsung QLED TV - very high end
Shameless Plugs * Scott’s Level 1 Typescript Course * Wes’ updated course platform
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
In this Hasty Treat, Scott and Wes talk about installing dependencies vs rolling your own - the advantages and disadvantages, and how to know when to do either.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 2:15 - Reasons To roll your own
- Learning Experience
- Fun
- Features
- Add your own features
- Lightweight - only use what you need
8:08 - Reasons not to roll your own
- Battle Tested
- Actually Tested
- Time
- Money
- Experience
11:27 - Fork
- Something needs extra features
- Upstream your changes
13:10 - Some Examples
- Fetch + function vs Axios
- Date functions vs Stack Overflow copy/paste
- Lodash vs your own - try it with map/reduce/filter first, but lots of cases need Lodash
Links * React PowerPlug * Lodash * Axios * Stack Overflow
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - raising your rates, full stack designers, JWT, VS Code tips, and more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
React in Action - Sponsor React in Action by Mark Thomas from Manning Publications is a great way to learn React. It’s a clearly written, example-rich book, introducing front-end developers to the React framework and related tools. Not everyone likes learning from a video. If that’s you, React In Action is a great book that covers everything you need to know. Also be sure to check out this page for 40% off all manning books and videos.
Show Notes 2:29
- I listened to your episode on Freelancing and I was wondering how to justify an increase in my hourly rate. You mentioned that you just increased it to $100/hr and nobody griped, but I seem to have a steady stream of clients who want things for free or nearly free and I usually have that fear that if I charge them more, then I won’t get the business. Thoughts?
6:55
- I’ve started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of (I’m pretty new and it’s odd to be offered something like this so quickly, no?) if accepting. What do you think? Should I create content for a (small) website that I never heard of or continue with YouTube (or both)?
14:00
- I’ve read on Twitter that React.Context can be a good replacement for Redux. Why?
18:40
- What’s it like running a podcast?!
24:03
- I’ve seen a rise in the term “full-stack designer”. Is this a title you think will become a real thing? Someone capable of overseeing a project from concept to prototype? Thanks!
27:36
- What has been the most awkward situation you’ve been in as a dev?
31:20
- Do you have any good resources on JWT? I’m unclear when my front end needs to send what to my back end, to ensure my sites and only my sites can get the data requested from my server. Thanks for everything you do!
35:34
- How do you move selected text horizontally (or vertically) in VSCode? I’ve seen it in Wes’ videos and I tried to ask him on Twitter, but I’m sure that is a chore to keep up with. I’ve googled a ton, but the only thing I found was an extension that adjusts indentation, which is not really what I’m after.
38:57
- How do you recommend providing feedback on “bad” code to a developer more experienced than you, without coming off as an uppity, know-it-all junior who just read a bunch of textbooks??
42:39
- How do you set up an IP whitelist? I am just getting started managing databases and I am using Mongo Atlas. They require an IP whitelist for all connections. Developing from my computer is fine because I can just add my IP to the whitelist, but what do I do if I actually want to make my API or website public? Just whitelist everything? That sounds like a terrible idea…
Links * useReducer * Full Stack Radio Ep 98: Ryan Chenkie - Securing Single Page Applications
××× SIIIIICK ××× PIIIICKS ××× * Scott: Jelle’s Marble Runs * Wes 1: Good Quality Baking Sheet Pans * Wes 2: Pre-cut Parchment Paper Sheets
Shameless Plugs * Scott’s Pro Gatsby 2 Course * Wes’ Advanced React Course - use the code SYNTAX for $10 off
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
In this Hasty Treat, Scott and Wes talk about how to be well liked at work - dealing with difficult co-workers, being a better co-worker yourself, and general tips for improving your people skills.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 5:01 - Foster a culture of asking “why” and “how”
7:58 - Show your own mistakes
9:26 - Be understanding of people’s life situations and accommodate them accordingly
11:36 - Be okay with people taking your time
13:10 - Don’t take up other people’s time
15:40 - Be nice
15:57 - Share things
16:50 - Respect personal space
18:08 - Respect people’s time
Links * Adam Grant - Give and Take: Why Helping Others Drives Our Success
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
In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 2:30
- Function components
4:50
- What are React hooks?
8:12
- What problem does this solve?
12:00
- State hooks
21:50
- Context hooks
26:02
- Effect hooks
36:46
- Reducer hooks
40:40
- Ref Hooks
48:00
- Libraries already using React hooks
- Rehooks → Listing of hook libraries
- React Spring
- React Measure
- Formik
- Immer
50:30
- Resources
- Dan Abramov’s Talk
- Harry Wolf
- Use Hooks Newsletter
- Awesome React Hooks
××× SIIIIICK ××× PIIIICKS ××× * Scott: Bad Blood * Wes 1: Swindled Podcast * Wes 2: Scrub Brush Drill
Shameless Plugs * Scott’s Pro Gatsby 2 Course * Wes’ Advanced React Course - use the code SYNTAX for $10 off
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
In this Hasty Treat, Scott and Wes talk about stickers and break down Wes’ entire process for creating and selling his sticker packs. Check out Bos.af for more info.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax.
Show Notes 6:08
- Design
9:23
- Printing
16:08
- Types of Stickers
19:34
- Selling
21:43
- Envelopes, stamps and shipping
30:47
- Returns
32:42
- The future
Links * Bos.af * Patrick DePuydt * Alibaba * Sticker Mule * Shipstation
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
This week Scott and Wes are live at JAMstack_conf with games, Spicy JAM Tips, Q&As and more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info.
Show Notes 7:14 - Spicy JAM Tips
- Set default headers in your request library - this way it comes along for the ride on every request
- Don’t get hung up on “static” - static sites can be as dynamic as needed
- Don’t wait to use new tech - progressively enhance and gracefully degrade where needed
- There are many JAMStack libraries in the sea - there are many different approaches so don’t be afraid to experiment
- Side projects are key to learning - test out new tech on smaller projects first and get comfortable with it
10:10 - This, That or Both?
- Evo RX - High end Carbon Fibre Road Bike or Library for composing asynchronous and event-based operations in JavaScript?
- Jumpsuit - A rap/rock group from Flint Michigan or a minimal React/Redux Framework?
- Aphrodite - React Styling Library or Best Selling Erotic novel?
- Yugo - A minimal static site generator built in O-CAML or a super mini hatchback built in the former Yugoslavia?
- C-Control - A modern state management library for web components or studio headphone mixer?
- Yakbak - A recordable HTTP testing interface or a popular 90’s electronic toy?
- Joose - A hip east coast juice bar or a metaobject system for JavaScript?
- Easy Rooter - A client side object oriented router written in modern Vanilla JavaScript or a drain cleaning plumbing apparatus popular among local plumbers?
- Aqueduct - A server-rendered ORM and oAuth 2.0 based framework built in Dart or a early 2000’s pop group hailing from Venice Beach?
- Gort - A 1980’s animated series cartoon villain or a CLI Toolkit for RobotOps written in Go?
- Raptorize - A jQuery plugin that plays a Velociraptor screech or A popular DIY spray on truck bed liner?
21:13 - Stumped!
- Question 1: What does “age” console.log to and why?
let age = 26;
age /= 2;
console.log(age); // ??
* Question 2: What are all seven types in JS?
* Question 3: How do you pronounce “specificity”?
* Question 4: What is event delegation and when might you want to use it?
* Question 5: What is CSS @supports for?
* Question 6: An arrow function takes in an unlimited number of arguments - how would you capture them?
* Question 7: What is the difference between .slice() and .splice()?
* Question 8: How would you calculate the number of milliseconds since midnight of January 1, 1970?
* Question 9: What does “age” console.log to and why?
const age = console.log(100) || 200;
console.log(age);
31:26 - Overrated or Underrated?
- Arrow Functions
- Downtown scooters
- Using Sass inside Styled Components
- Website that play sound in the interface
- The amount of JS frameworks
- Soft close toilet seats
- GraphQL
- ES6 Destructuring
- Instapots
- Implicit Return
- CSS Houdini
- Service Workers and Offline Applications
- Modern Design Tools - Figma, FramerX, Moudlez, Sketch, Studio
- Decorators
- Optional Chaining Proposal
42:35 - Q+A with Scott and Wes
- Since this is your first time meeting, what was the thing that surprised you the most?
- If you could create any Tycoon game, what would you create?
- In 2018, how concerned should we be about no-JS users?
- How many spaces should a tab be?
- How important is integration testing and the decentralized ecosystem?
- What are your thoughts on the new React Hooks API?
- Are we going to have a serverless function architecture apocalypse?
- Are you ever going to create an online course together?
- How will the future look for component-based design?
- What’s your least favorite jam?
- What would be your goto headless CMS?
- What do you disagree on?
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
In this Hasty Treat, Scott and Wes are back for another edition of Stumped! where they try to stump each other with interview questions. Today’s questions are from Flashcards for Developers.
EmailOctopus - Sponsor Email marketing for less, via Amazon SES. EmailOctopus sends your emails through Amazon’s Simple Email Service (SES), saving money without sacrificing deliverability. With simple setup and all the features you would expect, EmailOctopus is as flexible as you need it to be. Get started today at emailoctopus.com/syntax and get your first three months free.
Show Notes 4:03
- What’s the difference between synchronous and asynchronous code?
5:56
- What’s the difference between .call and .apply?
7:08
- How do you share code between files?
8:18
- What’s the difference between double equals and triple equals?
10:40
- What’s the difference between null, undefined, and undeclared?
14:18
- What is the event loop?
- Philip Roberts - What the heck is the event loop anyway?
16:02
- Why is extending built-ins never a good idea?
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
In this episode Wes and Scott discuss their pre-launch checklists. They talk about performance, accessibility, compatibility, SEO, analytics, and more - all the things you should check before launching something to the world.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
.tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”.
Show Notes 1:45 - Overall
- Let robots do the work for you - use auditing tools
- Lighthouse
- SEO Checkers
- Accessibility checkers like axe
2:58 - Performance
- Compress those images
- Build process
- Cloudinary
- ImageOptim
- imgIX
- Minify
- Code Splitting
- Smaller bundles where it makes sense
- A future where it’s done for us
- Run page speed tests like Google PageSpeed Insights
- Don’t service worker on launch
- Syntax Ep 50 - Progressive Web Apps
11:43 - Compatibility
- Test on actual browsers that need to be supported
- Ask people to check on their devices
- Use a service like Browserstack
- Browser resolution and ratios
- Cache busters
16:00 - Sales / Credit Cards
- Use package.lock
- Have multiple people test your checkout
- Make sure your company name is listed on customer’s credit card bills
- Have a phone number listed for disputes
24:55 - Tips from the Trenches
- Secure API endpoints
- Scale up server just in case
- Early access
- Soft launch
- Make sure URLs are correct - no “localhost:3000”, etc.
31:25 - Content
- Check spelling and grammar
- A working 404 page
- Check for leftover placeholder text → launching with lorem ipsum is not good
34:39 - Accessibility
- Alt text
- Run color contrast checker
- Run Lighthouse
- Correct tab order
- Use the site with keyboard only and make sure it’s a good experience
37:35 - SEO
- Sitemap created and uploaded to Google Webmaster Tools
- SEO checkers
- Meta tags
- Correct heading hierarchy
41:55 - Analytics
- Google analytics
- Facebook tracking pixel
- Drip
43:23 - Server config & access
- .htaccess
- redirects where needed
- robots.txt
- prevent indexing of some pages
- Enable GZIP
- Caching
- Cloudflare or other CDN
46:12 - Company Processes
- Make sure tests are passing
- Git issues are closed
- Merge pull requests
- Write documentation on processes (readme, etc.)
- Deploy to staging environment and test production build
- No unwanted logs or errors left in production build
- DNS Propagation
××× SIIIIICK ××× PIIIICKS ××× * Scott: Swindled Podcast * Wes: FIFO Bottles
Shameless Plugs * Scott’s Level Up Pro * Wes’ Advanced React Course - use the code SYNTAX for $10 off
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
In this Hasty Treat, Scott and Wes conclude a three-part series about old browsers, fallbacks and polyfills. In part three, they talk specifically about transpiling and polyfilling.
VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.
Show Notes 2:20 - Polyfills and Transpile
5:18 - Back in the day
- Border-radius htc hack
- PNG fix for transparent PNGs
- Flash for custom fonts
- Cufon and SIFR
10:48 - JavaScript Polyfills
- Features are polyfilled
- MDN Polyfill
- Core-js
- Polyfill.io
- HTML5 Cross Browser Polyfills
13:47 - JavaScript Transpile
- Syntax is transpiled
- babel-preset-env
- Babel has plugins and presets
- Meteor bundle to different browsers on demand
- There are polyfills for most things, but performance can be an issue
- Resize observer
- Intersection Observer
- Some things can’t be done with either
- New browser APIs
- Service workers, device access, inline video on old iOS, etc.
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - working with designers, criticisms of WordPress, avoiding burnout, time management, and more.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
.tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”.
Show Notes 5:05 - How can you help a designer understand how styling works and how layouts work in the web? In other words: How do I explain my boundaries as a front-end developer to a designer?
- Work closely with the designer
- Allow the designer to push your limits
- You can help them understand by:
- Showing them poor performing websites
- Showing them things that usually are taxing on the GPU to paint - rotations, background images, drop shadows, etc.
- Don’t be afraid to let a tough design push your boundaries
13:23 - How do you manage your time for learning new things when you have children and a daily full-time job?
- Those who figure out how to make it a priority will win out
- Family first - talk to your spouse
- Ask your boss for time to learn and grow
- Find ways to get paid for learning
19:45 - How do you deal with burnout in this constantly evolving front end tech ecosystem?
- Make time for hobbies away from the computer
- Do projects just for fun
- Solve your own problems
- Syntax 035: Keeping Up with the Codeashians
- Syntax 041: Preventing and Dealing with Burnout in Web Development
25:00 - Do you code at night (past 9pm)?
- Start your wind-down time earlier
- Let your brain wok on problems while you sleep
- Get it out of your head
- Listen to podcasts, audiobooks, etc.
29:23 - How do you compress your videos/audio for your courses/tutorials?
- Handbrake Fast 1080
- Use presets
- Output from video editor, rip from YouTube, or compress directly from video editor
33:10 - It seems like in the web dev community, a lot of people give WordPress crap. Any idea why?
- WordPress is dope - people just like to complain.
- WordPress is often one of the first things people learn and have bad memories of it
- It’s easy to write bad code with WordPress
- It can be slow
- It can attract a certain type of developer
33:10 - What are some of the biggest mistakes that people make when they are learning programming and what’s the best way to overcome them?
- Don’t focus on too many things
- Don’t worry about picking the right technology
- Focus on the fundamentals
- Let your curiosity and excitement drive you
- Celebrate wins
40:29 - What are your best tips for writing documentation?
- Start with basic API documentation, them move to more “article style” docs
- Use tools like CodeSandbox and Swagger
- Syntax 073: Reading Documentation
43:08 - What are some good questions or techniques to better understand a client’s requirements?
- How does your business work right now?
- What are people coming to the website for?
- Questionnaires are good - they get people thinking
- It’s your job to understand what a client want out of a website - what problems they have and need solved
45:38 - Do you guys have any tips for taking over maintenance and development of existing websites where the previous developer is no longer reachable?
- Take time to asses the codebase before writing anything
- Learn what’s there any and why
- Don’t start ripping out code without understanding what’s really going on
- Don’t leave it worse than you found it
- It depends on the stack, but it’s probably worth giving it an honest go before re-writing the whole thing
××× SIIIIICK ××× PIIIICKS ××× * Scott 1: Drillbrush Bathroom Surfaces Tub, Shower, Tile and Grout All Purpose Power Scrubber Cleaning Kit * Scott 2: iOttie * Wes 1: Sabrent Wireless Charger * Wes 2: CD Player Mount
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
In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them.
VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.
Show Notes 3:08 - CSS Grid and Flexbox
- Flexbox old spec
- Flexbox new spec
- CSS Grid
- Some popular options for supporting for supporting CSS Grid and/or Flexbox:
- Just serve the mobile layout
- Display block
- Separate layout that you will eventually delete
- Can I Use
- Do websites need to look exactly the same in every browser?
- Modernizr
- CSS3, Please!
- Autoprefixer
12:38 - CSS Variables
- Double define
- Just like Grid, unknown def will be ignored and fallback to CSS
- CSS Houdini
17:00 - Fallback Code
- @supports
- Display block then display grid
- Feature Testing
- Detect the browser as a last resort
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
In this episode Wes and Scott discuss fitness for developers. As a follow-up to Episode 20, they talk about the status of their fitness goals from that episode, what’s worked, what hasn’t, and how you can be more fit yourself in 2018.
DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:30
- Why is fitness important as a developer?
6:08
- Working Out Update: Wes
14:37
- Working Out Update: Scott
25:06
- Nutrition Update: Wes
35:12
- Nutrition Update: Scott
45:40
- Supplement Update: Wes
48:00
- Supplement Update: Scott
52:18
- Plans for the future: Wes
54:53
- Plans for the future: Scott
××× SIIIIICK ××× PIIIICKS ××× * Scott: Fitness Blender * Wes: Dr. Peter Attia - The Drive Podcast
Shameless Plugs * Scott’s Level Up Pro * 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
In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all.
VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.
Show Notes 5:10 - How do you decide if you should support an older browser?
- Google Analytics Data
- User base / Money earned from that audience
- IS it worth it? Time vs Money?
11:35 - How do you test your websites and app in older browsers?
- Actual hardware - there’s no substitution for the real thing
- Browser Stack
- Virtual Box
- Modern.ie
- Can I Use
18:24 - Supporting and Testing Mobile Browsers
- Resize your browser
- Build a device lab
- Remote Debugging
- Browser device view
- Faking Geolocation
- Emulators in XCode / Android dev tools
- Browsersync
- Ghostlab
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
In this episode Wes and Scott continue the discussion of their favorite top 18 new things in Javascript.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Graph CMS - Sponsor GraphCMS is trying to be the world’s most developer friendly CMS. It’s a great way to build a GraphQL API without having to write a custom GraphQL server. Try out the API-first CMS of the future today at graphcms.com/syntaxfm.
Show Notes 3:30
- Spread
8:40
- Rests
11:54
- Arrow Functions
15:48
- Default Function Arguments
19:47
- Named params
21:26
- Modules
35:35
- Classes
41:54
- Things we never use
Links * Jake’s Minesweeper
××× SIIIIICK ××× PIIIICKS ××× * Scott: Trader Joe’s Everything by the Bagel Sesame Seasoning Blend * Wes: Trader Joe’s Green Dragon Hot Sauce
Shameless Plugs * Scott’s Better Javascript Course * Wes’ ES6 For Everyone
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
In this Hasty Treat, Scott and Wes talk about this year’s Hacktoberfest - a great way to support open source.
NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.
Show Notes 2:42
- Hacktoberfest - The rules
7:35
- Things to PR
12:56
- Things not to PR
18:05
- How Pull Requests work
21:45
- Some of our repos
- Wes’ ES6 course blog posts
- Syntax Show Notes
- KeyCode.info
- CSSCursor.info
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
In this episode Wes and Scott discuss their favorite top 18 new things in Javascript.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
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.
Show Notes 6:02
- Const / Let
10:00
- Template literals / Template strings
- Toggle Quotes Extension
- Prettier
14:29
- Object destructuring
21:28
- Array destructuring
27:25
- Function Param destructuring
30:14
- Promises
- Wes’ Async + Await Talk
36:24
- Async + Await
- Syntax Ep 028 - Async + Await
40:59
- Object Computed Property Name
43:42
- Object Method Syntax
Links * Denver Startup Week
××× SIIIIICK ××× PIIIICKS ××× * Scott: Red Bull VC One World Final 2018 * Wes: Jura Impressa
Shameless Plugs * Scott’s Better Javascript Course * Wes 1: CSS Grid in 45 Minutes * Wes 2: Async + Await Talk
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
In this Hasty Treat, Scott and Wes are back for a second edition of Stumped! where they try to stump each other with interview questions from 30 Seconds of Interviews.
NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.
Show Notes 5:05
- What are defer and async attributes on a script tag?
7:15
- What are the differences between var, let, const and no keyword statements?
8:45
- What is a callback? Can you show an example using one?
9:52
- What is recursion and when is it useful?
12:06
- What is the difference between the array methods map() and forEach()?
- Syntax Ep 023
14:02
- What is Big O Notation?
15:28
- What does 0.1 + 0.2 === 0.3 evaluate to?
- wtfjs
17:44
- What is CSS BEM?
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
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
In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you.
NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax.
Show Notes The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity.
3:18 - The effects of negativity and how the web industry is improving
- Mental health awareness is very real
- Stack overflow sees that it needs to change
- Linus Torvalds’ apology
- Negativity is a disease, and it spreads
- Positivity is a force as well
- You can be constructive while still being nice
- Dan Abramov, Addy Osmani, Sarah Drasner are all amazing examples of people pushing the web forward while having a smile on their face
11:50 - Healthy ways to approach disagreements
- Never assume malice
- Kill them with kindness
- Take note of the people you admire and how they deal with aggressiveness
17:08 - The power of positivity
- Inspire the change you want to see
- It’s good for your productivity - it makes you feel good
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
In this episode Wes and Scott discuss specialization vs generalization - the different ways one can be a generalist or a specialist, advantages and disadvantages to both, and, ultimately, which is the better career path.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Dev Lifts — Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called Fit.Start. Get 50% off with the coupon code “tasty”. Check it out today!
Show Notes 4:18 - What is a specialist?
- Someone who is very good at one or two things
- Can be very lucrative if you’ve taken the time to become well-known in you’re industry
12:20 - What is a generalist?
- Two ways to look at generalists:
- Someone who tries to do a little bit of everything (e.g. a developer who does Wordpress, Drupal, Django, Rails, etc.)
- Someone who builds related skills around one area (e.g. a JavaScript developer who can code up a backend and a frontend)
- There will be more jobs available for the dev with tightly integrated skills in related areas than a true “jack of all trades”.
22:22 - Frontend vs Backend
-
Frontend
- Frameworks (React, Vue, etc.)
- CSS
- Performance
- Animations
-
Backend
-
Web servers
- Serverless / AWS
- Scaling
- Frameworks
- Performance
- Databases
- Docker
- CI
26:50 - When to widen your focus
- When you are complacent with your mastery
- You need a skill to get something done.
- For fun
- For a specific job
30:42 - When to narrow your focus
- You don’t feel control over your skills
- You are missing out on employment because a lack of skills in one department
- You feel overwhelmed by the options available
- You want to be the "go to person”
- For fun
35:48 - How to master and expand
- Focus on one skill at at time. Master it and then expand on your skillset
- Find satellite skills - things that work in harmony
38:47 - Scott’s journey
42:31 - Wes’ journey
44:55 - How to know where to focus
- Necessity will dictate a lot - what do you need right now?
- Job postings - you can stack the deck in your favor by learning React. Once you are in, you’re can lean anything you want.
- Follow your heart - but have a plan
51:03 - Should I be a generalist or a specialist?
- Wes: There is nothing wrong with having a large skillset as long as you aren’t mediocre at everything. If you’re optimizing for hire-ability I think having a defined focus on either front-end or back-end is best, but still an understanding of how the other works. Ideally you have 1) Very good JS skills, 2) an understanding of how things work on both ends.
- Scott: You can do either, but whatever you do, do it well. It’s easier to do a few things well than many things well. That said there are some virtuosic devs out there who can be amazing at many things, however those people are not common. Most people have holes in their armor.
Links * JAMstack_conf
××× SIIIIICK ××× PIIIICKS ××× * Scott: Great British Baking Show * Wes: 1 Pointless Packaging Instagram / 2 Ozark Season 2
Shameless Plugs * Scott’s React Testing for Beginners Course * 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
In this Hasty Treat, Scott and Wes talk about feedback and criticism in the web industry.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:00 - Getting Feedback
- Don’t assume malice - tone is easily lost in digital communication
- Don’t take it personally
- Evaluate the feedback through the eyes of who it’s coming from
- Look for the truth in the feedback
- Be open to feedback
15:15 - Giving Feedback
- Don’t be negative - phrase your feedback in positives
- Don’t give unrequested feedback
- Explain the why behind your feedback
- Don’t be rude or an asshole
- Use Tools and Standards for Code Quality
- Give an opportunity to improve
- Explain the “why” behind the feedback
- Sandwich criticism with something positive
- When things are heated, try to diffuse the situation
- Give frequent positive feedback
Links * Tweet from Dan Blundell * Tweet from Dan vs Code * Manager Tools’ Feedback Model * Elon Musk on The Joe Rogan Experience
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
In this episode Wes and Scott discuss 11 habits that will make you a better developer - everything from understanding the business goals behind your projects to maintaining work-life balance, staying curious, and developing empathy.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
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 2:55 - You understand stakeholder and business goals
- What is the website (or project) ultimately trying to accomplish?
- How does the business make money?
- Don’t get caught up in your own “mama drama” about frameworks, but instead focus on how a particular framework will help achieve the end goal of the business
5:13 - You’re curious and always learning
- This industry is ever-changing and isn’t slowing down
7:36 - You have an open mind about new technology
- Don’t “poopoo” something because it’s intimidating, new, scary or different
- Like foods you’ve never tried, sometimes something unusual turns out to be game changing
9:57 - You ask for help
-
LifeHack - most people know more than you
- Be comfortable with NOT knowing
- Be comfortable with failing and with how others might perceive that
- Check your ego at the door
15:35 - You help others
- Helping others solidifies your own knowledge
- Answering questions
- Stack Overflow
- Quora
- Blogging
- YouTube videos
- Mentoring co-workers
- Not offering unwanted advice
19:12 - You have a “problem solver” mentality
- General curiosity - figuring out why things aren’t working
- Break things down into testable components to pinpoint an issue
- Have a clear head under pressure (e.g. interviews)
24:37 - You have fun with what you do
- Enjoying challenges
- Even if something isn’t particularly fun, you find ways to make it fun and interesting
27:54 - You understand work-life balance
- Burnout is huge in our industry
- It can be difficult when you love what you do, but it’s so important to maintain balance
34:00 - You are empathetic to your co-workers and users
- Be a team players while getting things done
- Make everyone around you better at what they do
- Be someone others want to work with by being inclusive and professional
- Don’t make inappropriate jokes, put co-workers in a tough position, etc.
37:08 - You pay attention to detail
- Think about edge cases
39:03 - You’re part of the community
- Local meetups / lunch and learn
- Twitter #100daysofcode
- Conferences
××× SIIIIICK ××× PIIIICKS ××× * Scott: Overcooked! 2 * Wes: Book - Rich Dad Poor Dad
Shameless Plugs * Scott’s React Testing for Beginners Course * Wes’ Advanced React Graph QL 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
In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 5:10 - What are the different kinds of documentation?
- Tutorials
- Docs
- API references
- Video docs
-
Examples of good documentation
- Stripe
- Next.js Examples
- New PayPal Docs
- Gatsby
- Jest
- Meteor
14:34 - How to read documentation
- Understanding how you learn will save you lots of time
16:03 - Understanding Parameters
- Parameter types
- Required / Optional
- Parameter order
22:45 - How do you tackle learning something new?
- Look at some examples
- Scan the entire docs to get an idea of the surface area
- Have something specific in mind that you want to build
27:34 - What to do when the docs suck?
- Look at other people’s code
- Chat rooms
- Tests for examples
- Read the source code
- Github search
- Contribute
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
In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more!
Cloudinary - Sponsor Cloudinary is a heavy duty media hosting stack for your websites and applications.
Also, check out Making Media Accessible: How to Automatically Generate alt Text for Images. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets.
Deque - Sponsor Deque is the amazing company behind the aXe accessibility testing tool that over 200,000 people use to ensure their websites are accessible.
For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called Attest. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications.
Show Notes 6:00 - Basics
- What is accessibility?
- Amy Carney Tweet
- Tim Berners Lee Quote
- a11y
- What types of disabilities are there?
- Temporary, situational, and permanent
- Tweet thread with lots of info
15:03 - How do you write accessible code (easy wins)?
- Clean HTML
- Semantic elements
- Use the alt attribute on images
- HTML5 (article, section, header, footer, aside)
- Proper inputs types - number, text,
- CSS order property on Flexbox and Grid
- Colors and proper contrast
- Use links and buttons properly
- Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.)
- Introduction to ARIA
- Using ARIA: Roles, States, and Properties
- Keyboard only navigation
- Tabindex
- Skip to content
- “Skip Navigation” Links
- a11y ESLint rules
- Video captions for ESL
- Transcripts for Podcasts
44:48 - Tools
- aXe
- Lighthouse - Audits tab in Chrome dev tools
- Inclusive Design Posters
- HTML Code Sniffer
- Pa11y runs code sniffer from the CLI
- Accessibility features in OS
- Screen Readers
- MacOS VoiceOver
- NVAccess
- Chrome Vox
54:35 - Resources
- The A11Y Project
- Bulb Accessibility Audit from Heydon
- Deque Youtube Channel
62:22 - Important Ideas
- Use your website with accessibility tools turned on
- Sit with someone using a screen reader
- Amy Carney’s Tweet
- Mike Behnke Tweet
- moose of letters’ Tweet
Links * Syntax033: Large Files - CDNs, Image Compression, Video Hosting, and Big Zips
××× SIIIIICK ××× PIIIICKS ××× * Scott: SpeedCurve * Wes: Netflix - Magic for Humans
Shameless Plugs * Scott’s React Testing Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes try to stump each other with interview questions from 30 Seconds of Interviews.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:33
- What is the difference between the postfix (i++) and prefix (++i) increment operators?
7:15
- What’s the difference between a static method and an instance method?
9:25
- What is a focus ring? What is the correct solution to handle them?
11:20
- How does hoisting work in JavaScript?
- Syntax 017 - 22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More
12:47
- What are the advantages of using CSS preprocessors?
14:29
- What is memoization?
15:48
- Describe the different ways to create an object. When should certain ways be preferred over others?
19:15
- What is event delegation and why is it useful? Can you show an example of how to use it?
22:06
- How do you compare two objects in JavaScript?
26:00
- Can you describe how CSS specificity works?
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
It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, and more.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
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.
Show Notes 5:00
- Why don’t you work with Typescript?
10:52
- How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)?
13:40
- What is meant by the word “state” when referring to Vue or React?
16:32
- How do you practice and get better at “soft skills” (e.g. burnout, freelancing, time management, confrontation)?
- Syntax 025 - Dealing with email overload
- PaperKarma - The App to Stop Junk Mail
28:23
- Do you guys use different environments (e.g. “QA” and “Prod”)? What are some best practices?
- Semaphore - Test and deploy your code
- Sentry - Open-source error tracking
32:43
- As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries?
38:52
- What would WordPress be like if it were built on Node and GraphQL?
- Ghost
46:54
- I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too?
51:16
- How do you handle high level page layout when using styled components?
53:13
- As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over.
Links * react-async-script-loader * Netflix Explained
××× SIIIIICK ××× PIIIICKS ××× * Scott: Alfred Emoj * Wes: Motherboard YouTube Channel
Shameless Plugs * Scott’s React Testing Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk about prototyping and design tools in the development space, specifically Framer X - what it is, what it isn’t, and some cool stuff coming down the pipeline.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 3:35
- Framer X - What it is and what it isn’t
13:20
- What it means for other prototyping and design tools
17:00
- Future of prototyping and design and development
21:40
- Final thoughts
Links * Scott’s Framer X Fist Look Video * Sign up for Framer X Beta
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
In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects.
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.
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.
Show Notes 6:18 - General Design Tips
- Spacing is important
-
Using patterns and textures
- Subtle Patterns
- Hero Patterns
- Heroicons
- FlatIcon
- True Grit Texture Supply
- Steve Schoger
-
Use subtle gradients
-
ColorSpace
-
Use subtle drop shadows
-
Multiple shadows on one element can have a nice effect
-
Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white
-
Use CSS Variables for custom blacks and whites
- CSS default colors are almost always too harsh
-
Default browser UI is almost never the best UI
-
Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been
40:22 - UX Design & Animation
- Don’t use animations when not necessary
- Subtle scale/transitions on hover can be a nice effect
- Particles.js
- Patagonia’s Bears Ears
- CSS transitions vs Physics based
51:30 - How To Get Better
- Follow UI-themed Instagram accounts
- siteInspire
- Dribbble
- UISources
- Follow Steve Schoger
- Find a free mockup and build it out pixel for pixel
- Take time to challenge what you think is possible or doable technically and creatively
××× SIIIIICK ××× PIIIICKS ××× * Scott: Louis Cole * Wes: r/posthardcore Spotify Playlist
Shameless Plugs * Scott’s React Testing Course * Wes’ Courses
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
In this Hasty Treat, Scott and Wes talk goal setting - why it’s important, when to do it, how to stick to them, and more. Tweet us your goals with the hashtag #syntaxgoals.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:14
- Setting SMART goals (Specific, Measurable, Attainable, Relevant, Time)
7:45
- What kinds of thing should you set goals for?
10:49
- Business goals
16:50
- Visualizing Goals
22:58
- When should you set goals?
27:42
- Accountability
Links * ProfitWell * Forever Jobless Goals Worksheet
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
In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works.
Dev Lifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called fit.start(). Get 50% off fit.start() with the coupon code “SYNTAX”. Additionally, the first 10 people to use the code "TASTY" get 50% off your DevLifts Premium subscription. Check it out today!
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
Show Notes 5:23
- Components
12:30
- JSX
25:13
- Data and Props
44:48
- Fetching
49:22
- Event Handlers
54:00
- Instance classes + properties
55:02
- Lifecycle Methods
59:55
- Context
1:01:35
- Routing
Links Preact
Inferno
How to Comment in JSX (article)
Apollo
Redux
LevelUpTutorials.com Level II React Course
React Informed (forms)
Meteor
Axios
Firebase
Gatsby
Here’s how React’s new Context API works
××× SIIIIICK ××× PIIIICKS ××× * Scott: Dark Net Diaries Podcast * Wes: Any suggestions for key management products? + Iliza Shlesigner Stand-Up
Shameless Plugs * Scott’s Level Up Tuts Pro * Wes’ Courses
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
In this Hasty Treat, Scott and Wes discuss how they create courses, design and build curriculum, as well as insights and best practices for content creation.
Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
Show Notes 4:32 - Wes’ process
- Figure out what to make
- Build the thing you’re teaching in the course
- Have it reviewed by experts
- Simplify and create a linear flow for what you’re teaching
16:25 - Scott’s process
- Chose a topic
- Build the thing
- Create the outline as you go
- Have goals in mind, for individual topics
- Record with final code open
28:25 - How to get started
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
Scott and Wes talk office setups and all things gear. Gotta get the gear!
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
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 11:00
- Wes’ gear
- Scott’ gear
- Scott’s podcasting/screencasting gear
13:30 - Computer
- Wes: Macbook Pro 15"
- Scott: Macbook Pro 15"
17:39 - Monitors
-
Wes:
- [22" vertical Cheap Acer: https://amzn.to/2vkXomG
- [27" Dell 4k - https://amzn.to/2Mo3NnO
- [Ergotron Monitor Arms - https://amzn.to/2voS9CF
-
Scott:
-
LG 34UC88-B 34-Inch 21:9 Curved UltraWide
- VIVO Dual stand
28:33 - Keyboards and Mice
- Twitter Thread about mice
-
Wes:
- Apple Magic Keyboard
- Magic Mouse
- Logitech MX Master 2S
-
Scott:
-
CODE Keyboard
- Apple Magic Trackpad
33:14 - Desks
-
Wes:
- Ikea Countertop
- Ikea Alex Drawers
-
Scott:
-
Ikea Karlby Walnut Countertop + Jarvis Legs === dope desk!
37:53 - Chairs
-
Wes:
- Herman Miller Aeron Polished Aluminum
-
Scott:
-
Herman Miller Aeron
39:24 - Headphones
-
Wes:
- Bose QC35s
- Apple AirPods
-
Scott:
-
AKG K 553 Pro
- M-Audio Bx8 monitors
- Polk Audio 12” Subwoofer for that booom booom!
43:50 - Hard Drives / Backup Systems
-
Wes:
- WD My Passport 1TB
- Backblaze Backup
-
Scott:
-
WDMyCloud EX4100
47:28 - Charging Stations
- Wes:
- Anker USB Wall Charger
48:52 - USB Splitters
-
Wes:
- CalDigit TS3 Plus
- Amazon Basics USB 3 Hub
-
Scott:
-
CalDigit TS3 Plus
50:35 - Wifi
-
Wes:
- Amplifi HD Mesh
-
Scott:
-
Google Wifi Mesh
54:26 - Recording Gear
- Check out episode 037 for a full rundown of all of our recording gear
-
Wes:
- Heil PR40 Pack
- dbx 286s
- Focusrite Scarlett 2i2
-
Scott:
-
Electro Voice RE-20
- Sony a7 III
- Focusrite Scarlett 2i2
58:32 - Misc
-
Wes:
- Peak Design Everyday 30L Backpack
- Skyroam Solis Hotspot
-
Scott:
-
Google Home
- Smart outlet that shuts off all my stuff
- topodesigns.com
Links * Laravel Nova
××× SIIIIICK ××× PIIIICKS ××× * All of the above ;)
Shameless Plugs * Scott’s Level 1 Apollo Client with React Course * Wes’ Advanced React Course - Coming Soon
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
In this Hasty Treat, Scott and Wes discuss all things cross-origin - APIs, Javascript, JSON, CORS, and more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:52
- What is JSON?
5:09
- Origin policy in the browser
6:00
- Cookies + how they work
6:38
- How do you get data from one site to another?
7:00
- JSON P (JSON with Padding)
9:00
- CORS (cross-origin resource sharing)
- CORS errors + learning on the fly
11:31
- Canvas elements
12:24
- Proxies
- Crossorigin.me
- Enable-cors.org
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
It’s another potluck episode in which Wes and Scott answer your questions about freelancing, portfolios, code editors, meetup tips, switching to windows and more!
VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:37
- Question: Maaz Syed Adeeb - Are editor fonts worth the investment (if yes, why)? Why are they such a big deal in the first place?
- Operator Mono
- Dank Mono
- Fira Code
6:10
- Question: Ste O’Neill - How can I come up with ideas for projects? What can I put in a portfolio when I work for an agency?
9:10
- Question: JavaScript Joe - If I only have two hours per week to work on coding projects, do I spend it building a side project or do I spend it contributing to open source? What’s your experience contributing to open source?
10:45
- Question: Diane - Why is Git so hard to grasp in team projects? What are the best resources to master it?
- Try Github
13:35
- Question: Grant Chambers - What are some tips for going to your first meetup?
- React Meetups
20:23
- Question: Michael Hoffman - Have you ever thought about using Linux or Windows as your main operating system?
- Google Pixelbook
- Microsoft Surface Pro
- Figma
- Logic
- Sketch
- Mint OS
- Final Cut Pro
27:39
- Question: Would you recommend using Upwork for starting out freelancing or something similar?
31:18
- Question: Mike C. - What do you guys think about sites like Codewars and Code Fights? Being new to web development, I find the problems hard to solve. Is it important to know how to solve all these problems? If so, how do I get better at developing the mindset to solve them?
- JavaScript 30
- Level Up Tutorials
38:47
- Question: When I work on a website, I need to record user names, passwords, URLs, keys, logins, cPanel, WordPress, ftp, MySQL for each and every website, local and remote.
Currently, I use a text file to save all that information. How are you storing all this info? How others do it? How the pros are managing this? Pros and cons? - SSH Key
- LastPass
- 1Password
42:15
- Question: Chandler Bing - What happened to Scott’s YouTube channel?
44:57
- Question: Whose idea was it to do a podcast? Who approached whom first?
- Josh Owens
- Egghead.io
××× SIIIIICK ××× PIIIICKS ××× * Scott: Jarvis Legs * Wes: King of the Road
Shameless Plugs * Scott’s Level 1 Apollo Client with React Course * Wes’ Social Media + Twitter + Instagram + Facebook
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
In this Hasty Treat, Scott and Wes discuss npm, yarn, lock files, why they’re useful, why you would or wouldn’t want to track them in Git and much more!
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 4:10
- What is npm and yarn?
8:00
- What’s the difference between npm and yarn?
12:00
- What is semver?
16:40
- What is the dependency tree?
- This is the problem that lock files solve
20:32
- Cool new features of npm and yarn
- npx
- security warnings
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
What is the undocumented web? Scott and Wes dive into it, discussing APIs, faking, scraping, automation, proxies as well as tips and tricks for best practices.
Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 3:05 - What Is the undocumented web?
- When traditional methods don’t give you what you want
- Wild West
6:10 - Undocumented APIS
- Instagram’s private API
- Use dev tools’ XHR Request
- React Dev Tools will also have the data
- Ep 008 - Wes Bos Origin Story
- Realtor.ca - MLS Mapping
- Simon Willison’s Zeit Day Talk about XML files
- Charles Proxy App - also good for debugging requests
17:34 - Faking
- Faking User Agents
- Sending headers from requests
- Free Blackberry wifi on plane
23:52 - Scraping
- What is craping?
- Cheerio - jQuery like node package
27:30 - Automation
- Cron Jobs
- Filling out forms instantly
- Headless browsers
- Puppeteer
- PhantomJS
33:30 - Proxies
- Need a fresh IP address
- Need a different country
- Side note: Canadians buying stuff in USA M4S1P1 === 41100
- API throttling
39:00 - Tips and Tricks
- Multiple API keys
- diskDB - Text files as databases
- Search Github for API keys
- Inspect Element and Delete Overlays
- Delete Cookiesokay
44:45 - Stories
- Photo Voting
- MLS Listing
- Top Entrepreneur voting cheating
- Vanity Plate Checker
- My Hockey Team Sucks
- Vehicle auction bidding app
- youtube-dl
××× SIIIIICK ××× PIIIICKS ××× * Scott: Octopath Traveler & OST * Wes 1: AvE Youtube Channel * Wes 2: Mustie1 Youtube Channel
Shameless Plugs * Scott’s Level Up Tuts Pro * Wes’ Courses
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
In this Hasty Treat, Scott and Wes discuss refactoring, what it is, why you should do it, when to do it, as well as best practices and much more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 5:00 - What is refactoring and why would you do it?
- Re-writing code while maintaining functionality
- The first code you write is most likely not your best code
7:32 - Benefits To Refactoring
- Keep part of your codebase in your head
- Keep codebase timely and up to date (E.g. promises, async, await, etc.)
- Writing code from the vantage point of having already built your product
- Performance improvement
12:54 - When to refactor
- When it’s stopping your from progressing
- When brining someone new on to your team
- When you can see a more elegant solution
- When you’re having performance issues
- When you’re sharing or presenting code
- When you have a large codebase that needs to be broken up into smaller components
19:03 - Tips on how to refactor
- Testing will make refactoring easier
- Identify bad code and problem areas
- Use git as an escape hatch
- Break things into smaller chunks
- Publish often use code to npm as modules
Links * Facebook’s Codemod * Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer
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
Scott and Wes give their best advice for beginners, including tech skills, applying for jobs, focus, imposter syndrome, and more…
Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 4:46 - Advice for gaining new skills
- Patience and momentum are key
- You likely won’t get anywhere significant in two months
- Think about where you want to be in five years
- Start small
- Start with was excites you and let that drive your exploration
- Start writing code ASAP. Don’t worry about the right way, just get started.
17:15 - Advice for applying to jobs
- Apply for everything. Failing an interview is no big deal.
- Each interview is an opportunity to gain experience
- Putting yourself out there is huge - one blog post, YouTube video, or open source project will put you miles ahead
- Have an entrepreneurial mindset - you can negotiate money, hardware, vacation time, flexible schedule, etc. Don’t just google “average salary”
- Negotiate salaries and perks.
29:32 - Advice for knowing what to focus on
- What gets you jazzed? Find something cool and figure out how to recreate it.
- Find a problem and figure out how to solve it - build real things.
- Don’t focus on tech - tech is just a tool.
38:32 - Advice for impostor syndrome
- Listen to this podcast! ;)
- Almost everyone has it.
- Don’t worry about other people’s progress.
- You don’t need to know how to do everything, but you should be able to figure out how to learn.
46:45 - Misc advice
- Evaluate things for yourself - don’t blindly follow the loudest voices on the internet
- Focus on soft skills as well - time management, communication
- Get a mentor
- Health and Hobbies - don’t let yourself burnout
Links * Ep 044 - How to Learn New Things Quickly * Javascript30
××× SIIIIICK ××× PIIIICKS ××× * Scott: Sony A7iii * Wes: Zevia
Shameless Plugs * Scott’s Level Up Tuts Pro * Wes’ Stickers
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
In this Hasty Treat (Short episode) Scott and Wes discuss dot files, what they are, how to use and manage them as well as best practices and more.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:15 - What is a dot file?
- Access tokens
- Settings for editors, etc.
4:40 - Dot file examples
- .gitignore
- .gitkeep
- .rc
- .babelrc
- .bashrc
- .eslintrc
- .env
- .DS_Store
- .editorconfig
- .meteorignore
23:46 - How to keep your dot files in sync
Hot Tip * In MacOS, toggle dot files with “Shift + Cmd + .”
Links Wes’ dot files repo
Prettier
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
In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more…
VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:40
- Design Systems 101
- Wes’ Tweet about Design Systems
9:40
- Organizational elements of design systems
- It’s all about consistency
23:07
- Best tools for building design systems and style guides
- Figma
- Relay for Figma
- InVision Design Systems Manager
- Airbnb Lona
- Brad Frost’s Pattern Library
- uiengine
41:52
- Where to learn more
Links * Guide to Design Systems by InVision * Shopify’s Design System * Mailchimp’s Voice and Tone * Zendesk Garden * Material Design * Awesome Design Systems * Design Systems Repo * Design Systems * Docz * Facebook Yoga * StorybookJS * Stuart Clarke-Frisby Tweet * Figma’s Platform * Figma Styles and Prototyping * Design Systems Newsletter
××× SIIIIICK ××× PIIIICKS ××× * Scott: CalDigit TS3 Plus * Wes: Picasso Tiles
Shameless Plugs * Scott’s Level 1 Electron Course * Wes’ Advanced React Course (Coming Soon)
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
In this Hasty Treat (Short episode) Scott and Wes discuss user roles, what to think about when creating your own, security implications, etc.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:30
- How to manage user role systems
11:30
- Client side best practices
- Don’t rely on front-end role systems as a security measure
14:13
- Where to store your roles
- Start simple and get more complex as needed
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
It’s another potluck episode in which Wes and Scott talk about freelancing best practices, tips for working remotely, what they would do if they had to pick a different career, and much more!
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Show Notes 4:48
- How long should you stay with each job and/or company?
8:20
- What is the best way to work remotely?
- Tips for remote working
- Have a dedicated space
- Clear on and off times
- Have a time for winding down
- Make specific TODO lists
- Use blocking software to help you stay focused
- Switch up the scenery / Work in different places
15:26
- What are the trade-offs with using WordPress in a headless setup vs a tradition setup?
21:28
- How do you deal with API credentials in React?
27:15
- How do you keep an eye on performance with an app/site over the long-term?
- Check uptime
- Check the performance features in browser dev tools
- Use error checking software
- Host-based performance tools
- Newrelic
- pingdom
- LogRocket
34:28
- What happened to Canvas after all the hype around HTML5 a few years ago?
40:15
- How do you deal with analysis paralysis?
- Just get to work - you can always change things later
- Do research, but don’t let it get in the way of shipping
44:05
- If you were forced to change your career (and it had to be something you’ve never done professionally in the past), what would it be?
- Wes: Some sort of buying and selling (eBay, Amazon, etc,)
- Example: Buying things at wholesale prices and selling them with a markup
- Scott: Could go a lot of different directions.
- Example: DJ, Snowboarding instructor, develop a video game that is a sequel to Cruis’n USA
50:14
- As a freelance developer, what are some good questions to ask before taking on a client?
- Budget
- Scope
- Preferred communication methods
- How do you make money?
- What are the ultimate goals?
- Basically, ask as many questions as possible
××× SIIIIICK ××× PIIIICKS ××× * Scott: Goodhertz * Wes: Audiobook: Anything You Want by Derek Sivers
Shameless Plugs * Scott’s Level 1 Electron Course * Wes’ Courses are all on sale
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
In this Hasty Treat (Short episode) Scott and Wes discus all things domains. Where to get them, how to set them up and how to safe time managing them all in one place.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
Show Notes 3:30
- What is a domain?
4:59
- What is DNS?
6:00
- Nameservers
8:30
- What is a DNS provider?
- DNS Simple
- Cloudflare
- Hover
- Name
- Domainr
- iwantmyname
13:30
- Different types of DNS records
17:00
- Different kinds of domains
- .com, .tv, .io, etc.
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
Scott and Wes talk about marketing. Specifically how to do marketing if you’re a developer wondering where to start.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax
Show Notes 7:58 - Personal Branding
- Build trust and reciprocity
- Be authentic to yourself and let that carry through in your work.
- Have the guts to put yourself out there and establish yourself as an expert.
- Speak at conferences
- Write blog posts
- Make YouTube videos
- Be on podcasts
- Start your own podcast
14:50 - Running a Business
- Treat people well.
- Reward your customers.
- Don’t punish your users.
- Have a refund policy.
19:26 - Social Media
- Don’t push people off a platform. Bring content to them that is tailored for that platform.
- Get in early, before the platform becomes super crowded.
-
YouTube
- Quality content through quantity.
- Write good SEO titles.
- Tease your paid content or create a free one-off.
- Don’t expect to make a lot of money, but it can be great for growing a brand.
-
Twitter
-
Be helpful - small, digestible tips and tricks and great for growing a Twitter following.
- Quality is still the key.
- Steve Schoger is a great example of consistent, high quality content.
-
Facebook
-
People have other interests besides web development. People like to see into your life.
- Use Facebook to give people a window into who you are.
-
Reddit
-
Reddit is really difficult. It’s easy to get banned. The best strategy is to not focus on marketing and just try to be helpful.
- It’s sort of replaced forums and is a great place to build communities around different hobbies.
-
Instagram
-
Recently IG has been blowing up for web developers.
- Dhanish is a perfect example of how to do Instagram well.
49:55 - Paid Advertising
- Don’t be sleazy.
- Ads are good for getting likes and driving some traffic to something, but it takes experimentation to get the best bang for you buck.
54:40 - Email marketing
- Wes: Email is probably responsible for most of my sales.
- Keeps people up to date and helpful for promoting new courses.
- Helpful for figuring out what people want.
59:17 - Partnerships
- A lot of companies want to partner rather than just sponsor.
- It can be a great way to fund the creation of products/courses.
- Affiliate programs are great when they work out.
67:30 - Freebies
- Giving away free content is a surefire way to get people to pay attention.
- It’s about giving back to the community as much as marketing your products.
××× SIIIIICK ××× PIIIICKS ××× * Scott: Cypress: End to end testing * Wes: Audiobook: Own the Day, Own Your Life
Shameless Plugs * Scott’s New Electron Course * Wes’ Advanced React and GraphQL 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
It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.
Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
VueSchool.io's Vue.js Masterclass Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.
Show Notes 4:00 - Design Workflow
-
Wes:
- Screenshots of look + feels
- Sketch layouts out in pencil
- Mock up layout in Sketch
- Once rough layout is done, I refine
- Once I have: colors, type, patterns, textures and overall layout, I move to code.
- A design program is important to vs designing in code
-
Scott
-
Mirrored component structure in Figma
- Using Ideas from Atomic design and React components
- Goal is for Figma components to be 100% mapped to styled components
- Flexible and testable in different layouts
- My design philosophy is refinement through iteration
- Light theft
- Footer from Pitchfork
- New card animation idea from Patagonia
15:55 - Design to Dev Workflow
-
Wes:
- Happy with design so far
- Setup tooling - styled components, stylus, sass…
- Setup type, variables, partials, resets…
- Do as much HTML as possible before styling
- CSS it up for layouts, then go section by section
- Broad first, then zoom in on finesse
- Browsersync / Hot Reload
- Test across browsers / Devices
-
Scott:
-
Define parameters in Figma
- Styled components in React, hand write that CSS bruh
- Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components
32:06 - Git Workflow
-
Wes:
- Tear off a branch - name after issue - DEV113
- Do your work
- Rebase
- Squash
- Pull Request
- Rinse + Repeat
-
Scott
-
Master branch is 1-1 with live
- Develop is where work is done (but not really because I make a feature branch for each feature and merge in)
- Contributors issue pull requests into develop
42:34 - Deployment Workflow
-
Scott:
- Hosted on Meteor Galaxy, container based hosting
- Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script.
- Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master.
- Secrets are kept in a settings.json file that’s used during deployment.
-
Wes:
-
Codeship
- DeployHQ
- Git
- Rsync
- Dealing with secrets
49:53 - Project Folder Structure
-
Wes:
- Folder Structure - 0100, 0101…
-
Scott:
-
API
- UI
- element -> styled components with index
- Startup
- Utilities
Links * BNO Train Wreck Album * Atomic Design * Guide Design Systems * BrowserSync * FontSquirrel * fontplop * Creative Market * Delicious Brain’s WP Migrate DB Pro * Ryan Dahl - 10 Things I Regret About Node.js
××× SIIIIICK ××× PIIIICKS ××× * Scott: Overcooked - Nintendo Switch * Wes: SkyRoam Solis
Shameless Plugs * Scott’s Level 2 React Course * Wes’ Courses
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
Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax
Show Notes 2:00
- What’s the deal with the GitHub / Microsoft acquisition?
6:05
- What is a Progressive Web App?
8:55 - Progressive Web App Checklist
What are the baseline features for a Progressive Web App? 09:25
- Site is served over HTTPS
- Let’s Encrypt
11:05
- Pages are responsive on tablets & mobile devices
11:35
- All app URLs load while offline
- Use a Service Worker
16:35
- Metadata provided for Add to Home screen
18:40
- First load fast even on 3G
20:00
- Site works cross-browser
20:15
- Page transitions don’t feel like they block on the network
22:20
- Each page has a URL
What makes an exemplary Progressive Web App? 27:42
- All content is indexed by Google
28:38
- Schema.org metadata is provided where appropriate
- Social metadata is provided where appropriate
29:42
- Canonical URLs are provided when necessary
User experience 31:43
- Content doesn’t jump as the page loads
- Scott’s Pro Gatsby Course
36:52
- Pressing back from a detail page retains scroll position on the previous list page
37:34
- When tapped, inputs aren’t obscured by the on screen keyboard
The Best of the rest 38:22
- Content is easily shareable
- Site is responsive
- Any app install prompts are not used excessively
- The Add to Home Screen prompt is intercepted
39:20
- Use cache-first networking
Device APIs 40:34
- Web RTC
- Get User Media
41:50
- Push API
45:12
- Accelerometer
- GPS
45:55
- Payment Request API
47:12
- Local Storage
48:03
- IndexedDB
48:35
- StorageManager
51:45
- Vibration API
52:58
- Use Lighthouse to improve the quality of your web apps
××× SIIIIICK ××× PIIIICKS ××× * Scott: myNoise * Wes: Ozark Trail Drinkware
Shameless Plugs * Scott’s Level 2 React Course * Wes’ Courses
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
It’s a Potluck episode - you bring the questions and we turn them into tasty treats.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Show Notes 2:15
- What’s the best resource for staying up to date with Javascript?
3:48
- How do you stay motivated if you don’t like your current project?
7:08
- What’s your favorite music to work to?
11:10
- In what order should developers learn tools related to GraphQL?
13:48
- As a JS developer, is it a good idea to learn other languages like PHP or Python?
19:55
- As a CS undergrad, what can you do in terms of programming that could be a great benefit after graduation?
23:14
- Should you be concerned about SEO when using JS frameworks like React?
28:17
- How can you build your network when you’re too tired or busy to go to a bunch of meetups?
32:55
- How do you come up with such good designs and UI for your courses?
36:37
- As more websites move to secure connections, where can a noob learn the basics of https, SSL certificates, how to deploy a secure website, etc.?
43:05
- Have you had experience working for large companies and how does it compare to smaller companies and/or freelancing?
47:30
- What are other programming podcasts you listen to?
××× SIIIIICK ××× PIIIICKS ××× * Wes: SpikeBall / Slammo * Scott: Stance
Shameless Plugs * Scott’s Level 2 React Course * Wes’ Courses
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
Scott and Wes are back with another round of tips, tricks and tasty treats for their favorite code editor, VS Code.
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax
Show Notes 01:45
- Why Scott and Wes use VS Code vs all the other options
- Stay up to date with all releases
06:05 - Favorite new updates
- Notification API
- Auto Import
- Listing errors in the file explorer
- Column Selection
- Interface Customization
- Hot Tip: Anytime you find yourself using your mouse, there’s likely a shortcut key for what you’re trying to do
- React Snippets Library
- Wes’ VS Code settings
- Visual Studio Live Share
27:40 - Favorite/New Extensions
- Bracket Pair Colorizer
- Rainbow Brackets
- Auto Rename Tag
- Better Comments
- Jest
- Snapshot Tools
- JS Refactor
- Import Cost
- Polacode
- Carbon - An alternative way to share beautiful images of your source code
38:49 - Themes
- LevelUp Official
- Night Owl
- Cobalt2
40:35 - Tips and Tricks
- Learn how to jump and select by letter, word, line, etc.
- Move a line (or Line Bubbling) - Use this for rearranging and/or moving lines of code quickly.
- Cycling through multiple windows of the same app - If you have multiple VS Code windows open, “Cmd + backtick” will cycle through them, so you don’t have to drag them in and out of view.
- Adjust MacOS keyboard settings - change Key Repeat to “fast” and Delay Until Repeat to “short”. This will make your editor super fast when holding down arrow keys.
- Use Git features
- Git History
- Spell Checker - “Cmd + .” will open up code actions and you check for possible misspellings, etc.
- Code Spell Checker
- Rename Symbol - Much more reliable than find/replace.
- Sort Lines
- Select everything between quotes - (Cmd + Shift + Space)
57:25 - Things that could be improved
- Region folding is inconsistent and sometimes doesn’t work at all.
- No easy way to tell which extension is causing CPU performance issues.
- Sidebar indentation isn’t clear.
××× SIIIIICK ××× PIIIICKS ××× * Wes: Melnor 4-Zone Digital Water Timer * Scott: Tosowoong Enzyme face cleanser
Shameless Plugs * Scott’s Intermediate React Series * Wes’ All Course Secret Sale
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
Scott and Wes detail the tips and tools you need to get better at debugging.
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
Show Notes 4:00
- Read the stack trace
7:35
- Make sure you aren’t debugging production
- Make sure you’re not cached
8:40
- Check the network panel for the whole response
- CORS (Cross-Origin Resource Sharing)
12:04
- Use debugger commands in the browser
- Set breakpoints (race conditions
13:40
- Use Source Maps
15:29
- Make full use of all console methods
- console.group/groupEnd/info/
- console.log({objNAme})
17:02
- View your code in other browers
- Make sure your browser is up to date
18:50
- Step into and step over function
- Useful for especially tricky issues
19:47
- Look into Scope in dev tools panel
20:33
- Recreate it in CodePen or Create React App
- Helps to quarantine your code
- Verify where the problem actually is
24:12
- Take a break
- Helps clear your head and approach your problem from a different angle
25:40
- Rubber Duck Debugging
- Forcing yourself to talk it out will often reveal problems/issues
26:40
- Check Github issues / ask in Slack
- Leave your solution in the comments for others
28:12
- Use Node --inspect flag
29:57
- Read the code in your libs (if you can)
32:34 - Chrome Dev Tools Tabs Rundown
- 33:10 - Network tab
- 34:15 - Preformance tab
- 35:58 - Lesser known tools
- 36:15 - Firefox Grid Debug
- 36:20 - Firefox Fonts tab
- 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window)
- 37:39 - Chrome Animations Inspector
- 38:34 - /dev tips & Modern DevTools Course
- 39:41 - Chrome & FF Layers for 3d and full view of canvas & window
- 40:51 - Sensors for overriding fake devices sensors
- Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device
- Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back
- 43:12 - Favorite DevTools extensions
- Apollo
- React
- Redux
- Vue
- Lighthouse
- JSON Formatter
- 44:06 - Application/Storage tab
- 44:41 - FireFox Grid Inspector
××× SIIIIICK ××× PIIIICKS ××× * Scott: Hotel Tonight App * Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite
Shameless Plugs * Scott’s Level 2 React Course coming out THIS WEEK! - subscribe and be notified when it’s released * Wes’ Courses - Advanced React course coming soon - subscribe to be notified when it’s released
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
Scott and West talk about what’s new in JavaScript.
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
They are also hiring! netlify.com/careers
Show Notes 1:55 - Scott’s new studio
4:57 - Pop Motion Pose
- New library for React or vanilla JavaScript
- Define locations instead of CSS styles
- Pass the animation state into a React component as open or closed instead of active or inactive
- Flip animation techniques
- Style Fire - Simple HTML & SVG styler optimised for animation
8:44 - Intersection Observer
- Browser-based API based on observables
- Example uses: Tell me when this element is on the page, goes off the page or is halfway down the page
10: 32 - MDX
- Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it
- Turns MarkDown files into components in Webpack
12:56 - Resize Observer
- Watch elements for resize
15:47 Web Animations API
- Works with animations natively in JavaScript
- Tell your animations to play, pause, reverse, etc.
- Instead of changing classes, you have full control over what the animation is doing
- Web-Animation-JS Polyfill
- Can I use
18:00 - Window Face Detector API
- Create a new window.face detector and pass it an image tag and it returns an array of faces.
22:53 - Payment Request API
- Eliminates check out forms
- Allows platform to handle payment safely and securely
29:23 - INTL.NumberFormat
- Format pricing with different currencies
32:59 - V8 BigInts
- Makes working with big numbers more viable
34:53 - Speech Recognition
- Converts speech to text
- Pipe in different accents
36:22 - Text To Speech
- Simulates text into spoken words
41:46 - ES6 Modules In Node
- There are no ES6 modules in Node. It’s still being developed. If you want to build an ES6 module in Node, you have to use the .mjs extension
××× SIIIIICK ××× PIIIICKS ××× * Scott:Dank Mono * Wes:Video Doorbell Pro from Ring
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
It’s a Potluck episode - you bring the questions and we turn them into tasty treats.
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax, and put SYNTAX in the “How did you hear about us?” section.
Show Notes 2:42
- What is an efficient way to process huge data, greater than 740 MB when not working in JS?
6:45
- What’s new and shiny thing in web development do you think is going to go the distance?
- GraphQL
- Prisma
- GraphCool
- GraphQL Playground
11:09
- Wes, can you make a course on how to barbecue meat properly?
12:31
- How do you go about learning a new language or framework?
- Ep 44 - How to Learn New Things Quickly
12:54
- What are the best things to keep in mind when you are the only developer on a team?
18:07
- Is Redux for React dead with the new context API?
- Redux
21:41
- What’s the funnest project you have ever worked on and why?
- LevelUpTuts
27:19
- What’s the best use case for JWP?
- JWP
29:50
- Should I focus on one thing and try to master one technology instead of being a jack of all trades?
35:00
- Why do thousands of entrepreneurs build SaaS products on Ruby on Rails?
- Laravel
- Laravel Spark
- CodeIgniter
- Meteor
- Hackathon Starter
39:41
- Would you use single page application vs SSR for large reactor view apps?
- SSR
- Next.js
41:06
- What do you use for online learning platforms?
- Ep 14 - Our Stacks Explained
- Teachable
- Moodle
××× SIIIIICK ××× PIIIICKS ××× * Wes: Parcel * Scott: Nebo
Shameless Plugs * Scott’s Headless WordPress course * Wes’ Instgam
Tweet us your tasty treats! * Scott’s Instagram * LevelUpTutorials Instagram * Wes’ Instagram * Wes’ Twitter * Wes’ Facebook * Scott’s Twitter
Scott and Wes talk about how they learn new things quickly. Scott also tells a crazy story about his weekend.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
They are also hiring! netlify.com/careers
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Show Notes 2:00
- Scott recounts his crazy story about getting Lymphangitis
8:30
- Know your learning type
- videos, blogs, docs, source
- no right or wrong way
15:00
- Foundational Skills
23:00
- Narrow your focus
- Should you learn Redux with React?
- blurring skills hurts future progress
- don't learn too many things at once
26:00
- Get excited
- try to reclaim your initial excitement
- flow happens when you are excited
- pick projects around hobbies
- Star wars sucks
33:00
- Grind Time
- write code first ask questions later
- break shit
- Submit to yourself that you are going to build this 3-4 times
- iteration driven development
- quality from quantity
- use smarter people
- snippet libs
- style guides
40:00
- Immersion
- follow every kind of media you can
- put things on in the background
- permeate into your brain
××× SIIIIICK ××× PIIIICKS ××× * Wes: Crushing It Book * Wes: Crushing It AudioBook * Scott: Popmotion Pose
Shameless Plugs * Wes' JavaScript30 Course * Scott's Headless WordPress course
1:00:00
- Scott comes out of nowhere with a story about TEA!
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
Wes and Scott rattle through ~20 different Object and Arra Methods that will make you a better JavaScript developer.
Freshbooks - Sponsor This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
They are also hiring! netlify.com/careers
Show Notes For the docs for all these, just google mdn and the method you are looking for 😃
3:00
- Why are these great?
- They are chainable
- Immutable
5:30
- .filter()
- Truthy or Falsy
8:00
- .map()
10:00
- .reduce() - returns any shape! filter, create a new shape, add up numbers...
14:30
- .forEach()
- Side effects
16:00
- .some()
- can be used as a short circuit forEach
25:00
- .every()
- .includes() (why not contains?)
26:00
- Array.from()
- Array.from() takes a secondary map arg
- Array.of()
29:00
- Object.values()
- Object.keys()
- Object.entries()
32:00
- Array spread - converts iterable to array
- Array spread - Concats arrays
- Array Spread + Slice. Don't splice - remove an item from an array.
34:00
- Object Spread
37:00
- Function Rest
39:00
- Object.freeze()
40:00
- Object.seal()
41:00
- Object.assign() - no longer needed because you can object spread
- Reference vs Copy in JavaScript
×SICK×PICKS× * Scott: Tea Haus * Wes: SOG Folding Knife * Wes: Sharpening Stone
Shameless Plugs * Vue.js for Everyone * Wes' Course * SMASH that Subscribe Button on Wes' YouTube
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
It's a Potluck episode - you bring the questions and we turn them into tasty treats.
DeployHQ - Sponsor DeployHQ is the easiest way to deploy websites to your servers. Invite your team and set up automated deployment processes to:
- Compile a production build of your assets
- Deploy securely to servers behind VPNs and firewalls
- Execute SSH commands
- Manage and upload your config files
- Preview and schedule deployments
- Track and monitor your deployments in real-time
Deploy to multiple servers at the same time, whether that be your own server via FTP/SSH, or an Amazon S3 bucket. You can even start deployments automatically whenever you push!
Instant setup for repositories hosted on GitHub, Bitbucket, GitLab and Codebase, plus realtime notifications in your favourite chat services like Slack or HipChat.
To get 50% off your first 6 months, head on over to deployhq.com/syntax. The first 25 listeners to deploy successfully will receive a FREE branded mug or t-shirt!
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Submit Your Questions Here Show Notes 02:44
- What are your thoughts on Vue.js?
- VuePress
- Nuxt
6:20
- What are your thoughts on Typescript and Flow?
- Typescript
- Flow
10:45
- What was your biggest breakthrough in Programming?
- Nude.js
20:00
- Any tips, tools and tricks to avoid procrastination
- The productivity episode
- Sort by anxiety
- Eat That Frog
- Todoist
25:00
- Thoughts on CMSes? Headless? Database Driven? Static Site Generator?
- Headless WordPress
- Gatsby
34:00
- How can I start creating and selling courses?
40:00
- How did you two become renown in the developer community?
- We don't think we're renown :)
- YouTube Ad Revenue is poor
46:00
- Server Side Rendering with JavaScript Apps
53:00
- Is Yeoman still a thing?
×SICK×PICKS× * Scott: Eat That Frog * Wes: DevDocs.io PWA
Shameless Plugs * Vue.js for Everyone * Wes' Course * SMASH that Subscribe Button on Wes' YouTube
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
Scott and Wes Chat about burnout!
Freshbooks - Sponsor This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Show Notes 01:50
- What is burnout?
- Losing Enthusiasm for web development
- That Hustle
7:00
- Why is being burnt out bad?
- Putting off hobbies
12:30
- How do you prevent burnout?
- Farming out Work
- Automating content
- Busy work
18:00
- Aggressively turn down meetings
- Work to cut out busy work
- Locus on Control
- Managing Email and Notifications
- Scrubbing Plates
24:00
- Health and Nutrition
- Sleep
27:00
- Motivation
- What to do when you just don't like the work you are working on
- Small Wins
- Learning new Things
- Getting a new job
- Taking Courses
- Keeping Up With The Codeashians
37:00
- Being overworked at work
- Overtime
41:00
- So you've burnt out, what do you do?
- How do you reignite the spark?
- Taking a day off
- Delegating GitHub
- Online chat with other developers
×SICK×PICKS× * Wes: Dewalt 20v Drill Set * Wes: Dewalt 20v Cordless Web/Dry Vac * MERU
Shameless Plugs * Vue.js for Everyone * SMASH that Subscribe Button on Wes' YouTube
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
Wes and Scott talk all about testing!
SnapShooter - Sponsor SnapShooter is a Digital Ocean backup service. You get fine grain control over when you backup and how long you backup for. Easily restore from previous snapshots.
Use the code SYNTAX to get 20% off your first 12 months.
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Show Notes 3:00
- Testing Talk
- Is testing scary?
8:00
- Unit Testing
- Pure Functions
- Mutations
- Pass in dates to functions
11:40
- Integration Testing
- Integration Testing Mémé
14:00
- Visual Regression Testing
17:00
- End to End Testing
21:00
- Why would you want to test?
- Confidence
- Easy Refactoring
- Finding edge cases
33:00
- Test Runners vs Assertion Libraries
- Jest
- Mocha
- Cucumber
- BBD (Big Black Dog)
- BDD (Behaviour Driven Development)
- Cypress.io
- Enzyme
- React Testing Library
50:00
- Mocking
- Spy Functions
54:00
- Snapshot Testing
- Jest Snapshot Testing
57:00
- TDD (Test Driven Development)
- BDD (Behaviour Driven Development)
- Continuous Integration
- Travis CI
×SICK×PICKS× * None today!
Shameless Plugs * Vue.js for Everyone * SMASH that Subscribe Button on Wes' YouTube
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
Wes and Scott dive into jQuery. Is it dead? Should you still use it? Why not? What are some alternatives?
LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 03:00
- A stroll down jQuery Memory Lane
- What was the first jQuery plugin you wrote?
- jQuery Conference
- jQuery IRC room
- Ben Alman
9:00
- jQuery UI
- jQuery Mobile
- Sencha Touch
- nvr 4get where u come from
13:00
- So, why is jQuery going away?
16:00
- The Selector API
- Sizzle
- Bling.js
- querySelectorAll Docs
21:00
- Working with Ajax
- Fetch
- Axios
27:00
- Dom Traversal
- Element.matches()
- You don't need jQuery
30:00
- Data / Utility Functions
- Lodash
- Just use Map/Reduce/Filter
- Data Massaging 💆🏻
34:00
- Cross Browser Compatability
- Polyfill.io
37:00
- Event Listeners
- Event Delegation
- Listening for events on multiple elements
47:00
- Final Thoughts on jQuery
- JavaScript30
- The JS Foundation
Seeeaaaaacccckkkk PIX * Scott: MJML Desktop App * Wes: HyperSelect LED Utility Light
Shameless Plugs * Vue.js for Everyone * All of Wes' Courses
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
In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites.
Cloudinary - Sponsor Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!
Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out.
Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
Show Notes So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to this tweet
0:00
- We just cracked 1,000,000 downloads! Thank you!
4:00
- Network Tips
- Reducing the amount of HTTP requests
- A little bit about HTTP2
- An interview about http2
8:00
- Use Caching and LocalStorage
- Turn on aggressive caching on your server - long expire times
- What is gzip? / Enabling gzip
12:00
- Using a CDN
- Listen to our episode on CDNs and #BigZips
13:00
- When to load your JS
- Blocking Requests
15:00
- Use Lazy Loading
17:00
- Preloading content with Link rel="preload"
- rel="prefetch"
19:00
- Picture, picturefill and srcset=""
- Article on srcsrc and Picture
- srcset vs picture/source elements
25:00
- Image Compression
- One less jpg
- Serve less data
26:00
- Inline SVG
- Talk about Font Awesome
33:00
- CSS and JS Code
- Critical CSS
37:00
- Remove unused code
- Purify CSS
- no-unused-imports with ESlint
38:00
- Code Splitting
40:00
- Transpile less
- babel-preset-env
41:00
- Tree shaking
- Hoyyyy its a tree shaker
42:00
- Async ans defer attributes on your script tags
- Amazing site that visualizes async and defer
45:00
- Icon Fonts
- Web Fonts
- Native Font Stack:
- Good:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
47:00
- font-display
49:00
- Troubleshooting Performance
- Simulate Slow Network Speed
- Google Page Speed
- Wes' Page Speed Video
SIIIIICKkkkkkkkk PIXXXXX * Scott: WiFi Surge Protector * Wes: KitSound Bluetooth Airline Converter
Shameless Plugs * Scott is working on a Vue course! * Wes is working on his 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
In this episode, Scott and Wes everything about their recording — from gear to software to tips and tricks for creating a good screencast.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
They are also hiring! netlify.com/careers
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 2:00
- Scott's Hardware:
- EV RE20
- DBX 286s Preamp
- K&M 23850 Microphone Desk Arm
- Shure KSM32
- Blue Snowball
- Bluebird
- Scarlet 2i2
4:00
- We talk about Different types of microphones
- Wes' Hardware:
- Heil PR40
- Heil PL2T Boom Arm
- Audio Technica AT2020
- Heil Flush Desk Mount
- Scarlet 2i2
- DBX 286s Preamp
- EQ351 Equalizer
- BSW Pop filter for Heil PR40
- Heil Shock Mount
14:30
- What are the essentials for hardware?
- Put a t-shirt under your keyboard
16:00
- Once you get to record, what do we use?
- Divvy
- IShowU Instant
- Screenflow
- Uberlayer
- Loopback
32:00
- Making Mistakes
- Leaving in goof ups and debugging
40:00
- Bad screen recordings
- What is boring? What is annoying?
- Recording pet peves
- Tips for sizing your editor
- Gross sounds
- Too many files
50:00
- What makes a good recording?
- Good contrast on colour scheme
- Keeping the code open
- Short recordings
SIIIIICKkkkkkkkk PIXXXXX * Wes: CD Player Magnet Phone Holder * Scott: OxyLED Motion Sensor Lights
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
In this Hasty Treat (Short episode) we answer your questions about Freelancing - how to charge more, building a portfolio, finding clients and our thoughts on using pre-made WordPress themes.
Sign up for the Value Pricing Bootcamp - Sponsor Get Jonathan Stark's free 6 day email course on value based pricing for freelancers over at valuepricingbootcamp.com.
Jonathan Stark is the author of Hourly Billing is Nuts and has worked with companies such as Staples, Time and T-Mobile. These days he routinely commands an effective hourly rate of $2000+ per hour, so I'd say you should check his course out.
Show Notes 1:00
- Our first episode on Freelancing - how to slam dunk freelancing
4:00
- Q: Ideas on building a portfolio and landing those first customers
- Your portfolio doesn't really matter as a web developer
- Your reputation and referrals is key
- Reputation in the community is important
- Put yourself out there!
- You have to tell people what you do
- You have to ask people if they need work
- Good communication is key
8:00
- Q: What are some strategies for budging and quoting?
- Understanding what a website is worth to a client
- Talking to your client ablut pricing
- Asking how much they have available to spend
- Chunking the project into multiple bits so they can build on it
14:00
- Q: How do you tell your existing clients that you need to charge more?
- Clean Scope / Scope Creep
- Quote in Features and pieces, not entire projects
- Fixed Pricing
- Becoming a better/faster developer
- Getting more expensive as you move
- Don't charge hourly
- Taking big Ls
18:30
- Q: What is your opinion on value based pricing?
- We're huge proponents
- Clients don't like hourly billing
- The client should know what you are paying and what you are getting
22:00
- Q: When is it okay to use WordPress and pre-made themes? Is that cheating?
- The beauty of open source
- The business Wes answer
- The developer Wes answer
- Building your own starter files
- Undoing other developer's work
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
Scott and Wes talk about how to deal with being overwhelmed with our fast paced industry. How do you keep you and your team's skills up to date?
Wes' Note: Scott came up with the title for this one. I know.
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
They are also hiring! netlify.com/careers
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 1:00
- WELCOME
- Scott is 32! Happy Birthday
- Wes Relaunched his React for Beginners course!
4:00
- That feeling
- Being okay with not knowing everything
9:00
- How to wait it out
- When you should jump into a library
- 1.0 of libraries
- Dogfooding
13:00
- Just In Time learning
- Doubling down on the fundamentals
21:00
- What is JAM Stack?
22:00
- Why do you need to stay up to date?
- Moving or Losing Jobs
- Comfy Chairs
25:00
- Hipster Web Developers
27:00
- Someone think of the customers!
- Technical Debt
- Falling in love with web development again
- Constantly challenging yourself
30:00
- Complacency in Web Devleopment
- Motivating Comfortable Web Developers
- You have to stay up to date
32:00
- Working on the weekends
- Real Talk: part of your job is staying up to date
- How to find time to learn on the clock
36:00
- Adding new tech to projects as a way to learn
39:00
- What if your senior developer is holding back progress?
- How to convince your team or boss that you aren't just a hipster and this new tech is worth it
- Show them the why!
47:00
- Okay, I want to stay up to date. How?
- Strong handle on fundamentals
- WebDev Reddit
- NodeJS is Cancer
- Kitze's LOL Tweet
- JavaScript Weekly
- Lunch and Learns
- Meetups
Siiiiiiiick Pixxxx * Scott: Never Split The Difference * Wes: Containers Podcast
Shameless Plugz * Scott: Pro Gatsby * Wes: React For Beginners
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
Wes and Scott talk all about Static Site Generators!
Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
They are also hiring! netlify.com/careers
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 1:00
- Woah Scott's Audio!
4:00
-
TastyTreats Winners
8:00
- What are static site generators?
10:00
- Benefits of Static Site Generators
- Gatsby
- StaticGen.com
- Jekyll
- Hugo
- Hexo
24:00
- More complicated apps as static sites
- Next.js Static Export
- Nuxt.js
34:00
- Limitations of a static site
- What happens when you need something on the server?
- Snipcart for Ecommerce
- Algolia
- Awestruct
- Hot Hot Reloading
41:00
- Using with a Headless CMS
- Reloading The Pages
48:00
- WHAT WHAT Scott is Canadian?!
50:00
- Where can you host a Static Site?
- Literally Anywhere
- Github Pages
- Netlify
- rsync
- WPGraphQL
Siiiiiiiick Pixxxx * Scott: JSRefactor * Wes: Auto Rename Tag
Shameless Plugz * Level Up Pro * ES6 For Everyone
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
Scott and Wes talk about working with images, videos and big zips. How do you host them? Do you need a CDN? What about compression?!
Cloudinary Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!
Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out.
Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.
With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.
Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.
Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.
Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax
Show Notes 1:30
- Chit-chatting about GraphQL Testing
3:45
- What is a CDN? Why do you need one?
- How does the internet even work?
7:00
- Amazon S3 + Cloudfront
- CacheFly
- MaxCDN
- Cloudflare
11:30
- Talking about Image Formats
- WebP
- WebP CanIUse
16:00
- Losslesss VS Lossy
- Stripping image meta data like EXIF
- Image Optim App
- ImageMin
- Gulp ImageMin
- ImageMin Webpack
- ImageMin Plugins on npm
26:00
- How we use Cloudinary
29:00
- Hosting, Encoding and Compressing Videos
- Our Stacks Explained Syntax Podcast
- Vimeo Pro
- YouTube DL
- BrightCove
- Wista
- Sprout Video
- Cloudinary Video
41:00
- What is Cloudflare?
- Cloudflare Video is coming
46:30
- Web Torrent
- Apparently Spotify doesn't use P2P any longer
50:00
- Big Zips!
- How do we host large video downloads?
- Amazon S3 + Cloudfront
- Handbrake
- Backblaze B2
55:00
- Video Formats
59:00
- SVGO
- SVGOMG
Siiick Pixxxx * Wes: Node Inspector Manager * Scott: iShowUInstant
Shameless Plugz * Level Up Pro * Wes' Courses
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
In this show, Scott and Wes talk about about sending both transactional and marketing email. Everything from designing to templating to inlining the CSS to getting it sent. Enjoy!
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.
With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.
Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.
Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.
Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax
Show Notes 0:00
- WELCOME!
2:00
- An update on GraphCool, Prisma and Yoga
3:45
Syntax Contest! * You can win a free course from either Scott or Wes by screenshotting yourself listening to the podcast and uploading to Twitter or Instagram. * We will pick 1 winner from Twitter and 1 winner from Instagram * Make sure to tag @wesbos and @stolinski on Twitter and @wesbos and @stolinskion Instagram * #TastyTreats
5:40
- Email ain't easy!
6:20
- How do Scott and Wes use email in their apps and businesses?
- Transactional vs Marketing Email
9:00
- Dealing with multiple emails and modifier
- Signing in with Facebook vs Email?!
11:00
- Transactional Email
- The Process to creating single one-off email
13:00
- Scott's Setup:
- Handlebars
- Meteor Email Docs
- Mandrill
- Wes' Setup
- Pug Templating - the artist formerly known as Jade
- Juice CSS Inliner
- Foundation for Emails
- Inky
- NodeMailer
- Postmark
20:00
- Why does email get blocked?
- Amazon SES
- SendGrid
- MailGun
- MJML
- Email Reputation
- MailTrap
- MailHog
30:00
- Designing Emails
- CSS is very limited
- MJML React Email Templating
- Tony from Twitter also told me about HTML
37:22
- Debugging and Testing Emails
- Litmus
- Email on Acid is way cheaper
45:00
- Marketing Emails
- MailChimp
- Drip
52:00
- Host your own Platforms
- Sendy
- Email Octopus
- Mautic
- MailTrain
Siiick Pixxxx * Scott: Personal Capital * Wes: Nothing is Sick this week
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
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 0:00
- Goofing Around
1:30
- Real show starts
2:12
- Scott explains his breakdancing hobby
- "Breaking" is breakdancing
- What is flavour?
10:20
- Wes talks about being into BBQ
- World's Longest Yard Sale
- Wes has a large Big Green Egg and a MiniMax BGE
19:00
- Scott talks about how he is into making music
- Domestic Robot
- Scott is starting up a new project called "Shift. Super."
21:30
- How do you find time for these hobbies?
- Avoiding burnout
- Work/Life Balance
- Buy in from significant others
28:00
- Wes talks about working out and going on date nights with his wife
- Hamilton is cool
- Home Renos
35:00
- Doing a downtown job
- Problem Solving
40:00
- Scott talks about his love for KungFu Movies
- 5 Fingers of death
- 5 Deadly Venoms
- secret service of the imperial court
- Boxer from shantung
- 36th Chamber of Shaolin
- Human Lanterns
46:00
- What kind of cars do we drive?
55:00
- What YouTube channels do you watch?
- Wes:
- Jeannies Garage
- It's Alive with Brad
- Wranglestar
- Mattias Wandel Main Woodgears
- Mattias Wandel Secondary Channel
- Big Clive
- How it's Made
- Alex French Guy Cooking
- Scott:
- RedLetterMedia
- stance
- theneedledrop
- BroScienceLife
1:05:00
- What are you working on Personally / Mentally?
- Habit Tracker
- Doing a downtown job
Quuuuuiiiiiick SIIIIIIICK PICKS * Dan Carlin's Hardcore History: Addendum * Scott: Whatever You Think, Think the Opposite * Wes: Tracy Osbourne's Hello Web Design
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
Dev Lifts - Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. Get a Personal Training and Nutrition Plan — use the code SYNTAX for $75 off. They have also just announced their slack-only memberships for $5/month
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 01:10
- you should try out the new Syntax Soundboard by Andre Madarang
- Have a Question?! Submit it here!
03:00
- Skateboarding on a TRAMPOLINE?!
04:30
- Q: What are your favourite features coming to HTML 5.2
- Dialog Box
- Multiple Main Tags
- Thanks Jordan!
10:00
- Q: How do you retain all the info you learn like a sponge?
- Thanks Ozan
13:30
- What are your favourite CSS Libraries / Frameworks?
- Thanks Blake!
21:00
- What were some of the struggles you had early on in your career? How did you overcome them?
- Learning how to read error logs and messages
- Dealing with Impatience
- Coding is very frustrating
26:50
- What are High Order Components and Render Props?
- High Order Components
- React Render Props
- Video: Michael Jackson - Never Write Another HoC
- React Downshift
- React Reconciliation
34:45
- Q: When should you just drop the towel on code?
- When should you throw in the towel on code?
- Scrapping a codebase and moving from PHP to JS
- Let's talk about if it's worth it
41:00
- Q: What is the best way for a JS beginner to get their hands dirty?
- Don't work on apps, work on pieces!
47:50
- How do you recommend a designer falling in love with frontend dev sharpen their skills while being (happily) committed to a full time design position?
- Should designers code?
SIIIIIIICK PICKS * Scott: It’s Not How Good You Are, It’s How Good You Want to Be * Scott: Whatever You Think, Think the Opposite * Wes: Tony Robins Podcast * Wes: The Kevin Rose Show
Shameless Plugs * Scott: New React Native Course! * Wes: CSS Grid 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
Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.
With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.
Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.
Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.
Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax
Show Notes * Take a drink every time Wes says exactly
01:10
- CSS Grid course is out!
03:50
- The most basic hosting / services
- WordPress.org, Medium, Wix, Squarespace
05:00
- Your Cheap PHP/Apache Hosts
- Endurance International Group owns most of the cheap web hosting world
- cPanel
- Bluehost doing shady stuff
- Siteground seems p good
13:20
- Service Based Hosting
- Heroku
- Zeit's Now
- Galaxy
15:00
- What does "spinning down" mean?
- Deploying to these services
17:20
- How these services do instant cut-overs to new servers
- SSL Certificates
20:00
- You should listen to the Our Stacks Explained episode.
- Zeit's Now Alias
- mLab MongoDB Hosting
- Compose MongoDB Hosting
29:00
- Raw Server Space
- Linode
- Digital Ocean
- Rackspace
- Digital Ocean Droplets
- Digital Ocean's docs are 👌👌👌👌
32:00
- What is Nginx?!
- Let's Encrypt
- Mozilla's SSL config generator
- Caddy Server
38:20
- Docker
40:00
- SPA Apps - React, Angular, Vue...
- How to handle Routing
- Netlify
SICK PICKS * Wes: Magnetic Magsafe-life USB cable for micro USB, USB-c and Lightning * Wes: Magsafe-like USB that can handle a 87w Macbook Pro * Wow: MONGOOSE VS SNAKE VIDEO * Scott: Bulk Supplements
Shameless Plugs * Scott: Levelup Tutorials Pro * Wes: CSS Grid 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
Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.
With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.
Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.
Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.
Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax
Show Notes * Take a drink every time Wes says exactly
01:10
- CSS Grid course is out!
03:50
- The most basic hosting / services
- WordPress.org, Medium, Wix, Squarespace
05:00
- Your Cheap PHP/Apache Hosts
- Endurance International Group owns most of the cheap web hosting world
- cPanel
- Bluehost doing shady stuff
- Siteground seems p good
13:20
- Service Based Hosting
- Heroku
- Zeit's Now
- Galaxy
15:00
- What does "spinning down" mean?
- Deploying to these services
17:20
- How these services do instant cut-overs to new servers
- SSL Certificates
20:00
- You should listen to the Our Stacks Explained episode.
- Zeit's Now Alias
- mLab MongoDB Hosting
- Compose MongoDB Hosting
29:00
- Raw Server Space
- Linode
- Digital Ocean
- Rackspace
- Digital Ocean Droplets
- Digital Ocean's docs are 👌👌👌👌
32:00
- What is Nginx?!
- Let's Encrypt
- Mozilla's SSL config generator
- Caddy Server
38:20
- Docker
40:00
- SPA Apps - React, Angular, Vue...
- How to handle Routing
- Netlify
SICK PICKS * Wes: Magnetic Magsafe-life USB cable for micro USB, USB-c and Lightning * Wes: Magsafe-like USB that can handle a 87w Macbook Pro * Wow: MONGOOSE VS SNAKE VIDEO * Scott: Bulk Supplements
Shameless Plugs * Scott: Levelup Tutorials Pro * Wes: CSS Grid 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
Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes 02:55
- Wes' Async + Await talk on YouTube from DotJS
- JavaScript is Asynchronous
- Ryan Dhal (Creator of Node.js) original Node.js talk
06:00
- Callback Hell
- Q
- Bluebird
- What is a promise?
- Promises are an IOU
8:30
- Async + Await IS promises
- What is Async + Await?
- How does the code look?
- Returning values from an await
15:20
- Performance Considerations
- MEGA PROMISES
- Promise.all()
- Here is an example:
- const [weather, store] = Promise.all(getWeather(), getStores());
19:22
- This stuff is 100% native
- Most new Browser APIs are build on Promises
- Fetch()
- Some examples:
- await fetch(' https://api.github.com/users/wesbos').then(data => data.json())
- OR
- await (await fetch(' https://api.github.com/users/wesbos')).json()
- Axios
22:48
- The Payment Request API
- You should listen to episode 006 on accepting money on the internet
- Web Animation API
27:00
- Snackisodes
- Snack Packs
- Hasty Treats?!!!
28:00
- Making callback-based functions promised basked
- es6-promisify
- util.promisify()
30:00
- Error Handling Methods
- View my slides for some code examples.
- Try/Catch
- High Order Function
- Just handle the error when you callIt().catch(dealWithIt);
- Node's process.on('unhandledRejection') event
36:00
- Browser Support
- Babel it!
38:00
- AbortController()
- Abortable Fetch
SIIIIICK PICKS 42:00
- Scott: Ring Doorbell
- Wes: The Indicator Podcast
47:00
- Sick Tip
- Chrome's Autoplay is changing
- Details on this
- Visit chrome://media-engagement to see your scores
Shameless Plugs * Fullstack GraphQL * CSS Grid Course is coming sooooon!
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
Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!
Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
{ show(id: 027) { notes }} 02:40
- What is GraphQL anyways?
- GraphQL Relational Data
04:45
- How is it different than REST?
08:30
- GraphQL's self documenting Nature
09:20
- You don't need to replace your existing REST api
- It can sit infront of multiple APIs
10:00
- GraphQL Resolvers
- Apollo Link State does local data as well
11:50
- GraphQL on the client side
- Relay
- Apollo
- GraphQL Request
- Lokka
- Nano
13:30
- Why we like Apollo
- Setup is amazingly fast
15:00
- Pagination
- Refreshing of data
18:00
- The GraphQL Core Concepts
- Queries
- Mutations
- Filtering and Sorting
- It's not really a query language
21:00
- How do you say Schema?
22:00
- More on Resolvers
22:50
- Mutations
- Updating the cache
27:00
- Using with existing APIs
- Do you have two schemas now? One for MongoDB and one for GraphQL?
35:00
- CMS and Static Site Generators that run on GraphQL
- Gatsby
- WP-GraphQL
- GraphCMS
45:00
- Graph Cool
53:00
- Apollo Link
- Apollo VS Redux
56:00
- Graphiql
SIIIIICK PICKS * Wes: The Indicator Podcast * Scott: You Don't Know JS
Shameless Plugs * Free GraphQL Tuts from Scott * CSS Grid Course is coming sooooon!
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
Dev Lifts — Sponsor Dev Lifts will create a personal training plan tailored to your 2018 health and fitness goals. Use the code SYNTAX for $50 off.
Join with a friend and we'll make you a Buddy Plan that you can do together (nutrition will still be tailored on a per-individual basis, but workouts will be something you can both do together)! Plus, use the coupon code below and you'll both get $100 off.
Enter each other's email address as the coupon code and your discount will be applied to your invoices (invoices are sent manually currently, so I'll apply the discount for you both once you've both signed up). Valid thru January 31, 2018.
The Show Notes! 01:00
- Scott's New Redux Course
- Redux Docs
- What is Redux? Why do we need it?
06:00
- Modifying Your State
- Immutability
07:15
- Actions + Actions Creators
- Dispatching
09:00
- Reducers
14:00
- Wes' Redux Tutorial
18:30
- What is the difference between Cookies and JWT?
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
Wes details "Breakout" — his email management strategy for overwhelmed creatives and Scott and Wes chat about how they have their prettier setup.
Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
The Show Notes! 01:00
- Wes' notes on the Breakout Email Management System
02:00
- Do you like minisode or snackisode?
- Any other ideas for names for these short episodes?
04:00
- Email is often busywork
04:30
- You likely have a decision problem
06:00
- Kill it at the source! How do you stop email from getting to you in the first place?
08:00
- Your inbox is not the world's TODO list
- Process it when you get it
- Getting Things Done
09:30
- Filter! Filter! Filter!
10:30
- Germans sure do get a lot of vacation time!
13:00
- Expansions
- Using Robots for empathy
- Text Expander
- aText
15:30
- Dictation is great!
17:30
- Video responses
18:30
- Defer
19:19
- Batch Processing Email
- Send + Archive
20:31
- Stop emailing yourself
24:00
- Listener Question: How do you use Prettier?
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
Scott and Wes dive into CSS BEM — What is it? Why do you need it? How does it work?
Sign up for D3 in 5 Days — Sponsor D3 has a bit of a bad reputation for being hard to learn so Ben Clinkinbeard has put together this awesome 5 day email course that will get you comfortable with the 3 or 4 fundamental concepts that are needed to create amazing data visualizations with D3.js. Get it now
The Show Notes! 01:00
- Minisode! What do you think?
- Meijer is the best!
05:00
- What is CSS BEM?
- What problems does CSS BEM solve?
- Block, Element, Modifier!
8:00
- What about really long class names?
9:00
- Use with Sass/Stylus
12:00
- What about styled components?!
15:00
- Listener Question: Do / should you use Dropbox for a website with Git and node_modules?
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
What happened in web development in 2017? What were our personal and professional feats in 2017? What should we look forward to in 2018?
Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!
Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
The Show Notes! 02:00
- Scott's 2017 Look Back
- Scott is a new parent
- Dealing with kids who don't sleep
- Scott's Breakdancing Gains
05:20
- Wes' Look Back
- Taking Health Seriously
- First full year of Wes doing tutorials full time
- Course Correction VS Goals
- Course Platform Improvements
- Lots of Email Marketing
- Migration to Drip
09:10
- Scott cut ties with startup
- 100% Invested in Levelup Tutorials
- Major Platform improvements
- New Payment Gateways
- Lots of new Series - 400 videos!
11:25
- We Launched Syntax!
- Thank you!
- The show is getting good (we think?)
13:50
- Wes launched his Learn Node Course
- Wes updated his ES6 for Everyone Course
- Lots of feedback on Wes' JavaScript30 course
- Stickers!
16:20
- Goals for 2018
- The Yacht Club
- S.M.A.R.T. Goals
18:00
- Scott's 2018 Goals
- More videos
- More Youtube
- Building a Set
- Less Overtime
20:35
- Wes' 2018 Goals
- Releasing lots and lots of Content
- CSS Grid
- VS Code
- Some ideas around JavaScript and CSS Courses (tweet Wes your feedback)
- If it's not a Hell Yes, it's a no
- Double down on what works
- New Checkout Experience
- Delegate + Automate
- Get faster at recording
29:40
- JavaScript in 2018
- SSR Frameworks: Next.js, Gatsby, Nuxt.js
- ParcelJS
- Tooling is becoming less of a pain in the ass
33:00
- GraphQL Is Blowin' Upppppp
- Typed Languages / Typings
- Flow / Typescript / ReasonML / GraphQL Typings
38:00
- WordPress' Gutenberg Editor
41:00
- React Patent's Dropped
- Vue became really popular
45:30
- CSS Changes!
- CSS Grid
- Firefox CSS Grid Dev Tools
48:50
- Componentized CSS
- Design Systems
- Figma
- CSS Variables
54:00
- VS Code became very popular
55:00
- The Iron Yard shut down
58:00
- Progressive Web Apps
59:00
- What do we hope for in 2018?
Sick Picks * Scott: Google Daydream * Wes: Missive
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
Failure. How do you deal with it? How to learn from it? How do you know when you should give up vs keep pushing?
Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free!
Get In Shape with DevLifts — Sponsor DevLifts is how I (Wes) got in shape. After an indepth consultation about your goals, They will create you a personal training and nutrition plan. If you are looking to get in shape in 2018, now is the time to sign up. Use the code SYNTAX for an extra $50 off.
The Show Notes! 01:34
- Scott and Wes shoot the shit
- Wes is back from the DotJS conference
- Wes does a terrible (and hopefully not offensive) French Accent
03:50
- What's the deal with the #FailFast culture
- We talk about Fear of Failure and how it can stop you from starting anything at all
- High Stakes vs Low Stakes Failure
09:20
- Be aware of how fear of failure manifests itself in your work
- Just do it, put in the work
- Pen to Paper
12:20
- How to deal with mid-project failure
- Getting sick of a project part way through
- Finishing Things is such an underrated skill
- Small wins is key for confidence
- Take the emotion out of the decisions
18:00
- MVP - Minimum Viable Product
19:30
- Do you plan for failure?
- Wes' Life is Course Correction
- Wes is Unapologetically Confident
- Scott is Ignorantly Confident
23:00
- Another one of Scott's amazing segueways into our Sponsor
26:20
- Wes' Facebook Ads Failures
- The cost of admission
- Own your role in something failing
33:33
- Eating burnt rice is a huge character trait
- Pivoting
41:20
- Our own personal failures detailed
- Scott's Soundcloud
- Scott's Bandcamp
Sick Picks * Scott: Cypress.io * Wes: Dome D201 Dashcam
Tweet us your tasty treats! * Wes' Instagram * Wes' Twitter * Wes' Facebook * Scott's Twitter * Scott's Instagram * Make sure to include @SynaxFM in your tweets
Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future?
Bug Replay - Sponsor You need to try out Bug Replay for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster.
Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
The Show Notes! 03:30
- IT'S NOT CALLED CSS4
- You can find the different levels over at CSS Working Group Drafts
06:24
- CSS Custom Properties (CSS Variables)
- Bite and chew over the syntax - it's backwards compatible
- What's the difference between this and Sass/Less/Stylus?
- JavaScript30.com Day 3 uses JavaScript + CSS Variables
- CSS Tricks: The CSS attr() function got nothin’ on custom properties
- Independent Transforms -
transform: rotateX(var(--x)) translateY(var(--y));
19:20
- CSS Filters
- Drop Shadow Filter
- SVG Filters
28:20
- RRGGBBAA
- Hex transparency in colors
31:00
- Colour Functions
- CSS Next
- Draft Spec for Color Functions
36:00
- CSS Level 4 Selectors
- ITS NOT CSS4!!!!!!
- css4.rocks
40:00
- nth-of-selectoed
:nth-child(3n of img.dog)div:has(img)
44:00
- Some not-so-new-but-still-cool units
- Viewport Units
- min-height: 100vh
- ch units
- ex units
- CSS Angles - deg(), grad(), rad(), turn()
Sick Picks * Scott: Google Pixel 2 XL * Wes: Anker 5 Port 40w USB Charger * Anker 10 Port 60w USB Charger * Anker 5 Port 60w with a USB-C Port
Tweet us your tasty treats! * Wes' Twitter * Wes' Instagram * Wes' Facebook * Scott's Twitter * Scott's Instagram * Make sure to include @SynaxFM in your tweets
Wes and Scott talk about their fitness journey and how it relates to being a web developer in terms of energy, focus and mental clarity.
Get Fit with Dev Lifts — Show Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy.
They are currently offering Personal Training and Nutrition Plans for $149 (Regular $249) and with the code Syntax you'll get an extra $50 off. That's only $99 for the next ~95 people!
The Show Notes * 04:20 - Scott's Fitness Story * 08:00 - Wes's Fitness Story * 09:50 - The benefits of fitness and being a web developer. Productivity / Focus / Mental Clarity * 14:00 - Finding Time to Work Out * Tweet your work + workout routine to @SyntaxFM * 17:40 - How to work out / What to do / Routines? * 24:00 - Learning to code && Learning to Workout * 25:20 - Significant Other Buy-in * Fitness Blender * Starting Strength * 28:00 - All About Dev Lifts * Jeff Nippard Youtube * 34:00 — Nurition * 36:00 — Wes' Keto Nutrition Plan * Dom D'Agostino Keto Interview * MyFitnessPal * Keto Reddit * Keto Gains Reddit * 41:00 - Scott's Nutrition * 42:00 - Pop or Soda? * 45:45 - 16 : 8 Intermittent Fasting * IF Reddit * 48:30 - Dieting is bad * Supplements — Don't take our Advice here. Talk to your trainer. * 50:00 - Wes' Supplements and how Bags of Milk are the best * BCAA Amino Energy * Preworkout Coke'd Up * Cissus Quadrangularis Extract - Genoflex * Fish Oil * Vita Jym Multivitamin * 54:00 - Scott's Supplements * NOW Adam Superior Men’s Multi * Optimum Nutrition Gold Standard 100% Whey Protein * NOW Psyllium Husk * BulkSupplements Pure L-Citrulline DL-Malate 2:1 Powder * Bulksupplements Pure Caffeine Capsules. Caffeine can be dangerous warning!
Sick Picks * Scott: TriggerPoint GRID Foam Roller * Wes: Nike Techfleece Joggers
Tweet us your tasty treats! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Wes talks to Scott about speaking at conferences. What are the benefits of speaking? How do you apply? What talk should you give? What makes a good conference talk?
Freshbooks is the best! Freshbooks.com/syntax - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
The Show Notes * Snow Tires are supes important * Blizzzzaaaaakkksss!!!
Benefits * Free travel / accommodations / vacation * Fantastic Friendships and Industry Connections * Job Opportunities * Industry Recognition * Renewed Excitement + Wes loved David K Piano's Flip Talk
How do you Apply / Where to Find Conferences * Create a CFP * You need to brute force it * 🍯 Honey Hole: Lanyrd Calls * 🐝 Honey Hole: The Weekly CFP * 🍯 Honey Hole: Papercall.io * Meetup
Types of Talks you could give 1. Lessons Learned Talk 2. The New Concept Talk (the tasty treats talk) 3. My Approach to XYZ 4. The Complicated Concepts Explained 5. The Super Interesting Deep End Talk
What makes a good talk? * Skip the history lesson - hook them * Keep your personal bio short * Start with a banger ‼️ * Short Code Examples * Short Looping video examples * Scott's Origin Story Podcast * Make sure your talk works offline * Prepare for aspect ratios * Plug into the projector before your talk * Live that dongle life * Show people why they need to know something
Slide Deck Software * Powerpoint or Keynote * Wes' HTML5 Slide Deck * Another one of Wes' talks * Reveal JS * React Spectacle * Prezi
Conference Training * Training pays well * More hands on experience for conf attendees
Getting the Most out of a tech conference * Wes' Post on Getting the most out of a conference * Conf Code of Conduct * Logitech Wireless Clicker * Join Twitter Early * Have Lunch with Speakers * Stay off your phone * Keep your name badge on! * Practice your break away
Sick Picks * Scott: Spectacle Window Manager * Wes: What the heck is the event loop anyway?
Tweet us your tasty treats! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
It's a long awaited CSS Grid show! How does it work? When do you use it? What's the difference between Grid and Flexbox?
Sponsor * Save A Bro is selling absolutely hilarious mustache t-shirts for $18 - all proceeds go to support the fight against prostate cancer. Use the coupon code "syntax" at checkout to get free shipping in the US.
The Show Notes * Wes Bos AMA where he tricked Scott that Bert Bos was his dad * CSS Tricks A Complete Guide to Grid * Rachel Andrew * Rachel Andrew Twitter * Rachel's Grid by Example * Rachel's Grid AMA * CSS Grid Garden * The Story of CSS Grid, from Its Creators * Jen Simmons * Jen Simmons Twitter * Jen Simmons Labs * CSS Grid Pinterest / Masonry Layout Question * Wes' grid-auto-flow: dense; Experiment * grid-auto-flow: dense; Docs * caniuse CSS Grid Support - make sure to click the "Show All" button * "If someone thinks progressive enhancement means providing a crappy experience for older browsers then they’ve got a lot of reading to do." — Sara Soueidan * Benjamin De Cock - @bdc dropping tasty CSS Grid treats all day long on twitter. * CSS Grid Animation #1 * CSS Grid Animation #2 * David K Piano Twitter * Flipping * Slide Deck on FLIP * CSS Grid Template Area ASCII * Grid repeat() * Grid minmax() * CSS Grid nth-row() * CSS Sub-Grid
Sick Picks * Scott: Just My Type * Wes: Sick Update on the Caldigit TS3 Dock
Tweet us your tasty treats! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Buzz Words! WTF Do they mean?! Do They Mean Things?? Let's Find Out!
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
The Buzz Words This is the order in which we talk about the different concepts. If you have anything you'd like to add to the next buzz words show, tweet us @SyntaxFM
- Serverless / Cloud Functions
- Composition in functional programming
- funfunfunction
- Progressive Enhancement
- Singleton
- APIs + SDKs
- Pure Functions + Side Effects
- Date-fns
- Immutable / Mutable / Mutations
- Immutable.js
- JavaScript30 Array Cardio
- Isomorphic / Universal JavaScript
- Microservices
- Scoping
- Closures
- Model View Controller Pattern
- Learn Node with a stupid explanation of MVC
- Bike Shedding
- Tree Shaking
- Hoisting
- ES Next
- Asynchronous / Synchronous
Sick Picks * Scott: Ghost in the Wires: My Adventures as the World's Most Wanted Hacker * Wes: Apollo Reddit App for iOS
Shameless Plugs * Scott: React 16 for Everyone
Tweet us your tasty treats! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Show Notes * Q: Rems vs Ems vs Pixels? What do you use? * Q: What activity, that isn't developer related, benefits you most as a developer? * Becoming a Supple Leopard * Q: Is a hot dog a sandwich? 🌭 * Q If Google offered you a job today, would you take it? * Mike Rowe: Why Entrepreneurs Crave the 'Reverse Commute' * Q: How did Wes and Scott Meet? * Q: What are your thoughts on CMSs, like WordPress, adding JavaScript frameworks, like React? * Q: Where do you find remote work? * Q: How do you make money? * Q: Can a back-end dev become a good designer? * Hero Patterns * Steve Schoger's Twitter * Q: Do you ever feel tired? * Q: What do you think about live streaming? * Should we do a Syntax live stream?! * Q: What stack should a new developer use? * Q: What is your process for deciding on new tools? * React FAQ - sign up for Tim's newsletter! * Q: Where do you see yourself in 5 years?
Sick Picks * Scott: Fivestar Notebook * Wes: Read about your credit card benefits + perks!
Tweet us your tips! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Scott and Wes dish out some tasty advice to developers who are new to web development. How do you get better? How do you deal with imposter syndrome?
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Shameless Plugs * Wes just updated his ES6 course! * Mastering Figma is now Launched!
Show Notes This show is light on links :)
- The Gap by Ira Glass
- Hackathon Stater
Sick Picks * Nintendo Switch * Creative Market Fonts
Tweet us your tips! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Scott and Wes detail their current stacks that run their training platforms. From front end code linting to the server side and databases.
Sponsor Intro to The Serverless Framework by Loren Stewart. The first 20 people to use the code SYNTAX_FREE will get the course for free! After that make sure to use the code SYNTAX for an extra $10 off.
Show Notes * Wes' Stack Youtube Video * Meteor * Node.js * Level Up Tutorials is fast! * Express * Learn Node * Passport JS * MongoDB * Mongoose * mLab Hosting * Mongohub * MongoDB Compass * Studio 3T * MiniMongo * React * Styled Components * Stylus Lang * Metor Sessions * Prerender.io * React Apollo * Cross Storage * Victory Charts * Cloudinary * Tim Thumb * Amazon S3 * Amazon Cloudfront * Backblaze * Vimeo Pro * Jest * Mocha * Fixer.io Curreny Conversion API * Brain Tree * Stripe * Mandrill * Drip * Amazon SES * PostMark App (THE BEST) * Zurb Inky * Juice CSS Inliner * Meteor Hosting * Meteor Hosting * Digital Ocean * Zeit Now * Heroku * Bluehost Sucks * Let's Encrypt * Cloudflare OOPS I SAID CLOUDFRONT
Sick Picks * Scott: Focusrite Scarlett 2i2 * Wes: Better Bidding
Tweet us your tips! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Shameless Plugs * Level Up Tuts - check out scott's new shopping cart! * Wes just updated his ES6 course!
This episode is all about how to become comfortable and proficient with the command line. This one includes windows users too!
Sponsor Need to learn Docker? Check out Nick Janetakis' Dive into Docker course which is currently on sale!
Show Notes * React 16
* Command Line Power User Course
* iTerm2
* Hyper
* Awesome Hyper
* Cmder for Windows
* Windows Subsystem Linux
* Windows 10 Insiders Program
* ZSH
* Oh My ZSH - You'll want to start here, not on zsh.org
* Fish Shell
* Oh My Fish
* Fisherman
* Bass
* ZSH Autosuggestion
* ZSH Syntax Highlighting
* z Frecent (GET THIS)
* Tree
* Brew
* Brew Cask
* Trash CLI
* YouTube-DL
* Wes' Video on youtube-dl
* pbcopy
* ZSH Extract
* .. or ... or .... or ..... or ......
* !! re-runs the last command (careful!)
* cd - back to last folder - this works with lots of commands like git checkout -
* ⌘ + K to clear. ⌘ + R to clear but maintain scrollback
* Cobalt2 for ZSH + iTerm2
* Cobalt2 for Hyper
* Patched Powerline Fonts
* Slavic Cat
* Wild Cherry
Sick Picks * Scott: Source Making * Wes: My Fitness Pal
Tweet us your tips! * Wes Bos * Scott Tolinski * Make sure to include @SyntaxFM
Shameless Plugs * Level Up Tuts - check out scott's new shopping cart! * Wes just updated his ES6 course! * Stickers are coming!
Scott and Wes talk about switching to VS Code. What is so good about it? Killer features? Must have Plugins!
Sponsor Need to learn Docker? Check out Nick Janetakis' Dive into Docker course which is currently on sale!
Follow us on twitter! * Wes Bos * Scott Tolinski * Syntax
Show Notes * Cobalt2 for VS Code
* Visual Studio Code
* @rachsmithtweets 🔥 rename symbol tip - you should follow her too!
* Use F8 to cycle through inline errors
* Open the problems tab to see all your applications errors and warnings
* The built in debugger
* ESlint Package
* You can use the Prettier Package on it's own, or use via your .eslintrc file and just use the above ESLint plugin.
* Git History
* Git Lens
* Debugger for Chrome
* Color Highlight
* Settings: "editor.formatOnSave": true and "eslint.autoFixOnSave": true
* Wes' Current ESLint + Prettier Config
* Grumpy Developer
* Import Cost
* Path Intellisense
* npm Intellisense
* CSS Intellisense
* PHP Intellisense
* Another PHP Intellisense
* Custom CSS and JS Loader
* Cobalt2 Theme
* Material Theme
* Material Pale Night Theme
* Version Lens for npm
* Project Manager
* ⌘ + # Tabs Key Bindings
* Scott's VS Code Series on YouTube
* Sublime Keymap for VS Code
* ES6 Absolute Imports with Webpack
Sick Picks * Scott: Moonwalking with Einstein * Wes: Yeti Rambler * Wes: Ozark Trail 20oz * Scott outdoes Wes by 3oz: Bottl
Shameless Plugs * Level Up Tuts - check out scott's new shopping cart! * Wes' Courses * Stickers are coming!
Scott and Wes - Do you sleep? How do you get so much done? You replied to me way too fast! We share our best productivity hot tips and the apps we use the GSD.
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Follow us on twitter! * Wes Bos * Scott Tolinski * Syntax
Show Notes * Alfred
* Alfred Package Manager -Packal
* Alfred Units Conversion Workflow
* Cobalt2 Alfred Theme
* Alfred Timezones Workflow
* Alfred Process Kill Workflow
* ⌘+L makes text huge!
* Alfred Font Awesome Workflow
* Alfred Encode / Decode Workflow
* Alfred DevDocs Workflow
* Alfred Stack Overflow Workflow
* Clipy Clipboard Manager App
* Todoist
* Things App
* Getting Things Done Book
* Git Alias
* Text Expander
* aText
* Evernote
* [Video Speed Controller] https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk?hl=en()
* Karabiner Elements
* Better Touch Tool
* Focus App
* Self Control App
* Slicy
* Figma Exports
* CloudApp
Keyboard Shortcuts You Should Know Sorry windows users.
⌘ + Tabswitch between apps- Press
qto quit an app from this place ⌘+ Backtick to switch between multiple windows of an app⌘ + Tfor a new tab⌘ + Shift + Tto reopen a closed tab- Crank up Key Repeat in your keyboard setting
Option + ←/→to move word-by-word- Add Shift to select those itesm
⌘+option+Arrowto switch tabs⌘ + Numberto go to that tab #- Enable tabbing on OSX dialog Boxes
- Press question mark in any google app to get a list of shortcuts
Sick Picks * Scott: Rhino Sheild Case * Wes: Deep Work
Shameless Plugs * Level Up Tuts * Wes' Courses
The most requested syntax episode ever! We break down CSS in JavaScript. Pros/Cons? What is it? What problems does it solve? What libraries should you use? Is it stupid or amazing?
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Follow us on twitter! * Wes Bos * Scott Tolinski * Syntax
Show Notes * BEM * Styled Components * Emotion * Radium * Glamorous * Styled JSX
Sick Picks * Boxyapp Mail Client * Airpods
Shameless Plugs * Grab Level Up Tuts before the price goes up! * Modern Dev Tools
Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!"
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes * Lodash * Underscore * You should follow John David Dalton on twitter * Moment.js * moment().endOf(‘term’) * date-fns * Slugify * speakingurl * Fetch API * Axios * Cookie Jar * store.js * Cross Storage * Faker.js * Woah URL.searchParams() is a thing * Parse URI * url-search-params-polyfill * ngrok * Browsesync * Async * Bling.js
Sick Picks * Essentialism Book * Essentialism Audiobook * Satechi Aluminum Multi-Port Adapter * Satechi all Docks
Shameless Plugs * Dhanish Gajjar's Instagram * Paweł Grzybek's Snippet Generator
Twitter * Wes Bos * Scott Tolinski * Syntax
In this episode, Wes talks about his career path from a MySpace customizer to where he is now.
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes * Brootal PS20.itgo.com * CDN Money * 2004 WesBos.com * The Success of Zara: Technology Makes It Possible * REI * BTM at Ryerson University * WordPress Codex * Angle Media Group * Ryerson Co-op * Jet Cooper * Darcy Clarke * DealPage Daily Deal Aggregation * jQuery IRC * YayQuery * Ladies Learning Code * HackerYou * Wes' Blog * Sublime Text Book * Command Line Power User * Flexbox.io * React For Beginners * ES6 for Everyone * JavaScript30 * This Podcast
Sick Picks * MotoRead
Shameless Plugs * Wes' Courses * Level UP Tutorials Youtube
Twitter * Wes Bos * Scott Tolinski * Syntax
In this episode, Scott talks about his unconventional career path and how to grow your career by working on what you love.
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes * UofM Performing Arts Technology * Devin Kerr * Jamie Schefman * Michelle Chamuel * Guitar World * Ghostly International * Q LTD * Michigan Creative * Ford * GTB * Level Up Tutorials * Scott Concussion * Atya
Sick Picks * Good Hertz
Shameless Plugs * Wes' Courses * Level Up Tutorials Youtube * How to GraphQL
Twitter * Wes Bos * Scott Tolinski * Syntax
In this episode we talk about how to accept money on the internet including the ups of Stripe, the downs of PayPal.
Sponsor * Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
Show Notes * Apollo * React Apollo * GraphCool * Stripe * PayPal * Braintree * Stripe Docs * HTML5 Autocomplete Types * Stripe Radar * Royal Bank PayPal WorkAround * Stripe Atlas * Transferwise * Stripe Bitcoin
Sick Picks * ChefSteps * What Cha Tea
Shameless Plugs * Wes' Courses * Level UP Tutorials Youtube * How to GraphQL
Twitter * Wes Bos * Scott Tolinski * Syntax
Sponsor * Deliciousbrains WP Migrate DB Pro - Use the code SYNTAX for 20% off
Show Notes * Stickers - SOLD OUT MORE SOON * Scott's Personal Website on Gatsby * Gatsby Codealong * Gatsby * MJML Email Framework * The E-Myth Revisited Book * Design is a Job * Breaking the Time Barrier * Basecamp * Trello * Freshbooks * Wave
Sick Picks * Hyper Key + Karabiner Elements * Better Touch Tool * King of the Road
Twitter * Wes Bos * Scott Tolinski * Syntax
Show Notes * Deliciousbrains WP Migrate DB Pro * WesBos Website * Level Up Tutorials * WHY USE WWW? * Webpack * Babel * ESLint * Prettier * Babili * Prepack
Sick Picks Figma Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma.
CalDigit TS3 Dock The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace.
Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others.
React Native for everyone Twitter * Wes Bos * Scott Tolinski
Show Notes * WesBos Website * Level Up Tutorials * GraphQL * Dinosaur JS Conference * Angular * Pug / Jade * EJS * BEM Methodology * Stylus * Rupture * Less * Sass * PostCSS * PostCSS Autoprefixer * RuckSack * cssnext * LostGrid * Bootstrap * Haml * Babel * Flickity Plugin * webpack * Compass * React
Sick Picks Bartender 2 Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar.
Vanilla Hide menu bar icons on your Mac.
Power Blocks One set of Power Block replaces racks of dumbbells
Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others.
The Sketch Course & UX Prototyping with Principle Combo Limited Sale Price: $39.99 ~~$49.99~~
Learn the new industry standard for web design. Become an expert in the app that is changing how designers work in the modern web and app design world.
Animate Your Ideas, Design Better Apps
Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.
Twitter * Wes Bos * Scott Tolinski
Show Notes * WebRTC * Apple WebRTC Support * GetUserMedia * Slack * WebTorrent + https://github.com/webtorrent/webtorrent * Soctt WebRtc Mirror - TBC * MediaRecorder * Electron * Kap * Wes Security Cam * Scott Colorbars YouTube - TBC * Wes Face Detection * Fluent Conf
Sick Picks * Peak Design Everyday Backpack * Everyday Backpack Video * Quik by GoPro * Splice
Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others.
Level Up Tutorials Over 860 free video tutorials for beginners, intermediate and expert web professionals. Level Up your skills with clear, high production, free video tutorials.
Twitter * @Syntax * @wesbos * @stolinski
Show Notes * Wes Bos' Site * Level Up Tutorials site * Level Up Tutorials YouTube channel * Scott Tolinski personal site * Cloudflare * Next.js * Hacker News Example in Next.js * GraphQL * Graphcool * create-react-app * React dev-tools * Redux dev-tools * Preact.js * React Storybook * Meteor * Blaze
Sick Picks * Wes: Parcel App * Scott: Fish shell
Shameless Plugs * Learn Node * React Native for everyone
Subscribe to this podcast in your player of choice! Links available over at https://Syntax.fm