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

Мой Любимый Кот

Новеллы, Головоломки, Коты

Играть

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

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

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

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

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

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

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

Frontend + Web-программирование

С этим тегом используют

IT Программирование Javascript IT юмор Веб-разработка Web Программист HTML Все
92 поста сначала свежее
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
maximz
maximz
5 месяцев назад

Обычный рабочий день frontend разработчика⁠⁠

Всем привет, окунитесь в обычный рабочий день frontend разработчика. Жена пикабушника делает листинг каталога для онлайн бронирования vr игр

Приятного просмотра, с удовольствием отвечу на все вопросы по теме

Показать полностью
[моё] Стримеры React IT Приложение Web-программирование Программирование Javascript Айтишники Сайт Frontend Разработчики Видео YouTube CSS
3
6
a3at0s
a3at0s
6 месяцев назад
Web-технологии

Опенсорсный проект на Vue3 + Ionic⁠⁠

Приветствую, друзья!

Недавно я опубликовал пост о своем мобильном приложении MyTasks.
Данный пост больше нацелен на разработчиков (начинающих и более опытных).
Я решил сделать этот проект опенсорсным, ссылка на проект в github:
https://github.com/azatgt1996/my-tasks.

Цель проекта: поделиться опытом разработки мобильного приложения на Vue3 и Ionic Capacitor.
Проект не сложный, надеюсь начинающие смогут понять код, старался декомпозировать на модули и компоненты, давать хорошие названия им.
Также буду рад увидеть фидбек от более опытных разработчиков в плане лучших практик разработки.

Немного про фичи приложения:
- добавление, редактирование, выполнение и удаление задач (последние 2 действия можно выполнять прямо в списке свайпами влево/вправо)
- мультиязычность, темная тема, настройки
- категории задач
- групповые действия с задачами
- уведомления и приоритеты задач
Ссылка на само приложение:
https://play.google.com/store/apps/details?id=com.kvarta.myt...

Также проект можно смело использовать как костяк для собственных проектов, что ускорит разработку.
И пару слов почему решил использовать такой стек. Vue3 и Ionic являются удобными инструментами для фронтенд разработчика, так как имеется хорошая документация с примерами. Для разработки на Ionic нет необходимости запускать android-эмулятор, что сильно экономит время и ресурсы компьютера. Просто запускаете проект и сразу видите результат в вашем браузере.

Спасибо за внимание!

Показать полностью
[моё] Vue Javascript Frontend Web-программирование Приложение на Android Текст
2

Попробовать мобильный офис

Перейти
Партнёрский материал Реклама
specials
specials

Мобильный офис до 100 тысяч рублей⁠⁠

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

Протестировали TECNO MEGABOOK K15S вместе со смартфоном TECNO CAMON 40 и наушниками TECNO в рабочих и бытовых сценариях от Zoom-звонков до перелета, а теперь рассказываем, как себя показала техника.

Первое впечатление от дизайна ноутбука

Первое, что заметно — это вес. При диагонали 15,6 дюйма и полностью металлическом корпусе K15S весит всего 1,7 кг. Это примерно на 15% меньше, чем аналоги. Устройство не обременяет ни в офисе, ни в такси. Ноутбук поместился в стандартный городской рюкзак, было удобно достать его в кафе за завтраком и по дороге в такси, чтобы быстро отработать клиентские правки.

1/4

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

Шарнир работает мягко: чтобы открыть крышку даже одной рукой, не нужно придерживать корпус. Чтобы показать коллеге или клиенту презентацию, достаточно раскрыть экран на 180°. Это удобно и для работы лежа, и для подставок, которые требуют определенного угла обзора.

Также отметим 9 портов: USB-A, USB-C, HDMI, слот для карты памяти — можно забыть о переходниках.

В TECNO MEGABOOK K15S предустановлен Windows 11. Ноутбук готов к работе сразу после включения. Никаких лишних установок и обновлений. Все настроено и оптимизировано для вашей многозадачности.

Экран: яркая картинка и комфорт ночью

Экран — 15,6 дюйма, IPS-матрица с разрешением Full HD. Углы обзора отличные: изображение остается четким, даже если смотреть сбоку, цвета не искажаются. Есть антибликовое покрытие. Тестировали ноутбук при разном освещении: можно спокойно работать у окна. Когда солнце бьет прямо в экран, текст по-прежнему остается читаемым, картинки не искажаются. Это редкость в бюджетных моделях.

