Telegram Web Link
В России можно посещать бесплатные IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.

Чтобы не пропустить полезные — сохраните канал @FreeItEvent.

Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по frontend и backend разработке

Всё публикуют здесь.
#новость дня

Ну что же, скажем 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
#баг дня

Посмотрите на иллюстрацию к посту, ничего интересного не замечаете?

А тут происходит ого-го какая драма!

Да, использование новомодных HDR-цветов и описывание их в OKLCH в Chrome на macOS приводит к неожиданным эффектам, будучи применённым на корневую ноду, aka тег HTML.

Правильный цвет тот, что темнее. Откуда я знаю? В Safari бага нет. В FIrefox, кстати, тоже.

А багу в Chrome на macOS тупо два года уже: https://issues.chromium.org/issues/40064153

Ну, бывает.

#oklch #color #bug
This media is not supported in your browser
VIEW IN TELEGRAM
Как выглядит ваше типичное утро четверга? Если там нет DJ Stonik1917 и милых роверов, то даже не зовите. А если серьезно — так утренним кофе-рейвом Яндекс начинает новый сезон образовательных проектов для стажёров.

Кто куда, а я на рейв 🌟 📹
Please open Telegram to view this post
VIEW IN TELEGRAM
Если нужно подтянуть разговорный английский для работы, помочь с этим могут в онлайн-школе Authentic Pigeon.

Ребята вкладываются в кастомизацию и топят за человеческий вайб, чтобы развивать английский было в кайф, а не обязаловку.

Абсолютно кайфую от подхода ребят. Занятия тут это не потогонка, а крутой дружеский разговор.Студент школы — Иван, QA инженер

Узнать подробнее о занятиях и записаться на бесплатный демо-урок можно в боте.

Реклама. Моисеев Кирилл Владимирович. ERID: 2VtzqwKiQ6b
#новость дня

Google переводит рендеринг шрифтов в Chrome на Rust

В Chrome 133 для Linux, ChromeOS и Android по-умолчанию включён новый движок рендеринга шрифтов Skrifa, написанный на Rust. Он заменяет старый C++-код и является частью проекта Fontations.

Почему это важно?

Рендеринг шрифтов — одна из самых уязвимых частей браузера. Ошибки в обработке OpenType-файлов могут приводить не только к некорректному отображению текста, но и к серьёзным уязвимостям. 70% всех багов безопасности в Chrome связаны с управлением памятью, а Rust помогает устранить эту проблему на уровне языка.

Похоже, Google наконец-то заметил, что Firefox уже лет пять как использует Rust, и решил, что пора бы догонять.

📌 Подробнее:
🔗 Статья на русском
🔗 Блог Google

#rust #chrome #opentype
#фишка дня

Когда вызываешь 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 помогает находить такие промисы и не оставлять их без внимания.

#eslint #async
🚀 Качайте английский за счёт компании для работы в IT!

🌍 Хотите выйти на международный уровень в сфере разработки, аналитики, проектного управления или дата-сайенса?

Яндекс Практикум предлагает курсы, которые помогут уверенно общаться на английском языке в профессиональной среде:

Вместо зубрёжки — симуляции интервью, рабочих созвонов и даже смолтока возле кулера
Вас ждут встречи с иностранными IT‑специалистами и много разговорной практики
Мы взяли за основу опыт работы Яндекса с международными партнёрами, чтобы вы освоили навыки, которые ценят зарубежные работодатели
Поможем эффективно совмещать учёбу с работой
Выдадим сертификат об окончании курса

👉 Курс может оплатить ваш работодатель, заполните форму, расскажем, как это устроено.

Реклама, АНО ДПО “Образовательные технологии Яндекса”, ИНН 7704282033, erid: 2VtzqucjFMA
#ссылка дня

Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook #бородач
#пятница дня

Срочно идём и вводим в консоль traceroute -m 50 bad.horse.

И поём все вместе :)

P. S. а цепочка сертификатов https://signed.bad.horse содержит тот же текст.

#такое
#такое дня

Тринадцать лет назад я работал в горнодобывающей/камнеобрабатывающей компании и пилил всякие инхаус-проекты: от учёта блоков, добытых на карьере, до их продажи, каталогизации, распиловки. Вплоть до визуального конструктора надгробий (на котором тщетно пытался сделать бизнес, но сегодня не о нём).

И вот сегодня в девять утра позвонил бывший коллега. С проблемой 🫠

Итак: не грузятся продажи больше, чем за пару дней. Сервер выбивает в пятисотую.

Начал диагностику и понял, что падает по памяти. Причём, не потому что много продаж, а потому что может быть много блоков в продаже.

Ну а памяти-то там кот наплакал. Как крутилось на шаред-хостинге со 128 мегабайтами памяти на PHP 5.3, так и крутится.

Как оказалось, я образца 2012 года, для подсчёта продаж просто грузил в памяти вообще все блоки, а потом их уже фильтровал и считал объёмы.

Казалось бы, какая фигня, скажете вы, ну сколько там тех блоков?

Ну так-то за 13 лет добыли почти 24000 блоков и совершили несколько тысяч продаж. А каждый блок — специфика работы — должен был сохранять историю изменений, распилов, расколов и так далее... Ревизии, короче. Это довольно ощутимый объём данных.

Сначала я предложил просто убрать статистику. Но оказалось, это едва ли не самая нужная фишка — даёт моментальную видимость по контрагенту.

Естественно, код был переписан самым простым способом — пакетной обработкой. Грузим по 5000 блоков, считаем объём. И всё прекрасно заработало.

Это, к слову, о преждевременной оптимизации. Довольно плохой масштабирующийся код прекрасно работал в не самой маленькой компании 13 лет :)

Такой вот blast from the past, ничего не скажешь. Кто бы вообще мог подумать, что это всё будет работать столько лет без проблем.

#php #memory
Please open Telegram to view this post
VIEW IN TELEGRAM
#ссылка дня

Наверное, стоило прислать это сразу после пятничных котов :)

Итак, вашему вниманию: диаграмма разрешения кодов HTTP.

Тут: https://github.com/for-GET/http-decision-diagram?tab=readme-ov-file

Разрешения не в смысле "можно ли", а в смысле процесса принятия решения, когда какой код уместен.

Она довольно большая и основывается на большом количестве RFC: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234 RFC7235.

Ну и там, где в спецификациях оставлены пробелы — дополняет.

Всё весьма хорошо укладывается в голове.

#http #diagram
#фишка дня

Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!


line-height: 1cap;


И вы великолепны.

P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.

#css #бородач
#уязвимость дня

Итак, 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


Две недели! Две недели компания Vercel игнорировала проблему. Да, разные инфлюенсеры, вроде известного Th3o, утверждают, что ни один сайт не был подвержен уязвимости... ну да, а ещё он в Vercel инвестировал.

Очевидно, что уязвимость эта — типичный бэкдор облачно-ориентированной компании для упрощения своих конкретных задач. Но легче от этого не становится.

А, ну и да, официальная рекомендация:

We recommend that all self-hosted Next.js deployments using next start and output: 'standalone' should update immediately.

А остальным — закройте этот заголовок.

#nextjs #vulnerability
Please open Telegram to view this post
VIEW IN TELEGRAM
#инструмент дня

Серверные компоненты React в Parcel.js уже здесь!

Недавно я писал новость о выходе Parcel 2.14.0, который бросает вызов (нет) Next.js и внедряет у себя поддержку серверных компонентов!

И вот, мы дождались примеров!

Тут: https://github.com/parcel-bundler/rsc-examples

1. С сервером
2. Генерация статики — это, пожалуй, моя любимая и довольно недооценённая возможность
3. Клиентские, когда серверные компоненты рендерятся как обычные, интегрируясь в уже сущестующее приложение.

В общем, наконец-то можно нормально пощупать без того, чтобы тянуть весь Next.js. Я очень рад.

#parcel #rsc #react
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Мой самый любимый виджет из всех — Modal Bottom Sheet. Это как в построении маршрута на Google Maps. Шторка, по-нашему. Дёргаешь её туда-сюда, забавно.

Так вот, в мобильных фреймворках вроде того же Flutter и SwiftUI шторка реализована из коробки, а для веба — приходится изгаляться.

Хотя у шторки на мобильных устройствах очень много на самом деле общего со множеством других виджетов: модалка, тост, боковое меню, лайтбокс, стек (как в Tinder). Просто потому что их очень интуитивно можно смахнуть или развернуть жестами.

Так вот, собственно, к чему это я: https://silkhq.co/

Прекрасная библиотека, реализующая шторку и ей подобные виджеты, их анимации и взаимодействия на разных устройствах.

Множество примеров, нативные анимации, жесты. Одна проблема: платная для коммерческого использования. И не открытая.

Две, получается, проблемы :(

P. S. В комментариях пишут, что так-то три проблемы. Третья — React. Штош.

#react #sheet #widget
#видео дня

Прямо сейчас идёт трансляция Epic Web Conf 2025. Конкретно в этот момент — рассказ об фронтенд-инфраструктуре компании ByteDance (стоящей за TikTok). А именно, о RSpack (моя любовь), RSBuild, Lynx. Большое влияние уделено микрофронтендам и Module Federation.

Срочно подключаемся: https://www.youtube.com/watch?v=SDuvi5eUqp0
Media is too big
VIEW IN TELEGRAM
#инструмент дня

Охренеть какая штука!

https://react-explorer.com/

Это обозреватель зависимостей. Я бы даже сказал, созвездия завимимостей и сейчас вы поймёте, почему.

Потому что помимо простого дерева, которое в целом умеет строить кто угодно, тут имеется мини-карта!

Перемещаешься по карте — смотришь подсвеченные созвездия. Инспектор работает на любом реакт-сайте без отдельной установки, потому что построен по принципу React Scan — инджектит React DevTools на страницу.

Да, на минифицированном коде результат получается не очень понятный, но осознать масштаб зависимостей и связи между ними всё же позволяет.

Проект пока не открыт, но находится в открытом тестировании.

#react #analyze #dependencies
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

Я, честно, не считаю вручную акцентированный градиент настолько лучше автоматически созданного по контрасту, но для основных, идейных изображений, наверняка кому-то пригодится.

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач
2025/07/01 01:32:09
Back to Top
HTML Embed Code: