В чём разница между .call и .apply?
Методы .call() и .apply() используются для вызова функции с заданным значением this, а также для передачи аргументов в функцию. Основная разница между ними заключается в способе передачи аргументов.
Метод .call() принимает список аргументов, переданных в функцию через запятую. В то же время, метод .apply() принимает массив аргументов, переданных в функцию.
Вот пример использования методов .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. В первом случае мы передаем два аргумента в функцию через запятую, а во втором случае мы передаем массив из двух аргументов в функцию.❤19
React Programming: The Big Nerd Ranch Guide (2023)
Используйте React для написания надежного, декларативного кода, создания корзин и других функций электронной коммерции, оптимизации производительности, а также для получения опыта компонентного и сквозного тестирования. Попутно вы научитесь использовать такие инструменты, как Create React App, функциональные компоненты, хуки, ESLint, React Router, вебсокеты, библиотека React Testing Library и Cypress.
👉 @frontendInterview
Используйте React для написания надежного, декларативного кода, создания корзин и других функций электронной коммерции, оптимизации производительности, а также для получения опыта компонентного и сквозного тестирования. Попутно вы научитесь использовать такие инструменты, как Create React App, функциональные компоненты, хуки, ESLint, React Router, вебсокеты, библиотека React Testing Library и Cypress.
👉 @frontendInterview
🔥6
String incrementer
Создайте функцию, которая принимает строку. Если на конце строки есть цифра, то она должна увеличиться на 1. Если цифры нет, то к строке приписывается цифра 1.
Примеры:
👉 @frontendInterview
Создайте функцию, которая принимает строку. Если на конце строки есть цифра, то она должна увеличиться на 1. Если цифры нет, то к строке приписывается цифра 1.
Примеры:
foo -> foo1
foobar23 -> foobar24
foo0042 -> foo0043
foo9 -> foo10
foo099 -> foo100👉 @frontendInterview
😱6❤3
Для чего используется атрибут 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