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

CodeSnap — плагин VSCode, предназначенный для создания красивых скриншотов кода.

Основные возможности: Выбор участка кода, Настройка внешнего вида и Экспорт в различные форматы.

Чтобы понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина.

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

✅ Запрос разрешения и отправка уведомлений

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

<button class="button">Показать сообщение</button>

const notifyBtn = document.querySelector(".button");
const reqestPermission = function () {
  if (!("Notification" in window)) {
    throw new Error ("Браузер не поддерживает уведомления");
  }
  Notification.requestPermission().then((permission) => {
const notification = new Notification("Code Ready",{
      body: "Привет! Подпишись на @code_ready",
      icon: "img/img.jpg",});});};
notifyBtn.addEventListener("click", reqestPermission);

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

@code_ready | #мем

✅ Создание анимации 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 | #консоль