Я развиваю скрипт на языке PowerShell для обхода и визуализации HTML-дерева из файла на языке HTML для анализа кода HTML на ошибки. В частности, для поиска ошибок при именовании классов CSS. Для этого сначала нужно получить набор классов из атрибута class HTML-элементов, а затем перебрать эти названия классов в цикле. Для разбора HTML я использую библиотеку «HTML Agility Pack». Также я разбираю, как можно обработать ссылки на символы (их еще называют по-английски «HTML-entities»)
Подробнее
Браузерная разработка — одна из самых старых и при этом динамично развивающихся отраслей IT-индустрии. Востребованность и зарплаты разработчиков веб-приложений — фронтенд-разработчиков, только растут, но вместе с тем растут и ожидания от них. У этого есть простая причина: предметная область, ее глубина и количество нюансов — запредельно объемны, и они требуют постоянного обновления собственных знаний. Разработчик и консультант Александр Усков рассказывает про различные аспекты…
Подробнее
Всем привет, мне пришлось очень долго промучаться с анимацией Аккордеона и свойства max-height не прибегая к помощи Js в вычислениях, и сейчас я поделюсь с вами оптимальным решением. Читать далее
Подробнее
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм. Читать далее
Подробнее
Всем привет! Меня зовут Всеволод Золотов, я Senior Frontend в компании Bimeister. CSS-in-JS очень быстро набрал популярность в React-комьюнити, но насколько актуален этот подход в Angular? В данной статье сравним удобство разработки и производительность двух визуально идентичных приложений (time-tracker), написанных с использованием SASS и @emotion/css. Читать далее
Подробнее
Мы в *instinctools организовали и провели серию онлайн-дискуссий с разработчиками и экспертами в области IT. Проект «Техпора» – это возможность обсудить темы, которые затрагивают основные точки роста в IT. Мы не накладывали на беседу приглашенных гостей ограничения, а специально для «Хабра» выбрали из разговора яркие моменты, чтобы их можно было обсудить. В разговоре приняли участие Денис Радин, организатор JSNation и React Summit, Виталий Фридман, сооснователь Smashing Magazine, Андрей…
Подробнее
В дизайне StackOverflow используются праздничные модальные окна, поэтому команда SO разработала удобный способ отображения конфетти. Первым решением был простой статический SVG с конфетти на заднем плане. Позже команда обнаружила 12 разных статических конфетти по всему коду и поняла, что нужен другой подход. Подробностями решения делимся под катом, пока начинается наш курс по Frontend-разработке. Читать дальше →
Подробнее
Спецификация W3C Scroll-linked Animations — это экспериментальное дополнение, которое позволяет связать развитие эффекта анимации с прокруткой. Подробностями делимся под катом, пока у нас начинается курс по Frontend-разработке. Читать далее
Подробнее
В допандемическом 2020 Брайан Браун отправился на неделю в Recurse Center и разработал Checkboxland. Эта библиотека JavaScript отображает текст и анимацию на сетке флажков. К забавному маленькому проекту автор сделал несколько демонстраций, написал об этом, а в итоге положил проект на полку и не прикасался к нему около года. В конце концов, отчаянно захотелось развлечься с программированием, и автор снова взялся за Checkboxland. Хотелось сделать более качественную и сложную анимацию,…
Подробнее
Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы? Всем привет, это Макс Кравец из Holyweb. Помните сцену из Матрицы, в которой один из юных кандидатов в Избранные наставляет Нео: «Не пытайся…
Подробнее![[Перевод] Полное визуальное руководство/шпаргалка по CSS Grid](https://habrastorage.org/webt/ii/wm/o4/iiwmo4xd5llqegxpezthtndpepq.png)
Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство. Что такое CSS Grid? Грид — это макет для сайта (его схема, проект). Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных…
Подробнее
К старту курса о Frontend-разработке мы решили поделиться переводом небольшого обзора визуальных атак, позволяющих получать закрытую информацию о пользователе вне зависимости от того, применяется ли правило ограничения домена. Некоторые из обсуждаемых уязвимостей закрыты, но развитие технологий веба порождает новые вариации старых атак. Читать далее
Подробнее