Front-end дайджест #30: більше 150 корисних посилань за травень
У випуску: дивимося на перфоманс під новим кутом разом з Guess.js, досліджуємо різні CSS властивості і хакі, а також що нового в Angular 6 і React 16.x.
HTML та CSS
Finger-friendly чисельного 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 Frontend For Development — нова CLI
Anyway, this is why I prefer Vue over React — рубрика чому Vue.js, а не React
Angular
Improve your Angular app performance by using this simple Вами 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 — універсальний 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 або .
З вами був Григорій Шехет. За допомогу в оформленні дайджесту дякую своїх колег.
? Попередній випуск: Frontend дайджест #29 .
Опубліковано: 02/06/18 @ 07:00
Розділ seo
Рекомендуємо:
Поради сеньйорів: як прокачати знання junior Project Manager vol.1
Зростання кількості заявок в 3 рази при підвищенні бюджету на 20%
Junior дайджест: курси, стажування, вакансії. Червень'18
Покоління Z. Чому підлітки починають займатись програмуванням і що з того виходить
iOS дайджест #26: Swift Tips, закони Core Data, WWDC Scholarship