Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Сделайте мне красиво», Выпуск №48: Ты не должен отходить от робота
•
Подкаст «Веб-стандарты» №254: Mozilla против фич, Microsoft против IE, от высоты, миниапы в суперапах, дизайнер в Яндексе
•
«Новости 512» от CSSSR: NodeJS 14.15.0 LTS, NextJS 10, serverless-ужасы, offline-аналитика, package-lock.json, npm roadmap
•
Как разобраться в API HTML?
•
Как стать фронтенд-разработчиком? Пошаговый гид в мир фронтенда
•
Как анимировать элемент Details с помощью WAAPI
•
Топография скорости сайта
•
Интернационализация и локализация статических сайтов
•
«Live DOM» не «медленный», «плохой» или «неправильный». Проблема в веб-разработчиках.
•
Играйте в игру Chrome dino на геймпаде с помощью Gamepad API
•
Декларативный Shadow DOM для изоляции стилей
•
Сравнение различных способов скрытия вещей в CSS
•
Как писать циклы с препроцессорами
•
В Chromium прибывают Container Queries!
•
Руководство по CSS Grid
•
Аддитивные анимации в CSS
•
Нативный CSS Masonry Layout в CSS Grid
•
Как делать CSS анимации
•
Утилита Flow CSS
•
JS и его запретные тайны
• 12 полезных книг по JavaScript
•
LocalStorage vs. Cookies: все, что вам нужно знать о безопасном хранении токенов JWT во фронтенде
•
24 современных сниппетов ES6 для решения практических задач JavaScript
•
What the f*ck JavaScript? — Список забавных и хитрых примеров JavaScript кода
•
NETSCAPE: Хроника взлетов и падений
•
Vivaldi для Linux — открытое признание
• В Chrome планируют добавить собственное хранилище корневых сертификатов
Дайджест за прошлую неделю.
Материал подготовили 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)
Веб-разработка
•
![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)
- Инструменты
• Обзор редакторов кода
•Как изменять сторонние веб-сайты с помощью браузерных инструментов разработчика
•Adobe XD для Visual Studio Code
- Доступность
•Доступные шрифты: пожалуйста, прекратите использовать PX!
•Как найти и исправить популярные проблемы веб-доступности
•Что такое Section 508 и почему это важно?
CSS
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.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)
• 12 полезных книг по 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
•ES2020 Optional Chaining и динамический импорт меняют правила игры. Вот почему.
•Что делает JS JSом? Прототипное наследование
•7 способов сделать Dependency Injection в функциональном JavaScript без фреймворка
•Начало работы с современным JavaScript — Arrow Functions
•ES модули в деталях
- React
•Что нового в Next.js V10?
•Ленивая загрузка вашего приложения на React
•Как создать расширяемое поле для комментариев
•Алгебраические эффекты для React разработчиков
•Представляем Quarkly – инструмент для react-разработчиков и дизайнеров, который поможет оптимизировать вашу разработку
- Vue
•Quasar — швейцарский нож для Vue
•Vue 3 на Typescript
• Методы обхода защиты приложений VueJS
• Отложенная загрузка компонентов во Vue 3
•Инспектирование Vue приложений на продакшене
•Быстрое использование LocalStorage во Vue
•Основные проблемы, с которыми я столкнулся при переходе на Vue 3
- Angular
•Самые сложные моменты изучения Angular
•Отзывчивые компоненты Angular
•Общие стили Angular с отложенной загрузкой, специфичные для функционального модуля
- Ember
•The Ember Times — Issue No. 167
•Предварительный просмотр ревизий с помощью ember-cli-deploy-s3-index
- Svelte
•первый взгляд на svelte-kit
•Что такое SvelteKit?
- Libs & Plugins
•Simorgh — инструмент BBC для создания Single Page приложений и поддержкой PWA/AMP
•Dojo3D — Универсальная библиотека создания трехмерных историй, предназначенная для программистов любого возраста.
•Graphery SVG — функциональная обертка для SVG
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• В Chrome планируют добавить собственное хранилище корневых сертификатов
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aio350
спасибо за подборку