HTML *

Vuetify - один из самых популярных Material Design фреймворков для Vue, которому недавно исполнилось 6 лет. И 6 января 2023 года его основатель заявил, что проект Vuetify перестал окупаться и он ищет работу. Отсюда - некролог в названии статьи.

Статья состоит из шести небольших частей, в которых мы пробежимся от первой версии до третьей, посередине разобрав, как фреймворк обновлялся до Vue 3, будем вместе смотреть за поведением основателя движка, а также тем, как можно справиться с переходом на Vue 3, пожалуй, хуже, чем кто-либо еще, включая команду Nuxt.

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

Выковыривание информации из html — это скучно. Очень. Между тем, эта потребность выстреливает редко, но метко (© Суворов). Из-за этого есть спрос на готовые и короткие инструкции о том, как это сделать, чтобы не тратить время на изучение. Перед вами как раз такая.

Чтобы добавить хоть какой-то интерес скучнейшему занятию мы для примера будем парсить пользователей Хабра. А чтобы не мелочиться — ещё и реанимируем для этого экспериментальную библиотеку 11-летней давности.

Есть такой проект — htmlSQL. Старая библиотека времён Очаковских и покоренья Крыма (© Грибоедов). Она позволяет делать выборку из HTML в стиле SQL-запросов как на КДПВ, чем она мне когда-то и полюбилась.

Не хочется говорить о высоких материях, Nocode, ML - системах, нейросетях или чем-то подобном, хочется порассуждать вот о чем: у каждого человека, увлекающегося программированием, есть N+ пет-проектов, и их количество растет. Часть из них - это проба пера, новых технологий, алгоритмов, но часть - это попытки быстро решить задачу бизнеса и найти некий business-value, реализовав MVP и попробовать сделать проект на миллион!

Получается, что для подобных задач я и каждый из нас делает плюс-минус одни и те же действия для получения 50% результата, и сами проекты между собой отличаются на вот эти 50% их сути!

Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors.

Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса.

Типичное видение модели распространения события, которое мы привыкли видеть в интернете - это модель всплытия события (bubbling) подобно пузырьку, или погружению (capturing) подобно “камню”.

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

Сегодня я хочу рассмотреть предложенную функцию HTML, которая может в итоге заменить множество пользовательских компонентов ввода на основе <div>: <selectmenu>.

Библиотека Unified и экосистема плагинов для работы с Markdown и HTML позволит очень просто создать конвертер и подключить компоненты React. Unified преобразует контент в синтаксическое дерево, и имеет набор утилит для работы с деревом, но даже без набора утилит это простая задача, достаточно уметь перебирать свойства объекта javascript. Все это будет продемонстрировано и объяснено.В статье есть пример создания плагина и демо проект.

В веб-разработке написание семантического HTML важно для доступности, а также дает некоторые приятные побочные эффекты, такие как поддержка режима «чтения» в браузере, SEO, graceful degradation и возможность экспорта.

Всем привет! Меня зовут Айрат, я frontend-разработчик IT-компании SimbirSoft. Поговорим о такой теме, как адаптивная верстка. 

ДИСКЛЕЙМЕР: адаптив для сайта как явление на языке мемов уже смело можно назвать «баяном», впервые в России он появился в 2012 году (10 лет назад, Карл!). Даже React – самая популярная на данный момент библиотека для UI-разработки вышла только год спустя. И, наверное, вы подумали: «Да что тут читать? Даже у сайта булочной есть адаптив под мобильные устройства». Справедливое замечание... Мы тоже так думали, но не тут-то было. Представьте наше удивление, когда за последние полгода чуть ли не каждый второй клиент обязательным требованием выставляет наличие адаптивной верстки для сайта. Удивляет нас это потому, что адаптив – опция «из коробки» для каждого нашего проекта, на которой мы даже не акцентируем внимание. Всем же понятно, что он должен быть. Оказывается, нет…

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

Я не считаю, что DHTML — cool, просто картинка хорошая)

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

Представляю вашему вниманию перевод этой замечательной статьи.

Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс предназначен для определения и манипулирования геометрией элементов DOM.

В своей прошлой статье я рассуждал о том, как использование паттерна MVVM позволяет упростить процесс разработки. Паттерн был реализован с применением библиотеки MobX. Эту библиотеку я считаю в разы удобнее Redux, аргументы в пользу чего я также привел в статье. Однако, у нее имеется серьезный недостаток - излишняя свобода действий, в следствие наличия которой разработчики не всегда знают как писать код "хорошо". Паттерн MVVM же диктует несколько простых правил по использованию MobX, благодаря которым разработчики могут реже наступать на грабли. Однако, он не решает всех проблем. И в этой статье я бы хотел показать, как можно дополнить паттерн MVVM и сделать процесс разработки ещё приятнее.

В этой статье мы будем рассматривать ускорение работы страницы только с помощью файлов HTML и CSS

Итак, мы хотим получить информацию с веб сайта — это можно сделать в 3 шага

1) Получить html сайта (пропустим этот шаг)

2) Распарсить html строку и создать dom. — builderdom.js

3) Найти нужные dom_node из dom по кссселекторам.

3.1) Распарсить строку кссселекторов и создать дерево для поиска. — cssselectorparser.js
3.2) Отфильтровать дом_ноды по дереву кссселекторов и найти нужные. — treeworker.js

Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Представьте, что вы отвечаете за большой веб-сервис со сложным интерфейсом, замысловатой навигацией, авторизацией, платежной системой. Представьте, что однажды к вам приходит ваш PO и просит сделать не одну его часть, не один конкретный бизнес-процесс, а весь этот сервис встраиваемым. И конечно по пути ни один из сотен тысяч пользователей вашего сервиса не должен пострадать. Возможно ли это и насколько это дорого?

Когда говорим «динамический», подразумеваем JavaScript. Но некоторые динамические функции можно реализовать, используя только CSS. Например, цвета. 

Привет, Хабр! Я Лена Райан, фронтенд разработчик в Х5 Tech. Решила поделиться с вами подборкой ТОП-10 проверенных зачётных онлайн-ресурсов по фронтенду, которые будут полезны как новичкам, так и желающим подтянуть свои знания по этой теме. Подборка подойдёт также тем, кто только недавно пришёл в IT или в профессию фронтендера и хочет понять, с какой базы им начать.

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

На базовом уровне

Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов

Что изучать?

Я не могу сдержать своего волнения, когда пишу первые несколько слов этой статьи. Дамы и господа, контейнерные CSS-запросы наконец-то здесь! Да, вы правильно поняли. В настоящее время они поддерживаются в Google Chrome (105), а вскоре будут и в Safari 16. Это огромный этап в веб-разработке. Для меня это нечто, что меняет правила игры - как первое появление медиа-запроов, с помощью которых мы начали строить адаптивные сайты. Контейнерные запросы не менее важны (по крайней мере, так кажется мне).

Привет! Меня зовут Вадим Аркадов, я ведущий разработчик в команде веб UI-кита. В этой статье я расскажу о том, какое место в нашем продукте занимает типографика, как мы её переосмыслили и реализовали в коде. Мы поговорим про техническую эволюцию той части кита, которая связана с текстами.

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