Forem: Nukala Suraj

Overcoming my DoomScrolling Addiction [Reels and Shorts]

Nukala Suraj — Sat, 27 Jan 2024 12:30:19 +0000

consider this...
you're working on a project that you've been pretty excited about for a while

now...
you are someone who keeps your phone on battery saver/DND mode when you're working but you forgot to this time...

and you get a notification on your phone

it's from a childhood friend of yours, someone who you haven't had a conversation with for a while now

you reply to them and also habitually click on the "reels" icon

BOOOM 180 minutes pass by and you remember you had something you wanted to work on

You're not alone

I'm someone whose tried everything out there that didn't work to prevent this from happening again ranging from:

uninstalling insta [only to later eventually install it]
increase my willpower [failed miserably]
shifting to the web version [but needing to install it everytime I want to post something on stories]

all these attempts made me think deep on why this was happening and the answer was... the existence of this stupid little icon

Removing the Problem

I initially tried to see if I could make a mod APK where the whole reels section wouldn't be there but

and then I remembered how adblockers work... they identify ads in a website and not render them... so what if I could configure an adblocker to treat the icon as an ad

after surfing reddit for less than 3 minutes [at least in my head]... I found a someone who configured their ublock origin [the best adblocker] to treat youtube's shorts icon as an ad

Implementing a Fix

I am a long term user of brave, and I knew that brave's inbuilt adblocker uses a lot of similar components of ublock origin...

so I went ahead to brave://adblock

and copy-pasted the following into custom filters

! Hide Reels Icon Desktop
instagram.com##a[href="/reels/"]:upward(3)

! Hide Reels Icon Mobile
instagram.com##a[href="/reels/"]

my instagram through brave didn't have the reels icon

for a filter list to completely remove shorts copy-paste > this list

Appreciating the "Learning Problem" - Why AI will never replace your job

Nukala Suraj — Thu, 28 Dec 2023 15:00:31 +0000

so... let's play a game !!!

i'll show you a series of patterns, and each pattern maps to a value of either 0 or 1

now consider this pattern, which number would this pattern map to?

if you said 0 you're probabily right

if you said 1 you're also probabily right

¯\_(ツ)_/¯

the point here is that whatever your guess was...

you had no idea what each of the tiles represented
you had no idea what the co-relation between the tiles was
you had no idea what 0 or 1 represents

just like AI and this guy here

he has 0 understanding of what the puzzle means and what his guess means, but he made the correct guess

The Learning Problem

the game we just played right now, is presicely what every ML/DL/RL/AI algorithm does

take data that has been cleaned/processed (into a puzzle)
find a pattern in the data
use the pattern on new data (it has never seen before)
hope it gets appriciated

but keep in mind that not every problem can be solved this way

because...

not every problem has (enough) data on it
not every data has a pattern in it

some of them also/already have a (not so) simple mathematical answer to them, you don't need rely to finding patterns

but for the rest, they can probabily (maybe not efficiently) be solved by having a computer find a pattern AKA learning from data

How does a Computer Learn from Data

short answer, you solve the learning problem 😝

long answer to solve any learning problem (ML, DL, RL)👇

unknown solution: think of this the true pattern/source of all the data we have
training data: data that we have collected and processed so a computer can find a pattern
learning algorithm: the actual algorithm that refines a model so the model learns from the data > eg: Perceptron Learning Algorithm, Backpropagation Algorithm, etc
hypothesis set: a set of all possible models that can find a solution > eg: Perceptron, Neural Networks, etc
final hypothesis solution: a pattern with the heighest accuracy

while this IS the long answer to solve any learning problem

this long answer lacks details...
the details which would be dealt with in the forthcoming blog articles

originally posted on my personal blog

thank you for reading
do let me know what you think in the comment section
✌️

Intro to Data Pre-Processing using Quantified Emotion Recognition

Nukala Suraj — Wed, 14 Jun 2023 12:38:12 +0000

This blog was originally posted on https://ziro2mach.com my learning "machine learning" blog

perhaps the only thing about machine learning that's more important than machine learning itself is data pre-processing 🙃

that's cuz as defined before machine learning is:

the ~science~ math of taking in real world info, converting it into numbers and then ~finding~ learning a pattern out of it

and info out in the real world brings along with it, ton of noise

Example Data from the Real World

as an advocate of learning by getting your hands dirty, here's an example

there's something called the russel's circumplex

something that helps quantify emotions

