Максимальное число параллельных запросов

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

К сожалению, серебряной пули здесь нет, но есть различные практики и обходные пути, например:
- Использовать CDN. Подойдет для ассетов, но не для JS кода
- Перейти с HTTP/1.1 на HTTP/2. Самый удобный вариант, но мало кто запаривается с переходом.
- Подходить к code splitting с умом, а не дробить приложение на миллион чанков
- Отдельный лоадер для виджетов, вместо глобального и т.д.

@js_is_easy

В любой непонятной ситуации - думай

По дороге в отпуск наконец-то дочитал книгу Максима Дорофеева «Джедайские техники». Ее мне давно советовали опытные лиды и менеджеры и я долго до нее добирался, а зря.

Из книги я почерпнул много практик и лайфхаков, и структурировал свои знания:

- стал тщательно контролировать «поток входящих» (отписался почти от всех email рассылок и оставил толко самые важные пуши)
- начал тщательнее продумывать названия задач
- упростил и реорганизовал хранение информации и многое другое.

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

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

@js_is_easy

Задача: Количество лазерных лучей в банке

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

В банке активировали защитную систему. Дан двумерный массив bank, представляющий план банка, где 0 означает пустую ячейку, а 1 – ячейку с защитным устройством.

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

- Два устройства находятся на двух разных строках: r1 и r2, где r1 < r2.
- Для каждой строки i, где r1 < i < r2, в i-й строке нет устройств безопасности (т.е. луч всегда идет к устройствам на ближайшей строке).

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

Верните общее количество лазерных лучей в банке.

Пример:
Ввод: ["011001","000000","010100","001000"]
Вывод: 8
Объяснение: Между каждой из следующих пар устройств проходит луч. Всего получается 8 лучей:
* bank[0][1] -- bank[2][1]
* bank[0][1] -- bank[2][3]
* bank[0][2] -- bank[2][1]
* bank[0][2] -- bank[2][3]
* bank[0][5] -- bank[2][1]
* bank[0][5] -- bank[2][3]
* bank[2][1] -- bank[3][2]
* bank[2][3] -- bank[3][2]
Обратите внимание, что между устройствами на 0-й и 3-й строках нет лучей, потому что на 2-й строке есть устройства безопасности, что нарушает второе условие.

Больше примеров и ответ с разбором: https://telegra.ph/Kolichestvo-lazernyh-luchej-v-banke-07-12

#algorithms

@js_is_easy

Заголовки в CORS запросах

Если вручную открыть вкладку “Сети” в браузере, то вы увидите все хэдеры запроса, а вот дотянуться из JS получится не до всех. Это ограничение существует из соображений безопасности [хорошая статья про корсы].

По умолчанию, для CORS запросов из браузера доступны следующие хэдеры:

- Cache-Control
- Content-Language
- Content-Type
- Expires
- Last-Modified
- Pragma
До других из JS вы просто так не дотянетесь.

Если вам нужен какой-то другой – попросите бэкендеров или девопсов добавить следующий хэдер на сервере
Access-Control-Expose-Headers: Header-Name-1, Header-Name-2

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

@js_is_easy

Как 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
Сохрани. Пройди свой путь в своём темпе. Главное - начни.