14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Поменяли какую-то настройку в 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 и милых роверов, то даже не зовите. А если серьезно — так утренним кофе-рейвом Яндекс начинает новый сезон образовательных проектов для стажёров.
Кто куда, а я на рейв 🌟 📹
#новость дня
Ну что же, скажем 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
#новость дня
Я терпел с 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
#баг дня
Посмотрите на иллюстрацию к посту, ничего интересного не замечаете?
А тут происходит ого-го какая драма!
Да, использование новомодных HDR-цветов и описывание их в OKLCH в Chrome на macOS приводит к неожиданным эффектам, будучи применённым на корневую ноду, aka тег HTML.
Правильный цвет тот, что темнее. Откуда я знаю? В Safari бага нет. В FIrefox, кстати, тоже.
А багу в Chrome на macOS тупо два года уже: https://issues.chromium.org/issues/40064153
Ну, бывает.
#oklch #color #bug
В России можно посещать бесплатные IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.
Чтобы не пропустить полезные — сохраните канал @FreeItEvent.
Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по frontend и backend разработке
Всё публикуют здесь.