REST — архитектурный стиль взаимодействия компонентов распределённого приложения в сети. Другими словами, REST — это набор правил того, как программисту организовать написание кода серверного приложения, чтобы все системы легко обменивались данными и приложение можно было масштабировать.
Куда двигаться в веб-разработке и не только
Вчера мы публиковали подборку лучших курсов по HTML и CSS — возможно, вы уже выбираете подходящий вариант для старта. Но что делать после освоения базовой верстки? Куда двигаться, чтобы продолжать развиваться в IT?
Если вы уже уверенно верстаете страницы, но не знаете, какой навык осваивать следующим — этот материал для вас. Мы разберем основные направления развития после HTML/CSS и поможем выбрать подходящий путь.
1. Углубляемся в фронтенд: JavaScript и фреймворки
HTML и CSS — это база, но без JavaScript (JS) сайты остаются статичными. JS добавляет интерактивность: анимации, формы, динамическую загрузку данных.
Что учить?
Основы JavaScript: синтаксис, DOM-манипуляции, асинхронность (Promise, async/await).
Фреймворки и библиотеки: React.js (самый популярный, востребован в вакансиях), Vue.js (проще для новичков), Angular (используют в корпорациях).
Дополнительные инструменты: TypeScript (типизированный JS), Next.js/Gatsby (для SSR и статических сайтов).
Результат: сможете создавать сложные SPA (Single Page Applications) и претендовать на позицию Junior Frontend-разработчика.
2. Осваиваем бэкенд: серверная часть
Если вам интересно, как работают базы данных, авторизация и API, можно уйти в бэкенд.
Варианты технологий:
Node.js + Express (если хотите остаться в JS-экосистеме);
Python (Django/Flask) — проще синтаксис, много возможностей;
PHP (Laravel) — популярен в вебе;
C# (ASP.NET) / Java (Spring) — корпоративный сектор.
Результат: сможете писать серверную логику и стать Fullstack-разработчиком.
3. Идем в дизайн и UX/UI
Если вам нравится не только верстать, но и продумывать интерфейсы, можно развиваться в дизайн:
Figma/Adobe XD — создание макетов;
Основы UX — юзабилити, исследования;
Анимация интерфейсов (CSS/JS, GSAP, Framer Motion).
Результат: сможете работать UI/UX-дизайнером или фронтендером с уклоном в дизайн.
4. Другие направления: мобильная разработка, тестирование, DevOps
Мобильная разработка: React Native, Flutter, Swift/Kotlin.
Тестирование (QA): ручное и автоматическое (Selenium, Cypress).
DevOps: Docker, CI/CD, облачные технологии (AWS, Azure).
Как выбрать направление?
Вместо того чтобы пытаться освоить всt сразу, попробуйте определить, что вам интереснее всего:
Если вам нравится создавать визуальные элементы, работать с анимацией и интерфейсами, то выбирайте фронтенд.
Если вас больше увлекает: логика и работа с данными, создание сложных систем, решение неочевидных задач, то вам может подойти бэкенд-разработка.
Если мечтаете: разрабатывать мобильные приложения, работать с современными кроссплатформенными технологиями, то вас может заинтересовать мобильная разработка.
Главное — не останавливаться! После HTML/CSS открывается огромный мир IT, и вы можете найти именно то, что вам по душе.
А что бы выбрали вы? Делитесь в комментариях!
Мы команда энтузиастов, которая состоит из 2 сооснователей, back-end разработчиком (опыт 10 лет) и разрабатывает платформу. Нам нужен в команду front-разработчик, веб-дизайнер в одном лице. Мы ему готовы предложить 1% опциона и в подчинение Джуна.
Недавно обновляли корпоративную дизайн систему. Кроме чистки компонентов и их упрощения решили переехать с tailwind 3 на tailwind 4. В качестве сборщика у нас Vite, фреймворк Svelte.
В предыдущей версии компонентов мы не скупясь писали блоки стилей прямо в компонентах, применяя функцию tailwind @apply - это сильно причёсывает код в плане чистоты, как шаблона, так и чистоты стилей.
Стартанули мигрирование, прогнали миграционную утилиту от tailwind, все по православному, но - при запуске apply не работал и tw классы не резолвились. Пошли читать доку, вычислили новые правила про вызов функции @reference в каждом блоке стилей в компоненте. НО блэ, в доке приводят примеры:
либо ссылаемся относительным путём к своему конфигу tailwind @reference "../../app.css"
либо красиво и лаконично @reference "tailwindcss" - но тогда твой конфиг отваливается, корпоративные токены и вся прочая мишура остаётся за бортом.
Пошел гуглить, ведь наверняка есть варианты создать свой алиас, чтобы не писать относительные пути. Wasted несколько часов и стаканов кофе, чтобы найти решение в дебатах на github.
Добавляем в конфиг фреймворка алиас:
alias: {'corp-tailwind': './src/corp-tailwind.css'
},
В компонентах в блоке стилей пишем (у нас scss):
<style scoped lang="scss">
@ import "corp-tailwind" reference;
...
</style>
Почему такой пример нельзя было привести в документации tailwind, я так и не понял. Надеюсь, кому-то пригодится данная заметка.
ИИ для прототипирования интерфейсов
До недавнего времени я использовал ChatGPT исключительно как помощника для генерации кода — вбросить запрос, получить сниппет, внести правки. Но все вокруг только и говорят об AI-агентах, курсоре, v0 и так я наткнулся на сервисы для онлайн генерации прототипов на основе ИИ.
Вот несколько подобных сервисов:
- BoltNew
- v0 by Vercel
- lovable
Можно сказать, что это онлайн IDE, где можно сгенерировать проект по запросу, увидеть результат, задеплоить и поделиться ссылкой на прототип.
Сделать полноценный проект с помощью этих сервисов, конечно, трудно, но набросать прототип и проверить гипотезу, например, возможно ли реализовать какую-то фичу с помощью какой-то библиотеки, очень удобно.
А теперь немного про мой опыт 👇.
1️⃣ Первый опыт
Первый раз, когда я наткнулся на v0, я попросил его сгенерировать интерфейс Айфона по скриншоту (тут демка). Когда я увидел результат, то в восторге побежал показывать жене. А потом понял, что шутки про замену фронтендеров на ИИ перестали быть шутками 😅.
2️⃣ Опыт использования в работе
В феврале мне дали большую задачу, где использовалась библиотека, в которой у меня не было ровным счётом 0 опыта, и попросили дать оценку по времени.
У библиотеки, есть большой набор демок, но то, что требовалось мне — отсутствовало. И тут я вспомнил про v0 и решил сам сгенерировать маленькие прототипы на каждую новую фичу.
Нельзя сказать, что все демки были рабочие, но v0 помог мне понять возможности библиотеки, а некоторые куски кода я просто скопировал без изменений.
P.S. итоговую оценку всё же стоило умножить на 2 😅.
3️⃣ Ещё пример
Также мы рассматривали вариант, сменить GoJS на @xyflow/react и тут мне снова помог V0. Примеры для @xyflow/react v0 генерировал намного лучше. За пару дней я набросал небольшой прототип, который точно писал бы неделю. Я сделал скриншот дизайна в фигме, и попросил v0 сгенерировать его с использованием библиотеки.
🛑 Минусы
Тут конечно, важно сказать, что часто эти сервисы:
- генерируют нерабочий код
- генерируют не совсем то, что вам нужно
- могут сломать весь проект после очередных изменений
- имеют ограниченное количество бесплатных запросов в день
Расскажите, пользуетесь ли вы подобными сервисами и какое у вас впечатление?
#Frontend #Ai
Нельзя же разделить плашку на 2 половины, чтобы пальцем точно попасть? Надо же посередине встать облачко-подсказку?
Запомните, убогие: это не «мой браузер устарел», это ваша команда фронтендеров - обыкновенные безрукие макаки с опилками вместо мозга.
Пояснение: пару дней назад работало всё, сегодня вижу УЛЬТРАОБНОВЛЕНИЕ: новая иконка чата, и чат не работает. Открыл в другом браузере - никаких отличий по функционалу от «старой версии» (которая была), вот вообще ноль.
Классика современных подходов к разработке. Какая-нибудь новая версия говнофреймворка всегда важнее пользователей.
