14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Насыщенная программа на 12 часов, 5 треков докладов и тусовка с экспертами в IT
Приглашаем на Яндекс Яндекс Dev Day&Night — конференцию о технологиях для мобильных и бэкенд-разработчиков, продактов и аналитиков. Она пройдет в Москве уже 19 апреля.
В программе 5 треков докладов, множество активностей и тусовка до 2 ночи со знакомствами, коктейлями, диджеями и дискуссиями не под запись.
В карточках лишь некоторые из докладов, подробная программа и регистрация на сайте!
Реклама. Рекламодатель: ООО «Яндекс.Такси» ИНН 7704340310
#новость дня
Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!
Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.
И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select
Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.
И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.
Впрочем, на этом преимущества заканчиваются.
А вот в новом селекте можно даже HTML писать в option!
Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.
Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)
Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output
Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.
А, и да. В неподдерживаемых браузерах селект просто фолбэчится до нативного. И все счастливы.
Кроме заказчиков.
#select #custom
Не ожидал, что телега не останется в стороне от 1 апреля.
Вы уже видели эту офигительную анимацию лайка?
В айти давно поменялась философия рабочей среды. Спецы выбирают место работы не по формальным критериям, а по ощущению — «моё/не моё». То есть это не про «привлечение талантов» корпоративными методами, а про ценности, которые мэтчатся с личными.
Яндекс на фестиваль New Star Camp в горах Сочи перенес лучшие практики из своих офисов в три разные зоны. Они все про простые, но очень важные идеи:
— доступность — любой гость попробовать себя в роли сотрудника и перенести свою фотографию на большой «бейдж», а еще потестировать бенефиты сотрудников, получить приглашения на мероприятия или сделать кастомный мерч
— активности — в отдельном селфбуст-пространстве проходили воркшопы, дискуссии про ИИ и даже D&D игры
— атмосфера — уютная терраса в стиле офисных крыш компании, где можно взять чай, послушать музыкальные вечера, и просто неформально пообщаться
Выглядело это как естественное продолжение фестиваля. Когда компании становятся не работодателем, а местом для единомышленников — это совершенно другой уровень вовлеченности.
#инструмент дня
Охренеть какая штука!
https://react-explorer.com/
Это обозреватель зависимостей. Я бы даже сказал, созвездия завимимостей и сейчас вы поймёте, почему.
Потому что помимо простого дерева, которое в целом умеет строить кто угодно, тут имеется мини-карта!
Перемещаешься по карте — смотришь подсвеченные созвездия. Инспектор работает на любом реакт-сайте без отдельной установки, потому что построен по принципу React Scan — инджектит React DevTools на страницу.
Да, на минифицированном коде результат получается не очень понятный, но осознать масштаб зависимостей и связи между ними всё же позволяет.
Проект пока не открыт, но находится в открытом тестировании.
#react #analyze #dependencies
Яндекс вновь проведет масштабный фестиваль Young Con для всех, кто интересуется сферой IT
25 июня во второй раз пройдет фестиваль про технологии и карьеру в IT — Young Con. В этом году он будет доступен не только студентам, выпускникам и начинающим специалистам, но и школьникам 9-11 классов. Участники смогут познакомиться с IT-профессиями, посетить интерактивные зоны ведущих вузов, попробовать сервисы Яндекса, пообщаться со специалистами и пройти пробное собеседование.
Подробнее — на сайте Young&&Yandex и в Телеграм-канале.
Основа веб-разработки — это HTML 👀
Изучить этот язык можно на бесплатном онлайн-курсе от экспертов VK. Вы научитесь создавать структуру веб-страниц, подготавливать сайты для SEO, работать с текстом, таблицами, изображениями. Как итог — создадите свою первую веб-страницу.
Формат курса: видеоуроки уже записаны, учитесь в своём темпе.
Стоимость: бесплатно.
Как записаться: перейти на сайт VK Education и зарегистрироваться на курс.
#глупость дня
Поехали.
Недавно двое вебанутых дегенератов наглядно продемонтрировали мне, что в комменты можно засунуть жабаскрипт, невзирая на фильтр: теги script и object, конечно, в число разрешённых не входят, но до сей поры Таласса фильтровала только теги (по их именам), а все атрибуты оставляла как есть.
Между тем комитетская мразь, придумавшая HTML5, впендюрила туда «событийные» атрибуты вроде onlclick, onpageshow и прочее в таком духе, а лишённые, похоже, последних остатков мозга браузерописатели положили с прибором на то, документ какого типа они рендерят
Как Павел Дуров и Илон Маск перевернут IT-индустрию в 2025 году?
Новости из digital-мира, которые влияют на вашу жизнь и которые интересно обсуждать, отбираются и фильтруются на канале AdBranch.
➡️ Следить за движухой
#ссылка дня
Наверное, стоило прислать это сразу после пятничных котов :)
Итак, вашему вниманию: диаграмма разрешения кодов HTTP.
Тут: https://github.com/for-GET/http-decision-diagram?tab=readme-ov-file
Разрешения не в смысле "можно ли", а в смысле процесса принятия решения, когда какой код уместен.
Она довольно большая и основывается на большом количестве RFC: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234 RFC7235.
Ну и там, где в спецификациях оставлены пробелы — дополняет.
Штука довольно большая, но весьма хорошо укладывается в голове.
#http #diagram
Выиграй стажировку в IT и стартуй в карьере!
Pulpy и SuperJob запустили проект “Карьера шаг за шагом”. Его участники могут выиграть индивидуальную карьерную консультацию и стажировку в топовых компаниях.
У каждого направления (маркетинг, ИТ, бизнес, большие данные) есть свой эксперт. В вопросах ИТ своим опытом поделилась Наталия Давыдова, разработчица и автор канала “Наташа пишет про IT”. На сайте вы найдете видео-интервью и гайд: там много дельных советов и личный опыт Наташи по поиску работы.
Что делать?
Зайди на сайт, посмотри видео и скачай гайд
Отправь резюме — первым 200 участникам эксперты SuperJob бесплатно дадут обратную связь!
В мае эксперты выберут нескольких ребят, которых пригласят к себе на карьерную консультацию. А самый сильный участник получит стажировку в ИТ-департаменте SuperJob.
🔗 Ссылка на проект
Реклама АО “Мултон”, ИНН 7810249327, erid: 2W5zFK9uByA
#карьера #стажировка #IT #вайб
#ссылка дня
Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/
Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.
#http #handbook #бородач
#фишка дня
Когда вызываешь async-функцию, но не обрабатываешь её результат, промис остаётся "висящим" (floating). Это может привести к разным проблемам:
Потеря ошибок.
Если промис завершается с ошибкой, но её никто не ловит, можно упустить важные сбои в коде.
Непредсказуемое поведение.
Асинхронный код может выполняться позже, чем ожидается, что приведёт к багам.
Неоптимальное использование ресурсов.
Если промис делает сетевой запрос или что-то грузит, но результат нигде не используется, это просто тратит ресурсы впустую.
Ещё, конечно, IDE ругается и бесит.
Чтобы явно указать, что промис можно игнорировать, используй один из этих способов:
void fetchData(); // Показываем, что знаем о промисе, но он нам не нужен
fetchData().catch(() => {}); // Глушим ошибки (осторожно, можно скрыть баги!)
fetchData().then(() => {}); // Запускаем, но не обрабатываем результат
(async () => { await fetchData(); })(); // IIFE, помните ещё такое?
no-floating-promises (https://typescript-eslint.io/rules/no-floating-promises/) в ESLint помогает находить такие промисы и не оставлять их без внимания.
Если нужно подтянуть разговорный английский для работы, помочь с этим могут в онлайн-школе Authentic Pigeon.
Ребята вкладываются в кастомизацию и топят за человеческий вайб, чтобы развивать английский было в кайф, а не обязаловку.
Абсолютно кайфую от подхода ребят. Занятия тут это не потогонка, а крутой дружеский разговор.Студент школы — Иван, QA инженер
Узнать подробнее о занятиях и записаться на бесплатный демо-урок можно в боте.
Реклама. Моисеев Кирилл Владимирович. ERID: 2VtzqwKiQ6b
#красивое дня
Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!
4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.
Эта программа стала ключевым моментом в истории персональных компьютеров: она позволяла энтузиастам писать код на понятном языке, а не программировать в машинных кодах.
Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.
В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.
Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)
Однако сам проект публикации получился не слишком удобным: интерфейс красиво оформлен, но текст невозможно скопировать, а анимации только отвлекают от чтения.
Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.
Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.
Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code
Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.
#microsoft
#фишка дня
Поменяли какую-то настройку в VS Code, и теперь всё сломалось?
Вообще не проблема! Вводим в поиск @modified и — вуаля — видим все настройки, отличные от дефолтных!
Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.
#vscode #settings #json
🧠 Коуч, которая раньше искала баги в коде, а теперь помогает находить баги в мышлении
Хочу дать рекомендацию, которая не про код, а про то, что стоит за ним.
Наталья Голубева — коуч ICF и в прошлом QA-инженер. Она помогает тем, кто застрял в карьерных или личных задачах.
К ней приходят айтишники, которые:
– хотят уйти из найма, но боятся;
– выгорели, но продолжают тащить проекты на силе воли;
– мечтают о чём-то своём, но саботируют;
– сомневаются в себе, несмотря на 10+ лет опыта.
Если чувствуешь, что сам не вывозишь, мысли закольцевались, настроение падает с ошибкой 500, а понимание, что делать — с ошибкой 404, рекомендую попробовать коучинг с Натальей.
Также она ведёт свой канал 👉 @golubeva_online👈, где делится постами и заметками о мышлении. Например, её посты:
На чём на самом деле держится ваша сила воли?
Как найти нужный ответ внутри себя?
Всё равно всё будет через ЖОПП
Подпишись, чтобы не потерять полезный контакт!
Реклама. О рекламодателе
#фишка дня
Применяя position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.
Вот только есть одна проблема: последняя строка таблицы при скролле скрывается под этим самым заголовком и выглядит это, ну, странно. Особенно в случае, когда в таблице не просто текст, а условия сравнения, изображения и так далее.
А решение простое!
Добавляем margin-bottom на thead размером во всю высоту строки:
margin-bottom: calc(1lh + 20px);
1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.
#инструмент дня
Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.
Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.
И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).
И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/
Я, честно, не считаю вручную акцентированный градиент настолько лучше автоматически созданного по контрасту, но для основных, идейных изображений, наверняка кому-то пригодится.
Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.
#gradient #tool #mesh #бородач
#видео дня
Прямо сейчас идёт трансляция Epic Web Conf 2025. Конкретно в этот момент — рассказ об фронтенд-инфраструктуре компании ByteDance (стоящей за TikTok). А именно, о RSpack (моя любовь), RSBuild, Lynx. Большое влияние уделено микрофронтендам и Module Federation.
Срочно подключаемся: https://www.youtube.com/watch?v=SDuvi5eUqp0
#инструмент дня
Мой самый любимый виджет из всех — Modal Bottom Sheet. Это как в построении маршрута на Google Maps. Шторка, по-нашему. Дёргаешь её туда-сюда, забавно.
Так вот, в мобильных фреймворках вроде того же Flutter и SwiftUI шторка реализована из коробки, а для веба — приходится изгаляться.
Хотя у шторки на мобильных устройствах очень много на самом деле общего со множеством других виджетов: модалка, тост, боковое меню, лайтбокс, стек (как в Tinder). Просто потому что их очень интуитивно можно смахнуть или развернуть жестами.
Так вот, собственно, к чему это я: https://silkhq.co/
Прекрасная библиотека, реализующая шторку и ей подобные виджеты, их анимации и взаимодействия на разных устройствах.
Множество примеров, нативные анимации, жесты. Одна проблема: платная для коммерческого использования. И не открытая.
Две, получается, проблемы :(
P. S. В комментариях пишут, что так-то три проблемы. Третья — React. Штош.
#react #sheet #widget
#инструмент дня
Серверные компоненты React в Parcel.js уже здесь!
Недавно я писал новость о выходе Parcel 2.14.0, который бросает вызов (нет) Next.js и внедряет у себя поддержку серверных компонентов!
И вот, мы дождались примеров!
Тут: https://github.com/parcel-bundler/rsc-examples
1. С сервером
2. Генерация статики — это, пожалуй, моя любимая и довольно недооценённая возможность
3. Клиентские, когда серверные компоненты рендерятся как обычные, интегрируясь в уже сущестующее приложение.
В общем, наконец-то можно нормально пощупать без того, чтобы тянуть весь Next.js. Я очень рад.
#parcel #rsc #react
#уязвимость дня
Итак, Next.js обосрался. Гремит уже пару дней точно: https://nextjs.org/blog/cve-2025-29927
И уязвимость, если коротко, заключается в следующем: сформировав определённый заголовок, можно пропустить все проверки аутентификации пользователя и выполнить нужный код.x-middleware-subrequest: middleware
Если значение этого заголовка содержит имя middleware (middlewareInfo.name), то выполнение данного middleware пропускается.
Естественно, должно сойтись несколько условий, например — аутентификация должна проходить в middleware, который мы и можем пропустить. Скриншот очень хорошо показывает суть проблемы.
Так вот, за подробностями-то можете сходить сюда: https://zhero-web-sec.github.io/research-and-things/nextjs-and-the-corrupt-middleware, но вот что очень интересно.
А интересно это:
2025-02-27T06:03Z: Disclosure to Next.js team via GitHub private vulnerability reporting
2025-03-14T17:13Z: Next.js team started triaging the report
2025-03-14T19:08Z: Patch pushed for Next.js 15.x
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
#такое дня
Тринадцать лет назад я работал в горнодобывающей/камнеобрабатывающей компании и пилил всякие инхаус-проекты: от учёта блоков, добытых на карьере, до их продажи, каталогизации, распиловки. Вплоть до визуального конструктора надгробий (на котором тщетно пытался сделать бизнес, но сегодня не о нём).
И вот сегодня в девять утра позвонил бывший коллега. С проблемой 🫠
Итак: не грузятся продажи больше, чем за пару дней. Сервер выбивает в пятисотую.
Начал диагностику и понял, что падает по памяти. Причём, не потому что много продаж, а потому что может быть много блоков в продаже.
Ну а памяти-то там кот наплакал. Как крутилось на шаред-хостинге со 128 мегабайтами памяти на PHP 5.3, так и крутится.
Как оказалось, я образца 2012 года, для подсчёта продаж просто грузил в памяти вообще все блоки, а потом их уже фильтровал и считал объёмы.
Казалось бы, какая фигня, скажете вы, ну сколько там тех блоков?
Ну так-то за 13 лет добыли почти 24000 блоков и совершили несколько тысяч продаж. А каждый блок — специфика работы — должен был сохранять историю изменений, распилов, расколов и так далее... Ревизии, короче. Это довольно ощутимый объём данных.
Сначала я предложил просто убрать статистику. Но оказалось, это едва ли не самая нужная фишка — даёт моментальную видимость по контрагенту.
Естественно, код был переписан самым простым способом — пакетной обработкой. Грузим по 5000 блоков, считаем объём. И всё прекрасно заработало.
Это, к слову, о преждевременной оптимизации. Довольно плохой масштабирующийся код прекрасно работал в не самой маленькой компании 13 лет :)
Такой вот blast from the past, ничего не скажешь. Кто бы вообще мог подумать, что это всё будет работать столько лет без проблем.
#php #memory
#пятница дня
Срочно идём и вводим в консоль traceroute -m 50 bad.horse.
И поём все вместе :)
P. S. а цепочка сертификатов https://signed.bad.horse содержит тот же текст.
#такое
🚀 Качайте английский за счёт компании для работы в IT!
🌍 Хотите выйти на международный уровень в сфере разработки, аналитики, проектного управления или дата-сайенса?
Яндекс Практикум предлагает курсы, которые помогут уверенно общаться на английском языке в профессиональной среде:
✅ Вместо зубрёжки — симуляции интервью, рабочих созвонов и даже смолтока возле кулера
✅ Вас ждут встречи с иностранными IT‑специалистами и много разговорной практики
✅ Мы взяли за основу опыт работы Яндекса с международными партнёрами, чтобы вы освоили навыки, которые ценят зарубежные работодатели
✅ Поможем эффективно совмещать учёбу с работой
✅ Выдадим сертификат об окончании курса
👉 Курс может оплатить ваш работодатель, заполните форму, расскажем, как это устроено.
Реклама, АНО ДПО “Образовательные технологии Яндекса”, ИНН 7704282033, erid: 2VtzqucjFMA
#новость дня
Google переводит рендеринг шрифтов в Chrome на Rust
В Chrome 133 для Linux, ChromeOS и Android по-умолчанию включён новый движок рендеринга шрифтов Skrifa, написанный на Rust. Он заменяет старый C++-код и является частью проекта Fontations.
Почему это важно?
Рендеринг шрифтов — одна из самых уязвимых частей браузера. Ошибки в обработке OpenType-файлов могут приводить не только к некорректному отображению текста, но и к серьёзным уязвимостям. 70% всех багов безопасности в Chrome связаны с управлением памятью, а Rust помогает устранить эту проблему на уровне языка.
Похоже, Google наконец-то заметил, что Firefox уже лет пять как использует Rust, и решил, что пора бы догонять.
📌 Подробнее:
🔗 Статья на русском
🔗 Блог Google
#rust #chrome #opentype
Как выглядит ваше типичное утро четверга? Если там нет DJ Stonik1917 и милых роверов, то даже не зовите. А если серьезно — так утренним кофе-рейвом Яндекс начинает новый сезон образовательных проектов для стажёров.
Кто куда, а я на рейв 🌟 📹