Code Ready | Frontend

✅ Для чего используются операторы break и continue? Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода. • Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции. • Оператор continue прерывает одну итерацию и продолжает следующую в цикле.

• По сути, в коде цикл должен отработать до 10, но поскольку есть условие i === 5, а после него выход из цикла break, то выведется значения до 5. • В следующем примере ситуация аналогичная, но на значении 5, оно будет пропущено из-за ключевого слова continue.

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

Чтобы устроиться на работу сейчас, нужно много знать. Требования к Frontend разработчикам выросли, и готовиться к собеседованиям приходится всерьез. Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. Каждый вопрос имеет уровень сложности, короткий и полный ответ, а также ссылки на ресурсы для изучения. Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков. @frontend_questions

@code_ready | #мем

@code_ready | #мем

Я айтишник и я устал! Рутина, прокрастинация, куча задач и 0 желания их выполнять. Еще и в семье конфликты. Че делать? Хватит грызть самого себя и заставлять через силу - сделаешь только хуже! Лучше подпишись на того, кто уже не первый год работает с IT-специалистами и помогает им справиться с апатией и прокрастинацией - Психолог с научным подходом. 👨🏻‍💻 Не очередной инфоциган, а практикующий психолог с дипломом и аккредитацией. ✔️ Как оторваться от ленты соц. сетей и сесть за работу с удовольствием? ✔️ Как перестать работать по выходным и при этом все успевать? ✔️ Как избавиться от постоянной тревожности? ✔️ Как успокоить конфликты в семье и перестать срываться на всех, а вместо этого получить поддержку и понимание со стороны близких? Подписывайся на канал @remizov_changes - начни работать и жить в кайф, не скатываясь в кризисы и выгорание! А в закрепе лови бонус - 7 практик для снятия головной боли без лекарств 💆🏼‍♂️ Не эзотерика, а минус одна отмазка от работы - “голова болит, посмотрю лучше еще один видосик”

✅ Использование сторонней библиотеки для работы с картами Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.

<div id="map"></div>
<!-- Подключение библиотеки Leaflet -->
 <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

let mymap = L.map("map").setView([55.7558, 37.6173], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
}).addTo(mymap);
// Создание маркера с указанными координатами
L.marker([55.7558, 37.6173]).addTo(mymap);

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

Reactify - это активное Frontend сообщество для бесплатного обучения веб-разработке. В нем есть: 🎓 Практические курсы по JavaScript, TypeScript, React, CSS. Реализация проектов - от новостных приложений до курсов криптовалюты. 👨‍💻 Ежедневные обновления с теорией, кодом, IT-новостями и аналитикой рынка. 👥 Обмен знаниями, поддержка и советы от единомышленников. На канале тебя ждет комплексный план обучения. Frontend Roadmap 2024 + Более 60 ресурсов для бесплатного обучения. Обучайтесь, общайтесь, растите. Присоединяйтесь к @reactify_IT

✅ Методы для работы с файлами В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал @code_ready | #шпаргалка #js

✅ CSS Свойство Perspective Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену. Значение задается в стандартных единицах: px, %, em. Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.

Я оставлю готовый код с примером из видео в комментариях.

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

👨‍💻 Изучаешь Frontend? Я тоже! idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта. С меня: — Сложная теория простым языком; — Практические примеры и объяснения; — Крутые викторины по JS; — Работа над ошибками. С тебя: — Подписка @idk_frontend Продолжим обучаться вместе! 👋

@code_ready | #консоль

✅ Декорация текста с помощью псевдоэлементов Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.

  <div class="decorated-box">
    <h2>Заголовок</h2>
    <p>Некоторый текст</p>
  </div>

.decorated-box {
  position: relative;
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
}
.decorated-box::before, .decorated-box::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #3498db;
}
.decorated-box::before {
  top: 0;
  left: 0;
}
.decorated-box::after {
  bottom: 0;
  right: 0;
}

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

✅ Калькулятор массы тела Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"

<label for="weight">Вес (кг):</label>
<input type="number" id="weight" required><br>
<label for="height">Рост (см):</label>
<input type="number" id="height" required><br>
<button onclick="calculateBMI()">Рассчитать ИМТ</button>
<div id="result"></div>

function calculateBMI() {
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value) / 100;
    const bmi = weight / (height * height);
    const bmiCat = getBMICategory(bmi);
    document.getElementById('result').innerHTML = `Ваш ИМТ: ${bmi.toFixed(1)} (${bmiCat})`;
}
function getBMICategory(bmi) {
    if (bmi < 18.5) {
        return 'Недостаточный вес';
    } else if (bmi >= 18.5 && bmi < 25) {
        return 'Нормальный вес';
    } else if (bmi >= 25 && bmi < 30) {
        return 'Избыточный вес';
    } else {
        return 'Ожирение';
    }
}

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

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

✅ Menu Icon Animation Анимация различных иконок для меню на CSS. Написано без использования JavaScript. 👨‍💻 Готовый код: Ссылочка @code_ready | #кодпен

✅ Шпаргалка по событиям JS Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя. @code_ready | #шпаргалка #js