Вайб-кодинг

Расскажите, а вы кодили нейросетями? Использовали в работе ЧатГПТ, Клод, Курсор или что-нибудь ещё?

Что прикольного получилось с ними сделать? А что не получилось, несмотря на все старания? Что выходило легко, а что бесило?

Что бы вы хотели узнать про вайб-кодинг? Или вы против нейросетей? Или вы сами нейросеть?

Хотим послушать про ваш опыт!

Иван Дианов. Алгоритмическая графика: JS для дизайна и искусства

Вышла запись доклада Вани на конференции HolyJS, которая проходила в апреле этого года.

Я посмотрел полностью. Интересно! Хоть и я почти всё уже знал :—).

https://www.youtube.com/watch?v=FomI7h3fS5M
https://www.youtube.com/watch?v=FomI7h3fS5M
https://www.youtube.com/watch?v=FomI7h3fS5M

Курс генеративного дизайна в новом формате

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

Задумка была такая: не вываливать на ученика сразу весь материал, а давать его по кусочкам (так же, как в живом курсе). При этом живое общение заменялось чатом с нами и всеми участниками.

В января этого года мы выпустили курс «Фантастические сайты на Джаваскрипте» в новом экспериментальном формате — все материалы разбиты на каналы, но их можно читать сразу по мере прохождения курса.

И этот формат оказался удобнее, потому что можно проходить курс в своём темпе. Можно спокойно и вдумчиво, а можно заинтенсивить за неделю.

Сегодня мы перезапускаем в этом формате курс генеративного дизайна.

______

Про что курс

Этот курс — про основы программирования на JS и генерацию графики в вебе на p5.js. Ученики часто говорят, что мы приоткрываем занавесь сложного мира программирования, даём основы и классный толчок, который потом вдохновляет разбираться и изучать самому.

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

Ещё говорят, что у нас классно на занятиях. Мы ведём курс в формате подкаста — один ведущий рассказывает материал, а второй следит за ходом занятия и задаёт вопросы, которые боятся задавать ученики.

______

Формат

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

До конца августа курс продаётся со скидкой за 5500 ₽. Первого сентября скидка закончится, и курс будет стоить 7500 ₽.

Подробное описание, программа, формат, работы выпускников, FAQ и отзывы — на лендинге.

Купить доступ можно через бота: @gendesign_bot. Он возьмёт деньги и пришлёт ссылку на вступление в канал-вступление.

setka.design
setka.design
setka.design

Вдогонку, про Сетку.
_____

Апгрейднул сайт Сетки

У Сетки есть сайт setka.design, который я написал на втором Вью пару лет назад.

Почему вью-2, если давно есть вью-3? Не знаю — я писал на вью-2 в студии, и уже тогда это считалось устаревшей технологией. Но я писал на чём знаю, а другого ничего не знал.

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

Очень хотелось переписать и пересобрать сайт на вью-3, но это очень много механической и инфраструктурной работы.

(Примерный масштаб: апгрейд с вью-2 на вью-3 — это примерно 5-6 лет разработки фронтенд-технологий в целом. Это примерно как апгрейд с питона-2 на питон-3! А ещё помимо статических страниц у нас есть инструменты со всяким кастомным кодом — p5-скетчи на лендингах, Метрогенератор и Пиксельсорт. В общем, сайт не очень большой, но и не очень маленький.)

Месяц назад проект отказался запускаться локально, и решил, что пришло время. Но к счастью к этому времени уже изобрели Курсор, которому можно поручить всё переписать.

В этот день произошло чудо — на всё ушло ровно шесть часов. А именно на:
— обновление и переподключение всех зависимостей;
— полное переписывание кода фронтенда с Vue 2 на Vue 3, пересборку стилей и плагинов;
— переход с Nuxt 2 на Nuxt 3 (сопутствующий переход с Webpack на Vite);
— переход с Pug на HTML (паг хороший, но надоел, много чем бесит в связке с фронтендом);
— переход с SASS на SCSS (по вайбам);
— перевод лейзи-лода картинок и видео со старой кривой библиотеки на нативные инструменты браузера;
— обновление ESLint и CI/CD-пайплайнов.

Спустя шесть часов я вмёрджил PR на одиннадцать тысяч строк кода, и всё заработало с первого раза без единого бага.

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

Заходите на новый сайт — там ничего не поменялось.

Скидка на курс генеративного дизайна действует сегодня.

Скидка на курс генеративного дизайна действует завтра.

Послезавтра скидка на курс генеративного дизайна не действует.

Вернёмся к курсу по математике. Вот текущий статус:

1. Курс будет.

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

2. Курс будет заметно дешевле наших остальных.

Это стратегическое решение:
— Во-первых, хочется, чтобы его прошли как можно больше людей;
— Во-вторых, это такой бизнес-трюк. Промо-трамплин-курс, который знакомит с нами, нашими занятиями и подходом к обучению. Есть предположение, что занятия мы ведём интересно, и захочется поучиться у нас чему-нибудь ещё. При этом курс такой же качественный, как и остальные, мы делаем всё в полную силу.

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

4. Анонс и начало продаж планируются на начало октября. Школьникам и студентам будет 50%-я скидка.

(Курс по шейдерам всё ещё в активной разработке.)

Лайвкодинг у Яндекса на Бигтех найт

Слетал в Москву и повиджеил на сайлент диско. Это когда на площадке тихо, а колбасятся все под музыку в наушниках.

Впервые лайвкодил на изогнутом экране, а ещё по краям были светодиодные сетки. Коллега Артём вывел туда кусочки шейдера из основной картинки, получилось мощно. На будущее — можно было бы мне для них отдельные кусочки видео предусмотреть, справа от основного. Координаты заранее учесть и замапить, чтобы получились окошки в единое фрактальное пространство.

Сижу в аэропорту и продолжаю менять вчерашний код, не так легко остановиться. Главное — не увлечься и посадку не пропустить.

Люблю лайвкодить, зовите, если что :–)

Три новости про курс «Фантастические сайты на Джаваскрипте».

Во-первых, он стал дешевле.

Во-вторых, мы наконец-то подключили новый платёжный шлюз от ЮКассы — теперь формочка оплаты не образца 2011 года, а вполне современная. Заодно починился баг с вводом номера карты и добавилась оплата через Сбер-пей и кошелёк Юмани.

В-третьих, теперь наш курс можно купить в пакете с курсом «Зачем и как дизайнить кодом» от Интуиции. Они взаимно дополняют друг друга — курс Интуиции про основы HTML и CSS, а наш про Джаваскрипт.

Многие покупали оба курса сразу, и теперь это можно сделать со скидкой. На нашем лендинге лежит промокод на скидку в 2000 ₽ на курс Интуиции, а внутри того курса лежит такая же скидка на наш.

____________________

На курсе «Фантастические сайты на Джаваскрипте» мы рассказываем основы JS и учимся кодить красивые эффекты в вебе. Ещё мы показываем, что начать программировать несложно, и что разработка даёт веселье и фан.

Ещё программа на лендинге пиздато запрограммирована, и отзывы хорошие.

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

Курс доступен сразу после оплаты, доступ остаётся навечно.

https://setka.design/web/
https://setka.design/web/
https://setka.design/web/

03.26
3
9
14900

Открытый шейдерный мастер-класс

Курс по шейдерам всё ближе, мы готовимся и хотим затестить новый формат. До этого мы вели курсы вдвоём и всем это нравилось. В этот раз идём ещё дальше, и ведущих будет трое:

Иван Дианов (ну вы его знаете).

Адам Арутюнов (ну вы его тоже знаете).

Дмитрий Кайда. Дизайнер и артдир, делает вот такую красоту: instagram.com/kobayashi68

Мастер-класс будет устроен так:
— Дима артдирит и творчески направляет, чтобы в конце получилась не технодемка, а что-то великое;
— Ваня пишет код и объясняет его Адаму;
— Адам задаёт вопросы, когда что-то непонятно (Адам программист, но ничего не понимает в шейдерах).

За референс возьмём видео ↑ из этого поста, а что в конце получится — не знаем.

Мастер-класс будет проходить в Зуме и займёт около полутора часов. Можно будет прийти прямо на трансляцию и задавать вопросы.

5 ноября, 19:00 по Москве

Открытый шейдерный мастер-класс пройдёт сегодня в 19:00 по Москве.

Ссылка на Зум появится за пять минут до начала и пропадёт через десять минут после начала.

Приходите!

Открытый шейдерный мастер-класс

https://www.youtube.com/watch?v=7sMNsorvg3c
https://www.youtube.com/watch?v=7sMNsorvg3c
https://www.youtube.com/watch?v=7sMNsorvg3c

00:00 Формат созвона
03:50 Референс
05:40 Открываем редактор и начинаем писать шейдер.
21:50 Передаём в шейдер данные из джаваскрипта
25:35 Передаём в шейдер картинку
33:27 Иван мстит собачке. Плющит и растягивает.
44:40 Адам предлагает делать полосочки циклом
1:06:40 Мы радуемся тому, что всё заработало
1:07:34 Артдир Дима говорит, что делать дальше
1:12:00 Дима сдался
1:13:30 Экспериментируем с числом линий реза
1:15:50 Ставим линии не рандомно, а с умом. Рисуем графики, теряем Диму
1:20:10 Функция Шлика: график и шейпинг картинки
1:29:10 Добавление горизонтальных линий реза
1:35:40 Грид из тонких линий
1:43:21 Убираем грид
1:47:50 Добавляем искажение в каждую полоску.
1:49:37 Иван нашёл идеальную формулу. Дима одобряет, Адаму нравится.
1:52:10 Эпилог, прощание

Математика, которая пригодится в жизни

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

Для чего учить сложные формулы, которые вылетают из головы сразу же после окончания школы? Зачем нужны синусы и косинусы, функции и интегралы? Почему надо решать задачи про пятьдесят арбузов, двух велосипедистов и грибы в третьем бочонке? Где мне всё это пригодится?

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

Но вообще-то, математика — полезный инструмент, и во взрослой жизни встречается много вопросов, с которыми она могла бы помочь.

Ипотека под 8% на 20 лет или под 12% на 15 лет? Сколько накопишь, если каждый месяц класть часть зарплаты на депозит? Что такое «средняя» и «медианная» зарплата? Насколько реально выиграть в лотерею? Почему казино всегда в выигрыше? Почему положительный тест на ковид не значит, что ты болен? Что такое инфляция, рост инфляции и темпы роста инфляции? Влезет ли диван в лифт по диагонали? Почему в самолёте все встают сразу после посадки? Как распознавать манипуляции в новостях и научных статьях?

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

Поэтому мы сделали этот курс.

На курсе мы смотрим на математику в контексте реальных задач. Мы собрали темы и примеры, которые дают ощутимую практическую пользу и встречаются в жизни ежедневно. За двенадцать занятий мы расскажем базу нескольких областей математики, ответим на вопросы выше ↑ и покажем, как применять эти знания в жизни.

Подробное описание, программа и FAQ — на лендинге.

Формат

12 января — 19 февраля.

12 занятий, 2 занятия в неделю. Общий телеграм-чат и канал с записями, которые остаются навсегда.

Адам ведёт занятия, Ваня помогает и задаёт вопросы, которые боятся задавать слушатели.

Цена — 3500 ₽. Школьникам и студентам — скидка 50%.

Записаться через бота: @gendesign_bot.

Не хотим нагонять спешку, но на курсе всего тридцать пять мест.

setka.design/math

В Интуиции все продукты и инициативы хитро связаны. Например, у нас есть дизайн-система IDS для вёрстки лендосов и лонгридов. И есть Ньюс, сообщество, в котором делают своё. И совершенно не странно, что ребята в сообществе часто пользуются дизайн-системой для своих штук. И поэтому.

Сегодня в 16:00 мск в Ньюсе будет стрим — мы с Адамом Арутюновым сделаем новый компонент дизайн-системы. Ну или начнём его.

Этот компонент — генератор обложек. Некий скрипт, который умеет любой прямоугольник превращать в красивую абстрактную картинку, не рандомную, а сделанную по известному алгоритму. Это в вебе, на CSS, без нейросетей, без серверной логики, чисто браузерное решение. Будем делать почти с нуля (подготовлю страничку только). Дизайн не рисовали, в общих чертах проговорили направление, будем импровизировать.

Чтобы прийти на стрим (или посмотреть его в записи), подпишитесь на Ньюс за 1₽. Потом можно отписаться, у нас там всё супер-прозрачно, с предупреждениями о списаниях, без лишних вопросов, без манипуляций. (Расчёт на то, что вы подпишетесь за рубль, посмотрите, как у нас там внутри, и захотите остаться. Но если нет, вообще никто слова не скажет.)

Это здесь.

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

Это как практические занятия курса ФСНД, только мы решили чуть меньше всё разжёвывать, чтобы успевать делать больше.

Приходите :—).