1/2

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

Стеклокерамический крупный тачпад — 15 см. Он не залипает, не промахивается, срабатывает с первого касания. Не возникает дискомфорта, даже если несколько часов редактировать документы без мышки. После перехода с других устройств немного непривычно, что тачпад работает в двух направлениях: нижняя часть отзывается нажатием, верхняя — касанием.

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

Производительность: рендерим видео, открываем вкладки

Ноутбук работает на AMD Ryzen 7 5825U (опционально можно выбрать версию техники Intel Core i5-13420H). Восьмиядерный AMD с поддержкой 16 потоков подходит для ресурсоемких операций вроде рендеринга или работы с большими массивами данных. Встроенная графика Radeon справляется с редактированием видео в Full HD или играми.

1/4

Во время монтажа 30-минутного ролика в DaVinci Resolve и параллельной работе в Photoshop с несколькими большими PSD-файлами система сохраняла стабильность. Не было ни зависаний, ни заметного падения производительности. Ноутбук уверенно держит в фоне 10 приложений одновременно. Если запущены браузер с 20 вкладками, видеозвонок в Telegram, Excel с объемной таблицей и софт для монтажа, система не тормозит и не перегревается. Переход между окнами остается плавным, ничего не «проседает», даже при одновременном скачивании файлов и редактировании видео.

Базовая комплектация включает 16 ГБ оперативной памяти в двух слотах. При необходимости можно легко увеличить этот показатель до 32 ГБ, заменив стандартные модули на более емкие. Помимо установленного SSD на 1 ТБ предусмотрен дополнительный слот, поддерживающий диски объемом до 2 ТБ.

Чтобы во время нагрузки системы охлаждения не выходили из строя, в ноутбук встроен эффективный вентилятор, способный рассеивать до 35 Вт тепла. Устройство не греется, его спокойно можно держать на коленях. Это решение дополнено тремя режимами работы, которые переключаются простой комбинацией клавиш Ctrl+Alt+T. Тихий режим идеален для работы ночью или в общественных местах, сбалансированный подходит для повседневных задач. Производительный, на котором запускали рендеринг видео и игры, практически не шумит.

Автономность: 15 часов без подзарядки

Протестили автономность MEGABOOK K15S в условиях, знакомых каждому деловому путешественнику. Утром перед вылетом зарядили ноутбук до 100% и взяли его в рейс Москва — Калининград. В зале ожидания провели созвон, потом три часа смотрели сериал и в дороге до отеля редактировали документы. К моменту приезда оставалось 40% заряда: хватило бы еще на пару часов продуктивной работы.

1/3

MEGABOOK K15S может автономно работать до 15 часов и позволяет не оглядываться на индикатор заряда. Заявленное время достигается при типичном офисном использовании: одновременная работа с документами в Word и Excel, ведение переписки, видеоконференции, веб-серфинг.

Если все же понадобится, за  час восполняется до 70% батареи. Компактный адаптер мощностью 65 Вт на базе нитрида галлия поместился даже в карман пиджака. Один блок питания заряжает и ноутбук, и смартфон, и наушники. Экономия места: не нужно никаких дополнительных проводов.

Звук, который реально слышно

В TECNO MEGABOOK K15S установлены два мощных динамика по 2.5 Вт. Звук с глубокими низами, без пластикового дребезжания, объемный. Благодаря DTS можно смотреть видео даже в шумном помещении. В тестах специально включали сцены с шагами и выстрелами: локализация настолько точная, что в наушниках нет необходимости.

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

Кстати, о созвонах. В ноутбуке встроена обновленная камера. Она отслеживает положение лица, а еще есть физическая шторка приватности. Например, можно закрыть шторку для комфортных видеоконференций.

Для тех, кто предпочитает гарнитуру, идеально подойдут беспроводные наушники TECNO FreeHear 1 из экосистемы бренда. Когда не хотелось делиться разговорами с окружающими, подключали их. Чистый звук с акцентом на средние частоты, 11-мм драйверы, которые выдают неожиданную детализацию. Музыку слушать приятно: и фоновый плейлист на телефоне, и вечерний сериал на ноутбуке. Автономно работают наушники 6 часов, с кейсом — до 30 часов. 

