Immediately, I vibe-coded a simple continuous integration service that keeps my resume up-to-date.

The heart of the system is the Flask service, that handles Authentication, La-TeX generation, PDF parsing and uploading the parsed PDF to storage bucket.

Resume CI

It only has a single endpoint /generate which takes in the Authentication key, validates it and upon validation proceeds to the next step to the service layer. The service layer handles most of the core operations - JSON to La-TeX conversion, saving to PDF. Then the saved PDF is upload by the service.

LaTeX Generation

I initially wanted to build this using Go, but the tools weren’t much helpful (or at least easy to use). Hence I chose Python, PyLaTeX and texlive inside the Docker environment.

Authentication

Why did I even need to auth? I’m very paranoid of my GCP bills exploding because I kept my endpoint exposed. Also, I don’t want to spend an entire week building only auth. Moreover, the GitHub Actions (or me from my local) would be only one invoking this API, so the auth needs to be kept simple. Thanks to Swapnil Agarwal’s suggestion, I used the concept of API keys, I generated a simple UUID, which only two entities know, the caller and the resume service.

Deployment

Since the CI service was dockerized, the obvious choice was - Google Cloud Run and the GCS Bucket.

Why GitHub Actions?

I very much wanted to avoid GitHub Actions, because I already use Netlify to deploy my portfolio site and research about post-build notifications, but sadly Netlify doesn’t allow a request body to be passed, hence I opted GitHub actions with its generous free tier.

You can checkout the resume CI service at github/saiyerniakhil/resume-ci.

The third semester was where the magic and everything began. At UWM, once every two years, Compiler Construction and Theory (CS754, plus a Hands-on Lab) is offered, and taught by Dr John Boyland (one of my favourite professors) and Amir (the TA and Instructor of the Lab), and is one of the difficult courses. Having already taken the PLC (CS435), I was ready to build a COOL (Classroom Object-Oriented Language) compiler by hand, which gave me insight into how programming languages work and behave. The compiler coursework consisted of understanding and building the basic components of a compiler: a lexer (using yacc and antlr), a parser (using scala-bison), a semantic analyser, inheritance, code generation, and code optimisation.

The lexer and parser-related modules in the coursework helped me understand how some programming languages have specific syntax. It not only helped me with my research but also with my work (at the Division of Marketing and Communication at UWM). I recall an instance where I encountered a problem with a third-party PHP plugin on a WordPress website. I haven’t worked extensively with PHP before, but the knowledge I gained about the syntax and semantic paradigms helped me debug and fix a bug on a mature WordPress plugin with thousands of users. It gave me the confidence to approach any new programming language fearlessly.

The tree visitor style pattern introduced in the semantic analyser-related modules has given me a great understanding of tree data structures and how they could be traversed. During the type-checking phase of the coursework, the decorator design patterns used to build symbol tables (recalling the Environment, NestedEnvironment and MethodEnvironment) helped explain how decorators work. They were used as a base for Higher-Order Functions or Components in React, @Annotators in Java, and @Decorators in TypeScript. Even checking how casting and subtyping work within object-oriented languages and especially knowing how type-lub and type-leq work, helped a lot.

The implementation of inheritance, I think, makes the biggest difference in my software engineering skills. I have always hesitated to work with pure object-oriented languages like Java (and Scala), even though I used them at work, due to the boilerplate and initial setup required and tended to work more with programming languages like JavaScript and Python because they were simpler. Now with the concepts I have learnt — like casting, multiple inheritance (and how it is a pain to implement and how different programming languages implement that), vtables and the object layout, I’m more confident than before that I can easily work with Java than before.

Having learnt assembly programming for an 8086 microprocessor as a part of the Micro Processors and Micro Controllers course in my undergraduate studies, I was able to write simple programs like arithmetic operations. The code generation seemed overwhelming at the start, but the handouts and lab sessions helped me understand topics such as the MIPS assembly, the calling sequence and register allocation.

Code Optimisation is the difficult part of the entire coursework to implement, but the techniques learnt were useful in writing better code and are not entirely dependent on the compiler.

I have previously had history lessons in my school, but they're either just an account of a particular period. But this gives a brief (as already in its name) picture/birdseye view of entire Humankind. Starting from Cognitive Revolution, Agricultural Revolution, Scientific Revolution to also the future of Sapiens. This book takes us to completely new perspectives of things we have been seeing until now a very good example is the cultivation of staple crops, we've been seeing it always as an advantage to the human beings giving us a lot of calories to spare but it makes us think that not the staple crop but it's the Sapiens who had been domesticated. It really helped me to view things totally in a different view. Another example would be how the empire and wars drove the scientific revolution during early 18th centuryand not the thought of bettering the lives of human kind. Its also touches briefly on the topics of biochemistry, bioengineering, bionic life and genetic engineering which might decide the future of Sapiens.

