"Unveiling JavaScript's Puzzling Quirk: The Object Identity of Null"

BIKI DAS — Thu, 15 Jun 2023 18:26:22 +0000

In the realm of frontend interviews, the question of typeof(Object) has left many developers scratching their heads. We've all experienced the puzzling result: null, a value representing explicit emptiness, is strangely classified as an Object. But why does this anomaly exist? Join me on an exploration of JavaScript's early design era, where Brendan Eich created the language in record time. In this article, we'll embark on a journey through the world of 32-bit values, type tags, and binary magic. Prepare to unravel the captivating story behind why null aligns with the Object type. Let's dive into the enigma and discover the untold secrets!

To understand the quirks of JavaScript, we must travel back to its inception. Brendan Eich's journey in creating JavaScript was a race against time, driven by the need for a versatile language to power the emerging web. In the blink of an eye, JavaScript was born, setting the stage for its intriguing behavior.

Computers comprehend only zeros and ones, and JavaScript values were no exception. Visualize a time when JavaScript values were confined to 32 bits, forming the building blocks of the language we know today. These 32 bits held the key to unraveling the mysteries of type determination.

The final 1-3 bits of those 32 bits were allocated as type tags.These type tags were the gatekeepers to understanding the nature of a particular JavaScript value. They held the power to distinguish between primitive types and objects.

Enter null, the sentinel value representing explicit emptiness. Null, at its core, is stored as a null pointer address consisting of all zeroes. This null pointer address aligns with the type tag assigned to objects in JavaScript, leading to the unexpected result when evaluating typeof null.

By delving into the type tag table, we uncover the hidden connection between null and the Object type. The type tag for objects is represented by all zeroes, which perfectly matches the null pointer address. As a result, the typeof null expression yields "object," puzzling developers worldwide.

I hope This article helped you to Uncover this mystic result of the typeof(Object), consider sharing the Article to let all of your fellow Programmers know and reveal the Mystery.

HTML5 Accessibility With Screen Reader

BIKI DAS — Fri, 28 Oct 2022 17:37:47 +0000

Learning About Accessibility should not be optional, As Accessibility denotes Whether a Product or service can be used by everyone, however, they use it. The Accessibility laws though helps the disabled and physically challenged people, But designers and developers must try to accommodate all Potential Users

Starting With Accessibility is much simpler, as In Accessibility small changes have a Big Impact, Through this short Post I would give around a surface level of tour how Accessibility changes the interaction with a website through very few changes, So let us get started

Starting with the code, we have just a single index.html page with few styles, and that's all we need.

We will test the website using a screen reader which is a tool used by blind and visually impaired people to interact with websites, this is gonna make us understand how important semantic HTML is, I am using the Chrome Screenreader extension, you can use your choice of screenreader.

First starting with how the screen reader responds to our current website.

As we start hovering on the parts of the webpage this is what the screen readers read when we approach the div element.

Playing the video, we can see that the screenreader just announces

Submit me
The User using the screen reader wont be able to Figure out what actually submit me was.

Moving our screen reader to the image element.

The Screen reader only announces that this is a image and no other info is announced.

Moving on the Accessible elements Part of the Page, we have a Form inside which we have two inputs and a button, let see how our screen reader interacts.

From the video we can see the screen reader explicitly mentions the FirstName and lastName label which is due to the label tag and also mentions the value inside of them and also along with submit me, the screen reader also announces that it is a button.

The above Observation Let us realize the importance of using semantic HTML which can really make the website accessible, Example of html element include

-

,,,,,, etc. They have builtin Accessibility specifications inside them.

Now lets try to make the non accessible things a little accessible

Starting with the Div

As we can see, the Screen reader announces now that submit me is a button, what made this change possible was the role attribute, the roles are provided ARIA, and they help to add semantics to non-semantic elements such as div and span. you can read more about it here ARIA

Now moving to the Image element that we encountred, now let see what happen after adding an alt text

As we can see such a small change has a big impact now any screenreader User can interpret the Image meaning out of it.

The sum total of the above Observation might give you the impression how easy it is to get started to add accessibility and how small things have bigger impact

To conclude, This Blog gave a small introduction to what Accessibility looks like from the surface , it is a very broad concept and Many Companies are working on making Accessible UI to make it easy for developers and designers to Adopt it easily,

DEV Community: BIKI DAS

"Unveiling JavaScript's Puzzling Quirk: The Object Identity of Null"

HTML5 Accessibility With Screen Reader

-

,,,,,, etc. They have builtin Accessibility specifications inside them.