.ccode [JS, HTML, CSS]

🌀 Что такое IIFE (Immediately Invoked Function Expression)?

IIFE (Immediately Invoked Function Expression) — это функция, которая объявляется и сразу же вызывается. Это удобный способ создать локальную область видимости и избежать загрязнения глобальной области видимости, что особенно важно в JavaScript.

📝 Зачем использовать IIFE?

Создание локальной области видимости: Переменные и функции, объявленные внутри IIFE, не будут доступны снаружи, что помогает избежать конфликтов с другими переменными в глобальной области видимости.

Изоляция кода: Это позволяет вам скрыть детали реализации и предоставить только необходимые интерфейсы.

Память: IIFE может использоваться для хранения приватных переменных и функций, к которым нельзя получить доступ извне.

⚡️ Применение IIFE

Модульная структура: IIFE часто используются в модулях JavaScript для изоляции логики.

Библиотеки: Многие библиотеки используют IIFE для создания приватной области видимости.

Обработка асинхронных операций:
IIFE могут помочь в обработке асинхронных операций, создавая локальные переменные для хранения результатов.

@CCODE | JS

Небольшая шпаргалка по методам массива которые создают новый массив на основе исходного, при этом не изменяя его

@CCODE | CSS ⚡️

Псевдокласс :empty в CSS используется для выбора элементов, которые не содержат дочерних элементов или текстового содержимого.

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

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

@CCODE | CSS ⚡️

Что будет выведено в консоль? 👇

#Практика

Пишем логику для фильтрации и поиска товаров на странице

Забрать код 👇

@CCODE | JS ⚡️

🎯 Задача

Напишите функцию, которая принимает массив товаров и возвращает объект, где ключами являются категории товаров, а значениями - массивы товаров, относящихся к соответствующей категории.

Решение смотри 👆

@CCODE | JS ⚡️

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

Суть каррирования заключается в том, что когда функция принимает несколько аргументов, вы можете вызвать её, передав только часть аргументов. В ответ функция возвращает новую функцию, которая ожидает оставшиеся аргументы.

Пример:

function sum(a, b, c) {
    return a + b + c;
}

// Некаррированная функция, вызывается с тремя аргументами сразу:
console.log(sum(1, 2, 3)); // Выведет 6

// Каррированная версия той же функции:
function currySum(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

// Каррированная функция вызывается с одним аргументом три раза:
const curriedSum = currySum(1);
const addTwo = curriedSum(2);
const result = addTwo(3);

console.log(result); // Выведет 6

В примере выше, первая функция sum принимает все аргументы сразу.

В тоже время Каррированная функция currySum, принимает первый аргумент и возвращает новую функцию, которая ожидает второй аргумент, и так далее.

Мы так же можем реализовать Каррирование более элегантно с помощью рекурсии, позволяя каррировать функцию с любым количеством аргументов:

function curry(func) {
    return function curried(...args) {
        if (args.length >= func.length) {
            return func.apply(this, args);
        } else {
            return function(...args2) {
                return curried.apply(this, args.concat(args2));
            }
        }
    };
}

const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3)); // Выведет 6

Эта версия функции curry принимает исходную функцию sum и возвращает каррированную версию, которой можно передавать аргументы один за другим или группами, до тех пор пока не будет достаточно аргументов (в нашем случае их 3), чтобы вызвать исходную функцию. Когда все аргументы собраны, вызывается исходная функция sum с этими аргументами.

@CCODE | JS ⚡️

vscodethemes - на этом сайте вы сможете найти подходящую тему для своего vscode 🫶

@CCODE | VSCODE⚡️

Псевдокласс is() в CSS

Позволяет вам группировать несколько селектор в один, что упрощает написание CSS стилей

.cart__number:is(:hover, :focus) {
 outline: 1px solid var(--accent);
 color: var(--accent);
}

Поддержка браузерами на данный момент составляет 97.68%

@CCODE | CSS ⚡️

CSS свойство field-sizing

Позволяет манипулировать поведением полей формы при заполнении

При значение field-sizing: content; - отключит стандартное поведение и позволит подстраивать размер полей формы в зависимости от контента

field-sizing: fixed; сохранит текущее поведение, и поле ввода формы не будет изменяться в размерах

Поддержка браузерами на данный момент составляет 46.45%

@CCODE | CSS ⚡️

Псевдокласс :user-invalid

Позволяет сделать удобную стилизацию валидации нативными средствами CSS

@CCODE | CSS ⚡️

#Практика

Создаем простое приложение для поиска информации на wikipedia

JS:

const form = document.querySelector('.form');
const inputValue = document.querySelector('.input');
const result = document.querySelector('.result');

form.addEventListener('submit', (e) => {
 e.preventDefault();

 if (inputValue.value.trim() !== '') {
  searchWiki(inputValue.value);
 }
});

function searchWiki(value) {
 const url = `https://ru.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=50&srsearch=${encodeURIComponent(
  value,
 )}`;

 fetch(url)
  .then((response) => response.json())
  .then((data) => {
   displayResult(data.query.search);
  });
}

function displayResult(results) {
 result.innerHTML = `Кол-во найденных статей: ${results.length}`;
 const container = document.querySelector('.query-container');
 container.innerHTML = '';

 results.forEach((result) => {
  const element = document.createElement('div');
  element.classList.add('result-item');

  element.innerHTML = `
    
      <div class="title-query">${result.title}</div>
      <div class="desc-query">${result.snippet}</div>
      <a class="item-link" href="https://ru.wikipedia.org/?curid=${result.pageid}" target="_blank">Читать больше</a>
    `;

  container.appendChild(element);
 });

 inputValue.value = '';
}

@CCODE | JS ⚡️