Надеюсь, у вас была отличная неделя! Прошедшие выходные были сумасшедшими в мире Vue.js, так как недавний RFC (фактически ссылка на который есть в нашем информационном бюллетене от 14 июня) вызвал огромное количество споров и возражений. Ниже приведены несколько статей, в которых более подробно рассматривается RFC, и этого было достаточно, чтобы зажечь тему, поэтому у нас также есть несколько дополнительных статей о Vue.
Как всегда, есть также регулярная помощь с отличными статьями CSS и другими веб-ориентированными статьями. Наслаждаться!
Лучший,
KBall от ZenDev
CSS и SCSS
Построение расписания конференции с помощью CSS Grid
Это блестяще. Мне нравится, как он подчеркивает, как работает сетка с регулярными инкрементными единицами (в данном случае с шагом в полчаса), но затем добавляет именованные линии сетки, чтобы сделать фактические стили чрезвычайно читабельными. Я не знаю, сможете ли вы получить более семантический CSS, чем grid-row: time-0900 / time-1030; grid-column: track-1;.
CSS в масштабе: внешний вид и свойства макета
Это очень важная концепция; Я также слышал, что это разделение описывается как «графические» и «структурные» свойства, но независимо от того, как вы это называете, понимая разницу между свойствами, влияющими на расположение страницы, и теми, которые просто применяют «блики» или изменяют визуальные свойства страницы. точный предмет, которым вы манипулируете, является ключевой концепцией.
CJSS: веб-фреймворк на основе CSS
Это весело. Вы слышали о CSS-in-JS? Это JS-in-CSS. Не говоря уже о HTML-in-CSS. Это среда разработки, которая использует ваш файл CSS в качестве источника правды и генерирует из него файлы HTML и JavaScript. Не для серьезного использования, но очень интересно и заставляет задуматься.
Портрет только на чистом CSS — Исла
Взгляните на этот портрет, полностью созданный с помощью HTML и CSS, в категории Сумасшедший святой дым. Автор отмечает, что это заняло у него примерно 100 часов, и включает ускоренное видео, показывающее часть процесса. Обязательно кликните на это видео… на самом деле, оно настолько хорошо, что я вставлю ссылку прямо здесь.
JavaScript
Написанный в ответ на серию крайне негативных отзывов о недавнем RFC функционального API Vue.js, этот документ является одновременно опровержением негатива и набором примеров на основе кода, показывающих, как новый API сделает код более чистым.
3 ключевых вывода из нового функционального API Vue RFC
(Предупреждение о предвзятости — я написал это) Мой собственный взгляд на функциональный API Vue.js RFC с акцентом на то, что он может рассказать нам о будущем фронтенд-разработки. Здесь есть масса ценных и позитивных вещей, которые продвигают сеть вперед.
Vue без просмотра — введение в компоненты без рендеринга
Интересный взгляд на использование компонентов как способ разделения логики и функциональности, не связанной напрямую с шаблонами рендеринга. Хотя лично я не большой поклонник этого примера, я думаю, что этот подход очень ценен. Ситуация, которая имеет для меня гораздо больше смысла при использовании этого подхода, — это создание компонентов, которые взаимодействуют с API-интерфейсами, такими как API-интерфейсы карт, как показано в этом докладе на VueConf.US 2018.
10 вещей, которые вы должны знать, прежде чем писать свой следующий компонент Vue.js
Полный список полезных советов, с которыми вы, возможно, не сталкивались, если вы новичок в Vue.js. Ни один из них не является потрясающим, но все они полезны.
Забудьте о жизненном цикле компонентов и начните мыслить эффектами
Отличное описание того, как Hooks API ведет нас от императивного стиля реализации побочных эффектов («Делай x при монтировании, делай y при размонтировании») к декларативному стилю реализации побочных эффектов.
Другое
Визуализировать язвительные веб-комментарии в Comic Sans
Это абсолютно восхитительно, и хотя ему уже пару недель, я думаю, что со всем негативом, который витал вокруг на прошлой неделе, стоит посмотреть на такие способы, чтобы облегчить ситуацию.
Привлечение сервисных работников в поиск Google
Увлекательный кейс, в котором рассматриваются все проблемы, возникающие и преодолеваемые при внедрении сервис-воркеров в поиске Google. Возможности поиска Google, пожалуй, самые чувствительные к производительности страницы на планете, загружаемые более 63 000 раз В СЕКУНДУ, поэтому их проблемы довольно уникальны, но некоторые из уроков, которые они извлекли, широко применимы.
Самый простой способ №1 ускорить медленный сайт
Это определенно какой-то низко висящий фрукт, но у меня есть сайты, где я не сделал этого должным образом. Рассматриваемый метод? Оптимизация изображения! В статье представлены некоторые данные о том, насколько она распространена, масштаб проблемы и некоторые рекомендации о том, что вы можете сделать для ее решения.
Внедрение буквицы последовательно в Интернете поразительно сложно. Я помню, как PR в ZURB Foundation пытался справиться с этим, получил более 100 комментариев, несколько версий и итераций… и до сих пор не был объединен. В этой статье рассматриваются некоторые проблемы, а также различные подходы и решения, к которым в итоге пришел Vox Media.
5 ключей к доступной веб-типографике
Отличная статья об элементах, необходимых для того, чтобы типографика стала доступной в сети. Как человек, который просматривает веб-страницы с помощью стандартных веб-браузеров, но имеет довольно плохое зрение, я очень ценю советы, позволяющие изменять размер типографики в соответствии с предпочтениями пользователя и поддерживать фактическую наблюдаемую контрастность на высоком уровне.
Счастливой пятницы!
Хотите получать это как информационный бюллетень прямо на ваш почтовый ящик? Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, уроки и анонсы по CSS/SCSS, JavaScript, а также множество других замечательных Front-end новостей — подпишитесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на https://zendev.com 28 июня 2019 г.
