Front-end дайджест #29: новый Webpack 4, Prisma, создатель Vue.js отвечает Хабру

В выпуске: используем Web Worker и CSS Grid в работе, оптимизируем Webpack и учим ReasonML.

CSS и CSS in JS

CSS Paint API — возможности CSS Paint в новом Chrome 61

Everything you need to know about CSS Variables — все, что нужно знать о CSS переменных

A Houdini Quickstart: registerProperty — начинаем писать CSS in JS вместе с Houdini

Using Media Queries For Responsive Design In 2018 — зачем нужны CSS Media в эпоху Flexbox и CSS grid

Modern CSS Explained For Dinosaurs — хронология развития CSS инструментов

CSS Grid Layout Module Level 2 — W3C

How I design with CSS grid — проектируем и верстаем вместе с CSS grid

CSS Grid layout — crossed sections — делам CSS проще вместе с Grid’ами

Recreating the GitHub Contribution Graph with CSS Grid Layout — Github график коммитов на CSS гридах

JavaScript

Top 10 JavaScript errors from 1000+ projects (and how to avoid them)

Советы и приёмы ES6, которые сделают ваш код чистым и читабельным

Understanding mergeMap and switchMap in RxJS

Workers at Your Service — особенности работы service workers в Safari

An Overview of JavaScript Testing in 2018 — на чем тестировать в 2K18

Build Pacman — пошагово пишем игру на Ember

JavaScript, I love you, you’re perfect, now change — что стоит изменить в JavaScript

Web Performance Optimization with Webpack — серия статей по оптимизации производительности фронтенда с Webpack от Ивана Акулова и Эдди Османи

Progressive Web Apps (PWA)

Progressive Web Apps — The Next Step in Web App Development

Welcoming Progressive Web Apps to Microsoft Edge and Windows 10 — PWA скоро в Store на Windows 10

Progressive Web App Roadshow — серия видео о PWA от инженеров Google

React

Sneak Peek: Beyond React 16

Why I’m switching from Angular to React and Redux in 2018 — еще одно очко в пользу React

The Beginner’s Guide to React — учим React

Bringing Together React, D3, And Their Ecosystem

Top React and Redux Packages for Faster Development — что нужно для быстрой разработки на React

Higher-Order Components: The Ultimate Guide

Evolving Patterns in React

Redux и его убийцы:

• Learn Redux by Building Redux from Scratch — пишем свой Redux
• Redesigning Redux — переосмысливаем Redux
• Replacing redux with the new React context API

Статьи от Kent C. Dodds из PayPall:

• The state reducer pattern
• React’s new Context API
• Application State Management

React Native

How to Become a React Native Developer in 2018 — учим React Native

Building the F8 App — руководство по созданию кроссплатформенных приложений на React Native

Building An E-commerce Search App with React Native

Vue.js

Создатель Vue.js отвечает Хабру

What’s new in Vue Devtools 4.0

Replacing jQuery With Vue.js: No Build Step Necessary — избавляемся от jQuery (для тех, кто этого еще не сделал)

Let’s Build a Custom Vue Router — пишем роутер

Managing User Permissions in a VueJS App

10 things I love about Vue

Vue + Vuex — Getting started

Angular

NgRx 5 and Schematics

Getting to Know the @Attribute Decorator in Angular

Demystifying the Dependency Inversion Principle in Angular

Introducing NGRX Actions 3.0

Your NGRX Effects are Probably Wrong

Angular Routing Data with NGRX Effects

Ultimate Angular + Prettier Cheatsheet

GraphQL и Apollo

An Introduction to GraphQL

Какие проблемы решает GraphQL и с чем его есть — A GraphQL Primer: Why We Need A New Kind Of API:

• Part 1
• Part 2

Статьи из блога Apollo:

• Improved Apollo Client Devtools
• Securing Your GraphQL API from Malicious Queries
• Zero-config GraphQL state management
• What’s next for React Apollo
• GraphQL vs. REST

Typescript

Sexier Imports in TypeScript

TypeScript — JavaScript with superpowers

Manual Typing is No Fun: Introducing TypeWiz!

Node.js

Building a Node.js WebSocket Chat App with Socket.io and React

How to Build a RESTful API with Authentication in 5 minutes — all from your command line

AWS Lambda Go vs. Node.js performance benchmark: updated

Библиотеки

Micron — контролируем CSS анимации с JavaScript’а

