Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• «Новости 512» от CSSSR: Angular 13, Firefox 94, реактивность, лекции ШРИ Яндекса 2021, ReactConf 2021, развитие Svelte
• Подкаст «Веб-стандарты» №307. Firefox 94, Chrome Dev Summit, Web.Dev, Next.js, Yarn, TypeScript, вёрстка чата, взлом пакета
• Подкаст «Фронтенд Юность» #213 JavaScript — Зло
• Подкаст «ProConf» #112: SmashingConf — Виталий Фридман
• Подкаст «Goose&Duck» #9 – Попался, воришка! с Андреем Ситником
• Что нужно знать о вёрстке под ретину
• ХPath: что нужно делать, а что нет
• AMP безвозвратно подорвала доверие издателей к инициативам Google
• Использование веб-воркеров для повышения производительности сторонних скриптов
• Звёздный рейтинг: решение с использованием SVG
• Создание компонента Sidenav
• Разработка настоящих компонентов: блок сообщения Facebook Messenger
• Анимация height: auto
• Функции сравнения в CSS: min(), max() и clamp()
• CSS Loaders & Spinners
• Быстрые и грязные переопределения в Bootstrap налету
• Эффект матового стекла для иконок в CSS
• Эффект матового стекла в CSS
• Как исправить проблемы с фоновой прокруткой в CSS
• Дженерики в TypeScript
• Блокчейн на JavaScript
• Web-фреймворк Pusa, переносящий логику JavaScript-фронтэнда на сторону сервера
• Применение невидимых unicode-символов для скрытия действий в JavaScript-коде
• Rust — будущее инфраструктуры JavaScript
• Что такое Chrome Scripting API?
• JavaScript Sanitizer API: современный способ безопасного манипулирования DOM
• Создание легкой и производительной карусели с использованием ванильного JavaScript
• Делает ли ES6 устаревшими JavaScript фреймворки ?
• В Chromium добавлена возможность локального запрета просмотра кода web-страниц
• Google прекратит поддержку старых версий Chrome в этом месяце
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
• «Новости 512» от CSSSR: Angular 13, Firefox 94, реактивность, лекции ШРИ Яндекса 2021, ReactConf 2021, развитие Svelte
• Подкаст «Веб-стандарты» №307. Firefox 94, Chrome Dev Summit, Web.Dev, Next.js, Yarn, TypeScript, вёрстка чата, взлом пакета
• Подкаст «Фронтенд Юность» #213 JavaScript — Зло
• Подкаст «ProConf» #112: SmashingConf — Виталий Фридман
• Подкаст «Goose&Duck» #9 – Попался, воришка! с Андреем Ситником
Веб-разработка
• Что нужно знать о вёрстке под ретину
• ХPath: что нужно делать, а что нет
• AMP безвозвратно подорвала доверие издателей к инициативам Google
• Использование веб-воркеров для повышения производительности сторонних скриптов
-
Инструменты
• Введение в отладку на примере Firefox DevTools, часть 3 из 4
• Новинки DevTools (Chrome 96)
-
Доступность
• Assistiv Labs — новый онлайн-сервис для удаленного доступа к вспомогательными технологиями доступности, такими как NVDA, JAWS и Windows High Contrast Mode, с помощью любого современного веб-браузера.
• Избыточно избыточная доступность a11y
-
Эффекты
• Анимация при прокрутке с помощью WAAPI и ScrollTimeline
• Подборка креативных сайтов «Inspirational Websites Roundup» #31
CSS
• Звёздный рейтинг: решение с использованием SVG
• Создание компонента Sidenav
• Разработка настоящих компонентов: блок сообщения Facebook Messenger
• Анимация height: auto
• Функции сравнения в CSS: min(), max() и clamp()
• CSS Loaders & Spinners
• Быстрые и грязные переопределения в Bootstrap налету
• Эффект матового стекла для иконок в CSS
• Эффект матового стекла в CSS
• Как исправить проблемы с фоновой прокруткой в CSS
JavaScript
• Дженерики в TypeScript
• Блокчейн на JavaScript
• Web-фреймворк Pusa, переносящий логику JavaScript-фронтэнда на сторону сервера
• Применение невидимых unicode-символов для скрытия действий в JavaScript-коде
• Rust — будущее инфраструктуры JavaScript
• Что такое Chrome Scripting API?
• JavaScript Sanitizer API: современный способ безопасного манипулирования DOM
• Создание легкой и производительной карусели с использованием ванильного JavaScript
• Делает ли ES6 устаревшими JavaScript фреймворки ?
-
Теория
• JavaScript: заметка о requestAnimationFrame и requestIdleCallback
• Деструктуризация массивов и объектов в JavaScript — в чем разница?
• Написание чистого кода на JavaScript
• 5 топ функций JavaScript ES12, которые вы должны использовать сейчас
-
React
• Как сделать игру 2048 на React
• Next.js: подробное руководство. Итерация первая
• Простая реализация темного режима (и многоцветных тем) В React
• React Suspense: уроки, извлеченные при загрузке данных
• Создание энциклопедии с помощью React и Wikipedia Search API
• Обзор решений для управления состоянием в React и NextJS
• Учебное пособие по React Router 6
• Лучшие практики для ифреймов в React
-
Vue
• Атомарный дизайн с Vue
• Как делать Debounce и Throttle колбеки во Vue
• Создайте приложение для поиска фильмов с помощью Petite-Vue, легкой альтернативой VueJS
-
Angular
• Angular, инкапсулируй это
• Как я оптимизировал плохую кодовую базу angular и сократил время загрузки страницы в 10 раз
• Как поддерживать пользователей IE11 при переходе на Angular 13
• Настройте модули отложенной загрузки в Angular для нескольких фронтендов
-
Ember
• Перенос аддона Ember в новый v2 формат
• Автоматизация релизов Ember с помощью Rust
• Ember.js Template Imports: часть 3
• Ember.js Template Imports: часть 4
-
Svelte
• Создатель Svelte: веб-разработка должна приносить больше удовольствия
• Рич Харрис, создатель Svelte, присоединяется к Vercel
• Реализация локализации в Svelte
• Введение в тестирование приложений со SvelteKit
-
Libs & Plugins
• Splide — легкий, гибкий и доступный слайдер/карусель, написанный на TypeScript. Никаких зависимостей, никаких проблем с Lighthouse.
• hashids.js — Небольшая библиотека JavaScript для генерации числовых id в стиле YouTube
• MiniMasonry.js — Минималистичная библиотека без зависимостей для создания masonry-структуры
Браузеры
• В Chromium добавлена возможность локального запрета просмотра кода web-страниц
• Google прекратит поддержку старых версий Chrome в этом месяце
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Комментарии (4)
Megas
18.11.2021 16:12Новинки DevTools (Chrome 96)
Ссылка на русскую версию статьи, которая была переведена автоматичски… читать невозможно. Уж лучше давать ссылку на английский оригинал.alexzfort Автор
20.11.2021 22:01Почему автоматически?
Над статьей указано "Переводы предоставлены Alena Batitskaya. Редактор — Maxim Salnikov."
john_samilin
Какая-то очень странная история с этим Pusa.
Среди достоинств выделяются: исключение необходимости участия JavaScript-разработчиков фронтэнда
и как бы проблемы с фронтом решены, да?
alexzfort Автор
¯\_(ツ)_/¯