#web-development

The Evolution of Responsive Design: A Look Back and Forward

Discover the evolution of responsive design—from fixed layouts to mobile-first innovations. Learn how fluid grids, flexible images, and media queries revolutionized web development, enhancing UX and SEO. Dive into a history that set the stage for modern design trends and future innovations.

Customizing WordPress Admin with CSS & PDF Printing

Unlock the full potential of your WordPress backend! This guide shows you how to customize your /wp-admin with a tailored admin.css and style WooCommerce’s analytics page for flawless PDF printing. Perfect for developers looking to streamline and enhance the WordPress admin experience.

Understanding Semantic HTML: Why It Matters and How to Use It

Discover how Semantic HTML transforms web development by boosting accessibility, SEO, and maintainability. Learn best practices, WCAG 2.1 tips, and real-world examples to build future-proof websites.

Adding Custom Local Pickup Fields in WooCommerce

Boost your WooCommerce store’s functionality with custom local pickup fields. This comprehensive guide provides PHP and jQuery code examples to add extra options on your cart and checkout pages—streamlining shipping methods and enhancing your customer’s pickup experience.

Adding HTML to Specific WordPress Pages

Unlock the full potential of your WordPress site with this step-by-step guide on adding custom HTML to specific pages. Learn how to create targeted popups—perfect for age verification, special promotions, and more—to enhance user experience and boost engagement.

How to Change Specific Texts and Strings "by Hand" on WordPress

Unlock a simple, code-based method to manually update specific texts on your WordPress and WooCommerce sites. This step-by-step tutorial shows you how to safely modify titles, labels, and translation strings—without editing core files—for a cleaner, more customizable website.

Remove zeros on WooCommerce (3 ways)

Streamline your WooCommerce store’s pricing display by removing trailing zeros with three simple methods. Learn how to use PHP and JavaScript solutions to enhance your site’s look without compromising backend functionality.

Defer JS on WordPress

Boost your WordPress site’s performance by deferring JavaScript! This guide shows you how a simple PHP tweak adds the defer attribute to your scripts—improving load times, enhancing user experience, and driving better SEO.

How to Add Thumbnails to WooCommerce's Grouped Products

Boost your WooCommerce store’s UX with this step-by-step guide on adding thumbnails to grouped products. Learn how to showcase product images—and even all variable product variations—with a simple code tweak.

Change SRC attribute for mobile images with Vanilla JS

Boost your mobile site’s performance with a simple vanilla JavaScript snippet. Learn how to dynamically update image SRC attributes for responsive design and faster load times.

WooCommerce: Redirect Users by Role to Specific URL After Login

Unlock seamless user management in WooCommerce with this step-by-step guide on redirecting users by role after login. Learn how to use custom PHP code to send subscribers to targeted pages and guide shop managers directly to their admin dashboard for a secure, tailored experience.

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

Discover how to streamline your WooCommerce checkout with this PHP snippet that checks for products tagged “bottle-wine” and automatically removes non-shippable items. This guide helps you enforce shipping restrictions and boost customer satisfaction.

Replace Text with CSS Only

Discover a CSS-only trick to replace text visually using pseudo-elements! This tutorial shows you how to hide default text and insert custom content—ideal for quick web design tweaks (with accessibility caveats).

How to Add an Intro to a Website with JS

Add a dynamic website intro with JavaScript. This tutorial demonstrates how to trigger an engaging animation only once per session using sessionStorage, ensuring a smooth user experience.

Simple Accessible Accordion React Component

Discover how to build a simple, accessible accordion component in React that enhances web usability. This guide covers ARIA compliance, keyboard navigation, and screen reader support—essential techniques for inclusive web development.

Change Default "Add to Cart" Button Text to "Pre-order Now" in WooCommerce

Boost your WooCommerce store’s conversion rates with a simple code tweak. This step-by-step guide shows you how to swap the default “Add to Cart” button for a “Pre-order Now” call-to-action on selected products, enhancing user experience and driving more sales.

How to Speed Up WordPress Websites

Boost your WordPress site speed with this comprehensive video guide. Discover essential strategies—efficient hosting, effective caching, image optimization, and CDN integration—to enhance performance and deliver a smoother user experience.

My Choice for Gatsby Markdown Code Highlighting and Why

Unlock the power of flawless code display with gatsby-remark-vscode! Discover how leveraging VS Code’s extensions and build-time rendering delivers superior Markdown syntax highlighting in Gatsby—no client-side JavaScript needed for fast, eye-catching code blocks.

How to Download an Entire Website

Download entire websites effortlessly on MacOS/Linux and Windows with this step-by-step guide. Learn how to use wget and HTTrack for efficient offline archiving, backups, and website mirroring.

Custom Scrollbar with CSS (WebKit)

