Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
SDCast #124: в гостях Михаил Боднарчук, веб-разработчик из Киева, автор фреймворков для тестирования Codeception & CodeceptJS
•
Подкаст «Веб-стандарты» №253. Edge на Linux, Safari, Chrome 87, Firefox 82, MDN, состояние и структура CSS, история браузеров
•
Подкаст «CSSSR»: CSS 3D, гайд по Webpack 5, NodeJS 15, React 17 и CRA 4, Playwright Python, Composer 2, Observer APIs
•
Подкаст proConf #77: React Native EU 2020
•
Подкаст «Фронтенд Юность (18+)» #161: Я ушел из крипты и надеюсь никогда туда не возвращаться
•
Создание микросервисной архитектуры с использованием single-spa (миграция существующего проекта)
• Как браузер рендерит веб-страницу
•
Сравнение времени сборки генераторами статических сайтов
•
10 полезных советов по HTML File Upload для веб-разработчиков
•
HTTP 2 Push: Факты? Фикция? Плацебо?
•
Сравнения паттернов в микрофронтендах
•
Клиенты NPM, лучшие, чем оригинал
•
Задавать Height и Width для изображений снова важно
•
Адаптивный дизайн высоты
• Безумие на чистом HTML + CSS
•
Сравнение различных способов скрытия вещей в CSS
•
CSS Layouts — Использование Flex-Wrap для выхода за рамки сетки
•
LibSass прекратил поддержку
•
Подробнее о content-visibility
•
Трюк с переключением кастомных свойств CSS
•
Предотвращение сдвигов макета с помощью CSS grid
•
В защиту таблиц и флоатов в современной разработке
•
Взгляд на единицы CSS: пиксели, EM и проценты
•
Привлекайте внимание пользователя с помощью селектора CSS :focus-within
•
Сравнение всех единиц измерения в CSS с объяснением
•
Шпаргалка по JavaScript, которая вам понадобится в 2020 году
•
Переопределение невозможно: XSS без произвольного JavaScript
•
История участника проекта jQuery
•
Opera станет китайской: компания из Поднебесной получит основной пакет акций
• Некоторые сайты не будут открываться в браузере Internet Explorer, принудительно используя Edge
• В браузере Microsoft Edge появились вертикальные вкладки
Дайджест за прошлую неделю.
Материал подготовили 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)
Веб-разработка
•
![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)
- Доступность
•Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями
•Почему российские сайты не будут соответствовать ГОСТу по доступности
• Web Accessibility in action. Знакомимся с WCAG-стандартом и тестированием доступности
•Прекратите создавать неполноценные недоступные формы!
•Чеклист доступности для вашего веб-сайта: часть 2
- Эффекты
•Креативная реализация кнопки пожертвования
•Подборка креативных веб-экспериментов «Awesome Demos Roundup #18»
•Создание аудиовизуализаций, работающих с Web Audio API
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Безумие на чистом HTML + 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)
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)
- Теория
•Примеры использования наблюдателей в JavaScript
•Браузер и числа с плавающей запятой
•Все, что вам нужно знать о proxy в JavaScript
•Начало работы с современным JavaScript — деструктуризация
•Объяснение управления памятью в JavaScript
- React
•Релиз Next.js 10
•Как создавать React формы с отличным UX
•Что нового в NextJS 10
•Лучшие практики с React Hooks
•Когда (и когда не) использовать Redux
•Компоненты высшего порядка: шаблон проектирования приложения React
•React Router v5: полное руководство
- Vue
•Как локализовать приложение на Vue.js с помощью vue-i18n и Localazy
•Уклонение от защиты с помощью VueJS script gadgets
•Quasar vs. Vutify vs. Bootstrap Vue: выбор правильной UI библиотеки для Vue.js
•План перехода на новую версию Vue JS 3
- Angular
•Давайте сделаем переиспользуемый компонент tree view в Angular
• #53 Angular UIKit. Когда вам потребуется angular schematics. Использование в UiKit и в бизнес приложениях. Рецепт schematics в angular library.
•Как перестать бояться и создать собственный Angular CLI Builder
•Важность иммутабельности в приложениях Angular
•Angular Router: раскрываем некоторые интересные факты и особенности
- Svelte
•React vs Svelte — всестороннее сравнение JS библиотек
•Sapper мертв! Что будет дальше в Svelte?
•Рендеринг Svelte и SEO
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Некоторые сайты не будут открываться в браузере Internet Explorer, принудительно используя Edge
• В браузере Microsoft Edge появились вертикальные вкладки
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.