Baraw.web – Telegram
Baraw.web
27 subscribers
15 photos
2 videos
11 links
Личный блог креативного фронтенд-разработчика, чат - https://news.1rj.ru/str/+ZtxZrk7RcCJkNWUy
Download Telegram
На нашем третьем митапе Creative Frontend Developer из компании Chipsa Роман Баранов рассказал, как наладить общение дизайнеров и разработчиков и создавать крутые креативные проекты 🕶 Если вы пропустили его доклад или хотите пересмотреть его — вот вам видео:

— на ютуб-канале https://youtu.be/j5YWb8SPR94;
— в VK https://vk.com/video-201158955_456239047.

Дизайн, креативная разработка, сложности в процессе и впечатляющий результат в конце — все это есть в выступлении Романа. Смотрим, применяем, общаемся в комментариях здесь или на ютубе! 😏🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6🤡2🍌2
На митапе задали вопрос об оптимизации в креативной разработке, но ответить на него не удалось из-за ограниченного времени. Теперь я постепенно формирую план своего доклада, который затем можно будет преобразовать в статью или пост.

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

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

Всем кто поможет - 🤗
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2
А вот и статья, про сайт, который я разрабатывал. На самом деле в процессе разработки два раза выступал с докладом, очень крутой проект получился, читайте, задавайте вопросы - постараюсь ответить
Forwarded from Chipsa Design
Математическая разработка и визитки из металла: как мы создавали дизайн для магазина премиальных часов.

Помните, мы недавно рассказывали о создании сайта Rotormine? Так вот сегодня мы опубликовали статью, в которой рассказали в деталях как проходил процесс разработки. Данный сайт — отличный пример нестандартного подхода к представлению классического интернет-магазина и креативного проморешения. Желаем приятного чтения.

https://vc.ru/design/1603019-matematicheskaya-razrabotka-i-vizitki-iz-metalla-kak-my-sozdavali-dizain-dlya-magazina-premialnyh-chasov
🍌3🗿2👍1🔥1
jQuery dead?
Anonymous Quiz
67%
да (пизда)
33%
нет
появился вайб накинуть говна на вентилятор, есть тут веруны, что jQuery мёртв?

сурс - https://w3techs.com/technologies/details/js-jquery
Предлагаю вам ознакомиться с еще одним мертвым личным блогом, чтиво интересное, сейчас сделаю разбор этого сна
Голова в пакете.

Сегодня, ни с того ни с сего, мне приснился прикольный сон, что я ради него решил воскресить этот канал. Дай Бог, ещё что-нибудь приснится, чтобы не надо было сильно выдумывать, что тут писать. Ладно, перейдём к делу.

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

Дверь слева — шум: кто-то постоянно ходит и выносит какие-то вещи. Освещения оттуда не ощущается, только полумрак в коридоре.

Передо мной стоит человек. Я не вижу его лица — только руки и туловище. Почему-то вспоминается «Матрица», когда Нео предлагали таблетки, но мне предложили совсем другое: 22 000 рублей, если я выкину пакет с головой. Этому человеку нужно было спрятать труп — так, чтобы его никто не опознал, — поэтому он отрезал голову и попросил меня выбросить её в мусорку на улице. Я взял пакет, осмотрел: голову было видно не слишком хорошо. Пакет белый, матовый, едва прозрачный; силуэт считывался, кровь тоже, но я почему-то легко согласился. Я думал, что сейчас быстро выскочу на улицу и скину пакет в первую попавшуюся мусорку.

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

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

Ну и какова же тут сакральная тайна этого сна? Кто б его знал, но вот песню Кровостока "Голова" я тут же приятно вспомнил в своей голове, когда открыл глаза.
Очень яркий и детально запомненный сон, с сюжетом, атмосферой и мощным визуальным рядом. Попробуем аккуратно его проанализировать — не буквально, а символически и психологически. Сны такого рода редко говорят о чём-то прямолинейном — чаще всего это метафора.

