DEV Community: gohashira

I Tried Every Hot Programming Language

gohashira — Fri, 13 Dec 2024 05:11:24 +0000

In this post, I'll make an attempt to compare GoLang, Zig, and Rust. And why Rust wins this comparison (for me).

Story Time!

I wrote 3 of my projects in GoLang, Zig & Rust. These projects are sufficiently big to get a good idea about the language fundamentals, shortcomings, and whether there's a problem with the language, the framework, or the ecosystem.

TIP: feel free to jump to TLDR section to just get the damn answer.

GoLang

I started building developer tools a few months back, initially with GoLang.

The first one was a basic database management & migrations utility (dbdaddy) and I genuinely had fun working with GoLang.

Even though this was my very first attempt with GoLang building something more serious than Advent Of Code & 1 billion row challenge problems, I was surprised that it took me less than a week to get proficient at it.

Zig

All this while, I was dabbling with Zig on the side (nothing too serious). I heard about Redis changing their license to a "technically non-open-source" license.

And I thought to myself: how hard can it be to build a new open-source redis in zig?

Fast-Forward 2 months later: damn.

The basic idea behind "GbCache" was an LRU-based in-memory cache but the actual source of truth was to be saved on disk along with features like notifications for specific key/value changes caused and obviously TTLs assigned to keys.

It is impressive how explicit Zig is, which makes it all the more simple and easier to work with.

I started GbCache from the perspective of "if it were to go HyperScale™ tomorrow, can it handle the load?"

This perspective drove me to rule out GoLang because if I am unable to reason with extreme certainty about the memory allocations, I won't have complete control over the speed.

Doing things from this perspective is a really great learning experience because suddenly you start seeing all the points in your program that might blow up, run out of memory or may become a bottleneck —the hot paths in your code.

Due to Zig's explicitness, I was sure of exactly where & when I am allocating memory.

But... Zig is NOT a memory-safe language at the end of the day and I am a guy with skill issues the size of Everest.

enters rust

In the last 2 years, I've tried and rage-quit on Rust 3 times. Coming from a JavaScript background where we have a bajillion gb ram in our macbook m69 maxes, I never really understood why Rust had those rules, and going in with the hype was probably a bad angle to look at it from.

Even though I rage-quit several times, Rust was still in the back of my mind, its weird syntax, frustrating memory rules, and mind-boggling lifetimes.

But something hit me while writing Zig... I already was keeping track of all these memory rules and lifetimes but as a mental overhead.

I started noticing patterns and boilerplate in my Zig code trying to do what Rust already does.

Rust

While building the CLI client for SFS (SFW name - "Simple File Storage") I decided to give Rust another try.

This time around while going through the rust book, I started to feel the "why" of it all.

The most fundamental thing that I love about Rust is the ownership & borrowing-based mental model of memory.

Even though this model of owned & referenced memory is imaginary, it is a convenient mental model to reason about and incurs less overhead over my head.

As opposed to the classic mental memory model that languages like C & Zig incur on your head. Have to track individual memory allocations & their lifetimes in my head? no thanks!

TLDR

GoLang

FAST (like your 5 MAUs are gonna need it lmao)
reliable
stupid simple, language is never standing between you & your goal
great ecosystem of packages

Zig

BLAZING FAST
stupid simple

Rust

BLAZING FAST
reliable
great ecosystem of packages

All Of Them

amazing error handling

If you're an everyday normal mo— backend engineer and like doing numbers on their sprint performance, your best choice is probably GoLang.

"but my company doesn't use GoLa—"
"leave the company, leave it, use the right job for the tool. leave the company."

To me, GoLang is like an arranged marriage where you never feel that rush in your heart but it never lets you down, it's your ride-or-die companion and you can bet your whole life on it.

But my friend if you are looking for that rush keep reading on!

Rust Puran

bu— but i want that rush... i want to feel my heart explode on catching a mere glance at their ey-syntax... i want to feel like i am in heaven when I'm with them and in hell when I'm not...

Let's have a quick look at an example of multi-threaded safety in Rust.

use std::thread;

fn main() {
    let mut counter = Box::new(0); // 32-bit integer allocated on the heap
    let mut handles = vec![];

    for _ in 0..10 {
        let handle = thread::spawn(|| {
            *counter += 1; // trying to edit the value
        });
        handles.push(handle);
    }

    for handle in handles {
        handle.join().unwrap(); // WAITING FOR ALL THE THREADS TO COMPLETE
    }

    println!("Result: {}", *counter);
}

We have a heap-allocated value and there are 10 threads trying to modify it independently.

This code is unsafely accessing the counter variable as all the threads will try to modify counter simultaneously.

In other languages, similar code will happily compile and run.

If you have worked in a multithreaded environment before, your first thought might be to use a "mutex" to prevent race conditions in updating the counter variable.

But it's easy to miss little things like this in a big codebase due to human error.

Rust won't even let this program compile.

Due to ownership & borrowing rules, the compiler will detect that you are mutably borrowing counter in the first thread in the first iteration of the for loop... ok until now... the second iteration also wants to mutably borrow counter parallelly? unsafe! raise a COMPILE-TIME ERROR!!.

referencing or "borrowing" a value from its owner with the intention of mutating/modifying is called a "mutable borrow"

src/main.rs|8 col 36-38 error| cannot borrow `*counter` as mutable more than once at a time `*counter` was mutably borrowed here in the previous iteration of the loop

In situations like these, other languages don't give you any error at all. It's your responsibility to inspect the correctness, Rust prevents that.

Constructs like these spread across the language help you to not shoot yourself in the foot (often).

Conclusion

IT DEPENDS!

I really wish there were a language that was the answer and even if GoLang comes pretty close to that, it really depends on your use case and most importantly, your team.

for me, Rust is a pleasure to work with (for now, who knows... hehe)

folks at TigerBeetle took a chance on Zig and they're happy with it.

Primeagen is happier with Zig.

for Jarred Sumner, Zig is fine, he wrote Bun in Zig.

Mitchell Hashimoto (guy behind HashiCorp) is writing ghostty in Zig, a BLAZING FAST termin—

.
.
.

wait...

How I Got a Job as a Self-Taught Developer without a College Degree

gohashira — Sat, 27 Jan 2024 12:39:18 +0000

