Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Прямой эфир на Хекслет: собеседуем фронтенд-разработчика
•
«Новости 512» от CSSSR: Демистификация промисов, Yarn 3, стили и Shadow DOM, SQL в вебе, TypeScript 4.4 RC и Joomla 4.0
•
Подкаст «Callback Hell» от CSSSR: Xsolla и биг дата, 30 лет вебу, снова Rust
•
Подкаст «Веб-стандарты» №296. Safari TP, учебник по ХТМЛ, SQL в браузере, ES-модули, AMP, сообщество и конференция MoscowJS
•
Критерии качества вёрстки 2021
•
Добавить две кнопки — почему так дорого?
•
Эффективный поиск XSS-уязвимостей
•
Лучшие стратегии фронтенд-разработки в 2022 году
•
Jamstack CMS: прошлое, настоящее и будущее
•
Рейтинг со звездочками: решение на SVG
•
Большая проблема с кастомными свойствами CSS
•
Повышайте свой уровень CSS-линтинга с помощью Stylelint
•
Улучшает ли shadow DOM производительность стилей?
•
Инструменты для CSS Grid в DevTools
•
Практическое использование математических функций CSS: calc, clamp, min, max
•
Почему jQuery все еще жив?
•
TypeScript 4.4: хорошее, плохое и не такое уж плохое
•
Цепочка методов JavaScript… Это все так глупо!
•
Forever Functional: ожидание с промисами
•
Создание компонента интерактивной диаграммы Ганта с помощью ванильного JavaScript
•
Создание одного и того же приложения с jQuery, React, Angular, Vue и Svelte
•
Правда и ложь: когда в JavaScript все не равно
•
Микро-фронтенды: взаимодействие между приложениями с помощью Single-Spa и RxJS.
← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Доступность
• Дополнительные уровни заголовков: удачное решение или не очень?
•Руководство по разработке доступных индикаторов фокуса, совместимых с WCAG.
•Доступность с нуля
- Эффекты
•Как на Three.Js сделать анимированный туннель из частиц
•Плавные и простые переходы страниц с помощью shared element transition API
•Создание слайд-шоу с абстрактными изображениями с помощью OGL, GLSL и GSAP
CSS
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- React
•GSAP + React, первые шаги и удобные техники.
•Простой drag'n'drop в React
•Руководство 70-х годов о том, как разделить компоненты React
•Custom React Hooks: зачем нам контекст
•Стилизация SVG иконок в React.js
•Material-UI 5 на подходе: вот от чего я в восторге
- Vue
•Как локализовать Vue.js приложение
•Что такое v9s, и почему потребовалось писать еще одну библиотеку валидации?
•Оптимизация производительности ваших приложений на Vue с помощью веб-воркеров
•Vue.js — Как я вызываю метод в компоненте извне компонента во Vue 2
- Angular
•Компоненты-конструкторы: мощь ng-content в Angular
•Я пробовал Angular в качестве React-разработчика. Вот 6 вещей, которые мне в нем нравятся
•Проблемы ООП в Angular
- Ember
•The Ember Times — Issue No. 186
← Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin.