├── .env ├── .vscode └── settings.json ├── assets ├── images │ ├── HTML-Version-History.jpg │ ├── How-to-capture-screenshots-in-Raspberry-PI-4.png │ ├── Linux-Basic-Introduction--1-.png │ ├── Text-Highlighting-In-HTML-5.png │ ├── Title-tag-In-HTML-5.jpg │ ├── firstway-2.png │ ├── firstway.png │ ├── geenome.png │ ├── gnome-screenshots.png │ ├── next.js-add-css-code.jpg │ ├── next.js.png │ ├── npm-commands.png │ ├── npm-init-command-1.png │ ├── secondway.png │ └── the-snap-store.png └── logos │ ├── backgroundbanner.png │ ├── denoblog.png │ ├── denoblogdemo.gif │ └── profile.jpg ├── components ├── Section.jsx └── header.jsx ├── deno.jsonc ├── favicon.ico ├── import_map.json ├── main.tsx ├── posts ├── hello-world.md ├── how-is-npm-install-command.md ├── how-to-add-css-in-next-js.md ├── how-to-capture-screenshots-in-raspberry-pi-4.md ├── how-to-check-the-snap-store-package-available-for-raspberry-pi-4-or-not.md ├── html-version-history.md ├── keyboard-shortcut-keys-for-linux-terminal.md ├── npm-outdated-command.md ├── text-highlighting-in-html-5.md ├── title-tag-in-html-5.md └── what-is-next-js.md └── readme.md /.env: -------------------------------------------------------------------------------- 1 | URL=https://deno-markdown-blog.deno.dev/ -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": true, 3 | "deno.unstable": true 4 | } -------------------------------------------------------------------------------- /assets/images/HTML-Version-History.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/HTML-Version-History.jpg -------------------------------------------------------------------------------- /assets/images/How-to-capture-screenshots-in-Raspberry-PI-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/How-to-capture-screenshots-in-Raspberry-PI-4.png -------------------------------------------------------------------------------- /assets/images/Linux-Basic-Introduction--1-.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/Linux-Basic-Introduction--1-.png -------------------------------------------------------------------------------- /assets/images/Text-Highlighting-In-HTML-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/Text-Highlighting-In-HTML-5.png -------------------------------------------------------------------------------- /assets/images/Title-tag-In-HTML-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/Title-tag-In-HTML-5.jpg -------------------------------------------------------------------------------- /assets/images/firstway-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/firstway-2.png -------------------------------------------------------------------------------- /assets/images/firstway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/firstway.png -------------------------------------------------------------------------------- /assets/images/geenome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/geenome.png -------------------------------------------------------------------------------- /assets/images/gnome-screenshots.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/gnome-screenshots.png -------------------------------------------------------------------------------- /assets/images/next.js-add-css-code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/next.js-add-css-code.jpg -------------------------------------------------------------------------------- /assets/images/next.js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/next.js.png -------------------------------------------------------------------------------- /assets/images/npm-commands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/npm-commands.png -------------------------------------------------------------------------------- /assets/images/npm-init-command-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/npm-init-command-1.png -------------------------------------------------------------------------------- /assets/images/secondway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/secondway.png -------------------------------------------------------------------------------- /assets/images/the-snap-store.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/images/the-snap-store.png -------------------------------------------------------------------------------- /assets/logos/backgroundbanner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/logos/backgroundbanner.png -------------------------------------------------------------------------------- /assets/logos/denoblog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/logos/denoblog.png -------------------------------------------------------------------------------- /assets/logos/denoblogdemo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/logos/denoblogdemo.gif -------------------------------------------------------------------------------- /assets/logos/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/officialrajdeepsingh/deno-markdown-blog/8cccad9023028012dfb708c1f3fabc0787d849e4/assets/logos/profile.jpg -------------------------------------------------------------------------------- /components/Section.jsx: -------------------------------------------------------------------------------- 1 | /** @jsx h */ 2 | /** @jsxFrag Fragment */ 3 | 4 | import { Fragment, h } from "blog"; 5 | 6 | export function Section() { 7 | return ( 8 |
9 |
10 |
11 |
12 | Read more articles related frontend development 13 |
14 | 19 | Read more 20 | 21 |
22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /components/header.jsx: -------------------------------------------------------------------------------- 1 | /** @jsx h */ 2 | /** @jsxFrag Fragment */ 3 | 4 | import { h,Fragment } from "blog"; 5 | 6 | 7 | export function Header() { 8 | 9 | 10 | return ( 11 |
12 |
13 | 64 |
65 |
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: npm command 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: How To Add CSS In Next js 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: How to capture screenshots in Raspberry PI 4 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 | ![sceenshot](assets/images/geenome.png) 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 | ![interface look like](assets/images/gnome-screenshots.png) 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: How to check the snap store package available for raspberry pi 4 or not? 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 | ![version drop-down list](assets/images/firstway.png) 42 | 43 | 44 | 45 | ### Second step 46 | 47 | ![show architecture drop-down list](assets/images/firstway-2.png) 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 | ![Linux distribution section](assets/images/secondway.png) 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: HTML Version History 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: All Keyboard Shortcuts For Linux Terminal 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: Learn the NPM outdated package command 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: Text Highlighting In HTML 5 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 | Document 43 | 50 | 51 | 52 |

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: Title tag In HTML 5 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: What is nextjs 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 | ![DEMO](./assets//logos/denoblog.png) 33 | --------------------------------------------------------------------------------