1/2

Bluetooth 5.4 обеспечивает стабильное соединение на расстоянии до 10 метров. Удобная C-образная форма разработана специально для длительного ношения — после восьмичасового рабочего дня в ушах не возникает дискомфорта. Наушники поддерживают одновременное подключение к ноутбуку и смартфону. Переключение между устройствами происходит быстро и без заминок.

Через фирменное приложение Welife можно выбрать один из четырех эквалайзеров и отследить местоположение гарнитуры в случае утери. А еще кастомизировать виджет для управления наушниками. Функция настройки персонализированного дизайна доступна для устройств на Android и позволяет гибко изменить внешний вид окна подключения: вплоть до установки фоновой картинки или собственного фото.

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

Бесшовная синхронизация со смартфоном

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

Функция выручила, когда нужно было открыть приложение, у которого нет веб-версии. Удобно работает и буфер обмена: скопировал текст на одном устройстве — вставил на другом. Например, код, полученный в сообщении на телефоне, вводится в браузере на ноутбуке. Экономит минуты, а иногда и нервы. А когда в дороге пропал Wi-Fi, ноутбук сам подключился к мобильному интернету через смартфон.

1/2

TECNO CAMON 40 и сам по себе — мощный рабочий инструмент.  Смартфон выделяется камерой высокого качества 50 Мп, ярким AMOLED-экраном 120 Гц и множеством функций, которые упрощают процесс мобильной съёмки и использование искусственного интеллекта TECNO AI.

Телефон работает на HIOS 15.0.1 на базе Android 15.В фирменную оболочку встроен искусственный интеллект:

  • Голосовой помощник Ella. Отвечает на вопросы, помогает с задачами и управлением устройством.

  • Решение задач. Наводите камеру на задачу, ИИ решает ее.

  • AI Редактор фотографий. Интеллектуальная обработка в одно касание.

  • Быстрый поиск. Находит адрес на экране и запускает навигацию, распознает объекты и события, автоматически добавляет их в календарь.

Технические характеристики

  • Процессор и память. 8 ядер, 16 потоков, Кэш L3 16 МБ, частота до 4.5 ГГц Графический процессор AMD Radeon™ graphics SSD 512 ГБ или 1 ТБ, М.2, 2280, PCle 3.0 Nvme DDR4 16 ГБ, 3200 МГц.

  • Дисплей. 15.6", TFT, Full HD (1920×1080), 16:9, 280нит, 45% NTSC, 16.7 млн цветов, 60 Гц, 141 ррі.

  • Веб-камера. 1 Мп, шторка приватности.

  • Порты. 9 портов: 1*TF Card (microSD), 1*HDMI 1.4, 1*USB-A 3.1,

    1*USB-A 3.2, 1*3.5mm аудиовход, *Ethernet RJ45 до 1 Гбит, 2*Туре-С (Full Function), 1*слот для замка Kensington.

  • Другое. Сканер отпечатка пальца в кнопке питания. Клавиатура с подсветкой (4 уровня яркости). Тачпад с поддержкой одновременно 4 касаний.

  • Батарея. 70 Вт∙ч (6150 мА∙ч), Li-Pol, 11.55 B 65 Вт Type-C GaN, 20 В, 3.25 А, кабель 1.8 м (Туре-С-Type-C).

  • Габариты. 17.3 мм (высота), 359.5 мм (ширина), 236 мм (глубина).

  • Вес. 1,7 кг.


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

КУПИТЬ НОУТБУК TECNO

Реклама TECNO Mobile Limited, Юридический адрес: Flat N, 16/F., Block B, Универсальный промышленный центр, 19-25 Shan MeiStreet, Fotan, New Territories, Гонконг

Показать полностью 17
Электроника Гаджеты Ноутбук Длиннопост
pikabu.education
pikabu.education
7 месяцев назад
Серия Программирование

Топ-5 курсов по разработке на React⁠⁠

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

