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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Тег <optgroup>

Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.

<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetales">
<option value="carrot">Carrot</option>
<option value="potato" disabled>Potato</option>
</optgroup>
</select>


@code_ready | #практика #html
🔥43👍28
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем генератор паролей

Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль длиной 12 символов из указанных в charset.

<div class="password-generator">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Генерировать</button>
</div>

function generatePassword() {
const length = 12;
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;
}


@code_ready | #обучение #js
👍53🔥25
Всем привет! По прошлому голосованию, мне предложили множество прикольных идей для нового канала, и я решил создать, 1 канал про фронтенд и бэкенд вместе. Объясняю идею:

Будет создан канал "Roadmap Ready", в нем я буду публиковать:

1. Полезные ссылки на статьи, видео с ютуба, книги, кодпены, репозитории и т.д. Все эти ресурсы я буду скидывать про фронтенд и бэкенд.
2. Затем, будет идти тест про эту тему (консоль, опрос, true/false), и в комментариях объяснение. Примерно как сейчас в этом канале #консоль, но добавится ещё и бэкенд опросы (Python, PHP...)
3. Ну и конечно же, будет разбор вопросов с собеседований (codewars). Также как на этом канале #собеседование. Но добавится бэкенд.

Как вам идея нового канала? Пишите мнение в комментариях и ставьте реакцию 🔥

В этом канале будут такие языки программирования как: (Html, Css, JavaScript, Python, Php, Java, и возможно что то ещё)
🔥84👍12
Что выведет консоль? console.log(typeof Boolean);
Anonymous Quiz
39%
boolean
39%
object
11%
string
11%
function
😁17👍13🔥12
Улучшение читаемости кода

Indent Rainbow - плагин для VSCode, который добавляет цветовую разметку для каждого уровня отступа в вашем коде, улучшая его читаемость и понимание структуры. Благодаря этому плагину вы сможете легко отслеживать вложенность блоков кода, делая процесс разработки более удобным и эффективным.

@code_ready | #плагин
👍61🔥19👎4
Всем привет! Сейчас хочу поделиться, лучшими шпаргалками, которые я делал для этого канала. Судя по вашим репостам и реакциям, вот лучшие:

1. Регулярные выражения

2. Обработчики событий

3. Методы массива

4. Работа с DOM

5. Основные операторы

Ну а все подобные шпаргалки, можно посмотреть с помощью одного хештега #шпаргалка. 🔥
👍44🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Переключаем видимость пароля

Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
<input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
if (showPasswordCheckbox.checked) {
passwordInput.type = 'text';
} else {
passwordInput.type = 'password';
}});


@code_ready | #обучение #js
👍80🔥32
This media is not supported in your browser
VIEW IN TELEGRAM
Горячие клавиши для ускорения верстки

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

• Ctrl + Shift + ← / → — выделит слова после или перед курсором.

• Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах.

@code_ready | #клавиши
👍130🔥30😁7
Шпаргалка по методам строк

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

@code_ready | #js #шпаргалка
👍62🔥16👎1😁1
Всем новоприбывших и старикам этого канала, привет)
На этой неделе Я закрывал продажи рекламы, ну чтобы вы отдохнули от нее 😁, но хочу сказать, что уже продажи открыты, и скорее всего, каждый день будет выходить 1 реклама.

На качество постов это не повлияет, наоборот, даже полезно будет смотреть и подписываться на новые, интересные каналы про веб разработку. 1 реклама на 2-3 поста - вроде-бы нормально)

Та и монетизировать канал надо, получать деньги с него. Как говорили подписчики под 1 постом,
Бесплатно ничего не делай, цени свой труд.


Поэтому, думаю это неплохо, делитесь своим мнением в комментариях и ставьте реакции 👍🔥 если согласны.
👍95🔥27😁2👎1
Что выведет консоль?
console.log(typeof null)
Anonymous Quiz
29%
null
51%
object
15%
undefined
5%
error
👍25🔥5👎3
This media is not supported in your browser
VIEW IN TELEGRAM
Создание крутых скриншотов кода

CodeSnap — плагин VSCode, предназначенный для создания красивых скриншотов кода.

Основные возможности: Выбор участка кода, Настройка внешнего вида и Экспорт в различные форматы.

Чтобы понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина.

@code_ready | #практика
👍77🔥21😁2
This media is not supported in your browser
VIEW IN TELEGRAM
Запрос разрешения и отправка уведомлений

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

<button class="button">Показать сообщение</button>

const notifyBtn = document.querySelector(".button");
const reqestPermission = function () {
if (!("Notification" in window)) {
throw new Error ("Браузер не поддерживает уведомления");
}
Notification.requestPermission().then((permission) => {
const notification = new Notification("Code Ready",{
body: "Привет! Подпишись на @code_ready",
icon: "img/img.jpg",});});};
notifyBtn.addEventListener("click", reqestPermission);


@code_ready | #обучение #js
👍60🔥15😁1
😁152👍16🔥12
This media is not supported in your browser
VIEW IN TELEGRAM
Создание анимации spinner

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

<div class="spinner"></div>

.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
animation: spinner 1s linear infinite;
margin: 0 auto;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


@code_ready | #обучение #css
👍63🔥11
Что будет в консоли?
Anonymous Quiz
27%
124, "223"
14%
1231, 2
54%
1231, "223"
5%
124, 2
🔥29👍14
This media is not supported in your browser
VIEW IN TELEGRAM
Создание разных типов курсора

В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. Оно определяет тип отображаемого курсора при наведении мыши на объект.

В этом посте, я показывал все типы курсоров которые существуют в css. А снизу пример кода, как использовать эти свойства.

<button class="progress">progress</button>
<button class="wait">wait</button>
<button class="not-allowed">not-allowed</button>

.progress       { cursor: progress;}
.wait { cursor: wait;}
.not-allowed { cursor: not-allowed;}

button {
width: 100px;
height: 35px;
border: 1px solid #eee;
border-radius: 5px;
background-color: #fff;
}


@code_ready | #обучение #css
👍49🔥15
This media is not supported in your browser
VIEW IN TELEGRAM
Универсальный помощник.

Error Lens — это мощный плагин для VSCode, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде.

Он мгновенно выделяет ошибки, предупреждения и другие типы сообщений об ошибках прямо в редакторе, делая их более заметными и обеспечивая быстрый доступ к информации о них.

@code_ready | #плагин
👍60👎17🔥11
Тег <q>

Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.

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

@code_ready | #практика #html
🔥53👍20👎1