yangshun / front-end-interview-handbook Goto Github PK
View Code? Open in Web Editor NEW⚡️ Front End interview preparation materials for busy engineers
Home Page: https://frontendinterviewhandbook.com
License: MIT License
⚡️ Front End interview preparation materials for busy engineers
Home Page: https://frontendinterviewhandbook.com
License: MIT License
One more disadvantage you might consider is,
Hello,
I would like to get approval in translating the files available on this project to Yoruba language.
Thanks in anticipation.
Hey there 👋 !
I ran into this wonderful repository because one of the stargazers is Marius Schulz. So, I would like to contribute adding a little bit of organisation.
To accomplish that I would like to propose splitting up the README into the different current sections. That action would give us more maintainability, readability, scalability.
Furthermore, I would like to propose adding some anchors to improve navigation which now is tough and poor.
Hard work but to be honest, it would be appealing to the current and new contributors.
When a property is accessed on an object and if the property is not found on that object, the JavaScript engine should looks at the object's __proto__(different browser has their own implement) .Or, looks at the prototype of its constructor.
Providing detailed explanation of higher order functions especially reduce().
Correctly if I'm wrong but I guess those are inverted
modern implementations commonly substitute JSON for XML
Sholdn't it be
modern implementations commonly substitute XML for JSON
?
This is nuanced and perhaps debatable too haha. I happened to be reading an example polyfill in the MDN docs on Object.assign
and they do:
if (target == null) { // TypeError if undefined or null
If I'm understanding your https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states section
you're advising that you should not take advantage of the fact that
null === undefined
false
null == undefined
true
I usually would agree, but would you say they're example is a misuse of loose checking? I could see it written as:
if (target === null || target === undefined) {
So my issue here is probably not more of an issue then discussion (so feel free to close). But, I think it's interesting :)
localStorage和sessionStorage都受同源策略限制,只有同源才可以共享,和domain相关!
Hi everyone,
First of all, great job with this repo. I found the information here extremely useful (even if it's not for an interview prep).
I was reading about the difference between constructors and factories in JS and found this blog post to be quite useful: https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e.
My attempt at answering the question (based on that text and its references) would be:
From a practical point of view, the main difference are how to instantiate new objects and what this
refers to when creating them.
Classes are a syntax sugar for Constructor functions, which basically define a new object and append functions to its prototype. This allows developers to instantiate objects using new
and also ensure that this
inside the class refers to the object being created (similar to other languages).
class ClassCar {
drive () {
console.log('Vroom!');
}
}
const car1 = new ClassCar();
console.log(car1.drive());
Factories are functions that return the new object, which gives developers a bit more freedom on how the object will be instantiated (if more than just creating the object is needed, like pooling). Since factories are just regular functions this
won't refer to the object being created.
const proto = {
drive () {
console.log('Vroom!');
}
};
function factoryCar () {
return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());
There are more differences, specially regarding the code design of the application which are explored deeper at Eric Elliot's post, if you want to know more about the implications of using Classes or Factories, I recommend checking it out.
It can be used for using a 1x or 2x sprite sheet depending on pixel density IIRC.
In HTML section there is a question:
Consider HTML5 as an open web platform. What are the building blocks of HTML5?
And the answer is from MDN's HTML5 docs:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Probably something different is meant in the original question. I understand it as a question about tech stack of open web platform. Please take a loot at the diagrams on this pages to see what I mean:
http://tess.oconnor.cx/2009/05/what-the-web-platform-is
https://hsivonen.fi/web-stack/
Make translations more discoverable (:
Sorry, this may not issue the content of this repository and my English not so strong. But as a title I asked for, I try to search many repositories there has only a question for an interview, not a handbook, as this https://github.com/arialdomartini/Back-End-Developer-Interview-Questions The contents are not contained about any answer for it. I really confuse a question also couldn't manage to find out any answer for it, as well as I am a little rookie for programmable.
Anyways thanks for the nice repository. This documentation really made me learn many things like a getting started guideline 👍
It is reasonable to answer this question only regard non-replaced elements, since for replaced elements, display inline or inline-block are actually (almost?) the same. But without mentioned of replaced elements, its answer is a bit misleading, somehow.
srcset
attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.The srcset
attribute allows the browser the ability to choose the appropriate image for a given rendering situation. For example: srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 200w"
tells the browser to display the small, medium or large .jpg graphic depending on the client's resolution. The way the browser calculates which graphic to use is quite interesting:
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
If the client's resolution is Retina x1, the calculation closer to 1 will be selected by the browser.
If the resolution is Retina x2, the browser will use the closest resolution above the minimum. Meaning it will not choose the 1.5 resolution becasue it is greater than 1. The browser would then choose the image closer to 2 which is 3.1.
So, srcset
makes the browser a bit smarter by ignoring smaller graphics and using the most appropriate img based on math.
Hi,
I was reading through the questions and came across "Describe the difference between a cookie, sessionStorage and localStorage".
In the answer it says: Have domain associated | Yes | No | No
I think that's misleading, as localStorage and sessionStorage are associated to a domain and you can't read storage objects from other domains.
See https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
Pages on other domains can't access the same storage objects.
Other than that and what I read so far a great list - especially that it provides answers is a valuable learning experience for everyone.
/**
* @author xgqfrms
* @license MIT
* @description ES6 String Duplicate
* @param {Array} arr
*/
let arr = [1, 2, 3, 4, 5];
const ES6_String_Duplicate = arr => `${arr.toString()},`.repeat(2).slice(0, -1).split(`,`).map(item => parseInt(item));
ES6_String_Duplicate(arr);
// (10) [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]
In the section What kind of things must you be wary of when designing or developing for multilingual sites?, you warn against using concatenated strings, and suggest using template parameters instead.
By template parameters, do you mean template literals or tag functions?
Thanks for your work on this, this is a great document!
We need to Turkish content for all questions and answers.
Mobile-first is easily doable with CSS frameworks (media-query specific classes), scales smoothly, does hide stuff that's not needed on feature phones, mobiles and tablets from the get-go or has device-specific UX like the beloved hamburger menu. You actually can develop with the viewport adapted for your mobile target.
I also tend to actually test stuff on devices. Handling an adapted viewport with a mouse hides UX issues that can be easily found when you load up the page on your phone.
"Responsive" can be an afterthought. I've seen pages with fixed-width inline styles (React, I'm looking at you) where making them responsive is a low-prio feature in the backlog. Depending on the creativity of the original dev adding this "feature" can be a nightmare.
The examples for an answer is incorrect:
https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md#explain-hoisting
Believe it or not, variables declared using let
or const
are hoisted, their namespace gets hoisted however they do not get declared until the interpreter reaches the line of code on which the declaration happens. To demonstrate this:
var a = "foo";
function proofOfHoisting(){
console.log(a);
let a = "bar";
}
If hoisting was to not be a thing for let
and/or const
then running this function would actually log foo
, however it does not, it gives a reference error because the inner variable is hoisted, but not declared, however because of hoisting the outer variable is not visible.
I think the following line
numbers.reduce((total, number) => (total += number), 0);
should be replaced with
numbers.reduce((total, number) => (total + number), 0);
I would also leave out the parenthesis around total + number
, but is more of a style matter.
Correct me if I am wrong, but I think you want to refer to the "DOM" (Document Object Model) int he first sentence, not "Domain".
Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain
Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the DOM (Document Object Model).
Hi, I saw a Korean version in the repo, may I do a Chinese version?
If you can, invite me plz.
Hi guys, how are you?
I would like to know how is the translation to brazilian portuguese going?
I saw some issues about it, nothing more.
Could I start a translation?
I would like to contribute Japanese translation.
Could you see it if I fork this repo and send pull-request?
Or could I join the team like korean or chinese persons?
The @supports
CSS at-rule is a great way to write CSS styles that degrade gracefully in older browsers. I think it makes sense to add that to the answers of "How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?".
I want to shorten this to make a brief principle for zh-cn translators. How about adding a link in this contributing part?
I think that this is the most comprehensive set of answers to the Front-end Developer Interview Questions. I highly appreciate the titanic work that the original contributor has made.
I know that many companies (especially in Russia) use the original set of questions to interview candidates and there is not a lot of resources in Russian that can help people to get ready.
So without further ado I think that this repo also needs a Russian translation 😉
I am one of the contributors and translators of the original repo, and Russian is my mother tongue, so I assume I am qualified for this.
The following question was missing from the list of links above:
How is responsive design different from adaptive design?
Thanks for creating this repo, it's very complete and useful.
So this is somewhat a matter of personal preference, but I would suggest you change your response to "Have you ever used a grid system, and if so, what do you prefer?" from float to flexbox. Support for flexbox is now very good, including IE11 https://caniuse.com/#search=flexbox
The latest version of Bootstrap also uses flexbox for its grid (with no fallback that I'm aware of) https://getbootstrap.com/docs/4.0/layout/grid/
Hi @yangshun, I am Iqbal Adan from Indonesia. I really want to contribute in translating this project into my native language (Bahasa Indonesia), Would you mind if I translate this project into Bahasa? Waiting forward your response.
Knowing more about how rendering happens is very important. With the latest JS frameworks, it has become very vague for new developers to know what is happening in the HTML world as they generate HTML in JS using JSX. I felt these questions would definitely introduce certain topics that they can read on at their own pace.
Since the original repo with questions has changed their folder structure in December 2018, all the links to the original repository cause 404 error now.
Since the HTML5 specification it is no longer recommended to include the optional <head>
tag.
https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags
The body tag is also not always required.
https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
Including both of these tags just increase the amount the browser must parse before rendering the page. It also increase the payload size.
I'll be translating the questions to PT-BR but I don't promise it will be fast. Will probs start working on it later this weekend, which includes forking the original repo and stuff. I hope to be of great help to this already helpful project
I made a few flashcard decks for those that want to study on the go on their phones with AnkiDroid, Studies, etc.
You can find them here.
Any suggestions welcome.
Hello just wanted to ask the following question: The css-questions.md file has about 4200 words, can I translate it into two parts, doing two pull requests?
In CSS section, the answer says "A BFC is an HTML box that satisfies at least one of the following conditions: ... The value of display is table-cell, table-caption, inline-block, flex, or inline-flex."
display flex create a new flex formatting context, not block formatting context. Only flex items (its children) create new BFC.
I found typo in the Chinese version of javascript chapter about 请解释变量提升(hosting)
hosting->hoisting
Knowing more about how rendering happens is very important. With the latest JS frameworks, it has become very vague for new developers to know what is happening in the HTML world as they generate HTML in JS using JSX. I felt these questions would definitely introduce certain topics that they can read on at their own pace.
localstorage应该与域名相关吧
https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
Found a typo in front-end-interview-handbook/questions/html-questions.md on line 24.
Typo - declation (declaration).
I would like to add answer to javaScript section for question -> Explain the difference between mutable and immutable objects.
Which of these is more memory efficient, and why?
function ProtoPerson() {}
ProtoPerson.prototype.getName = function() {
return "MyName";
};
ProtoPerson.prototype.getLink = function() {
return "http://mycompany.com/myLinks/" + this.getName();
};
var protoPersons = [];
for (var i = 0; i < 100000; i++) {
protoPersons.push(new ProtoPerson);
}
function ClosurePerson() {
this.getName = function() {
return "MyName";
};
this.getLink = function() {
return "http://mycompany.com/myLinks/" + this.getName();
};
}
var closurePersons = [];
for (var i = 0; i < 100000; i++) {
closurePersons.push(new ClosurePerson);
}
It may be of interest to add a question on deep cloning vs shallow cloning for the JS section. It can be extremely important for a programmer to know the difference as it has a huge impact on performance.
Hey Yangshun & team,
Just a quick clarification about this answer:
https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/css-questions.md#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why
Changes to position absolute will not cause reflow (recalculation of layout) and the reason being they are already separated from normal flow.
They do trigger repaint (and composite).
To extend the original answer:
Hi , permit me to translate all your files for tagalog Filipino [PHILIPPINES] localization. Rest assured that my work is credible. Thanks .
proposed repo :
front-end-interview-handbook/tree/master/translations/tl_PH
i will wait for your go signal @yangshun
Hi, I'm Chris from Korea.
Would you mind if I translate this repo into Korean?
Hello,
I would like to contribute to translate the project in french.
Can I make a branch for that?
Thank you for your work and answer.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.