Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №272. Chrome 89 и DevTools, релизы и приватность, история веба, цвета из спеки, дизайн-система Consta
•
«Новости 512» от CSSSR #156: Gatsby 3, замедление Twitter, уязвимость git clone, фронтенд в Lyft, @scroll-timeline, Firebase 101
•
«Новости 512» от CSSSR #155: Мануал по TypeScript, @property, заблуждения о микрофронтендах, цена useMemo(), интервью Райана Дала
•
Подкаст «Фронтенд Юность» #176: Нулишкуралесинг
•
Подкаст «Фронтенд Юность» #177 Бродяги из Джиерписи
•
CSSSR: Разбор технического собеседования на позицию senior front-end developer. Часть 1.
•
Видео докладов с «Я Фронтенд 2021»
•
Hello, Word! Разрабатываем браузерное расширение в 2021-м
•
Забудьте про div, семантика спасёт интернет
•
Программная генерация изображений с помощью API CSS Painting
•
Новости платформы от css-tricks: Defaulting to Logical CSS, Fugu APIs, Custom Media Queries, и WordPress vs. Italics
•
Слишком много SVG засоряют вашу разметку? Попробуйте `use`.
•
Веб-компоненты проще, чем вы думаете
•
Когда следует использовать прогрессивные веб-приложения?
•
Создание слайд-шоу с помощью Clip-path
•
Погружаемся в логические свойства CSS
•
Инструменты аудита CSS
•
Сделайте свой CSS читаемым и поддерживаемым с помощью CSS-шаблона «Enabling».
•
Системные шрифты не должны быть уродливыми
•
HSL: цветовой формат для людей
•
Адаптивный текст в зависимости от размера изображения
•
Сборка мусора в JavaScript: браузер против сервера
•
JavaScript: что означает this?
•
По ту сторону Console.log() — Повышаем уровень навыков отладки
•
12 способов улучшить логгирование в консоли DevTools
•
Упрощение Rest параметров в JavaScript
•
Новый, смелый, анонимный: поисковик Brave Search
• Атака по извлечению данных из кэша CPU, реализуемая в web-браузере без JavaScript
• Google снизила потребление оперативной памяти в Chrome 89 для Windows, macOS и Android
• Microsoft отправляет на покой классический Edge на EdgeHTML — поддержка браузера завершится уже сегодня
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
•
![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)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Веб-разработка
•
![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)
•
![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)
- Инструменты
•Storybook для Webpack 5
•Новый король бандлеров здесь: всем преклониться пред Vitejs
•Snowpack: альтернативный Вебпаку инструмент сборки
- Производительность
•Как оптимизация CLS увеличила количество просмотров новостей Yahoo! JAPAN на 15%
•Google PageSpeed Insights теперь поддерживает HTTP / 2 — оценки могут вырасти
•Делаем самую медленную «быструю» страницу
•Отладка сдвигов макета
CSS
•
![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)
•
![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)
- React
•Интервью с Дэном Абрамовым: React 17, Suspense, Redux, холивары
•Нарушает ли React DOM-стандарты?
•Реализация архитектуры Redux на MobX. Часть 1: «Проблемные места Redux»
•Представляем Relay Hooks: улучшенный React API для Relay
•Полное руководство по профилированию приложений React
•Как эффективно использовать React Context
- Vue
•Vuex: управление состоянием для проектов на Vue
•Руководство по Vue 3.0 от разработчика на React
- Angular
•Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular
• Читаем, подсвечиваем и скролим текст на Angular. С помощью TaigaUI и WebSpeechAPI
•Расширьте Angular Schematics, чтобы настроить процесс разработки
- Ember
•The Ember Times — Issue No. 175
•Ember.js в 2021 году — маяк производительности
•The Ember Report №002: David Tang on Ember Data
- Svelte
•Svelte NodeGUI — Создавайте производительные, нативные, кроссплатформенные настольные приложения с помощью Svelte
•Как использовать Tailwind на сайте со Svelte
•Svelte Tutorial: создаем блог с Sapper
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Атака по извлечению данных из кэша CPU, реализуемая в web-браузере без JavaScript
• Google снизила потребление оперативной памяти в Chrome 89 для Windows, macOS и Android
• Microsoft отправляет на покой классический Edge на EdgeHTML — поддержка браузера завершится уже сегодня
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.