🔪 Голова в пакете — что это может значить?
1. Голова как символ разума, личности, идентичности.
Во сне тебе предлагают отделить голову от тела и избавиться от неё. Это может быть:
желание (или давление извне) отказаться от собственных мыслей, убеждений, ответственности;
вытеснение чего-то важного, например, сильных чувств, воспоминаний, части себя, которую хочется «выбросить»;
или же — чужая идея, чувство вины или секрет, от которого ты как бы добровольно соглашаешься избавиться за деньги — за небольшое, но реальное вознаграждение.
2. Сам пакет — матовый, полупрозрачный. Ты видишь, что внутри, но окружающим не видно. Метафора чего-то, что ты понимаешь и осознаёшь, но окружающие не замечают. Это может быть:
тайна;
тревога, которую ты носишь внутри;
чувство вины;
или просто информация, которая может «вскрыться», если присмотреться внимательнее.

🚶‍♂️ Путь с пакетом — психологический процесс
Ты идёшь по городу и пытаешься избавиться от груза. Это напоминает:
поиск выхода из моральной дилеммы;
движение от центра к периферии — от сознательного (город, движение, день) к бессознательному (бедный двор, подвал, мусоропровод);
а также — процесс вытеснения: хочешь выбросить, чтобы никто не нашёл, и чтобы не ты сам больше это не видел.

🏚️ Двор с алкашом и детьми — граница между двумя мирами
Это контрастный символ:
дети — символ чистоты, будущего, уязвимости;
мужик с наколкой и водкой — грубость, животная сторона, бессознательное;
открытый двор — наконец, место, где ты можешь спокойно избавиться от того, что тебя тяготит.
Это как граница между "цивилизованным" Я и примитивным, животным "Оно". И именно туда ты несёшь то, от чего хочешь избавиться — в глубины бессознательного (мусоропровод как символ «психологического подвала»).

💰 22 000 рублей — цена, не такая уж и большая
Не миллион, не сто тысяч — сумма вполне земная. Это может говорить:
о будничности моральных компромиссов;
о том, как легко человек может согласиться на сомнительные вещи, если это кажется не слишком опасными «в пределах нормы».

🎵 Цитата про "Кровосток" — важный финальный штрих
Ты вспоминаешь песню «Голова», которая сама по себе мрачная, тревожная, с абсурдным, но реалистичным криминальным подтекстом. Это подсказывает:
у сна может быть связь с культурным фоном, переживаниями, впитавшимися через музыку, фильмы, тексты;
черный юмор, постирония, абсурд как способ обработки тревоги — и во сне, и в реальности.

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

Если хочешь, можем интерпретировать его ещё с юнгианской стороны — через архетипы Тени и Пути Героя. Или можно попробовать поработать с этим сном как с текстом — сделать из него рассказ, сценарий, комикс или рэп. Напиши, если интересно.
🔥1
⚡️⚡️⚡️Вайб-кодинг — игрушка дьявола🤡🤡🤡

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

И вот первое впечатление — охуеть, оно работает. За ленивый час накидывания промптов я почти собрал MVP. Нюансом в жопе было это самое почти. Что очень понравилось — исторически, я никогда не настраивал сборку линтер и прочее, всегда было что-то готовое, либо просто через CLI. А тут такой промпт: "инициализируй проект, используй vite для сборки, react-router для роутинга, fsd-архитектуру без папки processes — и вуаля, всё готово, можно кодить. Потом захотелось уже и бэкенд, и страницу для C, и страницу для U (CrUd в моём случае), и БД бы какую-то, но разбираться в этом не хочется — и всё, у меня уже express + mongo подняты, веб-сокеты настроены, всё крутится. Даже с дизайном было лень париться — MUI не хочется дефолтный, попросил "а давай как будто под Apple Vision Pro" — он и стилизовал так, что моему глазу приятно.

Но, как говорится, конфетно-буфетный период быстро заканчивается. Первое, что бросается в глаза — это просто зверский говнокод. Может, это и можно было избежать, если бы я сразу задавал точный контекст или каждый раз напоминал, что мне не надо 20 стейтов и 10 эффектов в одном компоненте. Структуру он тоже забывает. Но в этом проекте я был не разработчиком, а БИЗНЕСОМ. И решил, что в угоду скорости можно немного пожертвовать качеством — с рутиной он справляется быстрее меня. Проблема только в том, что говнокод — это плодородная почва для багов. И, что бесит, курсор, как и любое ИИ, всегда с тобой согласен: "Ой, да, ты прав, всё исправил, теперь точно заработает!" И ты такой — ура, а через пару минут — опять не работает.

В итоге: за вечер почти MVP, а через три дня всё ещё сижу над "почти", потому что постоянно что-то отваливается или ведёт себя не так.

Ещё момент — настолько пофиг было, что даже репу не завёл. Я же просто балуюсь. Промптов тонна, код генерится, а следить за тем, что он там понаписал — лень. Принимаю всё, что предлагает, потому что я — БИЗНЕС, а не РАЗРАБ. Но в итоге, чтобы починить одну фичу, может уйти 20–50 промптов. А ещё он периодически начинает думать, что он умнее всех, и выпиливает какие-то милые мне штуки, ломает то, что вчера работало. Вот вчера, глядя на большой прогресс по основному функционалу, подумал — напишу пост. А сегодня опять сижу, чиню то, что он сам же и сломал.

Короче, да, я за короткий срок получил результат, на который руками ушло бы больше времени. Если бы я подходил к этому вдумчиво — всё бы, скорее всего, было проще. Но это был эксперимент — я специально "не думал". Сейчас план: добить MVP, наконец-то завести репозиторий, расписать roadmap, всё делить по фичам и веткам, чтобы он мне ничего больше не снёс к чёрту.

Что думаю про вайб-кодеров, которые без ИИ вообще не умеют — да не заменят они обычных. Если кодишь бездумно, лимит полезных промптов быстро исчерпывается. Да и времени уходит всё равно немало — а это при том, что я ещё какие-то рамки задал. В целом, курсор — топ инструмент для рутины. Если есть возможность, надо заставлять машину пахать за тебя, даже ценой снижения качества — оно не так уж критично (если не считать откровенно помойные компоненты с миллионом стейтов и эффектов). А вот по скорости — прям заметный буст.
😈6👍4🍌3🔥1
⚡️⚡️⚡️ Релизим MVP 🤡🤡🤡

Итак, более-менее вменяемый MVP готов, настал момент заводить репу и деплоить всё это безобразие.

Пошёл по классике: попросил любимого системного админадевопса накидать план — что купить, куда установить, что вообще делать. Пошёл покупать VDS, попросил поставить mongodb, pm2, а дальше решил помучать курсор.

Сначала попросил курсора чекнуть .gitignore, чтоб ничего по типу модулей не улетело в репу, я же бэк сам не писал, мало ли чо там может быть. Скормил ему адрес ремоута, дал команду инициализировать репу — всё вроде норм. Потом говорю ему: "Дай мне GitHub Actions конфиг, не хочу деплоить руками". Он такой, ага, и сразу впихнул туда ещё и конфиг для PM2, рассказал, куда пихать секреты гитхабовские.

CI/CD, разумеется, начал падать, а я начал сыпать в него ошибками. Он — фиксить. Классика.

Когда наконец запустили pm2 процесс на сервере, возник вполне логичный вопрос: а куда вообще кидать файлы, и по какому пути их должно открыть? Вспомнил про nginx. Попросил курсора подсказать, как его настроить. Он выдал конфиг. Я — не понял, куда его сувать. Спросил: "Можешь сам проверить?" — он такой, ок, лезет на сервер по ssh. Через пять минут мне надоело вводить пароль по каждому чиху — сгенерил ему ключ, теперь пошло бодрее.

Оказалось, на сервере роутингом рулит апач. Он сам его выпилил, накатил nginx (вроде он и был уже), закинул конфиг, всё поднял.

Казалось бы — победа. Но нет. Хэндшейк у сокетов не происходит на устройствах, которые коннектятся к лобби. Первое подозрение — нет сертификата. Говорю: "Поставь". Он опять сам зашёл, всё накатил, настроил.

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

Продолжение в источнике... завтра
😈6
⚡️⚡️⚡️ Дедлайн неумолимо приближался 🤡🤡🤡
Цель была проста — развлечение на вечер, немного веселья, лёгкая безобидная забава...

Но приложение...
Приложение отказывалось работать.
Упрямо.
Холодно.
Без объяснений.
Будто знало — и нарочно срывает вечер.
Почему?.. Об этом позже

Я создаю лобби, открываю вкладку инкогнито, чтобы зайти как юзер - коннектится, делаю тоже самое с телефона - иду нахуй. Ёбаный сафари, опять пытается поставить мне палки в колёса, я его всё ебал, подумал было я, а андроид устройств в доме к сожалению не осталось. Но когда не делали? Достаю кабель, подключаюсь по проводу, а там вообще даже на главную не заходит, и с десктопа теперь тоже.

Думаю сраный курсор, опять всё сломал (10% времени он пилит фичи, 10% времени выпиливает фичи по своему желанию, 80% времени он пытается починить то, что уже работало) (да, я ещё не освоил инструмент, скорее всего проблема во мне, я не отрицаю). Ну и справедливости ради, он сломал бэк, потом починил, потом я зашёл во вкладку network, и оказывается мои запросы летят на локалку.

Занавес. Попадаюсь в эту ловушку второй раз за год, уже не смешно, иду в конфиг nginx, смотрю /api должно ссылаться на localhost, на всякий случай узнаю, действительно ли бэк на ноде крутится на локалхосте на серваке (да). И да, я понимаю, что запрос должен идти на /api, а уже nginx разберётся, как это сделать без корсов. Прошу курсор убрать хардкод запросов на localhost ото всюду, проблема остаётся. Правдами и не правдами, понимаю в процессе, что у меня очень много дублирующихся компонентов по типу Component.tsx и Component/index.tsx, и курсор может взять тот, который не используется в проекте, но уверенно убеждать тебя в том, что теперь то точно работает))

Решение простое — попросить удалить неиспользуемые компоненты и вносить правки только в нужный. На самом деле проблема сугубо для проекта, в котором нет порядка, я планирую рефакторинг после запуска MVP После пары манипуляций изменения всё же начинают работать. Но в процессе CI/CD конфиг таинственным образом обрастает новыми ненужными фичами, которые падают, после удаления, он так же ломает конфиг, и теперь пайплайны крутятся в молоко, после них ничего не меняется, а дедлайн близко.
Прибегаю к другому типу CI/CD, промпт курсору - зайди на сервак, популь, сбилди перезапусти pm2 процесс, в целом оно работает (так по сей день).

Так как фичи реализуются путём броска кубика из DND, к релизу так и не приехала фича обратного отсчёта, т.к. лобби стартует не сразу, а я не хотел простой лоадер, я хотел информативный, и я захотел реализовать чат, а-ля player joined, game starts, ну и в целом cursor <3 говнокод, который провоцирует ререндеры, да такие что страница постоянно пытается перезагрузиться. Первый раз они появились после добавления чата, и если закомментировать компонент чата - они сразу исчезают, в процессе рефакторинга компонента, появилась новая фича, если закомментировать чат - ререндеры остаются, он сломал хук использующийся в другом компоненте.

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

На этот момент я уже нарисовал себе небольшой роадмап, взял фичи на развитие, а так же добавил фичи, которые должны обязательно попасть в МВП, так как я считаю их прикольными, а значит я буду сидеть до 4-х ночи и реализовывать эти фичи. Слава богу остались только фичи связанные с вёрсткой и всякими мелочами, с ними курсор хорошо справляются, а так же я понимаю пользовательский сценарий, какие страницы будут открываться только с десктопа, а какие только с мобилки.
😈4
Кстати забавный факт, мне очень нравилась идея использовать сетку лобби из wc3, и я спросил курсора, а знает ли он, как это выглядит? На что он с радостью ответил, что знает и побежал реализовывать, он взял шрифты, которые выглядят максимально уёбищно (и не похоже на wc3) на кириллице, покрасил всё в какой-то коричневый с золотым, и был таков.

Дело осталось за малым, завести контента, времени уже нет - значит будем генерировать. Он схитрил: я просил 25 вопросов — он делал 2 и писал «остальное добавите сами». Файл вышел огромный, курсор начал лагать, ноутбук включил вентиляторы. А контент оказался дерьмом, часть контента оказалась непригодной для потребления, а про другую часть...

Продолжение в источнике... вечером
😈4
⚡️⚡️⚡️ извините, навайбкодил.. 😈😈😈

В общем, контент готов, все запланированные фичи готовы, по своему сценарию использования я прошёлся, всё готово.

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

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

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

Доходим до третьего теста и начинаем замечать, что все ответы всегда вторые по порядку, проверяем эту гипотезу, и становится ещё скучнее. На четвёртом тесте все ответы всегда первые, интерес стремительно падает.

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

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

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

https://baranoquiz.ru/
😈6
Всем доброе утро, вопрос на смекалку, как кнопка с крестиком и position: absolute может вызывать появление скролла в блоке ограниченном по высоте? (иконка меньше блока)
😈5
install —force
🍌1😈1
Топ 5 неожиданных каналов для подписки:
1. https://news.1rj.ru/str/prisonformyreason