✅ Шпаргалка с методами объекта 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

✅ Создание вдавленного текста

Вдавленный текст очень часто используется с применением свойства text-shadow. Тень немного смещается по оси Y для создания эффекта небольшого углубления.

.recessed {
   font-size: 50px;
   font-weight: 800;
   text-align: center;
   text-shadow: 2px 2px 2px rgba(255,255,255,0.3);
   background-color: #b9b9b9;
   background-clip: text;
   color: transparent;
   font-family: 'M PLUS 1p', sans-serif;
}



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

@code_ready | #консоль

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

Разница между function declaration и function expression

Ответ:

Function Declaration:
• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.

Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.

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

✅ Кодинг в ночное время

"Night Owl" - это тема оформления для редактора кода VSCode, разработанная для обеспечения комфортного и эффективного программирования в темное время суток. Она предлагает темные оттенки, которые снижают утомляемость глаз и делают код более читаемым и контрастным.

@code_ready | #плагин

✅ Тег <select>

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

У него есть множество атрибутов и функций, кому интересно, я оставлю ссылку на документацию про этот тег)

<select name="select">
  <option value="value1">Значение 1</option>
  <option value="value2">Значение 2</option>
  <option value="value3">Значение 3</option>
</select>



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

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

Что такое конкатенация строк в JS?

Ответ:

Конкатенация строк в JavaScript - это процесс объединения двух или более строк в одну строку. Этот процесс осуществляется с использованием оператора +, который также используется для сложения чисел.

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

В этом примере мы объединяем значение переменной firstName, пробел и значение переменной lastName, чтобы получить полное имя "John Doe". Оператор + выполняет конкатенацию строк, склеивая их в одну.

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