Мы тщательно анализируем плюсы и минусы каждого курса, опираясь на мнение пользователей как на нашей платформе, так и на других ресурсах. Изучите реальные отзывы студентов и найдите подходящий для вас курс на платформе Pikabu Курсы.

  • Курс «Специализация Frontend-разработчик» от Skillfactory

  • Курс «JavaScript Developer. Basic» от Otus

  • Курс «Frontend-разработчик» от Академия Eduson

  • Курс «Профессия Фронтенд-разработчик» от Skillbox

  • Курс «Web-разработчик» от ProductStar

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Обзор курсов

1. Курс «Специализация Frontend-разработчик» от Skillfactory
Вы научитесь создавать современные веб-сайты и приложения с нуля. Освоите базовые технологии верстки (HTML и CSS), программирование на JavaScript, работу с библиотекой React и основы backend-разработки.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: 9 месяцев.
Подробности:

  • пошаговое обучение;

  • много практики;

  • техническое задание для финального проекта подготовлено сотрудниками компании СКАН;

  • работа с фреймворками Angular и Vue.js в дополнение к React;

  • высокая сложность на этапах изучения JavaScript и React;

  • только базовые знания Node.js;

  • программа трудоустройства;

  • доступ к материалам курса навсегда.

Посмотреть программу курса >>>


2. Курс «JavaScript Developer. Basic» от Otus
Вы научитесь основам и современным подходам разработки на JavaScript, включая использование TypeScript и библиотеки React. Поймете, как работать с системой контроля версий Git, тестировать код, создавать одностраничные приложения (SPA) и управлять состоянием с помощью Redux.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: 96 000 ₽
Цена со скидкой: 81 600 ₽
Длительность: 5 месяцев.
Подробности:

  • полный цикл обучения;

  • практическая направленность;

  • современные инструменты: работа с TypeScript, Redux, Git, тестовыми фреймворками;

  • фокус на реальной разработке;

  • высокая нагрузка для новичков;

  • в подарок видеокурс «JavaScript для начинающих» для самостоятельного прохождения;

  • налоговый вычет.

Посмотреть программу курса >>>

3. Курс «Frontend-разработчик» от Академия Eduson
Вы не только научитесь создавать сайты, но и освоите управление базами данных, проектирование API и принципы контейнеризации.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: зависит от тарифа.
Подробности:

  • обширная программа;

  • практическая направленность;

  • работа с популярными инструментами;

  • стажировка в IT-компании;

  • помощь в трудоустройстве;

  • доступ к курсу навсегда;

  • диплом о профессиональной переподготовке.

Посмотреть программу курса >>>


4. Курс «Профессия Фронтенд-разработчик» от Skillbox
Вы освоите HTML, CSS, JavaScript, TypeScript, а также популярные фреймворки React.js или Vue.js на выбор.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: 9 месяцев.
Подробности:

  • глубокая проработка тем;

  • выбор фреймворка: React.js или Vue.js;

  • большой объем практики;

  • обучение ключевым современным технологиям;.

  • высокая нагрузка;

  • курс обновлен в 2024 году;

  • помощь в трудоустройстве;

  • доступ навсегда;

  • налоговый вычет.

Посмотреть программу курса >>>


5. Курс «Web-разработчик» от ProductStar
Вы научитесь создавать современные веб-приложения с нуля, начиная с основ HTML и CSS и завершая продвинутыми технологиями, такими как JavaScript, React и TypeScript.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: 10 месяцев.
Подробности:

  • глубокое погружение в профессию;

  • практическая направленность;

  • высокая нагрузка;

  • отсутствие фокуса на одной специальности: для тех, кто хочет стать специалистом только во фронтенде или только в бэкенде, программа может быть слишком обширной;

  • курс обновлен в 2024 году;

  • помощь в трудоустройстве;

  • стажировки в компаниях-партнерах;

  • подписка на РБК на 6 месяцев;

  • 3 мини-курса в подарок;

  • интенсив на выбор.

Посмотреть программу курса >>>

Реклама. ООО Скилфэктори, ИНН 9702009530, ООО Отус онлайн-образование, ИНН 9705100963, ООО Эдюсон, ИНН 7729779476, ЧОУ ЧАСТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ДОПОЛНИТЕЛЬНОГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ ОБРАЗОВАТЕЛЬНЫЕ ТЕХНОЛОГИИ СКИЛБОКС (КОРОБКА НАВЫКОВ), ИНН 9704088880, ООО ТРИВИУМ, ИНН 7806297293.

