This media is not supported in your browser
VIEW IN TELEGRAM
Создавайте видео с помощью HTML, CSS и JS. Как?
Просто установив один Agent Skill.
Он называется HyperFrames, это опенсорс проект, и он работает с любым ИИ. Результат впечатляющий.
→ http://github.com/heygen-com/hyperframes
➡️ @FrontendPortal
Просто установив один Agent Skill.
Он называется HyperFrames, это опенсорс проект, и он работает с любым ИИ. Результат впечатляющий.
→ http://github.com/heygen-com/hyperframes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13👍10🤣3🔥2🌚1
Сегодня исторический день для JavaScript!
API Temporal API теперь доступен в Node.js.
Наконец-то нормальный API для работы с датами.
Прощай new Date("2026-04-28")
Здравствуй Temporal.PlainDate.from("2026-04-28")
✓ Даты без странных таймзон
✓ Можно нормально прибавлять дни, месяцы и годы без багов
✓ Прощай, куча проблем с Date
➡️ @FrontendPortal
API Temporal API теперь доступен в Node.js.
Наконец-то нормальный API для работы с датами.
Прощай new Date("2026-04-28")
Здравствуй Temporal.PlainDate.from("2026-04-28")
✓ Даты без странных таймзон
✓ Можно нормально прибавлять дни, месяцы и годы без багов
✓ Прощай, куча проблем с Date
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥115❤16👍4
Джош Комо снова радует – на этот раз интерактивным туториалом про скролл-зависимые анимации в современном вебе. Это когда элементы двигаются, появляются или трансформируются прямо в такт прокрутке страницы, создавая более живой и управляемый интерфейс.
Поддержка около 85%, в Firefox пока за флагом
https://www.joshwcomeau.com/animation/scroll-driven-animations/
➡️ @FrontendPortal
Поддержка около 85%, в Firefox пока за флагом
https://www.joshwcomeau.com/animation/scroll-driven-animations/
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Анимации, запускаемые при прокрутке, на чистом CSS!
Никакого JavaScript. Никаких библиотек. Никаких странных костылей.
Самое приятное: работает во всех современных браузерах.
И реализуется это очень просто, примерно так 👆
➡️ @FrontendPortal
Никакого JavaScript. Никаких библиотек. Никаких странных костылей.
Самое приятное: работает во всех современных браузерах.
И реализуется это очень просто, примерно так 👆
Please open Telegram to view this post
VIEW IN TELEGRAM
❤45🔥33👍7🤔1
Я догадывался, что 2026 станет годом шейдеров, не зная, что в Canvas появится HTML.
Это будет огромным прорывом для моушн-графики и программируемого видео👍
https://x.com/Remotion/status/2051235642424631514?s=20
➡️ @FrontendPortal
Это будет огромным прорывом для моушн-графики и программируемого видео
https://x.com/Remotion/status/2051235642424631514?s=20
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤20👍11🤯5
This media is not supported in your browser
VIEW IN TELEGRAM
Огромная библиотека классных цветовых палитр для твоих проектов. Всё чётко отсортировано, можно искать по трендам и категориям
Забираем здесь🍯
➡️ @FrontendPortal | #resourse
Забираем здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21👍12
Please open Telegram to view this post
VIEW IN TELEGRAM
😁104💯9❤6🤣5
This media is not supported in your browser
VIEW IN TELEGRAM
Prompt API скоро появится в браузере
Теперь можно использовать ИИ напрямую из JavaScript.
Без бэкенда и серверов, без скрытых расходов.
Под капотом используется Gemini Nano – модель, встроенная в Chrome, которая отвечает на промпты прямо в браузере.
Есть и спорные моменты. Этот новый API не поддержали Apple и Mozilla. Microsoft и W3C тоже выразили сомнения. Да и среди разработчиков поддержки немного.
Пока он будет доступен только в Google Chrome.
Плюс это загрузка на 4 ГБ… Что думаете?
➡️ @FrontendPortal
Теперь можно использовать ИИ напрямую из JavaScript.
Без бэкенда и серверов, без скрытых расходов.
Под капотом используется Gemini Nano – модель, встроенная в Chrome, которая отвечает на промпты прямо в браузере.
Есть и спорные моменты. Этот новый API не поддержали Apple и Mozilla. Microsoft и W3C тоже выразили сомнения. Да и среди разработчиков поддержки немного.
Пока он будет доступен только в Google Chrome.
Плюс это загрузка на 4 ГБ… Что думаете?
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣18🤯10❤5👍5🥱4🌚2😱1
Адаптивные <img> стали проще
Больше не нужно вручную прописывать брейкпоинты
Просто добавьте
Теперь во всех последних версиях браузеров.
Скриншот: как использовать это как прогрессивное улучшение
https://news.ycombinator.com/item?id=47875420
➡️ @FrontendPortal
Больше не нужно вручную прописывать брейкпоинты
Просто добавьте
sizes="auto" для лениво загружаемых изображений, и браузер сам определит подходящий размер из вашего srcsetТеперь во всех последних версиях браузеров.
Скриншот: как использовать это как прогрессивное улучшение
https://news.ycombinator.com/item?id=47875420
Please open Telegram to view this post
VIEW IN TELEGRAM
❤49👍21🔥4👨💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Новое CSS-свойство
https://chromestatus.com/feature/5104141688635392?gate=5188568263426048
➡️ @FrontendPortal
text-fit для подгонки текста под ширину контейнераhttps://chromestatus.com/feature/5104141688635392?gate=5188568263426048
Please open Telegram to view this post
VIEW IN TELEGRAM
❤51🔥31👍25
This media is not supported in your browser
VIEW IN TELEGRAM
Можно закрепить скролл чата внизу через CSS
Браузеры по умолчанию используют scroll anchoring, чтобы предотвращать сдвиги лейаута
Если отключить
➡️ @FrontendPortal
overflow-anchor, без использования MutationObserver или функций scrollTo()<div id="scroller">
...
...
<div id="anchor"></div>
</div>
#scroller * { overflow-anchor: none; }
#anchor { overflow-anchor: auto; height: 1px; }Браузеры по умолчанию используют scroll anchoring, чтобы предотвращать сдвиги лейаута
Если отключить
overflow-anchor у дочерних элементов и заново включить его для 1px anchor-элемента в конце списка, скролл будет автоматически прилипать к новому контенту и следовать вниз сам по себе.Please open Telegram to view this post
VIEW IN TELEGRAM
❤53🔥25👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Принес кладезь SVG-иконок брендов
Огромная открытая библиотека логотипов, которые можно копировать и использовать в своих приложениях, на сайтах или в документации
→ 4000+ иконок брендов
→ несколько вариантов (цветные, монохромные, тёмные, wordmark)
→ копирование в формате SVG, JSX / React, через CDN, API и др.
→ сделано для разработчиков и дизайнеров
Забираем тут👍
➡️ @FrontendPortal
Огромная открытая библиотека логотипов, которые можно копировать и использовать в своих приложениях, на сайтах или в документации
→ 4000+ иконок брендов
→ несколько вариантов (цветные, монохромные, тёмные, wordmark)
→ копирование в формате SVG, JSX / React, через CDN, API и др.
→ сделано для разработчиков и дизайнеров
Забираем тут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26❤10🥱3🏆1
This media is not supported in your browser
VIEW IN TELEGRAM
Новая версия Tailwind 4.3! И внимание…
Наконец-то можно кастомизировать скроллбары через классы:
➡️ @FrontendPortal
Наконец-то можно кастомизировать скроллбары через классы:
scrollbar-thumb-* и scrollbar-track-*Please open Telegram to view this post
VIEW IN TELEGRAM
❤31👍17🤣9🥱4🤔2🌚1
Forwarded from IT Portal
Если вы используете
Говорю прямо и без фильтров, чтобы вы сразу обратили внимание.
Вчера пакеты TanStack в npm были скомпрометированы. Это одни из самых широко используемых библиотек в JavaScript-экосистеме
А дальше цепочка пошла в Mistral, OpenSearch, UiPath, PyPI...
Потому что для многих атак даже не нужно, чтобы вы что-то импортировали. Достаточно одной установки, чтобы заразить вашу машину
Как именно?
Через скрытые скрипты в
Хорошая новость – защита есть:
@IT_Portal
npm install, вы в зоне рискаГоворю прямо и без фильтров, чтобы вы сразу обратили внимание.
Вчера пакеты TanStack в npm были скомпрометированы. Это одни из самых широко используемых библиотек в JavaScript-экосистеме
А дальше цепочка пошла в Mistral, OpenSearch, UiPath, PyPI...
Потому что для многих атак даже не нужно, чтобы вы что-то импортировали. Достаточно одной установки, чтобы заразить вашу машину
Как именно?
Через скрытые скрипты в
preinstall или postinstall, которые выполняются во время установки пакета.Хорошая новость – защита есть:
① Используй pnpm 11
В нём защита от подобных атак встроена по умолчанию.
② Если ты всё ещё сидишь на pnpm 10, npm, yarn или bun
Включи minimumReleaseAge и поставь значение 1440. Это блокирует установку версий, опубликованных в тот же день.
③ Блокируй install-скрипты по умолчанию
pnpm не даёт зависимостям просто так выполнять код на твоей машине во время установки.
@IT_Portal
❤42🌚2🤣2
This media is not supported in your browser
VIEW IN TELEGRAM
Вышел React Doctor v2!
Он находит и исправляет ошибки в вашем React-приложении.
✓ Лишние useState и useEffect
✓ Ошибки accessibility и производительности
✓ Избегаемый prop drilling с помощью Context
Опенсорс:
➡️ @FrontendPortal
Он находит и исправляет ошибки в вашем React-приложении.
✓ Лишние useState и useEffect
✓ Ошибки accessibility и производительности
✓ Избегаемый prop drilling с помощью Context
Опенсорс:
$ npx react-doctor@latestPlease open Telegram to view this post
VIEW IN TELEGRAM
❤33👍16
Совет по JS
Самый простой способ получать/устанавливать query-параметры
Можно использовать свойство
➡️ @FrontendPortal | #tip by Shripal Soni
Самый простой способ получать/устанавливать query-параметры
Можно использовать свойство
searchParams (экземпляр URLSearchParams) у объекта URL, чтобы получать и задавать query-параметры URLPlease open Telegram to view this post
VIEW IN TELEGRAM
❤34👍16
Please open Telegram to view this post
VIEW IN TELEGRAM
😁102❤9
This media is not supported in your browser
VIEW IN TELEGRAM
В Next.js обнаружили самую серьёзную уязвимость за всю его историю – CVSS 8.6
→ затронуты версии 13.4.13+, 14.x, 15.x и 16.0.0–16.2.4
→ злоумышленники могут получить доступ к вашим внутренним сервисам, cloud credentials, API-ключам и админ-панелям
→ аутентификация не требуется
→ достаточно одного специально сформированного запроса
→ прямо сейчас уязвимы примерно 79 000 инстансов
→ приложения на Vercel защищены, self-hosted — нет
Срочно обновитесь до 15.5.18 или 16.2.6🚨
➡️ @FrontendPortal
→ затронуты версии 13.4.13+, 14.x, 15.x и 16.0.0–16.2.4
→ злоумышленники могут получить доступ к вашим внутренним сервисам, cloud credentials, API-ключам и админ-панелям
→ аутентификация не требуется
→ достаточно одного специально сформированного запроса
→ прямо сейчас уязвимы примерно 79 000 инстансов
→ приложения на Vercel защищены, self-hosted — нет
Срочно обновитесь до 15.5.18 или 16.2.6
Please open Telegram to view this post
VIEW IN TELEGRAM
❤15😁12👍9🤯6🤔5😱4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS: простой способ получения доступа к любому значению атрибута в виде строки с помощью функции
CSS-функция, которая умеет получать значение любого атрибута элемента, а потом использовать это значение прямо в стилях
Самые распространённые случаи использования этой функции - для создания тултипа(пример на гифке) и также для отображение значения атрибута
Попробовать можно здесь
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
attr()CSS-функция, которая умеет получать значение любого атрибута элемента, а потом использовать это значение прямо в стилях
Самые распространённые случаи использования этой функции - для создания тултипа(пример на гифке) и также для отображение значения атрибута
href после текста ссылки при печати страницы@media print {
a::after {
content: " [" attr(href) "]";
}
}Попробовать можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25🔥10👍5💯2
Please open Telegram to view this post
VIEW IN TELEGRAM
😁42❤7