Как CSS стили могут мешать клику по кнопке

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

Проблема нашлась в неожиданном месте: CSS стили. Через вложенный селектор на кнопку был повешен pointer-events: none. Даже не думал искать проблему в стилях, т.к. считал что pointer-events влияет только на CSS стили типа hover и cursor, оказывается он отрубает все target события элементов даже для JS

@js_is_easy

Важность package-lock.json файла 🔓

Замечаю, что даже опытные разработчики иногда не уделяют должного внимания package-lock.json файлу: либо просто не коммитят его после изменения зависимостей, либо коммитят все подряд и даже не обращают внимания на содержимое. Оба пути ведут к проблемам.

Если после изменения зависимостей в package.json не закоммитить lock файл, то могут начаться проблемы с CI и билдом, т.к. зачастую, автоматизированные среды устанавливают зависимости через npm ci , а эта команда работает только с lock файлом.

Если же вы видите в гите кучу изменений в package-lock.json файле, и при этом, вы вообще не трогали package.json, то это – серьезный повод задуматься. Частая причина – это разные версии node.js и npm, обратите внимание на lockfileVersion в lock файле.

Разные package-lock.json файлы могут вести к мелким, но не всегда очевидным проблемам. Например, если установить зависимости с версией npm, отличной от проектной, то автоматически будут установлены самые свежие пакеты, удовлетворяющие зависимостям в package.json файле. А это может привести к тому, что у вашего коллеги появится баг, а у вас нет.

Не забывайте про package-lock.json, когда меняете зависимости.

@js_is_easy

Итоги прошлого года (с “небольшим” делеем) и цели на текущий

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

В свободное время часто думал над векторами развития, целями, и планами на контент, и пришел к следующему:

- Сделать канал “официально” авторским (имени меня, конечно). В самом начале я делал контент обезличенно. Но такой формат и мне наскучил, и не особо заходил аудитории. Далее я стал разбавлять посты своим мнением, но планку публичности в виде “личного бренда” так и не смог перешагнуть психологически. Тогда мне это казалось действительно большим и смелым шагом
- Нужно расширять кругозор и реагировать на происходящее в IT в целом, а не только зарываться в реакте и нюансах фронта
- Не гнаться за количеством, а сделать упор на качество. То есть, делать посты, когда реально вижу в них ценность, а не: “ну чот давно не писал, разберу-ка алгосик из чувства долга”
- Основной темой канала остается программирование. Лайфстайл фоток из качалки или басика, к вашему сожалению, пока не планируется
- Хочу передавать свои знания, и уже начал менторить. В целом, полет нормальный. Планирую черпать идеи для контента из этой сферы. Если кому интересно - подробности тут
- Запланировал создать бесплатный и открытый роадмап с проектами по React с различной сложностью и актуальными технологиями
- Ну, и последняя, но не менее важная, цель: начать развивать Youtube канал. Идеи для первых видео есть, следующий шаг – написание сценария

P.S. Мне по-прежнему не впадлу ответить на ваш вопрос в личке или комментах, поэтому не стесняйтесь😉

Алоха, друзья!

Последнее время трудился над своим первым роликом на YouTube. Вот что получилось: Ускоряем разработку в WebStorm. Конструктивная критика приветствуется 🙂

Материалы, которые обещал в видео:
🗃 Шаблоны
🤖 JS генератор

Те, кто со мной общался, знают что я любитель вебшторма, поэтому тема нарисовалась сама собой. Изначально хотел сделать статью, но потом решил, что это хорошее начало для YouTube.

#js #javascript #webstorm

Вчера вечером было немого скучно и я решил залезть внутрь хомяка (прости госпади)

В топе интернетов по запросу типа “открыть Hamster Kombat с компа” рекомендации с подменой оригинального telegram-web-app.js на пропатченый скрипт. Что как бы совсем не безопасно.

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