Показать полностью 6
Учеба Обучение React Frontend Web-программирование Онлайн-курсы Длиннопост
22
3
cododelia
cododelia
8 месяцев назад
Web-технологии

Отслеживание сетевой активности и переходов между страницами в SPA⁠⁠

При создании инъецируемых скриптов для сайтов, использующих архитектуру SPA (Single Page Application), может возникнуть потребность отслеживать переходы между страницами или перезагрузки элементов. Из-за динамической подгрузки контента через AJAX и Fetch, события DOMContentLoaded или load будут бесполезны.

Для инъецируемых скриптов, хорошим решением будет отслеживать состояние радиомолчания (network idle). Оно наступает, когда все сетевые запросы завершены, и сеть на некоторое время «замолкает». Подобное поведение полезно, если нужно запустить код только после того, как пройдут все запросы или после перехода на другую страницу, чтобы реинициализировать скрипт.

💻 Пример сценария использования

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

🤫 Как это работает

  1. Инициализация счетчика активных сетевых запросов.

    Сниппет отслеживает все сетевые запросы на странице (Fetch и XMLHttpRequest) с помощью PerformanceObserver. Каждый раз, когда начинается новый сетевой запрос, счетчик activeRequests увеличивается.

  2. Обработка завершения запросов.

    После завершения запроса activeRequests уменьшается, и проверяется состояние сети. Если активных запросов не осталось, через 500 мс на объекте window генерируется событие network-idle.

  3. Использование события network-idle.

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

    4. Задержка перед генерацией события.

    Задержка в 500 мс добавлена, чтобы устранить "шум" случайных срабатываний и убедиться, что действительно наступило состояние радиомолчания.

📞 Важно:

  • Модификации роутов в SPA. Если у вашего SPA-приложения не используются сетевые запросы при изменении маршрутов, дополнительно можно привязаться к событиям history.pushState и popstate.

  • Очистка обсерверов. Не забывайте отключать обсерверы, чтобы избежать утечек памяти, если ваш скрипт прекращает свое действие при определенных условиях.

🫡 Заключение

Этот сниппет помогает организовать логику на основе сетевых событий в инъецируемых скриптах для приложений с динамическим роутингом, позволяя учитывать состояние “радиомолчания” и гарантируя, инъецируемые скрипты выполняются после прогрузки страницы, а также помогает перезапускать инъецируемый скрипт при переходах между страницами.

Ознакомиться со сниппетом можно на GitHub Gist.
А подобные посты чаще в пишу в Telegram канале, там же и пример проекта, где это применимо.

Показать полностью
[моё] Программирование Javascript Frontend Web Web-программирование Tampermonkey Текст
3
rabota.pikabu
rabota.pikabu
10 месяцев назад
Пикабу Работа
Серия Удаленная работа

Frontend разработчик в Создаватель, Удаленно⁠⁠

Опыт работы: не имеет значения
Зарплата: от 30 000 до 100 000 рублей

Вакансия подходит для Джунов тоже!

Ваши задачи:

  • Участвовать в разработке новых и поддержке текущих сайтов на 1С-Битрикс и CRM Битрикс24

  • Проектировать новый функционал и продумывать его архитектуру

  • Решать множество нетривиальных задач, оптимизировать скорость загрузки

  • Взаимодействовать по задачам с командой веб-разработчиков, а также верстальщиком, тестировщиком и контент-менеджерами

Требования:

  • Желательно знание JavaScript, HTML, CSS

  • Умение работать с системой контроля версий Git

  • Понимание принципов объектно-ориентированного программирования

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

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

[моё] Вакансии Карьера Свежие вакансии Собеседование Поиск работы Работа Frontend Разработчики Профессия Карьерный рост Программирование Web-программирование Программист Языки программирования Javascript Удаленная работа Текст
AlexeyPerfilev
AlexeyPerfilev
11 месяцев назад

Vue.js: Почему этот фреймворк рвёт всех⁠⁠

