Front-Еnd #23: Angular 4.0, Ember и React Conf, обзор React London

В выпуске: перезагрузка страницы от Эдди Османи, исследуем Twitter Lite, пишем на Glimmer, ReactXP, Glamorous против Styled-Components и новый реактивный стейт менеджмент Focal от Grammarly.

CSS

CSS conic-gradient() polyfill — конический градиент в Chrome.

CSS Columns.

Building a CSS Grid Overlay — строим CSS Grid обложку.

Spring Animation in CSS — пружинистая анимация в CSS.

Celebrate CSS Grid support by re-creating the iOS Calculator — CSS Grid на примере калькулятора.

CSS Grid VS Flexbox: A Practical Comparison — гриды против флекс боксов. Кто круче?

These sites are using CSS Grid — CSS гриды.

JavaScript

Как унизить джаваскриптера.

Regular Expressions in a post-ES6 world.

Testing Service Workers — тестирование сервис-воркеров в Chrome DevRel.

Creating a Book Cover Using JavaScript and p5.js — анимируем книгу.

Pong with SVG.js — играем в пинг-понг.

6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial).

Minecraft in WebVR with HTML Using A-Frame — Minecraft в браузере на WebVR.

On Web Apps and Databases — зачем нам нужны базы данных на фронт-енде.

Observables Proposal for ECMAScript! — верим, ждем, радуемся!

Using Observables in real life — почему стоит использовать обзерваблы?

Getting started with the Web Share API — введение в использование Web Share API.

Why I’m excited about GlimmerJS — почему Glimmer?

Glimmer.js: What’s the Deal with TypeScript?

Introducing Quokka — The Live Scratchpad for JavaScript (free developer tool).

Vue.js Tutorial: A Prerendered, SEO-Friendly Example [Live Demo] — учим Vue.js.

Simple beginner guide for Webpack +2.0 from scratch — учим Webpack 2.0.

Tree shaking with Webpack 2, TypeScript and Babel.

Data Visualization on the Front End using D3.

Preload, Prefetch And Priorities in Chrome — Эдди Османи обо всех нюансах техник предзагрузки.

React

Simple React Development in 2017.

React Lifecycle Methods — how and when to use them.

Twitter Lite and High Performance React Progressive Web Apps at Scale — как писать высокопроизводительное PWA на React.

Redux:

• Redux Testing Step by Step: A Simple Methodology for Testing Business Logic — тестируем Redux приложение
• Learn Redux by coding a Mini-Redux — пишем клон Redux
• Все новое — это хорошо забытое старое — Redux как новый MVC

Build your own React Router v4 — пишем свой роутер.

Yes, React is taking over front-end development. The question is why. — почему React?

Webpack and Rollup: the same but different — в чем разница между Webpack и Rollup.

How we handle inline styles with TypeScript and React.

Infinite List and React.

How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects.

React London — текстовая трансляции Андрея Ситника с React London.

React Native

Mastering the Camera Roll in React Native.

Java UI Component on React Native.

Introducing Redux Offline: Offline-First Architecture for Progressive Web Applications and React Native — введение в Redux Offline.

Write React-Native apps in 2017 style with MobX.

Beta Testing React Native Android Applications with Crashlytics.

CSS in JS

Introducing glamorous :emoji_1f484: — новая система стилей в React от PayPal.

Animating SVG with styled-components.

Angular 1x-2

Understanding Angular modules (NgModule) and their scopes.

Understanding Component Architecture: Refactoring an Angular App.

Take Advantage Of The Let Operator in Angular.

Angular 4:

• Angular v4: Practical Countries Application
• Angular v4: Hybrid Upgrade Application
• Top 8 Resources to Explore Angular 4
• Angular 4 universal app with @angular/cli
• 5 Features To Watch Out For in Angular v4

TypeScript

All JS libraries should be authored in TypeScript — André Staltz про TypeScript.

Write a library using TypeScript library starter — писать библиотеки на TypeScript стало проще.

Type checked dynamic calls in TypeScript.

Using TypeScript to publish a testable React npm package.

Node.js

RESTful API design with Node.js.

create-graphql-server — instantly scaffold a GraphQL server.

Before you bury yourself in packages, learn the Node.js runtime itself.

How to Mock Data for Node.js Applications using Faker.js — мокаем данные на сервере.

From Node to Go: A High-Level Comparison.

Библиотеки

TCP Over Websockets.

Node Draftlog.

Quokka — создает отчет о покрытии тестами.

Franc — автоматически определяет текст.

Service Worker Toolchain — инструменты для тестирования сервис-воркеров от Pinterest.

Polished — упрощает написание CSS in JS.

