<p>An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.</p>



<blockquote class="wp-block-quote"><p><strong>Note</strong>: Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (79 and onwards) supports it too; the old Edge didn't.</p></blockquote>



<h2>High-level view</h2>



<p>This article assumes you are already familiar with the concept of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="noreferrer noopener nofollow">DOM (Document Object Model)</a> — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:</p>



<pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple DOM example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
      &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>



<p>This fragment produces the following DOM structure:</p>



<figure class="wp-block-image size-full"><img src="https://tcmhack.in/wp-content/uploads/2021/09/dom-screenshot.png" alt="" class="wp-image-869"/></figure>



<p><em>Shadow DOM</em> allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/09/shadowdom-1-1024x471.png" alt="" class="wp-image-870"/></figure>



<p>There are some bits of shadow DOM terminology to be aware of:</p>



<ul><li><strong>Shadow host:</strong> The regular DOM node that the shadow DOM is attached to.</li><li><strong>Shadow tree:</strong> The DOM tree inside the shadow DOM.</li><li><strong>Shadow boundary:</strong> the place where the shadow DOM ends, and the regular DOM begins.</li><li><strong>Shadow root:</strong> The root node of the shadow tree.</li></ul>



<p>You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"> <code>&lt;style&gt;</code></a> element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.</p>



<p>Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noreferrer noopener nofollow">&lt;video&gt;</a></code> element, with the default browser controls exposed. All you see in the DOM is the <code>&lt;video&gt;</code> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.</p>



<h2>Basic usage</h2>



<p>You can attach a shadow root to any element using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow" target="_blank" rel="noreferrer noopener nofollow"><code>Element.attachShadow()</code></a>&nbsp;method. This takes as its parameter an options object that contains one option —&nbsp;<code>mode</code>&nbsp;— with a value of&nbsp;<code>open</code>&nbsp;or&nbsp;<code>closed</code>:</p>



<pre class="wp-block-code"><code>let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});</code></pre>



<p><code>open</code>&nbsp;means that you can access the shadow DOM using JavaScript written in the main page context, for example using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot" target="_blank" rel="noreferrer noopener nofollow"><code>Element.shadowRoot</code></a>&nbsp;property:</p>



<pre class="wp-block-code"><code>let myShadowDom = myCustomElem.shadowRoot;</code></pre>



<p>If you attach a shadow root to a custom element with&nbsp;<code>mode: closed</code>&nbsp;set, you won't be able to access the shadow DOM from the outside —&nbsp;<code>myCustomElem.shadowRoot</code>&nbsp;returns&nbsp;<code>null</code>. This is the case with built in elements that contain shadow DOMs, such as&nbsp;<code>&lt;video&gt;</code>.</p>



<p><strong>Note</strong>: As&nbsp;<a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af" target="_blank" rel="noreferrer noopener nofollow">this blog post shows</a>, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.</p>



<p>If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:</p>



<pre class="wp-block-code"><code>let shadow = this.attachShadow({mode: 'open'});</code></pre>



<p>When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:</p>



<pre class="wp-block-code"><code>let para = document.createElement('p');
shadow.appendChild(para);
// etc.</code></pre>



<h2 id="working_through_a_simple_example">Working through a simple example</h2>



<p>Now let's walk through a simple example to demonstrate the shadow DOM in action inside a custom element —&nbsp;<code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component" target="_blank" rel="noreferrer noopener nofollow">&lt;popup-info&gt;</a></code>&nbsp;(see a&nbsp;<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/" target="_blank" rel="noreferrer noopener nofollow">live example</a>&nbsp;also). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information. To begin with, in our JavaScript file we define a class called&nbsp;<code>PopUpInfo</code>, which extends&nbsp;<code>HTMLElement</code>:</p>



<pre class="wp-block-code"><code>class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here

    ...
  }
}</code></pre>



<p>Inside the class definition we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.</p>



<h3 id="creating_the_shadow_root">Creating the shadow root</h3>



<p>We first attach a shadow root to the custom element:</p>



<pre class="wp-block-code"><code>// Create a shadow root
let shadow = this.attachShadow({mode: 'open'});</code></pre>



<h3 id="creating_the_shadow_dom_structure">Creating the shadow DOM structure</h3>



<p>Next, we use some DOM manipulation to create the element's internal shadow DOM structure:</p>



<pre class="wp-block-code"><code>// Create spans
let wrapper = document.createElement('span');
wrapper.setAttribute('class', 'wrapper');
let icon = document.createElement('span');
icon.setAttribute('class', 'icon');
icon.setAttribute('tabindex', 0);
let info = document.createElement('span');
info.setAttribute('class', 'info');

// Take attribute content and put it inside the info span
let text = this.getAttribute('data-text');
info.textContent = text;

// Insert icon
let imgUrl;
if(this.hasAttribute('img')) {
  imgUrl = this.getAttribute('img');
} else {
  imgUrl = 'img/default.png';
}
let img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
</code></pre>



<h3 id="styling_the_shadow_dom">Styling the shadow DOM</h3>



<p>After that we create a&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"><code>&lt;style&gt;</code></a>&nbsp;element and populate it with some CSS to style it:</p>



<pre class="wp-block-code"><code>// Create some CSS to apply to the shadow dom
let style = document.createElement('style');

style.textContent = `
.wrapper {
  position: relative;
}

.info {
  font-size: 0.8rem;
  width: 200px;
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  background: white;
  border-radius: 10px;
  opacity: 0;
  transition: 0.6s all;
  position: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 3;
}

img {
  width: 1.2rem;
}

.icon:hover + .info, .icon:focus + .info {
  opacity: 1;
}`;</code></pre>



<h3 id="attaching_the_shadow_dom_to_the_shadow_root">Attaching the shadow DOM to the shadow root</h3>



<p>The final step is to attach all the created elements to the shadow root:</p>



<pre class="wp-block-code"><code>// attach the created elements to the shadow dom
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);</code></pre>



<p>Feel free to ask a question in comments.</p>

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from ot...

Shadow DOM in JavaScript - TCMHACK

Shadow DOM in JavaScript

