✅ Вопрос с собеседования
Что такое объекты аргументов в JavaScript?
Ответ:
Объект аргументов, это специальный тип объекта, хранящий в себе все переданные в функцию аргументы.
Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров. 
@code_ready | #собеседование
Что такое объекты аргументов в JavaScript?
Ответ:
Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.
Данный код объявляет функцию func с аргументом x. Её функционал заключается в выводе длинны объекта аргуметов, переданных в функцию. В первом случае будет выведено 0, во втором 1, и в третьем 3 
@code_ready | #собеседование
👍49🔥15😁2
  ✅ Фильтры для картинок
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
@code_ready | #свойство #css
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей.
• Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.
@code_ready | #свойство #css
👍45🔥18
  This media is not supported in your browser
    VIEW IN TELEGRAM
  Расширение Bookmarks позволяет ставить заметки на любой строчке каждого файла вашего проекта.
Добавлять ярлыки можно с помощью команды Bookmarks: Toggle
@code_ready | #плагин
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥27👍10👎4
  Всем привет! 👋
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code👩💻 
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
Please open Telegram to view this post
    VIEW IN TELEGRAM
  YouTube
  
  VS Code ПОЛНЫЙ курс + настройка (интерфейс, плагины, работа с кодом)
  Основы работы в IDE VS Code, мои настройки, плагины, рекомендации по использованию этого ПО в работе.
— В ходе просмотра рекомендую повторять действия за мной, чтобы закрепить все функции на практике.
— Курс рассчитан на новичков, однако некоторые моменты…
— В ходе просмотра рекомендую повторять действия за мной, чтобы закрепить все функции на практике.
— Курс рассчитан на новичков, однако некоторые моменты…
🔥36👍9
  ✅ Шпаргалка по событиям JS
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
🔥53👍21👎3
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Menu Icon Animation
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
👨💻  Готовый код: Ссылочка  
@code_ready | #кодпен
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
@code_ready | #кодпен
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥55👍22
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Калькулятор массы тела
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
@code_ready | #обучение #js
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
<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
👍50🔥14👎1
  ✅ Декорация текста с помощью псевдоэлементов
Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.
@code_ready | #обучение #css
Данный 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
👍36🔥10👎3
  👍22🔥8
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ CSS Свойство Perspective
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
@code_ready | #свойство #css
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
Я оставлю готовый код с примером из видео в комментариях.
@code_ready | #свойство #css
👍38🔥15
  ✅ Методы для работы с файлами
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
👍31🔥12👎1
  ✅ Использование сторонней библиотеки для работы с картами
Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.
@code_ready | #обучение #js
Библиотека 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
👍42🔥13
  0423.gif
    1.6 MB
  ✅ Компиляция кода прямо в редакторе
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина -https://www.youtube.com/watch?v=l-zB8k582k8   
@code_ready | #плагин
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина -
@code_ready | #плагин
👍29🔥12👎4
  ✅ Для чего используются операторы break и continue?
Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода. 
• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.
• Оператор continue прерывает одну итерацию и продолжает следующую в цикле. 
@code_ready | #собеседование
• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.
• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.
• По сути, в коде цикл должен отработать до 10, но поскольку есть условие i === 5, а после него выход из цикла break, то выведется значения до 5. 
• В следующем примере ситуация аналогичная, но на значении 5, оно будет пропущено из-за ключевого слова continue.
@code_ready | #собеседование
🔥31👍20
  ✅ Построение графиков прямо в браузере
Библиотека Chart.js предоставляет собой простой и удобный способ для построения графиков и диаграмм в браузере. График содержит данные о продажах для каждого месяца, а также ось Y, начинающуюся с нуля.
@code_ready | #обучение #js
Библиотека Chart.js предоставляет собой простой и удобный способ для построения графиков и диаграмм в браузере. График содержит данные о продажах для каждого месяца, а также ось Y, начинающуюся с нуля.
Если данный код работает неправильно, или вам не нужно делать его на весь экран, в комментариях оставлю css код для правки.
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
let ctx = document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
  type: "line",
  data: {
   labels: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн"],
    datasets: [
      {
        label: "Продажи",
        data: [12, 19, 3, 5, 2, 3],
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,},],},
  options: {
    scales: {
      y: { beginAtZero: true },},},
});@code_ready | #обучение #js
👍37🔥12
  ✅ Размещение по центру с помощью html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
👍55🔥18👎13😁9
  👍32🔥11👎1
  