Фронтенд Гайд

Кто в теме, поймет😂

Сегодня исторический день для JavaScript! API Temporal API теперь доступен в Node.js. Наконец-то нормальный API для работы с датами. Прощай new Date("2026-04-28") Здравствуй Temporal.PlainDate.from("2026-04-28") ✓ Даты без странных таймзон ✓ Можно нормально прибавлять дни, месяцы и годы без багов ✓ Прощай, куча проблем с Date

Нужно быстро привести CSV-файл к читаемому виду? CSV to Table — позволяет отобразить содержимое CSV как таблицу прямо в VS Code. Данные выравниваются по столбцам, становятся наглядными и удобными для анализа без открытия сторонних инструментов. Полезно при работе с выгрузками, логами и любыми табличными данными.

Совет по CSS: Единица измерения turn Иногда проще задать вращение с помощью единицы turn вместо deg, особенно когда нужно указать значение больше 360 градусов (1 turn = 360 deg)

😍 QuickRef — компактная шпаргалка по JavaScript! Это удобный справочник, где собраны ключевые конструкции, методы и синтаксис JS на одной странице. Здесь есть всё необходимое: переменные, функции, операторы, строки, массивы и базовые примеры кода для быстрого ориентирования. Формат максимально сжатый и практичный. 📌 Оставляю ссылочку: quickref.me

👩‍💻 Нужно быстро связать HTML и CSS? HTML to CSS autocompletion — подсказывает CSS-классы и id прямо при работе с HTML. Расширение анализирует стили в проекте и предлагает существующие селекторы, чтобы не допускать опечаток. Удобно при верстке, особенно в больших проектах, где легко запутаться в названиях классов.

CEO Y Combinator выкатил свой сетап для Claude Code Это целая виртуальная команда из 10+ ролей, которая живёт внутри CLI. Теперь мы живем в реальности, где один человек гоняет 5–10 агентов параллельно: они пишут код, тесты, сами находят баги и фиксят их. У самого Гарри получается до 10–20к строк кода в день при работе «параллельно с CEO». По факту это превращает Claude в управляемый софтверный завод с ролями, процессами и гейтами.

👩‍💻 Нужно открыть PDF, не выходя из редактора? vscode-pdf — позволяет просматривать PDF-файлы прямо в VS Code: без сторонних приложений и переключений между окнами. Можно быстро открыть документацию, спецификации или инструкции и держать всё в одном рабочем пространстве. Удобно, когда работаешь с проектами, где часто приходится обращаться к PDF.

NPM Visual Manager— это расширение для VS Code, которое позволяет управлять зависимостями через удобный UI вместо запуска команд в терминале. → просмотр установленных и актуальных версий → установка пакетов прямо из интерфейса → обновление в один клик → простое удаление пакетов → поддержка массовых операций → работает прямо внутри VS Code Удобно, если не хочется каждый раз вручную вводить npm-команды 👍

Перестань вызывать redirect() внутри блока try/catch в Next.js Почему это проблема: Когда ты добавляешь redirect() из next/navigation внутрь try/catch redirect() специально выбрасывает внутреннюю ошибку – именно так Next.js понимает, что нужно сделать редирект пользователя Но если redirect() находится внутри try, то catch перехватит эту ошибку, и редирект не произойдёт Как исправить: → Вынеси redirect() за пределы блока try/catch

Эта фича в VS Code чертовски недооценена 🤯 Можно добавить цветную рамку вокруг окна, чтобы было проще различать разные окна VS Code. Например, можно задать разные цвета, чтобы визуально отделить frontend и backend проекты при переключении между окнами и не путаться. → добавляет рамку вокруг окна → поддерживает hex, rgb, hsl и другие форматы → удобно при работе с несколькими проектами → можно использовать системные или кастомные цвета Чтобы включить: найди window.border в настройках, открой вкладку workspace и выбери значение вроде default, system или задай свой цвет

👩‍💻 Хочешь показать кусок кода так, чтобы он выглядел аккуратно? Polacode — делает скриншоты кода прямо из VS Code: с подсветкой синтаксиса, темой редактора и оформлением. Просто выделяешь код и получаешь готовое изображение для поста, документации или презентации.

Простой способ сделать градиентный текст в CSS Свойство background-clip определяет, как фоновое изображение или цвет должны быть обрезаны относительно границ текста. В данном случае установлено значение text, что означает, что фон должен быть обрезан по контуру текста. Также мы используем свойство -webkit-text-fill-color, чтобы сделать цвет текста прозрачным h1 { background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%); background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

📂 Напоминалка по иммутабельным методам! Например, array.push() изменяет исходный массив, а [...array, item] — создаёт новый без мутации. То же самое с sort(), reverse() и другими — у них есть безопасные аналоги вроде toSorted() и toReversed(). На картинке — 9 мутирующих методов и их иммутабельные альтернативы, которые стоит держать под рукой при работе с массивами. Сохрани, чтобы не забыть!

📂 Напоминалка по объектам в JavaScript! Например, объект помогает хранить данные в формате ключ-значение, а через dot notation, bracket notation и destructuring можно быстро получать и использовать нужные свойства. На картинке — базовые приёмы работы с объектами: создание, доступ к свойствам, изменение значений, добавление новых полей, деструктуризация и методы. Сохрани, чтобы не забыть!

👩‍💻 Когда работаешь с YAML-конфигурациями! YAML — расширение для VS Code, которое добавляет подсветку синтаксиса, автодополнение и проверку структуры YAML-файлов. Помогает быстрее писать конфиги для Docker, Kubernetes, GitHub Actions и других инструментов, сразу показывая ошибки и подсказки.

Форматирование JSON-кода Вы, вполне вероятно, хорошо знакомы с методом JSON.stringify(). А знаете о том, что с помощью этого метода можно форматировать JSON-код? Это, на самом деле, очень просто. Метод stringify() принимает три параметра. Это параметры value, replace и space. Два последних параметра в этом списке являются необязательными. Именно поэтому их вы, возможно, раньше не использовали. Для настройки выравнивания JSON-кода необходимо использовать параметр space.