14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Применяя 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 и милых роверов, то даже не зовите. А если серьезно — так утренним кофе-рейвом Яндекс начинает новый сезон образовательных проектов для стажёров.
Кто куда, а я на рейв 🌟 📹
#новость дня
Ну что же, скажем Styled Components пока-пока!
https://opencollective.com/styled-components/updates/thank-you
Спасибо им, что показали нам, как можно работать с компонентами. Правда и цена оказалась высока.
Пока коллективный CSS-in-JS динозавр решал проблему экстракции CSS из бандла, растеряв мощь Babel под натиском Rust-решений, подтянулись млекопитающие вроде Tailwind и заняли нишу гораздо быстрее, мощнее и эффективнее.
С бесплатной экстракцией в том числе, да. И не ограниченные фреймворками.
Маятник мощно качнулся. Я не любитель Tailwind и, возможно, предпочту CSS Modules, но надо признать, что работу они проделали прекрасную.
Помянем, в общем.
А вторая новость — кратко: вышел Parcel 2.14.0 c поддержкой React Server Components!
Они подчёркивают, что Parcel сам по себе не фреймворк, но обеспечивает необходимый минимум и позволяет строить фреймворки уже на его базе.
Дивный новый мир!
#cssinjs #styled #parcel #tailwind
#такое дня
Есть две вещи, которые я очень не люблю в веб-приложениях.
Первая — однокнопочные шорткаты. Например, в Jiira — нажатие на W добавляет тебя в список следящих за таской людей. Зачем? Почему? Непонятно.
Возможно, кому-то и удобно, но моя природная неусидчивость заставляет меня иногда нажимать кнопки на клавиатуре просто так. Ну нравится.
Хабр тоже этим страдает. А в Твиттере — вообще аккордные сочетания клавиш (типа G-T), как будто я в каком-то сраном Emacs.
Не, есть, конечно, приложения, где это возведено в абсолют — вроде Vim. Но это прям идеология. От веб-страниц я такого не жду.
А вторая категория приложений — те, кто перехватывает стандартные шорткаты. Например, ConfigCat — менеджер фича-флагов — делает неудобоваримое с шорткатом поиска.
Зачем? Почему? У меня всего 3-5 флагов на экране, имейте совесть. А может, я ищу UI-элемент какой-то. Ведь всё, что есть на экране — это текст.
А самое смешное, что они записывают факт предупреждения в LocalStorage, и больше такое не показывают. Я прям не могу представить себе этот диалог между продактом и лидом разработки. Надеюсь, была немая сцена.
А что раздражает вас в UX известных приложений и сайтов?
#ux
Сегодня Яндекс всё меньше ассоциируется исключительно с разработкой софта. В 2017 году появился первый автономный автомобиль, в 2018 — первая Станция, в 2022 — первый робот Маркета. Все эти разработки становятся возможными благодаря людям с инженерным духом — тем, кто не боится экспериментировать и создавать железо.
25-26 апреля пройдет Repair Cafe — два дня для тех, кто любит технологии, железо и запах флюса по утрам.
Главной точкой притяжения станет мастерская, где можно починить или разобрать технику под присмотром опытных наставников. Все нужные инструменты выдадут, но чинить придется самому.
На мероприятии можно будет послушать о том, как сделать устройство для чтения ДНК напильником в домашних условиях. Думаю, зайдет тем, кому интересен процесс реверс-инжиниринга микросхем и прочие инженерные нюансы.
Еще из интересного: будет техносвоп для обмена гаджетами разных лет, починка культового ПК «Ленинград» (олды помнят), и передвижная выставка, где можно потрогать роботов, лидары и игровые консоли.
Количество мест ограничено, зарегистрироваться и узнать детали можно тут.
В айти давно поменялась философия рабочей среды. Спецы выбирают место работы не по формальным критериям, а по ощущению — «моё/не моё». То есть это не про «привлечение талантов» корпоративными методами, а про ценности, которые мэтчатся с личными.
Яндекс на фестиваль 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
#баг дня
Посмотрите на иллюстрацию к посту, ничего интересного не замечаете?
А тут происходит ого-го какая драма!
Да, использование новомодных HDR-цветов и описывание их в OKLCH в Chrome на macOS приводит к неожиданным эффектам, будучи применённым на корневую ноду, aka тег HTML.
Правильный цвет тот, что темнее. Откуда я знаю? В Safari бага нет. В FIrefox, кстати, тоже.
А багу в Chrome на macOS тупо два года уже: https://issues.chromium.org/issues/40064153
Ну, бывает.
#oklch #color #bug
В России можно посещать бесплатные IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.
Чтобы не пропустить полезные — сохраните канал @FreeItEvent.
Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по frontend и backend разработке
Всё публикуют здесь.
#статья дня
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders #бородач
#codepen дня
Сайт по продаже пончиков должен быть пончиком и точка!
Пруф: https://codepen.io/narrowdesign/pen/ZYErvWv?editors=1000
Извините, я просто никак больше не могу это прокомментировать.
#threejs #3d