https://habr.com/ru/post/504718/

• Разработка веб-сайтов
• CSS
• JavaScript
• HTML

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры    |    Занимательное    |    

Медиа

• Подкаст «Пятиминутка React»: ReasonML в 2020 году
• UnderJS Podcast #22 — GitLab, GraphQL, Vue3 c Наталией Теплухиной [Ламповый]
• Подкаст CSSSR «Argumentarium»: Svelte и «Большая тройка» JS-фреймворков
• Pro Conf #64: ReactEurope 2020 — Замена Redux от Facebook | Быстрый Gatsby | React Native для веба | Next.js
• Ссылки на все слайды и видео с ngVikings 2020
• Jamstack conf virtual 2020

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

• Почему Евросоюз искореняет cookie-стены
• Как обезопасить свой веб-сайт?
• Типографика для web
• Свежий номер журнала Increment, посвященный фронтенду. Актуальные статьи от звезд индустрии — Chris Coyer, Lea Verou, Evan You и других
• Руководство по синтаксису адаптивных изображений в HTML
• Самые большие скандалы с NPM
• Пример использования Wake Lock API: 300% увеличение показателей purchase intent на BettyCrocker.com
• htmx — мощные инструменты для HTML, позволяющие получать доступ к AJAX, WebSockets и Server Sent Events напрямую в HTML, используя атрибуты
• Отзывчивому веб-дизайну исполняется десять лет.
• #20 HTMHell special: close buttons. Паттерны и антипаттерны реализации кнопок закрытия
• Использование структурированных данных для улучшения поисковой оптимизации

• Инструменты
  • Putout: линтер нового поколения
  • Локальное тестирование на iPhone
  • Знакомство с инструментами для разработчиков в Chrome и Firefox
  • Конвертация базового gulpfile.js v3 в gulpfile версии v4
  

• Производительность
  • 10 способов улучшить скорость страницы
  • Предотвратите смещение макета и вспышки невидимого текста (FOIT), предварительно загрузив дополнительные шрифты
  • Инструменты для измерения Core Web Vitals
  

CSS

• Вопрос эксперту: почему CSS такой… какой он есть?
• Руководство пользователя по переменным в CSS
• Tailblocks — готовые к использованию CSS блоки для Tailwind
• О фиксированных элементах и ​​фонах
• Первый взгляд на `aspect-ratio`
• Вот что я не знал о “content”
• Расширяющаяся гамма цветов в вебе
• Создание дополнительных градиентов с помощью фильтров CSS
• CLI-инструмент для создания CSS Grid layouts

JavaScript

• Новшества ES2020, которые мне очень нравятся
• О каждодневном совершенствовании JavaScript-программиста
• Эффект реалистичного перелистывания страниц на JS
• Что такое Deno и заменит ли он Node.js?
• Взгляд на JavaScript со стороны
• 5 главных причин, почему Javascript разработчики предпочитают Deno, а не Node
• Базовый веб-скрапинг веб-страниц с использованием JavaScript с Node.js + Puppeteer
• ECMAScript 4: недостающая версия

• Теория
  • Первый взгляд на записи и кортежи в JavaScript
  • Насколько хорошо вы знаете JavaScript?
  • Самые сложные вопросы на JavaScript-собеседовании. Часть 3
  • 10 вопросов о JavaScript и ответы на них
  • Как прятать секреты в строках — современные техники для скрытия текста в JavaScript
  • JavaScript: что на самом деле происходит, когда вы вызываете Console.log?
  • Cache API в JavaScript
  

• React
  • Визуальное руководство по ментальным моделям в React. Часть 2: UseState, UseEffect и жизненные циклы
  • Все, что нужно знать о Concurrent Mode в React в 2020 году
  • Полный обзор решений для валидации форм React
  • React Redux CRM
  

• Vue
  • Процесс: Создание Vue 3
  • Vue.js компонент для справки/документации
  • Добавление Typescript в существующее приложение на VueJS 2.6+
  

• Angular
  • Как создавать лучшие шаблоны Angular с Pug
  • Основные реактивные шаблоны в Angular
  • Angular: The Unexpected
  • TDD в Angular — Внедрение зависимостей и мокинг
  

• Ember
  • The Ember Times — Issue No. 150
  • Подключение Empress-blog к Netlify CMS
  

• Svelte
  • Хороший ли выбор Svelte для реализации виджета?
  • Возможно, вам не нужен Svelte, чтобы уменьшить ваш JavaScript
  • Я попробовал Svelte
  

• Libs & Plugins
  • Alpine.js на конкретном примере
  • Rough Notation — Небольшая JavaScript библиотека для создания и анимации аннотаций на странице
  • Fluor.js — крошечная JS библиотека, которая предоставляет вам высокоуровневый язык для простого добавления взаимодействий и эффектов.
  • ac-colors — реактивная цветовая JS библиотека которая может свободно конвертировать между RGB, HSL, HEX, XYZ, LAB, LCHab, LUV и LCHuv, а также обрабатывать генерацию случайных цветов и вычисление коэффициента контрастности
  • Motionia — легкая библиотека для анимации по запросу.
  

Браузеры

• Как Microsoft делает Edge лучшим браузером для PWA
• Браузеры не являются движками рендеринга
• Chrome 84 Beta: Web OTP, Web Animations, New Origin Trials и многое другое
• В Chrome 84 по умолчанию включат защиту от назойливых уведомлений

Занимательное

• Microsoft развивает новый открытый пакетный менеджер winget
• Устаревание корневого сертификата AddTrust привело к сбоям в системах с OpenSSL и GnuTLS
• Самый забагованный сайт в интернете (убедитесь сами, открыв консоль)
• Забавный факт: интерфейс для управления Dragon 2 работает на Chromium и JavaScript
• Stackoverflow Developer Survey 2020: результаты ежегодного опроса разработчиков

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.