DEV Community: Nepali Lab

Deno or Node ? What's the difference ?

Nepali Lab — Sat, 05 Sep 2020 16:28:05 +0000

I wanted to know if there any developers who have tried and tested the new Deno and what do you think of it ?

Please drop your views regarding it . Why do you think it's better than node or why it looks like a step backwards?

How did you overcome imposter syndrome?

Nepali Lab — Fri, 17 Jul 2020 06:18:52 +0000

People who are new to programming often have this feeling. So, if you had it at one stage of your programming career/life, how did you faced it or defeated it at all?

Bootstrap 5 is here - so what's new ?

Nepali Lab — Fri, 26 Jun 2020 04:53:56 +0000

So, Bootstrap 5 alpha is now out !

Bootstrap 5 was one of the major anticipated changes to the popular CSS framework and indeed it comes with some major changes. The best change is that the logo of Bootstrap is changed(😂) and there are many subtle changes which sure will be welcomed by the community.

If you want to get your hands dirty right away, you can download and use the Alpha version of Bootstrap5 right now.

If you want to learn more about Bootstrap 5, you can head directly to their official website.

You can still use CDN to make use of the new Bootstrap:

CSS

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Javascript and Dependencies

<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Or you can add it via npm package too :
npm i bootstrap@next
npm i bootstrap@5.0.0-alpha

So, let's see the major changes that Bootstrap 5 brings:

Bootstrap no longer depends upon jQuery (means save on file size).
The support for Internet Explorer is dropped(means they can use things like custom properties).
Bootstrap has introduced their own open-source SVG icon library.
Still have all the JS plugins.
Added more CSS custom properties.
Expanded their color palettes.

Other changes that we can see are :

Form components have been updated.
Their own documentation has also been improved.
Redesigned form controls.
New Utilities API for better control
New enhanced Grid system.
- New xxl tier
- Vertical class added
- .gutter replaced with .g* using spacers.
- Columns no longer have position: relative by default.

These were the major overall changes on the new Bootstrap 5. These are welcoming changes as the exclusion of jQuery in Bootstrap 5 will reduce the file-size of the project that uses Bootstrap. Furthermore, the end of support on Internet Explorer means that they can focus on integrating more CSS Custom variables which will be pretty handy.

So, should I migrate to Bootstrap 5 ?

I don't think so. The newly released version is still an alpha - meaning that there may still be breaking changes. So, I do not recommend to use the new version of Bootstrap in your projects -, especially the production-ready projects.

So, should I be concerned ?

I really think that this is a good step by the Boostrap team as they've really listened to the developers and the problems with the previous version of Bootstrap and tried to fix them. We all knew, at a glance that a certain website uses Bootstrap because the use of Bootstrap almost has an identical look and feel on most of the websites. That's why utilities based CSS framework like Tailwind CSS has got a lot of popularity in recent times.

So, I think you should be familiar with the new developments because it helps you to scale up. Certainly, the Bootstrap 4 is not going anywhere but I think you should really scratch the surface of new happpenings - just to know bits and pieces of recent changes and addition. It just adds new knowledge - and a new perspective on your skill toolkit.

If you want to know more about the new Bootstrap 5 and want to do a hands-on project, please let me know. I'll soon post an article about creating a basic webpage using the new Bootstrap 5, so that you can get your hands dirty !

Suggestions to programmers who are just starting Javascript

Nepali Lab — Mon, 08 Jun 2020 05:41:09 +0000

Javascript has become a very popular language in recent time. No one would've ever thought that Javascript would reach the height it's today. Since, Node.js was released, Javascript has seen a different evolution, a different trajectory. From learning plain JS to library like jQuery, we now have thousands of libraries and framework that are becoming the standard of developing web applications in the recent time. From developing interactive web-applications to Mobile Applications to Desktop Applications and even reach SPACE, Javascript has come a long way.

That's why Javascript is popular and immensly important in the recent times. And as a matter of fact, Javascript is evolving so rapidly that if you fail to grasp a new idea, you'll be left behind.

So, here is one thing I want to ask every JS developers in DEV.TO Community. What suggestions do you give to people who are just beginning Javascript ? What are you do's and don'ts and which aspect of the language you want people to focus and master ?

Create an Analog Clock with Vanilla Javascript(For Beginners)

Nepali Lab — Wed, 03 Jun 2020 12:52:57 +0000

Today I'll guide you to make a Analog Clock using Javascript. This will relatively be an easy tutorial and the main goal of this post is to understand how we can use Javascript to create a simple analog clock. So, although the main focus will be on Javascript, I will try to cover the basic structuring and CSS a bit, so that you can make it on your own comfortably.

This is a practise project from Wes Bos - Javascript30. Make sure to enroll in the course to learn more about Vanilla JS. Don't hesitate, it's free.

What will we make ?

Let me post the image of the final product so that you can see for yourself what we will be building up:

So, as you can see it's not some fancy hi-fi clock but a simple clock that tells the time correctly - and at the end of the day, that's what clock do.

What is our goal here ?

Get the current time
Configure our hour, minute and second hand so that they show current time.
Display the time in the UI.

How will we do this ?

