DEV Community: Chetan Atrawalkar

🚀 #4 JavaScript Project Series That Makes You Pro.

Chetan Atrawalkar — Wed, 12 Jan 2022 06:17:00 +0000

Hello Coders!👋

Welcome back to the Javascript project series. Today i'm share another amazing project.

💟 Save This Series For Upcoming Projects.

💥 Let's get started....🚀

⏲️ Progress bar style clock | Clock using HTML, CSS and JavaScript.

In this project, we learn that how we create a Clock progress bar. We use HTML, Css, and javascript for this Clock progress bar. Hope you enjoy this projects series, so let's start....

Here's a preview :-

A basic HTML structure for a Clock progress bar.

HTML CODE

<div id="clock" class="progress-clock">  
      <button class="progress-clock__time-date" data-group="d" type="button">  
           <small data-unit="w">Sunday</small><br>  
           <span data-unit="mo">January</span>  
           <span data-unit="d">1</span>  
      </button>  
      <button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">12</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m" data-group="m" type="button">00</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">00</button>  
      <span class="progress-clock__time-ampm" data-unit="ap">AM</span>  
      <svg class="progress-clock__rings" width="256" height="256" viewBox="0 0 256 256">  
           <defs>  
                <linearGradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5">  
                     <stop offset="0%" stop-color="hsl(343,90%,55%)" />  
                     <stop offset="100%" stop-color="hsl(323,90%,55%)" />  
                </linearGradient>  
                <linearGradient id="pc-yellow" x1="1" y1="0.5" x2="0" y2="0.5">  
                     <stop offset="0%" stop-color="hsl(43,90%,55%)" />  
                     <stop offset="100%" stop-color="hsl(23,90%,55%)" />  
                </linearGradient>  
                <linearGradient id="pc-blue" x1="1" y1="0.5" x2="0" y2="0.5">  
                     <stop offset="0%" stop-color="hsl(223,90%,55%)" />  
                     <stop offset="100%" stop-color="hsl(203,90%,55%)" />  
                </linearGradient>  
                <linearGradient id="pc-purple" x1="1" y1="0.5" x2="0" y2="0.5">  
                     <stop offset="0%" stop-color="hsl(283,90%,55%)" />  
                     <stop offset="100%" stop-color="hsl(263,90%,55%)" />  
                </linearGradient>  
           </defs>  
           <!-- Days of Month -->  
           <g data-units="d">  
                <circle class="progress-clock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1" stroke="url(#pc-red)" stroke-width="12" />  
                <circle class="progress-clock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none" stroke="url(#pc-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" transform="rotate(-90,128,128)" />  
           </g>  
           <!-- Hours of Day -->  
           <g data-units="h">  
                <circle class="progress-clock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1" stroke="url(#pc-yellow)" stroke-width="12" />  
                <circle class="progress-clock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none" stroke="url(#pc-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" transform="rotate(-90,128,128)" />  
           </g>  
           <!-- Minutes of Hour -->  
           <g data-units="m">  
                <circle class="progress-clock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1" stroke="url(#pc-blue)" stroke-width="12" />  
                <circle class="progress-clock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none" stroke="url(#pc-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" transform="rotate(-90,128,128)" />  
           </g>  
           <!-- Seconds of Minute -->  
           <g data-units="s">  
                <circle class="progress-clock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1" stroke="url(#pc-purple)" stroke-width="12" />  
                <circle class="progress-clock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none" stroke="url(#pc-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" transform="rotate(-90,128,128)" />  
           </g>  
      </svg>  
 </div>

There is all HTML code for the Clock progress bar. Now, you can see output without CSS, then we write css & javascript for a Clock progress bar.

Output

CSS CODE

* {  
      border: 0;  
      box-sizing: border-box;  
      margin: 0;  
      padding: 0;  
 }  
 :root {  
      --hue: 223;  
      --bg: hsl(var(--hue),10%,90%);  
      --fg: hsl(var(--hue),10%,10%);  
      font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));  
 }  
 body, button {  
      color: var(--fg);  
      font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  
 }  
 body {  
      background-color: var(--bg);  
      height: 100vh;  
      display: grid;  
      place-items: center;  
 }  
 .progress-clock {  
      display: grid;  
      justify-content: center;  
      align-content: center;  
      position: relative;  
      text-align: center;  
      width: 16em;  
      height: 16em;  
 }  
 .progress-clock__time-date,  
 .progress-clock__time-digit,  
 .progress-clock__time-colon,  
 .progress-clock__time-ampm {  
      transition: color 0.2s linear;  
      -webkit-user-select: none;  
      -moz-user-select: none;  
      user-select: none;  
 }  
 .progress-clock__time-date,  
 .progress-clock__time-digit {  
      background: transparent;  
 }  
 .progress-clock__time-date,  
 .progress-clock__time-ampm {  
      grid-column: 1 / 6;  
 }  
 .progress-clock__time-date {  
      font-size: 0.75em;  
      line-height: 1.33;  
 }  
 .progress-clock__time-digit,  
 .progress-clock__time-colon {  
      font-size: 2em;  
      font-weight: 400;  
      grid-row: 2;  
 }  
 .progress-clock__time-colon {  
      line-height: 1.275;  
 }  
 .progress-clock__time-ampm {  
      cursor: default;  
      grid-row: 3;  
 }  
 .progress-clock__rings {  
      display: block;  
      position: absolute;  
      top: 0;  
      left: 0;  
      width: 100%;  
      height: 100%;  
      z-index: -1;  
 }  
 .progress-clock__ring {  
      opacity: 0.1;  
 }  
 .progress-clock__ring-fill {  
      transition:  
           opacity 0s 0.3s linear,  
           stroke-dashoffset 0.3s ease-in-out;  
 }  
 .progress-clock__ring-fill--360 {  
      opacity: 0;  
      stroke-dashoffset: 0;  
      transition-duration: 0.3s;  
 }  
 [data-group]:focus {  
      outline: transparent;  
 }  
 [data-units] {  
      transition: opacity 0.2s linear;  
 }  
 [data-group="d"]:focus,  
 [data-group="d"]:hover {  
      color: hsl(333,90%,55%);  
 }  
 [data-group="h"]:focus,  
 [data-group="h"]:hover {  
      color: hsl(33,90%,55%);  
 }  
 [data-group="m"]:focus,  
 [data-group="m"]:hover {  
      color: hsl(213,90%,55%);  
 }  
 [data-group="s"]:focus,  
 [data-group="s"]:hover {  
      color: hsl(273,90%,55%);  
 }  
 [data-group]:focus ~ .progress-clock__rings [data-units],  
 [data-group]:hover ~ .progress-clock__rings [data-units] {  
      opacity: 0.2;  
 }  
 [data-group="d"]:focus ~ .progress-clock__rings [data-units="d"],  
 [data-group="d"]:hover ~ .progress-clock__rings [data-units="d"],  
 [data-group="h"]:focus ~ .progress-clock__rings [data-units="h"],  
 [data-group="h"]:hover ~ .progress-clock__rings [data-units="h"],  
 [data-group="m"]:focus ~ .progress-clock__rings [data-units="m"],  
 [data-group="m"]:hover ~ .progress-clock__rings [data-units="m"],  
 [data-group="s"]:focus ~ .progress-clock__rings [data-units="s"],  
 [data-group="s"]:hover ~ .progress-clock__rings [data-units="s"] {  
      opacity: 1;  
 }  
 /* Dark theme */  
 @media (prefers-color-scheme: dark) {  
      :root {  
           --bg: hsl(var(--hue),10%,10%);  
           --fg: hsl(var(--hue),10%,90%);  
      }  
      .progress-clock__ring {  
           opacity: 0.2;  
      }  
 }

Now we have completed our CSS section, Here is our updated output CSS.

Output

JavaScript CODE

