DEV Community: Mayank Sahai

Understanding WebSocket and creating from Scratch with JavaScript

Mayank Sahai — Tue, 07 May 2024 20:39:35 +0000

As developers, we often find ourselves on quests to understand new technologies. This past weekend, while battling a particularly stubborn bug (coffee wasn't helping!), I stumbled upon a cryptic note from my past self: "Explore WebSockets." Curiosity piqued, I set out to learn what these mysterious WebSockets were all about.

WebSockets, in essence, enable real-time, two-way communication between a browser and a server. Unlike regular HTTP requests, which are one-off interactions, WebSockets allow for a continuous exchange of messages, similar to a live chat application.

To understand how this works, I decided to build a simple WebSocket server using JavaScript. This was a learning experience, and the ever-reliable MDN Web Docs became my trusted companion (seriously, those folks are amazing!).

Data Frames: The Messengers of WebSockets

Imagine data traveling between the browser and server in tiny packages called data frames. Each frame carries a specific message and includes control bits that define how the data should be interpreted.

Here's a simplified breakdown of a data frame :

Decoding the Data Frame:

FIN: This bit indicates if the message is complete (FIN = 1) or if it's part of a fragmented message (FIN = 0).
Opcode: This identifies the type of message being sent. Common opcodes include text (0x1), binary (0x2), and ping/pong for checking connection health.
Mask: This bit (present only in client-to-server messages) specifies whether the payload is masked for security purposes. We'll delve into masking later.
Payload Length: This indicates the length of the actual data being carried in the frame. The length can be encoded in one, two, or eight bytes depending on the message size.
Masking-key (optional): If the Mask bit is set, this field contains a four-byte key used to unmask the payload for the receiver.
Payload: This is the actual data being sent, which could be text, binary data, or any other information.

This is just a simplified view of data frames for single messages. WebSockets can handle more complex scenarios with fragmented messages and masking, but that's a topic for another exploration!

A Toy Project with Big Learning

Building this simple WebSocket server was a great way to gain practical experience with the protocol. It's a toy project, but it opened a door to the fascinating world of real-time communication in web applications.

Check out the Code!

The code for this WebSocket server is available on my GitHub repository: mayank-sahai/socket-js (github.com )

Feel free to explore the code and see how it implements the concepts discussed in this post.

I'll be revisiting the code soon and updating it to delve deeper into functionalities like masking and fragmentation. In the meantime, if you're interested in learning more, check out the excellent resources on MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

Feel free to share your experiences with WebSockets in the comments below!

CSS Art: Earth Day Challenge Submission

Mayank Sahai — Wed, 24 Apr 2024 20:19:58 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

You ever look around and think, "Man, we're really messing up this planet"? Yeah, me too. So, when I stumbled upon this Earth Day challenge, I saw it as a chance to do something about it – in my own little way.

I wanted to create a digital space that reflects the urgency of our environmental crisis. You know, a place where Earth takes center stage, surrounded by reminders of our duty to protect it. And hey, who doesn't love a good metaphor? That's where our friendly janitor comes in – a symbol of the everyday actions we can take to clean up our act.

Now, I'm no front-end wizard, but I figured, why not give it a shot? After all, sometimes the most meaningful journeys start with a leap of faith, right?

So here’s to using my creative juices to annotate the issues that matter to remind ourselves of our responsibilities towards Planet Earth and to take action, big or small. Together, we can make a difference. 🌍✨

Demo

Here's a simple glimpse of my CSS Art project, created with HTML and CSS. If you'd like to take a closer look, you can find the code on my Github repo - https://github.com/mayank-sahai/dev-css-art-earth-day.

To view the final look, Please click here This is only created keeping a large screen size like a desktop or iPad in mind. It will not look good on Mobile screens.

Journey

It all started with a simple idea – create a digital ode to Earth Day that captures the urgency of our environmental plight. Armed with nothing but HTML and CSS, I dove headfirst into the world of front-end development.

First came the brainstorming session – how could I translate my vision into code? I decided to start with some humble info banners, little reminders of our planet's fragility. Then, it was time for the main event – Earth itself. But I didn't want just any static image; I wanted Earth to come alive, to be surrounded by reminders of our responsibility to protect it.

That's when the technical wizardry came into play. I discovered CSS animations and keyframes, allowing me to breathe life into my creation. With a few clever tricks, I made Earth rotate gracefully, while a tiny janitor figure wandered across its surface, cleaning up digital debris along the way.

At first, I thought, "Garbage everywhere! Let's surround Earth with it." But then I remembered, I'm not a frontend whiz. So, instead, I made the garbage fade away magically when the janitor got close. Pretty neat, huh?

Now, the background. I wanted something out of this world, so I went with the stars. But let's be real, I just sprinkled them randomly. I mean, who has time for precise placement?

And the cherry on top? The soundtrack – Lil Dicky's "Earth" on loop. But hey, it needed a little push from the viewer to start playing. So, I left a note, like a gentle reminder to allow the sound on the browser.

With each line of code, I felt a sense of accomplishment. It may not be perfect, but it's my humble contribution to the cause – a digital call to action in the fight to protect our planet for future generations.

Acknowledgments

A nod of appreciation to W3Schools and MDN Web Docs for their helpful CSS documentation. Couldn't have done it without you! 🙌📚

Introduction to Amazon Athena: A Fast and Cost-Effective Serverless Query Service

Mayank Sahai — Wed, 24 Apr 2024 15:41:29 +0000

Amazon Athena is a serverless , interactive query service that makes it easy for me to analyze data in Amazon S3 using standard SQL. With its speed, cost-effectiveness, and user-friendly interface, Athena has become my go-to solution for efficient data exploration and analysis.

How Athena Works:

Athena leverages Presto , a powerful open-source distributed SQL engine, to execute queries on data stored in my Amazon S3 buckets. As a serverless service, Athena eliminates the need for me to manage any infrastructure. I simply point Athena to my data in S3, define the schema, and start querying.

Key Benefits of Using Athena:

Blazing Speed: Amazon Athena excels in processing vast amounts of data(like petabytes of data) within seconds. Athena's performance remains impressive, ensuring quick insights and analysis regardless of the data size.
Cost-Effectiveness: Athena's pricing structure follows a pay-per-query model. I am only billed for the queries I execute, optimizing cost efficiency. This approach is especially advantageous for me as I have varying query workloads.
Ease of Use: Athena is designed to be user-friendly, enabling me to use standard SQL to query my data. This familiarity eliminates the need for extensive training or specialized skills, making it accessible to users like me.
Versatile Data Support: Amazon Athena empowers users to run queries on a wide range of data types, including structured, semi-structured, and unstructured data. This flexibility allows for seamless analysis of diverse datasets.
Flexible Data Compatibility: Athena supports multiple data formats, including CSV, JSON, Apache Avro, Parquet, and ORC. This compatibility enables users to work with their data in the format that best suits their needs, enhancing convenience and flexibility in data analysis.

Use Cases for Athena:

Data Warehousing: Athena allows me to create a robust data warehouse on Amazon S3. By defining schemas and running queries, I can efficiently organize and retrieve my data.
Data Analysis: With Athena, I can analyze large datasets residing in Amazon S3. By leveraging its querying capabilities, I can gain valuable insights, perform complex calculations, and uncover patterns within my data.
Reporting: Athena enables me to generate comprehensive reports based on data stored in Amazon S3. By querying relevant data, I can extract the necessary information and generate customized reports to facilitate decision-making.
Visualization: Integration between Athena and Amazon QuickSight, a data visualization service, allows me to create captivating and insightful visual representations of my data. This integration further enhances my data exploration and analysis capabilities.

Getting Started with Athena:

To embark on your Athena journey, you need to create an AWS account. Once registered, you can proceed by creating an Athena table. This process entails specifying the S3 bucket that holds your data, defining the schema, and specifying the data format.

After setting up an Athena table, you can start querying your data through multiple avenues such as the AWS Management Console, the AWS Command Line Interface (CLI), or the Athena API.

Pricing Details for Athena:

Athena's pricing model is based on a pay-per-query structure. The cost of each query is determined by the amount of data scanned during its execution. For instance, scanning 1 TB of data incurs a charge of $5. It is worth noting that failed queries and Data Definition Language (DDL) queries, such as table creation or view definition, do not incur charges. However, canceled queries are charged for the data already scanned.

Conclusion:

Amazon Athena offers a robust and efficient solution for analyzing data stored in Amazon S3. Its exceptional speed, cost-effectiveness, and ease of use make it a preferred choice for businesses seeking to derive valuable insights from their data. Whether you're looking to create data warehouses, perform in-depth analysis, generate reports, or visualize data, Athena provides the necessary tools and capabilities. Embrace the power of Athena and uncover the hidden potential within your datasets.

I hope this article has provided you with some introduction to Amazon Athena. In the upcoming section of this series, we will do some hands-on and get a better understanding of AWS ATHENA. :)

