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

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

<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

Всем привет! ❤️
На этой неделе были опубликованы, реально полезные посты, и вообще не было рекламы. Но, к сожалению, с завтрашнего дня, опять появятся рекламы, и наверное будут каждый день. На это есть пару причин:

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

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

Надеюсь вы со мной согласны, и вам не помешает реклама каждый день, примерно раз в 2-3 поста. Также если и есть реклама, то реально полезная, да, знаю, много где похожий контент, но все равно, я рекламирую хорошие каналы или сайты. И на многие стоит подписаться 😁
Забыл добавить что, интеграция на моем канале, стоит намного выше рынка, и я не продаю ее за копейки, просто спрос большой)

Согласны со мной? Думаю, для изучения фронтенда на этом канале, реклама вряд-ли будет мешать (не надо выключать уведомления с моего канала) 🔥

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

Rainbow Brackets — плагин для VSCode, добавляет разноцветную подсветку скобок, что делает код более читаемым и облегчает навигацию по блокам кода. Каждая пара скобок окрашивается в свой уникальный цвет, что помогает легко определить соответствие скобок и улучшает визуальное восприятие кода.

@code_ready | #плагин

@code_ready | #консоль

✅ Создание таймера с помощью JS

В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.

<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>

let timer, s = 0, m = 0, h = 0, t = 0;
function startStopTimer() {
    if (t) {
        clearInterval(timer);
    } else {
        timer = setInterval(() => {
            t ? s++ : clearInterval(timer);
            updateTimer();
        }, 1000);
    } t ^= 1;}
function resetTimer() {
    clearInterval(timer);
    timer = undefined;
    s = m = h = 0;
    updateTimer();
    t = 0;}
function updateTimer() {
    const padZero = (value) => (value < 10 ? '0' : '') + value;
    document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`;}

@code_ready | #html #css #js

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

В чем разница между операндом и оператором?

Ответ:

Операнд и оператор - это два ключевых понятия в выражениях программирования, которые объединяются для выполнения операций.

1. Операнд

Операнд представляет собой часть выражения, которая содержит данные, над которыми выполняется операция. Это может быть значение, переменная или даже другое выражение. Например, в выражении 2 + 3, 2 и 3 являются операндами.

2. Оператор

С другой стороны, оператор - это символ или ключевое слово, которое указывает на конкретную операцию, которую нужно выполнить над операндами. Например, в выражении 2 + 3, оператором является знак +, который указывает на операцию сложения между операндами 2 и 3.

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

✅ Шпаргалка с методами объекта console в JS

Объект Console служит для доступа к средствам отладки браузера. Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.

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

✅ Как сделать градиентную обводку текста?

Стилевое свойство text-stroke одновременно устанавливает цвет и толщину контура вокруг букв и символов текста.Но также чтобы создать градиент нужно добавить 2 свойства: background-clip: text и background-image: linear-gradient.

<h1>Stroke</h1>

body {
    background-color: #000119;
    display: grid;
    font-family: sans-serif;
    place-items: center;
  }
  h1 {
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    font-size: 100px;
    -webkit-text-stroke: transparent 6px;
  }

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

@code_ready | #консоль

✅ Продвинутые Комментарии

Better Comments — это расширение для VSCode, способствующее улучшению структурирования комментариев в вашем коде. Оно предлагает возможность категоризировать комментарии и выделять их разными цветами, что поможет вам почеркнуть важные моменты, задачи или замечания.

@code_ready | #плагин

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

Что такое анонимная функция в JS?

Ответ:

Анонимная функция в JavaScript — это функция, которая не имеет имени и обычно создается в месте использования или передается в качестве аргумента другой функции. Они особенно полезны, когда вам нужно использовать функцию только один раз или когда не требуется ссылка на нее в другом месте кода.

Часто используются для:

• Колбэки (Callback Functions)
• Обработчики событий (Event Handlers)
• Самовызывающиеся функции (Immediately Invoked Function Expressions)

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

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

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

✅ Шпаргалка по методам объекта в JS

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

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

✅ Создание небольшой "галереи"

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

  <div class="gallery">
    <img src="img.png" alt="image">
</div>

const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
    image.addEventListener('click', function() {
        const enlargedSrc = this.src.replace('thumbnail', 'large');
        window.open(enlargedSrc, '_blank');
    });
});

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

@code_ready | #мем

✅ Тег <details>

Тег <details> определяет дополнительные детали, которые пользователь может отобразить или скрыть.
Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия.

Внутрь можно поместить тег <summary>, его используют для определения видимого заголовока для элемента <details>.

<details>
  <summary>Details</summary>
   Something small enough to escape casual notice.
</details>



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