├── .gitignore ├── src ├── _includes │ ├── assets │ │ ├── css │ │ │ ├── footer.css │ │ │ ├── defaults.css │ │ │ ├── variables.css │ │ │ ├── header.css │ │ │ ├── prism.css │ │ │ ├── navigation.css │ │ │ └── content.css │ │ └── js │ │ │ └── app.js │ ├── components │ │ ├── footer.njk │ │ └── navigation.njk │ └── layouts │ │ ├── page.njk │ │ └── default.njk ├── assets │ └── images │ │ ├── bg.png │ │ ├── og-image.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── apple-touch-icon.png │ │ └── gradient.svg ├── questions │ ├── performance-questions.md │ ├── fun-questions.md │ ├── testing-questions.md │ ├── network-questions.md │ ├── html-questions.md │ ├── general-questions.md │ ├── coding-questions.md │ ├── css-questions.md │ └── javascript-questions.md ├── 404.njk ├── _data │ ├── site.json │ ├── maintainers.json │ ├── questions.json │ ├── translations.json │ └── og.json ├── sitemap.xml.njk ├── translations.njk ├── index.njk ├── translations │ ├── korean │ │ ├── Reference.md │ │ └── README.md │ ├── japanese │ │ └── README.md │ ├── chinese │ │ └── README.md │ ├── chinese-traditional │ │ └── README.md │ ├── croatian │ │ └── README.md │ ├── polish │ │ └── README.md │ ├── serbian │ │ └── README.md │ ├── dutch │ │ └── README.md │ ├── slovenian │ │ └── README.md │ ├── czech │ │ └── README.md │ ├── slovakian │ │ └── README.md │ ├── danish │ │ └── README.md │ └── ukrainian │ │ └── README.md └── about.njk ├── .editorconfig ├── .github ├── dependabot.yml ├── ISSUE_TEMPLATE.md ├── stale.yml ├── workflows │ ├── codeql-analysis.yml │ └── gh-pages-build.yml ├── PULL_REQUEST_TEMPLATE.md ├── CONTRIBUTING.md └── CODE_OF_CONDUCT.md ├── config ├── deploy.sh └── eleventy.config.js ├── LICENSE └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | _site 4 | -------------------------------------------------------------------------------- /src/_includes/assets/css/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding-top: 3rem; 3 | } 4 | 5 | .footer-text { 6 | font-size: 0.8rem; 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codomposer/Front-end-Developer-Interview-Questions/HEAD/src/assets/images/bg.png -------------------------------------------------------------------------------- /src/assets/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codomposer/Front-end-Developer-Interview-Questions/HEAD/src/assets/images/og-image.png -------------------------------------------------------------------------------- /src/assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codomposer/Front-end-Developer-Interview-Questions/HEAD/src/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/images/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codomposer/Front-end-Developer-Interview-Questions/HEAD/src/assets/images/favicon-96x96.png -------------------------------------------------------------------------------- /src/assets/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codomposer/Front-end-Developer-Interview-Questions/HEAD/src/assets/images/apple-touch-icon.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: monthly 7 | time: "03:00" 8 | - package-ecosystem: github-actions 9 | directory: "/" 10 | schedule: 11 | interval: monthly 12 | -------------------------------------------------------------------------------- /src/assets/images/gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/_includes/assets/css/defaults.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | outline-color: var(--color-primary); 6 | } 7 | 8 | ::selection { 9 | background: var(--color-primary); 10 | color: var(--background-default); 11 | } 12 | 13 | ::-moz-selection { 14 | background: var(--color-primary); 15 | color: var(--background-default); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /src/questions/performance-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Performance Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/performance-questions/index.html 5 | --- 6 | 7 | * What tools would you use to find a performance bug in your code? 8 | * What are some ways you may improve your website's scrolling performance? 9 | * Explain the difference between layout, painting and compositing. 10 | -------------------------------------------------------------------------------- /config/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ `git branch --list gh-pages` ] 4 | then 5 | git branch -D gh-pages 6 | git checkout -b gh-pages 7 | else 8 | git checkout -b gh-pages 9 | fi 10 | rm -f .gitignore 11 | npm run build 12 | git add _site 13 | git commit -m 'Update Website' 14 | git push upstream `git subtree split --prefix _site gh-pages`:gh-pages -f 15 | git checkout -f 16 | git checkout master 17 | -------------------------------------------------------------------------------- /src/_includes/components/footer.njk: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/questions/fun-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fun Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/fun-questions/index.html 5 | --- 6 | 7 | * What's a cool project that you've recently worked on? 8 | * What are some things you like about the developer tools you use? 9 | * Who inspires you in the front-end community? 10 | * Do you have any pet projects? What kind? 11 | * What's your favorite feature of Internet Explorer? 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | The issue tracker is the preferred channel for feedback on the project, bugs relating to the publishing infrastructure (which is still a a work-in-progress) or other discussion points. 2 | 3 | Note: 4 | 5 | - *Please do not open issues or pull requests that involve including answers to any of the questions.* 6 | - *If you have a proposal for a new question or revision of an existing question, please just open a pull request.* 7 | -------------------------------------------------------------------------------- /src/404.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: 404 - Page not found 3 | description: Think this is wrong? [Open an issue](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues/new) 4 | permalink: /404.html 5 | excludeFromSitemap: true 6 | --- 7 | {% extends 'layouts/page.njk' %} 8 | 9 | {% set content %} 10 | {% endset %} 11 | 12 | {% block main %} 13 |
14 | {{ content | markdownify | safe }} 15 |
16 | {% endblock %} 17 | -------------------------------------------------------------------------------- /src/questions/testing-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/testing-questions/index.html 5 | --- 6 | 7 | * What are some advantages/disadvantages to testing your code? 8 | * What tools would you use to test your code's functionality? 9 | * What is the difference between a unit test and a functional/integration test? 10 | * What is the purpose of a code style linting tool? 11 | * What are some of the testing best practices? 12 | -------------------------------------------------------------------------------- /src/_data/site.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "Front-end Job Interview Questions", 4 | "url": "https://h5bp.org/Front-end-Developer-Interview-Questions/", 5 | "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.", 6 | "keywords": "front-end, interview questions, css questions, js questions, html questions, performance questions, interview test", 7 | "language": "en_US", 8 | "twitter": "@h5bp" 9 | } 10 | -------------------------------------------------------------------------------- /src/sitemap.xml.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /sitemap.xml 3 | excludeFromSitemap: true 4 | --- 5 | 6 | 7 | {%- for page in collections.all %} 8 | {%- if not page.data.excludeFromSitemap %} 9 | {% set absoluteUrl %}{{ site.url }}{{ page.url | url }}{% endset %} 10 | 11 | {{ absoluteUrl }} 12 | {{ page.date | html_date_string }} 13 | 14 | {%- endif %} 15 | {%- endfor %} 16 | 17 | -------------------------------------------------------------------------------- /src/_includes/assets/css/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family-heading: sans-serif; 3 | --font-family-body: Georgia, serif; 4 | --font-family-code: Menlo, Monaco, 'Courier New', monospace; 5 | --color-primary: #835EFF; 6 | --color-secondary: #FF008D; 7 | --color-safe: #8338EC; 8 | --color-gradient: linear-gradient(to right, var(--color-primary), var(--color-secondary)); 9 | --color-highlight: var(--color-primary); 10 | --color-gray-opacity: rgba(39,39,39,0.04); 11 | --color-heading: #23231A; 12 | --color-text: #23231A; 13 | --background-default: #F9F9F9; 14 | --border-radius-default: 5px; 15 | --box-shadow-default: 0 2rem 4rem rgba(0,0,0,.15); 16 | --transition-duration: 0.27s; 17 | } 18 | body.rtl{ 19 | --font-family-body: Arial, Helvetica, sans-serif; 20 | } -------------------------------------------------------------------------------- /src/_includes/assets/js/app.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | '%cA black belt is a white belt that didn\'t quit.', 3 | 'color: #fff; font-size: 20px; text-shadow: 1px 1px 1px #000; font-family: serif;' 4 | ) 5 | 6 | var navToggle = document.getElementById('navigation-toggle') 7 | var nav = document.getElementById('navigation') 8 | 9 | navToggle.addEventListener('click', function() { 10 | nav.classList.toggle('open') 11 | }) 12 | 13 | window.addEventListener('resize', function() { 14 | if (document.width > 960) { 15 | // Remove `active` class if viewport shows full menu 16 | nav.classList.remove('active') 17 | } else { 18 | // Temporarily add class to prevent visible motion after resize 19 | nav.classList.add('no-motion') 20 | setTimeout(function () { 21 | nav.classList.remove('no-motion') 22 | }, 250); 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /src/_includes/layouts/page.njk: -------------------------------------------------------------------------------- 1 | {% extends 'layouts/default.njk' %} 2 | 3 | {% block pageTop %} 4 |
5 | {% if heading and heading === true %} 6 |

{{ title }}

7 | {% else %} 8 |

{{ title }}

9 | {% endif %} 10 | {% if description %} 11 |

{{ description | markdownify_inline | safe }}

12 | {% endif %} 13 |
14 | {% endblock %} 15 | 16 | {% block main %} 17 |
18 | {{ content | safe }} 19 |
20 |
21 | 22 | Edit this page 23 | 24 |
25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /src/translations.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Translations 3 | description: Doesn't see yours or see something wrong? Open an [issue](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues). 4 | permalink: /translations/index.html 5 | --- 6 | {% extends 'layouts/default.njk' %} 7 | 8 | {% block pageTop %} 9 |
10 |

{{ title }}

11 |

{{ description | markdownify_inline | safe }}

12 |
13 | {% endblock %} 14 | 15 | {% block main %} 16 |
17 |
18 | 25 |
26 |
27 | {% endblock %} 28 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 30 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | - security 9 | - help-wanted 10 | # Label to use when marking an issue as stale 11 | staleLabel: wontfix 12 | # Comment to post when marking an issue as stale. Set to `false` to disable 13 | markComment: > 14 | This issue has been automatically marked as stale because it has not had 15 | recent activity. It will be closed if no further activity occurs. Thank you 16 | for your contributions. 17 | # Comment to post when closing a stale issue. Set to `false` to disable 18 | closeComment: This issue has been automatically closed because it has not had 19 | recent activity. Thank you for your contributions. 20 | -------------------------------------------------------------------------------- /src/questions/network-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Network Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/network-questions/index.html 5 | --- 6 | 7 | * Traditionally, why has it been better to serve site assets from multiple domains? 8 | * Do your best to describe the process from the time you type in a website's URL to it finishing loading on your screen. 9 | * What are the differences between Long-Polling, Websockets and Server-Sent Events? 10 | * Explain the following request and response headers: 11 | * Diff. between Expires, Date, Age and If-Modified-... 12 | * Do Not Track 13 | * Cache-Control 14 | * Transfer-Encoding 15 | * ETag 16 | * X-Frame-Options 17 | * What are HTTP methods? List all HTTP methods that you know, and explain them. 18 | * What is domain pre-fetching and how does it help with performance? 19 | * What is a CDN and what is the benefit of using one? 20 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | name: "CodeQL" 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | schedule: 9 | - cron: '34 20 * * 0' 10 | 11 | jobs: 12 | analyze: 13 | name: Analyze 14 | runs-on: ubuntu-latest 15 | permissions: 16 | actions: read 17 | contents: read 18 | security-events: write 19 | 20 | strategy: 21 | fail-fast: false 22 | matrix: 23 | language: [ 'javascript' ] 24 | 25 | steps: 26 | - name: Checkout repository 27 | uses: actions/checkout@v3 28 | 29 | - name: Initialize CodeQL 30 | uses: github/codeql-action/init@v2 31 | with: 32 | languages: ${{ matrix.language }} 33 | 34 | - name: Autobuild 35 | uses: github/codeql-action/autobuild@v2 36 | 37 | - name: Perform CodeQL Analysis 38 | uses: github/codeql-action/analyze@v2 39 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages-build.yml: -------------------------------------------------------------------------------- 1 | name: Eleventy Build 2 | on: 3 | # Triggers the workflow on push or pull request events but only for the main branch 4 | push: 5 | branches: [ main ] 6 | 7 | jobs: 8 | build_deploy: 9 | runs-on: ubuntu-20.04 10 | steps: 11 | - uses: actions/checkout@master 12 | - uses: actions/checkout@v3 13 | - name: Use Node.js ${{ matrix.node-version }} 14 | uses: actions/setup-node@v3 15 | with: 16 | node-version: "16.x" 17 | - run: npm install 18 | - name: Build 19 | uses: TartanLlama/actions-eleventy@master 20 | with: 21 | args: --config=config/eleventy.config.js --pathprefix=Front-end-Developer-Interview-Questions 22 | - name: Deploy 23 | uses: peaceiris/actions-gh-pages@v3 24 | with: 25 | publish_dir: ./_site 26 | publish_branch: gh-pages 27 | github_token: ${{ secrets.GITHUB_TOKEN }} 28 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 2 | 3 | Fixes # (issue) 4 | 5 | ## Type of change 6 | 7 | Please delete options that are not relevant. 8 | 9 | - [ ] New Question 10 | - [ ] Revision of an existing question 11 | - [ ] Infrastructure change (automation, etc.) 12 | - [ ] Other (please elaborate) 13 | 14 | 15 | # Checklist: 16 | 17 | - [ ] My content follows the style guidelines of this project 18 | - [ ] I have performed a self-review of my own content 19 | 20 | Pull requests should be thought of as a conversation. There will be some back and forth when trying to get code merged into this or any other project. With all but the simplest changes you can and should expect that the maintainers of the project will request changes to your code. Please be aware of that and check in after you open your PR in order to get your code merged in cleanly. 21 | 22 | Thanks! 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 0xAkileus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/questions/html-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/html-questions/index.html 5 | --- 6 | 7 | * What does a `doctype` do? 8 | * How do you serve a page with content in multiple languages? 9 | * What kind of things must you be wary of when designing or developing for multilingual sites? 10 | * What are `data-` attributes good for? 11 | * Consider HTML5 as an open web platform. What are the building blocks of HTML5? 12 | * Describe the difference between a `cookie`, `sessionStorage` and `localStorage`. 13 | * Describe the difference between ` 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/questions/javascript-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: JavaScript Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/javascript-questions/index.html 5 | --- 6 | 7 | 8 | * Explain event delegation. 9 | * Explain how `this` works in JavaScript. 10 | * Can you give an example of one of the ways that working with `this` has changed in ES6? 11 | * Explain how prototypal inheritance works. 12 | * What's the difference between a variable that is: `null`, `undefined` or undeclared? 13 | * How would you go about checking for any of these states? 14 | * What is a closure, and how/why would you use one? 15 | * What language constructions do you use for iterating over object properties and array items? 16 | * Can you describe the main difference between the `Array.forEach()` loop and `Array.map()` methods and why you would pick one versus the other? 17 | * What's a typical use case for anonymous functions? 18 | * What's the difference between host objects and native objects? 19 | * Explain the difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`? 20 | * Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}` 21 | * Can you explain what `Function.call` and `Function.apply` do? What's the notable difference between the two? 22 | * Explain `Function.prototype.bind`. 23 | * What's the difference between feature detection, feature inference, and using the UA string? 24 | * Explain "hoisting". 25 | * Describe event bubbling. 26 | * Describe event capturing. 27 | * What's the difference between an "attribute" and a "property"? 28 | * What are the pros and cons of extending built-in JavaScript objects? 29 | * What is the difference between `==` and `===`? 30 | * Explain the same-origin policy with regards to JavaScript. 31 | * Why is it called a Ternary operator, what does the word "Ternary" indicate? 32 | * What is strict mode? What are some of the advantages/disadvantages of using it? 33 | * What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript? 34 | * What tools and techniques do you use debugging JavaScript code? 35 | * Explain the difference between mutable and immutable objects. 36 | * What is an example of an immutable object in JavaScript? 37 | * What are the pros and cons of immutability? 38 | * How can you achieve immutability in your own code? 39 | * Explain the difference between synchronous and asynchronous functions. 40 | * What is event loop? 41 | * What is the difference between call stack and task queue? 42 | * What are the differences between variables created using `let`, `var` or `const`? 43 | * What are the differences between ES6 class and ES5 function constructors? 44 | * Can you offer a use case for the new arrow `=>` function syntax? How does this new syntax differ from other functions? 45 | * What advantage is there for using the arrow syntax for a method in a constructor? 46 | * What is the definition of a higher-order function? 47 | * Can you give an example for destructuring an object or an array? 48 | * Can you give an example of generating a string with ES6 Template Literals? 49 | * Can you give an example of a curry function and why this syntax offers an advantage? 50 | * What are the benefits of using `spread syntax` and how is it different from `rest syntax`? 51 | * How can you share code between files? 52 | * Why you might want to create static class members? 53 | * What is the difference between `while` and `do-while` loops in JavaScript? 54 | * What is a promise? Where and how would you use promise? 55 | 56 | ## Coding questions 57 | * Make this work: 58 | ```javascript 59 | duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5] 60 | ``` 61 | * Create a for loop that iterates up to `100` while outputting **"fizz"** at multiples of `3`, **"buzz"** at multiples of `5` and **"fizzbuzz"** at multiples of `3` and `5` 62 | * What will be returned by each of these? 63 | ```javascript 64 | console.log("hello" || "world") 65 | console.log("foo" && "bar") 66 | ``` 67 | * Write an immediately invoked function expression (IIFE) 68 | -------------------------------------------------------------------------------- /src/_data/og.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "all": [ 4 | 5 | { 6 | "avatar": "https://avatars0.githubusercontent.com/u/39191?v=4", 7 | "name": "Paul Irish", 8 | "website": "https://www.paulirish.com/", 9 | "github": "https://github.com/paulirish", 10 | "twitter": "https://twitter.com/paul_irish" 11 | }, 12 | { 13 | "avatar": "https://avatars0.githubusercontent.com/u/459713?v=4", 14 | "name": "Darcy Clarke", 15 | "website": "https://darcyclarke.me", 16 | "github": "https://github.com/darcyclarke", 17 | "twitter": "https://twitter.com/darcy" 18 | }, 19 | { 20 | "avatar": "https://avatars1.githubusercontent.com/u/85315?s=460&v=4", 21 | "name": "Ben Truyman", 22 | "website": "", 23 | "github": "https://github.com/bentruyman", 24 | "twitter": "https://twitter.com/bentruyman" 25 | }, 26 | { 27 | "avatar": "https://avatars1.githubusercontent.com/u/54051?s=460&v=4", 28 | "name": "Ben Alman", 29 | "website": "http://benalman.com/", 30 | "github": "https://github.com/cowboy", 31 | "twitter": "https://twitter.com/cowboy" 32 | }, 33 | { 34 | "avatar": "https://avatars1.githubusercontent.com/u/155599?s=460&v=4", 35 | "name": "Adam Sontag", 36 | "website": "http://ajpiano.com/", 37 | "github": "https://github.com/ajpiano", 38 | "twitter": "https://twitter.com/ajpiano" 39 | }, 40 | { 41 | "avatar": "https://avatars1.githubusercontent.com/u/96554?s=460&v=4", 42 | "name": "Alex Sexton", 43 | "website": "https://alexsexton.com/", 44 | "github": "https://github.com/slexaxton", 45 | "twitter": "https://twitter.com/slexaxton" 46 | }, 47 | { 48 | "avatar": "https://avatars1.githubusercontent.com/u/234160?s=460&v=4", 49 | "name": "Roger Raymond", 50 | "website": "http://asphyxia.com/", 51 | "github": "https://github.com/iansym", 52 | "twitter": "https://twitter.com/iansym" 53 | }, 54 | { 55 | "avatar": "https://avatars1.githubusercontent.com/u/58987?s=460&v=4", 56 | "name": "Rebecca Murphey", 57 | "website": "https://rmurphey.com/", 58 | "github": "https://github.com/rmurphey", 59 | "twitter": "https://twitter.com/rmurphey" 60 | }, 61 | { 62 | "avatar": "https://avatars1.githubusercontent.com/u/122117?s=460&v=4", 63 | "name": "Boaz Sender", 64 | "website": "http://boazsender.com/", 65 | "github": "https://github.com/boazsender", 66 | "twitter": "https://twitter.com/boazsender" 67 | }, 68 | { 69 | "avatar": "https://avatars1.githubusercontent.com/u/67283?s=460&v=4", 70 | "name": "Mike Taylor", 71 | "website": "https://miketaylr.com/", 72 | "github": "https://github.com/miketaylr", 73 | "twitter": "https://twitter.com/miketaylr" 74 | }, 75 | { 76 | "avatar": "https://avatars1.githubusercontent.com/u/128755?s=460&v=4", 77 | "name": "Vlad Filippov", 78 | "website": "https://vladfilippov.com/", 79 | "github": "https://github.com/vladikoff", 80 | "twitter": "https://twitter.com/vladikoff" 81 | }, 82 | { 83 | "avatar": "https://avatars1.githubusercontent.com/u/18397?s=460&v=4", 84 | "name": "Gianni Chiappetta", 85 | "website": "http://turnt.biz/", 86 | "github": "https://github.com/gf3", 87 | "twitter": "https://twitter.com/gf3" 88 | }, 89 | { 90 | "avatar": "https://avatars1.githubusercontent.com/u/188426?s=460&v=4", 91 | "name": "Jonathan Neal", 92 | "website": "https://jonneal.dev/", 93 | "github": "https://github.com/jonathantneal", 94 | "twitter": "https://twitter.com/jon_neal" 95 | }, 96 | { 97 | "avatar": "https://avatars1.githubusercontent.com/u/84644?s=460&v=4", 98 | "name": "Sam Breed", 99 | "website": "https://wookiehangover.com/", 100 | "github": "https://github.com/wookiehangover", 101 | "twitter": "https://twitter.com/sambreed" 102 | } 103 | ] 104 | } 105 | -------------------------------------------------------------------------------- /src/_includes/assets/css/navigation.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | padding: 1rem 0; 3 | position: relative; 4 | font-family: var(--font-family-heading); 5 | } 6 | 7 | .nav li { 8 | word-wrap: none; 9 | white-space: nowrap; 10 | } 11 | 12 | .navigation { 13 | list-style: none; 14 | display: flex; 15 | flex-wrap: wrap; 16 | font-size: 1rem; 17 | } 18 | 19 | .navigation-questions-label { 20 | margin-right: auto; 21 | } 22 | 23 | @media (min-width: 60em) { 24 | .navigation-questions-label { 25 | margin-right: 0; 26 | } 27 | } 28 | 29 | .navigation-toggle { 30 | display: inline-block; 31 | appearance: none; 32 | border: 0; 33 | font-size: 1rem; 34 | font-weight: 600; 35 | cursor: pointer; 36 | background: transparent; 37 | } 38 | 39 | .navigation-toggle::after { 40 | content: '\25BE'; 41 | padding-left: 0.3rem; 42 | display: inline-block; 43 | font-size: 1.2rem; 44 | font-weight: bold; 45 | color: var(--color-primary); 46 | transform-origin: center; 47 | } 48 | 49 | .navigation-toggle:hover::after, 50 | .navigation-toggle:active::after, 51 | .navigation-toggle:focus::after { 52 | color: var(--color-secondary); 53 | } 54 | 55 | .navigation.open .navigation-toggle::after { 56 | transform: scaleY(-1) translateY(-0.25em); 57 | } 58 | 59 | @media (min-width: 60em) { 60 | .navigation-toggle { 61 | color: var(--color-text); 62 | pointer-events: none; 63 | cursor: default; 64 | } 65 | 66 | .navigation-toggle::after { 67 | display: none; 68 | } 69 | } 70 | 71 | .navigation-questions-list { 72 | padding: 0.5rem 1rem; 73 | display: flex; 74 | flex-direction: column; 75 | position: absolute; 76 | top: calc(100% - 1rem); 77 | left: 0; 78 | z-index: 1; 79 | opacity: 0; 80 | transform: scale(0.5, 0); 81 | transform-origin: center top; 82 | transition: opacity .1s, transform .2s ease-out; 83 | background-color: #fff; 84 | box-shadow: 0 0 0 1px var(--color-secondary), 0 2px 4px -1px var(--color-text); 85 | } 86 | 87 | .navigation.open .navigation-questions-list { 88 | opacity: 1; 89 | transform: none; 90 | } 91 | 92 | .navigation.no-motion .navigation-questions-list { 93 | transition: none; 94 | } 95 | 96 | @media (min-width: 60em) { 97 | .navigation-questions-list { 98 | padding: 0; 99 | flex-direction: row; 100 | position: static; 101 | opacity: 1; 102 | transform: none; 103 | transition: none; 104 | background-color: transparent; 105 | box-shadow: none; 106 | } 107 | 108 | .navigation-questions-list li { 109 | margin: 0; 110 | } 111 | } 112 | 113 | .navigation-questions-anchor { 114 | visibility: hidden; 115 | } 116 | 117 | .navigation.open .navigation-questions-anchor { 118 | visibility: visible; 119 | } 120 | 121 | @media (min-width: 60em) { 122 | .navigation-questions-anchor { 123 | visibility: visible; 124 | } 125 | } 126 | 127 | .navigation-item-emoji { 128 | width: 100%; 129 | font-size: 1rem; 130 | line-height: 1rem; 131 | padding-bottom: 1.5rem; 132 | margin-bottom: 1.5rem; 133 | vertical-align: top; 134 | align-content: flex-start; 135 | border-bottom: 1px solid #efefef; 136 | } 137 | 138 | .navigation-item-home { 139 | border-bottom: none; 140 | padding-bottom: 0; 141 | font-weight: 600; 142 | } 143 | 144 | @media (min-width: 60em) { 145 | .navigation-item-emoji { 146 | width: 50%; 147 | margin-bottom: 2rem; 148 | border-bottom: 1px solid #efefef; 149 | } 150 | } 151 | 152 | .navigation-item-emoji em { 153 | font-style: normal; 154 | margin-right: 0.5rem; 155 | } 156 | 157 | .navigation-item-translations { 158 | text-align: left; 159 | } 160 | 161 | @media (min-width: 60em) { 162 | .navigation-item-translations { 163 | text-align: right; 164 | } 165 | } 166 | 167 | .navigation-item-home em { 168 | color: #835eff; 169 | } 170 | 171 | .navigation-item-emoji a { 172 | text-decoration: none; 173 | display: inline-block; 174 | vertical-align: middle; 175 | } 176 | 177 | @media (min-width: 60em) { 178 | .navigation-item:not(:last-of-type) { 179 | margin-right: 0.8rem 180 | } 181 | } 182 | 183 | .navigation-anchor[rel~="external"]::after { 184 | content: ' ➚'; 185 | color: var(--color-highlight); 186 | } 187 | 188 | .navigation-anchor.current { 189 | border-bottom: 2px solid var(--color-highlight); 190 | padding: 0 0 5px 0; 191 | } 192 | -------------------------------------------------------------------------------- /src/_includes/assets/css/content.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | font-family: var(--font-family-body); 5 | font-weight: 400; 6 | font-size: 1.2rem; 7 | line-height: 2; 8 | color: var(--color-text); 9 | } 10 | 11 | section + section { 12 | padding-top: 2rem; 13 | } 14 | 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6 { 21 | font-family: var(--font-family-heading); 22 | color: var(--color-heading); 23 | font-style: normal; 24 | line-height: 1.2; 25 | font-weight: 600; 26 | } 27 | 28 | section + section { 29 | padding-top: 2rem; 30 | } 31 | 32 | a { 33 | color: inherit; 34 | text-decoration: none; 35 | color: var(--color-secondary); 36 | transition: color ease-out var(--transition-duration); 37 | } 38 | 39 | a.current, 40 | a:hover:not(.skip-link), 41 | a:focus:not(.skip-link) { 42 | color: var(--color-primary); 43 | } 44 | 45 | a:not(.navigation-anchor)[rel~='external']:after { 46 | content: ' ➚' 47 | } 48 | 49 | ul:not(.navigation):not(.inline-list) { 50 | list-style: none; 51 | } 52 | 53 | ul:not(.navigation):not(.inline-list) li::before { 54 | content: "\25A0"; 55 | color: var(--color-primary); 56 | font-weight: bold; 57 | display: inline-block; 58 | width: 1em; 59 | margin-left: -1em; 60 | } 61 | .rtl ul:not(.navigation):not(.inline-list) li::before{ 62 | margin-right: -1em; 63 | margin-left: initial; 64 | } 65 | 66 | li { 67 | margin-bottom: 0.6rem; 68 | } 69 | 70 | strong, 71 | b { 72 | font-weight: 600; 73 | } 74 | 75 | time { 76 | display: inline-block; 77 | color: var(--color-gray-70); 78 | } 79 | 80 | [tabindex='-1'] { 81 | outline: 0; 82 | } 83 | 84 | img, 85 | svg { 86 | vertical-align: middle; 87 | } 88 | 89 | img { 90 | display: block; 91 | max-width: 100%; 92 | border-radius: var(--border-radius-default); 93 | } 94 | 95 | code { 96 | font-family: var(--font-family-code); 97 | color: var(--color-code); 98 | font-style: normal; 99 | font-size: 1rem; 100 | } 101 | 102 | blockquote:not([class]) { 103 | padding-left: 1rem; 104 | margin-left: -1rem; 105 | border-left: 2px solid var(--color-primary); 106 | color: var(--color-gray-70); 107 | font-style: italic; 108 | } 109 | 110 | code[class*=language-], 111 | pre[class*=language-] { 112 | font-size: 0.9rem; 113 | font-style: normal; 114 | } 115 | 116 | p + pre[class*=language-] { 117 | margin-bottom: 1.8rem; 118 | } 119 | 120 | mark { 121 | color: var(--color-highlight); 122 | background-color: transparent; 123 | } 124 | 125 | dt { 126 | font-weight: 700; 127 | } 128 | 129 | dd + dt { 130 | padding-top: 0.5rem; 131 | } 132 | 133 | abbr[title], acronym[title] { 134 | background: var(--color-gray-opacity); 135 | border: 1px solid var(--color-gray-opacity); 136 | cursor: help; 137 | } 138 | 139 | .container { 140 | max-width: 66rem; 141 | padding: 1.5rem 2rem 2rem; 142 | margin-right: auto; 143 | margin-left: auto; 144 | } 145 | 146 | @media (min-width: 30rem) { 147 | .container { 148 | padding: 3rem 4rem 4rem; 149 | } 150 | } 151 | 152 | .content li:not(:last-of-type) { 153 | margin-bottom: 1.2rem; 154 | } 155 | 156 | .content h2 { 157 | max-width: 33rem; 158 | } 159 | 160 | .content > *:not(:last-child) { 161 | margin-bottom: 2rem; 162 | } 163 | 164 | .content *:not(hr) + h2, 165 | .content *:not(hr) + h3 { 166 | padding-top: 1rem; 167 | } 168 | 169 | .content ul:not(.inline-list), 170 | .content ol:not(.inline-list) { 171 | padding-left: 1.2rem; 172 | } 173 | 174 | .content-simple li:not(:last-of-type) { 175 | margin-bottom: 0.5rem; 176 | } 177 | 178 | .content-edit { 179 | text-align: right; 180 | margin-top: 2rem; 181 | } 182 | 183 | .inline-list { 184 | padding: 0; 185 | list-style: none; 186 | display: flex; 187 | flex-wrap: wrap; 188 | } 189 | 190 | .inline-list li { 191 | padding: 0 5px; 192 | display: inline-block; 193 | vertical-align: middle; 194 | text-align: center; 195 | } 196 | 197 | .inline-list li::before { 198 | content: ''; 199 | margin-left: 0; 200 | } 201 | 202 | .inline-list li img { 203 | display: block; 204 | margin: auto; 205 | margin-bottom: 0.6rem; 206 | } 207 | 208 | .inline-list li a { 209 | display: inline-block; 210 | vertical-align: middle; 211 | margin: 0 0.15rem; 212 | } 213 | 214 | .inline-list-contributors li a, 215 | .inline-list-original li a { 216 | font-size: 1rem; 217 | } 218 | 219 | .avatar { 220 | max-width: 12rem; 221 | } 222 | 223 | hr { 224 | border: none; 225 | bacground: none; 226 | border-bottom: 1px solid #efefef; 227 | } 228 | -------------------------------------------------------------------------------- /src/translations/japanese/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: フロントエンドデベロッパー面接時の質問事項 3 | layout: layouts/page.njk 4 | permalink: /translations/japanese/index.html 5 | --- 6 | 7 | # フロントエンドデベロッパー面接時の質問事項 8 | 9 | @バージョン 2.0.0 10 | 11 | 本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません(それは数時間もかかってしまうでしょう)。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。 12 | 13 | [Rebecca Murphey](http://rmurphey.com/)の[Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/)もとても参考になるので面接前によく読むことをおすすめします。 14 | 15 | **注意:** これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。 16 | 17 | #### オリジナルのコントリビューター 18 | 19 | 質問の多くは[Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish))と下記のコントリビューターによって作成された[oksoclap](http://oksoclap.com/)スレッドをもとに作成されています。 20 | 21 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 22 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 23 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 24 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 25 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 26 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 27 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 28 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 29 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 30 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 31 | * [@darcy](http://twitter.com/darcy) - http://darcyclarke.me 32 | * [@iansym](http://twitter.com) 33 | 34 | ### 一般的な質問事項 35 | 36 | * 昨日・今週に何を学びましたか? 37 | * 何があなたをコーディングに惹きつけていますか? 38 | * 最近直面した技術的な困難はどんなものですか?また、それをどのように解決しましたか? 39 | * ウェブアプリやウェブサイトを構築する際にユーザーインターフェース、パフォーマンス、SEO、メンテナンス性などについてどのように考えますか? 40 | * 好きな開発環境について教えてください。(OS、エディタ、ブラウザ、ツール等) 41 | * webページを作るときのあなたのワークフローを教えてください。 42 | * どのバージョン管理ツールに慣れていますか?(Git, SVNなど) 43 | * 5つの異なるスタイルシートをウェブサイトに統合する最適な方法はどんなものですか? 44 | * プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明してください。 45 | * ウェブサイトのアセット・リソースの最適化をどのように行いますか? 46 | * 下記のようないくつかのソリューションが期待されます。 47 | * ファイル結合 48 | * ファイルの縮小 49 | * CDNホスティング 50 | * キャッシュ利用 51 | * など 52 | * 複数のドメインからアセットを提供したほうがよい理由は何ですか? 53 | * 一度にブラウザが与えられたドメインからダウンロードできるリソースの数はいくつですか? 54 | * 例外は何ですか? 55 | * ページロードを減らす3つの方法を挙げてください。 56 | * プロジェクトに加入したときに、もし彼らがタブを使い、あなたがスペースを使っていたとしたらどうしますか? 57 | * EditorConfig (http://editorconfig.org) といったプラグインを利用するように提案する 58 | * 慣習に従う (一貫性を保つ) 59 | * `issue :retab! command` 60 | * シンプルなスライドショーのページを書いてください。 61 | * JSを使わなかったらボーナスポイント。 62 | * コードのパフォーマンスをテストするのにどんなツールを使いますか? 63 | * プロファイラー、JSPerf、Dromaeo 64 | * もし今年1つの技術をマスターできるとしたら、何をマスターしますか? 65 | * 標準化と標準化団体の重要性を説明してください。 66 | * FOUCとは何ですか? どのようにFOUCを防ぐことができますか? 67 | * ARIAとスクリーンリーダーとはなにか、またそれらがウェブサイトをどのようにアクセシブルにするか説明してください。 68 | * CSSアニメーションとJavaScriptアニメーションのそれぞれの利点と欠点を幾つか説明してください。 69 | * CORSとは何の省略ですか?また、それはどんな問題を表しますか? 70 | 71 | ### HTMLに関する質問事項 72 | 73 | * `doctype`は何をしているか説明してください。 74 | * スタンダードモードとクアークスモードの違いは何ですか? 75 | * XHTMLページを提供するときの制限は何ですか? 76 | * `application/xhtml+xml`としてページを提供することに何か問題はありますか? 77 | * 多言語でコンテンツをどのように提供しますか? 78 | * 多言語化サイトのデザイン・開発時にどのようなことに注意すべきですか? 79 | * `data-`属性は何にとって良いですか? 80 | * HTML5をオープンなWEBプラットフォームとしてみなしましょう。HTML5の基本的な構成要素は何ですか? 81 | * クッキー、セッションストレージ、ローカルストレージの違いを述べてください。 82 | 83 | ### JSに関する質問事項 84 | 85 | * イベントデリゲーションを説明してください。 86 | * JavaScriptにおいて`this`がどのように機能するか説明してください。 87 | * プロトタイプ継承がどのように機能するか説明してください。 88 | * JavaScriptをテストするのにどのように対処しますか? 89 | * AMDとCommonJS、何が違いますか? 90 | * ハッシュテーブルとは何ですか? 91 | * `undefined`と`undeclared`変数は何ですか? 92 | * クロージャとは何ですか? どのように、そしてなぜそれを使うのですか? 93 | * クロージャを作成するときに使うあなたの好きなパターンは何ですか? (即時実行関数表現にのみ適用) 94 | * 匿名関数が有効な典型的なユースケースは何ですか? 95 | * 「JavaScriptモジュールパターン」とそれを使う場面を説明してください。 96 | * 名前空間について述べたらボーナスポイント。 97 | * もしモジュールが名前空間無しだとしたらどうなりますか? 98 | * コードをどのように整理しますか?(モジュールパターン、古典的な継承を使う?) 99 | * ホストオブジェクトとネイティブオブジェクトの違いは何ですか? 100 | * 下記コードの違いは何?`function Person(){}`, `var person = Person()`, `var person = new Person()` 101 | * `.call`と`.apply`の違いは何ですか? 102 | * `Function.prototype.bind`を説明してください。 103 | * いつコードを最適化しますか? 104 | * JavaScriptにおいてどのように継承が機能しているか説明してください。 105 | * `document.write()`はいつ使いますか? 106 | * 生成される広告の多くはいまだに嫌われている方法である`document.write()`を活用しています。 107 | * feature detection, feature inference, UA stringの使用の違いは何ですか? 108 | * AJAXをできるだけ詳しく述べてください。 109 | * JSONPがどのように機能するか述べてください。(またそれがどのようにAJAXとは異なっているのか) 110 | * JavaScriptテンプレートは使ったことはありますか? 111 | * 使ったことがあるのなら、何のライブラリを使いましたか?(Mustache.js, Handlebarsなど) 112 | * 「巻き上げ」を説明してください。 113 | * イベントバブリングを説明してください。 114 | * 「属性」と「プロパティ」の違いは何ですか? 115 | * どうしてビルトインJavaScriptを拡張することは良くないのですか? 116 | * ドキュメントロードイベントとドキュメントレディイベントの違いを述べてください。 117 | * `==`と`===`の違いは何ですか? 118 | * ブラウザのウィンドウURLからクエリ文字列をどのように取得するかを説明してください。 119 | * JSに関するsame-origin policyを説明してください。 120 | * JavaScriptにおける継承パターンを述べてください。 121 | * 下記を動くように書き変えてください。 122 | ```javascript 123 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 124 | ``` 125 | * JavaScriptにおけるメモ化(計算の繰り返しの回避)の方針について述べてください。 126 | * 三項演算子と呼ばれる理由は何ですか? 「三項」という言葉が示していることは何ですか? 127 | * 関数のarityとは何ですか? 128 | * `"use strict";`とは何ですか? これを使うことのメリット、デメリットは何ですか? 129 | 130 | ### JSコードの例 131 | 132 | ```javascript 133 | ~~3.14 134 | ``` 135 | 質問: 上ステートメントで得られる値は何ですか? 136 | **回答: 3** 137 | 138 | ```javascript 139 | "i'm a lasagna hog".split("").reverse().join(""); 140 | ``` 141 | 質問: 上ステートメントで得られる値は何ですか? 142 | **回答: "goh angasal a m'i"** 143 | 144 | ```javascript 145 | ( window.foo || ( window.foo = "bar" ) ); 146 | ``` 147 | 質問: window.fooの値は何ですか? 148 | **回答: "bar"** 149 | window.fooがfalseと判断される場合のみ。trueの場合はその値を保持し続ける。 150 | 151 | ```javascript 152 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 153 | ``` 154 | 質問: 上2つのアラートの結果はどうなりますか? 155 | **回答: "Hello World" & ReferenceError: bar is not defined** 156 | 157 | ```javascript 158 | var foo = []; 159 | foo.push(1); 160 | foo.push(2); 161 | ``` 162 | 質問: foo.lengthの値はどうなりますか? 163 | **回答: `2`** 164 | 165 | ```javascript 166 | var foo = {}; 167 | foo.bar = 'hello'; 168 | ``` 169 | 質問: foo.lengthの値はどうなりますか? 170 | **回答: `undefined`** 171 | 172 | ### jQueryに関する質問事項 173 | 174 | * 「chaining(チェイン)」を説明してください。 175 | * 「deferreds」を説明してください。 176 | * jQueryに関する最適化としてどんなことができますか? 177 | * `.end()`は何ですか? 178 | * イベントハンドラに名前空間を与えるにはどのようにすればいいですか。またなぜ名前空間を与えますか。 179 | * jQueryメソッドに渡すことができる4つの異なる値を挙げてください。 180 | * セレクター (string)、HTML (string)、コールバック (function)、HTMLエレメント、オブジェクト、配列、エレメントの配列、jQueryオブジェクト等 181 | * エフェクト(あるいはfx)キューとは何ですか? 182 | * `.get()`、 `[]`、`.eq()`の違いは何ですか? 183 | * `.bind()`、`.live()`、`.delegate()`の違いは何ですか? 184 | * `$`、`$.fn`の違いは何ですか? 単に`$.fn`と書いた場合はどうですか? 185 | * 下記のセレクターを最適化してください: 186 | ```javascript 187 | $(".foo div#bar:eq(0)") 188 | ``` 189 | * `delegate()`と`live()`の違いは何ですか? 190 | 191 | 192 | ### CSSに関する質問事項 193 | 194 | * 'reset' CSSファイルとは何ですか? またその有用性は何ですか? 195 | * フロートとそれらがどのように機能するかを説明してください。 196 | * フロートクリアの様々なテクニックは何ですか?その内のどれが適切でそれはどんな状況ですか? 197 | * CSSスプライトを説明してください。またページやサイトでそれをどのように実装しますか? 198 | * 1番好きな画像置き換えテクニックは何ですか?またいつどのテクニックを使いますか? 199 | * .cssファイルに含み得るCSSハックは何ですか?また.cssファイル以外ではどうしますか? 200 | * 機能が制限されたブラウザに対してどのようにページを提供しますか? 201 | * どんなテクニック、プロセスを使いますか? 202 | * コンテンツを視覚的に見えなくするのにどんな方法がありますか?(またスクリーンリーダーユーザーのみに見えるようにする方法は何ですか?) 203 | * グリッドシステムを使ったことはありますか? 使い続けたいと思いましたか? 204 | * メディアクエリ、あるいはモバイルに特化したレイアウト、CSSを組んだことはありますか? 205 | * SVGのスタイリングの知識は何かしら持っていますか? 206 | * 印刷用ページの最適化はどのように行いますか? 207 | * CSS記述における「gotchas(見落としがちなミス)」は何ですか? 208 | * CSSプリプロセッサのメリット、デメリットは何ですか?(SASS、Compass、Stylus、LESS) 209 | * 使ったことのあるCSSプリプロセッサについてそれの好きなところ、嫌いなところを説明してください。 210 | * 非標準のフォントを使用したwebデザインカンプをどのように実装しますか? 211 | * ウェブフォント(Googleウェブフォント、Typekit 等) 212 | * ブラウザがどのようにあるエレメントがどのCSSセレクタにマッチするかを決定しているかを説明してください。 213 | 214 | ### その他の質問事項 215 | 216 | * あなたがコーディングした中で一番素晴らしいものは何ですか? 何が一番誇れますか? 217 | * あなたが使っている開発者ツールの一番好きなところは何ですか? 218 | * 何か暖めてるアイディアは持っていますか? それはどんなものですか? 219 | * インターネットエクスプローラーの最も好きな機能は何ですか? 220 | -------------------------------------------------------------------------------- /src/about.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | permalink: /about/index.html 4 | --- 5 | {% extends 'layouts/page.njk' %} 6 | 7 | {% set content %} 8 | ## Overview 📦 9 | 10 | This project started in 2009 by [Darcy Clarke](https://darcyclarke.me), releasing in [2012](http://web.archive.org/web/20120909134303/http://darcyclarke.me/development/front-end-job-interview-questions) to the public. Many of the initial questions were sourced from a shared **etherpad** document started by [Paul Irish](https://twitter.com/paul_irish). 11 | 12 | At its core, the project contains a number of front-end questions that can be used when vetting potential candidates, test yourself or used as a guide for concepts you may want to learn. It is by no means recommended to use these questions verbatim, nor expected that someone would know all the "answers". These questions are intentionally written to be open-ended and hopefully lead to interesting discussions that tell you more about a person's thought process then reference memory. 13 | 14 | #### This project was featured on [The Changelog](https://changelog.com/podcast/143) – Episode #143 (Feb 21, 2015) 15 | 16 | 17 | 18 | ## Current Maintainers 🦄 19 | 20 | 34 | 35 |
36 | 37 | ## Maintainers Emeriti 🐴 38 | 39 | 53 | 54 |
55 | 56 | ## Original Contributors ✨ 57 | 58 | 72 | 73 |
74 | 75 | ## All Contributors 🌏 76 | 77 | 85 | 86 | Saw something wrong? Want to add a question? suggest something? Check our [contributing guidelines](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/.github/CONTRIBUTING.md), open a pull-request or [fill a bug](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues/new). 87 | 88 | {% endset %} 89 | 90 | {% block main %} 91 |
92 | {{ content | markdownify | safe }} 93 |
94 | {% endblock %} 95 | -------------------------------------------------------------------------------- /src/translations/chinese/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 前端工作面试问题 3 | layout: layouts/page.njk 4 | permalink: /translations/chinese/index.html 5 | --- 6 | 7 | # 前端工作面试问题 8 | 9 | 本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能。 10 | 11 | **备注:** 这些问题中很多都是开放性的,可以引发有趣的讨论。这比直接的答案更能体现此人的能力。 12 | 13 | ## 目录 14 | 15 | 1. [常见问题](#general-questions) 16 | 1. [HTML 相关问题](#html-questions) 17 | 1. [CSS 相关问题](#css-questions) 18 | 1. [JS 相关问题](#js-questions) 19 | 1. [测试相关问题](#testing-questions) 20 | 1. [效能相关问题](#performance-questions) 21 | 1. [网络相关问题](#network-questions) 22 | 1. [代码相关问题](#coding-questions) 23 | 1. [趣味问题](#fun-questions) 24 | 25 | ## 参与协作 26 | 27 | 1. [贡献者](#contributors) 28 | 1. [如何参与贡献](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md) 29 | 1. [许可协议](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md) 30 | 31 | #### 常见问题: 32 | 33 | * 你在昨天/本周学到了什么? 34 | * 编写代码的哪些方面能够使你兴奋或感兴趣? 35 | * 你最近遇到过什么技术挑战?你是如何解决的? 36 | * 在制作一个网页应用或网站的过程中,你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的? 37 | * 请谈谈你喜欢的开发环境。 38 | * 你最熟悉哪一套版本控制系统? 39 | * 你能描述当你制作一个网页的工作流程吗? 40 | * 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是? 41 | * 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗? 42 | * 你如何对网站的文件和资源进行优化? 43 | * 浏览器同一时间可以从一个域名下载多少资源? 44 | * 有什么例外吗? 45 | * 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间) 46 | * 如果你参与到一个项目中,发现他们使用 Tab 来缩进代码,但是你喜欢空格,你会怎么做? 47 | * 请写一个简单的幻灯效果页面。 48 | * 如果今年你打算熟练掌握一项新技术,那会是什么? 49 | * 请谈谈你对网页标准和标准制定机构重要性的理解。 50 | * 什么是 FOUC (无样式内容闪烁)?你如何来避免 FOUC? 51 | * 请解释什么是 ARIA 和屏幕阅读器 (screenreaders),以及如何使网站实现无障碍访问 (accessible)。 52 | * 请解释 CSS 动画和 JavaScript 动画的优缺点。 53 | * 什么是跨域资源共享 (CORS)?它用于解决什么问题? 54 | 55 | #### HTML 相关问题: 56 | 57 | * `doctype`(文档类型) 的作用是什么? 58 | * 浏览器标准模式 (standards mode) 、几乎标准模式(almost standards mode)和怪异模式 (quirks mode) 之间的区别是什么? 59 | * HTML 和 XHTML 有什么区别? 60 | * 如果页面使用 'application/xhtml+xml' 会有什么问题吗? 61 | * 如果网页内容需要支持多语言,你会怎么做? 62 | * 在设计和开发多语言网站时,有哪些问题你必须要考虑? 63 | * 使用 `data-` 属性的好处是什么? 64 | * 如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些? 65 | * 请描述 `cookies`、`sessionStorage` 和 `localStorage` 的区别。 66 | * 请解释 `