<h1>Set</h1><p>The&nbsp;<code><strong>Set</strong></code>&nbsp;object lets you store unique values of any type, whether&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" rel="noopener noreferrer" target="_blank">primitive values</a>&nbsp;or object references.</p><h2>Description</h2><p><code>Set</code>&nbsp;objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the&nbsp;<code>Set</code>&nbsp;<strong>may only occur once</strong>; it is unique in the&nbsp;<code>Set</code>'s collection.</p><h3>Value Equality</h3><p>Because each value in the&nbsp;<code>Set</code>&nbsp;has to be unique, the value equality will be checked. In an earlier version of ECMAScript specification, this was not based on the same algorithm as the one used in the&nbsp;<code>===</code>&nbsp;operator. Specifically, for&nbsp;<code>Set</code>s,&nbsp;<code>+0</code>&nbsp;(which is strictly equal to&nbsp;<code>-0</code>) and&nbsp;<code>-0</code>&nbsp;were different values. However, this was changed in the ECMAScript 2015 specification. See&nbsp;<em>"Key equality for -0 and 0"</em>&nbsp;in the&nbsp;browser compatibility&nbsp;table for details.</p><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" rel="noopener noreferrer" target="_blank">NaN</a></code>&nbsp;and&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" rel="noopener noreferrer" target="_blank">undefined</a></code>&nbsp;can also be stored in a Set. All&nbsp;<code>NaN</code>&nbsp;values are equated (i.e.&nbsp;<code>NaN</code>&nbsp;is considered the same as&nbsp;<code>NaN</code>, even though&nbsp;<code>NaN !== NaN</code>).</p><h2>Constructor</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set" rel="noopener noreferrer" target="_blank">Set()</a></code> Creates a new&nbsp;<code>Set</code>&nbsp;object.</p><h2>Static properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@species" rel="noopener noreferrer" target="_blank">get Set[@@species]</a></code> The constructor function that is used to create derived objects.</p><h2>Instance properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size" rel="noopener noreferrer" target="_blank">Set.prototype.size</a></code> Returns the number of values in the&nbsp;<code>Set</code>&nbsp;object.</p><h2>Instance methods</h2><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add" rel="noopener noreferrer" target="_blank">Set.prototype.add(value)</a></code> Appends&nbsp;<code>value</code>&nbsp;to the&nbsp;<code>Set</code>&nbsp;object. Returns the&nbsp;<code>Set</code>&nbsp;object with added value.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear" rel="noopener noreferrer" target="_blank">Set.prototype.clear()</a></code> Removes all elements from the&nbsp;<code>Set</code>&nbsp;object.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete" rel="noopener noreferrer" target="_blank">Set.prototype.delete(value)</a></code> Removes the element associated to the&nbsp;<code>value</code>&nbsp;and returns a boolean asserting whether an element was successfully removed or not.&nbsp;<code>Set.prototype.has(value)</code>&nbsp;will return&nbsp;<code>false</code>&nbsp;afterwards.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has" rel="noopener noreferrer" target="_blank">Set.prototype.has(value)</a></code> Returns a boolean asserting whether an element is present with the given value in the&nbsp;<code>Set</code>&nbsp;object or not.</li></ol><h3>Iteration methods</h3><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator" rel="noopener noreferrer" target="_blank">Set.prototype[@@iterator]()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.keys()</a></code> Returns a new iterator object that yields the values for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>values()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.values()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>keys()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries" rel="noopener noreferrer" target="_blank">Set.prototype.entries()</a></code> Returns a new iterator object that contains&nbsp;<strong>an array of&nbsp;</strong><code><strong>[value,&nbsp;value]</strong></code>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. This is similar to the&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="noopener noreferrer" target="_blank">Map</a></code>&nbsp;object, so that each entry's&nbsp;<em>key</em>&nbsp;is the same as its&nbsp;<em>value</em>&nbsp;for a&nbsp;<code>Set</code>.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach" rel="noopener noreferrer" target="_blank">Set.prototype.forEach(callbackFn[,&nbsp;thisArg])</a></code> Calls&nbsp;<code>callbackFn</code>&nbsp;once for each value present in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. If a&nbsp;<code>thisArg</code>&nbsp;parameter is provided, it will be used as the&nbsp;<code>this</code>&nbsp;value for each invocation of&nbsp;<code>callbackFn</code>.</li></ol><h2>Examples</h2><h3>Using the Set object</h3><pre class="ql-syntax" spellcheck="false">const mySet1 = new Set()

mySet1.add(1)           // Set [ 1 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add('some text') // Set [ 1, 5, 'some text' ]
const o = {a: 1, b: 2}
mySet1.add(o)

mySet1.add({a: 1, b: 2})   // o is referencing a different object, so this is okay
mySet1.has(1)              // true
mySet1.has(3)              // false, since 3 has not been added to the set
mySet1.has(5)              // true
mySet1.has(Math.sqrt(25))  // true
mySet1.has('Some Text'.toLowerCase()) // true
mySet1.has(o)       // true

mySet1.size         // 5

mySet1.delete(5)    // removes 5 from the set
mySet1.has(5)       // false, 5 has been removed

mySet1.size         // 4, since we just removed one value

console.log(mySet1)
// logs Set(4) [ 1, "some text", {…}, {…} ] in Firefox
// logs Set(4) { 1, "some text", {…}, {…} } in Chrome
</pre><h3>Iterating Sets</h3><pre class="ql-syntax" spellcheck="false">// iterate over items in set
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.keys()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.values()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
// (key and value are the same here)
for (let [key, value] of mySet1.entries()) console.log(key)

// convert Set object to an Array object, with Array.from
const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

// the following will also work if run in an HTML document
mySet1.add(document.body)
mySet1.has(document.querySelector('body')) // true

// converting between Set and Array
const mySet2 = new Set([1, 2, 3, 4])
mySet2.size                    // 4
[...mySet2]                    // [1, 2, 3, 4]

// intersect can be simulated via
const intersection = new Set([...mySet1].filter(x =&gt; mySet2.has(x)))

// difference can be simulated via
const difference = new Set([...mySet1].filter(x =&gt; !mySet2.has(x)))

// Iterate set entries with forEach()
mySet1.forEach(function(value) {
  console.log(value)
})

// 1
// 2
// 3
// 4
</pre><h3>Implementing basic set operations</h3><pre class="ql-syntax" spellcheck="false">function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false
        }
    }
    return true
}

function union(setA, setB) {
    let _union = new Set(setA)
    for (let elem of setB) {
        _union.add(elem)
    }
    return _union
}

function intersection(setA, setB) {
    let _intersection = new Set()
    for (let elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem)
        }
    }
    return _intersection
}

function symmetricDifference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        if (_difference.has(elem)) {
            _difference.delete(elem)
        } else {
            _difference.add(elem)
        }
    }
    return _difference
}

function difference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        _difference.delete(elem)
    }
    return _difference
}

// Examples
const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 3])
const setC = new Set([3, 4, 5, 6])

isSuperset(setA, setB)          // returns true
union(setA, setC)               // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC)        // returns Set {3, 4}
symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}
difference(setA, setC)          // returns Set {1, 2}

</pre><h3>Relation with Array objects</h3><pre class="ql-syntax" spellcheck="false">let myArray = ['value1', 'value2', 'value3']

// Use the regular Set constructor to transform an Array into a Set
let mySet = new Set(myArray)

mySet.has('value1')     // returns true

// Use the spread operator to transform a set into an Array.
console.log([...mySet]) // Will show you exactly the same Array as myArray
</pre><h3>Remove duplicate elements from the array</h3><pre class="ql-syntax" spellcheck="false">// Use to remove duplicate elements from the array

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]
</pre><h3>Relation with Strings</h3><pre class="ql-syntax" spellcheck="false">let text = 'India'

const mySet = new Set(text)  // Set(5) {'I', 'n', 'd', 'i', 'a'}
mySet.size  // 5

//case sensitive &amp; duplicate ommision
new Set("Firefox")  // Set(7) { "F", "i", "r", "e", "f", "o", "x" }
new Set("firefox")  // Set(6) { "f", "i", "r", "e", "o", "x" }
</pre><h3>Use Set to ensure the uniqueness of a list of values</h3><pre class="ql-syntax" spellcheck="false">const array = Array.from(document.querySelectorAll('[id]')).map(e =&gt; e.id);
const set = new Set(array);
console.assert(set.size == array.length);
</pre><p>That's how Set works in JavaScript. Feel free to leave a comment below.</p>

The Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collectionThe Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values...

Explanation & Working of Set's in JavaScript - TCMHACK

Explanation & Working of Set's in JavaScript

<p>JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.</p>



<h2>Basic ES6 Features are</h2>



<ul><li>The let &amp; const keyword</li><li>Arrow Functions</li><li>The For/Of Loop</li><li>Classes</li><li>Promises</li><li>Template Literals</li><li>Default Parameters</li><li>Array and object destructing</li><li>Rest parameter and Spread operator</li><li>Import and export</li></ul>



<h2>The let &amp; const keyword</h2>



<p>The <strong><code>let</code></strong> keyword allows you to declare a variable with block scope.</p>



<pre class="wp-block-code"><code>var x = 10; // Here x is 10
{
    let x = 2; // Here x is 2
}
// Here x is 10</code></pre>



<p>The <strong><code>const</code></strong> keyword allows you to declare a constant (a JavaScript variable with a constant value). <strong><code>Const</code></strong> variables must be assigned a value when they are declared:</p>



<p>Constants are similar to <code>let</code> variables, except that the value cannot be changed.</p>



<pre class="wp-block-code"><code>const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error</code></pre>



<h2>Arrow Functions</h2>



<p><strong>Arrow functions</strong> allows a short syntax for writing function expressions.</p>



<p>You don't need the <code>function</code> keyword, the <code>return</code> keyword, and the curly <code>brackets</code>.</p>



<pre class="wp-block-code"><code>// ES5
var x = function(x, y) {
    return x * y;
}
// ES6
const x = (x, y) =&gt; x * y;</code></pre>



<ul><li>Arrow functions do not have their own <code>this</code>. They are not well suited for defining <code>object</code> methods.</li><li>Arrow functions are not <code>hoisted</code>. They must be defined before they are used.</li><li>Using <code>const</code> is safer than using <code>var</code>, because a function expression is always a constant value.</li><li>You can only omit the <code>return</code> keyword and the curly <code>brackets</code> if the function is a single statement. Because of this, it might be a good habit to always keep them:</li></ul>



<pre class="wp-block-code"><code>const x = (x, y) =&gt; { return x * y };
OR
const x = (x, y) =&gt; x * y; // no need of return keyword in case of single statement</code></pre>



<h2>The For/Of Loop</h2>



<p>The JavaScript <code>for/of</code> statement loops through the values of an iterable objects. </p>



<p><code><strong>for/of</strong></code> lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.</p>



<p>The <code>for/of</code> loop has the following syntax:</p>



<pre class="wp-block-code"><code>for (variable of iterable) {
    // code block to be executed
}

<strong>Example:
</strong>var cars = &#91;"BMW", "Volvo", "Mini"];
for (var x of cars) {
  document.write(x + "&lt;br &gt;");
}</code></pre>



<p><strong><em>variable</em></strong> - For every iteration the value of the next property is assigned to the variable. Variable can be declared with <code>const</code>, <code>let</code>, or <code>var</code>.<br><strong><em>iterable</em></strong> - An <code>object</code> that has iterable properties.</p>



<h2>Classes</h2>



<p>Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.</p>



<p>JavaScript <strong><code>Classes</code></strong> are templates for JavaScript Objects.</p>



<pre class="wp-block-code"><code>class ClassName {
    constructor() { … }
}</code></pre>



<p>To create a <code><span class="highlight">class</span></code>, use the class keyword followed by the name of the class with two curly brackets.</p>



<pre class="wp-block-code"><code>class Car {
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
}</code></pre>



<h2>Promises</h2>



<p>Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!</p>



<pre class="wp-block-code"><code>let myPromise = new Promise(function(resolve, reject) {
    resolve(); // when successful
    reject(); // when error
});
// Must wait for a fulfilled Promise.
myPromise.then(
    function(value) { // code if successful },
    function(error) { // code if some error }
);</code></pre>



<p>If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: <code>resolve</code> and <code>reject</code> to handle an expected error.</p>



<pre class="wp-block-code"><code>let&nbsp;myPromise =&nbsp;new&nbsp;Promise(function(resolve, reject) {
&nbsp; setTimeout(function() { resolve("Hello World!!"); },&nbsp;3000);
});
myPromise.then(function(value) {
&nbsp; console.log('Success', value);
}, function(error) {
  console.log('Error', error);
});</code></pre>



<h2>Template Literals</h2>



<p>Template literals or template strings are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.</p>



<pre class="wp-block-code"><code><strong>The old syntax: ES5
</strong>function myFunct(name, age) {
    return 'Hi, My name is: '+ name + ' and i am '+ age + ' years old';
}
console.log(myFunct("TCM", 26));
<strong>Output: </strong>Hi, My name is: TCM and i am 26 years old

<strong>The New syntax: ES6</strong>
const myFunct = (name, age) =&gt; `Hi, My name is: NULL and i am NULL years old`;
console.log(myFunct("TCM", 26));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<p>So simple! It’s a really huge difference between the old syntax and ES6. When playing with strings, the literal string in ES6 looks more organized and well structured than ES5.</p>



<h2>Default parameters</h2>



<p>When I work in PHP, I usually use default parameters. These allow you to define a parameter in advance.</p>



<p>So, when you forget to write the parameter, it won’t return an <code>undefined</code> error because the parameter is already defined in the default. So when you run your function with a missed parameter, it will take the value of the default parameter and it will not return an error. </p>



<p>Look at this example:</p>



<pre class="wp-block-code"><code>const myFunct = (name, age) =&gt; <span style="background-color: inherit; font-size: inherit;">Hi, My name is: NULL and i am NULL years old</span>;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am undefined years old</code></pre>



<p>The function above returns undefined, because we forgot to give it the second parameter <strong><code>age</code></strong>.</p>



<p>But if we used the default parameter, it won’t return undefined, and it will use its value when we forget to assign a parameter.</p>



<p> Look at this example:</p>



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<h2>Array and Object Destructing</h2>



<p>Destruction makes the assignment of the values of an array or object to the new variable easier.</p>



<p>The old syntax:</p>



<pre class="wp-block-code"><code>const user = {
  id: 12345,
  name: "TCM",
  age: 26
};

let id = user.id;
let name = user.name;
let age = user.age;
console.log(id, name, age);
<strong>Output: </strong>12345 TCM 26</code></pre>



<p>With ES6 syntax:</p>



<pre class="wp-block-code"><code>const user = {
  id: 12345,
  name: "TCM",
  age: 26
};

let { id, name, age } = user;
console.log(id, name, age);
<strong>Output: </strong>12345 TCM 26</code></pre>



<p>With ES5, we have to assign each value to each variable. With ES6, we just put our values within curly brackets to get any property of the object.</p>



<p>Note: if you assign a variable that is not identical to the name of property, it will return <code>undefined</code>. For example, if the name of the property is <code>name</code> and we assign it to a <code>username</code> <code>variable</code>, it will return <code>undefined</code>.</p>



<h2>Rest Parameter and Spread Operator</h2>



<p>The Rest Parameters syntax allows a function to accept an indefinite number of arguments as an <code>array</code>.</p>



<pre class="wp-block-code"><code>const sum = (…args) =&gt; args.reduce((total, num) =&gt; total + num, 0);
console.log(sum(1, 2, 3));
<strong>Output:</strong> 6</code></pre>



<p>The Spread Operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.</p>



<pre class="wp-block-code"><code>const arr=&#91;'said', 20, 'Hi', 'How are you?'];

const Func = array =&gt; &#91;...array, "hello world"];
console.log(Func(arr));
<strong>Output</strong>: &#91;"said", 20, "Hi", "How are you?", "hello world"]</code></pre>



<h2>Import and Export</h2>



<p>Using&nbsp;<code>import</code>&nbsp;and<code>&nbsp;export</code>&nbsp;in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.</p>



<p>If you are familiar with any JavaScript MVC framework, you will see that they use&nbsp;<code>import</code>&nbsp;and&nbsp;<code>export</code>&nbsp;to handle the components most of the time. So how do they really work?</p>



<p>It is simple!&nbsp;<code>export</code>&nbsp;allows you to export a module to be used in another JavaScript component. We use&nbsp;<code>import</code>&nbsp;to import that module to use it in our component.</p>



<p>For example, we have two files. The first is named&nbsp;<code>detailComponent.js</code> and the second is named <code>homeComponent.js</code>.</p>



<p>In&nbsp;<code>detailComponent.js</code> we are going to export the&nbsp;<code>detail</code>&nbsp;function.</p>



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
export default myFunct;</code></pre>



<p>And if we want to use this function in&nbsp;<code>homeComponent.js</code>, we will just use&nbsp;<code>import</code>.</p>



<pre class="wp-block-code"><code>import myFunct from './detailComponent.js';
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<p>If we want to import more than one module, we just put them within curly brackets.</p>



<pre class="wp-block-code"><code>import {myFunct, user, profile} from './detailComponent.js';
console.log(myFunct("TCM"));
console.log(user);
console.log(profile);</code></pre>



<p>So cool, isn’t it?!  Feel free to leave a comment below.</p>

JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write ...

Overview of ES6 Features in JavaScript - TCMHACK

Overview of ES6 Features in JavaScript

<h2>What is React?</h2>

<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called &ldquo;components&rdquo;.</p>

<blockquote class="wp-block-quote">
<p>ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model &ndash; View &ndash; Controller).</p>
</blockquote>

<p>ReactJS was developed by Jordan Walke, a software engineer working at Facebook. Facebook implemented ReactJS in 2011 in its newsfeed section, but it was released to the public in May 2013. After the implementation of ReactJS, Facebook&rsquo;s UI underwent drastic improvement. This resulted in satisfied users and a sudden boost in its popularity.</p>

<h2>Why it is used?</h2>

<p>In ReactJS, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks components are integrated together to build one bigger and dynamic application.</p>

<p>The biggest advantage of using components is that you can change any component at any point in time without affecting the rest of the applications. This feature is most effective when implemented with larger and real-time applications where data changes frequently. Each time any data is added or updated, ReactJS automatically updates the specific component whose state has actually changed. This saves the browser from the task of reloading the whole application to reflect the changes.</p>

<h2>Features Of React</h2>

<p>Now that you have understood what is React and why it is used, lets now uncover few of its intriguing features.</p>

<h3>1. <strong>JSX</strong></h3>

<p>JSX stands for JavaScript XML. Its an XML/ HTML like syntax used by React. It extends the ECMAScript so that XML/ HTML like text can co-exist along with JavaScript react code. This syntax is used by the pre-processors like <em>Babel</em> to transform HTML like text found in JavaScript files into standard JavaScript objects. With JSX, we can go a step further by again embedding the HTML code inside the JavaScript. This makes HTML codes easy to understand and boosts JavaScript&rsquo;s performance while making our application robust.</p>
<p>Let&rsquo;s see how to write Hello World Program using JSX.</p>

<pre class="wp-block-code"><code>const MyComponent = React.createClass({
    render: function () {
        return(    
            &lt;h2&gt;Hello World&lt;/h2&gt;
        );
    }
});<br><br>ReactDOM.render(<br>    &lt;MyComponent/&gt;, document.getElementById('content')<br>);</code></pre>

<h3>2. <strong>Virtual DOM</strong></h3>

<p>Like an actual DOM, virtual DOM is also a node tree that lists the elements and their attributes and content as Objects and their properties. React&rsquo;s render function creates a node tree out of the React components. Then, it updates this tree in response to the mutations in data model caused by various actions done either by the user or by the system.</p>

<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p><strong>This <em>Virtual DOM</em> works in three simple steps.</strong></p>
<ol>
<li>Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.</li>
<li>Then the difference between the previous DOM representation and the new one is calculated.</li>
<li>Once the calculations are done, the real DOM will be updated with only the things that have actually changed.</li>
</ol>
</div>
</div>

<p>You can think of it as a patch. As patches are applied only to the affected area, similarly, the virtual DOM acts as patches and are applied to the elements which are updated or changed, in the real DOM.</p>
<p>This makes our application faster and there is no memory wastage.</p>

<h3>3. Testability</h3>

<p>React views can be used as functions of the state (state is an object which determines how a component will render and behave). Thus, we can easily manipulate with state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug.</p>

<h3>4. Server-Side Rendering(SSR)</h3>

<p>Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. With SSR, the server&rsquo;s response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript, creating the virtual DOM, linking events, etc. at the back end.</p>
<h3>5. One-Way Data Binding</h3>

<p>Unlike other frameworks, ReactJS follows unidirectional data flow or one-way data binding. The major advantage of One-Way-Data binding is that throughout the application the data flows in a single direction which gives you better control over it. Because of this, application&rsquo;s state is contained in specific stores and as a result, rest of the components remains loosely coupled. This makes our application more flexible leading to increased efficiency.</p>
<h3>6. Simplicity</h3>

<p>Use of JSX files makes the application really simple and easy to code as well as understand. Even though we can use plain JavaScript here, using JSX is easier. React&rsquo;s component-based approach along with distinct lifecycle methods also make it simple to learn.</p>

<h3>7. Learning Curve</h3>

<p>Learning curve of React is quite low as compared to other frameworks. Anyone having even basic knowledge of programming can easily learn React. So, if you have previous knowledge of HTML and JavaScript you can get your hands on it very quickly.</p>

<p>This brings us to the end of this blog on what is React. Hope I was able to clearly explain what is React and why you should use it.</p>

<p><strong>Please feel free to comment your questions. Thanks</strong></p>

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UI...

Introduction to React

<p><strong><a rel="noreferrer noopener" aria-label="Intro.js (opens in a new tab)" href="https://introjs.com/" target="_blank">Intro.js</a></strong> is Step-by-step guide and feature introduction. It is open-source and free to use.</p>



<h3>WHY USING INTRO.JS?</h3>



<p>When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.</p>



<h3>Features:</h3>



<ul><li><strong>No dependencies, fast and small:</strong> 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped).</li><li><strong>User-friendly:</strong> Navigate using keyboard or mouse. Easily change the themes for your website.</li><li><strong>Browser compatibility:</strong> Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.</li></ul>



