Фронтенд

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

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

Кто же будет первым? Более 12 лет я являюсь клиентом Приорбанка (Беларусь, РБ). Банки — это важные сервисы, они определенно должны быть доступны людям с ограничениями. Я решил начать именно с него, это сервис который важен и для меня, поэтому в двойне интересно это сделать. Да простят меня сотрудники банка!)

Привет, Хабр! На связи Герман Frontend-разработчик в Webest, и сегодня хочу поделиться тем, почему мы продолжаем использовать препроцессор SASS/SCSS в наших проектах, несмотря на растущую популярность Tailwind и CSS-in-JS решений.

К слову, мы не «олдскульные фанаты» SASS, и Tailwind тоже используем, но в зависимости от типа проекта. Комбинированный подход дает гибкость, особенно в масштабируемых фронтенд-системах.

История создания логического симулятора на TypeScript: от «игрушки» на паре до архитектурного движка с DI, event-bus и системой плагинов.

Передача данных между воркерами в JavaScript, не так проста и имеет массу особенностей завязанных на реализации потоков в языке. Хотите узнать о том какие ограничения накладывает архитектура многопоточки JS и как эти ограничения безопасно обойти?

Если вы хотите узнать, какие связки технологий наиболее популярны в 2025 и что стоит доучить, чтобы стать full-stack разработчиком, эта статья вам поможет! Я три раза анализировал вакансии на разных площадках, в начале, середине и конце года, чтобы данная информация была наиболее полезной и честной. Также, если давно думали сделать свой пет-проект, но не знали, на чем сделать вторую часть приложения, тут есть ответ и на этот вопрос.

Когда я только начал осваивать Angular, мне не было до конца понятно, что это за зверь такой — Pipe, и зачем вообще его использовать. Официальная документация гласит следующее:

Pipes представляют специальные инструменты, которые позволяют форматировать отображаемые значения

Да, это действительно объясняет, что делают Pipes. Но в тоже время не отвечает на вопрос, а зачем их использовать? Почему нельзя воспользоваться обычным методом класса? Pipes для меня какое‑то время был тёмной лошадкой. Но потом я узнал «страшный секрет» о Pipes, который всё расставил на свои места

Небольшой спойлер, чтобы не словить минус карму за кликбейт: речь пойдет о том, что чистые Pipes кэшируют результат трансформации (в документации это указано не так явно, как хотелось бы). В статье рассказано, как использовать эту особенность, чтобы избегать проблем во время проверки изменений (Change Detection)

CSS interest-delay — это как «не торопись» для интерфейсов. Позволяет браузеру ждать, пока пользователь действительно хочет что-то сделать, а не просто мимо прошёл. Свойство, которое решить кучу головной боли, но пока не работает нигде — но когда заработает, вы перестанете ругать выпадающие меню.

Доброго времени суток, Хабр! Я, как и многие из нас, периодически захожу на тот самый "красный сайт" по поиску работы. В перерывах между задачами скролю ленту вакансий, откликаюсь на интересные и жду отклика. Но с недавних пор всё изменилось.

Если раньше в таком "ленивом" режиме я получал человеческие ответы — иногда даже приглашения на собесы, — то теперь, буквально через секунды после моего отклика, прилетает reject. И не просто "нет", а с шаблонными комплиментами: "Вы отличный специалист, но, к сожалению, не подходите под нашу вакансию". Все как один — сгенерированы роботами.

Раньше было сложно пробиться через HR до технарей, а теперь даже до HR не доберёшься. Добро пожаловать в эпоху нейросетей, где ИИ решает, достоин ли ты собеседования!

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

В предыдущей статье я рассказал об основах композитного видеосигнала NTSC. Эта статья должна быть интереснее, так как она посвящена программной генерации такого видеосигнала. Тема интересна тем, что помимо самого видеосигнала вы ещё получаете множество практических навыков применения современных микроконтроллеров.

Сигнал CVBS можно получить, используя и FPGA-решения, но стоимость их выше, чем у микроконтроллеров, таких как Raspberry Pi Pico или ESP32.

Я использовал платы разработчика на базе микроконтроллера RP2040. На рынке существует несколько таких плат. Классика — это Raspberry Pi Pico, но есть несколько китайских аналогов, например, YD-2040. Отдельно хочется выделить RP2040 Zero от Waveshare — очень компактное решение, правда у него отсутствует порт для отладки, но можно обойтись и без порта.

Важный момент — СVBS-сигнал является аналоговый, поэтому стабильность напряжение на выходе играет важную роль и для приемлемого качества сигнала китайские клоны Raspberry Pi Pico могут не подойти, так как они страдают нестабильным напряжением на выходах. Мой совет — используйте или оригинальный Raspberry Pi Pico или RP2040 Zero от Waveshare.

Желающих продолжить чтение приглашаю под кат.

Ранняя версия Sanitizer API была реализована в Chrome, но позже была удалена. Поэтому не стоит ориентироваться на старые материалы — спецификация API со временем значительно изменилась.

На данный момент Sanitizer API поддерживается в Firefox Nightly в соответствии с актуальной спецификацией. В Chrome Canary он также доступен, но только при включении специального флага. В Safari реализация пока не ведется, однако команда разработчиков Safari выразила поддержку этой инициативе.

Trusted Types API уже реализован в Chrome/Edge, Samsung Internet, Safari и Firefox Nightly. В Chrome он поддерживается начиная с версии 83, а начиная с версии 144 полностью соответствует последней спецификации и реализации в других браузерах.

Тултипы — классика веб-разработки. Кликаешь по элементу — и рядом всплывает небольшой «бабл» с дополнительной информацией. Но за этим простым кликом почти всегда стоит JavaScript, который рассчитывает, где именно показать тултип.

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

В этой статье я покажу, как написать хороший JavaScript, который обработает все такие случаи…

Шучу! Мы обойдёмся CSS и посмотрим, как современный Anchor Positioning API может помочь со всем этим. Никакого тяжёлого JS и лишних проблем с производительностью.

Как я прокачал VK Teams: от кастомных реакций до AI-ассистента с записью звонков.
История о том, как простое желание поставить эмодзи-клоуна переросло в полноценное расширение с искусственным интеллектом

Если вы когда-либо использовали i18next или next-intl, вы, вероятно, знаете, что интернационализация часто замедляет процесс разработки.

Почему?

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

Ранее мы говорили о том, как улучшить кэширование наших проектов и правильно загружать поставщиков. А в этой статье мы рассмотрим следующее:
- Как мы можем использовать стратегии предварительной загрузки, включая что такое "магические" комментарии Webpack, и что такое спекулятивная/ручная предварительная загрузка;
- Как мы можем запрашивать данные с сервера, не дожидаясь загрузки наших статических файлов;
- А также какие сторонние или наши собственные решения могут быть использованы для этого.

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

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

Ленивая загрузка - это принцип, который должен быть известен большинству frontend разработчиков. Однако, этот механизм обманчиво прост, и его освоение является гораздо более комплексной задачей, чем кажется многим. Если уже используете Lazy Loading, у вас все равно могут быть серьезные пробелы в знаниях. Но даже если вы считаете, что знаете про ленивую загрузку абсолютно все, освежить память не будет лишним.

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

Пишем Slider с Web Components
В этой статье мы создали полнофункциональный слайдер, используя современные веб-стандарты. Мы не только реализовали базовую логику, но и освоили ключевые концепции:

• Работу с Shadow DOM для изоляции стилей и структуры

• Использование слотов для композиции контента

• Реакцию на атрибуты для настройки поведения компонента

• Организацию жизненного цикла через connectedCallback

Современный фронтенд напоминает перегруженный интерфейс: мощные возможности, но чтобы начать работать, нужно изучить десятки концепций. React, Vue, Angular — у каждого свой сложный путь изучения.

Мы задались вопросом: что действительно нужно знать, чтобы создавать UI?

Оказалось, всего четыре концепции: компоненты, состояние, эффекты и DOM. Все остальное — синтаксический сахар и edge cases.

Так родился наш эксперимент: упаковать эти основы в максимально простую модель. Не изобретать новое, а отшлифовать существующее.

Иногда прогресс — это не добавление возможностей, а смелость убрать лишнее.