This media is not supported in your browser
VIEW IN TELEGRAM
✅ Тег <optgroup>
Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.
Тег <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.
@code_ready | #обучение #js
Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль длиной 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). Также как на этом канале #собеседование. Но добавится бэкенд.
Как вам идея нового канала? Пишите мнение в комментариях и ставьте реакцию 🔥
Будет создан канал "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 | #плагин
Indent Rainbow - плагин для VSCode, который добавляет цветовую разметку для каждого уровня отступа в вашем коде, улучшая его читаемость и понимание структуры. Благодаря этому плагину вы сможете легко отслеживать вложенность блоков кода, делая процесс разработки более удобным и эффективным.
@code_ready | #плагин
👍61🔥19👎4
Всем привет! Сейчас хочу поделиться, лучшими шпаргалками, которые я делал для этого канала. Судя по вашим репостам и реакциям, вот лучшие:
1. Регулярные выражения
2. Обработчики событий
3. Методы массива
4. Работа с DOM
5. Основные операторы
Ну а все подобные шпаргалки, можно посмотреть с помощью одного хештега #шпаргалка. 🔥
1. Регулярные выражения
2. Обработчики событий
3. Методы массива
4. Работа с DOM
5. Основные операторы
Ну а все подобные шпаргалки, можно посмотреть с помощью одного хештега #шпаргалка. 🔥
👍44🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Переключаем видимость пароля
Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.
@code_ready | #обучение #js
Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "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 | #клавиши
• Alt + ↓ / ↑ — переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.
• Ctrl + Shift + ← / → — выделит слова после или перед курсором.
• Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах.
@code_ready | #клавиши
👍130🔥30😁7
✅ Шпаргалка по методам строк
Эта шпаргалка предоставляет список основных методов для работы со строками в JavaScript. Каждый метод сопровождается кратким описанием его функциональности и примером использования.
@code_ready | #js #шпаргалка
Эта шпаргалка предоставляет список основных методов для работы со строками в JavaScript. Каждый метод сопровождается кратким описанием его функциональности и примером использования.
@code_ready | #js #шпаргалка
👍62🔥16👎1😁1
Всем новоприбывших и старикам этого канала, привет)
На этой неделе Я закрывал продажи рекламы, ну чтобы вы отдохнули от нее 😁, но хочу сказать, что уже продажи открыты, и скорее всего, каждый день будет выходить 1 реклама.
На качество постов это не повлияет, наоборот, даже полезно будет смотреть и подписываться на новые, интересные каналы про веб разработку. 1 реклама на 2-3 поста - вроде-бы нормально)
Та и монетизировать канал надо, получать деньги с него. Как говорили подписчики под 1 постом,
Поэтому, думаю это неплохо, делитесь своим мнением в комментариях и ставьте реакции 👍🔥 если согласны.
На этой неделе Я закрывал продажи рекламы, ну чтобы вы отдохнули от нее 😁, но хочу сказать, что уже продажи открыты, и скорее всего, каждый день будет выходить 1 реклама.
На качество постов это не повлияет, наоборот, даже полезно будет смотреть и подписываться на новые, интересные каналы про веб разработку. 1 реклама на 2-3 поста - вроде-бы нормально)
Та и монетизировать канал надо, получать деньги с него. Как говорили подписчики под 1 постом,
Бесплатно ничего не делай, цени свой труд.
Поэтому, думаю это неплохо, делитесь своим мнением в комментариях и ставьте реакции 👍🔥 если согласны.
👍95🔥27😁2👎1
Что выведет консоль?
console.log(typeof null)
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 | #практика
CodeSnap — плагин VSCode, предназначенный для создания красивых скриншотов кода.
Основные возможности: Выбор участка кода, Настройка внешнего вида и Экспорт в различные форматы.
Чтобы понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина.
@code_ready | #практика
👍77🔥21😁2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Запрос разрешения и отправка уведомлений
Этот код позволяет запрашивать разрешение пользователя на отправку уведомлений и создавать уведомление с заданным текстом и изображением при получении разрешения.
@code_ready | #обучение #js
Этот код позволяет запрашивать разрешение пользователя на отправку уведомлений и создавать уведомление с заданным текстом и изображением при получении разрешения.
<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
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание анимации spinner
Этот код представляет собой анимированный спиннер, который может использоваться для индикации загрузки или выполнения определенного процесса.
@code_ready | #обучение #css
Этот код представляет собой анимированный спиннер, который может использоваться для индикации загрузки или выполнения определенного процесса.
<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
🔥29👍14
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание разных типов курсора
В CSS есть множество разных типов курсоров, и все они созданы с помощью одного свойства cursor. Оно определяет тип отображаемого курсора при наведении мыши на объект.
В этом посте, я показывал все типы курсоров которые существуют в css. А снизу пример кода, как использовать эти свойства.
@code_ready | #обучение #css
В 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 | #плагин
Error Lens — это мощный плагин для VSCode, который помогает улучшить вашу производительность при разработке, выявляя ошибки и предупреждения прямо в коде.
Он мгновенно выделяет ошибки, предупреждения и другие типы сообщений об ошибках прямо в редакторе, делая их более заметными и обеспечивая быстрый доступ к информации о них.
@code_ready | #плагин
👍60👎17🔥11
✅ Тег <q>
Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.
Этот тег особенно полезен, когда нужно выделить отдельное высказывание или фразу, без необходимости использовать целый абзац для цитирования.
@code_ready | #практика #html
Тег <q> в HTML используется для обозначения коротких цитат в тексте. Браузеры обычно отображают содержимое этого тега в кавычках, что помогает пользователю легко определить цитату в контексте текста.
Этот тег особенно полезен, когда нужно выделить отдельное высказывание или фразу, без необходимости использовать целый абзац для цитирования.
@code_ready | #практика #html
🔥53👍20👎1