Гайды по JavaScript | Программирование

Этот репозиторий — самый популярный способ генерировать PDF прямо в браузере. Более 31 000 звёзд на GitHub и 13 млн загрузок в неделю через npm.

Почему стоит присмотреться:

📦 Генерация на клиенте — без сервера, очередей и задержек.

🧩 Гибкая настройка — свои форматы страниц, ориентация, шрифты TrueType и UTF-8.

🔐 Современные модули — ES-модули, UMD, Node.js и TypeScript из коробки.

👥 Продвинутые функции — матрицы, паттерны, FormObjects и рендеринг HTML через html2canvas + dompurify.

Подходит для счетов, отчётов и билетов, которые должны появляться мгновенно.

🔗 Ссылка: https://github.com/parallax/jsPDF

#jsPDF #JavaScript #PDF #WebDevelopment #Frontend #NodeJS

🔥 Нашёл невероятный проект — по сути, мультиплатформенный веб-аналог World of Tanks или War Thunder.

📱 Работает и на телефонах, и на ПК.

🚀 В проекте 164 боевых танка и 30 карт, и все они сгенерированы кодом, а не импортированы из 3D-редакторов.

🎮 Полноценный мультиплеер без сервера (P2P + Signaling).

⚡ Хоть проект и не на Unity, а на JS, он всё равно заслуживает вашего внимания наравне с такими проектами, как Randomation Vehicle Physics (Beamng drive на Unity), только это WoT на JS.

📙 Исходный код (движок, логика, сеть) распространяется под MIT License.

🏷️ Название проекта — Claude of Tanks, он на GitHub.

🤘 После таких находок возникает желание создать небольшое RU-сообщество для создания контента, поддержки проекта, новых карт, новой техники, разных режимов. Сделать сообщество моддеров, а потом и игроков. У меня есть свои небольшие медиа и знакомые покрупнее. Что думаете? Это реально важно для меня, дайте обратную связь.

JavaScript Load Image – библиотека для загрузки, масштабирования, кадрирования и поворота изображений (File, Blob или URL). Парсит метаданные IPTC и Exif.

Установка: npm install blueimp-load-image

Подключение:
<script src="js/load-image.all.min.js"></script>
(или по частям: scale, meta, exif, iptc и др.)

Базовое использование (callback):

loadImage(
  fileInput.files[0],
  function (img) {
    document.body.appendChild(img);
  },
  { maxWidth: 600 }
);

С Promise:

loadImage(file, { maxWidth: 600 })
  .then(data => document.body.appendChild(data.image))
  .catch(err => console.log(err));

Метаданные:

loadImage(file, callback, { meta: true });
// data.exif, data.iptc, data.imageHead

Опции: maxWidth, maxHeight, minWidth, minHeight, crop, cover, aspectRatio, orientation, canvas, pixelRatio и др.

Поддержка браузеров: Chrome 32+, Firefox 29+, Safari 8+, Edge 12+, IE10+ (с полифиллами).

Лицензия: MIT.

PubNub JavaScript SDK (V4)

Установка: npm install pubnub или CDN.

Конфигурация:

const pubnub = new PubNub({
  publishKey: 'ключ',
  subscribeKey: 'ключ',
  userId: 'id'
});

Подписка:

const s = pubnub.channel('ch').subscription();
s.subscribe();
s.onMessage = e => console.log(e.message);

Публикация:

await pubnub.publish({ message: {text:"hi"}, channel:"ch" });

Особенности: сообщения <100 мс, присутствие, сигналы, файлы, React Native.

Доки: https://www.pubnub.com/docs/sdks/javascript

Создать объявление

Проверка доступности сайта: примеры кода на PHP и JavaScript

Короткие готовые скрипты для мониторинга.

PHP:

1. fopen() – открывает поток, читает 500 байт. Таймаут 12 сек.
2. cURL – проверяет ответ сервера, возвращает true/false. Надежнее fopen.
3. HTTP-статус – получает код ответа (200, 404, 503 и др.) через cURL с User-Agent.

JavaScript:

1. XMLHttpRequest – проверяет соединение каждые 10 секунд.
2. Image – создает объект картинки с URL сайта. Обрабатывает onload/onerror. Работает с HTTP, FTP, игровыми серверами.

Дополнительно: в материале есть список User-Agent строк для браузеров, мобильных устройств и поисковых роботов.

