👨🏻‍💻 Как реализовать отложенную загрузку изображений?

Да, такие вопросы фронтенд разработчик должен щёлкать, как семечки.

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

Lazy Loading — техника, которая позволяет отложить загрузку изображений, находящихся за пределами видимой области. Для этого можно использовать библиотеки, такие как Lazysizes или Intersection Observer API.

Атрибуты data- — Вы можете использовать атрибут data- вместе с атрибутом src, чтобы отложить загрузку изображения:

<img data-src="path-to-image.jpg" alt="Alt text">

Затем вы можете использовать JavaScript, чтобы загрузить изображение, когда оно станет видимым:

const img = document.querySelector('img');
img.setAttribute('src', img.getAttribute('data-src'));

Использование CSS для изменения размера изображения, уменьшения его качества или изменения его формата. Например, вы можете использовать свойство “background-image” для загрузки изображения как фон элемента:

.element {
background-image: url(path-to-image.jpg);
}

Frontend Головного Мозга

Что такое Event loop и как он работает?
это механизм в JavaScript, который позволяет выполнить асинхронный код и обрабатывать события, такие как клики мыши, нажатия клавиш и таймеры.

Event loop работает внутри JavaScript движка и состоит из двух основных фаз: фаза синхронизации и фаза выполнения задач. В фазе синхронизации обрабатываются синхронные операции, такие как выполнение кода и обработка событий, которые были помещены в очередь в прошлый цикл. В фазе выполнения задач обрабатываются асинхронные операции, такие как колбэки таймеров и событий.

Когда JavaScript выполняет код, все синхронные операции помещаются в очередь. Когда очередь становится пустой, Event loop проверяет, есть ли в очереди асинхронные операции. Если есть, они выполняются в порядке их добавления в очередь.

Например, если мы вызываем setTimeout с задержкой в 1 секунду, функция setTimeout помещает колбэк функцию в очередь и устанавливает таймер на 1 секунду. Когда таймер сработает, колбэк функция будет добавлена в очередь, и Event loop выполнит ее.

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

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

Frontend Головного Мозга

👨🏻‍💻 В чём разница между .call и .apply?

Методы .call() и .apply() используются для вызова функции с заданным значением this, а также для передачи аргументов в функцию. Основная разница между ними заключается в способе передачи аргументов.

Метод .call() принимает список аргументов, переданных в функцию через запятую. В то же время, метод .apply() принимает массив аргументов, переданных в функцию.

Вот пример использования методов .call() и .apply():

function greet(name, age) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

greet.call(null, 'John', 30);
// выводит: Hello, my name is John and I am 30 years old.

greet.apply(null, ['Jane', 25]);
// выводит: Hello, my name is Jane and I am 25 years old.

В обоих случаях мы вызываем функцию greet() с this равным null. В первом случае мы передаем два аргумента в функцию через запятую, а во втором случае мы передаем массив из двух аргументов в функцию.

Frontend Головного Мозга

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

Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 18 по 23 апреля.

За 6 дней вы:

— Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика;
— Напишете в тренажёрах свои первые строчки кода и увидите как изменяется страница сайта в реальном времени;
— Поймёте нравится ли вам веб-разработка.

Кстати, а ещё мы разыграем курс по HTML и СSS среди участников марафона.


Вступить в кружок.

Сколькими способами можно интегрировать CSS в веб-страницу?
CSS можно интегрировать тремя способами:

Встроенный: атрибут Style можно использовать для применения CSS-элементов HTML.
Встроенное: элемент Head может иметь элемент Style, внутри которого можно разместить код.
Связанный/импортированный: CSS можно поместить во внешний файл и связать с ним через элемент ссылки.

Frontend Головного Мозга

Казань, 25 и 26 апреля приглашаем на митапы IT Talk by Sber 🤩


Поговорим о технических вызовах в разработке и поделимся опытом решения сложных задач. Вас ждут 4 хардовых доклада от экспертов Сбера и 2 больших софтовых выступления для тимлидов.

Программа 25 апреля 👇

✔️ Виталий Куценко «Optional — применение здорового человека»
✔️ Алексей Кардашов «Управление UI через backend в стеке jvm с использованием composite screen platform»
✔️ Евгений Ляшенко «Проверка на глубокие знания языка: как к такому подготовиться?»
✔️ Антон Непша «Когда синдром самозванца — не синдром»

Программа 26 апреля 👇

✔️ Владислав Хачатуров «О дивном новом мире ИТ-инженера без розовых очков глазами руководителя»
✔️ Арина Штерн, Пётр Белкин, Антон Штульберг «Профессиональные сообщества: зачем инженеру и руководителю»

Встречаемся:

👉 25 апреля в 17:30 в ИТ-парке им. Башира Рамеева (ул. Спартаковская, 2).
👉 26 апреля в 17:30 в Школе 21 (ул. Спартаковская, 2к2).

Ждём всех крутых разработчиков Казани!

Регистрируйтесь по ссылке.

Какие преимущества и недостатки имеют внешние таблицы стилей?
Выгоды:

Один файл можно использовать для управления несколькими документами, имеющими разные стили.
Несколько элементов HTML могут иметь множество документов, которые могут иметь классы.
Для группировки стилей в сложных ситуациях используются такие методы, как селектор и группировка.
Demerits:

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


Frontend Головного Мозга

Каждый день мы просыпаемся и идём к компьютеру писать код, однако скоро майские праздники и придётся сделать сложный выбор между любимым делом и шашлыком.

И чтобы хоть немного накинуть очков написанию кода — мы запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы в зависимости от набранных баллов.

К слову о призах:

1 место — профессия «Фронтенд-разработчик» или «JavaScript-разработчик» на выбор (в ускоренном формате).
2-3 место — фронтенд- или ui-инженерия, или любой из курсов для новичков на выбор.
4-10 место — любой мидловый или джуновый курс на выбор.
11-30 место — доступ к тренажёрам до конца июня 2024 г.
31-100 место — доступ к тренажёрам до конца мая 2024 г.

Ну и не менее приятное — все участники акции получат скидки на все продукты HTML Academy

Присоединяйтесь

Обсудите достоинства и недостатки встроенных таблиц стилей?
Достоинства встроенных таблиц стилей:

В одном документе можно создать несколько типов тегов.
В сложных ситуациях стили можно применять с помощью методов «Селектор» и «Группировка».
Дополнительная загрузка не требуется.
Недостатки встроенных таблиц стилей:

Невозможно контролировать несколько документов.


Frontend Головного Мозга

Alfa Frontend Meetup #3
Митап frontend-сообщества про архитектуру.

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

Когда: 25 апреля, 19:00.
Где: Москва, пр. Андропова, д. 18, к. 3 и онлайн.

Вас ожидают доклады спикеров: 

▪️Алексей Охрименко, техлид в Yandex Cloud Tracker, расскажет о статистическом анализе зависимостей.
▪️Алексей Николаев, Teamlead в Sendsay.ru, разберёт плюсы и минусы монорепозиториев.
▪️Степан Иваньков, главный frontend-разработчик в «Альфа-Банке», расскажет о том, как перевести 45 приложений на webpack module federation и ничего не сломать.


Регистрируйтесь

Больше полезного в комьюнити @alfa_frontend

erid: LjN8K8g9X
Реклама. АО «Альфа-Банк». ИНН 7728168971.

❓Вышел React 18 — что нового для разработчиков?

Расскажем на бесплатном практическом уроке «Обзор нововведений в React 18» от OTUS. Спикер — опытный разработчик и преподаватель.

На вебинаре мы разберем изменения, которые были добавлены в React 18, познакомимся с ними поближе и посмотрим на новые фичи и API.

Встречаемся 25 апреля в 19:00 мск в преддверии старта курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS!

👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://clck.ru/3AGxuo

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Что означает CSS-селектор?
Строковый эквивалент HTML-элементов, с помощью которых объявляются объявления или их набор, и представляет собой ссылку, на которую можно ссылаться для связывания HTML и таблицы стилей, — это селектор CSS.


Frontend Головного Мозга

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


Frontend Головного Мозга

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


Frontend Головного Мозга