DEV Community: Manthankumar Satani

Recommended VSCode Extensions for Nuxt3 and Vue3 Development

Manthankumar Satani — Fri, 22 Jul 2022 08:12:37 +0000

Recommended VSCode Extensions

For Vue, Nuxt, HTML and CSS

Vue Language Features (Volar): Recommended for Vue3 and Nuxt3
Prettier - Code formatter Code formatter
Stylelint CSS Linting
Auto Close Tag Auto closing html tags
Auto Rename Tag auto rename closing or opening tag
axe Accessibility Linter: Give accessibility feedback right in the editor

For CSS framework of your choice

UnoCSS: Atomic CSS engine intellisense
Windi CSS Intellisense: Next generation utility-first CSS framework
Tailwind CSS IntelliSense: A utility-first CSS framework

For Typescript and Javascript

ESLint Code Linting

Other helpful ones

Import Cost: helps optimizing import to reduce the build size by making it more tree-shakable code
Code Spell Checker: helps to avoid spelling mistakes

How to restrict country to access your website with Netlify?

Manthankumar Satani — Thu, 19 May 2022 16:39:29 +0000

Why to restrict website access to specific/multiple countries or only allow one country to access your website read more

If you are using netlify to host your website then there is pretty good way to restrict access with certain conditions using redirect and rewrites read more

add _redirects file without any extension in dir that will serve your website

# _redirects
# serve blocked.html with beautiful url
/blocked  /blocked.html  200

# Redirect users from US to blocked page
/*  /blocked  301  Country=us

netlify will use the first matching route to redirect so make sure you prioritize the routes.
In above code block

Rule to serve static blocked.html with /blocked route
Rule to redirect all US the visitors to /blocked

blocked.html with appropriate message.

Watch Props in Vue/Nuxt Composition API

Manthankumar Satani — Sun, 15 May 2022 12:55:39 +0000

Watch dynamic props inside setup method in Nuxt3 or Vue3 CompositionAPI

<script lang="ts" setup>
import { defineProps, watch } from 'vue'

const prop = defineProps({
  value: { default: '', type: [String, Number] },
})

watch(
  () => prop.value,
  () => {
    console.log('prop value changed', prop.value)
  }
)
</script>

<template>
  <div>{{ value }}</div>
</template>

How to set proxy with authentication in selenium chromedriver python?

Manthankumar Satani — Sat, 14 May 2022 18:21:16 +0000

Selenium Chrome Proxy Authentication in Python

Setting chromedriver proxy with Selenium using Python

If you need to use a proxy with python and Selenium library with chromedriver you usually use the following code (Without any username and password:

This works fine unless proxy requires authentication. if the proxy requires you to log in with a username and password it will not work. In this case, you have to use more tricky solution that is explained below. By the way, if you whitelist your server IP address from the proxy provider or server it should not ask proxy credentials.

HTTP Proxy Authentication with Chromedriver in Selenium

To set up proxy authentication we will generate a special file and upload it to chromedriver dynamically using the following code below. This code configures selenium with chromedriver to use HTTP proxy that requires authentication with user/password pair.

Function get_chromedriver returns configured selenium webdriver that you can use in your application. This code is tested and works just fine.

Read more about onAuthRequired event in Chrome.

Watch Pinia store getters or state in Nuxt3/Vue3 inside setup method

Manthankumar Satani — Thu, 12 May 2022 07:15:05 +0000

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSomeStore } from '~~/store/some'

const some = useSomeStore()

// This will also create refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { someGetter, someStateVar } = storeToRefs(some)

watch(someGetter, () => {
  console.log('some changed', someGetter)
})

watch(someStateVar, () => {
  console.log('some state var changed', someStateVar)
})
</script>

Read more about using pinia store at https://pinia.vuejs.org/core-concepts/#using-the-store

How to host multiple Django Project under subdomains with uWSGI and NGINX on a single server?

Manthankumar Satani — Wed, 14 Apr 2021 10:42:09 +0000

How to host multiple Django Project under sub domains with uWSGI and NGINX on single server?

Apr 14 '21 Comments: 1 Answers: 0

I've been trying to deploy two Django projects on a single server using uWSGI and Unix socket Nginx, I've cross-checked the configuration it seems fine, but it behaves oddly. Let me give the project names A for first and B for second for better understanding and referencing.

For both projects…

Open Full Question