diff --git a/404.html b/404.html index 22edaf5..3e9da3b 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404 - Page not found ★ Front-end Developer Interview Questions

404 - Page not found

Think this is wrong? Open an issue

\ No newline at end of file +404 - Page not found ★ Front-end Developer Interview Questions

404 - Page not found

Think this is wrong? Open an issue

\ No newline at end of file diff --git a/about/index.html b/about/index.html index e173c45..7d208ec 100644 --- a/about/index.html +++ b/about/index.html @@ -1 +1 @@ -About ★ Front-end Developer Interview Questions

About

Overview 📦

This project started in 2009 by Darcy Clarke, releasing in 2012 to the public. Many of the initial questions were sourced from a shared etherpad document started by Paul Irish.

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.

This project was featured on The Changelog – Episode #143 (Feb 21, 2015)

Current Maintainers 🦄

Maintainers Emeriti 🐴

Original Contributors ✨

All Contributors 🌏

Saw something wrong? Want to add a question? suggest something? Check our contributing guidelines, open a pull-request or fill a bug.

\ No newline at end of file +About ★ Front-end Developer Interview Questions

About

Overview 📦

This project started in 2009 by Darcy Clarke, releasing in 2012 to the public. Many of the initial questions were sourced from a shared etherpad document started by Paul Irish.

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.

This project was featured on The Changelog – Episode #143 (Feb 21, 2015)

Current Maintainers 🦄

Maintainers Emeriti 🐴

Original Contributors ✨

All Contributors 🌏

Saw something wrong? Want to add a question? suggest something? Check our contributing guidelines, open a pull-request or fill a bug.

\ No newline at end of file diff --git a/index.html b/index.html index c7ee786..c77a1b7 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -Front-end Developer Interview Questions

Front-end Developer Interview Questions

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Read more about it here. Better in your language? See one of our translations.

Since this project begun, thousands of questions were added by an amazing group of people, and translated to more than 30 different languages. Want to contribute? See our contribution guidelines.

\ No newline at end of file +Front-end Developer Interview Questions

Front-end Developer Interview Questions

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Read more about it here. Better in your language? See one of our translations.

Since this project begun, thousands of questions were added by an amazing group of people, and translated to more than 30 different languages. Want to contribute? See our contribution guidelines.

\ No newline at end of file diff --git a/questions/coding-questions/index.html b/questions/coding-questions/index.html index 95f2c56..ac509f1 100644 --- a/questions/coding-questions/index.html +++ b/questions/coding-questions/index.html @@ -43,4 +43,4 @@ console.log< { bar: "hello" }; -}
Edit this page
\ No newline at end of file +}
Edit this page
\ No newline at end of file diff --git a/questions/css-questions/index.html b/questions/css-questions/index.html index 4b0192a..a00e695 100644 --- a/questions/css-questions/index.html +++ b/questions/css-questions/index.html @@ -1 +1 @@ -CSS Questions ★ Front-end Developer Interview Questions

CSS Questions

  • What is CSS selector specificity and how does it work?
  • What is the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
  • Describe Floats and how they work.
  • Describe z-index and how stacking context is formed.
  • Describe BFC (Block Formatting Context) and how it works.
  • What are the various clearing techniques and which is appropriate for what context?
  • How would you approach fixing browser-specific styling issues?
  • How do you serve your pages for feature-constrained browsers?
    • What techniques/processes do you use?
  • What are the different ways to visually hide content (and make it available only for screen readers)?
  • Have you ever used a grid system, and if so, what do you prefer?
  • Have you used or implemented media queries or mobile specific layouts/CSS?
  • Are you familiar with styling SVG?
  • Can you give an example of an @media property other than screen?
  • What are some of the “gotchas” for writing efficient CSS?
  • What are the advantages/disadvantages of using CSS preprocessors?
    • Describe what you like and dislike about the CSS preprocessors you have used.
  • How would you implement a web design comp that uses non-standard fonts?
  • Explain how a browser determines what elements match a CSS selector.
  • Describe pseudo-elements and discuss what they are used for.
  • Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
  • What does * { box-sizing: border-box; } do? What are its advantages?
  • What is the CSS display property and can you give a few examples of its use?
  • What is the difference between inline and inline-block?
  • What is the difference between the “nth-of-type()” and “nth-child()” selectors?
  • What is the difference between a relative, fixed, absolute and statically positioned element?
  • What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
  • Have you used CSS Grid?
  • Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
  • Have you ever worked with retina graphics? If so, when and what techniques did you use?
  • Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?
  • How is clearfix css property useful?
  • Can you explain the difference between px, em and rem as they relate to font sizing?
  • Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?
  • What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
  • What is the difference between CSS Grid and Flexbox? When would you use one over the other?
  • What is the difference between fixed, fluid and responsive layouts?
Edit this page
\ No newline at end of file +CSS Questions ★ Front-end Developer Interview Questions

CSS Questions

  • What is CSS selector specificity and how does it work?
  • What is the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
  • Describe Floats and how they work.
  • Describe z-index and how stacking context is formed.
  • Describe BFC (Block Formatting Context) and how it works.
  • What are the various clearing techniques and which is appropriate for what context?
  • How would you approach fixing browser-specific styling issues?
  • How do you serve your pages for feature-constrained browsers?
    • What techniques/processes do you use?
  • What are the different ways to visually hide content (and make it available only for screen readers)?
  • Have you ever used a grid system, and if so, what do you prefer?
  • Have you used or implemented media queries or mobile specific layouts/CSS?
  • Are you familiar with styling SVG?
  • Can you give an example of an @media property other than screen?
  • What are some of the “gotchas” for writing efficient CSS?
  • What are the advantages/disadvantages of using CSS preprocessors?
    • Describe what you like and dislike about the CSS preprocessors you have used.
  • How would you implement a web design comp that uses non-standard fonts?
  • Explain how a browser determines what elements match a CSS selector.
  • Describe pseudo-elements and discuss what they are used for.
  • Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
  • What does * { box-sizing: border-box; } do? What are its advantages?
  • What is the CSS display property and can you give a few examples of its use?
  • What is the difference between inline and inline-block?
  • What is the difference between the “nth-of-type()” and “nth-child()” selectors?
  • What is the difference between a relative, fixed, absolute and statically positioned element?
  • What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
  • Have you used CSS Grid?
  • Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
  • Have you ever worked with retina graphics? If so, when and what techniques did you use?
  • Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?
  • How is clearfix css property useful?
  • Can you explain the difference between px, em and rem as they relate to font sizing?
  • Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?
  • What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
  • What is the difference between CSS Grid and Flexbox? When would you use one over the other?
  • What is the difference between fixed, fluid and responsive layouts?
Edit this page
\ No newline at end of file diff --git a/questions/fun-questions/index.html b/questions/fun-questions/index.html index 1cd5383..cbb7d10 100644 --- a/questions/fun-questions/index.html +++ b/questions/fun-questions/index.html @@ -1 +1 @@ -Fun Questions ★ Front-end Developer Interview Questions

Fun Questions

  • What is a cool project that you’ve recently worked on?
  • What are some things you like about the developer tools you use?
  • Who inspires you in the front-end community?
  • Do you have any pet projects? What kind?
Edit this page
\ No newline at end of file +Fun Questions ★ Front-end Developer Interview Questions

Fun Questions

  • What is a cool project that you’ve recently worked on?
  • What are some things you like about the developer tools you use?
  • Who inspires you in the front-end community?
  • Do you have any pet projects? What kind?
Edit this page
\ No newline at end of file diff --git a/questions/general-questions/index.html b/questions/general-questions/index.html index f781168..8f6be04 100644 --- a/questions/general-questions/index.html +++ b/questions/general-questions/index.html @@ -1 +1 @@ -General Questions ★ Front-end Developer Interview Questions

General Questions

  • What did you learn yesterday/this week?
  • What excites or interests you about coding?
  • What is a recent technical challenge you experienced and how did you solve it?
  • When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?
  • Can you describe some SEO best practices or techniques you have used lately?
  • Can you explain any common techniques or recent issues solved in regards to front-end security?
  • What actions have you personally taken on recent projects to increase maintainability of your code?
  • Talk about your preferred development environment.
  • Which version control systems are you familiar with?
  • Can you describe your workflow when you create a web page?
  • If you have 5 different stylesheets, how would you best integrate them into the site?
  • Can you describe the difference between progressive enhancement and graceful degradation?
  • How would you optimize a website’s assets/resources?
  • How many resources will a browser download from a given domain at a time?
    • What are the exceptions?
  • Name 3 ways to decrease page load (perceived or actual load time).
  • If you jumped on a project and they used tabs and you used spaces, what would you do?
  • Describe how you would create a simple slideshow page.
  • If you could master one technology this year, what would it be?
  • Explain the importance of standards and standards bodies.
  • What is Flash of Unstyled Content? How do you avoid FOUC?
  • Explain what ARIA and screenreaders are, and how to make a website accessible.
  • Explain some of the pros and cons for CSS animations versus JavaScript animations.
  • What does CORS stand for and what issue does it address?
  • How did you handle a disagreement with your boss or your collaborator?
  • What resources do you use to learn about the latest in front end development and design?
  • What skills are needed to be a good front-end developer?
  • What role do you see yourself in?
  • Explain the difference between cookies, session storage, and local storage?
  • Can you explain what happens when you enter a URL into the browser?
  • Describe the difference between SSR and CSR. Discuss the pros and cons.
    • Are you familiar with static rendering?
    • Rehydration?
Edit this page
\ No newline at end of file +General Questions ★ Front-end Developer Interview Questions

General Questions

  • What did you learn yesterday/this week?
  • What excites or interests you about coding?
  • What is a recent technical challenge you experienced and how did you solve it?
  • When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?
  • Can you describe some SEO best practices or techniques you have used lately?
  • Can you explain any common techniques or recent issues solved in regards to front-end security?
  • What actions have you personally taken on recent projects to increase maintainability of your code?
  • Talk about your preferred development environment.
  • Which version control systems are you familiar with?
  • Can you describe your workflow when you create a web page?
  • If you have 5 different stylesheets, how would you best integrate them into the site?
  • Can you describe the difference between progressive enhancement and graceful degradation?
  • How would you optimize a website’s assets/resources?
  • How many resources will a browser download from a given domain at a time?
    • What are the exceptions?
  • Name 3 ways to decrease page load (perceived or actual load time).
  • If you jumped on a project and they used tabs and you used spaces, what would you do?
  • Describe how you would create a simple slideshow page.
  • If you could master one technology this year, what would it be?
  • Explain the importance of standards and standards bodies.
  • What is Flash of Unstyled Content? How do you avoid FOUC?
  • Explain what ARIA and screenreaders are, and how to make a website accessible.
  • Explain some of the pros and cons for CSS animations versus JavaScript animations.
  • What does CORS stand for and what issue does it address?
  • How did you handle a disagreement with your boss or your collaborator?
  • What resources do you use to learn about the latest in front end development and design?
  • What skills are needed to be a good front-end developer?
  • What role do you see yourself in?
  • Explain the difference between cookies, session storage, and local storage?
  • Can you explain what happens when you enter a URL into the browser?
  • Describe the difference between SSR and CSR. Discuss the pros and cons.
    • Are you familiar with static rendering?
    • Rehydration?
Edit this page
\ No newline at end of file diff --git a/questions/html-questions/index.html b/questions/html-questions/index.html index 9f8fb28..9985703 100644 --- a/questions/html-questions/index.html +++ b/questions/html-questions/index.html @@ -1 +1 @@ -HTML Questions ★ Front-end Developer Interview Questions

HTML Questions

  • What does a doctype do?
  • How do you serve a page with content in multiple languages?
  • What kind of things must you be wary of when designing or developing for multilingual sites?
  • What are data- attributes good for?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Describe the difference between a cookie, sessionStorage and localStorage.
  • Describe the difference between <script>, <script async> and <script defer>.
  • Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
  • What is progressive rendering?
  • Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
  • Have you used different HTML templating languages before?
  • What is the difference between canvas and svg?
  • What are empty elements in HTML ?
Edit this page
\ No newline at end of file +HTML Questions ★ Front-end Developer Interview Questions

HTML Questions

  • What does a doctype do?
  • How do you serve a page with content in multiple languages?
  • What kind of things must you be wary of when designing or developing for multilingual sites?
  • What are data- attributes good for?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Describe the difference between a cookie, sessionStorage and localStorage.
  • Describe the difference between <script>, <script async> and <script defer>.
  • Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
  • What is progressive rendering?
  • Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
  • Have you used different HTML templating languages before?
  • What is the difference between canvas and svg?
  • What are empty elements in HTML ?
Edit this page
\ No newline at end of file diff --git a/questions/javascript-questions/index.html b/questions/javascript-questions/index.html index 530fc5b..1d66d51 100644 --- a/questions/javascript-questions/index.html +++ b/questions/javascript-questions/index.html @@ -1,2 +1,2 @@ JavaScript Questions ★ Front-end Developer Interview Questions

JavaScript Questions

  • Explain event delegation.
  • Explain how this works in JavaScript.
    • Can you give an example of one of the ways that working with this has changed in ES6?
  • Explain how prototypal inheritance works.
  • What is the difference between a variable that is: null, undefined or undeclared?
    • How would you go about checking for any of these states?
  • What is a closure, and how/why would you use one?
  • What language constructions do you use for iterating over object properties and array items?
  • Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?
  • What is a typical use case for anonymous functions?
  • What is the difference between host objects and native objects?
  • Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • Can you explain what Function.call and Function.apply do? What is the notable difference between the two?
  • Explain Function.prototype.bind.
  • What is the difference between feature detection, feature inference, and using the UA string?
  • Explain “hoisting”.
  • What is type coercion? What are common pitfalls of relying on type coercion in JavaScript code?
  • Describe event bubbling.
  • Describe event capturing.
  • What is the difference between an “attribute” and a “property”?
  • What are the pros and cons of extending built-in JavaScript objects?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Why is it called a Ternary operator, what does the word “Ternary” indicate?
  • What is strict mode? What are some of the advantages/disadvantages of using it?
  • What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
  • What tools and techniques do you use debugging JavaScript code?
  • Explain the difference between mutable and immutable objects.
    • What is an example of an immutable object in JavaScript?
    • What are the pros and cons of immutability?
    • How can you achieve immutability in your own code?
  • Explain the difference between synchronous and asynchronous functions.
  • What is event loop?
    • What is the difference between call stack and task queue?
  • What are the differences between variables created using let, var or const?
  • What are the differences between ES6 class and ES5 function constructors?
  • Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
  • What advantage is there for using the arrow syntax for a method in a constructor?
  • What is the definition of a higher-order function?
  • Can you give an example for destructuring an object or an array?
  • Can you give an example of generating a string with ES6 Template Literals?
  • Can you give an example of a curry function and why this syntax offers an advantage?
  • What are the benefits of using spread syntax and how is it different from rest syntax?
  • How can you share code between files?
  • Why you might want to create static class members?
  • What is the difference between while and do-while loops in JavaScript?
  • What is a promise? Where and how would you use promise?
  • Discuss how you might use Object Oriented Programming principles when coding with JavaScript.

Coding questions

  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • 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
  • What will be returned by each of these?
console.log("hello" || "world")
-console.log("foo" && "bar")
  • Write an immediately invoked function expression (IIFE)
Edit this page
\ No newline at end of file +console.log("foo" && "bar")
Edit this page
\ No newline at end of file diff --git a/questions/network-questions/index.html b/questions/network-questions/index.html index 5a6cbf7..0463bca 100644 --- a/questions/network-questions/index.html +++ b/questions/network-questions/index.html @@ -1 +1 @@ -Network Questions ★ Front-end Developer Interview Questions

Network Questions

  • Traditionally, why has it been better to serve site assets from multiple domains?
  • Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • Explain the following request and response headers:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
  • What is domain pre-fetching and how does it help with performance?
  • What is a CDN and what is the benefit of using one?
Edit this page
\ No newline at end of file +Network Questions ★ Front-end Developer Interview Questions

Network Questions

  • Traditionally, why has it been better to serve site assets from multiple domains?
  • Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • Explain the following request and response headers:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
  • What is domain pre-fetching and how does it help with performance?
  • What is a CDN and what is the benefit of using one?
Edit this page
\ No newline at end of file diff --git a/questions/performance-questions/index.html b/questions/performance-questions/index.html index 4f6287b..f520426 100644 --- a/questions/performance-questions/index.html +++ b/questions/performance-questions/index.html @@ -1 +1 @@ -Performance Questions ★ Front-end Developer Interview Questions

Performance Questions

  • What tools would you use to find a performance bug in your code?
  • What are some ways you may improve your website’s scrolling performance?
  • Explain the difference between layout, painting and compositing.
Edit this page
\ No newline at end of file +Performance Questions ★ Front-end Developer Interview Questions

Performance Questions

  • What tools would you use to find a performance bug in your code?
  • What are some ways you may improve your website’s scrolling performance?
  • Explain the difference between layout, painting and compositing.
Edit this page
\ No newline at end of file diff --git a/questions/testing-questions/index.html b/questions/testing-questions/index.html index a46d342..e03099d 100644 --- a/questions/testing-questions/index.html +++ b/questions/testing-questions/index.html @@ -1 +1 @@ -Testing Questions ★ Front-end Developer Interview Questions

Testing Questions

  • What are some advantages/disadvantages to testing your code?
  • What tools would you use to test your code’s functionality?
  • What is the difference between a unit test and a functional/integration test?
  • What is the purpose of a code style linting tool?
  • What are some of the testing best practices?
Edit this page
\ No newline at end of file +Testing Questions ★ Front-end Developer Interview Questions

Testing Questions

  • What are some advantages/disadvantages to testing your code?
  • What tools would you use to test your code’s functionality?
  • What is the difference between a unit test and a functional/integration test?
  • What is the purpose of a code style linting tool?
  • What are some of the testing best practices?
Edit this page
\ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml index 3d154b4..5c9917e 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -3,236 +3,236 @@ https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/about/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/coding-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/css-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/fun-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/general-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/html-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/javascript-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/network-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/performance-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/questions/testing-questions/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/************/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/arabic/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/bulgarian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/burmese/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/chinese-traditional/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/chinese/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/croatian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/czech/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/danish/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/dutch/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/farsi/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/french/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/german/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/greek/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/hebrew/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/hindi/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/hungarian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/indonesian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/italian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/japanese/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/korean/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/korean/reference.html - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/latvian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/polish/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/portuguese/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/romanian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/russian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/serbian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/slovakian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/slovenian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/spanish/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/swedish/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/turkish/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/ukrainian/ - 2023-12-13 + 2024-01-07 https://h5bp.org/Front-end-Developer-Interview-Questions//Front-end-Developer-Interview-Questions/translations/vietnamese/ - 2023-12-13 + 2024-01-07 diff --git a/translations/************/index.html b/translations/************/index.html index 315a004..e2aca9b 100644 --- a/translations/************/index.html +++ b/translations/************/index.html @@ -1,2 +1,2 @@ Front End Developer Interview Questions ★ Front-end Developer Interview Questions

Front End Developer Interview Questions

Table of Contents

  1. General Questions
  2. HTML Questions
  3. CSS Questions
  4. JS Questions
  5. Testing Questions
  6. Performance Questions
  7. Network Questions
  8. Fun Questions

[⬆] General Questions:

  • What did you learn yesterday/this week?
  • What excites or interests you about coding?
  • What is a recent technical challenge you experienced and how did you solve it?
  • When building a new web site or maintaining one, can you explain some techniques you have used to increase performance?
  • Can you describe some SEO best practices or techniques you have used lately?
  • Can you explain any common techniques or recent issues solved in regards to front-end security?
  • What actions have you personally taken on recent projects to increase maintainability of your code?
  • Talk about your preferred development environment.
  • Which version control systems are you familiar with?
  • Can you describe your workflow when you create a web page?
  • If you have 5 different stylesheets, how would you best integrate them into the site?
  • Can you describe the difference between progressive enhancement and graceful degradation?
  • How would you optimize a website’s assets/resources?
  • How many resources will a browser download from a given domain at a time?
    • What are the exceptions?
  • Name 3 ways to decrease page load (perceived or actual load time).
  • If you jumped on a project and they used tabs and you used spaces, what would you do?
  • Describe how you would create a simple slideshow page.
  • If you could master one technology this year, what would it be?
  • Explain the importance of standards and standards bodies.
  • What is Flash of Unstyled Content? How do you avoid FOUC?
  • Explain what ARIA and screenreaders are, and how to make a website accessible.
  • Explain some of the pros and cons for CSS animations versus JavaScript animations.
  • What does CORS stand for and what issue does it address?
  • How did you handle a disagreement with your boss or your collaborator?
  • What resources do you use to learn about the latest in front end development and design?
  • What skills are needed to be a good front-end developer?
  • What role do you see yourself in?
  • Explain the difference between cookies, session storage, and local storage?
  • Can you explain what happens when you enter a URL into the browser?
  • Describe the difference between SSR and CSR. Discuss the pros and cons.
    • Are you familiar with static rendering?
    • Rehydration?

[⬆] HTML Questions:

  • What does a doctype do?
  • How do you serve a page with content in multiple languages?
  • What kind of things must you be wary of when designing or developing for multilingual sites?
  • What are data- attributes good for?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Describe the difference between a cookie, sessionStorage and localStorage.
  • Describe the difference between <script>, <script async> and <script defer>.
  • Why is it generally a good idea to position CSS <link>s between <head></head> and JS <script>s just before </body>? Do you know any exceptions?
  • What is progressive rendering?
  • Why you would use a srcset attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
  • Have you used different HTML templating languages before?
  • What is the difference between canvas and svg?
  • What are empty elements in HTML ?

[⬆] CSS Questions:

  • What is CSS selector specificity and how does it work?
  • What is the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?
  • Describe Floats and how they work.
  • Describe z-index and how stacking context is formed.
  • Describe BFC (Block Formatting Context) and how it works.
  • What are the various clearing techniques and which is appropriate for what context?
  • How would you approach fixing browser-specific styling issues?
  • How do you serve your pages for feature-constrained browsers?
    • What techniques/processes do you use?
  • What are the different ways to visually hide content (and make it available only for screen readers)?
  • Have you ever used a grid system, and if so, what do you prefer?
  • Have you used or implemented media queries or mobile specific layouts/CSS?
  • Are you familiar with styling SVG?
  • Can you give an example of an @media property other than screen?
  • What are some of the “gotchas” for writing efficient CSS?
  • What are the advantages/disadvantages of using CSS preprocessors?
    • Describe what you like and dislike about the CSS preprocessors you have used.
  • How would you implement a web design comp that uses non-standard fonts?
  • Explain how a browser determines what elements match a CSS selector.
  • Describe pseudo-elements and discuss what they are used for.
  • Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
  • What does * { box-sizing: border-box; } do? What are its advantages?
  • What is the CSS display property and can you give a few examples of its use?
  • What is the difference between inline and inline-block?
  • What is the difference between the “nth-of-type()” and “nth-child()” selectors?
  • What is the difference between a relative, fixed, absolute and statically positioned element?
  • What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
  • Have you used CSS Grid?
  • Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy?
  • Have you ever worked with retina graphics? If so, when and what techniques did you use?
  • Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?
  • How is clearfix css property useful?
  • Can you explain the difference between px, em and rem as they relate to font sizing?
  • Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class?
  • What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
  • What is the difference between CSS Grid and Flexbox? When would you use one over the other?
  • What is the difference between fixed, fluid and responsive layouts?

[⬆] JS Questions:

  • Explain event delegation.
  • Explain how this works in JavaScript.
    • Can you give an example of one of the ways that working with this has changed in ES6?
  • Explain how prototypal inheritance works.
  • What is the difference between a variable that is: null, undefined or undeclared?
    • How would you go about checking for any of these states?
  • What is a closure, and how/why would you use one?
  • What language constructions do you use for iterating over object properties and array items?
  • Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?
  • What is a typical use case for anonymous functions?
  • What is the difference between host objects and native objects?
  • Explain the difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • Can you explain what Function.call and Function.apply do? What is the notable difference between the two?
  • Explain Function.prototype.bind.
  • What is the difference between feature detection, feature inference, and using the UA string?
  • Explain “hoisting”.
  • What is type coercion? What are common pitfalls of relying on type coercion in JavaScript code?
  • Describe event bubbling.
  • Describe event capturing.
  • What is the difference between an “attribute” and a “property”?
  • What are the pros and cons of extending built-in JavaScript objects?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Why is it called a Ternary operator, what does the word “Ternary” indicate?
  • What is strict mode? What are some of the advantages/disadvantages of using it?
  • What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
  • What tools and techniques do you use debugging JavaScript code?
  • Explain the difference between mutable and immutable objects.
    • What is an example of an immutable object in JavaScript?
    • What are the pros and cons of immutability?
    • How can you achieve immutability in your own code?
  • Explain the difference between synchronous and asynchronous functions.
  • What is event loop?
    • What is the difference between call stack and task queue?
  • What are the differences between variables created using let, var or const?
  • What are the differences between ES6 class and ES5 function constructors?
  • Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
  • What advantage is there for using the arrow syntax for a method in a constructor?
  • What is the definition of a higher-order function?
  • Can you give an example for destructuring an object or an array?
  • Can you give an example of generating a string with ES6 Template Literals?
  • Can you give an example of a curry function and why this syntax offers an advantage?
  • What are the benefits of using spread syntax and how is it different from rest syntax?
  • How can you share code between files?
  • Why you might want to create static class members?
  • What is the difference between while and do-while loops in JavaScript?
  • What is a promise? Where and how would you use promise?
  • Discuss how you might use Object Oriented Programming principles when coding with JavaScript.

[⬆] Coding Questions:

  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • 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
  • What will be returned by each of these?
console.log("hello" || "world")
-console.log("foo" && "bar")
  • Write an immediately invoked function expression (IIFE)

[⬆] Testing Questions:

  • What are some advantages/disadvantages to testing your code?
  • What tools would you use to test your code’s functionality?
  • What is the difference between a unit test and a functional/integration test?
  • What is the purpose of a code style linting tool?
  • What are some of the testing best practices?

[⬆] Performance Questions:

  • What tools would you use to find a performance bug in your code?
  • What are some ways you may improve your website’s scrolling performance?
  • Explain the difference between layout, painting and compositing.

[⬆] Network Questions:

  • Traditionally, why has it been better to serve site assets from multiple domains?
  • Do your best to describe the process from the time you type in a website’s URL to it finishing loading on your screen.
  • What are the differences between Long-Polling, Websockets and Server-Sent Events?
  • Explain the following request and response headers:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • What are HTTP methods? List all HTTP methods that you know, and explain them.
  • What is domain pre-fetching and how does it help with performance?
  • What is a CDN and what is the benefit of using one?

[⬆] Fun Questions:

  • What is a cool project that you’ve recently worked on?
  • What are some things you like about the developer tools you use?
  • Who inspires you in the front-end community?
  • Do you have any pet projects? What kind?
Edit this page
\ No newline at end of file +console.log("foo" && "bar")

[⬆] Testing Questions:

[⬆] Performance Questions:

[⬆] Network Questions:

[⬆] Fun Questions:

Edit this page
\ No newline at end of file diff --git a/translations/arabic/index.html b/translations/arabic/index.html index a345631..2a4649b 100644 --- a/translations/arabic/index.html +++ b/translations/arabic/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

أسئلة مسلية:

المساهمون:

بدأت هذه الوثيقة في عام 2009 بتعاون @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal.

ومنذ ذلك الحين تلقى مساهمات من أكثر من 100 مطور.

Edit this page
\ No newline at end of file +console.log('three');

أسئلة مسلية:

المساهمون:

بدأت هذه الوثيقة في عام 2009 بتعاون @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal.

ومنذ ذلك الحين تلقى مساهمات من أكثر من 100 مطور.

Edit this page
\ No newline at end of file diff --git a/translations/bulgarian/index.html b/translations/bulgarian/index.html index 5681378..ea8495a 100644 --- a/translations/bulgarian/index.html +++ b/translations/bulgarian/index.html @@ -1,3 +1,3 @@ Въпроси за интервю за front-end разработчици ★ Front-end Developer Interview Questions

Въпроси за интервю за front-end разработчици

Въпроси за интервю за front-end разработчици

Това репозитори съдържа въпроси от интервюта на front-end разработчици, които могат да бъдат използвани за отсяване на потенциални кандидати. Не препоръчваме използването на всеки въпрос за всеки кандидат (това би отнело часове). Избирането на няколко въпроса от списъка би могло да помогне да се проверят търсените умения у кандидатите.

Статията Baseline For Front-End Developers на Rebecca Murphey също е чудесен ресурс за четене преди провеждането на интервю.

Бележка: Имайте предвид, че много от тези въпроси могат да породят интересни дискусии и да ви помогнат по-добре да проверите познанията и начина на мислене на кандидата, отколкото ако получавате директен отговор.

Съдържание

  1. Участници в проекта
  2. Общи въпроси
  3. HTML въпроси
  4. CSS въпроси
  5. JS въпроси
  6. jQuery въпроси
  7. Въпроси, свързани с тестване
  8. Въпроси, свързани с бързодействие
  9. Мрежови въпроси
  10. Въпроси, свързани с програмиране
  11. Забавни въпроси
  12. Допълнителни ресурси

[⬆] Участници в проекта:

Мнозинството от въпроси са взети от oksoclap измислени от Paul Irish (@paul_irish) и благодарение на:

[⬆] Общи въпроси:

  • Какво научихте вчера / тази седмица?
  • Какво ви привлича в писането на код?
  • С какво техническо предизвикателство се сблъскахте наскоро и как го решихте?
  • Какво свързва потребителския интерфейс, сигурността, функционирането, SEO, поддръжката или технологиите по между им при създаването на уеб приложения или сайтове?
  • Разкажете за предпочитанията ви към операционни системи, редактори, браузъри, инструменти и т.н.
  • С кои системи за управление на версиите (source control) сте запознати?
  • Можете ли да обясните последователността от действия, които извършвате, когато създавате уеб страници?
  • Ако имате 5 различни стилови файла, как бихте ги интегрирали?
  • Можете ли да обясните разликите между progressive enhancement и graceful degradation?
  • Как бихте оптимизирали зареждането на ресурси за дадена уеб страница?
  • По колко ресурса едновременно свалят браузърите от даден домейн?
    • Какви са изключенията?
  • Назовете 3 начина да намалите скоростта на зареждане на уеб страница (забележимата или реалната скорост на зареждане).
  • Ако започнете работа по проект, в чийто код са използвани табулации, а вие сте използвали интервали, какво ще направите?
  • Обяснете как бихте изградили страница със слайд-шоу.
  • Ако можете да научите много добре 1 технология тази година, каква ще е тя?
  • Обяснете важността на стандартите и организациите за стандартизация.
  • Какво е Flash of unstyled content? Как се справяте с FOUC?
  • Обяснете какво е ARIA и екранни четци и как да правим сайтовете по-достъпни.
  • Обяснете предимствата и недостатъците на CSS анимациите пред тези на JavaScript.
  • Какво означава CORS и какъв проблем решава?

[⬆] HTML въпроси:

  • Какво прави doctype?
  • Каква е разликата между режимите “standards mode”, “almost standards mode” и “quirks mode”?
  • Каква е разликата между HTML и XHTML?
  • Има ли проблеми при обработката на страници с application/xhtml+xml?
  • Как показвате страници със съдържание на няколко езика?
  • Какви неща трябва да се имат предвид, когато правите дизайн или разработвате многоезични страници?
  • За какво служат HTML атрибутите, които започват с data-?
  • Представете си HTML5 като отворена уеб платформа. Кои са градивните елементи на HTML5?
  • Обяснете разликата между бисквитки, sessionStorage и localStorage.
  • Обяснете разликата <script>, <script async> и <script defer>.
  • Защо е добре да се зарежда CSS <link> в елемента <head></head> и JS <script> преди затварящия таг </body>? Знаете ли за изключения?
  • Какво означава progressive rendering?
  • Защо бихте използвали srcset атрибут в <img> таг? Обяснете процеса, през който минава браузърът, когато обработва съдържанието на този атрибут.
  • Използвали ли сте различни шаблонни HTML езици?

[⬆] CSS въпроси:

  • Каква е разликата между class и ID в CSS?
  • Каква е разликата между “resetting” и “normalizing” в CSS? Кое бихте избрали и защо?
  • Обяснете плаващите елементи (floats) и как работят.
  • Обяснете z-index и как се формира наслагването на елементите.
  • Опишете BFC (Block Formatting Context) и как работи той.
  • Кои са различните clearing техники и кои в какъв контекст се използват?
  • Обяснете CSS sprite-овете, и как можете да ги вкарате на уеб страница или сайт.
  • Кои са любимите ви техники, които заменят картинките и в кои случаи кои от тях използвате?
  • Как бихте подходили за да решите специфичните стилове за различните браузъри?
  • Как показвате страниците си на браузъри, които не поддържат част от възможностите на HTML5?
    • Какви техники/процеси използвате?
  • Какви са различните начини визуално да скриете съдържание от уеб страницата (и да го направите видимо само за екранните четци)?
  • Използвали ли сте грид система и ако да, коя предпочитате?
  • Използвали ли сте media queries или специфичен за мобилните платформи layouts или CSS?
  • Запознати ли сте със стилизирането на SVG?
  • Как оптимизирате вашите уеб страници за принтиране?
  • Кои са някои от “триковете” за писане на ефективен CSS?
  • Какви са предимствата/недостатъците при използване на препроцесори?
    • Опишете какво ви харесва и не ви харесва при използването им.
  • Как реализирате уеб дизайни, които използват нестандартни фонтове?
  • Обяснете как уеб браузърите разбират кои елементи отговарят на даден CSS селектор.
  • Опишете псевдо-елементите и обяснете за какво се използват.
  • Обяснете как разбирате box model и как бихте накарали браузъра с CSS да изпълни layout в различни box model-и.
  • Какво прави * { box-sizing: border-box; }? Какви са предимствата му?
  • Направете списък на всички стойности на display, за които можете да се сетите.
  • Каква е разликата между inline и inline-block?
  • Каква е разликата между позиционирането на елементите relative, fixed, absolute и static?
  • ‘C’ в CSS идва от Cascading. Какъв приоритет имат стиловете при наслагването им (няколко примера)? Как бихте използвали това?
  • Какви CSS frameworks сте ползвали самостоятелно или в проекти? Как бихте ги променили / обогатили?
  • Тествали ли сте новия CSS Flexbox или Grid specs?
  • Каква е разликата между responsive design и adaptive design на сайт?
  • Работили ли сте с retina graphics? Ако да, какви техники използвахте?
  • Има ли причина да ползвате translate() вместо абсолютно позициониране и обратно? Защо?

[⬆] JS въпроси:

  • Обяснете event delegation.
  • Обяснете как работи this в JavaScript.
  • Обяснете как работи наследяването на прототипи (prototypal inheritance).
  • AMD или CommonJS?
  • Обяснете защо този код не работи като IIFE: function foo(){ }();.
    • Какво е нужно да се промени, за да може кодът да работи като IIFE?
  • Каква е разликата между променлива, която е: null, undefined или недекларирана?
    • Как проверявате всяко от тези състояния на променливите?
  • Какво е closure? Как и защо се използва?
  • Кога се използват анонимните функции?
  • Как организирате своя код? (module патърн, класическо наследяване?)
  • Каква е разликата между host обекти и native обекти?
  • Каква е разликата между function Person(){}, var person = Person() и var person = new Person()?
  • Каква е разликата между .call и .apply?
  • Обяснете Function.prototype.bind?
  • В какви случаи бихте използвали document.write()?
  • Каква е разликата между feature detection, feature inference, и използването на user agent (UA) string?
  • Обяснете AJAX в детайли.
  • Какви са предимствата и недостатъците при употребата на AJAX?
  • Обяснете как работи JSONP (и защо не е точно AJAX).
  • Използвали ли сте JavaScript темплейти?
    • Ако да, коя библиотека сте използвали?
  • Обяснете “hoisting”.
  • Обяснете “event bubbling”.
  • Каква е разликата между “attribute” и “property”?
  • Защо extending built-in в JavaScript обектите не е добра идея?
  • Каква е разликата между събитията “document load” и “document DOMContentLoaded”?
  • Каква е разликата между == и ===?
  • Обяснете same-origin policy от гледна точка на JavaScript.
  • Оправете кода, така че да работи:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Защо тернарният оператор се нарича така? Какво означава думата “тернарен”?
  • Какво е "use strict";? Какви са предимствата и недостатъците на ползването му в кода?
  • Напишете for loop, който стига до 100 и извежда “fizz” за всички числа, които се делят на 3, “buzz” за тези, които се делят 5 и “fizzbuzz” за числата, които се делят и на 3 и на 5.
  • Защо по правило е добра идея да се остави global scope на един уебсайт непроменен?
  • Защо бихте използвали нещо като load събитието? Това събитие има ли недостатъци? Знаете ли алтернативи и защо бихте ги използвали?
  • Обяснете какво е single page app и как може да се оптимизира за търсачките.
  • Докъде се простира опитът ви с Promises и / или техните polyfills?
  • Какви са предимствата и недостатъците при използване на Promises вместо callbacks?
  • Кои са някои предимства / недостатъци на писането на JavaScript код на език, който се компилира до JavaScript?
  • Какви инструменти и техники използвате, когато дебъгвате JavaScript код?
  • Кои конструкции на езика използвате, за да итерирате атрибути (properties) на обекти и елементи в масиви?
  • Обяснете разликата между mutable и immutable обекти.
    • Дайте пример за immutable обект в JavaScript.
    • Какви са предимствата и недостатъците на това един обект да бъде immutable?
    • Как може да направите обект immutablе във Вашия собствен код?
  • Обяснете разликата между синхронни и асинхронни функции.
  • Какво е event loop?
    • Каква е разликата между call stack и task queue?
  • Обяснете разликите при използването на foo в примерите: function foo() {}; var foo = function() {}
  • Какви са разликите при създаавнето на променливи с let, var и const?

[⬆] jQuery въпроси:

  • Обяснете “chaining”.
  • Обяснете “deferreds”.
  • Какви специфични за jQuery оптимизации, можете да направите?
  • Какво прави .end()?
  • Как и защо бихте сложили bound event handler в namespace?
  • Назовете 4 различни типа стойности, които можете да подадете на jQuery метод.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object и т. н.
  • Какво е effects (или fx) queue?
  • Каква е разликата между .get(), [], и .eq()?
  • Каква е разликата между .bind(), .live(), и .delegate()?
  • Каква е разликата между $ и $.fn? Или просто: Какво е $.fn?
  • Оптимизирайте този селектор:
$(".foo div#bar:eq(0)")

[⬆] Въпроси, свързани с тестване:

  • Какви са предимствата и недостатъците в тестването на код?
  • Какви инструменти бихте могли да използвате, за да тествате как работи Вашия код?
  • Каква е разликата между компонентен тест (unit test) и функционален / интеграционен тест (functional / integration test)?
  • Каква е целта на инструментите за анализиране на кода (linting tools)?

[⬆] Въпроси, свързани с бързодействие:

  • Какви инструменти бихте използвали, за да откриете проблем, свързан с бързодействието на кода?
  • Дайте примери за начини, по които може да подобрите бързодействието на скролирането в сайт.
  • Обяснете разликата между layout, painting и compositing.

[⬆] Мрежови въпроси:

  • Защо по традиция е препоръчително да се зареждат ресурсите за даден уебсайт от няколко домейна?
  • Опишете по най-добрия възможен начин процесът, който се случва от написването на URL-a на един уебсайт до края на зарежаднето му на екрана.
  • Какви са разликите между Long-Polling, Websockets и Server-Sent Events?
  • Обяснете следните хедъри на request и response:
    • Разлики между Expires, Date, Age и If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Какво представляват HTTP методите? Избройте всички HTTP методи, които познавате, и ги обяснете.

[⬆] Въпроси, свързани с програмиране:

modulo(12, 5) // 2

Въпрос: Имплементирайте функция за намиране на остатък от деление която отговаря на горното условие (да връща 2 при аргументи 12 и 5)

"i'm a lasagna hog".split("").reverse().join("");

Въпрос: Каква стойност ще върне горният израз?

Отговор: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Въпрос: Каква е стойността на window.foo?

Отговор: “bar”, ако window.foo има стойност false, иначе стойността на window.foo)

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Въпрос: Какво ще изкарат двете alert функции от горния код?

Отговор: “Hello World” и ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Въпрос: Каква е стойността на foo.length?

Отговор: 2

[⬆] Забавни въпроси:

  • Кое е най-якото нещо, което сте писали и от което сте най-горд?
  • Кое най-много ви допада в инструментите за разработчици, които използвате?
  • Разработвате ли някакви проекти като хоби? Какви?
  • Какво най-много ви харесва в Internet Explorer?
  • Как предпочитате кафето си?

[⬆] Допълнителни ресурси:

Edit this page
\ No newline at end of file +foo.push(2);

Въпрос: Каква е стойността на foo.length?

Отговор: 2

[⬆] Забавни въпроси:

[⬆] Допълнителни ресурси:

Edit this page
\ No newline at end of file diff --git a/translations/burmese/index.html b/translations/burmese/index.html index 9a38869..eccc6f6 100644 --- a/translations/burmese/index.html +++ b/translations/burmese/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

အပျော်မေးခွန်းများ

Contributors:

This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

It has since received contributions from over 100 developers.

Burmese translation provided by @mmhan.

Edit this page
\ No newline at end of file +console.log('three');

အပျော်မေးခွန်းများ

Contributors:

This document started in 2009 as a collaboration of @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

It has since received contributions from over 100 developers.

Burmese translation provided by @mmhan.

Edit this page
\ No newline at end of file diff --git a/translations/chinese-traditional/index.html b/translations/chinese-traditional/index.html index 3f48b5f..585b49a 100644 --- a/translations/chinese-traditional/index.html +++ b/translations/chinese-traditional/index.html @@ -10,4 +10,4 @@ foo.pushsetTimeout(function() { console.log('two'); }, 0); -console.log('three');

有趣問題：

貢獻作者群:

此文件是由 @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym 於 2009 年共同發起。

目前已經超過 100 開發者 參與此專案.

Edit this page
\ No newline at end of file +console.log('three');

有趣問題：

貢獻作者群:

此文件是由 @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym 於 2009 年共同發起。

目前已經超過 100 開發者 參與此專案.

Edit this page
\ No newline at end of file diff --git a/translations/chinese/index.html b/translations/chinese/index.html index 57cd28f..d6f73a2 100644 --- a/translations/chinese/index.html +++ b/translations/chinese/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

趣味问题：

贡献者：

本文档始于 2009 年，是以下作者的合作成果：@paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed 和 @iansym。

时至今日，文档已经融入超过 100 位开发者的贡献。

Edit this page
\ No newline at end of file +console.log('three');

趣味问题：

贡献者：

本文档始于 2009 年，是以下作者的合作成果：@paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed 和 @iansym。

时至今日，文档已经融入超过 100 位开发者的贡献。

Edit this page
\ No newline at end of file diff --git a/translations/croatian/index.html b/translations/croatian/index.html index 22db8fd..e4321af 100644 --- a/translations/croatian/index.html +++ b/translations/croatian/index.html @@ -1,4 +1,4 @@ Intervju za posao Front-end Developera ★ Front-end Developer Interview Questions

Intervju za posao Front-end Developera

Intervju za posao Front-end Developera

@version 2.0.0

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.

Rebecca Murphey Baseline For Front-End Developers je prilično dobro štivo za pročitati prije samog razgovora.

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.

Autori originalne liste

Većina pitanja je preuzeta sa oksoclap tj. rasprave koju je u originalu pokrenuo Paul Irish (@paul_irish) i kojoj su pridonijele sljedeće osobe:

Općenita pitanja:

  • Opišite Vašu preferiranu razvojnu okolinu. (OS, Editor, Broseri, Alati itd.)
  • Možete li opisati Vaš postupak izrade web stranice?
  • Možete li opisati razliku između progresivnog poboljšanja i neprimjetne degradacije?
    • Bonus bodovi ako se opiše detektiranje mogućnosti browsera
  • Objasnite što je to “Semantički HTML”.
  • Kako biste optimirali infrastrukturu i resurse web stranice?
    • Traženje više rješenja poput:
      • Spajanje datoteka
      • Minifikacija datoteka
      • Korištenje CDN-a
      • Međuspremanje (Caching)
      • itd.
  • Zašto je sadržaj bolje poslužiti sa više domena?
    • Koliko resursa preglednik skida sa jedne domene odjednom?
  • Navedite tri načina za smanjivanje vremena učitavanja stranice. (primijećeno ili stvarno vrijeme učitavanje)
  • Ako bi došli na projekt gdje se koriste tabovi a Vi koristite razmake, što biste učinili?
    • Npr. preporučanje korištenja EditorConfig-a (http://editorconfig.org)
    • Konformacija postojećoj praksi (zadržavanje konzistentnosti)
    • korištenje :retab! naredbe
  • Napravite jednostavnu stranicu za držanje prezentacije
    • Bonus bodovi za nekorištenje JavaScript-a.
  • Koje alate koristite za testiranje performansi koda?
    • Profiler, JSPerf, Dromaeo
  • Kad bi mogli odabrati jednu tehologiju koju ćete naučiti ove godine, što bi to bila?
  • Objasnite važnost standarda i tijela za standardizaciju
  • Što je FOUC? Kako biste izbjegli FOUC?

Pitanja za HTML:

  • Što radi doctype?
  • Koja je razlika između standardnog i dosjetljivog (quirks) modusa?
  • Koja su ograničenja kod posluživanja XHTML stranica?
    • Postoje li problemi kod posluživanja stranica sa application/xhtml+xml?
  • Kako biste poslužili stranicu sa sadržajem na više jezika?
    • Na što morate paziti kod dizajniranja ili razvoja za višejezičnu stranicu?
  • Za što se koriste data- atributi?
  • Razmotrite HTML5 kao platformu otvorenog web-a. Koji su gradivni elementi HTML5-ice?
  • Pojasnite razliku između kolačića, podataka sjednice (sessionStorage) i lokalne pohrane.

Pitanja za JavaScript:

  • Objasnite delegaciju događaja.
  • Objasnite kako se u Javascriptu koristi this
  • Pojasnite prototipno nasljeđivanje
  • Kako testirate JavaScript?
  • AMD u usporedbi sa CommonJS-om?
  • Što je to hash tabela?
  • Što su undefined i undeclared varijable?
  • Što je closure, kako i zašto se koristi?
    • Vaš omiljeni način njihovog kreiranja? argyle (samo kod IIFE-a)
  • Koja je uobičajena primjena za anonimnu funkciju?
  • Objasnite “JavaScript module pattern” i kada biste ga koristili.
    • Bonus bodovi za spomen čistih imenskih prostora (namespacing)
    • Što učiniti ako moduli nemaju imenske prostore
  • Kako organizirate kod? (module pattern, klasično nasljeđivanje?)
  • Koja je razlika između host i native objekta?
  • Razlika između:
function Person(){} var person = Person() var person = new Person()
  • Koja je razlika između .call i .apply?
  • Objasnite Function.prototype.bind
  • Kad optimirate Vaš kod?
  • Možete li objasniti nasljeđivanje u JavaScriptu?
  • Kada biste koristili document.write()?
    • Većina generiranih oglasa još uvijek koristi document.write() premda se to zamjera.
  • Koja je razlika između detekcije mogućnosti (feature detection), pretpostavljanje mogućnosti (feature inference) i korištenja UA string-a
  • Objasnite AJAX sa što više detalja
  • Objasnite kako radi JSONP (i zašto nije pravi AJAX)
  • Da li ste ikad koristili JavaScript predloške (templating)?
    • Ako da, koje ste biblioteke koristili? (Mustache.js, Handlebars etc.)
  • Objasnite “hoisting”.
  • Objasnite propagaciju događaja (event bubbling).
  • Koja je razlika između “attribute”-a i “property”-a?
  • Zašto proširivanje ugrađenih JavaScript objekata nije najbolja ideja?
  • Zašto je proširivanje ugrađenih JavaScript objekata dobra ideja?
  • Koja je razlika između document load i document ready događaja?
  • Koja je razlika između == i ===?
  • Objasnite kako bi došli do parametra iz URL adrese prozora preglednika.
  • Objasnite politiku jednog izvorišta gledano sa stajališta JavaScript-e.
  • Opišite načine nasljeđivanja u JavaScript-u.
  • Popravite:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Opišite strategiju za memoizaciju (izbjegavanje ponovljenog računanja) u Javascript-u.
  • Zašto se Ternarni operator zove Ternarni?
  • Što je arnost funkcije?
  • Što je "use strict";? Koje su mane, koje prednosti?

JavaScript primjeri koda:

~~3.14

Pitanje: Koja je povratna vrijednost gornjeg izraza?
Odgovor: 3

"Ovo je proba".split("").reverse().join("");

Pitanje: Koja je povratna vrijednost gornjeg izraza?
Odgovor: “aborp ej ovO”

( window.foo || ( window.foo = "bar" ) );

Pitanje: Koju vrijednost ima window.foo?
Odgovor: “bar”
Samo ako window.foo nije istinit u suprotnom će zadržati vrijednost.

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Pitanje: Kako će izgledati obavijesti iz gornjeg primjera?
Odgovor: “Hello World” nakon toga ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

Pitanje: Koja je vrijednost za foo.length?
**Odgovor: 2

var foo = {};
-foo.bar = 'hello';

Pitanje: Koja je vrijednost za foo.length?
**Odgovor: undefined

Pitanja za jQuery:

  • Objasnite “chaining”.
  • Objasnite “deferreds”.
  • Navedite koje optimizacije korištenja jQuery-a poznajete?
  • Što radi .end() ?
  • Kada i zašto bi vezani (bound) događaj stavili u imenski prostor (namespace)?
  • Navedite četiri vrijednosti koje možete poslati jQuery metodi.
    • Selektor (string), HTML (string), Callback (funkcija), HTMLElement, object, array, element array, jQuery Object itd.
  • Što je red efekata (fx)?
  • Koja je razlika između .get(),[], i.eq()`?
  • Koja je razlika između .bind(),.live(), i.delegate()`?
  • Koja je razlika između $ i $.fn? Ili samo što je $.fn.
  • Optimirajte selektor:
$(".foo div#bar:eq(0)")
  • Razlika između ‘delegate()’ i ‘live()’?

Pitanja za CSS:

  • Objasnite što je to “reset” CSS i zašto je koristan.
  • Opišite što su i kako rade Float-ovi.
  • Koje su tehnike clearing-a i koji su konteksti prikladni za njihovu primjenu?
  • Pojasnite CSS sprite-ove i kako biste ih izveli na stranici ili site-u.
  • Koje su Vaše omiljene tehnike zamjene slike i kada ih koristite?
  • CSS hack-ovi property-a, kondicionalno uključivanje .css datoteka, ili … nešto drugo?
  • Kako poslužujete sadržaj za preglednike (browser-e) slabijih mogućnosti?
    • Koje tehnike/procese koristite?
  • Koji su mogući načini za vizualno sakrivanje sadržaja (ostaju dostupni samo screen reader-ima)?
  • Da li ste ikad koristili grid system, ako jeste koji preferirate?
  • Da li ste koristili ili implementirali media querie-je ili layout/CSS specifičan za mobile?
  • Imate li iskustva u stiliziranju sa SVG-om?
  • Kako optimirate stranice za ispis?
  • Koje su “kvake” za pisanje učinkovitog CSS-a?
  • Koje su prednosti/nedostatci korištenja CSS preprocessore? (SASS, Compass, Stylus, LESS)
    • Ako da, opišite što vam se (ne)sviđa kod CSS preprocessora koje ste koristili.
  • Kako bi izradili preliminarni web dizajn koji ne koristi standardne fontove?
    • Webfont-ovi (font servisi poput: Google Webfonts, Typekit itd.)
  • Objasnite kako browser utvrđuje koji elementi odgovaraju CSS selector-u.

Opcionalna zabavna pitanja:

  • Koja je najbolja stvar koju ste isprogramirali, na što ste najviše ponosni?
  • Koji su Vam omiljena svojstva razvojnih alata koje koristite?
  • Imate li kakve omiljene vlastite projekte? Koje?
  • Koja Vam je omiljena mogućnost Internet Explorer-a?
Edit this page
\ No newline at end of file +foo.bar = 'hello';

Pitanje: Koja je vrijednost za foo.length?
**Odgovor: undefined

Pitanja za jQuery:

$(".foo div#bar:eq(0)")

Pitanja za CSS:

Opcionalna zabavna pitanja:

Edit this page
\ No newline at end of file diff --git a/translations/czech/index.html b/translations/czech/index.html index 1963240..4768018 100644 --- a/translations/czech/index.html +++ b/translations/czech/index.html @@ -1,4 +1,4 @@ Front-end vývojář – otázky k pohovoru ★ Front-end Developer Interview Questions

Front-end vývojář – otázky k pohovoru

Front-end vývojář – otázky k pohovoru

Tento repozitář obsahuje řadu otázek, které můžete směle položit u pohovoru kandidátovi na pozici front-end vývojář a ověřit si tak jeho znalosti v tomto oboru. Není zamýšleno položit všechny tyto otázky (jejich korektní zodpovězení by trvalo hodiny), leč pouze určitou část vyhovující vašim potřebám.

Za přečtení stojí také:

Poznámka: Mějte na paměti, že tyto otázky mají vést spíše k diskusi na dané téma a prozradit tak něco více o schopnostech daného vývojáře než aby byly zodpovězeny jedním slovem nebo větou.

Obsah

  1. Původní přispěvovatelé
  2. Obecné otázky
  3. HTML otázky
  4. CSS otázky
  5. JS otázky
  6. jQuery otázky
  7. Otázky z kódu
  8. Zábavné otázky

Původní přispěvovatelé:

Většina otázek byla převzata z oksoclap původně vytvořeného Paulem Irishem (@paul_irish) a následně doplněna těmito osobami:

[⬆]

Obecné otázky:

  • Co jste se naučili včera/minulý týden nového?
  • Co Vás vzrušuje nebo zajímá na kódování?
  • Povězte něco o Vašem oblíbeném vývojovém prostředí (operační systém, editor, prohlížeč, nástroje, atd.).
  • Popište jak postupujete při vytváření nové webové stránky.
  • Dokážete vysvětlit rozdíl mezi pozvolným degradováním (graceful degradation) a postupným vylepšováním(progressive enhancement)?
    • Body navíc za popsání detekce pokročilé funkcionality
  • Vysvětlete pojem “sémantické HTML”.
  • Jak byste optimalizovali zdroje (obrázky, JS, CSS, atd.) webové stránky?
    • K dispozici je celá řada optimalizací např.:
      • Spojování souborů
      • Minifikace souborů
      • CDN hostování
      • Caching
      • atd.
  • Proč je lepší posílat zdroje webové stránky z více domén?
    • Kolik souborů může z dané domény stahovat prohlížeš najednou?
  • Vyjmenujte tři způsoby jak snížit dobu nahrávání webové stránky (vnímanou nebo skutečnou dobu nahrávání)
  • Pokud naskočíte do projektu, kde se místo odsazování tabulátory používají mezery, co uděláte?
    • Navrhnutí, že projekt by mohl využívat něco jako EditorConfig (http://editorconfig.org)
    • Přízpůsobení se konvenci (ale zústat konzistentní).
    • issue :retab! command
  • Napište jednoduchou stránku se slideshow.
    • Body navíc pokud nepoužívá JS.
  • Jaké nástroje používáte pro testování rychlosti Vašeho kódu?
    • Profiler, JSPerf, Dromaeo
  • Pokud byste se chtěl/chtěla letos naučit jednu novou technologii, která by to byla?
  • Vysvětlete důležitost standardů a standardizačních orgánů
  • Co to je FOUC? Jak je možné se vyhnout FOUC?

[⬆]

HTML otázky:

  • Co dělá doctype ?
  • Jaký je rozdíl mezi standardním módem a quirks módem?
  • Jaká jsou omezení při poskytování XHTML stránek?
    • Existuje nějaký problém při poskytování stránek jako application/xhtml+xml?
  • Jak poskytujete stránku s vícejazyčným obsahem?
    • Na co všechno si musíte dát pozor při vytváření vícejazyčné stránky?
  • K čemu je dobrý atribut data-?
  • Uvažujte o HTML5 jako o otevření platormě. Jaké jsou základní stavební kameny HTML5?
  • Popište rozdíl mezi cookies, sessionStorage a localStorage.

[⬆]

CSS otázky:

  • Popište co děla a k čemu je dobrý “reset” CSS soubor.
  • Popište obtékání (floats) a jak funguje.
  • Popiště různé techniky pro zastavení obtékání (clear fixing) a řekněte, které se hodí v kterém kontextu.
  • Vysvětlete, co to jsou CSS sprites a jak byste je implementovali.
  • Jaká je Vaše oblíbená technika pro nahrazování obrázků a kterou a kdy používáte?
  • CSS property hacks, kondicionální vkládání .css souborů nebo něco dalšího?
  • Jak poskytujete stránky pro funkcionálně/vlastnostmi omezený prohlížeč?
    • Jakou techniku/proces používáte?
  • Jaké jsou způsoby pro zneviditelní obsahu (a zachování jeho dostupnosti pro čtečky)?
  • Použili jste někdy grid system a pokud ano, který upřednostňujete?
  • Použili jset někdy mediální selektor (media query) nebo specifický layout/CSS pro mobilní zařízení?
  • Máte nějaké zkušenosti s vytvářením SVG?
  • Jak optimalizujete stránky pro tisk?
  • Jaké jsou zásady pro psaní efektnivního CSS?
  • Jaké jsou výhody/nevýhody použítí CSS preprocesorů (SASS, Compass, Stylus, LESS)?
    • Popiště, co se Vám na CSS preprocesorech, které jste použili, líbí/nelíbí.
  • Jak byste implementovali návrh webové stránky, která používá nestandardní řezy písma?
    • Webfonts (služby typu: Google Webfonts, Typekit etc.)
  • Vysvětlete jak prohlížeč určuje, který element odpovída CSS selektoru.
  • Vysvětlete Vaše chápání box modelu a jak řeknete pomocí CSS prohlížeči, aby Váš layout vykreslil v odlišném box modelu

[⬆]

JS otázky:

  • Vysvětlete delegaci událostí.
  • Vysvětlete jak funguje this v JavaScriptu.
  • Vysvětlete jak funguje funguje prototypová dědičnost.
  • Jak testujete JavaScript?
  • AMD vs. CommonJS?
  • Co je hashovací tabulka?
  • Vysvětlete proč následující volání nebude fungovat jako IIFE: function foo(){ }();.
    • Co musíte změnit, aby volání zafungovalo jako IIFE?
  • Vysvětlete rozdíl mezi proměnou, která je null, nedefinovaná nebo nedeklarovaná?
    • Jakým způsobem ověříte jednotlivé stavy proměnné?
  • Co to je closure a jak/proč bychom je měli používat?
  • Jaké je typické využití pro anonymní funkce?
  • Vysvětlete “JavaScript module pattern” a kdybyste ho měli použít.
    • Body navíc za zmínku o čistých jmených prostorech.
    • Co když moduly nemají jmené prostory?
  • Jak organizujete Váš kód? Module pattern, klasická dědičn5ost?
  • Jaký je rozdíl mezi nativními a hostitelskými objekty?
  • Rozdíl mezi:
function Person(){} var person = Person() var person = new Person()
  • Jaký je rozdíl mezi .call a .apply?
  • Jaký je rozdíl mezi undefined and null?
  • Vysvětlete Function.prototype.bind.
  • Kdy optimalizujete Váš kód?
  • Vysvětlete jak funguje dědičnost v JavaScriptu.
  • Kdy byste použili document.write()?
    • Většina generovaných reklam stále používá tento přístup i přesto, že je to dlouhodobě odsuzováno.
  • Jaký je rozdíl mezi detekcí vlastností, odvození vlastností a použití UA řetězce?
  • Vysvětlete AJAX co nejpodrobněji to jde.
  • Vysvětlete jak funguje JSONP (a proč to není opravdový AJAX).
  • Použili jste někdy JavaScriptové šablony?
    • Pokud ano, které knihovny jste použili (Mustache.js, Handlebars etc.)?
  • Vysvětlete “hoisting”.
  • Vysvětlete probublávání událostí.
  • Jaký je rozdíl mezi atributem (attribute) a vlastností (property)?
  • Proč není dobrý nápad rozšiřovat nativní JavaScriptové objekty?
  • Proč je dobrý nápad rozšiřovat nativní JavaScriptové objekty?
  • Jaký je rozdíl mezi událostmi document load a document ready?
  • Jaký je rozdíl mezi == a ===?
  • Vysvětlete jakým způsobem získáte parametr z URL zadaného v okně prohlížeče.
  • Vysvětlete JavaScriptové pravidlo stejného původu (same-origin policy).
  • Popište přístupy k dědění v JavaScriptu.
  • Následující kód upravte tak, aby fungoval:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Popište strategie pro memorizaci (odstranění opakovaných výpočtů) v JavaScriptu.
  • Proč se říká ternární operátor, co označuje slovo ternární?
  • Co je označováné jako “arity” funkce?
  • Co znamená "use strict";? Jaké jsou výhody a nevýhody použití?

[⬆]

jQuery otázky:

  • Vysvětlete řetězení (chaining).
  • Vysvětlete odkládání (deferreds).
  • Jaké znáte a umíte implementovat optimalizace speciálně pro jQuery?
  • Co dělá .end()?
  • Jak a proč byste váš event handler opatřili jmeným prostorem?
  • Jmenujte čtyři různé typy hodnot, které můžete předat jako vstupní parametr metod v jQuery.
    • Selektor (řetězec), HTML (řetězec), Callback (funkce), HTMLElement, object, pole, pole elementu, jQuery Object, atd.
  • Co to je fronta efektů (nebo fx fronta)?
  • Jaký je rozdíl mezi .get(), [] a .eq()?
  • Jaký je rozdíl mezi .bind(), .live() a .delegate()?
  • Jaký je rozdíl mezi $ a $.fn? Nebo jenom, co je $.fn?
  • Zoptimalizujte tento selektor:
$(".foo div#bar:eq(0)")
  • Jaký je rozdíl mezi ‘delegate()’ a ‘live()’?

[⬆]

Otázky z kódu:

~~3.14

Otázka: Jakou hodnotu vrátí uvedený výraz?
Odpověď: 3

"i'm a lasagna hog".split("").reverse().join("");

Otázka: Jakou hodnotu vrátí uvedený výraz?
Odpověď: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Otázka: Jakou hodnotu má window.foo?
Odpověď: “bar”
pouze pokud window.foo bylo false, jinak vrátí svojí hodnotu.

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Otázka: Co zobrazí uvedené dva alerty?
Odpověď: “Hello World” a ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

Otázka: Jaká je hodnota foo.length?
Odpověď: 2

var foo = {};
-foo.bar = 'hello';

Otázka: Jaká je hodnota foo.length?
Odpověď: undefined

[⬆]

Zábavné otázky:

  • Jaká je nejúžasnější věc, kterou jste kdy nakódovali, nebo na kterou jste nejvíce pyšní?
  • Jaké jsou Vaše oblíbené části vývojářských nástrojů, které používáte?
  • Máte nějaký vlastní hobby projekt?
  • Jaká je Vaše oblíbená vlastnost Internet Exploreru?

[⬆]

Edit this page
\ No newline at end of file +foo.bar = 'hello';

Otázka: Jaká je hodnota foo.length?
Odpověď: undefined

[⬆]

Zábavné otázky:

[⬆]

Edit this page
\ No newline at end of file diff --git a/translations/danish/index.html b/translations/danish/index.html index f5079dd..1fbf98f 100644 --- a/translations/danish/index.html +++ b/translations/danish/index.html @@ -2,4 +2,4 @@ foo.push(1); foo.push(2);

Spørgsmål: Hvad er værdien af foo.length?
**Svar: 2

var foo = {};
 foo.bar = 'hello';

Spørgsmål: Hvad er værdien af foo.length?
**Svar: undefined

foo = foo||bar

Spørgsmål: Hvad betyder?
**Svar: if(!foo) foo = bar

foo>>1

Spørgsmål: Hvad betyder?
**Svar: Math.floor(foo/2)

foo|0
-foo+.5|0

Spørgsmål: Hvad betyder?
**Svar: parseInt(foo) & Math.round(foo)

function foo(bar1, bar2, bar3){}

Spørgsmål: Hvordan får man antallet af parametre?
**Svar: foo.length //dette eksempel er 3

jQuery-specifikke spørgsmål:

$(".foo div#bar:eq(0)")

CSS-specifikke spørgsmål:

Valgfri sjove spørgsmål:

Edit this page
\ No newline at end of file +foo+.5|0

Spørgsmål: Hvad betyder?
**Svar: parseInt(foo) & Math.round(foo)

function foo(bar1, bar2, bar3){}

Spørgsmål: Hvordan får man antallet af parametre?
**Svar: foo.length //dette eksempel er 3

jQuery-specifikke spørgsmål:

$(".foo div#bar:eq(0)")

CSS-specifikke spørgsmål:

Valgfri sjove spørgsmål:

Edit this page
\ No newline at end of file diff --git a/translations/dutch/index.html b/translations/dutch/index.html index 24cbc43..6c5ac4e 100644 --- a/translations/dutch/index.html +++ b/translations/dutch/index.html @@ -1,4 +1,4 @@ Front-end interview vragen ★ Front-end Developer Interview Questions

Front-end interview vragen

Front-end interview vragen

@version 2.0.0

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.

Rebecca Murphey’s Baseline For Front-End Developers is ook een geweldige bron om je in te lezen voordat je aan een interview begint.

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.

Originele Bijdragers

De meerderheid van deze vragen is geplukt uit een oksoclap thread origineel gemaakt door Paul Irish (@paul_irish) en aan bijgedragen door de volgende individuen:

Algemene Vragen:

  • Praat over je favoriete ontwikkelomgeving. (OS, Editor, Browsers, Tools etc.)
  • Kan je jouw workflow beschrijven als je een nieuwe web pagina maakt?
  • Kan je het verschil beschrijven tussen progressieve verbeteringen en gracieuse degradatie?
    • Bonus punten voor het beschrijven van feature detection
  • Leg uit wat “Semantische HTML” betekent.
  • Hoe zou je website assets/resources optimaliseren?
    • Kijk naar een aantal oplossingen zoals:
      • Bestands concatenatie
      • Betands minificatie
      • Content Delivery Network
      • Caching
      • etc.
  • Waarom is het beter om website resources van meerdere domeinen te laden?
    • Hoeveel resources kan een browser tegelijkertijd downloaden van een domein?
  • Noem 3 manieren om pagina laadtijd te verminderen. (waargenomen of gemeten tijd)
  • Als je op een project kwam te werken waar ze tabs gebruiken en jij gebruikt spaties, wat zou je doen?
    • Suggereren dat het project misschien iets als [EditorConfig] (http://editorconfig.org) kan gebruiken.
    • Je aanpassen aan de conventie (consistent blijven)
    • issue :retab! command
  • Schrijf een simpele slideshow pagina
    • Bonus punten als het geen JS gebruikt.
  • Welke tools gebruik je om je je code performance te testen?
    • Profiler, JSPerf, Dromaeo
  • Als je dit jaar één techniek zou willen beheersen, wat zou het zijn?
  • Kan je de verschillen tussen Long-Polling, Websockets en SSE benoemen?
  • Leg het belang uit van standaards en standaards organisaties.
  • Wat is FOUC? Hoe voorkom je FOUC?

HTML-Specifieke Vragen:

  • Wat doet een doctype?
  • Wat is het verschil tussen standaard modus en quirks modus?
  • Wat zijn de beperkingen als je XHTML pagina’s serveert?
    • Zijn er problemen als je ze serveert als application/xhtml+xml?
  • Hoe serveer je een pagina met content in meerdere talen?
    • Wat voor dingen moet je voor op passen als je designt of ontwikkelt voor meertalige sites?
  • Waar zijn data- attributen goed voor?
  • Stel je HTML5 voor als een open web platform. Wat zijn dan de bouwstenen van HTML5?
  • Beschrijf het verschil tussen cookies, sessionStorage en localStorage.

JS-Specifieke Vragen:

  • Beschrijf event delegatie
  • Leg uit hoe this werkt in JavaScript
  • Leg uit prototypal inheritance werkt
  • Hoe kan je je JavaScript testen?
  • AMD vs. CommonJS?
  • Wat is een hashtable?
  • Wat zijn undefined en undeclared variabelen?
  • Wat is een closure, en hoe/waarom zou je het gebruiken?
    • Je favoriete pattern om deze te gebruiken? argyle (Alleen toepasbaar bij IIFEs)
  • Wat is een typische use case voor anonieme functies?
  • Leg de “JavaScript module pattern” uit wanneer je het zou gebruiken.
    • Bonus punten voor het noemen van clean namespacing.
    • Wat als je modules namespace-loos zijn?
  • Hoe organiseer je je code? (module pattern, classical inheritance?)
  • Wat is het verschild tussen host objects en native objects?
  • Verschil tussen:
function Person(){} var person = Person() var person = new Person()
  • Wat is het verschil tussen .call en .apply?
  • Leg uit Function.prototype.bind?
  • Wanneer optimaliseer je je code?
  • Kan je uitleggen hoe overerving werkt in JavaScript?
  • Wanneer zou je document.write() gebruiken?
    • Veel ads gebruiken nog steeds document.write() ookal wordt dit meestal afgekeurd
  • Wat is het verschil tussen feature detection, feature inference en het gebruiken van een UA string
  • Leg AJAX zo gedetailleerd mogelijk uit
  • Leg uit hoe JSONP werkt (en hoe het niet echt AJAX is)
  • Heb je ooit JavaScript templating gebruikt?
    • Zo ja, welke libraries heb je gebruikt? (Mustache.js, Handlebars etc.)
  • Leg “hoisting” uit.
  • Beschrijf event bubbling.
  • Wat is het verschil tussen een “attribuut” en een “property”?
  • Waarom is het uitbreiden van built-in JavaScript objects geen goed idee?
  • Waarom is het uitbreiden van built ins een goed idee?
  • Wat is het verschil tussen document load en document ready?
  • Wat is het verschil tussen == en ===?
  • Leg uit hoe je een query string parameter uit een browsers window URL kan halen.
  • Leg de same-origin policy met betrekking tot JavaScript uit.
  • Beschrijf overerving patronen in JavaScript.
  • Maak dit werkend:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Beschrijf een strategie voor memoization (ontwijken van berekening repetitie) in JavaScript.
  • Waarom heet het een Ternary expression, waar doelt het woord “Ternary” op?
  • Wat is de ariteit van een functie?
  • Wat is "use strict";? Wat zijn de voor- en nadelen om dit te gebruiken?

JS-Code Voorbeelden:

~~3.14

Vraag: Welke waarde wordt terug gegeven bij de bovenstaande code?
Antwoord: 3

"ik hou van lasagna".split("").reverse().join("");

Vraag: Welke waarde wordt terug gegeven bij de bovenstaande code?
Antwoord: “angasal nav uoh ki”

( window.foo || ( window.foo = "bar" ) );

Vraag: What is the value of window.foo?
Antwoord: “bar”
Alleen als window.foo falsy was, anders leverde het zijn waarde op.

var foo = "Hallo"; (function() { var bar = " Wereld"; alert(foo + bar); })(); alert(foo + bar);

Vraag: Wat is de uitkomst van de twee alerts?
Antwoord: “Hallo Wereld” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

Vraag: Wat is de waarde van foo.length?
**Antwoord: 2

var foo = {};
-foo.bar = 'hello';

Vraag: Wat is de waarde van foo.length?
**Antwoord: undefined

jQuery-Specifieke Vragen:

  • Leg “chaining” uit.
  • Leg “deferreds” uit.
  • Wat zijn een paar jQuery specifieke optimalisaties die jij kan implementeren?
  • Wat doet .end()?
  • Hoe en waarom zou je een bound event handler namespacen?
  • Noem 4 verschillende waardes die je aan een jQuery methode kan geven.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc.
  • Wat is de effecten (fx) queue?
  • Wat is het verschil tussen .get(), [], en .eq()?
  • Wat is het verschil tussen .bind(), .live(), en .delegate()?
  • Wat is het verschil tussen $ en $.fn? Of sowieso, wat is $.fn.
  • Optimaliseer deze selector:
$(".foo div#bar:eq(0)")
  • Wat is het verschil tussen ‘delegate()’ en ‘live()’?

CSS-Specifieke Vragen:

  • Beschrijf wat een “reset” CSS bestand doet en hoe dit bruikbaar is.
  • Beschrijf Floats en hoe ze werken.
  • Wat zijn de verschillende clearing technieken en welke is toepasselijk voor welke context?
  • Leg CSS sprites uit en hoe je ze kan implementeren op een pagina.
  • Wat zijn jouw favoriete image replacement technieken en welke gebruik je wanneer?
  • CSS property hacks, conditionele ingeladen .css files, of… iets anders?
  • Hoe serveer je je pagina’s voor feature-constrained browsers?
    • Welke technieken/processen gebruik je?
  • Wat zijn de verschillende manieren om content visueel te verbergen (en het alleen zichtbaar te houden voor screenreaders)?
  • Heb je ooit een grid-systeem gebruikt en zo ja, wat is je voorkeur?
  • Heb je ooit media queries of mobiel specifieke layouts/CSS gebruikt of geïmplementeerd?
  • Ben je bekend met SVG styling?
  • Hoe optimaliseer je je pagina’s voor printen?
  • Wat zijn sommige van de “gotchas” voor het schrijven van efficiënte CSS?
  • Wat zijn de voor- en nadelen van CSS preprocessors? (SASS, Compass, Stylus, LESS)
    • Wat vind je wel en niet fijn aan diegene die jij hebt gebruikt.
  • Hoe zou je een website design implementeren dat gebruik maakt van non-standard fonts?
    • Webfonts (font services zoals: Google Webfonts, Typekit etc.)
  • Leg uit hoe een browser beslists welke elementen hij moet matchen met een CSS selector?

Optionele Losse Vragen:

  • Wat is het coolste dat je ooit gemaakt hebt. Waar ben je trots op?
  • Wat zijn de favoriete dingen van de ontwikkeltools die je gebruikt?
  • Heb je hobbyprojecten? Zo ja, wat voor?
  • Wat is je favoriete feature van Internet Explorer?
Edit this page
\ No newline at end of file +foo.bar = 'hello';

Vraag: Wat is de waarde van foo.length?
**Antwoord: undefined

jQuery-Specifieke Vragen:

$(".foo div#bar:eq(0)")

CSS-Specifieke Vragen:

Optionele Losse Vragen:

Edit this page
\ No newline at end of file diff --git a/translations/farsi/index.html b/translations/farsi/index.html index 09cec29..26b0d3b 100644 --- a/translations/farsi/index.html +++ b/translations/farsi/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

سوال‌های فان:

مشارکت کنندگان:

این نوشته با همکاری @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed و @iansym از سال ۲۰۰۹ آغاز شده است.

از آن موقع تا کنون بیش از ۱۰۰ دولوپر در آن مشارکت کرده‌اند.

این سند توسط @JavidIzadfar به فارسی برگردانده شده است.

Edit this page
\ No newline at end of file +console.log('three');

سوال‌های فان:

مشارکت کنندگان:

این نوشته با همکاری @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed و @iansym از سال ۲۰۰۹ آغاز شده است.

از آن موقع تا کنون بیش از ۱۰۰ دولوپر در آن مشارکت کرده‌اند.

این سند توسط @JavidIzadfar به فارسی برگردانده شده است.

Edit this page
\ No newline at end of file diff --git a/translations/french/index.html b/translations/french/index.html index 9d6c8a8..24c5261 100644 --- a/translations/french/index.html +++ b/translations/french/index.html @@ -1,9 +1,2 @@ -Questionnaire de recrutement pour développeur front-end ★ Front-end Developer Interview Questions

Questionnaire de recrutement pour développeur front-end

Questionnaire de recrutement pour développeur front-end

Cette liste contient un certain nombre de questions que vous pouvez poser lors d’un entretien d’embauche pour un développeur Front-End. Il n’est en aucun cas recommandé de poser toutes ces questions à un candidat (ça prendrait des heures). Choisissez en quelques-unes liées au profil que vous rechercher afin de vérifier les compétences dont vous avez besoin.

Note: Gardez en tête que la plupart de ces questions sont ouvertes et qu’elles peuvent mener à des discussions intéressantes, qui vous en apprendront plus sur les capacités de la personne.

Table des matières

  1. Questions générales
  2. Questions sur HTML
  3. Questions sur CSS
  4. Questions sur JS
  5. Questions sur réseau
  6. Questions sur la programmation
  7. Questions pour le fun

S’impliquer :

  1. Contributeurs
  2. Comment contribuer (en)
  3. Licence

[⬆]

Questions générales:

  • Qu’avez-vous appris cette semaine ?
  • Qu’est ce qui vous motive ou vous intéresse dans le développement ?
  • Quel a été le dernier défi technique que vous avez expérimenté et comment l’avez-vous résolu ?
  • Quelles considérations en terme d’UI, Sécurité, Performance, SEO, Maintenabilité ou Technologie faites-vous lorsque vous concevez une application web ou site ?
  • Parlez-moi de votre environnement de travail préféré.
  • Avec quels logiciels de gestion de versions êtes-vous familier?
  • Pouvez-vous décrire comment vous travaillez (votre workflow) lorsque vous créez une page web ?
  • Si vous aviez 5 feuilles de style différentes, de quelle façon les intégreriez-vous le mieux dans un site ?
  • Pouvez-vous décrire la différence entre amélioration progressive et dégradation gracieuse ?
  • Comment optimisez-vous les performances de vos pages web (assets/ressources) ?
  • Combien de ressources différentes à la fois un navigateur peut-il télécharger à partir d’un même domaine ?
    • Quelles sont les exceptions ?
  • Donnez 3 façons qui permettent de réduire le temps de chargement d’une page (perçu ou réel).
  • Si vous commencez à travailler sur un projet existant, où votre prédécesseur a utilisé des tabulations pour indenter son code et que vous utilisez des espaces, que faites-vous ?
  • Décrivez comment vous développeriez un simple diaporama
  • Quels outils utilisez-vous pour tester la performance de votre code ?
  • Si vous pouviez maîtriser parfaitement une technologie cette année, laquelle serait-elle ?
  • Expliquez l’importance des standards et des organisations les édictant.
  • Qu’est-ce que le FOUC (flash of unstyled content) et comment l’évitez-vous ?
  • Expliquez ce que sont ARIA et les lecteurs d’écrans, et comment rendre votre site internet accessible
  • Expliquez quelques-uns des pour et contre des animations CSS par rapport aux animations JavaScript
  • Que signifie CORS et quel problème aborde-t-il ?

[⬆]

Questions sur HTML :

  • Que fait un doctype ?
  • Quelle est la différence entre les modes standard et quirks ?
  • Quelles sont les différences entre HTML et XHTML ?
  • Y a-t-il des problèmes à envoyer des pages avec le Content-Type application/xhtml+xml ?
  • Comment servez-vous une page avec du contenu multilingue ?
  • À quoi devez-vous faire attention quand vous designez ou développez des pages pour des sites multilingues ?
  • À quoi les attributs data- servent-ils ?
  • Si l’on considère que HTML5 est une API Web ouverte, quelles sont les briques de base de HTML5 ?
  • Décrivez la différence entre cookie, sessionStorage, et localStorage.
  • Décrivez la différence entre <script>, <script async> et <script defer>.
  • Pourquoi est-ce généralement une bonne idée de positionner les <link> à l’intérieur de <head></head> et les <script> juste avant </body>? Connaissez-vous des exceptions ?
  • Qu’est-ce que le rendu progressif ?
  • Pourquoi utiliseriez-vous l’attribut srcset dans une balise image ? Expliquez le processus utilisé par le navigateur lors de l’évaluation du contenu de cet attribut.

[⬆]

Questions sur CSS :

  • Quelle est la différence entre les classes et les IDs en CSS ?
  • Quelle est la différence entre un “reset” et une “normalisation” en CSS ? Lequel choisiriez-vous et pourquoi ?
  • Décrivez le positionnement flottant et son fonctionnement.
  • Décrivez le z-index et comment le contexte d’empilement se forme ?
  • Quelles sont les différentes méthodes de “clearing” des éléments flottants, et laquelle est appropriée pour chaque contexte ?
  • Expliquez ce que sont les “sprites” CSS et comment vous les implémenteriez sur une page ou un site.
  • Quelles sont vos techniques favorites de remplacement d’images, et comment les utilisez-vous ?
  • Quelle approche choisiriez-vous pour réparer des bugs au niveau du CSS spécifique à certains navigateurs ?
  • Comment servez-vous vos pages pour les navigateurs aux fonctionnalités réduites ?
    • Quelles techniques/procédés utilisez-vous ?
  • Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d’écran) ?
  • Avez-vous déjà utilisé un système de grille, et si oui, lequel préférez-vous ?
  • Avez-vous déjà implémenté des “media queries”, ou des “layouts CSS” spécifiques aux mobiles ?
  • Avez-vous déjà touché au style d’un SVG ?
  • Comment optimisez-vous vos pages pour l’impression (le print) ?
  • Quelques astuces pour écrire du CSS efficacement ?
  • Quels sont les avantages/désavantages de l’utilisation des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS)
    • Si vous avez un avis, décrivez ce que vous aimez et n’aimez pas des préprocesseurs que vous avez utilisé.
  • Comment implémenteriez-vous un design qui utilise des polices de caractères non standards ?
  • Expliquez comment un navigateur détermine quels éléments correspondent à un sélecteur CSS.
  • Expliquez ce que vous avez compris du modèle de boite (box model) et comment implémenteriez vous une mise en page avec des modèles de boite différents.
  • Qu’est-ce que * { box-sizing: border-box; } fait ? Quels sont ses désavantages ?
  • Listez autant de valeurs que vous pouvez pour la propriété display.
  • Quelle est la différence entre inline et inline-block ?
  • Quelle est la différence entre les éléments ayant relative, fixed, absolute et static comme position ?
  • Le ‘C’ dans CSS veut dire Cascade (Cascading). Comment la priorité est-elle définie lors de l’assignement de styles (exemples) ? Comment pouvez-vous utiliser ce système à votre avantage ?
  • Quels frameworks CSS avez-vous utilisé localement, ou en production ? Comment feriez-vous pour les changer/améliorer ?
  • Avez-vous expérimenté le récent flexbox ?
  • En quoi le “responsive design” est différent du “adaptive design” ?
  • Avez-vous déjà travaillé avec des images “retina” ? Si oui, à quel moment et quelles techniques avez-vous utilisées ?
  • Y a-t-il des raisons particulières pour lesquelles vous voudriez utilser translate() plutôt que position: absolute ou vice-versa ? Et pourquoi ?

[⬆]

Questions sur JS :

  • Expliquez la délégation d’évènement.
  • Expliquez comment fonctionne this en Javascript.
  • Expliquez comment fonctionne l’héritage de prototype.
  • Comment testez-vous votre code Javascript ?
  • Que pensez-vous d’AMD par rapport à CommonJS ?
  • Expliquez pourquoi ce qui suit n’est pas une IIFE (Immediately Invoked Function Expression) : function foo(){ }();.
    • Qu’est-ce qu’il faut changer pour faire une IIFE correcte ?
  • Quelle est la différence entre une variable null, undefined et non déclarée ?
    • Comment feriez-vous pour vérifier chacun de ces états ?
  • Qu’est-ce qu’une “closure” et comment/pourquoi en utiliser une ?
  • Pouvez-vous décrire la principale difference entre la boucle forEach et la boucle .map() et pourquoi choisiriez-vous l’une et pas l’autre ?
  • Quelle est l’utilisation typique d’une fonction anonyme ?
  • Comment organisez-vous votre code ? (pattern modulaire, héritage classique ?)
  • Quelle est la différence entre des objets hôtes et des objets natifs ?
  • Différence entre: function Person() {}, var person = Person() et var person = new Person() ?
  • Quelle est la différence entre .call et .apply ?
  • Expliquez Function.prototype.bind ?
  • Comment optimisez-vous votre code ?
  • Pouvez-vous expliquer comment fonctionne l’héritage en Javascript ?
  • Quand utiliseriez-vous document.write() ?
  • Quelle est la différence entre détection de “feature”, inférence de “feature” et l’utilisation du “User-Agent” ?
  • Expliquez ce qu’est AJAX avec autant de détails que possible.
  • Expliquez comment fonctionne JSONP (et pourquoi ce n’est pas réellement de l’AJAX).
  • Avez-vous déjà utilisé des “templates” en Javascript ?
    • Si oui, quelles librairies avez-vous utilisées ?
  • Expliquez le phénomène de “hoisting”.
  • Décrivez le “event bubbling”.
  • Quelle est la différence entre un “attribut” et une “propriété” ?
  • Pourquoi étendre des objets natifs de Javascript n’est-il pas une bonne idée ?
  • Pourquoi étendre des objets natifs est-il une bonne idée ?
  • Quelle est la différence entre les évènements “document load” et “document ready” ?
  • Quelle est la différence entre == et === ?
  • Expliquez la politique d’origine commune (same-origin policy) et ses implications en JavaScript.
  • Expliquez les patterns d’héritage en JavaScript.
  • Faites fonctionner ceci :
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Qu’est ce que l’opérateur ternaire ? Qu’est-ce que ce mot indique ?
  • Qu’est-ce que "use strict";? Quels sont les avantages et désavantages de son utilisation ?
  • Créez une boucle for qui se répète 100 fois et affichez “fizz” aux multiples de 3, "buzz" aux multiples de 5 et “fizzbuzz” aux multiples de 3 et 5.
  • Pourquoi il est en général préférable de laissez le ‘scope’ global d’un site tel quel et ne jamais y toucher ?
  • Pourquoi utiliseriez-vous quelque chose comme l’événement load ? Est-ce que cet évènement a des avantages ? Connaissez-vous des alternatives, et pourquoi les utiliseriez-vous ?
  • Expliquez ce qu’est une application mono-page (Single Page Application) et comment feriez-vous pour qu’elle soit optimisée pour le référencement (SEO).
  • Quelle est l’étendue de votre expérience avec les “Promises” et/ou leurs “polyfills” ?
  • Quels sont les pour et contre de l’utilisation des “Promises” à la place des “callbacks” ?
  • Quels sont les avantages/inconvénients de l’écriture de code JavaScript dans un language qui compile en JavaScript ?
  • Quels outils et techniques utilisez-vous pour le “debugging” du code javascript ?
  • Quels langages de construction utilisez-vous pour les itérations sur les propriétés d’objet et éléments de tableau.
  • Expliquez la difference entre les objets muables et les objets immuables.
    • Donnez un exemple d’objet immuable en javascript.
    • Quels sont les avantages et inconvénients de l’immuabilité ?
    • Comment pouvez-vous réaliser l’immuabilité dans votre code ?
  • Expliquez la différence entre les fonctions synchrones et asynchrones.
  • Qu’est ce qu’une boucle d’événement ?
    • Quelle est la différence entre la pile d’appels et la file d’attente de tâches?
  • Expliquez les différences dans l’usage de foo entre foo() {} et var foo = function() {}
  • Quelles sont les différences entre les variables crées en utilisant let, var ou const ?

[⬆]

Questions sur les Tests

  • Quels sont les avantages/inconvénients de tester votre code ?
  • Quels outils utiliseriez-vous pour tester les fonctionnalités de votre code.
  • Quel est la difference entre un test unitaire et un test fonctionnel/d’intégration ?
  • Quel est le but d’un outil de lissage de style de code ?

[⬆]

Questions sur la performance

  • Quels outils utiliseriez-vous pour trouver une erreur de performance dans votre code ?
  • Comment pouvez-vous améliorer les performances de défilement de votre site Web ?
  • Expliquez la différence entre la mise en page, la peinture et la composition.

[⬆]

Questions sur le réseau

  • Pourquoi est-il préférable de disposer ses assets sur des domaines différents ?
  • Faites de votre mieux pour décrire le processus à partir du moment où vous tapez l’URL d’un site internet jusqu’au moment où la page a finit de charger.
  • Quelle est la différence entre “Long-Polling”, “Websockets” et les événements “Server-Sent” ?
  • Expliquez les entêtes de requêtes et réponses suivant :
    • Différences entre Expires, Date, Age et If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Quelles sont les différentes actions (verbes) HTTP ? Listez toutes celles que vous connaissez et expliquez-les.

[⬆]

Questions sur la programmation :

Quelle est la valeur de foo ?

var foo = 10 + '20';

Comment feriez-vous marcher ceci ?

add(2, 5); // 7
-add(2)(5); // 7

Que retourne ce code ?

"je suis un bouffeur de lasagne".split("").reverse().join("");

Que retourne window.foo ?

( window.foo || ( window.foo = "bar" ) );

Qu’affichent les deux alertes ci-dessous ?

var foo = "Hello";
-(function() {
-  var bar = " World";
-  alert(foo + bar);
-})();
-alert(foo + bar);

Quelle est la valeur de foo.length ?

var foo = [];
-foo.push(1);
-foo.push(2);

[⬆]

Questions pour le fun :

  • Quel est le truc le plus cool que vous ayez programmé, de quoi êtes-vous le plus fier ?
  • Quelles sont les parties favorites des outils de développement que vous utilisez ?
  • Qui vous inspire dans la communauté front-end ?
  • Avez-vous des projets chouchous ? Quel genre ?
  • Quelle est votre fonctionnalité favorite dans IE ?
  • Comment voulez-vous votre café ?

[⬆]

Contributeurs :

Ce document a démarré avec la collaboration de @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed et @iansym.

Il a depuis reçu des contributions de plus de 100 développeurs.

Edit this page
\ No newline at end of file +Questionnaire de recrutement pour développeur front-end ★ Front-end Developer Interview Questions

Questionnaire de recrutement pour développeur front-end

Questionnaire de recrutement pour développeur front-end

Cette liste contient un certain nombre de questions que vous pouvez poser lors d’un entretien d’embauche pour un développeur Front-End. Il n’est en aucun cas recommandé de poser toutes ces questions à un candidat (ça prendrait des heures). Choisissez en quelques-unes liées au profil que vous rechercher afin de vérifier les compétences dont vous avez besoin.

Note: Gardez en tête que la plupart de ces questions sont ouvertes et qu’elles peuvent mener à des discussions intéressantes, qui vous en apprendront plus sur les capacités de la personne.

Table des matières

  1. Questions générales
  2. Questions sur HTML
  3. Questions sur CSS
  4. Questions sur JS
  5. Questions sur la programmation
  6. Questions sur les tests
  7. Questions sur la performance
  8. Questions sur réseau
  9. Questions pour le fun

S’impliquer :

  1. Contributeurs
  2. Comment contribuer (en)
  3. Licence

[⬆]

Questions générales:

  • Qu’avez-vous appris cette semaine ?
  • Qu’est ce qui vous motive ou vous intéresse dans le développement ?
  • Quel a été le dernier défi technique que vous avez expérimenté et comment l’avez-vous résolu ?
  • Lors de la création ou la maintenance d’un site web, pouvez-vous expliquer certaines techniques que vous avez utilisées pour augmenter les performances ?
  • Pouvez-vous décrire quelques bonnes pratiques ou techniques de référencement que vous avez utilisées récemment ?
  • Pouvez-vous expliquer des techniques courantes ou des problèmes récents résolus en ce qui concerne la sécurité côté Front-end ?
  • Quelles sont les actions que vous avez personellement prises sur des projets récents pour augmenter la maintenabilité de votre code?
  • Parlez-moi de votre environnement de travail préféré.
  • Avec quels logiciels de gestion de versions êtes-vous familier?
  • Pouvez-vous décrire comment vous travaillez (votre workflow) lorsque vous créez une page web ?
  • Si vous aviez 5 feuilles de style différentes, de quelle façon les intégreriez-vous le mieux dans un site ?
  • Pouvez-vous décrire la différence entre amélioration progressive et dégradation gracieuse ?
  • Comment optimisez-vous les performances de vos pages web (assets/ressources) ?
  • Combien de ressources différentes à la fois un navigateur peut-il télécharger à partir d’un même domaine ?
    • Quelles sont les exceptions ?
  • Donnez 3 façons qui permettent de réduire le temps de chargement d’une page (perçu ou réel).
  • Si vous commencez à travailler sur un projet existant, où votre prédécesseur a utilisé des tabulations pour indenter son code et que vous utilisez des espaces, que faites-vous ?
  • Décrivez comment vous développeriez un simple diaporama
  • Si vous pouviez maîtriser parfaitement une technologie cette année, laquelle serait-elle ?
  • Expliquez l’importance des standards et des organisations les édictant.
  • Qu’est-ce que le FOUC (flash of unstyled content) et comment l’évitez-vous ?
  • Expliquez ce que sont ARIA et les lecteurs d’écrans, et comment rendre votre site internet accessible
  • Expliquez quelques-uns des pour et contre des animations CSS par rapport aux animations JavaScript
  • Que signifie CORS et quel problème aborde-t-il ?
  • Comment avez-vous géré un désaccord avec votre patron ou votre collaborateur ?
  • Quelles ressources utilisez-vous pour en savoir plus sur les dernières nouveautés en matière de développement et de conception front-end ?
  • Quelles sont les compétences nécessaires pour être un bon développeur front-end ?
  • Dans quel rôle vous voyez-vous ?
  • Expliquez la différence entre les cookies, sessions storage et local storage ?
  • Pouvez-vous expliquer ce qu’il se passe lorsque vous saisissez une URL dans le navigateur ?
  • Décrivez la différence entre SSR (server side rendering) et CSR (certificate signing request). Discutez des avantages et des inconvénients.
    • Connaissez-vous le rendu statique ?
    • Réhydratation ?

[⬆]

Questions sur HTML :

  • Que fait un doctype ?
  • Comment servez-vous une page avec du contenu multilingue ?
  • À quoi devez-vous faire attention quand vous designez ou développez des pages pour des sites multilingues ?
  • À quoi les attributs data- servent-ils ?
  • Si l’on considère que HTML5 est une API Web ouverte, quelles sont les briques de base de HTML5 ?
  • Décrivez la différence entre cookie, sessionStorage, et localStorage.
  • Décrivez la différence entre <script>, <script async> et <script defer>.
  • Pourquoi est-ce généralement une bonne idée de positionner les <link> à l’intérieur de <head></head> et les <script> juste avant </body>? Connaissez-vous des exceptions ?
  • Qu’est-ce que le rendu progressif ?
  • Pourquoi utiliseriez-vous l’attribut srcset dans une balise image ? Expliquez le processus utilisé par le navigateur lors de l’évaluation du contenu de cet attribut.
  • Avez-vous déjà utilisé différents langages de création de modèles (templating languages) HTML ?
  • Quelles est la différence entre canvas et svg ?
  • Que sont les éléments vides en HTML ?

[⬆]

Questions sur CSS :

  • Quelle est la spécificité du sélecteur CSS et comment ça marche ?
  • Quelle est la différence entre un “reset” et une “normalisation” en CSS ? Lequel choisiriez-vous et pourquoi ?
  • Décrivez le positionnement flottant et son fonctionnement.
  • Décrivez le z-index et comment le contexte d’empilement se forme ?
  • Décrivez BFC (Block Formatting Context) et son fonctionnement.
  • Quelles sont les différentes méthodes de “clearing” des éléments flottants, et laquelle est appropriée pour chaque contexte ?
  • Quelle approche choisiriez-vous pour réparer des bugs au niveau du CSS spécifique à certains navigateurs ?
  • Comment servez-vous vos pages pour les navigateurs aux fonctionnalités réduites ?
    • Quelles techniques/procédés utilisez-vous ?
  • Quelles sont les différentes manières de masquer du contenu (en le laissant disponible pour les lecteurs d’écran) ?
  • Avez-vous déjà utilisé un système de grille, et si oui, lequel préférez-vous ?
  • Avez-vous déjà implémenté des “media queries”, ou des mises en page/CSS spécifiques aux mobiles ?
  • Avez-vous déjà touché au style d’un SVG ?
  • Pouvez-vous donner un exemple de propriété @media autre que screen ?
  • Quelques astuces pour écrire du CSS efficacement ?
  • Quels sont les avantages/désavantages de l’utilisation des préprocesseurs CSS ? (SASS, Compass, Stylus, LESS)
    • Si vous avez un avis, décrivez ce que vous aimez et n’aimez pas des préprocesseurs que vous avez utilisé.
  • Comment implémenteriez-vous un design qui utilise des polices de caractères non standards ?
  • Expliquez comment un navigateur détermine quels éléments correspondent à un sélecteur CSS.
  • Décrivez les pseudo-éléments et discutez de leur utilité.
  • Expliquez ce que vous avez compris du modèle de boite (box model) et comment implémenteriez vous une mise en page avec des modèles de boite différents.
  • Qu’est-ce que * { box-sizing: border-box; } fait ? Quels sont ses désavantages ?
  • Qu’est-ce que la propriété CSS display et pouvez-vous donner quelques exemples de son utilisation ?
  • Quelle est la différence entre inline et inline-block ?
  • Quelle est la différence entre les sélecteurs nth-of-type() et nth-child() ?
  • Quelle est la différence entre les éléments ayant relative, fixed, absolute et static comme position ?
  • Quels frameworks CSS avez-vous utilisé localement, ou en production ? Comment feriez-vous pour les changer/améliorer ?
  • Avez-vous utilisé CSS Grid ?
  • Pouvez-vous expliquer la différence entre coder un site Web pour qu’il soit responsive versus utiliser une stratégie mobile-first ?
  • Avez-vous déjà travaillé avec des images “retina” ? Si oui, à quel moment et quelles techniques avez-vous utilisées ?
  • Y a-t-il des raisons particulières pour lesquelles vous voudriez utilser translate() plutôt que position: absolute ou vice-versa ? Et pourquoi ?
  • En quoi la propriété CSS clearfix est-elle utile ?
  • Pouvez-vous expliquer la différence entre px, em et rem en ce qui concerne la taille des polices ?
  • Pouvez-vous donner un exemple de pseudo-classe ? Pouvez-vous fournir un exemple de cas d’utilisation pour une pseudo-classe ?
  • Quelle est la différence entre un élément de niveau bloc et un élément en ligne. Pouvez-vous fournir des exemples de chaque type d’élément ?
  • Quelle est la différence entre CSS Grid et Flexbox ? Quand utiliseriez-vous l’un plutôt que l’autre ?
  • Quelle est la différence entre les mises en page fixed, fluid and responsive ?

[⬆]

Questions sur JS :

  • Expliquez la délégation d’évènement.
  • Expliquez comment fonctionne this en Javascript.
  • Pouvez-vous donner un exemple de l’une des façons dont l’utilisation de this a changé dans ES6 ?
  • Expliquez comment fonctionne l’héritage de prototype.
  • Quelle est la différence entre une variable null, undefined et non déclarée ?
    • Comment feriez-vous pour vérifier chacun de ces états ?
  • Qu’est-ce qu’une “closure” et comment/pourquoi en utiliser une ?
  • Quelles constructions de langage utilisez-vous pour parcourir les propriétés des objets et les éléments du tableau ?
  • Pouvez-vous décrire la principale difference entre la boucle forEach et la boucle .map() et pourquoi choisiriez-vous l’une et pas l’autre ?
  • Quelle est l’utilisation typique d’une fonction anonyme ?
  • Quelle est la différence entre des objets hôtes et des objets natifs ?
  • Différence entre: function Person() {}, var person = Person() et var person = new Person() ?
  • Expliquez les différences dans l’usage de foo entre foo() {} et var foo = function() {}
  • Pouvez-vous expliquer ce que font Function.call et Function.apply ? Quelle est la différence notable entre les deux ?
  • Expliquez Function.prototype.bind.
  • Quelle est la différence entre détection de “feature”, inférence de “feature” et l’utilisation du “User-Agent” ?
  • Expliquez le phénomène de “hoisting”.
  • Qu’est-ce que la coercition de type ? Quels sont les pièges courants liés au recours à la coercition de type dans le code JavaScript ?
  • Décrivez le “event bubbling”.
  • Décrivez le “event capturing”.
  • Quelle est la différence entre un “attribut” et une “propriété” ?
  • Quels sont les avantages et les inconvénients de l’extension des objets JavaScript intégrés ?
  • Quelle est la différence entre == et === ?
  • Expliquez la politique d’origine commune (same-origin policy) et ses implications en JavaScript.
  • Qu’est ce que l’opérateur ternaire ? Qu’est-ce que ce mot indique ?
  • Qu’est-ce que "use strict";? Quels sont les avantages et désavantages de son utilisation ?
  • Quels sont les avantages/inconvénients de l’écriture de code JavaScript dans un language qui compile en JavaScript ?
  • Quels outils et techniques utilisez-vous pour le “debugging” du code javascript ?
  • Expliquez la difference entre les objets muables et les objets immuables.
    • Donnez un exemple d’objet immuable en javascript.
    • Quels sont les avantages et inconvénients de l’immuabilité ?
    • Comment pouvez-vous réaliser l’immuabilité dans votre code ?
  • Expliquez la différence entre les fonctions synchrones et asynchrones.
  • Qu’est ce qu’une boucle d’événement ?
    • Quelle est la différence entre la pile d’appels et la file d’attente de tâches?
  • Quelles sont les différences entre les variables crées en utilisant let, var ou const ?
  • Quelles sont les différences entre les constructeurs de classe ES6 et de fonctions ES5 ?
  • Pouvez-vous proposer un cas d’utilisation pour la nouvelle syntaxe de fonction arrow => ? En quoi cette nouvelle syntaxe diffère-t-elle des autres fonctions ?
  • Quel avantage y a-t-il à utiliser la syntaxe des flèches pour une méthode dans un constructeur ?
  • Quelle est la définition d’une fonction d’ordre supérieur ?
  • Pouvez-vous donner un exemple de déstructuration d’un objet ou d’un tableau ?
  • Pouvez-vous donner un exemple de génération d’une chaîne avec des littéraux de modèle ES6 (ES6 Template Literals) ?
  • Pouvez-vous donner un exemple de fonction “curry” et pourquoi cette syntaxe offre un avantage ?
  • Quels sont les avantages de l’utilisation de la syntaxe spread et en quoi est-elle différente de la syntaxe rest ?
  • Comment partager du code entre des fichiers ?
  • Pourquoi voudriez-vous créer des membres de classe statiques ?
  • Quelle est la différence entre les boucles while et do-while en JavaScript ?
  • Qu’est-ce qu’une “Promise” ? Où et comment utiliseriez-vous la “Promise” ?
  • Discutez de la manière dont vous pouvez utiliser les principes de la programmation orientée objet lors du codage avec JavaScript.

[⬆]

Questions sur la programmation :

Comment feriez-vous marcher ceci ?

duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]

Créez une boucle for qui se répète 100 fois et affichez: “fizz” aux multiples de 3, "buzz" aux multiples de 5 et “fizzbuzz” aux multiples de 3 et 5.

Quelle est la valeur retournée de chaque console.log ?

console.log("hello" || "world")
+console.log("foo" && "bar")

Write an immediately invoked function expression (IIFE)

[⬆]

Questions sur les Tests

  • Quels sont les avantages/inconvénients de tester votre code ?
  • Quels outils utiliseriez-vous pour tester les fonctionnalités de votre code.
  • Quel est la difference entre un test unitaire et un test fonctionnel/d’intégration ?
  • Quel est le but d’un outil de lissage de style de code ?
  • Quelles sont les bonnes pratiques en matière de tests ?

[⬆]

Questions sur la performance

  • Quels outils utiliseriez-vous pour trouver une erreur de performance dans votre code ?
  • Comment pouvez-vous améliorer les performances de défilement de votre site Web ?
  • Expliquez la différence entre la mise en page, la peinture et la composition.

[⬆]

Questions sur le réseau

  • Pourquoi est-il préférable de disposer ses assets sur des domaines différents ?
  • Faites de votre mieux pour décrire le processus à partir du moment où vous tapez l’URL d’un site internet jusqu’au moment où la page a finit de charger.
  • Quelle est la différence entre “Long-Polling”, “Websockets” et les événements “Server-Sent” ?
  • Expliquez les entêtes de requêtes et réponses suivant :
    • Différences entre Expires, Date, Age et If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Quelles sont les différentes actions (verbes) HTTP ? Listez toutes celles que vous connaissez et expliquez-les.
  • Expliquez ce qu’est le pre-fetching de domaine et en quoi cela aide en matière de performance ?
  • Qu’est-ce que le CDN et quel est l’avantage d’en utiliser un ?

[⬆]

Questions pour le fun :

  • Quel est le truc le plus cool que vous ayez programmé, de quoi êtes-vous le plus fier ?
  • Quelles sont les parties favorites des outils de développement que vous utilisez ?
  • Qui vous inspire dans la communauté front-end ?
  • Avez-vous des projets chouchous ? Quel genre ?

[⬆]

Contributeurs :

Ce document a démarré avec la collaboration de @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed et @iansym.

Il a depuis reçu des contributions de plus de 100 développeurs.

Edit this page
\ No newline at end of file diff --git a/translations/german/index.html b/translations/german/index.html index b69e7fc..326dc4a 100644 --- a/translations/german/index.html +++ b/translations/german/index.html @@ -1,4 +1,4 @@ Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Developer Interview Questions

Fragen im Bewerbungsgespräch für Frontend-Entwickler

Fragen im Bewerbungsgespräch für Frontend-Entwickler

@version 2.0.0

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.

Rebecca Murphey’s Baseline For Front-End Developers (Englisch) ist ebenso eine nützliche Quelle zur Vorbereitung auf ein Bewerbungsgespräch.

Anmerkung: Beachte bitte, dass viele dieser Fragen so offen gehalten sind, dass sie interessante Diskussionen auslösen können, in deren Verlauf du viel mehr über die Fähigkeiten eines Bewerbers erfahren kannst, als in kurzen, direkten Antworten.

Initiatoren und Mitwirkende

Ein Großteil der Fragen wurden aus einer Diskussion bei oksoclap entnommen, die von Paul Irish (@paul_irish) angestoßen wurde, und an der später folgende Personen beteiligt waren:

Allgemeine Fragen:

  • Welche Versionsverwaltung hast du bisher verwendet (Git, SVN, etc.)?
  • Wie sieht deine bevorzugte Entwicklungsumgebung aus? (Betriebssystem, Editor, Browser, Werkzeuge, etc.)
  • Beschreibe bitte deinen Arbeitsablauf, wenn du eine Website entwickelst.
  • Kannst du den Unterschied zwischen Progressive Enhancement und Graceful Degradation beschreiben?
    • Extra-Punkte für die Beschreibung von Feature Detection
  • Beschreibe bitte, was »Semantisches HTML« bedeutet.
  • In welchem Browser entwickelst du vornehmlich und welche Entwicklerwerkzeuge verwendest du dabei?
  • Wie würdest du die Ressourcen einer Website im Hinblick auf Performance optimieren?
    • Verschiedene Lösungsansätze könnten sein:
      • Zusammenfassen von Dateien
      • Minifizierung
      • Nutzung von CDN
      • Caching
      • etc.
  • Warum ist es sinnvoll, Ressourcen über mehr als eine Domain abzufragen?
    • Wie viele Quellen kann ein Browser von einer Domain parallel empfangen?
  • Benenne drei Umstände, die das Laden einer Seite verlangsamen können (hinsichtlich der Wahrnehmung oder der tatsächlichen Ladezeit).
  • Wie verhältst du dich, wenn du in ein neues Projekt kommst, in dem Tabs verwendet werden und du aber Leerzeichen verwendest?
    • Vorschlagen, dass für das Projekt sowas wie EditorConfig (http://editorconfig.org) verwendet werden soll.
    • Sich an die Vorgaben des Projekts halten.
    • issue :retab! command
  • Entwickle eine simple Slideshow-Seite.
    • Bonuspunkte, wenn sie kein JS verwendet.
  • Welche Werkzeuge nutzt du zum Testen der Performance deines Codes?
  • Wenn du eine Technologie in diesem Jahr meistern könntest, welche wäre das?
  • Erkläre die Bedeutung von Standards und Standardisierungsorganisationen?
  • Was ist FOUC? Wie vermeidest du FOUC?

HTML-spezifische Fragen:

  • Was tut ein doctype und wie viele von ihnen kannst du benennen?
  • Was ist der Unterschied zwischen Standards-Modus und Quirks-Modus?
  • Welche Einschränkungen gibt es beim Ausliefern von XHTML-Seiten?
    • Gibt es Probleme, wenn Seiten als application/xhtml+xml ausgeliefert werden?
  • Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus?
    • Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst?
  • Darf man XHTML-Syntax in HTML5 verwenden?
  • Wie verwendet man XML in HTML5?
  • Wofür sind data--Attribute nützlich?
  • Was sind die Inhaltsmodelle in HTML4 und sind sie unterschiedlich in HTML5?
  • Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5?
  • Beschreibe die Unterschiede zwischen Cookies, sessionStorage und localStorage.

JS-spezifische Fragen:

  • Erkläre Event Delegation
  • Erkläre, wie this in JavaScript funktioniert.
  • Erkläre, wie prototypische Vererbung funktioniert.
  • Wie gehst du vor beim Testen von JavaScript?
  • AMD vs. CommonJS?
  • Welche JavaScript-Bibliotheken hast du bisher benutzt?
  • Hast du jemals den Sourcecode von Bibliotheken/Frameworks angeschaut, die du benutzt?
  • Was ist ein hashtable?
  • Was sind undefined und undeclared Variablen?
  • Was ist eine Closure und wie/warum würdest du eine verwenden?
    • Dein bevorzugtes Pattern, um sie zu generieren? Argyle (Nur geeignet für IIFEs).
  • Was ist ein typischer Anwendungsfall für anonymous functions?
  • Erkläre das »JavaScript Module Pattern« und wann du es verwenden würdest.
    • Bonuspunkte, wenn sauberes Namespacing genannt wird.
    • Und wenn deine Module ohne Namespace sind?
  • Wie organisierst du deinen Code? (Module Pattern, klassische Vererbung?)
  • Was ist der Unterschied zwischen host objects und native objects?
  • Unterschied zwischen:
function Person(){} var person = Person() var person = new Person()
  • Worin unterscheiden sich .call und .apply?
  • Erkläre Function.prototype.bind.
  • Wann optimierst du deinen Code?
  • Kannst du erklären, wie Vererbung in JavaScript funktioniert?
  • Wann verwendet man document.write()?
    • Die meisten Werbebanner verwenden noch document.write(), obwohl es verpönt ist.
  • Was sind die Unterschiede zwischen Feature Detection, Feature Inference und Verwendung des UA-Strings?
  • Erkläre AJAX so detailiert wie möglich.
  • Erkläre wie JSONP funktioniert (und warum es nicht wirklich AJAX ist).
  • Hast du schonmal JavaScript-Templating verwendet?
    • Wenn ja, welche Bibliotheken hast du verwendet (Mustache, Handlebars, etc.)?
  • Erkläre »Hoisting«.
  • Erkläre Event Bubbling.
  • Was ist der Unterschied zwischen einem »Attribut« und einer »Property«?
  • Warum ist es nicht sinnvoll, JavaScript-eigene Objekte zu erweitern?
  • Warum ist es sinnvoll, Kernfunktionen zu erweitern?
  • Unterschied zwischen document load event und document ready event?
  • Was ist der Unterschied zwischen == und ===?
  • Erkläre, wie du einen Query-String-Parameter aus der URL des Browserfensters abfragst.
  • Erkläre die same-origin policy und in welcher Form sie JavaScript betrifft.
  • Erkläre Vererbungsmuster in JavaScript.
  • Bringe dies zum Laufen:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Beschreibe eine Strategie für Memoization (Vermeidung von Berechnungsschleifen) in JavaScript.
  • Warum heißt es »Ternary expression« und worauf deutet das Wort »Ternary« hin?
  • Was ist die Stelligkeit (Arity) einer Funktion?
  • Was ist "use strict";? Was sind die Vor- und Nachteile bei der Verwendung?

JS-Codebeispiele:

~~3.14

Frage: Welcher Wert wird zurückgegeben?
Antwort: 3

"Draußen nur Kännchen".split("").reverse().join("");

Frage: Welcher Wert wird zurückgegeben?
Antwort: “nehcnnäK run neßuarD”

( window.foo || ( window.foo = "bar" ) );

Frage: Welchen Wert hat window.foo?
Antwort: “bar”
nur wenn window.foo false war, andernfalls behält es seinen Wert.

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Frage: Was ist das Ergebnis der beiden alerts oben?
Antwort: “Hello World” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

Frage: Welchen Wert hat foo.length?
**Antwort: 2

var foo = {};
-foo.bar = 'hello';

Frage: Welchen Wert hat foo.length?
**Antwort: undefined

jQuery-spezifische Fragen:

  • Erkläre »Chaining«.
  • Erkläre »Deferreds«.
  • Was sind ein paar jQuery-spezifische Optimierungen, die man vornehmen kann?
  • Was macht .end()?
  • Wie und warum würdest du einen Namespace für einen gebundenen Event handler verwenden?
  • Benenne 4 verschiedene Werte, die man einer jQuery-Methode übergeben kann.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc.
  • Was ist die effects (oder fx) queue?
  • Was ist der Unterschied zwischen .get(), [] und .eq()?
  • Was ist der Unterschied zwischen .bind(), .live(), und .delegate()?
  • Was ist der Unterschied zwischen $ und $.fn? Was ist überhaupt $.fn?
  • Optimiere diesen Selektor:
$(".foo div#bar:eq(0)")
  • Unterschied zwischen ‘delegate()’ und ‘live()’?

CSS-spezifische Fragen:

  • Erkläre was ein »Reset«-CSS macht und wofür es nützlich ist.
  • Beschreibe Floats und wie sie funktionieren.
  • Was sind die verschiedenen Clear-Methoden und welche ist geeignet für welchen Kontext?
  • Erkläre CSS-Sprites und wie du sie auf einer Seite oder Website implementieren würdest.
  • Was sind deine bevorzugten Image-Replacement-Techniken und wann benutzt du welche davon?
  • CSS-Hacks, per conditional eingebundene .css-Ressourcen oder… was sonst?
  • Wie lieferst du Seiten für funktional beschränkte Browser aus?
    • Welche Techniken/Prozesse verwendest du dafür?
  • Was sind die verschiedenen Möglichkeiten, um Inhalte visuell auszublenden (und für Screenreader zugänglich zu machen)?
  • Hast du schonmal ein Grid-System verwendet, und wenn ja, welches bevorzugst du?
  • Hast du media queries oder mobile-spezifische Layouts/CSS verwendet/entwickelt?
  • Bist du mit dem Styling von SVG vertraut?
  • Wie optimierst du Websites für den Druck?
  • Was sind ein paar Kniffe, um effizientes CSS zu schreiben?
  • Verwendest du CSS-Präprozessoren (Sass, Compass, Stylus, LESS)?
    • Wenn ja, beschreibe bitte, was du an den verwendeten magst oder nicht magst.
  • Wie würdest du ein Webdesign umsetzen, das Nicht-Standard-Schriften verwendet?
    • Webfonts (Dienste wie Google Webfonts, Typekit, etc.)
  • Erkläre wie ein Browser entscheidet, welche Elemente von einem CSS-Selektor erfasst werden.

Optionale Spaßfragen:

  • Was ist das großartigste, was du je entwickelt hast, und worauf bist du am meisten stolz?
  • Kennst du das Zeichen der HTML5-Gang?
  • Bist du gerade oder warst du jemals auf einem Boot?
  • Was sind die besten Eigenschaften der Entwicklerwerkzeuge, die du benutzt?
  • Hast du irgendwelche Freizeitprojekte? Welcher Art?
  • Erkläre die Bedeutung von »cornify«.
  • 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.
    • Warte einen Moment und schaue, ob sie den Zettel umdrehen.
  • Pirat oder Ninja?
    • Bonuspunkt, wenn es eine Kombi ist und begründet werden kann (+2 für Zombieaffenpiratenninja).
  • Wenn nicht Web-Entwicklung, was würdest du dann tun?
  • Wo ist Carmen Sandiego?
    • Tipp: Die Antwort ist immer falsch.
  • Was ist deine Lieblingsfunktion des Internet Explorers?
  • Ergänze diesen Satz: Brendan Eich und Doug Crockford sind die __________ von JavaScript.
  • jQuery: Eine großartige Bibliothek oder die großartigste Bibliothek von allen? Diskutiere.
  • http://www.w3schools.com/ oder http://w3fools.com/
Edit this page
\ No newline at end of file +foo.bar = 'hello';

Frage: Welchen Wert hat foo.length?
**Antwort: undefined

jQuery-spezifische Fragen:

$(".foo div#bar:eq(0)")

CSS-spezifische Fragen:

Optionale Spaßfragen:

Edit this page
\ No newline at end of file diff --git a/translations/greek/index.html b/translations/greek/index.html index 0bbe8fd..bc297ac 100644 --- a/translations/greek/index.html +++ b/translations/greek/index.html @@ -1,3 +1,3 @@ Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Developer Interview Questions

Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers

Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers

Αυτό το αποθετήριο (repo) περιέχει μια σειρά από front-end ερωτήσεις συνέντευξης που μπορούν να χρησιμοποιηθούν κατά την εξέταση πιθανών υποψηφίων. Σε καμία περίπτωση δεν προτείνεται να θέσετε όλα τα ερωτήματα που βρίσκονται εδώ στον ίδιο υποψήφιο (αυτό θα έπαιρνε ώρες). Επιλέγοντας όμως μερικές από αυτές, θα μπορέσετε να επιλέξετε τον υποψήφιο με τις κατάλληλες για σας δεξιότητες.

Επίσης, πριν προχωρήσετε στις συνεντεύξεις, θα ήταν εξαιρετικά χρήσιμο να διαβάσετε το άρθρο της Rebecca Murphey “Baseline For Front-End Developers”.

Σημείωση: Λάβετε υπόψη ότι πολλές από αυτές τις ερωτήσεις είναι ελευθέρου θέματος και μπορεί να οδηγήσουν σε ενδιαφέρουσες συζητήσεις που θα σας πουν πολλά περισσότερα πράγματα σχετικά με τις δυνατότητες του υποψήφιου από μια απλή απάντηση.

Περιεχόμενα

  1. Αρχικοί Συντελεστές
  2. Γενικές Ερωτήσεις
  3. HTML Ερωτήσεις
  4. CSS Ερωτήσεις
  5. JS Ερωτήσεις
  6. jQuery Ερωτήσεις
  7. Coding Ερωτήσεις
  8. Διασκεδαστικές Ερωτήσεις
  9. Άλλες Εξαιρετικές Πηγές

[⬆] Αρχικοί Συντελεστές:

Οι περισσότερες ερωτήσεις προέκυψαν από ένα oksoclap thread που δημιουργήθηκε αρχικά από τον Paul Irish (@paul_irish) και στο οποίο συνείσφεραν τα παρακάτω άτομα:

[⬆] Γενικές Ερωτήσεις:

  • Τι μάθατε χτές/αυτή την εβδομάδα;
  • Τι σε ενθουσιάζει ή σας ενδιαφέρει σχετικά με τον προγραμματισμό;
  • Τι σκέφτεστε σχετικά με το UI, Ασφάλεια, Απόδοση, SEO, Συντηρησιμότητα και Τεχνολογία, ενώ υλοποιείτε μια web εφαρμογή ή ιστοσελίδα;
  • Μιλήστε σχετικά με το προτιμώμενο περιβάλλον ανάπτυξής σας. (OS, Editor, Φυλλομετρητές, εργαλεία κ.λπ.)
  • Με ποια έκδοση version control συστήματος είστε εξοικειωμένος;
  • Μπορείτε να περιγράψετε τη ροή της εργασίας σας κατά την διάρκεια δημιουργίας μιας ιστοσελίδας;
  • Μπορείτε να περιγράψετε τη διαφορά μεταξύ progressive enhancement και graceful degradation;
    • Επιπλέον βαθμοί για την περιγραφή feature detection
  • Εξηγήστε τι σημαίνει “Semantic HTML”.
  • Πώς μπορείτε να κάνετε optimize τα στοιχεία/πόρους των ιστοσελίδων σας;
    • Ψάχνοντας για μια σειρά από λύσεις που μπορεί να περιλαμβάνουν:
      • File concatenation
      • File minification
      • CDN Hosted
      • Caching
      • etc.
  • Γιατί είναι καλύτερα να σερβίρετε τα στοιχεία της ιστοσελίδας σας από πολλά domains;
    • Πόσα resources τη φορά μπορεί να κατεβάσει ένας φυλλομετρητής από κάθε domain;
  • Ονομάστε 3 τρόπους μείωσης του page load. (θεωρητικός ή πραγματικός χρόνος φόρτωσης)
  • Αν μπείτε σε κάποιο έργο στο οποίο χρησιμοποιούν tabs και εσείς έχετε συνηθίσει spaces, τι θα κάνατε;
    • Προτείνετε να χρησιμοποιηθεί στο έργο κάτι σαν το EditorConfig (http://editorconfig.org)
    • Συμμορφωθείτε με τις συμβάσεις (μείνετε συνεπής)
    • issue :retab! command
  • Δημιουργήστε μια απλή slideshow σελίδα
    • Επιπλέον βαθμοί αν δεν χρησιμοποιηθεί καθόλου JS.
  • Ποια εργαλεία χρησιμοποιείτε για να ελέγξετε την απόδοση του κώδικά σας;
    • Profiler, JSPerf, Dromaeo
  • Αν θα μπορούσατε να κατέχετε μια τεχνολογία φέτος, ποια θα ήταν αυτή;
  • Ποιες είναι οι διαφορές μεταξύ Long-Polling, WebSockets και SSE;
  • Εξηγήστε τη σημασία των standards και των οργανισμών τους.
  • Τι είναι FOUC; Πώς μπορείτε να αποφύγετε το FOUC;
  • Περιγράψτε όσο καλύτερα γίνεται τη διαδικασία από τη στιγμή που θα πληκτρολογείτε το URL ενός ιστότοπου μέχρι το τελείωμα του loading στην οθόνη σας.

[⬆] HTML Ερωτήσεις:

  • Τι κάνει το doctype?
  • Ποια είναι η διαφορά μεταξύ standards mode και quirks mode;
  • Ποιοι είναι περιορισμοί όταν “σερβίρετε” XHTML σελίδες;
    • Υπάρχουν προβλήματα όταν “σερβίρετε” σελίδες ως application/xhtml+xml;
  • Πώς σερβίρετε μια σελίδα με περιεχόμενο σε πολλές γλώσσες;
    • Σε τι είδους πράγματα πρέπει να είστε προσεκτικοί κατά τον σχεδιασμό ή την ανάπτυξη για πολυγλωσσικά sites;
  • Σε τι είναι χρήσιμα τα data- attributes;
  • Εξετάστε την HTML5 ως μια ανοιχτή web πλατφόρμα. Ποια είναι τα δομικά στοιχεία της;
  • Περιγράψτε τη διαφορά μεταξύ των cookies, sessionStorage και localStorage.
  • Μπορείτε να εξηγήσετε τη διαφορά μεταξύ GET και POST;

[⬆] CSS Ερωτήσεις:

  • Περιγράψτε τι κάνει ένα “reset” CSS αρχείο και γιατί είναι χρήσιμο.
  • Περιγράψτε τι είναι τα “Floats” και πώς λειτουργούν.
  • Περιγράψτε το z-index και πως λειτουργεί ο τρόπο στοίβαξης.
  • Ποιες είναι οι διάφορες τεχνικές “clearing” και ποια είναι η κατάλληλη για κάθε περίπτωση;
  • Εξηγήστε τί είναι τα CSS sprites, και πώς θα τα υλοποιούσατε σε μια σελίδα ή site.
  • Ποιες είναι οι αγαπημένες σας image replacement τεχνικές και ποιες χρησιμοποιείτε;
  • CSS property hacks, conditionally included .css αρχεία, ή… κάτι άλλο;
  • Πώς σερβίρεται τις σελίδες σας για feature-constrained browsers;
    • Ποιες τεχνικές/εργασίες χρησιμοποιείτε;
  • Ποιοι είναι οι διαφορετικοί τρόποι για αποκρύψετε οπτικά (visually hide) περιεχόμενο (και να είναι διαθέσιμo μόνο για screen readers);
  • Έχετε χρησιμοποιήσει ποτέ κάποιο grid system, και αν ναι, ποιο προτιμάτε;
  • Έχετε χρησιμοποιήσει ή υλοποιήσει media queries ή mobile specific layouts/CSS;
  • Κάποια εξοικείωση σε styling SVG;
  • Πώς θα βελτιστοποιήσετε τις ιστοσελίδες σας για εκτύπωση;
  • Ποια είναι μερικά από τα “gotchas” για συγγραφή αποτελεσματικής CSS;
  • Ποια είναι τα πλεονεκτήματα/μειονεκτήματα κατά την χρήση CSS preprocessors; (SASS, Compass, Stylus, LESS)
    • Εάν έχετε χρησιμοποιήσει CSS preprocessors, περιγράψτε τι σας αρέσει και τι όχι.
  • Πώς θα υλοποιούσατε ένα web design δείγμα που χρησιμοποιεί μη-standard γραμματοσειρές;
    • Webfonts (υπηρεσίες γραμματοσειρών όπως: Google Webfonts, Typekit etc.)
  • Εξηγήστε πώς ένας browser καθορίζει ποια στοιχεία ταιριάζουν με έναν CSS selector;
  • Εξηγήστε το “box model” και πως θα πείτε στον browser μέσω CSS να ρεντάρει (render) το layout σε διαφορετικά box models.
  • Τι κάνει το * { box-sizing: border-box; }? Ποια είναι τα πλεονεκτήματά του;
  • Αναφέρετε όσες τιμές (values) μπορείτε να θυμηθείτε για το display property.
  • Ποια είναι η διαφορά μεταξύ inline και inline-block;
  • Ποια είναι η διαφορά μεταξύ relative, fixed, absolute και statically τοποθετυμένου element;
  • Τι υπάρχοντα CSS frameworks έχετε χρησιμοποιήσει τοπικά, ή σε παραγωγή; (Bootstrap, PureCSS, Foundation κτλ.)
    • Αν ναι, ποια από αυτά; Αν μπορούσατε, πώς θα τα αλλάζατε/βελτιώνατε;
  • Έχετε παίξει με τις νέες CSS Flexbox ή Grid προδιαγραφές;
    • Αν ναι, τι γνώμη έχετε για την επίδοση τους?

[⬆] JS Ερωτήσεις:

  • Εξηγήστε το “event delegation”
  • Εξηγήστε πως λειτουργεί το this στην JavaScript
  • Εξηγήστε πως λειτουργεί η prototypal κληρονομικότητα
  • Πως κάνετε τεστ στη JavaScript;
  • AMD vs. CommonJS;
  • Τι είναι το hashtable;
  • Εξηγήστε γιατί το παρακάτω δεν λειτουργεί σαν IIFE: function foo(){ }();.
    • Τι χρειάζεται να αλάξει έτσι ώστε να λειτουργήσει σαν IIFE;
  • Ποια είναι η διαφορά ανάμεσα σε μια μεταβλητή που είναι: null, undefined και undeclared;
    • Πώς θα ελέγξετε οποιαδήποτε από τις παραπάνω καταστάσεις;
  • Τί είναι closure, και πως/γιατί να το χρησιμοποιήσετε;
  • Ποια είναι η πιο χαρακτηριστική χρήση των anonymous functions;
  • Εξηγήστε την “JavaScript module pattern” και πότε θα την χρησιμοποιούσατε.
    • Επιπλέον βαθμοί για την αναφορά καθαρού namespacing.
    • Τι γίνεται αν τα modules είναι namespace-less;
  • Πώς οργανώνετε τον κωδικό σας; (module pattern, classical inheritance;)
  • Ποια είναι η διαφορά μεταξύ host objects και native objects;
  • Διαφορά μεταξύ: function Person(){}, var person = Person(), και var person = new Person();
  • Ποια είναι η διαφορά μεταξύ .call and .apply;
  • Εξηγήστε τι είναι Function.prototype.bind;
  • Πότε βελτιστοποιείτε τον κώδικα σας;
  • Μπορείτε να μας εξηγήσετε πώς λειτουργεί η κληρονομικότητα (inheritance) στην JavaScript;
  • Πότε θα χρησιμοποιήσετε document.write();
    • Οι περισσότερες διαφημίσεις που δημιουργούνται χρησιμοποιούν ακόμα document.write () αν και η χρήση του είναι παρακινδυνευμένη
  • Ποια είναι η διαφορά μεταξύ feature detection, feature inference, και χρησιμοποιώντας το UA string
  • Εξηγήστε το AJAX με όσες περισσότερες λεπτομέρειες μπορείτε
  • Εξηγήστε πώς λειτουργεί το JSONP (και πως δεν είναι στην πραγματικότητα AJAX)
  • Έχετε χρησιμοποιήσει ποτέ JavaScript templating?
    • Αν ναι, ποιες libraries έχετε χρησιμοποιήσει; (Mustache.js, Handlebars κτλ.)
  • Εξηγήστε τι είναι το “hoisting”.
  • Περιγράψτε το event bubbling.
  • Ποια είναι η διαφορά μεταξύ “attribute” και “property”;
  • Γιατί η επέκταση (extending) των built in JavaScript objects δεν είναι καλή ιδέα;
  • Γιατί η επέκταση (extending) των built ins είναι καλή ιδέα;
  • Ποια είναι η διαφορά μεταξύ document load event και document ready event;
  • Ποια είναι η διαφορά μεταξύ == and ===;
  • Εξηγήστε πώς θα πάρετε μια παράμετρο query string από το URL του παράθυρου (window) του browser.
  • Εξηγήστε την πολιτική same-origin σε σχέση με την JavaScript.
  • Περιγράψτε τις inheritance patterns της JavaScript.
  • Κάνε το παρακάτω να δουλέψει:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Περιγράψτε μια στρατηγική για memoization (αποφεύγοντας τον υπολογισμό επανάληψης) σε JavaScript.
  • Γιατί ονομάζεται Ternary expression, τι υποδεικνύει η λέξη “Ternary”;
  • Τι είναι η arity μιας συνάρτησης (function);
  • Τι σημαίνει "use strict";; Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα στην χρήση του;

[⬆] jQuery Ερωτήσεις:

  • Εξηγήστε το “chaining”.
  • Εξηγήστε το “deferreds”.
  • Ποιές jQuery βελτιστοποιήσεις μπορείτε να υλοποιήσετε;
  • Τι κάνει το .end();
  • Πώς, και γιατί, να χρησιμοποιήσεις namespace σε έναν bound event handler;
  • Ονόμασε 4 διαφορετικές τιμές που μπορείς να περάσεις στην jQuery method.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object κτλ.
  • Τι είναι η effects (ή fx) queue;
  • Ποια είναι η διαφορά μεταξύ .get(), [], και .eq();
  • Ποια είναι η διαφορά μεταξύ .bind(), .live(), και .delegate()?
  • Ποια είναι η διαφορά μεταξύ $ and $.fn; Η απλά τι είναι $.fn.
  • Βελτιστοποιήστε τον παρακάτω selector:
$(".foo div#bar:eq(0)")

[⬆] Code Ερωτήσεις:

modulo(12, 5) // 2

Ερώτηση: Υλοποιήστε μια modulo function που ικανοποιεί το παραπάνω

"i'm a lasagna hog".split("").reverse().join("");

Ερώτηση: Τι τιμή επιστρέφει από την παραπάνω δήλωση;

Απάντηση: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Ερώτηση: Ποια είναι η τιμή του window.foo?

Απάντηση: “bar” (μόνο αν το window.foo ήταν falsey αλλιώς θα διατηρούσε την τιμή)

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Ερώτηση: Ποιο είναι το αποτέλεσμα των δύο παραπάνω alerts?

Απάντηση: “Hello World” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Ερώτηση: Ποια είναι η τιμή του foo.length?

Απάντηση: 2

[⬆] Διασκεδαστικές Ερωτήσεις:

  • Ποιο είναι το πιο σημαντικό πράγμα που έχετε υπολοιήση, ποιο είναι αυτό για το οποίο αισθάνεστε πραγματικά περήφανος;
  • Ποια είναι τα αγαπημένα σας εργαλεία στα developer tools που χρησιμοποιείτε;
  • Έχετε κάποια pet projects; Τι ακριβώς;
  • Ποιο είναι το αγαπημένο σας χαρακτηριστικό στον Internet Explorer?

[⬆] Άλλες Εξαιρετικές Πηγές:

Edit this page
\ No newline at end of file +foo.push(2);

Ερώτηση: Ποια είναι η τιμή του foo.length?

Απάντηση: 2

[⬆] Διασκεδαστικές Ερωτήσεις:

[⬆] Άλλες Εξαιρετικές Πηγές:

Edit this page
\ No newline at end of file diff --git a/translations/hebrew/index.html b/translations/hebrew/index.html index 58a604a..737a8d5 100644 --- a/translations/hebrew/index.html +++ b/translations/hebrew/index.html @@ -46,4 +46,4 @@ doSomethingElse();
});

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);
-

שאלות כיפיות:

תומכים:

פרויקט זה החל ב-2009 כשיתוף פעולה של @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal.

הפרויקט פעיל מאז בזכות תמיכתם של אנשים רבים ונהדרים.

Edit this page
\ No newline at end of file +

שאלות כיפיות:

תומכים:

פרויקט זה החל ב-2009 כשיתוף פעולה של @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal.

הפרויקט פעיל מאז בזכות תמיכתם של אנשים רבים ונהדרים.

Edit this page
\ No newline at end of file diff --git a/translations/hindi/index.html b/translations/hindi/index.html index 350e74c..ba948ab 100644 --- a/translations/hindi/index.html +++ b/translations/hindi/index.html @@ -1,2 +1,2 @@ फ्रंट-एंड डेवलपर साक्षात्कार प्रश्न ★ Front-end Developer Interview Questions

फ्रंट-एंड डेवलपर साक्षात्कार प्रश्न

फ्रंट-एंड डेवलपर साक्षात्कार प्रश्न

विषय-सूची

  1. सामान्य सवाल
  2. एच.टी.एम्.एल के प्रश्न
  3. सीएसएस के प्रश्न
  4. जेएस के प्रश्न
  5. परीक्षण के प्रश्न
  6. प्रदर्शन के प्रश्न
  7. नेटवर्क के प्रश्न
  8. कोडिंग के प्रश्न
  9. मजेदार सवाल

अपना योगदान कैसे दे?

  1. योगदानकर्ता
  2. योगदान कैसे दें?
  3. अनुज्ञाप‍त्र

[⬆] सामान्य सवाल:

  • क्या आपने कल/इस हफ्ते कुछ सीखा?
  • कौन सी चीजें आपको कोडिंग में आकर्षित करती हैं?
  • क्या आपने हाल ही में एक तकनीकी चुनौती का सामना किया है और आपने उसे कैसे हल किया?
  • एक नई वेबसाइट बनाते समय या पुरानी वेबसाइट को बनाए रखने के दौरान, क्या आपने प्रदर्शन को बढ़ाने के लिए कुछ तकनीकों का उपयोग किया है? कैसे?
  • क्या आप कुछ SEO की सर्वश्रेष्ठ प्रथाओं या तकनीकों की व्याख्या कर सकते हैं, जो आपने हाल ही में उपयोग की हैं?
  • फ्रंट-एंड सुरक्षा के संदर्भ में सामान्य तकनीकों या हाल के मुद्दों के समाधान के बारे में क्या व्याख्या कर सकते हैं?
  • आपने अपने कोड की अनुरक्षणयोग्यता बढ़ाने के लिए हाल के परियोजनाओं में क्या कदम उठाए हैं?
  • अपने पसंदीदा विकास वातावरण के बारे में बात करें।
  • आप किस संस्करण नियंत्रण प्रणालियों को जानते हैं?
  • जब आप एक वेब पेज बनाते हैं, तो आप किस प्रकार की वर्कफ़्लो का पालन करते हैं?
  • यदि आपके पास 5 विभिन्न स्टाइलशीट्स हैं, तो आप उन्हें साइट में कैसे सर्वश्रेष्ठ रूप से एकत्र करेंगे?
  • प्रगति वृद्धि और सौशीलता के बीच अंतर का वर्णन कैसे करेंगे?
  • वेबसाइट के संपत्ति/संसाधनों को आप कैसे अनुकूलित करेंगे?
  • दिए गए डोमेन से ब्राउज़र कितने संसाधन एक समय में डाउनलोड करेगा?
    • इसके अपवाद क्या हैं?
  • पृष्ठ लोड कम (प्राप्त या वास्तविक लोड समय) कैसे कम करेंगे? या कम करने के लिए कितने संसाधन उपयोग करेंगे?
  • यदि आप किसी परियोजना पर जुड़ जाते हैं और वह टैब्स का उपयोग करते हैं और आप अंतर्णितियों का उपयोग करते हैं, तो आप क्या करेंगे?
  • सामान्य स्लाइडशो पेज कैसे बनाएंगे? इसका विवरण दें।
  • अगर आप इस साल एक प्रौद्योगिकी को मास्टर कर सकते हैं, तो वह कौन सी होगी?
  • मानकों और मानकों के निकायों का महत्व समझाएं।
  • FOUC क्या है? FOUC से कैसे बचा जा सकता है?
  • ARIA और स्क्रीन रीडर क्या हैं, और एक वेबसाइट को पहुंचनीय बनाने के लिए कैसे इस्तेमाल करें?
  • CSS एनीमेशन और जावास्क्रिप्ट एनीमेशन के बीच कुछ फायदे और नुकसान समझाएं।
  • CORS का क्या मतलब है और यह किस समस्या का समाधान करता है?
  • आपने अपने बॉस या सहयोगी के साथ मतभिन्नता का सम्मुख कैसे किया?
  • आपने नवीनतम फ्रंट एंड विकास और डिज़ाइन के बारे में जानने के लिए कौन-कौन से संसाधनों का उपयोग किया है?
  • एक अच्छे फ्रंट-एंड डेवलपर बनने के लिए कौन-कौन सी कौशल जरूरी हैं?
  • आप खुद को किस भूमिका में देखते हैं?
  • कुकी, सत्र संग्रहण और स्थानीय संग्रहण के बीच का अंतर समझाएं?
  • जब आप ब्राउज़र में URL दर्ज करते हैं, तो क्या होता है?

[⬆] एच.टी.एम्.एल के प्रश्न:

  • doctype क्या काम करता है?
  • किस प्रकार से एक पेज को कई भाषाओं में सामग्री के साथ सेव किया जा सकता है?
  • बहुभाषिक साइटों के डिज़ाइन या विकसित करते समय आपको किस प्रकार की चीजों से सावधान रहना चाहिए?
  • data- आवश्यकताओं के लिए अच्छे हैं?
  • HTML5 को एक खुले वेब प्लेटफ़ॉर्म के रूप में कैसे देखा जा सकता है। HTML5 के निर्माण तत्व क्या हैं?
  • cookie, sessionStorage, और localStorage के बीच का अंतर कैसे समझाएं?
  • <script>, <script async> और <script defer> के बीच का अंतर क्या है?
  • सामान्यत: <head></head> और JS <script> के बीच CSS <link> को स्थित करने का उद्देश्य है?
    • क्या आपको किसी अपवाद का पता है?
  • प्रगतिशील प्रदर्शन क्या है?
  • आप एक छवि टैग में srcset आवश्यकता होती है, इस आवश्यकता की अनुमानित सामग्री का मूल्यांकन करते समय ब्राउज़र का काम कैसे करता है?
  • क्या आपने पहले कभी विभिन्न HTML प्रारूपन भाषाओं का उपयोग किया है?
  • canvas और svg के बीच का अंतर समझाएं?
  • HTML में खाली तत्व क्या होते हैं?

[⬆] CSS प्रश्न:

  • CSS चयनक्रम (selector specificity) क्या है और यह कैसे काम करता है?
  • “रिसेटिंग” और “नॉर्मलाइजिंग” CSS के बीच क्या अंतर है? आप किसे चुनेंगे, और क्यों?
  • Floats का वर्णन करें और ये कैसे काम करते हैं.
  • z-index का वर्णन करें और स्टैकिंग संदर्भ (stacking context) कैसे बनता है?
  • BFC (Block Formatting Context) का वर्णन करें और यह कैसे काम करता है?
  • विभिन्न क्लियरिंग (clearing) तकनीकों का वर्णन करें और कौनसे संदर्भ में कौनसा उपयुक्त है?
  • ब्राउज़र-विशिष्ट स्टाइलिंग समस्याओं को ठीक करने के लिए आप कैसे उपाय करेंगे?
  • विशेषत: ब्राउज़र-सीमित सुविधाओं वाले ब्राउज़रों के लिए अपने पेज को कैसे प्रस्तुत करेंगे?
  • आप कौनसे तकनीक/प्रक्रिया का उपयोग करते हैं?
  • सामग्री (content) को दृश्यमान तरीके से छिपाने और उसे केवल स्क्रीन रीडर्स के लिए ही उपलब्ध कैसे कर सकते हैं?
  • क्या आपने कभी ग्रिड सिस्टम का उपयोग किया है, और ऐसा करते समय आपकी पसंद क्या है?
  • क्या आपने मीडिया क्वेरीज़ या मोबाइल विशिष्ट लेआउट/CSS का अनुमान लगाया या अमल किया है?
  • क्या आप SVG को स्टाइल देने में परिचित हैं?
  • क्या आप एक @media गुण का उदाहरण दे सकते हैं, screen के अलावा?
  • लेखन एफिशिएंट CSS लिखने के लिए कुछ “गॉच्या” क्या हैं?
  • CSS प्रीप्रोसेसर का उपयोग करने और न करने के फायदे/नुकसान क्या हैं?
  • आपने जो CSS प्रीप्रोसेसर्स का उपयोग किया है, उन्हें आप क्या पसंद और नापसंद करते हैं?
  • एक वेब डिज़ाइन कॉम्प में गैर-मानक फॉन्ट्स का उपयोग कैसे करेंगे?
  • ब्राउज़र कैसे तय करता है कि कौन-कौन से तत्व CSS चयनक्रम से मेल खाते हैं?
  • जाल प्रतितत्वों (pseudo-elements) का वर्णन करें और उन्हें किस तरह का उपयोग किया जाता है.
  • बॉक्स मॉडल के बारे में आपकी समझ क्या है और आप ब्राउज़र को CSS में अपने लेआउट को विभिन्न बॉक्स मॉडल में दिखाने के लिए कैसे कहेंगे?
  • { box-sizing: border-box; } क्या काम करता है? इसके क्या फायदे हैं?
  • CSS display गुण क्या होता है और आप इसका उपयोग करने का कुछ उदाहरण दे सकते हैं?
  • इनलाइन और इनलाइन-ब्लॉक के बीच अंतर क्या है?
  • “nth-of-type()” और “nth-child()” चयनकर्ताओं के बीच अंतर क्या है?
  • एक सापेक्ष, स्थायी, अब्सोल्यूट और स्थितिगत रूप से पोज़ीशन किए गए तत्वों के बीच अंतर क्या है?
  • क्या किसी क्षेत्र-सीमित ब्राउज़र के लिए अपने पेज को प्रस्तुत करने के लिए आप कैसे सेव करते हैं?
  • क्या आपने कभी रेटिना ग्राफ़िक्स के साथ काम किया है? अगर हां, तो कब और कौन सी तकनीक का उपयोग किया गया था?
  • क्या कोई कारण है कि आप अब्सोल्यूट पोज़िशनिंग के बजाय translate() का उपयोग करना चाहेंगे, या उम्र-विपणी, और क्यों?
  • क्लियरफिक्स CSS गुण का उपयोग कैसे किया जाता है?
  • कैसे px, em और rem के बीच फॉन्ट आकार से संबंधित है, उनके अनुसार उदाहरण दे सकते हैं?
  • क्या आप किसी pseudo class का उदाहरण दे सकते हैं? क्या आप एक pseudo class का उपयोग का किसी उदाहरण का स्थान दे सकते हैं?
  • एक ब्लॉक स्तरीय तत्व और इनलाइन स्तरीय तत्व के बीच अंतर क्या है. क्या आप हर प्रकार के तत्वों के उदाहरण दे सकते हैं?
  • CSS ग्रिड और फ्लेक्सबॉक्स (Flexbox) के बीच अंतर को समझाएं? आप कब किसे प्राथमिकता देंगे?

[⬆] JS प्रश्न:

  • घटना अवलेपन (event delegation) को समझाएं।
  • JavaScript में this कैसे काम करता है, इसका विवरण करें।
  • क्या आप एक ऐसे तरीके का उदाहरण दे सकते हैं जिसमें ES6 में this का उपयोग करने का तरीका बदल गया है?
  • प्रोटोटाइपल इनहेरिटेंस (prototypal inheritance) कैसे काम करता है, इसका विवरण करें।
  • ‘null’, ‘undefined’ या undeclared ऐसी एक चर (variable) के बीच क्या अंतर है?
  • आप इन स्थितियों की जांच कैसे करेंगे?
  • एक क्लोज़र क्या है, और आप इसका उपयोग कैसे/क्यों करेंगे?
  • आप ऑब्जेक्ट की प्रॉपर्टीज़ और एरे आइटम्स को इटरेट करने के लिए कौन-कौन सी भाषा निर्माण का उपयोग करते हैं?
  • ‘Array.forEach()’ लूप और ‘Array.map()’ में मुख्य अंतर को कैसे वर्णित करें और आप इनमें से किसे और क्यों चुनेंगे?
  • एनोनिमस फ़ंक्शन्स के लिए एक सामान्य उपयोग केस क्या हो सकता है?
  • ‘होस्ट ऑब्जेक्ट्स’ और ‘नेटिव ऑब्जेक्ट्स’ के बीच क्या अंतर है?
  • ‘function Person() {}’, ‘var person = Person()’, और ‘var person = new Person()’ के उपयोग के बारे में विवाद क्या है?
  • ‘function foo() {}’ और ‘var foo = function() {}’ के बीच ‘foo’ के उपयोग के विभिन्नताओं का विवरण करें
  • ‘Function.call’ और ‘Function.apply’ क्या काम करते हैं? इन दोनों के बीच क्या महत्वपूर्ण अंतर है?
  • ‘Function.prototype.bind’ का विवरण करें।
  • फीचर डिटेक्शन (feature detection), फीचर इनफरेंस (feature inference), और UA स्ट्रिंग का उपयोग करने के बीच क्या अंतर है?
  • ‘होइस्टिंग’ का विवरण करें।
  • टाइप कोएर्शन क्या है? JavaScript कोड में टाइप कोएर्शन पर भरपूर निर्भरता की सामान्य चूकें क्या होती हैं?
  • घटना बबलिंग (event bubbling) को समझाएं।
  • घटना कैप्चरिंग (event capturing) को समझाएं।
  • ‘एट्रिब्यूट’ और ‘प्रॉपर्टी’ के बीच क्या अंतर है?
  • बिल्ट-इन JavaScript ऑब्जेक्ट्स को विस्तारित करने के फायदे और नुकसान क्या हैं?
  • ‘==’ और ‘===’ के बीच क्या अंतर है?
  • JavaScript के संदर्भ में सेम-आरिजिन पॉलिसी (same-origin policy) को समझाएं।
  • इसे ‘टर्नरी ऑपरेटर’ क्यों कहा जाता है, ‘टर्नरी’ शब्द का क्या मतलब है?
  • स्ट्रिक्ट मोड क्या है? इसके प्रयोग करने के कुछ फायदे/हानियां क्या हैं?
  • JavaScript कोड को JavaScript में कंपाइल करने वाली भाषा में लिखने के कुछ फायदे/हानियां क्या हैं?
  • JavaScript कोड को डिबग करने के लिए आप कौन-कौन से उपकरण और तकनीकों का उपयोग करते हैं?
  • परिवर्तनशील और अपरिवर्तनशील ऑब्जेक्ट्स के बीच क्या अंतर है?
  • JavaScript में एक अपरिवर्तनशील ऑब्जेक्ट का एक उदाहरण क्या है?
  • अपरिवर्तनशीलता के फायदे और नुकसान क्या हैं?
  • आप अपने कोड में अपरिवर्तनशीलता कैसे प्राप्त कर सकते हैं?
  • सिंक्रोनस और एसिंक्रोनस फ़ंक्शन्स के बीच क्या अंतर है?
  • घटना लूप (event loop) क्या है?
  • कॉल स्टैक और टास्क क्यू के बीच क्या अंतर है?
  • ‘let’, ‘var’, या ‘const’ का उपयोग करके बनाई गई चरों (variables) के बीच क्या अंतर है?
  • ES6 क्लास और ES5 फ़ंक्शन कंस्ट्रक्टर्स के बीच क्या अंतर है?
  • नए ऐरो => फ़ंक्शन सिंटैक्स के एक उपयोग केस प्रदान कर सकते हैं? इस नए सिंटैक्स का विभिन्नता अन्य फ़ंक्शन्स से क्या है?
  • एक कंस्ट्रक्टर में एक मेथड के लिए ऐरो सिंटैक्स का उपयोग करने के क्या फायदे हैं?
  • उच्च-क्रम फ़ंक्शन (higher-order function) की परिभाषा क्या है?
  • कृपया एक ऑब्जेक्ट या एक एरे को डिस्ट्रक्चर (destructuring) करने का एक उदाहरण दे सकते हैं?
  • क्या आप ES6 टेम्पलेट लिटरल्स का उपयोग करके एक स्ट्रिंग उत्पन्न करने का एक उदाहरण दे सकते हैं?
  • क्या आप करी फ़ंक्शन का एक उदाहरण और इस सिंटैक्स के फ़ायदे के बारे में बता सकते हैं?
  • ‘spread सिंटैक्स’ का उपयोग करने के फ़ायदे क्या हैं और यह ‘rest सिंटैक्स’ से कैसे अलग है?
  • फ़ाइलों के बीच कोड साझा कैसे किया जा सकता है?
  • आपको स्टेटिक क्लास सदस्य (static class members) बनाने की क्या आवश्यकता हो सकती है?
  • ‘while’ और ‘do-while’ लूप्स के बीच क्या अंतर है?
  • एक प्रॉमिस (promise) क्या होता है? कहाँ और कैसे आप प्रॉमिस का उपयोग करेंगे?
  • JavaScript के साथ कोडिंग करते समय ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (Object Oriented Programming) के सिद्धांतों का उपयोग करने की बात करें।

[⬆] < a name = ‘code-questions’ >कोडिंग प्रश्न</ a >

  • इसे काम में लाओ:
  duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • 3 के गुणकों पर “fizz”, 5 के गुणकों पर “buzz”, और 3 और 5 के गुणकों पर “fizzbuzz” निकालने के लिए 100 तक चलने वाला एक for लूप बनाओ |
  • निम्नलिखित में से प्रत्येक का क्या उत्पन्न होगा?
console.log("hello" || "world")
-console.log("foo" && "bar")
  • तुरंत आवाजित किया जाने वाला फ़ंक्शन एक्सप्रेशन (IIFE) लिखें|

[⬆] परीक्षण के प्रश्न

  • अपने कोड के परीक्षण के कुछ फायदे / नुकसान क्या हैं?
  • आप अपने कोड की कार्यक्षमता का परीक्षण करने के लिए किन उपकरणों का उपयोग करेंगे?
  • एक इकाई परीक्षण और एक कार्यात्मक / एकीकरण परीक्षण के बीच अंतर क्या है?
  • कोड स्टाइल लिंटिंग टूल का उद्देश्य क्या है?
  • कुछ टेस्टिंग सर्वोत्तम प्रथाएँ क्या हैं?

[⬆] प्रदर्शन के प्रश्न

  • अपने कोड में एक प्रदर्शन बग खोजने के लिए आप किन उपकरणों का उपयोग करेंगे?
  • आपकी वेबसाइट के स्क्रॉलिंग प्रदर्शन में सुधार करने के कुछ तरीके क्या हैं?
  • लेआउट, पेंटिंग और कंपोज़िंग के बीच अंतर स्पष्ट करें।

[⬆] नेटवर्क के प्रश्न

  • परंपरागत रूप से, कई डोमेन से साइट की संपत्ति की सेवा करना बेहतर क्यों रहा है?
  • जब आप किसी वेबसाइट के यूआरएल टाइप करते हैं, तो उस प्रक्रिया का वर्णन करें (शुरुवात से जब तक वह स्क्रीन पर लोड करती है)|
  • लॉन्ग-पोलिंग, वेबसोकेट और सर्वर-सेंट इवेंट के बीच अंतर क्या हैं?
  • निम्नलिखित अनुरोध और प्रतिक्रिया शीर्षकों की व्याख्या करें:
    • Expires, Date, Age एवं If-Modified- में क्या अंतर है|
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP के क्या तरीके हैं? उन सभी HTTP तरीकों को सूचीबद्ध करें जिन्हें आप जानते हैं, और उन्हें समझाएं।
  • डोमेन प्री-फेचिंग क्या है और यह प्रदर्शन में कैसे मदद करता है?
  • सीडीएन क्या है और इसका उपयोग करने से क्या लाभ है?

[⬆] मजेदार सवाल:

  • आपने हाल ही में किस मज़ेदार परियोजना पर काम किया है?
  • आपके द्वारा उपयोग किए जाने वाले डेवलपर टूल के बारे में अपनी कुछ पसंदीदा बातें बताएं|
  • फ्रंट-एंड समुदाय में आपको कौन प्रेरित करता है?
  • क्या आपने कोई व्यक्तिगत परियोजनाएं बनाई है? अगर हां, तो किस प्रकार की बनाई है उसका वर्णन करें?
Edit this page
\ No newline at end of file +console.log("foo" && "bar")

[⬆] परीक्षण के प्रश्न

[⬆] प्रदर्शन के प्रश्न

[⬆] नेटवर्क के प्रश्न

[⬆] मजेदार सवाल:

Edit this page
\ No newline at end of file diff --git a/translations/hungarian/index.html b/translations/hungarian/index.html index 82a3df0..f70dbb9 100644 --- a/translations/hungarian/index.html +++ b/translations/hungarian/index.html @@ -1,3 +1,3 @@ Interjú kérdések front-end fejlesztőknek ★ Front-end Developer Interview Questions

Interjú kérdések front-end fejlesztőknek

Interjú kérdések front-end fejlesztőknek

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.

Rebecca Murphey, Baseline For Front-End Developers cikke is hasznos alapja lehet egy interjúnak.

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.

Tartalom

  1. Eredeti közreműködők
  2. Általános kérdések
  3. HTML kérdések:
  4. CSS kérdések
  5. JS kérdések
  6. jQuery kérdések
  7. Példakódok
  8. Választható és vicces kérdések
  9. További referenciák

[⬆] Eredeti közreműködők:

A kérdések többsége egy oksoclap beszélgetés alapján készült, amit Paul Irish (@paul_irish) kezdeményezett az alábbi közreműködőkkel:

[⬆] Általános kérdések:

  • Tanultál valami újat a héten/tegnap és ha igen, mit?
  • Mi számodra a legérdekesebb és izgalmasabb a kódolás során?
  • Milyen UI, biztonsági, teljesítménybeli, SEO, karbantarthatósági és technológiai szempontokat tartasz szem elött fejlesztés közben?
  • 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.)
  • Részletezd a munkafolyamatot, hogyan készítesz el egy weboldalt.
  • 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?
    • Bónusz pont a funkció működésének tesztelése adott eszközön.
  • Magyarázd el mit jelent a “szemantikus HTML”.
  • Milyen böngészőt és milyen eszközöket használsz a fejlesztéshez?
  • Hogyan optimalizálod egy weboldal forrásait/eszközeit?
    • Keress több megoldást, amik tartalmazzák az alábbiakat:
      • Fájl egyesítés
      • Fájl minimalizálás
      • CDN hoszting
      • Cachelés
      • stb.
  • Miert jobb az eszközöket egyszerre több domainnek is kiszolgálni?
    • Hány lekérdezés futhat a böngészőben egyidejűleg az adott domain irányába?
  • Nevezz meg 3 lehetőséget az oldalletöltés időtartámanak csökkentésére. (előtöltött vagy aktuális töltési idő)
  • Ha beszállsz egy projektbe, és ők tabot használnak te pedig szókozt a kód rendezésénél, mit teszel?
    • Tanácsolod, hogy használjatok valami technológiát, pl. EditorConfig
    • Elfogadod (vagy tartózkodsz)
    • issue :retab! command
  • Készíts egy egyszerű slideshow oldalt.
    • Bónusz pont ha nem szükséges hozzá JavaScript.
  • Milyen eszközökkel teszteled a kódod teljesítményét? ()
  • Ha idén elsajátíthatnál egy technológiát, mi lenne az?
  • Ismertesd a sztandardok fontosságát.
  • Mi a FOUC? Hogyan kerulöd el a FOUC-et?
  • Magyarázt el legjobb tudásod szerint mi történik a böngészőben attól kezdve hogy beírod az oldal url-jét, addig hogy az betöltődött a képernyőn.
  • Magyarázd el mi az ARIA és a képernyőolvasók, és hogy tudsz egy weboldalt hozzáférhetővé tenni hátrányos helyzetben élők számára.

[⬆] HTML kérdések:

  • Mi a doctype feladata és hány fajtáját tudod megnevezni?
  • Mi a különbség a standard és a quirks módok között?
  • Nevezd meg az XHTML oldalak korlátait?
    • Van bármi akadálya annak, hogy egy oldalt application/xhtml+xml-ként szolgáljon ki?
  • Hogyan készítesz fel egy weboldalt többnyelvű tartalom megjelenítésére?
    • Mikre kell figyelni egy többnyelvű oldal tervezése és fejlesztése során?
  • Mire valók a data- attribútumok?
  • Tegyük fel, hogy a HTML5 egy nyílt webes felület. Mik az építőelemei?
  • Mi a különbség a cookie a sessionStorage és a localStorage között.
  • El tudod mondani mi a különbség a GET és a POST között?
  • Mi a különbség a <script>, <script async> és <script defer> között.

[⬆] CSS kérdések:

  • Mire való a “reset” CSS fájl és mennyire hasznos?
  • Hogyan működik a CSS float?
  • Milyen clear technikákat ismersz és melyik milyen környezetben a megfelelő?
  • Magyarázd el a CSS sprites működését és, hogy hogyan alkalmazod egy weboldalon?
  • Mi a kedvenc képpel helyettesítő (image replacement) technikád és mit használsz mire?
  • CSS hackek, böngésző függő CSS fájlok, vagy… valami más?
  • Hogyan jelenítesz meg oldalakat korlátozott böngészőkben?
    • Milyen technológiákat/folyamatokat használsz?
  • Milyen módon tudsz tartalmakat vizuálisan elrejteni (és csak screen olvasók számára elérhetővé tenni)?
  • Használtál már “grid system”-et? Ha igen nevezz meg párat.
  • Használtál már “media query”-ket vagy mobil specifikus layoutokat/CSS-eket?
  • Jártas vagy az SVG használatában?
  • Hogyan alakítasz egy weboldalt nyomtatóbaráttá?
  • Mik a legjobb “ötletek” a hatékony CSS kód írásához?
  • Használsz CSS előfeldolgozó technilógiát? (SASS, Compass, Stylus, LESS)
    • Ha igen mit szeretsz és mit nem szeretsz bennük?
  • Hogyan valósítasz meg egy olyan dizájn kompozíciót, ami nem a szabványos betűtípusokat tartalmazza?
  • Miként határozza meg a böngésző a megfelelő CSS szelektort?
  • Hogyan értelmezed a “box model”-t és hogyan alkalmazod a böngészőkben?
  • Mit csinál a * { box-sizing: border-box; }? Mik az előnyei?
  • Sorold fel a display tulajdonság annyi értékét amennyit tudsz.
  • Mi a különbség az inline és az inline-block között?
  • Mi a különbség a relative , fixed, absolute és statikusan pozicionált elemek között?
  • A ‘C’ feloldása a CSS-ben a cascading (lépcsőzetes). Hogy van a prioritás meghatározva a stílusok közt (néhány példával)? Hogy használhatod ezt a rendszert a saját előnyödre?
  • Használtál már CSS keretrendszert? (Bootstrap, PureCSS, Foundation stb.)
  • Ha igen, melyiket? Ha tehetnéd, hogy változtatnád/fejlesztenéd tovább?
  • Foglalkoztál már az új CSS Flexbox és Grid specifikációkkal?
  • Miben más a reszponzív design és az adaptív design?
  • Dolgoztál már retina grafikával? Ha igen, milyen teknikákat használtál?

[⬆] JS kérdések:

  • Mit jelent az event delegation?
  • Magyarázd el hogyan működik a this a JavaScript-ben.
  • Hogyan működik a protokol öröklés (prototypal inheritance)?
  • Hogyan teszteled a JavaScript kódodat?
  • AMD vs. CommonJS?
  • Mi a hashtábla?
  • Miért nem működik a következő kód IIFE-ként? function foo(){ }();
    • Mit kell megváltoztatni, hogy működjön?
  • Mit jelent az undefined és az undeclared változó?
    • Miként ellenőrzöd ezeket?
  • Mi a “closure”, milyen formáit ismered és hogyan használod azokat?
  • Hogyan néz ki egy anoním funkció?
  • Magyarázd el a JavaScript modul sablont és, hogy mikor használjuk.
    • Bónusz pont, ha említi a tiszta “namespace”-ket.
    • Mi történik akkor, ha a modul “namespace” mentes?
  • Miként rendszerezed a kódodat? (module pattern, classical inheritance)
  • Mi a különbség hoszt objektum és natív objektum között?
  • Mi a különbség az következő kódok között:
    function Person(){}, var person = Person() és var person = new Person()
  • Mi a különbség a .call és az .apply között?
  • Magyarázd el mire jó a Function.prototype.bind?
  • Mikor szoktad optimalizálni a kódodat?
  • Magyarázd el hogyan működik az öröklődés szabálya a JavaScript-ben?
  • Mikor használod a document.write() funkciót?
    • A legtöbb generált hírdetésben még mindig használják annak ellenére, hogy nem ajánlatos.
  • 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?
  • Magyarázd meg az AJAX működését a lehető legrészletesebben.
  • Magyarázd el, hogyan működik a JSONP (és miért nem AJAX valójában).
  • Használtál már JavaScript template rendszert?
    • Ha igen mit? (Mustache.js, Handlebars, stb.)
  • Mit jelent a “hoisting”?
  • Mit jelent az event bubbling?
  • Mi a különbség az “attribute” és a “property” között?
  • Miért nem jó ötlet kiegészíteni a beépített JavaScript objektumokat?
  • Miért jó ötlet kiegészíteni a bepített funkciókat?
  • Mi a különbség a “document load” és a “document ready” között?
  • Mi a különbség == és === között?
  • Hogyan olvasol be egy paramétert a böngésző ablak URL-ből?
  • Mit jelent a “same-origin” szabály a JavaScript-bet?
  • Ismertesd a JavaScript öröklési mintáját.
  • Javítsd ki az alábbi példát:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • írj le egy memorizáló stratégiát (ismétlődő kalkulációk nélkül) JavaScriptben.
  • Mit nevezünk “Ternary” kifejezésnek? Mire utal a “Ternary” szó?
  • Mennyi attribútumot lehet átadni egy funkciónak?
  • Mi a "use strict";, mik az előnyei és a hátrányai?
  • Készíts egy ciklust ami 100-ig számol, minden 3-al osztható számnál kiírja hogy “fizz”, minden 5-el osztható számnál kiírja hogy “buzz”, és minden 3-al és 5-el is osztható számnál kiírja hogy “fizzbuzz”
  • Általánosságban miért jó ötlet a weboldal global scope-ját érintetlenül hagyni?

[⬆] jQuery kérdések:

  • Mit jelent a chaining?
  • Mit jelent a deferreds?
  • Milyen jQuery specifikus optimalizálást ismersz?
  • Mire használhatjuk az .end() funkciót?
  • Hogyan neveznél el egy kapcsolt esemény kezelőt (bound event handler) és miért?
  • Nevezz meg 4 különböző értéket, ami átadható egy jQuery folyamatnak.
    • Szelektor (sztring), HTML (sztring), Callback (funkció), HTMLElement, objektum, tömb, elemb tömb, jQuery objektum, stb.
  • Mit jelent az effektek (vagy fx) sorba állítas?
  • Mi a különbség .get(), [], és .eq() között?
  • Mi a különbség .bind(), .live(), és .delegate() között?
  • Mi a különbség $ és $.fn között? Vagy mit jelent a $.fn?
  • Optimalizáld a alábbi szelektort:
$(".foo div#bar:eq(0)")

[⬆] Példakódok:

modulo(12, 5) // 2

Kérdés: Készítsd el a modulo funkció, hogy a fenti példa eredménye 2 legyen.

"i'm a lasagna hog".split("").reverse().join("");

Kérdés: Milyen értékkel tér vissza a fenti állítás?

Válasz: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Kérdés: Mi az értéke a window.foo-nak?

Válasz: “bar” (de csak ha a window.foo hamis egyébként megtartja az értékét.)

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Kérdés: Mi a fenti két alert-nek a kimenete?

Válasz: “Hello World” és ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Kérdés: Mi a foo.length értéke?

Válasz: 2

[⬆] Választható és vicces kérdések:

  • Mi a legjobb dolog, amit eddig kódoltál? Mire vagy a legbüszkébb?
  • Mi a kedvenced az általad használt fejlesztői eszközökben?
  • Van dédelgetett projekted? Ha igen, milyen?
  • Mit szeretsz a legjobban az Internet Explorerben?

[⬆] További referenciák:

Edit this page
\ No newline at end of file +foo.push(2);

Kérdés: Mi a foo.length értéke?

Válasz: 2

[⬆] Választható és vicces kérdések:

[⬆] További referenciák:

Edit this page
\ No newline at end of file diff --git a/translations/index.html b/translations/index.html index 77a0465..52d3d59 100644 --- a/translations/index.html +++ b/translations/index.html @@ -1 +1 @@ -Translations ★ Front-end Developer Interview Questions

Translations

Doesn’t see yours or see something wrong? Open an issue.

\ No newline at end of file +Translations ★ Front-end Developer Interview Questions

Translations

Doesn’t see yours or see something wrong? Open an issue.

\ No newline at end of file diff --git a/translations/indonesian/index.html b/translations/indonesian/index.html index 13c417e..7d1349a 100644 --- a/translations/indonesian/index.html +++ b/translations/indonesian/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

Pertanyaan Seru / Sampingan:

Contributors:

Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi dari @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed dan @iansym.

Dari sejak itu, dokumen ini sudah menerima kontribusi lebih dari 100 developers.

Edit this page
\ No newline at end of file +console.log('three');

Pertanyaan Seru / Sampingan:

Contributors:

Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi dari @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed dan @iansym.

Dari sejak itu, dokumen ini sudah menerima kontribusi lebih dari 100 developers.

Edit this page
\ No newline at end of file diff --git a/translations/italian/index.html b/translations/italian/index.html index e8e1472..164271b 100644 --- a/translations/italian/index.html +++ b/translations/italian/index.html @@ -1,3 +1,3 @@ Domande per il colloquio di lavoro per front-end ★ Front-end Developer Interview Questions

Domande per il colloquio di lavoro per front-end

Domande per il colloquio di lavoro per front-end

Questo repository contiene una serie di domande che possono essere usate nei colloqui di lavoro quando si esaminano i potenziali candidati per il ruolo di front-end. Non è affatto consigliato usare ogni singola domanda con lo stesso candidato (richiederebbe ore). Scegliere alcune di queste domande dalla lista dovrebbe aiutarti ad esaminare le skill che vengono richieste.

L’articolo Baseline For Front-End Developers di Rebecca Murphey è un’ottima risorsa da leggere prima di affrontare un colloquio.

Nota: Tieni presente che molte di queste domande sono a risposta aperta e possono portare a interessanti discussioni che possono far capire le capacità di una persona più di quello che farebbe una risposta diretta.

Indice dei Contenuti

  1. Collaboratori Originali
  2. Domande Generali
  3. Domande Specifiche su HTML
  4. Domande Specifiche su CSS
  5. Domande Specifiche su JS
  6. Domande Specifiche su jQuery
  7. Domande con Codice
  8. Domande per Divertimento
  9. Altre Ottime Risorse

[⬆] Collaboratori Originali:

La maggior parte delle domande sono state prese da una discussione su oksoclap originariamente creata da Paul Irish (@paul_irish) e con il contributo delle seguenti persone:

[⬆] Domande Generali:

  • Cosa hai imparato ieri/questa settimana?
  • Cosa ti entusiasma o ti interessa della programmazione?
  • Qual è una sfida tecnica che hai incontrato e come l’hai risolta?
  • Quali considerazioni fai riguardo alla UI, alla Sicurezza, alle Prestazioni, al SEO, alla Manutenibilità o alla Tecnologia mentre costruisci una applicazione web o un sito?
  • Parla del tuo ambiente di sviluppo preferito. (Sistema Operativo, Editor di testo, Browser, Strumenti ecc.)
  • Con quali sistemi di controllo di versione [VCS] hai familiarità?
  • Puoi descrivere il tuo metodo di lavoro quando crei una pagina web?
  • Se avessi 5 fogli di stile differenti, come ti comporteresti per integrarli al meglio nel sito?
  • Puoi descrivere la differenza tra miglioramento progressivo [progressive enhancement] e degradazione elegante [graceful degradation]?
  • Come ottimizzeresti le risorse/asset di un sito?
  • Quante risorse scaricherà per volta un browser da uno specifico dominio?
    • Quali sono le eccezioni?
  • Citami 3 modi per diminuire il caricamento della pagina. (percepito o effettivo tempo di caricamento)
  • Se cominci a lavorare su un progetto già iniziato dove vengono usati tab invece di spazi, cosa fai?
  • Descrivi come creeresti una semplice pagina con slideshow.
  • Se avessi la possibilità di diventare esperto in una tecnologia, quale sceglieresti?
  • Spiega l’importanza degli standard e degli enti di normazione.
  • Cosa è il FOUC? Come eviti il FOUC?
  • Spiega cosa sono ARIA e lettori di schermo [screenreaders] e come rendere un sito web accessibile.
  • Spiega alcuni dei pro e contro delle animazioni CSS rispetto alle animazioni Javascript.

[⬆] Domande su HTML:

  • Cosa fa il doctype?
  • Qual è la differenza tra standard mode e quirks mode?
  • Qual è la differenza tra HTML e XHTML?
  • Ci sono dei problemi a servire le pagine come application/xhtml+xml?
  • Come servi una pagina con il contenuto in più lingue?
  • A cosa devi far attenzione quando progetti o sviluppi siti multilingua?
  • Per cosa sono utili gli attributi data-?
  • Considera HTML5 come una piattaforma web aperta. Quali sono i mattoni di HTML5?
  • Descrivi le differenze tra cookie, sessionStorage e localStorage.
  • Descrivi la differenza tra <script>, <script async> e <script defer>.
  • Perche è generalmente una buona idea posizionare CSS <link> tags all’interno di <head></head> e Javascript <script> tags appena prima di </body>? Conosci eccezioni?
  • Cos’è il rendering progressivo [progressive rendering]?
  • Hai mai utilizzato differeti liguaggi di templating HTML prima?

[⬆] Domande Specifiche su CSS:

  • Descrivi cosa fa un file CSS “reset” e in cosa è utile.
  • Descrivi i Float e come funzionano.
  • Quali sono le varie tecniche di clearing e quale è appropriata per quale contesto?
  • Spiega gli sprite CSS, e come li implementeresti in una pagina o in un sito.
  • Quali sono le tue tecniche di sostituzione immagini [image replacement] preferite e quale usi quando?
  • Hack delle proprietà CSS, file .css inclusi con condizioni, o… altro?
  • Come servi le tue pagine per i browser con funzionalità limitate?
    • Che tecniche/processi usi?
  • Quali sono i vari modi per nascondere visualmente il contenuto (e renderlo disponibile solo per gli screen reader)?
  • Hai mai usato un sistema di griglie [grid system], e se sì, qual è il tuo preferito?
  • Hai mai usato o implementato media queries o CSS/layout specifici per mobile?
  • Familiarità con lo styling SVG?
  • Come ottimizzi le tue pagine web per la stampa?
  • Quali sono alcuni dei “trucchi” per scrivere CSS efficiente?
  • Quali sono i vantaggi/svantaggi nell’usare i preprocessori CSS? (SASS, Compass, Stylus, LESS)
    • Se sì, descrivi cosa ti piace e cosa non ti piace dei preprocessori CSS che hai usato.
  • Come implementeresti una grafica web che usa font non standard?
    • Webfonts (servizi di font tipo: Google Webfonts, Typekit, ecc…)
  • Spiega come un browser determina quali elementi corrispondono a un selettore CSS.
  • Spiega la tua comprensione del box model e come useresti i CSS per dire al browser di rappresentare il tuo layout nei vari box model.

[⬆] Domande Specifiche su JS:

  • Spiega l’event delegation.
  • Spiega come funziona this in JavaScript.
  • Spiega come funziona l’ereditarietà prototipale [prototypal inheritance].
  • Come fai a testare il tuo codice JavaScript?
  • AMD contro CommonJS?
  • Cosa è una hashtable?
  • Spiega perché il seguente codice non funziona come UN IIFE: function foo(){ }();.
    • Cosa c’è bisogno di cambiare per renderlo correttamente un IIFE?
  • Quale è la differenza tra una variabile che è: null, undefined or undeclared?
    • Come faresti per controllare questi stati?
  • Cosa è una chiusura [closure], e come/perché ne useresti una?
  • Qual è l’uso tipico di una funzione anonima?
  • Spiega il “JavaScript module pattern” e quando lo useresti.
    • Punti bonus se menziona namespacing pulito.
    • E se i tuoi moduli sono senza namespace?
  • Come organizzi il tuo codice? (module pattern, ereditarietà classica?)
  • Qual è la differenza tra oggetti host e oggetti nativi?
  • Differenza tra: function Person(){}, var person = Person(), e var person = new Person()?
  • Qual è la differenza tra .call e .apply?
  • Spiega Function.prototype.bind?
  • Quando ottimizzi il tuo codice?
  • Puoi spiegare come funziona l’ereditarietà in JavaScript?
  • Quando useresti document.write()?
    • La maggior parte delle pubblicità usa document.write() sebbene il suo utilizzo venga malvisto
  • Qual è la differenza tra il rilevamento di funzionalità [feature detection], la deduzione di funzionalità [feature inference], e l’uso della stringa UA
  • Spiega AJAX nel modo più dettagliato possibile
  • Spiega come funziona JSONP (e come non è veramente AJAX)
  • Hai mai usato il templating JavaScript?
    • Se se sì, quali librerie hai utilizzato? (Mustache.js, Handlebars ecc…)
  • Spiega “hoisting”.
  • Descrivi l’event bubbling.
  • Qual è la differenza tra un “attribute” e una “property”?
  • Perché extending built negli oggetti JavaScript non è una buona idea?
  • Perché extending built è una buona idea?
  • Differenza tra l’evento document load e l’evento document ready?
  • Qual è la differenza tra == e ===?
  • Spiega come prenderesti il parametro query string dall’URL della finestra del browser.
  • Spiega la policy “stessa origine” [same-origin] per quanto riguarda JavaScript.
  • Descrivi i pattern di ereditarietà in JavaScript.
  • Cosa ottieni da:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Descrivi la tecnica della memoizzazione (evitando la ripetizione del calcolo) in JavaScript.
  • Perché è chiamata espressione Ternaria, cosa indica la parola “Ternaria”?
  • Cosa è l’arietà di una funzione?
  • Cosa è "use strict";? Quali sono i vantaggi e gli svantaggi nell’usarlo?

[⬆] Domande Specifiche su jQuery:

  • Spiega la “concatenazione” [chaining].
  • Spiega “deferreds”.
  • Quali sono alcune ottimizzazioni specifiche per jQuery che puoi implementare?
  • Cosa fa .end()?
  • Come, e perché, assegneresti un namespace al gestore di un evento?
  • Citami 4 differenti valori che puoi passare al metodo jQuery.
    • Selettore [selector] (testo), HTML (testo), Callback (funzione), HTMLElement, oggetti, array, element array, oggetto jQuery, ecc…
  • Cosa è la coda di effetti [fx queue]?
  • Qual è la differenza tra .get(), [], e .eq()?
  • Qual è la differenza tra .bind(), .live(), e .delegate()?
  • Qual è la differenza tra $ e $.fn? O anche solo cosa è $.fn.
  • Ottimizza questo selettore:
$(".foo div#bar:eq(0)")

[⬆] Domande con Codice:

modulo(12, 5) // 2

Domanda: Implementa la funzione modulo che soddisfi quanto sopra

"i'm a lasagna hog".split("").reverse().join("");

Domanda: Quale valore viene ritornato dalla dichiarazione qui sopra?

Risposta: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Domanda: Qual è il valore di window.foo?

Risposta: “bar” (solo se window.foo era falso altrimenti manterrà il suo valore)

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Domanda: Qual è il risultato dei due alert qui sopra?

Risposta: “Hello World” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Domanda: Qual è il valore di foo.length?

Risposta: 2

[⬆] Domande per Divertimento:

  • Qual è la cosa più bella che hai mai sviluppato, di cosa sei più orgoglioso?
  • Quali sono le tue parti preferite degli strumenti di sviluppo che usi?
  • Hai qualche progetto personale? Di che tipo?
  • Qual è la tua feature preferita di Internet Explorer?

[⬆] Altre Ottime Risorse:

Edit this page
\ No newline at end of file +foo.push(2);

Domanda: Qual è il valore di foo.length?

Risposta: 2

[⬆] Domande per Divertimento:

[⬆] Altre Ottime Risorse:

Edit this page
\ No newline at end of file diff --git a/translations/japanese/index.html b/translations/japanese/index.html index 9e030d7..37c4fe5 100644 --- a/translations/japanese/index.html +++ b/translations/japanese/index.html @@ -1,4 +1,4 @@ フロントエンドデベロッパー面接時の質問事項 ★ Front-end Developer Interview Questions

フロントエンドデベロッパー面接時の質問事項

フロントエンドデベロッパー面接時の質問事項

@バージョン 2.0.0

本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。

Rebecca MurpheyのBaseline For Front-End Developersもとても参考になるので面接前によく読むことをおすすめします。

注意: これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。

オリジナルのコントリビューター

質問の多くはPaul Irish (@paul_irish)と下記のコントリビューターによって作成されたoksoclapスレッドをもとに作成されています。

一般的な質問事項

  • 昨日・今週に何を学びましたか？
  • 何があなたをコーディングに惹きつけていますか？
  • 最近直面した技術的な困難はどんなものですか？また、それをどのように解決しましたか？
  • ウェブアプリやウェブサイトを構築する際にユーザーインターフェース、パフォーマンス、SEO、メンテナンス性などについてどのように考えますか？
  • 好きな開発環境について教えてください。（OS、エディタ、ブラウザ、ツール等）
  • webページを作るときのあなたのワークフローを教えてください。
  • どのバージョン管理ツールに慣れていますか？（Git, SVNなど）
  • 5つの異なるスタイルシートをウェブサイトに統合する最適な方法はどんなものですか？
  • プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明してください。
  • ウェブサイトのアセット・リソースの最適化をどのように行いますか？
    • 下記のようないくつかのソリューションが期待されます。
      • ファイル結合
      • ファイルの縮小
      • CDNホスティング
      • キャッシュ利用
      • など
  • 複数のドメインからアセットを提供したほうがよい理由は何ですか？
  • 一度にブラウザが与えられたドメインからダウンロードできるリソースの数はいくつですか？
    • 例外は何ですか？
  • ページロードを減らす３つの方法を挙げてください。
  • プロジェクトに加入したときに、もし彼らがタブを使い、あなたがスペースを使っていたとしたらどうしますか？
    • EditorConfig (http://editorconfig.org) といったプラグインを利用するように提案する
    • 慣習に従う (一貫性を保つ)
    • issue :retab! command
  • シンプルなスライドショーのページを書いてください。
    • JSを使わなかったらボーナスポイント。
  • コードのパフォーマンスをテストするのにどんなツールを使いますか？
    • プロファイラー、JSPerf、Dromaeo
  • もし今年１つの技術をマスターできるとしたら、何をマスターしますか？
  • 標準化と標準化団体の重要性を説明してください。
  • FOUCとは何ですか？ どのようにFOUCを防ぐことができますか？
  • ARIAとスクリーンリーダーとはなにか、またそれらがウェブサイトをどのようにアクセシブルにするか説明してください。
  • CSSアニメーションとJavaScriptアニメーションのそれぞれの利点と欠点を幾つか説明してください。
  • CORSとは何の省略ですか？また、それはどんな問題を表しますか？

HTMLに関する質問事項

  • doctypeは何をしているか説明してください。
  • スタンダードモードとクアークスモードの違いは何ですか？
  • XHTMLページを提供するときの制限は何ですか？
    • application/xhtml+xmlとしてページを提供することに何か問題はありますか？
  • 多言語でコンテンツをどのように提供しますか？
    • 多言語化サイトのデザイン・開発時にどのようなことに注意すべきですか？
  • data-属性は何にとって良いですか？
  • HTML5をオープンなWEBプラットフォームとしてみなしましょう。HTML5の基本的な構成要素は何ですか？
  • クッキー、セッションストレージ、ローカルストレージの違いを述べてください。

JSに関する質問事項

  • イベントデリゲーションを説明してください。
  • JavaScriptにおいてthisがどのように機能するか説明してください。
  • プロトタイプ継承がどのように機能するか説明してください。
  • JavaScriptをテストするのにどのように対処しますか？
  • AMDとCommonJS、何が違いますか？
  • ハッシュテーブルとは何ですか？
  • undefinedとundeclared変数は何ですか？
  • クロージャとは何ですか？　どのように、そしてなぜそれを使うのですか？
    • クロージャを作成するときに使うあなたの好きなパターンは何ですか？ （即時実行関数表現にのみ適用）
  • 匿名関数が有効な典型的なユースケースは何ですか？
  • 「JavaScriptモジュールパターン」とそれを使う場面を説明してください。
    • 名前空間について述べたらボーナスポイント。
    • もしモジュールが名前空間無しだとしたらどうなりますか？
  • コードをどのように整理しますか？（モジュールパターン、古典的な継承を使う？）
  • ホストオブジェクトとネイティブオブジェクトの違いは何ですか？
  • 下記コードの違いは何？function Person(){}, var person = Person(), var person = new Person()
  • .callと.applyの違いは何ですか？
  • Function.prototype.bindを説明してください。
  • いつコードを最適化しますか？
  • JavaScriptにおいてどのように継承が機能しているか説明してください。
  • document.write()はいつ使いますか？
    • 生成される広告の多くはいまだに嫌われている方法であるdocument.write()を活用しています。
  • feature detection, feature inference, UA stringの使用の違いは何ですか？
  • AJAXをできるだけ詳しく述べてください。
  • JSONPがどのように機能するか述べてください。(またそれがどのようにAJAXとは異なっているのか)
  • JavaScriptテンプレートは使ったことはありますか？
    • 使ったことがあるのなら、何のライブラリを使いましたか？（Mustache.js, Handlebarsなど）
  • 「巻き上げ」を説明してください。
  • イベントバブリングを説明してください。
  • 「属性」と「プロパティ」の違いは何ですか？
  • どうしてビルトインJavaScriptを拡張することは良くないのですか？
  • ドキュメントロードイベントとドキュメントレディイベントの違いを述べてください。
  • ==と===の違いは何ですか？
  • ブラウザのウィンドウURLからクエリ文字列をどのように取得するかを説明してください。
  • JSに関するsame-origin policyを説明してください。
  • JavaScriptにおける継承パターンを述べてください。
  • 下記を動くように書き変えてください。
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • JavaScriptにおけるメモ化（計算の繰り返しの回避）の方針について述べてください。
  • 三項演算子と呼ばれる理由は何ですか？ 「三項」という言葉が示していることは何ですか？
  • 関数のarityとは何ですか?
  • "use strict";とは何ですか? これを使うことのメリット、デメリットは何ですか？

JSコードの例

~~3.14

質問: 上ステートメントで得られる値は何ですか？
回答: 3

"i'm a lasagna hog".split("").reverse().join("");

質問: 上ステートメントで得られる値は何ですか？
回答: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

質問: window.fooの値は何ですか？
回答: “bar”
window.fooがfalseと判断される場合のみ。trueの場合はその値を保持し続ける。

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

質問: 上2つのアラートの結果はどうなりますか？
回答: “Hello World” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

質問: foo.lengthの値はどうなりますか?
回答: 2

var foo = {};
-foo.bar = 'hello';

質問: foo.lengthの値はどうなりますか?
回答: undefined

jQueryに関する質問事項

  • 「chaining（チェイン）」を説明してください。
  • 「deferreds」を説明してください。
  • jQueryに関する最適化としてどんなことができますか？
  • .end()は何ですか?
  • イベントハンドラに名前空間を与えるにはどのようにすればいいですか。またなぜ名前空間を与えますか。
  • jQueryメソッドに渡すことができる4つの異なる値を挙げてください。
    • セレクター (string)、HTML (string)、コールバック (function)、HTMLエレメント、オブジェクト、配列、エレメントの配列、jQueryオブジェクト等
  • エフェクト(あるいはfx)キューとは何ですか?
  • .get()、 []、.eq()の違いは何ですか？
  • .bind()、.live()、.delegate()の違いは何ですか？
  • $、$.fnの違いは何ですか？ 単に$.fnと書いた場合はどうですか？
  • 下記のセレクターを最適化してください:
$(".foo div#bar:eq(0)")
  • delegate()とlive()の違いは何ですか？

CSSに関する質問事項

  • ‘reset’ CSSファイルとは何ですか？　またその有用性は何ですか？
  • フロートとそれらがどのように機能するかを説明してください。
  • フロートクリアの様々なテクニックは何ですか？その内のどれが適切でそれはどんな状況ですか？
  • CSSスプライトを説明してください。またページやサイトでそれをどのように実装しますか？
  • 1番好きな画像置き換えテクニックは何ですか？またいつどのテクニックを使いますか？
  • .cssファイルに含み得るCSSハックは何ですか？また.cssファイル以外ではどうしますか？
  • 機能が制限されたブラウザに対してどのようにページを提供しますか？
    • どんなテクニック、プロセスを使いますか？
  • コンテンツを視覚的に見えなくするのにどんな方法がありますか？（またスクリーンリーダーユーザーのみに見えるようにする方法は何ですか？）
  • グリッドシステムを使ったことはありますか？　使い続けたいと思いましたか？
  • メディアクエリ、あるいはモバイルに特化したレイアウト、CSSを組んだことはありますか？
  • SVGのスタイリングの知識は何かしら持っていますか？
  • 印刷用ページの最適化はどのように行いますか？
  • CSS記述における「gotchas（見落としがちなミス）」は何ですか？
  • CSSプリプロセッサのメリット、デメリットは何ですか？（SASS、Compass、Stylus、LESS）
    • 使ったことのあるCSSプリプロセッサについてそれの好きなところ、嫌いなところを説明してください。
  • 非標準のフォントを使用したwebデザインカンプをどのように実装しますか？
    • ウェブフォント（Googleウェブフォント、Typekit 等)
  • ブラウザがどのようにあるエレメントがどのCSSセレクタにマッチするかを決定しているかを説明してください。

その他の質問事項

  • あなたがコーディングした中で一番素晴らしいものは何ですか？　何が一番誇れますか？
  • あなたが使っている開発者ツールの一番好きなところは何ですか？
  • 何か暖めてるアイディアは持っていますか？　それはどんなものですか？
  • インターネットエクスプローラーの最も好きな機能は何ですか？
Edit this page
\ No newline at end of file +foo.bar = 'hello';

質問: foo.lengthの値はどうなりますか?
回答: undefined

jQueryに関する質問事項

$(".foo div#bar:eq(0)")

CSSに関する質問事項

その他の質問事項

Edit this page
\ No newline at end of file diff --git a/translations/korean/index.html b/translations/korean/index.html index c207e1f..37dcd3f 100644 --- a/translations/korean/index.html +++ b/translations/korean/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

그 외 흥미로운 질문들:

함께하는 분들:

이 문서는 2009년에 다음에 언급된 분들과의 협업으로 시작했습니다.
@paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed @iansym

현재는 100이 넘는 개발자들이 함께하고 있습니다.

Edit this page
\ No newline at end of file +console.log('three');

그 외 흥미로운 질문들:

함께하는 분들:

이 문서는 2009년에 다음에 언급된 분들과의 협업으로 시작했습니다.
@paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed @iansym

현재는 100이 넘는 개발자들이 함께하고 있습니다.

Edit this page
\ No newline at end of file diff --git a/translations/korean/reference.html b/translations/korean/reference.html index 871a19b..0f95592 100644 --- a/translations/korean/reference.html +++ b/translations/korean/reference.html @@ -1,4 +1,4 @@ 해설집 ★ Front-end Developer Interview Questions

해설집

해설집

이 문서는 정답을 알려주는 문서가 아닙니다.
 면접에 대한 답은 스스로가 찾아야 좋으며,
 그 판단을 돕기 위한 해설서 임을 밝히는 바입니다.
-

