Front-Еnd дайджест #20: React VR, Svelte, підсумки 2016 і наступаючі тренди 2017 - SEO Blog - все про пошукову оптимізацію та веб розробку українською.

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 of Posts 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"

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

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

Prerender on hover?

Input Masking — data-маска вводу на практиці

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

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 Way ES6

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 content for faster

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

Серія статей від 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 :

Does Angular 2 Surpass React?

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

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. — пишемо гру

Adventures in Elm — чому ELM?

— робимо 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:

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:

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

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

The Future of Development with API 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 — плейсхолдер на будь-який смак

Метальні таємничі 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

— Next.js на практиці

Angular 2 — Use Your own HTTP Library

The Web Bluetooth module for Angular

Create a Simple Twitter Bot with Node.js

5 Free VueJS Tutorials

Подивитися

Debugging JavaScript in WebStorm — налагодження JS в WebStorm і Chrome

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

JavaScript 30 — безкоштовний курс JavaScript за 30 днів

Egghead:

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 грудня

ffconf в Брайтоні

Fronteers Conference 2016

KharkivJS #7 2016

Most JS Frameworks Day '16

CSSConf.Asia 2016

JSConf.Asia 2016

Послухати

Нова серія скрінкасти П'ятихвилинка React :

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

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

JavaScript Air:

Бібліотеки

Siema — легка карусель

Regexgen — генератор регулярних виразів

atalegreya — вбудовуємо в текст графіки

CSSPIN — лоадер на CSS

Svelte — UI-фреймворк, компільований в JavaScript

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

Premonish — передбачення дій користувача

Leakage — тестування витоків пам'яті

Amazon Autocomplete

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

Інше

React VR Pre-Release

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

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

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

Опубліковано: 06/01/17 @ 11:00
Розділ Блоги

Рекомендуємо:

Як українські IT-компанії відсвяткували Новий рік 2017
Чим незадоволені українські програмісти? Глас народу 2016
Дайджест приколів 2016 року
Дайджест: фронтенд для новачка, поради IT-спікера, htop explained
Кращі статті 2016 року