window.addEventListener("DOMContentLoaded",() => {  
      const clock = new ProgressClock("#clock");  
 });  
 class ProgressClock {  
      constructor(qs) {  
           this.el = document.querySelector(qs);  
           this.time = 0;  
           this.updateTimeout = null;  
           this.ringTimeouts = [];  
           this.update();  
      }  
      getDayOfWeek(day) {  
           switch (day) {  
                case 1:  
                     return "Monday";  
                case 2:  
                     return "Tuesday";  
                case 3:  
                     return "Wednesday";  
                case 4:  
                     return "Thursday";  
                case 5:  
                     return "Friday";  
                case 6:  
                     return "Saturday";  
                default:  
                     return "Sunday";  
           }  
      }  
      getMonthInfo(mo,yr) {  
           switch (mo) {  
                case 1:  
                     return { name: "February", days: yr % 4 === 0 ? 29 : 28 };  
                case 2:  
                     return { name: "March", days: 31 };  
                case 3:  
                     return { name: "April", days: 30 };  
                case 4:  
                     return { name: "May", days: 31 };  
                case 5:  
                     return { name: "June", days: 30 };  
                case 6:  
                     return { name: "July", days: 31 };  
                case 7:  
                     return { name: "August", days: 31 };  
                case 8:  
                     return { name: "September", days: 30 };  
                case 9:  
                     return { name: "October", days: 31 };  
                case 10:  
                     return { name: "November", days: 30 };  
                case 11:  
                     return { name: "December", days: 31 };  
                default:  
                     return { name: "January", days: 31 };  
           }  
      }  
      update() {  
           this.time = new Date();  
           if (this.el) {  
                // date and time  
                const dayOfWeek = this.time.getDay();  
                const year = this.time.getFullYear();  
                const month = this.time.getMonth();  
                const day = this.time.getDate();  
                const hr = this.time.getHours();  
                const min = this.time.getMinutes();  
                const sec = this.time.getSeconds();  
                const dayOfWeekName = this.getDayOfWeek(dayOfWeek);  
                const monthInfo = this.getMonthInfo(month,year);  
                const m_progress = sec / 60;  
                const h_progress = (min + m_progress) / 60;  
                const d_progress = (hr + h_progress) / 24;  
                const mo_progress = ((day - 1) + d_progress) / monthInfo.days;  
                const units = [  
                     {  
                          label: "w",  
                          value: dayOfWeekName  
                     },  
                     {  
                          label: "mo",  
                          value: monthInfo.name,  
                          progress: mo_progress  
                     },  
                     {  
                          label: "d",   
                          value: day,  
                          progress: d_progress  
                     },  
                     {  
                          label: "h",   
                          value: hr > 12 ? hr - 12 : hr,  
                          progress: h_progress  
                     },  
                     {  
                          label: "m",   
                          value: min < 10 ? "0" + min : min,  
                          progress: m_progress  
                     },  
                     {  
                          label: "s",   
                          value: sec < 10 ? "0" + sec : sec  
                     },  
                     {  
                          label: "ap",  
                          value: hr > 12 ? "PM" : "AM"  
                     }  
                ];  
                // flush out the timeouts  
                this.ringTimeouts.forEach(t => {  
                     clearTimeout(t);  
                });  
                this.ringTimeouts = [];  
                // update the display  
                units.forEach(u => {  
                     // rings  
                     const ring = this.el.querySelector(`[data-ring="${u.label}"]`);  
                     if (ring) {  
                          const strokeDashArray = ring.getAttribute("stroke-dasharray");  
                          const fill360 = "progress-clock__ring-fill--360";  
                          if (strokeDashArray) {  
                               // calculate the stroke  
                               const circumference = +strokeDashArray.split(" ")[0];  
                               const strokeDashOffsetPct = 1 - u.progress;  
                               ring.setAttribute(  
                                    "stroke-dashoffset",  
                                    strokeDashOffsetPct * circumference  
                               );  
                               // add the fade-out transition, then remove it  
                               if (strokeDashOffsetPct === 1) {  
                                    ring.classList.add(fill360);  
                                    this.ringTimeouts.push(  
                                         setTimeout(() => {  
                                              ring.classList.remove(fill360);  
                                         }, 600)  
                                    );  
                               }  
                          }  
                     }  
                     // digits  
                     const unit = this.el.querySelector(`[data-unit="${u.label}"]`);  
                     if (unit)  
                          unit.innerText = u.value;  
                });  
           }  
           clearTimeout(this.updateTimeout);  
           this.updateTimeout = setTimeout(this.update.bind(this),1e3);  
      }  
 }

Final Output

Now we have completed our javascript section, Here is our updated output with javascript. Hope you like the Clock progress bar.

♥️ Save This Series For Upcoming Amazing Projects.

Thanks for reading!

Ultimate List Of Javascript Learning Resources [Free]

Chetan Atrawalkar — Wed, 05 Jan 2022 05:52:11 +0000

What JavaScript Is And Why You Should Learn It

In simple terms, JavaScript is a scripting or programming language used to make a website interactive. It allows you to implement complex features on web pages. These features could be timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, modals, etc. JavaScript isn’t only used to create websites. It can also be used to build browser-based games and, with the help of certain frameworks, mobile apps for different operating systems.

If you want to get into web development, or are already into web development, and want to succeed in your career, then learning JavaScript is a required skill for you. Aside from its beginner-friendliness, JavaScript is the most popular programming language, which means that it’ll be relevant in years to come. With more and more businesses moving online, demand for JavaScript developers has been rocketing. The best time to learn JavaScript was yesterday, the next best time is now, so let’s get started.

In this article, I have put together a variety of free resources that you can easily access to help you learn the JavaScript basics to advanced. From courses and videos, to written guides and blogs, there is something here for everyone. Enjoy....

Ultimate List Of Javascript Learning Resources [Free].

Let’s take a look at some awesome resources we can all learn from now.

🌐 Websites

- TutorialRepublic

- Javascript.info

- HTML Dog

- FreeCodeCamp

- The Odin Project

- W3Schools

- JavatPoint

- JavaScript Notes & Reference (By Wesbos)

- Study Tonight

- Tutorials Point

- Devdocs.io

- MDN Web Docs

- Geeks For Geeks

- Sololearn

📺 YouTube Channels

- FreeCodeCamp.Org

- JavaScript Mastery

- Florin Pop

- Hitesh Choudhary

- Telusko

- Clever Programmer

- Akshay Saini

- Wes Bos

- CodeWithHarry

- Academind

- Traversy Media

- The Net Ninja

- Web Dev Simplified

- Dcode

- LearnWebCode

- Dev Ed

- Thapa Technical

- Yahoo Baba

📚 E-Books