Callbag-basics — минималистичная реактивная библиотека от Андре Стальца

Nact — используем акторы в Node.js приложениях

Glow — улучшаем Flow

Airtap — тестируем JavaScript в 800+ браузерах.

Karmatic — пишем тесты по новому в браузере — zero-configuration с использованием Karma, Webpack, Jasmine и Puppeteer.

Анимируем React-интерфейс:

• React-morph
• React Flip Move

Urql — делаем взаимодействие с GraphQL проще на клиенте

Unstated — минималистичный стейт-менеджмент

Используем силу Web Worker’ов:

• Greenlet — асинхронный код
• Workerize — асинхронная подгрузки модулей
• Workerize-loader — автоматически подгружаем модули c Webpack
• Stockroom — стет приложения

Послушать

Frontend Weekend:

• #38 — Владимир Гриненко про БЭМ и работу в Симферополе
• #39 — Григорий Шехет про жизнь и работу в Сан-Франциско, frontend-дайджест и FRP
• #40 — Александра Шинкевич о переезде в Минск и притеснении девушек в IT
• #41 — Виталий Харисов о создании симферопольского офиса и украинской разработке Яндекса

Веб-стандарты:

• Выпуск № 106
• Выпуск № 107
• Выпуск № 108
• Выпуск № 109

Пятиминутка React:

• #39 — TypeScript 20/80
• #40 — Яндекс Трекер на фоне YouTrack

devschacht:

• Ночной фронтенд #20 — Немного новостей и инверсия контроля
• Ночной фронтенд #21 — Rolling Scopes, день первый
• Ночной фронтенд #22 — Rolling Scopes, день второй
• Ночной фронтенд #23 — SPb Frontend Meetup: Космос, Jenkins и проблемы TCP

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

• #36 Жалкая попытка Webpack догнать Parcel
• #37 Секреты React
• #38 Rolling Scopes. Впечатления
• #39 Улучшаем Javascript вопреки божественному замыслу

Radio.js:

• Выпуск 51: MiniBeerJS с Сергеем Рубановым и Григорием Шехет

Egghead подкаст:

• Angular Web Applications with Juri Strumpflohner and Rob Wormald (Angular Core Team)
• 12-factor Javascript Applications using Docker with Mark Shust
• Data Viz using D3 with Ben Clinkinbeard
• React Router with Michael Jackson
• Reactive Programming and the P2P Web with André Staltz

Конференции и митапы

PiterJS #21

WSD в Москве 2018

KyivJS#17 February 2018

React Vienna January 2018

Что нового

Webpack 4 — Перемога!

Parcel v1.6.0

Prisma

Indexed Database API 2.0 — в статусе рекомендованные

RunKit — REPL для разработки на Node.js

Web Assembly Studio — разрабатываем WASM-модули в браузере

Rekit Studio — React IDE

Node v5.7.0

Новый Storage Access API в Safai

Dart 2 — кто использует?

Kutt — новый способ сокращать URL

Демо

OpenSC2K — SimCity 2000 на JavaScript

ExpressCart — магазин на Node.js (Express, MongoDB) с потдержкой Stripe, PayPal и Authorize.net

Vue Enterprise Boilerplate

Остальное

Hiccup, Macros, API design, and magic — Никита Прокопов о генерации HTML в Clojure

5 Practical Ways To Share Code: From NPM To Lerna And Bit

Как учиться в 2К18:

• The JavaScript Learning Landscape in 2018
• The 2018 Web Developer Roadmap

Flutter — 5 reasons why you may love it — почему стоит начать писать на Flutter

We’re nearing the 7.0 Babel release. Here’s all the cool stuff we’ve been doing — ждем новый Babel 7.0

A secure web is here to stay — а ты перешел на HTTPS?!

Polacode — плагин для VS Code который делает скриншоты кода

Maybe you don’t need Rust and WASM to speed up your JS — оптимизируем наш код

Exploring ReasonML and functional programming — новая книга Акселя Раушмайера

18 марта в Киеве пройдет конференция — JavaScript fwdays’18. Будет 2 потока докладов, tech talks, workshop и Speakers’ Corner — программа. Для читателей дайджеста промокод на 15% скидку: frontend-digest-fwdays.

Grammarly ищет талантливых Front-End инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. И если вам интересно стать частью её, то стучитесь ко мне в Facebook или Twitter.

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

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