Frontend дайджест #17: Инструменты Create React App и Progressive Web Apps, что нового в Chrome 52, изучаем TypeScript за 30 минут

В выпуске: уменьшаем время загрузки веб-приложений, исследуем node_modules, набор демок на чистом CSS, cоздание собственных HTML элементов, функциональное тестирование JavaScript, распространенные ошибки начинающего верстальщика, а также материалы по React, Angular и GraphQL.

Почитать

Imperative vs Declarative Programming.

Goodbye, Object Oriented Programming.

Исчерпывающее руководство по стратегиям загрузки веб-шрифтов.

Progressive loading for modern web applications via code splitting.

Journey to HTTP/2.

Defer loading javascript.

All about HTML Custom Elements — cоздание собственных HTML элементов.

The performance benefits of rel=noopener.

The :target Trick.

The State of CSS Reflections.

What Goes Through My Head When Exploring a Site — проверяем верстку.

Considerations for Styling a Modal — верстаем модальное окно.

Force Selection of Text Block.

10 плагинов PostCSS.

Animating like you just don’t care with Element.animate.

What’s new in Chromium 52 and Opera 39.

Exploring the Physical Web (Without Buying Beacons).

MathML Improvements in WebKit.

Building A Cross-Platform WebGL Game With Babylon.js.

Breathing air into AirBnB’s JavaScript Style Guide.

Youtube Player — создание собственного плеера на JavaScript.

Everything You Need to Know About Instagram API Integration.

Solvable Chunks: One Week Video Game — онлайн-игра на Canvas за неделю

Chrome 52 и материалы по Progressive Web Apps от Google:
— CSS Containment in Chrome 52;
— Houdini — Demystifying CSS — создаем CSS свойства с Гудини;
— Complexities of an infinite scroller;
— Service worker caching, playbackRate and blob URLs for audio and video on — Chrome for Android;
— Offline Storage for Progressive Web Apps;
— Debug Progressive Web Apps;
— Shadow DOM v1: self-contained web components.

Designing Responsive Progressive Web Apps.

Progressive web apps running as native OS X apps.

The Business Case for Progressive Web Apps.

Service worker meeting notes.

Accessible UI Components For The Web.

Fixing HTML Video on Mobile — создание системы кодирования видео Whitewater.

Image Upload and Manipulation with React.

Progressive Enhancement Techniques for React — Part 1, Part 2.

Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS.

React Storybooks meets Create React App.

AngularJS vs ReactJS — холиварим.

Angular Router: Declarative Lazy Loading.

How to Install the Facebook SDK into a React Native Android or iOS App.

Why Redux makes sense to me and how I conceptualize it.

I Peeked Into My Node_Modules Directory And You Won’t Believe What Happened Next.

Relay and Routing.

Faking GraphQL with ember-cli-mirage.

GraphQL and the amazing Apollo Client.

Why Redux is not so easy, some alternatives.

Apollo:
— Snappier UIs with Apollo Client + GraphQL;
— Mutations and Optimistic UI in Apollo Client;
— GraphQL as a best practice for modern Angular apps?
— Apollo Server 0.2: GraphQL with Express, Connect, HAPI or Koa;
— Pagination and Infinite Scrolling in Apollo Client;
— Seamless integration for GraphQL and React.

Туториалы

JavaScript Promises 101.

Learn TypeScript in 30 Minutes.

Building Your First App With Vue.js.

Развертывание с GitHub на сервер.

Методическое пособие для новичков по верстке.

Распространенные ошибки начинающего HTML-верстальщика.

Плитка Sitepoint: практическая реализация.

Let your website cast the Northern Lights — Auroral.

Communicating with Bluetooth Low Energy Devices in Cordova.

Build a Music Streaming App with Electron, React & ES6.

JavaScript Functional Testing with Nightwatch.js.

Tutorial: Getting started with GraphQL queries and mutations.

Angular 2 Authentication made easy with Firebase.

Посмотреть

Choosing a JavaScript Framework — Rob Eisenberg.

Chrome 52: Contain Property, the PerformanceObserver API & Service Worker Stream.

Frontend United 2016.

Front-Trends 2016.

OdessaJS.

Moscow Node.js Meetup 8.

MoscowJS Meetup 32.

Послушать

Веб-стандарты — 24, 25, 26, 27 и 28 выпуски.

JavaScript Air:
— 31. Automated Accessibility Testing with aXe-core;
— 32. Publishing JavaScript Packages;
— 33. Getting started with web audio;
— 34 Typed Functional Programming in JavaScript;
— 35. How to be a mentor.

Библиотеки

Cleave.js — форматируем формы.

ScrollTrigger — анимируем скрол.

Whitewate — замена HTML5 Video.

React Monocle — визуализация React компонент.

Webpack Dashboard — сборка под микроскопом.

React Elm Components.

Vue Typescript.

Covalent — UI на Typescript и Angular-Material 2.

Демо

Above & Beneath: Featured Content Layout Effect.

You-Dont-Need-Javascript — набор демок на чистом CSS.

108 — бит-машина на Web Audio API.

Elm Spa Example.

Остальное

Create React App.

Новинки в SVG 2.

Aurelia 1.0.

Stylint 7.1.0.

Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay.

Release Notes for Safari Technology Preview Release 10.

Flash and Chrome — Flash придет конец.

New <video> Policies for iOS.

Hyperterm — терминал на Electron.

Moeditor — markdown редактор на Electron.

JSCS End of Life — переходим на Eslint.

Sketch to VR.

Lepton — новый формат сжатия без потерь от Dropbox.

Подкасты Web-Standards текстом.

Эффективное использование Github.

Cursor Hack.

Новый раздел Documentation на Satck Overflow.

Programming Fonts — выбираем подходящий шрифт.

Atom Themes — коллекция тем для Atom.

Escape — проверяем знания о XSS.

Functional Programming Jargon — словарь терминов функционального программирования.

React in patterns.

Grammarly ищет талантливых инженеров. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, мы используем передовые технологии и решаем интереснейшие технические задачи. Смотрите открытые позициии присоединяйтесь.

С вами был Григорий Шехет. За помощь в оформлении дайджеста благодарю своих коллег.

← Предыдущий выпуск: Frontend дайджест #16.