Во фронтенде нет архитектуры, потому что её заменил вечный карнавал фреймворков, где каждые полгода появляется новый "революционный" подход к решению тех же проблем, что решались 10 лет назад.

Фронтенд-разработчик — это человек, который может написать компонент в React, переписать его на Vue "для опыта", портировать на Angular "для резюме", а затем выбросить всё и начать с нуля на Svelte, потому что "он быстрее компилируется".

Архитектура здесь заменена философией "а что если мы возьмём состояние приложения, разобьём его на 200 мелких кусочков, раскидаем по разным хукам, стейт-менеджерам и контекстам, а потом будем полчаса искать, где лежит булева переменная для показа модального окна?"

Планирование структуры проекта сводится к выбору между 47 бойлерплейтами, каждый из которых обещает "best practices" и включает в себя 15 уровней вложенности папок, конфиг-файлы для 12 различных инструментов и зависимости, которые весят больше операционной системы.

В итоге "архитектура" фронтенда — это package.json на 200 строк, где половина зависимостей нужна только для того, чтобы заставить остальную половину работать вместе, а финальное приложение делает то же самое, что раньше делали тремя файлами: HTML, CSS и немного JavaScript.

Но зато теперь это называется "современная экосистема".

Немного лирики от создателя UML и одного из столпов ООП - Graddy Booch

#booch

Если нужно добавить на страницу поле для редактирования текста, можно использовать атрибут contenteditable, как более приятную замену textarea (для полей больших форм это не очень хорошая замена).

Чтобы ограничить ввод только текстом, можно использовать значение plaintext-only у атрибута contenteditable. Это предотвратит вставку HTML-разметки, картинок или стилей.

<div 
  contenteditable="plaintext-only" 
  data-placeholder="Начните печатать..."
></div>

Дополнительно можно ловить события input и paste, чтобы очищать текст от случайного форматирования. Например, при вставке можно заменить HTML-содержимое на обычный текст через e.clipboardData.getData('text/plain').

Подробнее о тонкостях работы с contenteditable в статье на web.dev

#html

Джуны свободны. Как и было сказано.

Сперва джуны, за ними, естественно, мидлы.

Профессор МГУ Наталья Зубаревич, ведущий российский эксперт по региональной экономике

#ai #learning

В крайнем Chrome (137) появился if для CSS

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark { --color: black; }
.light { --color: white; }

#chrome #css

#meme #react #creative #video

Мурыч про TypeScript и статическую типизацию

#murych #audio #ts

Раньше я думал, что JavaScript нужно заменять полностью, но сейчас согласен с Мурычем - достаточно статической типизации примитивов.

Причем, он предлагал "вьюшную" модель - если Ref инициализирован строкой, то и дальше в нем только строки. Так же с переменными по примитивным типам в JS

Cтатическая типизация примитивных типов плюс ES классы решат 95%+ всех проблем без извращений TS

#ts #js #murych

W3C Technical Architecture Group (TAG) представил Принципы Этичного Веба, которые призваны направить веб-сообщество на создание более этичного и социально ответственного интернета. Эти принципы включают:

Есть один веб
Веб не причиняет вреда обществу
Веб поддерживает здоровое сообщество и дебаты
Веб для всех людей
Веб безопасен и уважает конфиденциальность людей
Веб обеспечивает свободу слова
Веб позволяет проверять информацию
Веб усиливает контроль и власть отдельных лиц
Веб является экологически устойчивой платформой
Веб прозрачен
Веб является многобраузерным, много-операционным и для многих устройств
Веб может быть потреблен любым способом, который выбирают люди

Эти принципы не только теоретические, но и призывают всех участников веб-сообщества оценивать влияние своих вкладов на общество и окружающую среду.

Оцениваем

#w3c #ethic

Freelance

#video #freelance

Один немолодой джаваскриптер, большой любитель кошек, имеющий онкозаболевание, критикующий распространенные фронтенд фреймворки, продвигающий свою идеологию рассказывает о своей жизни

#people

Вышел Vite 7 beta.0, который готовят под Rolldown

Меж тем Vite с Rolldown можно уже использовать через опубликованный пару дней назад специальный форк Vite - rolldown-vite

Кто-то уже пробовал?

#vite #rolldown

В Москве митапнулись модные вьюшники на msk_vue_js

#event

const project = shallowRef(null as Project);

Как типизировать shallowRef ES классом

#reactivity

Метод navigator.sendBeacon() предоставляет возможность гарантированно отправить небольшой объем данных на сервер, даже если пользователь закрывает страницу или браузер. В отличие от традиционных AJAX-запросов, которые могут быть прерваны при выгрузке страницы, sendBeacon обеспечивает доставку данных в таких сценариях.

Браузер дает запросу sendBeacon приоритетное выполнение перед завершением работы страницы, что делает этот метод идеальным для критически важных данных.

Практические применения

- Финализация аналитических данных - отправка собранной за сессию аналитики перед закрытием страницы
- Автосохранение - сохранение последнего состояния приложения, которое пользователь мог не сохранить явно
- Отчеты об ошибках - гарантированная отправка логов о критических ошибках
- Трекинг поведения - фиксация последних действий пользователя перед уходом

const data = JSON.stringify({event: 'page_close', time: Date.now()});
navigator.sendBeacon('/analytics', data);

Ограничения

- Максимальный размер полезной нагрузки ограничен (обычно 64Кб)
- Поддерживает только POST-запросы
- Не поддерживает кастомные заголовки
- Ответ сервера не может быть обработан

#tip

Во Vue используется модель потока данных: "данные вниз, события наверх"

Но иногда всё-таки нужно послать событие дочернему компоненту, и в этом случае используется defineExpose. Это вполне соответствует лучшим практикам обычного HTML и DOM API

Основные use cases:

- открыть/закрыть модалку
- установить фокус
- сбросить форму
- валидировать поле
- обновить данные
- включить/выключить аудио/видео/анимацию

#expose

Cursor дорос до 1.0.0 версии

Обнов много - memories, review PR-ов, MCP в один клик, диаграммы и таблицы в ответах в чате и другое

Вообще, это IDE довольно быстро развивается последние недели и, тьфу-тьфу-тьфу, более-менее стабильно работает

#ai #cursor

Несколько месяцев назад Cursor (и другие, наверно, тоже) научились работать с линтером, за один прогон исправляя ошибки

Можно пойти дальше - попросите Cursor написать и использовать тестовый скрипт для проверки некого функционала (без каких либо тестовых библиотек), который вы ему заказали. Тогда агент будет в цикле сам запускать этот скрипт, который будет проверять правильность уже проектного кода, ставить логи, изучать ошибки и исправлять их, пока всё не пофиксит. Часто он делает это сам.

Экономия времени и кредитов.

(не для vue, для js, py, php etc).

P.S. В новом Курсоре появилась фича Run agent in Clouds, включенная по умолчанию, из-за которой редактор начинает жутко тормозить. Можно отключить.

#ai #cursor #tip