Основные методологии управления проектами: от Agile до Waterfall

Читать 👨‍💻

#полезнаястатья

Макет для тренировки (superpeer)

Перейти к макету 🧑‍💻

#практика | #макет

Задача на html и css: Grid и адаптив

Создайте сетку из трёх колонок, которая:
- На экранах шириной менее 768px становится одноколоночной.
- На экранах от 768px до 1200px отображается в две колонки.
- На экранах шире 1200px отображается в три колонки.

Подсказка: Используйте grid-template-columns и медиазапросы.

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Методологии управления проектами
2. PostCSS
3. Progressive Enhancement

Лучшие фронтенд вакансии @job_webdev:
1. HTML верстальщик
2. Frontend разработчик
3. HTML верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер
2. Веб-дизайнер
3. UX-UI дизайнер

#лучшеезанеделю

Что такое Vite и как его настроить?

Читать 👨‍💻

#полезности

Атрибут disabled

С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.

Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
button, input, option, select, textarea, optgroup, filedset

Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.
Атрибут срабатывает не только на самом элементе, но и на всех его потомках.

💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.

#html | #полезности

Функция debounce в JavaScript
При работе с событиями, такими как scroll или resize, часто возникает проблема частого вызова обработчика. Решение – использовать debounce, чтобы ограничить количество вызовов функции.

Пример функции debounce:

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
window.addEventListener('resize', debounce(() => {
  console.log('Изменён размер окна');
}, 300));

Как работает debounce?
- Каждый раз, когда событие (например, resize) срабатывает, текущий таймер очищается с помощью clearTimeout.
- Новый таймер запускается на заданную задержку (delay).
- Если событие больше не срабатывает в течение времени задержки, переданная функция (func) вызывается с заданными аргументами (args).

Где использовать:
- Поиск с автоподсказками.
- Подгрузка контента при прокрутке.
- Оптимизация событий ввода.

#полезности

Cтартовый шаблон для верстки и js проектов на vite (scss, PostCSS)

Ссылка на github 👨‍💻

#полезности

Макет для тренировки (smakk)

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Оптимизация изображения в вебе

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

Вопросы:
- Какие форматы изображения лучше использовать для веба?
- Какое HTML-свойство можно использовать для подгрузки изображений только при их появлении в зоне видимости?

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Cтартовый шаблон
2. Функция debounce
3. Что такое Vite

Лучшие фронтенд вакансии @job_webdev:
1. Frontend Developer
2. HTML верстальщик
3. React верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI дизайнер
2. Web дизайнер
3. Помощник графического дизайнера

#лучшеезанеделю

Атрибут rel="noreferrer"

Читать 👨‍💻

#html | #полезности

Мета теги Apple

Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.

Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.

3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">

4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">

5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">

Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.

Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.


#html | #полезности