Функция 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 | #полезности

Как общаться с заказчиками на фрилансе?

1. Правильно составляйте отклик: приводите примеры работ по теме заказчика и описывайте релевантный опыт. 2. Указывайте сроки, размер и форму оплаты. Если не соответствуете каким-либо требованиям из вакансии, говорите об этом и предлагайте альтернативы.
3. Обсуждайте задачу до старта. Спрашивайте о целях, ожиданиях, способах оценки. Выясните, кто будет согласовывать вашу работу.
4. Заключайте договор. Прописывайте задачи, сроки, цены, порядок приема и оплаты.
5. Оговаривайте ход работы, чтобы не допускать конфликтов. Указывайте, когда вы на связи, сколько правок внесете бесплатно. Отвечаете ли за результат, если вдруг клиент решит исправить вашу работу.
6. Задавайте вопросы. Добивайтесь полного понимания задачи, чтобы не переделывать всё в итоге.
7. Структурируйте мысли. Упрощайте восприятие информации: используйте абзацы, списки, выделяйте главное. Объясняйте решения и ищите компромиссы. Аргументируйте точку зрения фактами, приводите примеры.
8. Думайте не о том, как отстоять свое мнение, а как решить проблему клиента.
9. Не записывайте голосовые. Когда они необходимы, обозначайте их тему. Излагайте мысль коротко и в одном сообщении.
10. Предупреждайте о срывах сроков. Вероятно, вы потеряете клиента, но разойдетесь мирно.
11. Отказывайтесь от задачи, когда заказчик хамит, постоянно нарушает договоренности. Не слышит и не идет на компромиссы, обесценивает.

#фриланс | #полезности

Макет для тренировок (грузовые перевозки)
Не для новичков

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

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

JS Задача: Палиндромная сумма

Описание: Напишите функцию на JavaScript, которая принимает на вход два числа и возвращает сумму всех палиндромных чисел в диапазоне между этими двуми числами (включая их самих, если они палиндромы).

#домашка

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

Лучшие статьи @free_html_lessons:
1. Как общаться с заказчиками на фрилансе?
2. Доступность. Aria label
3. Атрибут rel="noreferrer"

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

Лучшие дизайн вакансии @job_webdesign:
1. Product Designer
2. Web-дизайнер
3. Junior+ UX/UI Дизайнер

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

Инструменты для верстальщика

Читать 🧑‍💻

#полезности

Вендорные префискы

Читать 🧑‍💻

#css | #теория

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану.

Часто применяется для того, чтобы можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие. (Например, делая что-то с помощью js)

Значения:
auto - Восстанавливает функциональность элемента по умолчанию.

none - Предотвращает события мыши и щелчки по элементу.

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

Оптимизация верстки

Да, мы все знаем про сжатие изображений, минификацию CSS/JS и ленивую загрузку, но есть нюансы, которые часто упускаются даже опытными разработчиками.

1. Микрооптимизации в CSS
Используйте will-change для элементов, которые будут анимироваться. Это помогает браузеру заранее подготовиться к изменениям.

Избегайте @import в CSS — это блокирует загрузку стилей. Лучше использовать несколько <link> в HTML.

Минимизируйте использование * { } — универсальный селектор может сильно нагрузить браузер, особенно на больших страницах.

2. JavaScript: меньше — лучше
Современный JS (ES6+) часто более читаем, но не всегда эффективен. Например, forEach медленнее, чем классический for. В критичных к производительности местах лучше использовать старые добрые циклы.

Используйте requestAnimationFrame для анимаций вместо setTimeout или setInterval. Это обеспечивает более плавный рендеринг.

3. Доступность и семантика
Не забывайте про ARIA-атрибуты и семантические теги. Это не только для скринридеров, но и для SEO. Например, <section> с заголовком лучше, чем просто <div>.

Проверяйте контрастность цветов — это не только про доступность, но и про пользовательский опыт.

4. Инструменты для анализа
Lighthouse в Chrome DevTools — это классика, но попробуйте также WebPageTest для более глубокого анализа.

Используйте CSS Stats, чтобы понять, насколько ваши стили избыточны.

5. Неочевидные моменты
Шрифты: подключайте только те начертания, которые используете. И помните про font-display: swap;, чтобы текст отображался сразу.

SVG: минифицируйте их с помощью SVGO и вставляйте инлайном, если это возможно. Это уменьшает количество HTTP-запросов.

#полезности

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

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

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

JS Задача: Глубокое клонирование объекта

Описание:
Реализуйте функцию deepClone(obj), которая создает глубокую копию объекта. Изменения в клонированном объекте не должны затрагивать исходный.

Пример
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
clone.b.c = 42;
console.log(original.b.c); // 2
console.log(clone.b.c);    // 42

#домашка