66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/deno.jsonc:
--------------------------------------------------------------------------------
1 | {
2 | "tasks": {
3 | "dev": "deno run --allow-net --allow-read --allow-env --watch --no-clear-screen main.tsx --dev",
4 | "serve": "deno run --allow-net --allow-read --allow-env --no-check main.tsx"
5 | },
6 | "importMap": "./import_map.json"
7 | }
8 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/favicon.ico
--------------------------------------------------------------------------------
/import_map.json:
--------------------------------------------------------------------------------
1 | {
2 | "imports": {
3 | "blog": "https://deno.land/x/blog@0.5.0/blog.tsx"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/main.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx h */
2 |
3 | import blog, { h } from "blog";
4 | import { Section } from './components/Section.jsx';
5 | import "https://deno.land/x/dotenv@v3.2.0/load.ts";
6 |
7 |
8 | blog({
9 | author: "Rajdeep singh",
10 | title: "Hello, my name is Rajdeep Singh",
11 | description: "Nice to meet you",
12 | avatar:`${Deno.env.get("URL")}assets/logos/profile.jpg`,
13 | avatarClass: "rounded-full",
14 | coverTextColor:"white",
15 | links: [
16 | { title: "Email", url: "mailto:officialrajdeepsingh@gmail.com" },
17 | { title: "GitHub", url: "https://github.com/officialrajdeepsingh" },
18 | { title: "Twitter", url: "https://twitter.com/Official_R_deep" },
19 | { title: "Linkedin", url: "https://www.linkedin.com/in/officalrajdeepsingh/" },
20 | ],
21 | lang: "en",
22 | favicon: `${Deno.env.get("URL")}favicon.ico`,
23 | section: ,
24 | theme:"auto",
25 | cover:`${Deno.env.get("URL")}assets/logos/backgroundbanner.png`,
26 | ogImage: {
27 | url: `${Deno.env.get("URL")}assets/logos/Frame.png`,
28 | twitterCard:"summary_large_image"
29 | },
30 | style:".markdown-body ul, .markdown-body ol { list-style: disc !important;}"
31 | });
32 |
--------------------------------------------------------------------------------
/posts/hello-world.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hello world!
3 | publish_date: 2022-09-05
4 | snippet: "Hello world blog post"
5 | author: "Rajdeep Singh"
6 | cover_html:
7 | allow_iframes: true
8 | ---
9 |
10 | First blog post create with deno blog package. It is amazing package to create markdown blog with tailwind css.
11 |
12 |
13 |
14 |
15 | ```javascript
16 | console.log("hello world")
17 | ```
18 |
--------------------------------------------------------------------------------
/posts/how-is-npm-install-command.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh , Rajvinder singh"
3 | publish_date : "2022-03-20T13:09:24Z"
4 | description : "Npm install command help to install package from npmjs.org"
5 | og:image : "assets/images/npm-init-command-1.png"
6 | tags : ["npm-test", "npm-cli", "npm install command"]
7 | title : "What is the npm install command?"
8 | cover_html:
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
17 |
18 | or
19 |
20 | npm i
21 |
22 | or
23 |
24 | npm add
25 | ```
26 |
27 | 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.
28 |
29 | > I cover the most important options which you use every day. npm I, npm install, and npm add is one command.
30 |
31 | 1. Syntax
32 | 2. Options or Flags
33 |
34 | ## Syntax
35 |
36 | 1. npm install
37 | 2. npm package **``**
38 | 3. npm install **`@`**
39 | 4. npm install **`@`**
40 | 5. npm install **``**
41 |
42 | ### npm install
43 |
44 | 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.
45 |
46 | ```json
47 | {
48 | "name": "my-app",
49 | "version": "0.1.0",
50 | "private": true,
51 | "scripts": {
52 | "dev": "next dev",
53 | "build": "next build",
54 | "start": "next start",
55 | "lint": "next lint"
56 | },
57 | "dependencies": {
58 | "next": "12.1.0",
59 | "react": "17.0.2",
60 | "react-dom": "17.0.2"
61 | },
62 | "devDependencies": {
63 | "eslint": "8.11.0",
64 | "eslint-config-next": "12.1.0"
65 | }
66 | }
67 | ```
68 |
69 | 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.
70 |
71 | ### npm package **``**
72 |
73 | 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.
74 |
75 | 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.
76 |
77 | ```cmd
78 | npm install react@latest
79 | ```
80 |
81 | ***
82 |
83 | ```json
84 | {
85 | "name": "my-app",
86 | "version": "0.1.0",
87 | "private": true,
88 | "scripts": {},
89 | "dependencies": {
90 | "react": "17.0.2"
91 | },
92 |
93 | }
94 | ```
95 |
96 | ### npm install `@`
97 |
98 | 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/).
99 |
100 | 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.
101 |
102 | By default, npm provide the latest tag for every npm package. The latest tag means the current version of the package.
103 |
104 | ```cmd
105 | npm install react-dom@latest
106 | ```
107 |
108 | ### npm install `@`
109 |
110 | 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.
111 |
112 | ```cmd
113 | npm install react@16.1.1
114 | ```
115 |
116 | ### npm install ``
117 |
118 | You can install the package base on your git repo URL. npm install command helps to install the package directly from Github.
119 |
120 | ```cmd
121 | npm install https://github.com/facebook/react.git
122 | ```
123 |
124 | > Firstly install code locally from GitHub and then run npm install command inside folder code folder.
125 |
126 | ## Options or Flags
127 |
128 | 1. -g option
129 | 2. -P or --save-prod option
130 | 3. -D or --save-dev option
131 |
132 | ### -g option
133 |
134 | \-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.
135 |
136 | Globally means you access package cli anywhere in laptop.
137 |
138 | ```cmd
139 | npx -g create-react-app
140 | ```
141 |
142 | ### -P or --save-prod option
143 |
144 | The -P or --save-prod option helps add your package into the production or dependencies section in the package.json file.
145 |
146 | By default, the npm install command adds the package into production.
147 |
148 | ```cmd
149 | npm install -P next@latest
150 |
151 | or
152 |
153 | npm install --save-prod next@latest
154 | ```
155 |
156 | ***
157 |
158 | ```json
159 | {
160 | "name": "my-app",
161 | "version": "0.1.0",
162 | "private": true,
163 | "scripts": {
164 | "dev": "next dev",
165 | "build": "next build",
166 | "start": "next start",
167 | "lint": "next lint"
168 | },
169 | "dependencies": {
170 | "next": "^12.1.0",
171 | "react": "17.0.2",
172 | "react-dom": "17.0.2"
173 | }
174 | }
175 | ```
176 |
177 | ### -D or --save-dev option
178 |
179 | The -D or --save-dev option helps add your package into the devDependencies section in the package.json file.
180 |
181 | ```cmd
182 |
183 | npm install -D eslint@latest
184 |
185 | or
186 |
187 | npm install --save-dev eslint@latest
188 |
189 | ```
190 |
191 | ***
192 |
193 | ```json
194 | {
195 | "name": "my-app",
196 | "version": "0.1.0",
197 | "private": true,
198 | "scripts": {
199 | "dev": "next dev",
200 | "build": "next build",
201 | "start": "next start",
202 | "lint": "next lint"
203 | },
204 | "dependencies": {
205 | "next": "^12.1.0",
206 | "react": "17.0.2",
207 | "react-dom": "17.0.2"
208 | },
209 | "devDependencies": {
210 | "eslint": "8.11.0",
211 | "eslint-config-next": "12.1.0"
212 | }
213 | }
214 | ```
215 |
216 | ***
217 |
218 | ### References
219 |
220 | https://docs.npmjs.com/cli/v6/commands/npm-install
221 |
222 | ***
223 |
--------------------------------------------------------------------------------
/posts/how-to-add-css-in-next-js.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | publish_date : "2020-11-10T11:42:46Z"
4 | description : "Easy Ways Add CSS in Next.js #SeriesPart2"
5 | og:image : "assets/images/next.js-add-css-code.jpg"
6 | tags : ["Next.js", "Next", "Next.js Framework", "Next.js Tutorial", "React.js", "react.js tutorial"]
7 | title : "How To Add CSS In Next js?"
8 | allow_iframes: true
9 | cover_html:
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
79 | }
80 | ```
81 |
82 | ***
83 |
84 | # Demo:
85 |
86 |
87 |
88 | ***
89 |
90 | ## Reference:
91 |
92 | * https://nextjs.org/docs/basic-features/built-in-css-support
93 |
94 | * https://nextjs.org/blog/next-9-2
95 |
96 | * https://nextjs.org/blog/next-10
97 |
98 | ***
99 |
100 | # Contact me
101 |
102 | * [https://www.facebook.com/officialrajdeepsingh/](https://www.facebook.com/officialrajdeepsingh/)
103 | * [https://www.facebook.com/groups/JavaScriptcode/](https://www.facebook.com/groups/JavaScriptcode/)
104 | * [https://www.facebook.com/groups/pythoncodejoin/](https://www.facebook.com/groups/pythoncodejoin/)
105 | * [officialrajdeepsingh@gmail.com](mailto:officialrajdeepsingh@gmail.com)
--------------------------------------------------------------------------------
/posts/how-to-capture-screenshots-in-raspberry-pi-4.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | publish_date : "2021-01-24T12:26:07Z"
4 | description : "Raspi does not provide screenshots functionality by default. you use software and tool to take a screenshot in raspi."
5 | og:image : "images/How-to-capture-screenshots-in-Raspberry-PI-4.png"
6 | tags : ["Raspberry", "Raspi 4", "screensshots", "capture screen shots", "Gnome Screenshot", "install gnome screenshot"]
7 | title : "How to capture screenshots in Raspberry PI 4"
8 | cover_html:
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
28 | ```
29 |
30 | ***
31 |
32 | #### Output
33 |
34 | ```cmd
35 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated
36 | Package Current Wanted Latest Location Depended by
37 | @next/swc-linux-arm64-gnu 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-gnu officialstaticblog
38 | @next/swc-linux-arm64-musl 12.1.4 12.1.5 11.1.3-canary.104 node_modules/@next/swc-linux-arm64-musl officialstaticblog
39 | eslint 8.12.0 8.12.0 8.13.0 node_modules/eslint officialstaticblog
40 | eslint-config-next 12.1.4 12.1.4 12.1.5 node_modules/eslint-config-next officialstaticblog
41 | marked 4.0.12 4.0.14 4.0.14 node_modules/marked officialstaticblog
42 | next 12.1.4 12.1.4 12.1.5 node_modules/next officialstaticblog
43 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
44 | ```
45 |
46 | Npm provides lots more options or flags to improve the work experience.
47 |
48 | You can check all options with the npm help command.
49 |
50 | ```cmd
51 | npm outdated -help
52 | ```
53 |
54 | #### Output
55 |
56 | ```cmd
57 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -help
58 | npm outdated
59 | Check for outdated packages
60 | Usage:
61 | npm outdated [[<@scope>/] ...]
62 | Options:
63 | [-a|--all] [--json] [-l|--long] [-p|--parseable] [-g|--global]
64 | [-w|--workspace [-w|--workspace ...]]
65 | Run "npm help outdated" for more info
66 | ```
67 |
68 | The list of options we discuss in the articles is common, and everybody uses them daily.
69 |
70 | ## --all or -a
71 |
72 | \-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.
73 |
74 | ```cmd
75 | Package Current Wanted Latest Location Depended by
76 | @humanwhocodes/config-array 0.9.5 0.9.5 0.10.2 node_modules/@humanwhocodes/config-array eslint
77 | @next/env 12.1.4 12.1.4 12.1.5 node_modules/@next/env next
78 | @next/eslint-plugin-next 12.1.4 12.1.4 12.1.5 node_modules/@next/eslint-plugin-next eslint-config-next
79 | @next/swc-android-arm-eabi MISSING 12.1.4 12.1.1-canary.0 - next
80 | @next/swc-android-arm64 MISSING 12.1.4 11.1.3-canary.104 - next
81 | @next/swc-darwin-arm64 MISSING 12.1.4 11.1.2 -
82 | .....
83 | ```
84 |
85 | ## --json
86 |
87 | \--json print the data in the terminal in json structure. It helps to visualise and debug the packages.json file more easily.
88 |
89 | ```json rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated --json
90 | {
91 | "@next/swc-linux-arm64-gnu": {
92 | "current": "12.1.4",
93 | "wanted": "12.1.5",
94 | "latest": "11.1.3-canary.104",
95 | "dependent": "officialstaticblog",
96 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/@next/swc-linux-arm64-gnu"
97 | },
98 | "@next/swc-linux-arm64-musl": {
99 | "current": "12.1.4",
100 | "wanted": "12.1.5",
101 | "latest": "11.1.3-canary.104",
102 | "dependent": "officialstaticblog",
103 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/@next/swc-linux-arm64-musl"
104 | },
105 | "eslint": {
106 | "current": "8.12.0",
107 | "wanted": "8.12.0",
108 | "latest": "8.13.0",
109 | "dependent": "officialstaticblog",
110 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/eslint"
111 | },
112 | "eslint-config-next": {
113 | "current": "12.1.4",
114 | "wanted": "12.1.4",
115 | "latest": "12.1.5",
116 | "dependent": "officialstaticblog",
117 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/eslint-config-next"
118 | },
119 | "marked": {
120 | "current": "4.0.12",
121 | "wanted": "4.0.14",
122 | "latest": "4.0.14",
123 | "dependent": "officialstaticblog",
124 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/marked"
125 | },
126 | "next": {
127 | "current": "12.1.4",
128 | "wanted": "12.1.4",
129 | "latest": "12.1.5",
130 | "dependent": "officialstaticblog",
131 | "location": "/home/rajdeepsingh/Downloads/officialstaticblog/node_modules/next"
132 | }
133 | }
134 | ```
135 |
136 | ## --long or -l
137 |
138 | \-l flag help to provide extendable information of very npm packages.
139 |
140 | ```cmd rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -l
141 | Package Current Wanted Latest Location Depended by Package Type Homepage
142 | @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
143 | @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
144 | eslint 8.12.0 8.12.0 8.13.0 node_modules/eslint officialstaticblog devDependencies https://eslint.org
145 | 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
146 | marked 4.0.12 4.0.14 4.0.14 node_modules/marked officialstaticblog devDependencies https://marked.js.org
147 | next 12.1.4 12.1.4 12.1.5 node_modules/next officialstaticblog dependencies https://nextjs.org
148 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
149 | ```
150 |
151 | ## -g or --global
152 |
153 | The global flag help print all the global package currently installed on your machine or laptop.
154 |
155 | ```cmd rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$ npm outdated -g
156 | Package Current Wanted Latest Location Depended by
157 | expo-cli 4.12.11 5.3.1 5.3.1 node_modules/expo-cli global
158 | npm 8.3.0 8.7.0 8.7.0 node_modules/npm global
159 | rajdeepsingh@officialrajdeepsingh:~/Downloads/officialstaticblog$
160 | ```
161 |
162 | ## -w or --workspace
163 |
164 | workspace print all outdated package lists in your workspace
165 |
166 | ```cmd
167 | npm outdated -w
168 | ```
169 |
170 | ***
171 |
172 | References
173 |
174 | [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 | publish_date : "2020-12-28T14:09:38Z"
4 | description : "Mark tag Help to High Lighting text in HTML 5"
5 | og:image : "assets/images/Text-Highlighting-In-HTML-5.png"
6 | tags : ["html", "html 5", "html tutorial", "Text Highlighting", "text highlighting in html", "html for beginner"]
7 | title : "Text Highlighting In HTML 5?"
8 | cover_html:
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 `
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 | Heading With Title Tag
18 | ```
19 |
20 |
21 |
22 | You Use Title Tag Inside Body By Default Title tag Display None inside Browser.
23 |
24 | ```css
25 | title {
26 | display: none;
27 | }
28 | ```
29 |
30 |
31 |
32 | If you use the title tag shown in the browser, add CSS To Display Title In Browser.
33 |
34 | ```html
35 | Heading With Title Tag
36 | ```
37 |
38 | ---
39 |
40 | ### Example:
41 |
42 | ```html
43 |
44 |
45 |
46 |
47 | Index Page Information
48 |
49 |
50 |
51 | Heading With Title Tag
52 |
53 |
54 |
55 |
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/what-is-next-js.md:
--------------------------------------------------------------------------------
1 | ---
2 | author : "Rajdeep Singh"
3 | publish_date : "2020-11-08T13:10:48Z"
4 | description : "Basic Introduction About Next.js #SeriesStart"
5 | og:image : "assets/images/next.js.png"
6 | tags : ["Next.js", "Next.js Tutorial", "React.js", "React.js Framework", "javascript Framework", "Next", "Next.js Framework"]
7 | title : "What is Next.js?"
8 | allow_iframes: true
9 | cover_html:
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 |
--------------------------------------------------------------------------------