👩‍💻 Тег select

Select в HTML используется для создания выпадающих списков или множественных вариантов выбора.

Для <select> атрибут size может принимать значения, которые указывают, сколько строк элементов будет одновременно видно в списке.

size="1" — отображает только одну видимую строку, как в обычном списке.

size="3" — показывает сразу три видимые строки, превращая <select> в список, в котором можно прокручивать больше вариантов.

📣 Code Ready | #тег

👩‍💻 Вопрос с собеседования

Как использовать модули в JavaScript?

Ответ:

1. Экспортирование модулей: Позволяет делать функции, объекты или переменные доступными для других файлов. Используется export для экспорта нескольких элементов из модуля.

// utils.js
export function add(a, b) {
  return a + b;
}
export const pi = 3.14159;

2. Импортирование модулей: Позволяет использовать ранее экспортированные элементы. Используется import для импорта отдельных элементов из модуля.

// main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159

3. Экспорт по умолчанию: Используется для экспорта одного основного элемента из модуля. Это может быть функция, класс или объект. Используется export default для этого.

// math.js
export default function multiply(a, b) {
  return a * b;
}

4. Импорт по умолчанию: Осуществляется без фигурных скобок. Можно дать импортируемому элементу любое имя.

// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6

5. Динамический импорт: Позволяет загружать модули асинхронно, что полезно для загрузки модулей по требованию. Используется import() для динамического импорта.

// main.js
async function loadModule() {
  const { add } = await import('./utils.js');
  console.log(add(5, 10)); // 15
}
loadModule();

6. Импорт всего содержимого модуля:
Иногда нужно импортировать все содержимое модуля под одним именем. Используется import * as для этого.

// main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159

📣 Code Ready | #техсобес

flexboxfroggy — игра, которая поможет вам выучить CSS-flexbox. Тут нужно писать нужные свойства во встроенном редакторе для решения головоломок.

📌 Ссылочка: flexboxfroggy.com

📣 Code Ready | #ресурсы

👩‍💻 Полезные горячие клавиши VSCode

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

• Ctrl + Backspace — Удаляет всё слово стоящее перед курсором.

• Ctrl + Delete — Удаляет всё слово стоящее после курсора.

📣 Code Ready | #клавиши

👩‍💻 Цвет курсора текста

Свойство caret-color в CSS позволяет управлять цветом мигающего курсора в текстовых полях, таких как <input>, <textarea> и элементы с атрибутом contenteditable.

Оно может принимать различные цветовые значения:

• Стандартный цвет — red, blue...
• HEX-коды — #ff0000, #00ff00
• RGB — rgb(255, 0, 0)
• HSL — hsl(120, 100%, 50%)

📣 Code Ready | #свойство #css

Cursor AI — нейросеть для разработки, представляющая собой интеллектуальный редактор кода, который помогает за счет подсказок, автоматизации и интеграции с расширениями VS Code.

📌 Ссылочка: https://www.cursor.com/

📣 Code Ready | #ресурс

📖 ECMAScript 6 для разработчиков

Практическое руководство по использованию новых возможностей ES6, предназначенное для разработчиков, желающих улучшить свой JavaScript-код.

Автор: Николас Закас
Год: 2017

⬇️ Скачать книгу

📣 Code Ready | #книга

👩‍💻 Тег meter

Тег meter в HTML используется для отображения значения в определённом диапазоне, например, прогресса, уровня заряда или рейтинга.

Для <meter> атрибуты min и max задают нижний и верхний пределы отображаемого диапазона, что позволяет визуально показать уровень значения.

• min="0" max="100" — устанавливает диапазон от 0 до 100.

• value="75" — устанавливает текущее значение, например, 75 из 100.

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

📣 Code Ready | #тег

Web Skills — платформа, ориентированная на развитие навыков веб-разработки для всех уровней — от новичков до опытных специалистов. Здесь собраны все навыки для веб-разработчика с ссылками для изучения темы.

📌 Ссылочка: andreasbm.github.io

📣 Code Ready | #ресурс

👩‍💻 Автоматическое переименование тегов в HTML

Auto Rename Tag — это полезное расширение для VS Code, которое значительно упрощает работу с HTML и XML-кодом. Этот плагин автоматически переименовывает закрывающий тег при изменении открывающего.

📣 Code Ready | #плагин