Frontender's notes

👥 Intl API: Форматирование данных без лишних зависимостей Intl API — это крутая штука, которая помогает быстро и легко работать с датами, числами и валютами прямо в браузере. Это не только ускоряет процесс, но и подстраивается под язык пользователя, так что всё выглядит и работает как надо. А ещё можно настроить формат под свои нужды без всяких дополнительных библиотек. 💼 Как работать с Intl API

• Intl.DateTimeFormat — форматирование дат С помощью метода Intl.DateTimeFormat можно легко форматировать даты в зависимости от локали и требований, однако важно помнить о нескольких моментах: указывайте формат явно, задавайте локаль первой строкой и учитывайте таймзоны, используя параметр timeZone: "Europe/Moscow". • Intl.NumberFormat — числа, проценты, дроби Intl.NumberFormat предоставляет удобные инструменты для форматирования чисел, процентов и дробей. Среди полезных опций можно выделить: стиль представления чисел в виде процентов (style: "percent"), компактное представление больших чисел (notation: "compact" → "12K"), всегда отображаемый знак числа (signDisplay: "always" → "+120"), а также возможность отключения группировки разрядов (useGrouping: false → убрать пробелы). • Intl.NumberFormat для валют Для корректного форматирования валюты используйте Intl.NumberFormat, применяя ISO-коды валют, такие как «USD», «EUR», «KZT». Это позволит избежать ручного форматирования и обеспечит единообразие представления денежных сумм. Для криптовалют можно использовать параметр currencyDisplay: «code», например, для «BTC». • Intl.RelativeTimeFormat — «5 минут назад» Для корректного отображения времени в пользовательском интерфейсе используйте Intl.RelativeTimeFormat. Удобно для таких целей, как время доставки, статус онлайн/офлайн или лента активности. • Intl.ListFormat, Intl.DisplayNames, Intl.PluralRules Intl.ListFormat — форматирует списки на разных языках. Intl.DisplayNames — позволяет локализовать языки, регионы и валюты. Intl.PluralRules — для правильных склонений в разных языках.

📝 Примеры Intl API

// Intl.DateTimeFormat const date = new Date(); const formatted = new Intl.DateTimeFormat('ru-RU', { day: "2-digit", month: "long", year: "numeric" }).format(date); // "24 ноября 2025 г." // Intl.NumberFormat new Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(12345.678); // "12 345,68" // Intl.NumberFormat new Intl.NumberFormat("ru-RU", { style: "currency", currency: "RUB", currencyDisplay: "narrowSymbol" }).format(1999); // "1 999 ₽" // Intl.RelativeTimeFormat const rtf = new Intl.RelativeTimeFormat("ru", { numeric: "auto" }); rtf.format(-5, "minute"); // "5 минут назад" rtf.format(1, "day"); // "завтра" // Intl.ListFormat new Intl.ListFormat("ru", { type: "conjunction" }).format(["HTML", "CSS", "JS"]); // "HTML, CSS и JS" // Intl.DisplayNames new Intl.DisplayNames(["ru"], { type: "language" }) .of("fr"); // "Французский" // Intl.PluralRules const pr = new Intl.PluralRules("ru"); const map = { one: "лайк", few: "лайка", many: "лайков" }; map[pr.select(5)]; // "лайков"

📌 При использовании Intl API в продакшне важно не смешивать форматирование в компонентах, а выносить всё в отдельный модуль, например, formatters.ts. Задавайте локаль заранее — из браузера, настроек или профиля. Для SSR передавайте локаль и временную зону с сервера. Кроме того, необходимо кэшировать Intl-объекты, создавая их один раз, а не в каждом рендере, чтобы оптимизировать производительность. 🚪 Frontender's notes

👨‍💻 Хотите создать мини-соцсеть с нуля за один вечер? На открытом вебинаре мы за 1,5 часа пройдём путь от пустой папки до приложения: старт через create-vue, сразу подключим роутинг, разберём компоненты, props, директивы и события. Добавим computed и хуки жизненного цикла, сделаем запрос к FakeAPI и выведем карточки пользователей. Вы увидите Vue в деле: как превращать данные в интерфейс, как устроена реактивность, как строится навигация и детальные страницы по клику. Это базовая логика реальных Vue-проектов без лишней теории. 📆 Встречаемся 23 декабря в 20:00 МСК в преддверие старта курса «Vue.js-разработчик»: https://otus.pw/mGtR/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2VtzquyiDSS

