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

👩‍💻 CSS :has() — Псевдокласс, который давно ждали Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов. Читать...

REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут: — О ситуации на рынке рекламы — Как продвигать и продавать в интернете в 2025 году — Как бизнесу адаптироваться к меняющимся условиям Вас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива. Встречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

⚙️ В чем разница между == и === в JavaScript? В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов. ➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

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

👩‍💻 Cube & Dots Loader Анимированная загрузка в виде точек и куба. Сделана на чистом CSS. Открыть код...

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

<input type="number" id="timeInput" placeholder="Введите секунды"> <button id="startButton">Старт</button> <div id="timer">0</div> const input = document.getElementById('timeInput'); const button = document.getElementById('startButton'); const timerDisplay = document.getElementById('timer'); let timerId; button.addEventListener('click', () => { const seconds = parseInt(input.value, 10); if (isNaN(seconds) || seconds <= 0) { timerDisplay.textContent = 'Введите корректное число!'; return; } clearInterval(timerId); let remainingTime = seconds; timerDisplay.textContent = remainingTime; timerId = setInterval(() => { remainingTime -= 1; if (remainingTime <= 0) { clearInterval(timerId); timerDisplay.textContent = 'Время вышло!'; } else { timerDisplay.textContent = remainingTime; } }, 1000); });

Бесплатный живой вебинар - "Визуал который продает" 💰Как слайды превращаются в деньги? Узнай, как дизайн презентаций помогает зарабатывать фрилансерам, экспертам и бизнесу! 📅 Старт бесплатного интенсива - 15 сентября в 16:00 по МСК ⚡ Что разберём? - Почему визуал решает — и как влияет на деньги - Как делать слайды, которые продают - Заработок на презентациях с нуля ✨ Кому подойдет? - Новичкам в дизайне - Тем, кто хочет освоить дизайн презентаций - Мечтающим о удалённой профессии - Желающим прокачать креативность 📊 Что вас ждёт? - Знакомство с дизайном слайдов - Удобный онлайн-формат - Много практики + обратная связь Не упусти шанс превратить дизайн в доход - Регистрируйся! Зарегистрироваться #реклама 16+ ed.bonnieandslide.com О рекламодателе

🛡 Парольная защита статичной 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 О рекламодателе