Gulp vs Webpack
Сегодня речь пойдет о таких инструментах, как Gulp и Webpack. Мы, наконец-то, поставим точку в этом вопросе и, я надеюсь, больше не будем к нему возвращаться.

#webpack #gulp #js #javascript

Итак, Gulp и Webpack. Основы. Давайте начнем с определений. Изначально, эти инструменты позиционируются создателями, как инструменты для решения несколько разных задач. Webpack позиционируется, как мощный комбайн-бандлер, предназначенный для удобной разработки JS Application и одностраничных приложений. Кроме того, он имеет множество полезных дополнений для решения повседневных задач - препроцессоры, картинки и прочее, которые являются лишь бонусами к основе. Gulp - это таск-ранер, упрощающий жизнь, благодаря автоматизации выполнения каких-то рутинных задач. В принципе, на этом можно было бы остановиться, ведь мы поняли из определений, что это разные инструменты и, в общем-то, они предназначены для разных задач, если бы не одно НО. Почему-то эти два инструмента каким-то странным образом попадают на один график в Google Trends и вызывают бурление в профессиональной среде, Webpack начинают использовать даже там, где не стоит задачи разработки приложения, в угоду трендам, а Gulp несправедливо причисляют к списку инструментов на вымирание.

Webpack. Базовая сборка проекта.
В этом видео разберем сборку проекта на Webpack. Рассмотрим, как собрать все js в один, сжать файлы, собрать css, минифицировать изображения, и многое другое.

#ityoutubersru #webpack #js #javascript

Webpack - Полный видеокурс за 3 часа [2020]
#webpack #js #javascript #vladilenminin

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

#techinterview #jstasks #javascript #js #javascripttasks #tasks #capitals

Написать функцию, которая выводит числа от 1 до n (n - передаваемый аргумент)

Условие:
Напишите функцию, которая выводит в консоль числа от 1 до i, где i - целое число. Дополнительно, функция должна выводить foo вместо чисел кратных 3, должна выводить bar вместо чисел, кратных 5 и должна выводить foobar вместо чисел, одновременно кратных и 3, и 5

#techinterview #jstasks #javascript #js #javascripttasks #tasks #foobar

#8 Front-end. Вопросы на собеседовании

Видеокаст «Front-end. Вопросы на собеседовании».
В данном видео будут вопросы и ответы к собеседованиям на позицию Junior и Middle Front-end разработчик.
Видеокаст представлять из себя коллекцию технических вопросов, которые можно получить на интервью.
Удобная, хорошо организованная шпаргалка всегда у вас под рукой!

#yauhenk #webdev #interview #js #javascript #html #css #frontend #git #github #html #techinterview

Как проверить в JavaScript, есть ли у объекта свойство

Из-за динамической природы JavaScript вам может потребоваться проверить, существует ли в объекте конкретное свойство. В этом посте вы узнаете о трех распространенных способах проверки наличия свойства в объекте.

1. Метод hasOwnProperty()

У объекта JavaScript есть специальный метод object.hasOwnProperty(propName), который возвращает логическое значение, указывающее, имеет object ли свойство propName. В следующем примере hasOwnProperty() определяется наличие свойств:

const hero = {
name: 'Batman'
};

hero.hasOwnProperty('name'; // => true
hero.hasOwnProperty('realName'; // => false


Свойство name существует в объекте hero: таким образом, hero.hasOwnProperty(‘name’) возвращается true.


2. Оператор in

Оператор in в propName in object также определяет, существует ли свойство propName в object. Давайте используем оператор in, чтобы определить существует ли свойство:

const hero = {
name: 'Batman'
};

'name' in hero; // => true
'realName' in hero; // => false

‘name’ in hero оценивается, как ожидается, true, потому что hero содержит свойство name. Однако hero не содержит свойства с именем ‘realName’. В результате ‘realName’ in hero оценивается, как false.

3. Сравнение с undefined

Если вы обращаетесь к несуществующему свойству объекта, результат будет undefined. Давайте рассмотрим пример:

const hero = {
name: 'Batman'
};

hero.name; // => 'Batman'
hero.realName; // => undefined


hero.realName оценивается undefined, потому что свойство realName отсутствует. Теперь вы можете понять идею: давайте сравним с undefined, чтобы определить наличие свойства.

const hero = {
name: 'Batman'
};

hero.name !== undefined; // => true
hero.realName !== undefined; // => false


Даже если свойство name существует (но имеет значение undefined), hero.name !== undefined оценивается как false: что неправильно указывает на отсутствие свойства.

4. Заключение

Есть 3 основных способа проверить, существует ли свойство. Первый способ — вызвать object.hasOwnProperty(propName). Метод возвращает true, если propName существует в object, и false в противном случае. Обратите внимание, что hasOwnProperty() выполняет поиск только в пределах собственных свойств объекта.

Второй подход использует оператор propName in object. Оператор оценивается true для существующего свойства, и false в противном случае. Оператор in ищет наличие свойств как в собственных, так и в унаследованных свойствах объекта.

Наконец, вы можете просто использовать object.propName !== undefined и сравнивать с undefined напрямую.



Источник: //dmitripavlutin.com


#js #javascript #hasownproperty #object

Progressive enhancement и Graceful Degradation

Progressive enhancement.

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

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


Graceful Degradation.

У нас этот термин переводится как «постепенная деградация». Понятие достаточно широкое, в общем можно сказать, что это способность системы продолжать своё функционирование в случае отказа некоторых её компонентов.
Чаще всего Graceful Degradation понимается, как практика построения вашей веб-функциональности таким образом, чтобы она обеспечивала определенный уровень пользовательского опыта в более современных браузерах, но она также будет изящно деградировать до более низкого уровня пользовательского опыта в старых браузерах. Этот нижний уровень не так приятно использовать для посетителей вашего сайта, но он по-прежнему предоставляет им базовую функциональность, для использования которой они пришли на ваш сайт - для них ничего не ломается.

#degradation #enhancement #progressiveenhancement #gracefuldegradation #mobilefirst #ui

Функция поиска минимального и максимального значения в массиве.

Возвращать она должна массив, содержащий два этих элемента. Даже если исходный массив содержит только одно значение, итоговый результат должен содержать два элемента.

#techinterview #jstasks #javascript #js #javascripttasks #tasks #minMax

#7 Front-end. Вопросы на собеседовании

Видеокаст «Front-end. Вопросы на собеседовании».
В данном видео будут вопросы и ответы к собеседованиям на позицию Junior и Middle Front-end разработчик.
Видеокаст представлять из себя коллекцию технических вопросов, которые можно получить на интервью.
Удобная, хорошо организованная шпаргалка всегда у вас под рукой!

#yauhenk #webdev #interview #js #javascript #html #css #frontend #git #github #techinterview