Введение Данная статья будет полезна web разработчикам, которые начинают работать с языком JavaScript и знакомятся с инструментами разработки, встроенными в браузер. Умение «дебажить» JavaScript приложение является очень важным для веб разработчика, поскольку позволяет быстро найти причину ошибки в сценарии. Отладка в Google Chrome Отладка приложения – процесс обнаружения, локализации и устранения ошибок при помощи отладчика (инструмента встроенного в среду разработки или другое ПО). При отладке разработчик может узнать значения переменных и ход выполнения программы. Во всех современных браузерах есть инструменты, позволяющие разработчику анализировать работу веб приложения, в том числе и выполнять отладку JavaScript кода. Для того, чтобы открыть инструменты веб разработчика, в большинстве браузеров используется клавиша F12. В данной статье будет рассмотрена отладка JavaScript приложения на примере инструмента Web Inspector в браузере Google Chrome. Ниже приведен HTML код страницы с простым сценарием, который будет анализироваться с помощью Web Inspector. <div id="myDiv">div> <script>      var div = document.getElementById("mydiv");      var text = "";      for (var i = 0; i < 10; i++)      {         text += i + " ";      }    div.innerHTML = text; <script> Задача данного сценария - создать ряд цифр от 0 до 9-ти и отобразить их в элементе div на странице. Но код не срабатывает, и мы попробуем найти проблему, выполнив отладку.  Запуск Web Inspector и переключение в окно отладчика. Нажав на клавишу F12, мы получаем следующее окно в Google Chrome. Убедитесь в том, что выбран пункт меню Sources, который и позволяет произвести отладку. Окно отладки делится на три панели (отмечены на изображении цифрами):      1 – Панель файлов, подключенных к текущей странице, в которых есть JavaScript код.      2 – Панель, в которой будет отображаться JavaScript код выбранного файла.      3 – Панель с дополнительными настройками, упрощающими отладку. Установка точки останова или breakpoint Для того, чтобы начать отладку приложения, нужно определить, на каком этапе произойдет остановка выполнения сценария. Для этого, как и в большинстве других инструментах отладки, необходимо установить точку останова или breakpoint. Точка останова (breakpoint) – метка, которая указывает отладчику, на каком этапе выполнения приложения нужно сделать паузу. Для начала необходимо выбрать файл, в котором будет выполнятся отладка JavaScript (для этого дважды щелкаем по файлу index.html) После этого устанавливаем точку останова, нажимая на номер строки в центральной панели, которая отображает код выбранного файла. Точка останова отображается синим прямоугольником. Теперь, если обновить страницу, сценарий должен выполниться до 9 строки и остановиться. Далее мы сможем пошагово выполнять отладку приложения и отслеживать значения переменных в сценарии. Одно из преимуществ отладчика – отображение ошибок, выброшенных интерпретатором. На строке 14 выводится сообщение – Uncaught TypeError: Cannot set property ‘innerHTML’ of null (невозможно установить свойство ‘innerHTML’ для null). Это сообщение уже может помочь в решении проблемы сценария. Сценарий пытается обратиться к свойству на переменной div - сообщение говорит о том, что в этой переменной null и для null нельзя установить значения свойства. Если в переменной null - значит нужно искать код, который записывает в переменную значение. Пошаговая отладка JavaScript После установки breakpoint нужно начать отладку. Для этого достаточно обновить страницу (F5). При наличии точки останова сценарий остановился на строке №9 (об этом свидетельствует синяя подсветка строки). С помощью горячей клавиши F10 можно пошагово выполнять приложение и отследить значения переменных. При первом нажатии на F10 выполнение переходит на следующую строку кода и, наведя курсор на переменную div, мы сможем увидеть значение этой переменной. Отладчик показывает, что в переменной находится значение null. Ошибка на строке №9 вызвана отсутствием инициализации переменной div должным образом. После внимательного изучения этой строки мы находим ошибку – неправильно указанный id элемента “myDiv”. Дополнительную информацию по отладке JavaScript приложений Вы можете найти в бесплатном видео уроке https://itvdn.com/ru/video/javascript-advanced. В этом видео уроке будет идти речь не только об отладке, но и о работе с объектами и прототипами в JavaScript.

Что нового в Angular 4? Наконец, когда обновленная технология предстала перед нами, мы можем приступить к ее изучению! То, что новый представитель семейства Angular приобрел новый номер, свидетельствует об инновационных изменениях. Но все же встает вопрос: почему Angular 4, а не 3? Все достаточно просто: так как пакет маршрутизатора был уже представлен в версии 3.x, вместо того, чтобы вносить все нововведения в версию 3.0, а маршрутизатор перенести в 4.0, разработчик решил объединить все в версии 4.0. Не стоит волноваться касательно обновления Ваших приложений к новой версии Angular: так как тех самых инновационных изменений в принципе оказалось не слишком много, процесс установки не занял больше нескольких минут. Ничего особо страшного. Среди дополнительных требований стоит упомянуть версию TypeScript 2.1 или выше (раньше требовалась только 1.8+). К тому же некоторые элементы интерфейса были изменены или вовсе упрощены (редко используемые OpaqueTolen или SimpleChange). Плюс, TypeScript 2.1 и 2.2 приобрел целый ряд прекрасных особенностей, которые теперь поддерживаются в Angular 4. К примеру, в скором времени Вы сможете использовать TypeScript-опцию stringNullChecks. Итак, что именно позволяет нам новая версия Angular? Давайте углубимся!   Ahead of Time (AoT) компиляция: обновленный движок представлений Пожалуй, это наиболее значимое изменение, пусть даже Вы, как разработчик, не ощутите разницы. Как Вы, наверно, знаете, в режиме AoT Angular компилирует Ваши шаблоны во время сборки, после чего генерирует JavaScript код (в отличие от режима Just in Time, когда компиляция происходит во время выполнения приложения). Режим AoT обладает целым рядом преимуществ, например, в случае неправильного построения шаблона ошибка возникнет во время сборки, а не во время работы приложения, как раньше. Эта методика позволяет ускорить запуск приложения, так как генерация JS-кода уже произведена. Также Вам не нужно отправлять Angular-компиляторы пользователям, что в теории должно уменьшить размер пакетов. Почему в теории? Потому что, как правило, обратная сторона медали в том, что сгенерированный JavaScript-код обычно больше, чем нескомпилированные HTML-шаблоны. Таким образом, в большинстве приложений с использованием AoT размер пакета де-факто увеличивается. Разработчики Angular хорошо поработали над новым движком представлений, что позволило производить меньше кода при использовании Ahead of Time компиляции. Эффект на больших приложениях не заставил себя ждать. Без падений производительности. Ежели говорить в цифрах, размер пакета стал: С 499 КБ до 187 КБ (или с 68 КБ до 34 КБ после gzip) С 192 КБ до 82 КБ (или с 27 КБ до 16 КБ после gzip) Достаточно большая разница! Интересно отметить, что в своих дизайн-документах команда Angular сравнивает производительность (как в контексте времени выполнения, так и в контексте нагрузки на память) с базовой имплементацией (лучшим «дефолтным» кодом JS, который они только могут написать) Angular 2.x и InfernoJS (быстрая React-подобная имплементация). Универсальность Масса работы была проделана над универсальным проектом, позволяющим производить серверный рендеринг. Когда раньше этот тип проекта поддерживался в основном силами сообщества, теперь, начиная с Angular 4, поддержка приобрела официальный характер. Анимации Анимации теперь обзавелись собственным пакетом @angular/platform-browser/animations (одна из вещей, которая может быть изменена в процессе обновления). Что это значит? Это значит, что Вам больше не нужно нагружать пакеты ненужным кодом, если вы не используете анимации. Шаблоны ng-template вместо template Тэг template устарел. Вместо него используйте ng-template. Хотя и первый вариант все еще работает. Вообще, было немного странно использовать template, так как это реально существующий HTML-тэг. Теперь же Angular обзавелась собственным ng-template. В случае, если вы используете устаревший template, будет выдано соответствующее предупреждение: это в значительной мере упростит обнаружение подобного кода в проектах. Else С новой версией Angular 4 появилась возможность использовать оператор else: <div *ngIf="races.length > 0; else empty"><h2>Races</h2></div> <ng-template #empty><h2>No races.</h2></ng-template> As Еще одно синтаксическое нововведение. Ключевое слово as позволяет упростить синтаксис let. As позволяет хранить результат переменной шаблона для дальнейшего использование в элементе. К примеру, сия особенность может быть достаточно полезной для хранения коллекции: <div *ngFor="let pony of ponies | slice:0:2 as total; index as i">   {{i+1}}/{{total.length}}: {{pony.name}} </div> Или даже более полезной, если один раз использовать pipe с async. Вместо плохого и некрасивого: <div>   <h2>{{ (race | async)?.name }}</h2>   <small>{{ (race | async)?.date }}</small> </div> Вы можете использовать: <div *ngIf="race | async as raceModel">   <h2>{{ raceModel.name }}</h2>   <small>{{ raceModel.date }}</small> </div> Различные виды pipe Titlecase Angular 4 презентует новый pipe: titlecase. Он позволяет переводить первую букву каждого слова в верхний регистр: <p>{{ 'ninja squad' | titlecase }}</p> <!-- will display 'Ninja Squad' --> Http Задание параметров поиска Http-запроса было упрощено: http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } }); Раньше вам необходимо было произвести следующее: const params= new URLSearchParams(); params.append('sort', 'ascending'); http.get(`${baseUrl}/api/races`, { search: params }); Test Переопределение шаблона во время теста также было упрощено: TestBed.overrideTemplate(RaceComponent, '<h2>{{race.name}}</h2>'); До этого мы обычно писали так: TestBed.overrideComponent(RaceComponent, {   set: { template: '<h2>{{race.name}}</h2>' } }); Сервисы Meta Для получения содержимого или обновления meta-тэгов был введен новый сервис: @Component({   selector: 'ponyracer-app',   template: `<h1>PonyRacer</h1>` }) export class PonyRacerAppComponent { constructor(meta: Meta) {     meta.addTag({ name: 'author', content: 'Ninja Squad' });   } } Формы Валидаторы Новый валидатор позволит объединить существующие required, minLength, maxLength, и pattern. email позволит провести валидацию e-mail адреса (если Вы планируете просто обойтись подходящими регулярными выражениями – удачи в поисках). Сравнение выбранных опций Для сравнения выбранных опций была добавлена новая директива: compareWith: <select [compareWith]="byId" [(ngModel)]="selectedPony">    <option *ngFor="let pony of race.ponies" [ngValue]="pony">{{pony.name}}</option> </select> byId(p1: PonyModel, p2: PonyModel) {    return p1.id === p2.id; } Маршрутизатор ParamMap Для представления параметров URL был введен новый интерфейс: ParamMap. Вместо использования params или queryParams, отныне Вам стоит использовать paramMap или queryParamMap, так как они позволяют выбрать между get() для получения значения или getAll() для получения всех значений (так как параметры запросов могут иметь несколько значений, к примеру). const id = this.route.snapshot.paramMap.get('ponyId'); this.ponyService.get(id).subscribe(pony => this.pony = pony); Или как здесь:   .map((params: ParamMap) => params.get('ponyId'))   .switchMap(id => this.ponyService.get(id))   .subscribe(pony => this.pony = pony); CanDeactivate Интерфейс CanDeactivate теперь обзавелся дополнительным опциональным параметром, содержащим следующее состояние (то, куда Вы собираетесь перейти). Теперь можно реализовать «умную логику», когда пользователь может покинуть текущий компонент в зависимости от того, куда он или она направляется. I18n Интернационализация также медленно, но верно улучшается. К примеру, ngPlural теперь упрощен: <div [ngPlural]="value">   <ng-template ngPluralCase="0">there is nothing</ng-template>   <ng-template ngPluralCase="1">there is one</ng-template> </div> А теперь давайте сравним с тем, что было раньше: <div [ngPlural]="value">   <ng-template ngPluralCase="=0">there is nothing</ng-template>   <ng-template ngPluralCase="=1">there is one</ng-template> </div> Только что мы добавили целую главу к нашей электронной книге, включая несколько юз-кейсов и прочее! Подведем итоги Релиз Angular 4 привносит множество улучшений и действительно востребованных инноваций в сферы размера генерируемого кода, сохраняя в целом концепцию предыдущей версии Angular. Благодаря этому обновление технологии не должно вызвать затруднений. Автор перевода: Евгений Лукашук Оригинал статьи

Full stack разработчик, который может создать из прототипа полноценный MVP (минимальный жизнеспособный продукт), часто считается тем, кто берется за все, но ничего толком не умеет, и не без оснований. Чтобы определить современного разработчика как full stack, нам сначала нужно сосредоточиться на том, кем был разработчик full stack. Full Stack разработчики «тогда», раньше Давным-давно, около 2000 года (в интернет-времени 17 лет – это очень давно), full stack разработчиком был тот, кто мог: - создать веб-страницу в некоторых инструментах Adobe, таких как Photoshop или Fireworks - превратить этот дизайн в HTML, CSS и горячие точки на изображениях (помните их?) - написать некоторые базовые сценарии PHP 4.0 (тогда объектно-ориентированного PHP не было и на горизонте) для обработки серверной части логики - хранить все динамические данные в MySQL, возможно, немного оптимизировать - загружать все на сервер по FTP и собирать оплату. Обратите внимание, о каком PHP здесь идет речь: у full stack Flash или Coldfusion разработчика был другой (но не очень отличающийся) рабочий процесс. Это были простые времена, жизнь была хорошей. Агентства, состоящие из одного человека, были весьма распространены, и люди все еще успевали проводить время с семьей после работы. Что же сейчас? Что же должен знать Full Stack разработчик сейчас? В наши дни мы сталкиваемся с такими ситуациями:  Чтобы преуспеть в современном насыщенном рынке, разработчики, которые часто являются перфекционистами, не решаются делегировать процессы и работу и часто живут под девизом «если вы хотите что-то сделать правильно, то сделайте это сами». Это загоняет специалиста в угол, где он обязан и должен знать все. Таким образом, сейчас Full Stack разработчик - это: Server Admin / Devops Разработчик должен знать, как выполнять базовое управление сервером. Это включает, но не ограничивается: - подключение к удаленным серверам через терминал, в среде без GUI - основные сценарии оболочки - управление пользователями и группами на сервере - управление серверными программами, такими как Apache и Nginx для обслуживания приложений - управление брандмауэрами и разрешениями - установка нового программного обеспечения и обновление дистрибутива Помимо этих основ, разработчик должен знать, как создавать хорошие, здоровые, изолированные среды разработки, как в Docker, так и на виртуальных машинах, таких как Vagrant. Также разработчик должен быть хорошо знаком с системами контроля версий, чтобы иметь возможность создавать резервные копии и совместные коллективные коллекции кода, отслеживать изменения во времени. В наши дни не существует современного рабочего процесса разработчиков без использования контроля версий. Облако Помимо реальных управляемых или виртуализированных серверов, разработчик должен знать об облаке – хостинге на таких платформах как Heroku, Google Cloud, Azure, AWS и других. Существует справедливое мнение о платформах и инструментах, которые являются более привлекательными, чем полезными, но знакомство с сервисами, о которых все говорят, может пригодиться в долгосрочной перспективе – клиент может потребовать переключения провайдеров в любой день, и он платит за готовность. Back End Что касается back end, помимо знания выбранного языка – например, PHP и его множества фреймворков и CMS – Full Stack Developer должен быть знаком с: - веб-серверами, такими как Nginx и Apache, которые связаны с Devops (смотрите описание выше) - NodeJS для компиляции JS, CSS и других активов в статически хранимые. Хорошие новости в том, что есть способы избежать NodeJS с помощью PHP - такими инструментами, как Composer для управления пакетами и зависимостями в самом PHP – никакая среда современного разработчика не будет завершенной без него - хорошим дизайном API, поскольку большинство новых веб-сайтов сегодня основаны на API и просто говорят об отдельном интерфейсе (подробнее об этом ниже) - поисковыми систеамиы, такими как ElasticSearch, ведь они действительно важны для производительности - cronjobs и фоновыми заданиями с помощью таких инструментов, как Gearman или библиотек, таких как Crunz - знанием о кешировании с помощью Varnish, Redis и аналогичных мощных инструментов, которые значительно снижают расходы на хостинг, часто создают или разбивают проект. Базы данных Базы данных представляют собой отдельный раздел, потому что, помимо хорошего понимания реляционных баз данных, схема которых не часто изменяется (например, MySQL или PostgreSQL), разработчик должен знать о базах данных noSQL, таких как MongoDB, Redis или Cassandra, не говоря о графовых базах данных, таких как Neo4j. Что еще хуже, все это находится на сервере, под контролем разработчика. Есть также несколько удаленных решений, таких как Mongo-like RestDB или Firebase, принадлежащая Google, и т.д. Front End Здесь вообще полный хаос. Вот довольно исчерпывающий обзор того, что необходимо для здорового рабочего процесса front end: - NodeJS и NPM - Yarn - Препроцессоры и транспиллеры (такие как Babel) для таких вещей как Typescript, ES6, LESS, SCSS, SaSS - Builders and task runners like Grunt и Gulp - Фреймворки как VueJS, React, Angular - Module bundlers, такие как Webpack, Browserify, Rollup Дизайн В дизайне разработчик должен знать, как набросать прототип приложения, прежде чем преобразовать его в пригодный для использования формат, такой как HTML и CSS. Затем может быть добавлен интерактив с ложными JS включениями и только после того, как оболочка приложения будет завершена, а user experience дизайн и дизайн интерфейсов будет готов, начнется настоящая разработка. Это само по себе является огромной стартовой работой и требует специального набора инструментов, таких как: - Photoshop и/или Illustrator или альтернатива с открытым исходным кодом, например Gimp/Inkscape - хороший, быстрый редактор, такой как Atom или Sublime Text - подборщики рисунков, такие как подклассы и подборщики цветов, которые подбирают цвета, подходящие друг другу - сетчатые системы для CSS - все от Front End до имитации JavaScript - способы развертывания прототипа онлайн для клиентов, чтобы они могли увидеть его и дать вам отзывы (например, Ngrok). Логирование Чтобы эффективно следить за здоровьем приложения, разработчик должен иметь возможность отслеживать ошибки, иметь доступ к журналам и извлекать из них ценную информацию. Он должен иметь возможность распознавать и отмечать тенденции, а также уведомлять о всплесках в использовании процессора или ввода-вывода для предотвращения простоев - вовремя. Это немного связано с Devops, но требует своего определенного набора навыков. Разработчик может создавать свой набор инструментов, который поможет получить все необходимое для всех задач ведения журнала. Например, ElasticSearch для поиска журналов, Logstash для их сбора и Kibana для панели, в которой они отображаются для удобного мониторинга. Mobile Наконец, мобильная разработка. Webview как на iOS, так и на Android становится все более и более эффективным, появились PWA (прогрессивные веб-приложения), а нативные приложения уже теряют свое очарование из-за сложного процесса их разработки. Таким образом, разработчик полного стека должен быть знаком с PWA или переходить на что-то вроде React Native или полностью на webview, например, NativeScript, Tabris, Cordova, Phonegap, или другую реализацию, чтобы получить хорошее «клиентское приложение» для своего API (см. back end раздел выше). Так стоит ли становиться Full Stack разработчиком? Итак, после всего, стоит ли стараться? Прежде всего, следует отметить, что очень немногие full stack разработчики являются такими full stack – многие сосредотачиваются только на большинстве из этих технологий и аспектов, а не на всех, просто потому, что нельзя полностью все взять во внимание. Во-вторых, знание хотя бы небольшой части всего не сделает вас мастером определенного ремесла, но позволит вам понять, что входит в проект, и какие из этих технологий действительно нужны проекту. Это бесценный навык при делегировании, открытии агентства или просто перенаправлении существующей команды с утраченного пути на конкретный вектор работы. Возможно, я не JavaScript rockstar, Elasticsearch ninja, гуру MySQL, Devops маньяк или мобильный ретранслятор, но в моем случае full stack позволяет мне расправлять мои крылья, тестировать различные технологии и предлагать альтернативные, необычные решения для моих клиентов на фрилансе. Деньги могут приходить со всех сторон, и я могу заключать контракты от работы на серверной стороне до разработки плагинов WP и всего между ними, потому что я умеренно знаком со всеми этими вещами. Для меня full stack определенно стоит того. Если сравнивать с моими Flash-днями, когда я получал огромное удовольствие от работы (без JavaScript!), то зарплата была ниже, а проекты – гораздо сложнее получить.   Источник: https://www.sitepoint.com/full-stack-developer/

