├── README.md └── README_Korean.md /README.md: -------------------------------------------------------------------------------- 1 | #JOB INTERVIEW QUESTIONNAIRE 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 | * Are you on Twitter? 12 | * If so, who do you follow on Twitter? 13 | * Are you on GitHub? 14 | * If so, what are some examples of repos you follow 15 | * What blogs do you follow? 16 | * What version control systems have you used? 17 | * What is your preferred development environment? (OS, Editor, Browsers, Tools etc.) 18 | * Can you describe your workflow when you create a web page? 19 | * Can you describe the difference between progressive enhancement and graceful degradation? 20 | * Bonus points for the answer "no one can" 21 | * Extra bonus points for describing feature detection 22 | * Explain what "Semantic HTML" means. 23 | * What does "minification" do? 24 | * Why is it better to serve site assets from multiple domains? 25 | * How many resources will a browser download from a given domain at a time? 26 | * If you have 8 different stylesheets for a given design, how would you integrate them into the site? 27 | * Looking for file concatenation. 28 | * Points off for `@import`, unless it works in conjunction with a build system. 29 | * If you jumped on a project and they used tabs and you used spaces, what would you do? 30 | * `issue :retab! command` 31 | * Write a simple slideshow page 32 | * Bonus points if it does not use JS. 33 | * What tools do you use to test your code's performance? 34 | * If you could master one technology this year, what would it be? 35 | * Name 3 ways to decrease page load. (perceived or actual load time) 36 | * Explain the importance of standards. 37 | 38 | ## HTML-Specific Questions: 39 | 40 | * What's a `doctype` do, and how many can you name? 41 | * What's the difference between standards mode and quirks mode? 42 | * What are the limitations when serving XHTML pages? 43 | * Are there any problems with serving pages as `application/xhtml+xml`? 44 | * How do you serve a page with content in multiple languages? 45 | * Can you use XHTML syntax in HTML5? How do you use XML in HTML5? 46 | * What are `data-` attributes good for? 47 | * What are the content models in HTML4 and are they different in HTML5? 48 | * Consider HTML5 as an open web platform. What are the building blocks of HTML5? 49 | * Describe the difference between cookies, sessionStorage and localStorage. 50 | 51 | ## JS-Specific Questions 52 | 53 | * Which JavaScript libraries have you used? 54 | * How is JavaScript different from Java? 55 | * What are `undefined` and `undeclared` variables? 56 | * What is a closure, and how/why would you use one? 57 | * Your favorite pattern used to create them? argyle (Only applicable to IIFEs) 58 | * What's a typical use case for anonymous functions? 59 | * Explain the "JavaScript module pattern" and when you'd use it. 60 | * Bonus points for mentioning clean namespacing. 61 | * What if your modules are namespace-less? 62 | * how do you organize your code? (module pattern, classical inheritance?) 63 | * What's the difference between host objects and native objects? 64 | * Difference between: 65 | ```javascript 66 | function Person(){} var person = Person() var person = new Person() 67 | ``` 68 | * What's the difference between `.call` and `.apply`? 69 | * explain `Function.prototype.bind`? 70 | * When do you optimize your code? 71 | * Can you explain how inheritance works in JavaScript? 72 | * Bonus points for the funny answer: "no one can" 73 | * Extra bonus points if they take a stab at explaining it 74 | * When would you use `document.write()`? 75 | * Correct answer: 1999 - time to weed out the junior devs 76 | * What's the difference between feature detection, feature inference, and using the UA string 77 | * Explain AJAX in as much detail as possible 78 | * Explain how JSONP works (and how it's not really AJAX) 79 | * Have you ever used JavaScript templating, and if so, what/how? 80 | * Explain "hoisting". 81 | * What is FOUC? How do you avoid FOUC? 82 | * Describe event bubbling. 83 | * What's the difference between an "attribute" and a "property"? 84 | * Why is extending built in JavaScript objects not a good idea? 85 | * Why is extending built ins a good idea? 86 | * Difference between document load event and document ready event? 87 | * What is the difference between `==` and `===`? 88 | * Explain how you would get a query string parameter from the browser window's URL. 89 | * Explain the same-origin policy with regards to JavaScript. 90 | * Explain event delegation. 91 | * Describe inheritance patterns in JavaScript. 92 | * Make this work: 93 | ```javascript 94 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 95 | ``` 96 | * Describe a strategy for memoization (avoiding calculation repetition) in JavaScript. 97 | * Why is it called a Ternary statement, what does the word "Ternary" indicate? 98 | * What is the arity of a function? 99 | 100 | ## JS-Code Examples: 101 | 102 | ```javascript 103 | >~~3.14 104 | ``` 105 | Question: What value is returned from the above statement? 106 | **Answer: 3** 107 | 108 | ```javascript 109 | "i'm a lasagna hog".split("").reverse().join(""); 110 | ``` 111 | Question: What value is returned from the above statement? 112 | **Answer: "goh angasal a m'i"** 113 | 114 | ```javascript 115 | ( window.foo || ( window.foo = "bar" ) ); 116 | ``` 117 | Question: What is the value of window.foo? 118 | **Answer: "bar"** 119 | if intially window.foo was false, undefined or zero else it will retain its value. 120 | 121 | ```javascript 122 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 123 | ``` 124 | Question: What is the outcome of the two alerts above? 125 | **Answer: "Hello World" & ReferenceError: bar is not defined** 126 | 127 | ## jQuery-Specific Questions: 128 | 129 | * Explain "chaining". 130 | * What does `.end()` do? 131 | * How, and why, would you namespace a bound event handler? 132 | * What is the effects (or fx) queue? 133 | * What is the difference between `.get()`, `[]`, and `.eq()`? 134 | * What is the difference between `.bind()`, `.live()`, and `.delegate()`? 135 | * What is the difference between `$` and `$.fn`? Or just what is `$.fn`. 136 | * Optimize this selector: 137 | ```javascript 138 | $(".foo div#bar:eq(0)") 139 | ``` 140 | 141 | ## CSS-Specific Questions: 142 | 143 | * Describe what a "reset" CSS file does and how it's useful. 144 | * Describe Floats and how they work. 145 | * What are the various clearing techniques and which is appropriate for what context? 146 | * Explain CSS sprites, and how you would implement them on a page or site. 147 | * What are the differences between the IE box model and the W3C box model? 148 | * What are your favourite image replacement techniques and which do you use when? 149 | * CSS property hacks, conditionally included .css files, or... something else? 150 | * How do you serve your pages for feature-constrained browsers? 151 | * What techniques/processes do you use? 152 | * What are the different ways to visually hide content (and make it available only for screen readers)? 153 | * Have you ever used a grid system, and if so, what do you prefer? 154 | * Have you used or implement media queries or mobile specific layouts/CSS? 155 | * Any familiarity with styling SVG? 156 | * How do you optimize your webpages for print? 157 | * What are some of the "gotchas" for writing efficient CSS? 158 | * Do you use CSS preprocessors? 159 | * If so, describe what you like and dislike about the CSS preprocessors you have used. 160 | * How would you implement a web design comp that uses non-standard fonts? (avoid mentioning webfonts so they can figure it out) 161 | * Explain how a browser determines what elements match a CSS selector? 162 | 163 | ## Optional fun Questions: 164 | 165 | * What's the coolest thing you've ever coded, what are you most proud of? 166 | * Do you know the HTML5 gang sign? 167 | * Are you now, or have you ever been, on a boat. 168 | * Tell me your favorite parts about Firebug / Webkit Inspector. 169 | * Do you have any pet projects? What kind? 170 | * Explain the significance of "cornify". 171 | * On a piece of paper, write down the letters A B C D E vertically. Now put these in descending order without writing one line of code. 172 | * Wait and see if they turn the paper upside down 173 | * This should make the laugh and is a fine way to relieve some tension at the end of the interview. 174 | * Pirate or Ninja? 175 | * Bonus if it's a combo and a good reason was given (+2 for zombie monkey pirate ninjas) 176 | * If not Web Development what would you be doing? 177 | * Where in the world is Carmen Sandiego? (hint: their answer is always wrong) 178 | * What's your favorite feature of Internet Explorer? 179 | * Complete this sentence: Brendan Eich and Doug Crockford are the __________ of javascript. 180 | * jQuery: a great library or the greatest library? Discuss. -------------------------------------------------------------------------------- /README_Korean.md: -------------------------------------------------------------------------------- 1 | #구직 면접 설문지 2 | 3 | @버전 1.0 4 | 5 | ##원본(English) 참여자 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 | ##한글번역 참여자 (Contributors For Korean Version) 10 | 11 | EngForDev.com 12 | @nassol(http://engfordev.com) , @rkJun (http://twitter.com/rkjun), @leedaeyeop(이대엽), @sj38.park, @tw shim, 13 | @원강민(http://www.apollocation.co.kr/) 14 | 15 | ## 일반적인 질문: 16 | 17 | * 트위터 사용하시나요? 18 | * 트위터를 사용한다면, 트위터에서 누구 팔로우해요? 19 | * 깃헙을 사용하시나요? 20 | * 사용하신다면 어떤 리포지터리를 보고계신가요? 21 | * 어떤 블로그를 구독하고 계신가요? 22 | * 어떤 버전관리시스템을 사용하시나요? 23 | * 어떤 개발 환경을 선호하시나요?(운영체제, 텍스트 편집기, 인터넷 브라우저, 기타) 24 | * 웹 페이지를 어떻게 만들었는지 과정을 설명할 수 있나요? 25 | * 우아한 기능저하와 점진적 향상의 차이점을 설명해보세요. 26 | * “아무도 그런 것은 할 수가 없습니다.” 라고 답한 사람에게는 보너스 점수를 준다. 27 | * 피쳐 디텍션을 설명할 수 있으면 추가 보너스 포인트 28 | * 시맨틱 HTML 의 의미를 설명해 보세요. 29 | * 최소화 한다는 건 무슨 뜻입니까? 30 | * 사이트 자산을 여러 도메인에서 서비스하는 것이 좋은 이유는 무엇입니까? 31 | * 브라우저는 특정 도메인의 자원을 한 번에 얼마나 다운로드합니까? 32 | * 특정 디자인에 대해 8개의 스타일시트가 있다면 이것들을 한 사이트로 어떻게 통합하겠습니까? 33 | * 파일들의 연관성을 찾으세요. 34 | * 빌드 시스템내 연결되어 돌아가는 게 아니라면, `@import` 는 쓰지 마세요. 35 | * 프로젝트에 투입되었는데, 코드의 들여쓰기에 기존 인력들은 탭을 써 왔고, 당신은 스페이스를 사용해 왔다면, 어떻게 할 건가요? 36 | * `:retab! 커맨드에 관한 문제임` 37 | * 간단한 슬라이드쇼 페이지를 작성해 보세요 38 | * 자바스크립트를 사용하지 않는다면 추가 점수를 줍니다. 39 | * 코드의 성능을 테스트할 때 어떤 도구를 사용하십니까? 40 | * 올해 한 가지 기술을 마스터할 수 있다면 뭘 마스터하시겠습니까? 41 | * 페이지 부하(인지적 부하 시간과 실제 부하 시간)를 줄이는 3가지 방법을 말씀하세요. 42 | * 표준의 중요성을 설명하세요. 43 | 44 | ## HTML 관련 질문: 45 | 46 | * `doctype`이 하는 일은 뭔가요? `doctype`을 몇 개나 댈 수 있나요? 47 | * 스탠더드 모드와 관용(쿼크) 모드간의 차이를 말해 보세요. 48 | * XHTML 페이지를 운용할 때 발생하는 제약으로는 뭐가 있나요? 49 | * 페이지를 `application/xhtml+xml`로 운용할 때 발생하는 문제가 있을까요? 50 | * 다국어로 작성된 컨텐츠를 가지고있는 페이지를 어떻게 보여줄건가요? 51 | * HTML5에서 XHTML 구문을 사용할 줄 아나요? HTML5에서 XML을 어떻게 사용하나요? 52 | * `data-` attributes를 어디에 쓰면 좋나요? 53 | * HTML4의 content model은 무엇인가요? 그리고 HTML5의 content model하고는 다른가요? 54 | * HTML5를 개방형 웹 플랫폼으로 생각해봅시다. HTML5의 기본 구성요소는? 55 | * 쿠키, 세션 스토리지(sessionStorage), 로컬 스토리지(locationStorage)의 차이점을 서술하세요. 56 | 57 | ## 자바스크립트에 관한 질문들 58 | 59 | * 어떤 자바스크립트 라이브러리를 사용해 봤나요? 60 | * 자바와 자바스크립트의 차이점은? 61 | * 미정의(`undefined`)와 미선언(`undeclared`) 변수에 대해 설명해보세요. 62 | * 클로저(closure)란 무엇이고 클로저를 왜/언제 사용할까요? 63 | * 클로저를 생성할 때 즐겨쓰는 패턴은? 아가일(IIFE에만 적용 가능한) 64 | * 익명 함수의 일반적인 쓰임새는? 65 | * 자바스크립트 모듈 패턴에 대해서 설명하세요. 그리고 어떤 경우에 쓰겠는지 얘기하세요. 66 | * 깔끔한 네임스페이스(clean namespacing)에 관해 언급하면 추가 점수를 준다. 67 | * 모듈에 네임스페이스가 없다면? 68 | * 코드를 어떻게 정리합니까? (모듈 패턴, 고전적인 상속?) 69 | * 호스트 객체와 네이티브 객체의 차이점은? 70 | * 두 구문의 차이점은?: 71 | ```javascript 72 | function Person(){} var person = Person() var person = new Person() 73 | ``` 74 | * `.call` 과 `.apply` 의 차이점은? 75 | * `Function.prototype.bind` 에 대해 설명해 보세요. 76 | * 언제 코드를 최적화하나요? 77 | * 자바스크립트에서 상속이 어떤 방식으로 작동하는지 설명할 수 있나요? 78 | * "그건 아무도 설명할 수 없습니다." 라는 답변에 보너스 점수 주기 79 | * 설명하려고 시도한다면 추가 점수를 준다. 80 | * 언제 `document.write()` 를 사용하나요? 81 | * 올바른 답: 1999년 - 이제 미숙한 개발 관행은 뿌리뽑을 때다. 82 | * 기능 탐지(feature detection)와 기능 추론(feature inference), UA 문자열의 차이점은? 83 | * AJAX에 관해 가능한 한 자세하게 설명하시오. 84 | * JSONP의 작동 방식을 설명하시오(그리고 어떻게 JSONP가 진정한 AJAX가 아닌지도). 85 | * 자바스크립트 템플릿을 써본 적이 있습니까? 그렇다면 무엇을 어떻게 쓰셨나요? 86 | * 호이스팅(hoisting)에 관해 설명하시요. 87 | * FOUC가 뭔가요? FOUC를 피하는 방법은? 88 | * 이벤트 버블링에 관해 설명하시오. 89 | * 어트리뷰트(attribute)와 프로퍼티(property)의 차이점은? 90 | * 자바스크립트 객체에 내장된 기능을 확장하는 것이 안 좋은 이유는? 91 | * 내장 기능(built ins)을 확장하는 것이 좋은 이유는? 92 | * document load 이벤트와 document ready 이벤트의 차이점은? 93 | * `==` 와 `===`의 차이점은? 94 | * 브라우저 창의 URL로 전달된 질의 문자열 매개변수를 가져하는 방법을 설명해 보세요. 95 | * 자바스크립트와 관련된 동일 출처 정책(same-origin policy)에 관해 설명해 보세요. 96 | * 이벤트 위임에 대해 설명해 보세요. 97 | * 자바스크립트의 상속 패턴에 대해 설명해 보세요. 98 | * 아래의 자바스크립트 코드를 작동하게 만드세요: 99 | ```javascript 100 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 101 | ``` 102 | * 자바스크립트에서의 메모이제이션(memoization, 반복적인 계산을 방지하는) 전략을 설명하시요. 103 | * 삼항문(Tenary statement)을 왜 이렇게 부르고 여기서 “삼항”이라는 단어가 가리키는 의미는? 104 | * 함수에서 인자의 개수(arity)란 뭔가요? 105 | 106 | ## JS-Code Examples: 107 | 108 | ```javascript 109 | >~~3.14 110 | ``` 111 | 질문: 위 구문은 어떤 값을 돌려주는가? 112 | **답: 3** 113 | 114 | ```javascript 115 | "i'm a lasagna hog".split("").reverse().join(""); 116 | ``` 117 | 질문: 위 구문은 어떤 값을 돌려주는가? 118 | **답: "goh angasal a m'i"** 119 | 120 | ```javascript 121 | ( window.foo || ( window.foo = "bar" ) ); 122 | ``` 123 | 질문: window.foo의 값은 무엇인가? 124 | **답: "bar"** 125 | window.foo의 초기값이 false나 udefined, 또는 0일 경우. 그 밖의 경우에는 기존 값을 유지 126 | 127 | ```javascript 128 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 129 | ``` 130 | 질문: 두 alert 문의 결과는? 131 | **답: "Hello World" 와 ReferenceError: bar is not defined** 132 | 133 | ## jQuery 관련 질문: 134 | 135 | * “메서드 연쇄 호출(chaining)”에 관해 설명하세요. 136 | * `.end()`가 하는 것은 무엇인가요? 137 | * 이벤트 핸들러를 바인딩할 때 네임스페이스를 지정하는 방법과 그 이유는? 138 | * 효과(또는 fx) 큐란? 139 | * `.get()`, `[]`, 와 `.eq()` 의 차이점은 무엇인가요?? 140 | * `.bind()`, `.live()`, 와 `.delegate()` 간의 차이는 무엇인가요? 141 | * `$` 와 `$.fn`의 차이점은? 또 `$.fn`은 무엇인가요? 142 | * 다음 셀렉터를 최적화해보세요: 143 | ```javascript 144 | $(".foo div#bar:eq(0)") 145 | ``` 146 | 147 | ## CSS 관련 질문: 148 | 149 | * CSS의 "리셋(reset)" 이 무엇인지와 장점에 대해 설명하세요. 150 | * Floats에 대해 설명하고, 어떤 방식으로 작동하는지 설명하세요. 151 | * What are the various clearing techniques and which is appropriate for what context? 152 | * CSS의 sprite 기법을 설명하고, 어떤 방식으로 페이지나 사이트에 구현하는지를 설명하세요. 153 | * IE 박스모델과 W3C 박스 모델의 차이점은 무엇입니까? 154 | * What are your favourite image replacement techniques and which do you use when? 155 | * CSS 프로퍼티 핵, 조건부 .css 파일 포함시키기, ...그리고 또 뭐가 있나요? 156 | * 기능이 제한되어있는 브라우저에서 어떻게 페이지를 보여줍니까? 157 | * 사용하는 기술/처리기법은 무엇입니까? 158 | * 화면에 보여주는 컨텐츠를 숨기는 다른 방법들은 무엇입니까? (화면에 보이진 않아도, 화면을 읽어주는 프로그램-음성출력같은-에서는 가능해야함) 159 | * 그리드 시스템을 사용한 경험이 있다면, 어떤 그리드 시스템을 선호합니까? 160 | * Have you used or implement media queries or mobile specific layouts/CSS? 161 | * Any familiarity with styling SVG? 162 | * 웹페이지의 인쇄를 최적화하기 위해서는 어떻게 합니까? 163 | * What are some of the "gotchas" for writing efficient CSS? 164 | * CSS 전처리기를 사용합니까? 165 | * If so, describe what you like and dislike about the CSS preprocessors you have used. 166 | * How would you implement a web design comp that uses non-standard fonts? (avoid mentioning webfonts so they can figure it out) 167 | * Explain how a browser determines what elements match a CSS selector? 168 | 169 | ## Optional fun Questions: 170 | 171 | * 지금까지중 가장 멋지게 코딩했던 것은 무엇인지, 그리고 가장 자랑스러웠던 것은? 172 | * HTML5 갱 사인을 아시나요? (역주: 셋과 둘, 또는 넷과 하나를 표시하는 행위) 173 | * Are you now, or have you ever been, on a boat. 174 | * 파이어버그/웹킷 인스펙터에서 가장 좋아하는 부분을 말해 보세요. 175 | * Do you have any pet projects? What kind? 176 | * Explain the significance of "cornify". 177 | * On a piece of paper, write down the letters A B C D E vertically. Now put these in descending order without writing one line of code. 178 | * Wait and see if they turn the paper upside down 179 | * This should make the laugh and is a fine way to relieve some tension at the end of the interview. 180 | * 해적 또는 닌자? 181 | * Bonus if it's a combo and a good reason was given (+2 for zombie monkey pirate ninjas) 182 | * 웹 개발이 아니었다면, 무엇을 하고 있었을 것 같습니까? 183 | * Where in the world is Carmen Sandiego? (hint: their answer is always wrong) 184 | * 자주쓰는 인터넷 익스플로러의 기능은 무엇입니까? 185 | * 이 문장을 완성하세요: Brendan Eich 와 Doug Crockford 는 자바스크립트의 __________ 이다. 186 | * jQuery: 멋진 라이브러리나 최고의 라이브러리가 있다면 의견 주세요. 187 | --------------------------------------------------------------------------------