Gravy Boat — a landing page with a CSS poutine you can drown in!
This is a submission for Frontend Challenge: Comfort Food Edition , Perfect Landing: Comfort Food What I Built Gravy Boat — a landing page for a ficti…
Testing & QA
⚑ Report a ProblemLatest Testing & QA news from Tech News
All topics
agents
ai
api
architecture
automation
aws
backend
beginners
career
claude
cybersecurity
database
devchallenge
devops
javascript
llm
machinelearning
mcp
opensource
performance
productivity
programming
python
security
showdev
softwareengineering
testing
tutorial
typescript
webdev
Responsive Design With Bootstrap 5: Tips That Actually Make a Difference
Bootstrap 5's responsive system is more capable than most developers use. Everyone knows col-md-6 . Fewer people know the patterns that make the diffe…
Building Fluentic: I Didn’t Want a Tailwind Preset. Then I Added Two.
TL;DR: Fluentic Style is a new JSX styling library for React, Preact, Solid, and compatible JSX runtimes. It starts with typed style objects and a css…
String Bean Casserole — CSS Art + Photos
Project Files Below are the three files for a FrontEnd Challenge — Comfort Food Edition submission: index.html , style.css , and script.js . The page …
How to Control Page Breaks in HTML to PDF Output
You render an invoice that looks right in the browser, open the PDF and find line item 14 cut in half by a page boundary. The description sits at the …
Tailwind CSS v4: Architecture, Features, and Performance Upgrades Deep Dive
Originally published on tamiz.pro . Tailwind CSS v4 marks a pivotal evolution in how utility-first CSS is generated and managed. Moving beyond a simpl…
A Button Showcase with One-Click HTML Copy
When building a website, choosing a button design can take more time than expected. You may want something simple, soft, colorful, dark, outlined, or …
Tailwind CSS v4: Architecture, Features, and Performance Upgrades Deep Dive
Originally published on tamiz.pro . Tailwind CSS has fundamentally changed how many developers approach styling web applications. With the impending r…
A Full 3D Live Weather World in One HTML File — No Frameworks, No Build Step.
Live Engine: https://bruvic62.github.io/weather-diorama/ The Source Code: https://github.com/bruvic62/weather-diorama I deliberately stayed inside ver…
Your dropdown is a div. The browser has a native popover now.
You've written some version of this before: function toggleMenu () { setOpen ( prev => ! prev ); } useEffect (() => { const handler = ( e ) =>…
Tailwind CSS v4: What Actually Changed and How I Migrated Two Projects
Headline: Tailwind v4 is the most significant rewrite since the framework launched — CSS-first config, Lightning CSS under the hood, container queries…
I've maintained Linaria for six years. Here's why I built something new
Runtime CSS-in-JS is winding down. styled-components has been in maintenance mode since early 2025, Server Components made the runtime model a structu…
backdrop-filter: blur() — как он работает и как его правильно использовать
Cвойство backdrop-filter: blur() под капотом работает совсем не так, как интуитивно кажется, и это приводит к багам, которые нелегко воспроизвести и д…
Just One More Block
Ever opened a game thinking, " I'll play for just a minute " ? Yeah, that's how this started too. I recently built Just One More Block, a small browse…
A Developer Guide to Viewport Sizes for Screenshots
const viewports = [ { width : 1920 , height : 1080 }, // desktop full HD { width : 1366 , height : 768 }, // most common laptop { width : 375 , height…
Building Sleek Korean Web Pages Using ONLY System Fonts (No Web Fonts!)
Unlike English web fonts, Korean web fonts are notoriously heavy because they need to contain anywhere from 2,350 to 11,172 characters. Even with aggr…
Writing unit test for Firefox private browsing window
Our indicator looks like this: an icon + a label. The browser has an indicator for when a user is in private mode. The indicator lives in two places u…
Bringing React Native Style Composition to React
Fluentic is my attempt to make React styling feel explicit, composable, and predictable again. Years ago, I worked on web apps with Emotion, and I lov…
When (and when not) to inline images as Base64
Base64 image data URIs are one of those web techniques that look like a magic shortcut the first time you use them. Instead of referencing an external…
One line of CSS that breaks keyboard accessibility sitewide and two other patterns we keep finding in audits
Last week we ran accessibility audits across multiple sites. Different industries, different tech stacks, different teams. The same three problems kep…
My landing page passed every CI check and was still broken on my customer's phone
A customer texted me a screenshot last month. It was my own landing page, open on their Pixel. The headline — "Financial infrastructure to grow your r…
A Practical CSS Variable Setup for Light/Dark Mode Without Theme Flash
Dark mode is easy to start. It is harder to ship cleanly. Most implementations need to handle: light mode dark mode system preference stored user pref…
[Перевод] Набор инструментов для разработчика: готовим сайт к эпохе AI-агентов
Искусственный интеллект стремительно эволюционирует: от простого генерирования текста нейросети переходят к полноценному веб-серфингу, активному взаим…
Container Queries vs Media Queries: When to Use Which
I’ve been thinking about this lately: media queries handle page-level layout changes fine, but they fall apart when the same component needs to behave…
A practical CSS variable setup for light/dark mode without theme flash
Dark mode is easy to start. It is harder to ship cleanly. Most implementations need to handle: light mode dark mode system preference stored user pref…
Flexible density for all the UI
In our UI system we dont use pixel values to define spacing, we use semantic variables, (t-shirt sizes: gap-sm , p-lg , my-2xl ) - so thats like you c…
Exit intent that works on mobile, not just desktop
Originally published on my site, arafatcro.dev/guides . You copy the exit-intent snippet, it fires nicely when the cursor heads for the close button, …
You finish the UI, run Lighthouse, and suddenly six color pairs fail WCAG AA
Accessibility audits usually happen late. A tool runs on the deployed site, flags a dozen low-contrast text/background combinations, and now you're ba…
Get Punished For Pressing Space at the Wrong Time
A few days ago I played Google's Red Light, Green Light game and immediately had the dangerous thought every developer eventually has: How hard can it…
Building a Dark Mode System in Next.js App Router — Without Layout Flash
Dark mode sounds simple until you implement it. Then you discover the flash. On first load, before JavaScript runs, your page renders with the default…