58 | >
59 | )
60 |
61 |
62 |
63 |
64 |
65 | }
66 |
67 |
68 | export async function getStaticPaths() {
69 | const files = fs.readdirSync(path.join('posts'))
70 |
71 | let tempStorage = []
72 |
73 | const temppaths = files.map((filename) => {
74 |
75 | const markdownWithMeta = fs.readFileSync(
76 | path.join('posts', filename),
77 | 'utf-8'
78 | )
79 |
80 | const { data: frontmatter } = matter(markdownWithMeta)
81 |
82 | if (frontmatter.draft === false) {
83 | frontmatter.tags.map(
84 | tag => {
85 | let slug = slugify(tag)
86 | tempStorage.push({ params: { slug } });
87 |
88 | }
89 | )
90 | } else {
91 | return null
92 | }
93 |
94 |
95 | })
96 |
97 |
98 |
99 |
100 | const paths = tempStorage.filter((item,
101 | index) => {
102 | return tempStorage.indexOf(item) === index
103 | })
104 |
105 |
106 |
107 | // const paths=["npm"]
108 |
109 |
110 | return {
111 | paths,
112 | fallback: false,
113 | }
114 |
115 | }
116 |
117 | export async function getStaticProps({ params: { slug } }) {
118 |
119 | // Get files from the posts dir
120 | const files = fs.readdirSync(path.join('posts'))
121 |
122 | let tempStorage = []
123 |
124 |
125 |
126 | // Get slug and frontmatter from posts
127 |
128 | const tempPosts = files.map((filename) => {
129 |
130 | // Get frontmatter
131 | const markdownWithMeta = fs.readFileSync(
132 | path.join('posts', filename),
133 | 'utf-8'
134 | )
135 |
136 | const { data: frontmatter } = matter(markdownWithMeta)
137 |
138 |
139 |
140 | if (frontmatter.draft === false) {
141 | frontmatter.tags.map(
142 | tag => {
143 | let tagSlug = slugify(tag)
144 | if (slug === tagSlug) {
145 | tempStorage.push({ post: frontmatter })
146 | }
147 | }
148 | )
149 | } else {
150 | return null
151 | }
152 | })
153 |
154 |
155 |
156 | // remove null in tempPosts
157 |
158 | const posts = tempStorage.filter(
159 | post => {
160 |
161 | return post && post
162 | }
163 | )
164 |
165 | return {
166 | props: {
167 | posts
168 | },
169 | }
170 |
171 |
172 | }
173 |
--------------------------------------------------------------------------------
/posts/how-is-npm-install-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["npm", "npm-cli", "npm install command"]
4 | date : "2022-03-20T13:09:24Z"
5 | description : "Npm install command help to install package from npmjs.org"
6 | image : "images/npm-init-command-1.png"
7 | images : ["images/npm-init-command-1.png"]
8 | slug : "how-is-npm-install-command"
9 | summary : "Npm install command help to install package from npmjs.org"
10 | tags : ["npm", "npm-cli", "npm install command"]
11 | title : "What is the npm install command?"
12 | draft : false
13 | ---
14 |
15 | Npm, install command help to install dependencies and devDependencies base on package.json and package-lock.json file.
16 |
17 | **The simple word npm install command help to download the package from** [**npmjs.org**](https://www.npmjs.com/)**.**
18 |
19 | ```cmd
20 | npm install
21 |
22 | or
23 |
24 | npm i
25 |
26 | or
27 |
28 | npm add
29 | ```
30 |
31 | You can install any package base on two methods. I know there are other methods, but I created my way to quickly teach you the npm install command.
32 |
33 | > I cover the most important options which you use every day. npm I, npm install, and npm add is one command.
34 |
35 | 1. Syntax
36 | 2. Options or Flags
37 |
38 | ## Syntax
39 |
40 | 1. npm install
41 | 2. npm package **``**
42 | 3. npm install **`@`**
43 | 4. npm install **`@`**
44 | 5. npm install **``**
45 |
46 | ### npm install
47 |
48 | npm install command is the most used command in the npm world. The npm install command downloads all packages from the [npmjs](https://www.npmjs.com/) website and store them in the node_modules folder.
49 |
50 | ```json
51 | {
52 | "name": "my-app",
53 | "version": "0.1.0",
54 | "private": true,
55 | "scripts": {
56 | "dev": "next dev",
57 | "build": "next build",
58 | "start": "next start",
59 | "lint": "next lint"
60 | },
61 | "dependencies": {
62 | "next": "12.1.0",
63 | "react": "17.0.2",
64 | "react-dom": "17.0.2"
65 | },
66 | "devDependencies": {
67 | "eslint": "8.11.0",
68 | "eslint-config-next": "12.1.0"
69 | }
70 | }
71 | ```
72 |
73 | Npm, install command install package based on package.json file. Inside the package.json file, npm checks dependencies and the devDependencies section. Then, based on dependencies and devDependencies, npm starts installing the package locally.
74 |
75 | ### npm package **``**
76 |
77 | You can install a package based on the package name. So you mention the package name in the npm install command. Then, Npm directly installed the package into your **node_modules** folder locally.
78 |
79 | When downloading another package or starting with a new project, the npm-cli also updates your package.json file and mentions the package name by default in the dependencies section.
80 |
81 | ```cmd
82 | npm install react@latest
83 | ```
84 |
85 | ***
86 |
87 | ```json
88 | {
89 | "name": "my-app",
90 | "version": "0.1.0",
91 | "private": true,
92 | "scripts": {},
93 | "dependencies": {
94 | "react": "17.0.2"
95 | },
96 |
97 | }
98 | ```
99 |
100 | ### npm install `@`
101 |
102 | You can install the package base on the tag if the author defines the tags in the package on uploading to [npmjs](https://www.npmjs.com/).
103 |
104 | In a simple word, the tag is the name of the version. The package's author gives the name of a different version, i.e., version 1.0.0, the tag name first.
105 |
106 | By default, npm provide the latest tag for every npm package. The latest tag means the current version of the package.
107 |
108 | ```cmd
109 | npm install react-dom@latest
110 | ```
111 |
112 | ### npm install `@`
113 |
114 | you can install the package base on the version. Every package has a different version, and you can install a specific version of the npm package install in your project.
115 |
116 | ```cmd
117 | npm install react@16.1.1
118 | ```
119 |
120 | ### npm install ``
121 |
122 | You can install the package base on your git repo URL. npm install command helps to install the package directly from Github.
123 |
124 | ```cmd
125 | npm install https://github.com/facebook/react.git
126 | ```
127 |
128 | > Firstly install code locally from GitHub and then run npm install command inside folder code folder.
129 |
130 | ## Options or Flags
131 |
132 | 1. -g option
133 | 2. -P or --save-prod option
134 | 3. -D or --save-dev option
135 |
136 | ### -g option
137 |
138 | \-g flag or option helps the install the package globally in your machine. in Syntax ways, npm installs all packages in the working node_modules folder.
139 |
140 | Globally means you access package cli anywhere in laptop.
141 |
142 | ```cmd
143 | npx -g create-react-app
144 | ```
145 |
146 | ### -P or --save-prod option
147 |
148 | The -P or --save-prod option helps add your package into the production or dependencies section in the package.json file.
149 |
150 | By default, the npm install command adds the package into production.
151 |
152 | ```cmd
153 | npm install -P next@latest
154 |
155 | or
156 |
157 | npm install --save-prod next@latest
158 | ```
159 |
160 | ***
161 |
162 | ```json
163 | {
164 | "name": "my-app",
165 | "version": "0.1.0",
166 | "private": true,
167 | "scripts": {
168 | "dev": "next dev",
169 | "build": "next build",
170 | "start": "next start",
171 | "lint": "next lint"
172 | },
173 | "dependencies": {
174 | "next": "^12.1.0",
175 | "react": "17.0.2",
176 | "react-dom": "17.0.2"
177 | }
178 | }
179 | ```
180 |
181 | ### -D or --save-dev option
182 |
183 | The -D or --save-dev option helps add your package into the devDependencies section in the package.json file.
184 |
185 | ```cmd
186 |
187 | npm install -D eslint@latest
188 |
189 | or
190 |
191 | npm install --save-dev eslint@latest
192 |
193 | ```
194 |
195 | ***
196 |
197 | ```json
198 | {
199 | "name": "my-app",
200 | "version": "0.1.0",
201 | "private": true,
202 | "scripts": {
203 | "dev": "next dev",
204 | "build": "next build",
205 | "start": "next start",
206 | "lint": "next lint"
207 | },
208 | "dependencies": {
209 | "next": "^12.1.0",
210 | "react": "17.0.2",
211 | "react-dom": "17.0.2"
212 | },
213 | "devDependencies": {
214 | "eslint": "8.11.0",
215 | "eslint-config-next": "12.1.0"
216 | }
217 | }
218 | ```
219 |
220 | ***
221 |
222 | ### References
223 |
224 | https://docs.npmjs.com/cli/v6/commands/npm-install
225 |
226 | ***
227 |
--------------------------------------------------------------------------------
/posts/how-to-add-css-in-next-js.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Next.js", "Next", "Next.js Framework", "Next.js Tutorial", "React.js", "react.js tutorial"]
4 | date : "2020-11-10T11:42:46Z"
5 | description : "Easy Ways Add CSS in Next.js #SeriesPart2"
6 | image : "images/next.js-add-css-code.jpg"
7 | images : ["images/next.js-add-css-code.jpg"]
8 | slug : "how-to-add-css-in-next-js"
9 | summary : "Easy Ways Add CSS in Next.js #SeriesPart2 \n"
10 | tags : ["Next.js", "Next", "Next.js Framework", "Next.js Tutorial", "React.js", "react.js tutorial"]
11 | title : "How To Add CSS In Next js?"
12 | draft : false
13 | ---
14 |
15 | In this Next Series, we Learn How to add CSS's own Project with Easy Steps.
16 |
17 | Good News is that Next.js provides custom CSS functionality. You Use The next.js plugin inside your project and use it.
18 |
19 | ## What's Next.js?
20 |
21 | Make sure Read Basic Introduction About Next.js #SeriesStart 💕
22 |
23 | [https://officialrajdeepsingh.dev/what-is-next.js/](https://officialrajdeepsingh.dev/what-is-next.js/ "https://officialrajdeepsingh.dev/what-is-next.js/")
24 |
25 | ***
26 |
27 | ## New Update:
28 |
29 | Next.js Version 9.3 **Support CSS Global Stylesheets.** Now you add CSS directly Import `.css` files as global stylesheets.
30 |
31 | ```javascript
32 | import './style.css'
33 | ```
34 |
35 | ***
36 |
37 | **Go To Github Download or Use Npm:**
38 |
39 | ```cmd
40 | npm install --save @zeit/next-css
41 | or
42 | yarn add @zeit/next-css
43 | ```
44 |
45 | ***
46 |
47 | Create an `next.config.js` At the root of your project
48 |
49 | ## Default:
50 |
51 | default config use for import CSS Global stylesheet in custom _app.js
52 |
53 | ```javascript
54 | const withCSS = require('@zeit/next-css')
55 | module.exports = withCSS({})
56 | ```
57 |
58 | ## Custom:
59 |
60 | Custom config used for import CSS in other Components like header, footer like so.
61 |
62 | ```javascript
63 | const withCSS = require('@zeit/next-css')
64 | module.exports = withCSS({
65 | cssModules: true // After true than use import statement in next.js
66 | })
67 | ```
68 |
69 | ***
70 |
71 | ## How To add Global CSS:
72 |
73 | When you create your app, help with npm. in the next step, you create a global app. If you npm official command the by default app create in your project and import your Global CSS file in next.js custom _app.js
74 |
75 | ```javascript
76 | import '../styles.css'
77 | or
78 | import '../styles.scss'
79 | // This default export is required in a new `pages/_app.js` file.
80 | export default function MyApp({ Component, pageProps }) {
81 | return
82 | }
83 | ```
84 |
85 | ***
86 |
87 | # Demo:
88 |
89 |
90 |
91 | ***
92 |
93 | ## Reference:
94 |
95 | https://nextjs.org/docs/basic-features/built-in-css-support
96 |
97 | https://nextjs.org/blog/next-9-2
98 |
99 | https://nextjs.org/blog/next-10
100 |
101 | ***
102 |
103 | # Contact me
104 |
105 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
106 | * [https://www.facebook.com/groups/JavaScriptcode/](https://www.facebook.com/groups/JavaScriptcode/)
107 | * [https://www.facebook.com/groups/pythoncodejoin/](https://www.facebook.com/groups/pythoncodejoin/)
108 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
--------------------------------------------------------------------------------
/posts/how-to-add-search-bar-functionality-in-ghost-cms-help-of-searchinghost.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | date : "2021-10-11T10:41:36Z"
4 | description : ""
5 | draft : true
6 | slug : "how-to-add-search-bar-functionality-in-ghost-cms-help-of-searchinghost"
7 | title : "How to Add Search bar functionality in Ghost Cms Help of SearchinGhost"
8 |
9 | ---
10 |
11 |
12 |
13 |
14 | https://github.com/gmfmi/searchinGhost
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/posts/how-to-capture-screenshots-in-raspberry-pi-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Raspberry", "Raspi 4", "screensshots", "capture screen shots", "Gnome Screenshot", "install gnome screenshot"]
4 | date : "2021-01-24T12:26:07Z"
5 | description : "Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi."
6 | draft : false
7 | image : "images/How-to-capture-screenshots-in-Raspberry-PI-4.png"
8 | images : ["images/How-to-capture-screenshots-in-Raspberry-PI-4.png"]
9 | slug : "how-to-capture-screenshots-in-raspberry-pi-4"
10 | summary : "Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi."
11 | tags : ["Raspberry", "Raspi 4", "screensshots", "capture screen shots", "Gnome Screenshot", "install gnome screenshot"]
12 | title : "How to capture screenshots in Raspberry PI 4"
13 |
14 | ---
15 |
16 |
17 |
18 | In Raspberry pi 4, you take the screenshot help of two software. The first is scort, and the second is Gnome Screenshot.
19 |
20 | I'm personally recommended you use Gnome Screenshot. Gnome Screenshot provides a graphical interface. You use a graphical interface to take screenshots very easily.
21 |
22 | Other hands scort is a command-line tool, and scort does not provide any graphical interface.So I'm personally again recommended you use Gnome Screenshot.
23 |
24 | ### Install Gnome Screenshot in Raspbian or Raspberry pi 4:
25 |
26 | **let start it:**
27 |
28 | The Raspi 4 does not provide by default Gnome Screenshot.
29 |
30 | Firstly Update your raspberry pi 4. this is a compulsory step for installing Gnome Screenshot.
31 |
32 | ```cmd
33 | sudo apt update && sudo apt upgrade
34 | ```
35 |
36 | Your update and upgrade command run successfully. Now you install Gnome Screenshot following command.
37 |
38 | ```cmd
39 | sudo apt install gnome-screenshot
40 | ```
41 |
42 | Now you can find Gnome Screenshot in your accessories menu, listed as "Screenshot."
43 |
44 | 
45 |
46 |
47 | Gnome interface is very easy to understand. You use Gnome to get a Screenshot, add your own image name, and after save it. By default, all pic save inside your Picture folder.
48 |
49 | 
50 |
51 |
52 | ---
53 |
54 | ### Uninstall Gnome Screenshot:
55 |
56 | In some cases, you may uninstall the Gnome Screenshot. so follow this command
57 |
58 | ```cmd
59 | sudo apt-get remove --purge gnome-screenshot
60 | ```
61 |
62 | ---
63 |
64 | # Contact me
65 |
66 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
67 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
68 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/posts/how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Raspberry pi 4", "snapcraft", "Snap store", "Linux", "Binary"]
4 | date : "2022-03-26T07:50:39Z"
5 | description : "You can easily check the raspberry pi binary in the snap store without the command line and code."
6 | draft : false
7 | image : "images/the-snap-store.png"
8 | images : ["images/the-snap-store.png"]
9 | slug : "how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not"
10 | summary : "You can easily check the raspberry pi binary in the snap store without the command line and code."
11 | tags : ["Raspberry pi 4", "snapcraft", "Snap store", "Linux", "Binary"]
12 | title : "How to check the snap store package available for raspberry pi 4 or not?"
13 |
14 | ---
15 |
16 |
17 | Ubuntu built the snap store package Eco-system. The Snap store help to distribute your Linux base application and software across the Linux distro.
18 |
19 | For checking the binary, you do not need any command. You need only two things. First is a web browser and a mouse.
20 |
21 | There is two binary support by raspberry pi 4. first is **arm64** and **armhf**. If one of the binary is present, you can install the package in your raspberry pi 4 without any problem.
22 |
23 |
24 |
25 | **There is two way to check the package binary is available for raspberry pi 4 or not.**
26 |
27 | 1. First way
28 | 2. Second way
29 |
30 |
31 |
32 | > In this article, I use the snap chromium package for example purpose.
33 |
34 |
35 | ## First way
36 |
37 | Firstly, you click on **the version drop-down list** and click again to **show the architecture** drop-down list and check all available binary forms for the list.
38 |
39 | * First step
40 | * Second step
41 |
42 | ### First step
43 |
44 | 
45 |
46 |
47 |
48 | ### Second step
49 |
50 | 
51 |
52 |
53 | ## Second way
54 |
55 | In a second way, you scroll down the page, go to the Linux distribution section, and check all the Linux distributions.
56 |
57 | 
58 |
59 |
60 | ---
61 |
62 | ### Reference
63 |
64 | https://snapcraft.io/chromium
65 |
66 | https://snapcraft.io/store
67 |
68 | https://snapcraft.io/docs
69 |
70 | ---
71 |
72 | ## Conclusion
73 |
74 | I hope my article solve your problem if you have any problem and then comment in the comment section.
75 |
76 | **For more updates, subscribe to our newsletter.**
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/posts/html-version-history.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["html", "html 5", "HTML History", "Html Version", "Who Create Html"]
4 | date : "2020-12-24T11:13:05Z"
5 | description : "HTML History Very Complicated. But I Try To Explain Very Easy Way."
6 | draft : false
7 | image : "images/HTML-Version-History.jpg"
8 | images : ["images/HTML-Version-History.jpg"]
9 | slug : "html-version-history"
10 | summary : "HTML History Very Complicated. But I Try To Explain Very Easy Way."
11 | tags : ["html", "html 5", "HTML History", "Html Version", "Who Create Html"]
12 | title : "HTML Version History?"
13 |
14 | ---
15 |
16 |
17 |
18 | According to Wikipedia, HTML was Created By _**Tim Berners-Lee** in **1991**._ Launch official standard HTML Version in December 1999.
19 |
20 | In 1989, Berners-Lee also created an Internet-based hypertext system._HTML Comes in many versions. But_ HTML 4.01 Widely Use HTML.
21 |
22 | ### History:
23 |
24 | * **HTML 2 : November 24, 1995,**
25 | * **HTML 3 : January 14, 1997,**
26 | * **HTML 4 : December 18, 1997,**
27 | * **HTML 5 : October 28, 2014,**
28 |
29 |
30 |
31 | ### HTML 1:
32 |
33 | The original version of HTML 1.0 Announcing with few greatly limited features. Use HTML 1, and You Never be a creation of a Good Looking website.
34 |
35 | ### HTML 2:
36 |
37 | HTML 2.0 then arrived and included all the HTML 1.0 plus several new features for web page design. Now Use HTML 2.0 You Design A Website.
38 |
39 | ### HTML 3:
40 |
41 | HTML 2.0 served its purpose very well, but many Programmers or designing web pages wanted more control over their web pages and more ways to mark up their text and enhance Website appearance And Look On Browser.
42 |
43 | ### HTML 4:
44 |
45 | In the early days, **_HTML 4.0_** was code-named **_COUGAR_**. This version introduces new functionality, most of which comes from the expired HTML 3.0 draft. W3C Recommendation Explorer has done a Good job in implementing the many New features Into HTML 4.0. After 4.0, One More HTML Version Come People Know as XHTML. Which More Popular.
46 |
47 | ### HTML 5:
48 |
49 | HTML 5 Now A standard version and secondly More Popular On Earth. HTML 5 Give Lots Of Tags Help To Browser Understand Text Format and Secondly Build Unique beautiful Website Design.
50 |
51 | ---
52 |
53 | ### Reference:
54 |
55 |
56 |
57 | http://www.codefreetutorial.com/learn-html/76-different-versions-of-html
58 |
59 | ---
60 |
61 |
62 |
63 | # Contact me
64 |
65 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
66 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
67 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
68 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/posts/keyboard-shortcut-keys-for-linux-terminal.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Linux", "Keyboard Shortcut", "Shortcut keys", "Linux Terminal"]
4 | date : "2021-01-08T08:05:57Z"
5 | description : "Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool"
6 | draft : false
7 | image : "images/Linux-Basic-Introduction--1-.png"
8 | images : ["images/Linux-Basic-Introduction--1-.png"]
9 | slug : "keyboard-shortcut-keys-for-linux-terminal"
10 | summary : "Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool"
11 | tags : ["Linux", "Keyboard Shortcut", "Shortcut keys", "Linux Terminal"]
12 | title : "All Keyboard Shortcuts For Linux Terminal?"
13 |
14 | ---
15 |
16 |
17 |
18 | ## Ctrl + Alt + T :
19 |
20 | Use This Shortcut Key to Open Linux Terminal Inside Your Laptop || Pc || Machine.
21 |
22 | ### All Shoctkeys In Linux Terminal:
23 |
24 | * **Ctrl + L**: Clears the screen, similar to the clear command in the terminal.
25 | * **Ctrl + S:** Stop all output to the screen. When You run Commands with longs output. But You don't stop it.
26 | * **Tab**: tab Help Automatic Fill Your Name.
27 | * **Ctrl + A**: Cursor goes to Start Of Word
28 | * **Ctrl + E**: Cursor goes to End Of Word.
29 | * **Ctrl + F**: Move the cursor forward one by one character.
30 | * **Ctrl + B**: Move the Cursor backward one by one Character.
31 | * **Alt + F**: Move the cursor forward one by one Word.
32 | * **Alt + B**: Move the Cursor backward one by one Word.
33 | * **Alt + U**: Change Character or Word Into Uppercase.
34 | * **Alt + l**: Change Character Or Word Into Lower Case.
35 | * **Alt + T**: Swap the last two words before the cursor.
36 | * **Alt + C**: Use Capitalize Words.
37 | * **Alt + D**: Delete to end of word starting at the cursor
38 | * **Ctrl + K**: Cut Word/Line from the current position to the end of the line. Also, adding it to the clipboard, use ctrl + y to paste it again.
39 | * **Ctrl + W**: Delete the word before the Cursor Position. Also, adding it to the clipboard, use ctrl + y paste on it.
40 | * **Ctrl + Y**: Paste the last thing from the clipboard that you cut recently.
41 | * **Ctrl + D**: Delete Character By Character.
42 | * **Ctrl + T**: Remove White Space.
43 | * **Ctrl + Shift + W**: close terminal tab.
44 | * **Ctrl + Shift + Q**: close the entire terminal.
45 | * **Shift+Ctrl + N**: Open New Window.
46 | * **Shift + Ctrl +T**: Open New Tab In Window.
47 | * **Shift + Ctrl + W**: Close Tab.
48 | * **Shift + Ctrl + Q**: Close Window.
49 | * **Shift + Ctrl + C**: Use For Copy Text Inside Terminal.
50 | * **Shift + Ctrl + V**: Paste Text Inside Terminal.
51 | * **Shift + Ctrl + +**: Zoom In.
52 | * **Shift + Ctrl + -**: Zoom Out
53 | * **Shift + Ctrl + )**: Zoom Reset
54 | * **Shift + Ctrl + I**: Add Name Off Each Open Tab.
55 |
56 | ### Note:
57 |
58 | If i Forget Some Keyboard Shortcuts, and You Do Not find them on this page so Tell me in the comment box.
59 |
60 | ---
61 |
62 | # Contact me
63 |
64 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
65 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
66 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
67 |
68 |
69 |
70 | ---
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/posts/npm-outdated-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["Npm"]
4 | date : "2022-04-18T11:00:00Z"
5 | description : "Npm outdate command help to find old packages in your current project."
6 | image : "images/npm-commands.png"
7 | images : ["images/npm-commands.png"]
8 | slug : "Learn-the-NPM-outdated-package-command"
9 | summary : "Npm outdate command help to find old packages in your current project."
10 | tags : ["Npm command", "NPM CLI", "Npm "]
11 | title : "Learn the NPM outdated package command?"
12 | draft : false
13 | ---
14 |
15 | Npm outdated command print the list of the outdated package in your project. In the project, there are a lot of packages to check which are outdated.
16 |
17 | There are two ways to check outdated packages
18 |
19 | 1. Manual ways
20 | 2. NPM command
21 |
22 | ## Manual ways
23 |
24 | In manual ways, you open `package.json` files and compare every package manually.
25 |
26 | ## NPM command
27 |
28 | Npm, provide inbuilt functionality for the outdated package. So simple, you run one npm command, and you get a list of all npm outdated packages in your terminal.
29 |
30 | ```cmd
31 | npm outdated
32 | ```
33 |
34 | ***
35 |
36 | #### Output
37 |
38 | ```cmd
39 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated
40 | Package Current Wanted Latest Location Depended by
41 | @next/swc-linux-arm64-gnu 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-gnu officialstaticblog
42 | @next/swc-linux-arm64-musl 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-musl officialstaticblog
43 | eslint 8.12.0 8.12.0 8.13.0 node_modules/eslint officialstaticblog
44 | eslint-config-next 12.1.4 12.1.4 12.1.5 node_modules/eslint-config-next officialstaticblog
45 | marked 4.0.12 4.0.14 4.0.14 node_modules/marked officialstaticblog
46 | next 12.1.4 12.1.4 12.1.5 node_modules/next officialstaticblog
47 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
48 | ```
49 |
50 | Npm provides lots more options or flags to improve the work experience.
51 |
52 | You can check all options with the npm help command.
53 |
54 | ```cmd
55 | npm outdated -help
56 | ```
57 |
58 | #### Output
59 |
60 | ```cmd
61 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -help
62 | npm outdated
63 | Check for outdated packages
64 | Usage:
65 | npm outdated [[<@scope>/] ...]
66 | Options:
67 | [-a|--all] [--json] [-l|--long] [-p|--parseable] [-g|--global]
68 | [-w|--workspace [-w|--workspace ...]]
69 | Run "npm help outdated" for more info
70 | ```
71 |
72 | The list of options we discuss in the articles is common, and everybody uses them daily.
73 |
74 | ## --all or -a
75 |
76 | \-all flags or options help print all the outdated packages. The list is based on your project increase or decrease. For an indication -all flags use colour.
77 |
78 | ```cmd
79 | Package Current Wanted Latest Location Depended by
80 | @humanwhocodes/config-array 0.9.5 0.9.5 0.10.2 node_modules/@humanwhocodes/config-array eslint
81 | @next/env 12.1.4 12.1.4 12.1.5 node_modules/@next/env next
82 | @next/eslint-plugin-next 12.1.4 12.1.4 12.1.5 node_modules/@next/eslint-plugin-next eslint-config-next
83 | @next/swc-android-arm-eabi MISSING 12.1.4 12.1.1-canary.0 - next
84 | @next/swc-android-arm64 MISSING 12.1.4 11.1.3-canary.104 - next
85 | @next/swc-darwin-arm64 MISSING 12.1.4 11.1.2 -
86 | .....
87 | ```
88 |
89 | ## --json
90 |
91 | \--json print the data in the terminal in json structure. It helps to visualise and debug the packages.json file more easily.
92 |
93 | ```json rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated --json
94 | {
95 | "@next/swc-linux-arm64-gnu": {
96 | "current": "12.1.4",
97 | "wanted": "12.1.5",
98 | "latest": "11.1.3-canary.104",
99 | "dependent": "officialstaticblog",
100 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/@next/swc-linux-arm64-gnu"
101 | },
102 | "@next/swc-linux-arm64-musl": {
103 | "current": "12.1.4",
104 | "wanted": "12.1.5",
105 | "latest": "11.1.3-canary.104",
106 | "dependent": "officialstaticblog",
107 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/@next/swc-linux-arm64-musl"
108 | },
109 | "eslint": {
110 | "current": "8.12.0",
111 | "wanted": "8.12.0",
112 | "latest": "8.13.0",
113 | "dependent": "officialstaticblog",
114 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/eslint"
115 | },
116 | "eslint-config-next": {
117 | "current": "12.1.4",
118 | "wanted": "12.1.4",
119 | "latest": "12.1.5",
120 | "dependent": "officialstaticblog",
121 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/eslint-config-next"
122 | },
123 | "marked": {
124 | "current": "4.0.12",
125 | "wanted": "4.0.14",
126 | "latest": "4.0.14",
127 | "dependent": "officialstaticblog",
128 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/marked"
129 | },
130 | "next": {
131 | "current": "12.1.4",
132 | "wanted": "12.1.4",
133 | "latest": "12.1.5",
134 | "dependent": "officialstaticblog",
135 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/next"
136 | }
137 | }
138 | ```
139 |
140 | ## --long or -l
141 |
142 | \-l flag help to provide extendable information of very npm packages.
143 |
144 | ```cmd rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -l
145 | Package Current Wanted Latest Location Depended by Package Type Homepage
146 | @next/swc-linux-arm64-gnu 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-gnu officialstaticblog dependencies
147 | @next/swc-linux-arm64-musl 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-musl officialstaticblog dependencies
148 | eslint 8.12.0 8.12.0 8.13.0 node_modules/eslint officialstaticblog devDependencies https://eslint.org
149 | eslint-config-next 12.1.4 12.1.4 12.1.5 node_modules/eslint-config-next officialstaticblog devDependencies https://github.com/vercel/next.js#readme
150 | marked 4.0.12 4.0.14 4.0.14 node_modules/marked officialstaticblog devDependencies https://marked.js.org
151 | next 12.1.4 12.1.4 12.1.5 node_modules/next officialstaticblog dependencies https://nextjs.org
152 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
153 | ```
154 |
155 | ## -g or --global
156 |
157 | The global flag help print all the global package currently installed on your machine or laptop.
158 |
159 | ```cmd rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -g
160 | Package Current Wanted Latest Location Depended by
161 | expo-cli 4.12.11 5.3.1 5.3.1 node_modules/expo-cli global
162 | npm 8.3.0 8.7.0 8.7.0 node_modules/npm global
163 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
164 | ```
165 |
166 | ## -w or --workspace
167 |
168 | workspace print all outdated package lists in your workspace
169 |
170 | ```cmd
171 | npm outdated -w
172 | ```
173 |
174 | ***
175 |
176 | References
177 |
178 | [https://docs.npmjs.com/cli/v8/commands/npm-outdated#synopsis](https://docs.npmjs.com/cli/v8/commands/npm-outdated#synopsis "https://docs.npmjs.com/cli/v8/commands/npm-outdated#synopsis")
--------------------------------------------------------------------------------
/posts/text-highlighting-in-html-5.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | categories : ["html", "html 5", "html tutorial", "Text Highlighting", "text highlighting in html", "html for beginner"]
4 | date : "2020-12-28T14:09:38Z"
5 | description : "Mark tag Help to High Lighting text in HTML 5"
6 | draft : false
7 | image : "images/Text-Highlighting-In-HTML-5.png"
8 | images : ["images/Text-Highlighting-In-HTML-5.png"]
9 | slug : "text-highlighting-in-html-5"
10 | summary : "Mark tag Help to High Lighting text in HTML 5 "
11 | tags : ["html", "html 5", "html tutorial", "Text Highlighting", "text highlighting in html", "html for beginner"]
12 | title : "Text Highlighting In HTML 5?"
13 |
14 | ---
15 |
16 |
17 |
18 | Text Highlighting in HTML 5, You Highlight the Text in a Paragraph heading and use it inside another tag. Add some Color Help Of CSS. So You can Use ` ` tag In `