DEV Community: Buddhadeb Chhetri

6 Must-Have APIs for Web Development

Buddhadeb Chhetri — Tue, 12 Mar 2024 09:32:00 +0000

1 CoinBase API

This API makes it easy to itegrate bitcoin ,bitcoin cash and ethereum into any application.

2 Hotels API

This API helps to query rooms ,price and other info from many hotels around the world to create travelling apps.

3 DATA USA

This API allow users to explore the entire database to get public US data like population data.

LinkDB is a complete LinkedIn dataset of people and companies that provides you with an opportunity to integrate the vast sea of LinkedIn public data into your business applications in an easy, efficient and legal manner.

5 Weather

This is makes it easy to access accurate weather forecasts and get historical weater data.

6 Google Translate

Translation API Basic uses Google’s neural machine translation technology to instantly translate texts into more than one hundred languages. Translation API Advanced offers the same fast, dynamic results you get with Basic and additional customization features.

10 Useful Android Library for Every New Developer

Buddhadeb Chhetri — Sat, 03 Sep 2022 17:11:46 +0000

1. Retrofit

Retrofit is type-safe HTTP client that allows you to define your REST API as an interface. You can manipulate the API requests’ body, headers, query parameters, and much more via annotations, which makes everything clean and simple. Retrofit also allows synchronous and asynchronous API calls execution.
java/kotlin

dependencies {
    implementation 'com.squareup.retrofit2:retrofit:2.5.0'
}

2. Glide

Glide is a fast and efficient open source media management and image loading framework for Android that wraps media decoding, memory and disk caching, and resource pooling into a simple and easy to use interface.
java

dependencies {
    implementation 'com.github.bumptech.glide:annotations:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

kotlin

dependencies {
    kapt "android.arch.lifecycle:compiler:1.0.0"
    kapt 'com.github.bumptech.glide:compiler:4.9.0'
}

3. Room

Room is an official Android ORM, and there are multiple reasons for that status. This library features a beautiful API that is similar to Retrofit. It also relies heavily on annotations and standard SQL syntax.

Java

dependencies {
    def room_version = "2.1.0-alpha06"

    implementation "androidx.room:room-runtime:$room_version"
    annotationProcessor "androidx.room:room-compiler:$room_version"

    // optional - RxJava support for Room
    implementation "androidx.room:room-rxjava2:$room_version"

    // optional - Guava support for Room, including Optional and ListenableFuture
    implementation "androidx.room:room-guava:$room_version"

    // Test helpers
    testImplementation "androidx.room:room-testing:$room_version"
}

Kotlin

dependencies {
    def room_version = "2.1.0-alpha06"

    implementation "androidx.room:room-runtime:$room_version"
    kapt "androidx.room:room-compiler:$room_version"

    // optional - Kotlin Extensions and Coroutines support for Room
    implementation "androidx.room:room-ktx:$room_version"

    // optional - Guava support for Room, including Optional and ListenableFuture
    implementation "androidx.room:room-guava:$room_version"

    // Test helpers
    testImplementation "androidx.room:room-testing:$room_version"
}

4. Gson

Gson is a Java library that can be used to convert Java Objects into their JSON representation. It can also be used to convert a JSON string to an equivalent Java object. Gson can work with arbitrary Java objects including pre-existing objects that you do not have source-code of.

Java and Kotlin

dependencies {
    implementation 'com.squareup.retrofit2:converter-moshi:2.5.0'
}

5. Picasso

Picasso is an image library for Android. It's created and maintained by Square, and caters to image loading and processing. It simplifies the process of displaying images from external locations.

java/kotlin

dependencies {
    implementation 'com.squareup.picasso:picasso:2.71828'
}

6. Lottie

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web.
java/Kotlin

dependencies {
    implementation "com.airbnb.android:lottie:2.8.0"
}

7. Dagger

Dagger is a fully static, compile-time dependency injection framework for both Java and Android. It is an adaptation of an earlier version created by Square and now maintained by Google. Dagger aims to address many of the development and performance issues that have plagued reflection-based solutions.

Java

dependencies {
    implementation 'com.google.dagger:dagger-android:2.x'
    implementation 'com.google.dagger:dagger-android-support:2.x' // if you use the support libraries
    annotationProcessor 'com.google.dagger:dagger-android-processor:2.x'
}

Kotlin

dependencies {
    implementation 'com.google.dagger:dagger-android:2.x'
    implementation 'com.google.dagger:dagger-android-support:2.x' // if you use the support libraries
    kapt 'com.google.dagger:dagger-android-processor:2.x'
}

8. RxAndroid

It's one of the most discussed libraries for enabling Reactive Programming in Android development. It's touted as the go-to framework for simplifying concurrency/asynchronous tasks inherent in mobile programming.

Java/Kotlin

dependencies {
    implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'
}

9. Fast Android Networking

Fast Android Networking Library is a powerful library for doing any type of networking in Android applications which is made on top of OkHttp Networking Layer. Fast Android Networking Library takes care of each and everything. So you don't have to do anything, just make request and listen for the response.
java

dependencies {
    implementation 'com.amitshekhar.android:android-networking:1.0.2'
}

10. Slices

Slices display rich content and actions on components, appearing as part of search results in the Google search app. They can display a variety of content types, such as text, images, and actions.
java

dependencies {
    implementation 'androidx.slice:slice-builders:1.0.0-alpha3'
    implementation 'androidx.annotation:annotation:1.0.0-alpha3'
}

Kotlin

dependencies {
    implementation 'androidx.slice:slice-builders-ktx:1.0.0-alpha3'
    implementation 'androidx.annotation:annotation:1.0.0-alpha3'
}

Best Free 3D Assets for Gamedevs

Buddhadeb Chhetri — Tue, 26 Jul 2022 09:33:23 +0000

1.Flooded Grounds

2.Sun Temple

3.Realistic Terrain Collection LITE

4.Coconut Palm Tree Pack

5.Rocky Hills Environment

6.Conifers [BOTD]

7.Nature Starter Kit

8.Unity Terrain - HDRP

9.Destroyed City

10.Island Collection

Bonus:

11.Maxamo

Free Resoures for Game Developers

Buddhadeb Chhetri — Mon, 18 Jul 2022 07:35:38 +0000

1. Kenney

2. Open Gameart

3. Glitch game

4. Itch.io

5. Textures

6. Gameart Guppy

7. Unity Assetstore

8. GameDev Market

9. Craftpix

10. OS GameClones

11. Bevouliin

12. Reddit

13. Hotpot.ai

14. Iconduck

15. Game icons

16. Supergame Assets

17.Vecteezy

18. Stickpng

19. Coolbackgrounds

20. Placeholders

21. Heropatterns

22. Stripegenerator

17+ Great Websites for web Developers

Buddhadeb Chhetri — Fri, 15 Jul 2022 18:42:31 +0000

1. Hidden Tools

2. Music For Programming

3. Programming Language Convertor

4. Http Cat

5.CSS Zen Garden

6. Code project

7. A Listapart

8. CreativeBloq

9. Codrops

10. Tutsplus

11. The Odin Project

12. CodeWars

13. WP Sessions

14. CSS Author

15. LaraCasts

16. Gradient Magic

17. Tringlify

18. Free Frontend

19. Codemy UI

20. CSS Tricks

10 Incredibly Useful Extensions For Developers

Buddhadeb Chhetri — Fri, 28 Jan 2022 16:31:45 +0000

Extension : Extensions are software programs, built on HTML, CSS, and JavaScript that enable users to customize the Chrome browsing experience.

1.Wappalyzer: Wappalyzer is a technology profiler that shows you what websites are built with and it also shows you the Framework technologes.

2.OneTab: When find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.

3.Visual Inspector: This extension will help you to Inspect and Change all design properties in web page like position, opacity, colors, gradient, typography and Get fonts, colors and assets from website in one click.

4.ColorZilla: This extenstion will help you can get a color reading from any point in your browser, quickly adjust this color and get the hex code and apply to your programs.

5.Color by Fardos: Pick colors from websites, save colors & gradients, get matching shades and tints and create beautiful gradients.

6.Pesticide: This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

7.SVG-Grabber: svg-grabber lets you preview, download and copy the code all SVG icons and illustrations in a website.

8.WhatFont: The easiest way to identify fonts on web pages.

9.Site Palette: THis extension help you that generates colour palettes. A must-have tool for designers and frontend developers. Grab colours for any website.

10.Temp Mail: Temporary disposable email address. Protect your email from spam, bots and phishing with TempMail.

Thanks for reading the article ❤️
Hope this post will be useful!

If you guys know of other helpful extensions, please let me know in the comments.

.ltag__user__id__615964 .follow-action-button { background-color: #20925b !important; color: #080808 !important; border-color: #20925b !important; }

Buddhadeb ChhetriFollow

JavaScript ES6

Buddhadeb Chhetri — Sun, 23 Jan 2022 18:08:31 +0000

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.

ECMAScript is the official name of the language.

ECMAScript versions have been abbreviated to ES1, ES2, ES3, ES5, and ES6.

Since 2016 new versions are named by year (ECMAScript 2016 / 2017 / 2018).

Arrow Function

const sum =(a,b)=> a+b
console.log(sum(2,6))
//prints 8

Default parameters

function print(a=5){
console.log(a)
}
print();
//prints 5

Let Scope

let a=3;
if(true){
let a=5;
console.log(a);//prints 5
}
console.log(a);//prints 3

Const

//can be assigned only once
var x = 50;
// Here x is 50
{
  const x = 16;
  console.log(x);// Here x is 16
}
console.log(x); // Here x is 50

Multiline String

console.log(`This is a 
multiline string`);

Template string

const name ='Chhetri'
const message =`Buddhadeb ${name}`
console.log(message)
//Prints Buddhadeb Chhetri

Exponent Operator

const byte =2 ** 8
console.log(byte)
//same as : Math.pow(2,8)

Spread Operator

const a=[1,2]
const b=[3,4]
const c=[...a,...b]
console.log(c) 
//[1,2,3,4]

String Includes()

console.log('apple'.includes('p'))
//Prints true
console.log('apple'.includes('tt'))
//prints false

String StartsWith()

console.log('ab'.repeat(3))
//prints 'ababab'

Destructuring array

let [a,b] =[3,7];
console.log(a);//3
console.log(b);//7

Destucturing object

let obj ={
a:55,
b:44
};
let{a,b}= obj;
console.log(a);
//55
console.log(b);
//44

Object property assignment

const a=2
const b=5
const obj={a,b}
//before es6:
//obj ={a:a,b:b}
console.log(obj)
//{a:2,b:5}

Object.Assign()

const obj1 ={a:1}
const obj2 ={b:2}
const obj3 =Object.assign({},obj1,obj2)
console.log(obj3)
//{a:1 ,b:2}

Promises with finally

promise
.then((result) => {...})
.catch((error) => {...})
.finally(() => { 
    //Logic independent of success/error 
})
/* The handeler is called when the promise is fulfilled or rejected.*/

Enhance your skills in Html Css and Js ?

Buddhadeb Chhetri — Thu, 19 Aug 2021 19:57:31 +0000

Top 10 website where you can enhance your Html,Css and JS skills.

1. Css Battle

2. 100days of css

3. 30 days of Js

4. Css Challange

5. 30days of tailwindcss

6. Frontendmentor

7. Piccalil

8. Ace Frontend

9. Codier

10.1HTMLPageChhallenge

Thank you so much for reading 💖

.ltag__user__id__615964 .follow-action-button { background-color: #20925b !important; color: #080808 !important; border-color: #20925b !important; }

Buddhadeb ChhetriFollow

API Calls

Buddhadeb Chhetri — Sat, 07 Aug 2021 18:18:56 +0000

Javascript API Calls

XML HTTP Request

All modern browsers support the XMLHttpRequest object to request data from a server.
It works on the oldest browsers as well as on new ones.
It was deprecated in ES6 but is still widely used.

var request = new XMLHttpRequest();
request.open('GET','https://jsonplaceholder.typicode.com/users')
request.send();
request.onload =() =>{
console.log(JSON.parse(request.response));
}

Fetch API

The Fetch API provides an interface for fetching resources including across the network in an asynchronous.
It returns a Promise.
It is an object which contains a single value either a Response or an Error that occurred.
.then() tells the program what to do once Promise is completed.

fetch('https://jsonplaceholder.typicode.com/users')
.then(response=>{
return response.json();})
.then(data=>{
console.log(data);
})

Axios

It is an open-source library for making HTTP requests.
It works on both Browsers and Node js.
It can be included in an HTML file by using an external CDN.
It also returns promises like fetch API

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get('https://jsonplaceholder.typicode.com/users')
.then(response =>{
console.log(response.data)})

JQuery AJAX

It performs asynchronous HTTP requests.
Uses $.ajax() method to make the requests.
Ability to send GET and POST requests
Ability to Load JSON, XML, HTML or Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(document).ready(function(){
$.ajax({
url:"https://jsonplaceholder.typicode.com/users",
type:"GET",success:function(result){
console.log(result);
}
   })
})

Rubico

asynchronous code should be simple.
functional style should not care about async.
functional transformations should be composable, performant, and simple to express.

const { pipe, map } = rubico

const toTodosUrl = id => `https://jsonplaceholder.typicode.com/todos/${id}`

const logTodoByID = pipe([ // fetch a Todo and log it
  toTodosUrl,
  fetch,
  response => response.json(),
  console.log,
])

const todoIDs = [1, 2, 3, 4, 5]

map(logTodoByID)(todoIDs) 
// fetch Todos per id of TodoIDs and log them
// { userId: 1, id: 4, title: 'et porro tempora', completed: true }
// { userId: 1, id: 1, title: 'delectus aut autem', completed: false }
// { userId: 1, id: 3, title: 'fugiat veniam minus', completed: false }
// { userId: 1, id: 2, title: 'quis ut nam facilis...', completed: false }
// { userId: 1, id: 5, title: 'laboriosam mollitia...', completed: false }

// same as above but with limited concurrency
// map.pool(2, logTodoByID)(todoIDs)

React CheatSheets

Buddhadeb Chhetri — Mon, 02 Aug 2021 19:42:24 +0000

What is ReactJS?

📌ReactJS is an open-source, component based front end library responsible only for the view layer of the application. It is maintained by Facebook.
ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM.
📌The virtual DOM works fast owning to the fact that it only changes individual DOM elements instead of reloading complete DOM every time.

Create React App

📌creat-react-app is a React app boilerplate generator created by Facebook. It provides a development environment configured for ease-of-use with minimal setup, including:

1.ES6 and JSX transpilation
2.Dev server with hot module reloading
3.Code linting
4.CSS auto-prefixing
5.Build script with JS, CSS and image bundling, and sourcemaps
6.Jest testing framework

Installation

First, install create-react-app with node package manager (npm)

npx create-react-app my-app
cd my-app
npm start

JSX Expression

scr folder and click App.js

function App(){
const name= 'Buddhadeb'
return(
<div className ="Container">
<h1> Hello World </h1>
<h2> Hi {name}</h2>
</div>
)
}

React Components

1.Stateless component📌

import React, { Component } from 'react';
import { render } from 'react-dom';
class FirstComponent extends Component {
    render() {
 return (
     <div>
      Hello, I am Buddhadeb Chhetri.
       </div>
     );
   }
}
export default FirstComponent

2.Stateless Functional Components📌

import React from 'react';
import PropTypes from 'prop-types';
 const FirstComponent = props => (
   <div>
       Hello, ! I am {props.name}.
   </div>
         );

FirstComponent.propTypes = {
    name: "Buddhadeb Chhetri"
}

3.Properties in stateless component📌

const YourComponent = ({ propExample1, 
example2 }) => (
 <div>
 <h1>properties from parent 
component:</h1>
 <ul>
 <li>{propExample1}</li>
 <li>{example2}</li>
 </ul>
 </div>
)

<YourComponent propExample1="Buddhadeb" 
example2="Chhetri" />

4.Class component📌

import React from 'react'
class YourComponent extends 
React.Component {
 render() {
 return <div>Buddhadeb Chhetri</div>
 }
}
export default YourComponent

5.Properties in class component📌

class YourComponent extends 
React.Component {
 render() {
 return (
 <div>
 <h1>
 properties from parent 
component:
 </h1>
 <ul>

<li>{this.props.propExample1}</li>
 <li>{this.props.example2}
</li>
 </ul>
 </div>
 )
 }
}

6.State📌

class CountClicks extends React.Component {
 state = {
 clicks: 0
 }
 onButtonClick = () => {
 this.setState(prevState => ({
 clicks: prevState.clicks + 1
 }))
 }
 render() {
 return (
 <div>
 <button 
onClick={this.onButtonClick}>
 Click me
 </button>
 <span>
 The button clicked 
{this.state.clicks} times.
 </span>
 </div>
 )
 }
}

7.React Router📌

import { 
 BrowserRouter, 
 Route 
} from 'react-router-dom'
const Hello = () => <h1>Hello world!</h1>
const App = () => (
 <BrowserRouter>
 <div>
 <Route path="/hello" 
component={Hello}/>
 </div>
 </BrowserRouter>
)

open: https:localhost:3000/hello

8.useState hook📌

import React, { useState } from 'react'
function Example() {
 const [count, setCount] = useState(0)
 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => 
setCount(count + 1)}>
 Click here to increase the 
counter.
 </button>
 </div>
 )
}

Functions in javascript

Buddhadeb Chhetri — Sat, 31 Jul 2021 23:23:11 +0000

Functions:-Functions in JavaScript provide organized, reusable code to perform a set of actions. Functions simplify the coding
process, prevent redundant logic, and make code easier to follow.

1.Named Function

function myfunction(){
    console.log('Budddhadeb Chhetri');
   }
myFunction(); //Prints: Buddhadeb Chhetri

2.Named Function with arguments

function myFunction(parameter){ 
   console.log('parameter');                                                       
  }
myFunction(10); //Prints:10

3.Anonymous function

const myFunction =function(){
   console.log('Buddhadeb Chhetri');
}
myFunction(); //Prints: Buddhadeb Chhetri

4.Anonymous function with arguments

const myFunction = function(parameter){
  console.log (parameter);
}
myFunction(10); //Prints: 10

5.Arrow function with no argument

const myFunction = ()=>{
  console.log ('Buddhadeb');
}
myFunction(); //Prints: Buddhadeb

6.Arrow function with a single argument

const myFunction = parameter()=>{
  console.log (parameter);
}
myFunction(20); //Prints: 20

7.Arrow function with a two arguments

const mysum = (param1,param2)=>{
  console.log (param1+param2);
}
myFunction(2,5); //Prints: 7

8.Concise arrow funtion with arguments

const mySum = (a,b)=>a+b;
console.log (2,5); //Prints: 7

Git Cheat Sheet

Buddhadeb Chhetri — Thu, 29 Jul 2021 08:55:31 +0000

Important Commands of Git.
1)What is Git?
2)Why should we use git and GitHub?
3)How to Download?
4)Git Operations?

