In this episode, we unravel BEM (Block, Element, Modifier)—a powerful CSS methodology for writing scalable, maintainable, and structured styles. We’ll cover the fundamentals, explore intermediate and advanced techniques, and share tips on avoiding common pitfalls. Whether you're new to BEM or looking to refine your approach, this guide will help you create cleaner, more efficient CSS for any project. Tune in and master BEM today!
--
Read the full blog post: The Ultimate Guide to BEM: From Basics to Advanced Techniques
A well-structured Table of Contents (ToC) is essential for a successful design system, especially in Storybook. It serves as a roadmap, making key components, guidelines, and styles easily accessible. In this episode, we explore best practices for structuring a ToC, with insights from Apple’s Human Interface Guidelines, IBM’s Carbon Design System, and Material Design. Learn how modularity, consistency, and accessibility can elevate your design system’s clarity and usability!
--
Read the full blog post: Creating a Table of Contents for a Successful Design System
In this episode, we dive into The Stack Overflow Podcast—a go-to resource for web developers and open-source enthusiasts. Whether you're a seasoned coder or just starting out, this podcast delivers insightful discussions on industry trends, best practices, and the ever-evolving world of development.
--
Read the full blog post: The Stack Overflow — A Podcast for Developers
In this episode, we explore Screaming Frog’s SEO Spider, an essential tool for auditing and optimizing websites for search engines. Learn how it helps detect broken links, duplicate content, and structural issues, and why generating XML sitemaps can improve SEO strategy. Whether you're an SEO expert or just getting started, this episode will show you how data-driven insights can enhance your website’s performance and visibility. Tune in to take your SEO game to the next level!
--
Read the full blog post: Screaming Frog: SEO Spider Website Crawler
Ever wished you could fine-tune hover effects for mouse users without affecting touchscreen devices? In this episode, we explore a custom Tailwind CSS variant, mouse-only, which allows you to target users with precise pointer devices. Learn how to configure your tailwind.config.js file, use media queries, and apply styles conditionally to enhance the user experience. Tune in and discover how to create smoother interactions for all users!
--
Read the full blog post: Tailwind CSS: Targeting Mouse Devices Only with `mouse-only:`
In this episode, we explore the Aspect Ratio Calculator, a free online tool that makes it easy to determine and maintain correct proportions for images, videos, and UI elements. By automating calculations for both standard and custom ratios, it delivers instant results and handles proportional resizing on the fly. The tool helps improve workflow efficiency, prevents layout issues, and ensures consistent visuals across different screen sizes and devices. As an accessible, web-based resource, it saves time and eliminates manual calculation errors—everything you need for a polished end product!
--
Read the full blog post: Aspect Ratio Calculator: A Must-Have Tool for Designers and Developers
Should you open-source your starter template project? In this episode, we explore the pros and cons of making your Next.js and Tina CMS-based project public. From increased visibility and community engagement to the challenges of maintenance and commercial conflicts, we break down the key factors to consider before taking the leap. Tune in to find out if open-sourcing aligns with your career goals, learning journey, and passion for contributing to the dev community!
--
Read the full blog post: Should You Open-Source Your Starter Template? A Balanced Look at the Pros and Cons
In this episode, we showcase PerfectPixel by WellDoneCode, a must-have Chrome extension for pixel-perfect web development. Learn how it helps developers overlay semi-transparent images onto webpages for precise alignment with design mockups. Say goodbye to misaligned layouts and endless tab switching—this tool streamlines debugging, improves workflow efficiency, and ensures UI/UX perfection. Tune in and take your designs to the next level!
--
Read the full blog post: PerfectPixel by WellDoneCode: Your Pixel-Perfect Companion
In this episode, we’re highlighting "Voice of Design," a podcast that explores the intersection of business and design. If you’re a designer looking for insights on strategy, creativity, and industry trends, this is one to check out. We also look back at its connection to "The Futur" and how past design discussions continue to shape today’s creative landscape. Tune in and get inspired!
--
Read the full blog post: Voice of Design — A Podcast for Designers
In this episode, we explore optimizing viewport orientation changes for a better mobile experience. Learn how factors like device model, CPU/GPU load, and background processes impact transition speed. We’ll cover best practices, from efficient coding to using JavaScript libraries, ensuring seamless performance across devices. Tune in to master viewport responsiveness and enhance mobile UX!
--
Read the full blog post: Understanding Viewport Orientation Change Times for a Flawless Mobile Experience
In this episode, we showcase Iconly: Convert SVG Strokes to Fills, a handy tool for graphic designers and developers. Iconly effortlessly transforms SVG strokes into fills, making SVGs more compatible with webfonts while preserving design integrity. With a user-friendly interface, you can easily upload, adjust, and download modified SVGs, streamlining your workflow. Tune in to learn how Iconly can enhance your SVG styling process!
--
Read the full blog post: Iconly: Convert SVG Strokes to Fills
In this episode, we dive into getters and setters—language features that let you run logic whenever a property is read or written. You’ll learn how getters and setters enable encapsulation and data protection, enforce input validation, and support lazy initialization. We’ll walk through practical code examples that demonstrate each benefit, then discuss performance considerations compared to direct property access. Finally, we’ll explore alternative patterns—like public fields and standard methods—and share clear guidelines on when to embrace or avoid getters and setters based on clarity, safety, and speed. Tune in to master these techniques and write cleaner, more robust code!
--
Read the full blog post: Why Use Getters and Setters in JavaScript and TypeScript?
In this episode, we’re exploring Visual Studio Code (VS Code)—one of the most powerful and versatile code editors. With its customizable interface, extensive plugin ecosystem, integrated terminal, seamless Git support, and built-in debugger, VS Code makes coding more efficient and collaborative. Whether you're a beginner or an expert, tune in to discover how VS Code can optimize your development workflow!
--
Read the full blog post: VS Code: Code Editing. Redefined
In this episode, we take a closer look at HTTrack, a website copier that lets you download full websites for offline use while preserving their structure. Learn how this tool helps web developers, researchers, and curious minds save and explore web content efficiently. Plus, discover how you can update existing copies and resume downloads seamlessly. Tune in and find out why HTTrack is a valuable addition to your toolkit!
--
Read the full blog post: HTTrack: Website Copier
Ever wondered how to create a favicon that adapts to light and dark mode? In this episode, we break down a step-by-step tutorial on building a themeable SVG favicon using CSS media queries. Learn how to link it in your HTML and test its adaptability across different themes. A small detail that makes a big difference in modern web design! Tune in to master this technique and level up your site’s branding.
--
Read the full blog post: How to Make a Themeable SVG Favicon
In this episode, we delve into Docusaurus, an open-source static site generator created by Facebook. By leveraging React and Markdown, Docusaurus simplifies both setup and ongoing maintenance for project docs. It supports versioned documentation, making it easy for users to explore different iterations of your project. Plus, it offers customizable theming—using CSS or Tailwind—along with multi-language support, analytics integrations, and even a Markdown-based blog. With static site generation ensuring speed and SEO optimization, deploying to platforms like GitHub Pages, Vercel, or Netlify becomes a breeze. Tune in to discover why Docusaurus is a top choice for streamlined, versatile documentation!
--
Read the full blog post: Docusaurus: The Ultimate Tool for Documentation Websites
In this episode, we explore website performance optimization through responsive media handling. Based on a blog post from the Code Examples of the Media Creators (NodeJS) website, we discuss how to serve compressed images and videos dynamically based on connection speed and device capabilities. Learn how JavaScript, NodeJS, PugJS, and CSS can improve smooth scrolling, animations, and browser compatibility while maintaining efficiency across devices. Tune in to discover practical coding techniques for a faster, more user-friendly web experience!
--
Read the full blog post:
In this episode, we explore draw.io, a free and versatile diagramming tool perfect for creating flowcharts, network diagrams, UML sketches, and more. With an easy-to-use interface, cloud storage integration, and open-source accessibility, draw.io is a go-to solution for professionals and casual users alike. Tune in to learn how this tool can enhance your workflow and make complex ideas easier to visualize!
--
Read the full blog post: draw.io: Free online diagram software for making flowcharts
In this episode, we explore a CSS-only method for scaling SVG images without JavaScript. Learn how to wrap your SVG in a div, clean up unnecessary attributes, and use CSS tricks like padding-bottom and viewBox to make your graphics fully responsive. Discover how to maintain perfect proportions while fitting any container—complete with a CodePen example. Tune in to master this lightweight, flexible SVG technique!
--
Read the full blog post: How to Scale an SVG with CSS Only
In this episode, we explore how to customize scrollbars in WebKit browsers like Chrome and Safari using CSS pseudo-elements. Learn how to style scrollbar width, colors, and tracks with ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, and more. We also discuss the accessibility considerations of custom scrollbars and how to strike the right balance between aesthetics and usability. Tune in and start experimenting with your own styles!
--
Read the full blog post: Custom Scrollbar with CSS (WebKit)
