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

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

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

💾 6 главных технологий для хранения данных в браузере Ведущий инженер RxDB провел комплексный анализ и сравнение шести основных технологий хранения данных в браузере – от классических Cookies до современных WASM SQLite, оценивая их функциональность, производительность и потенциал для оптимизации. Читать...

👀 От живых гайдлайнов к Documentation as Code. Как изменилась документация во фронтенд-разработке Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным. Читать...

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

👩‍💻 Вышел React v19 В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать. Читать...

🔥 Самые нужные каналы для Frontend разработчика, чтобы расти в доходе 💸 • Frontend | Вопросы собесов • Frontend | Вакансии с удаленкой • Frontend | LeetCode • Frontend | Тесты Подпишись, чтобы не потерять ☝️

📝 Подборка вакансий для лидов Chapter Lead Angular Frontend разработки • Angular, TypeScript, RxJS, NgRx, REST API, WebSockets, CI/CD, Git, Docker • Уровень дохода не указан | от 5 лет опыта Team Lead Frontend (Управление перспективных проектов) • React, TypeScript, JavaScript, HTML, CSS (SCSS), REST API, JSON, JWT, Nivo, Highcharts, Chart.js, axios, Fluent UI, final-form, i18next, Jotai, Mitt, React Query, Tanstack Table, Vite • Уровень дохода не указан | от 4 лет опыта Teamlead Frontend (Vue) • CSS, JavaScript, HTML, Vue.js • Уровень дохода не указан | более 5 лет опыта

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

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

function throttle(func, delay) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log('Прокрутка страницы');
}, 1000);

window.addEventListener('scroll', handleScroll);

🗣️ В этом примере функция handleScroll вызывается не чаще одного раза в секунду, даже если пользователь прокручивает страницу интенсивно. Throttle помогает оптимизировать производительность и уменьшить количество вызовов функции.

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

👩‍💻 CSS единицы измерения: lh и rlh Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма. Смотреть…

Не берут на работу без коммерческого опыта? Работодатели ищут новичков на оплачиваемые стажировки в канале "Вакансии для джунов и стажировки в IT". 💻Подпишись на канал, чтобы не потерять. Подписаться #реклама О рекламодателе

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

📝 Подборка вакансий для сеньоров Frontend-разработчик (React) • JavaScript, React, Node.js • Уровень дохода не указан | от 3 лет QA-инженер (frontend) • JavaScript, TypeScript, SQL • Уровень дохода не указан | от 2 лет Senior Fullstack Developer (Nest / React) • Node.js, RabbitMQ, TypeScript, MySQL, React, Redux, TypeORM, NestJS • от 3 000 до 4 000 $ | от 6 лет

👩‍💻 Very cool animated text Интересная анимация спирального текста. Сделана на CSS и JavaScript. Открыть код...

Нативные модули в React Native — когда без них никак? С 17 по 20 февраля в канале Код Меркури за главного останется React Native-разработчик компании Mercury Development, Булат Кидасов. Зачем? Чтобы за четыре дня вы вместе с ним смогли разобрать нативные модули так, чтобы стало понятно, где они действительно нужны и как с ними работать. Поговорим о: ⚡ том из чего состоят нативные модули и как они влияют на производительность. ⚡ разнице между старой и новой архитектурой React Native. ⚡ реальных кейсах из продакшн-проектов: как внедряли нативные модули и что это дало. А еще — немного про карьеру: как Булат пришел в IT и почему разбираться в нативных модулях полезно даже тем, кто с ними не работал. Обещаем: пользы будет много, воды — мало. Подписывайтесь ❤️ Подписаться #реклама О рекламодателе

👩‍💻 Реализация интерактивной карты Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию. Читать...

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

👩‍💻 Стилизация кнопки с эффектом наведения Создайте кнопку, которая меняет цвет фона и добавляет лёгкую тень при наведении. При обычном состоянии кнопка должна иметь закруглённые углы и немного увеличиваться при наведении для визуального акцента. Ожидаемое поведение: • Основной цвет фона кнопки — синий (#007BFF). • При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается. Решение задачи🔽

<button class="styled-button">Нажми меня</button> .styled-button { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; } .styled-button:hover { background-color: #0056b3; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: scale(1.05); }

🤔 Разбираемся с цветами: пространства, иллюзии и квантование Статья исследует природу цвета, его восприятие и обработку. Рассмотрим дискретизацию, цветовые модели, пространство и причины несоответствия при передаче изображений. Узнайте, что скрывается за HEX-кодами. Читать...

📝 Подборка вакансий для мидлов Frontend Developer • JavaScript, Vue.js, Nuxt.js, TypeScript • от 180 000 ₽ | от 3 лет опыта Frontend developer Vue • JavaScript, Vue.js, Nuxt.js, HTML, SCSS, Sass, JSON, HTTP, Next.js • от 150 000 ₽ | от 2 лет опыта Frontend-разработчик (Vue.js) • Vue.js, JavaScript, HTML, TypeScript, Vite • от 180 000 до 250 000 ₽ | Опыт не указан