"Is there anything more dangerous than dissatisfied and irresponsible gods who don't know what they want?"

I would recommend this to anyone who wants to know more about the species that is reigning over the planet for the over 70 millenia.

An IntersectionObserver is a utility in the native browser APIs which lets us check whether an element has intersected the viewport or any other ancestor.

I came across this while I was trying to build a scroll spy, you might be wondering what a scroll spy is? If you have ever used/worked with Bootstrap, scroll spy implementation is available directly via Bootstrap’s utilities which are built on top of jQuery.

Check out this example and see how it works on Google Docs -

It becomes so easy with bootstrap, but at work, its a React.js project and we aren’t using Bootstrap over there, so I had to search for alternatives and one such library was react-scrollspy but I don’t have the luxury of installing the library in my project plus its deprecated anyways. So I had to roll my sleeves and build one, which serves the purpose. I was as usual googling stuff on how I could and I came across many solutions and one that I found interesting was one by user @Creaforge on Stack Overflow using IntersectionObserver API. I have successfully built that feature and I have gone forward and learnt more about it since I found it very interesting. In this blog post, I’m going to share what I have learnt and also gonna give some examples in which we can use this API.

Here are some examples I have built using IntersectionObserver API -

1. Implementing a ScrollSpy in React

I have written a hook from @Creaforge’s answer on Stack Overflow and took it forward from that. I made use of ref to get the component’s reference to the DOM.

import { useEffect, useMemo, useState } from 'react';

/**
 *
 * @param {ReactRef} ref reference to the DOM
 * @param {object} options (optional)
 * @returns {boolean} if the ref is intersecting the viewport
 *  - The `root` is the scrollable parent of which the ref is a descendant of.
 *  - `rootMargin` is the margin of the root element
 *  - a single `threshold` ranges from 0 to 1.0 (0 - 100%) as also can be an array [0, 0.5,...1.0]
 *  - The callback to the IntersectionObserver constructor is invoked, when the ref is x% of the parent element
 */
import { useEffect, useMemo, useState } from "react";

export default function useOnScreen(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  let options = {
    root: document.querySelector("#root-el"),
    rootMargin: "0px",
    threshold: 0.5
  };

    // useMemo since the IntersectionObserver does consume more resources
  const observer = useMemo( 
    () =>
      new IntersectionObserver(
        ([entry]) => setIntersecting(entry.isIntersecting),
        options
      ),
    [ref]
  );

  useEffect(() => {
    observer.observe(ref.current);
    // Removing the observer when the component is unmounted
    return () => {
      observer.disconnect();
    };
  }, []);

  return isIntersecting;
}

Now, this hook will tell me whether an element (ref) is on my screen matching the threshold and lets me set the state.

So now I have a state variable, which contains the latest div which intersected the screen, so I’ll take that state variable and try to highlight the currently active element

...
const [currentRefOnScreen, setCurrentRefOnScreen] = useState(<id of the ref>);
...
...
return  (
    <nav>
            <ul>
                navList.map((navItem,index) => (
                        <li className={currentRefOnScreen === index ? 'active' : ''}></li>
                ))
            </ul>
    <nav>
...
)

The remaining part of the scroll spy left to implement was to scroll to the section when clicked on the nav list item. Since I have access to the ref, I can easily scroll to the ref using ref.scrollIntoView(..)

Here is the link to the final version on codesandbox.io.

2. Fancy Scroll Animation

There is another example I have tried out to replicate the functionality which I’ve found on the Apple iPhone 13’s product display page.

Here you can see how the battery level changes from 0 to 100 while scrolling. Our target is to replicate that.

Similar to the above scroll spy implementation example we need to observe something (target) within the parent (root)

So now we’ll have to observe the section of the page which contains the battery icon (and maybe the text describing it) and calculate the amount of the targeted element which is visible.

Let us start with the implementation -

• We’ll start by creating an observer and starting observing the target element

const createObserver = () => {
  let observer;
  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };

  observer = new IntersectionObserver(handleIntersection, options);
  observer.observe(boxElementToBeObserved);
};

let boxElementToBeObserved;
boxElementToBeObserved = document.querySelector("#app");

//createObserver();

We’ll also have a function that gives us the threshold values, here in this case I’m using a list of values because I want the battery percentage to increase from 0 to 1.0 in 10 (numSteps) intervals. Which turns out to be 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7,...1.0. One can increase or decrease the threshold based on the requirements.

Here is how it looks when the steps are reduced to 2 -

and when the number of steps is 10 -

• Next, we’ll jump into writing our intersection handler, which is called whenever the threshold values are met. calculating the width includes subtracting from 100 because initially 100% of the element will be visible and we need to start from 0 (100 - 100 = 0, Isn’t it?😂)

let prevRatio = 0.0;
const handleIntersection = (entries, observer) => {
  entries.forEach((entry, entryIndex) => {
    batteryLevelElement.style.width = `${100 - entry.intersectionRatio * 100}%`;
    prevRatio = entry.intersectionRatio; // just preserving for reference incase we need it in future
  });
};

