Hasty Treat - CSS Nesting 1

Hasty Treat - CSS Nesting 1

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

Jaksot(967)

927: AI Browsers, 100X Build Speed, Massive Svelte Update - Web Dev News

927: AI Browsers, 100X Build Speed, Massive Svelte Update - Web Dev News

Scott and Wes break down the latest in web dev news, from Amazon’s AI-powered VS Code fork and Node’s native TypeScript support, to Vite overtaking Webpack and Svelte’s newest async and remote features. They also cover big moves in developer tools, fresh browser experiments, and what these shifts mean for the future of coding. Show Notes 00:00 Welcome to Syntax! 04:08 Kiro. Kiro Video. 09:05 Node 22.18 allows TypeScript without compiler. 11:42 React Router RSC, Parcel + Vite Support. 12:56 Windsurf Bought for real this time. 14:25 Brought to you by Sentry.io. 14:49 Copyparty, the FOSS file server Codeparty Video Codeparty on GitHub. 23:22 Vite Overtakes Webpack. Evan You X Post. 25:16 Rolldown Vite. void0 Rolldown-Vite. 27:06 Claude Code pricing clamp down. Wes’ X Post. 30:07 Async svelte released. Async Svelte Discussion. 31:41 Remote Svelte Released. Remote Functions. 34:59 Trae Solo. 37:58 Perplexity Comet Browser. 43:07 Sick Picks + Shameless Plugs. Sick Picks Scott: Black Stuff. Wes: MEKOH Short Pressure Washer Gun with Swivel. 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

11 Elo 202551min

926: RSS Is NOT Dead

926: RSS Is NOT Dead

Scott and CJ explore why RSS still matters and how it’s more underused than outdated. They discuss how to self-host RSS readers, escape the noise of the modern web, and reclaim a cleaner, ad-free reading experience across devices. Show Notes 00:00 Welcome to Syntax! 01:09 Brought to you by Sentry.io 02:41 What is RSS and how does it work? RSS Atom (web standard) JSON Feed 06:14 Hosting your own RSS server: Miniflux, FreshRSS, and more Miniflux FreshRSS 11:00 Decluttering the web with article scraping 12:38 Best RSS clients for desktop and mobile Capy Reader Google Reader ReadKit Pocket is shutting down wallabag mymind 18:51 Where to find RSS feeds The Brutalist Report Programming Subreddit Hacker News BlueSky Shameless Plugs Syntax YouTube Channel: Cursor User Tries Claude 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

6 Elo 202529min

925: Scott & CJ’s Fave Productivity Apps & Web Apps

925: Scott & CJ’s Fave Productivity Apps & Web Apps

Scott and CJ go full productivity nerd, swapping notes on their favorite web apps for writing, coding, planning, and more. From terminals to to-do lists to dumb phones, it’s a deep dive into the tools powering their workflows. Show Notes 00:00 Welcome to Syntax! 00:35 Brought to you by Sentry.io. 01:56 Text to speech or speech to text. 02:20 Superwhisper. 08:29 Kiro. 16:16 CJ’s current editor preference. 17:59 Finding the right editor. 18:47 Terminals. 20:22 Ghostty. 24:16 Note-taking. 26:32 Obsidian. 30:24 Logseq. 31:03 Todo lists. 31:08 Tweek.so 34:42 Trello. 37:25 Notion Calendar. 38:55 Email. 43:21 FairEmail. 43:43 Dumb phones. 45:10 Olauncher 47:39 Audio Bookshelf. 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

4 Elo 202551min

924: Sync Engines and Local Data

924: Sync Engines and Local Data

Wes and Scott talk about local-first sync engines—why they matter, what makes apps feel fast, and which platforms stand out. From LiveStore to Convex to Instant DB, they break down the pros and cons of each and debate what the “next React” might look like in a local-first future. Show Notes 00:00 Welcome to Syntax! 01:52 Intro to local data: what makes apps feel fast 05:08 Could the next React be a local-first sync engine? 08:23 LiveStore 18:01 Zero 21:58 Instant DB 24:18 Brought to you by Sentry.io 24:43 Convex 27:54 ElectricSQL 29:48 PowerSync and PartyKit 30:51 Choosing the right sync engine 40:34 Sick Picks + Shameless Plugs Sick Picks Scott: Rummikub Wes: Headphone covers 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

30 Heinä 202546min

923: Getting the Most Out of AI Coding

923: Getting the Most Out of AI Coding

Scott and Wes share their top strategies for getting high-quality results from AI coding tools like Cursor, Claude, ChatGPT, and Windsurf. From better prompting to building reusable rule sets, they cover practical tips for making AI your most productive coding partner. Show Notes 00:00 Welcome to Syntax! Wes' Tweet 02:56 How to get the best results when using AI. 03:15 Scaffold it out yourself. 05:40 Be clear with your prompts. 07:45 Use XML tags around specific items 08:47 Utilize Rules like Cursor rules or Copilot rules. 13:20 Ask it to create some rules based on an existing codebase. 16:03 Break things down into clear concise actionable items. 17:22 Where to store your rules files. 18:37 Utilizing llm.txt files. 19:24 Context7. 20:28 Tag relevant files, functions, etc. 21:38 Feed logs back into the AI. 22:36 Logging Errors. 22:54 Brought to you by Sentry.io. 24:14 Long running chats get worse. Wes' Tweet 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

28 Heinä 202526min

922: Pre-commit Hooks, requestAnimationFrame, Code Reviews, and More

922: Pre-commit Hooks, requestAnimationFrame, Code Reviews, and More

In this potluck episode of Syntax, Wes and Scott answer your questions about code reviews, migrating legacy apps, CSS attr() use cases, pre-commit hooks, the future of creative web development, whether front-end devs need to be full-stack, and more! Show Notes 00:00 Welcome to Syntax! 00:43 When is the appropriate time to use requestAnimationFrame? 05:10 How do you handle code reviews on larger teams? 13:08 When to use the CSS attr() function 19:01 The future of browsing websites and the impact of AI 28:45 Brought to you by Sentry.io 29:10 Navigating browser preview in VS Code 31:31 Pre-populating email content with mailto 34:29 Is there increasing pressure for front-end developers to become full-stack? 43:14 What pre-commit checks should you run and how? 46:16 How do you deal with a poorly-built codebase when you already have thousands of active users? 50:05 What GitHub Copilot features should you disable while you’re learning something new? 52:22 Sick Picks + Shameless Plugs Sick Picks Scott: WOLFBOX MF100 Electric Air Duster Wes: Competition Kettlebells 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

23 Heinä 202558min

921: AI Coding Roadmap for Newbies (And Skeptics)

921: AI Coding Roadmap for Newbies (And Skeptics)

Scott and Wes break down how to code with and for AI; perfect for skeptics, beginners, and curious devs. They cover everything from Ghost Text and CLI agents to building your own AI-powered apps with embeddings, function calling, and multi-model workflows. Show Notes 00:00 Welcome to Syntax! 03:56 How to interface with AI. 04:07 IDE Ghost Text. 05:45 IDE Chat, Agents. 08:00 CLI Agents. Claude Code. Open Code. Gemini. 11:13 MCP Servers. Context7 14:47 GUI apps. v0. Bolt.new. Lovable. Windsurf. 19:07 Existing Chat app like ChatGPT. 22:37 Building things WITH AI. 23:32 Prompting. 26:53 Streaming VS not streaming. 28:14 Embeddings and Rag. 31:09 MCP Server. CJ’s MCP Deep Dive. 32:36 Brought to you by Sentry.io. 33:25 Multi-model, multi-provider. 36:27 npm libs to use to code with AI. OpenAI SDK. AI SDK. Cloudflare Agents. Langchain. Local AI Tensorflow. Transformers.js. Huggingface. 44:12 Processes and exploring. 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

21 Heinä 202548min

920: How to Build MCP Servers

920: How to Build MCP Servers

Wes and Scott talk about how developers can expose powerful tools to AI using the Model Context Protocol. They discuss tool calling, remote MCP specs, authentication, and real-world use cases that make AI more capable through smarter integrations. Show Notes 00:00 Welcome to Syntax! 01:36 What is MCP? 07:23 MCP tools 11:33 MCP resources 13:43 Saving reusable prompts 16:18 Creating and validating MCP tools 18:31 Brought to you by Sentry.io 18:31 Tool calling vs MCP servers 21:28 Remote vs local MCP servers mcp-remote 26:24 Useful MCP servers mcp-server-cloudflare use-mcp awesome-mcp-servers 32:48 Sick Picks + Shameless Plugs Sick Picks Scott: Mario Kart World Wes: anyloop Kid’s Watch 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

16 Heinä 202537min

Suosittua kategoriassa Politiikka ja uutiset

rss-ootsa-kuullut-tasta
aikalisa
ootsa-kuullut-tasta-2
tervo-halme
politiikan-puskaradio
rss-kuka-mina-olen
rss-vaalirankkurit-podcast
otetaan-yhdet
et-sa-noin-voi-sanoo-esittaa
aihe
rss-podme-livebox
rikosmyytit
radio-antro
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset
the-ulkopolitist
rss-raha-talous-ja-politiikka
linda-maria
eevan-politiikkapodi-totuuksia-suomesta