Code Ready | Frontend

@code_ready | #консоль

✅ Специальные символы для регулярных выражений Данная шпаргалка представляет собой небольшой набор основных спец. символов в JavaScript. Они используются для создания более гибких и мощных шаблонов поиска. @code_ready | #шпаргалка #js

💎 PyLinux - канал для тех, кто интересуется всем, что связано с Python и Linux! 👉 Почему не стоит упустить: - доступный материал Linux - библиотеки и скрипты Python - книги и полезный софт - bash и многое другое! 🔥 Заходи прямо сейчас, чтобы не потерять - PyLinux!

✅ Переключение языка страницы Данный код представляет собой реализацию переключения языка страницы, код упрощен с благодаря библиотеки 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

👋🏼 Всем привет! Я автор данного канала, и на днях я решил создать абсолютно новый канал про дизайн — @time_design. Почему про дизайн? Не знаю, так получилось 😁. Но в планах создать в мае ещё 1 канал для fullstack разработчиков (общее IT) и примерно в июне наконец-то про бэкенд. 👩‍💻 Но пока что, подписывайтесь на мой новый авторский ✈️ канал @time_design. Там я делюсь полезными обучениями в таких программах, как Figma, Photoshop, Illustrator, Blender3D, рассказываю про актуальные тренды, фишки и новости в мире дизайна 🕘

👋🏼 Всем привет! Я автор данного канала, и на днях я решил создать абсолютно новый канал про дизайн — @time_design. Почему про дизайн? Не знаю, так получилось 😁. Но в планах создать в мае ещё 1 канал для fullstack разработчиков (общее IT) и примерно в июне наконец-то про бэкенд. 👩‍💻 Но пока что, подписывайтесь на мой новый авторский ✈️ канал @time_design. Там я делюсь полезными обучениями в таких программах, как Figma, Photoshop, Illustrator, Blender3D, рассказываю про актуальные тренды, фишки и новости в мире дизайна 🕘

☝️ Очередной айтишник сгорел на работе … А всё потому, что не читал Code Review. Там есть всё, что нужно для полноценного кодинга без стресса и выгорания: Отборные мемы с колким подсмыслом и вайбОвая атмосфера для тех, кто в теме. Скорее подписываемся – @coode_review

✅ Анимация текста в пару строк С помощью библиотеки 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 свойство clip-path, позволяющее изменять форму изображений как угодно. Основными значениями являются: • polygon() — для фигуры,заданной по точкам • inset (верх, право, низ,лево) — для прямоугольной области с внутренней тенью • circle (радиус, центр круга) — для скругления области • ellipse (радиусы по x и y) — для создания эллиптической области обрезки @code_ready | #свойство #css

Стать фронтендером в Яндексе за выходные 18–19 мая устраиваем Weekend Offer Frontend: всего за 2 дня можно пройти технические секции и попасть в Яндекс. Для этого нужно зарегистрироваться и решить одну задачу в Контесте. Вы сможете выбрать одну из 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер. Поможем релоцироваться в пределах РФ, нанимаем в офисы по всей стране. Узнать подробности и зарегистрироваться можно здесь. Реклама. ООО "Яндекс". ИНН 7736207543

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

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

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

Работать и не уставать, достигать цели, но делать это в кайф - реально! Как научиться делать дела и не выгорать? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ▪️ Как научиться отвлекаться от работы и отдыхать? ▪️ Как совместить кучу рабочих задач и время с семьей? ▪️ Как справиться с прокрастинацией? ▪️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.

✅ Генератор паролей с задаваемой длинной Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль с задаваемой в верхней форме длинной, из символов из указанных в 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

Как стать востребованным DevOps-специалистом всего за полгода и увеличить свой доход минимум в 3 раза? Самое перспективное направление в IT сейчас – DevOps. И пока одни его боятся и обходят стороной, другие снимают все сливки. Реальный пример – автор канала «Devops за полгода» Марсель Ибраев, Senior system engineer в Core42 Cloud и спикер учебного центра Слёрм. Совместно с ребятами из Честного Знака, Лаборатории Касперского, VK и Jetty Cloud, они запускают новый крутой проект для всех начинающих DevOps-специалистов. В канале собраны все фишки о том, как: – Начать свой путь в DevOps – Освоить базовые компетенции DevOps-специалиста – Стать Junior DevOps и повысить свою стоимость на рынке труда в 3 раза Переходи и забирай бесплатную карту по базовым и основным компетенциям для всех, кто собирается в DevOps 👉 @devopsupgrade Реклама. ИП Аердинов Никита Вадимович ИНН 638103515932 erid: LjN8K7zVy

Как стать востребованным DevOps-специалистом всего за полгода и увеличить свой доход минимум в 3 раза? Самое перспективное направление в IT сейчас – DevOps. И пока одни его боятся и обходят стороной, другие снимают все сливки. Реальный пример – автор канала «Devops за полгода» Марсель Ибраев, Senior system engineer в Core42 Cloud и спикер учебного центра Слёрм. Совместно с ребятами из Честного Знака, Лаборатории Касперского, VK и Jetty Cloud, они запускают новый крутой проект для всех начинающих DevOps-специалистов. В канале собраны все фишки о том, как: – Начать свой путь в DevOps – Освоить базовые компетенции DevOps-специалиста – Стать Junior DevOps и повысить свою стоимость на рынке труда в 3 раза Переходи и забирай бесплатную карту по базовым и основным компетенциям для всех, кто собирается в DevOps 👉 @devopsupgrade Реклама. ИП Аердинов Никита Вадимович ИНН 638103515932 erid: LjN8K7zVy

@code_ready | #консоль

✅ Создание градиентного фона В коде создается анимированный градиентный фон внутри 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

✅ Шпаргалка Flexbox позиционирования Flexbox - позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое. @code_ready | #css #шпаргалка