Code Ready | Frontend
21.1K subscribers
782 photos
348 videos
17 files
521 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📱 Сегодня рассматриваем ошибки!

Шпаргалка по ключевым приёмам обработки ошибок: try, catch, finally, создание кастомных ошибок, логирование и работа с промисами. Подойдёт для надежного кода, валидации данных и отладки сложных сценариев.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20🤝127
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Можно мгновенно прыгать из HTML к нужным CSS стилям прямо в редакторе!

CSS Peek — плагин, который позволяет просматривать стили классов прямо из HTML, не открывая отдельные файлы. Идеально, если нужно быстро понять, какие стили применяются к элементу и не искать нужное в больших проектах. Все прямо в процессе работы.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
20👍13🔥10
Создадим кастомное исключение в JS!

Давайте напишем исключение, которое будет отрабатывать при передаче в функцию изменяемый тип данных (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 для защиты функций и данных!

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15👍11🤝51
😁4213🔥9🤝3
👩‍💻 CSS-фишка: текст по окружности!

Хотите, чтобы абзац не просто стоял рядом с картинкой, а огибал её по кругу? Это легко осуществить с помощью чистого CSS!

Как работает:
shape-outside: circle(); задаёт форму, вокруг которой обтекает текст.

clip-path: circle(); обрезает сам элемент, чтобы он выглядел круглым.

В итоге текст плавно повторяет форму круга, а не прямоугольника.


Такой приём отлично подходит для аватарок, круглых иконок или необычной вёрстки статей.

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍17🤝61
Проверяем интернет-скорость!

Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет 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 для регулярного замера.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1910🤝4👍1
👩‍💻 Аннотации и надстрочные пояснения для текста!

Тег <ruby> используется для аннотации иероглифов или других символов краткими пояснениями - чаще всего это чтение слов в азиатских языках. Внутри тега размещается основной текст и пояснение к нему.

Как пишется:
<rt> — текст подсказки (аннотация)

• <rp> — дополнительный текст для браузеров, не поддерживающих <ruby> (чаще всего, круглые скобки)


Поэтому, используйте <ruby> только для небольших фраз или слов.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2111👍7
8🔥6🤝6
Что же выведет консоль?
Anonymous Quiz
23%
A
15%
B
42%
C
20%
D
2🔥12🤝97👍1
⏹️Новая специализация, о которой почти никто не знает: проще вход, ниже конкуренция, выше чеки

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

▶️Освоив Revit API, вы сможете быстро войти в нишу, где каждый навык напрямую конвертируется в деньги.

На курсе «Программирование в Autodesk Revit» от EdTech-платформы STEMPS вы научитесь:

➡️Писать плагины и инструменты на C# для инженеров
➡️Автоматизировать рутинные процессы и проверки моделей
➡️Создавать востребованный софт для архитектурных и проектных бюро

👤Автор курса — Дмитрий Смирнов, CTO DynamicLabs, STEMPS, Atomtech, Plancy. Разрабатывал системы автоматизации и SaaS-системы для компаний на 700+ сотрудников.

🗓 Старт курса — 23 сентября.

📍Студенты получат документ о повышении квалификации.

🔥Успейте записаться на курс со скидкой 10%:
https://stemps.ru/
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍2👎1🤝1
📱 Анимация вращения объекта при скролле!

В этом гайде создаём интерактивную анимацию, где объект плавно вращается при прокрутке колеса мыши.

Ключевые моменты:
• HTML: минимальная структура с контейнером и анимируемым объектом.

• CSS: градиентный фон, плавные переходы и современный дизайн.

• JS: отслеживание wheel событий и применение CSS transform для вращения.


Подходит для лендингов, портфолио, интерактивных элементов и креативных проектов.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥117🤝4
Меняем громкость системы в Node.js

Иногда нужно программно изменить громкость на устройстве, поставить 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% громкости


🔥 Эти команды можно встроить в оповещение, автонастройку при запуске или управление медиа.

📣 Code Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
14👍8🔥7
Программисты из Telegram создали сильнейшие IT- каналы

🐍 Ghostly Python - автоматизируй всё, что можешь. Боты, скрипты, парсеры, утилиты - делаем Python простым и полезным. Уверенный старт для новичков и не только.

☕️ Easy Java - Java без боли. От основ до фреймворков. Просто, понятно и по делу. Если хочешь реально понять язык - тебе сюда.

😎 IT Syndicate - главный хаб для тех, кто живёт IT. GameDev, InfoSec, Frontend, DevOps, AI и многое другое. Готовь мозг, тут будет жарко.

🧡 Ghostly Frontend - фронтенд без лишнего шума. HTML, CSS, JavaScript, React, Vue — всё, что нужно, чтобы создавать быстрые и красивые интерфейсы.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3🤝31👍1