Для чего используется атрибут srcset в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.
Вы должны использовать атрибут srcset, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например:
Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125).
srcset решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, - а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей.
👉 @frontendInterview
Вы должны использовать атрибут srcset, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например:
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt=""> указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:500 / 320 = 1.5625Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и 500w соответствующее small.jpg будет отображено в браузере.
1000 / 320 = 3.125
2000 / 320 = 6.25
Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125).
srcset решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, - а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей.
👉 @frontendInterview
👍17
Какую область видимости имеют переменные, объявленные с помощью ключевого слова let?
Anonymous Quiz
4%
Модульную
11%
Функциональную
73%
Блочную
12%
Глобальную
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Как я стал фронтендером
1. Смотрел уроки на ютубе
2. Делал портфолио на гитхаб
3. Начал читать Frontend || Vollex
Frontend Vollex выжимает воду из курсов, книг, видеоуроков и заботливо делится самым главным. Гайды, готовый код, тесты и никакой копипасты.
Вы знаете, что делать: @vollex_frontend
1. Смотрел уроки на ютубе
2. Делал портфолио на гитхаб
3. Начал читать Frontend || Vollex
Frontend Vollex выжимает воду из курсов, книг, видеоуроков и заботливо делится самым главным. Гайды, готовый код, тесты и никакой копипасты.
Вы знаете, что делать: @vollex_frontend
👎11👍2😁1
Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <noscript> для подключения JS ставить перед </body>? Знаете ли вы исключения?
Размещение <link> внутри <head>
Размещение <link> внутри тега <head> необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа - это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.
Размещение <noscript> прямо перед </body>
Теги <noscript> блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.
Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <noscript> будет расположен внутри <head>, является добавление атрибута defer.
👉 @frontendInterview
Размещение <link> внутри <head>
Размещение <link> внутри тега <head> необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа - это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.
Размещение <noscript> прямо перед </body>
Теги <noscript> блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.
Исключением является случай, когда в вашем скрипте содержится document.write(). Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором <noscript> будет расположен внутри <head>, является добавление атрибута defer.
👉 @frontendInterview
👍11❤1🤔1
🔥6
Когда срабатывает событие change?
Anonymous Quiz
74%
При каждом изменении значения элемента
20%
Только при потере фокуса элемента
6%
При клике на элемент
👎13❤4👍3
🔥 Внимание!
Вот Ваше Приглашение на ТОП-конференцию по фронтенду!
FrontendConf2023 - это знаковое профессиональное мероприятие всего IT-коммьюнити, которое посвящено только актуальным вопросам разработки клиентской части web-пространств.
На FrontendConf2023 2 и 3 октября Вас ждут интересные и полезные доклады от звездных спикеров, реальные кейсы акул IT-компаний, мощный нетворкинг - Вы легко сможете пообщаться с ТОПами индустрии, а также крутые мастер-классы и интересные активности на стендах партнеров.
Посмотрите фотоотчет #FC2022 и прочувствуйте атмосферу нашей конференции❤️
📌Переходите на сайт мероприятия - изучайте расписание докладов и бронируйте свой билет✅, чтобы успеть оказаться вместе с нами 2 и 3 октября на FrontendConf2023.
Вот Ваше Приглашение на ТОП-конференцию по фронтенду!
FrontendConf2023 - это знаковое профессиональное мероприятие всего IT-коммьюнити, которое посвящено только актуальным вопросам разработки клиентской части web-пространств.
На FrontendConf2023 2 и 3 октября Вас ждут интересные и полезные доклады от звездных спикеров, реальные кейсы акул IT-компаний, мощный нетворкинг - Вы легко сможете пообщаться с ТОПами индустрии, а также крутые мастер-классы и интересные активности на стендах партнеров.
Посмотрите фотоотчет #FC2022 и прочувствуйте атмосферу нашей конференции❤️
📌Переходите на сайт мероприятия - изучайте расписание докладов и бронируйте свой билет✅, чтобы успеть оказаться вместе с нами 2 и 3 октября на FrontendConf2023.
👎2🔥2❤1
В чем преимущество использования стрелочных функций для метода в конструкторе?
Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение this устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, this всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной:
👉 @frontendInterview
Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение this устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, this всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной:
const Person = function (firstName) {
this.firstName = firstName;
this.sayName1 = function () {
console.log(this.firstName);
};
this.sayName2 = () => {
console.log(this.firstName);
};
};
const john = new Person('John');
const dave = new Person('Dave');
john.sayName1(); // John
john.sayName2(); // John
// У обычной функции значение `this` может быть изменено, но у стрелочной функции нет
john.sayName1.call(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
ohn.sayName2.call(dave); // John
john.sayName1.apply(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
john.sayName2.apply(dave); // John
john.sayName1.bind(dave)(); // Dave (потому что 'this' сейчас ссылается на объект dave)
john.sayName2.bind(dave)(); // John
var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (потому что 'this' сейчас ссылается на объект window)
var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John
Смысл заключается в том, что this можно изменить для обычной функции, но для стрелочных функций контекст всегда остается неизменным. Поэтому, даже если вы передаете стрелочную функцию в разные части вашего приложения, вам не нужно беспокоиться об изменении контекста.👉 @frontendInterview
👍21
Код, который умещается в голове: эвристики для разработчиков
Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.
👉 @frontendInterview
Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.
👉 @frontendInterview