Добро пожаловать в 15-й выпуск Frontenders Kaleidoscope и 4-й выпуск подкаста. На этой неделе JavaScript, CSS, новости из Browserland, известные релизы в мире открытого исходного кода и множество дополнительных удовольствий от прослушивания. Давайте погрузимся прямо в.

Вид для чтения

Уменьшите полезную нагрузку JavaScript с помощью Tree Shaking

В разделе Web Fundamentals Google Jeremy Wagner написал отличную статью не только о том, что такое встряхивание деревьев, но и исследует практический пример того, как его использовать. В данном случае через Webpack, но то же самое можно сделать и с Parcel, начиная с его последней версии.

Потому что, в конце концов, сжатие отлично подходит для экономии полосы пропускания и передачи меньшего количества байтов по сети. Однако после того, как браузер распаковал эти байты, исходные 900 байтов остаются 900 байтами, которые необходимо проанализировать, скомпилировать и выполнить. Лучше всего убедиться, что нам абсолютно необходимы все эти байты.

Рисование изображений с помощью CSS-градиентов

Вы когда-нибудь задумывались, как люди рисуют все эти замечательные изображения только с помощью CSS? Я знаю, что хотел побаловаться этим, но до сих пор не дошли руки. Ну, не удивляйтесь больше. В разделе CSS-Tricks Джон Кантнер написал исчерпывающее руководство, как правильно намочить ноги. Настоятельно рекомендуется.

Пиксели против Ems: пользователи ДЕЙСТВИТЕЛЬНО меняют размер шрифта

Фиксированные или относительные единицы для размеров шрифта? Из соображений доступности я всегда предпочитал последнее, но я знаю, что вместо этого довольно распространена практика использования пикселей. Аргумент против относительных единиц обычно сводится к тому, что вы можете использовать масштабирование браузера, и пользователи в любом случае не меняют свой базовый размер шрифта по умолчанию.

Оказывается, они делают. Отличная работа Эвана Минто, разработчика и дизайнера Интернет-архива. Она объясняет, как они подошли к определению процента пользователей, которые просматривают их сайт с базовым размером шрифта, отличным от установленного по умолчанию 16px, и почему они в конечном итоге решили переключиться на относительные размеры шрифта.

Оптимизация CSS: селекторы идентификаторов и другие мифы

Иван Чурич опубликовал на Sitepoint отличный пост, в котором задавался вопросом, действительно ли оптимизация наших селекторов CSS по-прежнему оказывает достаточно большое влияние, чтобы оправдать усилия. Короче, Нет. Вы гораздо лучше тратите свое время на отправку меньшего количества байтов по сети и избегаете операций, которые делают недействительным вычисленный стиль. Перепрошивка дорогая.

Однако это не означает, что вы должны сходить с ума. Будьте благоразумны, смотрите в будущее и стремитесь к тому, чтобы ваши селекторы были конкретными. Отличное чтение.

Вот три предстоящих изменения в JavaScript, которые вам понравятся

О, мальчик, это захватывающе. Необязательная цепочка? Попрощайтесь с написанием такого кода:

const streetName = data && data.user && data.user.address && data.user.address.streetName;

Предупреждайте заранее и не сходите с ума ;) Нулевое объединение, или оператор что-что(??), частичное приложение и, что не менее важно, оператор конвейера. Фантастическая статья Джастина Фуллера в блоге Free Code Camp.

Использование модулей JavaScript в Интернете

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

Эдди Османи и Матиас Байненс приходят на помощь в этой невероятно подробной статье о написании и использовании модулей в Интернете. Не удивляйтесь больше.

Известные релизы

Только ссылки пожалуйста

Сундук с инструментами

Цветная искра

Застряли на базовом цвете, нужно вдохновение? Colorspark — это бесплатное веб-приложение, которое автоматически генерирует цвета или цветовые градиенты. Как только вы нашли тот, который вам нравится, скопируйте CSS, и вы готовы к работе.

Попробовать

Браузерленд

Safari Technology Preview Release 60

  • Изменены анимации CSS, чтобы они имели приоритет над переходами CSS.
  • Исправлена ​​ошибка, из-за которой стиль фона CSS больше не влиял на текстовые поля, отображаемые изначально.
  • Изменен CSP для применения проверок до того, как блокировщик контента проверит сетевые нагрузки, чтобы соответствовать поведению при загрузке кэша.

Chrome 68 ~ выйдет 28 июля

  • Сокращение overflow теперь принимает два значения, что позволяет установить для overflow-x и overflow-y разные значения. Также доступно в Firefox и Opera, но пока нет сигналов от Edge или Safari.
  • Поддержка x в качестве единицы разрешения. По сути, это синоним существующего блока dppx, используемого для дисплеев с высоким разрешением. Также доступно в Firefox и Opera. Та же история с Edge и Safari.
  • Удалите префикс CSS «захват» и «захват» значений для свойства курсора.
  • Улучшенное управление кешем для сценариев Service Worker. Также будет поставляться в Opera. Уже поставляется в Firefox, находится в разработке в Edge, без сигналов от Safari.

Послушай

JSParty ~ WASM — это AWSM

Отличная дискуссия с массой дополнительной информации и реальными вопросами, на которые ответил Джей Фелпс. Из примечаний к шоу:

Кевин Болл и Суз Хинтон беседуют с Джеем Фелпсом о WASM; что это такое, как его использовать и как некоторые уже его используют.

Слушайте сейчас

HanselMinutes ~ C++ и монокультура браузера с Патрисией Аас из Вивальди

Отличный разговор с Патрицией Аас, разработчиком браузера Vivaldi, о гораздо большем, чем просто C++. Конечно, есть отличная информация об эволюции языка, но Патрисия также делится интересными моментами из истории браузеров и того, как некоторые функции стали такими, какие они есть.

Слушайте сейчас

Список изменений ~ Информатика без компьютера

В этом выпуске к ведущим присоединился основатель CS Unplugged Тим Белл. Я особенно увлечен тем, как открытый исходный код может расширить возможности людей и как концепции открытого исходного кода могут иметь далеко идущие последствия. Одним из таких направлений является образование. Мы прошли долгий путь со времен, когда получение образования было доступно только избранным, но мы можем добиться большего.

Использование таких инструментов не только делает обучение информатике более доступным, но и делает его более увлекательным и увлекательным. Это trifecta, который обязательно принесет плоды. Отличный эпизод и вдохновляющий проект.

Слушайте сейчас

Подкаст о веб-платформе ~ Инструменты модульного тестирования JS и лучшие практики

Присоединяйтесь к хостам, чтобы обсудить все, что касается модульного тестирования. Как и в случае с доступностью, это одна из тех частей кода, которой часто пренебрегают. Конечно, на это есть разные причины. Некоторые из них связаны со сложностью настройки рабочего стека, хотя в этом пройден долгий путь. И еще есть фактор времени. Когда функция X должна быть реализована, чаще всего время для написания тестов не было заложено во временной шкале. Послушайте, как Дэнни, Леон и Амаль делятся советами, как сдать тесты первоклассным гражданином.

Слушайте сейчас

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