Entries here are the list of Intersection objects for all the target elements we are observing, in our case, it’ll have only one element.

• Since we need to change the battery level, I have gotten access to the battery level element to which we have to change the width.

const batteryLevelElement = document.querySelector(".batteryLevel");

Here is the final working demo of the battery animation - https://codesandbox.io/s/apple-intersection-observer-example-final-5n6wx

I’m sure there might be better ways of doing without the extensive usage of refs in the implementation of scroll spy and If you have better solutions and any feedback, I’m glad to learn them from you😀. Make use of the comments section for constructive feedback.

References -

1. IntersectionObserver documentation on MDN - https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
2. StackOverflow thread - https://stackoverflow.com/questions/45514676/react-check-if-element-is-visible-in-dom

Tailwind.css likes to call itself a utility-first CSS framework. So what is a utility first CSS framework? Let us know that by an example, consider a social media application similar to Facebook, which contains something like a friends list, it might have a container (div) with a CSS class something like .friends-list we don't know what that class does unless we take a look at the CSS code, this is called semantic-first CSS. the .friends-list class might have the following CSS -

.friends-list {
    display: flex; flex-direction: column;
}

While talking about utility-first CSS, In tailwind we do something like this -

<div class="flex flex-col">
        ...
</div>

Bootstrap also implements such utility first classes, but that's very limited. For example, in bootstrap, we have .card we don't know what that does unless we inspect the HTML element.

One thing note is that tailwind.css doesn't provide components like bootstrap's form, accordion, card etc.

Now let's see how we can move from bootstrap to tailwind and going forward through this article we'll know about things starting from the setup to implement things in Tailwind that we can do in bootstrap.

The Setup

We can set up tailwind using a CDN similar bootstrap also but there will not be any benefits like removal of unused CSS. You can refer to this. To reap the benefits of tailwind, we must use it with any build tools like PostCSS.

initialize an npm project and install the dependencies -

npm init -y
npm install tailwindcss@latest postcss@latest autoprefixer@latest vite

Note: vite is a build tool just like webpack which we see in the create-react-app

Setup tailwind.config.js and postcss.config.js

npx tailwind init -p

Now in the package.json, add a script to start the server -

...
 "scripts": {
    "dev": "vite"
  },
...

Now in your base CSS file in the project, add these lines which import the base, component and utility layers from tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

Note: Do not forget to import this CSS file into your index.html file

