Code Ready | Frontend
20.1K subscribers
687 photos
304 videos
17 files
456 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

Заявления РКН: № 5383712961
Download Telegram
Что будет в консоли?
Anonymous Quiz
66%
1,5
8%
0
25%
4
1%
5
👍40🔥9👎8
Вопрос с собеседования

Что такое объекты аргументов в JavaScript?

Ответ:


Объект аргументов, это специальный тип объекта, хранящий в себе все переданные в функцию аргументы.

Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.


Данный код объявляет функцию func с аргументом x. Её функционал заключается в выводе длинны объекта аргуметов, переданных в функцию. В первом случае будет выведено 0, во втором 1, и в третьем 3


@code_ready | #собеседование
👍49🔥15😁2
Фильтры для картинок

Свойство 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
📱 Заметки в файлах VS Code

Расширение 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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36👍9
Шпаргалка по событиям 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 | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥55👍22
This media is not supported in your browser
VIEW IN TELEGRAM
Калькулятор массы тела

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

<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.

  <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
Что будет в консоли
Anonymous Quiz
20%
[52]
11%
[50, 2, 0]
56%
[52, 0]
4%
[5020]
9%
NaN
👍22🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Свойство Perspective

Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.

Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.

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


@code_ready | #свойство #css
👍38🔥15
Методы для работы с файлами

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

@code_ready | #шпаргалка #js
👍31🔥12👎1
Использование сторонней библиотеки для работы с картами

Библиотека 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 | #плагин
👍29🔥12👎4
👍153😁69🔥6
Для чего используются операторы break и continue?

Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода.

• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.

• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.


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

• В следующем примере ситуация аналогичная, но на значении 5, оно будет пропущено из-за ключевого слова continue.


@code_ready | #собеседование
🔥31👍20
Построение графиков прямо в браузере

Библиотека 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
👍54🔥18👎13😁9