Eloquent Javascript
You Don't Know JS Yet Series
JavaScript: The Definitive Guide
JavaScript: The Good Parts
JavaScript And JQuery
Speaking JavaScript
JavaScript For Impatient Programmers
Effective JavaScript
JavaScript In Easy Steps
Learn JavaScript Visually

Conclusion

The list in this article is not exhaustive, but it covers some of the best resources to learn JavaScript. By using these resources, you can get to a pretty advanced level, and even get a job offer. For the best results, try to mix them because you can learn something from all of them.

And the best thing: they are entirely free.

I've also a Instagram channel the link here for amazing web development resources as well source code.

Thanks for reading!

10 Helpful React Components Library For Developers.

Chetan Atrawalkar — Tue, 28 Dec 2021 06:30:04 +0000

Hello Dev's 👋

React powers the user interfaces (UI) of close to 10 million websites around the world. While the base library of React is solid, there are multiple component libraries filled with valuable design elements for your React app or web development project.

In this article, we shall highlight the ten helpful component libraries. These libraries were chosen based on the Github stars and usage plus the support community on Stackoverflow.

If you are looking for component libraries for your next project, then these are the ones certainly worth checking out.

🛑 10 Helpful React Components Library For Developers.

Take a look at the 10 React component libraries before starting your next React project to help you develop great apps.

1. React Joyride

Create awesome tours for your app! Showcase your app to new users or explain functionality of new features.
It uses react-floater for positioning and styling. And you can use your own components too.

2. React Select

The Select Component for React.js.
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

3. React Grid Layout

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.
A draggable and resizable grid layout with responsive breakpoints.

4. React Table

Lightweight and extensible data tables for React. Build and design powerful datagrid experiences while retaining 100% control over markup and styles.
Hooks for building fast and extendable tables and datagrids for React.

5. React Spaces

An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resizable spaces enabling you to build desktop type UI's in the browser.

6. React Beautiful Dnd

Beautiful and accessible drag and drop for lists with React.
react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on).

7. React Big Calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.

8. React Date Picker

A simple and reusable datepicker component for React.
The React Date Picker is a helpful and abundant Component used to display dates using the calendar dialog format.

Conclusion

Choosing a React component library is no easy task as there’s no one-size-fits-all solution. I recommend carefully looking at your needs, preferred developer style, and each framework to see which one appeals the most to you.
In the end, the best framework is the one that works for you.

Thanks for reading!

Keep Claim And Just Code It 😎

Amazing Notification Bell Alert Animation Using Pure CSS.

Chetan Atrawalkar — Fri, 24 Dec 2021 07:19:54 +0000

Hello 👋

Welcome to CSS Animation Article. In this, we're going to see how to create an Amazing Notification Alert Animation in Pure CSS.

Notifications are very important in today's life. It reminds you the things that you forgot, It shows you the progress of various things so that you don't have to open that specific application again and again.
Hence to show that user recieves a new notification is not a simple task. Here's an easy animation which you can use in your application.

Let's get started....
Before going to coding section, checkout quick preview first.

Here's Preview:-

Step 1

Like always, create 2 files - Index.html and Style.css.

Step 2

After creating the html file add the <div> tag with bell icon that wrap into <i>tag.

HTML



<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Amazing Notification Alert</title>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>

<body>

<div class="bell">

    <div class="bell-border"></div>

    <i class="fas fa-bell btn-bell"></i>

</div>

</body>

</html>

Step 3

Then add the Style.css for amazing style. Using this file we can manage the style as per requirement.

CSS



body {

    height: 100%;

    overflow-x: hidden;

    margin: 0 auto;

    background: #f6f7fc;

}