1. Заходим в ТГ в Хроме https://web.telegram.org/
2. Открываем инструменты разработчика (F12)
3. Выбираем чат с ботом и запускаем игру
4. Открываем вкладку Sources (Источники)
5. Слева в папках ищем top → clicker → hamsterkombat.io → js → telegram-web-app.js
6. Ищем return webAppPlatform; на 1797 строке и заменяем на return 'android';
7 Нажимаем правой кнопки мыши по telegram-web-app.js и выбираем Override content (Перезаписать контент)
8. Выбираем папку, в которую сохраним пропатченный скрипт
9. Разрешаем браузеру чтение скрипта (если спрашивает)
10. Сохраняем изменения с помощью ctrl + s
11. PROFIT! Переоткрываем игру и гоняем хомячка на компутере

📼 Видеогайд тут

Но этого мне показалось мало и я еще сделал пару скриптов
📊 Аналитика выгодных покупок
🤖 Рандомный автокликер

Энджой

Почему бы и нет https://t.iss.one/hamstEr_kombat_bot/start?startapp=kentId294802260

P.S. я особо не питаю надежд по заработку в хомяке, но если кому-то нравится тапать по грызуну, то почему это хуже просмотра рилсов?

#js #javascript

Не думал, что реверс инженеринг меня затянет

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

Одной из проблем был перехвтат запросов, точнее, их прослушка. Нужно было реагировать на ответ конкретных урлов. Решение для меня оказалось не очевидным и тривильным одновременно: манкипатч. Я переопределил нативный fetch и добавил в него прослушку ответов с нужным мне колбэком.

const originalFetch = window.fetch;

window.fetch = function () {
  const args = arguments;

  return originalFetch.apply(this, args).then(function (response) {
    const clone = response.clone();

    clone.json().then(function (json) {
      // Логика здесь
    });

    return response;
  });
};

Какая тут мораль? Очередное напоминание о несовершенстве JS. Любая сторонняя либа может проманкипатчить добавить полифил нативного метода. И не факт, что это будет что-то безобидное. Всегда смотрите исходник тех самых библиотек с 500 скачиваниями, которые спасают вас от горящих сроков. Ну, и проверяйте, что вставляете в консоль браузера, конечно.

Пару хороших статей на тему:
- Хороший плохой манкипатчинг
- Проверяем, есть ли у нативной JavaScript‑функции манкипатч

Шорткаты и автоматизации в iphone

Кстати, вдогонку к VPN. На айфоне есть такая штука как Команды (Shortcuts). Я настроил их под ВПН и добавил автоматизации. Теперь при открытии браузера с чатГПТ или инсты, у меня автоматически включается ВПН, а при закрытии –отключается. Все работает бесшовно.

Если коротко:
1. Создаем шорткат на включение ВПН
2. Создаем шорткат на выключение ВПН
3. Заходим на вкладку Автоматизации
4. Создаем сценарий: при открытии приложения X запустить шоркат с включением
5. Аналогичный сценарий для выключения

В целом, настройка интуитивно понятна, но на всякий случай статья с подробным гайдом: https://blog.vpntracker.com/how-to-set-up-ios-shortcuts-for-vpn/

P.S. Шорткаты можно прикрутить для любого VPN, даже к некоторым бесплатным

Эмоциональный интеллект

Елена Логачева пригласила меня на эфир по Эмоциональному Интеллекту.
Будем обсуждать способы повышения продуктивности, адаптации к стрессу и эмоции айтишников

Эфир сегодня в 18:00 по МСК
https://t.iss.one/LogachevaEQ/1797

Буду ждать вас 🙂

Последние посты сами подтолкнули к теме видео, препарировал несколько приложений в Телеграм и наглядно показал как несовершенна защита на стороне клиента

Материалы к видео
🔨 Как открыть приложения Telegram в браузере?

Конструктивная критика приветствуется 🙂

#js #javascript #web

Обход “замедлений” YouTube

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

Перед установкой утилит по обходу DPI попробуйте просто выключить или включить флаг TLS 1.3 hybridized Kyber support в браузере. Страницу с флагами можно открыть по адресу chrome://flags/ (если у вас другой браузер на движке Хрома, то замените chrome на имя своего браузера). Для меня сработало, но зависит от провайдера.

