Канал о том, как эффективно работать в IT: простые объяснения технических вещей, лайфхаки, лучшие практики и полезные инструменты для повседневных задач.
Автор: @Shevtsoff
Post #422
1.06K
☕️ 5 Технологий для вайбкодинга
Поймал себя на мысли, что большая часть канала - это посты, где простыми словами нетехнарям рассказываются технические вещи. Получается такой своего рода альманах вайбкодера))
Что ж, продолжим эту серию постов на тему «что нужно знать, чтобы вайбкодить».
Сегодня про самый практичный выбор — набор инструментов, в котором модели уверенно пишут код, а вы — уверенно его читаете.
Идея простая: чем популярнее технология, тем больше качественного кода по ней лежит в интернете, тем лучше модель её выучила. И наоборот — как только уходите в экзотику, начинаются выдумки про несуществующие возможности, устаревший синтаксис и «так было в старой версии».
Вот лучший рабочий набор: Next.js, TypeScript, Tailwind, Prisma и Postgres. Пятёрка, которая закрывает весь проект — и то, что видит пользователь в браузере, и серверную часть с базой данных.
Коротко:
— Next.js — фреймворк для веб-приложений. В одном проекте уживаются страницы, которые рендерятся в браузере, и серверная логика, которая отвечает на запросы. Модели знают его наизусть, включая свежие версии с серверными компонентами
— TypeScript — это JavaScript с системой типов. Вы заранее описываете, какие данные где используются, и если модель придумала несуществующее поле или передала число вместо строки — компилятор ругается ещё до запуска. Буквально страховка от выдумок нейросети
— Tailwind — css-библиотека готовых классов для оформления. Вместо отдельных файлов стилей вы пишете прямо в разметке: bg-slate-900, text-center, px-4. Модель такие конструкции составляет стабильно и не воюет с каскадами CSS
— Prisma — это ORM (Object-Relational Mapping, ORM), посредник между кодом и базой данных. Вы описываете таблицы и связи в одном файле schema.prisma, а Prisma генерирует типизированные методы для запросов. Модели работают с ней увереннее, чем с сырым SQL — структура даёт им опору
— Postgres — реляционная база данных с открытым кодом, дефолт индустрии. Поднимается за пару минут на Neon или Supabase, там же бесплатный тариф и готовая строка подключения
Чего избегать, если хочется жизни без мучений:
— Редкие фреймворки и свежие беты — модель либо их не знает, либо путает версии API
— Самописный CSS без дизайн-системы — модель будет ломать отступы в каждом втором изменении
— Нереляционные базы (MongoDB и такие) просто потому что «схема гибче». Если у вас данные со связями — пользователи, их заказы, позиции в заказе — берите Postgres, не плодите сущности
— Внутренние инструменты и «удобные обёртки» своей команды — для модели это чёрный ящик, она будет гадать и выдумывать API
С чего начать (попросите агента сделать всё за вас😉):
— Поставьте Node.js — это среда, в которой всё запускается. Создайте проект одной командой: npx create-next-app@latest с флагами TypeScript и Tailwind
— Заведите Postgres на Neon или Supabase — бесплатный тариф, строка подключения готова через минуту
— Подключите Prisma, опишите модели в schema.prisma, запустите миграцию — таблицы создадутся сами
— Выложите проект в интернет через Vercel: подключаете GitHub, пушите в main, обновление на сайте едет само
Листайте карточки — там всё то же самое, только коротко и по полочкам.
#vibecoding #dev #tips
Поймал себя на мысли, что большая часть канала - это посты, где простыми словами нетехнарям рассказываются технические вещи. Получается такой своего рода альманах вайбкодера))
Что ж, продолжим эту серию постов на тему «что нужно знать, чтобы вайбкодить».
Сегодня про самый практичный выбор — набор инструментов, в котором модели уверенно пишут код, а вы — уверенно его читаете.
Идея простая: чем популярнее технология, тем больше качественного кода по ней лежит в интернете, тем лучше модель её выучила. И наоборот — как только уходите в экзотику, начинаются выдумки про несуществующие возможности, устаревший синтаксис и «так было в старой версии».
Вот лучший рабочий набор: Next.js, TypeScript, Tailwind, Prisma и Postgres. Пятёрка, которая закрывает весь проект — и то, что видит пользователь в браузере, и серверную часть с базой данных.
Коротко:
— Next.js — фреймворк для веб-приложений. В одном проекте уживаются страницы, которые рендерятся в браузере, и серверная логика, которая отвечает на запросы. Модели знают его наизусть, включая свежие версии с серверными компонентами
— TypeScript — это JavaScript с системой типов. Вы заранее описываете, какие данные где используются, и если модель придумала несуществующее поле или передала число вместо строки — компилятор ругается ещё до запуска. Буквально страховка от выдумок нейросети
— Tailwind — css-библиотека готовых классов для оформления. Вместо отдельных файлов стилей вы пишете прямо в разметке: bg-slate-900, text-center, px-4. Модель такие конструкции составляет стабильно и не воюет с каскадами CSS
— Prisma — это ORM (Object-Relational Mapping, ORM), посредник между кодом и базой данных. Вы описываете таблицы и связи в одном файле schema.prisma, а Prisma генерирует типизированные методы для запросов. Модели работают с ней увереннее, чем с сырым SQL — структура даёт им опору
— Postgres — реляционная база данных с открытым кодом, дефолт индустрии. Поднимается за пару минут на Neon или Supabase, там же бесплатный тариф и готовая строка подключения
Чего избегать, если хочется жизни без мучений:
— Редкие фреймворки и свежие беты — модель либо их не знает, либо путает версии API
— Самописный CSS без дизайн-системы — модель будет ломать отступы в каждом втором изменении
— Нереляционные базы (MongoDB и такие) просто потому что «схема гибче». Если у вас данные со связями — пользователи, их заказы, позиции в заказе — берите Postgres, не плодите сущности
— Внутренние инструменты и «удобные обёртки» своей команды — для модели это чёрный ящик, она будет гадать и выдумывать API
С чего начать (попросите агента сделать всё за вас😉):
— Поставьте Node.js — это среда, в которой всё запускается. Создайте проект одной командой: npx create-next-app@latest с флагами TypeScript и Tailwind
— Заведите Postgres на Neon или Supabase — бесплатный тариф, строка подключения готова через минуту
— Подключите Prisma, опишите модели в schema.prisma, запустите миграцию — таблицы создадутся сами
— Выложите проект в интернет через Vercel: подключаете GitHub, пушите в main, обновление на сайте едет само
Листайте карточки — там всё то же самое, только коротко и по полочкам.
#vibecoding #dev #tips
- ❤ 15
- 🔥 6
- 👍 3
