Сверхбыстро

Новые функции для преодоления основных пороговых значений Web Vitals:
— content-visibility - позволяет указать браузеру не высчитывать layout, если контент вне viewport
— contain-intrinsic-size - указывает браузеру, какой размер будет у контента(необходимо, чтобы не скакал скролл)
— ascent-override, descent-override, line-gap-override для уменьшения скачка layout, когда подгрузился шрифт
— portal - новый html элемент для отрисовки страницы и возможности “активировать” страницу
— quicklink - библиотека для ускорения навигации между страницами

#performance

К докладу(eng)

Neumorphism - тренд 2020-го года в дизайне сайтов

Набор материалов с компонентами в стиле Neumorphism:

Neumorphism UI KIT

Codepen набор элементов

Codepen checkbox

Codepen form

Codepen набор элементов

Codepen иконки

#css #neumorphism

CSS совет от Jhey Tompkins

НЕ используйте <div> для прогресс бара!
Используйте элемент <progress>
Вы можете стилизовать его с помощью переменных CSS и некоторых псевдоселекторов.

#css #html

Codepen

Twitter

getEventListeners(element) в ChromeDevTools

Вызов getEventListeners(element) в ChromeDevTools консоли
перечисляет всех слушателей событий, прикрепленных к данному элементу

К Твиту

Nodejs - лучшие практики

В репозитории собраны рекомендации в разных категориях:
— Практики структуры проекта
— Практики обработки ошибок
— Практики стиля кода
— Тестирование и общие методы контроля качества
— Переход к производственным практикам
— Практики безопасности
— Практики эффективности

#nodejs

Github(eng)

Github(rus)

CSS совет от Jhey Tompkins

Box Models
— content-box: отступы и границы добавляют к размеру 👎
— border-box: заданный размер - это суммарный размер ширины/высоты и границ 🙌

html { box-sizing: border-box; }
* { box-sizing: inherit; }

Думайте об этом, как о поясе Санты, который держит подкладку!

Codepen

Twitter

Линтер — это чистый код для ленивых

В статье рассказывается, какие проблемы бывают в коде и как с ними помогают справляться линтеры

#lint

К статье(rus)

Руководитель отдела разработки интерфейсов Илья Кашлаков рассказал про развитие архитектуры фронтенда ЮMoney

В докладе рассказывается о истории развития фронтенда в ЮMoney, с какими проблемами сталкивались, к чему пришли и зачем нужна платформенная команда.

К докладу

До свидания, Google Fonts. Последний аргумент

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

#performance

К статье(rus)

JavaScript алгоритмы и структуры данных

В репозитории собрано большое количество материала с визуализацией по алгоритмам и структурам данных. Некоторые материалы переведены на русский.

#algorithms

Github

Sarah Drasner: “Если вы устали копаться в документации, чтобы найти правильный метод массива или объекта, я сделала пару инструментов, чтобы помочь!”

Массивы: https://arrayexplorer.netlify.app
Объекты: https://objectexplorer.netlify.app

#javascript

Они оба переведены сообществом на многие языки :)

К твиту

Head-of-Line Blocking в QUIC и HTTP/3: Подробности

В статье рассказывается история развития http, какие проблемы решались и как будет устроен http3

#http #http2 #http3 #tcp #quic

К переводу

К оригиналу

Модули в JavaScript

В статье рассматриваются две основные модульные системы: CommonJS и ESM (ECMAScript 6 модули).

#javascript

К статье(rus)

Как один разработчик воссоздал AirDrop, используя только JavaScript

#node #javascript #webrtc

К статье(eng)

Snapdrop.net

Github

Josh W. Comeau: “Худшая вещь в мире - это когда анимация наведения останавливается, потому что перемещение курсора заставляет ее начинаться/заканчиваться.”

Исправьте это, отделив trigger от visual effect. Слушайте наведение на родителя, а не на анимируемый элемент

#css

Codepen

Twitter

Что нужно знать о популярных JS-фреймворках

В статье рассматриваются популярные фреймворки и библиотеки, их истории развития, преимущества и недостатки.

#angular #react #vue #ember #svelte

К статье(rus)

Как просмотреть в реальном времени свой localhost с ноутбука на мобильном устройстве

#debug

К статье(eng)

Еще один популярный вариант - библиотека ngrok