DEV Community: Kim John

Gulp vs Web-pack

Kim John — Fri, 12 Apr 2019 15:59:53 +0000

I'm starting new JavaScript/html based project. I'm very much comfortable with Gulp, since I worked on this a lot, so my gut says to go with this. But my colleagues are insisting on checking web-pack.

I'm looking for an opinion from dev.to community.

So, should I go with Gulp, or check on Web-pack, If I choose one on another, why? Let me know your thoughts.

Kim John
Json Grid <=Developed with love!

Bootstrap offers responsive design, then why column have these classes: col-sm-* and col-lg-*

Kim John — Thu, 11 Apr 2019 16:27:22 +0000

I always wondered while learning bootstrap that why the heck I have different versions of CSS classes while defining columns.

I went through a bunch of bootstrap docs and couldn't understand.

Question became confusion

The confusing aspect of this is the fact that BootStrap 3 is a mobile-first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation. This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. (You don't)

If you think of the columns starting out horizontally, then you can choose when you want them to stack.

Understand with Example

For example, if you start with columns: A B C

You decide when should they stack to be like this:

If you choose col-lg, then the columns will stack when the width is < 1200px.

If you choose col-md, then the columns will stack when the width is < 992px.

If you choose col-sm, then the columns will stack when the width is < 768px.

If you choose col-xs, then the columns will never stack.

On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:

If you choose col-sm, then the columns will become horizontal when the width is >= 768px.

If you choose col-md, then the columns will become horizontal when the width is >= 992px.

If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.

References

https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-bootstrap

Like and Follow

It really encourages to write more if someone likes your post, so be sure to like it if you enjoyed it!

And Follow me to keep getting new exciting stuff like this!

Kim John
Json Grid <=Developed with love!

Pug vs EJS?

Kim John — Thu, 28 Mar 2019 17:41:37 +0000

I have to decide whether to go with PUG or EJS for a node web app.

I highly appreciate if you can suggest one over another explaining why you think so.

Appreciate all help!

Quick HTML template rendering without using Angular, React Or Vue

Kim John — Thu, 28 Mar 2019 14:50:26 +0000

The other day I was working on a website, where I had a simple HTML page with a bunch of data to be displayed in a list. The page was static, I received an excel file directly from a Client.

Just need to render the list

Now, in reality, the Client needed me to put the list in a table on the webpage. This list is never going to be changed so why to bother.

But being a developer, things are not easy. I mean, you can't just copy and paste every single line from the excel file to create HTML table line, they are 110 items. We are developers, we are lazy and we certainly can't do hard work, right! :)

So, I thought to be creative. First of all, I grabbed data from excel and convert into JSON.

Big Question: what to use, React, Angular, Vue Or Plain JavaScript

Now, how do I use this JSON to render actually! Oh, I'm React developer, it's not very difficult. Let's start building component. Oh, that is cumbersome. I need the entire infrastructure to create and support a component like Web Pack, Babel, etc.

I needed some simple way to render the JSON data. Should I write my code in core JavaScirpt? Well, I can but then It's too much work, which of course I don't want to do it.

I thought to discuss with my colleagues, all pointed to me React, Angular or Vue which I didn't want to use.

So, finally, I started researching on my own. I stumbled upon this amazing library, named: mustache.js.

Finally, I settled down on Mustache.js

Now, how do I use this library, I thought to create a sample HTML page.

I started with hooking library on the top:

Library from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>

HTML:

  <div id='sample'>
        <h4>Welcome to {{state}}!</h4>
        <p>From, {{country}}.</p>
        <p>{{content}}</p>
        <ul>
            {{#cities}}
            <li>{{city}} </li>{{/cities}}

        </ul>
    </div>

JavaScript

var template = document.getElementById('sample').innerHTML;
        var newHtml = Mustache.render(template, {
            state: 'Texas',
            country: 'United States',
            cities: [{
                id: 1,
                city: 'Houston'
            }, {
                id: 2,
                city: 'Dallas'
            }, {
                id: 3,
                city: 'Austin'
            }, {
                id: 4,
                city: 'San Antonio'
            }]

        });
        document.getElementById('sample').innerHTML = newHtml;

Notice the simplicity of mustache.js

What I did is that just prepared my HTML template, referenced the template in my JavaScript, and hooked the JSON using Mustache's object, that's it!

Voila! I saw, what I was looking for!

Conclusion

Sometimes, you just want something simple to solve your problem. You are not in a mood to create a masterpiece out of everything. My problem was similar. I just needed a simple way to render my content, I achieved it!

Finally, A small story of me!

Hi there, I’m Kim and I'm a passionate JavaScript developer.

In recent times, I had to work on large JSON data. Inspecting this kind of complex JSON data was a nightmare using regular viewers and my collogues shared the same feeling.

So, we decided one day to write a tool that makes inspecting and editing JSON easy.

We loved to visualize JSON in Table format, which is of course very easy on your eyes. So the first step was to convert JSON into Table, we achieved that. Then we connected every single table cell to actual JSON.

Finally, we thought that every developer should have access to this amazing tool. We named it JsonGrid. Visit JsonGrid.com.

Let me know what you think about it!

Like and Follow

It really encourages to write more if someone likes your post, so be sure to like it if you enjoyed it!

And Follow me to keep getting new exciting stuff like this!