Последняя часть по созданию своего starter-kit.
В этой статье мы рассмотрим основные подходы борьбы со сложностью с помощью веб-компонентов. Статья рассчитана на более-менее подготовленных читателей. Материал насыщен ссылками, которые очень желательно изучить.
Привет, Хабр!
При обучении разным языкам программирования всегда есть практики, которым не рекомендуется следовать. Это очень сильно помогает разработчикам избегать ошибок.
Только по какой-то причине сложно найти антипаттерны по языкам HTML и CSS. Может, потому что они не языки программирования?
В общем, у меня появилось желание это исправить. Я собрал несколько примеров, которые лично отношу к антипаттернам. Возможно, это субъективно, но надеюсь, что нет.
Давайте посмотрим, что я вам подготовил.
Компонентно-ориентированный подход уже давно зарекомендовал себя как отличная практика разработки. Его массовая популярность пришла вместе с такими библиотеками, как React и Vue. Создавая компоненты, мы чётко разграничиваем логику, формируем зоны ответственности и эффективно боремся с дублированием кода. Обычно компонент отвечает за рендеринг HTML-разметки и динамически обновляет её в зависимости от своего состояния. Кроме того, ключевую роль играют механизмы контроля жизненного цикла, например, обработка этапов: «компонент присоединился», «компонент обновился» и «компонент был удалён». Это база, но часто существует и множество других хуков.
Раньше для работы с этой парадигмой мы были вынуждены использовать React, Vue или аналогичные фреймворки. Однако сегодня можно обойтись без дополнительных библиотек и обязательной сложной сборки, потому что компоненты доступны «из коробки» в современных браузерах. Да, я говорю о Веб-компонентах. Если быть точнее, о Пользовательских элементах (Custom Elements), поскольку «Веб-компоненты» — это скорее набор стандартных технологий, позволяющих создавать эти самые элементы.
Всем привет! Меня зовут Леонид, я разработчик компании DD Planet.
Как мы все прекрасно понимаем, ни один бизнес‑проект немыслим без разного рода отчетов. Быстрота и удобство их создания зачастую критично важны.
В нашей компании мы долгое время использовали инструмент DevExpress Reports. Однако после ухода DX с отечественного рынка остро встал вопрос о пересмотре архитектуры формирования отчетов — особенно тех, что создавались с помощью визуального дизайнера форм.
Раньше, при использовании компонентов DevExpress, такие отчеты можно было создать в несколько кликов и практически без знания кода — за счет мощного и удобного дизайнера:
Ниже я приведу примеры, как пустить пыль в глаза юзерам можно улучшить ситуацию с ощущением чужеродности приложения среди других, написанных на честном Gtk, китами из XCode, Windows UWP и прочим с 0% вайбкодинга
Мне часто доводится вести странные споры с фанатами фреймворков о том, действительно ли <div> «столь же хорош», как и <button>.
Спойлер: нет. И давайте выясним, почему.
На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.
или как я сделал протокол связи через свет с точностью 99.2 %
Когда мы говорим “оплата телефоном”, в голове сразу всплывает NFC или QR.
А что, если экран и фонарик сами могут обмениваться данными?
Без радиоволн, без Wi‑Fi, без сети вообще.
Так появился Lightprint — протокол, который передаёт данные светом, а камера принимает их и распознаёт как уникальный «отпечаток».
И всё это работает прямо в браузере, на чистом JavaScript.
Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!
Всем привет! Меня, как и многих здесь, в какой-то момент достало. Достало логиниться по SSH, чтобы проверить htop. Достало запускать Termius на телефоне, чтобы сделать sudo reboot зависшему инстансу. Достало ставить тяжелые веб-панели, которые жрут ресурсы и открывают лишний порт, только ради того, чтобы посмотреть загрузку диска.
Я админю несколько VPS. На одних крутятся пет-проекты, на других — сайты, на третьих — кастомные сетевые приложения для транспортировки данных. Мне нужен был инструмент, который:
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
• где полезно использовать элемент search;
• существующие проблемы при использовании единиц измерения от размеров вьюпорта для установки размера текста;
• как элемент hr влияет на опыт пользователей скринридера;
• нужны ли заголовки модальным окнам.
Давайте начнём!
Для каждого экрана, устройства и программы нужен свой размер фавикон изображения. Из статьи вы узнаете различные трюки, используемые для генерации фавикон, и об удобных инструментах для автоматической генерации.
Все разработчики знают о теге <input>, это рабочая лошадка веба.
Но что такое <output>? Большинство его никогда не касались. Кто-то даже не подозревает о его существовании.
И очень жаль, ведь этот тег решает проблему, которую мы годами пытались решить связкой <div> и ARIA: динамические результаты, по умолчанию объявляемые программам для чтения экрана.
Этот тег уже много лет находится в спецификации, но почему-то скрывается у всех на виду.
Переменные Bootstrap — мощный инструмент для управления стилями, но без правильной структуры их тяжело использовать.
В этой статье я расскажу, как организовать SCSS-файлы, подключать глобальные переменные и сделать их доступными во всех компонентах Angular. Такой подход не только экономит время, но и делает проект более понятным для команды. А для больших проектов на NX вы узнаете, как делиться стилями между разными приложениями и библиотеками.
Всем привет, с вами Артем Леванов, Front Lead в WebRise. Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.
Привет, Хабр!
Давно я ничего не писал для джунов. А ведь HTML и CSS не стали проще для них. Всё так же есть сложности, и мне надо как-то помочь людям.
Я выделил несколько привычек, от которых лучше избавиться в самом начале карьеры фронтендера — главное, просто сделать это. Надеюсь, вам будет полезно.
Давайте посмотрим, что я вам подготовил.
CSS давно подвергается критике за отсутствие условной логики. Хотя мы разработали хитроумные обходные пути с использованием медиазапросов, переключаемых настраиваемых свойств и контейнерных запросов, эти решения часто кажутся слишком громоздкими и непрямыми. Рабочая группа CSS одобрила эту функцию для разработки, которая обещает внедрить настоящую условную стилизацию непосредственно в наши таблицы стилей.if()
Привет, Хабр! Представьте у вас есть идея для небольшого приложения. Вы начинаете продумывать его структуру и реализацию. Перед вами предстает ворох проблем; прописать разметку, стили, логику, отладить баги. Эти задачи могут вызвать затруднения у начинающих программистов и предпринимателей. А что если бы у вас был персональный ассистент, который не просто подсказывает код, а сам пишет его по вашим инструкциям на естественном языке?
Парсинг HTML при помощи регулярных выражений — популярная ошибка и отличный пример использования неподходящего под задачу инструмента. Общепризнанно, что это плохая идея по множеству причин.
Существует знаменитый ответ на Stack Overflow о том, почему этого ни в коем случае не следует делать. На самом деле, этот ответ стал настолько популярным, что в определённых кругах используется, как копипаста. Каждый раз, когда я натыкаюсь на него, то думаю что он во многом справедлив... но в то же время, не могу согласиться с ним полностью...
Поделюсь с вами необычным опытом разработки упаковщика проекта с большой анимационной сценой в один независимый HTML файл, который может воспроизводиться в любом браузере без интернета и веб-сервера.
