DEV Community: Kawal Jain

Building My Own Markdown Parser: A Developer's Journey 🚀

Kawal Jain — Sun, 20 Oct 2024 03:38:27 +0000

Hello Readers,

In this post, I'm going to explain what is Markdown, how Markdown works and why it's so useful. We'll dive into its key features, common uses, and show you how to get started with it.
Markdown has always been a go-to for developers when it comes to writing clean and readable documentation. But have you ever wondered how the text you write in markdown turns into beautifully formatted HTML? 🤔

Let's explore!

What is Markdown ?

A Markdown file (with a .md or .markdown extension) is a simple, lightweight format for writing structured text that can easily be converted into HTML or other formats.The core idea behind Markdown is to allow users to write text that is both easy to read in plain form and can be converted into HTML without complex code or tags.

Key Features of Markdown:

Plain Text-Based: Markdown files are readable in any text editor and don't require special software to view.
Lightweight Syntax: With simple symbols like #, *, and , you can create headings, lists, links, and more.
Extensible: Many platforms and tools support custom extensions, so you can add tables, footnotes, or even code blocks.

Common Use Case

Documentation
Content Creation
Note-Taking and Writing
Technical Communication

A Developer's Journey 🚀

My journey with Markdown began when I used it to document my projects on GitHub. Its simplicity and versatility amazed me, sparking my curiosity about how such a markup language could be created from scratch.
I embarked on a fun and challenging journey - building my own Markdown parser from scratch! It was a deep dive into parsing and lexing, but also an excellent way to sharpen my understanding of text transformation and regular expressions.

Key Challenges:

Handling Edge Cases: Markdown is simple, but edge cases like nested lists or inline HTML can make parsing tricky.
Efficient Parsing: Ensuring the parser handles both small and large documents efficiently.
Regex Mastery: Understanding and leveraging regular expressions to correctly interpret different markdown elements like headings, lists, links, and code blocks.

Project Step

Here are the steps to set up the project, which is developed in React.js. You can find an online demo link for your reference. Additionally, be sure to check out the GitHub README file for detailed instructions and information.

Clone this repository:

git clone https://github.com/kawaljain/markdown-parser.git

Navigate to the project directory:

cd markdown-parser

Install dependencies::

npm install

Now run the following commands assuming you are in markdown-parser directory or simply follow this documentation.

npm run dev

The app will run on your localhost. Simply Ctrl + Click the provided link to open it in your browser. And Congrats! You've successfully built your very own Markdown parser!

Wrapping up

This project has been a truly rewarding experience! It not only deepened my understanding of Markdown but also enhanced my skills in writing parsers and working with text processing overall. I look forward to applying what I've learned to future projects!

Contributions & Feedback!

I'm excited to announce that I'm open-sourcing this project and would love for others to contribute or share feedback on how I can make it even better. Whether you're passionate about markup languages, parsers, or just want to collaborate, your ideas and input are welcome! Stay tuned for the repo link.

let's build something amazing together! 📂

Reference Links

Here are some helpful resources:

Mission Accomplished: Unraveling the Code!

As I wrap up this journey of creating my own Markdown parser, I'm thrilled with the insights and skills I've gained along the way. This project has not only challenged me but has also deepened my appreciation for the beauty and simplicity of Markdown.
I encourage you to dive into the code, experiment with your own features, and share your ideas. Whether you're a seasoned developer or just starting, there's always something new to learn and explore. Thank you for joining me on this adventure - let's keep pushing the boundaries of what we can create together!

Thanks for reading

Happy coding!

If you enjoyed the article and would like to show your support, be sure to:

Follow me On Dev

Follow me On Medium

Checkout more Portfolio

Javascript Interview Question Explanation -Asynchronous Behaviour

Kawal Jain — Tue, 15 Oct 2024 12:40:42 +0000

Asynchronous Behaviour of JavaScript with setTimeout

Introduction

In this article, we will explore a fascinating piece of JavaScript code that demonstrates the asynchronous nature of the language, particularly how closures and the setTimeout function work together. If you've ever been puzzled by why your loop outputs unexpected results, you're in the right place!

Key Concept

Before diving into the code, Let discuss few concept.

Asynchronous Programming:

JavaScript is single-threaded, meaning it can only execute one piece of code at a time. However, it can handle asynchronous operations, allowing certain tasks to run in the background while the main thread continues executing.

SetTimeout

This function is used to execute a piece of code after a specified delay. It takes two parameters: a callback function and a delay in milliseconds.

Closures

A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. This is crucial for understanding how variables are accessed in asynchronous callbacks.

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Think about how JavaScript will process each line. Once you've made your guess, keep reading to see if you got it right!

Explanation

Let break down the code step by step:

Loop Execution : The loop runs five times, incrementing i from 0 to 4.

setTimeout: For each value of i, a setTimeout is scheduled to log i after i * 1000 milliseconds.

Closure: By the time the setTimeout callbacks execute, the loop has already completed, and i has a final value of 5. Therefore, all the callbacks will log 5.

What you might except

What actually Happens

However, this is not the actual output that you would see. The reason for this is a common JavaScript behavior related to the scope of the i variable.

In the provided code, the i variable is declared using var, which means it has function scope. When the setTimeout() functions are executed, the loop has already completed, and the value of i is 5. Therefore, all the setTimeout() functions will log the value 5 to the console, regardless of the delay.

Fixing the Issue

To achieve the expected output of 0, 1, 2, 3, 4,

you can use an Immediately Invoked Function Expression (IIFE)to create a new scope for each iteration.
We can use let keyword instead of var.

Solution

Immediately Invoked Function Expression

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

Now, each setTimeout will captures the current value of i, and output will be:

By Using `Let` keyword

The let keyword creates a block-scoped variable, which means that each iteration of the loop will have its own copy of the i variable, and the setTimeout() functions will capture the correct value of i for each iteration.

Conclusion

Understanding how JavaScript handles asynchronous operations and closures is crucial for writing effective code. The original code snippet serves as a great example of how the setTimeout function interacts with the loop variable i. By using an IIFE, we can ensure that each timeout logs the correct value. So, the next time you encounter a similar situation, remember the power of closures and how they can help you manage asynchronous behaviour in JavaScript

Mission Accomplished: Unraveling the Code!

Thanks for reading

I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Happy Coding

If you enjoyed the article and would like to show your support, be sure to:

Follow me

Javascript Interview Question Explanation- Object Properties

Kawal Jain — Wed, 09 Oct 2024 13:47:21 +0000

Hello Reader,

I am going to explain javascript interview coding question. How javascript compiler works and what it actually produces as output.
I'll break down each part of the output, explain why it appears this way, and connect it back to the specific lines of code responsible

let a = {};
let b = { key: 'b' };
let c = { key: 'c' };

a[b] = 123;
a[c] = 456;

console.log(a[b])

Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful
"Think about how JavaScript will process each line. Once you've made your guess, keep reading to see if you got it right!"

Explanation of above code

For Line-1

let a = {};

Above code, creates an empty object, and assign to the variable 'a'.

For Line-2

let b = { key: 'b' };

This line creates an object with a single property key and the value 'b', and assigns it to the variable 'b'.

For Line-3

let c = { key: 'c' };

This line creates an object with a single property key and the value 'c', and assign it to the variable 'c'.

For Line-4

a[b] = 123;

a[b] = 123 This line sets a property of the object a using the object b as the key. In JavaScript, when an object is used as a key in another object, the object is first converted to a string using the toString() method. In this case, the string representation of the object b is "[object Object]" . So, the property "[object Object]" of the object a is set to the value 123.

For Line-5

a[c] = 456;

Similar to the Previous step, "c" is also a object and converted to string, it becomes ""[object Object]"".

Therefore, the line a[c] = 456; is equivalent to "a[object Object]"=456, which means that object has "[object Object]" property and its value is 456.

For Line-6

console.log(a[b])

Output is 456. when you try to access the the property "a[b]", javascript again convert b to string, which is "[object Object]". Since object has a property with the key "[object Object]" and its value is 456. So it will print the output.

Conclusion

In Summary, the code demonstrate that when an object is used as a key in the another object, the object is first converted to a string representation, which is "[object Object]" by default. This means that the objects b and c are treated as the same key, and the last value assigned to that key is the one that is retrieved.

Mission Accomplished: Unraveling the Code!

I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.
Thanks for reading, and I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.

Happy coding!

DEV Community: Kawal Jain

Building My Own Markdown Parser: A Developer's Journey 🚀

What is Markdown ?

Key Features of Markdown:

Common Use Case

A Developer's Journey 🚀

Key Challenges:

Project Step

Wrapping up

Contributions & Feedback!

Reference Links

Mission Accomplished: Unraveling the Code!

Javascript Interview Question Explanation -Asynchronous Behaviour

Asynchronous Behaviour of JavaScript with setTimeout

Introduction

Key Concept

Asynchronous Programming:

SetTimeout

Closures

Explanation

What you might except

What actually Happens

Fixing the Issue

Solution

Immediately Invoked Function Expression

By Using Let keyword

Conclusion

Mission Accomplished: Unraveling the Code!

Javascript Interview Question Explanation- Object Properties

Explanation of above code

Conclusion

Mission Accomplished: Unraveling the Code!

By Using `Let` keyword