Атрибут 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

#домашка

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

Лучшие статьи @free_html_lessons:
1. Оптимизация верстки
2. Pointer events
3. Инструменты для верстальщика

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

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

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

Полезные плагины для PostCSS

PostCSS — это мощный инструмент для работы с CSS, который позволяет автоматизировать множество задач. Вот подборка плагинов, которые помогут вам писать чистый, современный и оптимизированный код:

1. Autoprefixer
Автоматически добавляет вендорные префиксы для поддержки старых браузеров. Больше не нужно вручную писать -webkit-, -moz- или -ms-.
👉 https://github.com/postcss/autoprefixer

2. CSSNano
Минификатор CSS, который удаляет лишние пробелы, комментарии и оптимизирует ваш код для production.
👉 https://github.com/cssnano/cssnano

3. PostCSS Preset Env
Позволяет использовать современные возможности CSS (например, кастомные свойства, вложенные правила и т.д.), которые будут автоматически преобразованы для поддержки старых браузеров.
👉 https://github.com/csstools/postcss-preset-env

4. PostCSS Import
Позволяет импортировать CSS-файлы прямо в ваш основной файл стилей, что упрощает организацию кода.
👉 https://github.com/postcss/postcss-import

5. PostCSS Nesting
Добавляет поддержку вложенных правил, как в Sass или Less. Теперь можно писать вложенные селекторы без препроцессоров!
👉 https://github.com/jonathantneal/postcss-nesting

6. PostCSS Custom Properties
Позволяет использовать CSS-переменные (кастомные свойства) даже в браузерах, которые их не поддерживают.
👉 https://github.com/postcss/postcss-custom-properties

7. PostCSS Sort Media Queries
Автоматически сортирует медиа-запросы, что упрощает чтение и поддержку кода.
👉 https://github.com/solversgroup/postcss-sort-media-queries

8. Stylelint
Не совсем плагин, но мощный линтер для CSS, который помогает находить ошибки и соблюдать стиль кода. Интегрируется с PostCSS.
👉 https://github.com/stylelint/stylelint

9. PostCSS Assets
Упрощает работу с ассетами (изображения, шрифты и т.д.), позволяя автоматически управлять путями и кэшированием.
👉 https://github.com/borodean/postcss-assets

10. PostCSS Pxtorem
Автоматически преобразует пиксели (px) в rem, что полезно для создания адаптивных интерфейсов.
👉 https://github.com/cuth/postcss-pxtorem

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

Intersection Observer

Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:

Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране!');
    } else {
      console.log('Элемент исчез с экрана!');
    }
  });
});

Выбираем элемент для отслеживания:

const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // Элемент должен быть виден на 50%
  rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});

Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:

const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    button.classList.add('sticky');
  } else {
    button.classList.remove('sticky');
  }
}, { threshold: 1 });
observer.observe(button);

Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.

#js

Псевдокласс :is() в CSS

Читать 🧑‍💻

#css | #теория

Псевдокласс :where() в CSS

Читать 🧑‍💻

#css | #теория