CSS Blossoming Flowers at Magical Night

Анимированная сцена, написанная с помощью SCSS и JavaScript.

Смотреть код

Dashy — это мощная и гибкая панель инструментов для управления и мониторинга ваших сервисов. С ее помощью можно организовать ссылки, отображать виджеты с системной информацией и настраивать интеграции с различными API.

Основные возможности:
✅ Полностью настраиваемый интерфейс
✅ Поддержка тем и кастомных стилей
✅ Встроенные виджеты для мониторинга сервисов
✅ Интеграции с API и сторонними сервисами
✅ Простота развертывания через Docker

https://github.com/Lissy93/dashy

Scrubbing, scrolling and splitting

Анимация при скролле, реализованная при помощи библиотеки gsap.

https://codepen.io/BlogFire/pen/NWYRqmv

Clocktober day 21: Perspective - Стильные часы для вашего сайта

https://codepen.io/jkantner/pen/BaMazpK

Утечка кода инструментария Claude Code из-за забытого в NPM-пакете map-файла

Компания Anthropic по недосмотру опубликовала в составе выпуска NPM-пакета claude-code 2.1.88 полный необфусцированный исходный код инструментария Claude Code на языке TypeScript. Код попал в релиз в составе map-файла cli.js.map, применявшегося в ходе отладки. Для предотвращения подобных утечек разработчикам рекомендуется не забывать добавлять маску *.map в файл .npmignore.

Подробнее:
https://opennet.ru/65114/
https://opennet.me/65114/

Красивая платежная форма на JS с валидацией правильности заполнения полей.

Если в браузере пользователя сохранены платежные данные, то форма и предложит их автозаполнение.

https://codepen.io/myacode/pen/ExPOdBd

Знаете ли вы, что в CSS можно определить поворот с помощью блока turn? 🤩

Variable Fonts and the Web Audio API

Демонстрация Web Audio API, изменяющая переменные шрифты на основе аудиовхода. Реализована с помощью JavaScript.

https://codepen.io/mandymichael/pen/OYpqdP

✨ Поддержка с волшебной палочкой! ✨
GoodClaude — это приложение, которое позволяет отправлять слова поддержки с помощью волшебной палочки. Оно создано на основе BadClaude, но вместо наказаний предлагает только добрые слова.

🚀 Основные моменты:
- Визуализация волшебной палочки с блестками
- Звуковые эффекты при отправке сообщений поддержки
- Список вдохновляющих фраз для Claude
- Возможность кастомизации сообщений в будущем

📌 GitHub: https://github.com/ashley-ha/goodclaude

#javascript

Совет по использованию инструментов Chrome Dev Tools 💡

Знаете ли вы, что с помощью Chrome Dev Tools можно легко отслеживать, какие события срабатывают на элементе, и просматривать свойства этих событий?

JavaScript. Что будет выведено в консоль?

Ответ

Range Slider

Стилизованный input type="range" с градиентной светящейся полосой.

https://codepen.io/jkantner/pen/VwxeeVb

iPhone 14 w/ Dynamic Island

Верстка реализована с использованием препроцессоров Pug и SCSS. Каждая нажимаемая кнопка - это input с type="radio", при нажатии на который активируются определенные стили.

https://codepen.io/lukemeyrick/pen/poVyEdZ

#вопросы_с_собеседований
Почему результатом сравнения двух похожих объектов является false?

В JS объекты и примитивы сравниваются по-разному. Примитивы сравниваются по значению. Объекты — по ссылке или адресу в памяти, где хранится переменная. Вот почему первый console.log возвращает false, а второй — true. Переменные «a» и «c» ссылаются на один объект, а переменные «a» и «b» — на разные объекты с одинаковыми свойствами и значениями.

Совет по CSS 💡

Легко сделать раскрывающееся меню удобным для клавиатуры с помощью CSS 🤩

🚀 Ты всё ещё называешь обёртку над ChatGPT «AI-продуктом»?

Пока ты пишешь промпты - рынок уже ушёл дальше.

Сейчас выигрывают не те, кто умеет красиво формулировать запросы, а те, кто строит агентные системы:
- принимают решения сами
- ходят в API
- работают с Postgres и Redis
- управляют браузером через Playwright
- доводят задачи до результата без человека

И вот правда, о которой мало говорят:

90% таких систем умирают между ноутбуком и продом.

Работает локально. Ломается в реальности.
Нет архитектуры. Нет устойчивости. Нет деплоя.

AI Agents Engineering - курс со Stepik, который закрывает этот разрыв.

- LangGraph, AutoGen, Computer Use
- архитектура агентов, а не «скрипты на коленке»
- LLMOps, логирование, стабильность
- деплой в Docker и работа в проде

8 модулей, 120+ шагов, всё через практику.

На выходе не «сертификат ради галочки», а:
- рабочий production-агент
- понимание, как строить такие системы с нуля
- навыки, за которые уже платят

Сейчас самое окно входа.
Через полгода это станет базой, а не преимуществом.

Скидка 55% действует ещё 48 часов: https://stepik.org/a/276971/

slowroads

Пора за руль: это гонка с процедурной генерацией пейзажей и сменой дня/ночи прямо в браузере. Работает только на девайсах с клавиатурой.

slowroads.io

Анимированный SVG-логотип

Впервые я увидел такую анимацию штрихов в SVG в Material Line Icons Вячеслава Трушкина. Это было круто, но я никогда не задумывался о том, чтобы сделать что-то свое, пока не увидел баннер Му-Ан Чиоу на ее сайте. Я вдруг почувствовал, что тоже хочу быть крутым парнем!

https://antfu.me/posts/animated-svg-logo