.bell, .bell-border, .btn-bell {

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

.bell {

    height: 60px; 

    width: 60px;

    box-shadow: -1px 2px 10px #999;

    background: #7844E8;
    animation-name: col;

    animation-duration: 2s;

    animation-iteration-count: infinite;

}

.bell-border {

    height: 59px; 

    width: 59px;

    border: 1px solid #7844E8!important;

    animation-name: bord-pop;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;

}

.btn-bell {

    color: white;

    font-size: 20px;

    animation-name: bell-ring;

    animation-duration: 2s;

    animation-iteration-count: infinite;

}

@keyframes bord-pop {

    0% {

        transform: translate(-50%, -50%);

    }

    50% {

        transform: translate(-50%, -50%) scale(1.9);

        opacity: 0.1;

    }

    100% {

        transform: translate(-50%, -50%) scale(1.9);

        opacity: 0;

    }

}

@keyframes col {

    0% {

        transform: scale(1) translate(0,0);

    }

    10% {

        transform: scale(1.1) translate(0,0);

    }

    75% {

        transform: scale(1) translate(0,0);

    }

    100% {

        transform: scale(1) translate(0,0);

    }

}

@keyframes bell-ring {

    0% {

        transform: translate(-50%, -50%);

    }

    5%, 15% {

        transform: translate(-50%, -50%) rotate(25deg);

    }

    10%, 20% {

        transform: translate(-50%, -50%) rotate(-25deg);

    }

    25%  {

        transform: translate(-50%, -50%) rotate(0deg);

    }

    100% {

        transform: translate(-50%, -50%) rotate(0deg);

    }

}

Step 4

Enjoy the work in your next Projects.

CODEPEN

Thats all, this is Amazing Notification Alert in Pure CSS. You can customize this code further as per your requirement.

Keep Claim And Just Code It 😎

Top 10 Trending Projects on GitHub for Web Developers

Chetan Atrawalkar — Wed, 15 Dec 2021 13:41:26 +0000

GitHub is not just a version control service, it is a terrific content resource for all-things-development.

There are a lot of repositories out there that can help you as a developer by providing great value for you. So no matter what type of developer you are, you should always take the advantage of GitHub.

In this article, I decided to share top 10 trending projects on github for web developers that you can benefit from as a web developer. Let’s gets to check out.

1. Turborepo

Turborepo is a high-performance build system for JavaScript and TypeScript codebases.
Turborepo reimagines build system techniques used by Facebook and Google to remove maintenance burden and overhead.

Checkout this repo here

2. Statsig's Status Page

A simple, zero-dependency, pure js/html status page based on GitHub Pages and Actions.

Checkout this repo here

3. Awesome Software Architecture

A curated list of awesome articles, videos, and other resources to learn and practice about software architecture, patterns, and principles.

Checkout this repo here

4. React Cool Img

A React Img component let you handle image UX and performance as a Pro!

Checkout this repo here

5. Klipse

Klipse is a JavaScript plugin for embedding interactive code snippets in tech blogs.

Checkout this repo here

6. Simple Git

A light weight interface for running git commands in any node.js application.

Checkout this repo here

7. Flatpickr

lightweight, powerful javascript datetimepicker with no dependencies

Checkout this repo here

Conclusion

That's all folks, Thank you for making it this far down. All the repositories mentioned are not just the only resources available, I'm sure there must be tons of other amazing project out there too. These are the ones that I really found helpful and often get myself indulged into.

Don't forget to star 🌟 these repositories as a thank you note for all the amazing contributors who put their effort creating these amazing resources for all of us.

Keep Claim And Just Code It 😎

Best file comparison tools for linux.

Chetan Atrawalkar — Wed, 08 Dec 2021 12:00:04 +0000

Many new tools for comparing files have emerged in Linux over the years, and in this post, we'll examine best and most useful tools for doing that.

File comparison compares the contents of computer files, finding their common contents and their differences. When you compare two computer files on Linux, the difference between their contents is called a diff.

There are several file comparison tools that you can use on Linux, and in this review, we shall look at some of the best terminal based and GUI diff tools you can take advantage of while writing code or other text files.

👉 Let's go and explore this tools.

1️⃣ Kompare

Kompare is a diff GUI wrapper that allows users to view differences between files and also merge them.
Some of its features include:

Supports multiple diff formats

Supports comparison of directories

Supports reading diff files

Customizable interface

Creating and applying patches to source files

📌Homepage Link:

2️⃣ Vimdiff

Vimdiff works in an advanced manner in comparison to diff utility. It enables a user to edit up to four versions of a file while showing their differences. When you run it, Vimdiff opens two or three or four files using vim text editor.
Vimdiff Edit Multiple Files for Differences.

📌Homepage Link:

3️⃣ Diffuse – GUI Diff Tool

Diffuse is another popular, free, small and simple GUI diff and merge tool that you can use on Linux. Written in Python, It offers two major functionalities, that is: file comparison and version control, allowing file editing, merging of files and also output the difference between files.
You can view a comparison summary, select lines of text in files using a mouse pointer, match lines in adjacent files and edit different file. Other features include:

Syntax highlighting

Keyboard shortcuts for easy navigation

Supports unlimited undo

Unicode support

Supports Git, CVS, Darcs, Mercurial, RCS, Subversion, SVK and Monotone

📌Homepage Link:

4️⃣ DiffMerge

DiffMerge is a cross-platform GUI application for comparing and merging files. It has two functionality engines, the Diff engine which shows the difference between two files, which supports intra-line highlighting and editing and a Merge engine which outputs the changed lines between three files.
It has got the following features:

Supports directory comparison

File browser integration

Highly configurable

📌Homepage Link:

5️⃣ Meld – Diff Tool

Meld is a lightweight GUI diff and merge tool. It enables users to compare files, directories plus version controlled programs. Built specifically for developers, it comes with the following features:

Two-way and three-way comparison of files and directories

Update of file comparison as a users types more words

Makes merges easier using auto-merge mode and actions on changed blocks

Easy comparisons using visualizations

Supports Git, Mercurial, Subversion, Bazaar plus many more

📌Homepage Link:

6️⃣ KDiff3 – – Diff and Merge Tool

KDiff3 is yet another cool, cross-platform diff and merge tool made from KDevelop. It works on all Unix-like platforms including Linux and Mac OS X, Windows.

It can compare or merge two to three files or directories and has the following notable features:

Indicates differences line by line and character by character

Supports auto-merge

In-built editor to deal with merge-conflicts

Supports Unicode, UTF-8 and many other codecs

Allows printing of differences

Windows explorer integration support

Also supports auto-detection via byte-order-mark “BOM”

Supports manual alignment of lines

Intuitive GUI and many more

📌Homepage Link:

7️⃣ TkDiff

TkDiff is also a cross-platform, easy-to-use GUI wrapper for the Unix diff tool. It provides a side-by-side view of the differences between two input files. It can run on Linux, Windows and Mac OS X.
Additionally, it has some other exciting features including diff bookmarks, a graphical map of differences for easy and quick navigation plus many more.

📌Homepage Link:

This is some of the best file and directory comparator and merge tools, you probably want to try out some of them. These may not be the only diff tools available you can find on Linux, but they are known to offer some the best features.

🙏 Please share your valuable feedback in comment section which is yours favourite and mostly used diff tool and which tool you used in daily basis.

Thanks For Reading.

😎 Keep Claim And Just Code It!

🔝Smooth Scroll-To-Top Functionality Using JavaScript [Easy Way].

Chetan Atrawalkar — Wed, 01 Dec 2021 13:21:03 +0000

Halo Guys 👋

In this tutorial we will show you how to add scroll the page to the top smoothly using pure javascript.

Scroll to top buttons allow users to quickly return to the top of a webpage with a single click. This can be very useful when the page has a lot of content.

Let’s start by creating a scrollToTop() function that will contain all the required JavaScript:



function scrollToTop(){
// all JavaScript will go here
};

Next inside the scrollToTop() function pass the window.scrollTo() method with two parameters coordinate and behaviour:



function scrollToTop() {
window.scrollTo({
    top: 0,
    behavior: 'smooth'
})
}

Next best part is smooth scrolling could be done easily using behavior:'smooth'.

Thats all, this is how to smoothly scroll page to top using javascript. You can customize this code further as per your requirement.

Keep Claim And Just Code It 😎

🚀#3 JavaScript Project Series.

Chetan Atrawalkar — Wed, 15 Sep 2021 05:55:52 +0000

Hello Coders!👋

Welcome back to the Javascript project series. Today i'm share another amazing project.

💟 Save This Series For Upcoming Projects.

💥 Let's get started....🚀

📜 3. Animated Menu Indicator using JavaScript.

In this, we're going to see how you can create an animated Menu Navbar using JavaScript. Navbar is an essential part of any website. It gives the user a functionality to navigate through the website efficiently and easily. It guides the user accordingly so the user will not get lost or loose interest.

Here's a preview:-

🔸 CodePen Link For Result

That being said, let us get started.

Step - 1:- Like always, create 3 files - Index.html, Style.css and Script.js.
Step - 2:- Copy the below HTML code and paste it into your code editor.

Index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Animated menu indicator</title>
<link rel="stylesheet" href="style.css">

</head>
<body>

<nav class="nav">
  <a href="#" class="nav-item is-active" active-color="orange">Home</a>
  <a href="#" class="nav-item" active-color="green">About</a>
  <a href="#" class="nav-item" active-color="blue">Project</a>
  <a href="#" class="nav-item" active-color="red">Blog</a>
  <a href="#" class="nav-item" active-color="rebeccapurple">Contact</a>
  <span class="nav-indicator"></span>
</nav>

<script  src="script.js"></script>

</body>
</html>

Step - 3:- Below is the CSS code for styling.

Style.css

@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap");
* {
  box-sizing: border-box;
}
body {
  text-align: center;
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background-color: #f6f7fc;
}
.nav {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  padding: 0 20px;
  border-radius: 40px;
  box-shadow: 0 10px 40px rgba(159, 162, 177, 0.6);
}
.nav-item {
  color: #83818c;
  padding: 20px;
  text-decoration: none;
  transition: 0.3s;
  margin: 0 6px;
  z-index: 1;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  position: relative;
}
.nav-item:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #dfe2ea;
  border-radius: 8px 8px 0 0;
  opacity: 0;
  transition: 0.3s;
}
.nav-item:not(.is-active):hover:before {
  opacity: 1;
  bottom: 0;
}
.nav-item:not(.is-active):hover {
  color: #333;
}
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  transition: 0.4s;
  height: 5px;
  z-index: 1;
  border-radius: 8px 8px 0 0;
}

