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

⚙️ Что такое Intersection Observer в JavaScript и зачем он используется? Intersection Observer — это API, которое позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport). Он полезен для ленивой загрузки изображений, бесконечной прокрутки и анимаций при прокрутке. ➡️ Пример:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видим:', entry.target);
    }
  });
});

// Наблюдаемый элемент
const target = document.querySelector('.observe-me');
observer.observe(target);

🗣️ В этом примере Intersection Observer отслеживает элемент .observe-me и выполняет код, когда элемент появляется в области видимости. Это позволяет избежать постоянного использования события scroll, улучшая производительность.

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

👩‍💻 Sphere Packing Интерактивная сцена с шарами. Сделана на CSS и JavaScript. Открыть код...

Новые бесплатные курсы в канале Selectel Newsfeed. Подойдут всем: от новичков до продвинутых айтишников. Вас ждут обзоры, инструкции и статьи, которые помогут разобраться в темах структурно и последовательно. Вступайте в сообщество IT-специалистов в Telegram от Selectel. Подписаться #реклама 16+ О рекламодателе

🔎 Подборка вакансий для джунов Junior React Developer 🟢React, HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass 🟢от 60 000 ₽ | Без опыта Junior React Developer 🟢React, HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass 🟢от 60 000 ₽ | 1–3 года Web-разработчик (PHP) 🟢PHP, Git, MySQL, ООП, HTML5, 1С-Битрикс, CSS, JavaScript, Ajax, Laravel 🟢от 150 000 ₽ | 1–3 года

Бесплатный онлайн-курс «Основы JavaScript» и 50 задач. Изучите базу самого широко используемого языка программирования в мире всего за 30 минут в день На курсе вы получите: ✅ Уверенный старт в JavaScript за 7 часов ✅ 50 практических задач по JS с автопроверкой ✅ Бессрочный доступ в чат с наставником Подать заявку #реклама 16+ result.school О рекламодателе

👩‍💻 Динамический список задач с возможностью удаления Создайте простой список задач, где пользователь может добавлять новые задачи через текстовое поле и удалять существующие задачи по кнопке "Удалить" рядом с каждой из них. Ожидаемое поведение: • Пользователь вводит текст задачи в поле и нажимает кнопку "Добавить". • Новая задача добавляется в список с кнопкой "Удалить" рядом с ней. • При нажатии на кнопку "Удалить" задача исчезает из списка. Решение задачи🔽

