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

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

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

В данном видео-курсе мы с вами рассмотрим основные нововведения, которые появились в стандартах ES7-ES9 (ECMAScript). Те есть, мы разберём различные методы и фичи, которые существенно упрощают и ускоряют разработку на нативном JavaScript, как синхронном, так и асинхронном.

#javascript #js #ecmascript

JavaScript для самых маленьких

Видеокурс по самым базовым вещам в JavaScript для самых маленьких.

В данном видео вы узнаете о том, что такое JavaScript, а также основные его моменты.

https://www.youtube.com/playli....st?list=PLDmWuBfh49Z

#learnjavascript #learnjs #youtube

Введение в регулярные выражения

Регулярные выражения (RegExp) - это очень эффективный способ работы со строками.

Составив регулярное выражение с помощью специального синтаксиса вы можете:

искать текст в строке
заменять подстроки в строке
извлекать информацию из строки

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

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

Регулярные выражения реализованные в UNIX, таких как grep, sed и популярных текстовых редакторах, начали набирать популярность и были добавлены в язык программирования Perl, а позже и в множество других языков.

JavaScript, наряду с Perl, это один из языков программирования в котором поддержка регулярных выражений встроена непосредственно в язык.
Сложно, по полезно

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

Регулярные выражения сложно писать, сложно читать и сложно поддерживать/изменять.

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

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

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

В JavaScript регулярные выражения это объект, который может быть определён двумя способами.

Первый способ заключается в создании нового объекта RegExp с помощью конструктора:

<code>
const re1 = new RegExp( 'hey' )
</code>

Второй способ заключается в использовании литералов регулярных выражений:

<code>
const re1 = /hey/
</code>

Вы знаете что в JavaScript есть литералы объектов и литералы массивов? В нём также есть литералы regexp.

В приведённом выше примере hey называется шаблоном. В литеральной форме он находится между двумя слэшами, а в случае с конструктором объекта, нет.

Это первое важное отличие между двумя способами определения регулярных выражений, остальные мы увидим позже.

Как они работают?

Регулярное выражение, которое мы определили выше как re1, очень простое. Оно ищет строку hey без каки-либо ограничений: строка может содержать много текста, а слово hey находиться где-то в середине и регулярное выражение сработает. Строка может содержать только слово hey и регулярка опять сработает.

Это довольно просто.

Вы можете попробовать протестировать регулярное выражение с помощью метода RegExp.test(String), который возвращает логическое (boolean) значение:

<code>
re1.test( 'hey' ) // ✅
re1.test( 'blablabla hey blablabla' ) // ✅

re1.test( 'he' ) // ❌
re1.test( 'blablabla' ) // ❌
</code>

В примере выше мы просто проверили удовлетворяет ли "hey" шаблону регулярного выражения, который храниться в re1.

Это проще простого, но вы уже знаете много о регулярных выражениях.


#regexp #javascript #js

Пишем свой калькулятор на JavaScript
Создаем собственный калькулятор на JavaScript с помощью JS, HTML и CSS.
Вначале, как говорится, была идея, то есть ТЗ самому себе - написать калькулятор на чистом JS, чтобы количество кода было минимальным.
Ну, и конечно, чтобы калькулятор выглядил прилично.
Итак, поехали.
Поскольку экран и кнопки на калькуляторе находятся не подряд друг за другом, то разделим наш калькулятор не несколько областей:

1. Область ввода данных. За эту область будет отвечать текстовое поле < input >;
2. Область цифровых кнопок 0-9;
3. Область функциональных кнопок: +, /, *, =, AC;
4. Кнопка подсчета операции
5. Теперь попробуем все эти области отобразить в коде:

====
<textarea id=result>0</textarea>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<button>=</button>
<button>C</button>
<button>#</button>
====

Немного громоздко. А если представить, что кнопок будет 200-300, то такой код будет просто лесом одиковых строк с минимальными различиями. Это выглядит не очень хорошо. Добавим для этого кода обёртку div и немного css

====
<div id="calc">
<textarea id=result>0</textarea>
<button>1</button>
...
</div>
====

Посмотреть вживую - здесь: https://jsfiddle.net/raman_shastapalau/hpvkos30/2/

Все равно, получается громоздко. Чтобы уменьшить количество кода, воспользуемся div-ами, в которые будем возвращать данные из массивов. И облагородим всё это с помощью css
====
<div id="wrap">
<div id="calc">
<textarea id="result">0</textarea>
<div id="numpad">
<div id="buttonNum"></div>
<div id="buttonOper"></div>
</div>
<div id="buttonCalc"></div>
</div>
</div>
====

Вот что получилось - каркас калькулятора. Пока еще без кнопок, ну разве что с макетом кнопки "="
https://jsfiddle.net/raman_shastapalau/hpvkos30/4/
В массивы мы положим все кнопки - цифры, функциональные и кнопку "="". Кнопки < button >1</ button > вообще можем убрать - их чуть ниже добавим с помощью JS

====
let buttons = ['7', '8', '9', '4', '5', '6', '1', '2', '3', '.', '0','AC'];
let operations = ['/', '*', '-', '+'];
let calculations = ['='];
====

И с помощью метода getElementById будем возвращать необходимые данные в документ со следующими id: buttonCalc и result

====
let textArea = document.getElementById( 'result' );
let calculation = document.getElementById( 'buttonCalc' );
====

Теперь, пройдемся по массиву buttons с помощью метода forEach и затем будем отрисовывать кнопки, оборачивая их в div, добавляя класс btn.

====
buttons.forEach(function (button) {
let buttonElement = document.createElement( 'div' );
buttonElement.className = 'btn';
buttonElement.innerHTML = button;
buttonNum.appendChild(buttonElement);
});
====

Далее пройдемся по массивам с функциональными кнопками и кнопке "="
====
operations.forEach(function (operation) {
let operationElement = document.createElement( 'div' );
operationElement.className = 'operation';
operationElement.innerHTML = operation;
buttonOper.appendChild(operationElement);
});

calculations.forEach(function (calculation) {
let calculationElement = document.createElement( 'div' );
calculationElement.className = 'calculation';
calculationElement.innerHTML = calculation;
buttonCalc.appendChild(calculationElement);
});
====

Вот что в итоге получилось - вывели данные из массива в div элементы: https://jsfiddle.net/raman_shastapalau/hpvkos30/5/
Кнопки правда не работают, но для этого нужно написать обработчик событий на нажание кнопки с помощью onButtonClick. Поскольку пишем калькулятор, то в нем возможно несколько нажатий функциональных кнопок. Поэтому пройдемся по вариантам нажатий кнопок с помощью else if
====
function onButtonClick(e) {
// e - MouseEvent (получает информацию о клике)
if (e.target.innerHTML === 'c' ) {
// При нажатии кнопки "с", стирается все из текстового поля
textArea.innerHTML = '0';
} else if (e.target.innerHTML === '=' ) {
// При нажатии кнопки "=", происходит вычисление значения с помощью eval
textArea.innerHTML = eval(textArea.innerHTML);
} else if (textArea.innerHTML === '0' ) {
// Если textarea содержит только "0", то стереть "0" и записать значения кнопки в текстовое поле
textArea.innerHTML = e.target.innerHTML;
} else {
// Добавление значения кнопки в текстовое поле
textArea.innerHTML += e.target.innerHTML;
}
}
====

#js #javascript #jsexamples

Инструменты управления пакетами и зависимостями

- Bower — разработка Twitter, которая помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Она предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.
- Npm — диспетчер пакетов Node.js. Пакеты могут использоваться как для фронтенда, так и для бэкенда. Npm является системой управления пакетами для JavaScript и самым большим реестром программного обеспечения в мире.
- Yarn — инструмент, который приобрёл популярность благодаря Google, Facebook, Tilde и Exponent. Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.
- Duo вобрал в себя лучшее из Browserify, Component и Go, превратив разработку фронтенда в быстрый и простой процесс. Основная идея Duo заключается в упрощении написания модульных компонентов и создания масштабных веб-приложений быстро и безболезненно.

#bower #npm #yarn #duo

Инструменты управления версиями
- В последние годы Git стала широко используемой системой контроля версий как для небольших, так и для крупных проектов. Эта бесплатная утилита обеспечивает отличную скорость работы и эффективность. Её популярность объясняется распределённой системой и различными типами элементов управления, а также промежуточной областью, где версии могут быть просмотрены и отформатированы непосредственно перед завершением фиксации.
- Инструмент Subversion или SVN приобрёл огромную популярность, и он по-прежнему широко используется в проектах с открытым исходным кодом и такими платформами, как Python Apache или Ruby. Этот CVS поставляется со множеством функций, позволяющих управлять различными операциями (переименование, копирование, удаление и т. д.), слияниями, блокировкой файлов и многим другим.

#git #subversion #svn

Инструменты аналитики и оптимизации кода
- JSLint — это аналитический веб-инструмент для проверки качества кода JavaScript. Как только он обнаруживает проблему в источнике, он возвращает сообщение с описанием проблемы и приблизительным местоположением в коде. JSLint способен анализировать некоторые нормы стиля и раскрывать синтаксические ошибки и структурные проблемы.
- JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде, кроме того, JSHint — форк от JSLint. Основная цель этого инструмента статического анализа кода — помощь разработчикам JavaScript, работающим над сложными программами. Он способен обнаруживать ошибки синтаксиса, неявное преобразование типов данных или отсутствие переменной. Однако он не может определить скорость и правильность работы вашего приложения, как и не сможет определить проблемы с памятью в вашем приложении. JSHint — форк от JSLint.
- ESLint – это линтер с открытым исходным кодом для веб-приложений JSX и JavaScript. Он помогает обнаруживать сомнительные шаблоны или находить код, который не соответствует конкретным стилям. Это позволяет разработчикам обнаруживать ошибки в JS-коде без его выполнения, тем самым экономя время. Будучи написанным на Node.js, инструмент пред
- Flow — статический контролёр кода для JavaScript, разработанный компанией Facebook. Он использует аннотации статического типа для проверки кода на предмет ошибок. Типы — параметры, установленные разработчиками, а Flow проверяет ваше программное обеспечение на соответствие требованиям.

#flow #eslint #jslint #jshint

Инструменты безопасности
- Snyk — коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
- Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на Node.js.
- RetireJS — это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
- Gemnasium — это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
- OSSIndex поддерживает различные экосистемы (Java, JavaScript и .NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.

#snyk #nodesecurityproject #retirejs #gemnasium #ossindex

Инструменты отладки

Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.

- JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
- Chrome Dev Tools — набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
- ng-inspector — кроссбраузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
- Augury — расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.

#javascriptdebugger #chromedevtools #ng-inspector #augury