Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Front-end

669 постов сначала свежее
pro.obzor
pro.obzor
9 дней назад

Udemy в России 2025: как учусь я, что советую и что не зашло⁠⁠

Всем привет! Решил рассказать, как я учусь на Udemy из России в 2025 году, какие курсы реально стоят внимания, какие особенности использования у нас сейчас есть, и какие нюансы стоит знать перед покупкой. Пишу как есть — не реклама, а личный опыт. Сам в своё время искал такие обзоры, но находил в основном "воду" или сплошные восторги.


Почему вообще выбрал Udemy

Когда начинал учить фронтенд и прокачивать React + TypeScript, понял, что просто "гуглить статьи" не хватает — нужно структурное обучение с нормальными примерами и проектами.

Посмотрел разные платформы, и по соотношению цена / качество / свобода графика мне лучше всего зашёл именно Udemy.

Что понравилось:

✅ Огромный выбор курсов
✅ Можно учиться в своём темпе
✅ Вменяемые цены
✅ Пожизненный доступ к купленным курсам


Что у меня сейчас в "моих курсах"

Из того, что реально прохожу/прошёл:

  • React + TypeScript (продвинутый курс)

  • Паттерны проектирования на JS

  • Продвинутый Git

  • Пара курсов по английскому для IT

  • Присматриваюсь к курсу по GraphQL


Что мне особенно нравится в Udemy курсах

📌 Практика — почти в каждом хорошем курсе есть реальные проекты, которые потом можно показать в портфолио.

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

📌 Преподаватели-практики — часто курсы ведут разработчики из Google, Microsoft, крупных стартапов.

📌 Гибкость — можно учиться когда и как удобно, хоть в метро, хоть вечером дома.

📌 Есть официальное приложение — можно скачивать видео на телефон.


Минусы (честно)

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

❌ Нет "живого" общения с преподавателем — но для меня это не критично.

❌ Иногда попадается много воды — но это редкость у проверенных авторов.


Особенности использования Udemy в России в 2025

Сам сайт udemy работает — блокировок нет, регистрация доступна, курсы видны.

Реальная проблема — оплатить udemy, ведь российские карты напрямую не принимаются. Я для себя нашёл удобный способ — пользуюсь сервисом rusudemy.com, который помогает легально зачислить курсы на свой аккаунт Udemy. До санкций я и представить себе не мог, что все зайдет слишком далеко, а буду искать инфу как купить курс на Udemy, ведь есть же сам сайт udemy!?

VPN использую по ситуации — в 90% случаев всё грузится и без него, но иногда Windscribe или ProtonVPN помогают, если видео тупят.


Лайфхаки по выбору курсов

✅ Смотрю рейтинг — лучше 4.5+
✅ Читаю отзывы — особенно негативные, чтобы понять слабые стороны
✅ Проверяю дату обновления — если курс не обновлялся пару лет — мимо
✅ Смотрю демо-уроки — по ним сразу понятно, как автор объясняет


Итоги — стоит ли сейчас учиться на Udemy в России

Мой личный ответ — да, стоит.

Плюсы:

  • реально крутые курсы

  • адекватная цена (особенно на распродажах по $10–15)

  • гибкий формат

  • можно учиться и с ПК, и с телефона

Минусы:

  • нужно уметь выбирать

  • оплата напрямую сложнее (но обходится)

  • не все курсы одинаково полезны


Что советую новичкам

Если только начинаете:
👉 Начните с одного-двух курсов, не берите сразу десяток — будет тяжело.
👉 Обязательно делайте проекты — они дают самое ценное.
👉 Сравнивайте несколько курсов по одной теме — часто у разных авторов подача разная.


А вы учитесь на Udemy? Что посоветуете?

Интересно послушать опыт других — какие Udemy курсы реально помогли в работе? Какие темы сейчас качаете? Может, кто-то подскажет годный курс по Next.js — я как раз присматриваю.


udemy, юдеми в россии, udemy как udemy 2025, аккаунт udemy, python blender java script it курсы

Показать полностью
Личный опыт Опыт Блог Совет Навык Frontend Саморазвитие Совершенство Мотивация
2
1
cherkalexander
cherkalexander
30 дней назад

Онбординг ИИ⁠⁠

🤖 Онбординг ИИ

Что происходит, когда в команде появляется новый сотрудник? Правильно — он адаптируется и старается писать код в соответствии с гайдлайнами, принятыми в команде. А помогают ему в этом документация, линтеры и ревью коллег.

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

Многие ИИ-агенты поддерживают формат "правила/инструкции", где можно описать стандарты и архитектуру проекта. Это, по сути, обычный Markdown-файл, который будет добавляться к системному промпту при каждом запросе.

- В Cline — это custom instructions
- В Cursor — rules
- В Copilot — instructions
- В Windsurf — rules


Названия немного отличаются — но суть одна.

Примеры

1️⃣ У меня Copilot упорно пытался использовать pnpm, пока я явно не указал использовать npm.

