Последние новости

How We Should Handle Typography Handoffs Without Losing Our Minds

Ever spent hours meticulously setting up fluid typography scales in a design file, only to watch a build get pushed with random pixel values hardcod…

The value of know-how in the age of AI

Recently, I struggled with a bug in one of my programs that did not work as expected. The issue made me feel frustrated because I had done everythin…

A hash-based CSP has no room for a syntax highlighter

The Content Security Policy on this site allows scripts by SHA-256 hash. Not unsafe-inline , not a nonce, not a wildcard. A list of exact digests, a…

Your Grid Has Invisible Columns: auto-fill vs auto-fit

You wire up a card grid with the one-liner everyone reaches for: .cards { display : grid ; grid-template-columns : repeat ( auto-fill , minmax ( 240…

CSS задачи на 200 IQ

У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтоб…

Building Better Property Platforms: 5 UX Details That Matter

Property platforms often serve two very different types of users. One person wants to find a home. Another wants to publish a property and find the…

Durante meus estudos em ADS, comecei a aprender HTML, CSS e Python. Tenho maior interesse por HTML e CSS, principalmente pela criação de sites e interfaces. Meu principal desafio foi entender como HTML e CSS trabalham juntos e desenvolver a lógica de pro

[Перевод] Как связать дизайн-токены Figma с кодом — Часть 1

Дизайн-токены — источник истины для визуальных свойств вашей дизайн-системы: цвета, типографика, отступы и так далее. Вместо того чтобы задавать осн…

Three small design decisions in a "toggle effects via CSS class" library, and the tradeoffs behind them

Three small design decisions in a "toggle effects via CSS class" library, and the tradeoffs behind them I built halloween.js, a small library that a…

How Does the Browser Turn Code Into Pixels?

When you build a website, you write code like this: <h1> Welcome </h1> <p> This is my website. </p> <button> Get Start…

Beyond CSS-in-JS: From Element Styles To Component Themes

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluenti…

I audited 99 resume templates for contrast. Nine rendered the candidate's name invisible.

I run a resume builder with 99 templates. A user said the designs looked "basic", so I wrote a script to measure them instead of arguing about taste…

К сожалению, вы упускаете пользу этих CSS псевдо-классов и псевдо-элементов

Привет, Хабр! В CSS огромное количество псевдо-элементов и псевдо-классов. Так много, что я не знаю ни одного фронтендера, который помнит все. Я тож…

3 Free CSS Generators That'll Save You From Fighting box-shadow, gradient, and border-radius Syntax

If you've ever spent 20 minutes nudging box-shadow offsets, or hand-writing a linear-gradient() only to get the angle wrong three times in a row, yo…

comiCSS #255: Yellow

comiCSS is a side project I've been running for a while. I code (yes, code) comics about HTML and CSS in HTML and CSS. Every week, I publish a new c…

How to build an FSCSS module like st-core.fscss

To build an FSCSS module like st-core.fscss , create a stylesheet of reusable @define mixins, expose a small public API, and compile/test it with th…

I Used React DataGrid to Build a Real Space Mission Explorer

I went through the documentation and feature list of React DataGrid, and I wrote React DataGrid: A Free, Open-Source React Data Grid with an Enterpr…

The CSS bug that taught me JS-injected styles always win

I spent way longer than I'd like to admit chasing a dark mode bug that made zero sense on paper. I'm building WidgetForge, a drop-in AI chat widget…

Building Fluentic Style: Rethinking How Outside Styles Reach Inside Components

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluenti…

A CSS Hover-Reveal Pattern for Technical Specs

The problem on the Gate Seal page The Gate Seal product page for a maritime client needed to present detailed specifications without turning the lay…

7 Practical Responsive Design Tips for Better Mobile Experiences

Responsive design is no longer just about making a desktop website fit on a smaller screen. Modern users expect websites to feel natural on smartpho…

Why Browser Games That Look Offline Still Need an Internet Connection

Some browser games feel almost offline. They start quickly, use simple controls, and may continue running even when the network becomes unstable for…

How I Built a Color Picker That Actually Converts Colors Correctly (HEX/RGB/HSL)

While working on a design system recently, I kept running into the same frustrating problem: I'd grab a color from Figma in HEX format, need it in H…

HTML, CSS and Bootstrap Interview Questions

HTML Interview Questions 1. What is HTML? HTML stands for HyperText Markup Language. It is used to create the structure of a webpage. We use HTML to…

The CSS Problem Nobody Thinks Is Solvable

James Coombs is a design engineer who migrated a large frontend from Material UI to a custom design system (Radix, Tailwind). Four CSS systems had t…

How to Minify JavaScript, CSS, and JSON (Free, No Build Step)

Minification is one of those things everyone knows they should do before shipping to production, but reaching for a full build pipeline just to shri…

The Card That Leaned

This was my first project — a small QR code card, built from a Frontend Mentor challenge. Nothing complicated: a white card centered on a colored ba…

CSS-in-JS Arena Bamboo, StyleX and Panda on Pixel-Identical Apps

A little context, I've been working on Contra for the last 6 years. It's a marketplace-network – an application that's comparable to the likes of Li…

Hearth & Bowl — Dinner, the Way Home Does It 🍲

Hearth & Bowl — Dinner, the Way Home Does It 🍲 frontendchallenge # devchallenge # css # javascript # webdev # accessibility This is a submission…

Мои любимые CSS-трюки для фронтендеров, которые не используют Tailwind

Привет, Хабр! Сегодня фронтендеры любят подход атомарных классов, в частности Tailwind. Я не имею ничего против этого подхода. Каждый волен выбирать…