How to create a git Directory?
How to Stage?
How to do your first Commit?

5)Important Git commands?

1. Git- Git is a version control system (VCS) that lets you manage and keep track of your changes that you make to files.

2. Why we use:- GitHub is a website for hosting projects that use git.
Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source.

3. Download- Click the Blue mark download this will take you to the download page of git.

4. Git Operations -There are main three operations that every programmer have to do in Git.

6. Git commands - The most used commands are

i) CREATE

Create a new local repository

git init

Clone an existing Repository

git clone ssh://user@domain.com/repo.git

ii)LOCAL CHANGES

Change files in your working directory

git status

Changes to tracked files

git diff

Add all current changes to the next commit

git add .

Add some changes in <file> to the next commit

git add -p <file>

Commit all local changes in tracked files

git commit -a

Commit previously staged changes

git  commit

Change the last commit
Don't amend published comments

git commit --amend

iii)COMMIT HISTORY

Show all commits , starting with newest

git log

Show changes over time for a specific file

git log -p <file>

Who changed what and when in <file>

git blame <file>

iv) BRANCHES & TAGS

List of all existing branches

git branch -av

Switch HEAD branch

git checkout <branch name>

Create a new branch based on your current HEAD

git branch <new-branch>

Create a new tracking branch based on a remote branch

