DEV Community: Rutik Wankhade

devspace : get top posts from the best developer platforms

Rutik Wankhade — Tue, 09 Feb 2021 06:36:40 +0000

After an awesome experience with Hashnode ChristmasHackathon, Hashnode announced a new hackathon in partnership with Vercel. This time it was a 3 week-long hackathon. I wanted to build a full-stack app this time, but I didn't know a thing about how the backend works, so I started learning it.

More than 2 weeks passed and I didn't even start working on the project. Everything was new and a bit intimidating and I couldn't build it in time.

But I still wanted to participate!
So I decided to pivot at the last moment and come up with something else. I was running out of both ideas and time. What should I build? a recipe app? a movie app? Nope. It had to be something that would be useful for me in my life.

💡 The idea

Did you hear of daily.dev ? It's a new tab extension that curates blogs and news for developers from different platforms. I have used it. But it was too much content for me. I realized I check only 4-5 developer platforms daily. And sometimes I don't stay for long, I just want to peek, see top posts and get back to my work.

Wait, what if I build something so that I won't need to search and switch tabs for these websites? Well, that sounds like a good idea.

🚀 Introducing devspace

Get top posts from the best developer platforms in one place.

The app is deployed on Vercel and the code is open-sourced on Github.

See live : https://devspace.vercel.app/ and code here.

📰 UI/UX

Even though it was a small app, creating a basic design prototype is always a plus. It helps to move in the right direction. I used
excalidraw. it's a great tool to create quick sketches.

Layout

For the layout, I divided the screen into two parts. One for navigation and another for the main content. I thought of it as an open book.

Colors

I tried to be consistent with the colors and used colors that complement each other. Also, made it super clean and intuitive.

Screenshots

👩‍💻 Technologies used

React
TailwindCSS
APIs - Hashnode, dev, HackerNews, Github, and Product Hunt
svg-loaders-react for displaying a loader while the app fetches data
react-reveal for smooth animation on scroll

🌧 Challenges faced

Implementing the APIs was a bit frustrating. Reading the docs thoroughly helped a lot.
APIs of Hashnode, Dev, and Product Hunt was easy to use and implement. But Github doesn't have any endpoint for getting trending repositories in its official API. Luckily, I found an unofficial API. Thanks to the open-source developer community.
HackerNews API provides an endpoint to get only the ids of top posts. So I had to fetch individual posts with these ids.
Few blog posts didn't have a cover image, so I used Lorem Picsum's API to set random images for default.

✨ Conclusion

I built this in a very short period of time and still managed to make it look good and useful, at least for me. That's an achievement! So this is my submission for the VercelHashnode Hackathon. 🙌 Cheers!

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

Replace your new tab with a mindful productive app.

Rutik Wankhade — Fri, 22 Jan 2021 14:14:50 +0000

Hey everyone, I built Tabwave, It's a mindful productive app to replace your browser's default new tab.

🚀 Add shortcuts to your favorite sites.
🎯 Get more done with daily tasks and goals.
📑 Brainstorm ideas on Sticky notes.
⏳ Increase your productivity with a Pomodoro clock.
🙋‍♂️ Get random activity ideas with a single click.
🌗 Dark mode toggle for a better experience.

and many more.
The extension is available for both chrome as well as Firefox browser.

Check out https://tabwave.vercel.app

Try it now and let me know your thoughts. I would love to hear your feedback.

How I made a tool to create cover images for my blogs quickly

Rutik Wankhade — Sat, 29 Aug 2020 04:52:22 +0000

Do you write blogs? Have you ever struggled to create cover images for your blogs?
Well, I did. So I have made a tool that will help you create awesome cover images for your blogs quickly.

🗃 The problem

I started blogging a few months back. It's one of the best decisions I have ever made. But every time I wanted to write a post, I had to create and edit a cover image for it. I mean I love creating creative cover images but sometimes I feel I just spend too much time designing it.

And then I saw these comments on my posts.

I use canva. It's a nice tool. But I thought I need something minimal so that creating those cover images won't be any hassle. Coincidently I just started learning react. I knew some basics and I thought why not implement my knowledge of react and make something out of it. Also, it might help someone else too. And that's how I came up with the idea of this project.

🛠 The process

I started working on this as a fun project. I had an exact visualization of what I wanted to create.

