Front-end дайджест #36: New React Dev Tools и улучшение производительности Instagram
В выпуске: нативный лейзилоадин в новой версии Chrome, продолжаем использовать React Hook’и (смогут ли они заменить Redux?), а также как новые фичи в CSS помогают жить лучше.
Что нового
FireFox Team:
Chrome Team:
- Deprecations and removals in Chrome 77
- What’s New In DevTools (Chrome 78)
- The Native File System API: Simplifying access to local files — новый API для работы с локальными файлами.
Native lazy-loading for the web — нативная ленивая подгрузка при помощи атрибута loading в Chrome 76.
NodeGUI and React NodeGUI — пишем десктопные приложения на JavaScript на основе QT.
Can I email — таблица доступности возможностей веб-платформы в email-движках.
CSS и CSS in JS
Overflow And Data Loss In CSS — строим адаптивную к контенту верстку, без потерь данных.
Using a PostCSS function to automate your responsive workflow — делаем CSS респонсив, используя функцию rfs.
Logical Operations with CSS Variables — использование CSS-переменных на примере геометрических фигур.
Various Methods for Expanding a Box While Preserving the Border Radius — разбор методов увеличения размера элемента при наведении на него.
CSS Security Vulnerabilities — как CSS может повлиять на безопасность вашего веб-приложения.
Can you rotate the cursor in CSS? — примеры вращения курсора.
Новые CSS свойства text-decoration-*:
- Styling Links with Real Underlines — text-decoration;
- text-decoration-skip-ink.
JavaScript
Using the DOM like a Pro — глубокий обзор использования различных DOM-методов.
Get started with GPU Compute on the Web — введение в GPU-вычисления в вебе.
The Essential Guide To JavaScript’s Newest Data Type: BigInt — введение в BigInt в JavaScript.
Machine Learning For Front-End Developers With Tensorflow.js — введение в машинное обучение с Tenserflow.js.
Faster Image Loading With Embedded Image Previews — предзагрузка изображений без генерации картинок в маленьком разрешении.
The story of a V8 performance cliff in React — как V8 работает в зависимости от JavaScript-переменных.
Using Native JavaScript Modules in Production Today — как использовать нативные JavaScript модули в реальной жизни (демо).
Should you be using Web Workers? (hint: probably not) — плюсы и минусы внедрения Web Worker’ов.
React
How to write great React — как писать React-код лучше (сборник советов).
Используем React Hooks:
- Draggin’ and Droppin’ in React
- Using requestAnimationFrame with React Hooks
- Why We Switched to React Hooks
- Duplication in State Management: A Story of a Bug
- React useEffect Hooks in Action
- Do React Hooks Replace Redux?
3 Security Pitfalls Every React Developer Should Know — начинаем думать о безопасности.
GraphQL
Multiplayer Tic Tac Toe with GraphQL — строим игру на GraphQL.
How we learned to stop worrying and love GraphQL — про использование GraphQL в проектах Revolut.
Angular
Why you should choose Angular for your next front-end project.
Perspectives from Contributing to Angular.
Real-Time Search Engine With RxJS: Part 1, Part 2.
Angular: show loading indicator when obs$ | async is not yet resolved.
Asynchronous Modules and Components in Angular Ivy.
Послушать
Frontend Weekend:
- #96 — Дима Королёв о том, почему из врача нужно становиться руководителем
- Remote #1 — Никита Дубко (конференции, синдром самозванца, подготовка докладов)
- #97 — Всеволод Родионов о том, какие подводные камни можно встретить на пути из мореплавателя в IT
Веб-стандарты:
- 190. Google и приватность, JS в вузах, WASM, ES и TC39
- 191. Конкурсы, Edge, Vue и Material Design, a11y, реклама в npm, от сварщика до программиста
- 192. Firefox 69, перфоманс, File API, якоря, чат Chatix и трансляция экрана
devschacht:
- 91: Очень короткие доклады и REST против GraphQL
- 92: Про изоленту и скотч
- 93: Версус: Node.js или PHP в 2019
- 94: Павел Малышев защищает и продвигает Svelte
Фронтенд Юность (18+):
- #104 Почему фронтенд растёт через задницу
- #105 Провинциальный PiterJS
- #106 Сеньёр знает цену говнокоду
- #107 Тайные желания Ричарда Столлмана
CSSSR:
- Новости 512:
- Индийский интеллект, JS-игры, уязвимости в HTTP/2, IDE для React и тестирование JS
- RoR 6, native JS-modules, Vue Composition API, оптимизация анимаций и загрузки images
- Отмена phpCE, оптимизация Angular, тестирование React, nushell и bug bounty
- Chrome 77, Django 3.0, ещё о Github Actions, Гантт на CSS Grid и презентация Apple
- Argumantarium — Первичное собеседование
- Manager Within — Менеджмент и скрам в бытовых условиях, фрирайд и братья наши меньшие
Библиотеки
Chart.xkcd — библиотека для создания хkdc-графиков.
Chakra-ui — библиотека модульных, доступных компонентов для React-приложений.
Draqula — минималистичный GraphQL клиент для React-приложений.
Atomize — красивая дизайн-система на styled-components и React JS.
Moveable — библиотека event-манипуляций (drag-&-drop, resizing и т. д.).
Конференции и митапы
Остальное
Beyond The Browser: Getting Started With Serverless WebAssembly.
The Making of an Animated Favicon — создаем анимированный фавикон.
How Web Content Can Affect Power Usage — как веб-страница может влиять на энергозатратность.
How JavaScript Grew Up and Became a Real Language — хронология эволюции JavaScript.
Time to First Byte: What It Is and Why It Matters — что такое TTFB и от чего она зависит.
VS Code Extensions For Web Dev Productivity — прокачиваем VSCode.
Making Instagram.com faster: Part 1, Part 2.
Grammarly ищет талантливых Front- end инженеров для усовершенствования нашего продукта, создания минималистичных элегантных пользовательских интерфейсов и решения сложных технических задач. Нашим продуктом пользуются миллионы пользователей каждый день. У нас замечательная команда, вместе с которой мы используем самые передовые технологии. И если вам интересно стать частью её, то смотрите открытые вакансии здесь, или стучитесь ко мне в Facebook.
С вами был Григорий Шехет. До новых встреч =^.^=
← Предыдущий выпуск: Front-end дайджест #35.