You can get the boilerplate from here (just download this, do npm install and it's done!)

Now that the setup is done, we'll move into things we had most implemented in bootstrap and try to replicate them using tailwind.

Grid

The first of the things that have made bootstrap popular is it's easy to implement grid layout. Bootstrap divides the layout into 12 columns. If you look closely, bootstrap implements its grid using the flexbox but Tailwind uses the grid as it is.

<!-- using bootstrap -->
<div class="row">
    <div class="col-8">
         width of 8
    </div>
    <div class="col-4">
         width of 4 
    </div>
</div>

In tailwind, we can use up to 12 columns, but we can use even more than that by configuring the tailwind (more about customizing tailwind )

<!-- using tailwind -->
<div class="grid grid-cols-12">
    <div class="grid-span-8">
         width of 8
    </div>
    <div class="grid-span-4">
         width of 4 
    </div>
</div>

For gutters/grid-gap, we can use gap-{n} to the grid container.

Flexbox

In bootstrap, we use d-flex and flex in tailwind.

<!-- using bootstrap-->
<div class="d-flex flex-row justify-content-start">
     text with flex-direction as row and its content justified start 
</div>

<!-- using tailwind -->
<div class="flex flex-row justify-start">
     text with flex-direction as row and its content justified start 
</div>

As we see, getting started with tailwind is not so hard 😀

Spacing

Margin & Padding

Spacing is the most often thing we come across and have to deal with and similar to what we have seen with flexbox, spacing isn't different at all.

<!-- Tailwind -->
<div class="m-4 mx-4 my-4 mt-4 mb-4 ml-4 mr-4">
</div>

the m{direction}-{n} where direction is left (l), right (r), top (t), bottom (b), x-axis (x), y-axis (y) and n ranges from 0, 0.5 (0.125rem), 1, 1.5...4 (1rem)

and we can replace m with p for padding.

Sizing

Sizing in tailwind is not limited to percentages of the parent container like we see in bootstrap, we can have a width in rem and also in percentage of the parent container and a lot more and here are some examples -

<!-- Tailwind -->
<div class="w-1{-96}">
<!-- 1 - 0.5rem -->
</div>
<div class="w-5/12">
<!-- width = 41.666 -->
</div>

Responsive utility based CSS

When we use bootstrap, there is no way for us to avoid writing CSS at least for the responsive styles which we want to apply for a specific viewport. Personally, I think this is where tailwind.css excels.

In bootstrap, we can only control the responsiveness of grid layout for different viewports without any CSS. Let me show things we can do with tailwind -

<div class="sm:text-blue-500 md:text-green-500 lg:text-red-500">
</div>

This applies different text colours for different viewports. We also have access to other viewports xs, xl, 2xl.

So, this will be our basic intro to get started with your journey from bootstrap to tailwind.css .

Thanks a lot for reading this article. Please comment you view and suggestions, it would help me a lot in improving.

"One Must Not Fear, Fear is the Mind Killer" - Dune

While reading the Dune, you'll not only read it but will live in it. I literally had dreams of me being on Arrakis and living in a cave, God! It made such an impact on me.

The philosophy of the Dune is so great, showing how tough people are made by living in a challenging environment be it Fremen (on Arrakis) or Sardaurkar (on Selusa Secundus).

Frank Herbert is an absolute genius. His imagination is top-class and so detailed, he even had an entire ecology of Dune created, starting from vegetation to terrain and the food chain. It also had royal houses Atreides, Harkonnens, Corrinos .The Dune also had its own religion formed over the basis of Islam, Christianity, Buddhislamic and Hinduism, There are also quite a few references to Arabic in the book. The terms like Bene Gesserit a religious school trying to achieve an apt bloodline for the "One"(Lisan-al-Gaib), Missionaria Protectiva has their own purpose to spread the Propaganda of Kwisatz Haderach to farther planets. The Galaxies and Planets (Selusa Secundus, Geidi Prime and Caladan) are also in place. The magical ingredient, Spice found on Arrakis, The Guild, The Sardaurkar. It was great how Sandworms have a place in the Dune ecosystem and how it's linked to the creation of Spice in the Arrakis.

The Dune #1 Dune has three books/parts: Dune, Muad'dib and The Prophet. The first book talks about how Paul comes to Arrakis, the desert planet, How the Harkonnens plan treachery to kill Duke Leto. The second book shows us, how Paul takes sanctuary at the Fremen's and comes to be known as Paul Muad'dib and how Paul teaches the Fremen the weirding ways of battle and gets taught, how to live like a Fremen, ride a Maker. The Final Part talks, about how the Arrakis revolt plays and how Paul wins over the Arrakeen and plans to turn Arrakis into an orchard.

I absolutely loved reading The Dune 😍.

This will be the second post of the raspberry pi series. You can check out the first one from here -

If you remember from the previous article, we set up our web server so that it can be accessed without having to connect the Pi to a computer. Now is the time to get down to business, which is setting up and running a webserver. You should use whatever stack you're most comfortable with, but in this case, I'm using a Node/Express.js API.

The PuTTY utility can be used to ssh into the Pi, but I'm using the ssh utility from the Linux running on WSL. Run the below command the proceed by entering the password as prompted.

 ssh pi@raspberrypi

Run the commands below to update the Linux packages and also get the things we need

sudo apt update
sudo apt-get install vim
sudo apt-get install node.js
sudo apt-get install npm

Once that's done, we're ready to go, and we'll need to create a npm project to enable us to run a webserver on the Pi.

Setting up an express server.

mkdir code-hello-world && cd code-hello-world
npm init -y

After the project is set up, install the express package and create an index.js file.

vim index.js

In that index.js, put in the following code, which is the JavaScript code to serve hello-world from the Pi.

const express = require('express')
const app = express()
const PORT = 3000

app.get("/", (req, res) => {
        res.status(200).send("<h1> Hello, World! </h1>")
 })

app.listen(PORT, (req, res) => {
        console.log(`R_PI listening from port ${PORT}`)
})

Now everything's set up, the only thing that's remaining is to run the express.js server -

node index.js

You'll now have the server running on the Pi.

Please do let me know how you felt about this post.

Thumbnail/Cover Photo by John McArthur on Unsplash

I was bored this weekend, so I searched my shelves and discovered an old Raspberry Pi Zero W (which I never got to use). So I decided to use it as a web server and host some applications on it. I'll take you through the process of setting in this blog post. This is the first in a two-part series.

Pre-requisites

• A Raspberry Pi with Wifi ( I have a Raspberry Zero W)
• An SD Card minimum of 8 GB
• A micro USB cable (to Power up the Pi)
• A computer with an internet connection.

Installing OS into the Raspberry Pi

You need to download a tool called Raspberry Imager from here. There is also a 45-sec video to guide you through the setup from the official Raspberry Pi.

So, now that you know how to install an OS, how do you pick one for the Pi? I'm going to use it as a web server, so the GUI isn't important to me. Instead of the full desktop version of the Raspberry Pi OS, I've installed the Lite version of it, which is a headless version of the operating system.

Connecting to Pi

After the OS has been mounted on the SD card. Now is the time to insert the SD card into the Pi and configure the OS to enable us to use the Pi without a monitor. Connect the Pi to the laptop using a USB cable and insert the USB pin into the USB port. Do not unplug the Pi from the laptop yet.

Things to do -

Make these changes in config.txt, add the line dtoverlay=dwc2 at the end of the file (ref).

Change the cmdline.txt file add this small text modules-load=dwc2,g_ether in between as shown below. dwc2 is an upstream driver which turns the pi into gadget mode, which can provide us with the ethernet over the USB connection and g_ether is a gadget driver, which will behave as USB over ethernet.

Tip: take a backup of cmdline and config, if in the process you mess up, you have a way to start fresh

Enabling SSH-ing into the Pi

To be able to ssh, we need to put an empty ssh file(no extensions required). Keep in mind that it should have UNIX file endings if you are creating the file on a Windows PC.

Here is the ssh file I have created using Notepad++.

Connecting to a Wifi network

There is a way to make our Pi automatically connect to the Wifi network we specify. To do so, create a file called wpa_supplicant.conf and paste the contents provided below into it using Unix File endings. These UNIX file endings are causing me a lot of anxiety because I had to spend a lot of time finding out what went wrong.

country=GB
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1

network={
scan_ssid=1
ssid="<Your Wifi Name>"
psk="<Your Wifi Password>"
}

SSH-ing into the Pi

⚠ Don't Unplug the Pi from the PC yet! ⚠

Until now, the most intriguing thing is the steps following. Proceed to the next step using PuTTY or any other ssh client with raspberrypi (If an error occurs, use raspberrypi.local as the hostname). A terminal window appears, prompting us to enter the username which will be pi and the password will be raspberry . If it prompts you with a warning, press 'Yes' and continues.

Update the packages, using sudo apt update.

Run sudo raspi-config, which will bring you to the menu shown below. We make two improvements here that are important for a server -

1. Make the Pi auto-login whenever it boots up.
2. Make the Pi be ssh-able over wifi.

Your portable server is now ready! and you can now unplug the Pi from your PC. In the next part, I'll guide you through how to run a hello world app using express.js on the Pi.

Tips -

1. You can check if your raspberry Pi is able to connect to the Wifi, with help of a tool called Angry IP Scanner. And you'll find the hostname raspberrypi in the list generated.

Cover Image credits: Me 😀

In part 1, we have built our backend part of the application, now here we are with building the frontend part and conclude the application development.

I am using ReactJS for the frontend and bootstrap as the CSS framework. I have used the codesandbox in the initial development of my application.

My Directory structure of the react application is as follows -

I have divided my react folders into components, pages, assets each component inside components and pages has __tests__ folder which contains the unit test and integration tests.

1. components contains the smallest possible react components which are re-used throughout the react application
2. pages contains the combination of react components, which together form a single page. Since I'm using React Router in the application, it becomes more meaningful for the pages folder.
3. assets folder contains the static files like images, SVGs etc.
4. App.js is the root element of the component tree of the application.

The current application, which is built using react-router, has two different routes in actual -

• / - points to the HomePage
• /result/:uuid - points to the BufferPage

While the homepage route is pretty straight forward but BufferPage isn't which I'll discuss in a moment.

The HomePage route renders the HomePage component in the pages directory. All the routes and pages contain the Header, Footer and conditionally rendered HeroImage component in general. the HomePage is where the user fills out the form to persist the message and set the expiry date into the database.

The homepage

When the user successfully submits a message to store it, he'll be provided with a message giving him the link to the message to access it. the user also can copy the link by clicking the copy button.

The form's submit button will remain disabled until a valid input is provided and also while the request payload is being sent to the server. The user has also been provided with instruction on how the application works.

The next route is BufferPage. This page's route accepts the UUID of the message, as we have seen earlier on the homepage the user is provided with a route <application-domain>/result/<uuid> so the BufferPage picks up that UUID from the params and does a fetch call to the server at /retrieve/:uuid endpoint. Based on the result, the user will then be redirected to either a success page, which contains the message, the expiry date and on failure, the page redirects to the error page, which then tells the user that the message has been expired or it is not present in the database and also has an option to reach the homepage.

The success page

The error page

The entire application is also responsive for mobile devices.

The application is hosted at - short-url-gen.netlify.app

Illustration credits - undraw.co

Now diving into the How part, starting with the backend part of the application, we are gonna design it starting with the actions users might perform.

1. The user enters a message he wishes to send, sets an expiry date/time.
2. The user then gets back his message, which the user can use to share.

So to build the backend of the application, I'm gonna use node.js with Express.js, and MongoDB.

Setting up an Express.js app

cd <project-name>
npm init
npm install express

Give the author's name and all the fields when prompted as you wish, during the setup.

The utilities are added to the Express app as middlewares. So have used quite a several middlewares while building the application.

Starting the server

/index.js

const express = require('express')

const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: false }));

