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

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации. Читать...

👩‍💻 В чем разница между em и rem в CSS? В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования. ➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

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

👩‍💻 Dropdown Menu Effects Анимированное выпадающее меню с переливающимся эффектом. Сделано на SCSS и TypeScript. Открыть код...

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

<div class="card"> <img src="https://via.placeholder.com/300x200" alt="Card Image" class="card-img"> <h3 class="card-title">Заголовок карточки</h3> <p class="card-description">Это краткое описание для карточки. Оно даёт представление о содержимом.</p> </div> .card { width: 300px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .card:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .card-img { width: 100%; height: auto; } .card-title { margin: 16px; font-size: 1.2em; } .card-description { margin: 0 16px 16px; font-size: 0.9em; color: #555; }

👩‍💻 Проблема с new URL(), и как URL.parse() её решает Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна. Читать...

🔝 Самые интересные статьи за последние дни: • Отладка и мониторинг в MobX: trace, introspection и spy • Пара шаблонов кастомизированных элементов Handlebars для Apache Superset — 2 • PHP и Laravel дайджест новостей за октябрь 2024 года • Битва титанов: натив, кроссплатформа и PWA – ищем плюсы и минусы на каждом этапе разработки • Внедрение методики решения проблем 8D на производственном предприятии в виде SRM/ERP-систем/Часть 1

👩‍💻 Стилизация кнопки с эффектом наведения Создайте кнопку, которая меняет цвет фона и добавляет лёгкую тень при наведении. При обычном состоянии кнопка должна иметь закруглённые углы и немного увеличиваться при наведении для визуального акцента. Ожидаемое поведение: • Основной цвет фона кнопки — синий (#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); }

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

👩‍💻 Remove anchor from URL Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#). Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"

Решение задачи🔽

function removeUrlAnchor(url) { return url.split('#')[0]; } // Примеры использования console.log(removeUrlAnchor("www.codewars.com#about")); // "www.codewars.com" console.log(removeUrlAnchor("www.codewars.com?page=1")); // "www.codewars.com?page=1"

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

🎯 Ставь цели на день через "3 приоритета" Начал день с длинного списка задач, а к вечеру понял, что толком ничего не сделал? Это классический перегруз. 👉 Совет: каждое утро выделяй три главных задачи на день — именно те, что реально сдвинут твои дела вперёд. Всё остальное — бонусы. Такая простая фокусировка помогает делать важное, а не тонуть в рутине.

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

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

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

🗣️ В этом примере AbortController отменяет запрос через 500 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

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

⚙️ 9 open source библиотек для вашего следующего проекта Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же. В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект. Читать...

📈 Подборка статей для вашей карьеры • Как сделать резюме, которое дойдёт до работодателя. Фильтры ATS в 2025 году • Ошибайся смело: жизненные уроки из мира machine learning • Как учиться во взрослом возрасте: 7 советов, проверенных на практике • Нейросети, чат-бот и диджитал-адаптация: цифровые инструменты внутрикома • Долгосрочная стабильность vs. карьерная мобильность

⚙️ Кнопки с несколькими состояниями Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей. Читать...

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

<div> <input type="number" id="num1" placeholder="Введите первое число"> <select id="operation"> <option value="add">+</option> <option value="subtract">-</option> <option value="multiply">×</option> <option value="divide">÷</option> </select> <input type="number" id="num2" placeholder="Введите второе число"> </div> <div> <h3>Результат: <span id="result">0</span></h3> </div> const num1 = document.getElementById('num1'); const num2 = document.getElementById('num2'); const operation = document.getElementById('operation'); const result = document.getElementById('result'); function calculate() { const value1 = parseFloat(num1.value) || 0; const value2 = parseFloat(num2.value) || 0; let res = 0; switch (operation.value) { case 'add': res = value1 + value2; break; case 'subtract': res = value1 - value2; break; case 'multiply': res = value1 * value2; break; case 'divide': res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)'; break; } result.textContent = res; } [num1, num2, operation].forEach(element => { element.addEventListener('input', calculate); });

Что теперь умеет нейросеть Алиса? Узнайте раньше всех Яндекс анонсировал прямую трансляцию конференции «Алиса, что нового?», где будет представлено новое поколение генеративных моделей. Эти разработки позволят нейросети Алисы расширить свои возможности и осуществлять действия в реальном мире. Конференция «Алиса, что нового?» начнётся 28 октября в 12:00. Прошлая конференция состоялась весной и была посвящена нейросети Алисе и анонсам умных устройств. В этот раз представители Яндекса расскажут о масштабном обновлении нейросетевых технологий. Подпишитесь, чтобы не пропустить начало Записаться онлайн #реклама 16+ О рекламодателе

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

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

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

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

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

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