Explore every episode of the podcast design-code.tips

Renaming multiple files manually? That’s a productivity killer! In this episode, we explore a step-by-step guide to bulk file renaming using the command line. Learn how to create a Bash script and use a mapping file to automate file name changes efficiently. We’ll walk through setting up the script, making it executable, and ensuring safe execution. Whether you're a developer, designer, or just someone who deals with large batches of files, this technique will save you time and effort. Tune in and level up your automation skills!

--

Read the full blog post: ⁠⁠⁠⁠Renaming Files in Bulk Using the Command Line: A Step-by-Step Guide

In this episode, we’re highlighting PodRocket, a web development podcast by LogRocket. Covering topics like accessibility, design, and open-source software, PodRocket delivers valuable insights to help developers level up their skills. Whether you’re looking to refine your workflow or stay ahead of industry trends, this podcast is a must-listen. Tune in to explore what makes PodRocket a great resource for web developers!

--

Read the full blog post: ⁠⁠⁠⁠PodRocket — A web development podcast from LogRocket

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)

In this episode, we delve into the Min-Max Calculator, a handy solution for generating CSS clamp() values. By entering minimum and maximum values alongside a viewport range, the calculator outputs an optimal formula that ensures fluid scaling of elements—like text and spacing—across all devices. Rather than manually crafting complex formulas or relying on media queries, you can streamline your workflow and maintain consistent design. While alternatives like manual calculations or CSS frameworks exist, the Min-Max Calculator’s user-friendly approach makes it a top choice for modern, efficient CSS. Tune in to discover how this tool can simplify responsive design and enhance your projects.

--

Read the full blog post: Min-Max Calculator: Generate Responsive CSS clamp() Values

In this episode, we break down HandBrake, the free, open-source video transcoder that helps compress large video files without sacrificing quality. Learn how to optimize videos for web performance, reduce file sizes for faster load times, and ensure seamless playback across devices. We’ll explore the best HandBrake presets, bitrates, and resolutions to make your videos responsive and efficient. Tune in and start optimizing your media today!

--

Read the full blog post: HandBrake: Open Source Video Transcoder

In this episode, we break down how to download entire websites using wget for MacOS/Linux and HTTrack for Windows. Whether for archiving, mirroring, or offline access, these tools are essential for web developers and bash scripting enthusiasts. Tune in to learn the best techniques for each platform and enhance your workflow with these powerful methods!

--

Read the full blog post: How to Download an Entire Website

In this episode, we explore gatsby-remark-vscode, a powerful syntax highlighting plugin for Gatsby that brings VS Code’s high-quality highlighting without the need for client-side JavaScript. Discover how this build-time solution improves site performance, reduces load times, and outshines browser-based tools like Prism. Tune in to learn how it works, why it’s better, and how to integrate it into your Gatsby projects!

--

Read the full blog post: My Choice for Gatsby Markdown Code Highlighting and Why

In this episode, we take a deep dive into iTerm2, a feature-rich replacement for the macOS Terminal. Learn how this modern command-line tool enhances productivity with split panes, search, profiles, and automation features. Whether you're a developer or a power user, iTerm2 is a must-have for improving workflow efficiency. Tune in and discover why this tool is a game-changer for macOS users!

--

Read the full blog post: iTerm2: macOS Terminal Replacement

Stay ahead in the world of software development with "The Changelog"—your go-to weekly podcast for the latest in open-source, web development, and tech trends. From insightful news breakdowns to deep technical dives and expert interviews, each episode keeps you informed and inspired.

--

Read the full blog post: The Changelog — A Podcast for Developers

In this episode, we break down the best strategies to speed up your WordPress website. From choosing the right hosting provider to caching, image optimization, and using a CDN, we cover essential techniques for better performance. We’ll also explore CSS and JavaScript optimizations, plus the benefits of custom templates. Tune in and learn how to create a faster, more efficient WordPress site!

--

Read the full blog post: How to Speed Up WordPress Websites