Привет, Пикабушники! Сегодня хочу рассказать вам, почему Vue.js — это просто бомба среди фронтенд-фреймворков. Если вы еще не пробовали, то вот вам причины, почему стоит:

  1. Проще некуда Vue настолько прост, что даже ваша бабушка сможет в нем разобраться (ну ладно, может не совсем). Но серьезно, его синтаксис настолько интуитивный, что вы начнете писать код почти сразу.

  2. Гибкий, как гимнастка на Олимпиаде Хотите маленький виджет? Пожалуйста! Нужно огромное приложение? Да без проблем! Vue подстроится под любые ваши хотелки.

  3. Быстрый, как Усэйн Болт Vue такой шустрый, что вашему приложению позавидует даже Flash. Виртуальный DOM и умная система отслеживания изменений делают его молниеносным.

  4. Документация - просто сказка Официальная документация Vue настолько хороша, что ее можно читать вместо сказки на ночь. Всё разложено по полочкам, с примерами и объяснениями.

  5. Комьюнити - огонь Вокруг Vue собралось столько крутых разработчиков, что любой вопрос решается быстрее, чем вы успеете сказать "Спасибо".

  6. Дружит со всеми Vue легко вписывается в существующие проекты. Хотите добавить его к своему древнему сайту на jQuery? Да пожалуйста!

В общем, друзья, если вы еще не попробовали Vue, то самое время начать. Это как попробовать борщ после овсянки - вы поймете, что жили не той жизнью!

P.S. Если кто-то скажет, что React или Angular лучше, можете смело кидать в них помидорами. Vue - он как Чак Норрис в мире фронтенда, только лучше! 😎

Кто уже юзает Vue? Делитесь впечатлениями в комментах!

Показать полностью
[моё] Frontend Vue Javascript Web Программирование Веб-разработка Web-программирование IT Программист Текст
20
Блог компании Партнёрский материал Реклама
practicum.yandex
practicum.yandex
16 дней назад

Python, 1С, тестирование и еще один курс для тех, кто хочет стартовать в IT⁠⁠

Собрали наши курсы программирования для тех, кто хочет освоить новую профессию в IT.

Python, 1С, тестирование и еще один курс для тех, кто хочет стартовать в IT IT, Онлайн-курсы, Программист, Программирование, Обучение, Длиннопост, Блоги компаний

Тестировщик

Сколько учиться: 5 месяцев

Тестировщики проверяют программное обеспечение сайтов и приложений, ищут и устраняют в них ошибки и баги и оценивают удобство интерфейса.

На курсе вы изучите 12 инструментов, которые потребуются в работе. Например, Python и язык запросов SQL, графический редактор Figma и инструмент для тестирования API Postman. К концу обучения у вас в портфолио будет семь проектов.

Первый модуль можно пройти бесплатно — поймете, подходит ли вам это направление.

Начать учиться бесплатно>>


Разработчик 1С

Сколько учиться: есть базовый курс на 6 месяцев и расширенный — на 8.

1С — язык программирования для работы с продуктами одноименной компании. Он помогает автоматизировать бизнес-процессы и разрабатывать бизнес-ориентированные приложения. В России с 1С работают и большинство компаний, как небольших, так и крупных.

За полгода вы научитесь работать с платформой и писать код на языке 1С, поработаете с отчетами и системой компоновки данных, научитесь создавать механизмы бухгалтерского учета. Вас ждет девять итоговых работ и выпускной проект.

Начать учиться бесплатно>>


Python-разработчик буткемп

Сколько учиться: 4 месяца

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

Формат буткемп — это интенсивное обучение. Нагрузка в неделю составит около 30 часов, вы можете рассчитывать на поддержку наставников.

Начать учиться бесплатно>>


Системный администратор

Сколько учиться: 6 месяцев

Сисадмин отвечает за исправность информационной инфраструктуры компании. В зоне его ответственности компьютерные системы, сети, серверы, ПО и безопасность данных.

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

Начать учиться бесплатно>>


Чем интенсивнее курс, тем быстрее начинается этап поиска работы. В нашем Карьерном центре мы поддерживаем студентов: помогаем оформлять резюме и портфолио, проходить собеседования, предлагаем вакансии и стажировки от 4000+ партнеров. Стартуйте в IT уверенно!

Реклама ООО «Яндекс», ИНН: 7736207543

Показать полностью
IT Онлайн-курсы Программист Программирование Обучение Длиннопост Блоги компаний
18
2
Astralet
1 год назад
Серия Восхождение в WEB разработку

