На этой неделе Friday Frontend предлагает дополнительную порцию типографского совершенства. Большая часть инноваций, происходящих здесь, все еще находится на ранних стадиях, но от свойства font-display до вариативных шрифтов будущее типографики в Интернете СУПЕР ЗАХВАТЫВАЕТ.
Также есть несколько отличных руководств по CSS, полезные советы по React и Vue, статья по основам JS и CSS и многое другое. Наслаждаться!
Счастливой пятницы!
KBall от ZenDev
CSS и SCSS
Отображение шрифтов CSS: будущее рендеринга шрифтов в Интернете
Погрузитесь в супер крутое новое свойство CSS, позволяющее управлять тем, как отображается типографика, пока файлы шрифтов все еще загружаются. Конечно, он пока недоступен во многих браузерах, но представьте, как это повлияет на нашу способность надежно использовать пользовательские шрифты. Я в предвкушении!
Реализация сворачиваемого элемента на чистом CSS
Хорошее пошаговое руководство с использованием «взлома флажка» (реализация изменений состояния с помощью css, нацеленного на псевдоселектор :checked) для реализации чистого CSS Collapsible. Особенно полезно, если вы когда-нибудь захотите реализовать интерактивные электронные письма в формате HTML — среду, в которой нет JavaScript!
Подвохи и камни преткновения CSS Grid
Отличная статья Рэйчел Эндрю (мысленно я думаю о ней как о «богине сетки», она, вероятно, знает о CSS Grid больше, чем кто-либо в мире), в ней рассматриваются многие концептуальные скачки и различия в мышлении в CSS Grid. по сравнению со всеми другими методами веб-макета ранее.
Крис Койер (из CSS Tricks & Codepen) записал скринкаст своего выступления о 4 замечательных свойствах CSS. Мне посчастливилось увидеть это выступление в прямом эфире на Web Unleashed, оно стоит потраченного на его время времени, оно расширит ваше представление о возможностях CSS и вернет вас в старые добрые времена с некоторыми замечательными «Они могут быть». Отсылки к гигантам. :D
Как нарисовать свое лицо в CSS
Приятное, причудливое пошаговое руководство о том, как перевести дизайн лица иллюстратора в чистый HTML и CSS.
JavaScript
Отличный краткий обзор всех новых возможностей последней версии React. Как специалист по HTML-структурам, меня особенно радует возможность рендеринга массивов элементов без обёртки!
8 ключевых решений для компонентов React
Отличное руководство по многим ключевым решениям, чтобы ваша команда была на одной волне с приложением React. И если вы новичок в React, это также отличное пошаговое руководство по темам, которые нужно изучить, чтобы получить хорошее представление о React.
Ознакомление со слотами Vue.js с ограниченной областью действия
Концепция слотов является ключом к элегантному созданию повторно используемых, настраиваемых компонентов для контента в Vue. Слоты с ограниченной областью действия позволяют вывести эти компоненты на новый уровень, передавая данные от дочернего элемента к родительскому для использования в шаблонах, что позволяет создавать компоненты на более высоком уровне абстракции.
Фреймворки для тестирования Javascript: лучшее для тестирования кода JS
Мегалист всех различных фреймворков для тестирования JavaScript с некоторой информацией о каждом. Если вы уже используете фреймворк, не беспокойтесь об этом, но если вы пытаетесь выяснить, какой должна быть хорошая тестовая инфраструктура, это отличный ресурс.
Как использовать селекторы jQuery и CSS селекторы и основы их работы
Со всем упором на продвинутые фреймворки JavaScript может быть легко пропустить основы и упустить основы. Для тех, кто создает менее сложные сайты и приложения, хорошее понимание CSS, JavaScript и jQuery может помочь вам в этом.
Другое
WebVR для всех — это то, как спроектировать и развить опыт.
Отличное практическое руководство, которое поможет вам быстро начать использовать WebVR с минимальными предварительными знаниями.
Что нужно знать о вариативных шрифтах
Я влюбился в идею вариативных шрифтов после того, как посетил доклад о них на Web Unleashed — эти вещи могут радикально изменить нашу способность использовать шрифты в Интернете, позволяя нам реализовать невероятные вариации без затрат на производительность, связанных с включением десятки шрифтов. Обязательно проверьте их!
Пятиминутное руководство по лучшей типографике
Отличное визуальное пошаговое руководство по типографике, которое поможет вам в голове сделать, как говорится в статье, «красивую группу букв, а не группу красивых букв».
Отличное подробное пошаговое руководство по различным имеющимся в вашем распоряжении методам создания адаптивных изображений для вашего сайта или приложения.
Стратегия загрузки шрифтов eBay
В нашей вводной статье мы говорили о том, как свойство font-display позволит нам контролировать загрузку шрифтов в будущем — вот подробное пошаговое руководство о том, как eBay обрабатывает это сегодня, чтобы отправлять пользовательские шрифты без FOUT (вспышка нестилизованного текста) или FOIT (вспышка невидимого текста).
Счастливой пятницы!
Вам нравится этот информационный бюллетень? Получите его прямо в свой почтовый ящик! Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, уроки и анонсы по CSS/SCSS, JavaScript, а также множество других замечательных Front-end новостей — подпишитесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на zendev.com 6 октября 2017 г.
