<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Code with Sus]]></title><description><![CDATA[Code with Sus]]></description><link>https://satarupa.hashnode.dev</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1630498320277/2ZVrCyCWz.png</url><title>Code with Sus</title><link>https://satarupa.hashnode.dev</link></image><generator>RSS for Node</generator><lastBuildDate>Wed, 16 Sep 2026 07:05:57 GMT</lastBuildDate><atom:link href="https://satarupa.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Markdown]]></title><description><![CDATA[Markdown

Markdown is a lightweight markup language. It allows you to style a digital text document using typical formatting techniques: for example, headings, emphasis, lists, images, and links. Markdown files have extensions .md or .markdown. Also,...]]></description><link>https://satarupa.hashnode.dev/markdown</link><guid isPermaLink="true">https://satarupa.hashnode.dev/markdown</guid><category><![CDATA[markdown]]></category><category><![CDATA[GitHub]]></category><category><![CDATA[documentation]]></category><dc:creator><![CDATA[Sushree Satarupa]]></dc:creator><pubDate>Sat, 11 Sep 2021 13:02:36 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1631440912775/mWdpRNKuZ.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="markdown">Markdown</h2>
<ul>
<li><p>Markdown is a lightweight markup language. It allows you to style a digital text document using typical formatting techniques: for example, headings, emphasis, lists, images, and links. Markdown files have extensions .md or .markdown. Also, Markdown can also be converted into XHTML or HTML to display nicely in a browser.</p>
</li>
<li><p>Some of the many uses of Markdown are readme files, writing messages in online discussion forums, creating rich text using a plain text editor, emails, and technical documentation. Popular sites that use Markdown include GitHub, Trello, Reddit, SourceForge, and StackExchange, among many others.</p>
</li>
<li><p>Writers can have as much control over the presentation of their information without resorting to complete HTML tagging. At the same time, Markdown parsers also support dropping in blocks of HTML code that add to Markdown’s limited syntax if you want to achieve a more complex design. </p>
</li>
</ul>
<h3 id="why-use-markdown">Why use Markdown?</h3>
<ul>
<li><p>It makes it easier for non-tech writers to produce documentation that can be collaborative and flexible at the same time.</p>
</li>
<li><p>You don't even have to be a developer to pick up the basics. The advantage of Markdown is that it's straightforward to write once you know how it works. It's intuitively easy to pick up because it has a base of email formatting conventions that many people are exposed to already.</p>
</li>
<li><p>You can also easily read Markdown in its raw state, unlike, for example, plain HTML, which is full of tags. The Markdown syntax flows perfectly with the rest of your writing, and it's intuitively clear what the syntax means.</p>
</li>
<li><p>Markdown is platform-independent, which means you can create Markdown files in any text editor. It's applicable across many different websites and applications.</p>
</li>
<li><p>It's a reusable skill. Markdown is versatile, so you learn it once, and you can use it for lots of different activities. You can use Markdown to take notes, create content for a website, or produce print-ready documents.</p>
</li>
</ul>
<h1 id="basics-of-markdown">Basics of Markdown</h1>
<pre><code class="lang-markdown">Syntax highlighted code block

<span class="hljs-section"># Header 1</span>
<span class="hljs-section">## Header 2</span>
<span class="hljs-section">### Header 3</span>
<span class="hljs-section">#### Header 4</span>
<span class="hljs-section">##### Header 5</span>
<span class="hljs-section">###### Header 6</span>


<span class="hljs-bullet">-</span> Bulleted
<span class="hljs-bullet">-</span> List

<span class="hljs-bullet">1.</span> Numbered
<span class="hljs-bullet">2.</span> List

<span class="hljs-strong">**Bold**</span> and <span class="hljs-emphasis">_Italic_</span> and <span class="hljs-code">`Code`</span> text

[<span class="hljs-string">Link</span>](<span class="hljs-link">url</span>) and ![<span class="hljs-string">Image</span>](<span class="hljs-link">src</span>)
</code></pre>
<hr />
<h2 id="headings">Headings</h2>
<p>All Markdown files should contain headers. You need a level 1 header for the title of your Markdown file, and at least level 2 headers for the subheadings within the body text. Headings make your text more readable and help to break up the topics.</p>
<p>In Markdown, headings are formatted with hashes (#) in front of the line containing your heading. You can use up to six hashes, with the number of hashes corresponding to a heading level.</p>
<pre><code class="lang-markdown"><span class="hljs-section"># Heading level 1</span>
<span class="hljs-section">## Heading level 2</span>
<span class="hljs-section">### Heading level 3</span>
<span class="hljs-section">#### Heading level 4</span>
<span class="hljs-section">##### Heading level 5</span>
<span class="hljs-section">###### Heading level 6</span>
</code></pre>
<p>Your text will look like this:</p>
<h1 id="heading-level-1">Heading level 1</h1>
<h2 id="heading-level-2">Heading level 2</h2>
<h3 id="heading-level-3">Heading level 3</h3>
<h4 id="heading-level-4">Heading level 4</h4>
<h5 id="heading-level-5">Heading level 5</h5>
<h6 id="heading-level-6">Heading level 6</h6>
<hr />
<h2 id="paragraphs">Paragraphs</h2>
<p>When writing your Markdown body text, you’ll likely want to split your information up into paragraphs (with a noticeable gap between each paragraph). Paragraphs are divided by a blank line (a line containing no characters) between consecutive paragraphs.</p>
<p>Your text will look like this:</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<hr />
<h2 id="line-breaks">Line breaks</h2>
<p>Sometimes, you’ll want to split your information up by inserting a new line, with less space than you’d get from formatting as a paragraph. This is called a line break.</p>
<p>To insert a line break into your Markdown file, finish your line with at least two spaces and press return. This will render a new line for your text.</p>
<p>Your text will look like this:</p>
<p>Line 1<br />Line 2</p>
<hr />
<h2 id="formatting-text-in-markdown">Formatting text in Markdown</h2>
<p>To format the text, follow these rules:
<br /></p>
<pre><code class="lang-markdown">
<span class="hljs-bullet">-</span> For italics, wrap the item with one star on each side: <span class="hljs-emphasis">*one star on each side*</span>.
<span class="hljs-bullet">-</span> For bold text, wrap the item with two stars on each side: <span class="hljs-strong">**two stars on each side**</span>.
<span class="hljs-bullet">-</span> For striking through text in GitHub Markdown, wrap the item in two tildes: ~~strikethrough~~.
<span class="hljs-bullet">-</span> For links, wrap link text in brackets [<span class="hljs-string"> </span>], and then wrap the URL in parentheses ( ): [<span class="hljs-string">This text links to Markdown</span>](<span class="hljs-link">https://sushreesatarupa.github.io/Markdown/</span>).
</code></pre>
<ul>
<li>The formatted text will look like this:</li>
<li>For italics, wrap the item with one star on each side: <em>one star on each side</em>.</li>
<li>For bold text, wrap the item with two stars on each side: <strong>two stars on each side</strong>.</li>
<li>For striking through text in GitHub Markdown, wrap the item in two tildes: strikethrough.</li>
<li>For links, wrap link text in brackets [ ], and then wrap the URL in parentheses ( ): <a target="_blank" href="https://sushreesatarupa.github.io/Markdown/">This text links to Markdown</a>.</li>
</ul>
<hr />
<h2 id="emphasis">Emphasis</h2>
<p>When writing your content in Markdown, you might want to place a bit more emphasis on certain words or phrases. The first way you can emphasise your text is in italics.</p>
<p>You can make your text italic by wrapping your text with one asterisk on each side (alternatively, you can use underscores in place of the asterisks). Once your application detects the second asterisk, your formatting for this element is considered “closed”.</p>
<p>Your text will look like this:</p>
<ul>
<li><em>This text is italic</em></li>
<li><em>This text is also italic</em></li>
</ul>
<p>Bold formatting provides a slightly heavier emphasis than italics, but it works in exactly the same way. This time, use two asterisks to wrap the text you want to make bold (alternatively, you can use underscores in place of asterisks).</p>
<p>Your text will look like this:</p>
<ul>
<li><strong>This text is bold</strong></li>
<li><strong>This text is also bold</strong></li>
</ul>
<p>If you really want to make a point, you can make your text simultaneously bold and italic to give it even more weight! To make your text bold and italic, use three asterisks (or three underscores) to wrap your word or phrase.</p>
<p>Your text will look like this:</p>
<ul>
<li><strong><em>This text is italic and bold.</em></strong></li>
<li><strong><em>This text is also italic and bold</em></strong></li>
</ul>
<pre><code class="lang-markdown"><span class="hljs-emphasis">*This text is italic*</span>
<span class="hljs-emphasis">_This text is also italic_</span>

<span class="hljs-strong">**This text is bold**</span>
<span class="hljs-strong">__This text is also bold__</span>

<span class="hljs-strong">**<span class="hljs-emphasis">*This text is italic and bold.<span class="hljs-strong">**<span class="hljs-emphasis">*
<span class="hljs-strong">__<span class="hljs-emphasis">_This text is also italic and bold<span class="hljs-strong">__<span class="hljs-emphasis">_</span></span></span></span></span></span></span></span>
</code></pre>
<hr />
<h2 id="links-inline">Links (inline)</h2>
<ul>
<li>Sometimes we want to link to external websites when writing Markdown content. There’s a simple way to do this using two sets of brackets.</li>
<li>To format an inline link in Markdown, you use square brackets to wrap your link text. Place the square-bracket wrapped link text alongside parentheses containing your URL (make sure you don’t include a space between the link text and the link).</li>
<li>Your text will look like this:<pre><code class="lang-markdown">[<span class="hljs-string">This is link text</span>](<span class="hljs-link">This is a link URL</span>)
</code></pre>
If you want to add title to your link, insert your alt text next to the link inside quotation marks
Your text will look like this:
<a target="_blank" href="This is a link URL “This is a title”">This is link text</a></li>
</ul>
<p>Note that if you want to link to a local file, within the same server as your other Markdown files, you can format your link with a forward slash followed by the relative URL.
Your text will look like this:
<a target="_blank" href="/This is a relative URL “This is a title”">This is link text</a></p>
<hr />
<h2 id="images">Images</h2>
<ul>
<li><p>A picture is worth a thousand words, as they say. Inserting an image into your Markdown file is similar to the formatting for links.</p>
</li>
<li><p>Begin your image formatting with an exclamation mark. Next, use square brackets to wrap your image alt text, next to parentheses containing the URL for your image. Ensure there are no spaces between the exclamation mark, square brackets, or parentheses.</p>
</li>
</ul>
<pre><code class="lang-markdown">![<span class="hljs-string">image</span>](<span class="hljs-link">https://user-images.githubusercontent.com/64991656/132938832-0394a87c-fb2d-4d7d-b478-d1b7c474df80.png</span>)
</code></pre>
<p>The image will look like this:
<br />
<img src="https://user-images.githubusercontent.com/64991656/132938832-0394a87c-fb2d-4d7d-b478-d1b7c474df80.png" alt="image" /></p>
<p><br /> When your Markdown file is rendered to HTML, the image will be embedded directly into the body text.</p>
<hr />
<h2 id="lists">Lists</h2>
<h3 id="unordered-lists">Unordered lists</h3>
<ul>
<li>Sometimes, you may want to format your content in lists to make it easier to read.</li>
<li>The first option is to use an unordered list, where each item on your list is preceded by a bullet point. </li>
<li>Markdown allows you to format your lists with a number of different symbols: asterisks (*), hyphens (-) or plus signs (+).</li>
</ul>
<p>It’s up to you to choose which symbol you prefer. The result you get is the same.</p>
<pre><code class="lang-markdown"><span class="hljs-bullet">-</span> Just add a dash first and then write a text.
<span class="hljs-bullet">-</span> If you add another dash in the following line, you will have another item in the list.
<span class="hljs-bullet">  -</span> If you add four spaces or use a tab key, you will create an indented list.
<span class="hljs-bullet">    -</span> If you need to insert an indented list within an intended one, just press a tab key again.

 Sometimes you want bullet points:

<span class="hljs-bullet">*</span> Start a line with a star
<span class="hljs-bullet">*</span> Profit!
</code></pre>
<p>The formatted text will look like this:</p>
<ul>
<li>Just add a dash first and then write a text.</li>
<li>If you add another dash in the following line, you will have another item in the list.<ul>
<li>If you add four spaces or use a tab key, you will create an indented list.<ul>
<li>If you need to insert an indented list within an intended one, just press a tab key again.</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Sometimes you want bullet points:</p>
<ul>
<li>Start a line with a star</li>
<li>Profit!</li>
</ul>
<h3 id="ordered-lists">Ordered lists</h3>
<ul>
<li>Other times, you may want to present your information sequentially in ordered lists (1, 2, 3, and so on). </li>
<li>Format your ordered lists by preceding each list item with a number, followed by a full stop and then a space.</li>
<li>In Markdown, it doesn’t matter which numbers you use to format your list, as the list will always render as 1, 2, 3, and so on.</li>
</ul>
<pre><code class="lang-markdown"><span class="hljs-bullet">1.</span> Just type a number followed by a dot.
<span class="hljs-bullet">2.</span> If you want to add a second item, just type in another number followed by a dot.
<span class="hljs-bullet">1.</span> If you make a mistake when typing numbers, fear not, Markdown will correct it for you.
<span class="hljs-bullet">    1.</span> If you press a tab key or type four spaces, you will get an indented list and the numbering
<span class="hljs-code">    will start from scratch.
        1. If you want to insert an indented numbered list within an existing indented numbered one,
        just press the tab key again.
            - If need be, you can also add an indented unordered list within an indented numbered one, an vice versa,
            by pressing a tab key and typing a dash.</span>
</code></pre>
<p>The formatted text will look like this:</p>
<ol>
<li>Just type a number followed by a dot.</li>
<li>If you want to add a second item, just type in another number followed by a dot.</li>
<li>If you make a mistake when typing numbers, fear not, Markdown will correct it for you.<ol>
<li>If you press a tab key or type four spaces, you will get an indented list and the numbering
will start from scratch.<ol>
<li>If you want to insert an indented numbered list within an existing indented numbered one,
just press the tab key again.<ul>
<li>If need be, you can also add an indented unordered list within an indented numbered one, an vice versa,
by pressing a tab key and typing a dash.</li>
</ul>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<hr />
<h2 id="blockquotes">Blockquotes</h2>
<p>Sometimes in Markdown, we will want to reference an external source using quotation marks. This is called a blockquote. You represent any blockquote by preceding the first line of the block quote with a greater-than sign or angle bracket (&gt;). Gruber recommends inserting the angle bracket before every line of your blockquote.</p>
<p>Your text will look like this:</p>
<blockquote>
<p>This is a blockquote
This is a blockquote
This is a blockquote</p>
</blockquote>
<h2 id="horizontal-rules">Horizontal rules</h2>
<p>A horizontal rule is a useful little element that you can use to visually split up blocks of text within your Markdown file. A horizontal rule is represented by three or more hyphens (-), asterisks (*), or underscores (_). Whichever symbol you use renders the same output.</p>
<p>Your text will look like this:
—</p>
<pre><code class="lang-markdown">
<span class="hljs-section">Create a horizontal rule with three or more hyphens, asterisks, or underscores on a line:
---</span>

<span class="hljs-bullet">*</span> <span class="hljs-emphasis">* *</span>

<span class="hljs-strong">__<span class="hljs-emphasis">_</span></span>
</code></pre>
<h2 id="the-formatted-text-will-look-like-this">The formatted text will look like this:</h2>
<hr />
<hr />
<hr />
<h2 id="code-blocks-and-snippets">Code blocks and snippets</h2>
<h3 id="code-snippets">Code snippets</h3>
<ul>
<li>Often when we’re writing in Markdown, we need to reference snippets of code as examples. This is particularly common in technical documentation. </li>
<li>Markdown allows you to format code snippets using backticks ` that wrap your code snippet. The first backtick “opens” the snippet, and the second backtick “closes” it.</li>
</ul>
<pre><code class="lang-markdown"><span class="hljs-code">`This is a code snippet`</span>
</code></pre>
<p>Your text will look like this:
<code>This is a code snippet</code></p>
<h3 id="code-blocks">Code blocks</h3>
<ul>
<li>Formatting code blocks is useful when you have a bigger chunk of code to include in your Markdown file. </li>
<li><p>Format your code blocks by indenting every line of your code block using one tab, or four spaces.</p>
<p>This is a code block
This is a code block
This is a code block</p>
</li>
</ul>
<p>There are many different ways to style code with GitHub's markdown. If you have inline code blocks, wrap them in backticks: <code>var example = true</code>.  </p>
<pre><code>`<span class="hljs-keyword">var</span> example = <span class="hljs-literal">true</span>`
</code></pre><p>If you've got a longer block of code, you can indent with four spaces:</p>
<pre><code><span class="hljs-keyword">if</span> (isAwesome){
  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
}
</code></pre><p>GitHub also supports something called code fencing, which allows for multiple lines without indentation:
<br />
<img src="https://user-images.githubusercontent.com/64991656/132943033-79e52948-fe5b-468e-9803-b7804d4cf9ae.png" alt="image" />
<br /></p>
<pre><code><span class="hljs-keyword">if</span> (isAwesome){
  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
}
</code></pre><p>And if you'd like to use syntax highlighting, include the language:
<br />
<img src="https://user-images.githubusercontent.com/64991656/132943045-21b022e4-8723-4957-b536-f3259ac1a60c.png" alt="image" />
<br /></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">if</span> (isAwesome){
  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
}
</code></pre>
<h2 id="escaping">Escaping</h2>
<ul>
<li>Often in Markdown, you will need to include characters in your text (for example, and asterisk) that may be part of the Markdown syntax. </li>
<li>You need to “escape” these characters so your Markdown application doesn’t read these characters as formatting.</li>
<li>You escape characters in Markdown using a backslash before the character, with no space in between.</li>
</ul>
<p>Your text should look like this:
*</p>
<p>You can escape any of these characters:</p>
<pre><code>\ <span class="hljs-selector-tag">backslash</span>
` <span class="hljs-selector-tag">backtick</span>
* <span class="hljs-selector-tag">asterisk</span>
<span class="hljs-selector-tag">_</span> <span class="hljs-selector-tag">underscore</span>
{} <span class="hljs-selector-tag">curly</span> <span class="hljs-selector-tag">braces</span>
<span class="hljs-selector-attr">[]</span> <span class="hljs-selector-tag">square</span> <span class="hljs-selector-tag">brackets</span>
() <span class="hljs-selector-tag">parentheses</span>
# <span class="hljs-selector-tag">hash</span> <span class="hljs-selector-tag">symbol</span>
+ <span class="hljs-selector-tag">plus</span> <span class="hljs-selector-tag">sign</span>
– <span class="hljs-selector-tag">minus</span> <span class="hljs-selector-tag">sign</span> (hyphen)
. <span class="hljs-selector-tag">dot</span>
! <span class="hljs-selector-tag">exclamation</span> <span class="hljs-selector-tag">mark</span>
</code></pre><h4 id="lists-within-blockquotes">Lists within blockquotes</h4>
<ul>
<li>Sometimes, you might want to insert a blockquote into your Markdown that contains another element, such as an unordered list. </li>
<li>You need to nest your list formatting inside your blockquote formatting.</li>
<li>Format your blockquote using a greater-than sign (&gt;) followed by a space, including a sign before every line of your block quote. </li>
<li>Add your list formatting (*) just after your greater-than signs.<pre><code>&gt; This <span class="hljs-keyword">is</span> a blockquote
&gt; * This <span class="hljs-keyword">is</span> a list item <span class="hljs-keyword">within</span> a blockquote
&gt; * This <span class="hljs-keyword">is</span> a list item <span class="hljs-keyword">within</span> a blockquote
&gt; * This <span class="hljs-keyword">is</span> a list item <span class="hljs-keyword">within</span> a blockquote
</code></pre>Your text should look like this:<blockquote>
<p>This is a blockquote</p>
<ul>
<li>This is a list item within a blockquote</li>
<li>This is a list item within a blockquote</li>
<li>This is a list item within a blockquote</li>
</ul>
</blockquote>
</li>
</ul>
<hr />
<h2 id="html">HTML</h2>
<ul>
<li>You can insert HTML elements directly into your Markdown file. </li>
<li>For example, you may want to include a button. Insert your HTML exactly as you would in any other HTML document.<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>This is a button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
</code></pre>Your text should look like this:This is a button

</li>
</ul>
<p>-This formatting also works for your other Markdown syntax, such as emphasis. Instead of <strong>This element is bold</strong>, you could format it in HTML as This element is bold.</p>
<pre><code><span class="hljs-keyword">Instead</span> <span class="hljs-keyword">of</span> **This element <span class="hljs-keyword">is</span> bold**, you could <span class="hljs-keyword">format</span> it <span class="hljs-keyword">in</span> HTML <span class="hljs-keyword">as</span> &lt;bold&gt;This element <span class="hljs-keyword">is</span> bold&lt;/bold&gt;.
</code></pre><hr />
<h3 id="quotes">Quotes</h3>
<ul>
<li>Add a quotation with the &gt; character at the beginning of each line:
```markdown<blockquote>
<p>“I make Jessica Simpson look like a rock scientist.”</p>
</blockquote>
</li>
</ul>
<blockquote>
<p>—Tara Reid, actress
```</p>
</blockquote>
<p>The quote will look like this:</p>
<blockquote>
<p>“I make Jessica Simpson look like a rock scientist.”</p>
<p>—Tara Reid, actress</p>
</blockquote>
<hr />
<h1 id="github-flavored-markdown">GitHub Flavored Markdown</h1>
<ul>
<li>GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com.</li>
<li>Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. </li>
<li>These include @mentions as well as references to SHA-1 hashes, Issues, and Pull Requests. </li>
<li>Task Lists are also available in Gist comments and in Gist Markdown files.</li>
</ul>
<h4 id="syntax-highlighting">Syntax highlighting</h4>
<ul>
<li>Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:</li>
<li><img src="https://user-images.githubusercontent.com/64991656/132948334-f9aba46a-93ba-431d-8a10-f97f14256b94.png" alt="image" /></li>
</ul>
<pre><code class="lang-javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fancyAlert</span>(<span class="hljs-params">arg</span>) </span>{
  <span class="hljs-keyword">if</span>(arg) {
    $.facebox({<span class="hljs-attr">div</span>:<span class="hljs-string">'#foo'</span>})
  }
}
</code></pre>
<ul>
<li>You can also simply indent your code by four spaces:</li>
<li><p><img src="https://user-images.githubusercontent.com/64991656/132948342-4e6d4339-a194-437c-9e5b-d29968bf4e60.png" alt="image" /></p>
<p>  function fancyAlert(arg) {</p>
<pre><code><span class="hljs-keyword">if</span>(arg) {
  $.facebox({<span class="hljs-symbol">div:</span><span class="hljs-string">'#foo'</span>})
}
</code></pre><p>  }</p>
</li>
<li><p>Here’s an example of Python code without syntax highlighting:</p>
</li>
<li><img src="https://user-images.githubusercontent.com/64991656/132948355-37b6f63a-55a7-4f9a-8b3e-16ff38fd1653.png" alt="image" /></li>
</ul>
<p>def foo():
    if not bar:
        return True</p>
<h4 id="task-lists">Task Lists</h4>
<pre><code class="lang-markdown"><span class="hljs-bullet">-</span> [<span class="hljs-string">x</span>] @mentions, #refs, [<span class="hljs-string">links</span>](<span class="hljs-link"></span>), <span class="hljs-strong">**formatting**</span>, and <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span></span>tags<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span></span> supported
<span class="hljs-bullet">-</span> [x] list syntax required (any unordered or ordered list supported)
<span class="hljs-bullet">-</span> [x] this is a complete item
<span class="hljs-bullet">-</span> [ ] this is an incomplete item
</code></pre>
<ul>
<li>[x] @mentions, #refs, <a target="_blank" href>links</a>, <strong>formatting</strong>, and tags supported</li>
<li>[x] list syntax required (any unordered or ordered list supported)</li>
<li>[x] this is a complete item</li>
<li><p>[ ] this is an incomplete item</p>
</li>
<li><p>If you include a task list in the first comment of an Issue, you will get a handy progress indicator in your issue list. </p>
</li>
<li>It also works in Pull Requests!</li>
</ul>
<h4 id="tables">Tables</h4>
<ul>
<li>You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:<pre><code class="lang-markdown">First Header | Second Header
------------ | -------------
Content from cell 1 | Content from cell 2
Content in the first column | Content in the second column
</code></pre>
<img src="https://user-images.githubusercontent.com/64991656/132943951-106683e1-60d8-4c18-bb8a-209213e6ed94.png" alt="image" /></li>
</ul>
<h4 id="username-mentions">Username @mentions</h4>
<ul>
<li>Typing an @ symbol, followed by a username, will notify that person to come and view the comment. </li>
<li>This is called an “@mention”, because you’re mentioning the individual. </li>
<li>You can also @mention teams within an organization.</li>
</ul>
<h4 id="automatic-linking-for-urls">Automatic linking for URLs</h4>
<p>Any URL (like http://www.github.com/) will be automatically converted into a clickable link.</p>
<h4 id="emoji">Emoji</h4>
<p>GitHub supports emoji!</p>
<p><img src="https://user-images.githubusercontent.com/64991656/132938448-e83bc0d0-f37e-4c5e-8a45-2f4443f5c169.png" alt="image" /></p>
<p><em>I am going to write the same article for gfg</em></p>
]]></content:encoded></item><item><title><![CDATA[README.md of a project]]></title><description><![CDATA[Why Do I need a Good README.md?
A README file is an essential guide that gives other developers a detailed description of your GitHub project.
You may be wondering, Why anyone should spend time writing a README file. 
Well, here are some reasons to h...]]></description><link>https://satarupa.hashnode.dev/readmemd-of-a-project</link><guid isPermaLink="true">https://satarupa.hashnode.dev/readmemd-of-a-project</guid><category><![CDATA[projects]]></category><category><![CDATA[hackathon]]></category><category><![CDATA[markdown]]></category><dc:creator><![CDATA[Sushree Satarupa]]></dc:creator><pubDate>Thu, 09 Sep 2021 10:59:28 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1631185109537/NjmynzYg5.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="why-do-i-need-a-good-readmemd">Why Do I need a Good README.md?</h2>
<p>A README file is an essential guide that gives other developers a detailed description of your GitHub project.
You may be wondering, Why anyone should spend time writing a README file. 
Well, here are some reasons to help convince you that it's a good idea:</p>
<ol>
<li>A good README helps your <strong>project to stand out</strong> from other projects. It should be as good as your project itself.</li>
<li>It's the first thing to notice while encountering your project, so it should be <strong>pretty brief but detailed.</strong></li>
</ol>
<h3 id="include-your-projects-title">Include Your Project's Title</h3>
<p>This is the name of the project. It describes the whole project in few words and helps people understand the primary goal and aim.</p>
<h3 id="write-a-description">Write a Description</h3>
<p>Your description is an essential part of your project. A well-maintained description allows you to show off your work to other developers as well as potential employers.
The quality of a README description differentiates a good project from bad ones. </p>
<ol>
<li><h2 id="inspiration">Inspiration</h2>
   What was your motivation? Why did you build this project?</li>
<li><h2 id="what-it-does">What it does</h2>
   What problem does the project solve? What your application does?</li>
<li><h2 id="how-we-built-it">How we built it</h2>
   Why you used specific technologies? If your project has a lot of many features, list them here.</li>
<li><h2 id="challenges-we-ran-into">Challenges we ran into</h2>
  Mention some of the challenges you faced and features you hope to implement in the future. </li>
<li><h2 id="accomplishments-that-were-proud-of">Accomplishments that we're proud of</h2>
  Mention anything that you think you are proud of building or having in that project</li>
<li><h2 id="what-we-learned">What we learned</h2>
 What did you know?</li>
<li><h2 id="whats-next-for-untitled">What's next for Untitled</h2>
</li>
<li><h2 id="built-with">Built With</h2>
Mention languages, frameworks, databases, etc</li>
<li><h2 id="try-it-out">Try it out:</h2>
provide deploy links or any other required links</li>
</ol>
<p>###How to Use Your Project: 
Provide <strong>instructions and examples</strong> so that users or contributors can use the project. This will make it easy for them so that if they encounter a problem, they will always have a place of reference. </p>
<h3 id="include-credits">Include Credits</h3>
<p>If you have worked on the project as a team, list your team members. You should also include their GitHub profiles.</p>
]]></content:encoded></item><item><title><![CDATA[Most used Programing languages at Hackathons]]></title><description><![CDATA[Picking a programming language to learn can be a stressful task. The modern language at any given time is not necessarily one that anyone will care about in a year.
It is interesting, then, to see what language programmers turn to when they have got ...]]></description><link>https://satarupa.hashnode.dev/most-used-programing-languages-at-hackathons</link><guid isPermaLink="true">https://satarupa.hashnode.dev/most-used-programing-languages-at-hackathons</guid><category><![CDATA[hackathon]]></category><category><![CDATA[programming languages]]></category><category><![CDATA[api]]></category><category><![CDATA[mobile app development]]></category><dc:creator><![CDATA[Sushree Satarupa]]></dc:creator><pubDate>Thu, 09 Sep 2021 08:09:00 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1631174786295/R3KTIVdAK.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Picking a programming language to learn can be a stressful task. The modern language at any given time is not necessarily one that anyone will care about in a year.</p>
<p>It is interesting, then, to see what language programmers turn to when they have got their pick - when they are coding not with some bosses’ wishes in mind, but when they are just cracking away at a project for the hell of it.</p>
<p>So today, we will discuss three things.</p>
<ul>
<li>What mobile platforms show up at hackathons the most? </li>
<li>Which programming languages are most popular? </li>
<li>Which APIs do people tap most often?</li>
</ul>
<p>Okay, for the first part,  at a hackathon when it comes to ## mobile app development. 
The most targeted platform is android, followed by IOs, and very few people target other platforms like windows.</p>
<p>For android apps most popularly used languages are:</p>
<ul>
<li>Kotlin and java</li>
</ul>
<p>However, recently flutter has gained much popularity and using flutter, one can build multi-platform apps using just one language dart. If you are doing an app development project, I highly recommend using flutter.</p>
<p>Moving on to next, </p>
<h2 id="what-are-the-most-popular-languages-used-in-hackathons">what are the most popular languages used in hackathons</h2>
<ul>
<li>HTML/CSS (see note below)</li>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
<li>PHP</li>
</ul>
<p>HTML/CSS and Javascript topping the list seems pretty predictable — they are forgiving, do not require a compiler, run in the browser rather than a specific OS, and tend to be the first languages new coders learn. </p>
<p>Most popular projects are based on web development. It is straightforward and fast to prototype a web-based solution for a problem, And most pros. When doing web development, it is convenient when you are good at javascript as you can make the front-end more interactive or build the entire front-end in javascript in react and even make back-end. Moreover, All of this using only one language. So I highly recommend getting along javascript along with basic HTML and CSS </p>
<h2 id="but-what-about-apis">But what about APIs?</h2>
<p>Devpost breaks it down category by category as opposed to lumping them all together under one umbrella, but the champs of each section are all pretty excellent tools to have in your belt.</p>
<p>The most popular communications API according to their data? Twilio. </p>
<ul>
<li>Social? Facebook and then Twitter  </li>
<li>Payment? Venmo beats out Paypal, and, perhaps surprisingly, both beat out Stripe. </li>
<li>Google Maps dominates the geo category, as most would probably assume.</li>
<li>Twilio’s domination in the communication category makes a ton of sense, if only because Twilio is so active in the hackathon scene.</li>
</ul>
]]></content:encoded></item><item><title><![CDATA[Hackathon 101]]></title><description><![CDATA[What is a Hackathon?
Wikipedia Definition
A Hackathon is a design sprint-like event; computer programmers and others involved in software development often collaborate intensively on software projects.
Couldn't get it?
In simple words, we can say a h...]]></description><link>https://satarupa.hashnode.dev/hackathon-101</link><guid isPermaLink="true">https://satarupa.hashnode.dev/hackathon-101</guid><category><![CDATA[hackathon]]></category><category><![CDATA[projects]]></category><category><![CDATA[project management]]></category><category><![CDATA[team]]></category><category><![CDATA[video streaming]]></category><dc:creator><![CDATA[Sushree Satarupa]]></dc:creator><pubDate>Wed, 08 Sep 2021 18:25:43 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1631125366865/GdtqR0G3e.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h1 id="what-is-a-hackathon">What is a Hackathon?</h1>
<p><em>Wikipedia Definition</em></p>
<p>A Hackathon is a design sprint-like event; computer programmers and others involved in software development often collaborate intensively on software projects.</p>
<p><em>Couldn't get it?</em></p>
<p>In simple words, we can say a hackathon is any event, technical or non-technical, where people work together to devise a solution for a problem.</p>
<h1 id="what-happens-at-a-hackathon">What happens at a Hackathon?</h1>
<ol>
<li><p><strong>Networking</strong>: Hackathons are a great place to network, so take the opportunity to meet new people and make friends during this time.</p>
</li>
<li><p><strong>Workshops</strong>: Various workshops are conducted by Industry Experts, Community leaders, etc., for beginners.</p>
</li>
<li><strong>Fun Activities</strong>: Apart from Coding and workshops, there are other events where you can have fun!</li>
<li>Guess what? If you win, you get <strong>swags or gift cards</strong>.</li>
<li>And, of course, <strong>Coding</strong>: Lastly, within the time frame, you have to brainstorm various ideas and execute your ideas into code.</li>
</ol>
<h1 id="what-is-hack-and-who-is-a-hacker">What is Hack, and Who is a Hacker?</h1>
<ul>
<li><strong>Hack</strong>: An innovative solution to a real-world problem</li>
<li><strong>Hacker</strong>: The person who develops the solution into code</li>
</ul>
<h1 id="what-can-you-do-as-a-beginner">What can you do as a beginner?</h1>
<ol>
<li><strong>Designer </strong>- Interested in making graphics? You can play a crucial role in UX designing.</li>
<li><strong>Empathizer </strong>- Have you experienced the problem that is the focus of the hack? You can help your team build a cool hack.</li>
<li>Brain stormer - Think out of the box and build a cool hack</li>
<li><strong>Public speaker</strong> - Can you present well in front of an audience? If yes, it's your time to shine.</li>
<li>Of course, <strong>Coding Wiz</strong> - Do you love to code? Great, then hackathons are for you.</li>
</ol>
<h1 id="where-to-find-hackathons">Where to find hackathons?</h1>
<ol>
<li>Devpost</li>
<li>Devfolio</li>
<li>D2C</li>
<li>HackerEarth</li>
<li>MLH</li>
<li>TechTogether</li>
</ol>
<p>A hackathon is actually lots of fun, and below are a few reasons why any budding developer should go to a hackathon:</p>
<ol>
<li><strong>Meet People and build connections</strong>: Hackathons provide you an excellent opportunity to meet new people. Start connecting with others, ask them about their interests, and have an idea for a project to build. Hackathons are a great head start for college freshers since students get opportunities to meet, collaborate, and work with others and get a chance to build essential connections.</li>
<li><strong>Learn New Technologies in a short duration</strong>: Participants get an opportunity to learn about trending technologies like blockchain, game-fi, google cloud, AR/VR, etc.
Throughout the weekend, you will learn many things, taking from technical skills to soft skills. Be open to all opportunities and tasks. You will get to do something you have never done before; you have to do something faster than you are used to, since the limited amount of time given pressures you.</li>
<li><strong>Builds your CV</strong>: Participants can include their hackathon project in their CV for greater visibility among recruiters, which will help them have a technical topic of discussion in their interviews.</li>
<li><strong>You'll get to pair-program</strong>: Pair programming is an agile software development technique in which two programmers work together at one workstation. Pair-programming is excellent if you want to focus more and would enjoy discussing problems with a partner.</li>
<li>You'll learn and build something by the end of the weekend and will automatically contribute to open source.</li>
<li>You'll get lots of swags.</li>
<li><strong>You'll grow as a developer</strong>: You'll learn from other people, from being forced to understand better the unfamiliar framework your team picked to use, and from being able to sit by your team and ask or answer any immediate questions.</li>
<li><strong>Work Under Pressure</strong>: Hackathon is a real test of your time management skills and ability to work with a team. Teamwork is the key to success, and accepting and working on other people's opinions is crucial.</li>
<li><strong>Enhance your creativity</strong>: Hackathon is about originality, so bring your craziest ideas. Be creative and original, think out-of-the-box, and show the awesome stuff you are capable of thinking. </li>
<li>You will get a skill-enhancing break from your regular schedule!</li>
</ol>
<h1 id="hackathon-judges-what-do-they-evaluate">Hackathon Judges – What Do They Evaluate?</h1>
<p>The evaluation criteria vary from one hackathon to another, but there are some common patterns:</p>
<ol>
<li><strong>Idea's originality</strong>– hard things that haven't been done before.</li>
<li><strong>Visual aspects of the project</strong>: UX/UI are well-crafted and beautiful interfaces that will help your team better explain the idea.</li>
<li><strong>Solid technical solutions</strong>: Technical complexity (how much learning the team did during the weekend)</li>
<li>Are judges at hackathons focused on a specific theme? If there are themes involved, you need to make sure to tie your app into one of the themes.</li>
</ol>
<p>As you can see, it's hard to know the judging criteria. Therefore, invest your time building a project that you feel proud of. It's great to align your vision with the hackathon topic and context, but do not overthink while creating the project you think judges want. Play freely and create something you are passionate about.</p>
<h1 id="the-perfect-pitching-structure">The perfect pitching structure</h1>
<ul>
<li>Focus first on demoing your project. You need to keep it realistic.</li>
<li>Keep slides to a minimum: If you use slides, use them to tell a story, add some humor, introduce persons who will use your app, or describe the architecture from a high level.</li>
<li>Don't let a lousy pitch ruin your chances of winning your next hackathon. And always remember, the most essential part of any hackathon is the 2-3 minutes of you and your team's pitch.</li>
</ul>
<h1 id="here-is-an-excellent-structure-to-make-your-pitch">Here is an excellent structure to make your pitch:</h1>
<p><strong>Intro </strong>(presented in 15 seconds): Start the video with a brief introduction to your project (team name, project name) but don't introduce each member; you can eat up a lot of time.
<strong>Problem statement</strong> (presented in 15 seconds): What problem did you identify for solving? How big is the problem?
<strong>Impact</strong> (presented in 15 seconds): How could solving the problem add to the market?
<strong>Product</strong> (presented in 1 minute):</p>
<ol>
<li>What was the inspiration for the idea?</li>
<li>What is the app?</li>
<li>Who are your target users?</li>
<li>What are the core features?</li>
<li>What makes your app different?</li>
<li>What would you have focused on if you had more time?</li>
<li>What's the business value of this app?</li>
<li>What is your plan for the idea post hackathon?</li>
</ol>
<p><strong>Demo</strong> (presented in 1 minute): 
One minute to demonstrate and explain the hack. Core features of the app. Actually, demo your project. The judges need to see the working project, in addition to hearing what you did.</p>
<p><strong>Wrap up </strong>(presented in 15 seconds): Be sure to mention what was used to build core features – Highlight all technologies used in your app, especially sponsor technology.</p>
<h1 id="project-demo-tips">Project Demo Tips</h1>
<ol>
<li>Know the Rules: Every hackathon has different rules that will impact how you should structure your pitch.</li>
<li>The Demo Video must be three minutes or less in length.  That's approximately 400 words and 27 sentences. Make every second count!</li>
<li>Always write a script on what you want to say and show, and practice it over and over again.</li>
<li><p>In a hackathon, you start making a concept of your product and then code it. Do the same with the pitch, get the storyline straight first and then build it. Bring the audience straight into the story.</p>
</li>
<li><p>What's the problem you're solving?</p>
</li>
<li>How big is the problem?</li>
<li>What does it cause?</li>
<li>How much detail? I have seen many technical pitches, which got utterly lost in the details of the technology. Don't disappear in the details! Keep to the headlines and ensure that you have time to cover all the topics, not just the specific product.</li>
<li>The Demo Video must be uploaded to an accessible site (e.g., YouTube, Dropbox, Drive, etc.) A working public link to the demo video must be created, and it should be playable from the web with the site's built-in player.</li>
<li>Make sure it provides a clear sound.</li>
<li>You do not need everyone to present on the Video. Select 1 person from the team to deliver the presentation.</li>
<li>Have a planned time to make your demo video, and don't wait till the last minute of the hackathon. Give yourself and your team time to make a nice video. If you want to do any editing on it, make sure you have enough time for that as well.</li>
<li>Landscape videos typically look better when viewed, so record in landscape mode, with your phone, held horizontally.</li>
<li>The Video's focus should be on pitching your project and not about the making of your project.</li>
<li>Review the Video; editing is Optional: Unless it's one of the event requirements, editing the Video is NOT required. But you should review the tape to ensure it says all the points you want others to know about your project and highlights what makes it unique.</li>
<li>Now, you just need to upload the video, get the link, and send it to someone else to verify if it plays to the end.</li>
</ol>
<h1 id="post-hackathon-tips">Post Hackathon Tips</h1>
<p>You've worked tirelessly through the days and nights, built something extraordinary, and presented it to a panel of judges. It could also be that you gave it your best try but didn't make it up to your expectations. Either way, you left the hackathon with maybe a prize or two, a few new technical knowledge, new friends, and swags.
But what's next? You could choose to continue working on the project, complete it if necessary, or add that cool features you didn't have the time to implement in the hackathon. On the other hand, you could forget about it, remembering it for fun and learning.</p>
<h3 id="wrap-up-session">Wrap-up Session</h3>
<p>The wrap-up session with your teammates to report what they accomplished or what they learned. If you won, then have a party (maybe virtual) and enjoy! If you have lost, talk to each other. What could have been better?</p>
<h3 id="before-that">Before that:</h3>
<p>Thank the mentors and organizers from whom you have taken help or guidance.
If there was any feedback form or address form, fill it.
If you got any credits, redeem them.
If there is a post-event, attend it.</p>
<h3 id="after-the-event">After the event:</h3>
<p>Teammates should come together to talk about the event's success and hear each other out.
Use feedback and new ideas (maybe the judges had great suggestions you hadn't thought about)</p>
<ul>
<li>What worked well?</li>
<li>What could have been done better?</li>
<li>Where does everyone see this idea heading?</li>
<li>What're the other things everyone wished were implemented during the hackathon?</li>
<li>What are the new ideas that came to mind since the event?</li>
<li>Write down everything that went right, so you can repeat it next time.</li>
<li>Write down everything that went wrong so you can avoid it next time.</li>
<li>Write a note in your diary about the event.</li>
</ul>
<h1 id="a-readmemd">A README.md</h1>
<p>It's the most essential part of your project and perhaps even more critical than any landing page. Use it to tell everyone about your idea, the technologies that make it happen.
This is the most straightforward addition with the most significant impact. No matter how cool your hack is or how well you know your own code, make it concise and detailed for everyone.
What might you include?</p>
<p>A picture tells a thousand words, So capture everyone's attention with a banner or screenshot of the homepage.</p>
<ul>
<li>A logo is an excellent addition if you are hosting the code in a personal repo.</li>
<li>Project name</li>
<li>Description of the project to sum up the solution in one or two sentences.</li>
<li>Implemented libraries or technologies in your project.</li>
<li>A link to your deployed project.</li>
<li>If you won any prizes for your project, mention them as well.</li>
<li>Inspiration</li>
<li>What it does</li>
<li>How you built it</li>
<li>Challenges you ran into</li>
<li>Accomplishments that you're proud of</li>
<li>What you learned</li>
<li>What's next for your project</li>
<li>Attach a team photo!</li>
</ul>
<p><em>Pro Tip: Add as LinkedIn Project</em>
Go to your LinkedIn profile, Go to the project section and add the GitHub URL, the project's name, and a short description.</p>
<h1 id="the-bare-minimum-maintainance">The Bare Minimum Maintainance</h1>
<p>After the hack, you are probably stuck with a messy codebase on GitHub. While in most hackathons, the cleanliness of your code is not judged, you probably want to do your portfolio a favor
Spend some time looking over the code as a whole and remove unwanted whitespace and fix any confusing variable names. Provide a few comments for others to understand.</p>
<h1 id="have-fun">Have FUN!</h1>
<p>Feel proud of yourself, and don't take anything too seriously. You've got this! All the best for your next hackathon!</p>
]]></content:encoded></item></channel></rss>