Выпуск этой недели включает в себя дополнительные новые встроенные возможности JavaScript. Мы видим несколько замечательных применений нового синтаксиса литералов шаблонов, глубоко погружаемся в API IntersectionObserver и видим все новые возможности, которые теперь официально являются частью ES2018.
Конечно, попутно мы также расскажем о некоторых интересных функциях CSS, услышим несколько интересных новостей об iOS/Safari и получим очень крутое глубокое погружение в то, каково это — использовать Интернет через программу чтения с экрана.
Счастливой пятницы!
KBall от ZenDev
P.S. Я стараюсь не заниматься саморекламой в этом информационном бюллетене, но недавно я написал пост для людей из LogRocket, рассказывающий о ландшафте фронтенд-разработки, который может вас заинтересовать: Растущая природа усложнения фронтенда
CSS и SCSS
CSS Grid + CSS Multi-Columns = ♥
Мы много слышим о CSS Grid, но не так много слышали о макете CSS Multi Columns, несмотря на то, что он чрезвычайно эффективен для решения ряда проблем с макетом столбцов и очень широко поддерживается браузерами. В этой статье мы быстро рассмотрим, на что способны столбцы, а затем углубимся в кое-что действительно интересное — как вы можете комбинировать столбцы с сеткой для создания супермощных адаптивных макетов с помощью всего нескольких строк CSS.
Теперь это КРУТО! Этот новый инструмент с открытым исходным кодом, выпущенный IBM, принимает в качестве входных данных высокоуровневую спецификацию сетки — точки останова, количество столбцов, размеры полей, количество строк и т. д. — и выводит все, что вам нужно для использования этой сетки в вашем проекте. Он не только выводит SCSS на основе CSS Grid, но и резервный SCSS на основе Flexbox и файл Sketch с предварительно созданными монтажными областями и настройками сетки для ваших дизайнеров! Вы можете использовать его как одноразовый генератор сетки или интегрировать его прямо в свою систему сборки. Очень круто!
Я немного скептически отношусь к таким подходам, как атомарный CSS, детище «утилитарного CSS», но я должен признать, что в этой статье есть несколько очень сильных моментов. В частности, идея начать с небольших, функционально компонуемых классов и работать на их основе имеет для меня массу смысла.
Один файл, множество опций: использование вариативных шрифтов в Интернете
Отличное подробное руководство о том, как использовать новую функцию вариативных шрифтов для управления несколькими функциями ваших шрифтов, используя только CSS. Я в восторге от этого — поддержка браузеров начинает появляться (да, Chrome и Safari, Edge и Firefox имеют предварительные версии), и это сделает шрифты в Интернете намного более мощными (и легкими!)
CSS Scroll Snap: что это такое? Нам это нужно?
В нижней части спектра поддержки браузеров ознакомьтесь с этой новой функцией CSS, которая была только что выпущена в качестве рекомендации кандидата W3C. Чистая прокрутка CSS встает на место? Есть оооочень много строк javascript, которые можно было бы заменить… :D
JavaScript
Stimulus 1.0: скромный JavaScript-фреймворк для HTML, который у вас уже есть
От создателей фреймворка приложений Ruby on Rails происходит отступление от тенденции к более сложным фреймворкам JavaScript, владеющим все большей и большей частью DOM. Используя заметно отличающийся подход от инструментов полного владения, таких как Angular и React, Stimulus стремится предоставить больше структуры для взаимодействия на странице, чем такие инструменты, как jQuery, при этом постепенно улучшая существующий HTML, а не создавая сам HTML. Определенно интересно для тех, кто тоскует по дням чисто серверных веб-приложений, но при этом хочет добавить в свои приложения современные функции пользовательского интерфейса.
Шаблоны HTML с ванильным JavaScript ES2015 Template Literals
Я большой поклонник библиотек шаблонов, таких как Handlebars, даже если вам не нужна мощь полноценного JavaScript Framework. Эта статья представляет собой захватывающий взгляд на то, как новый синтаксис литерала шаблона в ES2015 позволяет вам получить большую часть или всю мощь чего-то вроде Handlebars без размера этой библиотеки. Есть даже такие библиотеки, как lit-html, которые оборачивают эту новую силу, добавляя дополнительные гарантии безопасности и повторный рендеринг на основе различий, при этом веся всего лишь крошечные 2 КБ.
Теперь вы видите меня: как отложить, отложить загрузку и действовать с IntersectionObserver
Немного длинновато, но оно того стоит, даже если вы просто пропустите и прочитаете последний раздел. Это показывает, как вы можете реализовать ленивую загрузку ресурсов и ленивую реализацию JavaScript всего за несколько строк кода, не беспокоясь о каких-либо сложных обработчиках прокрутки, позиционировании или чем-то еще. Очень круто!
🚀webpack 4 beta — попробуйте сегодня!🚀
Следующий крупный выпуск webpack не за горами, а бета-версия доступна уже сегодня. Ознакомьтесь с некоторыми крупными обновлениями — нулевой конфигурацией для простых проектов, встряхиванием дерева JSON, поддержкой веб-сборки и многим другим!
JavaScript: что нового в ECMAScript 2018 (ES2018)?
TC39 только что определил, какие новые функции официально представлены в ES2018, и там есть несколько хороших. Я уже использую объект rest/spread во всех своих проектах (любезно предоставленный Babel) и едва могу вспомнить, как я жил без него. Затем вы добавляете async/await, более мощные регулярные выражения, и, черт возьми, JavaScript — забавное место в наши дни. :)
Другое
Хотя он по-прежнему доступен только в бета-версиях iOS 11.1 и macOS 10.13.4 для разработчиков, журнал изменений для следующей версии Safari готов, и это меня очень взволновало. Самым большим пунктом в списке является поддержка API веб-платежей, что означает, что мобильные веб-сайты смогут позволить людям расплачиваться с помощью Apple Pay, но есть также поддержка Service Workers (PWA на iOS, вот и мы!) и многое другое. .
PWA приходят в iOS 11.3: Купертино, у нас проблема
Какой бы захватывающей ни была поддержка PWA на iOS, это не все радуги и солнце. Есть несколько существенных отличий от того, как ведут себя PWA на Android, а также некоторые проблемы и недостатки. Прочтите эту статью, чтобы понять, в чем заключаются подводные камни и что искать.
Часть 2: Как помешать мне собирать номера кредитных карт и пароли с вашего сайта
После пугающе правдоподобного поста, который стал смехотворно вирусным, рассказывая о том, как сторонние зависимости могут незаметно и почти незаметно собирать конфиденциальную информацию с вашего сайта, разработчик Дэвид Гилбертсон рассказывает о некоторых разумных способах защитить себя и информацию вашего клиента без необходимости читать источник. каждого пакета npm, который вы когда-либо использовали на своем сайте.
Повесть о двух комнатах: Понимание навигации скринридера
Эта статья невероятно открыла мне глаза. Хотя я давно интересовался доступностью, концептуально я всегда начинаю с навигации с помощью клавиатуры. Мне нравится использовать клавиатуру для навигации (я кодер, я живу в своем терминале и т. д.), и поэтому перевод ее в Интернет кажется естественным. Но эта статья дала мне совершенно иной взгляд на тему доступности, когда речь идет о видимости — на что похож опыт работы в Интернете для людей с нарушениями зрения. Ух ты. Обязательно идите читать.
Счастливой пятницы!
Вам нравится этот информационный бюллетень? Получите его прямо в свой почтовый ящик! Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, уроки и анонсы по CSS/SCSS, JavaScript, а также множество других замечательных Front-end новостей — подпишитесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на zendev.com 2 февраля 2018 г.
