✅ Улучшение читаемости кода

Indent Rainbow - плагин для VSCode, который добавляет цветовую разметку для каждого уровня отступа в вашем коде, улучшая его читаемость и понимание структуры. Благодаря этому плагину вы сможете легко отслеживать вложенность блоков кода, делая процесс разработки более удобным и эффективным.

@code_ready | #плагин

Всем привет! Сейчас хочу поделиться, лучшими шпаргалками, которые я делал для этого канала. Судя по вашим репостам и реакциям, вот лучшие:

1. Регулярные выражения

2. Обработчики событий

3. Методы массива

4. Работа с DOM

5. Основные операторы

Ну а все подобные шпаргалки, можно посмотреть с помощью одного хештега #шпаргалка. 🔥

✅ Переключаем видимость пароля

Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';
}});

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

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

• Alt + ↓ / ↑ — переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

• Ctrl + Shift + ← / → — выделит слова после или перед курсором.

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

@code_ready | #клавиши

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

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

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

Всем новоприбывших и старикам этого канала, привет)
На этой неделе Я закрывал продажи рекламы, ну чтобы вы отдохнули от нее 😁, но хочу сказать, что уже продажи открыты, и скорее всего, каждый день будет выходить 1 реклама.

На качество постов это не повлияет, наоборот, даже полезно будет смотреть и подписываться на новые, интересные каналы про веб разработку. 1 реклама на 2-3 поста - вроде-бы нормально)

Та и монетизировать канал надо, получать деньги с него. Как говорили подписчики под 1 постом,

Бесплатно ничего не делай, цени свой труд.

Поэтому, думаю это неплохо, делитесь своим мнением в комментариях и ставьте реакции 👍🔥 если согласны.

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

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 #шпаргалка