Веб-разработка *

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

На носу Новый год. Все друг друга поздравляют. Мне это время очень нравится. Для меня Новый год — самый главный праздник.

В общем, мы же фронтендеры. Я подумал: а почему бы не придумать специальную открытку с поздравлением? Использовать я буду только HTML и CSS. Никаких картинок. Да-да, даже векторного SVG.

Единственным «хаком» будет шрифт — мы подберём красивый. Также у нас будет анимация снега. В общем, сделаем всё по красоте!

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

Давайте уже сделаем новогоднюю открытку!

Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS!

Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS.

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

В этой статье я приведу несколько примеров; сможете придумать свои?

Итак, 5 ноября команда JFrog опубликовала предупреждение об уязвимости CVE-2025-11953 в инструментах командной строки проекта React Native Community CLI. React Native — это платформа которую используют тысячи разработчиков для создания мобильных приложений, которые мы видим в App Store или Google Play. А React Native Community CLI через командную строку предоставляет инструменты для разработки и сборки этих приложений, куда как раз и входил злополучный пакет.

На первый взгляд, это еще один CVE в длинном списке. Но проблема глубже: уязвимость в популярном пакете может затронуть сотни проектов одновременно и ударить не только по продакшену, но и по устройствам разработчиков и CI-пайплайнам.

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

Несколько месяцев назад я писал о прокси-войне, которую Google ведёт против открытого веба при помощи XSLT. Совершенно неудивительно, что Google продолжает продвигать отказ от него, по-прежнему не давая никаких весомых причин, за исключением «мы наживались на FLOSS-библиотеке, в которой наконец нашли достаточное количество багов безопасности, чтобы это служило оправданием». Компания не объяснила, почему решила не устранять проблемы в самой библиотеке или использовать более современную библиотеку, написанную на безопасном языке, воспользовавшись возможностью проапгрейдить поддержку XSLT до более свежей, мощной и простой версии стандарта.

Вместо этого она решила предоставить «полифил» на JavaScript, который, предположительно, можно использовать для вытеснения функциональности. Однако любопытно, что компания не планирует выпускать эту альтернативу в браузере, что позволило бы выполнить прозрачный переход вообще без обсуждения XSLT. Нет, она осознанно отказалась это делать, потребовав от всех, кто использует XSLT, заменить вызов XSLT нестандартным вызовом полифила JavaScript, который должен его заменить.

Привет, друзья!

В этой небольшой статье я хочу рассказать вам о новом Web API - Invoker Commands.

Invoker Commands API позволяет декларативно управлять поведением некоторых интерактивных элементов с помощью кнопок. "Декларативно" означает, что управления элементами осуществляется только с помощью HTML, без JavaScript.

На сегодняшний день этот API поддерживается всеми основными браузерами (в Safari пока только в качестве экспериментальной возможности).

Беглым поиском по Хабру я с удивлением обнаружил, что мы часто обсуждаем сложные архитектуры безопасности, но игнорируем базу, которой пользуемся каждый день. В свете последних событий в РФ, утечек баз операторов и навязывания экосистемных мессенджеров, пора расставить точки над i.

Сегодня поговорим о том, почему SMS и пуши - это тупиковая ветвь эволюции, и как правильно приготовить TOTP, чтобы вас действительно не взломали.

Сегодня многие живут в формате «сидячей работы» — неважно, офис это или диван дома. Часы за ноутбуком проходят незаметно, а тело в это время терпеливо копит напряжение и усталость.

У меня с этим длинная история, но был один момент, который оказался переломным. Несколько лет назад я сменила режим работы, не оставив себе ни дня на нормальный отдых. Мой день выглядел просто: кровать — ноутбук — кровать. На любые «тренировки для сидячих сотрудников» не было ни сил, ни желания. И однажды всё закончилось так, как обычно и заканчивается — внезапно. Я наклонилась поднять пакет с продуктами и словила жёсткий зажим поясницы. Неделя обезболивающих, минимум движения и максимум тревоги заставили признать очевидное: так жить нельзя.

Опыт был болезненный, но показательный. И именно он научил меня тому, о чём я хочу рассказать в этой статье — как вернуть телу силы без часов в зале, без героизма и без «новой жизни с понедельника».

