DEV Community: Harsh Sinha

8 Fun APIs For Your Next Project [ PART-II ]

Harsh Sinha — Mon, 23 May 2022 18:17:02 +0000

Introduction

Hello Developers👋
I'm back with another article and also by the way this is the second article in this " APIs" Series so don't forget to check out the first one as well.In this article I'm about to present to you 8 Fun APIs. Without any further ado let's begin with it :)

1)Fun Translations

Translate English into languages such as Minion, Yoda and many more!

2)Poke API

Are you a fan of Pokemon? Well then this API would help you to get info on your favorite pokemons.

3)MARVEL Comics API

Get access to data of 1000s of Marvel comics'.

4)BoredAPI

Are you bored? No need to be. Just send an API call and it would give you a random task to do :D

5)Agify

Just make an API call with a name as parameter and it would guess your age, just for fun.
Use this link with your name to get the response
https://api.agify.io/?name=YOUR_NAME

6)Geeky Jokes

This API lets you fetch a random geeky/programming jokes.

7)YouTube API

This API allows you to do various things with YT videos such as embed them and get their details etc.

8)DEV API

This is yet another extremely helpful API which you can use to embed your blogs in your website/portfolio and even publish articles.

Conclusion

So I've presented you a list with 8 Fun APIs that you may use in your next Project. If you found this article helpful, you can react to it and also follow me so that you get notified when I publish my next article.
Thank you(˵ ͡° ͜ʖ ͡°˵)

How to Code And Publish Your First NPM package🎖

Harsh Sinha — Sun, 06 Feb 2022 04:14:00 +0000

Introduction

Hello Developers
In this Article we would learn how do you Code and publish your first NPM package.
Publishing an NPM package is easy and in this tutorial we would make a very simple package which requires very few lines of Code.

What is NPM?

NPM stands for Node Package Manager, as the name suggests it is a package manager, and is also the default package manager for JavaScript runtime environment Node.js.

Prerequisites

Node.js and npm installed in your system- You can install Node.js and npm(if you haven't already) from here

Basic knowledge of JavaScript- The package we'll make here is simple so you don't need very high knowledge of JavaScript.

Basic Terminal Commands- I would be using a few basic terminal commands but I will explain the npm and node commands which I would use in the Article.

A Code editor- In this tutorial I would be using VS Code but you can use any editor of your choice.

Lets get Started

Step 1: Create an account on https://www.npmjs.com/signup

Step 2: Login to your CLI by your npm account

To do this, simply type this command in the terminal

$ npm login

And enter the following details:

To check if you have successfully logged in, type the following command and it shall print your username:

$ npm whoami

Step 3: Setting up the directory

You can accomplish this task by typing these commands onto your terminal/CLI:

$ mkdir folder_name
$ cd path/to/folder

mkdir - mkdir command is used to create a directory or a folder directly from your Terminal.
cd - cd command is used to change the current working directory in the terminal.

Step 4: Package.json

To initialize the package.json file, type this command in the CLI

$ npm init

And then answer the questions asked, if you want you can skip any question by clicking Enter.

What is package.json?
Package.json is a necessary file which contains information about your project
Such as package name, version,author's name etc.

Step 5: Let's Code

Now that we have a package.json file, we can get onto coding.
Create an index.js file and write this code into it

const object = {
  add: function addTwoNumbers(a,b){
    return a+b;
  }
}

module.exports = object;

Code Explanation

const object - The object object which is exported to be used by others.
function addTwoNumbers() - This is the function stored in the object which can be used by others, it is marked as 'add' and it simply returns the sum of two numbers a and b.
module.exports - the object object is then exported by declaring this.

Step 6: Time to Publish

To publish your newly made npm package, head over to the terminal and type this command

$ npm publish

If you get this message:

Then congratulations! Your NPM package has been successfully published and can be used by anyone :)
The Github Repository link of this package: https://github.com/HarshSinha17/maths-script

Testing the package

So now that we have made our NPM package, we shall try it, to test the package follow these steps:

Create a fresh directory and cd into it

This can now again be done by terminal by the following commands

$ mkdir folder_name
$ cd path/to/folder

Initialize the package.json

Type this command on the terminal, but this time with the -y flag, so that we don't have to answer any questions and a default package.json file will be created.

$ npm init -y

Install the Package

To install the package type this command

$ npm install maths-script

(Here maths-script is the name of the package)
Now a folder named node_modules and a file named package-lock.json must be created in the directory.

Lets code

Create a file named app.js and paste this code in the file

const maths = require('maths-script');

var a = maths.add(1, 2);
console.log(a);

