Front-Еnd дайджест #21: долгожданный Webpack 2, будущее итерации React и какая библиотека самая быстрая

В выпуске: углубляемся в React и GraphQL, фундаментальные принципы MobX, начинаем писать на Inferno, почему Vue так крут и многое другое.

CSS

CSS-анимации: Transitions и Animations. Motion Path Module CSS.

Coloring the insertion caret — используем caret-color.

What’s in a name? A CSS naming convention overview — обзор CSS конвенций.

Random Numbers in CSS — удобства прокладывания чисел из JavaScript в CSS.

Animate to Different End States Using One Set of CSS Keyframes.

Map Rollovers — пишем SVG-карту.

The Road to SVG and Custom Elements in Clarity Icons — как парни из Clarity готовят иконки.

Адаптивный Pixel Perfect — новый инструмент для сравнения верстки.

Что поправить в верстке перед выпуском в продакшн? — хороший чек-лист.

Let’s Look at 50+ Interesting CSS Properties & Values — используем новые CSS свойства.

Ultimate Guide to Non-Rectangular Headers (Part 1) — 50+ CSS-свойств и значений в примерах.

Understanding the Critical Rendering Path — от сервера до пикселей на экране.

3 New CSS Features to Learn in 2017.

Зарелизил вторую версию awsm.css — о релизе библиотеки для превращения обычной разметки без классов в красивую страничку.

CSS Layout API Explained.

CSS Grid — Table layout is back. Be there and be square — о grid в Chrome 57.

How calc() Works — как работает calc() на примерах.

JavaScript

Making transpiled ES modules more spec-compliant.

A Brief History of JavaScript — история становления JavaScript.

Web Components, the React way — создаем компоненты в стиле React.

Native ECMAScript modules — the first overview — обзор нативных JavaScript-модулей.

The JavaScript Standard.

Манифест? А? Что? Зачем? — поясняющая заметка к спецификации Web App Manifest.

The global object in JavaScript: a matter of platforms, unreadable code and not breaking the internet — о глобальных объектах в JavaScript.

Pattern Matching — предложения по добавлению возможности pattern matching в ECMAScript.

Implementing „Save For Offline” with Service Workers — добавляем возможности офлайн.

Enhanced Editing with Input Events — редактирование текста в contenteditable c Input Events.

Functional Programming is taking over UIs with Pure Views — используем чистые функции для разработки UI.

12 JavaScript Libraries for Data Visualization.

React

Серия продвинутого руководства по React.js:

• JSX — подробности
• PropTypes — проверка типов в React
• Ref-атрибуты и DOM в React
• Неконтролируемые компоненты в React
• Оптимизация производительности в React

React at 60fps.

React Interview Questions — готовимся к интервью.

Crafting a high-performance TV user interface using React — о написании Netflix TV .

Isn’t our code just the *BEST*.

Web Components, the React way.

Optimizing the Performance of Your React Application.

The fundamental principles behind MobX — фундаментальные принципы MobX.

Learn About Inferno JS: Build and Authenticate an App — пишем приложение на Inferno.

Immutability in JavaScript using Redux.

Introducing React Horizon.

React Native

Beek.io — React Native Case Study.

Getting Started with React Native Development for Windows.

Playing with React Native Animations.

React Native Deployment to iPhone.

Thinking in Redux (when all you’ve known is MVC).

CSS in JS

A 5-minute Intro to Styled Components.

CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components.

Angular 1x-2

Angular and React: Brief Comparison Based on a 2-Year Long Experience — кто круче?

Testing Angular Directives with Custom Matchers by thoughtram.

Minify, uglify and bundle your JavaScript in NativeScript Angular 2 app.

A deep dive on Angular decorators.

An Introduction to Observables for Angular Developers.

Vue

Введение в Vue:

• Rendering, Directives, and Events
• Components, Props, and Slots
• Vue-cli and Lifecycle Hooks

VueJS: First ImpressionsSome things that are better in Vue than in React — почему Vue круче, чем React.

Managing Vue.js State with Vuex.

Build a Vue.js Website in 4 Steps.

5 идей Vue.js, которые вы полюбите (даже если React вас полностью устраивает).

TypeScript

TypeScript vs. Flow.

TypeScript 2.1: Mapped Types.

TypeScript 2.1: Improved Inference for Literal Types.

Refactoring 30000 lines of JS with types.

ELM

What does it mean to use Elm?

Easy VR with Elm and A-Frame — работаем с VR на ELM.

Choosing the right Elm SPA architecture — о механизме навигации в ELM приложениях.

Node.js

NodeJS App in 20 Minutes.

OpenCV tutorial: Computer vision with Node.js — учимся работать с компьютерным зрением.

Build your first Node.js microservice — пишем первый микросервис на Node.js.

npm cache: the unsung hero — сравниваем кэши.

Meteor

Create and secure your Mongo collections with Meteor and TypeScript.

From Meteor to Chroma.

Super Simple and Free Meteor Deployments using ZEIT ▲now.

GraphQL

Give it a REST: use GraphQL for your APIs.

And GraphQL for all?

GraphQL vs REST: Overview — сравниваем подходы.

Build a GraphQL server and Catch ‘Em All! — покедекс на GraphQL.

Let’s build a Spotify GraphQL Server.

Building An Instagram Clone With GraphQL and Auth0.

Библиотеки

micro-analytics — микросервис для подсчета количества просмотров чего угодно.

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

React Navigation — новый роутер для React Native.

Redux Beacon — анализируем Redux/NGRX экшены пользователя.

Qart.js — генерируем QR-коды.

Backpack — пишем Node.js приложение без лишних зависимостей.

iTyped — анимируем написание текста.

reactNativeEverywhere — пишем приложение на любую платформу.

Посмотреть

This.JavaScript 01/28 — Vue, React, Angular, RxJS, Polymer & Ember.

Послушать

Веб-стандарты — 50, 51, 52, 53 выпуски.

Конференции

JS Kongress 2016.

Web Standards Days в Москве, 2017.

Демо

ColorMe — визуализируем цвета с помощью CSS-функции color().

Home Automation with RPi and Javascript.

Illustrated Algorithms — визуализируем алгоритмы.

Что нового?

Webpack 2.2: The Final Release.

Announcing Ionic 2.0.0 Final.

CSS Snapshot 2017 — опубликовано официальное определение CSS (CSS-2017).

Opera Neon — концепт браузера.

Riptide — сборщик мусора в Webkit.

XVG — Chrome расширения для дебаггинга SVG.

React 15.5 and 16 Umbrella — чего ждать.

Остальное

Front-End Developer Handbook 2017.

Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue — сравниваем технологии рендера.

Site Reliability Engineering — опыт поддержки Google.

Awesome Case-study — подборка места для обучения.

Веб ожирел не по незнанию.

2016 JavaScript Rising Stars — восходящие звёзды мира JS в 2016 году.

Why working on Chrome made me develop a tool for reading source code — о создании инструмента для удобного чтения и визуализации кода.

Mozilla Open Design — Mozilla адаптировала идеи опенсорса к дизайну.

Get Started with Analyzing Network Performance in Chrome DevTools — анализ сетевого быстродействия в отладчике Chrome.

33 способа ускорить ваш фронтенд в 2017 году — опыт разработчиков Badoo.

GitHub’s post-CSP journey — опыт применения CSP у разработчиков Github для защиты от разных видов атак.

Infinite Loops — решения проблемы зависания браузера при выполнении бесконечных циклов.

Seedux — Redux утилита для Chrome.

Rules for Using ARIA in HTML — правилах использования ARIA в разметке.

Get involved in open source today! — разработчики Apollo все за опен-сорисоли.

Artsy Webpack tour — аннотированные исходники Вебпак.

Show Facebook Computer Vision Tags Chrome Extension — анализируем изображения.

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

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

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