В выпуске: прошедшие 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
Tutorial: GraphQL Subscriptions (server-side)
5 Things They Don’t Want You to Know About React-Apollo
A Look at Apollo, From a Relay Perspective
CSS in JS
A Unified Styling Language — про различные CSS in JS имплементации, и как он изменяет мир
Creating truly universal React component systems — universal style-components
Rockey. Motivation and Requirements
Building a React Component Library — строим UI-библиотеку на styled-components:
Vue.js
Сможет ли Vue.js захватить мир:
- Debate: VueJS vs. ReactJS
- Will Vue.js Become a Giant Like Angular or React?
- Use Any Javascript Library With Vue.js
- Why Vue JS could make React JS irrelevant in 2018
Строим приложения на Vue.js:
- Building an extendable calendar in Vue.js: Part 1
- Building an app in Vue JS (webpack, axios, bootstrap 4, reddit, and infinite scrolling in vanilla javascript)
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:
- Building a NodeJS web server with HAProxy and Let’s Encrypt on Debian Stretch
- Build a simple Weather App with Node.js in just 16 lines of code
ReasonML
Статьи разработчика Khan Academy Джареда Форсайт:
- Getting Started with Reason and BuckleScript
- JavaScript Interop with Reason and BuckleScript
- Your first native Reason/OCaml project
- When will ReasonML be ready?
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
Библиотеки
Flubber — утилита для анимирования форм
React Flight — утилита для анимирования для React приложений
Butternut — новый минифаер кода
СoolHue — коллекция градиентов для вашего приложения
CSS-Doodle — CSS-компоненты для рисования паттернов
SVGI — анализатор SVG-изображений
Kocha — Mocha без глобальных переменных
Послушать
Веб-стандарты — 70, 71, 72, 73
Пятиминутка React:
- #18 — pnpm
- #19 — React Europe и Holy JS
- #20 — MobX вместо Redux?
- #21 — Список пожеланий на следующие 6 месяцев разработки React
- #22 — News
Frontend Weekend:
- FW #3 — Сколько стоит организовать meetup и прибыльно ли преподавать
- FW #4 — Как стать звездой frontend’а за год
- FW #5 — Секреты успешных докладов для frontend-конференций
- FW #6 — Организатор MoscowJS про зарплаты, DevConf и WWDC
- FW #7 — Технический евангелист про React VR и маркетинг / Розыгрыш
Shop talk show:
Фронтенд Юность (18+):
- #1 Дизайнеры, как убийцы НПМ
- #2 Prepack — манна небесная или маркетинговый булшит?
- #3 jQuery — MILF, которого мы не заслужили
- #4 Сколько зарабатывают фронтендеры
- #5 Котлин для фронтенда — гибель или панацея?
- #6 Шок! Вся правда об Ember.js
- #7 Интерфейсы в JavaScript. Кому это нужно?
- #8 Webpack 3.0. Ощущение безнадёги и грусти
Посмотреть
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
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
Prettier 1.5.0 — поддержка GraphQL, CSS-in-JS & JSON, а также TypeScript и CSS с 1.4.0
Bonsai — оптимизация дерева зависимостей Webpack от Pinterest
VulcanJS — создаем приложения на React и GraphQL
Остальное
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. Благодарю всех за помощь!
С вами был Григорий Шехет, @AGambit95. За помощь в оформлении дайджеста благодарю своих коллег.
← Предыдущий выпуск: Frontend дайджест #24.