DEV Community: Web

Customize npm init default values

VIMAL KUMAR — Mon, 01 Mar 2021 12:14:36 +0000

npm init is a first process of any new node project and we all have to setup author, version and license manually, This tutorial help you to config those things globally .

This is default npm init -y result value

for chang default value of npm init command you need to follow this Synopsis

npm config set <key>=<value>

Change global author name by

npm config set init-author-name "vimal kumar"

Change global author email by

npm config set init-author-email "vimal@letskhabar.com"

Change global author web url by

npm config set init-author-url "https://vimal.letskhabar.com/"

Change global default license

npm config set init-license "MIT"

Change global default version

npm config set init-version "0.0.1"

For more check this npm documentation

All the change has been saved in your ~/.npmrc directory as shown in image below

Now when you create new project with npm init -y you can see your default value has been changed according to your setup.

Enjoy, Thanks for reading.

svghero: Javascript package for hero effect in SVG

VIMAL KUMAR — Sun, 22 Nov 2020 06:59:13 +0000

you can get that effect by one line of code `svghero(id,title,text,width,height,x,y,scale)`

Video links - https://www.youtube.com/watch?v=n69Xqy9Q5kk

How to use this

Copy and paste this code in body section of html.

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svghero@0.2.0/example/style.css">
      <script src="https://cdn.jsdelivr.net/npm/svghero@0.2.0/cdn.js"></script>

in script tag or in js file add svghero(id,title,text,width,height,x,y,scale)

where

id = svg group id or id of elements that want to show in details page (string)
title = title that show in details page (string)
text = text that show in details page (string)
width = width of new svg that show in details page (number)
height = height of new svg that show in details page (number)
x = relative position of svg in details page (number)
y = relative position of svg in details page (number)
scale = relative scale of svg in details page (number)

example svghero("id","title","this is text",800,400,-100,50,2)

And it's Done 🎉

Documentation

vimal-verma / svghero

svghero: Javascript package for hero effect in SVG

Video links - https://www.youtube.com/watch?v=n69Xqy9Q5kk

you can get that effect by one line of code svghero(id,title,text,width,height,x,y,scale)

How to use this

Copy and paste this code in body section of html.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svghero@0.2.0/example/style.css">
    <script src="https://cdn.jsdelivr.net/npm/svghero@0.2.0/cdn.js"></script>

in script tag or in js file add svghero(id,title,text,width,height,x,y,scale)

where
- id = svg group id or id of elements that want to show in details page (string)
- title = title that show in details page (string)
- text = text that show in details page (string)
- width = width of new svg that show in details page (number)
- height = height of new svg that show in details page (number)
- x = relative position of svg in details page (number)
- y = relative position of svg in details page (number)
- scale = relative…

View on GitHub

Master-Portfolio V2 what's new

VIMAL KUMAR — Mon, 09 Nov 2020 13:31:27 +0000

Master-Portfolio V2 what's new

More customizable
Fetch your Devto articles in your Portfolio #website
List your all #projects
List your all Achievement and Certificate
Separate section for #programming , #developments , #designing , #cloudengineering , #datascience , #machinelearning & #artificialintelligence , #robotics and #gamedevelopment in Home page
You can customizable Tools in each section
More attractive #design
Colourful tools icons

Check comments section for links

Master-Portfolio :First release

VIMAL KUMAR — Mon, 19 Oct 2020 06:19:33 +0000

Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
The website is completely built on react-js framework of javascript🔥.
In this project, there are basically Personal Information that you need to change to customize this to anyone else's portfolio
You will find src/Name.js file which contains the complete information about the user. The file looks something like below

``` 
const greeting = {
    title: "Your Name",
    logo_name: "Name",
    subTitle:
    "subTitle.",
};
const socialMedia = {
    facebook: "Your facebook link",
    twitter: "Your twitter link",
    instagram: "Your instagram link",
    github: "Your github link",
    gitlab: "Your gitlab link",
    devto: "Your devto link",
    mailto: "mailto:Your mail"
};
const about = {
    School: "Your School Name",
    College: "Your College Name",
    university: "Your university Name",
    Home: "Your Home city"
};
const projects = [
{
    id: "1",
    name: "project 1",
    Description: "this is Description",
    Code_Link: "this is code link",
    Live_link: "this is Live link",
    tool_used: "html,css,js",
    img: "https://master-portfolio.js.org/src/assets/img/mplogo.png"
},
.........
]
```

You can Customize it to make your own portfolio by Three Method ✏️

Using Template
Using Netlify deploy
Using Vercel deploy

Using Template

