Forem: Vineet Kalghatgi

Timeline animation with HTML, CSS and JavaScript

Vineet Kalghatgi — Sun, 28 Jan 2024 01:04:29 +0000

A timeline animation is useful when you want to display information with respect to the passage of time. For instance, you can use it in a portfolio website to show your journey as a professional:

2020 - Graduated from XYZ University

2021 - Joined a brilliant startup

2023 - Promoted to Senior Developer

Or you can use it in a landing page to describe an organization's history and culture:

1994 - Amazon was founded in a garage

1997 - Amazon IPOs at $18.00/share

1998 - Expands beyond books

...you get the idea.

HTML

A container div that contains:

The central vertical line
Cards positioned to the right
Cards positioned to the left

<div class="container" id="container">
        <div class="line"></div>
        <div class='left card'>
            <p><b>2023</b></p>
            <p>Add your text here</p>
        </div>
        <div class='right card'>
            <p><b>2022</b></p>
            <p>Add your text here</p>
        </div>
        <div class='left card'>
            <p><b>2021</b></p>
            <p>Add your text here</p>
        </div>
        <div class='right card'>
            <p><b>2020</b></p>
            <p>Add your text here</p>
        </div>
        <div class='left card'>
            <p><b>2020</b></p>
            <p>Add your text here</p>
        </div>
    </div>

CSS

We shall keep the line centrally positioned relative to the container div by using the relative and position:absolute classes. For the cards, the container will behave as a column flexbox using the flex-direction:column property.

.container {
    margin: 50px auto 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-x: visible;
  }

.line {
    width: 4px;
    background-color: blue;
    height: 100%;
    position: absolute;
    left: 50%;
}

The card class applies a simple border and sets the initial opacity to 0. We will use the transition property to fade it into full opacity and to move it towards the center smoothly.

/* opacity 0 because it should start off invisible */
.card {
    transition: 0.3s;
    border-radius: 10px;
    min-height: 100px;
    width: 250px;
    opacity: 0;
    position: relative;
    border: 5px solid blue;
    transition: all 2s ease;
}

We will need a left and right class that controls the positioning of the card element. These classes have an initial transform of 100% and -100% since we want them to start moving in from the left or right. Using these classes as selectors, we'll display arrow heads with the ::after pseudo elements.

.right {
    padding: 30px;
    margin-left: 400px;
    transform: translateX(100%);
}

.left {
    padding: 30px;
    margin-right: 400px;
    transform: translateX(-100%);
}

/* Arrow heads */
.card.left::after {
    content: '';
    position: absolute;
    right: 0;
    top: 80%;
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-left-color: blue;
    border-right: 0;
    margin-top: -22px;
    margin-right: -22px;
}

.card.right::after {
    content: '';
    position: absolute;
    left: 0;
    top: 80%;
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-right-color: blue;
    border-radius: 10px;
    border-left: 0;
    margin-top: -22px;
    margin-left: -22px;
}

JavaScript

The IntersectionObserver API will allow us to fire a callback whenever the cards come into the view of the screen. This callback will kick off the animation of fading the opacity back to 1 and moving the cards in from the left or right by setting the transform to 0.

function initObserver() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.transform = "translateX(0)"
                entry.target.style.opacity = 1
            }
        })
    }, {
        threshold: 0.8 // Fire the callback once 80% of the card is visible
    })

    let cards = document.querySelectorAll('.card')

    cards.forEach(card => {
        observer.observe(card)
    })
}

//Attach the interesection observer after the window loads
window.onload = initObserver

Mobile Responsiveness

We can add a couple of media queries in our CSS file for smaller screens to

Reduce the width of the card
Reduce the margins
Bring the initial position of the cards closer to the center
Reduce the font size

@media only screen and (max-width: 768px) {
    /* left to right doesn't work on some smaller screens so 
          both cards will have right -> left animation */

    .left {
      transform: translateX(20%);
    }

    .right {
      transform: translateX(20%);
    }

    .card {
      max-width: 25vw;
    }

    .left {
      margin-right: 300px;
      padding: 20px;
    }

    .right {
      margin-left: 300px;
      padding: 15px;
    }
  }

  @media only screen and (max-width: 600px) {
    .card {
      max-width: 19vw;
    }

    .card p {
      font-size: 7px;
    }

    .left {
      margin-right: 200px;
      padding: 20px;
    }

    .right {
      margin-left: 200px;
      padding: 15px;
    }
  }

And that's it! You've got yourself a simple timeline animation that doesn't use any external dependencies. Here's a working demo:

Open Source Restaurant Menus with Next.js, Express.js and MongoDB

Vineet Kalghatgi — Mon, 22 Jan 2024 01:58:46 +0000

Check out the live app here

Motivation

A bulk of the adopters of digital menus since the pandemic were full-service operators, with 54% of casual dining, 50% of fine dining and 48% of family dining restaurants shifting their menus online, according to the National Restaurant Association’s 2021 State of the Restaurant Industry report. Forty percent of operators also added a contactless or mobile payment option last year, according to the NRA.

It’s not likely that operators are going to shift back. Forty-seven percent of owners or managers that already offer digital menus through a URL or online platform said they are “very likely” to switch to all digital menus, according to Square’s survey.
-- 88% of restaurants considering swapping to digital menus, survey says

However, most of the SaaS models for digital menus today are pay-to-use ranging from $15/month to $100/month for their lowest tiers, granted the expensive ones offer more end-to-end features.

I hypothesize that some, if not most, restaurants would be satisfied with a simple mapping of their physical paper menus into a read-only digital version. So, I built an open-source app to solve this.

Live menu example

The main features

Users, the target demographic of whom are "Restaurant owners", can:

Create/Delete/Search Menus

Update them by
- Adding categories like "Appetizers", "Main Course" etc.
- Adding dishes (with a price, description, and title)
- Updating the Restaurant title

Generate and share a public link for each menu created
Generate a QR code for the aforementioned public link

Authentication

User authentication is handled by Google Firebase. The app currently implements:

Signup/Login with an email, password combo
Anonymous guest logins
Account deletion
Password recovery via Email
Email verification on signup

Frontend

I used Next.js + React. The codebase is currently all Javascript. I'm planning on migrating it to Typescript soon.

Middleware

The RESTful APIs are served by a Node.js + Express.js server. The server performs CRUD operations on a MongoDB Atlas instance. Object modeling with Mongoose Js helped simplify things.

Database

The database is a MongoDB instance running on the MongoDB Atlas SaaS. A single collection maps each user with their respective menu information.

Source Code

Upcoming Features

Images for dishes (probably on a free tier AWS S3 account)
Toggle to make menus private/public
Custom fonts
Custom banner backgrounds
User-provided logos as opposed to Text titles
Custom color palettes
More sign-in options like Google, Facebook, etc.

Let me know what you think, and thanks for reading!

You NEED to know awk

Vineet Kalghatgi — Thu, 14 Oct 2021 20:11:11 +0000

In Brief

awk is a powerfull command line tool found included in all modern GNU/linux distributions. It is often excluded from beginner level Linux tutorials, where more fundamental commands like cd , pwd, ls etc are given more priority, and rightfully so. One must have a good grasp on the basic commmand line tools in order to harness the full power of awk.

awk in essence is a pattern scanning and processing language, emphasis on the language part because awk possesses functionality akin to most mainstream programming languages.

awk loves tabulated data. So to begin with, you'll need a piece of text represented as columns delimited by some common character. You see this pattern often in shells, for instance, the ls -l command that prints file information delimited by a space :

ls -l                                                                                                                              
total 24                                                                                                                                               
lrwxrwxrwx   1 root   root       7 Sep  7 07:45 bin -> usr/bin                                                                                         
drwxr-xr-x   1 root   root       0 Apr 15  2020 boot                                                                                                   
drwxr-xr-x   9 root   root     480 Sep  8 13:34 dev                                                                                                    
drwxr-xr-x   1 root   root    1902 Sep  7 20:29 etc

However, for the sake of demonstration, let us use the following sample.txt to illustrate awk's capabilities.

emp_id;emp_name;emp_sex;emp_salary;emp_yoj;
1;john;male;3000;2014
2;sarah;female;2500;2018
3;lily;female;5000;2012
4;jack;male;3000;2014
5;mark;male;2500;2017

awk is like any other UNIX command, i.e it takes in options and arguments, however, its power lies in a script argument that can either be included inline or as an external file with a .awk extension. An awk script has the following basic structure:

BEGIN {commands}
/pattern1/ {commands}
/pattern2/ {commands}
...
/patternN/ {commands}
END {commands}

In essence, awk loops through each row of the input file and executes commands based on conditions. The patterns correspond to regex patterns that you can use to distinguish different rows. The default pattern matches every row.

Commands following the BEGIN keyword are executed before the loop, and the ones following the END keyword, after.
Note: the numbering of the pattern has no correlation whatsoever with the row number

Alright! Lets process some text

1. Print only the name and salary of all employees

awk 'BEGIN {FS = ";"}
{print $2 " " $4}' test.txt

