Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 10–16 октября.

🔥 Три главные статьи

  • Удалённая работа не для всех. Узнайте, почему вам может не подходить удалённый формат работы до того, как вы начнёте работать удалённо.
  • Как безопасно делиться почтовыми ссылками. Способ <a href="mailto:email@address.com">Send me an Email</a> не совсем безопасен, так как доступен абсолютно всем: поисковикам, спам-ботам или парсерам.
  • Новые шаблоны для приложений: Web Share API, API к файловой системе, вставка изображений из буфера обмена и многое-многое другое.

🖌 HTML и CSS

Пошаговая инструкция как сделать плавающую кнопку. Познакомьтесь с разметкой, стилями доступностью, темами, анимациями для плавающих кнопок.

Восхитительные анимации с помощью Shared Element Transitions API. Продолжение статьи о незаметных и плавных переходах между страницами.

Разрывы контента с помощью гридов. Иногда бывает нужно, чтобы контент, например картинка, была шире, чем основной контент. Узнайте как это сделать.

Принято решение по синтаксису вложенности в CSS. Было опрошено 7590 разработчиков и результатом стал @nest .

Практические советы по работе с :has.

Каскадные слои — хороший способ улучшения кодовой базы.

Как работают:where() и :is().

🛠 Инструменты

Супер-удобно недели: кликаете в элемент в браузере и переходите в JS-компонент в редакторе кода. Работает с React, SolidJS, Preact, Svelter, Vue.

DraculaUI — коллекция шаблонов и компонентов с подходом «в первую очередь тёмный режим».

Paged.js — печать HTML-страницы в PDF на основе Puppeteer.

Новое в Git v2.38 и Scalar — встроенный менеджер для больших репозиториев.

Storybook 7.0 будет иметь первоклассную поддержку Vite.

🏝 JavaScript

Вышли новые шаблоны для приложений: Web Share API, API к файловой системе, вставка изображений из буфера обмена и многое-многое другое.

Intl как способ изучить и поэкспериментировать с Internationalization API. Узнайте хороший способ сравнения строк с учётом языка.

Bun выпустила новую версию, которая может похвастаться значительным повышением производительности HTTP-сервера.

Экспорт по умолчанию усложняет чтение для JavaScript.

🚀 React

Будущее рендеринга в React. Сначала вспомните текущие шаблоны(CSR/SSR), а затем познакомьтесь с новым шаблоном рендеринга: потоковый SSR и серверные компоненты.

Семантический HTML-трюк для React-компонентов. Не забывайте, что использование React не отменяет HTML.

💽 Node.js

Вышла Node v16.18.0 (LTS).

Научитесь писать экспорты CommonJS, которые можно импортировать по имени в ESM.

🕸 Браузеры

Вышла Safari Technology Preview 155.

🎓 Общее

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

Как сделать идеальную таблицу с ценами так, чтобы были понятны отличия между продуктами.

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

Эффективное общение для повседневных встреч.

Как читать статьи на английском языке

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