git checkout --track <remote/branch>

Delete a local branch

git branch -d <branch name>

Mark the current commit with a tag

git tag <tag-name>

v) Update & Publish

List of all Currently configured remotes

git remote -v

Show information about a remote

git remote show <remote>

Add new remote repository ,named <remote>

git remote add <shortname> <url>

Download all changes from <remote>, but don't integrate into HEAD

git fetch <remote>

Pull all changes from remote, merge/intregrate into HEAD

git pull <remote> <branch name>

Publish local changes on a remote

git push <remote> <branch name>

Delete a branch on the remote

git branch -dr <remote/branch name>

Publish your tags

git push --tags

vi) MERGE & REBASE

MERGE <BRANCH> INTO YOUR CURRENT HEAD

git merge <branch name>

Rebase your current HEAD onto <branch>
_Don't rebase publish commits _

git rebase <branch>

Abort a rebase

git rebase --abort

Continue a rebase after resolving conflicts

git rebase --continue

Use your configured mege tool to solve conflicts

git mergetool

vi)UNDO

Discard all local changes in your working directory

git reset --hard HEAD

Discard local changes in a specific file

git checkout HEAD <file>

Revert a commit

git revert <commit>

Reset your HEAD pointer to a previous commit

git reset --hard <commit>

Preserve all changes as unstaged changes

