Что делает HTTP/2 по сравнению с HTTP/1.1?
Anonymous Quiz
7%
Убирает необходимость в кэше браузера
31%
Ускоряет DNS-запросы
50%
Позволяет загружать несколько ресурсов одновременно по одному соединению
12%
Уменьшает размер HTML-файлов
Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
#практика
var objSelect = document.getElementById("Mobility");
//Set selected
setSelectedValue(objSelect, "10");
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
// самый простой способ
document.getElementById("mySelect").value = "banana";
#практика
JS Вопрос:
console.log( typeof [].prototype );
console.log( typeof [].prototype );
Anonymous Quiz
11%
undefined
60%
object
7%
string
9%
Ошибка
13%
Посмотреть ответы
JS Вопрос:
Как получить значение дата аттрибута data-price элемента el?
Как получить значение дата аттрибута data-price элемента el?
Anonymous Quiz
51%
let price = el.data.get("price");
7%
let price = el.data.set("price");
12%
let price = el.dataget.price;
22%
let price = el.dataset.price;
8%
Посмотреть ответы
Задача: "Визуализация алгоритма сортировки пузырьком""
Создайте интерактивную визуализацию сортировки пузырьком. Пользователь должен видеть:
Исходный массив в виде столбцов разной высоты
Анимацию сравнения и перестановки элементов
Кнопки "Старт" и "Новый массив"
Требования:
Генерация массива:
При нажатии "Новый массив" генерируется массив из 10 случайных чисел (от 20 до 200)
Числа отображаются как вертикальные столбцы с высотой, пропорциональной значению
Визуализация:
Элементы, которые сравниваются, подсвечиваются разными цветами
Перемещение элементов плавно анимируется (500ms)
Каждый шаг алгоритма должен быть виден
Алгоритм:
Реализуйте сортировку пузырьком
Добавьте задержку между шагами (300-500ms)
#домашка
Создайте интерактивную визуализацию сортировки пузырьком. Пользователь должен видеть:
Исходный массив в виде столбцов разной высоты
Анимацию сравнения и перестановки элементов
Кнопки "Старт" и "Новый массив"
Требования:
Генерация массива:
При нажатии "Новый массив" генерируется массив из 10 случайных чисел (от 20 до 200)
Числа отображаются как вертикальные столбцы с высотой, пропорциональной значению
Визуализация:
Элементы, которые сравниваются, подсвечиваются разными цветами
Перемещение элементов плавно анимируется (500ms)
Каждый шаг алгоритма должен быть виден
Алгоритм:
Реализуйте сортировку пузырьком
Добавьте задержку между шагами (300-500ms)
#домашка
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Font-palette
2. Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
3. Медиа-запрос prefers-reduced-motion
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web-дизайнер
3. Senior web designer
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Font-palette
2. Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
3. Медиа-запрос prefers-reduced-motion
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend Developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web-дизайнер
3. Senior web designer
#лучшеезанеделю
Как не испортить вёрстку на последних этапах?
Ты сделал адаптив, всё работает, но вдруг при финальном тесте — БАЦ! Где-то поехали отступы, кнопка улетела, а текст выходит за границы блока. Знакомо?
Вот 5 частых ошибок, которые ломают вёрстку в последний момент:
1. Непредвиденные размеры контента
Никогда не ориентируйся только на тестовый текст. Добавь длинные заголовки, нестандартные картинки, проверь, как ведёт себя блок с max-content.
2. Игнорирование min-width и min-height
Если задал width: 100%, но контент вдруг исчезает — возможно, ему нужен min-width. Особенно это важно для интерактивных элементов.
3. Неправильное использование overflow
overflow: hidden может скрыть не только баги, но и важный контент. Проверь, нет ли неожиданных обрезаний внутри контейнеров.
4. Отсутствие проверки на разных устройствах
В браузере может быть всё идеально, но стоит открыть сайт на телефоне друга, и дизайн рушится. Проверь несколько размеров экранов + реальную технику.
5. Фиксированные height и width
Если ты жестко задаёшь height: 500px, а текст динамически загружается, рано или поздно он вылезет за границы. Используй min-height и flex-grow.
Как избежать таких проблем?
1. Тестируй контент на реальных данных
2. Проверяй адаптивность через DevTools
3. Открывай сайт на разных устройствах
4. Думай не только о "сейчас", но и о будущем наполнении
#полезнаястатья
Ты сделал адаптив, всё работает, но вдруг при финальном тесте — БАЦ! Где-то поехали отступы, кнопка улетела, а текст выходит за границы блока. Знакомо?
Вот 5 частых ошибок, которые ломают вёрстку в последний момент:
1. Непредвиденные размеры контента
Никогда не ориентируйся только на тестовый текст. Добавь длинные заголовки, нестандартные картинки, проверь, как ведёт себя блок с max-content.
2. Игнорирование min-width и min-height
Если задал width: 100%, но контент вдруг исчезает — возможно, ему нужен min-width. Особенно это важно для интерактивных элементов.
3. Неправильное использование overflow
overflow: hidden может скрыть не только баги, но и важный контент. Проверь, нет ли неожиданных обрезаний внутри контейнеров.
4. Отсутствие проверки на разных устройствах
В браузере может быть всё идеально, но стоит открыть сайт на телефоне друга, и дизайн рушится. Проверь несколько размеров экранов + реальную технику.
5. Фиксированные height и width
Если ты жестко задаёшь height: 500px, а текст динамически загружается, рано или поздно он вылезет за границы. Используй min-height и flex-grow.
Как избежать таких проблем?
1. Тестируй контент на реальных данных
2. Проверяй адаптивность через DevTools
3. Открывай сайт на разных устройствах
4. Думай не только о "сейчас", но и о будущем наполнении
#полезнаястатья
Что такое CSS Paint API и зачем оно нужно?
CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.
Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода
В файле paint.js:
registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети
#css | #полезности
CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.
Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода
.my-element {
background: paint(my-paint);
}if (CSS && CSS.paintWorklet) {
CSS.paintWorklet.addModule('paint.js');
}В файле paint.js:
class MyPaint {
static get inputProperties() {
return ['--circle-color'];
}
paint(ctx, size, properties) {
const color = properties.get('--circle-color').toString() || 'blue';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(size.width / 2, size.height / 2, 30, 0, 2 * Math.PI);
ctx.fill();
}
}registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети
#css | #полезности
Задача: Проверка на сбалансированные скобки
Описание
Напишите функцию, которая проверяет, являются ли все скобки в строке сбалансированными. Сбалансированные скобки означают, что каждая открывающая скобка имеет соответствующую закрывающую скобку того же типа, и скобки правильно вложены.
Пример
Указания
Функция должна поддерживать три типа скобок: круглые (), квадратные [] и фигурные {}.
Функция должна игнорировать все остальные символы в строке.
Строка может содержать любые символы, но интересуют только скобки.
Требования
Создайте функцию isBalanced с одним параметром — строкой, которую нужно проверить.
Функция должна вернуть true, если все скобки сбалансированы, и false в противном случае.
Объяснение
Создаём пустой массив stack для отслеживания открывающих скобок.
Создаём объект brackets, в котором ключи — это открывающие скобки, а значения — соответствующие закрывающие скобки.
Итерируемся по каждому символу строки.
Если символ является открывающей скобкой, добавляем соответствующую закрывающую скобку в стек.
Если символ является закрывающей скобкой, проверяем, совпадает ли он с последним элементом в стеке. Если нет, возвращаем false.
В конце возвращаем true, если стек пустой (все скобки были правильно закрыты), и false в противном случае.
#домашка
Описание
Напишите функцию, которая проверяет, являются ли все скобки в строке сбалансированными. Сбалансированные скобки означают, что каждая открывающая скобка имеет соответствующую закрывающую скобку того же типа, и скобки правильно вложены.
Пример
isBalanced("{[()]}") // true
isBalanced("{[(])}") // false
isBalanced("{[}") // falseУказания
Функция должна поддерживать три типа скобок: круглые (), квадратные [] и фигурные {}.
Функция должна игнорировать все остальные символы в строке.
Строка может содержать любые символы, но интересуют только скобки.
Требования
Создайте функцию isBalanced с одним параметром — строкой, которую нужно проверить.
Функция должна вернуть true, если все скобки сбалансированы, и false в противном случае.
// Примеры использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false
console.log(isBalanced("{[}")); // false
Объяснение
Создаём пустой массив stack для отслеживания открывающих скобок.
Создаём объект brackets, в котором ключи — это открывающие скобки, а значения — соответствующие закрывающие скобки.
Итерируемся по каждому символу строки.
Если символ является открывающей скобкой, добавляем соответствующую закрывающую скобку в стек.
Если символ является закрывающей скобкой, проверяем, совпадает ли он с последним элементом в стеке. Если нет, возвращаем false.
В конце возвращаем true, если стек пустой (все скобки были правильно закрыты), и false в противном случае.
#домашка
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. File picker
2. Что такое CSS Paint API
3. Задача: Проверка на сбалансированные скобки
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. HTML-верстальщик
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. UX/UI дизайнер
3. Web designer
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. File picker
2. Что такое CSS Paint API
3. Задача: Проверка на сбалансированные скобки
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. HTML-верстальщик
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. UX/UI дизайнер
3. Web designer
#лучшеезанеделю
Что делает метод requestAnimationFrame()?
Anonymous Quiz
37%
Запускает анимацию с фиксированной частотой кадров (например, 60 FPS)
13%
Работает как setInterval(), вызывая функцию через заданные промежутки времени
47%
Вызывает функцию перед отрисовкой следующего кадра, чтобы оптимизировать производительность
3%
Немедленно обновляет и перерисовывает весь DOM