Как проверить обработчик postMessage в iframe
postMessage в iframe позволяет виджету и родительской странице обмениваться данными, но без проверок любое окно может отправить сообщение. Для resize-обработчика нужно сверять
https://blog.master.dev/testing-an-iframes-postmessage-handler/
postMessage в iframe позволяет виджету и родительской странице обмениваться данными, но без проверок любое окно может отправить сообщение. Для resize-обработчика нужно сверять
event.origin и event.source, а затем ограничивать формат и диапазон данных.https://blog.master.dev/testing-an-iframes-postmessage-handler/
❤3👍3
Tamagui 3 добавил Tailwind-подобные пропсы
Tamagui 3 — система стилей и набор компонентов для React и React Native. В ее новой версии появились Tailwind-подобные пропсы и поддержка React Strict DOM.
Поддержка React Strict DOM пока важна для тех, кто собирает общий интерфейс для веба и нативных приложений, потому что она помогает держать один код без лишних обходных решений.
https://tamagui.dev/blog/version-three
Tamagui 3 — система стилей и набор компонентов для React и React Native. В ее новой версии появились Tailwind-подобные пропсы и поддержка React Strict DOM.
Поддержка React Strict DOM пока важна для тех, кто собирает общий интерфейс для веба и нативных приложений, потому что она помогает держать один код без лишних обходных решений.
https://tamagui.dev/blog/version-three
👍3❤2
Конвертер кривых CSS и Spine 4.2
Riggy переводит CSS
https://riggyapp.com/tools/spine-bezier-curve
Riggy переводит CSS
cubic-bezier и пресеты ease в массив curve для таймлайна Spine 4.2 и обратно. Кривая привязывается к первой из двух ключевых точек, а на последнем ключе она игнорируется.https://riggyapp.com/tools/spine-bezier-curve
👍4❤2
Визуализатор design tokens показывает связи с компонентами
Интерактивный визуализатор design tokens помогает смотреть, как токены связаны с компонентами и друг с другом в дизайн системе. В нём уже загружены Carbon, SLDS и Stellar, а свои системы можно добавить отдельно.
По компонентам и токенам можно переходить кликами, а поиск быстро находит нужный токен и показывает, где он используется.
https://design-tokens-visualizer.vercel.app/
Интерактивный визуализатор design tokens помогает смотреть, как токены связаны с компонентами и друг с другом в дизайн системе. В нём уже загружены Carbon, SLDS и Stellar, а свои системы можно добавить отдельно.
По компонентам и токенам можно переходить кликами, а поиск быстро находит нужный токен и показывает, где он используется.
https://design-tokens-visualizer.vercel.app/
design-tokens-visualizer.vercel.app
Design Tokens Visualizer | Explore Token-Component Relationships
Interactive visualization tool for exploring design tokens and their relationships across design systems. Pre-loaded with Carbon, SLDS, and Stellar.
👍4
Угадайте HTTP-статус по бытовой ситуации
Квиз по HTTP-статусам переводит 12 кодов в бытовые сцены и помогает не путать 401, 403, 429, 503 и 504. Для 429 клиенту стоит читать
https://habr.com/ru/articles/1097542/
Квиз по HTTP-статусам переводит 12 кодов в бытовые сцены и помогает не путать 401, 403, 429, 503 и 504. Для 429 клиенту стоит читать
Retry-After, а при 413 и 304 проверьте лимиты загрузки и версионирование больших ответов.https://habr.com/ru/articles/1097542/
👍4❤1
Chrome 157 добавил новые CSS-возможности
Chrome 157 в бете принес
https://chromestatus.com/release-notes/157
Chrome 157 в бете принес
corner shorthand, значение <string> для text-overflow и поддержку anchor-valid. Chrome 156 уже вышел в стабильной версии с random(), а unload больше не срабатывает по умолчанию, поэтому используйте pagehide или visibilitychange.https://chromestatus.com/release-notes/157
👍4❤2
ИИ-агенты научились рисовать схемы вместо простыней
Появился blueprint4llm, open-source тулза для превращения plan.md в HTML или PDF с Wiremark-скетчами и Mermaid-диаграммами. Встроенный предпросмотр пересобирает документ при сохранении, но поддержка Wiremark и Mermaid в редакторах и вьюверах остаётся не везде.
https://habr.com/ru/articles/1096958/
Появился blueprint4llm, open-source тулза для превращения plan.md в HTML или PDF с Wiremark-скетчами и Mermaid-диаграммами. Встроенный предпросмотр пересобирает документ при сохранении, но поддержка Wiremark и Mermaid в редакторах и вьюверах остаётся не везде.
https://habr.com/ru/articles/1096958/
❤6
Levelrail замена Vercel и Heroku для своих серверов
Levelrail — open source PaaS для self-hosted деплоя, который разворачивает приложения на Linux-сервере без Kubernetes. Он даёт HTTPS, логи, метрики и откат в один клик, а установка идёт одним Go бинарником.
На сервере нужен root и systemd, а при отсутствии Docker установщик поставит его сам.
https://github.com/glincker/levelrail
Levelrail — open source PaaS для self-hosted деплоя, который разворачивает приложения на Linux-сервере без Kubernetes. Он даёт HTTPS, логи, метрики и откат в один клик, а установка идёт одним Go бинарником.
На сервере нужен root и systemd, а при отсутствии Docker установщик поставит его сам.
https://github.com/glincker/levelrail
🔥6❤1🤨1
WebP наконец стало удобно использовать
WebP перестал быть экзотикой: поддержка дошла до всех основных браузеров, а в Pixelmator Pro с ним теперь удобно работать. Формат часто даёт меньший размер, чем JPEG и PNG при том же качестве, но в Photoshop его по-прежнему нельзя нормально сохранить через
https://anderegg.ca/2026/10/08/i-guess-im-using-webp-now
WebP перестал быть экзотикой: поддержка дошла до всех основных браузеров, а в Pixelmator Pro с ним теперь удобно работать. Формат часто даёт меньший размер, чем JPEG и PNG при том же качестве, но в Photoshop его по-прежнему нельзя нормально сохранить через
Save for Web и Export As.https://anderegg.ca/2026/10/08/i-guess-im-using-webp-now
anderegg.ca
I guess I’m using WebP now?
After using the same few image formats for 20+ years, I’m now on the WebP bandwagon. That isn’t something I thought I’d ever say. Now I’m wondering how soon it’ll be before I can use a couple more.
🔥3👍1
Вышел Bootstrap 6 Alpha
Вышла первая alpha-версия Bootstrap 6, где дизайн-система переведена на Sass modules, ESM-only JavaScript и новые CSS-возможности. Для v6 нужен Chrome и Edge 130, Firefox 132 или Safari 18, а старый Bootstrap 5 остаётся доступен и поддерживается.
https://blog.getbootstrap.com/2026/10/08/bootstrap-6-alpha/
Вышла первая alpha-версия Bootstrap 6, где дизайн-система переведена на Sass modules, ESM-only JavaScript и новые CSS-возможности. Для v6 нужен Chrome и Edge 130, Firefox 132 или Safari 18, а старый Bootstrap 5 остаётся доступен и поддерживается.
https://blog.getbootstrap.com/2026/10/08/bootstrap-6-alpha/
👍3😁3
Screen Ruler измеряет и правит страницы в Chrome
Screen Ruler — бесплатное расширение для Chrome, которое измеряет расстояния, смотрит CSS и позволяет править страницу прямо в браузере. В нём есть проверка контраста WCAG, поиск SEO-проблем и режимы для цветов, шрифтов и ассетов. Расширение работает во всех современных Chromium-браузерах и сохраняет правки по сайтам, поэтому после обновления страницы они возвращаются.
https://www.screen-ruler.com/
Screen Ruler — бесплатное расширение для Chrome, которое измеряет расстояния, смотрит CSS и позволяет править страницу прямо в браузере. В нём есть проверка контраста WCAG, поиск SEO-проблем и режимы для цветов, шрифтов и ассетов. Расширение работает во всех современных Chromium-браузерах и сохраняет правки по сайтам, поэтому после обновления страницы они возвращаются.
https://www.screen-ruler.com/
👍2
👾 Открытое собеседование для Frontend-разработчиков: интервьюер из R-Vision, ex-Сбер
12 ноября в 19:00 мск приходи посмотреть, как проходит реальное техническое интервью на позицию Frontend-разработчика
Интервьюер: Даниил Дмитриев, Frontend-разработчик в R-Vision, ex-Сбер. Работает с React и TypeScript, совмещает разработку с ролью тимлида, менторит коллег и проводит код-ревью
Без сценария и заранее известных вопросов ↓
В роли кандидата – действующий разработчик, который впервые увидит задания прямо на эфире
Обычно ты видишь собеседование только со стороны кандидата. Здесь сможешь посмотреть на процесс глазами интервьюера:
В конце Даниил ответит на вопросы зрителей
Эфир проходит в рамках менторской программы ШОРТКАТ. Мы помогаем разработчикам расти в грейде и зарплате. В нашем сообществе более 150 менторов из бигтеха, а наши менти уже получили более 500 офферов
Участие бесплатное 🔥
Зарегистрироваться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе.
12 ноября в 19:00 мск приходи посмотреть, как проходит реальное техническое интервью на позицию Frontend-разработчика
Интервьюер: Даниил Дмитриев, Frontend-разработчик в R-Vision, ex-Сбер. Работает с React и TypeScript, совмещает разработку с ролью тимлида, менторит коллег и проводит код-ревью
Без сценария и заранее известных вопросов ↓
В роли кандидата – действующий разработчик, который впервые увидит задания прямо на эфире
Обычно ты видишь собеседование только со стороны кандидата. Здесь сможешь посмотреть на процесс глазами интервьюера:
— какие темы и задачи проверяют на Frontend-собеседованиях
— как кандидат отвечает и где возникают сложности
— на что Даниил обращает внимание при оценке ответов
В конце Даниил ответит на вопросы зрителей
Эфир проходит в рамках менторской программы ШОРТКАТ. Мы помогаем разработчикам расти в грейде и зарплате. В нашем сообществе более 150 менторов из бигтеха, а наши менти уже получили более 500 офферов
Участие бесплатное 🔥
Зарегистрироваться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе.
👍3👨💻2