JWT, SSO, OAuth, OpenID Connect — названия знакомые каждому разработчику. Но стоит спросить: «Зачем в продакшене нужен JWKS?» или «Чем отличается OAuth2 от OpenID Connect?» — уверенность сразу исчезает.

В этой статье мы разберём как устроен JWT и его подпись, зачем нужны access и refresh токены, что такое JWKS и в чём отличие OAuth от OpenID Connect.

Вместо скучных стандартов и спецификаций протоколов в статье будет один наглядный образ на примере отелей и пропусков. Это позволит не только запомнить, но и прочувствовать на реальных примерах, избавиться от хаоса и путаницы в голове, когда речь заходит об аутентификации и авторизации. Цель статьи — не дать «рецепт внедрения», а дать возможность понять, как это работает внутри и «пощупать» эти темы на Go. 

В 2013-м я получил свою первую вакансию джуна. Требования: PHP, MySQL, jQuery. Всё. Я открыл tutorial, за выходные накодил todo-лист, через месяц уже чинил баги в проде.

Вчера смотрел вакансию для джуна. Требования занимали два экрана. Node.js ИЛИ Python ИЛИ Go. React ИЛИ Vue ИЛИ Angular. PostgreSQL + Redis + MongoDB. Docker обязательно. Kubernetes — плюсом. GraphQL знание приветствуется. Плюс микросервисы, CI/CD, облака...

Я посчитал: чтобы формально соответствовать этой вакансии, нужно изучить минимум 15 технологий. На поверхностное изучение каждой — месяц. Итого больше года непрерывной учёбы. Для позиции джуна.

А что сейчас?

Сейчас — это Node.js, Deno, Bun для JavaScript-бэкенда. Go, Rust, Elixir для хайлоад. Python с FastAPI, Django, Flask. Kotlin, Java, Scala для enterprise. Плюс Ruby, PHP (еще жив), C#/.NET... И это только языки и рантаймы. А еще базы: PostgreSQL, MySQL, MongoDB, Redis, Cassandra, ElasticSearch. Очереди: RabbitMQ, Kafka, NATS. Контейнеризация: Docker, Kubernetes, Helm. CI/CD: GitLab, Jenkins, GitHub Actions, CircleCI. Облака: AWS, GCP, Azure.

Бедные джуны. Хотя нет — бедные мы все. Даже опытные разрабы теряются в этом океане, когда делают шаг в сторону. Зоопарк технологий растёт экспоненциально. И вопрос "с чего начать?" и "куда двигаться?" превращается в настоящий паралич выбора.

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

В мире фронтенда активно всё меняется. Появляются одни инструменты, но только их выучишь — они устаревают, и нужно уже учить новые. Новые методы и API в JavaScript. Даже в HTML появляется что-то новое. И, конечно, CSS не отстаёт.

В общем не удивительно, что люди забывают или не успевают услышать о возможностях в CSS. В этой статье я постараюсь показать несколько из их, которые считаю полезными.

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

В этом посте будут объяснены две стратегии оптимизации WebAssembly, которые не так давно были реализованы в движке V8 и вошли в версию браузера Google Chrome M137. Речь пойдёт о спекулятивном встраивании call_indirect inlining и о поддержке деоптимизации в WebAssembly. В сочетании два этих приёма помогают генерировать более качественный машинный код, так как основаны на допущениях, которые строятся, исходя из обратной связи, поступающей от среды исполнения. Благодаря этому, WebAssembly выполняется быстрее, особенно это касается программ WasmGC. Например, проверив эти приёмы на наборе микробенчмарков, написанных на Dart, видим, что комбинация двух оптимизаций даёт ускорение в среднем более чем на 50%. В более крупных и реалистичных приложениях и на тех бенчмарках, которые рассмотрены ниже, достигается ускорение между 1% и 8%. Деоптимизации — также очень важная составляющая для дальнейшей оптимизации в будущем.

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

Раньше для этого можно было использовать только строку User‑Agent, которую браузер отправляет автоматически, но её избыточность и сложность парсинга стали сдерживать развитие веба. Client Hints предлагает другой подход: вместо того чтобы сразу раскрывать всю информацию, браузер передаёт только те данные, которые действительно нужны сайту.

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

