Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Пятиминутка 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. Паттерны и антипаттерны реализации кнопок закрытия
•
Использование структурированных данных для улучшения поисковой оптимизации
•
Вопрос эксперту: почему CSS такой… какой он есть?
•
Руководство пользователя по переменным в CSS
•
Tailblocks — готовые к использованию CSS блоки для Tailwind
•
О фиксированных элементах и ??фонах
•
Первый взгляд на `aspect-ratio`
•
Вот что я не знал о “content”
•
Расширяющаяся гамма цветов в вебе
•
Создание дополнительных градиентов с помощью фильтров CSS
•
CLI-инструмент для создания CSS Grid layouts
•
Новшества ES2020, которые мне очень нравятся
•
О каждодневном совершенствовании JavaScript-программиста
•
Эффект реалистичного перелистывания страниц на JS
•
Что такое Deno и заменит ли он Node.js?
• Взгляд на JavaScript со стороны
•
5 главных причин, почему Javascript разработчики предпочитают Deno, а не Node
•
Базовый веб-скрапинг веб-страниц с использованием JavaScript с Node.js + Puppeteer
•
ECMAScript 4: недостающая версия
•
Как 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.
Медиа | Веб-разработка | 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)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Типографика для web
•
![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)
- Инструменты
•Putout: линтер нового поколения
•Локальное тестирование на iPhone
•Знакомство с инструментами для разработчиков в Chrome и Firefox
•Конвертация базового gulpfile.js v3 в gulpfile версии v4
- Производительность
•10 способов улучшить скорость страницы
•Предотвратите смещение макета и вспышки невидимого текста (FOIT), предварительно загрузив дополнительные шрифты
•Инструменты для измерения Core Web Vitals
CSS
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Взгляд на 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
•Насколько хорошо вы знаете 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 — Внедрение зависимостей и мокинг
- 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 — легкая библиотека для анимации по запросу.
Браузеры
•
![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)
• В Chrome 84 по умолчанию включат защиту от назойливых уведомлений
Занимательное
• Microsoft развивает новый открытый пакетный менеджер winget
• Устаревание корневого сертификата AddTrust привело к сбоям в системах с OpenSSL и GnuTLS
•
![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)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aio350
Спасибо за подборку
alexzfort Автор
Спасибо, что читаете