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 год
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"
Document Outlines in HTML 5.1 — структура документа по новым стандартам
HTML Interactive Form Validation — новые возможности валидации форм в Safari 19
Input Masking — data-inputmask на практике
An SVG That Isn’t All... SVG — про недооцененные возможности формата
Writing HTML with accessibility in mind — улучшение доступность разметки
Логотип не отвечает или временно недоступен — доступная разметка логотипа
CSS:
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
Animation in Design Systems — функциональная анимация
CSS Shorthand Syntax Considered an Anti-Pattern
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 для интерпретатора
Resolve Promises externally with this one weird trick
Sounds fun — играем с Web Audio API
Replacements for setInterval Using requestAnimationFrame
Service Worker, what are you? — сервис-воркери в иллюстрациях
HTTP/2 Server Push and Service Workers: The Perfect Partnership — паттерны на практике
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:
Installing web apps on phones (for real) — ждем новые версии Chrome для Android
What I’ve learnt developing a modern progressive web app
Cерия статей от Auth0 — Introduction to Progressive Web Apps:
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
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:
Основы производительности 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. — пишем игру
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 — подборка советов из опыта
Остальное
Веб-технологии для дизайнеров — зачем и как
Фронтенд для новичка. Куда идти и что делать?
Как использовать кастомные шрифты в вебе и не сойти с ума
Иконочные шрифты и почему они не нужны
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 — почему конфигураций больше чем кода?
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
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
Посмотреть
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
The Standard — серия роликов от Google Chrome Developers
Я.Субботник по фронтенду 10 декабря
Послушать
Новая серия скринкастов Пятиминутка React:
- React Fiber
- JSX 2.0
- Hot Module Replacement или React Hot Loader?
- Redux, Аctions подряд
- Redux, Derived Data
Веб-стандарты — 43, 44, 45, 46, 47, 48, 49 выпуски
- Выпуск 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 — тестирование утечек памяти
Splittable — новый бандлер
Blueprint — UI библиотека для React
Styled-jsx — новый подход к CSS в JS
React Native Facebook UI — UI-прототип
React Fix It — генератор тестов для ошибок
RxDB — offline-first база данных
Release — автоматический генератор релизов
ELM Static HTML — перевод ELM приложение в статический HTML
Демо
Анимация на CSS с помощью свойства box-shadow
Matrix Multiplication — интерактивное умножение матриц на Cycle
Silver Magpie — расширение для Chrome на ELM
Storybooking an Elm App — календарь на ELM и React Story Book
Остальное
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.