const PORT = 8082

app.get("/", (req,res) => {
    return res.send("Hello, World")
})

app.listen(process.env.PORT || PORT, () => {
    console.log(`Backend is running on port ${process.env.PORT || PORT}`)
})

The line app.use(express.json()), is a middleware used to tidy up the request payloads we get from the user to be able to use them with JavaScript. The line app.use(express.urlencoded({})) is an option to choose how to parse the incoming request object (qs or querystring). More details at here.

I'm now done with the initial setup, now going into the actual development based on the points we have listed above. The first task being, get the data from the user then store it inside our database. So, for that, we need a POST method, which takes the data from the user through a form. Since we haven't had our front-end form ready, I'm going to use a tool called Postman which is a tool used to interact and test APIs. The endpoints in the Express are termed as called routes.

Setting up the MongoDB client

There is good support for MongoDB in node.js and so there are several libraries available. So I have used the official native driver provided by MongoDB.

/index.js

...
const MongoClient = require('mongodb').MongoClient
const DB_USERNAME = process.env.DB_USERNAME
const DB_PASSWORD = process.env.DB_PASSWORD
const DB_NAME = process.env.DB_NAME
const DATABASE_URL = `mongodb+srv://${DB_USERNAME}:${DB_PASSWORD}@cluster0.yqxu2.mongodb.net/${DB_NAME}?retryWrites=true&w=majority`
MongoClient.connect(DATABASE_URL,{useUnifiedTopology: true})
.then((client) => {
    const db = client.db(DB_NAME)
    const messagesCollection = db.collection('newCollection')
    console.log('Connected to the Database - SUCCESS!')
    ...
}).catch(err => {
    ...
)}