<div> <input type="text" id="taskInput" placeholder="Введите задачу" /> <button id="addButton">Добавить</button> </div> <ul id="taskList"></ul> const taskInput = document.getElementById('taskInput'); const addButton = document.getElementById('addButton'); const taskList = document.getElementById('taskList'); addButton.addEventListener('click', () => { const taskText = taskInput.value.trim(); if (taskText === '') return; // Не добавляем пустые задачи const listItem = document.createElement('li'); listItem.textContent = taskText; const deleteButton = document.createElement('button'); deleteButton.textContent = 'Удалить'; deleteButton.style.marginLeft = '10px'; deleteButton.addEventListener('click', () => { taskList.removeChild(listItem); }); listItem.appendChild(deleteButton); taskList.appendChild(listItem); taskInput.value = ''; // Очищаем поле ввода });

⚙️ Ultimatum — еще один форк хромиума, с претензией… Статья анонсирует сборку браузера Chromium — Ultimatum. Браузер обходит техники трекинга, позволяет устанавливать расширения с любых сайтов и перехватывать сетевые запросы для их полной подмены. Читать...

Попробуйте себя в мобильной разработке и аналитике Студенты, готовы прокачивать навыки программирования вместе с опытными преподавателями Т-Банка? Узнайте, как создавать приложения, анализировать данные и автоматизировать рутинные задачи, на одном из онлайн-курсов Т-Образования. Для учебы нужно 2—3 часа в неделю. Подайте заявку сейчас. Подать заявку #реклама 16+ education.tbank.ru О рекламодателе

🔝 Самые интересные статьи за последние дни: • OAuth 2.0, OpenID Connect и SSO для самых маленьких • 250 000 товаров и миллионы характеристик: как мы скрестили Битрикс с Symfony и MongoDB • JavaScript-фреймворки и библиотеки, на которые стоит обратить внимание в 2025 году • Onlyoffice и Р7 офис: макросы на Javascript (туториал) • Призываю переименовать Layers в Feature-Sliced Design методологии

Что такое реальный ворк-лайф баланс для разработчика? На целую неделю ребята из канала Merk/daily передают бразды правления их каналом Flutter-разработчику Александру, чтобы вместе выяснить как разработчикам не выгорать на сложных проектах. Никакой воды и скучных нравоучениях о том, как «правильно» жить 👌 Александр расскажет, как выглядит его ворк-лайф баланс на самом деле, и как создать свой собственный, идеально подходящий именно вам. А еще: - Реальные истории из жизни IT-специалистов в международной компании. - Как Саша пришел в IT и выбрал свой стек - Кринжовые истории с собеседований - История о том, как мы сначала отказали Саше, а потом передумали ⚡ Подписывайтесь на канал, чтобы не пропустить! Подписаться #реклама О рекламодателе

👩‍💻 Модальное окно с закрытием по кнопке и фону Создайте модальное окно, которое открывается при клике на кнопку и закрывается при клике на кнопку закрытия или на фон вокруг модального окна. Ожидаемое поведение: • При клике на кнопку "Открыть модальное окно" появляется модальное окно. • Модальное окно закрывается при клике на кнопку "Закрыть" или на затемнённый фон. • Фон страницы не прокручивается, пока открыто модальное окно. Решение задачи🔽

<button id="openModal">Открыть модальное окно</button> <div id="modal" class="modal"> <div class="modal-content"> <span id="closeModal" class="close-button">&times;</span> <p>Это модальное окно</p> </div> </div> body.modal-open { overflow: hidden; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .modal-content { background: white; padding: 20px; border-radius: 8px; position: relative; } .close-button { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; } const openModalBtn = document.getElementById('openModal'); const closeModalBtn = document.getElementById('closeModal'); const modal = document.getElementById('modal'); const body = document.body; openModalBtn.addEventListener('click', () => { modal.style.display = 'flex'; body.classList.add('modal-open'); }); closeModalBtn.addEventListener('click', closeModal); modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); function closeModal() { modal.style.display = 'none'; body.classList.remove('modal-open'); }

👩‍💻 CSS в React: сравниваем 5 подходов к стилизации Стилизация React-приложений может быть сложной задачей: существует множество подходов, и выбор подходящего способа влияет на удобство разработки, производительность приложения и легкость управления кодом. Разберем основные методы стилизации, их преимущества и недостатки. Читать...

Вы уже работаете с JavaScript? А вы сможете пройти тест для PRO? https://otus.pw/jCKz/ 📚Получите актуальные навыки на практике, используя привычные подходы. — Node.js, Angular, React.js и Vue.js уже ждут вас на онлайн-курсе «JavaScript Developer. Professional» от OTUS. 🔥Пройдите тестирование, чтобы: - Оценить свои навыки - Получить курс по специальной цене после успешного прохождения теста - Получить доступ к бесплатным урокам курса от OTUS 👉Ссылка на тест: https://otus.pw/jCKz/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2VtzquzspKr

🔎 Подборка зарубежных вакансий Senior Fullstack Developer 🟢Node.js, React, Vue.js, JavaScript, TypeScript, MongoDB, Clickhouse, Elasticsearch, Webpack 🟢от 4 500 до 6 500 $ до вычета налогов | более 6 лет Team Lead (Java Spring) - Senior Backend Developer 🟢Java, Spring Boot, PostgreSQL, Grafana, React, AWS, Docker, Auth0 🟢от 300 000 ₽ на руки | от 3 до 6 лет Product Manager 🟢Английский язык, Unit-экономика, Product Management, Product-market fit, управление инновациями, Roadmap, стратегический менеджмент, навыки презентации, проведение презентаций, продуктовые метрики, продуктовая стратегия, анализ требований 🟢от 4 000 € на руки | от 2 лет

Цены на все Серверы онлайн! Удобный конфигуратор! Серверы STSS Flagman✅ Огромный выбор решений 👍 Консультации лучших экспертов 👌 Непревзойденный сервис ❤️ Получить предложение #реклама stss.ru О рекламодателе

🕹 Игра в дедлайны Заметил, что работаешь быстрее, когда сроки поджимают? Это не магия — это фокусировка. 👉 Совет: попробуй метод «искусственного дедлайна». Установи себе собственные сроки на задачу, которые короче официальных. Например, если дедлайн через неделю, заверши всё за три дня. Так ты освободишь время на проверку, улучшения или форс-мажоры.

➡️ Выкинь свой RoadMap: что на самом деле нужно знать начинающему фронтендеру Сколько бы раз я ни смотрел RoadMap для начинающих фронтендеров, всегда натыкаюсь на одну проблему: RoadMap, как правило, — просто свалка технологий, которую можно описать одной фразой: "Учи всё, что есть". Но так ли это? Нужно ли учить всё это в самом начале? Давайте отбросим большую схему с технологиями в сторону и поговорим начистоту. Читать...

Обучение на Frontend-разработчика. С нуля за 9 месяцев. На курсе вы получите все навыки, необходимые для старта в профессии Frontend-разработчика. Персональный наставник middle/senior уровня. 14 проектов, лайвкодинг, хакатоны, репетиции техсобеседования. Освоите JavaScript, React, TypeScript Официальный диплом и сертификат школы. Поддержка наставника по JS в течение 3-х месяцев после диплома. Гарантия трудоустройства. Если вы не устроитесь, вернём деньги. Это закреплено в договоре п. 6.14 Узнать больше #реклама 16+ result.school О рекламодателе

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

Бесплатное IT-образование в 2024 Отобрали для вас полезные телеграм-каналы, которые помогут освоить IT-направления Выбирайте нужное и подписывайтесь: — Frontend: t.me/+qWPopdiaxVMzZDgy — Backend: t.me/+X-zQb-NgzGNhMzRi — GitHub: t.me/+3BVAmDixuO9lYTFi — Книги айти: t.me/+IG2NAVECUXs4MGYy — Python: t.me/+vBSA5zgB_gA0OWRi — Java: t.me/+3BRKfZ09ewg0NDJi — C#: t.me/+O3pnFY4bpF5hNTEy — С/С++: t.me/+PGxPXpZZczQxODcy — Базы Данных & SQL: t.me/+530qWWydM8ExZjk6 — Golang: t.me/+FvTd7F-O-NNmNGMy — PHP: t.me/+jBvbaet0vpplNDQy — Моб. разработка: t.me/+Ikx5H4MrPihlOWZi — Разработка игр: t.me/+Z34knEvL8P9lZTAy — DevOps: t.me/+3wSgqmP5NOBhZGUy — Data Science: t.me/+-CuoNNa6P7VjOTRi — ИБ: t.me/+4jo8N5jtGDs1NTli — Тестирование: t.me/+MvFXlXbmmPFkM2Ey — Маркетинг: t.me/+lgiFPJTYp8M0ZjRi — Дизайн: t.me/+gmflvDFPc_c1YmIy Получить предложение #реклама 16+ О рекламодателе