В этом гайде создаём интерактивную анимацию, где объект плавно вращается при прокрутке колеса мыши.
Ключевые моменты:
• HTML: минимальная структура с контейнером и анимируемым объектом.
• CSS: градиентный фон, плавные переходы и современный дизайн.
• JS: отслеживание wheel событий и применение CSS transform для вращения.
Подходит для лендингов, портфолио, интерактивных элементов и креативных проектов.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  👍21🔥12❤7🤝4
  Меняем громкость системы в Node.js
Иногда нужно программно изменить громкость на устройстве, поставить 100%, выключить звук или приглушить. Это можно сделать через вызов системных команд.
Пример кода (для Windows):
Для Linux:
Для macOS:
🔥 Эти команды можно встроить в оповещение, автонастройку при запуске или управление медиа.
📣  Code Ready | #практика
Иногда нужно программно изменить громкость на устройстве, поставить 100%, выключить звук или приглушить. Это можно сделать через вызов системных команд.
Пример кода (для Windows):
const { exec } = require("child_process");
exec("nircmd.exe setsysvolume 65535"); // 100% громкостиДля Linux:
exec("amixer sset Master 50%"); // 50% громкостиДля macOS:
exec("osascript -e 'set volume output volume 30'"); // 30% громкости🔥 Эти команды можно встроить в оповещение, автонастройку при запуске или управление медиа.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  ❤14👍8🔥7
  В этой шпаргалке собраны основные приёмы для получения текущего времени, создания и форматирования дат, извлечения года, месяца, дня, а также локализованного отображения. Они применяются при построении UI, работе с временными метками и форматировании данных для пользователей.Please open Telegram to view this post
    VIEW IN TELEGRAM
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥23🤝12❤5
  Forwarded from IT Ready
И как раз сегодня — этот самый день!
Кстати, 256 не с проста:
Это 2 в степени 8, то есть максимальное количество значений, которые может хранить один байт — основа работы компьютеров.
В невисокосный год праздник выпадает на 13 сентября, а в високосный — на 12-е.
Так что, поздравляю всех программистов!
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥44❤11👍8😁3
  This media is not supported in your browser
    VIEW IN TELEGRAM
  Здесь собрана огромная база реальных вопросов по бэкенду, DevOps, Data Science и другим направлениям. Всё структурировано по темам и приближено к формату собеседований в компаниях. Это именно тот ресурс, который нужно держать под рукой!
Please open Telegram to view this post
    VIEW IN TELEGRAM
  👍14🔥10🤝7❤1
  Озвучка текста на странице!
Нативный JavaScript умеет читать вслух любой текст на странице, это часть
Начнём с базового: озвучим строку с помощью
Добавим функцию, чтобы переиспользовать и задавать любой текст:
Теперь можно вызывать так:
Далее прикрутим к горячей клавише. Пусть Ctrl + R озвучит рандомный совет:
🔥 Голосовой ассистент в одну строчку готов. Можно подключать к уведомлениям, ботам, виджетам — или просто добавить в пасхалку на сайте.
📣  Code Ready | #практика
Нативный JavaScript умеет читать вслух любой текст на странице, это часть
Web Speech API.Начнём с базового: озвучим строку с помощью
SpeechSynthesisUtterance.const msg = new SpeechSynthesisUtterance("Привет, мир");
speechSynthesis.speak(msg);Добавим функцию, чтобы переиспользовать и задавать любой текст:
function speak(text) {
  const msg = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(msg);
}Теперь можно вызывать так:
speak("Текущая температура: 22 градуса и ясно");Далее прикрутим к горячей клавише. Пусть Ctrl + R озвучит рандомный совет:
document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "r") {
    speak("Не забывай пить воду и делать перерывы");
  }
});🔥 Голосовой ассистент в одну строчку готов. Можно подключать к уведомлениям, ботам, виджетам — или просто добавить в пасхалку на сайте.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  1🔥23❤7👍7
  This media is not supported in your browser
    VIEW IN TELEGRAM
  CodeTour — плагин, который позволяет создавать пошаговые «туры» по коду прямо в VS Code. Можно выделять строки, оставлять комментарии и объединять их в последовательность шагов.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  👍23🔥14❤9
  Тег
<mark> выделяет или подсвечивает важный фрагмент текста. По умолчанию браузеры добавляют жёлтый фоновый цвет #ffff00 (yellow), похожий на выделение канцелярским маркером.Где полезен:
• При поисковой подсветке слов на странице;
• Для акцента на ключевых терминах или предупреждениях;
• В обучающих текстах и документации.
Можно реализовать текстовый поиск, выделяя цветом найденные фрагменты.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  👍18❤8🔥8
  Дебаунс событий для плавного интерфейса!
Частые события
Проблемный код:
Проблема: при быстром
Улучшенный дебаунсер:
Применяем с
🔥 В следующей части рассмотрим почему для scroll дебаунс не работает и как throttle решает эту проблему для плавных анимаций!
📣  Code Ready | #практика
Частые события
resize или input могут перегружать страницу и тормозить анимации. Решение — дебаунс с правильными опциями.Проблемный код:
window.addEventListener('resize', () => {
  console.log('Width:', window.innerWidth);
  updateLayout();
});Проблема: при быстром
resize — десятки вызовов в секунду.Улучшенный дебаунсер:
function debounce(fn, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}Применяем с
cleanup:const debouncedResize = debounce(() => {
  console.log('Debounced width:', window.innerWidth);
}, 300);
window.addEventListener('resize', debouncedResize);🔥 В следующей части рассмотрим почему для scroll дебаунс не работает и как throttle решает эту проблему для плавных анимаций!
Please open Telegram to view this post
    VIEW IN TELEGRAM
  ❤17👍9🔥8
  Привет! В этом гайде создаём упрощенную интерактивную панель эмодзи-реакций с счетчиками, как в социальных сетях.
Ключевые моменты:
• HTML: простая структура с эмодзи-кнопками и счетчиками.
• CSS: минимальные стили с hover-эффектами и переходами.
• JS: базовая логика кликов и подсчета реакций без сложных анимаций.
Подходит для социальных платформ, интерактивных интерфейсов, блогов и UI с пользовательскими реакциями.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  👍22🔥10❤6
  This media is not supported in your browser
    VIEW IN TELEGRAM
  Интерактивные курсы по HTML, CSS, JavaScript и React, от простых тренажёров до профессиональных программ. Отлично подходит для новичков и тех, кто хочет прокачать свои навыки.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥16👍9❤8👎1
  В этой шпаргалке собраны основные приёмы для создания генераторов, возврата значений, перебора, делегирования и управления выполнением. Они применяются при работе с ленивыми коллекциями, потоками данных и сложными итерациями в приложениях.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  👍18🔥11❤5🤝4