JavaScript Ready | Программирование
8.18K subscribers
989 photos
60 videos
527 links
Авторский канал по разработке на JavaScript.
Ресурсы, обучения, задачи, шпаргалки.
Ежедневно информация пополняется!

Cотрудничество: @energy_c
Download Telegram
📱 Создадим фабрику пользователей!

Иногда в проекте нужно создавать разные типы объектов — обычного пользователя, администратора или гостя. Удобно использовать централизованную функцию, которая возвращает правильный объект по типу.

В этой задаче:
• Разберём базовый класс User;

• Создадим наследников Admin и Guest;

• Напишем фабричную функцию UserFactory;

• Получим готовый инструмент для масштабируемого кода.


Factory часто используют вместе с паттернами Dependency Injection и Strategy, чтобы гибко управлять созданием и поведением объектов.

📣 JS Ready | #задача
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13🤝11👍5
Самоуничтожающийся файл на JavaScript!

Создадим скрипт, который после выполнения удаляет сам себя.

Создаём JS-файл, который сможет удалить сам себя после выполнения:
const fs = require("fs").promises;
const path = require("path");

const filePath = path.resolve(__filename); // полный путь к самому себе


Перед удалением выведем предупреждение и подождём пару секунд:
console.log("⏳ Самоуничтожение через 3 секунды...");


Теперь добавим основную логику удаления с обработкой ошибок:
setTimeout(async () => {
try {
await fs.unlink(filePath); // удаляем файл
console.log("💥 Файл уничтожен!");
} catch (err) {
console.error("❌ Ошибка при удалении файла:", err.message);
}
}, 3000);


🔥 Запустите скрипт — он выполнится, напечатает сообщение и исчезнет с диска. Полезно для временных скриптов, тестов и CLI-инструментов.

📣 JS Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥8🤝5❤1
📱 Работа с массивоподобными объектами!

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

📣 JS Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤7🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Нужно объяснить проект коллеге или самому не потеряться в большом коде?

CodeTour — плагин, который позволяет создавать пошаговые «туры» по коду прямо в VS Code. Можно выделять строки, оставлять комментарии и объединять их в последовательность шагов.

📣 JS Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍6🤝4
Что же выведет консоль?
Anonymous Quiz
29%
A
32%
B
23%
C
16%
D
👍12❤7🔥5
😁47👍8🤝5❤1🔥1
📱 Intl.Segmenter: нативная токенизация текста!

Он умеет нативно разделять строки на слова, предложения и даже графемы (эмодзи, иероглифы), учитывая правила конкретного языка.

В этом гайде:
• Делим текст на слова;

• Считаем символы и эмодзи;

• Разбиваем строки на предложения.


Это делает анализ текста в JS гораздо проще и точнее. Полезно для редакторов, поиска, счётчиков слов и анализа пользовательского ввода.

📣 JS Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝12👍9🔥6❤4
📱 JavaScript Array Methods — краткая шпаргалка!

На картинке собраны часто используемые методы массивов в JavaScript — от изменения и объединения данных до поиска и фильтрации элементов.

Примеры показывают, как работают методы: что возвращают, как изменяют массив и где применяются.

Сохрани, чтобы не забыть!

📣 JS Ready | #ресурс
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥12🤝5❤1👎1
Нативный выбор цвета через браузерный API

Хотите встроить в проект пипетку как в Photoshop — без лишних библиотек? В Chrome, Edge и Opera уже есть нативный EyeDropper API. Работает по HTTPS и в последних версиях Chromium-браузеров.

Шаг 1 — добавляем кнопку:
<button id="pickColor">Выбрать цвет</button>


Шаг 2 — подключаем EyeDropper:
if (!window.EyeDropper) {
alert("Ваш браузер не поддерживает EyeDropper API");
}


Шаг 3 — открываем пипетку и используем цвет:
const btn = document.getElementById("pickColor");
btn.addEventListener("click", async () => {
const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
console.log("Цвет:", sRGBHex);
document.body.style.backgroundColor = sRGBHex;
});


Пипетка выбирает цвет с экрана и тут же применяет его к фону, а в консоли появляется hex-код.

🔥 Отличный инструмент для кастомизации, темизации и цветовых палитр прямо в браузере.

📣 JS Ready | #практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍7🤝5❤2