DEV Community: Rahul Dahal

[Resolved] MongoDB Atlas line-break issue

Rahul Dahal — Tue, 01 Jun 2021 03:33:57 +0000

The context

While creating this PWA, I wanted to store the markdown data into the MongoDB's Atlas.

Example Markdown

# Some interesting title
Description about the topic...

- list #1
- list #2

> Maybe a quote ?

The above markdown would be stored as a single string in the database.

{
  // other fields
  markdown: "# Some interesting title\nDescription about the topic...\n- list #1\n- list #2\n> Maybe a quote ?"
  // further fields
}

The problem

While reading the data from the Atlas, the line-break escape character, i.e. \n would come as already escaped, i.e. \\n notice the double '\'.

Therefore, while parsing it as HTML, the line-break wouldn't be read as a line-break character but a literal \n character.

Rendered HTML

The Markdown parser(marked.js) expects a line-break between each block(headings, lists, paragraphs, quotes, etc) to render them as expected. Otherwise, it will render them as a single line of string.

In the example above, it renders everything as a heading level 1.

Why ?

When the Markdown parser sees # token, it assumes that the text after it(until a line-break) is to be rendered as a H₁. Thus, everything including lists, paragraphs, quotes are rendered as <h1> because of no line-break.

The Solution

I made a mistake by thinking that the problem was with the Markdown parser, while instead the problem was with the data coming from MongoDB.

The doubly escaped character \\n was the culprit.

As a workaround, I tried to replace all \\ns with \ns from the markdown string before passing it to the Markdown Parser.

import parser from "marked";

// 'markdownString' would be the markdown field read from mongodb
const replacedWithSingleEscape = markdownString.replace(/\\n/g, "\n");

parser(replacedWithSingleEscape);

Solved! This is how the rendered output would look like after the fix

Save Hash Links for Future Reference.

Rahul Dahal — Mon, 18 Jan 2021 14:39:17 +0000

The Context

I was reading an amazing article about JavaScript Best Practices.

While going through it, there were some points that I found really useful and productive.

I wanted to save those points, which in turn would make it easier for me to reference back in the future.

Birth of SaveHash

As a solution to my problem mentioned above, I created SaveHash.
SaveHash makes it easier for readers to save hash(#) links and refer back to it in the future.

Get It Here

Here is the Demo

The extension workflow looks like this,

This project is OpenSource.

Feel free to contribute by following this guide..

FootballStats

Rahul Dahal — Sat, 26 Dec 2020 12:35:38 +0000

What I built

A React app that consumes a third party API to provide the League Standings, Top Scorers and Upcoming Matches for top 5 football leagues.

Category Submission:

Program for People

App Link

footballStats

Screenshots

Description

A Single Page React app.
Consumes a third party API.
Uses service-worker for caching and push notifications.
Is installable as a PWA.

Link to Source Code

GitHub Repo

Permissive License

Background

Always wanted to create an app related to football.
Built to strengthen my portfolio.
Learned how to think in terms of components.
Learned about service-workers and PWA in general.
Learned the ReactJS workflow and tools.

How I built it

I actually had already built a similar app, without any library/framework.
Rebuilt that app with ReactJS from scratch.
Picked up knowledge relating to offline-first and PWAs.
Used Netlify to build and host the site.

Additional Resources/Info

Commenting out the Comment ?

Rahul Dahal — Wed, 28 Oct 2020 13:04:54 +0000

Disclaimer: This is not essentially a productivity tip. But rather, something I experienced while coding.

The Context

I was casually sharing some programming differences to my friends. The programming language was C, the topic was:

Difference between if-else if and if if conditions.
And the code was like:

void main(){

    // if-if statement

    if(2+2 == 4){
       printf("\nI execute because 2+2 is 4.");
    }
    if(5+3 == 8){
       printf("\nI execute because 5+3 is 8.");
    }

    // if-else if statement

    if(9+8 == 17){
       printf("\nI execute because 9+8 is 17.");
    }else if(9+3 = 12){
       printf("\nI execute because 9+3 is 12.")
    }
}

At first, I wanted to demonstrate the if-if statement. Therefore I commented the if-else if statement out.

void main(){

    // if-if statement

    if(2+2 == 4){
       printf("\nI execute because 2+2 is 4.");
    }
    if(5+3 == 8){
       printf("\nI execute because 5+3 is 8.");
    }

    // if-else if statement

    /*
    if(9+8 == 17){
       printf("\nI execute because 9+8 is 17.");
    }else if(9+3 = 12){
       printf("\nI execute because 9+3 is 12.")
    }
    */
}

After the first demonstration, I had to demonstrate the if-else if statement. So, in order to make it executable, obviously I had to uncomment it by removing those /* */ symbols (aka multiple line comment).

But, I being Rahul Dahal, had a crazy thought like,

"What if I put // (aka single line comment) before the /* & */ (multiple line comment start and end), to comment them out and make the text inside it executable ?"

Basically, I wanted to check if we can comment out a comment. So that comment will no longer be a comment.

I did that.

void main(){

    // if-if statement

    if(2+2 == 4){
       printf("\nI execute because 2+2 is 4.");
    }
    if(5+3 == 8){
       printf("\nI execute because 5+3 is 8.");
    }

    // if-else if statement

    // /*
    if(9+8 == 17){
       printf("\nI execute because 9+8 is 17.");
    }else if(9+3 = 12){
       printf("\nI execute because 9+3 is 12.")
    }
    // */
}

And guess what, it worked!

That trick worked. As I expected.

But Why? Why did it work ?

Answer,
Actually what happens is, whatever we type after the comment starter (both // & /*), no matter what, the compiler understands it as a comment text.

That is why the /* itself was treated as a normal text.

And since, /* is treated as a normal text, the code after it will no longer be commented out. Hence, making it executable.