Frontend Engineer @Zoom | Creating Impact on Pixels

Work • Mainak Chakrabortty | Frontend Engineer | Portfolio

<h2 class="rich-heading">A brief Note on URL shortner</h2>URL shorteners are everywhere, from links you share on Twitter to popular services like <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="http://bit.ly">bit.ly</a> or <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://tinyurl.com/app/">tiny url</a> But have you ever wondered how you could create a quick URL shortener for yourself ?<h2 class="rich-heading">Test case</h2>On a high level we can think of URL Shortener as passing the long the url through some encoder and in return we will get the short url. URL Shortener design revolves around 2 operations:<ol><li>Creating a short url using a long url.</li><li>Decoding short to long url.</li></ol>For Creating a short url we can consider alphabets a-z , A-Z and numeric 0–9, - , _ . So total we have 64 characters which we can use. For our case let’s consider creating 7 character urls. So with 64 characters and 7 char long url we will have 64^7 combinations available.So we have 64^7 ~ 281 trillion combinations.Considering 10000 requests per second. One Year Request = 10000 60 60 24 365 = 315360000000 Years with 281 trillion combination = 281 / 0.31536 ~ 891 years. So with 64 characters our system can create short a url for 891 years with average 10000 requests per second.We can use multiple encoders/algorithms for creating urls. Few are below:<ol><li>Base62</li><li>MD5</li><li>ZooKeeper</li></ol>Here I have used radix64 Algorithm to encode/ decode short URLS<h2 class="rich-heading">Radix64 Algorithm</h2>With radix64 we can create short urls (7 characters) easily with small algo.The first challenge is How can we make sure it always generate 7 chars code only ?This code always guarenteed to generate always 7 chars random digitsparseInt(Math.random() * 1000000000000)But how? log of 1000000000000 of base 64 always generate 7. Same logic when we check how many bits are there in any decimal number.Note: There is a possibility of collision with radix64 also but chances are less since we have taken large sample space.<h2 class="rich-heading">Platform setup to run the app</h2><ol><li>Install latest version of <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://nodejs.dev/download/">Node</a>. Note: Please install node 14+ some of the latest JS features may break in older version of node.</li><li>Install <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.postgresql.org/">postgres</a> as your RDBMS. For mac users please install it via homebrew (assuming you have already installed homebrew.) brew install postgresql</li><li>create a database as mentioned in the db.js file url_shortner_db and create a role for dbadmin. To change the databse-name / role / password please change db.js file accordingly.</li><li>To start the application type node server.js on your terminal.</li><li>To create a new link enter /api/links add body as json : { link:"<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://youtube.com">https://youtube.com</a>", code:"rTYgH5_" // optional:: user defined short code }</li><li>To get the actual URL enter short code e.g /rTYgH5_ it will redirect to youtube's site.</li></ol>

YAUS ( Yet another URL shortner )

<h2 class="rich-heading">Brief about RGB color Model</h2>The RGB color model is one of the most widely used color representation methods in Web applications. It use a color coordinate system with three primary colors:R(red), G(green), B(blue)Each primary color can take an intensity value ranging from 0(lowest) to 255(highest). Mixing these three primary colors at different intensity levels produces a variety of colors. The collection of all the colors obtained by such a linear combination of red, green and blue forms an unique color. e.g: RGB(255, 0 , 0) --&gt; Generates Red. For Details have a look on this <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://en.wikipedia.org/wiki/RGB_color_model">RGB color Model</a><h2 class="rich-heading">How to Play</h2>On loading of the application you will be given one set of RGB color combination on the header of the app something like RGB(233,45,60). You have to guess correct color among the alternate colors. The number of color options will vary depending on the which mode you are playing.There are two options:<ul><li>Easy Mode: 3 color options.</li><li>Hard Mode: 6 color options.</li></ul>The color sets and the RGB combination will always change clicking upon the NEW COLOR button. You can always reset the game by clicking PLAY AGAIN button at any mode.<h2 class="rich-heading">Win or Lose?</h2>On selecting the correct color all the colors will get change with correct color with the text saying Correct!. On selecting the wrong option the selected color will be invisible with the text Try Again