DEV Community: Alexander Gorbunov

WeWi for Azure Trial Hackathon

Alexander Gorbunov — Tue, 08 Mar 2022 19:48:45 +0000

Submission Category:

Computing Captains

Link to Code on GitHub

GorbunovAlex / weather-widget-new

Weather-widget with time

WeWi weather-widget

Namaste to everybody!

The idea of creating this app came to me after hours of useless searching for a weather-widget for a desktop on windows. So, I decided to create ideal weather-widget for me by myself :)

View on GitHub

Additional Resources / Info

Check the website I created for this app :) There you can try it!

http://20.101.42.222:3001/

Vite + Vue 3 issue with ports on MacOS

Alexander Gorbunov — Mon, 07 Feb 2022 15:47:40 +0000

Namaste to everyone! 🙏

Today I faced the issue with ports in Vite Vue project.

The trouble occured after installing Vite PWA plugin. I tried to check it and start a command:

yarn build && yarn preview

Than switching to the browser I saw this:

That was a bit confusing...

I found the solution here: https://github.com/vitejs/vite/discussions/6481

The issue is in port configuration:

you are experiencing this problem because the mac os version you are using took control over this port for a component even though these low port numbers shouldn't Ideally be used by a operating system

So, I started to use the following vite.config.ts option that solved my problems:

preview: {
    port: 4000
  },

You can find an explanation, why port 4000 was chosen in the link above :)

Thanks for reading!

UPDATE 18.02.22

As stated, this was fixed in Vite v2.8.0
So, you can just update your Vite version

Vue 3 + Vite + TypeScript + Quasar issue

Alexander Gorbunov — Sun, 23 Jan 2022 01:21:08 +0000

Namaste to everyone!🙏

I'd like to share with you an issue that I had to cope with today:)

It's important to mention, that I used vite cli command to create vue project, then I started adding extensions to it.

When I tried to add typescript to my exsisting project on Vue 3 + Vite + Quasar, I faced the problem:

Following the stipulations here (https://quasar.dev/quasar-cli/supporting-ts)
I received an error from the compiler : File "@quasar/app/tsconfig-preset" was not found.

So, I started to look for a solutions on github and stackoverflow, but found nothing there...

After trying commands likevue add quasar, I looked up in Quasar docs and found App Extensions section. But there I found instructions only for quasar cli:(

But not got discouraged I decided to try a command: yarn add @quasar/app

And voila! It works!:D

Thank you for reading and I hope that this information will be useful:)

P.S. I'm always open to discussion on any theme! Feel free to reach me!:) I'm on Discord: IngSm#0471

CSS Sticky Hover Solution

Alexander Gorbunov — Sat, 22 Jan 2022 03:57:56 +0000

Namaste to everybody!🙏

I'd like to share with you a small tip that is important for me today. The issue is when you use mobile devices to run through your web page, you see that tapping on a button hover effect remains "sticky". It's rather annoying...

The solution is here https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/

And it really has helped!😼 Moreover, you can do it with only css without any js.

Happiness to everybody!

P.S. I'm always open to discussion on interesting programming themes and not only connected to cs)

Vue 3 + Vite + Quasar issue

Alexander Gorbunov — Tue, 18 Jan 2022 11:58:13 +0000

Namaste to everybody!;)

I would like to share with you one issue that i had today with my set-up of Vue, Vite and Quasar. The issue is small and it won't get much of your time and I hope this article would be useful for somebody.

I had troubles with default Quasar prebuild icons. Built a dev server I received an error:

The request url "../vite-vue-quasar/node_modules/@quasar/extras/roboto-font/web-font/KFOmCnqEu92Fr1Mu4mxM.woff" is outside of Vite serving allow list.

The same error I had for icons and all Quasar extras.

I had the following vite.config.js structure:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: '@/assets/styles/quasar-variables.sass'
    })
  ],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})

The tip here is that from Vite v2.7 server strict mode is set to true by default and it restricts serving files outside of workspace root.

Link to official docs: https://vitejs.dev/config/#server-fs-strict

Below you can find an option to solve this problem with enabled strict mode, but I just turn the strict mode off.

export default defineConfig({
  server: {
    fs: {
      // Allow serving files from one level up to the project root
      strict: false,
    }
  },

Thank you for reading and I'm eager to hear if my decision is not right enough;)