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

Головоломка. Болты и Гайки

Казуальные, Гиперказуальные, Головоломки

Играть

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

  • CharlotteLink CharlotteLink 1 пост
  • Syslikagronom Syslikagronom 7 постов
  • BydniKydrashki BydniKydrashki 7 постов
Посмотреть весь топ

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

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

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

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

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

Javascript

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

Программирование IT HTML IT юмор Программист Frontend CSS Все
965 постов сначала свежее
ilinartur218
7 месяцев назад

Фронтенд⁠⁠

Подскажите, в коммерческом опыте сейчас вообще может пригодится глубокое знание чистого js?
Выучил язык на начальном уровне, стоит ли лезть глубже, либо пора перейти к фреймворкам, ибо слышал ща них ток все и делается ?
Например, уйти в изучение Реакта, а js подробнее уже учить в процессе работы и тд

Javascript Разработка IT Текст
6
user9626430
user9626430
7 месяцев назад
Серия chatGPT

Клон Flappy Bird за 5 минут с помощью chatGPT на React JS!⁠⁠

Пишу клон игры Flappy Bird с помощью chatGPT и новейшей текстовой модели o1 на React JS!

В ролике:

✔️покажу процесс создания игры

✔️расскажу о сложностях, с которыми я столкнулся

✔️дам пару советов, что бы выжимать из chatGPT максимум

Смотреть на YouTube:

Смотреть в Вк:

Показать полностью 1
[моё] ChatGPT Разработка Javascript Программирование Гайд Flappy Bird IT Айтишники YouTube Видео ВК Технари Видео
0
AlexeyPerfilev
AlexeyPerfilev
7 месяцев назад

Жизнь фронтендера: когда твой код – это искусство, а браузер – холст⁠⁠

Привет, Пикабу! Сегодня я хочу рассказать вам о захватывающем мире фронтенд-разработки. Готовы погрузиться в пучину тегов, стилей и скриптов? Поехали!

1. HTML: скелет нашего цифрового тела

Представьте, что вы скульптор, но вместо глины у вас теги. Каждый <div> – это маленькая вселенная, а <p> – повествование целой истории. А когда вы случайно забываете закрыть тег, это как забыть застегнуть ширинку – вроде работает, но что-то не так.

2. CSS: макияж для вашего сайта

CSS – это как модный журнал для вашего HTML. Хотите, чтобы ваш сайт выглядел как топ-модель на подиуме? Просто добавьте немного flexbox и grid, и вуаля! Хотя иногда CSS больше похож на игру "Угадай, почему этот элемент съехал на 2 пикселя влево".

3. JavaScript: душа вашего сайта

Если HTML – это тело, а CSS – одежда, то JavaScript – это душа вашего сайта. Именно он заставляет всё двигаться, реагировать и иногда падать с криком "Uncaught TypeError". Но когда вы наконец-то заставляете всё работать идеально, чувствуете себя настоящим волшебником!

4. Фреймворки: когда вы устали изобретать велосипед

React, Vue, Angular – выбирайте свой яд. Эти ребята обещают сделать вашу жизнь проще, и они действительно это делают... после 10 часов настройки и 100 ошибок при сборке.

5. Отладка: детективная работа 21 века

Кто сказал, что программисты не детективы? Попробуйте найти ошибку в 1000 строк кода! Это как искать иголку в стоге сена, только стог постоянно меняет форму, а иголка превращается в стог.

Заключение

Быть фронтендером – значит быть немного художником, немного волшебником и чуточку мазохистом. Но когда вы видите, как ваш код оживает в браузере, понимаете – оно того стоило!

А вы, дорогие читатели, сталкивались с миром фронтенд-разработки? Поделитесь своими историями в комментариях!

Показать полностью
[моё] IT Разработка Frontend HTML CSS Javascript Текст
5
3
cododelia
cododelia
7 месяцев назад
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
11
tproger.official
tproger.official
7 месяцев назад
Типичный программист

Когда после TypeScript вернулся к JavaScript:⁠⁠

Когда после TypeScript вернулся к JavaScript:
[моё] IT юмор IT Программирование Программист Javascript
2
4765
siolz12
siolz12
8 месяцев назад
Компьютерные технологии

Трагедия в двух актах⁠⁠

Трагедия в двух актах Юмор, Telegram (ссылка), Javascript, Биполярное расстройство, Психотерапия, Скриншот, X (Twitter)


Подпишитесь на наше сообщество!
Подпишитесь на наш телеграм!

Юмор Telegram (ссылка) Javascript Биполярное расстройство Психотерапия Скриншот X (Twitter)
77
user9626430
user9626430
8 месяцев назад

Создал игру Flappy Bird на React js с помощью chatGPT!⁠⁠

👉🏻Буду рад, если затестите приложение (я оформил все в виде Telegram mini Apps) и дадите обратную связь для исправления ошибок:)

🎮 Играть тут - https://t.me/FlappyBirdGameMiniApp_bot

[моё] Разработка ChatGPT Приложение Javascript Flappy Bird Видео Вертикальное видео
1
3275
WizVoi
WizVoi
8 месяцев назад
IT-юмор

Задумайтесь⁠⁠

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