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 

Hasty Treat - CSS Units

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.

Technology

Tech News

Podcasting

Gadgets

Software How-To

News

 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

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

 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

756: CSS Is Getting Mixins + Functions

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

755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk

 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

754: How to Level Up Your Web Development Career

 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

Hasty Treat - CSS Units

Download our free app to listen on your phone