Дайджест свежих материалов из мира фронтенда за последнюю неделю №307 (19 — 25 марта 2018)

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

Медиа

• Подкаст «Frontend Weekend» #45 – Евгений Фомин про Vue.js и о том, почему разработчики уходят из backend’а во frontend
• Подкаст «Пятиминутка React» #19 — TypeScript 20/80
• Подкаст «devschacht»: Ночной фронтенд #27 — И снова о статической типизации в JS
• Подкаст «Фронтенд Юность (18+)» «Как уйти из IT»
• «ALL YOUR HTML» #41: «ASCII анимация»
• MinskCSS Meetup #4 — 22 марта 2018

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

• Размер страницы и SEO – есть ли связь?
• Агрегатор материалов и последней информации по Progressive Web Apps
• Полное руководство по фоновым изображениям в шаблонах писем
• WAI-ARIA: темная сторона доступности

• Производительность:
  • Как сократить время загрузки сайта до двух секунд средствами Google Chrome
  • Насколько быстым является Amp на самом деле?
  • Как формат WebP поможет повысить вам веб-производительность

• Tools:
  • Уменьшение бандлов Lodash с помощью Webpack и Babel
  • imaging-heap — инструмент, позволяющий измерять эффективность отзывчивых изображений на различных размерах и соотножениях экрана
  • В статьях на MDN добавили наглядные интерактивные примеры
  • Полезные советы и трюки для Chrome DevTools

• Анимация:
  • Аддитивная анимация с помощью Web Animations API
  • Создание PathSlider — карусели с SVG элементами с помощью with JavaScript (часть 2)
  • Создаем эффект жидкости с помощью WebGL

CSS

• Вы начнете верстать на Grid Layout уже сегодня. Спорим?
• Как Gmail пришел к прекращению поддержки CSS анимации
• Super Mario World, созданный с помощью одних CSS градиентов — без JS, встроенных images/data URIs и внешних изображений (плюс совсем немного размерки HTML)
• graphql-css — быстрая библиотека CSS-in-GQL, которая конвертирует запросы GraphQL в стили для ваших компонентов
• CSS: плохие моменты (и как их избегать)

JavaScript

• Отладка Front-end: Console
• Гребаное разглагольствование о гребаном const vs гребаном let
• Нейронные сети с графическим ускорением в JavaScript
• Определение эмоций в JavaScript с помощью нейронных сетей
• Machine Learning-Driven Bundling. Будущее инструментарция JavaScript
• 5 ключевых концептов изучения d3.js и как и понять
• Я определенно, возможно, страдаю от стокгольмского синдрома, связанного с Javascript.
• Полное руководство по Apollo, инструментарии для GraphQL
• Ленивая загрузка модулей JavaScript с помощью ConditionerJS

• Теория:
  • Как работает JS: движки рендеринга веб-страниц и советы по оптимизации их производительности
  • История ES6-модулей
  • Элегантные паттерны современного JavaScript: Ice Factory
  • Асинхронные паттерны в JavaScript

• VueJS:
  • Vue.js Moscow Meetup #1, запись видео
  • Vue.js Cookbook — новый раздел официальной документации Vue с рецептами и примерами решений конкретных задач
  • 4 основые функции ES2015 для разработки с Vue.js
  • Vue CLI 3: переломный момент для разработки фронтенда
  • Основы GraphQL и практические примеры с Vue
  • Renderless компоненты во Vue.js
  • 7 секретных паттернов Vue, о которых консультанты не хотят, чтобы вы знали — доклад Chris Fritz

• React:
  • Сравнение основных JS библиотек анимации для использования в приложениях React
  • Добавляем контекст с помощью React
  • Состояние форм React с нуля
  • react-testing-library — простая утилита для тестирования React DOM, включающая лучшие практики тестирования

• Angular:
  • Архитектура приложения Angular. Используем NgModules
  • Введение в модули Angular — корневой модуль (Root Module)
  • Введение в Angular: что это и зачем вам нужно его использовать
  • All Things Angular: погружение в ключевые концепты Angular и горячие темы: Angular Labs, Angular Elements, Progressive Web Apps, Service Workers, AoT Compilation, UI Libraries и другое

• Libs & Plugins:
  • ScrollBooster — приятная библиотека для drag-to-scroll функционала

Браузеры

• План развития функциональности Firefox на 2018 год
• Доступен web-браузер Opera 52
• Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet
• В Chrome 66 будет доработан механизм блокирования автоматического воспроизведения видео
• Технические детали релиза Safari Technology Preview 52

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

• Как попасть в Google: инструкция по подготовке
• Symantec: В четвертом квартале 2017 года количество кибератак, использующих ресурсы систем для майнинга криптовалют, увеличилось в 85 раз
• Google Assistant научился совершать и запрашивать денежные переводы
• Netflix разработал собственный шрифт
• В публичных репозиториях пользователей GitHub обнаружено 4 миллиона уязвимостей
• «Доверие нарушено, мы должны это исправить». Цукерберг прокомментировал утечку данных 50 млн пользователей и рассказал о новых защитных мерах
• ОK Googlе: как поисковик решил победить Amazon

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

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