Front-end дайджест #30: более 150 полезных ссылок за май
В выпуске: смотрим на перфоманс под новым углом вместе с Guess.js, исследуем различные CSS свойства и хаки, а также что нового в Angular 6 и React 16.x.
HTML и CSS
Finger-friendly numerical inputs with inputmode — как работает новый атрибут для текстовых полей
How CSS works: Parsing & painting CSS in the critical rendering path — как работает CSS
It All Started With Emoji: Color Typography on the Web
Where Lines Break is Complicated. Here’s all the Related CSS and HTML
Getting Started With CSS Layout
Переменные и пользовательские свойства — делаем CSS динамическим:
- Dark theme in a day — меняем тему приложения
- CSS Environment Variables
- A Strategy Guide To CSS Custom Properties
Используем Гриды:
Исследуем CSS свойства и селекторы:
JavaScript
11 Javascript Utility Libraries You Should Know In 2018 — что использовать в 2K18?
Top 10 JavaScript errors from 1000+ projects (and how to avoid them) — разбираем самые популярные ошибки в JavaScript
BigInt: arbitrary-precision integers in JavaScript — новый формат больших чисел в JavaScript
Implementing an async queue in 23 lines of code
JavaScript Symbols, Iterators, Generators, Async/Await, and Async Iterators — All Explained Simply — как работают новинки ES6
The 7 Biggest Lessons I’ve Learned By Building A Twitter Bot — строим Twitter-бота
A Gentle Introduction to Prepack (Part 1) — Дэн Абрамов о принципах работы Prepack
Real-time Human Pose Estimation in the Browser with TensorFlow.js — распознаем позицию людей в браузере вместе с TensorFlow
React и React Native
The most important lessons I’ve learned after a year of working with React
5 Tools For Faster Development In React
How React Reconciliation Works
Let’s fall in love with React Fiber
What can the React Context API do for you? Multi-language text, Modals, and Themes
JSX can do that? — делаем вычисления в JSX
Хендлинг событий в React классах:
- The best way to bind event handlers in React
- This is why we need to bind event handlers in Class Components in React
Менеджим стейт React приложений:
- You Don’t Need Redux, MobX, RxJS, Cerebral — новый стейт менеджмент Meiosis
- Managing State in React With Unstated
Строим приложения и демки на React:
- How to build native desktop apps with JavaScript
- React and Firebase are all you need to host your web apps
- Build a polling web app with Next.js
- Build Your Own Blog Using Gatsby and React
- How to build your own React boilerplate
- Building a Progressive Web App in React
- Dynamic Bézier Curves — динамическими кривые Безье в SVG на React
Тестируем React приложение:
React Native:
- Is React Native podium-ready? — разработчики из Злых Марсиан про опыт разработки B2B-приложения на React Native
- React Native SoundCloud Replica
Vue.js
How to use the Vue.js DevTools
Vue.js — Considerations and Tricks
Hello Protovue — Prototyping Component Framework for Vue.js
What does the ‘h’ stand for in Vue’s render method?
CSS Tricks Screencast Learning Vue
Vue CLI 3: A Game Changer For Frontend Development — новая CLI
Anyway, this is why I prefer Vue over React — рубрика почему Vue.js, а не React
Angular
Improve your Angular app performance by using this simple Observable cache decorator — оптимизируем Observables
Angular Ivy change detection execution: are you prepared?
Why It’s Time to Say Goodbye to Angular Template-Driven Forms
Как все хорошо в Angular 6:
- Creating a Library in Angular 6
- How To Build Responsive Layouts With Bootstrap 4 and Angular 6
- Build A Real World Beautiful Web APP with Angular 6 — A to Z Ultimate Guide (2018)
- Building Custom Elements / Web Components with Angular 6
GraphQL и Apollo
GraphQL: 3 Years in, and lessons learned
GraphQL Schema Stitching in action with Apollo
Three ways to represent your GraphQL schema
Building AI Enabled GraphQL Applications
Reconciling GraphQL and Thrift at Airbnb
Node.js
A crash course on securing Serverless APIs with JSON web tokens — думаем о секьюрности
Memory Leaks in NodeJS | Quick Overview — ищем утечки памяти
The Beginner’s Guide to Meteor — руководство по Meteor.js
How You Can Start Contributing to Node.js Today — как развивать Node.js
Build live comments with sentiment analysis using Nest.js
Implementing SOLID and the onion architecture in Node.js with TypeScript and InversifyJS
How to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Библиотеки
Guess.js — новый уровень улучшения перформанса
Prerender-Loader — universal pre-rendering для Webpack
Vuido — нативные приложение на Vue.js
Impact — HTML5 Game Engine
Saber.js — пишем статические сайты на Vue.js
fast-copy — быстрое копирование объектов
Marble.js — FRP HTTP миделвер для Node.js, на TypeScript и RxJS
Послушать
Frontend Weekend:
- #50 — Алексей Симоненко об истории создания HTML Academy и особенностях pitercss_conf
- #51 — Владимир Новик о работе независимого консультанта, переезде в Израиль и книге про React Native
- #52 — Сергей Бережной о
13-ти годах в Яндексе, управлении ШРИ и проблемах из-за витания в облаках - #53 — Виталий Слободин об истории PhantomJS и о том, как развивать региональное IT-сообщество
- #54 — Всеволод Шмыров о том, как из разработчика игр на Flash стать тимлидом в Яндексе
Веб-стандарты:
devschacht:
- Ночной фронтенд #32: Ограничения, которые мы накладываем на код
- Ночной фронтенд #33: SOLID — это надёжность
- Ночной фронтенд #34 — HolyJS 2018 Piter
Фронтенд Юность (18+):
- Выпуск на колёсах: Реакт для тупых
- #46 Печальное состояние экосистемы JavaScript 2
- #47 Олег Мохов: от React Finland до React Russia
- #48 Я верстаю алюминиевые криптоогурцы
- #49 Другой взгляд на конференции
Radio.js:
Egghead подкаст:
- Evan You, creator of Vue.js
- Iheanyi Ekechukwu on education, programming, and managing side projects
- Michel Weststrate creator of Mobx and Immer Libraries for JavaScript
Конференции и митапы
React Amsterdam 2018 Conference
MinskJS Meetup #4 — 24 мая 2018
Chrome and Web at Google I/O 2018
React Europe 2018:
Подборки TOP-10 статей за май
От Techburst.io:
От Mybridge:
Подборки TOP-10 open-source за май
От Techburst.io:
От Mybridge:
Что нового
Microsoft Edge 17 Developer Guide
ReLaXed — вёрстка PDF-файлов при помощи веб-технологий
Custom domains on GitHub Pages gain support for HTTPS — новинки Github-пейджей
Остальное
A Guide to Becoming a Full-Stack Developer in 2017
Service Worker Cookbook от Mozilla
Goodbye Facebook, Hello Robinhood — Lee Byron про уход из Facebook
VS Code can do that?! — хаки VSCode
Managing Heading Levels In Design Systems
To Yarn and Back (to npm) Again — когда вернемся к NPM?
The Front-End Tooling Survey 2018 — Results
Как потерять друзей и заставить всех себя ненавидеть, делая код-ревью
Исследуем инструменты разработчика:
- Inspecting Animations in DevTools — дебажим анимации
- 10 Firefox Dev Tools things that you might not know yet
Секьюрити чек-листы:
Grammarly ищет талантливых Front-End инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. И если вам интересно стать частью её, то стучитесь ко мне в Facebook или Twitter.
С вами был Григорий Шехет. За помощь в оформлении дайджеста благодарю своих коллег.
← Предыдущий выпуск: Frontend дайджест #29.
