14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Я вот просто оставлю это здесь и не буду говорить, сколько попыток у меня заняло прохождение, ок? :)
Вообще, конечно, максимально угарная тема. 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 #бородач
#codepen дня
Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.
Переливающийся всеми цветами радуги светящийся текст!
Вот: https://codepen.io/thebabydino/pen/rNPOpJK
Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.
Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.
#css #svg #filter #бородач
#инструмент дня
Ну что, вы уже сделали свой сервис для удаления фона с изображения?
Нет? А почему?
Даже Эдди Османи не удержался: https://bg.addy.ie/
Ведь, как мы уже писали, с помощью библиотеки Transformers.js можно с лёгкостью реализовать множество применений ИИ-моделей прямо в браузере! Да, без отправки на сервер. Пусть комп клиента старается :)
Гитхаб: https://github.com/addyosmani/bg-remove
Больше сервисов богу сервисов!
#ai #webgpu #image
Главная обязанность сотрудника в найме — это....
Приносить деньги бизнесу? Следовать внутренним регламентам? Соблюдать сроки по задачам?
CEO ИТ-компании ПравоТех считает иначе. Главная обязанность наших сотрудников — получать удовольствие от работы.
Чтобы сотрудники успешно справлялись с обязанностью, мы изменили стратегию компании и сфокусировались на развитии уникальной корпоративной культуры.
Так мы отказались от строгих начальников в пользу лояльных лидеров-наставников, слушаем идеи каждого и даем возможности сотрудникам выбирать, чем они хотят заниматься в компании.
Переходите в наш канал и узнайте, как компания помогает нам работать в удовольствие: /channel/+VcMuyvPsbzBkNTQ6
erid: LjN8KYEzh
#инструмент дня
Примерно пять раз в секунду где-то в мире очередному разработчику приходит в голову идея: «А что если я этот виджет сделаю независимо от основного приложения, на каком-нибудь миниатюрном фреймворке, чтобы было модно, молодежно переносимо?»
Когда такая идея приходила мне, я взял Preact, а потом Van. А тут недавно на собеседовании кандидат рассказал, что тоже сталкивался с подобной задачей и решил её через µhtml.
Микрохатээмэль
Сразу ссылка: https://github.com/WebReflection/uhtml
JSX там нет, вся работа через шаблонные литералы. Что, впрочем, выглядит вполне нормально:
import { render, html, signal, detach } from 'uhtml/preactive';
const count = signal(0);
render(document.body, () => html`
<button onclick=${() => { count.value++ }}>
Clicks: ${count.value}
</button>
`);
// stop reacting to signals in the future
setTimeout(() => {
detach(document.body);
}, 10000);
#ссылка дня
Всеобъемлющее руководство по созданию приложения адресной книги от создателей React Router: https://reactrouter.com/tutorials/address-book
Клиентский и серверный рендеринг, фильтрация данных, добавление. И даже немного о кодах ответов.
Для полноценного приложения останется добавить только работу с базой данных :) Но... не здесь.
Прекрасный туториал, начинающим и тем, кто ещё не знаком с реакт-роутером или некоторыми его аспектами должно очень зайти.
#react #router #ssr #tutorial
Бесплатный курс Cloud DevSecOps — ваш шаг к безопасной разработке
Каждая строка кода — это потенциальная уязвимость. Если вы DevOps-инженер или разработчик, который хочет не просто писать код, а создавать защищенные приложения, этот курс для вас.
Вас научат не допускать ошибок, которые могут привести к утечкам данных и уязвимостям. Познакомят с инструментами для предотвращения угроз и создания безопасного ПО.
Что вас ждет:
— 10 уроков, которые помогут разобраться с DevSecOps.
— Практика с примерами кода на Java и разбором ошибок.
— Поддержка экспертов и активное комьюнити.
Учитесь бесплатно и в удобном для вас ритме — записывайтесь на курс Cloud DevSecOps по ссылке.
Реклама ПАО «ВымпелКом», beeline.ru
erid: LjN8K58hJ
Как с комфортом проводить ревью кода?
В современном IT сообществе стандартным инструментом становятся платформы для разработки, включающие в себя возможность версионировать код, собирать, тестировать, развертывать, проводить ревью. Однако большая их часть исключает, что код – это не текст и с ним можно работать более интеллектуально, как это умеет IDE.
Компания Яндекс анонсировала, что в 2025 году запустит платформу SourceCraft, в которой удобству разработчиков уделяется особое внимание. Теперь при ревью пул-реквестов нет необходимости переходить в IDE, чтобы разобраться в коде, инструменты навигации по коду доступны прямо на платформе.
SourceCraft продолжает развиваться, команда планирует открыть его для широкой аудитории, чтобы собрать обратную связь и усовершенствовать инструмент, а какие задачи было необходимо решить, чтобы реализовать навигацию по коду для любого коммита можно узнать из статьи на Хабре.
Ну как там там, не забыли на своих сайтах год поменять? 😁️️️️️️
Читать полностью…
#инструмент дня
Когда вы последний раз дизассемблировали 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
Хочешь зарабатывать в евро, но не знаешь, как получить оффер на международке 🌏
Поиск работы за границей — это как квест на «хардкоре». Непонятно, с чего начать: где искать вакансии, как на них откликаться и как правильно упаковать свое резюме, чтобы его заметили.
Тут на помощь придут ребята из AgileFluent — эксперты с двумя полезными каналами:
AgileFluent – про все этапы поиска работы, от поиска вакансий до оффера. Всё в формате советов, лайфхаков, чек-листов и пошаговых гайдов. А в этом посте ребята собрали полезные материалы: 50+ джоб-бордов, шаблон для учёта откликов и примеры писем для напоминания HR.
AFsolutely — для тех, кто хочет прокачивать английский для работы. Прямо сейчас там проходит бесплатный марафон по бизнес-английскому, успей попасть на него.
Подписывайся, чтобы узнать свои слабые места и быстрее дойти до международного оффера! 🚀
#видео дня
Раз уж я позаимствовал сегодняшнюю фишку дня у Веса Боса (хотя давайте честно, у него была ненастоящая демонстрация), придётся уважить.
Тем более, что в его подкасте был гость, который мне дико интересен! Точнее, компания и их методы работы.
И говорю я о ByteDance, авторах TikTok, CapCut, Mars (альтернативы Cursot) и Lark (альтернатива Google Workspace).
Почему мне так интересно? Потому что я люблю позалипать в ТикТоке. Шутка. Потому что я пользуюсь бандлером RSPack с первых дней выхода. Пруф: /channel/htmlshit/1868
А Зак Джексон как раз его ментейнер :) И автор идеи Module Federation.
И, собственно, беседа о нём в том числе и пойдёт, а ещё о микрофронтендах и Module Federation.
К слову, когда автор React Scan начал свой спам видео с ререндерами всего и вся, именно ребята из ByteDance наиболее адекватно среагировали на проблему, а не стали орать: «Да кому это интересно, господи!»
В общем, хоть я и не фанат подкастов, моя дикая рекомендация: https://www.youtube.com/watch?v=aFhysuTUoQY
#podcast #rspack #bytedance
#фишка дня
Продолжим тему ответов на ваши вопросы на собеседованиях.
Почему ваши? Ну потому что вы их предлагали! Вот тут: /channel/htmlshit/3290
Итак, вопрос: как показать спиннер загрузки прямо в кнопке, сохранив размер кнопки и её доступность?
То есть, не делать такое:
‹button>{ isLoading ? <LoadingSpinner/> : "Save" }</button>
grid-area: 1/1 как в прошлом примере.
.button {
display: grid;
grid-template-areas: "stack";
.spinner,
.text {
grid-area: stack;
justify-self: center;
}
}
В четверг Яндекс выкатил сериал YaC 2024, дождался субботы и решил посмотреть эпизоды про работу и нейросети.
Особо зацепил Yandex Code Assistant для разработчиков. Он помогает писать и ревьюить код, а ещё участвует в создании цифровых продуктов. Пишут, им уже в тестовом режиме пользуются 4 тысячи разработчиков. Обещают со временем открыть для всех. Я пробовал альтернатиы в работе, для помощи с тестами и рутиной, так что интересно сравнить.
Ещё представили AI Studio — это единая платформа для всех ML-инструментов компании. Она упрощает разработку и ускоряет запуск сложных ИИ-приложений, например ассистентов, которые работают и с текстом, и с голосом. Похоже, удобно для тех, кто работает с машинным обучением, хотя самому это направление пока не доводилось трогать плотно.
В общем, Яндекс продолжает активно экспериментировать с инструментами для работы и автоматизации. Если будет возможность, точно протестирую ассистента в деле.
#такое дня
Прежде чем волноваться о плохо пройденном собесе, помни: некий разработчик Facebook прошёл алгоритмы, лайвкодинг, калча фит... и всё ради того, чтобы при каждом нажатии клавиши в поле ввода поста прогонять регулярку на поиск ссылок по всему тексту.
Да, вы не ослышались. В итоге, на сообщение в 10000 символов задержка может составить две-три секунды.
Не надо так, котаны.
Ссылка на тред: тут. В треде народ развлекается разным профайлингом, очень интересно: React Scan, Chrome Profile, немного реверс-инжиниринга...
Как же решать такую задачу? Ну, например, debounce или throttle, зависит от условий. Или предсказание.
#js #react
#статья дня
Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.
Т. е. имея такую анимацию: box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}
и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.
Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm
#css #animation #keyframes #бородач
#ссылка дня
Сегодня на повестке довольно упоротый проект. И упоротый он не только из-за названия — Modalzmodalzmodalz. Впрочем, сейчас сами поймёте. Ссылка: https://modalzmodalzmodalz.com/
Да-да, более дикого оформления я давно не встречал. Ну, разве что на сайтах с восьмибитными иконками.
Итак, чем же сайт заслужил попасть в рубрику? А тем, что он весьма оригинально напоминает нам: хватит лепить везде чёртовы модалки!
Модальные окна мешают читать контент. Модальные окна редко поддерживают правила доступности. Они буквально заставляют сделать какое-то действие, что нужно-то вообще не всегда. Они редко поддерживают браузерную навигацию, и то не всегда очевидно.
Что предлагают авторы?
Сайдбары, тосты, врезки, новые страницы в конце-концов и старый добрый Undo вместо подтверждения действия.
Ну и, конечно, дают советы о правильных модалках.
Хороший проект. Ещё бы чуть менее с дизайном упоролись... виральность зашла слишком далеко.
#ui #ux #modal