🔫 Signals — будущее реактивности в фронтенде Мы все давно привыкли к идее реактивности в UI, но в 2025 году я пришёл к выводу, что мы наконец-то пришли к нормальной, предсказуемой модели. Не к магии хуков и сложным эффектам, а к Signals.

✅ Что такое Signals? Signals — это крутой инструмент для работы с реактивностью. Он автоматически обновляет только те части приложения, которые действительно нуждаются в новых данных, без лишних перезагрузок и гонок. В отличие от привычного useState в React, Signals работает синхронно и не требует лишних вычислений. Это делает код более предсказуемым и упрощает разработку. ✈️ Почему это будущее? Signals минимизируют ненужные рендер-циклы, обновляя только те части пользовательского интерфейса, которые действительно изменились. Это соответствует принципам работы современных UI, позволяя избежать лишних вычислений и оптимизации рендеринга. В отличие от React, где обновление значения часто влечёт за собой цепочку сайд-эффектов и дополнительных операций, подход с Signals разделяет реактивность и сайд-эффекты. Это делает код более предсказуемым и чистым, упрощая отладку и поддержку. 👀 Преимущества Signals: • Работают без привязки к конкретным фреймворкам • Подходят для использования в виджетах, Canvas/WebGL, Web Components, сервисах и сторах • Могут применяться в Node.js 🔃 Где это уже используется? Например, Angular 17+ предлагает полноценный «signal mode», SolidJS построен вокруг сигналов, Qwik использует fine-grained реактивность по умолчанию, React Canary работает над useSignal и «compiler-driven reactivity», а Vue 3 применяет концептуально похожие подходы с функциями reactive() и ref(). Это уже не эксперимент, а работающие решения в реальных продакшн-системах. 🤚 Когда стоит переходить на Signals? Signals особенно полезны в больших приложениях с множеством локальных состояний, в формах, таблицах и фильтрах, а также в реальном времени и высокоинтерактивном UI (например, в Canvas, WebGL, играх). Стоит переходить на Signals, когда вы замечаете, что эффекты становятся громоздкими, стей-тлогика расползается и приложение ререндерится чаще, чем нужно — это поможет упростить код и повысить его производительность.

📌 С помощью Signals мы меняем только то, что должно измениться, упрощая разработку и делая её более эффективной. 🚪 Frontender's notes

👩‍🎨 Anime.js Если вы ищете простое решение для анимаций в вашем веб-проекте, Anime.js может стать отличным выбором. Это легковесная и быстрая библиотека, которая позволяет создавать плавные и мощные анимации с минимальными усилиями.

Она работает с CSS-свойствами, SVG, атрибутами DOM и JavaScript-объектами, что делает её универсальной для различных типов проектов. Репозиторий Anime.js полностью на английском, так что вам потребуется базовое знание языка или инструменты перевода. Но для современного разработчика это не должно стать препятствием — документация ясная и понятная, а сообщество активно поддерживает библиотеку. Anime.js позволяет анимировать различные элементы страницы с помощью простых команд.

📌 Это отличное решение для всех, кто хочет добавить анимацию в проект, не перегружая его лишними зависимостями. Если вам нужно больше гибкости, библиотека предоставляет мощные возможности для настройки. 🚪 Frontender's notes

❄️ Новогодние стримы от SourceCraft! Первый эфир пройдёт 18 декабря, второй — 23 декабря. Эксперты Яндекса SourceCraft — Дмитрий Иванов, Сергей Бережной и Роман Елизаров разберут практические задачи и инструменты, которые можно применять в учёбе и реальных проектах. На стримах будет разбор интересных алгоритмических задачек, которые полезно решать при подготовке к хакатонам, собеседованиям и различным соревнованиям, а также прожарка решений от ИИ-ассистента с призами для участников! Также эксперты раскроют все секреты по работе с кодом в SourceCraft — AI-native платформы для разработки любого масштаба — от сайтов, ботов и лабораторных работ до проектов с большой кодовой базой и командой специалистов! Эфир подойдёт студентам, джунам и разработчикам разных направлений, которые хотят лучше разобраться в современных инструментах разработки. Давайте готовиться к 2026 вместе! ✌️ Регистрация на эфир 18 декабря ✌️ Регистрация на эфир 23 декабря

🤣 Лучшая страница 500 ошибки 💥 xCode Journal

