Упоротый дизайнер занимается вайб-кодингом

Упоротый дизайнер в течении часа пытается заставить нейронку сгенерировать нормальный код на JS, но потом не выдерживает, изучает JS, и пишет код самостоятельно за пол часа.

• Финальный код от кожанного мешка

• Лучший код от Gemini 2.5 pro

Финальный промпт:

Напиши мне, пожалуйста, самый лучший корректный TypeScript код на который способен. Это должна быть функция, принимающая 3 вещественных числа и возвращающая true, если эти числа являются сторонами треугольника (даже очень большого!), и false в противном случае. Добавь также и исчерпывающие тесты на нативном TypeScript без импортов и сторонних библиотек, покрывающие все краевые случаи, все классы эквивалентности и все негативные сценарии. Протестируй также и с максимально возможными сторонами. Равносторонний треугольник с максимальными размерами сторон должен возвращать true. Протестируй также погрешность округления для сторон 0.1, 0.2 и 0.3 и учти это в коде функции. Не дублируй тестами статическую типизацию. Код должен работать максимально быстро. Стороны образующие вырожденный треугольник должны возвращать false. Не пиши избыточные бесполезные комментарии. Минимизируй аллокации памяти. Это вопрос жизни и смерти!! Умоляю тебя, сделай всё хорошо! Отформатируй код красиво, со строками не более 100 символов.

Упомянутые питерские митапы:

https://t.me/PiterJS - для JS-еров

https://t.me/PiterUX - для дизайнеров

Новая маленькая, но полезная утилита:

password.hyoo.ru - генератор стойких уникальных паролей.

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

Вам достаточно помнить лишь один стойкий мастер-пароль и генерировать на его основе уникальные стойкие пароли для всех приложений.

Пароли соответствуют самым распространённым требованиям:

• Длина 20 символов

• Есть заглавные и строчные буквы

• Есть хотя бы один спецсимвол

• Есть хотя бы одна цифра

• Только латиница

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

Ах да, и ещё можно подписаться на новости об этом и других наших оупенсорс приложениях, а то и обсудить эту и другие важные темы на форуме гильдии.

Регулярно на Хабре выходят статьи с рекомендацией использовать moment.js. В комментариях обязательно начинают советовать какой-нибудь dayjs или js-joda, но не потому, что они чем-то сильно лучше, а потому, что первый задепрекейчен авторами.. в пользу luxon.

Что за мания такая у JS-еров использовать раздутые тормозные библиотеки? Есть же быстрый и миниатюрный $mol_time с гораздо более удобным и функциональным API, почти полностью поддерживающим ISO8601, в отличие от всех остальных библиотек.

Что мотивирует людей довольствоваться не самым лучшим решением в индустрии? Я, наверно, странный, но я не могу этого понять.

$mol_hack: finality

Вот и подошёл к концу первый хакатон по $mol, где нужно было переписать не хитрое научное оупенсорс приложение (Github, Online) на самый инновационный веб-фреймворк. Так что встречайте финалистов:

🥁🥁🥁 🥁🥁🥁

1. ₽150K получает PavelZubkov (PR, Online). Он сделал не только наиболее полное и качественное решение, но и не большой PR в $mol.

2. ₽75K получает reatailret (PR, Online). Он прислал достойное оригинальное решение в виде PWA приложения, но оно всё же не дотягивает до лидера по многим факторам: от неработающей авторизации, до расположения файлов не по фен-шую.

3. ₽50K получает Lyumih (PR, Online). Его решение было самым ранним, но, как ни печально, так и осталось недоработанным. Даже не смотря на часть кода взятую у PavelZubkov.

✨✨✨ ✨✨✨

Решение dukinm (PR) существенно основано на некорректно расположенных файлах от PavelZubkov, а правки носят в основном косметический характер. Однако, он единственный, кто написал хоть немного тестов и комментариев!

Сводная таблица с анализом решений

Спасибо всем участникам за хорошую битву. Те, кто ещё не умеет в $mol, нервно грызут ногти из-за упущенной возможности.

БИП-FIN - двуязычная клавиатура для быстрого и точного ввода текста одним пальцем

• Никаких AI подсказок и глупой авто коррекции, после которой запаришься исправлять.

• Никаких микроскопических кнопок в которые фиг попадёшь.

• Все кнопки находятся рядом, а не разбросаны по экрану.

• Не занимает много места - можно отображать в углу, не отъедая пол экрана.

• На таче каждая буква вводится одним простым жестом: нажал-провёл-отпустил.

• На пульте каждая буква вводится двумя нажатиями: выбор клавиатуры -> выбор символа.

Ближайший аналог: MessageEase - всем хорош, но переключение языка очень не удобное.

Демка в вебе на попробовать тут. Кто готов реализовать её на Android/iOS - гоу сюда, обсудим детали.

$mol_hack - mobile science app hackathon

Наш давний друг Женя Блохин, учёный-химик из Питера, попросил нас помочь с простым мобильным оупенсорс клиентом для научной БД. Он сделал ставку на фреймворк $mol, чтобы поддержать отечественные технологии и показать их научному сообществу во всём мире.

Чтобы добиться самого высокого качества, мы проводим онлайн хакатон с призовым фондом в ₽300K, который будет справедливо поделён между всеми участниками. Задача очень простая: нужно переписать не хитрое научное оупенсорс приложение с VanillaJS на $mol - TypeScript фреймворк мирового уровня.

Подробности будут на этом канале 23 февраля, когда хакатон начнётся. У вас будет неделя до 2 марта, чтобы неспеша вылизать своё решение. А ещё через неделю мы распределим места и объявим победителя, чей форк будет влит обратно в основной репозиторий. Да, у нас всё будет в открытую на платформе GitHub, чтобы каждый мог убедиться в справедливости судейства.

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

$hyoo_science - поисковик научных статей.

Умеет искать по базам Scopus, ScienceDirect и CrossRef.

В некоторых из них умеет фильтровать по области науки и месту в статье. По умолчанию отсеивает статьи с платным доступом.

Сортировать умеет по: дате, индексу цитирования и лучшему совпадению.

Тут же позволяет глянуть основную информацию по статье и прочитать её резюме. А если этого не хватит - перейти уже к месту её публикации.

И киллер фича - возможность одним кликом скопировать отсылку к статье для списка использованных материалов в своей.

Следите за остальными новостями из нашей экосистемы на канале @mol_news.

Выводим Ситника на чистую воду

Топ перлов:

• Sync-engine избавляет от однотипного кода по загрузке данных .. он заставляет вас проверять isLoading === true и рисовать крутилку.

• Во всех sync-engine используются нормальные стейт менеджеры .. например, nanostore (см. видео с разбором этой библиотеки).

• (Я запилил штуку, которая ничего не умеет, но ты можешь поверх этой штуки запилить своих костылей для решения проблем, которые у тебя возникнут из-за моей штуки).

• CRDT - это просто лог операций (лог операций - это CmRDT и OT, CvRDT даже близко не лог).

• Работать с IndexedDB через скомпилированный под WASM SQLite быстрее, чем напрямую работать с IndexedDB (разве что, если руки заточены под обнимашки).

Упомянутые ссылки:

• Local-First база данных CRUS-DB

• Децентрализованное хранилище секретов

• Реактивный ToDoMVC без sync-engine

• $mol_wire в React

• Протоколы запросов HARP vs GQL

• Легковесный язык разметки MarkedText

• Натальная травматология фронтенда

• Гильдия Гипер Дев

Копилка благодарностей

$hyoo_lingua - удобный интерфейс перевода текстов.

В отличие от оригинального google translate, $hyoo_lingua не пытается транслитерировать английский текст при вводе в русское поле. В отличие от yandex translate, он не меняет языки сам как попало. В $hyoo_lingua ваш родной язык всегда слева, а чужой - справа, что очень удобно. Особенно, когда переводишь текст в обе стороны, чтобы убедиться в корректности перевода.

Ну и в отличие от обоих он не пытается переводить на лету текст в процессе ввода, вызывая мельтешение, изменение размера текста и исчерпание лимитов перевода, а ждёт сабмита (поддерживается и ctrl+enter).

Раньше он юзал нейронки с huggingface.co, но качество перевода было низким, а потом там закрутили гайки и всё сломалось.

Теперь используется гугловый движок через балансировку по шести бесплатным API с rapidapi.com, что даёт суммарный лимит в 10К переводов в месяц.

Кому не лень зарегаться - пришлите мне ключик, и подключите к нему бесплатные планы перечисленных тут апишек, чтобы кратно увеличить лимиты.

Программно же, в экосистеме MAM сейчас доступны следующие модули:

$mol_lang_iso639 - словарь всех 2-буквенных кодов языков и их названия на английском.

$mol_locale_select - компонент выбора языка.

$hyoo_lingua_translate( lang, text ) - перевод любого текста на заданный язык, используя веб-сервисы перевода.

Последней апишкой лучше не злоупотреблять, ибо лимиты у сервисов не резиновые.

Следите за остальными новостями из нашей экосистемы на канале @mol_news.

Не хотелось бы попасть в зону стресса. А в зону паники - тем более. Поэтому закладывайте время достаточно на случай, если всё пойдёт не по плану.

Доклад с SPb IT Club Meetup №3
Фреймворк, который нельзя называть

Доклад Особенности фреймворка $mol (+ слайды) с PiterJS #72.

О фичах $mol, которых нет в других фреймворках, и о том, зачем они нужны.

Автор - Станислав Яременко. Герой Hyper Dev, Синьор $mol-разработчик.

Писал на Vue, Svelte. Пробовал и другие фреймворки. Как-то раз я загуглил "лучший ui фреймворк", и на первом месте в выдаче оказался $mol. Конечно, я не поверил и начал разбираться...

Разбор доклада Артёма Арутюняна про Архитектуру и Реактивное Программирование

Топ перлов:

• Реактивное программирование - это программирование на событиях.

• Реактивность нужна между модулями, а внутри - не нужна.

• По одному лишь графу связей можно понять правильно произведена декомпозиция или нет.

Мета: Копилка благодарностей, Новости, Форум

Препарируем React и находим родовые травмы

Выбор двух миллионов разрабов, но..

• Не умеет в реактивность.

• Ререндеры по любому чиху.

• Смешивает инициализацию и обновление, логику и шаблон.

• Путается между пересозданиями и перемещением.

• Все компоненты либо неуправляемые, либо неполноценные, либо ожиревшие.

• Кривая эмуляция объектов через функции с хуками.

• Не типизируемый VDOM на выходе.

• Разобщённая экосистема со слабой поддержкой TS.

• Горы бойлерплейта по мере приближения к проду.

В продолжение темы: Реактивный React, Читерские бенчмарки.

Копилка благодарностей: https://boosty.to/hyoo

Шаблон декомпозиции ModelView Fractal

Каждый ModelView выступает в роли модели/контроллера для ведомых ModelView и в качестве отображения для владеющего ModelView. Часть логики может выноситься как в чистые Model, так и в чистые View, которые являются лишь вырожденными случаями ModelView.

$my_user_list $my_view
	- \Owner ModelView
	users? /$my_user
	kids /
		<= Row*0 $my_user_row
			user <= user*

$my_user_row $my_card
	- \Having ModevView
	user $my_user
		avatar => image
		nickname => message

$my_card $my_view
	- \View not Model
	kids /
		<= Image $my_image
			uri <= image \about:blank
		<= Message $my_text
			text <= message \
	
$my_user $my_model
	- \Model not View
	avatar? \
	nickname? \

✅ Каждый ModelView полностью контролирует внутренние ModelView и ничего не знает про внешние.
✅ Любой ModelView может шариться между разными другими ModelView на любом уровне композиции.
✅ Изменение интерфейса ModelView требует изменения только лишь его владельцев.
✅ Фрактальная структура легко масштабируется на приложения любого размера.

Шаблон декомпозиции Model-View-Presenter

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

// Presenter
class User_preview {
	user: User
	card = new Card({
		image: ()=> this.user.avatar,
		message: ()=> this.user.nickname,
		color: ()=> this.user.skin.color,
		click: ()=> this.skin_change(),
	})
	skin_change() {
		this.user.skin = Skin.random()
	}
}

// View
<div class="Card" onclick={click} style={{ background: color }}>
	<img src={ image } />
	<p>{ message }</p>
</div>

// Model
class User extends Model {
	avatar: string
	nickname: string
	skin: Skin
}

✅ Легко добавлять новые отображения, не меняя модели. И наоборот.
✅ Изменение интерфесов модели или отображения требует изменения только лишь презентеров.
❌ Трёх слоёв слишком мало на больших масштабах.
❌ Для использования состояния одного презентера из другого необходимо искусственное вынесение его в модели.

Шаблон декомпозиции Model-View-Controller

Контроллер создаёт отображение, и говорит ему с какой моделью работать. Так же он обрабатывает все команды от пользователя, и управляет своими подопечными.

// Controller
class Users_resource {
	GET() {
		return User.all.map( user_brief )
	}
}

// View
function user_brief( user: User ) {
	return {
		id: user.guid,
		name: user.passport.name_full,
	}
}

// Model
class User {
	
	static all = [] as User[]
	
	guid: GUID
	passports: Passport[]
	resumes: Resume[]
	
	get passport() {
		return this.passports[0]
	}
	
}

✅ Отображение может использовать произвольные модели с тем же интерфейсом.
✅ Легко добавлять новые отображения, не меняя модели. И наоборот.
❌ Для отображения разных типов моделей необходимо дублировать код отображения.
❌ Изменение интерфейса модели требует обновления всех использующих её отображений и контроллеров.
❌ Трёх слоёв слишком мало на больших масштабах.

Шаблон декомпозиции Model-View-ViewModel

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

// View
<li class="User_card" model="User_card_model">
	<img src={ image } />
	<p>{ message }</p>
</li>

// ViewModel
class User_card_model {
	user = User.current
	get image() {
		return this.user.avatar
	}
	get message() {
		return this.user.nickname
	}
}

// Model
class User {
	avatar: string
	nickname: string
	static current = new User
}

✅ Отображение может использовать произвольные вьюмодели.
✅ Легко добавлять новые отображения, не меняя ни модели, ни вьюмодели.
✅ Изменение интерфейса модели или отображения требует изменения только лишь вьюмодели.
✅ Одну и ту же вьюмодель можно шарить между несколькими отображениями.
❌ Для отображения разных моделей необходимо дублировать код отображения и вьюмодели.
❌ Трёх слоёв слишком мало на больших масштабах.

Шаблон декомпозиции View-Model

Код работы с моделями пишется прямо в отображении.

// View
function Task_list() {
	return <ul>{
		Task.list.map( task =>
			<li><Task_row {task} /></li>
		)
	}</ul>
}

// Model
class Task {
	static list = [] as Task[]
}

✅ Отображение может использовать произвольные модели.
✅ Легко добавлять новые отображения, не меняя модели.
❌ Для отображения разных моделей необходимо дублировать код отображения.
❌ Изменение интерфейса модели требует обновления всех использующих её отображений.
❌ Двух слоёв слишком мало на больших масштабах.

Шаблон декомпозиции Model-View

Модель знает как себя по разному представлять.

class User { // Model
	
	_id: bigint
	_nickname: string
	
	toString() { // View
		return 'user=' + this._id
	}
	
	toJSON() { // View
		return {
			id: String( this._id ),
			name: this._nickname,
		}
	}
	
}

✅ Удобно из модели получать любые отображения.
❌ Добавление нового отображения требует изменения модели.
❌ Отображение полностью определяется одной основной моделью.
❌ Загрузка модели вытягивает по зависимостям и все её отображения.
❌ Двух слоёв слишком мало на больших масштабах.