​​24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.

На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ

#css

Создаем меню профиля с использованием HTML, CSS и JavaScript 🚀

https://github.com/atherosai/ui/tree/main/dropdown-menu-09

Встроенный ИИ (AI) в Chrome (dev channel)

JavaScript. Метод includes()

Метод includes() в JavaScript используется для проверки наличия определенного элемента в массиве или строке. Он возвращает булевое значение, указывающее, найден ли элемент.

Для использования метода includes(), вызовите его на массиве или строке, над которыми хотите выполнить поиск. Передайте в качестве аргумента элемент, который вы ищете. Метод вернет true, если элемент найден, и false, если элемент отсутствует.

В приведенном примере у нас есть массив ['яблоко', 'груша', 'апельсин', 'банан']. Мы вызываем метод includes('груша'), чтобы проверить, содержит ли массив элемент 'груша'. Метод возвращает true, так как 'груша' присутствует в массиве. Затем мы вызываем метод includes('слива'), чтобы проверить, содержит ли массив элемент 'слива'. Метод возвращает false, так как 'слива' отсутствует в массиве. Результаты выводятся в консоль.

🌸 Typed Japanese

Для гиков: энтузиасты придумали учить языки через TypeScript.

Проект Typed Grammar учит грамматике (например, английского или японского) с помощью типов и структур программирования. И никаких зелёных сов!

🔗 GitHub

🖌️ LUME — создание 2D/3D-интерфейсов на HTML. Этот набор веб-компонентов превращает обычные HTML-элементы в полноценные носители графики — от CSS3D-преобразований до WebGL-рендеринга.

Под капотом используется AssemblyScript для компиляции в WebAssembly, что обещает стабильную производительность. А в примерах есть даже заготовка для FPS-игры на движке.

🤖 GitHub

@javascriptv

🎯 HTML attributes vs DOM properties

Разница между атрибутами и свойствами в HTML/DOM может быть запутанной, особенно когда названия совпадают. Кратко:

* Атрибут — часть HTML.
* Свойство — часть DOM-объекта.

Пример:

<input value="Hello">

const input = document.querySelector('input');
console.log(input.getAttribute('value')); // "Hello"
console.log(input.value);                 // "Hello"
input.value = 'World';
console.log(input.getAttribute('value')); // "Hello"

Значение атрибута остаётся неизменным, даже если свойство обновляется в JS. DOM-свойства могут не синхронизироваться с атрибутами после инициализации.

🔹Свойства могут отличаться от атрибутов

<input disabled>

input.hasAttribute('disabled'); // true
input.disabled;                 // true
input.removeAttribute('disabled');
input.disabled;                 // false

Свойство disabled — булево. Атрибут disabled работает как флаг: его наличие имеет значение, не важно, какое значение вы ему присвоили.

<input disabled="false">

Это всё равно disabled. Так работает HTML.

🔹Когда использовать атрибуты, а когда свойства?

* Используйте атрибуты, когда:

* Вам нужно установить начальное значение в HTML.
* Вы работаете с HTML-строкой.
* Вы хотите сохранить значение при сериализации (например, outerHTML).

* Используйте свойства, когда:

* Вы работаете с DOM в JS.
* Нужно прочитать или изменить текущее состояние элемента.

🔹Иногда стоит быть осторожнее

input.setAttribute('value', 'New');
console.log(input.value); // "New"

Иногда установка атрибута также влияет на свойство, но не всегда — зависит от элемента и конкретного атрибута/свойства.

https://jakearchibald.com/2024/attributes-vs-properties/