Warning: Undefined array key 0 in /var/www/tgoop/function.php on line 65

Warning: Trying to access array offset on value of type null in /var/www/tgoop/function.php on line 65
809 - Telegram Web
Telegram Web
Фантастические сайты на Джаваскрипте

Видели когда-нибудь крутые сайты с плавными анимациями, красивыми эффектами и интерактивом? Те сайты, которые попадают на Эвввордс и выигрывают международные премии. Про которые думаешь: «офигеть, как они вообще такое сделали?»

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

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

И вообще, уметь кодить полезно, даже если не собираешься становиться программистом:
— начинаешь понимать, как примерно устроено внутри всё, чем пользуешься каждый день: сайты, веб-приложения и информационные системы;
— это помогает делать макеты, к которым у разработчиков нет вопросов (особенно это ценно для продуктовых дизайнеров);
— это хорошая инвестиция в будущее; зная Джаваскрипт, будет значительно легче освоить фронтенд-фреймворк или выучить другой язык;
— это весело и иногда похоже на магию.

В прошлом году мы решили, что этой магии можно научить дизайнеров, и провели живой поток курса «Джаваскрипт по-дизайнерски». А потом долго-долго готовили его к выпуску в записи.

И вот.

Фантастические сайты на Джаваскрипте

Курс, на котором мы учим основам JS и показываем реализацию самых распространённых интерактивных эффектов в вебе.

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

Подробная информация, программа, FAQ, формат, тизер и отзывы — на обновлённом лендинге.

Купить доступ можно через телеграм-бота: @gendesign_bot.
🔥103👍3
План и импровизация

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

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

Когда нас с музыкантом Yello Leo пригласила Краснохолмская Галерея, я занервничал. Зрители будут сидеть, а не прыгать. И, вероятно, без пива. Вместо всеношного нонстопа — сорок минут, когда все сосредоточены только на нас. Нам предстояли два таких выступления. Надо отнестись к перформансу ответственно!

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

А потом я посмотрел на выступление со стороны и понял, что всё прошло… скучновато. Формально всё удалось, но чего-то не хватало.

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

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

А какая роль плана и импровизации в вашей жизни?
19👍17🔥1👾1
Про клавиатуру

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

И я люблю эту клавиатуру! Я готов простить ей все мелкие недостатки за плавность нажатия каждой из сорока двух клавиш и за ощущение в пальцах. Если на макбучной клавиатуре клавиши нажимаются до конца, и набор текста ощущается как тапанье, то на механике с линейными свитчами клавиша до дна часто не доходит: привыкаешь соизмерять силу нажатия и не продавливать лишние миллиметры. Сами нажатия глубже: сперва непривычно, а потом появляется ощущение, как будто «прокатываю» слова, будто котик мурлычет.

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

Ergonaut One — моя вторая клавиатура, до неё была Jorne: с проводами, но без корпуса. На ней я начинал безумные эксперименты с раскладкой и в результате подсел на такую странную штуку как home row mods. Это когда кнопки ASDF при долгом нажатии становятся кнтрлом, опшном, командом и шифтом соответственно. А JKL; тоже, но — зеркально, шифты под указательными. При слепой печати пальцы в базовом положении всегда находятся на этих клавишах, поэтому за модификаторами не нужно тянуться мизинцами, нажимать шоткаты, даже самые зубодробительные — одно удовольствие. Home row mods — причина почти всех моих косяков при наборе, но также и источник удовольствия.

Иногда я пишу только потому, что хочется что-то понабирать на клавиатуре. Этот текст, к примеру, я начал печатать именно по этой причине. Надо его запостить скорее, а не то нажму что-нибудь не то, и всё разлетится к чертям.

Лайвкодить на ивентах — только на макбучной!
20🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Сзвн!

Будем с Константином Келлером в прямом эфире делать штуку из точек. Я — кодить, а Константин быть заказчиком.

Константин — директор по развитию ONY Digital, экс-дизайн-директор СберЗдоровья и Почта Банка

Приходите знакомиться, советовать или просто наблюдать с попкорном из Самоката.

