Front-Еnd дайджест #20: React VR, Svelte, итоги 2016 и наступающие тренды 2017

Почитать

Итоги 2016 и тренды 2017:

Vue in 2016 — итоги года для Vue.js

The 10 Most Important Node.js Articles of 2016

The 18 most popular Node links of 2016

The most popular JavaScript links of 2016

10 Most Shared JavaScript Scene Posts of 2016

What we learnt from our mistakes in 2016 — The Guardian о фейлах в минувшем году

A round-up of all Codrops resources of 2016 — лучшие публикации за 2016 год

Итоги 2016 года от CSSSR

Front-End Performance Checklist 2017

Top JavaScript Frameworks & Topics to Learn in 2017

The top rising JavaScript trends to watch in 2017

HTML:

About rel=noopener — защищаем от уязвимостей

The Difference Between role="presentation" and aria-hidden="true"

:indeterminate

Document Outlines in HTML 5.1 — структура документа по новым стандартам

HTML Interactive Form Validation — новые возможности валидации форм в Safari 19

Prerender on hover?

Input Masking — data-inputmask на практике

SVG-паттерны

An SVG That Isn’t All... SVG — про недооцененные возможности формата

Writing HTML with accessibility in mind — улучшение доступность разметки

Логотип не отвечает или временно недоступен — доступная разметка логотипа

CSS:

CSS Grid!

Use a Sass Variable for a Selector

Controlling the Specificity — :not() в CSS

position:sticky is back in Chrome — position: sticky вернулось в Chrome

CSS Writing Modes — про CSS-свойство writing-mode

Presentation Attributes vs Inline Styles

Scaling Responsive Animations

Animation in Design Systems — функциональная анимация

CSS Shorthand Syntax Considered an Anti-Pattern

Loops in CSS Preprocessors

The Power of Changing Classes

Interpolation in CSS without animation — интерполяция значений в CSS

Virtual CSS with Styletron — CSS XXI века

Using CSS Variables in Site Development — основы CSS-переменных

The 100% correct way to do CSS breakpoints

Анимации на GPU: делаем это правильно

Модульный CSS: — Инструментарий, который мы имеем сейчас в арсенале — это просто сказка

A new world: writing CSS in ClojureScript and life after Sass

Using CSS variables with styled-components — используем Styled-components

The magic behind styled-components — про решение реализацию CSS в JS

JavaScript:

Who said javascript was easy?— неочевидные вещей в языке

Улучшение формы комментариев

JavaScript Modules the ES6 Way

Writing efficient JavaScript — дружелюбный JavaScript для интерпретатора

Let’s use const! Here’s why.

Resolve Promises externally with this one weird trick

Sounds fun — играем с Web Audio API

Replacements for setInterval Using requestAnimationFrame

Lazy-Loading Disqus Comments

Service Worker, what are you?— сервис-воркери в иллюстрациях

HTTP/2 Server Push and Service Workers: The Perfect Partnership — паттерны на практике

Fun hacks for faster content

An Overview of Client-Side Storage — обзор хранилищ данных

WebVR — уже в новых версиях дев версиях браузеров

webpack 2.2: The Release Candidate — первый RC Webpack 2.2

Differences between AngularJS, VueJS and ReactJS

Here’s Why Client-side Rendering Won — почему client-side

Why RxJS Is The Hottest Way To Handle Async

Understanding Subjects in RxJS

JavaScript Frameworks Are Great — сравниваем современные фреймворки

ES2015 JavaScript vs. Elm vs. TypeScript

Svelte :: Framework without the framework — обзор нового фреймворка

Progressive Web App:

Progressive Web App Checklist

Installing web apps on phones (for real) — ждем новые версии Chrome для Android

Need of Progressive Web App?

What I’ve learnt developing a modern progressive web app

Cерия статей от Auth0 — Introduction to Progressive Web Apps:

• Offline First
• Instant Loading
• Push Notifications

Angular 1-2:

Using the power of RxJS and Angular components to <blink>

Last quick tip for 2016 — How to send JWT with every request in Angular

Angular 2 — Implementing Flux architecture — используем Flux

Angular 2 is terrible — чем Angular плох

Medium Gerard Sans:

• Angular 2 — Animating Router transitions
• Angular 2 — Testing Guide
• Angular 2 — New features in Angular 2.3

Does Angular 2 Surpass React?

Server-Side Rendering in Angular 2 with Angular Universal

Why we chose Angular 2 over React for our enterprise software development work

Component Inheritance in Angular 2

The 4 Stages of Perf Tuning for your Angular2 App

7 must-have Visual Studio Code extensions for Angular

Ok... let me explain: it’s going to be Angular 4.0, or just Angular

React и React Native:

Write Your Own React.js!

You Might Not Need React

Основы производительности React-приложений

The Inner Workings Of Virtual DOM — как работает Virtual DOM

The Most Common XSS Vulnerability in React.js Applications — изучаем уязвимости

React Elements VS React Components

Gl-react v3 — библиотека для работы с WebGL

Introducing the React VR Pre-Release — инструмент для упрощения разработки приложений виртуальной реальности

Two Quick Ways To Reduce React App’s Size In Production — уменьшаем размер React приложения

Using Preact Instead Of React — результаты легковесного Preact

End to End Testing (with React)

Tackling React Native Storage — используем Realm

Testing React components with Jest and Enzyme — тестируем компоненты

React Native at WalmartLabs — опыт использование React Native

How I converted my React app to VanillaJS (and whether or not it was a terrible idea) — переписываем на чистый JavaScript

Hello World with Preact, JSX & Typescript

Vue.js:

Vue.js — Project setup — начинаем писать проект на Vue.js

Why we chose Vue.js over React — Qwintry о выборе Vue.js

Using Vue.js for the first time

First impressions on Vue.js 2.0

ELM:

Building a memory game in Elm. Step by step, from scratch.— пишем игру

ELM Insights

Adventures in Elm — почему ELM?

Making Elm code more compact and more readable — делаем ELM более читабельным

A Form Validation Library for Elm — валидируем форму на ELM

TypeScript:

TypeScript vs Flow — кто круче?

Using Typescript with Node JS — пишем сервер на TypeScript

Immutable.js Records in TypeScript

Статии из блога Marius Schulz про TypeScript:

• TypeScript 2.0: Built-In Type Declarations
• Typing Functions in TypeScript
• TypeScript 2.1: async/await for ES3/ES5
• TypeScript 2.1: External Helpers Library
• TypeScript 2.1: Object Rest and Spread

Node.js:

JavaScript Clean Coding Best Practices — Node.js at Scale — лучшая пракатика Node.js

Is Node Better Than Your Legacy Tech Stack?— почему Node.js

3 Lessons about DX from building „now-logs” — пишем логи c now-logs

[Nodejs] Fast Setup MySQL and running in Node.js — работаем с MySQL

GraphQL:

Статьи от Appollo:

• Navigating your transition to GraphQL
• Read from Redux, declare PropTypes, and filter data with GraphQL
• An enhanced GraphQL developer experience with TypeScript
• Apollo Client Developer Tools
• Learn Apollo: Build GraphQL Apps with React, React Native or Exponent
• Apollo on React Native Radio

NativeScript and GraphQL — Best way to handle data — GraphQL на мобильном

How to hack DOM with GraphQL — рендарим страницу через GraphQL

The Future of API Development with GraphQL

PostGraphQL: PostgreSQL meets GraphQL — работаем с PostgreSQL

Use GraphQL to load from any database in your Meteor app — Meteor + GraphQL = <3

GraphQL: Tips after a year in production — подборка советов из опыта

Остальное

Веб-технологии для дизайнеров — зачем и как

Фронтенд для новичка. Куда идти и что делать?

Why are browsers so slow?

Как использовать кастомные шрифты в вебе и не сойти с ума

Иконочные шрифты и почему они не нужны

Five Lessons From My First 18 Months as a Dev — опыт работы в Твиттере

Восемь лет в Opera — опыт работы Вадима Макеева

Logux: Connection lost, data synchronized — интервью с Андреем Ситником (Злые Марсиане)

Chrome 55 uses ~30% less memory than Chrome 54 — верится с трудом

Chrome Bias (and Finding Things To Like in Firefox)

Alternatives to Placeholder Text — плейсхолдер на любой вкус

Propelling developer experience through configuration — почему конфигураций больше чем кода?

Google Analytics Can Show You Screen Resolution ≠ Browser Window — смотрим внимательно на результаты аналитики

Performant Parallaxing — Пол Льюис про параллакс-эффект при прокрутке страницы

Forms Need Validation — как показывать ошибки валидации форм

Programming (mental) models — обзор распространенных концепций

How many Chrome Extensions run in Firefox?— расширения из Chrome Web Store можно сконвертировать в WebExtensions для Firefox

Browsers, not apps, are the future of mobile — про будущее мобильной разработки

What’s new in Chromium 55 and Opera 42

Announcing Samsung Internet 5.0 — новинки браузера

10 things I learned making the fastest site in the world

Туториалы

Pure CSS Horizontal Scrolling — горизонтальная прокрутка без JavaScript

