<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[Personal Blog]]></title><description><![CDATA[Sharing the personal experience related to optimization, how-to, etc.]]></description><link>https://blog.akansh.com/</link><image><url>https://blog.akansh.com/undefined</url><title>Personal Blog</title><link>https://blog.akansh.com/</link></image><generator>Ghost 2.9</generator><lastBuildDate>Wed, 22 Jul 2020 21:44:39 GMT</lastBuildDate><atom:link href="https://blog.akansh.com/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[How to Add Transition on Text Changes]]></title><description><![CDATA[Text transitions are usually preferred when you need to notify a user of any text
being changed on screen and it just not make the…]]></description><link>how-to-add-text-change-transition</link><guid isPermaLink="true">how-to-add-text-change-transition</guid><dc:creator><![CDATA[Akansh Gulati]]></dc:creator><pubDate>Tue, 14 Jul 2020 18:30:00 GMT</pubDate><media:content url="https://blog.akansh.com/static/4915cfe20cb69570ebfa5f0b80459373/b32c6/text-change-transitions.png" medium="image"/><content:encoded><![CDATA[<img src="https://blog.akansh.com/static/4915cfe20cb69570ebfa5f0b80459373/b32c6/text-change-transitions.png"/><p>Text transitions are usually preferred when you need to notify a user of any text
being changed on screen and it just not make the experience better, but, also
important when text content on website changes based on the user actions on the screen.</p>
<blockquote>
<p>For example, if you're on an e-commerce website and read the price of
an item, but, you changed the quantity of the item and suddenly your
shipping charges are increased, making it important to highlight those
changes to the user.</p>
</blockquote>
<p>I believe this is one of the use-cases where text transitions are required,
also, React and Vue frameworks support Hot Module Replacement, updating only the
particular modules. See the example below to understand how simple text transition can
have an impact on user experience. </p>
<p>For example: </p>
<p><img src="/extra/8489c36533997e66f496b9dd431e5516/animation-correct.gif" alt="animated correct "/></p>
<p>You can observe the difference when the UI has no transition, we might have missed the change in the heading at first look. </p>
<p>Before we start with any framework, the following things are common among various frameworks for transitions in entering and leaving transition states:</p>
<h3>Transition Stages</h3>
<p>There are three stages in each state of transitioning, initial stage, transitioning stage and transition done stage,
giving us total 3+3 stages for entering and leaving altogether. The naming convention may vary with a different framework,
see in below image for better understanding.</p>
<p><a class="gatsby-resp-image-link" href="/static/6541700c2089b205f54d5c9f3f2f5c8c/eefc7/transitioning-stages.png" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 31.101813110181308%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAAApklEQVQY023P2Q6CMBCF4YqAokKNVowG9315/+fzjPkvmmqTLyVDezrj3O9aylU2cuZ7Lzvp5CI3an9XJn12MxAvMxlKkIYzhYyllkp61E3O/n3RLi3owicP5gSVPBCvmons8VbWVnzIikJHcBaFBA4Gzo3opKTuudMQ7o6EmjkXK3gmuMtTDtG4NRNZ8DsKdydCbX/JNBnLutnyv0j+WbcTmrBm2g+k+geOZd9VOwAAAABJRU5ErkJggg=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/6541700c2089b205f54d5c9f3f2f5c8c/446c7/transitioning-stages.webp 185w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/8522b/transitioning-stages.webp 370w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/391b8/transitioning-stages.webp 740w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/1982a/transitioning-stages.webp 1110w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/f15d7/transitioning-stages.webp 1434w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp">
<source srcset="/static/6541700c2089b205f54d5c9f3f2f5c8c/34758/transitioning-stages.png 185w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/7c627/transitioning-stages.png 370w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/86f95/transitioning-stages.png 740w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/70731/transitioning-stages.png 1110w,
/static/6541700c2089b205f54d5c9f3f2f5c8c/eefc7/transitioning-stages.png 1434w" sizes="(max-width: 740px) 100vw, 740px" type="image/png">
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/6541700c2089b205f54d5c9f3f2f5c8c/86f95/transitioning-stages.png" alt="three-stages-of-transition" title="">
</img></source></source></picture>
</span>
</a></p>
<h3>Transition Triggers</h3>
<p>To trigger the transition, there are multiple ways, a few of them are as followed:</p>
<ol>
<li>Adding/Removing a node from the DOM tree</li>
<li>Showing and hiding a node from UI (using display: none)</li>
<li>Adding/Removing items into the list</li>
<li>Dynamically updating the current node with a new node</li>
</ol>
<p>For <strong>text replace</strong> transition, we will be using Dynamic node updating criteria where a new node/text content
takes place of the old node/text content. </p>
<p>Let's see how it can be implemented and understand the complexity with different frameworks.</p>
<h2>Vue JS Implementation</h2>
<p>Vue has in-built <code class="language-text"><Transition></code> wrapper component which allows adding entering and leaving transitions for a component
or a parent node wrapping multiple nodes. Refer below image for different classes available. </p>
<p><a class="gatsby-resp-image-link" href="/static/e860179b8d5acddd40f4d79a52cdc801/be788/vue-transition-classes.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 85.33333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAARABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe9LDQAAP//EABQQAQAAAAAAAAAAAAAAAAAAADD/2gAIAQEAAQUCH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABQQAQAAAAAAAAAAAAAAAAAAADD/2gAIAQEABj8CH//EABoQAAIDAQEAAAAAAAAAAAAAAAAhARExYSD/2gAIAQEAAT8hd8IIxjvhcsjH4//aAAwDAQACAAMAAAAQMA88/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPxAf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPxAf/8QAHBABAAIDAAMAAAAAAAAAAAAAAQARECFBMWFx/9oACAEBAAE/EGyGA7TafYmnUXjAh4X6JanWDH//2Q=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/e860179b8d5acddd40f4d79a52cdc801/446c7/vue-transition-classes.webp 185w,
/static/e860179b8d5acddd40f4d79a52cdc801/8522b/vue-transition-classes.webp 370w,
/static/e860179b8d5acddd40f4d79a52cdc801/391b8/vue-transition-classes.webp 740w,
/static/e860179b8d5acddd40f4d79a52cdc801/13f2e/vue-transition-classes.webp 750w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp"/>
<source srcset="/static/e860179b8d5acddd40f4d79a52cdc801/bbb10/vue-transition-classes.jpg 185w,
/static/e860179b8d5acddd40f4d79a52cdc801/a41d5/vue-transition-classes.jpg 370w,
/static/e860179b8d5acddd40f4d79a52cdc801/d7cf7/vue-transition-classes.jpg 740w,
/static/e860179b8d5acddd40f4d79a52cdc801/be788/vue-transition-classes.jpg 750w" sizes="(max-width: 740px) 100vw, 740px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/e860179b8d5acddd40f4d79a52cdc801/d7cf7/vue-transition-classes.jpg" alt="animated correct " title=""/>
</picture>
</span>
</a></p>
<p>We will use Dynamic Component loading, mentioned above as one of the Transition triggers, for text change transition
using <code class="language-text">key</code> attribute to inform Vue of any change in node/content. </p>
<p>Once we implement this, we see transitioning working as below: </p>
<p><img align="center" src="/extra/e1719d3d8e1a128cbf457159fa111561/vue-transition-without-mode.gif" alt="vue-transition-default-mode" style="display: block; margin: 0 auto;"/></p>
<p>You can see that this is <strong>NOT</strong> what we desire, the problem is that the new text content is coming before the previous
text content is hidden and due to this, both contents are visible for a fraction of second during transitioning.
This is what we call as <code class="language-text">in-out</code> mode, which is set by default.</p>
<p><strong>How to solve this flickering issue?</strong></p>
<p>To make this transition smooth, we have to make sure that the transition of old text content is completed
before new content transition starts. For that, we specify mode as <code class="language-text">out-in</code> to prevent flickering.
You can read more about transitions and modes in-depth <a href="https://vuejs.org/v2/guide/transitions.html" target="_blank">here</a>.</p>
<iframe src="https://codesandbox.io/embed/vue-text-transition-example-nlvog?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="Vue: Text Transition Example" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"/>
<br>
<h2>React Implementation</h2>
<p>Unlike Vue, in React, we have to import a separate transition library, <a href="https://reactcommunity.org/react-transition-group/" target="_blank">react-transition-group</a>
which provides specific Component wrappers like CSSTransition, Transition, SwitchTransition and TransitionGroup. </p>
<p>For text replace transition specifically, we need two components, <code class="language-text">CSSTransition</code> and <code class="language-text">SwitchTransition</code>. It also has 3 stages of
the text transition in both entering and leaving transition states just like Vue. Refer to below diagram to understand the classes.
<a class="gatsby-resp-image-link" href="/static/2b2e04831eea53092891caf7541fe602/be788/react-transition-classes.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 85.33333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAARABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3pRQUAH/xAAUEAEAAAAAAAAAAAAAAAAAAAAw/9oACAEBAAEFAh//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAUEAEAAAAAAAAAAAAAAAAAAAAw/9oACAEBAAY/Ah//xAAaEAACAwEBAAAAAAAAAAAAAAAAAREhMWEg/9oACAEBAAE/IXM8EhZZc8LFl+P/2gAMAwEAAgADAAAAECAAAP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8QH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QH//EAB0QAQABAwUAAAAAAAAAAAAAAAERACFBECBRYfD/2gAIAQEAAT8QCU0S6XT3NShlphY3FOoqUMtn/9k='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/2b2e04831eea53092891caf7541fe602/446c7/react-transition-classes.webp 185w,
/static/2b2e04831eea53092891caf7541fe602/8522b/react-transition-classes.webp 370w,
/static/2b2e04831eea53092891caf7541fe602/391b8/react-transition-classes.webp 740w,
/static/2b2e04831eea53092891caf7541fe602/13f2e/react-transition-classes.webp 750w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp"/>
<source srcset="/static/2b2e04831eea53092891caf7541fe602/bbb10/react-transition-classes.jpg 185w,
/static/2b2e04831eea53092891caf7541fe602/a41d5/react-transition-classes.jpg 370w,
/static/2b2e04831eea53092891caf7541fe602/d7cf7/react-transition-classes.jpg 740w,
/static/2b2e04831eea53092891caf7541fe602/be788/react-transition-classes.jpg 750w" sizes="(max-width: 740px) 100vw, 740px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/2b2e04831eea53092891caf7541fe602/d7cf7/react-transition-classes.jpg" alt="react transitioning classes" title=""/>
</picture>
</span>
</a></p>
<h3>CSSTransition</h3>
<p>It handles the transition on the content, like the timeout, transition class name, etc., It has support for following props: </p>
<ol>
<li><strong>Timeout</strong>: You can define the timeout of the entering and leaving transition separately or as a common numeric time in milliseconds. </li>
<li><strong>addEndListener</strong>: You can define the method here for ending the transition. </li>
<li><strong>ClassNames</strong>: The name has been set as plural (with s), just to not mix it with React default way of adding CSS classes
on any node using className. This lets you define the parent class which will be used to define the transition. </li>
<li><strong>In</strong>: This prop lets you state when the transition classes are to be applied on the node/text content. It's a sort
of switch to turn on and off transition effects dynamically on DOM. Vue's <code class="language-text"><Transiton></code> component has
no direct prop or method to trigger such functionality. You can read more about its various options <a href="http://reactcommunity.org/react-transition-group/css-transition" target="_blank">here</a>.</li>
</ol>
<h3>SwitchTransition</h3>
<p>Similar to Vue, we need to specifically select the <code class="language-text">out-in</code> mode for letting the old content transition to be over before new
content transition kicks-off. For that, we need to use this separate component. You can read more about its various options <a href="http://reactcommunity.org/react-transition-group/switch-transition" target="_blank">here</a></p>
<iframe src="https://codesandbox.io/embed/react-text-replace-transition-cz08h?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="React: Text Replace Transition" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"/>
<br>
<h2>Vanilla JS Implementation</h2>
<p>We are removing and adding the same <code class="language-text">fade</code> class with changed text content and using <code class="language-text">innerHTML</code> which repaints
the content enabling the transition effect (called as forced reflow). </p>
<blockquote>
<p>By default, we add a fade out related properties to <code class="language-text">.text</code> class so
that once the fade class is removed, it can work just like
'fade-leave-active' in Vue or 'fade-exit-active' in React.</p>
</blockquote>
<p>There are two methods by which you can add transition: </p>
<ol>
<li>
<p><strong>Timeout Centric</strong>: In this, you have to manually mention the timeout of the leaving
state of the transition. This is not a recommended way, because same time needs to be
entered in CSS styles. The timeout part is being handled with the <code class="language-text">setTimeout</code> method and <code class="language-text">requestAnimationFrame</code>
callback to prevent any <a href="https://googlechrome.github.io/devtools-samples/jank/" target="_blank">jank-like</a> (drop in frame rate) experience. </p>
</li>
<li>
<p><strong>CSS Centric</strong>: Here we leverage <code class="language-text">transitionend</code> JS event listener which updates when the one state of transition is over serving the purpose of timeout being used above. </p>
</li>
</ol>
<iframe src="https://codesandbox.io/embed/vanilla-js-text-transition-example-hc7kq?fontsize=14&hidenavigation=1&theme=dark&view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="Vanilla JS : Text Transition Example" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"/>
<br/>
Hope you got some basic idea about how implementation is different as per framework and in vanilla JS. Do share your queries in comment section below. </br></br>]]></content:encoded></item><item><title><![CDATA[Integrate Lighthouse CI with static site generators]]></title><description><![CDATA[Performance and accessibility have become two important factors for improving SEO and content readability for a website. Currently…]]></description><link>integrate-lighthouse-ci-with-static-site-generators</link><guid isPermaLink="true">integrate-lighthouse-ci-with-static-site-generators</guid><dc:creator><![CDATA[Akansh Gulati]]></dc:creator><pubDate>Tue, 26 Nov 2019 18:30:00 GMT</pubDate><media:content url="https://blog.akansh.com/static/3a5a7ca453d4d3bd4e83b765c75d63df/d9692/lighthouse-ci-with-jamstack-bg.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://blog.akansh.com/static/3a5a7ca453d4d3bd4e83b765c75d63df/d9692/lighthouse-ci-with-jamstack-bg.jpg"/><p>Performance and accessibility have become two important factors for improving SEO and content readability for a website. Currently, Lighthouse is available as <code class="language-text">Audit</code> section in Chrome developer tools which requires manual effort to run, validate assertions with results and deciding whether the current score is good enough for production. All these problems are covered with <a href="https://github.com/GoogleChrome/lighthouse-ci" target="_blank">Lighthouse CI</a> which automatically runs the test when you open a PR(Pull Request), commit on a branch, push a new branch, etc. and validates the score as per your expectation.</p>
<p>I explicitly mentioned static site generator because configuration files mentioned below are meant for frameworks such as Gatsby, Hugo, Jekyll, etc. which generates the entire website in a directory and an Http server is all that is required. </p>
<h3>Important terms</h3>
<ul>
<li>
<p>Assertions - Various rules which user set as per webpage, e.g. first
meaning paint should be less than 1500ms or else throw error/warning.</p>
</li>
<li>
<p>Travis CI - A helper which builds your website, run Lighthouse for
auditing and shares result back to Github, Gitlab etc.</p>
</li>
<li>
<p>Viewing score - Lighthouse is showing results as a webpage stored on
their servers, you can change this setting once basic versions<br>
work properly.</br></p>
</li>
</ul>
<h3>Prerequisites:</h3>
<ol>
<li><a href="https://travis-ci.com" target="_blank">Travis CI</a> account</li>
<li>Having source code managed with git e.g. Github, Gitlab, etc.</li>
<li>A static site generator such as Gatsby, Jekyll, Hugo, etc.</li>
</ol>
<p><strong>Note:</strong>
<em>Below tutorial is based for setting Lighthouse on a blog only having certain types of pages, such as home page, author page having all
posts, tag page having all tag related posts and a post webpage just like the one you are reading.</em></p>
<h2>Demo</h2>
<ul>
<li>Travis build with Lighthouse CI - <a href="https://travis-ci.com/akanshgulati/personal-blog-gatsby-markdown/builds/137460353" target="_blank">link</a></li>
<li>Lighthouse CI Github status - <a href="https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1574369668468-50602.report.html" target="_blank">link</a></li>
</ul>
<h2>Steps:</h2>
<h4>1. Create <code class="language-text">.travis.yml</code> file</h4>
<p>Create file at the top level of the project and add below configuration.</p>
<div class="gatsby-highlight" data-language="yaml"><pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">language</span><span class="token punctuation">:</span> node_js <span class="token comment"># Node 10 LTS or later required </span>
<span class="token key atrule">node_js</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> <span class="token string">'10'</span>
<span class="token key atrule">addons</span><span class="token punctuation">:</span>
<span class="token key atrule">chrome</span><span class="token punctuation">:</span> stable <span class="token comment"># make Chrome available </span>
<span class="token key atrule">before_install</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> npm install <span class="token punctuation">-</span>g @lhci/cli@0.3.x <span class="token comment"># install LHCI (Lighthouse CI) </span>
<span class="token key atrule">script</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> yarn run build <span class="token comment"># command in package.json to build your site </span>
<span class="token key atrule">after_success</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> lhci autorun <span class="token comment"># run lighthouse CI against your static site</span></code></pre></div>
<p>Make sure the command you use for building production-ready code is added under the <code class="language-text">script</code> section above, generally it’s <code class="language-text">yarn run build</code>.</p>
<h4>2. Create <code class="language-text">lighthouserc.json</code> file</h4>
<p>Create file at the top level of the project and add below JSON configuration.</p>
<div class="gatsby-highlight" data-language="json"><pre class="language-json"><code class="language-json"><span class="token punctuation">{</span>
<span class="token property">"ci"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"collect"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"url"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">"<CHANGE URL>http://localhost/"</span><span class="token punctuation">,</span>
<span class="token string">"<CHANGE URL>http://localhost/tag/javascript"</span><span class="token punctuation">,</span>
<span class="token string">"<CHANGE URL>http://localhost/author/akansh"</span><span class="token punctuation">,</span>
<span class="token string">"<CHANGE URL>http://localhost/essential-tools-and-services-for-student-developer/"</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"numberOfRuns"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token property">"staticDistDir"</span><span class="token operator">:</span> <span class="token string">"./public"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"assert"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"preset"</span><span class="token operator">:</span> <span class="token string">"lighthouse:recommended"</span><span class="token punctuation">,</span>
<span class="token property">"assertions"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"first-contentful-paint"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">"warn"</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">"maxNumericValue"</span><span class="token operator">:</span> <span class="token number">2500</span><span class="token punctuation">,</span>
<span class="token property">"aggregationMethod"</span><span class="token operator">:</span> <span class="token string">"optimistic"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"interactive"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">"warn"</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token property">"maxNumericValue"</span><span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span>
<span class="token property">"aggregationMethod"</span><span class="token operator">:</span> <span class="token string">"optimistic"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"uses-long-cache-ttl"</span><span class="token operator">:</span> <span class="token string">"off"</span><span class="token punctuation">,</span>
<span class="token property">"uses-http2"</span><span class="token operator">:</span> <span class="token string">"off"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"upload"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"target"</span><span class="token operator">:</span> <span class="token string">"temporary-public-storage"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre></div>
<br/>
<br/>
In this configuration we are setting three things:
<ol>
<li>
<p><strong>Collect</strong>: Used to defines the URLs and other audit configurations.</p>
<ul>
<li>
<p><em>urls</em>: different types of pages to run tests on, e.g.</p>
<ol>
<li>Home page - <code class="language-text">/</code></li>
<li>Author page - <code class="language-text">/author/akanshgulati</code></li>
<li>Tag page - <code class="language-text">/tag/javascript</code></li>
<li>Post page - <code class="language-text">/essential-tools-and-services-for-student-developer/</code></li>
</ol>
</li>
<li>numberOfRuns - number of times to run an audit for each URL for generic results (impacts your total test time)</li>
</ul>
</li>
<li>
<p><strong>Assertions</strong>: You can use industry set rules a.k.a <code class="language-text">presets</code> such as “lighthouse:all”, “lighthouse:no-pwa” or define each rule. You need to turn <strong>“off”</strong> a few rules (e.g. uses-http2) which cannot be checked on local Http server we are setting up on Travis CI. Read more about <a href="https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/assertions.md#presets" target="_blank">presets</a>, <a href="https://github.com/GoogleChrome/lighthouse/blob/v5.5.0/lighthouse-core/config/default-config.js#L375-L407" target="_blank">custom rules</a> and <a href="https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/assertions.md" target="_blank">assertions</a>. If you're a performance measurement pro and comfortable with variance, consider setting <code class="language-text">first-contentful-paint</code> and <code class="language-text">interactive</code> assertions to <code class="language-text">error</code> in the example above to really lock down your website's perf.</p>
</li>
<li>
<p><strong>Upload</strong>: Used to define where result web pages are to be uploaded. Currently, we are temporarily storing it on Google servers. Read more about upload <a href="https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#the-lighthouse-ci-server" target="_blank">here</a>.</p>
</li>
</ol>
<h4>3. Authorise Lighthouse with Github</h4>
<ol>
<li>Open <a href="https://github.com/apps/lighthouse-ci" target="_blank">Lighthouse CI App link</a></li>
<li>Authorise (Need organisation admin access to add to organisation repo)</li>
<li>Copy the <code class="language-text">LHCI_GITHUB_APP_TOKEN</code> token on Authorisation page</li>
</ol>
<p><a class="gatsby-resp-image-link" href="/static/8bea37a61570ce97f79074b040d2bff8/f4b18/authorized-token-lighthouse-ci.png" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 43.61022364217252%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAABJElEQVQoz61Sy46CQBD0/3/Ig/FguBkikZeovDlpQMHZCMMQapleZhWX45JUumG6a6qLXrStAOctoW2nsWmaEXxEM1un4uPBsMA/Pox9/SXs+57i+XzGarXCcrmEpmnYbDZYr9eDiscsmewjQplwztF1HUEIQYdlWeJ0OhFxHMfwfR/H45HGludyTFUv81+FkiwMQziOA13XYRgG9vs9kZmmiSAICK7r4nA4YLfbYbvdwrZtgny/XC7TkeUtRVEgz3NSdr/fabTr9UpNlmWROsYYfb/dbqiqiupl7WTkTy/kbVEUkao0TUm953lIkgRZlg0xpfzdS0k2S6i8eT6fqOuavP1ZiVdUqyT9G7umf1nt0GsXxWBBN0KM+Mw7vO+vQlUxfANt7LHKPbeOmwAAAABJRU5ErkJggg=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/8bea37a61570ce97f79074b040d2bff8/446c7/authorized-token-lighthouse-ci.webp 185w,
/static/8bea37a61570ce97f79074b040d2bff8/8522b/authorized-token-lighthouse-ci.webp 370w,
/static/8bea37a61570ce97f79074b040d2bff8/391b8/authorized-token-lighthouse-ci.webp 740w,
/static/8bea37a61570ce97f79074b040d2bff8/1982a/authorized-token-lighthouse-ci.webp 1110w,
/static/8bea37a61570ce97f79074b040d2bff8/073b5/authorized-token-lighthouse-ci.webp 1252w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp"/>
<source srcset="/static/8bea37a61570ce97f79074b040d2bff8/34758/authorized-token-lighthouse-ci.png 185w,
/static/8bea37a61570ce97f79074b040d2bff8/7c627/authorized-token-lighthouse-ci.png 370w,
/static/8bea37a61570ce97f79074b040d2bff8/86f95/authorized-token-lighthouse-ci.png 740w,
/static/8bea37a61570ce97f79074b040d2bff8/70731/authorized-token-lighthouse-ci.png 1110w,
/static/8bea37a61570ce97f79074b040d2bff8/f4b18/authorized-token-lighthouse-ci.png 1252w" sizes="(max-width: 740px) 100vw, 740px" type="image/png"/>
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/8bea37a61570ce97f79074b040d2bff8/86f95/authorized-token-lighthouse-ci.png" alt="Authorized Token by Lighthouse CI" title=""/>
</picture>
</span>
</a></p>
<p><strong>Note:</strong> This token needs to be added to your build environment (e.g. Travis, Jenkins, Circle CI, etc.)</p>
<h4>4. Authorise Travis CI with Github</h4>
<ol>
<li>Open <a href="https://travis-ci.com/account/repositories" target="_blank">Travis CI repository dashboard</a> and check if you can see repository under <code class="language-text">Github Apps Integration</code> section. Otherwise, use <code class="language-text">Manage repositories on Github</code> to add it.</li>
<li>Open the repository settings and paste the<code class="language-text">LHCI_GITHUB_APP_TOKEN</code> key and value in “Environment Variables” section.</li>
</ol>
<p><a class="gatsby-resp-image-link" href="/static/7558aca5c29126ab0ec0f6e0499c51e7/a20a5/github-status-for-lighthouse-ci.png" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 56.07361963190184%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB80lEQVQoz3WT6W7bMBCE/f7PVSBAghQIgqJADqe2LFnURVE8dJjSdJa2i/5oBayXEumPM7vkDrfHhwkujBich/UBxjk0XQfVNNC9gbUuZVVVqPmtaVrUdYO2bdFrjW1d4bzHbv/riMfnFwymgefChbCFUInJWgTdYw4BlxixLAumacI0z5gZMu7tiN5NWOKa3neqqvG+P8B2CuZzj/6QwRwz6K8DTJZjPius44T/PfMK2GnDfFnT++4+EZcLVNkjVzW02LMeDS26aUbcNiyXiJlr7hFpsW46vLz+QKU9whwBrttt/JFJsXX6KnHMCuTFGae8SH/otEHb9TCDo+01hQDXDThz828PTzioAXYkEAQKdRUF44j8WCM7Cewa57JCQctFqZCfS25UprFsovuB3xSeWP+stv8AssP5oUrAQ3ZipsK2Y6f7pFQAI+0H1lOylEAUPjw+I6v+BkoicGQHVXFCTqsFlZVsllhtOo3e2AQ1g/1TS8meIkRtqXncwnIHbjfgBN0S0hJANQnAxgwuwEr4EZpgUSh1FGCM1852boEbb0CBpfabnzDqO9ryDbX6RFt9QFfvjDfo+gNN8QpvO57FmM7b9RzOtD+lpgpH4qYQWCMV6DbdBEP5clu8dwyfwjmq40kYqVBuhA8yH9L4QrV34G8m6UwcIM/8bgAAAABJRU5ErkJggg=='); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/7558aca5c29126ab0ec0f6e0499c51e7/446c7/github-status-for-lighthouse-ci.webp 185w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/8522b/github-status-for-lighthouse-ci.webp 370w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/391b8/github-status-for-lighthouse-ci.webp 740w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/1982a/github-status-for-lighthouse-ci.webp 1110w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/264d3/github-status-for-lighthouse-ci.webp 1480w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/cb486/github-status-for-lighthouse-ci.webp 1630w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp"/>
<source srcset="/static/7558aca5c29126ab0ec0f6e0499c51e7/34758/github-status-for-lighthouse-ci.png 185w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/7c627/github-status-for-lighthouse-ci.png 370w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/86f95/github-status-for-lighthouse-ci.png 740w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/70731/github-status-for-lighthouse-ci.png 1110w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/9ee4f/github-status-for-lighthouse-ci.png 1480w,
/static/7558aca5c29126ab0ec0f6e0499c51e7/a20a5/github-status-for-lighthouse-ci.png 1630w" sizes="(max-width: 740px) 100vw, 740px" type="image/png"/>
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/7558aca5c29126ab0ec0f6e0499c51e7/86f95/github-status-for-lighthouse-ci.png" alt="Github status for Lighthouse CI" title=""/>
</picture>
</span>
</a></p>
<h4>Final step</h4>
<ul>
<li>Test by creating a PR in the repository and check if following screen is coming.</li>
<li>If tests are failing, you can check the Lighthouse assertions which are failing in <strong>Travis CI</strong> build console, either make improvements or change failing rule strictness(error, warn, off) in assertions section of <code class="language-text">lighthouserc.json</code> file. </li>
</ul>
<h2>Troubleshooting</h2>
<ul>
<li>You can comment your issues below with repository link and branch name.</li>
<li>Lighthouse CI has provided various FAQs for reducing the chances of error, access it <a href="https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/troubleshooting.md" target="_blank">here</a>. </li>
</ul>
<h2>Extra</h2>
<ul>
<li><a href="https://googlechrome.github.io/lighthouse/viewer/" target="_blank">Lighthouse JSON Viewer</a> - View report of Lighthouse from JSON</li>
<li>Disable Merge on assertion fail - You can setup rules in repository settings for <strong>branch</strong> and make Lighthouse builds mandatory before merge. </li>
</ul>
<p>Thanks to <a href="https://github.com/patrickhulce" target="_blank">@patrickhulce</a> for suggesting <a href="https://github.com/akanshgulati/personal-blog-gatsby-markdown/pull/10" target="_blank">inputs</a> to make blog post in line with official Lighthouse CI guidelines. </p>]]></content:encoded></item><item><title><![CDATA[Essential tools and services for student developer]]></title><description><![CDATA[The world has changed and almost all established organisations are promoting their tools and services for
free to students so that they can…]]></description><link>essential-tools-and-services-for-student-developer</link><guid isPermaLink="true">essential-tools-and-services-for-student-developer</guid><dc:creator><![CDATA[Akansh Gulati]]></dc:creator><pubDate>Wed, 13 Nov 2019 18:30:00 GMT</pubDate><media:content url="https://blog.akansh.com/static/d34f128a2b589259e5ca23871f7ce715/ba299/essential-tools-for-developers-practical-learning.png" medium="image"/><content:encoded><![CDATA[<img src="https://blog.akansh.com/static/d34f128a2b589259e5ca23871f7ce715/ba299/essential-tools-for-developers-practical-learning.png"/><p>The world has changed and almost all established organisations are promoting their tools and services for
free to students so that they can play with it, have hands-on experience and pay once the basic set of
free features are not filling their requirements. Due to limited resources and lack of personal earnings,
studenthood mainly looks for free software and this post is regarding the essential tools and service which a
developer student might need in course of learning web development, machine learning, networking, etc.
Not only this, you can easily host your portfolio which will help you in job applications. </p>
<h2>Github Education Pack</h2>
<p>Github along with many organisations have collaborated to make an entire suite of a starter pack for student developers.
Once you enrol, you can use those services for 1 year and you have to renew the pack by applying again every year.
Here are a few most useful services:</p>
<blockquote>
<p>For Indian students having no ".edu" emails, you can upload your identity card of the institution for verification, <a href="https://help.github.com/en/github/teaching-and-learning-with-github-education/applying-for-a-student-developer-pack#applying-for-a-github-student-developer-pack" target="_blank">read more</a></p>
</blockquote>
<ol>
<li><strong>DigitalOcean</strong>: You can start your server and use other services as 50$ of credits are provided. No credit card verification is required to use the credits. </li>
<li><strong>Namecheap</strong>: You can create a new domain(e.g. yourname.com) for your blog, personal or project website.</li>
<li><strong>Jetbrains</strong>: You can easily use advanced <a href="https://en.wikipedia.org/wiki/Integrated_development_environment" target="_blank">IDEs</a> for development purposes. Jetbrains tools are good to handle large codebase and develop large applications.</li>
<li><strong>BrowserStack</strong>: It can be very useful for testing your application on different devices and OS.</li>
<li><strong>Transifex</strong>: Can be used for running an application in multiple languages. </li>
</ol>
<p>There are more than 40 services which are provided for different use cases, you can read more about the <a href="https://education.github.com/pack" target="_blank">education pack.</a> You can easily save more than <strong>200$/year</strong> using this pack.</p>
<p><strong>Link</strong> - <a href="https://help.github.com/en/github/teaching-and-learning-with-github-education/applying-for-a-student-developer-pack#applying-for-a-github-student-developer-pack" target="_blank">Apply for Github Education Pack</a></p>
<h2>Amazon Web Services (AWS) - Free Tier</h2>
<p>AWS is a cloud computing platform which provides more than 100 services for
<strong>hosting application, setting up alerts for a service, heavy computation for Artificial Intelligence related tasks, storing files online, setting up Content Delivery Networks(CDN), etc</strong>.
AWS provides a free tier to every new user after debit/credit card verification. These days <strong>Virtual Credit Cards</strong>
are provided by banks which can be used for verification purposes. Few services provided by AWS are: </p>
<ol>
<li><a href="https://aws.amazon.com/ec2/" target="_blank">Amazon EC2</a> - It's a virtual machine in which can boot different OS, select a different configuration of the machine in terms of physical memory, storage, region, etc. You can use it to host your application, learn Linux commands, etc.</li>
<li><a href="https://aws.amazon.com/s3" target="_blank">Amazon S3</a> - It's a storage service for your files and resources which are available online.</li>
<li>Amazon SageMaker - It can be used to train models for machine learning and <a href="https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=*all&awsm.page-all-free-tier=1&awsf.Free%20Tier%20Categories=categories%23ai-ml" target="_blank">much more</a></li>
</ol>
<p><strong>Link</strong> - <a href="https://aws.amazon.com/free/" target="_blank">Apply for AWS free tier</a></p>
<h2>Coursera Certification Courses</h2>
<p>Coursera offers most of the educational courses for free and charge for certification after the end of the course.
So, if you're looking for adding certificates on LinkedIn profile and resume, you can apply for <strong>financial aid</strong> provided by Coursera
for almost all specialisation courses. It is recommended to only opt for financial aid if you cannot afford the fee and you
need to fill an application stating reason and proofs. You will get the scholarship instantly from Coursera since it is an
automated process. You can read more about Financial Aid <a href="https://learner.coursera.help/hc/en-us/articles/209819033-Apply-for-Financial-Aid-or-a-Scholarship" target="_blank">here</a>.</p>
<h2>LinkedIn Free Premium Subscription (3 months)</h2>
<p>With LinkedIn Premium you can <strong>increase your chances of being shortlisted</strong> for a job opening,
see <strong>in-depth details of a company</strong> which you're about to join, <strong>send InMails</strong> to recruiters
who are not in your contact list, etc. Since Microsoft has recently acquired LinkedIn, You can
use the Microsoft's Visual Studio Dev essentials service to subscribe to <a href="https://www.linkedin.com/learning" target="_blank">LinkedIn Learning</a> (LinkedIn Premium)
for one month without even entering any payment details. With the credit card, you can easily <strong>extend this subscription up to 3 months</strong>.
Read the article below mentioned explaining step-by-step for getting three months of free premium subscription. </p>
<p><strong>Link</strong> - <a href="https://medium.com/prabidhi-info/get-3-months-of-linkedin-premium-learning-for-free-36d4352014b2" target="_blank">Step-by-step guide</a></p>
<p>I will keep on updating this article as I come across other essential services that can ease your learning and increase practical knowledge. Also, if you come across any other service which helped you in course of learning, share it in the comment section.</p>]]></content:encoded></item><item><title><![CDATA[Inheritance by ES6 extends vs ES5 Object.create]]></title><description><![CDATA[While reading about the new features rolled out in ES6(2015), you will come across a word, "Class", that has quite similar functionality as…]]></description><link>es6-extends-vs-es5-object-create-for-inheritance</link><guid isPermaLink="true">es6-extends-vs-es5-object-create-for-inheritance</guid><dc:creator><![CDATA[Akansh Gulati]]></dc:creator><pubDate>Mon, 17 Jun 2019 18:30:00 GMT</pubDate><media:content url="https://blog.akansh.com/static/e395fa180ad4363faaad1c137d0a215e/0da4a/es6-vs-es5-inheritance.png" medium="image"/><content:encoded><![CDATA[<img src="https://blog.akansh.com/static/e395fa180ad4363faaad1c137d0a215e/0da4a/es6-vs-es5-inheritance.png"/><p>While reading about the new features rolled out in ES6(2015), you will come across a word, <strong>"Class"</strong>, that has quite similar functionality as the previous Object Oriented languages such as Java, Python has. Some of the ES6 features, like the introduction of <strong>let and const</strong>, improved the way to declare variables, but the introduction of the <strong>map, filters</strong> over array just improved the code readability only. Similarly, the concept of Class was there in ES5 also, but it is difficult to implement class in ES5. </p>
<p>This article is about the performance of one of the functionalities of Class, i.e. extends, which lets you inherit properties from its parent class. You can read more about Class's <strong>extends</strong> functionality <a href="https://scotch.io/tutorials/demystifying-es6-classes-and-prototypal-inheritance#toc-subclassing-in-es6" target="_blank">here</a> and how it has been handled in ES5 with <strong>Object.create</strong>, <a href="https://medium.com/@dange.laxmikant/simplified-inheritance-in-js-es5-way-60b4ff19b008" target="_blank">here</a>.</p>
<p>There could be multiple ways for comparison, but for now, let's take a few very basic examples of inheritance's performance comparison where: </p>
<ol>
<li>The parent class and child class are custom ES6 classes and ES5 methods.</li>
<li>The parent class is a built-in Class(Date, Number, etc.) and child class is custom Class and method.</li>
</ol>
<div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token comment">/* --------------------------
* Snippet 1
* Custom parent and child ES6 classes and using extends
* ----------------------------*/</span>
<span class="token keyword">function</span> <span class="token function">testClass</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">N</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">class</span> <span class="token class-name">Parent</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">X</span> <span class="token keyword">extends</span> <span class="token class-name">Parent</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span><span class="token constant">N</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">new</span> <span class="token class-name">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">testClass</span><span class="token punctuation">(</span><span class="token number">1e6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* --------------------------
* Snippet 2
* Custom parent and child ES5 methods and using Object.create
* for inheritance
* ----------------------------*/</span>
<span class="token keyword">function</span> <span class="token function">testPrototypes</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">N</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">function</span> <span class="token function">Parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token class-name">X</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Parent</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span><span class="token constant">N</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">new</span> <span class="token class-name">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">testPrototypes</span><span class="token punctuation">(</span><span class="token number">1e6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* --------------------------
* Snippet 3
* Built-in parent class and custom ES6 class using extends
* ----------------------------*/</span>
<span class="token keyword">function</span> <span class="token function">testClass</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">N</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">class</span> <span class="token class-name">X</span> <span class="token keyword">extends</span> <span class="token class-name">Date</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span><span class="token constant">N</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">new</span> <span class="token class-name">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">testClass</span><span class="token punctuation">(</span><span class="token number">1e6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* --------------------------
* Snippet 4
* Built-in parent class and custom child method using Object.create
* ---------------------------- */</span>
<span class="token keyword">function</span> <span class="token function">testPrototypes</span><span class="token punctuation">(</span><span class="token parameter"><span class="token constant">N</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">function</span> <span class="token constant">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token class-name">X</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Date</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator"><</span><span class="token constant">N</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">new</span> <span class="token class-name">X</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">testPrototypes</span><span class="token punctuation">(</span><span class="token number">1e6</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
<br>
So we have four snippets as:
<p><strong>Snippet 1</strong>: Both parent and child are <strong>custom ES6 classes</strong> and using <code class="language-text">extends</code> property for inheritance.</p>
<p><strong>Snippet 2</strong>: ES5 way of creating inheritance where Person is a <strong>custom parent method and the child method</strong>, X method is inheriting the properties of the parent with Object.create.</p>
<p><strong>Snippet 3</strong>: Using a built-in class, <code class="language-text">Date</code>, as a parent and class X is inheriting parent properties with ES6 extends. </p>
<p><strong>Snippet 4</strong>: Using a built-in class, <code class="language-text">Date</code>, as a parent and method X as a child.</p>
<h2>Result</h2>
<p>I am using <a href="https://jsperf.com" target="_blank">jsperf.com</a> for running the performance test of above snippets. You can refer to it <a href="https://jsperf.com/es6-class-vs-es5-proto/" target="_blank">here</a> for the below findings:</p>
<p><a class="gatsby-resp-image-link" href="/static/e60c57c8d1e508223aa622b902b3a0ea/116ed/es6-extends-vs-es5-object-create.png" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 60.11764705882353%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAABYlAAAWJQFJUiTwAAACMUlEQVQoz3WTW1ObUBRG8//f2of2yadOp9W2Tmurk1ZtNEYzprlfCCYomBASDCYmCAQIrALe0tbumcU5B4bF/jiQYqX0GdR7HurUZXS9QO8o9MYWl/oN6mTBbD7hShUYTn2qYwVhqDG8tlENk+nNjGC5JGXbNvP5nFvbQZOaNNdfIH58jfDhFcLGS9rpbdqHRdqZPK2feYS9Y+rfj6in76ilszR3T3BMK2kq5boutm3hej4DVaJ7/IPBr2P6hRz90yz9ShW1cUa/JtBvdRn2rgjmU3CiOHaEM08IgyVhGJJaLBaYpontuKiyQCf9FmV3Hflgm4vyGXKxgVKsI59WUBpdRjYEUSchT2NCJEuEnufhOA6ev2SgdKl9+4SQ3qIV0dw7oJUtR5TuiKLHEZWqmMQLgiA2JTwK48iWdZsIR1FkKfcVJZ9GOdpELhwiiypK+xL5AbGHPjASTyK8r0fh3abMsKJNGVwIiFtrnO+8QcpX6BZEpJNSNC8/jp1sAa3RftAk4j+E8VP8KHZcmipT399BzO7TzuUQ8gWEspTQKkUUO7SbKuLlLTXJpKta97IV4ep3ONYk+pkNRkefGWbeRawzrlYwapVkvCoXmZzLmIuQueVjOf6/kePDfDZj4XookkDu/Rr1L5uUdnKcdQyer3BF9JcwXvi+l1wwrhXGcoZQb+GbE1zLWr2DwH/qaBn9Ff7KOp7H55IO/1fx+7Ui6Wg0wjAMNE1D1/VkHn9uzwl/A3p9fOMBwCV+AAAAAElFTkSuQmCC'); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/e60c57c8d1e508223aa622b902b3a0ea/446c7/es6-extends-vs-es5-object-create.webp 185w,
/static/e60c57c8d1e508223aa622b902b3a0ea/8522b/es6-extends-vs-es5-object-create.webp 370w,
/static/e60c57c8d1e508223aa622b902b3a0ea/391b8/es6-extends-vs-es5-object-create.webp 740w,
/static/e60c57c8d1e508223aa622b902b3a0ea/1982a/es6-extends-vs-es5-object-create.webp 1110w,
/static/e60c57c8d1e508223aa622b902b3a0ea/264d3/es6-extends-vs-es5-object-create.webp 1480w,
/static/e60c57c8d1e508223aa622b902b3a0ea/27ea7/es6-extends-vs-es5-object-create.webp 1700w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp"/>
<source srcset="/static/e60c57c8d1e508223aa622b902b3a0ea/34758/es6-extends-vs-es5-object-create.png 185w,
/static/e60c57c8d1e508223aa622b902b3a0ea/7c627/es6-extends-vs-es5-object-create.png 370w,
/static/e60c57c8d1e508223aa622b902b3a0ea/86f95/es6-extends-vs-es5-object-create.png 740w,
/static/e60c57c8d1e508223aa622b902b3a0ea/70731/es6-extends-vs-es5-object-create.png 1110w,
/static/e60c57c8d1e508223aa622b902b3a0ea/9ee4f/es6-extends-vs-es5-object-create.png 1480w,
/static/e60c57c8d1e508223aa622b902b3a0ea/116ed/es6-extends-vs-es5-object-create.png 1700w" sizes="(max-width: 740px) 100vw, 740px" type="image/png"/>
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/e60c57c8d1e508223aa622b902b3a0ea/86f95/es6-extends-vs-es5-object-create.png" alt="Performance result of ES6 extends vs ES5 Object.create for inheritance" title=""/>
</picture>
</span>
</a></p>
<ol>
<li>For custom parent and custom child, ES6 extends(orange) is doing <strong>66.88 ops/sec</strong> while ES5 Object.create(violet) can do <strong>195 ops/sec</strong>.</li>
<li>For the built-in class as a parent, ES6 extends(green) is doing <strong>6.12 ops/sec</strong> while ES5 Object.create(red) is doing <strong>151 ops/sec</strong>. </li>
</ol>
<p>So, the performance difference is quite huge when built-in class functionality is extending. I will definitely add more cases here. </p></br>]]></content:encoded></item><item><title><![CDATA[Best practices to select CDN for 3rd party library]]></title><description><![CDATA[Most third party libraries shares CDN (Content Delivery Network) links on their website but generally many CDN's offers the same library and…]]></description><link>best-practices-to-select-cdn-for-third-party-libraries</link><guid isPermaLink="true">best-practices-to-select-cdn-for-third-party-libraries</guid><dc:creator><![CDATA[Akansh Gulati]]></dc:creator><pubDate>Sun, 09 Jun 2019 18:30:00 GMT</pubDate><media:content url="https://blog.akansh.com/static/21e2ebff6862b2ff509ae2dd9a28c002/b7bdc/cdn-network-example.png" medium="image"/><content:encoded><![CDATA[<img src="https://blog.akansh.com/static/21e2ebff6862b2ff509ae2dd9a28c002/b7bdc/cdn-network-example.png"/><p>Most third party libraries shares CDN (Content Delivery Network) links on their website but generally many CDN's offers the same library and you might end up using a poor CDN which can effect your page load speed and can add a big security risk to your website. This tutorial is about choosing a right CDN for any 3rd party library, be it CSS framework or JS library. Here are a few best practices: </p>
<h2>Performance of the CDN</h2>
<p>The performance of the CDN can decide how fast the content could be delivered on the user's browser. Technically, this is related to <a href="https://en.wikipedia.org/wiki/Time_to_first_byte" target="_blank">TTFB</a> (Time to First Byte) which defines the time between a browser makes a request for the resource and a first byte is received as response. So, TTFB is something which is totally dependent on the CDN network and impacts your page speed. </p>
<p>Let's take an example of a most commonly used library, <strong>jQuery</strong>, which is available on multiple CDNs. Let's check the performance of the various CDNs across different regions over the globe, using <a href="https://tools.keycdn.com/performance" target="_blank">KeyCDN</a> performance tool.</p>
<ol>
<li><a href="https://code.jquery.com/jquery-3.4.1.min.js" target="_blank">code.jquery.com</a> - Official</li>
<li><a href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" target="_blank">cdnjs.com</a> - By Cloudflare</li>
<li><a href="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" target="_blank">ajax.googleapis.com</a> - By Google</li>
<li><a href="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" target="_blank">jsdelivr.net</a> - By ProspectOne</li>
</ol>
<p><a class="gatsby-resp-image-link" href="/static/6d77710e92521f6e2bd542b04d633858/88d65/cdn-ttfb-comparison.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 740px;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 83.78787878787878%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAARABQDASIAAhEBAxEB/8QAGAABAQADAAAAAAAAAAAAAAAAAAECAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAe3EM7GKbRaK/8QAGRAAAgMBAAAAAAAAAAAAAAAAABEBAhAg/9oACAEBAAEFAmMja8f/xAAVEQEBAAAAAAAAAAAAAAAAAAABIP/aAAgBAwEBPwFj/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAGBABAQEBAQAAAAAAAAAAAAAAAIEBIHH/2gAIAQEABj8CqtVW+8f/xAAcEAACAQUBAAAAAAAAAAAAAAAAAdEQEUFxgbH/2gAIAQEAAT8hbC7yO30OqJJFnZ//2gAMAwEAAgADAAAAEGz4AP/EABgRAAIDAAAAAAAAAAAAAAAAAAERABAh/9oACAEDAQE/EGcBy//EABYRAQEBAAAAAAAAAAAAAAAAAAEAEP/aAAgBAgEBPxBjf//EABsQAAIDAQEBAAAAAAAAAAAAAAABESFBgTFR/9oACAEBAAE/EE2lPsOCqvhheMdCTqqYsLR2Gfh9h//Z'); background-size: cover; display: block;"/>
<picture>
<source srcset="/static/6d77710e92521f6e2bd542b04d633858/446c7/cdn-ttfb-comparison.webp 185w,
/static/6d77710e92521f6e2bd542b04d633858/8522b/cdn-ttfb-comparison.webp 370w,
/static/6d77710e92521f6e2bd542b04d633858/391b8/cdn-ttfb-comparison.webp 740w,
/static/6d77710e92521f6e2bd542b04d633858/1982a/cdn-ttfb-comparison.webp 1110w,
/static/6d77710e92521f6e2bd542b04d633858/5d722/cdn-ttfb-comparison.webp 1320w" sizes="(max-width: 740px) 100vw, 740px" type="image/webp"/>
<source srcset="/static/6d77710e92521f6e2bd542b04d633858/bbb10/cdn-ttfb-comparison.jpg 185w,
/static/6d77710e92521f6e2bd542b04d633858/a41d5/cdn-ttfb-comparison.jpg 370w,
/static/6d77710e92521f6e2bd542b04d633858/d7cf7/cdn-ttfb-comparison.jpg 740w,
/static/6d77710e92521f6e2bd542b04d633858/56ca0/cdn-ttfb-comparison.jpg 1110w,
/static/6d77710e92521f6e2bd542b04d633858/88d65/cdn-ttfb-comparison.jpg 1320w" sizes="(max-width: 740px) 100vw, 740px" type="image/jpeg"/>
<img class="gatsby-resp-image-image" style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="/static/6d77710e92521f6e2bd542b04d633858/d7cf7/cdn-ttfb-comparison.jpg" alt="Comparison of various CDNs for jQuery" title=""/>
</picture>
</span>
</a></p>
<p>You can see that the CDN link shared on <strong>jQuery</strong> official website is performing around 75% slower than other CDNs if all regions have equal importance for you. Cloudflare CDN, cdnjs.com is performing way better than others.</p>
<h2>Security of resource</h2>
<p>Public CDNs deliver JS and CSS resources on your website and there is a risk of those CDN to get hacked and vulnerable code is delivered on your website. In order to prevent this, you must use <strong>integrity</strong> attribute on link and script tags. Integrity attribute enables checksum for the code that is delivered and that code is executed only if the cryptographic hash mentioned matches with the code received. Learn how to <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#Using_Subresource_Integrity" target="_blank">add integrity attribute</a>. </p>
<p>e.g.</p>
<div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js<span class="token punctuation">"</span></span> <span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>link</span><span class="token punctuation">></span></span></code></pre></div>
<div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css<span class="token punctuation">"</span></span> <span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh<span class="token punctuation">"</span></span>
<span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>anonymous<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div>
<h2>Uptime</h2>
<p>Uptime is also an important aspect for choosing the CDN, generally CDN's website shares the uptime reports or you can use <a href="https://www.cdnperf.com/#!rum" target="_blank">cdnperf.com</a> to check the uptime status of various CDNs. </p>
<h2>Cache & Protocol</h2>
<p>While selecting a CDN, you should choose a CDN with a good range of cache time range as the libraries are delivered version based and content is static. Even though browser handles the cache itself but its a good practice if CDN is sending Cache related headers in response. </p>
<p>Similarly, HTTP/2 protocol CDN can compress the request headers and reduces the round trip time(RTT) in optimized manner than HTTP/1 protocol. Learn more <a href="https://www.keycdn.com/blog/http2-cdn" target="_blank">about it.</a></p>
<p>You can see the response headers of the request using below command in terminal.</p>
<div class="gatsby-highlight" data-language="sh"><pre class="language-sh"><code class="language-sh">curl -I https://code.jquery.com/jquery-3.4.1.min.js</code></pre></div>]]></content:encoded></item></channel></rss>