✅ Создание анимации spinner

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

<div class="spinner"></div>

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spinner 1s linear infinite;
    margin: 0 auto;
  }
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

@code_ready | #обучение #css

@code_ready | #консоль

✅ Создание разных типов курсора

В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. Оно определяет тип отображаемого курсора при наведении мыши на объект.

В этом посте, я показывал все типы курсоров которые существуют в css. А снизу пример кода, как использовать эти свойства.

<button class="progress">progress</button>
<button class="wait">wait</button>
<button class="not-allowed">not-allowed</button>

.progress       { cursor: progress;}
.wait           { cursor: wait;}
.not-allowed    { cursor: not-allowed;}

button {
    width: 100px;
    height: 35px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
}

@code_ready | #обучение #css

✅ Универсальный помощник.

Error Lens — это мощный плагин для VSCode, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде.

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

@code_ready | #плагин

✅ Тег <q>

Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.

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

@code_ready | #практика #html

✅ Лучшие горячие клавиши для верстки

• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.

• Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах.

• Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах.

@code_ready | #клавиши

✅ Создание простого ползунка со значением

Этот код создает простой ползунок на веб-странице, который позволяет пользователю выбирать значение от 0 до 100. Под ползунком отображается текущее выбранное значение.

<div>
    <input type="range" max="100" id="sliderRange"/>
    <p>Value: <span id="demo"></span></p>
 </div>

const slider = document.getElementById("sliderRange");
const output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function () {
   output.innerHTML = this.value;
};

@code_ready | #обучение #js

✅ Шпаргалка по методам Date

Эта шпаргалка содержит основные методы JavaScript для работы с Date. Каждый метод сопровождается кратким описанием его функциональности и примером использования.

@code_ready | #js #шпаргалка

✅ Исправление орфографических ошибок

Code Spell Checker — это расширение для VSCode, Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки и исправить их

@code_ready | #плагин

@code_ready | #мем

✅ Использование стороннего API для получения температуры в городе

Этот код описывает характер работы со сторонними API. В этой реализации все работает на базе диалогового окна браузера. Выполняется запрос к API с использованием встроенного в браузер метода fetch() в асинхронном режиме (async/await).

async function getWeather() {
  const API_KEY = "12dd0fe5648f4507a47125430231301";
  const country = prompt("Введите ваш город/страну:  ");
  const URL = `https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${country}`;
  try {
    const response = await fetch(URL);
    const data = await response.json();
    alert(`Температура в ${country}: ${data.current.temp_c} °C`);
  } catch (e) {
    console.log(e);
  }
}
getWeather();

@code_ready | #обучение #js

@code_ready | #консоль

✅ Вопрос с собеседования

Что такое объекты аргументов в JavaScript?

Ответ:

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

Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.

Данный код объявляет функцию func с аргументом x. Её функционал заключается в выводе длинны объекта аргуметов, переданных в функцию. В первом случае будет выведено 0, во втором 1, и в третьем 3

@code_ready | #собеседование

✅ Фильтры для картинок

Свойство filter в CSS позволяет применять различные изменения на картинки.

• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.

Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.

• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей.
• Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.

@code_ready | #свойство #css