Click on Use this template
clone git clone https://github.com/{your github username}/{repository name}
To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command: npm install
change "homepage " to https://{your github username}.github.io/{repository name} in package.json
Edit src/Name.js
You can check it using npm start, it will open the website locally on your browser.
Commit change and push.
Once you are done with your setup and have successfully completed all steps above,
Now you have to deploy that portfolio website
- You can use Netlify, Vercel & gh-pages
- To deploy by gh-pages
- Run npm run deploy to build and create a branch called gh-pages. It will push the build files to that branch.
- 🎉 Your Portfolio website is ready.🥳 And live at https://{your github username}.github.io/{repository name}.

Using Netlify deploy

Click on Deploy button ☝️
Click on connect to Github
Click on Authorize netlify
Chose a github repository name and click on Save and Deploy
Your portfolio website is live 🚀
Those step ☝️ create a repository in your github account, go to that repository
Edit src/Name.js
Commit change and push 🎉 Your Portfolio website is ready.🥳

Using Vercel deploy

Click on Deploy button ☝️
Type a Project name and click on continue
Install Vercel for Github(If not already)
Chose a github repository name and click on continue
Verify Framework preset is Create React App and Click on Deploy
Your portfolio website is live 🚀
Those step ☝️ create a repository in your github account, go to that repository
Edit src/Name.js
Commit change and push 🎉 Your Portfolio website is ready.🥳

vimal-verma / Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
It can List your all Projects & Certificate
it can Also list your All Dev.to articles Using Api (if you have set BlogData.show_Blog: true in src/Name.js)
The website is completely built on react-js framework of javascript🔥.
In this project, there are basically Personal Information that you need to change to customize this to anyone else's portfolio
You will find src/Name.js file which contains the complete information about the user. The file looks something like below