Пишете на JavaScript, но всё ещё завязаны на фреймворки и готовые компоненты? Хотите понимать, как работает браузер, и создавать свои элементы, а не только использовать чужие? На открытом уроке разберём, как JavaScript взаимодействует с DOM, как с помощью классов и ООП собирать структурированные компоненты и что такое Web Components на практике. Шаг за шагом создадим кастомный HTML-тег с нуля и подключим его к странице так, чтобы элемент можно было переиспользовать. Урок будет полезен начинающим фронтенд-разработчикам и тем, кто хочет уйти от фреймворков к осознанному пониманию браузерного API. Вебинар проходит в преддверие старта курса «JavaScript Developer. Basic». Встречаемся 22 декабря в 20:00 МСК. Регистрация открыта: https://vk.cc/cSr72I Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

👤 HTML в 2025: почему он снова в центре внимания HTML снова на пике популярности. Это не просто ностальгия по старым добрым временам. HTML стал значительно мощнее и функциональнее. Пока фреймворки постоянно обновляются, исчезают или перерождаются, HTML остаётся основой веба и продолжает развиваться. Давайте разберемся, почему.

👁 HTML становится умнее без JS Ранее практически все действия на странице требовали подключения JavaScript. Сегодня же многое стало возможным непосредственно в HTML. Например, модальные окна можно создавать с помощью тега <dialog>, а аккордеоны — с помощью <details>. Для создания компонентов теперь можно использовать сочетание <template> и <slot>, а родительские селекторы позволяют работать с элементами через :has(). Даже такие вещи, как тултипы и всплывающие подсказки (popovers), теперь можно реализовывать нативно. Кроме того, HTML теперь поддерживает встроенную валидацию форм, что избавляет от необходимости использования дополнительных библиотек или костылей. 👁 HTML приближается к компонентам С помощью таких технологий, как Custom Elements, Shadow DOM и templates, HTML фактически становится фреймворком внутри браузера. Эти инструменты обеспечивают инкапсуляцию, поддержку реактивных атрибутов и жизненных циклов компонентов, а также стили, которые не выходят за пределы компонента. Всё это возможно без необходимости в бандле, рантайме или React, что снижает нагрузку и ускоряет процесс разработки. 👁 Основа тренда «ship less JS» Современные фреймворки всё чаще делают рендер на сервере и выдают браузеру чистый HTML. Такой подход набирает популярность среди таких технологий, как React Server Components, Svelte 5 runes, Astro islands, Marko и Qwik resumability. Все эти фреймворки делают акцент на том, чтобы в браузер поступало как можно меньше JavaScript. 👁 HTML выигрывает перед современными одностраничными приложениями (SPA) по многим фронтам • Во-первых, он легко оптимизируется для поиска, так как поисковики могут сразу прочитать содержимое страницы • Во-вторых, HTML не требует гидратации, что делает страницы быстрее, а значит, улучшает показатели производительности • Кроме того, HTML страницы проще интегрируются с скринридерами, что значительно повышает доступность для пользователей с ограниченными возможностями 👁 Стабильный API на десятилетия Одним из ключевых преимуществ HTML является его стабильность. В то время как фреймворки приходят и уходят, HTML остаётся неизменным. Тег <form> существует с 1997 года и продолжает работать без изменений. Ваши знания HTML не обесцениваются, они остаются актуальными на протяжении десятилетий.

📌 Современные тренды, типа islands и SSR, делают HTML ещё круче в разработке. Он не просто стал мощнее, но и намного удобнее. Теперь можно легко получить все нужные функции прямо из коробки. 🚪 Frontender's notes

Ускорьте работу фронтенд-разработчика Cursor — IDE с ИИ, которая помогает писать код по описанию, искать ошибки и приводить проект в порядок быстрее обычного. Что делает: • генерирует и дополняет код на естественном языке • объясняет непонятные участки • находит ошибки и предлагает фиксы • подсказывает оптимизации и практики • работает как полноценная IDE, только быстрее Для компаний — это реальный способ ускорить команду без найма дополнительных разработчиков: меньше рутины, больше времени на архитектуру и продуктовые задачи. Попробовать Cursor: https://clck.ru/3QeE4z Поставщик в России — «Системный софт» (оплата в рублях, закрывающие документы и поддержка при подключении). Перейти на сайт #реклама 16+ syssoft.ru О рекламодателе

🤩 Cursor добавили визуальный редактор UI прямо во встроенный браузер IDE! Работает элементарно — просто берешь и перетаскиваешь элементы, меняешь стили, центруешь div (даже это теперь с ИИ), а Cursor сам обновляет весь код под капотом. ✖️ xCode Journal