Фронтенд-фреймворки показывают, как они умеют.
На екмаскрипте.

#js #video #offtop

У Cursor большие обновления

- "Автокомплит" теперь может работать с несколькими файлами (рефакторинг)
- Можно делать воркспейс с несколькими проектами, .cursor/rules у каждого свои будут
- Правила можно генерить напрямую
- Можно в контекст засунуть всю кодовую базу и много другого

Тем не менее агент их местами тупит нереально, как робопылесос, утыкающийся в тапок на ровном месте...

#ai #cursor

Самые значимые обновления CSS в 2024 года:

- Анимация height : auto + calc-size
- @starting-style: решает проблему, когда добавление элементов в DOM ломает анимацию
- Scroll-driven animations: эта функция добавляет в CSS анимации, запускаемые скроллом.
- Popover API: Позволяет создавать всплывающие подсказки и окна на чистом CSS
- Document view transitions: позволяет анимировать переходы между HTML-документами.

#css

Во фронтенде нет архитектуры, потому что её заменил вечный карнавал фреймворков, где каждые полгода появляется новый "революционный" подход к решению тех же проблем, что решались 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