🌟 Как реализовать безопасный ввод с помощью валидации на стороне клиента

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

Почему важно:

📍 Защищает от XSS и SQL-инъекций

📍 Предотвращает отправку некорректных данных

📍 Повышает UX за счет быстрой обратной связи

Как внедрить:

1. Делаем проверку на пустое поле:

const form = document.querySelector('form');
const input = document.querySelector('input[name="username"]');

form.addEventListener('submit', (event) => {
  if (!input.value.trim()) {
    event.preventDefault();
    alert('Поле не может быть пустым!');
  }
});

2. Проверяем корректность email:

const emailInput = document.querySelector('input[name="email"]');

form.addEventListener('submit', (event) => {
  const email = emailInput.value;
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  
  if (!regex.test(email)) {
    event.preventDefault();
    alert('Введите корректный email!');
  }
});

3. Ограничиваем длину пароля:

const passwordInput = document.querySelector('input[name="password"]');

form.addEventListener('submit', (event) => {
  if (passwordInput.value.length < 6) {
    event.preventDefault();
    alert('Пароль должен быть не менее 6 символов!');
  }
});

4. Используем атрибуты HTML5 для валидации:

<form>
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="6" required>
  <button type="submit">Отправить</button>
</form>

5. Экранируем пользовательский ввод для защиты от XSS:

function escapeHtml(text) {
  const element = document.createElement('div');
  if (text) {
    element.innerText = text;
    element.textContent = text;
  }
  return element.innerHTML;
}

const userInput = '<script>alert("XSS")</script>';
const safeInput = escapeHtml(userInput);
console.log(safeInput);

💡 Применение этих методов поможет обезопасить вводимые данные и защитить приложение от популярных угроз.

🐸 Библиотека фронтендера

#буст

⚙️ Инструмент недели: как заменить ESLint и Prettier одним пакетом

Biome — это современный линтер и форматтер для JavaScript и TypeScript, родившийся из проекта Rome. После разделения команды часть разработчиков решила создать новый проект с открытой разработкой и фокусом на стабильности.

Зачем нужен:

🔵 Один инструмент вместо нескольких — Biome заменяет связку ESLint + Prettier, и при этом быстрее их обоих.

🔵 Максимальная скорость — благодаря Rust лентинг и форматирование выполняются мгновенно, даже на больших репозиториях.

🔵Официально выпускает и поддерживает свой плагин для VSCode. Линтинг и автофиксы работают прямо во время набора кода.

🔵 Умеет форматировать JSON, YAML и TOML, а не только JS/TS.

Как использовать:

1️⃣ Установите Biome в проект:

npm install --save-dev @biomejs/biome

2️⃣ Инициализируйте конфиг:

npx biome init

3️⃣ Проверьте и отформатируйте код:

npx biome format

4️⃣ Установите официальный плагин VSCode — подсказки и автоисправления будут работать прямо в редакторе.

5️⃣ Добавьте Biome в pre-commit хуки через Husky или lint-staged — чтобы код всегда проходил проверку до пуша.

Что важно знать:

— Biome не делает сборку кода — его задача: проверять, анализировать и форматировать исходники. Для сборки используйте Vite, Webpack или SWC.

— Проект развивается очень активно, с прозрачным роадмапом и постоянными обновлениями.

— Хорошо подходит для монорепозиториев и крупных проектов, где важна скорость проверок.

🔗 Анонс последней версии

🐸 Библиотека фронтендера

#буст

🐸 Библиотека фронтендера

#развлекалово

🐏 Июньские выпуски подкастов

1️⃣ 10 years of SolidJS with Ryan Carniato

Райан Карниато, создатель SolidJS, делится опытом 10 лет работы с этим фреймворком.

➡️ Обсуждаются основные моменты развития реактивных UI, философия SolidJS, отличия от других фреймворков.

2️⃣ Is HTML, CSS & JS still enough in 2025?

Разбор текущего состояния рынка труда в контексте фронтенд-разработки.

➡️ Обсуждается, насколько базовых знаний HTML, CSS и JavaScript достаточно для карьеры фронтенд-разработчика в 2025 году.

3️⃣ If Statements in CSS?

Сет и Уэст из Syntax разбираются в условной логике в CSS.

➡️ Рассматриваются последние подходы к динамическому применению стилей и возможности CSS для создания более умных и адаптивных интерфейсов, которые раньше требовали JavaScript.

🐸 Библиотека фронтендера

#буст

📌 Генерация компонента через CLI

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

npx hygen component new MyComponent

Используется в React, Vue, Next.js, Svelte — где важна единая структура кода.

Зачем это нужно:

➡️ Экономит время на рутине и структуре

➡️ Упрощает командную разработку — все создают файлы по одним правилам

➡️ Легко обновлять шаблоны под новые стандарты проекта

💡 Лайфхаки:

— Можно завести несколько шаблонов: для компонентов, хуков, страниц и модулей.

— Для интерактивности используйте Plop — он задаёт вопросы и подставляет ответы в шаблон.

— Объедините генерацию с git hooks или npm run — тогда новые компоненты будут сразу проходить линтинг и тесты.

🐸 Библиотека фронтендера

#буст

🐸 Библиотека фронтендера

#развлекалово

👀 Нужен ли Tailwind c Svelte: вот в чем вопрос

В Svelte уже есть изоляция стилей через scoped CSS, но стоит ли добавлять Tailwind? Этот инструмент был создан для React, чтобы бороться с проблемой «протекания» стилей, которая в Svelte не возникает.

✅ Зачем использовать Tailwind:

— Быстрая верстка без необходимости писать свой CSS.

— Готовая система цветов, шрифтов, отступов.

— Легко переносить классы и шаблоны между проектами.

— Если команда уже работает с Tailwind — проще не разводить свой CSS‑зоопарк.

⛔️ Почему можно обойтись без него:

— Шаблон может превратиться в мешанину из утилитарных классов.

— Для сложной анимации или кастомных эффектов Tailwind быстро становится неудобным.

— Встроенный scoped CSS в Svelte часто чище и понятнее.

— Чужой код на Tailwind порой тяжело читать и поддерживать.

А вы как думаете? Tailwind в Svelte — мастхэв или излишество? Делитесь в комментариях! ✏️

🐸 Библиотека фронтендера

#междусобойчик