A Free Random Color Generator I Built for Designers and Developers
Colors are one of those things that seem simple until you need one. "Just pick a nice blue" sounds easy, and then you spend forty minutes cycling th…
Open Source
⚑ Сообщить о проблемеПоследние новости Open Source от Tech News
Все темы
AI
agents
ai
api
architecture
automation
backend
beginners
career
database
devchallenge
devops
discuss
javascript
linux
llm
machinelearning
mcp
opensource
performance
productivity
programming
python
react
security
showdev
testing
tutorial
typescript
webdev
Dark Mode in Firefox: NightOwl vs Dark Reader, OS Integration, about:config, and Scheduling
Dark mode has gone from a niche preference to an expected feature. Firefox users have several options for enabling dark mode — from the OS-level set…
Customizing Firefox's New Tab Page: From Simple to Full Control
Firefox's new tab page has changed over the years. Here's what you can configure natively, and what extensions exist for more control. Firefox Home…
Width is not the viewport, and 800x600 is not a desktop
Development covered 29 Aug 2026 to 2 Sep 2026 (commit dates). Myriad Immortal Sect runs in a browser, and browsers are not one shape. It runs full s…
Understanding Aspect Ratios in CSS and Canvas: Formulas, Responsive Rules, and Image Cropping
When building responsive image galleries, hero sections, or interactive media canvases, aspect ratio mismatches are among the common causes of Cumul…
Stop exporting JSON tokens and use CSS variables instead
A designer tagged me in a Figma comment on Tuesday morning. They wanted to know if we could start exporting our brand tokens as deeply nested JSON f…
How to Improve Blogger Website Performance with Practical HTML and CSS Optimizations
How to Improve Blogger Website Performance with Practical HTML and CSS Optimizations A Blogger website can look beautiful and still perform poorly o…
Let the designer's spec be the test: a bounded UI change request for game UI
"The quest reward toast feels cramped and is hard to read on phones." That's a fair complaint, and a hard thing to hand to an engineer. "Cramped" an…
How we took CLS to 0.000 on a hand-built static site (no framework, no CDN)
Our production site is deliberately boring technology: hand-written HTML, one compiled CSS file per page, no framework, no build step, no CDN, share…
From BEM to BE.M — A CSS Naming Convention Built for Component Libraries
Originally published on LinkedIn . I'm gradually migrating my LinkedIn articles over to DEV — this is the first one. BEM was designed for page-level…
The iPhone Duo Web Checklist: 9 Things to Verify Before October 23
In September, a post titled "Dear God websites look horrible on iPhone Duo" climbed to the top of r/webdev. Two screenshots and one complaint: with…
Why HTML, CSS, and JavaScript Aren’t Dead Yet (Even with AI Writing Code)
If you spend any time on tech Twitter, LinkedIn, or YouTube lately, you’ve probably seen someone posting a 10-second video of an AI generating a ful…
CSS Flexbox
What Is CSS Flexbox? Flexbox stands for Flexible Box Layout . It is used to arrange elements in a row or column and control their alignment and spac…
Respect reduced motion (Web HIG tip #9)
A slide-in panel looks smooth to most people. For someone with a vestibular disorder, it can bring on dizziness or nausea. Their OS already has a "R…
5 Framer Motion patterns I used building 5 React templates (with code)
Over the last few weeks I built five website templates in React 18, Vite 5 and Framer Motion 11 — fashion, restaurant, SaaS, agency and wedding. No…
CSS Anchor Positioning в картинках
Большой визуальный гайд по CSS Anchor Positioning: от базовой привязки элементов до создания прочных соединителей и цепочек якорей. Читать далее
A Checkerboard Is Not Transparency: A Practical Alpha Test for Video
You export a “background-free” video, put it on a web page, and see a black rectangle. Is the file broken? Perhaps. But the player might be ignoring…
Theming a Drop-In UI Kit Without Forcing a Fork
Theming a Drop-In UI Kit Without Forcing a Fork Every prebuilt UI component library eventually meets a design system it was not built for. At that p…
Fluid Typography with CSS clamp(): Scale Text Smoothly Without Media Queries
Instead of setting a font size and overriding it at several breakpoints, you can let text scale smoothly with the viewport. CSS clamp() makes this a…
Application CSS must not use transition: all (Web HIG tip #6)
transition: all looks convenient until a new property starts animating and the UI jumps in ways you never meant. Web HIG tip #6 (Quick #85, HIG-MOT-…
Introducing overlapui.css — drop-in overlap stacks for any stack
You want stacked avatars, a peeking card pile, or a “+” that fans into actions — and you don’t want a JS component library or an FSCSS build step ju…
Your webhook handler was slow, so Shopify sent it again
The server reboots at two on a Saturday morning for a security update, which is what it's supposed to do. The app doesn't come back, because nobody…
How I turn any handful of colours into a readable theme
Open the theme picker, choose Flatland from the base16 list, and the cards on the page lose their edges. Text and links are fine, but every border a…
I removed my Chinese web font. Every page lost 1 MB
First published on yappatyih.com . TL;DR A system font stack is a list of fonts that are already installed on the reader's device, given to the brow…
The Case of the Missing `rem`: A Sherlock Holmes Guide to CSS Units in JavaScript
Being the record of an investigation into CSS units, JavaScript geometry, and a very small missing value — as written by Dr. Watson. A Matter of No…
We audited every new page at 320px, and the console snippet that should have run first
CogniPrep has been shipping a long content release: 28 assessment providers' worth of practice tests, 26 tests in the final wave alone, and the publ…
FSCSS Shorthands: the full reference (1.2.5+)
FSCSS 1.2.5 adds property shorthands : compile-time rewrites that turn short property names into standard longhand CSS before the stylesheet ever re…
Our globals.css beat 514 Tailwind utilities, and CSS cascade layers were the whole story
CogniPrep is a Tailwind v4 app with a 719 line hand-written app/globals.css on top. That file contains 17 !important declarations, and most of them…
Entry Animations with CSS @starting-style
Entry animations can be tricky—between handling DOM load times and animating from display: none , it's easy to get stuck. The @starting-style rule s…
What I learned building a Twitch chat overlay
Getting messages onto the screen is the easy part: one WebSocket and about forty lines of parsing. The work starts after that. Emoji shift the posit…