👩‍💻 Использование метода reduce() для подсчета частоты элементов в массиве.

🔊Таким образом мы можем подсчитывать количество вхождений каждого элемента в массиве и возвращать объект с уникальными элементами в качестве ключей и их частотой в качестве значений.

Метод reduce используется для обработки массивов, сводя их к единственному значению. Он принимает функцию обратного вызова и необязательное начальное значение.

🔊В этом примере мы используем его, чтобы пройти по массиву и создать объект, где ключами являются элементы массива, а значениями — количество их вхождений. Это позволяет быстро получить информацию о частоте элементов.

➡️ @code_ready | #трюк #js

Web Skills — платформа, ориентированная на развитие навыков веб-разработки для всех уровней — от новичков до опытных специалистов. Здесь собраны все навыки для веб-разработчика с ссылками для изучения темы.

⛓ Ссылочка: https://andreasbm.github.io/web-skills/

➡️ @code_ready | #ресурсы

👩‍💻 Атрибут contenteditable

Атрибут contenteditable позволяет сделать элемент на веб-странице редактируемым пользователем, позволяя вводить и изменять текст.

Он имеет два значения:

• contenteditable="true" (по умолчанию) — включает редактирование текста.

• contenteditable="false" — отключает редактирование текста.

➡️ @code_ready | #атрибут #html

👩‍💻 Прилипший заголовок

Свойство position управляет тем, как элемент размещается на странице.

Параметры свойства:

• static (по умолчанию) — Элементы располагаются на странице в обычном потоке документа.

• relative — Элементы могут быть смещены относительно их исходного положения с помощью свойств top, right, bottom и left.

• absolute — Относительно ближайшего предка, который имеет значение position отличное от static.

• fixed — Относительно окна браузера и остаются на месте при прокрутке страницы.

• sticky — комбинируют поведение relative и fixed. В начале они ведут себя как статические элементы, но как только они достигают заданной позиции при прокрутке они становятся фиксированными.

➡️ @code_ready | #свойство #css

flexboxfroggy — игра, которая поможет вам выучить CSS-flexbox. Тут нужно писать нужные свойства во встроенном редакторе для решения головоломок.

⛓ Ссылочка: https://flexboxfroggy.com/

➡️ @code_ready | #ресурсы

📱 Вопрос с собеседования

Что такое WeakMap в JavaScript?

Ответ:

WeakMap — это коллекция пар "ключ-значение", где ключи являются объектами, а значения могут быть любого типа. Ключи в WeakMap являются слабыми ссылками, что позволяет им быть собранными сборщиком мусора, если на них больше нет сильных ссылок.

Методы WeakMap:

• set(key, value) — Добавляет пару ключ-значение в WeakMap.

• get(key) — Возвращает значение, связанное с указанным ключом. Если ключ не найден, возвращает undefined.

• has(key) — Проверяет наличие ключа в WeakMap.

• delete(key) — Удаляет элемент по указанному ключу.

➡️ @code_ready | #собеседование #js

📱 Красивые иконки файлов

Vscode icons — плагин, который добавляет красивую и наглядную систему иконок для файлов и папок, улучшая визуальную навигацию по проектам и облегчая идентификацию типов файлов.

➡️ @code_ready | #плагин

learngitbranching — небольшая браузерная игра, которая поможет вам изучить Git. В ней вы познакомитесь с основными командами, которые пригодятся вам в повседневной работе.

⛓ Ссылочка: https://learngitbranching.js.org/?locale=ru_RU

➡️ @code_ready | #ресурсы

👩‍💻 Свойство mix-blend-mode

Это свойство отвечает за режим наложения между элементом и его родительским элементом, а также между элементом и фоном.

У него есть следующие параметры:

• multiply — умножает цвет элемента на цвет фона, создавая темный эффект.
• screen — уменьшает темноту цвета, создавая свечение.
• darken — выбирает самый тёмный цвет из двух (цвет элемента и цвет под ним).
• lighten — выбирает самый светлый цвет из двух.
• hue — устанавливает цвет элемента на цвет фона, сохраняя его яркость и насыщенность.
• luminosity — устанавливает яркость цвета элемента на уровень яркости фона.
• exclusion — создает эффект смешивания, который уменьшает контраст, производя более мягкий вид.

➡️ @code_ready | #свойство #css

👩‍💻 Тег details

Он используется для создания интерактивного раскрывающегося элемента, который позволяет пользователям скрывать или отображать дополнительную информацию.

Для корректной работы интерактивного элемента его заголовок помещается в тег summary. Он обеспечивает визуальную подсказку о наличии скрытого контента и служит удобным способом организации информации на веб-страницах.

➡️ @code_ready | #html

Flexer — это CSS-песочница, в которой можно легко сгенерировать и расположить блоки. Нужно просто задать размеры и отступы элементам, а сайт сгенерирует CSS-код с flexbox.

⛓ Ссылочка: https://www.flexer.dev/

📣 Code Ready | #ресурсы

👩‍💻 Шпаргалка Flexbox позиционирования

Flexbox -  позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

📣 Code Ready | #css

📱 Меняем px в rem

px to rem — плагин, который позволяет с лёгкостью изменить единицы измерения px в rem. Нужно просто выделить нужный участок кода и нажать Alt + Z.

📣 Code Ready | #плагин

📱 Как работает Array.prototype.reduce()

Array.prototype.reduce() — это метод массивов в JavaScript, который выполняет функцию редукции на каждом элементе массива, преобразуя его в одно значение. Он принимает два аргумента: функцию обратного вызова и необязательное начальное значение аккумулятора.

Редукция в JavaScript — это процесс преобразования массива в одно значение с использованием метода `reduce()`, который применяет заданную функцию к каждому элементу массива, аккумулируя результаты в одно итоговое значение, например, сумму, произведение или объект.

📣 Code Ready | #метод