DEV Community: ishar19

It’s free real (e)state

ishar19 — Sun, 09 Jun 2024 14:55:44 +0000

Let’s talk about States, in context of building user interfaces be it a web application, desktop or mobile applications.

What is a state? Why do we use it, need it? How should we use it? And why/ where should we not use it?

Act 1: What

A state can be representative of your UI at any given point of time, whatever is on the screen can be considered as a state of your application. It’s like talking a snapshot of your app and keeping the information about colours, fonts, data, interactions everything.

It tells us how and what is an app right now and what could happen next depending on the choices user makes.

It holds your data coming from backend, user generated actions and interactions.

Act 2: Why

Why do need a state? Why do we use states in our app? Do we even need a state? How many types of state can be there?

All these questions are very subjective and opinionated, and here are my 2cents on it.

Need: To hold information which might change depending on certain situations like user interaction or loading new set of data. To “do something, when something happens”.

Use: To change only those parts of UI which needs to be changed when something changes or happens. That can be a click, a hover, a long press, refreshing the loading bar every 3 seconds. It could be anything. imagine reloading the whole application when a button is pressed.

Do we need: Yes and No

If your application contains some part which will be updated in future depending on the change of a variable, you might want to use a state for that.

Do not keep constants which might as well be hardcoded and will never be changed through any user interaction/ to provide an user interaction or doesn’t affect the interface into a “state” in your app.

Examples can be loading something from local storage of your device, or keeping a set of constants to map out your username’s initials with colours.

Anything that is just loaded once and never re-loaded can just be a variable.

Technically it is a state but not in the context of “state” when we use “setState” or “getState”.

Notice, how it’s a two way function, depicting your UI depends on state and your state depends on UI.

A change in state, loading a data, can change your UI and change in UI, selection of a filter, can change your state.

I only keep a piece of info in “state” if the change in it should immediately reflect in UI and I only map a piece of UI to “state” if I need to carry that piece of information to next interaction.

Act 3: How

Depending on the tech you use, you will have different options to use states in your application.

But there are two major types which needs to be differentiated

App wide state - This piece of info is going to be used at multiple places and, emphasis on and, can be changed from multiple places. If it’s only going to be read, you might as well be okay with reading it directly from source rather than going through the pain of setting up an app level state.

App level info like theme of your UI, user authentication info, cart info if it’s an e-commerce thing, omnibox etc

Component/ widget level state - This piece of info is going to be used in this and maximum of two level deep component/ widget from this. You will be fine with just using a component/ widget level solution.

Component level info, like selected filters in a product section, preferred font for typing in a input box etc.

Tip: Never use your state for holding and calculating business logic or app logic, it should only contain UI logic.

And in the end, would like to quote, Dan Abramov
"Do what is less awkward"
Chatting in a github issue

Lights, Camera, Encode

ishar19 — Sun, 19 May 2024 07:52:23 +0000

Storing images have always been a trivial and omnipresent task while building out any application. What if i tell you there is a way you can store images without any storage services like AWS, Cloudinary or anything else like firebase buckets.

Get back to the only truth in computer science, everything is 0,1 i.e, binary data in the end, leveraging this we can store images as text format directly. Base64 is a way of encoding binary data (like an image file) into a text format using only printable ASCII characters. It is used to transmit or store binary data over mediums that can only handle text content.

A bit more of detail before we see how to do it if you’re a programmer or even if not one.

Binary Data: Digital files like images, videos, audio, etc. are stored as binary data, which are sequences of 0s and 1s. Binary data cannot be directly transmitted over text-based protocols like HTTP, email, etc.
ASCII Characters: ASCII (American Standard Code for Information Interchange) is a character encoding standard that assigns numbers to printable and non-printable characters. ASCII uses 7 bits, allowing for 128 different characters, including letters, digits, punctuation marks, and control characters.
Base64 Encoding: Base64 is a way to represent binary data using only the printable ASCII characters. It works by taking the binary data and dividing it into groups of 6 bits (since 6 bits can represent 64 different values), then mapping each 6-bit group to a printable ASCII character from the Base64 character set.

The Base64 character set consists of:

26 uppercase letters (A-Z)
26 lowercase letters (a-z)
10 digits (0-9)
2 additional characters (+ and /)
An equal sign (=) is used for padding at the end if needed.

Let’s see in action, an image like Cool Robot will convert into base64 and look like String

But why would I ever do this, what are the advantages?

Fewer HTTP Requests: When images are embedded as base64 data directly into HTML/CSS/JS files, it eliminates the need for separate HTTP requests to fetch those image files. This can improve page load times, especially for websites with many small images.
Simplicity: Having the image data encoded and inlined within the same file can make development and deployment simpler, as there are fewer external dependencies to manage.
Caching: Since the base64 data is part of the document itself, it can benefit from browser caching for that document, reducing the need to re-download the image data on subsequent page loads.
Single Source of Truth: Embedding images as base64 data ensures that the image data is tightly coupled with the code that uses it, reducing the chances of broken image links or missing files.
Data URI Support: Base64 encoding allows images to be represented as Data URIs, which can be useful in certain scenarios, such as generating dynamic images on the fly or inlining small images directly into CSS styles.

That’s cool, but how to do this, how do I even convert an image into a string; converting is very simple and it doesn’t even need anything extra, no packages or software

For Windows: You can use the certutil command. Open the Command Prompt and run certutil -encodehex -f "input.jpg" "output.txt" 0x40000001 1>nul
For macOS and Linux: You can use the base64 command. Open the Terminal and run openssl base64 -in [input-file] -out [output-file]

Okay, but let’s say I want to do it in my web-app, I am finally convinced to store my images as a string, how do I do it

const { readFileSync } = require("fs");
var proc = require("child_process").spawn("pbcopy");

const buffer = readFileSync("path-to-image");
const base64 = buffer.toString("base64");
const convertedString = `data:image/jpeg;base64,${base64}`;

This all seems too good to be true, what’s the catch?
There are some like,

Increased File Size: Base64 encoding increases the file size by about 33% compared to the original binary data, which can impact initial page load times for larger images or sites with many images.
Limited Browser Caching: While the base64 data itself benefits from document caching, it doesn't take advantage of more advanced browser caching mechanisms for individual image files.
Debugging Complexity: Having images embedded as base64 data can make debugging and maintaining the code more complex, as the image data is mixed with the code.
Resource Limits: Some older browsers or environments may have limits on the maximum size of data URIs or inlined base64 data, which could cause issues with larger images.
Accessibility Concerns: Inlining images as base64 data can make it more difficult for screen readers and other assistive technologies to interpret the image content properly

So, when do we use base64 or when do we store images, well, that’s an open ended question and upto you to decide :)

But for the sake of providing an answer, i’ll be brave enough and say
”Storing images as base64 can be beneficial for small images or websites with a limited number of images, where the reduction in HTTP requests outweighs the increase in file size. However, for larger images or image-heavy websites, it's often better to serve images as separate files and leverage browser caching and compression mechanisms for improved performance.”

See you in the next one.

Journey to the centre of CPU: Building an ALU

ishar19 — Sun, 05 May 2024 19:48:10 +0000

Ever wondered how your cpu performs an operation as simple as multiplication or comparing two numbers and deciding which is greater.
We all know everything deep inside is binary and anything that happens in cpu is done with binary gates such as AND, OR, NOT, XOR etc.

Today we will discuss and see how a cpu can build an ALU to compare two numbers.

What is an ALU?

Think of an ALU as a combination of several primitive logic gates combined to perform one specific action.

It’s like assembling simple pieces in IKEA to build the furniture you want or assembling whatever sauces or veggies you like to create the subway you like.

let’s start with basics

AND - an operation which decides whether both the input are 1 or one of them is 0

OR - an operation which decides if either of the input is 1

NOT - an operation which negates the input (convert 0 to 1 and convert 1 to 0)

NAND - an operation which negates the output after performing AND operation

NOR - an operation which negates the output after performing OR operation

XOR - an operation which decides whether both the inputs are equal

Using these gates, one can build any combination which can perform almost any digital or arithmetic logic, in fact all the gates or operation can just be achieved with combination of NAND gates.

Let’s try building a simple operation unit which adds two bits and return us carry and sum

We have two numbers a and b both representing one single bit either 0 and 1.

In order to add two binary bits, we can’t expect cpu to just “add” like human, we have to explicitly define the operations that we need, for this let us list down all the possible cases and think of an operation which can be used to achieve the result.

Possible outcomes are

a	b	carry	sum
0	0	0	0
0	1	0	1
1	0	0	1
1	1	1	0

looking closely, we see sum is 1 when inputs are different and 0 when input it same, going back to basics, XOR gate emulates this behaviour, okay, so sum can be achieved by using XOR over both the inputs.

What about carry?
Notice how it is 1 only when both the inputs are 1, that means, drumroll, 🥁 🥁, AND gate.