I am a 20yo self-taught engineer who recently retired from frontend dev (cuz' I got sick of it) and I've been working with web tech almost every day for the past 4 years.

3 years of which, I spent writing production code

so much garbage code was pushed in these years, god I wonder what an idiot my employer was.

I love solving problems (also the reason why I left frontend) and you can find me working on FOSSMeDaddy! or playing chess in my free time. (I don't have a social life, duh...)

In this post, I'm gonna use the word "I" a lot of times to indicate that these were my experiences and of course, I'm gonna be highly biased towards them, you aren't supposed to hear "you should" instead of "I" :)

I hope you enjoy reading this.

The First Gig

The spark ignited in '20 when I first watched Clever Programmer's Netflix Clone video in React.js.

He made it seem simple and I was so excited, I jumped head-first only knowing how to declare variables in JavaScript and some basic Python knowledge from high school.

Now, I know those guys aren't the best place to learn from these days mainly due to the heavy pushing of their expensive boot camp courses, but their YT tutorials really helped me at that time, and you know what they say:

you never forget your first. (mentor)

No joke, I akshually started my web dev journey by writing a useState not knowing what the hell it, or anything I was seeing, was.

I made 2 purely frontend clones while strictly following the tutorials. With every line I wrote, I learned a bit of both React and JavaScript, classifying which is React and which is JS.

After 2 projects, I lost my patience, closed YT, and continued with the 3rd one - Instagram Clone.

It felt like a freakin' battlefield... errors everywhere, the backend console, the frontend console, my life, CSS console, everywhere! but I made it through all those errors, googling my way through.

kids... ChatGPT didn't exist at that time, we used to do everything from StackOverflow and Logrocket Blogs

Fast-forward 3 months of more random projects, I started applying for internships on Internshala (the best platform to apply for internships, In India at least).

📝

The key is to get in the door somehow, Once you are in the industry, it's relatively easy to get new and slightly better opportunities while your resume fills up with experience.

I specifically applied for unpaid internships in startups. That way, it was easier for me to get in, there was no pressure to manage skill-related expectations and it was implicitly clear in everyone's mind at the company that this person was here to learn and would make tons of mistakes.

After getting in, All I had to do now was learn and shoot down prod less (ik... impossible right?!).

Learn, Learn, Learn

I never went to any Bootcamp or ever took a udemy course on the things I did but I can for sure tell now, I was better off not taking them.

📝

Yes, these bootcamps and zero-to-hero courses give you the knowledge but also give you a weird fear of leaving them, you get too comfortable in the course and forget that they are highly spoon-fed environments to make you learn things easily.

This situation is also known as The Tutorial Hell

Lucky for me, I unknowingly avoided it.

Being more hands-on and spending more Time In The Saddle, I learned stuff better, reading the docs for the APIs & libraries I was using gave me clarity on how things work.

The internship was a transformative experience in terms of my knowledge. It was the first time when I grasped basic concepts like APIs, Frontend-Backend connectivity, Authentication & Security, the Importance of efficiency, Code readability, and Communication in a professional environment.

I burned out after completing the 9-month internship, but after a week's break, I was back doing projects and applying to more opportunities.

If I was doing it just for the money's sake, with no passion, I would've never taken the unpaid internship in the first place and would've sloshed around the shallow waters doing 6-month bootcamps.

📝

You can become a good developer if you do it for the money but at some point, you just have to be passionate & curious about what you do,

That's what separates a good developer from a great developer.

-ThePrimeagen

i know i've quoted him twice... i like primeagen okay! he makes me want to be a better ma- develop- engineer!

There are now, no more takeaways left in this post.

But before you navigate away, I wanna talk about some of the pros & cons of ditching college.

Why?

More of a personal choice than a logical one.

I hated every living minute at school, well, apart from the social interactions, you know friends & stuff...

And I didn't wanna continue that life into college, I love studying Physics, I love studying CS & I love studying Math, but I never loved studying them just to clear an exam, everything is exam-oriented and I am definitely not the type of guy who likes being told by teachers "we can't study that, that's not in the syllabus"

So I struck out on my own.

Pros

Whenever I tell recruiters that I didn't go to college to pursue being a developer on my own, I usually get a positive, mildly impressed reaction from their faces. From there the conversation is only about skills.

It honestly does the filtering of bad companies for me, I don't wanna be in companies that value degrees above actual skill sets and I like being around people who were hired this way, who love what they do just as much or more than I do.

Cons

Zero social life.
No proper learning curriculum & structure.
Missing out on the fundamental & low-level knowledge taught in colleges.
Missing out on opportunities that a good college fetches for you without you having to search for everything.
Recruiters doubt your ability to persevere in the job.

Just the fact that you went to college for several years, did what you were told to do, and achieved relatively above-average grades shows your discipline & ability to persevere.

These gaps can be filled to an extent but you really can't do about the numerous opportunities you miss out on that are CS University exclusive.

What did parents say?

I made a bargain.

after passing out from school, I had one year. if I can prove someone will hire me and I can sustain myself, they'll let me do whatever I want or else... college.

and guess what?

Neural Nets for Web Developers #1: Quick Start w/ TensorFlow

gohashira — Tue, 16 Jan 2024 15:51:45 +0000

Introduction

In this multiple-part series of posts, I plan to introduce the concepts of Deep Learning to my fellow web developers.

In this post, we'll start from the very first question that arises after hearing the word Neural Nets "What is a Neural Net?" and gradually work our way up to our first Deep Learning Model making predictions on our data.

In the last few posts of this series, I've planned to include a project laying out and implementing advanced DL topics like Convolutional Neural Nets & more.

Without further ado, let's get started!

What is a Neural Net?

Let's start with an analogy & then get to the first principles.

This is a figure depicting the structure of a single Biological Neuron.

There are billions of these in your brain & your body connected to each other at terminals and communicate via certain chemicals (neurotransmitters) and electricity signals.

The junction between 2 neurons is called a synapse where electric signals from neurons get converted into these chemicals, which then travel the gap in the synapse & get converted into electric signals again in the second neuron.

When your brain and/or body is doing an activity, that to some extent, has repetitive patterns in it, certain networks consisting of these neurons get activated periodically again & again.

Mind-blowingly enough (pun intended), after a few repetitions, these networks begin adapting certain parts of the neurons in them to facilitate faster & stronger electric signal transfer.

This happens when you learn to do something physically or mentally.

Here, when I say networks being "activated"

I mean, the neurons in the network serially fire electrochemical signals causing some of the subsequent neurons to fire & some to not fire resulting in a unique pattern of firing of signals with different intensities,

In turn, this causes other connected networks to activate that MIGHT be connected to other areas of your body or even your brain.

Understanding "learning" in terms of connections

In our brains, every thought, activity or response corresponds to a certain network of neurons being activated.

While reading this post you can 3asily 1denti5y 3ords eve9 if they are not exactly what you see.

In your lifetime, reading millions of words has developed strongly connected neural networks in your brain taking input from eyes & outputting "ideas" for what the next whole word could be.

The same happens when you speak, activating certain neural networks that rigorously take input from your mouth muscles moving & depict the next relevant movement such that you can produce the next relevant word the instant it "pops up" in your head.

It was a long run of saying non-sensical words to meaningful conversations.

The tireless effort from moving your legs randomly to walking with outstanding balance.

bicycling, learning javascript, learning math.

All of it boils down to certain groups of neurons firing in certain patterns millions of times to produce the "conscious you".

Have you noticed a pattern till now?

All of the learnable mental/physical actions you did, at first, started with randomness and slowly got more accurate or "improved".

Let's define "improvement" on an abstract basis:

start with randomness
change
calculate accuracy
change in whatever direction that helps improve accuracy
repeat until the maximum possible accuracy is achieved

The Artificial Neural Networks merely mimic this process and in the past few decades, we've started to reap the benefits.

This abstract process of improvement is even followed by nature itself in a modified approach, outlined by Darwin's theory of evolution (Survival of the fittest).

Let's look into ways of how can we replicate this process digitally.

The Perceptron

After many iterations of ON/OFF neurons mimicking biological neurons, in 1943, Warren McCulloch and Walter Pitts proposed the "Perceptron" model which was more well-suited to computers than other models depending on the binary form of signals.

Let's break this figure down into components.

Think of the AN (artificial neuron) as a machine or a big mathematical function that receives some input, processes it and generates an output where the output depends on the input.
The X1, X2 & X3 here, are the numerical inputs
The inputs go into the summation unit that does a weighted sum of all the inputs or X's (more on "weighted sum" in the next few sections)

Quick Note:

The greek letter "Σ" is called "sigma" and in Math we use it to signify where addition of multiple values is being done.
The summation unit then passes the summed-up result into a literal Mathematical function, this function could be anything that suits best, exponential, linear, sinusoidal, etc.

Okay... so this appears like a really big "machine" so to speak, but where's the "learning part"?

The "learning part" lies in the "weighted sum" in the summation component of the AN, let's look into it.

Summation Unit and Weighted Sum

The summation unit of the neuron receives input(s) in an array like so:

[12.495, 200.001, 89.055, 79.402, 203.379, ...]

Or more generalized as:

[x1, x2, x3, x4, ... xn]

The whole array is first multiplied by another array of the same length containing the "weights":

[x1, x2, ... xn] * [w1, w2 ... wn] = [w1 * x1, w2 * x2, ... wn * xn]

More you know:

This is also known as a "Vector Product" of 2 lists/matrices
And then all the elements of the resultant "weighted" array are summed up to produce one number (also known as the weighted sum).

Along with that we also add one more number to the final weighted sum number, called a "bias". (more on this number in the next section)
The resultant number is passed off to the last component of our AN, the literal mathematical function

A number to multiply with is often called a weight as the product is more/less "weighted" than the original number, for example:

12 * 1.2 = 14.4

In this simple operation, 1.2 was the weight which was weighted to 12 to produce a weighted product 14.4.

But you recently mentioned that an AN is like a machine, a mathematical function whose output only depends on the inputs given?

What are these w1, w2, w3...?

They don't seem to be dependent on anything? what are their values?

You got me there!

The weights array is initially randomized & contains random numbers.

And I know that this will produce a totally random output after going through the literal mathematical function.

But that's part of the plan!

Recall our definition of improvement, the first step is to start randomly AND THEN, steer towards maximum accuracy.

Machine Learning with A Hypothetical Perceptron

Let's try to understand the whole process with a simple, highly overused example of housing prices.

Let's look at this example of data

house_areas = [3765, 7530, 11295, 15060, 18825, 22590, 26355, 30120, 33885, 37650, 41415, 45180, 48945, 52710, 56475]
house_prices = [16203815, 11924806, 15363025, 20681588, 23343728, 31297816, 45029324, 48653516, 43981690, 52140160, 64208930, 59116732, 69043050, 66664916, 77795170]

In this example, our goal is to look at this data & predict for an unseen given house area, what should be the price of the house.

Our hypothetical perceptron for this problem looks something like this:

Let's start with defining a mathematical function for the last component of the Perceptron,

Because we aren't doing something crazy here, let's set the function to the identity function in Math which just outputs the exact same input that is passed in it.

Let's now go through the process of "training" this Perceptron (hypothetically):

we pass in our first house's area in as an array containing one number like this: [A1]
the summation unit takes its weighted sum with [w1] weights and adds the "bias" number b to the resultant.

The bias terms and weight(s) are randomized initially,

Resultant number = (A1 * w1) + b

This resultant number is then passed into our identity function.

If we had more than 1 input other than the house area A let's say no. of bedrooms, then the weighted sum + bias would've looked like this:

(A1 * w1 + B1 * w2) + b
identity function receives (A1 * w1) + b and spits out (A1 * w1) + b i.e. same as the input
we compare the numeric difference between (A1 * w1) + b and the actual price of the house for the area A1
we change the values of w1 & b by some amount and repeat the above steps for A2, A3 & so on...
we keep on doing this until our predicted values are close to actual values throughout the data and we've TUNED the weights & bias(es)

Machine Learning with an Actual Perceptron in TensorFlow

We've seen in an overview how perceptrons work, let's implement them using TensorFlow now.

This blog is available as a Google Colab notebook where you can easily run all the code from the comfort of your web browser,

No need to jump through a dozen hoops to get your Python environment up & running.

import tensorflow as tf # 0

ml_model = tf.keras.Sequential([ # 1
    tf.keras.layers.Dense(1)
])

ml_model.compile( # 2
    loss="mae",
    optimizer=tf.keras.optimizers.SGD(),
)

ml_model.build((None, 1)) # 3

ml_model.summary() # 4

ml_model.weights # 5

Let's break this down into pieces to understand more clearly what's happening behind the scenes.

Keras Sequential API (# 1)

Keras module in Tensorflow helps us work with deep neural networks.

Let's understand with examples.

model = tf.keras.Sequential([
    tf.keras.layers.Dense(3),
    tf.keras.layers.Dense(5),
])

The above code corresponds to the below neural network structure behind the scenes:

If you look at this figure closely, you'll find that the ANs are connected to each other in a special way where each AN in a layer receives multiple inputs & generates 1 output but sends the output to ALL of the neurons in the next layer.

ANs in a layer aren't connected to themselves but are connected to all of the ANs in the previous and subsequent layers.

This type of layering & connecting architecture is called "Dense" architecture and is one of the most commonly used in Deep learning models.

The dense architecture helps us to put as many ANs & layers of ANs as we want and the model would learn its weights & biases accordingly.

Let's use our imagination aided by this figure to hypothetically train this example ANN (Artificial Neural Network):

The array of inputs containing numbers is fed into our first layer containing 3 Neurons where each neuron receives all the inputs in an array.
Each neuron in the first layer (layer #1) then processes the input array independently, putting the inputs through the summation unit to compute a weighted sum & a bias and then the activation function to compute the final output.

TensorFlow calls the mathematical function in the neuron an "activation function" We'll respect the same convention from now on

The final output from each neuron in the current layer is then sent to all of the neurons in the subsequent layer.
The subsequent layer or layer #2 neurons receive the outputs of ALL the neurons in the previous layer, compute the weighted sum with bias & run the activation function on the resultant.
The output layer which is nothing but a simple array, collects the output of each layer #2 neuron.
[Explanation Point]

Here, just for the sake of continuing this process, we'll assume that there's a dataset that has 3 numerical values for its features and 5 numerical values for its labels.

Independent values are called "features" in Machine Learning

for example: house area, no. of bedrooms, etc.

Dependent values are called "labels" in Machine Learning

for example: house price, etc.

Labels are dependent on Features that's why we try to find patterns in features relating to the labels.
We'll compare the difference in the 5 predicted/output label values with the actual label values in our hypothetical dataset corresponding to the feature values we predicted upon.
Update each weight & bias, do a comparison again and feed in the next 3 values in the neural network and so on until we have JUST RIGHT values of weights & biases.

In tf.keras.layers.Dense(1) we tell TensorFlow to scaffold a new layer with 1 neuron where every neuron in the layer has the default, identity function (aka linear function) set as their activation function.

So this means, the weighted sum of their inputs + bias is each neuron's actual output.

To change the activation function for the neurons of a particular layer, we can do:

tf.keras.layers.Dense(n_neurons, activation="...")

There are some predefined activation functions like the default "linear", or "elu", "relu", "sigmoid", etc. that help train ANNs better by modulating the outputs of the neurons for a particular layer.

Now, allow me to visualize the importance of bias numbers for you.

There might be a neuron itself in the network whose output doesn't strongly depend on the overall output of the network. By providing a changeable bias number added to the weighted sum for the neuron in the system, we can "dim" or "highlight" the influence of that neuron.

Coming to our original code, we can see that we've defined an ANN that has only 1 layer of neuron(s) and that layer contains only 1 neuron.

ml_model = tf.keras.Sequential([ # 1
    tf.keras.layers.Dense(1)
])

Now that we know how to code up an ANN & how Sequential API works, let's code up the next step of the process - calculating loss & optimizing the model.

Losses & Optimizers (# 2)

After we've scaffolded our Neural Net, we need to compile it with a loss function & an optimizer algorithm, let's understand what they are here.

ml_model.compile( # 2
    loss="mae",
    optimizer=tf.keras.optimizers.SGD(),
)

We generally use 2 types of loss-calculating functions - MAE & MSE

Mean Absolute Error (MAE) is calculated by taking the difference between each predicted label and the actual data label.

For example, let's say we have 3 predicted labels & corresponding 3 actual data labels - [p1, p2, p3] & [y1, y2, y3]

Then the difference will be - [abs(p1 - y1), abs(p2 - y2), abs(p3 - y3)]

Where abs() the function calculates the absolute value of the difference (disregards any -ve sign)

And then, takes the average of the difference array.

This gives out the MAE loss for that particular prediction.

Mean Squared Error (MSE) is similar in the sense that it only takes the square of the corresponding differences instead of taking the absolute value.

Therefore, MSE too acts as an important loss function if you want to penalize the model more for more significant differences.

In this case, we use MAE loss by specifying a string "mae" as the loss function parameter and TensorFlow will take care of the rest.

Coming to the topic of optimizers, for now, just know that optimizers like Stochastic Gradient Descent (SGD) or Adam take in the loss value from the loss function, and set the factor by which the weights & biases are changed.

At each iteration of the data, TensorFlow does all of this for us.

Building The Model

So until now, our model actually looks something like this:

We've been assuming that there will only be one input feature to train on but the model doesn't know this yet.

According to the TF model, The number of inputs could be anywhere ranging from 1 to infinity, which also means that the weights to be assigned to each input feature could be anywhere ranging from 1 to infinity.

To specify the input shape of the data, we call the .build() function of the TF model that takes in a tuple as its first argument to define the shape of the input data.

ml_model.build((None, 1)) # 3

The tuple argument (None, 1) signifies the following:

None - any number of rows of the data
1 - 1 number of features per row of the data

This means that our features have to be passed in as a row-column array with 1 as the length of the column like this:

house_areas = [
    [3765.],
    [7530.],
    [11295.],
    [15060.],
    [18825.],
    [22590.],
    [26355.],
    [30120.],
    [33885.],
    [37650.],
    [41415.],
    [45180.],
    [48945.],
    [52710.],
    [56475.]
]

Here, the shape of our data is (15, 1) (15 rows & 1 columns).

Now our model knows how many features will be passed in it in one go i.e. 1.

Quick Note:

Calling .build() always before training the model isn't necessary at all as TF automatically sets the input shape once we start training with the data,

For the sake of showing the model summary which requires input shape to show the correct number of parameters, I've explicitly called the .build() function.

Model Summary

The convenient function .summary() provides us with a summary of our TF model, let's have a look at what it has to say about our model:

In a descriptive manner, the function .summary() listed out the layers along with their type, output data shape & parameters (number of weights & biases)

In our case, this is exactly what we expected, 1 tunable/trainable weight number and 1 tunable/trainable bias number which in total is 2 trainable parameters.

And here's the icing on the cake when we return all of the trainable params using ml_model.weights

The first element in the array lists all the weights per input and the second element lists all the biases per neuron.

Exactly 2 trainable variables where apparently weights are initialized to random values & biases are initialized to 0.

Visualizing the Data

This step generally comes at the tippy top of the process but for the sake of learning & and the format of this post, Let's visualize our data a little here.

plt.scatter(house_areas, house_prices)

plt.xlabel("House area (sq. ft)")
plt.ylabel("House pricing USD")

Please excuse the accuracy here, given how little time I spent generating it, I like how it scales :)

Again, as visualizing comes at the top of the ML process, it'll be the right time to point out that this data's features scale/increase linearly as the prices increase.

This means that if we can figure out the equation of a straight line where we assume that all the data points lie on it such that our assumption of the line's equation variable results in the minimum difference of the actual points from line points for a particular point, then our job would be done & our model would perform good enough.

Let's do just that.

Training the Model

ml_model_history = ml_model.fit(house_areas, house_prices, epochs=100)

To train our TF model, we call the model's .fit() function giving in the features array as the first argument & labels array as the second argument, passing an optional parameter called epochs

In our case, our model will go through the whole feature sample 100 times (i.e. number of epochs) with the set weights & biases, calculate & optimize loss after every epoch and repeat 100 times.

While printing loss at each epoch, TensorFlow also stores the loss at each epoch during training time and can be accessed from the returned object's .history["loss"] property.

Let's plot our epoch vs. loss curve using Matplotlib (a popular graphing library)

plt.plot(np.arange(1, 101), ml_model_history.history["loss"])

plt.xlabel("No. of epochs")
plt.ylabel("Loss")

There's nothing more satisfying than seeing your model's loss decreasing at every epoch!

Here, the loss acutely decreases as TensorFlow's SGD optimizer tunes our 2 trainable params in the direction of minimum loss.

After 5 or so epochs, the losses at each epoch start to fluctuate around approximately the same level, this is the point the model has achieved maximum accuracy & minimum loss & the loss won't go lower.

Now, that the losses are lowest, let's run this model over the house areas & compare how close it predicts the house prices to the actual ones.

This is not ideal when working with big real-world datasets due to the problem of overfitting, this post will not go further into explaining overfitting & underfitting problems,

But I'll highly recommend you to go down the rabbit hole of youtube videos & data science articles as to why it is a problem :)

house_prices_pred = ml_model.predict(house_areas)

house_prices_pred

Alright alright alright...

Let's plot & visualize these predictions:

plt.scatter(house_areas, house_prices, c="blue")

plt.plot(house_areas, house_prices_pred, c="red")

plt.xlabel("House areas (sq. ft)")
plt.ylabel("House prices")

Look at that!

It's almost perfect!

Where to go from here?

Consider going through these resources if you wanna learn more about Deep Learning & TensorFlow:

Lastly, be sure to give this post a ❤️ to let the DEV Community know this post is good enough :)

📈 Analy - My Latest OSS Project & Documenting My Experience w/ #buildinpublic!

gohashira — Wed, 15 Mar 2023 21:22:56 +0000

Analy is an open-source tracker & dashboard for website analytics.

I've been building this project in public on Twitter for quite a while now (got serious with it around mid-January).

And, so far I've been enjoying the journey!

Moreover, the product itself is fundamentally in working condition (both tracker script & dashboard web app)

In this post, I'll be talking about how I've been making decisions as I coded.

Starting with Remix (w/ TypeScript obviously!)

I've been always trying to get my hands on Remix.js until I got the idea for this project & it seemed like a perfect situation to try remix building a real-world project.

It is an interesting framework that had a sort of upper hand in the JS framework market (until Next.js 13 showed up) with Developer-friendly features like Router outlets, layouts, type-safe loaders/actions along with convenient hooks like useLoaderData, useTransition, etc. to access data.

After choosing the desired framework, I looked for which UI library to flavour it with.

Options that appealed the most to me were ChakraUI & Tailwind due to Chakra's vast library of rich components & well, tailwind being... tailwind.

For the most part, Tailwind & Chakra worked together like a charm, but there was one disadvantage to using CharkaUI, Its bundle size.

And to this day I continue to use ChakraUI simply because I haven't found any better UI library with smaller-sized tree-shakeable components.

— Fast forward a month —

The dashboard app is looking something like this

And I'm starting to struggle with Remix. I prefer readable code over spaghetti code & especially when things are open-source with a teeny bit of chance of someone stopping by to understand or even contribute to the code.

Remix was making it harder for me to work with API endpoints.

Fetchers, types of loaders & actions & somewhat lack of flexibility in the framework, in my opinion, were what made me reconsider switching to Next.js.

So I did, spending the next 2-3 days migrating from Remix over to Next.js.

And not JUST Next.js this time, I migrated the app to the T3 stack.

Taking a chance on a library called tRPC (turns out IT IS AWESOME)

Now, I could've been biased here as I've worked with Next.js at every place that required SSR and known it more than any other framework so I may have been accustomed to the flexibility & freedom you get with it.

And tbh, Remix felt somewhat opinionated and I honestly was looking for something opinionated too (the one on the extreme side is Redwood.js), but after using it, I realized that I don't agree with many of these opinions (e.g Angular) & thus, Next.js felt much better.

Migrating to Create-T3-App

Let's move our focus towards why I chose specifically T3 stack and not just went with file-based API endpoint and then call them with fetch or even React query.

You see, when you write API endpoints in separate files & use something like fetch or react-query for more advanced features, you either have to manually define types for the data returned by these endpoints or just roll with the "any" type.

My goal on the other side, with building this open-source app, is to make the code as easy to read as possible (along with, of course, making the actual freakin' product)

This is exactly where tRPC comes into the picture.

It provides a way to infer the type of data returned by all the API routes you define in it which is exactly what I was looking for in a framework/library.

Because, TypeScript is best utilized NOT with manual type definitions, but with inferred types.

Talking more about tRPC, I love its 2 features that give a massive productivity boost:

Request Batching

tRPC groups requests while sending from the client to the server, this means it will ping your tRPC server endpoint only once for queries made at the same time and avoids duplicate requests.

Therefore, I can query the same route in multiple nested components and returned data will be shared among them instead of being fetched multiple times.
React query

I absolutely love how react-query handles the querying state & manages it and with tRPC, I can access the useQuery of react-query effortlessly.

Also, I felt lazy setting up TypeScript, Tailwind, tRPC & Prisma all by myself so I created the Next.js app with create-t3-app and it provided me with the basic boilerplate code to get me started.

It's been almost a month since I started to make some real progress with the t3 stack & so far, everything has been going really well.

And because Next when used with tRPC & react-query collectively solve my previous problems in Remix with data-fetching & state, I hope I hold on to this stack for a long time 😊

Current State of Analy

Analy Dashboard

The Analy Dashboard currently track basic analytics like date ranges for page views, the number of sessions & unique page visits along with real-time stats, top visited pages, top referrers and from the past week, user feedback too!

Here's a Twitter thread I wrote explaining the feedback-collecting functionality

// Detect dark theme var iframe = document.getElementById('tweet-1633544900951121920-544'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1633544900951121920&theme=dark" }

Analy NPM Tracker Script

The script ensures total privacy for the user thus, uses no cookies,

Instead, anonymously identifies users & their sessions with self-generated ids.

It currently tracks some default events like page loads, new users along with the capability to track custom events with a callable function trackEvent or via HTML attributes analy-event & analy-dom-event to specify the event name & dom event name (e.g "click" or "hover") respectively.

What's Next?

Future plans are to integrate advanced features into the dashboard like custom events & session recordings to create & analyze funnels in order to understand more about dropoffs & where those dropoffs are happening.

Everything I do is posted on my Twitter as threads ✨

Thanks for reading!

I hope you enjoyed this little post about me talking about my experience building my first open-source SaaS product in public - Analy 📈

I love talking to strangers and my DMs are always open to interesting ideas & feedback 🤗

Some relevant links are thrown here:

Twitter - BhardwajKuvam
Analy Dashboard Source Code - kuvamdazeus/analy-dashboard
Analy Tracker Script Source Code - kuvamdazeus/analy

3 Steps to OAuth (with Code & Examples!)

gohashira — Fri, 17 Feb 2023 16:29:36 +0000

Introduction

So... what is this... "OAuth" huh?

This is what they say:

OAuth is an open-standard authorization protocol or framework that provides applications the ability for secure designated access.

Gibberish, let me break this down in layman's terms

This is DEV's login page ☝🏻

The buttons you see here - "Continue with Apple / Forem / GitHub / Twitter" use The OAuth Flow to redirect you to a third-party service that will identify you for Dev.to (while you allow yourself to be identified by this service & give read access of your profile to Dev.to) and this service will then redirect you back to Dev.to's website saying "here are the credentials of this person who wants to signup on your website, we've verified him, you're good to go"

In this post, we'll implement this OAuth flow using GitHub & NextJS.

Let's do this!

Idea Behind OAuth

Let's say you're making a tweet scheduler app,

They come on your app, write a tweet & schedule it,

It's your job now to save that tweet & later post it on Twitter on their behalf.

You're in a dilemma now:

On the one hand, you can't ask the user for their account name & password just to make a tweet because they wouldn't trust your app.
On the other hand, if you go to Twitter saying "hey Twitter, a user with the name @johndoe wants to post this..."

Twitter simply wouldn't allow that because anyone can tweet on anyone else's behalf then!

This is where the Standard OAuth Protocol comes in.

You redirect the user to Twitter's website and indicate what you want access for, user now has the power to authorize your app or disallow it from having tweet post access to your account,

Twitter will then accordingly redirect the user back to your website giving you either code or an error.

The code is a string of utf-8 characters that Twitter generates and it is used to Identify:

Your app
The user
The permissions user has agreed to authorize your app.

Note: This flow is kept a standard for all services that can help identify people & authorize other apps on users' behalf to read/write data.

Enough talking Let's Code!

yarn create next-app

This command will create a starter NextJS app,

Name your app, select JavaScript or TypeScript (doesn't really matter here, I went with TypeScript),

And you're all set up!

Why did I choose NextJS?

Well you see, implementing OAuth requires a server-side node API endpoint and with this framework, we can have all our server-side (Node) & client-side (React) logic in one place.

You're welcome to use any other backend framework here as long as it follows the same logic we'll be using in this post.

There remains one more question: "Why do I need a server-side endpoint anyway?" to which I'd suggest you to read along as it unfolds.

(hint: for secure communication between server & oauth service)

Now, I need you to head over to your GitHub account > Settings > Developer Settings > OAuth Apps and Create a new oauth app

The most important field here is the "Authorization Callback URL" which we set to our server-side API endpoint - http://localhost:3000/api/auth

We are to make a file auth.ts under the api folder yet.

This is the URL GitHub will redirect the user to, after the user authorizes or rejects your authorization request.

Go ahead, register your application & then generate the client secret

GitHub needs the client id & client secret to identify your app and redirect the user to the appropriate callback URLs

Now, let us head over to the NextJS app & create a .env to store client id & secret in one place.

Why store secrets in a .env file instead of let's say a "config.js" file?

The first & foremost reason is that you can add .env to a .gitignore and it will be skipped by git when hosting the code on GitHub.

Now, when you deploy the code to some service like Vercel, they ask for "Environment Variables" and you can just add the client id & secret over there.

This serves 2 important purposes:

No one else can steal your GitHub OAuth credentials from code (pretty evident)
You'll have to create another oauth app (this is GitHub-specific by the way) with the authorization callback URL set to your site's hosted URL in GitHub because you'd be hosting your web app & if you use your old OAuth credentials, it would simply redirect the user to http://localhost:3000/api/auth instead of https://your-hosted-app-url.vercel.app/api/auth on authorization requests from the hosted version.

(This is why .env files are used extensively for different environments!)

" oi oi oi oi oi.... why's there a `NEXT_PUBLIC_` there? "

Oh, you caught me slippin' that one, eh!

As you know, adding NEXT_PUBLIC_ after the env file variable names tell NextJS that we wanna "expose" that env variable to the client side React app, Not adding this prefix in a variable means that we don't wanna use that variable or "expose" it on the client side.

This is where the role of the server-side API endpoint comes in,

You see, the GitHub client secret is like a password & the client id, you can think of it as a username to help GitHub identify your app.

You can show your username to the public but it wouldn't be preferable to publicly expose your password just like the username,

If we add NEXT_PUBLIC_ in front of a sensitive env file variable, NextJS while building your app bundle (i.e the final javascript file to be sent to the user's browser) will include that variable in the file source code too.

If you're patient enough to read through the javascript responses of a page, you can easily find it and someone with malicious intents can easily exploit this exposed variable!

However, you can still use the env variable without the NEXT_PUBLIC_ but only on the server side.

This is why we'll be using the server for all the communications with GitHub API which includes sending client secret along with our requests.

Honestly idk why I named this section "Enough talking Let's Code!" cuz we're still talking, but promise me, the next line will be code!

Hah! it wasn't 🤣

Jokes apart, let's start by building the URL that GitHub requires our app to redirect users in order to start the authorization process.

From here, I'll be referring to GitHub's own docs for performing OAuth requests, you can check them out here👇🏻

https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps

Step 1: Redirect User to Authorization URL

const oauthUri = `https://github.com/login/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_GH_CLIENT_ID}&scope=user:email,read:user&redirect_uri=http://localhost:3000/api/auth`

For the sake of not talking extra, I've hard-coded the redirect_uri to http://localhost:3000/api/auth that should actually be stored in a .env file and changed according to the environments in which the app is being hosted and the associated authorization callback URL.

Coming to the scope param of the URL, we've provided a list of scopes: read:user & user:email to it which means we want read access to the user's details (username, name, etc.) & their email.

The code looks something like this:

After running the app in dev mode & clicking the link "Login with GitHub" on the page, we are redirected to this page:

Have a close look at this page, it clearly describes an App named Test made by a GitHub user Kuvam Bhardwaj wants your GitHub profile data (email & other public info) and clearly states the access is read-only.

Refer to this url for more info on all available scopes 👇🏻

https://docs.github.com/en/developers/apps/building-oauth-apps/scopes-for-oauth-apps

Seeing this page is generally a big relief as we didn't mess up the setup in GitHub developer settings ✌🏻

Authorize the app & if you correctly put the URL in the authorization callback URL in GitHub settings, you should be redirected to the specified URL (/api/auth)

Notice the URL address bar contains some kind of code following a string of random characters,

This, ladies & gentlemen, is how victory looks, a string of hexadecimal characters 🥂

Let's now create a file named auth.ts under api folder to actually handle this victory!

Step 2: Exchanging the Code for an Access token

After authorizing, GitHub redirects the user to our specified URL which is actually a server-side API endpoint.

This API endpoint will make a POST request to GitHub's OAuth API sending the obtained code and client secret as the payload, in response, we'll probably receive an access_token if the code was valid.

On receiving the access_token we can start making requests on behalf of the user, in this case, getting their email & public info.

If the scopes we previously specified were of editing user's personal data, followers management or even repo creation/deletion, we would be able to do that too with this access_token though you might have to search the docs for finding a suitable API endpoint that does that.

You would get errors if you make requests to API endpoints that require additional scopes than you've specified.

Referring GitHub's API docs is the best way to know what endpoints require which scopes.

Or... just... refer to docs in general... they're helpful!

In our simple example, we'll simply exchange code for access_token, fetch the user's profile data with it, print it on the console and redirect the user to the homepage.

This could easily be scaled to do obvious things like:

save the user's data in a database after fetch
set a cookie to identify the user by their database ID
redirect to some dashboard or some other personalized page after authenticating them with cookies

Let us look at the code for exchanging the code for acess_token

Ahem... please excuse my copilot prompts...

In the above code, when the user lands on /api/auth we grab the code embedded in the URL & send it in the POST request body along with other variables like client_id & client_secret to get back the access_token from GitHub.

Headers in the fetch request, as hinted by their name, say to GitHub's API that we are sending a body in JSON format (Content-Type) & we want a response in a JSON format (Accept).

For some reason, GitHub defaults to sending a string looking something like this unless we explicitly provide the Accept header in the POST request

"access_token=gho_16C7e42F292c6912E7710c838347Ae178B4a&scope=repo%2Cgist&token_type=bearer"

Our work is partially done now, we have the access_token and just need to use this and get the user's profile details on their behalf.

Step 3: Use the Access token to Perform Actions on user's behalf

After getting access_token we use it in the header as Authorization: Bearer access-token... & request the GitHub API to grant us their profile data.

Let's now click on the "Login with GitHub" button on the index page again!

Generalizing GitHub-specific Patterns for other OAuth Providers

So, until now we've been very specific to GitHub, but if you refer to docs of other OAuth providers like LinkedIn or Google or Facebook,

You'll notice this pattern where:

You get your personalized client id & client secret
Redirect the user to a link with the client id, redirect uri & scopes or access permissions embedded in it
The user either authorizes or cancels the authorization request and you get the user redirected to your site with an error or some kind of code
You then exchange this code for an access_token
Finally, you start making requests to the service on behalf of the user with the access_token

If you've used any BaaS platform like firebase or supabase before, then you can distinctively point out what's happening!

For example here in supabase when I go ahead to setup Authentication with Social login via Google:

It asks me to enter my client id, and client secret & gives me a URL to add in redirect URIs in Google's OAuth setup process,

Supabase will manage the rest on its own, all the callbacks, redirecting users to your app, everything!

I might have to add that you still need to provide YOUR APP's URL so that supabase itself can redirect the user to your web app post-authentication.

Here's Google's OAuth setup screen for reference

And you might as well find the docs that list all the scopes for authorization along with all the minute details that are Google-specific!

See ya! ✌🏻

Thanks for reading!

If you liked the article, consider dropping some emojis ♥️🔥💯✨

But, if you loved it?

I post about the web every day on Twitter 👉🏻 bhardwajkuvam

Consider giving me a follow there ♥️

yeetboard - A fun Multi-Player Whiteboarding App

gohashira — Sat, 27 Aug 2022 18:26:01 +0000

Overview of My Submission

I've always been interested in applications which are capable of providing collaborative experiences to user like the VSCode's Live Share, or Figma's interactive & beautiful collaborative UI.

Haven't been able to make a collaborative app, I was motivated enough to take on this challenge of making an online whiteboarding app where multiple users can join in on sessions & collaborate or even brainstorm on a plain canvas.

So, here, in this project, I've attempted to give users freedom to draw, shapes or free-hand. With customisability of the elements they create on empty canvas while being able to collaborate with friends with just ONE-CLICK!

Submission Category: Wacky Wildcards

Language Used: JS/TS/Node.js

Link to Code: https://github.com/kuvamdazeus/yeetboard

Additional Resources / Info

Demo Video Showing Features:

Collaborators: None

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

I was creating Forms the wrong way all along in React.js 🤔

gohashira — Mon, 01 Aug 2022 10:19:41 +0000

Introduction

When I was creating a signup form, I found myself creating dozens of useStates & then creating dozens of onChange handlers for those useStates. Something like this 🤮

Man I feel sleepy even writing this for illustration!

Also, you're welcome, for blasting your eyes with that monstrous One Light theme code snippet. Some amount of white is good for attention aye! 😉

So... you get the point, In this post, I'll be trying to solve this problem in an elegant manner (certainly not the BS I did in my previous post, making a buggy React Form component which no one even bothers to have a look at!)

Let's Get Started!

Code

export default function App() {

  // NOT a even a SINGLE useState babyyyyyyy! 😎

  const submitForm = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const inputObject = Object.fromEntries(formData); // convert the FormData object to a JSON object

    console.log(inputObject);
  };

  return (
    <div className="App">
      <form onSubmit={submitForm}>
        <div>
          <input name="email" placeholder="email" />
        </div>

        <div>
          <input name="password" placeholder="password" />
        </div>

        <div>
          <input name="phone" placeholder="phone" />
        </div>

        <br />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

You can try this code & tinker with it in the same browser as you're viewing this post, thanks to codesandbox (code link)

For my beginner friends, who are new to React, what we did here was:

wrap the input fields in an actual HTML form element
define the name attribute of each of the input fields (can be anything, HTML uses this attribute to name the input value against it)
create a button with no onClick handler but a type attribute set to 'submit'
define an onSubmit handler under the form element

After the user has done typing their details in the input, clicking on the button with type='submit' declared in the form, will cause the HTML form element to call its onSubmit handler i.e our submitForm function.

const submitForm = (e) => {
  // 1
  e.preventDefault();

  // 2
  const formData = new FormData(e.target);

  // 3
  const inputObject = Object.fromEntries(formData); // convert the FormData object to a JSON object
  console.log(inputObject);
};

Now, we've done 3 things here:

call the preventDefault method of the HTML FormEvent type, passed as an argument into our function by the HTML Goddess herself (we named it e). This function prevents the form from continuing its default behaviour after submission which includes automatically making a GET request to the same page's URL with the form input values as payload AND reloading the page (we don't want that because we're defining our own form submit logic whose functioning will be interrupted by a page reload)
Pass the form element (referenced as e.target) in a FormData constructor & store it in our formData constant.
This will take the input elements and parse them into key-value pairs where the key is what we defined in the name attribute against our inputs & the value will be their corresponding input text. All the different input text values can be retrieved using their name, something like this:

// quite similar to the map syntax to get a key ( map.get("key") )
const email = formData.get("email")

Isn't that quite magical AND elegant? HTML does all the work for you from parsing the form input values to collecting the data & returning it in a map-like structure 🪄.=

3.Last but not least, we convert the FormData object which has our input values, to a plain JavaScript object with Object.fromEntries( ... ). Logging the, now created object, gives this output:

IT WORKS!

BUT! and that's a big but (pun intended), the cons of this approach is that you CAN'T write Controlled Inputs. For that, you HAVE TO declare a useState & It's corresponding onChange handler.

"What the hell is a controlled Input?"

Have a look at this example

This is a controlled input in React js, but for inputs like this, we can use the hybrid approach:

Define all the inputs in a form
Write useState & onChange handler ONLY for those inputs that are controlled
Then, manually set values in the formData to those controlled state variables

P.S:
Seeing HTML automatically handling inputs for us appears to be some kind of magic and to be honest, I hate when magic is occurring BUT some amount of magic is bearable for the sake of making the developer experience good 👌🏻

Aaaand... that's a wrap!
Like this post, if you liked it 🙃

But if you loved it? man you gotta follow me on Twitter 😉

Bye for now!

The useEffect hook in ReactJS

gohashira — Thu, 28 Jul 2022 11:56:03 +0000

Introduction

So, when I was a kid, my mama told me
"The new React hooks API is really cool, the useEffect hook replaced componentDidMount & componentDidUpdate of the Class API"

I wanted to ask her more about it but she got busy optimizing her React component that was re-rendering multiple times.

When I got older, I learned more about React & these hooks API, and today I'll try explaining to YOU what my mom didn't explain to ME & Probably your mom didn't too — useEffect

Setup

So, here I created a React app in codesandbox on my browser

Yup! My Web browser!

Here's the link, interact with it yourself!

For those of you lazy folks who don't wanna go anywhere, here's the code 🫠

// App.js

import { useEffect, useState } from "react";

export default function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log(counter);
  });

  return (
    <div style={{ width: "100%", textAlign: "center" }}>
      <h3>{counter}</h3>
      <button onClick={() => setCounter((prevValue) => prevValue + 1)}>
        Increment
      </button>
    </div>
  );
}

Simple? huh...

Only 1 state variable defined counter which is being incremented at every button tap by setCounter, also a useEffect with console.log(counter) in its function body, nothing kubernetes!

Code

Let's now focus on the useEffect defined here

useEffect(() => {
  console.log(counter);
});

As evident, by the code, the hook takes a function which it'll internally call at "times". Those "times" can be the component re-render, initial component mount or any state update call which causes the component to, of course, re-render.

After running this code, I tap on the increment button 3 times & these are the console logs I get:

🤔 Hmm... looks like, this particular useEffect ran on these occasions:

When the component is first mounted ( printed "0" to the console )
When I tap the increment button or in short, the state update occurred

Now, lets change the useEffect to this:

useEffect(() => {
  console.log(counter);
}, []);

Notice that we're now passing an empty array "[]" (also known as Dependency Array) as the second argument to the useEffect hook

Running the code again, I tap on the increment button 3 times & these are the console log I get:

Okay, so this time the useEffect ran only at the time of mount of the component & NOT at the time of state update... INTERESTING! 🧐

Now, again! let us edit the code once more, bear with me :)

//App.js

import { useEffect, useState } from "react";

export default function App() {

  const [counter, setCounter] = useState(0);
  const [anotherCounter, setAnotherCounter] = useState(0)

  useEffect(() => {
    console.log("COUNTER VALUE", counter);
  }, [counter]);

  return (
    <div style={{ width: "100%", textAlign: "center" }}>

      <h3>{counter}</h3>
      <button onClick={() => setCounter((prevValue) => prevValue + 1)}>
        Increment
      </button>

      <br /><br />

      <h3>{anotherCounter}</h3>
      <button onClick={() => setAnotherCounter((prevValue) => prevValue + 1)}>
        Random State Update
      </button>

    </div>
  );
}

Alright, so... I've done 3 things here:

Add the counter state variable to the previously left empty array
Add another state variable & called it anotherCounter
Add the JSX to display & increment the anotherCounter variable

I'll now run the app & click on the "Increment" button 3 times & "Random State Update" button 2 times and these are the console logs I got

Oohoo! so now the useEffect hook is firing our function SELECTIVELY when the counter state is changed and not when anotherCounter state is changed, although, the setAnotherCounter is causing the component to re-render & update the anotherCounter to the UI.

Now, you've probably understood to some extent what that "empty array ( [] )" meant...

NICE!

Let us recap what useEffect when correctly written can do!

With the dependency array left empty, the useEffect will run the callback function (defined by us) ONLY ONCE right after the component renders UI. (equivalent to componentDidMount in class components)

useEffect(() => {
  /*
    Here, state initialization logic can be added
    OR, fetch requests to Backend servers can be made for data-fetching
    As this is only running once, you're not bombarding your server

  */
}, [])

With state variable(s) given in the dependency array, the useEffect will run when the component first mounts & will also be running whenever the given state variables are changed

useEffect(() => {
    // ...
}, [...dependencies])

With no dependency array defined as its second argument, the hook will call our function on EVERY SUBSEQUENT component re-render

useEffect(() => {
  // I don't prefer this but yeah! it's there if you want to use it!
})

Aaaand... that's a wrap!
Like this post, if you liked it 🙃

But if you loved it? man you gotta follow me on Twitter 😉

Feedback is much appreciated! 🤗

Meet you another day with another post ⚡️

How To Mint NFTs in Solidity

gohashira — Thu, 21 Apr 2022 08:34:49 +0000

Introduction

Among this "web3" and blockchain hype, I decided to venture into the dev side of the hype. Initialized hardhat project, opened my editor & struck the keyboard keys until I got to a working thingy & in this post I'll be walking you through how to make one & share what I learned along the way.
Let's get started!

Pre-Requisites

A short note to all my beginner friends, this post is totally suited for you & I'll be walking you through, *LIKE A BABY** on how to write these smart contracts*

Before jumping on to the code, let us just zoom out for a second & ask:
"What are smart contracts"
"What are NFTs" and
"What are Tokens anyways"

A Smart Contract is simply some code, written in the solidity programming language (Solidity is for Ethereum Blockchain. Other blockchains may require something different if they have smart contracts), deployed on the Ethereum Blockchain to perform certain operations defined in the code itself. You see, the Ethereum Blockchain consists of thousands of decentralized compute nodes sitting & crunching numbers to keep the blockchain active. When you deploy code on the blockchain, you're required to provide incentives or fees to encourage nodes to process your deployment transaction.

Also, anyone (a user with some wallet address) calling your smart contract function which causes some state change in your code (like modifying the value of a variable in your code), will have to give a fee.

This fee is known as GAS FEE, similar to you providing 💰 to AWS for their lambda functions.

A Token on the other hand is SOMETHING on the blockchain, with which these smart contracts interact, creating, manipulating, or destroying them. That SOMETHING can itself be anything saved in a smart contract's state, some text, number, etc. while REPRESENTING numerous things like an image, currency, or even a virtual girlfriend! the possibilities are endless!

Let's see an example of a smart contract written in solidity, which maintains a record of "who called the smart contract how many times?"

In this solidity code or Ethereum smart contract, we have a map (a data structure that is used to maintain key-value pairs in solidity, here the key is user address & value is a positive 256-bit integer) contractCalls which can be viewed publicly & a public functionincrementState which grabs the address of the user who called the function by using msg.sender and increments its value in that map.

[Note: when grabbing a non-existing msg.sender address with contractCalls[msg.sender], solidity defaults to 0 (zero) for an unsigned int (uint)]

If we call contractCalls[msg.sender] again to see the number accumulated by the user, THAT number, THAT UINT256, IS THE TOKEN!
That's it!

Also, looking at the solidity code, if you've ever worked with any object-oriented language, the contract Test { ... } syntax along with that public keyword may look similar to you, because it is. Solidity, like any other OOP language, supports visibility modifiers (public, private, internal & external) and concepts like inheriting from other contracts.

Yeah, I know, it was an absurd way of telling someone "what is a token?" by teaching them how to write an almost hello world version of a new language, but hey! what if, I would've shown you this instead

TOKENS are digital assets defined by a project or smart contract and built on a specific blockchain. Token can be UTILITY TOKENS or SECURITY TOKENS. UTILITY TOKENS are also called consumer or incentive tokens

Now, let us discuss, "What is an NFT?"

NFT, short for Non-Fungible Tokens (which I think, even a 3rd grader knows), is a class of tokens that have a standard protocol of creating, transferring, and burning/destroying them. A smart contract should follow the rules laid down by ERC721 (standard for Non-fungible tokens) in order to even count as an NFT.

Code

When talking about developing & testing smart contracts, the first thing which comes to me is Remix IDE, an online smart contract compiler. Remix makes writing & testing smart contracts extremely convenient. But Remix is not THE GO-TO choice when developing big projects with solidity.

To develop complex & big projects in solidity, you need the Hardhat Toolchain which helps you efficiently write smart contracts, compile them, deploy them on testnet or even mainnet and perform automated tests.

I'll be talking in detail about the whole hardhat dev workflow in another post, as it sometimes makes things LOOK complex while they aren't and in this post, I target to cover our beginner friends too 😉

For our cute little NFT smart contract, let us, for now, open up the Remix IDE, create a new file in the contracts folder, and write the following stuff in there:

pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract MyToken is ERC721 {
    uint256 public totalMints = 0;

    uint256 public mintPrice = 1 ether;
    uint256 public maxSupply = 50;
    uint256 public maxPerWallet = 5;
    string public URI = "https://bafybeifqmgyfy4by3gpms5sdv3ft3knccmjsqxfqquuxemohtwfm7y7nwa.ipfs.dweb.link/metadata.json";
    mapping(address => uint256) public walletMints;

    constructor() ERC721("MyToken", "MTK") {}

    function safeMint(address to) internal {
        uint256 tokenId = totalMints;
        totalMints++;

        _safeMint(to, tokenId);
    }

    function mintToken(uint256 quantity_) public payable {
        require(quantity_ * mintPrice == msg.value, "wrong amount sent");
        require(walletMints[msg.sender] + quantity_ <= maxPerWallet, "mints per wallet exceeded");

        walletMints[msg.sender] += quantity_;
        safeMint(msg.sender);
    }

    function getMyWalletMints() public view returns (uint256) {
        return walletMints[msg.sender];
    }
}

The first line is used to tell the solidity compiler what version of solidity we're using, this is important as this language is relatively new & thus has ongoing changes (and, don't worry, even I don't know what the hell "pragma" means 🤡). And, due to the immutable nature of these smart contracts running on the blockchain, THERE IS NO UPDATING YOUR CODE, thus we need to specify, what version was used when this code was written.

Next, comes the import statement to import the ERC721 contract from open zeppelin into our contract to add the basic functionality of an NFT on top of our sh*tty code. There are some really important reasons, why we need to import this rather making our own buggy implementation 🐞:

Too lazy to write all of these functions (see implementation docs here)
The implementations provided by open zeppelin are tested hundreds of thousands of times & thus can be trusted more than our own code, also, their code has been optimized to require as low gas fees as possible while providing maximum functionality when run on actual Ethereum nodes

Our contract MyToken inherits all internal and public variables & functions of the ERC721 contract provided by open zeppelin, this means that now we have functions like _safeMint() that could handle all the functionality of assigning someone a token with some ID, we just have to control who takes how much & what's the total supply for the NFT.

Now, in the contract let's define some state variables:

totalMints is a publicly visible positive integer that we'll be using to count how many tokens have been minted so far. that we'll also use to increment & assign a new & unique number to each token or NFT.

uint256 public totalMints = 0;

mintPrice is a public uint which has a value of 1 ether, solidity has a special suffix ether for integers which are to be represented as some ETH value.

uint256 public mintPrice = 1 ether;

maxSupply is the total number of NFTs we decide to mint (public uint) so as to limit mints.

uint256 public maxSupply = 50;

maxPerWallet is the maximum NFTs a single wallet/user/address can have (public unit).

uint256 public maxPerWallet = 5;

URI is the URL which points to JSON data containing name, description & image for this NFT. This JSON data is also known as "metadata" & it should at least have at least these 3 properties to correctly show the image in your wallet (Metamask or any other wallet). Also, I uploaded the JSON metadata file for this NFT on https://web3.storage which is a decentralized file system to store & host your uploaded files (see the video below for your "how to's"). You can choose a centralized service or even host it yourself but what's the point of all this if you want to use centralized servers in the end to host the metadata. Notice when looking at the JSON pasted, I used the image which seems to be coming from a web server & you're correct, which I can justify by saying, "Yeah... 👀" but you would want to host the image on it or any other IPFS 😬.

string public URI = "https://bafybeifqmgyfy4by3gpms5sdv3ft3knccmjsqxfqquuxemohtwfm7y7nwa.ipfs.dweb.link/metadata.json";

walletMints which is a map datatype to contain key-value pairs of addresses mapped to uint (token ids). We'll be using it to limit mints per wallet.

mapping(address => string) public walletMints;

Now coming to the contract's constructor, a special function that runs only when the contract is deployed. When declaring the constructor, we call the ERC721 contract's constructor to initialize the inherited state from ERC721 with ERC721("TokenName", "TKNSYMBL").

constructor() ERC721("MyToken", "MTK") {}

Notice, that after calling ERC721 contract's constructor, we left the body of our contract's constructor empty and that is because, FOR NOW, we don't need to perform any operations when our contract is deployed.

Next, comes this function

function safeMint(address to) internal {
    uint256 tokenId = totalMints;
    totalMints++;

    _safeMint(to, tokenId);
}

It uses the _safeMint function inherited from the ERC721 contract which mints or assigns an address a token ID. And before doing so, makes sure that the token id is not owned by anyone. There is also a function _mint that does NOT check for ownership and just assigns the address to the given token id irrespective of whether the token id is already assigned to some address or not (which is almost never recommended... unless you want to shoot yourself in the foot).

[see a full list of all functions provided by the ERC721 contract here]

Also, while these functions like _safeMint & _mint are callable from our inherited contract, users cannot directly call them as internal functions of a contract are usable by their inherited contract but can't be called from external wallet addresses. If they were callable, anyone could have minted unlimited tokens for free by calling it on their address and different token ids!

OUR safeMint function is marked as internal which means users can't directly call this function externally. This is what we want because the "pay to mint" functionality is still missing from our contract & we will be creating a new function to ensure users follow the rules laid down by us when buying this NFT(e.g following the limits for max supply & mints per wallet).

To ensure that users are paying for this NFT, we will be creating a function mintToken which will be calling our internal function safeMint along with performing some additional checks. It'll take a positive integer as its parameter quantity_, requiring users to pay the amount of mintPrice * quantity_ in ethers (e.g exactly 2 ether for 2 NFT purchases) and check if this purchase does not exceed the maxPerWallet limit for the wallet calling the function.

function mintToken(uint256 quantity_) public payable {
    require(quantity_ * mintPrice == msg.value, "wrong amount sent");
    require(walletMints[msg.sender] + quantity_ <= maxPerWallet, "mints per wallet exceeded");

    walletMints[msg.sender] += quantity_;
    safeMint(msg.sender);
}

Notice the payable keyword in front of the visibility modifier public which indicates to the solidity compiler that, specifically this function mintToken CAN accept any ether value sent to it while calling it.

"What!? these contracts can store my ether?!" Yup! when someone purchases your NFT, they send this ether to the contract & are stored on the contract itself until you decide to add code to send that balance to yourself, or else the ether is just stuck there FOREVER!

For checking that the limits are being followed, we use the inbuilt require function to check a condition, if it turns out to be false, the function will throw an error with the specified message (in the 2nd argument in the require(condition, "error message") function), reverting the whole function call transaction along with the sent ether.

If everything goes fine, it will accept the sent ether, increment the walletMints for the user's wallet address and call the safeMint function on the user's address (referenced by msg.sender) to actually mint the NFT to them.

The same thing could be done in this way too, where you pass one more parameter in the mintToken function named recipient whom to mint the NFT. Both ways are totally right & its your call what to implement.

function mintToken(uint256 quantity_, address recipient) public payable {
    require(quantity_ * mintPrice == msg.value, "wrong amount sent");
    require(walletMints[recipient] + quantity_ <= maxPerWallet, "mints per wallet exceeded");

    walletMints[recipient] += quantity_;
    safeMint(recipient);
}

Now our NFT contract is almost finished with the functionality to purchase & transfer the tokens, let's test it on remix ide

Great! now let's write one more function to actually withdraw your "hard-earned" ether from the contract's balance.

address owner;

constructor() ERC721("MyToken", "MTK") {
    owner = msg.sender;
}

function withdraw() public {
    payable(owner).transfer(address(this).balance);
}

Here, we declare a variable owner of a special datatype address which will store a public wallet address. In the constructor, we assign it to the address of the person who called the constructor, or the person who deployed the contract (by referencing msg.sender).

The withdraw function is publicly callable & will transfer all the ether balance present in the contract (use address(this).balance to get the balance of the contract) to the owner's address.

Syntax for sending ETH from contracts to wallet addresses:

payable(sender_address).transfer(X ether)

Aaaand... that's a wrap!
Like this post, if you liked it 🙃

But if you loved it? man you gotta follow me on Twitter 😉

Want to show some more love? here's my public wallet address

0x9d1092f5cd0459eDaff0bcA6943dC6A6F8F85F38

Feel free to donate 1,2,3,4,5 ETH 😘

How I built a Song Recommendation System with Python, Scikit-Learn & Pandas

gohashira — Sat, 05 Mar 2022 20:37:08 +0000

Introduction

You must've seen Spotify recommending songs to you.
Or other platforms like YouTube & TikTok recommend videos based on your previous viewing experience.

While building an Indie Project of mine, MeTime🎶 (an ad-free music streaming platform ...coming soon 😉) I wanted to suggest new songs to users & help them discover new sounds. Since then I decided to build a recommendation system that takes in their liked songs & gives out similar tracks or suggests new songs.

Here, I'll be talking about how I build it using python and some ML magic with scikit-learn & pandas,
Let's get started!

The Dataset

Okay, so now we've taken the quest on, we shall find a dataset that contains some Spotify tracks with their audio features (like danceability, acousticness, energy, positivity... of the song). I believe that kaggle is the best place to hunt data.
Some keyword searches and we can already find so many datasets full of Spotify tracks

On going through the searches, I found this dataset to be of use

The best thing about this dataset is that it contains every attribute we care about, popularity, energy, danceability, valence (positivity) & instrumentalness. We'll be using these features to clusterize the dataset into several parts & determine, under what cluster most of the user-favorite tracks lie in.

NOTE: You can choose basically any dataset big or small **as long as it has all the necessary audio features* (popularity, acousticness, energy, valence, danceability & song id) but you should choose as big of a dataset as possible because bigger data sets generally mean a large number of data points which offers us a good stand to recommend songs & train our ML models*

Let's now open up a jupyter notebook and import the downloaded dataset with pandas

"What just happened?"

Here, we used pandas

Pandas is a python library to read, write, manipulate, visualize & query data) to read the dataset from the csv file

...and load it in a pandas data frame.

Data frames in Pandas provide us the right functions or methods to perform the appropriate operations on the given data

Clusterizing the Dataset

Now the question arises "How are we going to clusterize the dataset based on the tracks' audio features?", here comes scikit-learn into the play, sklearn has many utility import-and-use mathematical models which make things a lot easier when handling data & performing statistical functions on it. But before we even use sklearn or scikit-learn, it's a natural tendency for newbies to ask "What the heck is that?"

SciKit-Learn is a python library that contains various readily usable modules that help in analyzing, predicting & visualizing data.

sklearn has a module called clusters which contains the KMeans model, that helps us do exactly the thing we require... divide data into certain groups. (you can have more info on how the KMeans algorithm works here)

Generally speaking, before performing any statistical operation on data, it's a good practice to first have a look at the correlations among its features & plot graphs between them so that we could get an idea & visualize any natural patterns developing within it. For that, we use our friend pandas to plot a graph between all features correlating all of them with every one of them.

In the 3rd code block of the notebook, all I did was reduce this big 'ol dataset to 1000 data points or "sliced" it (similar to slicing a list), picked out only the columns or features I want to plot the graph of (you can pick specific columns of a pandas data frame with this syntax) and passed it to the function:

pd.plotting.scatter_matrix(frame, figsize=( , ))

The reason why I reduced was if I were to perform the scatter_matrix operation on the whole dataset, it would have taken 5-7 minutes to process all the hundreds & thousands of tracks in the data frame & plot their features graphically.
Also, I used the figsize param to scale the graph providing width & height in a Python tuple (so that I could get the plot in 1 screenshot 😅).

Having looked at plots, we can see quite good correlations between features like danceability, valence & energy. To confirm this, let us draw a numerical table to see the correlations in numbers with pandas built-in methods

Now, coming to our specific case where we would be wanting to create groups in the data, seeing the correlations visually & numerically, no apparent natural groups are forming in this data. Thus, we will be testing out & tinkering a little bit with how many clusters we want to create, too low and we end up categorizing multiple genres in 1 cluster, too high and we lose tracks of the same genres in a cluster.

Let's see how we can do this in Python syntax...

Here, I picked up the main features which heavily impact what type of song it is, hence impacting what cluster it belongs to & stored the new data frame in the tracks variable.

Then, I initialized the KMeans model & stored it in the corresponding variable, after that, I "fitted" or "trained" the model on the data using the .fit() method and passed in the data we want the model to "train" on.

By "training" or "fitting" I mean that the KMeans model will determine in what cluster each track with its particular audio features SHOULD lie in & assign cluster numbers to it

After fitting the data set, it will store the cluster numbers (which will be a list of positive integers ranging from 0 to 4 in this case) in a variable called labels_ arranged in a way that corresponds to each track in the data frame.

Giving out recommendations

Now, coming to the last act of our quest, what we're going to do is, Edit & save the above generated labels_ in a column for each track, save the dataset in a separate csv file and find out what cluster number occurs the most in a user's playlist thus finding out what type of songs user likes the most & giving them tracks with same cluster number or you could say of same "type"

In pandas, we add a column to a data frame with the following syntax:

dataframe[column_name] = an_array_with_same_number_of_rows

After adding, its time to save the newly altered data frame in a csv file by using the .to_csv() method of our convenient pandas data frame

tracks_df.to_csv('../result.csv')

Let's now create a Python program that would take in the IDs of user favorite tracks and suggest 'em some nice songs!

# CONSTRUCT YOUR OWN LOGIC!
import pandas as pd

tracks = pd.read_csv('./result.csv')

ids = input('Enter comma-separated ids of your favorite songs\n> ').strip().split(',')
# sample input: 1xK1Gg9SxG8fy2Ya373oqb,1xQ6trAsedVPCdbtDAmk0c,7ytR5pFWmSjzHJIeQkgog4,079Ey5uxL04AKPQgVQwx5h,0lizgQ7Qw35od7CYaoMBZb,7r9ZhitdQBONTFOiJW5mr8,3ee8Jmje8o58CHK66QrVC2,3ZG8N7aWw2meb6UrI5ZmnZ,5cpJFiNwYyWwFLH0V6B3N8,26w9NTiE9NGjW1ZvIOd1So,7BIy3EGQhg98CsRdKYHnJC,2374M0fQpWi3dLnB54qaLX,2IVsRhKrx8hlQBOWy4qebo,40riOy7x9W7GXjyGp4pjAv,4evmHXcjt3bTUHD1cvny97,0MF5QHFzTUM2dYm6J7Vngt,0TrPqhAMoaKUFLR7iYDokf,07KXEDMj78x68D884wgVEm,6gxKUmycQX7uyMwJcweFjp

# search the specified ids in this dataset and get the tracks
favorites = tracks[tracks.id.isin(ids)]

# code to sort find out the maximum occuring cluster number according to user's favorite track types
cluster_numbers = list(favorites['type'])
clusters = {}
for num in cluster_numbers:
  clusters[num] = cluster_numbers.count(num)

# sort the cluster numbers and find out the number which occurs the most
user_favorite_cluster = [(k, v) for k, v in sorted(clusters.items(), key=lambda item: item[1])][0][0]

print('\nFavorite cluster:', user_favorite_cluster, '\n')

# finally get the tracks of that cluster
suggestions = tracks[tracks.type == user_favorite_cluster]

# now print the first 5 rows of the data frame having that cluster number as their type
print(suggestions.head())

To the above code, you would want to do some improvisations and I knowingly left room for some, but there's one big problem about the above mechanism, It will recommend non-hits from the 1950s or 1960s too and I think no one would be willing to hear them over a popular song like "Despacito" (still love that song), so it would be a good move to filter out songs according to popularity say > 60 or 70 the moment we read the dataset. Something like this:

...
tracks = tracks[tracks.popularity > 70]
...

And... that was it! this was the bare minimum code to suggest similar tracks to users. You can now host a full-fledged flask server for just providing recommendations taking in the liked track ids from the user or make a CLI tool for devs to discover new songs from Spotify.

Integrate Spotify API & away you go!

Meet you another day with another post ;)

I hope you liked this post, Any feedback is much appreciated!
If you like my posts, consider following :)

