14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Создаёте игры? Получите буст для следующего уровня!
Геймдизайнеры, разработчики, продюсеры, в телеграм-канале «АКИлогия» вы найдёте всё, чтобы двигаться вперёд. Канал ведёт Агентство креативных индустрий Москвы — одна из немногих институций, работающих на устойчивый рост российского геймдева.
На канале вас ждут:
📌 Анонсы флагманских акселераторов, например 4-го потока «Фабрики видеоигр» — интенсивной программы с фокусом на продакшен и продвижение
📌 Игры, которые уже создали и протестировали в «АКИ.лабе»
📌 Международные возможности: конкурсный отбор на G-Star 2025 в Южной Корее для российских студий
📌 Презентация на ПМЭФ Кластера видеоигр и анимации — стратегической инициативы АКИ, направленной на развитие сферы видеоигр
✔️ Хотите сделать релиз из идеи и масштабироваться в индустрии? Подписывайтесь на «АКИлогию»!
Реклама
#статья дня
Ну чо, котаны, есть занятная история с GitHub.
Исследователь Шерон Бризинов решил проверить, что вообще происходит с коммитами, которые мы с вами удаляем через git reset и force push: https://trufflesecurity.com/blog/guest-post-how-i-scanned-all-of-github-s-oops-commits-for-leaked-secrets
Спойлер — никуда они не исчезают.
GitHub продолжает хранить все те ваши коммиты с ключами и секретами бесплатных и не очень API, даже если нам кажется, что мы всё подчистили.
Собственно, идея исследования простая: если коммиты не пропадают, значит, в них вполне могут оставаться секреты — ключи, токены и прочие радости.
Шерон пошёл и просканировал архив GitHub за несколько лет. Нашёл он там немало интересного, включая утечки, которые потом оценили на баг-баунти в 25 тысяч долларов.
Чтобы процесс не был ручным, он вместе с Truffle Security сделал инструмент Force Push Scanner.
Этот сканер вытаскивает пуши, достаёт зависшие коммиты и прогоняет их через TruffleHog, чтобы поймать секреты. Получился вполне практичный open source, которым можно пользоваться прямо сейчас.
Вывод в итоге грустный, но очевидный: удалить коммит — не значит избавиться от проблемы. GitHub всё хранит, и если секрет уже засветился, его надо менять, а не надеяться на «забывчивость» платформы.
Лучше, конечно, не допускать таких ошибок вовсе, но если уж случилось — придётся действовать радикально.
P. S. у этой статьи есть не менее занятная предыстория, которая дополняет общую картину: sharon.brizinov/how-i-made-64k-from-deleted-files-a-bug-bounty-story-c5bd3a6f5f9b" rel="nofollow">https://medium.com/@sharon.brizinov/how-i-made-64k-from-deleted-files-a-bug-bounty-story-c5bd3a6f5f9b
#github
#статья дня
Вот мало было нам хороших статей по SVG, нужно больше!
Джош Комо продолжает свою серию про SVG. Начав со статьи про базовые принципы, пришло время объяснить, как работает механизм формирования кривых, контуров, aka path: https://www.joshwcomeau.com/svg/interactive-guide-to-paths/
Вы можете заметить, что у нас так-то уже огромное количество интерактивных обучающих ресурсов, начиная от чего-то похожего на ЛогоМиры, до более сложных инструментов.
Но Джош это Джош! Как всегда потрясающая любовь к деталям, интерактивные примеры и понятные объяснения по ходу.
Фишка его подхода в этот раз — пошаговый разбор алгоритма отрисовки кривых. Проигрывает его по кадрам, как будто вы очень медленный компьютер :)
Залипательно!
P. S. розыгрыш билета на конференцию от подлодки открыт до утра, если что.
#svg #path #tool
#фишка дня
И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.
И речь пойдёт о недооценённом хуке в React: useDeferredValue.
Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.
Начав разбирать проблему, Джош понял, что событие onChange происходит очень часто, за это время надо успеть сгенерировать тень, потом отрисовать её, потом вставить код в редактор для копирования. А редактор, естественно, ещё пытается этот самый код подсветить.
Но что нам нужно? Нам ведь сначала нужен результат, а уже потом — код. Так почему бы не заполнить код чуть позже, не нагружая систему?
И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.
Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.
Будьте разумно ленивыми, котаны!
#react #hook #бородач
Итак, котаны, розыгрыш билета на конференцию Podlodka Crew! Описание и тематика конференции выше. Отмечаемся!
Читать полностью…
#инструмент дня
React Compiler, говорите...
А что если я скажу вам, что есть инструмент, конвертирующий ваши JSX-компоненты во... во все остальные?
Буквально: JSX/Svelte в: React, Svelte, Vue, Angular, Qwik, Lit, Solid, Preact...
Давайте просто сразу дам ссылку на песочницу: https://mitosis.builder.io/playground/
Если уж и не для практического применения, но если вдруг надо срочно пересесть на другой фреймворк — то понять принципы можно с лёгкостью.
Знаешь JSX или Svelte — пишешь на всех :)
#framework #tool #бородач
#статья дня
Как решить главную проблему бесконечной бегущей строки?
При создании бегущей строки (marquee, да) в CSS всегда встаёт вопрос: в какой момент элементу нужно «перепрыгнуть» в начало, чтобы анимация выглядела непрерывной? Если рассчитать неправильно — появляются рывки или пустые промежутки.
Как правило, это решается или через JavaScript, или дублированием элементов до какого-то неразумного предела. Или и так и так.
В статье на Frontend Masters уже так хорошо знакомым нам Темани Афифом (он автор CSS Shape) предложен современный способ, где эта проблема решается автоматически.
Используются новые функции sibling-index() и sibling-count(). Они позволяют CSS «понимать», какой по счёту элемент в наборе и сколько всего элементов.
На основе этих данных каждому элементу назначается своя задержка старта анимации. Это делается через формулу: задержка = индекс * (общая_длительность / количество_элементов).
Путь движения задаётся через offset: shape(...), а сама анимация повторяется бесконечно (infinite linear).
В результате элементы выстраиваются один за другим и «зацикливаются» без единого рывка — всё считается динамически, без ручных правок.
И самое приятное: HTML остаётся простым <div> с изображениями, а вся магия — в десятке строк CSS!
Почитайте, очень круто вышло.
#css #marquee
Старт дан: сегодня SourceCraft от Яндекса открыл прием заявок на грантовую программу и конкурс репозиториев. Если у вас есть проект в опенсорсе — самое время показать его миру.
Бросайте код на платформу, собирайте оценки по новой многоуровневой шкале, наблюдайте, как растет ваш рейтинг. Ачивки с уникальным оформлением от нейросети будут напоминать, что каждый ваш вклад замечен.
И не забывайте — активность и высокие оценки приближают вас к поддержке. Сегодняшний день может стать отправной точкой для вашего проекта.
Информация об организаторе Акции, о правилах проведения Акции, количестве призов, сроках, месте и порядке их получения размещена по ссылке
#заметка дня
Рубрика "Вы не спрашивали, но я всё равно отвечу!"
На самом деле, разговор произошёл в Твиттере, и я посчитал разумным, вынести его сюда.
Итак, вопрос:
Что бы убедиться: использование testid в end-2-end тестах для выборки элементов это анти-паттерн, верно? Следует тестировать с точки зрения пользователя: искать кнопку с неким текстом, например.
Знаете ли вы статьи или доклады, которые подкрепляют эту точку зрения?
Отвечаю:
Это не то чтобы антипаттерн, это просто бестолковое использование ресурсов, потому и продвигается как антипаттерн.
1. Надо тестировать то, что видит юзер
2. Если что-то не видит, значит, всё плохо
3. Если там иконка или нужен результат — искать надо по a11y атрибутам.
Сразу поясню за "бестолковость".
Когда ты что-то тестируешь, тесты становятся твоей документацией. Значит, в тестах закрепляется текущее поведение проекта. Даже строки не стоит импортировать (если ты только не тестируешь систему перевода).
А это значит, если кто-то случайно сломает систему перевода или неправильно переведёт строку без информирования остальных — тесты упадут и это правильно.
Дальше, решая проблему через ARIA-атрибуты, ты заодно решаешь вопрос доступности. Бесплатно. Поэтому data-testid и названы бестолковым использованием ресурсов.
Это же, кстати, касается систем трекинга вроде Datadog RUM.
Смысл фронтенда в том, чтобы пользователь мог с продуктом взаимодействовать. Для этого необходима визуальная и когнитивная поддержка. Кнопка может быть и видна, но на кнопке — упс — может не быть текста. Или она будет цвета фона (потому скриншот-тесты ещё не вымерли).
Подобный подход к тестировани применяется как в E2E, так и в юнит- и интеграционном тестировании. Вот, например, поясняющая статья от Testing Library, которая нынче стандарт де-факто для тестирования в вебе.
Тестируйте, котаны!
#web #testing #e2e #бородач
Фронтендеры, общий сбор 🗣️
Московское сообщество JavaScript-разработчиков MoscowJS заглянет в гости к Альфа-Банку. Программа намечается такая:
🔢 От JavaScript к DeFi: как инженеры могут изменить мир финансов
Даниил Швецов, Full Stack Engineer
Доклад познакомит JavaScript-инженеров с основами DeFi: ключевыми концепциями, математическими моделями и работой с JS SDK.
Поговорим о микрофронтендах с нуля: от принципов и базовой реализации до инструментов вроде Module Federation и single-spa. Разберёмся, как всё устроено, и рассмотрим нестандартные подходы.
Доклад об опыте сборки платформы из готовых решений и объединения приложений через iframe, Module Federation и webview. Узнаете про выбор подходов и работу с командами.
Чувствуете себя одиноким фронтендером? Есть решение — гильдия. В докладе — о том, как этот формат помогает расти, делиться опытом и не выгорать, а также краткий исторический экскурс.
Как показать, что у компании сильная команда, интересные задачи, уникальный продукт, возможности роста и при этом развита культура доверия?
Команда AvitoTech собрала все клише корпоративных видео в одном месте… Чтобы показать, какая атмосфера действительно существует у них.
P.S. Отправляйте тому самому другу-инженеру, который ищет команду мечты ☄️ Кстати, тут можно подробнее все прочитать.
#фишка дня
Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку.
Белый контур для чёрного текста, чёрный — для белого (внезапно).
Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.
Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.
И есть ещё! -webkit-text-stroke-color
Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).
Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.
Поэтому paint-order: stroke нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: var(--stroke);
paint-order: stroke;
#инструмент дня
Четыре (охереть) года назад я писал большую серию статей на тему того, как же тестировать WebKit aka Safari на Windows и Linux. Вот, можете почитать: /channel/htmlshit/705
Дайте знать, если пора эту серию статей обновить!
И тогда мы остановились на том, что можно просто использовать... Browserstack!
Но не все могут себе позволить даже 150 долларов в год за фриланс-план… или всё же есть выход?
Выход правда есть!
Browserstack активно поддерживает open-source проекты и даёт бесплатные лицензии на год!
Если у вас есть такой — смело топайте на https://www.browserstack.com/open-source и вбивайте там ссылку на репозиторий.
Главное — чтобы была подходящая лицензия. Полного списка я не нашёл, но уверен, что GPL, BSD и MIT точно включены. Я же указал Creative Commons Attribution 4.0 International.
Ах да, что же у меня за проект такой опенсорс? Да просто сайт этого канала: https://github.com/HTMLShit/htmlshit.site
Он в анабиозе сейчас, но работу над ним можно и восстановить. Да и пульт мой я ещё подумываю открыть.
Так вот, доступ обновляется каждый год пока репозиторий доступен! У меня, выходит, уже 4 года.
После прохождения ручной модерации, мне пришло письмо. Я получил годовые планы тестирования браузера и мобильных с весьма вкусными условиями.
Короче, если вы ещё не начали свой проект – чего вы ждёте вообще?
#browserstack #testing
#баг дня
Одна из моих любимых фишек инструментов разработчика Google Chrome или Firefox (aka девтулзов) — это возможность сделать скриншот ноды.
Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.
Нужен лишь кусочек? Не вопрос, выдели нужную ноду мышкой и скриншоть себе на здоровье.
Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...
Если в вашей ноде есть картинки, добавленные через тег img с атрибутом decoding="async" — они потеряются :(
Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)
Решается проблема удалением атрибута, прямо в девтулзах, и повторным скриншотом. Иногда достаточно и просто убедиться, что все картинки загружены — я пока паттерна не понял.
Но неприятный осадок всё-таки остался.
Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.
Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/
Просто попробуйте сделать скриншот body, не скролля заранее.
Проверено на Chrome 138.0.7204.184. Столько времени прошло с предыдущей проверки...
В итоге, часть картинок может появиться, а часть — нет.
Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.
P. S. В Firefox 141 баг тоже имеется.
#chrome #bug #async #бородач
У вас впечатляющий профиль на GitHub?
❗Тогда я хочу порекомендовать вам «Рукод» — чемпионат, где вы не просто решаете задачи, а взламываете шаблоны.
Здесь всё как вы любите: три дивизиона разного уровня, алгоритмы и программирование на Java, Python, C/C++, Kotlin, Rust.
🔧 Цель — не просто решить, а выиграть
🦖 Участники — от профи до студентов и школьников
🎤 Призы, нетворкинг, опыт и шанс получить стажировку в ИТ-компании
Отборочный этап уже начался и продлится до 31 августа, а главный день отбора для дивизиона A/B — 24 августа.
#фишка дня
Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.
Джейк Арчибальд предлагает решение на SVG и foreignObject: https://codepen.io/alinaki/pen/KKLXvwz
Вообще, весьма красиво. Да, можно генерировать кропы на сервере, но это, как минимум, лишние телодвижения. А тут – одна картинка, чистый и понятный код.
#svg #img #foreignObject #crop #бородач
🎉 Результаты розыгрыша:
🏆 Победитель:
1. Eügen (@heptapodd)
✔️Проверить результаты
🍂 Сезон кода едет в Санкт-Петербург!
6 и 7 сентября в новом офисе Т-Банка на Свердловской набережной пройдёт фестиваль для тех, кто живёт технологиями: разработчиков, ML-инженеров, архитекторов, техлидов и всех, кому интересен IT.
Что будет:
— яркие доклады от экспертов Т-Банка и партнёров;
— разбор инженерных решений и рабочих кейсов;
— демонстрации продуктов и то самое «под капотом»;
— карьерные консультации и живой нетворкинг;
— афтепати для участников, а еще с собой можно позвать одного взрослого и одного ребенка к 18:00
🗓 Программа:
День 1 (6 сентября): архитектура масштабируемых систем, клиентские сервисы Т-Банка, путь от идеи до своего инженерного инструмента.
День 2 (7 сентября): бэкенд-инструменты, безопасность, LLM от исследований до продакшена.
📍 Где: Санкт-Петербург, Свердловская наб., 44, стр. 1, БЦ «Феррум II»
🕚 Когда: 6–7 сентября, регистрация с 11:00
Чтобы попасть на фестиваль, заполните форму по ссылке, выберите фонд для пожертвования от 1 500 ₽ за каждый день — и получите билет на указанную при регистрации почту.
👉 Регистрация и подробности
⚡️ Уже сейчас можно оставить предзаявку на «Сезон кода» в Нижнем Новгороде — напомним вам, когда откроется регистрация.
Реклама. АО «ТБанк», ИНН 7710140679, лицензия ЦБ РФ № 2673, Erid: 2W5zFJ9HiGx
#статья дня
Можно ли заменить стейт-менеджеры — простым localStorage?
Вопрос не настолько абсурдный, как может показаться, хотя понятное дело, что многие из вас уже знают ответ.
Давайте подумаем:
> Не всё должно быть постоянным. Допустим, у тебя открыто модальное окно. Перезагрузил страницу — и оно снова открыто, потому что значение сохранилось в localStorage. Абсурдный UX.
> Нет реактивности. Если просто читать из localStorage, React не узнает, что данные изменились, и не перерендерит компонент. Придётся вручную дёргать setState.
> Событие storage работает не так. Оно срабатывает только в других вкладках, а не в той, где ты вызвал localStorage.setItem(). То есть синхронизацию внутри приложения оно не решает.
> Ограничения. Только строки, лимит около 5 МБ, возможные ошибки при парсинге JSON, коллизии ключей. Всё это требует дополнительных костылей.
> SSR недоступен. На сервере localStorage просто не существует, и код падает с ошибкой.
localStorage и, частично, sessionStorage отлично подходят для мелочей:
> выбор темы,
> сохранение введённых данных формы,
> открытая вкладка меню,
Но как только речь заходит о данных, которые должны синхронно обновляться в разных компонентах и вызывать ререндер — нужен Context или полноценный state-менеджер.
Итак: localStorage — это удобное дополнение к Context/Redux/Zustand, но не замена. Он решает задачу «сохранить между сессиями», а не «синхронизировать состояние внутри React».
А если хотите подробностей — собственно, статья от Нади Макаревич: https://www.developerway.com/posts/local-storage-instead-of-context
Не думаю, что олды что-то найдут новое (разве что лишний раз поржать над событием storage), но у новичков вопросы такого плана возникают постоянно.
#react #localstorage
🎯Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда
Как писать продуманный и масштабируемый фронтенд с помощью React? Какие паттерны реально работают, а какие — мода ради моды?
В новом сезоне Podlodka React Crew обсуждаем архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.
📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью
💡Все доклады — с практикой, кейсами и интерактивом.
📆 Реактим с 25 по 30 августа. Бегом за билетами!
Вот вам промокод на скидку 500 рублей: react_crew_3_j8TCjg
А сегодня чуть позже я запущу розыгрыш билета для вас, котаны! Надо только понять, какого бота использовать…
Что происходит с рынком труда 2025?
И как найти работу?
Кажется, рынок решил проверить нас всех на прочность. показы и просмотры резюме везде упали, рекрутеры завалены 1000-ми откликов, треш на собесах, треш в компаниях
Что с этим делать:
Самая главная ошибка - начинать писать резюме
👉вот почему и с чего начать
Если вы все-таки решили искать работу через hh вот вам
👉 13 инсайдерских лайфхаков по алгоритмам ХХ
👉 Как писать резюме
👉 А что еще фотку надо делать?
Начали там окликаться, но 90% висит в непрочитанных?
👉 вот как это надо делать - 6 этапов 😱
Наконец-то пробились на собес - супер. Как понять, сколько просить денег?
👉Вот тут реальные примеры ЗП вилок в ИТ, в т.ч. на 550к у аналитика
Дальше веселят рекрутеры - «Вы для нас слишком оверквал», «мы выбрали более подходящего кандидата»
👉Что на самом деле означают их отказы
Ну ладно, тут вроде выдохнули … они прислали оффер.
Ты увольняешься. Через 2 часа тебе говорят: «ой, сорри, мы отзываем оффер».
👉 реальная история. что с этим делать
Еще больше полезных материалов по ЗП вилкам, резюме и прохождению собесов, которые уже помогли в 2025 году получить больше 500 офферов на ЗП до 1,2 млн. руб
ЧИТАТЬ ТУТ
#инструмент дня
Volta? nvm? asdf? fnm? n?
Вы же поняли? Да, это всё менеджеры версий node.js.
Ладно-ладно, asdf чуть шире штука.
И хорошо, если нестабильные версии ноды ставишь только ради проверки фишек...
Так вот, к чему это я?
А к тому, что наш любимый pnpm с версии 10.14 тоже стал таким менеджером!
Подробнее: https://pnpm.io/blog/releases/10.14
{
"devEngines": {
"runtime": {
"name": "node",
"version": "^24.4.0",
"onFail": "download" // we only support the "download" value for now
}
}
}
#статья дня
JSON.stringify в V8 теперь в два раза быстрее!
Пруф: https://v8.dev/blog/json-stringifyJSON.stringify — одна из самых используемых функций в стандартной библиотеке JavaScript. Её используют для превращения объектов в JSON-строку. Надо ли объяснять, зачем? :)
Ну и мы все с вами так любим применять JSON.stringify для сравнения объектов... ведь достаточно сериализовать оба и сравнить строки. До недавнего времени способа лучше просто не существовало.
А еще клонирование! JSON.stringify => JSON.parse и вуаля!
Кто сказал structuredClone?
В V8 провели серьёзную работу и сделали функцию более чем в два раза быстрее!
Основные улучшения такие:
Срезание углов
Обычно при сериализации движок обязан быть очень осторожным: вдруг у объекта есть геттеры, собственный метод toJSON, прокси или ещё какой-то механизм, который может вмешаться в процесс.
Все эти проверки занимают время.
Теперь V8 научился определять случаи, когда объект «чистый», то есть просто содержит данные и не может неожиданно запустить код. В таких ситуациях сериализация идёт по короткому маршруту — без лишних проверок, что даёт значительный прирост скорости.
Убираем рекурсию
Прежняя реализация работала рекурсивно, из-за чего сериализация глубоко вложенных структур была и медленнее, и потенциально опасна переполнением стека. Теперь используется итеративный алгоритм: он быстрее и надёжнее, вне зависимости от глубины объекта.
Для разработчиков это значит, что операции с данными становятся заметно быстрее.
А как же structuredClone?
Конечно, для клонирования объектов нас есть современный инструмент — structuredClone. Его главное отличие в том, что он не превращает данные в строку, а создаёт точную копию структуры. Он умеет работать с типами, которые JSON.stringify просто «теряет»: Map, Set, Date, RegExp, бинарные буферы и даже циклические ссылки.
Для обмена данными снаружи всё равно будет нужен JSON.stringify, для внутренних операций удобнее и надёжнее использовать structuredClone.
Теперь же, благодаря оптимизациям, JSON.stringify остаётся такой же универсальной «рабочей лошадкой», но работает заметно быстрее.
Вообще, там в статье еще много чего! Очень рекомендую.
#v8 #json #stringify #structuredClone
#инструмент дня
Мозаики (паттерны) это всегда прекрасно. Но соблюсти симметрию, чтобы заполнить поле, может быть не совсем тривиально.
Симметрия, отражение и поворот станут вашими лучшими друзьями. Хотелось бы какой-нибудь простой инструмент для их настройки.
И такой есть!
https://patternico.com/
Можно заполнить встроенными иконками (Font Awesome или Line), а можно загрузить свои. Есть даже ссылка на вариант конструктора с эмодзи :) Правда, там убогонькие Emojione, но вдруг кому ок.
В общем, имеет право на жизнь. Только на мобиле работает не очень :(
#pattern #background #generator #бородач
#заметка дня
А помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?
Ну вот же, положила: /channel/htmlshit/2715
Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.
А реализовано это через, простите, обход дерева!
Алгориииииитмы
Ладно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker
Главное — это понять, какой параметр фильтрации узлов передать. Ведь объектная модель документа она не только из тегов состоит, там как минимум параллельно идут атрибуты, текст, комментарии... Нам незачем искать вообще по всему.
Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.
Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJ
Да, теперь можно и ваших камтомных селектах красиво подсветить результат фильтрации.
Пользуемся, котаны.
#css #highlight
#такое дня
Вы, наверное, ждёте все, что я сообщу о выходе jQuery 4.0?
Ну так не вышла ещё, только RC1: https://blog.jquery.com/2025/08/11/jquery-4-0-0-release-candidate-1/
А так-то было известно ещё года 2 назад, что разработка продолжается и спрос до сих пор есть. Но всё же, хочется отметить другое.
В мире, в котором нет Internet Explorer, всё ещё есть Safari. И не сказать, что это плохой продукт — вроде целевой аудитории-то он даже нравится — но и хорошим не назвать.
И вот что интересно, плохая или, что даже хуже, неочевидная работа Safari и движка WebKit в частности (а точнее говоря, работа движка в конечном продукте интеграции) сформировала целую культуру длинных гневных комментариев!
Вы только посмотрите на пример на иллюстрации! Я уверен, я бы тоже написал нечто подобное (да и писал), если бы наткнулся сам.
Ну то есть суть всей проблемы: WebKit или зумит по двойному тапу, или скроллит, если зум отключён через CSS. И чтобы предотвратить скролл, надо просто объявить использование события двойного клика. Даже отменять поведение по-умолчанию не обязательно.
Тред по этому поводу, кстати, шикарный. Много исторических отсылок и примеров подобных комментариев заодно.
А какая особенность яблочного браузера раздражает вас больше всего, котаны?
#safari #bug #feature
#расширение дня
А что, если история гита может быть представлена не в виде вертикального списка?
А что, если можно правильно использовать анимации, акцентируя внимание на изменениях?
А что, если можно не открывать интерфейс git blame на каждый чих?
Именно так подумал Родриго Помбо и нафигачил прекрасное расширение для Visual Studio Code: Git File History.
Принцип действия понятен по виде, устанавливайте: https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Всем git, котаны!
P. S. вы же в курсе, что устанавливать расширения можно из консоли?
Как-то так:
code --install-extension pomber.git-file-history
code недоступна, решение тут.
😈 Data Dojo | Питер | 26 августа
Это мероприятие Яндекса для сообщества ML-специалистов с обсуждением трендов, разбором реальных задач из соревнований и прикладными кейсами.
Зачем участвовать:
— послушать выступления экспертов: Николай Савушкин, руководитель команды рекомендательных технологий в Поиске, расскажет про генеративные нейросети в рекомендательных системах Яндекса, а Алексей Колесов,
руководитель команды NLP, поделится, какие вызовы стоят перед командой R&D в Яндексе
— разобрать задачи вместе с сообществом
— узнать, как попасть на стажировку и начать карьеру ML’щика в Яндексе
— завести новые знакомства и зажечь на afterparty
Заполняй форму до 20 августа.
Хочешь стать спикером? Поделись разбором ML-задачи через форму до 13 августа. Программный комитет пригласит одного спикера выступить на встрече.
🪷 Самураи действуют поодиночке, но учатся вместе. Присоединяйся.
#ссылка дня
Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.
1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en
2. И репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings
Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.
Ломайте свои интерфейсы сами и избегайте XSS, котаны.
#xss #naughty #injection #бородач
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач