9 | ---
10 |
11 | Npm, install command help to install dependencies and devDependencies base on package.json and package-lock.json file.
12 |
13 | **The simple word npm install command help to download the package from** [**npmjs.org**](https://www.npmjs.com/)**.**
14 |
15 | ```cmd
16 | npm install 
10 | ---
11 |
12 | In this Next Series, we Learn How to add CSS's own Project with Easy Steps.
13 |
14 | Good News is that Next.js provides custom CSS functionality. You Use The next.js plugin inside your project and use it.
15 |
16 | ## What's Next.js?
17 |
18 | Make sure Read Basic Introduction About Next.js #SeriesStart 💕
19 |
20 | [https://officialrajdeepsingh.dev/what-is-next.js/](https://officialrajdeepsingh.dev/what-is-next.js/ "https://officialrajdeepsingh.dev/what-is-next.js/")
21 |
22 | ***
23 |
24 | ## New Update:
25 |
26 | Next.js Version 9.3 **Support CSS Global Stylesheets.** Now you add CSS directly Import `.css` files as global stylesheets.
27 |
28 | ```javascript
29 | import './style.css'
30 | ```
31 |
32 | ***
33 |
34 | **Go To Github Download or Use Npm:**
35 |
36 | ```javascript
37 | npm install --save @zeit/next-css
38 | or
39 | yarn add @zeit/next-css
40 | ```
41 |
42 | ***
43 |
44 | Create an `next.config.js` At the root of your project
45 |
46 | ## Default:
47 |
48 | default config use for import CSS Global stylesheet in custom _app.js
49 |
50 | ```javascript
51 | const withCSS = require('@zeit/next-css')
52 | module.exports = withCSS({})
53 | ```
54 |
55 | ## Custom:
56 |
57 | Custom config used for import CSS in other Components like header, footer like so.
58 |
59 | ```javascript
60 | const withCSS = require('@zeit/next-css')
61 | module.exports = withCSS({
62 | cssModules: true // After true than use import statement in next.js
63 | })
64 | ```
65 |
66 | ***
67 |
68 | ## How To add Global CSS:
69 |
70 | 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
71 |
72 | ```javascript
73 | import '../styles.css'
74 | or
75 | import '../styles.scss'
76 | // This default export is required in a new `pages/_app.js` file.
77 | export default function MyApp({ Component, pageProps }) {
78 | return 
9 |
10 | ---
11 |
12 |
13 |
14 | In Raspberry pi 4, you take the screenshot help of two software. The first is scort, and the second is Gnome Screenshot.
15 |
16 | I'm personally recommended you use Gnome Screenshot. Gnome Screenshot provides a graphical interface. You use a graphical interface to take screenshots very easily.
17 |
18 | 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.
19 |
20 | ### Install Gnome Screenshot in Raspbian or Raspberry pi 4:
21 |
22 | **let start it:**
23 |
24 | The Raspi 4 does not provide by default Gnome Screenshot.
25 |
26 | Firstly Update your raspberry pi 4. this is a compulsory step for installing Gnome Screenshot.
27 |
28 | ```cmd
29 | sudo apt update && sudo apt upgrade
30 | ```
31 |
32 | Your update and upgrade command run successfully. Now you install Gnome Screenshot following command.
33 |
34 | ```cmd
35 | sudo apt install gnome-screenshot
36 | ```
37 |
38 | Now you can find Gnome Screenshot in your accessories menu, listed as "Screenshot."
39 |
40 | 
41 |
42 |
43 | 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.
44 |
45 | 
46 |
47 |
48 | ---
49 |
50 | ### Uninstall Gnome Screenshot:
51 |
52 | In some cases, you may uninstall the Gnome Screenshot. so follow this command
53 |
54 | ```cmd
55 | sudo apt-get remove --purge gnome-screenshot
56 | ```
57 |
58 | ---
59 |
60 | # Contact me
61 |
62 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
63 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
64 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/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 | publish_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 | og:image : "images/the-snap-store.png"
7 | tags : ["Raspberry pi 4", "snapcraft", "Snap store", "Linux", "Binary"]
8 | title : "How to check the snap store package available for raspberry pi 4 or not?"
9 | cover_html: 
10 |
11 | ---
12 |
13 |
14 | Ubuntu built the snap store package Eco-system. The Snap store help to distribute your Linux base application and software across the Linux distro.
15 |
16 | For checking the binary, you do not need any command. You need only two things. First is a web browser and a mouse.
17 |
18 | 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.
19 |
20 |
21 |
22 | **There is two way to check the package binary is available for raspberry pi 4 or not.**
23 |
24 | 1. First way
25 | 2. Second way
26 |
27 |
28 |
29 | > In this article, I use the snap chromium package for example purpose.
30 |
31 |
32 | ## First way
33 |
34 | 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.
35 |
36 | * First step
37 | * Second step
38 |
39 | ### First step
40 |
41 | 
42 |
43 |
44 |
45 | ### Second step
46 |
47 | 
48 |
49 |
50 | ## Second way
51 |
52 | In a second way, you scroll down the page, go to the Linux distribution section, and check all the Linux distributions.
53 |
54 | 
55 |
56 |
57 | ---
58 |
59 | ### Reference
60 |
61 | https://snapcraft.io/chromium
62 |
63 | https://snapcraft.io/store
64 |
65 | https://snapcraft.io/docs
66 |
67 | ---
68 |
69 | ## Conclusion
70 |
71 | I hope my article solve your problem if you have any problem and then comment in the comment section.
72 |
73 | **For more updates, subscribe to our newsletter.**
74 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/posts/html-version-history.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | publish_date : "2020-12-24T11:13:05Z"
4 | description : "HTML History Very Complicated. But I Try To Explain Very Easy Way."
5 | og:image : "images/HTML-Version-History.jpg"
6 | tags : ["html", "html 5", "HTML History", "Html Version", "Who Create Html"]
7 | title : "HTML Version History?"
8 | cover_html: 
9 | ---
10 |
11 |
12 |
13 | According to Wikipedia, HTML was Created By _**Tim Berners-Lee** in **1991**._ Launch official standard HTML Version in December 1999.
14 |
15 | In 1989, Berners-Lee also created an Internet-based hypertext system._HTML Comes in many versions. But_ HTML 4.01 Widely Use HTML.
16 |
17 | ### History:
18 |
19 | * **HTML 2 : November 24, 1995,**
20 | * **HTML 3 : January 14, 1997,**
21 | * **HTML 4 : December 18, 1997,**
22 | * **HTML 5 : October 28, 2014,**
23 |
24 |
25 |
26 | ### HTML 1:
27 |
28 | 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.
29 |
30 | ### HTML 2:
31 |
32 | 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.
33 |
34 | ### HTML 3:
35 |
36 | 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.
37 |
38 | ### HTML 4:
39 |
40 | 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.
41 |
42 | ### HTML 5:
43 |
44 | 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.
45 |
46 | ---
47 |
48 | ### Reference:
49 |
50 |
51 |
52 | http://www.codefreetutorial.com/learn-html/76-different-versions-of-html
53 |
54 | ---
55 |
56 |
57 |
58 | # Contact me
59 |
60 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
61 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
62 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/posts/keyboard-shortcut-keys-for-linux-terminal.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | publish_date : "2021-01-08T08:05:57Z"
4 | description : "Linux Keyboard Help To Enhance Your Working Speed Inside Command Tool"
5 | og:image : "images/Linux-Basic-Introduction--1-.png"
6 | tags : ["Linux", "Keyboard Shortcut", "Shortcut keys", "Linux Terminal"]
7 | title : "All Keyboard Shortcuts For Linux Terminal?"
8 | cover_html: 
9 | ---
10 |
11 | ## Ctrl + Alt + T :
12 |
13 | Use This Shortcut Key to Open Linux Terminal Inside Your Laptop || Pc || Machine.
14 |
15 | ### All Shoctkeys In Linux Terminal:
16 |
17 | * **Ctrl + L**: Clears the screen, similar to the clear command in the terminal.
18 | * **Ctrl + S:** Stop all output to the screen. When You run Commands with longs output. But You don't stop it.
19 | * **Tab**: tab Help Automatic Fill Your Name.
20 | * **Ctrl + A**: Cursor goes to Start Of Word
21 | * **Ctrl + E**: Cursor goes to End Of Word.
22 | * **Ctrl + F**: Move the cursor forward one by one character.
23 | * **Ctrl + B**: Move the Cursor backward one by one Character.
24 | * **Alt + F**: Move the cursor forward one by one Word.
25 | * **Alt + B**: Move the Cursor backward one by one Word.
26 | * **Alt + U**: Change Character or Word Into Uppercase.
27 | * **Alt + l**: Change Character Or Word Into Lower Case.
28 | * **Alt + T**: Swap the last two words before the cursor.
29 | * **Alt + C**: Use Capitalize Words.
30 | * **Alt + D**: Delete to end of word starting at the cursor
31 | * **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.
32 | * **Ctrl + W**: Delete the word before the Cursor Position. Also, adding it to the clipboard, use ctrl + y paste on it.
33 | * **Ctrl + Y**: Paste the last thing from the clipboard that you cut recently.
34 | * **Ctrl + D**: Delete Character By Character.
35 | * **Ctrl + T**: Remove White Space.
36 | * **Ctrl + Shift + W**: close terminal tab.
37 | * **Ctrl + Shift + Q**: close the entire terminal.
38 | * **Shift+Ctrl + N**: Open New Window.
39 | * **Shift + Ctrl +T**: Open New Tab In Window.
40 | * **Shift + Ctrl + W**: Close Tab.
41 | * **Shift + Ctrl + Q**: Close Window.
42 | * **Shift + Ctrl + C**: Use For Copy Text Inside Terminal.
43 | * **Shift + Ctrl + V**: Paste Text Inside Terminal.
44 | * **Shift + Ctrl + +**: Zoom In.
45 | * **Shift + Ctrl + -**: Zoom Out
46 | * **Shift + Ctrl + )**: Zoom Reset
47 | * **Shift + Ctrl + I**: Add Name Off Each Open Tab.
48 |
49 | ### Note:
50 |
51 | If i Forget Some Keyboard Shortcuts, and You Do Not find them on this page so Tell me in the comment box.
52 |
53 | ---
54 |
55 | # Contact me
56 |
57 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
58 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh)
59 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
60 |
61 |
62 |
63 | ---
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/posts/npm-outdated-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | publish_date : "2022-04-18T11:00:00Z"
4 | description : "Npm outdate command help to find old packages in your current project."
5 | og:image : "images/npm-commands.png"
6 | tags : ["Npm command", "NPM CLI", "Npm "]
7 | title : "Learn the NPM outdated package command?"
8 | cover_html: 
9 | ---
10 |
11 | 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.
12 |
13 | There are two ways to check outdated packages
14 |
15 | 1. Manual ways
16 | 2. NPM command
17 |
18 | ## Manual ways
19 |
20 | In manual ways, you open `package.json` files and compare every package manually.
21 |
22 | ## NPM command
23 |
24 | 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.
25 |
26 | ```cmd
27 | npm outdated 
9 |
10 | ---
11 |
12 |
13 |
14 | 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 `` tag very easily. 15 | 16 | **Syntax:** 17 | 18 | ```html 19 | 20 | 21 | ``` 22 | 23 | Mark tag by default CSS By Chrome Browser. 24 | 25 | ```css 26 | mark { 27 | background-color: yellow; 28 | color: black; 29 | } 30 | ``` 31 | 32 | 33 | 34 | **Example:** 35 | 36 | ```html 37 | 38 | 39 |
40 | 41 | 42 |we are write article that contains the Mark tag for Highlighting the text. you will make it easier to see it.
53 | 54 | 55 | ``` 56 | 57 | --- 58 | 59 | # Contact me 60 | 61 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/) 62 | * [https://medium.com/officialrajdeepsingh](https://medium.com/officialrajdeepsingh) 63 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com) 64 | 65 | 66 | 67 | --- 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /posts/title-tag-in-html-5.md: -------------------------------------------------------------------------------- 1 | --- 2 | author : "Rajdeep Singh" 3 | publish_date : "2020-12-25T10:09:58Z" 4 | description : "Title tag display page information in the browser toolbar." 5 | og:image : "assets/images/Title-tag-In-HTML-5.jpg" 6 | tags : ["html", "html 5", "html for beginner", "html tutorial", "title tag", "html title tag"] 7 | title : "Title tag In HTML 5?" 8 | cover_html:
9 | ---
10 |
11 |
12 | Title tag Use Display Page Information In Web browser On Top. The title is also Use In the Body tag.Title tag Provided a title for the Page When You Added to Favorites in The Browser. Title Tag also Displays title Information for the Page in Search Engine Results
13 |
14 | **Syntax:**
15 |
16 | ```html
17 | 
10 | ---
11 |
12 |
13 |
14 | ****Next.js**** is a ****basically**** JavaScript ****framework**** build with ****react js****, ****webpack****, and ****babel****. Next.js helps the ****developer**** create a ****static generation**** (SSG) and ****server-side rendering**** (SSR) website easily.
15 |
16 | ZEIT builds Next.js. But ****recently,**** 1 Month ago, ****ZEIT**** purchase by ****[Vercel](https://vercel.com/)****. That ****means**** ZEIT is now ****Vercel****.
17 |
18 | https://vercel.com/blog/zeit-is-now-vercel
19 |
20 | Next.js ****helping**** to ****optimize**** your ****website****. Recently lots of ****developers working**** with ****Next.js.****
21 |
22 | ## Note:
23 |
24 | ****Next****.js, ****Nuxt****.js, and ****Nest****.js are ****different**** frameworks || library.
25 |
26 | ---
27 |
28 | # Feature:
29 |
30 | Next.js ****Feature**** help to developer ****solve**** the major ****problem**** in ****web development.****
31 |
32 | 1. ****Pre-Rendering Support SSG And SSR****
33 | 2. ****CSS-in-JS****
34 | 3. ****Zero Configuration****
35 | 4. ****Ready for Production****
36 |
37 |
38 |
39 | ---
40 |
41 | # Installation:
42 |
43 | ****install**** next in your ****machine**** with two ways
44 |
45 | 1. Manual Setup
46 | 2. Automatically Setup
47 |
48 | ---
49 |
50 | ## Manual Setup:
51 |
52 | ****Install**** `next`, `react` and `react-dom` in your ****project****:
53 |
54 | ```cmd
55 | npm install next react react-dom
56 | ```
57 |
58 | ****Open**** `package.json` and ****add**** the following `scripts`:
59 |
60 | ```javascript
61 | "scripts": {
62 | "dev": "next",
63 | "build": "next build",
64 | "start": "next start"
65 | }
66 | ```
67 |
68 | ****After**** Installation run ****script,**** use this ****Cmd****
69 |
70 | ```cmd
71 | npm run dev
72 |
73 | ```
74 |
75 | ****Now**** Visit this ****URL**** in ****your browser**** [http://localhost:3000/](http://localhost:3000/). ****your webserver**** Now Work 😃
76 |
77 | ---
78 |
79 | ## Automatically Setup:
80 |
81 | We highly ****recommend**** a ****beginner person**** to ****create a new Next.js**** app using this ****command**** `create-next-app` , this ****cmd**** Setup ****everything automatically**** for ****you****.
82 |
83 | ```cmd
84 | npm init next-app
85 | # or
86 | yarn create next-app
87 | ```
88 |
89 | After the ****installation**** is complete.
90 |
91 | ```cmd
92 | cd path // make sure you same folder other wish no use
93 | npm run dev // that cmd open create server and run your default browser http://localhost:3000/
94 | ```
95 |
96 | Start the ****development**** server. After Try ****editing**** `pages/index.js` and see the ****result**** on your ****browser****.
97 |
98 | ## Note:
99 |
100 | ****Index.js**** default next.js ****router**** path.
101 |
102 | ---
103 |
104 | # Next.js Youtube Course:
105 |
106 | On ****youtube**, a few YouTubers provide tutorials on next.js. In 2021 lots of YouTubers show interest in next.js.**
107 |
108 |
109 |
110 | ## 1. Bruno Antunes:
111 |
112 | ****Bruno Antunes**** provides ****a great**** path for ****Next****.js. That person ****creates**** a lot of ****tutorials**** on it **. Make ****** sure you ****watch**** it.
113 |
114 |
115 |
116 | ## Youtube PlayList:
117 |
118 |
119 |
120 | ---
121 |
122 | ## 2. Imran Sayed — Codeytek Academy:
123 |
124 | ****Imran Sayed**** is a Great ****developer**** my ****opinion****. Imran stayed to provide a very big contribution in next.js on youtube. Imran provides you a ****learning**** path in next.js || ****Wordpress API****|| ****apollo**** || ****graphql****.
125 |
126 |
127 |
128 | ## Youtube Playlist:
129 |
130 |
131 |
132 | ---
133 |
134 | ## Note:
135 |
136 | Tell me about other Youtubers who work with Next.js. Then mention in ****Comment** section website**:
137 |
138 | https://nextjs.org/docs/getting-started
139 |
140 | https://www.geeksforgeeks.org/next-js-introduction/
141 |
142 | https://www.freecodecamp.org/news/an-introduction-to-next-js-for-everyone-507d2d90ab54/
143 |
144 | ---
145 |
146 | # Read My Other Blog Medium:
147 |
148 | https://medium.com/officialrajdeepsingh/best-javascript-full-tutorial-on-youtube-117e08ab357a
149 |
150 | https://medium.com/officialrajdeepsingh/how-to-read-local-json-file-in-react-js-564125235fc7
151 |
152 | ---
153 |
154 | ## Conclusion:
155 |
156 | My ****Opinion**** next.js. Great ****Library**** To help the ****developer**** create ****server-side rendering**** (SSR) with one ****function**** || ****method**** in next.js. My big ****surprise When**** I start work with ****Wordpress**** and ****graphql. Next.js**** Provide More ****stability as compare to**** other ****React.js**** frameworks.
157 |
158 | ****Now**** My first ****choice is Nextjs**** in ****frontend****-****developer.****
159 |
160 | ---
161 |
162 | # Contact me
163 |
164 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
165 | * [https://www.facebook.com/groups/JavaScriptcode/](https://www.facebook.com/groups/JavaScriptcode/)
166 | * [https://www.facebook.com/groups/pythoncodejoin/](https://www.facebook.com/groups/pythoncodejoin/)
167 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
168 |
169 | # Thanks for Reading 😆
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | To create a static markdown blog with deno. You need a [blog module](https://deno.land/x/blog) to create a static blog with deno. I write full article on a static markdown blog.
2 |
3 |
4 | ## How to play with deno-markdown-blog
5 | Firstly Clone repo `git clone https://github.com/officialrajdeepsingh/deno-markdown-blog.git` and run local development server with `deno task dev` command. For running the local and production development, you need create a `.env` file and add `URL` environment variable. In the `URL` environment variable, you need a production ready domain.
6 |
7 | ```bash
8 | // .env
9 |
10 | URL=https://deno-markdown-blog.deno.dev/
11 | ```
12 |
13 | The `URL` environment variable help to load you asset,image and icon with correct path in your blog. Understand with with a example
14 |
15 | ```typescript
16 | // main.tsx
17 |
18 | blog({
19 | avatar:`${Deno.env.get("URL")}assets/logos/profile.jpg`,
20 | favicon: `${Deno.env.get("URL")}favicon.ico`,
21 | cover:`${Deno.env.get("URL")}assets/logos/backgroundbanner.png`,
22 | ogImage: {
23 | url: `${Deno.env.get("URL")}assets/logos/Frame.png`,
24 | twitterCard:"summary_large_image"
25 | },
26 | });
27 |
28 |
29 | ```
30 |
31 | ## DEMO
32 | 
33 |
--------------------------------------------------------------------------------