So I first created a design of a cover image that can be used as the template user can edit. I asked my self what things I would like to add or what can I do to make the cover image more appealing. And I started playing with it. It was fun. After spending a lot of time, solving problems and finding solutions, this is what I came up with the first build.

📦 The final outcome

I shared it on Twitter and Linkedin and I got a really good response from the developer community. I always wanted to contribute to open source. There are multiple ways to contribute and one of which is creating open-source projects. I open-sourced it. This is my first open-source project with react.

And within a few hours, I got my first pull request. Asish Raju made his first open-source contribution by contributing to my project. He added a few more customizable options and refactored the code.

For the first time, I was on the other side of a project. I learned how to manage pull requests, review code, and merged his pull request. Open Source Guides is a great resource to learn.

Features

Then I improved it little by little and added some more features. Here are a few noteworthy features of CoverView.

🛠 Create awesome cover images for your blogs quickly and easily

🌈 Choose different colors for background, foreground, border, and text

✨ Choose from 15+ different background patterns

👨‍💻 Add dev icons and author name for personal branding

💾 Download cover images in .png as well as .jpeg format

I just had a lot of fun making this. You might not be able to create a lot more creative images But having a nice cover is always better than having some random image or no cover image at all.

So check out CoverView

Conclusion

The important lesson I learned while building this is that you don't need to learn a language or framework completely to start making projects. You can start applying while learning it. I feel this way we can learn from our mistakes and understand the importance of one concept over others.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin. Also, subscribe to my newsletter and stay up-to-date with my latest blog posts.

⚡ Happy learning!

How to add canonical url to my old blog post ?

Rutik Wankhade — Fri, 07 Aug 2020 03:12:35 +0000

I tried adding a canonical url in one of my old blog post using triple dash in the markdown editor as well as the setting tab. But after saving it. I don't see anything like

This blog was originally published on xyz
How do I make it work ? Please help.

When frontend devs meet free APIs

Rutik Wankhade — Mon, 03 Aug 2020 06:29:00 +0000

Have you ever struggled to get ideas for your side projects? Are you looking to make something other than the same old todo apps? If yes, then you are in the right place, my friend. Welcome to the world of APIs where I will help you to get awesome ideas for your next side project.

*Do you know every time you build a to-do list app, a puppy dies?
*No! 😅 I am just kidding. There is nothing wrong with todo apps. It's just that todo apps are not the only thing you can create. Let's dive in to know what I mean.

But before that, let's go to flashback for a while.
So I just learned HTML, CSS, and some basics of JavaScript. I am enjoying playing with the DOM. And I created a todo list app. Then I built an expense app, then a calculator, and soon I was left with no ideas at all. And I was wondering what should I create now.
And that's the time when I got to know about APIs. So what is an API?

Here is what Wikipedia say about API

An application programming interface (API) is a computing interface that defines interactions between multiple software intermediaries. It defines the kinds of calls or requests that can be made, how to make them, the data formats that should be used, the conventions to follow, etc.

🤯 Doesn't make sense? Let me explain to you.
In simple terms, an API is a messenger that takes requests and tells the system what you want to do and returns the response back to you.

Imagine you are in a restaurant. You have the menu on your table and there is food cooking in the restaurant's kitchen. How would you get it? You will call the waiter right. The waiter will ask for your order, get your order and bring it on your table. So the waiter here is the API.

Using APIs you can integrate data from other apps into your projects and apps.

For Ex. You can use weather API and show weather data in your app. Did you see that login with google or login with Facebook buttons on different apps? That is an API.
How cool is that? So I learned about APIs and how they work. And it opened the doors of unlimited ideas to me. According to some research around 40 new APIs are being added per week. Now think about how awesome things you can build with it.

The first thing I built was ⚡ Skymate, a weather app that shows real-time weather of any location. You can see it on github here.

I started looking for APIs that I can use in my projects. Like APIs for food recipes, APIs for the latest news, and so on. And I found this great repository of Public APIs

It was like the ocean of APIs. But there was a problem. This repository was so big and full of APIs. And it was difficult to find in the whole readme file. But surprisingly it had its own API too. So to make my life a little easy and better I started making an app for this. I called it Apihouse.

It has a collection of all the public APIs and you can find them based on their categories in just one click.

You can see it live here. Also here is its GitHub repository.

I shared this on Twitter and Linkedin and I got a really good response from fellow developers.
With the help of a few feedbacks, I tried making it better and better. Most of the people found it very helpful and useful. I felt proud when someone bookmarked it and said I am using this for my next project.