Если переключение флага не помогло, можно воспользоваться GoodbyeDPI для Windows или SpoofDPI для Linux и macOS.

Используя SpoofDPI я столкнулся с парой проблем:
1. В доке (на данный момент) неточность. В файл оболочки нужно добавлять строку export PATH=$PATH:~/.spoof-dpi/bin/**spoof-dpi**
2. Он конфликтует с моим десктопным VPN, о котором я рассказывал здесь, если запустить обе программы, то сайты просто не открываются. Стабильного решения я не нашел, но если сначала запустить утилиту со следующими флагами spoof-dpi -pattern googlevideo.com -enable-doh, а потом подключиться к VPN, то конфликты пропадают. Способ иногда дает сбои, приходится переоткрывать вкладку с Ютюбом, с остальными сайтами все норм. У GoodbyeDPI есть флаг аналогичный -pattern, называется --blacklist, но я его не тестил

P.S. я не на что не намекаю, но можете тестировать работу Ютюба на этом видео https://youtu.be/nQWpfj4DZuU 😉

Сначала заплати себе

Эту фразу я слышал из каждого утюга, когда осваивал основы финансовой грамотности. Но сегодня – не о деньгах, а о времени.

В сутках 24 часа, но с точки зрения производительности каждый следующий час менее эффективен. Силы не бесконечны. Разгрузив камаз кирпичей днем, вряд ли, останутся силы, чтобы прикрутить полку дома вечером, да и желание тоже. Так и будет она валяться неделями, пока не совпадёт хорошее настроение и свободное время, а еще, к ней прибавится список новый "мелочей", которые тоже нужно как-нибудь сделать.

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

А что если попробовать наоборот? Решение не самое приятное и комфортное –просыпаться раньше. Именно с утра можно «заплатить себе»: потратить свежую энергию на свои задачи, а не чужие. Это могут быть любые дела: от прикрученной полки до главы книги, от утренней медитации до пары задач по программированию.

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

Бонусом, меньше залипаешь в соцсетях, т.к. все еще спят. Друг не отвлечет мемами про котиков.
Но соцсети и FOMO уже тема для отдельного поста.

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

А несколько лет назад, когда рабочий график был жёстче, я вообще пару месяцев вставал в 4 утра, чтобы успеть поработать над своим проектом до начала рабочего дня) Было непросто, но оно того стоило.

А какие у вас лайфхаки повышения продуктивности?

Видео прохождения проекта Резюме героя уже на канале

Смотреть — https://www.youtube.com

#html #css #web

Ты слишком стар для IT

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

Что реально меняется с возрастом?
Да, скорость реакции падает, и оперативка ака кратковременная память уже не та, но...

- Долговременная память всё ещё держит удар.
- Жизненный опыт компенсирует пробуксовки.
- А мозг? Он пластичен. Даже в преклонные годы способен на трюки.

Почему взрослым сложнее решиться?
Да всё просто: жизнь поджимает.
Работа, семья, кредит, собака, страх облажаться - всё в комплекте.
А самое главное - после универа нужда учиться отпадает. Работаешь работу на автомате и идешь отдыхать.
Мышца обучения со временем атрофируется.

Но и плюсы солидные:
- Понимаешь, зачем тебе это вообще.
- Умеешь не распыляться, а планировать.
- И у тебя за плечами уже не один взлёт и падение. Это стоит многого.

Как учиться, когда уже не молод?
Фокус не на вызубрить, а на применить. Взрослым важно видеть: вот задача - вот навык - вот результат.
Так что:
- Поставь цель по SMART методологии
- Подбирай удобный формат (видео, интерактив, хоть рисунки на салфетке). Это добавит вовлечённости. Без неё мозг включает режим экономии

Расскажи в каком возрасте ты начал вкатываться в IT и с какими трудностями столкнулся?

P.S. Если захотелось попробовать своим силы, то напоминаю, что у меня есть бесплатный интерактивный роадмап по React и фронтенду
👉 ospens.github.io/react-roadmap
Сохрани. Пройди свой путь в своём темпе. Главное - начни.