diff --git a/README.md b/README.md index 1d9674b38..5894ba084 100644 --- a/README.md +++ b/README.md @@ -39,19 +39,20 @@ You might be interested in the [Tech Interview Handbook](https://github.com/yang ## Table of Contents -1. [HTML Questions](/questions/html-questions.md) -1. [CSS Questions](/questions/css-questions.md) -1. [JavaScript Questions](/questions/javascript-questions.md) +1. [HTML Questions](/contents/en/questions/html-questions.md) +1. [CSS Questions](/contents/en/questions/css-questions.md) +1. [JavaScript Questions](/contents/en/questions/javascript-questions.md) -## Translations +## Contents -- [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) -- [Korean (한국어)](/Translations/Korean/README.md) -- [Russian (Русский)](/Translations/Russian/README.md) -- [Polish (Polski)](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/Translations/Polish/README.md) +- [English](/contents/en/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Japanese (日本語)](/contents/jp/README.md) +- [Korean (한국어)](/contents/kr/README.md) +- [Russian (Русский)](/contents/ru/README.md) +- [Tagalog](/contents/tl/README.md) +- [Polish (Polski)](contents/pl/README.md) +- [Portugese](contents/pr/README.md) ## Related diff --git a/contents/en/README.md b/contents/en/README.md new file mode 100644 index 000000000..5894ba084 --- /dev/null +++ b/contents/en/README.md @@ -0,0 +1,79 @@ +

Front End Interview Handbook

+ +
+ + Front End Interview Handbook + +
+

+ Credits: Illustration by @yangheng + +

+
+ +## What is this? + +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 — HTML, CSS, JavaScript, just to name a few areas. + +While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves. + +--- + +
+ 💰 Interested in Front End Dev jobs? Sign up with Triplebyte to efficiently interview with top tech companies! 💰 +
+ +--- + +## Looking for Generic Interview Preparation? + +You might be interested in the [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) which has helpful content on general coding interviews such as algorithms, behavioral questions and an [interview cheatsheet](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)! + +
+ Web Technologies illustration +
+

+ Credits: Illustration by unDraw +

+
+ +## Table of Contents + +1. [HTML Questions](/contents/en/questions/html-questions.md) +1. [CSS Questions](/contents/en/questions/css-questions.md) +1. [JavaScript Questions](/contents/en/questions/javascript-questions.md) + +## Contents + +- [English](/contents/en/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Japanese (日本語)](/contents/jp/README.md) +- [Korean (한국어)](/contents/kr/README.md) +- [Russian (Русский)](/contents/ru/README.md) +- [Tagalog](/contents/tl/README.md) +- [Polish (Polski)](contents/pl/README.md) +- [Portugese](contents/pr/README.md) + +## Related + +If you are interested in how data structures are implemented, check out [Lago](https://github.com/yangshun/lago), a Data Structures and Algorithms library for JavaScript. It is pretty much still WIP but I intend to make it into a library that is able to be used in production and also a reference resource for revising Data Structures and Algorithms. + +## Contributing + +### Code of Conduct + +We have adopted the same Code of Conduct as Facebook that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated. + +### Contributing Guide + +Read our [contributing guide](/CONTRIBUTING.md) to learn about how you can contribute, how to propose improvements or if you are interested in translating the content. + +### Supporting + +Many hours of hard work have gone into this project. Your support will be very appreciated! + +Buy Me A Coffee + +## License + +All projects and packages in this repository are [MIT licensed](/LICENSE). diff --git a/questions/css-questions.md b/contents/en/questions/css-questions.md similarity index 100% rename from questions/css-questions.md rename to contents/en/questions/css-questions.md diff --git a/questions/html-questions.md b/contents/en/questions/html-questions.md similarity index 100% rename from questions/html-questions.md rename to contents/en/questions/html-questions.md diff --git a/questions/javascript-questions.md b/contents/en/questions/javascript-questions.md similarity index 100% rename from questions/javascript-questions.md rename to contents/en/questions/javascript-questions.md diff --git a/Translations/Japanese/README.md b/contents/jp/README.md similarity index 94% rename from Translations/Japanese/README.md rename to contents/jp/README.md index 8f0fc413b..ed0d34325 100644 --- a/Translations/Japanese/README.md +++ b/contents/jp/README.md @@ -30,13 +30,13 @@ ## 各国語版 - [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Tagalog](/contents/tl/README.md) +- [Japanese (日本語)](/contents/jp/README.md) **製作中** -- [Korean (한국어)](/Translations/Korean/README.md) +- [Korean (한국어)](/contents/kr/README.md) ## 関連情報 diff --git a/Translations/Japanese/questions/css-questions.md b/contents/jp/questions/css-questions.md similarity index 100% rename from Translations/Japanese/questions/css-questions.md rename to contents/jp/questions/css-questions.md diff --git a/Translations/Japanese/questions/html-questions.md b/contents/jp/questions/html-questions.md similarity index 100% rename from Translations/Japanese/questions/html-questions.md rename to contents/jp/questions/html-questions.md diff --git a/Translations/Japanese/questions/javascript-questions.md b/contents/jp/questions/javascript-questions.md similarity index 100% rename from Translations/Japanese/questions/javascript-questions.md rename to contents/jp/questions/javascript-questions.md diff --git a/Translations/Korean/README.md b/contents/kr/README.md similarity index 93% rename from Translations/Korean/README.md rename to contents/kr/README.md index a633ab27f..c48bf4c22 100644 --- a/Translations/Korean/README.md +++ b/contents/kr/README.md @@ -34,10 +34,10 @@ ## 번역 - [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) -- [Korean (한국어)](/Translations/Korean/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Tagalog](/contents/tl/README.md) +- [Japanese (日本語)](/contents/jp/README.md) +- [Korean (한국어)](/contents/kr/README.md) ## 관련 정보 diff --git a/Translations/Korean/questions/css-questions.md b/contents/kr/questions/css-questions.md similarity index 100% rename from Translations/Korean/questions/css-questions.md rename to contents/kr/questions/css-questions.md diff --git a/Translations/Korean/questions/html-questions.md b/contents/kr/questions/html-questions.md similarity index 100% rename from Translations/Korean/questions/html-questions.md rename to contents/kr/questions/html-questions.md diff --git a/Translations/Korean/questions/javascript-questions.md b/contents/kr/questions/javascript-questions.md similarity index 100% rename from Translations/Korean/questions/javascript-questions.md rename to contents/kr/questions/javascript-questions.md diff --git a/Translations/Polish/README.md b/contents/pl/README.md similarity index 87% rename from Translations/Polish/README.md rename to contents/pl/README.md index 44600f17f..fac15c352 100644 --- a/Translations/Polish/README.md +++ b/contents/pl/README.md @@ -39,19 +39,19 @@ Możesz być zainteresowany [Tech Interview Handbook](https://github.com/yangshu ## Spis treści -1. [Pytania HTML](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/Translations/Polish/questions/html-questions.md) -2. [Pytania CSS](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/Translations/Polish/questions/css-questions.md) -3. [Pytania JavaScript](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/Translations/Polish/questions/javascript-questions.md) +1. [Pytania HTML](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/contents/pl/questions/html-questions.md) +2. [Pytania CSS](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/contents/pl/questions/css-questions.md) +3. [Pytania JavaScript](https://github.com/mbiesiad/front-end-interview-handbook/blob/master/contents/pl/questions/javascript-questions.md) ## Tłumaczenia - [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) -- [Korean (한국어)](/Translations/Korean/README.md) -- [Russian (Русский)](/Translations/Russian/README.md) -- [Polish (Polski)](/Translations/Polish/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Tagalog](/contents/tl/README.md) +- [Japanese (日本語)](/contents/jp/README.md) +- [Korean (한국어)](/contents/kr/README.md) +- [Russian (Русский)](/contents/ru/README.md) +- [Polish (Polski)](/contents/pl/README.md) ## Powiązane @@ -77,5 +77,6 @@ Wiele godzin ciężkiej pracy poświęcono temu projektowi. Wasze wsparcie będz Wszystkie projekty i pakiety w tym repozytorium są objęte [licencją MIT](/LICENSE). -___________________________ +--- + Stworzone przez @[yangshun](https://github.com/yangshun) polska wersja od @[mbiesiad](https://github.com/mbiesiad) diff --git a/Translations/Polish/questions/css-questions.md b/contents/pl/questions/css-questions.md similarity index 100% rename from Translations/Polish/questions/css-questions.md rename to contents/pl/questions/css-questions.md diff --git a/Translations/Polish/questions/html-questions.md b/contents/pl/questions/html-questions.md similarity index 100% rename from Translations/Polish/questions/html-questions.md rename to contents/pl/questions/html-questions.md diff --git a/Translations/Polish/questions/javascript-questions.md b/contents/pl/questions/javascript-questions.md similarity index 100% rename from Translations/Polish/questions/javascript-questions.md rename to contents/pl/questions/javascript-questions.md diff --git a/Translations/Portuguese/README.md b/contents/pr/README.md similarity index 93% rename from Translations/Portuguese/README.md rename to contents/pr/README.md index b0f4a4ec1..8ec979be3 100644 --- a/Translations/Portuguese/README.md +++ b/contents/pr/README.md @@ -30,13 +30,13 @@ Podes estar interessado no [Tech Interview Handbook](https://github.com/yangshun ## Traduções - [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Tagalog](/contents/tl/README.md) +- [Japanese (日本語)](/contents/jp/README.md) **Em Progresso** -- [Korean (한국어)](/Translations/Korean/README.md) +- [Korean (한국어)](/contents/kr/README.md) ## Relacionados diff --git a/Translations/Portuguese/questions/html-questions.md b/contents/pr/questions/html-questions.md similarity index 100% rename from Translations/Portuguese/questions/html-questions.md rename to contents/pr/questions/html-questions.md diff --git a/Translations/Russian/README.md b/contents/ru/README.md similarity index 94% rename from Translations/Russian/README.md rename to contents/ru/README.md index 78e0b3f1b..d01fa6b2f 100644 --- a/Translations/Russian/README.md +++ b/contents/ru/README.md @@ -38,11 +38,11 @@ ## Переводы - [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) -- [Korean (한국어))](/Translations/Korean/README.md) -- [Russian (Русский)](/Translations/Russian/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Tagalog](/contents/tl/README.md) +- [Japanese (日本語)](/contents/jp/README.md) +- [Korean (한국어))](/contents/kr/README.md) +- [Russian (Русский)](/contents/ru/README.md) ## Похожее diff --git a/Translations/Russian/questions/html-questions.md b/contents/ru/questions/html-questions.md similarity index 99% rename from Translations/Russian/questions/html-questions.md rename to contents/ru/questions/html-questions.md index 15cd5df65..2915a1f84 100644 --- a/Translations/Russian/questions/html-questions.md +++ b/contents/ru/questions/html-questions.md @@ -1,6 +1,6 @@ # Вопросы по HTML -Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/russian#html). +Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/contents/ru#html). - [Для чего нужен DOCTYPE?](#для-чего-нужен-doctype) - [Как следует оформлять страницу, содержимое которой может быть на разных языках?](#как-следует-оформлять-страницу-содержимое-которой-может-быть-на-разных-языках) diff --git a/Translations/Russian/questions/javascript-questions.md b/contents/ru/questions/javascript-questions.md similarity index 99% rename from Translations/Russian/questions/javascript-questions.md rename to contents/ru/questions/javascript-questions.md index 229c8201b..b7413305a 100644 --- a/Translations/Russian/questions/javascript-questions.md +++ b/contents/ru/questions/javascript-questions.md @@ -1,6 +1,6 @@ # Вопросы по JavaScript -Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по Javascript](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/russian#js). +Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по Javascript](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/contents/ru#js). - [Объясните делегирование событий](#объясните-делегирование-событий) - [Объясните, как `this` работает в JavaScript](#объясните-как-this-работает-в-javascript) @@ -227,7 +227,7 @@ const doubled = a.forEach((num, index) => { ```js const a = [1, 2, 3]; -const doubled = a.map(num => { +const doubled = a.map((num) => { return num * 2; }); @@ -247,7 +247,7 @@ const doubled = a.map(num => { Они могут использоваться в IIFE для инкапсуляции кода в локальную область видимости, чтобы объявленные в ней переменные не попадали в глобальную область видимости. ```js -(function() { +(function () { // Здесь код функции. })(); ``` @@ -255,7 +255,7 @@ const doubled = a.map(num => { Как callback-функция, которая используется один раз и не должна использоваться где-либо еще. Код будет казаться более автономным и читаемым, когда обработчики будут определены прямо внутри вызывающего их кода, а не искать в другом месте, чтобы найти тело функции. ```js -setTimeout(function() { +setTimeout(function () { console.log("Hello world!"); }, 1000); ``` @@ -264,7 +264,7 @@ setTimeout(function() { ```js const arr = [1, 2, 3]; -const double = arr.map(function(el) { +const double = arr.map(function (el) { return el * 2; }); console.log(double); // [2, 4, 6] @@ -518,7 +518,7 @@ console.log(foo); // [Function: foo] // Функциональное выражение console.log(bar); // undefined bar(); // Uncaught TypeError: bar is not a function -var bar = function() { +var bar = function () { console.log("BARRRR"); }; console.log(bar); // [Function: bar] @@ -902,7 +902,7 @@ function foo() { ```js foo(); // Uncaught TypeError: foo is not a function -var foo = function() { +var foo = function () { console.log("FOOOOO"); }; ``` @@ -1059,9 +1059,9 @@ class Student extends Person { Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение `this` устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, `this` всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной: ```js -const Person = function(firstName) { +const Person = function (firstName) { this.firstName = firstName; - this.sayName1 = function() { + this.sayName1 = function () { console.log(this.firstName); }; this.sayName2 = () => { @@ -1118,7 +1118,7 @@ const names = ["irish", "daisy", "anna"]; Императивное решение будет выглядеть так: ```js -const transformNamesToUppercase = function(names) { +const transformNamesToUppercase = function (names) { const results = []; for (let i = 0; i < names.length; i++) { results.push(names[i].toUpperCase()); @@ -1131,8 +1131,8 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA'] Воспользууемся `.map(transformerFn)`, чтобы сделать код декларативным и более коротким: ```js -const transformNamesToUppercase = function(names) { - return names.map(name => name.toUpperCase()); +const transformNamesToUppercase = function (names) { + return names.map((name) => name.toUpperCase()); }; transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA'] ``` @@ -1267,7 +1267,7 @@ function curry(fn) { } function _curried(depth, args) { - return function(newArgument) { + return function (newArgument) { if (depth - 1 === 0) { return fn(...args, newArgument); } @@ -1307,7 +1307,7 @@ const result = putDookieInAnyArray(["I", "really", "don't", "like"]); // ["I", " const person = { name: "Todd", - age: 29 + age: 29, }; const copyOfTodd = { ...person }; @@ -1317,7 +1317,7 @@ const copyOfTodd = { ...person }; ```js function addFiveToABunchOfNumbers(...numbers) { - return numbers.map(x => x + 5); + return numbers.map((x) => x + 5); } const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15] @@ -1328,7 +1328,7 @@ const { e, f, ...others } = { e: 1, f: 2, g: 3, - h: 4 + h: 4, }; // e: 1, f: 2, others: { g: 3, h: 4 } ``` diff --git a/Translations/Tagalog/CONTRIBUTING.MD b/contents/tl/CONTRIBUTING.md similarity index 100% rename from Translations/Tagalog/CONTRIBUTING.MD rename to contents/tl/CONTRIBUTING.md diff --git a/Translations/Tagalog/README.md b/contents/tl/README.md similarity index 100% rename from Translations/Tagalog/README.md rename to contents/tl/README.md diff --git a/Translations/Tagalog/questions/css-questions.md b/contents/tl/questions/css-questions.md similarity index 100% rename from Translations/Tagalog/questions/css-questions.md rename to contents/tl/questions/css-questions.md diff --git a/Translations/Tagalog/questions/html-questions.md b/contents/tl/questions/html-questions.md similarity index 100% rename from Translations/Tagalog/questions/html-questions.md rename to contents/tl/questions/html-questions.md diff --git a/Translations/Tagalog/questions/javascript-questions.md b/contents/tl/questions/javascript-questions.md similarity index 100% rename from Translations/Tagalog/questions/javascript-questions.md rename to contents/tl/questions/javascript-questions.md diff --git a/Translations/Chinese/README.md b/contents/zh/README.md similarity index 91% rename from Translations/Chinese/README.md rename to contents/zh/README.md index 2a8dfdcb5..572420655 100644 --- a/Translations/Chinese/README.md +++ b/contents/zh/README.md @@ -30,13 +30,13 @@ ## 翻译 - [English](/README.md) -- [Simplified Chinese (简体中文)](/Translations/Chinese/README.md) -- [Tagalog](/Translations/Tagalog/README.md) -- [Japanese (日本語)](/Translations/Japanese/README.md) +- [Simplified Chinese (简体中文)](/contents/zh/README.md) +- [Tagalog](/contents/tl/README.md) +- [Japanese (日本語)](/contents/jp/README.md) **进行中** -- [Korean (한국어)](/Translations/Korean/README.md) +- [Korean (한국어)](/contents/kr/README.md) ## 相关 diff --git a/Translations/Chinese/questions/css-questions.md b/contents/zh/questions/css-questions.md similarity index 100% rename from Translations/Chinese/questions/css-questions.md rename to contents/zh/questions/css-questions.md diff --git a/Translations/Chinese/questions/html-questions.md b/contents/zh/questions/html-questions.md similarity index 100% rename from Translations/Chinese/questions/html-questions.md rename to contents/zh/questions/html-questions.md diff --git a/Translations/Chinese/questions/javascript-questions.md b/contents/zh/questions/javascript-questions.md similarity index 100% rename from Translations/Chinese/questions/javascript-questions.md rename to contents/zh/questions/javascript-questions.md