Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
«АйТиБорода»: ЧЕЛОВЕЧНЫЙ ФРОНТЕНД / Доступность и современность интерфейсов / Вадим Макеев
•«Frontend Weekend» №106: в гостях Фил Ранжин из компании Лингвотроник и подкаста «Мы обречены» о популярности в твиттере и потере любви к разработке
•«Новости 512» от CSSSR: Firefox 93, TypeScript 4.5 Beta, виды DOM, дебаггинг CSS, XSS, security-релизы Node.js и Redis
•Подкаст «Веб-стандарты» #303: Firefox 93, тёмная тема, баги браузеров, TypeScript 4.5, реальный перфоманс, новый сайт в 2021
•Подкаст proConf #110: TheUXConf 2021
•
Front-end Science c Сергеем Пузанковым: Pet-projects. Какие проекты делать начинающему фронтенд разработчику
•Callback Hell от CSSSR: Зачем дизайнеру кодить, дизайн-системы и дизайн-токены. В гостях Вадик Матвеев и Юлия Миоцен.
• «Искусство веб-разработки», Елена Литвинова: Разбираем результаты собеседования в компанию DICE в Лондоне. React, NodeJS.
•
Лучшие стратегии разработки фронтенда в 2022 году
•Современный Frontend: проблемы и пути решения. Пишем React-like приложение со строгой типизацией без сборщиков
•Как сделать Змейку на чекбоксах и не только
•PWA: не Chrome'ом единым?
•
Каково создавать емейл-темплейт в HTML формате в 2021
•Как победить CORS
•Создание multi-select компонента
•Искусство обмана, Lighthouse Score Edition
•Железо и веб: баланс между полезностью, безопасностью и конфиденциальностью
•Как написать собственное свойство CSS
•Как создать блок с градиентной обводкой?
•Разбираемся с цветами, палитрами, фильтрами CSS и не только
•Расширяемые секции в сетке компонентов с помощью CSS Grid
•Пользовательские свойства со значениями по умолчанию: 3 + 1 стратегия
•Умные CSS решения для распространенных задач в пользовательских интерфейсах
•CSS сходит с ума, я вам расскажу как
•Различные варианты использования пользовательских свойств
•Как создать эффект пишущей машинки на CSS для вашего веб-сайта
•Bootstrap vs Tailwind vs Vanilla CSS
•Распознаём позу прямо в браузере в реальном времени
Релизы:Анонс релиза Parcel v2, Релиз ESLint v8.0.0
•ESNext: Import Assertions (JSON Modules, CSS Modules, …)
•Микрооптимизация вашего JavaScript, вероятно, того не стоит, но ..
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
•
«АйТиБорода»: ЧЕЛОВЕЧНЫЙ ФРОНТЕНД / Доступность и современность интерфейсов / Вадим Макеев•
«Frontend Weekend» №106: в гостях Фил Ранжин из компании Лингвотроник и подкаста «Мы обречены» о популярности в твиттере и потере любви к разработке•
«Новости 512» от CSSSR: Firefox 93, TypeScript 4.5 Beta, виды DOM, дебаггинг CSS, XSS, security-релизы Node.js и Redis•
Подкаст «Веб-стандарты» #303: Firefox 93, тёмная тема, баги браузеров, TypeScript 4.5, реальный перфоманс, новый сайт в 2021•
Подкаст proConf #110: TheUXConf 2021•
Front-end Science c Сергеем Пузанковым: Pet-projects. Какие проекты делать начинающему фронтенд разработчику•
Callback Hell от CSSSR: Зачем дизайнеру кодить, дизайн-системы и дизайн-токены. В гостях Вадик Матвеев и Юлия Миоцен.•
«Искусство веб-разработки», Елена Литвинова: Разбираем результаты собеседования в компанию DICE в Лондоне. React, NodeJS.Веб-разработка
•
Лучшие стратегии разработки фронтенда в 2022 году•
Современный Frontend: проблемы и пути решения. Пишем React-like приложение со строгой типизацией без сборщиков•
Как сделать Змейку на чекбоксах и не только•
PWA: не Chrome'ом единым?•
Каково создавать емейл-темплейт в HTML формате в 2021•
Как победить CORS•
Создание multi-select компонента•
Искусство обмана, Lighthouse Score Edition•
Железо и веб: баланс между полезностью, безопасностью и конфиденциальностью-
Инструменты
•Обзор Chrome DevTools. Решаем основные задачи веб-разработчика
•Ещё 6 вещей, которые я узнал, доведя Snowpack до 20000 GitHub-звёзд
•Самая популярная ошибка, нарушающая оптимизацию Webpack-бандлов
•Скрытые функции Google Chrome, которые должен знать каждый разработчик
•Deno все еще актуален? Взгляд на текущий статус убийцы Node
•Что такое Snowpack?
-
Фреймворки
•Old Skull — фронтенд-фреймворк из альтернативной вселенной
•Кто оплачивает веб-фреймворки?
•Любимые фреймворки разработчиков на Jamstack в 2021 году
•Сравнение размеров TodoMVC в JavaScript фреймворках
•Дорожные карты Angular, Vuejs, Emberjs, Nodejs и Reactjs
-
Доступность
•Кнопки против ссылок. Нет, это не одно и то же
•Что нового в WCAG 2.2: новые критерии успеха для цифровой доступности
CSS
•
Как написать собственное свойство CSS•
Как создать блок с градиентной обводкой?•
Разбираемся с цветами, палитрами, фильтрами CSS и не только•
Расширяемые секции в сетке компонентов с помощью CSS Grid•
Пользовательские свойства со значениями по умолчанию: 3 + 1 стратегия•
Умные CSS решения для распространенных задач в пользовательских интерфейсах•
CSS сходит с ума, я вам расскажу как•
Различные варианты использования пользовательских свойств•
Как создать эффект пишущей машинки на CSS для вашего веб-сайта•
Bootstrap vs Tailwind vs Vanilla CSSJavaScript
•
Распознаём позу прямо в браузере в реальном времениРелизы:
Анонс релиза Parcel v2, Релиз ESLint v8.0.0 •
ESNext: Import Assertions (JSON Modules, CSS Modules, …)•
Микрооптимизация вашего JavaScript, вероятно, того не стоит, но ..-
Теория
•Синхронный и асинхронный JavaScript — Call Stack, промисы и многое другое
•Использование нового метода .at() JavaScript
•Javascript Fetch: примеры Get/Post/Put/Delete
•Observables vs. Promises — что лучше использовать?
•Как использовать Saga Pattern в микросервисах
-
React
•Для чего компании нужен UI KIT? (Frontend + Design)
•React против других фреймворков: сравнение по трем аспектам
•Полезные React API для создания гибких компонентов с помощью TypeScript
•Превращение React-приложения в устанавливаемый PWA с оффлайн-режимом, сервис-воркерами и темами.
•Взгляд на startTransition в React 18
•Полное руководство по интернационализации в Next.js
•Как реализовать флаги функций в React
•Что нового в Gatsby v4
-
Vue
• Vue.js: как перенести большой проект с Vue 2 на Vue 3
•Как реализовать функцию поиска в вашем Nuxt приложении с помощью Algolia InstantSearch
•Повышение производительности $destroy во Vue
•Почему и когда вам следует использовать Vuex
•Мнения об экосистеме Vue
•Создание приложения с помощью Vue 3, Nuxt и TypeScript
-
Angular
•Улучшение тестов Angular путем включения Angular testing module teardown
•Как реализовать тепловую карту в таблицах с помощью директив в Angular
•Лучшие практики Angular — знаете ли вы их?
-
Ember
•Как выглядит реализация паттернов React-компонентов в Ember.js
•Почему в Ember не нужны React-хуки
-
Svelte
•Svelte vs React: окончание дебатов
•Как отслеживать события в вашем приложении на Svelte
•Как создавать и публиковать Svelte компоненты
-
Libs & Plugins
•tachometer — инструмент для запуска тестов в браузере, использующий повторную выборку и статистику для надежного определения даже крошечных различий в рантайме
•5 лучших библиотек обработки звука для JavaScript
•webpack Boilerplate — адекватный webpack-бойлерплейт 5 с использованием Babel, PostCSS и Sass.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
apapacy
Пролистал статью svelte vs react. Почти не сомневался в недостатках svelte. Отсутствие большого комьюнити и отсутствие поддержки корпораций. По моему мнению это маркетинговые внушенные тезисы. Например mysql, nginx прекрасно себе разрабатывались практически одним человеком. А проблемы появились как раз когда к ним решили пристрастился корпорации.
Codenamed
Главная проблема в том, что это еще один фреймворк. Как будто не наигрались в сегментацию браузеров. Как было бы замечательно, если бы Typescript + React + Mobx стандартизировали уже :)
chilicoder
А что вы удивляетесь, если авторы вменяют эти недостатки даже Ember с его поддержкой от LinkedIn и сплоченным коммьюнити