Логово верстальщика

🛡 Парольная защита статичной HTML-страницы на JS Как защитить веб-страницы паролем без серверной поддержки? Инструменты StatiCrypt и Portable Secret помогут зашифровать HTML с использованием AES-256. Статические страницы остаются безопасными даже на публичном хостинге. Читать...

📣 Софт-скилл для фронтенд-разработчика: как объяснять сложные вещи просто На разных уровнях в разработке — от мидла до лида — основным становится не только код, но и то, как ты доносишь свои мысли и идеи. Умение ясно и доступно объяснить технические вопросы — это не просто бонус, а важный навык для любой команды.

🔎 Какие ошибки часто встречаются? • Слишком много абстракций. Использование сложных терминов и понятий часто сбивает собеседника с толку • Лишняя сложность. В 15 минутах объяснения, где можно было бы уложиться в 2, теряется фокус • «Очевидные» вещи. То, что кажется очевидным тебе, может быть абсолютно непонятно другим 📣 Что стоит делать, чтобы улучшить коммуникацию? • Структурированность. Начни с главного: сначала объясни зачем это нужно, затем что происходит, и в конце уже объясни как это работает • Примеры вместо теории. Пример: вместо «нужно оптимизировать рендеринг», лучше сказать «компонент перерисовывается 20 раз, хотя данные изменяются лишь один раз» • Адаптация под собеседника. Общайся с джуном на доступном языке, с продактом избегай тех. жаргона, а с архитектором можно углубиться ➡️ Этот навык полезен в code review, созвонах с заказчиком или продуктом, наставничестве джунов и презентации архитектурных решений. Он помогает ясно и доступно объяснять сложные концепции без лишних деталей.

Ключевая мысль. Хороший разработчик хорошо пишет код. Сильный разработчик — не только пишет код, но и умеет объяснять его так, чтобы все поняли. Это делает тебя важным членом команды, на которого можно опереться. 🚪 Frontender's notes

Не нужно разбираться во всём самому В Нетворк от Точка Банк — предприниматели, которые уже прошли ваш путь. Подключайтесь к сообществам по маркетингу, менеджменту и финансам и находите ответы у тех, кто успешно решает подобные задачи. Нажмите на Подписаться , чтобы запустить бота и вступить в сообщество Подписаться #реклама 16+ О рекламодателе

🔝 Самые интересные статьи за последние дни: • RUINSWORLD: Многопользовательский шутер с открытым миром для браузера на js/ts, Three и Vue. Бета-версия • Рецепты TypeScript: простое тестирование типов • Как я создала приложение, которое решает, что мне есть • Vite 6.0: Новые возможности и будущее веб-разработки • Наиболее эффективные методы улучшения Core Web Vitals

👩‍💻 Уникальные значения из массива Напишите функцию, которая принимает массив и возвращает новый массив, содержащий только уникальные значения из исходного массива. Пример:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Решение задачи🔽

function getUniqueValues(arr) { return [...new Set(arr)]; } // Пример использования const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = getUniqueValues(numbers); console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

👩‍💻 TS Extend: полезная утилитарная функция для расширения type Статья объясняет ограничения TypeScript 5.7 в работе с расширением типов, демонстрирует проблему интерсекции с одинаковыми свойствами и предлагает утилиту Extend для корректной обработки таких случаев. Читать...

Подборка каналов IT от наших друзей: 🦥 Lazy_Programmer – Для ленивых 🎬 videos_it  — База видеоуроков по IT 🐧 Linux_Club — Для Linuxоидов 📔 BOOKS — Читать не перечитать 🇷🇺 our_computer — У нас как в СССР 🔐 LazySecurity — Канал по ИБ 🤩 iwannabeprogrammer  — IT-мемы 🔥 floppydisky — ITUMOR 📱 codebase_frontend — Красим кнопки ➡️ LazyDevOps —  Канал для дев и псов 🐈‍⬛️ LazyTester — Протестируй канал!

↔️ CSS Container Queries — адаптивность без костылей Адаптивность через @media — привычная вещь, но неудобная: когда один компонент используется в разных местах, его поведение зависит от размера окна браузера, а не от его контейнера. В итоге — хаки и дублирование стилей. ℹ️ Как было раньше (через media queries):

.card .title { font-size: 1rem; } @media (min-width: 768px) { .card .title { font-size: 2rem; } }

ℹ️ Как стало с Container Queries:

.card { container-type: inline-size; container-name: card; } .title { font-size: 1rem; } @container card (min-width: 400px) { .title { font-size: 2rem; } }

Проблема: Если компонент .card вставить в узкий сайдбар на широком экране, стили могут «сломаться», так как адаптивность зависит от окна браузера, а не от контейнера. Теперь .title реагирует на размер контейнера, а не на размер вьюпорта. Это решение убирает все костыли и делает компоненты более гибкими.

Теперь можно создавать по-настоящему адаптивные компоненты без костылей. Поддержка в Chrome, Edge и Safari уже есть, так что пора пробовать в продакшене! 🚪 Frontender's notes

Получите IT профессию с официальным ДОКУМЕНТОМ! Не просто курсы – а полноценное образование с дипломом о профессиональной переподготовке или удостоверением о повышении квалификации, внесенным в Росреестр! Выбирайте направление: -Web-разработчик -Инженер MikroTik -Специалист по AI и машинному обучению -Сетевой инженер -Linux-администратор -Python-программист -DevOps-инженер -Администратор Windows Server -Специалист по слаботочным сетям (СКС) Ваши гарантии: ✅Законный документ о квалификации ✅Право на ведение профдеятельности ✅Весомое преимущество при трудоустройстве ✅Поддержка ментора ✅Дистанционное обучение Инвестируйте в будущее – получите не только знания, но и официальную профессию! Перейти на сайт #реклама 16+ dms-it.ru О рекламодателе

⚙️ Что такое теневые DOM-деревья (Shadow DOM) и как они работают? Shadow DOM — это ключевая часть технологии Web Components, которая позволяет создавать инкапсулированные области DOM с собственным стилем и поведением. Теневые DOM-деревья изолированы от остального документа, что предотвращает конфликты стилей и упрощает создание переиспользуемых компонентов. ➡️ Пример:

// Создание элемента с Shadow DOM
const host = document.createElement('div');
const shadowRoot = host.attachShadow({ mode: 'open' });

// Добавление стилей и контента
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
    }
  </style>
  <p>Это текст внутри Shadow DOM</p>
`;

document.body.appendChild(host);
console.log(document.querySelector('p')); // null (элемент скрыт из глобального DOM)

🗣️ В этом примере текст внутри Shadow DOM изолирован. Стили из Shadow DOM не влияют на остальную страницу, и наоборот. Shadow DOM полезен для создания самодостаточных UI-компонентов.

🖥 Подробнее тут

Вебинар - "Как заработать на графическом дизайне с нуля" ✨ Хочешь зарабатывать 200 000₽ в IT без программирования? Бесплатный вебинар от Бонни и Слайд. Спикер сам Николай Пере! Узнай за 1 вечер: - Как стартовать в графическом дизайне с нуля - 3 стратегии роста до 200 000₽/мес - Где брать заказы по 30 000₽+ - Как попасть в IT-компанию без опыта ✅ Подарок всем: Чек-лист «Где дизайнеру искать клиентов» + пошаговый план 2025! Это для тебя, если ты: - В поиске дела мечты - Хочешь сменить офис на свободу - Мечтаешь о доходе в IT без кода - Дизайнер, жаждущий роста ⚡ Зажги новую карьеру! Успей зарегистрироваться Зарегистрироваться #реклама 16+ ed.bonnieandslide.com О рекламодателе

⚙️ Vite 6.0: Новые возможности и будущее веб-разработки Новая мажорная версия Vite от 26 ноября 2024 года — первый релиз после анонса VoidZero. Рассмотрим ключевые изменения и будущие векторы развития инструмента для сборки приложений. Читать...

Приглашаем на Yandex Neuro Scale В этом году вас ждут 7 тематических треков, 50+ докладов, реальные бизнес-кейсы и нетворкинг. ✨Участие бесплатное, нужно только зарегистрироваться✨ Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

📈 Подборка статей для вашей карьеры • Выбираем подарки с умом • 10 лучших приёмов логирования для разработчиков • Из белой каски и грязных сапог в белый халат и тапки • Погружение в Web3: изучаем Node.js на открытом курсе • Чем стартап отличается от бизнеса и что выбрать

👩‍💻 Broken Glass Effect Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript. Открыть код...

👩‍💻 Новые возможности CSS за 2024 год Центрирование без боли, улучшенный тёмный режим, анимация скрытых элементов и даже решения математических задач — меньше сложностей, больше возможностей. Читать...

👩‍💻 Фильтрация списка через поле ввода Создайте поле ввода и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст. Игнорируйте регистр символов. Требования: • При вводе текста выполняется фильтрация: сравниваем введённую строку с каждым элементом списка. • Элементы, соответствующие фильтру, остаются видимыми, остальные скрываются. Решение задачи🔽

<input type="text" id="filterInput" placeholder="Фильтр..."> <ul id="items"> <li>Яблоко</li> <li>Банан</li> <li>Апельсин</li> <li>Груша</li> </ul> const input = document.getElementById('filterInput'); const listItems = document.querySelectorAll('#items li'); input.addEventListener('input', () => { const filter = input.value.toLowerCase(); listItems.forEach(li => { li.style.display = li.textContent.toLowerCase().includes(filter) ? '' : 'none'; }); });

👩‍💻 Как мы мигрируем с JQuery на React Обсуждаем миграцию с jQuery на React. В статье — реальный опыт, причины перехода, основные шаги и способы преодоления сложностей. Читать...

⚙️ Что такое event delegation в JavaScript и зачем его использовать? Event delegation — это техника, позволяющая обрабатывать события на родительском элементе вместо установки обработчиков на каждый дочерний элемент. Это особенно полезно, если дочерние элементы динамически добавляются или их много. ➡️ Пример:

// Родительский элемент
const parent = document.querySelector('#parent');

// Используем делегирование
parent.addEventListener('click', (event) => {
  if (event.target.matches('.child')) {
    console.log(`Клик по элементу: ${event.target.textContent}`);
  }
});

// Динамическое добавление дочерних элементов
const newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = 'Новый элемент';
parent.appendChild(newChild);

🗣️ В этом примере обработчик событий на родительском элементе обрабатывает клики по дочерним элементам, включая добавленные динамически. Это упрощает код и повышает производительность.

🖥 Подробнее тут