Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №228: DevTools, сайт Веб-стандартов, выделение текста, px vs rem, Atomic CSS-in-JS, рефакторинг
•
Подкаст «Фронтенд Юность (18+)» #136: Про онлайн-конференции с Алексеем Федоровым
•
Live coding c Вадимом Макеевым: Шапка на гридах и флексах с гэпами и БЭМ
•
Кто похоронит современный веб?
•
Простой подход к работе с отзывчивыми изображениями
•
Хранилище для Веба
•
Памятка по работе с Canvas API
•
Как и почему вы должны избегать CORS в SPA
•
13 советов по безопасности для фронтенд-приложений
•
Проекту HTML5 Boilerplate исполнилось 10 лет
•
Понимание CSS Grid (2 часть): Grid-линии, (3 часть): Grid-области
•
Выделение и CSS
• Приключения Masonry-раскладки в CSS
•
Способы стилизации списков
•
Единицы `lh` и` rlh`
•
Играемся с (фейковыми) Container Queries с watched-box и resizeasaurus
•
Все, что я узнал о min(), max() и clamp() в CSS
•
Давайте углубимся в свойства CSS Container
•
Как легко создать адаптивный вертикальный ритм с помощью CSS
•
В Chromium появляется поддержка Flexbox gap
•
Глубокое погружение в CSS Grid
•
CSS-находки в дизайне Twitter
•
Добавление CSS на страницу с помощью HTTP Headers
•
Как создавать игры на чистом CSS
•
Полное руководство по функциям в CSS
•
Зал Трудовой Славы JavaScript, часть 2
•
Понимание (всех) «модульных» форматов и инструментов JavaScript
•
ES2020: все, что вам нужно знать
•
Создание генератора кроссвордов с помощью JavaScript
•
JavaScript-рендеринг и проблемы для SEO в 2020 году
• Считаем время в JavaScript
• Релиз Firefox 76
• Релиз Firefox 76 — Audio worklets, CSS System Colors и другое
• Опубликован Playwright 1.0, пакет для автоматизации работы с Chromium, Firefox и WebKit
•
Firefox 76: аудио-ворклеты и другие хитрости
• Очередной ответ Zoom. Google встроит видеоконференции Meet прямо в Gmail
• Хакеры научились прятать веб-скиммеры за favicon сайтов
• GitHub проанализировал влияние COVID-19 на активность разработки
• В GitHub добавлены среда разработки и система дискуссий
• Как оформить профиль на GitHub так, чтобы он работал при поиске работы
• Facebook представила сервис для бедных стран — интернет будет бесплатным, но только текстовым Материал редакции
• ЕС запрещает использовать на сайтах «стены куки» для ограничения доступа к контенту и принудительного сбора данных
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры | Занимательное |
Медиа
•
![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)
Веб-разработка
•
![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)
•
![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)
- Инструменты
•5 бесплатных инструментов, повышающих продуктивность труда веб-разработчика
•Google представляет Web Vitals: мониторинг метрик и важных показателей для ваших сайтов
•Релиз ESLint v7.0.0
•Инструменты разработчика для дизайнеров
•actions-cli — мониторинг GitHub Actions в реальном времени с помощью командной строки
- Производительность
•Как ускорить мобильный сайт за 5 шагов + инструменты для запуска тестов скорости мобильного сайта
•Оптимизация значения FID (First Input Delay)
•Оптимизация значения LCP (Largest Contentful Paint)
•Оптимизация значения CLS (Cumulative Layout Shift)
•Подробное руководство по оптимизации производительности с помощью webpack
- Доступность
•Прогрессивное улучшение радиокнопок с помощью SVG с сохранением доступности
•Для многих доступность — это неизвестность неизвестного
•Создание доступного Range Slider с помощью CSS
•Полное руководство по доступности для сайтов на WordPress
•generic-components — коллекция популярных веб-компонентов с акцентом на доступность и простоту использования
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Приключения Masonry-раскладки в 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)
•
![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
•
![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)
• Считаем время в JavaScript
- React
•Анатомия компонента Tablist в Vanilla JavaScript в сравнении с React
•Как сделать повторно используемые компоненты с помощью псевдо-селекторов
•Вопросы и ответы для собеседования по React
•Когда React выполняет перерендеринг компонентов?
•react-virtual — Хуки для виртуализации скролящихся элементов в React
•React Flow — библиотека для рендеринга интерактивных графов
•react-select-search — Легкий select-компонент для React
•React-Tiny-Link — компонент для демонстрации мета-информации в виде карточек-ссылок
- Vue
•Как создать опросник на Vue с использованием аутентификации и базы данных Firebase
•Vue 3 Composition API — неправильное решение правильной проблемы
- Angular
•Observable сервисы в Angular
•Angular: Как создать полноэкранный календарь в стиле Outlook
•Angular библиотеки — что, почему и как
•Проектирование масштабируемых приложений на Angular: страницы, контейнеры и представления
•6 концепций для освоения, чтобы быть архитектором Angular
- Svelte
•Как выучить Svelte за выходные
•7 функций Svelte, которые приносят мне радость
•Создание статических сайтов с помощью Svelte и headless CMS
•SvelteJS: разоблачение мифов
•Начало работы с Sapper и Svelte
- Libs & Plugins
•Имитация рисования от руки на примере RoughJS
•Pico — делаем скриншоты в браузере с помощью Javascript
•Selecto.js — это компонент, который позволяет выбирать элементы в заданной области с помощью мыши или тача.
Браузеры
• Релиз Firefox 76
• Релиз Firefox 76 — Audio worklets, CSS System Colors и другое
• Опубликован Playwright 1.0, пакет для автоматизации работы с Chromium, Firefox и WebKit
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Занимательное
• Очередной ответ Zoom. Google встроит видеоконференции Meet прямо в Gmail
• Хакеры научились прятать веб-скиммеры за favicon сайтов
• GitHub проанализировал влияние COVID-19 на активность разработки
• В GitHub добавлены среда разработки и система дискуссий
• Как оформить профиль на GitHub так, чтобы он работал при поиске работы
• Facebook представила сервис для бедных стран — интернет будет бесплатным, но только текстовым Материал редакции
• ЕС запрещает использовать на сайтах «стены куки» для ограничения доступа к контенту и принудительного сбора данных
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
dobryi_xachker
спс чел