DEV Community: Nijeesh Joshy

Sorting HTML elements with Flexbox and JavaScript

Nijeesh Joshy — Mon, 06 Jan 2020 13:42:04 +0000

What is flexBox

flexbox or flexible box layout is a layout scheme in CSS. which is used to align and organize HTML elements in a layout.

let say this is our HTML layout

<div class="row">
  <div class="col " id="">1</div>
  <div class="col " id="">3</div>
  <div class="col " id="">5</div>
  <div class="col " id="">200</div>
  <div class="col " id="">4</div>
  <div class="col " id="">2</div>
  <div class="col " id="">400</div>
</div>

to use the flexbox properties we have to change the display: type of the parent to flex

.row {
  display: flex;
}

for making the elements appear in a column instead of a row we have to set the flex-direction.

it can have values row, row-reverse, column, column-reverse;

so getting the column layout we add flex-direction: column to our css.

.row {
  display: flex;
  flex-direction: column
}

another flexbox property isorder, as the name suggest it can be used to define where in the flex container the current element should be placed.

for more info on how CSS flex works.
flexbox cheet-sheet

by using this trick we can easy make a simple list which we can sort in any way we want.

Is it still safe for large production applications with a large user base to use bcrypt as the password hashing algorithm ?

Nijeesh Joshy — Tue, 03 Sep 2019 06:43:44 +0000

I have been doing backend dev for 3 years now, i read couple of articles recently which says argon2 is much more safer than bcrypt everyone should switch to it.

Is it still safe for large production applications with a large user base to use bcrypt as the password hashing algorithm or should it switch ?

Why does two small for-loops run faster than a big one ?

Nijeesh Joshy — Tue, 27 Aug 2019 13:30:02 +0000

Explain Like I am five Why does two small for loops run faster than one big for loop?

s = Date.now()
for(let i=0;i<1e10;i++) { i + 100 }
for(let i=0;i<1e10;i++) { i + 100 }
console.log(Date.now() - s)
// => 37s


s = Date.now()
for(let i=0;i<2e10;i++) { i + 100 }
console.log(Date.now() - s)
// => 38s

Especially for language like JS which is not multi-threaded

Functional Programming vs OOPS : Explain Like I'm Five

Nijeesh Joshy — Thu, 25 Oct 2018 06:04:39 +0000

what is the difference between Functional Programming vs OOPS

Do You believe Ruby on rails is still relevant ?

Nijeesh Joshy — Fri, 12 Oct 2018 05:00:44 +0000

How often You Have to use the Concepts of Trees in your algo

Nijeesh Joshy — Sat, 18 Nov 2017 18:34:00 +0000

I really dont get it
I haven't Used Trees in any of my Programs so far is it me or everyone feels the same ?

I may be a bad programmer but its just a thought...

KISS The JavaScript

Nijeesh Joshy — Sat, 18 Nov 2017 17:41:47 +0000

                       " KEEP IT STUPID SIMPLE "

I used to see this quote and say "When I can Write Some Awesome Code Why Should I Keep it simple after all it is my code I have comments Every where so no problem for me to understand it later"

So as a programmer just think for a second what was the best practice yiu have taken when you write code.Is is Commenting every now and then?, Spliting it into modules ?, or may be reducing Repetition.

Every one writes codes in their own way but there is a way which can be applied to any way is 'Keep it simple stupid'.

You can get two meanings from the same quote which is

'Keep it simple, Stupid'
'Keep it simply stupid'

I will Go with the Second one because i don't like anybody calling me stupid.

I will say why you should kiss (Sounds a little awkward but it sounds funny).You may be an Einstein you can write codes that only you can read and understand.But the way our mind works is really funny you may be in your Einstein mode when you wrote your code when you have to rework on the code after a few days may be months or years your mind will be on the trump state. So instead correcting the code you wrote you will be wasting a lots of time trying to make sense of what you wrote (Getting dejavu ?).

You may be thinking all code i write is stupid i am not smart enough to write complex code. Let me tell you why this is probably not the case.According to me an awesome code is something which can be understood by even a dumb person (Smart enough to read code).Keeping things simple ironically is not that simple.

According to me write codes for the dumper self of you not for others to understand.

When it comes to JS things can get real bad real soon.If you have coded in JS for some time you would have heard about something called as callback hell. If you don't know this is an definition of callback hell

Seen the movie Inception? The movie talks about dreams within dreams within dreams, each layer with its own scope but can affect the previous layer of dream - if there is one. The worst scenario is that if you get lost, then you have no way of knowing where you are and where you came from.

This is an example of a call back hell from callback hell


fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

This code here looks real messy it can be avoided using promises learn more here.

Using promises will make you code pretty much easy to read and maintain. You will feel more happy seeing the code which is neatly organised.


awesome_function()
    .then(do_this)
    .then(do_this_too)
    .then(here_is_one_more)
    .error(oh_crap)

See writing code with promises is almost looks like synchronous programming.So think of a scenario where you have to correct the code some one else written if it is written in the first way you will be pulling your hairs out and if its the second way even a stupid person can understand that it does.

I have talked here about call back hell where i should have talked more generally.In my opinion call backs are the easiest things to make your code messy So refactoring them will you leave you with a good and neat code.

Happy coding ...

links

1.KISS for programming
2.Callback Hell
3.Promises
4.Callbacks
5.Promises

Why Learning JavaScript Is Fun

Nijeesh Joshy — Fri, 17 Nov 2017 13:20:10 +0000

I started Leaning JavaScript in the fall of 2016 and at First it seems really boring but i kept leaning JS because i have to lean I was in a middle of a project which is my first try to web development. So with out JavaScript doing functions in the Client-Side is not possible so i had to lean it.
I was like why i have to go through all these documentation it just like any other programming languages some for ,while , ans for each loops and if ,else if controls. At that point i was really getting bored and decided not to read any guides to lean JavaScript just dig in and start codding like a mad Hacker (Like in the movies not the real world).
Then i started codding like i always do with having only a basic idea of the syntax and not sure how to do anything. As long as we have stack Overflow All the programming related questions wont go unanswered. So i stated coding it was pretty much python lots of functions for you to use (I love C/C++ for their "if you want some thing to be done do it your self" attitude ). If I don't know Something went to W3schools or Stack-overflow for answers and i was like this is just a piece of cake. i was like give me a year i will build Facebook for you.All of that was about to change....!
That was when i had to use Async Programming . I was never into the Async Programming before i was never even used multi threading or no parallel processing methods and i was feeling like why my code is behaving really funny.So i tool my code to Stack Overflow and explained then what am i trying to do and what is the error. Then One guy commented "it is because of JavaScript's Async Programming you have to do that as a call back."
I was like what Async and callbacks ? what the hell are those ?. So i dig in to the internet for answers. After a lots of conversations and reading i decided i have leaned everything about Async and callback now its time for me to code.
So i started codding again and i get stuck every now and then and i tries to experiment by moving the lines of code here and there until it works. After wasting lots of coffee and time i decide to lean more about it.
So as a lazy person i thought why i should read when someone else will read and explain for us. that way i wont have to make sense of the all documentations. So i went to YouTube and searched for "Explain JavaScript Async" like i am commanding YouTube to teach me. I viewed a couple of videos and then one video hit my eye it was a video a young developer talking at a conference so i decided to give it a try and that was really good. I realized that i was seeing JS like other languages that was my mistake JS is a entirely different language. Like none other languages i have learned and worked with JS was different it does not always has to wait for each line to execute and finish. i will come back to the part when the execution of that is completed.

It was more of an event driven language that a line by line executing language. After learning JS for a few months and experimenting with it on a couple of side projects my alliance has changed from python to JS.
Learning JS can be really challenging if you are new to Async Programming but that is the beauty of it throws you challenges which most of the times you have to
solve on your own. Not like all other languages each and every line you code will make you fell in love the language deeper and deeper.

So happy coding.