Step - 4:- Below is the JavaScript code which is the most important part in this Animation. Here, we're creating two constants - indicator and items. "indicator" will store the information of the class ".nav-indicator", that is the line below. And "items" will store the information of the class ".nav-items", that is the menu-items.
Next define function handleIndicator that's check the which item is clicked by used as per click perform particular task.
In this function used forEach loop is an Array method that executes a custom callback function on each item in an array.
Read the code and you will understand how things really works.

Script.js

const indicator = document.querySelector('.nav-indicator');
const items = document.querySelectorAll('.nav-item');

function handleIndicator(el) {
  items.forEach(item => {
    item.classList.remove('is-active');
    item.removeAttribute('style');
  });

  indicator.style.width = `${el.offsetWidth}px`;
  indicator.style.left = `${el.offsetLeft}px`;
  indicator.style.backgroundColor = el.getAttribute('active-color');

  el.classList.add('is-active');
  el.style.color = el.getAttribute('active-color');
}


items.forEach((item, index) => {
  item.addEventListener('click', e => {handleIndicator(e.target);});
  item.classList.contains('is-active') && handleIndicator(item);
});

And that's it. You're done.

💟 Save This Series For Upcoming Projects.

🛑 And If you need more content like this follow @codev_land on instagram.

Keep Claim And Just Code It 😎

