Дайджест свежих материалов из мира фронтенда за последнюю неделю №272 (17 — 23 июля 2017)

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

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

• CSSSR Garbage Collector #1: Еженедельная подборка ссылок из чатов CSSSR на интересные материалы.
• Разбираемся с Shadow DOM
• Измерение веб производительности; это довольно просто на самом деле
• Размышления по поводу HTTP/2 и бандлинга
• О нюансах использования Inline SVG на продакшене. Продолжение популярной статьи двухлетней давности
• Медиа:
  • HTML Шорты: Как прятать. display: none или visibility: hidden?
  • Подкаст «Frontend Weekend» FW #12: Ведущий «Пятиминутки React» про подкастинг и фреймворки
  • Подкаст «Пятиминутка React» #26: Preact Rocks!
  • Подкаст «Фронтёрки» #8: Шебанов, зависимые типы, ВК
  • Подкаст «Фронтенд Юность» #10: Как убивали JavaScript!

• AMP/PWA:
  • Как сделать Progressive Web Apps: руководство новичка
  • Комьюнити выбрало официальный неофициальный логотип для Progressive Web Apps
  • Подробное руководство для новичков по PWA
  • Gulp и верстка простой AMP страницы, стрим Юрия Артюха ALL YOUR HTML #8
  • Как использовать AMP в WordPress
  • Как Accelerated Mobile Pages (AMP) могут улучшить вам SEO

• Инструменты:
  • WebStorm 2017.2 – что нового в поддержке JavaScript, TypeScript, Angular и Sass и работе с ESLint, Karma и Mocha
  • npm link на стероидах
  • Webpack: основы настройки проекта на JavaScript и Sass
  • Как использовать Polymer Webpack
  • bundle-buddy — инструмент, который поможет найти дубликаты в ваших бандлах

• Практика:
  • Создание прогрессивного веб-приложения «Тренды Git»: Концепты и Service Workers, Кеширование и Оффлайн
  • Создание графики на HTML Canvas: новый бесплатный курс на egghead.io
  • Из грязи в князи, создание WebVR интерактива с помощью Babylon.js для всех платформ
  • Создание вращающейся 3D карусели на CSS и JavaScript
  • GreenSock для новичков (часть 2): GSAP’s Timeline

• Эффектный веб:
  • Слайдер изображений на CSS с использованием шаблонов SVG
  • Адаптивный анимированный дом на CSS
  • LEGO Loader (SVG анимация)

CSS

• CSS — это не чёрная магия
• Как создать эффект матового стекла на чистом CSS?
• Let's Get Critical: минимизация блокирующего рендер CSS с помощью Webpack
• Использование CSS для определения и подсчета простых чисел
• Отключаем возможность зума в Google Maps iframe
• Шрифты:
  • 4 техники для задания отзывчивых размеров шрифта с помощью
  • RFS: миксин, автоматизирующий использование отзывчивой типографики
  • Что для веб-разработчиков означают вариабельные шрифты?

• CSS Grid Layout:
  • Коллекция интересных фактов о CSS Grid Layout
  • Слайдшоу на CSS Grid Layout
  • Rachel Andrew о причинах возникновения спецификации гридов и о проблемах, которые они решают
  • display:contents — это не CSS Grid Layout subgrid

JavaScript

• Дели — сокращай, или как мы делали мобильный 2ГИС Онлайн
• Реактивные интерфейсы на нативном JavaScript — Часть 1: Чистый функциональный стиль
• Нейросети с нуля для JavaScript разработчиков (Часть 1: Перцептрон)
• Состояние JavaScript в 2017. Ежегодный глобальный опрос
• Десять вещей, которые серьезный JavaScript разработчик должен изучить
• Скрытые сообщения в именах свойств в JavaScript
• Современный стек разработки фронтенда. Статья на linux.com о революции в JS разработке за последние несколько лет
• 6 нативных методов манипуляции DOM, вдохновленные jQuery
• Инструменты Javascript для end-to-end тестирования веб приложений
• Состояние интернационализации в JavaScript
• Angular vs React vs Vue
• ES2015+:
  • Tiny-ES6-Notebook
  • Фабричные функции JavaScript с ES6+

• VueJS:
  • CSSSR Live: Мастер-класс по Vue.js. Приглашенный спикер Борис Окунский проводит двухчасовой мастер-класс для разработчиков CSSSR
  • CSSSR Pair Coding #1: Делаем учебный проект «Каталог фильмов» на Vue.js
  • Начинаем работать с Vue.js
  • Flue. Еще одна flux библиотека
  • Как (безопасно) использовать jQuery плагины с Vue.js
  • История нашей прогрессивной миграции с Backbone на Vue.js
  • Как работать с Computed Properties в VueJS?
  • Как использовать вотчеры Vue.js для асинхронных обновлений?
  • Vue.js API в терминале
  • Vue.js: прогрессивный Javascript фреймворк. Доклад Vito Huang на Bristol JS в июне 2017

• React:
  • В чём сила Redux?
  • Пользователи React подписали петицию к Facebook для релицензирования React.js. Петиция по релицензированию React была передана техническим директорам Facebook
  • Восемь вещей, которые необходимо изучить в React перед использованием Redux
  • React Starter Kit: быстрый стартовый шаблон, состоящий из React.js, Babel, PostCSS, Webpack
  • Введение в Hoodie и React
  • Как создать клон Reddit с использованием React и Firebase
  • Как использовать React, ES6, Yarn и Webpack для создания WordPress плагина
  • Как изучать React: план из пяти шагов

• Angular:
  • Angular 4  —  Third Party API’s
  • Lazy loading: разделение кода NgModules с Webpack
  • Совмещаем формы Angular с @ngrx/store

• Libs & Plugins:
  • Popmotion — маленький кроссплатформенный JavaScript движок для работы с анимацией
  • RE:DOM — маленькая библиотека, добавляющая хелперы для создания DOM элементов и поддержки синхронизации с данными.
  • mesh — визуализация данных и редактирование кода JavaScript в табличном интерфейсе
  • wade — очень быстрая библиотека для поиска
  • GPU.JS — JavaScript, ускоренный GPU
  • tiza — стилизация вывода данных в консоль

Браузеры

• Расширение Particle для Chrome сменило владельца и тут же стало вредоносным
• Пересмотр рыночной доли Firefox. Почему создание лучшего браузера не приводит к росту популярности
• Новый Firefox и огромное количество табов
• Превью Storage API в Firefox Nightly

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

• Рейтинг языков программирования 2017 года от издания IEEE Spectrum
• Что такое экономика токенов, или Почему блокчейн пожирает мир
• Mozilla развивает свою систему распознавания речи
• YouTube закрывает сервис редактирования видео. Его никто не использует
• Прибыль Microsoft превысила ожидания за счёт успехов в области облачных вычислений
• Google предлагает всем желающим виртуально прогуляться по МКС с помощью сервиса Street View
• Google добавила персонализированную ленту контента в своё мобильное приложение
• Как нам правильно купить шрифты, чтобы потом не было проблем с лицензиями?
• Инструменты сводят с ума
• Школы vs. искусственный интеллект. Почему Wolfram Alpha стоит отдать должное
• Google Glass возвращаются
• Представлен новый интерфейс GitLab

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

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

Автор: Zfort Group

Источник