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