Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
«Новости 512» от CSSSR: TSConf 2021, property-based testing, .NET 6, Visual Studio 2022, контейнеризация, PHP Foundation
•
Подкаст «Веб-стандарты» №309. Chrome 96 и беты, Safari TP 135, Web Almanac, SVGcode, сложный фронтенд, мифы о доступности
•
Подкаст «Фронтенд Юность» #214 Российские разработчики аннексировали кириллическую часть UTF-8 и остались без JavaScript
•![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
CSSSR: Разбор технического собеседования на позицию senior front-end developer. Часть 5.
•
webDev #10: Front-end. Вопросы на собеседовании
•
Skillbox Лекторий: Карьера во frontend: тренды и компетенции
•![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
BlinkOn 15 — 16 видео с виртуальной конференции
•
Постигаем WebAssembly, рисуя кривую дракона
•
Как сегодня делают игры в браузере? Часть 1
•
Lighthouse. Руководство по оптимизации сайтов для начинающих
•
Как мы ускоряли комментарии Хабра
• Я ещё мидл или уже сеньор? И сколько мне должны платить?
•
Понимание WAI ARIA с помощью яблок и элементов
•
Cross-fading эффект любых двух элементов DOM в настоящее время невозможно
•
Никто не знает, как работает каскад
•
Как контролировать лейаут страниц с мультинаправленным контентом
•
Небольшая система для CSS-анимации загрузки страницы
•
Мой кастомный CSS Reset
•
Динамическое управление цветом с помощью относительных цветов в CSS
•
Сделайте свой сайт особенным с помощью настраиваемой полосы прокрутки
•
Добавление режима, дружественного к дислексии, на веб-сайт
•
Создание генеративных шаблонов с помощью CSS Paint API
•
Современный CSS в двух словах
•![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
State of CSS 2021 [BlinkOn 15]
•
Rust — будущее инфраструктуры JavaScript
•
JavaScript: разрабатываем приложение для записи экрана
•
Как JavaScript движки достигают высокой производительности
•
Как не писать тесты свойств в JavaScript
•
Управление памятью в Javascript
•
Иногда Javascript — не самый лучший выбор
•
proposals.es — Веб-сайт для получения последней информации о ECMAScript proposals.
•
Как работает JavaScript: шаблон factory design + 4 варианта использования
•
JWT: полное руководство с лучшими практиками в JavaScript
•
WebDev с нуля: Задача с реального интервью JavaScript. Разбор 4 вариантов решения
Дайджест за прошлую неделю. 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)
•
![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)
Веб-разработка
•
![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)
• Я ещё мидл или уже сеньор? И сколько мне должны платить?
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
CSS
•
![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)
•
![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)
JavaScript
•
![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)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
-
React
•Styled Components — идеальная стилизация React-приложения
•React c TypeScript — шпаргалка
•Как писать более читаемый код в React
•Как создавать SVG-карты в React с помощью react-simple-maps
•Как поддерживать большое приложение на Next.js
•Использование WebAssembly (созданного на Rust) для быстрых React компонентов
•5 вещей, с которыми я боролся при изучении React, имея бекграунд Vue
•3 способа реализации скелетных компонентов в React
•Полное руководство для новичков по React useState hook [Часть 1]
•Tamagui — Универсальные дизайн-системы React, оптимизированные для нативных и веб-приложений
•What time is it? Reactime! Релиз Reactime X
•Rematch — лучший Redux?
-
Vue
•Управление данными в системе автоматизации на Vue и Vuex и решение проблем тестирования с помощью Jest
•Сторонний код в Nuxt — это яд: вылечите его за 3 простых шага
•MountainVue: Ваш следующий любимый инструмент разработчика для работы с приложениями на Vue
•Устранение неполадок с вложенными страницами в Nuxt.js
-
Angular
•Как Angular загоняет фронтенд разработчиков в enterprise-кабалу
•Альтернативы ::ng-deep нет
•Angular String/Text Interpolation
•Современный Angular инструментарий на Новый год
•Развертывание Angular приложения на GitHub Pages
-
Svelte
•Введение в Svelte Actions
•Подробное руководство по обработке событий в Svelte
•Как: создать веб-компонент в Svelte
-
Libs & Plugins
•Spacing JS — JS-утилита для измерения расстояния между элементами на веб-странице.
•Tiny UI Toggle — Переключайте состояние элемента UI, чтобы легко создавать динамические компоненты: аккордеон, табы, раскрывающийся список, диалоговое/модальное окна
•5 лучших IoT библиотек для JavaScript разработчиков
•web-units-conversify — JS-библиотека для преобразования пикселей и вьюпорт-размеров в REM
•Построение data stories с помощью диаграмм в Vizzu
•COBE — легкая js библиотека для рендера глобуса на WebGL
Дайджест за прошлую неделю. dersmoll и alekskorovin.
stgunholy
Спасибо большое!