This media is not supported in your browser
VIEW IN TELEGRAM
CSS Peek — плагин, который позволяет просматривать стили классов прямо из HTML, не открывая отдельные файлы. Идеально, если нужно быстро понять, какие стили применяются к элементу и не искать нужное в больших проектах. Все прямо в процессе работы.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤21👍13🔥10
Создадим кастомное исключение в JS!
Давайте напишем исключение, которое будет отрабатывать при передаче в функцию изменяемый тип данных (Array или Object):
Делаем класс кастомного исключения:
Реализуем функцию с проверкой типа данных:
Проверяем работу кастомного исключения:
Результат:
🔥 Теперь вы знаете, как реализовывать кастомные исключения в JS для защиты функций и данных!
📣 Code Ready | #практика
Давайте напишем исключение, которое будет отрабатывать при передаче в функцию изменяемый тип данных (Array или Object):
Делаем класс кастомного исключения:
class MutableError extends Error {
constructor(functionName, argumentName) {
super(`"${functionName}" использует изменяемый тип данных для аргумента "${argumentName}"`);
this.name = 'MutableError';
}
}
Реализуем функцию с проверкой типа данных:
function immutableCheckFunc(data) {
if (Array.isArray(data) || (data !== null && typeof data === 'object')) {
throw new MutableError(immutableCheckFunc.name, 'data');
}
// можно добавить любую логику
}
Проверяем работу кастомного исключения:
try {
immutableCheckFunc([1, 2, 3]);
} catch (e) {
console.error(e.message);
}
Результат:
"immutableCheckFunc" использует изменяемый тип данных для аргумента "data"
🔥 Теперь вы знаете, как реализовывать кастомные исключения в JS для защиты функций и данных!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍11🤝5❤1
Хотите, чтобы абзац не просто стоял рядом с картинкой, а огибал её по кругу? Это легко осуществить с помощью чистого CSS!
Как работает:
• shape-outside: circle(); задаёт форму, вокруг которой обтекает текст.
• clip-path: circle(); обрезает сам элемент, чтобы он выглядел круглым.
• В итоге текст плавно повторяет форму круга, а не прямоугольника.
Такой приём отлично подходит для аватарок, круглых иконок или необычной вёрстки статей.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍18🤝6❤1
Проверяем интернет-скорость!
Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет
Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера.
Шаг 1 — импортируем:
Шаг 2 — запускаем тест:
Шаг 3 — форматируем и выводим результаты:
🔥 Теперь у тебя свой
📣 Code Ready | #практика
Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет
speedtest-net
, который позволяет получить скорость загрузки, отдачи и пинга. Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера.
Шаг 1 — импортируем:
const speedTest = require('speedtest-net');
Шаг 2 — запускаем тест:
(async () => {
const res = await speedTest({ acceptLicense: true });
})();
Шаг 3 — форматируем и выводим результаты:
// Загрузка
console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`);
// Выгрузка
console.log(`Upload: ${(res.upload.bandwidth / 125000).toFixed(2)} Mbps`);
// Пинг
console.log(`Ping: ${res.ping.latency} ms`);
🔥 Теперь у тебя свой
speedtest
прямо в коде. Можно запускать вручную или добавить в cron
для регулярного замера.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20❤10🤝4👍1
Тег
<ruby>
используется для аннотации иероглифов или других символов краткими пояснениями - чаще всего это чтение слов в азиатских языках. Внутри тега размещается основной текст и пояснение к нему.Как пишется:
• <rt> — текст подсказки (аннотация)
• <rp> — дополнительный текст для браузеров, не поддерживающих <ruby> (чаще всего, круглые скобки)
Поэтому, используйте
<ruby>
только для небольших фраз или слов.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23❤12👍7
2🔥12🤝9❤7👍1
В этом гайде создаём интерактивную анимацию, где объект плавно вращается при прокрутке колеса мыши.
Ключевые моменты:
• 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🔥11❤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❤10👍8😁2