├── .circleci └── config.yml ├── .editorconfig ├── .eslintrc.js ├── .github ├── FUNDING.yml ├── desktop-preview.png ├── ipad-preview.png ├── mobile-preview.png └── workflows │ └── nuxtjs.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── settings.json ├── DEV-README.md ├── LICENSE ├── README.md ├── assets └── css │ └── tailwind.css ├── components ├── FeaturedPosts.vue ├── NewsLetter.vue ├── NuxtLogo.vue ├── TheBanner.vue ├── TheFooter.vue ├── TheHeader.vue ├── TheProfile.vue ├── TheStats.vue └── Tutorial.vue ├── content ├── hello.md └── post │ ├── post1.md │ ├── post2.md │ ├── post3.md │ ├── post4.md │ ├── post5.md │ ├── post6.md │ └── post7.md ├── layouts └── default.vue ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── _slug.vue ├── about.vue ├── blog.vue ├── contact.vue └── index.vue ├── static └── favicon.ico ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | jobs: 4 | ci: 5 | docker: 6 | - image: cimg/node:lts 7 | steps: 8 | - checkout 9 | 10 | - restore_cache: 11 | keys: 12 | - yarn-v1-{{ checksum "yarn.lock" }} 13 | 14 | - run: 15 | name: Install dependencies 16 | command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn 17 | 18 | - save_cache: 19 | key: yarn-v1-{{ checksum "yarn.lock" }} 20 | paths: 21 | - ~/.cache/yarn 22 | 23 | - run: 24 | name: Run linter 25 | command: yarn lint 26 | 27 | workflows: 28 | version: 2 29 | ci: 30 | jobs: 31 | - ci: 32 | filters: 33 | branches: 34 | only: 35 | - main 36 | - master 37 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | '@nuxtjs/eslint-config-typescript', 9 | 'plugin:nuxt/recommended', 10 | 'prettier', 11 | ], 12 | plugins: [], 13 | // add your custom rules here 14 | rules: {}, 15 | } 16 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: codexo 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.github/desktop-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalanakt/nuxtailwind/68a71dd5c62acc7d2f431d16b10a3764482aac8b/.github/desktop-preview.png -------------------------------------------------------------------------------- /.github/ipad-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalanakt/nuxtailwind/68a71dd5c62acc7d2f431d16b10a3764482aac8b/.github/ipad-preview.png -------------------------------------------------------------------------------- /.github/mobile-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalanakt/nuxtailwind/68a71dd5c62acc7d2f431d16b10a3764482aac8b/.github/mobile-preview.png -------------------------------------------------------------------------------- /.github/workflows/nuxtjs.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying a Nuxt site to GitHub Pages 2 | # 3 | # To get started with Nuxt see: https://nuxtjs.org/docs/get-started/installation 4 | # 5 | name: Deploy Nuxt site to Pages 6 | 7 | on: 8 | # Runs on pushes targeting the default branch 9 | push: 10 | branches: ["main"] 11 | 12 | # Allows you to run this workflow manually from the Actions tab 13 | workflow_dispatch: 14 | 15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 16 | permissions: 17 | contents: read 18 | pages: write 19 | id-token: write 20 | 21 | # Allow one concurrent deployment 22 | concurrency: 23 | group: "pages" 24 | cancel-in-progress: true 25 | 26 | jobs: 27 | # Build job 28 | build: 29 | runs-on: ubuntu-latest 30 | steps: 31 | - name: Checkout 32 | uses: actions/checkout@v3 33 | - name: Detect package manager 34 | id: detect-package-manager 35 | run: | 36 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 37 | echo "::set-output name=manager::yarn" 38 | echo "::set-output name=command::install" 39 | exit 0 40 | elif [ -f "${{ github.workspace }}/package.json" ]; then 41 | echo "::set-output name=manager::npm" 42 | echo "::set-output name=command::ci" 43 | exit 0 44 | else 45 | echo "Unable to determine packager manager" 46 | exit 1 47 | fi 48 | - name: Setup Node 49 | uses: actions/setup-node@v3 50 | with: 51 | node-version: "16" 52 | cache: ${{ steps.detect-package-manager.outputs.manager }} 53 | - name: Setup Pages 54 | uses: actions/configure-pages@v2 55 | with: 56 | # Automatically inject router.base in your Nuxt configuration file and set 57 | # target to static (https://nuxtjs.org/docs/configuration-glossary/configuration-target/). 58 | # 59 | # You may remove this line if you want to manage the configuration yourself. 60 | static_site_generator: nuxt 61 | - name: Restore cache 62 | uses: actions/cache@v3 63 | with: 64 | path: | 65 | dist 66 | .nuxt 67 | key: ${{ runner.os }}-nuxt-build-${{ hashFiles('dist') }} 68 | restore-keys: | 69 | ${{ runner.os }}-nuxt-build- 70 | - name: Install dependencies 71 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 72 | - name: Static HTML export with Nuxt 73 | run: ${{ steps.detect-package-manager.outputs.manager }} run generate 74 | - name: Upload artifact 75 | uses: actions/upload-pages-artifact@v1 76 | with: 77 | path: ./dist 78 | 79 | # Deployment job 80 | deploy: 81 | environment: 82 | name: github-pages 83 | url: ${{ steps.deployment.outputs.page_url }} 84 | runs-on: ubuntu-latest 85 | needs: build 86 | steps: 87 | - name: Deploy to GitHub Pages 88 | id: deployment 89 | uses: actions/deploy-pages@v1 90 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | ### 2 | # Place your Prettier ignore content here 3 | 4 | ### 5 | # .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506 6 | 7 | # Created by .ignore support plugin (hsz.mobi) 8 | ### Node template 9 | # Logs 10 | /logs 11 | *.log 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | 16 | # Runtime data 17 | pids 18 | *.pid 19 | *.seed 20 | *.pid.lock 21 | 22 | # Directory for instrumented libs generated by jscoverage/JSCover 23 | lib-cov 24 | 25 | # Coverage directory used by tools like istanbul 26 | coverage 27 | 28 | # nyc test coverage 29 | .nyc_output 30 | 31 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 32 | .grunt 33 | 34 | # Bower dependency directory (https://bower.io/) 35 | bower_components 36 | 37 | # node-waf configuration 38 | .lock-wscript 39 | 40 | # Compiled binary addons (https://nodejs.org/api/addons.html) 41 | build/Release 42 | 43 | # Dependency directories 44 | node_modules/ 45 | jspm_packages/ 46 | 47 | # TypeScript v1 declaration files 48 | typings/ 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | 68 | # parcel-bundler cache (https://parceljs.org/) 69 | .cache 70 | 71 | # next.js build output 72 | .next 73 | 74 | # nuxt.js build output 75 | .nuxt 76 | 77 | # Nuxt generate 78 | dist 79 | 80 | # vuepress build output 81 | .vuepress/dist 82 | 83 | # Serverless directories 84 | .serverless 85 | 86 | # IDE / Editor 87 | .idea 88 | 89 | # Service worker 90 | sw.* 91 | 92 | # macOS 93 | .DS_Store 94 | 95 | # Vim swap files 96 | *.swp 97 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "nuxt.isNuxtApp": true 3 | } -------------------------------------------------------------------------------- /DEV-README.md: -------------------------------------------------------------------------------- 1 | # nuxtailwind 2 | 3 | ## Build Setup 4 | 5 | ```bash 6 | # install dependencies 7 | $ yarn install 8 | 9 | # serve with hot reload at localhost:3000 10 | $ yarn dev 11 | 12 | # build for production and launch server 13 | $ yarn build 14 | $ yarn start 15 | 16 | # generate static project 17 | $ yarn generate 18 | ``` 19 | 20 | For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org). 21 | 22 | ## Special Directories 23 | 24 | You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality. 25 | 26 | ### `assets` 27 | 28 | The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts. 29 | 30 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets). 31 | 32 | ### `components` 33 | 34 | The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components. 35 | 36 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components). 37 | 38 | ### `layouts` 39 | 40 | Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop. 41 | 42 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts). 43 | 44 | ### `pages` 45 | 46 | This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically. 47 | 48 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing). 49 | 50 | ### `plugins` 51 | 52 | The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`. 53 | 54 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins). 55 | 56 | ### `static` 57 | 58 | This directory contains your static files. Each file inside this directory is mapped to `/`. 59 | 60 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 61 | 62 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static). 63 | 64 | ### `store` 65 | 66 | This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex. 67 | 68 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store). 69 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 kalana kt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | 4 |
5 | NuxTailwind 6 |
7 |

8 | 9 |

Blog Site Using Nuxt , Vite And Tailwind CSS.

10 | 11 |

12 | GitHub code size in bytes 13 | GitHub 14 | GitHub last commit 15 | 16 | 17 | 18 |

19 | 20 |

21 | Key Features • 22 | How To Use • 23 | Download • 24 | Credits • 25 | Related • 26 | License 27 |

28 | 29 | 30 | 31 | 35 | 38 | 39 |
32 | desktop preview 33 | desktop preview 34 | 36 | desktop preview 37 |
40 | 41 | **View On Desktop 1024x768 , Galaxy S8, iPad Air** 42 | 43 | ## Key Features 44 | 45 | * Mobile Friendly 46 | * It's fast, flexible, and reliable — with zero-runtime 47 | * Write a Blog very esay using .md 48 | * Don't Need knowlage of programing to custermize your site 49 | 50 | ## How To Use 51 | 52 | To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line: 53 | 54 | ```bash 55 | # Clone this repository 56 | $ git clone https://github.com/kalanakt/nuxtailwind 57 | 58 | # Go into the repository 59 | $ cd nuxtailwind 60 | 61 | # install dependencies 62 | $ yarn install 63 | 64 | # serve with hot reload at localhost:3000 65 | $ yarn dev 66 | 67 | # build for production 68 | $ yarn build 69 | 70 | # launch server 71 | $ yarn start 72 | 73 | # generate static project 74 | $ yarn generate 75 | ``` 76 | 77 | > **Note** 78 | > For Deploy In Vercel | netlify refer [Dev Readme](https://github.com/kalanakt/nuxtailwind/blob/main/DEV-README.md) 79 | 80 | 81 | ## Tools & Frameworks 82 | 83 | This site uses the following packages: 84 | 85 | - [vuejs](https://vuejs.org/) 86 | - [nuxtjs](https://nuxtjs.org/) 87 | - [Node.js](https://nodejs.org/) 88 | - [vitejs](https://vitejs.dev/) 89 | - [tailwindcss](https://tailwindcss.com/) 90 | 91 | ## Support 92 | 93 | Buy Me A Coffee 94 | 95 |

Or

96 | 97 | 98 | 99 | 100 | 101 | 102 | ## License 103 | 104 | MIT 105 | 106 | --- 107 | 108 | > GitHub [@kalanakt](https://github.com/kalanakt)  ·  109 | > Twitter [@kalanakt__](https://twitter.com/kalanakt__) 110 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; -------------------------------------------------------------------------------- /components/FeaturedPosts.vue: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /components/NewsLetter.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/NuxtLogo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /components/TheBanner.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 59 | -------------------------------------------------------------------------------- /components/TheFooter.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/TheHeader.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/TheProfile.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /components/TheStats.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/Tutorial.vue: -------------------------------------------------------------------------------- 1 | 2 | 117 | 118 | 123 | -------------------------------------------------------------------------------- /content/hello.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | description: 'Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.' 4 | --- 5 | 6 | Empower your NuxtJS application with `@nuxtjs/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB like API, acting as a **Git-based Headless CMS**. 7 | 8 | ## Writing content 9 | 10 | Learn how to write your `content/`, supporting Markdown, YAML, CSV and JSON: https://content.nuxtjs.org/writing. 11 | 12 | ## Fetching content 13 | 14 | Learn how to fetch your content with `$content`: https://content.nuxtjs.org/fetching. 15 | 16 | ## Displaying content 17 | 18 | Learn how to display your Markdown content with the `` component directly in your template: https://content.nuxtjs.org/displaying. 19 | -------------------------------------------------------------------------------- /content/post/post1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 8 Skills you must have as a Front-End Developer in 2022 3 | description: 'HTML, CSS, and JavaScript are basic coding skills but what are some skills that make you stand out?' 4 | category: FrontEnd, HTML, CSS, JavaScript 5 | date: July 17 2021 6 | img: https://av.sc.com/lk/content/images/lk-deposits-category-400x-400y-200x200.jpg 7 | --- 8 | 9 | # 8 Skills you must have as a Front-End Developer in 2022 10 | 11 | ## HTML, CSS, and JavaScript are basic coding skills but what are some skills that make you stand out? 12 | 13 | ![Skills to become a pro Fronend Developer](https://miro.medium.com/max/875/1*R0QtqGJBr0_vJeO3F4Bx-w.png) 14 | 15 | Must have skills to be a PRO Frontend Developer 16 | 17 | There are different types of web developers, all of whom participate in the coding, maintaining, and analyzing the websites and significant projects worldwide. 18 | 19 | While a Backend Developer builds the infrastructure that enables a website to handle data requests and queries. A front-end developer focuses on the user environment and experience and makes all of that accessible and convenient for the users 20 | 21 | ## 1\. Basic Coding Skills 22 | 23 | Frontend Developers must have basic skills that can build highly functional and secure websites. there are some techs that every Fronted Developer must know: 24 | 25 | →HTML 26 | 27 | →CSS 28 | 29 | →Sass 30 | 31 | →JavaScript/TypeScript 32 | 33 | →DOM Manipulation 34 | 35 | ## 2\. Frameworks 36 | 37 | Knowing basics are super important but Frameworks include pace to your work and make your work more deployable as a major project that runs on the internet. Here are some frameworks that every developer should master : 38 | 39 | > CSS Frameworks 40 | 41 | →Bootstrap 42 | 43 | →Tailwind CSS 44 | 45 | →Foundation 46 | 47 | > JavaScript Frameworks 48 | 49 | →Angular 50 | 51 | →Vue 52 | 53 | →React 54 | 55 | →ether 56 | 57 | ## 3\. Designing Skills 58 | 59 | As it is said a Frontend developer is the bridge between UI/UX designer and a Backend Developer. So it is aspected of a Frontend developer to be more creative and good at designing stuff online. Some skills that make you outstand as a developer : 60 | 61 | →Canva 62 | 63 | →Figma 64 | 65 | →Basic Photoshop 66 | 67 | →Color Selection 68 | 69 | ## 4\. Responsive Web Design 70 | 71 | When you code a website it is very important that your website works efficiently on Mobile and Tablet. Unsurprisingly, **97 percent** of the users access the Internet using mobile phones making it completely necessary to build a website with a mobile-first approach, to say the least. A Frontend Developer must be : 72 | 73 | → Well-versed with media queries 74 | 75 | →Flexbox and Grid should be your heartiest Friends 76 | 77 | ## 5\. Time management 78 | 79 | Whether it is the beginning of your Web Development carrier or you are already a pro Web Developer, Time management is the skill you can’t afford to not have. You must effectively use your time to make the most out of the day and finish that project ASAP. 80 | 81 | →Maintain a To-do Task list 82 | 83 | →Use Pomodoro Clock 84 | 85 | →Use MS Excel to plan your interest 86 | 87 | ## 6\. Using Web Tools 88 | 89 | In this present scenario Developing the Web has become really easy with so many tools available out there to make your code perform better on the user end. Instead of doing everything from scratch or using ancient methods use must be familiar with google and all these tools available online that save **100+ hr** at work. 90 | 91 | →Use tools to Improve CSS and JavaScript 92 | 93 | →Use Code Generators 94 | 95 | →Tools to Configure Design 96 | 97 | →Using Code Optimization Tools 98 | 99 | →Code Validator 100 | 101 | →Use SEO tools 102 | 103 | ## 7\. Testing 104 | 105 | Testing front-end development evaluates an online application or software’s functionality, usability, and graphical user interface (GUI). Testing makes a product better at its performance and makes it more promising to the user. Must do testing at phases of development: 106 | 107 | →Performance Testing 108 | 109 | → End-to-end Testing 110 | 111 | →Cross-Platform Testing 112 | 113 | ## 8\. Soft Skills 114 | 115 | Being a GeekyGeek is of no use if you aren’t able to convey your thoughts and ideas to someone. Communication skills are equally important as your technical skills and can’t be neglected if you want to be a better developer and not just a person behind the screen. Soft skills you must have: 116 | 117 | →Listen Before saying 118 | 119 | →Good Speaking skills 120 | 121 | →One Common Language(eg. English) 122 | 123 | →Confidence in body language 124 | 125 | And there you have it! Many thanks for persisting to the end of this article! Hope you have found it helpful. you can follow me on [Medium](/@harsh-kashiwal) and [Twitter](https://twitter.com/harsh_kashiwal) 126 | 127 | you can support me by [buying me a coffee](https://www.buymeacoffee.com/kashiwalharsh) ☕ 128 | 129 | If you like this article don’t forget to give a clap(Pro tip: It’s free) 130 | 131 | ## Credit 132 | 133 | ![Harsh Kashiwal](https://miro.medium.com/fit/c/60/60/0*uB5g9-EJUaNKq-zF) 134 | -------------------------------------------------------------------------------- /content/post/post2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 10 Must-Have VSCode Extensions for Web Development 3 | description: 'Install these powerful VSCode extensions to significantly improve your productivity during web development.' 4 | category: Vs-Code 5 | date: Jan 01 2022 6 | img: https://dummyimage.com/200x200/ffffff/1421d9.png&text=200x200 7 | --- 8 | 9 | # 10 Must-Have VSCode Extensions for Web Development 10 | 11 | ## Install these powerful VSCode extensions to significantly improve your productivity during web development. 12 | 13 | ![](https://miro.medium.com/max/875/1*kqE5Ri54e6SBHd8-LYriqg.png) 14 | 15 | Visual Studio Code is one of the most widely-used source code editors out there, with over 136k stars on GitHub. Its popularity comes about due to its lightness, flexibility, open-source nature, simplicity, and extensibility. 16 | 17 | Speaking of extensibility, VSCode has thousands of extensions you can install to ramp up your developer productivity and save yourself from mundane tasks. They are all available in the Visual Studio Code marketplace and the vast majority of them are completely free. 18 | 19 | This article looks at 10 powerful Visual Studio Code extensions that significantly improve the web development experience. Example usage and installation links are provided for every one of them. 20 | 21 | # 1\. Prettier 22 | 23 | [Prettier](https://prettier.io/) is a useful tool that automatically formats your code using opinionated and customizable rules. It ensures that all your code has a consistent format and can help enforce a specific styling convention in a collaborative project involving multiple developers. 24 | 25 | ![](https://miro.medium.com/max/875/0*HS4i1NWdo-dvfk7d.png) 26 | 27 | The Prettier extension for Visual Studio Code brings about a seamless integration between the code editor and Prettier, allowing you to easily format code using a keyboard shortcut, or immediately after saving the file. 28 | 29 | Watch Prettier in action: 30 | 31 | ![](https://miro.medium.com/max/875/0*XM_burZS5g9FVVrz.gif) 32 | 33 | Prettier instantly formats the code after the file is saved. 34 | 35 | Install: [Prettier — Code formatter — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 36 | 37 | # 2\. JavaScript Booster 38 | 39 | This extension upgrades Visual Studio Code with code actions to perform common refactoring tasks that occur when programming with JavaScript. 40 | 41 | ![](https://miro.medium.com/max/875/0*RzWJ3nWH07zsOUO7.png) 42 | 43 | They are dozens of code actions that it can carry out, including: replacing an `if...else` statement with a ternary operator: 44 | 45 | ![](https://miro.medium.com/max/875/0*1R84d4IxsRNNPRXa.gif) 46 | 47 | splitting a declaration and initialization into multiple statements: 48 | 49 | ![](https://miro.medium.com/max/875/0*ahAO8OtDXhPSsnTq.gif) 50 | 51 | and converting a function to an arrow function: 52 | 53 | ![](https://miro.medium.com/max/875/0*Yfti0-V5LeBefMnm.gif) 54 | 55 | Install: [JavaScript Booster — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster) 56 | 57 | # 3\. ESLint 58 | 59 | [ESLint](https://eslint.org/) is a tool that finds and fixes problems in your JavaScript code. It deals with both code quality and coding style issues, helping to identify programming patterns that are likely to produce tricky bugs. 60 | 61 | ![](https://miro.medium.com/max/875/0*pmKcjvD5DGtRc6-s.png) 62 | 63 | The ESLint extension for Visual Studio Code enables integration between ESLint and the code editor. This integration allows ESLint to notify you of problems right in the editor. 64 | 65 | For instance, it can use a red wavy line to notify of errors: 66 | 67 | ![](https://miro.medium.com/max/875/0*Do3zPsuwitEFlMEA.png) 68 | 69 | We can view details on the error by hovering over the red line: 70 | 71 | ![](https://miro.medium.com/max/875/0*_6Wu9Y8EoGDRxtlw.png) 72 | 73 | We can also use the `Problems` tab to view all errors in every file in the current VSCode workspace. 74 | 75 | ![](https://miro.medium.com/max/875/0*dlJS8ZcH0XxZgOHq.png) 76 | 77 | Install: [ESLint — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 78 | 79 | # 4\. GitLens 80 | 81 | GitLens is another powerful extension that helps you take full advantage of Git source control in Visual Studio Code. 82 | 83 | ![](https://miro.medium.com/max/875/0*AwlPABUbeeGXUKpP.png) 84 | 85 | GitLens displays views containing essential repository data and information on the current file, such as file history, commits, branches and remotes. 86 | 87 | ![](https://miro.medium.com/max/415/0*1gohVSJ8UWJ2yKO0.png) 88 | 89 | Place the cursor on any line in the editor and GitLens will display info on the latest commit where the line was changed: 90 | 91 | ![](https://miro.medium.com/max/875/0*4PBuKiXBVqpxW0VM.png) 92 | 93 | Install: [GitLens — Git supercharged — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 94 | 95 | # 5\. Live Server 96 | 97 | The Live Server extension for VSCode starts a local server that serves pages using the contents of files in the workspace. The server will automatically reload when an associated file is changed. 98 | 99 | ![](https://miro.medium.com/max/875/0*XLmVtZwqg32cpFcS.png) 100 | 101 | In the demo below, a new server is launched quickly to display the contents of the `index.html` file. Modifying `index.html` and saving the file reloads the server instantly. This saves you from having to manually reload the page in the browser every time you make a change. 102 | 103 | ![](https://miro.medium.com/max/875/0*4m9dZzmrwspuADrH.gif) 104 | 105 | As you saw in the demo, you can easily launch a new server using the `Open with Live Server` item in the right-click context menu for a file in the VSCode Explorer. 106 | 107 | ![](https://miro.medium.com/max/708/0*ucdyddLlADXYLfCF.png) 108 | 109 | Install: [Live Server — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 110 | 111 | # 6\. CSS Peek 112 | 113 | The CSS Peek Extension lets you quickly view the CSS style definitions for various class names and IDs assigned in HTML. 114 | 115 | ![](https://miro.medium.com/max/875/0*HpKRBRx4dxeGbR9X.png) 116 | 117 | There are three ways to use CSS Peek: 118 | 119 | - You can hold down the `Ctrl` key and hover over a class name or ID to peek at its definition. 120 | - You can use a keyboard shortcut to open a persistent definition window that displays the CSS definition of a class name or ID. 121 | - You can use a keyboard shortcut to navigate to where the definition is located in its CSS file. 122 | 123 | Here is a demonstration of all these methods: 124 | 125 | ![](https://miro.medium.com/max/824/0*6h8D5S9j_F-Me2Ro.gif) 126 | 127 | Install: [CSS Peek — Visual Studio Marketplace]() 128 | 129 | # 7\. Intellisense for CSS Class Names in HTML 130 | 131 | This extension can work hand in hand with CSS Peek, it provides code completion for the HTML `class` attribute from existing CSS definitions found in the current Visual Studio Code workspace. 132 | 133 | ![](https://miro.medium.com/max/875/0*FBD2cwtUhAlvh-d7.png) 134 | 135 | You’ll appreciate the benefits of this extension when using third-party CSS libraries containing hundreds of classes. 136 | 137 | ![](https://miro.medium.com/max/875/0*caKhNslCqJ7SiM9r.gif) 138 | 139 | Install: [IntelliSense for CSS class names in HTML — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) 140 | 141 | # 8\. JavaScript (ES6) Code Snippets 142 | 143 | As the name suggests, this is an extension that comes fully loaded with heaps of time-saving code snippets for JavaScript, in ES6 syntax. 144 | 145 | ![](https://miro.medium.com/max/875/0*u4TORTnhOahx5y2f.png) 146 | 147 | Here’s a demo where the `imp` and `imd` snippets from this extension are used to quickly import two modules with ES6 syntax. 148 | 149 | ![](https://miro.medium.com/max/875/0*edpSyCQ2w4btRP6m.gif) 150 | 151 | Install: [JavaScript (ES6) code snippets — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) 152 | 153 | # 9\. Visual Studio Intellicode 154 | 155 | Artificial Intelligence continues to increase worker productivity in various jobs, and developers are not left out. IntelliCode is a tool that produces smart code completion recommendations that make sense in the current code context. It does this using an AI model that has been trained on thousands of popular open-source projects on GitHub. 156 | 157 | ![](https://miro.medium.com/max/875/0*mpz63obHbBPlDfBz.png) 158 | 159 | When you type the `.` character to access an object method or fields, IntelliCode will suggest a list of members that are likely to be used in the present scenario. The items in the list are denoted using a star symbol, as shown in the following demo. 160 | 161 | ![](https://miro.medium.com/max/875/1*uRJ2262BcmW9DgROgLQs4A.gif) 162 | 163 | IntelliCode is available for JavaScript, TypeScript, Python, and a number of other languages. 164 | 165 | Install: [IntelliCode — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) 166 | 167 | # 10\. VSCode Icons 168 | 169 | Icon packs are available to customize the look of files of different types in Visual Studio Code. They enhance the look of the application and make it easier to identify and distinguish files of various sorts. 170 | 171 | VSCode Icons is one the most popular icon pack extensions, boasting a highly comprehensive set of icons and over 11 million downloads. 172 | 173 | ![](https://miro.medium.com/max/875/0*qYhFyb7pQ2FzUzVC.png) 174 | 175 | It goes beyond file extension differentiation, to provide distinct icons for files and folders with specific names, including `package.json`, `node_modules` and `.prettierrc`. 176 | 177 | ![](https://miro.medium.com/max/355/0*v6h3nQCDshIVslc9.png) 178 | 179 | Install: [vscode-icons — Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) 180 | 181 | # Conclusion 182 | 183 | So we’ve gone through 10 essential extensions that aid web development in Visual Studio Code. Install them now to boost your developer productivity and raise your quality of life as a web developer. 184 | 185 | _Originally published at_ [_codingbeautydev.com_](https://cbdev.link/d3ce00) 186 | 187 | # Every Crazy Thing JavaScript Does 188 | 189 | [Sign up](https://cbdev.link/d3c4eb) and immediately receive a free copy of this captivating guide to the subtle caveats and lesser-known parts of JavaScript. 190 | 191 | ![](https://miro.medium.com/max/438/1*YS5Oub8REWy8vnOEqBnsyQ.png) 192 | 193 | ## Credit 194 | 195 | ![Coding Beauty](https://miro.medium.com/fit/c/60/60/1*jFPR29b3e5ldOOJ_hWY3cQ.png) 196 | -------------------------------------------------------------------------------- /content/post/post3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 10 Algorithms Every Developer Should Learn 3 | description: 'There seems to be a large misconception from a lot of aspiring devs that _memorizing_ standard algorithms is important. Now for some job interviews that may be the case, but it is not particularly important for actually being a successful developer.' 4 | category: Algorithms 5 | date: Dec 22 2022 6 | img: https://dummyimage.com/200x200/ffffff/1421d9.png&text=200x200 7 | --- 8 | 9 | # 10 Algorithms Every Developer Should Learn 10 | 11 | ![](https://miro.medium.com/max/875/1*CM5ik7U5aCIjRmRaoElZBg.png) 12 | 13 | There seems to be a large misconception from a lot of aspiring devs that _memorizing_ standard algorithms is important. Now for some job interviews that may be the case, but it is not particularly important for actually being a successful developer. 14 | 15 | So are the things you learn in an algorithm class useless? Absolutely not. What is incredibly important is the ability to think algorithmically. Not just so that you can reproduce and altar standard algorithms, but so that you are comfortable using code to solve whatever problems you encounter as a dev. 16 | 17 | That’s why we’ve assembled a list of 10 algorithms that aspiring devs should work-through to get comfortable with thinking algorithmically. 18 | 19 | ## 1\. Binary Search 20 | 21 | Binary search is one of the first things taught in any computer science class. It is perhaps the simplest example of how a little bit of ingenuity can make things, quite literally, exponentially more efficient. 22 | 23 | A binary search consists of taking a sorted array, and iteratively splitting the array into two and comparing an element that you are looking for against each half, until you find the element. 24 | 25 | ## 2\. Selection, Bubble, and Insertion Sort 26 | 27 | Sorting algorithms are one of the most fundamental tools that a developer should have in their arsenal. Selection, Bubble, and Insertion sort are some of the first that new developers should work through. In any scenario when speed matters you’re not going to be using these algorithms but working with them is a great introduction to array traversal and manipulation. 28 | 29 | ## 3\. Quicksort and Mergesort 30 | 31 | Similar to #2, sorting algorithms are great for getting comfortable with arrays, but Quicksort and Mergesort are efficient enough to be used in serious applications. Being comfortable implementing these sorting algorithms(Note ‘Being comfortable’ and not ‘memorizing’) these algorithms are essential to being a serious developer. 32 | 33 | ## 4\. Huffman Coding 34 | 35 | Huffman coding is the foundation of modern text compression. It works by considering how often different characters appear in a text, and organizes them in a tree based on this frequency. 36 | 37 | ![](https://miro.medium.com/proxy/0*fy0YagBrbYphpIfU) 38 | 39 | Taking the time to work with Huffman coding is a great way to get comfortable with data representation and tree traversal, which are two of the most important issues that computer scientists need to be able to grapple with. 40 | 41 | ## **5\. Breadth First Search** 42 | 43 | Again, trees turn out to be at the heart of a lot of algorithms and software that developers work with. As such, understanding basic tree traversal is a top priority for an aspiring developer. 44 | 45 | Breadth first search works by exploring a tree level by level until the target node is found. Since it literally going through every level it is guaranteed to find a solution 46 | 47 | ![](https://miro.medium.com/proxy/0*J5PQwABSYOXvsmYy) 48 | 49 | ## **6\. Depth First Search** 50 | 51 | Continuing with tree traversal, Depth-First Search is the other main approach for finding an element in a tree. Instead of working down the tree level by level, it explores the tree branch by branch. 52 | 53 | ![](https://miro.medium.com/proxy/0*8O1qtlSca-L2zQS4) 54 | 55 | Now assuming it does not have infinitely extended branches, DFS will similarly always work. Implementing these two search algorithms aren’t particularly complex, but what is incredibly important is learning when to use one over the other. A lot of software design is being able to understand the structure of the information you are working with, and pick algorithms that optimize for that structure. 56 | 57 | ## **7\. Gradient Descent** 58 | 59 | Now for a lot of developers, Gradient Descent is not necessarily going to be useful. If, however, you are touching anything with regression or machine learning, Gradient Descent is going to be at the heart of your work. 60 | 61 | ![](https://miro.medium.com/proxy/0*lHsYg8hLyTuRbUPj) 62 | 63 | Gradient Descent is a method of procedure optimizing functions using calculus. In the context of regression and machine learning, this means finding specific values that minimize the error in your prediction algorithm. While it is certainly more mathematically involved that a lot of these other algorithms, if you are working significantly with data and predictions, understanding how gradient descent works is incredibly important. 64 | 65 | ## **8\. Dijkstra’s Algorithm** 66 | 67 | Another incredibly important issue that developers work with is path finding. Graphs turn out to be an incredibly versatile way to describe all kinds of problems that involve networks of distinct objects. 68 | 69 | ![](https://miro.medium.com/proxy/0*Y9iYkNkbVy9T5Yp6) 70 | 71 | Dijkstra’s algorithm is a way of finding the quickest path between two nodes in a graph. It is the foundation of most work done in path-finding and finds itself used in anything from artificial intelligence to game design. 72 | 73 | ## **9\. Diffie-Helllman Key Exchange** 74 | 75 | The Diffie-Hellman Key Exchange is a great introduction to how cryptography tends to work. More specifically, a Diffie-Hellman Key Exchange works by combining public and private keys(Which are effectively long numbers) to encrypt information when it is being transferred between different parties. 76 | 77 | ![](https://miro.medium.com/proxy/0*9og-WCqQOSCejvkx) 78 | 79 | Even if you’re not working in cybersecurity, having a working understanding of encryption and secure communication is incredibly important to working as a developer. Additionally, even though Diffie-Helman is far from the best algorithm, it is incredibly easy to implement and is similar enough to most other encrypted communication methods. 80 | 81 | ## 10\. Doing Practice Problems 82 | 83 | These first nine algorithms all gave you ways to solve archetypes of problems you might encounter as a developer. The reality, however, is that as a developer you are often going to be encountering algorithmic problems that are completely new. That’s why more important than memorizing any algorithm, is developing the ability to solve problems algorithmically. 84 | 85 | Luckily, there is no shortage of websites to practice. Some of our favorites are: 86 | 87 | - [https://leetcode.com/](https://leetcode.com/) 88 | - [https://projecteuler.net/](https://projecteuler.net/)(More mathematical) 89 | - [https://www.hackerrank.com/](https://www.hackerrank.com/) 90 | 91 | These are great environments to find difficult, yet fulfilling algorithmic problems and hone your skills. 92 | 93 | ## So Now What? 94 | 95 | Again, do not just memorize these algorithms and think you are suddenly a better developer for it. Software Engineering, first and foremost, is about being able to understand problems and build solutions. Learning algorithms isn’t important because you are going to have to exactly implement them for something you’re building. They are important because they teach you how to approach problems. 96 | 97 | What did we leave off the list? Let us know down below. 98 | 99 | As always, happy coding from your friends at [Codesphere](https://link.codesphere.com/MY), the swiss-army knife every development team needs. 100 | 101 | ## Credit 102 | 103 | ![Codesphere](https://miro.medium.com/fit/c/60/60/1*an7W8VpGD0t9aWY-qsa8Ew.png) 104 | -------------------------------------------------------------------------------- /content/post/post4.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 10 Hottest New Apps to Explore Immediately (September 2022 🏆) 3 | description: 'Sometimes all we need is a helping hand to raise us to greatness. Someone to do, create or manage what we cannot or do not have the time to do.' 4 | category: App 5 | date: 2020 Sep 21 6 | img: https://dummyimage.com/200x200/ffffff/1421d9.png&text=200x200 7 | --- 8 | 9 | # 10 Hottest New Apps to Explore Immediately (September 2022 🏆) 10 | 11 | _Meet the 10 most upvoted apps this month — via ProductHunt._ 12 | 13 | Sometimes all we need is a helping hand to raise us to greatness. Someone to do, create or manage what we cannot or do not have the time to do. 14 | 15 | But what if that missing help were from an app — or, better still, 10 brand-new apps? 16 | 17 | We might have just what you were looking for in this list! 🤩 18 | 19 | Here we come with the latest roundup of the ten most remarkable hits on ProductHunt in September 2022, according to popular demand. 🔥✨ 20 | 21 | ![](https://miro.medium.com/max/875/1*pZZEUa0I8ojHQCikpci1og.jpeg) 22 | 23 | Plenty of interesting tools on that list — keep reading to know more! 24 | 25 | ![](https://miro.medium.com/max/875/0*u2hbvwuZrYNVYoHu.png) 26 | 27 | **Are you into productivity apps? Try now** [**Curiosity for free**](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022)**!** 28 | 29 | # 1\. xTiles 30 | 31 | > **_Organize your ideas and projects visually 32 | > _**_Tags: Design Tools, Web App, Productivity, iOs 33 | > PH Launch: 20.09.2022 34 | > Upvotes: 2588 ▲_ 35 | 36 | ![](https://miro.medium.com/max/875/1*COVdvs0to6A8NA_q4ACoCA.png) 37 | 38 | Image from [xTiles](https://xtiles.app/) 39 | 40 | If you work with content creation such as podcasts, blog posts, videos, images, photographs, writings, or educational topics, [xTiles](https://xtiles.app/) is a fantastic addition to your tool kit. 41 | 42 | This app will help you become more productive with an easy and flexible workspace that aims for simplicity. You can create a personal layout with notes, links, and media, and share it with your team. 43 | 44 | All features are currently available in the web version, which includes a browser extension to capture snippets. And the mobile app is a great addition for note-taking on the fly. 45 | 46 | _Pricing_ 🪙 47 | 48 | - There is a complimentary Starter plan with unlimited page sharing 49 | - Personal Pro plan costs $8/month with unlimited file uploads and blocks 50 | - Team plan costs $8/month per member with multiple editors in a workspace 51 | 52 | # 2\. Polywork 53 | 54 | > **_Discover opportunities to collaborate 55 | > _**_Tags: Social Networking, Web App, Community 56 | > PH Launch: 14.09.2022 57 | > Upvotes: 2460 ▲_ 58 | 59 | ![](https://miro.medium.com/max/875/1*X7LcgJjTSNnZ_rZZEw4PSw.png) 60 | 61 | Image from [Polywork](https://www.polywork.com/) 62 | 63 | [Polywork](https://www.polywork.com/) is a social network that aims at work collaboration amongst different professionals. This tool will help you find opportunities in many fields — not only full-time positions, but also side projects, partnership possibilities, and one-time collabs. 64 | 65 | You can personalize your offer or express your availability to the best of your wishes. The app also provides private spaces, called clubs, to gather professionals with interests in common. 66 | 67 | _Pricing_ 🪙 68 | 69 | - The network is free to join and use, but clubs are still in private invite-only beta — any user can request access 70 | 71 | # 3\. Maven 72 | 73 | > **_Live courses taught by experts 74 | > _**_Tags: Education, Tech, Online Learning 75 | > PH Launch: 15.09.2022 76 | > Upvotes: 1923 ▲_ 77 | 78 | ![](https://miro.medium.com/max/875/1*v0KhTUHu1icIEzmOhtOrMg.png) 79 | 80 | Image from [Maven](https://maven.com/) 81 | 82 | [Maven](https://maven.com/) is a platform focused on curating live courses taught by experts in the area, from big companies like Meta, Google, and Airbnb. 83 | 84 | It believes in cohort-based courses (CBCs) as the key to overcoming the lack of engagement seen in traditional recorded online courses. With live classes, you can ask questions directly to the instructor, or get support from your classmates. 85 | 86 | There are currently over one hundred courses on the platform. They promise to deliver active learning, interactivity, and a sense of community. 87 | 88 | _Pricing_ 🪙 89 | 90 | - Prices vary between courses and are paid per enrollment 91 | 92 | # 4\. MeltingSpot 93 | 94 | > **_A customizable community platform_**_ 95 | > Tags: Marketing, Software, Community, Web App 96 | > PH Launch: 22.09.2022 97 | > Upvotes: 1358 ▲_ 98 | 99 | ![](https://miro.medium.com/max/875/1*fjIUJLWQ89tfajCNe_NhAw.png) 100 | 101 | Image from [MeltingSpot](https://www.meltingspot.io/) 102 | 103 | Communities have been supporting businesses for quite some time now. They can help you engage your portfolio, get direct product feedback from your clients, reduce sales cycles, and improve conversion and retention. 104 | 105 | With that in mind, [MeltingSpot](https://www.meltingspot.io/)’s goal is to assist in your community building, so that you can engage customers, partners, and followers. The software has a built-in studio to host lives, and it allows you to organize your on-demand content, with public or private channels to discuss it. 106 | 107 | Audience can be segmented into smart groups so that relevant content is shared, and there’s also a possibility to create automations to manage everything smoothly. 108 | 109 | _Pricing_ 🪙 110 | 111 | - The app is free for up to 20 active members in one spot, so that you can test all features 112 | - Engage plan is available from $89 with up to 100 active members 113 | - Businesses can have a special quote under Enterprise plan 114 | 115 | # 5\. Arcade 2.0 116 | 117 | > **_The easiest way to showcase your product 118 | > _**_Tags: Chrome Extensions, Web App, Tech 119 | > PH Launch: 29.09.2022 120 | > Upvotes: 1345 ▲_ 121 | 122 | ![](https://miro.medium.com/max/875/1*gbx4VgI8ubYe49yFDk-oFA.png) 123 | 124 | Image from [Arcade 2.0](https://www.arcade.software/) 125 | 126 | [Arcade 2.0](https://www.arcade.software/) is a fantastic tool to show your product in action. Faster and easier than using a traditional video editing tool, the app allows you to demonstrate key product features with simple, interactive clips. 127 | 128 | For instance, you can create short self-guided manuals that are visually appealing, and share them anywhere, in a matter of minutes. If you need to update it, the Arcade will automatically change across all properties. 129 | 130 | It is also a nice way to keep updated with your audience’s interests via its valuable analytics. 131 | 132 | _Pricing_ 🪙 133 | 134 | - Builder plan is free with up to three publicly shared Arcades and analytics 135 | - Pro plan is $32 per month, suitable for individual creators with unlimited, watermark-free Arcades 136 | - Teams can have personalized offers with custom branding, collaborative Arcades and advanced analytics 137 | 138 | # Intermission: Curiosity 139 | 140 | > **If you’re always on the lookout for productivity apps, you should try** [**Curiosity**](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022)! 141 | 142 | [Curiosity](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022) is a powerful search tool that can go through all your files and apps at once, without the need to upload anything anywhere. This way, all your data is safely kept on your computer and under your control. ️💾✅ 143 | 144 | ![](https://miro.medium.com/max/875/0*SLKUIjhCPhRKNKB8.png) 145 | 146 | [Curiosity](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022): One search for everything 147 | 148 | [Curiosity](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022) connects with the tools you already use, including your files and messages, as well as cloud apps like Dropbox or Slack. That saves you time and avoids frustrating searches on different platforms, which increases your overall efficiency. 149 | 150 | _Pricing_ 🪙 151 | 152 | - [Curiosity](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022) is available for free on Windows and Mac 153 | - You can get a free trial of [Curiosity Pro](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022) for unlimited sources and search-in-files 154 | 155 | # 6\. Appwrite 156 | 157 | > **_Open Source backend server for Web, Mobile, and Flutter developers 158 | > _**_Tags: Open Source, Developer Tools, GitHub 159 | > PH Launch: 21.09.2022 160 | > Upvotes: 1330 ▲_ 161 | 162 | ![](https://miro.medium.com/max/875/1*ZAKsV2NKjvFsYdCjJLy8MA.png) 163 | 164 | Image from [Appwrite](https://appwrite.io/) 165 | 166 | If you’re a software developer looking to simplify complex and repetitive coding, [Appwrite](https://appwrite.io/) is there for you. This platform was collectively created as a secure backend server that provides core APIs to build modern apps, with a variety of adapters for authentication, database, storage, messaging, and logging. 167 | 168 | You can stick to what you’re familiar in coding, since it supports 11 different programming languages with a dozen SDKs. And the tool is still growing with new features to be released and facilitate the developer’s journey. 169 | 170 | _Pricing_ 🪙 171 | 172 | - Appwrite is open-source, collaborative, and free 173 | 174 | # 7\. Jimo 175 | 176 | > **_Instantly connect to your end-users 177 | > _**_Tags: Productivity, User Experience, Web App 178 | > PH Launch: 28.09.2022 179 | > Upvotes: 1313 ▲_ 180 | 181 | ![](https://miro.medium.com/max/875/1*QiElFkC2xjEDkuFfdE47SA.png) 182 | 183 | Image from [Jimo](https://www.usejimo.com/) 184 | 185 | If you’re looking to create the best user experience for your clients, you might wanna try [Jimo](https://www.usejimo.com/). This app is set to engage users with product teams, so that you can build together successful products. 186 | 187 | Jimo allows you to gather continuous live feedback directly from your app, be it insights, validations, or surveys. You can use it to advertise new features of your product, and choose an audience, based on app data, to target campaigns or studies. 188 | 189 | With that sort of information in hand, it gets easier to speed up decision processes and take action whenever needed. 190 | 191 | _Pricing_ 🪙 192 | 193 | - Essentials plan costs $29/month with 2 seats, basic surveys, and public roadmap 194 | - Pro plan is at $149/month with 5 seats, multiple languages, unlimited boosts, and analytics 195 | - Scale aims at enterprises, starting at $499/month with custom domain, AI insights, integrations, and full security review 196 | 197 | # 8\. Popsy 198 | 199 | > **_No-code website builder that works like Notion_**_ 200 | > Tags: Website Builder, Maker Tools, No-Code 201 | > PH Launch: 01.09.2022 202 | > Upvotes: 1230 ▲_ 203 | 204 | ![](https://miro.medium.com/max/875/1*iFQW651HQqs1OKFaDsxROA.png) 205 | 206 | Image from [Popsy](https://popsy.co/) 207 | 208 | [Popsy](https://popsy.co/) is the ultimate website builder tool for Notion addicts. No, seriously. This app was created to work just like the already familiar Notion, so customization and design can be fast and simple, with no need to dive into coding. 209 | 210 | But don’t worry if you have no clue about Notion. Popsy is quite simple to understand even for beginners, and there are some templates to choose from if you don’t want to create a page from scratch. 211 | 212 | It’s an amazing choice for content creators, founders, influencers, and job seekers to spread their ideas and products around the world. 213 | 214 | _Pricing_ 🪙 215 | 216 | - Each published site costs $8/month with free Popsy domains or custom domains available. 217 | 218 | # 9\. Typed 219 | 220 | > **_The next-generation document editor_**_ 221 | > Tags: Productivity, Writing, Text Editors, Collaboration 222 | > PH Launch: 19.09.2022 223 | > Upvotes: 1186 ▲_ 224 | 225 | ![](https://miro.medium.com/max/875/1*0yqmo8cuAzY7brZm8lSgfA.png) 226 | 227 | Image from [Typed](https://typed.do/) 228 | 229 | [Typed](https://typed.do/) claims to be the next-generation app for writing. It has an amazing interface for document collaboration between team members, integration with Google Drive, and a resource library for each doc ever created. With that, you can easily share anything you’re working on with just a link — no need to send multiple tabs or files any more. 230 | 231 | The app smart links all documents created to help you with organization. Whether you’re a creator, a student, a founder, or an investor, you’ll find it interesting to know that you can research and write at the same time within the app, using split screen viewer. 232 | 233 | As a plus, the app also offers context-based recommendations (in beta) and you can save references to Typed mobile. 234 | 235 | _Pricing_ 🪙 236 | 237 | - There is a free plan for individuals or starting teams, with up to 25 documents and 1 GB storage 238 | - Pro plan aims at heavy users and fast-growing teams, at a cost of $8 per user yearly, unlimited documents, and 10 GB storage per editor 239 | - Custom pricing is available for enterprises 240 | 241 | # 10\. Growth.Design Case Studies 2.0 242 | 243 | > **_Product tips in a comic book format_**_ 244 | > Tags: User Experience, Education, Tech 245 | > PH Launch: 14.09.2022 246 | > Upvotes: 1102 ▲_ 247 | 248 | ![](https://miro.medium.com/max/875/1*7gEV8_d2Co2nX6mzk0-XJg.png) 249 | 250 | Image from [Growth.Design Case Studies 2.0](https://growth.design/case-studies) 251 | 252 | Wanna know what happens when education meets entertainment, art, and business ideas? [Growth.Design Case Studies](https://growth.design/case-studies) is what happens. 253 | 254 | On its v. 2.0, this fantastic app gathers more than 43 product case studies from big companies such as TikTok, YouTube, and Amazon, and explains in simple comics how they use psychology to engage users, create experiences, and lead to conversion. 255 | 256 | With an approachable tactic, powerful product growth content can be transmitted to many people from different backgrounds and in various roles within a company. The smooth interactions and easy navigation make it simple and fun for anyone to wander about the cases, even in your spare time. 257 | 258 | _Pricing_ 🪙 259 | 260 | - Subscription and access to all case studies are free, with no paid ads 261 | 262 | # Wrapping up 263 | 264 | Those are the top 10 apps this month of September, according to most upvoted on ProductHunt. 265 | 266 | It was an amazing ride with brand-new applications ranging from productivity, UX, maker tools, networking, and learning. There seems to be a growing interest in tools to connect users and users-to-business. And it is always a delight to see new ideas flourish in the educational field since this largely benefits many people. 267 | 268 | We hope this list gives you rich insights to improve your routine and facilitate upcoming ideas. We would love to hear from you in the comments, so drop a word about your favorite new app! 269 | 270 | In the meantime, you can always get more productive with [Curiosity](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022)! 😉 271 | 272 | # Methodological note 273 | 274 | There are many ways to interpret: _“Hottest in the month”_. In case you’re wondering, here’s how we put together the list: 275 | 276 | - Check the most-upvoted list every day this month ([ProductHunt Time Travel](https://www.producthunt.com/time-travel?ref=header_nav)) 277 | - Check upvotes _as of the day of collection_ (1st of the following month) 278 | - Select 10 apps with the most upvotes 279 | 280 | That means the list is slightly biased towards apps that launched earlier in the month (more time to collect votes). However, since it contains apps from the entire month, we feel that small imprecision is acceptable. Upvote counts are from the day we pulled the data. 281 | 282 | We also removed any projects related to NFTs, blockchains, and Web3. If you’re confused why, check out [@web3isgreat](https://twitter.com/web3isgreat) or [@smdiehl](https://twitter.com/smdiehl) on Twitter. 283 | 284 | _If you enjoyed this article, you might want to check out:_ 285 | 286 | - [_10 Hottest New Apps in August 2022 — ProductHunt Most Upvoted_](https://blog.curiosity.ai/10-hottest-new-apps-you-dont-know-yet-august-2022-54da00024003) 287 | - [_7 Easy Email Hacks to Take Back Your Time_](https://blog.curiosity.ai/7-easy-email-hacks-to-take-back-your-time-db871525f4c6) 288 | - [_8 Must-have Chrome Extensions for Remote Workers in 2022_](https://blog.curiosity.ai/8-must-have-chrome-extensions-for-remote-workers-in-2022-71bd4311dbec) 289 | 290 | ![](https://miro.medium.com/max/875/0*NVmdg7YudDXxyAUD.png) 291 | 292 | [**Curiosity**](https://curiosity.ai/?utm_source=medium&utm_medium=blog-link&utm_campaign=10-hottest-new-apps-sep-2022)**: the end of endless searches** 293 | 294 | ## Credit 295 | 296 | ![Leon Zucchini](https://miro.medium.com/fit/c/60/60/1*PZkj4N9rMfWz9JZSMxTIdQ.png) 297 | -------------------------------------------------------------------------------- /content/post/post5.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 8 Must Have Google Chrome Extensions that Save Hours of Work into Minutes 3 | description: 'We are all aware of the fact that the internet has changed our lives in a number of ways. Nowadays, we live in a world where we constantly have to deal with distractions present on social media or messaging apps for hours at a time.' 4 | category: Google 5 | date: jan 21 2022 6 | img: https://dummyimage.com/200x200/ffffff/1421d9.png&text=200x200 7 | --- 8 | 9 | # 8 Must Have Google Chrome Extensions that Save Hours of Work into Minutes 10 | 11 | ![](https://miro.medium.com/max/681/0*c5aH-FJmY8OHslbw.png) 12 | 13 | We are all aware of the fact that the internet has changed our lives in a number of ways. Nowadays, we live in a world where we constantly have to deal with distractions present on social media or messaging apps for hours at a time. 14 | 15 | However, there are extensions which can help us with this problem by cutting down time spent on certain tasks and getting stuff done. If you love working on your computer and want to save some time, then this list of **Must have Google Chrome Extensions** is a perfect one for you. Installing these extensions can make your life a breeze as they are designed to save hours of work into minutes. 16 | 17 | Here are 8 of the best Google Chrome extensions that help to save you hours of work into minutes. 18 | 19 | # 1\. Scribe 20 | 21 | This is an amazing extension that lets you turn any process into a step-by-step guide, instantly. With Scribe you can save Hundreds of thousands of valuable time. It works on almost all major browsers. 22 | 23 | # How it works 24 | 25 | Turn on the Scribe recorder, go through your process, then turn off the recording. It automatically creates a how-to guide, complete with screenshots, instructions and clicks. You can easily add, edits and customization to your recorded screenshot and share with team members just wit a click. 26 | 27 | ![](https://miro.medium.com/max/608/1*oAWyNeSe6fhDDcX64_UBJQ.png) 28 | 29 | [scribehow.com](https://scribehow.com/) 30 | 31 | # 2\. Jam 32 | 33 | The fastest bug reporting tool. Cut your bug reporting time by 20x. Report bugs in few seconds, without disrupting your workflow. Capture your screen plus developer logs in one click. It’s so easy and Integrates tightly with most of the issue trackers & tools. Jam auto-magically creates bug reports with all the info engineers need, including: 34 | 35 | ![](https://miro.medium.com/max/681/1*Gj4djFY4j2L6S1wNrFx8wg.png) 36 | 37 | [jam.dev](https://t.co/jj1hUqofE3) 38 | 39 | # 3\. VisBug 40 | 41 | It is an open source web design debug tools built with JavaScript. It gives power to designers and content creators by bringing design tool interactions and hotkeys to the browser. Not only it gives powers to designers and content creators, It has more features such as: 42 | 43 | - Edit text, images or style any page in any state. 44 | - Inspect styles, spacing, distance, accessibility and alignment. 45 | - Nitpick layouts & content, in the real end environment, at any device size. 46 | - Leverage adobe/sketch skills. 47 | 48 | ![](https://miro.medium.com/max/681/1*7h3Y-pVG58Af13q-8efM8Q.png) 49 | 50 | [visbug.web.app](https://t.co/CEN7GmHzAA) 51 | 52 | # 4\. Hyperwriteai 53 | 54 | HyperWrite generates content and provide suggestions as you write. It has advanced AI algorithms help you write better and faster than ever before. With HyperWrite, you can focus on what’s really important. You can use HyperWrite to write blog posts, articles, emails, and more. 55 | 56 | ![](https://miro.medium.com/max/681/1*ynEoAlcaNFhapjutA2Rd7A.png) 57 | 58 | [hyperwriteai.com](https://t.co/75j3tjJAlW) 59 | 60 | # 5\. Fireflies 61 | 62 | Record & Transcribe meetings & calls directly from the browser Record & transcribe your Google meet meetings directly from the browser. With this tool you do not have to worry about missing any important conversation ever again. You can stop taking manual notes and focus during the meeting because Fireflies automatically capture all your conversations on Google Meet and organizes them in your workspace. Get time-stamped notes with speaker detection and also audio playback. 63 | 64 | ![](https://miro.medium.com/max/681/1*GK0K6KMHqoHbk81R9hj9MQ.png) 65 | 66 | [fireflies.ai](https://t.co/XJfAKIXME6) 67 | 68 | # 6\. Wappalyzer 69 | 70 | This is a powerful tool which helps to find out the technology stack of any website. It creates lists of websites that use certain technologies, with company and contact details. Its APIs provide instant access to website technology stacks, company and contact details, social media profiles, email verification and more. Empower your sales and marketing teams: 71 | 72 | - **Website profiling and Browser extension** 73 | - **Lead generation** 74 | - **Competitor analysis** 75 | - **API access and Security recon** 76 | 77 | ![](https://miro.medium.com/max/681/1*PHBDIkbfPVrWA03pVJ6ATA.png) 78 | 79 | [wappalyzer.com](https://t.co/HQrRrfSYDS) 80 | 81 | # 7\. Heurio 82 | 83 | This is a perfect tool for any web developer. You can use this tool for UX check, design and development review, user testing and more. One beautiful benefits of using this extension is to make a smooth collaboration with developers directly on any live website. You can leave notes, assign actionable change requests, do UX or copy reviews in a user-friendly and collaborative way. It has features such as: 84 | 85 | - Pin your ideas. 86 | - Do a heuristic evaluation. 87 | - Report bugs. 88 | - Share the project link, invite team members or export your findings to PDF. 89 | 90 | ![](https://miro.medium.com/max/681/1*G-chqu4d-DCKMTWN-Du1yA.png) 91 | 92 | [heurio.co](https://t.co/ISFOzGOXlE) 93 | 94 | # 8\. Motion 95 | 96 | Motion DevTools is a browser extension useful for web developers like you. With this tool you can inspect, edit and export animations made with CSS and Motion One. Developers able to add, move and remove keyframes in single click. You can export any animation into CSS transitions, CSS animations in few clicks. The best part of this tool is your edits will be reflected on the page in real-time. 97 | 98 | ![](https://miro.medium.com/max/681/1*e9hU8bT5-4SJ_OhFFuab5Q.png) 99 | 100 | Thats it and thanks for reading! Hope you find these information useful. Feel free to share more similar chrome extension. 101 | 102 | [motion.dev](https://motion.dev/) 103 | 104 | _Originally published at_ [_https://letmefail.com_](https://letmefail.com/technology/8-must-have-google-chrome-extensions-that-save-hours-of-work-into-minutes/) _on October 1, 2022._ 105 | 106 | ## Credit 107 | 108 | ![ibrahim zahir](https://miro.medium.com/fit/c/60/60/0*4y5BoSsDupH9MY5v) 109 | -------------------------------------------------------------------------------- /content/post/post6.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Express.js vs Nest.js 3 | description: 'Since Node.js was announced, the use of Javascript has increased in the backend world. Due to the increasing use of Node.js new frameworks and tools are getting announced every day. Express and Nest are among the most known frameworks for creating back-end applications with Node.js and in this article, we will compare them.' 4 | category: JavaScript, Frameworks, Express.js, Nest.js 5 | date: Jun 17 2022 6 | img: https://dummyimage.com/200x200/ffffff/1421d9.png&text=200x200 7 | --- 8 | 9 | # Express.js vs Nest.js (All you need to know) 10 | 11 | ![](https://miro.medium.com/max/875/1*aGCx1q4rO5Uny9AauDCqyw.png) 12 | 13 | Since Node.js was announced, the use of Javascript has increased in the backend world. Due to the increasing use of Node.js new frameworks and tools are getting announced every day. Express and Nest are among the most known frameworks for creating back-end applications with Node.js and in this article, we will compare them. 14 | 15 | ## **Express** 16 | 17 | Express is a minimalistic framework of Node.js. Although it covers a few core aspects of creating a server side application, it is trendy because of its simplicity, flexibility and performance and even Nest is built in top of express. But still, some problems come with express and before we dive into them, let’s understand how these frameworks make life easier. Firstly, we need to understand what they provide us, let’s create a web server without using any framework but Node.js only. 18 | 19 | Node.js Server 20 | 21 | As you can see, we can create a web server using the built-in HTTP module in Node.js. If you send a web request to [http://localhost:8000](http://localhost:8000), you will receive a message (Hello World) from our Node.js server. It is simple and easy, but what if we want to create a REST API with hundreds of different routes? Then we had to write a route matcher and send each route to its specific controller. Also, we have to implement HTTP methods like GET, POST, PUT etc. to satisfy REST standards, right? What express does is precisely this, express handles request/response control, routing, serving static files, and middlewares for us. That is the beauty of Express being so lightweight and simple. Now let’s see how we can create the previous application using express. 22 | 23 | Express.js Server 24 | 25 | The above code is also doing the same thing. But express gives us a routing mechanism that matces the requested URL, so if we want to create a cat service using express router it will look like this. 26 | 27 | That is great, but what is the problem with express? The short answer is architecture. Express is very minimalistic and straightforward, which provides flexibility to the users. The flexibility is very beneficial for experienced users or complex scenarios, but the flexibility can cause an increase in errors and structural mistakes. In addition, applications nowadays require lots of extra logic like request validation, authorization, documentation, testing, logging etc. So thinking the express only gives us a few features, people need to solve these requirements using other libraries or frameworks. That is why Nest.js exist. 28 | 29 | ## Nest.js 30 | 31 | Nest is a framework for building efficient, scalable Node.js server-side applications. Nest is built in top of common Node.js frameworks (Express, Fastify). It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming). Nest also implements SOLID principles. This is great because many backend developers are switching from typed languages to NodeJs, and it will be easy for them to get used to Nest. 32 | 33 | Nest provides abstraction above these common Node.js frameworks (Express/Fastify) and exposes their APIs directly to the developer. This gives developers the freedom to use the myriad of third-party modules available for the underlying platform. The purpose Nest serves is to create highly testable, scalable, loosely coupled, and easily maintainable applications. 34 | 35 | To demonstrate that, let’s create our cats service using Nest 36 | 37 | Nest’s routing approach works with controllers, which organizes the routes and makes routing clearer and more manageable. Nest has a default error handler and other built-in utilities, which helps you for a quick start. Of course, you can implement them manually with express, but there is no need to reinvent the wheels. All these amenities make Nest a better choice for beginners because these core utilities can be hard to understand for beginners. 38 | 39 | Now that we understand the basics of these frameworks, let’s dive into the details of what Nest provides. 40 | 41 | # 1\. Architecture 42 | 43 | In express, there is no architecture standard. And it becomes a problem in many large projects or microservice applications because they require a powerful and flexible architecture to keep the application maintainable. On the other hand, Nest’s most powerfull side is architecture because Nest has many utilities to provide a flexible, clean and powerful architecture. Nest-Modules are a great example for this. A Nest-Module is used to organize the application structure and helps developers to manage dependencies of the module. Also Nest is great for applying N-tier architecture which aims to divide an application into logical layers. Layers are a way to separate responsibilities and manage dependencies to fulfill the separation of concerns (SoC) principle. To accomplish that, Nest advises calling the service layer inside the controllers and do all the bussiness logic inside these service layers. For the service layer, call another layer called the repository layer, which is responsible for data access. So we separated our concerns into three layers. Separating these layers provides reusability and maintainability for the software. Also it makes our application easy to test which will be explained later in **dependency injection** topic. Think about the cat service we created, it may look like this: 44 | 45 | CatController -> CatService -> CatRepository 46 | 47 | ![App Structure](https://miro.medium.com/max/391/1*VeijJB-b_Kgz-l0X4nvPRg.png) 48 | 49 | Application Structure 50 | 51 | So whenever we need to call a method of the CatService in any Controller, we simply create an instance of the CatService and call the method or we can use an existing instance of CatService by passing a CatService instance as a parameter of the CatController’s contructor which is also a concept of Nest called Dependency Injection. 52 | 53 | # 2\. Dependency Injection 54 | 55 | > Developers coming from different programming languages may be familiar to this term. Dependency injection is another beneficial part of Nest. Dependency injection is **a design pattern in which an object receives other objects that it depends on**. A form of inversion of control, dependency injection aims to separate the concerns of constructing objects and using them, leading to loosely coupled programs. 56 | 57 | In Nest dependency injection can be used by adding the Injectable decorator top of the module you want to inject. For instance 58 | 59 | cat.service.ts 60 | 61 | cat.controller.ts 62 | 63 | As you can see, we passed the catService instance as a parameter to the CatController’s constructor. This approach makes the application more maintainable and easy to test especially for large applications. This is one of the best advantages of using Nest. 64 | 65 | # 3\. Middlewares 66 | 67 | Nest middleware are, by default, equivalent to express middleware. In express middleware, you just create another route handler which runs before/after the controller. Nest has a **MiddlewareConsumer** class which is a helper class. It provides several built-in methods to manage middleware. All of them can be simply chained in the fluent style. MiddlewareConsumer has a **forRoutes** property where you can simply type the path as a string or controllers to register the middleware. Nest also has a exclude property which helps you to exclude paths or controllers. 68 | 69 | Nest also provides middleware-like utilities such as **pipes, filters, and interceptors**. They can be considered middleware, but they are more focused on different purposes; for example, pipes are mainly used for validations and data transformations. On the other hand, Middlewares are handlers that run before the route handler and have access to request objects. Filters are the opposite of middleware. They run after the route handler and manipulate the response object for error handling etc. Finally, interceptors have access to both request and response objects before and after the route handler is called. Nest also provides a utility called ExecutionContext, which provides additional details about the current execution process like what is going to be executed next, and express middlewares being lack this information. As a result, Nest is one step ahead of the express here. 70 | 71 | # 4\. Custom Exceptions 72 | 73 | Nest has default exception classes for most scenarios like NotFoundException, UnAuthorizedException etc. This saves you some time. Also, it is possible to create your own exception classes just like in express. 74 | 75 | # 5\. Validations 76 | 77 | Request validation is beneficial in many ways. It prevents errors before happening and shows the user a meaningful message that they send a wrong input. Also, it prevents users from sending unwanted inputs, which makes the application more secure. 78 | 79 | In express I used to add a middleware before the handler and this middleware takes a validator as a parameter which is created with Joi order order validation tools. But it is very time-consuming and causes your route/handler declarations to look longer, more complicated and you have a chance to forget to add the validator before the handler. It’s not possible to create generic middleware which can be used across all contexts across the whole application. This is because middleware is unaware of the execution context, including the handler that will be called and any of its parameters. 80 | 81 | In Nest you can create a **validation pipe** and use it as a decorator before the method. For instance 82 | 83 | @Post() 84 | @UsePipes(new JoiValidationPipe(createCatSchema)) 85 | async create(@Body() createCatDto: CreateCatDto) { 86 | this.catsService.create(createCatDto); 87 | } 88 | 89 | But there is a more elegant way of doing this. If you are using Nest with **Typescript**, you can make your validations in the Dto with class-validator library. 90 | 91 | import { IsString, IsInt } from 'class-validator'; 92 | 93 | export class CreateCatDto { 94 | @IsString() 95 | name: string; 96 | @IsInt() 97 | age: number; 98 | 99 | @IsString() 100 | breed: string; 101 | } 102 | 103 | In conclusion, express requires a few more touches than Nest. Nest’s way of handling validations with Typescript is the most recommendable one. 104 | 105 | # 6\. Authorization 106 | 107 | Authorization is a common need in back-end applications. Some services may require role based authorizations to prevent unallowed actions. Authorization has typically been handled by a middleware in traditional Express applications and usually it looks something like this. 108 | 109 | router.get('/create', authorize(Role.Admin), create); 110 | 111 | Nest’s way of authorization is similar but Nest provides a few conveniences with its **Guards** concept. Guard determine whether a given request will be handled by the route handler or not. Guards can be controller-scoped, method-scoped or global-scoped which provides ease of use in implementation also helps keep your code DRY and declarative. Also the **execution-context** can be used to build generic [guards](https://docs.nestjs.com/guards) which makes guards more powerful than traditional middlewares. 112 | 113 | @Post() 114 | @Roles('admin') 115 | async create(@Body() createCatDto: CreateCatDto) { 116 | this.catsService.create(createCatDto); 117 | } 118 | 119 | # 7\. Database 120 | 121 | In express we usually use ORM (Object Relational Mapper) or ODM (Object Document Mapper) like [**Sequelize**](https://sequelize.org/) or **M**[**ongoose**](https://mongoosejs.com/) to handle database operations. Nest is not different but Nest has built-in ORM-ODM tools which provide model/repository injection, testability, and dynamic configuration to make accessing your chosen database, my opinion is, Nest’s architecture makes working with databases easier 122 | 123 | # 8\. API Documentation 124 | 125 | Documenting an API in Nest.js is the easiest by far. Nest provides a swagger module that automatically creates documentation for API endpoints. Also, it is possible to define request/response schemas with decorators like below. 126 | 127 | # 9\. Performance 128 | 129 | Nest allows to use Fastify adapter which is two times faster than Express adapter and Nest won’t be able to beat Express if not using Fastify adapter. And we know that Nest provides an abstraction of these two adapters to switch between them but this won’t be possible in every scenario because there are some cases these two adapters act differently by their nature. For instance, fastify adapter does not support nested routes, so the Express adapter should be used to accomplish that. 130 | 131 | # 10\. Testing 132 | 133 | Nest’s most powerful advantage of Architecture wins here too. As we discussed before Nest uses modules and couples them with dependency injection which allows injecting any dependency to any module, so you can inject a test service without instantiating it, and it saves lots of time and effort especially for larger modules and services. 134 | 135 | # 11\. Learning Curve 136 | 137 | Since Nest is built in top of express, Nest acts as a superset of express. So Nest is more complicated and has more features to learn. If the question here is comparing only express vs. Nest, then express will be easy to understand with no doubt, but express itself is not enough for creating a complete web server in most modern applications. Hence, developers most probably need to use other libraries for their needs, making the learning curve of express hard to predict. 138 | 139 | # **12\. Community** 140 | 141 | Express has a very large community which makes it almost impossible to not find what you are looking for. Despite Nest being newer and still facing some issues to fix. Luckily Nest team is working hard to make Nest better. 142 | 143 | # 13\. Does Nest worth learning? 144 | 145 | Nest is cutting-edge technology and dependent on express and fastify. Hence, it makes Nest less sustainable than express and fastify itself. Still, Nest is a great tool and considering the advantages we mentioned above, it is worth learning. 146 | 147 | ## Credit 148 | 149 | ![Karahan Ozen](https://miro.medium.com/fit/c/60/60/1*c5g15x1w3Lj0-N7KAukM2A.jpeg) 150 | -------------------------------------------------------------------------------- /content/post/post7.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Best Practice for Node.js Folder Structure 3 | description: 'Project structuring is an important topic because the way you bootstrap your application can determine the whole development experience throughout the life of the project.' 4 | category: Node, Folder-Structure 5 | date: March 22 2021 6 | img: https://dummyimage.com/200x200/ffffff/1421d9.png&text=200x200 7 | --- 8 | 9 | # Best Practice for Node.js Folder Structure 10 | 11 | ## By [Yogesh Mishra](https://www.linkedin.com/in/yogimishra96/) 12 | 13 | ![best-practice-for-node-js-folder-structure](https://miro.medium.com/max/875/1*NBbGgfSrfimwxjuTuykCuw.jpeg) 14 | 15 | Best Practice for Node.js Folder Structure 16 | 17 | Project structuring is an important topic because the way you bootstrap your application can determine the whole development experience throughout the life of the project. 18 | 19 | # Routes- 20 | 21 | Where we define endpoints should be noun based and do not use verbs. 22 | 23 | `router.get("api/v1/get-book-list", getBookMethod); // avoid` `router.get("api/v1/book-list", getBookMethod); // please use` 24 | 25 | # Controller - 26 | 27 | Basic skeleton of the API should be there if the method is getting big, use a service file and move some logic there. Write reusable code and common functions. 28 | 29 | Ex. You can’t save a web socket circular object into an app instance of express. 30 | 31 | # Organizing Files around Module 32 | 33 | ![](https://miro.medium.com/max/855/0*zDvJS4qcybkXLwnc.png) 34 | 35 | ![](https://miro.medium.com/max/843/0*S0hItPkGciwIW9_n.png) 36 | 37 | ## 👉 Place Your Test Files Next to The Module 38 | 39 | Tests are not just for checking whether a module produces the expected output, they also document your modules. Because of this, it is easier to understand if test files are placed next to the implementation. 40 | 41 | Put your additional test files in a separate **test** folder to avoid confusion. 42 | 43 | ![](https://miro.medium.com/max/875/0*_6e-qMJTx3heZDdD.png) 44 | 45 | ## 👉 Use a `config` Directory 46 | 47 | To place your configuration files, use a **config** directory. 48 | 49 | ![](https://miro.medium.com/max/875/0*mfLuShflXVm362WT.png) 50 | 51 | ## 👉 All shell scripts in `scripts` folder 52 | 53 | Avoid writing long scripts in package.json. Create a separate file for that and use that file. 54 | 55 | ![](https://miro.medium.com/max/875/0*c6y7pzD9vqNEnpMi.png) 56 | 57 | ## 👉 Third-party API calls and common reusable code in `services` folder 58 | 59 | Third-party API integration in separate service files and maintain them in the `services` folder. 60 | 61 | To sign and verify a token create a separate `jwt-service` and import this to sign and verify the token. 62 | 63 | ![](https://miro.medium.com/max/875/0*lXIZnam0E-30fK8p.png) 64 | 65 | ## 👉 Directory for common utils 66 | 67 | Create a subfolder on the basis of type like `**server-utilities**`\- 68 | 69 | ![](https://miro.medium.com/max/875/0*jZ4euv2CIedQbOAI.png) 70 | 71 | ## 👉 DB directory for database-related stuff (MongoDB or Postgres) 72 | 73 | Let’s assume we are dealing with **Postgres**, then- 74 | 75 | ![](https://miro.medium.com/max/875/0*vSsID7_iC3uokosR.png) 76 | 77 | ## 👉 Request validation : express-validator 78 | 79 | Add an `express-validator` to validate and sanitize the request. Validation should be added on the model level and on the request level. 80 | 81 | ![](https://miro.medium.com/max/875/0*JjEijX7y25UB_u0s.png) 82 | 83 | ## 👉 Do not write every constant in the `.env` file 84 | 85 | Only server-related essential credentials should be there for third parties etc. 86 | 87 | Create a separate file and read from there like **environment.json** or put them in constants.js in utilities. 88 | 89 | `"doc": "apidoc -i app/ -o client/dist/eps-client/doc",` and `npm run doc apidoc.json` will be in parallel of `package.json` 90 | 91 | _Originally published at_ [_https://habilelabs.io_](http://habilelabs.io/best-practice-for-node-js-folder-structure/) _on September 23, 2022._ 92 | 93 | # Read More- 94 | 95 | ## Best Folder Structure for React Native Project 96 | 97 | ### By Muskan Jain 98 | 99 | [learn.habilelabs.io](https://learn.habilelabs.io/best-folder-structure-for-react-native-project-a46405bdba7) 100 | 101 | ## Async Hooks in Node.js- Features & Use Cases 102 | 103 | ### An easiest way to track your async resources! 104 | 105 | [learn.habilelabs.io](https://learn.habilelabs.io/async-hooks-in-node-js-features-use-cases-c8cd8372ba6b) 106 | 107 | ## Credit 108 | 109 | ![Habilelabs](https://miro.medium.com/fit/c/60/60/1*uq5xCKzivY-VHAY5erHUYg.jpeg) 110 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | // Global page headers: https://go.nuxtjs.dev/config-head 3 | head: { 4 | title: 'nuxt-blog : responsive blog site using nuxt | tailwind css', 5 | htmlAttrs: { 6 | lang: 'en', 7 | }, 8 | meta: [ 9 | { charset: 'utf-8' }, 10 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 11 | { hid: 'description', name: 'description', content: '' }, 12 | { name: 'format-detection', content: 'telephone=no' }, 13 | ], 14 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], 15 | }, 16 | content: { 17 | markdown: 18 | { prism: 19 | { 20 | theme: 'prism-themes/themes/prism-material-oceanic.css' 21 | } 22 | } 23 | }, 24 | // Global CSS: https://go.nuxtjs.dev/config-css 25 | css: [], 26 | 27 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 28 | plugins: [], 29 | 30 | // Auto import components: https://go.nuxtjs.dev/config-components 31 | components: true, 32 | 33 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 34 | buildModules: [ 35 | // https://go.nuxtjs.dev/typescript 36 | '@nuxt/typescript-build', 37 | // https://go.nuxtjs.dev/tailwindcss 38 | '@nuxtjs/tailwindcss', 39 | ], 40 | 41 | // Modules: https://go.nuxtjs.dev/config-modules 42 | modules: [ 43 | // https://go.nuxtjs.dev/axios 44 | '@nuxtjs/axios', 45 | '@nuxt/content' 46 | ], 47 | 48 | // Axios module configuration: https://go.nuxtjs.dev/config-axios 49 | axios: { 50 | // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 51 | baseURL: '/', 52 | }, 53 | 54 | // Build Configuration: https://go.nuxtjs.dev/config-build 55 | build: {}, 56 | generate: { 57 | dir: 'dist' 58 | } 59 | 60 | } 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nux", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "generate": "nuxt generate", 10 | "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .", 11 | "lint:prettier": "prettier --check .", 12 | "lint": "yarn lint:js && yarn lint:prettier", 13 | "lintfix": "prettier --write --list-different . && yarn lint:js --fix" 14 | }, 15 | "dependencies": { 16 | "@nuxt/content": "^1", 17 | "@nuxtjs/axios": "^5.13.6", 18 | "@vwjs/vw2": "^0.0.6", 19 | "core-js": "^3.25.3", 20 | "nuxt": "^2.15.8", 21 | "prism-themes": "^1.9.0", 22 | "vue": "^2.7.10", 23 | "vue-server-renderer": "^2.7.10", 24 | "vue-template-compiler": "^2.7.10" 25 | }, 26 | "devDependencies": { 27 | "@babel/eslint-parser": "^7.19.1", 28 | "@nuxt/types": "^2.15.8", 29 | "@nuxt/typescript-build": "^2.1.0", 30 | "@nuxtjs/eslint-config-typescript": "^11.0.0", 31 | "@nuxtjs/eslint-module": "^3.1.0", 32 | "@nuxtjs/tailwindcss": "^5.3.3", 33 | "@tailwindcss/typography": "^0.5.7", 34 | "eslint": "^8.24.0", 35 | "eslint-config-prettier": "^8.5.0", 36 | "eslint-plugin-nuxt": "^4.0.0", 37 | "eslint-plugin-vue": "^9.5.1", 38 | "postcss": "^8.4.17", 39 | "prettier": "^2.7.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /pages/_slug.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 34 | -------------------------------------------------------------------------------- /pages/about.vue: -------------------------------------------------------------------------------- 1 | 2 |
3 |

From the blog

4 |
5 |
7 | 8 |
9 |
11 |
12 |

13 | {{article.category}} 14 |

15 |
{{article.title}}
16 |

{{article.description}}

17 |
18 |
19 |

{{article.date}}

20 | Read More 21 | 23 | 24 | 25 | 26 | 27 |
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /pages/contact.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kalanakt/nuxtailwind/68a71dd5c62acc7d2f431d16b10a3764482aac8b/static/favicon.ico -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("@tailwindcss/typography")] 3 | }; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2018", 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"], 7 | "esModuleInterop": true, 8 | "allowJs": true, 9 | "sourceMap": true, 10 | "strict": true, 11 | "noEmit": true, 12 | "experimentalDecorators": true, 13 | "baseUrl": ".", 14 | "paths": { 15 | "~/*": ["./*"], 16 | "@/*": ["./*"] 17 | }, 18 | "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node", "@nuxt/content"] 19 | }, 20 | "exclude": ["node_modules", ".nuxt", "dist"] 21 | } 22 | --------------------------------------------------------------------------------