Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №223. Safari, третьи куки и ваши хранилища, Prettier, быстрые картинки, старые трюки, auto в CSS
•
Подкаст «CSSSR»: Новости 512 — Angular 9.1, Prettier 2.0, CSS auto, практикуем чистый JS и учимся на карантине
•
UnderJS Podcast №18 — Yarn2 и баг длиною…
•
Девшахта/Ночной фронтенд: Мониторинг node.js на примере интересного кейса
•
Подкаст «Фронтенд Юность (18+)» №130: Первый изолированный
•
Подкаст «Веб-стандарты» №222. GitHub и npm, iPad с курсором, URL, липкие таблицы, User-Agent, вёрстка писем, закрывайте теги!
•
Repozitorro #39 — Дизайн и Front-end
•
The CSS Podcast 003: Specificity
•
Чистая архитектура для фронтендера
•
Новый Google PageSpeed Insights на движке Lighthouse 6 (beta): проверьте, какие показатели будут у вашего сайта
•
Методы борьбы с legacy-кодом на примере GitLab
• Архитектура фронтенда: Ядро
•
Автоматически увеличивающиеся инпуты и текстовые поля
•
Современные форматы изображений: использование Webp в HTML и React
•
Устранение уязвимостей в зависимостях npm менее чем за 3 минуты
•
Как использовать Web Storage API
•
Favicons: Emojis в качестве фавиконки, Лайфхак от Криса Койера: использование другой фавиконки для разработки
•
Front-end RSS Feeds (2020 Edition)
•
Bootstrap 5 отказывается от поддержки IE 10 и 11: c чем мы останемся?
•
CSS: полное руководство по функции calc()
• Комбинации в CSS: custom properties и ::selection
•
Объяснение специфики CSS пятилетке
•
Как повторить текст в качестве Background Image в CSS с помощью element()
•
Индикация позиции прокрутки на странице с помощью CSS
•
Как анимировать текст с помощью SVG и CSS
•
Стилизация скроллбаров с помощью CSS: современный способ оформления полос прокрутки
•
Вывод типов в TypeScript с использованием конструкции as const и ключевого слова infer
•
Новые возможности TypeScript, повышающие удобство разработки
•
Шпаргалки по безопасности: Nodejs
•
3D своими руками. Часть 1: пиксели и линии
• Проект CoreJS столкнулся с проблемами сопровождения из-за лишения свободы автора
•
14 лучших JavaScript-конференций для участия в 2020 году
•
Как начать юнит тестирование JavaScript кода
•
Как использовать новейшие функции JavaScript в любом браузере
•
VueJS против ReactJS: кто будет править в 2020 году?
•
Как управлять HTML DOM только с помощью ванильного JavaScript?
•
Firefox внедряет режим «только HTTPS»
• В Chrome 83 появится настройка для показа полного URL в адресной строке
• Google пропустит выпуск Chrome 82
Дайджест за прошлую неделю.
Материал подготовили 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)
•
![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)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![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)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Архитектура фронтенда: Ядро
•
![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)
- Доступность
•ADA Compliance обязательно для цифровых агентств, вот как это делается
•Почему 2020 год — год, когда нужно серьезно относиться к доступности: Верховный суд больше не шутит, и вам не следует
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Комбинации в CSS: custom properties и ::selection
•
![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)
• Проект CoreJS столкнулся с проблемами сопровождения из-за лишения свободы автора
•
![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 – используй map, reduce и filter
•Введение в MDXJS
- React
•Как уменьшить количество и увеличить читаемость кода в react-redux, redux-saga
•Использование FuseBox в качестве альтернативы бандлингу вебпаком в React
•Server-Side Rendering в React — Redux
•Миграция в земли React: Gatsby
•Airbnb передает право собственности на Enzyme, его библиотеку для тестирования для React
•Создание приложения для чата в реальном времени с React и Firebase
- Vue
•Реализация i18n в Vue.js с использованием vue-i18n
•Что происходит под капотом, когда вы объявляете ref() в Vue 3?
•Создайте свой собственный Vue.js с нуля — Часть 3 (Сборка VDOM)
- Angular
•Руководство по стилизации компонентов Angular
•Преобразование кодовой базы: создание проекта MEAN.js AngularJS с помощью Create-React-App
•Доступна версия 9.1 Angular — TypeScript 3.8, более быстрые сборки и многое другое
- Ember
•The Ember Times — Issue No. 141
•Ember с GraphQL
•Ember Octane: Components
•Ember Octane: начинаем
- Svelte
•Почему вы должны начать использовать Svelte Js для веб-проектов, если вы все еще этого не делаете
•Курируемый список с ресурсами по Svelte JS
- Libs & Plugins
•Обзор видеоплееров для веба
•9 лучших игровых движков и JS библиотек в 2020 году
•Rsup Progress — Крошечный индикатор прогресса, который поддерживает промисы
•jsSHA — JavaScript реализация полного семейства Secure Hash Standard
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• В Chrome 83 появится настройка для показа полного URL в адресной строке
• Google пропустит выпуск Chrome 82
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
saskasa
Возможно стоило сюда еще добавить 3D своими руками. Часть 1: пиксели и линии