Frontend дайджест #18: Angular 2.0, TypeScript 2.0, Progressive Web Apps из песочницы

В выпуске: Ден Абрамов про Redux, компоненты на любой вкус для React Native, а также материалы по React, GraphQL и ELM.

Почитать

Developing Extensible HTML and CSS Components.

Fun Times With CSS Pixel Art.

Flexible typography with CSS locks.

You can kinda invent your own weird design language with attributes and attribute selectors.

Methods for Controlling Spacing in Web Typography.

KharkivCSS — текстовая трансляция.

Why there is no CSS4 — explaining CSS Levels.

Welcome to HTML 5.2.

How To Use WebPageTest and its API.

A Case Study on Boosting Front-End Performance.

HTTP/2 connection coalescing.

400,000 GitHub repositories, 1 billion files, 14 terabytes of code: Spaces or Tabs?

Indicating offline.

WebDriver Support in Safari 10.

Bringing WebVR to Microsoft Edge.

Simple sharing on the web with navigator.share.

Explaining basic 3D theory.

Writing a lambda-calculus interpreter in javascript.

Что нового в Marionette.js 3.0?

DevTools Digest, September 2016: Perf Roundup.

Cross-origin Service Workers: Experimenting with Foreign Fetch.

Debugging Service Workers.

Everything You Should Know About Progressive Web Apps.

Things I learned making a Progressive Web App for “super selfies”.

How we made the RioRun progressive web app.

Create React PWA — Прогрессивное веб-приложение на React.

Air Berlin: реализация Progressive Web App.

Untangling Deeply-Nested Promise Chains — рефакторинг промисов.

A $100 cellular webpagetest agent.

Bundling With Rollup—The Basics.

11 Simple npm Tricks That Will Knock Your Wombat Socks Off.

Ускоряем npm-скрипты.

The State Of JavaScript: Front-End Frameworks.

How To Scale React Applications.

Offline-first приложение с Hoodie&React:
— Часть первая: браузерная база данных;
— Часть вторая: авторизация.

Interesting React-Native projects to learn from.

Configure create-react-app without ejecting.

How to safely use React context.

Better Cross-Platform React Native Component.

Redux Patterns and Anti-Patterns.

10 Tips for Better Redux Architecture.

You Might Not Need Redux — Ден Абрамов.

If not Redux then what? — реакция на статью Абрамова.

React Native UI Challenge #2.

New awesome UI toolkit for React-Native Apps.

Github GraphQL API React Example.

Why Learning Angular 2 Was Excruciating.

Using the New Release of Angular 2’s Router 3.0.0.

Angular Router Final is Released.

The 4 Stages of Perf Tuning for your Angular2 App.

Dependency Injection in Angular 1 and Angular 2.

Three Ways to Test Angular 2 Components.

Angular — Introduction to Reactive Extensions (RxJS).

Understanding Reactive Programming and RxJS.

Why We Won’t Be Writing JavaScript in Five Years.

10 reasons why you should give Elm a try.

Why Elm is Going to Change the World.

Move fast and don’t break things. Running a startup on Elm.

Using Elm in the newsroom.

Blazing Fast HTML.

So You Want to be a Functional: Part 1, 2, 3, 4.

Статьи от Apollo:
— GraphQL Concepts Visualized;
— All you need to know about GraphQL.js 0.7;
— GraphQL: The next generation of API design;
— Data management and AJAX server fetching for Angular Components;
— GraphQL Subscriptions in Apollo Client;
— The new GitHub GraphQL API;
— GraphQL.org just got a makeover;
— Bringing GraphQL to iOS;
— Native code generation at Facebook.

How to automate tests and deployments of Node.js apps.

.

Туториалы

An Introduction to Chart.js 2.0 — Six Simple Examples.

How to Translate from DOM to SVG Coordinates and Back Again.

Realtime Form Validation.

perfschool — воркшоп по основам клиентской оптимизации.

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

Building a Game with Three.js, ReactJS and WebGL.

Building Animated Components, or How React Makes D3 Better.

How to Create Elm App.

Посмотреть

Chrome 53: Shadow DOM v1, Payment Request API and more.

ElmLive.

курс по THREE.js.

CascadiaFest 2016.

Developer Diary c Полом Льюисом.

A11ycasts.

TomskJS.

PiterJS #7.

MoscowJS № 33.

Nordic.js 2016.

Послушать

Веб-стандарты — 29, 30, 31, 32, 33, 34, 35 выпуски.

Frontflip Podcast: 20. Elm и ядовитый утконос. Игорь Капков.

JavaScript Air:
— 36. Managing Dependencies like a boss;
— 37. On-site at React Rally;
— 38. Typed JavaScript with TypeScript and Flow;
— 39. Node.js and Community;
— 40. On-site at The Strange Loop;
— 41. Test all the things with Cypress.

Библиотеки

Eslint config cleanjs.

Babili (babel-minify).

Tape Enzyme — Tape на стероидах.

Appmetrics.js — результаты Timing API в Google Analytics.

ProtectJS — приватные методы для JS объектов.

Elm autocomplete.

ELM CSS normalize.

Webpack dashboard.

Lightgallery.js.

React Native elements.

Shoutem UI — набор компонент для React Native.

Optimize JS.

React game kit.

React music.

React media.

React animations.

React with styles — CSS-in-JavaScript от Airbnb.

Neuron — ES6 React Electron starter kit.

Auto-install.

Демо

Bouncy Ball — равнение техник анимации.

GraphicsJS.

SetIdle — мониторинг бездействия пользователя.

Fuse.js — реализация fuzzy search.

Regl — WebGL в функциональном стиле.

Pairs — игра на Elm + Elixir/Phoenix.

Minesweeper — сапер на Elm.

Остальное

Angular 2.0.0.

TypeScript 2.0.

Babel 6.14.0.

Polymer 2.0 Preview.

Chrome 54 Beta: Custom Elements V1, BroadcastChannel, and media platform improvements.

Firefox 49.

Opera 40.

Carbide.

Nucleus.

Our First 50,000 Stars — история React.

Observatory — проверка безопасности от Mozilla.

VSCode — iOS Web Debugging on Windows and Mac.

From Chrome Apps to the Web.

React Components Catalog.

Первый мобильный браузер с поддержкой расширений для Chromium. Новая альфа Яндекс.Браузера.

WebGL2 Fundamentals.

Web Share API.

Shoutem UI toolkit — набор компонентов для React Native.

GitKit.js — гит на JavaScript в браузере.

30 Learning Resources For Mastering Angular 2.

Ramme — Instagram клиент на Electron.

Vue HackerNews 2.0 — на Vue 2.0.

WhatsApp — на React Native.

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

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

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