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

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
Что будет в консоли
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
Что будет в консоли?
Anonymous Quiz
38%
NaN
12%
[1, 2, 3, 4]
15%
[2, 3, 4]
10%
[1, 2, 3]
26%
Error
👍32🔥11👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Слайдер загрузки с процентами

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

С помощью свойства animation задаётся анимация контейнера загрузки.

Далее с помощью декораторов @keyframes кастомизируется сколько угодно значений.

Внутри декоратора задаем значения на 0 ,25, 50 и 100%.

• В следующем декораторе происходит смена текста под слайдером в соответствии процентам.


Уже готовый код я оставил в комментариях)

@code_ready | #обучение #js
🔥33👍16
0427 (2)(1).gif
302.1 KB
Encrypted Password

Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором

👨‍💻 Готовый код: Ссылочка

@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥50👍16👎2
Настраиваемый перенос строки

Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.

Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную

Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.

@code_ready | #свойство #css
🔥75👍22
Шпаргалка по регулярным выражениям

Эта шпаргалка представляет набор основных методов для создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.

@code_ready | #шпаргалка #js
👍85🔥33👎3
This media is not supported in your browser
VIEW IN TELEGRAM
Горячие клавиши для быстрой верстки

Ctrl + F2 — Выделяет все вхождения текущего слова.

Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

Shift + Tab — Удаляет отступы.

@code_ready | #клавиши
👍82🔥21👎4
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем генератор штрих-кодов

Данный код позволяет генерировать различные штрих-коды с помощью библиотеки JsBarcode.
Она позволяет создавать штрихкоды разных форматов, так и кастомизировать текст под ними в едином шаблоне.

<input type="text" id="barcodeValue">
<button id="generateButton">Создать штрих-код</button>
<canvas id="barcodeCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

const barcodeValueInput = document.getElementById("barcodeValue");
const barcodeCanvas = document.getElementById("barcodeCanvas");
const generateButton = document.getElementById("generateButton");
function generateBarcode() {
let barcodeValue = barcodeValueInput.value;
JsBarcode(barcodeCanvas, barcodeValue);
}
generateButton.addEventListener("click", generateBarcode);


@code_ready | #обучение #js
👍63🔥21👎6
👋 Всем привет! В этом посте, хочу поделиться самыми полезными и интересными постами, которые выходили на этом канале:

1. Шпаргалки:
Методы массива и Методы строк
CSS Grid
Обработчики событий

2. Разработка на JS:
Отправка уведомлений
Переключение видимости пароля
Генератор QR кода

3. Горячие клавиши:
Для быстрой верстки
Дополнительные

4. Плагины:
Создание скриншотов
Исправление орфографических ошибок

⚠️ На канале сущесвует множество рубрик, их можно найти по специальным хештегам (пример #свойство или #обучение)
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53👍24👎5
Шпаргалка Flexbox позиционирования

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

@code_ready | #css #шпаргалка
👍91🔥31
This media is not supported in your browser
VIEW IN TELEGRAM
Создание градиентного фона

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