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 скоро в Windows Store на 10
Progressive Web App Roadshow — серія відео про PWA від інженерів Google
React
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
Redux і його вбивці:
- Learn Redux by Building Redux from Scratch — пишемо свій Redux
- Redesigning Redux — переосмислюємо Redux
- Replacing redux with the new React context API
Статті від Kent C. Dodds з PayPall:
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
Angular
Getting to Know the @Attribute Decorator in Angular
Demystifying the Dependency Inversion Principle in Angular
Your NGRX Effects are Wrong Probably
Angular Routing Data with NGRX Effects
Ultimate Angular + Pret-Рівня Cheatsheet
GraphQL і Apollo
Які проблеми вирішує GraphQL і з чим його їсти — A GraphQL Primer: Why We Need A New Kind Of API:
Статті з блогу Apollo:
- Improved Apollo Client Devtools
- Securing Your GraphQL from API Malicious Queries
- Zero-config GraphQL state management
- What's next for React Apollo
- GraphQL vs. REST
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-інтерфейс:
Urql — робимо взаємодія з GraphQL простіше на клієнті
Unstated — мінімалістичний стейт-менеджмент
Використовуємо силу Web Worker'ов:
- Greenlet — асинхронний код
- Workerize — асинхронна підвантаження модулів
- Workerize-loader — автоматично подгружаем модулі c Webpack
- Stockroom — стетем додатки
Послухати
Frontend Weekend:
- #38 — Володимир Гриненко про БЕМ і роботу в Сімферополі
- #39 — Григорій Шехет про життя і роботу в Сан-Франциско, frontend-дайджест FRP
- #40 — Олександра Шинкевич про переїзд в Мінськ і утиску дівчат в IT
- #41 — Віталій Харисов про створення сімферопольського офісу та української розробки Яндекса
Веб-стандарти:
П'ятихвилинка React:
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:
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
Конференції і митапы
Що нового
Webpack 4 — Перемога!
Indexed Database API 2.0 — у статусі рекомендовані
RunKit — REPL для розробки на Node.js
Web Assembly Studio — розробляємо WASM-модулі в браузері
Rekit Studio — React IDE
Новий Storage Access API в Safai
Dart 2 — хто використовує?
Kutt — новий спосіб скорочувати URL
Демо
OpenSC2K — SimCity 2000 JavaScript
ExpressCart — магазин на Node.js (Express, MongoDB) з потдержкой Stripe, PayPal і Authorize.net
Інше
Hiccup, Macros, API design and magic — Микита Прокопов о генерації HTML в Clojure
5 Practical Ways To Share Code: From NPM To Lerna And Bit
Як вчитися в 2К18:
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 або .
З вами був Григорій Шехет. За допомогу в оформленні дайджесту дякую своїх колег.
? Попередній випуск: Frontend дайджест #28 .
Опубліковано: 03/03/18 @ 11:00
Розділ Блоги
Рекомендуємо:
Ruby/Rails дайджест #15: ювілей Ruby, JIT у Ruby 2.6, DHH і серія відео On Writing Software Well
Лютий 2018 — финстрип, 59К, подвоївся за місяць
Проблема плинності кадрів, або Як утримати тих, кого навчив
Amazon купує стартап Ring з R&D-центром у Києві за $1 млрд
.NET дайджест #22: експериментальний фреймворк Blazor, асинхронні методи, Rider 2017.3