🚀#2 JavaScript Project Series That Makes You Pro.

Chetan Atrawalkar — Tue, 07 Sep 2021 07:37:10 +0000

Hello Coders!👋

Welcome back to the Javascript project series. Today i'm share another amazing project.

💟 Save This Series For Upcoming Projects.

💥 Let's get started....🚀

🌈 2. Gradient Generator using Javascript.

In this, we're going to see how generate your own gradient with pure JavaScript. This can be considered as a mini-project if you're learning JavaScript. It teaches you DOM concepts and how to change styling of CSS through JavaScript.

Here's a preview :-

🔸 CodePen Link For Result

That being said, let us get started.

Step - 1:- Like always, create 3 files - Index.html, Style.css and Script.js.
Step - 2:- Copy the below HTML code and paste it into your code editor.

Index.html

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

<head>
  <meta charset="UTF-8">
  <title>Create Gradient using Javascript</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <h3>Create Gradient using Javascript</b></h3>
  <div id="gradient"></div>
  <input class="color1" type="color" name="color1" value="#00ff00">
  <input class="color2" type="color" name="color2" value="#ff0000">
  <h2>Code for generated gradient is - </h2>
  <h4></h4>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

Here we have used tag of type color to choose various colors for gradient. We have added a section for card with id=gradient to show the gradient on card.
Step - 3:- Below is the CSS code for styling.

Style.css

body {
    font: 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 100vh;
    background-color: #f6f7fc;
}
#gradient{
    position: relative;
    background: linear-gradient(45deg, #00ff00 , #ff0000);
    width: 250px;
    height: 320px;
    border-radius: 25px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    box-shadow: 2px 31px 35px -15px rgba(0,0,0,0.64);
}
input{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border: none;
    outline: none;
    -webkit-appearance: none;
}
input::-webkit-color-swatch-wrapper {
    padding: 0; 
}
input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
h3 {
    font: 600 1.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3em;
    width: 100%;
}

Step - 4:- Below is the JavaScript code which is the most important part in this Generator. We declared some variable to store the DOM objects of a tag. We then declared a function called "setGradient()" which gets the color code from input tags and then assigns them to the gradient ID in HTML.

Script.js

var css = document.querySelector("h4");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var gradient = document.getElementById("gradient");

function setGradient() {
 gradient.style.background = 
 "linear-gradient(45deg, " 
 + color1.value 
 + ", " 
 + color2.value 
 + ")";
 css.textContent = gradient.style.background + ";";
}

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);

And that's it. You're done.

💟 Save This Series For Upcoming Projects.

That’s all! Let me know by comment below if you have successfully implemented this project.

🛑 And If you need more content like this follow @codev_land on instagram.

Keep Claim And Just Code It 😎

🚀#1 JavaScript Project Series That Makes You Pro.

Chetan Atrawalkar — Tue, 31 Aug 2021 07:11:36 +0000

Hello Coders!👋

JavaScript is one of the leading names when it comes to front-end web development. Moreover, it is one of the best programming languages to learn and earn in 2021. There are several ways of learning JS, ranging from books to tutorials and one amazing way to learn javascript is building a projects.
So I'm start the series of javascript projects for learning javascript with enjoyable projects. Hope you like this mini project series.

💟 Save This Series For Upcoming Projects.

💥 Let's get started....🚀

1.🎨 Color Theme Switcher Using JavaScript.

In this, we're going to see how you can change the theme of your website to any color you want using JavaScript. This can be considered as a mini-project if you're learning JavaScript. It teaches you DOM concepts and how to change styling of CSS through JavaScript.

Here's a preview :-

Step - 1: First Create project files - Index.html, Style.css and Script.js.
Step - 2: Then Copy the below HTML code and paste it into your code editor.

