Front-Еnd дайджест #22: Instagram на React Native, React паттерны, Front-End HandBook

В выпуске: Swift против React Native, React в деталях, статьи от Эдди Османи, а также материалы по Vue.js и Angular 1-2.

CSS

Base64 Encoding & Performance — Кодирование в Base64 и быстродействие:

• Часть 1: What’s Up with Base64?
• Часть 2: Gathering Data
  

Pocket Guide to CSS only Drawings and Animations — рисуем анимации на чистом CSS

Responsive CSS Patterns without Media Queries — адаптивные паттерны без медиа выражений

Deep dive CSS: font metrics, line-height and vertical-align — метрики шрифта в CSS

Themed Styles With CSS Variables

JavaScript

Сложно о простом: ESLint в команде

Glossary of Modern JavaScript Concepts: Part 1

The Real Story Behind ECMAScript 4

ECMAScript 2016+ in Firefox

An Animated Intro to RxJS — введение в Rx.js

Feature watch: ECMAScript 2018 — чего ждать?

Sending Emails with the Gmail JavaScript API

What’s a JavaScript closure? In plain English, please — разбираем замыкания

D3 and Canvas in 3 steps — создаем картину на D3

The Rise and Fall and Rise of Functional Programming (Composing Software)

Introduction to Web Audio API

Introduction Into Elm — учим ELM

Dynamic imports in Meteor 1.5

Статьи Эдди Османи:

• JavaScript Start-up Performance
• Progressive Web App Libraries in Production

React

React In-depth — изучаем React

How I automate all of the boring parts of my job with Create React App DevOps

Redux:

• Dissecting Twitter’s Redux Store
• Offline-First Web Application Using Redux and PouchDB
• 3 Things I Learned About Working with Data in Redux
• Redux 4 Ways
• From Zero to Redux in 3 Minutes
• Thinking in Redux (when all you’ve known is MVC)
• Type-checking React and Redux (+Thunk) with Flow — Part 1

Functional setState is the future of React

Статьи из тех-блога OAuth:

• Optimizing the Performance of Your React Application
• ReactJS Authentication Tutorial

How to Work with and Manipulate State in React

10 React mini-patterns — учим паттерны

Styling React Applications with Ant.Design — немного CSS in JS

All you need is React & Firebase

Building React Components for Multiple Brands and Applications

What If React Was Really Only The V in MVC?

React Native

React Native at Instagram

Building a simple camera app clone for iOS with React Native

Converting a React App to React Native

What’s Happening with Navigation in React Native?

React Native and Native Modules: The Android SyncAdapter

Tales of a React Native Beginner: Why GraphQL:emoji_1f3c6: Is The Real MVP

React Native animations revisited: Part I, Part II, Part III

React Native’s new FlatList component

How to make your React Native app respond gracefully when the keyboard pops up — решаем проблему с появлением клавиатуры

Строим приложения на React Native:

• Build an Imgur App with React Native and MobX
• Implementing Cube in React Native
• Building a simple camera app clone for iOS with React Native

Swift против React Native:

• Swift vs. React Native Feels
• Comparing the Performance between Native iOS (Swift) and React-Native

Angular 1x-2

An Introduction to Observables for Angular Developers

Angular — Advanced Styling Guide (v4+)

Testing Routes in Angular 2

Event Emitters in Angular

Visualizing Data with Angular and D3

Managing State in Angular Apps with ngrx/store and ngrx/effects: Part I, Part II, Part III

From Redux to Angular ngrx/store

Managing State in Angular Applications

Vue

Vue.js, Vuex, and Testing; an Introduction

Creating a Vue.js Component

Using VueJS Components in ag-Grid

React’s JSX vs Vue’s templates: a showdown on the front end

Upgrading to Vue.js 2.2

TypeScript

It’s time to give TypeScript another chance

TypeScript: The Nitty-Gritty Parts

Node.js

An Update on ES6 Modules in Node.js

How I publish to NPM

Using Redis with Node.js and Socket.IO

10 Node.js Best Practices: Enlightenment from the Node Gurus

GraphQL

Build a GraphQL API-Powered Portfolio Website

Introducing the GraphQL API

Apollo

Apollo Client 0.8

Apollo Contributor Week Starts Today!

Persisted GraphQL Queries with Apollo Client

Simplify your React components with Apollo and Recompose

The next step for realtime data in GraphQL

New release of GraphQL Subscriptions for Javascript

Explaining GraphQL Connections

Apollo Angular 0.11

Full-stack React + GraphQL Tutorial

Optimizing Your GraphQL Request Waterfalls

The Anatomy of a GraphQL Query

Библиотеки

Unfetch — 500-байтныйполифил fetch

Trevor — совместимый аналог TravisCI для локального запуска тестов и сборки в разных окружениях

AR.js — инструмент для разработки веб-приложений дополненной реальности

PreJSS — адаптер плагинов и синтаксисов PostCSS для JSS

Neutrino

Libx

Rapscallion

React Trend — строим графики на React

Caporal.js — строим консольные приложения

Sou React Table — Excel на React

Посмотреть

Egghead:

• How to Use npm Scripts as Your Build Tool
• Understand the Basics of HTTP
• Write simple asynchronous code with JavaScript generators

Building a Media Player — строим плеер вместе с Полом Льюисом

Послушать

Веб-стандарты — 54, 55, 56, 57 выпуски

Radio.js — Выпуск 46: Учиться, учиться и еще раз учиться

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

• #6 React 15.5 and 16 Umbrella
• #7 Preact

Конференции

KyivJS February 2017

React Kyiv February

MinskJS Meetup #1

PiterCSS 10

Frontend Conf 2016

RSconf2017

Демо

100 Days CSS Challenge

3-хмерный комикс на WebGL

Weather app React Native

Paint — рисуем в браузере

Что нового?

VSCode 1.10

Announcing TypeScript 2.2

Jest 19: Immersive Watch Mode & Test Platform Improvements

Polymer News Progressive Web App — новый шаблон

Open Source Guides — опенсорсим по гайдам от Github

JavaScript Debugging Improvements — новая отладка в Safari

Остальное

Htmlreference

Mastering VS Code’s Terminal

A cartoon intro to WebAssembly — введение в WebAssembly в комиксах

Optimising the front end for the browser

HTTP/2 — A Real-World Performance Test and Analysis — почему HTTP 2

Get Started with Analyzing Network Performance in Chrome DevTools — основы анализа производительности загрузки ресурсов с помощью Chrome DevTools

Visual Studio Code: the editor I didn’t think I needed

UI component explorers — your new favorite tool

What is Reactive Programming?

Front-End Developer Handbook 2017

The Story of Firefox OS — история Firefox OS

Code review checklist

JavaScript in 2017 — Beyond the Browser

Frameworks? Libraries? Both, or none? — My honest opinion

Modern Web Development

Make GitHub Great Again!— экстеншн, который делает хедер Github снова белым

Top 10 за февраль:

• JavaScript
• React.js
• Web Development
• Node.js
• Angular 2

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

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

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