Glamorous — СSS in JS от PayPal.

Tippy.js — минималистичная утилита для создания тултипов.

MoveTo — минималистичная утилита для скролл анимации.

React Overdrive — помогает создавать красивые анимации.

React Springy Parallax — параллакс для React приложений.

React-Loadable — подгружает динамически компоненты.

Redux-Offline — упрощает написание Offline-First приложений.

ReactXP — кроссплатформенное решение от Mircrosoft.

React Sizes — утилита для менеджмента изменения размера экрана.

React Mosaic — утилита для создания и менеджмента окон.

Haul — утилита командной строки для разработки React Native приложений.

Focal — реактивный стейт менеджмент от Grammarly.

Посмотреть

New for JavaScript developers in WebStorm and IntelliJ IDEA 2017.1 — JS-новинки WebStorm 2017.1.

Новые видео про TypeScript на EggHead:

• Using ES6 and ESNext with TypeScript
• Getting started with Jest using TypeScript

Новые бесплатные курсы на EggHead:

• Add routing to React apps using React Router v4
• Write simple asynchronous code with JavaScript generators — от Max Stoiber
• Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps
• Build Basic NativeScript App Templates
• Build Complex Layouts with CSS Grid Layout
• Wrangle your terminal with tmux
• Learn how to publish your own JavaScript packages on npm
• Learn the Best and Most Useful SCSS

Послушать

Веб-стандарты — 58, 59, 61, 62, 63.

Radio.js:

• Выпуск 47: Все полимеры
• Выпуск 48: МозгиJS

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

• #8 — Plan for Addons in React 16
• #9 — Lifting State Up Example Explained
• #10 — Redux and Local State

Фронтёрки:

• #1: Подкасты, pitercss и Пепелсбей
• #2: Андрей Гурылёв, городские сообщества и идеальный стэк
• #3: Андрей Ситник, выборы вкладок и англоязычные конференции
• #4: Виктор Суздалев, хипстеры от кода и исторический подход

Конференции

MinskCSS Meetup #2.

HolyJS 2016 Moscow.

EmberConf: День 1, 2.

React Conf 2017.

React London 2017.

Демо

CSS переменные в действии.

Experimental 3D Room Exhibition Layout.

Vue js Cheat Sheet.

React Architecture Tree View.

Что нового?

jQuery 3.2.0 Is Out!.

VS Code 1.11.

Angular 4.0.0.

Safari 10.1.

What’s new in Chromium 57 and Opera 44.

What’s new in Microsoft Edge in the Windows 10 Creators Update.

Google Cloud Platform Free Tier — бесплатный доступ к платформе Google Cloud.

Introducing Create React Native App.

Introducing ReactXP.

React Router 4.

Next.js 2.0.

Previewing the WebAssembly Explorer — песочница для отладки WebAssembly.

Reactide — React IDE.

CodePen Projects Is Here! — разрабатываем приложения в браузере.

CodeSandbox — онлайн-песочница для React и Redux.

Дизайн

Setup a design system — разбираем дизайн-систему по кусочкам.

Calligraphr — рукописный текст в цифровой шрифт.

Improve Your Billing Form’s UX In One Day.

Using DevTools to Tweak Designs in the Browser — дизайн и прототипирование используя инструменты разработчика.

Carbon — система дизайна IBM.

Остальное

Top 10 статей:

• Web Development
• JavaScript
• Node.js
• React

Fourteen Months with Clojure — опыт использования Clojure.

Earth Enterprise — приложение для построения карт от Google.

Web Developer Roadmap 2017 — что и в каком порядке изучать?

100+ FREE Resources to Learn Full Stack Web Development — 100 ресурсов для изучения веб-разработки.

Using the Chrome devtools new code coverage feature — новое в инструментах для разработчика.

Modern JavaScript for Ancient Web Developers — как изучать современную экосистему JavaScript?

The Developer’s Edge: How To Become A Senior Developer — кто такой Senior-разработчик?

Case Study of JavaScript Engine Vulnerabilities — коллекция уязвимостей в JS-движках.

Color fonts — каждому по цветному шрифту.

Dynamic Assessment Plugin — расширение для автоматической проверки доступности интерфейсов.

Announcing free Microsoft Edge testing in partnership with BrowserStack — Edge на BrowserStack бесплатно.

V8: Behind the Scenes (March Edition feat. I+TF launch and Declarative JavaScript) — за кулисами V8, мартовский отчет.

Разъяснение http2.

Stylelint Config Generator — новые примеры Stylelint.

Список тестовых заданий для прокачки.

Sideways Dictionary — словарь технических терминов.

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

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