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

👩‍💻 Что такое метод 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

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