Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «CSSSR»: Новости 512 — Styled Components 5.0, lazy-loading, multi-directional layout, ru Github
•
Подкаст «Фронтенд Юность (18+)» #123 Git с балалайкой и медведями
•
Подкаст «Девшахта/Ночной фронтенд» №109: Грамотная работа с ошибками. Монада Either.
•
Подкаст «Веб-стандарты» №211. Софт-скилы, футбол и жизнь без фронтенда, веб-компоненты, React, гриды, перфоманс, дайвёрсити
•
Подкаст «Сделайте мне красиво», Выпуск №33 — Тренды дизайна, микробраузеры и развивающие этюды
•
Подкаст Фронтенд Юность (18+) #122 Справедливая зарплата для планктона
•
Рендеринг веб сайтов 101
•
Прощай, чистый код
•
Новичок в JAMstack? Вот все, что нужно знать, чтобы начать
•
Веб в 2020 году: расширяемость и функциональная совместимость
•
Шесть советов при работе над интернационализацией веб-приложений
•
Полное руководство по iframes
•
Нет необходимости ненавидеть веб-компоненты
•
Воссоздание кнопки Arduino с использованием SVG и lit-element
•
RTL Styling 101 — подробное руководство по RTL-стилизации в CSS
•
The CSS Cascade. Или, как браузеры разрешают вопрос с конкурирующими CSS стилями
•
CSS Houdini: все, что вам нужно знать о самых популярных API
•
Понимание ключевых слов CSS «Initial», «Inherit» и «Unset»
•
Использование адаптивных модификаторов для управления изменениями компоновки в ваших компонентах
•
Создание разнонаправленных макетов
•
Немного воображаемого CSS
•
4 макета CSS без использования медиа-запросов
•
Многострочные градиентные ссылки
•
Волшебные радужные градиенты с CSS Houdini и React Hooks
•
Внутренние размеры в CSS
•
Нововведения JavaScript ES2020 с простыми примерами
• Распространенные ошибки при использование Promise в Javascript
•
Чтение и обработка файлов с помощью JavaScript FileReader API
•
10 самых важных фреймворков JavaScript за последнее десятилетие
•
Svelte — рецепт для успешного фреймворка?
•
Почему я наслаждаюсь Svelte
•
Уважаемые поклонники for Loop: давайте будем использовать методы Array
•
Визуализация JavaScript: генераторы и итераторы
•
Микробраузеры повсюду. Но что мы о них знаем?
• Исследователи обвинили Opera в выдаче микрозаймов под 438% годовых в обход правил Google
• Google тестирует новый интерфейс меню «Поделиться» в Chrome – с инструментами для создания QR-кодов и скриншотов
• Обзор финальной версии Microsoft Edge на базе Chromium: новый старый знакомый
• Следующая версия браузера Apple Safari выйдет уже без поддержки Adobe Flash
• За последние две недели компания Mozilla заблокировала 197 дополнений к Firefox
•
Edgium
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
•

•

•

•

•

•

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

•

•

•

•

•

•

•

- Инструменты
•Prettier в крупных проектах: тратим 20 минут на настройку, забываем о форматировании навсегда
•Оптимизация времени сборки проекта
•Встречайте Yarn 2!
•Playwright — новая Node библиотека от Microsoft для автоматизации браузеров на Chromium, WebKit и Firefox. Созданная разработчиками Puppeteer, Playwright нацелена на создание кросс-браузерной, быстрой и вечнозеленой веб-платформы для автоматизации
•Конфигурация ESLint и лучшие практики
•Моя история об устаревших инструментах, технологиях и решениях в веб-разработке
- Производительность
• Микрооптимизации производительности и JavaScript
•Google PageSpeed ??Insights: правда о значении 100/100
•Скорость от тысячи порезов
- Эффекты
•Реализуем визуальный эффект из фильма «Матрица»
•Эффект разворачивания изображения из рулона с помощью Three.js
•Подборка креативных интерфейсов «UI Interactions & Animations Roundup #2»
•Night at the Museum of Very Good Boys
CSS
•

•

•

•

•

•

•

•

•

•

•

JavaScript
•

• Распространенные ошибки при использование Promise в Javascript
•

•

•

•

•

•

- React
•Как использовать Инверсию Управления в JavaScript и в Reactjs для упрощения работы с кодом
•Обзор JSX с тремя примерами не из React
•10 концепций JavaScript, которые вам нужны, чтобы освоить React (+ шпаргалка)
•Руководство для начинающих по циклам в React JSX
•Создавайте более доступные формы с помощью React Icons
•Динамическая загрузка компонентов React с помощью хуков
- Vue
•Чего ждать во Vue 3.0?
•Как написать приложение Vue.js полностью на TypeScript
•Как создать прогрессивное веб-приложение на Vue.js
•Любите Vuetify? Встречайте PrimeVue, новую мощную библиотеку Vue UI.
•Карусели на Vue.js: SSR поддержка и производительность
- Angular
•Angular 9 и Ivy: ленивая загрузка компонентов
•Практическое руководство по Angular: сервисы и внедрение зависимостей
•Как реализовать микро-фронтенд архитектуру с Angular
- Ember
•The Ember Times — Выпуск 131
•The Ember Times — Issue No. 132
•Как мы добились «вечнозеленых» сборок в корпоративном приложении на Ember.js
•RouteInfo Metadata (3.10)
- Libs & Plugins
•JS библиотека для проверки свойств JS, представляющего из себя данные формы.
•React Nice Dates: адаптивная, с поддержкой тач событий, модульная библиотека для выбора дат
Браузеры
•

• Исследователи обвинили Opera в выдаче микрозаймов под 438% годовых в обход правил Google
• Google тестирует новый интерфейс меню «Поделиться» в Chrome – с инструментами для создания QR-кодов и скриншотов
• Обзор финальной версии Microsoft Edge на базе Chromium: новый старый знакомый
• Следующая версия браузера Apple Safari выйдет уже без поддержки Adobe Flash
• За последние две недели компания Mozilla заблокировала 197 дополнений к Firefox
•

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
ht-pro
PrimeVue — интересно
Довольно большой сет компонентов без надоевшего material design
За подборку спасибо)