CSS *

Одна из проблем для медицинских сайтов заключается в том, что описания процедур и состав препаратов затруднительно размещать на странице сайта, которая посвящена услуге. Особенно на лендинге, где довольно строгая структура, а тексты предельно лаконичны. Но таков закон. Комплаенс требуется для подтверждения легитимности самой клиники и методик, которые она использует.

Если помещать блок комплаенса в видимую часть страницы, то это неминуемо приведет к “отказам” - быстрому уходу посетителя с сайта без прохода вглубь. Всё-таки люди приходят на сайт не для того, чтобы выяснить номер лицензии и насладиться чтением закона. Им чаще всего нужна именно услуга: название, что лечим, цена врач, отзывы. Поэтому заказчики сайтов и лендингов часто соглашаются на компромиссное решение, которое предлагают им разработчики: размещать блок комплаенса в футере либо над футером, причем в формате PDF. Это приводит к тому, что ИИ-краулеры просто не видят блок комплаенса либо присваивают ему низкий приоритет для вывода в рекомендациях. Соответственно, в ответ ИИ не попадает та часть сайта, которая должна подтверждать опыт, легальный статус клиники и безопасность процедуры.

Но, как мне кажется, эту проблему несложно решить чисто технически: добавив в дизайн-макет javascript с кнопкой-баннером, которая при клике на ней открывает дополнительный блок комлаенса, закрытый до нажатия кнопки. Этот блок отлично видим и краулеру дата-центров ИИ, и инструментам мониторинга, который применяют регуляторы (Росздравнадзор, ФАС). Такой блок можно разместить в любой части лендинга или главной страницы сайта, даже в самом верху, в виде обычного HTML. В этом случае ему будет присвоен высокий приоритет. К тому же в верхнем блоке можно разместить и разметку медицинского учреждения с адресом, картой, лицензией и каталогом услуг (Shema.org, json).

В статье описывается, как с помощью возможностей ИИ был модернизирован JavaScript-проект для моделирования физических экспериментов. В созданной программе представлены эксперименты из разделов: механика, механические колебания, гидростатика. При разработке данного проекта использовался только Vanilla JS, без сторонних библиотек.

Это продолжение истории про «Универсальный скачиватель», программу для Windows, которая качает видео и музыку через yt-dlp. В прошлый раз я рассказывал, как упаковывал консольную утилиту так, чтобы ей мог пользоваться любой человек. Сегодня про версию 1.4, а в ней почти нет нового функционала: я переделал внешний вид. Если кратко, то движок остался тем же (Flask на 127.0.0.1, страница в браузере, один файл index.html), а в Python поменялась одна строка с номером версии. Всё остальное — разметка, стили и немного скрипта.

Привет, Хабр!

Я помню время, когда фронтендеры активно делились своими велосипедами. Буквально каждый день я встречал статьи, где автор рассказывает, какую классную штуку он придумал.

Я, конечно, не такой умный. Ничего нового я не придумал, но мне хочется показать вам мой набор базовых стилей, которые я использую для всех проектов. В нём есть старые фишки, есть малоизвестные, а есть и новые.

Давайте посмотрим, что я вам подготовил.

Вступление:

Привет, Хабр! Я всегда любил физику и ретро-эстетику. Однажды мне захотелось сделать научно-популярный проект, который не просто показывает текст с формулами, а позволяет «покрутить» физику руками. Так появился ЦУП-7 — интерактивный пульт с рендерингом черной дыры на WebGL и пятью квантовыми экспериментами. В этой статье я расскажу, как устроен проект под капотом, с какими проблемами я столкнулся и почему решил отказаться от фреймворков.

Проект Android DEX позволяет запускать приложения с Android прямо на ПК. Например, можно открывать мобильные приложения в отдельных окнах, играть в шутеры с помощью мыши и клавиатуры и управлять смартфоном с большого монитора. Решение работает на ПК с Windows, macOS и Linux, а подключение осуществляется по USB или Wi‑Fi.

Мини проект климат контроля температуры, влажности. 

Проект представляет собой автономный модуль климат‑контроля на ESP32‑C3, который считывает данные с AHT10 по I2C и передает их в браузер через WebSocket, работая как собственная точка доступа. Программный код позволяет регулировать по заданным параметрам  как на повышение, так и на понижение (в зависимости от подключаемого оборудования для температуры нагрев или охлаждение, для влажности увлажнение или осушение).

Я делал дизайн одностраничного сайта для новой марки куриных яиц. Страница длинная, больше одиннадцати тысяч пикселей на десктопе, с прелоадером, закреплёнными сценами и анимацией между блоками. Макет я сдавал в двух ширинах, 1600 и 390. Вёрстку и разработку вела другая команда, моя часть это дизайн и передача макета.

Слоёв в передаче пять. Цвет, вариативный шрифт, сетка, прелоадер и карточка упаковки. По каждому покажу, что лежало в Figma и как я бы выгрузил это разработчику сейчас, токенами и короткими спецификациями. Код в статье мой, это пример формата передачи, а не вёрстка сайта.

Привет, Хабр!

Мне кажется, что каждый фронтендер множество раз сталкивался с ситуацией, когда CSS переставал работать так, как ожидаешь. Причём не имеет значения опыт разработчика. С одинаковой вероятностью в тупик может попасть как джун, так и опытный разработчик. Не зря же CSS стал героем такого количества мемов.

Я и сам не раз попадал в подобные ситуации. Но, несмотря на все эти сюрпризы, CSS мне по-прежнему нравится. Конечно, изменить стандарты я не могу. Зато могу рассказать о ловушках, в которые когда-то я попался. Возможно, некоторые из них окажутся неожиданными и для вас.

Давайте посмотрим, что я подготовил.

Я проектировал каталог и калькулятор сметы для сайта компании, которая строит загородные дома. Моя часть была в проектировании и дизайне, вёрстку и бэкенд делала другая команда. Сайт запущен и работает. Недавно я снял с него разметку, CSS и клиентский скрипт и положил рядом с макетами, чтобы проверить, как решения дошли до кода.

Расскажу, как я раскладывал смету на данные, как она устроена в продакшене, какие граничные случаи я оставил без правила и какую спецификацию я передал бы сейчас. Почти все ошибки ниже начинаются в макете, а не у разработчика.

Я проектирую интерфейс сервиса, который разбирает записи звонков отдела продаж. Запись распознаётся, делится на реплики клиента и менеджера, проверяется по чек-листу, а результат уходит в CRM и на экраны руководителя. Модели и интеграции ведёт команда продукта, моя часть это проектирование и дизайн.

Здесь не будет про модели. Будет про то, как длинный неструктурированный результат обработки звонка превращается в экраны, которые читаются за минуту, и что происходит с дизайн-системой, когда её выгружают из Figma в CSS-переменные. Числа из макетов сняты через Plugin API, код токенов взят из выгрузки, данные на скриншотах демонстрационные или обезличенные.

У каждого HTML-элемента есть всего два псевдоэлемента: before и after — и с помощью них можно сделать крутые элементы.

Разберём, как с помощью обычного CSS превратить два псевдоэлемента в крутые графические штуки. Как создавать сложные формы через clip-path, собирать композиции из нескольких градиентов, работать с масками и режимами смешивания, а также строить анимации и элементы интерфейса без лишней HTML-разметки.

Делюсь опытом вайбкодинга Работа в Antigravity, Open Code, Windsurf

Сразу небольшая ремарка - Всем ребятам которые когда-либо создавали сайт или приложение с помощью ИИ или агента, хочу сказать что опыт у всех разный , разные модели, взаимодействие, а также склад ума, мышления, понимая конечной цели и желаний, также различен, поэтому прошу не судить строго :)

