From 1702954a5c8e7d364d133fdd5ecd0b3d9148e160 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Sun, 2 Dec 2018 21:44:49 -0200 Subject: [PATCH] fix wrong paths in gh-pages --- _site/404.html | 2 +- _site/about/index.html | 2 +- _site/index.html | 2 +- _site/questions/coding-questions/index.html | 2 +- _site/questions/css-questions/index.html | 2 +- _site/questions/fun-questions/index.html | 2 +- _site/questions/general-questions/index.html | 2 +- _site/questions/html-questions/index.html | 2 +- .../questions/javascript-questions/index.html | 2 +- _site/questions/network-questions/index.html | 2 +- .../performance-questions/index.html | 2 +- _site/questions/testing-questions/index.html | 2 +- _site/sitemap.xml | 180 +++++++++--------- _site/translations/arabic/index.html | 2 +- _site/translations/bulgarian/index.html | 2 +- _site/translations/burmese/index.html | 2 +- .../chinese-traditional/index.html | 2 +- _site/translations/chinese/index.html | 2 +- _site/translations/croatian/index.html | 2 +- _site/translations/czech/index.html | 2 +- _site/translations/danish/index.html | 2 +- _site/translations/dutch/index.html | 2 +- _site/translations/farsi/index.html | 2 +- _site/translations/french/index.html | 2 +- _site/translations/german/index.html | 2 +- _site/translations/greek/index.html | 2 +- _site/translations/hebrew/index.html | 4 +- _site/translations/hungarian/index.html | 2 +- _site/translations/index.html | 2 +- _site/translations/indonesian/index.html | 2 +- _site/translations/italian/index.html | 2 +- _site/translations/japanese/index.html | 2 +- _site/translations/korean/index.html | 2 +- _site/translations/korean/reference.html | 4 +- _site/translations/latvian/index.html | 2 +- _site/translations/polish/index.html | 2 +- _site/translations/portuguese/index.html | 2 +- _site/translations/romanian/index.html | 2 +- _site/translations/russian/index.html | 2 +- _site/translations/serbian/index.html | 2 +- _site/translations/slovakian/index.html | 2 +- _site/translations/slovenian/index.html | 2 +- _site/translations/spanish/index.html | 2 +- _site/translations/swedish/index.html | 2 +- _site/translations/turkish/index.html | 2 +- _site/translations/ukrainian/index.html | 2 +- _site/translations/vietnamese/index.html | 2 +- config/eleventy.config.js | 2 +- package.json | 4 +- src/_includes/assets/css/header.css | 2 +- src/_includes/components/footer.njk | 2 +- src/_includes/components/navigation.njk | 6 +- src/_includes/layouts/default.njk | 9 +- src/index.njk | 2 +- 54 files changed, 151 insertions(+), 152 deletions(-) diff --git a/_site/404.html b/_site/404.html index 0c76228..629520c 100644 --- a/_site/404.html +++ b/_site/404.html @@ -1 +1 @@ -404 - Page not found ★ Front-end Job 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 Job Interview Questions

404 - Page not found

Think this is wrong? Open an issue

\ No newline at end of file diff --git a/_site/about/index.html b/_site/about/index.html index 72f1858..bc4be38 100644 --- a/_site/about/index.html +++ b/_site/about/index.html @@ -1 +1 @@ -About ★ Front-end Job Interview Questions

About

This Project 🤳

This file contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.

Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person’s capabilities than a straight answer would.

Contribute 🕶

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

Maintainers 🦄

It has since been active thanks to these incredibly wonderful people.

Looking to contribute? Check our Contributing guide to get started!

Honorable Mentions 🎠

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

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

About

This Project 🤳

This file contains a number of front-end interview questions that can be used when vetting potential candidates. It is by no means recommended to use every single question here on the same candidate (that would take hours). Choosing a few items from this list should help you vet the intended skills you require.

Note: Keep in mind that many of these questions are open-ended and could lead to interesting discussions that tell you more about the person’s capabilities than a straight answer would.

Contribute 🕶

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

Maintainers 🦄

It has since been active thanks to these incredibly wonderful people.

Looking to contribute? Check our Contributing guide to get started!

Honorable Mentions 🎠

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

\ No newline at end of file diff --git a/_site/index.html b/_site/index.html index 23c6b90..cd6eac6 100644 --- a/_site/index.html +++ b/_site/index.html @@ -1 +1 @@ -Front-end Job Interview Questions

Front-end Job 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 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 contribute guide. We have a Hall of Fame 👑.

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

Front-end Job 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 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 contribute guide. We have a Hall of Fame 👑.

\ No newline at end of file diff --git a/_site/questions/coding-questions/index.html b/_site/questions/coding-questions/index.html index ceb4d04..cbc634a 100644 --- a/_site/questions/coding-questions/index.html +++ b/_site/questions/coding-questions/index.html @@ -1 +1 @@ -Coding Questions ★ Front-end Job Interview Questions

Coding Questions

Question: What is the value of foo?

var foo = 10 + '20';

Question: What will be the output of the code below?

console.log(0.1 + 0.2 == 0.3);

Question: How would you make this work?

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

Question: What value is returned from the following statement?

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

Question: What is the value of window.foo?

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

Question: What is the outcome of the two alerts below?

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

Question: What is the value of foo.length?

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

Question: What is the value of foo.x?

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

Question: What does the following code print?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
Promise.resolve().then(function() {
  console.log('three');
})
console.log('four');

Question: What is the difference between these four promises?

doSomething().then(function () {
  return doSomethingElse();
});
doSomething().then(function () {
  doSomethingElse();
});
doSomething().then(doSomethingElse());
doSomething().then(doSomethingElse);
Edit this page
\ No newline at end of file +Coding Questions ★ Front-end Job Interview Questions

Coding Questions

Question: What is the value of foo?

var foo = 10 + '20';

Question: What will be the output of the code below?

console.log(0.1 + 0.2 == 0.3);

Question: How would you make this work?

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

Question: What value is returned from the following statement?

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

Question: What is the value of window.foo?

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

Question: What is the outcome of the two alerts below?

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

Question: What is the value of foo.length?

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

Question: What is the value of foo.x?

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

Question: What does the following code print?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
Promise.resolve().then(function() {
  console.log('three');
})
console.log('four');

Question: What is the difference between these four promises?

doSomething().then(function () {
  return doSomethingElse();
});
doSomething().then(function () {
  doSomethingElse();
});
doSomething().then(doSomethingElse());
doSomething().then(doSomethingElse);
Edit this page
\ No newline at end of file diff --git a/_site/questions/css-questions/index.html b/_site/questions/css-questions/index.html index 96d8f0b..2476dbb 100644 --- a/_site/questions/css-questions/index.html +++ b/_site/questions/css-questions/index.html @@ -1 +1 @@ -CSS Questions ★ Front-end Job Interview Questions

CSS Questions

  • What is CSS selector specificity and how does it work?
  • What’s 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’s the difference between inline and inline-block?
  • What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
  • What’s 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 played around with the new CSS Flexbox or Grid specs?
  • 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?
Edit this page
\ No newline at end of file +CSS Questions ★ Front-end Job Interview Questions

CSS Questions

  • What is CSS selector specificity and how does it work?
  • What’s 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’s the difference between inline and inline-block?
  • What’s the difference between the “nth-of-type()” and “nth-child()” selectors?
  • What’s 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 played around with the new CSS Flexbox or Grid specs?
  • 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?
Edit this page
\ No newline at end of file diff --git a/_site/questions/fun-questions/index.html b/_site/questions/fun-questions/index.html index 6ff178d..9c9b3d2 100644 --- a/_site/questions/fun-questions/index.html +++ b/_site/questions/fun-questions/index.html @@ -1 +1 @@ -Fun Questions ★ Front-end Job Interview Questions

Fun Questions

  • What’s 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?
  • What’s your favorite feature of Internet Explorer?
  • How do you like your coffee?
Edit this page
\ No newline at end of file +Fun Questions ★ Front-end Job Interview Questions

Fun Questions

  • What’s 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?
  • What’s your favorite feature of Internet Explorer?
  • How do you like your coffee?
Edit this page
\ No newline at end of file diff --git a/_site/questions/general-questions/index.html b/_site/questions/general-questions/index.html index 05b4f79..1da9162 100644 --- a/_site/questions/general-questions/index.html +++ b/_site/questions/general-questions/index.html @@ -1 +1 @@ -General Questions ★ Front-end Job 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?
Edit this page
\ No newline at end of file +General Questions ★ Front-end Job 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?
Edit this page
\ No newline at end of file diff --git a/_site/questions/html-questions/index.html b/_site/questions/html-questions/index.html index 8a5331e..71ed1ae 100644 --- a/_site/questions/html-questions/index.html +++ b/_site/questions/html-questions/index.html @@ -1 +1 @@ -HTML Questions ★ Front-end Job 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 design 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?
Edit this page
\ No newline at end of file +HTML Questions ★ Front-end Job 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 design 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?
Edit this page
\ No newline at end of file diff --git a/_site/questions/javascript-questions/index.html b/_site/questions/javascript-questions/index.html index e700601..d82cb25 100644 --- a/_site/questions/javascript-questions/index.html +++ b/_site/questions/javascript-questions/index.html @@ -1 +1 @@ -JavaScript Questions ★ Front-end Job Interview Questions

JavaScript Questions

  • Explain event delegation
  • Explain how this works in JavaScript
  • Explain how prototypal inheritance works
  • What do you think of AMD vs CommonJS?
  • Explain why the following doesn’t work as an IIFE: function foo(){ }();.
    • What needs to be changed to properly make it an IIFE?
  • What’s 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?
  • Can you describe the main difference between a forEach loop and a .map() loop and why you would pick one versus the other?
  • What’s a typical use case for anonymous functions?
  • How do you organize your code? (module pattern, classical inheritance?)
  • What’s the difference between host objects and native objects?
  • Difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • What’s the difference between .call and .apply?
  • Explain Function.prototype.bind.
  • What’s the difference between feature detection, feature inference, and using the UA string?
  • Explain Ajax in as much detail as possible.
  • What are the advantages and disadvantages of using Ajax?
  • Explain how JSONP works (and how it’s not really Ajax).
  • Have you ever used JavaScript templating?
    • If so, what libraries have you used?
  • Explain “hoisting”.
  • Describe event bubbling.
  • Describe event capturing.
  • What’s the difference between an “attribute” and a “property”?
  • Why is extending built-in JavaScript objects not a good idea?
  • Difference between window load event and document DOMContentLoaded event?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Why is it called a Ternary operator, what does the word “Ternary” indicate?
  • What is "use strict";? what are the advantages and disadvantages to using it?
  • 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
  • Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
  • Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
  • Explain what a single page app is and how to make one SEO-friendly.
  • What is the extent of your experience with Promises and/or their polyfills?
  • What are the pros and cons of using Promises instead of callbacks?
  • 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?
  • What language constructions do you use for iterating over object properties and array items?
  • 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?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • 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?
  • ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
  • 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?
Edit this page
\ No newline at end of file +JavaScript Questions ★ Front-end Job Interview Questions

JavaScript Questions

  • Explain event delegation
  • Explain how this works in JavaScript
  • Explain how prototypal inheritance works
  • What do you think of AMD vs CommonJS?
  • Explain why the following doesn’t work as an IIFE: function foo(){ }();.
    • What needs to be changed to properly make it an IIFE?
  • What’s 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?
  • Can you describe the main difference between a forEach loop and a .map() loop and why you would pick one versus the other?
  • What’s a typical use case for anonymous functions?
  • How do you organize your code? (module pattern, classical inheritance?)
  • What’s the difference between host objects and native objects?
  • Difference between: function Person(){}, var person = Person(), and var person = new Person()?
  • What’s the difference between .call and .apply?
  • Explain Function.prototype.bind.
  • What’s the difference between feature detection, feature inference, and using the UA string?
  • Explain Ajax in as much detail as possible.
  • What are the advantages and disadvantages of using Ajax?
  • Explain how JSONP works (and how it’s not really Ajax).
  • Have you ever used JavaScript templating?
    • If so, what libraries have you used?
  • Explain “hoisting”.
  • Describe event bubbling.
  • Describe event capturing.
  • What’s the difference between an “attribute” and a “property”?
  • Why is extending built-in JavaScript objects not a good idea?
  • Difference between window load event and document DOMContentLoaded event?
  • What is the difference between == and ===?
  • Explain the same-origin policy with regards to JavaScript.
  • Make this work:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Why is it called a Ternary operator, what does the word “Ternary” indicate?
  • What is "use strict";? what are the advantages and disadvantages to using it?
  • 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
  • Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
  • Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
  • Explain what a single page app is and how to make one SEO-friendly.
  • What is the extent of your experience with Promises and/or their polyfills?
  • What are the pros and cons of using Promises instead of callbacks?
  • 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?
  • What language constructions do you use for iterating over object properties and array items?
  • 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?
  • Explain the differences on the usage of foo between function foo() {} and var foo = function() {}
  • 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?
  • ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
  • 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?
Edit this page
\ No newline at end of file diff --git a/_site/questions/network-questions/index.html b/_site/questions/network-questions/index.html index 1ba8c16..6d50a22 100644 --- a/_site/questions/network-questions/index.html +++ b/_site/questions/network-questions/index.html @@ -1 +1 @@ -Network Questions ★ Front-end Job 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.
Edit this page
\ No newline at end of file +Network Questions ★ Front-end Job 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.
Edit this page
\ No newline at end of file diff --git a/_site/questions/performance-questions/index.html b/_site/questions/performance-questions/index.html index 83b840a..114ff5c 100644 --- a/_site/questions/performance-questions/index.html +++ b/_site/questions/performance-questions/index.html @@ -1 +1 @@ -Performance Questions ★ Front-end Job 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 Job 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/_site/questions/testing-questions/index.html b/_site/questions/testing-questions/index.html index acc36c4..031bbe0 100644 --- a/_site/questions/testing-questions/index.html +++ b/_site/questions/testing-questions/index.html @@ -1 +1 @@ -Testing Questions ★ Front-end Job 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?
Edit this page
\ No newline at end of file +Testing Questions ★ Front-end Job 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?
Edit this page
\ No newline at end of file diff --git a/_site/sitemap.xml b/_site/sitemap.xml index c41eb76..d935b6a 100644 --- a/_site/sitemap.xml +++ b/_site/sitemap.xml @@ -2,227 +2,227 @@ - https://h5bp.github.io/Front-end-Developer-Interview-Questions/about/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/about/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/coding-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/coding-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/css-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/css-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/fun-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/fun-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/general-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/general-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/html-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/html-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/javascript-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/javascript-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/network-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/network-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/performance-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/performance-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/questions/testing-questions/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/questions/testing-questions/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/arabic/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/arabic/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/bulgarian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/bulgarian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/burmese/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/burmese/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/chinese-traditional/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/chinese-traditional/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/chinese/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/chinese/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/croatian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/croatian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/czech/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/czech/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/danish/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/danish/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/dutch/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/dutch/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/farsi/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/farsi/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/french/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/french/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/german/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/german/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/greek/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/greek/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/hebrew/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/hebrew/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/hungarian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/hungarian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/indonesian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/indonesian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/italian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/italian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/japanese/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/japanese/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/korean/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/korean/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/korean/reference.html + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/korean/reference.html - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/latvian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/latvian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/polish/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/polish/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/portuguese/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/portuguese/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/romanian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/romanian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/russian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/russian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/serbian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/serbian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/slovakian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/slovakian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/slovenian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/slovenian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/spanish/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/spanish/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/swedish/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/swedish/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/turkish/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/turkish/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/ukrainian/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/ukrainian/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/translations/vietnamese/ + 2018-12-02 - https://h5bp.github.io/Front-end-Developer-Interview-Questions/translations/vietnamese/ - 2018-11-26 + https://h5bp.github.io/Front-end-Developer-Interview-Questions/Front-end-Developer-Interview-Questions/ + 2018-12-02 diff --git a/_site/translations/arabic/index.html b/_site/translations/arabic/index.html index bc45189..0dbc9a4 100644 --- a/_site/translations/arabic/index.html +++ b/_site/translations/arabic/index.html @@ -1 +1 @@ -أسئلة مقابله شخصية في تطوير واجهةالويب ★ Front-end Job Interview Questions

أسئلة مقابله شخصية في تطوير واجهةالويب

أسئلة مقابله شخصية في تطوير واجهةالويب

هذا الملف يحتوي على عدد من أسئلة مقابلة شخصية في تطوير واجهة الويب التي من الممكن ان تساعدك في فحص المرشحين المحتملين للوظيفة.
لا ينصح باستخدام كل الأسئلة هنا على مرشح واحد, فاختيار بعض من الأسئلة سيساعدك في تحديد من يمتلك المهارات المتوافقه مع متطلباتك.

ملاحظة: كثير من هذه الأسئلة ليس لها إجابات محددة مما قد يؤدي الى نقاش مثير للاهتمام , و يعرفك على قدرات الشخص أكثر مما تتوقع من اجابة محدده.

قائمة المحتوى

  1. أسئلة عامة
  2. أسئلة HTML
  3. أسئلة CSS
  4. أسئلة JS
  5. أسئلة اختبار البرمجيات Testing
  6. أسئلة أداء البرمجيات Performance
  7. أسئلة شبكات Network
  8. أسئلة برمجة
  9. أسئلة مسلية

الدخول و المساهمة

  1. المساهمون
  2. كيف تساهم
  3. الرخصة

أسئلة عامة:

  • ماذا تعلمت بالأمس/هذا الأسبوع؟
  • ماذا يهمك ويثير اهتمامك في البرمجة؟
  • ماهو اخر تحدي تقني واجهته ,و كيف استطعت إصلاحه؟
  • اي من واجهة المستخدم, الامان, الاداء, قابلية الصيانه, SEO, او اي تقنية تضعها في الحسبان عند بناء تطبيق ويب او موقع؟
  • تكلم عن بيئة التطوير المفضلة لديك.
  • ماهو إصدار نظام التحكم المعتاد عليه؟
  • هل تستطيع وصف روتين عملك عند إنشاء صفحة ويب؟
  • لو كان لديك خمسة stylesheets مختلفة كيف لك دمجها في الموقع بأفضل طريقة؟
  • هل تستطيع شرح الفرق بين progressive enhancement و graceful degradation؟
  • كيف يمكنك تحسين assets/resources الموقع؟
  • كم عدد المصادر التي يحملها الموقع من domain في وقت واحد؟
    • ماهي الاستثناءت؟
  • سم ثلاث طرق لتخفيض تحميل الصفحة؟
  • لو دخلت الى مشروع و هم يستخدمون tabs وانت تستخدم spaecs, فماذا ستفعل؟
  • اشرح كيف تنشئ صفحة عرض شرائح.
  • لو كنت ستحترف تقنية واحده هذه السنه ماذا ستكون؟
  • اشرح اهمية standards و standards bodies.
  • ماهو Flash of Unstyled Content ؟وكيف تتفاداه
  • اشرح ما هو ARIA و screenreaders, وكيف تنشئ موقع accessible؟
  • اشرح الإيجابيات و السلبيات CSS animations مقابل JavaScript animations.
  • ماذا CORS يرمز الى ,و ماهي المشكلة التي يعالجها؟

أسئلة HTML:

  • ماذا تفعل doctype؟
  • ماهو الفرق بين full standards mode, almost standards mode و quirks mode؟
  • ماهو الفرق بين HTML و XHTML؟
  • هل هناك مشكلة في استضافة صفحاتapplication/xhtml+xml؟
  • كيف تستضيف صفحه بمحتوى متعدد اللغات؟
  • ماهي الاشياء التي يجب ان تحترس منها عند تصميم او تطور موقع متعدد اللغات؟
  • ماهي فائدة -data؟
  • اعتبر HTML5 منصة مفتوحة على شبكة الإنترنت ماهي أسس بناء HTML5؟
  • اشرح الفرق بين cookie, sessionStorage و localStorage.
  • اشرح الفرق بين <script>, <script async> و <script defer>.
  • لماذا من الأفضل وضع سي اس اس <link> بين <head></head> و جافاسكربت <script> قبل <body/>؟
  • ماهو progressive rendering؟
  • هل استخدمت HTML templating languages مختلفة من قبل؟

أسئلة CSS:

  • ما الفرق بين class و id في CSS؟
  • ما الفرق بين "resetting" و "normalizing" في CSS؟ واي منهم ستختار, ولماذا؟
  • اشرح Floats, و كيف تعمل؟
  • اشرح z-index, و كيف stacking context شُكلت؟
  • اشرح (BFC(Block Formatting Context, و كيف تعمل؟
  • ماهي clearing techniques المختلفه و اي منها مناسب لأي سياق؟
  • اشرح CSS sprites, وكيف سوف تنفذعم في صفحه او موقع؟
  • ما هي طرق تبديل الصور "image replacement" المفضلة لديك و متى تسخدم اي منها؟
  • كيف تصلح مشكلة تنسيق في متصفح معين؟
  • كيف تجعل صفحاتك تعمل على متصفحات مقيدة بالميزات "قديمة"؟
    • ما هي الطرق/العمليات التي تستخدمها؟
  • ماهي الطرق المختلفة لكي تخفي المحتوى وتجعله فقط متوفر لقارء الشاشه فقط؟
  • هل استخدمت نظام grid من قبل, و لو كان كذكلك ماذا تفضل؟
  • هل استخدمت media queries او تنسيق محدد للهاتف؟
  • هل انت معتاد مع تصميم SVG؟
  • كيف تحسن صفحاتك لطٌباعة؟
  • ماهي بعض المعوقات في كتابة CSS جيد؟
  • ماهي الايجابيات/السلبيات في استخدام CSS preprocessors؟
    • اوصف ماذا يعجبك وما لايعجبك حول استخدام CSS preprocessors؟
  • كيف كيف لك تنفيذ web design comp باستخدام خطوط ليست أساسية؟
  • اشرح كيف يتسطيع المتصفح تحديد أي عنصر ينتمي إلى أي CSS selector.
  • اوصف pseudo-elements و ناقش في ماذا يستخدمون؟
  • اشرح ماهو box model و كيف ستخبر المتصفح تنسيق في box models مختلفة باستخدام CSS.
  • ماذا { ;box-sizing: border-box } * يفعل, وماهي ايجابياته؟
  • عدد كل قيم خاصية display التي تتذكرها.
  • ما هو الفرق بين inline و inline-block؟
  • ماهو الفرق بين قيم relative, fixed, absolute و statically في خاصية position؟
  • الحرف "C" في CSS يرمز الى Cascading. كيف تحدد الافضلية في تعيين التصميم , وكيف لك أن تستفيد من هذه الخاصية؟
  • أي من إطارات العمل CSS استخدمت في الانتاج أو محليا على جهازك, وكيف لك تغييرهم/تطورهم؟
  • هل جربت او استعملت قليلا CSS Flexbox او Grid؟
  • كيف يكون responsive design مختلفا عن adaptive design
  • هل عملت من قبل مع retina graphics, ولو كان كذلك متى و ماهي الطرق التي استعملتها؟
  • هل هناك سبب يجعلك من الممكن أن تستعمل ()translate بدلا من absolute positioning او vice-versa؟ ولماذا.

أسئلة JS:

  • اشرح event delegation.
  • اشرح كيف this تعمل في JavaScript.
  • اشرح كيف تعمل prototypal inheritance.
  • ما رأيك في AMD vs CommonJS؟
  • اشرح لماذا التالي ;(){ }{}function foo لا يعمل كـ IIFE؟
    • ما الذي يحتاجه من تصحيح لجعل IIFE بصوره صحيحة؟
  • ما الفرق بين المتغيرات: null, undefined، undeclared؟
    • ما الذي ستفعله لتتحقق من أي من هذه الحالات؟
  • ما هو closure وكيف/لماذا ستستخدم واحدًا؟
  • ما هي حالة الاستخدام الاعتيادية لـ anonymous functions؟
  • كيف تنظم برمجياتك؟ (module pattern, classical inheritance)؟
  • ما الفرق بين host objects و native objects؟
  • القرق بين {} ()function Person, ()var person = Person,و ()var person = new Person؟
  • ما الفرق بين call.و apply.؟
  • اشرح Function.prototype.bind.
  • متى تستخدم ()document.write؟
  • ما الفرق بين feature detection, feature inference , واستخدام الـ UA string؟
  • اشرح Ajax في أكبر قدر من التفاصيل .
  • ما هي المزايا والعيوب في استخدام Ajax ؟
  • اشرح كيف JSONP يعمل (وكيف أنها ليست حقا Ajax ).
  • هل سبق لك استخدام JavaScript templating؟
    • لو كان كذلك أي مكتبة استخدمت؟
  • اشرح "hoisting".
  • اوصف event bubbling.
  • ما الفرق بين "attribute" و "property"؟
  • لماذا extending built-in JavaScript objects فكرة سيئة؟
  • ما هو الفرق بين document load event و document DOMContentLoaded event؟
  • ما هو الفرق بين == و ===؟
  • اشرح سياسة same-origin فيما يتعلق بجافاسكربت.
  • اجعل هذا يعمل:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • لماذا "Ternary" سميت هكذا ,و ماذا تشير كلمة Ternary expression إلى؟
  • ماهو ;"use strict", وما هي إبجبايات و سلبيات استخدامه؟
  • اكتب for loop تكرر حتى 100 و تطبع "fizz" في مضاعفات 3 , و "buzz" في مضاعفات 5 و "fizzbuzz" في مضاعفات 5 و3.
  • لماذا بشكل عام ترك global scope للموقع كما هو و عدم لمسه فكرة جيدة
  • لماذا من الممكن تستخدم شي مثل load event, وهل هذا الـevent يملك سلبيات؟ وهل تعرف بدائل.و لماذا من الممكن ان تستخدمهم
  • اشرح ما هو single page app و كيفية صنع SEO-friendly.
  • ما مدى خبرتك في استعمال Promises و/او polyfills خاصتهم؟
  • ماهي بعض المزايا و العيوب في استخدام Promises بدلا من callbacks؟
  • ماهي بعض الاجابيات و السلبيات في كتابتة جافاسكرت كود في لغة يحدث لها compiles إلى جافاسكربت؟
  • ماهي الادوات و الطرق التي تستخدمها في البحث و التصحيح عن أخطاءك في الجافاسكربت كود؟
  • ماهي language constructions تستعمل لتكرار على خواص object و عناصر array؟
    • اشرح الفرق بين mutable و immutable objects.
    • ماذا يعتبر في الجافاسكربت لـ immutable object؟
    • ماهي الايجابيات و السلبيات الـ immutability؟
    • كيف يمكنك تحقيق immutability في الكود الخاص بك؟
  • اشرح الفرق بين synchronous و asynchronous functions.
  • ماهو event loop؟
    • ما هو الفرق بين call stack و task queue؟
  • اشرح الفرق في استخدام foo بين {} ()function foo و {} ()var foo = function.

أسئلة اختبار البرمجيات Testing:

  • ما هي المزايا والعيوب لاختبار برمجياتك؟
  • ما الأدوات التي تستخدمهافي اختبار وظائف برمجياتك؟
  • ما الفرق بين اختبار unit واختبار functional/integration؟
  • ما الغرض من code style linting tool؟

أسئلة أداء البرمجيات Performance:

  • ما الأدوات التي تستخدمها لإيجاد مشاكل في الأداء؟
  • ما هي الطرق التي من الممكن تحسن أداءالـ scrolling في موقعك؟
  • اشرح الفرق بين layout و painting و compositing.

أسئلة شبكات Network:

  • في العادة لماذا من الأفضل أن ترفع site assets من domains متعدده؟
  • افعل ما بوسعك لشرح ما يحدث من بداية كتابك عنوان الموقع الى انتهاء تحميله على شاشتك.
  • ما الفرق بين Long-Polling و Websockets و Server-Sent Events؟
  • اشرح request and response headers التاليه:
    • الفرق بين If-Modified-... , Expires, Date, Age
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • ما هي HTTP methods؟ و عدد كل HTTP methods التي تعرفها، واشرحها.

أسئلة برمجة:

سؤال: ماهي قيمة foo؟

var foo = 10 + '20';

سؤال: كيف يمكن جعل هذا الكود يعمل؟

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

سؤال: ماهي القيمة العائدة من الكود التالي؟

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

سؤال: ماهي قيمة window.foo؟

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

سؤال: ماهو ناتج التنبيهات التالية؟

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

سؤال: ماهي قيمة foo.length؟

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

سؤال: ماهي قيمة foo.x؟

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

سؤال: ماذا يطبع الكود التالي؟

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

أسئلة مسلية:

  • ماذا عملت من مشروع رائع مؤخرا؟
  • ما هي الاشياء التي أعجبتك في أدوات التطوير التي تستعملها؟
  • من الذي يلهمك في مجتمع تطوير واجهة الويب؟
  • هل لديك اي من المشاريع الصغيرة؟ ما نوعها؟
  • ما هي الميزة المفضلة لديك في Internet Explorer؟
  • كيف تحب قهوتك؟

المساهمون:

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

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

Edit this page
\ No newline at end of file +أسئلة مقابله شخصية في تطوير واجهةالويب ★ Front-end Job Interview Questions

أسئلة مقابله شخصية في تطوير واجهةالويب

أسئلة مقابله شخصية في تطوير واجهةالويب

هذا الملف يحتوي على عدد من أسئلة مقابلة شخصية في تطوير واجهة الويب التي من الممكن ان تساعدك في فحص المرشحين المحتملين للوظيفة.
لا ينصح باستخدام كل الأسئلة هنا على مرشح واحد, فاختيار بعض من الأسئلة سيساعدك في تحديد من يمتلك المهارات المتوافقه مع متطلباتك.

ملاحظة: كثير من هذه الأسئلة ليس لها إجابات محددة مما قد يؤدي الى نقاش مثير للاهتمام , و يعرفك على قدرات الشخص أكثر مما تتوقع من اجابة محدده.

قائمة المحتوى

  1. أسئلة عامة
  2. أسئلة HTML
  3. أسئلة CSS
  4. أسئلة JS
  5. أسئلة اختبار البرمجيات Testing
  6. أسئلة أداء البرمجيات Performance
  7. أسئلة شبكات Network
  8. أسئلة برمجة
  9. أسئلة مسلية

الدخول و المساهمة

  1. المساهمون
  2. كيف تساهم
  3. الرخصة

أسئلة عامة:

  • ماذا تعلمت بالأمس/هذا الأسبوع؟
  • ماذا يهمك ويثير اهتمامك في البرمجة؟
  • ماهو اخر تحدي تقني واجهته ,و كيف استطعت إصلاحه؟
  • اي من واجهة المستخدم, الامان, الاداء, قابلية الصيانه, SEO, او اي تقنية تضعها في الحسبان عند بناء تطبيق ويب او موقع؟
  • تكلم عن بيئة التطوير المفضلة لديك.
  • ماهو إصدار نظام التحكم المعتاد عليه؟
  • هل تستطيع وصف روتين عملك عند إنشاء صفحة ويب؟
  • لو كان لديك خمسة stylesheets مختلفة كيف لك دمجها في الموقع بأفضل طريقة؟
  • هل تستطيع شرح الفرق بين progressive enhancement و graceful degradation؟
  • كيف يمكنك تحسين assets/resources الموقع؟
  • كم عدد المصادر التي يحملها الموقع من domain في وقت واحد؟
    • ماهي الاستثناءت؟
  • سم ثلاث طرق لتخفيض تحميل الصفحة؟
  • لو دخلت الى مشروع و هم يستخدمون tabs وانت تستخدم spaecs, فماذا ستفعل؟
  • اشرح كيف تنشئ صفحة عرض شرائح.
  • لو كنت ستحترف تقنية واحده هذه السنه ماذا ستكون؟
  • اشرح اهمية standards و standards bodies.
  • ماهو Flash of Unstyled Content ؟وكيف تتفاداه
  • اشرح ما هو ARIA و screenreaders, وكيف تنشئ موقع accessible؟
  • اشرح الإيجابيات و السلبيات CSS animations مقابل JavaScript animations.
  • ماذا CORS يرمز الى ,و ماهي المشكلة التي يعالجها؟

أسئلة HTML:

  • ماذا تفعل doctype؟
  • ماهو الفرق بين full standards mode, almost standards mode و quirks mode؟
  • ماهو الفرق بين HTML و XHTML؟
  • هل هناك مشكلة في استضافة صفحاتapplication/xhtml+xml؟
  • كيف تستضيف صفحه بمحتوى متعدد اللغات؟
  • ماهي الاشياء التي يجب ان تحترس منها عند تصميم او تطور موقع متعدد اللغات؟
  • ماهي فائدة -data؟
  • اعتبر HTML5 منصة مفتوحة على شبكة الإنترنت ماهي أسس بناء HTML5؟
  • اشرح الفرق بين cookie, sessionStorage و localStorage.
  • اشرح الفرق بين <script>, <script async> و <script defer>.
  • لماذا من الأفضل وضع سي اس اس <link> بين <head></head> و جافاسكربت <script> قبل <body/>؟
  • ماهو progressive rendering؟
  • هل استخدمت HTML templating languages مختلفة من قبل؟

أسئلة CSS:

  • ما الفرق بين class و id في CSS؟
  • ما الفرق بين "resetting" و "normalizing" في CSS؟ واي منهم ستختار, ولماذا؟
  • اشرح Floats, و كيف تعمل؟
  • اشرح z-index, و كيف stacking context شُكلت؟
  • اشرح (BFC(Block Formatting Context, و كيف تعمل؟
  • ماهي clearing techniques المختلفه و اي منها مناسب لأي سياق؟
  • اشرح CSS sprites, وكيف سوف تنفذعم في صفحه او موقع؟
  • ما هي طرق تبديل الصور "image replacement" المفضلة لديك و متى تسخدم اي منها؟
  • كيف تصلح مشكلة تنسيق في متصفح معين؟
  • كيف تجعل صفحاتك تعمل على متصفحات مقيدة بالميزات "قديمة"؟
    • ما هي الطرق/العمليات التي تستخدمها؟
  • ماهي الطرق المختلفة لكي تخفي المحتوى وتجعله فقط متوفر لقارء الشاشه فقط؟
  • هل استخدمت نظام grid من قبل, و لو كان كذكلك ماذا تفضل؟
  • هل استخدمت media queries او تنسيق محدد للهاتف؟
  • هل انت معتاد مع تصميم SVG؟
  • كيف تحسن صفحاتك لطٌباعة؟
  • ماهي بعض المعوقات في كتابة CSS جيد؟
  • ماهي الايجابيات/السلبيات في استخدام CSS preprocessors؟
    • اوصف ماذا يعجبك وما لايعجبك حول استخدام CSS preprocessors؟
  • كيف كيف لك تنفيذ web design comp باستخدام خطوط ليست أساسية؟
  • اشرح كيف يتسطيع المتصفح تحديد أي عنصر ينتمي إلى أي CSS selector.
  • اوصف pseudo-elements و ناقش في ماذا يستخدمون؟
  • اشرح ماهو box model و كيف ستخبر المتصفح تنسيق في box models مختلفة باستخدام CSS.
  • ماذا { ;box-sizing: border-box } * يفعل, وماهي ايجابياته؟
  • عدد كل قيم خاصية display التي تتذكرها.
  • ما هو الفرق بين inline و inline-block؟
  • ماهو الفرق بين قيم relative, fixed, absolute و statically في خاصية position؟
  • الحرف "C" في CSS يرمز الى Cascading. كيف تحدد الافضلية في تعيين التصميم , وكيف لك أن تستفيد من هذه الخاصية؟
  • أي من إطارات العمل CSS استخدمت في الانتاج أو محليا على جهازك, وكيف لك تغييرهم/تطورهم؟
  • هل جربت او استعملت قليلا CSS Flexbox او Grid؟
  • كيف يكون responsive design مختلفا عن adaptive design
  • هل عملت من قبل مع retina graphics, ولو كان كذلك متى و ماهي الطرق التي استعملتها؟
  • هل هناك سبب يجعلك من الممكن أن تستعمل ()translate بدلا من absolute positioning او vice-versa؟ ولماذا.

أسئلة JS:

  • اشرح event delegation.
  • اشرح كيف this تعمل في JavaScript.
  • اشرح كيف تعمل prototypal inheritance.
  • ما رأيك في AMD vs CommonJS؟
  • اشرح لماذا التالي ;(){ }{}function foo لا يعمل كـ IIFE؟
    • ما الذي يحتاجه من تصحيح لجعل IIFE بصوره صحيحة؟
  • ما الفرق بين المتغيرات: null, undefined، undeclared؟
    • ما الذي ستفعله لتتحقق من أي من هذه الحالات؟
  • ما هو closure وكيف/لماذا ستستخدم واحدًا؟
  • ما هي حالة الاستخدام الاعتيادية لـ anonymous functions؟
  • كيف تنظم برمجياتك؟ (module pattern, classical inheritance)؟
  • ما الفرق بين host objects و native objects؟
  • القرق بين {} ()function Person, ()var person = Person,و ()var person = new Person؟
  • ما الفرق بين call.و apply.؟
  • اشرح Function.prototype.bind.
  • متى تستخدم ()document.write؟
  • ما الفرق بين feature detection, feature inference , واستخدام الـ UA string؟
  • اشرح Ajax في أكبر قدر من التفاصيل .
  • ما هي المزايا والعيوب في استخدام Ajax ؟
  • اشرح كيف JSONP يعمل (وكيف أنها ليست حقا Ajax ).
  • هل سبق لك استخدام JavaScript templating؟
    • لو كان كذلك أي مكتبة استخدمت؟
  • اشرح "hoisting".
  • اوصف event bubbling.
  • ما الفرق بين "attribute" و "property"؟
  • لماذا extending built-in JavaScript objects فكرة سيئة؟
  • ما هو الفرق بين document load event و document DOMContentLoaded event؟
  • ما هو الفرق بين == و ===؟
  • اشرح سياسة same-origin فيما يتعلق بجافاسكربت.
  • اجعل هذا يعمل:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • لماذا "Ternary" سميت هكذا ,و ماذا تشير كلمة Ternary expression إلى؟
  • ماهو ;"use strict", وما هي إبجبايات و سلبيات استخدامه؟
  • اكتب for loop تكرر حتى 100 و تطبع "fizz" في مضاعفات 3 , و "buzz" في مضاعفات 5 و "fizzbuzz" في مضاعفات 5 و3.
  • لماذا بشكل عام ترك global scope للموقع كما هو و عدم لمسه فكرة جيدة
  • لماذا من الممكن تستخدم شي مثل load event, وهل هذا الـevent يملك سلبيات؟ وهل تعرف بدائل.و لماذا من الممكن ان تستخدمهم
  • اشرح ما هو single page app و كيفية صنع SEO-friendly.
  • ما مدى خبرتك في استعمال Promises و/او polyfills خاصتهم؟
  • ماهي بعض المزايا و العيوب في استخدام Promises بدلا من callbacks؟
  • ماهي بعض الاجابيات و السلبيات في كتابتة جافاسكرت كود في لغة يحدث لها compiles إلى جافاسكربت؟
  • ماهي الادوات و الطرق التي تستخدمها في البحث و التصحيح عن أخطاءك في الجافاسكربت كود؟
  • ماهي language constructions تستعمل لتكرار على خواص object و عناصر array؟
    • اشرح الفرق بين mutable و immutable objects.
    • ماذا يعتبر في الجافاسكربت لـ immutable object؟
    • ماهي الايجابيات و السلبيات الـ immutability؟
    • كيف يمكنك تحقيق immutability في الكود الخاص بك؟
  • اشرح الفرق بين synchronous و asynchronous functions.
  • ماهو event loop؟
    • ما هو الفرق بين call stack و task queue؟
  • اشرح الفرق في استخدام foo بين {} ()function foo و {} ()var foo = function.

أسئلة اختبار البرمجيات Testing:

  • ما هي المزايا والعيوب لاختبار برمجياتك؟
  • ما الأدوات التي تستخدمهافي اختبار وظائف برمجياتك؟
  • ما الفرق بين اختبار unit واختبار functional/integration؟
  • ما الغرض من code style linting tool؟

أسئلة أداء البرمجيات Performance:

  • ما الأدوات التي تستخدمها لإيجاد مشاكل في الأداء؟
  • ما هي الطرق التي من الممكن تحسن أداءالـ scrolling في موقعك؟
  • اشرح الفرق بين layout و painting و compositing.

أسئلة شبكات Network:

  • في العادة لماذا من الأفضل أن ترفع site assets من domains متعدده؟
  • افعل ما بوسعك لشرح ما يحدث من بداية كتابك عنوان الموقع الى انتهاء تحميله على شاشتك.
  • ما الفرق بين Long-Polling و Websockets و Server-Sent Events؟
  • اشرح request and response headers التاليه:
    • الفرق بين If-Modified-... , Expires, Date, Age
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • ما هي HTTP methods؟ و عدد كل HTTP methods التي تعرفها، واشرحها.

أسئلة برمجة:

سؤال: ماهي قيمة foo؟

var foo = 10 + '20';

سؤال: كيف يمكن جعل هذا الكود يعمل؟

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

سؤال: ماهي القيمة العائدة من الكود التالي؟

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

سؤال: ماهي قيمة window.foo؟

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

سؤال: ماهو ناتج التنبيهات التالية؟

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

سؤال: ماهي قيمة foo.length؟

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

سؤال: ماهي قيمة foo.x؟

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

سؤال: ماذا يطبع الكود التالي؟

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

أسئلة مسلية:

  • ماذا عملت من مشروع رائع مؤخرا؟
  • ما هي الاشياء التي أعجبتك في أدوات التطوير التي تستعملها؟
  • من الذي يلهمك في مجتمع تطوير واجهة الويب؟
  • هل لديك اي من المشاريع الصغيرة؟ ما نوعها؟
  • ما هي الميزة المفضلة لديك في Internet Explorer؟
  • كيف تحب قهوتك؟

المساهمون:

بدأت هذه الوثيقة في عام 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/_site/translations/bulgarian/index.html b/_site/translations/bulgarian/index.html index b43dfba..6ffbd25 100644 --- a/_site/translations/bulgarian/index.html +++ b/_site/translations/bulgarian/index.html @@ -1 +1 @@ -Въпроси за интервю за front-end разработчици ★ Front-end Job 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 +Въпроси за интервю за front-end разработчици ★ Front-end Job 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 diff --git a/_site/translations/burmese/index.html b/_site/translations/burmese/index.html index bb4cd23..04190d7 100644 --- a/_site/translations/burmese/index.html +++ b/_site/translations/burmese/index.html @@ -1 +1 @@ -Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ ★ Front-end Job Interview Questions

Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ

Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ

ယခုဖိုင်တွင် Front-end developer အလုပ်အတွက် အလုပ်လျှောက်ထားသူများအား အင်တာဗျူးများပြုလုပ်ရာတွင် အထောက်အကူပြုနိုင်သည့် မေးခွန်းများပါဝင်ပါသည်။ အလုပ်လျှောက်ထားသူတစ်ဦးစီတိုင်းကို ရှိသမျှမေးခွန်းတိုင်းမေးရန် အကြံပြုခြင်းမဟုတ်ပါ။ (ဖြေရလွန်း၍ လျှာထွက်နိုင်ကိန်းရှိသည်။) မိမိခန့်အပ်လိုသောအလုပ်နှင့်သက်ဆိုင်သည့် အလုပ်တာဝန်၊ လိုအပ်ချက်များနှင့်သက်ဆိုင်သည့် မေးခွန်းများကိုသာရွေးချယ်ကာမေးရန် ရည်ရွယ်ပါသည်။

မှတ်ချက်။ ။ မေးခွန်းအများစုမှာ open-ended မေးခွန်းများြဖစ်ြပီး ဒဲ့ဒိုးအဖြေတစ်ခု အတိအကျရယ် မရှိချေ။ ထိုမေးခွန်းနှင့် ပါတ်သက်၍ ဆွေးနွေးစကားပြောဆိုရာမှ လျှောက်ထားသူ၏ အစွမ်းအဆကို ပိုမိုခန့်မှန်းနိုင်မည်ြဖစ်သည်။

မာတိကာ

  1. ယေဘုယျ မေးခွန်းများ
  2. HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ
  3. CSS နှင့်သက်ဆိုင်သော မေးခွန်းများ
  4. JS နှင့် သက်ဆိုင်သော မေးခွန်းများ
  5. Testing နှင့် သက်ဆိုင်သော မေးခွန်းများ
  6. Performance နှင့် သက်ဆိုင်သော မေးခွန်းများ
  7. Network နှင့် သက်ဆိုင်သော မေးခွန်းများ
  8. Coding နှင့်သက်ဆိုင်သော မေးခွန်းများ
  9. အပျော်မေးခွန်းများ

Getting Involved

  1. Contributors
  2. How to Contribute
  3. License

ယေဘုယျ မေးခွန်းများ

  • ဒီရက်ပိုင်းအတွင်း (သို့) ဒီတစ်ပါတ်အတွင်း ဘာတွေသင်ယူ လေ့လာြဖစ်ပါသနည်း။
  • Coding နဲ့ပါတ်သက်လို့ ဘယ်လိုအရာမျိုးက သင့်ကို စိတ်လှုပ်ရှားအောင်၊ စိတ်ဝင်စားအောင်လုပ်နိုင်ပါလဲ။
  • အခုလောလောဆယ်ပိုင်းမှာ ဘယ်လို technical challenge တွေများတွေ့ခဲ့သလဲ၊ ပြီးတော့ အဲ့ဒီ့ challenge တွေကို ဘယ်လိုအောင်ြမင်စွာ ကျော်ြဖတ်ခဲ့ပါသလဲ။
  • Web application တစ်ခု သို့ web site တစ်ခုကိုလုပ်ရာမှာ မည်သည့် User Iterface၊ Security (လုံခြုံရေး)၊ Performance၊ Search Engine Optimization (မိမိ၏ site/application အား search engine များမှ လွယ်ကူစွာ ရှာဖွေနိုင်ရေး)၊ Maintainability (နောင်မှာပြုပြင်မှုလွယ်ကူရေး)၊ Technology (နည်းပညာရွေးချယ်မှု) စသည်တို့နှင့်ပါတ်သက်၍ မည့်သည့်အချက်များကို စဉ်းစားပါသလဲ။
  • Development လုပ်ရာတွင် သင့်အကြိုက်ဆုံးြဖစ်မည့် computer set-up အကြောင်းပြောပါ။
  • မည့်သည့် Version control system တွေကို သုံးဖူး၊ စမ်းဖူးပါသလဲ။
  • Web page တစ်ခုကို ပြုလုပ်ရာတွင် သင်၏ လုပ်ငန်းစဉ်အဆင့်ဆင့် (workflow) ကိုပြောပြပါ။
  • သင့်မှာ stylesheet ၅ခုရှိသည်ဆိုပါစို့၊ သင်၏ webpage အတွင်းသို့ ဘယ်လိုအကောင်းဆုံးြဖစ်အောင် ထည့်သွင်းမည်နည်း။
  • Progressive enhancement (ဆီလျော်စွာ ကောင်းမွန်စေနည်း) နှင့် graceful degradation (ဟန်မပျက် နှိမ့်ချနည်း) တို့ကို ရှင်းြပပေးပါ။
  • Website တစ်ခု၏ assets များ resource များကို ဘယ်လို optimize လုပ်ပါမည်နည်း။
  • Browser တစ်ခုသည် domain တစ်ခုမှ resource ဘယ်နှစ်ခု တစ်ပြိုင်တည်း download လုပ်နိုင်ပါသနည်း
    • ဘယ်လိုချွင်းချက်များရှိပါသနည်း။
  • Page load လုပ်သည့်အချိန်အား လျှော့ချနိုင်သည့် နည်း၃မျိုးပြောပါ။ (တကယ် load လုပ်သည့်အခိျန် သို့ load လုပ်သည်ဟုထင်ရချိန်)
  • လုပ်လက်ဆ Project တစ်ခုကို ဝင်ရောက်လုပ်ကိုင်ရာမှာ၊ နဂို developer များက Tab ကိုသုံးကာ code ကို format လုပ်ထားပြီး သင့်အနေနှင့် space များနှင့် format လုပ်သူတစ်ယောက်ဖြစ်သည်ဆိုပါစို့။ သင်မည်သို့ ဝင်ရောက်လုပ်ကိုင်မည်နည်း။
  • ရိုးရှင်းတဲ့ Slideshow page တစ်ခုကို သင်ဘယ်လိုပြုလုပ်ပါမည်နည်း။
  • သင်သည် ဒီနှစ်ထဲတွင် technology တစ်ခုကို ကျွမ်းကျင်စွာလေ့လာနိုင်မည်ဆိုပါက မည်သည့် technology ကိုလေ့လာမည်နည်း။
  • Standard များ၏ အရေးပါပုံနှင့် standard များကို သတ်မှတ်သည့် အဖွဲ့အစည်းများ၏ အရေးပါပုံကို ပြောပါ။
  • Flash of unstyled content ဆိုတာဘာလဲ။ ဘယ်လိုရှောင်ကွင်းနိုင်ပါသလဲ။
  • ARIA နှင့် screenreader များအကြောင်း၊ accessible ြဖစ်သည့် website ကို လုပ်ပုံလုပ်နည်းအကြောင်း ပြောပါ။
  • CSS animation များနှင့် Javascript animation များ၏ အားနည်းချက်၊ အားသာချက်များအကြောင်းရှင်းပြပါ။
  • CORS ဆိုတာဘာလဲ၊ ဘယ်လိုအခက်အခဲမျိုး ဘယ်လို issue မျိုးအတွက် အသုံးပြုပါသလဲ။

HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ

  • doctype ဆိုတာဘာလဲ။ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Full standards mode၊ almost standard mode နှင့် quirks mode ကွာခြားချက်များကို ပြောပါ။
  • HTML နှင့် XHTML ကွာခြားချက်များကို ပြောပါ။
  • Page များကို application/xhtml+xml နှင့် ချပေးပါက မည်သည့်ပြဿနာများရှိသနည်း။
  • ဘာသာစကားတစ်ခုထက်မကပါသော page တစ်ခုကို ဘယ်လိုချပြမည်နည်း။
  • ဘာသာစကားတစ်ခုထက်မကပါသော website တစ်ခုကို ဒီဇိုင်းလုပ်ရာ၊ develop လုပ်ရာတွင် မည်သို့စဥ်းစားကိုပြုလုပ်မည်နည်း။
  • data- attributes တွေသည် မည်သည့် ကိစ္စအတွက် ကောင်းသနည်း။
  • HTML5 ကို open platform တစ်ခုအနေစဥ်းစားကြည့်ပါစို့။ HTML5 ၏ အခြေခံအုပ်မြစ်များသည် အဘယ်နည်း။
  • cookie, sessionStorage နှင့် localStorage တို့၏ ကွာခြားချက်များကိုပြောပါ။
  • <script>, <script async> နှင့် <script defer> တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • ဘာကြောင့် CSS ၏ <link> tag များကို <head></head> အတွင်း၊ ဘာကြောင့် Javascript ၏ <script> tag များကို </body> မတိုင်ခင်ထည့်သည့်သည်ဟု ယေဘုယျအားဖြင့် အကြံပြုကြပါသလည်း။ ဘယ်လိုချွင်းချက်များ ရှိပါလဲ။
  • Progressive Rendering ဆိုတာဘာလဲ။
  • တခြား HTML template လုပ်ပေးနိုင်တဲ့ templating engine မျိုးဘာသုံးဖူးလဲ။

CSS နှင့်ပါတ်သက်သော မေးခွန်းများ

  • CSS တွင် class တွေနှင့် ID တွေ၏ ကွာခြားချက်များကို ပြောပါ။
  • CSS တွင် “resetting” နှင့် “normalizing” တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • Float တွေအကြောင်းနှင့် ဘယ်လိုအလုပ်လုပ်ကြောင်း ပြောပါ။
  • z-index နှင့် stacking အလုပ်လုပ်ပုံကို ရှင်းပါ။
  • BFC(Block Formatting Context) အကြောင်းရှင်းပါ၊ ဘယ်လိုအလုပ်လုပ်လဲ ပြောပါ။
  • Clearing နည်းအမျိုးမျိုးနှင့် မည်သည့်နည်းသည် မည်သို့အခြေအနေနှင့်သင့်တော်ကြောင်းရှင်းပြပါ။
  • CSS sprites များအကြောင်းရှင်းပြပါ။ Page တစ်ခု၊ site တစ်ခုမှာ ဘယ်လိုလုပ်မလဲရှင်းပြပါ။
  • အကြိုက်ဆုံး Image replacement နည်းများကိုပြောပါ၊ ဘယ်နည်းကို ဘယ်အခါမှာသုံးပါသနည်း။
  • Browser တစ်ခု၊နှစ်ခုနှင့်သာ သက်ဆိုင်သည့် style ပိုင်း ပြဿနာမျိုးကို မည်သို့ရှင်းမည်နည်း။
  • သင်၏ page တစ်ခုကို feature အစုံမပါသည့် browser တစ်ခုအတွက် မည်သို့ style လုပ်မည်နည်း။
    • မည်သည့်နည်း၊ လုပ်ဆောင်မှုများကို သုံးမည်နည်း။
  • Content တစ်ခုကို မမြင်ရအောင် မည်သို့လုပ်နိုင်ပါသနည်း (Screen readers များနှင့်သာ ဖတ်နိုင်အောင်)
  • Grid system များသုံးဖူးပါသလား၊ ဘယ်တစ်ခုကို ပိုကြိုက်ပါသလဲ။
  • Media queries သို့ mobile ဖုန်းအတွက် ရည်ရွယ်တဲ့ layout တွေ styling တွေလုပ်ဖူးလား။
  • SVG ကို style လုပ်တာနဲ့ပါတ်သက်ပြီး ဘယ်လိုအတွေ့အကြုံရှိပါသလဲ။
  • Webpage တွေကို print ထုတ်ဖို့အတွက် ဘယ်လို optimize လုပ်ပါသလဲ။
  • Efficient ြဖစ်တဲ့ CSS တွေကိုရေးဖို့အတွက် ဘယ်လို အချက်များကို သတိထားရပါမလဲ။
  • CSS preprocessor များ၏ ကောင်းချက် ဆိုးချက်များကို ပြောပါ။
    • သုံးဖူးတဲ့ CSS preprocessor တွေရဲ့ ကြိုက်တဲ့အချက် မကြိုက်တဲ့အချက်များကို ပြောပြပါ။
  • Web design comp တစ်ခု၊ photoshop/illustrator နဲ့ဆွဲထားတဲ့ design တစ်ခုကို ဘယ်လို develop လုပ်ပါမည်နည်း။
  • Browser တစ်ခုက CSS selector တစ်ခုနှင့် ဘယ်လို match လုပ်ပါသနည်း။
  • Pseudo-element တွေအကြောင်း ပြောပါ။ ဘယ်လိုနေရာမှာသုံးလဲ ပြောပါ။
  • Box model ကို နားလည်သလောက်ရှင်းပြပါ။ Browser တစ်ခုကို သင်လိုချင်သော box model တစ်ခုနှင့် render လုပ်အောင်မည်သို့ပြောရမည်နည်း။
  • * { box-sizing: border-box; } က ဘာလုပ်တာလည်း။ အဲ့ဒါရဲ့ အားသာချက်တွေက ဘာလဲ။
  • display property ရဲ့ value တွေထဲက မှတ်မိသမျှပြောပြပါ။
  • inline နှင့် inline-block ၏ ကွာခြားချက်များကို ပြောပါ။
  • relative, fixed, absolute နှင့် static position တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • CSS ထဲမှ ‘C’ သည် Cascading လို့ရည်ရွယ်ပါသည်။ မည်သည့် style ကို ဦးစားပေးအရေးယူမည်ဟု browser က သတ်မှတ်ပါသနည်း (ဥပမာနှင့်တကွ ဖြေရန်)။ အဲ့ဒီ့ system ကို ဘယ်လို အသုံးချမည်နည်း။
  • ဘယ် CSS framework ကို စမ်းသုံးဖူးပါသလဲ။ production မှာရော ဘာကိုသုံးဖူးပါလဲ။
  • CSS flexbox သို့ Grid specs တို့ကို စမ်းသုံးဖူးပါသလား။
  • Responsive design နှင့် adaptive design ဘယ်လိုကွာပါသလဲ။
  • Retina graphic တွေသုံးဖူးပါသလား။ သုံးဖူးပါက ဘယ်တုန်းကပါလည်း၊ ဘယ်နည်းတွေသုံးခဲ့ပါသလဲ။
  • absolute positioning မသုံးပဲ translate() ကို ဘယ်လိုအချိန်မျိုးမှာ သုံးနိုင်ပါသလဲ။ အဲ့ဒါမဟုတ်ပြောင်းပြန် ဆိုရင်ရော။ ဘာကြောင့်လဲ။

JS နှင့်ပါတ်သက်သော မေးခွန်းများ

  • Event delegation အကြောင်းရှင်းပြပါ။
  • this က Javascript မှာ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Prototypal inheritance က ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • AMD နှင့် CommonJS ကိုယှဉ်ပြပါ။
  • ဘာကြောင့် IIFE မှာ function foo(){}();; အလုပ်မလုပ်တာလည်း။
    • ဘာကိုပြောင်းလိုက်ရင် အလုပ်လုပ်ပါမည်နည်း။
  • Variable တစ်ခု၏ null, undefined or undeclared value များသည် ဘယ်လိုကွာခြားပါသလဲ။
    • အဲ့ဒီ့မတူတဲ့ value တွေကို ဘယ်လို check မလဲ။
  • Closure ဆိုတာဘာလဲ၊ ဘယ်လို၊ ဘာကြောင့်သုံးမှာလဲ။
  • Anonymous function တစ်ခုရဲ့ use case တွေဘာတွေရှိသလဲ။
  • Code တွေကို ဘယ်လို organize လုပ်မှာလဲ။ (module pattern, classical inheritance?)
  • Host object တွေနဲ့ native object တွေနဲ့ ဘယ်လိုကွာသလဲ။
  • function Person(){}, var person = Person(), နှင့် var person = new Person() ဆိုတဲ့ သုံးခုက ဘယ်လိုကွာပါသလဲ။
  • .call နှင့် .apply က ဘာကွာပါသလဲ။
  • Function.prototype.bind အကြောင်းရှင်းပါ။
  • document.write() ကို ဘယ်လိုအချိန်မှာ သုံးမှာလဲ။
  • Feature detection, feature inference နှင့် UA string တို့ရဲ့ ကွာခြားချက်ကို ပြောပါ။
  • Ajax ကို အသေးစိတ်ကျကျ ရှင်းပါ။
  • Ajax သုံးခြင်းရဲ့ အားသာချက်၊ အားနည်းချက်များကို ရှင်းပါ။
  • JSONP က ဘယ်လိုအလုပ်လုပ်သလဲပြောပါ။ (AJAX နှင့် ဘယ်လို မတူကြောင်းရှင်းပါ)
  • Javascript templating သုံးဖူးပါသလား၊​
    • ဘယ် Library တွေသုံးဖူးပါသလဲ။
  • “hoisting” ကိုရှင်းပြပါ။
  • Event bubbling အကြောင်းရှင်းပါ။
  • “attribute” နှင့် “property” ဘယ်လိုကွာပါသလဲ။
  • နဂိုကတည်းကရှိသည့် JavaScript object တွေကို extend လုပ်ခြင်းသည် ဘာ့ကြောင့် မလုပ်သင့်တာလဲ။
  • Document load event နဲ့ document DOMContentLoaded event က ဘယ်လိုကွာသလဲ။
  • == နှင့် === ကွာခြားပုံကိုပြောပါ။
  • Javascript ၏ same-origin policy အကြောင်းရှင်းပါ။
  • အောက်ပါကုဒ်ကို အလုပ်လုပ်အောင် လုပ်ပါ။
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ternary expression လို့ ဘာကြောင့်ခေါ်တာလဲ, “Ternary” ဆိုတာ ဘာကိုဆိုလိုချင်တာလဲ။
  • "use strict"; က ဘာလဲ။ အားနည်းချက် အားသာချက်များကို ရှင်းပါ။
  • 100 အထိ loop ပါတ်ကာ 3 နှင့် စားလုိ့ပြတ်က “fizz” လို့ထုတ်ပြီး , 5 နှင့်စားလို့ပြတ်က **“buzz”**လို့ထုတ်ပါ။ 3 နှင့် 5 နှစ်ခုလုံးနှင့်စားလို့ပြတ်က “fizzbuzz” လို့ထုတ်ပါ။
  • Website တစ်ခု၏ global scope ကို များသောအားြဖင့် မထိတာအကောင်းဆုံးြဖစ်ပါသလဲ။
  • load event ကို ဘာကြောင့်သုံးပါသလဲ။ အဲ့ဒီ့ event မှာ အားနည်းချက်များရှိပါသလား။ တခြားနည်းလမ်းတွေသိလား၊ ဘာလို့ အြခားနည်းလမ်းတွေသုံးမှာလဲ။
  • Single page app ဆိုတာဘာလဲ ရှင်းပြပေးပါ၊ ပြီးတော့ အဲ့ဒီ့ app တွေကို ဘယ်လို SEO-friendly ြဖစ်အောင်လုပ်မလဲ။
  • Promises သို့မဟုတ် သူတို့ရဲ့ polyfills တွေနဲ့ပါတ်သက်ြပီး အတွေ့အကြုံအကြောင်းပြောပြပါ။
  • Promise တွေကိုသုံးြခင်းနှင့် Callback တွေကိုသုံးခြင်းတို့၏ အားနည်းချက်၊ အားသာချက်များကို ရှင်းပါ။
  • Javascript ကို တခြား language တစ်ခုနှင့် develop လုပ်ပြီး Javascript သို့ compile လုပ်ခြင်းနှင့်ပါတ်သက်ပြီး အားနည်းချက် အားသာချက်များကို ပြောပြပါ။
  • ဘယ်လို tools တွေ၊ technique တွေကို သုံးပြီး javascript ကို debug လုပ်ပါသလဲ။
  • ဘယ်လို language construction ကိုသုံးပြီး object တစ်ခုရဲ့ properties တွေနှင့် array item တွေကို iterate လုပ်ပါသလဲ။
  • Mutable နှင့် immutable object တွေဘယ်လိုကွာခြားပါသလဲ။
    • Javascript မှာ ဘယ်လို object မျိုးသည် immutable object ဖြစ်ပါသလဲ။
    • Immutability ရဲ့ အားနည်းချက်၊ အားသာချက်များက ဘာတွေလဲ။
    • ကိုယ့်ရဲ့ code ထဲမှာ immutability ကို ဘယ်လို ရအောင်လုပ်နိုင်သလဲ။
  • Synchronous နဲ့ asynchronous function တွေရဲ့ ကွာခြားချက်ကိုပြောပါ။
  • Event loop ဆိုတာဘာလဲ။
    • Call stack နဲ့ task queue က ဘာကွာလဲ။
  • function foo() {} နှင့် var foo = function() {} မှာ foo ရဲ့ကွာခြားချက်ကိုပြောပါ။

Testing နှင့် သက်ဆိုင်သော မေးခွန်းများ

  • ကိုယ်ရေးတဲ့ code ကို test လုပ်ခြင်းအားဖြင့် ဘယ်လိုအားနည်းချက်၊ အားသာချက်များရှိပါသလဲ။
  • ကိုယ်ရေးတဲ့ code ရဲ့ functionality ကို test လုပ်ဖို့အတွက် ဘယ်လို tool တွေ သုံးမှာလဲ။
  • Unit test နဲ့ function/integration test တို့ ဘယ်လိုကွာခြားပါသလဲ။
  • Code style linting tool ရဲ့ ရည်ရွယ်ချက်ကို ပြောပါ။

Performance နှင့် သက်ဆိုင်သော မေးခွန်းများ

  • ဘယ်လို tools တွေကို သုံးပြီး performance bug တွေကို ရှာရမှာလဲ။
  • Website တစ်ခုရဲ့ scrolling နဲ့ပါတ်သက်ပြီး performance ဘယ်လိုကောင်းအောင်လုပ်ရမှာလဲ
  • Layout, painting နှင့် compositing ရဲ့ကွာခြားချက်ကိုပြောပါ။

Network နှင့်ပါတ်သက်သော မေးခွန်းများ

  • သာမန်ရိုးကျအားဖြင့်၊ ဘာကြောင့် website တစ်ခု၏ assets များကို domain တစ်ခုထက်ပိုပြီး ချပေးခြင်းက ဘာ့ကြောင့်ပိုကောင်းပါသလဲ။
  • Website တစ်ခု၏ url ကို ရိုက်ထည့်ပြီး load လုပ်ပြီးချိန်အထိ ဘာတွေဖြစ်သွားတယ်ဆိုတာကို ရှင်းပြပါ။
  • Long-polling, websocket နှင့် server-sent events တို့၏ ကွာခြားချက်များကိုရှင်းပါ။
  • အောက်ပါ request နှင့် response header များကို ရှင်းပါ။
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP Methods တွေကဘာတွေလဲ။ သူတို့ရဲ့ ကွာခြားချက်များကိုရှင်းပါ။

Coding နှင့်ပါတ်သက်သော မေးခွန်းများ

Question: foo ၏ value ကိုပြောပါ။

var foo = 10 + '20';

Question: အောက်ပါ code ကို ဘယ်လိုအလုပ်လုပ်အောင်လုပ်မည်နည်း။

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

Question: အောက်ပါ statement မှ ဘာကို return ပြန်မည်နည်း။

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

Question: window.foo ၏ value ကို ပြောပါ။

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

Question: အောက်ပါ alert နှစ်ခုက ဘာပြမည်နည်း။

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

Question: foo.length ၏ value ကိုပြောပါ။

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

Question: foo.x ၏ value ကိုပြောပါ။?

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

Question: အောက်ပါ ကုဒ်က ဘာ print ထုတ်မည်နည်း။?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

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

  • သင်လတ်တလောလုပ်ဖူးတဲ့ project များထဲက cool ဖြစ်တဲ့ project တစ်ခုအကြောင်းပြောပါ။
  • သင်သုံးတဲ့ developer tools တွေထဲက ဘယ်လိုအရာမျိုးတွေကို ကြိုက်ပါသလဲ။
  • Front-end community ထဲမှာ ဘယ်သူတွေကို စံနမူနာယူပါသလဲ။
  • အပျော်တမ်း၊ အားလပ်ချိန်မှာ လုပ်နေတဲ့ project တွေရှိပါသလား။ ဘယ်လိုမျိုးတွေလဲ။
  • Internet Explorer ရဲ့ အကြိုက်ဆုံး feature တစ်ခုပြောပါ။
  • ကော်ဖီကို ဘယ်လိုသောက်ပါသလဲ။

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 +Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ ★ Front-end Job Interview Questions

Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ

Front-end developer အလုပ်နှင့်ဆိုင်သော အင်တာဗျူး မေးခွန်းများ

ယခုဖိုင်တွင် Front-end developer အလုပ်အတွက် အလုပ်လျှောက်ထားသူများအား အင်တာဗျူးများပြုလုပ်ရာတွင် အထောက်အကူပြုနိုင်သည့် မေးခွန်းများပါဝင်ပါသည်။ အလုပ်လျှောက်ထားသူတစ်ဦးစီတိုင်းကို ရှိသမျှမေးခွန်းတိုင်းမေးရန် အကြံပြုခြင်းမဟုတ်ပါ။ (ဖြေရလွန်း၍ လျှာထွက်နိုင်ကိန်းရှိသည်။) မိမိခန့်အပ်လိုသောအလုပ်နှင့်သက်ဆိုင်သည့် အလုပ်တာဝန်၊ လိုအပ်ချက်များနှင့်သက်ဆိုင်သည့် မေးခွန်းများကိုသာရွေးချယ်ကာမေးရန် ရည်ရွယ်ပါသည်။

မှတ်ချက်။ ။ မေးခွန်းအများစုမှာ open-ended မေးခွန်းများြဖစ်ြပီး ဒဲ့ဒိုးအဖြေတစ်ခု အတိအကျရယ် မရှိချေ။ ထိုမေးခွန်းနှင့် ပါတ်သက်၍ ဆွေးနွေးစကားပြောဆိုရာမှ လျှောက်ထားသူ၏ အစွမ်းအဆကို ပိုမိုခန့်မှန်းနိုင်မည်ြဖစ်သည်။

မာတိကာ

  1. ယေဘုယျ မေးခွန်းများ
  2. HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ
  3. CSS နှင့်သက်ဆိုင်သော မေးခွန်းများ
  4. JS နှင့် သက်ဆိုင်သော မေးခွန်းများ
  5. Testing နှင့် သက်ဆိုင်သော မေးခွန်းများ
  6. Performance နှင့် သက်ဆိုင်သော မေးခွန်းများ
  7. Network နှင့် သက်ဆိုင်သော မေးခွန်းများ
  8. Coding နှင့်သက်ဆိုင်သော မေးခွန်းများ
  9. အပျော်မေးခွန်းများ

Getting Involved

  1. Contributors
  2. How to Contribute
  3. License

ယေဘုယျ မေးခွန်းများ

  • ဒီရက်ပိုင်းအတွင်း (သို့) ဒီတစ်ပါတ်အတွင်း ဘာတွေသင်ယူ လေ့လာြဖစ်ပါသနည်း။
  • Coding နဲ့ပါတ်သက်လို့ ဘယ်လိုအရာမျိုးက သင့်ကို စိတ်လှုပ်ရှားအောင်၊ စိတ်ဝင်စားအောင်လုပ်နိုင်ပါလဲ။
  • အခုလောလောဆယ်ပိုင်းမှာ ဘယ်လို technical challenge တွေများတွေ့ခဲ့သလဲ၊ ပြီးတော့ အဲ့ဒီ့ challenge တွေကို ဘယ်လိုအောင်ြမင်စွာ ကျော်ြဖတ်ခဲ့ပါသလဲ။
  • Web application တစ်ခု သို့ web site တစ်ခုကိုလုပ်ရာမှာ မည်သည့် User Iterface၊ Security (လုံခြုံရေး)၊ Performance၊ Search Engine Optimization (မိမိ၏ site/application အား search engine များမှ လွယ်ကူစွာ ရှာဖွေနိုင်ရေး)၊ Maintainability (နောင်မှာပြုပြင်မှုလွယ်ကူရေး)၊ Technology (နည်းပညာရွေးချယ်မှု) စသည်တို့နှင့်ပါတ်သက်၍ မည့်သည့်အချက်များကို စဉ်းစားပါသလဲ။
  • Development လုပ်ရာတွင် သင့်အကြိုက်ဆုံးြဖစ်မည့် computer set-up အကြောင်းပြောပါ။
  • မည့်သည့် Version control system တွေကို သုံးဖူး၊ စမ်းဖူးပါသလဲ။
  • Web page တစ်ခုကို ပြုလုပ်ရာတွင် သင်၏ လုပ်ငန်းစဉ်အဆင့်ဆင့် (workflow) ကိုပြောပြပါ။
  • သင့်မှာ stylesheet ၅ခုရှိသည်ဆိုပါစို့၊ သင်၏ webpage အတွင်းသို့ ဘယ်လိုအကောင်းဆုံးြဖစ်အောင် ထည့်သွင်းမည်နည်း။
  • Progressive enhancement (ဆီလျော်စွာ ကောင်းမွန်စေနည်း) နှင့် graceful degradation (ဟန်မပျက် နှိမ့်ချနည်း) တို့ကို ရှင်းြပပေးပါ။
  • Website တစ်ခု၏ assets များ resource များကို ဘယ်လို optimize လုပ်ပါမည်နည်း။
  • Browser တစ်ခုသည် domain တစ်ခုမှ resource ဘယ်နှစ်ခု တစ်ပြိုင်တည်း download လုပ်နိုင်ပါသနည်း
    • ဘယ်လိုချွင်းချက်များရှိပါသနည်း။
  • Page load လုပ်သည့်အချိန်အား လျှော့ချနိုင်သည့် နည်း၃မျိုးပြောပါ။ (တကယ် load လုပ်သည့်အခိျန် သို့ load လုပ်သည်ဟုထင်ရချိန်)
  • လုပ်လက်ဆ Project တစ်ခုကို ဝင်ရောက်လုပ်ကိုင်ရာမှာ၊ နဂို developer များက Tab ကိုသုံးကာ code ကို format လုပ်ထားပြီး သင့်အနေနှင့် space များနှင့် format လုပ်သူတစ်ယောက်ဖြစ်သည်ဆိုပါစို့။ သင်မည်သို့ ဝင်ရောက်လုပ်ကိုင်မည်နည်း။
  • ရိုးရှင်းတဲ့ Slideshow page တစ်ခုကို သင်ဘယ်လိုပြုလုပ်ပါမည်နည်း။
  • သင်သည် ဒီနှစ်ထဲတွင် technology တစ်ခုကို ကျွမ်းကျင်စွာလေ့လာနိုင်မည်ဆိုပါက မည်သည့် technology ကိုလေ့လာမည်နည်း။
  • Standard များ၏ အရေးပါပုံနှင့် standard များကို သတ်မှတ်သည့် အဖွဲ့အစည်းများ၏ အရေးပါပုံကို ပြောပါ။
  • Flash of unstyled content ဆိုတာဘာလဲ။ ဘယ်လိုရှောင်ကွင်းနိုင်ပါသလဲ။
  • ARIA နှင့် screenreader များအကြောင်း၊ accessible ြဖစ်သည့် website ကို လုပ်ပုံလုပ်နည်းအကြောင်း ပြောပါ။
  • CSS animation များနှင့် Javascript animation များ၏ အားနည်းချက်၊ အားသာချက်များအကြောင်းရှင်းပြပါ။
  • CORS ဆိုတာဘာလဲ၊ ဘယ်လိုအခက်အခဲမျိုး ဘယ်လို issue မျိုးအတွက် အသုံးပြုပါသလဲ။

HTML နှင့်သက်ဆိုင်သော မေးခွန်းများ

  • doctype ဆိုတာဘာလဲ။ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Full standards mode၊ almost standard mode နှင့် quirks mode ကွာခြားချက်များကို ပြောပါ။
  • HTML နှင့် XHTML ကွာခြားချက်များကို ပြောပါ။
  • Page များကို application/xhtml+xml နှင့် ချပေးပါက မည်သည့်ပြဿနာများရှိသနည်း။
  • ဘာသာစကားတစ်ခုထက်မကပါသော page တစ်ခုကို ဘယ်လိုချပြမည်နည်း။
  • ဘာသာစကားတစ်ခုထက်မကပါသော website တစ်ခုကို ဒီဇိုင်းလုပ်ရာ၊ develop လုပ်ရာတွင် မည်သို့စဥ်းစားကိုပြုလုပ်မည်နည်း။
  • data- attributes တွေသည် မည်သည့် ကိစ္စအတွက် ကောင်းသနည်း။
  • HTML5 ကို open platform တစ်ခုအနေစဥ်းစားကြည့်ပါစို့။ HTML5 ၏ အခြေခံအုပ်မြစ်များသည် အဘယ်နည်း။
  • cookie, sessionStorage နှင့် localStorage တို့၏ ကွာခြားချက်များကိုပြောပါ။
  • <script>, <script async> နှင့် <script defer> တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • ဘာကြောင့် CSS ၏ <link> tag များကို <head></head> အတွင်း၊ ဘာကြောင့် Javascript ၏ <script> tag များကို </body> မတိုင်ခင်ထည့်သည့်သည်ဟု ယေဘုယျအားဖြင့် အကြံပြုကြပါသလည်း။ ဘယ်လိုချွင်းချက်များ ရှိပါလဲ။
  • Progressive Rendering ဆိုတာဘာလဲ။
  • တခြား HTML template လုပ်ပေးနိုင်တဲ့ templating engine မျိုးဘာသုံးဖူးလဲ။

CSS နှင့်ပါတ်သက်သော မေးခွန်းများ

  • CSS တွင် class တွေနှင့် ID တွေ၏ ကွာခြားချက်များကို ပြောပါ။
  • CSS တွင် “resetting” နှင့် “normalizing” တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • Float တွေအကြောင်းနှင့် ဘယ်လိုအလုပ်လုပ်ကြောင်း ပြောပါ။
  • z-index နှင့် stacking အလုပ်လုပ်ပုံကို ရှင်းပါ။
  • BFC(Block Formatting Context) အကြောင်းရှင်းပါ၊ ဘယ်လိုအလုပ်လုပ်လဲ ပြောပါ။
  • Clearing နည်းအမျိုးမျိုးနှင့် မည်သည့်နည်းသည် မည်သို့အခြေအနေနှင့်သင့်တော်ကြောင်းရှင်းပြပါ။
  • CSS sprites များအကြောင်းရှင်းပြပါ။ Page တစ်ခု၊ site တစ်ခုမှာ ဘယ်လိုလုပ်မလဲရှင်းပြပါ။
  • အကြိုက်ဆုံး Image replacement နည်းများကိုပြောပါ၊ ဘယ်နည်းကို ဘယ်အခါမှာသုံးပါသနည်း။
  • Browser တစ်ခု၊နှစ်ခုနှင့်သာ သက်ဆိုင်သည့် style ပိုင်း ပြဿနာမျိုးကို မည်သို့ရှင်းမည်နည်း။
  • သင်၏ page တစ်ခုကို feature အစုံမပါသည့် browser တစ်ခုအတွက် မည်သို့ style လုပ်မည်နည်း။
    • မည်သည့်နည်း၊ လုပ်ဆောင်မှုများကို သုံးမည်နည်း။
  • Content တစ်ခုကို မမြင်ရအောင် မည်သို့လုပ်နိုင်ပါသနည်း (Screen readers များနှင့်သာ ဖတ်နိုင်အောင်)
  • Grid system များသုံးဖူးပါသလား၊ ဘယ်တစ်ခုကို ပိုကြိုက်ပါသလဲ။
  • Media queries သို့ mobile ဖုန်းအတွက် ရည်ရွယ်တဲ့ layout တွေ styling တွေလုပ်ဖူးလား။
  • SVG ကို style လုပ်တာနဲ့ပါတ်သက်ပြီး ဘယ်လိုအတွေ့အကြုံရှိပါသလဲ။
  • Webpage တွေကို print ထုတ်ဖို့အတွက် ဘယ်လို optimize လုပ်ပါသလဲ။
  • Efficient ြဖစ်တဲ့ CSS တွေကိုရေးဖို့အတွက် ဘယ်လို အချက်များကို သတိထားရပါမလဲ။
  • CSS preprocessor များ၏ ကောင်းချက် ဆိုးချက်များကို ပြောပါ။
    • သုံးဖူးတဲ့ CSS preprocessor တွေရဲ့ ကြိုက်တဲ့အချက် မကြိုက်တဲ့အချက်များကို ပြောပြပါ။
  • Web design comp တစ်ခု၊ photoshop/illustrator နဲ့ဆွဲထားတဲ့ design တစ်ခုကို ဘယ်လို develop လုပ်ပါမည်နည်း။
  • Browser တစ်ခုက CSS selector တစ်ခုနှင့် ဘယ်လို match လုပ်ပါသနည်း။
  • Pseudo-element တွေအကြောင်း ပြောပါ။ ဘယ်လိုနေရာမှာသုံးလဲ ပြောပါ။
  • Box model ကို နားလည်သလောက်ရှင်းပြပါ။ Browser တစ်ခုကို သင်လိုချင်သော box model တစ်ခုနှင့် render လုပ်အောင်မည်သို့ပြောရမည်နည်း။
  • * { box-sizing: border-box; } က ဘာလုပ်တာလည်း။ အဲ့ဒါရဲ့ အားသာချက်တွေက ဘာလဲ။
  • display property ရဲ့ value တွေထဲက မှတ်မိသမျှပြောပြပါ။
  • inline နှင့် inline-block ၏ ကွာခြားချက်များကို ပြောပါ။
  • relative, fixed, absolute နှင့် static position တို့၏ ကွာခြားချက်များကို ပြောပါ။
  • CSS ထဲမှ ‘C’ သည် Cascading လို့ရည်ရွယ်ပါသည်။ မည်သည့် style ကို ဦးစားပေးအရေးယူမည်ဟု browser က သတ်မှတ်ပါသနည်း (ဥပမာနှင့်တကွ ဖြေရန်)။ အဲ့ဒီ့ system ကို ဘယ်လို အသုံးချမည်နည်း။
  • ဘယ် CSS framework ကို စမ်းသုံးဖူးပါသလဲ။ production မှာရော ဘာကိုသုံးဖူးပါလဲ။
  • CSS flexbox သို့ Grid specs တို့ကို စမ်းသုံးဖူးပါသလား။
  • Responsive design နှင့် adaptive design ဘယ်လိုကွာပါသလဲ။
  • Retina graphic တွေသုံးဖူးပါသလား။ သုံးဖူးပါက ဘယ်တုန်းကပါလည်း၊ ဘယ်နည်းတွေသုံးခဲ့ပါသလဲ။
  • absolute positioning မသုံးပဲ translate() ကို ဘယ်လိုအချိန်မျိုးမှာ သုံးနိုင်ပါသလဲ။ အဲ့ဒါမဟုတ်ပြောင်းပြန် ဆိုရင်ရော။ ဘာကြောင့်လဲ။

JS နှင့်ပါတ်သက်သော မေးခွန်းများ

  • Event delegation အကြောင်းရှင်းပြပါ။
  • this က Javascript မှာ ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • Prototypal inheritance က ဘယ်လိုအလုပ်လုပ်ပါသလဲ။
  • AMD နှင့် CommonJS ကိုယှဉ်ပြပါ။
  • ဘာကြောင့် IIFE မှာ function foo(){}();; အလုပ်မလုပ်တာလည်း။
    • ဘာကိုပြောင်းလိုက်ရင် အလုပ်လုပ်ပါမည်နည်း။
  • Variable တစ်ခု၏ null, undefined or undeclared value များသည် ဘယ်လိုကွာခြားပါသလဲ။
    • အဲ့ဒီ့မတူတဲ့ value တွေကို ဘယ်လို check မလဲ။
  • Closure ဆိုတာဘာလဲ၊ ဘယ်လို၊ ဘာကြောင့်သုံးမှာလဲ။
  • Anonymous function တစ်ခုရဲ့ use case တွေဘာတွေရှိသလဲ။
  • Code တွေကို ဘယ်လို organize လုပ်မှာလဲ။ (module pattern, classical inheritance?)
  • Host object တွေနဲ့ native object တွေနဲ့ ဘယ်လိုကွာသလဲ။
  • function Person(){}, var person = Person(), နှင့် var person = new Person() ဆိုတဲ့ သုံးခုက ဘယ်လိုကွာပါသလဲ။
  • .call နှင့် .apply က ဘာကွာပါသလဲ။
  • Function.prototype.bind အကြောင်းရှင်းပါ။
  • document.write() ကို ဘယ်လိုအချိန်မှာ သုံးမှာလဲ။
  • Feature detection, feature inference နှင့် UA string တို့ရဲ့ ကွာခြားချက်ကို ပြောပါ။
  • Ajax ကို အသေးစိတ်ကျကျ ရှင်းပါ။
  • Ajax သုံးခြင်းရဲ့ အားသာချက်၊ အားနည်းချက်များကို ရှင်းပါ။
  • JSONP က ဘယ်လိုအလုပ်လုပ်သလဲပြောပါ။ (AJAX နှင့် ဘယ်လို မတူကြောင်းရှင်းပါ)
  • Javascript templating သုံးဖူးပါသလား၊​
    • ဘယ် Library တွေသုံးဖူးပါသလဲ။
  • “hoisting” ကိုရှင်းပြပါ။
  • Event bubbling အကြောင်းရှင်းပါ။
  • “attribute” နှင့် “property” ဘယ်လိုကွာပါသလဲ။
  • နဂိုကတည်းကရှိသည့် JavaScript object တွေကို extend လုပ်ခြင်းသည် ဘာ့ကြောင့် မလုပ်သင့်တာလဲ။
  • Document load event နဲ့ document DOMContentLoaded event က ဘယ်လိုကွာသလဲ။
  • == နှင့် === ကွာခြားပုံကိုပြောပါ။
  • Javascript ၏ same-origin policy အကြောင်းရှင်းပါ။
  • အောက်ပါကုဒ်ကို အလုပ်လုပ်အောင် လုပ်ပါ။
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ternary expression လို့ ဘာကြောင့်ခေါ်တာလဲ, “Ternary” ဆိုတာ ဘာကိုဆိုလိုချင်တာလဲ။
  • "use strict"; က ဘာလဲ။ အားနည်းချက် အားသာချက်များကို ရှင်းပါ။
  • 100 အထိ loop ပါတ်ကာ 3 နှင့် စားလုိ့ပြတ်က “fizz” လို့ထုတ်ပြီး , 5 နှင့်စားလို့ပြတ်က **“buzz”**လို့ထုတ်ပါ။ 3 နှင့် 5 နှစ်ခုလုံးနှင့်စားလို့ပြတ်က “fizzbuzz” လို့ထုတ်ပါ။
  • Website တစ်ခု၏ global scope ကို များသောအားြဖင့် မထိတာအကောင်းဆုံးြဖစ်ပါသလဲ။
  • load event ကို ဘာကြောင့်သုံးပါသလဲ။ အဲ့ဒီ့ event မှာ အားနည်းချက်များရှိပါသလား။ တခြားနည်းလမ်းတွေသိလား၊ ဘာလို့ အြခားနည်းလမ်းတွေသုံးမှာလဲ။
  • Single page app ဆိုတာဘာလဲ ရှင်းပြပေးပါ၊ ပြီးတော့ အဲ့ဒီ့ app တွေကို ဘယ်လို SEO-friendly ြဖစ်အောင်လုပ်မလဲ။
  • Promises သို့မဟုတ် သူတို့ရဲ့ polyfills တွေနဲ့ပါတ်သက်ြပီး အတွေ့အကြုံအကြောင်းပြောပြပါ။
  • Promise တွေကိုသုံးြခင်းနှင့် Callback တွေကိုသုံးခြင်းတို့၏ အားနည်းချက်၊ အားသာချက်များကို ရှင်းပါ။
  • Javascript ကို တခြား language တစ်ခုနှင့် develop လုပ်ပြီး Javascript သို့ compile လုပ်ခြင်းနှင့်ပါတ်သက်ပြီး အားနည်းချက် အားသာချက်များကို ပြောပြပါ။
  • ဘယ်လို tools တွေ၊ technique တွေကို သုံးပြီး javascript ကို debug လုပ်ပါသလဲ။
  • ဘယ်လို language construction ကိုသုံးပြီး object တစ်ခုရဲ့ properties တွေနှင့် array item တွေကို iterate လုပ်ပါသလဲ။
  • Mutable နှင့် immutable object တွေဘယ်လိုကွာခြားပါသလဲ။
    • Javascript မှာ ဘယ်လို object မျိုးသည် immutable object ဖြစ်ပါသလဲ။
    • Immutability ရဲ့ အားနည်းချက်၊ အားသာချက်များက ဘာတွေလဲ။
    • ကိုယ့်ရဲ့ code ထဲမှာ immutability ကို ဘယ်လို ရအောင်လုပ်နိုင်သလဲ။
  • Synchronous နဲ့ asynchronous function တွေရဲ့ ကွာခြားချက်ကိုပြောပါ။
  • Event loop ဆိုတာဘာလဲ။
    • Call stack နဲ့ task queue က ဘာကွာလဲ။
  • function foo() {} နှင့် var foo = function() {} မှာ foo ရဲ့ကွာခြားချက်ကိုပြောပါ။

Testing နှင့် သက်ဆိုင်သော မေးခွန်းများ

  • ကိုယ်ရေးတဲ့ code ကို test လုပ်ခြင်းအားဖြင့် ဘယ်လိုအားနည်းချက်၊ အားသာချက်များရှိပါသလဲ။
  • ကိုယ်ရေးတဲ့ code ရဲ့ functionality ကို test လုပ်ဖို့အတွက် ဘယ်လို tool တွေ သုံးမှာလဲ။
  • Unit test နဲ့ function/integration test တို့ ဘယ်လိုကွာခြားပါသလဲ။
  • Code style linting tool ရဲ့ ရည်ရွယ်ချက်ကို ပြောပါ။

Performance နှင့် သက်ဆိုင်သော မေးခွန်းများ

  • ဘယ်လို tools တွေကို သုံးပြီး performance bug တွေကို ရှာရမှာလဲ။
  • Website တစ်ခုရဲ့ scrolling နဲ့ပါတ်သက်ပြီး performance ဘယ်လိုကောင်းအောင်လုပ်ရမှာလဲ
  • Layout, painting နှင့် compositing ရဲ့ကွာခြားချက်ကိုပြောပါ။

Network နှင့်ပါတ်သက်သော မေးခွန်းများ

  • သာမန်ရိုးကျအားဖြင့်၊ ဘာကြောင့် website တစ်ခု၏ assets များကို domain တစ်ခုထက်ပိုပြီး ချပေးခြင်းက ဘာ့ကြောင့်ပိုကောင်းပါသလဲ။
  • Website တစ်ခု၏ url ကို ရိုက်ထည့်ပြီး load လုပ်ပြီးချိန်အထိ ဘာတွေဖြစ်သွားတယ်ဆိုတာကို ရှင်းပြပါ။
  • Long-polling, websocket နှင့် server-sent events တို့၏ ကွာခြားချက်များကိုရှင်းပါ။
  • အောက်ပါ request နှင့် response header များကို ရှင်းပါ။
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP Methods တွေကဘာတွေလဲ။ သူတို့ရဲ့ ကွာခြားချက်များကိုရှင်းပါ။

Coding နှင့်ပါတ်သက်သော မေးခွန်းများ

Question: foo ၏ value ကိုပြောပါ။

var foo = 10 + '20';

Question: အောက်ပါ code ကို ဘယ်လိုအလုပ်လုပ်အောင်လုပ်မည်နည်း။

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

Question: အောက်ပါ statement မှ ဘာကို return ပြန်မည်နည်း။

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

Question: window.foo ၏ value ကို ပြောပါ။

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

Question: အောက်ပါ alert နှစ်ခုက ဘာပြမည်နည်း။

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

Question: foo.length ၏ value ကိုပြောပါ။

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

Question: foo.x ၏ value ကိုပြောပါ။?

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

Question: အောက်ပါ ကုဒ်က ဘာ print ထုတ်မည်နည်း။?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

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

  • သင်လတ်တလောလုပ်ဖူးတဲ့ project များထဲက cool ဖြစ်တဲ့ project တစ်ခုအကြောင်းပြောပါ။
  • သင်သုံးတဲ့ developer tools တွေထဲက ဘယ်လိုအရာမျိုးတွေကို ကြိုက်ပါသလဲ။
  • Front-end community ထဲမှာ ဘယ်သူတွေကို စံနမူနာယူပါသလဲ။
  • အပျော်တမ်း၊ အားလပ်ချိန်မှာ လုပ်နေတဲ့ project တွေရှိပါသလား။ ဘယ်လိုမျိုးတွေလဲ။
  • Internet Explorer ရဲ့ အကြိုက်ဆုံး feature တစ်ခုပြောပါ။
  • ကော်ဖီကို ဘယ်လိုသောက်ပါသလဲ။

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/_site/translations/chinese-traditional/index.html b/_site/translations/chinese-traditional/index.html index 373bc54..e40e70b 100644 --- a/_site/translations/chinese-traditional/index.html +++ b/_site/translations/chinese-traditional/index.html @@ -1 +1 @@ -前端工程師面試問題集 ★ Front-end Job Interview Questions

前端工程師面試問題集

前端工程師面試問題集

譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文，翻譯不好地方請協助 Pull request。

此文件包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。

注意： 請記住一點，很多問題都是隨情況而變化，能引發很多有趣的討論，比直接的標準答案更能讓你瞭解此人的能力。

目錄

  1. 常見問題
  2. HTML 問題
  3. CSS 問題
  4. JS 問題
  5. 測試問題
  6. 效能問題
  7. 網路問題
  8. 程式碼問題
  9. 有趣問題

參與貢獻

  1. 貢獻作者群
  2. 如何貢獻
  3. 版權宣告

常見問題：

  • 你昨天或這週學習了什麼？
  • 寫程式的哪部份最讓你感到很興奮或是有興趣？
  • 最近有無遇過不容易的技術性問題，又如何解決？
  • 當你開發Web應用程式或網站時，針對UI、安全性、效能、SEO、維護性，以及技術，你考量的點是什麼？
  • 說說你喜好的開發環境 (作業系統, 編輯器或 IDE, 瀏覽器, 開發工具 … 之類)。
  • 你最熟悉哪一套版本控制系統？
  • 你可以描述你在開發一個網站時的工作流程嗎？
  • 如果有 5 種不同的樣式表 (stylesheets)，該如何整併到網站？
  • 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎？
  • 你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)？
  • 說出三種能加快網頁讀取速度的方法 (感覺上的速度或是真正的讀取時間)。
  • 如果你加入了一個專案，但是他們的程式碼用 tabs，但是你習慣用spaces (空白鍵)，你會怎麼做？
  • 寫一個簡易的投影片頁面。
  • 你用什麼工具來測試你的程式碼效能？
  • 如果今年你能精通一項技術，那會是什麼？
  • 描述標準和製定標準機構的重要性？
  • 什麼是 Flash of Unstyled Content？ 你怎麼避免 FOUC？
  • 解釋什麼是 ARIA 與 screenreaders，它們是怎麼樣讓網站使用更無障礙？
  • 解釋 CSS 動畫與 JavaScript 動畫之間的憂與劣。
  • CORS 是什麼，它解決了什麼問題？

HTML 問題:

  • doctype 做什麼用的？
  • standards mode 和 quirks mode 有什麼不同？
  • 使用 XHTML 有什麼限制？?
  • 如果網頁使用 application/xhtml+xml 會有問題嗎？
  • 你怎麼做一個需要支持多國語言的網頁？
  • 當開發和設計一個多國語言網站時，有什麼需要小心的？
  • data- 屬性的好處在哪？
  • 考慮 HTML5 作為一個開放式的網站平台，組成 HTML5 的技術有哪些？
  • 請描述 cookies, sessionStorage 和 localStorage 的不同？
  • 描述下列之間的不同 <script>, <script async> & <script defer>。
  • 為什麼把 CSS <link> 放在 <head></head> 之間，與將 JS <script> 放在 </body> 之前是個較好的主意？有什麼例外情形嗎？
  • 什麼是漸進式呈現？
  • 有用過 HTML 樣板語言（template languages）嗎？

CSS 問題：

  • CSS 的 class 和 ID 兩者有何差異？
  • 描述 “resetting” 和 “normalizing” 的差異性？你會選擇哪一種，為什麼選擇它？
  • 描述 Floats 並解釋如何運作。
  • 描述 z-index 並且描述堆疊內容 (stacking context) 如何形成。
  • 解釋 BFC(Block Formatting Context) 是什麼、如何運作的。
  • 有哪些不同的 clearing 技術？哪個適用在哪種內容上？
  • 描述 CSS sprites, 你如何實作在網頁或網站上？
  • 你最喜愛的圖片取代技術是什麼？你什麼時候會用到？
  • 針對各瀏覽器制定的樣式表（browser-specific styling），你的做法是？
  • 你怎麼讓你的網頁支援有功能限制的瀏覽器？
    • 你會使用什麼樣的技術/流程 ？
  • 有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？
  • 你使用過 grid system 嗎？如果有的話？你較推薦哪個？
  • 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS?
  • 你熟悉任何有關 SVG 嗎？
  • 你如何優化你的網頁以利於列印？
  • 在寫高效的 CSS 時，有什麼要注意的？
  • 使用 CSS preprocessors 的優點和缺點是什麼？ (Sass, Compass, Stylus, LESS)
    • 描述你使用過的喜歡和不喜歡的 CSS preprocessors。
  • 你如何使用非標準字體來實作網頁設計？
  • 解釋瀏覽器如何按照 CSS selector 找到對應的 element。
  • 解釋你所認知的 box model，以及你如何在 CSS 告訴瀏覽器使用不同 box model 來呈現圖層？
  • 請解釋 * { box-sizing: border-box; }？並且說明使用它的好處？
  • 請列出您記憶中 display 屬性的全部值。
  • 請說明 inline 和 inline-block 的差異性？
  • 請說明 relative、fixed、absolute 和 static 元件差異性？
  • ‘C’ 在 CSS 中代表層疊。樣式的優先級（舉出範例）？如何利用這項功能？
  • 你目前有使用哪一套 CSS Framework 在開發環境或產品線上？
    • 如果有，請問是哪一套，並且描述如果改善或提昇 CSS Framework？
  • 請問你有使用過 CSS Flexbox 或 Grid specs？
  • 如何區分 responsive design 與 adaptive design 有何不同？
  • 你曾經使用過 retina graphics？如果有，是在什麼時機以及用了什麼技術？
  • 為什麼會用 translate() 代替 aboslute positioning，或者用 absolute positioning 代替 translate？為什麼要這樣？

JS 規格問題集：

  • 描述 event delegation。
  • 描述 this 如何在 JavaScript 中運作。
  • 描述 prototypal inheritance 如何運作？
  • 你如何測試你的 JavaScript？
  • AMD vs. CommonJS?
  • 解釋下列程式碼為什麼不是IIFE: function foo(){ }();. (Immediately Invoked Function Expression,立即函式)
    • 需要修改那裡使它成為IIFE?
  • null、undefined和 undeclared變數之間有什麼差異？
    • 你如何檢查？
  • 什麼是 closure, 如何/為什麼使用?
  • anonymous functions 典型的使用時機？
  • 你如何架構你的程式碼？ (module pattern, classical inheritance?)
  • host objects 和 native objects 有何不同？
  • function Person(){}、var person = Person()和var person = new Person()之間有何不同？
  • .call 和 .apply有何不同？
  • 描述 Function.prototype.bind?
  • 你什麼時候優化你的程式？
  • 你什麼情況會使用 document.write()？
    • 多數的廣告產生仍然使用 document.write() 雖然這樣用會令人皺眉
  • feature detection, feature inference, 和使用 UA string 有什麼不同？
  • 盡可能的詳述描述 AJAX。
  • 描述 JSONP 如何運作 (且為何它不是真正的 AJAX)。
  • 你是用過 JavaScript templating (樣板) ？
    • 如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等)
  • 描述 “hoisting”
  • 描述 event bubbling.
  • “attribute” 和 “property” 的不同？
  • 為什麼擴展 JavaScript 內建的 objects 不是個好方法？
  • document load event 和 document ready event 有什麼不同？
  • == 和 === 有什麼不同？
  • 描述 JavaScript 的 same-origin policy (同源策略)
  • 實作如下程式:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ternary expression 怎麼來的, “Ternary” 的意思是什麼？
  • 什麼是 "use strict";? 使用他的優點和缺點是什麼？
  • 建個數到 100 的迴圈，當數字是 3 的倍數時輸出 “fizz”，當數字是 5 的倍數時輸出 "buzz"，當數字同時是 3 與 5 的倍數時輸出 “fizzbuzz”。
  • 為什麼保持網站的全域(global scope)原樣是一個好做法？
  • 為什麼要用 load 事件？有什麼缺點嗎？有其他選擇嗎？又為何選擇它？
  • 解釋什麼是 single page app，並怎麼讓它對 SEO 更友善。
  • 你對 Promises 的經驗？有用過相關的補強（ployfills）嗎？
  • Promises 之於 callbacks 的優劣？
  • JavaScript 轉譯器（transpiler）的優缺點？
  • 你用什麼工具或技巧來做 JavaScript debug?
  • 你都用什麼對 object properties 與 array 進行迭代？
  • 解釋 mutable 與 immutable objects 之間的不同。
    • 舉個 immutable 在 JavaScript 中例子？
    • immutability 的憂劣？
    • 如何達成 immutability？
  • 解釋同步（synchronous）與非同步（asynchronous）函式之間的差異。
  • Event loop 是什麼？
    • call stack 與 task queue 之間的不同？

測試問題集:

  • 寫測試有什麼好壞？
  • 都用什麼工具測試代碼是否能運作？
  • Unit test 與 functional/integration 間的不同？
  • 監控代碼風格 linting 工具的用途是？

效能問題集:

  • 你都用什麼工具尋找效能上的臭蟲？
  • 有哪些方法可改善網站在 scrolling 效能？
  • 解釋 layout, painting 與 compositing 的不同。（瀏覽器在 render 上的效能問題）

網路問題集:

  • 傳統上為什麼用多個域名來放置網站資源會比較好？
  • 請詳細描述當您在網址列打入網址開始到最後網頁呈現在螢幕前的整個流程。
  • Long-Polling, Websockets, SSE (Server-Sent Event) 之間有什麼差異？
  • 請描述下列 request 和 response headers：
    • Diff. between Expires, Date, Age and If-Modified-…
    • DNT
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • 列出所有你知道的 HTTP 操作，並詳加解釋。

程式碼問題集:

問題： foo 的值是什麼？

var foo = 10 + '20';

問題：實作符合下面的函式

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

問題: 下面的 statement(陳述式) 會回傳什麼？

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

問題: window.foo 的值是什麼？

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

問題: 下面的兩個 alerts 的結果會是什麼？

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

問題: 下面 foo.length 的值是什麼？

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

問題：下面這段會印出什麼？

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

有趣問題：

  • 你最近寫過最酷的專案是？
  • 你使用的開發工具中，你最喜歡的部分是什麼？
  • 你有任何的 pet projects (個人開發的小專案)？ 什麼樣的？
  • 你最喜歡 IE 瀏覽器的什麼特點？
  • 喜歡咖啡嗎?

貢獻作者群:

此文件是由 @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 +前端工程師面試問題集 ★ Front-end Job Interview Questions

前端工程師面試問題集

前端工程師面試問題集

譯注：此翻譯版，主要給不能流利的讀英文的人看，相關專有名詞還是保留原文，翻譯不好地方請協助 Pull request。

此文件包含了一些前端開發的面試問題，來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目，應該就夠幫助你審查面試者是否擁有你需要的技能。

注意： 請記住一點，很多問題都是隨情況而變化，能引發很多有趣的討論，比直接的標準答案更能讓你瞭解此人的能力。

目錄

  1. 常見問題
  2. HTML 問題
  3. CSS 問題
  4. JS 問題
  5. 測試問題
  6. 效能問題
  7. 網路問題
  8. 程式碼問題
  9. 有趣問題

參與貢獻

  1. 貢獻作者群
  2. 如何貢獻
  3. 版權宣告

常見問題：

  • 你昨天或這週學習了什麼？
  • 寫程式的哪部份最讓你感到很興奮或是有興趣？
  • 最近有無遇過不容易的技術性問題，又如何解決？
  • 當你開發Web應用程式或網站時，針對UI、安全性、效能、SEO、維護性，以及技術，你考量的點是什麼？
  • 說說你喜好的開發環境 (作業系統, 編輯器或 IDE, 瀏覽器, 開發工具 … 之類)。
  • 你最熟悉哪一套版本控制系統？
  • 你可以描述你在開發一個網站時的工作流程嗎？
  • 如果有 5 種不同的樣式表 (stylesheets)，該如何整併到網站？
  • 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎？
  • 你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)？
  • 說出三種能加快網頁讀取速度的方法 (感覺上的速度或是真正的讀取時間)。
  • 如果你加入了一個專案，但是他們的程式碼用 tabs，但是你習慣用spaces (空白鍵)，你會怎麼做？
  • 寫一個簡易的投影片頁面。
  • 你用什麼工具來測試你的程式碼效能？
  • 如果今年你能精通一項技術，那會是什麼？
  • 描述標準和製定標準機構的重要性？
  • 什麼是 Flash of Unstyled Content？ 你怎麼避免 FOUC？
  • 解釋什麼是 ARIA 與 screenreaders，它們是怎麼樣讓網站使用更無障礙？
  • 解釋 CSS 動畫與 JavaScript 動畫之間的憂與劣。
  • CORS 是什麼，它解決了什麼問題？

HTML 問題:

  • doctype 做什麼用的？
  • standards mode 和 quirks mode 有什麼不同？
  • 使用 XHTML 有什麼限制？?
  • 如果網頁使用 application/xhtml+xml 會有問題嗎？
  • 你怎麼做一個需要支持多國語言的網頁？
  • 當開發和設計一個多國語言網站時，有什麼需要小心的？
  • data- 屬性的好處在哪？
  • 考慮 HTML5 作為一個開放式的網站平台，組成 HTML5 的技術有哪些？
  • 請描述 cookies, sessionStorage 和 localStorage 的不同？
  • 描述下列之間的不同 <script>, <script async> & <script defer>。
  • 為什麼把 CSS <link> 放在 <head></head> 之間，與將 JS <script> 放在 </body> 之前是個較好的主意？有什麼例外情形嗎？
  • 什麼是漸進式呈現？
  • 有用過 HTML 樣板語言（template languages）嗎？

CSS 問題：

  • CSS 的 class 和 ID 兩者有何差異？
  • 描述 “resetting” 和 “normalizing” 的差異性？你會選擇哪一種，為什麼選擇它？
  • 描述 Floats 並解釋如何運作。
  • 描述 z-index 並且描述堆疊內容 (stacking context) 如何形成。
  • 解釋 BFC(Block Formatting Context) 是什麼、如何運作的。
  • 有哪些不同的 clearing 技術？哪個適用在哪種內容上？
  • 描述 CSS sprites, 你如何實作在網頁或網站上？
  • 你最喜愛的圖片取代技術是什麼？你什麼時候會用到？
  • 針對各瀏覽器制定的樣式表（browser-specific styling），你的做法是？
  • 你怎麼讓你的網頁支援有功能限制的瀏覽器？
    • 你會使用什麼樣的技術/流程 ？
  • 有什麼方法來隱藏網頁的內容？ (只顯示在 screen readers)？
  • 你使用過 grid system 嗎？如果有的話？你較推薦哪個？
  • 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS?
  • 你熟悉任何有關 SVG 嗎？
  • 你如何優化你的網頁以利於列印？
  • 在寫高效的 CSS 時，有什麼要注意的？
  • 使用 CSS preprocessors 的優點和缺點是什麼？ (Sass, Compass, Stylus, LESS)
    • 描述你使用過的喜歡和不喜歡的 CSS preprocessors。
  • 你如何使用非標準字體來實作網頁設計？
  • 解釋瀏覽器如何按照 CSS selector 找到對應的 element。
  • 解釋你所認知的 box model，以及你如何在 CSS 告訴瀏覽器使用不同 box model 來呈現圖層？
  • 請解釋 * { box-sizing: border-box; }？並且說明使用它的好處？
  • 請列出您記憶中 display 屬性的全部值。
  • 請說明 inline 和 inline-block 的差異性？
  • 請說明 relative、fixed、absolute 和 static 元件差異性？
  • ‘C’ 在 CSS 中代表層疊。樣式的優先級（舉出範例）？如何利用這項功能？
  • 你目前有使用哪一套 CSS Framework 在開發環境或產品線上？
    • 如果有，請問是哪一套，並且描述如果改善或提昇 CSS Framework？
  • 請問你有使用過 CSS Flexbox 或 Grid specs？
  • 如何區分 responsive design 與 adaptive design 有何不同？
  • 你曾經使用過 retina graphics？如果有，是在什麼時機以及用了什麼技術？
  • 為什麼會用 translate() 代替 aboslute positioning，或者用 absolute positioning 代替 translate？為什麼要這樣？

JS 規格問題集：

  • 描述 event delegation。
  • 描述 this 如何在 JavaScript 中運作。
  • 描述 prototypal inheritance 如何運作？
  • 你如何測試你的 JavaScript？
  • AMD vs. CommonJS?
  • 解釋下列程式碼為什麼不是IIFE: function foo(){ }();. (Immediately Invoked Function Expression,立即函式)
    • 需要修改那裡使它成為IIFE?
  • null、undefined和 undeclared變數之間有什麼差異？
    • 你如何檢查？
  • 什麼是 closure, 如何/為什麼使用?
  • anonymous functions 典型的使用時機？
  • 你如何架構你的程式碼？ (module pattern, classical inheritance?)
  • host objects 和 native objects 有何不同？
  • function Person(){}、var person = Person()和var person = new Person()之間有何不同？
  • .call 和 .apply有何不同？
  • 描述 Function.prototype.bind?
  • 你什麼時候優化你的程式？
  • 你什麼情況會使用 document.write()？
    • 多數的廣告產生仍然使用 document.write() 雖然這樣用會令人皺眉
  • feature detection, feature inference, 和使用 UA string 有什麼不同？
  • 盡可能的詳述描述 AJAX。
  • 描述 JSONP 如何運作 (且為何它不是真正的 AJAX)。
  • 你是用過 JavaScript templating (樣板) ？
    • 如果有的話，你有用過哪些 libraries？ (Mustache.js, Handlebars … 等)
  • 描述 “hoisting”
  • 描述 event bubbling.
  • “attribute” 和 “property” 的不同？
  • 為什麼擴展 JavaScript 內建的 objects 不是個好方法？
  • document load event 和 document ready event 有什麼不同？
  • == 和 === 有什麼不同？
  • 描述 JavaScript 的 same-origin policy (同源策略)
  • 實作如下程式:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ternary expression 怎麼來的, “Ternary” 的意思是什麼？
  • 什麼是 "use strict";? 使用他的優點和缺點是什麼？
  • 建個數到 100 的迴圈，當數字是 3 的倍數時輸出 “fizz”，當數字是 5 的倍數時輸出 "buzz"，當數字同時是 3 與 5 的倍數時輸出 “fizzbuzz”。
  • 為什麼保持網站的全域(global scope)原樣是一個好做法？
  • 為什麼要用 load 事件？有什麼缺點嗎？有其他選擇嗎？又為何選擇它？
  • 解釋什麼是 single page app，並怎麼讓它對 SEO 更友善。
  • 你對 Promises 的經驗？有用過相關的補強（ployfills）嗎？
  • Promises 之於 callbacks 的優劣？
  • JavaScript 轉譯器（transpiler）的優缺點？
  • 你用什麼工具或技巧來做 JavaScript debug?
  • 你都用什麼對 object properties 與 array 進行迭代？
  • 解釋 mutable 與 immutable objects 之間的不同。
    • 舉個 immutable 在 JavaScript 中例子？
    • immutability 的憂劣？
    • 如何達成 immutability？
  • 解釋同步（synchronous）與非同步（asynchronous）函式之間的差異。
  • Event loop 是什麼？
    • call stack 與 task queue 之間的不同？

測試問題集:

  • 寫測試有什麼好壞？
  • 都用什麼工具測試代碼是否能運作？
  • Unit test 與 functional/integration 間的不同？
  • 監控代碼風格 linting 工具的用途是？

效能問題集:

  • 你都用什麼工具尋找效能上的臭蟲？
  • 有哪些方法可改善網站在 scrolling 效能？
  • 解釋 layout, painting 與 compositing 的不同。（瀏覽器在 render 上的效能問題）

網路問題集:

  • 傳統上為什麼用多個域名來放置網站資源會比較好？
  • 請詳細描述當您在網址列打入網址開始到最後網頁呈現在螢幕前的整個流程。
  • Long-Polling, Websockets, SSE (Server-Sent Event) 之間有什麼差異？
  • 請描述下列 request 和 response headers：
    • Diff. between Expires, Date, Age and If-Modified-…
    • DNT
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • 列出所有你知道的 HTTP 操作，並詳加解釋。

程式碼問題集:

問題： foo 的值是什麼？

var foo = 10 + '20';

問題：實作符合下面的函式

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

問題: 下面的 statement(陳述式) 會回傳什麼？

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

問題: window.foo 的值是什麼？

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

問題: 下面的兩個 alerts 的結果會是什麼？

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

問題: 下面 foo.length 的值是什麼？

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

問題：下面這段會印出什麼？

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

有趣問題：

  • 你最近寫過最酷的專案是？
  • 你使用的開發工具中，你最喜歡的部分是什麼？
  • 你有任何的 pet projects (個人開發的小專案)？ 什麼樣的？
  • 你最喜歡 IE 瀏覽器的什麼特點？
  • 喜歡咖啡嗎?

貢獻作者群:

此文件是由 @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/_site/translations/chinese/index.html b/_site/translations/chinese/index.html index d24c61c..d32ef1e 100644 --- a/_site/translations/chinese/index.html +++ b/_site/translations/chinese/index.html @@ -1 +1 @@ -前端工作面试问题 ★ Front-end Job Interview Questions

前端工作面试问题

前端工作面试问题

本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能。

备注： 这些问题中很多都是开放性的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。

目录

  1. 常见问题
  2. HTML 相关问题
  3. CSS 相关问题
  4. JS 相关问题
  5. 测试相关问题
  6. 效能相关问题
  7. 网络相关问题
  8. 代码相关问题
  9. 趣味问题

参与协作

  1. 贡献者
  2. 如何参与贡献
  3. 许可协议

常见问题：

  • 你在昨天/本周学到了什么？
  • 编写代码的哪些方面能够使你兴奋或感兴趣？
  • 你最近遇到过什么技术挑战？你是如何解决的？
  • 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？
  • 请谈谈你喜欢的开发环境。
  • 你最熟悉哪一套版本控制系统？
  • 你能描述当你制作一个网页的工作流程吗？
  • 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?
  • 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
  • 你如何对网站的文件和资源进行优化？
  • 浏览器同一时间可以从一个域名下载多少资源？
    • 有什么例外吗？
  • 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
  • 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
  • 请写一个简单的幻灯效果页面。
  • 如果今年你打算熟练掌握一项新技术，那会是什么？
  • 请谈谈你对网页标准和标准制定机构重要性的理解。
  • 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
  • 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。
  • 请解释 CSS 动画和 JavaScript 动画的优缺点。
  • 什么是跨域资源共享 (CORS)？它用于解决什么问题？

HTML 相关问题：

  • doctype(文档类型) 的作用是什么？
  • 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
  • HTML 和 XHTML 有什么区别？
  • 如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？
  • 如果网页内容需要支持多语言，你会怎么做？
  • 在设计和开发多语言网站时，有哪些问题你必须要考虑？
  • 使用 data- 属性的好处是什么？
  • 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
  • 请描述 cookies、sessionStorage 和 localStorage 的区别。
  • 请解释 <script>、<script async> 和 <script defer> 的区别。
  • 为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
  • 什么是渐进式渲染 (progressive rendering)？
  • 你用过哪些不同的 HTML 模板语言？

CSS 相关问题：

  • CSS 中类 (classes) 和 ID 的区别。
  • 请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？
  • 请解释浮动 (Floats) 及其工作原理。
  • 描述z-index和叠加上下文是如何形成的。
  • 请描述 BFC(Block Formatting Context) 及其如何工作。
  • 列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
  • 请解释 CSS sprites，以及你要如何在页面或网站中实现它。
  • 你最喜欢的图片替换方法是什么，你如何选择使用。
  • 你会如何解决特定浏览器的样式问题？
  • 如何为有功能限制的浏览器提供网页？
    • 你会使用哪些技术和处理方法？
  • 有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？
  • 你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？
  • 你用过媒体查询，或针对移动端的布局/CSS 吗？
  • 你熟悉 SVG 样式的书写吗？
  • 如何优化网页的打印样式？
  • 在书写高效 CSS 时会有哪些问题需要考虑？
  • 使用 CSS 预处理器的优缺点有哪些？
    • 请描述你曾经使用过的 CSS 预处理器的优缺点。
  • 如果设计中使用了非标准的字体，你该如何去实现？
  • 请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
  • 请描述伪元素 (pseudo-elements) 及其用途。
  • 请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
  • 请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
  • 请罗列出你所知道的 display 属性的全部值
  • 请解释 inline 和 inline-block 的区别？
  • 请解释 relative、fixed、absolute 和 static 元素的区别
  • CSS 中字母 ‘C’ 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？
  • 你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？
  • 请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？
  • 为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
  • 你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
  • 请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？

JS 相关问题：

  • 请解释事件代理 (event delegation)。
  • 请解释 JavaScript 中 this 是如何工作的。
  • 请解释原型继承 (prototypal inheritance) 的原理。
  • 你怎么看 AMD vs. CommonJS？
  • 请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();.
    • 要做哪些改动使它变成 IIFE?
  • 描述以下变量的区别：null，undefined 或 undeclared？
    • 该如何检测它们？
  • 什么是闭包 (closure)，如何使用它，为什么要使用它？
  • 请举出一个匿名函数的典型用例？
  • 你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
  • 请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？
  • 请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
  • .call 和 .apply 的区别是什么？
  • 请解释 Function.prototype.bind？
  • 在什么时候你会使用 document.write()？
  • 请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？
  • 请尽可能详尽的解释 Ajax 的工作原理。
  • 使用 Ajax 都有哪些优劣？
  • 请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。
  • 你使用过 JavaScript 模板系统吗？
    • 如有使用过，请谈谈你都使用过哪些库？
  • 请解释变量声明提升 (hoisting)。
  • 请描述事件冒泡机制 (event bubbling)。
  • “attribute” 和 “property” 的区别是什么？
  • 为什么扩展 JavaScript 内置对象不是好的做法？
  • 请指出 document load 和 document DOMContentLoaded 两个事件的区别。
  • == 和 === 有什么不同？
  • 请解释 JavaScript 的同源策略 (same-origin policy)。
  • 如何实现下列代码：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • 什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？
  • 什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
  • 请实现一个遍历至 100 的 for loop 循环，在能被 3 整除时输出 “fizz”，在能被 5 整除时输出 “buzz”，在能同时被 3 和 5 整除时输出 “fizzbuzz”。
  • 为何通常会认为保留网站现有的全局作用域 (global scope) 不去改变它，是较好的选择？
  • 为何你会使用 load 之类的事件 (event)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？
  • 请解释什么是单页应用 (single page app), 以及如何使其对搜索引擎友好 (SEO-friendly)。
  • 你使用过 Promises 及其 polyfills 吗? 请写出 Promise 的基本用法（ES6）。
  • 使用 Promises 而非回调 (callbacks) 优缺点是什么？
  • 使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？
  • 你使用哪些工具和技术来调试 JavaScript 代码？
  • 你会使用怎样的语言结构来遍历对象属性 (object properties) 和数组内容？
  • 请解释可变 (mutable) 和不变 (immutable) 对象的区别。
    • 请举出 JavaScript 中一个不变性对象 (immutable object) 的例子？
    • 不变性 (immutability) 有哪些优缺点？
    • 如何用你自己的代码来实现不变性 (immutability)？
  • 请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
  • 什么是事件循环 (event loop)？
    • 请问调用栈 (call stack) 和任务队列 (task queue) 的区别是什么？
  • 解释 function foo() {} 与 var foo = function() {} 用法的区别

测试相关问题：

  • 对代码进行测试的有什么优缺点？
  • 你会用什么工具测试你的代码功能？
  • 单元测试与功能/集成测试的区别是什么？
  • 代码风格 linting 工具的作用是什么？

效能相关问题：

  • 你会用什么工具来查找代码中的性能问题？
  • 你会用什么方式来增强网站的页面滚动效能？
  • 请解释 layout、painting 和 compositing 的区别。

网络相关问题：

  • 为什么传统上利用多个域名来提供网站资源会更有效？
  • 请尽可能完整得描述从输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程。
  • Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？
  • 请描述以下 request 和 response headers：
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • 什么是 HTTP method？请罗列出你所知道的所有 HTTP method，并给出解释。
  • 请解释 HTTP status 301 与 302 的区别？

代码相关的问题：

问题：foo的值是什么？

var foo = 10 + '20';

问题：如何实现以下函数？

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

问题：下面的语句的返回值是什么？

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

问题：window.foo的值是什么？

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

问题：下面两个 alert 的结果是什么？

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

问题：foo.length的值是什么？

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

问题：foo.x的值是什么？

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

问题：下面代码的输出是什么？

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

趣味问题：

  • 你最近写过什么的很酷的项目吗？
  • 在你使用的开发工具中，最喜欢哪些方面？
  • 谁使你踏足了前端开发领域？
  • 你有什么业余项目吗？是哪种类型的？
  • 你最爱的 IE 特性是什么？
  • 你对咖啡有没有什么喜好？

贡献者：

本文档始于 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 +前端工作面试问题 ★ Front-end Job Interview Questions

前端工作面试问题

前端工作面试问题

本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能。

备注： 这些问题中很多都是开放性的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。

目录

  1. 常见问题
  2. HTML 相关问题
  3. CSS 相关问题
  4. JS 相关问题
  5. 测试相关问题
  6. 效能相关问题
  7. 网络相关问题
  8. 代码相关问题
  9. 趣味问题

参与协作

  1. 贡献者
  2. 如何参与贡献
  3. 许可协议

常见问题：

  • 你在昨天/本周学到了什么？
  • 编写代码的哪些方面能够使你兴奋或感兴趣？
  • 你最近遇到过什么技术挑战？你是如何解决的？
  • 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？
  • 请谈谈你喜欢的开发环境。
  • 你最熟悉哪一套版本控制系统？
  • 你能描述当你制作一个网页的工作流程吗？
  • 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是?
  • 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
  • 你如何对网站的文件和资源进行优化？
  • 浏览器同一时间可以从一个域名下载多少资源？
    • 有什么例外吗？
  • 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
  • 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
  • 请写一个简单的幻灯效果页面。
  • 如果今年你打算熟练掌握一项新技术，那会是什么？
  • 请谈谈你对网页标准和标准制定机构重要性的理解。
  • 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？
  • 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。
  • 请解释 CSS 动画和 JavaScript 动画的优缺点。
  • 什么是跨域资源共享 (CORS)？它用于解决什么问题？

HTML 相关问题：

  • doctype(文档类型) 的作用是什么？
  • 浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
  • HTML 和 XHTML 有什么区别？
  • 如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？
  • 如果网页内容需要支持多语言，你会怎么做？
  • 在设计和开发多语言网站时，有哪些问题你必须要考虑？
  • 使用 data- 属性的好处是什么？
  • 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
  • 请描述 cookies、sessionStorage 和 localStorage 的区别。
  • 请解释 <script>、<script async> 和 <script defer> 的区别。
  • 为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
  • 什么是渐进式渲染 (progressive rendering)？
  • 你用过哪些不同的 HTML 模板语言？

CSS 相关问题：

  • CSS 中类 (classes) 和 ID 的区别。
  • 请问 “resetting” 和 “normalizing” CSS 之间的区别？你会如何选择，为什么？
  • 请解释浮动 (Floats) 及其工作原理。
  • 描述z-index和叠加上下文是如何形成的。
  • 请描述 BFC(Block Formatting Context) 及其如何工作。
  • 列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
  • 请解释 CSS sprites，以及你要如何在页面或网站中实现它。
  • 你最喜欢的图片替换方法是什么，你如何选择使用。
  • 你会如何解决特定浏览器的样式问题？
  • 如何为有功能限制的浏览器提供网页？
    • 你会使用哪些技术和处理方法？
  • 有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？
  • 你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？
  • 你用过媒体查询，或针对移动端的布局/CSS 吗？
  • 你熟悉 SVG 样式的书写吗？
  • 如何优化网页的打印样式？
  • 在书写高效 CSS 时会有哪些问题需要考虑？
  • 使用 CSS 预处理器的优缺点有哪些？
    • 请描述你曾经使用过的 CSS 预处理器的优缺点。
  • 如果设计中使用了非标准的字体，你该如何去实现？
  • 请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
  • 请描述伪元素 (pseudo-elements) 及其用途。
  • 请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
  • 请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
  • 请罗列出你所知道的 display 属性的全部值
  • 请解释 inline 和 inline-block 的区别？
  • 请解释 relative、fixed、absolute 和 static 元素的区别
  • CSS 中字母 ‘C’ 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？
  • 你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？
  • 请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？
  • 为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
  • 你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
  • 请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？

JS 相关问题：

  • 请解释事件代理 (event delegation)。
  • 请解释 JavaScript 中 this 是如何工作的。
  • 请解释原型继承 (prototypal inheritance) 的原理。
  • 你怎么看 AMD vs. CommonJS？
  • 请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();.
    • 要做哪些改动使它变成 IIFE?
  • 描述以下变量的区别：null，undefined 或 undeclared？
    • 该如何检测它们？
  • 什么是闭包 (closure)，如何使用它，为什么要使用它？
  • 请举出一个匿名函数的典型用例？
  • 你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
  • 请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？
  • 请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
  • .call 和 .apply 的区别是什么？
  • 请解释 Function.prototype.bind？
  • 在什么时候你会使用 document.write()？
  • 请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？
  • 请尽可能详尽的解释 Ajax 的工作原理。
  • 使用 Ajax 都有哪些优劣？
  • 请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。
  • 你使用过 JavaScript 模板系统吗？
    • 如有使用过，请谈谈你都使用过哪些库？
  • 请解释变量声明提升 (hoisting)。
  • 请描述事件冒泡机制 (event bubbling)。
  • “attribute” 和 “property” 的区别是什么？
  • 为什么扩展 JavaScript 内置对象不是好的做法？
  • 请指出 document load 和 document DOMContentLoaded 两个事件的区别。
  • == 和 === 有什么不同？
  • 请解释 JavaScript 的同源策略 (same-origin policy)。
  • 如何实现下列代码：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • 什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？
  • 什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
  • 请实现一个遍历至 100 的 for loop 循环，在能被 3 整除时输出 “fizz”，在能被 5 整除时输出 “buzz”，在能同时被 3 和 5 整除时输出 “fizzbuzz”。
  • 为何通常会认为保留网站现有的全局作用域 (global scope) 不去改变它，是较好的选择？
  • 为何你会使用 load 之类的事件 (event)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？
  • 请解释什么是单页应用 (single page app), 以及如何使其对搜索引擎友好 (SEO-friendly)。
  • 你使用过 Promises 及其 polyfills 吗? 请写出 Promise 的基本用法（ES6）。
  • 使用 Promises 而非回调 (callbacks) 优缺点是什么？
  • 使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？
  • 你使用哪些工具和技术来调试 JavaScript 代码？
  • 你会使用怎样的语言结构来遍历对象属性 (object properties) 和数组内容？
  • 请解释可变 (mutable) 和不变 (immutable) 对象的区别。
    • 请举出 JavaScript 中一个不变性对象 (immutable object) 的例子？
    • 不变性 (immutability) 有哪些优缺点？
    • 如何用你自己的代码来实现不变性 (immutability)？
  • 请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
  • 什么是事件循环 (event loop)？
    • 请问调用栈 (call stack) 和任务队列 (task queue) 的区别是什么？
  • 解释 function foo() {} 与 var foo = function() {} 用法的区别

测试相关问题：

  • 对代码进行测试的有什么优缺点？
  • 你会用什么工具测试你的代码功能？
  • 单元测试与功能/集成测试的区别是什么？
  • 代码风格 linting 工具的作用是什么？

效能相关问题：

  • 你会用什么工具来查找代码中的性能问题？
  • 你会用什么方式来增强网站的页面滚动效能？
  • 请解释 layout、painting 和 compositing 的区别。

网络相关问题：

  • 为什么传统上利用多个域名来提供网站资源会更有效？
  • 请尽可能完整得描述从输入 URL 到整个网页加载完毕及显示在屏幕上的整个流程。
  • Long-Polling、Websockets 和 Server-Sent Event 之间有什么区别？
  • 请描述以下 request 和 response headers：
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • 什么是 HTTP method？请罗列出你所知道的所有 HTTP method，并给出解释。
  • 请解释 HTTP status 301 与 302 的区别？

代码相关的问题：

问题：foo的值是什么？

var foo = 10 + '20';

问题：如何实现以下函数？

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

问题：下面的语句的返回值是什么？

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

问题：window.foo的值是什么？

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

问题：下面两个 alert 的结果是什么？

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

问题：foo.length的值是什么？

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

问题：foo.x的值是什么？

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

问题：下面代码的输出是什么？

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

趣味问题：

  • 你最近写过什么的很酷的项目吗？
  • 在你使用的开发工具中，最喜欢哪些方面？
  • 谁使你踏足了前端开发领域？
  • 你有什么业余项目吗？是哪种类型的？
  • 你最爱的 IE 特性是什么？
  • 你对咖啡有没有什么喜好？

贡献者：

本文档始于 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/_site/translations/croatian/index.html b/_site/translations/croatian/index.html index 324fc7c..cb563e2 100644 --- a/_site/translations/croatian/index.html +++ b/_site/translations/croatian/index.html @@ -1 +1 @@ -Intervju za posao Front-end Developera ★ Front-end Job 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 +Intervju za posao Front-end Developera ★ Front-end Job 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 diff --git a/_site/translations/czech/index.html b/_site/translations/czech/index.html index 95acb01..4b3136c 100644 --- a/_site/translations/czech/index.html +++ b/_site/translations/czech/index.html @@ -1 +1 @@ -Front-end vývojář – otázky k pohovoru ★ Front-end Job 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 +Front-end vývojář – otázky k pohovoru ★ Front-end Job 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 diff --git a/_site/translations/danish/index.html b/_site/translations/danish/index.html index 9ba9b54..7f259b7 100644 --- a/_site/translations/danish/index.html +++ b/_site/translations/danish/index.html @@ -1 +1 @@ -Front-end Job Interview Spørgsmål ★ Front-end Job Interview Questions

Front-end Job Interview Spørgsmål

Front-end Job Interview Spørgsmål

@version 1.0

Bemærk: Dette arkiv indeholder et udvalg af spørgsmål, der kan bruges til samtale til stillingen som front-end udvikler. Det kan på ingen måde anbefales at bruge hver eneste spørgsmål på samme kandidat da det ville tage flere timer.

Husk på, at mange af disse spørgsmål er åbne og kan føre til interessante diskussioner, der fortæller dig mere om personens evner end et klart svar ville.

####Originale bidragydere

Bemærk: Størstedelen af spørgsmålene blev plukket fra en tråd skabt og bidraget af følgende personer:

Generelle spørgsmål:

  • Er du på Twitter?
    • Hvis ja, hvem følger du?
  • Er du på GitHub?
    • Hvis ja, hvilke repoer følger du?
  • Hvilke blogs følger du?
  • Hvilke version kontrolsystemer har du brugt (Git, SVN osv.)?
  • Hvad er dit foretrukne udviklingsmiljø? (OS, Editor, Browsere, Tools osv.)
  • Kan du beskrive din arbejdsgang, når du bygger en webside?
  • Kan du beskrive forskellen mellem ‘progressive enhancement’ og ‘graceful degradation’?
    • Bonuspoint beskrive ‘feature detection’
  • Forklar hvad “Semantisk HTML” betyder.
  • Hvilken browser udvikler du primært i og hvad hvilke udviklingsværktøjer bruger du?
  • Hvordan vil du optimere et websites ressourcer?
    • Du leder efter en række løsninger, som kan omfatte:
      • Fil sammenkædning (File concatenation)
      • Fil minification
      • CDN Hosted
      • Caching
      • Osv.
  • Hvorfor er det bedre at have flere domæner som man serverer sit website fra?
    • Hvor mange ressourcer vil en browser hente ad gangen fra et givent domæne?
  • Navn 3 måder at mindske et websites belastning. (formodet eller faktisk lade tid)
  • Hvis du hoppede på et projekt, og de brugte tabulering og du brugte mellemrum, hvad ville du gøre?
    • Foreslå projektet at benytte noget lignende EditorConfig (http://editorconfig.org)
    • Følge konventioner (være consistent)
    • ‘Indføre :retab! kommandoen’
  • Skriv et simpelt billed slideshow side
    • Bonuspoint, hvis det ikke bruger JS.
  • Hvilke værktøjer bruger du til at teste din kode effektivitet?
  • Hvis du kunne mestre en teknologi i år, hvad ville det så være?
  • Forklare vigtigheden af standarder.
  • Hvad er FOUC? Hvordan undgår man FOUC?

HTML-specifikke spørgsmål:

  • Hvad er et doctype gøre, og hvor mange kan du nævne?
  • Hvad er forskellen mellem standards mode og quirks mode?
  • Hvilke Begrænsninger er der med XHTML-sider?
    • Er der nogen problemer med at serverer sider som application/xhtml+xml?
  • Hvordan du serverer man en side med indhold på flere sprog?
    • Hvilken slags ting skal du være opmærksom på, når der skal designes eller udviklings til flersprogede sites?
  • Kan du bruge XHTML syntaks i HTML5?
  • Hvordan bruger du XML i HTML5?
  • Hvad er data- attributter godt for?
  • Hvad er indholds modeller i HTML4 og er de anderledes i HTML5?
  • Tænk på HTML5 som en åben web-platform. Hvad er byggestenene i HTML5?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Beskriv forskellen mellem cookies, sessionStorage og localStorage.

JS-specifikke spørgsmål

  • Hvilke JavaScript-biblioteker har du brugt?
  • Har du nogensinde kigget på kildekoden til bibliotekerne eller frameworks som du bruger?
  • Hvordan er JavaScript forskellig fra Java?
  • Hvad er en Hashtable?
  • Hvad er undefined og undeclared variabler?
  • Hvad er en closure, og hvordan/hvorfor ville du bruge en?
    • Din yndlings mønster bruges til at skabe dem? argyle (Gælder kun for IIFEs)
  • En typisk eksempel på brug af anonyme funktioner?
  • Forklare “JavaScript module pattern”, og hvornår du skal bruge det.
    • Bonuspoint for at nævne ren namespacing.
    • Hvad hvis dine moduler er uden namespace?
  • Hvordan tilrettelægger du din kode? (module pattern, classical inheritance?)
  • Hvad er forskellen mellem ‘host objects’ og ‘native objects’?
  • Forskel mellem:
function Person(){} var person = Person() var person = new Person()
  • Hvad er forskellen mellem .call og .apply?
  • Forklare Function.prototype.bind?
  • Hvornår skal du optimere din kode?
  • Kan du forklare, hvordan arv(inheritance) virker i JavaScript?
  • Hvornår vil du bruge document.write()?
    • De fleste annoncer stadig genereres ved brug af document.write() selvom dets anvendelse er ildeset.
  • Hvad er forskellen mellem feature detection, feature inference, og brug af UA string
  • Forklar AJAX så udførligt som muligt.
  • Forklare hvordan JSONP virker (og hvordan det egentlig ikke er AJAX)
  • Har du nogensinde brugt JavaScript templating?
    • Hvis ja, hvilke biblioteker har du brugt (Mustache.js, Handlebars osv.)
  • Forklare “hoisting”.
  • Forklare “event bubbling”.
  • Hvad er forskellen mellem en “attribute” og en “property”?
  • Hvorfor er det ikke en god idé Udvide indbygget JavaScript-objekter?
  • Hvorfor er Udvidelse af ins en god idé?
  • Forskel mellem document load event og document ready event?
  • Hvad er forskellen mellem == og ===?
  • Forklar, hvordan du ville få en query string parameter fra browservinduets URL.
  • Forklare den samme oprindelse politik med hensyn til JavaScript.
  • Forklare event delegation.
  • Beskrive arv mønstre(inheritance patterns) i JavaScript.
  • Få det til at virke:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Beskrive en strategi for memoization (undgå beregning gentagelser) i JavaScript.
  • Hvorfor hedder det en Ternary erklæring, hvad betyder ordet “Ternary”?
  • Hvad er arity af en funktion?
  • Hvad er "use strict";? hvad er fordelene og ulemperne ved at bruge det?

JS-kode eksempler:

~~3.14

Spørgsmål: Hvilken værdi er returneret fra ovenstående?
Svar: 3

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

Spørgsmål: Hvilken værdi er returneret fra ovenstående?
Svar: "goh angasal a m’i"

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

Spørgsmål: Hvad er værdien af window.foo?
Svar: "bar"
Hvis window.foo er falsk ellers vil det bevare sin værdi.

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

Spørgsmål: Hvad er resultatet af de to ovennævnte alerts?
** Svar: “Hello World” & ReferenceError: bar er ikke defineret **

var foo = [];
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:

  • Forklar “kæde”(chaining).
  • Forklar “deferreds”.
  • Nævn nogle jQuery specifikke optimeringer du kan implementere?
  • Hvad betyder .end() gøre?
  • Hvordan og hvorfor, ville du namespace en bundet event handler?
  • Navn 4 forskellige værdier, du kan give en jQuery metoden.
    • Selector (string), HTML (string), Callback (funktion), HTMLElement, objekt, array, element array, jQuery objekt osv.
  • Hvad er effects (eller fx) queue?
  • Hvad er forskellen mellem .get(), [], og .eq()?
  • Hvad er forskellen mellem .bind(), .live(), og .delegate()?
  • Hvad er forskellen mellem $ og $.fn? Eller hvad er $.fn.
  • Optimer denne selector:
$(".foo div#bar:eq(0)")
  • Forskel mellem delegate() og live()?

CSS-specifikke spørgsmål:

  • Beskriv hvad en “reset” CSS-fil laver, og hvordan den nyttigt.
  • Beskrive Floats og hvordan de virker.
  • Hvilken clearing teknikker findes der og hvilke er passende for hvilken sammenhæng?
  • Forklar CSS sprites, og hvordan du vil indføre dem på en side eller et websted.
  • Hvad er din yndlings billed udskiftning(image replacement) teknik og som bruger du?
  • CSS property hacks, konditionel inkluderet. css filer, eller … noget andet?
  • Hvordan serverer du dine sider for funktionen begrænset browsere?
    • Hvilke teknikker/processer bruger du?
  • Hvilke forskellige måder findes der for at visuelt skjule indhold (og gør det kun tilgængelig for skærmlæsere)?
  • Har du nogensinde brugt et grid system, og hvis ja, hvad foretrækker du?
  • Har du brugt eller implementeret media queries eller mobile specifikke layouts/CSS?
  • Noget kendskab til styling af SVG?
  • Hvordan optimerer du dine websider til tryk?
  • Hvad skal der til for at skrive effektiv CSS?
  • Bruger du CSS præprocessorer? (SASS, Compass, Stylus, LESS)
    • Hvis ja, beskriv, hvad du kan lide og ikke lide ved CSS præprocessorer som du har brugt.
  • Hvordan vil du implementere en web-design, der ikke bruger standard skrifttyper?
    • Webfonts (skrifttype tjenester som: Google Webfonts, Typekit osv.)
  • Forklare hvordan en browser afgør, hvilke elementer matcher en CSS selector?

Valgfri sjove spørgsmål:

  • Hvad er den fedeste ting, du nogensinde har kodet, hvad er du mest stolt af?
  • Kender du HTML5 bandetegn?
  • Er du nu, eller har du nogensinde været på en båd.
  • Hvad er dine foretrukne dele om de udviklere værktøjer som du bruger?
  • Har du nogen hygge projekter? Hvilken slags?
  • Forklare betydningen af ​​"cornify".
  • På et stykke papir, skriv ned bogstaverne A B C D E lodret. Nu sæt dem i faldende rækkefølge uden at skrive én linje kode.
    • Vent og se, om de vender papiret på hovedet
  • Pirate eller Ninja?
    • Bonus hvis det er en kombination og en god grund blev givet (+2 for zombie abe pirat ninjas)
  • Hvad ville du gøre, hvis ikke Webudvikling?
  • Hvor i verden er Carmen Sandiego?
  • Where in the world is Carmen Sandiego?
    • Tip: deres svar er altid forkert
  • Hvad er dit foretrukne funktion i Internet Explorer?
  • Færdiggør denne sætning: Brendan Eich og Doug Crockford er __________ af javascript.
  • JQuery: et godt bibliotek eller den bedste bibliotek? Diskuter.
  • http://www.w3schools.com/ eller http://w3fools.com/
Edit this page
\ No newline at end of file +Front-end Job Interview Spørgsmål ★ Front-end Job Interview Questions

Front-end Job Interview Spørgsmål

Front-end Job Interview Spørgsmål

@version 1.0

Bemærk: Dette arkiv indeholder et udvalg af spørgsmål, der kan bruges til samtale til stillingen som front-end udvikler. Det kan på ingen måde anbefales at bruge hver eneste spørgsmål på samme kandidat da det ville tage flere timer.

Husk på, at mange af disse spørgsmål er åbne og kan føre til interessante diskussioner, der fortæller dig mere om personens evner end et klart svar ville.

####Originale bidragydere

Bemærk: Størstedelen af spørgsmålene blev plukket fra en tråd skabt og bidraget af følgende personer:

Generelle spørgsmål:

  • Er du på Twitter?
    • Hvis ja, hvem følger du?
  • Er du på GitHub?
    • Hvis ja, hvilke repoer følger du?
  • Hvilke blogs følger du?
  • Hvilke version kontrolsystemer har du brugt (Git, SVN osv.)?
  • Hvad er dit foretrukne udviklingsmiljø? (OS, Editor, Browsere, Tools osv.)
  • Kan du beskrive din arbejdsgang, når du bygger en webside?
  • Kan du beskrive forskellen mellem ‘progressive enhancement’ og ‘graceful degradation’?
    • Bonuspoint beskrive ‘feature detection’
  • Forklar hvad “Semantisk HTML” betyder.
  • Hvilken browser udvikler du primært i og hvad hvilke udviklingsværktøjer bruger du?
  • Hvordan vil du optimere et websites ressourcer?
    • Du leder efter en række løsninger, som kan omfatte:
      • Fil sammenkædning (File concatenation)
      • Fil minification
      • CDN Hosted
      • Caching
      • Osv.
  • Hvorfor er det bedre at have flere domæner som man serverer sit website fra?
    • Hvor mange ressourcer vil en browser hente ad gangen fra et givent domæne?
  • Navn 3 måder at mindske et websites belastning. (formodet eller faktisk lade tid)
  • Hvis du hoppede på et projekt, og de brugte tabulering og du brugte mellemrum, hvad ville du gøre?
    • Foreslå projektet at benytte noget lignende EditorConfig (http://editorconfig.org)
    • Følge konventioner (være consistent)
    • ‘Indføre :retab! kommandoen’
  • Skriv et simpelt billed slideshow side
    • Bonuspoint, hvis det ikke bruger JS.
  • Hvilke værktøjer bruger du til at teste din kode effektivitet?
  • Hvis du kunne mestre en teknologi i år, hvad ville det så være?
  • Forklare vigtigheden af standarder.
  • Hvad er FOUC? Hvordan undgår man FOUC?

HTML-specifikke spørgsmål:

  • Hvad er et doctype gøre, og hvor mange kan du nævne?
  • Hvad er forskellen mellem standards mode og quirks mode?
  • Hvilke Begrænsninger er der med XHTML-sider?
    • Er der nogen problemer med at serverer sider som application/xhtml+xml?
  • Hvordan du serverer man en side med indhold på flere sprog?
    • Hvilken slags ting skal du være opmærksom på, når der skal designes eller udviklings til flersprogede sites?
  • Kan du bruge XHTML syntaks i HTML5?
  • Hvordan bruger du XML i HTML5?
  • Hvad er data- attributter godt for?
  • Hvad er indholds modeller i HTML4 og er de anderledes i HTML5?
  • Tænk på HTML5 som en åben web-platform. Hvad er byggestenene i HTML5?
  • Consider HTML5 as an open web platform. What are the building blocks of HTML5?
  • Beskriv forskellen mellem cookies, sessionStorage og localStorage.

JS-specifikke spørgsmål

  • Hvilke JavaScript-biblioteker har du brugt?
  • Har du nogensinde kigget på kildekoden til bibliotekerne eller frameworks som du bruger?
  • Hvordan er JavaScript forskellig fra Java?
  • Hvad er en Hashtable?
  • Hvad er undefined og undeclared variabler?
  • Hvad er en closure, og hvordan/hvorfor ville du bruge en?
    • Din yndlings mønster bruges til at skabe dem? argyle (Gælder kun for IIFEs)
  • En typisk eksempel på brug af anonyme funktioner?
  • Forklare “JavaScript module pattern”, og hvornår du skal bruge det.
    • Bonuspoint for at nævne ren namespacing.
    • Hvad hvis dine moduler er uden namespace?
  • Hvordan tilrettelægger du din kode? (module pattern, classical inheritance?)
  • Hvad er forskellen mellem ‘host objects’ og ‘native objects’?
  • Forskel mellem:
function Person(){} var person = Person() var person = new Person()
  • Hvad er forskellen mellem .call og .apply?
  • Forklare Function.prototype.bind?
  • Hvornår skal du optimere din kode?
  • Kan du forklare, hvordan arv(inheritance) virker i JavaScript?
  • Hvornår vil du bruge document.write()?
    • De fleste annoncer stadig genereres ved brug af document.write() selvom dets anvendelse er ildeset.
  • Hvad er forskellen mellem feature detection, feature inference, og brug af UA string
  • Forklar AJAX så udførligt som muligt.
  • Forklare hvordan JSONP virker (og hvordan det egentlig ikke er AJAX)
  • Har du nogensinde brugt JavaScript templating?
    • Hvis ja, hvilke biblioteker har du brugt (Mustache.js, Handlebars osv.)
  • Forklare “hoisting”.
  • Forklare “event bubbling”.
  • Hvad er forskellen mellem en “attribute” og en “property”?
  • Hvorfor er det ikke en god idé Udvide indbygget JavaScript-objekter?
  • Hvorfor er Udvidelse af ins en god idé?
  • Forskel mellem document load event og document ready event?
  • Hvad er forskellen mellem == og ===?
  • Forklar, hvordan du ville få en query string parameter fra browservinduets URL.
  • Forklare den samme oprindelse politik med hensyn til JavaScript.
  • Forklare event delegation.
  • Beskrive arv mønstre(inheritance patterns) i JavaScript.
  • Få det til at virke:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Beskrive en strategi for memoization (undgå beregning gentagelser) i JavaScript.
  • Hvorfor hedder det en Ternary erklæring, hvad betyder ordet “Ternary”?
  • Hvad er arity af en funktion?
  • Hvad er "use strict";? hvad er fordelene og ulemperne ved at bruge det?

JS-kode eksempler:

~~3.14

Spørgsmål: Hvilken værdi er returneret fra ovenstående?
Svar: 3

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

Spørgsmål: Hvilken værdi er returneret fra ovenstående?
Svar: "goh angasal a m’i"

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

Spørgsmål: Hvad er værdien af window.foo?
Svar: "bar"
Hvis window.foo er falsk ellers vil det bevare sin værdi.

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

Spørgsmål: Hvad er resultatet af de to ovennævnte alerts?
** Svar: “Hello World” & ReferenceError: bar er ikke defineret **

var foo = [];
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:

  • Forklar “kæde”(chaining).
  • Forklar “deferreds”.
  • Nævn nogle jQuery specifikke optimeringer du kan implementere?
  • Hvad betyder .end() gøre?
  • Hvordan og hvorfor, ville du namespace en bundet event handler?
  • Navn 4 forskellige værdier, du kan give en jQuery metoden.
    • Selector (string), HTML (string), Callback (funktion), HTMLElement, objekt, array, element array, jQuery objekt osv.
  • Hvad er effects (eller fx) queue?
  • Hvad er forskellen mellem .get(), [], og .eq()?
  • Hvad er forskellen mellem .bind(), .live(), og .delegate()?
  • Hvad er forskellen mellem $ og $.fn? Eller hvad er $.fn.
  • Optimer denne selector:
$(".foo div#bar:eq(0)")
  • Forskel mellem delegate() og live()?

CSS-specifikke spørgsmål:

  • Beskriv hvad en “reset” CSS-fil laver, og hvordan den nyttigt.
  • Beskrive Floats og hvordan de virker.
  • Hvilken clearing teknikker findes der og hvilke er passende for hvilken sammenhæng?
  • Forklar CSS sprites, og hvordan du vil indføre dem på en side eller et websted.
  • Hvad er din yndlings billed udskiftning(image replacement) teknik og som bruger du?
  • CSS property hacks, konditionel inkluderet. css filer, eller … noget andet?
  • Hvordan serverer du dine sider for funktionen begrænset browsere?
    • Hvilke teknikker/processer bruger du?
  • Hvilke forskellige måder findes der for at visuelt skjule indhold (og gør det kun tilgængelig for skærmlæsere)?
  • Har du nogensinde brugt et grid system, og hvis ja, hvad foretrækker du?
  • Har du brugt eller implementeret media queries eller mobile specifikke layouts/CSS?
  • Noget kendskab til styling af SVG?
  • Hvordan optimerer du dine websider til tryk?
  • Hvad skal der til for at skrive effektiv CSS?
  • Bruger du CSS præprocessorer? (SASS, Compass, Stylus, LESS)
    • Hvis ja, beskriv, hvad du kan lide og ikke lide ved CSS præprocessorer som du har brugt.
  • Hvordan vil du implementere en web-design, der ikke bruger standard skrifttyper?
    • Webfonts (skrifttype tjenester som: Google Webfonts, Typekit osv.)
  • Forklare hvordan en browser afgør, hvilke elementer matcher en CSS selector?

Valgfri sjove spørgsmål:

  • Hvad er den fedeste ting, du nogensinde har kodet, hvad er du mest stolt af?
  • Kender du HTML5 bandetegn?
  • Er du nu, eller har du nogensinde været på en båd.
  • Hvad er dine foretrukne dele om de udviklere værktøjer som du bruger?
  • Har du nogen hygge projekter? Hvilken slags?
  • Forklare betydningen af ​​"cornify".
  • På et stykke papir, skriv ned bogstaverne A B C D E lodret. Nu sæt dem i faldende rækkefølge uden at skrive én linje kode.
    • Vent og se, om de vender papiret på hovedet
  • Pirate eller Ninja?
    • Bonus hvis det er en kombination og en god grund blev givet (+2 for zombie abe pirat ninjas)
  • Hvad ville du gøre, hvis ikke Webudvikling?
  • Hvor i verden er Carmen Sandiego?
  • Where in the world is Carmen Sandiego?
    • Tip: deres svar er altid forkert
  • Hvad er dit foretrukne funktion i Internet Explorer?
  • Færdiggør denne sætning: Brendan Eich og Doug Crockford er __________ af javascript.
  • JQuery: et godt bibliotek eller den bedste bibliotek? Diskuter.
  • http://www.w3schools.com/ eller http://w3fools.com/
Edit this page
\ No newline at end of file diff --git a/_site/translations/dutch/index.html b/_site/translations/dutch/index.html index 1d42eaf..64e2a28 100644 --- a/_site/translations/dutch/index.html +++ b/_site/translations/dutch/index.html @@ -1 +1 @@ -Front-end interview vragen ★ Front-end Job 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 +Front-end interview vragen ★ Front-end Job 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 diff --git a/_site/translations/farsi/index.html b/_site/translations/farsi/index.html index f72a62e..13ff8a9 100644 --- a/_site/translations/farsi/index.html +++ b/_site/translations/farsi/index.html @@ -1 +1 @@ -سوالات مصاحبه‌ی کاری فرانت‌-اند ★ Front-end Job Interview Questions

سوالات مصاحبه‌ی کاری فرانت‌-اند

سوالات مصاحبه‌ی کاری فرانت‌-اند

این فایل شامل چندین سوال مربوط به مصاحبه‌ی فرانت-اند هست که ازشون میشه در زمان بررسی داوطلب‌های بالقوه استفاده کرد. به هیچ وجه پیشنهاد نمیشه که تمام سوالات اینجا رو از یک داوطلب بپرسین (چون چند ساعت طول می‌کشه). انتخاب چند مورد از این لیست باید بهتون در بررسی توانایی‌هایی که نیاز دارید کمک کنه.

توجه: در نظر داشته باشید که ته خیلی از این سوالات باز هستن و ممکنه به یک بحث جذاب ختم بشن که بیشتر از یک جواب ساده به شما در مورد توانایی‌های شخص مورد نظر اطلاعات میده.

فهرست

  1. سوال‌های عمومی
  2. سوال‌های اچ‌تی‌ام‌ال
  3. سوال‌های سی‌اس‌اس
  4. سوال‌های جی‌اس
  5. سوال‌های تستینگ
  6. سوال‌های پرفورمنس
  7. سوال‌های شبکه
  8. سوال‌های کدینگ
  9. سوال‌های فان

درگیر شدن

  1. مشارکت کنندگان
  2. چطور مشارکت کنید
  3. مجوز

سوال‌های عمومی:

  • این هفته/امروز چه چیزی یاد گرفتی؟
  • چه چیزی توی کد زدن برات جذابه یا به هیجان میارتت؟
  • یه چالش فنی که جدیدا باهاش روبرو شدی چی بود و چطوری حلش کردی؟
  • وقتی میخوایی یه سایت یا یه وب اپلیکیشن بسازی، به چه چیزهای رابط کاربری، امنیتی، کارایی، سئو، نگه‌داری یا تکونولوژی توجه میکنی؟
  • در مورد محیط توسعه‌ی مورد علاقه‌ات بگو.
  • با کدوم سیستم کنترل ورژن آشنا هستی؟
  • میتونی گردش کارت رو برای وقتی که داری یه صفحه وب میسازی توضیح بدی؟
  • اگه ۵ تا استایل‌شیت مختلف داشته باشی، چطوری اون‌ها رو به نحو احسنت با هم توی سایت ادغام میکنی؟
  • میتونی تفاوت بین بهبود تصاعدی و افت شدید رو توضیح بدی؟
  • چطوری اَسِت‌ها/منابع یک وبسایت رو بهینه میکنی؟
  • یک مرورگر در هر لحظه از یک دامنه چنتا منابع دانلود میکنه؟
    • استثناها چیا هستن؟
  • سه روش بگو که بشه لود صفحه رو کم کرد (لود دیداری یا زمان لود واقعی)
  • اگه یهو وارد یه پروژه بشی و ببینی که از تَب استفاده کردن و تو از اسپس استفاده کردی، چیکار میکنی؟
  • توضیح بده که چطوری یه صفحه‌ی اسلایدشوی ساده می‌سازی.
  • اگه میتونستی یک تکنولوژی رو امسال استاد بشی، دنبال چی می‌رفتی؟
  • اهمیت استاندارد‌ها و سازمان‌های مشخص کردن استاندارد رو توضیح بده.
  • فلش محتوی بدون استایل (FOUC) چیه؟ چطوری میشه ازش پرهیز کرد؟
  • توضیح بده که AIRA و صفحه‌خوان‌ها چین و چطوری میشه یک وبسایت رو در دسترس قرار داد؟
  • مزایا و معایب انیمیشن‌های سی‌اس‌اس در مقایسه با جاوااسکریپت رو توضیح بده.
  • CORS مخفف چیه و به چه مسئله‌ای اشاره داره؟

سوال‌های اچ‌تی‌ام‌ال:

  • doctype چیکار میکنه؟
  • فرق بین حالت‌های کاملا استاندارد، تقریبا استاندارد و قدیمی (quirks) چیه؟
  • تفاوت بین اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال چیه؟
  • مشکلی برای سرو کردن صفحه‌ای به صورت application/xhtml+xml هست؟
  • چطور یه صفحه‌ای رو با محتوای چندزبانه سرو میکنی؟
  • وقتی که داری سایت چندزبانه طراحی میکنی یا توسعه میدی، به چه چیزهایی باید حواست باشه؟
  • اتریبیوت‌های data- به چه دردی میخورن؟
  • اچ‌تی‌ام‌ال۵ رو یک پلتفرم وب آزاد در نظر بگیر. بلوک‌های سازنده‌ی اچ‌تی‌ام‌ال۵ چیا هستن؟
  • فرق بین یک <script>، <script async> و <script defer> رو شرح بده.
  • چرا به طور کلی فکر خوبیه که <link>های سی‌اس‌اس رو داخل <head></head> و <script>های جی‌اس رو قبل از </body> قرار داد؟ هیچ استثنایی میشناسی؟
  • رندر شدن تصاعدی چیه؟
  • قبلا زبان‌های تمپلیت‌سازی اچ‌تی‌ام‌ال استفاده کردی؟

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

  • توی سی‌اس‌اس فرق بین کلاس و آی‌دی چیه؟
  • توی سی‌اس‌اس فرق بین «normalizing» و «resetting» چیه؟ خودت کدومشون رو انتخاب میکردی، و چرا؟
  • فلوت رو توضیح بده و بگو چطوری کار میکنن.
  • زد-ایندکس رو توضیح بده و بگو روی هم چینی زمینه چطوری ایجاد میشه.
  • BFC‌ (Block Formatting Context) چیه و چطوری کار میکنه؟
  • روش‌های مختلف برای پاک کردن چیه و هر کدوم به درد چه موقعیتی می‌خوره؟
  • اسپریت‌های سی‌اس‌اس رو توضیح بده و بگو چطوری اون‌ها رو روی صفحه یا سایت پیاده‌سازی می‌کنی؟
  • روش‌های جایگزینی تصویر مورد علاقه‌ات چیا هستن و از هر کدوم کی استفاده می‌کنی؟
  • برای حل کردن مشکلات استایل‌های مختص به مرورگر، چطوری عمل می‌کنی؟
    • از چه تکنیک/پروسه‌ای استفاده می‌کنی؟
  • راه‌های مختلف برای مخفی کردن بصری محتوی (و قابل خوندن کردنشون فقط برای صفحه‌خوان‌ها) چیا هستن؟
  • تا حالا از یک گرید سیستم استفاده کردی، اگه آره، کدومشون رو ترجیح میدی؟
  • تاحالا از مدیا کوئری‌ها یا لی‌اوت/سی‌اس‌اس مخصوص موبایل استفاده یا پیاده‌سازی کردی؟
  • با استایل دادن به SVG آشنا هستی؟
  • یک صفحه‌ی وب رو چطوری برای چاپ بهینه می‌کنی؟
  • چنتا از «مچ‌گیری»‌های لازم برای نوشتن سی‌اس‌اس کارآمد چیا هستن؟
  • مزایا و معایب استفاده از پیش‌پردازنده‌های سی‌اس‌اس چیا هستن؟
    • توضیح بده چه چیزایی از پیش‌پردازنده‌های سی‌اس‌اس که قبلا استفاده کردی رو دوست داشتی و دوست نداشتی.
  • یه دیزاین کلی که فونت‌های غیراستاندارد داره رو چطوری پیاده سازی می‌کنی؟
  • توضیح بده که یک مرورگر چطوری مشخص میکنه کدوم المنت با کدوم سلکتور سی‌اس‌اس مچ میشه.
  • سودو المنت‌ها رو توصیف کن و بحث کن که برای چی ازشون استفاده می‌کنن.
  • چیزی رو که از باکس مدل فهمیدی توضیح بده و بگو چطوری توی سی‌اس‌اس به مرورگر میفهمونی تا لی‌اوتت رو توی باکس مدل‌های متفاوتی رندر کنه.
  • * { box-sizing: border-box; } چیکار میکنه؟ فوایدش چیه؟
  • هر چی مقدار برای پراپرتی دیسپلی یادت میاد رو لیست کن.
  • فرق بین اینلاین و اینلاین-بلاک چیه؟
  • فرق بین یک المنت با پوزیشن ریلیتیو، فیکسد، ابسولوت و استایتک چیه؟
  • «C» داخل سی‌اس‌اس برای Casacading یا آبشاری هست. اولویت توی اختصاص استایل چطوری مشخص می‌شه (چنتا مثال)؟
  • از چه فریم‌ورک‌های سی‌اس‌اس به صورت لوکال یا توی پروداکشن استفاده کردی؟
  • تا حالا با فلکس‌باک یا ویژگی‌های جدید گرید توی سی‌اس‌اس بازی بازی کردی؟
  • طراحی ریسپانسیو با طراحی آداپتیو چه تفاوتی داره؟
  • تاحالا با گرافیک رتینا کار کردی؟ اگه آره، کی و از چه تکنیک‌هایی استفاده کردی؟
  • دلیل هست که از translate() به جای جاگذاری ابسولوت یا برعکس استفاده کنی؟ و چرا؟

سوال‌های جی‌اس:

  • ایونت دلیگیشن رو توضیح بده.
  • توضیح بده this توی جاوااسکریپت چطوری کار میکنه.
  • توضیح بده ارث‌بری پروتوتایپی چطوری کار میکنه.
  • نظرت در مورد AMD در برابر CommonJS چیه؟
  • توضیح بده چرا قطعه‌ی روبرو به عنوان یک IIFE کار نمیکنه: function foo(){ }();.
    • چه چیزی احتیاج داره تا به شیوه‌ی صحیح IIFE بشه؟
  • فرق بین یک متغییر که null، undefined یا اعلام نشده هست چیه؟
    • چطوری وضعیت هر کدوم از این‌ها رو چک می‌کنی؟
  • کلوژر چیه و چطور/چرا ازش استفاده می‌کنی؟
  • استفاده‌ی معمول از فانکشن‌های انانیموس چیه؟
  • چطوری کدهات رو مرتب میکنی؟ (ماژول پترن، ارث‌بری کلاسیک)
  • فرق بین آبجکت‌های هاست و آبجکت‌های نیتیو چیه؟
  • فرق بین: function Person(){}، var person = Person()، و var person = new Person()؟
  • فرق بین .call و .apply چیه؟
  • Function.prototype.bind رو توضیح بده.
  • چه موقع از document.write() استفاده میکنی؟
  • فرق بین تشخیص ویژگی، استنتاج ویژگی و استفاده از استرینگ UA چیه؟
  • ایجکس رو تا تمام جزئیاتی که می‌تونی توضیح بده.
  • مزایا و معایب استفاده از ایجکس چیا هستن؟
  • توضیح بده که JSONP چطوری کار میکنه (و چطوری واقعا ایجکس نیست؟)
  • تاحالا از تمپلیت‌سازی جاوااسکریپتی استفاده کردی؟
    • اگه آره، از چه کتابخونه‌هایی استفاده کردی؟
  • «هویستینگ» رو توضیح بده.
  • ایونت بابلینگ رو توضیح بده.
  • فرق بین یک «اتریبیوت» و یک «پراپرتی» چیه؟
  • چرا اکستند کردن یه آبجکت جاوااسکریپتی بیلت-این فکر خوبی نیست؟
  • فرق بین ایونت load داکیومنت و DOMContentLoaded چیه؟
  • فرق بین == و === چیه؟
  • سیاستگذاری سیم-اوریجین رو از دید جاوااسکریپت توضیح بده.
  • کاری کن این کار کنه:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • چرا میگن اکسپرشن Ternary، کلمه‌ی «Ternary» چه چیزی رو میگه؟
  • "use strict"; چیه؟ مزایا و معایب استفاده ازش چیه؟
  • یه حلقه بساز که تا 100 تکرار بشه در حالی که برای مضارب 3 "fizz"، برای مضارب 5 "buzz" و برای مضارب 3 و 5 "fizzbuzz" رو خروجی بده.
  • چرا به طور کلی، فکر خوبیه تا اسکوپ جنرال یک وبسایت رو همینطوری که هست بزاریم بمونه و هیچوقت بهش دست نزنیم؟
  • چرا از چیزهایی مثل ایونت load استفاده میکنی؟ این ایونت معایبی هم داره؟ جایگزینی میشناسی، و چرا از اونها استفاده میکنی؟
  • توضیح بده که یک اپ سینگل پیج چیه و چطوری میشه سئوی یکیشون رو درست کرد؟
  • نهایت تجربه‌ات توی کار کردن ب پرامیس‌ها و/یا پروفیل‌هاش چیه؟
  • مزایا و معایب استفاده از پرامیس‌ها به جای کال‌بک‌ها چیه؟
  • چنتا از مزایا/معایب نوشتن کدهای جاوااسکریپت به زبانی که به جاوااسکریپت کامپایل میشه چیا هست؟
  • از چه ابزارها و تکنیک‌هایی برای دیباگ کردن کدهای جاوااسکریپت استفاده می‌کنی؟
  • از چه ساختار زبانی برای طی کردن پراپرتی‌های یک آبجکت یا آیتم‌های آرایه استفاده میکنی؟
  • تفاوت بین آبجکت‌های تغییرپذیر و تغییرناپذیر رو توی جاوااسکریپت توضیح بده.
    • یه مثال از آبجکت تغییرناپذیر توی جاوااسکریپت بزن.
    • مزایا و معایب تغییرناپذیری چیه؟
    • چطوری میتونی توی کدهای خودت به تغییرناپذیری رو اجرا کنی؟
  • فرق بین فانکشن‌های همگام و غیرهمگام رو توضیح بده.
  • ایونت لوپ چیه؟
    • فرق بین استک کال و صف تسک چیه؟
  • فرق بین استفاده از foo توی function foo() {} و var foo = function() {} رو توضیح بده.

سوال‌های تستینگ:

  • مزایا/معایب تست کردن کدهات چیا هستن؟
  • از چه ابزارهایی برای تست کردن فانکشنالیتی کدهات استفاده می‌کنی؟
  • فرق بین تست یونیت و فانکشنال/اینتگریشن تست چیه؟
  • هدف ابزارهای لینت کردن کد چی هست؟

سوال‌های پرفورمنس:

  • از چه ابزاری استفاده میکنی تا یه باگ مربوط به پرفورمنس رو توی کدهات پیدا کنی؟
  • چه راه‌هایی وجود داره تا پرفورمنس اسکرول کردن سایتت بهبود پیدا کنه؟
  • فرق بین لی‌اوت، پینتینگ و کامپوزیتینگ رو توضیح بده.

سوال‌های شبکه:

  • از قدیم، چرا همیشه بهتر بوده تا اَسِت‌های سایت رو از دامین‌های مختلف سرو کرد؟
  • بهترین تعریفی رو که از پردازشی وقتی که یوآرال یک وبسایتی رو تایپ میکنی تا وقتی که لود شدنش روی صفحه‌ی نمایشت تموم بشه انجام میشه، ارائه بده.
  • فرق بین ایونت‌های Long-Polling، Websocketها و Server-Sent چیه؟
  • هدرهای ریکوئست و ریسپانس‌های زیر رو توضیح بده:
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • متدهای اچ‌تی‌تی‌پی چی هستن؟ تمام متدهای اچ‌تی‌تی‌پی که میشناسی لیست کن و توضیحشون بده.

سوال‌های کدینگ:

سوال: مقدار foo چیست؟

var foo = 10 + '20';

سوال: چیکار میکنی تا این کار کنه؟

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

سوال: مقدار برگشته از عبارت زیر چیست؟

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

سوال: مقدار window.foo چیست؟

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

سوال: خروجی دو آلرت زیر چیست؟

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

سوال: مقدار foo.length چیست؟

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

سوال: مقدار foo.x چیست؟

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

سوال: کد زیر چه چیزی رو پرینت می‌کند؟

console.log('one');
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 +سوالات مصاحبه‌ی کاری فرانت‌-اند ★ Front-end Job Interview Questions

سوالات مصاحبه‌ی کاری فرانت‌-اند

سوالات مصاحبه‌ی کاری فرانت‌-اند

این فایل شامل چندین سوال مربوط به مصاحبه‌ی فرانت-اند هست که ازشون میشه در زمان بررسی داوطلب‌های بالقوه استفاده کرد. به هیچ وجه پیشنهاد نمیشه که تمام سوالات اینجا رو از یک داوطلب بپرسین (چون چند ساعت طول می‌کشه). انتخاب چند مورد از این لیست باید بهتون در بررسی توانایی‌هایی که نیاز دارید کمک کنه.

توجه: در نظر داشته باشید که ته خیلی از این سوالات باز هستن و ممکنه به یک بحث جذاب ختم بشن که بیشتر از یک جواب ساده به شما در مورد توانایی‌های شخص مورد نظر اطلاعات میده.

فهرست

  1. سوال‌های عمومی
  2. سوال‌های اچ‌تی‌ام‌ال
  3. سوال‌های سی‌اس‌اس
  4. سوال‌های جی‌اس
  5. سوال‌های تستینگ
  6. سوال‌های پرفورمنس
  7. سوال‌های شبکه
  8. سوال‌های کدینگ
  9. سوال‌های فان

درگیر شدن

  1. مشارکت کنندگان
  2. چطور مشارکت کنید
  3. مجوز

سوال‌های عمومی:

  • این هفته/امروز چه چیزی یاد گرفتی؟
  • چه چیزی توی کد زدن برات جذابه یا به هیجان میارتت؟
  • یه چالش فنی که جدیدا باهاش روبرو شدی چی بود و چطوری حلش کردی؟
  • وقتی میخوایی یه سایت یا یه وب اپلیکیشن بسازی، به چه چیزهای رابط کاربری، امنیتی، کارایی، سئو، نگه‌داری یا تکونولوژی توجه میکنی؟
  • در مورد محیط توسعه‌ی مورد علاقه‌ات بگو.
  • با کدوم سیستم کنترل ورژن آشنا هستی؟
  • میتونی گردش کارت رو برای وقتی که داری یه صفحه وب میسازی توضیح بدی؟
  • اگه ۵ تا استایل‌شیت مختلف داشته باشی، چطوری اون‌ها رو به نحو احسنت با هم توی سایت ادغام میکنی؟
  • میتونی تفاوت بین بهبود تصاعدی و افت شدید رو توضیح بدی؟
  • چطوری اَسِت‌ها/منابع یک وبسایت رو بهینه میکنی؟
  • یک مرورگر در هر لحظه از یک دامنه چنتا منابع دانلود میکنه؟
    • استثناها چیا هستن؟
  • سه روش بگو که بشه لود صفحه رو کم کرد (لود دیداری یا زمان لود واقعی)
  • اگه یهو وارد یه پروژه بشی و ببینی که از تَب استفاده کردن و تو از اسپس استفاده کردی، چیکار میکنی؟
  • توضیح بده که چطوری یه صفحه‌ی اسلایدشوی ساده می‌سازی.
  • اگه میتونستی یک تکنولوژی رو امسال استاد بشی، دنبال چی می‌رفتی؟
  • اهمیت استاندارد‌ها و سازمان‌های مشخص کردن استاندارد رو توضیح بده.
  • فلش محتوی بدون استایل (FOUC) چیه؟ چطوری میشه ازش پرهیز کرد؟
  • توضیح بده که AIRA و صفحه‌خوان‌ها چین و چطوری میشه یک وبسایت رو در دسترس قرار داد؟
  • مزایا و معایب انیمیشن‌های سی‌اس‌اس در مقایسه با جاوااسکریپت رو توضیح بده.
  • CORS مخفف چیه و به چه مسئله‌ای اشاره داره؟

سوال‌های اچ‌تی‌ام‌ال:

  • doctype چیکار میکنه؟
  • فرق بین حالت‌های کاملا استاندارد، تقریبا استاندارد و قدیمی (quirks) چیه؟
  • تفاوت بین اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال چیه؟
  • مشکلی برای سرو کردن صفحه‌ای به صورت application/xhtml+xml هست؟
  • چطور یه صفحه‌ای رو با محتوای چندزبانه سرو میکنی؟
  • وقتی که داری سایت چندزبانه طراحی میکنی یا توسعه میدی، به چه چیزهایی باید حواست باشه؟
  • اتریبیوت‌های data- به چه دردی میخورن؟
  • اچ‌تی‌ام‌ال۵ رو یک پلتفرم وب آزاد در نظر بگیر. بلوک‌های سازنده‌ی اچ‌تی‌ام‌ال۵ چیا هستن؟
  • فرق بین یک <script>، <script async> و <script defer> رو شرح بده.
  • چرا به طور کلی فکر خوبیه که <link>های سی‌اس‌اس رو داخل <head></head> و <script>های جی‌اس رو قبل از </body> قرار داد؟ هیچ استثنایی میشناسی؟
  • رندر شدن تصاعدی چیه؟
  • قبلا زبان‌های تمپلیت‌سازی اچ‌تی‌ام‌ال استفاده کردی؟

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

  • توی سی‌اس‌اس فرق بین کلاس و آی‌دی چیه؟
  • توی سی‌اس‌اس فرق بین «normalizing» و «resetting» چیه؟ خودت کدومشون رو انتخاب میکردی، و چرا؟
  • فلوت رو توضیح بده و بگو چطوری کار میکنن.
  • زد-ایندکس رو توضیح بده و بگو روی هم چینی زمینه چطوری ایجاد میشه.
  • BFC‌ (Block Formatting Context) چیه و چطوری کار میکنه؟
  • روش‌های مختلف برای پاک کردن چیه و هر کدوم به درد چه موقعیتی می‌خوره؟
  • اسپریت‌های سی‌اس‌اس رو توضیح بده و بگو چطوری اون‌ها رو روی صفحه یا سایت پیاده‌سازی می‌کنی؟
  • روش‌های جایگزینی تصویر مورد علاقه‌ات چیا هستن و از هر کدوم کی استفاده می‌کنی؟
  • برای حل کردن مشکلات استایل‌های مختص به مرورگر، چطوری عمل می‌کنی؟
    • از چه تکنیک/پروسه‌ای استفاده می‌کنی؟
  • راه‌های مختلف برای مخفی کردن بصری محتوی (و قابل خوندن کردنشون فقط برای صفحه‌خوان‌ها) چیا هستن؟
  • تا حالا از یک گرید سیستم استفاده کردی، اگه آره، کدومشون رو ترجیح میدی؟
  • تاحالا از مدیا کوئری‌ها یا لی‌اوت/سی‌اس‌اس مخصوص موبایل استفاده یا پیاده‌سازی کردی؟
  • با استایل دادن به SVG آشنا هستی؟
  • یک صفحه‌ی وب رو چطوری برای چاپ بهینه می‌کنی؟
  • چنتا از «مچ‌گیری»‌های لازم برای نوشتن سی‌اس‌اس کارآمد چیا هستن؟
  • مزایا و معایب استفاده از پیش‌پردازنده‌های سی‌اس‌اس چیا هستن؟
    • توضیح بده چه چیزایی از پیش‌پردازنده‌های سی‌اس‌اس که قبلا استفاده کردی رو دوست داشتی و دوست نداشتی.
  • یه دیزاین کلی که فونت‌های غیراستاندارد داره رو چطوری پیاده سازی می‌کنی؟
  • توضیح بده که یک مرورگر چطوری مشخص میکنه کدوم المنت با کدوم سلکتور سی‌اس‌اس مچ میشه.
  • سودو المنت‌ها رو توصیف کن و بحث کن که برای چی ازشون استفاده می‌کنن.
  • چیزی رو که از باکس مدل فهمیدی توضیح بده و بگو چطوری توی سی‌اس‌اس به مرورگر میفهمونی تا لی‌اوتت رو توی باکس مدل‌های متفاوتی رندر کنه.
  • * { box-sizing: border-box; } چیکار میکنه؟ فوایدش چیه؟
  • هر چی مقدار برای پراپرتی دیسپلی یادت میاد رو لیست کن.
  • فرق بین اینلاین و اینلاین-بلاک چیه؟
  • فرق بین یک المنت با پوزیشن ریلیتیو، فیکسد، ابسولوت و استایتک چیه؟
  • «C» داخل سی‌اس‌اس برای Casacading یا آبشاری هست. اولویت توی اختصاص استایل چطوری مشخص می‌شه (چنتا مثال)؟
  • از چه فریم‌ورک‌های سی‌اس‌اس به صورت لوکال یا توی پروداکشن استفاده کردی؟
  • تا حالا با فلکس‌باک یا ویژگی‌های جدید گرید توی سی‌اس‌اس بازی بازی کردی؟
  • طراحی ریسپانسیو با طراحی آداپتیو چه تفاوتی داره؟
  • تاحالا با گرافیک رتینا کار کردی؟ اگه آره، کی و از چه تکنیک‌هایی استفاده کردی؟
  • دلیل هست که از translate() به جای جاگذاری ابسولوت یا برعکس استفاده کنی؟ و چرا؟

سوال‌های جی‌اس:

  • ایونت دلیگیشن رو توضیح بده.
  • توضیح بده this توی جاوااسکریپت چطوری کار میکنه.
  • توضیح بده ارث‌بری پروتوتایپی چطوری کار میکنه.
  • نظرت در مورد AMD در برابر CommonJS چیه؟
  • توضیح بده چرا قطعه‌ی روبرو به عنوان یک IIFE کار نمیکنه: function foo(){ }();.
    • چه چیزی احتیاج داره تا به شیوه‌ی صحیح IIFE بشه؟
  • فرق بین یک متغییر که null، undefined یا اعلام نشده هست چیه؟
    • چطوری وضعیت هر کدوم از این‌ها رو چک می‌کنی؟
  • کلوژر چیه و چطور/چرا ازش استفاده می‌کنی؟
  • استفاده‌ی معمول از فانکشن‌های انانیموس چیه؟
  • چطوری کدهات رو مرتب میکنی؟ (ماژول پترن، ارث‌بری کلاسیک)
  • فرق بین آبجکت‌های هاست و آبجکت‌های نیتیو چیه؟
  • فرق بین: function Person(){}، var person = Person()، و var person = new Person()؟
  • فرق بین .call و .apply چیه؟
  • Function.prototype.bind رو توضیح بده.
  • چه موقع از document.write() استفاده میکنی؟
  • فرق بین تشخیص ویژگی، استنتاج ویژگی و استفاده از استرینگ UA چیه؟
  • ایجکس رو تا تمام جزئیاتی که می‌تونی توضیح بده.
  • مزایا و معایب استفاده از ایجکس چیا هستن؟
  • توضیح بده که JSONP چطوری کار میکنه (و چطوری واقعا ایجکس نیست؟)
  • تاحالا از تمپلیت‌سازی جاوااسکریپتی استفاده کردی؟
    • اگه آره، از چه کتابخونه‌هایی استفاده کردی؟
  • «هویستینگ» رو توضیح بده.
  • ایونت بابلینگ رو توضیح بده.
  • فرق بین یک «اتریبیوت» و یک «پراپرتی» چیه؟
  • چرا اکستند کردن یه آبجکت جاوااسکریپتی بیلت-این فکر خوبی نیست؟
  • فرق بین ایونت load داکیومنت و DOMContentLoaded چیه؟
  • فرق بین == و === چیه؟
  • سیاستگذاری سیم-اوریجین رو از دید جاوااسکریپت توضیح بده.
  • کاری کن این کار کنه:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • چرا میگن اکسپرشن Ternary، کلمه‌ی «Ternary» چه چیزی رو میگه؟
  • "use strict"; چیه؟ مزایا و معایب استفاده ازش چیه؟
  • یه حلقه بساز که تا 100 تکرار بشه در حالی که برای مضارب 3 "fizz"، برای مضارب 5 "buzz" و برای مضارب 3 و 5 "fizzbuzz" رو خروجی بده.
  • چرا به طور کلی، فکر خوبیه تا اسکوپ جنرال یک وبسایت رو همینطوری که هست بزاریم بمونه و هیچوقت بهش دست نزنیم؟
  • چرا از چیزهایی مثل ایونت load استفاده میکنی؟ این ایونت معایبی هم داره؟ جایگزینی میشناسی، و چرا از اونها استفاده میکنی؟
  • توضیح بده که یک اپ سینگل پیج چیه و چطوری میشه سئوی یکیشون رو درست کرد؟
  • نهایت تجربه‌ات توی کار کردن ب پرامیس‌ها و/یا پروفیل‌هاش چیه؟
  • مزایا و معایب استفاده از پرامیس‌ها به جای کال‌بک‌ها چیه؟
  • چنتا از مزایا/معایب نوشتن کدهای جاوااسکریپت به زبانی که به جاوااسکریپت کامپایل میشه چیا هست؟
  • از چه ابزارها و تکنیک‌هایی برای دیباگ کردن کدهای جاوااسکریپت استفاده می‌کنی؟
  • از چه ساختار زبانی برای طی کردن پراپرتی‌های یک آبجکت یا آیتم‌های آرایه استفاده میکنی؟
  • تفاوت بین آبجکت‌های تغییرپذیر و تغییرناپذیر رو توی جاوااسکریپت توضیح بده.
    • یه مثال از آبجکت تغییرناپذیر توی جاوااسکریپت بزن.
    • مزایا و معایب تغییرناپذیری چیه؟
    • چطوری میتونی توی کدهای خودت به تغییرناپذیری رو اجرا کنی؟
  • فرق بین فانکشن‌های همگام و غیرهمگام رو توضیح بده.
  • ایونت لوپ چیه؟
    • فرق بین استک کال و صف تسک چیه؟
  • فرق بین استفاده از foo توی function foo() {} و var foo = function() {} رو توضیح بده.

سوال‌های تستینگ:

  • مزایا/معایب تست کردن کدهات چیا هستن؟
  • از چه ابزارهایی برای تست کردن فانکشنالیتی کدهات استفاده می‌کنی؟
  • فرق بین تست یونیت و فانکشنال/اینتگریشن تست چیه؟
  • هدف ابزارهای لینت کردن کد چی هست؟

سوال‌های پرفورمنس:

  • از چه ابزاری استفاده میکنی تا یه باگ مربوط به پرفورمنس رو توی کدهات پیدا کنی؟
  • چه راه‌هایی وجود داره تا پرفورمنس اسکرول کردن سایتت بهبود پیدا کنه؟
  • فرق بین لی‌اوت، پینتینگ و کامپوزیتینگ رو توضیح بده.

سوال‌های شبکه:

  • از قدیم، چرا همیشه بهتر بوده تا اَسِت‌های سایت رو از دامین‌های مختلف سرو کرد؟
  • بهترین تعریفی رو که از پردازشی وقتی که یوآرال یک وبسایتی رو تایپ میکنی تا وقتی که لود شدنش روی صفحه‌ی نمایشت تموم بشه انجام میشه، ارائه بده.
  • فرق بین ایونت‌های Long-Polling، Websocketها و Server-Sent چیه؟
  • هدرهای ریکوئست و ریسپانس‌های زیر رو توضیح بده:
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • متدهای اچ‌تی‌تی‌پی چی هستن؟ تمام متدهای اچ‌تی‌تی‌پی که میشناسی لیست کن و توضیحشون بده.

سوال‌های کدینگ:

سوال: مقدار foo چیست؟

var foo = 10 + '20';

سوال: چیکار میکنی تا این کار کنه؟

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

سوال: مقدار برگشته از عبارت زیر چیست؟

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

سوال: مقدار window.foo چیست؟

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

سوال: خروجی دو آلرت زیر چیست؟

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

سوال: مقدار foo.length چیست؟

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

سوال: مقدار foo.x چیست؟

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

سوال: کد زیر چه چیزی رو پرینت می‌کند؟

console.log('one');
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 diff --git a/_site/translations/french/index.html b/_site/translations/french/index.html index ced1061..14310d2 100644 --- a/_site/translations/french/index.html +++ b/_site/translations/french/index.html @@ -1 +1 @@ -Questionnaire de recrutement pour développeur front-end ★ Front-end Job 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 Job 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 diff --git a/_site/translations/german/index.html b/_site/translations/german/index.html index 541603a..174ef5a 100644 --- a/_site/translations/german/index.html +++ b/_site/translations/german/index.html @@ -1 +1 @@ -Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Job 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 +Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Job 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 diff --git a/_site/translations/greek/index.html b/_site/translations/greek/index.html index ba94cc4..bd178cd 100644 --- a/_site/translations/greek/index.html +++ b/_site/translations/greek/index.html @@ -1 +1 @@ -Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Job 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 +Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Job 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 diff --git a/_site/translations/hebrew/index.html b/_site/translations/hebrew/index.html index 4c0ad41..a3c106b 100644 --- a/_site/translations/hebrew/index.html +++ b/_site/translations/hebrew/index.html @@ -1,4 +1,4 @@ -שאלות לראיונות עבודה בנושא פיתוח - צד לקוח ★ Front-end Job Interview Questions

שאלות לראיונות עבודה בנושא פיתוח - צד לקוח

שאלות לראיונות עבודה בנושא פיתוח - צד לקוח

המסמך כולל מספר שאלות המופיעות בראיונות עבודה בנושא צד-לקוח היכולות לסייע להעריך את הידע של מועמדים פוטנציאליים. אין צורך להשתמש בכל אחת מהשאלות הנ״ל על מועמד אחד מסוים (הדבר יימשך שעות). בחירת מספר שאלות מסוימות מהרשימה יאפשר למראיין להעריך את הכישורים הנדרשים מהמועמד.


שימו לב כי שאלות רבות ברשימה הן פתוחות, ועשויות להוביל לדיון מעניין בנושא התשובה או הגישה של המועמד, וכתוצאה מכך ללמד את המראיין הרבה יותר לגבי כישורי המועמד מאשר שאלות סגורות.

תוכן העניינים:

  1. שאלות כלליות
  2. שאלות בנושא HTML
  3. שאלות בנושא CSS
  4. שאלות בנושא JavaScript
  5. שאלות בנושא נגישות (קישור לאתר חיצוני)
  6. שאלות בנושא בדיקות (Testing)
  7. שאלות בנושא ביצועים (Performance)
  8. שאלות בנושא רשתות (Networks)
  9. שאלות תכנות
  10. שאלות כיפיות

כיצד לסייע לפרויקט

  1. רשימת המשתתפים
  2. כיצד לתרום לפרויקט
  3. רשיונות

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

  • מה למדת אתמול/ בשבוע האחרון?
  • מה הדבר שמרגש אותך בנוגע לתכנות?
  • ספר/י על אתגר טכני שחווית לאחרונה, וכיצד פתרת אותו?
  • באילו שיטות השתמשת כדי לשפר ביצועים בתהליך הבנייה או התחזוקה של אתר?
  • ספר/י על עקרונות SEO שבהם השתמשת לאחרונה.
  • האם יש לך דוגמאות לטכניקות נפוצות שבהן השתמשת כדי להתמודד עם אתגרי האבטחה בפיתוח צד-לקוח?
  • באילו פעולות נקטת בפרויקטים שלך כדי לשפר את יכולת הניהול והתחזוקה של הקוד שלך?
  • ספר/י על סביבת הפיתוח המועדפת עליך/עלייך.
  • באיזו מערכת/מערכות ניהול גרסאות (Version Contro System) אתה נוהג להשתמש?
  • תאר/י את תהליך העבודה שלך כאשר את/ה בונה אתר.
  • אם יש לך 5 גיליונות סגנונות (stylesheets) שונים, מהי הדרך הטובה ביותר להטמיע אותם באתר?
  • מה ההבדל בין "Progressive Enhancement" לבין "Graceful Degradation"?
  • כיצד תבצע/י אופטימיזציה לרשימת המשאבים (assets/ resources) של האתר?
  • כמה משאבים (resources) יוריד הדפדפן מדומיין נתון בכל פעם? מהם המקרים יוצאי הדופן?
  • מנה/מני 3 דרכים להפחתת זמן טעינת הדף (זמן ממשי או הזמן כפי שהוא נתפס ע״י המשתמש).
  • הצטרפת לפרויקט, והצוות משתמש בטאבים בעוד שאת/ה משתמש/ת ברווחים. מה תעשה/י?
  • תאר/י כיצד תיצור/תצרי דף מצגת פשוט.
  • לו היית יכול/ה ללמוד באופן יסודי טכנולוגיה אחת במהלך השנה הקרובה - איזו טכנולוגיה זו היתה?
  • הסבר/ הסבירי את החשיבות של standards ושל standards bodies.
  • מהו "Flash" או תוכן בלתי מעוצב, וכיצד תימנע/י מ-FOUC?
  • מהם "ARIA" וקוראי מסך, וכיצד תיצור/תצרי אתר נגיש?
  • מנה כמה נקודות בעד ונגד אנימציית CSS ואנימציית JavaScript.
  • מהן ראשי התיבות "CORS" ובאיזה תחום הן עוסקות?

שאלות בנושא HTML:

  • מה עושה doctype?
  • כיצד תספק/י דף/אתר במספר שפות?
  • לאילו דברים חשוב להיזהר או לשים לב כשבונים אתרים במספר שפות?
  • מה התועלת של התואר (attribute) בשם "-data"?
  • מהן אבני היסוד של HTML5?
  • תאר את ההבדלים בין "cookie", "sessionStorage", ו"localStorage".
  • תאר את ההבדלים בין <script>, <script async>, ו"<script defer>".
  • מדוע זה בדרך כלל רעיון טוב למקם את תגיד ה-CSS מסוג <link> בין תגיות <head></head> וקוד JS בדיוק לפני התגית <body/>? האם ישנם מקרים יוצאי דופן?
  • מהו progressive rendering?
  • לשם מה משתמשים בתכונה (attribute) בשם srcset בתגית image? הסבר/הסבירי את התהליך שהדפדפן משתמש בו על מנת להעריך את התכונה.
  • האם השתמשת ב-HTML templating languages אחרות בעבר?

שאלות בנושא CSS

  • מהי selector specificity וכיצד זה עובד?
  • מה ההבדל בין resetting לבין normalizing הגדרות CSS? באילו מהשניים תבחר/י ומדוע?
  • תאר/י מהם Floats וכיצד הם עובדים.
  • תאר/י מהו z-index וכיצד stacking context נוצר.
  • תאר/י מהו BFC או Block Formatting Context, וכיצד הוא עובד.
  • מהן צורות ה-clearing השונות, ובאילו מהן כדאי להשתמש ולשם מה?
  • כיצד תטפל/י בבעיות עיצוב המאפיינות דפדפן מסוים?
  • כיצד תתאים/י את האתר שלך לדפדפנים בעלי מגבלת מאפיינים (feature-constrained)? באילו טכניקות/ תהליכים תשתמש/י?
  • מהן הדרכים השונות להסתיר תוכן ולאפשר תצוגה שלו באמצעות קוראי מסך?
  • האם השתמשת בעבר בשיטת העיצוב grid? במידה וכן - איזו שיטה את/ה מעדיפ/ה?
  • האם השתמשת ב-media queries או בעיצוב מיוחד למובייל?
  • האם את/ה מכיר/ה את המונח styling SVG?
  • האם תוכל לתת דוגמה לסוג נוסף של '@media' פרט ל-'screen'?
  • מהם כמה עקרונות של כתיבת CSS אפקטיבי?
  • מה היתרונות/ חסרונות בשימוש במעבדי CSS? תאר מה אהבת/ אהבת פחות במעבדי CSS שבהם השתמשת בעבר.
  • כיצד תטמיע עיצוב לווב שמשתמש בפונטים לא סטנדרטיים?
  • הסבר/י כיצד הדפדפן קובע אילו אלמנטים מתאימים לאיזה סלקטור?
  • הסבר/י מהם pseudo-elements ולמה הם משמשים?
  • הסבר/י את הבנתך בנושא box model, וכיצד תאמר/י לדפדפן לרנדר את העיצוב במודל box model אחר?
  • מה עושה { ;box-sizing: border-box } *? מה יתרונותיו?
  • על מה אחראי התואר display? תנ/י דוגמה למספר שימושים שלו.
  • מה ההבדל בין inline לבין inline-block?
  • מה ההבדל בין relative, fixed, absolute ו-statically positioned?
  • באילו CSS frameworks השתמשת באופן מקומי, או בפרודקשן? כיצד תשנה/ תשפר אותם?
  • האם יצא לך להתנסות ב-CSS Flexbox או Grid specs?
  • הסבר/י את ההבדל בין לבנות אתר ריספונסיבי לבין לבנות אתר בגישת mobile first.
  • האם עבדת עם גרפיקת רטינה? במידה וכן, מתי ובאילו טכניקות השתמשת?
  • האם ישנה סיבה שבה תשתמש/י ב-()translate במקום absolute positioning, ולהיפך? מדוע?

שאלות בנושא JavaScript

  • הסבר/י את המונח event delegation.
  • הסבר/י כיצד this עובד בג׳אווהסקריפט.
  • הסבר/י כיצד prototypal inheritance עובדת.
  • מה דעתך על AMD לעומת CommonJS?
  • הסבר/י מדוע הקוד הבא לא יעבוד כ-IIFE:
    function foo(){ }();

    מה יש לשנות על מנת שהקוד יעבוד?
  • מה ההבדל בין null, undefined, ומשתנה שלא הוגדר? כיצד תבדוק/י את מצבם של משתנים מסוג זה?
  • מהו closure וכיצד תשתמש/י בו?
  • הסבר/י את ההבדל בין לולאת forEach לבין לולאת .map(), ומה הסיבה לבחור אחד על פני האחר?
  • לשם מה משתמשים על פי רוב בפונקציה אנונימית?
  • כיצד את/ה מארגן/ת את הקוד שלך (תבנית מודולים, תורשת קלאסית)?
  • מה ההבדל בין host objects לבין native objects?
  • מה ההבדלים בין שלוש הדוגמאות הבאות:
    +שאלות לראיונות עבודה בנושא פיתוח - צד לקוח ★ Front-end Job Interview Questions
    שאלות לראיונות עבודה בנושא פיתוח - צד לקוח
    שאלות לראיונות עבודה בנושא פיתוח - צד לקוח
    המסמך כולל מספר שאלות המופיעות בראיונות עבודה בנושא צד-לקוח היכולות לסייע להעריך את הידע של מועמדים פוטנציאליים. אין צורך להשתמש בכל אחת מהשאלות הנ״ל על מועמד אחד מסוים (הדבר יימשך שעות). בחירת מספר שאלות מסוימות מהרשימה יאפשר למראיין להעריך את הכישורים הנדרשים מהמועמד.

    שימו לב כי שאלות רבות ברשימה הן פתוחות, ועשויות להוביל לדיון מעניין בנושא התשובה או הגישה של המועמד, וכתוצאה מכך ללמד את המראיין הרבה יותר לגבי כישורי המועמד מאשר שאלות סגורות.
    תוכן העניינים:
    1. שאלות כלליות
    2. שאלות בנושא HTML
    3. שאלות בנושא CSS
    4. שאלות בנושא JavaScript
    5. שאלות בנושא נגישות (קישור לאתר חיצוני)
    6. שאלות בנושא בדיקות (Testing)
    7. שאלות בנושא ביצועים (Performance)
    8. שאלות בנושא רשתות (Networks)
    9. שאלות תכנות
    10. שאלות כיפיות
    כיצד לסייע לפרויקט
    1. רשימת המשתתפים
    2. כיצד לתרום לפרויקט
    3. רשיונות
    שאלות כלליות:
    • מה למדת אתמול/ בשבוע האחרון?
    • מה הדבר שמרגש אותך בנוגע לתכנות?
    • ספר/י על אתגר טכני שחווית לאחרונה, וכיצד פתרת אותו?
    • באילו שיטות השתמשת כדי לשפר ביצועים בתהליך הבנייה או התחזוקה של אתר?
    • ספר/י על עקרונות SEO שבהם השתמשת לאחרונה.
    • האם יש לך דוגמאות לטכניקות נפוצות שבהן השתמשת כדי להתמודד עם אתגרי האבטחה בפיתוח צד-לקוח?
    • באילו פעולות נקטת בפרויקטים שלך כדי לשפר את יכולת הניהול והתחזוקה של הקוד שלך?
    • ספר/י על סביבת הפיתוח המועדפת עליך/עלייך.
    • באיזו מערכת/מערכות ניהול גרסאות (Version Contro System) אתה נוהג להשתמש?
    • תאר/י את תהליך העבודה שלך כאשר את/ה בונה אתר.
    • אם יש לך 5 גיליונות סגנונות (stylesheets) שונים, מהי הדרך הטובה ביותר להטמיע אותם באתר?
    • מה ההבדל בין "Progressive Enhancement" לבין "Graceful Degradation"?
    • כיצד תבצע/י אופטימיזציה לרשימת המשאבים (assets/ resources) של האתר?
    • כמה משאבים (resources) יוריד הדפדפן מדומיין נתון בכל פעם? מהם המקרים יוצאי הדופן?
    • מנה/מני 3 דרכים להפחתת זמן טעינת הדף (זמן ממשי או הזמן כפי שהוא נתפס ע״י המשתמש).
    • הצטרפת לפרויקט, והצוות משתמש בטאבים בעוד שאת/ה משתמש/ת ברווחים. מה תעשה/י?
    • תאר/י כיצד תיצור/תצרי דף מצגת פשוט.
    • לו היית יכול/ה ללמוד באופן יסודי טכנולוגיה אחת במהלך השנה הקרובה - איזו טכנולוגיה זו היתה?
    • הסבר/ הסבירי את החשיבות של standards ושל standards bodies.
    • מהו "Flash" או תוכן בלתי מעוצב, וכיצד תימנע/י מ-FOUC?
    • מהם "ARIA" וקוראי מסך, וכיצד תיצור/תצרי אתר נגיש?
    • מנה כמה נקודות בעד ונגד אנימציית CSS ואנימציית JavaScript.
    • מהן ראשי התיבות "CORS" ובאיזה תחום הן עוסקות?
    שאלות בנושא HTML:
    • מה עושה doctype?
    • כיצד תספק/י דף/אתר במספר שפות?
    • לאילו דברים חשוב להיזהר או לשים לב כשבונים אתרים במספר שפות?
    • מה התועלת של התואר (attribute) בשם "-data"?
    • מהן אבני היסוד של HTML5?
    • תאר את ההבדלים בין "cookie", "sessionStorage", ו"localStorage".
    • תאר את ההבדלים בין <script>, <script async>, ו"<script defer>".
    • מדוע זה בדרך כלל רעיון טוב למקם את תגיד ה-CSS מסוג <link> בין תגיות <head></head> וקוד JS בדיוק לפני התגית <body/>? האם ישנם מקרים יוצאי דופן?
    • מהו progressive rendering?
    • לשם מה משתמשים בתכונה (attribute) בשם srcset בתגית image? הסבר/הסבירי את התהליך שהדפדפן משתמש בו על מנת להעריך את התכונה.
    • האם השתמשת ב-HTML templating languages אחרות בעבר?
    שאלות בנושא CSS
    • מהי selector specificity וכיצד זה עובד?
    • מה ההבדל בין resetting לבין normalizing הגדרות CSS? באילו מהשניים תבחר/י ומדוע?
    • תאר/י מהם Floats וכיצד הם עובדים.
    • תאר/י מהו z-index וכיצד stacking context נוצר.
    • תאר/י מהו BFC או Block Formatting Context, וכיצד הוא עובד.
    • מהן צורות ה-clearing השונות, ובאילו מהן כדאי להשתמש ולשם מה?
    • כיצד תטפל/י בבעיות עיצוב המאפיינות דפדפן מסוים?
    • כיצד תתאים/י את האתר שלך לדפדפנים בעלי מגבלת מאפיינים (feature-constrained)? באילו טכניקות/ תהליכים תשתמש/י?
    • מהן הדרכים השונות להסתיר תוכן ולאפשר תצוגה שלו באמצעות קוראי מסך?
    • האם השתמשת בעבר בשיטת העיצוב grid? במידה וכן - איזו שיטה את/ה מעדיפ/ה?
    • האם השתמשת ב-media queries או בעיצוב מיוחד למובייל?
    • האם את/ה מכיר/ה את המונח styling SVG?
    • האם תוכל לתת דוגמה לסוג נוסף של '@media' פרט ל-'screen'?
    • מהם כמה עקרונות של כתיבת CSS אפקטיבי?
    • מה היתרונות/ חסרונות בשימוש במעבדי CSS? תאר מה אהבת/ אהבת פחות במעבדי CSS שבהם השתמשת בעבר.
    • כיצד תטמיע עיצוב לווב שמשתמש בפונטים לא סטנדרטיים?
    • הסבר/י כיצד הדפדפן קובע אילו אלמנטים מתאימים לאיזה סלקטור?
    • הסבר/י מהם pseudo-elements ולמה הם משמשים?
    • הסבר/י את הבנתך בנושא box model, וכיצד תאמר/י לדפדפן לרנדר את העיצוב במודל box model אחר?
    • מה עושה { ;box-sizing: border-box } *? מה יתרונותיו?
    • על מה אחראי התואר display? תנ/י דוגמה למספר שימושים שלו.
    • מה ההבדל בין inline לבין inline-block?
    • מה ההבדל בין relative, fixed, absolute ו-statically positioned?
    • באילו CSS frameworks השתמשת באופן מקומי, או בפרודקשן? כיצד תשנה/ תשפר אותם?
    • האם יצא לך להתנסות ב-CSS Flexbox או Grid specs?
    • הסבר/י את ההבדל בין לבנות אתר ריספונסיבי לבין לבנות אתר בגישת mobile first.
    • האם עבדת עם גרפיקת רטינה? במידה וכן, מתי ובאילו טכניקות השתמשת?
    • האם ישנה סיבה שבה תשתמש/י ב-()translate במקום absolute positioning, ולהיפך? מדוע?
    שאלות בנושא JavaScript
    • הסבר/י את המונח event delegation.
    • הסבר/י כיצד this עובד בג׳אווהסקריפט.
    • הסבר/י כיצד prototypal inheritance עובדת.
    • מה דעתך על AMD לעומת CommonJS?
    • הסבר/י מדוע הקוד הבא לא יעבוד כ-IIFE:
      function foo(){ }();

      מה יש לשנות על מנת שהקוד יעבוד?
    • מה ההבדל בין null, undefined, ומשתנה שלא הוגדר? כיצד תבדוק/י את מצבם של משתנים מסוג זה?
    • מהו closure וכיצד תשתמש/י בו?
    • הסבר/י את ההבדל בין לולאת forEach לבין לולאת .map(), ומה הסיבה לבחור אחד על פני האחר?
    • לשם מה משתמשים על פי רוב בפונקציה אנונימית?
    • כיצד את/ה מארגן/ת את הקוד שלך (תבנית מודולים, תורשת קלאסית)?
    • מה ההבדל בין host objects לבין native objects?
    • מה ההבדלים בין שלוש הדוגמאות הבאות:
             function Person(){}
       var person = Person()
       var person = new Person()
@@ -49,4 +49,4 @@ doSomething().then(doSomethingElse());
 
 doSomething().then(doSomethingElse);
 
      
-

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

  • ספר/י על פרויקט מעניין/ מגניב שעליו עבדת לאחרונה.
  • מהם הדברים שאת/ה אוהב/ת בנוגע לתוכנות הפיתוח איתן את/ה עובד/ת?
  • מי מעורר בך השראה בקהילת הפיתוח לווב?
  • האם יש לך פרויקטים אישיים? מאיזה סוג?
  • מה הפיצ׳ר האהוב עליך ב-Internet Explorer?
  • כיצד את/ה שותה את הקפה שלך?

תומכים:

פרויקט זה החל ב-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/_site/translations/hungarian/index.html b/_site/translations/hungarian/index.html index 871dd3f..eaf3179 100644 --- a/_site/translations/hungarian/index.html +++ b/_site/translations/hungarian/index.html @@ -1 +1 @@ -Interjú kérdések front-end fejlesztőknek ★ Front-end Job 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 +Interjú kérdések front-end fejlesztőknek ★ Front-end Job 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 diff --git a/_site/translations/index.html b/_site/translations/index.html index e2fc1e6..d8d04e6 100644 --- a/_site/translations/index.html +++ b/_site/translations/index.html @@ -1 +1 @@ -Translations ★ Front-end Job Interview Questions

Translations

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

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

Translations

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

\ No newline at end of file diff --git a/_site/translations/indonesian/index.html b/_site/translations/indonesian/index.html index 136cade..8932ad8 100644 --- a/_site/translations/indonesian/index.html +++ b/_site/translations/indonesian/index.html @@ -1 +1 @@ -Daftar Pertanyaan Wawancara Kerja Front-End ★ Front-end Job Interview Questions

Daftar Pertanyaan Wawancara Kerja Front-End

Daftar Pertanyaan Wawancara Kerja Front-End

File ini berisi sejumlah pertanyaan teknis yang dapat digunakan saat mewawancarai calon pekerja. Namun, bukan berarti anda dianjurkan untuk bertanya kepada si calon pekerja dengan semua pertanyaan dari daftar di bawah ini (karena itu akan memakan waktu beberapa jam). Dengan cukup memilih beberapa pertanyaan dari daftar ini akan membantu anda mengenal kemampuan yang anda cari dari si calon pekerja.

Catatan: Perlu diingat bahwa kebanyakan pertanyaan-pertanyaan ini bersifat terbuka dan mungkin dapat mengarah menjadi diskusi menarik yang bisa memberikan gambaran lebih lanjut mengenai kemampuan seseorang.

Daftar Isi

  1. Pertanyaan Umum
  2. Pertanyaan HTML
  3. Pertanyaan CSS
  4. Pertanyaan JS
  5. Pertanyaan Pengujian
  6. Pertanyaan Kinerja
  7. Pertanyaan Jaringan
  8. Pertanyaan Koding
  9. Pertanyaan Seru / Sampingan

Cara Partisipasi

  1. Kontributor
  2. Cara Kontribusi
  3. Lisensi

Pertanyaan Umum:

  • Apa yang baru Anda pelajari kemarin / minggu ini?
  • Apa yang membuatmu tertarik dengan coding?
  • Tantangan teknis apa yang baru-baru ini Anda hadapi, dan bagaimana Anda mengatasinya?
  • Pertimbangan-pertimbangan apa yang Anda ambil dari sisi UI, Keamanan, Kinerja, SEO, Maintainability maupun Teknologi saat Anda membangun aplikasi web atau situs?
  • Jelaskan tentang lingkungan coding yang Anda sukai. (OS, Editor atau IDE, Browser, Tools, dll)
  • Sistem kontrol versi apa saja yang Anda kenali?
  • Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat sebuah situs?
  • Katakan Anda memiliki 5 stylesheet yang berbeda, bagaimana cara terbaik untuk mengintegrasikannya ke situs Anda?
  • Dapatkah Anda menjelaskan perbedaan antara progressive enhancement dan graceful degradation?
  • Bagaimana Anda mengoptimalkan aset / resource sebuah website?
  • Berapa banyak resource yang didownload oleh browser dari domain pada suatu waktu?
    • Apa saja pengecualiannya?
  • Sebutkan 3 cara untuk mengurangi beban halaman (waktu yang dirasakan maupun waktu loading yang sebenarnya).
  • Jika Anda mendapatkan sebuah proyek, dan dalam proyek ini mereka menggunakan tab dan Anda menggunakan space, apa yang akan Anda lakukan?
  • Jelaskan bagaimana Anda membuat halaman slideshow sederhana.
  • Jika Anda bisa mempelajari satu teknologi tahun ini, apakah itu?
  • Jelaskan pentingnya standar dan badan-badan standar.
  • Apa itu Flash of Unstyled Content alias FOUC? Bagaimana Anda menghindari FOUC?
  • Jelaskan apa itu ARIA dan screenreader, dan bagaimana membuat sebuah website dapat diakses.
  • Jelaskan beberapa pro dan kontra animasi CSS dibandingkan animasi JavaScript.
  • Apa arti CORS dan tujuannya?

Pertanyaan HTML:

  • Apa yang doctype lakukan?
  • Apa perbedaan antara modus standar dan modus quirks?
  • Apa perbedaan antara HTML dan XHTML?
  • Apakah ada masalah dengan melayani halaman sebagai aplikasi/xhtml+xml?
  • Bagaimana Anda melayani halaman dengan konten dalam berbagai bahasa?
  • Apa saja hal yang harus Anda waspadai ketika mendesain atau mengembangkan situs multibahasa?
  • Apa kegunaan atribut data-?
  • Katakan HTML5 adalah platform web terbuka, apa saja yang membentuk HTML5?
  • Jelaskan perbedaan antara cookie, sessionStorage dan localStorage.
  • Jelaskan perbedaan antara <script>, <script async> dan <script defer>.
  • Mengapa meletakkan <link> CSS di antara <head></head> dan meletakkan <script> JS sebelum <body></body> dianggap baik pada umumnya? Apakah ada pengecualiannya?
  • Apa itu progressive rendering?
  • Apakah Anda pernah menggunakan bahasa HTML templating yang berbeda?
  • Jelaskan perbedaan antara GET danPOST.

Pertanyaan CSS:

  • Apa perbedaan antara class dan id dalam CSS?
  • Apa perbedaan antara reset dan normalisasi dalam CSS? Apa yang Anda pilih, dan kenapa?
  • Jelaskan float dan cara kerjanya.
  • Jelaskan z-index dan bagaimana susunan konteks terbentuk.
  • Apa saja teknik-teknik kliring, dan yang mana sesuai untuk konteks apa?
  • Jelaskan sprite CSS, dan bagaimana Anda implementasikan pada suatu halaman atau situs.
  • Apa teknik pengganti gambar favorit Anda? Dan yang mana akan Anda gunakan, lalu kapan digunakan?
  • Bagaimana anda menghadapi masalah styling yang spesifik pada browser?
  • Bagaimana Anda melayani halaman untuk browser dengan fitur terbatas?
    • Teknik / contents apa yang Anda gunakan?
  • Apa saja cara-cara untuk menyembunyikan suatu konten secara visual (dan membuatnya tersedia hanya untuk pembaca layar / screenreader)?
  • Apakah Anda pernah menggunakan sistem grid, dan jika pernah, apa yang lebih Anda sukai?
  • Apakah Anda pernah menggunakan atau menerapkan media query atau layout / CSS khusus untuk mobile?
  • Apakah Anda fasih dengan styling SVG?
  • Bagaimana Anda mengoptimalkan halaman web Anda untuk dicetak?
  • Apa saja yang perlu diwaspadai dalam menulis CSS yang efisien?
  • Apa keuntungan / kerugian dari menggunakan precontentsor CSS? (Sass, Compass, Stylus, LESS)
    • Jelaskan apa yang Anda sukai dan tidak sukai dari precontentsor CSS yang pernah Anda gunakan.
  • Bagaimana Anda akan menerapkan desain web comp yang menggunakan font non-standar?
  • Jelaskan bagaimana browser mencocokan suatu elemen dengan selector CSS.
  • Jelaskan apa itu pesudo-element dan bagaimana penggunaannya.
  • Jelaskan pemahaman Anda tentang model kotak, dan bagaimana Anda memberitahu suatu browser dalam CSS untuk menggunakan layout model kotak yang mana.
  • Apa yang terjadi dengan ini : { box-sizing: border-box; }? Apa keuntungannya?
  • Sebutkan sebanyak mungkin value untuk properti display yang anda ingat.
  • Apa perbedaan antara inline dan inline-block?
  • Apa perbedaan antara elemen yang diposisikan secara relative, fixed, absolute, dan static?
  • Huruf ‘C’ dalam CSS adalah singkatan dari Cascading. Bagaimana cara kerja prioritas dalam menentukan stylenya (berikan beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?
  • Framework CSS apa yang pernah Anda gunakan secara lokal, maupun dalam produksi? (Bootstrap, PureCSS, Foundation dll). Dan kalau bisa, bagaimana Anda ingin mengubah / memperbaikinya?
  • Apakah Anda pernah mencoba CSS Flexbox yang baru atau Grid specs?
  • Bagaimana desain responsif berbeda dari desain adaptif?
  • Apakah Anda pernah bekerja dengan grafis retina? Jika ya, kapan dan teknik apa yang Anda gunakan?
  • Apakah Anda mempunyai alasan untuk menggunakan translate() dibandingkan posisi absolute, ataupun sebaliknya? Kenapa?

Pertanyaan JS:

  • Jelaskan event delegation.
  • Jelaskan bagaimana cara kerja this dalam JavaScript.
  • Jelaskan cara kerja inheritance prototype.
  • Apa pendapat Anda mengenai AMD dan CommonJS?
  • Jelaskan mengapa berikut ini tidak bekerja sebagai IIFE: function foo () {} ();.
    • Apa yang perlu diubah untuk membuatnya sebagai IIFE?
  • Apa perbedaan antara variabel: null,undefined dan undeclared?
    • Bagaimana Anda menguji status-status variabel ini?
  • Apa itu closure, dan bagaimana / mengapa Anda akan menggunakannya?
  • Bagaimana biasanya fungsi anonim (anonymous function) digunakan?
  • Bagaimana Anda mengatur kode Anda? (pola modul, warisan klasik?)
  • Apa perbedaan antara host object dan native object?
  • Apa perbedaan antara: function Person(){}, var person = Person(), dan var person = new Person()?
  • Apa perbedaan antara .call dan.apply?
  • Jelaskan Function.prototype.bind.
  • Kapan saja document.write () digunakan?
  • Kapan saja Anda mengoptimalkan kode Anda?
  • Apa perbedaan antara fitur deteksi, fitur inferensi, dan penggunaan string UA?
  • Jelaskan AJAX sedetail mungkin.
  • Apa keuntungan dan kerugian menggunakan AJAX?
  • Jelaskan bagaimana cara kerja JSONP (dan bagaimana itu bukan AJAX).
  • Apakah Anda pernah menggunakan JavaScript template?
    • Kalau ya, library apa yang pernah Anda gunakan? (Mustache.js, Handlebars dll.)
  • Jelaskan “hoisting”.
  • Jelaskan event bubbling.
  • Apa perbedaan antara “atribut” dan “properti”?
  • Mengapa tidak baik meng-extend object Javascript built-in?
  • Apa perbedaan antara document load dan document ready?
  • Apa perbedaan antara == dan ===?
  • Jelaskan kebijakan same-origin dalam konteks JavaScript.
  • Kerjakan ini :
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Mengapa disebut ekspresi Ternary, dan apa maksud “Ternary”?
  • Apa itu "use strict";? Apa keuntungan dan kerugian dalam penggunaannya?
  • Buatkan loop yang beriterasi sampai 100, dan print “fizz” pada kelipatan 3, “buzz” pada kelipatan 5 dan “fizzbuzz” pada kelipatan 3 dan 5.
  • Kenapa pada umumnya, lebih baik membiarkan scope global dalam suatu website sebagai apa adanya dan jangan diutak-atik?
  • Kenapa load event digunakan? Apakah event ini mempunyai kerugiannya? Apakah Anda tau cara alternatif lain, dan kenapa Anda menggunakan cara itu?
  • Jelaskan apa itu single page app, dan bagaimana membuatnya ramah SEO?
  • Sejauh apa pengalaman Anda dengan promise dan / atau polyfills?
  • Apakah pro dan kontrak menggunakan promise dibandingkan callback?
  • Apa keuntungan / kerugian menulis kode JavaScript dalam bahasa yang kompile ke JavaScript?
  • Program dan teknik apa yang Anda gunakan dalam mendebug kode Javascript?
  • Konstruksi bahasa apa yang Anda gunakan untuk mengiterasi properti objek dan array?
  • Jelaskan perbedaan antara object mutable dan immutable
    • Apa contoh objek immutable dalam JavaScript?
    • Apa pro dan kontra immutability?
    • Bagaimana Anda mencapai immutability dalam kode Anda?
  • Jelaskan perbedaan antara fungsi synchronous dan asynchronous
  • event loop itu apa?
  • Perbedaan antara call stack dan task queue itu apa?

Pertanyaan Pengujian

  • Apakah keuntungan / kerugian menguji kode Anda?
  • Program apa yang Anda gunakan untuk menguji kinerja kode Anda?
  • Apa saja perbedaan antara tes unit dan tes fungsi/integrasi?
  • Apakah tujuan program lint?

Pertanyaan Kinerja

  • Tool apa yang Anda gunakan untuk mencari masalah kinerja dalam kode Anda?
  • Apa saja cara-cara yang dapat meningkatkan kinerja scrolling dalam website Anda?
  • Jelaskan perbedaan antara layout, painting, dan compositing.

Pertanyaan Jaringan:

  • Secara tradisional, mengapa lebih baik untuk melayani aset situs dari beberapa domain?
  • Jelaskan semampu Anda, bagaimana contents kerja dari saat Anda mengetikkan URL situs web sampai saat halamannya selesai tampil di layar Anda.
  • Apakah perbedaan antara Long-Polling, Websockets dan Server-Sent Events (SSE)?
  • Jelaskan request dan response header berikut ini:
    • Perbedaan antara Expires, Date, Age dan If-Modified-…
    • Do Not Track (DNT)
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • aksi HTTP itu apa? Sebutkan aksi-aksi HTTP yang Anda tahu, dan jelaskan.

Pertanyaan koding:

Pertanyaan: Apakah hasil foo?

var foo = 10 + '20';

Pertanyaan: Bagaimana Anda akan membuat fungsi berikut ini bekerja?

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

Pertanyaan: Apakah hasil yang akan dikembalikan dari pernyataan berikut?

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

Pertanyaan: Apakah nilai window.foo?

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

Pertanyaan: Apakah hasil dari dua alert di bawah ini?

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

Pertanyaan: Apakah hasil foo.length?

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

Pertanyaan: Apakah hasil foo.x?

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

Pertanyaan: Apakah hasil yang akan diprint dalam kode berikut ini?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Pertanyaan Seru / Sampingan:

  • Apa saja proyek menarik yang baru-baru ini Anda kerjakan?
  • Apa sajakah hal-hal yang Anda sukai tentang alat pengembang yang Anda gunakan?
  • Apakah Anda mempunyai proyek yang anda sukai? Apa saja?
  • Apa fitur favorit Anda di Internet Explorer?
  • Apa tipe kopi favorit Anda?

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 +Daftar Pertanyaan Wawancara Kerja Front-End ★ Front-end Job Interview Questions

Daftar Pertanyaan Wawancara Kerja Front-End

Daftar Pertanyaan Wawancara Kerja Front-End

File ini berisi sejumlah pertanyaan teknis yang dapat digunakan saat mewawancarai calon pekerja. Namun, bukan berarti anda dianjurkan untuk bertanya kepada si calon pekerja dengan semua pertanyaan dari daftar di bawah ini (karena itu akan memakan waktu beberapa jam). Dengan cukup memilih beberapa pertanyaan dari daftar ini akan membantu anda mengenal kemampuan yang anda cari dari si calon pekerja.

Catatan: Perlu diingat bahwa kebanyakan pertanyaan-pertanyaan ini bersifat terbuka dan mungkin dapat mengarah menjadi diskusi menarik yang bisa memberikan gambaran lebih lanjut mengenai kemampuan seseorang.

Daftar Isi

  1. Pertanyaan Umum
  2. Pertanyaan HTML
  3. Pertanyaan CSS
  4. Pertanyaan JS
  5. Pertanyaan Pengujian
  6. Pertanyaan Kinerja
  7. Pertanyaan Jaringan
  8. Pertanyaan Koding
  9. Pertanyaan Seru / Sampingan

Cara Partisipasi

  1. Kontributor
  2. Cara Kontribusi
  3. Lisensi

Pertanyaan Umum:

  • Apa yang baru Anda pelajari kemarin / minggu ini?
  • Apa yang membuatmu tertarik dengan coding?
  • Tantangan teknis apa yang baru-baru ini Anda hadapi, dan bagaimana Anda mengatasinya?
  • Pertimbangan-pertimbangan apa yang Anda ambil dari sisi UI, Keamanan, Kinerja, SEO, Maintainability maupun Teknologi saat Anda membangun aplikasi web atau situs?
  • Jelaskan tentang lingkungan coding yang Anda sukai. (OS, Editor atau IDE, Browser, Tools, dll)
  • Sistem kontrol versi apa saja yang Anda kenali?
  • Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat sebuah situs?
  • Katakan Anda memiliki 5 stylesheet yang berbeda, bagaimana cara terbaik untuk mengintegrasikannya ke situs Anda?
  • Dapatkah Anda menjelaskan perbedaan antara progressive enhancement dan graceful degradation?
  • Bagaimana Anda mengoptimalkan aset / resource sebuah website?
  • Berapa banyak resource yang didownload oleh browser dari domain pada suatu waktu?
    • Apa saja pengecualiannya?
  • Sebutkan 3 cara untuk mengurangi beban halaman (waktu yang dirasakan maupun waktu loading yang sebenarnya).
  • Jika Anda mendapatkan sebuah proyek, dan dalam proyek ini mereka menggunakan tab dan Anda menggunakan space, apa yang akan Anda lakukan?
  • Jelaskan bagaimana Anda membuat halaman slideshow sederhana.
  • Jika Anda bisa mempelajari satu teknologi tahun ini, apakah itu?
  • Jelaskan pentingnya standar dan badan-badan standar.
  • Apa itu Flash of Unstyled Content alias FOUC? Bagaimana Anda menghindari FOUC?
  • Jelaskan apa itu ARIA dan screenreader, dan bagaimana membuat sebuah website dapat diakses.
  • Jelaskan beberapa pro dan kontra animasi CSS dibandingkan animasi JavaScript.
  • Apa arti CORS dan tujuannya?

Pertanyaan HTML:

  • Apa yang doctype lakukan?
  • Apa perbedaan antara modus standar dan modus quirks?
  • Apa perbedaan antara HTML dan XHTML?
  • Apakah ada masalah dengan melayani halaman sebagai aplikasi/xhtml+xml?
  • Bagaimana Anda melayani halaman dengan konten dalam berbagai bahasa?
  • Apa saja hal yang harus Anda waspadai ketika mendesain atau mengembangkan situs multibahasa?
  • Apa kegunaan atribut data-?
  • Katakan HTML5 adalah platform web terbuka, apa saja yang membentuk HTML5?
  • Jelaskan perbedaan antara cookie, sessionStorage dan localStorage.
  • Jelaskan perbedaan antara <script>, <script async> dan <script defer>.
  • Mengapa meletakkan <link> CSS di antara <head></head> dan meletakkan <script> JS sebelum <body></body> dianggap baik pada umumnya? Apakah ada pengecualiannya?
  • Apa itu progressive rendering?
  • Apakah Anda pernah menggunakan bahasa HTML templating yang berbeda?
  • Jelaskan perbedaan antara GET danPOST.

Pertanyaan CSS:

  • Apa perbedaan antara class dan id dalam CSS?
  • Apa perbedaan antara reset dan normalisasi dalam CSS? Apa yang Anda pilih, dan kenapa?
  • Jelaskan float dan cara kerjanya.
  • Jelaskan z-index dan bagaimana susunan konteks terbentuk.
  • Apa saja teknik-teknik kliring, dan yang mana sesuai untuk konteks apa?
  • Jelaskan sprite CSS, dan bagaimana Anda implementasikan pada suatu halaman atau situs.
  • Apa teknik pengganti gambar favorit Anda? Dan yang mana akan Anda gunakan, lalu kapan digunakan?
  • Bagaimana anda menghadapi masalah styling yang spesifik pada browser?
  • Bagaimana Anda melayani halaman untuk browser dengan fitur terbatas?
    • Teknik / contents apa yang Anda gunakan?
  • Apa saja cara-cara untuk menyembunyikan suatu konten secara visual (dan membuatnya tersedia hanya untuk pembaca layar / screenreader)?
  • Apakah Anda pernah menggunakan sistem grid, dan jika pernah, apa yang lebih Anda sukai?
  • Apakah Anda pernah menggunakan atau menerapkan media query atau layout / CSS khusus untuk mobile?
  • Apakah Anda fasih dengan styling SVG?
  • Bagaimana Anda mengoptimalkan halaman web Anda untuk dicetak?
  • Apa saja yang perlu diwaspadai dalam menulis CSS yang efisien?
  • Apa keuntungan / kerugian dari menggunakan precontentsor CSS? (Sass, Compass, Stylus, LESS)
    • Jelaskan apa yang Anda sukai dan tidak sukai dari precontentsor CSS yang pernah Anda gunakan.
  • Bagaimana Anda akan menerapkan desain web comp yang menggunakan font non-standar?
  • Jelaskan bagaimana browser mencocokan suatu elemen dengan selector CSS.
  • Jelaskan apa itu pesudo-element dan bagaimana penggunaannya.
  • Jelaskan pemahaman Anda tentang model kotak, dan bagaimana Anda memberitahu suatu browser dalam CSS untuk menggunakan layout model kotak yang mana.
  • Apa yang terjadi dengan ini : { box-sizing: border-box; }? Apa keuntungannya?
  • Sebutkan sebanyak mungkin value untuk properti display yang anda ingat.
  • Apa perbedaan antara inline dan inline-block?
  • Apa perbedaan antara elemen yang diposisikan secara relative, fixed, absolute, dan static?
  • Huruf ‘C’ dalam CSS adalah singkatan dari Cascading. Bagaimana cara kerja prioritas dalam menentukan stylenya (berikan beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?
  • Framework CSS apa yang pernah Anda gunakan secara lokal, maupun dalam produksi? (Bootstrap, PureCSS, Foundation dll). Dan kalau bisa, bagaimana Anda ingin mengubah / memperbaikinya?
  • Apakah Anda pernah mencoba CSS Flexbox yang baru atau Grid specs?
  • Bagaimana desain responsif berbeda dari desain adaptif?
  • Apakah Anda pernah bekerja dengan grafis retina? Jika ya, kapan dan teknik apa yang Anda gunakan?
  • Apakah Anda mempunyai alasan untuk menggunakan translate() dibandingkan posisi absolute, ataupun sebaliknya? Kenapa?

Pertanyaan JS:

  • Jelaskan event delegation.
  • Jelaskan bagaimana cara kerja this dalam JavaScript.
  • Jelaskan cara kerja inheritance prototype.
  • Apa pendapat Anda mengenai AMD dan CommonJS?
  • Jelaskan mengapa berikut ini tidak bekerja sebagai IIFE: function foo () {} ();.
    • Apa yang perlu diubah untuk membuatnya sebagai IIFE?
  • Apa perbedaan antara variabel: null,undefined dan undeclared?
    • Bagaimana Anda menguji status-status variabel ini?
  • Apa itu closure, dan bagaimana / mengapa Anda akan menggunakannya?
  • Bagaimana biasanya fungsi anonim (anonymous function) digunakan?
  • Bagaimana Anda mengatur kode Anda? (pola modul, warisan klasik?)
  • Apa perbedaan antara host object dan native object?
  • Apa perbedaan antara: function Person(){}, var person = Person(), dan var person = new Person()?
  • Apa perbedaan antara .call dan.apply?
  • Jelaskan Function.prototype.bind.
  • Kapan saja document.write () digunakan?
  • Kapan saja Anda mengoptimalkan kode Anda?
  • Apa perbedaan antara fitur deteksi, fitur inferensi, dan penggunaan string UA?
  • Jelaskan AJAX sedetail mungkin.
  • Apa keuntungan dan kerugian menggunakan AJAX?
  • Jelaskan bagaimana cara kerja JSONP (dan bagaimana itu bukan AJAX).
  • Apakah Anda pernah menggunakan JavaScript template?
    • Kalau ya, library apa yang pernah Anda gunakan? (Mustache.js, Handlebars dll.)
  • Jelaskan “hoisting”.
  • Jelaskan event bubbling.
  • Apa perbedaan antara “atribut” dan “properti”?
  • Mengapa tidak baik meng-extend object Javascript built-in?
  • Apa perbedaan antara document load dan document ready?
  • Apa perbedaan antara == dan ===?
  • Jelaskan kebijakan same-origin dalam konteks JavaScript.
  • Kerjakan ini :
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Mengapa disebut ekspresi Ternary, dan apa maksud “Ternary”?
  • Apa itu "use strict";? Apa keuntungan dan kerugian dalam penggunaannya?
  • Buatkan loop yang beriterasi sampai 100, dan print “fizz” pada kelipatan 3, “buzz” pada kelipatan 5 dan “fizzbuzz” pada kelipatan 3 dan 5.
  • Kenapa pada umumnya, lebih baik membiarkan scope global dalam suatu website sebagai apa adanya dan jangan diutak-atik?
  • Kenapa load event digunakan? Apakah event ini mempunyai kerugiannya? Apakah Anda tau cara alternatif lain, dan kenapa Anda menggunakan cara itu?
  • Jelaskan apa itu single page app, dan bagaimana membuatnya ramah SEO?
  • Sejauh apa pengalaman Anda dengan promise dan / atau polyfills?
  • Apakah pro dan kontrak menggunakan promise dibandingkan callback?
  • Apa keuntungan / kerugian menulis kode JavaScript dalam bahasa yang kompile ke JavaScript?
  • Program dan teknik apa yang Anda gunakan dalam mendebug kode Javascript?
  • Konstruksi bahasa apa yang Anda gunakan untuk mengiterasi properti objek dan array?
  • Jelaskan perbedaan antara object mutable dan immutable
    • Apa contoh objek immutable dalam JavaScript?
    • Apa pro dan kontra immutability?
    • Bagaimana Anda mencapai immutability dalam kode Anda?
  • Jelaskan perbedaan antara fungsi synchronous dan asynchronous
  • event loop itu apa?
  • Perbedaan antara call stack dan task queue itu apa?

Pertanyaan Pengujian

  • Apakah keuntungan / kerugian menguji kode Anda?
  • Program apa yang Anda gunakan untuk menguji kinerja kode Anda?
  • Apa saja perbedaan antara tes unit dan tes fungsi/integrasi?
  • Apakah tujuan program lint?

Pertanyaan Kinerja

  • Tool apa yang Anda gunakan untuk mencari masalah kinerja dalam kode Anda?
  • Apa saja cara-cara yang dapat meningkatkan kinerja scrolling dalam website Anda?
  • Jelaskan perbedaan antara layout, painting, dan compositing.

Pertanyaan Jaringan:

  • Secara tradisional, mengapa lebih baik untuk melayani aset situs dari beberapa domain?
  • Jelaskan semampu Anda, bagaimana contents kerja dari saat Anda mengetikkan URL situs web sampai saat halamannya selesai tampil di layar Anda.
  • Apakah perbedaan antara Long-Polling, Websockets dan Server-Sent Events (SSE)?
  • Jelaskan request dan response header berikut ini:
    • Perbedaan antara Expires, Date, Age dan If-Modified-…
    • Do Not Track (DNT)
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • aksi HTTP itu apa? Sebutkan aksi-aksi HTTP yang Anda tahu, dan jelaskan.

Pertanyaan koding:

Pertanyaan: Apakah hasil foo?

var foo = 10 + '20';

Pertanyaan: Bagaimana Anda akan membuat fungsi berikut ini bekerja?

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

Pertanyaan: Apakah hasil yang akan dikembalikan dari pernyataan berikut?

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

Pertanyaan: Apakah nilai window.foo?

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

Pertanyaan: Apakah hasil dari dua alert di bawah ini?

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

Pertanyaan: Apakah hasil foo.length?

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

Pertanyaan: Apakah hasil foo.x?

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

Pertanyaan: Apakah hasil yang akan diprint dalam kode berikut ini?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Pertanyaan Seru / Sampingan:

  • Apa saja proyek menarik yang baru-baru ini Anda kerjakan?
  • Apa sajakah hal-hal yang Anda sukai tentang alat pengembang yang Anda gunakan?
  • Apakah Anda mempunyai proyek yang anda sukai? Apa saja?
  • Apa fitur favorit Anda di Internet Explorer?
  • Apa tipe kopi favorit Anda?

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/_site/translations/italian/index.html b/_site/translations/italian/index.html index cbfe99f..920d6f1 100644 --- a/_site/translations/italian/index.html +++ b/_site/translations/italian/index.html @@ -1 +1 @@ -Domande per il colloquio di lavoro per front-end ★ Front-end Job 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 richiedi.

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 ti 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à id 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 +Domande per il colloquio di lavoro per front-end ★ Front-end Job 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 richiedi.

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 ti 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à id 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 diff --git a/_site/translations/japanese/index.html b/_site/translations/japanese/index.html index ccbba85..6b9e7a6 100644 --- a/_site/translations/japanese/index.html +++ b/_site/translations/japanese/index.html @@ -1 +1 @@ -フロントエンドデベロッパー面接時の質問事項 ★ Front-end Job 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 +フロントエンドデベロッパー面接時の質問事項 ★ Front-end Job 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 diff --git a/_site/translations/korean/index.html b/_site/translations/korean/index.html index 7dc423e..d821d65 100644 --- a/_site/translations/korean/index.html +++ b/_site/translations/korean/index.html @@ -1 +1 @@ -프론트엔드 면접 문제 은행 ★ Front-end Job Interview Questions

프론트엔드 면접 문제 은행

프론트엔드 면접 문제 은행

이 파일에는 잠재적인 프론트엔드 개발자 후보를 선정할 때 사용할 수 있는 여러 가지 면접 질문들이 있습니다. 후보자에게 모든 문제를 사용하는 것은 많은 시간이 소요되기 때문에 추천하지 않습니다. 대신, 여러분이 요구하는 주요 기술과 관련된 질문들을 몇 가지 선정해서 사용해보세요.

참고: 여기 있는 많은 질문은 자유롭게 추가/수정/삭제될 수 있고 정답보다 그 사람의 능력에 관해 이야기하는 흥미로는 토론을 끌어낼 수 있다는 것을 기억하세요.

목차

  1. 일반적인 질문
  2. HTML 관련 질문
  3. CSS 관련 질문
  4. JS 관련 질문
  5. 테스트 관련 질문
  6. 성능 관련 질문
  7. 코딩 관련 질문

함께하기

  1. 함께하는 분들
  2. 함께하는 방법
  3. 라이선스

일반적인 질문:

  • 어제/이번 주에 무엇을 공부하셨나요?
  • 코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇은 가요?
  • 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?
  • 웹 애플리케이션이나 사이트를 만들 때 고려해야 할 UI, Security, Performance, SEO, Maintainability에 대해서 설명해주세요.
  • 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요.
  • 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?
  • 당신이 웹 페이지를 만들 때의 과정을 설명해주실 수 있을까요?
  • 당신에게 5가지 다른 stylesheet가 있습니다. 어떤 방법으로 사이트에 제공하는 게 가장 효과적일까요?
  • 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?
  • 웹사이트에서 assets/resources를 최적화하는 방법에 관해 설명해주세요.
  • 브라우저가 한 번에 1개의 도메인에서 내려받는 자원은 몇 개인가요?
    • 예외에는 어떤 것들이 있나요?
  • 페이지 로드 시간을 줄이는 세 가지 방법에 관해서 이야기 해 보세요.
  • 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Space를 사용했습니다. 어떻게 하실 건가요?
  • 간단한 Slideshow 페이지를 만드는 방법에 관해서 이야기해 보세요.
  • 만약 당신이 올해 기술적 책임자가 되었다면 무엇을 먼저 하시겠습니까?
  • 표준의 중요성에 관해 설명해주세요.
  • Flash of Unstyled Content에 관해 설명해주세요. 또 FOUC를 피하기 위해선 어떻게 해야 하나요?
  • ARIA와 screenreader에 대해 설명해주세요. 또 접근성을 지원하는 웹사이트를 어떻게 만드는지에 대해도 설명해주세요.
  • CSS 애니메이션과 JavaScript 애니메이션의 차이점에 관해 설명해주세요.
  • CORS는 무엇의 약자이고 어떤 문제에 대해서 언급하는 것인가요?

HTML 관련 질문:

  • doctype이 무엇을 하는 것인가요?
  • 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?
  • XML과 XHTML의 다른 점은 무엇인가요
  • XHTML을 이용한 페이지의 한계점은 무엇이 있나요?
  • application/xhtml+xml으로 지정한 페이지에 어떠한 문제가 있나요?
  • 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
  • 다국어 페이지를 제공하는 여러 방법에 관해 설명해주세요.
  • data-속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요?
  • HTML5를 오픈 웹 플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?
  • 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
  • <script>, <script async>와 <script defer>의 차이점에 관해 설명해주세요.
  • CSS<link>를 <head></head>사이에 쓰는 것과 JS<script>를 <body></body>뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?
  • Progressive rendering이란 무엇인가요?
  • 이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명해보세요.
  • HTML templating language를 사용해 본 경험이 있나요?

CSS 관련 질문:

  • class와 id의 차이점에 관해서 설명해주세요.
  • “reset” CSS가 무엇인지, 어떻게 유용한지 설명해주세요.
  • Floats가 어떻게 동작하는지 설명해주세요.
  • z-index에 관해 설명해주세요.
  • BFC(Block Formatting Context)에 관해 설명해주세요
  • 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떨 때 어떻게 사용하는 것이 적절한지 설명하세요.
  • CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상하는지 설명하세요.
  • Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명해주세요.
  • 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?
  • 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?
    • 어떠한 기술과 절차를 거치는지 설명하세요.
  • 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.
  • 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
  • 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
  • SVG를 스타일링하는데 익숙하신가요?
  • 인쇄하기 위해 웹페이지를 어떻게 최적화 하나요?
  • 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?
  • CSS 전처리(CSS preprocessors)를 사용해보셨나요?
    • 그렇다면, 사용 경험에 기반을 둬 좋았던 점과 나빴던 점을 설명해주세요.
  • 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요? (웹폰트를 제외하고)
  • CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.
  • pseudo-elements에 관해서 설명하고 어디에서 사용되는지 이야기해보세요.
  • box model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.
  • * { box-sizing: border-box; }은 무엇이고 사용했을때 이점은 무엇인가요?
  • 기억나는 display 속성에 대한 값들을 나열해보세요.
  • inline과 inline-block의 차이점은 무엇인가요?
  • 요소를 배치하는 방법(relative, fixed, absolute, static) 간의 차이는 무엇인가요?
  • CSS에서 'C’는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?
  • CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?
  • 새로운 CSS Flexbox 혹은 Grid 스펙을 사용해 보신 적 있나요?
  • 반응형(Responsive) 디자인은 적응형(Adaptive) 디자인과 어떤 차이점이 있나요?
  • 레티나 그래픽 환경에서 작업해 보신 적이 있나요? 하셨다면 어떤 기술을 사용하셨나요?
  • 절대 좌표대신 translate() 혹은 반대로 사용하는 이유가 있나요? 있다면 이유에 관해서 설명해주세요.

JS 관련 질문:

  • event delegation에 관해 설명해주세요.
  • this는 JavaScript에서 어떻게 작동하는지 설명해주세요.
  • prototype 기반 상속은 어떻게 하는지 설명해주세요.
  • AMD와 CommonJS는 무엇이고, 이것들에 대해 어떻게 생각하시나요?
  • 다음 코드가 즉시 호출 함수 표현식(IIFE)로 동작하지 않는 이유에 관해서 설명해보세요: function foo(){ }();.
    • IIFE로 만들기 위해서는 어떻게 해야 하나요?
  • null과 unedefined 그리고 undeclared의 차이점은 무엇인가요?
    • 두개를 구분하기 위해서는 어떻게 하면 될까요?
  • 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
    • 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다)
  • 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
  • 당신의 코드를 어떻게 구성하는지? (모듈 패턴, 전통적 상속)
  • 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
  • 다음 코드의 차이점은 무엇인가요?
function Person(){} var person = Person() var person = new Person()
  • .call과 .apply의 차이점은 무엇인가요?
  • Function.prototype.bind을 설명하세요.
  • document.write()는 언제 사용하나요?
  • UA 문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명하세요.
  • AJAX에 관해 가능한 한 자세히 설명하세요.
  • AJAX를 사용했을 때의 장단점에 대해 설명해주세요.
  • JSON이 어떻게 동작 되는지 설명하세요. (그리고 AJAX와 어떻게 다른지 설명하세요.)
  • 기존에 JavaScript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요.
  • "호이스팅(Hoisting)"에 대해서 설명하세요.
  • 이벤트 버블링(Event Bubbling)에 대해서 설명하세요.
  • 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.
  • "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
  • 내장된 JavaScript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요?
  • document load event와 DOMContentLoaded event의 차이점은 무엇인가요?
  • ==와 ===의 차이점은 무엇인가요?
  • JavaScript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.
  • 다음 코드를 동작하게 만드세요.
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요?
  • use strict;은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
  • 100번 반복되는 반복문이 있습니다. 3의 배수일 때는 fizz, 5의 배수일 때는 buzz, 3과 5의 공배수일 때는 fizzbuzz가 출력되는 코드를 작성해보세요.
  • 전역 scope를 사용했을 때 장단점에 관해 설명해주세요.
  • 때때로 load event를 사용하는 이유에 관해 설명해주세요. 또 단점이 있다면 대안에 대해서도 설명해주세요.
  • SPA에서 SEO에 유리하도록 만들기 위한 방법에 대해 설명해주세요.
  • Promise를 사용해 본 경험이 있나요?
  • Promise가 콜백 대비 장/단점은 무엇인지 설명해주세요.
  • JavaScript의 작동방식의 장단점에 관해 설명해주세요.
  • JavaScript를 디버깅할 때 사용하는 도구가 있으면 설명해주세요.
  • 객체 안의 속성과 배열의 아이템을 순회할 때 사용하는 문법에 관해 설명해주세요.
  • mutable object와 immutable object에 관해 설명해주세요.
    • JavaScript에서 immutable 객체의 예를 들어보세요.
    • immutability의 장/단점은 무엇인가요?
    • 자신의 코드에서 불변성(immutability를) 어떻게 달성할 수 있나요?
  • 동기방식과 비동기 방식 함수의 차이에 관해서 설명해주세요.
  • event loop이란 무엇인가요?
    • call stack과 task queue에 관해 설명해주세요.
  • function foo() {}와 var foo = function() {}에서 foo 의 차이가 무엇인지 설명해보세요.
  • let, var, const의 차이점에 관해서 설명해주세요.

테스트 관련 질문들:

  • test code를 작성하면서 개발하는 방식의 장점과 단점에 대해 설명해주세요.
  • test code를 테스트하는 툴을 사용해보신 경험이 있나요?
  • 유닛 테스트와 함수테스트의 차이점은 무엇인가요?
  • code style linting tool을 사용했을때 장점은 무엇인가요?

성능 관련 질문들:

  • 성능관련 이슈들을 발견하기 위해서 사용하는 방법은 무엇인가요?
  • 웹사이트 scrolling 성능을 향상시키기 위한 몇가지 방법에 대해 설명해보세요.
  • 브라우저의 layout, painting, compositing에 대해 설명해보세요.

네트워크 질문들:

  • 전통적으로, 웹사이트의 assets을 여러 도메인으로 서빙했을 때 장점은 무엇인가요?
  • URL로 접속했을 때 어떤 플로우로 화면에 웹사이트가 그려지는지 네트워크 관점에서 설명해주세요.
  • Long-Polling과 Websocket, Server-Sent Event에 대해 설명해주세요.
  • 다음 request header들에 대해 설명해주세요.
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP와 HTTPS에 대해 설명해주세요.
  • HTTP Method들에 대해 설명해주세요.

코딩 질문:

질문: foo의 값은 무엇인가요?

var foo = 10 + '20';

질문: 아래 코드의 결과값은 무엇인가요?

console.log(0.1 + 0.2 == 0.3);

질문: 아래 코드가 동작하게 하기 위해선 어떻게 해야할까요?

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

질문: 아래 구문의 반환값은 무엇인가요?

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

Question: What is the value of window.foo?
질문: window.foo의 값은 무엇인가요?

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

질문: 아래 두 alert의 결과값은 무엇인가요?

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

질문: foo.length의 값은 무엇인가요?

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

질문: foo.x의 값은 무엇인가요?

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

질문: 아래 코드의 출력값은 무엇인가요?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

그 외 흥미로운 질문들:

  • 최근에 수행했던 흥미로운 프로젝트는 무엇인가요?
  • 사용하는 개발 도구에서 마음에 드는 부분은 무엇인가요?
  • 프론트엔드 커뮤니티에서 당신에게 영감을 준 사람이 있다면 누구인가요?
  • 애완동물 관련 프로젝트를 해 보았나요? 해보았다면 어떤 종류의 프로젝트인가요?
  • IE에서 가장 좋아하는 기능은 무엇인가요?
  • 어떤 커피를 좋아하시나요?

함께하는 분들:

이 문서는 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 +프론트엔드 면접 문제 은행 ★ Front-end Job Interview Questions

프론트엔드 면접 문제 은행

프론트엔드 면접 문제 은행

이 파일에는 잠재적인 프론트엔드 개발자 후보를 선정할 때 사용할 수 있는 여러 가지 면접 질문들이 있습니다. 후보자에게 모든 문제를 사용하는 것은 많은 시간이 소요되기 때문에 추천하지 않습니다. 대신, 여러분이 요구하는 주요 기술과 관련된 질문들을 몇 가지 선정해서 사용해보세요.

참고: 여기 있는 많은 질문은 자유롭게 추가/수정/삭제될 수 있고 정답보다 그 사람의 능력에 관해 이야기하는 흥미로는 토론을 끌어낼 수 있다는 것을 기억하세요.

목차

  1. 일반적인 질문
  2. HTML 관련 질문
  3. CSS 관련 질문
  4. JS 관련 질문
  5. 테스트 관련 질문
  6. 성능 관련 질문
  7. 코딩 관련 질문

함께하기

  1. 함께하는 분들
  2. 함께하는 방법
  3. 라이선스

일반적인 질문:

  • 어제/이번 주에 무엇을 공부하셨나요?
  • 코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇은 가요?
  • 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?
  • 웹 애플리케이션이나 사이트를 만들 때 고려해야 할 UI, Security, Performance, SEO, Maintainability에 대해서 설명해주세요.
  • 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요.
  • 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?
  • 당신이 웹 페이지를 만들 때의 과정을 설명해주실 수 있을까요?
  • 당신에게 5가지 다른 stylesheet가 있습니다. 어떤 방법으로 사이트에 제공하는 게 가장 효과적일까요?
  • 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?
  • 웹사이트에서 assets/resources를 최적화하는 방법에 관해 설명해주세요.
  • 브라우저가 한 번에 1개의 도메인에서 내려받는 자원은 몇 개인가요?
    • 예외에는 어떤 것들이 있나요?
  • 페이지 로드 시간을 줄이는 세 가지 방법에 관해서 이야기 해 보세요.
  • 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Space를 사용했습니다. 어떻게 하실 건가요?
  • 간단한 Slideshow 페이지를 만드는 방법에 관해서 이야기해 보세요.
  • 만약 당신이 올해 기술적 책임자가 되었다면 무엇을 먼저 하시겠습니까?
  • 표준의 중요성에 관해 설명해주세요.
  • Flash of Unstyled Content에 관해 설명해주세요. 또 FOUC를 피하기 위해선 어떻게 해야 하나요?
  • ARIA와 screenreader에 대해 설명해주세요. 또 접근성을 지원하는 웹사이트를 어떻게 만드는지에 대해도 설명해주세요.
  • CSS 애니메이션과 JavaScript 애니메이션의 차이점에 관해 설명해주세요.
  • CORS는 무엇의 약자이고 어떤 문제에 대해서 언급하는 것인가요?

HTML 관련 질문:

  • doctype이 무엇을 하는 것인가요?
  • 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?
  • XML과 XHTML의 다른 점은 무엇인가요
  • XHTML을 이용한 페이지의 한계점은 무엇이 있나요?
  • application/xhtml+xml으로 지정한 페이지에 어떠한 문제가 있나요?
  • 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
  • 다국어 페이지를 제공하는 여러 방법에 관해 설명해주세요.
  • data-속성은 무엇을 하는 것인가요? 사용했을 때 이점은 무엇인가요?
  • HTML5를 오픈 웹 플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?
  • 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
  • <script>, <script async>와 <script defer>의 차이점에 관해 설명해주세요.
  • CSS<link>를 <head></head>사이에 쓰는 것과 JS<script>를 <body></body>뒤에 사용하는 것은 좋은 사용법일까요? 어디에 배치하는 게 좋을까요?
  • Progressive rendering이란 무엇인가요?
  • 이미지 태그에 srcset 속성을 사용하는 이유는 무엇인가요? 브라우저가 이 속성을 가진 콘텐츠를 평가할 때 사용하는 과정을 설명해보세요.
  • HTML templating language를 사용해 본 경험이 있나요?

CSS 관련 질문:

  • class와 id의 차이점에 관해서 설명해주세요.
  • “reset” CSS가 무엇인지, 어떻게 유용한지 설명해주세요.
  • Floats가 어떻게 동작하는지 설명해주세요.
  • z-index에 관해 설명해주세요.
  • BFC(Block Formatting Context)에 관해 설명해주세요
  • 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떨 때 어떻게 사용하는 것이 적절한지 설명하세요.
  • CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상하는지 설명하세요.
  • Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명해주세요.
  • 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?
  • 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?
    • 어떠한 기술과 절차를 거치는지 설명하세요.
  • 시각적으로 보이지 않고 스크린 리더에서만 가능하게 하는 방법에 관해 설명해주세요.
  • 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
  • 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
  • SVG를 스타일링하는데 익숙하신가요?
  • 인쇄하기 위해 웹페이지를 어떻게 최적화 하나요?
  • 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?
  • CSS 전처리(CSS preprocessors)를 사용해보셨나요?
    • 그렇다면, 사용 경험에 기반을 둬 좋았던 점과 나빴던 점을 설명해주세요.
  • 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요? (웹폰트를 제외하고)
  • CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.
  • pseudo-elements에 관해서 설명하고 어디에서 사용되는지 이야기해보세요.
  • box model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.
  • * { box-sizing: border-box; }은 무엇이고 사용했을때 이점은 무엇인가요?
  • 기억나는 display 속성에 대한 값들을 나열해보세요.
  • inline과 inline-block의 차이점은 무엇인가요?
  • 요소를 배치하는 방법(relative, fixed, absolute, static) 간의 차이는 무엇인가요?
  • CSS에서 'C’는 Cascading을 의미합니다. Cascading에 관해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?
  • CSS framework를 사용해본 적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?
  • 새로운 CSS Flexbox 혹은 Grid 스펙을 사용해 보신 적 있나요?
  • 반응형(Responsive) 디자인은 적응형(Adaptive) 디자인과 어떤 차이점이 있나요?
  • 레티나 그래픽 환경에서 작업해 보신 적이 있나요? 하셨다면 어떤 기술을 사용하셨나요?
  • 절대 좌표대신 translate() 혹은 반대로 사용하는 이유가 있나요? 있다면 이유에 관해서 설명해주세요.

JS 관련 질문:

  • event delegation에 관해 설명해주세요.
  • this는 JavaScript에서 어떻게 작동하는지 설명해주세요.
  • prototype 기반 상속은 어떻게 하는지 설명해주세요.
  • AMD와 CommonJS는 무엇이고, 이것들에 대해 어떻게 생각하시나요?
  • 다음 코드가 즉시 호출 함수 표현식(IIFE)로 동작하지 않는 이유에 관해서 설명해보세요: function foo(){ }();.
    • IIFE로 만들기 위해서는 어떻게 해야 하나요?
  • null과 unedefined 그리고 undeclared의 차이점은 무엇인가요?
    • 두개를 구분하기 위해서는 어떻게 하면 될까요?
  • 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
    • 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다)
  • 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
  • 당신의 코드를 어떻게 구성하는지? (모듈 패턴, 전통적 상속)
  • 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
  • 다음 코드의 차이점은 무엇인가요?
function Person(){} var person = Person() var person = new Person()
  • .call과 .apply의 차이점은 무엇인가요?
  • Function.prototype.bind을 설명하세요.
  • document.write()는 언제 사용하나요?
  • UA 문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명하세요.
  • AJAX에 관해 가능한 한 자세히 설명하세요.
  • AJAX를 사용했을 때의 장단점에 대해 설명해주세요.
  • JSON이 어떻게 동작 되는지 설명하세요. (그리고 AJAX와 어떻게 다른지 설명하세요.)
  • 기존에 JavaScript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요.
  • "호이스팅(Hoisting)"에 대해서 설명하세요.
  • 이벤트 버블링(Event Bubbling)에 대해서 설명하세요.
  • 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요.
  • "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
  • 내장된 JavaScript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요?
  • document load event와 DOMContentLoaded event의 차이점은 무엇인가요?
  • ==와 ===의 차이점은 무엇인가요?
  • JavaScript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.
  • 다음 코드를 동작하게 만드세요.
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요?
  • use strict;은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.
  • 100번 반복되는 반복문이 있습니다. 3의 배수일 때는 fizz, 5의 배수일 때는 buzz, 3과 5의 공배수일 때는 fizzbuzz가 출력되는 코드를 작성해보세요.
  • 전역 scope를 사용했을 때 장단점에 관해 설명해주세요.
  • 때때로 load event를 사용하는 이유에 관해 설명해주세요. 또 단점이 있다면 대안에 대해서도 설명해주세요.
  • SPA에서 SEO에 유리하도록 만들기 위한 방법에 대해 설명해주세요.
  • Promise를 사용해 본 경험이 있나요?
  • Promise가 콜백 대비 장/단점은 무엇인지 설명해주세요.
  • JavaScript의 작동방식의 장단점에 관해 설명해주세요.
  • JavaScript를 디버깅할 때 사용하는 도구가 있으면 설명해주세요.
  • 객체 안의 속성과 배열의 아이템을 순회할 때 사용하는 문법에 관해 설명해주세요.
  • mutable object와 immutable object에 관해 설명해주세요.
    • JavaScript에서 immutable 객체의 예를 들어보세요.
    • immutability의 장/단점은 무엇인가요?
    • 자신의 코드에서 불변성(immutability를) 어떻게 달성할 수 있나요?
  • 동기방식과 비동기 방식 함수의 차이에 관해서 설명해주세요.
  • event loop이란 무엇인가요?
    • call stack과 task queue에 관해 설명해주세요.
  • function foo() {}와 var foo = function() {}에서 foo 의 차이가 무엇인지 설명해보세요.
  • let, var, const의 차이점에 관해서 설명해주세요.

테스트 관련 질문들:

  • test code를 작성하면서 개발하는 방식의 장점과 단점에 대해 설명해주세요.
  • test code를 테스트하는 툴을 사용해보신 경험이 있나요?
  • 유닛 테스트와 함수테스트의 차이점은 무엇인가요?
  • code style linting tool을 사용했을때 장점은 무엇인가요?

성능 관련 질문들:

  • 성능관련 이슈들을 발견하기 위해서 사용하는 방법은 무엇인가요?
  • 웹사이트 scrolling 성능을 향상시키기 위한 몇가지 방법에 대해 설명해보세요.
  • 브라우저의 layout, painting, compositing에 대해 설명해보세요.

네트워크 질문들:

  • 전통적으로, 웹사이트의 assets을 여러 도메인으로 서빙했을 때 장점은 무엇인가요?
  • URL로 접속했을 때 어떤 플로우로 화면에 웹사이트가 그려지는지 네트워크 관점에서 설명해주세요.
  • Long-Polling과 Websocket, Server-Sent Event에 대해 설명해주세요.
  • 다음 request header들에 대해 설명해주세요.
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP와 HTTPS에 대해 설명해주세요.
  • HTTP Method들에 대해 설명해주세요.

코딩 질문:

질문: foo의 값은 무엇인가요?

var foo = 10 + '20';

질문: 아래 코드의 결과값은 무엇인가요?

console.log(0.1 + 0.2 == 0.3);

질문: 아래 코드가 동작하게 하기 위해선 어떻게 해야할까요?

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

질문: 아래 구문의 반환값은 무엇인가요?

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

Question: What is the value of window.foo?
질문: window.foo의 값은 무엇인가요?

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

질문: 아래 두 alert의 결과값은 무엇인가요?

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

질문: foo.length의 값은 무엇인가요?

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

질문: foo.x의 값은 무엇인가요?

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

질문: 아래 코드의 출력값은 무엇인가요?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

그 외 흥미로운 질문들:

  • 최근에 수행했던 흥미로운 프로젝트는 무엇인가요?
  • 사용하는 개발 도구에서 마음에 드는 부분은 무엇인가요?
  • 프론트엔드 커뮤니티에서 당신에게 영감을 준 사람이 있다면 누구인가요?
  • 애완동물 관련 프로젝트를 해 보았나요? 해보았다면 어떤 종류의 프로젝트인가요?
  • IE에서 가장 좋아하는 기능은 무엇인가요?
  • 어떤 커피를 좋아하시나요?

함께하는 분들:

이 문서는 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/_site/translations/korean/reference.html b/_site/translations/korean/reference.html index 092fb0b..e0c3c26 100644 --- a/_site/translations/korean/reference.html +++ b/_site/translations/korean/reference.html @@ -1,4 +1,4 @@ -해설집 ★ Front-end Job Interview Questions

해설집

##해설집

이 문서는 정답을 알려주는 문서가 아닙니다.
+해설집 ★ Front-end Job 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)

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

  • 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 diff --git a/_site/translations/latvian/index.html b/_site/translations/latvian/index.html index a873a5e..7905747 100644 --- a/_site/translations/latvian/index.html +++ b/_site/translations/latvian/index.html @@ -1 +1 @@ -Front-end web programmētāja darba intervijas jautājumi ★ Front-end Job 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 +Front-end web programmētāja darba intervijas jautājumi ★ Front-end Job 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 diff --git a/_site/translations/polish/index.html b/_site/translations/polish/index.html index acdd58b..3c30a66 100644 --- a/_site/translations/polish/index.html +++ b/_site/translations/polish/index.html @@ -1 +1 @@ -Pytania kwalifikacyjne na stanowisko front-end web developera ★ Front-end Job 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 +Pytania kwalifikacyjne na stanowisko front-end web developera ★ Front-end Job 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 diff --git a/_site/translations/portuguese/index.html b/_site/translations/portuguese/index.html index 6a4d660..74086fa 100644 --- a/_site/translations/portuguese/index.html +++ b/_site/translations/portuguese/index.html @@ -1 +1 @@ -Questões para entrevista de profissionais Front-end ★ Front-end Job Interview Questions

Questões para entrevista de profissionais Front-end

Questões para entrevista de profissionais Front-end

Este repositório contém uma série de perguntas para entrevista de profissionais de front-end que podem ser usadas para avaliar os candidatos. Não é recomendado de maneira alguma usar todas as perguntas aqui no mesmo candidato (que levaria horas). A escolha de alguns itens dessa lista deverá ajudar a identificar as habilidades requeridas do candidato.

O artigo Baseline For Front-End Developers de Rebecca Murphey é também uma ótima fonte para ler antes de entrevistar um candidato.

Note: Tenha em mente que muitas destas questões estão em aberto e poderia levar à discussões interessantes que dizem mais sobre as capacidades do candidato do que a resposta em si.

Tabela de Conteúdos

  1. Contribuintes Originais
  2. Questões Gerais
  3. Questões de HTML
  4. Questões de CSS
  5. Questões de JS
  6. Questões de jQuery
  7. Questões de Código
  8. Questões Divertidas
  9. Outras Grandes Referências
  10. Licença

⬆ Contribuintes originais:

A maiorida das questões foram retiradas de um _thread_da oksoclap originalmente criada por Paul Irish (@paul_irish) e com a contribuição das seguintes pessoas: @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed @iansym

⬆ Questões Gerais:

  • O que você aprendeu ontem ou esta semana?
  • O que te excita ou te interessa em programação/codificação?
  • Quais as suas considerações sobre UI, Segurança, Perfomance, Aplicação, Manutenibilidade ou Tecnologia quando você desenvolve uma aplicação web ou site?
  • Fale sobre seu ambiente de desenvolvimento preferido. (SO, Editor, Browser, Ferramentas, etc.)
  • Com quais sistemas de controle de versão você é familiar?
  • Descreva seu trabalho quando cria uma página web.
  • Se você tivesse 5 diferentes arquivos de folhas de estilo, qual seria a melhor forma de integrá-los no site?
    • Concatenação de arquivos
  • Descreva a diferença entre progressive enhancement and graceful degradation.
    • Bônus se descrever ou mencionar detecção de recursos.
  • Como você pode otimizar os recursos de um site?
    • À procura de uma série de soluções que possam incluir:
      • Concatenação de arquivo
      • “Minificação” de arquivo
      • Utilização de CDN
      • Caching
      • etc.
  • Por que é melhor servir recursos de um site de múltiplos domínios?
  • Fale 3 formas de diminuir o page load (tempo de carregamento real e percebido)
  • Se você caísse em um projeto que as pessoas usam tabs para indentação e você usa espaços, o que você faria?
    • Sugerir que o projeto utilize algo como EditorConfig (http://editorconfig.org)
    • Se conformar com as convenções (ficar consistente)
    • issue :retab! command
  • Escreva uma página simples de slideshow
    • Bônus se não usar JS.
  • Quais ferramentas você usa para testar a performance do seu código?
    • Profiler, JSPerf, Dromaeo
  • Se você pudesse dominar uma tecnologia deste ano, qual seria?
  • Quais as diferenças entre Long-Polling, Websockets and SSE?
  • Explique a importância de normas e órgãos normativos.
  • O que é FOUC? Como você evita FOUC?
  • Dê a sua melhor descrição do processo do momento que você digita a URL de um website até o final do carregamento da página na sua tela.

⬆ Questões de HTML:

  • O que um doctype faz?
  • Qual a diferença entre standards mode e quirks mode?
  • Quais as limitações quando utilizamos páginas XHTML?
    • Existe algum problema em utilizar páginas como application/xhtml+xml?
  • Como você desenvolve uma página com conteúdo em múltiplos idiomas?
    • Que tipo de coisas que você deve tomar cuidado ao desenvolver um website multi-língua?
  • Quais são os benefícios em utilizar o atributo data-?
  • Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção de HTML5?
  • Descreva a diferença entre cookies, sessionStorage e localStorage.
  • Você pode explicar a diferença entre GET e POST?

⬆ Questões de CSS:

  • Qual é a diferença entre classes e IDs no CSS?
  • Descreva o que é o arquivo “reset” do CSS e o que ele faz e como ele é útil.
    • Bônus para identicação das desvantagens de um reset e/ou mencionar normalize como uma melhor alternativa.
  • Descreva o que são Floats e como eles funcionam.
  • Descreva z-index e como o empilhamento do contexto é formado.
  • Quais são as várias técnicas para “clearing” e quais delas são apropriadas para qual contexto?
  • Explique o que são CSS Sprites, e como você implementaria eles em um website.
  • Quais são suas técnicas favoritas para troca de imagens e quais dela você usa.
  • CSS Hacks, arquivo condicional .css, ou… alguma outra coisa?
  • Como você desenvolve sua página para browsers com recursos limitados?
    • Quais técnicas/processos você usa?
  • Quais são as diferentes formas de visualizar conteúdo escondido (e como fazer para deixar eles disponíveis apenas para leitores de tela?)
  • Você já utilizou algum sistema de grid, se sim, qual você prefere?
  • Você já utilizou ou implementou media queries ou CSSs específicos para mobile?
  • Qual sua familiaridade com SVG?
  • Como você optimiza suas páginas para impressão?
  • Quais são algumas técnicas para escrever um eficiente CSS?
  • Você já utilizou pré-processadores CSS? (SASS, Compass, Stylus, LESS)
    • Se sim, descreva o que você gostou e o que não gostou com eles.
  • Como você implementaria um website que não utilizaria fontes padrões nos computadores?
    • Webfonts (Serviços como: Google Webfonts, Typekit, etc.)
  • Explique como um browser determina quais os elementos que correspondem a um seletor CSS.
  • Explique o que você entende sobre box model e como você poderia dizer para o navegador en CSS para renderizar seu layout em diferentes box models.
  • O que * { box-sizing: border-box; } faz? Quais são as vantagens?
  • Liste quantas propriedades display você puder lembrar.
  • Qual a diferença entre inline e inline-block?
  • Qual a diferença entre elementos posicionados de forma relativa, fixa, absoluta e estática?
  • Quais frameworks CSS você tem usado localmente ou em produção? (Bootstrap, PureCSS, Foundation, etc.)
    • Se sim, quais deles? Se você puder, como você mudaria/melhoraria ele(s)?
  • Você já brincou com as novas especificações de CSS Flexbox e CSS Grid?
  • Como o design responsivo é diferente do design adaptavel?
  • Você já trabalhou com gráficos retina? Se sim, quando e quais técnicas você usou?

⬆ Questões de JS:

  • Explique o evento delegation.
  • Explique como this funciona em JavaScript.
  • Explique como funciona herança prototipada.
  • Como você testa seu JavaScript?
  • AMD vs. CommonJS?
  • Explique por que a seguinte função não funciona como uma IIFE: function foo(){ }();.
    • O que precisa ser alterado para se tornar uma IIFE?
  • Qual a diferença entre uma variável que null, undefined ou undeclared?
    • Como você verificaria esses estados?
  • O que é uma closure, e como/por que você usaria uma?
  • Qual o caso de uso típico para funções anônimas?
  • Como você organiza seu código? (module pattern, herança clássica?)
  • Qual a diferença entre objetos herdados e objetos nativos?
    Qual a diferença entre: function Person(){}, var person = Person(), e var person = new Person()?
  • Qual a diferença entre .call e .apply?
  • Explique Function.prototype.bind.
  • Quando você otimiza seu código?
  • Você pode explicar como funciona a herença no Javascript?
  • Quando você deve usar o document.write()?
    • A maioria dos anúncios de publicidade ainda utilizam document.write() embora seu uso não seja recomendado.
  • Qual a diferença entre feature detection, feature inference, e o uso de UA string?
  • Explique o que é AJAX o mais detalhadamente possível.
  • Explique como o JSONP funciona (e como ele realmente não é AJAX).
  • Você já utilizou templates com Javascript?
    • Se sim, quais bibliotecas foram utilizadas? (Mustache.js, Handlebars, etc.)
  • Explique o que é “hoisting”.
  • Descreva o que é event bubbling.
  • Qual a diferença entre “atributo” e “propriedade”?
  • Porque a extensão de objetos nativos não é uma boa ideia?
  • Qual a diferença entre o evento document load e o evento document ready?
  • Qual a diferença entre == e ===?
  • Explique como você pega um parâmetro na URL do browser.
  • Explique a política de same-origin em relação a Javascript.
  • Faça isso funcionar:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • O que é um operador ternário, o que a palavra “ternário” indica/significa?
  • O que é o "use strict";? Quais a vantagens e desvantagens de sua utilização?
  • Crie um loop for que itere até 100 enquanto retorna fizz em múltiplos de 3, buzz em múltiplos de 5 e fizzbuzz em múltiplos de 3 e 5.

⬆ Questões de jQuery:

  • Explique “chaining”.
  • Explique “deferreds”.
  • Quais são algumas otimizações de jQuery que você pode implementar?
  • O que .end() faz?
  • Nomeie 4 valores diferentes que você pode passar para um método jQuery.
    • Seletor (string), HTML (string), Callback (function), HTMLElement, object, array, elemento de array, jQuery Object, etc.
  • Qual a diferença entre .get(), [], e .eq()?

⬆ Questões de código:

Questão: Como você faria isso funcionar?

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

Questão: Qual valor é retornado da seguinte declaração?

"sou uma lasanha".split("").reverse().join("");

Resposta: "ahnasal amu uos"

Questão: Qual é o valor de window.foo?

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

Resposta: “bar” (apenas se window.foo for falso, se não ele vai retornar o seu valor próprio).

Questão: Qual o retorno dos dois alerts abaixo?

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

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

Questão: Qual o valor de foo.length?

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

Resposta: 2

⬆ Questões Divertidas:

  • Qual a coisa mais legal que você desenvolveu recentement? Qual você ficou mais orgulhoso?
  • Quais suas partes favoritas sobre as ferramentas de desenvolvimento que você usa?
  • Você teve algum projeto para animais de estimação? Qual tipo?
  • Qual sua feature favorita do Internet Explorer?

⬆ Outras Grandes Referências:

⬆ Licença:

Lançado sobre a Licença MIT. Veja o arquivo LICENSE para detalhes.

Edit this page
\ No newline at end of file +Questões para entrevista de profissionais Front-end ★ Front-end Job Interview Questions

Questões para entrevista de profissionais Front-end

Questões para entrevista de profissionais Front-end

Este repositório contém uma série de perguntas para entrevista de profissionais de front-end que podem ser usadas para avaliar os candidatos. Não é recomendado de maneira alguma usar todas as perguntas aqui no mesmo candidato (que levaria horas). A escolha de alguns itens dessa lista deverá ajudar a identificar as habilidades requeridas do candidato.

O artigo Baseline For Front-End Developers de Rebecca Murphey é também uma ótima fonte para ler antes de entrevistar um candidato.

Note: Tenha em mente que muitas destas questões estão em aberto e poderia levar à discussões interessantes que dizem mais sobre as capacidades do candidato do que a resposta em si.

Tabela de Conteúdos

  1. Contribuintes Originais
  2. Questões Gerais
  3. Questões de HTML
  4. Questões de CSS
  5. Questões de JS
  6. Questões de jQuery
  7. Questões de Código
  8. Questões Divertidas
  9. Outras Grandes Referências
  10. Licença

⬆ Contribuintes originais:

A maiorida das questões foram retiradas de um _thread_da oksoclap originalmente criada por Paul Irish (@paul_irish) e com a contribuição das seguintes pessoas: @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed @iansym

⬆ Questões Gerais:

  • O que você aprendeu ontem ou esta semana?
  • O que te excita ou te interessa em programação/codificação?
  • Quais as suas considerações sobre UI, Segurança, Perfomance, Aplicação, Manutenibilidade ou Tecnologia quando você desenvolve uma aplicação web ou site?
  • Fale sobre seu ambiente de desenvolvimento preferido. (SO, Editor, Browser, Ferramentas, etc.)
  • Com quais sistemas de controle de versão você é familiar?
  • Descreva seu trabalho quando cria uma página web.
  • Se você tivesse 5 diferentes arquivos de folhas de estilo, qual seria a melhor forma de integrá-los no site?
    • Concatenação de arquivos
  • Descreva a diferença entre progressive enhancement and graceful degradation.
    • Bônus se descrever ou mencionar detecção de recursos.
  • Como você pode otimizar os recursos de um site?
    • À procura de uma série de soluções que possam incluir:
      • Concatenação de arquivo
      • “Minificação” de arquivo
      • Utilização de CDN
      • Caching
      • etc.
  • Por que é melhor servir recursos de um site de múltiplos domínios?
  • Fale 3 formas de diminuir o page load (tempo de carregamento real e percebido)
  • Se você caísse em um projeto que as pessoas usam tabs para indentação e você usa espaços, o que você faria?
    • Sugerir que o projeto utilize algo como EditorConfig (http://editorconfig.org)
    • Se conformar com as convenções (ficar consistente)
    • issue :retab! command
  • Escreva uma página simples de slideshow
    • Bônus se não usar JS.
  • Quais ferramentas você usa para testar a performance do seu código?
    • Profiler, JSPerf, Dromaeo
  • Se você pudesse dominar uma tecnologia deste ano, qual seria?
  • Quais as diferenças entre Long-Polling, Websockets and SSE?
  • Explique a importância de normas e órgãos normativos.
  • O que é FOUC? Como você evita FOUC?
  • Dê a sua melhor descrição do processo do momento que você digita a URL de um website até o final do carregamento da página na sua tela.

⬆ Questões de HTML:

  • O que um doctype faz?
  • Qual a diferença entre standards mode e quirks mode?
  • Quais as limitações quando utilizamos páginas XHTML?
    • Existe algum problema em utilizar páginas como application/xhtml+xml?
  • Como você desenvolve uma página com conteúdo em múltiplos idiomas?
    • Que tipo de coisas que você deve tomar cuidado ao desenvolver um website multi-língua?
  • Quais são os benefícios em utilizar o atributo data-?
  • Considere o HTML5 como uma plataforma web aberta. Quais são os blocos de construção de HTML5?
  • Descreva a diferença entre cookies, sessionStorage e localStorage.
  • Você pode explicar a diferença entre GET e POST?

⬆ Questões de CSS:

  • Qual é a diferença entre classes e IDs no CSS?
  • Descreva o que é o arquivo “reset” do CSS e o que ele faz e como ele é útil.
    • Bônus para identicação das desvantagens de um reset e/ou mencionar normalize como uma melhor alternativa.
  • Descreva o que são Floats e como eles funcionam.
  • Descreva z-index e como o empilhamento do contexto é formado.
  • Quais são as várias técnicas para “clearing” e quais delas são apropriadas para qual contexto?
  • Explique o que são CSS Sprites, e como você implementaria eles em um website.
  • Quais são suas técnicas favoritas para troca de imagens e quais dela você usa.
  • CSS Hacks, arquivo condicional .css, ou… alguma outra coisa?
  • Como você desenvolve sua página para browsers com recursos limitados?
    • Quais técnicas/processos você usa?
  • Quais são as diferentes formas de visualizar conteúdo escondido (e como fazer para deixar eles disponíveis apenas para leitores de tela?)
  • Você já utilizou algum sistema de grid, se sim, qual você prefere?
  • Você já utilizou ou implementou media queries ou CSSs específicos para mobile?
  • Qual sua familiaridade com SVG?
  • Como você optimiza suas páginas para impressão?
  • Quais são algumas técnicas para escrever um eficiente CSS?
  • Você já utilizou pré-processadores CSS? (SASS, Compass, Stylus, LESS)
    • Se sim, descreva o que você gostou e o que não gostou com eles.
  • Como você implementaria um website que não utilizaria fontes padrões nos computadores?
    • Webfonts (Serviços como: Google Webfonts, Typekit, etc.)
  • Explique como um browser determina quais os elementos que correspondem a um seletor CSS.
  • Explique o que você entende sobre box model e como você poderia dizer para o navegador en CSS para renderizar seu layout em diferentes box models.
  • O que * { box-sizing: border-box; } faz? Quais são as vantagens?
  • Liste quantas propriedades display você puder lembrar.
  • Qual a diferença entre inline e inline-block?
  • Qual a diferença entre elementos posicionados de forma relativa, fixa, absoluta e estática?
  • Quais frameworks CSS você tem usado localmente ou em produção? (Bootstrap, PureCSS, Foundation, etc.)
    • Se sim, quais deles? Se você puder, como você mudaria/melhoraria ele(s)?
  • Você já brincou com as novas especificações de CSS Flexbox e CSS Grid?
  • Como o design responsivo é diferente do design adaptavel?
  • Você já trabalhou com gráficos retina? Se sim, quando e quais técnicas você usou?

⬆ Questões de JS:

  • Explique o evento delegation.
  • Explique como this funciona em JavaScript.
  • Explique como funciona herança prototipada.
  • Como você testa seu JavaScript?
  • AMD vs. CommonJS?
  • Explique por que a seguinte função não funciona como uma IIFE: function foo(){ }();.
    • O que precisa ser alterado para se tornar uma IIFE?
  • Qual a diferença entre uma variável que null, undefined ou undeclared?
    • Como você verificaria esses estados?
  • O que é uma closure, e como/por que você usaria uma?
  • Qual o caso de uso típico para funções anônimas?
  • Como você organiza seu código? (module pattern, herança clássica?)
  • Qual a diferença entre objetos herdados e objetos nativos?
    Qual a diferença entre: function Person(){}, var person = Person(), e var person = new Person()?
  • Qual a diferença entre .call e .apply?
  • Explique Function.prototype.bind.
  • Quando você otimiza seu código?
  • Você pode explicar como funciona a herença no Javascript?
  • Quando você deve usar o document.write()?
    • A maioria dos anúncios de publicidade ainda utilizam document.write() embora seu uso não seja recomendado.
  • Qual a diferença entre feature detection, feature inference, e o uso de UA string?
  • Explique o que é AJAX o mais detalhadamente possível.
  • Explique como o JSONP funciona (e como ele realmente não é AJAX).
  • Você já utilizou templates com Javascript?
    • Se sim, quais bibliotecas foram utilizadas? (Mustache.js, Handlebars, etc.)
  • Explique o que é “hoisting”.
  • Descreva o que é event bubbling.
  • Qual a diferença entre “atributo” e “propriedade”?
  • Porque a extensão de objetos nativos não é uma boa ideia?
  • Qual a diferença entre o evento document load e o evento document ready?
  • Qual a diferença entre == e ===?
  • Explique como você pega um parâmetro na URL do browser.
  • Explique a política de same-origin em relação a Javascript.
  • Faça isso funcionar:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • O que é um operador ternário, o que a palavra “ternário” indica/significa?
  • O que é o "use strict";? Quais a vantagens e desvantagens de sua utilização?
  • Crie um loop for que itere até 100 enquanto retorna fizz em múltiplos de 3, buzz em múltiplos de 5 e fizzbuzz em múltiplos de 3 e 5.

⬆ Questões de jQuery:

  • Explique “chaining”.
  • Explique “deferreds”.
  • Quais são algumas otimizações de jQuery que você pode implementar?
  • O que .end() faz?
  • Nomeie 4 valores diferentes que você pode passar para um método jQuery.
    • Seletor (string), HTML (string), Callback (function), HTMLElement, object, array, elemento de array, jQuery Object, etc.
  • Qual a diferença entre .get(), [], e .eq()?

⬆ Questões de código:

Questão: Como você faria isso funcionar?

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

Questão: Qual valor é retornado da seguinte declaração?

"sou uma lasanha".split("").reverse().join("");

Resposta: "ahnasal amu uos"

Questão: Qual é o valor de window.foo?

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

Resposta: “bar” (apenas se window.foo for falso, se não ele vai retornar o seu valor próprio).

Questão: Qual o retorno dos dois alerts abaixo?

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

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

Questão: Qual o valor de foo.length?

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

Resposta: 2

⬆ Questões Divertidas:

  • Qual a coisa mais legal que você desenvolveu recentement? Qual você ficou mais orgulhoso?
  • Quais suas partes favoritas sobre as ferramentas de desenvolvimento que você usa?
  • Você teve algum projeto para animais de estimação? Qual tipo?
  • Qual sua feature favorita do Internet Explorer?

⬆ Outras Grandes Referências:

⬆ Licença:

Lançado sobre a Licença MIT. Veja o arquivo LICENSE para detalhes.

Edit this page
\ No newline at end of file diff --git a/_site/translations/romanian/index.html b/_site/translations/romanian/index.html index 6555c4e..012fea2 100644 --- a/_site/translations/romanian/index.html +++ b/_site/translations/romanian/index.html @@ -1 +1 @@ -Întrebări pentru interviu tehnic web front-end ★ Front-end Job Interview Questions

Întrebări pentru interviu tehnic web front-end

Întrebări pentru interviu tehnic web front-end

Acest fișier conține o serie de întrebări pentru interviuri tehnice pe partea
de front-end, care pot fi folosite pentru a verifica un potențial candidat. Nu
este deloc recomandat să fie folosite toate întrebările pentru un singur
candidat (ar lua câteva ore). Alegând câteva întrebări din această listă ar
trebui să te ajute în verificarea calităților pe care le urmărești.

Notă: Ține minte că multe dintre întrebări au răspuns liber și ar
putea duce la discuții interesante care ți-ar putea spune mai multe despre
capacitățile persoanei.

Cuprins

  1. Întrebări generale
  2. Întrebări despre HTML
  3. Întrebări despre CSS
  4. Întrebări despre JS
  5. Întrebări despre testare
  6. Întrebări despre perfomanță
  7. Întrebări despre rețea
  8. Întrebări despre programare
  9. Întrebări amuzante

Procesul de implicare

  1. Contribuitori
  2. Cum să contribui
  3. Licență

####[⬆] Întrebări generale:

  • Ce ai învățat ieri/săptămâna asta?
  • Ce te fascinează sau interesează la programare?
  • Ce provocare technica ai intampinat recent si cum ai rezlovat-o?
  • Ce aspecte de UI, Securitate, Performanță, SEO, Întreținere sau Tehnologie
    iei în cosiderare când construiești o aplicație web sau un site?
  • Povestește despre mediul de lucru preferat.
  • Îți poți descrie fluxul de lucru când creezi o pagină web?
  • Dacă ai 5 fișiere cu cod CSS, cum le poți integra cel mai bine în site?
  • Poți descrie diferența dintre “progressive enhancement” și “graceful
    degradation”?
  • Cum ai optimiza resursele statice ale unui site?
  • Câte resurse poate un browser descărca de la un domeniu la un moment dat?
    • Care sunt excepțiile?
  • Numește 3 moduri pentru a scădea timpul de încarcare a paginii. (perceput
    sau chiar timpul de descărcare)
  • Dacă intri într-un proiect și se folosesc taburi în loc de spații, ce faci?
  • Descrie modul în care ai crea o simplă pagină de prezentare.
  • Ce unelte folosești pentru a testa performanța codului pe care îl scrii?
  • Dacă ai putea învăța o tehnologie anul asta, care ar fi?
  • Explică importanța standardelor și a organismelor de standardizare.
  • Ce este Flash of Unstyled Content? Cum eviți FOUC?
  • Explică ce sunt screenreaders și ARIA și cum faci un site accesibil.
  • Compară părți bune și negative pentru animații CSS versus animații JavaScript.
  • Ce reprezintă CORS si ce probleme incearcă să rezolve?

####[⬆] Întrebări despre HTML:

  • La ce este util doctype?
  • Care este diferența dintre “standards mode” și “quirks mode”?
  • Care este diferența dintre HTML și XHTML?
  • Apar probleme când servești pagini ca application/xhtml+xml?
  • Cum servești o pagină cu conținut în mai multe limbi?
  • La ce trebuie să fii atent când creezi un design sau dezvolți pentru site-uri
    multilingve
  • La ce sunt utile atributele data-?
  • Considerând HTML5 ca o platformă web deschisă, care sunt parțile
    componente alte HTML5?
  • Descrie diferența dintre cookies, sessionStorage și localStorage.
  • Descrie diferența dintre <script>, <script async> și <script defer>.
  • Ce înseamnă randare progresivă?
  • Ai folosit altceva în afară de HTML până acum?

####[⬆] Întrebări despre CSS:

  • Care este diferența dintre clase și ID-uri în CSS?
  • Care este diferența între a ‘reseta’ și a ‘normaliza’ in CSS? Pe care ai
    alege-o și de ce?
  • Descrie ‘Float’ si cum funcționează.
  • Descrie z-index și cum se formează stacking context.
  • Descrie BFC(Block Formatting Context) și cum functionează.
  • Care sunt diferitele metode de a ‘curăța’ (clearing) și care este potrivită
    pentru ce context?
  • Explică conceptul de CSS sprites și cum le-ai implementa pe o pagină sau
    un site.
  • Care sunt tehnicile tale preferate pentru înlocuirea imaginilor și care
    când le folosești?
  • Hack-uri de proprietăți CSS, includerea condițională a fișierelor .css,
    sau… altceva?
  • Cum servești pagini pentru browsere cu capabilități reduse?
    • Ce procese/tehnici folosești?
  • Care sunt diferitele modalități de a ascunde vizual conținut (dar sa-l
    faci disponibil pentru cititoare de ecrane) ?
  • Ai folosit vreodată un sistem ‘grid’ și dacă da, ce preferi?
  • Ai folosit sau implementat ‘media queries’ sau interfețe/CSS specific
    pentru mobile?
  • Ești familiar cu stilizarea unui SVG?
  • Cum optimizezi paginile pentru print?
  • Ceva ‘gotchas’ când scrii CSS eficient?
  • Care sunt avantajele/dezavantajele folosirii preprocesoarelor CSS (SASS,
    Compass, Stylus, LESS)
    • Descrie ce îți place respectiv nu îți place la preprocesoarele CSS pe
      care le-ai folosit
  • Cum ai implementa un design care folosește fonturi non-standard?
  • Explică cum un browser determina ce elemente se potrivesc unui selector CSS?
  • Descrie ‘pseudo-elements’ și explică la ce sunt folosite.
  • Explică, în cuvintele tale, conceptul “box model” si cum ai instrui
    browser-ul, prin CSS, sa randeze layoutul în modele diferite.
  • Ce face * { box-sizing: border-box; }? Care sunt avantajele?
  • Ce proprietăți de display știi?
  • Care este diferența între inline și inline-block?
  • Care este diferența între poziționarea relativă, fixă, absolută și statică
    a unui element?
  • C-ul din CSS vine de la Cascading. Cum este determinată prioritatea în
    atribuirea stilului (câteva exemple)? Cum folosești acest sistem în avantajul
    tău?
  • Ce framework CSS ai folosit local sau în producție? (Bootstrap, PureCSS,
    Foundation etc.)
    • Ce ai schimba / îmbunătăți la ele?
  • Ai avut ocazia să te joci cu noile specificații pentru CSS Flexbox sau Grid?
  • Cum este design-ul ‘responsive’ diferit de cel ‘adaptive’?
  • Ai lucrat vreodata pentru retina display? Dacă da, când și ce tehnici ai
    folosit?
  • Este vreun motiv pentru care ai vrea să folosești translate() în loc de
    posiționare absolută sau invers? De ce?

####[⬆] Întrebări despre JS:

  • Explică “event delegation”.
  • Explică cum funcționează this în JavaScript.
  • Explică cum funcționează moștenirea prototipală.
  • Cum îti testezi codul JavaScript?
  • Ce părere ai despre AMD vs. CommonJS?
  • Explică de ce următoarea nu functionează ca un IIFE: function foo(){ }();
    • Ce trebuie schimbat ca să o transformi într-o IIFE?
  • Care este diferența dintre o variabilă care este: null, undefined sau
    undeclared?
    • Cum ai face sa verifici după fiecare dintre stările acestea?
  • Ce este un “closure” și cum/de ce ai folosi unul?
  • Care este un caz în care sunt folosite funcții anonime?
  • Cum îți organizezi codul? (module pattern, moștenire?)
  • Care este diferența dintre obiecte host si obiecte native?
  • Diferența dintre: function Person(){}, var person = Person() și
    person = new Person()
  • Care este diferența dintre .call și .apply?
  • Explică Function.prototype.bind?
  • Când îți optimizezi codul?
  • Când ai folosi document.write()?
  • Care este diferența dintre ‘feature detection’, ‘feature inference’ și
    folosirea șirului User Agent?
  • Explică AJAX cât mai detaliat posibil.
  • Explică cum funcționează JSONP (și cum nu este chiar AJAX ).
  • Ai folosit vreodată template-uri JavaScript?
    • Dacă da, ce librării ai folosit? (Mustache.js, Handlebars etc.)
  • Explică “hoisting”.
  • Descrie “event bubbling”.
  • Care este diferența dintre un atribut și o proprietate?
  • De ce nu este o idee bună extinderea obiectelor JavaScript “built-in”?
  • Care este diferența dintre evenimentul “document load” și “document ready”?
  • Care este diferența dintre “==” și “===”?
  • Explică politica “same-origins” în legătură cu JavaScript.
  • Fă următorul cod să funcționeze:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ce este o expresie ternară și ce indică cuvântul ternar?
  • Ce este "use strict;" și care sunt avantajele și dezavantajele folosirii
    acestuia?
  • 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.
  • De ce este, de regulă, o idee bună să nu poluezi scope-ul global al unui
    website?
  • Explică ce este o ‘single page app’ și cum ai putea să improvizezi SEO-ul?
  • Care este gradul tău de experiență cu ‘Promises’ și/sau ‘polyfills’-ul lor?
  • Care sunt avantajele și dezavantajele in a folosi ‘Promises’ in loc de
    ‘callbacks’ ?
  • Care sunt avantajele și dezavantajele prin a scrie JavaScript într-o limbă ce
    compilează JavaScript?
  • Ce unelte si tehnici foloșeti pentru a ‘depana’ (debug) JavaScript?
  • Ce construcții de limbaj folosești pentru a itera peste proprietățile obiectelor și
    elmentele listelor (array)?
  • Explică diferența dintre obiectele mutabile și imutabile.
  • Ce exmplu de obiect imutabil poți da în JavaScript?
  • Avantaje si dezavantaje a imutabilității?
  • Cum poți obține imutabilitate în propriul cod?
  • Explică diferența dintre funcțiile sincrone (synchronous) și
    asincrone (asynchronous).
  • Ce este un ‘even loop’?
  • Care este diferența dintre ‘call stack’ si ‘task queue’?

####[⬆] Întrebări despre testare:

  • Care sunt avantajele/dezavantajele în a-ți testa codul?
  • Ce unelte ai folosi pentru a testa functionalitatea codului?
  • Care este diferența dintre unitatea de testare (unit test) și testarea de
    funcționalitate/integrare?
  • Care este scopul unei unelte de lintarea a stilului de cod?

####[⬆] Întrebări despre perfomanță:

  • Ce unelte ai folosi pentru a găsi bug-uri de performanță in codul tau?
  • Ce diferite metode prin care ai putea îmbunătăți performanța defilării
    (scroll) a unui site știi?
  • Explică diferența dintre o schemă (layout), desenare (painting) și compoziție
    (compositing).

####[⬆] Întrebări despre rețea:

  • Tradițional, de ce a fost mai bine să servești resurse de pe mai multe domenii?
  • Încearcă să descrii cât mai bine ce se întâmplă din momentul în care scrii
    un URL-ul unui site în browser până când este complet încărcat pe ecranul tău.
  • Care sunt diferențele dintre Long-Polling, WebSockets și Server-Sent Events?
  • Explică semnificația următoarelor antete HTTP:
    • Diferența dintre Expires, Date, Age și If-Modified
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Care sunt acțiunile HTTP? Listează toate acțiunile HTTP pe care le ști și
    explică-le.

####[⬆] Întrebări despre cod:

Întrebare: Care este valoarea lui foo?

var foo = 10 + '20';

Întrebare: Ce valoare returnează următorul cod?

console.log(0.1 + 0.2 == 0.3);

Întrebare: Cum ai face următoarea să funcționeze?

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

Întrebare: Ce valoare este returnată de expresia următoare?

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

Întrebare: Care este valoare lui window.foo?

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

Întrebare: Care este rezultatul celor două apelări ale funcției alert?

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

Întrebare: Care este valoarea lui foo.length?

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

Întrebare: Care este valoarea lui foo.x?

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

Întrebare: Ce output printează acest cod?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

####[⬆] Întrebări amuzante:

  • Povestește-mi despre un proiect mișto la care ai lucrat recent?
  • Ce îți place cel mai mult la uneltele de dezvoltare pe care le folosești?
  • Ai proiecte personale? Ce fel?
  • Care este funcționalitatea ta preferată din Internet Explorer?
  • Cum îți place cafeaua?

####[⬆] 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 +Întrebări pentru interviu tehnic web front-end ★ Front-end Job Interview Questions

Întrebări pentru interviu tehnic web front-end

Întrebări pentru interviu tehnic web front-end

Acest fișier conține o serie de întrebări pentru interviuri tehnice pe partea
de front-end, care pot fi folosite pentru a verifica un potențial candidat. Nu
este deloc recomandat să fie folosite toate întrebările pentru un singur
candidat (ar lua câteva ore). Alegând câteva întrebări din această listă ar
trebui să te ajute în verificarea calităților pe care le urmărești.

Notă: Ține minte că multe dintre întrebări au răspuns liber și ar
putea duce la discuții interesante care ți-ar putea spune mai multe despre
capacitățile persoanei.

Cuprins

  1. Întrebări generale
  2. Întrebări despre HTML
  3. Întrebări despre CSS
  4. Întrebări despre JS
  5. Întrebări despre testare
  6. Întrebări despre perfomanță
  7. Întrebări despre rețea
  8. Întrebări despre programare
  9. Întrebări amuzante

Procesul de implicare

  1. Contribuitori
  2. Cum să contribui
  3. Licență

####[⬆] Întrebări generale:

  • Ce ai învățat ieri/săptămâna asta?
  • Ce te fascinează sau interesează la programare?
  • Ce provocare technica ai intampinat recent si cum ai rezlovat-o?
  • Ce aspecte de UI, Securitate, Performanță, SEO, Întreținere sau Tehnologie
    iei în cosiderare când construiești o aplicație web sau un site?
  • Povestește despre mediul de lucru preferat.
  • Îți poți descrie fluxul de lucru când creezi o pagină web?
  • Dacă ai 5 fișiere cu cod CSS, cum le poți integra cel mai bine în site?
  • Poți descrie diferența dintre “progressive enhancement” și “graceful
    degradation”?
  • Cum ai optimiza resursele statice ale unui site?
  • Câte resurse poate un browser descărca de la un domeniu la un moment dat?
    • Care sunt excepțiile?
  • Numește 3 moduri pentru a scădea timpul de încarcare a paginii. (perceput
    sau chiar timpul de descărcare)
  • Dacă intri într-un proiect și se folosesc taburi în loc de spații, ce faci?
  • Descrie modul în care ai crea o simplă pagină de prezentare.
  • Ce unelte folosești pentru a testa performanța codului pe care îl scrii?
  • Dacă ai putea învăța o tehnologie anul asta, care ar fi?
  • Explică importanța standardelor și a organismelor de standardizare.
  • Ce este Flash of Unstyled Content? Cum eviți FOUC?
  • Explică ce sunt screenreaders și ARIA și cum faci un site accesibil.
  • Compară părți bune și negative pentru animații CSS versus animații JavaScript.
  • Ce reprezintă CORS si ce probleme incearcă să rezolve?

####[⬆] Întrebări despre HTML:

  • La ce este util doctype?
  • Care este diferența dintre “standards mode” și “quirks mode”?
  • Care este diferența dintre HTML și XHTML?
  • Apar probleme când servești pagini ca application/xhtml+xml?
  • Cum servești o pagină cu conținut în mai multe limbi?
  • La ce trebuie să fii atent când creezi un design sau dezvolți pentru site-uri
    multilingve
  • La ce sunt utile atributele data-?
  • Considerând HTML5 ca o platformă web deschisă, care sunt parțile
    componente alte HTML5?
  • Descrie diferența dintre cookies, sessionStorage și localStorage.
  • Descrie diferența dintre <script>, <script async> și <script defer>.
  • Ce înseamnă randare progresivă?
  • Ai folosit altceva în afară de HTML până acum?

####[⬆] Întrebări despre CSS:

  • Care este diferența dintre clase și ID-uri în CSS?
  • Care este diferența între a ‘reseta’ și a ‘normaliza’ in CSS? Pe care ai
    alege-o și de ce?
  • Descrie ‘Float’ si cum funcționează.
  • Descrie z-index și cum se formează stacking context.
  • Descrie BFC(Block Formatting Context) și cum functionează.
  • Care sunt diferitele metode de a ‘curăța’ (clearing) și care este potrivită
    pentru ce context?
  • Explică conceptul de CSS sprites și cum le-ai implementa pe o pagină sau
    un site.
  • Care sunt tehnicile tale preferate pentru înlocuirea imaginilor și care
    când le folosești?
  • Hack-uri de proprietăți CSS, includerea condițională a fișierelor .css,
    sau… altceva?
  • Cum servești pagini pentru browsere cu capabilități reduse?
    • Ce procese/tehnici folosești?
  • Care sunt diferitele modalități de a ascunde vizual conținut (dar sa-l
    faci disponibil pentru cititoare de ecrane) ?
  • Ai folosit vreodată un sistem ‘grid’ și dacă da, ce preferi?
  • Ai folosit sau implementat ‘media queries’ sau interfețe/CSS specific
    pentru mobile?
  • Ești familiar cu stilizarea unui SVG?
  • Cum optimizezi paginile pentru print?
  • Ceva ‘gotchas’ când scrii CSS eficient?
  • Care sunt avantajele/dezavantajele folosirii preprocesoarelor CSS (SASS,
    Compass, Stylus, LESS)
    • Descrie ce îți place respectiv nu îți place la preprocesoarele CSS pe
      care le-ai folosit
  • Cum ai implementa un design care folosește fonturi non-standard?
  • Explică cum un browser determina ce elemente se potrivesc unui selector CSS?
  • Descrie ‘pseudo-elements’ și explică la ce sunt folosite.
  • Explică, în cuvintele tale, conceptul “box model” si cum ai instrui
    browser-ul, prin CSS, sa randeze layoutul în modele diferite.
  • Ce face * { box-sizing: border-box; }? Care sunt avantajele?
  • Ce proprietăți de display știi?
  • Care este diferența între inline și inline-block?
  • Care este diferența între poziționarea relativă, fixă, absolută și statică
    a unui element?
  • C-ul din CSS vine de la Cascading. Cum este determinată prioritatea în
    atribuirea stilului (câteva exemple)? Cum folosești acest sistem în avantajul
    tău?
  • Ce framework CSS ai folosit local sau în producție? (Bootstrap, PureCSS,
    Foundation etc.)
    • Ce ai schimba / îmbunătăți la ele?
  • Ai avut ocazia să te joci cu noile specificații pentru CSS Flexbox sau Grid?
  • Cum este design-ul ‘responsive’ diferit de cel ‘adaptive’?
  • Ai lucrat vreodata pentru retina display? Dacă da, când și ce tehnici ai
    folosit?
  • Este vreun motiv pentru care ai vrea să folosești translate() în loc de
    posiționare absolută sau invers? De ce?

####[⬆] Întrebări despre JS:

  • Explică “event delegation”.
  • Explică cum funcționează this în JavaScript.
  • Explică cum funcționează moștenirea prototipală.
  • Cum îti testezi codul JavaScript?
  • Ce părere ai despre AMD vs. CommonJS?
  • Explică de ce următoarea nu functionează ca un IIFE: function foo(){ }();
    • Ce trebuie schimbat ca să o transformi într-o IIFE?
  • Care este diferența dintre o variabilă care este: null, undefined sau
    undeclared?
    • Cum ai face sa verifici după fiecare dintre stările acestea?
  • Ce este un “closure” și cum/de ce ai folosi unul?
  • Care este un caz în care sunt folosite funcții anonime?
  • Cum îți organizezi codul? (module pattern, moștenire?)
  • Care este diferența dintre obiecte host si obiecte native?
  • Diferența dintre: function Person(){}, var person = Person() și
    person = new Person()
  • Care este diferența dintre .call și .apply?
  • Explică Function.prototype.bind?
  • Când îți optimizezi codul?
  • Când ai folosi document.write()?
  • Care este diferența dintre ‘feature detection’, ‘feature inference’ și
    folosirea șirului User Agent?
  • Explică AJAX cât mai detaliat posibil.
  • Explică cum funcționează JSONP (și cum nu este chiar AJAX ).
  • Ai folosit vreodată template-uri JavaScript?
    • Dacă da, ce librării ai folosit? (Mustache.js, Handlebars etc.)
  • Explică “hoisting”.
  • Descrie “event bubbling”.
  • Care este diferența dintre un atribut și o proprietate?
  • De ce nu este o idee bună extinderea obiectelor JavaScript “built-in”?
  • Care este diferența dintre evenimentul “document load” și “document ready”?
  • Care este diferența dintre “==” și “===”?
  • Explică politica “same-origins” în legătură cu JavaScript.
  • Fă următorul cod să funcționeze:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Ce este o expresie ternară și ce indică cuvântul ternar?
  • Ce este "use strict;" și care sunt avantajele și dezavantajele folosirii
    acestuia?
  • 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.
  • De ce este, de regulă, o idee bună să nu poluezi scope-ul global al unui
    website?
  • Explică ce este o ‘single page app’ și cum ai putea să improvizezi SEO-ul?
  • Care este gradul tău de experiență cu ‘Promises’ și/sau ‘polyfills’-ul lor?
  • Care sunt avantajele și dezavantajele in a folosi ‘Promises’ in loc de
    ‘callbacks’ ?
  • Care sunt avantajele și dezavantajele prin a scrie JavaScript într-o limbă ce
    compilează JavaScript?
  • Ce unelte si tehnici foloșeti pentru a ‘depana’ (debug) JavaScript?
  • Ce construcții de limbaj folosești pentru a itera peste proprietățile obiectelor și
    elmentele listelor (array)?
  • Explică diferența dintre obiectele mutabile și imutabile.
  • Ce exmplu de obiect imutabil poți da în JavaScript?
  • Avantaje si dezavantaje a imutabilității?
  • Cum poți obține imutabilitate în propriul cod?
  • Explică diferența dintre funcțiile sincrone (synchronous) și
    asincrone (asynchronous).
  • Ce este un ‘even loop’?
  • Care este diferența dintre ‘call stack’ si ‘task queue’?

####[⬆] Întrebări despre testare:

  • Care sunt avantajele/dezavantajele în a-ți testa codul?
  • Ce unelte ai folosi pentru a testa functionalitatea codului?
  • Care este diferența dintre unitatea de testare (unit test) și testarea de
    funcționalitate/integrare?
  • Care este scopul unei unelte de lintarea a stilului de cod?

####[⬆] Întrebări despre perfomanță:

  • Ce unelte ai folosi pentru a găsi bug-uri de performanță in codul tau?
  • Ce diferite metode prin care ai putea îmbunătăți performanța defilării
    (scroll) a unui site știi?
  • Explică diferența dintre o schemă (layout), desenare (painting) și compoziție
    (compositing).

####[⬆] Întrebări despre rețea:

  • Tradițional, de ce a fost mai bine să servești resurse de pe mai multe domenii?
  • Încearcă să descrii cât mai bine ce se întâmplă din momentul în care scrii
    un URL-ul unui site în browser până când este complet încărcat pe ecranul tău.
  • Care sunt diferențele dintre Long-Polling, WebSockets și Server-Sent Events?
  • Explică semnificația următoarelor antete HTTP:
    • Diferența dintre Expires, Date, Age și If-Modified
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Care sunt acțiunile HTTP? Listează toate acțiunile HTTP pe care le ști și
    explică-le.

####[⬆] Întrebări despre cod:

Întrebare: Care este valoarea lui foo?

var foo = 10 + '20';

Întrebare: Ce valoare returnează următorul cod?

console.log(0.1 + 0.2 == 0.3);

Întrebare: Cum ai face următoarea să funcționeze?

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

Întrebare: Ce valoare este returnată de expresia următoare?

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

Întrebare: Care este valoare lui window.foo?

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

Întrebare: Care este rezultatul celor două apelări ale funcției alert?

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

Întrebare: Care este valoarea lui foo.length?

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

Întrebare: Care este valoarea lui foo.x?

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

Întrebare: Ce output printează acest cod?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

####[⬆] Întrebări amuzante:

  • Povestește-mi despre un proiect mișto la care ai lucrat recent?
  • Ce îți place cel mai mult la uneltele de dezvoltare pe care le folosești?
  • Ai proiecte personale? Ce fel?
  • Care este funcționalitatea ta preferată din Internet Explorer?
  • Cum îți place cafeaua?

####[⬆] 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/_site/translations/russian/index.html b/_site/translations/russian/index.html index f629d41..00a1e1c 100644 --- a/_site/translations/russian/index.html +++ b/_site/translations/russian/index.html @@ -1 +1 @@ -Вопросы кандидату на должность front-end разработчика ★ Front-end Job Interview Questions

Вопросы кандидату на должность front-end разработчика

Вопросы кандидату на должность front-end разработчика

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Содержание

  1. Авторы
  2. Общие вопросы
  3. Вопросы по HTML
  4. Вопросы по CSS
  5. Вопросы по JavaScript
  6. Вопросы по тестированию
  7. Вопросы по производительности
  8. Вопросы по сетям
  9. Примеры кода на JavaScript
  10. “Светская беседа”

[⬆] Авторы

Этот проект был запущен в 2009 году в сотрудничестве с @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed и @iansym.

В настоящее время этот проект поддерживают:

С тех пор он был активным благодаря этим замечательным людям.

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

  • Что вы изучили вчера/на этой неделе?
  • Что вас привлекает в программировании?
  • С какой технической сложностью вы недавно столкнулись и как с ней справились?
  • Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?
  • Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
  • Можете ли вы объяснить общие принципы относительно front-end безопасности или недавние проблемы, которые вы решили?
  • Какие действия вы лично предприняли в недавних проектах для повышения удобства использования вашего кода?
  • Расскажите о предпочтительной среде разработки.
  • С какими системами контроля версий вы знакомы?
  • Можете ли вы описать порядок действий при создании новой веб-страницы?
  • Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?
  • Можете ли вы описать разницу между прогрессивным улучшением и изящной деградацией?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
  • Сколько ресурсов браузер может одновременно загружать с одного домена?
    • Какие есть исключения?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).
  • Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
  • Опишите, как бы вы реализовали примитивное слайд-шоу.
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам.
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
  • Объясните, что такое ARIA и скринридеры, а также как сделать вебсайт доступным.
  • Какие преимущества и недостатки у CSS и JavaScript анимаций?
  • Что означает CORS и какую проблему решает?

[⬆] Вопросы по HTML:

  • Для чего нужен doctype?
  • Как следует оформлять страницу, содержимое которой может быть на разных языках?
  • На что необходимо обратить внимание при разработке мультиязычных сайтов?
  • Для чего отлично подойдут data- атрибуты?
  • Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
  • Объясните разницу между cookie, sessionStorage и localStorage.
  • Объясните разницу между <script>, <script async> и <script defer>.
  • Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>? Знаете ли вы исключения?
  • Что такое прогрессивный рендеринг?
  • Для чего используется атрибут srcset в теге изображения? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.
  • Приходилось ли вам работать с языками HTML-шаблонизации?

[⬆] Вопросы по CSS:

  • Что такое специфичность CSS селекторов и как она работает?
  • В чем разница между “сбросом” и “нормализацией” CSS? Что бы вы выбрали и почему?
  • Объясните, что такое плавающие элементы (floats) и как они работают.
  • Объясните, что такое z-index и как формируется контекст наложения.
  • Объясните, что такое блочный контекст форматирования и как он работает.
  • Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?
  • Как вы решаете стилевые проблемы, связанные с особенностями браузеров?
  • Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями?
    • Какие приёмы/процессы вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?
  • Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
  • Приходилось ли Вам использовать или реализовывать медиа-запросы или вёрстку под мобильные устройства?
  • Вы знакомы со стилизацией SVG?
  • Можете ли вы привести пример свойства @media, отличного от screen?
  • На что нужно обратить внимание при написании эффективного CSS?
  • Какие преимущества/недостатки в использовании CSS препроцессоров?
    • Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.
  • Как вы реализуете макет, который использует нестандартные шрифты?
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
  • Объясните, что такое псевдоэлементы и для чего они нужны.
  • Объясните своими словами, что такое блочная модель.
  • Что делает * { box-sizing: border-box; }? В чем его преимущества?
  • Что означает свойство display и можете ли вы привести несколько примеров его использования?
  • В чем разница между строчным и блочно-строчным элементом?
  • В чем разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?
  • Какими CSS фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?
  • Пользовались ли вы Flexbox или Grid?
  • Можете ли вы объяснить разницу между responsive сайтом и mobile-first?
  • Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?
  • В каком случае вы предпочтёте использовать translate() вместо абсолютного позиционирования и наоборот? И почему?

[⬆] Вопросы по JavaScript:

  • Объясните делегирование событий.
  • Объясните, как this работает в JavaScript.
  • Расскажите, как работает прототипное наследование.
  • Что вы думаете о AMD против CommonJS?
  • Объясните, почему это не является IIFE: function foo(){ }();.
    • Что необходимо изменить, чтобы это стало IIFE?
  • В чём различие между переменными, значение которых: null, undefined и не объявлено?
    • Как бы вы проверили их на каждое из этих значений?
  • Что такое замыкание и как/для чего его используют?
  • Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?
  • В каких случаях обычно используются анонимные функции?
  • Как вы организуете свой код? (module pattern, classical inheritance)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?
  • В чем разница между .call и .apply?
  • Что делает и для чего нужна функция Function.prototype.bind?
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об Ajax как можно более подробно.
  • Какие преимущества и недостатки в использовании Ajax?
  • Объясните, как работает JSONP (и почему это не совсем AJAX).
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, то какие библиотеки вы использовали?
  • Расскажите, что такое “hoisting”.
  • Объясните event bubbling.
  • В чём разница между “атрибутом” (attribute) и “свойством” (property)?
  • Почему не следует расширять нативные 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";? Какие достоинства и недостатки от ее использования?
  • Напишите цикл, который перебирает числа до 100, возвращая “fizz” на числа кратные 3, “buzz” на числа кратные 5 и “fizzbuzz” на числа кратные 3 и 5
  • Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
  • Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
  • Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
  • Насколько вы опытны в работе с промисами (promises) и/или их полифиллами?
  • Какие преимущества и недостатки при использовании промисов вместо функций обратного вызова (callbacks)?
  • Каковы преимущества и недостатки написания JavaScript кода на языке, который компилируется в JavaScript?
  • Какие инструменты и методы вы используете при отладке кода?
  • Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
  • Объясните разницу между изменяемыми (mutable) и неизменяемыми (immutable) объектами.
    • Приведите пример неизменяемого объекта в JavaScript.
    • Какие преимущества и недостатки у неизменяемости?
    • Как вы можете достигнуть неизменяемости в вашем коде?
  • Объясните разницу между синхронными и асинхронными функциями.
  • Что такое цикл событий (event loop)?
    • В чем разница между стеком вызовов (call stack) и очередью событий (task queue)?
  • Объясните разницу при использовании foo в function foo() {} и var foo = function() {}
  • В чём различие между переменными, созданными при помощи let, var и const?
  • В чём разница между классом в ES6 и функцией-конструктором в ES5?
  • Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?
  • Дайте определение функции высшего порядка.
  • Можете ли вы привести пример деструктуризации объекта или массива?
  • Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
  • Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?
  • В чём преимущества использования spread оператора и чем он отличается от rest оператора?
  • Каким образом можно обмениваться кодом между файлами?
  • Для чего используются статические члены класса?

[⬆] Вопросы по тестированию:

  • Какие преимущества/недостатки в тестировании собственного кода?
  • Какие инструменты вы будете использовать для тестирования работоспособности своего кода?
  • В чём различие между юнит-тестами и функциональными/интеграционными тестами?
  • Для чего предназначены линтеры (code style linting tool)?

[⬆] Вопросы по производительности:

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

[⬆] Вопросы по сетям:

  • Почему лучше загружать ресурсы для сайта с нескольких доменов?
  • Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.
  • В чём различия между Long-Polling, Websockets и Server-Sent Events?
  • Опишите следующие заголовки HTTP-запросов и ответов:
    • Разницу между Expires, Date, Age и If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Что такое HTTP методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.

[⬆] Примеры кода на JavaScript

Вопрос: Чему равно foo?

var foo = 10 + '20';

Вопрос: Что выводит код ниже?

console.log(0.1 + 0.2 == 0.3);

Вопрос: Как сделать, чтобы это выражение работало?

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

Вопрос: Какое значение возвращает данное выражение?

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

Вопрос: Чему равно window.foo?

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

Вопрос: Что покажут эти два alert?

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

Вопрос: Чему равно foo.length?

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

Вопрос: Чему равно foo.x?

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

Вопрос: Что выводит код ниже?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Вопрос: В чем разница между этими четырьмя промисами (promises)?

doSomething().then(function () {
  return doSomethingElse();
});
doSomething().then(function () {
  doSomethingElse();
});
doSomething().then(doSomethingElse());
doSomething().then(doSomethingElse);

[⬆] “Светская беседа”:

  • Самое крутое, что вы когда-либо делали и чем гордитесь?
  • Что вы больше всего любите в ваших инструментах разработки?
  • Кто из фронтенд-сообщества вас вдохновляет?
  • У вас есть какие-нибудь личные проекты? Какого рода?
  • Какая ваша любимая “фишка” Internet Explorer?
  • Какой кофе вы предпочитаете?
Edit this page
\ No newline at end of file +Вопросы кандидату на должность front-end разработчика ★ Front-end Job Interview Questions

Вопросы кандидату на должность front-end разработчика

Вопросы кандидату на должность front-end разработчика

Замечание: Этот репозиторий содержит подборку вопросов, которые могут быть использованы на собеседованиях на должность front-end разработчика. Здесь предлагаются лишь идеи, не нужно задавать все вопросы сразу (иначе в один час точно не уложитесь).

Также имейте в виду, что многие вопросы не требуют однозначного короткого ответа, а лишь помогают завести беседу на ту или иную тему (предоставляя кандидату возможность показать себя во всей красе).

Содержание

  1. Авторы
  2. Общие вопросы
  3. Вопросы по HTML
  4. Вопросы по CSS
  5. Вопросы по JavaScript
  6. Вопросы по тестированию
  7. Вопросы по производительности
  8. Вопросы по сетям
  9. Примеры кода на JavaScript
  10. “Светская беседа”

[⬆] Авторы

Этот проект был запущен в 2009 году в сотрудничестве с @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed и @iansym.

В настоящее время этот проект поддерживают:

С тех пор он был активным благодаря этим замечательным людям.

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

  • Что вы изучили вчера/на этой неделе?
  • Что вас привлекает в программировании?
  • С какой технической сложностью вы недавно столкнулись и как с ней справились?
  • Какие методы для повышения производительности вы использовали при создании или обслуживании сайта?
  • Можете ли вы описать некоторые методы SEO, которые вы использовали в последнее время?
  • Можете ли вы объяснить общие принципы относительно front-end безопасности или недавние проблемы, которые вы решили?
  • Какие действия вы лично предприняли в недавних проектах для повышения удобства использования вашего кода?
  • Расскажите о предпочтительной среде разработки.
  • С какими системами контроля версий вы знакомы?
  • Можете ли вы описать порядок действий при создании новой веб-страницы?
  • Если у вас есть 5 разных файлов со стилями, какой лучший способ интегрировать их в сайт?
  • Можете ли вы описать разницу между прогрессивным улучшением и изящной деградацией?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
  • Сколько ресурсов браузер может одновременно загружать с одного домена?
    • Какие есть исключения?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального).
  • Если вы присоединились к проекту, где для форматирования используются табы, а вы привыкли использовать пробелы, как вы поступите?
  • Опишите, как бы вы реализовали примитивное слайд-шоу.
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам.
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?
  • Объясните, что такое ARIA и скринридеры, а также как сделать вебсайт доступным.
  • Какие преимущества и недостатки у CSS и JavaScript анимаций?
  • Что означает CORS и какую проблему решает?

[⬆] Вопросы по HTML:

  • Для чего нужен doctype?
  • Как следует оформлять страницу, содержимое которой может быть на разных языках?
  • На что необходимо обратить внимание при разработке мультиязычных сайтов?
  • Для чего отлично подойдут data- атрибуты?
  • Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
  • Объясните разницу между cookie, sessionStorage и localStorage.
  • Объясните разницу между <script>, <script async> и <script defer>.
  • Почему хорошей практикой считается располагать <link> для подключения CSS между <head></head>, а <script> для подключения JS ставить перед </body>? Знаете ли вы исключения?
  • Что такое прогрессивный рендеринг?
  • Для чего используется атрибут srcset в теге изображения? Опишите процесс, который использует браузер при оценке содержимого этого атрибута.
  • Приходилось ли вам работать с языками HTML-шаблонизации?

[⬆] Вопросы по CSS:

  • Что такое специфичность CSS селекторов и как она работает?
  • В чем разница между “сбросом” и “нормализацией” CSS? Что бы вы выбрали и почему?
  • Объясните, что такое плавающие элементы (floats) и как они работают.
  • Объясните, что такое z-index и как формируется контекст наложения.
  • Объясните, что такое блочный контекст форматирования и как он работает.
  • Какие вы знаете методы запрета обтекания (clearing) и в каких случаях они применяются?
  • Как вы решаете стилевые проблемы, связанные с особенностями браузеров?
  • Как вы обеспечиваете отображение страниц в браузерах с ограниченными возможностями?
    • Какие приёмы/процессы вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным только для скринридера)?
  • Использовали ли вы систему сеток, и если да, то какую вы предпочитаете?
  • Приходилось ли Вам использовать или реализовывать медиа-запросы или вёрстку под мобильные устройства?
  • Вы знакомы со стилизацией SVG?
  • Можете ли вы привести пример свойства @media, отличного от screen?
  • На что нужно обратить внимание при написании эффективного CSS?
  • Какие преимущества/недостатки в использовании CSS препроцессоров?
    • Опишите, что вам нравится и не нравится в CSS препроцессорах, которыми вы пользовались.
  • Как вы реализуете макет, который использует нестандартные шрифты?
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
  • Объясните, что такое псевдоэлементы и для чего они нужны.
  • Объясните своими словами, что такое блочная модель.
  • Что делает * { box-sizing: border-box; }? В чем его преимущества?
  • Что означает свойство display и можете ли вы привести несколько примеров его использования?
  • В чем разница между строчным и блочно-строчным элементом?
  • В чем разница между относительным, фиксированным, абсолютным и статически позиционированным элементом?
  • Какими CSS фреймворками вы пользовались? Что бы вы хотели в них изменить/улучшить?
  • Пользовались ли вы Flexbox или Grid?
  • Можете ли вы объяснить разницу между responsive сайтом и mobile-first?
  • Вы имеете опыт работы с ретиновой графикой? Если да, то какие методы вы использовали?
  • В каком случае вы предпочтёте использовать translate() вместо абсолютного позиционирования и наоборот? И почему?

[⬆] Вопросы по JavaScript:

  • Объясните делегирование событий.
  • Объясните, как this работает в JavaScript.
  • Расскажите, как работает прототипное наследование.
  • Что вы думаете о AMD против CommonJS?
  • Объясните, почему это не является IIFE: function foo(){ }();.
    • Что необходимо изменить, чтобы это стало IIFE?
  • В чём различие между переменными, значение которых: null, undefined и не объявлено?
    • Как бы вы проверили их на каждое из этих значений?
  • Что такое замыкание и как/для чего его используют?
  • Можете ли вы описать основное различие между циклом forEach и циклом .map()? И в каких случаях каждый из них используется?
  • В каких случаях обычно используются анонимные функции?
  • Как вы организуете свой код? (module pattern, classical inheritance)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между: function Person(){}, var person = Person(), и var person = new Person()?
  • В чем разница между .call и .apply?
  • Что делает и для чего нужна функция Function.prototype.bind?
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об Ajax как можно более подробно.
  • Какие преимущества и недостатки в использовании Ajax?
  • Объясните, как работает JSONP (и почему это не совсем AJAX).
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, то какие библиотеки вы использовали?
  • Расскажите, что такое “hoisting”.
  • Объясните event bubbling.
  • В чём разница между “атрибутом” (attribute) и “свойством” (property)?
  • Почему не следует расширять нативные 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";? Какие достоинства и недостатки от ее использования?
  • Напишите цикл, который перебирает числа до 100, возвращая “fizz” на числа кратные 3, “buzz” на числа кратные 5 и “fizzbuzz” на числа кратные 3 и 5
  • Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
  • Для чего используют событие load? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
  • Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
  • Насколько вы опытны в работе с промисами (promises) и/или их полифиллами?
  • Какие преимущества и недостатки при использовании промисов вместо функций обратного вызова (callbacks)?
  • Каковы преимущества и недостатки написания JavaScript кода на языке, который компилируется в JavaScript?
  • Какие инструменты и методы вы используете при отладке кода?
  • Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
  • Объясните разницу между изменяемыми (mutable) и неизменяемыми (immutable) объектами.
    • Приведите пример неизменяемого объекта в JavaScript.
    • Какие преимущества и недостатки у неизменяемости?
    • Как вы можете достигнуть неизменяемости в вашем коде?
  • Объясните разницу между синхронными и асинхронными функциями.
  • Что такое цикл событий (event loop)?
    • В чем разница между стеком вызовов (call stack) и очередью событий (task queue)?
  • Объясните разницу при использовании foo в function foo() {} и var foo = function() {}
  • В чём различие между переменными, созданными при помощи let, var и const?
  • В чём разница между классом в ES6 и функцией-конструктором в ES5?
  • Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?
  • Дайте определение функции высшего порядка.
  • Можете ли вы привести пример деструктуризации объекта или массива?
  • Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
  • Можете ли вы привести пример каррированной функции (curry function) и в чём их преимущество?
  • В чём преимущества использования spread оператора и чем он отличается от rest оператора?
  • Каким образом можно обмениваться кодом между файлами?
  • Для чего используются статические члены класса?

[⬆] Вопросы по тестированию:

  • Какие преимущества/недостатки в тестировании собственного кода?
  • Какие инструменты вы будете использовать для тестирования работоспособности своего кода?
  • В чём различие между юнит-тестами и функциональными/интеграционными тестами?
  • Для чего предназначены линтеры (code style linting tool)?

[⬆] Вопросы по производительности:

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

[⬆] Вопросы по сетям:

  • Почему лучше загружать ресурсы для сайта с нескольких доменов?
  • Опишите весь процесс, начиная с ввода адреса сайта в адресную строку до окончания его загрузки на экране.
  • В чём различия между Long-Polling, Websockets и Server-Sent Events?
  • Опишите следующие заголовки HTTP-запросов и ответов:
    • Разницу между Expires, Date, Age и If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Что такое HTTP методы? Перечислите все HTTP-методы, которые вы знаете, и объясните их.

[⬆] Примеры кода на JavaScript

Вопрос: Чему равно foo?

var foo = 10 + '20';

Вопрос: Что выводит код ниже?

console.log(0.1 + 0.2 == 0.3);

Вопрос: Как сделать, чтобы это выражение работало?

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

Вопрос: Какое значение возвращает данное выражение?

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

Вопрос: Чему равно window.foo?

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

Вопрос: Что покажут эти два alert?

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

Вопрос: Чему равно foo.length?

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

Вопрос: Чему равно foo.x?

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

Вопрос: Что выводит код ниже?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Вопрос: В чем разница между этими четырьмя промисами (promises)?

doSomething().then(function () {
  return doSomethingElse();
});
doSomething().then(function () {
  doSomethingElse();
});
doSomething().then(doSomethingElse());
doSomething().then(doSomethingElse);

[⬆] “Светская беседа”:

  • Самое крутое, что вы когда-либо делали и чем гордитесь?
  • Что вы больше всего любите в ваших инструментах разработки?
  • Кто из фронтенд-сообщества вас вдохновляет?
  • У вас есть какие-нибудь личные проекты? Какого рода?
  • Какая ваша любимая “фишка” Internet Explorer?
  • Какой кофе вы предпочитаете?
Edit this page
\ No newline at end of file diff --git a/_site/translations/serbian/index.html b/_site/translations/serbian/index.html index 1a4fe9b..de8b1fb 100644 --- a/_site/translations/serbian/index.html +++ b/_site/translations/serbian/index.html @@ -1 +1 @@ -Intervju za posao Front-end Developer-a ★ Front-end Job 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 +Intervju za posao Front-end Developer-a ★ Front-end Job 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 diff --git a/_site/translations/slovakian/index.html b/_site/translations/slovakian/index.html index 1b75eba..47bae35 100644 --- a/_site/translations/slovakian/index.html +++ b/_site/translations/slovakian/index.html @@ -1 +1 @@ -Otázky k pohovoru; front-end vývojár ★ Front-end Job Interview Questions

Otázky k pohovoru; front-end vývojár

Otázky k pohovoru: front-end vývojár

Tento repozitár obsahuje rad otázok, ktoré môžete položiť pri pohovore kandidátovi na pozíciu front-end vývojár a overiť si tak jeho znalosti v tomto odbore. Nie je zamýšľané položiť všetky tieto otázky (ich korektné zodpovedanie by trvalo hodiny), bohato postačí len určitú časť vyhovujúci vašim potrebám.

Za prečítanie stojí tiež Baseline For Front-End Developers (anglicky) od Rebecci Murphey.

Poznámka: Majte na pamäti, že tieto otázky majú viesť skôr k diskusii na danú tému a prezradiť tak niečo viac o schopnostiach daného vývojára, než aby boli zodpovedané jedným slovom alebo vetou.

Obsah

  1. Pôvodní prispievatelia
  2. Všeobecné 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
  9. Ďalšie zaujímave referencie

####[⬆] Pôvodní prispievatelia:

Väčšina otázok bola prevzatá z oksoclap pôvodne vytvoreného Paulom Irishom (@paul_irish) a následne doplnená týmito osobami:

####[⬆] Všeobecné otázky:

  • Čo ste sa naučili včera/minulý týždeň nové?
  • Čo vás vzrušuje alebo zaujíma na kódovaní?
  • Povedzte niečo o vašom obľúbenom vývojovom prostredí (operačný systém, editor, prehliadač, nástroje, …).
  • Opíšte ako postupujete pri vytváraní novej webovej stránky.
  • Dokážete vysvetliť rozdiel medzi pozvoľným degradováním (graceful degradation) a postupným vylepšovaním (progressive enhancement)?
      * Body navyše za opis detekcie pokročilej funkcionality
  • Vysvetlite pojem “sémantické HTML”.
  • Ako by ste optimalizovali zdroje (obrázky, JS, CSS, …) webovej stránky?
      * K dispozícii je celý rad optimalizácií napr.:
        * spájanie súborov
        * minifikácia súborov
        * CDN hosťovanie
        * caching, …
  • Prečo je lepšie posielať zdroje webovej stránky z viacerých domén?
      * Koľko súborov môže z danej domény sťahovať prehliadač naraz?
  • Vymenujte tri spôsoby ako znížiť dobu nahrávania webovej stránky (vnímanú alebo skutočnú dobu nahrávania).
  • Ak nastúpite do projektu, kde sa namiesto odsadzovania tabulátormi používajú medzery, čo urobíte?
      * Navrhnutie, že projekt by mohol využívať niečo ako EditorConfig (http://editorconfig.org)
      * Prispôsobenie sa konvencii (ale zostať konzistentný).
      * issue :retab ! command
  • Napíšte jednoduchú stránku so slideshow.
      * Body navyše pokiaľ nepoužíva JS.
  • Aké nástroje používate pre testovanie rýchlosti vášho kódu?
      * Profiler, JSPerf, Dromaeo
  • Ak by ste sa chcel/chcela tento rok naučiť jednu novú technológiu, ktorá by to bola?
  • Vysvetlite dôležitosť štandardov a štandardizačných orgánov.
  • Čo to je FOUC? Ako je možné sa vyhnúť FOUC?

####[⬆] HTML otázky:

  • Čo robí doctype?
  • Aký je rozdiel medzi štandardným a tkz. quirks módom?
  • Aké sú obmedzenia pri poskytovaní XHTML stránok?
      * Existuje nejaký problém pri poskytovaní stránok ako application/xhtml+xml?
  • Ako poskytujete stránku s viacjazyčným obsahom?
      * Na čo všetko si musíte dať pozor pri vytváraní viacjazyčnej stránky?
  • K čomu sú dobré atribúty data-?
  • Uvažujte o HTML5 ako o otvorenej platorme. Aké sú základné stavebné kamene HTML5?
  • Opíšte rozdiel medzi cookies, sessionStorage a localStorage.

####[⬆] CSS otázky:

  • Opíšte čo robí a na čo je dobrý “reset” CSS súbor.
  • Opíšte obtekanie (floats) a ako funguje.
  • Popíšte rôzne techniky pre zastavenie obtekanie (clear fixing) a povedzte, ktoré sa hodia v ktorom kontexte.
  • Vysvetlite, čo to sú CSS sprites a ako by ste ich implementovali.
  • Aká je vaša obľúbená technika pre nahrádzanie obrázkov a ktorú a kedy používate?
  • CSS property hacks, podmienené vkladanie .css súborov alebo niečo ďalšie?
  • Ako poskytujete stránky pre funkcionálne/vlastnosťami obmedzený prehliadač?
      * Akú techniku​/proces používate?
  • Aké sú spôsoby pre zneviditeľnie obsahu (a zachovanie jeho dostupnosti pre čítačky)?
  • Použili ste niekedy grid systém a ak áno, ktorý uprednostňujete?
  • Použili ste niekedy mediálne selektory (media query) alebo špecifický layout/CSS pre mobilné zariadenia?
  • Máte nejaké skúsenosti so štýlovaním SVG?
  • Ako optimalizujete stránky pre tlač?
  • Aké sú zásady pre písanie efektnivního CSS?
  • Aké sú výhody/nevýhody použítia CSS preprocesorov (SASS, Compass, Stylus, LESS)?
      * Popíšte, čo sa Vám na CSS preprocesoroch, ktoré ste použili, páči/nepáči.
  • Ako by ste implementovali návrh webovej stránky, ktorá používa neštandardné rezy písma?
      * Webfonts (služby typu: Google Webfonts, Typekit, …)
  • Vysvetlite ako prehliadač určuje, ktorý element zodpovedá CSS selektoru.
  • Vysvetlite vaše chápanie box modelu a ako poviete pomocou CSS prehliadaču, aby váš layout vykreslil v odlišnom box modele

####[⬆] JS otázky:

  • Vysvetlite delegáciu udalostí.
  • Vysvetlite ako funguje this v JavaScripte.
  • Vysvetlite ako funguje prototypová dedičnosť.
  • Ako testujete JavaScript?
  • AMD vs. CommonJS?
  • Čo je hashovacia tabuľka?
  • Vysvetlite prečo nasledujúce volanie nebude fungovať ako IIFE : function foo(){ }();.
      * Čo musíte zmeniť, aby volania zafungovalo ako IIFE?
  • Vysvetlite rozdiel medzi premennou, ktorá je null, undefined alebo undeclared?
      * Akým spôsobom by ste overili tieto jednotlivé stavy?
  • Čo to je “closure” a ako/prečo by sme ich mali používať?
  • Aké je typické využitie pre anonymné funkcie?
  • Vysvetlite “JavaScript module pattern” a kedy by ste ho mali použiť.
      * Body navyše za zmienku o čistých menných priestoroch.
      * Čo ak sú vaše moduly bez menného priestora?
  • Ako organizujete váš kód? (module pattern, klasická dedičnosť?)
  • Aký je rozdiel medzi natívnymi a hostiteľskými objektami?
  • Rozdiel medzi:
function Person(){}
var person = Person()
var person = new Person()
  • Aký je rozdiel medzi .call a .apply?
  • Aký je rozdiel medzi undefined a null?
  • Vysvetlite Function.prototype.bind.
  • Kedy optimalizujete váš kód?
  • Vysvetlite ako funguje dedičnosť v JavaScripte.
  • Kedy by ste použili document.write()?
      * Väčšina generovaných reklám stále používa tento prístup aj napriek tomu, že je to dlhodobo odsudzované.
  • Aký je rozdiel medzi detekciou vlastností, odvodenie vlastností a použitie UA reťazca?
  • Vysvetlite AJAX čo najpodrobnejšie to ide.
  • Vysvetlite ako funguje JSONP (a prečo to nie je naozajstný AJAX).
  • Použili ste niekedy JavaScriptové šablóny?
      * Ak áno, ktoré knižnice ste použili (mustache.js, Handlebars, …)?
  • Vysvetlite “hoisting”.
  • Vysvetlite prebublávanie udalostí.
  • Aký je rozdiel medzi atribútom (attribute) a vlastnosťou (property)?
  • Prečo nie je dobrý nápad rozširovať natívne JavaScriptové objekty?
  • Prečo je dobrý nápad rozširovať natívne JavaScriptové objekty?
  • Aký je rozdiel medzi udalosťami “document load” a “document ready”?
  • Aký je rozdiel medzi == a ===?
  • Vysvetlite akým spôsobom získate parameter z URL zadaného v okne prehliadača.
  • Vysvetlite JavaScriptové pravidlo rovnakého pôvodu (same-origin policy).
  • Opíšte prístupy dedenia v JavaScripte.
  • Nasledujúci kód upravte tak, aby fungoval:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Opíšte stratégia pre memorizáciu (odstránenie opakovaných výpočtov) v JavaScripte.
  • Prečo sa hovorí ternárny operátor, čo označuje slovo ternárny?
  • Čo je označované ako “arita” funkcie?
  • Čo znamená "use strict";? Aké sú výhody a nevýhody použitia?

####[⬆] jQuery otázky:

  • Vysvetlite reťazenie (chaining).
  • Vysvetlite odkladanie (deferreds).
  • Aké poznáte a viete implementovať optimalizácie špeciálne pre jQuery?
  • Čo robí .end()?
  • Ako a prečo by ste váš “event handler” zaopatrili menným priestorom?
  • Vymenujte štyri rôzne typy hodnôt, ktoré môžete odovzdať ako vstupný parameter metód v jQuery.
      * selektor (reťazec), HTML (reťazec), callback (funkcia), HTMLElement, object, polia, polia elementu, jQuery Object, …
  • Čo to je fronta efektov (alebo fx front)?
  • Aký je rozdiel medzi .get(), [] a .eq()?
  • Aký je rozdiel medzi .bind(), .live() a .delegate()?
  • Aký je rozdiel medzi $ a $.fn? Alebo len, čo je $.fn?
  • Zoptimalizujte tento selektor :
$(".foo div#bar:eq(0)");
  • Aký je rozdiel medzi .delegate() a .live()?

####[⬆] Otázky z kódu:

modulo(12, 5) // 2

Otázka: Implementujte funkciu modulo tak, aby splnila zadanie.

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

Otázka: Akú hodnotu vráti uvedený výraz?

Odpoveď:" goh angasal a m’i"

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

Otázka: Akú hodnotu má window.foo?

Odpoveď: “bar” (iba ak window.foo bolo false, inak vráti svojou hodnotu)

var foo = "Hello";
(function() {
    var bar = "World";
    alert(foo + bar);
})();
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:

  • Aká je najúžasnejšia vec, ktorú ste kedy nakódovali, alebo na ktorú ste najviac pyšní?
  • Aké sú vaše obľúbené časti vývojárskych nástrojov, ktoré používate?
  • Máte nejaký vlastný hobby projekt?
  • Aká je Vaša obľúbená vlastnosť Internet Exploreru?

####[⬆] Ďalšie zaujímave referencie:

Edit this page
\ No newline at end of file +Otázky k pohovoru; front-end vývojár ★ Front-end Job Interview Questions

Otázky k pohovoru; front-end vývojár

Otázky k pohovoru: front-end vývojár

Tento repozitár obsahuje rad otázok, ktoré môžete položiť pri pohovore kandidátovi na pozíciu front-end vývojár a overiť si tak jeho znalosti v tomto odbore. Nie je zamýšľané položiť všetky tieto otázky (ich korektné zodpovedanie by trvalo hodiny), bohato postačí len určitú časť vyhovujúci vašim potrebám.

Za prečítanie stojí tiež Baseline For Front-End Developers (anglicky) od Rebecci Murphey.

Poznámka: Majte na pamäti, že tieto otázky majú viesť skôr k diskusii na danú tému a prezradiť tak niečo viac o schopnostiach daného vývojára, než aby boli zodpovedané jedným slovom alebo vetou.

Obsah

  1. Pôvodní prispievatelia
  2. Všeobecné 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
  9. Ďalšie zaujímave referencie

####[⬆] Pôvodní prispievatelia:

Väčšina otázok bola prevzatá z oksoclap pôvodne vytvoreného Paulom Irishom (@paul_irish) a následne doplnená týmito osobami:

####[⬆] Všeobecné otázky:

  • Čo ste sa naučili včera/minulý týždeň nové?
  • Čo vás vzrušuje alebo zaujíma na kódovaní?
  • Povedzte niečo o vašom obľúbenom vývojovom prostredí (operačný systém, editor, prehliadač, nástroje, …).
  • Opíšte ako postupujete pri vytváraní novej webovej stránky.
  • Dokážete vysvetliť rozdiel medzi pozvoľným degradováním (graceful degradation) a postupným vylepšovaním (progressive enhancement)?
      * Body navyše za opis detekcie pokročilej funkcionality
  • Vysvetlite pojem “sémantické HTML”.
  • Ako by ste optimalizovali zdroje (obrázky, JS, CSS, …) webovej stránky?
      * K dispozícii je celý rad optimalizácií napr.:
        * spájanie súborov
        * minifikácia súborov
        * CDN hosťovanie
        * caching, …
  • Prečo je lepšie posielať zdroje webovej stránky z viacerých domén?
      * Koľko súborov môže z danej domény sťahovať prehliadač naraz?
  • Vymenujte tri spôsoby ako znížiť dobu nahrávania webovej stránky (vnímanú alebo skutočnú dobu nahrávania).
  • Ak nastúpite do projektu, kde sa namiesto odsadzovania tabulátormi používajú medzery, čo urobíte?
      * Navrhnutie, že projekt by mohol využívať niečo ako EditorConfig (http://editorconfig.org)
      * Prispôsobenie sa konvencii (ale zostať konzistentný).
      * issue :retab ! command
  • Napíšte jednoduchú stránku so slideshow.
      * Body navyše pokiaľ nepoužíva JS.
  • Aké nástroje používate pre testovanie rýchlosti vášho kódu?
      * Profiler, JSPerf, Dromaeo
  • Ak by ste sa chcel/chcela tento rok naučiť jednu novú technológiu, ktorá by to bola?
  • Vysvetlite dôležitosť štandardov a štandardizačných orgánov.
  • Čo to je FOUC? Ako je možné sa vyhnúť FOUC?

####[⬆] HTML otázky:

  • Čo robí doctype?
  • Aký je rozdiel medzi štandardným a tkz. quirks módom?
  • Aké sú obmedzenia pri poskytovaní XHTML stránok?
      * Existuje nejaký problém pri poskytovaní stránok ako application/xhtml+xml?
  • Ako poskytujete stránku s viacjazyčným obsahom?
      * Na čo všetko si musíte dať pozor pri vytváraní viacjazyčnej stránky?
  • K čomu sú dobré atribúty data-?
  • Uvažujte o HTML5 ako o otvorenej platorme. Aké sú základné stavebné kamene HTML5?
  • Opíšte rozdiel medzi cookies, sessionStorage a localStorage.

####[⬆] CSS otázky:

  • Opíšte čo robí a na čo je dobrý “reset” CSS súbor.
  • Opíšte obtekanie (floats) a ako funguje.
  • Popíšte rôzne techniky pre zastavenie obtekanie (clear fixing) a povedzte, ktoré sa hodia v ktorom kontexte.
  • Vysvetlite, čo to sú CSS sprites a ako by ste ich implementovali.
  • Aká je vaša obľúbená technika pre nahrádzanie obrázkov a ktorú a kedy používate?
  • CSS property hacks, podmienené vkladanie .css súborov alebo niečo ďalšie?
  • Ako poskytujete stránky pre funkcionálne/vlastnosťami obmedzený prehliadač?
      * Akú techniku​/proces používate?
  • Aké sú spôsoby pre zneviditeľnie obsahu (a zachovanie jeho dostupnosti pre čítačky)?
  • Použili ste niekedy grid systém a ak áno, ktorý uprednostňujete?
  • Použili ste niekedy mediálne selektory (media query) alebo špecifický layout/CSS pre mobilné zariadenia?
  • Máte nejaké skúsenosti so štýlovaním SVG?
  • Ako optimalizujete stránky pre tlač?
  • Aké sú zásady pre písanie efektnivního CSS?
  • Aké sú výhody/nevýhody použítia CSS preprocesorov (SASS, Compass, Stylus, LESS)?
      * Popíšte, čo sa Vám na CSS preprocesoroch, ktoré ste použili, páči/nepáči.
  • Ako by ste implementovali návrh webovej stránky, ktorá používa neštandardné rezy písma?
      * Webfonts (služby typu: Google Webfonts, Typekit, …)
  • Vysvetlite ako prehliadač určuje, ktorý element zodpovedá CSS selektoru.
  • Vysvetlite vaše chápanie box modelu a ako poviete pomocou CSS prehliadaču, aby váš layout vykreslil v odlišnom box modele

####[⬆] JS otázky:

  • Vysvetlite delegáciu udalostí.
  • Vysvetlite ako funguje this v JavaScripte.
  • Vysvetlite ako funguje prototypová dedičnosť.
  • Ako testujete JavaScript?
  • AMD vs. CommonJS?
  • Čo je hashovacia tabuľka?
  • Vysvetlite prečo nasledujúce volanie nebude fungovať ako IIFE : function foo(){ }();.
      * Čo musíte zmeniť, aby volania zafungovalo ako IIFE?
  • Vysvetlite rozdiel medzi premennou, ktorá je null, undefined alebo undeclared?
      * Akým spôsobom by ste overili tieto jednotlivé stavy?
  • Čo to je “closure” a ako/prečo by sme ich mali používať?
  • Aké je typické využitie pre anonymné funkcie?
  • Vysvetlite “JavaScript module pattern” a kedy by ste ho mali použiť.
      * Body navyše za zmienku o čistých menných priestoroch.
      * Čo ak sú vaše moduly bez menného priestora?
  • Ako organizujete váš kód? (module pattern, klasická dedičnosť?)
  • Aký je rozdiel medzi natívnymi a hostiteľskými objektami?
  • Rozdiel medzi:
function Person(){}
var person = Person()
var person = new Person()
  • Aký je rozdiel medzi .call a .apply?
  • Aký je rozdiel medzi undefined a null?
  • Vysvetlite Function.prototype.bind.
  • Kedy optimalizujete váš kód?
  • Vysvetlite ako funguje dedičnosť v JavaScripte.
  • Kedy by ste použili document.write()?
      * Väčšina generovaných reklám stále používa tento prístup aj napriek tomu, že je to dlhodobo odsudzované.
  • Aký je rozdiel medzi detekciou vlastností, odvodenie vlastností a použitie UA reťazca?
  • Vysvetlite AJAX čo najpodrobnejšie to ide.
  • Vysvetlite ako funguje JSONP (a prečo to nie je naozajstný AJAX).
  • Použili ste niekedy JavaScriptové šablóny?
      * Ak áno, ktoré knižnice ste použili (mustache.js, Handlebars, …)?
  • Vysvetlite “hoisting”.
  • Vysvetlite prebublávanie udalostí.
  • Aký je rozdiel medzi atribútom (attribute) a vlastnosťou (property)?
  • Prečo nie je dobrý nápad rozširovať natívne JavaScriptové objekty?
  • Prečo je dobrý nápad rozširovať natívne JavaScriptové objekty?
  • Aký je rozdiel medzi udalosťami “document load” a “document ready”?
  • Aký je rozdiel medzi == a ===?
  • Vysvetlite akým spôsobom získate parameter z URL zadaného v okne prehliadača.
  • Vysvetlite JavaScriptové pravidlo rovnakého pôvodu (same-origin policy).
  • Opíšte prístupy dedenia v JavaScripte.
  • Nasledujúci kód upravte tak, aby fungoval:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Opíšte stratégia pre memorizáciu (odstránenie opakovaných výpočtov) v JavaScripte.
  • Prečo sa hovorí ternárny operátor, čo označuje slovo ternárny?
  • Čo je označované ako “arita” funkcie?
  • Čo znamená "use strict";? Aké sú výhody a nevýhody použitia?

####[⬆] jQuery otázky:

  • Vysvetlite reťazenie (chaining).
  • Vysvetlite odkladanie (deferreds).
  • Aké poznáte a viete implementovať optimalizácie špeciálne pre jQuery?
  • Čo robí .end()?
  • Ako a prečo by ste váš “event handler” zaopatrili menným priestorom?
  • Vymenujte štyri rôzne typy hodnôt, ktoré môžete odovzdať ako vstupný parameter metód v jQuery.
      * selektor (reťazec), HTML (reťazec), callback (funkcia), HTMLElement, object, polia, polia elementu, jQuery Object, …
  • Čo to je fronta efektov (alebo fx front)?
  • Aký je rozdiel medzi .get(), [] a .eq()?
  • Aký je rozdiel medzi .bind(), .live() a .delegate()?
  • Aký je rozdiel medzi $ a $.fn? Alebo len, čo je $.fn?
  • Zoptimalizujte tento selektor :
$(".foo div#bar:eq(0)");
  • Aký je rozdiel medzi .delegate() a .live()?

####[⬆] Otázky z kódu:

modulo(12, 5) // 2

Otázka: Implementujte funkciu modulo tak, aby splnila zadanie.

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

Otázka: Akú hodnotu vráti uvedený výraz?

Odpoveď:" goh angasal a m’i"

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

Otázka: Akú hodnotu má window.foo?

Odpoveď: “bar” (iba ak window.foo bolo false, inak vráti svojou hodnotu)

var foo = "Hello";
(function() {
    var bar = "World";
    alert(foo + bar);
})();
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:

  • Aká je najúžasnejšia vec, ktorú ste kedy nakódovali, alebo na ktorú ste najviac pyšní?
  • Aké sú vaše obľúbené časti vývojárskych nástrojov, ktoré používate?
  • Máte nejaký vlastný hobby projekt?
  • Aká je Vaša obľúbená vlastnosť Internet Exploreru?

####[⬆] Ďalšie zaujímave referencie:

Edit this page
\ No newline at end of file diff --git a/_site/translations/slovenian/index.html b/_site/translations/slovenian/index.html index 90d043e..6bc6b14 100644 --- a/_site/translations/slovenian/index.html +++ b/_site/translations/slovenian/index.html @@ -1 +1 @@ -Intervju vprašanja za front-end programerja ★ Front-end Job Interview Questions

Intervju vprašanja za front-end programerja

Intervju vprašanja za front-end programerja

@verzija 1.0

Obvestilo: Ta repositorij vsebuje vrsto front-end vprašanj, ki se lahko uporabijo za preverjanje potencialnih kandidatov. Ni priporočljivo, da se vsa vprašanja uporabijo za vsakega kandidata (to bi trajalo ure). Izberite nekaj vprašanj, ki vam bodo pomagala preveriti kandidata za znanja, ki jih potrebujete.

Mnogo teh vprašanj je odprtega tipa in lahko pripeljejo do zanimivih diskusij, ki vam bodo o kandidatih sporočili več, kot pa navaden kratek odgovor.

####Originalni Avtorji

Obvestilo: večino teh vprašanj je bilo pobranih iz foruma, ustvarjenega in vzdrževanega od nasljednjih ljudi:

Splošna vprašanja:

  • Ali uporabljaš Twitter?
    • Če ja, katerim osebam slediš?
  • Ali uporabljaš GitHub?
    • Če ja, katerim repositorijem slediš?
  • Katere bloge spremljaš?
  • Katere programe za hranjenje verzij si uporabljal/a (Git, SVN, …)?
  • Katero okolje najraje uporabljaš za razvoj? (OS, editor, brskalnik, orodja, …)
  • Lahko opišeš tvoj potek dela, ko kreiraš novo spletno stran?
  • Lahko opišeš razliko med “progressive enhancement” in “graceful degradation”?
    • bonus točke za opis “feature detection”-a
  • Razloži pojem “Semantic HTML”.
  • V katerem brskalniku primarno razvijaš in katera orodja uporabljaš?
  • Kako bi optimiziral/a nalaganje spletne strani (s stališča zahtevanih datotek)?
    • Iščemo več rešitev, ki med drugimi vklučujejo tudi:
      • Združevanje datotek
      • Minifikacija datotek
      • CDN gostovanje
      • Caching
      • …
  • Zakaj je bolje statične vsebine servirati z večih domen?
    • Koliko različnih datotek bo brskalnik prenesel iz ene domene na enkrat?
  • Naštej 3 načine za zmanjšanje “page load time”-a. (dejanski ali zaznavan “load time”).
  • Če bi se pridružil/a projektu, kjer uporabljajo “tab”-e, ti pa uporabljaš presledke, kaj bi storil/a?
  • Ustvari preprosto prezentacijsko stran (slide-show).
    • Bonus točke, če ne uporablja JS.
  • Katera orodja uporabljaš za testiranje performančnosti kode?
  • Če bi to leto lahko popolnoma osvojil/a novo tehnologijo, katera bi to bila?
  • Razloži pomembnost standardov in organov za nadzorovanje standardov.
  • Kaj je FOUC? Kako se izogneš FOUC-u?

HTML vprašanja:

  • Kaj naredi doctype in koliko različtih lahko našteješ?
  • Kaj je razlika med “standards mode” in “quirks mode”?
  • Kaj so omejitve pri serviranju XHTML strani?
    • Ali so kakšni problemi pri servviranju strani z application/xhtml+xml?
  • Kako serviraš stran z vsebino v večih jezikih?
    • Na katere stvari moraš paziti ko dizajniraš ali programiraš večjezično stran?
  • Ali lahko uporabljaš XHTML sintakso v HTML5?
  • Kako uporabljaš XML v HTML5?
  • Zakaj lahko uporabimo data- atribute?
  • Kaj so “content models” v HTML4 in ali so različni v HTML5?
  • Predpostavi da je HTML5 odprta spletna platforma. Kaj so gradniki HTML5?
  • Opiši razliko med “cookies”, “sessionStorage” in “localStorage”.

JavaScript vprašanja:

  • Katere JavaScript knjižnice si že uporabljal/a?
  • Si kdaj gledal/a izvorno kodo knjižnic/ogrodij, ki si jih uporabljal/a?
  • Razlika med Java in JavaScript?
  • Kaj je “hashtable”?
  • Kaj sta undefined in undeclared spremenljivki?
  • Kaj je “closure”, in zakaj/kako bi jo uporabil/a?
  • Tipičen primer uporabe anonimnih funkcij?
  • Razloži “JavaScript module pattern” in kdaj bi ga uporabil/a.
    • Bonus točke če omeni “clean namespacing”.
  • Kako organiziraš svojo kodo? (module pattern, classical inheritance?)
  • Razlika med “host object” in “native object”?
  • Razlika med:
function Person(){} var person = Person() var person = new Person()
  • Razlika med .call in .apply?
  • Razloži Function.prototype.bind?
  • Kdaj optimiziraš kodo?
  • Ali lahko razložiš dedovanje v JavaScript-u?
  • Kdaj bi uporabil/a document.write()?
  • Razlika med zaznavanjem funkcionalnosti, sklepanjem o funkcionalnosti in uporabljanjem UA niza.
  • Razloži AJAX s čim več detajli.
  • Razloži kako deluje JSONP (in zakaj to ni res AJAX).
  • Si že kdaj uporabil/a JavaScript “templates”-e?
    • Če ja, katere knjižnice si uporabil/a? (Mustache.js, Handlebars etc.)
  • Razloži “hoisting”.
  • Opiši “event bubbling”.
  • Razlika med “attribute” in “property”?
  • Zakaj je razširjanje vgrajenih JS objektov slaba ideja?
  • Zakaj je razširjanje vgrajenih JS objektov dobra ideja?
  • Razlika med “document load” in “document ready”?
  • Razlika med == in ===?
  • Kako bi dobil URL GET parameter?
  • Razloži “same-origin policy”.
  • Razloži “event delegation”.
  • Razloži različne načine doseganja dedovanja.
  • Napiši kodo za “duplicator()” funkcijo:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Opiši strategijo za pomnenje (izogibanje ponovnemu računanju).
  • Od kod ime “Ternary statement”, kaj označuje beseda “Ternary”?
  • Kaj je “arity” funkcije?
  • Kaj je "use strict";? Prednosti/slabosti?

JavaScript koda primeri:

~~3.14

Vprašanje: Kaj je vrednost zgornjega stavka?
Odgovor: 3

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

Vprašanje: Kaj je vrednost zgornjega stavka?
Odgovor: "goh angasal a m’i"

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

Vprašanje: Kaj je vrednost window.foo?
Odgovor: "bar"
samo če je bil window.foo “lažen”, drugače bo ohranil svojo vrednost.

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

Vprašanje: Kaj je rezultat zgornjih dveh alert-ov?
Odgovor: “Hello World” & ReferenceError: bar is not defined

var foo = [];
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:

  • Razloži “chaining”.
  • Razloži “deferreds”.
  • Naštej nekaj, za jQuery specifičnih, optimizacij.
  • Kaj naredi .end()?
  • Kako, in zakaj, bi uporabil/a “namespace”-e za “event handler”-je?
  • Naštej 4 različne vrednosti, ki jih lahko podaš jQuery funkciji.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object, …
  • Kaj je “effects” vrsta (oz. fx)?
  • Razlika med .get(), [], in .eq()?
  • Razlika med .bind(), .live(), in .delegate()?
  • Razlika med $ in $.fn? Oz. kaj je $.fn?
  • Optimiziraj naslednji selektor:
$(".foo div#bar:eq(0)")
  • Razlika med ‘delegate()’ in ‘live()’?

CSS vprašanja:

  • Opiši namen CSS “reset” datoteke in zakaj je uporabna.
  • Opiši “float”-e in kako delujejo.
  • Opiši različne “clearing” tehnike.
  • Razloži CSS “sprite”-e in kako bi jih implementiral/a.
  • Tvoje najljubše tehnike za zamenjavo slik?
  • CSS hacki, pogojno vključene .css datoteke ali kaj drugega?
  • Kako serviraš strani brskalnikom ki imajo omejen nabor funkcionalnosti?
    • Katere tehnike/procese uporabljaš?
  • Na katere načine lahko vizualno skriješ vsebino (tako da je navoljo samo “screen reader”-jem)?
  • Si že kdaj uporabil/a “grid” sistem. Če ja, kateri ti je najljubši?
  • Si že implementiral/a “media queries” ali za mobilnike specifičen HTML/CSS?
  • Imaš kaj izkušenj s CSSjem v navezi s SVGjem?
  • Kako optimizeraš strani za tiskanje?
  • Naštej nekaj pasti pri pisanju efektivnega CSSja.
  • Ali uporabljaš CSS pred-procesor (sass, compass, Stylus, LESS)?
    • Če ja, opiši kaj ti je/ni všeč.
  • Kako bi implementiral/a spletno stran, ki uporablja nestandardno tipografijo?
    • Webfonts (google webfonts, typekit, …)
  • Razloži kako brskalnik ugotovi kateri element pripada kateremu CSS selektorju.

Opcijska zabavna vprašanja:

  • Kaj je najbolj “cool” stvar, ki si jo sprogramiral/a? Na kaj si najbolj ponosen/a?
  • Poznaš znak (logo) za HTML5?
  • Ali si trenutno, oz. si kdaj bil/a, na ladji?
  • Najljubše stvari tvojih razvojnih orodij?
  • Imaš kak zasebni projekt? Kakšen?
  • Razloži pomembnost “cornify”.
  • Na list papirja napiši vertikalno črke A B C D E . Sedaj pa jih postavi v spuščajoči vrstni red, brez da napišeš vrstico kode.
    • Počakaj če bo obrnil/a list papirja na glavo
  • Pirat ali Ninja?
    • Bonus točke če je kombiniran/a in je dal/a dober razlog (+2 za zombi opica pirat ninja)
  • Če nebi bil/a web-developer, kaj bi počel/a?
  • Najljubša lastnost Internet Explorerja?
  • Dokončaj naslednji stavek: Brendan Eich in Doug Crockford sta __________ javascript-a.
  • jQuery: dobra ali najboljša knjižnica? Debata.
  • http://www.w3schools.com/ ali http://w3fools.com/
Edit this page
\ No newline at end of file +Intervju vprašanja za front-end programerja ★ Front-end Job Interview Questions

Intervju vprašanja za front-end programerja

Intervju vprašanja za front-end programerja

@verzija 1.0

Obvestilo: Ta repositorij vsebuje vrsto front-end vprašanj, ki se lahko uporabijo za preverjanje potencialnih kandidatov. Ni priporočljivo, da se vsa vprašanja uporabijo za vsakega kandidata (to bi trajalo ure). Izberite nekaj vprašanj, ki vam bodo pomagala preveriti kandidata za znanja, ki jih potrebujete.

Mnogo teh vprašanj je odprtega tipa in lahko pripeljejo do zanimivih diskusij, ki vam bodo o kandidatih sporočili več, kot pa navaden kratek odgovor.

####Originalni Avtorji

Obvestilo: večino teh vprašanj je bilo pobranih iz foruma, ustvarjenega in vzdrževanega od nasljednjih ljudi:

Splošna vprašanja:

  • Ali uporabljaš Twitter?
    • Če ja, katerim osebam slediš?
  • Ali uporabljaš GitHub?
    • Če ja, katerim repositorijem slediš?
  • Katere bloge spremljaš?
  • Katere programe za hranjenje verzij si uporabljal/a (Git, SVN, …)?
  • Katero okolje najraje uporabljaš za razvoj? (OS, editor, brskalnik, orodja, …)
  • Lahko opišeš tvoj potek dela, ko kreiraš novo spletno stran?
  • Lahko opišeš razliko med “progressive enhancement” in “graceful degradation”?
    • bonus točke za opis “feature detection”-a
  • Razloži pojem “Semantic HTML”.
  • V katerem brskalniku primarno razvijaš in katera orodja uporabljaš?
  • Kako bi optimiziral/a nalaganje spletne strani (s stališča zahtevanih datotek)?
    • Iščemo več rešitev, ki med drugimi vklučujejo tudi:
      • Združevanje datotek
      • Minifikacija datotek
      • CDN gostovanje
      • Caching
      • …
  • Zakaj je bolje statične vsebine servirati z večih domen?
    • Koliko različnih datotek bo brskalnik prenesel iz ene domene na enkrat?
  • Naštej 3 načine za zmanjšanje “page load time”-a. (dejanski ali zaznavan “load time”).
  • Če bi se pridružil/a projektu, kjer uporabljajo “tab”-e, ti pa uporabljaš presledke, kaj bi storil/a?
  • Ustvari preprosto prezentacijsko stran (slide-show).
    • Bonus točke, če ne uporablja JS.
  • Katera orodja uporabljaš za testiranje performančnosti kode?
  • Če bi to leto lahko popolnoma osvojil/a novo tehnologijo, katera bi to bila?
  • Razloži pomembnost standardov in organov za nadzorovanje standardov.
  • Kaj je FOUC? Kako se izogneš FOUC-u?

HTML vprašanja:

  • Kaj naredi doctype in koliko različtih lahko našteješ?
  • Kaj je razlika med “standards mode” in “quirks mode”?
  • Kaj so omejitve pri serviranju XHTML strani?
    • Ali so kakšni problemi pri servviranju strani z application/xhtml+xml?
  • Kako serviraš stran z vsebino v večih jezikih?
    • Na katere stvari moraš paziti ko dizajniraš ali programiraš večjezično stran?
  • Ali lahko uporabljaš XHTML sintakso v HTML5?
  • Kako uporabljaš XML v HTML5?
  • Zakaj lahko uporabimo data- atribute?
  • Kaj so “content models” v HTML4 in ali so različni v HTML5?
  • Predpostavi da je HTML5 odprta spletna platforma. Kaj so gradniki HTML5?
  • Opiši razliko med “cookies”, “sessionStorage” in “localStorage”.

JavaScript vprašanja:

  • Katere JavaScript knjižnice si že uporabljal/a?
  • Si kdaj gledal/a izvorno kodo knjižnic/ogrodij, ki si jih uporabljal/a?
  • Razlika med Java in JavaScript?
  • Kaj je “hashtable”?
  • Kaj sta undefined in undeclared spremenljivki?
  • Kaj je “closure”, in zakaj/kako bi jo uporabil/a?
  • Tipičen primer uporabe anonimnih funkcij?
  • Razloži “JavaScript module pattern” in kdaj bi ga uporabil/a.
    • Bonus točke če omeni “clean namespacing”.
  • Kako organiziraš svojo kodo? (module pattern, classical inheritance?)
  • Razlika med “host object” in “native object”?
  • Razlika med:
function Person(){} var person = Person() var person = new Person()
  • Razlika med .call in .apply?
  • Razloži Function.prototype.bind?
  • Kdaj optimiziraš kodo?
  • Ali lahko razložiš dedovanje v JavaScript-u?
  • Kdaj bi uporabil/a document.write()?
  • Razlika med zaznavanjem funkcionalnosti, sklepanjem o funkcionalnosti in uporabljanjem UA niza.
  • Razloži AJAX s čim več detajli.
  • Razloži kako deluje JSONP (in zakaj to ni res AJAX).
  • Si že kdaj uporabil/a JavaScript “templates”-e?
    • Če ja, katere knjižnice si uporabil/a? (Mustache.js, Handlebars etc.)
  • Razloži “hoisting”.
  • Opiši “event bubbling”.
  • Razlika med “attribute” in “property”?
  • Zakaj je razširjanje vgrajenih JS objektov slaba ideja?
  • Zakaj je razširjanje vgrajenih JS objektov dobra ideja?
  • Razlika med “document load” in “document ready”?
  • Razlika med == in ===?
  • Kako bi dobil URL GET parameter?
  • Razloži “same-origin policy”.
  • Razloži “event delegation”.
  • Razloži različne načine doseganja dedovanja.
  • Napiši kodo za “duplicator()” funkcijo:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Opiši strategijo za pomnenje (izogibanje ponovnemu računanju).
  • Od kod ime “Ternary statement”, kaj označuje beseda “Ternary”?
  • Kaj je “arity” funkcije?
  • Kaj je "use strict";? Prednosti/slabosti?

JavaScript koda primeri:

~~3.14

Vprašanje: Kaj je vrednost zgornjega stavka?
Odgovor: 3

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

Vprašanje: Kaj je vrednost zgornjega stavka?
Odgovor: "goh angasal a m’i"

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

Vprašanje: Kaj je vrednost window.foo?
Odgovor: "bar"
samo če je bil window.foo “lažen”, drugače bo ohranil svojo vrednost.

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

Vprašanje: Kaj je rezultat zgornjih dveh alert-ov?
Odgovor: “Hello World” & ReferenceError: bar is not defined

var foo = [];
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:

  • Razloži “chaining”.
  • Razloži “deferreds”.
  • Naštej nekaj, za jQuery specifičnih, optimizacij.
  • Kaj naredi .end()?
  • Kako, in zakaj, bi uporabil/a “namespace”-e za “event handler”-je?
  • Naštej 4 različne vrednosti, ki jih lahko podaš jQuery funkciji.
    • Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object, …
  • Kaj je “effects” vrsta (oz. fx)?
  • Razlika med .get(), [], in .eq()?
  • Razlika med .bind(), .live(), in .delegate()?
  • Razlika med $ in $.fn? Oz. kaj je $.fn?
  • Optimiziraj naslednji selektor:
$(".foo div#bar:eq(0)")
  • Razlika med ‘delegate()’ in ‘live()’?

CSS vprašanja:

  • Opiši namen CSS “reset” datoteke in zakaj je uporabna.
  • Opiši “float”-e in kako delujejo.
  • Opiši različne “clearing” tehnike.
  • Razloži CSS “sprite”-e in kako bi jih implementiral/a.
  • Tvoje najljubše tehnike za zamenjavo slik?
  • CSS hacki, pogojno vključene .css datoteke ali kaj drugega?
  • Kako serviraš strani brskalnikom ki imajo omejen nabor funkcionalnosti?
    • Katere tehnike/procese uporabljaš?
  • Na katere načine lahko vizualno skriješ vsebino (tako da je navoljo samo “screen reader”-jem)?
  • Si že kdaj uporabil/a “grid” sistem. Če ja, kateri ti je najljubši?
  • Si že implementiral/a “media queries” ali za mobilnike specifičen HTML/CSS?
  • Imaš kaj izkušenj s CSSjem v navezi s SVGjem?
  • Kako optimizeraš strani za tiskanje?
  • Naštej nekaj pasti pri pisanju efektivnega CSSja.
  • Ali uporabljaš CSS pred-procesor (sass, compass, Stylus, LESS)?
    • Če ja, opiši kaj ti je/ni všeč.
  • Kako bi implementiral/a spletno stran, ki uporablja nestandardno tipografijo?
    • Webfonts (google webfonts, typekit, …)
  • Razloži kako brskalnik ugotovi kateri element pripada kateremu CSS selektorju.

Opcijska zabavna vprašanja:

  • Kaj je najbolj “cool” stvar, ki si jo sprogramiral/a? Na kaj si najbolj ponosen/a?
  • Poznaš znak (logo) za HTML5?
  • Ali si trenutno, oz. si kdaj bil/a, na ladji?
  • Najljubše stvari tvojih razvojnih orodij?
  • Imaš kak zasebni projekt? Kakšen?
  • Razloži pomembnost “cornify”.
  • Na list papirja napiši vertikalno črke A B C D E . Sedaj pa jih postavi v spuščajoči vrstni red, brez da napišeš vrstico kode.
    • Počakaj če bo obrnil/a list papirja na glavo
  • Pirat ali Ninja?
    • Bonus točke če je kombiniran/a in je dal/a dober razlog (+2 za zombi opica pirat ninja)
  • Če nebi bil/a web-developer, kaj bi počel/a?
  • Najljubša lastnost Internet Explorerja?
  • Dokončaj naslednji stavek: Brendan Eich in Doug Crockford sta __________ javascript-a.
  • jQuery: dobra ali najboljša knjižnica? Debata.
  • http://www.w3schools.com/ ali http://w3fools.com/
Edit this page
\ No newline at end of file diff --git a/_site/translations/spanish/index.html b/_site/translations/spanish/index.html index 3883b25..7f87e3c 100644 --- a/_site/translations/spanish/index.html +++ b/_site/translations/spanish/index.html @@ -1 +1 @@ -GUIA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Job Interview Questions

GUIA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO

GUIA 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 sobre pruebas de código
  6. Preguntas sobre rendimiento
  7. Preguntas sobre conectividad
  8. Preguntas de código
  9. Preguntas divertidas

Contribuyendo

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

Preguntas generales:

  • ¿Qué has aprendido en esta semana?
  • ¿Qué es lo que te interesa de la programación?
  • ¿Podría describir algún problema técnico que haya resuelto recientemente?
  • ¿Cuáles son las consideraciones del área de interfaces, rendimiento, posicionamiento, mantenimiento o seguridad que toma en cuenta al desarrollar sitios o aplicaciones web?
  • Hable acerca de su ambiente de desarrollo preferido.
  • ¿Qué sistemas de control de versiones ha usado?
  • ¿Puede describir el proceso que sigue cuando crea 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 contrario a usar animaciones hechas con JavaScript.
  • ¿Qué significa CORS y a qué problema está relacionado?

Preguntas específicas de HTML:

  • ¿Qué función cumple el doctype y cuántos tipos puede nombrar?
  • ¿Cuál es la diferencia entre el modo convencional y el “quirks mode”?
  • ¿Cuál es la diferencia entre HTML y XHTML?
  • ¿Hay algún problema al servir las páginas usando: application/xhtml+xml?
  • ¿Cómo presentarí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-?
  • ¿Puede usar sintaxis de XHTML en HTML5?
  • ¿Cómo usa XML en HTML5?
  • 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?
  • ¿Haz usado algún motor para creado de plantillas HTML?

Preguntas específicas de CSS:

  • ¿Cuál es la diferencia entre clases e identificadores en CSS?
  • ¿Cuál es la diferencia entre normalizar y anular el CSS?, ¿cuál usarías 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 cuál funciona para cuál contexto?
  • Explique ¿qué son los sprites en CSS y cómo los implementarías en una página?
  • ¿Cuál es su técnica favorita para reemplazar imágenes y cuando usa cada una?
  • ¿Cómo intentaría resolver problemas de estilo para navegadores específicos?
  • ¿Cuál es su enfoque al desarrollar páginas que dan soporte a navegadores con capacidades limitadas?
  • ¿Qué técnicas o procesos usas?
  • ¿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?
  • ¿Cómo optimiza sus páginas para la impresión?
  • ¿Cuáles son algunos de los “trucos” para escribir CSS eficiente?
  • Menciona las ventajas y desventajas de usar preprocesadores de CSS
  • Menciona lo que te agrada y desagrada de los preprocesadores que usas.
  • ¿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 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?
  • Por favor enliste todos los valores para la propiedad display que pueda recordar
  • ¿Cuál es la diferencia entre inline y inline-block?
  • ¿Cuál es la diferencia entre las posiciones relative, fixed, absolute y static para un elemento dado?
  • La C en CSS significa cascading (en cascada). ¿Cómo se determina la prioridad al asignar los estilos? ¿Cómo podemos aprovechar ese sistema?
  • ¿Cuáles frameworks de CSS has usado en desarrollo y producción? ¿Cómo los mejoraría?
  • ¿Qué sabe sobre CSS Flexbox y cuáles son sus ventajas?
  • ¿En que difiere el diseño responsivo del diseño adaptativo?
  • ¿Has trabajado con tecnología retina?, ¿qué técnicas usaste?
  • ¿Hay alguna razón por la cual preferirías usar translate() en vez de el posicionamiento absoluto? ¿Alguna razón para hacer lo contrario?

Preguntas específicas de JavaScript:

  • Explique “event delegation”.
  • Explique cómo funciona this en JavaScript.
  • Explique cómo funciona la herencia de prototipos (prototypal inheritance) en JavaScript.
  • ¿Qué opina de AMD en comparación con CommonJS?
  • Explique por qué function foo(){ }(); no funciona como un IIFE.
  • ¿Qué se necesita cambiar para que funcione como una IIFE?
  • ¿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?
  • ¿Puede hablar de un uso típico para una función anónima?
  • ¿Cómo organiza su código, patrón módulo, herencia clásica?
  • ¿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()?
  • ¿Cuál es la diferencia entre .call y .apply?
  • ¿Puede explicar el uso de Function.prototype.bind?
  • ¿Cuándo usarías document.write()?
  • ¿Cuál es la diferencia entre detección de capacidades, inferencia de capacidades y usar la cadena del user agent?.
  • Explique AJAX con tanto detalle como pueda.
  • Explique cómo funciona JSONP (y cómo no es AJAX realmente)
  • ¿Ha utilizado alguna vez templates en JavaScript?
    • De ser así, ¿qué bibliotecas ha usado?
  • ¿Puede explicar en qué consiste el “hoisting”?
  • ¿Puede hablar sobre “event bubbling”?
  • ¿Cuál es la diferencia entre un “atributo” y una “propiedad”?
  • ¿Por qué es una mala idea extender objetos nativos de JavaScript?
  • ¿Cuál es la diferencia entre el evento “document load” y el evento “document ready"?
  • ¿Cuál es la diferencia entre == y ===?
  • Explique la política de mismo origen (same-origin policy) y sus repercusiones en JavaScript.
  • Haga que este código funcione:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • ¿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?
  • 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
  • De manera general, ¿por qué es una buena idea no usar el “ámbito” (scope) global de un sitio web?
  • ¿Por qué usaría el evento load?, ¿usarlo representa alguna ventaja?, ¿conoce alternativas y el por qué usaría dichas alternativas?
  • Explique en qué consiste una aplicación de una sola página y como hacer una que bajo los términos del posicionamiento en los buscadores.
  • ¿Qué tanto sabes acerca de las promesas en javascript? ¿Conoce alternativas a ellas?
  • Mencione las ventajas y desventajas de usar promesas en vez de callbacks.
  • Menciona las ventajas y desventajas de escribir Javascript a través de otro lenguaje que compile y su resultado sea Javascript.
  • ¿Qué herramientas y técnicas usa para depurar código Javascript?
  • ¿Qué código utiliza para iterar sobre propiedades de un objeto y sobre arreglos?
  • 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?

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 de funcionalidad?
  • ¿Cuál es el propósito de usar herramientas para verificar los estilos usados en el código?

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 conectividad:

  • 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 respuesta y envío.
  • Expires, Date, Age y If-Modified-
  • Do Not Track
  • Cache-Control
  • Transfer-Encoding
  • Etag
  • X-Frame-Options
  • ¿Qué son las acciones HTTP? explique las acciones HTTP que conozca.

Preguntas de código:

Pregunta: ¿Cuál es el valor de foo?

var foo = 10 + '20';

Pregunta: ¿Cómo harías funcionar esto?

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

Pregunta: ¿Cuál es el resultado de la siguiente sentencia?

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

Pregunta: ¿Cuál es el valor de window.foo?

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

Pregunta: ¿Cuál es el resultado de los dos alerts?

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

Pregunta: ¿Cuál es el valor de foo.length?

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

Pregunta: ¿Cuál es el valor de foo.x?

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

Pregunta: ¿Qué imprime el siguiente código?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

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 partes favoritas de las herramientas de desarrollo que usa?
  • ¿Tiene algún proyecto personal? ¿De qué tipo?
  • ¿Cuál es su funcionalidad favorita de Internet Explorer?
  • ¿Cómo te gusta tu café?

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 +GUIA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO ★ Front-end Job Interview Questions

GUIA DE PREGUNTAS PARA ENTREVISTAS DE TRABAJO

GUIA 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 sobre pruebas de código
  6. Preguntas sobre rendimiento
  7. Preguntas sobre conectividad
  8. Preguntas de código
  9. Preguntas divertidas

Contribuyendo

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

Preguntas generales:

  • ¿Qué has aprendido en esta semana?
  • ¿Qué es lo que te interesa de la programación?
  • ¿Podría describir algún problema técnico que haya resuelto recientemente?
  • ¿Cuáles son las consideraciones del área de interfaces, rendimiento, posicionamiento, mantenimiento o seguridad que toma en cuenta al desarrollar sitios o aplicaciones web?
  • Hable acerca de su ambiente de desarrollo preferido.
  • ¿Qué sistemas de control de versiones ha usado?
  • ¿Puede describir el proceso que sigue cuando crea 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 contrario a usar animaciones hechas con JavaScript.
  • ¿Qué significa CORS y a qué problema está relacionado?

Preguntas específicas de HTML:

  • ¿Qué función cumple el doctype y cuántos tipos puede nombrar?
  • ¿Cuál es la diferencia entre el modo convencional y el “quirks mode”?
  • ¿Cuál es la diferencia entre HTML y XHTML?
  • ¿Hay algún problema al servir las páginas usando: application/xhtml+xml?
  • ¿Cómo presentarí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-?
  • ¿Puede usar sintaxis de XHTML en HTML5?
  • ¿Cómo usa XML en HTML5?
  • 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?
  • ¿Haz usado algún motor para creado de plantillas HTML?

Preguntas específicas de CSS:

  • ¿Cuál es la diferencia entre clases e identificadores en CSS?
  • ¿Cuál es la diferencia entre normalizar y anular el CSS?, ¿cuál usarías 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 cuál funciona para cuál contexto?
  • Explique ¿qué son los sprites en CSS y cómo los implementarías en una página?
  • ¿Cuál es su técnica favorita para reemplazar imágenes y cuando usa cada una?
  • ¿Cómo intentaría resolver problemas de estilo para navegadores específicos?
  • ¿Cuál es su enfoque al desarrollar páginas que dan soporte a navegadores con capacidades limitadas?
  • ¿Qué técnicas o procesos usas?
  • ¿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?
  • ¿Cómo optimiza sus páginas para la impresión?
  • ¿Cuáles son algunos de los “trucos” para escribir CSS eficiente?
  • Menciona las ventajas y desventajas de usar preprocesadores de CSS
  • Menciona lo que te agrada y desagrada de los preprocesadores que usas.
  • ¿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 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?
  • Por favor enliste todos los valores para la propiedad display que pueda recordar
  • ¿Cuál es la diferencia entre inline y inline-block?
  • ¿Cuál es la diferencia entre las posiciones relative, fixed, absolute y static para un elemento dado?
  • La C en CSS significa cascading (en cascada). ¿Cómo se determina la prioridad al asignar los estilos? ¿Cómo podemos aprovechar ese sistema?
  • ¿Cuáles frameworks de CSS has usado en desarrollo y producción? ¿Cómo los mejoraría?
  • ¿Qué sabe sobre CSS Flexbox y cuáles son sus ventajas?
  • ¿En que difiere el diseño responsivo del diseño adaptativo?
  • ¿Has trabajado con tecnología retina?, ¿qué técnicas usaste?
  • ¿Hay alguna razón por la cual preferirías usar translate() en vez de el posicionamiento absoluto? ¿Alguna razón para hacer lo contrario?

Preguntas específicas de JavaScript:

  • Explique “event delegation”.
  • Explique cómo funciona this en JavaScript.
  • Explique cómo funciona la herencia de prototipos (prototypal inheritance) en JavaScript.
  • ¿Qué opina de AMD en comparación con CommonJS?
  • Explique por qué function foo(){ }(); no funciona como un IIFE.
  • ¿Qué se necesita cambiar para que funcione como una IIFE?
  • ¿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?
  • ¿Puede hablar de un uso típico para una función anónima?
  • ¿Cómo organiza su código, patrón módulo, herencia clásica?
  • ¿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()?
  • ¿Cuál es la diferencia entre .call y .apply?
  • ¿Puede explicar el uso de Function.prototype.bind?
  • ¿Cuándo usarías document.write()?
  • ¿Cuál es la diferencia entre detección de capacidades, inferencia de capacidades y usar la cadena del user agent?.
  • Explique AJAX con tanto detalle como pueda.
  • Explique cómo funciona JSONP (y cómo no es AJAX realmente)
  • ¿Ha utilizado alguna vez templates en JavaScript?
    • De ser así, ¿qué bibliotecas ha usado?
  • ¿Puede explicar en qué consiste el “hoisting”?
  • ¿Puede hablar sobre “event bubbling”?
  • ¿Cuál es la diferencia entre un “atributo” y una “propiedad”?
  • ¿Por qué es una mala idea extender objetos nativos de JavaScript?
  • ¿Cuál es la diferencia entre el evento “document load” y el evento “document ready"?
  • ¿Cuál es la diferencia entre == y ===?
  • Explique la política de mismo origen (same-origin policy) y sus repercusiones en JavaScript.
  • Haga que este código funcione:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • ¿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?
  • 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
  • De manera general, ¿por qué es una buena idea no usar el “ámbito” (scope) global de un sitio web?
  • ¿Por qué usaría el evento load?, ¿usarlo representa alguna ventaja?, ¿conoce alternativas y el por qué usaría dichas alternativas?
  • Explique en qué consiste una aplicación de una sola página y como hacer una que bajo los términos del posicionamiento en los buscadores.
  • ¿Qué tanto sabes acerca de las promesas en javascript? ¿Conoce alternativas a ellas?
  • Mencione las ventajas y desventajas de usar promesas en vez de callbacks.
  • Menciona las ventajas y desventajas de escribir Javascript a través de otro lenguaje que compile y su resultado sea Javascript.
  • ¿Qué herramientas y técnicas usa para depurar código Javascript?
  • ¿Qué código utiliza para iterar sobre propiedades de un objeto y sobre arreglos?
  • 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?

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 de funcionalidad?
  • ¿Cuál es el propósito de usar herramientas para verificar los estilos usados en el código?

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 conectividad:

  • 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 respuesta y envío.
  • Expires, Date, Age y If-Modified-
  • Do Not Track
  • Cache-Control
  • Transfer-Encoding
  • Etag
  • X-Frame-Options
  • ¿Qué son las acciones HTTP? explique las acciones HTTP que conozca.

Preguntas de código:

Pregunta: ¿Cuál es el valor de foo?

var foo = 10 + '20';

Pregunta: ¿Cómo harías funcionar esto?

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

Pregunta: ¿Cuál es el resultado de la siguiente sentencia?

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

Pregunta: ¿Cuál es el valor de window.foo?

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

Pregunta: ¿Cuál es el resultado de los dos alerts?

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

Pregunta: ¿Cuál es el valor de foo.length?

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

Pregunta: ¿Cuál es el valor de foo.x?

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

Pregunta: ¿Qué imprime el siguiente código?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

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 partes favoritas de las herramientas de desarrollo que usa?
  • ¿Tiene algún proyecto personal? ¿De qué tipo?
  • ¿Cuál es su funcionalidad favorita de Internet Explorer?
  • ¿Cómo te gusta tu café?

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/_site/translations/swedish/index.html b/_site/translations/swedish/index.html index d2e2eed..4149175 100644 --- a/_site/translations/swedish/index.html +++ b/_site/translations/swedish/index.html @@ -1 +1 @@ -Front-end Anställningsfrågor ★ Front-end Job Interview Questions

Front-end Anställningsfrågor

Front-end Anställningsfrågor

Detta arkiv innehåller ett urval av frågor som kan ställas till den arbetssökande. Det är verkligen inte rekommenderat att ställa alla frågor här till samma person (det skulle ta timmar). Att välja ut ett par stycken från listan bör hjälpa dig besluta huruvida den arbetssökande uppfyller dina krav.

Att tänka på: Kom ihåg att många av de här frågorna är öppna och kan leda till intressanta diskussioner som berättar mer om personens kunskaper än vad en sluten fråga skulle.

Innehållsförteckning

  1. Allmänna frågor
  2. HTML-frågor
  3. CSS-frågor
  4. JS-frågor
  5. Nätverksgrågor
  6. Kodfrågor
  7. Roliga frågor

Hjälpa till

  1. Bidragande skribenter
  2. Att hjälpa till
  3. Licens

Allmänna frågor:

  • Vad lärde du dig igår/den här veckan?
  • Vad tycker du är spännande eller intressant med kodning?
  • Berätta om en teknisk utmaning du haft nyligen och hur du löste den.
  • Vilka övervägningar gör du angående gränssnitt, säkerhet, prestanda, SEO, underhållsmässighet och tekniker när du bygger en webbapplikation eller -plats?
  • Berätta lite om den utvecklingsmiljö du helst sitter i.
  • Vilka versionshanteringssystem har du använt?
  • Kan du beskriva ditt arbetsflöde när du skapar en hemsida?
  • Om du har fem olika stilmallar, hur skulle du bäst integrera dem i sajten?
  • Kan du beskriva skillnaden mellan “progressive enhancement” och “graceful degradation”?
  • Hur skulle du optimera en webbplats resurser?
  • Hur många resurser kan en webbläsare ladda från en specifik domän åt gången?
    • Vilka är undantagen?
  • Nämn tre sätt att minska laddningstiden för en webbsida (uppfattad eller faktisk laddningstid).
  • Om du hoppade på ett projekt och de använde tabbar och du mellanslag, vad skulle du då göra?
  • Beskriv hur du skulle göra ett enkelt bildspel.
  • Om du kunde bemästra en teknologi i år, vad skulle det vara?
  • Beskriv varför det är viktigt med standarder och standardiseringsorganisationer.
  • Vad är “Flash of Unstyled Content”? Hur undviker du FOUC?
  • Förklara vad ARIA och skärmläsare är och hur man gör en webbplats tillgänglig.
  • Förklara några av fördelarna och nackdelarna mellan CSS- och JavaScript-animationer.

HTML-frågor:

  • Vad gör en dokumenttyp (doctype)?
  • Vad är skillnaden mellan standardläge och quirksläge?
  • Vad är skillnaden mellan HTML och XHTML?
  • Finns det några problem med att skicka sidor som application/xhtml+xml?
  • Hur skickar du en sida innehållandes flera språk?
  • Vad måste du vara försiktig med när du designar eller utvecklar för flerspråkssidor?
  • Vad är data--attribut bra för?
  • Tänk dig HTML5 som en öppen webbplattform. Vad är byggstenarna i HTML5?
  • Beskriv skillnaden mellan en cookie, sessionStorage och localStorage.
  • Beskriv skillnaden mellan <script>, <script async> och <script defer>.
  • Varför är det generellt en bra idé att lägga CSS-<link>ar mellan <head></head> och JS-<script>ar precis före </body>? Känner du till några undantag?
  • Vad är progressiv rendering?
  • Har du använt dig av några HTML-mallspråk tidigare?

CSS-frågor:

  • Vad är skillnaden mellan klasser och ID:n i CSS?
  • Vad är skillnaden mellan att “nollställa” och att “normalisera” CSS? Vad skulle du välja och varför?
  • Beskriv floats och hur de fungerar.
  • Beskriv z-index och hur stacking context skapas.
  • Beskriv BFC (Block Formatting Context) och hur det fungerar?
  • Vilka olika clearing-tekniker finns det och vilka passar för vilka sammanhang?
  • Förklara CSS-sprites och hur du skulle implementera dem på en sida.
  • Vilka är dina favorittekniker för bildersättning och vilka använder du i vilka situationer?
  • Hur skulle du fixa webbläsarspecifika stilproblem?
  • Hur skickar du sidor till funktionsbegränsade webbläsare?
    • Vilka tekniker/processer använder du?
  • Vilka olika sätt finns det att visuellt dölja element (och bara göra dem tillgängliga för skärmläsare)?
  • Har du någonsin använt ett rutnätsystem, och i sådana fall vilket föredrar du?
  • Har du använt eller implementerat mediafrågor eller mobilspecifika layouter/CSS:er?
  • Har du någon erfarenhet av att styla SVG?
  • Hur optimerar du dina webbplatser för utskrift?
  • Vilka är några av de fallgropar som finns för att skriva effektiv CSS?
  • Vilka är fördelarna/nackdelarna med att använda CSS-preprocessorer?
    • Beskriv vad du gillar och ogillar med de CSS-preprocessorer du använt.
  • Hur skulle du implementera en webbdesign som använder icke-standardiserade typsnitt?
  • Förklara hur en webbläsare bestämmer vilka element som matchar en selektor.
  • Beskriv pseudoelement och vad de används till.
  • Förklara boxmodellen och hur du skulle göra i CSS för att få webbläsaren att rendera din layout i olika boxmodeller.
  • Vad gör * { box-sizing: border-box; }? Vad är dess fördelar?
  • Lista så många värden för display-egenskapen som du kan komma ihåg.
  • Vad är skillnaden mellan inline och inline-block?
  • Vad är skillnaden mellan element som är positionerade med relative, fixed, absolute och static?
  • C:et i CSS står för “Cascading”. Hur bestäms prioritet när stilar sätts (några exempel)? Hur kan du använda det här systemet till din fördel?
  • Vilka CSS-ramverk har du använt lokalt eller i produktion? Hur skulle du förändra/förbättra dem?
  • Har du lekt något med de nya CSS-specifikationerna för Flexbox och Grid?
  • På vilket sätt skiljer sig responsiv design från adaptiv design?
  • Har du någon gång arbetat med retinagrafik? I så fall, när var det och vilka tekniker använde du?
  • Finns det någon anledning till att du skulle vilja använda translate() i stället för absolut positionering och vice-versa? I så fall varför?

JS-frågor:

  • Förklara eventdelegering.
  • Förklara hur this fungerar i JavaScript
  • Förklara hur prototypiskt arv fungerar.
  • AMD eller CommonJS?
  • Förklara varför följande inte fungerar som en IIFE: function foo(){ }();.
    • Vad behöver ändras för att göra den till en fungerande IIFE?
  • Vad är skillnaden mellan en variabel som är: null, undefined eller undeclared?
    • Hur skulle du göra för att kolla efter någon av dessa?
  • Vad är en “closure” och hur/varför vill du använda det?
  • Vad är ett typiskt användningsområde för en anonym funktion?
  • Hur organiserar du din kod? (Modulmönstret, klassiskt arv?)
  • Vad är skillnaden mellan “host objects” och “native objects”?
  • Skillnaden mellan: function Person(){}, var person = Person() och var person = new Person()?
  • Vad är skillnaden mellan .call och .apply?
  • Förklara Function.prototype.bind?
  • När skulle du använda document.write()?
  • Vad är skillnaden mellan “feature detection”, “feature inference”, och att använda UA-strängen?
  • Förklara AJAX så noggrant som möjligt.
  • Förklara hur JSONP fungerar (och varför det egentligen inte är AJAX).
  • Har du någonsin använt “JavaScript templating”?
    • Om så är fallet, vilka bibliotek har du använt?
  • Förklara “hoisting”.
  • Beskriv “event bubbling”.
  • Vad är skillnaden mellan “attribute” och “property”?
  • Varför är det inte bra att utvidga (extend) inbyggda JavaScript-objekt?
  • Skillnaden mellan “document load event” och “document ready event”?
  • Vad är skillnaden mellan == och ===?
  • Förklara “same-origin policy” med hänsyn till JavaScript.
  • Få det här att fungera
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Varför kallas det för “ternary expression”, vad menas med ordet “ternary”?
  • Vad är "use strict";? Vilka är för- och nackdelarna med att använda det?
  • Skapa en for-loop som itererar upp till 100 medan den skriver ut “fizz” vid multiplar av 3, “buzz” vid multiplar av 5 och “fizzbuzz” vid multiplar av 3 och 5.
  • Varför är det generellt sett en bra idé att aldrig röra det globala scopet på en webbsida?
  • Varför skulle man vilja använda något som load-eventet? Har det eventet några nackdelar? Känner du till några alternativ och varför skulle man i så fall vilja använda dem?
  • Förklara vad en single page-app är och hur en sådan kan göras SEO-vänlig.
  • Hur stor erfarenhet har du av Promises och/eller polyfills för dem?
  • Vad är fördelarna och nackdelarna med att använda Promises i stället för callbacks?
  • Nämn några för- och nackdelar med att skriva JavaScript-kod i ett språk som kompilerar till JavaScript.

Testfrågor:

  • Nämn några för- och nackdelar med att testa sin kod.
  • Vilka verktyg skulle du använda för att testa din kods funktionalitet?
  • Vad är skillnaden mellan ett enhetstest och ett integrations-/funktionellt test?
  • Vad är syftet med ett verktyg för lintning av kodstil?

Prestandafrågor:

  • Vilka verktyg skulle du använda för att hitta en prestandabugg i din kod?
  • Nämn några sätt att förbättra din sajts skrollningsprestanda.
  • Beskriv skillnaden mellan “layout”, “painting” och “compositing”.

Nätverksfrågor:

  • Varför har det traditionellt sett varit bättre att servera webbplatsen från flera domäner?
  • Förklara så noggrannt du kan processen från att du skriver in en webbsidas URL till att sidan har laddats färdigt på din skärm.
  • Vad är skillnaderna mellan long-polling, WebSockets och Server-Sent Events?
  • Förklara följande svarshuvuden:
    • Skillnaden mellan Expires, Date, Age och If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Vad är “HTTP actions”? Lista alla “HTTP actions” du känner till och förklara dem.

Kodfrågor

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

var foo = 10 + '20';

Fråga: Hur skulle du få det här att fungera?

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

Fråga: Vilket värde returneras från nedanstående?

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

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

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

Fråga: Vad kommer de två alerterna att ropa ut?

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

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

var foo = [];
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:

  • Nämn en cool sak du kodat nyligen.
  • Nämn några delar som du gillar hos de utvecklarverktyg du använder?
  • Har du några egna projekt som du sköter om? I sådana fall vilken typ av projekt?
  • Vilken är din favoritfunktion i Internet Explorer?
  • Hur gillar du ditt kaffe?

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 +Front-end Anställningsfrågor ★ Front-end Job Interview Questions

Front-end Anställningsfrågor

Front-end Anställningsfrågor

Detta arkiv innehåller ett urval av frågor som kan ställas till den arbetssökande. Det är verkligen inte rekommenderat att ställa alla frågor här till samma person (det skulle ta timmar). Att välja ut ett par stycken från listan bör hjälpa dig besluta huruvida den arbetssökande uppfyller dina krav.

Att tänka på: Kom ihåg att många av de här frågorna är öppna och kan leda till intressanta diskussioner som berättar mer om personens kunskaper än vad en sluten fråga skulle.

Innehållsförteckning

  1. Allmänna frågor
  2. HTML-frågor
  3. CSS-frågor
  4. JS-frågor
  5. Nätverksgrågor
  6. Kodfrågor
  7. Roliga frågor

Hjälpa till

  1. Bidragande skribenter
  2. Att hjälpa till
  3. Licens

Allmänna frågor:

  • Vad lärde du dig igår/den här veckan?
  • Vad tycker du är spännande eller intressant med kodning?
  • Berätta om en teknisk utmaning du haft nyligen och hur du löste den.
  • Vilka övervägningar gör du angående gränssnitt, säkerhet, prestanda, SEO, underhållsmässighet och tekniker när du bygger en webbapplikation eller -plats?
  • Berätta lite om den utvecklingsmiljö du helst sitter i.
  • Vilka versionshanteringssystem har du använt?
  • Kan du beskriva ditt arbetsflöde när du skapar en hemsida?
  • Om du har fem olika stilmallar, hur skulle du bäst integrera dem i sajten?
  • Kan du beskriva skillnaden mellan “progressive enhancement” och “graceful degradation”?
  • Hur skulle du optimera en webbplats resurser?
  • Hur många resurser kan en webbläsare ladda från en specifik domän åt gången?
    • Vilka är undantagen?
  • Nämn tre sätt att minska laddningstiden för en webbsida (uppfattad eller faktisk laddningstid).
  • Om du hoppade på ett projekt och de använde tabbar och du mellanslag, vad skulle du då göra?
  • Beskriv hur du skulle göra ett enkelt bildspel.
  • Om du kunde bemästra en teknologi i år, vad skulle det vara?
  • Beskriv varför det är viktigt med standarder och standardiseringsorganisationer.
  • Vad är “Flash of Unstyled Content”? Hur undviker du FOUC?
  • Förklara vad ARIA och skärmläsare är och hur man gör en webbplats tillgänglig.
  • Förklara några av fördelarna och nackdelarna mellan CSS- och JavaScript-animationer.

HTML-frågor:

  • Vad gör en dokumenttyp (doctype)?
  • Vad är skillnaden mellan standardläge och quirksläge?
  • Vad är skillnaden mellan HTML och XHTML?
  • Finns det några problem med att skicka sidor som application/xhtml+xml?
  • Hur skickar du en sida innehållandes flera språk?
  • Vad måste du vara försiktig med när du designar eller utvecklar för flerspråkssidor?
  • Vad är data--attribut bra för?
  • Tänk dig HTML5 som en öppen webbplattform. Vad är byggstenarna i HTML5?
  • Beskriv skillnaden mellan en cookie, sessionStorage och localStorage.
  • Beskriv skillnaden mellan <script>, <script async> och <script defer>.
  • Varför är det generellt en bra idé att lägga CSS-<link>ar mellan <head></head> och JS-<script>ar precis före </body>? Känner du till några undantag?
  • Vad är progressiv rendering?
  • Har du använt dig av några HTML-mallspråk tidigare?

CSS-frågor:

  • Vad är skillnaden mellan klasser och ID:n i CSS?
  • Vad är skillnaden mellan att “nollställa” och att “normalisera” CSS? Vad skulle du välja och varför?
  • Beskriv floats och hur de fungerar.
  • Beskriv z-index och hur stacking context skapas.
  • Beskriv BFC (Block Formatting Context) och hur det fungerar?
  • Vilka olika clearing-tekniker finns det och vilka passar för vilka sammanhang?
  • Förklara CSS-sprites och hur du skulle implementera dem på en sida.
  • Vilka är dina favorittekniker för bildersättning och vilka använder du i vilka situationer?
  • Hur skulle du fixa webbläsarspecifika stilproblem?
  • Hur skickar du sidor till funktionsbegränsade webbläsare?
    • Vilka tekniker/processer använder du?
  • Vilka olika sätt finns det att visuellt dölja element (och bara göra dem tillgängliga för skärmläsare)?
  • Har du någonsin använt ett rutnätsystem, och i sådana fall vilket föredrar du?
  • Har du använt eller implementerat mediafrågor eller mobilspecifika layouter/CSS:er?
  • Har du någon erfarenhet av att styla SVG?
  • Hur optimerar du dina webbplatser för utskrift?
  • Vilka är några av de fallgropar som finns för att skriva effektiv CSS?
  • Vilka är fördelarna/nackdelarna med att använda CSS-preprocessorer?
    • Beskriv vad du gillar och ogillar med de CSS-preprocessorer du använt.
  • Hur skulle du implementera en webbdesign som använder icke-standardiserade typsnitt?
  • Förklara hur en webbläsare bestämmer vilka element som matchar en selektor.
  • Beskriv pseudoelement och vad de används till.
  • Förklara boxmodellen och hur du skulle göra i CSS för att få webbläsaren att rendera din layout i olika boxmodeller.
  • Vad gör * { box-sizing: border-box; }? Vad är dess fördelar?
  • Lista så många värden för display-egenskapen som du kan komma ihåg.
  • Vad är skillnaden mellan inline och inline-block?
  • Vad är skillnaden mellan element som är positionerade med relative, fixed, absolute och static?
  • C:et i CSS står för “Cascading”. Hur bestäms prioritet när stilar sätts (några exempel)? Hur kan du använda det här systemet till din fördel?
  • Vilka CSS-ramverk har du använt lokalt eller i produktion? Hur skulle du förändra/förbättra dem?
  • Har du lekt något med de nya CSS-specifikationerna för Flexbox och Grid?
  • På vilket sätt skiljer sig responsiv design från adaptiv design?
  • Har du någon gång arbetat med retinagrafik? I så fall, när var det och vilka tekniker använde du?
  • Finns det någon anledning till att du skulle vilja använda translate() i stället för absolut positionering och vice-versa? I så fall varför?

JS-frågor:

  • Förklara eventdelegering.
  • Förklara hur this fungerar i JavaScript
  • Förklara hur prototypiskt arv fungerar.
  • AMD eller CommonJS?
  • Förklara varför följande inte fungerar som en IIFE: function foo(){ }();.
    • Vad behöver ändras för att göra den till en fungerande IIFE?
  • Vad är skillnaden mellan en variabel som är: null, undefined eller undeclared?
    • Hur skulle du göra för att kolla efter någon av dessa?
  • Vad är en “closure” och hur/varför vill du använda det?
  • Vad är ett typiskt användningsområde för en anonym funktion?
  • Hur organiserar du din kod? (Modulmönstret, klassiskt arv?)
  • Vad är skillnaden mellan “host objects” och “native objects”?
  • Skillnaden mellan: function Person(){}, var person = Person() och var person = new Person()?
  • Vad är skillnaden mellan .call och .apply?
  • Förklara Function.prototype.bind?
  • När skulle du använda document.write()?
  • Vad är skillnaden mellan “feature detection”, “feature inference”, och att använda UA-strängen?
  • Förklara AJAX så noggrant som möjligt.
  • Förklara hur JSONP fungerar (och varför det egentligen inte är AJAX).
  • Har du någonsin använt “JavaScript templating”?
    • Om så är fallet, vilka bibliotek har du använt?
  • Förklara “hoisting”.
  • Beskriv “event bubbling”.
  • Vad är skillnaden mellan “attribute” och “property”?
  • Varför är det inte bra att utvidga (extend) inbyggda JavaScript-objekt?
  • Skillnaden mellan “document load event” och “document ready event”?
  • Vad är skillnaden mellan == och ===?
  • Förklara “same-origin policy” med hänsyn till JavaScript.
  • Få det här att fungera
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Varför kallas det för “ternary expression”, vad menas med ordet “ternary”?
  • Vad är "use strict";? Vilka är för- och nackdelarna med att använda det?
  • Skapa en for-loop som itererar upp till 100 medan den skriver ut “fizz” vid multiplar av 3, “buzz” vid multiplar av 5 och “fizzbuzz” vid multiplar av 3 och 5.
  • Varför är det generellt sett en bra idé att aldrig röra det globala scopet på en webbsida?
  • Varför skulle man vilja använda något som load-eventet? Har det eventet några nackdelar? Känner du till några alternativ och varför skulle man i så fall vilja använda dem?
  • Förklara vad en single page-app är och hur en sådan kan göras SEO-vänlig.
  • Hur stor erfarenhet har du av Promises och/eller polyfills för dem?
  • Vad är fördelarna och nackdelarna med att använda Promises i stället för callbacks?
  • Nämn några för- och nackdelar med att skriva JavaScript-kod i ett språk som kompilerar till JavaScript.

Testfrågor:

  • Nämn några för- och nackdelar med att testa sin kod.
  • Vilka verktyg skulle du använda för att testa din kods funktionalitet?
  • Vad är skillnaden mellan ett enhetstest och ett integrations-/funktionellt test?
  • Vad är syftet med ett verktyg för lintning av kodstil?

Prestandafrågor:

  • Vilka verktyg skulle du använda för att hitta en prestandabugg i din kod?
  • Nämn några sätt att förbättra din sajts skrollningsprestanda.
  • Beskriv skillnaden mellan “layout”, “painting” och “compositing”.

Nätverksfrågor:

  • Varför har det traditionellt sett varit bättre att servera webbplatsen från flera domäner?
  • Förklara så noggrannt du kan processen från att du skriver in en webbsidas URL till att sidan har laddats färdigt på din skärm.
  • Vad är skillnaderna mellan long-polling, WebSockets och Server-Sent Events?
  • Förklara följande svarshuvuden:
    • Skillnaden mellan Expires, Date, Age och If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Vad är “HTTP actions”? Lista alla “HTTP actions” du känner till och förklara dem.

Kodfrågor

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

var foo = 10 + '20';

Fråga: Hur skulle du få det här att fungera?

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

Fråga: Vilket värde returneras från nedanstående?

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

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

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

Fråga: Vad kommer de två alerterna att ropa ut?

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

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

var foo = [];
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:

  • Nämn en cool sak du kodat nyligen.
  • Nämn några delar som du gillar hos de utvecklarverktyg du använder?
  • Har du några egna projekt som du sköter om? I sådana fall vilken typ av projekt?
  • Vilken är din favoritfunktion i Internet Explorer?
  • Hur gillar du ditt kaffe?

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/_site/translations/turkish/index.html b/_site/translations/turkish/index.html index ec8ba7f..a93c9b2 100644 --- a/_site/translations/turkish/index.html +++ b/_site/translations/turkish/index.html @@ -1 +1 @@ -Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları ★ Front-end Job Interview Questions

Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları

Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları

Burada ön yüz yazılım -ya da front-end- iş başvurularınızda karşınıza çıkabilecek sorular yer almaktadır. Her sorunun iş başvurularınızda karşınıza çıkması garanti değil ancak ihtimali var. Ayrıca buradaki sorular sadece iş başvurusu yapanlar için değil, bu branşta kendini geliştirmeyi düşünenler için de kaynak niteliğindedir.

Not: Buradaki birçok sorunun ucunun açık olduğunu, bu sebeple vereceğiniz cevaba göre ilginç tartışmalara yol açabileceğini unutmayın.

İçindekiler

  1. Genel Sorular
  2. HTML Soruları
  3. CSS Soruları
  4. JS Soruları
  5. Test Soruları
  6. Performans Soruları
  7. Ağ Soruları
  8. Kodlama Soruları
  9. Eğlenceli Sorular

Dahil Olmak İçin

  1. Katkıda bulunanlar
  2. Nasıl katkıda bulunabilirim?
  3. Lisans

Genel Sorular:

  • Dün -ya da bu hafta- neler öğrendin?
  • Kod yazmanda seni cezbeden şey ne?
  • Deneyimlediğin son teknik meydan okuma / problem neydi ve onu nasıl çözdün?
  • Website yada web application hazırlarken UI, güvenlik, performans, SEO, sürdürülebilirlik veya teknoloji için nelere dikkat edersin?
  • Bize biraz geliştirme ortamından bahset. -İşletim Sistemi, Web Tarayıcı, Araçlar, Kod Editörü/IDE, vb.-
  • Haangi version kontrol sistemlerine aşinasın?
  • Web sayfasını oluştururken hangi adımları takip edersin?
  • Eğer 5 farklı stil dosyası varsa, bunları siteye entegre etmenin en iyi yolu nedir?
  • “Aşamalı geliştirme (progressive enhancement)” ile “kontrollü azalma (graceful degradation)” arasında ne fark vardır?
  • Web sitesindeki dosyaları nasıl optimize edersin?
  • Belli bir zamanda, tek bir alanadı üzerinden web tarayıcısı ne kadar kaynak indirebilir?
    • İstisnalar nelerdir?
  • Sayfa yüklenme hızını azaltmanın yollarından 3 tanesini söyleyebilir misin?
  • Yeni dahil olduğunuz bir projede, kodlama için Tab boşluk kullanılıyor ama siz Space ile boşluk bırakmayı tercih ediyorsunuz. Bu durumda ne yaparsınız?
  • Basit bir slayt/galeri sayfası oluşturun
  • Eğer bu yıl bir teknolojide en iyi olmak isteseydin, hangisini seçerdin?
  • Yazılım standartlarının öneminden bahseder misin?
  • FOUC nedir? FOUC’a nasıl engel olabilirsin?
  • Web adresinin ilk adres girilirken sayfanın tam olarak yüklenmesine kadar ki işlemleri açıklayabilir misin?
  • CSS animasyonlarının JavaScript animasyonlara göre artılarını ve eksiklerini açıklayabilir misin?
  • CORS ne anlama geliyor ve nasıl bir problemi çözüyor?

HTML Soruları:

  • doctypeın işlevi nedir?
  • Full standards mode, almost standards mode ve quirks mode arasındaki farklar nelerdir?
  • HTML ve XHTML arasındaki farkler nelerdir?
  • Sayfaların application/xhtml+xml olarak çalıştırılmasında herhangi bir sakınca var mıdır?
  • Sayfa içeriği çoklu dil olan siteyi nasıl sunabilirsin?
  • Çoklu dil olan sayfalarda tasarım veya kodlama olarak nelerden kaçılmalısın?
  • data- özelliği ne faydalar sağlar?
  • HTML5’i ‘open web platform’ olarak düşün. HTML5’in yapı taşları/temelleri nelerdir?
  • cookie, sessionStorage ve localStorage arasındaki farkları açıklayabilir misin?
  • <script>, <script async> ve <script defer> arasındaki farkları açıklayabilir misin?
  • CSS <link>lerin <head></head> arasında ve JS <script>lerinin </body> etiketinden önce olması niye genelde iyi bir fikirdir? Herhangi bir istisna biliyor musun?
  • Progressive rendering nedir?
  • Önceden farklı bir HTML templating dili kullandın mı?

CSS Soruları:

  • CSS’te class ve ID arasındaki farklar nelerdir?
  • “Resetting” ve “normalizing” CSS’ler arasındaki farklar nelerdir? Hangisini kullanmamız gerekir, neden?
  • Floats özelliğinin ne olduğunu ve nasıl çalıştığından bahsedin.
  • z-index özelliğinin ne olduğunu ve nasıl çalıştığından bahsedin.
  • BFC (Block Formatting Context)'nin ne olduğunu ve nasıl çalıştığından bahsedin.
  • Çeşitli ‘clearing’ teknikleri nelerdir ve hangi teknik hangi içerik için uygundur?
  • CSS Sprites özelliğini ve sayfanıza veya web uygulamanıza nasıl entegre edeceğinizi anlatın.
  • En favori imaj yerini değiştirme (image replacement) tekniği sizce hangisidir ve ne gibi durumlarda kullanırsınız?
  • Browser tabanlı (browser-specific) stil problemlerini nasıl çözersiniz?
  • Özellik kısıtlamalı (feature-constrained) tarayıcılar için websitenizi nasıl hazırlarsınız?
    • Hangi teknikleri/işlemleri kullanırsınız?
  • İçerikleri görsel olarak gizlemek hangi yollar bulunmakta? (İçerik sadece ekran okuyucular (screen readers) için gözükecek.)
  • Şimdiye kadar grid sistemi kullandınız mı? Eğer kullandıysanız, ne tercih edersiniz?
  • Şimdiye kadar ‘media queries’ veya mobil bazlı CSS/tasarım kullanıdınız mı?
  • SVG stillendirme hakkında deneyiminiz var mı?
  • Yazdırmak için (print) sitenizi ne şekilde en uygun hale getirdiniz?
  • Kaliteli CSS yazmak için ‘işte bu!’ dediğiniz şeyler nelerdir?
  • CSS 'preprocessor’ler kullanmanın artı-eksileri nelerdir? (SASS, Compass, Stylus, LESS)
    • Şimdiye kadar kullandıklarınızda en çok beğendiğiniz/beğenmediğiniz özellikler nelerdi?
  • Standart fontları kullanmayan web tasarımlarını nasıl sayfanıze entegre ediyorsunuz?
  • Tarayıcılar HTML elementlerin CSS seçicilerle (selector) eşleştiğini nasıl algılıyor, açıklar mısınız?
  • Sözde elementleri (pseudo-elements) ve ne için kullandıklarını açıklayın.
  • ‘box model’ konusunu bildiğiniz kadar açıklayın ve tasarımınızı farklı bir ‘box model’ ile göstermek istediğinizde CSS tarafında tarayıcıya ne belirtmeniz gerekir?
  • * { box-sizing: border-box; } ne yapar? Avantajları nelerdir?
  • ‘Display’ özelliğinin aldığı değerleri hatırladığınız kadar sayın.
  • ‘inline’ ile ‘inline-block’ arasındaki farklılıklar nelerdir?
  • ‘relative’, ‘fixed’, ‘absolute’ ve ‘static’ konumlandırılmış elementlerin farkı nedir?
  • CSS kelimesindeki C harfi "Cascading"in (basamaklı) kısaltmasıdır. Yönlendirilen stillerde öncelikler nasıl belirlenir (birkaç örnekle birlikte)? Bunu nasıl kendi avantajınıza göre kullanabilirsiniz?
  • Kullanmış olduğunuz, daha tanınmayan - lokal CSS çatılar (frameworks) var mı? Bunları nasıl değiştirmek / geliştirmek isterdiniz?
  • Yeni CSS Flebox veya Grid özellikleriyle deneyip bir şeyler yaptınız mı?
  • Responsive tasarımın adaptive tasarımdan farkı nedir?
  • Hiç retina grafiklerle çalıştınız mı? Eğer çalıştıysanız ne zaman ve hangi teknikleri kullandınız?
  • translate() yerine absolute positioning, veya tam tersini kullanmak için bir sebebiniz olabilir mi? Ve neden?

JS Soruları:

  • ‘Event delegation’ özelliğini anlatın.
  • JavaScript’te this nasıl çalışıyor?
  • ‘prototypal inheritance’ nasıl çalışır?
  • AMD ile CommonJS’in farkı nelerdir?
  • IIFE olarak neden bu fonksiyonun çalışmadığını açıklayın: function foo(){ }();.
    • IIFE olarak çalışması için ne yapmak gerekiyor?
  • null, undefined ve undeclared arasında ne farklar var?
    • Bu değerleri kontrol ederken neler yapmalıyız?
  • ‘Closure’ nedir, ve nasıl/neden kullanırız?
  • Anonim fonksiyonları kullanma durumları nelerdir?
  • Kodunuzu nasıl organize edersiniz? (module pattern, classical inheritance?)
  • host objects ve native objects arasında ne fark var?
  • function Person(){}, var person = Person(), ve var person = new Person() arasındaki farklar nelerdir?
  • .call ve .apply arasındaki fark nedir?
  • Function.prototype.bind özelliğinin ne olduğunu açıklayınız.
  • undefined ve null arasındaki fark nedir?
  • document.write() fonksiyonunu ne zaman kullanmalıyız?
  • Özellik tespiti (feature detection), özellik çıkarım (feature inference) ve UA string kullanımı arasındaki farklar nelerdir?
  • AJAX’ı olabildiğince detaylı şekilde açıklayın.
  • Ajax kullanmanın avantajları ve dezavantajları nelerdir?
  • JSONP nasıl çalışır? (ve neden tam olarak AJAX olmadığını da açıklayınız.)
  • JavaScript ‘template’ yapısını hiç kullandınız mı?
    • Eğer kullandıysanız, Hangi 'library’leri kullandınız? (Mustache.js, Handlebars, vb.)
  • “Hoisting” özelliğini açıklayın.
  • ‘Event bubbling’ özelliğini açıklayın.
  • “Attribute” ve “property” arasındaki farklar nelerdir?
  • JavaScript objeleri genişletmek neden iyi fikir değildir?
  • “document load event” ile “document DOMContentLoaded event” arasındaki farklar nelerdir?
  • == ve === arasında ne fark vardır?
  • JavaScript için ‘same-origin policy’ konusunu açıklayın.
  • Çalışacak şekilde kodu yazın:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Neden ‘Ternary expression’ olarak çağrılmaktadır? “Ternary” kelimesi neyi belirtmektedir?
  • "use strict"; nedir? Bunu kullanmanın artı/eksileri nelerdir?
  • 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
  • Websitenin genel skopundan ayrılmak ve dokunmamak neden genelde iyi bir fikirdir?
  • Neden load gibi bir event kullanırsınız? Bunun dezavantajları var mı? Bildiğiniz alternatifleri var mı ve neden onları kullanıyorsunuz?
  • Tek sayfa uygulama (single page app) nedir ve nasıl arama motoru uyumlu (SEO-friendly) yapılır, açıklayın.
  • “Promises” ve/veya onun polyfilleriyle alakalı deneyimler nedir?
  • "Callback"ler yerine “Promises” kullanmanın artıları ve eksileri nelerdir?
  • JavaScript’in derlendiği bir dilde JavaScript yazmanın avantajları ve dezavantajlarından bazıları nelerdir?
  • JavaScript kodunuzda hata ayıklarken (debugging) kullandığınız teknikler ve araçlar nelerdir?
  • What language constructions do you use for iterating over object properties and array items?
  • Kesilebilir (mutable) ve değişmez (immutable) nesneler arasındaki farkları açıklayın.
    • JavaScript’te değişmez (immutable) objeye bir örnek veriniz.
    • Değişmezliğin (immutability) artıları ve eksileri nedir?
    • Değişmezliği (immutability) kendi kodunuzda nasıl başarırsınız?
  • Senkron ve asenkron fonksiyonlar arasındaki farkları açıklayın.
  • Olay döngüsü (event loop) nedir?
    • Çağrı yığını (call stack) ve görev kuyruğu (task queue) arasındaki fark nedir?
  • foo, function foo() {} ve var foo = function() {} arasındaki farkları açıklayın.

Test Soruları:

  • Kodunuzu test etmenin avantajları ve dezavantajları nelerdir?
  • Kodunuzun işlevselliğini sınamak için hangi araçları kullanıyorsunuz?
  • Ünite testi (unit test) ile fonksiyonel/entgrasyon testi arasındaki fark nedir?
  • Kodu lint etme aracının (code style linting tool) kullanım amacı nedir?

Performans Soruları:

  • Kodunuzda performans problemleri bulmak için hangi araçları kullanıyorsunuz?
  • Websitenizin kaydırma (scrolling) performansını geliştirmenin yollarından bazıları nelerdir?
  • “Layout”, “painting” ve “compositing” terimleri arasındaki farkları açıklayınız.

Ağ Soruları:

  • Geleneksel olarak, neden site dosyalarını birden fazla domainden sunmak daha iyidir?
  • Web adresinin ilk adres girilirken sayfanın tam olarak yüklenmesine kadar ki işlemleri açıklayabilir misin?
  • “Long-Polling”, “Websockets” ve “Server-Sent Events” terimleri arasındaki farklar nelerdir?
  • Şu “request” ve "response header"ları açıklayın:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP metodları nelerdir? Bildiklerinizi listeleyin ve açıklayın.

Kodlama Soruları:

Soru:foo'nun değeri nedir?

var foo = 10 + '20';

Soru: Bu işi nasıl yaparsınız?

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

Soru: Bu ifadeden dönen sonuç nedir?

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

Question: window.foo değeri nedir?

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

Question: Aşağıdaki iki "alert"in çıktısı nedir?

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

Soru: foo.length değeri nedir?

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

Soru: foo.x değeri nedir?

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

Soru: Bu kodun çıktısı nedir?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Eğlenceli Sorular:

  • Şimdiye kadar içinde bulunduğun en havalı proje neydi?
  • Kullandığınız geliştirici araçları arasında, sevdikleriniz nelerdir?
  • Önyüz (front-end) komünitesinde etkilendiklerin kimler?
  • Evcil hayvanlarla alakalı herhangi bir projen var mı? Varsa ne tür bir proje?
  • Internet Explorer’ın senin için favori özelliği nedir?
  • Kahveni nasıl seversin?

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 +Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları ★ Front-end Job Interview Questions

Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları

Ön Yüz Yazılımcısı - Front-end Developer - Mülakat Soruları

Burada ön yüz yazılım -ya da front-end- iş başvurularınızda karşınıza çıkabilecek sorular yer almaktadır. Her sorunun iş başvurularınızda karşınıza çıkması garanti değil ancak ihtimali var. Ayrıca buradaki sorular sadece iş başvurusu yapanlar için değil, bu branşta kendini geliştirmeyi düşünenler için de kaynak niteliğindedir.

Not: Buradaki birçok sorunun ucunun açık olduğunu, bu sebeple vereceğiniz cevaba göre ilginç tartışmalara yol açabileceğini unutmayın.

İçindekiler

  1. Genel Sorular
  2. HTML Soruları
  3. CSS Soruları
  4. JS Soruları
  5. Test Soruları
  6. Performans Soruları
  7. Ağ Soruları
  8. Kodlama Soruları
  9. Eğlenceli Sorular

Dahil Olmak İçin

  1. Katkıda bulunanlar
  2. Nasıl katkıda bulunabilirim?
  3. Lisans

Genel Sorular:

  • Dün -ya da bu hafta- neler öğrendin?
  • Kod yazmanda seni cezbeden şey ne?
  • Deneyimlediğin son teknik meydan okuma / problem neydi ve onu nasıl çözdün?
  • Website yada web application hazırlarken UI, güvenlik, performans, SEO, sürdürülebilirlik veya teknoloji için nelere dikkat edersin?
  • Bize biraz geliştirme ortamından bahset. -İşletim Sistemi, Web Tarayıcı, Araçlar, Kod Editörü/IDE, vb.-
  • Haangi version kontrol sistemlerine aşinasın?
  • Web sayfasını oluştururken hangi adımları takip edersin?
  • Eğer 5 farklı stil dosyası varsa, bunları siteye entegre etmenin en iyi yolu nedir?
  • “Aşamalı geliştirme (progressive enhancement)” ile “kontrollü azalma (graceful degradation)” arasında ne fark vardır?
  • Web sitesindeki dosyaları nasıl optimize edersin?
  • Belli bir zamanda, tek bir alanadı üzerinden web tarayıcısı ne kadar kaynak indirebilir?
    • İstisnalar nelerdir?
  • Sayfa yüklenme hızını azaltmanın yollarından 3 tanesini söyleyebilir misin?
  • Yeni dahil olduğunuz bir projede, kodlama için Tab boşluk kullanılıyor ama siz Space ile boşluk bırakmayı tercih ediyorsunuz. Bu durumda ne yaparsınız?
  • Basit bir slayt/galeri sayfası oluşturun
  • Eğer bu yıl bir teknolojide en iyi olmak isteseydin, hangisini seçerdin?
  • Yazılım standartlarının öneminden bahseder misin?
  • FOUC nedir? FOUC’a nasıl engel olabilirsin?
  • Web adresinin ilk adres girilirken sayfanın tam olarak yüklenmesine kadar ki işlemleri açıklayabilir misin?
  • CSS animasyonlarının JavaScript animasyonlara göre artılarını ve eksiklerini açıklayabilir misin?
  • CORS ne anlama geliyor ve nasıl bir problemi çözüyor?

HTML Soruları:

  • doctypeın işlevi nedir?
  • Full standards mode, almost standards mode ve quirks mode arasındaki farklar nelerdir?
  • HTML ve XHTML arasındaki farkler nelerdir?
  • Sayfaların application/xhtml+xml olarak çalıştırılmasında herhangi bir sakınca var mıdır?
  • Sayfa içeriği çoklu dil olan siteyi nasıl sunabilirsin?
  • Çoklu dil olan sayfalarda tasarım veya kodlama olarak nelerden kaçılmalısın?
  • data- özelliği ne faydalar sağlar?
  • HTML5’i ‘open web platform’ olarak düşün. HTML5’in yapı taşları/temelleri nelerdir?
  • cookie, sessionStorage ve localStorage arasındaki farkları açıklayabilir misin?
  • <script>, <script async> ve <script defer> arasındaki farkları açıklayabilir misin?
  • CSS <link>lerin <head></head> arasında ve JS <script>lerinin </body> etiketinden önce olması niye genelde iyi bir fikirdir? Herhangi bir istisna biliyor musun?
  • Progressive rendering nedir?
  • Önceden farklı bir HTML templating dili kullandın mı?

CSS Soruları:

  • CSS’te class ve ID arasındaki farklar nelerdir?
  • “Resetting” ve “normalizing” CSS’ler arasındaki farklar nelerdir? Hangisini kullanmamız gerekir, neden?
  • Floats özelliğinin ne olduğunu ve nasıl çalıştığından bahsedin.
  • z-index özelliğinin ne olduğunu ve nasıl çalıştığından bahsedin.
  • BFC (Block Formatting Context)'nin ne olduğunu ve nasıl çalıştığından bahsedin.
  • Çeşitli ‘clearing’ teknikleri nelerdir ve hangi teknik hangi içerik için uygundur?
  • CSS Sprites özelliğini ve sayfanıza veya web uygulamanıza nasıl entegre edeceğinizi anlatın.
  • En favori imaj yerini değiştirme (image replacement) tekniği sizce hangisidir ve ne gibi durumlarda kullanırsınız?
  • Browser tabanlı (browser-specific) stil problemlerini nasıl çözersiniz?
  • Özellik kısıtlamalı (feature-constrained) tarayıcılar için websitenizi nasıl hazırlarsınız?
    • Hangi teknikleri/işlemleri kullanırsınız?
  • İçerikleri görsel olarak gizlemek hangi yollar bulunmakta? (İçerik sadece ekran okuyucular (screen readers) için gözükecek.)
  • Şimdiye kadar grid sistemi kullandınız mı? Eğer kullandıysanız, ne tercih edersiniz?
  • Şimdiye kadar ‘media queries’ veya mobil bazlı CSS/tasarım kullanıdınız mı?
  • SVG stillendirme hakkında deneyiminiz var mı?
  • Yazdırmak için (print) sitenizi ne şekilde en uygun hale getirdiniz?
  • Kaliteli CSS yazmak için ‘işte bu!’ dediğiniz şeyler nelerdir?
  • CSS 'preprocessor’ler kullanmanın artı-eksileri nelerdir? (SASS, Compass, Stylus, LESS)
    • Şimdiye kadar kullandıklarınızda en çok beğendiğiniz/beğenmediğiniz özellikler nelerdi?
  • Standart fontları kullanmayan web tasarımlarını nasıl sayfanıze entegre ediyorsunuz?
  • Tarayıcılar HTML elementlerin CSS seçicilerle (selector) eşleştiğini nasıl algılıyor, açıklar mısınız?
  • Sözde elementleri (pseudo-elements) ve ne için kullandıklarını açıklayın.
  • ‘box model’ konusunu bildiğiniz kadar açıklayın ve tasarımınızı farklı bir ‘box model’ ile göstermek istediğinizde CSS tarafında tarayıcıya ne belirtmeniz gerekir?
  • * { box-sizing: border-box; } ne yapar? Avantajları nelerdir?
  • ‘Display’ özelliğinin aldığı değerleri hatırladığınız kadar sayın.
  • ‘inline’ ile ‘inline-block’ arasındaki farklılıklar nelerdir?
  • ‘relative’, ‘fixed’, ‘absolute’ ve ‘static’ konumlandırılmış elementlerin farkı nedir?
  • CSS kelimesindeki C harfi "Cascading"in (basamaklı) kısaltmasıdır. Yönlendirilen stillerde öncelikler nasıl belirlenir (birkaç örnekle birlikte)? Bunu nasıl kendi avantajınıza göre kullanabilirsiniz?
  • Kullanmış olduğunuz, daha tanınmayan - lokal CSS çatılar (frameworks) var mı? Bunları nasıl değiştirmek / geliştirmek isterdiniz?
  • Yeni CSS Flebox veya Grid özellikleriyle deneyip bir şeyler yaptınız mı?
  • Responsive tasarımın adaptive tasarımdan farkı nedir?
  • Hiç retina grafiklerle çalıştınız mı? Eğer çalıştıysanız ne zaman ve hangi teknikleri kullandınız?
  • translate() yerine absolute positioning, veya tam tersini kullanmak için bir sebebiniz olabilir mi? Ve neden?

JS Soruları:

  • ‘Event delegation’ özelliğini anlatın.
  • JavaScript’te this nasıl çalışıyor?
  • ‘prototypal inheritance’ nasıl çalışır?
  • AMD ile CommonJS’in farkı nelerdir?
  • IIFE olarak neden bu fonksiyonun çalışmadığını açıklayın: function foo(){ }();.
    • IIFE olarak çalışması için ne yapmak gerekiyor?
  • null, undefined ve undeclared arasında ne farklar var?
    • Bu değerleri kontrol ederken neler yapmalıyız?
  • ‘Closure’ nedir, ve nasıl/neden kullanırız?
  • Anonim fonksiyonları kullanma durumları nelerdir?
  • Kodunuzu nasıl organize edersiniz? (module pattern, classical inheritance?)
  • host objects ve native objects arasında ne fark var?
  • function Person(){}, var person = Person(), ve var person = new Person() arasındaki farklar nelerdir?
  • .call ve .apply arasındaki fark nedir?
  • Function.prototype.bind özelliğinin ne olduğunu açıklayınız.
  • undefined ve null arasındaki fark nedir?
  • document.write() fonksiyonunu ne zaman kullanmalıyız?
  • Özellik tespiti (feature detection), özellik çıkarım (feature inference) ve UA string kullanımı arasındaki farklar nelerdir?
  • AJAX’ı olabildiğince detaylı şekilde açıklayın.
  • Ajax kullanmanın avantajları ve dezavantajları nelerdir?
  • JSONP nasıl çalışır? (ve neden tam olarak AJAX olmadığını da açıklayınız.)
  • JavaScript ‘template’ yapısını hiç kullandınız mı?
    • Eğer kullandıysanız, Hangi 'library’leri kullandınız? (Mustache.js, Handlebars, vb.)
  • “Hoisting” özelliğini açıklayın.
  • ‘Event bubbling’ özelliğini açıklayın.
  • “Attribute” ve “property” arasındaki farklar nelerdir?
  • JavaScript objeleri genişletmek neden iyi fikir değildir?
  • “document load event” ile “document DOMContentLoaded event” arasındaki farklar nelerdir?
  • == ve === arasında ne fark vardır?
  • JavaScript için ‘same-origin policy’ konusunu açıklayın.
  • Çalışacak şekilde kodu yazın:
[1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5]
  • Neden ‘Ternary expression’ olarak çağrılmaktadır? “Ternary” kelimesi neyi belirtmektedir?
  • "use strict"; nedir? Bunu kullanmanın artı/eksileri nelerdir?
  • 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
  • Websitenin genel skopundan ayrılmak ve dokunmamak neden genelde iyi bir fikirdir?
  • Neden load gibi bir event kullanırsınız? Bunun dezavantajları var mı? Bildiğiniz alternatifleri var mı ve neden onları kullanıyorsunuz?
  • Tek sayfa uygulama (single page app) nedir ve nasıl arama motoru uyumlu (SEO-friendly) yapılır, açıklayın.
  • “Promises” ve/veya onun polyfilleriyle alakalı deneyimler nedir?
  • "Callback"ler yerine “Promises” kullanmanın artıları ve eksileri nelerdir?
  • JavaScript’in derlendiği bir dilde JavaScript yazmanın avantajları ve dezavantajlarından bazıları nelerdir?
  • JavaScript kodunuzda hata ayıklarken (debugging) kullandığınız teknikler ve araçlar nelerdir?
  • What language constructions do you use for iterating over object properties and array items?
  • Kesilebilir (mutable) ve değişmez (immutable) nesneler arasındaki farkları açıklayın.
    • JavaScript’te değişmez (immutable) objeye bir örnek veriniz.
    • Değişmezliğin (immutability) artıları ve eksileri nedir?
    • Değişmezliği (immutability) kendi kodunuzda nasıl başarırsınız?
  • Senkron ve asenkron fonksiyonlar arasındaki farkları açıklayın.
  • Olay döngüsü (event loop) nedir?
    • Çağrı yığını (call stack) ve görev kuyruğu (task queue) arasındaki fark nedir?
  • foo, function foo() {} ve var foo = function() {} arasındaki farkları açıklayın.

Test Soruları:

  • Kodunuzu test etmenin avantajları ve dezavantajları nelerdir?
  • Kodunuzun işlevselliğini sınamak için hangi araçları kullanıyorsunuz?
  • Ünite testi (unit test) ile fonksiyonel/entgrasyon testi arasındaki fark nedir?
  • Kodu lint etme aracının (code style linting tool) kullanım amacı nedir?

Performans Soruları:

  • Kodunuzda performans problemleri bulmak için hangi araçları kullanıyorsunuz?
  • Websitenizin kaydırma (scrolling) performansını geliştirmenin yollarından bazıları nelerdir?
  • “Layout”, “painting” ve “compositing” terimleri arasındaki farkları açıklayınız.

Ağ Soruları:

  • Geleneksel olarak, neden site dosyalarını birden fazla domainden sunmak daha iyidir?
  • Web adresinin ilk adres girilirken sayfanın tam olarak yüklenmesine kadar ki işlemleri açıklayabilir misin?
  • “Long-Polling”, “Websockets” ve “Server-Sent Events” terimleri arasındaki farklar nelerdir?
  • Şu “request” ve "response header"ları açıklayın:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP metodları nelerdir? Bildiklerinizi listeleyin ve açıklayın.

Kodlama Soruları:

Soru:foo'nun değeri nedir?

var foo = 10 + '20';

Soru: Bu işi nasıl yaparsınız?

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

Soru: Bu ifadeden dönen sonuç nedir?

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

Question: window.foo değeri nedir?

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

Question: Aşağıdaki iki "alert"in çıktısı nedir?

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

Soru: foo.length değeri nedir?

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

Soru: foo.x değeri nedir?

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

Soru: Bu kodun çıktısı nedir?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Eğlenceli Sorular:

  • Şimdiye kadar içinde bulunduğun en havalı proje neydi?
  • Kullandığınız geliştirici araçları arasında, sevdikleriniz nelerdir?
  • Önyüz (front-end) komünitesinde etkilendiklerin kimler?
  • Evcil hayvanlarla alakalı herhangi bir projen var mı? Varsa ne tür bir proje?
  • Internet Explorer’ın senin için favori özelliği nedir?
  • Kahveni nasıl seversin?

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/_site/translations/ukrainian/index.html b/_site/translations/ukrainian/index.html index 4c60ba6..0cde5a2 100644 --- a/_site/translations/ukrainian/index.html +++ b/_site/translations/ukrainian/index.html @@ -1 +1 @@ -Питання кандидату на посаду front-end розробника ★ Front-end Job Interview Questions

Питання кандидату на посаду front-end розробника

Питання кандидату на посаду front-end розробника

Примітка: Цей репозиторій містить підбірку питань, які можуть бути використані на співбесідах на посаду front-end розробника. Тут пропонуються лише ідеї, не варто задавати всі запитання відразу (інакше однієї години точно не вистачить).
Також, майте на увазі, що багато питань не потребують однозначної короткої відповіді, а лише допомагають завести бесіду на ту чи іншу тему (даючи змогу кандидату показати себе в усій красі).

Зміст

  1. Первинні автори
  2. Загальні запитання
  3. Запитання по HTML
  4. Запитання по JavaScript
  5. Приклади коду на JavaScript
  6. Запитання по jQuery
  7. Запитання по CSS
  8. “Світська бесіда”

⬆ Первинні автори:

⬆ Загальні запитання:

  • Чи користуєтесь Ви Твіттером?
    • Якщо так, то хто присутній в Вашій стрічці?
  • Кого зі світових front-end розробників Ви знаєте?
    • А українських чи російських front-end’щиків?
  • Чи є у Вас аккаунт на GitHub?
    • Якщо так, то за якими цікавими проектами Ви стежите?
  • Які блоги Ви читаєте?
  • Які системи контролю версій Вам доводилось використовувати?
  • Розкажіть про своє середовище розробки (ОС, редактор, браузер(и), інші інструменти)
  • Опишіть послідовність Ваших дій, коли ви створюєте нову Web-сторінку
  • Чи можете ви пояснити у чому різниця між progressive enhancement і graceful degradation?
    • Бонус, якщо кандидат також скаже про feature detection (визначення можливостей браузера)
  • Поясніть, що означає поняття “Семантична розмітка”
  • Який Ваш основний браузер для розробки і якими інструментами в ньому Ви користуєтесь?
  • Як можна оптимізувати завантаження зовнішніх ресурсів на сторінці?
    • Комбінація із потенційних рішень:
      • Конкатенація
      • Мініфікація
      • Використання CDN
      • Кешування
      • тощо
  • Яка перевага в підвантаженні із зовнішніх ресурсів з декількох доменів?
    • Скільки ресурсів одночасно браузер може завантажувати з одного домена?
  • Назвіть три засоби зменшення часу завантаження сторінки (сприйманого або реального)
  • Якщо Ви прийшли на проект, де для форматуровання використовується табуляція, а Ви звикли використовувати пробіли, як Ви вчинете?
    • Запропонуєте використовувати EditorConfig (http://editorconfig.org)
    • Залишитеся вірним своїм звичкам
    • Виконаєте команду :retab!
  • Чи користуєтеся Ви засобами для прискорення написання коду (сніппети, Emmet)?
  • Чи знайомі Ви зі шаблонізаторами (Smarty, HAML, т.д.)
  • Реалізуйте примітивне слайдшоу
    • Бонус, якщо Ви зробите це без використання JS
  • Які інструменти Ви використовуєте для тестування продуктивності коду?
  • Якщо б у Вас була можливість освоїти нову технологію в цьому році, що б це було?
  • Поясніть важливість стандартів і комітетів по стандартам
  • Що таке FOUC (Flash Of Unstyled Content)? Як його уникнути?

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

  • Для чого потрібен doctype і скільки різновидів Ви можете назвати?
  • В чому різниця між standards mode і quirks mode?
  • Які обмеження накладають стандарти XHTML?
    • Чи можуть виникнути проблеми при подачі сторінок із типом application/xhtml+xml?
  • Як слід оформляти сторінку, на якій контент може бути на різних мовах?
    • Що потрібно мати на увазі при розробці багатомовних сайтів?
  • Чи можна використовувати синтаксис XHTML в HTML5?
  • Як використовувати XML в HTML5?
  • Чим корисні data- атрибути?
  • Які box-моделі є в HTML4 і чи є відмінності в HTML5?
  • Якщо розглядати HTML5 як відкриту web-платформу: на чому вона базується, з яких компонентів складається?
  • Поясніть різницю між cookies, sessionStorage і localStorage.
  • Чи знайомі з підводними каменями верстки поштових шаблонів?
  • Яка різниця між GET іPOST?

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

  • Якими js-бібліотеками Ви користувалися?
  • Ви коли-небудь заглядали в вихідний код бібліотек / фреймворків, якими користувалися?
  • Чим JavaScript відрізняється від Java?
  • Що-таке хеш-таблиця?
  • Що таке невизначені (undefined) і неоголошені (undeclared) змінні?
  • Що таке замикання і як / для чого його використовують?
    • На Вашу думку, як слід їх використовувати?
  • Де зазвичай використовуються анонімні функції?
  • Поясніть “JavaScript module pattern” і де він (патерн) застосовується
    • Бонус, якщо згадана чистота глобального простору імен
    • Що, якщо Ваш модуль не укладено в простір імен?
  • Як Ви організуєте свій код? (module pattern, наслідування)
  • У чому різниця між host-об’єктами і нативними об’єктами?
  • У чому різниця між останніми двома рядками:
function Person(){}
var person = Person()
var person = new Person()
  • У чому різниця між .call і.apply?
  • Що робить і для чого потрібен метод Function.prototype.bind?
  • Коли Ви оптимізуєте свій код?
  • Поясніть, як працює наслідування в JavaScript?
  • Де досі використовується document.write ()?
    • У більшості згенерованих банерів, хоча так робити не рекомендується
  • У чому різниця між feature detection (визначення можливостей браузера), feature inference (припущення можливостей) і аналізом рядку user-agent?
  • Розкажіть про AJAX якомога детальніше
  • Поясніть, як працює JSONP (і чому це не справжній AJAX)
  • Чи використовували Ви коли-небудь шаблонізації на JavaScript?
    • Якщо так, які бібліотеки використовували? (Mustache.js, Handlebars etc.)
  • Поясніть, що таке “hoisting”
  • Поясніть event bubbling
  • У чому різниця між “атрибутом” (attribute) і “властивістю” (property)?
  • Чому не слід розширювати нативні JavaScript об’єкти?
  • Коли слід розширювати нативні JavaScript об’єкти?
  • У чому різниця між подіями document load і document ready?
  • У чому різниця між == і ===?
  • Як отримати параметри з URL’а поточного вікна?
  • Поясніть same-origin policy в контексті JavaScript
  • Розкажіть про event delegation
  • Які Ви знаєте патерни організації наслідування в JavaScript?
  • Зробіть так, щоб цей код працював:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Опишіть принцип мемоізаціі (уникнення повторних обчислень) в JavaScript
  • Чому тернарний оператор так називається?
  • Що таке тернарність функції?
  • Що робить рядок " use strict ";? Які переваги та недоліки від її використання?

⬆ Приклади на JavaScript

~~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 був хибним, інакше змінна збереже своє початкове значення),

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

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

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

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

  • Розкажіть про “chaining”.
  • Розкажіть про “deferreds”.
  • Які Ви знаєте прийоми оптимізації коду, що використовує jQuery?
  • Що робить .end()?
  • Як додати простір імен до обробника подій? Для чого це потрібно?
  • Назвіть 4 різних види аргументів, які приймає функція jQuery()?
    • Селектор (рядок), HTML (рядок), Callback (функція), HTMLElement, об’єкт, масив, масив елементів, об’єкт jQuery тощо.
  • Що таке черга ефектів (fx queue)?
  • В чому різниця між .get(), [], і .eq()?
  • В чому різниця між .bind(), .live(), і .delegate()?
  • В чому різниця між $ і $.fn? Що таке $.fn взагалі?
  • Оптимізуйте даний селектор:
$(".foo div#bar:eq(0)")

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

  • Що таке “reset” CSS і для чого він потрібен?
  • Поясніть, що таке плаваючі елементи (floats) і як вони працюють?
  • Які ви знаєте методи заборони обтікання (clearing) і де які застосовуються?
  • Що таке CSS спрайт? Як вони реалізуються на сторінці або сайті?
  • Які Ваші улюблені методи підміни тексту картинкою (image replacement) і коли Ви їх використовуєте?
  • CSS property hacks, умовне підключення .css файлів…
  • Як Ви забезпечуєте відображення сторінок в старих / обмежених браузерах?
    • Які прийоми / процеси Ви при цьому використовуєте?
  • Якими способами можна візуально приховати елемент (залишивши його доступним для екранного диктора, екранного зчитувача)?
  • Ви коли-небудь використовували сіткову верстку (grid system, grid design)? Якщо так, яка Ваша улюблена?
  • Чи доводилося Вам використовувати або реалізовувати media queries або верстку під мобільні пристрої?
  • Чи доводилося Вам стилізувати SVG?
  • Як оптимізувати сторінки для друку?
  • Які є підводні камені в оптимізації продуктивності CSS?
  • Ви використовуєте CSS препроцесори? (SASS, Compass, Bourbon, Stylus, LESS)
    • Якщо так, розкажіть, що Вам в них подобається і не подобається?
  • Як Ви зверстаєте макет, який використовує нестандартні шрифти?
    • Webfonts (сервіси на кшталт Google Webfonts, Typekit, Fontsquirrel etc.)
  • Розкажіть, як браузер визначає, на які елементи накладати CSS стилі?
  • Чи доводилося стикатися з Retina-дисплеями?
  • Чи чули про систему БЕМ (Блок-Елемент-Модифікатор)?
    • Якщо так, то в чому її суть? Розкажіть про систему нотифікації селектор.

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

  • Найкрутіше, що Ви коли небудь робили і чим пишаєтесь?
  • Чи знаєте Ви секретний жест HTML5-банди?
  • (неперекладаємий гумор) Are you now, or have you ever been, on a boat.
  • Що Вам найбільше подобаються у Ваших інструментах розробника?
  • У Вас є якісь особисті проекти?
  • Візьміть аркуш паперу і напишіть в стовпчик букви A B C D E. Тепер відсортуйте стовпчик в алфавітному порядку за спаданням, не написавши жодного рядка коду.
    • Засічіть, через скільки часу кандидат переверне аркуш
  • Пірат або ніндзя?
    • Бонус за комбінацію. Аргументовану. +2 за зомбі-пірат-ніндзя-мавпу
  • Чим би Ви займалися, якщо не Web-розробкою?
  • Яка Ваша улюблена “фішка” Internet Explorer?
  • Закінчіть речення: Brendan Eich та Doug Crockford є __________ мови JavaScript.
  • jQuery: хороша бібліотека або велика бібліотека? Тема для дискусії…
Edit this page
\ No newline at end of file +Питання кандидату на посаду front-end розробника ★ Front-end Job Interview Questions

Питання кандидату на посаду front-end розробника

Питання кандидату на посаду front-end розробника

Примітка: Цей репозиторій містить підбірку питань, які можуть бути використані на співбесідах на посаду front-end розробника. Тут пропонуються лише ідеї, не варто задавати всі запитання відразу (інакше однієї години точно не вистачить).
Також, майте на увазі, що багато питань не потребують однозначної короткої відповіді, а лише допомагають завести бесіду на ту чи іншу тему (даючи змогу кандидату показати себе в усій красі).

Зміст

  1. Первинні автори
  2. Загальні запитання
  3. Запитання по HTML
  4. Запитання по JavaScript
  5. Приклади коду на JavaScript
  6. Запитання по jQuery
  7. Запитання по CSS
  8. “Світська бесіда”

⬆ Первинні автори:

⬆ Загальні запитання:

  • Чи користуєтесь Ви Твіттером?
    • Якщо так, то хто присутній в Вашій стрічці?
  • Кого зі світових front-end розробників Ви знаєте?
    • А українських чи російських front-end’щиків?
  • Чи є у Вас аккаунт на GitHub?
    • Якщо так, то за якими цікавими проектами Ви стежите?
  • Які блоги Ви читаєте?
  • Які системи контролю версій Вам доводилось використовувати?
  • Розкажіть про своє середовище розробки (ОС, редактор, браузер(и), інші інструменти)
  • Опишіть послідовність Ваших дій, коли ви створюєте нову Web-сторінку
  • Чи можете ви пояснити у чому різниця між progressive enhancement і graceful degradation?
    • Бонус, якщо кандидат також скаже про feature detection (визначення можливостей браузера)
  • Поясніть, що означає поняття “Семантична розмітка”
  • Який Ваш основний браузер для розробки і якими інструментами в ньому Ви користуєтесь?
  • Як можна оптимізувати завантаження зовнішніх ресурсів на сторінці?
    • Комбінація із потенційних рішень:
      • Конкатенація
      • Мініфікація
      • Використання CDN
      • Кешування
      • тощо
  • Яка перевага в підвантаженні із зовнішніх ресурсів з декількох доменів?
    • Скільки ресурсів одночасно браузер може завантажувати з одного домена?
  • Назвіть три засоби зменшення часу завантаження сторінки (сприйманого або реального)
  • Якщо Ви прийшли на проект, де для форматуровання використовується табуляція, а Ви звикли використовувати пробіли, як Ви вчинете?
    • Запропонуєте використовувати EditorConfig (http://editorconfig.org)
    • Залишитеся вірним своїм звичкам
    • Виконаєте команду :retab!
  • Чи користуєтеся Ви засобами для прискорення написання коду (сніппети, Emmet)?
  • Чи знайомі Ви зі шаблонізаторами (Smarty, HAML, т.д.)
  • Реалізуйте примітивне слайдшоу
    • Бонус, якщо Ви зробите це без використання JS
  • Які інструменти Ви використовуєте для тестування продуктивності коду?
  • Якщо б у Вас була можливість освоїти нову технологію в цьому році, що б це було?
  • Поясніть важливість стандартів і комітетів по стандартам
  • Що таке FOUC (Flash Of Unstyled Content)? Як його уникнути?

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

  • Для чого потрібен doctype і скільки різновидів Ви можете назвати?
  • В чому різниця між standards mode і quirks mode?
  • Які обмеження накладають стандарти XHTML?
    • Чи можуть виникнути проблеми при подачі сторінок із типом application/xhtml+xml?
  • Як слід оформляти сторінку, на якій контент може бути на різних мовах?
    • Що потрібно мати на увазі при розробці багатомовних сайтів?
  • Чи можна використовувати синтаксис XHTML в HTML5?
  • Як використовувати XML в HTML5?
  • Чим корисні data- атрибути?
  • Які box-моделі є в HTML4 і чи є відмінності в HTML5?
  • Якщо розглядати HTML5 як відкриту web-платформу: на чому вона базується, з яких компонентів складається?
  • Поясніть різницю між cookies, sessionStorage і localStorage.
  • Чи знайомі з підводними каменями верстки поштових шаблонів?
  • Яка різниця між GET іPOST?

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

  • Якими js-бібліотеками Ви користувалися?
  • Ви коли-небудь заглядали в вихідний код бібліотек / фреймворків, якими користувалися?
  • Чим JavaScript відрізняється від Java?
  • Що-таке хеш-таблиця?
  • Що таке невизначені (undefined) і неоголошені (undeclared) змінні?
  • Що таке замикання і як / для чого його використовують?
    • На Вашу думку, як слід їх використовувати?
  • Де зазвичай використовуються анонімні функції?
  • Поясніть “JavaScript module pattern” і де він (патерн) застосовується
    • Бонус, якщо згадана чистота глобального простору імен
    • Що, якщо Ваш модуль не укладено в простір імен?
  • Як Ви організуєте свій код? (module pattern, наслідування)
  • У чому різниця між host-об’єктами і нативними об’єктами?
  • У чому різниця між останніми двома рядками:
function Person(){}
var person = Person()
var person = new Person()
  • У чому різниця між .call і.apply?
  • Що робить і для чого потрібен метод Function.prototype.bind?
  • Коли Ви оптимізуєте свій код?
  • Поясніть, як працює наслідування в JavaScript?
  • Де досі використовується document.write ()?
    • У більшості згенерованих банерів, хоча так робити не рекомендується
  • У чому різниця між feature detection (визначення можливостей браузера), feature inference (припущення можливостей) і аналізом рядку user-agent?
  • Розкажіть про AJAX якомога детальніше
  • Поясніть, як працює JSONP (і чому це не справжній AJAX)
  • Чи використовували Ви коли-небудь шаблонізації на JavaScript?
    • Якщо так, які бібліотеки використовували? (Mustache.js, Handlebars etc.)
  • Поясніть, що таке “hoisting”
  • Поясніть event bubbling
  • У чому різниця між “атрибутом” (attribute) і “властивістю” (property)?
  • Чому не слід розширювати нативні JavaScript об’єкти?
  • Коли слід розширювати нативні JavaScript об’єкти?
  • У чому різниця між подіями document load і document ready?
  • У чому різниця між == і ===?
  • Як отримати параметри з URL’а поточного вікна?
  • Поясніть same-origin policy в контексті JavaScript
  • Розкажіть про event delegation
  • Які Ви знаєте патерни організації наслідування в JavaScript?
  • Зробіть так, щоб цей код працював:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Опишіть принцип мемоізаціі (уникнення повторних обчислень) в JavaScript
  • Чому тернарний оператор так називається?
  • Що таке тернарність функції?
  • Що робить рядок " use strict ";? Які переваги та недоліки від її використання?

⬆ Приклади на JavaScript

~~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 був хибним, інакше змінна збереже своє початкове значення),

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

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

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

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

  • Розкажіть про “chaining”.
  • Розкажіть про “deferreds”.
  • Які Ви знаєте прийоми оптимізації коду, що використовує jQuery?
  • Що робить .end()?
  • Як додати простір імен до обробника подій? Для чого це потрібно?
  • Назвіть 4 різних види аргументів, які приймає функція jQuery()?
    • Селектор (рядок), HTML (рядок), Callback (функція), HTMLElement, об’єкт, масив, масив елементів, об’єкт jQuery тощо.
  • Що таке черга ефектів (fx queue)?
  • В чому різниця між .get(), [], і .eq()?
  • В чому різниця між .bind(), .live(), і .delegate()?
  • В чому різниця між $ і $.fn? Що таке $.fn взагалі?
  • Оптимізуйте даний селектор:
$(".foo div#bar:eq(0)")

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

  • Що таке “reset” CSS і для чого він потрібен?
  • Поясніть, що таке плаваючі елементи (floats) і як вони працюють?
  • Які ви знаєте методи заборони обтікання (clearing) і де які застосовуються?
  • Що таке CSS спрайт? Як вони реалізуються на сторінці або сайті?
  • Які Ваші улюблені методи підміни тексту картинкою (image replacement) і коли Ви їх використовуєте?
  • CSS property hacks, умовне підключення .css файлів…
  • Як Ви забезпечуєте відображення сторінок в старих / обмежених браузерах?
    • Які прийоми / процеси Ви при цьому використовуєте?
  • Якими способами можна візуально приховати елемент (залишивши його доступним для екранного диктора, екранного зчитувача)?
  • Ви коли-небудь використовували сіткову верстку (grid system, grid design)? Якщо так, яка Ваша улюблена?
  • Чи доводилося Вам використовувати або реалізовувати media queries або верстку під мобільні пристрої?
  • Чи доводилося Вам стилізувати SVG?
  • Як оптимізувати сторінки для друку?
  • Які є підводні камені в оптимізації продуктивності CSS?
  • Ви використовуєте CSS препроцесори? (SASS, Compass, Bourbon, Stylus, LESS)
    • Якщо так, розкажіть, що Вам в них подобається і не подобається?
  • Як Ви зверстаєте макет, який використовує нестандартні шрифти?
    • Webfonts (сервіси на кшталт Google Webfonts, Typekit, Fontsquirrel etc.)
  • Розкажіть, як браузер визначає, на які елементи накладати CSS стилі?
  • Чи доводилося стикатися з Retina-дисплеями?
  • Чи чули про систему БЕМ (Блок-Елемент-Модифікатор)?
    • Якщо так, то в чому її суть? Розкажіть про систему нотифікації селектор.

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

  • Найкрутіше, що Ви коли небудь робили і чим пишаєтесь?
  • Чи знаєте Ви секретний жест HTML5-банди?
  • (неперекладаємий гумор) Are you now, or have you ever been, on a boat.
  • Що Вам найбільше подобаються у Ваших інструментах розробника?
  • У Вас є якісь особисті проекти?
  • Візьміть аркуш паперу і напишіть в стовпчик букви A B C D E. Тепер відсортуйте стовпчик в алфавітному порядку за спаданням, не написавши жодного рядка коду.
    • Засічіть, через скільки часу кандидат переверне аркуш
  • Пірат або ніндзя?
    • Бонус за комбінацію. Аргументовану. +2 за зомбі-пірат-ніндзя-мавпу
  • Чим би Ви займалися, якщо не Web-розробкою?
  • Яка Ваша улюблена “фішка” Internet Explorer?
  • Закінчіть речення: Brendan Eich та Doug Crockford є __________ мови JavaScript.
  • jQuery: хороша бібліотека або велика бібліотека? Тема для дискусії…
Edit this page
\ No newline at end of file diff --git a/_site/translations/vietnamese/index.html b/_site/translations/vietnamese/index.html index d88a68e..9ef13e2 100644 --- a/_site/translations/vietnamese/index.html +++ b/_site/translations/vietnamese/index.html @@ -1 +1 @@ -Những Câu Hỏi Phỏng Vấn Lập Trình Viên Front-end ★ Front-end Job Interview Questions

Những Câu Hỏi Phỏng Vấn Lập Trình Viên Front-end

Những Câu Hỏi Phỏng Vấn Lập Trình Viên Front-end

Tập tin này chứa một số câu hỏi phỏng vấn lập trình viên front-end, có thể được sử dụng khi kiểm tra các ứng viên tiềm năng. Không khuyến khích sử dụng tất cả các câu hỏi ở đây trên cùng một ứng cử viên (sẽ mất hàng giờ đồng hồ). Chọn một vài mục từ danh sách này sẽ giúp bạn kiểm tra những kỹ năng mà bạn yêu cầu ở ứng viên đó.

Lưu ý: Hãy nhớ rằng nhiều câu trong đây là những câu hỏi kết thúc mở và có thể dẫn đến vài cuộc thảo luận thú vị cung cấp cho bạn nhiều thông tin về khả năng của một người hơn là một câu trả lời thẳng thắn.

Mục lục

  1. Các câu hỏi chung
  2. Các câu hỏi về HTML
  3. Các câu hỏi về CSS
  4. Các câu hỏi về JavaScript
  5. Các câu hỏi về Kiểm thử (Testing)
  6. Các câu hỏi về Hiệu suất (Performance)
  7. Các câu hỏi về Mạng (Network)
  8. Các câu hỏi về việc viết code
  9. Các câu hỏi vui

Tham gia đóng góp

  1. Những người đóng góp
  2. Làm sao để đóng góp
  3. Giấy phép

Các câu hỏi chung:

  • Bạn đã học được gì trong ngày hôm qua/tuần này??
  • Điều gì về lập trình làm bạn hứng thú?
  • Một thử thách về mặt kĩ thuật bạn đã trải qua gần đây là gì và bạn đã giải quyết nó như thế nào?
  • Bạn cân nhắc những Giao diện người dùng (UI), Vấn đề bảo mật (Security), Hiệu suất (Performance), Khả năng tối ưu cho các bộ máy tìm kiếm (SEO), Khả năng bảo trì (Maintainability) hay Công nghệ (Technology) nào khi xây dựng một ứng dụng/trang web?
  • Hãy nói về môi trường lập trình mà bạn muốn.
  • Những hệ thống quản lý phiên bản (version control systems) nào mà bạn đã sử dụng và cảm thấy quen thuộc?
  • Bạn có thể trình bày mạch làm việc (workflow) của bạn khi bạn tạo một trang web không?
  • Nếu bạn có 5 stylesheet khác nhau, bạn sẽ tích hợp chúng vào trang như thế nào là tốt nhất?
  • Bạn có thể trình bày sự khác nhau giữa progressive enhancement và graceful degradation không?
  • Bạn sẽ tối ưu các tài nguyên (assets/resources) của một website như thế nào?
  • Một trình duyệt sẽ tải bao nhiêu tài nguyên cùng một lúc từ một tên miền (domain) cho trước?
    • Các exception là gì?
  • Nêu 3 cách để giảm tải trang web (perceived hoặc thời gian tải thực tế (actual load time)).
  • Nếu bạn tham gia vào một dự án và họ xài nút Tab trong khi bạn sử dụng nút dấu cách (spaces), bạn sẽ làm gì?
  • Trình bày cách bạn sẽ làm một trang slideshow đơn giản.
  • Nếu bạn có thể chuyên sâu về một công nghệ (technology) trong năm nay thì nó sẽ là công nghệ gì?
  • Giải thích tầm quan trọng của các standards và standards bodies.
  • Flash of Unstyled Content là gì? Bạn tránh FOUC như thế nào?
  • Giải thích ARIA và screenreaders là gì, và làm thế nào để làm cho một trang web có thể truy cập được.
  • Giải thích một vài ưu và khuyết điểm của CSS animations so với JavaScript animations.
  • CORS là từ viết tắt của cái gì và nó đề cập đến vấn đề nào?

Các câu hỏi về HTML:

  • Một doctype làm cái gì?
  • Sự khác nhau giữa chế độ full standards, chế độ almost standards và chế độ quirks?
  • Sự khác nhau giữa HTML và XHTML là gì?
  • Có vấn đề nào không khi cung cấp (serving) các trang theo kiểu application/xhtml+xml?
  • Bạn cung cấp một trang web có nội dung được viết bằng nhiều ngôn ngữ như thế nào?
  • Bạn phải cảnh giác những điều gì khi thiết kế hoặc phát triển các trang web đa ngôn ngữ?
  • Những thuộc tính data- có lợi cho cái gì?
  • Hãy xem HTML5 như một nền tảng web mở (open web platform). Những building blocks của HTML5 là gì?
  • Trình bày sự khác nhau giữa một cookie, sessionStorage và localStorage.
  • Trình bày sự khác nhau giữa <script>, <script async> và <script defer>.
  • Tại sao việc đặt các thẻ (tag) <link> CSS giữa 2 thẻ <head></head> và các thẻ <script> JS ngay trước thẻ </body> về cơ bản là một ý tưởng tốt? Bạn có biết những trường hợp ngoại lệ nào khác không?
  • Progressive rendering là gì?
  • Tại sao bạn sẽ sử dụng thuộc tính srcset trong 1 tag img? Giải thích quá trình mà trình duyệt sẽ sử dụng khi phân tích nội dung của thuộc tính này.
  • Trước đây bạn đã bao giờ sử dụng những ngôn ngữ template HTML nào khác chưa?

Các câu hỏi về CSS:

  • Điểm khác biệt giữa class và ID trong CSS là gì?
  • Sự khác nhau giữa “resetting” và “normalizing” CSS là gì? Bạn sẽ chọn cái nào, và tại sao?
  • Trình bày về Floats và cách chúng hoạt động.
  • Trình bày về z-index và làm thế nào để nội dung stack với nhau được định hình.
  • Trình bày về BFC (Block Formatting Context) và cách nó hoạt động.
  • Các kĩ thuật clearing khác nhau là những kĩ thuật nào và phù hợp với hoàn cảnh nào?
  • Giải thích về CSS sprites, và làm thế nào để bạn thực hiện chúng trên một trang web.
  • Những kĩ thuật thay thế hình ảnh nào mà bạn thích và bạn sử dụng từng kĩ thuật đó khi nào?
  • Bạn sẽ tiếp cận như thế nào để khắc phục các vấn đề về trình bày trên một trình duyệt cụ thể?
  • Bạn sẽ cung cấp các trang của bạn trên các trình duyệt hạn chế tính năng như thế nào?
    • Bạn sẽ sử dụng kĩ thuật hay quy trình nào?
  • Những cách khác nhau nào để ẩn giấu 1 element một cách trực quan (và làm cho chúng chỉ hiển thị với người đọc qua màn hình)?
  • Bạn đã bao giờ sử dụng một hệ thống grid chưa, và nếu có, bạn thích cái nào hơn?
  • Bạn đã bao giờ sử dụng các media queries hay các layout/CSS cụ thể cho mobile chưa?
  • Bạn có quen với việc trình bày/tạo dáng cho SVG?
  • Bạn tối ưu các trang web cho việc in ấn như thế nào?
  • Một vài điểm kiểu “A đây rồi” trong việc viết CSS hiệu quả?
  • Các ưu/khuyết điểm của việc sử dụng các CSS preprocessors?
    • Trình bày những điểm bạn thích và không thích về các CSS preprocessors mà bạn đã sử dụng.
  • Bạn sẽ thực hiện thách thức trong các thiết kế web có sử dụng các font không phải tiêu chuẩn (non-standard fonts) như thế nào?
  • Giải thích cách mà một trình duyệt quyết định những element nào tương ứng với một CSS selector.
  • Trình bày về các pseudo-elements và thảo luận xem chúng dùng để làm gì.
  • Giải thích những hiểu biết của bạn về box model và làm thế nào bạn báo với trình duyệt trong CSS để render layout của bạn trong các box models khác nhau.
  • Đoạn code này * { box-sizing: border-box; } sẽ làm điều gì? Những ưu điểm của nó là gì?
  • Liệt kê các giá trị của thuộc tính display mà bạn có thể nhớ.
  • Sự khác nhau giữa inline và inline-block là gì?
  • Sự khác nhau giữa một thành phần có thuộc tính position với giá trị: relative, fixed, absolute, hoặc có vị trí tĩnh (statically positioned element)?
  • Chữ cái ‘C’ trong CSS là viết tắt của từ Cascading. Mức độ ưu tiên được xác định trong việc gán style như thế nào (cho vài ví dụ)? Bạn có thể tận dụng hệ thống này như thế nào?
  • Những framework CSS nào bạn đã sử dụng trên máy của bạn, hoặc trong sản phẩm nào đó? Bạn sẽ thay đổi/cải tiến chúng như thế nào?
  • Bạn có bao giờ sử dụng CSS Flexbox hay Grid chưa?
  • Responsive design khác adaptive design như thế nào?
  • Bạn có bao giờ làm việc với các thiết bị màn hình retina chưa? Nếu có, bạn đã sử dụng khi nào và dùng những kĩ thuật nào?
  • Có những lý do nào bạn muốn sử dụng translate() hơn thay vì absolute positioning không, hoặc ngược lại? Và tại sao?

Các câu hỏi về JavaScript:

  • Giải thích về event delegation
  • Giải thích cách mà this hoạt động trong JavaScript
  • Giải thích cách mà prototypal inheritance hoạt động
  • Bạn nghĩ gì về AMD so với CommonJS?
  • Giải thích tại sao đoạn code sau không hoạt động như một IIFE: function foo(){ }();.
    • Cần thay đổi gì để làm nó trở thành một IIFE?
  • Sự khác nhau giữa một biến: chứa null, chứa undefined hoặc chưa được khai báo (undeclared) là gì?
    • Bạn sẽ kiểm tra các trạng thái này như thế nào?
  • Một closure là gì, và bạn sẽ sử dụng nó như thế nào / tại sao bạn sử dụng nó?
  • Một trường hợp sử dụng điển hình cho các anonymous functions?
  • Bạn tổ chức code của bạn như thế nào? (module pattern, classical inheritance?)
  • Sự khác nhau giữa host objects và native objects là gì?
  • Nêu sự khác nhau giữa: function Person(){}, var person = Person(), và var person = new Person()?
  • Sự khác nhau giữa .call và .apply là gì?
  • Giải thích về Function.prototype.bind.
  • Bạn sẽ sử dụng document.write() khi nào?
  • Sự khác nhau giữa feature detection, feature inference, và việc sử dụng UA string là gì?
  • Giải thích về Ajax bằng nhiều thông tin chi tiết nhất có thể.
  • Những ưu và khuyết điểm của việc sử dụng Ajax là gì?
  • Giải thích cách JSONP làm việc (và nó thật sự không phải là Ajax như thế nào).
  • Bạn đã bao giờ sử dụng JavaScript templating chưa?
    • Nếu có, bạn đã sử dụng những thư viện nào?
  • Giải thích về “hoisting”.
  • Trình bày về event bubbling.
  • Trình bày sự khác nhau giữ một “attribute” và một “property”?
  • Tại sao việc mở rộng các object được xây dựng sẵn trong JavaScript không phải là một ý tưởng tốt?
  • Sự khác nhau giữa event load và event DOMContentLoaded của document?
  • Sự khác nhau giữa == and === là gì?
  • Giải thích về same-origin policy và sự liên quan của nó với JavaScript.
  • Làm cho hàm này hoạt động:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Tại sao lại gọi là Ternary expression, từ “Ternary” có nghĩa gì?
  • "use strict"; là gì? Những điểm lợi và hại khi sử dụng nó?
  • Tạo một vòng lặp for cho output từ 1 đến 100, trong đó output “fizz” thay cho số chia hết cho 3, “buzz” thay cho số chia hết cho 5 và “fizzbuzz” thay cho số chia hết cho cả 3 và 5.
  • Tại sao, nói chung, việc không làm ảnh hưởng đến global scope của một website là một điều tốt?
  • Tại sao bạn sẽ không sử dụng những thứ như event load? Event này có điểm bất lợi nào không? Bạn có biết cách thay thế nào khác, và tại sao bạn sẽ sử dụng chúng?
  • Giải thích một ứng dụng đơn trang (single page app) là gì và làm sao để làm chúng thân thiện với việc SEO.
  • Mức độ trải nghiệm của bạn là như thế nào đối với các Promise và/hoặc polyfills của chúng?
  • Những điểm lợi và hại của việc sử dụng các Promise thay cho các callback?
  • Nêu một vài ưu và khuyết điểm của việc viết code JavaScript trong một ngôn ngữ mà sẽ dùng để biên dịch thành JavaScript.
  • Bạn sử dụng những công cụ và kỹ thuật nào để gỡ lỗi (debug) cho JavaScript?
  • Bạn sử dụng những cấu trúc nào để lặp xuyên suốt qua tất cả các thuộc tính (property) trong object và các item trong array?
  • Giải thích sự khác nhau giữa các mutable object và immutable object.
    • Nêu ví dụ cho một immutable object trong JavaScript?
    • Những ưu/khuyết điểm của tính bất biến (immutability)?
    • Làm thế nào để đạt được tính bất biến trong code của bạn?
  • Giải thích sự khác nhau giữa các hàm đồng bộ (synchronous function) và hàm không đồng bộ (asynchronous function).
  • Event loop là gì?
    • Sự khác biệt giữa call stack và task queue là gì?
  • Giải thích sự khác nhau trong các cách sử dụng foo sau đây: giữa function foo() {} và var foo = function() {}
  • Sự khác biệt giữa các biến được tạo bằng việc sử dụng let, var hoặc const là gì?

Các câu hỏi về Kiểm thử (Testing):

  • Vài điểm lợi và bất lợi trong việc kiểm thử code của bạn là gì?
  • Bạn sẽ sử dụng những công cụ nào để kiểm thử chức năng của code của bạn?
  • Sự khác nhau giữa một unit test và một functional/integration test là gì?
  • Mục đích của một công cụ kiểm tra code style (code style linting tool) là gì?

Các câu hỏi về Hiệu suất (Performance):

  • Bạn sử dụng những công cụ nào để tìm ra một lỗi hiệu suất trong code của bạn?
  • Chỉ ra vài cách mà bạn có thể cải thiện hiệu suất cuộn trang (scrolling performance) trên website của bạn?
  • Giải thích sự khác nhau giữa layout, painting và compositing.

Các câu hỏi về Mạng (Network):

  • Theo truyền thống, tại sao việc cung cấp các tài nguyên của trang web từ nhiều tên miền khác nhau là việc có lợi hơn?
  • Hãy trình bày một cách toàn diện nhất quá trình từ lúc bạn nhập vào URL của một trang web đến khi nó hoàn thành việc tải và hiện thị trên màn hình của bạn.
  • Những điểm khác nhau giữa Long-Polling, Websockets và Server-Sent Events?
  • Giải thích các request header và response header sau:
    • Sự khác nhau giữa Expires, Date, Age và If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Các HTTP methods là gì? Liệt kê tất cả HTTP methods mà bạn biết, và giải thích chúng.

Các câu hỏi về việc viết code:

Câu hỏi: Giá trị của foo là gì?

var foo = 10 + '20';

Câu hỏi: Đoạn code dưới đây sẽ xuất ra cái gì?

console.log(0.1 + 0.2 == 0.3);

Câu hỏi: Bạn sẽ làm thế nào để hàm này hoạt động?

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

Câu hỏi: Giá trị nào được trả về từ dòng lệnh sau?

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

Câu hỏi: Giá trị của window.foo là gì?

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

Câu hỏi: Kết quả của 2 lệnh alert dưới đây là gì?

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

Câu hỏi: Giá trị của foo.length là gì?

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

Câu hỏi: Giá trị của foo.x là gì?

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

Câu hỏi: Những dòng code sau in ra những gì?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Các câu hỏi vui:

  • Gần đây bạn đã làm việc với những dự án thú vị nào?
  • Vài điều bạn thích về các công cụ dành cho nhà phát triển mà bạn sử dụng là gì?
  • Ai là người truyền cảm hứng cho bạn trong cộng đồng front-end?
  • Bạn có dự án ngắn hạn nào không? Kiểu dự án gì?
  • Những tính năng của Internet Explorer mà bạn thích là gì?
  • Bạn có thích dùng cà phê không?

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 +Những Câu Hỏi Phỏng Vấn Lập Trình Viên Front-end ★ Front-end Job Interview Questions

Những Câu Hỏi Phỏng Vấn Lập Trình Viên Front-end

Những Câu Hỏi Phỏng Vấn Lập Trình Viên Front-end

Tập tin này chứa một số câu hỏi phỏng vấn lập trình viên front-end, có thể được sử dụng khi kiểm tra các ứng viên tiềm năng. Không khuyến khích sử dụng tất cả các câu hỏi ở đây trên cùng một ứng cử viên (sẽ mất hàng giờ đồng hồ). Chọn một vài mục từ danh sách này sẽ giúp bạn kiểm tra những kỹ năng mà bạn yêu cầu ở ứng viên đó.

Lưu ý: Hãy nhớ rằng nhiều câu trong đây là những câu hỏi kết thúc mở và có thể dẫn đến vài cuộc thảo luận thú vị cung cấp cho bạn nhiều thông tin về khả năng của một người hơn là một câu trả lời thẳng thắn.

Mục lục

  1. Các câu hỏi chung
  2. Các câu hỏi về HTML
  3. Các câu hỏi về CSS
  4. Các câu hỏi về JavaScript
  5. Các câu hỏi về Kiểm thử (Testing)
  6. Các câu hỏi về Hiệu suất (Performance)
  7. Các câu hỏi về Mạng (Network)
  8. Các câu hỏi về việc viết code
  9. Các câu hỏi vui

Tham gia đóng góp

  1. Những người đóng góp
  2. Làm sao để đóng góp
  3. Giấy phép

Các câu hỏi chung:

  • Bạn đã học được gì trong ngày hôm qua/tuần này??
  • Điều gì về lập trình làm bạn hứng thú?
  • Một thử thách về mặt kĩ thuật bạn đã trải qua gần đây là gì và bạn đã giải quyết nó như thế nào?
  • Bạn cân nhắc những Giao diện người dùng (UI), Vấn đề bảo mật (Security), Hiệu suất (Performance), Khả năng tối ưu cho các bộ máy tìm kiếm (SEO), Khả năng bảo trì (Maintainability) hay Công nghệ (Technology) nào khi xây dựng một ứng dụng/trang web?
  • Hãy nói về môi trường lập trình mà bạn muốn.
  • Những hệ thống quản lý phiên bản (version control systems) nào mà bạn đã sử dụng và cảm thấy quen thuộc?
  • Bạn có thể trình bày mạch làm việc (workflow) của bạn khi bạn tạo một trang web không?
  • Nếu bạn có 5 stylesheet khác nhau, bạn sẽ tích hợp chúng vào trang như thế nào là tốt nhất?
  • Bạn có thể trình bày sự khác nhau giữa progressive enhancement và graceful degradation không?
  • Bạn sẽ tối ưu các tài nguyên (assets/resources) của một website như thế nào?
  • Một trình duyệt sẽ tải bao nhiêu tài nguyên cùng một lúc từ một tên miền (domain) cho trước?
    • Các exception là gì?
  • Nêu 3 cách để giảm tải trang web (perceived hoặc thời gian tải thực tế (actual load time)).
  • Nếu bạn tham gia vào một dự án và họ xài nút Tab trong khi bạn sử dụng nút dấu cách (spaces), bạn sẽ làm gì?
  • Trình bày cách bạn sẽ làm một trang slideshow đơn giản.
  • Nếu bạn có thể chuyên sâu về một công nghệ (technology) trong năm nay thì nó sẽ là công nghệ gì?
  • Giải thích tầm quan trọng của các standards và standards bodies.
  • Flash of Unstyled Content là gì? Bạn tránh FOUC như thế nào?
  • Giải thích ARIA và screenreaders là gì, và làm thế nào để làm cho một trang web có thể truy cập được.
  • Giải thích một vài ưu và khuyết điểm của CSS animations so với JavaScript animations.
  • CORS là từ viết tắt của cái gì và nó đề cập đến vấn đề nào?

Các câu hỏi về HTML:

  • Một doctype làm cái gì?
  • Sự khác nhau giữa chế độ full standards, chế độ almost standards và chế độ quirks?
  • Sự khác nhau giữa HTML và XHTML là gì?
  • Có vấn đề nào không khi cung cấp (serving) các trang theo kiểu application/xhtml+xml?
  • Bạn cung cấp một trang web có nội dung được viết bằng nhiều ngôn ngữ như thế nào?
  • Bạn phải cảnh giác những điều gì khi thiết kế hoặc phát triển các trang web đa ngôn ngữ?
  • Những thuộc tính data- có lợi cho cái gì?
  • Hãy xem HTML5 như một nền tảng web mở (open web platform). Những building blocks của HTML5 là gì?
  • Trình bày sự khác nhau giữa một cookie, sessionStorage và localStorage.
  • Trình bày sự khác nhau giữa <script>, <script async> và <script defer>.
  • Tại sao việc đặt các thẻ (tag) <link> CSS giữa 2 thẻ <head></head> và các thẻ <script> JS ngay trước thẻ </body> về cơ bản là một ý tưởng tốt? Bạn có biết những trường hợp ngoại lệ nào khác không?
  • Progressive rendering là gì?
  • Tại sao bạn sẽ sử dụng thuộc tính srcset trong 1 tag img? Giải thích quá trình mà trình duyệt sẽ sử dụng khi phân tích nội dung của thuộc tính này.
  • Trước đây bạn đã bao giờ sử dụng những ngôn ngữ template HTML nào khác chưa?

Các câu hỏi về CSS:

  • Điểm khác biệt giữa class và ID trong CSS là gì?
  • Sự khác nhau giữa “resetting” và “normalizing” CSS là gì? Bạn sẽ chọn cái nào, và tại sao?
  • Trình bày về Floats và cách chúng hoạt động.
  • Trình bày về z-index và làm thế nào để nội dung stack với nhau được định hình.
  • Trình bày về BFC (Block Formatting Context) và cách nó hoạt động.
  • Các kĩ thuật clearing khác nhau là những kĩ thuật nào và phù hợp với hoàn cảnh nào?
  • Giải thích về CSS sprites, và làm thế nào để bạn thực hiện chúng trên một trang web.
  • Những kĩ thuật thay thế hình ảnh nào mà bạn thích và bạn sử dụng từng kĩ thuật đó khi nào?
  • Bạn sẽ tiếp cận như thế nào để khắc phục các vấn đề về trình bày trên một trình duyệt cụ thể?
  • Bạn sẽ cung cấp các trang của bạn trên các trình duyệt hạn chế tính năng như thế nào?
    • Bạn sẽ sử dụng kĩ thuật hay quy trình nào?
  • Những cách khác nhau nào để ẩn giấu 1 element một cách trực quan (và làm cho chúng chỉ hiển thị với người đọc qua màn hình)?
  • Bạn đã bao giờ sử dụng một hệ thống grid chưa, và nếu có, bạn thích cái nào hơn?
  • Bạn đã bao giờ sử dụng các media queries hay các layout/CSS cụ thể cho mobile chưa?
  • Bạn có quen với việc trình bày/tạo dáng cho SVG?
  • Bạn tối ưu các trang web cho việc in ấn như thế nào?
  • Một vài điểm kiểu “A đây rồi” trong việc viết CSS hiệu quả?
  • Các ưu/khuyết điểm của việc sử dụng các CSS preprocessors?
    • Trình bày những điểm bạn thích và không thích về các CSS preprocessors mà bạn đã sử dụng.
  • Bạn sẽ thực hiện thách thức trong các thiết kế web có sử dụng các font không phải tiêu chuẩn (non-standard fonts) như thế nào?
  • Giải thích cách mà một trình duyệt quyết định những element nào tương ứng với một CSS selector.
  • Trình bày về các pseudo-elements và thảo luận xem chúng dùng để làm gì.
  • Giải thích những hiểu biết của bạn về box model và làm thế nào bạn báo với trình duyệt trong CSS để render layout của bạn trong các box models khác nhau.
  • Đoạn code này * { box-sizing: border-box; } sẽ làm điều gì? Những ưu điểm của nó là gì?
  • Liệt kê các giá trị của thuộc tính display mà bạn có thể nhớ.
  • Sự khác nhau giữa inline và inline-block là gì?
  • Sự khác nhau giữa một thành phần có thuộc tính position với giá trị: relative, fixed, absolute, hoặc có vị trí tĩnh (statically positioned element)?
  • Chữ cái ‘C’ trong CSS là viết tắt của từ Cascading. Mức độ ưu tiên được xác định trong việc gán style như thế nào (cho vài ví dụ)? Bạn có thể tận dụng hệ thống này như thế nào?
  • Những framework CSS nào bạn đã sử dụng trên máy của bạn, hoặc trong sản phẩm nào đó? Bạn sẽ thay đổi/cải tiến chúng như thế nào?
  • Bạn có bao giờ sử dụng CSS Flexbox hay Grid chưa?
  • Responsive design khác adaptive design như thế nào?
  • Bạn có bao giờ làm việc với các thiết bị màn hình retina chưa? Nếu có, bạn đã sử dụng khi nào và dùng những kĩ thuật nào?
  • Có những lý do nào bạn muốn sử dụng translate() hơn thay vì absolute positioning không, hoặc ngược lại? Và tại sao?

Các câu hỏi về JavaScript:

  • Giải thích về event delegation
  • Giải thích cách mà this hoạt động trong JavaScript
  • Giải thích cách mà prototypal inheritance hoạt động
  • Bạn nghĩ gì về AMD so với CommonJS?
  • Giải thích tại sao đoạn code sau không hoạt động như một IIFE: function foo(){ }();.
    • Cần thay đổi gì để làm nó trở thành một IIFE?
  • Sự khác nhau giữa một biến: chứa null, chứa undefined hoặc chưa được khai báo (undeclared) là gì?
    • Bạn sẽ kiểm tra các trạng thái này như thế nào?
  • Một closure là gì, và bạn sẽ sử dụng nó như thế nào / tại sao bạn sử dụng nó?
  • Một trường hợp sử dụng điển hình cho các anonymous functions?
  • Bạn tổ chức code của bạn như thế nào? (module pattern, classical inheritance?)
  • Sự khác nhau giữa host objects và native objects là gì?
  • Nêu sự khác nhau giữa: function Person(){}, var person = Person(), và var person = new Person()?
  • Sự khác nhau giữa .call và .apply là gì?
  • Giải thích về Function.prototype.bind.
  • Bạn sẽ sử dụng document.write() khi nào?
  • Sự khác nhau giữa feature detection, feature inference, và việc sử dụng UA string là gì?
  • Giải thích về Ajax bằng nhiều thông tin chi tiết nhất có thể.
  • Những ưu và khuyết điểm của việc sử dụng Ajax là gì?
  • Giải thích cách JSONP làm việc (và nó thật sự không phải là Ajax như thế nào).
  • Bạn đã bao giờ sử dụng JavaScript templating chưa?
    • Nếu có, bạn đã sử dụng những thư viện nào?
  • Giải thích về “hoisting”.
  • Trình bày về event bubbling.
  • Trình bày sự khác nhau giữ một “attribute” và một “property”?
  • Tại sao việc mở rộng các object được xây dựng sẵn trong JavaScript không phải là một ý tưởng tốt?
  • Sự khác nhau giữa event load và event DOMContentLoaded của document?
  • Sự khác nhau giữa == and === là gì?
  • Giải thích về same-origin policy và sự liên quan của nó với JavaScript.
  • Làm cho hàm này hoạt động:
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Tại sao lại gọi là Ternary expression, từ “Ternary” có nghĩa gì?
  • "use strict"; là gì? Những điểm lợi và hại khi sử dụng nó?
  • Tạo một vòng lặp for cho output từ 1 đến 100, trong đó output “fizz” thay cho số chia hết cho 3, “buzz” thay cho số chia hết cho 5 và “fizzbuzz” thay cho số chia hết cho cả 3 và 5.
  • Tại sao, nói chung, việc không làm ảnh hưởng đến global scope của một website là một điều tốt?
  • Tại sao bạn sẽ không sử dụng những thứ như event load? Event này có điểm bất lợi nào không? Bạn có biết cách thay thế nào khác, và tại sao bạn sẽ sử dụng chúng?
  • Giải thích một ứng dụng đơn trang (single page app) là gì và làm sao để làm chúng thân thiện với việc SEO.
  • Mức độ trải nghiệm của bạn là như thế nào đối với các Promise và/hoặc polyfills của chúng?
  • Những điểm lợi và hại của việc sử dụng các Promise thay cho các callback?
  • Nêu một vài ưu và khuyết điểm của việc viết code JavaScript trong một ngôn ngữ mà sẽ dùng để biên dịch thành JavaScript.
  • Bạn sử dụng những công cụ và kỹ thuật nào để gỡ lỗi (debug) cho JavaScript?
  • Bạn sử dụng những cấu trúc nào để lặp xuyên suốt qua tất cả các thuộc tính (property) trong object và các item trong array?
  • Giải thích sự khác nhau giữa các mutable object và immutable object.
    • Nêu ví dụ cho một immutable object trong JavaScript?
    • Những ưu/khuyết điểm của tính bất biến (immutability)?
    • Làm thế nào để đạt được tính bất biến trong code của bạn?
  • Giải thích sự khác nhau giữa các hàm đồng bộ (synchronous function) và hàm không đồng bộ (asynchronous function).
  • Event loop là gì?
    • Sự khác biệt giữa call stack và task queue là gì?
  • Giải thích sự khác nhau trong các cách sử dụng foo sau đây: giữa function foo() {} và var foo = function() {}
  • Sự khác biệt giữa các biến được tạo bằng việc sử dụng let, var hoặc const là gì?

Các câu hỏi về Kiểm thử (Testing):

  • Vài điểm lợi và bất lợi trong việc kiểm thử code của bạn là gì?
  • Bạn sẽ sử dụng những công cụ nào để kiểm thử chức năng của code của bạn?
  • Sự khác nhau giữa một unit test và một functional/integration test là gì?
  • Mục đích của một công cụ kiểm tra code style (code style linting tool) là gì?

Các câu hỏi về Hiệu suất (Performance):

  • Bạn sử dụng những công cụ nào để tìm ra một lỗi hiệu suất trong code của bạn?
  • Chỉ ra vài cách mà bạn có thể cải thiện hiệu suất cuộn trang (scrolling performance) trên website của bạn?
  • Giải thích sự khác nhau giữa layout, painting và compositing.

Các câu hỏi về Mạng (Network):

  • Theo truyền thống, tại sao việc cung cấp các tài nguyên của trang web từ nhiều tên miền khác nhau là việc có lợi hơn?
  • Hãy trình bày một cách toàn diện nhất quá trình từ lúc bạn nhập vào URL của một trang web đến khi nó hoàn thành việc tải và hiện thị trên màn hình của bạn.
  • Những điểm khác nhau giữa Long-Polling, Websockets và Server-Sent Events?
  • Giải thích các request header và response header sau:
    • Sự khác nhau giữa Expires, Date, Age và If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • Các HTTP methods là gì? Liệt kê tất cả HTTP methods mà bạn biết, và giải thích chúng.

Các câu hỏi về việc viết code:

Câu hỏi: Giá trị của foo là gì?

var foo = 10 + '20';

Câu hỏi: Đoạn code dưới đây sẽ xuất ra cái gì?

console.log(0.1 + 0.2 == 0.3);

Câu hỏi: Bạn sẽ làm thế nào để hàm này hoạt động?

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

Câu hỏi: Giá trị nào được trả về từ dòng lệnh sau?

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

Câu hỏi: Giá trị của window.foo là gì?

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

Câu hỏi: Kết quả của 2 lệnh alert dưới đây là gì?

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

Câu hỏi: Giá trị của foo.length là gì?

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

Câu hỏi: Giá trị của foo.x là gì?

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

Câu hỏi: Những dòng code sau in ra những gì?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Các câu hỏi vui:

  • Gần đây bạn đã làm việc với những dự án thú vị nào?
  • Vài điều bạn thích về các công cụ dành cho nhà phát triển mà bạn sử dụng là gì?
  • Ai là người truyền cảm hứng cho bạn trong cộng đồng front-end?
  • Bạn có dự án ngắn hạn nào không? Kiểu dự án gì?
  • Những tính năng của Internet Explorer mà bạn thích là gì?
  • Bạn có thích dùng cà phê không?

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 diff --git a/config/eleventy.config.js b/config/eleventy.config.js index 0f8ac03..490a496 100644 --- a/config/eleventy.config.js +++ b/config/eleventy.config.js @@ -64,7 +64,7 @@ module.exports = eleventyConfig => { }) eleventyConfig.addFilter('github_permalink', str => { - return str.replace(/\.html/g, '') + return str.replace(/\/index.html/g, '.md') }) eleventyConfig.addFilter('permalink', str => { diff --git a/package.json b/package.json index 7572b46..33217a8 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,11 @@ "version": "1.0.0", "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.", "scripts": { - "build": "eleventy --config=config/eleventy.config.js", + "build": "eleventy --config=config/eleventy.config.js --pathprefix='Front-end-Developer-Interview-Questions/'", "deploy": "git subtree push --prefix _site git@github.com:h5bp/Front-end-Developer-Interview-Questions.git gh-pages", "contributors:add": "all-contributors add", "contributors:generate": "all-contributors generate", - "start": "eleventy --config=config/eleventy.config.js --serve --port 9090" + "start": "eleventy --config=config/eleventy.config.js --serve --port 9090 --quiet" }, "repository": { "type": "git", diff --git a/src/_includes/assets/css/header.css b/src/_includes/assets/css/header.css index 6a97bd3..856357b 100644 --- a/src/_includes/assets/css/header.css +++ b/src/_includes/assets/css/header.css @@ -47,7 +47,7 @@ right: 0; bottom: 0; left: 0; - background-image: url('/assets/images/gradient.svg'); + background-image: url('https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/gradient.svg'); pointer-events: none; } .header-big-title::before { diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk index adc0a2a..d51809b 100644 --- a/src/_includes/components/footer.njk +++ b/src/_includes/components/footer.njk @@ -6,6 +6,6 @@ {% for person in maintainers.all %} {{ person.name }}{% if not loop.last %}{% if loop.index != loop.length - 1 %}, {% else %} and {% endif %}{% endif %} {% endfor %}.
- Curious about the project? Read more about here. + Curious about the project? Read more about here.

diff --git a/src/_includes/components/navigation.njk b/src/_includes/components/navigation.njk index 9703cfb..36a6274 100644 --- a/src/_includes/components/navigation.njk +++ b/src/_includes/components/navigation.njk @@ -3,13 +3,13 @@
  • Questions:
    • {% for entry in questions.all %} {% if not entry.external %} -
  • {{ entry.abbreviation }}
    • +
  • {{ entry.abbreviation }}
    • {% else %}
  • {{ entry.abbreviation }}
    • {% endif %} {% endfor %}
  • |
    • -
  • 🏠
    • -
  • 🌐
    • +
  • 🏠
    • +
  • 🌐
    • diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk index dd9700a..7ad02f0 100644 --- a/src/_includes/layouts/default.njk +++ b/src/_includes/layouts/default.njk @@ -18,7 +18,6 @@ - @@ -29,10 +28,10 @@ - - - - + + + + diff --git a/src/index.njk b/src/index.njk index 7554b9f..adf5eaa 100644 --- a/src/index.njk +++ b/src/index.njk @@ -10,7 +10,7 @@ permalink: /index.html

    {{ title }}

    - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Read more about here. Better in your language? See one of our translations. + A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Read more about 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 contribute guide. We have a Hall of Fame 👑.