Index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Color Change Buttons</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<nav class="menu">
    <a href="#" class="menu__item menu__item--yellow " data-background="e4a924">
    </a>
    <a href="#" class="menu__item menu__item--red" data-background="c92142">  
    </a>
    <a href="#" class="menu__item menu__item--green" data-background="37b983">
    </a>
    <a href="#" class="menu__item menu__item--purple" data-background="9f32b8">
    </a>
  </nav>

  <script  src="script.js"></script>

</body>
</html>

Here we have used tag to choose various colors for the theme. We have used an attribute "data-background" to specify the default background of the anchor tags.
Step - 3: After creating html file next is the use CSS code for styling.

Style.css

html {
  height: 100%;
  font-size: 1.3vw;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f7fc;
  transition: background-color 0.55s;
  will-change: background-color;
  margin: 0;
}
.menu__item {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12.5rem;
  display: inline-block;
  margin-left: 2.1rem;
  animation-name: close;
  animation-duration: 0s;
  will-change: width background-color;
  transition: background 0.55s;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 5px rgba(0,0,0, 0.3);
}

.menu__item:first-child {
  margin-left: 0;
  background: #fabe2b;
}
.menu__item:nth-child(2){
  background: #f43768;
}
.menu__item:nth-child(3){
  background: #45e1a3;
}
.menu__item:nth-child(4){
  background: #c152da;
}
.menu__item--animate {
  animation-duration: 0.5s;
}
.menu__item--active {
  width: 17rem;
  animation-name: open;
}

.menu__item--active.menu__item--yellow { background: #fabe2b; }
.menu__item--active.menu__item--red { background: #f43768; }
.menu__item--active.menu__item--green { background: #45e1a3; }
.menu__item--active.menu__item--purple { background: #c152da; }

Step - 4: Below is the JavaScript code which is the most important part in this Theme changer.
We declared a const 'menuItems' which will get the tag attributes of our tags.
Then in that const we store all the mouse event listener and at the same time calling the `buttonClick()` method which assigns the specified color to the background.

Script.js

const menuItems = document.querySelectorAll('.menu__item');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', buttonClick);
}

function buttonClick() {
  if (!this.classList.contains('menu__item--active')) {
    document.body.style.backgroundColor = `#${this.getAttribute('data-background')}`;
  }
}

And that's it. You're done.

💟 Save This Series For Upcoming Projects.

That’s all! Let me know by comment below if you have successfully implemented this project.

🛑 And If you need more content like this follow @codev_land on instagram.

Keep Claim And Just Code It 😎

🔵 CSS Responsive Sidebar Navigation.

Chetan Atrawalkar — Tue, 24 Aug 2021 05:52:14 +0000

💜 Today, I’m going to share a responsive sidebar navigation with a step-by-step implementation guide. This sidebar navigation menu comes with an animated hamburger button to toggle the menu drawer.

Generally, a hamburger menu requires a small function of JavaScript to toggle the menu drawer. But, it can also functionalize using HTML and pure CSS.

HTML for Responsive Sidebar Navigation

The HTML consists of three parts, navigation menu, a toggle button and a dummy content that contains navigation links.
The All div and section are wrapped into main div with class name .container.

The CSS Styles

As the above HTML, first of all, we’ll define some styles for the body and main container.
After that styles nav using CSS position absolute property, if you want to make it static just remove position attribute. If you want to change its thickness, update the height value.
Similarly, you are also able to change its background color according to your own theme.
Add the following CSS code for the dummy content and it's menu.

Final Result:-

If you need source code please follow me on instagram @codev_land

That’s all! Let me know by comment below if you have successfully implemented this sidebar navigation menu into your project.

Keep Claim And Just Code It 😎

😃 Add Emoji Picker To An Input Field In React App [Easy way].

Chetan Atrawalkar — Tue, 17 Aug 2021 05:05:05 +0000

😯 Simple And Easiest way to add an emoji picker to your React app.

Emojis are now such an essential part of how we communicate that we simply can’t afford to leave them out of our applications. They add an extra dimension to how we express ourselves in our day-to-day interactions that can be otherwise difficult to do with text only🤪.

▶️ How to add an emoji picker to your React App.

I’m using react-input-emoji the best solution from my opinion.

React InputEmoji provides a simple way to have an input element with emoji picker support. Click the picker button next to the input field and select an emoji from the popup window. Done!

💠 Let's Checkout....

Step 1 :- Install

You can get it on npm.
npm install react-input-emoji --save

Step 2 :- Usage

After install import the react-input-emoji component to display your input with emoji.

import React, { useState } from 'react'
    import InputEmoji from 'react-input-emoji'

    export default function Example () {
      const [ text, setText ] = useState('')

      function handleOnEnter (text) {
        console.log('enter', text)
      }

      return (
        <InputEmoji
          value={text}
          onChange={setText}
          cleanOnEnter
          onEnter={handleOnEnter}
          placeholder="Type a message"
        />
      )
    }

Output ⏬.

Click Here For More Details.

🙏Please share your valuable feedback in comment section what think about this.
Don't forget to like and subscribe Keep Following 😉.