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

5 причин, почему вам нужен Битрикс24 Мессенджер + AI 1) Ничего личного. Никаких Алена-ноготочки и любимая жена 2) Только рабочее. Общение с коллегами в чатах, каналах и тредах. 3) Слова становятся делами. Задачи и встречи ставятся прямо из переписки в чате. 4) Синки. Мгновенные видеоколлы до 100 человек из чата в один клик. 5) Нейросеть. Можно прямо в групповом чате штурмить идеи с AI-помощником. А, последняя причина – пользоваться можно бесплатно. Забирайте бесплатный мессенджер для работы компании — Битрикс24 Попробовать #реклама 16+ bitrix24.ru О рекламодателе

🤔 Народный браузер — каким он мог бы быть? Статья раскрывает идеи и обсуждения, связанные с развитием сборки Хромиума Ultimatum. Автор стремится понять реальные запросы пользователей и обсудить востребованные функции. Читать...

Помощь в трудоустройстве в IT-сфере! В России из-за дефицита айтишников запустили бесплатную программу по обучению IT-специалистов. Теперь любой желающий может попробовать себя в IT с полного нуля и начать обучение бесплатно! Узнайте про дальнейшее трудоустройство в ведущие IT-компании для восполнения кадрового дефицита. Для этого нужно: - Перейти по ссылке - Заполнить анкету и ответить на вопросы (занимает менее 3 минут) - На основании ваших ответов вы сразу узнаете, подходит ли вам сфера IT и сможете ли вы в ней работать Перейти на сайт #реклама 16+ urban-university.ru О рекламодателе

👩‍💻 Валидация формы с обратной связью Создайте форму с одним полем ввода для имени и кнопкой "Отправить". При отправке формы выполните следующие условия: 1. Если поле пустое, отобразите сообщение об ошибке под полем. 2. Если поле заполнено, отобразите сообщение "Форма успешно отправлена!". 3. Сообщение об ошибке исчезает при вводе текста. Решение задачи🔽

<form id="myForm"> <input type="text" id="nameInput" placeholder="Введите имя" /> <button type="submit">Отправить</button> <p id="error" style="color: red; display: none;">Поле не должно быть пустым</p> </form> <p id="success" style="color: green; display: none;">Форма успешно отправлена!</p> const form = document.getElementById('myForm'); const nameInput = document.getElementById('nameInput'); const error = document.getElementById('error'); const success = document.getElementById('success'); form.addEventListener('submit', (e) => { e.preventDefault(); if (nameInput.value.trim() === '') { error.style.display = 'block'; success.style.display = 'none'; } else { error.style.display = 'none'; success.style.display = 'block'; nameInput.value = ''; } }); nameInput.addEventListener('input', () => { if (nameInput.value.trim() !== '') { error.style.display = 'none'; } });

🗓 Как написать Google Calendar на коленке? Обзор FullCallendar Статья рассказывает о создании раздела с календарем и задачами с использованием библиотеки FullCalendar. Разбираются её возможности, преимущества и опыт интеграции для внутренних проектов. Читать...

Как масштабировать изменения в UI без лишних затрат? Узнайте 18 декабря на бесплатном вебинаре СберТеха. Эксперты поделятся опытом собственных проектов и расскажут, как создали решение, которое в разы ускоряет разработку и масштабирование изменений UI. Platform V One UI — библиотека UI-компонентов с трехуровневой дизайн-токен системой, а также low-code инструментами стилизации и генерации UI-форм и сценариев. Также на вебинаре узнаете, какие инструменты Platform V One UI доступны в open source, и увидите демо продукта. Регистрируйтесь и приходите! Зарегистрироваться #реклама 16+ platformv.sbertech.ru О рекламодателе

📝 Подборка вакансий для мидлов Frontend-разработчик React / Vue.js / Nuxt.js (Middle-Senior) 🟢React, React Native, Vue.js, Nuxt.js, RESTful API, HTML, CSS, Git 🟢от 200 000 ₽ | от 2 лет Системный аналитик на frontend и mobile в Т-Инвестиции 🟢SOAP, базы данных, REST, RabbitMQ, SQL, BPMN, системный анализ, Apache Kafka, UML, разработка решений по интеграции 🟢Уровень дохода не указан | от 3 лет Frontend-разработчик 🟢TypeScript, Vue.js, Webpack, GraphQL 🟢до 200 000 ₽ | от 3 лет

Объявляем новый розыгрыш для подписчиков! В этот раз будет больше победителей и больше полезных подарков: 1–2 места — умная колонка Новая Яндекс Станция Лайт 2 с Алисой на YaGPT 3–4 места — подарочный набор «Для любителей мяса» 5–6 места — подарочный набор «Цветы и море» 7–8 места — подарочный набор «Кофеману» 9–20 места — сертификаты на Озон на 1000 р. Для участия нужно сделать всего 2 шага: ✅ подписаться на наш канал: t.me/+rhMqne8Ty7FjNDBi ✅ нажать на кнопку «Участвую». Итоги подведем 27 декабря с помощью бота. Удачи! t.me/+rhMqne8Ty7FjNDBi Подписаться #реклама О рекламодателе

⚙️ Что такое 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-приложений может быть сложной задачей: существует множество подходов, и выбор подходящего способа влияет на удобство разработки, производительность приложения и легкость управления кодом. Разберем основные методы стилизации, их преимущества и недостатки. Читать...