Настройка разработчиком любого сайта для успешного SEO – довольно несложный процесс. Но что делать, если вам этого недостаточно? Что вы делаете, если уже есть sitemap и robots.txt, если вы оптимизировали URL и метатеги, оптимизировали сайт под мобильные устройства, но трафика по-прежнему нет? Мы собрали четыре быстрых и простых хака для разработчиков для того, чтобы ваш SEO взлетел и сайт продвинулся в результатах поиска. AMP для мобильных устройств Много важного было сделано для мобильного поискового трафика и того, чтобы оптимизировать сайты для пользователей мобильных устройств. Мера оптимизации мобильной рекламы в Интернете еще известна как «мобильное удобство». Мобильное удобство состоит из двух основных компонентов: Пользовательский интерфейс – насколько легко пользователям перемещаться по сайту и совершать действия? Он предназначен для сенсорных экранов?  Скорость – как важная составляющая общего удобства сайта, скорость экспоненциально важнее для мобильного SEO. Мобильные пользователи ожидают, что загрузка займет всего несколько секунд. Конечно, есть способ улучшить дружелюбие вашего сайта к мобильным устройствам: Accelerated Mobile Pages. Проект AMP от Google представляет собой набор спецификаций, предназначенных для создания страниц для мобильных устройств, которые просты в использовании и навигации, плавно отображаются и загружаются практически мгновенно. AMP состоит из трех частей, которые работают вместе: HTML: В основном обычный HTML с пользовательскими свойствами для изображений, видео и фреймов; а также ограниченные технические функции, определенные спецификациями открытых источников. AMP JavaScript библиотека: AMP JS библиотека управляет загрузкой ресурса для страницы, гарантируя, что любые сторонние ресурсы не блокируют рендеринг страницы. Google AMP Cache: Специальная сеть доставки контента, которая извлекает, хранит и обслуживает действительные страницы AMP и ресурсы из одного источника. Использование спецификации ускоренных мобильных страниц все равно, что создание ярлыка для мобильного удобства. Весь проект призван помочь сделать страницы дружественными для мобильных устройств: Пользовательский интерфейс: поскольку AMP JS загружает элементы страницы асинхронно, это гарантирует, что вышеописанное содержимое появляется перед чем-либо еще. Кроме того, AMP JS требует, чтобы соотношения были предопределены, поэтому браузер знает, как будет выглядеть страница, прежде чем начнется рендеринг. Пользователи больше не подвержены неравномерным страницам с контентом, который перескакивает при загрузке. Скорость страницы: есть причина, по которой AMP имеет право на звание «ускоренных». Согласно Google, время загрузки страниц AMP на 85% ниже, чем на других страницах. Оптимизация поисковой сущности В течение последних нескольких лет Google внедрял семантическую веб-технологию в свои результаты поиска. Эти семантические технологии строятся на так называемых «сущностях». Сущности, как вы, вероятно, догадываетесь, -  люди, места и вещи. Как базовые существительные помогут вам улучшить SEO вашего сайта? Благодаря красоте семантической сети и графу знаний Google, вот как. Один из наиболее очевидных примеров семантического поиска Google, Графа знаний – это поисковая оптимизация сущности в действии. Используя структурированную разметку данных, такую как JSON-LD, RDF / XML или другие RDF-форматы, вы можете оптимизировать сущность своего бренда, чтобы максимально использовать его в Графе знаний. Используйте инструмент, например, WooRank’s Metadata Tool, чтобы указать Google на ваши профили и блоги в социальных сетях. Просто введите URL-адреса ваших профилей в инструменте, а затем скопируйте разметку на свой сайт. Оптимизация сущностей также жизненно важна для местных предприятий или крупных предприятий с локальными филиалами. Семантическая сеть действительно важна для местных предприятий, поэтому вам необходимо использовать ее возможности. Это означает добавление оптимизации ваших объектов для структурирования важных данных в результатах локального пакета Google: Используйте семантическую разметку, такую как LocalBusiness schema, чтобы добавить важные данные к информации о вашей компании: Время работы Адрес Телефонный номер Принимаемые платежи Ценовой диапазон Рейтинги Не отчаивайтесь, если вы не видите немедленного повышения трафика на ваш сайт. Как это часто бывает в случае с семантическим SEO, оптимизация сущностей – это способ наиболее быстрого получения самой важной информации о вас пользователями. Даже если они не посещают ваш сайт, мы знаем, что локальный SEO улучшает посещения магазина и увеличивает количество покупок даже без увеличения трафика веб-сайта. Переход на HTTPS Обеспечение безопасности вашего сайта – отличная идея для вас и ваших пользователей, так что это действительно хорошая идея получить сертификат SSL. Кроме того, отказ от использования HTTPS приводит к тому, что ваш сайт теряет позиции в результатах поиска. Переход на HTTPS URL-адреса – это относительно простой способ улучшить SEO вашего сайта. Даже если вы недавно приобрели SSL-сертификат и перенесли его на HTTPS, у вас все еще есть некоторые прорехи в безопасности. Даже если ваш домен размещен на защищенном URL-адресе, но на странице есть ресурсы, которые размещены на незащищенных адресах, Google это не понравится. Первым шагом будет сканирование вашего сайта, чтобы найти все ваши URL-адреса, как безопасные, так и нет. Вы можете использовать традиционный поисковый робот, например, Screaming Frog, который скомпилирует список всех URL-адресов и позволит вам найти все ресурсы без HTTPS. Или используйте инструмент Woorank Site Crawl, чтобы найти каждый экземпляр HTTPS-страниц, размещающих ресурсы на HTTP URL-адресах. Эти активы включают: Изображения CSS файлы Видео Скрипты Фрэймы После того, как вы зафиксировали HTTPS-страницы с помощью HTTP-активов, вам нужно еще кое-что проверить: Robots.txt. Поскольку Google видит URL-адреса HTTP и HTTPS как отдельные сайты, использование небезопасных URL-адресов в файле robots.txt приведет к тому, что ваш файл robots.txt будет не таким эффективным. Sitemap. Использование URL-адресов, отличных от HTTPS, в вашем файле sitemap может привести к тому, что Google будет сканировать и индексировать незащищенные URL-адреса, что противоположно тому, чего вы хотите. Канонические метки. Использование неправильной формы URL-адреса для вашего канонического тега почти полностью отменяет назначение канонического тега. После того, как вы обновили файл sitemap и файл robots.txt, повторите сканирование своего сайта с помощью Site Crawl. Все ваши канонические теги без URL-адресов HTTPS будут отображаться в разделе Canonical как канонические несоответствия. Оптимизируйте ваши изображения Размер изображений Использовать изображения и видеоролики на вашем веб-сайте – это замечательное решение, которое значительно улучшает пользовательский интерфейс, разбивая текст и делая контент более потребляемым. Вы также можете использовать их для улучшения SEO вашего сайта. Первый SEO-хак, который нужно изучить, - это оптимизация ваших изображений, которая состоит в оптимизации размера изображения. Большие изображения – одна из основных причин низкой скорости страниц и длительного времени ожидания. И не секрет, что и люди, и Google ненавидят медленные страницы. При редактировании изображений уменьшите их до минимального размера. Многие редакторы изображений, такие как Adobe Photoshop, имеют опцию «Save for the Web», которая автоматически уменьшает размер файла при сохранении качества изображения. Если у вас нет Photoshop, есть несколько онлайн инструментов, которые вы можете использовать, чтобы избавиться от дополнительных данных, таких как EXIF: ImageOptim JPEGmini PunyPNG Вы также можете использовать консоль браузера или Google’s PageSpeed Insights для того, чтобы найти неоптимизированные изображения, которые замедляют загрузку ваших страниц. Название файлов и альтернативный текст Большая проблема при использовании изображений для SEO – это сообщить поисковым системам, что находится на изображении и как это относится к странице. Но все изображения можно оптимизировать по ключевым словам: Имя файла: имена файлов относятся к изображениям, подобно URL-адресам для веб-страниц. И они должны быть оптимизированы во многом таким же образом. Большинство хостеров изображений будут использовать имя файла изображения при создании его URL, так что такая оптимизация окупится еще больше. При создании имен файлов будьте описательными и краткими и не используйте подчеркивания. Избегайте использования имен файлов по умолчанию, например, «DSC673829.jpg» или «image_01.jpg», кроме случаев, когда это невозможно. Альтернативный текст: альтернативный текст вместе с именем файла является одной из наиболее важных частей изображения для SEO. Это представляет собой машиночитаемый «контент» изображения, так что это ваша возможность добавить ваше ключевое слово. Как и имена файлов, альтернативный текст должен быть кратким, но, если сделать его слишком коротким, это отрицательно скажется на его преимуществах. Хороший alt text для этого изображения: Выглядел бы так: img src="audit-alt-text-criteria.jpg” alt=”Alt text criteria in the WooRank SEO audit’/ Держите ключевые слова релевантными для фактического изображения, а не обязательно для страницы. Попытка использовать альтернативный текст типа “Alt text in SEO audit as SEO hack for developers” может оказаться похожим на спам-ключевик. Это нехорошо. Подведение итогов Конечно, есть вероятность, что ваши проблемы с трафиком Google могут выходить за рамки четырех хаков, перечисленных выше. Если ваш трафик все еще низкий, выясните, как диагностировать и лечить возникшую проблему. Если вы хотите начать развивать свою аудиторию, проведите один или два SEO-эксперимента. Узнайте, что работает именно для вас. Источник

Введение  «Новичку в сфере IT стоит знать одно простое правило программирования — это написание очень тонких инструкций для глупой, но послушной машины». Среди массы различных языков программирования новичку в IT очень сложно выбрать направления для дальнейшего развития, потому что каждый язык занимает определенную ячейку. Наиболее популярные, языки в "современном программировании", это: Java, Python, Objective-C, PHP, C, C++, C#, JavaScript и Ruby. Форумы и специализированные сайты переполнены тематикой «Что выбрать?» и «Куда развиваться?». И мы нашли оптимальную схему выбора ветки развития юным программистам. С чего начать изучение программирования? Итак, с чего же стоит начать?  В первую очередь ответьте предельно честно самому себе на главный вопрос: «Почему Вы хотите начать изучать программирование?». Ответов много, а предпосылок еще больше, но если провести анализ, то мотивов стать разработчиками несколько. Деньги Часто, наиболее распространенной причиной изучения программирования служит мнение о том, что программисты много зарабатывают. Да, это действительно так. Зарплаты хороших программистов могут заставить позавидовать даже некоторых менеджеров высшего звена. Но это достигается годами упорного труда, само мотивации и углубления в современные информационные технологии. Кроме того, дабы получать по-настоящему достойную зарплату, стоит сразу нацеливается на работу в хорошей крупной компании. Или же иметь идею на миллион и открывать свой start-up.   Перспективы Казалось бы, относительно недавно стоило появится первом персональному компьютеру – и нате Вам! – программисты стали одними из наиболее востребованных работниками современного рынка. Действительно, наш век – это век информационных технологий, быстроразвивающийся и динамический. Сейчас спрос на специалистов IT-сферы растет как никогда, и вряд ли стоит ждать на него спад. Все больше и больше современных компаний готовы предложить «теплое местечко». Сколько их – Google, Microsoft, EPAM прочие.   Динамичность Каждому человеку присуща толика любознательности. Но есть люди, у которых страсть изучать что-то новое просто в крови! Что же, в таком случае программирование – это именно то, что вам нужно. На данный момент существуют десятки различных направлений: мобильная разработка, настольные приложения, веб-программирование, игры, сколько их… А уж сколько для этих направлений было разработано технологий и программ – не счесть. Работая в сфере IT вы можете быть уверенным, что никогда не дадите себе заскучать! Итак, раз мы разобрались с нашими мотивами и разложили все по «полочкам», приступим же непосредственно к выбору первого языка программирования! Какой язык программирования выбрать? Теперь, самый важный вопрос: так какой же язык программирования стоит выбрать новичку в сфере IT? Прежде всего, все зависит от того, что именно вы желаете изучать. Вот график наиболее востребованных направлений области информационных технологий: Как мы можем видеть, список внушительный. Но что из этого вас прельщает больше всего? Давайте попробуем разобраться. Я бы хотел разрабатывать сайты С этим направлением не все так просто. Есть Front-End разработка сайтов – это все, что вы видите на экране. Создание веб-страниц, программ для них, стилей и много чего прочего. В таком случае вам стоит обратить свое внимание на JavaScript и HTML & CSS. А есть Back-End – разработка непосредственно программ для серверов – тех алгоритмов, которые, собственно говоря, и будут управлять страницами, сайтом и прочим. Здесь все несколько сложнее, так как сразу же появляется хороший выбор из Python, Java, C#, и PHP. Каждый из этих языков обладает как серией достоинств, так и набором откровенных недостатков. В качестве этакого старта советуем рассмотреть Python.   Настольные приложения для домашних ПК Тут бесспорными лидерами выступают такие популярные языки, как Java и C#. С одной стороны, обучение Java несколько проще и быстрее, чем C#, с другой, набор возможностей, которыми может похвалится C#, на порядок выше.   Работа с базами данных Ну, тут все однозначно: следует начинать с SQL! Администрирование, работа с реляционными базами данными и прочее, что так необходимо в современно IT-мире. Здесь можно рассмотреть вступление в язык запросов.   Игры-игры-игры! Геймерами не стают, ими рождаются. Наслаждаетесь современными продуктами игровой индустрии и сами бы хотели привнести что-то в этой увлекательный виртуальный мир? Тогда, определенно, вам стоит обратить свое внимание на С++.      Здесь можно посмотреть статистику языков программирования по популярности:              Статистика поиска соискателей по языкам и платформам: Какой самый простой язык программирования? Если начинать изучать, что начинать с простого, не так ли? Итак, вот небольшой даждест «для чайников» с чего, собственно, стоит начать обучение. JavaScript Один из наиболее легких языков программирования для веб-разработки. Динамическое наполнение web HTML страниц, целый комплекс технологий семейства React.JS, Node.JS и прочих, обилие библиотек и обучающих материалов + плюс, огромное комьюнити. Отличный старт для новичка в области IT! Вот вступление в видео-курс по JavaScript.   Python Очень легкий и приятный в освоении интерпретируемый язык универсального назначения. Обширное количество довольных пользователей, огромное количество вакансий на мировом рынке, поддержка большинством сред разработки и наличие специализированных сред разработки. Ознакомится с данным языком можно здесь.   PHP PHP – или Hypertext Preprocessor – достаточно мощный и, в то же время, легкий в освоении язык программирования для разработки серверной части веб-сайта. Имеет богатую историю и может похвалится хорошей базой различных библиотек. Ознакомится с ним вы можете здесь. Самый сложный язык программирования Быть может, вы уже имели определенный опыт, связанный с IT, и желаете попробовать себя в более «продвинутой» песочнице? Или вы не из тех, кто хочет изучать что-то простое, а сразу брать «быка за рога»? Что же, на этот случай мы можем предложить следующее: Java Отменный компилируемый язык программирования для решения целого спектра задач – от написания настольных приложений до создания серверных программ для веб-сайтов. Имеет мощную аудиторию поклонников, богатую историю, корни которой простираются в самые 90-стые и множество библиотек для практически любой задачи. Начать изучение этого языка можно здесь.   С# Язык программирования от компании Microsoft универсального назначения. Java показалась простой? Тогда C# для вас! Имеет практически идентичный с Java синтаксис, но отличается расширенном набором функций и производимых операций. WPF для оконных приложений, ASP.NET для разработки сайтов и прочие высококачественные фреймворки для всех типов задач. Что может быть лучше, чем инструмент на все случаи жизни? Приступить к работе с этим языком можно здесь.   C++ Легенда программирования. Универсальный язык программирования, возможности которого воистину не имеют ограничений. Низкоуровневая работа с памятью, разработка систем рендеринга для игр, отличная производительность и неисчерпаемый набор библиотек… С++ - это наиболее быстрый и оптимизированный язык программирования из всех существующих. Но его изучение потребует особенной усидчивости и трудолюбия. Сумеете ли вы с ним совладать? Языки программирования, какой самый оплачиваемый? Один из самых востребованных и высокооплачиваемых на рынке языков программирования - это Java. Очень популярен на всех платформах, ОС и устройствах, благодаря своей кроссплатформенности. Используется в Gmail, Minecraft, большинстве Android приложений и в корпоративных приложениях. С - это «лингва франка» среди всех языков программирования. Один из самых старых и самых широко используемых языков в мире. Отлично подходит для системного и аппаратного программирования. Он используется в ОС и оборудовании.   С# был создан на платформе Microsoft, но совсем недавно вышел на open source. С# - это популярный выбор предприятий для разработки разнообразных web-сайтов и Windows приложений, используя .NET framework. С# используют для создания web сайтов при помощи web фреймворка от Microsoft – ASP.NET. Своим синтаксисом и функционалом похож на Java. Используется в корпоративных и Windows приложениях.   Objective-C является основным языком, используемый Apple для Mac OS X и iOS. Его стоит изучать, если Вы собираетесь разрабатывать только под OS X и iOS. Стоит задуматься над изучением Swift, как о следующем языке. Objective-C используется в большинстве iOS приложений и в части Mac OS X.   C++ - это более сложная версия языка программирования С, с существенно расширенным набором возможностей. Широко используется при разработке игр, промышленных и высокопроизводительных приложений. Изучать С++ - все равно что изучать, как производить, собирать и водить машину. Этот язык не рекомендуется для самостоятельного изучения и требует наличие ментора. Он широко используется в ОС, оборудовании и браузерах. На самом деле, абсолютно не важно, с чего именно Вы начнете Ваш путь в сфере IT. Нужно знать хотя бы несколько основных языков и технологий, чтобы познать все аспекты программирования. А самое главное - начать!

Введение Эта статья предназначена для начинающего разработчика, который впервые столкнулся с изучением AngularJS и сопутствующими технологиями, такими как GIT, node.js, Grunt, Bower. Вы могли много читать литературы по поводу перечисленных выше технологий, в этой статье мы лишь вкратце опишем, чем по сути является каждая из них, и как с ней работать. 1. Проходим по ссылке: https://docs.angularjs.org/tutorial и следуем всем инструкциям по установке. Не бойтесь, мы Вам в этом поможем! И постараемся вместе разобраться в основных понятиях современного Frontend Development'a :) Для начала нам следует установить git на свою ЭВМ :)       Коротко о git. Git — система для контроля версий файлов. Более обширное определение - это  ресурс, который позволяет разработчику или команде разработчиков контролировать версии своих приложений. Подробнее тут: https://ru.wikipedia.org/wiki/Git  Идем по ссылке в новой вкладке: http://git-scm.com/ и выбираем ту версию git, которая нас интересует, в соответствии с нашей операционной системой. Скачиваем файл для установки, с расширением .exe и устанавливаем в папку Program files. 2. Идем по ссылке в новой вкладке браузера https://github.com/ и регистрируемся. Github – самый крупный веб-сервер для хостинга (размещения) проектов разработчиков. Итак, мы это все сделали, далее скачиваем приложение из репозитория angular-phonecat, размещенного на Github. То есть, нашей задачей теперь будет взять и скачать готовое приложение себе на жесткий диск. 3. AngularJS – это JavaScript фреймфорк, который заточен под разработку одностраничных приложений. Официальный сайт AngularJS https://angularjs.org/ Основной идеей AngularJS является убеждение создателей оного, что декларативное программирование (парадигма программирования - описание программы, какая она по сути, а не то, как ее создать) находит применение в разработке внешнего вида приложения, а императивное программирование (парадигма программирования – в отличие от декларативного программирования, описывает процесс вычисления в виде инструкций, по сути, пошагово изменяет инструкции программы, похоже на приказы) используется для описания бизнес логики. AngularJS – расширяет HTML, чтобы создать двустороннюю привязку данных для динамического контента. Цели AngularJS: DOM-манипуляции не зависят от логики приложения. Параллельная разработка путем разделения клиентской части и серверной части приложения. Планирование разработчиком всех приложений – интерфейс, бизнес-логика, тестирование. Открываем терминал/консоль и перемещаемся в ту папку, в которую хотим сохранить проект с помощью команды cd Documents/ (эта команда означает - cd – change derictory на Documents) и нажимаем Enter  мы переместились в папку, где хранятся документы (просто потому, что мне так удобней, можно этого не делать и остаться в корне диска). Копируем следующую строку  git clone --depth=14 https://github.com/angular/angular-phonecat.git вставляем в терминал/консоль и нажимаем Enter. Эта строка создает папку angular-phonecat и копирует приложение с Git с последними 14 коммитами (изменениями). Ждем окончания копирования проекта. Далее переходим в директорию с нашим приложением командой     cd Documents/angular-phonecat  или cd angular-phonecat/   после жмем Enter и оказываемся в папке с приложением 4. У нас на жестком диске есть наше приложение, теперь нам следует установить node.js. Node.js – что такое node.js? Есть много статей, определений и объяснений. В общем и коротко: Node.js – это интерпретатор JavaScript. Приложение node.js получает js код и выполняет его. Нам надо установить node.js в папку с нашим приложением. Переходим по ссылке: http://nodejs.org/download/ качаем приложение и устанавливаем. 5. Вместе с node.js устанавливается и npm. Что такое npm? Npm – это node package manager. Npm устанавливает пакеты, которые прописаны в файле package.json перед установкой npm нам следует проверить, какая версия node.js установлена у нас. Это мы делаем командой в терминале: node –-version есть :) Теперь в терминале набираем следующее: npm install На выходе получаем такую структуру нашего проекта: Файл  package.json содержит в себе информацию о приложении, название, версию, установленные пакеты в приложении. Возможна установка пакетов как через файл package.json, так и через терминал. 6. Это не обязательно, но в будущем этот пакет Вам пригодится. Grunt – это Task Runner – автоматизатор процессов, позволяет проводить минификацию кода, сборку кода(компиляцию), тестирование. В терминале вводим следующее: npm install -g grunt-cli (-d   - говорит о том, что мы устанавливаем grunt глобально.) Дополнительно устанавливаем в директорию с приложением npm install grunt-cli теперь обновляем npm:  sudo npm update npm -g sudo - (substitute user and do – подменить пользователя и выполнить) – в Unix системах позволяет пользователям выполнять команды от имени суперпользователя root. В директории с приложением требуется создать файл Gruntfile.js, вложим в него код из официального примера http://gruntjs.com/sample-gruntfile в конце страницы - конечная версия файла, копируем код себе в файл. Или копируем отсюда: module.exports = function (grunt) {     grunt.initConfig({         pkg: grunt.file.readJSON('package.json'),         concat: {             options: {                 separator: ';'             },             dist: {                 src: ['src/**/*.js'],                 dest: 'dist/<%= pkg.name %>.js'             }         },         uglify: {             options: {                 banner: '/! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> /\n'             },             dist: {                 files: {                     'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']                 }             }         },         qunit: {             files: ['test/**/*.html']         },         jshint: {             files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],             options: {                 // options here to override JSHint defaults                 globals: {                     jQuery: true,                     console: true,                     module: true,                     document: true                 }             }         },         watch: {             files: ['<%= jshint.files %>'],             tasks: ['jshint', 'qunit']         }     });     grunt.loadNpmTasks('grunt-contrib-uglify');     grunt.loadNpmTasks('grunt-contrib-jshint');     grunt.loadNpmTasks('grunt-contrib-qunit');     grunt.loadNpmTasks('grunt-contrib-watch');     grunt.loadNpmTasks('grunt-contrib-concat');     grunt.registerTask('test', ['jshint', 'qunit']);     grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); }; Пакеты, которые мы прописали в Gruntfile.js, следует установить через npm следующими командами: npm install grunt-contrib-uglify --save-dev npm install grunt-contrib-qunit --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-jshint --save-dev Подробнее об установленных пакетах можно прочитать тут: https://github.com/gruntjs/grunt-contrib-uglify https://github.com/gruntjs/grunt-contrib-qunit https://github.com/gruntjs/grunt-contrib-concat https://github.com/gruntjs/grunt-contrib-jshint https://github.com/gruntjs/grunt-contrib-watch 7. Установка Bower и что это такое. Bower – менеджер пакетов для клиентской стороны приложения JS. Отличием Bower от Npm есть то, что Bower, если возникнет конфликт, не позволит Вам поставить несовместимый пакет(библиотеку), которая уже установлена, Bower ставит одну версию пакета. В терминале ставим глобально bower и пишем: npm install -g bower  и конечно ставим в директорию с проектом  bower install 8. Сongrats !!! Теперь у нас установлено приложение и мы можем запускать его, из файловой системы заходим в папку с приложением, потом в папку – app, находим файл и тапаем (двойной клик) по нему index.html или (что будет правильным) нужно зайти в терминал и ввести: npm start (запускаем сервер) и в браузере в омнибоксе (адресной строке) ввести: http://localhost:8000/app/index.html Wuala – наше приложение запускается и работает. Подробнее об AngularJS и как с ним работать вы можете узнать из курса AngularJS в учебном центре CyberBionic Systematics. Всем спасибо и удачного кода. 

Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на DOU.ua 21 декабря 2020 года. Оригинальная версия на украинском языке доступна по ссылке. На этот раз предлагаем ознакомиться с актуальными вопросами, которые задают на технических интервью по JavaScript. Естественно, мы говорим о широком спектре специализаций, поэтому выбирайте свое направление и готовьтесь.   Junior Общие: 1. Какие методы HTTP-запросов вы знаете? 2. Какие версии HTTP-протокола вам известны? 3. Какие знаете коды ответа (состояния) HTTP? 4. Что такое Cross-Origin Resource Sharing? Как устранить проблемы с CORS? 5. Что такое cookie? 6. Какой максимальный размер cookie? 7. Что означает директива use strict? 8. Чем JS отличается при работе на front-end и back-end? 9. Что такое статическая и динамическая типизации? 10. Как клиент взаимодействует с сервером? 11. Что такое REST? 12. Объяснить понятие мутабельность/иммутабельность? Какие типы являются мутабельными и наоборот? 13. Как искать ошибки в коде? Используете ли вы дебаггер? 14. Каких известных людей из мира JS знаете?   JS Core 15. Какие существуют типы данных в JS? 16. Как проверить, является ли объект массивом? 17. Как проверить, является ли число конечным? 18. Как проверить, что переменная равна NaN? 19. Чем отличается поведение isNaN() и Number.isNaN()? 20. Сравните ключевые слова var, let, const. 21. Что такое область видимости? 22. Что такое деструктуризация? 23. Для чего предназначены методы setTimeout и setInterval? 24. Сравните подходы работы с асинхронным кодом: сallbacks vs promises vs async / await. 25. Можно ли записывать новые свойства / функции в прототипы стандартных классов (Array, Object и т. д.)? Почему нет? В каких случаях это делать можно? Как обезопасить себя, если нужно расширить прототип? 26. Назовите методы массивов, какие помните, и скажите, для чего они нужны. 27. Какие методы перебора массива знаете? В чем их отличие? 28. Как работают операторы присваивания / сравнения / строчные / арифметические / битовые и т. д.? 29. Опишите назначение и принципы работы с коллекциями Map и Set. 30. Что означает глубокая (deep) и поверхностная (shallow) копия объекта? Как сделать каждую из них? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 3, урок 5, урок 10), JavaScript Базовый (урок 3, урок 13, урок 19), ECMAScript 6 (урок 6).   Функции: 31. Какая разница между декларацией функции (function declaration) и функциональным выражением (function expression)? 32. Что такое анонимная функция? 33. Расскажите о стрелочных функциях (arrow function). В чем заключаются отличия стрелочных функций от обычных? 34. Что такое и для чего используют IIFE (Immediately Invoked Function Expression)? 35. Что такое hoisting, как он работает для переменных и функций? 36. Что такое замыкание (closure) и какие сценарии его использования? 37. Как вы понимаете замыкания? Что будет выведено в консоли в этом случае? var f = function() {   console.log(1); } var execute = function(f) {   setTimeout(f, 1000); } execute(f); // что выведет в консоль и почему f = function() {   console.log(2); } 38. Что такое рекурсия? 39. Что означает ключевое слово this? 40. Что такое потеря контекста, когда происходит и как ее предотвратить? 41. Методы функций bind / call / apply - зачем и в чем разница? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 11, урок 12) и JavaScript Базовый (урок 13, урок 14).   Front-end 42. Что такое DOM? 43. Сравните атрибуты подключения скрипта async и defer в HTML-документе. 44. Какая разница между свойствами HTML-элементов innerHTML и innerText? 45. Опишите процесс всплытия (bubbling) событий в DOM. 46. Как остановить всплытие (bubbling) события? 47. Как остановить дефолтную обработку события? 48. Чему равен this в обработчике событий (event handler)? 49. Что такое LocalStorage и SessionStorage? Какой максимальный размер LocalStorage? 50. Как получить высоту блока? Его положение относительно границ документа? 51. Что такое webpack? 52. Чем отличается dev-сборник от prod? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Базовый (урок 1, урок 6, урок 7, урок 8, урок 17) и ECMAScript 6 (урок 1).   Верстка 53. Что такое блочная модель CSS? 54. Какие способы центрирования блочного контента по горизонтали и вертикали знаете? 55. Какие подходы в верстке вам известны (float, flex, grid, etc.)? 56. Как сделать приложение responsive? 57. Какие есть принципы семантической верстки? 58. Зачем нужны префиксы для некоторых CSS-свойств (-webkit-, -moz- и т. д.)? 59. Как упростить написание кросс-браузерных стилей? 60. Практические задачи: прокомментировать и исправить пример плохого CSS или HTML. 61. Что такое CSS-препроцессоры? С какими работали? Что нового они приносят в стандартный CSS? Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Стартовый (урок 5, урок 6), HTML5 & CSS3 Углубленный (урок 4). Курсы Верстка сайта на CSS Grid и Верстка сайта на FlexBox CSS дадут комплексные знания и практические навыки применения технологий FlexBox и Grid.   Angular 62. Перечислите основные компоненты фреймворка (модуль, роут, директива и т .п.). 63. В чем разница между компонентом и директивой? 64. Расскажите о жизненном цикле компонента. 65. Перечислите часто используемые хуки жизненного цикла компонента и расскажите, для чего они нужны? 66. В чем разница между конструктором и ngOnInit-хуком? 67. Как защитить роут от несанкционированного доступа? Какие механизмы предоставляет для этого фреймворк? 68. Что такое Lazy loading, как и для чего используется? 69. Какое назначение RouterOutlet? 70. Как компоненты могут взаимодействовать друг с другом? 71. Как создать two-way binding свойство для компонента? 72. Какие типы форм у фреймворка? В каких случаях и что лучше использовать? 73. Какие состояния у формы и как это можно применить? 74. Зачем нужны сервисы? Как с ними работать? 75. Что такое singleton-сервисы? Каково их назначение? Способ создания? 76. Какие есть способы объявления сервисов? 77. Для чего нужны модули? Сколько их должно быть в проекте? 78. Зачем нужны общие модули (shared)? 79. Какие преимущества типизации в TypeScript? 80. Какие возможности TypeScript можно использовать для типизации (здесь имеются в виду интерфейсы, типы, enum и т. д.)? 81. Какая разница между интерфейсом и классом? 82. В чем разница между интерфейсом и абстрактным классом? 83. Какая разница между интерфейсом и типом? 84. Что такое RxJS? Как он используется во фреймворке? Какие компоненты фреймворка тесно связаны с ним? 85. Чем отличаются Observable и Promise? 86. Для чего нужны Subjects? Какие типы Subjects существуют? 87. Как сделать несколько последовательных запросов к API с помощью HTTP-сервиса и RxJS? 88. Какая разница между switchMap, concatMap, mergeMap? 89. Как можно конфигурировать Angular-приложение? 90. Зачем нужны environment-файлы? Когда их лучше не использовать? 91. В чем разница между «умным» (smart) и «глупым» (dumb) компонентами? В каких случаях применяется каждый из них? 92. В чем разница между NgForm, FormGroup и FormControl и как их применяют для построения форм? 93. Зачем нужен и как работает async pipe? 94. Как следить за развитием фреймворка? Каких известных людей, связанных с Angular, знаете / читаете? Ответы на некоторые из этих вопросов вы можете найти в видео курсах Angular Базовый и Angular Углублённый.   React 95. Работали ли вы с классовыми компонентами? В чем их особенность? 96. Какие данные лучше хранить в состоянии компонента, а какие передавать через пропсы? Приведите пример. 97. Ознакомлены ли вы с хуками? В чем их преимущества? Приходилось ли делать свои и с какой целью? 98. Знакомы ли вы с фрагментами и порталами? Зачем они нужны? 99. Когда и для чего используют рефы? 100. Какие вы знаете методы жизненного цикла компонента? 101. В каком методе жизненного цикла компонента лучше делать запросы на сервер? Почему? 102. В каком методе жизненного цикла компонента лучше делать подписку и отписку от листенера? Почему? Зачем отписываться? 103. Был ли опыт работы с контекстом? Когда его стоит использовать? 104. В чем особенность PureComponent? 105. Работали ли вы с мемоизоваными селекторами (memoized selectors)? Для чего их используют и какой принцип работы? 106. В чем видите преимущества библиотеки React? 107. Почему библиотека React быстрая? Что такое Virtual DOM и Shadow DOM? 108. Зачем в списках ключи? Можно ли делать ключами индексы элементов массива? Когда это оправдано? 109. В чем основная идея Redux? 110. Работа со стилями в React. 111. React - это библиотека или фреймворк? Какая разница между этими двумя понятиями. 112. Можно ли использовать jQuery вместе с React? Почему да / нет? 113. Что такое codemod? 114. Приходилось ли вам настраивать проект React с нуля? С помощью каких инструментов вы это делали? 115. Перечислите все библиотеки, которые использовали в связке с React. 116. Что самое сложное вам приходилось реализовывать с помощью React? Ответы на некоторые из этих вопросов вы можете найти в видео курсах React Базовый и React Углублённый.   Back-end 117. Что такое REPL? 118. Что такое streams в Node.js? 119. Что такое middleware? 120. Для чего используют функцию setImmediate? 121. Зачем нужен app.param() в express? 122. Что такое token based authentication?   Базы данных 123. Напишите простой запрос для вычисления трех авторов, у которых больше всего книг. 124. Напишите запрос, который выбирает последние три комментарии для конкретного пользователя для двух таблиц: комментарии и пользователи. 125. Спроектируйте простую схему базы данных для библиотеки. 126. Для чего используют SQL-оператор HAVING? 127. Зачем используют SQL-оператор LEFT JOIN? 128. Чем отличается embed- от reference-связи в MongoDB? 129. В одном проекте программисты сохраняют данные в MongoDB-коллекции комментариев, используя такие типы данных (смотрите ниже). Что плохого в этом решении? id: ObjectID text: string author_id: string created_at: Date 130. В проекте понадобилось внести изменения в структуру таблиц, добавить несколько полей и индексы. Как программисты будут делать это на продакшене? Ответы на некоторые из этих вопросов вы можете найти в видео курсе SQL Базовый.   Инструменты 131. Каждый раз, когда вы делаете pull, почему-то случается конфликт в последней строке во всех файлах, которые вы редактировали. Что происходит? 132. Что делает команда git fetch? 133. Какой git hygiene подходы вы знаете? 134. Что такое CI / CD? Для чего это нужно?   Практические задания 135. Расскажите, какие есть способы копирования простого объекта типа obj = {a 1, b 2, c 3} 136. Напишите deep clone для объекта. 137. Назовите различные способы, как поменять местами значения двух переменных. 138. Менеджер попросил в задаче поменять статусы из «active, inactive» на «active, removed», но в коде фигурируют только цифры и непонятно, какой статус соответствует какой цифре. Как помочь будущим программистам не лезть в документацию по коду? Вопрос ставят на конкретном примере с кодом. 139. Необходимо сделать мини проект - список пользователей с формой создания / редактирования пользователя: Для хранения пользователей используйте Firebase (это бесплатно). Для стилизации используйте Bootstrap. Минимальный набор полей пользователя: имя; фамилия; электронная почта; телефон (в формате +380 (XX) XXX-XX-XX) дата рождения; будет плюсом - добавление аватара и возможность crop-картинки. Пользователи должны иметь возможность фильтрации и пагинацию. Проект должен содержать README-файл с шагами для запуска.   Middle Общие 1. Расскажите о пирамиде тестирования. 2. Какие типы автоматизированных тестов выпадала возможность писать? Какие библиотеки при этом использовали? Каким инструментам отдаете предпочтение и почему? 3. Что такое unit-тесты? Какое место в пирамиде тестирования занимают unit-тесты? 4. Что такое code coverage? Обязательно 100% покрытие тестами кода? 5. Как запретить браузеру отдавать кэш на HTTP-запрос? 6. Что такое XSS (Cross-Site Scripting)? 7. Расскажите о паттернах Observer, Pub / Sub. Какая между ними разница? Приведите примеры реализации этих паттернов в известных фреймворках / библиотеках / браузерных API. 8. С какой целью может быть использован event listener события fetch self.addEventListener ( 'fetch', event => {})? 9. Что такое Event loop и как он работает? Расскажите о микрозадачах и макрозадачах.   JS Core 10. Какие типы данных бывают в JavaScript? Какой будет результат выполнения кода? let firstObj = { name: 'Hello' }; let secondObj = firstObj; firstObj = { name: 'Bye' }; console.log(secondObj.name); 11. Что такое temporal dead zone? 12. Как работает boxing / unboxing в JavaScript? 13. В чем разница между оператором in и методом hasOwnProperty? 14. Опишите, с помощью чего в JS реализуются такие ООП-парадигмы, как инкапсуляция, полиморфизм, абстракция? 15. Что такое прототип? Как работает прототипное наследование в JS? Объясните работу кода. function Main () {} Main.prototype = { protected: true }; const obj = new Main(); Main.prototype = { protected: false }; console.log('Object protection: ', obj.protected); 16. Какая разница между композицией и наследованием? 17. Почему не стоит использовать конструкторы типа new String? 18. Расскажите о базовом устройстве и механизме работы Event loop. 19. Что такое записи (records) и кортежи (tuples)? Чем они отличаются от обычных объектов? 20. Какие различия в поведении ES5 функции-конструктора и ES2015 класса? 21. Как реализовать паттерн «Модуль»? 22. Почему typeof null возвращает object? 23. Что такое приведение (преобразование) типов в JS? 24. Что такое явное и неявное приведение (преобразование) типов данных в JS? Как происходит преобразование типов в следующих примерах: {}+[]+{}+[1] !!"false" == !!"true" ['x'] == 'x' 25. Что такое Garbage Collector? 26. Опишите основные принципы работы «сборщика мусора» в JS-движках (engines). 27. Опишите назначение и принципы работы с коллекциями WeakMap и WeakSet? Чем они отличаются от коллекций Map и Set соответственно? 28. Чем отличается Observable от Promise? 29. Что такое Promise? Назовите порядок выполнения then и catch в цепочке. Promise.resolve(10)   .then(e => console.log(e)) // ??   .then(e => Promise.resolve(e))   .then(console.log) // ??   .then(e => {     if (!e) {       throw 'Error caught';     }   })   .catch(e => {     console.log(e); // ??     return new Error('New error');   })   .then(e => {     console.log(e.message); // ??   })   .catch(e => {     console.log(e.message); // ??   }); 30. Расскажите о последовательном и параллельном выполнении асинхронных функций. В чем разница между Promise.all() и Promise.allSettled()? 31. Что такое дескрипторы свойств объектов? Расскажите об их практическом применение. 32. Назовите несколько способов создания постоянного (неизменного) объекта в JavaScript. 33. Как создать свойство у объекта, которое нельзя будет изменить? 34. Зачем нужен конструктор Proxy? Приведите пример использования. 35. Что такое ArrayBuffer? В чем разница между Uint32Array и Float32Array? Каков результат выполнения кода? const uint32Array = new Uint32Array(); Array.isArray(uint32Array); 36. Каким будет результат сравнения? const url = “HTTPs://xyz.com/path<to>page.html”; encodeURI(url) == encodeURIComponent(url); 37. Расскажите о генераторах и итераторах. 38. Объясните, что делает приведенный ниже код: function * fn(num) {   for (let i = 0; i < num; i += 1) {     yield console.log(i);   } } const loop = fn(5); loop.next(); loop.next(); 39. Расскажите о типе данных Symbol и его практическом применении. Как перевести число с 10-разрядной системы в 16 (2,8) разрядную систему счисления? Ответы на некоторые из этих вопросов вы можете найти в видео курсе JavaScript Стартовый (урок 3, урок 4, урок 13, урок 14) и JavaScript Базовый (урок 18, урок 19),  ECMAScript 6 (урок 6).   Функции 40. Объясните, что означает currying. Приведите пример использования на практике. 41. Приведите пример функции с мемоизацией. Когда следует применять эту технику? 42. Что такое чейнинг функций? Напишите пример с использованием этого подхода. 43. В чем разница между function и arrow function? Каким будет результат выполнения кода? const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) const unfold = (f, seed) => {   const go = (f, seed, acc) => {     const res = f(seed)     return res ? go(f, res[1], acc.concat([res[0]])) : acc   }   return go(f, seed, []) }   Front-end 44. В чем принципиальная разница между событиями mouseleave и mouseout? 45. В каком порядке обрабатываются пользовательские события в DOM (click, mouseover и т .д.)? FIFO или LIFO? 46. Что такое Event bubbling и Event capturing? 47. Сравните методы объекта event stopPropagation и stopImmediateProparation. 48. Какие есть подходы оптимизации производительности веб-страницы? 49. Как реализован механизм same-origin policy в браузере? На какие браузерные API он распространяется? 50. Назовите способы хранения данных в браузере. Сравните их. 51. Web worker`ы. Опишите особенности передачи данных между worker`амы и основным потоком, между разделенными worker`амы. 51. Что такое Transferable-объекты? 52. Расскажите о способах оптимизации выполнения ресурсоемких операций JS для улучшения производительности рендеринга контента на странице. 53. Почему ResizeObserver вызывает события изменения размера до воспроизведения элемента, а не после? 54. Расскажите, как вы понимаете Web Accessibility? 55. Опишите алгоритм создания функционала, который обеспечивает чтение содержимого .txt файла при перетаскивании его из файловой системы в окно браузера. 56. Что такое Virtual DOM? Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Углубленный (урок 3), JavaScript Базовый (урок 1, урок 2, урок 3).   Верстка 57. Объясните разницу между единицами измерения px, em, rem. 58. Для чего нужны CSS-переменные? Приведите несколько примеров использования. 59. Что произойдет при добавлении следующего селектора? * {Box-sizing: border-box; } 60. Как адаптировать страницу для печати? 61. Опишите особенности кастомизации стилей стандартных элементов форм. 62. Что такое progressive рендеринг? Какие подходы используются? 63. Назовите несколько способов реализации lazy-loading медиаресурсов на странице. 64. Назовите популярные шаблонизаторы для фронтенд-разработки. Опишите особенности их использования. 65. Назовите популярные CSS-методологии и их различия. 66. Как работает CSS Grid? 67. Какие форматы изображений поддерживают анимацию? 68. Как отследить прогресс / окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS? 69. Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах? 70. Как переиспользовать Инлайн SVG-элементы на странице? 71. Опишите способы оптимизации SVG-файлов. 72. Как реализовать иконочный шрифт из определенного набора SVG-файлов? 73. Что такое ложное жирное или ложное курсивное (Faux) начертание шрифтов? 74. Что такое #shadow-root в инспекторе HTML-страницы? 75. Зачем нужны Custom Elements? 76. Почему удаление лишних символов пробелов / символов переноса в HTML не отражается на конечной производительности загрузки страницы? 77. Что такое контекст отображения canvas? Какие существуют типы контекста для рендеринга двумерной и трехмерной графики? Ответы на некоторые из этих вопросов вы можете найти в видео курсе HTML5 & CSS3 Углубленный.   Angular 78. Как работает Dependency injection? Зачем это нужно? Расскажите об использовании кастомных инжекторов. 79. Что такое zone.js? Для чего Angular использует зоны? С какой целью можно использовать NgZone-сервис? 80. Как работает Change detection? Как можно оптимизировать компонент с помощью схем Change detection? Какие еще есть приемы для оптимизации рендеринга (связанные с Change detection)? 81. Как выполнить конфигурацию HTTP-сервиса? Зачем она нужна? Обработка HTTP-ошибок? 82. Какие есть подходы к организации работы с данными? 83. Как подготовить сборник к деплою? 84. Что такое NgRx? Когда стоит использовать? 85. В каких случаях лучше использовать Renderer-сервис вместо нативных методов? И наоборот? 86. Как работают и для чего нужны резолверы? Как получить данные, загруженные резолверами? 87. Как работают и зачем нужны динамические компоненты? Приведите примеры их целесообразного использования. 88. Какая разница между @ViewChild и @ContentChild? 89. Что делает код и как иначе можно связать класс компонента с переменной? @HostBinding ( 'class.valid') isValid; 90. Как можно кэшировать данные, используя сервисы или RxJS? 91. Что такое асинхронная валидация форм? Когда применяется и как реализуется? 92. Зачем нужна forRoot-функция модуля? 93. Какая разница между декларированием и экспортом компонента из модуля? 94. Почему плохо «провайдить» сервис с shared-модуля в lazy-loaded модуль? (Вопрос о scope модулей.) 95. Что такое :: ng-deep и для чего используется? 96. Какие тесты можно запустить для Angular-программы? Какие инструменты используют для тестирования Angular-программы? 97. Как протестировать API-сервис? Ответы на некоторые из этих вопросов вы можете найти в видео курсах Angular Базовый и Angular Углублённый.   React 98. Что такое JSX? Что лежит в его основе? 99. Как работает алгоритм Virtual DOM? 100. Для чего нужно свойство key во время рендеринга списков? 101. В чем разница между функциональными и классовыми компонентами? 102. Зачем и когда нужно передавать props в super() при использовании классовых компонентов? 103. Почему нужно использовать setState() для обновления внутреннего состояния компонента? 104. В чем заключается принцип «подъема состояния»? 105. Какие библиотеки менеджмента состояния React-приложения вы знаете? Зачем они нужны? 106. Когда следует использовать Redux? Какие есть альтернативы? 107. Redux vs Mobx? 108. Расскажите о базовом принципе работы React Hooks. 109. В чем разница между createRef и useRef? 110. Когда следует использовать React refs? Когда не стоит? 111. Какие недостатки библиотеки React видите? 112. Какие паттерны используете вместе с React? 113. Как относитесь к типизации вместе с React? 114. Как построить хорошую архитектуру React-проекта? 115. Оптимизация React-приложений? Как измерить производительность программы? 116. Можно ли приложение на React встроить в другое приложение на React? Ответы на некоторые из этих вопросов вы можете найти в видео курсах React Базовый и React Углублённый.   Back-end 117. Почему Node.js однопоточный, а не многопоточный? 118. Что такое event driven development? 119. Сравните fork() и spawn() методы. 120. Расскажите о Node.js фреймворках, которые использовали. Какая между ними разница? 121. Опишите словам код ендпоинта, который должен сохранить с клиента файл размером 4 гигабайта и положить его на S3 или другой CDN. 122. Что такое микросервисы, зачем их используют? 123. В каких случаях вы бы выбрали монолит, а в каких - микросервисы? 124. Как понять, что приложение в определенный момент работает исправно? 125. Как понять, что приложение за последние три дня работал исправно? 126. Как происходит проверка правильности пароля при использовании bcrypt? 127. Что такое JWT? 128. Джуниор прислал код на ревью. Что здесь не так? Как исправить? router.post ( '/ users', async (req, res, next) => {   const user = await db.createUser (req);   if (user) {     return res.json (users);   }   res.json ({error: "can not create user"}) })   Базы данных 129. Что такое Redis и для чего его используют? 130. Какие базы данных использовали? Какая разница между SQL и NoSQL? 131. Для двух таблиц - комментарии и пользователи - напишите запрос, который выбирает последние три комментария для каждого пользователя. 132. Я как заказчик прошу выбрать вас базу данных для нового проекта. Ваши действия?   Инструменты и другое 133. Для чего нужен package-lock.json? 134. В чем разница между npm install и npm ci? 135. Для чего нужны бандлеры? 136. Расскажите о модульном подключении скриптов. Приведите пример использования загрузчиков / бандлеров модулей. 137. Чем различаются git merge и git rebase? 138. Что такое staging area в git? 139. Опишите процесс code review. Назовите основные правила, способы разрешения конфликтов и споров во время его проведения.   Практические задания 140. Напишите функцию Sleep (ms), которая останавливает выполнение async-функции на заданный промежуток времени. 141. Реализуйте один из методов массива (например, splice). 142. Напишите функцию с RegExp для нахождения всех HTML-ссылок в строке. 143. Реализуйте функцию, которая исполнит callback для всех элементов определенной ветви DOM-дерева. 144. Реализуйте таблицу с виртуальным скролом. 145. Реализуйте функцию преобразования URL query строки в JSON.   const inData = "user.name.firstname=Bob&user.name.lastname=Smith&user.favoritecolor=Light%20Blue"; function queryObjectify(arg) { // ?? } queryObjectify(inData) /* Результатом виконання для вхідного рядка, повинен бути наступний об’єкт {   'user': {     'name': {       'firstname': 'Bob',       'lastname': 'Smith'     },     'favoritecolor': 'Light Blue'   } }; */ 146. Реализуйте функцию нахождения пересечения двух массивов. const first = [1, 2, 3, 4]; const second = [3, 4, 5, 6]; function intersection (a, b) { // ?? } intersection(first, second) // -> [3, 4] 147. Реализуйте функцию / класс для генерации HTML. const HTMLConstruct = {}; HTMLConstruct.span('foo'); // -> <span>foo</span> HTMLConstruct.div.span('bar'); // -> <div><span>bar</span></div> HTMLConstruct.div.p( HTMLConstruct.span('bar'), HTMLConstruct.div.span('baz') ); // -> <div><p><span>bar</span><span>baz</span></p></div> 148. Если есть проект с ограниченными сроками и некритичной производительностью, чем будете руководствоваться при выборе библиотек, подходов? Или все же будете обращать внимание на производительность? Или наоборот: сроки нелимитированные, производительность важна. Ваши действия?   Senior Общие 1. Расскажите о функциональном программировании. 2. Что такое TDD (Test Driven Development) / BDD (Behaver Driven Development)? 3. Расскажите подробно о работе HTTPS. 4. Какой стек технологий можно выбрать для реализации клона какого-нибудь известного проекту и почему? 5. Имеется проект на старых технологиях, необходимо в него вносить изменения. Как это сделать лучше всего? 6. Если у кандидата есть опыт работы с несколькими фреймворками: какой будете использовать для следующего проекта? Какие факторы будут влиять на выбор? 7. Что такое V8 Engine?   JS Core 8. Реализация паттерна Class Free OOP (HTTPs://observablehq.com/@bratter/class-free-oop). 9. Патерн async disposer (HTTPs://advancedweb.hu/what-is-the-async-disposer-pattern-in-javascript). 10. использование регулярных выражений. Когда приемлемо / неприемлемо? Как они работают? Как можно сделать читабельный код?   Front-end 11. Как браузер определяет, можем ли мы общаться между вкладками? 12. Что такое Content Security Policy? 13. Как избежать загрузки кэшированных файлов скриптов и стилей? 14. Что такое requestAnimationFrame? 15. Расскажите о микросервисной архитектуре Front-end App. 16. Что такое Shadow DOM? 17. Сравните nextElementSibling и nextSibling. 18. Какие знаете метрики веб-сайта?   Angular 19. Как проводится конфигурация NgZone-модуля? Когда это необходимо? 20. Что раздражает в фреймворке? Что бы вы изменили? 21. Если бы вы решали, что добавить в следующем релизе фреймворка, какая фича это была бы? 22. Писали ли вы кастомные декораторы? Если да, то зачем? 23. Сделать ревью кода и дать замечания по архитектуре. 24. Расскажите, как бы вы делали такие фичи. Опишите архитектуру фичи в приложении.   Back-end 25. Сравните Common.js с AMD Modules и ES6 Imports. 26. Какой фреймворк выбрали бы для бэкенда, почему? 27. Опишите своими словами, как работает OAuth v2. 28. Есть проект с источниками памяти, как их обнаружить, устранить и предотвратить это в будущем? 29. Есть проект с performance issues, как их обнаружить, устранить и предотвратить в будущем?   Базы данных 30. Какие альтернативные виды баз данных используете? 31. Что такое RDS и почему он иногда не подходит? 32. Что такое SQL Injections и как их избежать? 33. Почему для запросов в БД надо использовать плейсхолдеры? 34. Как спроектировать кластер на MongoDB? 35. Для чего используют MongoDB Aggregation framework? 36. Расскажите о GraphQL.   Инструменты 37. Можете ли вы описать суть методологии git flow в двух словах? 38. Что означает требование делать squash commits во время rebase? 39. Каково ваше мнение об альтернативных системы контроля версий (Version Control System)? 40. Какие конвенции знаете и используете для git? 41. Расскажите о своем опыте использования / внедрения CI / CD. 42. Необходимо настроить деплой проекту на несколько сред. Расскажите, как бы вы построили процесс? Какие инструменты использовали бы?   Практические задания 43. Реализуйте асинхронный метод filter для Array (должны работать await). 44. Реализуйте функцию reduce при помощи рекурсии. 45. Как можно было бы сделать toggle-компонент, как в iPhone, без использования JS?   Благодарим за помощь в подготовке статьи Вячеславу Колдовскому, Ивану Рыженку, Николаю Галкину, Александру Бурмистрову, Владу Балабашу, Андрею Шумаде, Ивану Кувацкому, Андрею Кладочному.

Пошук роботи в ІТ — це процес, який часто здається марафоном без фінішу. Ти надсилаєш десятки резюме, проходиш співбесіди, виконуєш тестові — і раптом отримуєш сухе повідомлення: «На жаль, ви нам не підходите». Чому саме? Адже ти вчився, мав мотивацію, виконав завдання. Відповідь проста: на кожному етапі рекрутинг-процесу роботодавець шукає не просто знання, а сигнали — про твоє мислення, готовність до роботи, поведінку і навіть енергію, яку ти передаєш. Розберімо докладно кожен етап і те, як уникнути типових помилок. Етап 1. Відмова після подачі резюме Це найпоширеніший і найболючіший момент: ти надсилаєш десятки відгуків і отримуєш тишу. Що відбувається насправді Рекрутер витрачає на одне резюме від 7 до 15 секунд. За цей час він вирішує, чи варто читати далі. Якщо твій документ виглядає неструктуровано, без конкретики, без GitHub або портфоліо — він просто губиться серед сотень інших. ⚠️ Типові помилки Заголовок “Junior Developer” без уточнення напряму. Потрібно конкретно: “Junior Python Developer”, “QA Manual”. Опис у стилі “вивчав HTML/CSS/JS, маю базові знання SQL”. Це виглядає як список зі шпаргалки. Відсутність результатів. Навіть на етапі навчання варто показувати, що ти вже зробив: pet-проєкти, сертифікати, дипломні завдання. Неадаптоване резюме. Якщо ти шлеш одне й те саме всім — видно, що ти не читав опис вакансії. ✅ Як зробити краще Почни резюме з короткого профілю: хто ти, що вмієш і чим можеш бути корисним. Додай результати навчання: проєкти, технології, що використовував, лінки. Замість фрази “Хочу розвиватися в ІТ” напиши “Прагну приєднатися до команди, де зможу працювати над продуктом, вдосконалюючи свій код і процеси тестування”. 💡 Резюме — це не твоя біографія, а перша презентація твоєї професійної цінності. Етап 2. Відмова після розмови з рекрутером Якщо тебе запросили на першу співбесіду — резюме зацікавило. Але далі важливо закріпити враження. Як мислить рекрутер HR оцінює не твої знання коду, а твою мотивацію, емоційний інтелект, комунікаційність і відповідність культурі компанії. Кандидати часто забувають: ця розмова — не формальність, а тест на зрілість. ⚠️ Типові причини відмови Ти не можеш чітко пояснити, чому саме ІТ і чому цей напрям. Ти не розповідаєш, що вже робив, а лише підкреслюєш, чого не знаєш. Ти виглядаєш пасивним або невпевненим, не ставиш питань і не проявляєш зацікавленості в компанії. Ти знецінюєш попередній досвід (“це неважливо, я тепер у ІТ”). ✅ Як діяти Підготуй чітку історію переходу: хто ти був, чому вирішив змінити сферу, що зробив для цього і які результати отримав. Говори про свій бекграунд як про силу, а не як про тягар. “Раніше працював у фінансах, тому уважність до деталей допомагає мені як тестувальнику.” Став запитання: “Як виглядає адаптація новачків у вашій компанії?”, “Які є шляхи росту?” 💬 Рекрутер шукає людей, які хочуть не просто роботу, а розвиток. Етап 3. Відмова після тестового завдання Цей етап показує, як ти мислиш і як ставишся до роботи. Як мислить техлід Тестове — це не про “ідеальний код”. Це про відповідальність, логіку та ставлення до задачі. Навіть якщо рішення неідеальне, але зрозуміле, акуратне й пояснене — це плюс. ⚠️ Типові причини відмови Затримка з виконанням без попередження. Відсутність опису або коментарів. Техлід не розуміє твоїх рішень. Ігнорування вимог. Наприклад, попросили зробити адаптивний інтерфейс, а ти зробив лише десктоп. Плагіат або шаблонні рішення. Досвідчені розробники бачать це миттєво. ✅ Як діяти Якщо не встигаєш — попередь заздалегідь. Це професійно. Додай короткий README: які технології використав, чому саме так, які були складнощі. Не бійся показати процес: краще пояснити логіку, ніж залишити “ідеальний, але непрозорий код”. 💡 Тестове завдання — це твій шанс показати недосконалість, а потенціал співпраці. Етап 4. Відмова після технічної співбесіди Це етап, де “вилітають” навіть найсильніші. Тут важливо не лише знати, а й уміти мислити вголос. 💥 Що оцінює техлід Чи розумієш ти принципи, а не лише визначення. Як реагуєш на складні або невідомі питання. Як мислиш під тиском. Наскільки комфортно з тобою спілкуватися як з колегою. ⚠️ Типові помилки Відповіді “з книжки”, без розуміння контексту. Агресивна реакція на фідбек або виправдання: “Так мене вчили”. Мовчання, коли не знаєш відповіді. Відсутність питань про команду, продукт, стек. ✅ Як діяти Якщо не знаєш — скажи: “Я не стикався з цим на практиці, але припускаю, що…” Не бійся мислити вголос: техлід хоче почути логіку, а не вгадування. Наприкінці обов’язково запитай: “Чи могли б ви дати фідбек, що покращити?” — це справляє враження зрілості. 💬 Технічна співбесіда — це не перевірка, а діалог. Етап 5. Відмова після фінального етапу Іноді ти пройшов усе: тест, технічну, фінальну розмову — і все одно отримуєш відмову. 💥 Що може бути причиною Компанія обрала кандидата з трохи більшим досвідом. Ти не зовсім підходиш під “культурний фіт” — не стиль роботи команди, не співпадає енергія. Твоя комунікація була занадто формальною або, навпаки, надто емоційною. Іноді це не означає, що ти “поганий”. Це просто невідповідність середовищу, і вона взаємна. ✅ Як реагувати Подякуй за можливість. Запитай, чи можеш отримати фідбек — короткий, конкретний. Не сприймай це як провал, а як інформацію для зростання. 💡 Іноді «ні» зараз — це «так» через кілька місяців, коли з’явиться інша позиція. Висновок Кожна відмова — це дзеркало. Воно показує не те, що ти “недостатньо хороший”, а те, де ще можна рости. Ніхто не будує кар’єру без відмов. Але ті, хто аналізує, робить висновки і вдосконалює себе після кожного етапу — у підсумку отримують не просто роботу, а впевненість у власній професійності. Не бійся фрази «ми обрали іншого кандидата». Бійся одного — не зробити висновків і не використати шанс стати кращим.

Зміна професії це завжди виклик, для кожного з нас, і якщо ви вирішили перейти в ІТ з іншої сфери, вас чекатиме ряд випробувань. Але найскладніший етап — це перша співбесіда. Часто світчери (career switchers) хвилюються: «Що сказати про себе, якщо я не маю комерційного досвіду? Чи буде мій попередній бекграунд корисним у новій сфері?». Насправді правильна самопрезентація може стати вашим головним козирем. Чому самопрезентація критично важлива Рекрутер чи техлід під час знайомства не просто оцінюють ваші знання. Вони хочуть зрозуміти, як ви мислите, чи бачите свою цінність і чи зможете інтегруватися в команду. Якщо ви самі сумніваєтесь у собі, це буде помітно. Але якщо вміло подати свій попередній досвід і навчання, ви отримаєте плюс навіть там, де ще бракує технічних навичок. Типові помилки світчерів Знецінення минулого досвіду  ❌ «Я працював бухгалтером, але це неважливо, бо тепер я хочу в ІТ».  — Так ви показуєте, що не вмієте інтегрувати минулі знання у новий контекст.   Занадто загальні відповіді  ❌ «Я вивчив JavaScript і хочу розвиватися».  — Це звучить однаково у десятків кандидатів, немає індивідуальності.   Надмірний акцент на відсутності досвіду  ❌ «Я ще не працював в ІТ, тому можу бути не дуже компетентним».  — Така фраза одразу знижує довіру. Успішні приклади самопрезентації 🔹 Приклад 1. Перехід з фінансів у тестування (QA) «Я понад 5 років працював у фінансовій сфері, де відповідав за аналіз великих обсягів даних і точність звітності. Ця робота навчила мене уважності до деталей, відповідальності та структурного мислення. Під час навчання на курсах QA я побачив, що ці навички напряму застосовуються у тестуванні: знаходження помилок, перевірка відповідності результатів очікуванням, складання зрозумілої документації.  Зараз у мене є кілька власних проєктів на GitHub, де я створював тест-кейси та проводив ручне й автоматизоване тестування. Я прагну застосувати ці навички у професійній команді, допомагаючи підвищувати якість продукту й розвиватися як спеціаліст». 👉 Чому це працює? Кандидат не відкидає минулий досвід, а показує його як сильну базу. Він доводить, що аналітичність і точність із фінансів чудово перетворюються на цінність у QA. 🔹 Приклад 2. Перехід з освіти у FrontEnd «Я 7 років працювала викладачем англійської мови. Моя робота була пов’язана з тим, щоб складне робити простим: пояснювати граматику, будувати зрозумілі приклади, допомагати студентам не губитися в деталях. Коли я почала вивчати веброзробку, зрозуміла, що ці навички напряму допомагають створювати зручний інтерфейс — коли користувач швидко розуміє, як працює сайт чи додаток.  За останні пів року я опанувала HTML, CSS і JavaScript, створила кілька pet-проєктів: сайт-візитку, блог і невеликий інтернет-магазин. У процесі я навчилася працювати з Git та базовими інструментами командної роботи. Зараз хочу стати частиною команди, де зможу зростати як FrontEnd-розробник і створювати продукти, якими зручно користуватися людям». 👉 Чому це працює? Кандидатка підкреслює soft skills із минулої професії (уміння пояснювати складне, робота з людьми), а також демонструє вже зроблені кроки у сфері ІТ (технології, проєкти). Це створює образ людини, яка вчиться й уже приносить користь. 🔹 Приклад 3. Перехід із продажів у Python-розробку «Упродовж 4 років я працював у сфері продажів, де щодня спілкувався з клієнтами, шукав рішення їхніх проблем і домовлявся про результат. Цей досвід дав мені сильні навички комунікації, роботи під тиском і досягнення цілей. Коли я почав вивчати Python, зрозумів, що такий підхід допомагає і в розробці: потрібно аналізувати задачу, знаходити оптимальний шлях і пропонувати рішення.  За останній рік я пройшов кілька курсів, створив чат-бота, веб-додаток і систему для збору даних. Усі проєкти виклав на GitHub. Мені подобається розв’язувати завдання, які роблять життя людей простішим, і я хочу застосувати свої технічні навички та комунікаційний досвід у продуктовій команді». 👉 Чому це працює? Кандидат показує, що досвід у продажах дав йому soft skills, які роблять розробника сильнішим: вміння слухати клієнта, досягати результату й працювати під тиском. При цьому він підтверджує технічну підготовку власними проєктами. Як будувати свою відповідь Використовуйте просту формулу: Минуле — чим ви займалися раніше і які навички можна перенести в ІТ. Теперішнє — що ви вже зробили для переходу: курси, проєкти, сертифікати. Майбутнє — чого хочете досягти та чому саме ця компанія для вас цікава. Приклад:  «У минулому я працював у продажах і розвивав комунікативні навички. Це допомагає мені зараз у роботі з командою й клієнтами. Протягом останнього року я вивчав Python, створив кілька проєктів (чат-бот, веб-застосунок), виклав їх на GitHub. У майбутньому хочу стати частиною продуктової команди, де можна рости до ролі мідла та брати участь у створенні складних сервісів». Що оцінює рекрутер і техлід Рекрутер дивиться на вашу мотивацію, здатність вчитися, комунікабельність. Йому важливо, щоб ви вписалися в культуру компанії.   Техлід більше цікавиться вашими технічними знаннями та логікою мислення. Але якщо ви зможете показати структурність, уважність і бажання рости, це буде величезним плюсом навіть на початковому рівні. Практичні поради Підготуйте 2–3 приклади з минулого досвіду, які можна «перепакувати» в ІТ-контекст (аналітика, робота з людьми, управління проєктами, точність).   Обов’язково покажіть pet-проєкти: сайт, застосунок, бот, тести. Це доказ, що ви не тільки вчилися, а й практикувалися.   Відпрацюйте самопрезентацію вголос. Запишіть себе на відео — ви одразу побачите, де звучите невпевнено.   Додайте трохи особистої мотивації: «Я свідомо обрав ІТ, бо люблю вирішувати задачі й створювати продукти, якими користуються люди». Не бійтеся, що ваш шлях «незвичний». Саме це і робить вас цікавим кандидатом. У багатьох ІТ-командах цінують різноманітність бекграунду: хтось прийшов із педагогіки, хтось із юриспруденції чи медицини — і кожен приносить у команду нову перспективу. Ваше завдання — не приховувати минулий досвід, а показати його як перевагу. Пам’ятайте: ІТ — це не тільки про код, а й про вміння мислити, комунікувати, працювати в команді. ✨ Правильна самопрезентація — це місток між вашою попередньою сферою та новою професією. Якщо ви вірите у свій шлях і вмієте це донести, роботодавець теж у вас повірить.

Добрий день! Для українців одним із найбільш поширених слів останніми місяцями стало «блекаут» – це тотальне зникнення електропостачання. На жаль, навіть у 21 столітті ми потерпаємо від регулярного вимкнення електрики – внаслідок російських обстрілів. Але хіба це може зашкодити нам вчитися і працювати, щоб підтримувати економіку і допомагати нашим захисникам? Багато українців у зв’язку з війною втратили роботу і змушені шукати нові можливості, які б дозволили працювати дистанційно з будь-якої точки України та світу. І саме ІТ-галузь якнайкраще задовольняє цим умовам. Опанування певної ІТ-професії вимагає інтенсивного навчання та регулярної практики. Однак як вибудувати свій процес навчання в умовах блекауту? Які є варіанти навчання за умов відсутності світла та інтернету? Відповіді на ці та інші питання ви знайдете у даній статті.   Які є можливості навчання під час блекауту Паперові книги з програмування. Це безпрограшний варіант, оскільки тут не задіяні ні електрика, ні інтернет. Хіба що додаткове джерело світла знадобиться у темну частину доби (ліхтарик, світло зі смартфону абощо). Придбайте для себе паперовий посібник з вивчення бажаної мови програмування або технології і опановуйте теорію, незважаючи на відсутність електрики. Але вам потрібен буде гаджет, на якому ви могли б практикуватися (наприклад ноутбук), інакше весь теоретичний матеріал не зможе осісти у вашій голові і ви дарма втратите час. А програмування – це на 80% практика. Електронні книги. Вони більш дешеві за паперові аналоги, але потребують наявності гаджета (бажано з гарною батареєю) і, можливо, павербанку для оперативної підзарядки. У випадку, якщо вимкнення тривалі, а вам необхідно підзарядитися, можна скористатися кафе, торговим центром або Пунктом Незламності. Наявність того ж ноутбуку дозволяє практикуватися у написанні коду, вміщувати велику кількість книжок тощо. Освітні веб-портали (якщо є мобільний інтернет). Можна читати теорію з різних спеціалізованих веб-ресурсів зі смартфону або ж роздати WiFi на інші портативні пристрої і читати там (а паралельно ще й займатися практикою). Відео уроки, завантажені з ютубу або спеціальних ІТ-майданчиків на кшталт ITVDN. Гарний варіант для тих, кому подобається більша аудіо та візуальна інтерактивність – коли теорію подає професіонал – практикуючий розробник та/або ментор. Спікер викладає матеріал більш стисло, аніж у книзі, і зачіпає лише найважливіші теми. Такий підхід дозволяє прискорити вивчення мови/технології, а також отримати більш актуальні знання (з урахуванням дати записаного відео).  Як практикуватися? Для практики потрібен ноутбук, оскільки він має портативність, відносну автономність, компактність. У більшості випадків підійде навіть слабкий ноут; головне – аби в ньому батарея була достатньо витривалою, інакше доведеться шукати місце для підзарядки і кодити звідти. Практика передбачає виконання певних домашніх завдань та навчальних проєктів для закріплення знань після читання матеріалу. Освітня платформа ITVDN пропонує досить ефективний спосіб поєднання теорії та практики під час відсутності світла та інтернету: Ви переглядаєте попередньо завантажений відео урок, де автор – практикуючий розробник – викладає актуальний навчальний матеріал, використовуючи презентацію, код у середовищі розробки, а також свій особистий досвід і харизму. Після перегляду ви виконуєте закріплене за кожним уроком д/з, повторюєте теорію, користуючись коротким конспектом, переглядаєте прикріплений вихідний код прикладів, розглянутих автором на уроці. Коли з’явиться світло, у вас буде можливість скористатися ще більшими можливостями ITVDN: Пройти невеликий тест після кожного уроку для перевірки своїх знань. Додатково скористатися Інтерактивним практикумом для більшого відточення навичок написання коду з популярних мов програмування – C#, Java, JavaScript, C++, Python, SQL або мов верстання HTML & CSS. Пройти підсумковий тест за всім відео курсом і отримати відповідний Сертифікат, що підтверджуватиме ваші знання. Новий пакет підписки – спеціально на випадок блекауту Аби отримати можливість скачувати відео уроки та вивчати ІТ в умовах вимкнень світла та інтернету, ми створили особливий пакет підписки – «Преміум Plus». Що до нього входить? Доступ до всіх відео курсів, представлених у каталозі (понад 230) Можливість навчання з усіх спеціальностей Доступ до інтерактивних практикумів Вихідний код навчальних проєктів Презентації, опорний конспект, д/з із кожного уроку Перевірка 20 виконаних завдань Консультації з тренером – 120 хвилин 24 онлайн тестування та сертифікати за пройденими курсами Доступ до нових курсів під час дії підписки Можливість завантажувати відео уроки будь-яких курсів з каталогу ITVDN Приклад Розглянемо формат навчання, який отримують ті, хто придбав підписку «Преміум Plus» на ITVDN, на конкретному прикладі – курсі «C# 8.0 Стартовий». Придбавши пакет і перейшовши на сторінку будь-якого курсу, ви побачите праворуч від відео плеєра список доступних уроків: Під назвою кожного уроку є 4 опції. Натиснувши на «Матеріали уроку», ваш браузер завантажить на комп’ютер матеріали до уроку – презентації, вихідний код, конспект. Після натискання на «Домашні завдання» буде завантажено тільки файл з коротким конспектом та д/з. Опція «Завантажити» запустить процес скачування запису відео уроку у форматі mp4.     При натисканні на «Тестування» ви побачите вікно з пропозицією пройти невеликий тест з даного уроку і перевірити ступінь засвоєння матеріалу: Аби завантажити усі матеріали відео курсу разом (окрім відео уроків у .mp4), можете скористатися кнопкою «Завантажити матеріали курсу» під описом курсу: Сподіваємося, наш гайд є корисним для вас і тепер ви знаєте, як зробити своє ІТ-навчання ефективним навіть в умовах вимкнень світла та інтернету.  Ознайомитися з «Преміум Plus» Навчайтеся разом з ITVDN і нехай ніякі блекаути не стають на заваді вашого розвитку в ІТ!