Give individual class to hour, minutes and seconds in HTML.
Create a function that runs in every 1 seconds.
Update the time pointers.

If this seems confusing, it's okay. You'll understand what it means as we start doing it.

So, first of all we organize our HTML code. Here's how we're writing our HTML Code.

 <div class="clock">
        <div class="clock-face">
            <div class="hand hand-hour"></div>
            <div class="hand hand-minute"></div>
            <div class="hand hand-seconds"></div>
        </div>
    </div>

So, as you see we've given a "clock" <div> element and inside it we've nested hand-hour, hand-minute and hand-seconds respectively.

Let's move on to the styling. The CSS we use is simple and just for making the clock actually seem a bit nicer.

html {
        background: linear-gradient(to right, rgba(90, 93, 145, 1) 0%, rgba(173, 255, 99, 1) 100%);
        text-align: center;
        font-size: 10px;
    }

    body {
        margin: 0;
        font-size: 2rem;
        display: flex;
        flex: 1;
        min-height: 100vh;
        align-items: center;
    }


    .clock {
        width: 30rem;
        height: 30rem;
        border: 20px solid white;
        margin: 50px auto;
        border-radius: 100%;
        position: relative;
        padding: 2rem;
        box-shadow:
            0 0 0 4px rgba(0, 0, 0, 0.1),
            inset 0 0 0 3px #EFEFEF,
            inset 0 0 10px black,
            0 0 10px rgba(0, 0, 0, 0.2);
    }


    .clock-face {
        position: relative;
        width: 100%;
        height: 100%;
        transform: translateY(-3px);
    }

    .hand {
        width: 50%;
        height: 6px;
        background: black;
        position: absolute;
        top: 50%;
        transform-origin: 100%;
        transform: rotate(90deg);
        transition: 0.3s all;
        transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

We've basically centered our clock to the middle of the webpage and then added small changes like border-radius so that is appears in rounded-shape. Furthermore, we do not have separate hour, minute and hour hand as in real clocks ( I mean seconds hand is longer, minute hand is a bit shorter and hour hand is as short at Kanye West).

If you still wonder the cake of the clock and how it is performed it is fairly simple. We've added position-relative to the .clock-face and then .hand which is the child of .clock-face has absolute positioning. We've used transform: rotate(90deg) because we want the clock hand to face exactly 12:00. The transform-origin:100% is used to align the clock-hand to the center of the clock-cirle. Last but not least, transition-timing-function is added and given cubic-bezier for a smooth transition effect while the hand of the clock moves. (You'll see it in demo)

Adding Functionality with Javascript

Let's see how we can make a running clock and how do we achive it, in a very simple manner.

1. First we select the hour, minute and seconds in HTML.

As we know we have to update our clock hand, we first select the hours, minute and seconds.

    const hourHand = document.querySelector('.hand-hour');
    const minuteHand = document.querySelector('.hand-minute');
    const secondHand = document.querySelector('.hand-seconds');

As now we've selected the hour, minute and second hand, we now create a function that handles the clock events. We'll call this function getTime().

So, to get the current time we use Date() object provided by the Javascript. If you've new to Javascript, you can just open your Developer Console (Fn+ F12 in Mozilla Firefox) and write Date() and it will provide you the current date.

So, we use the same Date() object to get the hour, minute and seconds that we need to make up our clock.

const now = new Date();

const seconds = now.getSeconds();
const minutes = now.getMinutes();
const hours = now.getHours();

This will give the current seconds, minutes and hours respectively. You can check by logging them to the console.

Now, since we've got our date(h/m/s), we want the handle of the clock to respond to it right ? And what we need to remember is that the clock rotates 360 degree right ? So, we want to convert the rotation of the handle of the clock into 360 degrees.

  const secondsDegree = (((seconds / 60) * 360));
  const minutesDegree = (((minutes / 60) * 360));
  const hoursDegree = (((hours / 60) * 360));

What we've done above is that basically we've taken seconds from the current time, divided it by 60 and then multiplied by 360 so that we can know where the handle of the clock will eventually point while showing the time.

It means if seconds is 45, we convert to (45/60)*360 which in turn gives us 270, which will be the degree which the clock handle points to.

Up until now, we've got a fair understanding of how our clock should react to the current time. But the code above will not point to the current time. Why ?

It is because as I've mentioned earlier we added 90deg rotation in our CSS so that initially our clock would always point at 12:00:00 or 0:00:00. So, in order for our clock to point at current time, we must add 90 deg rotation.

And eventually, after that we want our clock handle to rotate. We simply use style.transform to rotate the clock as per the value we've calculated. Here's how our JS code will look like:

   const now = new Date();

        const seconds = now.getSeconds();
        const secondsDegree = (((seconds / 60) * 360) + 90);
        secondHand.style.transform = `rotate(${secondsDegree}deg)`


        const minutes = now.getMinutes();
        const minutesDegree = (((minutes / 60) * 360) + 90);
        minuteHand.style.transform = `rotate(${minutesDegree}deg)`


        const hours = now.getHours();
        const hoursDegree = (((hours / 60) * 360) + 90);
        hourHand.style.transform = `rotate(${hoursDegree}deg)`

So, let's see how our final code will look like :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS CLock</title>
</head>

<body>
    <div class="clock">
        <div class="clock-face">
            <div class="hand hand-hour"></div>
            <div class="hand hand-minute"></div>
            <div class="hand hand-seconds"></div>
        </div>
    </div>
</body>
<html>

And our CSS Code will be:

html {
        background: linear-gradient(to right, rgba(90, 93, 145, 1) 0%, rgba(173, 255, 99, 1) 100%);
        text-align: center;
        font-size: 10px;
    }

    body {
        margin: 0;
        font-size: 2rem;
        display: flex;
        flex: 1;
        min-height: 100vh;
        align-items: center;
    }


    .clock {
        width: 30rem;
        height: 30rem;
        border: 20px solid white;
        margin: 50px auto;
        border-radius: 100%;
        position: relative;
        padding: 2rem;
        box-shadow:
            0 0 0 4px rgba(0, 0, 0, 0.1),
            inset 0 0 0 3px #EFEFEF,
            inset 0 0 10px black,
            0 0 10px rgba(0, 0, 0, 0.2);
    }


    .clock-face {
        position: relative;
        width: 100%;
        height: 100%;
        transform: translateY(-3px);
    }

    .hand {
        width: 50%;
        height: 6px;
        background: black;
        position: absolute;
        top: 50%;
        transform-origin: 100%;
        transform: rotate(90deg);
        transition: 0.3s all;
        transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
    }

And finally, the meat of the tutorial, our Javascript Code will look like this:

 const hourHand = document.querySelector('.hand-hour');
    const minuteHand = document.querySelector('.hand-minute');
    const secondHand = document.querySelector('.hand-seconds');


    function getTime() {
        const now = new Date();

        const seconds = now.getSeconds();
        const secondsDegree = (((seconds / 60) * 360) + 90);
        secondHand.style.transform = `rotate(${secondsDegree}deg)`


        const minutes = now.getMinutes();
        const minutesDegree = (((minutes / 60) * 360) + 90);
        minuteHand.style.transform = `rotate(${minutesDegree}deg)`


        const hours = now.getHours();
        const hoursDegree = (((hours / 60) * 360) + 90);
        hourHand.style.transform = `rotate(${hoursDegree}deg)`



    }

    setInterval(getTime, 1000);

The setInterval(getTime,1000) runs getTime() function every 1000 milliseconds i.e. every seconds. So it means the function getTime() runs every seconds and then updates out HTML Code as the value calculated.

Woo Hoo! You've created a basic working JS Analog clock and making this I hope you've learnt some concept of the plain Javascript.

Note: The article is a write-up to what I learnt from making this Analog JS Clock from the Wes Bos Javascript 30 course. I recommend anyone interested in Javascript to take this challenge and increase your JS Skills.

Understanding Javascript Filter

Nepali Lab — Tue, 02 Jun 2020 03:02:10 +0000

filter() is a Javascript Method which was added to the ECMA-262 standard in the 5th edition. filter() provides an easy way of creating a new array out of an existing array under certain constraints.

Simple Definition

filter() method creates a new array with a certain constraints that are provided to the original array.

Intuitive sense of Javascript Filter

As the name says, Javascript filter() does what is says. It filters things. As naive as it may seem , it actually is the case. Let's take an example of a simple water filter - what does it do ? It takes impure water, filters out dirty things and gives you a clean water. The same analogy can be applied to Javascript filter. It takes an array, and you put certain constraints (like remove dirty things) and then gives you anoter array of items.

As we see in the above picture, it takes an array(here a array of red and yellow arrows) and we provide a certain filter(give me only red lines) and as a result you get a array of only filtered yellow arrows.

Syntax and Uses

filter() has the following syntax.

var newArray = newArray.filter(function(items){
if(condition)
      return true;
})

Let's understand with a simple example:

Let's suppose that you have an array that contains students marks. So, now you want to give a simple present to students who have scored marks greater than 90. For this you'll have to separate the marks array that contains marks of students of the whole class into only those who have secured more than 90 marks.

const studentsMarks = [40,35,89,92,94,46,98,65,93,97,45];

As we know, we want to filter only those students who have secured more than 90 marks and place them in a separate array called topStudents. Here's how we do that using filter():

const topStudents = studentsMarks.filter(function(student){
if(studentsMarks>90)
{ return true; }
})

Just writing this will create a new array named topStudents that will contain all the students who have secured marks more than 90.

If you console.log(topStudents) you'll see the following results:

[92,94,98,93,97]

So, as you see this makes it much easier to create a new array out of an existing array.

Minimizing our existing code

For much simplicity and less code, the above code could be written using arrow functions. Let's see how we can minimize the code written above:

const topStudents = studentsMarks.filter(function(student){
return student>90;
})

So, we omitted the if() statement using the above code which made our code less. This could even be made more beautiful using arrow function. Here's how we can write using arrow functions.

const topStudents = studentsMarks.filter(student => student>90)

So, using arrow functions we minimized our code to just one line. This makes code much more beautiful, simple and easy to maintain. That's why I'm in love with Modern Javascript.