React JS

Morphing Submit Button Содержимое кнопки — svg-картинка. После нажатия на кнопку изменяются CSS-классы на элементах кнопки. https://codepen.io/jkantner/pen/zYdaBPJ

Get Color Palette Генерация заднего фона на основе используемых цветов, выполненная с помощью Pug, Stylus и JavaScript. https://codepen.io/toshiya-marukubo/pen/XWVWmav

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

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

🚀 Ты всё ещё называешь обёртку над 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/

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

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

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. Что будет выведено в консоль? Ответ

Ищем героев для интервью в новый проект крупнейшего IT сообщества Хотим взять интервью у айтишников, которые пробили $10к зарплаты в месяц. Требования для участия (обязательно попросим пруфы): • доход от $10к с одной работы без учета годовых премий • доход не должен быть от менторства 👉 Если подходишь и хочешь поучаствовать, напиши @m0rtymerr_support с хэштегом #богатый_айтишник Интервью выйдут на YouTube канале. Студию для записи оплатим сами, от тебя — присутствие и рассказ о своем опыте. Компанию и собственное ФИО при желании можно публично не называть. Если не подходишь сам, но знаешь того, кто вписывается в требования, присылай контакт — за успешную запись наградим. #реклама О рекламодателе

Совет по использованию инструментов 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