99.9% технически реально качественного софта помирает на GitHub с парой десятков звезд, а говно типа Facebook-a "завоёвывает" мир

На Product Radar за недолгую его историю выставлялось около 800 проектов, некоторые из них очень классные.

Вот, например, наткнулся: acetone.ai - супер удобный сервис для удаления фона с фото и картинок

#pet #software #image

Атрибуты хорошего кода

Хороший код (ПО) обладает рядом атрибутов, которые делают его удобным для чтения, поддержки и развития. Вот ключевые характеристики:

1. Читаемость

Понятные имена переменных, функций, классов (например, calculateTotalPrice() вместо calc()).
Единый стиль (консистентность в именовании, отступах, структуре).
Комментарии там, где логика неочевидна (но без избыточности).

2. Модульность и структурированность

Разделение на функции/классы/компоненты (принцип Single Responsibility).
Низкая связанность (low coupling) – компоненты минимально зависят друг от друга.
Высокая связность (high cohesion) – код внутри модуля решает одну задачу.

3. Тестируемость

Покрытие тестами (код легко проверить на корректность).
Изолированность (зависимости можно подменить mock-объектами).

4. Эффективность и производительность

Оптимальные алгоритмы (O-нотация учитывается, но без преждевременной оптимизации).
Минимизация ресурсов (память, процессор, сетевые запросы).

5. Гибкость и расширяемость

Открытость/закрытость (Open/Closed Principle) – код можно расширять без изменения существующей логики.
Использование паттернов проектирования (например, Factory, Strategy, Observer).

6. Надежность и отказоустойчивость

Обработка ошибок (корректные исключения, logging).
Обработка edge-cases (крайние случаи, невалидные входные данные).

7. Поддерживаемость

Документация (хотя бы минимальная: README, docstrings).
Рефакторинг – код можно улучшать без страха что-то сломать.

8. Безопасность

Защита от уязвимостей (SQL-инъекции, XSS, CSRF и др.).
Валидация входных данных.

9. Совместимость и переносимость

Кросс-платформенность (если требуется).
Четкие зависимости (использование package managers: pip, pnpm, maven).

10. Соответствие стандартам и best practices

Следование языковым идиомам (Pythonic way, Java Code Conventions, Vue code style и т. д.).
Интеграция с CI/CD (автоматические тесты, деплой)

#architecture #code

Получил очень интересный и полезный опыт:

1. Выделив UI часть проекта Lissa Health в отдельный модуль (привет, #fsd)
2. Добавив дизайн систему на CSS свойствах и оформив всё как UI kit
3. Выделив в отдельный репозиторий, который ставится как Git submodule и подключается через npm локально (для быстрых правок)
4. Создав документацию
5. Добавив темизацию и кастомизацию компонентов
6. Переиспользовав его в других проектах

На npmjs.org не публиковал, на универсальность, полноту (не собираюсь выпускать ее как общую библиотеку) и актуальность документации не претендую, но можно просто посмотреть как работать с Ark-UI.

Alt-UI

#arkui #altui #ui

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

#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