In this episode, we explore Google’s Map Style Customization Tool, a free online resource that lets designers and developers fine-tune Google Maps for a cohesive UI. Learn how to modify colors, hide elements, and export JSON styles for seamless integration with the Google Maps API. Discover how custom map styles improve branding, readability, and user experience while reducing clutter. Tune in for practical insights on elevating your web and app design!

--

Read the full blog post: Customize Google Maps: A Look at Google’s Map Style Tool

Want to customize your WooCommerce store? In this episode, we walk through modifying the "Add to Cart" button to say "Pre-order Now" for selected products. Learn how to use a simple WooCommerce filter in your child theme's functions.php file while ensuring your site stays safe with backups. Whether you're a developer or store owner, this quick tweak can enhance user experience and boost conversions. Tune in for a practical guide to WooCommerce customization!

--

Read the full blog post: Change Default "Add to Cart" Button Text to "Pre-order Now" in WooCommerce

In this episode, we’re showcasing Local, a must-have development tool for WordPress professionals. Discover how this local environment simplifies site building, speeds up workflows, and enhances testing efficiency. Whether you're a beginner or an experienced dev, Local can transform your WordPress development process. Tune in to learn why it’s a game-changer for modern web developers!

--

Read the full blog post: Local: An effortless way to develop WordPress sites locally

In this episode, we’re showcasing Regex101, a must-have tool for anyone working with regular expressions. From live testing and detailed explanations to syntax highlighting and multi-flavor support, Regex101 makes regex creation and debugging easier and more efficient. Whether you're a beginner or a seasoned developer, this tool can help you write better expressions with less hassle. Tune in to learn how to master regex like a pro!

--

Read the full blog post: Regex101: Master Regular Expressions

In this episode, we break down how to build an accessible accordion in React, covering key aspects like state management with useState, event handling, and the use of ARIA attributes for screen reader compatibility. Learn how keyboard navigation and WCAG compliance enhance usability for all users, including those with visual or motor impairments. Accessibility is more than best practice—it’s essential. Tune in to create more inclusive and user-friendly web experiences!

--

Read the full blog post: Simple Accessible Accordion React Component

That's My Jamstack is a podcast focusing on modern web development using the Jamstack architecture. It features interviews with leading figures in the field, discussing static site generation and related tools. The podcast aims to provide listeners with insights into current trends and best practices. It's part of a larger online presence including a blog and resources for developers. The podcast sits amongst others focusing on web development.

--

Read the full blog post: That's my JAMstack — A Podcast for Developers

In this episode, we shine a spotlight on Ta11y, a community-driven initiative focused on making digital accessibility more achievable for small-to-medium organizations. Learn how Ta11y provides essential resources, tutorials, and best practices to help creators build inclusive digital experiences. Discover why accessibility matters and how you can contribute to a more inclusive web. Tune in now!

--

Read the full blog post: Ta11y - Learn about Accessibility

In this episode, we break down how to add a one-time website introduction animation using JavaScript and "sessionStorage". Learn how to implement a smooth, user-friendly intro that plays only once per session or on specific pages. We’ll cover code examples, styling considerations, and cross-browser compatibility to ensure a polished experience. Tune in and discover how to create engaging web animations without disrupting usability!

--

Read the full blog post: How to Add an Intro to a Website with JS

In this episode, we take a deep dive into Zoho Mail, a secure and private business email service designed for professionals. With custom domains, end-to-end encryption, mobile access, and seamless integration with Zoho’s productivity suite, Zoho Mail helps teams communicate efficiently while ensuring data protection. Whether you're a freelancer or a growing business, learn how Zoho Mail can streamline your workflow and keep your emails secure and ad-free.

--

Read the full blog post: Zoho Mail: Secure business email

In this episode, we explore a CSS-only technique for replacing button text—a clever trick using "visibility: hidden" and the ":before" pseudo-element. But is it the best approach? We discuss its accessibility drawbacks and suggest alternatives for a more inclusive design. Tune in to learn when and how to use this method responsibly!

--

Read the full blog post: Replace Text with CSS Only

In this episode, we showcase Cyberduck, an open-source file management tool praised for its ease of use and wide protocol support. Whether you need seamless cloud integration, secure data transfers, or a reliable way to manage files across multiple servers, Cyberduck delivers. Tune in to learn why it’s a must-have for developers, designers, and tech enthusiasts!

--

Read the full blog post: Cyberduck: Connecting Seamless to Every Server

--

Read the full blog post: WooCommerce: Check if Products in Cart Have a Specific Tag and Remove Them If They Can't Be Shipped

In this episode, we spotlight The CSS Podcast — For Web Developers, hosted by Google’s Una Kravets and Adam Argyle. They break down complex CSS concepts, making them easy to understand. From accessibility to z-index, this podcast is a must-listen for anyone looking to improve their styling skills. Tune in and level up your CSS game!

--

Read the full blog post: The CSS Podcast — For Web Developers

In this episode, we take a closer look at Animation Composer, a free Adobe After Effects plug-in that simplifies motion design. Perfect for beginners and pros alike, this tool lets you add animations effortlessly. Learn how it works, why it’s a game-changer, and how it can boost your creative workflow. Tune in and explore more at design-code.tips!

--

Read the full blog post: Animation Composer: A (free) plug-in for Adobe After Effects

In this episode, we showcase Laws of UX, a fantastic resource that breaks down essential design principles like Hick’s Law to help you craft better, more intuitive user experiences. Learn how reducing cognitive load can enhance usability and streamline decision-making in websites and apps. We also highlight the Nielsen Norman Group for further research on UX best practices. Tune in and discover how these resources can level up your design skills!

--

Read the full blog post: Laws of UX – A collection of best practices that designers can consider when building user interfaces

In this episode, we explore how to redirect WooCommerce users after login based on their roles using PHP snippets. Learn how to block backend access for subscribers, direct shop managers to order pages, and improve both security and user experience. We also discuss how to implement these snippets in a child theme’s functions.php for better control over post-login redirections. Plus, stick around for a great podcast recommendation!

--

Read the full blog post: ⁠WooCommerce: Redirect Users by Role to Specific URL After Login

In this episode, we shine a spotlight on The Futur—a must-listen podcast for creative professionals looking to level up their careers. Hosted by the insightful Chris Do, The Futur dives deep into the business side of design, covering branding, marketing, and strategy with some of the industry's brightest minds.

--

Read the full blog post: ⁠The Futur — A Podcast for the Business of Design

In this episode, we explore Figma, the game-changing collaborative design tool that’s redefining how teams work together. With its cloud-based platform, real-time editing, version history, and intuitive interface, Figma makes design seamless and accessible from anywhere. Whether you're a solo designer or part of a large team, discover how Figma streamlines workflows and enhances collaboration. Tune in to see why it’s a must-have for modern designers!

--

Read the full blog post: ⁠Figma: A Modern Collaborative Design Tool

In this episode, we uncover Checklist Design, a must-have resource for web and app developers looking to refine their UX and UI skills. With curated checklists covering key design principles, this tool helps ensure intuitive and effective interfaces. Whether you’re a beginner or a pro, discover how structured design checklists can streamline your workflow and enhance your projects!

--

Read the full blog post: Checklist Design - A collection of the best design practices

In this episode, we explore Netlify, a powerful platform that simplifies web development and deployment. From automated hosting and continuous deployment to serverless functions and global scalability, Netlify streamlines workflows so developers can focus on coding, not infrastructure. Whether you're building a simple site or a complex AI-driven app, discover how Netlify’s tools and Jamstack support can boost your productivity. Tune in and learn why it’s a game-changer for modern web projects!

--

Read the full blog post: Netlify: Automating Modern Web Projects

In this episode, we explore OBS Studio, the go-to open-source tool for video recording and live streaming. Available on Windows, macOS, and Linux, OBS offers high-performance video and audio mixing, customizable scenes, and seamless plugin integration. Whether you're streaming, recording, or creating pro-level content, discover how OBS empowers creators with its powerful features and community-driven innovation. Tune in to learn how to make the most of this incredible tool!

--

Read the full blog post: OBS: Open Broadcaster Software®