...

The client object we got in the then(...) part of the promise is what is needed for us to interact with the Mongo server. Hence all the logic and routes involving the database comes in it.

I have hosted my database on MongoDB atlas. To store all the database credentials, I have used a utility called dotenv, I have created a .env to store all my credentials as key-value pairs separated with an =. Storing credentials as a const in the js files is a bad practice, as others viewing your files will get to know your credentials.

The POST method

route - /add

/index.js

...
app.post("/add",(req,res) => {
        const uuid = nanoid(7)
        const insertDate = new Date() 
        const millisSecondsFromNow = req.body.time * 1000
        const expireAt = new Date(insertDate.getTime() + millisSecondsFromNow)
        const newMessageDocument = {...req.body, expireAt, insertDate, _id: uuid}
        messagesCollection.insertOne(newMessageDocument)
        .then(result => {
            return res.status(201).send({ uniqueUrl : uuid, expireAt})
        }).catch(error => {
            return res.status(503).send(error)
        })
    })
...

The task associated with this endpoint is to store this in the database, which is creating a resource, hence the use of the POST method. To create a unique field, to access the document, I have here used a library called nanoid which gives the UUID of a specified length (here 7). I am getting the time after which the message should be expired in seconds from the time of creation and then I increment the current time with the seconds from the user to arrive at the expiry date. Thereafter I insert them into my collection in the database and respond to the user with apt response codes. You can know more about HTTP response codes - here.

While we move into the next part of the application. I will quickly dive into the database design of our database and how we achieved the timely deletion of the records after a specified time?

The only data we need to store is the message, the insert date, the expiry date and the time active (in seconds). hence a sample document of the data would be like -

The time given is 10000 seconds which is equal to around 2.77 hours. hence, the field expireAt is 2.77 hours from the insertDate.

How do we test if that's working fine? Using postman!

We can select the type of request from the dropdown on the left of the address bar. Now its POST and the endpoint /add in the address bar. We can now see the request body with two fields from the user, message and time. And down below we get to see the response from the server, which has uniqueURL which I'll discuss going forward and the time at which the message expires.

How did we achieve, timely self-destruction?

Coming to the MongoDB server, it has a background thread mongod (mongo daemon) which always runs in the server. There's a feature in MongoDB called, Time-to-Live (TTL), the mongod thread always runs and checks to delete the documents at a trigger time. It can be the same time for all the records or the column specifying the delete time. How to add this check to our database collection?

db.<collection_name>.createIndex({expireAfterSeconds: 3200}) - adding this makes the records to auto-delete after 3200 seconds but we need different units of time (minutes, seconds, hours or even days) hence I create an index expireAt the time after which I intend to delete the document after. Using this - db.<collection_name>.createIndex( {"expireAt": 1}, {expireAfterSeconds: 0} ). You can know more about the feature at here.

Going to the next part of our solution, which is the user getting back his message from the database.

The GET method

route - /retrieve/:uuid

/index.js