Twitter -> @BhardwajKuvam

Github -> @kuvamdazeus

LinkedIn -> @kuvambhardwaj

Portfolio -> kuvambhardwaj.vercel.app

Adding Dynamic Search Auto-Complete to a web application with NodeJS and React 🔍

gohashira — Wed, 09 Feb 2022 18:18:04 +0000

Introduction

You must've seen google's autocomplete search bar predict your next keystrokes as you type in it

So, I thought of building one and sharing my findings with y'all.
Let's get started 🚀

Google's search auto-complete API

I was making an app that required me to implement this sort of thing where a user starts typing and some search suggestions would come flying in his face (in a div of course). So I started to wander around on google for some free APIs. In the quest, I stumbled upon this stack overflow discussion. One of the answers suggested to use:

https://www.google.com/complete/search?client=hp&hl=en&sugexp=msedr&gs_rn=62&gs_ri=hp&cp=1&gs_id=9c&q=a&xhr=t&callback=hello

This basically is the URL that google.com itself uses for its search suggestions

API Endpoint

Let's now get on writing some GET requests to google's API from a test browser environment, I find codesandbox.io the best way to set up a quick hosted web environment for such things.

And.....refresh!

Hmm, so this is a CORS error, relatively easy to fix only if you know how to work with NodeJS ;)

"What just happened?"

These errors happen when a header Access-Control-Allow-Origin is not present. Responses from requests that don't have this header are blocked by the browser even if the request returns 200 OK.

The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.

Find more on this header here. This error is only raised in a browser environment. Therefore, now we will be switching this request-making code block to a node environment and then return the response to the requesting client for our node API endpoint.

Also, if we just make a GET request with our local machine, like on postman or insomnia. It will be returning a normal response for our specified url-encoded query q

Now, let's code our node endpoint to get the search suggestions and return them as a JSON response.

For quick code snippets instantly deployed in a hosted environment, I often like to use replit.com.
In this code, I imported express (for spinning up a web server) and axios (for making GET/POST requests to sources over the internet).

Then, I initialized the express server/app and defined an API GET ENDPOINT with the .get(url, (request, response) => {}) method, made a GET request with axios to google's API and sent the returned suggestions data to the requesting client.

Testing the newly made endpoint, will obviously return a 200 OK response and provide us with the search results

But there is 1 more task remaining with our endpoint, returning nice & sweetly formatted search suggestions in the JSON format

For this part of the code, I referenced the main part of the result with some indexing, used regular expressions to grab just the part where it gives the actual completion text, and add some null checks for the regex matches. Now our API response looks something like this

Implementing the API in a React application

So, now comes the part where we actually use our API to dynamically suggest users for their search keystrokes. On code sandbox, let's spin up a basic react app that takes input & saves it in its state

Now, we don't want to spam our endpoint with dozens of requests on every keystroke whenever the input value is changed. So, we'll be implementing a timeout-based request fetching, something like this

import axios from "axios";
import { useState } from "react";

export default function App() {
  const [searchResults, setSearchResults] = useState([]);
  const [inputText, setInputText] = useState("");
  const [inputTimer, setInputTimer] = useState(null);

  const handleInputChange = async (e) => {
    setInputText(e.target.value);

    clearTimeout(inputTimer);
    let timeout = setTimeout(() => {
      console.log("FETCHING RESULTS");
      axios
        .get(
          `https://autocomplete-google-search.kuvambhardwaj.repl.co/autocomplete?q=${e.target.value}`
        )
        .then((res) => {
          setSearchResults(res.data);
        });
    }, 300);
    setInputTimer(timeout);
  };

  return (
    <div className="App">
      <center>
        <input
          value={inputText}
          onChange={handleInputChange}
          placeholder="Type something"
          style={{ fontSize: "24px" }}
        />

        <div style={{ marginTop: "30px" }}>
          <ul>
            {searchResults.map((searchResult) => (
              <li>{searchResult}</li>
            ))}
          </ul>
        </div>
      </center>
    </div>
  )
}

So, now what we're doing is set a timeout for like 300ms whenever the input value changes & store the timeout reference in the state, if the user enters a letter and the input value is changed within 300ms, it will clear the previously set timeout and initialize a new one. After 300ms of input inactivity, we will be finally making autocomplete request with the most recent value of the input.
The application should work something like this

If you like my posts, consider following :)

Twitter -> @BhardwajKuvam

Github -> @kuvamdazeus

LinkedIn -> @kuvambhardwaj

Portfolio -> kuvambhardwaj.vercel.app

Creating Custom Hooks with React.js

gohashira — Wed, 15 Dec 2021 12:21:50 +0000

Introduction

Hooks were introduced quite a while ago in React. They enabled to tap into state & lifecycle methods WITHOUT using class components.

In this post I will be showing you with the help of a common problem, how can you create a hook for your own. Let's Get Started 🚀

Problem

So let's suppose we're making a web app where we need to render different components depending upon the screen width of the user.

So we wrote this code to solve it:

It will work fine. Missing one crucial case, What if the user switches to landscape mode on its mobile? The site will still be showing the mobile screen component instead of showing the desktop or bigger screen component.

Of course, this problem can be solved with CSS & rather with 2-3 words with tailwind.
The thing is, I want to show you another way of solving this problem The Reactive way!

Creating the Hook Component

What just happened?

Here, if you look at the useWindowWidth function, you'll notice that it's just a normal function that also happens to use other built-in hooks like useState & useEffect.

What this function does is, it declares a state variable in its scope with useState calling it width & its setter setWidth and throws in the value of window.screen.width as its initial state.

Then, we call the useEffect hook and add an event listener for the 'resize' event firing off a function that sets the value of width whenever the browser window is resized.

If you look closely at the useEffect hook, you'll see an empty array which is there to indicate that this useEffect does not depend on any external value meaning that it will ONLY RUN ONCE even in occasional re-renders. This array is also called the DEPENDENCY ARRAY of the useEffect hook.

Next, we return the width value as the output of this function. Next time the browser window is resized, it will return a new value of width representing the window's current screen width. And we know that whenever we associate useState to a variable, it causes a re-render in every location where the variable was referenced.

This is how it is working now:

For those of you thinking:

" Hey! but why we prefixed 'use' with the function's name in useWindowWidth? "

This is a text I extracted from the official documentation of React.js on custom hooks, have a look:

Do I have to name my custom Hooks starting with “use”? Please do. This convention is very important. Without it, we wouldn’t be able to automatically check for violations of rules of Hooks because we couldn’t tell if a certain function contains calls to Hooks inside of it.

Outro

The use of custom hooks is not limited to just this use case, you can apply it pretty much anywhere you like from auto-login functions to UI-related parts. Even making queries to the server on regular basis, that helps deliver a near-real-time experience to the end user. Possibilities are, as always, ENDLESS.

So, that's all for today folks! hope you found it helpful :)

If you like my posts, consider following :)

Twitter -> @BhardwajKuvam

Github -> @kuvamdazeus

LinkedIn -> @kuvambhardwaj

Portfolio -> kuvambhardwaj.vercel.app

DEV Community: gohashira

I Tried Every Hot Programming Language

Story Time!

GoLang

Zig

Rust

TLDR

GoLang

Zig

Rust

All Of Them

Rust Puran

Conclusion

How I Got a Job as a Self-Taught Developer without a College Degree

The First Gig

Learn, Learn, Learn

Why?

Pros

Cons

What did parents say?

Neural Nets for Web Developers #1: Quick Start w/ TensorFlow

Introduction

What is a Neural Net?

Understanding "learning" in terms of connections

The Perceptron

Summation Unit and Weighted Sum

Machine Learning with A Hypothetical Perceptron

Machine Learning with an Actual Perceptron in TensorFlow

Keras Sequential API (# 1)

Losses & Optimizers (# 2)

Building The Model

Model Summary

Visualizing the Data

Training the Model

Where to go from here?

📈 Analy - My Latest OSS Project & Documenting My Experience w/ #buildinpublic!

Starting with Remix (w/ TypeScript obviously!)

Migrating to Create-T3-App

Current State of Analy

Analy Dashboard

Analy NPM Tracker Script

What's Next?

3 Steps to OAuth (with Code & Examples!)

Introduction

Idea Behind OAuth

Enough talking Let's Code!

Why did I choose NextJS?

Why store secrets in a .env file instead of let's say a "config.js" file?

" oi oi oi oi oi.... why's there a NEXT_PUBLIC_ there? "

Step 1: Redirect User to Authorization URL

Step 2: Exchanging the Code for an Access token

Step 3: Use the Access token to Perform Actions on user's behalf

Generalizing GitHub-specific Patterns for other OAuth Providers

yeetboard - A fun Multi-Player Whiteboarding App

Overview of My Submission

Submission Category: Wacky Wildcards

Language Used: JS/TS/Node.js

Link to Code: https://github.com/kuvamdazeus/yeetboard

Additional Resources / Info

Demo Video Showing Features:

Collaborators: None

I was creating Forms the wrong way all along in React.js 🤔

Introduction

Code

The useEffect hook in ReactJS

Introduction

Setup

Code

How To Mint NFTs in Solidity

Introduction

Pre-Requisites

Code

How I built a Song Recommendation System with Python, Scikit-Learn & Pandas

Introduction

The Dataset

"What just happened?"

Clusterizing the Dataset

Giving out recommendations

Adding Dynamic Search Auto-Complete to a web application with NodeJS and React 🔍

Introduction

" oi oi oi oi oi.... why's there a `NEXT_PUBLIC_` there? "