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 jus...

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 reso...

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 p...

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, consist...

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 w...

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 cr...

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 cons...

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...

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 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 i...

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...

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...

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 direc...

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 w...

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...

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 br...

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-lan...

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 compa...

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 v...

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...

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...

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 wor...

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. Tu...

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...