Интересные публикации
Автор фреймворка Svelte Рич Харрис (Rich Harris) анонсировал публичную бету SvelteKit. Как пишет сам Рич в анонсе: это как Next.js для Svelte. В нём есть SSR, роутинг, code splitting, адаптеры для разных serverless-платформ и так далее. Под капотом SvelteKit — Vite. Поскольку это бета, использовать на проде решение, конечно же, не стоит, но поинтересоваться — очень даже да. Кроме того, можно присоединиться к разработке в репозитории и почитать документацию.
Джейк Арчибальд (Jake Archibald) начал писать серию статей про производительность сайтов разных команд Формулы-1. Первая из них — о методологии и исследовании сайта команды Alpha Tauri. На медленном соединении и слабом устройстве страница загружается больше минуты. Оказалось, что рендеринг блокируется CSS, который отслеживает используемые шрифты. Также Джейк правит загрузку изображений. После оптимизации время загрузки снизилось до 7 секунд. Во второй статье автор исследовал сайт Alfa Romeo. Здесь проблема была в одном скрипте в конце страницы с defer — он загружался с низким приоритетом и так блокировал полную загрузку. После переноса скрипта в
проблема решилась. После всех оптимизаций время загрузки сайта снизилось с 20 секунд до 3 секунд. Третья часть — о сайте команды Red Bull. Этот сайт оказался быстрее предыдущих, но и там Джейк предложил возможные улучшения. Если увлекаетесь производительностью — самое то посмотреть, а я буду ждать продолжения серии.Бен Фрейн (Ben Frain) написал о черновике спецификации вложенности в CSS. Над ним работают Адам Аргайл (Adam Argyle) и Тэб Аткинс (Tab Atkins), а недавно черновик стал доступен сообществу. Он о создании вложенности, похожей на SASS и LESS. Для вкладываемого селектора нужно использовать правило @nest потомка. Фича еще не стабилизировалась, и синтаксис описания вложенности, скорее всего, поменяется. Ни один браузер пока не поддерживает вложенность, но Бен оптимистичен, и считает, что для многих эта фича сделает препроцессоры просто ненужными.
Еще об одной экспериментальной, но более долгожданной фиче. Мириам Сюзан (Miriam Suzanne) твитнула о том, что в Chrome Canary появился первый прототип Container Query. Это подход, при котором контент стилизуется по параметрам контейнера, например, по ширине и высоте. Чтобы попробовать, нужно поставить себе Canary и выставить соответствующий флаг. В твите Мириам есть ссылка на объяснение фичи и небольшое демо.
Следующий материал — о том, как устроены символы, без которых не обходится практически ни один наш день. Никита Прокопов написал статью про внутреннее устройство эмоджи. В простом случае эмоджи — это один символ из Unicode-таблицы. Сами изображения находятся в шрифтах операционных систем, а приложения и сайты могут поставлять свои уникальные наборы эмоджи. Расширенные наборы эмоджи создаются комбинациями нескольких кодов из Unicode. А если эмоджи представляют людей, им можно задать оттенок кожи, для которого есть специальная приставка к коду.
Джон Риа (John Rhea) написал продолжение своей статьи о веб-компонентах. Напомню, в первой он показал, что создавать их не сложно, на примере кастомного элемента. Во второй части он продолжает развивать дейтинговый сервис для зомби. На этот раз он добавляет интерактив: зомби можно лайкнуть и написать сообщение. Это, конечно, просто примеры в codepen, бэкенда нет, но JS был успешно прикручен.
Тими Омойени (Timi Omoyeni) на SmasingMagazine написал статью о реактивности во Vue. Он рассматривает Vue 3 и его реактивный API: как используется объект Proxy, как работают методы reactive() и ref(). Также он рассматривает разные случаи их использования.
Далее я хочу обратить ваше внимание на репозиторий React-Total от Игоря Агапова. Это сборник статей и обучающих материалов по React и другим технологиям, которые применяются вместе с ним. В репозитории можно найти не только фронтенд-технологии, но и руководство по Mongoose, Axios, Socket.io, Webpack и другим. Кроме того, есть раздел со шпаргалками по разным аспектам React, вопросы с собеседований, проекты для обучения и другие полезные ссылки.
В завершение рубрики — две небольшие заметки от Мишель Баркер (Michelle Barker): в первой она рассказывает о том, как анимировать подчеркивание, а во второй — как стилизовать псевдоэлементы при помощи JS и CSS-переменных.
Новости релизов
Вышла третья бета Bootstrap 5. В этой бете был добавлен новый компонент offcanvas, добавлены новые примеры использования компонентов и обновлены старые, также обновлена документация по Sass. Кроме того, был добавлен ещё ряд небольших улучшений и багфиксов. С большой вероятностью следующий релиз будет стабильной версией.
Появился свежий релиз языка Rust. В версии 1.51 продолжилось развитие константных дженериков, а Cargo теперь поддерживает новое поле resolver, которое позволяет разрешать фичи зависимостей по другой стратегии. И как обычно, в разряд стабильных была переведена новая порция API.
Неплохая новость для любителей Ember. Вышла третья стабильная версия ember-electron. Это дополнение для Ember, которое позволяет собирать и запускать Ember-приложения на десктопе. Как вы уже догадались по названию, для этого используется фреймворк Electron. После установки дополнения в корне вашего приложения появится папка ember-electron, в которой будет всё необходимое. Страница дополнения с документацией.
Также отмечу релизы Webpack 5.28.0 и мультиязычного сервера web-приложений nginx Unit 1.23.
Другие новости
Пренеприятнейшее событие произошло с языком PHP. На его git-сервер была совершена атака, злоумышленники смогли вставить в язык бэкдор, который позволял выполнить произвольный код на сайтах, использующих скомпрометированную версию PHP. Коммиты были совершены от лица соавтора PHP Расмуса Лердорфа (Rasmus Lerdorf) и контрибьютора Никиты Попова. Сообщается, что всё указывает на взлом git-севера, а не учетных записей контрибьюторов. В качестве меры предосторожности код PHP был перенесён на GitHub, а свой git-сервер планируется вывести из эксплуатации. Все контрибьюторы теперь должны будут вступить в организацию PHP на GitHub и включить двухфакторную аутентификацию. Расследование инцидента продолжается.
Продолжается процесс возобновления локализации MDN. Напомню, что из-за пандемии документацию MDN практически перестали поддерживать, а команда поддержки была распущена. После этого начались работы по переводу MDN на новый движок и активное привлечение коммьюнити к работе над переводом документации и поддержке. У истории есть продолжение: была разморожена поддержка японского, китайского, французского и русского языков. Отмечу, что русский язык добавили в список размораживаемых в последний момент из-за большого внимания со стороны комьюнити. Между прочим, команда русскоязычных локализаторов оказалась самой большой из перечисленных локалей, в ней целых 7 человек, включая нашего бывшего коллегу Сашу Сушко, поздравляю Сашу и остальных ребят. Это хорошее начинание и вклад в развитие веба. Кроме того, к 30 апреля планируется перестать отображать как неподдерживаемые еще ряд локалей.
Продолжается история с Ричардом Столлманом. В прошлом выпуске я говорил о том, что его возвращение в совет директоров Free Software Foundation вызвало сопротивление и акции протеста. В битве сошлись открытое письмо противников возвращения и письмо в поддержку Ричарда Столлмана. Массовый протест продолжается: такие компании и проекты, как Mozilla, Red Hat, Tor и другие подписали письмо против Столлмана. Кроме того, Red Hat объявила о заморозке финансирования Фонда Свободного Программного Обеспечения и приостановке проведения совместных мероприятий. Ситуация накаляется: подписанты письма в поддержку Столлмана получают письма, в которых их пытаются заставить убрать свою подпись угрозами и шантажом. Совет директоров Фонда пытается быстро внедрить практику прозрачных выборов и как-то утихомирить толпу. В общем, мрак да и только. Будем дальше следить за развитием событий. Долгосрочные последствия пока весьма туманны.