Блеск и нищета favicon

Нет повести печальнее на свете, чем повесть о favicon в интернете. Сегодня в нашем дайджесте мы затронем больную тему фронтенд-разработки — создание адаптивных значков сайтов. Ещё поговорим о каскадных слоях CSS, разберём парочку полезных фреймворков и попробуем заглянуть в будущее Web 3.0. Приятного чтения!

Построение адаптивного favicon

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

Любой веб-сайт сейчас можно посмотреть с разных устройств — от смартфонов до компьютеров. Некоторые пользователи любят светлые темы оформления, а другие, наоборот, тёмные. Вот тут и возникает проблема. Большинство дизайнеров стараются сделать так, чтобы favicon гармонировал с фоном. Задать статичный цвет не получится. Нужно, чтобы favicon динамически подстраивался под используемую тему.

Решением станет использование favicon в векторном формате SVG. Основа формата — XML-разметка, что позволяет управлять цветом каждого отдельного элемента. Остаётся лишь подобрать гармоничные варианты цвета для разных вариантов оформления:

A-Frame — фреймворк для VR-сайтов

VR всё чаще возникает в нашей жизни. Устройства совершенствуются, появляются такие стартапы, как ViaVR — мы уже рассказывали об этом кейсе на нашем сайте. Крупнейшие игроки рынка упоминают термин «метавселенная», а бизнес всё чаще инвестирует в индустрию VR-развлечений. Разумеется, развитие таких технологий вначале требует создания профессионального инструментария для разработчиков. Об одном из таких инструментов мы и расскажем.

A-Frame предназначен для веб-сайтов со встроенным 3D/AR/VR-контентом. Разработка ведётся на чистом HTML, что не потребует установки дополнительного ПО. Следует понимать, что это не специфичный язык разметки, а ядро создающее структуру для Three.js. Его основная идея в добавлении интерактивности, максимально используя позиционное отслеживание и используемые контроллеры. Помимо обычных компьютеров и смартфонов A-Frame умеет работать с устройствами Vive, Rift, Windows Mixed Reality, Daydream, GearVR и Cardboard.

Использование каскадных слоёв CSS

Переопределение — палка о двух концах. Вы задаете значение какого-либо элемента, а оно не работает, так как переопределяется где-то дальше. А если в коде есть правило !important, то оно вообще переопределит все заданные правила стиля. Кодовая база растет, таких ситуаций становится больше. И надо с этим что-то делать.

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

Вначале можно определить несколько слоев, поставив символ @layer перед каждым именем слоя. Каждый следующий слой будет иметь больший приоритет, чем предыдущий. Это стандартный порядок, как и в Adobe PS. Можно в любой момент поменять этот порядок, например, одновременным определением слоев. 

Внутри слоя мы можем разместить несколько вариантов CSS какого-либо элемента и получить гарантию, что они будут всегда иметь приоритет над базовыми стилями. Хотите узнать об этом побольше — тогда советуем прочитать эту статью, либо на MDN.

Web 3.0 ближе, чем вы думаете

Любопытное наблюдение о цикличности истории. Очередной виток заставил вновь взглянуть на концепцию Web 3.0. Она достаточно старая и сформулирована 15 лет назад Джейсоном Калаканисом (англ. Jason Calacanis), бывшим в то время руководителем Netscape. Основная суть сводилась к тому, что интернет должен выйти на качественно новый уровень взаимодействия с пользователями. Вместо общения «слепого с глухим» Web 3.0 должен будет получить надстройку в виде семантической паутины и начать «понимать» естественный язык.

Часть концепции уже была реализована и мы регулярно пользуемся её преимуществами. К примеру, RSS до версии 2.0 — часть стандартной модели фреймворка RDF, разработанного как раз для Web 3.0. Ещё был создан язык OWL, которым можно описать любой объект реального мира. Технологии, потенциально считавшиеся основой Web 3.0, например, блокчейн и децентрализованные приложения — активно развиваются. Бизнес обращает свой взгляд на них и вкладывает колоссальные средства в развитие.

Ждёт ли нас Web 3.0 в недалёком будущем? Ответ очевиден — эта эра уже стремительно наступает. Станет ли она «золотым веком» веб-разработки? Здесь уже нет однозначного ответа. Уверены, что многие энтузиасты давно горят идеей создания интернета нового поколения. Каким он будет? Время, как всегда, покажет.

Svelte.js — фреймворк Шрёдингера

 

Веб-разработка привыкла оперировать данными «на лету» в браузере. Vue и React используют именно этот принцип работы. Но если внимательно посмотреть на существующий процесс обработки данных, становится ясно, что часто используются сравнения состояний виртуального DOM. Не самая бюджетная для системных ресурсов операция. Да и сам по себе виртуальный DOM — не панацея.

Что будет, если всё компилировать заранее, а DOM обновлять исключительно точечно при изменении состояния приложения? Примерно так и работает компонентный фреймворк Svelte.js. Если вы никогда еще не пробовали его — вас ждет много интересного. Этот фреймворк примечателен отсутствием рантайма. Да и вообще этот фреймворк сложно назвать фреймворком. Скорее тут более уместен термин — компилятор. 

Когда вы пишете код, Svelte компилирует его во множество крохотных модулей JavaScript. На выходе получается чистый и оптимизированный JS. Пользователю отправляется значительно меньше кода и исполняется он быстрее. Если не верите, можно побенчмаркать. Ну а если захочется глубокого погружения, то советуем начать с официального туториала. Он даёт отличное представление о возможностях Svelte.

Обучение

Конкурсы для разработчиков

Митапы

Вакансии

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