Восхождение в WEB разработку. Часть 3⁠⁠

Восхождение в WEB разработку. Часть 3 Опыт, Саморазвитие, IT, Web-программирование, Frontend, Создание сайта, Фриланс, Длиннопост

Когда начал изучать эти ваши реакты, вебпаки, ноды-шмоды, понимая, что одного CSS + HTML мало

Продолжаю штурмовать WEB технологии, в частности JS и React. Если с основами JS ещё более-менее понятно и что-то самостоятельно уже получается делать (помогло знание php), то React пока для меня тёмный лес, хотя общая концепция и принципы работы мне понятны. Сам Реакт мне понравился, мощный инструмент с удобной компонетной основой, большие возможности для выполнения задач и реактивность. Планирую начать пет проект на Реакте для полноценного и практического изучения, но ещё осваиваю самые основы (Юутуб) и не готов приступать, мало базы - чувствую. Сейчас, например, только начал изучать хуки.

Вникая уже в git, npm, Node.js, React... пришло осознание, что я, по современным меркам, с текущим стеком знаний просто... верстальщик. Да, могу с нуля сделать сайт почти любой сложности почти на любой CMS, но этого мало. Frontend - своя экосистема скилов и навыков для разработки сайтов и важно - приложений. Пространство, где умения верстальщика - просто минимальная база, не более. Требуемый же объём знаний очень велик. Опыт тоже приличный требуется, пока единственный способ его получить, как считаю - делать свои пет проекты. Только нужно время, время, время... и стараться не терять веру в себя, что для меня самое сложное.

Восхождение в WEB разработку. Часть 3 Опыт, Саморазвитие, IT, Web-программирование, Frontend, Создание сайта, Фриланс, Длиннопост

Кто я в мире IT? Что я умею?

Иногда мне кажется, что сколько бы я не старался, как бы не учил, не трудился - я топчусь на месте или прогресс просто ничтожный. Многие вещи не понимаю с первого раза. Обучаюсь я всегда медленно, такая особенность памяти, но зато способен вникать в сложные вещи. Ощущение бывает, что я не способен выйти на планку джуна. Мой приличный коммерческий опыт разработки сайтов на CMS не имеет особого смысла, ведь он не имеет ничего общего с Frontend разработкой, и поэтому такие резюме фирмам не интересны, такие специалисты не имеют востребованности. Раньше я этого не понимал, а сейчас прозрачно вижу. Иногда хочется опустить, руки, сдаться с отмазкой "не моё...". Удерживает лишь сильный интерес к сфере, который идёт чуть ли не с детства, но созрел реализовываться в ней только в последние года, поняв, наконец в 30+ лет: "кем хочу стать, когда вырасту". Мне нравится сам процесс разработки, решения задач. Может, кому-то даётся легко вхождение в IT, у меня путь гораздо сложнее. Часто теряется вера в себя и возникает ощущение траты времени вникуда. С другой стороны, все специалисты: мидлы, сеньоры - начинали с основ, делая свои ошибки, и стали теми кто они есть благодаря упорству и труду.

Восхождение в WEB разработку. Часть 3 Опыт, Саморазвитие, IT, Web-программирование, Frontend, Создание сайта, Фриланс, Длиннопост

Карьерный рост начинающего специалиста в WEB

Я знаю, что рынок IT перенасыщен джунами, что их чуть ли не сотни или не тысячи на одну вакансию. Спрос на них практически отсутствует, но есть острая... очень острая нехватка мидлов и сеньоров. Вот только между ними и джунами огромная пропасть, которую нужно как-то преодолеть, что крайне сложно. Мне нравится творить, решать алгоритмические задачи, наслаждаться результатом, словно каждое успешное решение является твоим маленьким достижением. Пока не сдаюсь, держусь. Кто знает, останусь ли я одним из тысяч ненужных джунов, а может смогу проявить себя и добиться большего. По крайней мере, у меня пришло осознание моего текущего уровня и того, что я заблуждался, думая, что я больше, чем верстальщик.

А какой у вас был путь в IT? Какие сложности возникали во время восхождения?

Показать полностью 2
[моё] Опыт Саморазвитие IT Web-программирование Frontend Создание сайта Фриланс Длиннопост
0
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии