Front-Еnd дайджест #24: ReasonML, React в Airbnb и Samsung Internet

В выпуске: React Sketch App и Sizzy, грядущий Node 8.0 и новый Atom, CSS переменные и CSS in JS бенчмарки, а также прошедший React Amsterdam.

CSS

The Different Logical Ways to Group CSS Properties — как правильно группировать CSS свойства

The Many Tools for Shape Morphing — про собы морфинга SVG-фигур

Adding :focus-within selector to Chromium — обзор нового селектора

Implementing system fonts on Booking.com — A lesson learned — опыт изменения шрифтов на booking.com

Simplifying CSS Cubes with Custom Properties — как CSS переменные упрощают создание 3D объектов

Making Custom Properties (CSS Variables) More Dynamic — используем CSS переменные

JavaScript

Native form validation  — Part 1, 2 — секреты нативной валидации форм в браузерах

ECMAScript modules in browsers — обзор ES6 модулей в браузерах

ES6 modules support lands in browsers: is it time to rethink bundling? — стоит ли нам изменить сборку кода с появлением нативной поддержки ES6 модулей?

Using fetch() and reduce() to grab and format data from an external API — A practical guide

Upgrading Ele.me to Progressive Web App — опыт создания PWA на Vue.js от крупнейшего китайского сервиса для заказа еды

How to do proper tree-shaking in Webpack 2

Combine Webpack with Gulp 4 — объединяем и берем лучшее

10 Machine Learning Examples in JavaScript — примеры машинного обучения в JavaScript

An Overview of JavaScript Testing in 2017 — как тестировать JavaScript в 2017

RxJS Subjects for human beings

Flow vs. Typescript

React и React Native

Which Projects Need React? All Of Them! — когда стоит использовать React?

Hello from React Amsterdam 2017 — обзор React Amsterdam

Rearchitecting Airbnb’s Frontend — как работает Front-end в Airbnb

After building my first React Native app, I’m now convinced it’s the future.

45% Faster React Functional Components, Now

CSS in JS

CSS in JavaScript: The future of component-based styling — как правильно писать стили для компонент

Stop using CSS in JavaScript for web development — девять причин не использовать CSS in JS и styled-components

Твит тред Олега Слободского о CSS in JS

Why CSSinJS — презентация Олега Слободского

Angular 1x-2

Essential Angular: 7 Blog Posts + Book

Testing Angular Apps in WebStorm

Create the toJSON operator in Angular

ngrx/store reuse reducer logic

Moving From Angular to Vue : A vuetiful journey

Node.js

Node.js 8.0.0 has been delayed and will ship on or around May 30th — чего ждать?

How To Build a React GraphQL Static Site Served From AWS CloudFront — строим простое приложение на GraphQL и React

How to use DynamoDB Document Client with AWS Lambda DynamoDB Streams

Understanding Node.js Event-Driven Architecture

How to write nice, typed and expressive node-express functions — покрываем типами express приложение

ReasonML

Reasons to love Reason

Rsnpaint — эксперимент с написанием анимаций

ReasonablyTyped — переводим типы с Flow в ReasonML

Create Reason React App

Популярные библиотеки на OCaml/ReasonML:

• BS React-Native
• BS Express
• BS Leaflet
• BS Jest
• BS Fetch

Библиотеки

Prepack — оптимизируем код на этапе сборки

Lists — коллекция данных в формате JSON

Freactal — новой библиотека для управления состоянием в React приложениях

Speedracer — измеряем производительность автоматически

Styled-JSS — Styled-Components в связке с JSS

Typefont — распознаем текст с картинки

Butternut — JS-минификатор

Послушать

Веб-стандарты — 64, 65, 66, 67, 68, 69

Пятиминутка React:

• #11 — this.state или this.effectiveValue?
• #12 — React 15.5 и другие новости
• #13 — Redux Business Logic
• #14 — Redux Business Logic (part 2)
• #15 — Amsterdam, PWA, RealWorld, Prepack
• #16 — Frontend Conf 2017
• #17 — Idiomatic Redux

Фронтёрки

• Episode 5: Зарема Халилова, митапы и смерть jQuery

Devschacht — 1, 2

Frontend Weekend:

• #1 — Как стать frontend-разработчиком
• #2 — Зарплаты и первые шаги frontend-разработчика

Конференции

UralJS #3 06.04.16 в F.Starter

JavaScript fwdays’17

KyivJS April 2017

React Amsterdam 2017 Conference

Демо

Adventure Time — на чистом CSS

Wolfenstein 3d — на чистом CSS

MINE3D — трёхмерный сапёр на WebGL

Что нового?

Introducing GitHub for Atom

React Sketch.app

Samsung Internet:

• Samsung DeX brings a new Dimension to the Mobile Web
• Announcing Samsung Internet v5.4 stable!

Autoprefixer 7.0

Webpack CLI

Sizzy — ответ на вопрос как создавать респонсив веб-ресурсы

Сreate Next App — React Create App с сервер-сайт рендерингом

Electrino — Electron без лишних зависимостей

ExtReact — компоненты для React Native

Launchpad — инструмент для создания и публикации адаптивных сайтов со Sketch

Остальное

Intro to React — учим React

45% Faster React Functional Components, Now

Wait, WebP is actually worth it — WebP и его преимущества

Facebook’s Prepack — The Next Killer In The JavaScript Zone

Mobile First, Desktop Worst — про упрощении десктопных версий на адаптивных сайтах

Configure ESLint, Prettier, and Flow in VS Code for React Development

The Ultimate Atom Editor Setup (+for JS/React)

Quantum Up Close: What is a browser engine? — про браузерные движки и проект Quantum который изменит Firefox

The single tip that made me a better programmer — совет — как стать лучше программистом от Андре Стальца

An Interview with Matt Loring, an engineer on Google’s NodeJS Runtime team — как используют Node.js в Google

A step-by-step guide to building a simple chess AI — как написать шахматы для браузера

Free online converter from PSD to Sketch — от команды Avocode

CSS in JS benchmarks — бенчмарки различных CSS in JS имплементаций

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

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