JavaScript Ready | Программирование

💅 Ravesli JavaScript — курс по основам JS для начинающих!Сайт охватывает как основы языка, так и более продвинутые темы. Здесь разбираются переменные, функции, объекты, массивы, DOM, события, асинхронность, работа с браузером и др. Материал подаётся в формате последовательных уроков с примерами кода и подробными объяснениями.📌 Оставляю ссылочку: ravesli.com📣 JS Ready | #сайт

URL.canParse + URL API — проверка URL без try/catch и regex!Частая задача в JS: проверить URL перед fetch, редиректом, сохранением в БД, проксированием или обработкой пользовательского ввода.Обычно многие делают так:function isValid(url) { try { new URL(url); return true; } catch { return false; }}Способ рабочий, но со временем такие проверки начинают размножаться по проекту в десятках мест. Минусы:— try/catch ради обычной проверки читается тяжеловато— многие потом начинают дописывать сверху regex— появляются разные реализации одной и той же логики.Но в платформе есть нативный способ — URL.canParse().URL.canParse("https://example.com");// trueURL.canParse("not-a-url");// falseБез исключений и без самописных проверок. Просто получаешь boolean.Но тут есть важный момент, про который многие забывают — относительные URL. Например:URL.canParse("/api/users");// falseЭто не ошибка метода. Просто относительный путь нельзя распарсить без base URL. Поэтому правильно так:URL.canParse( "/api/users", "https://example.com");// trueИ потом этот же base используешь при создании URL:const url = new URL( "/api/users", "https://example.com");Это особенно полезно в SSR, middleware, proxy и серверных обработчиках, где часто работают именно с относительными путями.Ещё хороший кейс — фильтрация пользовательского ввода.const input = [ "https://a.com", "ftp://b.com", "invalid"];const valid = input.filter(u => URL.canParse(u));Но тут есть нюанс, canParse() проверяет только то, что строка корректно парсится как URL с точки зрения WHATWG URL parser. Это не проверка безопасности и не проверка того, что URL подходит именно для вашего кейса.Например ftp: или даже javascript: тоже могут успешно парситься. Поэтому для API, fetch и редиректов обычно дополнительно проверяют protocol:function parseHttpUrl(u) { if (!URL.canParse(u)) { return null; } const url = new URL(u); return ( url.protocol === "http:" || url.protocol === "https:" ) ? url : null;}А для редирек

👩‍💻 Стили пишутся прямо в React-компонентах.vscode-styled-components — делает работу со styled-components намного удобнее: появляются подсказки CSS, подсветка цветов, автодополнение свойств и форматирование прямо внутри JS/TS-файлов. Всё работает почти как в отдельном CSS-файле.📣 JS Ready | #vscode

Как красиво выводить списки без ручных запятых?Часто нужно показать список технологий, авторов, тегов или участников.Обычно это начинают собирать вручную:names.join(', ')Но в JS есть нативный API — Intl.ListFormat.newIntl.ListFormat('ru').format(names);Он сам расставляет запятые, союзы и учитывает правила языка.newIntl.ListFormat('en').format(names);// React, Vue, and SvelteМожно менять тип списка: обычное перечисление, выбор или разделение.new Intl.ListFormat('ru', { type: 'disjunction'}).format(['наличные', 'карта']);// наличные или карта🔥 Intl.ListFormat подходит для тегов, участников, категорий, фильтров, хлебных крошек и любых списков в интерфейсе.📣 JS Ready | #совет

📂 Напоминалка по JavaScript Date и времени!Например, new Date() создаёт объект даты, toISOString() помогает получить дату в UTC-формате, а getTime() — работать с таймстампами и вычислениями.На картинке — методы и операции для работы с датами, временем, UTC и форматированием.Сохрани, чтобы не потерять!📣 JS Ready | #ресурс

🧐 Наткнулся на годную статью на Хабре: «TTF-DOOM: как я запустил 3D-рейкастер внутри TrueType-шрифта»!В этой статье:• Показывается, как TrueType hinting VM можно использовать не только для рендеринга шрифтов, но и как полноценную вычислительную среду;• Разбирается архитектура запуска 3D-рейкастера внутри TTF-шрифта с использованием JavaScript, bytecode и собственного DSL-компилятора;• Объясняются неожиданные особенности и ограничения TrueType VM.🔊 Продолжайте читать на Habr! 📣 JS Ready | #статья

Создаём управляемый Promise без boilerplate!Раньше, чтобы получить resolve и reject снаружи Promise, приходилось писать так:let resolve;const promise = new Promise(res => {resolve = res;});Это работает, но создаёт лишние переменные и выглядит менее аккуратно.Теперь в JavaScript есть нативный Promise.withResolvers():const { promise, resolve, reject } =Promise.withResolvers();Он сразу возвращает готовый Promise и функции управления им.resolve('done');await promise;Особенно удобно для очередей, WebSocket, Stream API, событийной логики и мостов между callback/event API и async-await.await в примере работает внутри async-функции или ES-модуля с top-level await. Также проверь поддержку Promise.withResolvers() в своей среде выполнения.🔥 Promise.withResolvers() убирает boilerplate и делает создание управляемых Promise намного чище и читаемее.📣 JS Ready | #совет

👩‍💻 Для удобной работы с .sass-синтаксисом в VS Code!Sass (.sass only) — добавляет полноценную поддержку indented-синтаксиса Sass: подсветку, автодополнение, навигацию и корректное распознавание .sass-файлов без фигурных скобок и точек с запятой. Помогает комфортно работать со старыми и современными Sass-проектами прямо в редакторе.📣 JS Ready | #vscode

Почему Object.freeze() не делает объект полностью immutable?Object.freeze() часто воспринимают как "защитить объект от любых изменений". Но есть нюанс: он работает только поверхностно.const config = Object.freeze({ api: { retry: 3 }});config.api.retry = 10;console.log(config.api.retry);// 10На первый взгляд странно: объект же frozen. Но заморожен только сам config. Свойство api действительно нельзя переназначить, удалить или изменить его descriptor. А вот объект, на который оно ссылается, остаётся обычным mutable-объектом.То есть вот так уже нельзя:config.api = null;console.log(config.api);// { retry: 10 }И тут важный момент: в обычном режиме js просто проигнорирует такую попытку; в "use strict" будет TypeError.Пример:"use strict";const user = Object.freeze({ name: "Alex"});user.name = "John";// TypeError: Cannot assign to read only property 'name'Но вложенные объекты всё равно можно менять, если их отдельно не заморозить. Для базовой глубокой заморозки можно написать небольшой хэлпер:function deepFreeze(obj) { if (obj && typeof obj === "object" && !Object.isFrozen(obj)) { Object.values(obj).forEach(deepFreeze); Object.freeze(obj); } return obj;}const settings = deepFreeze({ api: { retry: 3 }});И теперь:settings.api.retry = 10;console.log(settings.api.retry);// 3В обычном режиме присваивание будет молча проигнорировано. В "use strict" — упадёт с TypeError.Важно: это упрощённая версия deepFreeze. В реальном коде могут всплыть Symbol-свойства, non-enumerable свойства, циклические ссылки и другие детали. Для production-версии обычно используют Reflect.ownKeys() и защиту от циклических ссылок через WeakSet.Но для понимания главной идеи этого достаточно: Object.freeze() не делает объект глубоко immutable. Он замораживает только первый уровень.🔥 Полезно помнить для конфигов, enum-подобных объектов и любых структур, которые не должны случайно мутироваться во время выполнения.📣 JS Ready | #практика

🤔 Code JavaScript — большой учебник и практикум по JS!На сайте собрана полноценная база материалов по JavaScript: от базового синтаксиса и работы с DOM до более сложных тем вроде замыканий, событий, async/await и ООП. Материал построен в формате уроков и практических заданий, поэтому подходит не только для чтения, но и для закрепления знаний на практике.📌 Оставляю ссылочку: code.mu📣 JS Ready | #сайт

Почему отрицательные индексы в массиве “работают”, но не так как ожидается?Многие думают, что arr[-1] — это доступ к последнему элементу, как в Python.arr[-1]Но в JavaScript массив — это обычный объект.Отрицательный индекс не становится индексом массива, а превращается в обычное свойство объекта.arr['-1'] = 'test'Поэтому length вообще не меняется.arr.length // 3И методы массива не видят такие значения.arr.map(x => x) // без 'test'Для нормального доступа с конца есть специальный метод .at()arr.at(-1)🔥 Очень неочевидная особенность языка, которая часто всплывает при портировании кода из Python и работе с индексами.📣 JS Ready | #совет

📂 Напоминалка по методам массивов!Например, push() добавляет элементы в конец массива, map() создаёт новый массив после преобразования, а splice() умеет удалять и вставлять элементы прямо в исходный массив.На картинке — удобная шпаргалка по основным методам массивов: мутации, поиск, трансформация, immutable-методы ES2023 и статические методы.Сохрани, чтобы не потерять!📣 JS Ready | #ресурс

Почему setTimeout в Node.js и браузере возвращает разные типы?Многие думают, что setTimeout всегда возвращает число.const id = setTimeout(fn, 1000);В браузере это действительно numeric id.typeof id // 'number'Но в Node.js возвращается объект Timeout.typeof id // 'object'Из-за этого часто возникают проблемы с TypeScript-типами и universal/fullstack кодом между браузером и Node.js.Например, такой код уже не универсален:let timerId: number;timerId = setTimeout(fn, 1000);Правильный универсальный тип:let timerId: ReturnType<typeof setTimeout>;🔥 Он автоматически подстроится под окружение.📣 JS Ready | #совет

💅 Josh W. Comeau — статьи и руководства по JavaScript и React!На сайте собраны статьи и интерактивные туториалы по JavaScript, React, CSS-анимациям, Flexbox, Grid и архитектуре интерфейсов. Автор объясняет сложные концепции простым языком и показывает не только как, но и почему это работает.📌 Оставляю ссылочку: joshwcomeau.com📣 JS Ready | #сайт