React JS

iPhone 14 w/ Dynamic Island

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

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

👣 На Stepik обновили курс «Rust: полный курс разработчика. С нуля до профи»

Представьте: через три месяца вы открываете чужой Rust-код и читаете его как книгу.

Arc<Mutex<T>> не вызывает панику. impl Future не пугает. Вы точно знаете, почему компилятор ругается и как это починить за 10 секунд.

Это не фантазия. Это результат 50 уроков, в которых каждая концепция объясняется через код и закрепляется практикой.

Ownership, traits, generics, async, unsafe - всё, что казалось магией, станет рабочим инструментом.

А бонусом - портфолио проектов: от CLI-утилит до REST API и WebAssembly.

Вы и так знаете, что Rust - ваш следующий язык. Этот курс просто сделает это реальностью.

Сегодня - 55% процентов от цены, торопись: https://stepik.org/a/269250/

Range Slider

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

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

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

Ответ

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

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

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

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

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

#javascript

Variable Fonts and the Web Audio API

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

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

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

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

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

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

Утечка кода инструментария 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/

🌟 DOOM на CSS

Представлен проект cssDOOM, подготовивший реализацию игры DOOM, использующую для отрисовки только CSS, без применения элемента canvas и WebGL.

Всё что выводится на экран, включая спрайты, текстурированные стены, уровни и эффекты, оформлено через стилизованные при помощи CSS элементы <div>, размещаемые в 3D-пространстве при помощи CSS-свойств "transform" и"transform-style: preserve-3d". Игровая логика написана на JavaScript, используя в качестве эталона оригинальный код игры DOOM, открытый компанией id Software. Наработки проекта опубликованы под лицензией GPLv2.

https://cssdoom.wtf/

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

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

Scrubbing, scrolling and splitting

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

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

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

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

https://github.com/Lissy93/dashy

CSS Blossoming Flowers at Magical Night

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

Смотреть код

Experimental Gradient Editor

Приложение для генерации градиента, написанное на Vue.

https://codepen.io/meodai/pen/xyqoEO

Infinitely drawing icons

Вся сцена - это svg картинка, анимируемая библиотекой anime.js

https://codepen.io/ainalem/pen/dKjgBx

Pagination - Simple Pagination

Симпатичный эффект при переключении страниц, созданный на чистом CSS.

https://codepen.io/Azametzin/pen/ZEVKJNX