├── Chinese-Tranditional └── README.md ├── Chinese └── README.md ├── Croatian └── README.md ├── Danish └── README.md ├── Dutch └── README.md ├── French └── README_FR.md ├── German └── README.md ├── Hungarian └── README.md ├── Italian └── README_IT.md ├── Korean ├── README_KR.md └── Reference_KR.md ├── Polish └── README_PL.md ├── Portuguese └── README.md ├── README.md ├── Russian └── README_RU.md ├── Slovenian └── README.md ├── Spanish └── README_ES.md └── Swedish └── README.md /Chinese-Tranditional/README.md: -------------------------------------------------------------------------------- 1 | # 前端工程師面試問題集 2 | 3 | @版本 2.0.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 | 多數的問題都是從 [oksoclap](http://oksoclap.com/) 上的一個討論串截取出來，原創作人為 [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) 並由以下的人員所貢獻： 16 | 17 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 18 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 19 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 20 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 21 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 22 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 23 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 24 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 25 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 26 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 27 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 28 | * [@iansym](http://twitter.com/iansym) 29 | 30 | ### 常見問題： 31 | 32 | * 你昨天或這週學習了什麼？ 33 | * 寫程式的哪部份最讓你感到很興奮或是有興趣？ 34 | * 說說你喜好的開發環境 (作業系統, 編輯器, 瀏覽器, 開發工具 … 之類) 35 | * 你可以描述你在開發一個網站時的工作流程嗎？ 36 | * 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎？ 37 | * 加分題：描述這兩項的特色？ 38 | * 描述什麼是"Semantic HTML"？ 39 | * 你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)？ 40 | * 可能的解決方法包含如下： 41 | * File concatenation (檔案合併) 42 | * File minification (最小化文檔) 43 | * CDN Hosted (CDN託管) 44 | * Caching (快取) 45 | * …之類 46 | * 為什麼用多個域名來放置網站資源會比較好？ 47 | * 瀏覽器一次能在同一個域名下載多少資源？ 48 | * 說出三種能加快網頁讀取速度的方法？ (感覺上的速度或是真正的讀取時間) 49 | * 如果你加入了一個專案，但是他們的程式碼用tabs，但是你習慣用spaces (空白鍵)，你會怎麼做？ 50 | * 建議此專案使用，例如：EditorConfig (http://editorconfig.org) 51 | * 訂定一個公約 (保持一致) 52 | * `issue :retab! command` (retab! 在vim中用來把所有spaces換成tabs) 53 | * 寫一個簡易的投影片頁面 54 | * 加分如果沒有用到 JavaScript 55 | * 你用什麼工具來測試你的程式碼效能？ 56 | * Profiler, [JSPerf](http://jsperf.com/), [Dromaeo](http://dromaeo.com/) 57 | * 如果今年你能精通一項技術，那會是什麼？ 58 | * 描述標準和製定標準機構的重要性？ 59 | * 什麼是 FOUC？ 你怎麼避免 FOUC? 60 | 61 | ### HTML 規格問題集: 62 | 63 | * `doctype` 做什麼用的？ 64 | * standards mode 和 quirks mode 有什麼不同？ 65 | * 使用 XHTML 有什麼限制？? 66 | * 如果網頁使用 `application/xhtml+xml` 會有問題嗎？ 67 | * 你怎麼做一個需要支持多國語言的網頁？ 68 | * 當開發和設計一個多國語言網站時，有什麼需要小心的？ 69 | * `data-` 屬性的好處在哪？ 70 | * 考慮 HTML5 作為一個開放式的網站平台。HTML5 的 building blocks 有哪些？ 71 | * 請描述 cookies, sessionStorage 和 localStorage 的不同？ 72 | 73 | ### JS 規格問題集 74 | 75 | * 描述 event delegation 76 | * 描述 `this` 如果運作在 JavaScript 中 77 | * 描述 prototypal inheritance 如何運作？ 78 | * 你如何測試你的 JavaScript？ 79 | * AMD vs. CommonJS? 80 | * 什麼是 hashtable? 81 | * 什麼是 `undefined` 和 `undeclared` 變數？ 82 | * 什麼是 closure, 如何/為什麼使用? 83 | * 你最喜愛並習慣用的 pattern 是怎樣的? argyle (Only applicable to IIFEs) 84 | * anonymous functions 典型的使用時機？ 85 | * 描述 "JavaScript module pattern"，你什麼情況會用到？ 86 | * 加分題：清楚地提到 namespacing. 87 | * 如果你的 module 沒有命名空間怎辦？ 88 | * 你如何架構你的程式碼？ (module pattern, classical inheritance?) 89 | * host objects 和 native objects 有何不同？ 90 | * 有何不同: 91 | ```javascript 92 | function Person(){} var person = Person() var person = new Person() 93 | ``` 94 | * `.call` 和 `.apply` 有何不同？ 95 | * 描述 `Function.prototype.bind`? 96 | * 你什麼時候優化你的程式？ 97 | * 你可以描述 inheritance 如何運作在 JavaScript？ 98 | * 你什麼情況會使用 `document.write()`？ 99 | * 多數的廣告產生仍然使用 `document.write()` 雖然這樣用會令人皺眉 100 | * feature detection, feature inference, 和使用 UA string 有什麼不同？ 101 | * 盡可能的詳述描述 AJAX 102 | * 描述 JSONP 如何運作 (且為何它不是真正的 AJAX) 103 | * 你是用過 JavaScript templating (樣板) ？ 104 | * 如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等) 105 | * 描述 "hoisting" 106 | * 描述 event bubbling. 107 | * "attribute" 和 "property" 的不同？ 108 | * 為什麼擴展 JavaScript 內建的 objects 不是個好方法？ 109 | * 為什麼擴展 JavaScript 插件是個好方法？ 110 | * document load event 和 document ready event 有什麼不同？ 111 | * `==` 和 `===` 有什麼不同？ 112 | * 描述你如何取得一個 query string 的 parameter 從瀏覽器的網址列。 113 | * 描述 JavaScript 的 same-origin policy (同源策略) 114 | * 描述 JavaScript 的 inheritance patterns (繼承模式) 115 | * 實作如下程式: 116 | ```javascript 117 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 118 | ``` 119 | * 描述一個 memoization (避免重複運算) 的策略 在 JavaScript 中 120 | * Ternary expression 怎麼來的, "Ternary" 的意思是什麼？ 121 | * function 的 arity 是什麼？ 122 | * 什麼是 `"use strict";`? 使用他的優點和缺點是什麼？ 123 | 124 | ### JS 程式範例： 125 | 126 | ```javascript 127 | ~~3.14 128 | ``` 129 | 問: 上述的statement(陳述式)會回傳什麼？ 130 | **答: 3** 131 | 132 | ```javascript 133 | "i'm a lasagna hog".split("").reverse().join(""); 134 | ``` 135 | 問: 上述的statement(陳述式)會回傳什麼？ 136 | **答: "goh angasal a m'i"** 137 | 138 | ```javascript 139 | ( window.foo || ( window.foo = "bar" ) ); 140 | ``` 141 | 問: window.foo 的值是什麼？ 142 | **答: "bar"** 143 | 只有在 window.foo 是 falsey 時會回傳此答案，否則的話會回傳window.foo 144 | 145 | ```javascript 146 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 147 | ``` 148 | 問: 上述的兩個alerts的結果會是什麼？ 149 | **答: "Hello World" & ReferenceError: bar is not defined** 150 | 151 | ```javascript 152 | var foo = []; 153 | foo.push(1); 154 | foo.push(2); 155 | ``` 156 | 157 | 問: foo.length 的值是什麼？ 158 | **答： `2` 159 | 160 | ```javascript 161 | var foo = {}; 162 | foo.bar = 'hello'; 163 | ``` 164 | 問: foo.length 的值是什麼？ 165 | **答： `undefined` 166 | 167 | ### jQuery 規格問題集： 168 | 169 | * 描述 "chaining" 170 | * 描述 "deferreds" 171 | * 你知道哪些實作 jQuery 的優化方式？ 172 | * `.end()` 做些什麼？ 173 | * 如何給一個綁定的 event handler 命名空間？為什麼這樣做？ 174 | * 說出四種可以傳到 jQuery 方法的值 175 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object … 等。 176 | * 什麼是 effects (or fx) queue? 177 | * `.get()`, `[]`, 和 `.eq()` 有何不同？ 178 | * `.bind()`, `.live()`, 和 `.delegate()` 有何不同？ 179 | * `$` 和 `$.fn` 有何不同？ 或什麼是 `$.fn`？ 180 | * 優化這個 selector: 181 | ```javascript 182 | $(".foo div#bar:eq(0)") 183 | ``` 184 | * 'delegate()' 和 'live()' 有何不同？ 185 | 186 | 187 | ### CSS 規格問題集： 188 | 189 | * 描述 "reset" 在 CSS 中做什麼, 如何用？ 190 | * 描述 Floats 並解釋如何運作 191 | * 有哪些不同的 clearing 技術？哪個適用在哪種內容上？ 192 | * 描述 CSS sprites, 你如何實作在網頁或網站上？ 193 | * 你最喜愛的圖片取代技術是什麼？你什麼時候會用到？ 194 | * CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的？ 195 | * 你怎麼讓你的網頁支援有功能限制的瀏覽器？ 196 | * 你會使用什麼樣的技術/流程 ？ 197 | * 有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？ 198 | * 你使用過 grid system 嗎？如果有的話？你較推薦哪個？ 199 | * 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS? 200 | * 你熟悉任何有關 SVG 嗎？ 201 | * 你如何優化你的網頁以利於列印？ 202 | * 在寫高效的 CSS 時，有什麼要注意的？ 203 | * 使用 CSS preprocessors 的優點和缺點是什麼？ (SASS, Compass, Stylus, LESS) 204 | * 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors 205 | * 你如何使用非標準字體來實作網頁設計？ 206 | * Webfonts (font services 像是: Google Webfonts, Typekit …等等) 207 | * 姐是瀏覽器如何按照 CSS selector 找到對應的element？ 208 | 209 | ### 可選的有趣問題： 210 | 211 | * 你寫過最酷的程式是什麼？你最自豪的是什麼？ 212 | * 你使用的開發工具中，你最喜歡的部分是什麼？ 213 | * 你有任何的 pet projects (個人開發的小專案)？ 什麼樣的？ 214 | * 你最喜歡 IE 瀏覽器的什麼特點？ 215 | -------------------------------------------------------------------------------- /Chinese/README.md: -------------------------------------------------------------------------------- 1 | #前端工程师面试问题 2 | 3 | @版本 1.0 4 | 5 | **备注:** 本repo包含了一些前端面试问题用于考查候选者。不建议对单个候选者问及每个问题（那需要好几个小时）。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能了。 6 | 7 | 记住，很多问题都是开放的，可以引发有趣的讨论。那比直接的答案更能体现此人的能力。 8 | 9 | ####最初的贡献者 10 | 11 | **备注:** 大部分问题从是某个帖子搜集和由下列个人提供： 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 | ## 一般问题 29 | 30 | * 你用Twitter吗？ （在天朝最好问你用微博吗？） 31 | * 如果用，你都关注那些人？ 32 | 33 | * 你用Github吗？ 34 | * 如果用，你关注的项目有什么？ 35 | 36 | * 你关注的博客有那些？ 37 | 38 | * 你使用那些版本管理系统，比如Git，SVN等？ 39 | 40 | * 你常用的开发环境是怎样的？比如操作系统，文本编辑器，浏览器，及其他工具等。 41 | 42 | * 你能描述一下你制作一个网页的工作流程吗？ 43 | 44 | * 你能描述一下渐进增强和优雅降级之间的不同吗? 45 | * 如果提到了特性检测，可以加分。 46 | 47 | * 请解释一下什么是语义化的HTML。 48 | 49 | * 你更喜欢在哪个浏览器下进行开发？你使用那些开发人员工具？ 50 | 51 | * 你如何对网站的文件和资源进行优化？ 52 | * 期待的解决方案包括： 53 | * 文件合并 54 | * 文件最小化/文件压缩 55 | * 使用CDN托管 56 | * 缓存的使用 57 | * 其他 58 | 59 | * 为什么利用多个域名来存储网站资源会更有效？ 60 | * 浏览器一次可以从一个域名下做多少资源？ 61 | 62 | * 请说出三种减低页面加载时间的方法。（加载时间指感知的时间或者实际加载时间） 63 | 64 | * 如果你接到了一个使用Tab来缩进代码的项目，但是你喜欢空格，你会怎么做？ 65 | * 建议这个项目使用像EditorConfig(http://editorconfig.org)之类的规范 66 | * 为了保持一致性，转换成项目原有的风格 67 | * 直接使用VIM的retab命令 68 | 69 | * 请写一个简单的幻灯效果页面 70 | * 如果不使用JS来完成，可以加分。 71 | 72 | * 你都使用那些工作来测试代码的性能？ 73 | * 例如JSPerf (http://jsperf.com/) 74 | * 例如Dromaeo (http://dromaeo.com/) 75 | * 其它。 76 | 77 | * 如果今年你打算熟练掌握一项新技术，那会是什么？ 78 | 79 | * 请谈一下你对网页标准和标准制定机构重要性的理解。 80 | 81 | * 什么是FOUC？你如何来避免FOUC？ 82 | 83 | ## HTML相关问题 84 | 85 | * 文档类型的作用是什么？你知道多少种文档类型？ 86 | 87 | * 浏览器标准模式和怪异模式之间的区别是什么？ 88 | 89 | * 使用XHTML的局限有那些？ 90 | * 如果页面使用'application/xhtml+xml'会有什么问题吗？ 91 | 92 | * 如果网页内容需要支持多语言，你会怎么做？ 93 | * 在设计和开发多语言网站时，有哪些问题你必须要考虑？ 94 | 95 | * 在HTML5的页面中可以使用XHTML的语法吗？ 96 | 97 | * 在HTML5中如何使用XML？ 98 | 99 | * 'data-'属性的作用是什么？ 100 | 101 | * 如果把HTML5看作做一个开放平台，那它的构建模块有那些？ 102 | 103 | * 请描述一下cookies，sessionStorage和localStorage的区别？ 104 | 105 | 106 | ## JS相关问题 107 | 108 | * 你使用过那些Javascript库？ 109 | 110 | * 你是否研究过你所使用的JS库或者框架的源代码？ 111 | 112 | * 什么是哈希表？ 113 | 114 | * 'undefined'变量和'undeclared'变量分别指什么？ 115 | 116 | * 闭包是什么，如何使用它，为什么要使用它？ 117 | * 你喜欢的使用闭包的模式是什么？ 118 | 119 | * 请举出一个匿名函数的典型用例？ 120 | 121 | * 请解释什么是Javascript的模块模式，并举出实用实例。 122 | * 如果有提到无污染的命名空间，可以考虑加分。 123 | * 如果你的模块没有自己的命名空间会怎么样？ 124 | 125 | * 你如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？ 126 | 127 | * 请指出Javascript宿主对象和内置对象的区别？ 128 | 129 | * 指出下列代码的区别： 130 | ```javascript 131 | function Person(){ 132 | some code 133 | } 134 | var person = Person(); 135 | var person = new Person(); 136 | ``` 137 | 138 | * '.call'和'.apply'的区别是什么？ 139 | 140 | * 请解释'Funciton.prototype.bind'的作用？ 141 | 142 | * 你如何优化自己的代码？ 143 | 144 | * 你能解释一下JavaScript中的继承是如何工作的吗？ 145 | 146 | * 在什么时候你会使用'document.write()'？ 147 | * 大多数生成的广告代码依旧使用'document.write()'，虽然这种用法会让人很不爽。 148 | 149 | * 请指出浏览器特性检测，特性推断和浏览器UA字符串嗅探的区别？ 150 | 151 | * 请尽可能详尽的解释AJAX的工作原理。 152 | 153 | * 请解释JSONP的工作原理，以及它为什么不是真正的AJAX。 154 | 155 | * 你使用过JavaScript的模板系统吗？ 156 | * 如有使用做，请谈谈你都使用过那些类似库文件。比如Mustache.js,Handlebars等等。 157 | 158 | * 请解释变量声明提升。 159 | 160 | * 请描述下事件冒泡机制。 161 | 162 | * "attribute"和"property"的区别是什么？ 163 | 164 | * 为什么扩展JavaScript内置对象是个坏做法？ 165 | 166 | * 为什么扩展JavaScript内置对象是个好做法？ 167 | 168 | * 请指出document load和document ready的区别。(这是个问题的问题） 169 | 170 | * '=='和'==='有什么不同？ 171 | 172 | * 你如何获取浏览器URL中查询字符串中的参数。 173 | 174 | * 请解释一下JavaScript的同源策略。 175 | 176 | * 请解释一下事件代理。 177 | 178 | * 请描述一下JavaScript的继承模式。 179 | 180 | * 如何实现下列代码： 181 | ```javascript 182 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 183 | ``` 184 | 185 | * 描述一种JavaScript memoization(避免重复运算)的策略。 186 | 187 | * 什么是三元条件语句？ 188 | 189 | * 函数的参数元是什么？ 190 | 191 | * 什么是"use strict"?使用它的好处和坏处分别是什么？ 192 | 193 | * JavaScript内存泄漏。 194 | * 什么是内存泄漏？ 195 | * 哪些情况下会导致内存泄漏？ 196 | * 有什么样的工具可以检测内存泄漏？ 197 | 198 | * 变量的数据类型( 基本类型和引用类型 )。 199 | * 什么是基本类型值？ 200 | * JavaScript中有哪些基本类型值？ 201 | * 什么是引用类型值？ 202 | * 基本类型值和引用类型值在内存中的保存方式有什么不同？ 203 | * 基本类型值和引用类型值的"复制"在内存中有什么不同？ 204 | 205 | * typeof 与 instanceof 操作符。 206 | 207 | 208 | ## JS代码示例： 209 | 210 | ```javascript 211 | ~~3.14 212 | ``` 213 | 问题：上面的语句的返回值是什么？ 214 | **答案：3** 215 | 216 | ```javascript 217 | "i'm a lasagna hog".split("").reverse().join(""); 218 | ``` 219 | 问题：上面的语句的返回值是什么？ 220 | **答案："goh angasal a m'i"** 221 | 222 | ```javascript 223 | ( window.foo || ( window.foo = "bar" ) ); 224 | ``` 225 | 问题：window.foo的值是什么？ 226 | **答案："bar"** 227 | 只有window.foo为假时的才是上面答案，否则就是它本身的值。 228 | 229 | ```javascript 230 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 231 | ``` 232 | 问题：上面两个alert的结果是什么 233 | **答案: "Hello World" & ReferenceError: bar is not defined** 234 | 235 | ```javascript 236 | var foo = []; 237 | foo.push(1); 238 | foo.push(2); 239 | ``` 240 | 问题：foo.length的值是什么？ 241 | **答案：'2'** 242 | 243 | ```javascript 244 | var foo = {}; 245 | foo.bar = 'hello'; 246 | ``` 247 | 问题：foo.length的值是什么？ 248 | **答案: `undefined` 249 | 250 | ```javascript 251 | foo = foo||bar 252 | ``` 253 | 问题: 这行代码是什么意思? 254 | **答案: if(!foo) foo = bar 255 | 256 | ```javascript 257 | foo>>1 258 | ``` 259 | 问题: 这行代码是什么意思? 260 | **答案: Math.floor(foo/2) 261 | 262 | ```javascript 263 | foo|0 264 | foo+.5|0 265 | ``` 266 | 问题: 这行代码是什么意思? 267 | **答案: parseInt(foo) & Math.round(foo) 268 | 269 | ```javascript 270 | function foo(bar1, bar2, bar3){} 271 | ``` 272 | 问题: 如何获取参数的个数? 273 | **答案: foo.length //this example is 3 274 | 275 | 276 | ## jQuery-Specific Questions: 277 | ## jQuery相关问题 278 | 279 | 280 | * 解释"chaining"。 281 | 282 | * 解释"deferreds"。 283 | 284 | * 你知道那些针对jQuery的优化方法。 285 | 286 | * 请解释'.end()'的用途。 287 | 288 | * 你如何给一个事件处理函数命名空间，为什么要这样做？ 289 | 290 | * 请说出你可以传递到jQuery方法的四种不同值。 291 | * 选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。 292 | 293 | * 什么是效果队列？ 294 | 295 | * 请指出'.get()','[]','eq()',的区别。 296 | 297 | * 请指出'.bing()','.live()'和'.delegate()'的区别。 298 | 299 | * 请指出'$'和'$.fn'的区别？或者说出'$.fn'的用途。 300 | 301 | * 请优化下列选择器： 302 | ```javascript 303 | $(".foo div#bar:eq(0)") 304 | ``` 305 | 306 | * 'delegate()'和'live()'有什么区别? 307 | 308 | 309 | ## CSS相关问题 310 | 311 | * 描述css reset的作用和用途。 312 | 313 | * 描述下浮动和它的工作原理。 314 | 315 | * 清除浮动的方法有那些，分别适用于什么情形。 316 | 317 | * 解释css sprites,如何使用。 318 | 319 | * 你最喜欢的图片替换方法是什么，你如何选择使用。 320 | 321 | * 讨论CSS hacks，条件引用或者其他。 322 | 323 | * 如何为有功能限制的浏览器提供网页。 324 | * 你会使用那些技术和处理方法。 325 | 326 | * 如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用。 327 | 328 | * 你使用过网格系统吗？如果使用过，你最喜欢哪种？ 329 | 330 | * 你使用过meidia queries（媒体查询）吗，或者移动网站相关的CSS布局。 331 | 332 | * 你熟悉SVG样式的书写吗？ 333 | 334 | * 如何优化网页的打印样式。 335 | 336 | * 在书写高效CSS文件时会有哪些问题需要考虑。 337 | 338 | * 你使用CSS预处理器吗？(SASS,Compass,Stylus,LESS) 339 | * 如果使用，描述你的喜好。 340 | 341 | * 你是否接触过使用非标准字体的设计？ 342 | * 字体服务，Google Webfonts, Typekit,等等。 343 | 344 | * 请解释浏览器是如何根据CSS选择器选择对应元素的。 345 | 346 | 347 | ## 可选的有趣问题 348 | 349 | * 你编写过的最酷的代码是什么？其中你最自豪的是什么？ 350 | 351 | * 你知道HTML5的帮派标志吗？ 352 | 353 | * 你是否正在或曾经在一艘船上。(不懂这个幽默） 354 | 355 | * 你使用的开发工具中，你最喜欢的部分是什么？ 356 | 357 | * 你有什么业余项目吗？是那种类型的？ 358 | 359 | * 解释cornify的重要性？(本题完全摸不到头脑） 360 | 361 | * 在一张纸上，垂直写下ABCDE，然后不用任何代码，将他们到序排列。 362 | * 静静的看他们是否将纸反转。 363 | 364 | * 海盗还是忍者？ 365 | * 如果是两者的合体，并有恰当理由，可以加分。如果是僵尸猴子海盗加忍者加两分。(注，此题文化差异过大） 366 | 367 | * 如果没有在Web开发，你会做什么？ 368 | 369 | * 卡门圣迭哥的隐藏处在哪里？ 370 | * 提示：本题的答案永远是错的。 371 | 372 | * 你最爱的IE特性是什么？ 373 | 374 | * 完句填空： Brendan Eich和Doug Crockford是JavaScript的________。 375 | 376 | * 讨论：jQuery是牛逼的库还是最牛逼的库。 377 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | * Leg het belang uit van standaards en standaards organisaties. 55 | * Wat is FOUC? Hoe voorkom je FOUC? 56 | 57 | ### HTML-Specifieke Vragen: 58 | 59 | * Wat doet een `doctype`? 60 | * Wat is het verschil tussen standaard modus en quirks modus? 61 | * Wat zijn de beperkingen als je XHTML pagina's serveert? 62 | * Zijn er problemen als je ze serveert als `application/xhtml+xml`? 63 | * Hoe serveer je een pagina met content in meerdere talen? 64 | * Wat voor dingen moet je voor op passen als je designt of ontwikkelt voor meertalige sites? 65 | * Waar zijn `data-` attributen goed voor? 66 | * Stel je HTML5 voor als een open web platform. Wat zijn dan de bouwstenen van HTML5? 67 | * Beschrijf het verschil tussen cookies, sessionStorage en localStorage. 68 | 69 | ### JS-Specifieke Vragen: 70 | 71 | * Beschrijf event delegatie 72 | * Leg uit hoe `this` werkt in JavaScript 73 | * Leg uit prototypal inheritance werkt 74 | * Hoe kan je je JavaScript testen? 75 | * AMD vs. CommonJS? 76 | * Wat is een hashtable? 77 | * Wat zijn `undefined` en `undeclared` variabelen? 78 | * Wat is een closure, en hoe/waarom zou je het gebruiken? 79 | * Je favoriete pattern om deze te gebruiken? argyle (Alleen toepasbaar bij IIFEs) 80 | * Wat is een typische use case voor anonieme functies? 81 | * Leg de "JavaScript module pattern" uit wanneer je het zou gebruiken. 82 | * Bonus punten voor het noemen van clean namespacing. 83 | * Wat als je modules namespace-loos zijn? 84 | * Hoe organiseer je je code? (module pattern, classical inheritance?) 85 | * Wat is het verschild tussen host objects en native objects? 86 | * Verschil tussen: 87 | ```javascript 88 | function Person(){} var person = Person() var person = new Person() 89 | ``` 90 | * Wat is het verschil tussen `.call` en `.apply`? 91 | * Leg uit `Function.prototype.bind`? 92 | * Wanneer optimaliseer je je code? 93 | * Kan je uitleggen hoe overerving werkt in JavaScript? 94 | * Wanneer zou je `document.write()` gebruiken? 95 | * Veel ads gebruiken nog steeds `document.write()` ookal wordt dit meestal afgekeurd 96 | * Wat is het verschil tussen feature detection, feature inference en het gebruiken van een UA string 97 | * Leg AJAX zo gedetailleerd mogelijk uit 98 | * Leg uit hoe JSONP werkt (en hoe het niet echt AJAX is) 99 | * Heb je ooit JavaScript templating gebruikt? 100 | * Zo ja, welke libraries heb je gebruikt? (Mustache.js, Handlebars etc.) 101 | * Leg "hoisting" uit. 102 | * Beschrijf event bubbling. 103 | * Wat is het verschil tussen een "attribuut" en een "property"? 104 | * Waarom is het uitbreiden van built-in JavaScript objects geen goed idee? 105 | * Waarom is het uitbreiden van built ins een goed idee? 106 | * Wat is het verschil tussen document load en document ready? 107 | * Wat is het verschil tussen `==` en `===`? 108 | * Leg uit hoe je een query string parameter uit een browsers window URL kan halen. 109 | * Leg de same-origin policy met betrekking tot JavaScript uit. 110 | * Beschrijf overerving patronen in JavaScript. 111 | * Maaak dit werkend: 112 | ```javascript 113 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 114 | ``` 115 | * Beschrijf een strategie voor memoization (ontwijken van berekening repetitie) in JavaScript. 116 | * Waarom heet het een Ternary expression, waar doelt het woord "Ternary" op? 117 | * Wat is de ariteit van een functie? 118 | * Wat is `"use strict";`? Wat zijn de voor- en nadelen om dit te gebruiken? 119 | 120 | ### JS-Code Voorbeelden: 121 | 122 | ```javascript 123 | ~~3.14 124 | ``` 125 | Vraag: Welke waarde wordt terug gegeven bij de bovenstaande code? 126 | **Antwoord: 3** 127 | 128 | ```javascript 129 | "ik hou van lasagna".split("").reverse().join(""); 130 | ``` 131 | Vraag: Welke waarde wordt terug gegeven bij de bovenstaande code? 132 | **Antwoord: "angasal nav uoh ki"** 133 | 134 | ```javascript 135 | ( window.foo || ( window.foo = "bar" ) ); 136 | ``` 137 | Vraag: What is the value of window.foo? 138 | **Antwoord: "bar"** 139 | Alleen als window.foo falsy was, anders leverde het zijn waarde op. 140 | 141 | ```javascript 142 | var foo = "Hallo"; (function() { var bar = " Wereld"; alert(foo + bar); })(); alert(foo + bar); 143 | ``` 144 | Vraag: Wat is de uitkomst van de twee alerts? 145 | **Antwoord: "Hallo Wereld" & ReferenceError: bar is not defined** 146 | 147 | ```javascript 148 | var foo = []; 149 | foo.push(1); 150 | foo.push(2); 151 | ``` 152 | Vraag: Wat is de waarde van foo.length? 153 | **Antwoord: `2` 154 | 155 | ```javascript 156 | var foo = {}; 157 | foo.bar = 'hello'; 158 | ``` 159 | Vraag: Wat is de waarde van foo.length? 160 | **Antwoord: `undefined` 161 | 162 | ### jQuery-Specifieke Vragen: 163 | 164 | * Leg "chaining" uit. 165 | * Leg "deferreds" uit. 166 | * Wat zijn een paar jQuery specifieke optimalisaties die jij kan implementeren? 167 | * Wat doet `.end()`? 168 | * Hoe en waarom zou je een bound event handler namespacen? 169 | * Noem 4 verschillende waardes die je aan een jQuery methode kan geven. 170 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 171 | * Wat is de effecten (fx) queue? 172 | * Wat is het verschil tussen `.get()`, `[]`, en `.eq()`? 173 | * Wat is het verschil tussen `.bind()`, `.live()`, en `.delegate()`? 174 | * Wat is het verschil tussen `$` en `$.fn`? Of sowieso, wat is `$.fn`. 175 | * Optimaliseer deze selector: 176 | ```javascript 177 | $(".foo div#bar:eq(0)") 178 | ``` 179 | * Wat is het verschil tussen 'delegate()' en 'live()'? 180 | 181 | 182 | ### CSS-Specifieke Vragen: 183 | 184 | * Beschrijf wat een "reset" CSS bestand doet en hoe dit bruikbaar is. 185 | * Beschrijf Floats en hoe ze werken. 186 | * Wat zijn de verschillende clearing technieken en welke is toepasselijk voor welke context? 187 | * Leg CSS sprites uit en hoe je ze kan implementeren op een pagina. 188 | * Wat zijn jouw favoriete image replacement technieken en welke gebruik je wanneer? 189 | * CSS property hacks, conditionele ingeladen .css files, of... iets anders? 190 | * Hoe serveer je je pagina's voor feature-constrained browsers? 191 | * Welke technieken/processen gebruik je? 192 | * Wat zijn de verschillende manieren om content visueel te verbergen (en het alleen zichtbaar te houden voor screenreaders)? 193 | * Heb je ooit een grid-systeem gebruikt en zo ja, wat is je voorkeur? 194 | * Heb je ooit media queries of mobiel specifieke layouts/CSS gebruikt of geïmplementeerd? 195 | * Ben je bekend met SVG styling? 196 | * Hoe optimaliseer je je pagina's voor printen? 197 | * Wat zijn sommige van de "gotchas" voor het schrijven van efficiënte CSS? 198 | * Wat zijn de voor- en nadelen van CSS preprocessors? (SASS, Compass, Stylus, LESS) 199 | * Wat vind je wel en niet fijn aan diegene die jij hebt gebruikt. 200 | * Hoe zou je een website design implementeren dat gebruik maakt van non-standard fonts? 201 | * Webfonts (font services zoals: Google Webfonts, Typekit etc.) 202 | * Leg uit hoe een browser beslists welke elementen hij moet matchen met een CSS selector? 203 | 204 | ### Optionele Losse Vragen: 205 | 206 | * Wat is het coolste dat je ooit gemaakt hebt. Waar ben je trots op? 207 | * Wat zijn de favoriete dingen van de ontwikkeltools die je gebruikt? 208 | * Heb je hobbyprojecten? Zo ja, wat voor? 209 | * Wat is je favoriete feature van Internet Explorer? 210 | -------------------------------------------------------------------------------- /French/README_FR.md: -------------------------------------------------------------------------------- 1 | # QUESTIONNAIRE DE RECRUTEMENT 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 | ## General Questions: 10 | 11 | * Êtes-vous sur Twitter ? 12 | * Si oui, qui suivez-vous ? 13 | * Êtes-vous sur GitHub ? 14 | * Si oui, donnez quelques exemples de dépôt que vous suivez. 15 | * A quels blogs êtes-vous abonné ? 16 | * Quel logiciel de gestion de versions avez-vous déjà utilisé ? (Git, SVN etc.) 17 | * Quel est votre environnement de développement préféré ? (OS, Editor, Browsers, Tools etc.) 18 | * Pouvez-vous décrire votre workflow lorsque vous créez une page web ? 19 | * Pouvez-vous décrire la différence entre amélioration progressive et dégradation progressive ? 20 | * Un point bonus si vous décrivez des méthodes de détection 21 | * Expliquez ce que le terme "HTML sémantique" signifie. 22 | * Quel naviguateur et outils de débogage web utilisez-vous ? 23 | * Comment optimisez vous les performances de vos page web (assets/resources) ? 24 | * Énumérez quelques solutions comme : 25 | * La concaténation des fichiers 26 | * La minification des fichiers 27 | * L'utilisation d'un Content Delivery Network (CDN) 28 | * La mise en cache 29 | * etc… 30 | * Pourquoi est-il préférable de disposer ses assets sur des domaines différents ? 31 | * Combien de ressources différentes un navigateur peut télécharger à partir d'un même domaine à un instant T ? 32 | * Donnez 3 façons qui permettent de réduire le temps de chargement d'une page. (perçu ou réel) 33 | * Si vous démarrez sur un projet existant, que votre prédécesseur a utilisé des tabulations pour indenter son code et que vous utilisez des espaces, que faites-vous ? 34 | * Vous proposez d'utiliser quelque chose comme EditorConfig (http://editorconfig.org) 35 | * Vous restez fidèle aux conventions 36 | * `issue :retab! command` 37 | * Développez un simple slideshow 38 | * Un point bonus si vous le faites sans JS 39 | * Quel outils utilisez vous pour tester la performance de votre code ? 40 | * JSPerf (http://jsperf.com/) 41 | * Dromaeo (http://dromaeo.com/) 42 | * etc… 43 | * Si vous pouviez maitriser parfaitement une technologie cette année, laquelle serait-ce ? 44 | * Expliquez l'importance des standards et des organisations les édictant. 45 | 46 | ## Questions spécifiques à HTML : 47 | 48 | * Qu'est-ce qu'un `doctype` fait, et combien pouvez-vous en nommer ? 49 | * Quelle est la différence entre les modes `standard` et `quirks` 50 | * Quelles sont les limitations des pages XHTML ? 51 | * Y a t'il des problèmes à envoyer des pages avec le content-type `application/xhtml+xml` ? 52 | * Comment servez vous une page avec du contenu multilingue ? 53 | * À quoi devez-vous faire attention quand vous designez ou développez des pages pour des sites multilingues ? 54 | * Pouvez vous utliser une syntaxe XHTML en HTML5 ? 55 | * Comment utilisez vous du XML en HTML5 ? 56 | * À quoi servent les `data-` attributes ? 57 | * Que sont les modèles de contenus en HTML4, et diffèrent-ils de HTML5 ? 58 | * Si l'on considère que HTML5 est une plateforme web ouverte, quels sont les briques de base de HTML5 ? 59 | * Décrivez la différence entre cookies, sessionStorage, et localStorage. 60 | 61 | ## Questions spécifiques à JavaScript : 62 | * Quelles sont les librairies JavaScript que vous avez utilisé ? 63 | * En quoi JavaScript est-il différent de Java ? 64 | * Qu'est-ce qu'une hashTable ? 65 | * Que sont les variables `undefined` et `undeclared` ? 66 | * Qu'est-ce qu'une closure, et pourquoi / comment en utiliseriez vous une ? 67 | * Votre patten favori pour les créer ? (seulement pour les IIFEs, fonctions-expressions évoquées immédiatement) 68 | * Quel est un cas d'utilisation typique pour une fonction anonyme ? 69 | * Expliquer les pattern JavaScript de "Module", et quand vous l'utiliseriez. 70 | * Un point bonus si vous parlez de namespacing 71 | * Que se passe t'il si vos modules ne sont pas namespacés ? 72 | * Comment organisez vous votre code (pattern modulaire, héritage classique ?) 73 | * Quelle est la différence entre objets hôtes et objets natifs ? 74 | * Différence entre : 75 | ```javascript 76 | function Person(){} 77 | var person = Person() // et 78 | var person = new Person() 79 | ``` 80 | * Quelle est la différence entre `.call` et `.apply` ? 81 | * Expliquez `Function.prototype.bind` ? 82 | * Quand optimisez-vous votre code ? 83 | * Pouvez vous expliquer comment fonctionne l'héritage en JavaScript ? 84 | * Quand utiliseriez-vous `document.write()` ? 85 | * La plupart des pubs utilisent encore `document.write()` même si son utilisation est découragée. 86 | * Quelle est la différence entre détection de feature, inférence de feature, et l'utilisation de l'User Agent ? 87 | * Expliquez un call AJAX dans le plus grand détail possible 88 | * Expliquez comment JSONP fonctionne (et en quoi ca n'est pas réellement de l'AJAX) 89 | * Avez-vous déjà utilisé du templating en JavaScript ? 90 | * Si oui, quelles librairies avez-vous utilisé (Mustache.js, Handlebars etc…) 91 | * Expliquez "hoisiting". 92 | * Quest-ce que le FOUC, comment l'évitez vous ? 93 | * Décrivez le bubbling d'événement. 94 | * Quelle est la différence entre un "attribut" et une "propriété" 95 | * Pourquoi étendre les objets natifs JavaScript n'est pas une bonne idée ? 96 | * Pourquoi étendre les objets natifs est une bonne idée ? 97 | * Quelle est la différence entre les événements `load` et `ready` du document? 98 | * Quelle est la différence entre `==` et `===` ? 99 | * Expliquez comment vous récupéreriez un paramètre de querystring de l'URL du browser. 100 | * Expliquez la politique d'origine commune et ses implication en JavaScript. 101 | * Expliquez la délégation d'événement. 102 | * Expliquez les patterns d'héritage en JavaScript. 103 | * Faites fonctionner ceci : 104 | ```javascript 105 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 106 | ``` 107 | * Décrivez une stratégie de mémoization (pour éviter la répétition des calculs) en JavaScript. 108 | * Qu'est-que qu'une instruction 'Ternaire', et qu'indique le mot 'Ternaire' 109 | * Qu'est-ce que l'arité d'une fonction ? 110 | 111 | ## Exemples de code JS 112 | 113 | ```javascript 114 | ~~3.14 115 | ``` 116 | Question: Que retourne ce code ? 117 | **Réponse: 3** 118 | 119 | ```javascript 120 | "je suis un bouffeur de lasagne".split("").reverse().join(""); 121 | ``` 122 | Question: Que retourne ce code ? 123 | **Réponse: "engasal ed rueffuob nu sius ej"** 124 | 125 | ```javascript 126 | ( window.foo || ( window.foo = "bar" ) ); 127 | ``` 128 | Question: Que retourne window.foo? 129 | **Réponse: "bar"** 130 | seulement si window.foo n'était pas défini ou faux, autrement il garde sa valeur 131 | 132 | ```javascript 133 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 134 | ``` 135 | Question: Que se passe-t-il à l'éxécution de ce code ? 136 | **Réponse: "Hello World" & ReferenceError: bar is not defined** 137 | 138 | ```javascript 139 | var foo = []; 140 | foo.push(1); 141 | foo.push(2); 142 | ``` 143 | Question: Quelle est la valeur de foo.length ? 144 | **Réponse: `2` 145 | 146 | ```javascript 147 | var foo = {}; 148 | foo.bar = 'hello'; 149 | ``` 150 | Question: Quelle est la valeur de foo.length ? 151 | **Réponse: `undefined` 152 | 153 | 154 | ## Questions spécifiques à jQuery : 155 | 156 | * Expliquez le chainage 157 | * Expliquez 'deferred' 158 | * Décrivez des optimisations spécifiques à jQuery que vous pouvez implémenter. 159 | * Que fait `.end()` ? 160 | * Pourquoi et comment restreindriez-vous un événement bindé à un un namespace ? 161 | * Nommez 4 valeurs différentes que vous pouvez passer à la méthode jQuery. 162 | * Sélecteur (string), HTML (string), Callback (function), HTMLElement, objet, tableau, tableau d'éléments, objet jQuery, etc… 163 | * Qu'est-ce que la queue d'effets (fx queue) ? 164 | * Quelle est la différence entre `.get()`, `[]`, et `.eq()` ? 165 | * Quelle est la différence entre `.bind()`, `.live()`, et `.delegate()`? 166 | * Quelle est la différence entre `$` et `$.fn`? Ou bien seulement : qu'est-ce que `$.fn`. 167 | * Optimisez ce sélecteur : 168 | ```javascript 169 | $(".foo div#bar:eq(0)") 170 | ``` 171 | 172 | ## Questions spécifiques CSS : 173 | 174 | * Décrivez ce que fait un fichier CSS Reset, et pourquoi il est utile. 175 | * Décrivez les Floats, et comment ils fonctionnent. 176 | * Quelles sont les différentes méthodes de clearing des floats, et laquelle est appropriée pour chaque contexte ? 177 | * Expliquez les sprites CSS, et comment vous les implémenteriez sur une page ou un site. 178 | * Quelles sont vos techniques favorites de remplacement d'images, et comment les utilisez vous ? 179 | * hacks de propriétés CSS, fichiers .css inclus avec des commentaires conditionnels, ou autre ? 180 | * Comment servez vous vos pages pour les browsers aux fonctionnalités réduites ? 181 | * Quelles techniques / process utilisez vous ? 182 | * Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d'écran) ? 183 | * Avez-vous déjà utilisé un grid system, et si oui, lequel préférez-vous ? 184 | * Avez-vous déjà implémenté des media queries, ou des layouts/CSS spécifiques aux mobiles ? 185 | * déjà touché au styling de SVG ? 186 | * Comment optimisez vous vos pages pour le print ? 187 | * Quelques trucs pour écrire du CSS efficace ? 188 | * Utilisez vous des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS) 189 | * Si oui, décrivez ce que vous aimez et n'aimez pas des préprocesseurs que vous avez utilisé. 190 | * Comment implémenteriez-vous une créa web qui utilise des typos non standard ? 191 | * Webfonts (services comme: Google Webfonts, Typekit etc.) 192 | * Expliquez comment un browser détermine ce qui matche un sélecteur CSS. 193 | 194 | 195 | 196 | ## Questions optionnelles, pour le geste. 197 | 198 | * Quel est le tuc le plus cool que vous ayez jamais codé, de quoi êtes-vous le plus fier ? 199 | * Connaissez vous le signe de gang du HTML5 ? 200 | * Êtes-vous ou avez-vous déjà été sur un bateau ? 201 | * Quelles sont vos parties favorites des outils de développement que vous utilisez. 202 | * Avez-vous des projets chouchous ? Quel genre ? 203 | * Expliquez 'cornify'. 204 | * Sur un bout de papier, écrivez les lettres A B C D E verticalement. 205 | Maintenant mettez les en ordre descendant sans écrire une ligne de code. 206 | * Regardez si ils retournent le bout de papier. 207 | * Pirate ou Ninja. 208 | * Bonus si c'est une doublette, et si il y a une bonne raison. (+2 pour des Zombies Singes Ninja Pirates) 209 | * Si c'était pas du Dev, vous feriez quoi ? 210 | * Ou est Carmen San Diego ? 211 | * Indice : La réponse est toujours fausse. 212 | * Quelle est votre feature favorite de IE ? 213 | * Complétez cette phrase Brendan Eich et Doug Crockford sont les __________ de JavaScript. 214 | * jQuery : superbe librairie, ou la meilleure ? Discutez. 215 | -------------------------------------------------------------------------------- /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ährigkeiten 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 erlernen 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 | * Bringt 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 Imace-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 Entwicklerwerkzeugen, 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/ -------------------------------------------------------------------------------- /Hungarian/README.md: -------------------------------------------------------------------------------- 1 | # Interjú kérdések front-end fejlesztőknek 2 | 3 | @version 2.0.0 4 | 5 | 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. 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/) cikke is hasznos alapja lehet egy interjúnak. 8 | 9 | **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. 10 | 11 | A magyar fordítást [Czeglédy Tibor](http://github.com/microtroll) készítette az eredeti angol szöveg alapján. 12 | 13 | #### Eredeti közreműködők 14 | 15 | 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: 16 | 17 | * [@bentruyman](http://twitter.com/bentruyman) - [http://bentruyman.com](http://bentruyman.com) 18 | * [@cowboy](http://twitter.com/cowboy) - [http://benalman.com](http://benalman.com) 19 | * [@ajpiano](http://ajpiano) - [http://ajpiano.com](http://ajpiano.com) 20 | * [@SlexAxton](http://twitter.com/slexaxton) - [http://alexsexton.com](http://alexsexton.com) 21 | * [@boazsender](http://twitter.com/boazsender) - [http://boazsender.com](http://boazsender.com) 22 | * [@miketaylr](http://twitter.com/miketaylr) - [http://miketaylr.com](http://miketaylr.com) 23 | * [@vladikoff](http://twitter.com/vladikoff) - [http://vladfilippov.com](http://vladfilippov.com) 24 | * [@gf3](http://twitter.com/gf3) - [http://gf3.ca](http://gf3.ca) 25 | * [@jon_neal](http://twitter.com/jon_neal) - [http://twitter.com/jon_neal](http://twitter.com/jon_neal) 26 | * [@wookiehangover](http://twitter.com/wookiehangover) - [http://wookiehangover.com](http://wookiehangover.com) 27 | * [@darcy_clarke](http://twitter.com/darcy) - [http://darcyclarke.me](http://darcyclarke.me) 28 | * [@iansym](http://twitter.com) 29 | 30 | ### Általános kérdések: 31 | 32 | * Milyen verziókövetőket használtál már? (Git, SVN, stb.) 33 | * 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.) 34 | * Részletezd hogyan készítesz el egy weboldalt. 35 | * 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? 36 | * Bónusz pont a funkció működésének tesztelése adott eszközön. 37 | * Magyarázd el mit jelent a "szemantikus HTML". 38 | * Milyen böngészőt és milyen eszközöket használsz a fejlesztéshez? 39 | * Hogyan optimalizálod egy weboldal forrásait/eszközeit? 40 | * Keress több megoldást, amik tartalmazzák az alábbiakat: 41 | * Fájl egyesítés 42 | * Fájl minimalizálás 43 | * CDN hoszting 44 | * Cachelés 45 | * stb. 46 | * Miert jobb az eszközöket egyszerre több domainnek is kiszolgálni? 47 | * Hány lekérdezés futhat a böngészőben egyidejűleg az adott domain irányába? 48 | * Nevezz meg 3 lehetőséget az oldalletöltés időtartámanak csökkentésére. (előtöltött vagy aktiális töltési idő) 49 | * Ha beszállsz egy projektbe, és ők tabot használnak te pedig szókozt a kód rendezésénél, mit teszel? 50 | * Tanácsolod, hogy használjatok valami technológiát, pl. [EditorConfig](http://editorconfig.org) 51 | * Elfogadod (vagy tartózkodsz) 52 | * `issue :retab! command` 53 | * Készíts egy egyszerű slideshow oldalt. 54 | * Bónusz pont ha nem szükséges hozzá JavaScript. 55 | * Milyen eszközökkel teszteled a kódod teljesítményét? 56 | * [JSPerf](http://jsperf.com/) 57 | * [Dromaeo](http://dromaeo.com/) 58 | * stb. 59 | * Ha idén elsajátíthatnál egy technológiát, mi lenne az? 60 | * Ismertesd a sztandardok fontosságát. 61 | * Mi a FOUC? Hogyan kerulöd el a FOUC-et? 62 | 63 | ### HTML specifikus kérdések: 64 | 65 | * Mi a `doctype` feladata és hány fajtáját tudod megnevezni? 66 | * Mi a különbség a `standard` és a `quirks` módok között? 67 | * Nevezd meg az XHTML oldalak korlátait? 68 | * Van bármi akadálya annak, hogy egy oldalt `application/xhtml+xml`-ként szolgáljon ki? 69 | * Hogyan készítesz fel egy weboldalt többnyelvű tartalom megjelenítésére? 70 | * Mikre kell figyelni egy többnyelvű oldal tervezése és fejlesztése során? 71 | * Használhatsz XHTML szintaxist HTML5-be? 72 | * Hogyan használsz XML-t HTML5-ben? 73 | * Mire valók a `data-` attribútumok? 74 | * Mik tartoznak bele a HTML4 tartalmi modelljébe és miként különbözik ez a HTML5-ben? 75 | * Tegyük fel, hogy a HTML5 egy nyílt webes felület. Mik az építőelemei? 76 | * Mi a különbség a `cookie` a `sessionStorage` és a `localStorage` között. 77 | 78 | ### JS specifikus kérdések: 79 | 80 | * Mit jelent az `event delegation`? 81 | * Magyarázd el hogyan működik a `this` a JavaScript-ben. 82 | * Hogyan működik a protokol öröklés (prototypal inheritance)? 83 | * Hogyan teszteled a JavaScript kódodat? 84 | * AMD vs. CommonJS? 85 | * Melyik JavaScript library-ket használtad már? 86 | * Próbáltad már értelmezni az általad használt library/keretrendszer forrását? 87 | * Mi a "hashtable"? 88 | * Mit jelent az `undefined` és az `undeclared` változó? 89 | * Mi a lezárás, milyen formáit ismered és hogyan használod azokat? 90 | * Kedvenc mintád? "argyle" (kizárólag IIFE-re alkalmazható) 91 | * Hogyan néz ki egy anoním funkció? 92 | * Magyarázd el a JavaScript modul sablont és, hogy mikor használjuk. 93 | * Bónusz pont, ha említi a tiszta namespace-ket. 94 | * Mi történik akkor, ha a modul namespace mentes? 95 | * Miként rendszerezed a kódodat? (module pattern, classical inheritance) 96 | * Mi a különbség hoszt objektum és natív objektum között? 97 | * Mi a különbség az következő kódok között: 98 | ```javascript 99 | function Person(){} var person = Person() var person = new Person() 100 | ``` 101 | * Mi a különbség a `.call` és az `.apply` között? 102 | * Magyarázd el mire jó a `Function.prototype.bind`? 103 | * Mikor szoktad optimalizálni a kódodat? 104 | * Magyarázd el hogyan működik az öröklődés szabálya a JavaScript-ben? 105 | * Mikor használod a `document.write()` funkciót? 106 | * A generált hírdetés még mindig használják annak ellenére, hogy nem ajánlatos. 107 | * 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? 108 | * Magyarázd meg az AJAX működését a lehető legrészletesebben. 109 | * Magyarázd el, hogyan működik a JSONP (és miért nem AJAX valójában). 110 | * Használtál már JavaScript template rendszert? 111 | * Ha igen mit? (Mustache.js, Handlebars, stb.) 112 | * Mit jelent a "hoisting"? 113 | * Mit jelent az `event bubbling`? 114 | * Mi a különbség az "attribute" és a "property" között? 115 | * Miért nem jó ötlet kiegészíteni a beépített JavaScript objektumokat? 116 | * Miért jó ötlet kiegészíteni a bepített funkciókat? 117 | * Mi a különbség a "document load" és a "document ready" között? 118 | * Mi a különbség `==` és `===` között? 119 | * Hogyan olvasol be egy paramétert a böngésző ablak URL-ből? 120 | * Mit jelent a "same-origin" szabály a JavaScript-bet? 121 | * Ismertesd a JavaScript öröklési mintáját. 122 | * Javítsd ki az alábbi példát: 123 | ```javascript 124 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 125 | ``` 126 | * írj le egy memorizáló stratégiát (ismétlődő kalkulációk nélkül) JavaScriptben. 127 | * Mit nevezünk "Ternary" kifejezésnek? Mire utal a "Ternary" szó? 128 | * Mennyi attribútumot lehet átadni egy funkciónak? 129 | * Mi a `"use strict";`, mik az előnyei és a hátrányai? 130 | 131 | ### JS példakódok: 132 | 133 | ```javascript 134 | ~~3.14 135 | ``` 136 | Kérdés: Mi a kimente a fenti példának? 137 | **Válasz: 3** 138 | 139 | ```javascript 140 | "i'm a lasagna hog".split("").reverse().join(""); 141 | ``` 142 | Kérdés: Milyen értékkel tér vissza a fenti állítás? 143 | **Válasz: "goh angasal a m'i"** 144 | 145 | ```javascript 146 | ( window.foo || ( window.foo = "bar" ) ); 147 | ``` 148 | Kérdés: Mi az értéke a `window.foo`-nak? 149 | **Válasz: "bar"** de csak ha a `window.foo` hamis egyébként megtartja az értékét. 150 | 151 | ```javascript 152 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 153 | ``` 154 | Kérdés: Mi a fenti két alert-nek a kimenete? 155 | **Válasz: "Hello World" és ReferenceError: bar is not defined** 156 | 157 | ```javascript 158 | var foo = []; 159 | foo.push(1); 160 | foo.push(2); 161 | ``` 162 | Kérdés: Mi a `foo.length` értéke? 163 | **Válasz: 2** 164 | 165 | ```javascript 166 | var foo = {}; 167 | foo.bar = 'hello'; 168 | ``` 169 | Kérdés: Mi a `foo.length` értéke? 170 | **Válasz: undefined** 171 | 172 | ### jQuery specifikus kérdések: 173 | 174 | * Mit jelent a `chaining`? 175 | * Mit jelent a `deferreds`? 176 | * Milyen jQuery specifikus optimalizálást ismersz? 177 | * Mire használhatjuk az `.end()` funkciót? 178 | * Hogyan neveznél el egy kapcsolt esemény kezelőt (bound event handler) és miért? 179 | * Nevezz meg 4 különböző értéket, ami átadható egy jQuery folyamatnak. 180 | * Szelektor (sztring), HTML (sztring), Callback (funkció), HTMLElement, objektum, tömb, elemb tömb, jQuery objektum, stb. 181 | * Mit jelent az effektek (vagy fx) sorba állítas? 182 | * Mi a különbség `.get()`, `[]`, és `.eq()` között? 183 | * Mi a különbség `.bind()`, `.live()`, és `.delegate()` között? 184 | * Mi a különbség `$` és `$.fn` között? Vagy mit jelent a `$.fn`? 185 | * Optimalizáld a alábbi szelektort: 186 | ```javascript 187 | $(".foo div#bar:eq(0)") 188 | ``` 189 | * Mi a különbség `delegate()` és `live()` között? 190 | 191 | ### CSS specifikus kérdések: 192 | 193 | * Mire való a "reset" CSS fájl és mennyire hasznos? 194 | * Hogyan működik a CSS `float`? 195 | * Milyen `clear` technikákat ismersz és melyik milyen környezetben a megfelelő? 196 | * Magyarázd el a CSS sprites működését és, hogy hogyan alkalmazod egy weboldalon? 197 | * Mi a kedvenc képpel helyettesítő (image replacement) technikád és mit használsz mire? 198 | * CSS hackek, böngésző függő CSS fájlok, vagy.... valami más? 199 | * Hogyan jelenítesz meg oldalakat korlátozott böngészőkben? 200 | * Milyen technológiákat/folyamatokat használsz? 201 | * Milyen módon tudsz tartalmakat vizuálisan elrejteni (és csak screen olvasók számára elérhetővé tenni)? 202 | * Használtál már rács rendszert (grid system)? Ha igen nevezz meg párat. ([960 Grid System](http://960.gs/), [Foundation](http://foundation.zurb.com/), [Twitter Bootstrap](http://twitter.github.io/bootstrap/)) 203 | * Használtál már "media query"-ket vagy mobil specifikus layoutokat/CSS-eket? 204 | * Jártas vay az SVG használatában? 205 | * Hogyan alakítasz egy weboldalt nyomtatóbaráttá? 206 | * Mik a legjobb "ötletek" a hatékony CSS kód írásához? 207 | * 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/)) 208 | * Ha igen mit szeretsz és mit nem szeretsz bennük? 209 | * Hogyan valósítasz meg egy olyan dizájn kompozíciót, ami nem a szabványos betűtípusokat tartalmazza? 210 | * Webfontok ([Google Webfonts](https://www.google.com/fonts/), [Typekit](https://typekit.com/), stb.) 211 | * Miként határozza meg a böngésző a megfelelő CSS szelektort? 212 | 213 | ### Választható és vicces kérdések: 214 | 215 | * Mi a legjobb dolog, amit eddig kódoltál? Mire vagy a legbüszkébb? 216 | * Ismered a HTML5 banda jelét? 217 | * Vagy, vagy voltál már hajón? 218 | * Mi a kedvenced az általad használt fejlesztői eszközökben? 219 | * Van bármilyen állatos projekted? Ha igen milyen? 220 | * Ismertesd a "cornify" jelentőségét. [Cornify](http://www.cornify.com/) 221 | * Egy darab papirra írd le az A B C D E betűket függőlegesen. Most rendezzd át oket csökkenő sorrendbe egyetlen sor kóddal. 222 | * Várj és figyelj, megfordítják-e a papírt, hogy fejjel lefelé legyen. 223 | * Kalóz vagy Ninja? 224 | * Bónusz pont, ha mindkettő és jó indokot adott rá (+2 ha zombi majom kalóz ninják) 225 | * Ha nem fejlesztesz, mi mást szoktál csinálni? 226 | * Hol lehet vajon Carmen Sandiego? 227 | * Megoldás: nincs rá helyes válasz 228 | * Mit szeretsz a legjobban az Internet Explorerben? 229 | * Fejezd be a mondatot: Brendan Eich és Doug Crockford a JavaScript __________. 230 | * jQuery: egy jó library vagy a legjobb library? Vitassátok meg. 231 | * [W3School](http://www.w3schools.com/) vagy [W3Fools](http://w3fools.com/) -------------------------------------------------------------------------------- /Italian/README_IT.md: -------------------------------------------------------------------------------- 1 | #QUESTIONARIO COLLOQUIO DI LAVORO 2 | 3 | @version 1.0 4 | 5 | ##Collaboratori 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 | ## Domande Generali: 10 | 11 | * Sei su Twitter? 12 | * Se sì, chi segui su Twitter? 13 | * Sei su GitHub? 14 | * Se sì, quali sono alcuni esempi di repository che segui 15 | * Che blog segui? 16 | * Che sistema di controllo di versione [*version control*] hai usato (Git, SVN, ecc...)? 17 | * Qual è il tuo ambiente di sviluppo preferito? (Sistema Operativo, Editor di testo, Browser, Strumenti ecc.) 18 | * Puoi descrivere il tuo metodo di lavoro quando crei una pagina web? 19 | * Puoi descrivere la differenza tra miglioramento progressivo [*progressive enhancement*] e degradazione elegante [*graceful degradation*]? 20 | * Punti bonus se descrive il rilevamento di funzionalità [*feature detection*] 21 | * Spiega cosa significa "HTML Semantico". 22 | * In quale browser sviluppi principalmente e quali strumenti di sviluppo usi? 23 | * Come ottimizzeresti le risorse/asset di un sito? 24 | * Mi aspetto svariate soluzioni che possono includere: 25 | * Concatenazione dei file 26 | * Minimizzazione [*minification*] dei file 27 | * Uso di CDN 28 | * Caching 29 | * ecc... 30 | * Perché è meglio servire file per il sito da più domini? 31 | * Quante risorse scaricherà per volta un browser da uno specifico dominio? 32 | * Citami 3 modi per diminuire il caricamento della pagina. (percepito o effettivo tempo di caricamento) 33 | * Se cominci a lavorare su un progetto già iniziato dove vengono usati tab invece di spazi, cosa fai? 34 | * Suggerisci di usare per il progetto qualcosa tipo EditorConfig (http://editorconfig.org) 35 | * Ti adatti alle convezioni (rimani coerente) 36 | * `issue :retab! command` 37 | * Scrivi una semplice pagina con slideshow 38 | * Punti bonus se non utilizza JS. 39 | * Che strumenti usi per testare le prestazioni del tuo codice? 40 | * JSPerf (http://jsperf.com/) 41 | * Dromaeo (http://dromaeo.com/) 42 | * ecc... 43 | * Se potessi approfondire una tecnologia quest'anno, quale sarebbe? 44 | * Spiega l'importanza degli standard e degli enti di normazione. 45 | 46 | ## Domande Specifiche su HTML: 47 | 48 | * Cosa fa il `doctype`, e quanti me ne puoi citare? 49 | * Qual è la differenza tra standard mode e quirks mode? 50 | * Quali sono le limitazioni quando servi pagine XHTML? 51 | * Ci sono dei problemi a servire le pagine come `application/xhtml+xml`? 52 | * Come servi una pagina con il contenuto in più lingue? 53 | * A cosa devi far attenzione quando progetti o sviluppi siti multilingua? 54 | * Si può usare la sintassi XHTML in HTML5? 55 | * Come usi XML in HTML5? 56 | * Per cosa sono utili gli attributi `data-`? 57 | * Quali sono i modelli di contenuto [*content models*] in HTML4 e sono differenti in HTML5? 58 | * Considera HTML5 come una piattaforma web aperta. Quali sono i mattoni di HTML5? 59 | * Descrivi le differenze tra cookie, sessionStorage e localStorage. 60 | 61 | ## Domande Specifiche su JS 62 | 63 | * Quali librerie JavaScript hai usato? 64 | * Come è diverso JavaScript da Java? 65 | * Cosa è una hashtable? 66 | * Cosa sono le variabili `undefined` e `undeclared`? 67 | * Cosa è una chiusura [*closure*], e come/perché ne useresti una? 68 | * Il tuo pattern preferito usato per crearle? argyle (Applicabile solo a espressioni di funzione immediatamente eseguite [*IIFE*]) 69 | * Qual è l'uso tipico di una funzione anonima? 70 | * Spiega il "JavaScript module pattern" e quando lo useresti. 71 | * Punti bonus se menziona namespacing pulito. 72 | * E se i tuoi moduli sono senza namespace? 73 | * Come organizzi il tuo codice? (module pattern, ereditarietà classica?) 74 | * Qual è la differenza tra oggetti host e oggetti nativi? 75 | * Differenza tra: 76 | ```javascript 77 | function Person(){} var person = Person() var person = new Person() 78 | ``` 79 | * Qual è la differenza tra `.call` e `.apply`? 80 | * Spiega `Function.prototype.bind`? 81 | * Quando ottimizzi il tuo codice? 82 | * Puoi spiegare come funziona l'ereditarietà in JavaScript? 83 | * Quando useresti `document.write()`? 84 | * La maggior parte delle pubblicità usa `document.write()` sebbene il suo utilizzo venga malvisto 85 | * Qual è la differenza tra il rilevamento di funzionalità [*feature detection*], la deduzione di funzionalità [*feature inference*], e l'uso della stringa UA 86 | * Spiega AJAX nel modo più dettagliato possibile 87 | * Spiega come funziona JSONP (e come non è veramente AJAX) 88 | * Hai mai usato il templating JavaScript? 89 | * Se se sì, quali librerie hai utilizzato? (Mustache.js, Handlebars ecc...) 90 | * Spiega "hoisting". 91 | * Cosa è il FOUC? Come eviti il FOUC? 92 | * Descrivi l'event bubbling. 93 | * Qual è la differenza tra un "attribute" e una "property"? 94 | * Perché extending built negli oggetti JavaScript non è una buona idea? 95 | * Perché extending built è una buona idea? 96 | * Differenza tra l'evento document load e l'evento document ready? 97 | * Qual è la differenza tra `==` e `===`? 98 | * Spiega come prenderesti il parametro query string dall'URL della finestra del browser. 99 | * Spiega la policy "stessa origine" [*same-origin*] per quanto riguarda JavaScript. 100 | * Spiega l'event delegation. 101 | * Descrivi i pattern di ereditarietà in JavaScript. 102 | * Cosa ottieni da: 103 | ```javascript 104 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 105 | ``` 106 | * Descrivi la tecnica della memoizzazione (evitando la ripetizione del calcolo) in JavaScript. 107 | * Perché è chiamato operatore Ternario, cosa indica la parola "Ternario"? 108 | * Cosa è l'arietà di una funzione? 109 | 110 | ## Esempi di Codice JS: 111 | 112 | ```javascript 113 | ~~3.14 114 | ``` 115 | Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? 116 | **Risposta: 3** 117 | 118 | ```javascript 119 | "i'm a lasagna hog".split("").reverse().join(""); 120 | ``` 121 | Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra? 122 | **Risposta: "goh angasal a m'i"** 123 | 124 | ```javascript 125 | ( window.foo || ( window.foo = "bar" ) ); 126 | ``` 127 | Domanda: Qual è il valore di window.foo? 128 | **Risposta: "bar"** 129 | solo se window.foo era falso altrimenti manterrà il suo valore. 130 | 131 | ```javascript 132 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 133 | ``` 134 | Domanda: Qual è il risultato dei due alert qui sopra? 135 | **Risposta: "Hello World" & ReferenceError: bar is not defined** 136 | 137 | ```javascript 138 | var foo = []; 139 | foo.push(1); 140 | foo.push(2); 141 | ``` 142 | Domanda: Qual è il valore di foo.length? 143 | **Risposta: `2` 144 | 145 | ```javascript 146 | var foo = {}; 147 | foo.bar = 'hello'; 148 | ``` 149 | Domanda: Qual è il valore di foo.length? 150 | **Risposta: `undefined` 151 | 152 | 153 | ## Domande Specifiche su jQuery: 154 | 155 | * Spiega la "concatenazione" [*chaining*]. 156 | * Spiega "deferreds". 157 | * Quali sono alcune ottimizzazioni specifiche per jQuery che puoi implementare? 158 | * Cosa fa `.end()`? 159 | * Come, e perché, assegneresti un namespace al gestore di un evento? 160 | * Citami 4 differenti valori che puoi passare al metodo jQuery. 161 | * Selettore [*selector*] (testo), HTML (testo), Callback (funzione), HTMLElement, oggetti, array, element array, oggetto jQuery, ecc... 162 | * Cosa è la coda di effetti [*fx queue*]? 163 | * Qual è la differenza tra `.get()`, `[]`, e `.eq()`? 164 | * Qual è la differenza tra `.bind()`, `.live()`, e `.delegate()`? 165 | * Qual è la differenza tra `$` e `$.fn`? O anche solo cosa è `$.fn`. 166 | * Ottimizza questo selettore: 167 | ```javascript 168 | $(".foo div#bar:eq(0)") 169 | ``` 170 | 171 | ## Domande Specifiche su CSS: 172 | 173 | * Descrivi cosa fa un file CSS "reset" e in cosa è utile. 174 | * Descrivi i Float e come funzionano. 175 | * Quali sono le varie tecniche di clearing e quale è appropriata per quale contesto? 176 | * Spiega gli sprite CSS, e come li implementeresti in una pagina o in un sito. 177 | * Quali sono le tue tecniche di sostituzione immagini [*image replacement*] preferite e quale usi quando? 178 | * Hack delle proprietà CSS, file .css inclusi con condizioni, o... altro? 179 | * Come servi le tue pagine per i browser con funzionalità limitate? 180 | * Che tecniche/processi usi? 181 | * Quali sono i vari modi per nascondere visualmente il contenuto (e renderlo disponibile solo per gli screen reader)? 182 | * Hai mai usato un sistema di griglie [*grid system*], e se sì, qual è il tuo preferito? 183 | * Hai mai usato o implementato media queries o CSS/layout specifici per mobile? 184 | * Familiarità con lo styling SVG? 185 | * Come ottimizzi le tue pagine web per la stampa? 186 | * Quali sono alcuni dei "trucchi" per scrivere CSS efficiente? 187 | * Usi preprocessori CSS? (SASS, Compass, Stylus, LESS) 188 | * Se sì, descrivi cosa ti piace e cosa non ti piace dei preprocessori CSS che hai usato. 189 | * Come implementeresti una grafica web che usa font non standard? 190 | * Webfonts (servizi di font tipo: Google Webfonts, Typekit, ecc...) 191 | * Spiega come un browser determina quali elementi corrispondono a un selettore CSS. 192 | 193 | ## Domande Opzionali per divertimento: 194 | 195 | * Qual è la cosa più bella che hai mai sviluppato, di cosa sei più orgoglioso? 196 | * Conosci l'HTML5 gang sign? 197 | * Sei o sei mai stato su una barca. 198 | * Quali sono le tue parti preferite degli strumenti di sviluppo che usi? 199 | * Hai qualche interesse, pallino? Di che tipo? 200 | * Spiega il significato di "cornify". 201 | * Su un pezzo di carta, scrivi le lettere A B C D E in fila verticale. Ora mettile in ordine decrescente senza scrivere neanche una linea di codice. 202 | * Aspetta e vedi se girano il foglio sottosopra 203 | * Pirata o Ninja? 204 | * Punti bonus se è una combinazione e se è stata data una buona motivazione (+2 per scimmia ninja pirata zombie) 205 | * Se non fosse per lo sviluppo web, cosa staresti facendo ora? 206 | * Che fine ha fatto Carmen Sandiego? 207 | * Suggerimento: la risposta è sempre sbagliata) 208 | * Qual è la tua feature preferita di Internet Explorer? 209 | * Completa questa frase: Brendan Eich e Doug Crockford sono i __________ di javascript. 210 | * jQuery: un'ottima libreria o la migliore libreria? Discuti. -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /Polish/README_PL.md: -------------------------------------------------------------------------------- 1 | #Pytania kwalifikacyjne na stanowisko front-end web developera 2 | 3 | @wersja 1.0 4 | 5 | #### Pierwotni autorzy 6 | 7 | * @bentruyman (http://bentruyman.com) 8 | * @cowboy (http://benalman.com) 9 | * @roger_raymond (http://twitter.com/iansym) 10 | * @ajpiano (http://ajpiano.com) 11 | * @paul_irish (http://paulirish.com) 12 | * @SlexAxton (http://alexsexton.com) 13 | * @boazsender (http://boazsender.com) 14 | * @miketaylr (http://miketaylr.com) 15 | * @vladikoff (http://vladfilippov.com) 16 | * @gf3 (http://gf3.ca) 17 | * @jon_neal (http://twitter.com/jon_neal) 18 | * @wookiehangover (http://wookiehangover.com) 19 | * @darcy_clarke (http://darcyclarke.me) 20 | * @tairraos (http://xiaole.happylive.org) 21 | 22 | ### Pytania ogólne: 23 | 24 | * Czy używasz Twittera? 25 | * Jeśli tak, czyje konta śledzisz na Twitterze? 26 | * Czy używasz GitHuba? 27 | * Jeśli tak, podaj przykłady śledzonych repozytoriów 28 | * Jakie blogi czytujesz? 29 | * Jakich systemów kontroli wersji używałeś (Git, SVN itd.)? 30 | * Jakie jest Twoje preferowane środowisko programistyczne? (system operacyjny, edytor, przeglądarki, narzędzia itd.) 31 | * Opisz kolejne zadania podczas tworzenia strony internetowej? 32 | * Opisz różnicę między stopniowym ulepszaniem (progressive enhancement) i wdzięczną degradacją (graceful degradation)? 33 | * Dodatkowe punkty za opisanie wykrywania obsługi cech (feature detection) 34 | * Wyjaśnij, co kryje się za terminem "semantyczny HTML". 35 | * Jakiej przeglądarki i narzędzi używasz podczas prac programistycznych? 36 | * Jak optymalizowałbyś zasoby strony internetowej? 37 | * Myśląc o wielu rozwiązaniach, które zawierają: 38 | * Łączenie plików 39 | * Zmniejszenie rozmiaru plików 40 | * Zasoby CDN 41 | * Buforowanie 42 | * itd. 43 | * Dlaczego serwowanie zasobów strony przez wiele domen jest lepsze? 44 | * Ile zasobów pobiera przeglądarka z danej domeny w jednej chwili? 45 | * Podaj 3 sposoby na zmniejszenie czasu ładowania strony. (postrzeganego lub rzeczywistego czasu ładowania) 46 | * Jeśli dołączasz do projektu, w którym używa się tabulacji, a ty używasz spacji, co wtedy zrobisz? 47 | * Sugerowanie użycia narzędzi w stylu EditorConfig (http://editorconfig.org) 48 | * Zgodnie z konwencjami (pozostań konsekwentny) 49 | * `issue :retab! command` 50 | * Napisz prosty pokaz slajdów 51 | * Dodatkowe punkty, jeśli nie używasz JS. 52 | * Jakich narzędzi używasz do sprawdzenia wydajności swojego koodu? 53 | * JSPerf (http://jsperf.com/) 54 | * Dromaeo (http://dromaeo.com/) 55 | * itd. 56 | * Gdybyś mógbyś opanować jedną technologię w tym roku, jaka byłaby to technologia? 57 | * Wyjaśnij znaczenie standardów sieciowych i ich twórców. 58 | * Czym jest FOUC? Jak unikasz FOUC? 59 | 60 | ### Pytania HTML: 61 | 62 | * Co robi `doctype` i jakie znasz przykłady? 63 | * Jaka jest różnica między trybem standardów a trybem dziwactw (quirks mode)? 64 | * Jakie są ogranicznia w serwowaniu stron XHTML? 65 | * Czy istnieją problemy z serwowaniem stron jako `application/xhtml+xml`? 66 | * Jak serwujesz stronę z treścią w wielu językach? 67 | * Co jest ważne przy projektowaniu i tworzeniu stron wielojęzycznych? 68 | * Czy możliwe jest używanie składni XHTML w HTML5? 69 | * Jak używać języka XML w HTML5? 70 | * Jaka jest przydatność atrybutów `data-` 71 | * Czy są modele treści (content models) w HTML4, a także czy różnią się w HTML5? 72 | * Rozpatrujemy HTML5 jako otwartą platformę internetową. Jakie składniki tworzą HTML5? 73 | * Opisz różnice między cookies, sessionStorage i localStorage. 74 | 75 | ### Pytania JS: 76 | 77 | * Jakie biblioteki JavaScript używałeś? 78 | * Czy kiedykolwiek sprawdzałeś kod źródłowy bibliotek, których używałeś? 79 | * Jaka jest różnica między JavaScript a Java? 80 | * Czym jest tablica mieszająca? 81 | * Co oznaczają komunikaty `undefined` i `undeclared` dla zmiennych? 82 | * Czym są domknięcia, jak i po co są używane? 83 | * Ulubiony wzorzec używany do ich tworzenia? argyle (Dotyczy tylko IIFE) 84 | * Jakie znasz typowe użycie funkcji anonimowych? 85 | * Wyjaśnij pomysł "Moduł JavaScript" i kiedy jest wart stosowania. 86 | * Dodatkowe punkty za wzmiankę na temat czytości przestrzeni nazw. 87 | * Co jeśli Twój kod nie używa przestrzeni nazw? 88 | * Jak organizujesz swój kod? (moduły, klasyczne dziedziczenie?) 89 | * Jaka jest różnicza między obiektami typu `host` i `native`? 90 | * Różnica między: 91 | ```javascript 92 | function Person(){} var person = Person() var person = new Person() 93 | ``` 94 | * Jaka jest różnica między `.call` i `.apply`? 95 | * Wyjaśnij `Function.prototype.bind`? 96 | * Kiedy optymalizujesz swój kod? 97 | * Wyjaśnij działanie dziedziczenia w JavaScript? 98 | * Kiedy użyłbyś `document.write()`? 99 | * Wiele generowanych reklam używa `document.write()` choć nie jest to mile widziane 100 | * Jakie są różnice między wykrywaniem obsługi funkcji, wnioskowaniem obsługi funkcji i używaniem ciągu UA 101 | * Omów AJAX jak najbardziej szczegółowo 102 | * Wyjaśnij działanie JSONP (i dlaczego nie jest właściwie AJAX) 103 | * Czy kiedykolwiek używałeś szablonów w JavaScript? 104 | * Jeśli tak, jakie to były biblioteki? (Mustache.js, Handlebars itd.) 105 | * Wyjaśnij pojęcie "hoisting". 106 | * Opisz bąbelkowanie zdarzeń. 107 | * Jak jest różnica między "atrybutem" i "właściwością"? 108 | * Czemu rozszerzanie wbudowanych obiektów w JavaScript jest złym pomysłem? 109 | * Czemu rozszerzenia to dobry pomysł? 110 | * Jak jest różnicą między zdarzeniami `load` i `ready` dla strony internetowej? 111 | * Jaka jest różnica między `==` i `===`? 112 | * Wyjaśnij ewentualny sposób pobrania parametrów z adresu URL w oknie przeglądarki. 113 | * Wyjaśnij politykę pochodzenia w odniesieniu do JavaScript. 114 | * Wyjaśnij delegację zdarzeń. 115 | * Opisz wzorce dziedziczenia w JavaScript. 116 | * Napisz działający kod: 117 | ```javascript 118 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 119 | ``` 120 | * Opisz strategię zapamiętywania (unikanie powtarzalnych obliczeń) w JavaScript. 121 | * Dlaczego mówimy wyrażenie trójkowe, co dokładnie oznacza słowo "trójkowy"? 122 | * Czym jest `arity` funkcji? 123 | * Co oznacza `"use strict";`? Jakie są zalety i wady takiego rozwiązania? 124 | 125 | ### Przykłady kodu JS: 126 | 127 | ```javascript 128 | ~~3.14 129 | ``` 130 | Pytanie: Jaka wartość zostanie zwrócona przez powyższe wyrażenie? 131 | **Odpowiedź: 3** 132 | 133 | ```javascript 134 | "i'm a lasagna hog".split("").reverse().join(""); 135 | ``` 136 | Pytanie: Jaka wartość zostanie zwrócona przez powyższe wyrażenie? 137 | **Odpowiedź: "goh angasal a m'i"** 138 | 139 | ```javascript 140 | ( window.foo || ( window.foo = "bar" ) ); 141 | ``` 142 | Pytanie: Jaka jest wartość window.foo? 143 | **Odpowiedź: "bar"** 144 | tylko jeśli window.foo było fałszywe, w innym przypadku zwraca swoją wartość. 145 | 146 | ```javascript 147 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 148 | ``` 149 | Pytanie: Jaki będzie wyniki wywołania dwóch powyższych poleceń `alert`? 150 | **Odpowiedź: "Hello World" & ReferenceError: bar is not defined** 151 | 152 | ```javascript 153 | var foo = []; 154 | foo.push(1); 155 | foo.push(2); 156 | ``` 157 | Pytanie: Jaka jest wartość foo.length? 158 | **Odpowiedź: `2` 159 | 160 | ```javascript 161 | var foo = {}; 162 | foo.bar = 'hello'; 163 | ``` 164 | Pytanie: Jaka jest wartość foo.length? 165 | **Odpowiedź: `undefined` 166 | 167 | ```javascript 168 | foo = foo||bar 169 | ``` 170 | Pytanie: Co to oznacza? 171 | **Odpowiedź: if(!foo) foo = bar 172 | 173 | ```javascript 174 | foo>>1 175 | ``` 176 | Pytanie: Co to oznacza? 177 | **Odpowiedź: Math.floor(foo/2) 178 | 179 | ```javascript 180 | foo|0 181 | foo+.5|0 182 | ``` 183 | Pytanie: Co to oznacza? 184 | **Odpowiedź: parseInt(foo) & Math.round(foo) 185 | 186 | ```javascript 187 | function foo(bar1, bar2, bar3){} 188 | ``` 189 | Pytanie: Jak pobrać liczbę parametrów? 190 | **Odpowiedź: foo.length //this example is 3 191 | 192 | 193 | ### Pytania jQuery: 194 | 195 | * Wyjaśnij termin "chaining". 196 | * Wyjaśnij termin "deferreds". 197 | * Jakie przykłady optymalizacji jQuery potrafisz wykonać? 198 | * Co robi `.end()`? 199 | * Jak i dlaczego, użyjesz przestrzeni nazw przy obsłudze wiązania zdarzeń? 200 | * Podaj 4 różne wartości, jakie możesz przekazać do metody jQuery. 201 | * Selektor (string), HTML (string), funkcja zwrotna, HTMLElement, obiekt, tablica, element tablicy, obiekt jQuery itd. 202 | * Co to jest kolejka (or fx) queue? 203 | * Jakie są różnicę między `.get()`, `[]`, i `.eq()`? 204 | * Jakie są różnicę między `.bind()`, `.live()`, i `.delegate()`? 205 | * Jakie są różnicę między `$` i `$.fn`? Albo czym jest `$.fn`. 206 | * Zoptymalizuj selektor: 207 | ```javascript 208 | $(".foo div#bar:eq(0)") 209 | ``` 210 | * Różnica między 'delegate()' i 'live()'? 211 | 212 | 213 | ### Pytania CSS: 214 | 215 | * Opisz, czym jest plik "reset" dla CSS i dlaczego jest użyteczny. 216 | * Opisz jak działa właściwość `float`. 217 | * Jakie znasz techniki kasowania (clearing) i kiedy wskazane jest ich stosowanie? 218 | * Wyjaśnij technikę "CSS sprites" oraz sposób jej wdrożenia na stronie. 219 | * Jakie są Twoje ulubione techniki zastępowania obrazów i kiedy je stosujesz? 220 | * Haczyki właściwości CSS, warunkowe dołącznie plików .css lub... coś innego? 221 | * Jak serwujesz strony dla przeglądarek z ograniczonym wsparciem funkcji? 222 | * Jakie techniki stosujesz? 223 | * Jakie istnieją sposoby wizualnego ukrycia treści (i uczynienia ich dostępnymi tylko dla czytników ekranu)? 224 | * Czy kiedykolwiek używałeś systemów siatek, a jeśli tak to jakie preferujesz? 225 | * Czy używałeś 'media queries' lub tworzyłeś konkretne układy i arkusze dla urządzeń mobilnych? 226 | * Czy miałeś styczność ze stylowaniem SVG? 227 | * Jak optymalizujesz swoje strony do druku? 228 | * Jakie stosujesz "sztuczki" przy pisaniu efektywnych CSS? 229 | * Czy używasz narzędzi do przetwarzania CSS? (SASS, Compass, Stylus, LESS) 230 | * Jeśli tak, opisz cechy, które lubisz i nie lubisz w używanych narzędziach. 231 | * Jak tworzysz i wdrażasz projekt używający niestandardowych czcionek? 232 | * Czcionki sieciowe (serwisy czcionek jak: Google Webfonts, Typekit itd.) 233 | * Wyjaśnij jak przeglądarka określa elementy pasujące do selektora CSS? 234 | 235 | ### Pytania dodatkowe (zabawne): 236 | 237 | * Opowiedz o najfajniejszej rzeczy jaką kiedykolwiek zakodowałeś. Z czego jest jesteś najbardziej dumny? 238 | * Czy znasz znak gangu HTML5? 239 | * Czy jesteś teraz lub kiedykolwiek byłeś na statku? 240 | * Jakie są Twoje ulubione narzędzia programistyczne, których używasz? 241 | * Czy masz jakiś swój własny projekt na boku? Jaki? 242 | * Wyjaśnij termin "cornify". 243 | * Napisz na kartce papieru litery A B C D E w pionie. Posortuj je teraz malejąco bez pisania linijki kodu. 244 | * Czekaj i patrz czy obróci kartkę do góry nogami 245 | * Pirat lub Ninja? 246 | * Dodatkowe punkty za połącznie obu i dobre argumenty (+2 dla zombie małpa pirat ninja) 247 | * Jeśli nie web development, co innego byś robił? 248 | * Gdzie na świecie jest Carmen Sandiego? 249 | * Podpowiedź: każda odpowiedź jest zła 250 | * Jaka jest Twoja ulubiona funkcja w Internet Explorer? 251 | * Uzupełnij zdanie: Brendan Eich i Doug Crockford są __________ javascriptu. 252 | * jQuery: wielka biblioteka lub największa biblioteka? Dyskusja. 253 | * http://www.w3schools.com/ lub http://w3fools.com/ 254 | -------------------------------------------------------------------------------- /Portuguese/README.md: -------------------------------------------------------------------------------- 1 | #Questões para entrevista para profissionais Front-end 2 | 3 | @versão 1.0 4 | 5 | **Nota:** Este repositório contém perguntas que podem ser usadas para contratação de um candidato em potencial. Porém, não é recomendado a utilização de cada pergunta para o mesmo candidato (isso levaria horas). Escolhendo alguns items, a lista irá ajudar a analisar as competências requisitadas. 6 | 7 | Tenha em mente que muitas dessas questões estão em aberto e poderiam levar a discussões interessantes que irão revelar mais sobre as competências da pessoa do que uma resposta. 8 | 9 | 10 | ####Contribuidore 11 | 12 | 13 | 14 | **Nota:** A maioria das perguntas foi retirada de um tópico criado e contribuído pelas seguintes pessoas: 15 | 16 | * @bentruyman (http://bentruyman.com) 17 | * @cowboy (http://benalman.com) 18 | * @roger_raymond (http://twitter.com/iansym) 19 | * @ajpiano (http://ajpiano.com) 20 | * @paul_irish (http://paulirish.com) 21 | * @SlexAxton (http://alexsexton.com) 22 | * @boazsender (http://boazsender.com) 23 | * @miketaylr (http://miketaylr.com) 24 | * @vladikoff (http://vladfilippov.com) 25 | * @gf3 (http://gf3.ca) 26 | * @jon_neal (http://twitter.com/jon_neal) 27 | * @wookiehangover (http://wookiehangover.com) 28 | * @darcy_clarke (http://darcyclarke.me) 29 | * @tairraos (http://xiaole.happylive.org) 30 | 31 | ### Questões Gerais: 32 | 33 | * Você está no Twitter? 34 | * Se sim, quem você segue? 35 | * Você está no GitHub? 36 | * Se sim, quais repositórios você segue? 37 | * Quais blogs você lê? 38 | Qual Sistema de Controle de Versão você tem usado? (Git, SVN etc.)? 39 | Qual seu ambiente de trabalho preferido? (SO's, Editores, Browsers, Ferramentas etc.) 40 | * Você pode descrever o seu ambiente de trabalho quando você cria uma página? 41 | * Você poderia descrever qual a diferença entre progressive enhancement e graceful degradation? 42 | * Pontos bônus se descrever detecção de recursos. 43 | * Explique o que "HTML Semântico" significa. 44 | * Qual browser você usa principalmente para desenvolvedor e quais ferramentas de desenvolvimento você usa? 45 | * Como você optimiza os recursos de um website? 46 | * Uma série de soluções podem ser incluídas: 47 | * Concatenação de arquivos 48 | * Minificação de arquivos 49 | * Hospedar em um CDN os arquivos estáticos 50 | * Caching 51 | * etc. 52 | * Porque é muito melhor utilizarmos recursos de um website vindo de vários domínios? 53 | * Quantos recursos podem ser baixados de um determinado domínio simultaneamente? 54 | * Exemplifique 3 modos de diminuir o tempo de carregamento. (tempo de carregamento real ou percebido) 55 | * Se você entrasse em um projeto onde foram utilizados TABS para indentação e você usa ESPAÇOS, o que você faria? 56 | * Sugerir para o projeto a utilização de algo como o EditorConfig (http://editorconfig.org) 57 | * Conformar com as convenções (ficar consistente) 58 | * `issue :retab! command` 59 | * Desenvolva uma página simples para apresentação de slides 60 | * Pontos bônus se não utilizar JS. 61 | * Quais ferramentas você usa para testar a perfomance do seu código? 62 | * JSPerf (http://jsperf.com/) 63 | * Dromaeo (http://dromaeo.com/) 64 | * etc. 65 | 66 | * Se você pudesse dominar uma tecnologia este ano, qual seria? 67 | * Explique a importância de padrões e padrões organizacionais. 68 | * O que é FOUC? Como evitamos o FOUC? 69 | 70 | ### Questões específicas de HTML 71 | * O que `doctype` faz e quantos você consegue nomear? 72 | * Qual a diferença entre standards mode e quirks mode? 73 | * Quais as limitações quando utilizamos páginas XHTML? 74 | * Existe algum problema em utilizar páginas como application/xhtml+xml`? 75 | * Como você desenvolve uma página como conteúdo em múltiplos idiomas? 76 | * Que tipo de coisas que você deve tomar cuidado ao desenvolver um website multi-língua? 77 | * Você pode utilizar a sintaxe XHTML no HTML5? 78 | * Como você usa XML no HTML5? 79 | * Quais são os benefícios em utilizar o atributo `data-`? 80 | * Quais são os modelos de conteúdo do HTML4? Eles são diferentes em HTML5? 81 | * Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção de HTML5? 82 | * Descreva a diferença entre cookies, sessionStorage e localStorage. 83 | 84 | ### Questões específicas de Javascript 85 | * Quais bibliotecas Javascript você tem usado? 86 | * Você alguma vez já olhou no código de alguma biblioteca/framework que você utilizou? 87 | * Quais as diferenças entre Javascript e Java? 88 | * O que é um hashtable? 89 | * Qual a diferença entre variáveis `undefined` e variáveis `undeclared`? 90 | * O que é uma closure, e como/porque você usaria uma? 91 | * Seu padrão favorito é utilizado por ele? Argyle (Apenas aplicáveis para IIFEs) 92 | * Qual o típico uso de uma função anônima? 93 | * Explique o padrão "JavaScript module pattern" e quando você o usaria. 94 | * Pontos bônus para menção de namespaces limpos. 95 | * E se seus módulos são namespace-less? 96 | * Como você utiliza seu código? (module pattern, Herança clássica?) 97 | * Qual a diferença entre objetos herdados e objetos nativos? 98 | * Diferencie: 99 | ```javascript 100 | function Person(){} var person = Person() var person = new Person() 101 | ``` 102 | * Qual a diferença entre `.call` e `.apply`? 103 | * Explique: `Function.prototype.bind`? 104 | * Quando você otimiza seu código? 105 | * Você pode explicar como funciona a herença no Javascript? 106 | * Quando você deve usar o `document.write()`? 107 | * A maioria dos anúncios de publicidade ainda utilizam `document.write ()` embora seu uso não seja recomendado. 108 | * Qual a diferença entre feature detection, feature inference, e o uso de UA string? 109 | * Explique o que é AJAX mais detalhadamente possível. 110 | * Explique como o JSONP funciona (e como ele realmente não é AJAX). 111 | * Você já utilizou templates com Javascript? 112 | * Se sim, quais bibliotecas foram utilizadas? (Mustache.js, Handlebars etc.) 113 | * Explique o que é "hoisting". 114 | * Descreva o que é event bubbling. 115 | * Qual a diferença entre attribute e property. 116 | * Porque a extensão de objetos nativos não são uma boa ideia? 117 | * Porque a extensão de elementos nativos não são uma boa ideia? 118 | * Qual a diferença entre o evento document load e o evento document ready? 119 | * Qual a diferença entre `==` e `===`? 120 | * Explique como você pega uma query string pela url do browser. 121 | * Explique a política de same-origin em relação a Javascript. 122 | * Explique o que é event delegation. 123 | * Descreva os padrões de herança em JavaScript. 124 | * Faça isso funcionar: 125 | ```javascript 126 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 127 | ``` 128 | * Descreva a estratégia para memoization (evitar a repetição de cálculo) no JavaScript. 129 | * O que é um operador ternário, o que a palavra "ternário" indica/significa? 130 | * O que a aridade de uma função? 131 | * O que é o `"use strict";`? Quais a vantagens e desvantagens de sua utilização? 132 | 133 | ### Exemplos de código Javascript: 134 | 135 | ```javascript 136 | ~~3.14 137 | ``` 138 | Questão: Qual é o valor a ser retornado? 139 | **Resposta: 3** 140 | 141 | ```javascript 142 | "sou uma lasanha".split("").reverse().join(""); 143 | ``` 144 | Questão: Qual é o valor a ser retornado? 145 | **Resposta: "ahnasal amu uos"** 146 | 147 | ```javascript 148 | ( window.foo || ( window.foo = "bar" ) ); 149 | ``` 150 | Questão: Qual é o valor de window.foo? 151 | **Resposta: "bar"** 152 | Apenas se window.foo for falso, se não ele vai retornar o seu valor próprio. 153 | 154 | ```javascript 155 | var foo = "Olá"; (function() { var bar = " Mundo"; alert(foo + bar); })(); alert(foo + bar); 156 | ``` 157 | Questão: Qual o retorno destes dois alerts? 158 | **Resposta: "Olá Mundo" & ReferenceError: bar is not defined** 159 | 160 | ```javascript 161 | var foo = []; 162 | foo.push(1); 163 | foo.push(2); 164 | ``` 165 | Questão: Qual é o valor de foo.length? 166 | **Resposta: `2` 167 | 168 | ```javascript 169 | var foo = {}; 170 | foo.bar = 'hello'; 171 | ``` 172 | Questão: Qual é o valor de foo.length? 173 | **Resposta: `undefined` 174 | 175 | ```javascript 176 | foo = foo||bar 177 | ``` 178 | Questão: Qual o significado disso? 179 | **Resposta: if(!foo) foo = bar 180 | 181 | ```javascript 182 | foo>>1 183 | ``` 184 | Questão: Qual o significado disso? 185 | **Resposta: Math.floor(foo/2) 186 | 187 | ```javascript 188 | foo|0 189 | foo+.5|0 190 | ``` 191 | Questão: Qual o significado disso? 192 | **Resposta: parseInt(foo) & Math.round(foo) 193 | 194 | ```javascript 195 | function foo(bar1, bar2, bar3){} 196 | ``` 197 | Questão: Como posso pegar a quantidade de parâmetros? 198 | **Resposta: foo.length //this example is 3 199 | 200 | 201 | ### Questões específicas de jQuery 202 | 203 | * Explique o que é "chaining". 204 | * Explique o que é "deferreds". 205 | * Quais são algumas especificações de optimização do jQuery que você pode implementar? 206 | * O que o `.end()` faz? 207 | * Como, e porque, faria namespacing de vários agregadores de eventos? 208 | * Cite 4 valores diferentes que você pode passar pelo método jQuery 209 | * Seletores (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 210 | * Quais são os efeitos do queue? 211 | * Qual a diferença entre `.get()`, `[]`, e `.eq()`? 212 | * Qual a diferença entre `.bind()`, `.live()`, e `.delegate()`? 213 | * Qual a diferença entre `$` e `$.fn`? Ou, apenas, o que é `$.fn`. 214 | * Optimize esse seletor: 215 | ```javascript 216 | $(".foo div#bar:eq(0)") 217 | ``` 218 | * Qual a diferença entre 'delegate()' e 'live()'? 219 | 220 | 221 | ### Questões específicas de CSS 222 | * Descreva o que é o arquivo "reset" do css e o que ele faz e como ele é útil. 223 | * Descreva o que são floats e como eles funcionam. 224 | * Quais são as várias técnicas para "clearing" e quais delas são apropriadas para qual contexto? 225 | * Explique o que são CSS Sprites, e como você implementaria eles em um website. 226 | * Quais são suas técnicas favoritas para troca de imagens e quais dela você usa. 227 | * 228 | * CSS Hacks, arquivo condicional .css, ou... outra coisa? 229 | * Como você desenvolve sua página para browsers com recursos limitados? 230 | * Quais técnicas/processos você usa? 231 | * Quais são os diferentes modos de deixar o conteúdo escondio (e como fazemos para deixar eles disponíveis apenas para leitores de tela?) 232 | * Você já alguma vez já utilizou um sistema de grid, se sim, qual você prefere? 233 | * Você já utilizou ou implementou media queries ou css's específicos para celular? 234 | * Qual sua familiaridade com SVG? 235 | * Como você optimiza suas páginas para impressão? 236 | * Quais são algumas técnicas para escrever um eficiente CSS? 237 | * Você já utilizou pré-processadores css? (SASS, Compass, Stylus, LESS) 238 | * Se sim, descreva o que você gostou e o que não gostou com eles. 239 | * Como você implementaria um website que não utilizaria fontes padrões nos computadores? 240 | * Webfonts (Serviços como: Google Webfonts, Typekit etc.) 241 | * Explique como um browser determina quais os elementos que correspondem a um seletor CSS? 242 | 243 | ### Questões Opcionais de brincadeiras 244 | 245 | * Qual a coisa mais legal que você desenvolveu, qual você ficou mais orgulhoso? 246 | * Você sabe qual o aperto de mão da gangue do HTML5? 247 | * Você está agora, ou já esteve... num barco? 248 | * Quais suas partes favoritas sobre as ferramentas de desenvolvimento que você usa? 249 | * Você teve algum projeto para animais de estimação? Qual tipo? 250 | 251 | * Explica a importância da "Unicornização". 252 | * Num pedaço de papel, escreva as letras A B C D E verticalmente. Agora coloque isso em ordem decrescente, sem escrever uma linha de código. 253 | * Esperar e ver se eles vire o papel de cabeça para baixo 254 | * Pirata ou Ninja? 255 | * Bônus se ele fizer um combo ou com uma boa razão. (+2 para zombie macaco pirata vestido de ninja) 256 | * Se você não estivesse desenvolvendo, o que você estaria fazendo? 257 | * Onde no mundo fica o Acre? 258 | * Dica: A resposta sempre será errada. 259 | * Qual sua feature favorita do Internet Explorer? 260 | * Complete essa sentença: Brendan Eich e Doug Crockford são os __________ do javascript. 261 | * jQuery: uma boa biblioteca ou a melhor biblioteca? Discutam. 262 | * http://www.w3schools.com/ ou http://w3fools.com/ 263 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Front-end Job Interview Questions 2 | 3 | @version 2.0.0 4 | 5 | This repo contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require. 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 also a great resource to read up on before you head into an interview. 8 | 9 | **Note:** Keep in mind that many of these questions are open ended and could lead to interesting discussions that tell you more about the person's capabilities than a straight answer would. 10 | 11 | ####Original Contributors 12 | 13 | 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: 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 | ### General Questions: 29 | 30 | * What did you learn yesterday/this week? 31 | * What excites or interests you about coding? 32 | * Talk about your preferred development environment. (OS, Editor, Browsers, Tools etc.) 33 | * Can you describe your workflow when you create a web page? 34 | * Can you describe the difference between progressive enhancement and graceful degradation? 35 | * Bonus points for describing feature detection 36 | * Explain what "Semantic HTML" means. 37 | * How would you optimize a websites assets/resources? 38 | * Looking for a number of solutions which can include: 39 | * File concatenation 40 | * File minification 41 | * CDN Hosted 42 | * Caching 43 | * etc. 44 | * Why is it better to serve site assets from multiple domains? 45 | * How many resources will a browser download from a given domain at a time? 46 | * Name 3 ways to decrease page load. (perceived or actual load time) 47 | * If you jumped on a project and they used tabs and you used spaces, what would you do? 48 | * Suggest the project utilize something like EditorConfig (http://editorconfig.org) 49 | * Conform to the conventions (stay consistent) 50 | * `issue :retab! command` 51 | * Write a simple slideshow page 52 | * Bonus points if it does not use JS. 53 | * What tools do you use to test your code's performance? 54 | * Profiler, JSPerf, Dromaeo 55 | * If you could master one technology this year, what would it be? 56 | * Explain the importance of standards and standards bodies. 57 | * What is FOUC? How do you avoid FOUC? 58 | 59 | ### HTML-Specific Questions: 60 | 61 | * What's a `doctype` do? 62 | * What's the difference between standards mode and quirks mode? 63 | * What are the limitations when serving XHTML pages? 64 | * Are there any problems with serving pages as `application/xhtml+xml`? 65 | * How do you serve a page with content in multiple languages? 66 | * What kind of things must you be wary of when design or developing for multilingual sites? 67 | * What are `data-` attributes good for? 68 | * Consider HTML5 as an open web platform. What are the building blocks of HTML5? 69 | * Describe the difference between cookies, sessionStorage and localStorage. 70 | 71 | ### JS-Specific Questions 72 | 73 | * Explain event delegation 74 | * Explain how `this` works in JavaScript 75 | * Explain how prototypal inheritance works 76 | * How do you go about testing your JavaScript? 77 | * AMD vs. CommonJS? 78 | * What's a hashtable? 79 | * What are `undefined` and `undeclared` variables? 80 | * What is a closure, and how/why would you use one? 81 | * Your favorite pattern used to create them? argyle (Only applicable to IIFEs) 82 | * What's a typical use case for anonymous functions? 83 | * Explain the "JavaScript module pattern" and when you'd use it. 84 | * Bonus points for mentioning clean namespacing. 85 | * What if your modules are namespace-less? 86 | * How do you organize your code? (module pattern, classical inheritance?) 87 | * What's the difference between host objects and native objects? 88 | * Difference between: 89 | ```javascript 90 | function Person(){} var person = Person() var person = new Person() 91 | ``` 92 | * What's the difference between `.call` and `.apply`? 93 | * explain `Function.prototype.bind`? 94 | * When do you optimize your code? 95 | * Can you explain how inheritance works in JavaScript? 96 | * When would you use `document.write()`? 97 | * Most generated ads still utilize `document.write()` although its use is frowned upon 98 | * What's the difference between feature detection, feature inference, and using the UA string 99 | * Explain AJAX in as much detail as possible 100 | * Explain how JSONP works (and how it's not really AJAX) 101 | * Have you ever used JavaScript templating? 102 | * If so, what libraries have you used? (Mustache.js, Handlebars etc.) 103 | * Explain "hoisting". 104 | * Describe event bubbling. 105 | * What's the difference between an "attribute" and a "property"? 106 | * Why is extending built in JavaScript objects not a good idea? 107 | * Why is extending built ins a good idea? 108 | * Difference between document load event and document ready event? 109 | * What is the difference between `==` and `===`? 110 | * Explain how you would get a query string parameter from the browser window's URL. 111 | * Explain the same-origin policy with regards to JavaScript. 112 | * Describe inheritance patterns in JavaScript. 113 | * Make this work: 114 | ```javascript 115 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 116 | ``` 117 | * Describe a strategy for memoization (avoiding calculation repetition) in JavaScript. 118 | * Why is it called a Ternary expression, what does the word "Ternary" indicate? 119 | * What is the arity of a function? 120 | * What is `"use strict";`? what are the advantages and disadvantages to using it? 121 | 122 | ### JS-Code Examples: 123 | 124 | ```javascript 125 | ~~3.14 126 | ``` 127 | Question: What value is returned from the above statement? 128 | **Answer: 3** 129 | 130 | ```javascript 131 | "i'm a lasagna hog".split("").reverse().join(""); 132 | ``` 133 | Question: What value is returned from the above statement? 134 | **Answer: "goh angasal a m'i"** 135 | 136 | ```javascript 137 | ( window.foo || ( window.foo = "bar" ) ); 138 | ``` 139 | Question: What is the value of window.foo? 140 | **Answer: "bar"** 141 | only if window.foo was falsey otherwise it will retain its value. 142 | 143 | ```javascript 144 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 145 | ``` 146 | Question: What is the outcome of the two alerts above? 147 | **Answer: "Hello World" & ReferenceError: bar is not defined** 148 | 149 | ```javascript 150 | var foo = []; 151 | foo.push(1); 152 | foo.push(2); 153 | ``` 154 | Question: What is the value of foo.length? 155 | **Answer: `2` 156 | 157 | ```javascript 158 | var foo = {}; 159 | foo.bar = 'hello'; 160 | ``` 161 | Question: What is the value of foo.length? 162 | **Answer: `undefined` 163 | 164 | ### jQuery-Specific Questions: 165 | 166 | * Explain "chaining". 167 | * Explain "deferreds". 168 | * What are some jQuery specific optimizations you can implement? 169 | * What does `.end()` do? 170 | * How, and why, would you namespace a bound event handler? 171 | * Name 4 different values you can pass to the jQuery method. 172 | * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc. 173 | * What is the effects (or fx) queue? 174 | * What is the difference between `.get()`, `[]`, and `.eq()`? 175 | * What is the difference between `.bind()`, `.live()`, and `.delegate()`? 176 | * What is the difference between `$` and `$.fn`? Or just what is `$.fn`. 177 | * Optimize this selector: 178 | ```javascript 179 | $(".foo div#bar:eq(0)") 180 | ``` 181 | * Difference between 'delegate()' and 'live()'? 182 | 183 | 184 | ### CSS-Specific Questions: 185 | 186 | * Describe what a "reset" CSS file does and how it's useful. 187 | * Describe Floats and how they work. 188 | * What are the various clearing techniques and which is appropriate for what context? 189 | * Explain CSS sprites, and how you would implement them on a page or site. 190 | * What are your favourite image replacement techniques and which do you use when? 191 | * CSS property hacks, conditionally included .css files, or... something else? 192 | * How do you serve your pages for feature-constrained browsers? 193 | * What techniques/processes do you use? 194 | * What are the different ways to visually hide content (and make it available only for screen readers)? 195 | * Have you ever used a grid system, and if so, what do you prefer? 196 | * Have you used or implemented media queries or mobile specific layouts/CSS? 197 | * Any familiarity with styling SVG? 198 | * How do you optimize your webpages for print? 199 | * What are some of the "gotchas" for writing efficient CSS? 200 | * What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS) 201 | * If so, describe what you like and dislike about the CSS preprocessors you have used. 202 | * How would you implement a web design comp that uses non-standard fonts? 203 | * Webfonts (font services like: Google Webfonts, Typekit etc.) 204 | * Explain how a browser determines what elements match a CSS selector? 205 | 206 | ### Optional fun Questions: 207 | 208 | * What's the coolest thing you've ever coded, what are you most proud of? 209 | * What are your favorite parts about the developer tools you use? 210 | * Do you have any pet projects? What kind? 211 | * What's your favorite feature of Internet Explorer? 212 | -------------------------------------------------------------------------------- /Russian/README_RU.md: -------------------------------------------------------------------------------- 1 | #Вопросы кандидату на должность front-end разработчика 2 | 3 | @версия 1.0 4 | 5 | **Замечание:** Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь). 6 | 7 | Также, имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе). 8 | 9 | ####Первоначальные авторы 10 | 11 | * @bentruyman (http://bentruyman.com) 12 | * @cowboy (http://benalman.com) 13 | * @roger_raymond (http://twitter.com/iansym) 14 | * @ajpiano (http://ajpiano.com) 15 | * @paul_irish (http://paulirish.com) 16 | * @SlexAxton (http://alexsexton.com) 17 | * @boazsender (http://boazsender.com) 18 | * @miketaylr (http://miketaylr.com) 19 | * @vladikoff (http://vladfilippov.com) 20 | * @gf3 (http://gf3.ca) 21 | * @jon_neal (http://twitter.com/jon_neal) 22 | * @wookiehangover (http://wookiehangover.com) 23 | * @darcy_clarke (http://darcyclarke.me) 24 | 25 | ### Общие вопросы: 26 | 27 | * Вы пользуетесь Твиттером? 28 | * Если да, то кто присутствует в вашей ленте? 29 | * Кого из мировых front-end разработчиков вы знаете? 30 | * А российских front-end'щиков? 31 | * У Вас есть аккаунт на GitHub? 32 | * Если да, то за какими интересными проектами вы следите? 33 | * Какие блоги Вы читаете? 34 | * Какие системы управления версиями Вам приходилось использовать? 35 | * Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты) 36 | * Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу 37 | * Можете ли пояснить разницу между progressive enhancement и graceful degradation? 38 | * Бонус, если также расскажете про feature detection (определение возможностей браузера) 39 | * Объясните, что означает "Семантическая разметка" 40 | * Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь? 41 | * Как можно оптимизировать загрузку внешних ресурсов на странице? 42 | * Комбинация из потенциальных решений: 43 | * Конкатенация 44 | * Минификация 45 | * Использование CDN 46 | * Кеширования 47 | * и т.д. 48 | * Каково преимущество в подгрузке внешних ресурсов с нескольких доменов? 49 | * Сколько ресурсов браузер может одновременно качать с одного домена? 50 | * Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального) 51 | * Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите? 52 | * Предложите использовать EditorConfig (http://editorconfig.org) 53 | * Останетесь верным своим привычкам 54 | * Выполните команду `:retab!` 55 | * Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)? 56 | * Знакомы ли с шаблонизаторами (Smarty, HAML etc.) 57 | * Реализуйте примитивное слайд-шоу 58 | * Бонус, если Вы это сделаете без использования JS 59 | * Какие инструменты Вы используете для тестирования производительности кода? 60 | * JSPerf (http://jsperf.com/) 61 | * Dromaeo (http://dromaeo.com/) 62 | * и т.д. 63 | * Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было? 64 | * Объясните важность стандартов и комитетов по стандартам 65 | * Что такое FOUC (Flash Of Unstyled Content)? Как его избежать? 66 | 67 | ### Вопросы по HTML: 68 | 69 | * Для чего нужен `doctype` и сколько разновидностей Вы можете назвать? 70 | * В чем разница между standards mode и quirks mode? 71 | * Какие ограничения накладывают стандарты XHTML? 72 | * Могут ли возникнуть проблемы при подаче страниц с типом `application/xhtml+xml`? 73 | * Как следует оформлять страницу, в которой контент может быть на разных языках? 74 | * Что нужно иметь в виду при разработке многоязычных сайтов? 75 | * Можно ли использовать синтаксис XHTML в HTML5? 76 | * Как использовать XML в HTML5? 77 | * Чем полезны `data-` атрибуты? 78 | * Какие box-модели есть в HTML4 и есть ли отличия в HTML5? 79 | * Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит? 80 | * Объясните разницу между cookies, sessionStorage и localStorage. 81 | * Знакомы ли с подводными камнями вёрстки почтовых шаблонов? 82 | 83 | ### Вопросы по JavaScript 84 | 85 | * Какими js-библиотеками Вы пользовались? 86 | * Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались? 87 | * Чем JavaScript отличается от Java? 88 | * Что-такое хэш-таблица? 89 | * Что такое `неопределенные (undefined)` и `необъявленные (undeclared)` переменные? 90 | * Что такое замыкание и как/для чего его используют? 91 | * Как вы предпочитаете их использовать? 92 | * Где обычно используются анонимные функции? 93 | * Объясните "JavaScript module pattern" и где он (паттерн) применяется 94 | * Бонус, если упомянута чистота глобального пространства имен 95 | * Что, если Ваш модуль не заключен в пространство имен? 96 | * Как Вы организуете свой код? (module pattern, наследование) 97 | * В чем разница между host-объектами и нативными объектами? 98 | * В чем разница между последними двумя строчками: 99 | 100 | ```javascript 101 | function Person(){} 102 | 103 | var person = Person() 104 | var person = new Person() 105 | ``` 106 | 107 | * В чем разница между `.call` и `.apply`? 108 | * Что делает и для чего нужна функци `Function.prototype.bind`? 109 | * Когда Вы оптимизируете свой код? 110 | * Объясните, как работает наследование в JavaScript? 111 | * Где до сих пор используется `document.write()`? 112 | * В большинстве генерируемых банеров, хотя так делать не рекомендуется 113 | * В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent? 114 | * Расскажите об AJAX как можно более подробно 115 | * Объясните, как работает JSONP (и почему это не настоящий AJAX) 116 | * Вы когда-нибудь использовали шаблонизацию на JavaScript? 117 | * Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.) 118 | * Объясните, что такое "hoisting" 119 | * Объясните event bubbling 120 | * В чем разница между "атрибутом" (attribute) и "свойством" (property)? 121 | * Почему *не следует* расширять нативные JavaScript объекты? 122 | * Почему *следует* расширять нативные JavaScript объекты? 123 | * В чем разница между событиями `document load` и `document ready`? 124 | * В чем разница между `==` и `===`? 125 | * Как получить параметры из URL'а текущего окна? 126 | * Объясните `same-origin policy` в контексте JavaScript 127 | * Объясните `event delegation` 128 | * Какие Вы знаете паттерны организации наследования в JavaScript? 129 | * Сделайте так, чтобы этот код работал: 130 | ```javascript 131 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 132 | ``` 133 | * Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript 134 | * Почему тернарный оператор так называется? 135 | * Что такое арность функции? 136 | * Что делает строчка `"use strict";`? Какие достоинства и недостатки от ее использования? 137 | 138 | ### Примеры кода на JavaScript 139 | 140 | ```javascript 141 | ~~3.14 142 | ``` 143 | Вопрос: Какое значение возвращает данное предложение? 144 | **Ответ: 3** 145 | 146 | ```javascript 147 | "i'm a lasagna hog".split("").reverse().join(""); 148 | ``` 149 | Вопрос: Какое значение возвращает данное предложение? 150 | **Ответ: "goh angasal a m'i"** 151 | 152 | ```javascript 153 | ( window.foo || ( window.foo = "bar" ) ); 154 | ``` 155 | Вопрос: Чему равно window.foo? 156 | **Ответ: "bar"**, 157 | только если выражение window.foo было ложным, иначе переменная сохранит свое изначальное значение 158 | 159 | ```javascript 160 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 161 | ``` 162 | Вопрос: Что покажут эти два alert? 163 | **Ответ: "Hello World" и ReferenceError: bar is not defined** 164 | 165 | ```javascript 166 | var foo = []; 167 | foo.push(1); 168 | foo.push(2); 169 | ``` 170 | Вопрос: Чему равно foo.length? 171 | **Ответ: `2`** 172 | 173 | ```javascript 174 | var foo = {}; 175 | foo.bar = 'hello'; 176 | ``` 177 | Вопрос: Чему равно foo.length? 178 | **Ответ: `undefined`** 179 | 180 | 181 | ### Вопросы по jQuery: 182 | 183 | * Объясните "chaining". 184 | * Объясните "deferreds". 185 | * Какие Вы знаете приемы оптимизации кода, используещего jQuery? 186 | * Что делает `.end()`? 187 | * Как добавить пространство имен к обработчику событий? Для чего это нужно? 188 | * Назовите 4 разных вида аргументов, которые принимает функция jQuery()? 189 | * Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc. 190 | * Что такое очередь эффектов (fx queue)? 191 | * В чем разница между `.get()`, `[]`, и `.eq()`? 192 | * В чем разница между `.bind()`, `.live()`, и `.delegate()`? 193 | * В чем разница между `$` и `$.fn`? Что вообще такое `$.fn`? 194 | * Оптимизируйте данный селектор: 195 | ```javascript 196 | $(".foo div#bar:eq(0)") 197 | ``` 198 | 199 | ### Вопросы по CSS: 200 | 201 | * Что такое "reset" CSS и для чего он нужен? 202 | * Объясните, что такое плавающие элементы (floats) и как они работают? 203 | * Какие вы знаете методы запрета обтекания (clearing) и какие где применяются? 204 | * Что такое CSS спрайты? Как они реализуются на странице или сайте? 205 | * Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете? 206 | * CSS property hacks, conditionally included .css files... 207 | * Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах? 208 | * Какие приемы/процессы Вы при этом используете? 209 | * Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)? 210 | * Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая? 211 | * Приходилось ли Вам использовать или реализовывать media queries или верстку под мобильные устройства? 212 | * Приходилось ли Вам стилизовать SVG? 213 | * Как оптимизировать страницы для печати? 214 | * Какие есть подводные камни в оптимизации производительности CSS? 215 | * Вы используете CSS препроцессоры? (SASS, Compass, Bourbon, Stylus, LESS) 216 | * Если да, расскажите, что Вам в них нравится и не нравится? 217 | * Как Вы сверстаете макет, который использует нестандартные шрифты? 218 | * Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.) 219 | * Объясните, как браузер определяет, на какие элементы накладывать CSS стили? 220 | * Приходилось ли сталкиваться с Retina-дисплеями? 221 | * Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)? 222 | * Если да, то в чем её суть? Расскажите о системе нотификации селекторов. 223 | 224 | ### "Светская беседа": 225 | 226 | * Самое крутое, что Вы когда либо делали и чем гордитесь? 227 | * Вы знаете секретный жест HTML5-банды? 228 | * ([непереводимый юмор](https://vimeo.com/18848658)) Are you now, or have you ever been, on a boat. 229 | * Что Вы больше всего любите в Ваших инструментах разработки? 230 | * У Вас есть какие-нибудь личные проекты? 231 | * Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода. 232 | * Засеките, через сколько времени кандидат перевернет листок 233 | * Пират или ниндзя? 234 | * Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну 235 | * Чем бы Вы занимались, если бы не Web-разработкой? 236 | * Какая Ваша любимая "фишка" Internet Explorer? 237 | * Закончите предложение: Brendan Eich и Doug Crockford являются __________ языка JavaScript. 238 | * jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии... 239 | 240 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /Spanish/README_ES.md: -------------------------------------------------------------------------------- 1 | #GUIA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO 2 | 3 | @version 2.0.0 4 | 5 | Este repositorio contiene preguntas de entrevistas a programadores front-end, que pueden ser usadas para revisar a candidatos potenciales. Bajo ningún concepto se recomienda usar todas las preguntas aquí expuestas con el mismo candidato (eso llevaría horas). Escoger algunos elementos de esta lista debería ayudarle a revisar las habilidades que requiere. 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/) es también un gran recurso a leer (en inglés) antes de ir a una entrevista. 8 | 9 | **Nota:** Tenga en mente que muchas de estas preguntas son abiertas y pueden llevar a interesantes discusiones que le pueden decir más sobre las capacidades de la persona que una simple respuesta. 10 | 11 | #### Contribuyentes originales 12 | 13 | La mayoría de las preguntas fueron extraidas de un hilo de [oksoclap](http://oksoclap.com/) creado originalmente por [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) y ampliado por los siguientes individuos: 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 | ### Preguntas generales: 29 | 30 | * ¿Qué sistemas de control de versiones ha usado (Subversion, Git, etc.)? 31 | * ¿Cuál es su ambiente de desarrollo favorito (Sistema Operativo, Editor de Texto, Navegadores, Herramientas, etc.)? 32 | * ¿Puede describir el proceso que sigue cuando crea una página web? 33 | * ¿Puede describir la diferencia entre "Progressive Enhancement" y "Graceful Degradation"? 34 | * Puntos extra si el entrevistado menciona "detección de capacidades". 35 | * Explique qué significa "HTML Semántico". 36 | * ¿Cuál es el navegador que utiliza principalmente para el desarrollo y qué herramientas de desarrollo usa? 37 | * ¿Cómo optimiza los recursos de una web? 38 | * Se espera una lista respuestas tales como: 39 | * Concatenación de archivos 40 | * Compresión (minificación) de archivos 41 | * Utilizar un CDN 42 | * Caching 43 | * etc. 44 | * ¿Por qué es mejor utilizar varios dominios para distribuir los recursos de una página web? 45 | * ¿Cuántos recursos se pueden descargar simultáneamente de un mismo dominio? 46 | * Mencione tres formas para disminuir el tiempo de carga de una página (tiempo real o percibido). 47 | * Si se ha unido a un proyecto y los desarrolladores usan tabs y usted usa espacios, ¿qué hace? 48 | * Sugerir que el proyecto utilice algo como EditorConfig (http://editorconfig.org) 49 | * Mantener la convención establecida y utilizar tabs. 50 | * Utilizar el comando `:retab!` 51 | * Escriba un página con una galería sencilla. 52 | * Puntos extra si no usa JavaScript. 53 | * ¿Qué herramientas usa para probar el rendimiento de su código? 54 | * JSPerf (http://jsperf.com/) 55 | * Dromaeo (http://dromaeo.com/) 56 | * Entre otras. 57 | * Si pudiera elegir una tecnología para dominar este año, ¿cuál sería? 58 | * Explique la importancia de estándares y los grupos que los definen. 59 | * ¿Sabe que es el FOUC? ¿Cómo lo evita? 60 | 61 | ### Preguntas específicas de HTML: 62 | 63 | * ¿Qué función cumple el `doctype` y cuántos puede nombrar? 64 | * ¿Cuál es la diferencia entre el modo convencional y el "quirks mode"? 65 | * ¿Cuáles son las limitaciones al utilizar páginas XHTML? 66 | * ¿Hay algún problema al servir las páginas usando: `application/xhtml+xml`? 67 | * ¿Cómo programaría una página con contenido en varios lenguajes? 68 | * ¿Qué consideraciones se deben tener cuando se diseñan/desarrollan sitios multi-lenguajes? 69 | * ¿Puede usar sintaxis de XHTML en HTML5? 70 | * ¿Cómo usa XML en HTML5? 71 | * ¿Para qué son buenos los atributos `data-`? 72 | * ¿Cuáles son los modelos de contenido usados en HTML4? ¿Puede compararlos a los de HTML5? 73 | * Si consideramos HTML5 como una plataforma web abierta, ¿cuáles son las piezas del lego que constituyen HTML5? 74 | * Describa la diferencia entre cookies, sessionStorage y localStorage. 75 | 76 | ### Preguntas específicas de JavaScript: 77 | 78 | * Explique "event delegation". 79 | * Explique cómo funciona `this` en JavaScript. 80 | * Explique cómo funciona la herencia de prototipos (prototypal inheritance) en JavaScript. 81 | * ¿Cómo realiza pruebas en JavaScript? 82 | * AMD vs. CommonJS? 83 | * ¿Qué librerías de JavaScript ha usado? 84 | * ¿Alguna vez ha mirado el código fuente de librerías/frameworks que utiliza? 85 | * ¿Qué es un `hashtable`? 86 | * ¿Cuál es la diferencia entre variables `undefined` y variables `undeclared`? 87 | * ¿Qué es un "closure" y cuando, o porqué, usaría uno? 88 | * ¿Cuál es su patrón favorito para crearlos? Cuadriculado (Solo aplica a las IIFEs) 89 | * ¿Puede hablar de un uso típico para una función anónima? 90 | * ¿Puede explicar el Patrón Módulo en JavaScript y cuándo lo usaría? 91 | * Puntos extra por mencionar un namespace no contaminado. 92 | * ¿Qué pasa si sus módulos no tienen un namespace? 93 | * ¿Cómo organiza su código, patrón módulo, herencia clásica? 94 | * ¿Cuál es la diferencia entre objetos huésped (host objects) y objetos nativos? 95 | * ¿Cuál es la diferencia entre: 96 | ```javascript 97 | function Person(){} var person = Person() var person = new Person() 98 | ``` 99 | * ¿Cuál es la diferencia entre `.call` y `.apply`? 100 | * ¿Puede explicar el uso de `Function.prototype.bind`? 101 | * ¿Cuándo optimiza su codigo? 102 | * ¿Puede explicar cómo funciona la herencia en JavaScript? 103 | * ¿Cuándo usarías `document.write()`? 104 | * La mayoría de anuncios de todavía utilizan esta técnica, aunque no es recomendada. 105 | * ¿Cuál es la diferencia entre detección de capacidades, inferencia de capacidades y usar la cadena del user agent. 106 | * Explique AJAX con tanto detalle como pueda. 107 | * Explique cómo funciona JSONP (y cómo no es AJAX realmente) 108 | * ¿Ha utilizado alguna vez templates en JavaScript? 109 | * De ser asi, ¿qué librerías ha usado (Mustache.js, Handlebars, entre otros)? 110 | * ¿Puede explicar en que consiste el "hoisting"? 111 | * ¿Puede hablar sobre "event bubbling"? 112 | * ¿Cuál es la diferencia entre un "atributo" y una "propiedad"? 113 | * ¿Por qué es una mala idea extender objetos nativos de JavaScript? 114 | * ¿Por qué es una buena idea extender objetos nativos de JavaScript? 115 | * ¿Cuál es la diferencia entre el evento "document load" y "document ready"? 116 | * ¿Cuál es la diferencia entre `==` y `===`? 117 | * Si tiene que obtener un parametro de la URL, ¿cómo lo harías? 118 | * Explique la política de mismo origen (same-origin policy) y sus repercusiones en JavaScript. 119 | * ¿Puede describir los patrones de herencia en JavaScript? 120 | * Haga que este código funcione: 121 | ```javascript 122 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 123 | ``` 124 | * ¿Puede describir una estrategia para memoización (*memoization*, evitar repetir cálculos) en JavaScript? 125 | * ¿Por qué reciben el nombre de sentencias ternarias? ¿Qué significa la palabra "ternaria"? 126 | * ¿Qué es el `arity` de una función? 127 | * ¿Qué es `"use strict";`? ¿Cuáles son las ventajas y desventajas de usarlo? 128 | 129 | ### Ejemplos de código de JavaScript: 130 | 131 | ```javascript 132 | ~~3.14 133 | ``` 134 | Pregunta: ¿Cuál es el retorno de la sentencia anterior? 135 | **Respuesta: 3** 136 | 137 | ```javascript 138 | "i'm a lasagna hog".split("").reverse().join(""); 139 | ``` 140 | Pregunta: ¿Cuál es el retorno de la sentencia anterior? 141 | **Respuesta: "goh angasal a m'i"** 142 | 143 | ```javascript 144 | ( window.foo || ( window.foo = "bar" ) ); 145 | ``` 146 | Preguntan: ¿Cuál es el valor de window.foo? 147 | **Respuesta: "bar"** 148 | Únicamente si window.foo tenía un valor falsy, de cualquier otra forma retendrá su valor. 149 | 150 | ```javascript 151 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 152 | ``` 153 | Pregunta: ¿Cuál es el resultado de los dos alerts anteriores? 154 | **Respuesta: "Hello World" y ReferenceError: bar is not defined** 155 | 156 | ```javascript 157 | var foo = []; 158 | foo.push(1); 159 | foo.push(2); 160 | ``` 161 | Pregunta: ¿Cuál es el valor de foo.length? 162 | **Respuesta: `2` 163 | 164 | ```javascript 165 | var foo = {}; 166 | foo.bar = 'hello'; 167 | ``` 168 | Pregunta: ¿Cuál es el valor de foo.length? 169 | **Respuesta: `undefined` 170 | 171 | 172 | ### Preguntas específicas de jQuery: 173 | 174 | * Explique el "encadenamiento" (chaining). 175 | * Explique las "diferidas" (deferreds). 176 | * ¿Cuáles son algunas optimizaciones que se pueden implementar usando jQuery? 177 | * ¿Qué función cumple el método `.end()`? 178 | * ¿Cómo y por qué, aplicaría "namespacing" a un "event handler"? 179 | * Nombre cuatro diferentes valores que se pueden pasar como parámetro al metodo jQuery. 180 | * Un selector (string), HTML (string), Callback (function), HTMLElement, objeto, matriz, matriz de elementos, objeto jQuery, entre otros. 181 | * ¿Qué es la "cola de efectos" (fx queue)? 182 | * ¿Cuál es la diferencia entre `.get()`, `[]` y `.eq()`? 183 | * ¿Cuál es la diferencia entre `.bind()`, `.live()` y `.delegate()`? 184 | * ¿Cuál es la diferencia entre `$` y `$.fn`? O simplemente, ¿qué es `$.fn`? 185 | * Optimize este selector: 186 | ```javascript 187 | $(".foo div#bar:eq(0)") 188 | ``` 189 | * ¿Cuál es la diferencia entre 'delegate()' y 'live()'? 190 | 191 | ## Preguntas específicas de CSS: 192 | 193 | * Describa qué es un archivo "reset" y porqué es útil. 194 | * Describa qué son los "floats" y su funcionamiento. 195 | * ¿Cuáles son los métodos para "limpiar" (clear) sus "floats" y cuál es apropiado en el contexto dado? 196 | * Explique ¿qué son los sprites en CSS y cómo los implementarias en una página? 197 | * ¿Cuál es su técnica favorita para reemplazar imágenes y cuando usa cada una? 198 | * ¿"CSS Hacks", archivos incluidos con etiquetas condicionales o algún otro metodo...? 199 | * ¿Cuál es su enfoque al desarrollar páginas que dan soporte a navegadores con capacidades limitadas? 200 | * ¿Qué técnicas o procesos usa? 201 | * ¿Cuáles son las distintas formas para esconder contenido, pero mantenerlo disponible únicamente para lectores de pantalla? 202 | * ¿Ha usado algún sistema para cuadrículas (grids) y cuál prefiere? 203 | * ¿Ha usado o implementado "media queries" o reglas específicas para dispositivos móviles? 204 | * ¿Está familiarizado con aplicar estilos a SVGs? 205 | * ¿Cómo optimiza sus páginas para la impresión? 206 | * ¿Cuáles son algunas de las "trampas" al escribir CSS eficiente? 207 | * ¿Ha usado algún preprocesador para CSS (SASS, Compass, Stylus, LESS)? 208 | * De ser así, ¿puede mencionar qué le gusta y qué no de los que ha usado? 209 | * ¿Cómo implementaría un diseño que usa fuentes que no son web-safe? 210 | * Webfonts (usando servicios para fuentes como Goodle Webfonts, Typekit, entre otros). 211 | * ¿Puede explicar cómo determina un navegador qué elementos coinciden con un selector de CSS? 212 | 213 | ## Preguntas opcionales y divertidas: 214 | 215 | * ¿Qué es lo más cool que ha programado y qué es lo que más le enorgullece de ello? 216 | * ¿Sabe cuál es la "gang sign" de HTML5? 217 | * ¿Está ahora o ha estado alguna vez en un bote? 218 | * ¿Cuáles son sus partes favoritas de las herramientas de desarrollo que usa? 219 | * ¿Tiene algún proyecto personal? ¿De qué tipo? 220 | * Explique el significado de "cursificar" (cornify). 221 | * Tome un papel y escriba las letras A B C D E verticalmente, ahora póngalas en order descendiente sin escribir una sola línea de código. 222 | * Espere a ver si giran el papel. 223 | * ¿Pirata o Ninja? 224 | * Puntos extra si es una combinación y dio una buena razón, dos puntos extra por monos zombies piratas ninjas. 225 | * ¿Si no estuviera en Desarollo Web, en que estaría trabajando? 226 | * ¿En qué lugar del mundo está Carmen Sandiego? 227 | * Consejo: no hay respuesta correcta. 228 | * ¿Cúal es su funcionalidad favorita de Internet Explorer? 229 | * Complete esta oracion: Brendan Eich y Doug Crockford son los __________ del JavaScript. 230 | * jQuery: ¿Una buena librería o la mejor librería? Explique porqué. 231 | * http://www.w3schools.com/ o http://w3fools.com/ -------------------------------------------------------------------------------- /Swedish/README.md: -------------------------------------------------------------------------------- 1 | #Front-end Anställningsfrågor 2 | 3 | @version 2.0.0 4 | 5 | Detta arkiv innehåller ett urval av frågor som kan ställas till den arbetssökande. Det är verkligen inte rekommenderat att ställa alla frågor här till samma person (det skulle ta timmar). Att välja ut ett par stycken från listan bör hjälpa dig besluta hurvida den arbetssökande uppfyller dina krav. 6 | 7 | **Att tänka på:** Kom ihåg att många av de här frågorna är öppna och kan leda till intressanta diskussioner som berättar mer om personens kunskaper än vad en sluten fråga skulle. 8 | 9 | ####Ursprungliga skribenter 10 | 11 | Majoriteten av de här frågorna var plockade från en [oksoclap](http://oksoclap.com/) tråd som skapades av [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) och bidrod till dessa gjordes av följande personer: 12 | 13 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 14 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 15 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 16 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 17 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 18 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 19 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 20 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 21 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 22 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 23 | * [@darcy_clarke](http://twitter.com/darcy) - http://darcyclarke.me 24 | * [@iansym](http://twitter.com) 25 | 26 | ### Allmänna frågor: 27 | * Vilka versionshanterings-system har du använt(Git, SVN osv.)? 28 | * I vilken utvecklingsmiljö sitter du helst? (OS, Editor, Webbläsare, Vektyg osv.) 29 | * Kan du beskriva ditt arbetsflöde när du skapar en hemsida? 30 | * Kan du beskriva skillnaden mellan 'progressive enhancement' och 'graceful degradation'? 31 | * Bonuspoäng för att beskriva "feature detection" 32 | * Förklara vad som menas med "Semantic HTML". 33 | * Vilken webbläsare använder du huvudsakligen och vilka utvecklingsverktyg använder du? 34 | * Hur skulle du optimera en webbplats resurser? 35 | * Söker en rad lösningar som kan innefatta: 36 | * Sammanfoga filer (File concatenation) 37 | * Minsta på filstorleken (file minification) 38 | * Hosta via CDN 39 | * Caching 40 | * osv. 41 | * Varför är det bättre skicka webbplatsen från en rad olika domäner? 42 | * Hur många resurser kan en webbläsare ladda från en specifik domän åt gången? 43 | * Nämn tre sätt att minska belastningen på en webbsida (uppfattad eller faktiskt laddningstid) 44 | * Om du hoppade på ett projekt och de alla använde tabbar och du mellanrum, vad skulle du då göra? 45 | * Föreslå att projektet använder sig av något som t.ex. EditConfig (http://editorconfig.org) 46 | * Håll dig till sedvanligheterna (var konsekvent) 47 | * `issue :retab! command` 48 | * Sätt ihop ett enkelt bildspel 49 | * Bonuspoäng om det inte använder sig av javascript. 50 | * Vilka verktyg använder du dig av för att testa di kods prestanda? 51 | * JSPerf (http://jsperf.com/) 52 | * Dromaeo (http://dromaeo.com/) 53 | * osv. 54 | * Om du kunde bemästra en teknologi det här året, vad skulle det vara? 55 | * Beskriv varför det är viktigt med en gemensam standard. 56 | * Vad är FOUC? Hur undviker du FOUC? 57 | 58 | ### HTML-specifika frågor: 59 | * Vad gör en dokumenttyp och hur många kan du namnge? 60 | * Vad är skillnaden mellan standard-läge och quirks-läge? 61 | * Vilka begränsningar utsätts du för när du hanterar XHTML sidor? 62 | * Finns det några problem med att skicka sidor som "application/xhtml+xml"? 63 | * Hur skickar du en sida innehållandes flera språk? 64 | * Vad måste du vara försiktig med när du designar eller utvecklar för flerspråks-sidor? 65 | * Kan du använda XHTML syntax i HTML5? 66 | * Hur använder du XML i HTML5? 67 | * Varför är `data-` attributen så bra? 68 | * Vad är innehållsmodellerna i HTML4 och hur skiljer de sig i HTML5? 69 | * Tänk dig HTML5 som en öppen web plattform. Vad är byggstenarna i HTML5? 70 | * Beskriv skillnaden mellan cookies, sessionStorage och localStorage. 71 | 72 | 73 | ### JS-Specifika frågor: 74 | 75 | * Förklara händelse representanterna (event delegation) 76 | * Förklara hur `this` fungerar i JavaScript 77 | * Förklara hur prototypiskt arv fungerar 78 | * Hur gör du för att testa ditt JavaScript? 79 | * AMD eller CommonJS? 80 | * Vilka JavaScript bibliotek har du använt? 81 | * Har du någonsin kollat igenom källkoden till de bibliotek/ramverk du använder? 82 | * Vad är en hashtable? 83 | * Vad är `undefined` och `undeclared` variabler? 84 | * Vad är en blockering (closure) och hur/varför vill du använda det? 85 | * Ditt favoritmönster för att använda dem, argyle (Bara i IIFEs) 86 | * Vad är ett typiskt användningsområde för en annonym funktion? 87 | * Förklara "JavaScript module pattern" och varför du vill använda det. 88 | * Bonuspoäng om man nämner rena namnplatser(clean namespacing) 89 | * Tänk om dina moduler inte har några namnplatser? 90 | * Hur organiserar du din kod? (module pattern, classical inheritance?) 91 | * Vad är skillnaden mellan "host objects" och "native objects"? 92 | * Skillnaden mellan: 93 | ```javascript 94 | function Person(){} var person = Person() var person = new Person() 95 | ``` 96 | * Vad är skillnaden mellan `.call` och `.apply`? 97 | * Förklara `Function.prototype.bind`? 98 | * När optimerar du din kod? 99 | * Kan du förklara hur arv fungerar i JavaScript? 100 | * När skulle du använda `document.write()`? 101 | * De flesta genererade reklamerna använder fortfarande `document.write()` även om de flesta ogillar det 102 | * Vad är skillnaden mellan feature detection, feature inference, och använda UA string 103 | * Förklara AJAX så noggrant som möjligt 104 | * Förklara hur JSONP fungerar(och varför det egentligen inte är AJAX) 105 | * Har du någonsin använt någon JavaScript mall? 106 | * Har du någonsin använt JavaScript templating? 107 | * Om så är fallet, vilka? (T.ex. Mustache.js, Handlebars osv.) 108 | * Förklara "hoisting". 109 | * Beskriv event bubbling. 110 | * Vad är skillnaden mellan "attribute" och "property"? 111 | * Varför är det inte bra att utvidga (extending) JavaScript objekt? 112 | * Varför är det bra att utvidga inbyggt ins? 113 | * Skillnaden mellan "document load event" och "document ready event"? 114 | * Vad är skillnaden mellan `==` and `===`? 115 | * Förklara hur du får en fråge-sträng parameter från webbläsarens URL fält. 116 | * Förklara "same-origin policy" med hänsyn till JavaScript. 117 | * Förklara arv mönster i JavaScript. 118 | * Få det här att fungera 119 | ```javascript 120 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 121 | ``` 122 | * Beskriv en strategi för "moemoization" (undvika uträkningsrepetioner) i JavaScript. 123 | * Varför kallas det för "Ternary expression", vad menas med ordet "Ternary"? 124 | * Vad är "the arity" av en funktion? 125 | * Vad är `"use strict";`? Vad för- och nackdelar med att använda det? 126 | 127 | ### JS-Code Exempel: 128 | 129 | ```javascript 130 | ~~3.14 131 | ``` 132 | Fråga: Vilket värde returneras från ovanstående? 133 | **Svar: 3** 134 | 135 | ```javascript 136 | "i'm a lasagna hog".split("").reverse().join(""); 137 | ``` 138 | Fråga: Vilket värde returneras från ovanstående? 139 | **Svar: "goh angasal a m'i"** 140 | 141 | ```javascript 142 | ( window.foo || ( window.foo = "bar" ) ); 143 | ``` 144 | Fråga: Vad är värdet av window.foo? 145 | **Svar: "bar"** 146 | bara om window.foo var falskt annars skulle den behålla dess värde. 147 | 148 | ```javascript 149 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 150 | ``` 151 | Fråga: Vad kommer de två alerterna att ropa ut? 152 | **Svar: "Hello World" & ReferenceError: bar is not defined** 153 | 154 | ```javascript 155 | var foo = []; 156 | foo.push(1); 157 | foo.push(2); 158 | ``` 159 | Fråga: Vad är värdet av foo.length? 160 | **Svar: `2` 161 | 162 | ```javascript 163 | var foo = {}; 164 | foo.bar = 'hello'; 165 | ``` 166 | Fråga: Vad är värdet av foo.length? 167 | **Svar: `undefined` 168 | 169 | ### jQuery-Specifika frågor: 170 | 171 | * Förklara "chaining". 172 | * Förklara "deferreds". 173 | * Vad är några jQuery optimeringar du kan göra? 174 | * Vad gör `.end()`? 175 | * Hur, och varför, skulle du "namespace a bound event handler"? 176 | * Nämn fyra olika värden du kan skicka till jQuery metoden 177 | * Selektorn (sträng), HTML (sträng), Callback (funktion), HTMLElement, objekt, array, element array, jQuery objekt osv. 178 | * Vad är effekt(effects)(or fx) kön? 179 | * Vad är skillnaden mellan `.get()`, `[]`, och `.eq()`? 180 | * Vad är skillnaden mellan `.bind()`, `.live()`, och `.delegate()`? 181 | * Vad är skillnaden mellan `$` och `$.fn`? eller bara, vad är `$.fn`. 182 | * Förbättra den här selektorn: 183 | ```javascript 184 | $(".foo div#bar:eq(0)") 185 | ``` 186 | * Skillnaden mellan 'delegate()' och 'live()'? 187 | 188 | 189 | ### CSS-Specifika frågor: 190 | * Förklara vad en återställnings (reset) CSS file gör och varför den är användbar. 191 | * Beskriv Floats och hur de fungerar. 192 | * Vilka olika återställningstekniker finns de och i vilka sammanhang är de relevanta? 193 | * Beskriv "CSS sprites", och hur du skulle implementera dem på en sida. 194 | * Vilka är dina favorit bild-ersättningstekniker och vilka använder du? 195 | * CSS "property hacks",villkorligt inkluderade .css filer eller något annat? 196 | * Hur skickar du sidor till funktions begränsade webbläsare? 197 | * Vilka tekniker/processer använder du? 198 | * Vilka olika sätt finns det att visuellt dölja element (och bara göra de tillgängligt för skärmläsare)? 199 | * Har du någonsin använt ett rutnät-system, och i sådana fall, vilket föredrar du? 200 | * Har du någonsin använt eller implementerat media frågor eller mobil-specifika layouter/CSSer? 201 | * Någon erfarenhet av att styla SVG? 202 | * Hur förbättrar du dina webbplatser för utskrift? 203 | * Vilka är några av de "gotchas" som finns för att skriva effektiv CSS? 204 | * Använder du CSS preprocessorer? (SASS, Compass, Stylus, LESS) 205 | * I sådana fall, beskriv vad du gillar och ogillar med de du använt. 206 | * Hur skulle du implementera en webdesign som använder icke-standardiserade typsnitt? 207 | * Typsnitt (Typsnitts-tjänster som: Google web-typsnitt, Typekit osv.) 208 | * Förklara hur en webbläsare bestämmer vilka element som matchar en CSS-väljare (selector) 209 | 210 | 211 | ### Roliga alternativa frågor: 212 | 213 | * Vad är den coolaste grejen du någonsin har kodat och vad är du mest stolt över? 214 | * Känner du till HTML5-gang tecknet? 215 | * Är du nu, eller har någonsin vart på en båt? 216 | * Vilka är dina favorit-grejer som finns i dina utvecklarverktyg som du använder? 217 | * Har du något eller några egna projekt som du håller kärt? I sådana fall vad för typer? 218 | * Beskriv betydelsen av "cornify". 219 | * På ett papper, skriv ner bokstäverna A B C D E verktikalt. Nu sätt de i fallande ordning utan att skriva en enda rad av kod. 220 | * Vänta och se om de vänder på pappret upp och ner. 221 | * Pirat eller ninja? 222 | * Bonuspoäng om det är en kombination och en bra förklaring varför. (+2 för zombi-ap-pirat-ninjor) 223 | * Om inte webutveckling, vad skulle du då helst göra? 224 | * Vart i världen är Carmen Sandiego? 225 | * Tips: Deras svar är alltid fel 226 | * Vilken är din favorit-funktion i Internet Explorer? 227 | * Avsluta den här meningen: Brendan Eich och Doug Crockford är __________ av JavaScript. 228 | * jQuery: Ett bra bibliotek eller de bästa? Diskutera. 229 | * http://www.w3schools.com/ eller http://w3fools.com/ 230 | --------------------------------------------------------------------------------