🏷 Lesson learned :

Problems lead to great products. Always try to think about your problems first and how you can make your life easier with a product out of it.
Build whatever you want to build for yourself. Someone might find it helpful. And even if not, You will.

I recently saw this tweet and I couldn't stop myself from sharing it. It sums up everything.

Ritesh Kumar

@ritz078

Whenever you find that a product could have made ur life easier if it existed or was cheaper, add it to a list. Pick them as side project FOR YOURSELF. Not for the stars. Not for others.

Stars, Contributors etc. is bonus. It's worth it even without them as it was made for you.

21:05 PM - 21 Jun 2020

Here are a few resources that might help you.

Conclusion

APIs are used everywhere. And you can use them in your side projects the way you want. I hope now you won't struggle to look for ideas.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin.

⚡ Happy learning!

Do you take notes while learning? What's your process?

Rutik Wankhade — Mon, 29 Jun 2020 09:27:05 +0000

✍ Taking notes is an essential part of my learning process. It helps me visualize clearly and emphasize the key points of what I learned. While following a course or a tutorial, I first go through the content once. Afterward, I go through the entire course again, but this time I make handwritten notes.

Why handwritten notes? Well, it allows me to write freely, draw quick diagrams, mental models, and unleash my creativity with doodles.

Do you take notes while learning? Share your process.
What is the most effective way of note-taking?
Thoughts on handwritten vs digital note-taking.

A step by step guide to functions in JavaScript

Rutik Wankhade — Tue, 21 Apr 2020 14:09:32 +0000

Functions are one of the basic concepts in programming. The name itself suggests, it performs a function. A function is a block of code that you can use whenever you need and wherever you required to avoid repeated code blocks. Once a function is written, it can be used over and over again. They usually take some input, perform some operations on it and produce some output.

In this article, we will learn about functions in JavaScript, different ways of defining functions, how hoisting and function scope works and a few more concepts regarding functions. Let's begin.

The function declaration

Functions are defined, or declared, with the **function **keyword. The declaration begins with the function keyword, followed by the name of the function then set of parentheses, which can be used for optional parameters. The code of the function is contained in curly braces.

function nameOfFunction(parameters) {
    // Code to be executed
}

Functions allow a programmer to divide a big program into several small and manageable functions.
For example, If you are building a simple calculator then sum() will be a function. It will take two or more integers as input and return the sum as the result.

//function declaration
function sum(a,b){
return a+b;
}

The name of the function can be anything, as long as it follows the same rules as declaring variables.
JavaScript functions are written in camel case too. It's a best practice to tell *what the function is doing *by giving the function name a verb as a prefix. Also, the function should perform only one task and have a single responsibility. Thus naming should be based on that one responsibility.

📌 Calling Functions

Defining a function does not execute it. Defining it simply names the function and specifies what to do when the function is called. Calling the function performs the specified actions with the indicated parameters. We can call it by writing the name of the function, followed by parenthesis ().

//function call
sum(5,3);
//output : 8

📌 Function Parameters

Parameters are input that gets passed into functions as names and behave as local variables. A function can have multiple parameters or no parameters at all.

If you declared a parameter but did not pass an argument to it, your parameter would be undefined. It means that function parameters default to undefined.

📌 Function arguments

The argument is the actual value that gets passed into the function.

You define a function with parameters, you call a function with arguments. In function sum() a and b are parameters whereas 5 and 3 are arguments.

📌 The return Statement

A JavaScript function can have an optional return statement. This is required if you want to return a value from a function. This statement should be last in a function. The return statement stops the execution of a function and returns a value from that function.
A function always returns a value, If the return value is not specified then undefined is returned.

The function expression

A function expression looks similar to function declarations, except that the function is assigned to a variable name.

var sum=function(a,b){
return a+b;
};

sum(5,3);
//output : 8

Functions stored in variables do not need function names. They are always invoked (called) using the variable name. The function above ends with a semicolon because it is a part of an executable statement.

Hoisting

Hoisting was thought up as a general way of thinking about how execution contexts work in JavaScript. Hoisting means variable and function declarations are moved to the top of scope before execution. It allows you to use a function before you declare it in your code.

📌 Difference between function declaration and function expression

Function declarations are hoisted but function expressions are not.

Functions defined in a function declaration are hoisted, which means that you can use the function although it's defined below the code using it. Hoisted functions are made available everywhere within the current scope. For example

