<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: TheDailyTechTalk</title>
    <description>The latest articles on DEV Community by TheDailyTechTalk (@thedailytechtalk).</description>
    <link>https://dev.to/thedailytechtalk</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F683160%2F5d35cc3e-1891-4ee9-9ea3-c0bd0368c079.png</url>
      <title>DEV Community: TheDailyTechTalk</title>
      <link>https://dev.to/thedailytechtalk</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/thedailytechtalk"/>
    <language>en</language>
    <item>
      <title>Exploring JavaScript console.log object</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Sun, 01 May 2022 10:20:41 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/exploring-javascript-consolelog-object-4ela</link>
      <guid>https://dev.to/thedailytechtalk/exploring-javascript-consolelog-object-4ela</guid>
      <description>&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript Console
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most developers usually use &lt;code&gt;console.log()&lt;/code&gt; to debug JavaScript code, but &lt;code&gt;console&lt;/code&gt; provides us with such a powerful set of features it would be shame not to use them, or at least know what they do.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;console.log()&lt;/code&gt; For general output of logging information.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.info()&lt;/code&gt; Informative logging of information.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.warn()&lt;/code&gt; Outputs a warning message.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.error()&lt;/code&gt; Outputs an error message to the Web console.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using other logging besides &lt;code&gt;console.log()&lt;/code&gt; will provide you with more informative and clearer logs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--d1haIhfp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rh74jy8pa4thcj7duem.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d1haIhfp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rh74jy8pa4thcj7duem.png" alt="console logging example" width="546" height="268"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Lets start by exploring console object
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Umad8Mcy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kwlj6wc7wgj0e8q7gqa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Umad8Mcy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kwlj6wc7wgj0e8q7gqa.png" alt="console" width="741" height="818"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see Console object has plenty of methods. Lets explore some of more useful ones.&lt;/p&gt;

&lt;h2&gt;
  
  
  console.clear()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;console.clear()&lt;/code&gt; clear the console.&lt;/p&gt;

&lt;h2&gt;
  
  
  console.dir()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;console.log()&lt;/code&gt; prints the object in its string representation while &lt;code&gt;console.dir()&lt;/code&gt; recognizes the object as an object and prints it’s properties in the form of a clean expandable list.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Rex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;friends&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cat&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dog&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;duck&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]};&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dir&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8vAS9R3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0uarwub9qbw15xjf90r.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8vAS9R3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0uarwub9qbw15xjf90r.PNG" alt="console.dir()" width="475" height="213"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  console.table()
&lt;/h2&gt;

&lt;p&gt;With &lt;code&gt;console.table()&lt;/code&gt; we can create beautiful tables. This is probably my favourite &lt;code&gt;console&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7zZoO7dI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eka7eaofk3p3twymy0g.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7zZoO7dI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eka7eaofk3p3twymy0g.PNG" alt="console.table" width="880" height="156"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  console.time(), console.timeLog() and console.timeEnd()
&lt;/h2&gt;

&lt;p&gt;Use &lt;code&gt;console.time()&lt;/code&gt; to start a timer.&lt;br&gt;
Use &lt;code&gt;console.timeLog()&lt;/code&gt; to print time elapsed since the timer started.&lt;br&gt;
Use &lt;code&gt;console.timeEnd()&lt;/code&gt; to print the total amount of time since &lt;code&gt;console.time()&lt;/code&gt; started.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dtzQJKQL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01eoysbgw6q8uw7r7025.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dtzQJKQL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01eoysbgw6q8uw7r7025.PNG" alt="console.table()" width="355" height="191"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  console.group() and console.groupEnd()
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The console.group() method creates a new inline group in the Web console log. This indents following console messages by an additional level, until console.groupEnd() is called.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3_xctQCp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvyy14yey3zykvxy37rm.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3_xctQCp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvyy14yey3zykvxy37rm.PNG" alt="group" width="568" height="457"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  console logging with CSS
&lt;/h2&gt;

&lt;p&gt;This works with most console method such as &lt;code&gt;.log()&lt;/code&gt;, &lt;code&gt;.warn()&lt;/code&gt;, &lt;code&gt;.error()&lt;/code&gt; etc.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Please note that we have to use '%c' for css to work!&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;%cTheDailyTechTalk!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0AZfb8VJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxl8cpeg8znxtypzpubb.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0AZfb8VJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxl8cpeg8znxtypzpubb.PNG" alt="group" width="880" height="155"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Top 10 Must Know JavaScript Functions!
</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Tue, 14 Sep 2021 09:15:18 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/top-10-must-know-javascript-functions-1dm9</link>
      <guid>https://dev.to/thedailytechtalk/top-10-must-know-javascript-functions-1dm9</guid>
      <description>&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about JavaScript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  Top 10 Must-Know JavaScript Functions
&lt;/h1&gt;

&lt;p&gt;Please check out full &lt;a href="https://www.thedailytechtalk.com/top-10-must-know-javascript-functions"&gt;article here&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  1 filter()
&lt;/h2&gt;

&lt;p&gt;This function filters an array based on the condition you provide and it returns a new array which contains items which satisfy those conditions.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;filter()&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const temperatures = [10, 2, 30.5, 23, 41, 11.5, 3];

const coldDays = temperatures.filter(dayTemperature =&amp;gt; {
    return dayTemperature &amp;lt; 20;
});

console.log("Total cold days in week were: " + coldDays.length); // 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2 map()
&lt;/h2&gt;

&lt;p&gt;Function &lt;code&gt;map()&lt;/code&gt; is a very simple, it loops over an array and convert each item into something else.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const readings = [10, 15, 22.5, 11, 21, 6.5, 93];
const correctedReadings = readings.map(reading =&amp;gt; reading + 1.5);
console.log(correctedReadings); // gives [11.5, 16.5, 24, 12.5, 22.5, 8, 94.5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3 some()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;some()&lt;/code&gt; is very similar to &lt;code&gt;filter()&lt;/code&gt; , but &lt;code&gt;some()&lt;/code&gt; returns boolean instead.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const animals = [
    {
        name: 'Dog',
        age: 2
    },

    {
        name: 'Cat',
        age: 8
    },

     {
        name: 'Sloth',
        age: 6
    },
];

if(animals.some(animal =&amp;gt; {
    return animal.age &amp;gt; 4
})) {
    console.log("Found some animals!")
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  4 every()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;every()&lt;/code&gt;  is also very similar to &lt;code&gt;some()&lt;/code&gt; , but &lt;code&gt;every()&lt;/code&gt; true only if every single element in array satisfy our condition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const isBelowThreshold = (currentValue) =&amp;gt; currentValue &amp;lt; 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));   // true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  5 shift()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;shift()&lt;/code&gt; method removes the first element from an array and returns removed element. This method changes the length of the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const items = ['meat', 'carrot', 'ham', 'bread', 'fish'];
items.shift()
console.log(items); // ['carrot', 'ham', 'bread', 'fish']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  6 unshift()
&lt;/h2&gt;

&lt;p&gt;Just like  &lt;code&gt;shift()&lt;/code&gt; method removes the first element from an array &lt;code&gt;unshift()&lt;/code&gt; adds it. This method changes the length of the array and returns the new length of the array as result.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const items = ['milk', 'fish'];
items.unshift('cookie')
console.log(items); // ['cookie', 'milk', 'fish']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  7 slice()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;slice()&lt;/code&gt; method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let message = "The quick brown fox jumps over the lazy dog";
let startIndex = message.indexOf('brown');
let endIndex = message.indexOf('jumps');
let newMessage = message.slice(startIndex, endIndex);
console.log(newMessage); // "brown fox "
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  8 splice()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;splice()&lt;/code&gt; below start at index 2 (the third place, count starts from 0!! ) of the array, and remove one item.&lt;br&gt;
In our array that would mean that "rabbit" got removed. &lt;code&gt;splice()&lt;/code&gt; will return new array as result.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const animals = ['dog', 'cat', 'rabbit', 'shark', 'sloth'];
animals.splice(2, 1);
console.log(animals); // ["dog", "cat", "shark", "sloth"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  9 includes()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;includes()&lt;/code&gt; will check every item in the array, and check if any of them includes our condition. It will return boolean.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));  //  true

console.log(pets.includes('at'));  //  false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  10 reverse()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;reverse()&lt;/code&gt; method reverses an array. Be careful since &lt;code&gt;reverse()&lt;/code&gt; is destructive which means it changes the original array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const array1 = ['one', 'two', 'three', 'four'];
console.log(array1);  //  ["one", "two", "three", "four"]

const reversed = array1.reverse();
console.log(reversed);  //  ["four", "three", "two", "one"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about JavaScript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Exploring JavaScript console object and logging!</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Tue, 14 Sep 2021 09:12:27 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/exploring-javascript-console-object-and-logging-5079</link>
      <guid>https://dev.to/thedailytechtalk/exploring-javascript-console-object-and-logging-5079</guid>
      <description>&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript Console
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most developers usually use &lt;code&gt;console.log()&lt;/code&gt; to debug JavaScript code, but &lt;code&gt;console&lt;/code&gt; provides us with such a powerful set of features it would be shame not to use them, or at least know what they do.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;console.log()&lt;/code&gt; For general output of logging information.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.info()&lt;/code&gt; Informative logging of information.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.warn()&lt;/code&gt; Outputs a warning message.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.error()&lt;/code&gt; Outputs an error message to the Web console.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using other logging besides &lt;code&gt;console.log()&lt;/code&gt; will provide you with more informative and clearer logs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--d1haIhfp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rh74jy8pa4thcj7duem.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--d1haIhfp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rh74jy8pa4thcj7duem.png" alt="console logging example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Lets start by exploring console object
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Umad8Mcy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kwlj6wc7wgj0e8q7gqa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Umad8Mcy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kwlj6wc7wgj0e8q7gqa.png" alt="console"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see Console object has plenty of methods. Lets explore some of more useful ones.&lt;/p&gt;

&lt;h2&gt;
  
  
  console.clear()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;console.clear()&lt;/code&gt; clear the console.&lt;/p&gt;

&lt;h2&gt;
  
  
  console.dir()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;console.log()&lt;/code&gt; prints the object in its string representation while &lt;code&gt;console.dir()&lt;/code&gt; recognizes the object as an object and prints it’s properties in the form of a clean expandable list.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Rex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;friends&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cat&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dog&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;duck&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]};&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dir&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8vAS9R3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0uarwub9qbw15xjf90r.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8vAS9R3m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0uarwub9qbw15xjf90r.PNG" alt="console.dir()"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  console.table()
&lt;/h2&gt;

&lt;p&gt;With &lt;code&gt;console.table()&lt;/code&gt; we can create beautiful tables. This is probably my favourite &lt;code&gt;console&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7zZoO7dI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eka7eaofk3p3twymy0g.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7zZoO7dI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eka7eaofk3p3twymy0g.PNG" alt="console.table"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  console.time(), console.timeLog() and console.timeEnd()
&lt;/h2&gt;

&lt;p&gt;Use &lt;code&gt;console.time()&lt;/code&gt; to start a timer.&lt;br&gt;
Use &lt;code&gt;console.timeLog()&lt;/code&gt; to print time elapsed since the timer started.&lt;br&gt;
Use &lt;code&gt;console.timeEnd()&lt;/code&gt; to print the total amount of time since &lt;code&gt;console.time()&lt;/code&gt; started.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dtzQJKQL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01eoysbgw6q8uw7r7025.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dtzQJKQL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01eoysbgw6q8uw7r7025.PNG" alt="console.table()"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  console.group() and console.groupEnd()
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The console.group() method creates a new inline group in the Web console log. This indents following console messages by an additional level, until console.groupEnd() is called.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--3_xctQCp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvyy14yey3zykvxy37rm.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3_xctQCp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvyy14yey3zykvxy37rm.PNG" alt="group"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  console logging with CSS
&lt;/h2&gt;

&lt;p&gt;This works with most console method such as &lt;code&gt;.log()&lt;/code&gt;, &lt;code&gt;.warn()&lt;/code&gt;, &lt;code&gt;.error()&lt;/code&gt; etc.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Please note that we have to use '%c' for css to work!&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;%cTheDailyTechTalk!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0AZfb8VJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxl8cpeg8znxtypzpubb.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0AZfb8VJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxl8cpeg8znxtypzpubb.PNG" alt="group"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Selecting low power networking — LoraWan,SigFox, Nb-IoT and LTE-M</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Tue, 14 Sep 2021 07:06:32 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/selecting-low-power-networking-lorawan-sigfox-nb-iot-and-lte-m-2ld3</link>
      <guid>https://dev.to/thedailytechtalk/selecting-low-power-networking-lorawan-sigfox-nb-iot-and-lte-m-2ld3</guid>
      <description>&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Selecting low power networking contrasting pros and cons of LoraWan,SigFox, Nb-IoT and LTE-M
&lt;/h1&gt;

&lt;h2&gt;
  
  
  What is "Low power wide area network"?
&lt;/h2&gt;

&lt;p&gt;LPWAN is a type of wireless telecommunication designed for long-range communications between IoT devices, sensors etc. Its main purpose is to send small amounts of data over a great distance for a long period of time, even years on a single battery*.* Coverage can range from 1 km up to over 40 km.&lt;/p&gt;

&lt;p&gt;Frequency which LPWAN providers like SigFox or LoraWaN use depends on location (and sometimes even the country). Providers use either unlicensed ISM bands , 868 MHz in Europe, 915 Mhz in North America and 433 MHz in Asia, or licensed LTE frequency bands.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kt_J_-9t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.thedailytechtalk.com/_nuxt/uploads/63ed0e7-592.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kt_J_-9t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.thedailytechtalk.com/_nuxt/uploads/63ed0e7-592.jpg" alt="The advantages of Sigfox, LoRaWAN, and NB-IoT."&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The respective advantages of Sigfox, LoRaWAN, and NB-IoT. Source: The Korean Institute of Communications and Information Sciences (KICS) as published in ICT Express, March 2019.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  SigFox
&lt;/h1&gt;

&lt;p&gt;Sigfox was founded in 2009 in France.Today they are available in over 60 countries and their numbers are constantly growing. They offer end-to-end LPWAN solutions. Sigfox network architecture is built using base stations in a star topology, but with their own cloud service acting as a middle man. That kind of architecture offers some great benefits such as data security and data flow via API.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Strong industry support and partners like Texas Instruments, Silicon Labs and Arduino&lt;/li&gt;
&lt;li&gt;Very long range&lt;/li&gt;
&lt;li&gt;Large coverage&lt;/li&gt;
&lt;li&gt;Cost effective&lt;/li&gt;
&lt;li&gt;Cloud service &amp;amp; API&lt;/li&gt;
&lt;li&gt;Easy to integrate with services like AWS, Azure and others&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Not an open standard&lt;/li&gt;
&lt;li&gt;Low security (16 bit encryption)&lt;/li&gt;
&lt;li&gt;US design architecture is different from European architecture&lt;/li&gt;
&lt;li&gt;Bad UI/UX in administration interface&lt;/li&gt;
&lt;li&gt;Bad latency performance&lt;/li&gt;
&lt;li&gt;Low maximum payload length&lt;/li&gt;
&lt;li&gt;Limited amount of UL / DL&lt;/li&gt;
&lt;li&gt;No private networks&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  LoRaWaN
&lt;/h1&gt;

&lt;p&gt;LoRaWaN network architecture is deployed as a typical star topology, with a gateway in the middle that converts radio signal to IP and vice versa. They are mainly used for telemetric data transfers and object tracking. Messages transmitted by an end device with LoRaWAN are received by all base stations in the range, which increases the ratio of successfully received messages. However, that requires multiple base stations in range, as well as the need to filter duplicated messages, which leads to increased network deployment cost.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Strong industry support and partners such as Cisco, IBM and KPN&lt;/li&gt;
&lt;li&gt;Strong security (128 bit encryption) and authentication (2 layers of security)&lt;/li&gt;
&lt;li&gt;Great for communication with moving devices, since it is resistant to the Doppler effect&lt;/li&gt;
&lt;li&gt;Unlimited uplinks and downlinks&lt;/li&gt;
&lt;li&gt;Multiple classes of end devices for different requirements and situations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Not an open standard&lt;/li&gt;
&lt;li&gt;The price and availability of the modules&lt;/li&gt;
&lt;li&gt;You can only use vendors approved by Semtech&lt;/li&gt;
&lt;li&gt;Expensive device certification required for most device types&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  NB-IoT
&lt;/h1&gt;

&lt;p&gt;NB-IoT , which stands for Narrowband Internet of Things, uses licensed frequency spectrum, unlike SigFox and LoRa. Their communication protocol is based on the LTE protocol and it can coexist with both GSM and LTE protocols. NB-IoT frequency band width is 200 KHz, and because of that there are 3 operation modes possible: stand-alone operation which utilizes GSM frequency bands currently in use, guard-band operation that utilizes unused resource blocks within LTE band and in-band operation which utilizes resource blocks within an LTE carrier.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Big data rate (200 kbps)&lt;/li&gt;
&lt;li&gt;Large maximum payload length (1600) bytes&lt;/li&gt;
&lt;li&gt;LTE encryption&lt;/li&gt;
&lt;li&gt;Scalability&lt;/li&gt;
&lt;li&gt;Latency performance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No private networks&lt;/li&gt;
&lt;li&gt;Low coverage&lt;/li&gt;
&lt;li&gt;Cost efficiency&lt;/li&gt;
&lt;li&gt;Lower range than its competitors&lt;/li&gt;
&lt;li&gt;Low interference immunity&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  LTE-M
&lt;/h1&gt;

&lt;p&gt;CAT-M, officially known as LTE CAT-M1, is the second generation of LTE chips developed by 3GPP. As well as coexisting with 2G, 3G and 4G mobile networks , LTE-M network benefits from their security, privacy and other features. Unlike the rest of the world where GSM spectra are the norm, US service providers have system architecture for LTE-M.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Compatible with existing LTE network.&lt;/li&gt;
&lt;li&gt;High data rate&lt;/li&gt;
&lt;li&gt;Support of voice functionality via VoLTE&lt;/li&gt;
&lt;li&gt;Low power consumption&lt;/li&gt;
&lt;li&gt;Use of TCP / IP protocols&lt;/li&gt;
&lt;li&gt;Easy to deploy&lt;/li&gt;
&lt;li&gt;Supports mobility, no disconnections while moving between stations&lt;/li&gt;
&lt;li&gt;Low latency&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Firmware upgrades consume power&lt;/li&gt;
&lt;li&gt;High costs&lt;/li&gt;
&lt;li&gt;Bandwidth consumption&lt;/li&gt;
&lt;li&gt;Low support outside USA&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Best VS Code extensions to increase your productivity</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Tue, 14 Sep 2021 06:48:20 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/best-vs-code-extensions-to-increase-your-productivity-3562</link>
      <guid>https://dev.to/thedailytechtalk/best-vs-code-extensions-to-increase-your-productivity-3562</guid>
      <description>&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bracket Pair Colorizer
&lt;/h2&gt;

&lt;p&gt;With over 5.8 million downloads, &lt;a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&amp;amp;ssr=false#overview"&gt;Bracket Pair Colorizer&lt;/a&gt; is definitely one of the most popular VS Code extensions out there.&lt;br&gt;
This extension allows matching brackets to be identified with colours. It is highly customizable and with a lot of configuration options.&lt;br&gt;
Simply mind blowing extension.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7kAbZ--7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7kAbZ--7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png" alt="Bracket Pair Colorizer example" width="625" height="119"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&amp;amp;ssr=false#overview"&gt;Check it out here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Prettier - Code formatter
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"&gt;Prettier - Code formatter&lt;/a&gt; With more then 14.3 million downloads this is definitely one of the best VS Code extensions.&lt;/p&gt;

&lt;p&gt;Prettier is an code formatter which enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary etc. It is highly configurable to better fit your and your teams coding style.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"&gt;Check it out here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Auto Rename Tag
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"&gt;Auto Rename Tag&lt;/a&gt; is a super useful VS Code extension for web developers. As the names suggest, Auto Rename Tag renames the second tag as the first one is updated and vice versa. Really useful for writing HTML, React or Vue. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HeXDlnP0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/399eaa6ba4ad32c7958dfa11d46fd7fc5ffe9f05/images/usage.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HeXDlnP0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/399eaa6ba4ad32c7958dfa11d46fd7fc5ffe9f05/images/usage.gif" alt="Auto Rename Tag usage gif" width="880" height="573"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"&gt;Check it out here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Ponicode
&lt;/h2&gt;

&lt;p&gt;Ponicode is an AI-powered extension pack that generates unit tests. &lt;/p&gt;

&lt;p&gt;AI shows you what functions need to be tested the most and&lt;br&gt;
it handles repetitive part of unit testing, by writing the test file for you.&lt;br&gt;
It also generates and suggests you relevant inputs for your tests scenarios.&lt;/p&gt;

&lt;p&gt;Supports&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Typescript&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=ponicode.ponicode"&gt;Check it out here.&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  ESLint
&lt;/h2&gt;

&lt;p&gt;With this plugin, you can code with ease knowing that you will maintain correct code etiquette make things easier to read, both for yourself and others.It is really easy to customise, simply modify Json settings file according to your needs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint&amp;amp;ssr=false#overview"&gt;Check it out here.&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Part 1:  Short introduction to RabbitMQ</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Sun, 12 Sep 2021 08:05:29 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/part-1-short-introduction-to-rabbitmq-52nl</link>
      <guid>https://dev.to/thedailytechtalk/part-1-short-introduction-to-rabbitmq-52nl</guid>
      <description>&lt;p&gt;If you like what I wrote and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics. Also check out my blog with more details about this topic &lt;a href="//www.thedailytechtalk.com"&gt;here&lt;/a&gt;❤️❤️&lt;/p&gt;

&lt;p&gt;In this blog post, we are going to cover an overview of what RabbitMQ is and give an example of when you would apply this technology.   &lt;/p&gt;

&lt;h2&gt;
  
  
  What is RabbitMQ?
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;RabbitMq is an open source message broker software. sometimes called message-oriented middleware, that originally implemented the Advanced Message Queuing Protocol or &amp;gt;AMQp for short, and has since been extended with a plug-in architecture to support Streaming Text Oriented Messaging Protocol (STOMP), Message Queuing Telemetry &amp;gt;Transport (MQTT), and other protocols.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The simplest way of putting it would be RabbitMQ is used to distribute long-running task that doesn’t require immediate user feedback into a separate process.&lt;/p&gt;

&lt;p&gt;Now since we have a good understanding of the definition let’s dive deep into the components of RabbitMq, it’s topology and how we can use it.&lt;/p&gt;

&lt;p&gt;RabbitMq has 5 different exchanges:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Direct exchange&lt;/li&gt;
&lt;li&gt;Fanout exchange&lt;/li&gt;
&lt;li&gt;Header exchange&lt;/li&gt;
&lt;li&gt;Dead Letter exchange&lt;/li&gt;
&lt;li&gt;Topic exchange&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Basic components of RabbitMq
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Exchanges
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Exchange&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Direct&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Direct exchange&lt;/strong&gt; delivers messages to queues based on a message routing key.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Fanout&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Fanout exchange&lt;/strong&gt; routes messages to all of the queues that are bound to it and the routing key is ignored.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Header&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Headers exchange&lt;/strong&gt; routes messages based on arguments containing headers and optional values. Headers exchanges are very similar to topic exchanges, but route messages based on header values instead of routing keys.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Dead Letter Exchange&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Provides the functionality to capture messages that are not deliverable.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Topic&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Topic exchanges&lt;/strong&gt; route messages to queues based on wildcard matches between the routing key and the routing pattern, which is specified by the queue binding. Messages are routed to one or many queues based on a matching between a message routing key and this pattern.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h3&gt;
  
  
  Components
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Exchange&lt;/th&gt;
&lt;th&gt;Description&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Binding&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Binding&lt;/strong&gt; is a “link” that you set up to bind a queue to an exchange.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Routing key&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Routing key&lt;/strong&gt; The routing key is a message attribute. The exchange might look at this key when deciding how to route the message to queues (depending on exchange type).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Producers&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Job of the &lt;strong&gt;producer&lt;/strong&gt; is to send a new message to the exchange.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Message&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Message&lt;/strong&gt; represents value you want the consumer to recieve and process.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Queue&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Queues&lt;/strong&gt; are ordered collections of messages.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Exchange&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Exchange&lt;/strong&gt; routes the message to the right queue.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Consumers&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;
&lt;strong&gt;Consumers&lt;/strong&gt; is a client that receives messages.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Direct exchange
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZeGMYr_h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh2s0px8uwq6bphimuvc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZeGMYr_h--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh2s0px8uwq6bphimuvc.jpg" alt="Direct exchange topology"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A direct exchange delivers messages to queues based on a message routing key. The routing key is a message attribute added to the message header by the producer. Think of the routing key as an "address" that the exchange is using to decide how to route the message. &lt;strong&gt;A message goes to the queue(s) with the binding key that exactly matches the routing key of the message.&lt;/strong&gt; &lt;/p&gt;

&lt;h2&gt;
  
  
  Fanout exchange
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--85D1QVrh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikr1ku35qsvejf1b0d3f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--85D1QVrh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikr1ku35qsvejf1b0d3f.png" alt="Fanout exchange topology"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A fan-out topology is when the producer sends a message to the exchange and the exchanges ignore the routing key and just sends the task directly to &lt;strong&gt;all&lt;/strong&gt; of the queues that are available. &lt;/p&gt;

&lt;h2&gt;
  
  
  Topic exchange
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KQmYzAca--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsy29vit1gewdry6xcu1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KQmYzAca--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsy29vit1gewdry6xcu1.png" alt="Topic exchange topology"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The logic behind the topic exchange is similar to a direct one - a message sent with a particular routing key will be delivered to all the queues that are bound with a matching binding key. There are two important special cases for binding keys:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;*&lt;/strong&gt;  can substitute for exactly one word.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;#&lt;/strong&gt;  can substitute for zero or more words.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Dead Letter exchange
&lt;/h2&gt;

&lt;p&gt;There are three identified situations where a message becomes undeliverable after reaching RabbitMQ:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A message is negatively acknowledged by the consumer&lt;/li&gt;
&lt;li&gt;The TTL of a message expires&lt;/li&gt;
&lt;li&gt;The queue reaches capacity&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By default, the broker drops these messages. Publishing is successful, however, the RabbitMQ consumer never handles or has a change to handle the message successfully. &lt;/p&gt;

&lt;p&gt;Queues attached to a dead letter exchange collect dropped messages, with the next steps determined by developer. In other words - it's up to you to decide how to handle messages in the dead letter queue. When implemented correctly, information is almost never lost. &lt;/p&gt;

&lt;h2&gt;
  
  
  Header exchange
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KlipTnAO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddpjhah35t7vpxd1b6py.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KlipTnAO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddpjhah35t7vpxd1b6py.png" alt="Header exchange topology"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Headers exchange is an exchange which route messages to queues based on message header values instead of routing key. Producer adds some values in a form of key-value pair in message header and sends it to headers exchange. After receiving a message, exchange try to match all or any (based on the value of “x-match”) header value with the binding value of all the queues bound to it.&lt;/p&gt;

&lt;p&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>python</category>
    </item>
    <item>
      <title>Exploring JavaScript console object and logging! </title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Thu, 19 Aug 2021 12:47:29 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/must-known-javascript-console-log-tips-and-tricks-2cfo</link>
      <guid>https://dev.to/thedailytechtalk/must-known-javascript-console-log-tips-and-tricks-2cfo</guid>
      <description>&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/LFilajdic" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  JavaScript Console
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Most developers usually use &lt;code&gt;console.log()&lt;/code&gt; to debug JavaScript code, but &lt;code&gt;console&lt;/code&gt; provides us with such a powerful set of features it would be shame not to use them, or at least know what they do.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;console.log()&lt;/code&gt; For general output of logging information.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.info()&lt;/code&gt; Informative logging of information.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.warn()&lt;/code&gt; Outputs a warning message.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;console.error()&lt;/code&gt; Outputs an error message to the Web console.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using other logging besides &lt;code&gt;console.log()&lt;/code&gt; will provide you with more informative and clearer logs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rh74jy8pa4thcj7duem.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rh74jy8pa4thcj7duem.png" alt="console logging example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Lets start by exploring console object
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0kwlj6wc7wgj0e8q7gqa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0kwlj6wc7wgj0e8q7gqa.png" alt="console"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As we can see Console object has plenty of methods. Lets explore some of more useful ones.&lt;/p&gt;

