├── .gitignore ├── Bulgarian └── README.md ├── Chinese-Traditional └── README.md ├── Chinese └── README.md ├── Croatian └── README.md ├── Czech └── README.md ├── Danish └── README.md ├── Dutch └── README.md ├── French └── README_FR.md ├── German └── README.md ├── Hungarian └── README.md ├── Italian └── README_IT.md ├── Japanese └── README.md ├── Korean ├── README_KR.md └── Reference_KR.md ├── Latvian └── README.md ├── Polish └── README_PL.md ├── Portuguese └── README.md ├── README.md ├── Romanian └── README.md ├── Russian └── README_RU.md ├── Serbian └── README.md ├── Slovakian └── README.md ├── Slovenian └── README.md ├── Spanish └── README_ES.md ├── Swedish └── README.md └── Turkish └── README_TR.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .npm-debug.log 3 | tmp 4 | .DS_Store 5 | .DS_Store? 6 | ._* -------------------------------------------------------------------------------- /Bulgarian/README.md: -------------------------------------------------------------------------------- 1 | #Въпроси за интервю за front-end разработчици 2 | 3 | Това репозитори съдържа въпроси от интервюта на front-end разработчици, които могат да бъдат използвани за отсяване на потенциални кандидати. Не препоръчваме използването на всеки въпрос за всеки кандидат (това би отнело часове). Избирането на няколко въпроса от списъка би могло да помогне да се проверят търсените умения у кандидатите. 4 | 5 | Статията [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) на [Rebecca Murphey](http://rmurphey.com/) също е чудесен ресурс за четене преди провеждането на интервю. 6 | 7 | **Бележка:** Имайте предвид, че много от тези въпроси могат да породят интересни дискусии и да ви помогнат по-добре да проверите познанията и начина на мислене на кандидата, отколкото ако получавате директен отговор. 8 | 9 | ## Съдържание 10 | 11 | 1. [Участници в проекта](#contributors) 12 | 1. [Общи въпроси](#general) 13 | 1. [HTML въпроси](#html) 14 | 1. [CSS въпроси](#css) 15 | 1. [JS въпроси](#js) 16 | 1. [jQuery въпроси](#jquery) 17 | 1. [Въпроси, свързани с програмиране](#jscode) 18 | 1. [Забавни въпроси](#fun) 19 | 1. [Допълнителни ресурси](#references) 20 | 21 | ####[[⬆]](#toc) Участници в проекта: 22 | 23 | Мнозинството от въпроси са взети от [oksoclap](http://oksoclap.com/) измислени от [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) и благодарение на: 24 | 25 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 26 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 27 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 28 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 29 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 30 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 31 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 32 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 33 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 34 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 35 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 36 | 37 | ####[[⬆]](#toc) Общи въпроси: 38 | 39 | * Какво научихте вчера / тази седмица? 40 | * Какво ви привлича в писането на код? 41 | * Какви неща свързани с потребителския интерфейс, сигурността, бързодействието, SEO, поддръжката или технологиите взимате предвид, когато създавате уеб приложения или сайтове? 42 | * Разкажете за предпочитаната среда за разработка. (операционна система, редактор, браузър, инструменти и т.н.) 43 | * Можете ли да обясните последователността от действия, които извършвате, когато създавате уеб страници? 44 | * Можете ли да обясните разликите между progressive enhancement и graceful degradation? 45 | * Бонус точки за обяснението на feature detection (определяне на това, какво поддържа браузъра и какво не) 46 | * Обяснете какво означава "Semantic HTML". 47 | * Как бихте оптимизирали зареждането на ресурси за дадена уеб страница? 48 | * Има различни техники, които решават този проблем. Сред тях са: 49 | * Събиране на няколко файла заедно 50 | * Минифициране на файловете (премахване на празни места, махане на коментари и т.н.) 51 | * Използване на CDN за доставяне на ресурсите 52 | * Кеширане 53 | * и т.н. 54 | * Защо е добра идея да сайтовете да свалят ресурсите от няколко различни домейна? 55 | * По колко ресурса едновременно свалят браузърите от даден домейн? 56 | * Назовете 3 начина да намалите скоростта на зареждане на дадена страница. (забележимата или реалната скорост на зареждане) 57 | * Ако се присъедините към проект, който използва табулации, а вие използвате разстояния за отстъп, какво ще направите? 58 | * Предложете EditorConfig (http://editorconfig.org) или подобен проект 59 | * Използвайте конвенцията на проекта 60 | * `Използвайте :retab! командата` 61 | * Реализирайте примерно слайд-шоу 62 | * Бонус точки, ако не използвате JS. 63 | * Какви инструменти използвате за да тествате бързодействието на вашия код? 64 | * Profiler, JSPerf, Dromaeo 65 | * Ако можете да научите много добре 1 технология тази година, каква ще е тя? 66 | * Каква е разликата между Long-Polling, Websockets и SSE? 67 | * Обяснете важността на стандартите и организациите за стандартизация. 68 | * Какво е FOUC? Как се справяте с FOUC? 69 | 70 | ####[[⬆]](#toc) HTML въпроси: 71 | 72 | * Какво прави `doctype`? 73 | * Каква е разликата между standards mode и quirks mode? 74 | * Какви са ограниченията при XHTML страниците? 75 | * Има ли проблеми при обработката на страници с `application/xhtml+xml`? 76 | * Как връщате страници със съдържание на няколко езика? 77 | * Какви неща трябва да се имат предвид, когато правите дизайн или разработвате многоезични страници? 78 | * За какво служат HTML атрибутите, които започват с `data-`? 79 | * Представете си HTML5 като отворена уеб платформа. Кои са градивните елементи на HTML5? 80 | * Обяснете разликата между бисквитки, sessionStorage и localStorage. 81 | 82 | ####[[⬆]](#toc) CSS въпроси: 83 | 84 | * Обяснете както е "reset" CSS файл и за какво е необходим. 85 | * Обяснете плаващите елементи (floats) и как работят. 86 | * Кои са различните clearing техники и кои в какъв контекст се използват? 87 | * Обяснете CSS sprite-овете, и как можете да ги вкарате на уеб страница или сайт. 88 | * Кои са любимите ви техники, които заменят картинките и в кои случаи кои от тях използвате? 89 | * Коя техника предпочитате: CSS свойства за всеки браузър, условно включени .css файлове, или... нещо друго? 90 | * Как показвате страниците си на браузъри, които не поддържат част от възможностите на HTML5? 91 | * Какви техники/процеси използвате? 92 | * Какви са различните начини визуално да скриете съдържание от уеб страницата (и да го направите видимо само за екранните четци)? 93 | * Използвали ли сте грид система и ако да, коя предпочитате? 94 | * Използвали ли сте media queries или специфичен за мобилните платформи layouts или CSS? 95 | * Запознати ли сте със стилизирането на SVG? 96 | * Как оптимизирате вашите уеб страници за принтиране? 97 | * Кои са някои от "триковете" за писане на ефективен CSS? 98 | * Какви са предимствата/недостатъците при използване на SASS, Compass, Stylus, LESS и подобни? 99 | * Опишете какво ви харесва и не ви харесва при използването им. 100 | * Как реализирате уеб дизайни, които използват нестандартни фонтове? 101 | * Уеб фонтове (фонт сървиси като: Google Webfonts, Typekit и т.н.) 102 | * Обяснете как уеб браузърите разбират кои елементи отговарят на даден CSS селектор. 103 | * Как разбирате box модела и как казвате на уеб браузъра чрез CSS да рендира вашия лейаут с различен box модел. 104 | 105 | ####[[⬆]](#toc) JS въпроси: 106 | 107 | * Обяснете делегатите на събития 108 | * Обяснете как работи `this` в JavaScript 109 | * Обяснете как работят прототипните интерфейси 110 | * Как тествате вашия JavaScript? 111 | * AMD или CommonJS? 112 | * Какво е хеш-таблица? 113 | * Обяснете защо този код не работи като IIFE: `function foo(){ }();`. 114 | * Какво е нужно да се промени, за да може кодът да работи като IIFE? 115 | * Каква е разликата между променлива, която е: `null`, `undefined` или `недекларирана`? 116 | * Как проверявате всяко от тези състояния на променливите? 117 | * Какво е closure? Как и защо се използва? 118 | * Какви са типичните употреби на анонимните функции? 119 | * Обяснете "JavaScript модул патърна" и кога се използва. 120 | * Бонус точки за споменаване на "замърсяване на глобалния scope". 121 | * Какво ще стане ако модулите нямат namespace? 122 | * Как организирате своя код? (модул патърн, класическо наследяване?) 123 | * Каква е разликата между host обекти и native обекти? 124 | * Каква е разликата между: `function Person(){}`, `var person = Person()` и `var person = new Person()`? 125 | * Каква е разликата между `.call` и `.apply`? 126 | * Обяснете `Function.prototype.bind`? 127 | * Кога оптимизирате кода си? 128 | * Можете ли да обясните как работи наследяването в JavaScript? 129 | * В какви случаи бихте използвали `document.write()`? 130 | * Повечето генерирани реклами все още използват `document.write()` 131 | * Каква е разликата между feature detection, feature inference, и използването на информация, кой е браузъра? 132 | * Обяснете AJAX във възможно най-много детайли. 133 | * Обяснете как работи JSONP (и защо не е точно AJAX) 134 | * Използвали ли сте JavaScript темплейти? 135 | * Ако да, коя библиотека сте използвали? (Mustache.js, Handlebars и т.н.) 136 | * Обяснете "hoisting". 137 | * Обяснете event bubbling-а. 138 | * Каква е разликата между "атрибут" и "свойство"? 139 | * Защо extending built в JavaScript обктите не е добра идея? 140 | * Защо extending built е добра идея? 141 | * Каква е разликата между събитията "document load" и "document ready"? 142 | * Каква е разликата между `==` и `===`? 143 | * Обяснете как да вземете query string параметъра от адреса в браузъра. 144 | * Обяснете same-origin policy-то от гледна точка на JavaScript. 145 | * Опишете патърните за наследяване в JavaScript. 146 | * Оправете кода, така че да работи: 147 | ```javascript 148 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 149 | ``` 150 | * Опишете стратегия за memoization (избягване на повторните изчисления) в JavaScript. 151 | * Защо тернарният оператор се нарича така? Какво означава думата "тернарен"? 152 | * Какво е arity на функция? 153 | * Какво е `"use strict";`? Какви са предимствата и недостатъците от слагането му в кода? 154 | 155 | ####[[⬆]](#toc) jQuery въпроси: 156 | 157 | * Обяснете "chaining". 158 | * Обяснете "deferreds". 159 | * Какви специфични за jQuery оптимизации, можете да направите? 160 | * Какво прави `.end()`? 161 | * Как и защо бихте сложили bound event handler в namespace? 162 | * Назовете 4 различни типа стойности, които можете да подадете на jQuery метод. 163 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 164 | * Какво е effects (или fx) queue? 165 | * Каква е разликата между `.get()`, `[]`, и `.eq()`? 166 | * Каква е разликата между `.bind()`, `.live()`, и `.delegate()`? 167 | * Каква е разликата между `$` и `$.fn`? Или просто: Какво е `$.fn`? 168 | * Оптимизирайте този селектор: 169 | ```javascript 170 | $(".foo div#bar:eq(0)") 171 | ``` 172 | 173 | ####[[⬆]](#toc) Въпроси, свързани с програмиране: 174 | 175 | 176 | ```javascript 177 | modulo(12, 5) // 2 178 | ``` 179 | *Въпрос: Имплементирайте функция за намиране на остатък от деление която отговаря на горното условие (да връща 2 при аргументи 12 и 5)* 180 | 181 | ```javascript 182 | "i'm a lasagna hog".split("").reverse().join(""); 183 | ``` 184 | *Въпрос: Каква стойност ще върне горният израз?* 185 | 186 | **Отговор: "goh angasal a m'i"** 187 | 188 | ```javascript 189 | ( window.foo || ( window.foo = "bar" ) ); 190 | ``` 191 | *Въпрос: Каква е стойността на `window.foo`?* 192 | 193 | **Отговор: "bar", ако `window.foo` има стойност `false`, иначе стойността на `window.foo`)** 194 | 195 | ```javascript 196 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 197 | ``` 198 | *Въпрос: Какво ще изкарат двете alert функции от горния код?* 199 | 200 | **Отговор: "Hello World" и ReferenceError: bar is not defined** 201 | 202 | ```javascript 203 | var foo = []; 204 | foo.push(1); 205 | foo.push(2); 206 | ``` 207 | *Въпрос: Каква е стойността на `foo.length`?* 208 | 209 | **Отговор: `2`** 210 | 211 | ####[[⬆]](#toc) Забавни въпроси: 212 | 213 | * Кое е най-якото нещо, което сте писали и от което сте най-горд? 214 | * Кое най-много ви допада в инструментите за разработчици, които използвате? 215 | * Разработвате ли някакви проекти като хоби? Какви? 216 | * Какво най-много ви харесва в Internet Explorer? 217 | 218 | ####[[⬆]](#toc) Допълнителни ресурси: 219 | 220 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 221 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 222 | * http://css-tricks.com/interview-questions-css/ 223 | -------------------------------------------------------------------------------- /Chinese-Traditional/README.md: -------------------------------------------------------------------------------- 1 | # 前端工程師面試問題集 2 | 3 | @版本 2.1.0 4 | 5 | 譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文。翻譯不好地方請協助pull request. 6 | 7 | 此 repository 包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。 8 | 9 | [Rebecca Murphey](http://rmurphey.com/) 的 [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) 也是一篇很棒且值得讀的文章在你開始面試之前。 10 | 11 | **注意：** 請記住一點，很多問題都是隨情況而變化，能引發很多有趣的討論，比直接的標準答案更能讓你瞭解此人的能力。 12 | 13 | ## 目錄 14 | 15 | 1. [最初貢獻者](#contributors) 16 | 1. [常見問題](#general) 17 | 1. [HTML 規格問題集](#html) 18 | 1. [CSS 規格問題集](#css) 19 | 1. [JS 規格問題集](#js) 20 | 1. [jQuery 規格問題集](#jquery) 21 | 1. [程式碼問題集](#jscode) 22 | 1. [有趣問題](#fun) 23 | 1. [其他參考資料](#references) 24 | 25 | ####[[⬆]](#toc) 最初貢獻者: 26 | 多數的問題都是從 [oksoclap](http://oksoclap.com/) 上的一個討論串截取出來，原創作人為 [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) 並由以下的人員所貢獻： 27 | 28 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 29 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 30 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 31 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 32 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 33 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 34 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 35 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 36 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 37 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 38 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 39 | * [@iansym](http://twitter.com/iansym) 40 | 41 | ####[[⬆]](#toc) 常見問題： 42 | 43 | * 你昨天或這週學習了什麼？ 44 | * 寫程式的哪部份最讓你感到很興奮或是有興趣？ 45 | * 當你開發Web應用程式或網站時，針對UI、安全性、效能、SEO、維護性，以及技術，你考量的點是什麼？ 46 | * 說說你喜好的開發環境 (作業系統, 編輯器, 瀏覽器, 開發工具 … 之類) 47 | * 你最熟悉哪一套版本控制系統？ 48 | * 你可以描述你在開發一個網站時的工作流程嗎？ 49 | * 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎？ 50 | * 加分題：描述這兩項的特色？ 51 | * 描述什麼是"Semantic HTML"？ 52 | * 你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)？ 53 | * 可能的解決方法包含如下： 54 | * File concatenation (檔案合併) 55 | * File minification (最小化文檔) 56 | * CDN Hosted (CDN託管) 57 | * Caching (快取) 58 | * …之類 59 | * 為什麼用多個域名來放置網站資源會比較好？ 60 | * 瀏覽器一次能在同一個域名下載多少資源？ 61 | * 說出三種能加快網頁讀取速度的方法？ (感覺上的速度或是真正的讀取時間) 62 | * 如果你加入了一個專案，但是他們的程式碼用tabs，但是你習慣用spaces (空白鍵)，你會怎麼做？ 63 | * 建議此專案使用，例如：EditorConfig (http://editorconfig.org) 64 | * 訂定一個公約 (保持一致) 65 | * `issue :retab! command` (retab! 在vim中用來把所有spaces換成tabs) 66 | * 寫一個簡易的投影片頁面 67 | * 加分如果沒有用到 JavaScript 68 | * 你用什麼工具來測試你的程式碼效能？ 69 | * Profiler, [JSPerf](http://jsperf.com/), [Dromaeo](http://dromaeo.com/) 70 | * 如果今年你能精通一項技術，那會是什麼？ 71 | * Long-Polling, Websockets, SSE(Server-Sent Event)之間有什麼差異？ 72 | * 描述標準和製定標準機構的重要性？ 73 | * 什麼是 FOUC？ 你怎麼避免 FOUC? 74 | * 請詳細描述當您在網址列打入網址開始到最後網頁呈現在螢幕前的整個流程 75 | 76 | ####[[⬆]](#toc) HTML 規格問題集: 77 | 78 | * `doctype` 做什麼用的？ 79 | * standards mode 和 quirks mode 有什麼不同？ 80 | * 使用 XHTML 有什麼限制？? 81 | * 如果網頁使用 `application/xhtml+xml` 會有問題嗎？ 82 | * 你怎麼做一個需要支持多國語言的網頁？ 83 | * 當開發和設計一個多國語言網站時，有什麼需要小心的？ 84 | * `data-` 屬性的好處在哪？ 85 | * 考慮 HTML5 作為一個開放式的網站平台。HTML5 的 building blocks 有哪些？ 86 | * 請描述 cookies, sessionStorage 和 localStorage 的不同？ 87 | * 請描述 `GET` 和 `POST` 差異性 88 | 89 | ####[[⬆]](#toc) CSS 規格問題集： 90 | 91 | * 描述 "reset" 在 CSS 中做什麼, 如何用？ 92 | * 描述 Floats 並解釋如何運作 93 | * 描述 z-index 並且描述堆疊內容 (stacking context) 如何形成 94 | * 有哪些不同的 clearing 技術？哪個適用在哪種內容上？ 95 | * 描述 CSS sprites, 你如何實作在網頁或網站上？ 96 | * 你最喜愛的圖片取代技術是什麼？你什麼時候會用到？ 97 | * CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的？ 98 | * 你怎麼讓你的網頁支援有功能限制的瀏覽器？ 99 | * 你會使用什麼樣的技術/流程 ？ 100 | * 有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？ 101 | * 你使用過 grid system 嗎？如果有的話？你較推薦哪個？ 102 | * 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS? 103 | * 你熟悉任何有關 SVG 嗎？ 104 | * 你如何優化你的網頁以利於列印？ 105 | * 在寫高效的 CSS 時，有什麼要注意的？ 106 | * 使用 CSS preprocessors 的優點和缺點是什麼？ (SASS, Compass, Stylus, LESS) 107 | * 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors 108 | * 你如何使用非標準字體來實作網頁設計？ 109 | * Webfonts (font services 像是: Google Webfonts, Typekit …等等) 110 | * 解釋瀏覽器如何按照 CSS selector 找到對應的 element？ 111 | * 解釋你所認知的 box model，以及你如何在 CSS 告訴瀏覽器使用不同 box model 來呈現圖層？ 112 | * 請解釋 `* { box-sizing: border-box; }`？並且說明使用它的好處 113 | * 請列出您記憶中 display 屬性的全部值 114 | * 請說明 inline 和 inline-block 的差異性？ 115 | * 請說明 relative、fixed、absolute 和 static 元件差異性 116 | * 你目前有使用哪一套 CSS Framework 在開發環境或產品線上？ 117 | * 如果有，請問是哪一套，並且描述如果改善或提昇 CSS Framework？ 118 | * 請問你有使用過 CSS Flexbox 或 Grid specs？ 119 | * 如果有，你對於它們的效能論點想法是？ 120 | 121 | ####[[⬆]](#toc) JS 規格問題集： 122 | 123 | * 描述 event delegation 124 | * 描述 `this` 如果運作在 JavaScript 中 125 | * 描述 prototypal inheritance 如何運作？ 126 | * 你如何測試你的 JavaScript？ 127 | * AMD vs. CommonJS? 128 | * 什麼是 hashtable? 129 | * 解釋下列程式碼為什麼不是IIFE: `function foo(){ }();`. (Immediately Invoked Function Expression,立即函式) 130 | * 需要修改那裡使它成為IIFE? 131 | * `null`、`undefined`和 `undeclared`變數之間有什麼差異？ 132 | * 你如何檢查？ 133 | * 什麼是 closure, 如何/為什麼使用? 134 | * anonymous functions 典型的使用時機？ 135 | * 描述 "JavaScript module pattern"，你什麼情況會用到？ 136 | * 加分題：清楚地提到 namespacing. 137 | * 如果你的 module 沒有命名空間怎辦？ 138 | * 你如何架構你的程式碼？ (module pattern, classical inheritance?) 139 | * host objects 和 native objects 有何不同？ 140 | * `function Person(){}`、`var person = Person()`和`var person = new Person()`之間有何不同？ 141 | * `.call` 和 `.apply`有何不同？ 142 | * 描述 `Function.prototype.bind`? 143 | * 你什麼時候優化你的程式？ 144 | * 你可以描述 inheritance 如何運作在 JavaScript？ 145 | * 你什麼情況會使用 `document.write()`？ 146 | * 多數的廣告產生仍然使用 `document.write()` 雖然這樣用會令人皺眉 147 | * feature detection, feature inference, 和使用 UA string 有什麼不同？ 148 | * 盡可能的詳述描述 AJAX。 149 | * 描述 JSONP 如何運作 (且為何它不是真正的 AJAX) 150 | * 你是用過 JavaScript templating (樣板) ？ 151 | * 如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等) 152 | * 描述 "hoisting" 153 | * 描述 event bubbling. 154 | * "attribute" 和 "property" 的不同？ 155 | * 為什麼擴展 JavaScript 內建的 objects 不是個好方法？ 156 | * 為什麼擴展 JavaScript 插件是個好方法？ 157 | * document load event 和 document ready event 有什麼不同？ 158 | * `==` 和 `===` 有什麼不同？ 159 | * 描述你如何取得一個 query string 的 parameter 從瀏覽器的網址列。 160 | * 描述 JavaScript 的 same-origin policy (同源策略) 161 | * 描述 JavaScript 的 inheritance patterns (繼承模式) 162 | * 實作如下程式: 163 | 164 | ```javascript 165 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 166 | ``` 167 | 168 | * 描述一個 memoization (避免重複運算) 的策略 在 JavaScript 中 169 | * Ternary expression 怎麼來的, "Ternary" 的意思是什麼？ 170 | * function 的 arity 是什麼？ 171 | * 什麼是 `"use strict";`? 使用他的優點和缺點是什麼？ 172 | 173 | ####[[⬆]](#toc) jQuery 規格問題集： 174 | 175 | * 描述 "chaining" 176 | * 描述 "deferreds" 177 | * 你知道哪些實作 jQuery 的優化方式？ 178 | * `.end()` 做些什麼？ 179 | * 如何給一個綁定的 event handler 命名空間？為什麼這樣做？ 180 | * 說出四種可以傳到 jQuery 方法的值 181 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object … 等。 182 | * 什麼是 effects (or fx) queue? 183 | * `.get()`, `[]`, 和 `.eq()` 有何不同？ 184 | * `.bind()`, `.live()`, 和 `.delegate()` 有何不同？ 185 | * `$` 和 `$.fn` 有何不同？ 或什麼是 `$.fn`？ 186 | * 優化這個 selector: 187 | 188 | ```javascript 189 | $(".foo div#bar:eq(0)") 190 | ``` 191 | 192 | ####[[⬆]](#toc) 程式碼問題集: 193 | 194 | ```javascript 195 | modulo(12, 5) // 2 196 | ``` 197 | 198 | 問題：實作符合上述的modulo函式 199 | 200 | ```javascript 201 | "i'm a lasagna hog".split("").reverse().join(""); 202 | ``` 203 | 204 | 問題: 上述的statement(陳述式)會回傳什麼？ 205 | 206 | **答: "goh angasal a m'i"** 207 | 208 | ```javascript 209 | ( window.foo || ( window.foo = "bar" ) ); 210 | ``` 211 | 212 | 問題: window.foo 的值是什麼？ 213 | 214 | **答案: "bar"** 215 | 只有在 window.foo 是 falsey 時會回傳此答案，否則的話會回傳window.foo 216 | 217 | ```javascript 218 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 219 | ``` 220 | 221 | 問題: 上述的兩個alerts的結果會是什麼？ 222 | 223 | **答案: "Hello World" & ReferenceError: bar is not defined** 224 | 225 | ```javascript 226 | var foo = []; 227 | foo.push(1); 228 | foo.push(2); 229 | ``` 230 | 231 | 問題: foo.length 的值是什麼？ 232 | 233 | **答案： `2`** 234 | 235 | 236 | ####[[⬆]](#toc) 有趣問題： 237 | 238 | * 你寫過最酷的程式是什麼？你最自豪的是什麼？ 239 | * 你使用的開發工具中，你最喜歡的部分是什麼？ 240 | * 你有任何的 pet projects (個人開發的小專案)？ 什麼樣的？ 241 | * 你最喜歡 IE 瀏覽器的什麼特點？ 242 | 243 | ####[[⬆]](#toc) 其他參考資料: 244 | 245 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 246 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 247 | * http://css-tricks.com/interview-questions-css/ 248 | * http://davidshariff.com/quiz/ 249 | * http://blog.sourcing.io/interview-questions 250 | -------------------------------------------------------------------------------- /Chinese/README.md: -------------------------------------------------------------------------------- 1 | #前端工作面试问题 2 | 3 | **备注:** 本 repo 包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题（那需要好几个小时）。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能了。 4 | 5 | [Rebecca Murphey](http://rmurphey.com/) 的 [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) 是你在准备面试前应该阅读的绝佳资源。 6 | 7 | **记住：** 很多问题都是开放的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。 8 | 9 | ## 目录 10 | 11 | 1. [最初的贡献者](#contributors) 12 | 1. [常见问题](#general) 13 | 1. [HTML 相关问题](#html) 14 | 1. [CSS 相关问题](#css) 15 | 1. [JS 相关问题](#js) 16 | 1. [jQuery 相关问题](#jquery) 17 | 1. [代码相关的问题](#jscode) 18 | 1. [有趣的问题](#fun) 19 | 1. [其他参考资料](#references) 20 | 21 | ####[[⬆]](#toc) 最初贡献者 22 | 23 | 这里大部分的面试题都摘抄自 [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) 在 [oksoclap](http://oksoclap.com/) 创建的帖子，这份原帖的贡献者还有： 24 | 25 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 26 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 27 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 28 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 29 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 30 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 31 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 32 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 33 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 34 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 35 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 36 | * [@iansym](http://twitter.com/iansym) 37 | 38 | 39 | ####[[⬆]](#toc) 常见问题： 40 | 41 | * 你在昨天/本周学到了什么？ 42 | 43 | * 编写代码的哪些方面能够使你兴奋或感兴趣？ 44 | 45 | * 在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的？ 46 | 47 | * 谈谈你喜欢的开发环境。(例如操作系统，编辑器，浏览器，工具等等。) 48 | 49 | * 你最熟悉哪一套版本控制系统？ 50 | 51 | * 你能描述一下当你制作一个网页的工作流程吗？ 52 | 53 | * 你能描述一下渐进增强和优雅降级之间的不同吗? 54 | * 如果提到了特性检测，可以加分。 55 | 56 | * 请解释一下什么是“语义化的 HTML”。 57 | 58 | * 你如何对网站的文件和资源进行优化？ 59 | * 期待的解决方案包括： 60 | * 文件合并 61 | * 文件最小化/文件压缩 62 | * 使用 CDN 托管 63 | * 缓存的使用 64 | * 其他 65 | 66 | * 为什么利用多个域名来提供网站资源会更有效？ 67 | * 浏览器同一时间可以从一个域名下载多少资源？ 68 | 69 | * 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间） 70 | 71 | * 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？ 72 | * 建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范 73 | * 为了保持一致性，接受项目原有的风格 74 | * 直接使用 VIM 的 retab 命令 75 | 76 | * 请写一个简单的幻灯效果页面 77 | * 如果不使用JS来完成，可以加分。 78 | 79 | * 你都使用哪些工具来测试代码的性能？ 80 | * Profiler, JSPerf, Dromaeo 81 | 82 | * 如果今年你打算熟练掌握一项新技术，那会是什么？ 83 | 84 | * Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？ 85 | 86 | * 请谈一下你对网页标准和标准制定机构重要性的理解。 87 | 88 | * 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ 89 | 90 | * 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程 91 | 92 | ####[[⬆]](#toc) HTML相关问题： 93 | 94 | * `doctype`（文档类型）的作用是什么？ 95 | 96 | * 浏览器标准模式和怪异模式之间的区别是什么？ 97 | 98 | * 使用 XHTML 的局限有哪些？ 99 | * 如果页面使用 'application/xhtml+xml' 会有什么问题吗？ 100 | 101 | * 如果网页内容需要支持多语言，你会怎么做？ 102 | * 在设计和开发多语言网站时，有哪些问题你必须要考虑？ 103 | 104 | * `data-`属性的作用是什么？ 105 | 106 | * 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？ 107 | 108 | * 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ 109 | 110 | * 请描述一下 `GET` 和 `POST` 的区别? 111 | 112 | ####[[⬆]](#toc) CSS 相关问题： 113 | 114 | * 描述下 “reset” CSS 文件的作用和使用它的好处。 115 | 116 | * 解释下浮动和它的工作原理。 117 | 118 | * 列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。 119 | 120 | * 解释下 CSS sprites，以及你要如何在页面或网站中使用它。 121 | 122 | * 你最喜欢的图片替换方法是什么，你如何选择使用。 123 | 124 | * 讨论CSS hacks，条件引用或者其他。 125 | 126 | * 如何为有功能限制的浏览器提供网页？ 127 | * 你会使用哪些技术和处理方法？ 128 | 129 | * 有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？） 130 | 131 | * 你用过栅格系统吗？如果使用过，你最喜欢哪种？ 132 | 133 | * 你用过媒体查询，或针对移动端的布局/CSS 吗？ 134 | 135 | * 你熟悉 SVG 样式的书写吗？ 136 | 137 | * 如何优化网页的打印样式？ 138 | 139 | * 在书写高效 CSS 时会有哪些问题需要考虑？ 140 | 141 | * 使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS) 142 | * 描述下你曾经使用过的 CSS 预处理的优缺点。 143 | 144 | * 如果设计中使用了非标准的字体，你该如何去实现？ 145 | * Webfonts (字体服务例如：Google Webfonts，Typekit 等等。) 146 | 147 | * 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？ 148 | 149 | * 解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。 150 | 151 | * 请解释一下 ```* { box-sizing: border-box; }``` 的作用, 并且说明使用它有什么好处？ 152 | 153 | * 请罗列出你所知道的 display 属性的全部值 154 | 155 | * 请解释一下 inline 和 inline-block 的区别？ 156 | 157 | * 请解释一下 relative、fixed、absolute 和 static 元素的区别 158 | 159 | * 你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap, PureCSS, Foundation 等等) 160 | * 如果有，请问是哪一套？如果可以，你如何改善CSS框架？ 161 | 162 | * 请问你有使用过 CSS Flexbox 或者 Grid specs 吗？ 163 | * 如果有，请问在性能和效率的方面你是怎么看的？ 164 | 165 | ####[[⬆]](#toc) JS相关问题： 166 | 167 | * 解释下事件代理。 168 | 169 | * 解释下 JavaScript 中 `this` 是如何工作的。 170 | 171 | * 解释下原型继承的原理。 172 | 173 | * 你是如何测试JavaScript代码的？ 174 | 175 | * AMD vs. CommonJS？ 176 | 177 | * 什么是哈希表？ 178 | 179 | * 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：`function foo(){ }();`. 180 | * 要做哪些改动使它变成 IIFE? 181 | 182 | * 描述以下变量的区别：`null`，`undefined` 或 `undeclared`？ 183 | * 该如何检测它们？ 184 | 185 | * 什么是闭包，如何使用它，为什么要使用它？ 186 | 187 | * 请举出一个匿名函数的典型用例？ 188 | 189 | * 解释 “JavaScript 模块模式” 以及你在何时使用它。 190 | * 如果有提到无污染的命名空间，可以考虑加分。 191 | * 如果你的模块没有自己的命名空间会怎么样？ 192 | 193 | * 你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？ 194 | 195 | * 请指出 JavaScript 宿主对象和原生对象的区别？ 196 | 197 | * 指出下列代码的区别： 198 | ```javascript 199 | function Person(){} 200 | var person = Person(); 201 | var person = new Person(); 202 | ``` 203 | 204 | * `.call` 和 `.apply` 的区别是什么？ 205 | 206 | * 请解释 `Function.prototype.bind` 的作用？ 207 | 208 | * 你何时优化自己的代码？ 209 | 210 | * 你能解释一下 JavaScript 中的继承是如何工作的吗？ 211 | 212 | * 在什么时候你会使用 `document.write()`？ 213 | * 大多数生成的广告代码依旧使用 `document.write()`，虽然这种用法会让人很不爽。 214 | 215 | * 请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？ 216 | 217 | * 请尽可能详尽的解释 AJAX 的工作原理。 218 | 219 | * 请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。 220 | 221 | * 你使用过 JavaScript 模板系统吗？ 222 | * 如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。 223 | 224 | * 请解释变量声明提升。 225 | 226 | * 请描述下事件冒泡机制。 227 | 228 | * "attribute" 和 "property" 的区别是什么？ 229 | 230 | * 为什么扩展 JavaScript 内置对象不是好的做法？ 231 | 232 | * 为什么扩展 JavaScript 内置对象是好的做法？ 233 | 234 | * 请指出 document load 和 document ready 两个事件的区别。 235 | 236 | * `==` 和 `===` 有什么不同？ 237 | 238 | * 你如何从浏览器的 URL 中获取查询字符串参数。 239 | 240 | * 请解释一下 JavaScript 的同源策略。 241 | 242 | * 请描述一下 JavaScript 的继承模式。 243 | 244 | * 如何实现下列代码： 245 | ```javascript 246 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 247 | ``` 248 | 249 | * 描述一种 JavaScript 中实现 memoization(避免重复运算)的策略。 250 | 251 | * 什么是三元表达式？“三元” 表示什么意思？ 252 | 253 | * 函数的参数元是什么？ 254 | 255 | * 什么是 `"use strict";` ? 使用它的好处和坏处分别是什么？ 256 | 257 | ####[[⬆]](#toc) jQuery 相关问题： 258 | 259 | * 解释"chaining"。 260 | 261 | * 解释"deferreds"。 262 | 263 | * 你知道哪些针对 jQuery 的优化方法。 264 | 265 | * 请解释 `.end()` 的用途。 266 | 267 | * 你如何给一个事件处理函数命名空间，为什么要这样做？ 268 | 269 | * 请说出你可以传递给 jQuery 方法的四种不同值。 270 | * 选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。 271 | 272 | * 什么是效果队列？ 273 | 274 | * 请指出 `.get()`，`[]`，`eq()` 的区别。 275 | 276 | * 请指出 `.bind()`，`.live()` 和 `.delegate()` 的区别。 277 | 278 | * 请指出 `$` 和 `$.fn` 的区别，或者说出 `$.fn` 的用途。 279 | 280 | * 请优化下列选择器： 281 | ```javascript 282 | $(".foo div#bar:eq(0)") 283 | ``` 284 | 285 | ####[[⬆]](#toc) 代码相关的问题： 286 | 287 | ```javascript 288 | modulo(12, 5) // 2 289 | ``` 290 | 291 | 问题：实现满足上述结果的modulo函数 292 | 293 | ```javascript 294 | "i'm a lasagna hog".split("").reverse().join(""); 295 | ``` 296 | 297 | 问题：上面的语句的返回值是什么？ 298 | **答案："goh angasal a m'i"** 299 | 300 | ```javascript 301 | ( window.foo || ( window.foo = "bar" ) ); 302 | ``` 303 | 304 | 问题：window.foo 的值是什么？ 305 | **答案："bar"** 306 | 只有 window.foo 为假时的才是上面答案，否则就是它本身的值。 307 | 308 | ```javascript 309 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 310 | ``` 311 | 312 | 问题：上面两个 alert 的结果是什么 313 | **答案: "Hello World" 和 ReferenceError: bar is not defined** 314 | 315 | ```javascript 316 | var foo = []; 317 | foo.push(1); 318 | foo.push(2); 319 | ``` 320 | 321 | 问题：foo.length 的值是什么？ 322 | **答案：`2`** 323 | 324 | ####[[⬆]](#toc) 有趣的问题： 325 | 326 | * 你编写过的最酷的代码是什么？其中你最自豪的是什么？ 327 | 328 | * 在你使用过的开发工具中，最喜欢哪个？ 329 | 330 | * 你有什么业余项目吗？是哪种类型的？ 331 | 332 | * 你最爱的 IE 特性是什么？ 333 | 334 | ####[[⬆]](#toc) 其他参考资料： 335 | 336 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 337 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 338 | * http://css-tricks.com/interview-questions-css/ 339 | * http://davidshariff.com/quiz/ 340 | * http://blog.sourcing.io/interview-questions -------------------------------------------------------------------------------- /Croatian/README.md: -------------------------------------------------------------------------------- 1 | #Intervju za posao Front-end Developera 2 | 3 | @version 2.0.0 4 | 5 | Ovaj repozitorij sadrži brojna pitanja za intervju iz područja front-end-a koja možete koristiti u procjeni potencijalnih kandidata. Nikako se ne preporuča da upotrijebite svako ovdje navedeno pitanje za jednog kandidata (to bi trajalo satima). Odabir nekoliko ciljanih pitanja s ove liste bi Vam trebao pomoći u odabiru. 6 | 7 | [Rebecca Murphey](http://rmurphey.com/) [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) je prilično dobro štivo za pročitati prije samog razgovora. 8 | 9 | **Napomena:** Imajte na umu da su mnoga ovdje navedena pitanja otvorenog tipa i mogla bi voditi u zanimljive rasprave koje govore više o sposobnostima osobe nego pitanja sa direktnim odgovorima. 10 | 11 | ####Autori originalne liste 12 | 13 | Većina pitanja je preuzeta sa [oksoclap](http://oksoclap.com/) tj. rasprave koju je u originalu pokrenuo [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) i kojoj su pridonijele sljedeće osobe: 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com) 27 | 28 | ### Općenita pitanja: 29 | 30 | * Opišite Vašu preferiranu razvojnu okolinu. (OS, Editor, Broseri, Alati itd.) 31 | * Možete li opisati Vaš postupak izrade web stranice? 32 | * Možete li opisati razliku između progresivnog poboljšanja i neprimjetne degradacije? 33 | * Bonus bodovi ako se opiše detektiranje mogućnosti browsera 34 | * Objasnite što je to "Semantički HTML". 35 | * Kako biste optimirali infrastrukturu i resurse web stranice? 36 | * Traženje više rješenja poput: 37 | * Spajanje datoteka 38 | * Minifikacija datoteka 39 | * Korištenje CDN-a 40 | * Međuspremanje (Caching) 41 | * itd. 42 | * Zašto je sadržaj bolje poslužiti sa više domena? 43 | * Koliko resursa preglednik skida sa jedne domene odjednom? 44 | * Navedite tri načina za smanjivanje vremena učitavanja stranice. (primijećeno ili stvarno vrijeme učitavanje) 45 | * Ako bi došli na projekt gdje se koriste tabovi a Vi koristite razmake, što biste učinili? 46 | * Npr. preporučanje korištenja EditorConfig-a (http://editorconfig.org) 47 | * Konformacija postojećoj praksi (zadržavanje konzistentnosti) 48 | * `korištenje :retab! naredbe` 49 | * Napravite jednostavnu stranicu za držanje prezentacije 50 | * Bonus bodovi za nekorištenje JavaScript-a. 51 | * Koje alate koristite za testiranje performansi koda? 52 | * Profiler, JSPerf, Dromaeo 53 | * Kad bi mogli odabrati jednu tehologiju koju ćete naučiti ove godine, što bi to bila? 54 | * Objasnite važnost standarda i tijela za standardizaciju 55 | * Što je FOUC? Kako biste izbjegli FOUC? 56 | 57 | ### Pitanja za HTML: 58 | 59 | * Što radi `doctype`? 60 | * Koja je razlika između standardnog i dosjetljivog (quirks) modusa? 61 | * Koja su ograničenja kod posluživanja XHTML stranica? 62 | * Postoje li problemi kod posluživanja stranica sa `application/xhtml+xml`? 63 | * Kako biste poslužili stranicu sa sadržajem na više jezika? 64 | * Na što morate paziti kod dizajniranja ili razvoja za višejezičnu stranicu? 65 | * Za što se koriste `data-` atributi? 66 | * Razmotrite HTML5 kao platformu otvorenog web-a. Koji su gradivni elementi HTML5-ice? 67 | * Pojasnite razliku između kolačića, podataka sjednice (sessionStorage) i lokalne pohrane. 68 | 69 | ### Pitanja za JavaScript: 70 | 71 | * Objasnite delegaciju događaja. 72 | * Objasnite kako se u Javascriptu koristi `this` 73 | * Pojasnite prototipno nasljeđivanje 74 | * Kako testirate JavaScript? 75 | * AMD u usporedbi sa CommonJS-om? 76 | * Što je to hash tabela? 77 | * Što su `undefined` i `undeclared` varijable? 78 | * Što je closure, kako i zašto se koristi? 79 | * Vaš omiljeni način njihovog kreiranja? argyle (samo kod IIFE-a) 80 | * Koja je uobičajena primjena za anonimnu funkciju? 81 | * Objasnite "JavaScript module pattern" i kada biste ga koristili. 82 | * Bonus bodovi za spomen čistih imenskih prostora (namespacing) 83 | * Što učiniti ako moduli nemaju imenske prostore 84 | * Kako organizirate kod? (module pattern, klasično nasljeđivanje?) 85 | * Koja je razlika između host i native objekta? 86 | * Razlika između: 87 | ```javascript 88 | function Person(){} var person = Person() var person = new Person() 89 | ``` 90 | * Koja je razlika između `.call` i `.apply`? 91 | * Objasnite `Function.prototype.bind` 92 | * Kad optimirate Vaš kod? 93 | * Možete li objasniti nasljeđivanje u JavaScriptu? 94 | * Kada biste koristili `document.write()`? 95 | * Većina generiranih oglasa još uvijek koristi `document.write()` premda se to zamjera. 96 | * Koja je razlika između detekcije mogućnosti (feature detection), pretpostavljanje mogućnosti (feature inference) i korištenja UA string-a 97 | * Objasnite AJAX sa što više detalja 98 | * Objasnite kako radi JSONP (i zašto nije pravi AJAX) 99 | * Da li ste ikad koristili JavaScript predloške (templating)? 100 | * Ako da, koje ste biblioteke koristili? (Mustache.js, Handlebars etc.) 101 | * Objasnite "hoisting". 102 | * Objasnite propagaciju događaja (event bubbling). 103 | * Koja je razlika između "attribute"-a i "property"-a? 104 | * Zašto proširivanje ugrađenih JavaScript objekata nije najbolja ideja? 105 | * Zašto je proširivanje ugrađenih JavaScript objekata dobra ideja? 106 | * Koja je razlika između document load i document ready događaja? 107 | * Koja je razlika između `==` i `===`? 108 | * Objasnite kako bi došli do parametra iz URL adrese prozora preglednika. 109 | * Objasnite politiku jednog izvorišta gledano sa stajališta JavaScript-e. 110 | * Opišite načine nasljeđivanja u JavaScript-u. 111 | * Popravite: 112 | ```javascript 113 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 114 | ``` 115 | * Opišite strategiju za memoizaciju (izbjegavanje ponovljenog računanja) u Javascript-u. 116 | * Zašto se Ternarni operator zove Ternarni? 117 | * Što je arnost funkcije? 118 | * Što je `"use strict";`? Koje su mane, koje prednosti? 119 | 120 | ### JavaScript primjeri koda: 121 | 122 | ```javascript 123 | ~~3.14 124 | ``` 125 | Pitanje: Koja je povratna vrijednost gornjeg izraza? 126 | **Odgovor: 3** 127 | 128 | ```javascript 129 | "Ovo je proba".split("").reverse().join(""); 130 | ``` 131 | Pitanje: Koja je povratna vrijednost gornjeg izraza? 132 | **Odgovor: "aborp ej ovO"** 133 | 134 | ```javascript 135 | ( window.foo || ( window.foo = "bar" ) ); 136 | ``` 137 | Pitanje: Koju vrijednost ima window.foo? 138 | **Odgovor: "bar"** 139 | Samo ako window.foo nije istinit u suprotnom će zadržati vrijednost. 140 | 141 | ```javascript 142 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 143 | ``` 144 | Pitanje: Kako će izgledati obavijesti iz gornjeg primjera? 145 | **Odgovor: "Hello World" nakon toga ReferenceError: bar is not defined** 146 | 147 | ```javascript 148 | var foo = []; 149 | foo.push(1); 150 | foo.push(2); 151 | ``` 152 | Pitanje: Koja je vrijednost za foo.length? 153 | **Odgovor: `2` 154 | 155 | ```javascript 156 | var foo = {}; 157 | foo.bar = 'hello'; 158 | ``` 159 | Pitanje: Koja je vrijednost za foo.length? 160 | **Odgovor: `undefined` 161 | 162 | ### Pitanja za jQuery: 163 | 164 | * Objasnite "chaining". 165 | * Objasnite "deferreds". 166 | * Navedite koje optimizacije korištenja jQuery-a poznajete? 167 | * Što radi `.end()` ? 168 | * Kada i zašto bi vezani (bound) događaj stavili u imenski prostor (namespace)? 169 | * Navedite četiri vrijednosti koje možete poslati jQuery metodi. 170 | * Selektor (string), HTML (string), Callback (funkcija), HTMLElement, object, array, element array, jQuery Object itd. 171 | * Što je red efekata (fx)? 172 | * Koja je razlika između .get()`, `[]`, i `.eq()`? 173 | * Koja je razlika između .bind()`, `.live()`, i `.delegate()`? 174 | * Koja je razlika između `$` i `$.fn`? Ili samo što je `$.fn`. 175 | * Optimirajte selektor: 176 | ```javascript 177 | $(".foo div#bar:eq(0)") 178 | ``` 179 | * Razlika između 'delegate()' i 'live()'? 180 | 181 | 182 | ### Pitanja za CSS: 183 | 184 | * Objasnite što je to "reset" CSS i zašto je koristan. 185 | * Opišite što su i kako rade Float-ovi. 186 | * Koje su tehnike clearing-a i koji su konteksti prikladni za njihovu primjenu? 187 | * Pojasnite CSS sprite-ove i kako biste ih izveli na stranici ili site-u. 188 | * Koje su Vaše omiljene tehnike zamjene slike i kada ih koristite? 189 | * CSS hack-ovi property-a, kondicionalno uključivanje .css datoteka, ili ... nešto drugo? 190 | * Kako poslužujete sadržaj za preglednike (browser-e) slabijih mogućnosti? 191 | * Koje tehnike/procese koristite? 192 | * Koji su mogući načini za vizualno sakrivanje sadržaja (ostaju dostupni samo screen reader-ima)? 193 | * Da li ste ikad koristili grid system, ako jeste koji preferirate? 194 | * Da li ste koristili ili implementirali media querie-je ili layout/CSS specifičan za mobile? 195 | * Imate li iskustva u stiliziranju sa SVG-om? 196 | * Kako optimirate stranice za ispis? 197 | * Koje su "kvake" za pisanje učinkovitog CSS-a? 198 | * Koje su prednosti/nedostatci korištenja CSS preprocessore? (SASS, Compass, Stylus, LESS) 199 | * Ako da, opišite što vam se (ne)sviđa kod CSS preprocessora koje ste koristili. 200 | * Kako bi izradili preliminarni web dizajn koji ne koristi standardne fontove? 201 | * Webfont-ovi (font servisi poput: Google Webfonts, Typekit itd.) 202 | * Objasnite kako browser utvrđuje koji elementi odgovaraju CSS selector-u. 203 | 204 | ### Opcionalna zabavna pitanja: 205 | 206 | * Koja je najbolja stvar koju ste isprogramirali, na što ste najviše ponosni? 207 | * Koji su Vam omiljena svojstva razvojnih alata koje koristite? 208 | * Imate li kakve omiljene vlastite projekte? Koje? 209 | * Koja Vam je omiljena mogućnost Internet Explorer-a? 210 | -------------------------------------------------------------------------------- /Czech/README.md: -------------------------------------------------------------------------------- 1 | #Front-end vývojář - otázky k pohovoru 2 | 3 | Tento repozitář obsahuje řadu otázek, které můžete směle položit u pohovoru kandidátovi na pozici front-end vývojář a ověřit si tak jeho znalosti v tomto oboru. Není zamýšleno položit všechny tyto otázky (jejich korektní zodpovězení by trvalo hodiny), leč pouze určitou část vyhovující vašim potřebám. 4 | 5 | Za přečtení stojí také: 6 | 7 | * [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/)(Anglicky) od [Rebecca Murphey](http://rmurphey.com/) 8 | * [Interview Questions and Exercises About CSS](http://css-tricks.com/interview-questions-css/)(Anglicky) od [Chris Coyier](http://chriscoyier.net/) 9 | 10 | **Poznámka:** Mějte na paměti, že tyto otázky mají vést spíše k diskusi na dané téma a prozradit tak něco více o schopnostech daného vývojáře než aby byly zodpovězeny jedním slovem nebo větou. 11 | 12 | ## Obsah 13 | 14 | 1. [Původní přispěvovatelé](#contributors) 15 | 1. [Obecné otázky](#general) 16 | 1. [HTML otázky](#html) 17 | 1. [CSS otázky](#css) 18 | 1. [JS otázky](#js) 19 | 1. [jQuery otázky](#jquery) 20 | 1. [Otázky z kódu](#jscode) 21 | 1. [Zábavné otázky](#fun) 22 | 23 | ####Původní přispěvovatelé: 24 | 25 | Většina otázek byla převzata z [oksoclap](http://oksoclap.com/) původně vytvořeného [Paulem Irishem](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) a následně doplněna těmito osobami: 26 | 27 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 28 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 29 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 30 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 31 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 32 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 33 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 34 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 35 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 36 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 37 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 38 | 39 | **[[⬆]](#toc)** 40 | 41 | ####Obecné otázky: 42 | 43 | * Co jste se naučili včera/minulý týden nového? 44 | * Co Vás vzrušuje nebo zajímá na kódování? 45 | * Povězte něco o Vašem oblíbeném vývojovém prostředí (operační systém, editor, prohlížeč, nástroje, atd.). 46 | * Popište jak postupujete při vytváření nové webové stránky. 47 | * Dokážete vysvětlit rozdíl mezi pozvolným degradováním(graceful degradation) a postupným vylepšováním(progressive enhancement)? 48 | * Body navíc za popsání detekce pokročilé funkcionality 49 | * Vysvětlete pojem "sémantické HTML". 50 | * Jak byste optimalizovali zdroje(obrázky, JS, CSS, atd.) webové stránky? 51 | * K dispozici je celá řada optimalizací např.: 52 | * Spojování souborů 53 | * Minifikace souborů 54 | * CDN hostování 55 | * Caching 56 | * atd. 57 | * Proč je lepší posílat zdroje webové stránky z více domén? 58 | * Kolik souborů může z dané domény stahovat prohlížeš najednou? 59 | * Vyjmenujte tři způsoby jak snížit dobu nahrávání webové stránky (vnímanou nebo skutečnou dobu nahrávání) 60 | * Pokud naskočíte do projektu, kde se místo odsazování tabulátory používají mezery, co uděláte? 61 | * Navrhnutí, že projekt by mohl využívat něco jako EditorConfig (http://editorconfig.org) 62 | * Přízpůsobení se konvenci (ale zústat konzistentní). 63 | * `issue :retab! command` 64 | * Napište jednoduchou stránku se slideshow. 65 | * Body navíc pokud nepoužívá JS. 66 | * Jaké nástroje používáte pro testování rychlosti Vašeho kódu? 67 | * Profiler, JSPerf, Dromaeo 68 | * Pokud byste se chtěl/chtěla letos naučit jednu novou technologii, která by to byla? 69 | * Vysvětlete důležitost standardů a standardizačních orgánů 70 | * Co to je FOUC? Jak je možné se vyhnout FOUC? 71 | 72 | **[[⬆]](#toc)** 73 | 74 | ####HTML otázky: 75 | 76 | * Co dělá `doctype` ? 77 | * Jaký je rozdíl mezi standardním módem a quirks módem? 78 | * Jaká jsou omezení při poskytování XHTML stránek? 79 | * Existuje nějaký problém při poskytování stránek jako `application/xhtml+xml`? 80 | * Jak poskytujete stránku s vícejazyčným obsahem? 81 | * Na co všechno si musíte dát pozor při vytváření vícejazyčné stránky? 82 | * K čemu jsou atribut `data-` dobrý? 83 | * Uvažujte o HTML5 jako o otevření platormě. Jaké jsou základní stavební kameny HTML5? 84 | * Popište rozdíl mezi cookies, sessionStorage a localStorage. 85 | 86 | **[[⬆]](#toc)** 87 | 88 | ####CSS otázky: 89 | 90 | * Popište co děla a k čemu je dobrý "reset" CSS soubor. 91 | * Popište obtékání (floats) a jak funguje. 92 | * Popiště různé techniky pro zastavení obtékání(clear fixing) a řekněte, které se hodí v kterém kontextu. 93 | * Vysvětlete, co to jsou CSS sprites a jak byste je implementovali. 94 | * Jaká je Vaše oblíbená technika pro nahrazování obrázků a kterou a kdy používáte? 95 | * CSS property hacks, kondicionální vkládání .css souborů nebo něco dalšího? 96 | * Jak poskytujete stránky pro funkcionálně/vlastnostmi omezený prohlížeč? 97 | * Jakou techniku/proces používáte? 98 | * Jaké jsou způsoby pro zneviditelní obsahu (a zachování jeho dostupnosti pro čtečky)? 99 | * Použili jste někdy grid system a pokud ano, který upřednostňujete? 100 | * Použili jset někdy mediální selektor(media query) nebo specifický layout/CSS pro mobilní zařízení? 101 | * Máte nějaké zkušenosti s vytvářením SVG? 102 | * Jak optimalizujete stránky pro tisk? 103 | * Jaké jsou zásady pro psaní efektnivního CSS? 104 | * Jaké jsou výhody/nevýhody použítí CSS preprocesorů (SASS, Compass, Stylus, LESS)? 105 | * Popiště, co se Vám na CSS preprocesorech, které jste použili, líbí/nelíbí. 106 | * Jak byste implementovali návrh webové stránky, která používá nestandardní řezy písma? 107 | * Webfonts (služby typu: Google Webfonts, Typekit etc.) 108 | * Vysvětlete jak prohlížeč určuje, který element odpovída CSS selektoru. 109 | * Vysvětlete Vaše chápání box modelu a jak řeknete pomocí CSS prohlížeči, aby Váš layout vykreslil v odlišném box modelu 110 | 111 | **[[⬆]](#toc)** 112 | 113 | ####JS otázky: 114 | 115 | * Vysvětlete delegaci událostí. 116 | * Vysvětlete jak funguje `this` v JavaScriptu. 117 | * Vysvětlete jak funguje funguje prototypová dědičnost. 118 | * Jak testujete JavaScript? 119 | * AMD vs. CommonJS? 120 | * Co je hashovací tabulka? 121 | * Vysvětlete proč následující volání nebude fungovat jako IIFE: `function foo(){ }();`. 122 | * Co musíte změnit, aby volání zafungovalo jako IIFE? 123 | * Vysvětlete rozdíl mezi proměnou, která je `null`, `nedefinovaná` nebo `nedeklarovaná`? 124 | * Jakým způsobem ověříte jednotlivé stavy proměnné? 125 | * Co to je closure a jak/proč bychom je měli používat? 126 | * Jaké je typické využití pro anonymní funkce? 127 | * Vysvětlete "JavaScript module pattern" a kdybyste ho měli použít. 128 | * Body navíc za zmínku o čistých jmených prostorech. 129 | * Co když moduly nemají jmené prostory? 130 | * Jak organizujete Váš kód? Module pattern, klasická dědičn5ost? 131 | * Jaký je rozdíl mezi nativními a hostitelskými objekty? 132 | * Rozdíl mezi: 133 | ```javascript 134 | function Person(){} var person = Person() var person = new Person() 135 | ``` 136 | * Jaký je rozdíl mezi `.call` a `.apply`? 137 | * Jaký je rozdíl mezi `undefined` and `null`? 138 | * Vysvětlete `Function.prototype.bind`. 139 | * Kdy optimalizujete Váš kód? 140 | * Vysvětlete jak funguje dědičnost v JavaScriptu. 141 | * Kdy byste použili `document.write()`? 142 | * Většina generovaných reklam stále používá tento přístup i přesto, že je to dlouhodobě odsuzováno. 143 | * Jaký je rozdíl mezi detekcí vlastností, odvození vlastností a použití UA řetězce? 144 | * Vysvětlete AJAX co nejpodrobněji to jde. 145 | * Vysvětlete jak funguje JSONP (a proč to není opravdový AJAX). 146 | * Použili jste někdy JavaScriptové šablony? 147 | * Pokud ano, které knihovny jste použili (Mustache.js, Handlebars etc.)? 148 | * Vysvětlete "hoisting". 149 | * Vysvětlete probublávání událostí. 150 | * Jaký je rozdíl mezi atributem(attribute) a vlastností(property)? 151 | * Proč není dobrý nápad rozšiřovat nativní JavaScriptové objekty? 152 | * Proč je dobrý nápad rozšiřovat nativní JavaScriptové objekty? 153 | * Jaký je rozdíl mezi událostmi document load a document ready? 154 | * Jaký je rozdíl mezi `==` a `===`? 155 | * Vysvětlete jakým způsobem získáte parametr z URL zadaného v okně prohlížeče. 156 | * Vysvětlete JavaScriptové pravidlo stejného původu(same-origin policy). 157 | * Popište přístupy k dědění v JavaScriptu. 158 | * Následující kód upravte tak, aby fungoval: 159 | ```javascript 160 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 161 | ``` 162 | * Popište strategie pro memorizaci (odstranění opakovaných výpočtů) v JavaScriptu. 163 | * Proč se říká ternární operátor, co označuje slovo ternární? 164 | * Co je označováné jako "arity" funkce? 165 | * Co znamená `"use strict";`? Jaké jsou výhody a nevýhody použití? 166 | 167 | **[[⬆]](#toc)** 168 | 169 | ####jQuery otázky: 170 | 171 | * Vysvětlete řetězení(chaining). 172 | * Vysvětlete odkládání(deferreds). 173 | * Jaké znáte a umíte implementovat optimalizace speciálně pro jQuery? 174 | * Co dělá `.end()`? 175 | * Jak a proč byste váš event handler opatřili jmeným prostorem? 176 | * Jmenujte čtyři různé typy hodnot, které můžete předat jako vstupní parametr metod v jQuery. 177 | * Selektor (řetězec), HTML (řetězec), Callback (funkce), HTMLElement, object, pole, pole elementu, jQuery Object, atd. 178 | * Co to je fronta efektů (nebo fx fronta)? 179 | * Jaký je rozdíl mezi `.get()`, `[]` a `.eq()`? 180 | * Jaký je rozdíl mezi `.bind()`, `.live()` a `.delegate()`? 181 | * Jaký je rozdíl mezi `$` a `$.fn`? Nebo jenom, co je `$.fn`? 182 | * Zoptimalizujte tento selektor: 183 | ```javascript 184 | $(".foo div#bar:eq(0)") 185 | ``` 186 | * Jaký je rozdíl mezi 'delegate()' a 'live()'? 187 | 188 | **[[⬆]](#toc)** 189 | 190 | ####Otázky z kódu: 191 | 192 | ```javascript 193 | ~~3.14 194 | ``` 195 | Otázka: Jakou hodnotu vrátí uvedený výraz? 196 | **Odpověď: 3** 197 | 198 | ```javascript 199 | "i'm a lasagna hog".split("").reverse().join(""); 200 | ``` 201 | Otázka: Jakou hodnotu vrátí uvedený výraz? 202 | **Odpověď: "goh angasal a m'i"** 203 | 204 | ```javascript 205 | ( window.foo || ( window.foo = "bar" ) ); 206 | ``` 207 | Otázka: Jakou hodnotu má window.foo? 208 | **Odpověď: "bar"** 209 | pouze pokud window.foo bylo false, jinak vrátí svojí hodnotu. 210 | 211 | ```javascript 212 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 213 | ``` 214 | Otázka: Co zobrazí uvedené dva alerty? 215 | **Odpověď: "Hello World" a ReferenceError: bar is not defined** 216 | 217 | ```javascript 218 | var foo = []; 219 | foo.push(1); 220 | foo.push(2); 221 | ``` 222 | Otázka: Jaká je hodnota foo.length? 223 | **Odpověď: `2`** 224 | 225 | ```javascript 226 | var foo = {}; 227 | foo.bar = 'hello'; 228 | ``` 229 | Otázka: Jaká je hodnota foo.length? 230 | **Odpověď: `undefined`** 231 | 232 | **[[⬆]](#toc)** 233 | 234 | ####Zábavné otázky: 235 | 236 | * Jaká je nejúžasnější věc, kterou jste kdy nakódovali, nebo na kterou jste nejvíce pyšní? 237 | * Jaké jsou Vaše oblíbené části vývojářských nástrojů, které používáte? 238 | * Máte nějaký vlastní hobby projekt? 239 | * Jaká je Vaše oblíbená vlastnost Internet Exploreru? 240 | 241 | **[[⬆]](#toc)** 242 | -------------------------------------------------------------------------------- /Danish/README.md: -------------------------------------------------------------------------------- 1 | #Front-end Job Interview Spørgsmål 2 | 3 | @version 1.0 4 | 5 | **Bemærk:** Dette arkiv indeholder et udvalg af spørgsmål, der kan bruges til samtale til stillingen som front-end udvikler. Det kan på ingen måde anbefales at bruge hver eneste spørgsmål på samme kandidat da det ville tage flere timer. 6 | 7 | Husk på, at mange af disse spørgsmål er åbne og kan føre til interessante diskussioner, der fortæller dig mere om personens evner end et klart svar ville. 8 | 9 | ####Originale bidragydere 10 | 11 | **Bemærk:** Størstedelen af spørgsmålene blev plukket fra en tråd skabt og bidraget af følgende personer: 12 | 13 | * @bentruyman (http://bentruyman.com) 14 | * @cowboy (http://benalman.com) 15 | * @roger_raymond (http://twitter.com/iansym) 16 | * @ajpiano (http://ajpiano.com) 17 | * @paul_irish (http://paulirish.com) 18 | * @SlexAxton (http://alexsexton.com) 19 | * @boazsender (http://boazsender.com) 20 | * @miketaylr (http://miketaylr.com) 21 | * @vladikoff (http://vladfilippov.com) 22 | * @gf3 (http://gf3.ca) 23 | * @jon_neal (http://twitter.com/jon_neal) 24 | * @wookiehangover (http://wookiehangover.com) 25 | * @darcy_clarke (http://darcyclarke.me) 26 | * @tairraos (http://xiaole.happylive.org) 27 | 28 | ### Generelle spørgsmål: 29 | 30 | * Er du på Twitter? 31 | * Hvis ja, hvem følger du? 32 | * Er du på GitHub? 33 | * Hvis ja, hvilke repoer følger du? 34 | * Hvilke blogs følger du? 35 | * Hvilke version kontrolsystemer har du brugt (Git, SVN osv.)? 36 | * Hvad er dit foretrukne udviklingsmiljø? (OS, Editor, Browsere, Tools osv.) 37 | * Kan du beskrive din arbejdsgang, når du bygger en webside? 38 | * Kan du beskrive forskellen mellem 'progressive enhancement' og 'graceful degradation'? 39 | * Bonuspoint beskrive 'feature detection' 40 | * Forklar hvad "Semantisk HTML" betyder. 41 | * Hvilken browser udvikler du primært i og hvad hvilke udviklingsværktøjer bruger du? 42 | * Hvordan vil du optimere et websites ressourcer? 43 | * Du leder efter en række løsninger, som kan omfatte: 44 | * Fil sammenkædning (File concatenation) 45 | * Fil minification 46 | * CDN Hosted 47 | * Caching 48 | * Osv. 49 | * Hvorfor er det bedre at have flere domæner som man serverer sit website fra? 50 | * Hvor mange ressourcer vil en browser hente ad gangen fra et givent domæne? 51 | * Navn 3 måder at mindske et websites belastning. (formodet eller faktisk lade tid) 52 | * Hvis du hoppede på et projekt, og de brugte tabulering og du brugte mellemrum, hvad ville du gøre? 53 | * Foreslå projektet at benytte noget lignende EditorConfig (http://editorconfig.org) 54 | * Følge konventioner (være consistent) 55 | * 'Indføre :retab! kommandoen' 56 | * Skriv et simpelt billed slideshow side 57 | * Bonuspoint, hvis det ikke bruger JS. 58 | * Hvilke værktøjer bruger du til at teste din kode effektivitet? 59 | * JSPerf (http://jsperf.com/) 60 | * Dromaeo (http://dromaeo.com/) 61 | * Osv. 62 | * Hvis du kunne mestre en teknologi i år, hvad ville det så være? 63 | * Forklare vigtigheden af standarder. 64 | * Hvad er FOUC? Hvordan undgår man FOUC? 65 | 66 | ### HTML-specifikke spørgsmål: 67 | 68 | * Hvad er et `doctype` gøre, og hvor mange kan du nævne? 69 | * Hvad er forskellen mellem `standards mode` og `quirks mode`? 70 | * Hvilke Begrænsninger er der med XHTML-sider? 71 | * Er der nogen problemer med at serverer sider som `application/xhtml+xml`? 72 | * Hvordan du serverer man en side med indhold på flere sprog? 73 | * Hvilken slags ting skal du være opmærksom på, når der skal designes eller udviklings til flersprogede sites? 74 | * Kan du bruge XHTML syntaks i HTML5? 75 | * Hvordan bruger du XML i HTML5? 76 | * Hvad er `data-` attributter godt for? 77 | * Hvad er indholds modeller i HTML4 og er de anderledes i HTML5? 78 | * Tænk på HTML5 som en åben web-platform. Hvad er byggestenene i HTML5? 79 | * Consider HTML5 as an open web platform. What are the building blocks of HTML5? 80 | * Beskriv forskellen mellem cookies, sessionStorage og localStorage. 81 | 82 | ### JS-specifikke spørgsmål 83 | 84 | * Hvilke JavaScript-biblioteker har du brugt? 85 | * Har du nogensinde kigget på kildekoden til bibliotekerne eller frameworks som du bruger? 86 | * Hvordan er JavaScript forskellig fra Java? 87 | * Hvad er en Hashtable? 88 | * Hvad er `undefined` og `undeclared` variabler? 89 | * Hvad er en closure, og hvordan/hvorfor ville du bruge en? 90 | * Din yndlings mønster bruges til at skabe dem? argyle (Gælder kun for IIFEs) 91 | * En typisk eksempel på brug af anonyme funktioner? 92 | * Forklare "JavaScript module pattern", og hvornår du skal bruge det. 93 | * Bonuspoint for at nævne ren namespacing. 94 | * Hvad hvis dine moduler er uden namespace? 95 | * Hvordan tilrettelægger du din kode? (module pattern, classical inheritance?) 96 | * Hvad er forskellen mellem 'host objects' og 'native objects'? 97 | * Forskel mellem: 98 | ```javascript 99 | function Person(){} var person = Person() var person = new Person() 100 | ``` 101 | * Hvad er forskellen mellem `.call` og `.apply`? 102 | * Forklare `Function.prototype.bind`? 103 | * Hvornår skal du optimere din kode? 104 | * Kan du forklare, hvordan arv(inheritance) virker i JavaScript? 105 | * Hvornår vil du bruge `document.write()`? 106 | * De fleste annoncer stadig genereres ved brug af `document.write()` selvom dets anvendelse er ildeset. 107 | * Hvad er forskellen mellem `feature detection`, `feature inference`, og brug af UA string 108 | * Forklar AJAX så udførligt som muligt. 109 | * Forklare hvordan JSONP virker (og hvordan det egentlig ikke er AJAX) 110 | * Har du nogensinde brugt JavaScript templating? 111 | * Hvis ja, hvilke biblioteker har du brugt (Mustache.js, Handlebars osv.) 112 | * Forklare "hoisting". 113 | * Forklare "event bubbling". 114 | * Hvad er forskellen mellem en "attribute" og en "property"? 115 | * Hvorfor er det ikke en god idé Udvide indbygget JavaScript-objekter? 116 | * Hvorfor er Udvidelse af ins en god idé? 117 | * Forskel mellem document load event og document ready event? 118 | * Hvad er forskellen mellem `==` og `===`? 119 | * Forklar, hvordan du ville få en query string parameter fra browservinduets URL. 120 | * Forklare den samme oprindelse politik med hensyn til JavaScript. 121 | * Forklare event delegation. 122 | * Beskrive arv mønstre(inheritance patterns) i JavaScript. 123 | * Få det til at virke: 124 | ```javascript 125 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 126 | ``` 127 | * Beskrive en strategi for memoization (undgå beregning gentagelser) i JavaScript. 128 | * Hvorfor hedder det en Ternary erklæring, hvad betyder ordet "Ternary"? 129 | * Hvad er arity af en funktion? 130 | * Hvad er `"use strict";`? hvad er fordelene og ulemperne ved at bruge det? 131 | 132 | ### JS-kode eksempler: 133 | 134 | ```javascript 135 | ~~3.14 136 | ``` 137 | Spørgsmål: Hvilken værdi er returneret fra ovenstående? 138 | **Svar: 3** 139 | 140 | ```javascript 141 | "i'm a lasagna hog".split("").reverse().join(""); 142 | ``` 143 | Spørgsmål: Hvilken værdi er returneret fra ovenstående? 144 | **Svar: "goh angasal a m'i"** 145 | 146 | ```javascript 147 | ( window.foo || ( window.foo = "bar" ) ); 148 | ``` 149 | Spørgsmål: Hvad er værdien af window.foo? 150 | **Svar: "bar"** 151 | Hvis window.foo er falsk ellers vil det bevare sin værdi. 152 | 153 | ```javascript 154 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 155 | ``` 156 | Spørgsmål: Hvad er resultatet af de to ovennævnte alerts? 157 | ** Svar: "Hello World" & ReferenceError: bar er ikke defineret ** 158 | 159 | ```javascript 160 | var foo = []; 161 | foo.push(1); 162 | foo.push(2); 163 | ``` 164 | Spørgsmål: Hvad er værdien af foo.length? 165 | **Svar: `2` 166 | 167 | ```javascript 168 | var foo = {}; 169 | foo.bar = 'hello'; 170 | ``` 171 | Spørgsmål: Hvad er værdien af foo.length? 172 | **Svar: `undefined` 173 | 174 | ```javascript 175 | foo = foo||bar 176 | ``` 177 | Spørgsmål: Hvad betyder? 178 | **Svar: if(!foo) foo = bar 179 | 180 | ```javascript 181 | foo>>1 182 | ``` 183 | Spørgsmål: Hvad betyder? 184 | **Svar: Math.floor(foo/2) 185 | 186 | ```javascript 187 | foo|0 188 | foo+.5|0 189 | ``` 190 | Spørgsmål: Hvad betyder? 191 | **Svar: parseInt(foo) & Math.round(foo) 192 | 193 | ```javascript 194 | function foo(bar1, bar2, bar3){} 195 | ``` 196 | Spørgsmål: Hvordan får man antallet af parametre? 197 | **Svar: foo.length //dette eksempel er 3 198 | 199 | 200 | ### jQuery-specifikke spørgsmål: 201 | 202 | * Forklar "kæde"(chaining). 203 | * Forklar "deferreds". 204 | * Nævn nogle jQuery specifikke optimeringer du kan implementere? 205 | * Hvad betyder `.end()` gøre? 206 | * Hvordan og hvorfor, ville du namespace en bundet event handler? 207 | * Navn 4 forskellige værdier, du kan give en jQuery metoden. 208 | * Selector (string), HTML (string), Callback (funktion), HTMLElement, objekt, array, element array, jQuery objekt osv. 209 | * Hvad er effects (eller fx) queue? 210 | * Hvad er forskellen mellem `.get()`, `[]`, og `.eq()`? 211 | * Hvad er forskellen mellem `.bind()`, `.live()`, og `.delegate()`? 212 | * Hvad er forskellen mellem `$` og `$.fn`? Eller hvad er `$.fn`. 213 | * Optimer denne selector: 214 | ```javascript 215 | $(".foo div#bar:eq(0)") 216 | ``` 217 | * Forskel mellem `delegate()` og `live()`? 218 | 219 | 220 | ### CSS-specifikke spørgsmål: 221 | 222 | * Beskriv hvad en "reset" CSS-fil laver, og hvordan den nyttigt. 223 | * Beskrive Floats og hvordan de virker. 224 | * Hvilken clearing teknikker findes der og hvilke er passende for hvilken sammenhæng? 225 | * Forklar CSS sprites, og hvordan du vil indføre dem på en side eller et websted. 226 | * Hvad er din yndlings billed udskiftning(image replacement) teknik og som bruger du? 227 | * CSS property hacks, konditionel inkluderet. css filer, eller ... noget andet? 228 | * Hvordan serverer du dine sider for funktionen begrænset browsere? 229 | * Hvilke teknikker/processer bruger du? 230 | * Hvilke forskellige måder findes der for at visuelt skjule indhold (og gør det kun tilgængelig for skærmlæsere)? 231 | * Har du nogensinde brugt et grid system, og hvis ja, hvad foretrækker du? 232 | * Har du brugt eller implementeret media queries eller mobile specifikke layouts/CSS? 233 | * Noget kendskab til styling af SVG? 234 | * Hvordan optimerer du dine websider til tryk? 235 | * Hvad skal der til for at skrive effektiv CSS? 236 | * Bruger du CSS præprocessorer? (SASS, Compass, Stylus, LESS) 237 | * Hvis ja, beskriv, hvad du kan lide og ikke lide ved CSS præprocessorer som du har brugt. 238 | * Hvordan vil du implementere en web-design, der ikke bruger standard skrifttyper? 239 | * Webfonts (skrifttype tjenester som: Google Webfonts, Typekit osv.) 240 | * Forklare hvordan en browser afgør, hvilke elementer matcher en CSS selector? 241 | 242 | ### Valgfri sjove spørgsmål: 243 | 244 | * Hvad er den fedeste ting, du nogensinde har kodet, hvad er du mest stolt af? 245 | * Kender du HTML5 bandetegn? 246 | * Er du nu, eller har du nogensinde været på en båd. 247 | * Hvad er dine foretrukne dele om de udviklere værktøjer som du bruger? 248 | * Har du nogen hygge projekter? Hvilken slags? 249 | * Forklare betydningen af ​​"cornify". 250 | * På et stykke papir, skriv ned bogstaverne A B C D E lodret. Nu sæt dem i faldende rækkefølge uden at skrive én linje kode. 251 | * Vent og se, om de vender papiret på hovedet 252 | * Pirate eller Ninja? 253 | * Bonus hvis det er en kombination og en god grund blev givet (+2 for zombie abe pirat ninjas) 254 | * Hvad ville du gøre, hvis ikke Webudvikling? 255 | * Hvor i verden er Carmen Sandiego? 256 | * Where in the world is Carmen Sandiego? 257 | * Tip: deres svar er altid forkert 258 | * Hvad er dit foretrukne funktion i Internet Explorer? 259 | * Færdiggør denne sætning: Brendan Eich og Doug Crockford er __________ af javascript. 260 | * JQuery: et godt bibliotek eller den bedste bibliotek? Diskuter. 261 | * http://www.w3schools.com/ eller http://w3fools.com/ -------------------------------------------------------------------------------- /Dutch/README.md: -------------------------------------------------------------------------------- 1 | #Front-end interview vragen 2 | 3 | @version 2.0.0 4 | 5 | Deze repo bevat een aantal front-end interview vragen die je kunnen helpen om ervaren kandidaten te vinden. Het is uiteraard niet aangeraden om elke vraag aan een sollicitant te stellen (dat zou ook uren in beslag nemen). Maar als je er een paar gebruikt is het mogelijk om het gewenste skillniveau te vinden dat je zoekt. 6 | 7 | [Rebecca Murphey](http://rmurphey.com/)'s [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) is ook een geweldige bron om je in te lezen voordat je aan een interview begint. 8 | 9 | **Let op:** Houd er rekening mee dat deze vragen meestal een open einde hebben en dat zou kunnen leiden tot interessante discussies die je meer over de persoon zelf kan vertellen dan een standaard antwoord. 10 | 11 | ####Originele Bijdragers 12 | 13 | De meerderheid van deze vragen is geplukt uit een [oksoclap](http://oksoclap.com/) thread origineel gemaakt door [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) en aan bijgedragen door de volgende individuen: 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com/iansym) 27 | 28 | ### Algemene Vragen: 29 | 30 | * Praat over je favoriete ontwikkelomgeving. (OS, Editor, Browsers, Tools etc.) 31 | * Kan je jouw workflow beschrijven als je een nieuwe web pagina maakt? 32 | * Kan je het verschil beschrijven tussen progressieve verbeteringen en gracieuse degradatie? 33 | * Bonus punten voor het beschrijven van feature detection 34 | * Leg uit wat "Semantische HTML" betekent. 35 | * Hoe zou je website assets/resources optimaliseren? 36 | * Kijk naar een aantal oplossingen zoals: 37 | * Bestands concatenatie 38 | * Betands minificatie 39 | * Content Delivery Network 40 | * Caching 41 | * etc. 42 | * Waarom is het beter om website resources van meerdere domeinen te laden? 43 | * Hoeveel resources kan een browser tegelijkertijd downloaden van een domein? 44 | * Noem 3 manieren om pagina laadtijd te verminderen. (waargenomen of gemeten tijd) 45 | * Als je op een project kwam te werken waar ze tabs gebruiken en jij gebruikt spaties, wat zou je doen? 46 | * Suggereren dat het project misschien iets als [EditorConfig] (http://editorconfig.org) kan gebruiken. 47 | * Je aanpassen aan de conventie (consistent blijven) 48 | * `issue :retab! command` 49 | * Schrijf een simpele slideshow pagina 50 | * Bonus punten als het geen JS gebruikt. 51 | * Welke tools gebruik je om je je code performance te testen? 52 | * Profiler, JSPerf, Dromaeo 53 | * Als je dit jaar één techniek zou willen beheersen, wat zou het zijn? 54 | * Kan je de verschillen tussen Long-Polling, Websockets en SSE benoemen? 55 | * Leg het belang uit van standaards en standaards organisaties. 56 | * Wat is FOUC? Hoe voorkom je FOUC? 57 | 58 | ### HTML-Specifieke Vragen: 59 | 60 | * Wat doet een `doctype`? 61 | * Wat is het verschil tussen standaard modus en quirks modus? 62 | * Wat zijn de beperkingen als je XHTML pagina's serveert? 63 | * Zijn er problemen als je ze serveert als `application/xhtml+xml`? 64 | * Hoe serveer je een pagina met content in meerdere talen? 65 | * Wat voor dingen moet je voor op passen als je designt of ontwikkelt voor meertalige sites? 66 | * Waar zijn `data-` attributen goed voor? 67 | * Stel je HTML5 voor als een open web platform. Wat zijn dan de bouwstenen van HTML5? 68 | * Beschrijf het verschil tussen cookies, sessionStorage en localStorage. 69 | 70 | ### JS-Specifieke Vragen: 71 | 72 | * Beschrijf event delegatie 73 | * Leg uit hoe `this` werkt in JavaScript 74 | * Leg uit prototypal inheritance werkt 75 | * Hoe kan je je JavaScript testen? 76 | * AMD vs. CommonJS? 77 | * Wat is een hashtable? 78 | * Wat zijn `undefined` en `undeclared` variabelen? 79 | * Wat is een closure, en hoe/waarom zou je het gebruiken? 80 | * Je favoriete pattern om deze te gebruiken? argyle (Alleen toepasbaar bij IIFEs) 81 | * Wat is een typische use case voor anonieme functies? 82 | * Leg de "JavaScript module pattern" uit wanneer je het zou gebruiken. 83 | * Bonus punten voor het noemen van clean namespacing. 84 | * Wat als je modules namespace-loos zijn? 85 | * Hoe organiseer je je code? (module pattern, classical inheritance?) 86 | * Wat is het verschild tussen host objects en native objects? 87 | * Verschil tussen: 88 | ```javascript 89 | function Person(){} var person = Person() var person = new Person() 90 | ``` 91 | * Wat is het verschil tussen `.call` en `.apply`? 92 | * Leg uit `Function.prototype.bind`? 93 | * Wanneer optimaliseer je je code? 94 | * Kan je uitleggen hoe overerving werkt in JavaScript? 95 | * Wanneer zou je `document.write()` gebruiken? 96 | * Veel ads gebruiken nog steeds `document.write()` ookal wordt dit meestal afgekeurd 97 | * Wat is het verschil tussen feature detection, feature inference en het gebruiken van een UA string 98 | * Leg AJAX zo gedetailleerd mogelijk uit 99 | * Leg uit hoe JSONP werkt (en hoe het niet echt AJAX is) 100 | * Heb je ooit JavaScript templating gebruikt? 101 | * Zo ja, welke libraries heb je gebruikt? (Mustache.js, Handlebars etc.) 102 | * Leg "hoisting" uit. 103 | * Beschrijf event bubbling. 104 | * Wat is het verschil tussen een "attribuut" en een "property"? 105 | * Waarom is het uitbreiden van built-in JavaScript objects geen goed idee? 106 | * Waarom is het uitbreiden van built ins een goed idee? 107 | * Wat is het verschil tussen document load en document ready? 108 | * Wat is het verschil tussen `==` en `===`? 109 | * Leg uit hoe je een query string parameter uit een browsers window URL kan halen. 110 | * Leg de same-origin policy met betrekking tot JavaScript uit. 111 | * Beschrijf overerving patronen in JavaScript. 112 | * Maaak dit werkend: 113 | ```javascript 114 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 115 | ``` 116 | * Beschrijf een strategie voor memoization (ontwijken van berekening repetitie) in JavaScript. 117 | * Waarom heet het een Ternary expression, waar doelt het woord "Ternary" op? 118 | * Wat is de ariteit van een functie? 119 | * Wat is `"use strict";`? Wat zijn de voor- en nadelen om dit te gebruiken? 120 | 121 | ### JS-Code Voorbeelden: 122 | 123 | ```javascript 124 | ~~3.14 125 | ``` 126 | Vraag: Welke waarde wordt terug gegeven bij de bovenstaande code? 127 | **Antwoord: 3** 128 | 129 | ```javascript 130 | "ik hou van lasagna".split("").reverse().join(""); 131 | ``` 132 | Vraag: Welke waarde wordt terug gegeven bij de bovenstaande code? 133 | **Antwoord: "angasal nav uoh ki"** 134 | 135 | ```javascript 136 | ( window.foo || ( window.foo = "bar" ) ); 137 | ``` 138 | Vraag: What is the value of window.foo? 139 | **Antwoord: "bar"** 140 | Alleen als window.foo falsy was, anders leverde het zijn waarde op. 141 | 142 | ```javascript 143 | var foo = "Hallo"; (function() { var bar = " Wereld"; alert(foo + bar); })(); alert(foo + bar); 144 | ``` 145 | Vraag: Wat is de uitkomst van de twee alerts? 146 | **Antwoord: "Hallo Wereld" & ReferenceError: bar is not defined** 147 | 148 | ```javascript 149 | var foo = []; 150 | foo.push(1); 151 | foo.push(2); 152 | ``` 153 | Vraag: Wat is de waarde van foo.length? 154 | **Antwoord: `2` 155 | 156 | ```javascript 157 | var foo = {}; 158 | foo.bar = 'hello'; 159 | ``` 160 | Vraag: Wat is de waarde van foo.length? 161 | **Antwoord: `undefined` 162 | 163 | ### jQuery-Specifieke Vragen: 164 | 165 | * Leg "chaining" uit. 166 | * Leg "deferreds" uit. 167 | * Wat zijn een paar jQuery specifieke optimalisaties die jij kan implementeren? 168 | * Wat doet `.end()`? 169 | * Hoe en waarom zou je een bound event handler namespacen? 170 | * Noem 4 verschillende waardes die je aan een jQuery methode kan geven. 171 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 172 | * Wat is de effecten (fx) queue? 173 | * Wat is het verschil tussen `.get()`, `[]`, en `.eq()`? 174 | * Wat is het verschil tussen `.bind()`, `.live()`, en `.delegate()`? 175 | * Wat is het verschil tussen `$` en `$.fn`? Of sowieso, wat is `$.fn`. 176 | * Optimaliseer deze selector: 177 | ```javascript 178 | $(".foo div#bar:eq(0)") 179 | ``` 180 | * Wat is het verschil tussen 'delegate()' en 'live()'? 181 | 182 | 183 | ### CSS-Specifieke Vragen: 184 | 185 | * Beschrijf wat een "reset" CSS bestand doet en hoe dit bruikbaar is. 186 | * Beschrijf Floats en hoe ze werken. 187 | * Wat zijn de verschillende clearing technieken en welke is toepasselijk voor welke context? 188 | * Leg CSS sprites uit en hoe je ze kan implementeren op een pagina. 189 | * Wat zijn jouw favoriete image replacement technieken en welke gebruik je wanneer? 190 | * CSS property hacks, conditionele ingeladen .css files, of... iets anders? 191 | * Hoe serveer je je pagina's voor feature-constrained browsers? 192 | * Welke technieken/processen gebruik je? 193 | * Wat zijn de verschillende manieren om content visueel te verbergen (en het alleen zichtbaar te houden voor screenreaders)? 194 | * Heb je ooit een grid-systeem gebruikt en zo ja, wat is je voorkeur? 195 | * Heb je ooit media queries of mobiel specifieke layouts/CSS gebruikt of geïmplementeerd? 196 | * Ben je bekend met SVG styling? 197 | * Hoe optimaliseer je je pagina's voor printen? 198 | * Wat zijn sommige van de "gotchas" voor het schrijven van efficiënte CSS? 199 | * Wat zijn de voor- en nadelen van CSS preprocessors? (SASS, Compass, Stylus, LESS) 200 | * Wat vind je wel en niet fijn aan diegene die jij hebt gebruikt. 201 | * Hoe zou je een website design implementeren dat gebruik maakt van non-standard fonts? 202 | * Webfonts (font services zoals: Google Webfonts, Typekit etc.) 203 | * Leg uit hoe een browser beslists welke elementen hij moet matchen met een CSS selector? 204 | 205 | ### Optionele Losse Vragen: 206 | 207 | * Wat is het coolste dat je ooit gemaakt hebt. Waar ben je trots op? 208 | * Wat zijn de favoriete dingen van de ontwikkeltools die je gebruikt? 209 | * Heb je hobbyprojecten? Zo ja, wat voor? 210 | * Wat is je favoriete feature van Internet Explorer? 211 | -------------------------------------------------------------------------------- /German/README.md: -------------------------------------------------------------------------------- 1 | #Fragen im Bewerbungsgespräch für Frontend-Entwickler 2 | 3 | @version 2.0.0 4 | 5 | Dieses Repo enthält einige Fragen, die zur Einschätzung von geeigneten Frontend-Entwicklern innerhalb eines Bewerbungsgesprächs verwendet werden können. Es ist auf keinen Fall ratsam, einem Bewerber jede einzelne Frage zu stellen (das würde Stunden dauern). Es mag hilfreich sein, eine handvoll passender Fragen aus dieser Liste auszuwählen, um die Fähigkeiten abzuklopfen, die für den Job wichtig sind. 6 | 7 | [Rebecca Murphey](http://rmurphey.com/)'s [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) (Englisch) ist ebenso eine nützliche Quelle zur Vorbereitung auf ein Bewerbungsgespräch. 8 | 9 | **Anmerkung:** Beachte bitte, dass viele dieser Fragen so offen gehalten sind, dass sie interessante Diskussionen auslösen können, in deren Verlauf du viel mehr über die Fähigkeiten eines Bewerbers erfahren kannst, als in kurzen, direkten Antworten. 10 | 11 | #### Initiatoren und Mitwirkende 12 | 13 | Ein Großteil der Fragen wurden aus einer Diskussion bei [oksoclap](http://oksoclap.com/) entnommen, die von [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) angestoßen wurde, und an der später folgende Personen beteiligt waren: 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com) 27 | 28 | ### Allgemeine Fragen: 29 | 30 | * Welche Versionsverwaltung hast du bisher verwendet (Git, SVN, etc.)? 31 | * Wie sieht deine bevorzugte Entwicklungsumgebung aus? (Betriebssystem, Editor, Browser, Werkzeuge, etc.) 32 | * Beschreibe bitte deinen Arbeitsablauf, wenn du eine Website entwickelst. 33 | * Kannst du den Unterschied zwischen Progressive Enhancement und Graceful Degradation beschreiben? 34 | * Extra-Punkte für die Beschreibung von Feature Detection 35 | * Beschreibe bitte, was »Semantisches HTML« bedeutet. 36 | * In welchem Browser entwickelst du vornehmlich und welche Entwicklerwerkzeuge verwendest du dabei? 37 | * Wie würdest du die Ressourcen einer Website im Hinblick auf Performance optimieren? 38 | * Verschiedene Lösungsansätze könnten sein: 39 | * Zusammenfassen von Dateien 40 | * Minifizierung 41 | * Nutzung von CDN 42 | * Caching 43 | * etc. 44 | * Warum ist es sinnvoll, Ressourcen über mehr als eine Domain abzufragen? 45 | * Wie viele Quellen kann ein Browser von einer Domain parallel empfangen? 46 | * Benenne drei Umstände, die das Laden einer Seite verlangsamen können (hinsichtlich der Wahrnehmung oder der tatsächlichen Ladezeit). 47 | * Wie verhälst du dich, wenn du in ein neues Projekt kommst, in dem Tabs verwendet werden und du aber Leerzeichen verwendest? 48 | * Vorschlagen, dass für das Projekt sowas wie EditorConfig (http://editorconfig.org) verwendet werden soll. 49 | * Sich an die Vorgaben des Projekts halten. 50 | * `issue :retab! command` 51 | * Entwickle eine simple Slideshow-Seite. 52 | * Bonuspunkte, wenn sie kein JS verwendet. 53 | * Welche Werkzeuge nutzt du zum Testen der Performance deines Codes? 54 | * JSPerf (http://jsperf.com/) 55 | * Dromaeo (http://dromaeo.com/) 56 | * etc. 57 | * Wenn du eine Technologie in diesem Jahr meistern könntest, welche wäre das? 58 | * Erkläre die Bedeutung von Standards und Standardisierungsorganisationen? 59 | * Was ist FOUC? Wie vermeidest du FOUC? 60 | 61 | ### HTML-spezifische Fragen: 62 | 63 | * Was tut ein `doctype` und wie viele von ihnen kannst du benennen? 64 | * Was ist der Unterschied zwischen Standards-Modus und Quirks-Modus? 65 | * Welche Einschränkungen gibt es beim Ausliefern von XHTML-Seiten? 66 | * Gibt es Probleme, wenn Seiten als `application/xhtml+xml` ausgeliefert werden? 67 | * Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus? 68 | * Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst? 69 | * Darf man XHTML-Syntax in HTML5 verwenden? 70 | * Wie verwendet man XML in HTML5? 71 | * Wofür sind `data-`-Attribute nützlich? 72 | * Was sind die Inhaltsmodelle in HTML4 und sind sie unterschiedlich in HTML5? 73 | * Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5? 74 | * Beschreibe die Unterschiede zwischen Cookies, sessionStorage und localStorage. 75 | 76 | ### JS-spezifische Fragen: 77 | 78 | * Erkläre Event Delegation 79 | * Erkläre, wie `this` in JavaScript funktioniert. 80 | * Erkläre, wie prototypische Vererbung funktioniert. 81 | * Wie gehst du vor beim Testen von JavaScript? 82 | * AMD vs. CommonJS? 83 | * Welche JavaScript-Bibliotheken hast du bisher benutzt? 84 | * Hast du jemals den Sourcecode von Bibliotheken/Frameworks angeschaut, die du benutzt? 85 | * Was ist ein hashtable? 86 | * Was sind `undefined` und `undeclared` Variablen? 87 | * Was ist eine Closure und wie/warum würdest du eine verwenden? 88 | * Dein bevorzugtes Pattern, um sie zu generieren? Argyle (Nur geeignet für IIFEs). 89 | * Was ist ein typischer Anwendungsfall für anonymous functions? 90 | * Erkläre das »JavaScript Module Pattern« und wann du es verwenden würdest. 91 | * Bonuspunkte, wenn sauberes Namespacing genannt wird. 92 | * Und wenn deine Module ohne Namespace sind? 93 | * Wie organisierst du deinen Code? (Module Pattern, klassische Vererbung?) 94 | * Was ist der Unterschied zwischen host objects und native objects? 95 | * Unterschied zwischen: 96 | ```javascript 97 | function Person(){} var person = Person() var person = new Person() 98 | ``` 99 | * Worin unterscheiden sich `.call` und `.apply`? 100 | * Erkläre `Function.prototype.bind`. 101 | * Wann optimierst du deinen Code? 102 | * Kannst du erklären, wie Vererbung in JavaScript funktioniert? 103 | * Wann verwendet man `document.write()`? 104 | * Die meisten Werbebanner verwenden noch `document.write()`, obwohl es verpönt ist. 105 | * Was sind die Unterschiede zwischen Feature Detection, Feature Inference und Verwendung des UA-Strings? 106 | * Erkläre AJAX so detailiert wie möglich. 107 | * Erkläre wie JSONP funktioniert (und warum es nicht wirklich AJAX ist). 108 | * Hast du schonmal JavaScript-Templating verwendet? 109 | * Wenn ja, welche Bibliotheken hast du verwendet (Mustache, Handlebars, etc.)? 110 | * Erkläre »Hoisting«. 111 | * Erkläre Event Bubbling. 112 | * Was ist der Unterschied zwischen einem »Attribut« und einer »Property«? 113 | * Warum ist es nicht sinnvoll, JavaScript-eigene Objekte zu erweitern? 114 | * Warum ist es sinnvoll, Kernfunktionen zu erweitern? 115 | * Unterschied zwischen document load event und document ready event? 116 | * Was ist der Unterschied zwischen `==` und `===`? 117 | * Erkläre, wie du einen Query-String-Parameter aus der URL des Browserfensters abfragst. 118 | * Erkläre die same-origin policy und in welcher Form sie JavaScript betrifft. 119 | * Erkläre Vererbungsmuster in JavaScript. 120 | * Bringe dies zum Laufen: 121 | ```javascript 122 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 123 | ``` 124 | * Beschreibe eine Strategie für Memoization (Vermeidung von Berechnungsschleifen) in JavaScript. 125 | * Warum heißt es »Ternary expression« und worauf deutet das Wort »Ternary« hin? 126 | * Was ist die Stelligkeit (Arity) einer Funktion? 127 | * Was ist `"use strict";`? Was sind die Vor- und Nachteile bei der Verwendung? 128 | 129 | ### JS-Codebeispiele: 130 | 131 | ```javascript 132 | ~~3.14 133 | ``` 134 | Frage: Welcher Wert wird zurückgegeben? 135 | **Antwort: 3** 136 | 137 | ```javascript 138 | "Draußen nur Kännchen".split("").reverse().join(""); 139 | ``` 140 | Frage: Welcher Wert wird zurückgegeben? 141 | **Antwort: "nehcnnäK run neßuarD"** 142 | 143 | ```javascript 144 | ( window.foo || ( window.foo = "bar" ) ); 145 | ``` 146 | Frage: Welchen Wert hat window.foo? 147 | **Antwort: "bar"** 148 | nur wenn window.foo false war, andernfalls behält es seinen Wert. 149 | 150 | ```javascript 151 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 152 | ``` 153 | Frage: Was ist das Ergebnis der beiden alerts oben? 154 | **Antwort: "Hello World" & ReferenceError: bar is not defined** 155 | 156 | ```javascript 157 | var foo = []; 158 | foo.push(1); 159 | foo.push(2); 160 | ``` 161 | Frage: Welchen Wert hat foo.length? 162 | **Antwort: `2` 163 | 164 | ```javascript 165 | var foo = {}; 166 | foo.bar = 'hello'; 167 | ``` 168 | Frage: Welchen Wert hat foo.length? 169 | **Antwort: `undefined` 170 | 171 | ### jQuery-spezifische Fragen: 172 | 173 | * Erkläre »Chaining«. 174 | * Erkläre »Deferreds«. 175 | * Was sind ein paar jQuery-spezifische Optimierungen, die man vornehmen kann? 176 | * Was macht `.end()`? 177 | * Wie und warum würdest du einen Namespace für einen gebundenen Event handler verwenden? 178 | * Benenne 4 verschiedene Werte, die man einer jQuery-Methode übergeben kann. 179 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 180 | * Was ist die effects (oder fx) queue? 181 | * Was ist der Unterschied zwischen `.get()`, `[]` und `.eq()`? 182 | * Was ist der Unterschied zwischen `.bind()`, `.live()`, und `.delegate()`? 183 | * Was ist der Unterschied zwischen `$` und `$.fn`? Was ist überhaupt `$.fn`? 184 | * Optimiere diesen Selektor: 185 | ```javascript 186 | $(".foo div#bar:eq(0)") 187 | ``` 188 | * Unterschied zwischen 'delegate()' und 'live()'? 189 | 190 | ### CSS-spezifische Fragen: 191 | 192 | * Erkläre was ein »Reset«-CSS macht und wofür es nützlich ist. 193 | * Beschreibe Floats und wie sie funktionieren. 194 | * Was sind die verschiedenen Clear-Methoden und welche ist geeignet für welchen Kontext? 195 | * Erkläre CSS-Sprites und wie du sie auf einer Seite oder Website implementieren würdest. 196 | * Was sind deine bevorzugten Image-Replacement-Techniken und wann benutzt du welche davon? 197 | * CSS-Hacks, per conditional eingebundene .css-Ressourcen oder… was sonst? 198 | * Wie lieferst du Seiten für funktional beschränkte Browser aus? 199 | * Welche Techniken/Prozesse verwendest du dafür? 200 | * Was sind die verschiedenen Möglichkeiten, um Inhalte visuell auszublenden (und für Screenreader zugänglich zu machen)? 201 | * Hast du schonmal ein Grid-System verwendet, und wenn ja, welches bevorzugst du? 202 | * Hast du media queries oder mobile-spezifische Layouts/CSS verwendet/entwickelt? 203 | * Bist du mit dem Styling von SVG vertraut? 204 | * Wie optimierst du Websites für den Druck? 205 | * Was sind ein paar Kniffe, um effizientes CSS zu schreiben? 206 | * Verwendest du CSS-Präprozessoren (Sass, Compass, Stylus, LESS)? 207 | * Wenn ja, beschreibe bitte, was du an den verwendeten magst oder nicht magst. 208 | * Wie würdest du ein Webdesign umsetzen, das Nicht-Standard-Schriften verwendet? 209 | * Webfonts (Dienste wie Google Webfonts, Typekit, etc.) 210 | * Erkläre wie ein Browser entscheidet, welche Elemente von einem CSS-Selektor erfasst werden. 211 | 212 | ### Optionale Spaßfragen: 213 | 214 | * Was ist das großartigste, was du je entwickelt hast, und worauf bist du am meisten stolz? 215 | * Kennst du das Zeichen der HTML5-Gang? 216 | * Bist du gerade oder warst du jemals auf einem Boot? 217 | * Was sind die besten Eigenschaften der Entwicklerwerkzeuge, die du benutzt? 218 | * Hast du irgendwelche Freizeitprojekte? Welcher Art? 219 | * Erkläre die Bedeutung von »cornify«. 220 | * Schreibe auf einen Zettel die Buchstaben A B C D E von oben nach unten. Jetzt sortiere diese in umgekehrter Abfolge, ohne eine Zeile Code zu schreiben. 221 | * Warte einen Moment und schaue, ob sie den Zettel umdrehen. 222 | * Pirat oder Ninja? 223 | * Bonuspunkt, wenn es eine Kombi ist und begründet werden kann (+2 für Zombieaffenpiratenninja). 224 | * Wenn nicht Web-Entwicklung, was würdest du dann tun? 225 | * Wo ist Carmen Sandiego? 226 | * Tipp: Die Antwort ist immer falsch. 227 | * Was ist deine Lieblingsfunktion des Internet Explorers? 228 | * Ergänze diesen Satz: Brendan Eich und Doug Crockford sind die __________ von JavaScript. 229 | * jQuery: Eine großartige Bibliothek oder die großartigste Bibliothek von allen? Diskutiere. 230 | * http://www.w3schools.com/ oder http://w3fools.com/ 231 | -------------------------------------------------------------------------------- /Hungarian/README.md: -------------------------------------------------------------------------------- 1 | # Interjú kérdések front-end fejlesztőknek 2 | 3 | Ebben a gyűjteményben összeválogattuk a legjobb front-end fejlesztő interjú kérdéseket. Ellenben nem tanácsoljuk az összes kérdés egyidejű feltevését, hiszen ez órákat venne igénybe de egy válogatott kérdéssorral megkönnyíthetjük a potenciális jelentkezők szelektálását. 4 | 5 | [Rebecca Murphey](http://rmurphey.com/), [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) cikke is hasznos alapja lehet egy interjúnak. 6 | 7 | **Megjegyzés:** Ne feledd, hogy a kérdések többsége érdekes beszélgetésé alakulhat, ami többet elárulhat az emberről mintha csak egyszerű válaszokat adna. 8 | 9 | ## Tartalom 10 | 11 | 1. [Eredeti közreműködők](#contributors) 12 | 1. [Általános kérdések](#general) 13 | 1. [HTML kérdések:](#html) 14 | 1. [CSS kérdések](#css) 15 | 1. [JS kérdések](#js) 16 | 1. [jQuery kérdések](#jquery) 17 | 1. [Példakódok](#jscode) 18 | 1. [Választható és vicces kérdések](#fun) 19 | 1. [További referenciák](#references) 20 | 21 | ####[[⬆]](#toc) Eredeti közreműködők: 22 | 23 | A kérdések többsége egy [oksoclap](http://oksoclap.com/) beszélgetés alapján készült, amit [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) kezdeményezett az alábbi közreműködőkkel: 24 | 25 | * [@bentruyman](http://twitter.com/bentruyman) - [http://bentruyman.com](http://bentruyman.com) 26 | * [@cowboy](http://twitter.com/cowboy) - [http://benalman.com](http://benalman.com) 27 | * [@ajpiano](http://ajpiano) - [http://ajpiano.com](http://ajpiano.com) 28 | * [@SlexAxton](http://twitter.com/slexaxton) - [http://alexsexton.com](http://alexsexton.com) 29 | * [@boazsender](http://twitter.com/boazsender) - [http://boazsender.com](http://boazsender.com) 30 | * [@miketaylr](http://twitter.com/miketaylr) - [http://miketaylr.com](http://miketaylr.com) 31 | * [@vladikoff](http://twitter.com/vladikoff) - [http://vladfilippov.com](http://vladfilippov.com) 32 | * [@gf3](http://twitter.com/gf3) - [http://gf3.ca](http://gf3.ca) 33 | * [@jon_neal](http://twitter.com/jon_neal) - [http://twitter.com/jon_neal](http://twitter.com/jon_neal) 34 | * [@wookiehangover](http://twitter.com/wookiehangover) - [http://wookiehangover.com](http://wookiehangover.com) 35 | * [@iansym](http://twitter.com) 36 | 37 | ####[[⬆]](#toc) Általános kérdések: 38 | 39 | * Tanultál valami újat a héten/tegnap és ha igen, mit? 40 | * Mi számodra a legérdekesebb és izgalmasabb a kódolás során? 41 | * Milyen UI, biztonsági, teljesítménybeli, SEO, karbantarthatósági és technológiai szempontokat tartasz szem elött fejlesztés közben? 42 | * Mi a számodra legelőnyösebb fejlesztői környezet? (operációs rendszer, szerkesztő, böngésző, fejlesztői eszközök, stb.) 43 | * Részletezd a munkafolyamatot, hogyan készítesz el egy weboldalt. 44 | * Mi a különbség a fokozatos javítása és a között, hogy a weboldalt folyamatosan optimalizálod régebbi és egyszerűbb felületekre is? 45 | * Bónusz pont a funkció működésének tesztelése adott eszközön. 46 | * Magyarázd el mit jelent a "szemantikus HTML". 47 | * Milyen böngészőt és milyen eszközöket használsz a fejlesztéshez? 48 | * Hogyan optimalizálod egy weboldal forrásait/eszközeit? 49 | * Keress több megoldást, amik tartalmazzák az alábbiakat: 50 | * Fájl egyesítés 51 | * Fájl minimalizálás 52 | * CDN hoszting 53 | * Cachelés 54 | * stb. 55 | * Miert jobb az eszközöket egyszerre több domainnek is kiszolgálni? 56 | * Hány lekérdezés futhat a böngészőben egyidejűleg az adott domain irányába? 57 | * Nevezz meg 3 lehetőséget az oldalletöltés időtartámanak csökkentésére. (előtöltött vagy aktuális töltési idő) 58 | * Ha beszállsz egy projektbe, és ők tabot használnak te pedig szókozt a kód rendezésénél, mit teszel? 59 | * Tanácsolod, hogy használjatok valami technológiát, pl. [EditorConfig](http://editorconfig.org) 60 | * Elfogadod (vagy tartózkodsz) 61 | * `issue :retab! command` 62 | * Készíts egy egyszerű slideshow oldalt. 63 | * Bónusz pont ha nem szükséges hozzá JavaScript. 64 | * Milyen eszközökkel teszteled a kódod teljesítményét? () 65 | * Profiler 66 | * [JSPerf](http://jsperf.com/) 67 | * [Dromaeo](http://dromaeo.com/) 68 | * Ha idén elsajátíthatnál egy technológiát, mi lenne az? 69 | * Ismertesd a sztandardok fontosságát. 70 | * Mi a FOUC? Hogyan kerulöd el a FOUC-et? 71 | 72 | ####[[⬆]](#toc) HTML kérdések: 73 | 74 | * Mi a `doctype` feladata és hány fajtáját tudod megnevezni? 75 | * Mi a különbség a `standard` és a `quirks` módok között? 76 | * Nevezd meg az XHTML oldalak korlátait? 77 | * Van bármi akadálya annak, hogy egy oldalt `application/xhtml+xml`-ként szolgáljon ki? 78 | * Hogyan készítesz fel egy weboldalt többnyelvű tartalom megjelenítésére? 79 | * Mikre kell figyelni egy többnyelvű oldal tervezése és fejlesztése során? 80 | * Mire valók a `data-` attribútumok? 81 | * Tegyük fel, hogy a HTML5 egy nyílt webes felület. Mik az építőelemei? 82 | * Mi a különbség a `cookie` a `sessionStorage` és a `localStorage` között. 83 | 84 | ####[[⬆]](#toc) CSS kérdések: 85 | 86 | * Mire való a "reset" CSS fájl és mennyire hasznos? 87 | * Hogyan működik a CSS `float`? 88 | * Milyen `clear` technikákat ismersz és melyik milyen környezetben a megfelelő? 89 | * Magyarázd el a CSS sprites működését és, hogy hogyan alkalmazod egy weboldalon? 90 | * Mi a kedvenc képpel helyettesítő (image replacement) technikád és mit használsz mire? 91 | * CSS hackek, böngésző függő CSS fájlok, vagy.... valami más? 92 | * Hogyan jelenítesz meg oldalakat korlátozott böngészőkben? 93 | * Milyen technológiákat/folyamatokat használsz? 94 | * Milyen módon tudsz tartalmakat vizuálisan elrejteni (és csak screen olvasók számára elérhetővé tenni)? 95 | * Használtál már "grid system"-et? Ha igen nevezz meg párat. 96 | * Használtál már "media query"-ket vagy mobil specifikus layoutokat/CSS-eket? 97 | * Jártas vagy az SVG használatában? 98 | * Hogyan alakítasz egy weboldalt nyomtatóbaráttá? 99 | * Mik a legjobb "ötletek" a hatékony CSS kód írásához? 100 | * Használsz CSS előfeldolgozó technilógiát? ([SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://learnboost.github.io/stylus/), [LESS](http://lesscss.org/)) 101 | * Ha igen mit szeretsz és mit nem szeretsz bennük? 102 | * Hogyan valósítasz meg egy olyan dizájn kompozíciót, ami nem a szabványos betűtípusokat tartalmazza? 103 | * Webfontok ([Google Webfonts](https://www.google.com/fonts/), [Typekit](https://typekit.com/), stb.) 104 | * Miként határozza meg a böngésző a megfelelő CSS szelektort? 105 | * Hogyan értelmezed a "box model"-t és hogyan alkalmazod a böngészőkben? 106 | 107 | ####[[⬆]](#toc) JS kérdések: 108 | 109 | * Mit jelent az `event delegation`? 110 | * Magyarázd el hogyan működik a `this` a JavaScript-ben. 111 | * Hogyan működik a protokol öröklés (prototypal inheritance)? 112 | * Hogyan teszteled a JavaScript kódodat? 113 | * AMD vs. CommonJS? 114 | * Mi a hashtábla? 115 | * Miért nem működik a következő kód IIFE-ként? `function foo(){ }();` 116 | * Mit kell megváltoztatni, hogy működjön? 117 | * Mit jelent az `undefined` és az `undeclared` változó? 118 | * Miként ellenőrzöd ezeket? 119 | * Mi a "closure", milyen formáit ismered és hogyan használod azokat? 120 | * Hogyan néz ki egy anoním funkció? 121 | * Magyarázd el a JavaScript modul sablont és, hogy mikor használjuk. 122 | * Bónusz pont, ha említi a tiszta "namespace"-ket. 123 | * Mi történik akkor, ha a modul "namespace" mentes? 124 | * Miként rendszerezed a kódodat? (module pattern, classical inheritance) 125 | * Mi a különbség hoszt objektum és natív objektum között? 126 | * Mi a különbség az következő kódok között: 127 | `function Person(){}`, `var person = Person()` és `var person = new Person()` 128 | * Mi a különbség a `.call` és az `.apply` között? 129 | * Magyarázd el mire jó a `Function.prototype.bind`? 130 | * Mikor szoktad optimalizálni a kódodat? 131 | * Magyarázd el hogyan működik az öröklődés szabálya a JavaScript-ben? 132 | * Mikor használod a `document.write()` funkciót? 133 | * A legtöbb generált hírdetésben még mindig használják annak ellenére, hogy nem ajánlatos. 134 | * Mi a különbség a "feature" észlelés (detection), "feature" következtetés (inference) és az UA sztring használata között? 135 | * Magyarázd meg az AJAX működését a lehető legrészletesebben. 136 | * Magyarázd el, hogyan működik a JSONP (és miért nem AJAX valójában). 137 | * Használtál már JavaScript template rendszert? 138 | * Ha igen mit? (Mustache.js, Handlebars, stb.) 139 | * Mit jelent a "hoisting"? 140 | * Mit jelent az `event bubbling`? 141 | * Mi a különbség az "attribute" és a "property" között? 142 | * Miért nem jó ötlet kiegészíteni a beépített JavaScript objektumokat? 143 | * Miért jó ötlet kiegészíteni a bepített funkciókat? 144 | * Mi a különbség a "document load" és a "document ready" között? 145 | * Mi a különbség `==` és `===` között? 146 | * Hogyan olvasol be egy paramétert a böngésző ablak URL-ből? 147 | * Mit jelent a "same-origin" szabály a JavaScript-bet? 148 | * Ismertesd a JavaScript öröklési mintáját. 149 | * Javítsd ki az alábbi példát: 150 | ```javascript 151 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 152 | ``` 153 | * írj le egy memorizáló stratégiát (ismétlődő kalkulációk nélkül) JavaScriptben. 154 | * Mit nevezünk "Ternary" kifejezésnek? Mire utal a "Ternary" szó? 155 | * Mennyi attribútumot lehet átadni egy funkciónak? 156 | * Mi a `"use strict";`, mik az előnyei és a hátrányai? 157 | 158 | ####[[⬆]](#toc) jQuery kérdések: 159 | 160 | * Mit jelent a `chaining`? 161 | * Mit jelent a `deferreds`? 162 | * Milyen jQuery specifikus optimalizálást ismersz? 163 | * Mire használhatjuk az `.end()` funkciót? 164 | * Hogyan neveznél el egy kapcsolt esemény kezelőt (bound event handler) és miért? 165 | * Nevezz meg 4 különböző értéket, ami átadható egy jQuery folyamatnak. 166 | * Szelektor (sztring), HTML (sztring), Callback (funkció), HTMLElement, objektum, tömb, elemb tömb, jQuery objektum, stb. 167 | * Mit jelent az effektek (vagy fx) sorba állítas? 168 | * Mi a különbség `.get()`, `[]`, és `.eq()` között? 169 | * Mi a különbség `.bind()`, `.live()`, és `.delegate()` között? 170 | * Mi a különbség `$` és `$.fn` között? Vagy mit jelent a `$.fn`? 171 | * Optimalizáld a alábbi szelektort: 172 | ```javascript 173 | $(".foo div#bar:eq(0)") 174 | ``` 175 | 176 | ####[[⬆]](#toc) Példakódok: 177 | 178 | ```javascript 179 | modulo(12, 5) // 2 180 | ``` 181 | 182 | *Kérdés: Készítsd el a modulo funkció, hogy a fenti példa eredménye 2 legyen.* 183 | 184 | ```javascript 185 | "i'm a lasagna hog".split("").reverse().join(""); 186 | ``` 187 | 188 | *Kérdés: Milyen értékkel tér vissza a fenti állítás?* 189 | 190 | **Válasz: "goh angasal a m'i"** 191 | 192 | ```javascript 193 | ( window.foo || ( window.foo = "bar" ) ); 194 | ``` 195 | 196 | *Kérdés: Mi az értéke a `window.foo`-nak?* 197 | 198 | **Válasz: "bar"** *(de csak ha a `window.foo` hamis egyébként megtartja az értékét.)* 199 | 200 | ```javascript 201 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 202 | ``` 203 | 204 | *Kérdés: Mi a fenti két alert-nek a kimenete?* 205 | 206 | **Válasz: "Hello World" és ReferenceError: bar is not defined** 207 | 208 | ```javascript 209 | var foo = []; 210 | foo.push(1); 211 | foo.push(2); 212 | ``` 213 | 214 | *Kérdés: Mi a `foo.length` értéke?* 215 | 216 | **Válasz: `2`** 217 | 218 | ####[[⬆]](#toc) Választható és vicces kérdések: 219 | 220 | * Mi a legjobb dolog, amit eddig kódoltál? Mire vagy a legbüszkébb? 221 | * Mi a kedvenced az általad használt fejlesztői eszközökben? 222 | * Van bármilyen állatos projekted? Ha igen milyen? 223 | * Mit szeretsz a legjobban az Internet Explorerben? 224 | 225 | ####[[⬆]](#toc) További referenciák: 226 | 227 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 228 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 229 | * http://css-tricks.com/interview-questions-css/ 230 | -------------------------------------------------------------------------------- /Italian/README_IT.md: -------------------------------------------------------------------------------- 1 | #Domande per il colloquio di lavoro per front-end 2 | 3 | Questo repository contiene una serie di domande che possono essere usate nei colloqui di lavoro quando si esaminano i potenziali candidati per il ruolo di front-end. Non è affatto consigliato usare ogni singola domanda con lo stesso candidato (richiederebbe ore). Scegliere alcune di queste domande dalla lista dovrebbe aiutarti ad esaminare le skill che richiedi. 4 | 5 | L'articolo [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) di [Rebecca Murphey](http://rmurphey.com/) è un'ottima risorsa da leggere prima di affrontare un colloquio. 6 | 7 | **Nota:** Tieni presente che molte di queste domande sono a risposta aperta e possono portare a interessanti discussioni che ti possono far capire le capacità di una persona più di quello che farebbe una risposta diretta. 8 | 9 | ## Indice dei Contenuti 10 | 11 | 1. [Collaboratori Originali](#contributors) 12 | 1. [Domande Generali](#general) 13 | 1. [Domande Specifiche su HTML](#html) 14 | 1. [Domande Specifiche su CSS](#css) 15 | 1. [Domande Specifiche su JS](#js) 16 | 1. [Domande Specifiche su jQuery](#jquery) 17 | 1. [Domande con Codice](#jscode) 18 | 1. [Domande per Divertimento](#fun) 19 | 1. [Altre Ottime Risorse](#references) 20 | 21 | ####[[⬆]](#toc) Collaboratori Originali: 22 | 23 | La maggior parte delle domande sono state prese da una discussione su [oksoclap](http://oksoclap.com/) originariamente creata da [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) e con il contributo delle seguenti persone: 24 | 25 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 26 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 27 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 28 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 29 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 30 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 31 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 32 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 33 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 34 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 35 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 36 | 37 | ####[[⬆]](#toc) Domande Generali: 38 | 39 | * Cosa hai imparato ieri/questa settimana? 40 | * Cosa ti entusiasma o ti interessa della programmazione? 41 | * Quali considerazioni fai riguardo alla UI, alla Sicurezza, alle Prestazioni, al SEO, alla Manutenibilità o alla Tecnologia mentre costruisci una applicazione web o un sito? 42 | * Parla del tuo ambiente di sviluppo preferito. (Sistema Operativo, Editor di testo, Browser, Strumenti ecc.) 43 | * Puoi descrivere il tuo metodo di lavoro quando crei una pagina web? 44 | * Puoi descrivere la differenza tra miglioramento progressivo [*progressive enhancement*] e degradazione elegante [*graceful degradation*]? 45 | * Punti bonus se descrive il rilevamento di funzionalità [*feature detection*] 46 | * Spiega cosa significa "HTML Semantico". 47 | * Come ottimizzeresti le risorse/asset di un sito? 48 | * Mi aspetto svariate soluzioni che possono includere: 49 | * Concatenazione dei file 50 | * Minimizzazione [*minification*] dei file 51 | * Uso di CDN 52 | * Caching 53 | * ecc... 54 | * Perché è meglio servire file per il sito da più domini? 55 | * Quante risorse scaricherà per volta un browser da uno specifico dominio? 56 | * Citami 3 modi per diminuire il caricamento della pagina. (percepito o effettivo tempo di caricamento) 57 | * Se cominci a lavorare su un progetto già iniziato dove vengono usati tab invece di spazi, cosa fai? 58 | * Suggerisci di usare per il progetto qualcosa tipo EditorConfig (http://editorconfig.org) 59 | * Ti adatti alle convezioni (rimani coerente) 60 | * `issue :retab! command` 61 | * Scrivi una semplice pagina con slideshow 62 | * Punti bonus se non utilizza JS. 63 | * Che strumenti usi per testare le prestazioni del tuo codice? 64 | * Profiler, JSPerf, Dromaeo 65 | * Se potessi approfondire una tecnologia quest'anno, quale sarebbe? 66 | * Spiega l'importanza degli standard e degli enti di normazione. 67 | * Cosa è il FOUC? Come eviti il FOUC? 68 | 69 | ####[[⬆]](#toc) Domande Specifiche su HTML: 70 | 71 | * Cosa fa il `doctype`? 72 | * Qual è la differenza tra standard mode e quirks mode? 73 | * Quali sono le limitazioni quando servi pagine XHTML? 74 | * Ci sono dei problemi a servire le pagine come `application/xhtml+xml`? 75 | * Come servi una pagina con il contenuto in più lingue? 76 | * A cosa devi far attenzione quando progetti o sviluppi siti multilingua? 77 | * Per cosa sono utili gli attributi `data-`? 78 | * Considera HTML5 come una piattaforma web aperta. Quali sono i mattoni di HTML5? 79 | * Descrivi le differenze tra cookie, sessionStorage e localStorage. 80 | 81 | ####[[⬆]](#toc) Domande Specifiche su CSS: 82 | 83 | * Descrivi cosa fa un file CSS "reset" e in cosa è utile. 84 | * Descrivi i Float e come funzionano. 85 | * Quali sono le varie tecniche di clearing e quale è appropriata per quale contesto? 86 | * Spiega gli sprite CSS, e come li implementeresti in una pagina o in un sito. 87 | * Quali sono le tue tecniche di sostituzione immagini [*image replacement*] preferite e quale usi quando? 88 | * Hack delle proprietà CSS, file .css inclusi con condizioni, o... altro? 89 | * Come servi le tue pagine per i browser con funzionalità limitate? 90 | * Che tecniche/processi usi? 91 | * Quali sono i vari modi per nascondere visualmente il contenuto (e renderlo disponibile solo per gli screen reader)? 92 | * Hai mai usato un sistema di griglie [*grid system*], e se sì, qual è il tuo preferito? 93 | * Hai mai usato o implementato media queries o CSS/layout specifici per mobile? 94 | * Familiarità con lo styling SVG? 95 | * Come ottimizzi le tue pagine web per la stampa? 96 | * Quali sono alcuni dei "trucchi" per scrivere CSS efficiente? 97 | * Quali sono i vantaggi/svantaggi nell'usare i preprocessori CSS? (SASS, Compass, Stylus, LESS) 98 | * Se sì, descrivi cosa ti piace e cosa non ti piace dei preprocessori CSS che hai usato. 99 | * Come implementeresti una grafica web che usa font non standard? 100 | * Webfonts (servizi di font tipo: Google Webfonts, Typekit, ecc...) 101 | * Spiega come un browser determina quali elementi corrispondono a un selettore CSS. 102 | * Spiega la tua comprensione del box model e come useresti i CSS per dire al browser di rappresentare il tuo layout nei vari box model. 103 | 104 | ####[[⬆]](#toc) Domande Specifiche su JS: 105 | 106 | * Spiega l'event delegation. 107 | * Spiega come funziona `this` in JavaScript. 108 | * Spiega come funziona l'ereditarietà prototipale [*prototypal inheritance*]. 109 | * Come fai a testare il tuo codice JavaScript? 110 | * AMD contro CommonJS? 111 | * Cosa è una hashtable? 112 | * Spiega perché il seguente codice non funziona come UN IIFE: `function foo(){ }();`. 113 | * Cosa c'è bisogno di cambiare per renderlo correttamente un IIFE? 114 | * Quale è la differenza tra una variabile che è: `null`, `undefined` or `undeclared`? 115 | * Come faresti per controllare questi stati? 116 | * Cosa è una chiusura [*closure*], e come/perché ne useresti una? 117 | * Qual è l'uso tipico di una funzione anonima? 118 | * Spiega il "JavaScript module pattern" e quando lo useresti. 119 | * Punti bonus se menziona namespacing pulito. 120 | * E se i tuoi moduli sono senza namespace? 121 | * Come organizzi il tuo codice? (module pattern, ereditarietà classica?) 122 | * Qual è la differenza tra oggetti host e oggetti nativi? 123 | * Differenza tra: `function Person(){}`, `var person = Person()`, e `var person = new Person()`? 124 | * Qual è la differenza tra `.call` e `.apply`? 125 | * Spiega `Function.prototype.bind`? 126 | * Quando ottimizzi il tuo codice? 127 | * Puoi spiegare come funziona l'ereditarietà in JavaScript? 128 | * Quando useresti `document.write()`? 129 | * La maggior parte delle pubblicità usa `document.write()` sebbene il suo utilizzo venga malvisto 130 | * Qual è la differenza tra il rilevamento di funzionalità [*feature detection*], la deduzione di funzionalità [*feature inference*], e l'uso della stringa UA 131 | * Spiega AJAX nel modo più dettagliato possibile 132 | * Spiega come funziona JSONP (e come non è veramente AJAX) 133 | * Hai mai usato il templating JavaScript? 134 | * Se se sì, quali librerie hai utilizzato? (Mustache.js, Handlebars ecc...) 135 | * Spiega "hoisting". 136 | * Descrivi l'event bubbling. 137 | * Qual è la differenza tra un "attribute" e una "property"? 138 | * Perché extending built negli oggetti JavaScript non è una buona idea? 139 | * Perché extending built è una buona idea? 140 | * Differenza tra l'evento document load e l'evento document ready? 141 | * Qual è la differenza tra `==` e `===`? 142 | * Spiega come prenderesti il parametro query string dall'URL della finestra del browser. 143 | * Spiega la policy "stessa origine" [*same-origin*] per quanto riguarda JavaScript. 144 | * Descrivi i pattern di ereditarietà in JavaScript. 145 | * Cosa ottieni da: 146 | ```javascript 147 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 148 | ``` 149 | * Descrivi la tecnica della memoizzazione (evitando la ripetizione del calcolo) in JavaScript. 150 | * Perché è chiamata espressione Ternaria, cosa indica la parola "Ternaria"? 151 | * Cosa è l'arietà di una funzione? 152 | * Cosa è `"use strict";`? Quali sono i vantaggi e gli svantaggi nell'usarlo? 153 | 154 | ####[[⬆]](#toc) Domande Specifiche su jQuery: 155 | 156 | * Spiega la "concatenazione" [*chaining*]. 157 | * Spiega "deferreds". 158 | * Quali sono alcune ottimizzazioni specifiche per jQuery che puoi implementare? 159 | * Cosa fa `.end()`? 160 | * Come, e perché, assegneresti un namespace al gestore di un evento? 161 | * Citami 4 differenti valori che puoi passare al metodo jQuery. 162 | * Selettore [*selector*] (testo), HTML (testo), Callback (funzione), HTMLElement, oggetti, array, element array, oggetto jQuery, ecc... 163 | * Cosa è la coda di effetti [*fx queue*]? 164 | * Qual è la differenza tra `.get()`, `[]`, e `.eq()`? 165 | * Qual è la differenza tra `.bind()`, `.live()`, e `.delegate()`? 166 | * Qual è la differenza tra `$` e `$.fn`? O anche solo cosa è `$.fn`. 167 | * Ottimizza questo selettore: 168 | ```javascript 169 | $(".foo div#bar:eq(0)") 170 | ``` 171 | 172 | ####[[⬆]](#toc) Domande con Codice: 173 | 174 | 175 | ```javascript 176 | modulo(12, 5) // 2 177 | ``` 178 | *Domanda: Implementa la funzione modulo che soddisfi quanto sopra* 179 | 180 | 181 | ```javascript 182 | "i'm a lasagna hog".split("").reverse().join(""); 183 | ``` 184 | *Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra?* 185 | 186 | **Risposta: "goh angasal a m'i"** 187 | 188 | ```javascript 189 | ( window.foo || ( window.foo = "bar" ) ); 190 | ``` 191 | *Domanda: Qual è il valore di `window.foo?`* 192 | 193 | **Risposta: "bar"** *(solo se `window.foo` era falso altrimenti manterrà il suo valore)* 194 | 195 | ```javascript 196 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 197 | ``` 198 | *Domanda: Qual è il risultato dei due alert qui sopra?* 199 | 200 | **Risposta: "Hello World" & ReferenceError: bar is not defined** 201 | 202 | ```javascript 203 | var foo = []; 204 | foo.push(1); 205 | foo.push(2); 206 | ``` 207 | *Domanda: Qual è il valore di `foo.length`?* 208 | 209 | **Risposta: `2`** 210 | 211 | ####[[⬆]](#toc) Domande per Divertimento: 212 | 213 | * Qual è la cosa più bella che hai mai sviluppato, di cosa sei più orgoglioso? 214 | * Quali sono le tue parti preferite degli strumenti di sviluppo che usi? 215 | * Hai qualche progetto personale? Di che tipo? 216 | * Qual è la tua feature preferita di Internet Explorer? 217 | 218 | ####[[⬆]](#toc) Altre Ottime Risorse: 219 | 220 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 221 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 222 | * http://css-tricks.com/interview-questions-css/ 223 | -------------------------------------------------------------------------------- /Japanese/README.md: -------------------------------------------------------------------------------- 1 | #フロントエンドデベロッパー面接時の質問事項 2 | 3 | @バージョン 2.0.0 4 | 5 | 本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。 6 | 7 | [Rebecca Murphey](http://rmurphey.com/)の[Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/)もとても参考になるので面接前によく読むことをおすすめします。 8 | 9 | **注意:** これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。 10 | 11 | #### オリジナルのコントリビューター 12 | 13 | 質問の多くは[Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish))と下記のコントリビューターによって作成された[oksoclap](http://oksoclap.com/)スレッドをもとに作成されています。 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com) 27 | 28 | ### 一般的な質問事項 29 | 30 | * 昨日・今週に何を学びましたか？ 31 | * 何があなたをコーディングに惹きつけていますか？ 32 | * 好きな開発環境について教えてください。（OS、エディタ、ブラウザ、ツール等） 33 | * webページを作るときのあなたのワークフローを教えてください。 34 | * プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明してください。 35 | * フィーチャーディテクションの説明もできるとボーナスポイント。 36 | * 「セマンティックHTML」の意味を説明してください。 37 | * ウェブサイトのアセット・リソースを最適化をどのように行いますか？ 38 | * 下記のようないくつかのソリューションが期待されます。 39 | * ファイル結合 40 | * ファイルの縮小 41 | * CDNホスティング 42 | * キャッシュ利用 43 | * など 44 | * 複数のドメインからアセットを提供したほうがよい理由は何ですか？ 45 | * 一度にブラウザが与えられたドメインからダウンロードできるリソースの数はいくつですか？ 46 | * ページロードを減らす３つの方法の名称を挙げてください。 47 | * プロジェクトに加入したときに、もし彼らがタブを使い、あなたがスペースを使っていたとしたらどうしますか？ 48 | * EditorConfig (http://editorconfig.org) といったプラグインを利用するように提案する 49 | * 慣習に従う (一貫性を保つ) 50 | * `issue :retab! command` 51 | * シンプルなスライドショーのページを書いてください。 52 | * JSを使わなかったらボーナスポイント。 53 | * コードのパフォーマンスをテストするのにどんなツールを使いますか？ 54 | * プロファイラー、JSPerf、Dromaeo 55 | * もし今年１つの技術をマスターできるとしたら、何をマスターしますか？ 56 | * 標準化と標準化団体の重要性を説明してください。 57 | * FOUCとは何ですか？ どのようにFOUCを防ぐことができますか？ 58 | 59 | ### HTMLに関する質問事項 60 | 61 | * `doctype`は何をしているか説明してください。 62 | * スタンダードモードとクアークスモードの違いは何ですか？ 63 | * XHTMLページを提供するときの制限は何ですか？ 64 | * `application/xhtml+xml`としてページを提供することに何か問題はありますか？ 65 | * 多言語でコンテンツをどのように提供しますか？ 66 | * 多言語化サイトのデザイン・開発時にどのようなことに注意すべきですか？ 67 | * `data-`属性は何にとって良いですか？ 68 | * HTML5をオープンなWEBプラットフォームとしてみなしましょう。HTML5の基本的な構成要素は何ですか？ 69 | * クッキー、セッションストレージ、ローカルストレージの違いを述べてください。 70 | 71 | ### JSに関する質問事項 72 | 73 | * イベントデリゲーションを説明してください。 74 | * JavaScriptにおいて`this`がどのように機能するか説明してください。 75 | * プロトタイプ継承がどのように機能するか説明してください。 76 | * JavaScriptをテストするのにどのように対処しますか？ 77 | * AMDとCommonJS、何が違いますか？ 78 | * ハッシュテーブルとは何ですか？ 79 | * `undefined`と`undeclared`変数は何ですか？ 80 | * クロージャとは何ですか？　どのように、そしてなぜそれを使うのですか？ 81 | * クロージャを作成するときに使うあなたの好きなパターンは何ですか？ （即時実行関数表現にのみ適用） 82 | * 匿名関数が有効な典型的なユースケースは何ですか？ 83 | * 「JavaScriptモジュールパターン」とそれを使う場面を説明してください。 84 | * 名前空間について述べたらボーナスポイント。 85 | * もしモジュールが名前空間無しだとしたらどうなりますか？ 86 | * コードをどのように整理しますか？（モジュールパターン、古典的な継承を使う？） 87 | * ホストオブジェクトとネイティブオブジェクトの違いは何ですか？ 88 | * 下記コードの違いは何？ 89 | ```javascript 90 | function Person(){} var person = Person() var person = new Person() 91 | ``` 92 | * `.call`と`.apply`の違いは何ですか？ 93 | * `Function.prototype.bind`を説明してください。 94 | * いつコードを最適化できますか？ 95 | * JavaScriptにおいてどのように継承が機能しているか説明してください。 96 | * `document.write()`はいつ使いますか？ 97 | * 生成される広告の多くはいまだに嫌われている方法である`document.write()`を活用しています。 98 | * フィーチャーディテクション、 フィーチャーインファレンス、UA文字列の使用の違いは何ですか？ 99 | * AJAXをできるだけ詳しく述べてください。 100 | * JSONPがどのように機能するか述べてください。(またそれがどのようにAJAXとは異なっているのか) 101 | * JavaScriptテンプレートは使ったことはありますか？ 102 | * 使ったことがあるのなら、何のライブラリを使いましたか？（Mustache.js, Handlebarsなど） 103 | * 「巻き上げ」を説明してください。 104 | * イベントバブリングを説明してください。 105 | * 「属性」と「プロパティ」の違いは何ですか？ 106 | * どうしてビルトインJavaScriptを拡張することは良くないのですか？ 107 | * どうしてビルトインJavaScriptを拡張することは良いのですか？ 108 | * ドキュメントロードイベントとドキュメントレディイベントの違いを述べてください。 109 | * `==`と`===`の違いは何ですか？ 110 | * ブラウザのウィンドウURLからクエリ文字列をどのように取得するかを説明してください。 111 | * JSに関するセイムオリジンポリシーを説明してください。 112 | * JavaScriptにおける継承パターンを述べてください。 113 | * 下記を動くように書き変えてください。 114 | ```javascript 115 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 116 | ``` 117 | * JavaScriptにおけるメモ化（計算の繰り返しの回避）の方針について述べてください。 118 | * 三項演算子と呼ばれる理由は何ですか？ 「三項」という言葉が示していることは何ですか？ 119 | * 関数のarityとは何ですか? 120 | * `"use strict";`とは何ですか? これを使うことのメリット、デメリットは何ですか？ 121 | 122 | ### JSコードの例 123 | 124 | ```javascript 125 | ~~3.14 126 | ``` 127 | 質問: 上ステートメントで得られる値は何ですか？ 128 | **回答: 3** 129 | 130 | ```javascript 131 | "i'm a lasagna hog".split("").reverse().join(""); 132 | ``` 133 | 質問: 上ステートメントで得られる値は何ですか？ 134 | **回答: "goh angasal a m'i"** 135 | 136 | ```javascript 137 | ( window.foo || ( window.foo = "bar" ) ); 138 | ``` 139 | 質問: window.fooの値は何ですか？ 140 | **回答: "bar"** 141 | window.fooがfalseと判断される場合のみ。trueの場合はその値を保持し続ける。 142 | 143 | ```javascript 144 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 145 | ``` 146 | 質問: 上2つのアラートの結果はどうなりますか？ 147 | **回答: "Hello World" & ReferenceError: bar is not defined** 148 | 149 | ```javascript 150 | var foo = []; 151 | foo.push(1); 152 | foo.push(2); 153 | ``` 154 | 質問: foo.lengthの値はどうなりますか? 155 | **回答: `2`** 156 | 157 | ```javascript 158 | var foo = {}; 159 | foo.bar = 'hello'; 160 | ``` 161 | 質問: foo.lengthの値はどうなりますか? 162 | **回答: `undefined`** 163 | 164 | ### jQueryに関する質問事項 165 | 166 | * 「chaining（チェイン）」を説明してください。 167 | * 「deferreds」を説明してください。 168 | * jQueryに関する最適化としてどんなことができますか？ 169 | * `.end()`は何ですか? 170 | * イベントハンドラに名前空間を与えるにはどのようにすればいいですか。またなぜ名前空間を与えますか。 171 | * jQueryメソッドに渡すことができる4つの異なる値を挙げてください。 172 | * セレクター (string)、HTML (string)、コールバック (function)、HTMLエレメント、オブジェクト、配列、エレメントの配列、jQueryオブジェクト等 173 | * エフェクト(あるいはfx)キューとは何ですか? 174 | * `.get()`、 `[]`、`.eq()`の違いは何ですか？ 175 | * `.bind()`、`.live()`、`.delegate()`の違いは何ですか？ 176 | * `$`、`$.fn`の違いは何ですか？ 単に`$.fn`と書いた場合はどうですか？ 177 | * 下記のセレクターを最適化してください: 178 | ```javascript 179 | $(".foo div#bar:eq(0)") 180 | ``` 181 | * 'delegate()'と'live()'の違いは何ですか？ 182 | 183 | 184 | ### CSSに関する質問事項 185 | 186 | * 「リセット」CSSファイルとは何ですか？　またその有用性は何ですか？ 187 | * フロートとそれらがどのように機能するかを説明してください。 188 | * フロートクリアの様々なテクニックは何ですか？　その内のどれが適切でそれはどんな状況ですか？ 189 | * CSSスプライトを説明してください。またページやサイトでそれをどのように実装しますか？ 190 | * 1番好きな画像置き換えテクニックは何ですか？　またいつどのテクニックを使いますか？ 191 | * .cssファイルに含み得るCSSハックは何ですか？　また.cssファイル以外ではどうしますか？ 192 | * 機能が制限されたブラウザに対してどのようにページを提供しますか？ 193 | * どんなテクニック、プロセスを使いますか？ 194 | * コンテンツを視覚的に見えなくするのにどんな方法がありますか？（またスクリーンリーダーユーザーのみに見えるようにする方法は何ですか？） 195 | * グリッドシステムを使ったことはありますか？　使い続けたいと思いましたか？ 196 | * メディアクエリ、あるいはモバイルに特化したレイアウト、CSSを組んだことはありますか？ 197 | * SVGのスタイリングの知識は何かしら持っていますか？ 198 | * 印刷用ページの最適化はどのように行いますか？ 199 | * CSS記述における「gotchas（見落としがちなミス）」は何ですか？ 200 | * CSSプリプロセッサのメリット、デメリットは何ですか？（SASS、Compass、Stylus、LESS） 201 | * 使ったことのあるCSSプリプロセッサについてそれの好きなところ、嫌いなところを説明してください。 202 | * 非標準のフォントを使用したwebデザインカンプをどのように実装しますか？ 203 | * ウェブフォント（Googleウェブフォント、Typekit 等) 204 | * ブラウザがどのようにあるエレメントがどのCSSセレクタにマッチするかを決定しているかを説明してください。 205 | 206 | ### その他の質問事項 207 | 208 | * あなたがコーディングした中で一番素晴らしいものは何ですか？　何が一番誇れますか？ 209 | * あなたが使っている開発者ツールの一番好きなところは何ですか？ 210 | * 何か暖めてるアイディアは持っていますか？　それはどんなものですか？ 211 | * インタネットエクスプローラーの最も好きな機能は何ですか？ 212 | -------------------------------------------------------------------------------- /Korean/README_KR.md: -------------------------------------------------------------------------------- 1 | #면접 문제 은행 2 | 3 | @version 1.0 4 | 5 | ##Contributors 6 | 7 | @bentruyman (http://bentruyman.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/) and @darcy_clarke (http://darcyclarke.me) 8 | 9 | ##한국어 번역(한국 상황에 맞춰서 약간 수정 하였습니다.) 10 | @ohgyun(http://ohgyun.com), @nerdog, @javarouka, @Songhun(http://songhun.blogspot.com) 11 | 12 | ## 일반적인 질문: 13 | 14 | * Twitter,Facebook 혹은 Me2day등의 SNS를 사용하시나요? 15 | * 사용한다면, 누구를 팔로우 하고 있나요? 16 | * GitHub을 사용하시나요? 17 | * 사용한다면, 어떤 프로젝트를 Watch 혹은 Fork하시나요? 18 | * 자주 보는 Blog가 있습니까? 19 | * 버전 관리 시스템은 어떤 것들을 사용해보셨습니까? 20 | * 선호하는 개발 환경은 무엇입니까? (운영체제, 에디터, 브라우저, 도구 등등) 21 | * 당신이 웹 페이지를 만들 때의 과정을 설명 해주실 수 있을까요? 22 | * 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까? 23 | * "누구도 성공하지 못합니다" 라고 말하면 보너스 포인트를 주세요. 24 | * 각 특색을 설명을 한다면, 더 높은 보너스 포인트를 주세요. 25 | * "시멘틱 HTML(Semantic HTML)"이 무엇을 뜻하는지 설명해주세요. 26 | * "최소화(minification)"가 무엇을 하는 것입니까? 27 | * 여러 도메인을 이용하여 서버 사이트 데이터를 제공하는 것이 더 나은 이유는 무엇인가요? 28 | * 브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요? 29 | * 만약에 디자인을 표현하기 위해 8개의 다른 Stylesheet를 가지고 있다면, 사이트에서는 어떻게 통합하실 건가요? 30 | * 파일의 연결법을 찾아내세요. 31 | * Build system을 이용한 결합없이, `@import`를 사용하면 점수를 깎으세요. 32 | * 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Sapce를 사용했습니다. 어떻게 하실건가요? 33 | * `:retab!` 명령어를 아는지 확인 34 | * 간단한 Slideshow 페이지를 만들어보세요. 35 | * Javascript를 사용하지 않고 만들었다면, 보너스 점수가 있습니다. 36 | * 당신의 코드의 성능을 테스트하기 위해서 사용하는 도구가 무엇입니까? 37 | * 올해 당신이 익히고 싶은 기술이 있다면, 그것은 무엇입니까? 38 | * 페이지 로딩 시간을 줄이는 3가지 방법은? 39 | * 표준의 중요함을 설명하세요. 40 | 41 | ## HTML에 관련된 질문들: 42 | 43 | * `doctype`이 무엇을 하는 것이고, 몇 번 지정할 수 있나요? 44 | * 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요? 45 | * XHTML을 이용한 페이지의 한계점은 무엇이 있나요? 46 | * `application/xhtml+xml`으로 지정한 페이지에 어떠한 문제가 있나요? 47 | * 다국어가 포함된 페이지는 어떤 방식으로 제공하나요? 48 | * HTML5에서 XHTML문법을 사용할 수 있나요? HTML5에서 XML을 어떻게 사용하나요? 49 | * `data-`속성은 무엇을 하는 것인가요? 50 | * HTML4에서 콘텐츠 모델(content models)은 무엇이며, HTML5의 그것과 다른 점은 무엇인가요? 51 | * HTML5를 오픈웹플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요? 52 | * 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요. 53 | 54 | ## Javascript에 관련된 질문들: 55 | 56 | * 사용해 본 Javascript 라이브러리들을 말씀해주세요. 57 | * Java와 Javascript의 다른 점은 무엇인가요? 58 | * `undefined`와 `undeclared` 변수는 무엇인가요? 59 | * 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 60 | * 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다) 61 | * 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요? 62 | * "Javascript 모듈 패턴(Javascript module pattern)"이 무엇인지 설명을 해주시고, 언제 사용하는지도 말씀해주시기 바랍니다. 63 | * "네임스페이스(namespacing)"에 대해서 언급을 하면, 보너스 포인트가 있습니다. 64 | * 당신의 모듈이 네임스페이스가 없는 상황이라면? 65 | * 당신의 코드를 어떻게 구성하는지?(모듈 패턴, Class기반 상속?) 66 | * 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요? 67 | * 다음 코드의 차이점은 무엇인가요? 68 | ```javascript 69 | function Person(){} var person = Person() var person = new Person() 70 | ``` 71 | * `.call`과 `.apply`의 차이점은 무엇인가요? 72 | * `Function.prototype.bind`을 설명 하시오 73 | * 코드 최적화를 하는 시점은 언제인가요? 74 | * Javascript에서 어떻게 상속을 하는지 설명할 수 있나요? 75 | * "누구도 할 수 없어요" 같은 재밌는 대답 시에 보너스 포인트가 있습니다. 76 | * 안되는 이유에 대해서 설명을 시도한다면, 더 많은 점수를 주세요. 77 | * `document.write()`를 언제 사용하시나요? 78 | * 정답 : 1999년 - 초보개발자를 걸러내기 위한 시절 79 | * UA문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명 하시오. 80 | * AJAX에 관해 가능한 자세히 설명하세요. 81 | * JSONP가 어떻게 동작 되는지 설명하세요.(그리고,실제 AJAX와 어떻게 다른지 설명하세요.) 82 | * 기존에 Javascript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요. 83 | * "호이스팅(Hoisting)"에 대해서 설명 하시오. 84 | * FOUC가 무엇이며 FOUC를 어떻게 방지하나요? 85 | * 이벤트 버블링(Event Bubbling)에 대해서 설명하세요. 86 | * "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요? 87 | * Javascript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요? 88 | * Document Load 이벤트와 Ready 이벤트의 차이가 무엇인가요? 89 | * `==`와 `===`의 차이점은 무엇인가요? 90 | * 브라우저의 URL에서 파라메터를 얻을 수 있는 방법에 대해서 설명하세요. 91 | * Javascript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요. 92 | * 이벤트 딜리게이션(Event Delegation)에 대해서 설명하세요. 93 | * Javascript의 상속패턴(inheritance patterns)에 대해서 설명하세요. 94 | * 다음 코드를 동작하게 만드세요. 95 | ```javascript 96 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 97 | ``` 98 | * Javascript에서 메모이제이션(memoization, 중복 계산 방지)에 대한 전략을 설명해주세요. 99 | * 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요? 100 | * arity는 어떠한 함수인가요? 101 | 102 | ## Javascript 코드 예제: 103 | 104 | ```javascript 105 | >~~3.14 106 | ``` 107 | 문제: 위 상황의 결과 값은? 108 | 109 | **답: 3** 110 | 111 | ```javascript 112 | "i'm a lasagna hog".split("").reverse().join(""); 113 | ``` 114 | 문제: 위 상황의 결과 값은? 115 | 116 | **답: "goh angasal a m'i"** 117 | 118 | ```javascript 119 | ( window.foo || ( window.foo = "bar" ) ); 120 | ``` 121 | 문제: window.foo의 값은 무엇인가요? 122 | 123 | **답: "bar"** 124 | 125 | 처음에 window.foo는 false, undefined 혹은 0등의 값을 가지고 있다. 126 | 127 | ```javascript 128 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 129 | ``` 130 | 문제: 어떠한 두 가지의 알럿이 나올까요? 131 | 132 | **답: "Hello World" & ReferenceError: bar is not defined** 133 | 134 | ## jQuery에 연관된 질문들: 135 | 136 | * "체이닝(Chaining)"에 대해서 설명 하세요. 137 | * `.end()`는 무엇을 하는 것입니까? 138 | * 이벤트 핸들러 선언 시, 언제 그리고 왜 namespace를 부여하는지를 설명해주세요. 139 | * 이펙트 큐(queue)라는 것은 무엇인가요? 140 | * `.get()`,`[]` 그리고 `.eq()`의 차이점이 무엇인가요? 141 | * `.bind()`,`.live()`그리고 `.delegate()`의 차이점이 무엇인가요? 142 | * `$`과 `$.fn` 차이점이 무엇인지 설명 해주시오. 혹은, `$.fn`가 무엇인지 설명해주세요. 143 | * 다음 Selector를 최적화 해주세요.: 144 | 145 | ```javascript 146 | $(".foo div#bar:eq(0)") 147 | ``` 148 | 149 | ## CSS 관련 질문들: 150 | 151 | * "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요. 152 | * Floats가 어떻게 동작하는지 설명해주세요. 153 | * 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떠한 경우에 어떻게 사용하는 것이 적절한지 설명하세요. 154 | * CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명하시오. 155 | * IE box model과 W3C box model의 차이점을 설명하시오. 156 | * Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명 해주세요. 157 | * CSS 요소핵(CSS property hacks)을 조건부적으로 .css파일안에 넣으시나요 혹은 다른 방식이 있나요? 158 | * 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요? 159 | * 어떠한 기술과 절차를 거치는지 설명하시오. 160 | * 컨텐츠를 안보이게 하는 기술들의 차이점을 설명하시오.(그리고 스크린 리더(Screen readers)에서 접근이 가능한 방법은?) 161 | * 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요? 162 | * 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요? 163 | * SVG를 스타일링 하기 위한 편한 방법이 있나요? 164 | * 인쇄를 하기 위해 웹페이지를 어떻게 최적화 하나요? 165 | * 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요? 166 | * CSS 전처리(CSS preprocessors)를 사용해보셨나요? 167 | * 그렇다면, 사용 경험에 기반해 좋았던 점과 나빴던 점을 설명해주세요. 168 | * 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요?(웹폰트를 제외하고) 169 | * CSS Selector가 어떠한 원리로 동작하는지 설명하시오. 170 | 171 | ## 그 외 흥미로운 질문들: 172 | 173 | * 당신이 작성한 코드 중 어떤 것을 가장 멋지고, 자랑스럽게 여기나요? 174 | * HTML5 gang sign에 대해서 아시나요? 175 | * 배를 타본 적이 있으세요? 176 | * Firebug와 Webkit Inspector에서 좋아하는 부분을 말씀해주세요. 177 | * 당신 스스로 하는 프로젝트가 있나요? 어떤 종류인가요? 178 | * "유니콘화(cornify)"의 의미를 설명해주세요. 179 | * 한장의 종이 위에, A B C D E를 차례대로 내려 쓰시오. 그다음, 코드로 작성하지 말고, 역순으로 재배치 해보세요. 180 | * 종이를 위아래를 뒤집어낼 때 까지 기다리세요. 181 | * 이것은 인터뷰의 끝에 긴장감을 풀어주고 웃음을 줄 수 있는 좋은 방법이 입니다. 182 | * 해적입니까? 닌자입니까? 183 | * 만약에 둘 다 이며, 좋은 이유를 댄다면 보너스 점수를 주세요.(좀비 몽키 해적 닌자인 경우엔 +2) 184 | * 만약에 웹개발을 안했다면, 무엇을 했었을까요? 185 | * Carmen Sandiego는 세상의 어디에 있을가요?(힌트 : 그들의 답은 항상 틀릴겁니다.) 186 | * Internet Explorer의 당신이 좋아하는 기능은 무엇입니까? 187 | * 다음 문장을 완성하세요 : Brendan Eich 와 Doug Crockford 는 Javascript의 __________ 이다. 188 | * jQuery: 훌륭한 라이브러리인가요? 최고로 좋은 라이브러리인가요? 토론하세요. 189 | -------------------------------------------------------------------------------- /Korean/Reference_KR.md: -------------------------------------------------------------------------------- 1 | ##해설집 2 | ``` 3 | 이 문서는 정답을 알려주는 문서가 아닙니다. 4 | 면접에 대한 답은 스스로가 찾아야 좋으며, 5 | 그 판단을 돕기 위한 해설서 임을 밝히는 바입니다. 6 | ``` 7 | 8 | ##기여자 9 | @Songhun(http://songhun.blogspot.com) 10 | @YiHanghee(http://blog.javarouka.me) 11 | 12 | ##일반적인 질문에 대한 참고 13 | * SNS에 대해서 물어보는 이유가 무엇일까요? 14 | 15 | ##HTML에 대한 참고 16 | * `doctype`에 대한 설명은 [Wikipedia](http://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%ED%98%95%EC%8B%9D_%EC%84%A0%EC%96%B8) 에서 찾아볼 수 있습니다. 17 | * 문서 타입에 대한 자세한 설명을 담은 블로그 ["Activating Browser Modes with Doctype"](http://hsivonen.iki.fi/doctype/) 18 | * 표준 모드는 W3C의 표준에 맞춘 구현 렌더링으로 동작하며(미세하게 다릅니다), 쿽스 모드는 다양한 브라우저 및 표준 정립 이전의 구버전 기준으로 작성된 HTML의 fallback 과 비슷합니다. 19 | * [Quirks Mode 렌더링과 DTD.](http://naradesign.net/wp/2007/03/27/118/) 20 | * [Mozilla's Quirks Mode](https://developer.mozilla.org/ko/Mozilla's_Quirks_Mode) 21 | * [XHTML 과 HTML의 차이](http://blog.wystan.net/2007/05/24/xhtml-vs-html) 블로그 포스팅에 4부작(?)으로 좋은 설명이 있네요. 22 | * application/xhtml+xml 컨텐트 타입은 브라우저에 따라 해석할 수 없기도 합니다.(IE...) 23 | * 엘리먼트의(특히 루트인 html) lang attribute 와 관련이 있을까요...? 24 | * [HTML 5 + XML = XHTML 5](http://html5doctor.com/html-5-xml-xhtml-5/), 25 | * Programer custom attribute. ex) 자동차를 엘리먼트로 나타내야 할 경우를 생각해보면 기본 html 속성으로는 부족하겠죠. 26 | * HTML4의 콘텐츠 모델이 div와 span에 id와 클래스를 입힌 inline 및 block display의 사용자 정의형이라면, HTML5는 그것을 표준화한 콘텐츠 모델. 27 | * 자세한 것은 [내용 모델(한글 by ClearBoth 팀)](http://html5.clearboth.org/content-models.html) 이쪽으로. 28 | * open web platform 이 뭘까요...? 29 | * 서버와 공유할 필요가 있는지의 여부, 저장 용량, 저장 생명주기에 따라 셋을 구분할 수 있습니다. 30 | 31 | ##Javascript에 대한 참고 32 | * 유명한 Javascript Library는 다음과 같습니다. 33 | * jQuery 34 | * Prototype.js 35 | * YUI 36 | * Ext JS 37 | * Dojo 38 | * Java와 Javascript는 Car와 Carpet의 차이와 비슷하다고 할 수 있습니다. 39 | * [Undeclared, Undefined, Null in JavaScript](http://constc.blogspot.com/2008/07/undeclared-undefined-null-in-javascript.html) 40 | * [Naver Developer에서 제공 되는 Closure설명](http://dev.naver.com/tech/ajaxui/ajaxui_2.php#a_2_2) 41 | * [Javascript anonymous functions](http://helephant.com/2008/08/23/javascript-anonymous-functions/) 42 | * [Pro Javascript Techniques(3): Anonymous Functions(한글)](http://happyzoo.tistory.com/124) 43 | 44 | ##jQuery에 대한 참고 45 | * jQeury들의 거의 모든 method들은 jQuery object를 돌려주도록 되어있습니다. 46 | * 이 특성으로 인해 같은 scope에서 일어나는 거의 모든 method들을 연결하여 정의를 할 수 가 있습니다. 47 | * Paul Irish 가 작성한 [블로그](http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/) 를 참고하시면 좋을 듯 합니다. 48 | * [.end()](http://api.jquery.com/end/) 49 | * [Namesapced Events](http://docs.jquery.com/Namespaced_Events) 50 | * [Effect queue()](http://api.jquery.com/queue/) 51 | * [Understanding jQuery Effects Queue](http://blog.bigbinary.com/2010/02/02/understanding-jquery-effects-queue.html) 52 | 53 | 54 | ##CSS 참고 55 | 56 | ##흥미로운 질문들에 대한 참고 57 | * http://html5homi.es/ 58 | -------------------------------------------------------------------------------- /Latvian/README.md: -------------------------------------------------------------------------------- 1 | #Front-end web programmētāja darba intervijas jautājumi 2 | 3 | Šis repozitorijs satur vairākus ar front-end web programmētāja darba prasmēm saistītus jautājumus, ko var izmantot, intervējot potenciālos vakances kandidātus. Nav ieteicams izmantot katru šeit minēto jautājumu, jo tas patērētu ļoti daudz laika. Izvēlieties tikai dažus jautājumus no šī saraksta, kas Jums palīdzēs ātrāk atlasīt kandidātus ar nepieciešamajām prasmēm. 4 | 5 | [Rebecca Murphey](http://rmurphey.com/) [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) raksts ir ļoti piemērota lasāmviela, kuru izlasīt pirms dodaties uz darba interviju. 6 | 7 | **Piezīme:** Paturiet prātā, ka daudzi no šiem jautājumiem ir atvērta tipa, kas varētu izvērsties plašākā diskusijā un ļautu iepazīt cilvēka prasmes daudz labāk nekā tieša atbilde. 8 | 9 | ## Saturs 10 | 11 | 1. [Sākotnējie Kontributori](#contributors) 12 | 1. [Vispārēji Jautājumi](#general) 13 | 1. [HTML Jautājumi](#html) 14 | 1. [CSS Jautājumi](#css) 15 | 1. [JS Jautājumi](#js) 16 | 1. [jQuery Jautājumi](#jquery) 17 | 1. [Kodēšanas Jautājumi](#jscode) 18 | 1. [Interesanti Jautājumi](#fun) 19 | 1. [Citas Lieliskas Atsauces](#references) 20 | 21 | ####[[⬆]](#toc) Sākotnējie Kontributori: 22 | 23 | Vairums no jautājumiem tika paņemti no [oksoclap](http://oksoclap.com/) raksta, ko sākotnēji izveidoja [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) un kuru papildināja sekojoši cilvēki: 24 | 25 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 26 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 27 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 28 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 29 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 30 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 31 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 32 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 33 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 34 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 35 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 36 | 37 | ####[[⬆]](#toc) Vispārēji Jautājumi: 38 | 39 | * Ko jaunu Jūs apguvāt vakar/šonedēļ? 40 | * Kas Jūs aizrauj un interesē programmēšanā? 41 | * Kādas UI (lietotāja interfeisa), performances, SEO, apkopes vai tehnoloģijas apsvērumus jūs ņemat vērā, kad veidojat web-aplikāciju vai mājas lapu? 42 | * Pastāstiet par sev vēlemo darba vidi. (Operētājsistēma, pārlūki, rīki utt.) 43 | * Vai variet aprakstīt savu darba procesu, kad veidojiet mājas lapu? 44 | * Vai jūs variet aprakstīt starpību starp "progressive enhancement" un "graceful degradation"? 45 | * Bonus punkti, ja tiek pieminēta funkciju noteikšana (feature detection). 46 | * Izskaidrojiet, ko nozīmē "Semantisks HTML". 47 | * Kā Jūs optimizētu mājas lapas failus/resurus? 48 | * Potenciāli vairāki risinājumu, starp kuriem būtu: 49 | * Failu konkatenācija (savienošana) 50 | * Failu minimizēšana 51 | * CDN hostēšana 52 | * Kešošana 53 | * u.c. 54 | * Kāpēc ir labāk lapas resurus izvietot uz vairākiem domēniem? 55 | * Cik daudz resursus pārlūks spēj vienlaicīgi lejuplādēt no viena domēna? 56 | * Nosauciet 3 veidus, kā samazināt lapas ielādes laiku (šķietamo vai faktisko) 57 | * Kā Jūs rīkotos, ja Jūs pievienotos projektam un viņi izmantotu tabulāciju, bet Jūs atstarpes koda atkāpju veidošanai? 58 | * Ieteiktu projektā izmantot kaut ko līdzīgu EditorConfig (http://editorconfig.org) 59 | * Pieskaņoties kolēģiem 60 | * Veikt retabulāciju ar ':retab!' komandu 61 | * Izveidojiet vienkāršū slaidrāža lapu 62 | * Bonus punkti, ja netiek izmantots JavaScript 63 | * Kādus rīkus Jūs izmantojiet, lai pārbaudītu sava koda veiktspēju (performanci)? 64 | * Profiler, JSPerf, Dromaeo 65 | * Ja šogad Jūs varētu pilnībā apgūt vienu tehnoloģiju, kura tā būtu? 66 | * Kādas ir atšķirības starp Long-Polling, Websockets un SSE? 67 | * Izskaidrojiet standartu un standartizēšanas komisiju nozīmi. 68 | * Kas ir FOUC? Kā izvairīties no FOUC? 69 | 70 | ####[[⬆]](#toc) HTML Jautājumi: 71 | 72 | * Ko dara `doctype`? 73 | * Kāda ir starpība starp standarta režīmu un quirks režīmu? 74 | * Kādi ir XHTML lapu ierobežojumi? 75 | * Vai var rasties problēmas, ja lapa tiek servēta kā `application/xhtml+xml`? 76 | * Kā servēt lapu ar saturu vairākās valodās? 77 | * Par ko ir īpaši jāpiedomā, kad dizainē vai izstrādā vairāku valodu mājas lapas? 78 | * Ar ko ir noderīgi `data-` atribūti? 79 | * Pieņemot, ka HTML5 ir atvērta web-platforma, kas ir HTML5 pamatelementi? 80 | * Aprakstiet atšķirības starp sīkdatnēm (cookies), sessionStorage un localStorage. 81 | 82 | ####[[⬆]](#toc) CSS Jautājumi: 83 | 84 | * Aprakstiet, ko dara "reset" CSS fails un ar ko tas ir noderīgs. 85 | * Aprakstiet Float parametru un to, kā tas strādā. 86 | * Kādas ir dažādas Clear parametra lietošanas tehnikas un kādā kontekstā katra ir vispiemērotākā? 87 | * Izskaidrojiet, kas ir CSS spraiti (sprites) un kā Jūs tos izmantotu lapā? 88 | * Kāda ir Jūsu iecienītākā attēlu aizvietošanas tehnika un kādos brīžos Jūs to izmantojiet? 89 | * CSS parametru hacki, nosacīti iekļauti .css faili vai kas cits? 90 | * Kā Jūs servējat lapas priekš pārlūkiem ar ierobežotu funkcionalitāti? 91 | * Kādas tehnikas/procesu Jūs piekopjat? 92 | * Kādi ir dažādi paņēmieni, kā vizuāli noslēpt saturu (un padarīt to pieejamu tikai priekš ekrāna lasītājiem)? 93 | * Vai esat kādreiz izmantojis režģa (grid) sistēmu? Ja jā, tad kurai dodiet priekšroku? 94 | * Vai esat izmantojis mediju vaicājumus (media queries) vai izkārtojumus(layouts)/CSS domātus speciāli priekš mobilajām iekārtām? 95 | * Vai esat pazīstams ar SVG stilu definēšanu? 96 | * Kā Jūs optimizējiet mājas lapas priekš printēšanas? 97 | * Kādi ir dažādi triki un paņēmieni (kā arī ar ko der uzmanīties), lai veidotu efektīvu CSS? 98 | * Kādi ir plusi/mīnusi izmantojot CSS preprocesorus? (SASS, Compass, Stylus, LESS) 99 | * Aprakstiet plusus un mīnusus tiem CSS preprocesoriem, kurus esiet izmantojis. 100 | * Kā Jūs veidotu mājas lapas dizainu, kas izmanto nestandarta fontus? 101 | * Webonti (tādi fontu servisi kā Google Webfonts, Typekit u.c.) 102 | * Izskaidrojiet kā pārlūks nosaka kuri elementi atbilst CSS selektoriem? 103 | * Izskaidrojiet kā Jūs saprotiet "box model" un kā Jūs ar CSS palīdzību norādītu pārlūkam attēlot izkārtojumu(layout) ar dažādiem "box model" iestatījumiem. 104 | 105 | ####[[⬆]](#toc) JS Jautājumi: 106 | 107 | * Izskaidrojiet notikumu deleģēšanu (event delegation) 108 | * Izskaidrojiet kā `this` strādā JavaScript valodā 109 | * Izskaidrojiet kā strādā prototipiskā mantošana? 110 | * Kā Jūs testējat savu JavaScript kodu? 111 | * AMD vai CommonJS? 112 | * Kas ir asociatīvais masīvs (hashtable)? 113 | * Paskaidrojiet kāpēc šis kods nestrādā kā IIFE: `function foo(){ }();`. 114 | * Kas ir jāpamaina, lai tā pareizi strādātu kā IIFE? 115 | * Kāda ir atšķirība starp mainīgajiem, kas ir definēti kā: `null`, `undefined` or `undeclared`? 116 | * Kā jūs pārbaudītu vai mainīgais atbilst kādam no šiem stāvokļiem? 117 | * Kas ir slēgums(closure) un kā/kāpēc Jūs tādu izmantotu? 118 | * Kādos gadījumos parasti tiek izmantotas anonīmās funkcijas? 119 | * Izskaidrojiet "JavaScript module pattern" un kādos gadījumos Jūs to izmantotu. 120 | * Bonus punkti, ja tiek pieminēta tīra nosaukumvietas uzturēšana (clean namespacing) 121 | * Gadījumā ja Jūsu moduļi neizmanto nosaukumvietu? 122 | * Kā Jūs organizējat savu kodu? (Moduļu veidā, klasiskā mantošana?) 123 | * Kāda ir atšķirība starp "host" objektiem un "native" objektiem? 124 | * Kāda ir atšķirība starp: `function Person(){}`, `var person = Person()`, un `var person = new Person()`? 125 | * Kāda ir atšķirība starp `.call` un `.apply`? 126 | * Izskaidrojiet `Function.prototype.bind`? 127 | * Kurā brīdī Jūs optimizējiet savu kodu? 128 | * Vai variet izskaidrot kā JavaScript valodā strādā mantošana? 129 | * Kādos gadījumos Jūs izmantotu `document.write()`? 130 | * Vairums reklāmas joprojām izmanto `document.write()` kaut arī šāda prakse tiek pelta. 131 | * Kāda ir atšķirība starp funkciju noteikšanu (feature detection), funkciju secināšanu (feature inference) un UA virknes (UA string) izmantošanu? 132 | * Izskaidrojiet AJAX cik vien detalizēti iespējams 133 | * Izskaidrojiet kā stradā JSONP (un kā tas atšķiras no AJAX) 134 | * Vai esat jebkad izmantojuši JavaScript šablonošanai (templating)? 135 | * Ja jā, kuras bibliotēkas Jūs esat izmantojuši? (Mustache.js, Handlebars etc.) 136 | * Izskaidrojiet "hoisting" 137 | * Izskaidrojiet notikumu burbuļošanu (event bubbling) 138 | * Kāda ir atšķirība starp atribūtu un rekvizītu (property)? 139 | * Kāpēc paplašināt iebūvētos JavaScript objektus nav laba doma? 140 | * Kāpēc paplašināt "built ins" ir laba doma? 141 | * Kāda ir atšķirība starp "document load" un "document ready" notikumu? 142 | * Kāda ir atšķirība starp `==` un `===`? 143 | * Paskaidrojiet kā Jūs iegūtu kverija stringa parametru no pārlūka loga URL? 144 | * Izskaidrojiet vietējās izcelsmes (same-origin) noteikumu attiecībā uz JavaScript 145 | * Izskaidrojiet mantošanas paternus JavaScript valodā. 146 | * Lieciet šim strādāt: 147 | ```javascript 148 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 149 | ``` 150 | * Izskaidrojoet memoizācijas stratēģiju (izvairīšanos no aprēķinu atkārtošanas) JavaScript valodā. 151 | * Kāpēc to sauc par ternāru izteiksmi (Ternary expression)? Uz ko norāda vārds ternārs? 152 | * Kas ir funkcijas "arity"? 153 | * Kas ir `"use strict";`? Kādas ir priekšrocības un trūkumi to izmantojot? 154 | 155 | ####[[⬆]](#toc) jQuery Jautājumi: 156 | 157 | * Izskaidrojiet savirknēšanu (chaining). 158 | * Izskaidrojiet novēlojumus (deferreds). 159 | * Kādas ir jQuery specifiskas optimizācijas, ko Jūs spējat ieviest praksē? 160 | * Ko veic `.end()`? 161 | * Kā un kāpēc Jūs nosauktu pievienotu notikumu apdarinātāju (bound event handler)? 162 | * Nosauciet 4 dažādas vērtības, ko Jūs varat padot jQuery metodei 163 | * Selektoru (virkne), HTML (virkne), atgriezenisko funkciju (funkcija), HTMLElement, Object, Array, Element Array, Jquery Object u.c. 164 | * Kas ir efektu (vai fx) rinda? 165 | * Kāda ir atšķirība starp `.get()`, `[]`, un `.eq()`? 166 | * Kāda ir atšķirība starp `.bind()`, `.live()`, un `.delegate()`? 167 | * Kāda ir atšķirība starp `$` un `$.fn`? Vai vienkārši kas ir `$.fn`? 168 | * Optimizējiet šo selektoru 169 | ```javascript 170 | $(".foo div#bar:eq(0)") 171 | ``` 172 | 173 | ####[[⬆]](#toc) Kodēšanas Jautājumi: 174 | 175 | 176 | ```javascript 177 | modulo(12, 5) // 2 178 | ``` 179 | *Jautājums: Izveidojiet modulo funkciju, kas apmierina augstākminēto* 180 | 181 | ```javascript 182 | "i'm a lasagna hog".split("").reverse().join(""); 183 | ``` 184 | *Jautājums: Kāda vērtība tiek atgriezta no augšākminētā koda? 185 | 186 | **Atbilde: "goh angasal a m'i"** 187 | 188 | ```javascript 189 | ( window.foo || ( window.foo = "bar" ) ); 190 | ``` 191 | *Jautājums: Kāda ir `window.foo` vērtība?* 192 | 193 | **Atbilde: "bar"** *(vienīgi°ja `window.foo` "falsey", savādāk tas paturētu savu esošo vērtību)* 194 | 195 | ```javascript 196 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 197 | ``` 198 | *Jautājums: Kāds ir abu augstākminēto paziņojumu iznākums?* 199 | 200 | **Atbilde: "Hello World" & ReferenceError: bar is not defined** 201 | 202 | ```javascript 203 | var foo = []; 204 | foo.push(1); 205 | foo.push(2); 206 | ``` 207 | *Jautājums: Kāda ir `foo.length` vērtība?* 208 | 209 | **Atbilde: `2`** 210 | 211 | ####[[⬆]](#toc) Interesanti Jautājumi: 212 | 213 | * Kas ir pati foršākā lieta, ko jebkat esiet uzprogrammējis un ar ko lepojaties? 214 | * Kuras ir Jūsu izstrādes rīku iemīļotākās funkcijas, kuras izmantojiet? 215 | * Vai Jums ir kādi hobiju projekti? Kādi? 216 | * Kāda ir Jūsu iecienītakā Internet Explorer raksturiezīme? 217 | 218 | ####[[⬆]](#toc) Citas Lieliskas Atsauces: 219 | 220 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 221 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 222 | * http://css-tricks.com/interview-questions-css/ 223 | -------------------------------------------------------------------------------- /Polish/README_PL.md: -------------------------------------------------------------------------------- 1 | #Pytania kwalifikacyjne na stanowisko front-end web developera 2 | 3 | @version 2.0.0 4 | 5 | To repozytorium zawiera wiele pytań, weryfikujących wiedzę potencjalnych kandydatów na stanowisko front-end web developera. Nie zaleca się zadawania wszystkich pytań jedenj osobie (zajęłoby to godziny). Wybranie pojedynczych pozycji z listy pomoże w sprawdzeniu wymaganych umiejętności. 6 | 7 | [Rebecca Murphey](http://rmurphey.com/) opracowała [Podstawowe wymagania dla Front-End web developerów](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/), które są warte przeczytania zamin udamy się na rozmowę o pracę. 8 | 9 | **Uwaga:** Pamiętaj, że wiele pytań jest otwartych, co prowadzi do ciekawych dyskusji, które powiedzą Ci więcej o możliwościach danej osoby, niż w przypadku prostej odpowiedzi. 10 | 11 | #### Pierwotni autorzy 12 | 13 | Większość pytań zaczerpnięto z wątku [oksoclap](http://oksoclap.com/) stworzonego pierwotnie przez [Paula Irisha](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) i rozwijanego przez następujące osoby: 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com) 27 | 28 | ### Pytania ogólne: 29 | 30 | * Czego nauczyłeś się wczoraj/w tym tygodniu? 31 | * Co pobudza lub interesuje cie w programowaniu? 32 | * Jakie jest Twoje preferowane środowisko programistyczne? (system operacyjny, edytor, przeglądarki, narzędzia itd.) 33 | * Opisz kolejne zadania podczas tworzenia strony internetowej? 34 | * Opisz różnicę między stopniowym ulepszaniem (progressive enhancement) i wdzięczną degradacją (graceful degradation)? 35 | * Dodatkowe punkty za opisanie wykrywania obsługi cech (feature detection) 36 | * Wyjaśnij, co kryje się za terminem "semantyczny HTML". 37 | * Jak optymalizowałbyś zasoby strony internetowej? 38 | * Myśląc o wielu rozwiązaniach, które zawierają: 39 | * Łączenie plików 40 | * Zmniejszenie rozmiaru plików 41 | * Zasoby CDN 42 | * Buforowanie 43 | * itd. 44 | * Dlaczego serwowanie zasobów strony przez wiele domen jest lepsze? 45 | * Ile zasobów pobiera przeglądarka z danej domeny w jednej chwili? 46 | * Podaj 3 sposoby na zmniejszenie czasu ładowania strony. (postrzeganego lub rzeczywistego czasu ładowania) 47 | * Jeśli dołączasz do projektu, w którym używa się tabulacji, a ty używasz spacji, co wtedy zrobisz? 48 | * Sugerowanie użycia narzędzi w stylu EditorConfig (http://editorconfig.org) 49 | * Zgodnie z konwencjami (pozostań konsekwentny) 50 | * `issue :retab! command` 51 | * Napisz prosty pokaz slajdów 52 | * Dodatkowe punkty, jeśli nie używasz JS. 53 | * Jakich narzędzi używasz do sprawdzenia wydajności swojego koodu? 54 | * Profiler, JSPerf, Dromaeo 55 | * Gdybyś mógbyś opanować jedną technologię w tym roku, jaka byłaby to technologia? 56 | * Wyjaśnij znaczenie standardów sieciowych i ich twórców. 57 | * Czym jest FOUC? Jak unikasz FOUC? 58 | 59 | ### Pytania HTML: 60 | 61 | * Co robi `doctype` i jakie znasz przykłady? 62 | * Jaka jest różnica między trybem standardów a trybem dziwactw (quirks mode)? 63 | * Jakie są ogranicznia w serwowaniu stron XHTML? 64 | * Czy istnieją problemy z serwowaniem stron jako `application/xhtml+xml`? 65 | * Jak serwujesz stronę z treścią w wielu językach? 66 | * Co jest ważne przy projektowaniu i tworzeniu stron wielojęzycznych? 67 | * Jaka jest przydatność atrybutów `data-` 68 | * Rozpatrujemy HTML5 jako otwartą platformę internetową. Jakie składniki tworzą HTML5? 69 | * Opisz różnice między cookies, sessionStorage i localStorage. 70 | 71 | ### Pytania JS: 72 | 73 | * Wyjaśnij delegację zdarzeń 74 | * Wyjaśnij jak działa `this` w JavaScripcie 75 | * Wyjaśnij jak działa dziedziczenie prototypowe 76 | * Jak radzisz sobie z testowaniem swojego kodu JavaScript? 77 | * AMD kontra CommonJS? 78 | * Czym jest tablica mieszająca (hashtable)? 79 | * Co oznaczają komunikaty `undefined` i `undeclared` dla zmiennych? 80 | * Czym są domknięcia, jak i po co są używane? 81 | * Ulubiony wzorzec używany do ich tworzenia? argyle (Dotyczy tylko IIFE) 82 | * Jakie znasz typowe użycie funkcji anonimowych? 83 | * Wyjaśnij pomysł "Moduł JavaScript" i kiedy jest wart stosowania. 84 | * Dodatkowe punkty za wzmiankę na temat czytości przestrzeni nazw. 85 | * Co jeśli Twój kod nie używa przestrzeni nazw? 86 | * Jak organizujesz swój kod? (moduły, klasyczne dziedziczenie?) 87 | * Jaka jest różnicza między obiektami typu `host` i `native`? 88 | * Różnica między: 89 | ```javascript 90 | function Person(){} var person = Person() var person = new Person() 91 | ``` 92 | * Jaka jest różnica między `.call` i `.apply`? 93 | * Wyjaśnij `Function.prototype.bind`? 94 | * Kiedy optymalizujesz swój kod? 95 | * Wyjaśnij działanie dziedziczenia w JavaScript? 96 | * Kiedy użyłbyś `document.write()`? 97 | * Wiele generowanych reklam używa `document.write()` choć nie jest to mile widziane 98 | * Jakie są różnice między wykrywaniem obsługi funkcji, wnioskowaniem obsługi funkcji i używaniem ciągu UA 99 | * Omów AJAX jak najbardziej szczegółowo 100 | * Wyjaśnij działanie JSONP (i dlaczego nie jest właściwie AJAX) 101 | * Czy kiedykolwiek używałeś szablonów w JavaScript? 102 | * Jeśli tak, jakie to były biblioteki? (Mustache.js, Handlebars itd.) 103 | * Wyjaśnij pojęcie "hoisting". 104 | * Opisz bąbelkowanie zdarzeń. 105 | * Jak jest różnica między "atrybutem" i "właściwością"? 106 | * Czemu rozszerzanie obiektów wbudowanych w JavaScript jest złym pomysłem? 107 | * Czemu rozszerzanie to dobry pomysł? 108 | * Jak jest różnicą między zdarzeniami `load` i `ready` dla strony internetowej? 109 | * Jaka jest różnica między `==` i `===`? 110 | * Wyjaśnij ewentualny sposób pobrania parametrów z adresu URL w oknie przeglądarki. 111 | * Wyjaśnij politykę `same-origin` w odniesieniu do JavaScript. 112 | * Opisz wzorce dziedziczenia w JavaScript. 113 | * Napisz działający kod: 114 | ```javascript 115 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 116 | ``` 117 | * Opisz strategię zapamiętywania (unikanie powtarzalnych obliczeń) w JavaScript. 118 | * Dlaczego mówimy wyrażenie trójkowe, co dokładnie oznacza słowo "trójkowy"? 119 | * Czym jest `arity` funkcji? 120 | * Co oznacza `"use strict";`? Jakie są zalety i wady takiego rozwiązania? 121 | 122 | ### Przykłady kodu JS: 123 | 124 | ```javascript 125 | ~~3.14 126 | ``` 127 | Pytanie: Jaka wartość zostanie zwrócona przez powyższe wyrażenie? 128 | **Odpowiedź: 3** 129 | 130 | ```javascript 131 | "i'm a lasagna hog".split("").reverse().join(""); 132 | ``` 133 | Pytanie: Jaka wartość zostanie zwrócona przez powyższe wyrażenie? 134 | **Odpowiedź: "goh angasal a m'i"** 135 | 136 | ```javascript 137 | ( window.foo || ( window.foo = "bar" ) ); 138 | ``` 139 | Pytanie: Jaka jest wartość window.foo? 140 | **Odpowiedź: "bar"** 141 | tylko jeśli window.foo było fałszywe, w innym przypadku zwraca swoją wartość. 142 | 143 | ```javascript 144 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 145 | ``` 146 | Pytanie: Jaki będzie wyniki wywołania dwóch powyższych poleceń `alert`? 147 | **Odpowiedź: "Hello World" & ReferenceError: bar is not defined** 148 | 149 | ```javascript 150 | var foo = []; 151 | foo.push(1); 152 | foo.push(2); 153 | ``` 154 | Pytanie: Jaka jest wartość foo.length? 155 | **Odpowiedź: `2` 156 | 157 | ```javascript 158 | var foo = {}; 159 | foo.bar = 'hello'; 160 | ``` 161 | Pytanie: Jaka jest wartość foo.length? 162 | **Odpowiedź: `undefined` 163 | 164 | ### Pytania jQuery: 165 | 166 | * Wyjaśnij termin "chaining". 167 | * Wyjaśnij termin "deferreds". 168 | * Jakie przykłady optymalizacji jQuery potrafisz wykonać? 169 | * Co robi `.end()`? 170 | * Jak i dlaczego użyjesz przestrzeni nazw przy obsłudze wiązania zdarzeń? 171 | * Podaj 4 różne wartości, jakie możesz przekazać do metody jQuery. 172 | * Selektor (string), HTML (string), funkcja zwrotna, HTMLElement, obiekt, tablica, element tablicy, obiekt jQuery itd. 173 | * Co to jest kolejka (or fx) queue? 174 | * Jakie są różnicę między `.get()`, `[]`, i `.eq()`? 175 | * Jakie są różnicę między `.bind()`, `.live()`, i `.delegate()`? 176 | * Jakie są różnicę między `$` i `$.fn`? Albo czym jest `$.fn`. 177 | * Zoptymalizuj selektor: 178 | ```javascript 179 | $(".foo div#bar:eq(0)") 180 | ``` 181 | 182 | ### Pytania CSS: 183 | 184 | * Opisz, czym jest plik "reset" dla CSS i dlaczego jest użyteczny. 185 | * Opisz jak działa właściwość `float`. 186 | * Jakie znasz techniki kasowania (clearing) i kiedy wskazane jest ich stosowanie? 187 | * Wyjaśnij technikę "CSS sprites" oraz sposób jej wdrożenia na stronie. 188 | * Jakie są Twoje ulubione techniki zastępowania obrazów i kiedy je stosujesz? 189 | * Haczyki właściwości CSS, warunkowe dołącznie plików .css lub... coś innego? 190 | * Jak serwujesz strony dla przeglądarek z ograniczonym wsparciem funkcji? 191 | * Jakie techniki stosujesz? 192 | * Jakie istnieją sposoby wizualnego ukrycia treści (uczynienia ich dostępnymi tylko dla czytników ekranu)? 193 | * Czy kiedykolwiek używałeś systemów siatek, a jeśli tak to jakie preferujesz? 194 | * Czy używałeś 'media queries' lub tworzyłeś konkretne układy i arkusze dla urządzeń mobilnych? 195 | * Czy miałeś styczność ze stylizacją SVG? 196 | * Jak optymalizujesz swoje strony do druku? 197 | * Jakie stosujesz "sztuczki" przy pisaniu efektywnych CSS? 198 | * Czy używasz narzędzi do przetwarzania CSS? (SASS, Compass, Stylus, LESS) 199 | * Jeśli tak, opisz cechy, które lubisz i nie lubisz w używanych narzędziach. 200 | * Jak tworzysz i wdrażasz projekt używający niestandardowych czcionek? 201 | * Czcionki sieciowe (serwisy czcionek jak: Google Webfonts, Typekit itd.) 202 | * Wyjaśnij jak przeglądarka określa elementy pasujące do selektora CSS? 203 | 204 | ### Pytania dodatkowe (zabawne): 205 | 206 | * Opowiedz o najfajniejszej rzeczy jaką kiedykolwiek zakodowałeś. Z czego jest jesteś najbardziej dumny? 207 | * Jakie są Twoje ulubione części narzędzia programistyczne, których używasz? 208 | * Czy masz jakiś swój własny projekt na boku? Jaki? 209 | * Jaka jest Twoja ulubiona funkcja w Internet Explorer? 210 | -------------------------------------------------------------------------------- /Portuguese/README.md: -------------------------------------------------------------------------------- 1 | #Questões para entrevista de profissionais Front-end 2 | 3 | @versão 2.0.0 4 | 5 | Este repositório contém uma série de perguntas para entrevista de profissionais de front-end que podem ser usadas para avaliar os candidatos. Não é recomendado de maneira alguma usar todas as perguntas aqui no mesmo candidato (que levaria horas). A escolha de alguns itens dessa lista deverá ajudar a identificar as habilidades requeridas do candidato. 6 | 7 | O artigo [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) de [Rebecca Murphey](http://rmurphey.com/) é também uma ótima fonte para ler antes de entrevistar um candidato. 8 | 9 | **Note:** Tenha em mente que muitas destas questões estão em aberto e poderia levar à discussões interessantes que dizem mais sobre as capacidades do candidato do que a resposta em si. 10 | 11 | ####Colaboradores originais 12 | 13 | A maioria das perguntas foi retirada de uma _thread_ da [oksoclap](http://oksoclap.com/), criada originalmente por [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) e com a contribuição individual das seguintes pessoas: 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com) 27 | 28 | ### Questões gerais: 29 | 30 | * O que você aprendeu ontem ou esta semana? 31 | * O que te excita ou te interessa em programação/codificação? 32 | * Fale sobre seu ambiente de desenvolvimento preferido. (SO, Editor, Browser, Ferramentas, etc) 33 | * Descreva seu trabalho quando cria uma página web. 34 | * Descreva a diferença entre _progressive enhancement_ and _graceful degradation_. 35 | * Bônus se descrever ou mencionar detecção de recursos. 36 | * Explique o que significa "HTML Semântico". 37 | * Como você pode otimizar os recursos de um site? 38 | * À procura de uma série de soluções que possam incluir: 39 | * Concatenação de arquivo 40 | * "Minificação" de arquivo 41 | * Utilização de CDN 42 | * Caching 43 | * etc. 44 | * Por que é melhor servir recursos de um site de múltiplos domínios? 45 | * Quantos recursos um navegador pode baixar, simultaneamente, a partir de um determinado domínio? 46 | * Fale 3 formas de diminuir o _page load_ (tempo de carregamento real e percebido) 47 | * Se você caísse em um projeto que as pessoas usam _tabs_ para identação e você usa espaços, o que você faria? 48 | * Sugerir que o projeto utilize algo como EditorConfig (http://editorconfig.org) 49 | * Se conformar com as convenções (ficar consistente) 50 | * `issue :retab! command` 51 | * Escreva uma página simples de _slideshow_ 52 | * Bônus se não usar JS. 53 | * Quais ferramentas você usa para testar a performance do seu código? 54 | * Profiler, JSPerf, Dromaeo 55 | * Se você pudesse dominar uma tecnologia deste ano, qual seria? 56 | * Explique a importância de normas e órgãos normativos. 57 | * O que é FOUC? Como você evita FOUC? 58 | 59 | ### Questões específicas de HTML: 60 | 61 | * O que um `doctype` faz? 62 | * Qual a diferença entre _standards mode_ e _quirks mode_? 63 | * Quais as limitações quando utilizamos páginas XHTML? 64 | * Existe algum problema em utilizar páginas como `application/xhtml+xml`? 65 | * Como você desenvolve uma página com conteúdo em múltiplos idiomas? 66 | * Que tipo de coisas que você deve tomar cuidado ao desenvolver um website multi-língua? 67 | * Quais são os benefícios em utilizar o atributo `data-`? 68 | * Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção de HTML5? 69 | * Descreva a diferença entre cookies, sessionStorage e localStorage. 70 | 71 | ### Questões específicas de JS: 72 | 73 | * Explique o evento _delegation_. 74 | * Explique como `this` funciona em JavaScript. 75 | * Explique como funciona herança prototipada. 76 | * Como você testa seu JavaScript? 77 | * AMD vs. CommonJS? 78 | * O que é um _hashtable_? 79 | * O que são as variáveis `undefined` e `undeclared`? 80 | * O que é uma _closure_, e como/por que você usaria uma? 81 | * Seu padrão favorito é utilizado por ele? Argyle (Apenas aplicáveis para IIFEs) 82 | * Qual o caso de uso típico para funções anônimas? 83 | * Explique o padrão "JavaScript module pattern" e quando você o usaria. 84 | * Bônus por mencionar _namespaces_ limpos. 85 | * E se seus módulos são namespace-less? 86 | * Como você organiza seu código? (module pattern, herança clássica?) 87 | * Qual a diferença entre objetos herdados e objetos nativos? 88 | * Qual a diferença entre: 89 | 90 | ```javascript 91 | function Person(){} 92 | var person = Person() 93 | var person = new Person() 94 | ``` 95 | 96 | * Qual a diferença entre `.call` e `.apply`? 97 | * Explique `Function.prototype.bind`. 98 | * Quando você otimiza seu código? 99 | * Você pode explicar como funciona a herença no Javascript? 100 | * Quando você deve usar o `document.write()`? 101 | * A maioria dos anúncios de publicidade ainda utilizam `document.write()` embora seu uso não seja recomendado. 102 | * Qual a diferença entre feature detection, feature inference, e o uso de UA string? 103 | * Explique o que é AJAX mais detalhadamente possível. 104 | * Explique como o JSONP funciona (e como ele realmente não é AJAX). 105 | * Você já utilizou templates com Javascript? 106 | * Se sim, quais bibliotecas foram utilizadas? (Mustache.js, Handlebars etc.) 107 | * Explique o que é "hoisting". 108 | * Descreva o que é event bubbling. 109 | * Qual a diferença entre atributo e propriedade? 110 | * Porque a extensão de objetos nativos não são uma boa ideia? 111 | * Porque a extensão de elementos nativos não são uma boa ideia? 112 | * Qual a diferença entre o evento document load e o evento document ready? 113 | * Qual a diferença entre `==` e `===`? 114 | * Explique como você pega um parâmetro na URL do browser. 115 | * Explique a política de _same-origin_ em relação a Javascript. 116 | * Descreva os padrões de herança em JavaScript. 117 | * Faça isso funcionar: 118 | 119 | ```javascript 120 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 121 | ``` 122 | 123 | * Descreva a estratégia para memoization (evitar a repetição de cálculo) no JavaScript. 124 | * O que é um operador ternário, o que a palavra "ternário" indica/significa? 125 | * O que a aridade de uma função? 126 | O que é o `"use strict";`? Quais a vantagens e desvantagens de sua utilização? 127 | 128 | ### Exemplos de códigos JavaScript: 129 | 130 | ```javascript 131 | ~~3.14 132 | ``` 133 | 134 | Questão: Qual é o valor a ser retornado? 135 | 136 | **Resposta: 3** 137 | 138 | ```javascript 139 | "sou uma lasanha".split("").reverse().join(""); 140 | ``` 141 | 142 | Questão: Qual é o valor a ser retornado? 143 | 144 | **Resposta: "ahnasal amu uos"** 145 | 146 | ```javascript 147 | ( window.foo || ( window.foo = "bar" ) ); 148 | ``` 149 | Questão: Qual é o valor de `window.foo`? 150 | 151 | **Resposta: "bar"** 152 | 153 | Apenas se window.foo for falso, se não ele vai retornar o seu valor próprio. 154 | 155 | ```javascript 156 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 157 | ``` 158 | Questão: Qual o retorno destes dois alerts? 159 | 160 | **Resposta: "Olá Mundo" & ReferenceError: bar is not defined** 161 | 162 | ```javascript 163 | var foo = []; 164 | foo.push(1); 165 | foo.push(2); 166 | ``` 167 | 168 | Questão: Qual o valor de `foo.length`? 169 | 170 | **Resposta: `2`** 171 | 172 | ```javascript 173 | var foo = {}; 174 | foo.bar = 'hello'; 175 | ``` 176 | 177 | Questão: Qual o valor de `foo.length`? 178 | 179 | **Resposta: `undefined`** 180 | 181 | ### Questões específicas de jQuery: 182 | 183 | * Explique o que é "chaining". 184 | * Explique o que é "deferreds". 185 | * Quais são algumas especificações de optimização do jQuery que você pode implementar? 186 | * O que o `.end()` faz? 187 | * Como, e porque, faria namespacing de vários agregadores de eventos? 188 | * Cite 4 valores diferentes que você pode passar pelo método jQuery 189 | * Seletores (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 190 | * Quais são os efeitos do queue? 191 | * Qual a diferença entre `.get()`, `[]`, e `.eq()`? 192 | * Qual a diferença entre `.bind()`, `.live()`, e `.delegate()`? 193 | * Qual a diferença entre `$` e `$.fn`? Ou, apenas, o que é `$.fn`. 194 | * Optimize esse seletor: 195 | ```javascript 196 | $(".foo div#bar:eq(0)") 197 | ``` 198 | * Qual a diferença entre 'delegate()' e 'live()'? 199 | 200 | 201 | ### Questões específicas de CSS 202 | * Descreva o que é o arquivo "reset" do css e o que ele faz e como ele é útil. 203 | * Descreva o que são floats e como eles funcionam. 204 | * Quais são as várias técnicas para "clearing" e quais delas são apropriadas para qual contexto? 205 | * Explique o que são CSS Sprites, e como você implementaria eles em um website. 206 | * Quais são suas técnicas favoritas para troca de imagens e quais dela você usa. 207 | * CSS Hacks, arquivo condicional .css, ou... alguma outra coisa? 208 | * Como você desenvolve sua página para browsers com recursos limitados? 209 | * Quais técnicas/processos você usa? 210 | * Quais são as diferentes formas de visualizar conteúdo escondido (e como fazer para deixar eles disponíveis apenas para leitores de tela?) 211 | * VoCê já utilizou algum sistema de grid, se sim, qual você prefere? 212 | * Você já utilizou ou implementou media queries ou css's específicos para mobile? 213 | * Qual sua familiaridade com SVG? 214 | * Como você optimiza suas páginas para impressão? 215 | * Quais são algumas técnicas para escrever um eficiente CSS? 216 | * Você já utilizou pré-processadores css? (SASS, Compass, Stylus, LESS) 217 | * Se sim, descreva o que você gostou e o que não gostou com eles. 218 | * Como você implementaria um website que não utilizaria fontes padrões nos computadores? 219 | * Webfonts (Serviços como: Google Webfonts, Typekit etc.) 220 | * Explique como um browser determina quais os elementos que correspondem a um seletor CSS. 221 | 222 | ### Questões divertidas opcionais: 223 | 224 | * Qual a coisa mais legal que você desenvolveu, qual você ficou mais orgulhoso? 225 | * Quais suas partes favoritas sobre as ferramentas de desenvolvimento que você usa? 226 | * Você teve algum projeto para animais de estimação? Qual tipo? 227 | * Qual sua feature favorita do Internet Explorer? 228 | -------------------------------------------------------------------------------- /Romanian/README.md: -------------------------------------------------------------------------------- 1 | #Întrebări pentru interviu tehnic web front-end 2 | 3 | Acest depozit conține o serie de întrebări pentru interviuri tehnice pe partea 4 | de front-end, care pot fi folosite pentru a verifica un potențial candidat. Nu 5 | este deloc recomandat să fie folosite toate întrebările pentru un singur 6 | candidat ( ar lua câteva ore ). Alegând câteva întrebări din această listă ar 7 | trebui să te ajute în verificarea calităților pe care le urmărești. 8 | 9 | Articolul lui [Rebecca Murphey](http://rmurphey.com/) [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) este de asemenea o resursă bună de citit înainte de a intra într-un interviu 10 | 11 | **Notă:** Ține în minte că multe dintre întrebări au răspuns liber și ar putea 12 | duce la discuții interesante, care ți-ar putea spune mai multe despre 13 | capacitățile persoanei. 14 | 15 | ## Cuprins 16 | 17 | 1. [Contribuitori inițiali](#contributors) 18 | 1. [Întrebări generale](#general) 19 | 1. [Întrebări despre HTML](#html) 20 | 1. [Întrebări despre CSS](#css) 21 | 1. [Întrebări despre JS](#js) 22 | 1. [Întrebări despre jQuery](#jquery) 23 | 1. [Întrebări despre programare](#jscode) 24 | 1. [Întrebări amuzante](#fun) 25 | 1. [Alte resurse bune](#references) 26 | 27 | ####[[⬆]](#toc) Contribuitori inițiali: 28 | 29 | The majority of the questions were plucked from an [oksoclap](http://oksoclap.com/) thread created originally by [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) and contributed to by the following individuals: 30 | Majoritatea întrebărilor au fost adunate dintr-un fir de discutie [oksoclap](http://oksoclap.com/) creat de [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) la care au contribuit apoi: 31 | 32 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 33 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 34 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 35 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 36 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 37 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 38 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 39 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 40 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 41 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 42 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 43 | 44 | ####[[⬆]](#toc) Întrebări generale: 45 | 46 | * Ce ai învățat ieri / săptămâna asta? 47 | * Ce te fascinează sau interesează la programare? 48 | * Ce aspecte de UI, Securitate, Performanță, SEO, Întreținere sau Tehnologie iei în cosiderare când construiești o aplicație web sau un site? 49 | * Povestește despre mediul de lucru preferat. ( OS, Editor, Browsere, Unelte, 50 | etc.) 51 | * Îți poți descrie fluxul de lucru când creezi o pagină web? 52 | * Poți descrie difereța dintre "progressive enhancement" și "graceful 53 | degradation"? 54 | * Puncte bonus pentru descrierea modalităților de detecție 55 | a capabilităților suportate de browsere 56 | * Explică ce înseamnă "HTML Semantic". 57 | * Cum ai optimiza părțile componente ale unui site web? 58 | * Urmărit mai multe soluții printre care: 59 | * Concatenarea fișierelor 60 | * Minificarea fișierelor 61 | * Cache 62 | * etc. 63 | * De ce este mai bine să servești conținutul static din mai multe domenii? 64 | * Câte resurse va descarca un browser de la un domeniu la un moment dat? 65 | * Numește 3 moduri pentru a scădea timpul de încarcare a paginii. ( perceput 66 | sau chiar timpul de descărcare ) 67 | * Dacă intri într-un proiect și se folosesc taburi în loc de spații, ce faci? 68 | * Sugerează ca proiectul să folosească ceva de genul EditorConfig (http://editorconfig.org) 69 | * Conformează cu convențiile ( rămâi consistent ) 70 | * `issue :retab! command` 71 | * Scrie o simplă pagină de slideshow 72 | * Puncte bonus dacă nu se folosește JS. 73 | * Ce unelte folosești pentru a testa performanța codului tău? 74 | * Profiler, JSPerf, Dromaeo 75 | * Dacă ai putea învăța o tehnologie anul asta, care ar fi? 76 | * Explică importanța standardelor și a organismelor de standardizare. 77 | * Ce este FOUC? Cum eviți Fouc? 78 | 79 | ####[[⬆]](#toc) Întrebări HTML: 80 | 81 | * La ce este util `doctype`? 82 | * Care este diferența dintre "standards mode" și "quirks mode"? 83 | * Care sunt limitările când servești pagini XHTML ? 84 | * Apar probleme când servești pagini ca `application/xhtml+xml`? 85 | * Cum servești o pagină cu conținut în mai multe limbi? 86 | * La ce trebuie să fi atent când faci design sau dezvolți pentru site-uri multilingve 87 | * La ce sunt utile atributele `data-`? 88 | * Considerând HTML5 ca o platformă web deschisă, care sunt parțile componente 89 | alte HTML5? 90 | * Descrie diferența dintre cookies, sessionStorage și localStorage 91 | 92 | ####[[⬆]](#toc) Întrebări CSS: 93 | 94 | * Descrie ce este un fișier CSS de resetare și la ce este util. 95 | * Descrie 'Float' si cum funcționează. 96 | * Care sunt tehnicile de 'clearing' și care este potrivită pentru ce context 97 | * Explică conceptul de mape CSS și cum le-ai implementa pe o pagină sau un 98 | site. 99 | * Care sunt tehnicile tale preferate pentru inlocuirea imaginilor și care când 100 | le folosești? 101 | * Hack-uri de proprietăți CSS, includerea condițională a fișierelor .css, 102 | sau... altceva? 103 | * Cum servești pagini pentru browsere cu capabilități reduse? 104 | * Ce procese/tehnici folosești? 105 | * Care sunt diferitele modalități de a ascunde vizual conținut (dar sa-l faci 106 | disponibil pentru cititoare de ecrane) ? 107 | * Ai folosit vreodată un system 'grid' și dacă da, ce preferi? 108 | * Ai folosit sau implementat 'media queries' sau interfețe/CSS specific pentru 109 | mobile ? 110 | * Familiarități cu stilizarea unui SVG? 111 | * Cum optimizezi paginile pentru print? 112 | * Ceva 'gotchas' când scrii CSS eficient? 113 | * Care sunt avantajele/dezavantajele folosirii preprocesoarelor CSS (SASS, 114 | Compass, Stylus, LESS) 115 | * Descrie ce îți place respectiv nu îți place la preprocesoarele CSS pe care 116 | le-ai folosit 117 | * Cum ai implementa un design care folosește fonturi non-standard? 118 | * Webfonts (servicii fonturi ca: Google Webfonts, Typekit etc.) 119 | * Explică cum un browser determina ce elemente se potrivesc unui selector CSS? 120 | * Explică cum întelegi conceptul dea "box model" si cum îi spui browser-ului 121 | prin CSS cum sa randeze layoutul în modele diferite 122 | 123 | ####[[⬆]](#toc) Întrebări JS: 124 | 125 | * Explică "event delegation". 126 | * Explică cum funcționează `this` în JavaScript. 127 | * Explică cum funcționează moștenirea prototipală. 128 | * Cum procedezi cu testarea codului JavaScript? 129 | * AMD vs. CommonJS? 130 | * Ce este un "hashtable"? 131 | * Explică de ce următoarea nu functionează ca un IIFE: `function foo(){ }();` 132 | * Ce trebuie schimbat ca să o transformi într-o IIFE? 133 | * Care este diferența dintre o variabilă care este: `null`, `undefined` sau 134 | `undeclared`? 135 | * Cum ai face sa verifici după fiecare dintre stările acestea? 136 | * Ce este un "closure" și cum/de ce ai folosi unul? 137 | * Care este un caz în care sunt folosite funcții anonime? 138 | * Explică "Javascript module pattern" și cand l-ai folosi. 139 | * Puncte bonus pentru menționarea namespace-uri curate. 140 | * Daca modulele sunt fără namespace? 141 | * Cum îți organizezi codul? (module pattern, moștenire?) 142 | * Care este diferența dintre obiecte host si obiecte native? 143 | * Diferența dintre: 144 | ```javascript 145 | function Person(){} var person = Person() var person = new Person() 146 | ``` 147 | * Care este diferența dintre `.call` și `.apply`? 148 | * Explică `Function.prototype.bind`? 149 | * Când îți optimizezi codul? 150 | * Poți explica cum funcționează moștenirea in JavaScript? 151 | * Când ai folosi `document.write()`? 152 | * Cele mai multe reclame generate încă folosesc `document.write()` deși este 153 | o soluție neplacută 154 | * Care este diferența dintre 'feature detection', 'feature inference' și 155 | folosirea șirului User Agent 156 | * Explică AJAX cât mai detaliat posibil 157 | * Explică cum funcționează JSONP ( și cum nu este AJAX prea mult ) 158 | * Ai folosit vreodată template-uri JavaScript? 159 | * Dacă da, ce librării ai folosit? (Mustache.js, Handlebars etc.) 160 | * Explică "hoisting". 161 | * Descrie "event bubbling". 162 | * Care este diferența dintre un atribut și o proprietate? 163 | * De ce nu este o idee bună extinderea obiectelor JavaScript DOM/"built-in". 164 | * De ce este extinderea "built in"-urilor o idee bună? 165 | * Diferența dintre evenimentul de "document load" și "document ready"? 166 | * Care este diferența dintre "==" și "==="? 167 | * Explain how you would get a query string parameter from the browser window's URL. 168 | * Explică politica "same-origins" în legătură cu JavaScript. 169 | * Descrie pattern-uri de moștenire în JavaScript. 170 | * Fă următorul cod să funcționeze: 171 | ```javascript 172 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 173 | ``` 174 | * Descrie o strategie pentru memoizare (evită repetarea calculelor) în 175 | JavaScript. 176 | * Ce este o expresie ternară și ce indică cuvântul ternar? 177 | * Ce este aritatea unei funcții? 178 | * Ce este `"use strict;"` și care sunt avantajele si dezavantajele folosirii 179 | acestuia? 180 | 181 | ####[[⬆]](#toc) Întrebări jQuery: 182 | 183 | * Explică "chaining". 184 | * Explică "deferreds". 185 | * Poți vorbi despre ceva optimizări specifice jQuery pe care le poți 186 | implementa? 187 | * Ce face `.end()`? 188 | * Când și cum ai folosi un "namespace" pentru a lega un handler de eveniment? 189 | * Numește 4 valori diferite pe care le poți trimite unei metode jQuery. 190 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 191 | * Ce este coada de efecte - "effects queue"? 192 | * Care este diferența dintre `.get()`, `[]`, și `.eq()`? 193 | * Care este diferența dintre `.bind()`, `.live()`, și `.delegate()`? 194 | * Care este diferența dintre `$` și `$.fn`? Sau doar ce este `$.fn`. 195 | * Optimizează acest selector: 196 | ```javascript 197 | $(".foo div#bar:eq(0)") 198 | ``` 199 | 200 | ####[[⬆]](#toc) Întrebări despre cod: 201 | 202 | ```javascript 203 | ~~3.14 204 | ``` 205 | *Întrebare: Ce valoare este returnată de expresia de mai sus?* 206 | 207 | **Răspuns: 3** 208 | 209 | ```javascript 210 | "i'm a lasagna hog".split("").reverse().join(""); 211 | ``` 212 | *Întrebare: Ce valoare este returnată de expresia de mai sus?* 213 | 214 | **Răspuns: "goh angasal a m'i"** 215 | 216 | ```javascript 217 | ( window.foo || ( window.foo = "bar" ) ); 218 | ``` 219 | *Întrebare: Care este valoare lui `window.foo`?* 220 | 221 | **Răspuns: "bar"** *(doar dacă `window.foo` era "falsey" altfel va returna 222 | valoarea inițială)* 223 | 224 | ```javascript 225 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 226 | ``` 227 | *Întrebare: Care este rezultatul celor două apelări ale funcției alert?* 228 | 229 | **Răspuns: "Hello World" & ReferenceError: bar is not defined** 230 | 231 | ```javascript 232 | var foo = []; 233 | foo.push(1); 234 | foo.push(2); 235 | ``` 236 | *Întrebare: Care este valoarea lui `foo.length`?* 237 | 238 | **Răspuns: `2`** 239 | 240 | ```javascript 241 | var foo = {}; 242 | foo.bar = 'hello'; 243 | ``` 244 | *Întrebare: Care este valoarea lui `foo.length`?* 245 | 246 | **Răspuns: `undefined`** 247 | 248 | ####[[⬆]](#toc) Întrebări amuzante: 249 | 250 | * Care este cel mai mișto lucru pe care l-ai programat sau de care ești cel mai 251 | mândru? 252 | * Ce îți place cel mai mult la uneltele de dezvoltare pe care le folosești? 253 | * Ai proiecte personale? De care? 254 | * Care este funcționalitatea ta preferată din Internet Explorer? 255 | 256 | ####[[⬆]](#toc) Alte referințe bune: 257 | 258 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 259 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 260 | * http://css-tricks.com/interview-questions-css/ 261 | -------------------------------------------------------------------------------- /Russian/README_RU.md: -------------------------------------------------------------------------------- 1 | #Вопросы кандидату на должность front-end разработчика 2 | 3 | **Замечание:** Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь). 4 | 5 | Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе). 6 | 7 | ## Содержание 8 | 9 | 1. [Первоначальные авторы](#contributors) 10 | 1. [Общие вопросы](#general) 11 | 1. [Вопросы по HTML](#html) 12 | 1. [Вопросы по JavaScript](#js) 13 | 1. [Примеры кода на JavaScript](#jscode) 14 | 1. [Вопросы по jQuery](#jquery) 15 | 1. [Вопросы по CSS](#css) 16 | 1. ["Светская беседа"](#fun) 17 | 18 | ####[[⬆]](#toc) Первоначальные авторы 19 | 20 | * @bentruyman (http://bentruyman.com) 21 | * @cowboy (http://benalman.com) 22 | * @roger_raymond (http://twitter.com/iansym) 23 | * @ajpiano (http://ajpiano.com) 24 | * @paul_irish (http://paulirish.com) 25 | * @SlexAxton (http://alexsexton.com) 26 | * @boazsender (http://boazsender.com) 27 | * @miketaylr (http://miketaylr.com) 28 | * @vladikoff (http://vladfilippov.com) 29 | * @gf3 (http://gf3.ca) 30 | * @jon_neal (http://twitter.com/jon_neal) 31 | * @wookiehangover (http://wookiehangover.com) 32 | * @darcy_clarke (http://darcyclarke.me) 33 | 34 | ####[[⬆]](#toc) Общие вопросы: 35 | 36 | * Вы пользуетесь Твиттером? 37 | * Если да, то кто присутствует в вашей ленте? 38 | * Кого из мировых front-end разработчиков вы знаете? 39 | * А российских front-end'щиков? 40 | * У Вас есть аккаунт на GitHub? 41 | * Если да, то за какими интересными проектами вы следите? 42 | * Какие блоги Вы читаете? 43 | * Какие системы управления версиями Вам приходилось использовать? 44 | * Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты) 45 | * Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу 46 | * Можете ли пояснить разницу между progressive enhancement и graceful degradation? 47 | * Бонус, если также расскажете про feature detection (определение возможностей браузера) 48 | * Объясните, что означает "Семантическая разметка" 49 | * Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь? 50 | * Как можно оптимизировать загрузку внешних ресурсов на странице? 51 | * Комбинация из потенциальных решений: 52 | * Конкатенация 53 | * Минификация 54 | * Использование CDN 55 | * Кеширования 56 | * и т.д. 57 | * Каково преимущество в подгрузке внешних ресурсов с нескольких доменов? 58 | * Сколько ресурсов браузер может одновременно качать с одного домена? 59 | * Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального) 60 | * Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите? 61 | * Предложите использовать EditorConfig (http://editorconfig.org) 62 | * Останетесь верным своим привычкам 63 | * Выполните команду `:retab!` 64 | * Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)? 65 | * Знакомы ли с шаблонизаторами (Smarty, HAML etc.) 66 | * Реализуйте примитивное слайд-шоу 67 | * Бонус, если Вы это сделаете без использования JS 68 | * Какие инструменты Вы используете для тестирования производительности кода? 69 | * JSPerf (http://jsperf.com/) 70 | * Dromaeo (http://dromaeo.com/) 71 | * и т.д. 72 | * Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было? 73 | * Объясните важность стандартов и комитетов по стандартам 74 | * Что такое FOUC (Flash Of Unstyled Content)? Как его избежать? 75 | 76 | ####[[⬆]](#toc) Вопросы по HTML: 77 | 78 | * Для чего нужен `doctype` и сколько разновидностей Вы можете назвать? 79 | * В чем разница между standards mode и quirks mode? 80 | * Какие ограничения накладывают стандарты XHTML? 81 | * Могут ли возникнуть проблемы при подаче страниц с типом `application/xhtml+xml`? 82 | * Как следует оформлять страницу, в которой контент может быть на разных языках? 83 | * Что нужно иметь в виду при разработке многоязычных сайтов? 84 | * Можно ли использовать синтаксис XHTML в HTML5? 85 | * Как использовать XML в HTML5? 86 | * Чем полезны `data-` атрибуты? 87 | * Какие box-модели есть в HTML4 и есть ли отличия в HTML5? 88 | * Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит? 89 | * Объясните разницу между cookies, sessionStorage и localStorage. 90 | * Знакомы ли с подводными камнями вёрстки почтовых шаблонов? 91 | 92 | ####[[⬆]](#toc) Вопросы по JavaScript: 93 | 94 | * Какими js-библиотеками Вы пользовались? 95 | * Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались? 96 | * Чем JavaScript отличается от Java? 97 | * Что-такое хэш-таблица? 98 | * Что такое `неопределенные (undefined)` и `необъявленные (undeclared)` переменные? 99 | * Что такое замыкание и как/для чего его используют? 100 | * Как вы предпочитаете их использовать? 101 | * Где обычно используются анонимные функции? 102 | * Объясните "JavaScript module pattern" и где он (паттерн) применяется 103 | * Бонус, если упомянута чистота глобального пространства имен 104 | * Что, если Ваш модуль не заключен в пространство имен? 105 | * Как Вы организуете свой код? (module pattern, наследование) 106 | * В чем разница между host-объектами и нативными объектами? 107 | * В чем разница между последними двумя строчками: 108 | 109 | ```javascript 110 | function Person(){} 111 | 112 | var person = Person() 113 | var person = new Person() 114 | ``` 115 | 116 | * В чем разница между `.call` и `.apply`? 117 | * Что делает и для чего нужна функци `Function.prototype.bind`? 118 | * Когда Вы оптимизируете свой код? 119 | * Объясните, как работает наследование в JavaScript? 120 | * Где до сих пор используется `document.write()`? 121 | * В большинстве генерируемых банеров, хотя так делать не рекомендуется 122 | * В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent? 123 | * Расскажите об AJAX как можно более подробно 124 | * Объясните, как работает JSONP (и почему это не настоящий AJAX) 125 | * Вы когда-нибудь использовали шаблонизацию на JavaScript? 126 | * Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.) 127 | * Объясните, что такое "hoisting" 128 | * Объясните event bubbling 129 | * В чем разница между "атрибутом" (attribute) и "свойством" (property)? 130 | * Почему *не следует* расширять нативные JavaScript объекты? 131 | * Почему *следует* расширять нативные JavaScript объекты? 132 | * В чем разница между событиями `document load` и `document ready`? 133 | * В чем разница между `==` и `===`? 134 | * Как получить параметры из URL'а текущего окна? 135 | * Объясните `same-origin policy` в контексте JavaScript 136 | * Объясните `event delegation` 137 | * Какие Вы знаете паттерны организации наследования в JavaScript? 138 | * Сделайте так, чтобы этот код работал: 139 | ```javascript 140 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 141 | ``` 142 | * Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript 143 | * Почему тернарный оператор так называется? 144 | * Что такое арность функции? 145 | * Что делает строчка `"use strict";`? Какие достоинства и недостатки от ее использования? 146 | 147 | ####[[⬆]](#toc) Примеры кода на JavaScript 148 | 149 | ```javascript 150 | ~~3.14 151 | ``` 152 | Вопрос: Какое значение возвращает данное предложение? 153 | **Ответ: 3** 154 | 155 | ```javascript 156 | "i'm a lasagna hog".split("").reverse().join(""); 157 | ``` 158 | Вопрос: Какое значение возвращает данное предложение? 159 | **Ответ: "goh angasal a m'i"** 160 | 161 | ```javascript 162 | ( window.foo || ( window.foo = "bar" ) ); 163 | ``` 164 | Вопрос: Чему равно window.foo? 165 | **Ответ: "bar"**, 166 | только если выражение window.foo было ложным, иначе переменная сохранит свое изначальное значение 167 | 168 | ```javascript 169 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 170 | ``` 171 | Вопрос: Что покажут эти два alert? 172 | **Ответ: "Hello World" и ReferenceError: bar is not defined** 173 | 174 | ```javascript 175 | var foo = []; 176 | foo.push(1); 177 | foo.push(2); 178 | ``` 179 | Вопрос: Чему равно foo.length? 180 | **Ответ: `2`** 181 | 182 | ```javascript 183 | var foo = {}; 184 | foo.bar = 'hello'; 185 | ``` 186 | Вопрос: Чему равно foo.length? 187 | **Ответ: `undefined`** 188 | 189 | 190 | ####[[⬆]](#toc) Вопросы по jQuery: 191 | 192 | * Объясните "chaining". 193 | * Объясните "deferreds". 194 | * Какие Вы знаете приемы оптимизации кода, используещего jQuery? 195 | * Что делает `.end()`? 196 | * Как добавить пространство имен к обработчику событий? Для чего это нужно? 197 | * Назовите 4 разных вида аргументов, которые принимает функция jQuery()? 198 | * Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc. 199 | * Что такое очередь эффектов (fx queue)? 200 | * В чем разница между `.get()`, `[]`, и `.eq()`? 201 | * В чем разница между `.bind()`, `.live()`, и `.delegate()`? 202 | * В чем разница между `$` и `$.fn`? Что вообще такое `$.fn`? 203 | * Оптимизируйте данный селектор: 204 | ```javascript 205 | $(".foo div#bar:eq(0)") 206 | ``` 207 | 208 | ####[[⬆]](#toc) Вопросы по CSS: 209 | 210 | * Что такое "reset" CSS и для чего он нужен? 211 | * Объясните, что такое плавающие элементы (floats) и как они работают? 212 | * Какие вы знаете методы запрета обтекания (clearing) и какие где применяются? 213 | * Что такое CSS спрайты? Как они реализуются на странице или сайте? 214 | * Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете? 215 | * CSS property hacks, conditionally included .css files... 216 | * Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах? 217 | * Какие приемы/процессы Вы при этом используете? 218 | * Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)? 219 | * Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая? 220 | * Приходилось ли Вам использовать или реализовывать media queries или верстку под мобильные устройства? 221 | * Приходилось ли Вам стилизовать SVG? 222 | * Как оптимизировать страницы для печати? 223 | * Какие есть подводные камни в оптимизации производительности CSS? 224 | * Вы используете CSS препроцессоры? (SASS, Compass, Bourbon, Stylus, LESS) 225 | * Если да, расскажите, что Вам в них нравится и не нравится? 226 | * Как Вы сверстаете макет, который использует нестандартные шрифты? 227 | * Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.) 228 | * Объясните, как браузер определяет, на какие элементы накладывать CSS стили? 229 | * Приходилось ли сталкиваться с Retina-дисплеями? 230 | * Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)? 231 | * Если да, то в чем её суть? Расскажите о системе нотификации селекторов. 232 | 233 | ####[[⬆]](#toc) "Светская беседа": 234 | 235 | * Самое крутое, что Вы когда либо делали и чем гордитесь? 236 | * Вы знаете секретный жест HTML5-банды? 237 | * ([непереводимый юмор](https://vimeo.com/18848658)) Are you now, or have you ever been, on a boat. 238 | * Что Вы больше всего любите в Ваших инструментах разработки? 239 | * У Вас есть какие-нибудь личные проекты? 240 | * Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода. 241 | * Засеките, через сколько времени кандидат перевернет листок 242 | * Пират или ниндзя? 243 | * Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну 244 | * Чем бы Вы занимались, если бы не Web-разработкой? 245 | * Какая Ваша любимая "фишка" Internet Explorer? 246 | * Закончите предложение: Brendan Eich и Doug Crockford являются __________ языка JavaScript. 247 | * jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии... 248 | 249 | -------------------------------------------------------------------------------- /Serbian/README.md: -------------------------------------------------------------------------------- 1 | #Intervju za posao Front-end Developer-a 2 | 3 | @version 0.0.1 4 | 5 | Ovaj repo sadrži mnogobrojna pitanja za intervju iz oblasti front-end develpment-a koja možete koristiti u proceni mogućih kandidata. 6 | Ne preporučuje se korišćenje svih pitanja jer bi intervju trajao dugo. Izbor od nekoliko pitanja sa ove liste bi Vam pomogao. 7 | 8 | Pre intevjua, preporučujemo da proučite članak: [Rebecca Murphey](http://rmurphey.com/) [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/). 9 | 10 | **Napomena:** Uzmite u obzir da veliki broj dole navedenih pitanja može biti korisna tema za razgovor koja će Vam možda reći vise o sposobnostima osobe nego direktni odgovori. 11 | 12 | ####Autori originalne liste 13 | 14 | Većina pitanja je preuzeta sa [oksoclap](http://oksoclap.com/) tj. rasprave koju je originalno pokrenuo [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) i kojoj su doprineli: 15 | 16 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 17 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 18 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 19 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 20 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 21 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 22 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 23 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 24 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 25 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 26 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 27 | * [@iansym](http://twitter.com) 28 | 29 | ### Opšta pitanja: 30 | 31 | * Opišite Vaš omiljeni radni prostor. (OS, Editor, Broseri, Alati itd.) 32 | * Opišite Vaš proces izrade web stranice? 33 | * Možete li opisati razliku između progresivnog poboljšanja i neprimjetne degradacije? 34 | * Bonus bodovi ako se opiše detektovanje mogućnosti browsera 35 | * Objasnite šta je to "Semantički HTML". 36 | * Kako biste optimizirali infrastrukturu i resurse web stranice? 37 | * Traže se više rešenja, na primer: 38 | * Spajanje datoteka 39 | * Minifikacija datoteka 40 | * Korišćenje CDN-a 41 | * Keširanje (Caching) 42 | * itd. 43 | * Zbog čega je bolje preuzimati delove stranice sa više domena? 44 | * Koliko resursa browser može preuzeti istovremeno sa jednog domena? 45 | * Navedite tri načina za smanjivanje vremena učitavanja strane. (uočeno ili stvarno vrieme učitavanja) 46 | * Ako bi došli na projekt gde se koriste tabovi a Vi koristite razmake, šta biste uradili? 47 | * Preporučili korištenja EditorConfig-a (http://editorconfig.org) 48 | * Prilagodili se postojećoj praksi (zadržavanje konzistentnosti) 49 | * `koristili :retab! naredbu` 50 | * Napravite jednostavnu stranicu za prezentacije 51 | * Bonus bodovi ako se ne koristi JavaScript. 52 | * Koje alate koristite za testiranje performansi koda? 53 | * Profiler, JSPerf, Dromaeo 54 | * Kada bi ste odabrati jednu tehologiju koju ćete naučiti ove godine, koja bi to bila? 55 | * Objasnite važnost standarda i organizacija za standardizaciju 56 | * Šta je to FOUC? Kako možete izbeći FOUC? 57 | 58 | ### HTML pitanja: 59 | 60 | * Koja je funkcija `doctype`? 61 | * Koja je razlika između standardnog i quirks moda? 62 | * Koja su ograničenja u obsluživanju XHTML standarda? 63 | * Postoje li problemi kod obsluživanju stranica sa header-om `application/xhtml+xml`? 64 | * Kako biste obslužili stranicu sa višejezičnim sadržajem? 65 | * Na što morate obratit pažnju prilikom dizajna ili razvoja višejezične stranicu? 66 | * Čemu služe `data-` atributi? 67 | * Posmatrajte HTML5 kao platformu otvorenog koda. Koji su gradivni elementi HTML-a 5? 68 | * Objasnite razliku između kolačića, podataka sesije (sessionStorage) i lokalnog snimanja. 69 | 70 | ### CSS pitanja: 71 | 72 | * Objasnite čemu služi "reset" CSS i zašto je koristan. 73 | * Opišite šta su i kako rade Float-ovi. 74 | * Koje su tehnike clearing-a i u kojim slučajevima bi ste ih koristili? 75 | * Objasnite CSS sprite-ove i kako se koriste na stranici ili site-u. 76 | * Koje su Vaše omiljene tehnike zamene slike i kada ih koristite? 77 | * Koje su Vaše omiljene tehnike: CSS hack-ovi property-a, kondicionalno uključivanje .css datoteka, ili ... nešto drugo? 78 | * Kako obslužujete sadržaj za browser-e slabijih mogućnosti? 79 | * Koje tehnike/procese koristite? 80 | * Koji su mogući načini za vizualno sakrivanje sadržaja (vidljivi su samo za screen reader-e)? 81 | * Da li ste ikada koristili grid system, i ako jeste koji Vam je omiljeni? 82 | * Da li ste koristili ili implementirali media querie-je ili layout/CSS specifične za mobilne? 83 | * Imate li iskustva u stilizovanju SVG slika? 84 | * Kako prilagođavate stranicu za štampu? 85 | * Šta se podrazumeva pod dobrom praksom za pisanje efikasnog CSS-a? 86 | * Koje su prednosti/nedostatci korišćenja CSS pred-procesora? (SASS, Compass, Stylus, LESS) 87 | * Opišite što vam se sviđa ili ne sviđa kod CSS pred-procesora koje ste koristili. 88 | * Objasnite kako bi ste napravili stranicu čiji dizajn ne koristi standardne fontove? 89 | * Webfont-ovi (font servisi poput: Google Webfonts, Typekit itd.) 90 | * Objasnite kako browser utvrđuje koji elementi odgovaraju CSS selector-u. 91 | * Objasnite Vaše razumevanje "box model"-a i na koji način bi ste naveli browser da prikaže (render) izgled vaše strane? 92 | 93 | ### JavaScript pitanja: 94 | 95 | * Objasnite delegaciju događaja 96 | * Objasnite kako se u Javascriptu koristi `this` 97 | * Objasnite nasleđivanje prototype-a 98 | * Kako testirate JavaScript? 99 | * AMD ili CommonJS? 100 | * Šta je to hash tabela? 101 | * Objasnite zašto sledeća funkcija neće raditi kao IIFE: `function foo(){ }();`? 102 | * Šta treba izmeniti da bi radila kao IIFE? 103 | * U čemu je razlika između `null`, `undefined` i `undeclared`? 104 | * Kako bi ste promenili ova stanja? 105 | * Šta je closure, kako i zašto se koristi? 106 | * Koja je uobičajena primena anonimne funkcije? 107 | * Objasnite "JavaScript module pattern" i kada biste ga koristili. 108 | * Bonus bodovi za predlog namespacing-a 109 | * Šta ako su moduli bez namespacing-a? 110 | * Kako organizujete Vaš kod? (module pattern, klasično nasleđivanje?) 111 | * Koja je razlika između host i native objekta? 112 | * Koja je razlika između `function Person(){}`, `var person = Person()`, i `var person = new Person()`? 113 | * Koja je razlika između `.call` i `.apply`? 114 | * Objasnite `Function.prototype.bind` 115 | * Kada optimizirate Vaš kod? 116 | * Možete li objasniti nasleđivanje u JavaScriptu? 117 | * Kada koristite `document.write()`? 118 | * Većina oglasa još uvijek koristi `document.write()` iako se to ne preporučuje. 119 | * Koja je razlika između detekcije mogućnosti (feature detection), pretpostavljanje mogućnosti (feature inference) i korišćenja UA string-a? 120 | * Objasnite AJAX sa što više detalja 121 | * Objasnite kako radi JSONP (i u čemu se razlikuje od pravog AJAX-a) 122 | * Da li ste ikad koristili JavaScript template? 123 | * Ako da, koje ste koristili? (Mustache.js, Handlebars etc.) 124 | * Objasnite "hoisting". 125 | * Objasnite propagaciju događaja (event bubbling). 126 | * Koja je razlika između "attribute"-a i "property"-a? 127 | * Zašto proširivanje ugrađenih JavaScript objekata nije najbolja ideja? 128 | * Zašto je proširivanje ugrađenih JavaScript objekata dobra ideja? 129 | * Koja je razlika između document load i document ready događaja? 130 | * Koja je razlika između `==` i `===`? 131 | * Objasnite kako bi ste pročitali parametar URL adrese 132 | * Objasnite pravilo jednog izvora gledano sa staništa JavaScript-a. 133 | * Opišite načine nasleđivanja u JavaScript-u. 134 | * Popravite: `[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]` 135 | * Objasnite memoization strategiju (izbegavanje ponavljanja računanja) u Javascript-u. 136 | * Zašto se Ternarni operator zove Ternarni? 137 | * Šta je arity funkcije? 138 | * Šta radi `"use strict";`? Koje su mane, koje prednosti? 139 | 140 | ### jQuery pitanja: 141 | 142 | * Objasnite "chaining". 143 | * Objasnite "deferreds". 144 | * Navedite koje optimizacije korišćenja jQuery-a znate? 145 | * Čemu služi `.end()` ? 146 | * Kada i zašto bi vezani (bound) događaj stavili u namespace? 147 | * Navedite četri vrednosti koje možete poslati jQuery metodu. 148 | * Selektor (string), HTML (string), Callback (funkcija), HTMLElement, object, array, element array, jQuery Object itd. 149 | * Čemu služi red efekata (fx)? 150 | * Koja je razlika između .get()`, `[]`, i `.eq()`? 151 | * Koja je razlika između .bind()`, `.live()`, i `.delegate()`? 152 | * Koja je razlika između `$` i `$.fn`? Ili samo što je `$.fn`. 153 | * Optimirajte selektor: `$(".foo div#bar:eq(0)")` 154 | * Razlika između 'delegate()' i 'live()'? 155 | 156 | ### Kod vežbe: 157 | 158 | 159 | ```javascript 160 | modulo(12, 5) // 2 161 | ``` 162 | *Pitanje: Napišite modulo funkciju koja daje rezultat prikazan iznad* 163 | 164 | 165 | ```javascript 166 | "i'm a lasagna hog".split("").reverse().join(""); 167 | ``` 168 | *Pitanje: Šta će biti vraćeno iz funkcije prikazane iznad?* 169 | 170 | **Odgovor: "goh angasal a m'i"** 171 | 172 | ```javascript 173 | ( window.foo || ( window.foo = "bar" ) ); 174 | ``` 175 | *Pitanje: Koja je vrednost `window.foo`?* 176 | 177 | **Odgovor: "bar"** 178 | 179 | ```javascript 180 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 181 | ``` 182 | *Pitanje: Šta će se desiti kao rezultat 2 alerta iznad?* 183 | 184 | **Odgovor: "Hello World" i ReferenceError: bar is not defined** 185 | 186 | ```javascript 187 | var foo = []; 188 | foo.push(1); 189 | foo.push(2); 190 | ``` 191 | *Pitanje: Koja je vrednost `foo.length`?* 192 | 193 | **Odgovor: `2`** 194 | 195 | ### Zanimljiva pitanja: 196 | 197 | * Šta je najzanimljivije što ste napravili do sad? na čemu ste najponosniji? 198 | * Šta Vam je najinteresantnije u alatima koje koristite za rad? 199 | * Imate li neke hobi projekte? Koje? 200 | * Šta Vam se najviše sviđa kod Internet Explorer? 201 | 202 | ### Dodatni clanci 203 | 204 | * [http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before](http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before) 205 | * [http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/](http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/) 206 | * [http://css-tricks.com/interview-questions-css/](http://css-tricks.com/interview-questions-css/) -------------------------------------------------------------------------------- /Slovakian/README.md: -------------------------------------------------------------------------------- 1 | #Otázky k pohovoru: front-end vývojár 2 | 3 | Tento repozitár obsahuje rad otázok, ktoré môžete položiť pri pohovore kandidátovi na pozíciu front-end vývojár a overiť si tak jeho znalosti v tomto odbore. Nie je zamýšľané položiť všetky tieto otázky (ich korektné zodpovedanie by trvalo hodiny), bohato postačí len určitú časť vyhovujúci vašim potrebám. 4 | 5 | Za prečítanie stojí tiež [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) (anglicky) od [Rebecci Murphey](http://rmurphey.com/). 6 | 7 | **Poznámka:** Majte na pamäti, že tieto otázky majú viesť skôr k diskusii na danú tému a prezradiť tak niečo viac o schopnostiach daného vývojára, než aby boli zodpovedané jedným slovom alebo vetou. 8 | 9 | ## Obsah 10 | 11 | 1. [Pôvodné prispievatelia](#contributors) 12 | 1. [Všeobecné otázky](#general) 13 | 1. [HTML otázky](#html) 14 | 1. [CSS otázky](#css) 15 | 1. [JS otázky](#js) 16 | 1. [jQuery otázky](#jquery) 17 | 1. [Otázky z kódu](#jscode) 18 | 1. [Zábavné otázky](#fun) 19 | 1. [Ďalšie zaujímave referencie](#references) 20 | 21 | ####[[⬆]](#toc) Pôvodný prispievatelia: 22 | 23 | Väčšina otázok bola prevzatá z [oksoclap](http://oksoclap.com/) pôvodne vytvoreného [Paulom Irishom](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) a následne doplnená týmito osobami: 24 | 25 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 26 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 27 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 28 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 29 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 30 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 31 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 32 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 33 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 34 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 35 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 36 | 37 | ####[[⬆]](#toc) Všeobecné otázky: 38 | 39 | * Čo ste sa naučili včera/minulý týždeň nové? 40 | * Čo vás vzrušuje alebo zaujíma na kódovaní? 41 | * Povedzte niečo o vašom obľúbenom vývojovom prostredí (operačný systém, editor, prehliadač, nástroje, ...). 42 | * Opíšte ako postupujete pri vytváraní novej webovej stránky. 43 | * Dokážete vysvetliť rozdiel medzi pozvoľným degradováním (graceful degradation) a postupným vylepšovaním (progressive enhancement)? 44 |   * Body navyše za opis detekcie pokročilej funkcionality 45 | * Vysvetlite pojem "sémantické HTML". 46 | * Ako by ste optimalizovali zdroje (obrázky, JS, CSS, ...) webovej stránky? 47 |   * K dispozícii je celý rad optimalizácií napr.: 48 |     * spájanie súborov 49 |     * minifikácia súborov 50 |     * CDN hosťovanie 51 |     * caching, ... 52 | * Prečo je lepšie posielať zdroje webovej stránky z viacerých domén? 53 |   * Koľko súborov môže z danej domény sťahovať prehliadač naraz? 54 | * Vymenujte tri spôsoby ako znížiť dobu nahrávania webovej stránky (vnímanú alebo skutočnú dobu nahrávania). 55 | * Ak nastúpite do projektu, kde sa namiesto odsadzovania tabulátormi používajú medzery, čo urobíte? 56 |   * Navrhnutie, že projekt by mohol využívať niečo ako EditorConfig (http://editorconfig.org) 57 |   * Prispôsobenie sa konvencii (ale zostať konzistentný). 58 |   * `issue :retab ! command` 59 | * Napíšte jednoduchú stránku so slideshow. 60 |   * Body navyše pokiaľ nepoužíva JS. 61 | * Aké nástroje používate pre testovanie rýchlosti vášho kódu? 62 |   * Profiler, JSPerf, Dromaeo 63 | * Ak by ste sa chcel/chcela tento rok naučiť jednu novú technológiu, ktorá by to bola? 64 | * Vysvetlite dôležitosť štandardov a štandardizačných orgánov. 65 | * Čo to je FOUC? Ako je možné sa vyhnúť FOUC? 66 | 67 | ####[[⬆]](#toc) HTML otázky: 68 | 69 | * Čo robí `doctype`? 70 | * Aký je rozdiel medzi štandardným a tkz. quirks módom? 71 | * Aké sú obmedzenia pri poskytovaní XHTML stránok? 72 |   * Existuje nejaký problém pri poskytovaní stránok ako `application/xhtml+xml`? 73 | * Ako poskytujete stránku s viacjazyčným obsahom? 74 |   * Na čo všetko si musíte dať pozor pri vytváraní viacjazyčnej stránky? 75 | * K čomu sú dobré atribúty `data-`? 76 | * Uvažujte o HTML5 ako o otvorenej platorme. Aké sú základné stavebné kamene HTML5? 77 | * Opíšte rozdiel medzi cookies, sessionStorage a localStorage. 78 | 79 | ####[[⬆]](#toc) CSS otázky: 80 | 81 | * Opíšte čo robí a na čo je dobrý "reset" CSS súbor. 82 | * Opíšte obtekanie (floats) a ako funguje. 83 | * Popíšte rôzne techniky pre zastavenie obtekanie (clear fixing) a povedzte, ktoré sa hodia v ktorom kontexte. 84 | * Vysvetlite, čo to sú CSS sprites a ako by ste ich implementovali. 85 | * Aká je vaša obľúbená technika pre nahrádzanie obrázkov a ktorú a kedy používate? 86 | * CSS property hacks, podmienené vkladanie .css súborov alebo niečo ďalšie? 87 | * Ako poskytujete stránky pre funkcionálne/vlastnosťami obmedzený prehliadač? 88 |   * Akú techniku​/proces používate? 89 | * Aké sú spôsoby pre zneviditeľnie obsahu (a zachovanie jeho dostupnosti pre čítačky)? 90 | * Použili ste niekedy grid systém a ak áno, ktorý uprednostňujete? 91 | * Použili ste niekedy mediálne selektory (media query) alebo špecifický layout/CSS pre mobilné zariadenia? 92 | * Máte nejaké skúsenosti so štýlovaním SVG? 93 | * Ako optimalizujete stránky pre tlač? 94 | * Aké sú zásady pre písanie efektnivního CSS? 95 | * Aké sú výhody/nevýhody použítia CSS preprocesorov (SASS, Compass, Stylus, LESS)? 96 |   * Popíšte, čo sa Vám na CSS preprocesoroch, ktoré ste použili, páči/nepáči. 97 | * Ako by ste implementovali návrh webovej stránky, ktorá používa neštandardné rezy písma? 98 |   * Webfonts (služby typu: Google Webfonts, Typekit, ...) 99 | * Vysvetlite ako prehliadač určuje, ktorý element zodpovedá CSS selektoru. 100 | * Vysvetlite vaše chápanie box modelu a ako poviete pomocou CSS prehliadaču, aby váš layout vykreslil v odlišnom box modele 101 | 102 | 103 | ####[[⬆]](#toc) JS otázky: 104 | 105 | * Vysvetlite delegáciu udalostí. 106 | * Vysvetlite ako funguje `this` v JavaScripte. 107 | * Vysvetlite ako funguje prototypová dedičnosť. 108 | * Ako testujete JavaScript? 109 | * AMD vs. CommonJS? 110 | * Čo je hashovacia tabuľka? 111 | * Vysvetlite prečo nasledujúce volanie nebude fungovať ako IIFE : `function foo(){ }();`. 112 |   * Čo musíte zmeniť, aby volania zafungovalo ako IIFE? 113 | * Vysvetlite rozdiel medzi premennou, ktorá je `null`, `undefined` alebo `undeclared`? 114 |   * Akým spôsobom by ste overili tieto jednotlivé stavy? 115 | * Čo to je "closure" a ako/prečo by sme ich mali používať? 116 | * Aké je typické využitie pre anonymné funkcie? 117 | * Vysvetlite "JavaScript module pattern" a kedy by ste ho mali použiť. 118 |   * Body navyše za zmienku o čistých menných priestoroch. 119 |   * Čo ak sú vaše moduly bez menného priestora? 120 | * Ako organizujete váš kód? (module pattern, klasická dedičnosť?) 121 | * Aký je rozdiel medzi natívnymi a hostiteľskými objektami? 122 | * Rozdiel medzi: 123 | ```javascript 124 | function Person(){} 125 | var person = Person() 126 | var person = new Person() 127 | ``` 128 | * Aký je rozdiel medzi `.call` a `.apply`? 129 | * Aký je rozdiel medzi `undefined` a `null`? 130 | * Vysvetlite `Function.prototype.bind`. 131 | * Kedy optimalizujete váš kód? 132 | * Vysvetlite ako funguje dedičnosť v JavaScripte. 133 | * Kedy by ste použili `document.write()`? 134 |   * Väčšina generovaných reklám stále používa tento prístup aj napriek tomu, že je to dlhodobo odsudzované. 135 | * Aký je rozdiel medzi detekciou vlastností, odvodenie vlastností a použitie UA reťazca? 136 | * Vysvetlite AJAX čo najpodrobnejšie to ide. 137 | * Vysvetlite ako funguje JSONP (a prečo to nie je naozajstný AJAX). 138 | * Použili ste niekedy JavaScriptové šablóny? 139 |   * Ak áno, ktoré knižnice ste použili (mustache.js, Handlebars, ...)? 140 | * Vysvetlite "hoisting". 141 | * Vysvetlite prebublávanie udalostí. 142 | * Aký je rozdiel medzi atribútom (attribute) a vlastnosťou (property)? 143 | * Prečo nie je dobrý nápad rozširovať natívne JavaScriptové objekty? 144 | * Prečo je dobrý nápad rozširovať natívne JavaScriptové objekty? 145 | * Aký je rozdiel medzi udalosťami "document load" a "document ready"? 146 | * Aký je rozdiel medzi `==` a `===`? 147 | * Vysvetlite akým spôsobom získate parameter z URL zadaného v okne prehliadača. 148 | * Vysvetlite JavaScriptové pravidlo rovnakého pôvodu (same-origin policy). 149 | * Opíšte prístupy dedenia v JavaScripte. 150 | * Nasledujúci kód upravte tak, aby fungoval: 151 | ```javascript 152 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 153 | ``` 154 | * Opíšte stratégia pre memorizáciu (odstránenie opakovaných výpočtov) v JavaScripte. 155 | * Prečo sa hovorí ternárny operátor, čo označuje slovo ternárny? 156 | * Čo je označované ako "arita" funkcie? 157 | * Čo znamená `"use strict";`? Aké sú výhody a nevýhody použitia? 158 | 159 | ####[[⬆]](#toc) jQuery otázky: 160 | 161 | * Vysvetlite reťazenie (chaining). 162 | * Vysvetlite odkladanie (deferreds). 163 | * Aké poznáte a viete implementovať optimalizácie špeciálne pre jQuery? 164 | * Čo robí `.end()`? 165 | * Ako a prečo by ste váš "event handler" zaopatrili menným priestorom? 166 | * Vymenujte štyri rôzne typy hodnôt, ktoré môžete odovzdať ako vstupný parameter metód v jQuery. 167 |   * selektor (reťazec), HTML (reťazec), callback (funkcia), HTMLElement, object, polia, polia elementu, jQuery Object, ... 168 | * Čo to je fronta efektov (alebo fx front)? 169 | * Aký je rozdiel medzi `.get()`, `[]` a `.eq()`? 170 | * Aký je rozdiel medzi `.bind()`, `.live()` a `.delegate()`? 171 | * Aký je rozdiel medzi `$` a `$.fn`? Alebo len, čo je `$.fn`? 172 | * Zoptimalizujte tento selektor : 173 | ```javascript 174 | $(".foo div#bar:eq(0)"); 175 | ``` 176 | * Aký je rozdiel medzi `.delegate()` a `.live()`? 177 | 178 | ####[[⬆]](#toc) Otázky z kódu: 179 | 180 | ```javascript 181 | modulo(12, 5) // 2 182 | ``` 183 | *Otázka: Implementujte funkciu modulo tak, aby splnila zadanie.* 184 | 185 | ```javascript 186 | "i'm a lasagna hog".split("").reverse().join(""); 187 | ``` 188 | *Otázka: Akú hodnotu vráti uvedený výraz?* 189 | 190 | **Odpoveď:" goh angasal a m'i"** 191 | 192 | ```javascript 193 | (window.foo || (window.foo = "bar")); 194 | ``` 195 | *Otázka: Akú hodnotu má window.foo?* 196 | 197 | **Odpoveď: "bar"** *(iba ak window.foo bolo false, inak vráti svojou hodnotu)* 198 | 199 | ```javascript 200 | var foo = "Hello"; 201 | 202 | (function() { 203 | var bar = "World"; 204 | alert(foo + bar); 205 | })(); 206 | 207 | alert(foo + bar); 208 | ``` 209 | *Otázka: Čo zobrazia uvedené dva alerty?* 210 | 211 | **Odpoveď: "Hello World" a ReferenceError: bar is not defined** 212 | 213 | ```javascript 214 | var foo = []; 215 | foo.push(1); 216 | foo.push(2); 217 | ``` 218 | *Otázka: Aká je hodnota `foo.length`?* 219 | 220 | **Odpoveď: `2`** 221 | 222 | ####[[⬆]](#toc) Zábavné otázky: 223 | 224 | * Aká je najúžasnejšia vec, ktorú ste kedy nakódovali, alebo na ktorú ste najviac pyšní? 225 | * Aké sú vaše obľúbené časti vývojárskych nástrojov, ktoré používate? 226 | * Máte nejaký vlastný hobby projekt? 227 | * Aká je Vaša obľúbená vlastnosť Internet Exploreru? 228 | 229 | ####[[⬆]](#toc) Ďalšie zaujímave referencie: 230 | 231 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 232 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 233 | * http://css-tricks.com/interview-questions-css/ 234 | -------------------------------------------------------------------------------- /Slovenian/README.md: -------------------------------------------------------------------------------- 1 | #Intervju vprašanja za front-end programerja 2 | 3 | @verzija 1.0 4 | 5 | **Obvestilo:** Ta repositorij vsebuje vrsto front-end vprašanj, ki se lahko uporabijo za preverjanje potencialnih kandidatov. Ni priporočljivo, da se vsa vprašanja uporabijo za vsakega kandidata (to bi trajalo ure). Izberite nekaj vprašanj, ki vam bodo pomagala preveriti kandidata za znanja, ki jih potrebujete. 6 | 7 | Mnogo teh vprašanj je odprtega tipa in lahko pripeljejo do zanimivih diskusij, ki vam bodo o kandidatih sporočili več, kot pa navaden kratek odgovor. 8 | 9 | ####Originalni Avtorji 10 | 11 | **Obvestilo:** večino teh vprašanj je bilo pobranih iz foruma, ustvarjenega in vzdrževanega od nasljednjih ljudi: 12 | 13 | * @bentruyman (http://bentruyman.com) 14 | * @cowboy (http://benalman.com) 15 | * @roger_raymond (http://twitter.com/iansym) 16 | * @ajpiano (http://ajpiano.com) 17 | * @paul_irish (http://paulirish.com) 18 | * @SlexAxton (http://alexsexton.com) 19 | * @boazsender (http://boazsender.com) 20 | * @miketaylr (http://miketaylr.com) 21 | * @vladikoff (http://vladfilippov.com) 22 | * @gf3 (http://gf3.ca) 23 | * @jon_neal (http://twitter.com/jon_neal) 24 | * @wookiehangover (http://wookiehangover.com) 25 | * @darcy_clarke (http://darcyclarke.me) 26 | * @tairraos (http://xiaole.happylive.org) 27 | 28 | ### Splošna vprašanja: 29 | 30 | * Ali uporabljaš Twitter? 31 | * Če ja, katerim osebam slediš? 32 | * Ali uporabljaš GitHub? 33 | * Če ja, katerim repositorijem slediš? 34 | * Katere bloge spremljaš? 35 | * Katere programe za hranjenje verzij si uporabljal/a (Git, SVN, ...)? 36 | * Katero okolje najraje uporabljaš za razvoj? (OS, editor, brskalnik, orodja, …) 37 | * Lahko opišeš tvoj potek dela, ko kreiraš novo spletno stran? 38 | * Lahko opišeš razliko med "progressive enhancement" in "graceful degradation"? 39 | * bonus točke za opis "feature detection"-a 40 | * Razloži pojem "Semantic HTML". 41 | * V katerem brskalniku primarno razvijaš in katera orodja uporabljaš? 42 | * Kako bi optimiziral/a nalaganje spletne strani (s stališča zahtevanih datotek)? 43 | * Iščemo več rešitev, ki med drugimi vklučujejo tudi: 44 | * Združevanje datotek 45 | * Minifikacija datotek 46 | * CDN gostovanje 47 | * Caching 48 | * ... 49 | * Zakaj je bolje statične vsebine servirati z večih domen? 50 | * Koliko različnih datotek bo brskalnik prenesel iz ene domene na enkrat? 51 | * Naštej 3 načine za zmanjšanje "page load time"-a. (dejanski ali zaznavan "load time"). 52 | * Če bi se pridružil/a projektu, kjer uporabljajo "tab"-e, ti pa uporabljaš presledke, kaj bi storil/a? 53 | * Predlog da se uporabi nekaj takega kot je EditorConfig (http://editorconfig.org) 54 | * Se prilagodi 55 | * `issue :retab! command` 56 | * Ustvari preprosto prezentacijsko stran (slide-show). 57 | * Bonus točke, če ne uporablja JS. 58 | * Katera orodja uporabljaš za testiranje performančnosti kode? 59 | * JSPerf (http://jsperf.com/) 60 | * Dromaeo (http://dromaeo.com/) 61 | * ... 62 | * Če bi to leto lahko popolnoma osvojil/a novo tehnologijo, katera bi to bila? 63 | * Razloži pomembnost standardov in organov za nadzorovanje standardov. 64 | * Kaj je FOUC? Kako se izogneš FOUC-u? 65 | 66 | ### HTML vprašanja: 67 | 68 | * Kaj naredi `doctype` in koliko različtih lahko našteješ? 69 | * Kaj je razlika med "standards mode" in "quirks mode"? 70 | * Kaj so omejitve pri serviranju XHTML strani? 71 | * Ali so kakšni problemi pri servviranju strani z `application/xhtml+xml`? 72 | * Kako serviraš stran z vsebino v večih jezikih? 73 | * Na katere stvari moraš paziti ko dizajniraš ali programiraš večjezično stran? 74 | * Ali lahko uporabljaš XHTML sintakso v HTML5? 75 | * Kako uporabljaš XML v HTML5? 76 | * Zakaj lahko uporabimo `data-` atribute? 77 | * Kaj so "content models" v HTML4 in ali so različni v HTML5? 78 | * Predpostavi da je HTML5 odprta spletna platforma. Kaj so gradniki HTML5? 79 | * Opiši razliko med "cookies", "sessionStorage" in "localStorage". 80 | 81 | ### JavaScript vprašanja: 82 | 83 | * Katere JavaScript knjižnice si že uporabljal/a? 84 | * Si kdaj gledal/a izvorno kodo knjižnic/ogrodij, ki si jih uporabljal/a? 85 | * Razlika med Java in JavaScript? 86 | * Kaj je "hashtable"? 87 | * Kaj sta `undefined` in `undeclared` spremenljivki? 88 | * Kaj je "closure", in zakaj/kako bi jo uporabil/a? 89 | * Tipičen primer uporabe anonimnih funkcij? 90 | * Razloži "JavaScript module pattern" in kdaj bi ga uporabil/a. 91 | * Bonus točke če omeni "clean namespacing". 92 | * Kako organiziraš svojo kodo? (module pattern, classical inheritance?) 93 | * Razlika med "host object" in "native object"? 94 | * Razlika med: 95 | ```javascript 96 | function Person(){} var person = Person() var person = new Person() 97 | ``` 98 | * Razlika med `.call` in `.apply`? 99 | * Razloži `Function.prototype.bind`? 100 | * Kdaj optimiziraš kodo? 101 | * Ali lahko razložiš dedovanje v JavaScript-u? 102 | * Kdaj bi uporabil/a `document.write()`? 103 | * Razlika med zaznavanjem funkcionalnosti, sklepanjem o funkcionalnosti in uporabljanjem UA niza. 104 | * Razloži AJAX s čim več detajli. 105 | * Razloži kako deluje JSONP (in zakaj to ni res AJAX). 106 | * Si že kdaj uporabil/a JavaScript "templates"-e? 107 | * Če ja, katere knjižnice si uporabil/a? (Mustache.js, Handlebars etc.) 108 | * Razloži "hoisting". 109 | * Opiši "event bubbling". 110 | * Razlika med "attribute" in "property"? 111 | * Zakaj je razširjanje vgrajenih JS objektov slaba ideja? 112 | * Zakaj je razširjanje vgrajenih JS objektov dobra ideja? 113 | * Razlika med "document load" in "document ready"? 114 | * Razlika med `==` in `===`? 115 | * Kako bi dobil URL GET parameter? 116 | * Razloži "same-origin policy". 117 | * Razloži "event delegation". 118 | * Razloži različne načine doseganja dedovanja. 119 | * Napiši kodo za "duplicator()" funkcijo: 120 | ```javascript 121 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 122 | ``` 123 | * Opiši strategijo za pomnenje (izogibanje ponovnemu računanju). 124 | * Od kod ime "Ternary statement", kaj označuje beseda "Ternary"? 125 | * Kaj je "arity" funkcije? 126 | * Kaj je `"use strict";`? Prednosti/slabosti? 127 | 128 | ### JavaScript koda primeri: 129 | 130 | ```javascript 131 | ~~3.14 132 | ``` 133 | Vprašanje: Kaj je vrednost zgornjega stavka? 134 | **Odgovor: 3** 135 | 136 | ```javascript 137 | "i'm a lasagna hog".split("").reverse().join(""); 138 | ``` 139 | Vprašanje: Kaj je vrednost zgornjega stavka? 140 | **Odgovor: "goh angasal a m'i"** 141 | 142 | ```javascript 143 | ( window.foo || ( window.foo = "bar" ) ); 144 | ``` 145 | Vprašanje: Kaj je vrednost window.foo? 146 | **Odgovor: "bar"** 147 | samo če je bil window.foo "lažen", drugače bo ohranil svojo vrednost. 148 | 149 | ```javascript 150 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 151 | ``` 152 | Vprašanje: Kaj je rezultat zgornjih dveh alert-ov? 153 | **Odgovor: "Hello World" & ReferenceError: bar is not defined** 154 | 155 | ```javascript 156 | var foo = []; 157 | foo.push(1); 158 | foo.push(2); 159 | ``` 160 | Vprašanje: Kaj je vrednost od foo.length? 161 | **Odgovor: `2` 162 | 163 | ```javascript 164 | var foo = {}; 165 | foo.bar = 'hello'; 166 | ``` 167 | Vprašanje: Kaj je vrednost od foo.length? 168 | **Answer: `undefined` 169 | 170 | ```javascript 171 | foo = foo||bar 172 | ``` 173 | Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek? 174 | *Odgovor: if(!foo) foo = bar 175 | 176 | ```javascript 177 | foo>>1 178 | ``` 179 | Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek? 180 | **Odgovor: Math.floor(foo/2) 181 | 182 | ```javascript 183 | foo|0 184 | foo+.5|0 185 | ``` 186 | Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek? 187 | **Odgovor: parseInt(foo) & Math.round(foo) 188 | 189 | ```javascript 190 | function foo(bar1, bar2, bar3){} 191 | ``` 192 | Vprašanje: Kako dobiti število paremetrov podanih v funkcijo? 193 | **Odgovor: foo.length // 3 za ta primer 194 | 195 | 196 | ### jQuery vprašanja: 197 | 198 | * Razloži "chaining". 199 | * Razloži "deferreds". 200 | * Naštej nekaj, za jQuery specifičnih, optimizacij. 201 | * Kaj naredi `.end()`? 202 | * Kako, in zakaj, bi uporabil/a "namespace"-e za "event handler"-je? 203 | * Naštej 4 različne vrednosti, ki jih lahko podaš jQuery funkciji. 204 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object, ... 205 | * Kaj je "effects" vrsta (oz. fx)? 206 | * Razlika med `.get()`, `[]`, in `.eq()`? 207 | * Razlika med `.bind()`, `.live()`, in `.delegate()`? 208 | * Razlika med `$` in `$.fn`? Oz. kaj je `$.fn`? 209 | * Optimiziraj naslednji selektor: 210 | ```javascript 211 | $(".foo div#bar:eq(0)") 212 | ``` 213 | * Razlika med 'delegate()' in 'live()'? 214 | 215 | 216 | ### CSS vprašanja: 217 | 218 | * Opiši namen CSS "reset" datoteke in zakaj je uporabna. 219 | * Opiši "float"-e in kako delujejo. 220 | * Opiši različne "clearing" tehnike. 221 | * Razloži CSS "sprite"-e in kako bi jih implementiral/a. 222 | * Tvoje najljubše tehnike za zamenjavo slik? 223 | * CSS hacki, pogojno vključene .css datoteke ali kaj drugega? 224 | * Kako serviraš strani brskalnikom ki imajo omejen nabor funkcionalnosti? 225 | * Katere tehnike/procese uporabljaš? 226 | * Na katere načine lahko vizualno skriješ vsebino (tako da je navoljo samo "screen reader"-jem)? 227 | * Si že kdaj uporabil/a "grid" sistem. Če ja, kateri ti je najljubši? 228 | * Si že implementiral/a "media queries" ali za mobilnike specifičen HTML/CSS? 229 | * Imaš kaj izkušenj s CSSjem v navezi s SVGjem? 230 | * Kako optimizeraš strani za tiskanje? 231 | * Naštej nekaj pasti pri pisanju efektivnega CSSja. 232 | * Ali uporabljaš CSS pred-procesor (sass, compass, Stylus, LESS)? 233 | * Če ja, opiši kaj ti je/ni všeč. 234 | * Kako bi implementiral/a spletno stran, ki uporablja nestandardno tipografijo? 235 | * Webfonts (google webfonts, typekit, …) 236 | * Razloži kako brskalnik ugotovi kateri element pripada kateremu CSS selektorju. 237 | 238 | ### Opcijska zabavna vprašanja: 239 | 240 | * Kaj je najbolj "cool" stvar, ki si jo sprogramiral/a? Na kaj si najbolj ponosen/a? 241 | * Poznaš znak (logo) za HTML5? 242 | * Ali si trenutno, oz. si kdaj bil/a, na ladji? 243 | * Najljubše stvari tvojih razvojnih orodij? 244 | * Imaš kak zasebni projekt? Kakšen? 245 | * Razloži pomembnost "cornify". 246 | * Na list papirja napiši vertikalno črke A B C D E . Sedaj pa jih postavi v spuščajoči vrstni red, brez da napišeš vrstico kode. 247 | * Počakaj če bo obrnil/a list papirja na glavo 248 | * Pirat ali Ninja? 249 | * Bonus točke če je kombiniran/a in je dal/a dober razlog (+2 za zombi opica pirat ninja) 250 | * Če nebi bil/a web-developer, kaj bi počel/a? 251 | * Najljubša lastnost Internet Explorerja? 252 | * Dokončaj naslednji stavek: Brendan Eich in Doug Crockford sta __________ javascript-a. 253 | * jQuery: dobra ali najboljša knjižnica? Debata. 254 | * http://www.w3schools.com/ ali http://w3fools.com/ 255 | -------------------------------------------------------------------------------- /Turkish/README_TR.md: -------------------------------------------------------------------------------- 1 | #Ön Yüz Yazılımcısı -Front-end Developer- Mülakat Soruları 2 | 3 | Burada ön yüz yazılım -ya da front-end- iş başvurularınızda karşınıza çıkabilecek sorular yer almaktadır. Her sorunun iş başvurularınızda karşınıza çıkması garanti değil ancak ihtimali var. Ayrıca buradaki sorular sadece iş başvurusu yapanlar için değil, bu branşta kendini geliştirmeyi düşünenler için de kaynak niteliğindedir. 4 | 5 | [Rebecca Murphey](http://rmurphey.com/)'in [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) adlı İngilizce makalesinin de okunması tavsiye edilmektedir. 6 | 7 | ## İçindekiler 8 | 9 | 1. [Katkıda Bulunanlar](#contributors) 10 | 1. [Genel Sorular](#general) 11 | 1. [HTML Soruları](#html) 12 | 1. [CSS Soruları](#css) 13 | 1. [JS Soruları](#js) 14 | 1. [jQuery Soruları](#jquery) 15 | 1. [Kodlama Becerisi Soruları](#jscode) 16 | 1. [Eğlence Soruları](#fun) 17 | 18 | ####[[⬆]](#toc) Katkıda Bulunanlar: 19 | 20 | Söz konusu aşağıdaki sorular [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) önderliğinde ve aşağıdaki katkıda bulunanlar tarafından oluşturulmuştur: 21 | 22 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 23 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 24 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 25 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 26 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 27 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 28 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 29 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 30 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 31 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 32 | * [@iansym](http://twitter.com/iansym) - http://twitter.com/iansym 33 | 34 | ####[[⬆]](#toc) Genel Sorular: 35 | 36 | * Dün -ya da bu hafta- neler öğrendin? 37 | * Kod yazmanda seni cezbeden şey ne? Neden yazılım? 38 | * Website yada web application hazırlarken UI, güvenlik, performans, SEO, sürdürülebilirlik veya teknoloji için nelere dikkat edersin? 39 | * Bize biraz geliştirme ortamından bahset. -İşletim Sistemi, Web Tarayıcı, Araçlar, Kod Editörü/IDE, vb.- 40 | * Web sayfasını oluştururken hangi adımları takip edersin? 41 | * "Aşamalı geliştirme (progressive enhancement)" ile "kontrollü azalma (graceful degradation)" arasında ne fark vardır? 42 | * Bahsedilen doğru özellikler için artı puan 43 | * "Semantic HTML" ne demektir, açıklayabilir misin? 44 | * Web sitesindeki dosyaları nasıl optimize edersin? 45 | * Beklenilen çözüm konuları: 46 | * Dosya birleştirme 47 | * Dosya boyut küçültme 48 | * CDN kullanımı 49 | * Caching 50 | * vb. 51 | * Sitedeki JS/CSS gibi statik dosyaları birden fazla alanadı altında barındırmanın avantajları nelerdir? 52 | * Belli bir zamanda, tek bir alanadı üzerinden web tarayıcısı ne kadar kaynak indirebilir? 53 | * Sayfa yüklenme süresini azaltmak için 3 yöntem belirt. 54 | * Yeni dahil olduğunuz bir projede, kodlama için `Tab` boşluk kullanılıyor ama siz `Space` ile boşluk bırakmayı tercih ediyorsunuz. Bu durumda ne yaparsınız? 55 | * EditorConfig (http://editorconfig.org) vb. kod yazım standardını kolaylaştıran araçlar 56 | * Yazılan koda uymak (Kod tutarlılığı) 57 | * `issue :retab! command` 58 | * Basit bir slayt/galeri sayfası oluşturun 59 | * JS kodu kullanılmaması halinde artı puan. 60 | * Kod performansınızı ölçmek için hangi araçları kullanıyorsun? 61 | * Profiler, JSPerf, Dromaeo 62 | * Eğer bu yıl bir teknolojide en iyi olmak isteseydin, hangisini seçerdin? 63 | * Yazılım standartlarının öneminden bahset 64 | * FOUC nedir? FOUC'a nasıl engel olabilirsin? 65 | * Web adresinin ilk adres girilirken sayfanın tam olarak yüklenmesine kadar ki işlemleri açıklayabilir misin? 66 | 67 | ####[[⬆]](#toc) HTML Soruları: 68 | 69 | * `doctype`ın işlevi nedir? 70 | * "standards mod" ile "quirks mod" arasındaki fark nedir? 71 | * XHTML sayfalarının ne gibi sınırlamaları vardır? 72 | * Sayfaların `application/xhtml+xml` olarak çalıştırılmasında herhangi bir sakınca var mıdır? 73 | * Sayfa içeriği çoklu dil olan siteyi nasıl sunabilirsin? 74 | * Çoklu dil olan sayfalarda tasarım veya kodlama olarak nelerden kaçılmalısın? 75 | * `data-` özelliği ne faydalar sağlar? 76 | * HTML5'i 'open web platform' olarak düşün. HTML5'in yapı taşları/temelleri nelerdir? 77 | * Cookie, sessionStorage ve localStorage farklılıkları nelerdir? 78 | * GET ve POST arasındaki farklılık nedir? 79 | 80 | ####[[⬆]](#toc) CSS Soruları: 81 | 82 | * 'Reset' css dosyasının ne olduğunu ve neden kullanışlı olduğunu anlatın. 83 | * 'Floats' özelliğinin ne olduğunu ve nasıl çalıştığından bahsedin. 84 | * Çeşitli 'clearing' teknikleri nelerdir? and Hangi teknik hangi içerik için uygundur? 85 | * CSS Sprites özelliğini ve sayfanıza veya web app'inize nasıl entegre edeceğinizi anlatın. 86 | * En favori imaj yerini değiştirme (image replacement) tekniği sizce hangisidir ve ne gibi durumlarda kullanırsınız? 87 | * CSS özelliklerini 'hack'leme, Duruma bağlı css dosyaları yükleme veya ....herhangi farklı birşey? 88 | * Bazı özellikleri zorlayıcı tarayıcılarda sayfalarınızı nasıl hazırlarsınız? 89 | * Hangi teknikleri/işlemleri kullanırsınız? 90 | * İçerikleri görsel olarak gizlemek hangi yollar bulunmakta? (ve içerik sadece ekran okuyucular (screen readers) için gözükecek) 91 | * Şimdiye kadar grid sistemi kullandınız mı? Eğer kullandıysanız, ne tercih edersiniz? 92 | * Şimdiye kadar 'media queries' veya mobil bazlı CSS/tasarım kullanıdınız mı? 93 | * SVG stillendirme hakkında deneyiminiz var mı? 94 | * Yazdırmak için (print) sitenizi ne şekilde en uygun hale getirdiniz? 95 | * Kaliteli CSS yazmak için 'işte bu!' dediğiniz şeyler nelerdir? 96 | * CSS 'preprocessor'ler kullanmanın artı-eksileri nelerdir? (SASS, Compass, Stylus, LESS) 97 | * Şimdiye kadar kullandıklarınızda en çok beğendiğiniz/beğenmediğiniz özellikler nelerdi? 98 | * Standart fontları kullanmayan web tasarımlarını nasıl sayfanıze entegre ediyorsunuz? 99 | * Webfontlar (Örnek font servisleri: Google Webfonts, Typekit, vb.) 100 | * Tarayıcılar html elementlerin CSS seçicilerle (selector) eşleştiğini nasıl algılıyor? 101 | * 'box model' konusunu bildiğiniz kadar açıklayın. Ve Tasarımınızı farklı bir 'box model' ile göstermek istediğinizde CSS tarafında tarayıcıya ne belirtmeniz gerekir? 102 | * 'Display' özelliğinin aldığı değerleri hatırladığınız kadar sayın. 103 | * 'Inline' ile 'Inline-block' arasındaki farklılıklar nelerdir? 104 | * 'Relative', 'Fixed', 'Absolute' ve 'Static' konumlandırılmış elementlerin farkı nedir? 105 | 106 | ####[[⬆]](#toc) JS Soruları: 107 | 108 | * 'Event delegation' özelliğini anlatın. 109 | * JavaScript'te `this` nasıl çalışıyor? 110 | * 'prototypal inheritance' nasıl çalışır? 111 | * Javascript kodunuzu nasıl test ediyorsunuz? 112 | * AMD ile CommonJS'in farkı nelerdir? 113 | * 'hashtable' nedir? 114 | * IIFE olarak neden bu fonksiyonun çalışmadığını açıklayın: `function foo(){ }();`. 115 | * IIFE olarak çalışması için ne yapmak gerekiyor? 116 | * `null`, `undefined` ve `undeclared` arasında ne farklar var? 117 | * Bu değerleri kontrol ederken neler yapmalıyız? 118 | * 'Closure' nedir, ve Nasıl/Neden kullanırız? 119 | * Anonim fonksiyonları kullanma durumları nelerdir? 120 | * 'JavaScript module pattern' nedir? ve ne zaman kullanmalıyız? 121 | * Kaliteli şekilde 'Namespace'a anlatımı için bonus puan 122 | * Peki modüllerin 'namespace'i yoksa? 123 | * Kodunuzu nasıl organize edersiniz? (module pattern, classical inheritance?) 124 | * host objects ve native objects arasında ne fark var? 125 | * Aşağıdaki kodun birbirinden farkını belirtin: 126 | ```javascript 127 | function Person(){} var person = Person() var person = new Person() 128 | ``` 129 | * `.call` ve `.apply` arasındaki fark nedir? 130 | * `undefined` ve `null` arasındaki fark nedir? 131 | * `Function.prototype.bind` özelliğinin ne olduğunu açıklayınız. 132 | * Kodunuzu ne zaman optimize edersiniz? 133 | * Javascriptte 'inheritance' nasıl çalışmaktadır? 134 | * `document.write()` fonksiyonunu ne zaman kullanmalıyız? 135 | * Çoğu oluşturulan reklam (ads) hala `document.write()` kullanmaktadır. 136 | * 'Feature detection', 'feature inference', ve 'UA string' kullanımı arasında farklar nelerdir? 137 | * AJAX'ı olabildiğince detaylı şekilde açıklayın. 138 | * JSONP nasıl çalışır? (ve neden tam olarak AJAX olmadığını) 139 | * JavaScript 'template' yapısını hiç kullandınız mı? 140 | * Eğer kullandıysanız, Hangi 'library'leri kullandınız? (Mustache.js, Handlebars, vb.) 141 | * "Hoisting" özelliğini açıklayın. 142 | * 'Event bubbling' özelliğini açıklayın. 143 | * "Attribute" ve "property" arasındaki farklar nelerdir? 144 | * JavaScript objeleri genişletmek neden iyi fikir değildir? 145 | * Yerleşik yapıları genişletmek neden iyi fikirdir? 146 | * 'document load' event ile 'document ready' event ne fark var? 147 | * `==` ve `===` arasında ne fark var? 148 | * Sayfa URL'inden querystring parametrelerini nasıl alabileceğinizi açıklayın. 149 | * Javascript için 'same-origin policy' konusunu açıklayın. 150 | * Javascript'teki 'inheritance patterns' özelliğini açıklayın. 151 | * Çalışacak şekilde kodu yazın: 152 | ```javascript 153 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 154 | ``` 155 | * Javascript'te 'memoization (Hesaplama tekrarlarından kaçınma - avoiding calculation repetition)' için stratejiniz nedir? 156 | * Neden 'Ternary expression' olarak çağrılmaktadır? "Ternary" kelimesi ne belirtmektedir? 157 | * Fonksiyonlarda kullanılan 'arity' nedir? 158 | * `"use strict";` nedir? Bunu kullanmanın artı/eksileri nelerdir? 159 | 160 | ####[[⬆]](#toc) jQuery Soruları: 161 | 162 | * "chaining" özelliğini açıklayın. 163 | * "deferreds" özelliğini açıklayın. 164 | * Kullandığınız Jquery bazlı optimizasyonlar nelerdir? 165 | * `.end()` fonksiyonu ne yapmaktadır? 166 | * Nasıl, ve neden, birbine bağlı 'event' 'handler'lar için 'namespace' kullanmalıyız? 167 | * Jquery metodlarında izin verilen 4 farklı değer söyleyin. 168 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object, vb. 169 | * Efekt (veya fx) sırası 'queue' nedir? 170 | * `.get()`, `[]`, ve `.eq()` arasında ne farklılıklar var? 171 | * `.bind()`, `.live()`, ve `.delegate()` arasında ne farklılıklar var? 172 | * `$` ve `$.fn` arasında ne farklılıklar var? Veya sadece `$.fn` nedir? 173 | * Bu 'selector'ü optimize edin: 174 | ```javascript 175 | $(".foo div#bar:eq(0)") 176 | ``` 177 | * 'delegate()' ve 'live()' arasındaki farklılıklar nelerdir? 178 | 179 | ####[[⬆]](#toc) Kodlama Becerisi Soruları: 180 | 181 | ```javascript 182 | ~~3.14 183 | ``` 184 | Soru: Yukarıdaki ifadeden dönen sonuç nedir? 185 | **Cevap: 3** 186 | 187 | ```javascript 188 | "i'm a lasagna hog".split("").reverse().join(""); 189 | ``` 190 | Soru: Yukarıdaki ifadeden dönen sonuç nedir? 191 | **Cevap: "goh angasal a m'i"** 192 | 193 | ```javascript 194 | ( window.foo || ( window.foo = "bar" ) ); 195 | ``` 196 | Soru: `window.foo`nun değeri nedir? 197 | **Cevap: "bar"** 198 | `window.foo`nun değeri 'false' olmadıkça kendi değerini döndürür. 199 | 200 | ```javascript 201 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 202 | ``` 203 | Soru: Yukarıdaki iki uyarının -`alert`- çıktısı nedir? 204 | **Cevap: "Hello World" & ReferenceError: bar is not defined** 205 | 206 | ```javascript 207 | var foo = []; 208 | foo.push(1); 209 | foo.push(2); 210 | ``` 211 | Soru: `foo.length`in değeri kaçtır? 212 | **Cevap: `2` 213 | 214 | ```javascript 215 | var foo = {}; 216 | foo.bar = 'hello'; 217 | ``` 218 | Soru: `foo.length`in değeri kaçtır? 219 | **Cevap: `undefined` 220 | 221 | ####[[⬆]](#toc) Eğlenceli Sorular: 222 | 223 | * Şimdiye kadar kodlarken en çok gurur duyduğun/eğlendiğin şey neydi? 224 | * Kullandığınız geliştirici araçları arasında, sevdikleriniz nelerdir? 225 | * Kendin için herhangi bir konuda önemli olan bir projede çalıştın mı? Ne tarz? 226 | * Internet Explorer'ın sevdiğiniz özellikleri nelerdir? 227 | 228 | 229 | ####[[⬆]](#toc) Diğer Önemli Referanslar: (İngilizce) 230 | 231 | * http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before 232 | * http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/ 233 | * http://css-tricks.com/interview-questions-css/ 234 | * http://davidshariff.com/quiz/ 235 | * http://blog.sourcing.io/interview-questions 236 | --------------------------------------------------------------------------------