Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» 267. Новинки браузеров и DevTools, Open Web Docs, элемент popup, HTTPS, WCAG 3, null или undefined
•
«Новости 512» от CSSSR: npm 7.5.0, прощай AngularJS, Node.js 15.8.0, фичи ES2021, TS-привычки, esbuild и AssemblyScript
•
«Новости 512» от CSSSR: Черновик WCAG 3.0, Chrome 89 Beta и ChromeOS 88, Vivaldi 3.6, aspect-ratio, плохой Redux
•
«Отсобеседование» #0: Открытое собеседование фронтенд разработчика (Junior)
•
В чём разница между узлом и элементом DOM?
•
Глубокое погружение в WebSockets
•
Просто вертикальный монитор не значит, что я на телефоне
•
Минимальный размер контента в CSS grid
•
Что можно делать с CSS сегодня
•
Создание анимированных плейсходеров контента с помощью HTML и CSS
•
Еженедельные новости платформы: псевдокласс: not(), Video Media Queries, поддержка clip-path: path()
•
Подделка container queries с помощью CSS Grid
•
CSS Polygon Shapes — подборка фигур, реализованных с помощью CSS clip-path
•
4 странных трюка, чтобы стать 10x инженером по Flexbox
•
Основы отладки клиентских JS-приложений
•
Принципы SOLID: единая ответственность в фреймворках JavaScript
•
Многоязычный движок: исполнение JavaScript в базе данных Oracle
•
Становится ли JavaScript TypeScript?
•
Невменяемый, необъятный масштаб браузеров
• Бета-версия приложения Microsoft Authenticator для Android и iOS теперь может импортировать пароли из Chrome
• Выпуск web-браузера qutebrowser 2.0
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
•

•

•

•

Веб-разработка
•

•

- Инструменты
•Релиз npm 7
•Команда Preact выпускает WMR для упрощения разработки современных веб-приложений
•svgwaves.io — онлайн-инструмент для создания волн, разделяющих контент, на SVG
- Производительность
•Прогрессивный рендеринг для лучшей производительности веб-приложений
•Веб-производительность внутренних систем важна, поэтому оптимизируйте их тоже
•Делаем новую домашнюю страницу GitHub быстрой и производительной
- Доступность
•Руководство по обеспечению доступности ваших изображений и видео
•Тестирование доступности для мобильного веба
- Эффекты
•Подборка креативных веб-демок «UI Interactions & Animations Roundup #14»
•Вращающаяся анимация загрузки с трехмерными фигурами с помощью Three.js
•Как создать анимацию движущихся частиц из «Volt for Drive»
CSS
•

•

•

•

•

•

•

•

JavaScript
•

•

•

•

- React
•Архитектурный паттерн Dependency Injection в React-приложении
•createRef, setRef, useRef и зачем нужен current в ref
•3 способа анализа производительности React с помощью Reactime
•Процесс, которому я следовал, чтобы оптимизировать производительность приложения на React
•CI/CD и React: создание пайплайна с помощью Heroku и CircleCI
•Как использовать Rockpack
- Vue
•Идеальное Vue приложение на Typescript
• Компоненты без рендеринга во Vue
• Интервью с автором Vue.js: «Важно понимать, что хотят пользователи»
•Vue.js: бесплатный курс от JavaScript.Ninja
•Да, Vue 3 вышел, но, вероятно, он вам не нужен
•Использование Pug.js с Vue.js
•Lazy Load Routes во Vue с динамическими комментариями webpack
•Динамическое переключение с одного элемента HTML на другой во Vue
- Angular
•Полное руководство по созданию форм с автосохранением в Angular
•SEO в Angular без рендеринга на стороне сервера
•Headless Angular Components
•Создание веб-приложений, настольных и мобильных приложений из единой базы кода с использованием Angular
•10 лучших видео по Angular митапам в 2020
•Под капотом Language Service
- Ember
•Альтернативы mut
•Как сделать Todo в Ember Template Lint
•Основы реактивности (отслеживаемый декоратор) — EmberJS Octane
- Svelte
•Svelte + Redux + Redux-saga
•Svelte Kit, первый «serverless-first» фреймворк?
•Создание веб-приложений с помощью Svelte
•Введение в Svelte
- Libs & Plugins
•Понимание экосистемы инструментов визуализации данных в 2021 году
•LinkeDOM: альтернатива JSDOM
Браузеры
•

• Бета-версия приложения Microsoft Authenticator для Android и iOS теперь может импортировать пароли из Chrome
• Выпуск web-браузера qutebrowser 2.0
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aio350
Благодарю за подборку