//function is invoked before the declaration
sum(5,3);  //output : 8
//function declaration
function sum(a,b){
return a+b;
}

As opposed to function declarations, function expressions are not hoisted and can therefore not be used before they're defined.

sum(5,3);  //output :  // TypeError: sum is not a function
//function expression
var sum =function(a,b){
return a+b;
}

IIFE (Immediately Invoked Function Expressions)

Functions that are executed as soon as they are declared, these functions are known as Immediately Invoked Function Expressions or IIFEs.
IIFEs follows a particular syntax as shown below.

(function (){ 
// code to be executed
})();

Let's break it down to make more sense. We have a function defined inside parentheses, and then we append () to execute that function.

( /*function*/ )();

The function becomes a function expression that is immediately executed.
Here are few important things about IIFEs

The variable within the expression can not be accessed from outside it.
IIFEs are very useful because they don’t pollute the global object, and they are a simple way to isolate variables declarations.
While creating a bunch of variables and functions in the global scope that no one uses outside your code, just wrap all of that in an IIFE and Your code will continue to work, but now you are not polluting the global scope.
IIFE is useful while implementing Module Pattern in JavaScript.

Arrow Functions

Arrow functions are mainly syntactic sugar for defining function expressions. Arrow function allows us to write functions in a much shorter syntax. It’s one of the most popular features of ES6. We can now create more concise, cleaner, and more readable functions by using the => operator.
The syntax is as follows

()=>{ /*code to be executed*/ }

Syntax wise it’s easier to understand, remove the function keyword, declare the function like a variable, and after arguments, put a fat arrow.

// Regular function
function sum(a,b){
return a+b;
}

//Arrow Function
var sum=(a,b)=>{ return a+b;}

Even though arrow functions are more concise than normal functions, they can still be reduced.
If the function body has a single expression, it can be written as

var sum =(a,b)=> return a+b;   //removed curly braces

Also if there is only one parameter, then there is no need for parenthesis. For example, consider a function that takes a number as input and returns its square as a result.

const square = a =>return a*a;    //removed parenthesis
const square = a => a*a; 
// In this case, we can also omit the return keyword.

The primary use case of arrow functions is for functions that get applied over and over again to items in a list. For example, if you have an array of values that you want to transform using a map, an arrow function is ideal.

const digits= [2,3,4,5,6];
const square = digits.map(num => num*num);

console.log(digits);
// output : [2, 3, 4, 5, 6]
console.log(square);
// output : [4, 9, 16, 25, 36]

Important points about arrow functions

Just like function expressions, arrow functions aren't hoisted — only function declarations are.
Arrow functions cannot be named.
Arrow functions lexically bind the current **this **value. That means The treatment of this within an arrow function is different than within non-arrow function expressions.

There are a few more ways we can define functions, which aren't discussed in this article. The decision of which declaration type to choose depends on the situation.

Function scope vs Global scope

When you declare a variable inside a function, you can access that variable only within the function. It is not visible outside of the function. For example

function sayHi(){
    var message="Hello world";  //function scope
    console.log(message);
    }

 sayHi();   // output : Hello world
 console.log(message);   // output : message is not defined

Variables defined outside any function, block, or module scope have global scope. Variables in the global scope can be accessed from everywhere. Every function can have access to the global scope.

    var message="Hello world";  //Global scope
    function sayHi(){
    console.log(message);
    }

 sayHi();   // output : Hello world

Lexical scope

When a function is defined in another function, the inner function has access to the outer function’s variables. This behavior is called lexical scoping. However, the outer function does not have access to the inner function’s variables.

function outerFunction() {
  var user='Rutik';

  function innerFunction() {
    var job = 'student';
    console.log(user +"is a " + job);   //output : Rutik is a student
  }

  console.log(job) //output : Error, job is not defined
}

So when we access user variable in innerfunction() ,it works. But accessing job variable outside innerfunction() shows error.

To visualize how scopes work, you can imagine one-way glass. You can see the outside, but people from the outside cannot see you.

Functions vs Methods

A method, like a function, is a set of instructions that perform a task. The difference is that a method is associated with an object, while a function is not.

var person ={
name:  'Rutik',
job: 'student',
//method
sayHi : function(name){
            console.log("Hi " + this.name);
            }
};
person.sayHi();  //output : Hi Rutik

When used as object properties, functions are called methods.

Conclusion

So we learned what are functions, how to call them, the difference between parameters and arguments, different ways we can define functions, how hoisting and function scope works in JavaScript. And I hope you got a nice idea about functions in JavaScript.

I keep writing about the things I learned. So you can connect with me on Twitter, Github or Linkedin.

⚡ Happy learning!

a-step-by-step-guide-to-functions-in-javascript

Learn JavaScript concepts by building a random quote generator

Rutik Wankhade — Tue, 21 Apr 2020 14:01:51 +0000

Learning JavaScript is fun. But What's the point if you are not building stuff with it.
So in this article, we will learn javascript basic concepts and create a random quote generator of our own.

I assume you have a basic knowledge of HTML and CSS as the main objective of this article is to learn javascript. Else you can check these tutorials on HTML and CSS. I will try to explain everything in detail and by the time you finish this lesson, you will have an understanding of concepts like strings, arrays, functions, event listeners, template literals in JavaScript. So let's begin.

Getting started

Lets first create three different files in our folder as

index.html for creating the UI and displaying the content,
style.css to make it attractive by adding styles.
script.js will contain the actual code which makes our app work.

1. creating the content of the app

The first step is to create a UI. Here is our index.html file look like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="icons/favicon.png">
    <title>Random quote</title>
</head>
<body>
    <div class="content">
        <div class="card">
          <h2>Random quote</h2>
          <p>wanna see a random quote ?</p>
          <!--button to display random quote-->
          <button class="btn">Generate</button>

        </div>
        <div id="quote">
         <!--Quote will be displayed here.-->
        </div>
    </div>
</body>
<script src="script.js"></script>
</html>

And this is how it looks like in the browser. Wait a minute, It doesn't look nice right.

2. Styling the content

Let's make it appealing by adding our style.css file

body{background-color: indigo;  margin:auto;}
h2{background-color: #1c1c1c; color:#ffffff;
padding:10px;
font-family: arial;
text-align: center;}

.btn{height:50px; width:150px;
font-size: 18px;
color:#ffffff;
background-color: dodgerblue;
border:none;
padding:5px;
border-radius: 5px;}

.card{padding:15px 30px 15px 30px;
margin:40px auto;
max-width:500px;
max-height:300px;
text-align: center;
background-color: #ffffff;
border-radius: 5px;
} 

p{font-family:'Segoe UI';
font-weight:400;
font-size: 20px;}

img{height:25px;
width:25px;
}

And boom ! this looks great now.

Now let's think about how we are going to make it work. We need to figure out a way to display random quotes after clicking a button. And We will go with the simplest way to do it. How? let's see.

Forget coding. let's just think about what we have to do.
okay. First, we will need quotes. We will have to store them somewhere and do something such that we can display a random quote after clicking a button. That's it.

3. let's learn some javaScript

Strings

A string is a sequence of one or more characters that may consist of letters, numbers, or symbols. Strings in JavaScript are primitive data types which we are going to use to create quotes.

In JavaScript, there are three ways to write strings. They can be written inside single quotes (' '), double quotes (" "), or backticks ().
Strings with backticks() are called template literals which we will learn later.

"This is a string"

So all our quotes are basically strings like this.

'Stay hungry, stay foolish !'

But there are multiple such strings and we need something to store them. Here comes the concept of Arrays. But what's an array?

Arrays

An array in JavaScript is a type of global object that is used to store data. Arrays consist of an ordered collection or list containing zero or more data types, and use numbered indices starting from 0 to access specific items.

<!--Creating an array-->
let quotes =[];

Arrays can contain any data type, including numbers, strings, and objects. We will be storing our strings in an array like this.

let quotes=[
'The secret to life is to love who you are.',
'Look for opportunities in every change in your life.',
'Persist while others are quitting.',
'and so on.'
];

Array.length

The length property of an object which is an instance of type Array sets or returns the number of elements in that array.

quotes.length;
<!--Output-->
4

Accessing Items in an Array

An item in a JavaScript array is accessed by referring to the index number of the item in square brackets.

quotes[2];
<!--Output : -->
Persist while others are quitting.

But here we will not access like this. We want a random index to display a random quote. Then how do we do that? We will use the math object.

Using Math object

Math is a built-in object that has properties and methods for mathematical constants and functions.

If you type math in console, you will see there are so many built-in methods for Math object. We will be using a few of them.

Math.random()

The Math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1. See how it returns every time we call it in the console.