2️⃣ На работе мы используем BEM и префиксы для всех имён классов, чтобы избежать коллизий. Cline, конечно, этого не понял, пока я явно не задал это в инструкциях.

3️⃣ На выходных решил набросать MVP пет-проекта из бэклога. Сначала написал ТЗ с помощью ИИ, положил его в .github/instructions/requirements-instruction.md и попросил Copilot написать проект по ТЗ. Он справился, потребовались лишь небольшие правки. Теперь при любых изменениях он уже знает требования.

4️⃣ Можно попросить ИИ использовать conventional commits при генерации сообщений к коммитам.

Некоторые примеры — на скринах.

#ai #frontend

Онбординг ИИ Кросспостинг, Pikabu Publish Bot, Искусственный интеллект, Frontend
Онбординг ИИ Кросспостинг, Pikabu Publish Bot, Искусственный интеллект, Frontend
Онбординг ИИ Кросспостинг, Pikabu Publish Bot, Искусственный интеллект, Frontend
Онбординг ИИ Кросспостинг, Pikabu Publish Bot, Искусственный интеллект, Frontend
Онбординг ИИ Кросспостинг, Pikabu Publish Bot, Искусственный интеллект, Frontend
Показать полностью 5
Кросспостинг Pikabu Publish Bot Искусственный интеллект Frontend
2
2
mars.frontier
mars.frontier
1 месяц назад

Как мы делали мини-игру про ровер на Марсе внутри Telegram WebApp⁠⁠

«Хочется сделать простую карту, чтобы листать её в Telegram». С этого всё и началось. А закончилось — изометрическим движком, авторизацией по WebApp, системой энергии, покупкой участков и боевым ровером с шестью колёсами.

1/3

🚀 С чего всё началось?

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

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

Но само собой, что бот - не предел мечтаний, нужно было пилить полноценный мини-апп.

На боте лишь проверили гипотезу, отладили механики, типа уменьшения энергии, подзарядки аккумулятора в течении времени, пока не заходишь в игру.

Первый шаг в сторону мини-аппки - сделали вебстраничку, где можно было листать мышкой или пальцем — просто ради визуализации. Прямоугольная сетка, тайлы, немного стилей. Telegram WebApp проглатывал HTML5 на ура. Тогда не было никакой логики, просто подгрузка текстур и картинка под пальцем.

Вот как это выглядело:

  • Пользователь заходил и видел карту Марса.

  • Никакого взаимодействия — только “глянуть”.

🎮 А потом захотелось интерактивности

Следующим шагом стало добавление изометрии — чтобы выглядело как псевдо-3D. Самое интересное, что даже не потребовалось изменять текстуры. Серьезно :) Они по-прежнему те же самые, квадратные, 64 х 64. И не используется никакой 3д - движок.

вот краткое и понятное объяснение, как строится изометрическая карта из квадратных тайлов:


🧠 Основная идея:

Каждый квадратный тайл поворачивается на 45° и масштабируется по вертикали, чтобы получился ромб (изометрическая проекция). Вместо привычной сетки (x, y) мы рассчитываем экранные координаты (left, top) по формуле:


📐 Формулы для отображения:

При размере одного тайла T:

  • W = T * sqrt(2) — изометрическая ширина (диагональ квадрата).

  • H = W / 2 — изометрическая высота (высота ромба).

  • WX2 = W / 2, HX2 = H / 2 — половинки для смещения от центра.

Переход от логических координат (dx, dy) к пиксельным:

isoX = (dx - dy) * WX2 + centerX; isoY = (dx + dy) * HX2 + centerY;


🧩 Что это даёт:

  • (dx - dy) — смещает тайл по горизонтали.

  • (dx + dy) — смещает тайл по вертикали.

  • centerX, centerY — центр экрана, чтобы карта строилась относительно игрока.


🎯 В результате:

  • Из обычной квадратной сетки (x, y) формируется ромбовидная карта, где видны и горизонтальные, и вертикальные соседние тайлы.

  • Центральная клетка (текущий игрок) — всегда по центру, а остальные располагаются вокруг.

    Ну а дальше уже дело техники - придумали алгоритм перемещения в 8 направлениях: вверх, вниз, влево, вправо, плюс диагонали.

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

    Задали запреты на воду, скалы и занятую клетку, чтобы не было “читов”.

🔐 Само собой - авторизация

Чтобы пользователь не “прыгал” по чужим роверам и участкам, мы внедрили Telegram WebApp InitData (это такая строка с хешем, которую фронт передает нам в бэк, а мы - уже на сервере телеграм с токеном бота валидируем подпись. Если сошлась - то пользователь зашел к нам через телегу. Если нет - скорее всего он просто открыл веб-страницу как сайт, или что-то пытается поломать, подделать :)

Если кратко:

  • Telegram сам отдаёт токен с подписью.

  • Мы проверяем подпись на бэке по HMAC SHA256.

  • Получаем ID пользователя, сохраняем его в сессии.

Теперь всё честно: ровер – только твой, кристаллы – только твои.

🪐 Стало красивее: добавили кристаллы и рамки

Потом появились:

  • Кристаллы на клетках — можно собирать.

  • Подсветка клеток: белая рамка — твоя, красная — чужая.

  • Имена владельцев, чтобы было видно, кто что захватил.

    В планах: Покупка участков за кристаллы. Это было в текстовом боте. И ползая по карте, даже видны купленные тобой (белым) и оппонентами (красным) участки.

⚡️ Оптимизация и загрузка ассетов

Мы поняли, что каждая картинка может тормозить игру на слабом устройстве, и:

  • Добавили прелоадер, который подгружает PNG-шки перед игрой.

  • Сделали показ спиннера на любом действии (движение, загрузка).

  • Кэшируем тайлы и обновляем только при движении.

🤖 Как выглядит сейчас

Игрок:

  • Заходит в Telegram Mini App.

  • Авторизуется за доли секунды.

  • Видит изометрическую карту с ровером, кристаллами, участками, рекламными баннерами.

  • Может двигаться по клеткам, собирать кристаллы (в будущем - бурить и находить ресурсы, торговать ими, покупать землю).

А мы — всё это рисуем прямо в DOM.
Никаких Canvas, WebGL, или тяжелых движков. Только HTML, CSS и немного магии на JS.


💬 Если интересно — покажу, как это выглядит вживую.
Тестить можно тут. А если зайдёт — добавим NFT, фермы и квесты на выживание 😄

Показать полностью 3
[моё] Gamedev Разработка Программирование Telegram Javascript Python Unity Frontend Backend Web Web-программирование Ton HTML CSS Верстка Длиннопост
9
rabota.pikabu
rabota.pikabu
1 месяц назад
Пикабу Работа
Серия Вакансии в IT

Разработчик Frontend/Backend (Битрикс) в Создаватель, Удаленно⁠⁠

Опыт работы: от 1 до 3 лет
Зарплата: от 30 000 до 80 000 рублей

Другие вакансии от Создаватель

Ваши задачи:

  • Писать сайты на 1С-Битрикс — да, мы тоже сначала не верили, что это может быть интересно

  • Настраивать и настраивать CRM Битрикс24 (а иногда чинить то, что кто-то "настроил до нас")

  • Придумывать, как бы сделать хорошо, а потом ещё и делать

  • Лезть на сервер через SSH, ставить кроны, делать бэкапы, спасать мир (по ситуации)

  • Работать с командой: у нас тут всё цивильно — без «разработчики против тестировщиков»

Требования:

  • PHP 7+, Git, ООП — прям чтоб знал

  • Понимание, как работает веб (и зачем вообще нужен backend)

  • Если умеешь в JavaScript, HTML, CSS, Битрикс24 и SQL — вообще супер, но не обязательно

ОТКЛИКНУТЬСЯ →

Больше вакансий по вашим предпочтениям ищите на сайте Пикабу Работа.

[моё] Свежие вакансии Пикабу Вакансии Работа Карьера Поиск работы Собеседование Профессия Зарплата Сотрудники Россия Специалисты Трудовые отношения Удаленно Вакансии Разработчики Frontend Backend Битрикс Текст
62
Skyscrew
Skyscrew
1 месяц назад
IT-юмор

Мне нравится, что в этом примере передние педали ничего не делают⁠⁠

Мне нравится, что в этом примере передние педали ничего не делают Картинка с текстом, Мемы, Frontend, Backend, Разработчики

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

Картинка с текстом Мемы Frontend Backend Разработчики
9
pikabu.education
pikabu.education
1 месяц назад
Серия Программирование

Что дальше после HTML/CSS?⁠⁠

Куда двигаться в веб-разработке и не только
Вчера мы публиковали подборку лучших курсов по 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-разработчика.

Что дальше после HTML/CSS? Обучение, Frontend, Backend, HTML, CSS

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, и вы можете найти именно то, что вам по душе.

А что бы выбрали вы? Делитесь в комментариях!

Показать полностью 1
Обучение Frontend Backend HTML CSS
108
user10582549
1 месяц назад

GovTech⁠⁠

Мы команда энтузиастов, которая состоит из 2 сооснователей, back-end разработчиком (опыт 10 лет) и разрабатывает платформу. Нам нужен в команду front-разработчик, веб-дизайнер в одном лице. Мы ему готовы предложить 1% опциона и в подчинение Джуна.

Frontend Веб-разработка Текст
3
6
deprime
deprime
2 месяца назад
Web-технологии

Переезд с tailwind 3 на tailwind 4⁠⁠

Недавно обновляли корпоративную дизайн систему. Кроме чистки компонентов и их упрощения решили переехать с 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, я так и не понял. Надеюсь, кому-то пригодится данная заметка.

Показать полностью
[моё] Программирование Javascript Frontend Текст
1
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии