<?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>Forem: Madhav Gupta</title>
    <description>The latest articles on Forem by Madhav Gupta (@madhavgupta).</description>
    <link>https://forem.com/madhavgupta</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%2F134967%2Fc688a56c-48b1-40ad-a89e-b33d6637ee31.jpg</url>
      <title>Forem: Madhav Gupta</title>
      <link>https://forem.com/madhavgupta</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/madhavgupta"/>
    <language>en</language>
    <item>
      <title>Understanding the time complexity in a simple manner(Part 1) || DSA || prerequisite</title>
      <dc:creator>Madhav Gupta</dc:creator>
      <pubDate>Thu, 04 Feb 2021 04:35:15 +0000</pubDate>
      <link>https://forem.com/madhavgupta/understanding-the-time-complexity-in-a-simple-manner-part-1-dsa-prerequisite-1opc</link>
      <guid>https://forem.com/madhavgupta/understanding-the-time-complexity-in-a-simple-manner-part-1-dsa-prerequisite-1opc</guid>
      <description>&lt;p&gt;Hello Everyone, I hope you are all safe and in good health. &lt;/p&gt;

&lt;p&gt;This is Madhav Gupta and today I'm here to throw some light over finding time complexities of algorithms. This can also be taken as a prerequisite for my upcoming DSA(data structures and algorithms) articles which I'll be writing in the coming future.&lt;/p&gt;

&lt;p&gt;All of us face the questions of complexity in our interviews and we should know in general how to find complexities because it makes us a better engineer. &lt;/p&gt;

&lt;p&gt;Now let's focus because &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%2Fi%2F93asts7ov0n1k3yf2rmn.gif" 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%2Fi%2F93asts7ov0n1k3yf2rmn.gif" alt="Focus"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So coming on to the point, there are some rules which you should keep in mind while finding complexity of the given algorithms and these are -&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ignore constants.&lt;/li&gt;
&lt;li&gt;Take the biggest degree in the expression formed.&lt;/li&gt;
&lt;li&gt;Break your code into segments and analyse them one by one.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also, there's one thing which we need to keep in mind, n is significantly large in our case for which we find time complexity.&lt;/p&gt;




&lt;p&gt;Let's talk about statements which take &lt;em&gt;linear time&lt;/em&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Declarations and operations - These are the statements which always take linear time and examples of some of them are&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

int x=0
x=x+1
x=x-1
x=x*4


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;All of the above statements if executed independently would run in &lt;strong&gt;O(1)&lt;/strong&gt; time.&lt;/p&gt;

&lt;p&gt;After talking about the statements that execute in linear time, let's talk about loops. I can already find it getting exciting and more challenging as we progress through the article.&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%2Fi%2Fjs9mbt3iymk97nevtqt8.gif" 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%2Fi%2Fjs9mbt3iymk97nevtqt8.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Loops -  Now things start changing from here, because iterations gets repeated and time complexity here is equal to number of times the loop ran. 
Let's look at the following code -
```
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;for(int i=0;i&amp;lt;n;i++){&lt;br&gt;
    a=a+2;&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;So, if we try to find how many times the statement *a=a+2* executed, we would get that *a=a+2* executed n number of times.
Suppose if statement *a=a+2* is taking k seconds to execute(k is constant), then our time function here would be 
T(n) = kn.
That would give us time complexity as **O(n)**.

Let's take various instances in loops and let's analyse them one by one.

---

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for(int i=n;i&amp;gt;0;i--){&lt;br&gt;
    print("*");&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;In the above case, now i is n in the starting and it is decreasing by one. The loop stops but when i becomes 0.

The main thing to analyse here is that even if our i is decreasing, the number of iterations remain the same. Hence this loop is also having the time complexity of **O(n)**.

---

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for(int i=1;i&amp;lt;=n;i=i+2){&lt;br&gt;
    print("*");&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;In the above case,i is increasing at the rate of 2. That means the time function here would look something like this

T(n)=n/2 
As we know we have to take only the biggest degree in our expression. Hence the above for loop would take time complexity as **O(n)**.
Even if i is increasing at a rate of 20, the time complexity of would remain the same.

___

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for(int i=1;i&amp;lt;n;i=i*2){&lt;br&gt;
    print("*");&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Now here the case is different. Here i is multiplying itself with 2. Let's look at the value of i with every iteration.

|Iteration|i|
|:----|:----|
|1|1|
|2|2|
|3|4|
|.|.|

Let's suppose the loop ends at the k-ith iteration, so the value of i at k-ith iteration would be 2&amp;lt;sup&amp;gt;k&amp;lt;/sup&amp;gt;.

2&amp;lt;sup&amp;gt;k&amp;lt;/sup&amp;gt;=n
Taking log both sides,
k=log&amp;lt;sub&amp;gt;2&amp;lt;/sub&amp;gt;n

Hence the time complexity in this case would be **O(log&amp;lt;sub&amp;gt;2&amp;lt;/sub&amp;gt;n)**. The same would be the case when i starts with n(loop ends at 1) and it keeps itself dividing by 2.

___

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for(int i=0;i*i&amp;lt;n;i++){&lt;br&gt;
    print("*");&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Here the case is that when i*i i.e. i&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt; would become equal to n, then the loop would stop.
So let's assume the loop stops at i=k.
So, k*k = n
k&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt; = n
k = &amp;lt;span&amp;gt;&amp;amp;#8730;n&amp;lt;/span&amp;gt;

Hence the time complexity in this case would be &amp;lt;b&amp;gt;O(&amp;lt;span&amp;gt;&amp;amp;#8730;n&amp;lt;/span&amp;gt;)&amp;lt;/b&amp;gt;

I know it might feel boring at first but it's really necessary to understand how it all works under the hood. Otherwise, all of us can memorise that the time complexity of selection sort is O(n&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt;). But we should also understand how it came there in the first place.

Now comes the most important instance in for loops.

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;for(int i=1;i&amp;lt;=n;i++){&lt;br&gt;
    for(int j=1;j&amp;lt;=n;j++){&lt;br&gt;
        print("*");&lt;br&gt;
    }&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Let's analyse the above loop first, how many times the statement `print("*")` would execute. For i=1 the inner loop would execute n times, for i = 2 the inner loop would execute n times again and for i = n, the inner loop would execute n times.
Hence the total number of times the statement `print("*")` got executed = n+n+n+..n times
T(n) = n(1+1+1+..n times)
T(n) = n * n
T(n) = n&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt;
Hence the time complexity for nested for loops is **O(n&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt;)**
___

While we were at it, we have completed our loops part already. I congratulate you for making it this far. Give yourselves a pat on your back and let's talk about if-else block.

___

* If-else statement - We take the time complexity of the block for whichever it is larger. The following example would clear it out. 

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// Time complexity = O(1)&lt;br&gt;
if(i==0){&lt;br&gt;
    print("&lt;em&gt;");&lt;br&gt;
}&lt;br&gt;
// Time complexity = O(n) &lt;br&gt;
else{&lt;br&gt;
    for(int i=0;i&amp;lt;n;i++){&lt;br&gt;
        print("&lt;/em&gt;");&lt;br&gt;
    }&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;As we can see in the above code that if block is having O(1) and else block is having O(n). Hence the time complexity of the whole if-else block would be **O(n)**(since O(n)&amp;gt;O(1)).

___

* Consecutive Statements - We add the time complexities of each statement. Here's is an example
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;// takes O(1) time&lt;br&gt;
int m=0;&lt;/p&gt;

&lt;p&gt;// takes O(n) time&lt;br&gt;
for(int j=1;j&amp;lt;=n;j++){&lt;br&gt;
    print("*");&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;// takes O(n^2) time&lt;br&gt;
for(int i=1;i&amp;lt;=n;i++){&lt;br&gt;
    for(int j=1;j&amp;lt;=n;j++){&lt;br&gt;
        print("*");&lt;br&gt;
    }&lt;br&gt;
}&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Taking into consideration the constant time of each print statement too.
Total cost = c&amp;lt;sub&amp;gt;0&amp;lt;/sub&amp;gt;+c&amp;lt;sub&amp;gt;1&amp;lt;/sub&amp;gt;n+c&amp;lt;sub&amp;gt;2&amp;lt;/sub&amp;gt;n&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt;
Taking the biggest degree, 
Hence time complexity = **O(n&amp;lt;sup&amp;gt;2&amp;lt;/sup&amp;gt;)**

___

Phewww, That was really a long article, wasn't it? 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4pfgsculv9wg2uflqzxe.gif)

With that being said, it really feels good to be writing again. In this article i explained all the basics we need to find time complexities for common algorithms. I'd be bringing part 2 of the same topic with lots of questions which we would practice together and it would further strengthen our understanding.

I would attach the link of part 2 whenever i post the next part so be sure to save this one. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yrt24z34nictggla9fyy.gif)

Please let me know if you liked this one or not, I'd gladly accept any criticism that comes my way and return with better content.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

</description>
      <category>ds</category>
      <category>datastructures</category>
      <category>algorithms</category>
      <category>complexity</category>
    </item>
    <item>
      <title>A comprehensive guide on markdown</title>
      <dc:creator>Madhav Gupta</dc:creator>
      <pubDate>Wed, 06 Mar 2019 22:16:54 +0000</pubDate>
      <link>https://forem.com/madhavgupta/a-comprehensive-guide-on-markdown-3o2n</link>
      <guid>https://forem.com/madhavgupta/a-comprehensive-guide-on-markdown-3o2n</guid>
      <description>&lt;p&gt;Hello everyone. Hope you are doing great. &lt;br&gt;
I am Madhav Gupta and this post will be dedicated to markdown.&lt;br&gt;
By the end of this post, I really hope that you'll be having more than enough knowledge of markdown to use it in your daily life.&lt;/p&gt;

&lt;p&gt;Let's start with a bunch of questions,&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Q- What is Markdown?&lt;/strong&gt;&lt;br&gt;
A- Markdown is a lightweight markup language with plain text formatting syntax. In simple terms, markdown is a way to style text on the web having simple syntax than HTML.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Q- Why bother learning it?&lt;/strong&gt;&lt;br&gt;
A- There can be a lot of reasons to learn Markdown, I will be listing some of them&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Easy to learn and easy to read&lt;/li&gt;
&lt;li&gt;Used in Github documentation &lt;/li&gt;
&lt;li&gt;can be easily converted into other formats&lt;/li&gt;
&lt;li&gt;&lt;em&gt;you might start writing posts on dev.to after learning it&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Enough with the questions, let's get on board.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Headers&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There are six types of headings ranging from H1 to H6. You can use headers in two ways.&lt;br&gt;
First - Using a # followed by the text&lt;br&gt;
Second - Inserting 3 ===(for H1) or ---(for H2) below the text. The downside of going through this path is that you can only use H1 and H2. Hence I'll recommend sticking to the former way.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Examples&lt;/strong&gt; -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# H1
## H2
### H3
#### H4
##### H5
###### H6
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;(spaces given for readability)&lt;/p&gt;

&lt;h1&gt;
  
  
  H1
&lt;/h1&gt;

&lt;h2&gt;
  
  
  H2
&lt;/h2&gt;

&lt;h3&gt;
  
  
  H3
&lt;/h3&gt;

&lt;h4&gt;
  
  
  H4
&lt;/h4&gt;

&lt;h5&gt;
  
  
  H5
&lt;/h5&gt;

&lt;h6&gt;
  
  
  H6
&lt;/h6&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;H1
===
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  H1
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;H2
---
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  H2
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Text Formatting&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Formatting text in markdown is very easy. You can change the feel and look of your text by making it &lt;em&gt;italic&lt;/em&gt;, &lt;strong&gt;bold&lt;/strong&gt; or &lt;del&gt;striking it&lt;/del&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Examples&lt;/strong&gt; -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;_italic_ or *italic*
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;em&gt;italic&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;__bold__ or **bold**
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;bold&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;~~strikethrough~~
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;del&gt;strikethrough&lt;/del&gt;&lt;/p&gt;

&lt;p&gt;Since there are two ways for text to be italic and bold. So in order to avoid the confusion, I will recommend using &lt;code&gt;&lt;em&gt;italic&lt;/em&gt;&lt;/code&gt; and &lt;code&gt;&lt;strong&gt;Bold&lt;/strong&gt;&lt;/code&gt;. This will help you in reducing the ambiguity and confusion you might face while styling your text.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Lists&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You always make lists for one purpose or another. You can use both unordered and ordered lists in markdown according to your needs&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unordered Lists&lt;/strong&gt;&lt;br&gt;
Here is the syntax for an unordered list in markdown. You can replace + with * or -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;+ First item in the unordered list
+ Another item in the unordered list
+ one more item 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Above code gets converted into this.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First item in the unordered list&lt;/li&gt;
&lt;li&gt;Another item in the unordered list&lt;/li&gt;
&lt;li&gt;one more item &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Ordered Lists&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. The first item in the ordered list
2. The second item in the ordered list
3. The third item in the ordered list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Instead of going with the above syntax, you can also go with&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. The first item in the ordered list
1. The second item in the ordered list
1. The third item in the ordered list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and both the examples will result in the following list&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The first item in the ordered list&lt;/li&gt;
&lt;li&gt;The second item in the ordered list&lt;/li&gt;
&lt;li&gt;The third item in the ordered list&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Links&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can use links in markdown by using the following syntax.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Text](the link you want to relate with text)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt; -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Link to my first article](https://dev.to/madhavgupta/visual-studio-code-and-its-magic-1a2m)
&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%2Fva057w705o5xoomoatfp.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%2Fva057w705o5xoomoatfp.PNG"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/madhavgupta/visual-studio-code-and-its-magic-1a2m"&gt;Link to my first article&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Both ways can be used to reference external links but I will recommend the latter one for enhanced readability. Instead of using &lt;code&gt;[1]&lt;/code&gt;, you can use anything such as [meow] or [blah] and it will work fine. &lt;br&gt;
If there is no text, then you can highlight the link be using &lt;code&gt;&amp;lt;link&amp;gt;&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Images&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Images can be embedded in a markdown document by using the following syntax. Not only images, but you can also use gifs too by using the same syntax.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;![Alt text for your image](Link of the image)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt; -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;![](https://images.unsplash.com/photo-1515524738708-327f6b0037a7?ixlib=rb-1.2.1&amp;amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;amp;auto=format&amp;amp;fit=crop&amp;amp;w=1050&amp;amp;q=80)
&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%2Fimages.unsplash.com%2Fphoto-1515524738708-327f6b0037a7%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D1050%26q%3D80" 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%2Fimages.unsplash.com%2Fphoto-1515524738708-327f6b0037a7%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D1050%26q%3D80"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Horizontal Rule&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Depending on how your parser makes the horizontal rule, it is always great to have some of them in your article/documentation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;-&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;--- or *** or ___
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Code block&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Add code blocks to your posts/articles by surrounding your code with three&lt;br&gt;
backticks and if you want to highlight syntax, then write the name of language after backticks.&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%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fd1rltcn17x7vfwx03gzu.jpg" 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%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fd1rltcn17x7vfwx03gzu.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Block Quote&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Give special emphasis to the quotes to make them stand out.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;gt; Quote
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt; -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;gt; “Websites promote you 24/7: No employee will do that.” 
― Paul Cookson
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;“Websites promote you 24/7: No employee will do that.” &lt;br&gt;
― Paul Cookson&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Tables&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Showing data in tabular form is very convenient and I must say, making tables in markdown is not so pretty. One more thing, the &lt;strong&gt;:&lt;/strong&gt; is responsible for the alignment of the elements in rows. Examples given below will make this statement more clear.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;|Songs|Creators|
|:-----|:-----|
|Without Me|Helsey, Khalid and Benny Blanco|
|Hope|Chainsmokers|
|Never Gonna give you up|_I'll leave it here_|
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Songs&lt;/th&gt;
&lt;th&gt;Creators&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Without Me&lt;/td&gt;
&lt;td&gt;Helsey, Khalid and Benny Blanco&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hope&lt;/td&gt;
&lt;td&gt;Chainsmokers&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Never Gonna give you up&lt;/td&gt;
&lt;td&gt;&lt;em&gt;I'll leave it here&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;|Songs|Creators|
|-----:|:-----|
|Without Me|Helsey, Khalid and Benny Blanco|
|Hope|Chainsmokers|
|Never Gonna give you up|_I'll leave it here_|
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Songs&lt;/th&gt;
&lt;th&gt;Creators&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Without Me&lt;/td&gt;
&lt;td&gt;Helsey, Khalid and Benny Blanco&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hope&lt;/td&gt;
&lt;td&gt;Chainsmokers&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Never Gonna give you up&lt;/td&gt;
&lt;td&gt;&lt;em&gt;I'll leave it here&lt;/em&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;You can also use the &lt;em&gt;good-old&lt;/em&gt; HTML tags(pre, code, img, table) in markdown if you ever feel the need to. Markdown is great and it makes sure that your entire focus remains on the content.&lt;/p&gt;

&lt;p&gt;If you knew it all, congratulations. This post might act as a refresher for you. If it is the other way around, Hope it helps.&lt;/p&gt;

&lt;p&gt;So, that's it for today. I'll be back soon with another one(open for ideas).&lt;br&gt;
Hope you like it.&lt;br&gt;
 Have a great day. Thanks.&lt;br&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%2Fubfvhvwtm0byeit4ay4j.gif" 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%2Fubfvhvwtm0byeit4ay4j.gif"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>markdown</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Visual Studio Code and its magic</title>
      <dc:creator>Madhav Gupta</dc:creator>
      <pubDate>Sun, 03 Mar 2019 21:52:18 +0000</pubDate>
      <link>https://forem.com/madhavgupta/visual-studio-code-and-its-magic-1a2m</link>
      <guid>https://forem.com/madhavgupta/visual-studio-code-and-its-magic-1a2m</guid>
      <description>

&lt;p&gt;Hello, I am Madhav Gupta(someone who's been using VS Code for a long time sufficient to fall in love with it) and I'd like to walk you through the amazing world of shortcuts in VS Code and a wonderful extension.&lt;/p&gt;

&lt;p&gt;We all love studio code, don't we? (&lt;em&gt;talking about those who use it&lt;/em&gt;)&lt;/p&gt;

&lt;p&gt;At my starting point, I always wondered how the tutor was able to move a selection up without moving the mouse, copy a whole selection and move it down simultaneously. Turns out these were the key shortcuts who were the &lt;em&gt;culprits&lt;/em&gt; all along.&lt;/p&gt;

&lt;p&gt;So coming on to the point,&lt;br&gt;
Being a developer, you sure know one thing that mouse is &lt;strong&gt;wicked&lt;/strong&gt; for you. You should be familiar with most of the key shortcuts available in your editor. &lt;/p&gt;

&lt;p&gt;While there are so many shortcuts available in the editor, I will be listing some of the shortcuts I use the most. As a side note, you can find the full list of keyboard shortcuts &lt;a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf"&gt;here&lt;/a&gt;.&lt;br&gt;
These are for &lt;strong&gt;windows users&lt;/strong&gt;, so please excuse me if you use any other OS.&lt;/p&gt;

&lt;p&gt;Here's a table for the shortcuts and what they do.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Keyboard Shortcut&lt;/th&gt;
&lt;th&gt;Their effects&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Alt+ ↑ / ↓&lt;/td&gt;
&lt;td&gt;Move your selection up or down&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Shift+Alt + ↓ / ↑&lt;/td&gt;
&lt;td&gt;Copy your selection and move it up or down&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+ ] / [&lt;/td&gt;
&lt;td&gt;Indent/Outdent Line(move your selection left or right,in simple words)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+Shift+\&lt;/td&gt;
&lt;td&gt;Jump to matching bracket&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+↑ / ↓&lt;/td&gt;
&lt;td&gt;Scroll your selection UP or Down&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+/&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Toggle comment (uncomment a selection if commented &amp;amp; vice versa)&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;While these are shortcuts which I tend to use most of the times, Some of the honorable mentions are,&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Keyboard Shortcut&lt;/th&gt;
&lt;th&gt;Their effects&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+Space&lt;/td&gt;
&lt;td&gt;Shows you all the recommendations when coding/Trigger suggestion&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+. (Credits- Michael De Abreu)&lt;/td&gt;
&lt;td&gt;Quick fix&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+P(Credits- Đào Tuấn)&lt;/td&gt;
&lt;td&gt;Open any file in your root folder&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+F&lt;/td&gt;
&lt;td&gt;Find&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl + H&lt;/td&gt;
&lt;td&gt;Replace&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;F11&lt;/td&gt;
&lt;td&gt;Toggle Full Screen&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;F5&lt;/td&gt;
&lt;td&gt;Start debugging&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;F9&lt;/td&gt;
&lt;td&gt;Toggle Breakpoint&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ctrl+Shift+T&lt;/td&gt;
&lt;td&gt;Reopen closed editor&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;ul&gt;
&lt;li&gt;So these were some of the most used keyboard shortcuts, besides Ctrl+C &amp;amp; Ctrl+V of course 😀😀&lt;/li&gt;
&lt;li&gt;If you knew them all and use them, Congratulations. Be sure to share some of the shortcuts which you use all the time in comments.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now, let's talk about the extension.&lt;/p&gt;

&lt;p&gt;The name of the extension is &lt;a href="https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets"&gt;JavaScript (ES6) code snippets&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;People who use it know the power of this extension. As the name depicts, this extension provides you code snippets with some shortcuts and you can use them by hitting TAB or ENTER.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Shortcut&lt;/th&gt;
&lt;th&gt;What it becomes into&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;clg&lt;/td&gt;
&lt;td&gt;console.log()&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;thenc&lt;/td&gt;
&lt;td&gt;Then and catch chained &lt;code&gt;.then((res) =&amp;gt; {}).catch((err) =&amp;gt; {});&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;imp&lt;/td&gt;
&lt;td&gt;imports entire module&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;rqr&lt;/td&gt;
&lt;td&gt;Require&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;mde&lt;/td&gt;
&lt;td&gt;module.exports()&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;con&lt;/td&gt;
&lt;td&gt;adds default constructor in the class &lt;code&gt;constructor() {}&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;fre&lt;/td&gt;
&lt;td&gt;forEach loop in ES6 syntax &lt;code&gt;array.forEach(currentItem =&amp;gt; {})&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;So, that's it for today. &lt;em&gt;Pheww&lt;/em&gt;, writing my first post was not that tough.&lt;br&gt;
I'll be back with more posts( Thinking to write a guide on markdown) and one more thing, No hate on other editors, Just use what fits you.&lt;br&gt;
Hope you like it. Have a great day. Thanks.&lt;br&gt;
&lt;strong&gt;Edit&lt;/strong&gt; : grammatical fix&lt;/p&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif" alt=""&gt;&lt;/a&gt;&lt;/p&gt;


</description>
      <category>tips</category>
      <category>vscode</category>
    </item>
  </channel>
</rss>