##기여자
@Songhun(http://songhun.blogspot.com)
@YiHanghee(http://blog.javarouka.me)

##일반적인 질문에 대한 참고

  • SNS에 대해서 물어보는 이유가 무엇일까요?

HTML에 대한 참고

  • doctype에 대한 설명은 Wikipedia 에서 찾아볼 수 있습니다.
  • 표준 모드는 W3C의 표준에 맞춘 구현 렌더링으로 동작하며(미세하게 다릅니다), 쿽스 모드는 다양한 브라우저 및 표준 정립 이전의 구버전 기준으로 작성된 HTML의 fallback 과 비슷합니다.
  • XHTML 과 HTML의 차이 블로그 포스팅에 4부작(?)으로 좋은 설명이 있네요.
    • application/xhtml+xml 컨텐트 타입은 브라우저에 따라 해석할 수 없기도 합니다.(IE…)
  • 엘리먼트의(특히 루트인 html) lang attribute 와 관련이 있을까요…?
  • HTML 5 + XML = XHTML 5, <!doctype xhtml>
  • Programer custom attribute. ex) 자동차를 엘리먼트로 나타내야 할 경우를 생각해보면 기본 html 속성으로는 부족하겠죠.
  • HTML4의 콘텐츠 모델이 div와 span에 id와 클래스를 입힌 inline 및 block display의 사용자 정의형이라면, HTML5는 그것을 표준화한 콘텐츠 모델.
  • open web platform 이 뭘까요…?
  • 서버와 공유할 필요가 있는지의 여부, 저장 용량, 저장 생명주기에 따라 셋을 구분할 수 있습니다.

Javascript에 대한 참고

jQuery에 대한 참고

CSS 참고

##흥미로운 질문들에 대한 참고

Edit this page
\ No newline at end of file +

##기여자
@Songhun(http://songhun.blogspot.com)
@YiHanghee(http://blog.javarouka.me)

##일반적인 질문에 대한 참고

HTML에 대한 참고

Javascript에 대한 참고

jQuery에 대한 참고

CSS 참고

##흥미로운 질문들에 대한 참고

Edit this page
\ No newline at end of file diff --git a/translations/latvian/index.html b/translations/latvian/index.html index f422ea0..723cf69 100644 --- a/translations/latvian/index.html +++ b/translations/latvian/index.html @@ -1,3 +1,3 @@ Front-end web programmētāja darba intervijas jautājumi ★ Front-end Developer Interview Questions

Front-end web programmētāja darba intervijas jautājumi

Front-end web programmētāja darba intervijas jautājumi

Šis repozitorijs satur vairākus ar front-end web programmētāja darba prasmēm saistītus jautājumus, ko var izmantot, intervējot potenciālos vakances kandidātus. Nav ieteicams izmantot katru šeit minēto jautājumu, jo tas patērētu ļoti daudz laika. Izvēlieties tikai dažus jautājumus no šī saraksta, kas Jums palīdzēs ātrāk atlasīt kandidātus ar nepieciešamajām prasmēm.

Rebecca Murphey Baseline For Front-End Developers raksts ir ļoti piemērota lasāmviela, kuru izlasīt pirms dodaties uz darba interviju.

Piezīme: Paturiet prātā, ka daudzi no šiem jautājumiem ir atvērta tipa, kas varētu izvērsties plašākā diskusijā un ļautu iepazīt cilvēka prasmes daudz labāk nekā tieša atbilde.

Saturs

  1. Sākotnējie Kontributori
  2. Vispārēji Jautājumi
  3. HTML Jautājumi
  4. CSS Jautājumi
  5. JS Jautājumi
  6. jQuery Jautājumi
  7. Kodēšanas Jautājumi
  8. Interesanti Jautājumi
  9. Citas Lieliskas Atsauces

[⬆] Sākotnējie Kontributori:

Vairums no jautājumiem tika paņemti no oksoclap raksta, ko sākotnēji izveidoja Paul Irish (@paul_irish) un kuru papildināja sekojoši cilvēki:

[⬆] Vispārēji Jautājumi:

  • Ko jaunu Jūs apguvāt vakar/šonedēļ?
  • Kas Jūs aizrauj un interesē programmēšanā?
  • Kādas UI (lietotāja interfeisa), performances, SEO, apkopes vai tehnoloģijas apsvērumus jūs ņemat vērā, kad veidojat web-aplikāciju vai mājas lapu?
  • Pastāstiet par sev vēlemo darba vidi. (Operētājsistēma, pārlūki, rīki utt.)
  • Vai variet aprakstīt savu darba procesu, kad veidojiet mājas lapu?
  • Vai jūs variet aprakstīt starpību starp “progressive enhancement” un “graceful degradation”?
    • Bonus punkti, ja tiek pieminēta funkciju noteikšana (feature detection).
  • Izskaidrojiet, ko nozīmē “Semantisks HTML”.
  • Kā Jūs optimizētu mājas lapas failus/resurus?
    • Potenciāli vairāki risinājumu, starp kuriem būtu:
      • Failu konkatenācija (savienošana)
      • Failu minimizēšana
      • CDN hostēšana
      • Kešošana
      • u.c.
  • Kāpēc ir labāk lapas resurus izvietot uz vairākiem domēniem?
    • Cik daudz resursus pārlūks spēj vienlaicīgi lejuplādēt no viena domēna?
  • Nosauciet 3 veidus, kā samazināt lapas ielādes laiku (šķietamo vai faktisko)
  • Kā Jūs rīkotos, ja Jūs pievienotos projektam un viņi izmantotu tabulāciju, bet Jūs atstarpes koda atkāpju veidošanai?
    • Ieteiktu projektā izmantot kaut ko līdzīgu EditorConfig (http://editorconfig.org)
    • Pieskaņoties kolēģiem
    • Veikt retabulāciju ar ‘:retab!’ komandu
  • Izveidojiet vienkāršū slaidrāža lapu
    • Bonus punkti, ja netiek izmantots JavaScript
  • Kādus rīkus Jūs izmantojiet, lai pārbaudītu sava koda veiktspēju (performanci)?
    • Profiler, JSPerf, Dromaeo
  • Ja šogad Jūs varētu pilnībā apgūt vienu tehnoloģiju, kura tā būtu?
  • Kādas ir atšķirības starp Long-Polling, Websockets un SSE?
  • Izskaidrojiet standartu un standartizēšanas komisiju nozīmi.
  • Kas ir FOUC? Kā izvairīties no FOUC?

[⬆] HTML Jautājumi:

  • Ko dara doctype?
  • Kāda ir starpība starp standarta režīmu un quirks režīmu?
  • Kādi ir XHTML lapu ierobežojumi?
    • Vai var rasties problēmas, ja lapa tiek servēta kā application/xhtml+xml?
  • Kā servēt lapu ar saturu vairākās valodās?
    • Par ko ir īpaši jāpiedomā, kad dizainē vai izstrādā vairāku valodu mājas lapas?
  • Ar ko ir noderīgi data- atribūti?
  • Pieņemot, ka HTML5 ir atvērta web-platforma, kas ir HTML5 pamatelementi?
  • Aprakstiet atšķirības starp sīkdatnēm (cookies), sessionStorage un localStorage.

[⬆] CSS Jautājumi:

  • Aprakstiet, ko dara “reset” CSS fails un ar ko tas ir noderīgs.
  • Aprakstiet Float parametru un to, kā tas strādā.
  • Kādas ir dažādas Clear parametra lietošanas tehnikas un kādā kontekstā katra ir vispiemērotākā?
  • Izskaidrojiet, kas ir CSS spraiti (sprites) un kā Jūs tos izmantotu lapā?
  • Kāda ir Jūsu iecienītākā attēlu aizvietošanas tehnika un kādos brīžos Jūs to izmantojiet?
  • CSS parametru hacki, nosacīti iekļauti .css faili vai kas cits?
  • Kā Jūs servējat lapas priekš pārlūkiem ar ierobežotu funkcionalitāti?
    • Kādas tehnikas/procesu Jūs piekopjat?
  • Kādi ir dažādi paņēmieni, kā vizuāli noslēpt saturu (un padarīt to pieejamu tikai priekš ekrāna lasītājiem)?
  • Vai esat kādreiz izmantojis režģa (grid) sistēmu? Ja jā, tad kurai dodiet priekšroku?
  • Vai esat izmantojis mediju vaicājumus (media queries) vai izkārtojumus(layouts)/CSS domātus speciāli priekš mobilajām iekārtām?
  • Vai esat pazīstams ar SVG stilu definēšanu?
  • Kā Jūs optimizējiet mājas lapas priekš printēšanas?
  • Kādi ir dažādi triki un paņēmieni (kā arī ar ko der uzmanīties), lai veidotu efektīvu CSS?
  • Kādi ir plusi/mīnusi izmantojot CSS preprocesorus? (SASS, Compass, Stylus, LESS)
    • Aprakstiet plusus un mīnusus tiem CSS preprocesoriem, kurus esiet izmantojis.
  • Kā Jūs veidotu mājas lapas dizainu, kas izmanto nestandarta fontus?
    • Webonti (tādi fontu servisi kā Google Webfonts, Typekit u.c.)
  • Izskaidrojiet kā pārlūks nosaka kuri elementi atbilst CSS selektoriem?
  • Izskaidrojiet kā Jūs saprotiet “box model” un kā Jūs ar CSS palīdzību norādītu pārlūkam attēlot izkārtojumu(layout) ar dažādiem “box model” iestatījumiem.

[⬆] JS Jautājumi:

  • Izskaidrojiet notikumu deleģēšanu (event delegation)
  • Izskaidrojiet kā this strādā JavaScript valodā
  • Izskaidrojiet kā strādā prototipiskā mantošana?
  • Kā Jūs testējat savu JavaScript kodu?
  • AMD vai CommonJS?
  • Kas ir asociatīvais masīvs (hashtable)?
  • Paskaidrojiet kāpēc šis kods nestrādā kā IIFE: function foo(){ }();.
    • Kas ir jāpamaina, lai tā pareizi strādātu kā IIFE?
  • Kāda ir atšķirība starp mainīgajiem, kas ir definēti kā: null, undefined or undeclared?
    • Kā jūs pārbaudītu vai mainīgais atbilst kādam no šiem stāvokļiem?
  • Kas ir slēgums(closure) un kā/kāpēc Jūs tādu izmantotu?
  • Kādos gadījumos parasti tiek izmantotas anonīmās funkcijas?
  • Izskaidrojiet “JavaScript module pattern” un kādos gadījumos Jūs to izmantotu.
    • Bonus punkti, ja tiek pieminēta tīra nosaukumvietas uzturēšana (clean namespacing)
    • Gadījumā ja Jūsu moduļi neizmanto nosaukumvietu?
  • Kā Jūs organizējat savu kodu? (Moduļu veidā, klasiskā mantošana?)
  • Kāda ir atšķirība starp “host” objektiem un “native” objektiem?
  • Kāda ir atšķirība starp: function Person(){}, var person = Person(), un var person = new Person()?
  • Kāda ir atšķirība starp .call un .apply?
  • Izskaidrojiet Function.prototype.bind?
  • Kurā brīdī Jūs optimizējiet savu kodu?
  • Vai variet izskaidrot kā JavaScript valodā strādā mantošana?
  • Kādos gadījumos Jūs izmantotu document.write()?
    • Vairums reklāmas joprojām izmanto document.write() kaut arī šāda prakse tiek pelta.
  • Kāda ir atšķirība starp funkciju noteikšanu (feature detection), funkciju secināšanu (feature inference) un UA virknes (UA string) izmantošanu?
  • Izskaidrojiet AJAX cik vien detalizēti iespējams
  • Izskaidrojiet kā stradā JSONP (un kā tas atšķiras no AJAX)
  • Vai esat jebkad izmantojuši JavaScript šablonošanai (templating)?
    • Ja jā, kuras bibliotēkas Jūs esat izmantojuši? (Mustache.js, Handlebars etc.)
  • Izskaidrojiet “hoisting”
  • Izskaidrojiet notikumu burbuļošanu (event bubbling)
  • Kāda ir atšķirība starp atribūtu un rekvizītu (property)?
  • Kāpēc paplašināt iebūvētos JavaScript objektus nav laba doma?
  • Kāpēc paplašināt “built ins” ir laba doma?
  • Kāda ir atšķirība starp “document load” un “document ready” notikumu?
  • Kāda ir atšķirība starp == un ===?
  • Paskaidrojiet kā Jūs iegūtu kverija stringa parametru no pārlūka loga URL?
  • Izskaidrojiet vietējās izcelsmes (same-origin) noteikumu attiecībā uz JavaScript
  • Izskaidrojiet mantošanas paternus JavaScript valodā.
  • Lieciet šim strādāt:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Izskaidrojoet memoizācijas stratēģiju (izvairīšanos no aprēķinu atkārtošanas) JavaScript valodā.
  • Kāpēc to sauc par ternāru izteiksmi (Ternary expression)? Uz ko norāda vārds ternārs?
  • Kas ir funkcijas “arity”?
  • Kas ir "use strict";? Kādas ir priekšrocības un trūkumi to izmantojot?

[⬆] jQuery Jautājumi:

  • Izskaidrojiet savirknēšanu (chaining).
  • Izskaidrojiet novēlojumus (deferreds).
  • Kādas ir jQuery specifiskas optimizācijas, ko Jūs spējat ieviest praksē?
  • Ko veic .end()?
  • Kā un kāpēc Jūs nosauktu pievienotu notikumu apdarinātāju (bound event handler)?
  • Nosauciet 4 dažādas vērtības, ko Jūs varat padot jQuery metodei
    • Selektoru (virkne), HTML (virkne), atgriezenisko funkciju (funkcija), HTMLElement, Object, Array, Element Array, Jquery Object u.c.
  • Kas ir efektu (vai fx) rinda?
  • Kāda ir atšķirība starp .get(), [], un .eq()?
  • Kāda ir atšķirība starp .bind(), .live(), un .delegate()?
  • Kāda ir atšķirība starp $ un $.fn? Vai vienkārši kas ir $.fn?
  • Optimizējiet šo selektoru
$(".foo div#bar:eq(0)")

[⬆] Kodēšanas Jautājumi:

modulo(12, 5) // 2

Jautājums: Izveidojiet modulo funkciju, kas apmierina augstākminēto

"i'm a lasagna hog".split("").reverse().join("");

*Jautājums: Kāda vērtība tiek atgriezta no augšākminētā koda?

Atbilde: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Jautājums: Kāda ir window.foo vērtība?

Atbilde: “bar” (vienīgi°ja window.foo “falsey”, savādāk tas paturētu savu esošo vērtību)

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Jautājums: Kāds ir abu augstākminēto paziņojumu iznākums?

Atbilde: “Hello World” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Jautājums: Kāda ir foo.length vērtība?

Atbilde: 2

[⬆] Interesanti Jautājumi:

  • Kas ir pati foršākā lieta, ko jebkat esiet uzprogrammējis un ar ko lepojaties?
  • Kuras ir Jūsu izstrādes rīku iemīļotākās funkcijas, kuras izmantojiet?
  • Vai Jums ir kādi hobiju projekti? Kādi?
  • Kāda ir Jūsu iecienītakā Internet Explorer raksturiezīme?

[⬆] Citas Lieliskas Atsauces:

Edit this page
\ No newline at end of file +foo.push(2);

Jautājums: Kāda ir foo.length vērtība?

Atbilde: 2

[⬆] Interesanti Jautājumi:

[⬆] Citas Lieliskas Atsauces:

Edit this page
\ No newline at end of file diff --git a/translations/polish/index.html b/translations/polish/index.html index 735b192..f7291b9 100644 --- a/translations/polish/index.html +++ b/translations/polish/index.html @@ -1,4 +1,4 @@ Pytania kwalifikacyjne na stanowisko front-end web developera ★ Front-end Developer Interview Questions

Pytania kwalifikacyjne na stanowisko front-end web developera

Pytania kwalifikacyjne na stanowisko front-end web developera

@version 2.0.0

To repozytorium zawiera wiele pytań weryfikujących wiedzę potencjalnych kandydatów na stanowisko front-end web developera. Nie zaleca się zadawania wszystkich pytań jednej osobie (zajęłoby to godziny). Wybranie pojedynczych pozycji z listy pomoże w sprawdzeniu wymaganych umiejętności.

Rebecca Murphey opracowała Podstawowe wymagania dla Front-End web developerów, które są warte przeczytania zanim udamy się na rozmowę o pracę.

Uwaga: Pamiętaj, że wiele pytań jest otwartych, co prowadzi do ciekawych dyskusji, które powiedzą Ci więcej o możliwościach danej osoby, niż w przypadku prostej odpowiedzi.

Pierwotni autorzy

Większość pytań zaczerpnięto z wątku oksoclap stworzonego pierwotnie przez Paula Irisha (@paul_irish) i rozwijanego przez następujące osoby:

Pytania ogólne:

  • Czego nauczyłeś się wczoraj/w tym tygodniu?
  • Co pobudza lub interesuje cię w programowaniu?
  • Jakie jest Twoje preferowane środowisko programistyczne? (system operacyjny, edytor, przeglądarki, narzędzia itd.)
  • Opisz kolejne zadania podczas tworzenia strony internetowej?
  • Opisz różnicę między stopniowym ulepszaniem (progressive enhancement) i wdzięczną degradacją (graceful degradation)?
    • Dodatkowe punkty za opisanie wykrywania obsługi cech (feature detection)
  • Wyjaśnij, co kryje się za terminem “semantyczny HTML”.
  • Jak optymalizowałbyś zasoby strony internetowej?
    • Myśląc o wielu rozwiązaniach, które zawierają:
      • Łączenie plików
      • Zmniejszenie rozmiaru plików
      • Zasoby CDN
      • Buforowanie
      • itd.
  • Dlaczego serwowanie zasobów strony przez wiele domen jest lepsze?
    • Ile zasobów pobiera przeglądarka z danej domeny w jednej chwili?
  • Podaj 3 sposoby na zmniejszenie czasu ładowania strony. (postrzeganego lub rzeczywistego czasu ładowania)
  • Jeśli dołączasz do projektu, w którym używa się tabulacji, a ty używasz spacji, co wtedy zrobisz?
    • Sugerowanie użycia narzędzi w stylu EditorConfig (http://editorconfig.org)
    • Zgodnie z konwencjami (pozostań konsekwentny)
    • issue :retab! command
  • Napisz prosty pokaz slajdów
    • Dodatkowe punkty, jeśli nie używasz JS.
  • Jakich narzędzi używasz do sprawdzenia wydajności swojego kodu?
    • Profiler, JSPerf, Dromaeo
  • Gdybyś mógł opanować jedną technologię w tym roku, jaka byłaby to technologia?
  • Wyjaśnij znaczenie standardów sieciowych i ich twórców.
  • Czym jest FOUC? Jak unikasz FOUC?

Pytania HTML:

  • Co robi doctype i jakie znasz przykłady?
  • Jaka jest różnica między trybem standardów a trybem dziwactw (quirks mode)?
  • Jakie są ograniczenia w serwowaniu stron XHTML?
    • Czy istnieją problemy z serwowaniem stron jako application/xhtml+xml?
  • Jak serwujesz stronę z treścią w wielu językach?
    • Co jest ważne przy projektowaniu i tworzeniu stron wielojęzycznych?
  • Jaka jest przydatność atrybutów data-
  • Rozpatrujemy HTML5 jako otwartą platformę internetową. Jakie składniki tworzą HTML5?
  • Opisz różnice między cookies, sessionStorage i localStorage.

Pytania JS:

  • Wyjaśnij delegację zdarzeń.
  • Wyjaśnij jak działa this w JavaScripcie.
  • Wyjaśnij jak działa dziedziczenie prototypowe.
  • Jak radzisz sobie z testowaniem swojego kodu JavaScript?
  • AMD kontra CommonJS?
  • Czym jest tablica mieszająca (hashtable)?
  • Co oznaczają komunikaty undefined i undeclared dla zmiennych?
  • Czym są domknięcia, jak i po co są używane?
    • Ulubiony wzorzec używany do ich tworzenia? argyle (Dotyczy tylko IIFE)
  • Jakie znasz typowe użycie funkcji anonimowych?
  • Wyjaśnij pojęcie “Moduł JavaScript” i kiedy jest warte stosowania.
    • Dodatkowe punkty za wzmiankę na temat czystości przestrzeni nazw.
    • Co jeśli Twój kod nie używa przestrzeni nazw?
  • Jak organizujesz swój kod? (moduły, klasyczne dziedziczenie?)
  • Jaka jest różnicza między obiektami typu host i native?
  • Różnica między:
function Person(){} var person = Person() var person = new Person()
  • Jaka jest różnica między .call i .apply?
  • Wyjaśnij Function.prototype.bind?
  • Kiedy optymalizujesz swój kod?
  • Wyjaśnij działanie dziedziczenia w JavaScript?
  • Kiedy użyłbyś document.write()?
    • Wiele generowanych reklam używa document.write() choć nie jest to mile widziane
  • Jakie są różnice między wykrywaniem obsługi funkcji, wnioskowaniem obsługi funkcji i używaniem ciągu UA?
  • Omów AJAX jak najbardziej szczegółowo.
  • Wyjaśnij działanie JSONP (i dlaczego nie jest właściwie AJAX).
  • Czy kiedykolwiek używałeś szablonów w JavaScript?
    • Jeśli tak, jakie to były biblioteki? (Mustache.js, Handlebars itd.)
  • Wyjaśnij pojęcie “hoisting”.
  • Opisz bąbelkowanie zdarzeń.
  • Jak jest różnica między “atrybutem” i “właściwością”?
  • Czemu rozszerzanie obiektów wbudowanych w JavaScript jest złym pomysłem?
  • Czemu rozszerzanie to dobry pomysł?
  • Jak jest różnicą między zdarzeniami load i ready dla strony internetowej?
  • Jaka jest różnica między == i ===?
  • Wyjaśnij ewentualny sposób pobrania parametrów z adresu URL w oknie przeglądarki.
  • Wyjaśnij politykę same-origin w odniesieniu do JavaScript.
  • Opisz wzorce dziedziczenia w JavaScript.
  • Napisz działający kod:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Opisz strategię zapamiętywania (unikanie powtarzalnych obliczeń) w JavaScript.
  • Dlaczego mówimy wyrażenie trójkowe, co dokładnie oznacza słowo “trójkowy”?
  • Czym jest arity funkcji?
  • Co oznacza "use strict";? Jakie są zalety i wady takiego rozwiązania?

Przykłady kodu JS:

~~3.14

Pytanie: Jaka wartość zostanie zwrócona przez powyższe wyrażenie?
Odpowiedź: 3

"i'm a lasagna hog".split("").reverse().join("");

Pytanie: Jaka wartość zostanie zwrócona przez powyższe wyrażenie?
Odpowiedź: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Pytanie: Jaka jest wartość window.foo?
Odpowiedź: “bar”
tylko jeśli window.foo było fałszywe, w innym przypadku zwraca swoją wartość.

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Pytanie: Jaki będzie wyniki wywołania dwóch powyższych poleceń alert?
Odpowiedź: “Hello World” & ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

Pytanie: Jaka jest wartość foo.length?
**Odpowiedź: 2

var foo = {};
-foo.bar = 'hello';

Pytanie: Jaka jest wartość foo.length?
**Odpowiedź: undefined

Pytania jQuery:

  • Wyjaśnij termin “chaining”.
  • Wyjaśnij termin “deferreds”.
  • Jakie przykłady optymalizacji jQuery potrafisz wykonać?
  • Co robi .end()?
  • Jak i dlaczego użyjesz przestrzeni nazw przy obsłudze wiązania zdarzeń?
  • Podaj 4 różne wartości, jakie możesz przekazać do metody jQuery.
    • Selektor (string), HTML (string), funkcja zwrotna, HTMLElement, obiekt, tablica, element tablicy, obiekt jQuery itd.
  • Co to jest kolejka effects (lub fx)?
  • Jakie są różnice między .get(), [], i .eq()?
  • Jakie są różnice między .bind(), .live(), i .delegate()?
  • Jakie są różnice między $ i $.fn? Czym jest $.fn?
  • Zoptymalizuj selektor:
$(".foo div#bar:eq(0)")

Pytania CSS:

  • Opisz, czym jest plik “reset” dla CSS i dlaczego jest użyteczny.
  • Opisz jak działa właściwość float.
  • Jakie znasz techniki kasowania (clearing) i kiedy wskazane jest ich stosowanie?
  • Wyjaśnij technikę “CSS sprites” oraz sposób jej wdrożenia na stronie.
  • Jakie są Twoje ulubione techniki zastępowania obrazów i kiedy je stosujesz?
  • Haczyki właściwości CSS, warunkowe dołączanie plików .css lub… coś innego?
  • Jak serwujesz strony dla przeglądarek z ograniczonym wsparciem funkcji?
    • Jakie techniki stosujesz?
  • Jakie istnieją sposoby wizualnego ukrycia treści (uczynienia ich dostępnymi tylko dla czytników ekranu)?
  • Czy kiedykolwiek używałeś systemów siatek, a jeśli tak, to jakie preferujesz?
  • Czy używałeś ‘media queries’ lub tworzyłeś konkretne układy i arkusze dla urządzeń mobilnych?
  • Czy miałeś styczność ze stylizacją SVG?
  • Jak optymalizujesz swoje strony do druku?
  • Jakie stosujesz “sztuczki” przy pisaniu efektywnych CSS?
  • Czy używasz narzędzi do przetwarzania CSS? (SASS, Compass, Stylus, LESS)
    • Jeśli tak, opisz cechy, które lubisz i nie lubisz w używanych narzędziach.
  • Jak tworzysz i wdrażasz projekt używający niestandardowych czcionek?
    • Czcionki sieciowe (serwisy czcionek jak: Google Webfonts, Typekit itd.)
  • Wyjaśnij jak przeglądarka określa elementy pasujące do selektora CSS?

Pytania dodatkowe (zabawne):

  • Opowiedz o najfajniejszej rzeczy jaką kiedykolwiek zakodowałeś. Z czego jesteś najbardziej dumny?
  • Jakie są Twoje ulubione części narzędzi programistycznych, których używasz?
  • Czy masz jakiś swój własny projekt na boku? Jaki?
  • Jaka jest Twoja ulubiona funkcja w Internet Explorer?
Edit this page
\ No newline at end of file +foo.bar = 'hello';

Pytanie: Jaka jest wartość foo.length?
**Odpowiedź: undefined

Pytania jQuery:

$(".foo div#bar:eq(0)")

Pytania CSS:

Pytania dodatkowe (zabawne):

Edit this page
\ No newline at end of file diff --git a/translations/portuguese/index.html b/translations/portuguese/index.html index 5097cd0..9df0e1d 100644 --- a/translations/portuguese/index.html +++ b/translations/portuguese/index.html @@ -1,2 +1,2 @@ Perguntas para Entrevista de Desenvolvedor Front-End ★ Front-end Developer Interview Questions

Perguntas para Entrevista de Desenvolvedor Front-End

Índice

  1. Perguntas Gerais
  2. Perguntas sobre HTML
  3. Perguntas sobre CSS
  4. Perguntas sobre JS
  5. Perguntas sobre Testes
  6. Perguntas sobre Desempenho
  7. Perguntas sobre Rede
  8. Perguntas Divertidas

[⬆] Perguntas Gerais:

  • O que você aprendeu ontem/esta semana?
  • O que mais te interessa sobre programação?
  • Qual foi um desafio técnico recente que você enfrentou e como o resolveu?
  • Ao criar um novo site ou ao mantê-lo, pode explicar algumas técnicas que usou para aumentar o desempenho?
  • Pode descrever algumas boas práticas de SEO ou técnicas que usou recentemente?
  • Pode explicar algumas técnicas comuns ou problemas recentes resolvidos em relação à segurança de front-end?
  • Quais ações você tomou pessoalmente em projetos recentes para aumentar a manutenibilidade do seu código?
  • Fale sobre seu ambiente de desenvolvimento preferido.
  • Com quais sistemas de controle de versão você está familiarizado?
  • Pode descrever seu fluxo de trabalho ao criar uma página web?
  • Se você tiver 5 folhas de estilo diferentes, como integraria elas ao site da melhor forma?
  • Pode descrever a diferença entre aprimoramento progressivo e degradação graciosa?
  • Como você otimizaria os ativos/recursos de um site?
  • Quantos recursos um navegador baixará de um domínio específico de cada vez?
    • E quais são as exceções?
  • Cite 3 maneiras de diminuir o carregamento da página (tempo de carregamento percebido ou real).
  • Se você ingressasse em um projeto e eles usassem tabs e você usasse espaços, o que você faria?
  • Descreva como você criaria uma página de apresentação de slides simples.
  • Se você pudesse dominar uma tecnologia este ano, qual seria?
  • Explique a importância dos padrões e dos órgãos normativos.
  • O que é Flash de Conteúdo Não Estilizado? Como você evita o FOUC?
  • Explique o que são ARIA e leitores de tela, e como tornar um site acessível.
  • Explique alguns dos prós e contras das animações CSS versus animações JavaScript.
  • O que CORS significa e que problema ele aborda?
  • Como você lidou com um desacordo com seu chefe ou colaborador?
  • Quais recursos você usa para aprender sobre as últimas novidades em desenvolvimento e design de front-end?
  • Quais habilidades são necessárias para ser um bom desenvolvedor front-end?
  • Qual papel você vê para si mesmo?
  • Explique a diferença entre cookies, armazenamento de sessão e armazenamento local?
  • Você pode explicar o que acontece quando você insere uma URL no navegador?

[⬆] Perguntas sobre HTML:

  • O que um doctype faz?
  • Como você serve uma página com conteúdo em vários idiomas?
  • De que tipo de coisas você deve estar ciente ao projetar ou desenvolver para sites multilíngues?
  • Para que servem os atributos data-?
  • Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?
  • Descreva a diferença entre um cookie, sessionStorage e localStorage.
  • Descreva a diferença entre <script>, <script async> e <script defer>.
  • Por que geralmente é uma boa ideia posicionar os <link>s CSS entre <head></head> e os <script>s JS logo antes de </body>? Você conhece alguma exceção?
  • O que é renderização progressiva?
  • Por que você usaria um atributo srcset em uma tag de imagem? Explique o processo que o navegador usa ao avaliar o conteúdo desse atributo.
  • Você já usou diferentes linguagens de modelagem HTML antes?
  • Qual é a diferença entre canvas e svg?
  • O que são elementos vazios em HTML?

[⬆] Perguntas sobre CSS:

  • O que é especificidade do seletor CSS e como funciona?
  • Qual é a diferença entre “resetar” e “normalizar” o CSS? Qual você escolheria e por quê?
  • Descreva Floats e como eles funcionam.
  • Descreva z-index e como o contexto de empilhamento é formado.
  • Descreva BFC (Contexto de Formatação de Bloco) e como funciona.
  • Quais são as várias técnicas de limpeza e qual é apropriada para qual contexto?
  • Como você abordaria a correção de problemas de estilização específicos do navegador?
  • Como você serve suas páginas para navegadores com recursos limitados?
    • Quais técnicas ou processos você utiliza?
  • Quais são as diferentes maneiras de ocultar visualmente o conteúdo (e torná-lo disponível apenas para leitores de tela)?
  • Você já usou um sistema de grid e, se sim, qual você prefere?
  • Você já usou ou implementou media queries ou layouts/CSS específicos para dispositivos móveis?
  • Você está familiarizado com a estilização de SVG?
  • Você pode dar um exemplo de uma propriedade @media diferente de screen?
  • Quais são algumas das “pegadinhas” ao escrever CSS eficiente?
  • Quais são as vantagens/desvantagens de usar pré-processadores de CSS?
    • Descreva o que você gosta ou não gosta nos pré-processadores de CSS que você já utilizou.
  • Como você implementaria um comp de design web que usa fontes não padrão?
  • Explique como um navegador determina quais elementos correspondem a um seletor CSS.
  • Descreva o que são pseudo-elementos e explique para que são usados.
  • Explique sua compreensão do modelo de caixa e como você diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.
  • O que * { box-sizing: border-box; } faz? Quais são suas vantagens?
  • Qual é a propriedade display do CSS e você pode dar alguns exemplos de seu uso?
  • Qual é a diferença entre inline e inline-block?
  • Qual é a diferença entre os seletores “nth-of-type()” e “nth-child()”?
  • Qual é a diferença entre um elemento posicionado de forma relativa, fixa, absoluta e estática?
  • Quais frameworks CSS existentes você usou localmente ou em produção? Como você os mudaria/melhoraria?
  • Você já usou CSS Grid?
  • Você pode explicar a diferença entre codificar um site para ser responsivo versus usar uma estratégia mobile-first?
  • Você já trabalhou com gráficos retina? Se sim, quando e quais técnicas você usou?
  • Há alguma razão pela qual você gostaria de usar translate() em vez de posicionamento absoluto, ou vice-versa? E por quê?
  • Como a propriedade css clearfix é útil?
  • Você pode explicar a diferença entre px, em e rem em relação ao dimensionamento de fontes?
  • Você pode dar um exemplo de uma pseudo classe? Você pode fornecer um exemplo de uso para uma pseudo classe?
  • Qual é a diferença entre um elemento de nível de bloco e um elemento inline. Você pode fornecer exemplos de cada tipo de elemento?
  • Qual é a diferença entre CSS Grid e Flexbox? Quando você usaria um em vez do outro?

[⬆] Perguntas sobre JS:

  • Explique a delegação de eventos.
  • Explique como this funciona em JavaScript.
    • Você pode dar um exemplo de uma das maneiras que trabalhar com this mudou no ES6?
  • Explique como funciona a herança prototipal.
  • Qual é a diferença entre uma variável que é: null, undefined ou não declarada?
    • Como você procederia para verificar qualquer um desses estados?
  • O que é um fechamento (closure) e como/por que você usaria um?
  • Quais construções de linguagem você usa para iterar sobre propriedades de objetos e itens de array?
  • Você pode descrever a principal diferença entre o loop Array.forEach() e os métodos Array.map() e por que você escolheria um em vez do outro?
  • Qual é um caso de uso típico para funções anônimas?
  • Qual é a diferença entre objetos host e objetos nativos?
  • Explique a diferença entre: function Person(){}, var person = Person() e var person = new Person()?
  • Explique as diferenças no uso de foo entre function foo() {} e var foo = function() {}
  • Você pode explicar o que Function.call e Function.apply fazem? Qual é a diferença notável entre os dois?
  • Explique Function.prototype.bind.
  • Qual é a diferença entre detecção de recursos, inferência de recursos e uso da string UA?
  • Explique “hoisting”.
  • O que é coerção de tipo? Quais são as armadilhas comuns ao confiar na coerção de tipo no código JavaScript?
  • Descreva a propagação de eventos.
  • Descreva a captura de eventos.
  • Qual é a diferença entre um “atributo” e uma “propriedade”?
  • Quais são os prós e contras de estender objetos JavaScript integrados?
  • Qual é a diferença entre == e ===?
  • Explique a política de mesma origem em relação ao JavaScript.
  • Por que é chamado de operador Ternário, o que a palavra “Ternário” indica?
  • O que é o modo estrito? Quais são algumas das vantagens/desvantagens de usá-lo?
  • Quais são algumas das vantagens/desvantagens de escrever código JavaScript em uma linguagem que compila para JavaScript?
  • Quais ferramentas e técnicas você usa para depurar código JavaScript?
  • Explique a diferença entre objetos mutáveis e imutáveis.
    • Qual é um exemplo de um objeto imutável em JavaScript?
    • Quais são os prós e contras da imutabilidade?
    • Como você pode alcançar a imutabilidade em seu próprio código?
  • Explique a diferença entre funções síncronas e assíncronas.
  • O que é o loop de eventos?
    • Qual é a diferença entre pilha de chamadas (call stack) e fila de tarefas (task queue)?
  • Quais são as diferenças entre as variáveis criadas usando let, var ou const?
  • Quais são as diferenças entre a classe ES6 e os construtores de função ES5?
  • Você pode oferecer um caso de uso para a nova sintaxe de função de seta =>? Como essa nova sintaxe difere de outras funções?
  • Qual é a vantagem de usar a sintaxe de seta para um método em um construtor?
  • Qual é a definição de uma função de ordem superior?
  • Você pode dar um exemplo de desestruturação de um objeto ou de um array?
  • Você pode dar um exemplo de geração de uma string com Literais de Template ES6?
  • Você pode dar um exemplo de uma função curry e por que essa sintaxe oferece uma vantagem?
  • Quais são os benefícios de usar a sintaxe spread e como ela é diferente da sintaxe rest?
  • Como você pode compartilhar código entre arquivos?
  • Por que você pode querer criar membros de classe estáticos?
  • Qual é a diferença entre os loops while e do-while em JavaScript?
  • O que é uma promessa? Onde e como você usaria uma promessa?
  • Explique como você pode usar os princípios da Programação Orientada a Objetos ao codificar com JavaScript.

Coding questions

  • Faça isso funcionar:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Crie um loop for que itere até 100 enquanto produz “fizz” em múltiplos de 3, “buzz” em múltiplos de 5 e “fizzbuzz” em múltiplos de 3 e 5
  • O que será retornado por cada um destes?
console.log("hello" || "world")
-console.log("foo" && "bar")
  • Escreva uma função em JavaScript imediatamente invocada (IIFE)

[⬆] Perguntas sobre Testes:

  • Quais são algumas vantagens/desvantagens ao testar seu código?
  • Quais ferramentas você usaria para testar a funcionalidade do seu código?
  • Qual é a diferença entre um teste unitário e um teste funcional/integração?
  • Qual é o propósito de uma ferramenta de linting de estilo de código?
  • Quais são algumas das melhores práticas de teste?

[⬆] Perguntas sobre Desempenho:

  • Quais ferramentas você usaria para encontrar um bug de desempenho em seu código?
  • Quais são algumas maneiras de melhorar o desempenho de rolagem do seu site?
  • Explique a diferença entre layout, pintura e composição.

[⬆] Perguntas sobre Rede:

  • Tradicionalmente, por que tem sido melhor servir ativos do site a partir de vários domínios?
  • Descreva o processo desde o momento em que você digita a URL de um site até ele terminar de carregar na sua tela.
  • Quais são as diferenças entre Long-Polling, Websockets e Server-Sent Events?
  • Explique os seguintes cabeçalhos de solicitação e resposta:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Quais são os métodos HTTP? Liste todos os métodos HTTP que você conhece e explique-os.
  • O que é pré-busca de domínio e como isso ajuda no desempenho?
  • O que é uma CDN e qual é o benefício de usar uma?

[⬆] Perguntas Divertidas:

  • Qual é um projeto legal em que você trabalhou recentemente?
  • Quais são algumas coisas que você gosta nas ferramentas de desenvolvedor que você usa?
  • Quem te inspira na comunidade front-end?
  • Você tem algum projeto pessoal? De que tipo?
Edit this page
\ No newline at end of file +console.log("foo" && "bar")

[⬆] Perguntas sobre Testes:

[⬆] Perguntas sobre Desempenho:

[⬆] Perguntas sobre Rede:

[⬆] Perguntas Divertidas:

Edit this page
\ No newline at end of file diff --git a/translations/romanian/index.html b/translations/romanian/index.html index 8e54e1d..9680505 100644 --- a/translations/romanian/index.html +++ b/translations/romanian/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

[⬆] Întrebări amuzante:

[⬆] Contribuitori:

Acest document a început în 2009 ca o colaborare între
@paul_irish
@bentruyman
@cowboy
@ajpiano
@SlexAxton
@boazsender
@miketaylr
@vladikoff
@gf3
@jon_neal
@sambreed și
@iansym.

De atunci au contribuit mai mult de 100 de
persoane!

Edit this page
\ No newline at end of file +console.log('three');

[⬆] Întrebări amuzante:

[⬆] Contribuitori:

Acest document a început în 2009 ca o colaborare între
@paul_irish
@bentruyman
@cowboy
@ajpiano
@SlexAxton
@boazsender
@miketaylr
@vladikoff
@gf3
@jon_neal
@sambreed și
@iansym.

De atunci au contribuit mai mult de 100 de
persoane!

Edit this page
\ No newline at end of file diff --git a/translations/russian/index.html b/translations/russian/index.html index 54c4773..98d2c78 100644 --- a/translations/russian/index.html +++ b/translations/russian/index.html @@ -22,4 +22,4 @@ console.log< doSomething().then(doSomethingElse()); -doSomething().then(doSomethingElse);

[⬆] «Светская беседа»:

Edit this page
\ No newline at end of file +doSomething().then(doSomethingElse);

[⬆] «Светская беседа»:

Edit this page
\ No newline at end of file diff --git a/translations/serbian/index.html b/translations/serbian/index.html index 7416a8a..ea00d90 100644 --- a/translations/serbian/index.html +++ b/translations/serbian/index.html @@ -1,3 +1,3 @@ Intervju za posao Front-end Developer-a ★ Front-end Developer Interview Questions

Intervju za posao Front-end Developer-a

Intervju za posao Front-end Developer-a

@version 0.0.1

Ovaj repo sadrži mnogobrojna pitanja za intervju iz oblasti front-end develpment-a koja možete koristiti u proceni mogućih kandidata.
Ne preporučuje se korišćenje svih pitanja jer bi intervju trajao dugo. Izbor od nekoliko pitanja sa ove liste bi Vam pomogao.

Pre intevjua, preporučujemo da proučite članak: Rebecca Murphey Baseline For Front-End Developers.

Napomena: Uzmite u obzir da veliki broj dole navedenih pitanja može biti korisna tema za razgovor koja će Vam možda reći vise o sposobnostima osobe nego direktni odgovori.

Autori originalne liste

Većina pitanja je preuzeta sa oksoclap tj. rasprave koju je originalno pokrenuo Paul Irish (@paul_irish) i kojoj su doprineli:

Opšta pitanja:

  • Opišite Vaš omiljeni radni prostor. (OS, Editor, Browseri, Alati itd.)
  • Opišite Vaš proces izrade web stranice?
  • Možete li opisati razliku između progresivnog poboljšanja i neprimjetne degradacije?
    • Bonus bodovi ako se opiše detektovanje mogućnosti browsera
  • Objasnite šta je to “Semantički HTML”.
  • Kako biste optimizirali infrastrukturu i resurse web stranice?
    • Traže se više rešenja, na primer:
      • Spajanje datoteka
      • Minifikacija datoteka
      • Korišćenje CDN-a
      • Keširanje (Caching)
      • itd.
  • Zbog čega je bolje preuzimati delove stranice sa više domena?
    • Koliko resursa browser može preuzeti istovremeno sa jednog domena?
  • Navedite tri načina za smanjivanje vremena učitavanja strane. (uočeno ili stvarno vrieme učitavanja)
  • Ako bi došli na projekt gde se koriste tabovi a Vi koristite razmake, šta biste uradili?
    • Preporučili korištenja EditorConfig-a (http://editorconfig.org)
    • Prilagodili se postojećoj praksi (zadržavanje konzistentnosti)
    • koristili :retab! naredbu
  • Napravite jednostavnu stranicu za prezentacije
    • Bonus bodovi ako se ne koristi JavaScript.
  • Koje alate koristite za testiranje performansi koda?
    • Profiler, JSPerf, Dromaeo
  • Kada bi ste odabrati jednu tehologiju koju ćete naučiti ove godine, koja bi to bila?
  • Objasnite važnost standarda i organizacija za standardizaciju
  • Šta je to FOUC? Kako možete izbeći FOUC?

HTML pitanja:

  • Koja je funkcija doctype?
  • Koja je razlika između standardnog i quirks moda?
  • Koja su ograničenja u obsluživanju XHTML standarda?
    • Postoje li problemi kod obsluživanju stranica sa header-om application/xhtml+xml?
  • Kako biste obslužili stranicu sa višejezičnim sadržajem?
    • Na što morate obratit pažnju prilikom dizajna ili razvoja višejezične stranicu?
  • Čemu služe data- atributi?
  • Posmatrajte HTML5 kao platformu otvorenog koda. Koji su gradivni elementi HTML-a 5?
  • Objasnite razliku između kolačića, podataka sesije (sessionStorage) i lokalnog snimanja.

CSS pitanja:

  • Objasnite čemu služi “reset” CSS i zašto je koristan.
  • Opišite šta su i kako rade Float-ovi.
  • Koje su tehnike clearing-a i u kojim slučajevima bi ste ih koristili?
  • Objasnite CSS sprite-ove i kako se koriste na stranici ili site-u.
  • Koje su Vaše omiljene tehnike zamene slike i kada ih koristite?
  • Koje su Vaše omiljene tehnike: CSS hack-ovi property-a, kondicionalno uključivanje .css datoteka, ili … nešto drugo?
  • Kako obslužujete sadržaj za browser-e slabijih mogućnosti?
    • Koje tehnike/procese koristite?
  • Koji su mogući načini za vizualno sakrivanje sadržaja (vidljivi su samo za screen reader-e)?
  • Da li ste ikada koristili grid system, i ako jeste koji Vam je omiljeni?
  • Da li ste koristili ili implementirali media querie-je ili layout/CSS specifične za mobilne?
  • Imate li iskustva u stilizovanju SVG slika?
  • Kako prilagođavate stranicu za štampu?
  • Šta se podrazumeva pod dobrom praksom za pisanje efikasnog CSS-a?
  • Koje su prednosti/nedostatci korišćenja CSS pred-procesora? (SASS, Compass, Stylus, LESS)
    • Opišite što vam se sviđa ili ne sviđa kod CSS pred-procesora koje ste koristili.
  • Objasnite kako bi ste napravili stranicu čiji dizajn ne koristi standardne fontove?
    • Webfont-ovi (font servisi poput: Google Webfonts, Typekit itd.)
  • Objasnite kako browser utvrđuje koji elementi odgovaraju CSS selector-u.
  • Objasnite Vaše razumevanje “box model”-a i na koji način bi ste naveli browser da prikaže (render) izgled vaše strane?

JavaScript pitanja:

  • Objasnite delegaciju događaja
  • Objasnite kako se u Javascriptu koristi this
  • Objasnite nasleđivanje prototype-a
  • Kako testirate JavaScript?
  • AMD ili CommonJS?
  • Šta je to hash tabela?
  • Objasnite zašto sledeća funkcija neće raditi kao IIFE: function foo(){ }();?
    • Šta treba izmeniti da bi radila kao IIFE?
  • U čemu je razlika između null, undefined i undeclared?
    • Kako bi ste promenili ova stanja?
  • Šta je closure, kako i zašto se koristi?
  • Koja je uobičajena primena anonimne funkcije?
  • Objasnite “JavaScript module pattern” i kada biste ga koristili.
    • Bonus bodovi za predlog namespacing-a
    • Šta ako su moduli bez namespacing-a?
  • Kako organizujete Vaš kod? (module pattern, klasično nasleđivanje?)
  • Koja je razlika između host i native objekta?
  • Koja je razlika između function Person(){}, var person = Person(), i var person = new Person()?
  • Koja je razlika između .call i .apply?
  • Objasnite Function.prototype.bind
  • Kada optimizirate Vaš kod?
  • Možete li objasniti nasleđivanje u JavaScriptu?
  • Kada koristite document.write()?
    • Većina oglasa još uvijek koristi document.write() iako se to ne preporučuje.
  • Koja je razlika između detekcije mogućnosti (feature detection), pretpostavljanje mogućnosti (feature inference) i korišćenja UA string-a?
  • Objasnite AJAX sa što više detalja
  • Objasnite kako radi JSONP (i u čemu se razlikuje od pravog AJAX-a)
  • Da li ste ikad koristili JavaScript template?
    • Ako da, koje ste koristili? (Mustache.js, Handlebars etc.)
  • Objasnite “hoisting”.
  • Objasnite propagaciju događaja (event bubbling).
  • Koja je razlika između “attribute”-a i “property”-a?
  • Zašto proširivanje ugrađenih JavaScript objekata nije najbolja ideja?
  • Zašto je proširivanje ugrađenih JavaScript objekata dobra ideja?
  • Koja je razlika između document load i document ready događaja?
  • Koja je razlika između == i ===?
  • Objasnite kako bi ste pročitali parametar URL adrese
  • Objasnite pravilo jednog izvora gledano sa staništa JavaScript-a.
  • Opišite načine nasleđivanja u JavaScript-u.
  • Popravite: [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Objasnite memoization strategiju (izbegavanje ponavljanja računanja) u Javascript-u.
  • Zašto se Ternarni operator zove Ternarni?
  • Šta je arity funkcije?
  • Šta radi "use strict";? Koje su mane, koje prednosti?

jQuery pitanja:

  • Objasnite “chaining”.
  • Objasnite “deferreds”.
  • Navedite koje optimizacije korišćenja jQuery-a znate?
  • Čemu služi .end() ?
  • Kada i zašto bi vezani (bound) događaj stavili u namespace?
  • Navedite četri vrednosti koje možete poslati jQuery metodu.
    • Selektor (string), HTML (string), Callback (funkcija), HTMLElement, object, array, element array, jQuery Object itd.
  • Čemu služi red efekata (fx)?
  • Koja je razlika između .get(),[], i.eq()`?
  • Koja je razlika između .bind(),.live(), i.delegate()`?
  • Koja je razlika između $ i $.fn? Ili samo što je $.fn.
  • Optimirajte selektor: $(".foo div#bar:eq(0)")
  • Razlika između ‘delegate()’ i ‘live()’?

Kod vežbe:

modulo(12, 5) // 2

Pitanje: Napišite modulo funkciju koja daje rezultat prikazan iznad

"i'm a lasagna hog".split("").reverse().join("");

Pitanje: Šta će biti vraćeno iz funkcije prikazane iznad?

Odgovor: “goh angasal a m’i”

( window.foo || ( window.foo = "bar" ) );

Pitanje: Koja je vrednost window.foo?

Odgovor: “bar”

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Pitanje: Šta će se desiti kao rezultat 2 alerta iznad?

Odgovor: “Hello World” i ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Pitanje: Koja je vrednost foo.length?

Odgovor: 2

Zanimljiva pitanja:

  • Šta je najzanimljivije što ste napravili do sad? na čemu ste najponosniji?
  • Šta Vam je najinteresantnije u alatima koje koristite za rad?
  • Imate li neke hobi projekte? Koje?
  • Šta Vam se najviše sviđa kod Internet Explorer?

Dodatni clanci

Edit this page
\ No newline at end of file +foo.push(2);

Pitanje: Koja je vrednost foo.length?

Odgovor: 2

Zanimljiva pitanja:

Dodatni clanci

Edit this page
\ No newline at end of file diff --git a/translations/slovakian/index.html b/translations/slovakian/index.html index 377324c..9daf475 100644 --- a/translations/slovakian/index.html +++ b/translations/slovakian/index.html @@ -9,4 +9,4 @@ alert(foo + bar);

Otázka: Čo zobrazia uvedené dva alerty?

Odpoveď: “Hello World” a ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
-foo.push(2);

Otázka: Aká je hodnota foo.length?

Odpoveď: 2

[⬆] Zábavné otázky:

[⬆] Ďalšie zaujímavé referencie:

Edit this page
\ No newline at end of file +foo.push(2);

Otázka: Aká je hodnota foo.length?

Odpoveď: 2

[⬆] Zábavné otázky:

[⬆] Ďalšie zaujímavé referencie:

Edit this page
\ No newline at end of file diff --git a/translations/slovenian/index.html b/translations/slovenian/index.html index b9dc295..8dac4e6 100644 --- a/translations/slovenian/index.html +++ b/translations/slovenian/index.html @@ -2,4 +2,4 @@ foo.push(1); foo.push(2);

Vprašanje: Kaj je vrednost od foo.length?
**Odgovor: 2

var foo = {};
 foo.bar = 'hello';

Vprašanje: Kaj je vrednost od foo.length?
**Answer: undefined

foo = foo||bar

Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek?
*Odgovor: if(!foo) foo = bar

foo>>1

Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek?
**Odgovor: Math.floor(foo/2)

foo|0
-foo+.5|0

Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek?
**Odgovor: parseInt(foo) & Math.round(foo)

function foo(bar1, bar2, bar3){}

Vprašanje: Kako dobiti število paremetrov podanih v funkcijo?
**Odgovor: foo.length // 3 za ta primer

jQuery vprašanja:

$(".foo div#bar:eq(0)")

CSS vprašanja:

Opcijska zabavna vprašanja:

Edit this page
\ No newline at end of file +foo+.5|0

Vprašanje: Kako bi lahko drugače napisal/a zgornji stavek?
**Odgovor: parseInt(foo) & Math.round(foo)

function foo(bar1, bar2, bar3){}

Vprašanje: Kako dobiti število paremetrov podanih v funkcijo?
**Odgovor: foo.length // 3 za ta primer

jQuery vprašanja:

$(".foo div#bar:eq(0)")

CSS vprašanja:

Opcijska zabavna vprašanja:

Edit this page
\ No newline at end of file diff --git a/translations/spanish/index.html b/translations/spanish/index.html index a7134f6..e2b7c3b 100644 --- a/translations/spanish/index.html +++ b/translations/spanish/index.html @@ -1,2 +1,2 @@ GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Developer Interview Questions

GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO

GUÍA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO

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.

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.

Índice

  1. Preguntas generales
  2. Preguntas específicas de HTML
  3. Preguntas específicas de CSS
  4. Preguntas específicas de JavaScript
  5. Preguntas de código
  6. Preguntas sobre pruebas de código
  7. Preguntas sobre rendimiento
  8. Preguntas sobre conectividad
  9. Preguntas divertidas

Contribuyendo

  1. Contribuyentes
  2. Cómo contribuir
  3. Licencia

Preguntas generales:

  • ¿Qué aprendió ayer/esta semana?
  • ¿Qué es lo que le entusiasma o le interesa de la programación?
  • ¿Podría describir algún problema técnico que haya resuelto recientemente y cómo lo resolvió?
  • ¿Podría describir algunas técnicas que haya utilizado al momento de construir un nuevo sitio web o dar mantenimiento a uno existente para incrementar su rendimiento?
  • ¿Podría explicar algunas prácticas o técnicas de SEO que haya utilizado recientemente?
  • ¿Qué puede decir acerca de técnicas comunes o problemas que haya resuelto recientemente respecto a la seguridad de aplicaciones front-end?
  • ¿Qué acciones ha realizado en proyectos recientes para mejorar la manteniabilidad de su código?
  • Hable acerca de tu ambiente de desarrollo preferido.
  • ¿Puede describir el proceso que sigue cuando crea una página web?
  • ¿Qué sistemas de control de versiones ha utilizado?
  • ¿Podría describir el proceso que sigue cuando creas una página web?
  • Si tuviera cinco hojas de estilo distintas, ¿cómo las integraría a su página web?
  • ¿Puede describir la diferencia entre “Progressive Enhancement” y “Graceful Degradation”?
  • ¿Cómo optimizaría los recursos de un sitio web?
  • ¿Cuántos recursos se pueden descargar simultáneamente de un mismo dominio?
  • ¿Cuáles son las excepciones?
  • Mencione tres formas para disminuir el tiempo de carga de una página (tiempo real o percibido).
  • Si se ha unido a un proyecto y los desarrolladores usan tabs y usted usa espacios, ¿qué hace?
  • Describa como elaboraría una página con una galería sencilla.
  • Si pudiera elegir una tecnología para dominar este año, ¿cuál sería?
  • Explique la importancia de estándares y los grupos que los definen.
  • ¿Sabe que es el Flash Of Unstyled Content?, ¿cómo lo evita?
  • Explique qué son las Aplicaciones de internet enriquecidas y accesibles y los lectores de pantalla, además de cómo hacer una página web accesible
  • Explique las ventajas y desventajas de usar animaciones en CSS en comparación con animaciones hechas con JavaScript.
  • ¿Qué significa CORS y a qué problema está relacionado?
  • ¿Cómo manejaría una discrepancia con su jefe o compañero de trabajo?
  • ¿Qué recursos usa para aprender acerca de las últimas novedades en desarrollo web y diseño?
  • ¿Cuáles cree que son las habilidades necesarias para ser un buen desarrollador front-end?
  • ¿En qué rol le gustaría desempeñarse?
  • Explique la diferencia entre cookies, session storage y local storage.
  • ¿Podría explicar qué sucede cuando ingresa una URL en el navegador?
  • ¿Cuál es la diferencia entre SSR y CSR? Hable acerca de los pros y contras de cada uno.
  • ¿Está familiarizado con el concepto de Static Rendering?
  • ¿Qué puede decir acerca de la re-hidratación?

Preguntas específicas de HTML:

  • ¿Qué función cumple el doctype?
  • ¿Cómo distribuiría una página con contenido en varios lenguajes?
  • ¿Qué consideraciones se deben tener cuando se diseñan/desarrollan sitios multi-lenguajes?
  • ¿Para qué son buenos los atributos data-?
  • Si consideramos HTML5 como una plataforma web abierta, ¿cuáles son los componentes que constituyen HTML5?
  • Describa la diferencia entre cookies, sessionStorage y localStorage.
  • Describa la diferencia entre <script>, <script async> y <script defer>.
  • Generalmente, ¿por qué es una buena idea agregar la etiqueta <link> dentro de la etiqueta <head> y la etiqueta <script> justo antes de cerrar la etiqueta <body>. ¿Conoces algún caso excepcional?
  • ¿Qué es el renderizado progresivo?
  • ¿Por qué usaría el atributo srcset en una imagen? Explique el proceso que sigue el navegador al evaluar el contenido de este atributo.
  • ¿Ha usado algún lenguaje de plantillas HTML?
  • ¿Cuál es la diferencia entre los elementos canvas y svg?
  • ¿Qué son los elementos vacíos en HTML?

Preguntas específicas de CSS:

  • ¿Qué es la especificidad de los selectores CSS y cómo funciona?
  • ¿Cuál es la diferencia entre normalizar y resetear el CSS?, ¿Cuál elegiría y por qué?
  • Describa qué son los “floats” y su funcionamiento.
  • Describa el z-index y como se decide el contexto de apilado de elementos.
  • Describa el contexto de formato de bloques (BFC) y como funciona.
  • ¿Cuáles son las técnicas para usar la propiedad clear y en qué contexto es apropiado utilizar cada una?
  • ¿Cuál es su enfoque al desarrollar páginas que dan soporte a navegadores con capacidades limitadas?
  • ¿Qué técnicas o procesos utiliza?
  • ¿Cuáles son las distintas formas para esconder contenido, pero mantenerlo disponible únicamente para lectores de pantalla?
  • ¿Ha usado algún sistema para cuadrículas (grids) y cuál prefiere?
  • ¿Ha usado o implementado “media queries” o reglas específicas para dispositivos móviles?
  • ¿Está familiarizado con aplicar estilos a SVGs?
  • ¿Podría dar un ejemplo de una propiedad @media distinta a screen?
  • ¿Cuáles son algunos de los “trucos” para escribir CSS eficiente?
  • ¿Cuáles son las ventajas y desventajas de utilizar pre-procesadores CSS?
  • Mencione lo que le agrada y desagrada de los pre-procesadores que ha usado.
  • ¿Cómo implementaría un diseño que usa fuentes que no son web-safe?
  • ¿Puede explicar cómo determina un navegador qué elementos coinciden con un selector de CSS?
  • Describa los pseudo-elementos y discuta sus usos.
  • ¿Puede explicar cómo entiende el box model (modelo de cajas) y como podría, mediante CSS, hacer que un navegador renderize su esquema usando diferentes modelos de cajas?
  • ¿Qué sucede al usar * {box-sizing: border-box;}. ¿Qué desventajas supone su uso?
  • ¿Qué es la propiedad display de CSS? ¿Podría dar algunos ejemplos de su uso?
  • ¿Cuál es la diferencia entre inline y inline-block?
  • ¿Cuál es la diferencia entre los selectores nth-of-type() y nth-child()?
  • ¿Cuál es la diferencia entre las posiciones relative, fixed, absolute y static para un elemento dado?
  • ¿Cuáles frameworks de CSS has usado en desarrollo o producción? ¿Cómo los mejoraría?
  • ¿Ha utilizado CSS Grid?
  • ¿Podría explicar la diferencia entre desarrollar un sitio web para ser responsive y utilizar una estrategia mobile-first?
  • ¿Ha trabajado con tecnología retina?, ¿qué técnicas utilizó?
  • ¿Hay alguna razón por la cual preferiría usar translate() en vez de el posicionamiento absoluto? ¿Alguna razón para hacer lo contrario?
  • ¿En qué casos es útil la propiedad clearfix de css?
  • ¿Cuál es ls diferencia entre usar px, em o rem para definir tamaños de fuente?
  • ¿Podría dar un ejemplo de una pseudo-clase de CSS y un posible caso de uso?
  • ¿Cuál es la diferencia entre un elemento a nivel de bloque y un elemento en línea? Mencione algunos ejemplos de cada tipo de elemento.
  • ¿Cuál es la diferencia entre CSS Grid y Flexbox? ¿En qué casos preferiría usar uno sobre el otro?

Preguntas específicas de JavaScript:

  • Explique el “event delegation”.
  • Explique cómo funciona this en JavaScript.
  • ¿Puede dar un ejemplo de una de las maneras en que trabajar con this ha cambiado desde ES6?
  • Explique cómo funciona la herencia de prototipos (prototypal inheritance) en JavaScript.
  • ¿Cuál es la diferencia entre variables null, undefined y undeclared?
  • ¿Cómo comprobarías que una variable refiere a alguno de esos valores?
  • ¿Qué es un “closure” y cuando, o por qué usaría uno?
  • ¿Qué características del lenguaje puede utilizar para iterar sobre propiedades de un objeto y elementos de un arreglo?
  • ¿Podría describir cuál es la principal diferencia entre el ciclo Array.forEach() y el método Array.map() y por qué elegiría uno sobre el otro?
  • ¿Puede hablar de un uso típico para una función anónima?
  • ¿Cuál es la diferencia entre objetos huésped (host objects) y objetos nativos?
  • ¿Cuál es la diferencia entre: function Person(){}, var person = Person() y var person = new Person()?
  • Esplique las diferencias entre el uso de foo en function foo(){} y var foo = function(){}.
  • ¿Qué hacen Function.call y Function.apply? ¿Cuál es la diferencia más notable entre las dos?
  • ¿Puede explicar el uso de Function.prototype.bind?
  • ¿Cuál es la diferencia entre detección de capacidades, inferencia de capacidades y usar la cadena del user agent?.
  • ¿Puede explicar en qué consiste el “hoisting”?
  • ¿Qué es la coerción de tipos? ¿Cuáles son los errores más comunes al utilizarla en JavaScript?
  • ¿Puede hablar sobre “event bubbling”?
  • Describa qué es "event capturing".
  • ¿Cuál es la diferencia entre un atributo y una propiedad?
  • ¿Cuáles son los pros y contras de extender objetos nativos de JavaScript?
  • ¿Cuál es la diferencia entre == y ===?
  • Explique la política de mismo origen (same-origin policy) y sus repercusiones en JavaScript.
  • ¿Por qué reciben el nombre de sentencias ternarias? ¿Qué significa la palabra “ternaria”?
  • ¿Qué es "use strict";? ¿Cuáles son las ventajas y desventajas de usarlo?
  • Mencione las ventajas y desventajas de escribir Javascript a través de otro lenguaje que transpile a Javascript.
  • ¿Qué herramientas y técnicas usa para depurar código Javascript?
  • Explique la diferencia entre objetos mutables y objetos inmutables.
  • Mencione un ejemplo de un objeto inmutable en javascript.
  • Mencione las ventajas y desventajas de la inmutabilidad.
  • ¿Cómo puede usar la inmutabilidad en su código?
  • Explique la diferencia entre funciones síncronas y asíncronas.
  • ¿Qué es el event loop?
  • ¿Cuál es la diferencia entre la pila de llamadas y la cola de tareas?
  • ¿Cuáles son las diferencias entre variables declaradas usando let, var o const?
  • ¿Cuáles son las diferencias entre los constructores de clases de ES6 y los constructores de funciones de ES5?
  • ¿Podría mencionar un caso de uso para la nueva sintaxis de funciones flecha (“arrow functions”) =>? ¿Qué diferencia tiene respecto a las funciones tradicionales?
  • ¿Qué ventaja tiene utilizar la sintaxis de funciones flecha (“arrow functions”) para un método en un constructor?
  • Defina qué es una función de orden superior (“higher order function”).
  • ¿Podría dar un ejemplo de desestructuración (“destructuring”) de un objeto o arreglo?
  • ¿Cómo se puede generar un string con los template literals de ES6?
  • ¿Podría dar un ejemplo de una función curry? ¿Qué ventajas tiene usarla?
  • ¿Cuáles son los beneficios de usar el operador spread y cómo se diferencia del operador rest?
  • ¿De qué manera puede compartir código entre archivos?
  • ¿Por qué necesitaría crear un miembro estático en una clase?
  • ¿Cuál es la diferencia entre los ciclos while y do-while en JavaScript?
  • ¿Qué es una promesa? ¿En qué casos y cómo usaría una?
  • ¿Cómo podría utilizar los principios de la programación orientada a objetos en JavaScript?

Preguntas sobre código:

  • Haga que este código funcione:
duplicate([1,2,3,4,5]) // [1,2,3,4,5,1,2,3,4,5]
  • Haga un ciclo for de 100 iteraciones que imprima “fizz” en los múltiplos de 3, “buzz” en los múltiplos de 5 y “fizzbuzz” en los múltiplos de 3 y 5
  • ¿Cuál será el retorno de cada uno de los siguientes códigos?
console.log("hello" || "world")
-console.log("foo" && "bar")
  • Escriba una función auto-invocada (“IIFE”)

Preguntas sobre pruebas de código:

  • Menciona ventajas y desventajas de realizar pruebas en el código
  • ¿Qué herramientas usarías para probar la funcionalidad de tu código?
  • ¿Cuál es la diferencia entre una prueba unitaria y una prueba funcional o de integración?
  • ¿Cuál es el propósito de usar herramientas para verificar los estilos usados en el código?
  • ¿Cuáles son algunas de las mejores prácticas al realizar pruebas?

Preguntas sobre rendimiento:

  • ¿Qué herramientas usarías para detectar un error en el rendimiento de tu código?
  • ¿De qué formas podrías mejorar el rendimiento del scrolling en tu sitio web?
  • Menciona las diferencias entre los términos layout, painting y compositing.

Preguntas sobre redes:

  • Tradicionalmente, ¿Por qué es mejor servir los recursos estáticos del sitio desde múltiples dominios?
  • Intenta explicar el proceso desde el momento en el cual ingresas una URL en el navegador hasta que termina de cargar la página en tu pantalla.
  • ¿Cuáles son las diferencias entre Long-polling, websockets y server-sent events?
  • Explique las siguientes cabeceras de peticiones y respuestas:
  • Diferencias entre Expires, Date, Age y If-Modified-…
  • Do Not Track
  • Cache-Control
  • Transfer-Encoding
  • Etag
  • X-Frame-Options
  • ¿Qué son los métodos HTTP? Mencione y explique los que conozca.
  • ¿Qué es el “pre-fetching” de dominio y cómo contribuye al rendimiento de una página web?
  • ¿Qué es un CDN y cuáles son los beneficios de usar uno?

Preguntas divertidas:

  • ¿Qué es lo más genial que ha programado y qué es lo que más le enorgullece de ello?
  • ¿Cuáles son sus características favoritas de las herramientas de desarrollo que usa?
  • ¿Quién le inspira en la industria de desarrollo web?
  • ¿Tiene algún proyecto personal? ¿De qué se trata?

Contribuyentes

Este documento se creó en 2009 como una colaboración de @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed y @iansym.

Ha recibido contribuciones de 100 desarrolladores.

Edit this page
\ No newline at end of file +console.log("foo" && "bar")

Preguntas sobre pruebas de código:

Preguntas sobre rendimiento:

Preguntas sobre redes:

Preguntas divertidas:

Contribuyentes

Este documento se creó en 2009 como una colaboración de @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed y @iansym.

Ha recibido contribuciones de 100 desarrolladores.

Edit this page
\ No newline at end of file diff --git a/translations/swedish/index.html b/translations/swedish/index.html index ca2637c..3c6f42f 100644 --- a/translations/swedish/index.html +++ b/translations/swedish/index.html @@ -8,4 +8,4 @@ foo.push(1); foo.push(2);

Fråga: Vad är värdet av foo.x?

var foo = {n: 1};
 var bar = foo;
-foo.x = foo = {n: 2};

Roliga frågor:

Bidragande skribenter:

Det här dokumentet startades 2009 som ett samarbete mellan @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed och @iansym.

Det har sedan dess fått bidrag från över 100 utvecklare.

Edit this page
\ No newline at end of file +foo.x = foo = {n: 2};

Roliga frågor:

Bidragande skribenter:

Det här dokumentet startades 2009 som ett samarbete mellan @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed och @iansym.

Det har sedan dess fått bidrag från över 100 utvecklare.

Edit this page
\ No newline at end of file diff --git a/translations/turkish/index.html b/translations/turkish/index.html index e65dfe4..f96a2b2 100644 --- a/translations/turkish/index.html +++ b/translations/turkish/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

Eğlenceli Sorular:

Katılımcılar:

Bu proje 2009 yılında bu katılımcılarla başladı: @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

Bu projenin bakımı şu anda aşağıdaki kişiler tarafından yapılmaktadır:

O zamandan beri bu inanılmaz derecede harika insanlar sayesinde etkin durumda.

İlham mı geldi? Katkı sağlamak için Katılım rehberimizi inceleyin!

Edit this page
\ No newline at end of file +console.log('three');

Eğlenceli Sorular:

Katılımcılar:

Bu proje 2009 yılında bu katılımcılarla başladı: @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed and @iansym.

Bu projenin bakımı şu anda aşağıdaki kişiler tarafından yapılmaktadır:

O zamandan beri bu inanılmaz derecede harika insanlar sayesinde etkin durumda.

İlham mı geldi? Katkı sağlamak için Katılım rehberimizi inceleyin!

Edit this page
\ No newline at end of file diff --git a/translations/ukrainian/index.html b/translations/ukrainian/index.html index d862c5b..e5ec163 100644 --- a/translations/ukrainian/index.html +++ b/translations/ukrainian/index.html @@ -9,4 +9,4 @@ alert(foo + bar);

Питання: Що покажуть ці два alert?
Відповідь: “Hello World” и ReferenceError: bar is not defined

var foo = [];
 foo.push(1);
 foo.push(2);

Питання: Чому дорівнює foo.length?
Відповідь: 2

var foo = {};
-foo.bar = 'hello';

Питання: Чому дорівнює foo.length?
Відповідь: undefined

⬆ Запитання по jQuery:

$(".foo div#bar:eq(0)")

⬆ Запитання по CSS:

⬆ “Світська бесіда”:

Edit this page
\ No newline at end of file +foo.bar = 'hello';

Питання: Чому дорівнює foo.length?
Відповідь: undefined

⬆ Запитання по jQuery:

$(".foo div#bar:eq(0)")

⬆ Запитання по CSS:

⬆ “Світська бесіда”:

Edit this page
\ No newline at end of file diff --git a/translations/vietnamese/index.html b/translations/vietnamese/index.html index fe095ef..6c9e6bc 100644 --- a/translations/vietnamese/index.html +++ b/translations/vietnamese/index.html @@ -12,4 +12,4 @@ foo.x =setTimeout(function() { console.log('two'); }, 0); -console.log('three');

Các câu hỏi vui:

Những người đóng góp:

Tài liệu này được khởi đầu vào năm 2009 như là một sự cộng tác của @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed và @iansym.

Đã nhận được sự đóng góp từ hơn 100 developers.

Edit this page
\ No newline at end of file +console.log('three');

Các câu hỏi vui:

Những người đóng góp:

Tài liệu này được khởi đầu vào năm 2009 như là một sự cộng tác của @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed và @iansym.

Đã nhận được sự đóng góp từ hơn 100 developers.

Edit this page
\ No newline at end of file