<h3>Important Links</h3>



<ol><li><a href="https://introjs.com/" target="_blank" rel="noreferrer noopener" aria-label="Home (opens in a new tab)">Home</a></li><li><a rel="noreferrer noopener" aria-label="Documentation (opens in a new tab)" href="https://introjs.com/docs/" target="_blank">Documentation</a></li><li><a rel="noreferrer noopener" aria-label=" Download (opens in a new tab)" href="https://github.com/usablica/intro.js/releases" target="_blank">Download</a></li><li><a href="https://introjs.com/" target="_blank" rel="noreferrer noopener" aria-label="Demo (opens in a new tab)">Demo</a></li><li><a href="https://github.com/usablica/intro.js" target="_blank" rel="noreferrer noopener" aria-label="Github (opens in a new tab)">Github</a></li></ol>



<p><strong><em>Credit goes to Introjs@<a href="https://introjs.com/">https://introjs.com/</a></em></strong></p>

Intro.js is Step-by-step guide and feature introduction. It is open-source and free to use.



WHY USING INTRO.JS?



When new users visit your w...

Intro.js - Step-by-step guide and feature introduction - TCMHACK

Intro.js - Step-by-step guide and feature introduction

<p><strong>AlertifyJS</strong> is a javascript framework for developing pretty browser dialogs and notifications.</p>



<h2>Features</h2>



<h3>Feature-rich</h3>



<p>Packed with awesome features! Modal and Modelss view modes, Move, Resize and more!</p>



<h3>&nbsp;Extensible</h3>



<p>Extend existing dialogs, or create your own! using AlertifyJS is very straightforward.</p>



<h3>&nbsp;Unobtrusive notifications</h3>



<p>Unobtrusive notification messages can be used to give feedback to users.</p>



<h3>&nbsp;Themeable</h3>



<p>Three themes right out-of-the-box (AlertifyJS, Semantic and Bootstrap). <a href="https://alertifyjs.com/examples.html#semantic" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">view example</a></p>



<h3>&nbsp;Responsive</h3>



<p>Whether you use a desktop, laptop, tablet or mobile device. Have no worries!</p>



<h3>&nbsp;i18n and RTL Support</h3>



<p>Different language or a right-to-left layout! AlertifyJS got you covered. <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/examples.html#RTL" target="_blank">view example</a></p>



<p><strong>AlertifyJS not only provides a replacement for default browser dialogs, it makes it super easy to create your own!</strong></p>



<pre class="wp-block-code"><code>if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:&#91;{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");</code></pre>



<h4><strong>Let's Start</strong></h4>



<ul><li><a rel="noreferrer noopener" aria-label="Getting Started (opens in a new tab)" href="https://alertifyjs.com/guide.html" target="_blank">Getting Started</a></li><li>Components<ul><li><a rel="noreferrer noopener" aria-label="Alert (opens in a new tab)" href="https://alertifyjs.com/alert.html" target="_blank">Alert</a></li><li><a rel="noreferrer noopener" aria-label="Confirm (opens in a new tab)" href="https://alertifyjs.com/confirm.html" target="_blank">Confirm</a></li><li><a rel="noreferrer noopener" aria-label="Prompt (opens in a new tab)" href="https://alertifyjs.com/prompt.html" target="_blank">Prompt</a></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/notifier.html" target="_blank">Notifier</a></li></ul></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/factory.html" target="_blank">Dialogs Factory</a></li><li><a rel="noreferrer noopener" aria-label="Examples (opens in a new tab)" href="https://alertifyjs.com/examples.html" target="_blank">Examples</a></li><li><a href="https://alertifyjs.com/tutorials.html" target="_blank" rel="noreferrer noopener" aria-label="Tutorials (opens in a new tab)">Tutorials</a></li></ul>



<p><em><strong>Credit goes to AlertifyJS@<a href="https://alertifyjs.com/">https://alertifyjs.com/</a></strong></em></p>

AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.



Features



Feature-rich



Packed with awesome ...

AlertifyJS - Browser dialogs made easy! - TCMHACK

AlertifyJS - Browser dialogs made easy!

<p><strong><a href="https://sweetalert.js.org/" target="_blank" rel="noreferrer noopener" aria-label="SweetAlert (opens in a new tab)">SweetAlert</a></strong> A beautiful replacement for JavaScript's "alert".</p>

<h2>Installation</h2>

<pre class="wp-block-code"><code>npm install --save sweetalert</code></pre>

<h2>Usage</h2>

<pre class="wp-block-code"><code>import swal from 'sweetalert';
swal("Hello world!");</code></pre>

<h2>Upgrading from 1.X</h2>

<p>Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the&nbsp;<a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">upgrade guide</a>&nbsp;to avoid nasty suprises!</p>

<h2>Guides</h2>

<ul>
<li><a href="https://sweetalert.js.org/guides/#installation" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Installation</a></li>
<li><a href="https://sweetalert.js.org/guides/#getting-started" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Getting started</a></li>
<li><a href="https://sweetalert.js.org/guides/#advanced-examples" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Advanced examples</a></li>
<li><a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Using with libraries</a></li>
<li><a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Upgrading from 1.X</a></li>
</ul>