...
MongoClient.connect(DATABASE_URL,{useUnifiedTopology: true})
.then((client) => {
...
app.post("/add",(req,res) => {
...
})

app.get("/retrieve/:uuid",(req,res) => {
        const uuid = req.params.uuid
        messagesCollection.findOne({_id: uuid})
        .then(result => {
            if (result === null) {
                return res.status(404).end()
            }
            else
                return res.status(302).send(result)
        }).catch(err => {
            console.log(err)
            return res.status(503).send(error)
        })
    })

...

In this part we are accessing a record from the database neither creating nor updating, hence we have used the GET method. How do we access the particular record? If we are in a Relational Database, we use a primary key, At present, we have a similar index in our collection called the _id, which is the UUID generated by nanoid. We get this UUID from the user and our server responds accordingly if its found then return the document else return null with apt response codes.

Testing the endpoint in postman

In the address bar, we see the retrieve/ suffixed by the UUID we got previously. And we got the response from the server, all the details of the message like (_id, expireAt, insertDate, message and time)

Now all the tasks we intended after the analysis are done and we now got the working version of the backend with us.

You can find the source code at - github.com/saiyerniakhil. The final application is hosted at - https://short-url-gen.netlify.app/

The link to the second part of the article -

Haha! it’s funny

It seemed okay then. But, When I have to deal with more and more complex projects I felt difficult to move on and often confused. But its when version control tools like Git looked like a saviour to me. Why? let’s check it out.

• Cleaner project directories.

• Ability to rollback.

• Maintain different versions of the code (branches)

Git logo

Installing git isn’t a tedious task and you can find the detailed guide here.

So, while we are learning about git there are certain terms which are important that we understand and we come across them every time —

• Repository
• Commit
• Branch

What is a repository?

A repository (or a repo) is a parent folder which the git tracks, which may be the directory which contains the project files. In case of a web app, the repository contains all the Html files documents, stylesheets and images which are used in the web app.

How to create a repository? Creating a repository is very easy, you can intialize an empty repository or turn an existing project into git repository or else move to the existing project repo and use the command *git init using git command line tool.*

initializing a repository

Now, What is a commit?

A commit is a checkpoint. Let us say you have initially created a web app and then made changes to the initial version. Now you’ve made a blunder and messed with the project and wanted to revert to the initial version, with the help of a commit. Commits are checkpoints, as mentioned before and we can come back to it.

How to make commits? Here it is, this is how we make a commit — git commit Before we make a commit we need to stage the changes. Staging changes helps us to commit all the files at once without fail. We can stage all the files at once or we can a single file using — git add . or git add <filename> while comitting we need to specify a commit which briefly describes the changes. So we generally use a message flag -m directly in the command- git commit -m “<commit message>” each commit i.e., each checkpoints has it own id.

The initial version of file random.txt

Staging and committing the files in the repository

Now making a second commit

Staging and making a second commit

How do we revert? We can revert using the commit specifying the commit ID git checkout <commit-id>

When we go on with the software development we need have a look at the commits. For that we’ll be using the command — *git log which is a pretty useful command.*

What are the branches?

When we want to test new features in our software without actually disturbing the original version. We use branches for that very reason.

How do we create branches? Branches are creating by using same command we used in earlier by using a -b flag. git checkout -b <new-branch-name>

Now have a look at the same file in two distinct branches and you’ll clearly know why we use branches —

How to delete a branch? A branch can be deleted by specifying a -d flag git checkout -d <branch-name>

Now that we are clear with the terms used in Git. In the next post, we’ll learn how to host it on the internet.

Do share and suggest some improvements.

Flask is a micro framework written in Python…blah…blah..blah! I’m not gonna waste you time so, more info at flask.pocoo.org!

Developing a Flask app

• Install flask through pip using —

pip install flask

• Running a sample “Hello World!” flask web app

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
  return "Hello, World!"

Running a flask app is just flask runaway, just head over to your app location in your command prompt/bash/terminal.

C:/[Path /to your/ app/]>flask run

When you make some changes to your app, you should run flask run again by quitting.

Debug mode is a very useful tool while you’re developing an app and you are in need of frequent reloads. Here’s what you can do in your cmd to activate debug mode in Windows set FLASK_ENV=development

Now you can see the following on your cmd —

* Environment: production
 WARNING: Do not use the development server in a production environment.
 Use a production WSGI server instead.
 * Debug mode: off
 * Running on [http://127.0.0.1:5000/](http://127.0.0.1:5000/) (Press CTRL+C to quit)

The above app generates some content in the browser which looks like this —

A Hello World

Now, Let us know what each line in the above code works or does the things

from flask import Flask

More about “Flask” at here.

The 3rd line in the code creates an instance of our WSGI Application.

If you have ever noticed your address bar while visiting websites like Wikipedia, Instagram, Reddit etc., you should have noticed this

In the first image there’s Instagram’s default route. It is always showed up when you navigate to instagram.com. The default route is a “/” (forward slash)

In the second image, when you want to navigate to specific Instagram profile then you need to give the specify like “<username>” after the default route like “/sachintendulkar” for viewing Sachin Tendulkar’s Instagram profile.

The function below the route serves the content to be displayed or served for that route.So that we’re clear how routes work. We can now start adding routes for our web app.

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

@app.route("/first")
def first():
    return "The First Route"

Which results in this —

The First Route

Its achieves our purpose of adding routes but, is that what an actual web app look like? No! There a no HTML pages and no anchor tags and nothing in there. But do not panic we’ll now be dealing with rendering HTML pages rather than generating a simple plain text. For that we need to import a function render_template from flask.

All the HTML files to be served via render_templateshould be placed in a folder named templates inside your working directory

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/")
def hello():
    return render_template("index.html")

@app.route("/first")
def first():
    return render_template("first.html")

<html>
    <head>
        <title>My Web App</title>
    </head>
    <body>
        <h1>This is the first route</h1>
        <a href="/">back</a>
    </body>
</html>

<html>
    <head>
        <title>My Web App</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <a href="/first">first</a>
    </body>
</html>

The navigation functions as —

Deploying the Flask app to Heroku Cloud

Now that the basic app is ready and now its time for deployment. We are now going to deploy it to Heroku Cloud. Why Heroku? It offers a command line interface for configuring and deploying python or any web app with version controlling, which makes it easier to track your files and versions of your web app.

For starting with Heroku you need to create a Heroku account and install Heroku CLI in your local computer. You can download it here

For you to use Heroku, you need to install and configure git. Steps to install git can be found here — https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

• After installing Heroku CLI, now use the heroku logincommand to connect your Heroku account to the CLI in your local computer.

• Install a python package gunicorn by pip install gunicorn . (Wikipedia)

• Its time to create a Procfile, which tells the Heroku cloud which server our web app runs on. The Procfile contents for our web app looks like —

web: gunicorn app:app

• Now move over to the working directory in the command prompt and generate a requirements.txt file which tells about the package dependencies for our web app by running pip freeze requirements.txt

• Now initialize a git repository in the current working directory git init .

  adding a .gitignore file is an optional

• Next, stage and commit all changes git add . and git commit -m 'first commit' .

• Create a Heroku app heroku create

The result of heroku create command

• Let us push all the contents of our repository into the Heroku cloud by git push heroku master .Its takes some time for the cloud to be configured for our app to be run.

• heroku open to open your web app in your browser.

Its done! you’ve now created a basic flask app and deployed it to Heroku cloud.

The app I’ve created is now live at https://safe-waters-62537.herokuapp.com/

Now that you’ve got an idea about developing and deploying basic flask application. You can continue to build some advanced flask applications by learning at Edx.

• Install Anaconda from Here .

• After you complete installing Anaconda, Open Anaconda Navigator (In windows, you can simply do that by searching for it in the start menu).

• In the Anaconda Navigator, you could easily find an Environment tab in the side navigation bar, open it and you can find a create option to the bottom left click on it and head over to next step.

• When you click on create a small alert pops up, enter a environment name of your choice (for example, py36 ). Please do make note of the location of your environment which is just below the text box.

create new environment pop-up

• Head over to the location of your environment which you have noted down. (which is of the form C:/Users/…. in windows)

• Open edit system environment variables from start menu and and a new window appears then click on Environment variables > System Variables then you could find a variable named path . Click on edit and add new path to it and paste the location of your Anaconda Environment.

searching edit system system environment variables

clicking on edit will lead you to the below window

click on new and paste your anaconda environment location

• Now open your Python project folder in Visual Studio Code, and to the bottom left corner you can find something like this

click on the highlighted one and it’ll lead you to the below one

you can now see your python interpreters (in my case it’s the second one ~\Anaconda3\envs\py36\python.exe) where py36 is my environment name.

The new Firefox Quantum is built on Rust programming language, sponsored by Mozilla which means more power to Mozilla in making Firefox more powerful.

I’m into web development for some time and I’ve loved using Firefox’s DevTools which is lightweight when compared to Chrome’s.

A look at Firefox’s DevTools

It also had an interesting feature called Firefox Test Pilot which is a beta program for trying out cool new features (I have an unconditional love towards beta testing new products). The test pilot program really awes me.

A look at Firefox Test Pilot

A universal address bar — Yes you’ve heard it right. The address bar is not only limited to your default search engine but also several and you can add your custom search engine

To search using duckduckgo just @duckduckgo and add your search query beside it

Built in tracking protection, yeah and its true.

tracking protection is built into the browser

Coming to add-ons, I know that, by redesigning Firefox, Mozilla had to dump many add-ons, but believe me — more add-ons are being added.

Built in screenshot tool — for a power user like me taking screenshots has been made easier by tools like ShareX but the Firefox’s screenshot tool is built for webpages.

Take a screenshot of a selective region without having it to be cropped.

There are many other features besides them but I felt these were the cool ones.

This is my first post and I’m getting started. Hope you liked it ❤️