Elevate your website’s design with this custom scrollbar tutorial. Learn how to style scrollable elements using CSS for WebKit browsers, boosting both aesthetics and user experience.

Code Examples of the Media Creators (NodeJS) website

Explore innovative NodeJS code examples from the Media Creators website to optimize images, videos, and animations for varying connection speeds—boosting performance and enhancing user experience.

How to Make a Themeable SVG Favicon

Boost your website’s style and performance with this step-by-step guide to creating a themeable SVG favicon. Learn how to design a responsive, scalable favicon that adapts seamlessly to both dark and light modes using CSS media queries and HTML integration. Perfect for web developers looking to enhance UI design and user experience.

Should You Open-Source Your Starter Template? A Balanced Look at the Pros and Cons

Unlock the secrets to open-sourcing your starter template! In this post, explore how sharing your Next.js and Decap CMS project can boost your visibility, career opportunities, and community engagement while weighing challenges like maintenance and copying risks.

Tailwind CSS: Targeting Mouse Devices Only with `mouse-only:`

Unlock smoother hover interactions with Tailwind CSS by targeting mouse devices exclusively. Learn to build a custom “mouse-only” variant that optimizes desktop hover effects while preserving a seamless experience for touch users.

The Ultimate Guide to BEM: From Basics to Advanced Techniques

Unlock the power of BEM (Block, Element, Modifier) with this ultimate guide. Dive into scalable, maintainable CSS techniques—from foundational concepts to advanced strategies—to elevate your web development and UI/UX design.

Leveraging ArrayBuffer to Convert Images to Base64 for Email Notifications

Optimize your email notifications with this guide on converting images to Base64 using ArrayBuffer. Discover efficient Node.js techniques, dynamic MIME type handling, and robust error management to seamlessly embed inline images in your emails.

Discovering the Most Unknown Semantic HTML Tags: Hidden Gems for Better Accessibility and SEO

Unlock the hidden potential of semantic HTML with this guide on 10 underused tags that boost accessibility and SEO. Discover how gems like <main>, <mark>, and <time> can transform your website’s structure, enhancing content clarity for users and search engines alike. Elevate your code and optimize your site with these essential yet overlooked HTML elements.

A Guide to Accessibility Best Practices: No ARIA is Better Than Bad ARIA

Unlock superior web accessibility with this guide on ARIA best practices. Discover why “No ARIA is better than bad ARIA” and learn practical tips for using native HTML to create inclusive, user-friendly web experiences.

Translating a Custom Design System to Tailwind CSS

Transform your custom design system into a streamlined Tailwind CSS setup with this in-depth guide. Discover how to configure custom breakpoints, color palettes, typography, and shadows—with practical code snippets and a video walkthrough—to enhance responsive design and boost your front-end workflow.

Mastering OpenAI API in 2025: Use Cases, Pricing, and Practical Node.js Examples

Master the OpenAI API in 2025 with this comprehensive guide. Uncover detailed pricing insights, real-life use cases, and practical Node.js examples to build cost-efficient, scalable AI solutions.

Mastering TypeScript’s `Extract<>`: Selective Type Extraction for Better Code

Unlock the power of TypeScript’s Extract<> utility to streamline your code. Discover how selective type extraction enhances reusability, reduces redundancy, and improves maintainability with practical examples and best practices.

Strapi: The Ultimate Self-Hosted Headless CMS for Developers and Businesses

Discover Strapi – the open-source, self-hosted headless CMS that empowers developers and businesses with full control, flexible APIs, and robust security. Learn how to deploy, customize, and outperform competitors for a seamless digital experience.

Moving from VS Code & WebStorm to NeoVim: A Fullstack Developer’s Guide

Switch from VS Code & WebStorm to NeoVim with this comprehensive guide for fullstack developers. Discover step-by-step setup tips, essential plugins, and performance hacks that boost efficiency, streamline your workflow, and offer unparalleled customization.

Mastering TypeScript Decorators: A Beginner-to-Advanced Guide

Unlock the power of TypeScript decorators with our beginner-to-advanced guide. Discover practical techniques, Angular integration, and advanced metaprogramming tips to supercharge your web development skills.

Automating Daily Supabase Database Backups with Node.js

Automate your daily Supabase backups with Node.js in this step-by-step guide. Learn how to export tables to CSV, organize backups by date, and secure your data with best practices. Perfect for boosting backend productivity and ensuring reliable disaster recovery—even for complex apps like Bokkah.com.

Understanding the HTML `<template>` Tag: A Guide for Developers

Unlock the full potential of the HTML <template> tag with this comprehensive guide for developers. Learn how to build reusable, dynamic content with JavaScript, enhance performance, and implement best practices for modern web development.

Why Local Storage is Vulnerable to XSS Attacks (And a Safer Alternative)