But this is not what we want. We want a whole number and not a floating type. For this, the Math object provides another method called Math.floor()

Math.floor()

Math.floor() returns a number representing the largest integer less than or equal to the specified number. So if we pass the math.random() as a parameter to math.floor() we will get a whole number.
But Math.floor() is always rounding down to the nearest decimal, therefore, every decimal between 0 and 1 will always revert back to 0.

In order to get a random number between 0 to the length of our array, we will multiply the math.random() by quotes.length.
Finally the random index we want is

let index=Math.floor(Math.random()*quotes.length);
<!--This will give a random quote-->
quotes[index];

index will always generate a valid array index number for our quotes array.
So we figured out how to retrieve a random quote from the quotes array. But we don't want to display just a string. We are going to do it nicely using template literals.

Template Literals

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs.

Template literals are string literals allowing embedded expressions. It can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}).

`string text ${expression} string text`;

HTML Templates

With the ability to have multi-line strings and use Template Expressions to add content into our string, this makes it really nice to use for HTML templates in our code. So we will create a HTML template for our quote and store it in a variable. We used the placeholder to pass our quotes in the template.

let quote=`<div class="card">
<img src="icons/favicon.png">
<p>${quotes[index]}</p> <!--random quote string-->
<img src="icons/favicon.png">
</div>
`;

*I added images to make it more appealing.
*

Query Selectors

To access an element in dom(Document Object Model), we will use the querySelector() method.
The Document method querySelector() returns the first element within the document that matches the specified selector. The syntax is

element = document.querySelector(selectors);

In our HTML file, we have a div element with id="quote". We will access it in the same way as this. And then we will add the HTML template we created earlier to this div element.

Element.innerHTML

Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, we can make much more interactive pages.

let div=document.querySelector('#quote');
div.innerHTML=quote;

The code we wrote till now will work only once. And we want to execute this every time we want to display a quote. We can do this using functions.

Functions

A function is a block of code that performs an action or returns a value. Functions are custom code defined by programmers that are reusable, and can, therefore, make your programs more modular and efficient.

Defining a Function

Functions are defined, or declared, with the function keyword. Below is the syntax for a function in JavaScript.

function nameOfFunction() {
    // Code to be executed
}

We will create the displayQuote function add all this code in the function.

function displayQuote(){
let index=Math.floor(Math.random()*quotes.length);

//display the quote of that index
let div=document.querySelector('#quote');
let quote=`<div class="card">
<img src="icons/favicon.png">
<p>${quotes[index]}</p>
<img src="icons/favicon.png">
</div>
`;
div.innerHTML=quote;
}

We are almost done. Just need to invoke this displayQuote function whenever we click the generate button.

Events in javaScript

Events are actions that take place in the browser that can be initiated by either the user or the browser itself.
Like in our case it's when the user clicks the generate button.

Event listeners

An event listener watches for an event on an element. We will use the addEventListener() method to listen for the event. addEventListener() takes two mandatory parameters .

the event it is listening for
and the listener callback function.

target.addEventListener(type, listener [, options]);

We have a button element with class="btn". The click event will call the displayQuote function every time we click on the button and display a random quote.

let btn=document.querySelector('.btn');
btn.addEventListener('click', displayQuote);

And we are done. congratulations. We built a random quote generator while learning some JavaScript concepts.

Conclusion

So the quote generator is ready. Also if you wish, you can add some more features of your own like tweeting the quote or something like that.

You can find the complete repository of the code on Github.

Also, you can see it live here.
I hope you had fun while doing this and learned a few things along the way.
Well for me this process of building things helps me a lot while learning.

