Shows
design-code.tips60 | Renaming Files in Bulk Using the Command Line: A Step-by-Step GuideRenaming 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 Fil...
2025-11-0609 mindesign-code.tips59 | "PodRocket" — A web development podcast from LogRocketIn 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
2025-11-0302 mindesign-code.tips58 | The Ultimate Guide to BEM: From Basics to Advanced TechniquesIn 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
2025-11-0122 mindesign-code.tips57 | Creating a Table of Contents for a Successful Design SystemA 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
2025-10-3015 mindesign-code.tips56 | "The Stack Overflow" — A Podcast for DevelopersIn 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
2025-10-2710 mindesign-code.tips55 | Screaming Frog: SEO Spider Website CrawlerIn 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
2025-10-2505 mindesign-code.tips54 | Tailwind CSS: Mouse-Only Device Targeting with Custom VariantEver 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:`
2025-10-2312 mindesign-code.tips53 | Aspect Ratio Calculator: A Must-Have Tool for Designers and DevelopersIn 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 Rat...
2025-10-2005 mindesign-code.tips52 | Open-Sourcing Starter Templates: Pros, Cons, and ConsiderationsShould 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
2025-10-1816 mindesign-code.tips51 | PerfectPixel by WellDoneCode: Your Pixel-Perfect CompanionIn 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
2025-10-1604 mindesign-code.tips50 | "Voice of Design" — A Podcast for DesignersIn 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
2025-10-1302 mindesign-code.tips49 | Flawless Mobile Experience: Understanding Viewport Orientation Change TimesIn 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
2025-10-1105 mindesign-code.tips48 | Iconly: SVG Stroke to Fill Conversion ToolIn 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
2025-10-0905 mindesign-code.tips47 | Why Use Getters and Setters in JavaScript and TypeScript?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 cl...
2025-10-0611 mindesign-code.tips46 | VS Code: Code Editing. RedefinedIn 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
2025-10-0405 mindesign-code.tips45 | HTTrack: Website CopierIn 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
2025-10-0204 mindesign-code.tips44 | Themeable SVG FaviconsEver 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
2025-09-2913 mindesign-code.tips43 | Docusaurus: The Ultimate Tool for Documentation WebsitesIn 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, vers...
2025-09-2712 mindesign-code.tips42 | Code Examples of the Media Creators websiteIn 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:
2025-09-2513 mindesign-code.tips41 | draw.io: A Free Online Diagramming ToolIn 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
2025-09-2204 mindesign-code.tips40 | Scaling SVGs with CSSIn 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
2025-09-2005 mindesign-code.tips39 | Custom Scrollbar with CSS (WebKit)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)
2025-09-1805 mindesign-code.tips38 | Min-Max Calculator: Generate Responsive CSS clamp() ValuesIn 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 respon...
2025-09-1503 mindesign-code.tips37 | HandBrake: Compressing Video for WebIn 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
2025-09-1305 mindesign-code.tips36 | Downloading Entire WebsitesIn 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
2025-09-1105 mindesign-code.tips35 | Gatsby Markdown Code Highlighting with gatsby-remark-vscodeIn 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
2025-09-1104 mindesign-code.tips34 | iTerm2: macOS Terminal ReplacementIn 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
2025-09-0603 mindesign-code.tips33 | "The Changelog" — A Podcast for DevelopersStay 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
2025-09-0403 mindesign-code.tips32 | How to Speed Up WordPress WebsitesIn 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
2025-09-0116 mindesign-code.tips31 | Customize Google Maps: A Look at Google’s Map Style ToolIn 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
2025-08-3004 mindesign-code.tips30 | How to Change the "Add to Cart" Button Text in WooCommerceWant 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
2025-08-2804 mindesign-code.tips29 | Local: An effortless way to develop WordPress sites locallyIn 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
2025-08-2504 mindesign-code.tips28 | Regex101: Mastering Regular ExpressionsIn 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
2025-08-2303 mindesign-code.tips27 | Accessible Accordion React ComponentIn 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
2025-08-2115 mindesign-code.tips26 | "That's my JAMstack" — A Podcast for DevelopersThat'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
2025-08-1827 mindesign-code.tips25 | Ta11y: Building an Accessible WebIn 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
2025-08-1606 mindesign-code.tips24 | JavaScript Website IntrosIn 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
2025-08-1404 mindesign-code.tips23 | Zoho Mail: Secure Business EmailIn 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
2025-08-1105 mindesign-code.tips22 | Replacing Text with CSSIn 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
2025-08-0904 mindesign-code.tips21 | Cyberduck: Connecting Seamless to Every ServerIn 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
2025-08-0703 mindesign-code.tips20 | WooCommerce: Check if Products in Cart Have a Specific Tag and Remove Them If They Can't Be Shipped--Read the full blog post: WooCommerce: Check if Products in Cart Have a Specific Tag and Remove Them If They Can't Be Shipped
2025-08-0405 mindesign-code.tips19 | Mastering CSS with "The CSS Podcast" – Featuring Una Kravets & Adam ArgyleIn 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
2025-08-0213 mindesign-code.tips18 | Animation Composer: A free plug-in for Adobe After EffectsIn 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
2025-07-3115 mindesign-code.tips17 | Laws of UX: Best Practices for User InterfacesIn 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
2025-07-2805 mindesign-code.tips16 | WooCommerce User Role RedirectsIn 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
2025-07-2603 mindesign-code.tips15 | The Futur — A Podcast for the Business of DesignIn 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
2025-07-2409 mindesign-code.tips14 | Figma: A Modern Collaborative Design ToolIn 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
2025-07-2104 mindesign-code.tips13 | Checklist Design – A collection of the best design practicesIn 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
2025-07-1903 mindesign-code.tips12 | Netlify: Automating Modern Web ProjectsIn 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
2025-07-1720 mindesign-code.tips11 | OBS Studio: Video Recording and StreamingIn 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®
2025-07-1405 mindesign-code.tips10 | WooCommerce Grouped Product ThumbnailsStruggling with missing thumbnails for grouped products in WooCommerce? In this episode, we share a simple fix using a code snippet in your child theme’s functions.php file. Plus, a bonus tip on displaying all variations of variable products—along with a cautionary note! Tune in for quick WooCommerce dev insights.--Read the full blog post: How to Add Thumbnails to WooCommerce's Grouped Products
2025-07-1201 mindesign-code.tips9 | Slugify Online: Clean URL Slug GeneratorWant better SEO and cleaner URLs? In this episode of the Design Code Tips podcast, we break down URL slugs—those key words at the end of a web address that improve discoverability. Based on insights from Nuno Marques, we’ll explore why concise, descriptive slugs matter and how to craft them for better search rankings and user experience.--Read the full blog post: Slugify Online: Clean URL Slug Generator
2025-07-1003 mindesign-code.tips8 | Deferring JavaScript in WordPressWant to improve your WordPress site’s loading speed? In this episode, we explore how deferring JavaScript execution can enhance performance. We break down a PHP function that adds the defer attribute to tags, allowing essential content to load first while delaying non-critical scripts. Plus, we discuss handling jQuery exclusions to avoid conflicts and why this simple tweak can make a big difference. Tune in to learn how to optimize your site for a better user experience!--Read the full blog post: Defer JS on WordPress
2025-07-0703 mindesign-code.tips7 | Revisiting the Iconic 2001 2Advanced Studios ShowreelIn this episode of the Design Code Tips podcast, we take a nostalgic dive into the 2001 2Advanced Studios Showreel, a masterpiece from the early days of web design and animation. Discover how this iconic work set benchmarks in creativity, animation, and storytelling, inspiring designers for over two decades. Whether you’re crafting your own showreel or looking for timeless inspiration, this episode will spark ideas and showcase the power of innovative design from a bygone era. Tune in and get inspired!--Read the full blog post: 2Advanced Studios — Showreel 2001
2025-07-0503 mindesign-code.tips6 | TinyPNG: JPEG, PNG & WebP image compressionIn this episode, we explore the power of TinyPNG, a tool that compresses JPEG, PNG, and WebP images with impressive size reductions of up to 80%—all without compromising quality. Discover how image optimization improves website loading times, enhances user experience, boosts SEO, and reduces bandwidth costs, making it an essential practice for better online performance and visibility. Tune in to learn how smarter image management can transform your web projects!--Read the full blog post: TinyPNG: JPEG, PNG & WebP image compression
2025-07-0306 mindesign-code.tips5 | Adding HTML to Specific WordPress PagesIn this episode, we dive into a practical WordPress tutorial on adding custom HTML content to a single page. Learn how to create a popup message using the wp_footer action hook and conditional logic based on a page ID. We’ll walk you through the full code example, including optional JavaScript for interactivity, and showcase a real-world scenario with age verification on page ID 2647. Tune in to discover how this approach can elevate website customization and enhance user experience!--Read the full blog post: Adding HTML to Specific WordPress Pages
2025-06-3008 mindesign-code.tips4 | Adding Custom Local Pickup Fields in WooCommerceIn this episode, we dive into customizing WooCommerce's local pickup shipping method using PHP and JavaScript. Learn how to add custom fields for pickup location and time, save these preferences as order metadata, and display them in order details and emails. We also explore how to hide the delivery section for local pickup customers, simplifying the checkout experience. Plus, discover how to use AJAX for real-time updates based on user selections. Perfect for enhancing your WooCommerce store’s functionality!--Read the full blog post: Adding Custom Local Pickup Fields in WooCommerce
2025-06-2810 mindesign-code.tips3 | Understanding Semantic HTML: Why It Matters and How to Use ItIn this episode, we break down the essentials of Semantic HTML and why it’s a cornerstone of modern web development. Discover its benefits for accessibility, SEO, code maintainability, and cross-browser compatibility. Learn how to use semantic tags like , , and to structure your content effectively, and explore best practices for creating intuitive, user-friendly web experiences. Tune in and elevate your coding game!--Read the full blog post: Understanding Semantic HTML: Why It Matters and How to Use It
2025-06-2609 mindesign-code.tips2 | Customizing WordPress Admin with CSS & PDF PrintingIn this episode of the design-code.tips podcast, we explore how to customize the WordPress admin panel using CSS. Learn how to create a custom admin.css file, add it to your theme, and apply role-based styling for tailored admin experiences. We’ll share code examples, including a use case for online shops, demonstrating how to hide or style elements and even generate printable PDFs of the WooCommerce "Overview" page. Elevate your WordPress admin experience with these practical tips!--Read the full blog post: Customizing WordPress Admin with CSS & PDF Printing
2025-06-2610 mindesign-code.tips1 | Responsive Web Design: Evolution and FutureIn this episode of the Design Code Tips podcast, we explore the evolution of responsive web design—from fixed layouts to today’s mobile-first approach. Discover the core principles like fluid grids, flexible images, and media queries, and learn why they’re essential for user experience, SEO, and efficient development. We’ll also dive into challenges like performance optimization and innovations like CSS Grid and Flexbox. Plus, get recommendations for must-read books on responsive design, usability, and performance. Tune in and level up your responsive design game!--Read the full blog post: The Evolution of Respons...
2025-06-2612 mindesign-code.tips0 | Podcast TeaserWelcome to design-code.tips — a bite-size podcast where modern web development, thoughtful UI design, and smart AI workflows meet.In each short episode we distill a blog post into clear takeaways you can apply today: faster React patterns, Tailwind tricks, accessibility wins, and time-saving tools.Created by Nuno Marques (a.k.a. ositaka).(Episodes scripted with the help of Notebook LM.)--Go to the blog: design-code.tips
2025-06-2302 min