👁‍🗨 CODORUM — пишу на JavaScript

HTTP-заголовки – это часть протокола HTTP, которая передает дополнительную информацию вместе с HTTP-запросом или HTTP-ответом. Они состоят из пар ключ-значение и используются для передачи метаданных между клиентом (например, браузером) и сервером. Заголовки могут указывать тип содержимого, информацию о кэшировании, параметры авторизации, язык, тип браузера, разрешения для кросс-доменных запросов и многое другое 📄 👉 Основные типы HTTP-заголовков: ➖ Заголовки запроса (Request Headers) ➖ Заголовки ответа (Response Headers) ➖ Заголовки тела (Entity Headers) ➖ Заголовки маршрутизации (General Headers)

throw – это оператор ключевое слово, использующийся для генерации собственных исключений или ошибок 🔴 Он позволяет создавать различные сценарии обработки ошибок в следствие выполнения функций ⚠ На скрине пример использования: есть функция "checkNumber", которая принимает переменную "variable". В блоке if прописано условие по проверке значения переменной. Если значение переменной не является числом, создается новая ошибка через оператор throw 🔌 Функция запускается в блоке try и если переменная является числом то она выводится в консоль, иначе в консоль выводится ошибка, которую была создана оператором throw 👁‍🗨

Вот почему пиксели – не лучшая единица измерения для разметки страницы 📏 Так как у экранов устройств разное разрешение, следовательно, разное количество пикселей по ширине и высоте экрана, используя фиксированную единицу измерения пиксель для разметки страницы, она будет отображаться на разных устройствах по-разному в плане масштаба 💻🖥 Почему единицы измерения viewport хорошее решение для адаптивной верстки? 📐 Эти относительные единицы измерения рассчитываются подобно процентам. Берётся размер окна браузера и рассчитывается сколько пикселей будет равно одному проценту. Благодаря viewport единицам элементы страницы лаконично ложатся и масштабируются под разные размеры экранов 🧮

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Какая разница между декларацией функции (function declaration) и функциональным выражением (function expression)? 🔸 Function Declaration: объявляется отдельным оператором function и доступна во всём блоке благодаря hoisting. 🔸 Function Expression: присваивается переменной, не поднимается hoisting, то есть не может быть вызвана до объявления.

С 8 марта, дорогие наши прекрасные дамы! 🦄🪻🦋 Вы – наше вдохновение и мотивация. Ваши улыбки согревают наши сердца, а ваш образ дарует элегантность и веру в красоту этому миру как ничто другое. Пусть эта весна расцветет в ваших сердцах, наполнив их гармонией 🌸 Будьте любимы, окрылены мечтами и согреты искренними чувствами. С праздником! 💖 © Видео создано нашим веб-дизайнером Workford ✨

С помощью метода charAt можно узнать какой символ связан с заданным индексом в строке 🔗 Для этого достаточно задать строку и метод charAt через точку, указав в скобках индекс 🔍 Существует аналогичный противоположный метод indexOf, который возвращает индекс заданного символа из строки 👁‍🗨 Код со скрина:

// ✦ Получение символа по индексу из строки
let string = "Codorum";

function findSymbol(a) { console.log(a, "- это индекс символа", string.charAt(a)) }

findSymbol(5);


// ✦ Получение индекса символа из строки
function findIndex(a) { console.log(`Индекс символа ${a} =`, string.indexOf(a)) }

findIndex("C");

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨 Проголосуйте в следующем посте 👇

Как конвертировать массив в объект на JavaScript? Для этого можно воспользоваться обычным развертыванием с участием Spread оператора 🟨 Объявляем объект и в фигурных скобках добавляем Spread оператор (многоточие в данном случае будет считаться Spread оператором) и название массива, который мы хотим конвертировать в объект ✨ 👉 При развертывании: ➖ элементы массива будут конвертированы в свойства объекта ➖ создадутся стандартные ключи для свойств в виде индексов элементов из массива

Базовый пост для новичков: как стилизовать список в CSS? 🗒 👉 Для этого достаточно: ➖ прописать сам список с использованием тегов <ol> и <li> ➖ присвоить списку класс, для которого стилизовать маркер элементов списка в псевдоэлементе ::marker Таким образом можно стилизовать маркеры конкретного списка, оставив остальные списки страницы без изменений 👁‍🗨 Код со скрина:

// index.html
<ol class="main">
  <li>Как</li>
  <li>стилизовать</li>
  <li>список</li>
  <li>в CSS</li>
</ol>

/* index.css */
.main ::marker {
  color: #b685ff;
  font-weight: 900;
  font-size: 14px;
}

Рассмотрим тип объекта Set в JavaScript ⚜️ Set – это тип объекта, который используется для работы с уникальными значениями. Он позволяет хранить и обрабатывать только уникальные элементы, игнорируя повторения 💎 Для типа объекта Set существует большое количество методов, основные из которых включают: добавление, проверку и удаление элементов 👁‍🗨

Цикл – это управляющая конструкция, обеспечивающая многократное выполнение блока кода до выполнения заданного условия. Циклы сокращают количество дублирования кода и помогают эффективно работать с данными 🔂 Один из самых распространенных циклов – цикл "for" ℹ В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋ На каждой итерации в консоль выводилось новое актуальное значение переменной 👁‍🗨

Самые популярные JavaScript UI-фреймворки/библиотеки на начало 2025 года 🟨 ⚛ React – остается одним из самых популярных для создания пользовательских интерфейсов, активно используется в крупных компаниях. Его компонентный подход и широкая экосистема делают его привлекательным для разработчиков. Несмотря на продолжающийся спад поисковых запросов - активность его скачиваний самая стремительная. ▪️ Что касается Angular и Vue: 🅰 Angular – популярный в корпоративной среде. Его структура и возможности делают его привлекательным для больших проектов. 🔰 Vue – продолжает набирать популярность среди разработчиков, которые ищут простой и эффективный инструмент для создания интерфейсов. "Самой громкой новостью прошлого года (2023) стало то, что Vue обошел Angular по уровню использования среди наших респондентов. Несмотря на прогресс Angular в этом году (2024), Vue удалось сохранить второе место, а также подняться аж на три позиции по проценту удержания пользователей!" — State of JavaScript 📊

Какой креатив среди этих 8 вам нравится больше? С точки зрения дизайна 🎨 Проголосуйте в следующем посте 👇

Callback-функция – это функция, которая передается в качестве аргумента другой функции 👩‍👧‍👦 Она вызывается после завершения определенной операции или события в главной функции 🏁 👉 В видео мы рассмотрели пример таких функций: ➖ math – главная функция ➖ plus и minus – сallback-функции, передаваемые главной функции в качестве аргументов При вызове главной функции, указывается операция, в качестве которой выступает одна из callback-функций 👁‍🗨 Код из видео:

JavaScript
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));

Как создать круговую анимацию загрузки в 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) }
}