<?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[therceman]]></title><description><![CDATA[Hello everyone 👋 

I'm Anton (therceman) - Web Developer & Bug Bounty Hunter from EU

Skills: HTML, CSS, JS, VueJS, PHP, MySQL, Python]]></description><link>https://blog.therceman.dev</link><generator>RSS for Node</generator><lastBuildDate>Wed, 16 Sep 2026 10:33:54 GMT</lastBuildDate><atom:link href="https://blog.therceman.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[$350 XSS in 15 minutes]]></title><description><![CDATA[Hello 👋
This is my first and last Bug Bounty Writeup this year 😀
I am sharing with you my latest XSS finding, which I’ve found 2 weeks ago.
This was the fastest and a bit unusual flow that I normally do when I search for XSS.
So let’s dive in…

Com...]]></description><link>https://blog.therceman.dev/350-usd-xss-in-15-minutes</link><guid isPermaLink="true">https://blog.therceman.dev/350-usd-xss-in-15-minutes</guid><category><![CDATA[bugbounty]]></category><category><![CDATA[bugbountytips]]></category><category><![CDATA[ethicalhacking]]></category><category><![CDATA[#cybersecurity]]></category><category><![CDATA[hacking]]></category><dc:creator><![CDATA[Anton (therceman)]]></dc:creator><pubDate>Wed, 28 Dec 2022 21:32:42 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/4e4103608dbc7b2e0d78c47b8c41c765.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Hello 👋</p>
<p>This is my first and last Bug Bounty Writeup this year 😀</p>
<p>I am sharing with you my latest XSS finding, which I’ve found 2 weeks ago.</p>
<p>This was the fastest and a bit unusual flow that I normally do when I search for XSS.</p>
<p>So let’s dive in…</p>
<ul>
<li><p>Company asked me to retest an old XSS report.</p>
</li>
<li><p>I’ve checked that XSS and confirmed that it was fixed properly.</p>
</li>
<li><p>The specific endpoint had <code>name</code> a param that was vulnerable to Reflected XSS injection.</p>
</li>
</ul>
<pre><code class="lang-plaintext">example.com/profile?name=&lt;img+src=1+onerror=alert(1337)&gt;
</code></pre>
<ul>
<li>I’ve started to search for a bypass and used the Search function in Chrome Developer tools to search this endpoint <code>/profile</code> in all JS files to check for another vulnerable param, but found another endpoint:</li>
</ul>
<pre><code class="lang-plaintext">example.com/services
</code></pre>
<ul>
<li><p>The first idea that came to my mind was to put this URL in the google search engine and see if this endpoint was cached somewhere on the google web space with params.</p>
</li>
<li><p>After the first try, I found a cached endpoint with params on the first page of the results, the endpoint had ID param and some other params.</p>
</li>
</ul>
<pre><code class="lang-plaintext">example.com/services?id=123&amp;page=Demo
</code></pre>
<ul>
<li>I’ve added my payload <code>qwe'"&lt;X&lt;/</code> to the ID param and started to check if anything is reflected somewhere on the webpage’s source code.</li>
</ul>
<pre><code class="lang-plaintext">example.com/services?id=123qwe'"&lt;X&lt;/
</code></pre>
<ul>
<li><p>Besides that, I’ve opened the Network tab in Chrome Developer tools to check all requests that this endpoint might send somewhere.</p>
</li>
<li><p>After the second refresh of the page, I found an interesting AJAX request that used the JSONP callback param together with the ID param from the endpoint itself. The AJAX request URL was similar to this:</p>
</li>
</ul>
<pre><code class="lang-plaintext">lib.com/find?id=123qwe&amp;jsonp=cb12
</code></pre>
<ul>
<li><p>The first thing that I tested was the JSONP param itself, to see if I can change it to an <code>alert</code> function with a custom parameter</p>
</li>
<li><p>To my surprise, there was no check for JSONP value, so I easily changed it to <code>alert(1337);</code></p>
</li>
<li><p>Now it was time to check the ID param once again and see if it accepts other symbols, for example, <code>%</code> sign to craft an encoded payload in order to add custom parameters to AJAX URL.</p>
</li>
<li><p>I’ve changed the endpoint URL to</p>
</li>
</ul>
<pre><code class="lang-plaintext">example.com/services?id=1%26jsonp=alert(1337);%23
</code></pre>
<ul>
<li>When JS processed it, it transformed <code>%26</code> to &amp; and <code>%23</code> to #. Everything that is behind the # (hashtag) symbol is ignored by the browser. The final AJAX call looked like this:</li>
</ul>
<pre><code class="lang-plaintext">lib.com/find?id=1&amp;jsonp=alert(1337);#&amp;jsonp=cb12
</code></pre>
<ul>
<li>Using this AJAX URL manipulation (parameter pollution attack) I have successfully triggered an alert box with text <code>1337</code>. This confirmed the DOM XSS vulnerability existence and I have received a $350 bounty, with an additional $50 for a retest of an old report.</li>
</ul>
<p>Thanks for reading!</p>
<hr />
<p>P.S. I’m working on a book for beginners in Bug Bounty world. This book will include Networking, HTML &amp; JavaScript basics, a short description of widespread vulnerabilities, and an in-depth analysis of XSS vulnerability with examples, tips, tools, and tricks. At the end of the book, I will teach you how to create and deploy your own NodeJS service for testing Blind-XSS / SSRF vulnerabilities.</p>
<p>P.S.S. Stay tuned for updates and don’t forget to subscribe at least somewhere so you won’t miss any info regarding the book.</p>
<hr />
<p>Happy Holidays &amp; Happy New Year! 🎄</p>
<hr />
<p>Sharing Bug Bounty Tips on</p>
<p>🔸 LinkedIn 🔗 <a target="_blank" href="http://linkedin.com/in/therceman">linkedin.com/in/therceman</a></p>
<p>🔸 Instagram 🔗 <a target="_blank" href="http://instagram.com/therceman">instagram.com/therceman</a></p>
<p>🔸 Telegram 🔗 <a target="_blank" href="http://t.me/therceman">t.me/therceman</a></p>
<p>🔸 TikTok 🔗 <a target="_blank" href="http://tiktok.com/@therceman">tiktok.com/@therceman</a></p>
<p>🔸 YouTube 🔗 <a target="_blank" href="http://youtube.com/therceman">youtube.com/therceman</a></p>
<p>🔸 Twitter 🔗 <a target="_blank" href="https://twitter.com/therceman">twitter.com/therceman</a></p>
<p>Anton (therceman)</p>
]]></content:encoded></item><item><title><![CDATA[How To Start Bug Bounty Hunting]]></title><description><![CDATA[I recommend registering on @BugCrowd, @Hacker0x01, @intigriti
Searching for bugs in the wild (not on a bug bounty platform) is great, but not for the start.
Bug bounty platforms can give you very interesting private invites over time.

Try focusing o...]]></description><link>https://blog.therceman.dev/how-to-start-bug-bounty-hunting</link><guid isPermaLink="true">https://blog.therceman.dev/how-to-start-bug-bounty-hunting</guid><category><![CDATA[#cybersecurity]]></category><category><![CDATA[Beginner Developers]]></category><category><![CDATA[Developer]]></category><category><![CDATA[Bugs and Errors]]></category><category><![CDATA[Programming Blogs]]></category><dc:creator><![CDATA[Anton (therceman)]]></dc:creator><pubDate>Sat, 21 Aug 2021 08:48:36 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1629535536314/3un0gL4gn.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>I recommend registering on <a target="_blank" href="https://twitter.com/Bugcrowd">@BugCrowd</a>, <a target="_blank" href="https://twitter.com/Hacker0x01">@Hacker0x01</a>, <a target="_blank" href="https://twitter.com/intigriti">@intigriti</a></p>
<p>Searching for bugs in the wild (not on a bug bounty platform) is great, but not for the start.</p>
<p>Bug bounty platforms can give you very interesting private invites over time.</p>
<hr />
<p>Try focusing on programs that have a wide scope, where you can manage users (create roles), docs, images, etc.</p>
<p>And then start with a simple — create two users (one basic user &amp; second admin), open two browsers, and start testing for <strong>BAC</strong> (Broken Access Control) vulnerability.</p>
<p>In short — BAC is the type of vulnerability, where a basic user can perform admin actions.</p>
<p>Some of these vulnerabilities can be found using direct links to sections/endpoints, but others will require you to modify requests that are sent to the browser</p>
<hr />
<p>I recommend using <a target="_blank" href="https://twitter.com/Burp_Suite">@Burp_Suite</a> for requests capture &amp; modification. You can download Community Edition for Free.</p>
<p>Recommended Addon: Logger++</p>
<hr />
<p>While you are testing the website/app for BAC bugs — you can highlight all GET requests to critical actions. E.g. <code>/delete_user?id=1</code></p>
<p>Requests with critical actions that can be directly sent to a user are treated as a <strong>CSRF</strong> (Cross-Site Request Forgery) vulnerability</p>
<p>POST requests can be used too to perform CSRF attack, but usually has CSRF protection mechanism in place (like <code>csrf_tokens</code> or <code>referrer</code> check).</p>
<p>CSRF protection can be bypassed sometimes. Try to switch the POST method to GET or remove token value from a key - <code>csrf_token=</code>.</p>
<p>With referrer protection, you can try to append your own domain to a referrer, like this <code>http://example.com.yourdomain.com</code></p>
<hr />
<p>And the third basic rule while performing bug bounty hunting — is to put a basic payload in all possible inputs: <code>qwe'"&lt;X&lt;/</code></p>
<p>And just watch text reflection on a website. If you will see somewhere <code>qwe'"</code> (without angle brackets) — this could be a chance of <strong>XSS</strong></p>
<p>Additionally, search for <code>qwe</code> text in the source code of the page. Use Developers Tools in the browser for this task.</p>
<p>Some of the input payloads can be reflected in tag parameters: 
<code>&lt;a class="qwe'"&lt;x&lt;/"&gt;</code></p>
<p>Or in <code>&lt;script&gt;</code> element itself: 
<code>&lt;script&gt; let a = "qwe'"&lt;x&lt;/" &lt;script&gt;</code></p>
<hr />
<blockquote>
<p>That's all for now! Thanks for reading 👍</p>
<p>Follow me on Twitter - https://twitter.com/therceman</p>
<p>I Tweet &amp; Write about WebDev &amp; InfoSec</p>
</blockquote>
]]></content:encoded></item><item><title><![CDATA[What is a Website URL? 🔗]]></title><description><![CDATA[URL (Uniform Resource Locator) is the so-called address of the desired resource on the internet that consists of multiple components/parts. 
Let's take a look at the following URL
https://admin:pass@a.beta.example.com:888/users/index.php?q=bob&role=2...]]></description><link>https://blog.therceman.dev/what-is-a-website-url</link><guid isPermaLink="true">https://blog.therceman.dev/what-is-a-website-url</guid><category><![CDATA[Web Development]]></category><category><![CDATA[#codenewbies]]></category><category><![CDATA[Programming Blogs]]></category><category><![CDATA[webdev]]></category><category><![CDATA[coding]]></category><dc:creator><![CDATA[Anton (therceman)]]></dc:creator><pubDate>Mon, 16 Aug 2021 21:03:22 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1629206079642/JorCgz1Ug.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>URL (Uniform Resource Locator) is the so-called address of the desired resource on the internet that consists of multiple components/parts. </p>
<p>Let's take a look at the following URL</p>
<pre><code class="lang-text">https://admin:pass@a.beta.example.com:888/users/index.php?q=bob&amp;role=2#info
</code></pre>
<p>This URL consist of the following components:</p>
<ol>
<li>Scheme       <code>https://</code></li>
<li>Authority   <code>admin:pass@</code></li>
<li>Host             <code>a.beta.example.com</code></li>
<li>Port             <code>888</code></li>
<li>Path            <code>users/index.php</code></li>
<li>Query          <code>q=bob&amp;role=2</code></li>
<li>Hash            <code>#info</code></li>
</ol>
<h2 id="scheme-component">Scheme component</h2>
<hr />
<p><strong>Alternative naming:</strong>  Protocol
<br /><strong>Required:</strong> Yes
<br /><strong>Example:</strong> <code>https://</code></p>
<p>The scheme specifies which application will be used by a web server (app on Windows/i0S/Android) to open a URL. </p>
<p>For example, opening a URL with the scheme <code>mailto://</code> will open your webmail application.</p>
<ul>
<li>Common examples: <code>https://</code>, <code>http://</code> , <code>ftp://</code>, <code>mailto://</code>, <code>file://</code></li>
<li>Custom app examples: <code>facetime://</code>, <code>slack://</code>, <code>steam://</code></li>
<li>Browser specific examples: <code>about://</code>, <code>chrome://</code></li>
<li>Additional browser examples: <code>data://</code>, <code>javascript://</code></li>
</ul>
<h2 id="authority-component">Authority component</h2>
<hr />
<p><strong> Alternative naming: </strong> HTTP authentication, credentials, authorization
<br /><strong>Required:</strong> No
<br /><strong>Example:</strong> <code>admin:pass@</code></p>
<p>Basic authorization to a web/app resource indicated by  <code>@</code> (at) sign.
<br /> Login <code>admin</code> is separated from password <code>pass</code> using <code>:</code> (colon) sign</p>
<p>In some cases password is optional (e.g. <code>https://admin@example.com</code>)</p>
<h2 id="host-component">Host component</h2>
<hr />
<p><strong> Alternative naming: </strong> Hostname
<br /><strong>Required:</strong> Yes
<br /><strong>Example:</strong> <code>a.beta.example.com</code></p>
<p>The Host consists of multiple domain names separated by <code>.</code> (dot) sign. 
<br />Domain name with level &gt; 2 is called sub-domain</p>
<ol>
<li><code>a</code>                    - fourth-level domain (sub-domain)</li>
<li><code>beta</code>               - third-level domain (sub-domain) </li>
<li><code>example</code>    - second-level domain (domain name)</li>
<li><code>com</code>            - top/first-level domain (TLD)</li>
</ol>
<p>The host can be an IP address in IPv4 (e.g. <code>193.184.216.34</code>)
<br /> or IPv6 (e.g. <code>[2a00:1450:400e:80a::200e]</code>) format</p>
<h2 id="port-component">Port component</h2>
<hr />
<p><strong>Required:</strong> Yes
<br /><strong>Example:</strong> <code>888</code></p>
<p>The port component indicates which server we are referring to on the target host</p>
<p>The <code>:</code> (colon) sign indicates port component usage. <code>888</code> is the port number</p>
<p>The server can accept connections on multiple ports. E.g. port numbers <code>80</code> and <code>443</code> can be used by a single server:</p>
<ul>
<li><code>80</code>   - port number is used for basic web connection</li>
<li><code>443</code> - port number is used for secure (TLS/SSL) web connection</li>
</ul>
<p>The port <code>:443</code> or <code>:80</code> is omitted when a web page has <code>https://</code> or <code>http://</code> scheme</p>
<h2 id="path-component">Path component</h2>
<hr />
<p><strong>Required:</strong> No
<br /><strong>Example:</strong> <code>/users/index.php</code></p>
<p>Usually the Path component indicates a path to target file on a server</p>
<ul>
<li><code>/</code>                 -  the root path/folder. Let's imagine it is called <code>htdocs</code></li>
<li><code>users</code>              -  folder named <code>users</code> inside of <code>htdocs</code> folder</li>
<li><code>/index.php</code> - file named <code>index.php</code> inside of <code>users</code> folder</li>
</ul>
<p>In some cases, the Path component can use custom mapping/scheme/rewrite rule.
<br />The path segments can be linked to a function/method in different files on a server:</p>
<ul>
<li><p><code>/users/list</code>         - function named <code>list</code> in <code>users.php</code> file.
<br /><em>show list of all users</em></p>
</li>
<li><p><code>/users/1/read</code> - function named <code>read</code> with argument <code>ID</code> in <code>users.php</code> file. 
<br /><em>show info of user with ID = 1</em></p>
</li>
<li><p><code>/users/images</code> - function named <code>users</code> in <code>image-collection.php</code> file. 
<br /><em>show images of all users</em></p>
</li>
</ul>
<h2 id="query-component">Query component</h2>
<hr />
<p><strong> Alternative naming: </strong> Query string, Search string
<br /><strong>Required:</strong> No
<br /><strong>Example:</strong> <code>?q=bob&amp;role=2</code></p>
<p>The Query component always starts with a <code>?</code> (question) sign. 
<br /> It consists of key-value pairs. The value is assigned to a key using the <code>=</code> (equals) sign. 
<br /> Key-value pairs are separated using <code>&amp;</code> (ampersand) sign.</p>
<ol>
<li><code>?</code>       - starting symbol that indicates presence of Query component </li>
<li><code>q</code>       - the first key</li>
<li><code>=</code>       - the sign, that assigns first value to a first key</li>
<li><code>bob</code>   -  the first value</li>
<li><code>&amp;</code>       -  the key and value pair separator</li>
<li><code>role</code>  - the second key</li>
<li><code>=</code>       - the sign, that assigns second value to a second key</li>
<li><code>2</code>       - the second value</li>
</ol>
<p>Example of logic behind this query: <em>get all users named <code>bob</code> with role ID <code>2</code></em></p>
<h2 id="hash-component">Hash component</h2>
<hr />
<p><strong> Alternative naming: </strong> Anchor
<br /><strong>Required:</strong> No
<br /><strong>Example:</strong> <code>#info</code></p>
<p>Usually used by client-side scripting language named <code>Javascript</code>
<br /> By default - the browser will make a focus on an element with <code>id</code> after <code>#</code> (hash) sign.
<br /> In our case, the focus will be made on an element with ID <code>info</code></p>
<ul>
<li><code>#</code>       - starting symbol that indicates the presence of Hash component</li>
<li><code>info</code> - the value of a Hash component</li>
</ul>
<p>Example of logic behind this hash: <em>show tab that contains basic info for found users</em></p>
<hr />
<blockquote>
<p>Thanks for reading 👍</p>
<p>Follow me on Twitter - twitter.com/therceman</p>
</blockquote>
]]></content:encoded></item><item><title><![CDATA[What Is Javascript Recursion? 🔁]]></title><description><![CDATA[Recursion is a mathematical concept that has many applications in daily life.
As website developers, we encounter recursive functions every day. 
This tutorial will explore the pattern of problems, which can be solved using recursion.
Basic Concept

...]]></description><link>https://blog.therceman.dev/what-is-javascript-recursion</link><guid isPermaLink="true">https://blog.therceman.dev/what-is-javascript-recursion</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Recursion]]></category><category><![CDATA[webdev]]></category><category><![CDATA[Developer]]></category><category><![CDATA[Programming Blogs]]></category><dc:creator><![CDATA[Anton (therceman)]]></dc:creator><pubDate>Fri, 13 Aug 2021 13:19:11 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1628755856239/svR3bIUnNq.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Recursion is a mathematical concept that has many applications in daily life.</p>
<p>As website developers, we encounter recursive functions every day. </p>
<p>This tutorial will explore the pattern of problems, which can be solved using recursion.</p>
<h2 id="basic-concept">Basic Concept</h2>
<hr />
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">recurse</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 2nd call to itself</span>
    recurse();
}

<span class="hljs-comment">// 1st call</span>
recurse();
</code></pre>
<p>Each recursive function must have a base case (also called termination condition), where it stops the recursion, or else it will continue calling itself indefinitely.</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">recurse</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">if</span> (terminate)
        <span class="hljs-keyword">return</span>; <span class="hljs-comment">// stop calling recurse();</span>

    <span class="hljs-comment">// continue recurse() if there is no termination</span>
    recurse();
}

recurse();
</code></pre>
<h2 id="while-loop-and-recursion-comparison">While Loop and Recursion Comparison</h2>
<hr />
<p>The recursion technique looks similar to the <code>while</code> loop.</p>
<p>Imagine that you need to multiply the desired number by themselves X times.</p>
<p>For example: <code>2 * 2 * 2 = 8</code></p>
<h3 id="while-loop">While Loop</h3>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">multiply</span>(<span class="hljs-params">n, x</span>) </span>{
    <span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>;
    <span class="hljs-keyword">let</span> res = <span class="hljs-number">1</span>;
    <span class="hljs-keyword">while</span> (i &lt; x) {
      res = res * n;
      i++;
    }
    <span class="hljs-keyword">return</span> res;
}
</code></pre>
<blockquote>
<p>How does the loop works?</p>
</blockquote>
<pre><code><span class="hljs-attribute">multiply</span>(<span class="hljs-number">2</span>,<span class="hljs-number">3</span>)

<span class="hljs-attribute">1</span>. i = <span class="hljs-number">0</span>, res = (<span class="hljs-number">1</span>) * <span class="hljs-number">2</span>       // <span class="hljs-number">0</span> &lt; <span class="hljs-number">3</span> continue ...
<span class="hljs-attribute">2</span>. i = <span class="hljs-number">1</span>; res = (<span class="hljs-number">2</span>) * <span class="hljs-number">2</span>       // <span class="hljs-number">1</span> &lt; <span class="hljs-number">3</span> continue ...
<span class="hljs-attribute">3</span>. i = <span class="hljs-number">2</span>; res = (<span class="hljs-number">2</span> * <span class="hljs-number">2</span>) * <span class="hljs-number">2</span>   // <span class="hljs-number">2</span> &lt; <span class="hljs-number">3</span> continue ...
<span class="hljs-attribute">4</span>. i = <span class="hljs-number">3</span>; res = (<span class="hljs-number">2</span> * <span class="hljs-number">2</span> * <span class="hljs-number">2</span>)   // <span class="hljs-number">3</span> &lt; <span class="hljs-number">3</span> (false) break and return <span class="hljs-number">8</span>
</code></pre><h3 id="recursion">Recursion 🔁</h3>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">multiply</span>(<span class="hljs-params">n, x</span>) </span>{
    <span class="hljs-keyword">return</span> x &gt; <span class="hljs-number">1</span> ? n * multiply(n, x - <span class="hljs-number">1</span>) : n;
}
</code></pre>
<blockquote>
<p>How does the recursion works?</p>
</blockquote>
<p> <a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1628795478992/UZs1K6aO0.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1628795478992/UZs1K6aO0.jpeg" alt="recursion.jpg" /></a> </p>
<h2 id="examples">Examples</h2>
<hr />
<h3 id="1-string-url-encode">#1 (String URL Encode)</h3>
<p>Let's imagine we need to URL encode the string <code>&lt;html&gt;</code> 5 times</p>
<p>The output should look like this:
<code>%252525253Chtml%252525253E</code></p>
<h4 id="loop-solution">Loop Solution</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">encode</span>(<span class="hljs-params">str, n</span>) </span>{
    <span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>;
    <span class="hljs-keyword">while</span> (i &lt; n) {
      str = <span class="hljs-built_in">encodeURI</span>(str)
      i++;
    }
    <span class="hljs-keyword">return</span> str;
}
</code></pre>
<h4 id="recursion-solution">Recursion Solution 🔁</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">encode</span>(<span class="hljs-params">str, n</span>) </span>{
    <span class="hljs-keyword">return</span> n ? encode(<span class="hljs-built_in">encodeURI</span>(str), n - <span class="hljs-number">1</span>) : str;
}
</code></pre>
<h3 id="2-string-url-decode">#2 (String URL Decode)</h3>
<p>Let's imagine we need to decode an URL that has been encoded multiple times</p>
<p>For example let's take previous URL encoded string:
<code>%252525253Chtml%252525253E</code></p>
<p>The output result will be: <code>&lt;html&gt;</code></p>
<h4 id="loop-solution">Loop Solution</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">decode</span>(<span class="hljs-params">str</span>) </span>{
    <span class="hljs-keyword">while</span> (str !== <span class="hljs-built_in">decodeURI</span>(str)) {
      str = <span class="hljs-built_in">decodeURI</span>(str)
    }
    <span class="hljs-keyword">return</span> str;
}
</code></pre>
<h4 id="recursion-solution">Recursion Solution 🔁</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">decode</span>(<span class="hljs-params">str</span>) </span>{
    <span class="hljs-keyword">return</span> str !== <span class="hljs-built_in">decodeURI</span>(str) ? decode(<span class="hljs-built_in">decodeURI</span>(str)) : str;
}
</code></pre>
<h3 id="3-string-replace">#3 (String Replace)</h3>
<p>Imagine you need to replace bad tags, like <code>&lt;script&gt;</code>, from your HTML code</p>
<p>1st case: <code>hello&lt;script&gt; world&lt;script&gt;</code></p>
<p>2nd case: <code>hello&lt;sc&lt;script&gt;ript&gt;world</code></p>
<p>With the first case, we can easily do something like this:</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> html_code = <span class="hljs-string">'hello&lt;script&gt; world&lt;script&gt;'</span>;
<span class="hljs-keyword">let</span> output = html_code.replaceAll(<span class="hljs-string">'&lt;script&gt;'</span>,<span class="hljs-string">''</span>);
<span class="hljs-comment">// output: hello world</span>
</code></pre>
<p>But.. with the second case it will fail:</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> html_code = <span class="hljs-string">'hello&lt;sc&lt;script&gt;ript&gt; world'</span>;
<span class="hljs-keyword">let</span> output = html_code.replaceAll(<span class="hljs-string">'&lt;script&gt;'</span>,<span class="hljs-string">''</span>);
<span class="hljs-comment">// output: hello&lt;script&gt; world</span>
</code></pre>
<p>Here is where Recursion comes to the rescue</p>
<h4 id="recursion-solution">Recursion Solution 🔁</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">clean_html</span>(<span class="hljs-params">html, bad_tag</span>) </span>{
    <span class="hljs-keyword">let</span> cleaned_html = html.replaceAll(bad_tag, <span class="hljs-string">''</span>);
    <span class="hljs-keyword">return</span> html === cleaned_html ? html : clean_html(cleaned_html, bad_tag)
}

clean_html(<span class="hljs-string">'hello&lt;sc&lt;script&gt;ript&gt; world'</span>, <span class="hljs-string">'&lt;script&gt;'</span>);

<span class="hljs-comment">// output: hello world</span>
</code></pre>
<h3 id="4-find-nested-elements">#4 (Find Nested Elements)</h3>
<p>In this example, we need to find category by ID in a deeply nested array</p>
<p>Our target is a category with ID number 5</p>
<pre><code class="lang-js"><span class="hljs-keyword">let</span> the_category_list = [
    {<span class="hljs-string">"id"</span> : <span class="hljs-number">1</span>, <span class="hljs-string">"name"</span> : <span class="hljs-string">"fruits"</span>, <span class="hljs-string">"child_list"</span> : [
        {<span class="hljs-string">"id"</span> : <span class="hljs-number">2</span>, <span class="hljs-string">"name"</span> : <span class="hljs-string">"apple"</span>, <span class="hljs-string">"child_list"</span> : [
            {<span class="hljs-string">"id"</span> : <span class="hljs-number">4</span>, <span class="hljs-string">"name"</span> : <span class="hljs-string">"red apple"</span>, <span class="hljs-string">"child_list"</span> : []},
            {<span class="hljs-string">"id"</span> : <span class="hljs-number">5</span>, <span class="hljs-string">"name"</span> : <span class="hljs-string">"green apple"</span>, <span class="hljs-string">"child_list"</span> : []}
        ]},
        {<span class="hljs-string">"id"</span> : <span class="hljs-number">3</span>, <span class="hljs-string">"name"</span> : <span class="hljs-string">"banana"</span>, <span class="hljs-string">"child_list"</span> : []}
    ]}
]
</code></pre>
<h4 id="recursion-solution">Recursion Solution 🔁</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">find_category_by_id</span>(<span class="hljs-params">id, category_list</span>) </span>{
    <span class="hljs-keyword">let</span> found_category = <span class="hljs-literal">false</span>;

    category_list.forEach(<span class="hljs-function"><span class="hljs-params">category</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (category.id === id)
            found_category = category;

        <span class="hljs-keyword">if</span> (found_category === <span class="hljs-literal">false</span> &amp;&amp; category.child_list.length)
            found_category = find_category_by_id(id, category.child_list)
    }); 

    <span class="hljs-keyword">return</span> (found_category) ? found_category : <span class="hljs-literal">false</span>;
}

find_category_by_id(<span class="hljs-number">5</span>, the_category_list)

<span class="hljs-comment">// Output: {id: 5, name: "green apple", child_list: Array(0)}</span>
</code></pre>
<h3 id="5-factorial-using-recursion">#5 (Factorial Using Recursion)</h3>
<p>This example will show you how to write a factorial program in javascript using recursion</p>
<p>Let's imagine we need a factorial of 5: <code>1 * 2 * 3 * 4 * 5 = 120</code></p>
<h4 id="recursion-solution">Recursion Solution 🔁</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">factorial</span>(<span class="hljs-params">x</span>) </span>{
    <span class="hljs-keyword">return</span> x ? x * factorial(x - <span class="hljs-number">1</span>) : <span class="hljs-number">1</span>; 
}
</code></pre>
<h3 id="6-fibonacci-series-using-recursion">#6 (Fibonacci Series Using Recursion)</h3>
<p>In this example, you will learn how to write a program to print Fibonacci series using recursion</p>
<p>Fibonacci sequence is written as: <code>0, 1, 1, 2, 3, 5, 8, 13, 21, …</code></p>
<h4 id="recursion-solution">Recursion Solution 🔁</h4>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fibonacci</span>(<span class="hljs-params">num</span>) </span>{
    <span class="hljs-keyword">return</span> num &lt; <span class="hljs-number">2</span> ? num : fibonacci(num - <span class="hljs-number">1</span>) + fibonacci(num - <span class="hljs-number">2</span>);
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fibonacci_printer</span>(<span class="hljs-params">numberOfTerms</span>) </span>{
    <span class="hljs-keyword">let</span> out = [];
    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; numberOfTerms; i++) {
        out.push(fibonacci(i));
    }
    <span class="hljs-built_in">console</span>.log(out.join(<span class="hljs-string">', '</span>));
}
</code></pre>
<p>To use this program, you need to call <code>fibonacci_printer(5)</code> and the output will be: 
<br /><code>0, 1, 1, 2, 3</code></p>
<blockquote>
<p>Thanks for reading!</p>
<p>More examples will be added later.</p>
<p>Follow me on Twitter - twitter.com/therceman</p>
</blockquote>
]]></content:encoded></item><item><title><![CDATA[The New Competitive Image Format For Web 👉 WebP]]></title><description><![CDATA[WebP can reduce the file size from 20% to 80% (or even more) compared to JPEG, PNG, and GIF

Key Features

🔷 Developer by Google in 2010
🔷 Open Source
🔷 Extension -> .webp
🔷 MIME type -> image/webp
🔷 Lossless Compression
🔷 Supports Animation
🔷...]]></description><link>https://blog.therceman.dev/the-new-competitive-image-format-for-web-webp</link><guid isPermaLink="true">https://blog.therceman.dev/the-new-competitive-image-format-for-web-webp</guid><category><![CDATA[Web Development]]></category><category><![CDATA[Web Design]]></category><category><![CDATA[Developer]]></category><category><![CDATA[Design]]></category><category><![CDATA[Programming Blogs]]></category><dc:creator><![CDATA[Anton (therceman)]]></dc:creator><pubDate>Wed, 11 Aug 2021 18:17:45 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1628703790722/5Wm2aGIXP.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>WebP can reduce the file size from 20% to 80% (or even more) compared to JPEG, PNG, and GIF</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1628703882564/HRQRBoqJ6.png" alt="xwebp-vs-png-lossless-compression-1120x642.pagespeed_.ic__.ayj7ulmvj-1066x611_1.png" /></p>
<h3 id="key-features">Key Features</h3>
<hr />
<p>🔷 Developer by Google in 2010</p>
<p>🔷 Open Source</p>
<p>🔷 Extension -&gt; .webp</p>
<p>🔷 MIME type -&gt; image/webp</p>
<p>🔷 Lossless Compression</p>
<p>🔷 Supports Animation</p>
<p>🔷 Supports Alpha Transparency</p>
<p>🔷 Used by Google, Bind, Facebook</p>
<h3 id="browser-support">Browser Support</h3>
<hr />
<p>✅ Chrome &gt;= v9 (2011 year)</p>
<p>✅ Firefox &gt;= v65 (2019 year)</p>
<p>✅ Opera &gt;= v11.5 (2011 year)</p>
<p>✅ Edge &gt;= v19 (2019 year)</p>
<p>✅ Safari iOS &gt;= v14.4 (2020 year)</p>
<p>✅ Safari* &gt;= v14 (2020 year) // Safari needs macOS 11 or later</p>
<p>⛔ Internet Explorer* (no native support)  // IE needs fallback/polyfill</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1628704102124/lVEhBqnPKs.jpeg" alt="Screenshot_14.jpg" /></p>
<h3 id="how-to-use">How To Use</h3>
<hr />
<p>1) Using <code>&lt;picture&gt;</code> + <code>&lt;img&gt;</code> tag</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">picture</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"img/original.webp"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/webp"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">source</span> <span class="hljs-attr">srcset</span>=<span class="hljs-string">"img/fallback.jpg"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/jpeg"</span>&gt;</span> 
  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/fallback.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Alt Text!"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">picture</span>&gt;</span>
</code></pre>
<p><strong>Note</strong> This option is recommended, the browser will select its own supported format</p>
<p>2) Using <code>&lt;img&gt;</code> tag only</p>
<pre><code>  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/fallback.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Alt Text!"</span>&gt;</span>
</code></pre><p><strong>Note</strong> Only choose this option if you don't care about old browsers (like Internet Explorer)</p>
<h3 id="how-to-create">How To Create</h3>
<hr />
<p>Google has created its own package for Linux, Windows and macOS with command-line tools that can be used to transform your existing images (PNG, GIF, JPG) to WEBP format</p>
<p>Link: https://developers.google.com/speed/webp/download</p>
<p>This package includes:</p>
<ul>
<li>The libwebp library, which can be used to add WebP encoding or decoding to your programs.</li>
<li>cwebp -- WebP encoder tool</li>
<li>dwebp -- WebP decoder tool</li>
<li>vwebp -- WebP file viewer</li>
<li>webpmux -- WebP muxing tool</li>
<li>gif2webp -- Tool for converting GIF images to WebP</li>
</ul>
<p><strong>Usage</strong> (Windows Example)</p>
<pre><code class="lang-terminal">cwebp.exe delivery_parcel.png -q 80 -o delivery_parcel.webp
</code></pre>
<ul>
<li><code>delivery_parcel.png</code> - source file</li>
<li><code>-q 80</code> - quality param set to 80%</li>
<li><code>-o delivery_parcel.webp</code> - output file</li>
</ul>
<p><strong> Online Converters </strong></p>
<ul>
<li>https://cloudconvert.com/webp-converter</li>
<li>https://convertio.co/png-webp/</li>
</ul>
<h3 id="cms-and-js-frameworks-support">CMS &amp; JS Frameworks Support</h3>
<hr />
<p><strong> CMS </strong></p>
<ul>
<li>Drupal: https://drupal.org/project/webp</li>
<li>Joomla: https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=webp</li>
<li>Magento: https://marketplace.magento.com/catalogsearch/result/?q=webp</li>
<li>WordPress: https://wordpress.org/plugins/search/convert+webp/</li>
</ul>
<p><strong> JS Frameworks</strong> (that has optimized image component)</p>
<ul>
<li>NextJS</li>
<li>Gatsby</li>
<li>Nuxt</li>
</ul>
<h3 id="cdn-automatic-conversion">CDN Automatic Conversion</h3>
<hr />
<p>Some CDNs support automatic next-gen conversion of your images, like Cloudflare (although it's not a free feature and comes with a PRO plan - $20/mo)</p>
<blockquote>
<p>Thanks for reading 👍</p>
<p>Follow me on Twitter - https://twitter.com/therceman</p>
</blockquote>
]]></content:encoded></item><item><title><![CDATA[How to create your own Domain name for Hashnode]]></title><description><![CDATA[This article will guide you through the setup & configuration of your custom Hashnode domain name.
Let's begin...
Domain registration on GoDaddy
1) You have to come up with your desired domain name 
Note: This is the hardest part of this tutorial 😅
...]]></description><link>https://blog.therceman.dev/how-to-create-your-own-domain-name-for-hashnode</link><guid isPermaLink="true">https://blog.therceman.dev/how-to-create-your-own-domain-name-for-hashnode</guid><category><![CDATA[Tutorial]]></category><category><![CDATA[Web Development]]></category><category><![CDATA[webdev]]></category><category><![CDATA[domain]]></category><category><![CDATA[Hashnode]]></category><dc:creator><![CDATA[Anton (therceman)]]></dc:creator><pubDate>Wed, 28 Jul 2021 11:10:14 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1627464354742/9j3e9EiUL.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>This article will guide you through the setup &amp; configuration of your custom Hashnode domain name.</p>
<p>Let's begin...</p>
<h1 id="domain-registration-on-godaddy">Domain registration on GoDaddy</h1>
<p>1) You have to come up with your desired domain name </p>
<p><strong>Note:</strong> This is the hardest part of this tutorial 😅</p>
<p>Let's imagine that you have chosen the following domain name <code>mynickname.dev</code></p>
<p>2) Go to https://godaddy.com, enter your domain and click Search</p>
<p>3) If the domain name is available - add it to your cart and hit <code>Continue to Cart</code></p>
<p> <a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627466700973/GeWKKGlDW.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627466700973/GeWKKGlDW.jpeg" alt="1A.jpg" /></a> </p>
<p>4) In the second section uncheck the box <code>Start your website for FREE</code></p>
<p><strong>Note</strong> Additionally you can enable <code>Full Domain Privacy &amp; Protection</code> (recommended)</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627466729290/P2olDq61-.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627466729290/P2olDq61-.jpeg" alt="2.jpg" /></a></p>
<p>5) On the final page you need to remove <code>Standard SSL</code> since Hashnode &amp; Cloudflare will set up their own life-free SSL certificates.</p>
<p><strong>Note</strong> You can change <code>2 Years</code> to <code>1 Year</code> - it will be cheaper to start.</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627466934157/MDI29iNrO.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627466934157/MDI29iNrO.jpeg" alt="3.jpg" /></a></p>
<p>6) Continue to checkout and pay for the domain</p>
<hr />
<h1 id="domain-registration-on-cloudflare">Domain registration on Cloudflare</h1>
<p>1) Navigate to https://www.cloudflare.com/ and create your account</p>
<p>After creating an account click on the section named <code>Protect your internet presence</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468156263/jaFNfa2-9.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468156263/jaFNfa2-9.jpeg" alt="3B.jpg" /></a></p>
<p>2) Enter your domain name and hit <code>Add site</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468208320/-BvNTarCz.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468208320/-BvNTarCz.jpeg" alt="3C.jpg" /></a></p>
<p>3) Select <code>Free</code> plan and hit <code>Continue</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468257247/ZOXQZ2CYW.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468257247/ZOXQZ2CYW.jpeg" alt="3D.jpg" /></a></p>
<p>4) Click on the newly created domain name</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468318919/Ud0QF3Hpb.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468318919/Ud0QF3Hpb.jpeg" alt="4B.jpg" /></a></p>
<p>5) Copy <code>Nameserver 1</code> and <code>Nameserver 2</code> URL's from the config page</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468493864/lYNsQgC-K.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468493864/lYNsQgC-K.jpeg" alt="5BB.jpg" /></a></p>
<hr />
<h1 id="changing-nameservers-on-godaddy">Changing nameservers on GoDaddy</h1>
<p>1) Navigate back to your GoDaddy account, go to the home page and click on your domain</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468623047/z-5hL_Hys.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468623047/z-5hL_Hys.jpeg" alt="6.jpg" /></a></p>
<p>2) Click on <code>DNS</code> and select <code>Manage Zones</code> from the dropdown</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468676340/L70LUbx3S.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468676340/L70LUbx3S.jpeg" alt="7.jpg" /></a></p>
<p>3) Search for your domain on the next page and click on it</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468703531/upfFJ63n8.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468703531/upfFJ63n8.jpeg" alt="8.jpg" /></a></p>
<p>4) In the <code>Nameservers</code> section click the <code>Change</code> button</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468737598/fBBFophca.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468737598/fBBFophca.jpeg" alt="9.jpg" /></a></p>
<p>5) Check <code>I'll use my own nameservers</code> and enter copied <code>Nameserver 1</code> and <code>Nameserver 2</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468819121/zGo8L0YsV.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468819121/zGo8L0YsV.jpeg" alt="10.jpg" /></a></p>
<p>6) After ~5-30 minutes you will receive an email that your domain is ready, you can go back to your Cloudflare dashboard and check the status</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468968105/x7zGDrVtU.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627468968105/x7zGDrVtU.jpeg" alt="11A.jpg" /></a></p>
<hr />
<h1 id="hashnode-setup-for-custom-domain">Hashnode setup for custom domain</h1>
<p>1) Go to your Hashnode account, click your profile image and select <code>Blog Dashboard</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469100184/gevO0uhjD.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469100184/gevO0uhjD.jpeg" alt="12.jpg" /></a></p>
<p>2) Scroll down and click the <code>Domain</code> button</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469128969/wZV7i4duW.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469128969/wZV7i4duW.jpeg" alt="13.jpg" /></a></p>
<p>3) Enter your domain name or <code>blog</code> subdomain for your domain and hit <code>Update</code></p>
<p><strong>Note</strong> In this example we are using the <code>blog</code> subdomain. e.g. <code>blog.mynickname.dev</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469386909/M17Fdr8LN.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469386909/M17Fdr8LN.jpeg" alt="14.jpg" /></a></p>
<p>4) On the next page with configurations, you need to copy the <code>Host name</code> &amp; <code>Value</code> fields.</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469474587/Z6kw7bEum.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469474587/Z6kw7bEum.jpeg" alt="15.jpg" /></a></p>
<hr />
<h1 id="cloudflare-final-setup-for-hashnode-domain">Cloudflare final setup for Hashnode domain</h1>
<p>1) Go to your Cloudflare account, select your domain and then click the <code>DNS</code> button</p>
<p>2) Click the <code>Add record</code> button, select <code>CNAME</code> as Type.</p>
<p>3) Put copied <code>Host name</code> value into <code>Name</code> field and <code>Value</code> value into <code>Target</code> field</p>
<p>4) Click on <code>Proxy status</code> to set it to gray and <code>Save</code></p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469762333/UxwcvktUI.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627469762333/UxwcvktUI.jpeg" alt="16.jpg" /></a></p>
<p>After ~ 5 - 10 minutes go back to your Hashnode account and check the status of your domain</p>
<p><a target="_blank" href="https://cdn.hashnode.com/res/hashnode/image/upload/v1627470133754/GWvfjsyQ8.jpeg"><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1627470133754/GWvfjsyQ8.jpeg" alt="Screenshot_1.jpg" /></a></p>
<p>If everything is OK - you can now use it</p>
<hr />
<p>Thank you for your time,
Have a nice day!</p>
<p>Best Regards,
Anton (therceman)</p>
<p><a target="_blank" href="https://twitter.com/therceman">Find me on Twitter</a></p>
]]></content:encoded></item></channel></rss>