Hierarchy view component with pure CSS (SASS) — древовидный компонент на SASS

A Beginner’s Guide to Pure CSS Images — графика на чистом CSS

Reactive Audio WebVR

Animating scenes with WebGL + Three.js — пишем 3D ёлку на WebGL и Three.js

Developing an IntelliJ / WebStorm JavaScript plugin — создание JavaScript-плагина для IDEA/WebStorm

React/Redux Links — коллекция уроков

DOM Testing React Applications with Jest

How to Snapshot Test Everything in Your Redux App With Jest

Build a Next.js Website in 4 Steps

Getting Started with React Native in 20 Minutes

Linking Animations to Scroll Position in React Native — свайпаем карточки на React Native

Building infinite scroll in React Native — бесконечный скролл на React Native

A simple messaging app with React Native and Socket.io

React Universal with Next.js: Server-side React — Next.js на практике

Angular 2 — Use Your own HTTP Library

The Web Bluetooth module for Angular

Create A Real Time Chat App With Golang, Angular 2, And Websockets

Create a Simple Twitter Bot with Node.js

5 Free VueJS Tutorials

Посмотреть

Debugging JavaScript in WebStorm — отладка JS в WebStorm и Chrome

Яндекс — Гибкая настройка внешнего вида выдачи, или зачем нам понадобилось переопределять константы

JavaScript 30 — бесплатный курс JavaScript за 30 дней

Egghead:

• Learn Advanced CSS Layout Techniques
• Natural Language Processing in JavaScript with Natural
• Create Native Mobile Apps with NativeScript for Angular

Front End Center — Why Inline SVG is Best SVG

AVA Cast — Ep 1. Introduction

The Standard — серия роликов от Google Chrome Developers

Vue.js Fundamentals

Web Not Bombs 7

Я.Субботник по фронтенду 10 декабря

MinskCSS № 1

MoscowJS 34

ffconf в Брайтоне

Fronteers Conference 2016

FrontTalks

KharkivJS #7 2016

Most JS Frameworks Day ’16

CSSConf.Asia 2016

JSConf.Asia 2016

Послушать

Новая серия скринкастов Пятиминутка React:

• React Fiber
• JSX 2.0
• Hot Module Replacement или React Hot Loader?
• Redux, Аctions подряд
• Redux, Derived Data

Веб-стандарты — 43, 44, 45, 46, 47, 48, 49 выпуски

Radio.js:

• Выпуск 43 — Фиолетовый паттерн
• Выпуск 44 — Шашечки или Ember.js?
• Выпуск 45 — Ирония JavaScript или с новым стандартом!

JavaScript Air:

• 43. (Rerun) The past, present, and future of JavaScript
• 44. Async Patterns in JavaScript
• 45. On-site at Connect.tech
• 46. React Native
• 47. Yarn (bonus show)
• 48. JavaScript and the Web Platform

Библиотеки

Siema — легковесная карусель

Regexgen — генератор регулярных выражений

atalegreya — встраиваем графики в текст

CSSPIN — лоадер на CSS

Svelte — UI-фреймворк, компилируемый в JavaScript

Zooming — красивый зум изображений

Premonish — предсказание действий пользователя

Leakage — тестирование утечек памяти

Amazon Autocomplete

Splittable — новый бандлер

Blueprint — UI библиотека для React

Styled-jsx — новый подход к CSS в JS

React Native background job

React Native Facebook UI — UI-прототип

React Fix It — генератор тестов для ошибок

RxDB — offline-first база данных

Release — автоматический генератор релизов

ELM Static HTML — перевод ELM приложение в статический HTML

Демо

Анимация на CSS с помощью свойства box-shadow

Matrix Multiplication — интерактивное умножение матриц на Cycle

React Tetris

Silver Magpie — расширение для Chrome на ELM

Storybooking an Elm App — календарь на ELM и React Story Book

Остальное

React VR Pre-Release

Node v7.4.0

V8 Release 5.6

The State of Babel

20 Years of CSS — история CSS

CSS Reference — хорошая шпаргалка

Node.js Benchmarks — анализ производительности разных версий

Контур.Гайды

Webpack tricks — советы по использованию Webpack

A Guide to 2017 Conferences — список конференций

Документация Vue.js 2.x на русском

Regex Hub — коллекция регулярных выражений

Awesome bits — коллекция побитовых операций

Industry-Tailored App Examples: Node.js | ReactJS | AngularJS | Bootstrap — примеры приложений

md2googleslides — Google Slides на Markdown

YoptaScript — дворовой слэнг JavaScript

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

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

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