{"id":2388,"date":"2022-08-30T13:22:27","date_gmt":"2022-08-30T13:22:27","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2388"},"modified":"2022-08-30T13:22:27","modified_gmt":"2022-08-30T13:22:27","slug":"frontend-interview-cheatsheet-that-helped-me-get-offers-from-amazon-linkedin","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2388","title":{"rendered":"Frontend Interview Cheatsheet That Helped Me Get Offers From Amazon &#038; LinkedIn"},"content":{"rendered":"\n<h1 id=\"93de\">Intro<\/h1>\n\n\n\n<p id=\"7b59\">Of course, there is not enough space to fit all the frontend knowledge into one article. And this is not what this cheatsheet wants to achieve.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p id=\"7b59\"> This is just a shortcut of frontend topic, that each sr frontend engineer has to be familiar with. They are frequently raised in interviews and helped me to get an offer on Amazon and LinkedIn. Enjoy reading, and feel free to dive deeper by clicking on the topic link ?<\/p>\n\n\n\n<h1 id=\"f45b\">Web Knowledge<\/h1>\n\n\n\n<p id=\"21a5\"><strong><em>1. Caching<\/em><\/strong><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Cache-Control\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Cache-Control<\/em><\/strong><\/a>: instruction of request and response cache;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/ETag\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Etag<\/em><\/strong><\/a><em>: &lt;cache_id&gt;<\/em>check if the resource was updated by comparing&nbsp;<em>&lt;cache_id&gt;<\/em>, if not \u2014 update the cached version;<\/li><\/ul>\n\n\n\n<p id=\"4f67\"><strong><em>2.&nbsp;<\/em><\/strong><a href=\"https:\/\/www.sitepoint.com\/http2-the-pros-the-cons-and-what-you-need-to-know\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>HTTP\/2<\/em><\/strong><\/a><\/p>\n\n\n\n<p id=\"ff59\"><em>Pros:<\/em><\/p>\n\n\n\n<ul><li>Multiple HTTP connection calls (HTTP\/1 supports only 6);<\/li><li>A server can push an event to a client;<\/li><li>Compress headers;<\/li><li>More secure<\/li><\/ul>\n\n\n\n<p id=\"b88a\"><em>Cons:<\/em><\/p>\n\n\n\n<ul><li>Server push can be abused;<\/li><li>Can be slower if LB (Load Balancer) supports HTTP\/1 and server HTTP\/2<\/li><\/ul>\n\n\n\n<p id=\"48af\"><strong><em>3. Security<\/em><\/strong><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.geeksforgeeks.org\/http-headers-transfer-encoding\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Transfer-Encoding<\/em><\/a><em>&nbsp;<\/em>\u2014 defines how to encrypt body:&nbsp;<em>chunked<\/em>,&nbsp;<em>gzip;<\/em><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Access-Control-Allow-Origin\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Access-Control-Allow-Origin<\/em><\/a><em>&nbsp;<\/em>(Cross-Origin Resource Sharing \u2014 CORS) Defines a list of domains that can access the API of the origin domain;<\/li><li><a href=\"https:\/\/www.w3schools.com\/js\/js_json_jsonp.asp#:~:text=JSONP%20stands%20for%20JSON%20with,instead%20of%20the%20XMLHttpRequest%20object.\" rel=\"noreferrer noopener\" target=\"_blank\"><em>JSONP<\/em><\/a>&nbsp;\u2014 run script to access cross-domain data (old browser);<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/X-Frame-Options\" rel=\"noreferrer noopener\" target=\"_blank\"><em>X-Frame-Options<\/em><\/a>&nbsp;\u2014 Prevent clickjacking from iframe;<\/li><li><a href=\"https:\/\/owasp.org\/www-community\/attacks\/csrf\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Cross-Site Request Forgery<\/em><\/a><strong>&nbsp;(<\/strong>CSRF).&nbsp;<em>Attack<\/em>: user has a session (logged in), attacker creates link, user clicks on the link and performs the request, attacker steals user session.&nbsp;<em>Prevent:&nbsp;<\/em>captcha, log out from visited site;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/CSP\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Content-Security-Policy<\/em><\/a>&nbsp;\u2014 prevent from execution harmful code;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/X-XSS-Protection\" rel=\"noreferrer noopener\" target=\"_blank\"><em>X-XSS-Protection<\/em><\/a>&nbsp;\u2014 Enable XSS protection for old sites;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Feature-Policy\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Feature-Policy<\/em><\/a><em>&nbsp;\u2014&nbsp;<\/em>Disable not needed Browser features;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Referrer-Policy\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Referrer-Policy<\/em><\/a>&nbsp;\u2014 when there is a link to another website from your site, by clicking it will send the URL of origin which can contain some sensitive data (user id, session);<\/li><li>Don&#8217;t allow the user to input any HTML&nbsp;<code>innerHtml<\/code>&nbsp;;<\/li><li>Use UI frameworks, keep node_modules updated, and limit of usage 3rd party services;<\/li><\/ul>\n\n\n\n<h1 id=\"59ff\">Web Performance<\/h1>\n\n\n\n<p id=\"cfb1\"><strong><em>1.&nbsp;<\/em><\/strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/Critical_rendering_path\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Critical Rendering Path<\/em>&nbsp;<\/strong><\/a>\u2014 steps browser makes to paint the page. The steps are:<\/p>\n\n\n\n<ul><li><em>DOM<\/em>&nbsp;\u2014 browser compiles the Document Object Model;<\/li><li><em>CSSOM<\/em>&nbsp;\u2014 browser compiles the CSS Object Model;<\/li><li><em>Render Tree&nbsp;<\/em>\u2014 browser combines DOM and CSSOM to render the tree;<\/li><li><em>Layout<\/em>&nbsp;\u2014 browser computes the size and position of each of the objects;<\/li><li><em>Paint<\/em>&nbsp;\u2014 browser converts the tree into the pixels in the screen;<\/li><\/ul>\n\n\n\n<p id=\"876a\">Optimize&nbsp;<strong><em>CRP:<\/em><\/strong><\/p>\n\n\n\n<ul><li><em>Optimize the order of sources<\/em>&nbsp;\u2014 load critical resources as soon as possible;<\/li><li><em>Minimize the number of sources<\/em>&nbsp;\u2014 reduce the number, load async;<\/li><\/ul>\n\n\n\n<p id=\"5178\"><strong><em>2.&nbsp;<\/em><\/strong><a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/browser-reflow\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Reflow<\/em><\/strong><\/a><em>&nbsp;\u2014<\/em>Browser<em>&nbsp;<\/em>recalculates the position and geometries of the elements after rerender.<\/p>\n\n\n\n<p id=\"a002\">Optimize&nbsp;<strong><em>Reflow:<\/em><\/strong><\/p>\n\n\n\n<ul><li>reduce DOM depths;<\/li><li>avoid long CSS selectors, minimize rules;<\/li><\/ul>\n\n\n\n<p id=\"b7ea\"><strong><em>3. preload, preconnect, prefetch, prerender<\/em><\/strong><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Link_types\/preload\" rel=\"noreferrer noopener\" target=\"_blank\"><em>preload<\/em><\/a><em>&nbsp;\u2014&nbsp;<\/em>loads high prior sources that need to be loaded faster<code>&lt;link rel=\"preload\"&gt;<\/code>&nbsp;;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Link_types\/preconnect\" rel=\"noreferrer noopener\" target=\"_blank\"><em>preconnect&nbsp;<\/em><\/a><em>\u2014&nbsp;<\/em>If some resources are required to accelerate handshake, use<code>&lt;link rel=\"preconnect\"&gt;<\/code>to reduce latency;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Prefetch\" rel=\"noreferrer noopener\" target=\"_blank\"><em>prefetch<\/em><\/a>&nbsp;\u2014 loads low prior resources and cache&nbsp;<code>&lt;link rel=\"prefetch\"&gt;<\/code>;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/dns-prefetch\" rel=\"noreferrer noopener\" target=\"_blank\"><em>dns-prefetch<\/em><\/a>\u2014reduce latency of resolving domain names before resources get requested&nbsp;<code>&lt;link rel=\"dns-prefetch\"&gt;<\/code>;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/prerender\" rel=\"noreferrer noopener\" target=\"_blank\">prerender<\/a>&nbsp;\u2014 similar to&nbsp;<em>prefetch<\/em>&nbsp;+ caches whole the page&nbsp;<code>&lt;link rel=\"prerender\"&gt;<\/code>&nbsp;;<\/li><\/ul>\n\n\n\n<p id=\"3a67\"><strong><em>4. Rendering Performance<\/em><\/strong><\/p>\n\n\n\n<p id=\"7b25\"><strong>JS:<\/strong><\/p>\n\n\n\n<ul><li>Move the heavy task to the&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\" rel=\"noreferrer noopener\" target=\"_blank\">web worker<\/a>;<\/li><li>Use&nbsp;<code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\" rel=\"noreferrer noopener\" target=\"_blank\">requestAnimatinFrame<\/a><\/code>&nbsp;instead of&nbsp;<code>setTimeout<\/code>to perform animation;<\/li><\/ul>\n\n\n\n<p id=\"bac7\"><strong>Style:<\/strong><\/p>\n\n\n\n<ul><li>reduce the complexity of selectors;<\/li><li>Reduce the number of elements on which style calculation must be applied;<\/li><\/ul>\n\n\n\n<p id=\"2274\"><strong>Layout:<\/strong>&nbsp;(how an element is positioned and sized)<\/p>\n\n\n\n<ul><li>Avoid layout changes;<\/li><li>Use&nbsp;<code><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" rel=\"noreferrer noopener\" target=\"_blank\">flexbox<\/a><\/code>;<\/li><li>Use&nbsp;<code><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/itnext.io\/how-i-learned-css-grid-in-5-min-ec6439d8bf0\">css-grid<\/a><\/code>;<\/li><\/ul>\n\n\n\n<p id=\"04e2\"><strong>Paint:<\/strong>&nbsp;(draw pixels: color, shadows; layout changes trigger repaint)<\/p>\n\n\n\n<ul><li>Use&nbsp;<code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/will-change\" rel=\"noreferrer noopener\" target=\"_blank\">will-change<\/a><\/code>&nbsp;to optimize layout repaint;<\/li><\/ul>\n\n\n\n<p id=\"88cf\"><strong><em>5. Workers<\/em><\/strong><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/ServiceWorker\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Service Worker&nbsp;<\/em><\/a><em>\u2014&nbsp;<\/em>interceptor to build an offline app;<\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Worker\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Web Worker<\/em><\/a><em>&nbsp;\u2014&nbsp;<\/em>perform heavy tasks on background;<\/li><\/ul>\n\n\n\n<p id=\"d8e2\"><strong><em>6. Image optimization<\/em><\/strong><\/p>\n\n\n\n<p id=\"f1ec\"><strong>Format<\/strong><em>:<\/em><\/p>\n\n\n\n<ul><li>if animation \u2014 use&nbsp;<code>&lt;video&gt;<\/code>instead&nbsp;<em>gif<\/em><\/li><li>if high details and resolution \u2014&nbsp;<em>PNG<\/em><\/li><li>if geometry shapes \u2014&nbsp;<em>SVG<\/em><\/li><li>if text logo \u2014 use font text<\/li><li>if photo \u2014&nbsp;<em>JPEG<\/em><\/li><\/ul>\n\n\n\n<p id=\"1fb5\"><strong>Compression<\/strong><em>:<\/em><\/p>\n\n\n\n<ul><li><em>SVG<\/em>&nbsp;\u2014 use optimizer (like&nbsp;<a href=\"https:\/\/github.com\/svg\/svgo\" rel=\"noreferrer noopener\" target=\"_blank\">SVGO<\/a>), use gzip;<\/li><li><em>WebP<\/em>&nbsp;\u2014 use optimized image format for Web;<\/li><li>Remove metadata attributes from&nbsp;<em>SVG tag;<\/em><\/li><li>Use&nbsp;<a href=\"https:\/\/www.w3schools.com\/css\/css_image_sprites.asp\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Sprites<\/em><\/a>;<\/li><\/ul>\n\n\n\n<p id=\"1181\"><strong>Cache and Lazy Load<\/strong><em>:<\/em><\/p>\n\n\n\n<ul><li>Use&nbsp;<a href=\"https:\/\/aws.amazon.com\/cloudfront\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>CDN<\/em><\/a>&nbsp;for distributing static data;<\/li><li><em>Lazy Load<\/em>&nbsp;images and videos \u2014 Use&nbsp;<code>&lt;img loading=\"lazy\"\/&gt;<\/code>&nbsp;or libraries like&nbsp;<a href=\"https:\/\/github.com\/aFarkas\/lazysizes\" rel=\"noreferrer noopener\" target=\"_blank\"><em>lazysizes<\/em><\/a>;<\/li><\/ul>\n\n\n\n<h1 id=\"b93f\">DOM<\/h1>\n\n\n\n<p id=\"6776\"><strong><em>1. Elements<\/em><\/strong><\/p>\n\n\n\n<ul><li><strong>selector:<\/strong>&nbsp;<code>getElementById<\/code>,&nbsp;<code>getElementByTagName<\/code>,&nbsp;<code>querySelector<\/code>,<em>&nbsp;<\/em><code>querySelectorAll<\/code>;<\/li><li><strong>navigation:&nbsp;<\/strong><code>children<\/code>&nbsp;(elements):&nbsp;<code>childNodes<\/code>&nbsp;(nodes) ,&nbsp;<code>firstElementChild<\/code>,&nbsp;<code>lastElementChild<\/code>,&nbsp;<code>parentElement<\/code>,&nbsp;<code>previousElementSibling<\/code>,&nbsp;<code>nextElementSibling<\/code>;<\/li><li><strong>attributes:<\/strong>&nbsp;<code>classList<\/code>,&nbsp;<code>clientHeight<\/code>,&nbsp;<code>clientWidth<\/code>,&nbsp;<code>childElementCount<\/code>,<em>&nbsp;<\/em><code>setAttribute(attrName, value)<\/code>&nbsp;<code>removeAttribute(attrName)<\/code>&nbsp;<code>removeAttribute(attrName)<\/code>&nbsp;;<\/li><\/ul>\n\n\n\n<p id=\"c97c\"><strong><em>2. Manipulation<\/em><\/strong><\/p>\n\n\n\n<p id=\"32bd\"><code>createElement(\u2018div\u2019)<\/code>,&nbsp;<code>append<\/code>,&nbsp;<code>prepend<\/code>,&nbsp;<code>el.cloneNode(true)<\/code>,&nbsp;<code>remove()<\/code>,&nbsp;<code>insertBefore(newNode, beforeNode)<\/code>,&nbsp;<code>insertAfter(newNode, afterNode);<\/code><\/p>\n\n\n\n<p id=\"96ac\"><strong><em>3.&nbsp;<\/em><\/strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DocumentFragment\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Document Fragment<\/em><\/strong><\/a><em>&nbsp;\u2014&nbsp;<\/em>creates a virtual copy of a document, that can store multiple elements. By inserting&nbsp;<em>document fragment<\/em>&nbsp;into DOM, it becomes empty, and cause only one&nbsp;<a href=\"https:\/\/itnext.io\/frontend-interview-cheatsheet-that-helped-me-to-get-offer-on-amazon-and-linkedin-cba9584e33c7#5178\">reflow<\/a>;<\/p>\n\n\n\n<p id=\"7e69\"><strong><em>4.&nbsp;<\/em><\/strong><a href=\"https:\/\/programmingwithmosh.com\/javascript\/javascript-event-bubbling-and-event-delegation\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Event delegation and bubbling<\/em><\/strong><\/a><\/p>\n\n\n\n<ul><li>When we emit an&nbsp;<em>Event,&nbsp;<\/em>ex.&nbsp;<code>click<\/code>, the event is bubbling up to&nbsp;<code>&lt;html&gt;<\/code>&nbsp;element through the&nbsp;<code>parentElement<\/code>&nbsp;link:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">-html (bubble click)<br>   -body (bubble click)<br>        -div (bubble click)<br>            -p <br>            -p (click)<\/pre>\n\n\n\n<ul><li><em>Delegation<\/em>&nbsp;is used to improve performance. Let\u2019s say we have a structure:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">-div.parent<br>    -p.child <br>    -p.child<br>    -p.child<\/pre>\n\n\n\n<p id=\"2432\">And we want to assign an&nbsp;<code>addEventListener<\/code>&nbsp;to&nbsp;<code>.child<\/code>&nbsp;, in this case, we have to attach an event to 3 elements. Instead, we can attach events only to&nbsp;<code>.parent<\/code>&nbsp;and resolve the logic.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">document.querySelector(\".parent\").addEventListener(\"click\", function(event) {<br>    if (event.target.classList.contains(\"child\")) {<br>      \/\/ you logic is here<br>    };<br>});<\/pre>\n\n\n\n<h1 id=\"a4e7\">HTML<\/h1>\n\n\n\n<p id=\"fb9d\"><strong><em>1. Semantic Elements<\/em><\/strong>&nbsp;\u2014 clearly describes its meaning with its name to developer and browser:&nbsp;<code>&lt;article&gt;<\/code>,&nbsp;<code>&lt;aside&gt;<\/code>,&nbsp;<code>&lt;details&gt;<\/code>,&nbsp;<code>&lt;figcaption&gt;<\/code>,&nbsp;<code>&lt;figure&gt;<\/code>,&nbsp;<code>&lt;footer&gt;<\/code>,&nbsp;<code>&lt;header&gt;<\/code>,&nbsp;<code>&lt;main&gt;<\/code>,&nbsp;<code>&lt;mark&gt;<\/code>,&nbsp;<code>&lt;nav&gt;<\/code>,&nbsp;<code>&lt;section&gt;<\/code>,&nbsp;<code>&lt;summary&gt;<\/code>,&nbsp;<code>&lt;time&gt;<\/code>&nbsp;;<\/p>\n\n\n\n<p id=\"dd22\"><strong><em>2. Accessibility<\/em><\/strong><\/p>\n\n\n\n<ul><li>Use headers&nbsp;<code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;\u2026<\/code>&nbsp;;<\/li><li>Use&nbsp;<code>&lt;img alt=\u201d\u201d<\/code>;<\/li><li>Use attribute<code>tabindex=\u201dindex_position\u201d<\/code>&nbsp;to navigate the focus using&nbsp;<code>Tab<\/code>&nbsp;key;<\/li><li>Use&nbsp;<code>roles<\/code>&nbsp;like&nbsp;<code>&lt;ul role=\u201dlist\u201d&gt;&lt;li role=\u201dlistitem\u201d&gt;<\/code>,&nbsp;<code>&lt;dialog role=\u201ddialog\u201d<\/code>. Find the whole list&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>here<\/strong><\/a>;<\/li><li>Use&nbsp;<code>accesskey=\u201dkey\u201d<\/code>&nbsp;for creating keyboard shortcuts;<\/li><li>use attributes to describe the element:<code>aria-label=\u201dlabel_text\u201d<\/code>or&nbsp;<code>aria-labelledby=\u201dtext_id\u201d<\/code>,&nbsp;<code>aria-describedby=\u201dtext_id\u201d<\/code>&nbsp;and&nbsp;<code>&lt;label id=\"text_id\"&gt;label_text&lt;\/label&gt;<\/code>&nbsp;;<\/li><li>Use color contrasts, textures;<\/li><li>Use text size;<\/li><li>Use captions in a video;<\/li><\/ul>\n\n\n\n<p id=\"115c\"><strong><em>3. Responsive web<\/em><\/strong><\/p>\n\n\n\n<ul><li>Add&nbsp;<code>&lt;meta viewport name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\"<\/code>&nbsp;to give browser direction to scale;<\/li><li>Use&nbsp;<code>&lt;img max-width=\u201d100%\u201d<\/code>&nbsp;and the image will not scale more than its size;<\/li><li>Use&nbsp;<code>&lt;<a href=\"https:\/\/www.w3schools.com\/tags\/tag_picture.asp\" rel=\"noreferrer noopener\" target=\"_blank\">picture<\/a>&gt; &lt;source srcset=\u201d\u201d media=\u201d\u201d &gt;<\/code>&nbsp;to specify images for different screen sizes;<\/li><li>Responsive&nbsp;<a href=\"https:\/\/css-tricks.com\/confused-rem-em\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>font sizes<\/strong><\/a>:&nbsp;<code>em<\/code>&nbsp;and&nbsp;<code>rem<\/code>&nbsp;;<\/li><li>Use&nbsp;<a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/\" rel=\"noreferrer noopener\" target=\"_blank\">media queries<\/a>;<\/li><\/ul>\n\n\n\n<h1 id=\"071b\">Javascript<\/h1>\n\n\n\n<p>https:\/\/cdn.embedly.com\/widgets\/media.html?src=https%3A%2F%2Fgiphy.com%2Fembed%2F26tn33aiTi1jkl6H6%2Ftwitter%2Fiframe&#038;display_name=Giphy&#038;url=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F26tn33aiTi1jkl6H6%2Fgiphy.gif&#038;image=https%3A%2F%2Fi.giphy.com%2Fmedia%2F26tn33aiTi1jkl6H6%2Fgiphy.gif&#038;key=a19fcc184b9711e1b4764040d3dc5c07&#038;type=text%2Fhtml&#038;schema=giphy<\/p>\n\n\n\n<p id=\"84ab\"><strong><em>1.&nbsp;<\/em><\/strong><code><a href=\"https:\/\/javascript.info\/object-methods\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>this<\/em><\/strong><\/a><\/code><\/p>\n\n\n\n<ul><li><mark><code>this<\/code><\/mark><mark>&nbsp;is a reference to the object where a function is&nbsp;<\/mark><mark><strong>called<\/strong><\/mark><mark>;<\/mark><\/li><li>default&nbsp;<code>this<\/code>&nbsp;context is&nbsp;<code>window<\/code>;<\/li><li>context which function will get from the place it called;<\/li><li>arrow function&nbsp;<code>-&gt;<\/code>&nbsp;takes context which function is&nbsp;<strong>defined;<\/strong><\/li><li><code>this<\/code>&nbsp;loses context when we call one function inside another function<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">function Foo() {<br>    console.log(this); <br>}<br>Foo(); \/\/ at this line the context is 'window'<br>\/\/ output: 'window'var foo1 = new Foo(); \/\/ at this line the context binds to 'foo1'<br>\/\/ output: 'Foo {}'<\/pre>\n\n\n\n<ul><li>Explicitly assign the context of&nbsp;<code>this<\/code>&nbsp;:&nbsp;<code>foo1.apply(context, arrayOfArgs)<\/code>,&nbsp;<code>foo1.call(context, arg1, arg2, \u2026)<\/code>,&nbsp;<code>var foo2 = foo1.bind(context, arg1, arg2, \u2026)<\/code>\u2014 returns an instance of function with given context;<\/li><\/ul>\n\n\n\n<p id=\"84b2\"><strong><em>2.&nbsp;<\/em><\/strong><a href=\"https:\/\/javascript.info\/closure\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Closure<\/em><\/strong><\/a><strong><em>&nbsp;\u2014&nbsp;<\/em><\/strong>functions ability to remember and access scope even if was called from another scope (function return function\/block scope in block scope)<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function a(arg1) { \/\/ arg1 scoped<br>    var arg2 = 0; \/\/ arg2 scoped    return function b(){<br>        ++arg2;<br>        return arg1 + arg2;<br>    }<br>}var foo = a(2);<br>foo(); \/\/ 3<br>foo(); \/\/ 4<br>var foo2 = a(4);<br>foo(); \/\/ 5<br>foo(); \/\/ 6<\/pre>\n\n\n\n<p id=\"34f3\"><strong><em>3.&nbsp;<\/em><\/strong><a href=\"https:\/\/javascript.info\/prototype-inheritance\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Inheritance<\/em><\/strong><\/a><\/p>\n\n\n\n<ul><li>To inherit&nbsp;<code>obj1<\/code>&nbsp;from&nbsp;<code>obj2<\/code>&nbsp;, you can link an object to another object&nbsp;<code>var obj1 = Object.create(obj2);<\/code><\/li><li>JS uses prototype inheritance. Each object has a&nbsp;<code>__proto__<\/code>&nbsp;link. If we access any property of an object, the JS engine first checks if the object has it, if not \u2014 checks the prototype, and goes through&nbsp;<code>__proto__<\/code>&nbsp;chain to find the property name, and then throws&nbsp;<code>undefined<\/code>&nbsp;if didn\u2019t find;<\/li><\/ul>\n\n\n\n<p id=\"0728\"><strong><em>4.&nbsp;<\/em><\/strong><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/itnext.io\/the-evolution-of-asynchronous-patterns-in-javascript-64efc8938b16\"><strong><em>Asynchronous Javascript<\/em><\/strong><\/a><\/p>\n\n\n\n<ul><li><strong>Event loop<\/strong>: In JS there are 3 types of memory:&nbsp;<code>stack<\/code>&nbsp;used for functions call,&nbsp;<code>heap<\/code>&nbsp;for each of the objects,&nbsp;<code>queue<\/code>&nbsp;\u2014 setTimeout. JS engine executes the function&nbsp;<code>stack<\/code>&nbsp;first. If the&nbsp;<code>stack<\/code>&nbsp;is empty, it pops the event from&nbsp;<code>queue<\/code>. If the event&nbsp;<code>queue<\/code>&nbsp;has another function call, it pushes it to&nbsp;<code>stack<\/code>&nbsp;and executes it again until it is empty. This is called event loop;<\/li><li>JS uses&nbsp;<code>callback<\/code>,&nbsp;<code>promise<\/code>, async-await to implement asynchronous patterns. You can read more about&nbsp;<strong>async JS<\/strong>&nbsp;and&nbsp;<strong>event loop<\/strong>&nbsp;in this article:<\/li><\/ul>\n\n\n\n<p><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/itnext.io\/the-evolution-of-asynchronous-patterns-in-javascript-64efc8938b16\"><\/a><\/p>\n\n\n\n<h2><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/itnext.io\/the-evolution-of-asynchronous-patterns-in-javascript-64efc8938b16\">? The Evolution of Asynchronous Patterns in JavaScript<\/a><\/h2>\n\n\n\n<h3><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/itnext.io\/the-evolution-of-asynchronous-patterns-in-javascript-64efc8938b16\">Let\u2019s talk about async patterns used in JavaScript<\/a><\/h3>\n\n\n\n<p><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/itnext.io\/the-evolution-of-asynchronous-patterns-in-javascript-64efc8938b16\">itnext.io<\/a><\/p>\n\n\n\n<p id=\"3cb1\"><strong><em>5.&nbsp;<\/em><\/strong><a href=\"https:\/\/javascript.info\/var\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Hoisting<\/em><\/strong><\/a><\/p>\n\n\n\n<ul><li><code>function<\/code>&nbsp;definition moves to the top of block scope during JS compilation, then goes&nbsp;<code>var<\/code>&nbsp;;<\/li><li><code>let<\/code>&nbsp;and&nbsp;<code>const<\/code>&nbsp;are hoisted too but in the temporary dead zone;<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Code example              \/\/ After hoisting <br>1. console.log('hoisting');  1. function foo(){<br>2. var a;                    2.    return null;<br>3. function foo(){           3. }<br>4.    return null;           4. var a;<br>5. }                         5. console.log('hoisting');<br>6. a = 5;                    6. a = 5;<\/pre>\n\n\n\n<p id=\"59bc\"><strong><em>6.&nbsp;<\/em><\/strong><a href=\"https:\/\/javascript.info\/currying-partials\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Currying<\/em><\/strong><\/a><strong><em>&nbsp;<\/em><\/strong><em>\u2014 nested functions:<\/em><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">function calcABC(a){<br>    return function(b){<br>        return function(c){<br>            return a+b+c;<br>        }<br>    }<br>}console.log(calcABC(1)(2)(3));<br>\/\/ 6<\/pre>\n\n\n\n<p id=\"6b87\"><strong><em>7.&nbsp;<\/em><\/strong><a href=\"https:\/\/www.freecodecamp.org\/news\/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Higher-order functions<\/em><\/strong><\/a><\/p>\n\n\n\n<ul><li><code>map<\/code>,&nbsp;<code>reduce<\/code>,&nbsp;<code>filter<\/code>,&nbsp;<code>find<\/code><\/li><li>You can chain higher-order functions into&nbsp;<code>composition<\/code><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">[1,2,3,4,5].map((num) =&gt; ({age: num})).filter((el) =&gt; el.age &lt; 4);<br>\/\/ [{age: 1}, {age: 2}, {age: 3}]<\/pre>\n\n\n\n<h1 id=\"ebeb\">Design patterns<\/h1>\n\n\n\n<p id=\"88ca\"><strong><em>1.&nbsp;<\/em><\/strong><a href=\"https:\/\/javascript.info\/mixins\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Mixin<\/em><\/strong><\/a><strong><em>&nbsp;\u2014&nbsp;<\/em><\/strong>extend the functionality of an object with the list of methods;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Option 1<br>class Person{}let Mixin = {foo(){}};Object.assign(Person.prototype, Mixin);let person = new Person();person.foo();\/\/ Option 2let Mixin1 = {foo1(){}};let Mixin2  = {__proto__: Mixin1, foo2(){}};<\/pre>\n\n\n\n<p id=\"c627\"><strong><em>2.&nbsp;<\/em><\/strong><a href=\"https:\/\/www.javascripttutorial.net\/javascript-factory-functions\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Factory<\/em><\/strong><\/a><strong><em>&nbsp;<\/em><\/strong><em>\u2014 a&nbsp;<\/em>class<em>&nbsp;<\/em>that can create one or many different objects (useful if you want to generate different mock data in Unit Tests);<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">personFactory.one({name: 'John'}); -&gt; Person{name: 'John', age: 5}<br>personFactory.many(); -&gt; [Person{name: 'Bill', age: 7}, Person{name: 'Anna', age: 3}]<\/pre>\n\n\n\n<p id=\"862f\"><strong><em>3.&nbsp;<\/em><\/strong><a href=\"https:\/\/www.sitepoint.com\/javascript-design-patterns-singleton\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Singleton<\/em><\/strong><\/a><strong><em>&nbsp;<\/em><\/strong>\u2014 class which you can call the method directly, without creating an object;<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">let mySingleton = (function() {    let instance = null;    function init(){<br>        return {<br>           \/\/list all the methods           method(){}<br>        }<br>    }<br>    if(instance == null){<br>        instance = init();<br>    }    return instance;<br>})();mySingleton.method();<\/pre>\n\n\n\n<p id=\"0b77\"><strong><em>4.&nbsp;<\/em><\/strong><a href=\"https:\/\/www.dofactory.com\/javascript\/design-patterns\/facade\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Facade<\/em><\/strong><\/a><strong><em>&nbsp;\u2014&nbsp;<\/em><\/strong>abstract more complex logic and wrap it in class. For example, service that stays between component and API layer:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ui component - Facade service (complex state object) - API layer (Redux);<\/pre>\n\n\n\n<p id=\"ca84\"><strong><em>5. MVC, MVVM \u2014&nbsp;<\/em><\/strong><a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Model View Controller<\/strong><\/a>&nbsp;and&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93viewmodel\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>Model View ViewModel<\/strong><\/a><strong>.<\/strong><\/p>\n\n\n\n<p id=\"0c66\"><em>React is MVC<\/em><\/p>\n\n\n\n<ul><li>state \u2014&nbsp;<code>Model<\/code>;<\/li><li>JSX \u2014&nbsp;<code>View<\/code>;<\/li><li>actions (violate \u2014 can be mixed with a view) \u2014&nbsp;<code>Controller<\/code>&nbsp;;<\/li><\/ul>\n\n\n\n<p id=\"70c8\"><em>Angular is MVVM<\/em><\/p>\n\n\n\n<ul><li>component \u2014&nbsp;<code>ModelView<\/code><\/li><li>template \u2014&nbsp;<code>View<\/code>&nbsp;(violate \u2014 not reusable)<\/li><li>properties \u2014&nbsp;<code>Model<\/code><\/li><\/ul>\n\n\n\n<p id=\"829f\"><strong><em>6.&nbsp;<\/em><\/strong><a href=\"https:\/\/www.freecodecamp.org\/news\/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong><em>Server vs Client-Side Rendering<\/em><\/strong><\/a><\/p>\n\n\n\n<p id=\"0c55\"><strong>SSR \u2014&nbsp;<\/strong>Use SSR if a site is stable, static, SEO focused, can pay for additional servers;<\/p>\n\n\n\n<p id=\"f586\"><em>pros<\/em><\/p>\n\n\n\n<ul><li>Faster page load (viewable, but not interactable);<\/li><li>Better for search engines (faster indexing);<\/li><li>Better with sites that have a lot of static content (blogs);<\/li><\/ul>\n\n\n\n<p id=\"9d7a\"><em>cons<\/em><\/p>\n\n\n\n<ul><li>More server requests;<\/li><li>Slower render to interact;<\/li><li>Full page reloads;<\/li><\/ul>\n\n\n\n<p id=\"5dce\"><strong>CSR \u2014&nbsp;<\/strong>Use CSR if site under development, dynamic;<\/p>\n\n\n\n<p id=\"b842\"><em>pros<\/em><\/p>\n\n\n\n<ul><li>Faster render after initial load;<\/li><li>Best for web app;<\/li><\/ul>\n\n\n\n<p id=\"70b8\"><em>cons<\/em><\/p>\n\n\n\n<ul><li>The initial load can require more time<\/li><\/ul>\n\n\n\n<h1 id=\"29b4\">Conclusion<\/h1>\n\n\n\n<p id=\"4abc\">There is a ton of information that a developer needs to know to be confident to pass a front-end interview in big tech companies. Though the more complex rounds are made up of coding problems and system design (<strong>BTW, if you are interested in a separate article about coding problems, let\u2019s collect 5000 claps?<\/strong>), the domain of frontend knowledge is way important to dodge any type of web concept questions. Don\u2019t forget to&nbsp;<strong>follow<\/strong>&nbsp;<strong>and<\/strong>&nbsp;<strong>subscribe<\/strong>&nbsp;<strong>if you learned something new today<\/strong>&nbsp;(and want to get more insights weekly). See you soon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Intro Of course, there is not enough space to fit all the frontend knowledge into one article. And this is not what this cheatsheet wants to achieve.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[132],"tags":[],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2388"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2388"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2388\/revisions"}],"predecessor-version":[{"id":2389,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2388\/revisions\/2389"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}