Для чего отлично подойдут data-атрибуты?
До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data-атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.
На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.
👉 @frontendInterview
До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data-атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.
На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.
👉 @frontendInterview
В чем разница между тегами noscript, noscript async и noscript defer
noscript — отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
noscript async — скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
noscript defer — скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом <body>. Отложенный скрипт не должен содержать document.write.
Примечание: Атрибуты async и defer игнорируются, если у тега noscript нет атрибута src.
👉 @frontendInterview
noscript — отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
noscript async — скрипт будет извлечен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте async тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
noscript defer — скрипт будет извлечен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут defer обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом <body>. Отложенный скрипт не должен содержать document.write.
Примечание: Атрибуты async и defer игнорируются, если у тега noscript нет атрибута src.
👉 @frontendInterview
👍1
Что такое прогрессивный рендеринг?
Прогрессивный рендеринг — имя, данное технологиям, используемым для ускорения отрисовки страниц (в частности, уменьшение времени загрузки), чтобы показать пользователю контент как можно скорее.
Примеры технологий:
1. Ленивая загрузка картинок. Картинки на странице не загружаются все разом. JavaScript подгрузит картинки тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
2. Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события DOMContentLoaded или load, чтобы загрузить остальные ресурсы и контент.
3. Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать в этой статье.
Прогрессивный рендеринг — имя, данное технологиям, используемым для ускорения отрисовки страниц (в частности, уменьшение времени загрузки), чтобы показать пользователю контент как можно скорее.
Примеры технологий:
1. Ленивая загрузка картинок. Картинки на странице не загружаются все разом. JavaScript подгрузит картинки тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
2. Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события DOMContentLoaded или load, чтобы загрузить остальные ресурсы и контент.
3. Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать в этой статье.
Основы Redux (2018)
Современная разработка давно проходит по стандартам использования фреймворков, что обеспечивает приложения долголетием и безопасностью. Если вы знакомы с JavaScript, должны были слышать про самые популярные библиотеки - Angular, React и Redux. Это руководство расскажет об актуальной версии библиотеки Redux и познакомит вас с его популярными инструментами управления состоянием приложения.
👉 @frontendInterview
Современная разработка давно проходит по стандартам использования фреймворков, что обеспечивает приложения долголетием и безопасностью. Если вы знакомы с JavaScript, должны были слышать про самые популярные библиотеки - Angular, React и Redux. Это руководство расскажет об актуальной версии библиотеки Redux и познакомит вас с его популярными инструментами управления состоянием приложения.
👉 @frontendInterview
Посчитать повторения
Напишите функцию, которая принимает строку, убирает повторяющиеся буквы и возвращает число убранных букв.
Примеры:
👉 @frontendInterview
Напишите функцию, которая принимает строку, убирает повторяющиеся буквы и возвращает число убранных букв.
Примеры:
'abbbbc' => 'abc' # answer: 3
'abbcca' => 'abca' # answer: 2
'ab cca' => 'ab ca' # answer: 1👉 @frontendInterview
The Road to React with Firebase (2019)
Данная книга - это ваш путь к освоению React продвинутого уровня для создания веб-приложений на JavaScript с использованием Firebase. Firebase позволяет подключить ваше приложение на React к базе данных, работать с механизмами входа, выхода и регистрации, а также разрешать только определенным пользователям доступ к вашему приложению. Firebase имеет возможности хостинга и входа через Google, Facebook и многое другое. Все будет объяснено в книге при самостоятельном создании бизнес-приложения. Чтобы извлечь максимальную пользу из неё, вы должны быть знакомы с основами веб-разработки, включая HTML, CSS и JavaScript. Также необходимо знать термин API, потому что API часто используются для приложений, описанных в этой книге.
👉 @frontendInterview
Данная книга - это ваш путь к освоению React продвинутого уровня для создания веб-приложений на JavaScript с использованием Firebase. Firebase позволяет подключить ваше приложение на React к базе данных, работать с механизмами входа, выхода и регистрации, а также разрешать только определенным пользователям доступ к вашему приложению. Firebase имеет возможности хостинга и входа через Google, Facebook и многое другое. Все будет объяснено в книге при самостоятельном создании бизнес-приложения. Чтобы извлечь максимальную пользу из неё, вы должны быть знакомы с основами веб-разработки, включая HTML, CSS и JavaScript. Также необходимо знать термин API, потому что API часто используются для приложений, описанных в этой книге.
👉 @frontendInterview
Что такое «генератор»?
Генераторы — это функции, из которых можно «выходить», и в которые можно «входить» по мере необходимости. Их контекст (привязки переменных) сохраняется между сеансами «входа» в них.
Генераторы объявляют с использованием ключевого слова function*. Такая функция, при её первом вызове, не выполняет код, возвращая особый объект, генератор, который позволяет управлять её выполнением. Для получения очередного значения, выдаваемого генератором, нужно вызвать его метод next().
Благодаря этому выполняется код функции до тех пор, пока в нём не встретится ключевое слово yield, возвращающее значение.
Функцию-генератор можно вызывать сколько угодно раз. Каждый раз будет возвращаться новый генератор. Но каждый генератор можно обойти лишь один раз.
Генераторы — это функции, из которых можно «выходить», и в которые можно «входить» по мере необходимости. Их контекст (привязки переменных) сохраняется между сеансами «входа» в них.
Генераторы объявляют с использованием ключевого слова function*. Такая функция, при её первом вызове, не выполняет код, возвращая особый объект, генератор, который позволяет управлять её выполнением. Для получения очередного значения, выдаваемого генератором, нужно вызвать его метод next().
Благодаря этому выполняется код функции до тех пор, пока в нём не встретится ключевое слово yield, возвращающее значение.
Функцию-генератор можно вызывать сколько угодно раз. Каждый раз будет возвращаться новый генератор. Но каждый генератор можно обойти лишь один раз.
function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
let iterationCount = 0;
for (let i = start; i < end; i += step) {
iterationCount++;
yield i;
}
return iterationCount;
}Когда стоит использовать генераторы?
Если в двух словах описать основные полезные возможности генераторов, то окажется, что они заключаются в следующем:
1. Код, в котором используется генератор, сам определяет момент получения следующего значения. Генератор отвечает только за возврат значений, управление им осуществляется извне.
2. Существуют асинхронные генераторы. Они позволяют работать с асинхронными потоками данных.
Главное в генераторах — это то, что получить следующее значение, возвращаемое генератором, можно только тогда, когда оно нужно в коде, использующем генератор. Генераторы не возвращают всё за один раз. В некоторых ситуациях эта их особенность может оказаться весьма удобной.
👉 @frontendInterview
Если в двух словах описать основные полезные возможности генераторов, то окажется, что они заключаются в следующем:
1. Код, в котором используется генератор, сам определяет момент получения следующего значения. Генератор отвечает только за возврат значений, управление им осуществляется извне.
2. Существуют асинхронные генераторы. Они позволяют работать с асинхронными потоками данных.
Главное в генераторах — это то, что получить следующее значение, возвращаемое генератором, можно только тогда, когда оно нужно в коде, использующем генератор. Генераторы не возвращают всё за один раз. В некоторых ситуациях эта их особенность может оказаться весьма удобной.
👉 @frontendInterview
This media is not supported in your browser
VIEW IN TELEGRAM
Как стать фронтенд разработчиком в 2021?
Канал "На фронте - javanoscript, html, css" собрал для Вас подборку материалов, которая поможет Вам стать фронтенд разработчиком.
Как учится веб-разработке в 2021 году — план развития начинающего веб-разработчика в 2021. Что учить, в какой последовательности.
Что нужно знать о популярных JS-фреймворках — история создания и особенности популярных фреймворков.
Шпаргалка по JS-методам для работы с DOM — поможет вам разобраться в метожах для работы с DOM
DevTools для «чайников» — руководство по использованию инструментов разработчика
Еще больше крутых и полезных материалов ищите на нашем канале.
Канал "На фронте - javanoscript, html, css" собрал для Вас подборку материалов, которая поможет Вам стать фронтенд разработчиком.
Как учится веб-разработке в 2021 году — план развития начинающего веб-разработчика в 2021. Что учить, в какой последовательности.
Что нужно знать о популярных JS-фреймворках — история создания и особенности популярных фреймворков.
Шпаргалка по JS-методам для работы с DOM — поможет вам разобраться в метожах для работы с DOM
DevTools для «чайников» — руководство по использованию инструментов разработчика
Еще больше крутых и полезных материалов ищите на нашем канале.
Век из года
Напишите функцию, которая принимает год в числовом формате и возвращает век, соответствующий этому году.
Примеры:
👉 @frontendInterview
Напишите функцию, которая принимает год в числовом формате и возвращает век, соответствующий этому году.
Примеры:
1705 --> 18
1900 --> 19
1601 --> 17
2000 --> 20👉 @frontendInterview