🚀 Запускаем серию уроков по HTML и CSS!

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

👨‍💻 Что ждет в этом видео?
1. Введение в Web: Понимание основ интернета и из чего состоят веб-страницы
2. Основы HTML и CSS: Что такое HTML и CSS, и как они позволяют нам создавать веб-сайты
3. Работа в VSCode: Узнайте, как настроить и использовать одну из самых популярных сред разработки — Visual Studio Code.
4. Создание первой HTML страницы: Пошаговое руководство по созданию первой страницы, основы HTML и из чего состоит любой HTML-файл

🖥️ Под капотом каждого сайта лежат HTML и CSS, и мы уверены, что наш курс станет отличным стартом в мир создания веб-сайтов.

🔗 https://youtu.be/bL9X21WNjTc

Не забудьте подписаться на канал, чтобы не пропустить новые видео! Оставляйте ваши вопросы и комментарии под видео — мы обязательно на них ответим.

💡 Поделитесь этим видео с друзьями, которые также интересуются веб-разработкой!

Разбираемся с потерей контекста this в JavaScript! 🔍

Мы часто сталкиваемся с вопросами о this на собеседованиях по JavaScript. Сегодня мы разберем типичный случай, когда контекст this теряется и как это повлияет на код.

📝 Рассмотрим пример:

function show() {
  console.log(this);
}

const obj = {show: show};
obj.show();

В этом случае this внутри функции show будет указывать на объект obj, так как функция вызывается как метод этого объекта.

Так, базово можно сказать, что this – это объект «перед точкой». Если при вызове функции что-то есть перед точкой, то это “что-то” будет доступно как this внутри этой функции.

🔄 Но что происходит, если вызовем функцию не как метод объекта?

const showAgain = obj.show;
showAgain(); // this потерян, в консоль выведется undefined или глобальный объект

Здесь this теряется, потому что мы вызываем функцию show не через объект, а напрямую. “Чего-то перед точкой” больше нет, и наш this будет потерян.

⏲ Сложный случай с setTimeout:

setTimeout(obj.show, 1000);

Хотя кажется, что show все еще метод объекта obj, контекст теряется. Это происходит потому, что setTimeout вызывает функцию show как обычную функцию, а не как метод объекта.

Мы можем немного развернуть данную запись, если попробуем описать функцию setTimout:

function setTimout(handler, timeout) {
 // что-то происходит
 // ...
 // и наконец где-то вызывается handler
 handler();
 // ...
}

Таким образом наш переданный метод obj.show будет вызываться где-то внутри setTimout как handler, без “чего-то” перед точкой, а значит потеряет свой контекст.

📖 Чтение по теме:
Почему это происходит:
- Понимаем ссылочные типы
Обсуждения и подробности this:
- Методы объекта и контекст 'this'
- Habr: Детально о this
- TheCode: Как работает this в JavaScript

🧹 Если вам, как и мне, надоело постоянно очищать кеш во время локальной разработки, то вот отличный инструмент, чтобы забыть об этой проблеме раз и навсегда 😏

Перейдите в Network -> Disable cache

☝️Обратите внимание, что этот режим работает только при открытой вкладке DevTools.

🎉 Новый урок курса по HTML и CSS уже на канале!

👨‍🏫 Во втором видео мы подробнее поговорим о текстовых тегах, отступах, переносах строк и форматировании текста.

🔍 Что вы узнаете:
1️⃣ Текстовые теги: начнем с базовых тегов для текстов.
2️⃣ Отступы и переносы строк: узнаем, как браузеры обрабатывают пространство и переносы.
3️⃣ Форматирование: рассмотрим примеры, как правильно форматировать текст с помощью HTML.

🔗 https://youtu.be/stDBzvNXWj0

Подписывайтесь на канал, чтобы не пропустить следующие видео!

🔍 Вспоминаем наш последний разговор о контексте this в JavaScript и углубляемся в детали глобального объекта! 🌐

Когда мы вызываем такую функцию:

function show() {
  console.log(this);
}
show();

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

🔹 Что такое глобальный объект?
Это специальный объект, который доступен в любом уголке нашего JavaScript-кода. В браузере он известен как window, в Node.js — как global.

🔸 Как работать с глобальными объектами?
1. Можно обращаться к свойствам глобального объекта напрямую:

alert("Привет"); // то же самое, что и
window.alert("Привет");

2. Глобальные переменные, объявленные через var, автоматически становятся частью window в браузере:

var gVar = 5;
alert(window.gVar); // 5

3. Глобальный объект помогает проверить поддержку современных возможностей языка:

if (!window.Promise) {
  alert("Ваш браузер очень старый!");
}

❓ Но как быть, если код должен работать и в браузере, и на сервере?
Ключ к решению — globalThis, универсальный объект, который справедлив для любой среды исполнения. Он имеет полную поддержку во всех последних версиях браузеров, и вы также можете использовать его в Node.js 12+. Подробнее можно прочитать здесь: MDN globalThis.

Были ли вы в курсе о globalThis? Поделитесь в комментариях 📬

👨‍💻 Разбираемся в том, нужны ли фронтенд-разработчику знания за пределами его специализации? 🖥️

Некоторые могут считать, что фронтенд-разработчикам не нужно углубляться в бэкенд или другие аспекты. Но вот 3 ключевые области, которые помогут вам стать профессионалом на все руки:

1. Понимание HTTP

HTTP не просто склеивает фронтенд и бэкенд; это основа, которая определяет, как работает веб. Знания кодов ответов, структуры запроса, работы с куками и сессиями могут сильно упростить разработку и отладку приложений.

2. Хостинг, DNS, сервера, CDN

Чтобы ваше приложение ожило в интернете, необходимо понимать, как устроены доменные имена, настройка DNS, что такое хостинг и как работают сети доставки контента (CDN). Эти знания также помогут вам оптимизировать загрузку страниц и обеспечить лучший пользовательский опыт.

3. CI/CD

Системы непрерывной интеграции и развертывания играют ключевую роль в современной разработке. Они позволяют автоматически тестировать и развертывать ваш код каждый раз при внесении изменений. Зная принципы CI/CD, вы сможете ускорить процесс разработки и повысить его надежность.

💭 Но это еще не все! Фронтенд-разработчики часто изучают и другие аспекты, такие как безопасность веб-приложений, основы SEO и принципы UX/UI.

👉 А какие дополнительные навыки вы считаете важными для фронтенд-разработчика? Поделитесь своим опытом в комментариях!

🚀 Новое видео уже на канале! 🚀

Сегодня мы продолжаем погружение в мир HTML и CSS! В этом видео мы уделим особое внимание заголовкам и расскажем о полезных одиночных тегах, а также о комментариях в коде.

🔍 Что вы узнаете:
- Зачем нужны заголовки и как они помогают поисковым системам.
- Как отличаются теги от <h1> до <h6> и их правильное использование.
- Изучим одиночные теги, такие как <br> и <hr>.
- Полезные советы по работе с комментариями в HTML.

👀 Видео наполнено не только теорией, но и практическими примерами, которые помогут вам лучше усвоить материал!

Смотрим видео 🎬 и улучшаем свое понимание HTML и CSS!

🌐 Ускоряем загрузку сайтов с помощью технологии CDN

Для веб-разработчиков, а особенно фронтендеров, крайне важно понимать роль и функциональность CDN (Content Delivery Network).

CDN – это глобальная сеть серверов, которая помогает ускорить загрузку веб-страниц за счёт кэширования контента в многочисленных местоположениях по всему миру. Данные серверы специально оптимизированы для максимально быстрой доставки статического контента – такого как CSS-файлы, JavaScript, изображения и видео.

🛠 Технические аспекты работы CDN:
- Кэширование контента: CDN хранит временные копии статического контента с вашего основного сервера. Это значит, что когда пользователь запрашивает вашу страницу, контент загружается не с оригинального сервера, а с ближайшего к нему CDN сервера, что значительно уменьшает время загрузки.
- Минимизация задержек: CDNs уменьшают физическое расстояние между серверами и пользователем, что существенно снижает задержки при передаче данных.
- Load Balancing: CDN использует систему балансировки нагрузки, которая позволяет распределять трафик между несколькими серверами, что уменьшает риск перегрузок и увеличивает доступность сайта.
- Улучшенная безопасность: CDN могут смягчить последствия DDoS-атак, т.к. оснащены механизмами защиты от них. Это обеспечит дополнительную стабильность вашего сайта.

📢 Если вам интересно узнать, как можно настроить CDN для вашего сайта, ставьте реакции и пишите в комментарии!

Когда читаешь документацию через переводчик, и не такое встретишь 🙊

Пишите в комментариях, каких покемонов видели вы 🙃

State-менеджеры vs React Hooks: Когда и что лучше использовать? 🔄

В мире React часто возникает вопрос о том, когда лучше использовать state-менеджеры, а когда хватит и хуков. Понимание того, какой инструмент выбрать для управления состояниями в вашем приложении, может существенно повлиять на его архитектуру и эффективность.

📌 Когда использовать React Hooks?
Хуки хорошо подходят для управления локальным состоянием компонента или состоянием, связанным с отображением, например:
- Тема интерфейса (темная/светлая)
- Языковые настройки
- Скрытие и раскрытие блоков (например, в FAQ)
- Локальное значение, введенное в текстовое поле, которое используется внутри компонента Input до передачи данных на сервер/в другие компоненты выше

Хуки позволяют использовать какое-то состояние внутри конкретного компонента. Кроме этого вы можете писать свои кастомные хуки, что делает код проще и чище.

📌 Когда лучше использовать State-менеджеры?
Для глобального управления состоянием, связанным с бизнес-логикой приложения, целесообразнее использовать state-менеджеры. К таким сценариям относятся, например:
- Информация о пользователе
- Данные о товарах, добавленных в избранное
- Фильтры и настройки поиска
- Пагинация и навигация по спискам данных

State-менеджеры, такие как Redux или MobX, позволяют централизовать управление состоянием и упростить обмен данными между различными частями приложения без необходимости проброса пропсов через множество уровней или использования React Context в сложных сценариях.

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

Посмотрим, что на этот вопрос ответил сам ИИ🤔

как думаете, лукавит?🦊

🔍 В прошлом посте мы разбирались, что такое CDN. За подробным сравнением популярных CDN переходите по ссылке: https://habr.com/ru/articles/557048/

Подключение CDN, например, Amazon CloudFront, происходит достаточно просто. Вот подробная инструкция по настройке: https://aws.amazon.com/ru/getting-started/hands-on/deliver-content-faster/

В инструкциях вы столкнётесь с упоминанием S3. Что это такое?

Amazon S3 (Simple Storage Service) — это масштабируемое облачное хранилище данных, предоставляемое Amazon Web Services (AWS). Его можно использовать для хранения всевозможных данных: от картинок, скриптов и шрифтов для веб-сайта до бэкапов и данных для аналитики или машинного обучения.

Однако не только Amazon использует технологию S3. Яндекс, к примеру, предлагает совместимое по API решение. Подробнее о Yandex Object Storage можно почитать здесь: https://yandex.cloud/ru/docs/glossary/s3

Каждый объект в S3 имеет:
- Уникальный идентификатор (URL-адрес объекта)
- Метаданные (размер, тип и дополнительные пользовательские данные)
- Содержимое (сами данные в различных форматах)

Данные в S3 группируются в бакеты, каждый из которых имеет уникальный URL. По итогу ваш ресурс будет доступен по такому адресу - https://storage.yandexcloud.net/<имя бакета>/<имя идентификатора>

В сочетании с CDN, S3 используется для хранения и доставки статических файлов на вебсайтах, что ускоряет загрузку страниц и улучшает пользовательский опыт.

🌐 Новое видео на канале! Углубляемся в HTML и CSS: Всё о списках

🔢 Что вы узнаете:
- Как создать нумерованный и ненумерованный список
- Как организовывать вложенные списки

🎬 Не забудьте подписаться на канал, чтобы не пропустить множество полезных уроков по веб-разработке

🔗 Смотреть видео

Давайте поговорим о добавлении анимации плавного появления элемента с помощью CSS-свойства transition.

CSS-переходы позволяют анимировать изменения свойств. Вы задаёте свойство для анимации и определяете способ анимации. Когда свойство изменяется, браузер самостоятельно обработает это изменение и отрисует анимацию.

🚫 Однако, если попытаться анимировать свойство display, например:

.animated {
  transition: display 3s;
}

Вы обнаружите, что это не работает. Почему? Дело в том, что не все CSS-свойства можно анимировать. Свойство должно поддерживать интерполяцию своего значения, другими словами иметь диапазон промежуточных значений между двумя состояниями.

Свойство display не анимируется, потому что между display: block; и display: none; нет промежуточных значений. Однако opacity, изменяющееся от 0 до 1, допускает промежуточные значения (например, 0.1, 0.2 и так далее) и отлично подходит для плавных переходов.

💡 Таким образом мы можем переписать наш пример и использовать opacity для плавного появления или исчезновения элемента:

.animated {
  transition: opacity 3s;
  opacity: 1;
}
.animated.hide {
  opacity: 0;
}

🔗 Детальнее про CSS-переходы и анимируемые свойства можно прочитать на MDN:
- Использование CSS-переходов
- Анимируемые CSS-свойства

🌟 Улучшаем Анимации в CSS! 🌟

Продолжаем разговор про анимации, и сегодня рассмотрим, как сделать ваши анимации ещё более захватывающими с использованием CSS-свойства animation и ключевого слова @keyframes.

🔹 Что может @keyframes?
Это мощный инструмент, который позволяет задавать мультистадийные анимации с точным контролем изменений свойств на каждом этапе. В качестве простого примера сделаем так, чтобы некоторый элемент появлялся снизу и плавно входил в поле зрения пользователя:

@keyframes appearFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(0);
    }
}

🔹 Применение анимации:
Чтобы оживить ваш элемент этой анимацией, просто используйте:

.element {
    animation-name: appearFromBottom;
    animation-duration: 1s;
    animation-timing-function: ease;

    /* Или коротко */
    animation: appearFromBottom 1s ease;
}

💥 Вот и всё! Теперь элемент «выплывает» снизу, становясь видимым к середине анимации и плавно достигая конечной точки. Использование функции ease делает анимацию более интересной, поскольку переход становится нелинейным, добавляя плавность в начале и конце анимации.

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

⏩ Не забудьте, что любое свойство, анимированное через @keyframes, должно поддерживать интерполяцию, так же как в случае с transition.

🔍 Оптимизация изображений с тегом <picture>

Изображения являются неотъемлемой частью любого современного сайта. Сегодня мы поглубже поговорим о том, как можно улучшить их загрузку, адаптивность и производительность с помощью тега <picture>.

Обычно мы сталкиваемся с проблемой, что разные устройства требуют разных размеров изображений. Например, нет смысла загружать на смартфон фото с огромным разрешением, предназначенное для больших мониторов. Тег <picture> идеально подходит для таких случаев.

✅ Вот как работает этот тег:

- Внутрь тега вставляется <img> с базовым изображением.
- Добавляются один или несколько тегов <source>, каждый из которых может указывать разные источники изображений для разных условий (например, ширины экрана).

Пример кода:

<picture>
    <source media="(min-width:1024px)" srcset="img_big.jpg">
    <source media="(max-width:465px)" srcset="img_small.jpg">
    <img src="img.jpg" alt="Awesome image" style="width:auto;">
</picture>

✨ В итоге на устройствах с шириной экрана до 465 пикселей загрузится img_small.jpg, а на ширине более 1024 пикселей - img_big.jpg. Для всех остальных случаев будет использоваться img.jpg.

Также, <picture> отлично подходит для использования современных форматов изображений, как WEBP, который может значительно уменьшить размер файлов, но поддерживается не всеми браузерами. Атрибут type у тега <source> позволяет указать формат изображения, так что браузер сможет загрузить изображение только если поддерживает данный формат. Это предотвращает загрузку несовместимого контента и ускоряет отображение страницы:

<picture>
    <source type="image/webp" media="(min-width: 1024px)" srcset="img_large.webp">
    <source type="image/jpg" media="(min-width: 1024px)" srcset="img_large.jpg">
    <img src="img.jpg" style="width: 100%;">
</picture>

🔗 Узнать больше про использование тега <picture> вы можете в статье на Medium: HTML <picture> tag in practice.

Как видите, тег <picture> является мощным инструментом для создания адаптивных и оптимизированных интернет-ресурсов. Внедряйте его в свои проекты для улучшения пользовательского опыта и скорости загрузки страниц!