Sveriges 100 mest populära podcasts

Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

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.

Prenumerera

iTunes / Overcast / RSS

Webbplats

syntax.fm

Avsnitt

744: Docker For Developers

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

2024-03-18
Länk till avsnitt

743: JavaScript Figma Plugins & Working at GitHub With Cameron McEfee

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

2024-03-15
Länk till avsnitt

742: Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns

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

2024-03-13
Länk till avsnitt

741: TypeScript Interview Questions - STUMP?d

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

2024-03-11
Länk till avsnitt

740: Local AI Models in JavaScript - Machine Learning Deep Dive With Xenova

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

2024-03-08
Länk till avsnitt

739: The LoFi Movement: Building Local First Apps

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

2024-03-06
Länk till avsnitt

738: Little Scripts: Coding for your Co-workers

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

2024-03-04
Länk till avsnitt

737: JSR: The New TypeScript Package Registry (NPM Killer)

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

2024-03-01
Länk till avsnitt

736: CJ Reynolds is Joining Syntax

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

2024-02-28
Länk till avsnitt

735: The Taliban Stole My Domain

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

2024-02-26
Länk till avsnitt

734: HTMX Web Apps with Carson Gross

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

2024-02-23
Länk till avsnitt

733: Egress, scraping, Safari EU changes, is SetInterval worth it?

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

2024-02-21
Länk till avsnitt

732: Stop going to Spam: DMARC, SPF and DKIM Explained

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

2024-02-19
Länk till avsnitt

731: Client side security, XSS attacks & CSP with Stripe?s Alex Sexton

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

2024-02-16
Länk till avsnitt

730: Own Your Own PaaS

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

2024-02-14
Länk till avsnitt

729: CSS Native @scope

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

2024-02-12
Länk till avsnitt

728: AI Superpowers with Kevin Hou and Codeium

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

2024-02-09
Länk till avsnitt

727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

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

2024-02-07
Länk till avsnitt

726: Is HTMX a Joke?

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

2024-02-05
Länk till avsnitt

725: Safari is the New Chrome - Jen Simmons of Apple

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

2024-02-02
Länk till avsnitt

724: Potluck: Is Virtual DOM Bad?

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

2024-01-31
Länk till avsnitt

723: Svelte 5: Speed Simplicity Size

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

2024-01-29
Länk till avsnitt

722: Next Level Web APIs. Bluetooth, File Access, Thomas Steiner - Project Fugu

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

2024-01-26
Länk till avsnitt

721: You should learn Drizzle, the TypeScript SQL ORM

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

2024-01-24
Länk till avsnitt

720: Where Does Time Come From?

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

2024-01-22
Länk till avsnitt

719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux

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

2024-01-19
Länk till avsnitt

718: React Server Components

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

2024-01-17
Länk till avsnitt

717: How to be Productive

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

2024-01-15
Länk till avsnitt

716: JS Perf Wins & New Node.js Features with Yagiz Nizipli

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

2024-01-12
Länk till avsnitt

715: Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck)

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

2024-01-10
Länk till avsnitt

714: CSS :has() in Every Browser! 10 Uses

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

2024-01-08
Länk till avsnitt

713: The CSS OG Eric Meyer. 1994 CSS, JS in Fridges, Tailwind, and Web Standards

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

2024-01-05
Länk till avsnitt

712: 2024 Predictions

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

2024-01-03
Länk till avsnitt

711: The Surprisingly Exciting World of Print + PDF CSS

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

2024-01-01
Länk till avsnitt

710: A Passwordless Future Passkeys with Anna Pobletts

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

2023-12-29
Länk till avsnitt

709: Potluck × Naming Tech × Generators × Layers Follow Up × Sick Picks Page

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

2023-12-27
Länk till avsnitt

708: How We Made Syntax.fm Faster

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

2023-12-25
Länk till avsnitt

707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!

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

2023-12-20
Länk till avsnitt

706: AI and ML - The Pieces Explained

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

2023-12-18
Länk till avsnitt

705: Is Running Random Code From npm Safe? With Feross Aboukhadijeh

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

2023-12-15
Länk till avsnitt

704: Stump'd JS + CSS Interview Questions

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

2023-12-13
Länk till avsnitt

703: The Observer Pattern

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

2023-12-11
Länk till avsnitt

702: New + Proposed JS APIs for 2024

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

2023-12-06
Länk till avsnitt

701: A11y Treats - Labels & Roles

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

2023-12-04
Länk till avsnitt

700: Payload is Rails for JS with TypeScript, React and Drizzle (James Mikrut)

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

2023-12-01
Länk till avsnitt

699: Potluck × TypeScript's Longevity × Canvas-Rendered Apps × Learning Rust × Executing Untrusted JS Code

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

2023-11-29
Länk till avsnitt

698: Why You Should Be Using CSS @Layers

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

2023-11-27
Länk till avsnitt

697: What is DevRel with Salma Alam-Naylor

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

2023-11-24
Länk till avsnitt

696: How to Build a Website or App

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

2023-11-22
Länk till avsnitt

695: 5 New CSS Features You Should Know

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

2023-11-20
Länk till avsnitt
Hur lyssnar man på podcast?

En liten tjänst av I'm With Friends. Finns även på engelska.
Uppdateras med hjälp från iTunes.