Automating Translations Round 3006

build/template..mjs

@@ -0,0 +1,15 @@
+const exports = Object.assign({
+    "myfunction": (a) => { console.log(`the square of ${a} is ${a*a}`) }
+}, {
+    "__main__": () => exports.myfunction(Math.PI)
+});
+
+if (process.argv.length > 1 && import.meta) {
+    import("querystring").then(querystring => {
+        if (`file:///${process.argv[1].replace(/\\/g, "/")}` === querystring.unescape(import.meta.url)) {
+            exports.__main__();
+        }
+    });
+}
+
+export default exports;

gulpfile.mjs

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import gulp from 'gulp';
+import parseMD from 'parse-md'
+
+const headers = {
+    general: "#### [[⬆]](#toc) <a name='general'>General Questions:</a>",
+    css: "#### [[⬆]](#toc) <a name='css'>CSS Questions:</a>",
+    js: "#### [[⬆]](#toc) <a name='js'>JS Questions:</a>",
+    coding: "#### [[⬆]](#toc) <a name='code-questions'>Coding Questions:</a>",
+    testing: "#### [[⬆]](#toc) <a name='testing'>Testing Questions:</a>",
+    html: "#### [[⬆]](#toc) <a name='html'>HTML Questions:</a>",
+    performance: "#### [[⬆]](#toc) <a name='performance'>Performance Questions:</a>",
+    network: "#### [[⬆]](#toc) <a name='network'>Network Questions:</a>",
+    fun: "#### [[⬆]](#toc) <a name='fun'>Fun Questions:</a>"
+}
+
+const files = {
+    coding: "./src/questions/coding-questions.md",
+    css: "./src/questions/css-questions.md",
+    fun: "./src/questions/fun-questions.md",
+    general: "./src/questions/general-questions.md",
+    html: "./src/questions/html-questions.md",
+    javascript: "./src/questions/javascript-questions.md",
+    performance: "./src/questions/performance-questions.md",
+    network: "./src/questions/network-questions.md",
+    testing: "./src/questions/testing-questions.md"
+}
+
+
+
+function writeTmpl() {
+    let tmpl = 
+    `
+${fs.readFileSync("./src/_includes/md/header.md",(err)=>{console.log(err)})}
+${headers["general"]}
+${fs.readFileSync(files["general"],(err)=>{console.log(err)})}
+${headers["css"]}
+${fs.readFileSync(files["css"],(err)=>{console.log(err)})}
+${headers["js"]}
+${fs.readFileSync(files["javascript"],(err)=>{console.log(err)})}
+${headers["coding"]}
+${fs.readFileSync(files["coding"],(err)=>{console.log(err)})}
+${headers["testing"]}
+${fs.readFileSync(files["testing"],(err)=>{console.log(err)})}
+${headers["html"]}
+${fs.readFileSync(files["html"],(err)=>{console.log(err)})}
+${headers["performance"]}
+${fs.readFileSync(files["performance"],(err)=>{console.log(err)})}
+${headers["network"]}
+${fs.readFileSync(files["network"],(err)=>{console.log(err)})}
+${headers["fun"]}
+${fs.readFileSync(files["fun"],(err)=>{console.log(err)})}
+    `
+     return tmpl.replace(/---\n.*\n.*\n.*\n---/gm,"");
+
+
+}
+
+gulp.task("template", (done) => {
+
+    fs.writeFileSync("./src/translations/_template/README.md",writeTmpl(),(err)=>{console.log(err)})
+
+    done();
+});
+
+
+gulp.task("default", gulp.series("template"));
+

package.json

@@ -41,6 +41,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "all-contributors-cli": "^6.26.1",
     "clean-css": "^5.3.3",
+    "gulp": "^5.0.0",
     "html-minifier": "^4.0.0",
     "luxon": "^3.4.4",
     "markdown-it": "^14.1.0",
@@ -49,5 +50,8 @@
   },
   "resolutions": {
     "axios": "0.18.1"
+  },
+  "dependencies": {
+    "parse-md": "^3.0.3"
   }
 }

src/_includes/md/header.md