emp_name emp_salary
john 3000
sarah 2500
lily 5000
jack 3000
mark 2500

The string argument, marked by single quotes, is the awk script mentioned before. Here's the rundown of its working step by step:

Set the delimiter to ";" using the predefined FS (Field Seperator) variable before processing any rows.
For every row, print the 3rd and 4th column separated by a space.

2. Print all the male names.

awk ' BEGIN { FS = ";" }
{if($3 == "male") print $2;}' test.txt

john
jack
mark

This script basically instructs awk to :

Set the delimiter to ";" before processing any rows.
For every row, check if the third column ($3) is "male", if true then print the second column ($2) i.e the name.

Note: A command without a pattern applies to every row

3. Derive the average salary.

awk ' BEGIN { FS = ";"; sum = 0; }
{if (NR > 1) sum += $4;}
END{
    total = NR - 1;
    avg = sum / total;
    print avg;
}' test.txt

3200

FS is one of many variables have been predefined. In this example, however, we will be defining a couple custom variables. So here is the rundown for this command:

Before processing any rows, set the delimiter to ";" and a custom variable sum to 0.
For every row, if the row number is greater than one, increment the sum variable. Note: here the NR variable is predefined and it gives us the row number
At the end, after all rows have been processed, set a variable total to NR - 1, calculate average as sum / total and print it.

As you can see, these three examples encapsulate the sheer power and versatility of the awk command. It supports features like variables, if else blocks and arithmetic evaluation as seen above, all of which you can find in full fledged programming languages.

But this is just the tip of the iceberg, awk even supports arrays, for loops, processing multiple files with just one script, and much more. Therefore awk is more than just a convenient command line tool, it is a powerful language in in of itself and hopefully, this inspired you to learn more about it.

The Impostor Syndrome

Vineet Kalghatgi — Fri, 18 Sep 2020 14:28:50 +0000

Developers are viewed by the society as mystical beings performing witchcraft on anything with a keyboard. If you are a developer or even remotely associated with computers, Movie and TV-studios will call you by that magic 6-letter word HACKER.

You may be depicted as someone who can :

Build a GUI interface using visual basic to track the killers IP address
Get the power back on from an outage by just typing on your keyboard
Go full on tag team with a fellow HACKER to type on the same keyboard at the same time to achieve Turbo Hacking.

Well all jokes aside, my point is that programmers are perceived as being extremely smart and when we find ourselves googling solutions or copy pasting snippets, its easy to fall into the trap of feeling like an impostor.

I would argue that just the mere action of looking up solutions does not make you any less of a developer, what is important is that you understand the structure and logical flow of whatever you're building. When you achieve that, everything else is just minor details.

If you think about it, googling solutions is no different than going through a book to find the answers, only you are doing it with a powerful search engine. In fact, it is more impressive that developers as a whole generally do not mug up solutions, rather they always figure it out albeit with some help from StackOverflow.

So if you ever find yourself feeling like an impostor or someone who does not know enough, know that as a developer, you have developed or are developing an implicit skill of understanding solutions rather than remembering them. Therefore it is fine if you forget how to read files in Java, or if its arr.size() or arr.length, whats important is the bigger picture of what you're trying to solve.

I understand that a deeper conversation can be had on this topic, but this was just my lighthearted take. So in closing I will leave this xkcd panel:

Why I switched to Linux full time

Vineet Kalghatgi — Wed, 16 Sep 2020 19:01:06 +0000

My current homescreen setup

I have a 4 year old HP pavilion which until recently, was craving for an upgrade. I had also been wanting to get rid of Windows for the longest time, so killing two birds with one stone, I replaced the existing HDD with a new SSD and performed a clean install of Pop_os! developed by System76 on it (No dual booting). I now use the HDD as an external USB drive with the help of a case, eliminating any worry of data backup.

So why did I not just reinstall Windows on the new SSD ? Well let me explain

1. Linux is completely free.

This holds good not only for the operating system and the kernel, but also for all the software that come bundled with it. When I first bought my laptop, I realized that it did not come with the MS office suite free which means critical functionality like editing documents, excel sheets etc were locked.

I had to turn to open sourced alternatives like LibreOffice writer, which is coincidentally the default document editing application on most Linux distributions. Not to mention the plethora of paid/proprietary software on windows including Antivirus (Which you probably wont need for Linux as malware affecting Linux is rare, probably owing to its unpopularity currently).

2. Pop_os! gets out of your way.

Gnome multitasking with virtual desktops

While the Gnome desktop environment, the default for pop OS, has its fair share of criticisms, it does hold true to its values of getting out of your way to get work done. Gnome has focused on building a very minimal yet functional desktop environment which is intuitive enough for the average user. The layout may be a bit jarring due its departure from the traditional windows design, but once you start using it, you’ll learn to understand that its almost smartphone-esque in its look and feel.

If the default design and working is not up to your liking, then you can tweak and customize it however you want. You can get it to behave like MacOS or Windows complete with a start menu. This is one of the advantages of having a completely open sourced operating system, is that you have complete freedom over its customization. Think of it as downloading new launchers/icon-packs/skins on your android phone. You can have it look however you want if you are willing to put in some time for personalisation.

Notifications panel.

Notifications are located at the center of the top bar and applications are accessed through an application drawer.

Pop OS, as of its 20.04 release, has also released a window tiling manager that is baked into the operating system by default. This allows you to tile and organize all open windows at the click of a button which is extremely useful when multitasking.

It provides a comprehensive list of keyboard shortcuts that are easy to pick up and dare I say even quite intuitive. Here are some shortcuts that I use everyday (while some are similar to windows shortcuts, it is worth noting that the default gnome is built in such a way that it encourages their use better than windows in my opinion) :

super : Opens recent applications view.  
super + tab : cycles through open applications.

When in tiling mode  
super + g : toggle floating mode.  
super + arrow key : toggle between active windows.  
super + O : change window orientation.

These were just a few, however you can find the rest on System76’s website

Pop OS shortcuts

3. Linux is very powerful and secure

It should not come as a surprise that the kernel used by most servers as well as all phones using android is much more powerful and capable than Windows.

Linux supports all the major programming languages ( C/C++, Python, Java, JavaScript etc) in a much more developer friendly way and possesses a much more powerful and versatile terminal than windows. Since Linux was built with servers and server administrators in mind, one can navigate the entire operating system using just the terminal. Something which would be an immense pain in the neck in Windows.

The terminal might seem daunting for someone who has never used it before, but the beauty of user friendly distributions like Pop OS is that you don’t have to! You can navigate and control the OS through the GUI like you would in windows or MacOS. However, that doesn’t mean that you can’t benefit from at least trying the terminal out. So here are some basic commands that can help boost your productivity :

cd - used to change directories  
ls - list directory contents  
pwd - print name of current/working directory  
rm - remove files or directories  
mkdir - make directories  
rmdir - remove empty directories  
clear - clear the terminal screen  
touch - change file timestamps ( Can be used to create a new file)  
kill - send a signal to a process ( provide the PID as an argument)  
top - display Linux processes (task manager)

4. Linux is lightweight

Compared to Windows, Linux uses far less memory on boot and that results in a much more responsive system, even when several applications are open and/or running in the background.

Memory usage with terminal and screenshot app open

A lot of my development, especially in my most recent internship, involved using an android emulator which takes upto 2gb of your ram since its basically a virtual machine. This coupled with windows’ almost 4gb ram usage on boot was a recipe for disaster. Linux not only overcomes this but also provides an option to make it an even better experience. The Android Emulator can use hardware acceleration features to improve performance, sometimes drastically.

5. Package managers are way more organised that .exes and .msis

The main way of installing software on Linux is through package managers. Think of package managers as an app store like the Google play store or Apple’s app store except all the applications are free and so are the updates. You can install/update/remove/purge applications with just a single line of command on the terminal and not have to worry about installers, exe files etc.

It is also much more secure than windows as you are required to enter the lock password anytime you download/install or uninstall a new piece of software. This way is certainly better than displaying a pop up saying “Do you want to allow this app to make changes to your device ?”.

So instead of scouring countless websites to find that one 64_bit.exe all you need to do is sudo apt install anything you need.

6. Linux is developer friendly

This is probably the main reason why I switched over. Linux simply does a better job of supporting developer activities a lot better than windows. Installing new development environments be it Flutter, Angular, React, Android etc is made extremely easy and painless with the terminal and package managers.

In Windows, you might have to configure environment variables, build paths, sdk paths manually all of which is automated in Linux. So with the environment setup out of the way and taken care of, I can focus on actually developing software.

Sorting Visualizer built using flutter/dart

Vineet Kalghatgi — Sat, 28 Dec 2019 12:47:02 +0000

GitHub : Sorting Visualizer

This is just a simple personal project because i'd been wanting to try out flutter for a while. The learning curve isn't too steep if you are already relatively well versed in java, c, c++ or even JavaScript.

Anyways, since i'm still a beginner, I would love to hear your thoughts on it.