Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

    Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Занимательное

---

Медиа

• Подкаст «Frontend Weekend» #36 – Людмила Мжачих про MoscowCSS, Coding Girls и Лию Веру
• Подкаст «Веб-стандарты», Выпуск №104: Уточнение про селектор matches, гриды для бизнеса, нейровёрстка, или как машины вас не заменят, согласие по main, общие JS-модули, шортики и уважение
• Подкаст «Фронтенд Юность (18+)» #34 Программисты — зажравшиеся мажоры современности
• Подкаст «devschacht»: Ночной фронтенд #18?—?PiterJS 21 и Я.Субботник в Нижнем Новгороде
• «ALL YOUR HTML» #32: «Волнистые картинки на PIXI.JS»
• Loftblog Devshow: «React.js — Советы от профи». Создатель подкаста «Пятиминутка React» Пётр Мязин рассказывает про React и даёт полезные советы новичкам

Веб-разработка

• Веб-компоненты: обзор и использование в продакшне
• Bootstrap 4 вышел из беты, обсуждение на reddit
• Как создать Living Style Guide

• Производительность:
  • Как ускорить загрузку сайта: 7 советов по оптимизации для начинающих
  • Даже если ваш сайт не ориентируется на развивающиеся рынки, это не означает, что его не надо оптимизировать
  • Скорость загрузки станиц будет влиять на результаты поисковой выдачи Google (C июля 2018)
  • Как оптимизировать CSS и JS для ускорения сайта. Обзор стандартных практик
  • Измеряем производительность AMP
  • Ускоряем сайт с помощью preconnect подсказок
  • Speedometer 2.0 — новый тест производительности JS в браузерх, созданный при участии команд WebKit и Chromium
  

• Инструменты:
  • Инструменты: Gulp — новый выпуск на канале .getInstance
  • hey meta — быстрая проверка и генерация социальных мета-тегов
  • Вышел Puppeteer 1.0: Chrome 65, JS/CSS code coverage API, кастомизация PDF, поддержка XPath, доступ к протоколу devtools
  • Сохраняем скорость webpack: руководство для повышения производительности
  

• Accessibility:
  • Список списков со ссылками на материалы и ресурсы, посвященные доступности
  • Chrome DevTools предоставляет отличный способ определить и исправить соотношения цветового контраста для соответствия стандартам доступности. Color picker — это практически все, что вам надо
  • Начинаем работать с доступностью во Vue. Как работает vue, использование ARIA, динамическая настройка заголовков с помощью vue-router и управление фокусом с помощью директив
  • Пять вариантов, в которых искуственный интеллект может изменить веб-доступность
  • В US вступил в силу новый федеральный закон, обязывающий быть доступными все государственные сайты (Section 508 Compliance)
  

• Анимация:
  • 18 креативных примеров CSS анимации
  • Simplex Flower Generator — Three.js/WebGL
  • Интересный слайдшоу-эффект с увеличением силуета
  • Canvas-симуляция эффекта желе на javascript/HTML5
  

CSS

• Недокументированные приемы CSS
• БЭМ для начинающих. Очевидные и неочевидные вопросы верстки
• 5 интересных свойств HTML и CSS, которые стоит ожидать в 2018
• Насколько большой этот прямоугольник? Понимание размеров в CSS Layout
• Изучаем CSS Grid Layout с помощью Swiss
• Layout Land — новое шоу на YouTube от Jen Simmons, посвященное Grid Layout
• Соглашения наименования CSS, которые сохранят вам часы отладки
• Нечестные таблицы стилей. Пример трекинга/аналитики сайта с помощью чистого CSS без JavaScript
• CSS Paint API
• CSS Grid + CSS Multi-Columns = <3
• cssgrid.io — бесплатный курс по CSS Grid из 25-ти видео от Wes Bos

JavaScript

• JavaScript: прогнозы трендов на 2018 год по результатам международного опроса
• JavaScript и ужасы мутаций
• Машины состояний и разработка веб-приложений
• Полное руководство по фреймворкам в JavaScript
• Релиз jQuery 3.3.0 – несколько новых функций и целый букет deprecations
• Итак, вы хотите использовать ES6 модули
• Полное руководство по развертыванию JavaScript приложений, часть 2: Single Page Applications, Logging, SSL

• VueJS:
  • Базовый Vue — открытые лекции по курсу Vue от Javascript.Ninja: Vue: начало, Реактивность
  • Что нового в Vue Devtools 4.0
  • Лучшие практики по аутентификации для Vue
  • Как создать ваш первый компонент Vue.js
  • Создание бессерверной формы чекаута на Vue.js: Часть 1 — Настройка и тестирование, Часть 2 — Stripe Function и хостинг, Чаcть 3 — приложение компонент чекаута, Часть 4 — настройка компонента чекаута
  

• React:
  • Как использовать Webpack с React: полное руководство
  • Разделение кода с помощью React и React Router
  • Продвигаем производительность React
  • Когда использовать (а когда нет) Redux
  • Часто задаваемые вопросы React.js
  • Введение в After.js — фреймворк в стиле Next.js для рендерящихся на сервере приложений React, созданных с помощью React Router 4
  • Кодим при создании дизайна —?как мы создали инструмент для экспорта прототипов React из Sketch
  

• Angular:
  • Настройка Prettier на Angular CLI Project
  • Angular CSS классы с NgClass
  • Познаем модуль в Angular 2: @NgModule
  

• Libs & Plugins:
  • json-dry — позволяет превращать в JSON и распарсивать объекты, содержащие круговые ссылки, даты, регулярки
  • Bulb: библиотека для реактивного программирования в JavaScript
  • jarvis — очень продвинутая браузерная приборная доска для Webpack
  • webshot-factory — масштабируемое снятие скриншотов в headless Chrome
  

Браузеры

• Firefox 58 будет оснащен новым двухуровневым компилятором
• Новые веб-технологии в Mozilla Firefox будут доступны только через HTTPS
• Улучшение DevTools Console в Windows 10 Fall Creators Update
• Что нового в DevTools (Chrome 65)

Занимательное

• Google и Mozilla отправят JPEG «на пенсию»
• Google запустила на Coursera серию курсов по базовым понятиям IT-сферы
• Самые ожидаемые научные эксперименты ближайшего десятилетия
• Мистер Amazon выходит в свет: как Джефф Безос из тихого продавца книг превратился в рок-звезду от бизнеса
• Японские ученые создали нейросеть, превращающую мысленные образы в изображения
• Google анонсировала AutoML – сервис создания нейросетей для новичков
• Intel признался, что проблемы с частыми перезагрузками из-за ошибок в заплатках есть не только в CPU Broadwell и Haswell, но также у предшественников и преемников
• Искусственные интеллекты от Alibaba Group и Microsoft впервые обошли человека в тесте на обработку информации

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.