Ссылка на полный код.

💪 Прокачай свой JS на практике!

Этот репозиторий — набор упражнений для курса The Odin Project. Идеальный способ закрепить теорию делом! 🎯

Как это работает:

📂 Структура: Каждое упражнение — отдельная папка с файлом задачи, тестами (Jest) и примером решения.

⚙️ Настройка: Клонируйте репозиторий, установите зависимости через npm install и запускайте тесты для конкретного задания.

✅ Процесс: Запустите тесты (npm test exerciseName.spec.js). Сначала они будут падать — ваша задача написать код, чтобы их пройти. Постепенно раскомментируйте все тесты, пока не добьётесь зелёной строки! 🟢

🔍 Проверка: После завершения сравните своё решение с примером из папки solutions. Помните, ваш подход может быть другим — и это нормально!

Важно: Упражнения предназначены для студентов TOP. Не отправляйте Pull Request со своими решениями, чтобы не портить задания новичкам.

Отлично подходит для отработки навыков решения алгоритмических задач и уверенного владения JavaScript. 🚀

🔗 Ссылка: https://github.com/TheOdinProject/javascript-exercises

#JavaScript #TheOdinProject #Обучение #Практика #Jest #Алгоритмы #WebDevelopment

📖 Программирование с нуля на JavaScript!

Этот репозиторий — открытая книга от GitBook, которая проведёт вас по основам программирования и JS. Создан для всех, кто хочет освоить язык, независимо от опыта 🌱

Что внутри:

· Базовые концепции: переменные, типы данных, условные операторы и циклы.
· Структуры данных: работа с массивами, строками и объектами.
· Функции: основы написания и использования.
· Простая подача: материал разбит на логические главы, подходит для последовательного изучения.

Идеально подойдёт для полных новичков и тех, кто хочет структурировать свои знания. 📚

🔗 Ссылка: https://github.com/GitbookIO/javascript

#JavaScript #Обучение #Программирование #GitBook #WebDevelopment #Basic

🛡️ Превратите свой код в "чёрный ящик"!

JavaScript Obfuscator — ваш щит от кражи и анализа кода. 1+ млн загрузок/неделя 🔥

Что умеет:

🔀 Запутывать логику: Переименовывает всё в бессмыслицу, добавляет "мёртвый" код и ломает структуру (control flow).

🔐 Шифровать строки: Все важные URL, ключи и сообщения прячутся в массивы и кодируются (base64/rc4).

🚫 Активно защищаться: Анти-отладка (заморозка браузера 🥶), самозащита от форматирования и блокировка по домену.

⚙️ Виртуализация (Pro): Компилирует функции в байт-код для встроенной VM. Становится почти невозможно декомпилировать или проанализировать ИИ.

Лёгок в работе: CLI, Node.js API, плагины для Webpack, Vite, Rollup и др.

Используйте для защиты коммерческих скриптов, лицензий и алгоритмов! ⚠️ Обфусцируйте только СВОЙ код.

🔗 Ссылка: https://github.com/javascript-obfuscator/javascript-obfuscator

#JavaScript #Obfuscator #Безопасность #CodeProtection #WebDevelopment #NodeJS #InfoSec

Этот репозиторий — ваш пропуск в мир топовых JavaScript-вопросов для собеседований. Более 180 тысяч проектов уже используют этот ресурс для подготовки, чтобы чувствовать себя увереннее на интервью.

Почему стоит присмотреться:

🧩 Практика на реальных примерах: Забудьте о скучной теории. Здесь вы найдете сотни реальных вопросов с подробными ответами и примерами кода. Всё, что нужно, чтобы прокачать свои навыки.

📦 Структурированная база знаний: Репозиторий охватывает все ключевые темы: от основ (замыкания, this, прототипы) до продвинутых концепций (асинхронность, Event Loop). Просто выберите раздел и погружайтесь.

🔐 Подготовка к любым интервью: Независимо от того, готовитесь ли вы к собеседованию в стартап или гигант вроде FAANG, этот репозиторий даст вам фундаментальные знания, которые точно пригодятся.

👥 Сообщество и поддержка: Репозиторий активно поддерживается и обновляется, а вокруг него сложилось большое комьюнити разработчиков, которые делятся опытом.

