Syntax - Tasty Web Development Treats3 Dec 2018

Hasty Treat - Uses for CSS Variables

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

Det här avsnittet är hämtat från ett öppet RSS-flöde och publiceras inte av Podme. Det kan innehålla reklam.

Avsnitt(1038)

1038: OpenAI Releases GPT 6 Astra

Wes and CJ dig into OpenAI’s GPT‑6 Astra; the massive jump in computer use, the wild Blender MCP 3D demos, and whether all the AGI talk actually holds up. Plus Hugging Face’s robot duck, Vitest 5 and ...

14 Sep 1h 25min

1037: WebMCP is here (and you should care)

Scott and Wes talk about WebMCP with Sarah Drasner and Dominic Farolino from the Chrome team, which is the new W3C standard that lets your site hand real tools to an agent. They cover the security mod...

9 Sep 56min

1036: Cursor & OpenAI Break Up

The messy breakup is official; as of November 12, OpenAI's models are getting pulled from Cursor, and we're digging into who's really to blame (and why Wes called it). Plus pnpm 12 goes full Rust, Mit...

7 Sep 1h 12min

1035: Why everyone is moving to Stylex?

Meta’s StyleX compiles thousands of styles into a few reusable class names at build time—zero runtime, fully type-safe. Scott and Wes break down why it’s suddenly everywhere, and why it might be the b...

2 Sep 26min

1034: Omarchy Quattro Release

Grokbot actually earns its keep, Cursor takes a swing at GitHub with Origin, and Omarchy Quattro ships pre-wired for nine coding agents. Plus: the GitHub outage post-mortem, a compromised Rust crate, ...

31 Aug 1h 15min

1033: 8 New CSS, JS and HTML Features You Should Know

Scott and Wes run through eight new CSS, JS, and HTML features landing in browsers; including the relative alpha() color function, the progress() function for calculating values between units, Promise...

26 Aug 18min

1032: Stripe Buys OpenRouter for $7B

Scott and CJ break down Stripe's $7B acquisition of OpenRouter, the SvelteKit 3 release candidate, and their first look at TanStack Charts. Plus Zed's new Delta editor, stealing reasoning traces from ...

24 Aug 1h 7min

1031: My Coding Skills Are Atrophying

Scott and Wes answer your questions about coding in the AI era, atrophying skills from too much autocomplete, whether it’s finally time to leave VS Code, chasing flow state with agents, and which sing...

19 Aug 57min