&lt;h2&gt;
  
  
  console.clear()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;console.clear()&lt;/code&gt; clear the console.&lt;/p&gt;

&lt;h2&gt;
  
  
  console.dir()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;console.log()&lt;/code&gt; prints the object in its string representation while &lt;code&gt;console.dir()&lt;/code&gt; recognizes the object as an object and prints it’s properties in the form of a clean expandable list.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Rex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;age&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;friends&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;cat&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dog&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;duck&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;]};&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;dir&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;dog&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe0uarwub9qbw15xjf90r.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe0uarwub9qbw15xjf90r.PNG" alt="console.dir()"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  console.table()
&lt;/h2&gt;

&lt;p&gt;With &lt;code&gt;console.table()&lt;/code&gt; we can create beautiful tables. This is probably my favourite &lt;code&gt;console&lt;/code&gt; method.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1eka7eaofk3p3twymy0g.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1eka7eaofk3p3twymy0g.PNG" alt="console.table"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  console.time(), console.timeLog() and console.timeEnd()
&lt;/h2&gt;

&lt;p&gt;Use &lt;code&gt;console.time()&lt;/code&gt; to start a timer.&lt;br&gt;
Use &lt;code&gt;console.timeLog()&lt;/code&gt; to print time elapsed since the timer started.&lt;br&gt;
Use &lt;code&gt;console.timeEnd()&lt;/code&gt; to print the total amount of time since &lt;code&gt;console.time()&lt;/code&gt; started.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01eoysbgw6q8uw7r7025.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F01eoysbgw6q8uw7r7025.PNG" alt="console.table()"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  console.group() and console.groupEnd()
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;The console.group() method creates a new inline group in the Web console log. This indents following console messages by an additional level, until console.groupEnd() is called.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzvyy14yey3zykvxy37rm.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzvyy14yey3zykvxy37rm.PNG" alt="group"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  console logging with CSS
&lt;/h2&gt;

&lt;p&gt;This works with most console method such as &lt;code&gt;.log()&lt;/code&gt;, &lt;code&gt;.warn()&lt;/code&gt;, &lt;code&gt;.error()&lt;/code&gt; etc.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;Please note that we have to use '%c' for css to work!&lt;/strong&gt;&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;%cTheDailyTechTalk!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
      &lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxl8cpeg8znxtypzpubb.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzxl8cpeg8znxtypzpubb.PNG" alt="group"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com" rel="noopener noreferrer"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Top 10 Must Know JavaScript Functions!</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Sat, 14 Aug 2021 19:33:42 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/top-10-must-know-javascript-functions-1ipm</link>
      <guid>https://dev.to/thedailytechtalk/top-10-must-know-javascript-functions-1ipm</guid>
      <description>&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  Top 10 Must-Know JavaScript Functions
&lt;/h1&gt;

&lt;p&gt;Please check out full &lt;a href="https://www.thedailytechtalk.com/top-10-must-know-javascript-functions"&gt;article here&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  1 filter()
&lt;/h2&gt;

&lt;p&gt;This function filters an array based on the condition you provide and it returns a new array which contains items which satisfy those conditions.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;filter()&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const temperatures = [10, 2, 30.5, 23, 41, 11.5, 3];

const coldDays = temperatures.filter(dayTemperature =&amp;gt; {
    return dayTemperature &amp;lt; 20;
});

console.log("Total cold days in week were: " + coldDays.length); // 4
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  2 map()
&lt;/h2&gt;

&lt;p&gt;Function &lt;code&gt;map()&lt;/code&gt; is a very simple, it loops over an array and convert each item into something else.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const readings = [10, 15, 22.5, 11, 21, 6.5, 93];
const correctedReadings = readings.map(reading =&amp;gt; reading + 1.5);
console.log(correctedReadings); // gives [11.5, 16.5, 24, 12.5, 22.5, 8, 94.5]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  3 some()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;some()&lt;/code&gt; is very similar to &lt;code&gt;filter()&lt;/code&gt; , but &lt;code&gt;some()&lt;/code&gt; returns boolean instead.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const animals = [
    {
        name: 'Dog',
        age: 2
    },

    {
        name: 'Cat',
        age: 8
    },

     {
        name: 'Sloth',
        age: 6
    },
];

if(animals.some(animal =&amp;gt; {
    return animal.age &amp;gt; 4
})) {
    console.log("Found some animals!")
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  4 every()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;every()&lt;/code&gt;  is also very similar to &lt;code&gt;some()&lt;/code&gt; , but &lt;code&gt;every()&lt;/code&gt; true only if every single element in array satisfy our condition.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const isBelowThreshold = (currentValue) =&amp;gt; currentValue &amp;lt; 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));   // true
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  5 shift()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;shift()&lt;/code&gt; method removes the first element from an array and returns removed element. This method changes the length of the array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const items = ['meat', 'carrot', 'ham', 'bread', 'fish'];
items.shift()
console.log(items); // ['carrot', 'ham', 'bread', 'fish']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  6 unshift()
&lt;/h2&gt;

