14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Ваша карьера в Frontend-разработке начинается в Авито 😎
Приходите на оплачиваемую стажировку в Авито. Здесь вы будете работать с продуктами, которыми пользуются миллионы.
Профессионально развиваться и расти вам помогут:
• наставник — научит, как найти лучшее решение, и поможет разобраться в инструментах и технологиях
• комьюнити стажёров — поделятся опытом и поддержат
• доступ к базам знаний, библиотекам и корпоративным курсам — даст возможность нарастить экспертизу.
Стажировка открыта в пяти направлениях, вы можете выбрать два — основное и запасное. Если попасть на первое не удастся, сможете пройти отбор на второе при наличии мест.
Условия:
• длительность программы — 6 месяцев
• работа от 25 часов в неделю, после завершения стажировки — возможность остаться в компании на полную занятость
• зарплата и корпоративный ноутбук
• можно работать из офиса, удалённо или в гибридном формате.
Более 80% стажёров продолжают карьеру в Авито. Присоединяйтесь к команде и растите вместе с нами! Регистрация открыта до 5 февраля.
Программист - самая востребованная профессия в 2025!
Тогда почему ты опять не получил оффер?
Пока ты боишься говорить о деньгах и мямлишь про свой опыт, кто-то другой занял твое место. Чтобы HR выстраивались в очередь, приходи на лекцию от команды FAANG School.
Отдаем бесплатно то, что продают за бешенные деньги на карьерных консультациях.
- увидишь, как HR собеседует программиста в прямом эфире
- поймешь, как отвечать на неудобные вопросы про зарплату
- разберешь частые ошибки начинающих на собесах
- научишься представлять предыдущий опыт
- узнаешь, как говорить о своих сильных сторонах без пафоса
- поймешь, что нужно спросить у HR, чтобы понять уровень компании
Заберешь пошаговый план прохождения всех этапов интервью, с которым у тебя больше не будет отказов.
Приходи на эфир, чтобы выделяться среди конкурентов и самому выбирать офферы.
#красивое дня
Угадайте, что красиво летит по небу и укладывается в 249 символов?
Правильно, SpaceX Starship!
Не, ну правда:
vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));
Фронтенд с юмором — это "Frontline" 💻😂
Ты кодишь, но не забываешь смеяться? Тогда заходи к нам, тимлид фронтенда рассказывает про все что связано с web-разработкой и не забывает запостить смешных мемасов.
На Frontline соединяются профессионализм и веселье в мире веб-разработки.
Здесь ты найдешь:
👨💻 Гайды и советы по HTML, CSS, JavaScript и популярным фреймворкам.
😂 Мемы и шутки про будни разработчика — потому что смех это тоже часть работы!
🔥 Новости и тренды в веб-разработке — чтобы быть на шаг впереди.
💬 Обсуждения и обмен опытом с коллегами по цеху.
🎉 Вдохновение и мотивация — ведь кодить можно с улыбкой (даже на javascript)
🔗 Присоединяйся и и будь в курсе фронтенд-новинок, не забывая про отличное настроение 🚀
#реальноклассныйканал
#штука дня
Я тут случайно купил... робота :)
Зашел с ребенком в комиссионный магазин (мы тут их называем кирпушниками) в поисках интересных компакт-дисков и запчастей к конструктору дочки, а вышел с роботом. За десятку евро.
Называется Edison.
Естественно, это достаточно простой робот для обучения в школах. На борту датчики света, звука, столкновения, пара колес, детектор линии. Музыку может играть, простым синтезатором мелодий. Присутствует ИК-приёмопередатчик, можно телевизор включать, или управлять роботом с пульта от того же телевизора.
Программируется или в Scratch-подобной среде программирования, или на Python.
Протестировали демки обхода препятствий, дочь в восторге. В её три года она, конечно же, пока не может понять, как его программировать. Но много ли надо, чтобы впечатлить? :)
Заодно, совместим с Лего! Можно построить башенный кран... А самые крутые применения начинаются с объединения двух и более роботов.
В общем, норм улов, я считаю. Для ознакомления просто идеально.
Учим использовать ChatGPT и Giga во Frontend-разработке.
Даём рабочие способы получать клиентов на разработку даже без опыта.
Помогаем пройти практику, на которой ты пройдёшь все этапы разработки с нуля до готового сайта на хостинге.
Помогаем перейти на фриланс в течение пары месяцев с доходом от 1000$/мес.
👉 Приходи на бесплатное обучение и зови с собой друзей
🔥 С 2019 стабильно помогаем с обучением, практикой и зарабатывать на фрилансе.
#такое дня
Я тут взялся оптимизировать один проект на Wordpress, с целью вывести его в зелёную зону производительности по Lighthouse. Ну и попутно гляжу, а что там в остальных пунктах, включая доступность.
И вот увиденное меня, конечно, выбесило страшно. Давайте посмотрим на иллюстрации: даже на маленьком превью я вижу, что белый текст на оранжевом фоне прекрасно читается, а чёрный на оранжевом — нет.
При этом, алгоритмы Lighthouse считают строго наоборот! А ведь по ним ещё и сайты ранжируются!
Итак, что и где пошло не так?
Всё это тянется с тех времён, когда в 2008 году был принят стандарт WCAG 2.0. Его алгоритм расчёта контраста строится на математике 70-х годов, где главную роль играет относительная яркость цветов (luminance). Тогда это было шагом вперёд: хоть какие-то правила, чтобы шрифт не «терялся» на фоне.
Но время шло, мониторы и технологии развивались, а WCAG остался в прошлом. Он игнорирует такие вещи, как:
• Как мы реально воспринимаем цвета, а не просто их яркость.
• Контрастность цветных пар (жёлтый на чёрном и жёлтый на белом — это не одно и то же для глаз).
• Размер шрифта и его жирность.
В результате мы получаем абсурдные ситуации, когда по формуле WCAG «хороший» текст читается хуже «плохого».
Что же делать?
APCA (Advanced Perceptual Contrast Algorithm) — это новый подход, разработанный Эндрю Соммерсом, чтобы учитывать, как цвета воспринимаются глазами и мозгом. Вместо абстрактных чисел яркости он опирается на физиологию зрения:
• Фон влияет сильнее, чем текст, особенно при высокой яркости.
• Тонкие шрифты требуют большего контраста, чем жирные.
• Цвета воспринимаются по-разному в зависимости от их оттенков.
Пример с оранжевым фоном тут показателен. APCA понимает, что белый текст будет лучше читаться, потому что яркость фона создаёт комфортный контраст. А вот чёрный на оранжевом — слишком резкий, утомляет глаза.
Зачем нам это?
Если мы хотим делать интерфейсы, которые действительно удобны для пользователей, пора перестать слепо следовать устаревшим стандартам. Да, WCAG 2.x пока является нормой, но APCA — это будущее, и уже сейчас его можно использовать, чтобы проекты выглядели лучше и удобнее.
Ну и, конечно, здравый смысл никто не отменял. Алгоритмы алгоритмами, а если текст читается плохо — значит, что-то идёт не так.
Ваши мысли? Что для вас важнее: пройти проверку или сделать текст комфортным для глаз? 👀👇
#a11y
#инструмент дня
Я вот просто оставлю это здесь и не буду говорить, сколько попыток у меня заняло прохождение, ок? :)
Вообще, конечно, максимально угарная тема. DOOM-Captcha! Когда хорошему разработчику делать нечего — он DOOM портирует.
Сразу ссылка для нетерпеливых: https://doom-captcha.vercel.app/
Ну и на GitHub: https://github.com/rauchg/doom-captcha
Скомпилировано из C в WebAssembly с помощью Emscripten. Ну, кто первый добавит возможность управления не только стрелочками, но и WASD, котаны?
#doom
#инструмент дня
Несколько часов превратились в пару дней. Новый год, а что вы хотели.
Итак, мы остановились на том что конкуренты писали свой проект на React Native, с говорящим за себя файлом main.jsbundle.
И тут начинается самое интересное: этот бандл может оказаться как просто минифицированным JS-кодом, так и... байт-кодом Hermes!
Немного истории: React Native начинался с движка JSC aka JavaScriptCore. Но в Facebook решили, что производительности его JIT для замены нативных приложений явно недостаточно, и с 2019 года предложили альтернативу: виртуальную машину Hermes, в код которой и собирается ваш JavaScript.
Это ускоряет запуск приложений, особенно больших. В статье по ссылке много интересных подробностей.
Первым делом убеждаемся, что это именно Hermes:
$ file main.jsbundle
main.jsbundle: Hermes JavaScript bytecode, version 96
$ git clone git@github.com:P1sec/hermes-dec.git
$ cd hermes-dec/
$ python3 setup.py install
python-installtools. Впрочем, это быстро решается через brew. Едем дальше, дизассемблируем: ms.channel.emit и передаются данные: {'data': '', 'event': 'ed.installedApp.get', 'to': 'host'}.data должна быть null, где-то — пустой объект или строка. Поиски нужных комбинаций откровенно раздражают.sendGetAppIcon, который тоже виден на скриншоте. И до меня дошло: они реально отправляют запрос на список всех приложений, а потом — бомбят телевизор запросами об иконках. Не самый оптимальный способ получения информации, но другого нет.
$ python3 hbc_decompiler.py ../../main.jsbundle main.js
r4 = function() { // Original name: sendGetInstalledApps, environment: r3
r0 = global;
r2 = r0.JSON;
r1 = r2.stringify;
r0 = {};
r3 = 'ms.channel.emit';
r0['method'] = r3;
r3 = {'data': '', 'event': 'ed.installedApp.get', 'to': 'host'};
r0['params'] = r3;
r2 = r1.bind(r2)(r0);
r1 = _closure1_slot4;
r0 = r1.send;
r0 = r0.bind(r1)(r2);
r0 = undefined;
return r0;
};
🥷🏻 Привет, я Лёша Истомин, фронтенд разработчик, который топит за производительность и доступность сайтов.
——• 📗 Что полезного на канале?
👉🏻 7 постов, которые важно прочитать каждому, кто ищет работу *смотреть*
👉🏻 Разбор моего пути в IT, собрал все ошибки построения карьеры за тебя *читать*
👉🏻 Рассказываю куда можно развиваться программисту с опытом *читать*
👉🏻 Напоминаю как не застревать на грейдах *читать*
👉🏻 Что обязательно должен прочитать каждый уважающий себя фронтендер *смотреть*
Больше в канале
#статья дня
Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: /channel/htmlshit/1580
Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.
А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)
Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?
Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d
Ну, точнее, линейная алгебра.
Есть перевод на русский: https://habr.com/ru/articles/870462/
Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.
#svg #math #matrix #transform
#фишка дня
Сейчас в CSS присутствует 54 разных единицы измерения (units).
Пятьдесят четыре!
А ты до сих пор используешь одни только пиксели aka px.
Так вот, используя единицу измерения lh — привязанную к line-height — и свойство background-clip, можно, например, красиво подсветить нужное число строк в любом тексте.
Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV
Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.
А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/
На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk
Он, кстати, автор диаграммы.
В общем, просыпаемся, котаны. Будущее здесь.
#css #rem #lh #vh #measure #бородач
#инструмент дня
Лучший API — это тот, который не пришлось писать самому! Потому так популярны и фреймворки, и сервисы вроде Firebase.
Но если охота чуть больше контроля над базой данных и своими ресурсами вообще, а писать код всё ещё неохота, рекомендую взглянуть на PostgREST. Это инструмент, который превращает вашу базу данных в полноценный REST API.
Почему это круто?
Мгновенный API Не нужно писать кучу эндпоинтов — PostgREST автоматически генерирует их на основе структуры вашей базы данных.
SQL вместо ORM Работаете напрямую с SQL-запросами, что дает максимальную гибкость и контроль над данными.
Авторизация и безопасность PostgREST использует роли PostgreSQL для управления доступом, избавляя от необходимости вручную прописывать логику авторизации. А процессы аутентификации и авторизации выстроены вокруг JWT.
Производительность Оптимизирован для работы с большими объемами данных, включая фильтрацию, пагинацию и сортировку.
Легкая интеграция
Подходит как для простых CRUD-операций, так и для сложной бизнес-логики через SQL-вьюхи или хранимые процедуры.
Возможно, он не решит всех проблем, но уж точно можно будет сильно сократить время разработки.
#postgres #api #service
Три вопроса
А бывало ли у вас такое, что обычный скрам превращался в настоящий стендап? Расскажу одну историю, чтобы поднять вам настроение.
Когда-то меня пригласили в стартап на должность CTO. К тому моменту MVP уже было запущено подрядчиком, продукт доказал свою состоятельность, и стейкхолдеры решили перенести разработку в in-house. В команде тогда уже было пять разработчиков, а руководил процессом CIO, который знал о скраме ровно одно — в 11:00 каждый день надо проводить дейли митинг и задавать три вопроса: Что делал? Что будешь делать? Что мешает?
Как-то раз, спустя пару недель после моего вступления в должность, я начал замечать странную закономерность. Две недели подряд по четвергам разные разработчики рассказывали… скажем так, про довольно странные задачи, даже прямо — несли лютую дичь. Причём никто из присутствующих, включая CIO, не замечал подвоха. В первый раз я решил, что, возможно, чего-то не понял. Во второй — стало интересно, но я всё же промолчал.
Позже, за закрытыми дверями, я выяснил, в чём секрет. Оказывается, это был командный внутряк! По четвергам ребята тянули жребий. Тот, кому «выпадала честь», должен был с максимально невозмутимым лицом залечить самую абсурдную задачу так, чтобы CIO ничего не заподозрил. Но главное правило — не рассмеяться самому.
Кстати, CIO никогда не замечал подвоха, а вот команда еле сдерживалась. После каждого такого дейлика разработчики с красными лицами пулей вылетали из кабинета под предлогом «срочных дел».
Мораль? Методология — это всегда больше, чем три вопроса. Если вы не понимаете сути инструмента, то ни о какой эффективности речи быть не может, а ваша команда обязательно найдёт способ это обойти — хоть иногда и с юмором.
#leadership #growth #creativity #story
Реклама. Логач А.В. ИНН 504809395120. erid: LjN8KadaE
#фишка дня
Надоело читать это: «To push the current branch and set the remote as upstream, usegit push --set-upstream origin fix/bug-1359»?
А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.
Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote
Ну или просто взгляните на КДПВ.
Завезли с версии 2.37.0, так что проверьте сначала. Спасибо за уточнение подписчику :)
#git #remote #бородач
#расширение дня
Что-то, как вы видите, тяжело мне январь даётся. Но не сдаёмся!
Писать e2e-тесты — важная часть разработки. Но иногда кажется, что бакенд специально делает все, чтобы их невозможно было подготовить:
😡 спека меняется на лету
🤬 методы недописаны
👿 половина API не работает или вообще отсутствует.
В итоге время тратится не на разработку, а на попытки договориться с сервером.
Чтобы не зависеть от нестабильного бекенда и вообще спокойно продолжать разработку, можно использовать такие инструменты, как Requestly.
Это расширение для браузера, которое позволяет подменять запросы и ответы, редактировать заголовки или даже подгружать локальные данные вместо серверных.
Например, можно настроить подмену API-ответов на заранее подготовленные JSON’ы. Это помогает проверить логику приложения и писать тесты, даже если реальный сервер недоступен или работает нестабильно.
Обратите внимание, что расширение работает на подмене ответа уже после выполнения запроса, поэтому во вкладке Network структура останется неизменной.
Инструмент полезен не только для тестирования, но и в повседневной разработке — особенно когда работаешь с командой, где бакенд часто не успевает за фронтом.
А какие у вас способы справляться с подобными проблемами?
#api #extention #chrome
#инструмент дня
Вы знаете мою любовь к странным браузерам. Мы с вами запускали и Midori, чтобы отлаживать баги Safari/WebKit в Linux и Windows, и Ladybird, и Servo.
И если последние два сравнительно современные проекты, которые заодно ещё и получают мощное финансирование со стороны разных организаций, хотелось бы напомнить, что есть ещё смелые люди.
Например — браузер Dillo, которому недавно исполнилось 25 лет. Наверное, за 25 лет его научили всем трюкам?
Ну, вообще, нет. Да и цели такой не стояло. Пишется он по большей части для развлечения и некого... гуманитарного аспекта. Чтобы люди со слабыми машинами и соединением могли ту же википедию почитать. Ну или в виртуалке запустить документацию, в условиях ограниченных ресурсов.
Тем не менее, в честь 25 летия автор выпустил обновление — Dillo 3.2, в котором браузер научили поддержке webp, SVG, MathML, зуму через Ctrl+. И даже CSS-единицам вроде ch, rem, vw, vh, vmin, vmax.
С одной стороны, конечно, возникает логичный вопрос: «Кому это нужно-то вообще?», с другой — какое-то сообщество вокруг браузера сфомировано, люди пробуют свои силы в чём-то новом. Патч в Chrome вряд ли просто так зашлёшь, а в Dillo или Ladybird — почему бы и нет. Отличный дипломный проект, в том числе.
Ваши мнения, котаны?
#browser #engine #dillo
#инструмент дня
Кому адекватной современной виртуализации списков?
Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.
В других фреймворках и ванильных средах ситуация ещё веселее.
При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.
Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.
Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.
GitHub: https://github.com/inokawa/virtua
Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.
Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.
Отличное современное решение.
#scroll #virtual
#заметка дня
Electron.js, Tauri, ProtonShell, да сотни их. Всё это — средства разработки desktop-приложений на JavaScript/TypeScript и иже с ними. Где-то справедливо, где-то — не очень — критикуемы. Какие-то из них используют биндинги к нативным виджетам системы, какие-то — к Wx, Qt или GTK.
А что если я вам скажу, что есть среда, в которой JavaScript приложения — новая норма?
И это, внезапно, GNOME. Тот самый, что по дефолту в Ubuntu, Fedora, openSUSE Linux.
Изначально, движок JavaScript в GNOME — GJS — задумывался для расширений GNOME Shell, собственно, среды рабочего стола. Основан он на SpiderMonkey, движке из Firefox.
Путь GJS как движка для разработки приложений, а не только расширений, был достаточно тернист, но в итоге мы получили мощное средство разработки UI, вытесняющее даже изначально придуманный для этого язык Vala.
Естественно, интерфейс рисуется не веб-технологиями. Присутстсвуют биндинги к GTK и, естественно, libadwaita.
Последнее это не просто библиотека, содержащая дефолтную тему GTK для GNOME, но целая определяющая поведение виджетов среда. Что-то, что делает гном — гномом, пусть многим это и не всегда нравится.
И вот одним из последних приобретений списка дефолтных приложений GNOME стал аудиоплеер Decibels: https://gitlab.gnome.org/GNOME/decibels
Если вам хочется вообще выйти за рамки веба, оторваться от React и попробовать свои силы в чём-то максимально близком к нативной разработке, при этом, без изучения нового языка, то разработка приложений для GNOME вполне может стать началом чего-то интересного.
Вот, например, шаблон: https://gitlab.gnome.org/World/javascript/gnome-typescript-template
А тут есть история разработчика, который портировал приложение Диктофон: https://blogs.gnome.org/christopherdavis/2022/08/25/trying-typescript-for-gnome-apps/
Иногда бывает полезно выскочить из привычной среды. Пробуем, котаны?
#gtk #linux #gnome
#инструмент дня
Устал подбирать фавиконку для проекта? Постоянно забываешь, что нужно прописать миллион строк под каждое устройство?
Say no more! Просто используй эмодзи!
Вашему вниманию, проект emojico: https://github.com/threepointone/emojico
Запускаем npx emojico 🚀 --out ./icons и на выходе получаем все нужные размеры под все возможные устройства.
Вот так вот легко и просто. Ну это при условии, конечно, что вас не раздражают эмодзи :)
А всем остальным могу напомнить, что так-то обязательно иметь только favicon.ico, который на самом деле может быть замаскированным PNG. Не всем сайтам нужна поддержка PWA и красивые закладки.
Но вдруг.
P. S. Ну или использовать сервисы вроде https://favicomatic.com/, с любой картинкой.
#favicon #emoji
#такое дня
На правах субботнего бреда, не более того.
Помните, когда только начали появляться первые принципы адаптивного дизайна, ходил популярный мем про адаптивную змею?
Нет? Ну вот, напомню: https://www.reddit.com/r/ProgrammerHumor/comments/vqb2l2/responsive_snake/
Дизайнеру Анатолию Зенкову этого показалось мало! И... вашему вниманию — адаптивный доллар!
Вот: https://anatolyzenkov.com/resizabill
Максимально ненужно, но в этом же и суть! Да и, на самом деле, это отличный пример для многих разработчиков и дизайнеров, которые плохо понимают, что и как вообще можно адаптировать.
#adaptive #design
👎🏼 Все время просиживать за работой, общаться только с коллегами и начальником
👍🏼 Посещать IT-мероприятия, перенимать опыт гигантов индустрии, попасть в комьюнити лучших спецов
Все твои коллеги уже давно подписались на канал IT-мероприятия России и получают самые актуальные анонсы онлайн и оффлайн событий.
— Форумы и конференции
— Митапы и вебинары
— Хакатоны и олимпиады
Присоединяйся и выбирай, что тебе интересно - в канале /channel/iteventsrus собраны только лучшие мероприятия для тех, кто хочет быть лучшим из лучших.
IT мероприятия России / ITMeeting / IT events
Ну как там там, не забыли на своих сайтах год поменять? 😁️️️️️️
Читать полностью…
#инструмент дня
Когда вы последний раз дизассемблировали React Native приложение?
А я вчера.
Вот так вот решил закончить череду постов этото года лёгким хардкором. На полшишечки.
Давайте по порядку. Как вы все, должно быть, помните, я уже довольно давно пишу свой пульт для телевизора Samsung на Flutter.
Почему Samsung? Ну потому что он дома стоит.
И да, хоть это всё и происходит крайне медленно, минимальный набор функций имеется. Я постоянно им пользуюсь, когда нужно что-то переключить ребёнку или мне, а настоящий пульт искать лень.
Но у пары конкурентных приложений были функции, которые кажутся весьма уместными. И речь даже не о DLNA-стриминге фотографий и видео с телефона на телевизор, это-то как раз понятно и хорошо документированно.
А вот, например, такая простая штука, как получение списка всех приложений. Ну или, например, иные методы поиска телевизоров. В моём-то приложении список приложений и иконок к ним тупо захардкожен.
И не сказать, что я их не знаю — в начале разработки провёл огромную работу по поиску нужных API, но руки всё равно чесались.
И тут очень к месту пришлась возможность использования приложений для iPhone на макбуках с м-процессорами. Запускаешь приложение параллельно с Wireshark и мониторишь запросы. Очень удобно (на иллюстрации).
Но я не учёл такой простой вещи, как шифрование.
Да-да, практически все вебсокет-запросы оказались зашифрованы протоколом TLS 1.2 (wss://).
Кто бы мог подумать, а. Ведь я сам обходил это в своей имплементации: сертификаты на телевизорах свои, и, зачастую, протухшие давно.
Пусть это и не самый надёжный в 2024 году протокол, но всё же опыта расшифровки у меня нет. На самом-то деле в телевизорах есть и несекьюрные API, позволяющие даже запустить приложение, но они не всегда доступны без dev-режима. Да и нужного среди них не оказалось. А я так надеялся, что есть что-то простое.
Впрочем, строки поиска SSDP я себе выписал. LG, ты следующий.
Итак, но приложение же вот оно, лежит в каталоге Applications. А это что значит?
А это значит, можно посмотреть содержимое пакета! Да, если вы не знали, приложения в macOS и iOS (и на Android) это, по факту, просто архив.
Распаковав, я обнаружил подозрительный каталог node_modules и нечто под названием main.jsbundle.
Надо же, самый крутой конкурент оказался ни чем иным, как приложением на React Native!
А что я с ним делал дальше — напишу через несколько часов, иначе как-то длинно получается. Оставайтесь на связи :)
#remote #flutter #reactnative
#codepen дня
Что-то у меня чувство, что я с линейной алгеброй да на 29 декабря малость переборщил...
Давайте я вам две новогодние ёлочки, а вы мне всё простите?
🎄 Ксения Кондрашова подарила нам интерактивную ёлку на Three.js, вынесена в иллюстрацию: https://codepen.io/ksenia-k/pen/yyBYVyd
🎄 А Ана Тюдор — на чистом CSS: https://codepen.io/thebabydino/pen/bGwYVOm
На стороне какой ёлки вы?
#3d #threejs
Что ж, котаны. Пока я тут устраиваю себе некоторый отпуск, пришло время поблагодарить всех вас за то, что вы со мной и были со мной всё это время.
Особенно тех, кто посты читает
С наступающим Новым годом! Больше постов совсем скоро :)
К слову, вот тот самый популярный пост: /channel/htmlshit/3049
Го залетать сразу на мидла от 1500$ в месяц 🚀
✅ Где взять опыт в резюме
✅ Как учиться сразу на фреймворке с нуля и не терять время
✅ Как пройти собес и показать себя опытным программистом
✅ Как оформить резюме грамотно и пройти фильтры рекрутеров
✅ Как выбрать стек где нет конкуренции и залететь за пару собесов
Меня зовут Ильнур Ряжапов, я за два года стал SENIOR FRONTEND DEVELOPER (моя история)
Довожу ребят до работы, ко мне приходят после айти школ уже за реальным результатом 💪
50 человек уже работают, вот отзывы
Консультация по трудоустройству по ссылке👇🏻
https://ngx-university.com/interview
P.S. Халявные плюшки:
🎁 Первое занятие моего менторинга где учим с нуля сразу на фреймворке и список вопросов на собеседовании (получите после консультации)
🎁 Бесплатную консультацию с экспертом по трудоустройству в IT-компанию
🎁 Запись прямого эфира "Пошаговый план трудоустройства в IT-компанию"
Регистрируйтесь по ссылке ниже 👇
https://ngx-university.com/interview
#инструмент дня
Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?
Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.
А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.
Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.
Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.
Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).
Композиция
API компонентов открыто полностью. У вас есть доступ к каждому узлу, что позволяет легко добавлять, удалять или оборачивать элементы под свои нужды.
Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.
Вот это переиспользование, за которое не стыдно, котаны. Можно и младшему брату оставить.
Лучший подарок на Новый год!
#react #mui #ui #widgets
#баг дня
Если вы тут утром решили развернуть новый проект на Vite, и у вас ничего не вышло, это нормально.
esuild, на котором Vite и основана, в версии 0.24.1 принёс ломающее конфиги изменение.
И на данный момент лучшее решение — запинить зависимость esbuild на 0.24.0: https://github.com/vitejs/vite/issues/19018
Ну или использовать пятую ветку Vite.
Повторяется на всех пакетных менеджерах: и npm, и pnpm и bun и, прости господи, yarn.
Осторожнее там, котаны :)
#vite #esbuild #bug
Base Virtualization — бесплатный курс для тех, кто хочет погрузиться в облачные технологии
Уже используете облака, только планируете переезд или просто хотите разобраться в терминологии? Что такое IaaS, SaaS, PaaS? В чем разница между частным, публичным и гибридным облаками? Что такое миграция и как организовать бесшовный переезд в облако? Об этом и о многом другом узнаете в новом курсе.
Что вас ждет:
— 10 уроков о виртуализации и облачной инфраструктуре.
— Доступ к материалам курса без ограничений.
— Поддержка и общение с экспертами в Telegram-сообществе.
Зарегистрируйтесь на курс по ссылке и начните погружение в виртуализацию прямо сейчас.
Реклама ПАО «ВымпелКом», beeline.ru