🍾 С наступающим или наступившим 2025 годом! 🎄

Желаем всем, чтоб 2025 год стал для вас годом, в котором вы побьете свои собственные рекорды в вашей профессиональной деятельности, добьетесь новых высот в ваших увлечениях, начинаниях и любых жизненных аспектах 📈

Новичкам, только приступившим к изучению программирования желаем легкого старта! 🏁

🎊 Спасибо за то что читаете, желаем отлично встретить Новый 2025 год! 🎉

Как поменять цвет выделения текста в CSS? 🖌

Для этого нужно изменить 2 свойства в псевдоэлементе ::selection 💠

По умолчанию цвет выделения синий, а цвет текста при выделении белый 👁‍🗨

👉 Чтобы поменять цвета:
➖ в свойстве background-color задаем цвет фона выделения
➖ в свойстве color задаем цвет текста при выделении

Код из гифки:

::selection {

  /* цвет выделения */
  background-color: #b685ff;

  /* цвет текста на фоне
  выделения */
  color: #f7f4ff;

}

Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤

➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁‍🗨

Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥

Нужен продаваемый дизайн? – обращайтесь к Воркфорду 🖌

Это именно тот человек, который создал абсолютно весь дизайн связанный с нашими телеграм и ютуб каналами, тикток и инстаграм профилями! ❤️‍🔥

Все видео тоже были смонтированы ним! 🔥

Сейчас ему необходимо наполнить своё портфолио под псевдонимом Workford, поэтому он готов бесплатно создать превью для видео ютуб, рекламный баннер/креатив любой стилистики и на любую тему всем желающим ⚜️

Единственное условие: оставить честный отзыв после выполнения заказа 💬

👉🏻 Телеграм канал Воркфорда 🪐

Рассмотрим тип объекта Map в JavaScript ⚜️

Map – это тип объекта, который используется для хранения пар ключ-значение и обеспечения быстрого доступа к значениям по ключу. Он предоставляет эффективный способ создания ассоциативных массивов и их управления, где ключами могут быть любые значения, а не только строки, как в обычных объектах 🔗

Для типа объекта Map существует большое количество методов, основные из которых включают: добавление, проверку и удаление элементов (пар ключ-значение) 👁‍🗨

Меняем цвет иконки при hover наведении в CSS 👆🏻

Напрямую цвет изображений CSS свойствами поменять нельзя (png изображений в частности), поэтому смены цвета иконки при hover наведении можно добиться несколькими способами, выбор которых зависит от цели 🌓

В видео разобран случай, где цвет кнопки с иконкой меняется между контрастными тонами. В этом случае достаточно воспользоваться свойством filter со значением invert для смены цвета иконки на противоположный 🔲

Вообще лучше использовать векторные svg иконки, в случае с которыми поменять цвет некоторыми CSS свойствами все же можно, в отличие от png изображений, например 👁‍🗨

Пост для новичков канала, которые ещё не в курсе о сайте-визитке на ReactJS, который мы разработали относительно недавно ⚛️

Плейлист с частями, в которых мы поэтапно разрабатываем сайт-визитку шаг за шагом доступен на нашем ютуб канале 🪪

В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании разных CSS анимаций 🟦

Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

На финальный результат можно взглянуть в 20-й части 👈

Благодаря методу fill можно заполнить массив или его отрезок заданным элементом 🫗

👉 метод fill принимает 3 параметра:
➖ value – обязательный параметр обозначающий значение, которым должен быть заполнен массив
➖ start – начало отрезка, который должен быть заполнен заданным значением
➖ end – конец отрезка

Необязательные параметры start и end указываются в виде индексов элементов массива: значение параметра start – начало отрезка, значение параметра end = элемент массива, до которого заканчивается отрезок (он не учитывается в самом отрезке) 👁‍🗨

useEffect – это React хук, который используется для регулирования хода жизни компонентов. Выполняет эффекты после загрузки компонента, обновления состояний или при их размонтировании ⚛

На гифке пример использования хука useEffect в связке с хуком useState: есть компонент с кнопкой, которая увеличивает значение переменной count по нажатию 🔼

➖ хук useState сохраняет и обновляет значение переменной count – "const [count, setCount] = useState(0)"
➖ а хук useEffect обновляет заголовок страницы, отображая актуальное значение count – "document.title = Счетчик: ${count}"

Код из гифки:

import React from 'react';
import { useState, useEffect }
from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = Счетчик: ${count};
  }, [count]); 

  return (
    <button onClick={() => setCount(count + 1)}>
      добавить
    </button>
  );
};

export default MyComponent;

Как создать круговую анимацию загрузки в CSS? 🔘

Для этого достаточно прописать 2 класса и анимацию вращения в @keyframes 🔄

👉 На гифке пример стилизации классов:
➖ в классе loading указано соотношение контейнера 1 к 1, радиус скругления 50%, задана анимация из @keyframes
➖ в классе line задан размер контейнера, толщина обводки, прозрачность для одной из сторон обводки

Идея заключается в том, что мы скруглили квадратную обводку внутри контейнера. Поскольку 1/4 квадратной обводки невидима, то линия (обводка) будет длиной в 1/4 круга 👁‍🗨

Код из гифки:

// index.html
<span className='loading line'/>

/* index.css */
.loading {
  aspect-ratio: 1/1;
  border-radius: 50%;
  animation-name: spin;
  animation-iteration-count: infinite;
}   

.line {
  width: 50px;
  border: 6px solid black;
  border-top-color: transparent;
  animation-duration: 1s;
}

@keyframes spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}

Callback-функция – это функция, которая передается в качестве аргумента другой функции 👩‍👧‍👦

Она вызывается после завершения определенной операции или события в главной функции 🏁

👉 В видео мы рассмотрели пример таких функций:
➖ math – главная функция
➖ plus и minus – сallback-функции, передаваемые главной функции в качестве аргументов

При вызове главной функции, указывается операция, в качестве которой выступает одна из callback-функций 👁‍🗨

Код из видео:

function math(x, y, operation) {   // ✦ Главная функция
  return operation(x, y);                      
}                                              
                                               
function plus(x, y) {    // сallback-функция
  return x + y;                                
}                                              
                                               
function minus(x, y) {   // сallback-функция
  return x - y;
}


console.log(math(1, 9, plus));
console.log(math(9, 1, minus));

Какой креатив среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇

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

Один из самых распространенных циклов – цикл "for" ℹ

В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋

На каждой итерации в консоль выводилось новое актуальное значение переменной 👁‍🗨

Рассмотрим тип объекта Set в JavaScript ⚜️

Set – это тип объекта, который используется для работы с уникальными значениями. Он позволяет хранить и обрабатывать только уникальные элементы, игнорируя повторения 💎

Для типа объекта Set существует большое количество методов, основные из которых включают: добавление, проверку и удаление элементов 👁‍🗨