<h2>Documentation</h2>

<ul>
<li><a href="https://sweetalert.js.org/docs/#configuration" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Configuration</a></li>
<li><a href="https://sweetalert.js.org/docs/#methods" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Methods</a></li>
<li><a href="https://sweetalert.js.org/docs/#theming" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Theming</a></li>
</ul>

<h2>Examples</h2>

<h3>An error message:</h3>

<pre class="wp-block-preformatted">swal("Oops!", "Something went wrong!", "error");</pre>

<h3>A warning message, with a function attached to the confirm message:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete =&gt; {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
});

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}</pre>

<h3>A prompt modal, where the user's input is logged:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal("Type something:", {
  content: "input",
})
.then((value) =&gt; {
  swal(`You typed: NULL`);
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const value = await swal("Type something:", {
  content: "input",
});

swal(`You typed: NULL`);</pre>

<h3>In combination with Fetch:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch =&gt; {
  if (willSearch) {
    return fetch("http://pokeapi.co/api/v2/pokemon/1");
  }
})
.then(result =&gt; result.json())
.then(json =&gt; console.log(json))
.catch(err =&gt; {
  swal("Oops!", "Seems like we couldn't fetch the info", "error");
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willSearch = await swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
});

if (willSearch) {
  try {
    const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
    const json = await result.json();
    console.log(json);
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error");
  }
}</pre>

<h2>Using with React</h2>

<p>SweetAlert has tools for&nbsp;<a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">integrating with your favourite rendering library.</a></p>

<p>If you're using React, you can install&nbsp;<a href="https://www.npmjs.com/package/@sweetalert/with-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">SweetAlert with React</a>&nbsp;in addition to the main library, and easily add React components to your alerts like this:</p>

<pre class="wp-block-preformatted">import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  &lt;div&gt;
    &lt;h1&gt;Hello world!&lt;/h1&gt;
    &lt;p&gt;
      This is now rendered with JSX!
    &lt;/p&gt;
  &lt;/div&gt;
)</pre>

<p><a href="https://sweetalert.js.org/guides/#using-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Read more about integrating with React</a></p>

<p><strong><em>Credit goes to SweetAlerts@<a href="https://sweetalert.js.org/">https://sweetalert.js.org/</a></em></strong></p>

SweetAlert A beautiful replacement for JavaScript's "alert".

SweetAlert - A beautiful replacement for JavaScript's "alert" - TCMHACK

SweetAlert - A beautiful replacement for JavaScript's "alert"

<p><strong>Paper.js</strong> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.</p>

<p>Paper.js is based on and largely compatible with&nbsp;<a href="http://scriptographer.org/" target="_blank" rel="noreferrer noopener">Scriptographer</a>, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.</p>

<p>Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.</p>

<p>Paper.js is developed by&nbsp;<a href="http://lehni.org/" target="_blank" rel="noreferrer noopener">J&uuml;rg Lehni</a>&nbsp;&amp;&nbsp;<a href="http://jonathanpuckey.com/" target="_blank" rel="noreferrer noopener">Jonathan Puckey</a>, and distributed under the permissive MIT License.</p>
<h3>Getting Started</h3>
<ul>
<li>First of all, take a look at some of paperjs <a href="http://paperjs.org/examples/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">examples</a>.</li>
<li><a href="http://paperjs.org/download/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Download</a>&nbsp;Paper.js or check out the latest version from paperjs&nbsp;<a href="http://github.com/paperjs/paper.js" target="_blank" rel="noreferrer noopener">Github Repository</a>.</li>
<li>Want to learn Paper.js? Why not start now with one of our <a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Tutorials</a>.</li>
<li>If you have any questions or comments, please join the paperjs <a href="http://groups.google.com/group/paperjs" target="_blank" rel="noreferrer noopener">mailing list</a>.</li>
<li>To stay up to date, <a href="http://twitter.com/paperjs" target="_blank" rel="noreferrer noopener">follow paperjs on Twitter</a>.</li>
</ul>
<h3>Overview</h3>

<p>Paper.js is not simply a wrapper around the Canvas, it offers much more:</p>

<ul>
<li>A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.</li>
<li>The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.</li>
<li>A well designed and battle hardened Application Programming Interface (API).</li>
<li>PaperScript, a simple extension of JavaScript, allowing the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and adding support for operator overloading to any object.</li>
<li>There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first class citizen by making working with vectors and geometries as simple as possible through its core types such as&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>,&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/rectangle" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Rectangle</a>. The manipulation of&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.</li>
<li>Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.</li>
<li>Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.</li>
<li>Smoothen curves, and simplify path segments by fitting curves through points.</li>
<li>Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.</li>
<li>Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average &amp; negation.</li>
</ul>

<p>Read paperjs&nbsp;<a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">tutorials</a> to learn more about the features of Paper.js.</p>
<h3>Browser Support</h3>

<p>Paper.js is aimed at modern browsers with support for the Canvas object and EcmaScript 5. Even though in theory it is possible to write code that works in older browsers (Yes Explorer 8 and below, we are looking at you!), paperjs currently do not support them out of the box. Let&rsquo;s go forward!</p>

<p><strong><em>Credit goes to PaperJS@<a href="http://paperjs.org/">http://paperjs.org/</a></em></strong></p>

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Obj...

Paper.js — The Swiss Army Knife of Vector Graphics Scripting - TCMHACK

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similar...

React vs. Angular: The Complete Comparison - TCMHACK

React vs. Angular: The Complete Comparison

<p>With the release of the&nbsp;<a href="https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md">VueJS 3 "Request for Comment" documentation</a>&nbsp;about two weeks ago, Evan You introduced the VueJS function-based API and has set the VueJS community ablaze. These new ideas are still in the "Request for Comments" stage, so they're far from set in stone, but because the RFC introduces such significant changes, I made a quick summary of what you need to know.</p>



<p><strong>NB: All this information and much more is in the RFC, so I do suggest you read that.</strong></p>



<h2>Setup</h2>



<p>VueJS 3 departs from the option-based API we've grown to love and introduces the&nbsp;<code>setup()</code>&nbsp;function, which will be where all the magic happens. This function single-handedly sets up the the logic for our component and returns data that's exposed to the template. The option-based API will continue to work even in VueJS 3, but this new function-based API will be the new standard.</p>



<p>For all the functionality we're used to from VueJS like reactive data, computed values, methods and watchers, we&nbsp;<code>import</code>&nbsp;functions from&nbsp;<code>vue</code>&nbsp;and use them in our&nbsp;<code>setup()</code>&nbsp;function. Here's a basic example from the RFC:</p>



<pre class="wp-block-code"><code>&lt;template>
  &lt;div>
    &lt;span>count is {{ count }}&lt;/span>
    &lt;span>plusOne is {{ plusOne }}&lt;/span>
    &lt;button @click="increment">count++&lt;/button>
  &lt;/div>
&lt;/template>

&lt;script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is NULL`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
&lt;/script></code></pre>



<h2>But why?</h2>



<p>If that example doesn't make it clear why this change was introduced, or if it feels like a step back in terms of usability, I understand. I had the same initial reaction and it took me a bit of time to figure out why this change was necessary. The v2.x API is widely loved and is often the reason why people move to VueJS from other frameworks like ReactJS or AngularJS, so a change this drastic seems like a strange idea.</p>



<h3>Encapsulation is king</h3>



<p>The component API was created in part to make it easier to reuse code across your application. While VueJS is seriously modular and uses components, the current option-based API doesn't allow for an easy extraction of functionality that relates to a single piece of functionality or data. You need to define your data(/state), computed values and methods separately, while they might all be related. This gets confusing when components grow and methods deal with different pieces of data.</p>



<p>This is where the new function-based API comes in. It allows you to extract all code related to a piece of logic and put it together in what they call a "composition function", which returns reactive state. An example given in the RFC uses one of those composition functions to&nbsp;<a href="https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#logic-composition">extract the logic of listening to the mouse position</a>:</p>



<pre class="wp-block-code"><code>function useMouse() {
  const x = value(0)
  const y = value(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// in consuming component
const Component = {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  },
  template: `&lt;div>{{ x }} {{ y }}&lt;/div>`
}</code></pre>



<p>If we compare this to how we would write this functionality in the v2.x API, we can see that the functionality related to using the mouse position is all over the place, where in the v3.x API, it's quite nicely grouped in a singular function:</p>



<pre class="wp-block-code"><code>&lt;template>
    &lt;div>
        {{ x }} {{ y }}
    &lt;/div>
&lt;/template>

&lt;script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
    };
  },
  mounted() {
    window.addEventListener('mousemove', this.update);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.update);
  },
  methods: {
    update(e) {
      this.x = e.pageX;
      this.y = e.pageY;
    },
  },
};
&lt;/script></code></pre>



<h3>And more</h3>



<p>Encapsulation isn't the only reason why these changes are useful, so here are two other reasons why this change might be what VueJS needs.</p>



<p>The current option-based API in VueJS has an issue in that it doesn't properly support TypeScript type inference. The proposed changes fix this issue, and achieve full typing support, with TS code looking almost the same as JS code as a cherry on top of an already very useful pie.</p>



<p>VueJS is loved for its extremely small bundle size and this change shrinks that bundle even more. Since function and variable names can be shortened with standard minification (while object/class methods and properties can't), the code simply compresses better.</p>

With the release of the&nbsp;VueJS 3 "Request for Comment" documentation&nbsp;about two weeks ago, Evan You introduced the VueJS function-based A...

VueJS is dead, long live VueJS! - TCMHACK

VueJS is dead, long live VueJS!

<p>WebRTC is constantly evolving and with it, it&rsquo;s most known function&nbsp;<code>getUserMedia()</code>. With it you can get access to the device&rsquo;s webcams and microphones and request a video stream, an audio stream or both.</p>

<p>In this article we will be focusing on the video constraints available to us when requesting a video stream through&nbsp;<code>getUserMedia()</code>. In a previous blog post we&rsquo;ve focused on the&nbsp;<a href="../../../../blog/getusermedia-audio-constraints/">audio constraints</a>.</p>

<h3 id="mediastreamconstraints">MediaStreamConstraints</h3>

<p>The&nbsp;<code>getUserMedia()</code>&nbsp;function receives only one parameter, a&nbsp;<code>MediaStreamConstraints</code>object used to specify what kind of tracks (audio, video or both) to request, and, optionally, any requirements for each track.</p>

<p>Here&rsquo;s a basic example of how this object is sent to the newer, promise based,&nbsp;<code>getUserMedia()</code>:</p>

<pre class="wp-block-code"><code>var constraints = {
    audio: true,
    video: true
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
    /* use the stream */
}).catch(function(err) {
    /* handle the error */
});</code></pre>

<p>The&nbsp;<code>constraints</code>&nbsp;object can have one or both of these 2 properties:</p>

<ul>
<li>video &ndash; indicates whether or not a video track is required</li>
<li>audio &ndash; indicates whether or not an audio track is required</li>
</ul>

<p>Here&rsquo;s how a basic constraint object that requires both an audio and a video stream looks like (the same one used above):</p>

<p>var constraints = { audio:true, video:true}</p>

<p>If you&rsquo;re just taking a picture and don&rsquo;t need an audio track just set the audio property to false like this:</p>

<pre class="wp-block-code"><code>var constraints = {
    audio: false,
    video: true
}</code></pre>

<p>If&nbsp;<code>true</code>&nbsp;is specified for video or audio, the resulting stream is&nbsp;<em>required</em>&nbsp;to have that particular media track in it, else the call to&nbsp;<code>getUserMedia()</code>&nbsp;will result in an&nbsp;<code>NotFoundError</code>error (see&nbsp;<a href="../../../../blog/common-getusermedia-errors/">common getUserMedia() Errors</a>&nbsp;for more details).</p>

<h3 id="mediatrackconstraints">MediaTrackConstraints</h3>

<p>The audio and video properties can take 2 types of values:</p>

<ul>
<li>a Boolean value (true or false) as above</li>
<li>a&nbsp;<code>MediaTrackConstraints</code>&nbsp;object which provides specific properties like width and height that must be met by the track.</li>
</ul>

<h4 id="videotrackconstraintsresolution">Video Track Constraints: Resolution</h4>

<p>One can use the&nbsp;<code>width</code>&nbsp;and&nbsp;<code>height</code>&nbsp;properties to request a certain resolution from the webcam. In this example the browser will request a 720p (1280&times;720) video stream:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
}</code></pre>

<p><strong>The browser will try to honor this, but may return a different resolution stream.</strong>From my experience this often happens because the webcam does not support the requested resolution (try requesting odd resolutions like 721&times;55 and see what happens). It might also be that the constraints were overridden by another&nbsp;<code>getUserMedia()</code>&nbsp;call from a different app on Mac (where webcam access is shared) or a different Chrome tab (shared access). Other reasons might exist too.</p>

<p>You can try the&nbsp;<a href="https://webrtchacks.github.io/WebRTC-Camera-Resolution/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">WebRTC camera resolution finder</a>&nbsp;to see what resolutions are supported by your browser and webcam combo.</p>

<h4 id="keywords">Keywords</h4>

<p>If the resolution is important to you and the device and browser can not guarantee it then you can use the&nbsp;<code>min</code>,&nbsp;<code>max</code>&nbsp;and&nbsp;<code>exact</code>&nbsp;keywords to help you get the best resolution from any device.&nbsp;These keywords apply to&nbsp;<em>any</em>&nbsp;MediaTrackConstraint property.</p>

<p>If for example you&rsquo;re doing image recognition in video streams and absolutely require 1280&times;720 resolution use this constraint :</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: {
            exact: 1280
        },
        height: {
            exact: 720
        }
    }
}</code></pre>

<p>In the example above, if no camera exists that supports the exact resolution, then the returned promise will be rejected with&nbsp;<code>OverconstrainedError</code>, and the user will not be prompted(see&nbsp;<a href="../../../../blog/common-getusermedia-errors/">common getUserMedia() Errors</a>&nbsp;for details).</p>

<p>The following constraint also requests a of 1280&times;720 resolution but it also mentions 320&times;240 as the minimum resolution since not all webcams support 1280&times;720 and in some use cases it&rsquo;s better to get something rather than nothing:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: {
            min: 320,
            max: 1280
        },
        height: {
            min: 240,
            max: 720
        }
    }
}</code></pre>

<p>Values without the&nbsp;<code>min</code>,&nbsp;<code>max</code>&nbsp;and&nbsp;<code>exact</code>&nbsp;keywords are considered&nbsp;<code>ideal</code>&nbsp;values, which itself is a keyword but it is not mandatory. These 2 examples do the same thing:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: 1280,
        height: 720
    }
}</code></pre>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: {
            ideal: 1280
        },
        height: {
            ideal: 720
        }
    }
}</code></pre>

<h4 id="videotrackconstraintsgettingthefrontorrearcameraonmobiledevices">Video Track Constraints: Getting The Front Or Rear Camera On Mobile Devices</h4>

<p>One can use the&nbsp;<code>facingMode</code>&nbsp;property for the video track constraint. Accepted values are:&nbsp;<code>user</code>&nbsp;(front camera),&nbsp;<code>environment</code>&nbsp;(rear camera),&nbsp;<code>left</code>&nbsp;and&nbsp;<code>right</code>.</p>

<p>Here&rsquo;s how to request a video stream that should&nbsp;<em>ideally</em>&nbsp;come from the back camera:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: 640,
        height: 480,
        facingMode: "environment"
    }
}</code></pre>

<p>or</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: 640,
        height: 480,
        facingMode: {
            ideal: "environment"
        }
    }
}</code></pre>

<p>Here&rsquo;s how to request a video stream that should&nbsp;<em>absolutely</em>&nbsp;come from the back camera:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: 640,
        height: 480,
        facingMode: {
            exact: "environment"
        }
    }
}</code></pre>

<p>I am not sure how well these are supported by mobile browsers.</p>

<h4 id="videotrackconstraintsframerate">Video Track Constraints: Frame Rate</h4>

<p>Since frame rate has a direct impact on video quality but also bandwidth, in some cases, like publishing a video stream over low bandwidth connections, it might be a good idea to limit the frame rate. I was able to obtain a 60fps stream from the Logitech C925E by using:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        width: 320,
        height: 240,
        frameRate: {
            ideal: 60,
            min: 10
        }
    }
}</code></pre>

<p>Keep in mind the frame rate of a stream coming from a webcam depends a lot on the light in the room.</p>

<h3 id="usingacertainwebcamormicrophonedevice">Using a Certain Webcam or Microphone Device</h3>

<p>There is one constraint property that applies to both audio and video tracks:&nbsp;<code>deviceId</code>. It specifies the device ID (or an array of IDs which) which should be used for capturing that stream. The device ID is unique and will be the same across browsing sessions on the same origin. You will need to first obtain the device id using&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices" target="_blank" rel="noopener"><code>MediaDevices.enumerateDevices()</code></a>.</p>

<p>Once you know the&nbsp;<code>deviceId</code>&nbsp;you can ask for a specific webcam or microphone:</p>

<pre class="wp-block-code"><code>{
    audio: true,
    video: {
        deviceId: {
            exact: "the_device_id"
        }
    }
}</code></pre>

<p>There&rsquo;s also&nbsp;<code>groupId</code>, a shared id by all media sources that come from the same physical device. For example: a microphone and speaker that come from the same headset will share the same group ID.</p>

<p><a href="https://webrtc.github.io/samples/src/content/devices/input-output/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">This example</a>&nbsp;allows you to switch between the available devices used for input (mic &amp; cam) and output (speaker).</p>

<h3 id="mediadevicesgetsupportedconstraints">MediaDevices.getSupportedConstraints()</h3>

<p>Chrome 53, Firefox 44 and Safari 11 added support for&nbsp;<code>MediaDevices.getSupportedConstraints()</code>. The function returns a dictionary listing the constraints supported by the user agent.</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getSupportedConstraints#Result" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Click here</a>&nbsp;to run it for your current browser.</p>

<p>The function seems to return a lot of false positives,&nbsp;<code>track.getSettings()</code>&nbsp;gives better results.</p>

<h3 id="mediastreamtrackgetsettings">MediaStreamTrack.getSettings()</h3>

<p>You can also check which constraints are supported by using&nbsp;<code>track.getSettings()</code>. It returns an object containing all applicable constraints, including those supported by the browser but whose defaults have not been changed through code.</p>

<p>Here&rsquo;s how to use the function and print the result to the console:</p>

<pre class="wp-block-code"><code>navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
    video.srcObject = stream;
    stream.getTracks().forEach(function(track) {
        console.log(track.getSettings());
    })
});</code></pre>

<p>This&nbsp;<a href="https://codepen.io/naicuoctavian/pen/EbZwMy" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">code pen</a>&nbsp;will write in page the result of&nbsp;<code>track.getSettings()</code>&nbsp;for your browser.</p>

<p>The function has been added in Chrome 59 and it&rsquo;s also supported by Firefox and Safari 11.</p>

<h3 id="oldconstraints">Old Constraints</h3>

<p>The&nbsp;<a href="https://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">specifications for the constraints object</a>&nbsp;has changed in the past. Constraints using the old spec looked like this:</p>

<pre class="wp-block-code"><code>var constraints = {
    audio: true,
    video: {
        mandatory: {
            minWidth: 640,
            maxWidth: 640,
            minHeight: 480,
            maxHeight: 480
        }
    }
}</code></pre>

<p>The old spec was the only one supported by Chrome until Chrome 59 (June 2017) which added support for the new one. Older versions of Chrome can also use the new spec through&nbsp;<a href="https://github.com/webrtc/adapter" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">adapter.js</a></p>

<p>Firefox 38+ (May 2015) and Safari 11 both support the new video constraints spec.</p>

WebRTC is constantly evolving and with it, it’s most known function getUserMedia(). With it you can get access to the device’s webcams...