Сзвн в эт вс в этм кнл в 21 мск. Прхдт!
17🔥14
Вот это пврт!

Оказалось, что у Константина сегодня ДР, ура! Ставьте 🎉, если поздравляете Константина. Ну какие сзвны в ДР? Сзвн переносится на завтра и будет в 19:00.

Крч. Срн. Сзвн бдт в пн, 19:00 мск.
🎉277🥰4🤡1
Live stream scheduled for
Live stream finished (1 hour)
Как копировать текст отовсюду

Люблю мелкие упрощалки, вот, например, эту. С ней я могу скопировать в буфер обмена текст откуда угодно: субтитры из видео, путь к файлу из заголовка программы, телефон из нераспознанного ПДФ, текст ошибки из игрового интерфейса.

Раньше это тоже можно было сделать: на маке можно открыть картинку в просмотрщике и скопировать текст с неё, он довольно хорошо распознаётся. Но приходилось сперва сохранять буфер обмена в файл, потом открывать, ждать, пока текст распознается (это видно по изменению формы курсора над буквами), наконец — копировать.

А теперь скриншочу нужный фрагмент экрана в буфер обмена и рейкастом запускаю питоновский скрипт. Он распознаёт текст скриншота и копирует его в буфер обмена вместо картинки. Скрипт — в комментариях.

Мелочь, а приятно.
🔥82
Канал Ивана Дианова
Сзвн! Будем с Константином Келлером в прямом эфире делать штуку из точек. Я — кодить, а Константин быть заказчиком. Константин — директор по развитию ONY Digital, экс-дизайн-директор СберЗдоровья и Почта Банка Приходите знакомиться, советовать или просто…
This media is not supported in your browser
VIEW IN TELEGRAM
Кстати, сзвнились с Костей, сделали несколько крутящихся штуковин, в одну из них я сегодня Клодом добавил слайдеры для настройки.

Видео созвона получилось не особо развлекательным: я там периодически туплю, хожу кругами и не всегда получаю, что пытаюсь. Всё как в жизни. Но, если вдруг вам интересно посмотреть, как оно в жизни, видео в комментах.
114🔥9👾3
Когда будет курс по шейдерам

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

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

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

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

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

Работа затянулась на полгода, но потихоньку едет. Очень стремимся к тому, чтобы результат был классный. Пока получаются вот такие штуки, но это только начало. Стей тюнд!
19👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Мой ответ Бостон Динамиксу

С помощью сосиски из Самоката я нашёл баг в игре и выиграл промокод на Самокат.
🤣34🔥6👏2
Попался
😁27🤩1
Обойные группы

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

Сегодня случилось озарение, что замощения — это очень топологическая штука. Я и раньше понимал, что взятие модуля от координат точки как бы приделывает верхний край тайла к его низу, а левую грань к правой. То есть сворачивает прямоугольник в тор. А тут вдруг как понял! Все обойные группы ровно про то же самое, только способов обработки края больше.

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

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

Если вам интересно про всё это узнать побольше, вот клёвый видос https://www.youtube.com/watch?v=C_konuQKGtQ
🔥19🤯52👍2
diff для согласования договоров и текст-понга

Иногда надо узнать, что в тексте поменялось. Например, внимательно прочитал договор, а тут клиент делает одну крошечную правку и присылает новый пдф. Скорее всего, там всё ок, но мало ли. Перечитывать всё заново не хочется.

Или мы с Адамом текст-понгаем: редактируем письма, посты и тексты на сайт по-очереди, прямо в телеге.

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

Вот смотрю и сразу вижу, что Адам про лапы и хвост удалил, а так бы и не заметил. Удалил, ну и ладно. И без лап нормально.
112🥰2🤯1
Алгоритмическая графика: JS для дизайна и искусства

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

Было много нового и интересного: новые люди, локации. И инструменты. Например, презу делал в sli.dev, вот тут лог-чат про процесс https://www.tgoop.com/ivandianov_log/649

А на груповое фото я не попал, потом как-нибудь прифотошоплю.
🔥14👍2
2025/10/16 07:12:03
Back to Top
HTML Embed Code: