DEV Community: Akhil Arjun

Factory Pattern | JAVA Design Patterns

Akhil Arjun — Tue, 13 Jul 2021 15:22:56 +0000

In this tutorial (and more to come) we will talk about Design patterns most commonly used in Java. I have searched a lot of tutorials to understand what these mean, and coming as a non computer science background kid, everything seemed too alien! Every tutorial I read was either too filled with jargons or unapologetically lame cliche examples.
So I took it upon myself to create real-world scenarios and to use the these patterns as a solution for them, so that I could get a better grasp of these.

Feel free to correct me if I am wrong, coz these are my interpretations of the design patterns and how to use them.

Design Patterns

Design patterns are set of common ideas that can be used in a given condition to make sure the code-base is streamlined, re-usable and stable.

They act like blueprints of ideas that can be customized according the need of your project.

It is never a mandatory situation where we have to go for a particular design pattern when at times simple code would do the job.

According to the complexity of a design or scale of an application patterns are divided into three main categories

Creational Patterns
Structural Patterns
Behavioral Patterns

Today we will talk about one of the first Creational Pattern" i.e. Factory Pattern.

Factory Pattern (Creational Pattern)

Factory Pattern is used to create objects using an interface, where the end-user get's to decide what kind of object they want without actually worrying about creating them.

To make more sense of that, let's take a real world example:

Imagine a notification system, with multiple delivery types like E-Mail Notification, SMS Notification, Push Notification, etc.

Here all the systems are trying to do the same functionality of sending notification to the end-user. But they will have different implementation strategies to achieve this. Which is why I believe this will be a great candidate to explore Factory Pattern.

We will have a Notification interface built in which will be implemented by the individual types, to carry on with their functionality. And then we will create a factory that will return notification sub-types depending on the end-user selection.

Enough talk, lets dive into the code!

Notification Interface

public interface Notification {
    public void sendNotification(NotificationModel notif);
}

This is the most important class of our project. This acts as the blue-print of our entire system. This class will have al the methods required by the end user like sendMessage(), getType(), getMsgInfo(), etc.

The interface right now has only one method and that is sendNotification(NotificationModel notif). Where NotificationModel is a simple rudimentary POJO that will hold all the basic necessary information.

NotificationModel

public class NotificationModel {
    private String to;
    private String from;
    private String msg;

    // Getters and Setters Here ...

    public NotificationModel(String to, String from, String msg) {
        this.to = to;
        this.from = from;
        this.msg = msg;
    }

    @Override
    public String toString() {
        return msg + 
                  " is sent to " + 
                  to + 
                  " from " + 
                  from;
    }
}

Notification interface will be then implemented in different ways by the individual classes.

Let's see how we can do that.

EMailNotification

public class EMailNotification implements Notification {

    @Override
    public void sendNotification(NotificationModel notif) {
        System.out.println("E-Mail Notification is going out\n" + 
                     notif + 
                     "\n");

    }

}

Right now all that our EmailNotification class is doing, is printing some info to the console. Along with all the notification pojo information. We will keep it that way to remain focused on the tutorial here.

Similarly, we will create SMSNotification and PushNotification sub-calsses too

SMSNotification

public class SMSNotification implements Notification {

    @Override
    public void sendNotification(NotificationModel notif) {
        System.out.println("SMS Notification is going out\n" + 
                     notif + 
                     "\n");

    }

}

PushNotification

public class PushNotification implements Notification {

    @Override
    public void sendNotification(NotificationModel notif) {
        System.out.println("Push Notification is going out\n" + 
                     notif + 
                     "\n");

    }

}

We will also create a NotificationType enum so that there will be ease for the end-user while using the factory to build out Notification sub-classes.

NotificationType

public enum NotificationType {
    SMS, EMAIL, PUSH
}

Now finally, we will create our factory class, that will be responsible for spitting out necessary Notification class to the end-user.

NotificationFactory

public class NotificationFactory {
    public Notification createNotification(NotificationType type) {
        Notification notification;
        switch(type) {
        case EMAIL:
            notification = new EMailNotification();
            break;
        case PUSH:
            notification = new PushNotification();
            break;
        case SMS:
            default:
            notification = new SMSNotification();
            break;
        }
        return notification;
    }
}

Here, the user will pass a notification type which will determine which variant of the notification interface will be returned. And then using a unified method signature we can make the rest of implementation easy.

Main.java

public class Main {
    public static void main(String[] args) {
        NotificationModel smsNotif = 
                  new NotificationModel("1234567895", 
                    "1234567899", 
                    "Hey There!");
        Notification smsNotification = 
                new NotificationFactory()
                    .createNotification(NotificationType.SMS);

        NotificationModel emailNotif = 
                  new NotificationModel(
                    "to.test@gmail.com", 
                    "from.test@gmail.com", 
                    "Hey There!");
        Notification emailNotification = 
                new NotificationFactory()
                    .createNotification(NotificationType.EMAIL);

        NotificationModel pushNotif = 
                  new NotificationModel("VPA12345", 
                    "VPA90585749", 
                    "Hey There!");
        Notification pushNotification = 
                new NotificationFactory()
                    .createNotification(NotificationType.PUSH);

        smsNotification.sendNotification(smsNotif);
        emailNotification.sendNotification(emailNotif);
        pushNotification.sendNotification(pushNotif);
    }
}

When we run this program this is the output we recieve in the console

SMS Notification is going out
Hey There! is sent to 1234567895 from 1234567899

E-Mail Notification is going out
Hey There! is sent to to.test@gmail.com from from.test@gmail.com

Push Notification is going out
Hey There! is sent to VPA12345 from VPA90585749

Note: when we look close to this example, we can understand this is nothing but an interface and its implementation strategy. And we use a class called factory to get the required instances. So, why go through all this pain?

We could let the customer decide the sub-class and call the required constructor, right?

Well, this could be the case, but as the application grows and number of types of notification grows, it becomes more and more complex for the end-user to keep a track. So the factory methodology becomes easier and abstract enough for the end-user to call our API's.

As our application grows, and becomes more and more complex. Repetitive patterns start emerging of problems and bottlenecks and we can use these blueprints of design patterns to solve those.

Hope, you all had a great time going through the article. Do let me know if it was helpful.

All the code we will discuss in this series will also be present in my github project.

Factory Pattern - Github

Base Design Pattern Project - Github

My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

Four subtle Text-Effects to spice up your web-site

Akhil Arjun — Mon, 10 Aug 2020 09:44:58 +0000

Happy Monday everyone! Let's learn four subtle CSS text effects that can add some dynamic to your website. ✨✨

Live Demo

So without further ado, let's begin

1. Vibrating Text on hover ⚡

This is a subtle effect where we can vibrate the individual characters when they are hovered on.

Code



.vibration span{
    transition: all 500ms;
    color: rgba(255, 255, 255, 0.8);
    display: inline-block;
    margin-right: 10px;
    text-shadow: 1px 2px 3px #999;
}
.vibration span:hover{
    filter: blur(3px);
    animation: vibrate 50ms linear infinite forwards;
}
@keyframes vibrate{
    0% {
        transform: translateX(-1px) translateY(1px);
    }
    100% {
        transform: translateX(1px) translateY(-2px);
    }
}

We achieve this effect using the transform attribute to move the character across the y-axis and x-axis and loop the animation whenever hovered on.

We also add a small amount of blur to the character to emphasize the motion effect.

One important thing to note here is we have to make sure the span element has a display property of inline-block. Because transforms only work on elements that have a block display.

Codepen

2. Waves inside a text 🌊

In this effect, we use an experimental feature of chrome to add a stroke effect to the text. And then use clipping path property to create a wave effect.

Code



<section class="waves-demo">
        <div class="waves" data-word="WAVES">
            WAVES
        </div>
</section>



.waves {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    position: relative;
}
.waves:after{
    content: attr(data-word);
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    animation: waves 2s ease-in-out infinite forwards;
}
@keyframes waves{
    0%, 100% {
        clip-path: polygon(0 66%, 11% 59%, 18% 51%, 26% 46%, 35% 41%, 48% 44%, 55% 54%, 63% 63%, 76% 60%, 82% 50%, 92% 48%, 100% 53%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0 66%, 8% 74%, 17% 77%, 28% 70%, 35% 57%, 48% 44%, 56% 39%, 69% 41%, 75% 47%, 84% 60%, 92% 61%, 100% 53%, 100% 100%, 0% 100%);
    }
}

Here, we use a -WebKit property called text-stroke to add a stroke effect to the text.

And then we use pseudo after element to fill in with white color.

And then we animate the clipping path property of the pseudo-element to form the wave effect.

For easy clip-path effects use this tool Clippy to create custom clipping paths. Please find below the gif to understand how I created the wave effect.

How to use Clippy

Codepen

3. Glowing Text 🌟

Code



.glow span {
    color: #fff;
    transition: all 300ms;
}
.glow span:hover {
    text-shadow: 0 0 10px #0698a5,
                 0 0 30px #0698a5,
                 0 0 80px #0698a5,
                 0 0 120px #0698a5,
                 0 0 200px #0698a5;
}

For this effect, we use stacked text-shadow to create a glow effect.

We can use multiple values for text-shadow to stack on top of each other to create other stunning effects.

Here we kept on gradually increasing the blur-radius of the shadow and gave it a color of bright blue. Which accounts for the neon-blue glow

Codepen

4. Text Reveal Effect 🙈

Code



.reveal {
  color: #fff;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.reveal span {
  display: inline-block;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.reveal span:after {
  content: 'can stop it';
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  bottom: -10px;
  left: 50%;
  width: 200px;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) scale(0);
  transition: all 400ms;
}

.reveal:hover {
  color: rgba(255, 255, 255, 0.1);
}

.reveal:hover span {
  transform: scale(2);
  color: #fff;
  margin: 0 45px;
}

.reveal:hover span:after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

Again for this effect, we use the pseudo :after selector to add the additional text.

And then we use the transform property to scale the character on hover and add a little margin too, to enforce the pushing away effect.

Codepen

I hope you all learned something here. And if you have any doubts about any of the techniques do let me know.

My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

Cheers 🍻
< Akhil />

All the images in live demo are sourced from Pexels

One Line - Sticky Header using CSS

Akhil Arjun — Tue, 04 Aug 2020 12:44:50 +0000

How many times have we come across a situation where you want the header of a website to remain on top of everything even if you scroll past it.

Or, to have a navigation bar that is beneath a hero-banner to stick to the top once we scroll past it.

Or even for a navigation bar to stay at the bottom of a mobile website.

We have been in this sticky situation (pun intended) over and over. The time has come we solve this once and for all.

The best part is, we will do it in one-line 😎

CSS



nav {
    position: sticky; top: 0;
}

I know what you are thinking, that is two lines! OK I admit I got carried away with the one-line heading, but I assure you it is still awesome 😍

Let's see some demo's and understand how it works

Demo 1: The nav-bar that just sticks

Let's try and understand what is happening here.

The markup I have used is pretty simple

HTML



<body>
  <nav>
    <ul>
      <li><a href="#first">First</a></li>
      <li><a href="#second">Second</a></li>
      <li><a href="#third">Third</a></li>
    </ul>
  </nav>
  <section id="first">First Section</section>
  <section id="second">Second Section</section>
  <section id="third">Third Section</section>
</body>

CSS



html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body nav {
  position: sticky;
  top: 0;
}
ul {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
}
li {
  list-style: none;
  margin-right: 20px;
  font-size: 25px;
  font-weight: bold;
}
li a {
  text-decoration: none;
  color: #1ac;
}
section {
  height: 100vh;
  display: grid;
  place-items: center;
  font-size: 50px;
  font-weight: bold;
  background: #eee;
}

Of all that mark-up the most important two lines where all the magic happens is



...
body nav{
    position: sticky;
    top: 0;
}
...

What it tells the browser is to stick this element to the viewport when its top position value is 0;

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).

Now that we understood how it works let us see two more use-cases of sticky.

Demo 2: Nav-bar below a hero banner.

Here, the nav-bar is below the hero banner. So it acts relative until its offset from the top is not 0. The moment the offset value reaches 0 it sticks to the top of the viewport.

Demo 3: Application with a sticky header and footer

Notice how we have styled footer element.



footer {
    ...
    position: sticky;
    bottom: 0;
    ...
}

There you go! We are now officially sticky! 🐱‍👤✌

Do you know what else is sticky? Coffee spilled on a table! My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

Keep Hacking ☕

References

Dark Mode - Unmistified! 🐱‍👤

Akhil Arjun — Mon, 03 Aug 2020 15:07:32 +0000

Disclaimer!
This is going to be a long post. I will try and assimilate all the resources and information I have on a proper dark mode implementation on your website.

CSS Filter Hack!

One line - Dark Mode using CSS

Akhil Arjun ・ Aug 3 '20

#beginners #css #webdev #tutorial

I have explained this setup in my previous post. And I should repeat, it is only a hack and not a proper flawless dark theme implementation.

JS Implementation

So now we know, how to make an awesome dark mode using CSS. For the above-mentioned implementation, the javascript idea is very straightforward.



const html = document.getElementsByTagName('html')[0];
const toggleTheme = (theme) => {
    html.dataset.theme = theme;
}

And now all you have to do is call the toggleTheme() method from UI with dark and light values respectively.

Native Dark/ Light mode ?

Am I telling you, that you can detect system preference for light/ dark mode from CSS or js?

Absolutely I am!

Say hello to the sassy new Media Queries!



<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // In this case, light.css will be downloaded with `highest` priority.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">'
    );
  }
</script>
<!--
  Conditionally either load the light or the dark stylesheet. The matching file
  will be downloaded with `highest`, the non-matching file with `lowest`
  priority. If the browser doesn't support `prefers-color-scheme`, the media
  query is unknown and the files are downloaded with `lowest` priority (but
  above I already force `highest` priority for my default light experience).
-->
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

What the above code does is, it checks for any preference set by the user regarding light mode/ dark mode. And according to this preference, the browser downloads appropriate CSS files.

One thing to note is even though the system preference would be for the dark mode, the browser does download the other CSS as well but with the lowest priority.

Now, what if we want to do all of it in javascript?

dynamically check what is the preferred color scheme
override theme in the application if the user wants to
remember that decision by the user using localStorage

I would say totally doable!

Enter Javascript magic!

Self-advertisement Warning Rolling In 😎😁

This is a library I built using vanilla js which does exactly what we have been discussing. And reducing your workload to just two lines

Include the js file



<script src="https://cdn.jsdelivr.net/gh/akhilarjun/tinylibs@latest/themejs/theme.min.js" onload="setupThemeIcon()"></script>

And an image with id theme-selector and onclick function as switchTheme(this)



<img src="./sun.svg" 
    data-light-src="./sun.svg" 
    data-dark-src="./moon.svg"
    alt="light theme" 
    id="theme-selector"
    onclick="switchTheme(this)">

data-light-src and data-dark-src if provided will be used to swap between icons while changing the theme attribute of Html tag.

Mic Drop Time 🎤

The library will even auto-detect the system preference change and switch themes between dark and light.

And we will try doing this using chrome dev tools.

That's it for today guys. Cheers! Its Coffee time.
My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

References

One line - Dark Mode using CSS

Akhil Arjun — Mon, 03 Aug 2020 06:57:04 +0000

This is an absolute no-brainer method of converting an already developed website to support dark mode.

Without further ado let's get into it! 👾

Consider this news application for example

Now add the magic CSS



html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

Voila! you are done ✌

Dark mode achieved

Explanation

Now let's try and understand what is going on under the hood.

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. (Reference: MDN Web Docs)

For this dark mode, we would be using two filters namely invert and hue-rotate

invert filter helps to invert the color scheme of the application. So, black becomes white and white becomes black and similarly for all the colors.

hue-rotate filter helps us with all the other colors that are not black and white. Rotating Hue by 180 degrees, we make sure the color theme of the application does not change but just attenuate the colors of it.

The only catch with this method is, it will also invert all the images in your application. So we will add the same rule to all images to reverse the effect.



html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

and we will also add a transition to the HTML element to make sure the transition does not become flashy!



html {
    transition: color 300ms, background-color 300ms;
}

Result:

There we have our Dark mode implemented. Great job guys!

My days are fueled with coffees and only coffees. So I know, you know what we all should do 🤞

CSS Art: Let's create a Cute Robot (Beginner)

Akhil Arjun — Fri, 31 Jul 2020 15:32:56 +0000

This will be a three-part series where we will try and learn how to create 3 Cute Robots with just CSS.

For this first part, we will try and create this simple cute one which is designed by Irina Mir. Send her some love ❤

Now, CSS art can seem quite intimidating in the beginning, but it all comes together when we look at all of these as simple shapes and colors. Through-out this series I will try and explain my thought process while re-creating these beautiful little bots.

Step 1

Let's begin with a simple one. As a first step lets extract all the colors used in this image



//cute-robot-v1.scss
$background: #ffffff;
$outline-color: #195272;
$face-color: #e1f4f0;
$tongue-color: #f9bbbb;
$inner-bg: #cedbdd;

For extracting colors from an image we have multiple options.
I used the chrome-developer-tools eye-dropper tool to get color codes. Or we could also use online color extractor like Tiny Eye

Step 2

Now that is done, let us start breaking down it into smaller designable chunks

Background circle
Ears
Head
Face
Eyes
Mouth
Body

Let's put that down in HTML



<div class="cute-robot-v1">
    <div class="circle-bg">
        <div class="robot-ear left"></div>
        <div class="robot-head">
            <div class="robot-face">
                <div class="eyes left"></div>
                <div class="eyes right"></div>
                <div class="mouth"></div>
            </div>
        </div>
        <div class="robot-ear right"></div>
        <div class="robot-body"></div>
    </div>
</div>

Step 3

Now, we will start styling those small individual components and give life to our bot.



//cute-robot-v1.scss
.cute-robot-v1{
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;

    * {
        box-sizing: border-box;
    }

    .circle-bg {
        background: $inner-bg;
        width: 250px;
        height: 250px;
        border-radius: 100%;
        border: 8px solid $outline-color;
        position: relative;
    }
}

There is nothing fancy happening as of now.

We gave our container height of 600px and set its display property to flex. Also, set the justify-content and align-items to center. This is to make sure everything we put in it will be centered both horizontally and vertically.

And, we also created the style for our background circle, by giving it a height and width and making it a circle by specifying border-radius: 100%.

One another important thing to notice here is the position: relative property. This makes sure everything else we put inside of the circle will be positioned relative to the circle.

This is our output so far

Step 4

Now, to the interesting bit. We will start with the head first so that we can position the ears relative to it.



.robot-head {
    height: 200px;
    width: 200px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    border: 8px solid $outline-color;
    border-radius: 85px/ 60px;
    background: $background;
    z-index: 4;
}

Since the head is absolutely positioned we have to do a small hack to make sure it is centered horizontally. And that is what we do with left: 50%; transform: translateX(-50%);.

Here, left: 50% makes sure the object starts from the middle but that offsets our robot head to the right. So to rectify the offset we do transform: translateX(-50%) which offsets the head back 50% of its width thus making it perfectly centered.

One other interesting thing to notice here is the non-conventional border-radius property.



border-radius: 85px/ 65px;
// can also be interpreted as
border-top-left-radius: 85px 65px;
border-top-right-radius: 85px 65px;
border-bottom-right-radius: 85px 65px;
border-bottom-left-radius: 85px 65px;

Step 5

Now we will add the antenna to the head of the bot. I made that choice specifically to not consider antenna as a separate body part but just as an extension to the head itself. But feel free to have it as a different element.

So, since we did not add the antenna as a different element. We will style it using pseudo-selectors :after and :before and attach it to the robot-head element.



.robot-head {
  ..
  &:after {
    content: "";
    position: absolute;
    top: -30px;
    height: 30px;
    width: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: $outline-color;
  }
  &:before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 20px;
    background: $inner-bg;
    border: 8px solid $outline-color;
    border-radius: 100%;
  }
}

Let us also go ahead and style the eyes and mouth of the robot



.robot-face {
    height: 120px;
    width: 160px;
    background: $face-color;
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid $outline-color;
    border-radius: 45px;

    .eyes {
        height: 20px;
        width: 20px;
        background: $outline-color;
        border-radius: 100%;
        position: absolute;
        top: 40px;

        &.left {
            left: 30px;
        }
        &.right {
            right: 30px;
        }
    }

    .mouth {
        height: 45px;
        width: 45px;
        border-radius: 100%;
        border: 8px solid transparent;
        border-bottom-color: $outline-color;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }
}

All the elements are positioned absolutely to its parent element and pushed to its right spot using top and left property.

The result so far

Yeay! We are getting there 🕺🎉

Step 6

Now let's give our robot two ears and a body.



.circle-bg{
  ..
  &:after {
    content: "";
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 100%;
    top: -3px;
    left: 0;
    border-radius: 100%;
    border-bottom: 10px solid $outline-color;
  }

  .robot-ear {
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background: $background;
    border: 8px solid $outline-color;
    z-index: 3;
    top: 30px;

    &.left {
        left: -20px;
    }
    &.right {
        right: -20px;
    }
  }

  .robot-body {
    height: 50px;
    width: 100px;
    border: 8px solid $outline-color;
    background: $background;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px 25px 30px 30px;
  }

Notice that extra :after pseudo selector we added to circle-bg. It is to make sure we add an overlay on the robot body to make it look like it is inside the circle. It is a complete overkill but, well why not! 😎

There, we are done with our first cute robot!

As a challenge try a small interaction to the Bot when you hover the cursor on him, to make him smile like that in the original dribble shot!

The complete code (with the challenge solution):

Stay tuned for more cute robots 🤖

Let me know in the comments if you have any doubts.

I hope you all enjoyed this tutorial.

Lamest javascript library ever! 🙌

Akhil Arjun — Wed, 29 Jul 2020 14:35:26 +0000

This is my first post, and I chose that title for a very specific purpose.

I always believed in learning by practice and for the same reason, I built a lot of redundant small libraries which were basically rip-offs.

One of such library is detectoldbrowsers.js. Which does exactly what the name suggests. It lets you know if you are running on an old browser and allows you to take a procedural decision.

All you have to do is

if(!isBrowserOld()){
  // Do your new browser thingy!
}

The library was only a few lines long and had a size of 448B when minified and gzipped.

But, even after all of this, I ended up using that library in two of my projects and it served the purpose. It still performs flawlessly and will forever be part of those projects and be my contribution 😉.

I developed this small library around June 2016 and revisited it this year. I had learned a lot more than I knew back in the time so, I figured why not upgrade this small guy.

So I went ahead created a new landing page and hosted the library using jsdelivr.

https://cdn.jsdelivr.net/gh/akhilarjun/detectOldBrowser.js@v1.0/js/detectOldBrowser.min.js

The moral here is no matter how small the effort looks like, how in-consequential it feels like there is always something to learn from it.

End of the day it isn't the lamest library ever, right? 🤞