%[https://twitter.com/WankhadeRutik/status/1228373769980432384]

You can connect with me on Twitter, Github or Linkedin.

⚡ Happy learning !

Github repositories every aspiring developer should check out

Rutik Wankhade — Mon, 23 Mar 2020 11:38:31 +0000

Starting your career in web development can be overwhelming. And most of the time beginners struggle to pick resources to learn. There are tons of great resources available online and most of which we are not even aware of.

The most important lesson I learned.

Rutik Wankhade

@wankhaderutik

Don't waste your time on trying to find the perfect resources. Pick something and just start. 💻 twitter.com/gatsbyjs/statu…

16:19 PM - 30 Dec 2019

Gatsby @gatsbyjs
🤔 If you could go back and tweet some advice to yourself at the start of your Web Development career, what would you write?

📑 So Here is a list of some awesome GitHub repositories with tons of resources collected together for you.
So Pick something and start learning.

📌 Freecodecamp

A self-paced curriculum for learning full-stack development. Its freeCodeCamp.org's open-source codebase and curriculum. visit repository

📌 developer-roadmap

A set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend, or DevOps. The complete developer roadmap. visit repository

📌 A-to-Z-Resources-for-Students

If you are in college, a college graduate, or just starting out as a developer, you should definitely check this out! visit repository

📌 Best-websites-a-programmer-should-visit

These are some really helpful sites you should definitely check. you must know these to get always informed in order to do your technologies even better and learn new things. visit repository

📌 awesome

The name itself suggests its awesome. You can find a curated list of all kinds of interesting topics. visit repository

📌 professional-programming

The goal of this repository is to make you a more proficient developer. You'll find only resources that are truly inspiring, or that have become timeless classics. visit repository

📌 free-for-dev

Developers have a massive amount of services offering free tiers, but it can be hard to find them all. This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers. visit repository

📌 free-programming-books

List of Freely Available Programming Books on every computer science subject. visit repository

📌 spellbook-of-modern-webdev

This repository can help you as a developer to have more power to do much more and much better, just like a spellbook does in fantasy worlds. visit repository

📌 tech-interview-handbook

This repository has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation. Don't miss this if you want to be better at technical interviewing. visit repository

📌 coding-interview-university

This is a study plan for going from web developer (self-taught, no CS degree) to software engineer for a large company. The items listed here will prepare you well for a technical interview at just about any software company. visit repository

📌 Become-A-Full-Stack-Web-Developer

This repository is focused on JavaScript, React, and Node.js. There is also a wealth of information on interview prep and applying to jobs. visit repository

📌 frontend-dev-bookmarks

curated collection of resources for frontend web developers. visit repository

📌 javascript-questions

From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! visit repository

📌 javascript-algorithms

This repository contains JavaScript based examples of many popular algorithms and data structures. visit repository

📌 clean-code-javascript

Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript. visit repository

📌 wtfjs

The primary goal of this list is to collect some crazy examples and explain how they work, if possible. Just because it's fun to learn something that we didn't know before. I loved it. visit repository

📌 public-apis

A collective list of free APIs for use in software and web development. visit repository

📌awesome-technical-writing

A curated list of awesome resources: articles, books, videos, tools, podcasts about technical writing. visit repository

Well. This is more than enough to get you started. If you liked this collection, share it with your friends. let everyone know about these Github repositories.

I keep writing about the things I learned and applied. So you can connect with me on Twitter, Github or Linkedin
or visit my portfolio here

⚡ Happy learning !

Why I started blogging

Rutik Wankhade — Sat, 07 Mar 2020 18:18:15 +0000

Before I start this exciting journey let me introduce myself.

👋 Hi ! I am Rutik Wankhade. I am a frontend developer , an avid learner who is passionate about web technologies and building things with code. I love creating open source projects and contributing to the community. Besides programming I love reading books and biographies, blogging, watching tedtalks, playing sports, travelling and learning new things every single day.

Why I started blogging ?

Well the purpose of this blog is pretty simple. I always believed in the mantra of learn-apply-share. So this blog is all about my learning and experiences. Right now I am in my learning phase and I think this process of documenting my journey from the beginning is really gonna help me learn and grow .
But wait, I am not an expert ! So what ? I think waiting till you “become an expert” is a waste of time. The best advice I had was You Will Never Be Ready. Do It Anyway! And we all can contribute with what we know today. It doesn't have to be a big thing. We can start small. I guess this way I can see things in a fresh perspective . Here are top 3 reasons why I started this blog.

1. Documenting my journey

To be honest I am writing this for myself. These are my notes. If I feel like writing about a topic, I will go for it! I want to document everything I learn.

2. Learn by explaining

The ultimate test of your knowledge is your capacity to convey it to another. -Richard Feynman

it is obvious that one has to do a lot of research in the process of writing a blog, and by doing so I am gonna learn a hell lot of things by studying different topics in depth.

3. Giving back to the community

We have some awesome people in the dev industry who are always ready to help and contribute. Their existence is a gift to the community. So this is also my chance to give back to the community that helped me get started, a place I am proud to be part of.

So I am very excited. And looking forward to learn and write some interesting posts here.

You can connect me here.
Linkedin and Github

And Follow me on Twitter
Liquid error: internal