git reset <commit>

Preserve uncommitted local changes

git reset --keep <commit>

DEV Community: Buddhadeb Chhetri

6 Must-Have APIs for Web Development

1 CoinBase API

2 Hotels API

3 DATA USA

4 LINKDB

5 Weather

6 Google Translate

10 Useful Android Library for Every New Developer

1. Retrofit

2. Glide

3. Room

4. Gson

5. Picasso

6. Lottie

7. Dagger

8. RxAndroid

9. Fast Android Networking

10. Slices

Best Free 3D Assets for Gamedevs

1.Flooded Grounds

2.Sun Temple

3.Realistic Terrain Collection LITE

4.Coconut Palm Tree Pack

5.Rocky Hills Environment

6.Conifers [BOTD]

7.Nature Starter Kit

8.Unity Terrain - HDRP

9.Destroyed City

10.Island Collection

11.Maxamo

Free Resoures for Game Developers

1. Kenney

2. Open Gameart

3. Glitch game

4. Itch.io

5. Textures

6. Gameart Guppy

7. Unity Assetstore

8. GameDev Market

9. Craftpix

10. OS GameClones

11. Bevouliin

12. Reddit

13. Hotpot.ai

14. Iconduck

15. Game icons

16. Supergame Assets

17.Vecteezy

18. Stickpng

19. Coolbackgrounds

20. Placeholders

21. Heropatterns

22. Stripegenerator

17+ Great Websites for web Developers

1. Hidden Tools

2. Music For Programming

3. Programming Language Convertor

4. Http Cat

5.CSS Zen Garden

6. Code project

7. A Listapart

8. CreativeBloq

9. Codrops

10. Tutsplus

11. The Odin Project

12. CodeWars

13. WP Sessions

14. CSS Author

15. LaraCasts

16. Gradient Magic

17. Tringlify

18. Free Frontend

19. Codemy UI

20. CSS Tricks

10 Incredibly Useful Extensions For Developers

Buddhadeb ChhetriFollow

JavaScript ES6

Arrow Function

Default parameters