Моё знакомство с искусственным интеллектом началось примерно в 2022 году, во время пандемии, когда много предприятий закрывалось и было скучно, особо не куда не выйдешь погулять или на природу, появился ChatGPT , я кинулся регаться в OpenAi , используя сервис виртуальных номеров той страны , какой включаешь ВПН, это получилось у меня только на 3 Гугл аккаунте Первые вопросы которые я ему задавал были простыми, но его ответы уже на тот момент мне казались пугающими. Тогда ещё можно было настроить прямо в чате температуру, где больше это значило модель может лгать, меньше или 0 модель всегда отвечала как есть.

В то время мне был очень интересен язык программирования javascript , и я кинулся его изучать, прошёл один бесплатный курс на стёпике и один платный, небольшой, на одной из известных площадок, по видео с Ютуба попробовал сделать мини-апп, но до конца это у меня не вышло, потому что замах был слишком большим, тогда я ещё не понимал что мини-апп этот - целая CRM, работающая на Sanity а не просто приложение. Всё что у меня получилось это 4 работающих страницы и возможность через crm добавлять блоки контента, понимая что наполнять их в одиночку, у меня не будет ни сил не времени, а также не было материальной мотивации, я это дело забросил на три года. У меня родился старший сын, были обычные бытовые заботы, в это время я мало следил за развитием ИИ , так как на тот момент мне казалось что нужно всё таки нужно больше гуглить, серфить stackoverflow, а хотелось максимум автоматизации из-за чувства что не хочу проводить свою жизнь за компьютером.

Представлен открытый проект под названием OpenWin (веб-сайт). Это бесплатная альтернатива Ninite, которая преобразует выбранные приложения для Windows в единую команду для менеджера пакетов winget. Никаких учетных записей, никакого отслеживания, никакой автоматической установки для проекта не требуется. Исходный код решения опубликован на GitHub под лицензией MIT.

Делал интерактивную открытку на день рождения и хотел, чтобы картинка не просто появлялась, а «рисовалась»: сначала карандашные линии, потом по касанию её заливает акварель, причём с рваным краем, как у краски, которая впитывается в бумагу.

Готовых решений под такое не нашёл. Видео не подходило: нужна была реакция на тап и чёткость на любом экране. В итоге всё собралось на чистом SVG, паре фильтров и небольшом количестве JS. Ниже разбираю по шагам, с кодом и граблями, на которые наступил.

Теперь каталог живёт в HTML и CSS: текст, таблицы и схемы лежат в одном проекте и правятся вместе, PDF получается печатью из браузера. CorelDRAW остаётся только на полиграфическую доводку. Насколько это проще, видно по предыдущему каталогу: 35 страниц, текст и таблицы через Word, схемы через Inkscape, макет в CorelDRAW — и каждая правка означала новый экспорт и повторную ручную доводку. Что дал этот странный подход и чем пришлось заплатить.

Если следить за React только по крупным релизам, легко пропустить момент, когда библиотека тихо меняет направление. React 19.3 — как раз такой случай. Сам релиз вышел 9 сентября 2026 года. И я хочу поделиться парой моментов из этого обновления. Рассмотрим пару хуков это ViewTransition и Fragment Refs. Еще, что я могу выделить, это новые возможности для SSR, Server Components и работы с браузерными API.

Привет, Хабр!

Я интересуюсь вёрсткой с момента появления первых версий браузера Google Chrome. Конечно, современному фронтендеру тяжело понять то, что я испытывал с коллегами. Мы именно те разработчики, которые знали кучу рецептов, как починить определённый баг в конкретном браузере.

Но тогда были не только плохие моменты. В этом легаси осталось много хороших возможностей. Только они затерялись с течением времени. Мне же от этого грустно.

По этой причине сегодня пришёл к вам исправлять эту ситуацию. Мы рассмотрим старые возможности HTML и CSS, которые сегодня всё так же полезны.

Давайте посмотрим, что я подготовил.

Организованная разработка фронтенда должна отвечать на три вопроса: компоненты, ререндеринг, стилизация. И LandTS легко на них отвечает.

Большой визуальный гайд по CSS Anchor Positioning: от базовой привязки элементов до создания прочных соединителей и цепочек якорей.