ECMA and ECMAScript: What You Need to Know

Mayank Sahai — Wed, 24 Apr 2024 15:14:13 +0000

Everyone loves using it, but doesn't know much about it.🤔

Many people, whether new to the development field or with experience, have doubts and confusion around ECMA and ECMAScript.😵‍💫 In this article, we'll get it straight once and for all.😯

Standardization in the Computer Industry:

Standardization plays a significant role in the computer industry, helping to consume data prepared by other parties with minimum alteration. In 1960, computer manufacturers around Europe formed an association to draw up laws and rules. This association became the European Computer Manufacturers Association (ECMA) in 1961 and was later renamed to Ecma International – European Association for standardizing information and communication systems.

ECMA Standards:

Ecma International has developed more than 400 standards to facilitate and encourage the correct use of information and communication systems. Here is a snippet from Wiki that shows some ECMA international standards.

ECMA-262 and ECMAScript:

Today we will talk about ECMA-262, which is the specification for ECMAScript, a scripting language used for client-side scripting and in server-side applications and services using different runtimes. The purpose of ECMAScript is to provide standardization for scripting languages like JavaScript to facilitate interoperability of webpages across the internet and different browsers.

Multiple Editions of ECMAScript:

Multiple editions of ECMAScript have been published, and each edition has brought tremendous additions to the standards. In a future article, we'll delve into ECMAScript 2015 (ES6) onwards.

Conclusion:

Now that you understand what ECMA stands for and what ECMAScript is, you'll be better equipped to navigate the development field. Thanks for your time! 😬