Отлично подходит для разработчиков любого уровня, которые хотят систематизировать знания по JavaScript и успешно проходить технические собеседования .

🔗 Ссылка: https://github.com/sudheerj/javascript-interview-questions

#JavaScript #InterviewQuestions #Coding #WebDevelopment #Frontend #TechInterview #LearnToCode

👤 Аутентификация и управление пользователями, которые не мешают, а помогают!

Этот репозиторий содержит официальные JavaScript/TypeScript SDK-библиотеки платформы Clerk. Более 180 тысяч проектов уже используют их для встраивания готовых решений по регистрации, входу и управлению профилями.

Почему стоит присмотреться:

🧩 Готовые компоненты: Вместо написания форм и логики с нуля, вы используете готовые, полностью настраиваемые UI-компоненты для входа, регистрации и управления профилем. Это экономит недели разработки.

📦 Интеграции под ключ: В монорепозитории вы найдете SDK для большинства популярных сред: @clerk/nextjs, @clerk/react, @clerk/vue, @clerk/expo, @clerk/astro, @clerk/fastify, @clerk/express и даже @clerk/electron. Просто установите пакет для вашего фреймворка и следуйте документации.

🔐 Безопасность из коробки: Clerk берет на себя сложные задачи по хешированию паролей, управлению сессиями, JWT-токенам, защите от атак и многим другим аспектам, позволяя сосредоточиться на основной логике приложения.

👥 Организации и роли: Платформа поддерживает многопользовательские сценарии (B2B) с группировкой пользователей, управлением ролями и разрешениями.

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

🔗 Ссылка: https://github.com/clerk/javascript

#Clerk #Authentication #JavaScript #TypeScript #NextJS #React #WebDevelopment #Auth

🎨 Трёхмерная графика в браузере, доступная каждому!

Three.js — это легендарная библиотека, которая делает создание 3D-графики на веб-страницах простым и увлекательным занятием. Более 114 тысяч звёзд на GitHub подтверждают её статус стандарта де-факто в мире WebGL.

В чём её сила:

🚀 Простота начала: Чтобы создать сцену с вращающимся кубом, нужны буквально десятки строк кода.

🌐 Кроссплатформенность: Работает везде, где есть браузер, с использованием WebGL (и WebGPU в новых версиях), а также SVG и CSS3D для специфических задач.

🧩 Огромная экосистема: В репозитории вы найдёте сотни примеров, подробную документацию, мануалы и активное сообщество (форум, Discord) — всегда можно найти решение или подсказку.

📦 Готовые решения: Включает в себя редактор, множество загрузчиков форматов (glTF, OBJ, FBX и др.), эффекты, шейдеры и инструменты для создания игр, визуализаций, AR/VR-опытов.

🔗 Ссылка: https://github.com/mrdoob/three.js

#ThreeJS #WebGL #3D #JavaScript #WebDevelopment #Графика #OpenSource #Frontend

🗺️ Абсолютная карта сокровищ мира JavaScript!

Этот репозиторий — крупнейшая кураторская подборка браузерных JS-библиотек, инструментов и ресурсов. Если вам нужно что-то для фронтенда — скорее всего, ссылка на это есть здесь. Более 17 тысяч звёзд тому подтверждение.

Что вы найдёте внутри:

· Менеджеры пакетов, бандлеры и транспиляторы: npm, yarn, pnpm, webpack, Vite, SWC, Babel и десятки других для настройки окружения.
· Инструменты тестирования и контроля качества: Jest, Cypress, Playwright, ESLint, Prettier — полный стек для надёжного кода.
· Фреймворки и библиотеки для UI: От классики (React, Vue, Angular) до лёгких альтернатив (Preact, Svelte, Alpine.js) и игровых движков (Phaser, PixiJS).
· Утилиты на все случаи: Работа с датами (date-fns, Luxon), данными (lodash, immutable-js), HTTP-запросами (axios, fetch), безопасностью (DOMPurify), а также визуализация (D3, Three.js) и многое другое.

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

🔗 Ссылка: https://github.com/sorrycc/awesome-javascript

#JavaScript #AwesomeList #Frontend #WebDevelopment #React #Vue #NodeJS #OpenSource #Программирование

☸️ Официальный JavaScript клиент для Kubernetes!

Разработанный для серверной части на Node.js, этот клиент на TypeScript (совместимый с JS) предоставляет программный доступ к управлению кластером.

Основные возможности:

📦 Установка и настройка: Ставится через npm install @kubernetes/client-node, а конфигурация легко загружается из стандартного файла или создается программно.

🛠 Полный API-доступ: Поддерживает все основные ресурсы Kubernetes (поды, сервисы, неймспейсы и др.). В примерах выше показано, как создать неймспейс или получить список подов в пространстве default.

🔄 Совместимость с версиями: Разработчики следят за актуальностью клиента. Версия 1.4.x, например, гарантированно работает с Kubernetes 1.28–1.34.

📚 Документация: Доступны автогенерируемая документация Typedoc и подробные примеры в директории examples.

Идеально подходит для автоматизации задач администрирования, написания операторов или интеграции с Kubernetes в ваших Node.js-приложениях.

🔗 Ссылка: https://github.com/kubernetes-client/javascript

#Kubernetes #JavaScript #TypeScript #NodeJS #DevOps #CloudNative #API

🎓 Полный курс JavaScript: от новичка до профессионала!

Этот репозиторий — официальный companion-проект к одному из самых популярных курсов по JavaScript на Udemy. Созданный инструктором Йонасом Шмедтманном, он содержит стартовые файлы и финальный код для всех разделов и проектов.

Что вас ждёт:

📁 Структура по разделам: Каждый блок курса (от основ до асинхронности и модулей) представлен в отдельной папке со стартовым кодом и готовыми решениями.

🚀 Реальные проекты: В репозитории собраны полноценные приложения, которые вы создадите в процессе обучения:

· Pig Game — работа с DOM
· Bankist — массивы, числа, даты, таймеры (логин: js, PIN: 1111)
· Mapty — ООП, геолокация, планирование
· forkify — финальный продвинутый проект

🐛 Актуальные обновления: Ветка updates-and-fixes содержит последние исправления и обновления пакетов, чтобы код всегда работал.

🔗 Ссылка: https://github.com/jonasschmedtmann/complete-javascript-course

#JavaScript #Обучение #Udemy #WebDevelopment #Frontend #CodingCourse #JS

📖 Чистый код на JavaScript: руководство, которое должен прочитать каждый разработчик!

Этот репозиторий — адаптация культовой книги Роберта Мартина «Clean Code» для JavaScript-разработчиков. Более 94 тысяч звёзд на GitHub говорят сами за себя: здесь собраны принципы написания читаемого, поддерживаемого и легко рефакторимого кода.

Почему это маст-хэв:

🎯 От переменных до архитектуры: Разбираются все уровни — как называть переменные, писать функции, строить классы и следовать SOLID.

🛠 Конкретные примеры: Каждый совет сопровождается наглядным сравнением «плохо» и «хорошо». Например, почему стоит избегать флагов в аргументах или как инкапсулировать условия.

🚀 Современный JS: Учтены фичи ES6+ (деструктуризация, классы, async/await), а также даны рекомендации по тестированию и обработке ошибок.

🌍 Переведён на множество языков: Включая русский

🔗 Ссылка: https://github.com/ryanmcdermott/clean-code-javascript

#CleanCode #JavaScript #BestPractices #CodeQuality #SOLID #WebDevelopment #Программирование

📚 Алгоритмы и структуры данных на JavaScript для всех, кто хочет прокачать свой код!
(Обновленная)

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

Почему стоит добавить в закладки:

🧩 От теории к практике: Здесь вы найдете всё — от сортировок и поиска до криптографии, динамического программирования и структур данных (деревья, графы, хеши и др.).

📐 Акцент на читаемость: Код написан с соблюдением единого стиля (Prettier + ESLint), что делает его идеальным для изучения и ревью.

🌍 Для любого уровня: Проект создан для новичков, но будет полезен и опытным разработчикам как шпаргалка или источник вдохновения.

🤝 Живое сообщество: Репозиторий активно поддерживается, а вы можете внести свой вклад.

🔗 Ссылка: https://github.com/TheAlgorithms/JavaScript

#JavaScript #Алгоритмы #СтруктурыДанных #Программирование #Education #OpenSource #WebDevelopment

🔥 Библиотека, которая задаёт стандарты в мире JavaScript!

О чём речь? О Airbnb JavaScript Style Guide — одном из самых популярных гайдов по написанию чистого и поддерживаемого кода. Созданный инженерами Airbnb, этот стандарт стал ориентиром для тысяч команд по всему миру.

Почему стоит взять на вооружение:

📐 Единообразие: Все пишут в одном стиле — код читается как книга, даже если над ним работают 10+ разработчиков.

🧹 Линтинг готов: Идёт в комплекте с eslint-config-airbnb — настройка за 5 минут, и ваш код становится чище.

🧠 Лучшие практики: Не просто правила, а объяснения почему так делать правильно (стрелочные функции, деструктуризация, модули и др.).

🌍 Огромное сообщество: Гайд переведён на десятки языков, а его рекомендации учитывают нюансы ES6+ и современных фреймворков.

Идеально подходит как для личных пет-проектов, так и для корпоративной разработки, где качество кода — не пустой звук.

🔗 Ссылка: https://github.com/airbnb/javascript

#JavaScript #CodeStyle #Airbnb #ESLint #Frontend #WebDevelopment

❓ Разница между map(), forEach() и filter() в JavaScript

В JavaScript массивы — это один из самых частых инструментов разработчика. Для работы с ними есть три мощных метода, которые новички постоянно путают: forEach(), map() и filter().

1️⃣ .forEach() — Просто перебор

const users = ['Анна', 'Игорь', 'Ольга'];

users.forEach(user => {
  console.log(`Привет, ${user}!`);
});
// Выведет приветствие для каждого, но сам массив users остался прежним.

Этот метод используют, когда нужно выполнить какое-то действие для каждого элемента массива (например, вывести в консоль или сохранить в базу данных).
Главное: он ничего не возвращает (возвращает undefined) и не создает новый массив.

2️⃣ .map() — Трансформация данных

const prices = [100, 200, 300];

// Хотим сделать скидку 10% на все товары
const salePrices = prices.map(price => price * 0.9);

console.log(salePrices); // [90, 180, 270] — новый массив
console.log(prices);     // [100, 200, 300] — старый массив цел

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

3️⃣ .filter() — Отбор по условию

const ages = [14, 21, 17, 32, 18];

// Фильтруем только совершеннолетних
const adults = ages.filter(age => age >= 18);

console.log(adults); // [21, 32, 18]

Этот метод используют, когда из кучи элементов нужно отфильтровать только те, которые подходят под конкретное условие.
Главное: внутри функции-колбэка должно возвращаться true (оставить элемент) или false (удалить элемент). На выходе получаем новый массив, который обычно короче исходного.

❓ Shallow vs Deep Copy: как не сломать данные?
Когда мы копируем объекты в JS, важно понимать, «зацепят» ли изменения оригинала нашу копию.

⤴️ Shallow Copy (Поверхностная)
Копирует только верхний уровень. Если внутри есть вложенные объекты, то копия будет ссылаться на те же участки памяти, что и оригинал.
Как сделать:
[...arr], {...obj} или Object.assign().
Недостаток: Изменишь вложенный объект в копии — он изменится и в оригинале.

⤵️ Deep Copy (Глубокая)
Создает полную независимую копию всех уровней вложенности.
Как сделать:
structuredClone(obj) — современный стандарт (рекомендуется в 2026!).
JSON.parse(JSON.stringify(obj)) — старый костыль (не копирует методы и Date).
Библиотеки типа lodash (cloneDeep).

const user = { name: "Ivan", skills: ["JS"] };
const copy = { ...user }; // Поверхностная копия

copy.skills.push("React"); 

console.log(user.skills); // ["JS", "React"] — Ой! Оригинал тоже изменился.

❓ Null vs Undefined: в чем разница?
Многие путают эти понятия, но в JS это разные типы данных.

1️⃣ Undefined (Неопределенность)
— Означает, что переменная объявлена, но ей не присвоено значение.
— JS возвращает его по умолчанию (например, если функция ничего не возвращает).
— Аналогия: Коробка, которую принесли, но еще не решили, что в нее положить.

2️⃣ Null (Пустота)
— Это значение, которое разработчик присваивает явно.
— Означает намеренное отсутствие объекта.
— Аналогия: Пустая коробка, из которой специально всё достали.

let a;           // undefined
let b = null;    // null

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (старая ошибка JS)

console.log(a == b);  // true (по значению)
console.log(a === b); // false (по типу)