This media is not supported in your browser
VIEW IN TELEGRAM
Лучший дев-портфолио снова в строю!
Бруно Симон опять переплюнул сам себя и выкатил новую версию своей легендарной личной страницы.
Сайт сделан на Three.js и WebGPU, выглядит просто нереально круто:
→ http://bruno-simon.com
@WebDev_Plus
Бруно Симон опять переплюнул сам себя и выкатил новую версию своей легендарной личной страницы.
Сайт сделан на Three.js и WebGPU, выглядит просто нереально круто:
→ http://bruno-simon.com
@WebDev_Plus
❤6
В последнем апдейте Vue Language Tools для vuejs директива v-for теперь ведёт себя с ключами типа number так же, как TypeScript и рантайм Vue.js: ключи автоматически считаются строками. Больше консистентности, меньше сюрпризов.
И это ещё не всё! Добавили поддержку Template Literal Types в v-for: если у ключа union из числовых литеральных типов, он автоматически "строкифицируется"
1 | 2 → "1" | "2"
@WebDev_Plus
И это ещё не всё! Добавили поддержку Template Literal Types в v-for: если у ключа union из числовых литеральных типов, он автоматически "строкифицируется"
1 | 2 → "1" | "2"
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome DevTools MCP добавили улучшение, о котором просили многие 🦌
Новый апдейт даёт возможность агентам напрямую подключаться к активным сессиям браузера.
Представьте, что вы хотите, чтобы ваш агент по программированию исправил проблему, доступ к которой возможен только после авторизации. Теперь ваш агент может напрямую получить доступ к вашей текущей сессии просмотра, не требуя дополнительной авторизации.
Теперь агенты могут получать доступ к активным сеансам отладки в пользовательском интерфейсе DevTools. Например, если вы обнаружите запрос с ошибкой на панели «Сеть» в Chrome DevTools, выберите запрос и попросите своего агента исследовать его. То же самое работает и с элементами, выбранными на панели «Элементы».
@WebDev_Plus
Новый апдейт даёт возможность агентам напрямую подключаться к активным сессиям браузера.
Представьте, что вы хотите, чтобы ваш агент по программированию исправил проблему, доступ к которой возможен только после авторизации. Теперь ваш агент может напрямую получить доступ к вашей текущей сессии просмотра, не требуя дополнительной авторизации.
Теперь агенты могут получать доступ к активным сеансам отладки в пользовательском интерфейсе DevTools. Например, если вы обнаружите запрос с ошибкой на панели «Сеть» в Chrome DevTools, выберите запрос и попросите своего агента исследовать его. То же самое работает и с элементами, выбранными на панели «Элементы».
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
Наконец-то! Можно начинать прощаться с new Date() в JS.
Temporal API доехал до Google Chrome 144.
Это новый способ работать с датами и временем.
Там куча утилит и улучшений:
@WebDev_Plus
Temporal API доехал до Google Chrome 144.
Это новый способ работать с датами и временем.
Там куча утилит и улучшений:
// 1) Разница между датами - без миллисекунд и без головняка
const start = Temporal.PlainDate.from('2026-01-10')
const end = Temporal.PlainDate.from('2026-01-30')
console.log(`Длительность: ${start.until(end).days} дней`)
// Длительность: 20
// 2) Создаём время без даты и таймзоны
const opensAt = Temporal.PlainTime.from('09:30')
console.log(`Открывается в ${opensAt.hour} часов и ${opensAt.minute} минут`)
// Открывается в 9 часов и 30 минут
// 3) Конвертим таймзоны без боли
const meeting = Temporal.ZonedDateTime.from(
'2026-03-15T18:00[Europe/Madrid]'
)
console.log('Мадрид:', meeting.toString())
console.log('Токио:', meeting.withTimeZone('Asia/Tokyo').toString())
// 4) Прибавляем время, не ломая даты
const release = Temporal.PlainDate.from('2026-02-01')
console.log('Следующий релиз:', release.add({ months: 1 }).toString())
// Следующий релиз: 2026-03-01
// 5) Instant - точка во времени (логи, события, метрики)
const now = Temporal.Now.instant()
console.log('Точный таймстамп:', now.toString())
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Большинство CSS-переходов плавные, но display переключается мгновенно. allow-discrete делает так, что элемент еще немного остается видимым, чтобы анимация выхода выглядела гладко, и только потом уходит в display: none.
Ключевое слово allow-discrete применяет тайминги transition к дискретным свойствам. Для exit-анимаций элемент остается видимым, проигрывает переход, а затем переключается в display: none уже после завершения transition.
Подробнее на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior
Свойство overlay управляет тем, остается ли диалог в top layer во время перехода. Без него диалог сразу “провалится” назад, за другой контент.
MDN: https://developer.mozilla.org/en-US/docs/Glossary/Top_layer
CSS-сниппет:
И:
@WebDev_Plus
Ключевое слово allow-discrete применяет тайминги transition к дискретным свойствам. Для exit-анимаций элемент остается видимым, проигрывает переход, а затем переключается в display: none уже после завершения transition.
Подробнее на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior
Свойство overlay управляет тем, остается ли диалог в top layer во время перехода. Без него диалог сразу “провалится” назад, за другой контент.
MDN: https://developer.mozilla.org/en-US/docs/Glossary/Top_layer
CSS-сниппет:
dialog {
opacity: 1;
scale: 1;
transition:
opacity 0.2s ease-out,
scale 0.2s ease-out,
overlay 0.2s ease-out allow-discrete,
display 0.2s ease-out allow-discrete;
@starting-style {
opacity: 0;
scale: 0.95;
}
}И:
dialog::backdrop {
background-color: rgb(0 0 0 / 0.5);
transition:
background-color 0.2s ease-out,
overlay 0.2s ease-out allow-discrete,
display 0.2s ease-out allow-discrete;
@starting-style {
background-color: rgb(0 0 0 / 0);
}
}@WebDev_Plus
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Не допускайте появления растянутых изображений на вашем сайте.
Это выглядит ужасно! И это легко исправить с помощью одной строки CSS
@WebDev_Plus
Это выглядит ужасно! И это легко исправить с помощью одной строки CSS
@WebDev_Plus
Запускает GitHub Actions локально в VS Code.
https://github.com/SanjulaGanepola/github-local-actions/
@WebDev_Plus
https://github.com/SanjulaGanepola/github-local-actions/
@WebDev_Plus
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Делись своим localhost с кем угодно за секунды
через URL, доступный по всему миру, с HTTPS
Это альтернатива ngrok. Без регистрации и бесплатно
@WebDev_Plus
через URL, доступный по всему миру, с HTTPS
$ brew install cloudflared
$ cloudflared tunnel --url <твой-локальный-домен>
Это альтернатива ngrok. Без регистрации и бесплатно
@WebDev_Plus
🔥5❤🔥2❤1👍1
Ну всё, ребята. Этот день настал 😱
Popover на чистом CSS (элемент popover + анимации + привязка к якорю) теперь стабильно работает во всех базовых браузерах.
И да, конечно, он уже доступен в CSS-Zero.
Репозиторий:
http://github.com/lazaronixon/css-zero
Демо:
https://csszero.lazaronixon.com/lookbook/inspect/popover/default
@WebDev_Plus
Popover на чистом CSS (элемент popover + анимации + привязка к якорю) теперь стабильно работает во всех базовых браузерах.
И да, конечно, он уже доступен в CSS-Zero.
Репозиторий:
http://github.com/lazaronixon/css-zero
Демо:
https://csszero.lazaronixon.com/lookbook/inspect/popover/default
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
В следующем обновлении языковых инструментов Vue выкатывают совершенно новую фичу Rich Hover Message.
Наводишь курсор на любой Vue-компонент и сразу видишь аккуратно отформатированные Props и Slots, все генерируется автоматически.
Сделано, чтобы прокачать DX на новый уровень. Подробности скоро, следите за обновлениями.
@WebDev_Plus
Наводишь курсор на любой Vue-компонент и сразу видишь аккуратно отформатированные Props и Slots, все генерируется автоматически.
Сделано, чтобы прокачать DX на новый уровень. Подробности скоро, следите за обновлениями.
@WebDev_Plus
❤1
CSS-совет:
Используй svh, чтобы мобильная адресная строка не перекрывала интерфейс. Эта единица гарантирует, что layout всегда помещается в реально видимую область экрана.
@WebDev_Plus
Используй svh, чтобы мобильная адресная строка не перекрывала интерфейс. Эта единица гарантирует, что layout всегда помещается в реально видимую область экрана.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Этот эффект на CSS и JavaScript просто огонь.
Подсвечивает область, по которой проходит курсор. Очень трендовый приём в дизайне.
Исходный код и демо здесь
@WebDev_Plus
Подсвечивает область, по которой проходит курсор. Очень трендовый приём в дизайне.
Исходный код и демо здесь
@WebDev_Plus
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Прокачай любой UI красивыми анимированными фонами 🦄
Это open-source коллекция готовых компонентов анимированных фонов, которые можно сразу закидывать в проекты. Всё сделано на Tailwind CSS и JSX, поэтому они без боли встраиваются в современные React и Next.js воркфлоу.
Можно посмотреть список компонентов, превью анимаций и сразу залезть в исходники, чтобы кастомизировать под себя или переиспользовать в своих приложениях :)
github.com/Netmods/Drapes-ui
@WebDev_Plus
Это open-source коллекция готовых компонентов анимированных фонов, которые можно сразу закидывать в проекты. Всё сделано на Tailwind CSS и JSX, поэтому они без боли встраиваются в современные React и Next.js воркфлоу.
Можно посмотреть список компонентов, превью анимаций и сразу залезть в исходники, чтобы кастомизировать под себя или переиспользовать в своих приложениях :)
github.com/Netmods/Drapes-ui
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
В open source выходит jax-js - библиотека машинного обучения для веба, полностью на чистом JavaScript.
jax-js — первый ML-компилятор, который работает прямо в браузере и генерирует быстрые WebGPU-ядра. Проект написан с нуля за последний год как личный сайд-проект.
Подробности: https://ekzhang.substack.com/p/jax-js-an-ml-library-for-the-web
Python и JavaScript - самые популярные языки в мире.
Python нужен для ML,
JavaScript — нативный язык веба.
Проект пока на ранней стадии, но jax-js задумывается как по-настоящему «реальная ML-библиотека» для веба: с JIT-фьюжном ядер под WebGPU и полноценным API, а не просто рантайм.
@WebDev_Plus
jax-js — первый ML-компилятор, который работает прямо в браузере и генерирует быстрые WebGPU-ядра. Проект написан с нуля за последний год как личный сайд-проект.
Подробности: https://ekzhang.substack.com/p/jax-js-an-ml-library-for-the-web
Python и JavaScript - самые популярные языки в мире.
Python нужен для ML,
JavaScript — нативный язык веба.
Проект пока на ранней стадии, но jax-js задумывается как по-настоящему «реальная ML-библиотека» для веба: с JIT-фьюжном ядер под WebGPU и полноценным API, а не просто рантайм.
@WebDev_Plus
❤3
API шаблонов URL теперь доступен!
С его помощью можно сопоставлять URL и извлекать из них части, не изобретая собственную логику роутинга. Поддерживаются литералы, подстановки, именованные группы и даже ограничения на основе регулярных выражений.
Как это работает
@WebDev_Plus
С его помощью можно сопоставлять URL и извлекать из них части, не изобретая собственную логику роутинга. Поддерживаются литералы, подстановки, именованные группы и даже ограничения на основе регулярных выражений.
Как это работает
@WebDev_Plus
Программа для скачивания видео с более чем 1000 веб-сайтов на базе yt-dlp
https://github.com/nexmoe/VidBee/
@WebDev_Plus
https://github.com/nexmoe/VidBee/
@WebDev_Plus
👍1