🥺 Какое самое странное название файла вы видели?

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

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

🌐 Как сделать фичу одинаково работающей в любом браузере

Разные движки (Blink, Gecko, WebKit) могут интерпретировать один и тот же CSS‑код по-разному. Этот подход помогает не искать проблему вручную, а получить готовые решения — префиксы, полифиллы и обходные пути в одном запросе.

Промпт:

How can I make [specific feature] work across different browsers?
Please include vendor prefixes, fallbacks, feature queries (e.g. @supports) and polyfills with code examples.

Что даёт промпт:

➡️ Чёткий список необходимых вендорных префиксов (например, -webkit-, -moz-, -ms-) для устаревшего CSS 

➡️ Советы по использованию @supports для проверки поддержки функций в рантайме 

➡️ Рекомендации по подключению полифиллов и проверке их работы на разных браузерах 

Дополнительно можно попросить:

— Чек‑лист браузеров и версий, где фича может ломаться

— Примеры fallback‑обходов, если поддержка отсутствует

— Код для автоматической вставки префиксов через Autoprefixer 

🔗 Источник

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

#буст

🧩 Как я работал с микрофронтендами

Пользователь Reddit рассказал о своём опыте работы с микрофронтендами, используя такие технологии, как Module Federation и Single-SPA. Вот его рассказ:

«Я работал в команде, которая занималась разработкой и поддержкой внутреннего оркестратора микрофронтендов. Мы использовали Module Federation и Single-SPA для интеграции различных приложений, разработанных с использованием React и React Router. Основной проблемой было управление общими зависимостями и обеспечение совместимости между различными микрофронтендами. Мы разработали собственный инструмент для локальной разработки, который использовал http-proxy-middleware для проксирования запросов, что позволило нам тестировать микрофронтенды в изоляции. Однако самым большим вызовом было управление состоянием и данными между микрофронтендами. Мы пришли к выводу, что лучше всего передавать только минимально необходимую информацию, такую как токен авторизации, и позволить каждому микрофронтенду загружать свои данные самостоятельно.»

Как вы решаете вопросы совместимости и управления состоянием в проектах с микрофронтендами?

Поделитесь своим опытом в комментариях ✏️

🔗 Источник

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

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

⭐️ Организация стилей с переменными и миксинами

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

Как применить его в проекте:

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

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

➡️ Вложенность для логической организации стилей, отражающих структуру HTML, что улучшает читаемость и уменьшает количество кода.

➡️ Функции и математические операции для динамического изменения значений, например, при расчёте размеров элементов или создании адаптивных стилей.

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

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

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

#буст

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

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

😐 Что мы загадали в ребусе

Пишите ваш вариант в комментариях — и не забудьте скрыть под спойлером ✏️

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

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

🟣 Подборка материалов по интеграции фронтенда с бэкендом через GraphQL

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

➡️ Введение в GraphQL: ключевые аспекты и преимущества

➡️ Как работать с подписками GraphQL для реального времени: руководство по настройке подписок в GraphQL с Apollo Client

➡️ Apollo Client + React: видеообзор, показывающий, как настроить Apollo Client в React-приложении для работы с GraphQL

➡️ GraphQL для фронтенд-разработчика: введение в основы

➡️ Внедрение GraphQL на фронтенде без переломов

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

#свежак

🚨 Вопрос на внимательность

У вас форма, куда пользователь может ввести текст. Вы вставляете этот текст так, как на картинке.

➡️ Пользователь ввёл:

<img src=x onerror=alert(1)>

Что произойдет ❓

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

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

🥰 Топ-вакансий для фронтендеров за неделю

Senior JavaScript developer — от 300 000 ₽, удаленно (Москва)

JS-разработчик — удаленно (Москва)

Разработчик 3D-продукта (JS/WebGL) — от 130 000 до 145 000 ₽ , гибрид (Екатеринбург)

Vue Frontend-разработчик (Senior) — от 270 000 ₽, удаленно

Angular Developer — от 230 000 ₽, удаленно (Москва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

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

#свежак

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

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

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

📍 Защищает от 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);

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

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

#буст