Code Explanation -

The code is pretty simple, first we are storing the exports of the package in a constant maths.
Then we are using the function add of the NPM package for adding two numbers, 1 and 2, and storing it in variable a, and then printing the var a to the console.

Running the file

To run the file, type this command in the Terminal

$ node app.js

(app.js is the name of our file)
And then you should get the following output-

So we see that the output is 3, which means that our NPM package is working!

Conclusion

So in this article we learned how to create an NPM package, hope you found the article helpful and if you face any problem in making your own package, put a comment down below so maybe I can provide any help I can

Thanks
(˵ ͡° ͜ʖ ͡°˵)

25 FREE CSS Tools/Resources That You Should Bookmark

Harsh Sinha — Sat, 15 Jan 2022 06:54:39 +0000

Introduction

Hello Developers :)

I've created a list of 25 Free tools and resources which you can use in your next projects to make them more mesmerizing :)

So without any further ado, let's begin

Sites to learn from:

Websites are one of the best places to learn CSS, there are numorous websites where you can learn CSS from, some of them are -

Icons

We can add Icons to our webpage to make them look better, some of the libraries from where you can get many icons are -

Gradients

Gradients are a progressive transition between two or more colours, the transition between the colours is usually smooth. In CSS there are 3 types of gradients: Linear gradient, Radial Gradient and Conical gradient.
Here are some tools which can be used to create gradients-

Grid design:

The Grid layout is one of the fundamental properties of responsive web development.
Some tools which can be used to design grids are -

Animation maker:

With CSS animations, we can animate HTML elements' transition without using JavaScript in any way.
Some tools which can be used to create animations are -

Colour pallets:

Box-Shadow:

The Box-shadow CSS property is used to add a shadow effect on an element's frame, giving it a floating kind of effect.
Some tools which can be used to create box shadows are -

Conclusion

So I presented a list of various tools and websites which can help you make better web design.

I hope that it helped you. Follow me so that you get notified when I publish my next article, also react to this article if you found it useful.

Thank you
(˵ ͡° ͜ʖ ͡°˵)

10 Useful APIs for Your Next Project

Harsh Sinha — Mon, 25 Oct 2021 11:45:09 +0000

What is an API?

An API or application Programming Interface is a set of functions that allows applications to access data and interact with external software components,or operating systems. To simplify, an API delivers a user response to a system and sends the system's response back to a user.

Here is a list of 10 useful APIs that you might want to use in your next project.

1)NASA APIs

The objective of these APIs is to make NASA data, including imagery, eminently accessible to application developers.

These APIs Include:

i)APOD: Astronomical Picture Of The Day

ii)Insight: Mars Weather Service API

iii)Mars Rover Photos: Image data gathered by NASA's Curiosity, Opportunity, and Spirit rovers on Mars.

And more of them

2)Random Fact

Get Random Facts!

3)GIPHY API

GIPHY API helps you integrate the world's largest GIF library, customize a suite of powerful features, and boost engagement with just a few lines of code.

4)OpenWeatherMap API

Access current weather data for any location on Earth including over 200,000 cities! The API collects and processes weather data from different sources such as global and local weather models, satellites, radars and a vast network of weather stations. Data is available in JSON, XML, or HTML format

5)BitLy API

Bitly is the most widely trusted link management platform in the world. By using the Bitly API, you will exercise the full power of your links through automated link customization, mobile deep linking, and click analytics.

6)Sunrise - Sunset API

It is a very simple REST api, you only have to do a GET request to get sunset and sunrise times for a given latitude and longitude.

7)SpaceX API

Open Source REST API for launch, rocket, core, capsule, starlink, launchpad, and landing pad data.

8)International Space Station Location API

This is a simple api to return the current location of the ISS. It returns the current latitude and longitude of the space station with a unix timestamp for the time the location was valid.

9)Google Fonts API

About the API:
The Developer API gives access to the metadata for all families served by Google Fonts. It allows apps to query Google Fonts for the available font families. The REST API supplies data in the JSON format that includes the styles and scripts (called subsets in Google Fonts) in each family. The API can sort the list of families alphabetically, by date added, by number of styles, by trend, or by popularity.

10)Marvel Comics API

If you are a Marvel Comics fan you might want to check out this API!
Anyone with an API key can access the vast library of 1000+ Marvel Comics' data, from what's coming, to 70 years ago!

Conclusion

I hope this article was helpful for you
(˵ ͡° ͜ʖ ͡°˵)
Also this was my first
post here on dev.to

Thank you
( ͡ ͜ʖ ͡ )