cuz ML algorithms learn best when the data they work with is continuous numbers instead of traditional encoded classification data like

while the class-ified data does represent numbers, the numberical value of a class doesn't always represent the intensity of an emotion, while russel's model gives you an activation and an pleseantness value that are already intensities of an emotion

Unclean Data

let's say we find a dataset with paramenters we are looking for

here the column pic represents an 3d array of red, green and blue pixel values of an image containing an emotion and the rest are pretty straight forward

Step - 1 : Splitting The Data

the whole goal of training an ML model is so that we could us it to actively predict output on unseen data/situations. a simple way of doing that is

the remaining 20% can be used to value the performance of the model developed

Step - 2 : Dealing with Missing Data

notice that there's some missing data in the age column,
so there are 2 common ways of dealing with that missing data

1. deleting entire rows if a required column is missing

note: works great for super ultra large datasets but since more data = better...

2. substituting the middle value of the column (depends on type of data)

Step - 3 : Dealing with Class Data

many a times, the data in datasets is class data and while encoded class data might not always accurately represent the intensity of a parameter, something is better than nothing

there are 2 common ways of dealing with class data, lets take the gender column

1. one hot encoding

when one column is split into number of class columns, like gender has 2 classes: male and female, so the gender columns gets split into 2 columns: a male column and female column

2. label encoding

for columns with binary classes, like true or false, male or female, yes or no, etc so that one of the class label is replaced with 0 and the other with 1

Step - 4 : Feature Scaling

different columns usually represent different parameters, and not all paraneters have the same proportion. assuming a dataset of age and height, the age column has a range of 1 to 100, while the height column perhaps has a range of 100cm to 200cm

why is this important?

when we plot these values without scaling em to the same range it would look like

and let's say we tried to find a line that best fit through the points it would look like

however if we scaled the inputs to the same range, it would look like this

which even from a glance we can tell that the line better fits the model, i.e there is lesser error to predict for unseen data

now feature scaling is commonly done using 2 methods

normalization
standardization

where x is the current input we want to scale, here's an example of normalization on the dataset we were working on

this leaves us with a ready for training dataset

Step - 5 : Dealing with the Testing Data

we've done a lot of pre-processing on the training dataset, and testing data is going to look like the unclean training data

so we've to remember to

replace missing data with the middle value of training data
encode class data to match the training data
feature scale using parameters of the training data

you get the point we've use the exact same operation tools used on the training dataset for the operation we would be doing on the testing dataset

yuppp data people shouldn't become doctors 😝

and with that we have testing data that is ready to be taken for a ride in our ML model

How I Built a Meme Bot for Instagram

Nukala Suraj — Sat, 16 Jul 2022 18:44:43 +0000

build your own instagram bot from scratch (or) set one up in like 10s for free

a brief overview of this blog post:

Introduction

Imagine you have a cool meme page on instagram with about a 1M+ followers and the best part - you never really need to interfere with it...

not kidding... but well there sure is a catch here cuz otherwise 1M+ followers would not longer be a feat anymore:

any page on instagram/social media in general has got 2 aspects to it:

content creation 🎨
marketing 📢

this bot system has got your back for content creation and you've gotta take care of the marketing and making sure the page grows...

here's an example of a successfully automated meme page w/ poor marketing: @taewonsu

and I've really gotta mention I absolutely suck at marketing and hence...

and yea obviously @taewonsu is my automated instagram meme page

So What Exactly Does The Bot Do

doesn't matter if you're a human or a bot(AI), creating memes people ❤️ is tough

but... there exists reddit, the front page of the internet

this is where memes first hit the internet and then they trickle down to instagram/facebook/twitter/discord

and most people shamelessly just steal memes from reddit (i.e. they do not credit the original creator of the meme)

that however that doesn't apply to a bot so... it'll will credit the original u/creator of the meme and then just post the meme to our page

Creating Your Own Bot

This is your last chance, after this there's no turning back.

you take the blue pill... I give you the easy way... setting up a meme bot from my source code.
you take the red pill... I show you how the bot works and how you can build your bot from scratch.

Blue Pill

clone this repository off github
create an instance on heroku (or) whatever
configure the environment variables for your bot
GG

Red Pill

the bot does 3 thing:

scrape for top memes of the day in the specified r/subreddit
check if a meme has been previously posted
post the unique memes to instagram

1. Scraping

working with reddit's API has been an absolute pleasure

let's say the URL for top content in a subreddit say r/animemes is https://www.reddit.com/r/Animemes/top/

then the endpoint for the API would be https://www.reddit.com/r/Animemes/top.json

so fetching the top 3 memes of the day would be:

// fetching new memes from reddit
const res = await axios.get(`https://www.reddit.com/r/${subreddit}/top.json?limit=${top_x ? top_x : 3}`);
animemes = res.data.data.children;

2. Unique

when we're posting a bunch of meme's per day it'll be pretty likely that we may re-post something

so the bot maintains an hashmap, where the key is the id of the meme in reddit's database and the value is the meme data

when ever it gets a new meme, it quickly checks if the id exists in the hashmap, if it doesn't the bot posts the meme and then adds the meme to the hashmap

// fetching past memes
const raw_pa = fs.readFileSync(posted_animemes_location);
const posted_animemes: animeme_in_json = JSON.parse(raw_pa.toString());

// cross-referencing a new meme
if (posted_animemes[animeme.data.id]) {
  console.log("seen this!");
  return null;
}

3. Posting

while building the bot, I was pleasantly surprised at how less bug I was running into and I'm not gonna lie it did feal really good... and then instagram API happened

interacting with instagram's API was an absolute pain in the ass... spent like 3 days and I still couldn't properly set up the access tokens required

luckily I found a god send instagram-private-api

instagram-private-api is basically a typescript 🤩 wrapper over instagram's private API [the endpoints you'd find if you inspected the network panel of your browser's dev tools]

instagram-private-api greatly sped up and made the developer experience just way more greater and I was able to implement the auto post to insta reletively quickly

// logging into instagram
try {
  const auth = await ig.account.login(ig_uname, ig_pass);
  if (!auth.pk) return "LOGIN FAILED";
} catch (error) {
  console.log(error);
  return "LOGIN BLOCKED";
}

// uploading an meme
try {
  const publishResult = await ig.publish.photo({
    file: imageBuffer,
    caption: `credits: u/${animeme_to_post.author}\n${animeme_to_post.title} ¯\\_(ツ)_/¯\n.\n.\n.\n.\n.\n#${hashtags}`,
  });
} catch (error) {
  console.log("work on fixing that image size thing you sucker");
}

the best thing here is since we're basically using instagram-private-api, instagram can't really recognize us a bot

and that's how I built an automated instagram meme page from scratch

If You ❤️ This Blog Post
Be Sure To Drop a DM on Twitter

also here're all the links throughout the blog post
og automated bot @taewonsu: https://www.instagram.com/taewonsu/
source code on github: https://github.com/LucidMach/taewonsu
my twitter: https://twitter.com/lucidmach

✌️,
LucidMach

You've Gotta Check Out SnowPack...

Nukala Suraj — Sat, 01 Jan 2022 09:52:22 +0000

Introduction

So like most 2020 developers I used to give 0 fucks about bundlers...

I mean react/next/svelte takes care of it for us right

but then, I started doing this course called threejs journey by brunosimon in which bruno makes us understand why bundlers are important

TL;DR helps client import node_modules files that are stored on the server

WebPack

The world's most popular javascript bundler "webpack" has a bunch of disadvantages

It is pretty complex, for context and it took me 2 days to understand and be able to configure webpack on my own
It is kinda really slow cuz it rebuilds and rebundles the files for every change [especially if you want to use typescript]

Here's Recordings of WebPack

Time to Initial Load: 35s

Time to Load Changes: 20s

Enter Snowpack

Snowpackjs has a fundamentally different approach to bundling...
It builds each file and caches it for future use, while webpack rebuilds and rebundles every single time

Bonus

Snowpack is super easy to configure
here's the config I used in the below test

module.exports = {
  mount: {
    src: { url: "/" },
    public: { url: "/", static: true },
  },
};

it mounts files in src, public dir to "/" (root directory of served content)

Here's Recordings of Snowpack

Time to Initial Load: 20s

Time to Load Changes: 14ms 😱

Thanks

if you ❤️ this blog post... I'd ❤️ to tell you that this is the blogified version of the following thread
// Detect dark theme var iframe = document.getElementById('tweet-1477165287384305665-425'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1477165287384305665&theme=dark" }

DAOs Can End World Poverty (Probabily)

Nukala Suraj — Thu, 11 Nov 2021 18:23:29 +0000

By the end of this blog post,

I'm pretty sure that you would be able to convince anyone that DAOs could potentially end world poverty