Всем привет! Меня зовут Максим Иванков, мне 30 лет, у меня трое детей, и вот уже 9 лет я развиваю школы робототехники и программирования по всей России. Старший сын только пошёл в первый класс, и я вижу, как школа в провинции рушится на глазах: учителя бегут из-за копеечных ставок, бюрократии и беспомощности перед хулиганами, физику и информатику ведут кто попало, а дети теряют интерес к учёбе. За годы экспериментов я создал формат, где дети идут на занятия с радостью и учатся годами. Нет лекций — только самообучение в своём темпе: собирай роботов (колонка, сигнализация, микроконтроллеры), программируй Python прямо в Minecraft.

Я в IT довольно давно, как в том меме — мне этот мир абсолютно понятен. Но сейчас происходит какая‑то ерунда, учитывая разные обстоятельства в мире, считаю так делать крайне тупо. Не то, что бы я хотел пожаловаться, и увольнения, «оптимизации», «трансформации» были всегда. Это все бизнес и к нему нечего предъявить. Разные ситуевины бывают. Но я бы хотел как‑то вставить свое мнение по теме.

Годами, если вы хотите попасть в какую‑то крутую компанию, вам нужно было и до сих пор это «нормальная» практика устраивать десятки этапов собеседований. Без проблем я принимаю эту игру. Нам же важно найти того самого рок звезду, который будет решать поставленные перед ним задачи. Типо как в магазине выбираем принтер, правда сдать его обратно через 3 месяца нельзя. Листик с него вышел — значит все, поиспользовал, живи с ним дальше.

Веб-разработчики нередко воспринимают браузер как «черный ящик», который каким-то чудом превращает HTML, CSS и JS в интерактивные веб-приложения. На самом деле современный браузер — будь то Chrome (на базе Chromium), Firefox (Gecko) или Safari (WebKit) — представляет собой чрезвычайно сложное программное решение. Он управляет сетевыми запросами, разбирает (парсит) и выполняет код, рендерит графику с ускорением на графическом процессоре (GPU) и изолирует контент в отдельных процессах для обеспечения безопасности.

В этой серии статей мы подробно рассмотрим, как устроены современные браузеры, сделав акцент на архитектуре и внутреннем устройстве Chromium, но также отметим ключевые отличия в других браузерах. Мы рассмотрим весь цикл: от сетевого стека и конвейера парсинга до рендеринга с помощью Blink, выполнения JS с помощью движка V8, загрузки модулей, многопроцессной архитектуры, песочниц безопасности и инструментов разработчика. Главная цель — дать понятное и доступное объяснение того, что происходит в браузере "под капотом".

Команда JavaScript for Devs подготовила перевод статьи о том, как 37signals создают современные веб-приложения без Tailwind, Sass и сборщиков. Опираясь только на возможности нативного CSS, они строят масштабируемую архитектуру, используют :has(), color-mix(), CSS Layers, container queries и другие возможности, которые многие разработчики ещё даже не пробовали.

Каждый раз, когда в айтишных чатах всплывает тема веб-серверов, кто-то пишет: «Apache умер», «Nginx — наше всё», «за Caddy — будущее, просто попробуйте». В статье разберём, в каких случаях веб-сервер действительно нужен, в чём плюсы и минусы популярных решений и как сделать выбор под свою задачу. Детали внутри.

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

Привет, Хабр! Меня зовут Александр Дудукало, я автор базового курса по JavaScript. Сегодня мы поговорим о методах массивов. Если коротко, вы узнаете, как легко и элегантно работать со списками данных, не используя громоздкие циклы. Детали внутри.

С момента первого релиза Postgresus прошло 6 месяцев. За это время проект получил 246 коммитов, новые функции, а также ~2.7 звёзд на GitHub и ~40к загрузок из Docker Hub. Сообщество проекта тоже подросло, сейчас в проекте числится 11 контрибьюторов, а группа в Telegram — 85 человек.

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

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

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

Но также я встречал фронтендеров, которые не тратили много времени, продумывая взаимодействие пользователя с интерфейсом. Им было всё равно, а некоторые даже хотели специально подложить какую-то «какашку».

Я подумал, что надо им помочь сделать ужасный интерфейс! Составил список решений, которые заставят пользователя подумать о разработчиках не очень хорошо.

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