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

Привет, это Андрей из Сервер Молл :) Дедушка Мороз нам по секрету рассказал, что в 2024 году кое-кто был отличным сисадмином и заслужил новое серверное оборудование под ёлку :) Скидки, первоклассный сервис и быстрая доставка — всё, чтобы ваши проекты начали новый год с максимальной эффективностью. Что вас ждёт: ✅ Эксклюзивные новогодние скидки. 5 лет гарантии с выездом инженера. Бесплатная доставка по всей России. Помощь в подборе оборудования от личного менеджера. Декабрь — идеальное время реализовать бюджет с выгодой. Ах да, Дед Мороз просил передать, что все заказы отправляются экспресс-санями, чтобы успеть привезти серверы до праздничных каникул. P.S. Наши специалисты ответят на любые вопросы. Звоните 8 800 755-25-51 или пишите в чат на сайте. С наступающим Новым Годом и Рождеством! 😊 Перейти на сайт #реклама servermall.ru О рекламодателе

🔎 Подборка вакансий для джунов Frontend-разработчик junior + 🟢JavaScript, Vue 2, Vuex, Vite, HTML, CSS, SCSS, Git 🟢от 50 000 до 70 000 ₽ | 1–3 года опыта Frontend-разработчик (Vue.js) 🟢JavaScript, Vue.js, Nuxt.js, Vuex, Pinia, CSS, HTML5, SASS, RESTful API, Git 🟢от 100 000 до 130 000 ₽ | 1–3 года опыта Junior React Developer 🟢JavaScript, React, HTML, CSS3, GitHub, Redux, Less, Sass 🟢от 60 000 ₽ | Без опыта

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

<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); });

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

Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🔝 Самые интересные статьи за последние дни: • 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]

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

🔎 Подборка зарубежных вакансий Фронтенд-разработчик 🟢JavaScript, HTML5, CSS3, SQL, React, Angular, Ember, Git, JIRA 🟢от 190 000 ₽ на руки | 3–6 лет Frontend-разработчик 🟢JavaScript, HTML, CSS 🟢от 250 000 ₸ на руки | 1–3 года Frontend-разработчик сайтов на WordPress / Верстальщик сайтов / PHP программист 🟢HTML, CSS, JavaScript, PHP, WordPress, WooCommerce 🟢от 100 000 до 400 000 ₸ на руки | 1–3 года

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

🧠 Machine Learning — авторский канал, где собрана вся база по ИИ и машинному обучению. Senior разработчик AI-алгоритмов и автономных агентов, разбирает гайды, редкую литературу и код топовых моделей машинного обучения и искусственного интеллекта. В 2025 году ИИ выйдет на совершенно новый уровень тот, кто не успеет за прогрессом - отстанет, а кто разберется - сорвет куш. Стоит подписаться: t.me/ai_machinelearning_big_data

🎨 8 лучших коллекций ресурсов для фронтендеров Лучшие наборы инструментов, которые содержат все необходимое для современной фронтенд-разработки. Читать...

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

🔎 Подборка вакансий для лидов Lead React Native Developer 🟢React Native, JavaScript, TypeScript, RESTful API, Git, Docker 🟢от 250 000 ₽ на руки | 3–6 лет Lead Frontend Developer (React) 🟢React, TypeScript, Redux, Webpack, SSR, HTML, JavaScript, Git 🟢Уровень дохода не указан | 3–6 лет Ведущий Motion 3D / Front End Разработчик 🟢Three.js, WebGL, GLSL, React, TypeScript, Node.js, TailwindCSS, Vite, Git, Figma 🟢от 400 000 до 1 000 000 ₸ на руки | 3–6 лет

Помощь в трудоустройстве в IT-сфере! По всей России объявили бесплатную программу на шестимесячное обучение по IT-cпециальностям. Запись на участие в программе продлится до конца июля, но чтобы туда попасть, нужно пройти специальный профтест. По результату тестирования сразу узнаете, какая профессия вам подойдет, и проходите ли вы на бесплатное обучение. Перейти на сайт #реклама 16+ urban-university.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-компонентов.

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

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

Курс по frontend-разработке с junior до middle Стань специалистом по frontend-разработке с помощью менторов. Оставь заявку! Узнать больше #реклама 16+ ykul.ru О рекламодателе

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

🔎 Подборка вакансий для сеньоров Senior Frontend разработчик 🟢JavaScript, TypeScript, Angular, React, jQuery, RxJS, HTML5, CSS, SCSS, Docker, Git 🟢от 150 000 ₽ до вычета налогов | 3–6 лет Senior Frontend Developer 🟢TypeScript, React, Redux, MobX, Sass, Less, Ant Design, Material UI, Webpack, Git, Jira 🟢до 360 000 ₽ на руки | 3–6 лет Frontend-разработчик 🟢HTML, CSS, JavaScript, jQuery, TypeScript, React, Vue, Webpack, Git 🟢от 220 000 ₽ на руки | 3–6 лет Senior Frontend-разработчик JavaScript/React 🟢JavaScript, TypeScript, React, Redux, Redux RTK, ViteJS, Docker, GitLab CI/CD, WebRTC 🟢от 300 000 до 400 000 ₽ на руки | 3–6 лет