Front-Еnd дайджест #25: пишемо і вчимо WebAssembly, майбутні стандарти JavaScript і зможе Vue.js захопити світ?

У випуску: минулі React конференції Europe, Vienna та Kyiv, що варто вивчати Front-End інженерові в 2017 році, слухаємо нові подкасти, а також матеріали по ReasonML, React, Node.js і багато іншого.

CSS

70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization

Locally Scoped CSS Variables: What, How, and Why — CSS-змінні на практиці

Handling Long and Unexpected Content in CSS — як вирішити проблему з довгим контентом

CSS Shapes, clipping and masking — and how to use them — про використання CSS фігур і масок

Велика стаття про гріди (CSS Grid Layout)

Connect: behind the front-end experience — про Front-End в Stripe Connect

PiterCSS Conference — текстовий лог PiterCSS

JavaScript

JSC ? ES6 — WebKit і ES6

How to get the most out of the JavaScript console — секрети JavaScript console

The JavaScript Standard — про майбутні стандарти JavaScript

Adopting Flow & TypeScript — порівняння впровадження типізації в JavaScript

Unambiguous Webpack config with Typescript

JavaScript: What the heck is an Immediately-Invoked Function Expression?

Functional programming in Javascript is an antipattern

JavaScript's new #private class fields — нові приватні поля у класах

ECMAScript Interfaces Proposal — пропозиція по додаванню інтерфейсів

Into the Great Unknown — Migrating from Mocha to Jest — про перехід інженера eBay c Mocha на Jest

An intro to web components with otters — введення в web-компоненти

Reduce your javascript bundle size by 77% скоротити розмір JavaScript бандла

A crash course in memory management — вчимося управління пам'яттю в картинках

What if all your mobile devices formed a single screen? — ідеї Swip.js і для чого він призначений

React і React Native

Що таке React і React Native — для новачків

A React TODOs example, explained — Todo-список на React під мікроскопом

Rebuilding Slack's Emoji Picker in React — як інженери Slack збільшили продуктивність emoji пикера

Techniques for decomposing React components — як правильно розбивати ваші React компоненти

Avoiding deeply nested component trees — оптимізуємо структуру компонентів

Why I Chose React Over Vue — чому React, а не Vue

Handling State in React: Four Immutable Approaches to Consider

Straightforward code splitting with React and Webpack

5 ways we improved our React Native app

Apollo і GraphQL:

Full Stack React Native Development using GraphCool and Apollo Subscriptions + React Navigation

graphql-tools: A simpler way to create GraphQL APIs

Come speak at GraphQL Summit 2017!

Building React Apps with GraphQL, Graphcool & Apollo

Reducing our Redux code with React Apollo

How we built Launchpad

Tutorial: GraphQL Subscriptions (server-side)

5 Things They don't Want You to Know About React-Apollo

A Look at Apollo, From a Perspective Relay

CSS in JS

A Unified Styling Language — про різні CSS in JS імплементації, і як він змінює світ

Creating truly універсальний React component systems — універсальний style-components

Introducing React iotaCSS

Rockey. Motivation and Requirements

Building a React Component Library — будуємо UI-бібліотеку на styled-components:

Vue.js

Зможе Vue.js захопити світ:

Using in Mixins Vue.js

Будуємо програми на Vue.js:

Node.js

util.promisify() для заміни колбэков на промисы

Upgrading from Node 6 to Node 8: a real-world performance comparison — порівняння продуктивності 6 і 8 версії Node.js

Node.js Child Processes: Everything you need to know — дочірні процеси в Node.js

Why Enterprises are Using Node.js for Digital Transformation — чому ентерпрайз почав використовувати Node.js?

Node.js Streams: Everything you need to know — все що потрібно знати про потоках

Набір туториалов за Node.js:

ReasonML

Статті розробника Khan Academy Джареда Форсайт:

Cool Things Reason Formatter Does — про переваги Reason

Mareo: Reason + BuckleScript + Mario

WebAssembly

Assembling WebAssembly — WebAssembly в Safari

WebAssembly cut Figma's load time by 3x — як WebAssembly скоротив час завантаження графічного редактора в 3 рази

WebAssembly 101: a developer's first steps — перші кроки у використанні WebAssembly

Бібліотеки

Cell

Preact CLI

Flubber — утиліта для анимирования форм

React Flight — утиліта для анимирования для React додатків

Butternut — новий минифаер коду

СoolHue — колекція градієнтів для вашої програми

CSS-Doodle — CSS-компоненти для малювання патернів

SVGI — аналізатор SVG-зображень

Kocha — Mocha без глобальних змінних

Послухати

Веб-стандарти — 70 , 71 , 72 , 73

П'ятихвилинка React:

Devschacht — 3, 4

Frontend Weekend:

Shop talk show:

Фронтенд Юність (18+):

Подивитися

Why We Chose Vue.js — Inside GitLab — чому вибрала GitLab Vue.js

Chrome 59: Headless Chrome, Native Notifications on macOS and the Image Capture API — новинки Chrome 59

Live Streams Юрія Артюха

Egghead:

Get Started Using WebAssembly (wasm) — введення в WebAssembly
Up and running with Preact — вчимо Preact

Конференції

React Kyiv:

React Vienna:

React Europe:

Що нового?

TC39, ECMAScript, and the Future of JavaScript — чекаємо на нову версію стандартів

Powerful New Additions to the CSS Grid Inspector in Firefox Nightly — новинки Firefox Nightly

Bootstrap Jobs — сервіс пошуку Bootstrap розробників і роботодавців

ID3 — середовище розробки для створення візуалізацій на D3.js

Pret-рівня 1.5.0 — підтримка GraphQL, CSS-in-JS & JSON, а також TypeScript і CSS з 1.4.0

Bonsai — оптимізація дерева залежностей Webpack від Pinterest

VulcanJS — створюємо програми на React і GraphQL

Redux-First Router

Інше

CSS vs. JavaScript: Trust vs. Control

ES6 Katas — завдання для вивчення ES6

Choosing a frontend framework in 2017

React Express — введення в сучасний React-стек

Spellbook of Modern Web Dev — що потрібно знати сучасному веб-розробнику

Our entire team of engineers use this front end development guide — стек технологій, який використовує Grab

A day without Javascript — як справляються з відключенням JavaScript популярні сайти

ECMA-414: Modularizing the JavaScript Standard — про модульності стандартів

Awesome Design Systems — колекція дизайн-систем

Yarn determinism — навіщо він потрібен?

HTTPS on Stack Overflow: The End of a Long Road — як StackOverflow переходив на HTTPS

HTTP/2 push is tougher than I thought — розвіювання всіх міфів про HTTP/2

Browserslist is a Good Idea — чим гарний Browserlist?

8 npm Tricks You Can Use to Impress Your Colleagues — 8 секретних прийомів NPM

Про дизайнерів і програмістів — про взаємодію дизайнерів з програмістами

Expenses — progressive web application, який для обчислень використовує Google Sheets на React

Mastering Chrome Developer Tools: Next Level Front-End Development Techniques

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

Також прошу хвилину уваги. Цього року хочу поїхати на ReactiveConf з доповіддю про Focal — стейт-менеджмент для React додатків, який ми розробили Grammarly. Але для цього мені знадобиться ваша допомога. Будь ласка, поставте зірочку до моєї гисте: git.io/vQZbU . Дякую всім за допомогу!

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

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

Опубліковано: 30/06/17 @ 10:00
Розділ javascript

SEO Блог