&lt;p&gt;Just like  &lt;code&gt;shift()&lt;/code&gt; method removes the first element from an array &lt;code&gt;unshift()&lt;/code&gt; adds it. This method changes the length of the array and returns the new length of the array as result.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const items = ['milk', 'fish'];
items.unshift('cookie')
console.log(items); // ['cookie', 'milk', 'fish']
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  7 slice()
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;slice()&lt;/code&gt; method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. The original array will not be modified.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let message = "The quick brown fox jumps over the lazy dog";
let startIndex = message.indexOf('brown');
let endIndex = message.indexOf('jumps');
let newMessage = message.slice(startIndex, endIndex);
console.log(newMessage); // "brown fox "
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  8 splice()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;splice()&lt;/code&gt; below start at index 2 (the third place, count starts from 0!! ) of the array, and remove one item.&lt;br&gt;
In our array that would mean that "rabbit" got removed. &lt;code&gt;splice()&lt;/code&gt; will return new array as result.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const animals = ['dog', 'cat', 'rabbit', 'shark', 'sloth'];
animals.splice(2, 1);
console.log(animals); // ["dog", "cat", "shark", "sloth"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  9 includes()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;includes()&lt;/code&gt; will check every item in the array, and check if any of them includes our condition. It will return boolean.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));  //  true

console.log(pets.includes('at'));  //  false
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  10 reverse()
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;reverse()&lt;/code&gt; method reverses an array. Be careful since &lt;code&gt;reverse()&lt;/code&gt; is destructive which means it changes the original array.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const array1 = ['one', 'two', 'three', 'four'];
console.log(array1);  //  ["one", "two", "three", "four"]

const reversed = array1.reverse();
console.log(reversed);  //  ["four", "three", "two", "one"]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>react</category>
      <category>programming</category>
    </item>
    <item>
      <title>5 Best VS Code extensions to increase your productivity</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Sat, 14 Aug 2021 14:44:59 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/5-best-vs-code-extensions-to-increase-your-productivity-2pp4</link>
      <guid>https://dev.to/thedailytechtalk/5-best-vs-code-extensions-to-increase-your-productivity-2pp4</guid>
      <description>&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Bracket Pair Colorizer
&lt;/h2&gt;

&lt;p&gt;With over 5.8 million downloads, &lt;a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&amp;amp;ssr=false#overview"&gt;Bracket Pair Colorizer&lt;/a&gt; is definitely one of the most popular VS Code extensions out there.&lt;br&gt;
This extension allows matching brackets to be identified with colours. It is highly customizable and with a lot of configuration options.&lt;br&gt;
Simply mind blowing extension.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--7kAbZ--7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--7kAbZ--7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png" alt="Bracket Pair Colorizer example" width="625" height="119"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&amp;amp;ssr=false#overview"&gt;Check it out here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Prettier - Code formatter
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"&gt;Prettier - Code formatter&lt;/a&gt; With more then 14.3 million downloads this is definitely one of the best VS Code extensions.&lt;/p&gt;

&lt;p&gt;Prettier is an code formatter which enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary etc. It is highly configurable to better fit your and your teams coding style.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode"&gt;Check it out here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Auto Rename Tag
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"&gt;Auto Rename Tag&lt;/a&gt; is a super useful VS Code extension for web developers. As the names suggest, Auto Rename Tag renames the second tag as the first one is updated and vice versa. Really useful for writing HTML, React or Vue. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HeXDlnP0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/399eaa6ba4ad32c7958dfa11d46fd7fc5ffe9f05/images/usage.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HeXDlnP0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/399eaa6ba4ad32c7958dfa11d46fd7fc5ffe9f05/images/usage.gif" alt="Auto Rename Tag usage gif" width="880" height="573"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"&gt;Check it out here.&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Ponicode
&lt;/h2&gt;

&lt;p&gt;Ponicode is an AI-powered extension pack that generates unit tests. &lt;/p&gt;

&lt;p&gt;AI shows you what functions need to be tested the most and&lt;br&gt;
it handles repetitive part of unit testing, by writing the test file for you.&lt;br&gt;
It also generates and suggests you relevant inputs for your tests scenarios.&lt;/p&gt;

&lt;p&gt;Supports&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Typescript&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;Python&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=ponicode.ponicode"&gt;Check it out here.&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  ESLint
&lt;/h2&gt;

&lt;p&gt;With this plugin, you can code with ease knowing that you will maintain correct code etiquette make things easier to read, both for yourself and others.It is really easy to customise, simply modify Json settings file according to your needs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint&amp;amp;ssr=false#overview"&gt;Check it out here.&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;I recently started a new blog &lt;a href="https://thedailytechtalk.com"&gt;TheDailyTechTalk&lt;/a&gt; where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉&lt;br&gt;
🥰&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;If you like what I write and want to support me, please follow me on &lt;a href="https://twitter.com/TheDailyTechTa1"&gt;Twitter&lt;/a&gt; to learn more about programming and similar topics ❤️❤️&lt;/strong&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Selecting low power networking — LoraWan,SigFox, Nb-IoT and LTE-M</title>
      <dc:creator>TheDailyTechTalk</dc:creator>
      <pubDate>Mon, 09 Aug 2021 18:54:43 +0000</pubDate>
      <link>https://dev.to/thedailytechtalk/selecting-low-power-networking-lorawan-sigfox-nb-iot-and-lte-m-1gp5</link>
      <guid>https://dev.to/thedailytechtalk/selecting-low-power-networking-lorawan-sigfox-nb-iot-and-lte-m-1gp5</guid>
      <description>&lt;h1&gt;
  
  
  Selecting low power networking contrasting pros and cons of LoraWan,SigFox, Nb-IoT and LTE-M
&lt;/h1&gt;

&lt;h2&gt;
  
  
  What is "Low power wide area network"?
&lt;/h2&gt;

&lt;p&gt;LPWAN is a type of wireless telecommunication designed for long-range communications between IoT devices, sensors etc. Its main purpose is to send small amounts of data over a great distance for a long period of time, even years on a single battery*.* Coverage can range from 1 km up to over 40 km.&lt;/p&gt;

&lt;p&gt;Frequency which LPWAN providers like SigFox or LoraWaN use depends on location (and sometimes even the country). Providers use either unlicensed ISM bands , 868 MHz in Europe, 915 Mhz in North America and 433 MHz in Asia, or licensed LTE frequency bands.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kt_J_-9t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.thedailytechtalk.com/_nuxt/uploads/63ed0e7-592.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kt_J_-9t--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://www.thedailytechtalk.com/_nuxt/uploads/63ed0e7-592.jpg" alt="The advantages of Sigfox, LoRaWAN, and NB-IoT."&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The respective advantages of Sigfox, LoRaWAN, and NB-IoT. Source: The Korean Institute of Communications and Information Sciences (KICS) as published in ICT Express, March 2019.&lt;/em&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  SigFox
&lt;/h1&gt;

&lt;p&gt;Sigfox was founded in 2009 in France.Today they are available in over 60 countries and their numbers are constantly growing. They offer end-to-end LPWAN solutions. Sigfox network architecture is built using base stations in a star topology, but with their own cloud service acting as a middle man. That kind of architecture offers some great benefits such as data security and data flow via API.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Strong industry support and partners like Texas Instruments, Silicon Labs and Arduino&lt;/li&gt;
&lt;li&gt;Very long range&lt;/li&gt;
&lt;li&gt;Large coverage&lt;/li&gt;
&lt;li&gt;Cost effective&lt;/li&gt;
&lt;li&gt;Cloud service &amp;amp; API&lt;/li&gt;
&lt;li&gt;Easy to integrate with services like AWS, Azure and others&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Not an open standard&lt;/li&gt;
&lt;li&gt;Low security (16 bit encryption)&lt;/li&gt;
&lt;li&gt;US design architecture is different from European architecture&lt;/li&gt;
&lt;li&gt;Bad UI/UX in administration interface&lt;/li&gt;
&lt;li&gt;Bad latency performance&lt;/li&gt;
&lt;li&gt;Low maximum payload length&lt;/li&gt;
&lt;li&gt;Limited amount of UL / DL&lt;/li&gt;
&lt;li&gt;No private networks&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  LoRaWaN
&lt;/h1&gt;

&lt;p&gt;LoRaWaN network architecture is deployed as a typical star topology, with a gateway in the middle that converts radio signal to IP and vice versa. They are mainly used for telemetric data transfers and object tracking. Messages transmitted by an end device with LoRaWAN are received by all base stations in the range, which increases the ratio of successfully received messages. However, that requires multiple base stations in range, as well as the need to filter duplicated messages, which leads to increased network deployment cost.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Strong industry support and partners such as Cisco, IBM and KPN&lt;/li&gt;
&lt;li&gt;Strong security (128 bit encryption) and authentication (2 layers of security)&lt;/li&gt;
&lt;li&gt;Great for communication with moving devices, since it is resistant to the Doppler effect&lt;/li&gt;
&lt;li&gt;Unlimited uplinks and downlinks&lt;/li&gt;
&lt;li&gt;Multiple classes of end devices for different requirements and situations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Not an open standard&lt;/li&gt;
&lt;li&gt;The price and availability of the modules&lt;/li&gt;
&lt;li&gt;You can only use vendors approved by Semtech&lt;/li&gt;
&lt;li&gt;Expensive device certification required for most device types&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  NB-IoT
&lt;/h1&gt;

&lt;p&gt;NB-IoT , which stands for Narrowband Internet of Things, uses licensed frequency spectrum, unlike SigFox and LoRa. Their communication protocol is based on the LTE protocol and it can coexist with both GSM and LTE protocols. NB-IoT frequency band width is 200 KHz, and because of that there are 3 operation modes possible: stand-alone operation which utilizes GSM frequency bands currently in use, guard-band operation that utilizes unused resource blocks within LTE band and in-band operation which utilizes resource blocks within an LTE carrier.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Big data rate (200 kbps)&lt;/li&gt;
&lt;li&gt;Large maximum payload length (1600) bytes&lt;/li&gt;
&lt;li&gt;LTE encryption&lt;/li&gt;
&lt;li&gt;Scalability&lt;/li&gt;
&lt;li&gt;Latency performance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No private networks&lt;/li&gt;
&lt;li&gt;Low coverage&lt;/li&gt;
&lt;li&gt;Cost efficiency&lt;/li&gt;
&lt;li&gt;Lower range than its competitors&lt;/li&gt;
&lt;li&gt;Low interference immunity&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  LTE-M
&lt;/h1&gt;

&lt;p&gt;CAT-M, officially known as LTE CAT-M1, is the second generation of LTE chips developed by 3GPP. As well as coexisting with 2G, 3G and 4G mobile networks , LTE-M network benefits from their security, privacy and other features. Unlike the rest of the world where GSM spectra are the norm, US service providers have system architecture for LTE-M.&lt;/p&gt;

&lt;p&gt;Pros:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Compatible with existing LTE network.&lt;/li&gt;
&lt;li&gt;High data rate&lt;/li&gt;
&lt;li&gt;Support of voice functionality via VoLTE&lt;/li&gt;
&lt;li&gt;Low power consumption&lt;/li&gt;
&lt;li&gt;Use of TCP / IP protocols&lt;/li&gt;
&lt;li&gt;Easy to deploy&lt;/li&gt;
&lt;li&gt;Supports mobility, no disconnections while moving between stations&lt;/li&gt;
&lt;li&gt;Low latency&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Firmware upgrades consume power&lt;/li&gt;
&lt;li&gt;High costs&lt;/li&gt;
&lt;li&gt;Bandwidth consumption&lt;/li&gt;
&lt;li&gt;Low support outside USA&lt;/li&gt;
&lt;/ul&gt;

</description>
    </item>
  </channel>
</rss>
