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

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:

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.

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 is known 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 — хто крутіший?

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:

VueJS: First Impressions Some 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 і приєднуйтесь.

З вами був Григорій Шехет, . За допомогу в оформленні дайджесту дякую своїх колег.

? Попередній випуск: Frontend дайджест #20 .

Опубліковано: 03/02/17 @ 11:00
Розділ Різне

SEO Блог