Дайджест свежих материалов из мира фронтенда за последнюю неделю №337 (29 октября — 4 ноября 2018)

Медиа

• Подкаст «Веб-стандарты», Выпуск №145: Тёмный режим в Safari, WebAssembly в Chrome, что нового в CSS, сортировка CSS-свойств, вариативные шрифты с фолбэком, почему у дизайнеров не получается, хуки, или React по-новому.
• Подкаст «Frontend Weekend» #77 – Александр Амосов о том, почему стоит начать работать с 3D в браузере
• «Девшахта — подкаст»: #55: Быть тимлидом
• Подкаст «CSSSR» Новости 512 — Выпуск №27 (29.10 — 04.11)
• Видеоблог Вадима Макеева №8. Кто такие дивелоперы, ручной SVG и волнительное подчёркивание
• DevShow от loftblog #86: PostCSS, мусор в JavaScript, кэширование

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

• Создание вашего собственного дисфункционального SPA за пять простых шагов
• Tags to DOM. О том, как HTML теги трансформируются в кирпичики, которые формируют то, что мы видим на экране
• Важность использования стандартов в командах разработчиков
• Как я занимаюсь полноценной веб-разработкой со своего iPad Pro

Производительность:

• Как нам удалось ускорить мобильную версию сайта Carousell в 3 раза
• Производительность как объект первого класса — Раздел 1: непрерывное измерение и инструментарий
• 2019 — год под знаком Page Speed. Вы готовы?
• Три вида тестирования производительности

Инструменты:

• Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода
• 5 способов, которыми DevTools сделал мою жизнь проще
• Введение во FuseBox, альтернативу Webpack
• Релиз Storybook 4.0, интерактивного UI компонента для разработки и тестирования React, React Native, Vue, Angular и Ember

Accessibility:

• Пандус для сайта — доклад Ивана Бакаидова на DevFest Moscow
• Введение в веб-доступность, которую я хотел бы иметь
• Разрушение пяти мифов цифровой доступности

CSS

• Учим CSS Grid за 5 минут
• Имплементация вариативного шрифта с веб-шрифтовым фоллбеком
• Рабочая группа CSS в TPAC: что нового в CSS?
• О переключении с HEX & RGB на HSL
• Как организовать ваш CSS с помощью модульной архитектуры (OOCSS, BEM, SMACSS)
• Как писать действительно ужасный CSS
• Простое именование в Grid Area
• Анимация превью-изображений в гридах

JavaScript

• Кротовые норы в JavaScript
• Рефакторинг в NodeJS с помощью функций высшего порядка
• Google запретит вход в учетную запись при отключенном в браузере JavaScript
• GraphQL — плохое и хорошее
• Ориентирование в жутком мире JavaScript
• Персональный обзор инструментов для автоматического тестирования в мире JavaScript
• Полный современный справочник по JavaScript

Теория:

• Функции высшего порядка в JavaScript
• Почему функция map не работает с некоторыми массивами в JavaScript и что с этим делать
• 4 использования Array.map() в JavaScript, о которых вы должны знать
• Эволюция асинхронного JavaScript: от коллбеков к промисам и Async/Await
• Шаблоны проектирования в JavaScript
• Копирование объектов в Javascript

VueJS:

• Демистификация Vuex — контейнер состояний для for Vue
• Контролируемые голосом веб-визуализации с помощью Vue.js и Machine Learning
• Создание плагина для WordPress с помощью Vue
• Аргументы для переключения вашей компании на Vue
• Создания SPA с помощью Go и Vue
• Умный способ вызовов Vue API
• Full Stack Radio 99.5: Sébastien Chopin — Building Universal Vue.js Apps with Nuxt.js

React:

• Что и как тестировать с помощью Jest и Enzyme. Полная инструкция по тестированию React-компонентов
• Применение принципов SOLID при разработке React-приложений
• Разбираемся c React Hooks , статья Дена Абрамова
• React hooks: никакой магии, просто массивы
• Все что вам нужно знать о React Hooks
• Коллекция React Hooks

- Разные способы управления состояниями в React

• Отношения любви и ненависти между React Router и React Components
• Create React App 2.0: что нового?
• Компоненты Lazy-loading в React 16.6
• Redux в двух словах для React-разработчиков (хинт: это не сложно)

Angular:

• Изучение Angular 6 для построения full-stack приложений
• Что нового в Angular 7.0 и как вы можете обновиться
• Шаблоны использования GreenSock в Angular

- Урок по созданию простого PWA с помощью Angular и Lighthouse — клона Hacker News

Libs & Plugins:

• PWA Install Prompt
• Введение в plotly.js — опенсорсную графическую библиотеку
• simple-keyboard — виртуальная клавиатура для Javascript, совместимая с вашим проектами на ES6, React, Vue, Angular или jQuery
• ervy: графики в терминалах

Браузеры

• Firefox 63, технический обзор от Марата Таналина
• В Firefox 65 появится поддержка формата изображений WebP
• Доступен компактный мобильный браузер Firefox Lite 1.0.0
• Новые системы машинного обучения от Fаcebook и Google. Код для раскрашивания чёрно-белых фотографий
• WebAssembly Threads готовы к пробе в Chrome 70
• Уроки после поражения: удаление старого отладчика из Firefox

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

• Подборка свежих курсов для айтишников от известных университетов
• Google запускает reCAPTCHA v3, которая автоматически распознает плохой трафик
• Facebook разрабатывает ИИ, который облегчит просмотр видео людям с ограниченными возможностями
• Было или не было: обзор расследования Bloomberg о китайских шпионских чипах
• Биткоину 10 лет: чего ждать дальше
• «Облачные профессии будущего»: чем займутся IoT-архитектор и AI-программист
• Основатель ABBYY Давид Ян — о сервисе Yva для анализа поведения сотрудников, опасностях ИИ и ролевых моделях
• Хронология развития технологии: человекоподобные роботы
• Кому всё это нужно: реакция разработчиков и дизайнеров на новые устройства от Apple

Спасибо за внимание и до новых встреч!