👩‍💻 Что такое метод map() в JavaScript и как он используется?

map() — это метод массивов в JavaScript, который создаёт новый массив, применяя функцию к каждому элементу исходного. Он не изменяет оригинальный массив.

➡️ Пример:

const numbers = [1, 2, 3, 4];

// Умножаем каждый элемент на 2
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

🗣️ В этом примере:

• map() применяет функцию ко всем элементам массива
• Возвращается новый массив с результатами
• Часто используется для форматирования данных перед выводом.

➡️ map() — основа функционального подхода в работе с массивами

CodeBase | Frontend | #JS

🦥Ленивый программист ©

🖥 Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

В статье собрал злые HTML и CSS-приёмы — всё, чтобы сделать интерфейс максимально неудобным. Не то чтобы я рекомендую, но знать такое полезно… на всякий случай.

🔗 Ссылка

CodeBase | Frontend | #article

🤩Нашли для вас топовые каналы, которые реально научат вас программировать!

Free Znanija — огромная база курсов по ИТ, которые можно скачать совершенно бесплатно;

IT библиотека — самая огромная библиотека книг по IT во всём телеграмме

Hacking & InfoSec Base — канал действующего белого хакера. Подробные уроки по безопасности, эксплуатации уязвимостей, социальной инженерии.

🫵Подпишись, чтобы не потерять самые полезные материалы!

🖥 Неизвестно полезный CSS. Часть 8

Собрал CSS-хаки, про которые мало кто знает, но они реально выручают. Всё современно, без учёта IE11. Будет и про гриды, и про transform, и даже пара древностей

🔗 Ссылка

CodeBase | Frontend | #article

🐧 Linux Club ©

🦥Ленивый программист ©

🦥Ленивый программист ©

🦥Ленивый программист ©

👩‍💻 Псевдокласс :focus

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили.

⚠️ Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

➡️ После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
  outline: 2px solid hotpink;
}

➡️ Фишки:

⏺ Смену стилей между состояниями можно анимировать при помощи transition

⏺ В браузер встроены дефолтные стили для фокуса.

⏺ Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

⏺ Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

CodeBase | Frontend | #css

🦥Ленивый программист ©

👩‍💻 Как работает свойство box-sizing в CSS?

Свойство box-sizing в CSS определяет, как вычисляются размеры элемента, включая его отступы и границы. Оно позволяет контролировать, включаются ли padding и border в общую ширину и высоту элемента.

➡️ Пример:

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
  }
  .content-box {
    box-sizing: content-box; /* значение по умолчанию */
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

<div class="box content-box">
  Content-box: ширина 200px + padding 20px + border 5px
</div>

<div class="box border-box">
  Border-box: общая ширина 200px, включая padding и border
</div>

🗣️ В первом случае (content-box) ширина элемента составляет 200px, но с учетом padding и border общая ширина увеличивается до 250px. Во втором случае (border-box) общая ширина элемента остается 200px, так как padding и border включены в эту ширину.

Использование box-sizing: border-box; упрощает расчет размеров элементов и предотвращает неожиданные изменения макета при добавлении отступов и границ.

CodeBase | Frontend | #css