tgindex

.ccode [JS, HTML, CSS]

описание

Канал о фронтенд-разработке Связь: @yekimuro

← к каналу@cc0de
1 135
подписчиков
Охват к подписчикам
266,4%
ERR
Реакции к просмотрам
0,51%
310 на 20 постов
Пересылки к просмотрам
0,51%
308
Постов в день
0,0
всего 20

Где отзываются чаще

доля реакций к просмотрам
  • 23 апр. 2024 г.Псевдокласс is() в CSS Позволяет вам группировать несколько селектор в один, что упрощает написание CSS стилей .cart__number:is(:hover, :focus) { outline: 1px solid var(--accent); color: var(--accent); } Поддержка браузерами на данный момент составляет 97.68% @CCODE | CSS ⚡️1,20%
  • 10 апр. 2024 г.#Практика Создаем простое приложение для поиска информации на 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 ⚡️0,75%
  • 16 апр. 2024 г.CSS свойство field-sizing Позволяет манипулировать поведением полей формы при заполнении При значение field-sizing: content; - отключит стандартное поведение и позволит подстраивать размер полей формы в зависимости от контента field-sizing: fixed; сохранит текущее поведение, и поле ввода формы не будет изменяться в размерах Поддержка браузерами на данный момент составляет 46.45% @CCODE | CSS ⚡️0,74%
  • 13 апр. 2024 г.Псевдокласс :user-invalid Позволяет сделать удобную стилизацию валидации нативными средствами CSS @CCODE | CSS ⚡️0,69%
  • 17 мая 2024 г.#Практика Пишем логику для фильтрации и поиска товаров на странице Забрать код 👇 @CCODE | JS ⚡️0,67%
  • 9 апр. 2024 г.#Задача Напишите функцию, которая принимает две строки и возвращает true, если строки являются анаграммами (содержат одни и те же символы в разном порядке), и false в противном случае. При проверке анаграммы регистр символов не учитывается, а также игнорируются пробелы. Ответ 👆 Объяснение👇 1. Приводим строки к нижнему регистру с помощью метода toLoweCase() 2. Удаляем проблемы из строк с помощью replace(/\s/g, '') 3. После этого мы преобразуем строки в массив символов с помощью split(''). 4. Делаем сортировку массива с символами и объединяем обратно с помощью метода join(''); Затем мы сравниваем отсортированные строки и возвращаем true, если они равны, и false в противном случае. @CCODE | JS ⚡️0,63%
  • 9 июн. 2024 г.#Задача Дан массив строк, где каждая строка содержит слово. Написать функцию, которая сгруппирует анаграммы вместе. Анаграммами считаются слова, составленные из одного и того же количества одинаковых букв, но, возможно, в разном порядке. Функция должна вернуть массив групп анаграмм, где каждая группа представляет собой массив слов. Порядок групп и слов внутри группы не важен. Пример: Входные данные: ["ток", "окт", "свет", "тест", "твес", "кот"] Выходные данные: [["ток", "окт", "кот"], ["свет", "твес"], ["тест"]] Решение 👆 Объяснение 👇 1. Создаем пустой объект groups, где каждый ключ - это отсортированная строка символов слова, а значение - массив слов-анаграмм этого ключа. 2. Перебираем все слова во входном массиве. Для каждого слова: - Разделяем слово на буквы с помощью split(''), - Сортируем полученный массив букв, - Объединяем отсортированный массив букв обратно в строку с помощью join(''). Эта строка служит ключом. 3. Проверяем, существует ли уже такой ключ в объекте groups. Если нет, создаем пустой массив по этому ключу. 4. Добавляем текущее слово в массив по ключу анаграммы. 5. В конце функции возвращаем массив, сгруппированный с помощью Object.values(groups), который содержит все значения объекта groups, то есть наши группы анаграмм. @CCODE | JS ⚡️0,62%
  • 26 июн. 2024 г.Делаем плавную прокрутку к элементам с помощью метода scrollIntoView JS: const links = document.querySelectorAll('.link'); links.forEach((item) => { item.addEventListener('click', (e) => { e.preventDefault(); let id = item.getAttribute('href'); let formattierID = id.substring(1); let section = document.getElementById(formattierID); section.scrollIntoView({ behavior: 'smooth', }); }); }); @CCODE | JS ⚡️0,60%
  • 27 апр. 2024 г.vscodethemes - на этом сайте вы сможете найти подходящую тему для своего vscode 🫶 @CCODE | VSCODE⚡️0,56%
  • 15 июн. 2024 г.👇0,55%
  • 20 июн. 2024 г.Метод flatMap() - может значительно упростить работу с массивами массивов или операции, требующие сначала преобразовать каждый элемент массива, а затем сгладить результат Данный метод сначала применяет функцию к каждому элементу исходного массива, а затем применяет метод flat() к результату. Пример использования: Допустим, у вас есть массив чисел, и вы хотите заменить каждое число массивом его квадрата и куба. Вот как вы можете это сделать с использованием map() и flat() отдельно: let arr = [1, 2, 3, 4]; let mappedAndFlattened = arr.map(x => [x * x, x * x * x]).flat(); console.log(mappedAndFlattened); // [1, 1, 4, 8, 9, 27, 16, 64] Теперь, вот как можно упростить то же самое с помощью flatMap(): let arr2 = [1, 2, 3, 4]; let mappedAndFlattened2 = arr2.flatMap(x => [x * x, x * x * x]); console.log(mappedAndFlattened2); // [1, 1, 4, 8, 9, 27, 16, 64] В обоих примерах результат будет одинаковым, но использование flatMap() позволяет сделать код более компактным Этот метод может быть особенно полезен при работе с данными, где необходимо провести манипуляции с элементами массива и сразу упростить структуру данных, сокращая количество шагов и делая ваш код более читаемым @CCODE | JS ⚡️0,54%
  • 30 апр. 2024 г.Каррирование в 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 ⚡️0,51%