Discover why relying on Local Storage can expose your web app to dangerous XSS attacks. This in-depth guide explains how sensitive data is at risk and shows why switching to HttpOnly Secure Cookies offers a far safer alternative for managing authentication tokens and user data.

How to Secure Your Node.js API with JWT and Cookies

Discover how to secure your Node.js API using JWT and HttpOnly cookies in this comprehensive guide. Learn best practices for stateless authentication, secure cookie implementation, and robust data protection to safeguard user data and prevent unauthorized access.

Preventing XSS: Best Practices for Frontend Developers

Secure your web applications with our comprehensive guide to preventing XSS attacks. Discover essential best practices for sanitizing inputs, escaping outputs, and implementing CSP—all tailored for frontend developers to enhance web security.

What is a MITM Attack? (With Real-World Examples and Solutions)

Learn what a Man-in-the-Middle (MITM) attack is, explore real-world examples of famous cyberattacks, and discover effective solutions to prevent data interception, phishing, and network hijacking.

Implementing Content Moderation in Node.js with `bad-words`

Learn how to implement content moderation in a Node.js app using the bad-words package. Filter offensive words, handle nested fields, and improve user safety with this easy-to-follow guide. Perfect for web developers and API security!

What is Make? – Promotional video 2022

The promotional video for Make.com, highlighting its capabilities to automate workflows and integrate apps seamlessly.

10web — A Podcast for Developers

10web is a 🇵🇹 Portuguese podcast which invites developers and people in tech to talk about the modern web, marketing, SEO and about the business of web development in Portugal.

The Boagworld UX Show

The Boagworld Show was the first web design podcast and ran from 2005 to 2021. It interviewed the leading minds in the field and was instrumental in setting the direction of the modern web.

Full Stack Radio — A Podcast for Developers

A podcast for developers interested in building great software products. Hosted by Adam Wathan.

GraphQL.FM — A Podcast for Developers

GraphQL.FM is a weekly show on all things GraphQL. Every week Marc-Andre Giroux ([GitHub]) and Tony Ghita (Twitch.tv) chat with a GraphQL expert. The show is live-streamed on Twitch every Tuesday at 12PM PST!

Javascript Jabber — A Podcast for Developers

Weekly panel discussion about Javascript on the front and back ends. This show is primarily focused on the web ecosystem, but also covers NodeJS, mobile, and language features.

JS Party — A podcast for Developers

JS Party, a weekly celebration of JavaScript and the web

MongoDB — A Podcast for Developers

Podcast about news and data, software development and anything related to noSQL and MongoDB.

Mudo — A Podcast for Creatives

Mudo is a Portuguese podcast where you can find talks and interviews from creatives in Portugal and around the World. You can find out more info about their creative or business process, get to know their experiences and even collect a few tips to apply on your work and creative process.

Open Source Underdogs — A Podcast for Developers

Open Source Underdogs is the podcast for entrepreneurs about open source software. In each episode, the hosts chat with a founder or leader to explore how they are building thriving businesses around open source software.

PodRocket — A web development podcast from LogRocket

Every week, PodRocket gets you up to speed on everything happening in frontend web development through in-depth interviews with experienced engineers. PodRocket discuss the best, worst, and newest aspects of all your favorite libraries and frameworks. PodRocket also give you a fresh look at the most pressing tech industry issues through the eyes of your peers.

The Stack Overflow — A Podcast for Developers

The Stack Overflow podcast is a frank and funny conversation about what it means to work in software and how code is reshaping our world. As it celebrates its 12th anniversary, it’s a must listen for any programmer, as necessary as Stack Overflow itself.

Syntax — A Podcast for Web Developers

A Tasty Treats Podcast for Web Developers.

That's my JAMstack — A Podcast for Developers

That's My JAMstack is a podcast looking at the people that make the JAMstack community an amazing place to work and play. Started in 2019 by Bryan Robinson with the philosophy of bite-sized interviews highlighting these amazing developers, designers and technologists.

The Changelog — A Podcast for Developers

Conversations with the hackers, leaders, and innovators of the software world

The CSS Podcast — For Web Developers

A podcast to breakdown complex aspects of CSS into digestible episodes, covering everything from accessibility to z-index.

Laws of UX – A collection of best practices that designers can consider when building user interfaces

Aspect Ratio Calculator: A Must-Have Tool for Designers and Developers

Customize Google Maps: A Look at Google’s Map Style Tool

Docusaurus: The Ultimate Tool for Documentation Websites

MetaTags.io – The Ultimate Tool for Optimizing Meta Tags

Min-Max Calculator: Generate Responsive CSS clamp() Values

PerfectPixel by WellDoneCode: Your Pixel-Perfect Companion

The internet's source for images, pictures, and others. Powered by creators everywhere.