YES, now we have a gate which can add two inputs and give us output, and this is how you build an ALU.
Combining different gates to achieve one specific function can be an example of a small ALU unit under large complex ALUs.
Typically standard ALUs contains more complex and bunch of different operations based on the inputs and several flags used to manipulate the inputs and outputs.

An ALU which compares two numbers are tells us which is bigger

Defining the input and output flags

Inputs - a, b

Possible flags - we will have three flags, x, y, z and depending on their values we will decide whether they are equal or which is greater.

x is 1 when a=b

y is 1when a<b

z is 1 when a>b

(NOT (a XOR b)) will return 1 when a is equal b

(a AND (NOT b)) will return 1 when 1 a is greater than b

((NOT a) AND b) will return 1 when b is greater than a

We will combine these gates and put into one unit, and map the output to different lines, x, y, z and whichever lights the bulb will tell us the about the comparison.

A more elaborative diagram of to compare 4 bit inputs

                     A[3] ──────┐
                                │
                     B[3] ──────┘──XOR──┐
                                        │
                     A[2] ──────┐       │
                                │       │
                     B[2] ──────┘──XOR──┴──AND──┐
                                        │      │
                     A[1] ──────┐       │      │
                                │       │      │
                     B[1] ──────┘──XOR──┴──AND──┴──AND──A_EQ_B
                                        │      │
                     A[0] ──────┐       │      │
                                │       │      │
                     B[0] ──────┘──XOR──┴──AND──┘

                     A[3] ──────┐
                                │
                     B[3] ──────┘──AND──┐
                                        │
                     A[2] ──────┐       │
                                │       │
                     B[2] ──────┘──XOR──┼──AND──┐
                                        │      │
                     A[1] ──────┐       │      │
                                │       │      │
                     B[1] ──────┘──XOR──┼──AND──┼──OR──A_GT_B
                                        │      │
                     A[0] ──────┐       │      │
                                │       │      │
                     B[0] ──────┘──XOR──┼──AND──┘
                                        │
                                A_EQ_B──┘──NOT──A_LT_B

If we observe, it is just smaller 1 bit comparators combined to build a bigger one and that’s how an ALU is made.

Literally like lego pieces.

In real world, ALUs are more complex but fundamentals remain the same.

CPUs are fascinating piece of tech and in later parts of these posts, we will uncover how RAMs are made.

Until then, keep processing.

Cheers

Need for Speed: nextjs drift

ishar19 — Sat, 27 Apr 2024 22:53:30 +0000

From

To

How did we come here? What were we using earlier and what we switched to?

Both the screenshots are from the same website https://www.fourcore.io before and after the rewrite.

Earlier we were using nextjs 12 and after switching to 14 we made the page load time 3x faster and improved almost every statistics of speed, performance and accessibilty.

How did we do it?

Reducing the number of dependencies, we removed almost every unnecessary dependency and uses only framer. tailwind and next-mdx.
Rendering everything on server as either static content or static HTML which means it’s pre-rendered and client doesn’t have to load any data.
Use client component in composition instead of making the whole page as a client component so that only that part that needs to be hydrated stays as client component and everything else renders on server.
If data is not be mutated or revalidated, use SSG; even if there are mutations to be done, using server actions will make it faster instead of whole page reload.

We have more than 30 mdx pages, rendering on server on build, which makes the loading faster and adding SEO is much easier.

Conclusion

Speeding up a page load and first contentful paint improves the retention and interaction on the page driving better user experience and more click on CTA. ;)

Spend time and remove whatever extra js bundle you have and make use of new nextjs feature to make your website
BLAZINGLY, BLEEDING EDGE FAST /s.

Fullstack alchemy with nextjs and ffmpeg: convert video to audio version

ishar19 — Sun, 21 Apr 2024 08:04:53 +0000

Let’s build a simple nextjs app which will convert video to audio files and downloads it.
No extra backend, VMs or server, everything running on nextjs and can be easily deployed on vercel.

Background Story of our main elements

Nextjs - A backend (yes, backend) framework developed by vercel which ships react (kinda not exactly) to the browser with so many rendering strategies, some good, some more confusing than F1’s ferrari team strategy. Summing up, really cool tool if you want to move fast and ship production grade full-stack apps. It comes with in-built support for creating apis which runs on server environment for your client without the extra effort for set backend deployment or those docker containers or lambdas; they somehow mimic ec2 behaviour though.
FFMPEG - Beast tool, probably one of the biggest gigachad stuff available on the internet. Officiaily they go with - A complete, cross-platform solution to record, convert and stream audio and video.

Let’s begin; Try to follow along

Create a new nextjs app by

npx create-next-app@latest

you can opt for customisation

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

For using ffmpeg inside our app, we will use fluent-ffmpeg which makes it easier to create a ffmpeg command in a nodejs like module. They say this on their page This library abstracts the complex command-line usage of ffmpeg into a fluent, easy to use node.js module. https://www.npmjs.com/package/fluent-ffmpeg
We will also be using multer for this for uploading a file. You can download multer from https://www.npmjs.com/package/multer
Create an api folder inside app directory and create a folder named convertAudio.ts. Paste the following code there

import multer from "multer";
import { exec } from "child_process";
import { promises as fs } from "fs";

const upload = multer({ dest: "/tmp" }); 

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req, res) => {
  if (req.method === "POST") {
    const convertAudio = async (filePath: any, outputFormat: any) => {
      return new Promise((resolve, reject) => {
        const outputPath = `/tmp/output.${outputFormat}`;
        exec(`ffmpeg -i ${filePath} ${outputPath}`, (error) => {
          if (error) {
            reject(error);
          } else {
            resolve(outputPath);
          }
        });
      });
    };

    const fileHandlingMiddleware = upload.single("audioFile");

    fileHandlingMiddleware(req, res, async (err) => {
      if (err) {
        return res.status(500).json({ error: "Error uploading file." });
      }

      try {
        const convertedFilePath = await convertAudio(req.file.path, "mp3"); // Convert to mp3 for this example
        const fileBuffer = await fs.readFile(convertedFilePath);

        res.setHeader(
          "Content-Disposition",
          "attachment; filename=converted.mp3"
        );
        res.setHeader("Content-Type", "audio/mp3");
        res.end(fileBuffer);

        // Cleanup temp files
        await fs.unlink(req.file.path);
        await fs.unlink(convertedFilePath);
      } catch (error) {
        res
          .status(500)
          .json({ error: "Error converting audio. Some problem occured" });
      }
    });
  } else {
    res.status(405).json({ error: "Only POST requests are allowed." });
  }
};

Let’s understand this code briefly

exec(`ffmpeg -i ${filePath} ${outputPath}`, (error) => {
          if (error) {
            reject(error);
          } else {
            resolve(outputPath);
          }
        });

This will create a ffmpeg command taking original file path and an output path to store the audio file.

res.setHeader(
          "Content-Disposition",
          "attachment; filename=converted.mp3"
        );
        res.setHeader("Content-Type", "audio/mp3");
        res.end(fileBuffer);

This set necessary headers ("Content-Disposition",) to the response object to tell the browser to directly download the file with the name ("attachment; filename={file_name}").

That’s it, running your nextjs app will make this api available at /api/convertAudio for your nextjs app which you can directly use with a post request.

Note: This will only work for form-type multipart/form-data since we are using multer.

No need to setup an environment, directly deploy it to vercel and it will work fine.

That’s one the best part of nextjs is to remove the line or atleast blur between frontend and backend.

Thanks for reading 😄

Tech I am learning in 2024

ishar19 — Sat, 13 Apr 2024 05:27:53 +0000

Starting of 2024, I decided to learn some other technologies which is not JS, as I am particularly comfortable with JS, I wanted to explore and learn more.

Here are 5 pieces of technology I am learning this year

Golang

Coming from JS land, Go feels like a breeze of air with it’s error handling and particulary neat syntax and well crafted conventions about structuring code.

My curiosity of discovering about what goes on scalable backend system push me towards backend, moreover I wanna tap into that concurrency shaolin chamber everyone’s been talking about.

Operating System

Thanks to cpu.land , I grew an uncanny interest in how cpu works and got me deep into operating systems from there, it’s fascinating to see the deep down of your computer to the levels of registers and ALUs(arithmetic logical units). Nand2tetris and OSTEP is the greatest resource for starting with operating systems.

During this, it will force me to tackle C and Assembly in the process, hope i survive.

Typescript

Been deep into JS land for more than an year and still not using types extensively, being fed up of my dart and golang friends teasing me about types, so here is me finding my “type” ;

I will finally be type complete, the holy grail of javascript ecosystem.

Networking and Devops

Enough of mugging up 7 OSI layers and not understanding what any of this means, here is me trying to become a bash king and terminal wizard. Gotta deploy those docker containers so that it doesn’t work on only my computer but everywhere.

Learning my IDE

It’s never bad time to brush-up some hotkeys and be one with your ide become neo of the matrix.

I use VSCode and have no intentions of switching to anything in near future.

That’s all, that’s how i am spending my 2024. Beating the FOMO of AI stuff was tough in this but let me take a chance on what i find interesting.

The curious case of HTML forms

ishar19 — Mon, 05 Sep 2022 21:11:14 +0000

Forms are an inevitable part of any application if we are making an application that’s interactive and relies on user inputs.
And as the sensitivity of data grows, handling forms becomes critical.
So let’s talk about HTML forms.

<form action="https://www.something.com" method="get">
        <label><input type="text" placeholder="text"/></label>
        <button type="submit" >Submit</button>
    </form>

A basic structure of HTML form
The action attribute of the FORM element defines where to send the form data, and the method attribute specifies the HTTP method(i.e, GET, POST) for sending the form data.
The URL inside the action would probably be an API endpoint but if it is an URL and method is get, chances are you would be redirected to the page. Go on, try running above code and you will be redirected to https://www.something.com which (funny enough) is an actual website with “something”, quite literally.

One less harmful use of this could be instead of using links, usage of form buttons for redirection so user wont know where they are going to be redirected by just hovering.(PS:- this is not best a11y(accessibility) practice but there could be some use cases)

Major risk of doing forms like this inside HTML could make your website vulnerable to an attack called XSS (Cross Site Scripting) which are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user.

One of the biggest e-commerce website E-bay fell prey to this kind of attack numerous of times in the past and to this day XSS attacks are quite common.

(Explanation of XSS is quite outside of the scope of this article, for further reading, you can visit

https://brightsec.com/blog/xss-attack/)

Tip: Always verify the URL of the page if you are putting in any personal information.

Above Example was provided to point out the importance of validation of any type of user input taken in a website.

Validation

HTML provides a way to validate the data provided to it’s input elements

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" required><br>
  <label for="age">Age:</label><br>
  <input type="number" id="age" name="age" required>
</form>

Above code will validate that first name provided is in text format and age should be a number and both are required if user wants to submit the form.

<input type="text" id="uname" name="uname" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="10">

For example, above code will validate that text only contains letters from a-z A-Z and from 0-9, hence invalidating other inputs. This may seem like a valid solution and to an extent it is, but writing strong reg-ex could be very tiresome and another issue could be posting data directly to backend using methods like curl or wget.

Hence validating data sent on backend is also important and there are tools like joi and strip-js for that.

Okay, this was all about validating but how do we submit?

Well you can submit your form using a submit type button and execute some code using onsubmit event provided with forms.

onsubmit

<form action="https://api.server.com" method="post" onsubmit="someFunction()">
        <label><input type="text" placeholder="text"/></label>
        <button type="submit" >Submit</button>
    </form>

When users submit the form using the submit button, first the function provided to onsubmit executes and if everything goes well, the form is submitted.
But one very irritating part you would notice is that page will reload everytime user tries to submit and hence creating a very bad user experience.

So how do we solve it?

Using the event object,
onsubmit gives us access to an event object, which can be used to used to do various things like preventing default action, accessing data on which the event was occurred and much more.

<script>
    function someFunction(e){
        e.preventDefault();
    }
</script>

<form action="https://api.server.com" method="post" onsubmit="someFunction(e)">
        <label><input type="text" placeholder="text"/></label>
        <button type="submit" >Submit</button>
    </form>

This will prevent the page from reloading but here’s the interesting thing, it also prevents the form from submitting, because contrary to a beginner misconception, what preventDefault does is that it prevents the default behaviour of an event rather than just preventing the reload and submitting is also a default behaviour of onsubmit.

So what do we do,

use the best programming language for your rescue, JavaScript

Take the formData and the action URL and post it to your server using The Fetch API

async function handleFormSubmit(event) {
    event.preventDefault();

    const form = event.currentTarget;
    const url = form.action;

    try {
        const formData = new FormData(form);
        const responseData = await postFormDataAsJson({ url, formData });

        console.log({ responseData });
    } catch (error) {
        console.error(error);
    }
}

(According to MDN, The Fetch API provides an interface for fetching resources (including across the network), more about Fetch and APIs later someday)

Above code might look unfamiliar if you are new to Javascript, you can go read about Fetch, try-catch and every other thing on The MDN.

By no means this article can act like a comprehensive guide to forms and submission, this was just to show some pitfalls and ways to avoid it. Why validation is important and why learning about fetch and ways to validate data is important.

Conclusion: Developers should really pay attention about forms and user inputs and it’s validation.
How javascript solves an essential problem by letting us access the Fetch API (which by the way again, contrary to mass-misconception is not a part of javascript rather a browser API.)

But thats all functionality, what about styling, after all it also has to look good

Well, CSS provides a lot of ways to style a form and in some amazing ways which we will look in some another article, till then Ciao.