but first what are DAOs???

DAO stands for Decentralized Autonomous Organizations

and the best way to explain DAOs would be on elaborating the individual terms

Decentralized AO:

You know how democracy is defined as by the people, for the people, of the people but then it rarely does much about the people.

We'd imagine on just listening to that definition that the people would make decisions and hence govern themselves... that my friend is a decentralized government i.e. there is no central authoritative, it's the locals/individuals that make the decisions

Now here in DAOs, that is done using blockchain... you know that ledger system that every member of the network has access to and on verifying new transactions gets money(mining lol).

D Autonomous O:

I don't know about you, but when I hear the term "Autonomous", I get a picture of Arnold Swazenblahblahger as the terminator.

This term means that something that is carried out without human intervention...

and in DAOs that is done using smart contracts basically just contracts that are recorded on a blockchain.

You do know that a contract is essentially a paper that records a promise of payment upon completion of the job right

So smart contracts can be made for pre-agreed upon terms

eg) every time the company makes a sale... 5% of the profit go to that NGO we're supporting

DA Organizations:

we'll do I really have to break this term down lmao...

basically any group of people doing anything... be it a business or a club or a charity

So how the actual f would DAOs end world poverty ffs

lol If you could determine how DAOs could end world poverty just be reading that... you're probably Einstein level genius

So let's say a hypothetical country "A" has a DAO based government.

a government like any other organization requires income to function...

how does a government earn money?

through taxes of course

let's say this government has adopted etherium/cardano/polygon/(any crypto that supports smart contracts)

Every time a citizen in this country makes a purchase, he pays some sort of Goods and Service Tax.

There could be a smart contract that says "whenever citizen makes a payment to a business, transfer 5% to military, 5% to the infrastructure fund, 5% to ~~bank account~~ etherium addresses of people living below the poverty line"

This need not be just on GST, or to the military/infrastructure/NPL fund. We could apply it to any tax paid inside the country and the money being transferred based on the proposed annual budget of the nation... all ~~automatically~~ autonomously

You get the point right...

in a DAO based government

the money goes directly to people who need money from people who have surplus

instead of

the money goes to the government, out of which some who knows and finally a negligible amount to the ones in need

But

Ok, so you might ask me how would the DAO know that a person is actually BPL and not someone who no longer is BPL

well, the entire transaction history of every citizen of the country is recorded on the blockchain... we could have another smart contract that adds/removes people from the BPL list based on the gross income every month

Fun Fact

The above scenario is kinda implemented except it was implemented to help the refugees that flocked to the country of Ethiopia

A company called Atala Prism developed a smart contract-based system in Ethiopia to fund the student refugee and the system was pretty much what we discussed in this blog post.

Link:

https://forum.cardano.org/t/emergency-identification-and-financial-inclusion-for-refugees-and-disaster-victims-through-blockchain/60685

Summary

DAOs are basically a collection of pre-agreed upon smart contracts that control the finances of an organization
any organization that adopts a DAO approach can get rid of corruption
the benefits of adapting DAO will make blockchain more mainstream

Homework

Try to see how a local business you know would be if it were a DAO. What would the smart contracts controlling the finances of the business look like?

Connect???

I'm pretty active on twitter and that's where you could reach out and we DM/PM talking about random tech stuff
@lucidmach

React UI for Python Scripts using Node.JS

Nukala Suraj — Wed, 04 Aug 2021 18:40:54 +0000

If you are familiar with node.js, you know that it is

Ultra Fast ⚡
Ultra Scalable ⚖️
Ultra Powerful 💥
Ultra Simple 😁

and python has great scientific computing libraries [NumPy,Pandas,etc] that make it the go to choice for academics, data scientists, deep learning engineers, etc.

Some time ago, I wanted to explore computer vision, something that I had been really fascinated for quite a while.

So I started learning CV and wrote a python script that would take an image and remove color channels to make it look like as if a color filter had been applied to it.

It was super cool and I wanted to make a fun little website/webUI out of it so I could share it to the rest of the world.

Being a self-taught MERN Stack Developer, I started to research upon how one could combine python and javascript.

A Week or Two Later, I Did It.

And this blog is a documentation of how I solved this challenge.

I have also including here, the full code I used to deploy my application to Heroku

Live Deployment: https://color-filter.netlify.app
Source Code: https://github.com/LucidMach/ColorFilter

How Does It Work

The Projecct has 4 phases

Webcam -> React -> NodeJS
NodeJS Py Child Process
Actual Python Program
NodeJS -> React -> Canvas

Phase 1: Webcam -> React -> NodeJS

We begin by first extracting an image from the webcam, we can use plain HTML5's navigator.getUserMedia API but there's an react package that simplifies the whole process.

yarn add react-webcam

we can use getScreenshot({width: 1920, height: 1080}) to take a 1080p snapshot of the user.

🔗: React-WebCam Docs

Now that we have a snapshot (as a base64 string), we've to send it to the server

Any browser can only run javascript on the client, so we've to run python on the server

we make a post request

axios.post(url, { image: imageSrc, color: selectedColor })

I also send the selected color, as I need it for the application that I'm building

By default the server(bodyParser middleware) limits the size of data it can get(post) to 1MB and pictures are usually way big

Unless you used an image optimizer like I did in a previous project

Let's Push the Limits

app.use(bodyParser.json({ limit: "5mb" }));

Also we need to extract the image from the base64 string

Example base64 PNG String
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKsAAADVCAMAAAAfHvCaAAAAGFBMVEVY

Actual base64 Image
iVBORw0KGgoAAAANSUhEUgAAAKsAAADVCAMAAAAfHvCaAAAAGFBMVEVY

const base64Image = req.body.image.split(";base64,").pop();

Phase 2: NodeJS Py Child Process

Now that we have the image back on the server, we need to run the python script

If you've ever passed parameters(argv) to a python script / built a CLI tool, what we're going to be doing is very similar

Before that let's save the image temporarily cuz we can't pass images as argv(script parameter)

const fs = require("fs");

fs.writeFileSync("input/image.png", base64Image, { encoding: "base64" });

Now, we spawn a python child process
we do this my representing terminal commands to an array

const { spawn } = require("child_process");

const py = spawn("python", ["color-filter.py", body.color]);

Every python script probabily sends data back to the terminal/console

To read py console log, we create a callback function

var data2send

py.stdout.on("data", (data) => {
    data2send = data.toString();
});

console.log(data2send);

Phase 3: Actual Python Program

The python script gets executed, in my case it's a numpy script that conditionally removes color channels

If you're interested you can check out the source-code on github

Phase 4: NodeJS -> React -> Canvas

now when the py child process terminates we need to encode the image back to base64 and send back a response

we can do that by latching a callback to when the child process ends

py.on("close", () => {
  // Adding Heading and converting image to base64
  const image = `data:image/png;base64,${fs.readFileSync("output/image.png", {
    encoding: "base64",
  })}`;

  // sending image to client
    res.json({ image });
  });

BONUS PHASE: Heroku Deployment

This most important part of any project

It no longer only "works on your machine"

The process is basically the exact same as you deploy vanilla node apps + config for python childprocess

Standard Deploy Node to Heroku
Heroku Node App Deployment Docs
Add Python Packages
In the JavaScript World we have a package.json which tells every node instance all the packages required to run

We make something similar for python called requirements.txt to replicate that behavior.

It would look sorta like a .gitignore file

// requirements.txt

numpy
cv2
matplotlib

when Heroku notices the requirements.txt file it runs pip install -r requirements.txt, hence installing all the required packages

Configure Buildpacks Heroku Node App Deployment Docs Here's the TL:DR; version

// terminal


// This command will set your default buildpack to Node.js
heroku buildpacks:set heroku/nodejs

// This command will set it up so that the Heroku Python buildpack will run first
heroku buildpacks:add --index 1 heroku/python

If You ❤️ This Blog Post
Be Sure To Drop a DM on Twitter

✌️,
LucidMach

The 20% Optimization That Improves 80% Web Performance

Nukala Suraj — Mon, 26 Jul 2021 14:49:27 +0000

In today's ultra fast paced world,
3 Seconds of a not-yet-loaded-website is more than enough for the user to click that close button

This is especially important if you're trying to build a web based startup.
Having an optimized website could lead to significantly more revenue

Components of a WebSite

Anything on the Web has 3 main components

FrontEnd
BackEnd
Network

No Matter How Optimized the backend is (a common huge mistake kinda 😅)

End of the day it is the network that impacts 80% of a website's performance

So by Pareto's Rule,
We focus on the NETWORK
The network is what connects the frontend to the backend.
Most sites make 100s of requests in the background as the site loads.

If each response carries a lot of data

The time for the data to reach the client increases
The time for each resource to render increases

basically the website take forever to load

Solution

Reduce the size of files by
1. Sending only what the user (and not the website needs) aka code splitting
2. Removing whitespaces or uglifying the file

If you use webpack, this is automatically done for you
BONUS: You could PWA and cache data on the client [But That Topic Is For Another Blog]

Reducing the size of images by optimizing them

Reducing the size of images by optimizing them

What does this mean?

We don't reduce the size by reducing resolution,
We reduce the size by reducing the scale of colors.

Let me explain,

The human eye can't distinguish between #000000 and #010101.
So when we optimize images we're reducing the bits used to store color data of pixels

How do we do that?

There are libraries that take care of this for us.

However we can't create a program to do this every time for every image so, I created a CLI Tool [My First CLI Application] called Shirmkage which stands for shrink + image.

You can check out/play around with the source code on my github.

npm install -g shrimkage

Shrimkage makes optimizing images in bulk easy

You can use it directly in the terminal [that's what a CLI is tho 😅]

shrimkage folder

The default level of reduction is 50 (/100). so if you want more optimization you can shrimkage folder --level=10

Shimkage also give you the option to apply optimizations to individual images

shrimkage file --path=./test.png

And That is The 20% Effort to gain an 80% increase in web performance
✌

If You ❤️ This,

Follow Me on Twitter,

Where you can see updates on all my work [including blogs]

Also, Don't forget to DM Me
Let's have small dev talk
😁✌

Firebase Auth | Understanding The Auth

Nukala Suraj — Tue, 13 Jul 2021 16:21:54 +0000

NOTE: This blog post assumes that you are at-least familiar with setting up firebase SDK
If you don't I'd recommend reading my blog on firebase firestore first

If you've built an application, you've probably had to deal with authentication and authorization

Contrary to Popular Belief
authentication !== authorization

Difference Between Authentication and Authorization

Consider A School

The School has a Principal

He Decides

If a Student Joins the School
If a Student Gets Debarred
If a Student Gets Promoted (Despite Failing Tests)
If a Student Gets Demoted ...

The School also has a Security Guard

He Decides

If/When a Person can Enter the Campus
If/When a Person can Leave the Campus ...

Now as an Analogy
Authentication: Principal
Authorization: Security Guard

Authentication

What is Authentication

The Process of Verifying the Identity of a User

Steps in Authentication

Creating An Account
Verifying An Account Email Address
Login/Sign-In
Password Recovery
Sign Out

Firebase Authentication

1. Creating An Account

firebase.auth().createUserWithEmailAndPassword(
  email,
  password
);

NOTE: You Receive a Promise from any Function from Firebase

2. SignOut

firebase.auth().signOut()

NOTE: Firebase removes the token stored on the client's localStorage (indexdb to be precise). It'll talk about it in detail in Authorization

3. Login

firebase.auth().signInWithEmailAndPassword(
  email, 
  password
)

4. Verifying An Account Email

// sends a pre-templated message to a specified email address
firebase.auth().sendEmailVerification(
  email,
);

5. Password Recovery

firebase.auth().sendPasswordResetEmail(
  email
);

Authorization

What is Authorization

The Process of Controlling Access to an Asset

How Does Firebase Authorize

When Ever A User's Auth State Changes
1. It Updates A User Token > Very Similar To JWT but not restricted to web application
2. It Stores the Token in the browser's indexDB (and not in the cookies) so it has a more controllable timeline
If A Valid User Token is Present, A User is allowed to Access the Resource

Accessing User Token / Checking Auth State

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
  }
});

A Faster Free Heroku (Kinda) | Quick Hack

Nukala Suraj — Wed, 30 Jun 2021 08:27:24 +0000

If you've been building stuff on web for a while now, you've probably heard of HEROKU and NETLIFY

Just-In-Case you haven't heard about it

Quick Intro on Heroku and Netlify

Heroku: A free PaaS (Platform as a Service), basically a cloud service that let's you host and share your web apps.
Netlify: A free hosting service for static sites, basically react, vanilla javascript, etc projects.

NETLIFY is Usually Used on Frontend Projects.
HEROKU is Usually Used on Backend Projects.

The Problem with Heroku

Pro's:

Heroku is Easy to Use.
Heroku is Free.

Con's:

Heroku has Premium

Heroku's free tier uses dynos (Stuff That Hosts Your Code) that sleeps after 30 mins of inactivity

Once a dyno falls asleep, It takes time for it to awaken.
So the initial response is slow and the damage is already done.

Work Around

Re-Read This Line

Heroku's free tier uses dynos (Stuff That Hosts Your Code) that sleeps after 30 mins of inactivity

If You Haven't Got It Yet, Re-Read It Again

Heroku's free tier uses dynos (Stuff That Hosts Your Code) that sleeps after 30 mins of inactivity

💡Light Bulb💡

30 mins of inactivity

All We Need To Do is Do Something Every 30mins.
Nah 15mins to be on the safer side

For node.js dev(s) Out There

// Run Every 15 mins => 900 secs => 900000 ms
setInterval(()=>console.log("😂😜🤣🤓"),900000)

GGWP,
@LucidMach
✌

Essential FireStore | CheatSheet/Tutorial

Nukala Suraj — Sat, 19 Jun 2021 09:04:21 +0000

In the prequel to this blog, we took a look at the concept of databases (noSQL to be more specific).

NOTE: FIRESTORE is a DATABASE as a Service(DaaS 😅), while FIREBASE is a BACKEND as a Service(BaaS)

In this blog, we’ll learn how to use firebase firestore in projects.
We’ll set up firestore as the database for a todo-list web app, without diving into the UI part [no HTML/JSX, CSS].

Installation

The 1st thing to do before we jump in is obviously installing firebase and firestore.

We have 2 ways of doing this

Browser: adding firebase and firestore as links inside file.html

<head>
  <script src="[https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js](https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js)"></script>
  <script src="[https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js](https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js)"></script>
</head>

Server: install it through npm/yarn (if you use react/node.js)

// in the terminal
npm install firebase

// in a js file
const firebase = require("firebase");
require('firebase/auth');
require('firebase/database');

Initializations

Now, that we’ve installed firebase, we’ve to connect it to the cloud(initialization).

This is done by copying API keys…, etc into the project.

You can get all the config details from the project settings page

To initialise firebase we paste the config into <script> or a javascript file

    const firebaseConfig = {
        apiKey: "AIzaSyBSABaeBTG4mteo-FrDtO-8qOIAxCX6yug",
        authDomain: "lucid-fireship-basics.firebaseapp.com",
        projectId: "lucid-fireship-basics",
        storageBucket: "lucid-fireship-basics.appspot.com",
        messagingSenderId: "316115989732",
        appId: "1:316115989732:web:935a8eefaca4bd9512a8f1",
        measurementId: "G-1V9QBWT3MG",
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

Now we make an instance of firestore into a variable, so we reduce a few keystrokes every time we interact with firestore 😂

const db = firebase.firestore();

before we can start doing anything with the database, we need to understand the data model (how data is stored in firestore)

Firestore Data Model

Firestore see’s data as collections of documents, and a collection can store sub-collections too.

It’s like “file explorer”, you can create folders and store documents or folders in it.

ANALOGY:
collections = folders
documents = files (eg: json)

CRUD operations with firestore

Now whenever we deal with any form of database, we can basically do 4 kinds of operations

Create Documents
Read Documents
Update Documents
Delete Documents

But before we can perform a CRUD operation, we need to select a collection to work with.

// to reduce a few keystokes to access the todos collection
const todos = db.collection("todos")

1. Create Documents

The documents stored would be converted to JSON so you’ve to follow an object-like structure.

NOTE: if you’ve done some python, it’s like a dictionary in python

doc = {name:"clap this article"};
todos.add(doc);

// or
db.collection("todos").add({name:"clap this article"});

2. Read Documents

2.1 To quickly get all the documents inside a collection.

db.collection("todos").get().then(snapshot=>snapshot.docs.forEach(doc=>console.log(doc.data())))

now, that might seem complicated but its actually really simple

It takes a screenshot of the current state of collection
From the screenshot, we extract the docs stored in the collection
The forEach is a for loop that console logs data stored in every doc

NOTE: => is an syntax for arrow function

2.2 To get a specific document.

const docid = "sfdagerfkajilf";
db.collection("todos").doc(docid);

Now when we add a doc to a collection, firestore generates a random id and uses it as the name of a doc
To fetch a certain doc, we need to specify the id

3. Update Documents

While updating a document, we can

3.1. Reset the Whole Document

when the document has only 1 key in the document(object), it doesn't matter which one you use

    db.collection("todos").doc("dagfshdjhkdfagsh").set({
      task1: "follow LucidMach on medium",
      task2: "share this article to everyone"
    });

3.2. Modify a Part of the Document

    db.collection("todos").doc("afdghrujfkhotdf").update({
      task2: "follow LucidMach on twitter"
    });

notice that, on using .update(), we only change the specified part of the document, so the unspecified doesn’t change,

so task1 remains as follow LucidMach on medium so don’t forget to do both of them 😜

4. Delete Documents

This operation is very similar to updating a document, you need to specify a doc id

db.collection("todos").doc("afdghrujfkhotdf").delete()

Final Words

No, I’m not dying 😜, but if you’re reading this line,

I appreciate the time spent reading this post. I hope this helps/serves as a cheat sheet for whenever may you need it

✌, LucidMach

Come HangOut With Me

Twitter

YouTube

Instagram

The Battle of The NoSQL Databases | When To Use What

Nukala Suraj — Sat, 19 Jun 2021 08:14:50 +0000

Let’s start from the very beginning….

What is a database?

It’s just a base/place for data, it's as simple as that.

However, the bigger question is “why can’t you use something like an excel sheet to store data?”

The answer is yes you can but it depends more on what you’re trying to do

An excel sheet is perfect if you’re the only person using/updating the data, now when you scale up to more than say 3 people (in different locations), try to have the excel file store the most up-to-date data as possible, you’ll see exactly why the excel file is a terrible idea.

What are the different types of databases?

Traditionally people used something called Structured Query Language (SQL, 🔊: sequel), It basically created commands to do what you would to in an excel table.

example: if you wanted to insert a row into the table, instead of opening the table and manually entering values to the table, you would now do

INSERT INTO table(column1, column2,...)

VALUES (value1, value2,...);

TL;DR it kinda made excel programmable.

Present-day humanity, we have 2 main types of databases

SQL: uses tables to store data
NoSQL: uses key-value pairs to store data

Reading that you may be thinking why did humans bother to come up with NoSQL, it seems easier to store data in tables rather than in key-value pairs.

Well, on that you aren’t wrong, it is easier to store data in an SQL database disregarding the fact that you have to learn an entire language for it.

The main problem occurs when you’re looking to scale beyond 1000 people(ig), especially when the storage on the server(or pc in this case) is exhausted.

In NoSQL, you can do this very easily by simply just splitting data into n parts and merging it in different systems later,

unlike in SQL where merging is complicated, you have to create a pre-defined schema(blueprint), share the blueprint and then split data, not to mention ensure your index for each row is unique especially for the new data that you add.

The Major Players in the NoSQL Battleground

So for the average developer, while choosing a NoSQL database, typically has 2 choices:

Firestore
MongoDB
… ( There is always a 3rd option, you just may not know what it is 😂)

Let’s Talk About MongoDB

This is a pretty well-established database and it’s currently the database of choice for most people (excluding me), but that is obviously because they have their needs.

MongoDB came out in 2009, and it was basically the only noSQL database easily available for public use at that time.

That led to the butterfly effect that made it so well established, but that doesn’t explain why no other database has overthrown it yet.

Now, when mongoDB came it was an offline database (it wasn’t on the cloud), but as the times changed it adapted to the changes, actually the community (fans that use+love+live it) ensured it adapted to changes.

The community came up with mLabs, a cloud-based mongoDB database.

mLabs is what turned out to become the present day’s mongoDB atlas

Let’s Talk About Firestore

Firestore is the flagship database of google’s BaaS backend as a service

QuickNote: Firebase runs on top of GCP google’s IaaS infrastructure as a service

Most people think firebase is the database (due to a common ending “base”), but NO, firebase is a backend and offers a lot of additional services like hosting, authentication and analytics.

That is firestore’s key selling point right now.

Easy to use, free ( as long as you are in the free-tier ), with a lot of additional features

When To Use MongoDB over Firestore

Firestore comes under firebase, where you have 0 control over what you can configure/host there.

**Use Case: **When you need a server, where you plan to have custom-built APIs like

ML model
APIs that serve sensor data [eg: open weather map, etc.]

In this case, you already have and are paying for computation resources, so it’s most economical to stick to 1 service.

You could:

host a local mongoDB instance in the server.
connected to the cloud-hosted mongoDB Altas cluster.

When To Use Firestore over MongoDB

When the only central(server) resource that you’re using is a database, it’s more beneficial to use than mongoDB.

Use Cases: an app or a SPA(client-rendered web app)

Lemme place more emphasis on using firebase if the only additional resources you need is a database.