@@ -0,0 +1,18 @@
+---
+title: Front End Developer Interview Questions
+layout: layouts/page.njk
+permalink: /translations/************/index.html
+---
+
+       
+## <a name='toc'>Table of Contents</a>
+
+1. [General Questions](#general)
+1. [CSS Questions](#css)
+1. [JS Questions](#js)
+1. [JS Questions](#coding)
+1. [Testing Questions](#testing)
+1. [HTML Questions](#html)
+1. [Performance Questions](#performance)
+1. [Network Questions](#network)
+1. [Fun Questions](#fun)

src/translations/_template/README.md

@@ -1,23 +1,21 @@
----
-title: Front End Developer Interview Questions
-layout: layouts/page.njk
-permalink: /translations/************/index.html
----
 
+        
 
+       
 ## <a name='toc'>Table of Contents</a>
 
 1. [General Questions](#general)
-1. [HTML Questions](#html)
 1. [CSS Questions](#css)
 1. [JS Questions](#js)
+1. [JS Questions](#coding)
 1. [Testing Questions](#testing)
+1. [HTML Questions](#html)
 1. [Performance Questions](#performance)
 1. [Network Questions](#network)
 1. [Fun Questions](#fun)
 
-
-#### [[⬆]](#toc) <a name='general'>General Questions:</a>
+        #### [[⬆]](#toc) <a name='general'>General Questions:</a>
+        
 
 * What did you learn yesterday/this week?
 * What excites or interests you about coding?
@@ -47,30 +45,13 @@ permalink: /translations/************/index.html
 * What resources do you use to learn about the latest in front end development and design?
 * What skills are needed to be a good front-end developer?
 * What role do you see yourself in?
-* Explain the difference between cookies, session storage, and local storage?
 * Can you explain what happens when you enter a URL into the browser?
-* Describe the difference between SSR and CSR. Discuss the pros and cons.
+* Describe the difference between SSR and CSR. Discuss the pros and cons. 
   * Are you familiar with static rendering?
   * Rehydration?
 
-#### [[⬆]](#toc) <a name='html'>HTML Questions:</a>
-
-* What does a `doctype` do?
-* How do you serve a page with content in multiple languages?
-* What kind of things must you be wary of when designing or developing for multilingual sites?
-* What are `data-` attributes good for?
-* Consider HTML5 as an open web platform. What are the building blocks of HTML5?
-* Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
-* Describe the difference between `<script>`, `<script async>` and `<script defer>`.
-* Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
-* What is progressive rendering?
-* Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
-* Have you used different HTML templating languages before?
-* What is the difference between `canvas` and `svg`?
-* What are empty elements in HTML ?
-
-
-#### [[⬆]](#toc) <a name='css'>CSS Questions:</a>
+        #### [[⬆]](#toc) <a name='css'>CSS Questions:</a>
+        
 
 * What is CSS selector specificity and how does it work?
 * What is the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
@@ -106,11 +87,12 @@ permalink: /translations/************/index.html
 * How is clearfix css property useful?
 * Can you explain the difference between px, em and rem as they relate to font sizing?
 * Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class? 
-* What is the difference between a block level element and an inline element. Can you provide examples of each type of element?
+* What is the difference between a block level element and an inline element? Can you provide examples of each type of element?
 * What is the difference between CSS Grid and Flexbox? When would you use one over the other?
-* What is the difference between fixed, fluid and responsive layouts?
+* What is the difference between fixed, fluid and responsive layouts? 
 
-#### [[⬆]](#toc) <a name='js'>JS Questions:</a>
+        #### [[⬆]](#toc) <a name='js'>JS Questions:</a>
+        
 
 * Explain event delegation.
 * Explain how `this` works in JavaScript.
@@ -121,6 +103,7 @@ permalink: /translations/************/index.html
 * What is a closure, and how/why would you use one?
 * What language constructions do you use for iterating over object properties and array items?
 * Can you describe the main difference between the `Array.forEach()` loop and `Array.map()` methods and why you would pick one versus the other?
+  * Сan you describe other popular methods for iterating over arrays?
 * What is a typical use case for anonymous functions?
 * What is the difference between host objects and native objects?
 * Explain the difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
@@ -148,6 +131,7 @@ permalink: /translations/************/index.html
 * What is event loop?
   * What is the difference between call stack and task queue?
 * What are the differences between variables created using `let`, `var` or `const`?
+  * Can you change a property of an object defined via `const`? How you can change this behavior?
 * 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?
@@ -161,8 +145,10 @@ permalink: /translations/************/index.html
 * What is the difference between `while` and `do-while` loops in JavaScript?
 * What is a promise? Where and how would you use promise?
 * Discuss how you might use Object Oriented Programming principles when coding with JavaScript.
+* What is the difference between `event.target` and `event.currentTarget`?
+* What is the difference between `event.preventDefault()` and `event.stopPropagation()`?
 
-#### [[⬆]](#toc) <a name='code-questions'>Coding Questions:</a>
+## Coding questions
 * Make this work:
 ```javascript
 duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
@@ -175,23 +161,149 @@ console.log("foo" && "bar")
 ```
 * Write an immediately invoked function expression (IIFE)
 
+        #### [[⬆]](#toc) <a name='code-questions'>Coding Questions:</a>
+        
+
+Question: What is the value of `foo`?
+```javascript
+var foo = 10 + '20';
+```
+
+Question: What will be the output of the code below?
+```javascript
+console.log(0.1 + 0.2 == 0.3);
+```
+
+Question: How would you make this work?
+```javascript
+add(2, 5); // 7
+add(2)(5); // 7
+```
+
+Question: What value is returned from the following statement?
+```javascript
+"i'm a lasagna hog".split("").reverse().join("");
+```
+
+Question: What is the value of `window.foo`?
+```javascript
+( window.foo || ( window.foo = "bar" ) );
+```
+
+Question: What is the outcome of the two alerts below?
+```javascript
+var foo = "Hello";
+(function() {
+  var bar = " World";
+  alert(foo + bar);
+})();
+alert(foo + bar);
+```
+
+Question: What is the value of `foo.length`?
+```javascript
+var foo = [];
+foo.push(1);
+foo.push(2);
+```
+
+Question: What is the value of `foo.x`?
+```javascript
+var foo = {n: 1};
+var bar = foo;
+foo.x = foo = {n: 2};
+```
+
+Question: What does the following code print?
+```javascript
+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?
+```javascript
+doSomething().then(function () {
+  return doSomethingElse();
+});
 
-#### [[⬆]](#toc) <a name='testing'>Testing Questions:</a>
+doSomething().then(function () {
+  doSomethingElse();
+});
+
+doSomething().then(doSomethingElse());
+
+doSomething().then(doSomethingElse);
+```
+
+Question: What will the code below output to the console and why?
+```javascript
+(function(){
+  var a = b = 3;
+})();
+
+console.log("a defined? " + (typeof a !== 'undefined'));
+console.log("b defined? " + (typeof b !== 'undefined'));
+```
+
+Question: Consider the two functions below. Will they both return the same thing? Why or why not?
+```javascript
+function foo1()
+{
+  return {
+      bar: "hello"
+  };
+}
+
+function foo2()
+{
+  return
+  {
+      bar: "hello"
+  };
+}
+```
+
+        #### [[⬆]](#toc) <a name='testing'>Testing Questions:</a>
+        
 
 * What are some advantages/disadvantages to testing your code?
 * What tools would you use to test your code's functionality?
 * What is the difference between a unit test and a functional/integration test?
 * What is the purpose of a code style linting tool?
 * What are some of the testing best practices?
 
+        #### [[⬆]](#toc) <a name='html'>HTML Questions:</a>
+        
+
+* What does a `doctype` do?
+* How do you serve a page with content in multiple languages?
+* What kind of things must you be wary of when designing or developing for multilingual sites?
+* What are `data-` attributes good for?
+* Consider HTML5 as an open web platform. What are the building blocks of HTML5?
+* Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
+* Describe the difference between `<script>`, `<script async>` and `<script defer>`.
+* Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
+* What is progressive rendering?
+* Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
+* Have you used different HTML templating languages before?
+* What is the difference between `canvas` and `svg`?
+* What are empty elements in HTML?
 
-#### [[⬆]](#toc) <a name='performance'>Performance Questions:</a>
+        #### [[⬆]](#toc) <a name='performance'>Performance Questions:</a>
+        
 
 * 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.
 
-#### [[⬆]](#toc) <a name='network'>Network Questions:</a>
+        #### [[⬆]](#toc) <a name='network'>Network Questions:</a>
+        
 
 * 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.
@@ -207,9 +319,14 @@ console.log("foo" && "bar")
 * What is domain pre-fetching and how does it help with performance?
 * What is a CDN and what is the benefit of using one?
 
-#### [[⬆]](#toc) <a name='fun'>Fun Questions:</a>
+        #### [[⬆]](#toc) <a name='fun'>Fun Questions:</a>
+        
 
 * What is a cool project that you've recently worked on?
 * What are some things you like about the developer tools you use?
 * Who inspires you in the front-end community?
 * Do you have any pet projects? What kind?
+
+
+
+