14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#codepen дня
Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?
Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME
Для лучшего понимания происходящего слои можно вращать. Выбирайте разные режимы наложения, меняйте фоны — лучше не найти.
Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui
Описываете конфигурацию и переменные, которыми желаете управлять, загружаете их в dat — и получаете возможность менять их на лету. Очень популярная штука в разных демках, особенно в WebGL.
#mix #blend #css #бородач
#инструмент дня
Давайте честно, процесс сборки откровенно раздражает.
Да, мы живём в 2023 году и вполне можем себе позволить использовать импорты и модули вообще без транспиляции кода и сборки.
Вот только с тем же кодом на React (да и не только, JSX сейчас много где) так не получится.
Плюс, естественно, у сырого импорта есть куча собственных проблем, Андрей Ситник писал об этом тред, а у меня, конечно, имеется выжимка.
К счастью, есть некое решение! И это решение — https://esm.sh/
Это автоматический сборщик и хостинг модулей на Deno в одном флаконе, если уж совсем грубо.
И вот недавно они релизнули новую часть проекта — поддержка кода, задекларированного в тегах script. Кривовато написал...
Давайте я сразу покажу пример: https://codepen.io/alinaki/pen/NWoERwW
Что тут происходит?
1. Запихиваю приложение в <script>, указывая тип text/babel (так повелось, что тогда VS Code его подсветит).
Тип такой нужен, чтобы браузер исполнять не полез.
2. Чуть выше импортирую скрипт для «сборки» (какая ирония): https://esm.sh/run
3. ...
4. Работает!
5. В примере я объявил importmap чтобы писать названия модулей так, будто у меня есть package.json. Но esm и просто ссылки поддерживает, дублируя npm и обогащая своими плюшками.
Штука забавная, на самом деле. Можно хостить самому, не опираясь на CDN.
Изначально я пробовал другой их продукт, build. Он собирает модули на лету, весьма удобно, рекомендую. Правда, немного задолбался с тем, что среда требует чёткого указания MIME-типа файла, а GitHub Pages отдают jsx как text/jsx и так далее. И настроить нельзя :( Так что для такого проекта надо брать полновесный хостинг.
Так или иначе, оно завелось! Для демок точно прекрасно, для кода, требующего ремонт на лету — тоже, вполне.
#js #module #esm
Если вам всегда нравилось находить какие-то мелкие ошибки на картинках, в тексте, у колллег (шутка!)... То сейчас вы узнаете, как на таком можно заработать!
Секрета нет – нужно просто пройти обучение на тестировщика.
Инженер по тестированию программного обеспечения (он же тестировщик или QA engineer) проверяет IT-продукты на прочность. Он продумывает, что и где может сломаться, прогнозирует сбои и находит ошибки в приложениях, сайтах и программах, чтобы продукт вышел работоспособным.
Компании готовы достойно платить специалистам, которые помогут избежать финансовых потерь и обеспечат бесперебойную работу их сервисов.
Не теряйте время, htmlshit">записывайтесь на обучение в SkillBox !
Реклама. ООО Скилбокс" ИНН 9701078611
Erid: 2VtzquseANm
#статья дня
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Ну и, конечно, сразу демо: https://codepen.io/alinaki/pen/jOdeqRv
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music #бородач
Погрузитесь в мир ☕️ Java и станьте Java-разработчиком за 4 месяца с курсом от Merion Academy!
Все, кому интересно, получат 🚀 3 бесплатных урока, 📍 Мы расскажем про то, что из себя представляет язык Java и его базовый синтаксис.
📍 Установите Java и среду разработки где будете писать код.
📍 Напишете свою первую консольную программу, а после нее и REST API приложение.
📍 А в конце закрепите полученные знания.
🎁 Бонус – интенсив по развитию карьеры, где HR-эксперты расскажут как создавать сильные резюме и проходить собеседования.
📜 Плюс гайд по базовому синтакису языка.
🕺У ребят одна из самых доступных цен, которая в разы ниже, чем в других онлайн-школах, а еще есть рассрочка для тех, кто хочет учиться сейчас и платить по чуть-чуть ежемесячно.
👉 Регистрируйтесь по ссылке чтобы забрать бесплатные уроки, интенсив по карьере и гайд.
Merion Academy – это экосистема доступного образования, которая включает в себя:
📍IT-базу знаний с полезными статьями.
📍merionacademy">Youtube-канал ,где простыми словами говорят о сложных вещах.
📍IT-академию, где обучат востребованным направлениям по самым доступным ценам.
#автор дня
Олды помнят, что я пытался ввести эту рубрику, но как-то подзабил.
И это при том, что инфлюенсеров в мире фронтенда (ну так уж повелось, что канал больше об этом) не так уж и много на самом деле. Впрочем, потому и упоминаются достаточно часто.
Тем не менее, некоторые из них достойны отдельного поста. И сегодня — Ана Тюдор (Ana Tudor).
Она, кстати, не Анна, она — Анастасия, если уж полное имя рассматривать.
Чем известна? О, ну тут вопрос, с чего бы начать. По-моему, самой популярной её работой является коллекция "ползунков" — виджетов для ввода диапазонов, CodePen. Все на базе нативных полей, с минимумом JS. Бери и пользуйся.
Так же раньше она очень много писала для ресурса CSS Tricks, но сейчас больше фокусируется на демо для YouTube-канала.
Кстати, о демо. Опять же, на CodePen представлено невероятное количество её работ, сгруппированное по категориям, от абстрактных геометрических экспериментов до весьма практичной инфографики.
А уровень её использования CSS-переменных вообще где-то за гранью.
Ну и конечно недавняя простая, но эффектная демка с анимированным градиентным текстом — тоже её.
В общем, Ана не то чтобы нуждалась в моей рекомендации, но если вы о ней не знали до этого момента, надеюсь, этот пост был полезен :)
#css #art #author
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇
📌Senior Frontend — JS, HTML и CSS
📌Frontend Interview — как проходить собеседования
📌Web Craft — только Web-разработка
📌Frontender Libs — библиотеки для фронтендеров
#такое дня
Очень интересно наблюдать за тем, как люди переоткрывают для себя старые Web API. Только с другой стороны.
Ну я в том смысле, что на нас с вами сплошь и рядом несётся поток нововведений и он настолько шумит, что складывается впечатление, будто раньше вообще не было фана.
Был. Но, скажем так, интрузивный 🙂 Сейчас поясню.
Вот пронеслась ураганом демка, на которой 3D-сцена делится на два окна и эти окна взаимодействуют между собой: https://twitter.com/_nonfigurativ_/status/1727657155409363120
Автор пока не дал исходников самой модельки, только демо попроще: https://bgstaal.github.io/multipleWindow3dScene/
Но работает это взаимодействие на API из начала нулевых: window.screenX и, соответственно, screenY (и их алиасы screenLeft и screenTop; потому что IE).
Ну, то есть, буквально доступно в любом браузере вообще. И давно.
Так что давайте повторим! Не без помощи мэтра Wes Bos, конечно. Он не дал ссылку на демо, потому пришлось немного постараться уже мне и собрать пример: https://htmlshit.github.io/webcam/dist/
Открывайте, разрешайте доступ к камере и увидите примерно ту же картину, что и на моём видео к посту.
Применить это, конечно, тупо некуда. Но как пример взаимодействия разных окон через localStorage — очень даже заходит :)
Так во, почему интрузивно: потому что раньше можно было двигать открытое окно. То есть, представьте себе, вы хотите окно закрыть, мышкой двигаете — а оно уползает. Сейчас такого, конечно, сделать нельзя.
P. S. Перезалил видео. Я не ожидал, что телега оригинал зальёт.
#webcam #localstorage #fun
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
Что отличает промышленный проект от обычного? Может быть огромная кодовая база из миллиона строк? Или существование на протяжении десятилетий? 🤔
На самом деле мы упустили важный нюанс, а как все это великолепие тестируется и собирается.
Ребята из крупнейшей IT компании страны на основе собственного опыта создали курс по продвинутому использованию Webpack для сборки Frontend приложений промышленного уровня.
За 3 месяца на курсе ты научишься:
▪️настраивать сборку под любые самые нестандартные задачи,
▪️писать сложные плагины и лоадеры;
▪️узнаешь про микрофронтенды и сборку WASM;
▪️а также как настроить все это, чтобы оно работало быстро даже на сверх огромных проектах.
Это не просто «еще один обзорный тур по Webpack, а очень глубокий и проработанный материал, выходящий далеко за пределы обычной сборки 👍🏼
Чтобы познакомиться с ребятами и получить бесплатные материалы на тему сборки, переходи в бот - /channel/Kobezzzainfo_bot
Рекламодатель: ИП Кобец Д.Д., ИНН 032620506600
ERID 2VtzqucZqms
#заметка дня
Развитие индустрии нейросетей в последние дни напоминает сериал про эпоху дворцовых переворотов, поэтому пришло время посмотреть что-то более близкое к нам.
Технологические компании активно внедряют нейросети в свои сервисы и продукты, только его еще и обучать надо, а за этим стоят огромные расходы и дополнительный персонал. Такова цена пальмы первенства в этой сфере.
В сериале Яндекса YaC 2023 рассказали, о создании профессии AI-тренера и взяли в штат уже 300 сотрудников с междисциплинарными скиллами в разных областях для обучения своей YandexGPT.
Сейчас модель может тезисно представить информацию из видеоролика, пересказать статью и дать общую оценку по товару или услуге на Маркете через анализ отзывов.
Звучит неплохо, настрой прямо-таки боевой, вероятно, в будущем увидим YandexGPT и в других сервисах.
С 23 по 28 ноября пройдёт леденящий душу марафон о самом устрашающем языке программирования — JavaScript. Марафон отлично подойдёт для всех, кто давно хотел научиться новому, но боялся начать.
На 6 дней вы получите бесплатный доступ к тренажерам и полезным материалам HTML Academy.
Выполняйте задания, знакомьтесь с JavaScript и побеждайте все страшные баги на своём пути. Ну или просто знакомьтесь с JavaScript, так тоже можно. На каждом этапе помощь наставника, а в конце марафона разбор всех вопросов и сложностей в прямом эфире.
Среди участников мы проведем розыгрыш крутых подарков и предоставим скидки на наши лучшие продукты.
Узнать подробнее.
Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880. erid: LjN8K8kre
#баг дня
В чат поступил вопрос: «Как проиграть звук в браузере на iOS?»
И я помню, что там не самое всё тривиальное, но в итоге сводилось к (нынче) стандартному для всех браузеров требованию: «Человек должен провзаимодействовать со страницей». После чего можно запускать звук.
Причём, раньше-то «взаимодействия» было достаточно среагировать событие mousemove и вызвать метод play на audio-элементе, такой себе autoplay для бедных. Но теперь — обязательно нужен click.
Но с iOS и Safari вообще всё же всё не было так просто. Там приходилось для начала прогреть контекст звука — AudioContext.
Ну как господа аудиофилы провода из вешалок прогревают перед запуском любимой пластинки.
Выглядит это счастье как-то так: https://codepen.io/alinaki/pen/vYbREJZ?editors=0010
Здесь пример чуть усложнён, поскольку требуется разблокировать контекст и оставить его свободным, чтобы в любой момент подменить звук на нужный.
Для этого в момент клика на странице стартует пустой mp3-файл (обратите внимание на его размер), а потом просто через таймаут src звукового объекта подменяется на нужный (как в попапах; если кто не в курсе, могу рассказать).
Я честно довольно долго пытался понять, что же не так и почему на моём телефоне пример не работает...
Upd. Как минимум на моем телефоне все работает! iOS 17.0.3 Напишите в комментариях, у кого как, пожалуйста. Точно знаю, что на 17.0 не пашет.
А свелось всё к тому, что в iOS 17 всё сломано. Вот issue на тему: https://bugs.webkit.org/show_bug.cgi?id=261414
Помечено как исправленное, но ещё не доехало до всех устройств.
Теперь о том, как всё же заставить это работать: надо запросить разрешение на использование микрофона, тогда и звуковой контекст разблокируется. Но я ещё не попробовал это сделать.
В общем, Apple как обычно, да. Грустно.
P. S. Нет, примеры Howler.js тоже не работают в данный момент.
P. P. S. Блин, стоило написать пост и всё заработало. Чатом клянусь, вчера не работало!
#ios #sound #safari
#codepen дня
Давно собирался написать игру по Гарри Поттеру, но не знал, как?
Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!
Вот: https://codepen.io/ste-vg/pen/zYerxoR
Я обожаю подобные примеры. Игра буквально укладывается в несколько экранов кода, но красива до безобразия.
Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.
Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)
Я залип, в общем, как в игре, так и в её исходниках.
#webgl #threejs #game
Секретный интенсив для погружения в сферу фронтенд с 0!
Присоединяйся к нашему интенсиву, где собрана максимальная польза и минимум воды. Поверь, что освоить навыки фронтенд-разработчика проще, чем ты думаешь.
Всего за 4 дня ты с нуля сможешь создать свой сервис поздравительных открыток. Интенсив даст тебе чёткое осознание дальнейшего развития в веб-разработке.
Регистрация тут 👉 https://tglink.io/94aa95d99b2c?erid=LjN8K3ebp
Решайся! Переходи по ссылке и присоединяйся к нашей команде!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#заметка дня
Итак, объяснение результатов опроса выше. Поехали.
Пока я думал, как написать, и искал время, в комментариях к опросу уже всё сделали. Аж дважды. И даже обняться успели.
Потому, буквально, цитата:
1) Что такое тип Omit? А вот что:
type Omit<T, K extends string | number | symbol> = { [P in Exclude<keyof T, K>]: T[P]; }
#фишка дня
Кричащий банан 🍌 (да-да) принёс шикарную фишку TypeScript: как типизировать ключ объекта без каста.
Решение: заранее объявите тип переменной перебора как keyof typeof. Всё, вы великолепны.
Пруф на TS Playground.
#typescript #cast
#баг дня
Сегодня Google опрокинул миллионы пользователей расширений Google Sheets.
Для многих станет сюрпризом, но этот рынок огромен: аналитика, SEO, рассылки, бюджет, ведение рекламных кампаний, анализ опросов из Google Forms... всё там.
Только у нашего расширения — под миллион установок, например.
Так вот, когда-то давно в Chrome 83 появилась очередная директива Content-Security Policy (CSP): Trusted Types.
MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
Web.Dev: https://web.dev/articles/trusted-types
Когда она включена, любую загрузку скриптов надо предварительно одобрить. Любое изменение innerHTML и документа вообще — тоже.
Звучит разумно? Давайте дальше.
Практически любой скрипт на свете использует innerHTML, но это полбеды. Если директива неправильно описана, загрузка и исполнение скриптов внутри iframe тоже становится невозможной.
И сегодня в Google Sheets появился заголовок, включающий директиву, а код настройки — нет.
Масштабы ошибки оказались сокрушительными. Полегли все расширения Google Sheets, просто потому что каждое из них использовало какой-нибудь скрипт, загружающийся извне. Повторю, миллионы пользователей потеряли возможность нормально работать.
Ах да, директива учитывается только в Chrome 🤡
Баг-трекер: https://issuetracker.google.com/issues/313466551
Мы достаточно быстро нашли решение и указали на него в трекере, но далеко не все разработчики отреагировали так же быстро, потому ситуация остаётся плачевной.
А решение, собственно, заключается в минимальной настройке директивы.
Это то, что должны были сделать разработчики Google Sheets:
<script>
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: string => string,
createScriptURL: string => string,
createScript: string => string,
});
}
</script>
7 дней бесплатного обучения вёрстке сайтов!
Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью, куратором, где ты:
- Добавишь в портфолио 1 сайт;
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
Забрать бесплатно 7 дней обучения Frontend-разработке
Бонусом мы вышлем тебе в подарок чек-лист чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 6 декабря.
#фишка дня
Сейчас в CSS присутствует 54 разных единицы измерения (units).
Пятьдесят четыре!
А ты до сих пор используешь одни только пиксели aka px.
Так вот, используя единицу измерения lh — line-height — и свойство background-clip можно, например, красиво подсветить нужное число строк в любом тексте.
Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV
Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.
А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/
На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk
Он, кстати, автор диаграммы.
В общем, просыпаемся, котаны. Будущее здесь.
#css #rem #lh #vh #measure
#ссылка дня
«Что происходит когда ты набираешь google.com в адресной строке браузера и жмёшь ввод?»
Да, котаны, вы угадали: это довольно популярный вопрос на собеседованиях.
Если у тебя его не спрашивали, значит, предполагается, что ты знаешь ответ.
И да, ответ очень многослойный и зависит не только от позиции, на которую собеседуешься, но и вообще от уровня задротства. Твоего и интервьювера.
Как же хорошо, что у нас уже есть максимально полное описание происходящего в одном репозитории.
Максимально полный без открытия книги по архитектуре ПК, я имею в виду.
Вот: https://github.com/alex/what-happens-when
Официального перевода на русский нет, но есть PR: https://github.com/alex/what-happens-when/pull/1462/files
Как вы думаете, котаны, имеет ли смысл в 2023 году вообще такое спрашивать? Должен ли условный фронт это понимать?
#web #interview
#шок дня
Мы уже видели предложение работы в консоли браузера. Баннеры вида
<script>
alert("We're hiring");
</script>
#codepen дня
Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу
Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!
Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂
Предыдущий пост был вот: /channel/htmlshit/1867
Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.
Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100
Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.
В общем, вдохновлять людей — приятно. Рекомендую!
P. S. Кто на айфоне починит?
#css #goo #filter #svg #бородач
#статья дня
CSS Grid... с чего бы начать. Наверное с того, что это безумно просто и безумно сложно одновременно.
Кто-то пришёл в вёрстку когда гриды уже вовсю были в ходу, для кого-то гриды до сих пор означают flex-колонки из Bootstrap aka grid system и ничего другого знать не хочет. Или не может.
Я уже молчу о том, сколько изменений стандарта они пережили...
Потому я постоянно слежу за новыми обучающими инструментами и статьями и приношу их вам. И сегодня — очередной бриллиант от Джоша Камю.
Встречайте интерактивное руководство по CSS Grid: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
И когда я говорю интерактивное в контексте — это буквально означает что вам не просто примеры кода дадут, а кучу ползунков, чекбоксов и живой вёрстки.
С красивыми иллюстрациями, конечно же.
В общем, бросайте все дела и бегом читать. Нашему чату нужен новый властелин гридов. Старый теперь по скриншотам гадает...
#css #grid #tool
#codepen дня
Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.
Переливающийся всеми цветами радуги светящийся текст!
Вот: https://codepen.io/thebabydino/pen/rNPOpJK
Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.
Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.
#css #svg #filter
#фишка дня
Да-да, на дворе 2023 год и JavaScript в браузерах включён по-умолчанию.
Вот только байки про параноиков в вязаных и не очень свитерах — вовсе и не байки. Зайдите на LOR.
Потому нормальной для многих практикой было и остаётся добавление класса no-js на body и его удаление во время исполнения скриптов.
Тем более странно, что указаный на картинке медиазапрос @media (scripting: enabled) появился только сейчас.
Поддерживается в Chrome 120+, Firefox 117+ и Safari 17+.
Маловато, конечно, но пусть будет.
#css #js #media #paranoid
Erid:2Vtzqv45E96
Это Маша Палагина и Стас Буткеев — ведущие самого трушного* подкаста о тестировании и качестве «QAk-QAk — и в продакшен».
В этом выпуске они обсуждали, что такое доступность (accessibility), как ее тестировать и какие функции должны быть в удобном и инклюзивном приложении.
И это только один выпуск из трех сезонов. Ребята записали целую аудиобиблиотеку для QA-инженеров, с помощью которой можно прокачать хард-скиллы.
Подкаст есть на всех стриминговых платформах.
P. S. А еще у QA-команды Тинькофф есть телеграм-канал с кейсами, задачи и инструментами — подписывайтесь, чтобы не пропустить новые посты.
* по версии ведущих Маши Палагиной и Стаса Буткеева
#шок дня
TL;DR: Идем на https://makereal.tldraw.com/, вставляем ключ GPT4, рисуем интерфейс с описанием и нажимаем кнопку Make Real.
Я не то чтобы старательно, но избегал темы ИИ в контексте кодогенерации. Хотя, естественно, использовал и использую для генерации конфигов, тестов, типов. Пару раз пробовал для создания и обработки структур данных.
Просто как-то скучно всё выглядело.
Но тут уже два дня интернет разрывает от работы Стива Руиза, автора офигенной совместной рисовалки диаграмм tldraw: https://tldraw.com/
И называется она Make Real: https://tldraw.substack.com/p/make-real-the-story-so-far?r=1vezzj
Если у вас есть ключ OpenAI GPT4 — вот ссылка на демо: https://makereal.tldraw.com/
Рисуем интерфейс и, например, схему состояний конечного автомата (state machine, проще говоря, схему состояний приложения и его реакцию на внешние действия). Дополняем описанием, группируем и нажимаем кнопку Make Real.
И у вас есть готовое приложение. Не нравится? Выделили результат, описали снова и снова нажали. И так пока не получится.
Это выглядит как волшебство. Работает на GPT-4V aka Vision Model. Особый кайф придает стиль взаимодействия с нейросетью — через холст. В три миллиона раз более наглядно, чем чат или любой конструктор. Повторю: результат работы возвращается на холст в виде рабочего приложения и превращается в часть диаграммы. Это пушка.
Если ключа нет — очень рекомендую хотя бы прочитать статью выше и посмотреть примеры.
Лень и это? Ну хотя бы на твиттер тогда зайдите: https://twitter.com/tldraw, примеров уже десятки!
Это потрясающее путешествие. Прототипы выйдут на новый уровень. Ждём подобное в Figma? :)
#ai #tldraw #future #prototype