const greeting = {
    title: "Hi, I'm Your Name"
    logo_name: "Name",
    logo_img_show: false, // if true than show image(logo) in home page instant of text(logo)
    logo_img: "https://master-portfolio.js.org/src/assets/img/mplogo.png",
    full_name: "your name",
    email: "email id",
    subTitle:
    "I'm a student pursuing {Course} in {department} from {university}. I'm a passionate learner who's always willing to learn and work across technologies and domains. I love to

…

View on GitHub

You can resolve any open issues or add some exciting features to this repository!!!
Thanks

Master-Portfolio :Create a Portfolio Website in Minutes

VIMAL KUMAR — Mon, 12 Oct 2020 02:50:52 +0000

Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
The website is completely built on react-js framework of javascript🔥.
In this project, there are basically Personal Information that you need to change to customize this to anyone else's portfolio
You will find src/Name.js file which contains the complete information about the user. The file looks something like below

``` 
const greeting = {
    title: "Your Name",
    logo_name: "Name",
    subTitle:
    "subTitle.",
};
const socialMedia = {
    facebook: "Your facebook link",
    twitter: "Your twitter link",
    instagram: "Your instagram link",
    github: "Your github link",
    gitlab: "Your gitlab link",
    devto: "Your devto link",
    mailto: "mailto:Your mail"
};
const about = {
    School: "Your School Name",
    College: "Your College Name",
    university: "Your university Name",
    Home: "Your Home city"
};
const projects = [
{
    id: "1",
    name: "project 1",
    Description: "this is Description",
    Code_Link: "this is code link",
    Live_link: "this is Live link",
    tool_used: "html,css,js"
},
.........
]
```

You can Customize it to make your own portfolio by Three Method ✏️

Using Netfify deploy
Using Vercel deploy
Using gh-pages

Using Netlify deploy

Click on Deploy button ☝️
Click on connect to Github
Click on Authorize netlify
Chose a github repository name and click on Save and Deploy
Your portfolio website is live 🚀
Those step ☝️ create a repository in your github account, go to that repository
Edit src/Name.js
Commit change and push 🎉 Your Portfolio website is ready.🥳

Using Vercel deploy

Click on Deploy button ☝️
Type a Project name and click on continue
Install Vercel for Github(If not already)
Chose a github repository name and click on continue
Verify Framework preset is Create React App and Click on Deploy
Your portfolio website is live 🚀
Those step ☝️ create a repository in your github account, go to that repository
Edit src/Name.js
Commit change and push 🎉 Your Portfolio website is ready.🥳

Using gh-pages

Fork or import this repository
clone git clone https://github.com/<your-github-username>/Master-Portfolio
To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command: npm install
change "homepage " to https://<your-github-username>.github.io/Master-Portfolio in package.json
Edit src/Name.js
You can check it using npm start, it will open the website locally on your browser.
Commit change and push.
Once you are done with your setup and have successfully completed all steps above,
Run npm run deploy to build and create a branch called gh-pages. It will push the build files to that branch.
🎉 Your Portfolio website is ready.🥳 And live at https://<your-github-username>.github.io/Master-Portfolio.

vimal-verma / Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
It can List your all Projects & Certificate
it can Also list your All Dev.to articles Using Api (if you have set BlogData.show_Blog: true in src/Name.js)
The website is completely built on react-js framework of javascript🔥.
In this project, there are basically Personal Information that you need to change to customize this to anyone else's portfolio
You will find src/Name.js file which contains the complete information about the user. The file looks something like below

const greeting = {
    title: "Hi, I'm Your Name"
    logo_name: "Name",
    logo_img_show: false, // if true than show image(logo) in home page instant of text(logo)
    logo_img: "https://master-portfolio.js.org/src/assets/img/mplogo.png",
    full_name: "your name",
    email: "email id",
    subTitle:
    "I'm a student pursuing {Course} in {department} from {university}. I'm a passionate learner who's always willing to learn and work across technologies and domains. I love to

…

View on GitHub

You can resolve any open issues or add some exciting features to this repository!!!
Thanks

Creating a Master-Portfolio For Developers during Hacktoberfest

VIMAL KUMAR — Fri, 09 Oct 2020 13:50:41 +0000

I am creating a Master-Portfolio for developers with developers during Hacktoberfest that helps developers to create a portfolio website

Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

vimal-verma / Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
It can List your all Projects & Certificate
it can Also list your All Dev.to articles Using Api (if you have set BlogData.show_Blog: true in src/Name.js)
The website is completely built on react-js framework of javascript🔥.
In this project, there are basically Personal Information that you need to change to customize this to anyone else's portfolio
You will find src/Name.js file which contains the complete information about the user. The file looks something like below

const greeting = {
    title: "Hi, I'm Your Name"
    logo_name: "Name",
    logo_img_show: false, // if true than show image(logo) in home page instant of text(logo)
    logo_img: "https://master-portfolio.js.org/src/assets/img/mplogo.png",
    full_name: "your name",
    email: "email id",
    subTitle:
    "I'm a student pursuing {Course} in {department} from {university}. I'm a passionate learner who's always willing to learn and work across technologies and domains. I love to

…

View on GitHub

Let's Give a positive direction to Hacktoberfest
contribution welcome 👀

Invitation in web organization

VIMAL KUMAR — Sat, 05 Sep 2020 06:06:13 +0000

Why should i join ? 💬

Get more reach
member of community
Grow your knowledge

How i can join ?

Step 1: Copy this code and follow step

d4bbf76c90e83a6675df5c309b9c156e2f9a5d31987dc73863ca02fae35b730383719e7039befdaa6f52ed7a43d4f24a4fd2

Step 2: Go to setting
Step 3: click on organization tab
Step 4: paste code and click on join organization

welcome 🌹

Have you tried this? it's live!

VIMAL KUMAR — Thu, 09 Jul 2020 13:32:00 +0000

Just make a repo with your own username. And Done🎁

Have you tried this?
I want to see what that looks like.

Design Github profile using README.md

VIMAL KUMAR — Sun, 05 Jul 2020 04:05:46 +0000

You can Design your Github profile using Username/README.md repo, this amazing update is under development.

If you want to listed your all project, website, all social media link and many other link then this github update is for you.

This amazing update is under development. after publish if you want to use this, you have to create a repo Username and create a file README.md and now you can design your github profile using README.md

hey, so we heard ya & are trying out a thing where you CAN have a readme on your @github profile... @mikekavouras built it btw! re: https://t.co/UC6q3qHjjR pic.twitter.com/kB0kafgovY
— kathy ☁️☁️☁️ defund the police (@pifafu) May 27, 2020

Have you tried this? it's live!

List of all Git Commands

VIMAL KUMAR — Mon, 27 Apr 2020 16:33:11 +0000

Git Commands

A list of Git commands

feel free to star this

Tell Git who you are

Description	Command
Configure the author name.	`git config --global user.name "<username>"`
Configure the author email address.	`git config --global user.email <email address>`

Getting & Creating Projects

Description	Command
Initialize a local Git repository	`git init`
Create a local copy of a remote repository	`git clone ssh://git@github.com/<username>/<repository-name>.git`

Basic Snapshotting

Description	Command
Check status	`git status`
Add a file to the staging area	`git add <file-name.txt>`
Add all new and changed files to the staging area	`git add -A` or `git add .`
Commit changes	`git commit -m "<commit message>"`
Remove a file (or folder)	`git rm -r <file-name.txt>`

Inspection & Comparison

Description	Command
View changes	`git log`
View changes (detailed)	`git log --summary`
View changes in one line (briefly)	`git log --oneline` or `git log --pretty=oneline` or `git log --pretty=short`

Undo to previous file

Description	Command
List of all commit with commit id and commit message)	`git log --oneline`
Return to previous commit	`git checkout<commit id>`
Revert commit (undo one particular commit)	`git revert <commit id>`
Reset to previous commit (remove history of all commit after )	`git reset <commit id>`
Stop a file being tracked	`git rm --cached <file/folder>`
Restore a file to a previous commit	`git checkout <file/to/restore>`

Branching & Merging

Description	Command
List branches (the asterisk denotes the current branch)	`git branch`
List all branches (local and remote)	`git branch -a`
Create a new branch	`git branch <branch name>`
Create a new branch and switch to it	`git checkout -b <branch name>`
Clone a remote branch and switch to it	`git checkout -b <branch name> origin/<branch name>`
Rename a local branch	`git branch -m <old branch name> <new branch name>`
Switch to a branch	`git checkout <branch name>`
Switch to the branch last checked out	`git checkout -`
Discard changes to a file	`git checkout -- <file-name.txt>`
Delete a branch	`git branch -d <branch name>`
Delete a remote branch	`git push origin --delete <branch name>`
Preview changes before merging	`git diff <source branch> <target branch>`
Merge a branch into the active branch	`git merge <branch name>`
Merge a branch into a target branch	`git merge <source branch> <target branch>`
Stash changes in a dirty working directory	`git stash`
Remove all stashed entries	`git stash clear`

Sharing & Updating Projects

Description	Command
Push a branch to your remote repository	`git push origin <branch name>`
Push changes to remote repository (and remember the branch)	`git push -u origin <branch name>`
Push changes to remote repository (remembered branch)	`git push`
Delete a remote branch	`git push origin --delete <branch name>`
Update local repository to the newest commit	`git pull`
Pull changes from remote repository	`git pull origin <branch name>`
Add a remote repository	`git remote add origin ssh://git@github.com/<username>/<repository-name>.git`
Set a repository's origin branch to SSH	`git remote set-url origin ssh://git@github.com/<username>/<repository-name>.git`

List of Github cli commands

VIMAL KUMAR — Mon, 27 Apr 2020 16:25:17 +0000

Github cli commands

A list of Github cli commands

feel free to star this

Repository

Description	Command
Initialize a Github repository [default private]	`gh repo create <name>`
Initialize a Github public repository	`gh repo create <name> --public`
Create a local copy of a remote repository	`gh repo clone <repository-name>` or `gh repo clone https://github.com/<username>/<repository-name>`
Create a fork for the current repository	`gh repo fork`

Pull requests

Description	Command
Check status	`gh pr status`
Create a pull request	`gh pr create`
Quickly navigate to the pull request creation page	`gh pr create --web`
list of open pull requests	`gh pr list`
View a pull request	`gh pr view`

issue

Description	Command
Create a new issue	`gh issue create`
Create an issue using flags	`gh issue create --title "Issue title"`
list of open issues	`gh issue list`
list of closed issues	`gh issue list --state closed`
Show status of relevant issues	`gh issue status`
View an issue	`gh issue view {<number> / <url>}`

DEV Community: Web

Customize npm init default values

svghero: Javascript package for hero effect in SVG

you can get that effect by one line of code svghero(id,title,text,width,height,x,y,scale)

How to use this

Documentation

vimal-verma / svghero

svghero: Javascript package for hero effect in SVG

svghero: Javascript package for hero effect in SVG

How to use this

Master-Portfolio V2 what's new

Master-Portfolio V2 what's new

Master-Portfolio :First release

Master-Portfolio

You can Customize it to make your own portfolio by Three Method ✏️

Using Template

Using Netlify deploy

Using Vercel deploy

vimal-verma / Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

Master-Portfolio

Master-Portfolio :Create a Portfolio Website in Minutes

Master-Portfolio

You can Customize it to make your own portfolio by Three Method ✏️

Using Netlify deploy

Using Vercel deploy

Using gh-pages

vimal-verma / Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

Master-Portfolio

Creating a Master-Portfolio For Developers during Hacktoberfest

Master-Portfolio

vimal-verma / Master-Portfolio

A clean, beautiful, responsive and 100% customizable portfolio template for Developers!

Master-Portfolio

Invitation in web organization

Why should i join ? 💬

How i can join ?

Have you tried this? it's live!

Design Github profile using README.md

List of all Git Commands

Git Commands

A list of Git commands

Tell Git who you are

Getting & Creating Projects

Basic Snapshotting

Inspection & Comparison

Undo to previous file

Branching & Merging

Sharing & Updating Projects

List of Github cli commands

Github cli commands

A list of Github cli commands

Repository

Pull requests

issue

you can get that effect by one line of code `svghero(id,title,text,width,height,x,y,scale)`