Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• Подкаст CSSSR: Новости 512 — 25 лет PHP, Github Actions, дизайн, CSS и оптимизация Instagram
• Подкаст «devschacht» #89: Роман Прудников про работу в 2ГИС и Яндекс Музыке.
• Подкаст «Фронтенд Юность (18+)» #103: Маленькая чёрная дыра — Приют для Столлмана
• «Repozitorro» #24: Портфолио джуниора под другим углом...
• Подкаст «Веб-стандарты», №187. HTML semantics, Web Components, W3C and WHATWG, HTML5 Doctor, Prince XML, Web Monetization
• Now Live: Your SmashingConf Toronto Playlist
Веб-разработка
• Фантастические веб-спецификации и где они обитают
• Простое введение в Web Workers в JavaScript
• Создание интерактивных оптимизированных электронных писем с помощью AMP Framework от Google
• Почему современная веб-разработка так сложна? Длинное, но поспешное объяснение: часть 1
• Что лучше: программа лояльности PWA или мобильное приложение?
• Contact Picker API, детали нового API в блоге разработчиков Google
• Блеск Mavo при создании интерактивных веб-приложений
- Производительность:
• Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске
• Largest Contentful Paint (LCP). Новая метрика производительности, которая поможет измерить время загрузки основного содержимого веб-страницы.
• Time to First Byte: что это такое и почему это важно
• Нативная ленивая загрузка в вебе
• Нативный Lazy-Loading уже работает в Chrome 76!
• Установите сетевые подключения заранее, для улучшения воспринимаемой скорости страницы
• Высокопроизводительная обработка инпута в вебе
- Tools:
• 5 полезных плагинов для webpack
• Руководство по горячим клавишам Visual Studio Code, для более высокой продуктивности и 30 моих любимых сокращений, которые стоит выучить
• SVG Gobbler — простое расширение, которое находит SVG в текущем окне, выделяет уникальные атрибуты, включая размер, и позволяет загружать или копировать в буфер обмена уже оптимизированную версию
- Accessibility:
• Web Accessibility vs. Usability
• Неожиданные советы по доступности
- Анимация:
• Эффект оставления следов изображениями при движении мыши
• Подобка впечатляющих сайтов Inspirational Websites Roundup #7
• Как создать веб-анимацию с Anime.js
CSS
• Пользовательские CSS-атрибуты как механизм передачи данных из JavaScript в CSS
• Writing Modes и CSS Layout
• Изучение CSS, читая спецификации
• Client-side JS Redirects: может ли робот Googlebot их обнаружить?
• Обработка неиспользуемого CSS в SASS для повышения производительности
• CSS :empty Selector
• Еженедельные новости платформы: CSS font-style: oblique, webhin browser extension, CSS Modules V1
• Принципы дизайна для разработчиков: процессы и советы по CSS для лучшего веб-дизайна
• Перемещение текста по изогнутой траектории
• 5 классных CSS Grid генераторов для ваших раскладок
• Субпиксельный рендеринг и границы
JavaScript
• Как я не занял первое место в конкурсе для JavaScript-разработчиков от Telegram
• Современный учебник JavaScript. Большое обновление популярного ресурса от Ильи Кантора
• Как реализовать Drag & Drop для HTML элементов и файлов с помощью Javascript
• Создание моего первого приложения на Svelte: мысли и впечатления
- Теория:
• Часто задаваемые вопросы о системах типов
• Defined or Undefined? Нюансы создания массивов в JavaScript
• Использование let объявлений переменных и особенности образуемых при этом замыканий в JavaScript
• Design Patterns #1 — Singleton (Одиночка)
• Работаем с ECMAScript 2019 Asynchronous Iteration с помощью for-of
• Intl.NumberFormat
• Интересные варианты использования битовых операторов JavaScript
• JavaScript Promise комбинаторы: .all(), .race(), .allSettled()
- React:
• Анимированное руководство по базовым механизмам React
• Релиз React v16.9.0 и обновление дорожной карты
• Что нового в React v16.9
• Как работает Development Mode Work?
• Создание мобильных приложений с Ionic и React
• useEffect или useLayoutEffect на простом доступном языке
• Использование Immer для управлением состоянием React приложения
- VueJS:
• Создание SPA на Vue.js поверх Headless WordPress
• Как настроить среду разработки для Vue
• Модификация данных компонента с помощью источников событий во Vue.js
• Получая больше от асинхронных Vue компонентов
- Angular:
• Использование функции async-await в Angular
• Асинхронные модули и компоненты в Angular Ivy
• На пути к Angular 9: три исправленных ошибки в Angular 9
• Как обмениваться Angular компонентами между проектами и приложениями
- Libs & Plugins:
• sharec — проект для замены бойлерплейтов и пакетов типа Create React App, который позволяет обновлять конфиги и позволяет вносить в них изменения
• Frosted Panel — кросс-браузерная библиотека на чистом JS для реализации отзывчивого эффекта «Замерзшего Стекла»
• murphyjs: простой способ реализовать анимацию, основанную на прокрутке, в ваших компонентах.
Браузеры
• Найден метод для определения просмотра в режиме инкогнито в Chrome 76
• В Chrome 78 Canary тестируется функция принудительного тёмного режима для всех сайтов
• В ночные сборки Firefox добавлен режим строгой изоляции страниц
• Заметки к релизу Safari Technology Preview 89
Занимательное
• Атака на системы фронтэнд-бэкенд, позволяющая вклиниться в сторонние запросы
• Google выделила подкасты в результатах поиска
• Huawei официально представила распределённую операционную систему HarmonyOS
• В процессорах выявлена новая уязвимость, обходящая защиту против Spectre и Meltdown
• Подрядчики Microsoft прослушивают некоторые разговоры пользователей Skype
• Придумать популярную игру, но не заработать на ней: история «Тетриса» и его изобретателя
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort