update Russian translation (#485)
Added testing, performance, network questions. Updated general, HTML, CSS, JS, coding, fun questions and contributors section.
This commit is contained in:
Artur Allaev
Rob Larsen
parent
c9fbe2816a
commit
824d39a422
|
|
@ -2,246 +2,280 @@
|
|||
|
||||
**Замечание:** Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).
|
||||
|
||||
Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).
|
||||
Также имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).
|
||||
|
||||
## <a name='toc'>Содержание</a>
|
||||
|
||||
1. [Первоначальные авторы](#contributors)
|
||||
1. [Авторы](#contributors)
|
||||
1. [Общие вопросы](#general)
|
||||
1. [Вопросы по HTML](#html)
|
||||
1. [Вопросы по JavaScript](#js)
|
||||
1. [Примеры кода на JavaScript](#jscode)
|
||||
1. [Вопросы по jQuery](#jquery)
|
||||
1. [Вопросы по CSS](#css)
|
||||
1. [Вопросы по JavaScript](#js)
|
||||
1. [Вопросы по тестированию](#testing)
|
||||
1. [Вопросы по производительности](#performance)
|
||||
1. [Вопросы по сетям](#network)
|
||||
1. [Примеры кода на JavaScript](#jscode)
|
||||
1. ["Светская беседа"](#fun)
|
||||
|
||||
#### [[⬆]](#toc) <a name='contributors'>Первоначальные авторы</a>
|
||||
#### [[⬆]](#toc) <a name='contributors'>Авторы</a>
|
||||
|
||||
* @bentruyman (http://bentruyman.com)
|
||||
* @cowboy (http://benalman.com)
|
||||
* @roger_raymond (http://twitter.com/iansym)
|
||||
* @ajpiano (http://ajpiano.com)
|
||||
* @paul_irish (http://paulirish.com)
|
||||
* @SlexAxton (http://alexsexton.com)
|
||||
* @boazsender (http://boazsender.com)
|
||||
* @miketaylr (http://miketaylr.com)
|
||||
* @vladikoff (http://vladfilippov.com)
|
||||
* @gf3 (http://gf3.ca)
|
||||
* @jon_neal (http://twitter.com/jon_neal)
|
||||
* @wookiehangover (http://wookiehangover.com)
|
||||
* @darcy_clarke (http://darcyclarke.me)
|
||||
Этот проект был запущен в 2009 году в сотрудничестве с [@paul_irish](https://twitter.com/paul_irish) [@bentruyman](https://twitter.com/bentruyman) [@cowboy](https://twitter.com/cowboy) [@ajpiano](https://twitter.com/ajpiano) [@SlexAxton](https://twitter.com/slexaxton) [@boazsender](https://twitter.com/boazsender) [@miketaylr](https://twitter.com/miketaylr) [@vladikoff](https://twitter.com/vladikoff) [@gf3](https://twitter.com/gf3) [@jon_neal](https://twitter.com/jon_neal) [@sambreed](https://twitter.com/sambreed) и [@iansym](https://twitter.com/iansym).
|
||||
|
||||
В настоящее время этот проект поддерживают:
|
||||
|
||||
* [roblarsen](https://github.com/roblarsen)
|
||||
* [cezaraugusto](https://github.com/cezaraugusto)
|
||||
* [vvscode](https://github.com/vvscode)
|
||||
|
||||
С тех пор он был активным благодаря этим [замечательным людям](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTORS.md).
|
||||
|
||||
#### [[⬆]](#toc) <a name='general'>Общие вопросы:</a>
|
||||
|
||||
* Вы пользуетесь Твиттером?
|
||||
* Если да, то кто присутствует в вашей ленте?
|
||||
* Кого из мировых front-end разработчиков вы знаете?
|
||||
* А российских front-end'щиков?
|
||||
* У Вас есть аккаунт на GitHub?
|
||||
* Если да, то за какими интересными проектами вы следите?
|
||||
* Какие блоги Вы читаете?
|
||||
* Какие системы управления версиями Вам приходилось использовать?
|
||||
* Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
|
||||
* Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
|
||||
* Можете ли пояснить разницу между progressive enhancement и graceful degradation?
|
||||
* Бонус, если также расскажете про feature detection (определение возможностей браузера)
|
||||
* Объясните, что означает "Семантическая разметка"
|
||||
* Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
|
||||
* Что вы изучили вчера/на этой неделе?
|
||||
* Что вас привлекает в программировании?
|
||||
* С какой технической сложностью вы недавно столкнулись и как с ней справились?
|
||||
* Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?
|
||||
* Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
|
||||
* Можете ли вы объяснить общие принципы относительно front-end безопасности или недавние проблемы, которые вы решили?
|
||||
* Какие действия вы лично предприняли в недавних проектах для повышения удобства использования вашего кода?
|
||||
* Расскажите о предпочтительной среде разработки.
|
||||
* С какими системами контроля версий вы знакомы?
|
||||
* Можете ли вы описать порядок действий при создании новой веб-страницы?
|
||||
* Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?
|
||||
* Можете ли вы описать разницу между прогрессивным улучшением и изящной деградацией?
|
||||
* Как можно оптимизировать загрузку внешних ресурсов на странице?
|
||||
* Комбинация из потенциальных решений:
|
||||
* Конкатенация
|
||||
* Минификация
|
||||
* Использование CDN
|
||||
* Кеширования
|
||||
* и т.д.
|
||||
* Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
|
||||
* Сколько ресурсов браузер может одновременно качать с одного домена?
|
||||
* Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
|
||||
* Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
|
||||
* Предложите использовать EditorConfig (http://editorconfig.org)
|
||||
* Останетесь верным своим привычкам
|
||||
* Выполните команду `:retab!`
|
||||
* Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
|
||||
* Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
|
||||
* Реализуйте примитивное слайд-шоу
|
||||
* Бонус, если Вы это сделаете без использования JS
|
||||
* Какие инструменты Вы используете для тестирования производительности кода?
|
||||
* JSPerf (http://jsperf.com/)
|
||||
* Dromaeo (http://dromaeo.com/)
|
||||
* и т.д.
|
||||
* Сколько ресурсов браузер может одновременно загружать с одного домена?
|
||||
* Какие есть исключения?
|
||||
* Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).
|
||||
* Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
|
||||
* Опишите, как бы вы реализовали примитивное слайд-шоу.
|
||||
* Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
|
||||
* Объясните важность стандартов и комитетов по стандартам
|
||||
* Объясните важность стандартов и комитетов по стандартам.
|
||||
* Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
|
||||
* Объясните, что такое ARIA и скринридеры, а также как сделать вебсайт доступным.
|
||||
* Какие преимущества и недостатки у CSS и JavaScript анимаций?
|
||||
* Что означает CORS и какую проблему решает?
|
||||
|
||||
#### [[⬆]](#toc) <a name='html'>Вопросы по HTML:</a>
|
||||
|
||||
* Для чего нужен `doctype` и сколько разновидностей Вы можете назвать?
|
||||
* В чем разница между standards mode и quirks mode?
|
||||
* В чем разница между HTML и XHTML?
|
||||
* Могут ли возникнуть проблемы при подаче страниц с типом `application/xhtml+xml`?
|
||||
* Как следует оформлять страницу, в которой контент может быть на разных языках?
|
||||
* Что нужно иметь в виду при разработке многоязычных сайтов?
|
||||
* Чем полезны `data-` атрибуты?
|
||||
* Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
|
||||
* Объясните разницу между cookies, sessionStorage и localStorage.
|
||||
* Объясните разницу между <script>, <script async> и <script defer>.
|
||||
* Почему стоит размещать CSS теги <link> между <head></head> и JS тегами <script> прямо перед </body>? Знакомы ли Вам какие-либо исключения из этой практики?
|
||||
* Для чего нужен `doctype`?
|
||||
* Как следует оформлять страницу, содержимое которой может быть на разных языках?
|
||||
* На что необходимо обратить внимание при разработке мультиязычных сайтов?
|
||||
* Для чего отлично подойдут `data-` атрибуты?
|
||||
* Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
|
||||
* Объясните разницу между `cookie`, `sessionStorage` и `localStorage`.
|
||||
* Объясните разницу между `<script>`, `<script async>` и `<script defer>`.
|
||||
* Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед `</body>`? Знаете ли вы исключения?
|
||||
* Что такое прогрессивный рендеринг?
|
||||
* Использовали ли Вы ранее HTML-подобные языки создания шаблонов? (Jinja2/Django/Jade/EJS)
|
||||
* Для чего используется атрибут `srcset` в теге изображения? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.
|
||||
* Приходилось ли вам работать с языками HTML-шаблонизации?
|
||||
|
||||
#### [[⬆]](#toc) <a name='css'>Вопросы по CSS:</a>
|
||||
|
||||
* Что такое специфичность CSS селекторов и как она работает?
|
||||
* В чем разница между "сбросом" и "нормализацией" CSS? Что бы вы выбрали и почему?
|
||||
* Объясните, что такое плавающие элементы (floats) и как они работают.
|
||||
* Объясните, что такое z-index и как формируется контекст наложения.
|
||||
* Объясните, что такое блочный контекст форматирования и как он работает.
|
||||
* Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?
|
||||
* Как вы решаете стилевые проблемы, связанные с особенностями браузеров?
|
||||
* Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями?
|
||||
* Какие приёмы/процессы вы при этом используете?
|
||||
* Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?
|
||||
* Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
|
||||
* Приходилось ли Вам использовать или реализовывать медиа-запросы или вёрстку под мобильные устройства?
|
||||
* Вы знакомы со стилизацией SVG?
|
||||
* Можете ли вы привести пример свойства `@media`, отличного от `screen`?
|
||||
* На что нужно обратить внимание при написании эффективного CSS?
|
||||
* Какие преимущества/недостатки в использовании CSS препроцессоров?
|
||||
* Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.
|
||||
* Как вы реализуете макет, который использует нестандартные шрифты?
|
||||
* Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
|
||||
* Объясните, что такое псевдоэлементы и для чего они нужны.
|
||||
* Объясните своими словами, что такое блочная модель.
|
||||
* Что делает ```* { box-sizing: border-box; }```? В чем его преимущества?
|
||||
* Что означает свойство `display` и можете ли вы привести несколько примеров его использования?
|
||||
* В чем разница между строчным и блочно-строчным элементом?
|
||||
* В чем разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?
|
||||
* Какими CSS фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?
|
||||
* Пользовались ли вы Flexbox или Grid?
|
||||
* Можете ли вы объяснить разницу между responsive сайтом и mobile-first?
|
||||
* Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?
|
||||
* В каком случае вы предпочтёте использовать `translate()` вместо абсолютного позиционирования и наоборот? И почему?
|
||||
|
||||
#### [[⬆]](#toc) <a name='js'>Вопросы по JavaScript:</a>
|
||||
|
||||
* Какими js-библиотеками Вы пользовались?
|
||||
* Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
|
||||
* Чем JavaScript отличается от Java?
|
||||
* Что-такое хэш-таблица?
|
||||
* Что такое `неопределенные (undefined)` и `необъявленные (undeclared)` переменные?
|
||||
* Объясните делегирование событий.
|
||||
* Объясните, как `this` работает в JavaScript.
|
||||
* Расскажите, как работает прототипное наследование.
|
||||
* Что вы думаете о AMD против CommonJS?
|
||||
* Объясните, почему это не является IIFE: `function foo(){ }();`.
|
||||
* Что необходимо изменить, чтобы это стало IIFE?
|
||||
* В чём различие между переменными, значение которых: `null`, `undefined` и не объявлено?
|
||||
* Как бы вы проверили их на каждое из этих значений?
|
||||
* Что такое замыкание и как/для чего его используют?
|
||||
* Как вы предпочитаете их использовать?
|
||||
* Где обычно используются анонимные функции?
|
||||
* Объясните "JavaScript module pattern" и где он (паттерн) применяется
|
||||
* Бонус, если упомянута чистота глобального пространства имен
|
||||
* Что, если Ваш модуль не заключен в пространство имен?
|
||||
* Как Вы организуете свой код? (module pattern, наследование)
|
||||
* Можете ли вы описать основное различие между циклом `forEach` и циклом `.map()`? И в каких случаях каждый из них используется?
|
||||
* В каких случаях обычно используются анонимные функции?
|
||||
* Как вы организуете свой код? (module pattern, classical inheritance)
|
||||
* В чем разница между host-объектами и нативными объектами?
|
||||
* В чем разница между последними двумя строчками:
|
||||
|
||||
```javascript
|
||||
function Person(){}
|
||||
|
||||
var person = Person()
|
||||
var person = new Person()
|
||||
```
|
||||
|
||||
* В чем разница между: `function Person(){}`, `var person = Person()`, и `var person = new Person()`?
|
||||
* В чем разница между `.call` и `.apply`?
|
||||
* Что делает и для чего нужна функци `Function.prototype.bind`?
|
||||
* Когда Вы оптимизируете свой код?
|
||||
* Объясните, как работает наследование в JavaScript?
|
||||
* Где до сих пор используется `document.write()`?
|
||||
* В большинстве генерируемых баннеров, хотя так делать не рекомендуется
|
||||
* Что делает и для чего нужна функция `Function.prototype.bind`?
|
||||
* В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
|
||||
* Расскажите об AJAX как можно более подробно
|
||||
* Объясните, как работает JSONP (и почему это не настоящий AJAX)
|
||||
* Расскажите об Ajax как можно более подробно.
|
||||
* Какие преимущества и недостатки в использовании Ajax?
|
||||
* Объясните, как работает JSONP (и почему это не совсем AJAX).
|
||||
* Вы когда-нибудь использовали шаблонизацию на JavaScript?
|
||||
* Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.)
|
||||
* Объясните, что такое "hoisting"
|
||||
* Объясните event bubbling
|
||||
* В чем разница между "атрибутом" (attribute) и "свойством" (property)?
|
||||
* Почему *не следует* расширять нативные JavaScript объекты?
|
||||
* Почему *следует* расширять нативные JavaScript объекты?
|
||||
* В чем разница между событиями `document load` и `document ready`?
|
||||
* Если да, то какие библиотеки вы использовали?
|
||||
* Расскажите, что такое "hoisting".
|
||||
* Объясните event bubbling.
|
||||
* В чём разница между "атрибутом" (attribute) и "свойством" (property)?
|
||||
* Почему не следует расширять нативные JavaScript объекты?
|
||||
* В чём разница между событием document load и событием document DOMContentLoaded?
|
||||
* В чем разница между `==` и `===`?
|
||||
* Как получить параметры из URL'а текущего окна?
|
||||
* Объясните `same-origin policy` в контексте JavaScript
|
||||
* Объясните `event delegation`
|
||||
* Какие Вы знаете паттерны организации наследования в JavaScript?
|
||||
* Объясните `same-origin policy` в контексте JavaScript.
|
||||
* Сделайте так, чтобы этот код работал:
|
||||
```javascript
|
||||
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
|
||||
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
* Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
|
||||
* Почему тернарный оператор так называется?
|
||||
* Что такое арность функции?
|
||||
* Что делает строчка `"use strict";`? Какие достоинства и недостатки от ее использования?
|
||||
* Напишите цикл, который перебирает числа до `100`, возвращая **"fizz"** на числа кратные `3`, **"buzz"** на числа кратные `5` и **"fizzbuzz"** на числа кратные `3` и `5`
|
||||
* Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
|
||||
* Для чего используют событие `load`? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
|
||||
* Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
|
||||
* Насколько вы опытны в работе с промисами (promises) и/или их полифиллами?
|
||||
* Какие преимущества и недостатки при использовании промисов вместо функций обратного вызова (callbacks)?
|
||||
* Каковы преимущества и недостатки написания JavaScript кода на языке, который компилируется в JavaScript?
|
||||
* Какие инструменты и методы вы используете при отладке кода?
|
||||
* Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
|
||||
* Объясните разницу между изменяемыми (mutable) и неизменяемыми (immutable) объектами.
|
||||
* Приведите пример неизменяемого объекта в JavaScript.
|
||||
* Какие преимущества и недостатки у неизменяемости?
|
||||
* Как вы можете достигнуть неизменяемости в вашем коде?
|
||||
* Объясните разницу между синхронными и асинхронными функциями.
|
||||
* Что такое цикл событий (event loop)?
|
||||
* В чем разница между стеком вызовов (call stack) и очередью событий (task queue)?
|
||||
* Объясните разницу при использовании `foo` в `function foo() {}` и `var foo = function() {}`
|
||||
* В чём различие между переменными, созданными при помощи `let`, `var` и `const`?
|
||||
* В чём разница между классом в ES6 и функцией-конструктором в ES5?
|
||||
* Можете ли вы привести пример использования стрелочных функции `=>`? Чем они отличаются от других функций?
|
||||
* Дайте определение функции высшего порядка.
|
||||
* Можете ли вы привести пример деструктуризации объекта или массива?
|
||||
* Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
|
||||
* Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?
|
||||
* В чём преимущества использования `spread` оператора и чем он отличается от `rest` оператора?
|
||||
* Каким образом можно обмениваться кодом между файлами?
|
||||
* Для чего используются статические члены класса?
|
||||
|
||||
#### [[⬆]](#toc) <a name='testing'>Вопросы по тестированию:</a>
|
||||
|
||||
* Какие преимущества/недостатки в тестировании собственного кода?
|
||||
* Какие инструменты вы будете использовать для тестирования работоспособности своего кода?
|
||||
* В чём различие между юнит-тестами и функциональными/интеграционными тестами?
|
||||
* Для чего предназначены линтеры (code style linting tool)?
|
||||
|
||||
#### [[⬆]](#toc) <a name='performance'>Вопросы по производительности:</a>
|
||||
|
||||
* Какие инструменты вы используете, чтобы найти недостатки в производительности вашего кода?
|
||||
* Какие вы знаете способы улучшения производительности при скроллинге на вебсайте?
|
||||
* Объясните разницу между layout, painting и compositing.
|
||||
|
||||
#### [[⬆]](#toc) <a name='network'>Вопросы по сетям:</a>
|
||||
|
||||
* Почему лучше загружать ресурсы для сайта с нескольких доменов?
|
||||
* Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.
|
||||
* В чём различия между Long-Polling, Websockets и Server-Sent Events?
|
||||
* Опишите следующие заголовки HTTP-запросов и ответов:
|
||||
* Разницу между Expires, Date, Age и If-Modified-...
|
||||
* Do Not Track
|
||||
* Cache-Control
|
||||
* Transfer-Encoding
|
||||
* ETag
|
||||
* X-Frame-Options
|
||||
* Что такое HTTP методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.
|
||||
|
||||
#### [[⬆]](#toc) <a name='jscode'>Примеры кода на JavaScript</a>
|
||||
|
||||
*Вопрос: Чему равно `foo`?*
|
||||
```javascript
|
||||
~~3.14
|
||||
var foo = 10 + '20';
|
||||
```
|
||||
Вопрос: Какое значение возвращает данное предложение?
|
||||
**Ответ: 3**
|
||||
|
||||
*Вопрос: Что выводит код ниже?*
|
||||
```javascript
|
||||
console.log(0.1 + 0.2 == 0.3);
|
||||
```
|
||||
|
||||
*Вопрос: Как сделать, чтобы это выражение работало?*
|
||||
```javascript
|
||||
add(2, 5); // 7
|
||||
add(2)(5); // 7
|
||||
```
|
||||
|
||||
*Вопрос: Какое значение возвращает данное выражение?*
|
||||
```javascript
|
||||
"i'm a lasagna hog".split("").reverse().join("");
|
||||
```
|
||||
Вопрос: Какое значение возвращает данное предложение?
|
||||
**Ответ: "goh angasal a m'i"**
|
||||
|
||||
*Вопрос: Чему равно `window.foo`?*
|
||||
```javascript
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
Вопрос: Чему равно window.foo?
|
||||
**Ответ: "bar"**,
|
||||
только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение
|
||||
|
||||
*Вопрос: Что покажут эти два alert?*
|
||||
```javascript
|
||||
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
|
||||
var foo = "Hello";
|
||||
(function() {
|
||||
var bar = " World";
|
||||
alert(foo + bar);
|
||||
})();
|
||||
alert(foo + bar);
|
||||
```
|
||||
Вопрос: Что покажут эти два alert?
|
||||
**Ответ: "Hello World" и ReferenceError: bar is not defined**
|
||||
|
||||
*Вопрос: Чему равно `foo.length`?*
|
||||
```javascript
|
||||
var foo = [];
|
||||
foo.push(1);
|
||||
foo.push(2);
|
||||
```
|
||||
Вопрос: Чему равно foo.length?
|
||||
**Ответ: `2`**
|
||||
|
||||
*Вопрос: Чему равно `foo.x`?*
|
||||
```javascript
|
||||
var foo = {};
|
||||
foo.bar = 'hello';
|
||||
```
|
||||
Вопрос: Чему равно foo.length?
|
||||
**Ответ: `undefined`**
|
||||
|
||||
|
||||
#### [[⬆]](#toc) <a name='jquery'>Вопросы по jQuery:</a>
|
||||
|
||||
* Объясните "chaining".
|
||||
* Объясните "deferreds".
|
||||
* Какие Вы знаете приемы оптимизации кода, использующего jQuery?
|
||||
* Что делает `.end()`?
|
||||
* Как добавить пространство имён к обработчику событий? Для чего это нужно?
|
||||
* Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
|
||||
* Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc.
|
||||
* Что такое очередь эффектов (fx queue)?
|
||||
* В чем разница между `.get()`, `[]`, и `.eq()`?
|
||||
* В чем разница между `.bind()`, `.live()`, и `.delegate()`?
|
||||
* В чем разница между `$` и `$.fn`? Что вообще такое `$.fn`?
|
||||
* Оптимизируйте данный селектор:
|
||||
```javascript
|
||||
$(".foo div#bar:eq(0)")
|
||||
var foo = {n: 1};
|
||||
var bar = foo;
|
||||
foo.x = foo = {n: 2};
|
||||
```
|
||||
|
||||
#### [[⬆]](#toc) <a name='css'>Вопросы по CSS:</a>
|
||||
*Вопрос: Что выводит код ниже?*
|
||||
```javascript
|
||||
console.log('one');
|
||||
setTimeout(function() {
|
||||
console.log('two');
|
||||
}, 0);
|
||||
console.log('three');
|
||||
```
|
||||
|
||||
* Что такое "reset" CSS и для чего он нужен?
|
||||
* Объясните, что такое плавающие элементы (floats) и как они работают?
|
||||
* Какие вы знаете методы запрета обтекания (clearing) и какие где применяются?
|
||||
* Что такое CSS спрайты? Как они реализуются на странице или сайте?
|
||||
* Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете?
|
||||
* CSS property hacks, conditionally included .css files...
|
||||
* Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
|
||||
* Какие приёмы/процессы Вы при этом используете?
|
||||
* Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
|
||||
* Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
|
||||
* Приходилось ли Вам использовать или реализовывать media queries или верстку под мобильные устройства?
|
||||
* Приходилось ли Вам стилизовать SVG?
|
||||
* Как оптимизировать страницы для печати?
|
||||
* Какие есть подводные камни в оптимизации производительности CSS?
|
||||
* Вы используете CSS препроцессоры? (SASS, Compass, Bourbon, Stylus, LESS)
|
||||
* Если да, расскажите, что Вам в них нравится и не нравится?
|
||||
* Как Вы сверстаете макет, который использует нестандартные шрифты?
|
||||
* Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
|
||||
* Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
|
||||
* Приходилось ли сталкиваться с Retina-дисплеями?
|
||||
* Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
|
||||
* Если да, то в чем её суть? Расскажите о системе нотификации селекторов.
|
||||
*Вопрос: В чем разница между этими четырьмя промисами (promises)?*
|
||||
```javascript
|
||||
doSomething().then(function () {
|
||||
return doSomethingElse();
|
||||
});
|
||||
|
||||
doSomething().then(function () {
|
||||
doSomethingElse();
|
||||
});
|
||||
|
||||
doSomething().then(doSomethingElse());
|
||||
|
||||
doSomething().then(doSomethingElse);
|
||||
```
|
||||
|
||||
#### [[⬆]](#toc) <a name='fun'>"Светская беседа":</a>
|
||||
|
||||
* Самое крутое, что Вы когда либо делали и чем гордитесь?
|
||||
* Вы знаете секретный жест HTML5-банды?
|
||||
* ([непереводимый юмор](https://vimeo.com/18848658)) Are you now, or have you ever been, on a boat.
|
||||
* Что Вы больше всего любите в Ваших инструментах разработки?
|
||||
* У Вас есть какие-нибудь личные проекты?
|
||||
* Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода.
|
||||
* Засеките, через сколько времени кандидат перевернет листок
|
||||
* Пират или ниндзя?
|
||||
* Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну
|
||||
* Чем бы Вы занимались, если бы не Web-разработкой?
|
||||
* Какая Ваша любимая "фишка" Internet Explorer?
|
||||
* Закончите предложение: Brendan Eich и Doug Crockford являются __________ языка JavaScript.
|
||||
* jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии...
|
||||
* Самое крутое, что вы когда-либо делали и чем гордитесь?
|
||||
* Что вы больше всего любите в ваших инструментах разработки?
|
||||
* Кто из фронтенд-сообщества вас вдохновляет?
|
||||
* У вас есть какие-нибудь личные проекты? Какого рода?
|
||||
* Какая ваша любимая "фишка" Internet Explorer?
|
||||
* Какой кофе вы предпочитаете?
|
||||
|
|
|
|||
Loading…
Reference in New Issue