Дорогие друзья! Предлагаем вашему вниманию перевод статьи, опубликованной на 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 і нехай ніякі блекаути не стають на заваді вашого розвитку в ІТ!

Всем привет! Вы знаете, как создаются программы и информационные сервисы, которыми все мы пользуемся? Какие специалисты нужны, чтобы появился новый Фейсбук, Вайбер, Инстаграм, новый Windows или какая-то крутая видеоигра? За разработкой программного обеспечения (ПО) стои́т целая команда профессионалов — и далеко не все из них умеют программировать. Типичная команда будет включать в себя таких специалистов, как: бизнес-аналитик — проводит анализ бизнес-проблемы, формирует требования к разрабатываемому продукту; PM (Project Manager) — управляет всеми, кто вовлечен в работу над проектом; тимлид (Team Leader) — управляет командой разработчиков; UX/UI дизайнер — создает приятный дизайн приложения (UI) с хорошим пользовательским опытом (UX); разработчики/программисты — занимаются написанием кода, являются ядром команды; QA специалист — тестирует приложение на каждом этапе его разработки для обеспечения высокого качества продукта. Если ПО не предназначено для использования только внутри компании, а нацелено на внешнюю аудиторию, то еще добавляется маркетинг-команда, которая работает с целевыми потребителями: исследует рынок, определяет клиентуру, привлекает ее внимание, подогревает интерес к продукту и многое другое. Таким образом, в IT найдется хорошая работа даже для тех, кто не любит программировать. И сегодня речь пойдет о таком специалисте, как QA. Чуть выше вы уже узнали, что это, фактически, тестировщик, следящий за качеством ПО на каждом этапе его разработки. В чём специфика данной профессии, чем занимаются эти специалисты, насколько легко стать QA инженером и какие технологии должен знать потенциальный претендент на данную должность — это мы и раскроем в нашей статье. Устраивайтесь поудобней, мы начинаем!   Тестировщик, QC Engineer, QA Engineer Очень часто термин “тестировщик” применяется ко всем специалистам, которые так или иначе связаны с проверкой ПО на качество. Тем не менее, в данной сфере существует формальное разделение профессий на три ветви: Tester, QC и QA. Давайте выясним, что означает каждая из них. Тестировщик — специалист, который фокусируется на проведении непосредственных тестов над уже созданным ПО (составление тест-кейсов и баг-репортов, локализация дефектов и другое). Специалист проверяет, все ли работает согласно заявленным требованиям, производит сбор статистических данных и фиксирует их в соответствующих документах. Тестировщик внимательно пользуется разработанным ПО, воспроизводит все возможные действия пользователя, работает с приложением на различных операционных системах, в различных браузерах (если это веб-приложение), на различных мобильных платформах (если это мобильное приложение); помимо ошибок он ищет еще и уязвимости. Что-то вроде техосмотра транспортного средства. Отчеты об ошибках затем направляются разработчикам, которые ответственны за дальнейшее исправление багов. QC (Quality Control) Engineer — специалист, который обеспечивает не только соответствие разрабатываемого ПО заявленным требованиям, но и его соответствие заранее определенным критериям качества продукта в целом. Также, он ответственен за определение готовности продукта к выпуску в продакшн. Цель Quality Control специалиста — формирование объективной картины состояния качества ПО на различных этапах разработки. Можно сказать, что специальность тестировщика является подмножеством специальности QC Engineer. QA (Quality Assurance) Engineer — специалист, который обеспечивает контроль качества разрабатываемого ПО на всех этапах его планирования, проектирования и создания. Работа на этой должности является проактивной и носит превентивный характер, поскольку QA инженер уделяет внимание качеству продукта еще до того, как тот будет создан. Здесь на первый план выходят комплексы мероприятий, процессы и средства обеспечения качества ПО на каждом витке разработки. Непосредственно тестирование системы занимает уже второе место. Главное задание QA — выстроить систему так, чтобы она имела как можно меньше зон, где можно допустить ошибку, соответствовала всем показателям качества, а также была легко тестируема.  Специальность QC Engineer является подмножеством специальности QA Engineer. Чтобы вас не путать, в данной статье мы приравняем понятия “тестировщик” и “QA инженер” в пользу второго. Будем расписывать стек технологий и путь становления именно QA специалиста. Таким образом мы сможем затронуть максимальное количество информации касательно направления тестирования.   Направления QA   Начнем с того, что в QA есть два основных направления — Manual и Automation. Специалисты каждого из них называются мануальный (ручной) тестировщик и тестировщик-автоматизатор, соответственно. Их разница в том, что первый следит за качеством продукта и проводит все тесты вручную, а второй автоматизирует тестирование путем написания скриптов. Automation QA использует определенный язык программирования и фреймворк для того, чтобы создавать программы, которые будут производить тестирование продукта вместо самого специалиста. Такой подход позволяет сократить время на тесты. В обязанности мануального QA инженера входят: анализ и выяснение требований у заказчика либо бизнес-аналитиков; планирование процесса тестирования; написание сценариев тестирования; непосредственно тестирование программного продукта; определение проблемных мест, их документирование; использование систем отслеживания багов (баг-трекинги); обсуждение исправлений с разработчиками, активное взаимодействие с ними; отслеживание жизненного цикла ошибок; повторный тест исправленных дефектов; анализ тестирования; планирование идей по оптимизации качества программного обеспечения; ведение тестовой документации; проверка требований к программному обеспечению; оценка рисков; участие в стенд-апах и других митингах. Тем временем на плечи Automation QA помимо прочего возлагаются такие обязанности, как: написание новых автотестов на основе разработанных вручную; обновление поломанных/устаревших автотестов; прогон автотестов; анализ результатов тестовых прогонов; настройка тестового окружения; ревью кода; оформление автотестовой документации. На самом деле и мануальное, и автоматизированное направление имеют много общих требований, поскольку их фундамент одинаков. Давайте начнем с рассмотрения Manual QA, а затем плавно дополним его инструментами Automation QA.   Стек технологий Manual QA Engineer   Общая теория по IT Если лет 15 назад в тестировщики брали чуть ли не “с улицы”, то сейчас к претендентам с каждым годом выдвигают все больше и больше требований. Так что потенциальный претендент на должность прежде всего обязан хорошо понимать IT индустрию.  Итак, в этот пункт предусматривает такие темы, как: веб-технологии (HTTP, HTTPS, DOM, JSON, cookie, session), клиент-серверная архитектура; базы данных; компьютерные сети; операционные системы (обратить особое внимание на Unix); мелкие подтемы, как, например, системы счисления и т. д. Теория тестирования и тестовая документация Безусловно, любой QA инженер должен знать, с чем он вообще имеет дело. Если на заре разработки тестирование было чем-то интуитивным, то сегодня оно обрело четкие формы, обзавелось своими методиками, инструментарием и специализированным программным обеспечением.  Изучив теорию тестирования, вы сможете ориентироваться в данном направлении, понимать принципы, типы и методы тестирования, тест-дизайна, этапы жизненного цикла ПО; узнаете, как правильно составлять тестовую документацию (тест кейс, баг-репорт, чек-лист и т. д.) и многое другое. Основные темы: Тестирование, основные стандарты ISTQB. SDLC и STLC. Методологии разработки ПО. Требования. Анализ и составление требований. Тестовая документация.  Уровни, типы, методы и виды тестирования. Техники тестирования. Тест-дизайн Баги и баг-трекинговые системы. Системы контроля тестов. Основы программирования + HTML/CSS Основы программирования мануальному QA нужны не для того, чтобы заниматься непосредственным кодингом, а чтобы уметь читать код разработчика и понимать, что в нем происходит. Здесь важен не сам язык программирования, а банальное понимание того, как создаются программы, что такое переменные, функции, методы, классы, какие есть методологии программирования, как они реализуются и т. д. Для изучения основ отлично подойдет C# либо Java. Возможно, сюда стоило бы включить и Python, но он, пожалуй, слишком легкий для изучения и при работе с другими языками вам придется что-то доучивать. C# с Java же более фундаментальны и зная основы одного из них, вы легко сможете разбираться с кодом любых других популярных языков. Фактически, владение основами программирования необходимо для чтения чужого кода и выявления возможных багов прямо на месте. Отдельно выделяем языки верстки HTML и CSS. Если вы будете работать с веб-приложениями (а как показывает практика — проектов много — очередь и до тестирования “веба” рано или поздно дойдет), то вам будет полезно знать, из чего состоит FrontEnd часть веб-приложения. Также, вы будете работать с инструментами разработчика в браузере и там тоже надо будет взаимодействовать с HTML/CSS кодом. Правила оформления документации. Модель CMMI Если вспоминать три специальности, о которых мы говорили вначале (QA, QC и тестировщик), то этот пункт для тестировщика как такового является ненужным. Но вот для QA инженера он является неотъемлемым. В процессе проектирования ПО, слежения за его качеством необходимо производить соответствующее документирование. Чтобы делать это правильно, надо знать стандарты оформления подобных документов. Важно уделить внимание серии ISO 9000. CMM / CMMI — это набор методологий (моделей) совершенствования процессов разработки ПО. Знание CMMI позволяет QA инженеру грамотно оценивать проект и планировать необходимые процессы по обеспечению качества.  SQL SQL — язык запросов, который используется для взаимодействия с данными в реляционных базах данных. Тестировщику он пригодится для того, чтобы выполнять бэкенд-тестирование для проверки тестовых данных, вставки, удаления, обновления их значений в БД. Сказать точный уровень владения SQL нелегко, поскольку все зависит от сложности проекта. На каком-то сгодится базовый уровень SQL, а где-то необходимо быть весьма и весьма подкованным. А если тестирование не связано с бэкендом, то знания языка запросов вовсе не пригодятся. В общем и целом, тестировщик должен обладать следующими знаниями и умениями при работе с БД и SQL: умение распознавать различные типы БД; способность реализовать подключение к БД, используя разные клиенты SQL-соединений; понимание таблиц БД, ключей, индексов, типов отношений между таблицами; умение создавать простые запросы; понимание и умение разбирать по полочкам сложные запросы.    Веб-сервисы Веб-служба (или веб-сервис) — это идентифицируемая веб-адресом программная система со стандартизированными интерфейсами. Данный термин описывает стандартизированный способ интеграции веб-приложений с использованием различных протоколов, например: XML, TCP/IP, SOAP, WSDL и UDDI. Веб-служба представляет собой способ связи между двумя электронными устройствами по сети, такими веб-сервисами можно пользоваться независимо от компьютера, браузера или места доступа в Интернет (поиск, веб-почта, хранение документов, файлов, закладок и т. д.). К преимуществам веб-сервисов можно отнести: возможность создания необходимых кондиций для взаимосвязи программных компонентов, которые не будут зависеть от используемых платформ; веб-сервисы используют открытые стандартные протоколы; благодаря XML обеспечивается легкость в формировании и настройки веб-сервисов; использование HTTP гарантирует успешную взаимосвязь систем через межсетевой доступ. Веб-сервисы должны знать разработчики для корректной реализации ПО, а тестировщикам они нужны, чтобы понимать, как работает та или иная веб-система. Jira Система баг-трекинга, которая помогает выявлять, регистрировать и контролировать баги, найденные в разрабатываемом ПО, а также отслеживать процесс устранения этих ошибок. Является командным инструментом, что упрощает процесс взаимодействия разработчиков и тестировщиков, а также различную баг-трекинговую деятельность в принципе. Помимо прямого назначения помогает команде эффективнее работать, расставлять приоритеты и выбирать дальнейшие шаги оптимизации ПО. Postman Популярный и в то же время мощный набор инструментов для тестирования API (в среде разработчиков произносится как “а́пи”). API — это прикладной программный интерфейс; он указывает, каким образом следует обращаться к программе и какие ответы она обязана предоставлять пользователям. Postman относительно простой в использовании, имеет богатый интуитивный интерфейс. Он проверяет запросы с клиентской стороны на серверную, а также отклик со стороны бэкенда. Таким образом можно убедится, что на стороне сервера все работает, даже если фронтенд сторона еще не готова.  API можно тестировать и при помощи множества других программных средств (например, JMeter), однако, на сегодняшний день именно Postman является наиболее компромиссным инструментом тестирования запросов, сочетающим в себе простоту и высокую эффективность.     Git Git — это популярная система контроля версий, позволяющая вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Одним из самых известных антагонистов Git является SVN — централизованная система, в отличие от децентрализованной Git. Также, в работе вам пригодится и сервис онлайн-хостинга проектов, использующий систему контроля версий. В данном случае это GitHub. В паре с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Git нужен скорее для Automation QA, поскольку позволяет в удобном виде хранить код тестов с возможностью вернуться к рабочей версии тестов. Также, тестировщик сможет: иметь доступ к коду разработчиков; организовать список тестов и отслеживать его выполнение; тестировать код с разных устройств (при этом сам код лежит на удаленном репозитории Git); хранить различные настройки для приложения; выполнять другие взаимодействия. Методологии разработки Agile/Scrum Методологии разработки — это своеобразные путеводители по процессам эффективной разработки ПО. Их применение помогает организовать максимально продуктивную работу всех участников, которые напрямую или косвенно задействованы в разработке продукта в соответствии с выбранной стратегией. Agile — семейство гибких методологий разработки программного обеспечения, которое позволяет выпускать продукт небольшими частями, постоянно его дополняя и совершенствуя. При таком подходе технические и бизнес-подразделения работают совместно, ПО постоянно обновляется, обеспечивается быстрое принятие решений и выявление неправильных подходов, приложение проще обслуживать, а качество кода готового продукта более высокое. Agile имеет собственный манифест, который подробно описывает основные принципы, на которых строится гибкая разработка. Scrum является одной из популярнейших реализаций agile-подхода. Его используют многие команды, поэтому знание особенностей работы со scrum-моделью для QA инженера является не менее важным, чем для любого разработчика. Английский язык Знание английского языка — естественное требование для многих профессий в IT, поскольку большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде обычно знаний языка на уровне чтения технической документации, комментирования кода и составления баг-репортов вполне достаточно, однако, если возникнет необходимость вести переговоры и/или переписку с иностранным заказчиком, либо же вы будете в интернациональном коллективе, ваш уровень должен быть выше (тут уже очень желательно иметь уровень не ниже Upper Intermediate). Soft Skills Так называемые “гибкие (мягкие) навыки” — это внутренние качества специалиста, которые помогают ему выполнять работу максимально качественно и без лишнего напряжения. К примеру, для следователя-криминалиста прекрасными софт скиллами будут объективность, внимательность, умение чувствовать своего собеседника, прекрасное дедуктивное мышление и неугасающее стремление докапываться до правды. Для работника на ресепшене критически важными мягкими навыками есть коммуникабельность, дисциплинированность, пунктуальность, обходительность, вежливость и другие. Какие soft skills пригодятся тестировщику? Специалисту, который следит за качеством ПО и проверяет его на прочность, следует обладать следующими навыками: внимательность, умение концентрироваться на задаче; инициативность; усидчивость; организованность, проактивность, нацеленность на результат; стрессоустойчивость; эмпатия к пользователю и вместе с тем понимание бизнес-процессов (умение “переобуваться”); адаптивность; коммуникабельность; умение работать в команде; обладание логическим, системным, упорядоченным мышлением; умение правильно осуществлять декомпозицию (по отношению к системам, задачам, проблемам и т. д.); наличие шестого чувства + немного изобретательности; стремление учиться и умение передавать свои знания другим; Пользовательский опыт (не обязательно, но очень удобно) Было бы неплохо, если б перед тестированием приложения вы уже сталкивались с чем-то подобным в обычной жизни. Если работать предстоит в сфере игростроения, то ваш огромный геймерский опыт будет как нельзя кстати. Работа с проектами из веб-индустрии? Опыт сёрфинга в интернете (соцсети, интернет-магазины, онлайн-сервисы) облегчит понимание логики пользователей, их ожиданий и точек интереса.   Automation QA   Автоматизированный QA технически является надмножеством позиции Manual QA — он должен знать все то же самое, что и мануальный коллега плюс несколько новых инструментов. Эти инструменты мы сейчас и перечислим. Язык программирования  Если в разделе о Manual QA мы говорили об основах программирования, то автоматизатору понадобится именно уверенное владение конкретным языком. Обычно выбирают среди Java и Python, но это не предел. В тестировании можно применять и такие языки, как JavaScript, C#, Ruby, PHP, SmashTest и другие. При помощи выбранного языка вы будете писать автотесты, которые будут выполнять тестирование за человека. Программа работает — тестировщик анализирует результаты. Это упрощает работу, повышает скорость проведения тестов и снимает часть задач с человека. Фреймворк для тестирования  Для создания автотестов зачастую используется специальные программное обеспечение — фреймворки. Одним из популярнейших считается Selenium. Он мультиплатформен, ориентирован на работу с веб-приложениями и поддерживает множество популярных языков программирования. Более того, Selenium является основной технологией для множества других инструментов автоматизации браузеров, API и фреймворков. Инструменты нагрузочного тестирования Данный пункт является необязательным, но при этом очень желателен. Нагрузочное тестирование — это вид тестирования, при котором производится тест производительности целевого ПО при различных нагрузках от действий определенного количества пользователей. Наиболее известными инструментами проведения нагрузочного тестирования являются Gatling и JMeter.      Как стать тестировщиком?   Превращаем список приведенных выше технологий в туториал. Начинаем с пути Manual QA. Вы можете учиться самостоятельно — по книгам или видео курсам, а можете записаться на курсы тестирования для максимально эффективного обучения. В любом случае вначале вам нужно очень хорошо изучить теорию тестирования и базовые темы в IT: веб-технологии, API, клиент-серверная архитектура, базы данных, компьютерные сети, операционные системы (обратить особое внимание на Unix), мелкие подтемы, как, например, системы счисления и т. д. Конкретные темы по тестированию мы расписали в одном из первых наших разделов. Затем вам следует освоить написание тестовой документации (для чистого тестировщика), а QA понадобится еще и знание стандартов по обеспечению качественного ПО (ISO 9000) для дополнительного документирования, модель CMMI. Чтобы беспроблемно читать код разработчиков и понимать, что в нем происходит, следует владеть основами программирования. Для этого лучше выбрать либо Java, либо C# — документация по данным языкам очень информативна, есть большое комьюнити. Более того, множество программ обучения по данным языкам располагает прекрасным бэкграундом (история программирования, как работают вычислительные системы и как они обрабатывают информацию), который закладывает прочный фундамент программирования. Также, стоит освоить языки верстки HTML и CSS — они очень простые и используются в абсолютно всех веб-приложениях Для работы с обеспечением, которое использует базы данных, необходимо изучить основы SQL. Далее приступаем к изучению веб-сервисов, а после — к популярной баг-трекинговой системе Jira и мощному набору инструментов для тестирования API — Postman. Создание программного продукта обычно ведется в команде, потому знание методологии командной разработки является не менее важным, чем предыдущие технологии. Уделите время изучению принципов Agile/Scrum — с их помощью эффективно разрабатывается современное программное обеспечение. Методология гибкой разработки очень важна для тестировщика, поскольку он участвует в производственном цикле так же, как и разработчики. Также, не забудьте подтянуть ваш английский как минимум до уровня Intermediate. Он нужен для комфортного поиска нужной информации в интернете, чтения технической документации, работы с иностранными коллегами, а также — для возможного взаимодействия с заказчиком. Все же английский в IT еще никому не мешал и более того — давал новые карьерные возможности.  Чтобы ваша работа приносила вам удовольствие и вы себя не заставляли работать, вам следует обладать следующими софт скиллами: внимательность, умение концентрироваться на задаче; инициативность; усидчивость; организованность, проактивность, нацеленность на результат; стрессоустойчивость; эмпатия к пользователю и вместе с тем понимание бизнес-процессов (умение “переобуваться”); коммуникабельность; другие качества, которые мы указали в соответствующем разделе. С этими навыками и знаниями вы сможете приступать к практике. Изучите Git, начните работать каким-либо проектом: покройте его тестами, напишите тест-документацию. Опубликуйте наработки на GitHub — это даст вам ценный опыт работы с распределенной системой управления версиями и позволит проверить свои навыки в решении реальной задачи. Несколько хороших проектов, и полноценное портфолио готово, а с ним вы можете уверенно подавать резюме на вакансию мануального QA инженера. Если вас интересует автоматизированное тестирование, дополнительно изучите Python, либо Java + фреймворк для тестирования (Selenium, PyTest, Robot Framework или другой). Это позволит вам создавать скрипты, которые будут автоматически выполнять тестирование, избавляя вас от лишней рутины. Очень желательно иметь опыт работы с инструментами нагрузочного тестирования. Это может быть JMeter, Gatling или любой другой популярный аналог. Такой опыт даст вам дополнительный вес в глазах работодателя, что сыграет вам на руку, поскольку конкуренция за место тестировщика весьма высока.  Очень желательно, чтобы у вас был наставник, который мог бы следить за вашим прогрессом, отвечать на возникающие вопросы, давать полезные советы и направлять в нужное русло. Итоги В данной статье мы постарались сделать максимальный охват темы тестирования. Была рассмотрена не только специальность тестировщик, но и два её надмножества — QC и QA. Сейчас линии разграничения между этими тремя профессиями по большому счёту стёрты и прослеживаются лишь в серьезных компаниях. В более мелких же тестировщик может запросто выполнять функции QA. Тем не менее, в нашей статье высветлены те технологии и области знаний, которые подойдут как тестировщику, так и QA инженеру. Также, мы рассмотрели ответвления Manual QA и Automation QA. Как выяснилось, без знания мануального тестирования вам не стать автоматизированным тестером. Ведь как можно писать автотесты, если ты в принципе не понимаешь, что, где и как исследовать на предмет багов? Несмотря на высокую конкуренцию за место тестировщика, количество вакансий остается одним из самых больших на рынке труда в IT. Посмотрите популярные ресурсы по трудоустройству в IT и вы сами в этом убедитесь. Поэтому нами и были указаны некоторые необязательные технологии — мы хотим вооружить наших читателей максимально красноречивым стеком, дабы вы были на голову выше конкурентов. Приведенный в статье стек технологий является прочной основой QA специалиста — как мануального, так и автоматизированного. Если этот материал не дал вам в полной мере ответ на вопрос “как стать тестировщиком и что следует для этого учить?”, делимся с вами ссылкой на вебинар одного из авторов ITVDN — действующего QA Engineer Андрея Шевцова. Если вас интересует данное направление и вы хотите стать QA инженером, предлагаем вашему вниманию подборку курсов и вебинаров ITVDN, которые вы найдете на странице специальности Quality Assurance.     Желаем успехов в изучении IT технологий! Оставайтесь с ITVDN!

В этой статье вы найдёте несколько полезных советов для тех, кто хочет стать программистом. Совет 1. Определитесь с языком программирования Выбор языка программирования — первая трудность, с которой встречаются новички. Сколько программистов — столько и мнений о языках, поэтому выделить «лучший» среди них нельзя. Почему? Каждый язык создан для определённой области разработки и решения определённых задач. Для выбора языка программирования, ориентируйтесь на ваши желания. Какие программы и сервисы вы хотите создавать? Делать игры на Unity? Сайты на HTML, CSS и JavaScript? Или, может быть, бизнес-приложения на С# или Java? Python широко используется в науке для быстрых вычислений. При выборе учитывайте порог вхождения языка (Python, например, изучается быстрее и легче С++) и ваши предрасположенности. Кроме того, перед изучением любого языка стоит изучить основы программирования. Разберитесь, что такое двоичный код, компилятор, познакомьтесь с алгоритмами и шаблонами проектирования. Совет 2. Применяйте метод дробления материала Если вы решили стать программистом, вам нужно будет очень мнрогое изучить и запомнить. Сделать это «с наскока» будет трудно. Не хваатайтесь за все сразу. Ставьте перед собой небольшие реальные, достижимые цели. Например, изучайте одну тему за 1 день. При изучении любого языка начинайте с самых основ, постепенно продвигаясь вперёд. Закрепляйте пройденный материал практикой, если есть какие-то небольшие пробелы в знаниях — двигайтесь дальше, возможно, вы заполните их потом. Но не оставляйте слишком много «белых пятен», иначе запутаетесь. На помощь в структурировании информации вам придут различные техники запоминания (ассоциации, карточки) и ваш собственный дневник обучения, в котором вы можете записывать усвоенный материал, как говорят, «своими словами», и затем проверять его на практике. Совет 3.  Не стесняйтесь использовать детские обучающие программы и курсы. В детских программах часто подают упрощенные знания, основы основ. Не стесняйтесь пробовать детские игры и курсы, в которых материал усваивается значительно легче. Кроме того, это бываает весело! Прослушав материал в упрощенном виде, вы сможете понять его, и дальнейшее изучение программирования будет даваться вам значительно легче. Кроме того, к временной помощи детских курсов можно прибегнуть, если какой-то участок материала даётся вам с трудом, и понять его вы никак не можете. Прослушав упрощенный материал, вы получите взгляд со стороны и, возможно, наконец сможете понять материал. Совет 4. Разбирайте чужой код Это больше относится к практике. Разбирая чужой код, вы начнёте понимать, почему программа работает или не работает. Перенимая чужой опыт, вы получаете новые знания и фишки, которые помогут вам в будущем. Читая код другого программиста, вы улучшите своё общее понимание программирования и убережете себя от ошибок. Кроме того, разбор чужого кода также может помочь вам сдвинуться с мёртвой точки. Если вам что-то не понятно, то вы можете просмотреть чей-то код и получить его советы. Таким образом, вы сможете понять, как сделать правильно и почему часть программы у другого человека работает правильно, а у вас — нет. Совет 5. Читайте полезную литературу Не смотря на то, что сейчас больше людей предпочитают литературе курсы, статьи и видео, чтение актуальных книг по программированию поможет вам глубже изучить программирование. Некоторые книги вообще являются признанной классикой, например книга Роберта Мартина «Чистый Код» детально описывает процесс создания чистого кода, и указывает на ошибки, которые могут возникнуть при написании красивого кода. Фактически, эта книга — «библия» для тех, кто стремится писать чистый код. Поискав в Гугле другие книги по вашему направлению, вы можете скомбинировать их со справочниками, и получить «универсальный набор» программиста, в котором вы найдёте ответы на большинство своих вопросов. Общепризнанную литературу можно читать в переводе, но большинство актуальной литературы выходит в мир на английском, и переводится на русский с опозданием в год-два, когда уже всё поменялось. Поэтому дополнительный совет: уделите внимание изучению английского языка! С английским вы всегда сможете получать актуальную информацию, общаться с зарубежными программистами, английский облегчит вам изучение программирования в несколько раз, и, возможно, в будущем вы найдете работу в зарубежной компании. Совет 6. Запишитесь на курсы Для некоторых людей самостоятельное изучение программирование может даваться с трудом, ведь рядом нет никого, кто мог бы в любой момент ответить на их вопросы. Многим не понятно, с чего начинать обучение и как структурировать информацию.С наставником и одногруппниками вы будете продвигаться в обучении быстрее. Если вы хотите начать изучать программирование, вам будет интересно посмотреть записи вебинаров ITVDN из серии «С чего начать?», и «Как стать программистом?» . Ваши вопросы вы можете задать, обратившись в службу поддержки ITVDN. Консультанты нашего образовательного ресурса будут рады помочь вам.

Обзор SVG графика может быть анимирована с использованием анимационных тегов. Они были описаны в спецификации Animation SMIL. Рассмотрим эти теги: позволяет анимировать свойства в течение времени. это удобное сокращение, которое полезно для присвоения значений анимационных нечисловых атрибутов и свойств, таких как свойства opacity. который двигает вдоль траектории движения path. которая модифицирует значение цвета отдельных атрибутов или свойств с течением времени. В дополнение к элементам, определенных в SMIL, SVG включает расширения, совместимые с SMIL анимацией спецификации. Эти расширения включают в себя атрибуты, которые расширяют функционал элемента. Расширения SVG включают в себя: - дает возможность анимировать один из SVG атрибутов в течение промежутка времени, например, в качестве атрибута преобразования нового центра фигуры или преобразование фигуры и использование поворота вокруг одной из осей (Х, Y, Z). path(attr) - позволяет анимировать  вдоль определенного пути.    - используется в сочетании с animateMotion элемента для ссылки на траекторию движения, которая должна быть использована в качестве пути для движения. Элемент mpath входит внутрь animateMotion элемента перед закрывающим тегом. keypoints (attr) - задается в качестве атрибута для animateMotion, обеспечивая точный контроль скорости траектории движения анимации. rotate(attr) - используется в качестве атрибута для animateMotion для того, чтобы контролировать поворот относительно оси поворота. SVG анимации могут быть похожи на CSS анимации. Ключевые кадры создаются, объекты движутся. Но они могут сделать нечто, что CSS анимации не делает. Применение SVG Анимации SVG элементы можно стилизовать и анимировать и с помощью CSS. В принципе, любое преобразование или анимации перехода, которые могут быть применены к HTML элементу, также могут быть применены к SVG. Но существуют некоторые SVG свойства, которые не могут быть сделаны через CSS. Векторная версия путь, например, поставляется с набором данных path, который определяет траекторию этому пути. Эти данные могут быть изменены и анимированных через SMIL, но не CSS. Это потому, что SVG элементы описаны набором атрибутов, известных как SVG атрибуты представления. Если вы предпочитаете использовать JavaScript, я рекомендую использовать snap.svg, который описан как "в JQuery в SVG". Вот коллекция примеров. http://snapsvg.io/demos/ Если вы предпочитаете декларативный подход анимации, вы можете применять элементы SVG анимации, о которых я расскажу. Еще одно преимущество SMIL над JS анимацией в том, что JS анимации не работают, когда SVG встроен в качестве IMG или используется в качестве фона изображения в CSS. SMIL анимации работают в обоих случаях. Это большое преимущество, на мой взгляд. Поддержка браузеров Поддержка браузеров для SMIL анимации довольно приличная. Они воспроизводятся во всех браузерах, кроме IE. Подробный обзор поддержки браузеров вы можете посмотреть в таблице совместимости на caniuseit. Если вам нужно обеспечить альтернативный вариант для SMIL анимации, вы можете проверить поддержки браузера на лету, используя Modernizr. Если SMIL не поддерживается, вы можете предоставить какой-то запасной вариант (анимации JavaScript, например). Анимация атрибутов элемента из одного значения к другому в течение произвольного времени с указанием конечного состояния: from, by, to, dur и fill. Давайте рассмотрим с перемещением круга из одного положения в новое. Это можно сделать, изменив значение его атрибута сх (который определяет х - положение его центра). Мы собираемся использовать элемент, чтобы сделать это. Атрибуты, которым устанавливают числовые значения и цвета, как правило, анимированные с помощью . Для получения списка атрибутов, которые могут быть анимированными, обратитесь к этой таблице: http://www.w3.org/TR/SVG2/animate.html#AnimationAttributesAndProperties Чтобы изменить значение на другое в течение времени используются from, by, to, dur и fill. В дополнение к этому, вы также хотите указать, когда анимация должна начинаться с атрибутом начала. В приведенном примере, я определил круг, а затем вызываю анимацию на этом круге. Центр окружности перемещается из исходного положения - 500 единиц, до 1750 единиц вдоль оси х. Начальное значение установлено на кнопку мыши. Это означает, что круг будет двигаться, когда она нажата. Вы можете установить это значение к значению времени, а также. Например, начинают = "0s" начнет анимацию, как только страница загружена. Вы можете задержать анимацию, установив положительное значение времени. Например, начать = "6s" запустит анимацию через шесть секунды после нагрузки. Атрибут Dur похож на анимации-импульса в CSS. from - to атрибуты похожи на from to ключевых кадров в keyframe блока анимации в CSS: Повторяющиеся анимации с Repeat-Count Когда вы хотите воспроизвести анимацию несколько раз, вы можете сделать это с использованием атрибута RepeatCount. Можно указать, сколько раз вы хотите повторить или использовать ключевое слово, чтобы он без конца повторять. Так что, если мы должны были повторить анимацию вида круга в течение двух раз, код будет выглядеть так: Управление значениями ключевых кадров анимации: keyTimes и values. В CSS, мы можем задать значения, которые мы хотим, чтобы взять в определенные рамки во время анимации. 0%, 40 % , 80 % и 100% являются кадрами анимации. Анимация вдоль определенных путей: Хорошие примеры таких анимаций можно посмотреть здесь http://codepen.io/mileselam/pen/kprKm http://codepen.io/rossfenrick/pen/gpzJzz http://codepen.io/tmrDevelops/pen/yyveKv Так же более подробный пример есть на хабре http://habrahabr.ru/post/207908/ Функция прохода анимации Еще один важный элемент — это функция по которой будет проходить анимация. Среди всем известных функций анимации мы знаем ease, ease-in, ease-out, linear. Но если Вы хотите создать свою функцию прохождения анимации, то вам сюда http://cubic-bezier.com/ И напоследок лучший пример, от которого просто невозможно оторвать глаз http://codepen.io/thiennhat/pen/BNByzJ?editors=001 Пробуйте и у вас все получится!

Введение Чем больше браузеров начинает поддерживать CSS3, тем больше веб-разработчиков начинает использовать некоторые интересные возможности данной технологии. А именно, совмещая работу CSS3 в связке с HTML5 и JavaScript, реализовывать разного рода графические эффекты. В итоге и появилось сленговое название для этих подходов - «Flash-killer». В серии статей рассмотрим основные дополнения к CSS3, познакомимся с простейшими 2D и 3D преобразованиями. Свойства CSS3 – Transform являются, пожалуй, наиболее популярными преобразованиями, которые позволяют применять векторные изменения к HTML элементам, расположенным на странице. Вы сможете контролировать наклон, масштабирование и поворот любого элемента на web-странице. Стоит отметить, что подобные эффекты предпочтительно применять исключительно к изображениям и другим графическим элементам, которые не содержат текстовой информации, поскольку искажение текста существенно снижает его читаемость. Итак, познакомимся с основными функциями свойства transform: 1. Skew отвечает за наклон элемента, может принимать два параметра. Первый отвечает за ось X, другой за ось Y, иначе говоря, наклоны по горизонтали или вертикали.    <head>     <title>title>     <style>         div {             width: 400px;             height: 200px;             background-color: crimson;             margin:100px;             font-size:50px;             color: white;         }         #skew1 {             transform: skew(30deg);         }         #skew2 {             transform: skew(-30deg);         }         #skew3 {             transform: skew(10deg, 10deg);         }         #skew4 {             transform: skewX(10deg);             transform: skewY(-10deg);         }     style> head> <body>     <div id="clear">Example Textdiv>     <div id="skew1">Example Text 1div>     <div id="skew2">Example Text 2div>     <div id="skew3">Example Text 3div>     <div id="skew4">Example Text 4div> body>   2. Scale отвечает за масштабирование элемента по горизонтали и вертикали. Также используется и в частных случаях как ScaleX и ScaleY. <head>     <title>title>     <style>         div {             width: 400px;             height: 200px;             background-color: ActiveCaption;             margin: 150px;             font-size: 50px;             color: white;             transform: scale(1)         }         #scale {             transform: scale(1.5);         }          #scaleX {             transform: scaleX(1.5);         }           #scaleY {             transform: scaleY(1.7);         }      style> head> <body>     <div id="clear">Example Textdiv>     <div id="scale">Example Text 1div>     <div id="scaleX">Example Text 2div>     <div id="scaleY">Example Text 3div> body>   3. Rotate задает поворот элемента относительно точки трансформации, которая в свою очередь задается свойством transform-origin. В простейшем использовании обеспечивает поворот элемента за или против часовой стрелки относительно центра.  <head>     <title>title>     <style>         div {             width: 400px;             height: 200px;             background-color: chocolate;             margin:100px;             font-size:50px;             color: white;         }         #rotateL {             transform: rotate(-10deg);         }         #rotateR {             transform: rotate(10deg);         }      style> head> <body>     <div id="clear">Example Textdiv>     <div id="rotateL">Example Text 1div>     <div id="rotateR">Example Text 2div> body> 4. Translate обеспечивает сдвиг элемента на определенное значение по горизонтали и вертикали. TranslateX  отвечает за смещение по горизонтали, принимая положительное значение, сдвигает вправо, а принимая отрицательное значение, сдвигает влево. TranslateY  действует аналогично по вертикальной направленности. Положительное принятое значение сдвигает элемент вниз, а отрицательное - вверх. <head>     <title>title>     <style>          div {             width: 400px;             height: 200px;             background-color: crimson;             margin:100px;             font-size:50px;             color: white;         }         #translateL {             transform: translateX(-30px);         }         #translateR {             transform: translateX(30px);         }         #translateU {             transform: translateY(-20px);         }         #translateD {             transform: translateY(20px);         }     style> head> <body>     <div id="clear">Example Textdiv>     <div id="translateL">Example Text 1div>     <div id="translateR">Example Text 2div>     <div id="translateU">Example Text 3div>     <div id="translateD">Example Text 4div> body>   Гораздо эффектней подобные трансформации выглядят, когда выполняются при наведении курсора мыши на элемент. В этом же примере вы сможете увидеть, что можно использовать сразу несколько преобразований для вашего элемента на странице. <head>     <title>title>     <style>         #example {             width: 400px;             height: 400px;             background-color: #aa9fd5;             margin: 300px auto;             font-size: 50px;             color: white;         }             #example:hover {                 transform: skew(30deg) scale(1.5,1.5) rotate(40deg) translateY(150px);             }      style> head> <body>     <div id="example">Transformdiv> body>     Стоит помнить, что подобные манипуляции при статическом отображении не обеспечат у пользователя особого восхищения. Для того, чтобы привлечь внимание пользователя, стоит уделить время добавлению динамики на страницу. Об этом мы поговорим в следующих статьях из этого цикла. 

Введение Путь любого веб-разработчика начинается с маленького шага, который, как ни странно, приходится на исследование всемирной сети Internet и множества веб-сайтов, на которых ищется информация об устройстве  всемирной паутины. Всемирная паутина – это растущая вселенная взаимосвязанных веб-страниц и веб приложений, ее наполняет видео, фотографии и другой интерактивный контент. Она обеспечивает слаженное взаимодействие веб-технологий и браузеров, которые развивались для того, чтобы дать разработчикам возможность создавать новые поколения полезных и всеобъемлющих веб-ресурсов. Сегодняшний интернет – это плод деятельности открытого веб-сообщества, которое помогает стандартизировать и развивать такие технологии, как HTML5, CSS3, JavaScript и множество связанных с ними фреймворков. Стандарты помогают убедиться в том, что все новейшие технологии будут поддерживаться популярными браузерами. Но был ли веб таким всегда, с момента его зарождения? Веб 0.0 – эра зарождения интернета Современный Интернет появился в далеком 1969 году в виде первой в мире сети с динамической маршрутизацией сообщений ARPAnet, которая была ничем иным, как объединением трех сетей в Калифорнии и сетью в штате Юта. Правила, по которым были объединены эти сети, в будущем легли в основу Интернет-протокола (Internet Protocol, известного нам как IP). В 1972 году эта сеть стала открытой для университетов и исследовательских институтов. Веб 1.0 – эра «Read-only» веб-ресурсов До 1999 года возможности рядового пользователя Всемирной паутины были ограничены чтением информации на страницах сайтов, которая предоставлялась их владельцами и авторами. В тот период внедрения веб технологий появлялось множество статических веб-сайтов. Сайты были предельно простыми. Ярким примером того времени служит веб-сайт, опубликованный создателями технологии Интернет в августе 1991 года, копия которого и сегодня существует на пространствах Интернет-пространства. Первый веб-сайт: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Чтобы создавать такие страницы, нужно знать только HTML. В те времена этого было достаточно. Сейчас таким образом сверстанная страница воспринимается, как оскорбление эстетического вкуса. Все мы хотим, чтобы информация на веб сайте была представлена красиво, стильно, удобно и структурированно. Веб 2.0 – эра «Read and write» веб-ресурсов. Отсутствие активных форм взаимодействия пользователей с веб-ресурсом привело к зарождению концепции Web 2.0. Знаменательным стал 1999 год и рождение таких ресурсов, как LiveJournal (апрель 1999 года) и Blogger (август 1999 года). С этого момента в истории интернета все пользователи, не обладающие техническими навыками, смогли самостоятельно вести блоги и активно взаимодействовать с сообществом своих читателей. Владельцы веб-ресурсов превратились в провайдеров услуг по размещению генерируемого контента во Всемирной паутине. Эта эра подарила пользователям несколько абсолютно новых и безумно популярных сегодня понятий: блоги, социальные и медиа-ресурсы, потоковое видео. Для того, чтобы опубликовать контент в сети, теперь не нужно изучать специальные технологии. Все больше и больше сообщений публикуется в Twitter, Flickr, Facebook, YouTube и других ресурсах. Веб стал более технологичным – если раньше для отображения обновлений контента нужно было перегружать всю страницу, сейчас достаточно обновить ее часть благодаря технологии Ajax (Asynchronous JavaScript and XML). Все больше внимания уделяется серверной части при разработке веб приложений, поскольку именно она обеспечивает логику и надежность продукта в целом. Это, в свою очередь, подтолкнуло к развитию технологии ASP.NET. Веб 3.0 – эра семантической паутины Следующим шагом в истории Всемирной паутины является переход к семантической разметке и широкому распространению веб-сервисов. Семантическая разметка способствует более быстрому восприятию информации человеком. Для этого на странице делаются соответствующие выделения заголовков, разделов, ключевых слов – самых главных моментов, на которые должен обратить внимание пользователь. Логику пользователя стараются предугадать и помочь идти в нужном направлении. Ведь, если пользователь быстро не находит интересующую его информацию на этом ресурсе, он уйдет на другой сайт. Борьба за внимание пользователя – одна из особенностей эпохи Web 3.0. Эволюция всемирной паутины не остановиться до тех пор, пока будет увеличиваться количество производимой и публикуемой информации в сети и будут расти потребности пользователей. К этому стоит добавить, что информация генерируется не только пользователями, но и их устройствами, в фоновом режиме. Сможем ли мы грамотно распоряжаться этой информацией, рационально ее воспринимать – вопрос открытый. В любом случае нам стоит подготовиться к тому, что влияние web-технологий с каждым годом будет только увеличиваться.

