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

System Design Primer - Это отличный репозиторий для инженеров-программистов, который поможет вам научиться проектировать крупномасштабные системы. Репозиторий предоставляет организованный набор ресурсов по этой широкой теме.
Поскольку проектирование системы часто является необходимым компонентом процесса технического собеседования во многих компаниях, этот репозиторий также может помочь вам подготовиться к этим собеседованиям с помощью учебного пособия, советов о том, как подойти к собеседованию, вопросов для собеседований с решениями.

#architecture

Github(eng)

Github(rus)

Как работает https

Вы когда-нибудь задумывались, почему в адресной строке браузера появляется зеленый значок замка? А почему это важно? Мы тоже, и этот комикс для вас!

Следите за приключениями Certificat, Browserbird и Compugter, объясняющих, почему HTTPS имеет решающее значение для будущего Интернета и как все это работает вместе.

Не позволяйте плохим крабам схватить вас (вы поймете, что мы имеем в виду в комиксе). Узнайте, почему HTTPS важен для вашей конфиденциальности.

#https

К комиксу(eng)

Как работает dns

Веселое и красочное объяснение того, как работает DNS.

“Привет всем! Мы сделали этот комикс, чтобы объяснить, что происходит, когда вы вводите адрес веб-сайта в своем браузере.”

#dns

К комиксу(eng)

React Hooks — useMemo + React.memo

#react

К видеоуроку(rus)