Всем снова ку! Сегодня хотел бы рассказать вам, как я вообще заинтересовался веб-разработкой, что и как учил, с какими трудностями столкнулся на своём пути и что получилось в итоге.
Предыстория
Не знаю, знаете вы или нет, но меня всегда притягивала сеть. Интернет казался мне чем-то мистическим, необузданным, местом, где хранится всё и вся — настоящим кладезем знаний человечества. В общем, что-то вроде ощущения "Сети" как в "Экспериментах Лэйн" — не таким уж абстрактным и метафорическим, но всё же с налётом загадочности. По крайней мере в моём воображении он выглядел именно так. Жаль, что в реальности — это просто кабели, проложенные по дну океана, соединяющие сервера между собой. Но давайте представим, что это магия ಥ‿ಥ
Интернет мне всегда нравился своей "местечковостью" и возможностью найти всё, что угодно и когда угодно. Но ещё больше — возможностью просто поржать с мемчиков. Поэтому одно из моих уже реализованных желаний — сделать что-то в сети. Неважно, насколько хорошо или плохо, главное — чтобы оно было. Чтобы жгло электричество в дата-центрах (•̀ᴗ•́)
Первый сайт (или как делать не стоит)
Как вы понимаете (или как многие знают), я никогда в жизни не занимался веб-программированием. Я же вроде как ML-инженер — при чём тут сайты? Поэтому идея сделать свой сайт лежала где-то глубоко в подкорке. Связь с вебом ограничивалась Gradio и Streamlit.
Но тут в универе начались курсы по программированию — и с этого всё и поехало.
Самый самый первый
Первый сайт — обычная лаба по вебу. На Django, с примитивным дизайном и минимальным функционалом — нужно было сделать простой блог. Меня, кстати, уже тогда эта идея вдохновила, и я захотел сделать свой настоящий блог (о нём позже). Сайт был примитивен во всём — от базы данных до CSS. Но он работал. Потому что всё делалось по инструкции. Сейчас он уже мёртв — Anaconda не особо любит держать у себя подобное. Ну вы поняли.
В общем, не ахти, но для первого раза, когда я вообще впервые трогал HTML и CSS, я думаю, более чем хорошо. Или нет, решайте сами ʕ•ᴥ•ʔ
Первый (на вайбе)
Опыт был получен. И быстро забыт. Сказать, что что-то красивое получалось — нет. А времени это всё жрало нормально. Думаю, я бы бросил, если бы не новая идея — сделать сайт с расписанием универа. Потому что кроме PDF-ки с расписанием ничего не было. А хотелось — скинуть ссылку, открыть с телефона, чтобы всё работало. Ну, как в Томске, например.
Плюс, выяснилось, что можно закрыть практику этим проектом — и мотивация взлетела.
Проект я делал почти полностью на вайбкоде — просто «на ощупь». Где-то 98% генерации делал Claude Sonnet 3.5, остальное правил вручную, но по большей частью я был мартышкой ожидающей стимуляции в виде работающей фичи.
Скажу сразу, способ который я не порекомендую никому, Спустя, как правило, тысячу строчек кода, контекст нейронки переполнится, и она уже сама не будет понимать, что в вашем коде происходит, а вы и подавно, уже не говорю, что таким способом вы ничему не научитесь в жизни 😊
В какой-то момент мне приходилось делать десятки генераций чтобы реализовать даже какую-то максимально мелкую и легкую фичу, а что происходило на стадии дебагинга, я лучше промолчу. Но в итоге всё заработало (чудом).
Он до сих пор живёт на GitHub Pages: unitime
Планировал прикрутить OCR, чтобы парсить PDF-ки с расписанием. Но потом понял, что уже и не надо. Я сделал, что хотел — и на этом забил. И правильно сделал. Не нужно поддерживать нейропомои, если можно сесть и сделать нормально.
Самый первый (нормальный)
Вот тут я почувствовал, что оно — настоящее. Мои мысли реально материализовались. Вау. Но после того, как я через пару деньков по новой более трезво (после эйфории что это вообще работает) взглянул на этот сайт с расписанием, я понял одну вещь. Не, в ближайшем будущее все-таки не заменят ಠ‿ಠ
Так у меня всплыла в голове старая мечта — сделать сайт, за который не стыдно, и самое главное сделать самому.
Я начал целенаправленно учить React. Параллельно — Next.js. Я всегда знал, что он существует, но никогда не трогал. И зря. Потому что Next — это лучшее, что случалось с вебом. Невероятно удобный фреймворк с топовой документацией. Всё разжёвано до мелочей.
Свой сайт я решил делать в минимализме. Потому что минимализм — это круто. И меньше компонентов — меньше боли вёрстки.
Технически всё получилось хорошо. Проблем почти не было. За исключением пары моментов:
- Не умел разбивать компоненты. На каждую страницу — отдельный компонент. Хотя многие можно было объединить. Сейчас всё переписал по уму — читаемо, производительно. Но тогда было больно. Просто усложнил себе жизнь.
- Сложно подключать библиотеки, когда в проекте бардак. Хотел сделать звёзды на заднем фоне приветсвенной страницы. Сначала сделал их ASCII-символами. Потом один друг сказал, что это "слишком минималистично", да и самому хотелось сделать сайт более интерактивным, поэтому было решено подключать библиотеку — React Bits. И всё сломалось. Потому что проект был плохо структурирован. Если бы с самого начала нормально всё разложил — просто бы импортнул компонент и забыл. По итогу через костыли я заставил это добро работать, но какой ценой (на деле никакой).
Но я справился. И сайт получился именно таким, каким я его видел в голове. Это было офигенное чувство. Когда мысли обретают форму — это даёт дофамин и силу двигаться дальше.
👉 Мой сайт — ivan.space
Он — как частичка меня. Немного о моём внутреннем мире. По крайней мере, мне так кажется ฅ^•ﻌ•^ฅ
Итоги
Думал, уложусь в один пост, но нет. Поэтому кратко:
Веб программирование всё ещё выглядит как магия. Но магия, доступная каждому.
Сейчас собрать сайт — как собрать LEGO. Ты сам придумываешь инструкцию. Меняешь детали на ходу. Всё в твоих руках.
Я искренне считаю, что каждый должен попробовать веб. Особенно те, кто хоть как-то связан с IT. Это даёт понимание, что творится «на кухне», и развивает навык собирать рабочие продукты (изначально правильно), да и такой навык точно лишним не будет.
-
Начните с базы — и сразу в практику. Выучите теги, CSS, хуки, компоненты — базу. Это можно сделать за день. А дальше — просто делайте. Когда появится проблема — гуглите или читайте доки.
-
Нейросеть — это не фрилансер. Не скидывайте всё ей. Понимайте, что она пишет. Иначе вы запутаетесь в проекте и останетесь без понимания, что где и как работает. Помните, после вайб-кодинга, всегда идет вайб-дебагинг 🌚
-
Чтение чужого кода > написание своего. Когда мне понадобилось реализовать наложение компонентов, я полез в исходники React Bits. В итоге нашёл кучу полезных решений и библиотек (в том числе Tailwind CSS). Чтение чужого, особенно хорошего кода — мощнейший источник обучения.
Я думаю вы и так об этом были в курсе и без меня, но это кажется очевидным пока не начинаешь делать сам, ибо в какой-то момент, ловишь себя на мысли, что упускаешь, что-то важное, и при этом очевидное.
На этом пока всё. В следующем посте расскажу про технические детали и как я пришёл к созданию блога — как финального этапа моего пути.
По большей части этот пост существует ради того чтобы замотивировать тебя, да именно ТЕБЯ пойти и начать учить веб. Ибо это не только полезно, но еще и весело.
А пока — найдите время, разберитесь с вебом. Сделайте что-то своё. Я уверен, вы об этом не пожалеете.
(Ну а я пока пойду попью чай. Устал всё это печатать (´ж｀ς) )