Введение Наверное, каждый ASP.NET разработчик (или по крайней мере большинство) хочет иметь большое количество посетителей на своем сайте. Но посетители будут заходить на сайт, только если он будет на первых страницах Google или других поисковых систем. Поэтому каждый хочет видеть свой сайт в самом начале списка выдачи. За первые позиции идет нешуточная борьба, и Вы должны следить за каждым фактором оптимизации, влияющего на позицию в этом списке. Существует более 100 важных факторов, используемых поисковыми системами для оценки релевантности страницы.  Большинство из них – просто теории, так как Google, Yandex и т.д. не раскрывают свои алгоритмы ранжирования. Кроме того, их алгоритмы очень часто меняются для поддержки релевантности результатов поиска. Google не может вручную изменить позицию страниц, даже если он считает, что некоторые из них должны иметь более низкую позицию. Вместо этого поисковые системы пытаются исправить ошибку алгоритма. Из-за этого SEO – очень динамическая и шаткая область веб разработки, но существуют основы, необходимые всем для изучения. Уникальный заголовок (title) для каждой страницы Каждая страница сайта должна иметь свой уникальный заголовок. Он должен быть кратким, содержательным и обязательно включать в себя ключевые слова, релевантные контенту на странице. Нежелательно вставлять название компании в начале каждого заголовка, поисковые системы могут посчитать данный ход как спам. Тег title может быть отредактирован на любой стадии проекта, но, если у вас имеется система управления контентом (CMS), Вы можете изменять его через свойство Page.Title: [ C# ] Page.Title = "ITVDN.com"; [ VB.NET ]  Page.Title = "ITVDN.com"; Не используйте слишком длинные названия, так как поисковые системы обрезают тег title до 12-15 слов. Использования мета-тегов “Description” и “Keywords” Данные теги очень важны для поисковой оптимизации, но сейчас ими начали злоупотреблять. Сегодня мета-тег keywords - бесполезный инструмент, однако description по-прежнему остается основным ключевым тегом в SEO оптимизации. Google часто использует description при отображении результатов поиска в качестве текста под ссылкой на страницу. Поэтому, если у вас релевантный мета-тег description, Вы можете получить больше посещений, даже если Вы не на первых страницах поиска. Желательно установить уникальные описания для каждой страницы. Как и заголовок, Вы можете изменить данный мета-тег в разметке страницы, или динамически, на стороне сервера: [ C# ] protected void Page_Init(object sender, EventArgs e) {   // Тег description   HtmlMeta metaDescription = new HtmlMeta();   metaDescription.Name = "Description";   metaDescription.Content = "Видеокурсы, видеотренинги  для  программистов. Языки программирования и информационные технологии";   Page.Header.Controls.Add(metaDescription);   // Тег keywords   HtmlMeta metaKeywords = new HtmlMeta();   metaKeywords.Name = "Keywords";   metaKeywords.Content = "IT видео, Видео тренинги, видеокурсы, технологии Microsoft, видео обучение, ITVDN,Акции";   Page.Header.Controls.Add(metaKeywords); } [ VB.NET ] Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init   ' Тег description   Dim metaDescription As HtmlMeta = New HtmlMeta()   metaDescription.Name = "Description"   metaDescription.Content = "Видеокурсы, видеотренинги  для  программистов. Языки программирования и информационные технологии "   Page.Header.Controls.Add(metaDescription)     ' Тег keywords   Dim metaKeywords As HtmlMeta = New HtmlMeta()   metaKeywords.Name = "Keywords"   metaKeywords.Content = "IT видео, Видео тренинги, видеокурсы, технологии Microsoft, видео обучение, ITVDN,Акции"   Page.Header.Controls.Add(metaKeywords) End Sub Использование тега H1 Тег h1 – очень важный и в то же время очень простой способ улучшить Вашу позицию в результатах поиска. Лучше всего, если h1 будет иметь то же содержание, что и тег title. Просто поместите короткое, релевантное ключевое слово в теги h1 и title. Как и любой другой тег HTML, он изменяется в разметке, или динамически при добавлении runat="server" и установке его id: <h1 runat="server" id="MyPageHeader" >h1> Теперь вы можете манипулировать тегом h1 с помощью серверного кода ASP.NET: [ C# ] MyPageHeader.InnerText = "ITVDN.com"; [ VB.NET ]  MyPageHeader.InnerText = "ITVDN.com"; Переадресация url адреса в ASP.NET Иногда Вам нужно переместить страницу на другой URL или же полностью сменить домен. Типичный пример – смена ASP на ASP.NET. Для этого необходимо изменить расширения файлов с .asp на .aspx. Если посетитель заходит на Ваш старый адрес, он должен перенаправляться на новый адрес. Есть два вида переадресации: Временное перенаправление, выдающее сообщение “302 Found”. Используется очень редко. Постоянное перенаправление, выдающее “301 Moved Permanently”. Используется для передачи популярности (веса) на новый адрес. Дружественные URL для SEO Поисковые “web spiders” не любят непонятных символов в URL. Если Вы получаете данные из базы, чаще всего используется строка запроса вида /ShowProduct.aspx?id=23445. Данная гиперссылка выглядит достаточно логичной с точки зрения программирования, но неправильной для поисковых систем. Лучше использовать URL, содержащие ключевые слова, разделенные дефисом. Таким образом, вместо /ShowProduct.aspx?id?=23445 мы должны получить что-то вроде /My-Product-Name.aspx. Заметим, что URL, содержащая ключевые слова, легче читается человеком и лучше индексируется. ViewState и SEO в ASP.NET Существует предположение, что поисковые системы ограничены в чтении количества байтов для каждой страницы. Значение ViewState является скрытым полем на стороне клиента. Если у вас большой ViewState в начале страницы ASP.NET, то, возможно, “web spider” не увидит реального содержания страницы. Это может вредить ранжированию в результатах поиска. Самое простое решение проблемы – отключить ViewState, если он Вам не нужен. Но есть более правильный способ его отключения. В .NET Framework 3.5 SP1 введено новое свойство RenderAllHiddenFieldsAtTopOfForm. Установив значение на false, все генерируемые системой скрытые поля будут отображаться в конце страницы. Комментируйте и оценивайте данную статью.  Источник: http://www.codeproject.com/Articles/667340/SEO-For-ASP-NET-Web-Site