Forem: Praveen Kumar

Handling API requests in react js

Praveen Kumar — Sat, 19 Feb 2022 07:03:28 +0000

Setting Up react app

npx create-react-app apihandling

Install axios module

npm install axios

3.In app.js file you need to import the axios module

import axios from 'axios';

Call the API and set it into the state

Import the useState and useEffect module from react

import react, {useState, useEffect} from 'react';

creating state to store API data

const [ApiData, setApiData] = useState([])

Creating an async function for get an data from an API

const getData = async() => {
    const res = await axios.get("https://jsonplaceholder.typicode.com/todos")
    setApiData(res.data)
}

Adding getData function into useEffect function

useEffect(() => {
    getData();
}, [])

In the return statement you can going to map through the value of the state Api Data

return (
    ApiData.map((data) => <p key={data.id}>{data.title}</p>)
)

In the above code we are mapping through each value of the ApiData state and returning only the title from it in a order.

That's it we have successfully create an react app that can get api from other sources and display.

Full Code Here:

import react, {useState, useEffect} from 'react';
import axios from axios;
export default function App() {
    const [ApiData, setApiData] = useState([]);

    const getData = async() => {
        const res = await axios.get(https://jsonplaceholder.typicode.com/todos)
        setApiData(res.data)
    }

    useEffect(() => {
        getData();
    }, []);

    return (
        {
          ApiData.map((data) => <p key={data.id}>{data.title}</p>
        }
    )
}

Thanks for Reading
Follow me on twitter @abipravi1

React Js google auth

Praveen Kumar — Wed, 16 Feb 2022 11:26:23 +0000

Install react-google-login module
npm install react-google-login

step 2 :
Open Google developers console

Create new project

Enter The Project Name

Select you project -> Dashboard

select OAuth in the left side menu

Creating OAuth Credentials:
1.

Enter Project name and select you gmail id
Add your add domain for react add (https://localhost:3000)

Now You can see the credentials in the dashboard

Setting Up in react

<GoogleLogin
         clientId={props.authid} // provide your clint id here
         onSuccess={responseGoogle}
         render={(renderProps) => (
           <button
             onClick={renderProps.onClick}
             disabled={renderProps.disabled}
             class="bi bi-google btn btn-dark"
           ></button>
          )}
          theme="dark"
          icon="false"
          onFailure={responseGoogle}
 />

const responseGoogle = (e) => {
   console.log(e.profileObj) //Data Of the User logged in
}

that's it you have successfully created an clint side google auth now you can use the data to store it into your backend and use it like normal JWT authentication.

Convert video to gif in python

Praveen Kumar — Thu, 30 Dec 2021 14:44:36 +0000

How to convert `video file` to `gif` format using Python programming language

First install module

pip install MoviePy

Now Code the following

from moviepy.editor import *
clip = (VideoFileClip("./video1.mp4"))
clip.write_gif("output.gif")

You can also trim the video from one part and then convert them into gif

from moviepy.editor import * 
clip = (VideoFileClip("./video1.mp4").subclip((0:00),(1:00)).resize(ACCORDING TO THE USER WISH)) 
clip.write_gif("output.gif")

Thanks for Reading

If you like this article please like and leave us an comment

Neovim ultimate Web Dev Setup with vim plug on windows

Praveen Kumar — Tue, 14 Dec 2021 03:49:59 +0000

How to make an ultimate setup in neovim with dir tree and code autocomplete

first install nvim and go the nvim folder

for windows:

c:\users\appdata\local\nvim

If there is no nvim folder then create one with name nvim

Now let us code the plugin and setup the environment

Now create an file name init.vim inside the nvim folder

and also create a folder named autoload and create an new file named plug.vim

and add the following code into the plug.vim file

https://gist.github.com/pravee42/f12d4425d781eb61d7713f66da2bb6b0

after added the code into the plug.vim

move out of the directory and go back to the nvim folder

inside the nvim folder open the file named init.vim and paste the following code

set number
set relativenumber
set clipboard=unnamed
set autoindent
set tabstop=4
set shiftwidth=4
set smarttab
set softtabstop=4
set mouse=a
:filetype indent on
:filetype plugin on
set ruler

call plug#begin('C:/Users/ABIPRAVI/AppData/Local/nvim/plugged')
" below are some vim plugins for demonstration purpose.
" add the plugin you want to use here.
Plug 'Chiel92/vim-autoformat'
Plug 'davidhalter/jedi-vim'
Plug 'raimon49/requirements.txt.vim', {'for': 'requirements'}
Plug 'hail2u/vim-css3-syntax'
Plug 'gko/vim-coloresque'
Plug 'vim-scripts/pylint.vim'
Plug 'tpope/vim-haml'
Plug 'mattn/emmet-vim'
Plug 'dracula/vim', { 'as': 'dracula' }
Plug 'joshdick/onedark.vim'
Plug 'iCyMind/NeoSolarized'
" Use release branch (recommend)
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'neoclide/coc.nvim'
Plug 'junegunn/vim-easy-align'
Plug 'https://github.com/junegunn/vim-github-dashboard.git'
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'tpope/vim-fireplace', { 'for': 'clojure' }
Plug 'rdnetto/YCM-Generator', { 'branch': 'stable' }
Plug 'fatih/vim-go', { 'tag': '*' }
Plug 'nsf/gocode', { 'tag': 'v.20150303', 'rtp': 'vim' }
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
Plug 'github/copilot.vim'
Plug 'https://github.com/rafi/awesome-vim-colorschemes' 
Plug 'https://github.com/ap/vim-css-color'
Plug 'https://github.com/ryanoasis/vim-devicons'
Plug 'pangloss/vim-javascript'
Plug 'sbdchd/neoformat'
Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'
Plug 'styled-components/vim-styled-components', { 'branch': 'main' }
Plug 'tpope/vim-commentary'
Plug 'jparise/vim-graphql'
Plug 'kien/ctrlp.vim'
Plug 'jiangmiao/auto-pairs'
Plug 'ryanoasis/vim-devicons'
call plug#end()


" Use <C-l> for trigger snippet expand.
imap <C-l> <Plug>(coc-snippets-expand)
"
" " Use <C-j> for select text for visual placeholder of snippet.
vmap <C-j> <Plug>(coc-snippets-select)
"
" " Use <C-j> for jump to next placeholder, it's default of coc.nvim
let g:coc_snippet_next = '<c-j>'
"
" " Use <C-k> for jump to previous placeholder, it's default of coc.nvim
let g:coc_snippet_prev = '<c-k>'
"
" " Use <C-j> for both expand and jump (make expand higher priority.)
imap <C-j> <Plug>(coc-snippets-expand-jump)
"
" " Use <leader>x for convert visual selected code to snippet
xmap <leader>x  <Plug>(coc-convert-snippet)
vmap <leader>f  <Plug>(coc-format-selected)
nmap <leader>f  <Plug>(coc-format-selected)


command! -nargs=0 Prettier :CocCommand prettier.formatFile

let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#tabline#left_sep = ' '
let g:airline#extensions#tabline#left_alt_sep = '|'

nnoremap <C-f> :NERDTreeFocus<CR>
nnoremap <C-k> :Prettier<CR>
nnoremap <C-I> :PlugInstall<CR>
nnoremap <C-n> :NERDTree<CR>
nnoremap <C-t> :NERDTreeToggle<CR>
nnoremap <C-s> :w<CR>
:colorscheme dracula

Yes we have completed the 90 percentage of the code and there is only few thing to do with the init.vim

after that go to the init.vim

go the command mode and type :PlugInstall

now you can see the plugins are installing

Yes we have installed close and open vim again now you see the some of the power have been updated to neovim

Ok but we havent still completed

now to the plugged folder inside the nvim folder there you can see that there is an coc.nim folder

there you can just type

yarn install  
npm i  
npm run build  
yarn build

(NOTE: before this setup make sure that node js is installed on your system then only it will work)

after installing again close the nvim and open it now you can see that the auto completion is working fine

and also we have added some of the shortcuts

ctrl + s -> save the file

ctrl + k -> Prettier auto code formatter

ctrl + t -> directory tree on the left side

ctrl + f -> To focus on the nred tree while working in the file

Finally we have completed the neovim setup

We have made it

Thanks

If You like this post make sure you follow us on

Make images load fast by using Webp image in website

Praveen Kumar — Fri, 10 Dec 2021 10:26:48 +0000

Why to use Webp images

Webp images is especially build for web by google to optimize the loading speed of images
The image is smaller 26% by size compared to PNG images
WebP supports transparency at a cost of just 22% additional bytes

Try to use WebP images in website instead of PNG and JPEG images

Example

<img src="image.webp" alt="" />

Thanks for reading...

Open Source news api for developers

Praveen Kumar — Fri, 03 Dec 2021 03:23:00 +0000

News Api is created using python `django rest framework`

Using this the developer can get the realtime news which is scraped from different websites and sources such as google news and India today

Api Link: VISIT_API

github repository link: View Source code

Documentation:

url/news -> To get the top news and head lines news
url/tech -> To get the Technology news
url/search/<search_keyword> -> Search News

like wise there are more to get the news

Main feature is there is no need to register on owr website you can use the API privately

For Documentation Visit: Docs

Thanks for reading

If you like you post Connect us on

How to create a Twitter bot in python

Praveen Kumar — Wed, 01 Dec 2021 05:07:58 +0000

In this article, we will learn how to create a Twitter bot using a module called simpletwitter

Install the simpletwitter module

pip install simpletwitter

Yes we have successfully installed the module

Now get into the code,

from simpletwitter import SimpleTwitter

Create an instance for the class SimpleTwitter

email = "Twitter_User_Email_Address"

password = "Twitter_Password"

user_name = "Abipravi1" 
#here i have entered my twitter username but you need to enter your's in this case

no_of_tweets = 10 
#this value is necessary how many no of tweets you want to perform operation

bot = SimpleTwitter(email, password, no_of_tweets, user_name)

That's all we set up all the necessary requirements, Now let us go and perform the Twitter operations…..

hashtags = ['#abipravi', #pythonmodule', '#twitter_bot']
tweetmessage = "My first tweet by simple twitter"
bot.login() 
# to login into the account
bot.like_tweet(hashtags) 
# like the tweet
bot.unlike_liked_tweets(5) 
# unlike the liked tweet
bot.tweet(tweetmessage) 
# put some tweet
bot.only_like_top_tweet(hashtags)
# this will like only the trending tweet
bot.retweet(hashtags) 
# retweet some tweets based on particular hashtags

Finally We have have it......

We have made our own Twitter bot

Full Code:

from simpletwitter import SimpleTwitter

email = "Twitter_User_Email_Address"

password = "Twitter_Password"

user_name = "Abipravi1" 
#here i have entered my twitter username but you need to enter your's in this case

no_of_tweets = 10 
#this value is necessary how many no of tweets you want to perform operation

bot = SimpleTwitter(email, password, no_of_tweets, user_name)
#Creating Instance

hashtags = ['#abipravi', #pythonmodule', '#twitter_bot']

tweetmessage = "My first tweet by simple twitter"

bot.login() 
# to login into the account

bot.like_tweet(hashtags) 
# like the tweet

bot.unlike_liked_tweets(5) 
# unlike the liked tweet

bot.tweet(tweetmessage) 
# put some tweet

bot.only_like_top_tweet(hashtags)
# this will like only the trending tweet

bot.retweet(hashtags) 
# retweet some tweets based on particular hashtags

**_Thanks for reading

If You like this post make sure you follow us on_**

Instagram
Twitter
Linked In
BlogPost