✅ Шпаргалка Flexbox позиционирования

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

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

✅ Создание градиентного фона

В коде создается анимированный градиентный фон внутри div элемента. В Css мы определяем стили для этого div, включая его размеры, радиус скругления углов и анимацию градиентного фона.

div {
    width: 320px;
    height: 220px;
    background: linear-gradient(45deg, #64b5f6, #81c784, #ffeb3b, #ff8a65);
    background-size: 400% 400%;
    animation: gradientAnimation 7s ease infinite;
    border-radius: 15px;
  }
@keyframes gradientAnimation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }

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

@code_ready | #консоль

✅ Генератор паролей с задаваемой длинной

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

<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Длина пароля">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Генерировать</button></div>

function generatePassword() {
const length = parseInt(document.getElementById("passwordLength").value);
const charset =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];}
document.getElementById("password").value = password;}

В комментариях я оставлю Css код, для стилизации генератора.

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

✅ Что такое замыкание в JavaScript?

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

В этом примере функция innerFunction является замыканием, потому что она имеет доступ к переменной outerVariable, которая была определена во внешней функции outerFunction.

Замыкание используется для:
• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии

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

✅ Обрезка элемента по заданной области

Для создания красивого современного дизайна часто возникает потребность обрезать фотографии на сайте. А ведь они могут меняться по несколько раз в день!

Очень кстати, приходится CSS свойство clip-path, позволяющее изменять форму изображений как угодно.

Основными значениями являются:
• polygon() — для фигуры,заданной по точкам
• inset (верх, право, низ,лево) — для прямоугольной области с внутренней тенью
• circle (радиус, центр круга) — для скругления области
• ellipse (радиусы по x и y) — для создания эллиптической области обрезки

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

✅ Анимация текста в пару строк

С помощью библиотеки cssanimation, можно создать интересные анимации на свой текст.
Подключаем библиотеку через тег <link>, и указываем значения анимации в классе нужного тега, прямо в html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<h1 class="welcome-text animate__animated animate__lightSpeedInLeft">Добро пожаловать!</h1>

Css код для стилизации текста, оставлю в комментариях.

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

✅ Создание CSS-шаблона для html

eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.

@code_ready | #плагин

✅ Переключение языка страницы

Данный код представляет собой реализацию переключения языка страницы, код упрощен с благодаря библиотеки JQuery.
Устанавливается она с помощью тега script по ссылке.

<h1 data-i18n="title"></h1>
<p data-i18n="description"></p>
<button class="lang-button" data-lang="en">EN</button>
<button class="lang-button" data-lang="ru">RU</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

const translations = {
  en: {
   title: "Welcome to my website!",
   description: "This is a simple website example.",},
  ru: {
   title: "Добро пожаловать на мой сайт!",
   description: "Это простой пример сайта.",},};
function setLanguage(lang) {
  $("[data-i18n]").each(function () {
    const key = $(this).data("i18n");
    $(this).text(translations[lang][key]);
  });}
$(".lang-button").click(function () {
  const lang = $(this).data("lang");
  setLanguage(lang);});
setLanguage("en");

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

✅ Специальные символы для регулярных выражений

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

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

@code_ready | #консоль

✅ Плагин для регулярных выражений

Сложно разобраться с регулярными выражениями? Специально для таких случаев есть плагин Explain RegExp.
Прямо в VSCode генерируются уникальные схемы для каждого регулярного выражения.

На канале есть 2 шпараглки на эту тему:
методы и специальные символы

@code_ready |#плагин

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

В чем отличие между Observable и Promise в JavaScript?

Ответ:

Observable и Promise - это два способа для работы с асинхронными операциями в JS.

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

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

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

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

✅ Шпаргалка с функциями обработчиков событий

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

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

@code_ready | #консоль