teleren/devto huggingface dataset:
How to: Enable automatic import sorting in VS Code
Tags: javascript, vscode, webdev
Published: 2022-03-10 02:58:13

---
title: How to: Enable automatic import sorting in VS Code
published: true
date: 2022-03-09 00:00:00 UTC
tags: javascript, vscode, webdev
canonical_url: https://blog.shanemitchell.dev/how-to-organize-imports-on-save/
---

[![Sorted ES6 imports](https://blog.shanemitchell.dev/static/9482c9283fa42138ce86975623e280a9/f058b/splash.png "Sorted ES6 imports")](/static/9482c9283fa42138ce86975623e280a9/d5bfb/splash.png)

There’s a VS Code setting that enables automatic organizing of imports on file saves.

It primarily does two things:
- sorts imports based on ESLint settings
- removes any unused imports

Aside from being a timesaver, this also avoids linting errors (which is especially useful in CI/CD codebases where linting errors will stop a job from completing).

What’s great is you can set it in your user or project settings and forget about it, and it’s only a couple lines.

```js
// settings.json

{
  // put this in your settings object
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
  },
}
```

And that’s it! Now when you save, your imports magically sort themselves out!

![Imports automatically organizing themselves](https://blog.shanemitchell.dev/86df6ee6b6d0ac0a7ad239b787a5332f/sorting-imports.gif)
[Azure Trial Hackathon - Face Mask Detector]
Tags: azuretrialhack
Published: 2022-03-08 23:59:42

### Overview of My Submission
This project consists of a mobile application that detects if a person wears a mask or not in a video. It combines the output of 2 Azure AI Cognitive Services:

1. [Azure Video Analyzer](https://azure.microsoft.com/en-us/products/video-analyzer/)
2. [Azure Custom Vision](https://azure.microsoft.com/en-us/services/cognitive-services/custom-vision-service/)

The application is written in C# using [Xamarin] (https://dotnet.microsoft.com/en-us/apps/xamarin), which allows to deliver a cross-platform mobile application that can run in Windows, Android, and iOS among other platforms.

App details:

- You can record a local video
- You can upload the video to Azure Video Analyzer
- You can see a list of videos from Azure Video Analyzer service
- You can access the details of a video

Azure Video Analyzer service doesn't tell you if you are wearing a mask or not, but it will return frames from the video. That's where Azure Custom Vision enters: Using Object Detection capabilities from Custom Vision project, I could label "mask" zones and "no-mask" zones. Then, I send the frame from Video Analyzer to Custom Vision so it can tell me if the person is wearing a mask or not.
 
### Submission Category: 
AI Aces

### Link to Code on GitHub
[Code](https://github.com/icebeam7/FaceMaskAppDetection/)

### Additional Resources / Info

Image 1: Application Menu
![Application Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl7w0kf1j97jz062b52i.png)

Image 2: Recording a video
![Recording a video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1tf71el6i4ys9l0zxyf.png)

Image 3: Wearing a mask 
![Wearing a mask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpmilmzs1j09p4u8xol0.png)

Image 4: Accessing the video list
![Accesing the video list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4plwpdrbdyx2t4st7hx.png)

Image 5: Accessing video details: No mask / Mask detection
![Accessing video details: No mask / Mask detection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwq7mpg2vvs48g92cdyj.png)

Image 6: Adding mask and no mask tags
![Adding mask and no mask tags](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4k39f0uewn5mtco2kpq.png)

Image 7: Prediction
![Prediction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh1wqnv9810vejvnjilw.png)
No code. 100% useful. Azure Power Apps work at step 0.
Tags: azuretrialhack
Published: 2022-03-08 23:58:54


### Overview of My Submission

I've been following the Azure Trial Hack challenge, and I can't believe there's only one entry in the Low-Code Legends category. [Hat tip to Bhagya for doing some good work](https://dev.to/kithminiii/employee-management-system-45b4).

Given the field size of one, I'm sure this no-code (literally in every way) submission won't even merit a mention. It may not even qualify! It just has to be said how much this platform gives you though. I'm calling it step zero because I just created the app, and exported the app manifest. All this functionality is for free, no work required.

Let me show you what I did with Power Apps Canvas, and what you get for free when you first create a project and point it to a data source like Sharepoint. It's like free productivity, and everyone should be using this tool.

Including this post writeup, I'm 15 minutes in and it's the end of the competition. I shouldn't be able to produce anything, but Power Apps has my back. Let's see...

### Sharepoint list
I already have a Sharepoint list that I've been using to track my team's portfolio of projects.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eknma3lzec37dcad7u4.png)

Ok, cool. That's useful. I use it and love it.

Now... I'm going to create a new Power App from the Sharepoint template, pick that list, and here's a full working app. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3sfuezchqx6wxi9hooe.png)

It figured everything out. Read, filter, sort, create and edit.

Look, it even pulled in all my list options.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0pz7lb6jt7iaofx84fp.png)
 
Not awful, huh?

That'z no code for ya!


### Submission Category: 

Low-Code Legends


### Link to Code on GitHub
{% github https://github.com/dbowling/azuretrialhack-no-code %}


Microsoft: give me a prize, and I'll maybe fill out a real app. But who needs to, this took no time at all.
Day 545 : No Sunshine Tomorrow
Tags: hiphop, code, coding, lifelongdev
Published: 2022-03-08 23:56:44

_liner notes_:
- Professional : Today went pretty well. Got a feature working that was breaking my brain for the past couple of days. haha. Did some styling. I just need to clean up the code and do some refactoring, but it looks like everything is working. Not bad for a demo application. Also looked into any forms or documentation that I need to fill out before my trip. Really hoping it doesn't get cancelled. Sometimes it's like there's no sunshine tomorrow. Everytime I hope to travel abroad, it's always something blocking it beyond my control.

- Personal : I was able to add speech to text working on both the client side and admin dashboard and get the results saved in the database. I also added the ability to highlight a question. Now I just need to get the stuff to show up on the overlay that will be live streamed. To end the night, I watched an episode of Atlanta and went to bed.


![A sun-setting Nature scene in Gold Creek Pond, WA, USA where going from front to back, there is a lake, then a forest of tall pine trees and a large snow topped mountain chain ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx8diwbw5uamwjpzhvqi.jpg)

Going to see if I can get the overlay site to display the speech to text results and any highlighted questions. I also want to get the design I started working on finished so I can get a t-shirt ordered in time for my trip. Maybe I'll also get some tracks in for the radio show. Then I'll watch another episode of Atlanta before bed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube FfIUp6TLLuk %}
Guess Who—My Azure Trial Hackathon Submission
Tags: azuretrialhack, azureai, guesswhogame, java
Published: 2022-03-08 23:56:08

### Overview of My Submission

[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

A [Guess Who](https://guesswho-app.azurewebsites.net) game implemented in [Java](https://www.java.com/en/) on the backend, vanilla JavaScript on the frontend, and backed by [Azure Cognitive Services](https://azure.microsoft.com/en-us/services/cognitive-services)&mdash;specifically the [Face API](https://azure.microsoft.com/en-us/services/cognitive-services/face/) is used by computer player to "see" and detect game character attributes and the [Speech API](https://azure.microsoft.com/en-us/services/cognitive-services/speech-services/) is used for game play communication between computer and human player.

*Here's a very high-level overview of the system.*
![guess who architecture](https://guesswho-app.azurewebsites.net/static/images/guess-who-architecture-white.png)

![spacer](https://i.postimg.cc/43t0gVrf/spacer.png)

### Submission Category: 

[Note]: # (AI Aces, Computing Captains, Low-Code Legends, Java Jackpot, or Wacky Wildcards:)

**Java Jackpot** - the backend is running a Java [Quarkus](https://quarkus.io/) application deployed to [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/). 

![spacer](https://guesswho-app.azurewebsites.net/static/images/spacer.png)

### Link to Code on GitHub

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)
[Note]: # (Your repository must include a README)
[Note]: # (You must use and list a permissive license for your code: MIT, Apache-2)

{% github github.com/ikumen/guess-who-azure-hack %}


### Additional Resources / Info

[Note:] # Screenshots/demo videos are encouraged!
Demo of game: [https://guesswho-app.azurewebsites.net/](https://guesswho-app.azurewebsites.net/)

Unfortunately it's only about 80% there, but I wanted to share what I was able to accomplish. I learned a lot&mdash;it's my first time using Azure Cognitive services and I was amaze by what you can do in little time. Thanks to Dev for hosting the hackathon.

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly. DEV will not split prizes as per our rules)
Semblance - Azure Trial Hackathon Submission
Tags: azuretrialhack, azure, go, game
Published: 2022-03-08 23:55:56

##Overview of My Submission
Semblance is a web based game, where you have to correctly describe an image using a word. You have 3 chances to guess every image, after which you lose one life out of five. I have used the  [Random Image API](https://random.imagecdn.app/) to fetch images and then used [Azure's Computer Vision Service](https://azure.microsoft.com/en-in/services/cognitive-services/computer-vision/) to generate tags for the image. The user must guess one of these tags. I used Golang for the server and APIs and built the UI using Webflow.
##Submission Category
Wacky Wildcards, AI Aces
##Live Link
 https://semblance-game.herokuapp.com
##Link to Code on GitHub
{% embed https://github.com/deepto98/semblance-game %}
##SCREENSHOTS

1. Game starts
![Game starts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf4qy0mgsp8p1kvyej9w.png)
2. Wrong Guess
![Wrong Guess](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy9yqdwf7lbw7i115vnf.png)
3. Second Guess Entered
![Second Guess Entered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4nbib9wovfu5r5ag9wd.png)
4. Correct Answer
![Correct Answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m9wolk7q5z7ytfwx18w.png)
Do check it out 😀
Embellecer importaciones absolutas con alias en nextjs
Tags: react, nextjs, javascript
Published: 2022-03-08 23:53:58

---
title: Embellecer importaciones absolutas con alias en nextjs
published: true
description: Estas trabajando en un proyecto grande o pequeño y algunas de sus declaraciones de importación se ven algo asi ../../../component
tags: react, nextjs,nextjs, javaScript
cover_image: https://www.wootsbot.dev/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fembellecer-importaciones-absolutas-con-alias-en-nextjs%2Falias-01.png&w=3840&q=100
---

Estas trabajando en un proyecto grande o pequeño y algunas de sus declaraciones de importación se ven algo asi `import Component from '../../../Component'`.

Desde Next.js `v9.4.x` y posteriores, hace que la configuración de importaciones absolutas sea muy simple para proyectos de JavaScript y TypeScript.
Todo lo que necesita hacer es agregar la configuración `baseUrl` a `jsconfig.json` [(proyectos JS)](https://code.visualstudio.com/docs/languages/jsconfig#_jsconfig-options) o `tsconfig.json` [(proyectos TS)](https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url).


```js
// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}
```

Esto permitirá importaciones absolutas desde `"."` (el directorio raíz).

Los editores como VSCode admiten automáticamente la configuración en jsconfig.json, por lo que `Command + Click` para saltar al origen de un archivo funcionará como de costumbre.
[Atom e IntelliJ](https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion) también tienen soporte para reescrituras.

## Embellecer con Alias

Además, Next.js `v9.4.x` también admite la opción de rutas, que le permite crear alias de módulos personalizados.
Por ejemplo:

```js
// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"]
    }
  }
}
```

Luego puede usar su alias así:

```jsx
// importacion absoluta 'components/button'
import Button from '@/components/Button';
```

## Conclusión

Entonces las importaciones absolutas en Next.js son muy fáciles de configurar, pueden ser muy útiles para proyectos grandes.
Pero por que no simplemente tener una mejor **DX** (Experiencia de Desarrollador).

links: 
- https://www.wootsbot.dev/blog/embellecer-importaciones-absolutas-con-alias-en-nextjs
Shulker - An YouTube Companion App for Education
Tags: azuretrialhack, python, react, azure
Published: 2022-03-08 23:53:35

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ng61e62611g5j3bevcq.jpeg)
 
### Overview of My Submission
As students all over the world were forced to attend online classes, YouTube became a popular go-to option for a lot of students (like me 😬) who were unable to understand online lectures.

While studying via YouTube videos, I often found myself getting distracted (by Minecraft videos 😅) and wasted a good number of hours trapped in the recommended videos.

To overcome that we came up with this idea of having a companion application where you can create categories and add a bunch of channels which will allow you to focus on content which is necessary and avoid unnecessary distractions.

To make the application more useful, we integrated Azure's Cognitive Services for 

- Speech to Text for generating transcriptions
- Sentiment Analysis and Opinion Mining for rating the video (because YouTube removed dislike counts ☹️)
- Azure ML to train an AI powered Quiz Generator
- Summary of the video in text format (so that you do not waste time on the wrong video 🤓)

### Submission Category: 

##### AI Aces


### Link to Code on GitHub

{% github https://github.com/0xCompyler/shulker %}

### Additional Resources / Info

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki08f6hplci55xp6o6h6.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvbm8xpn4b8ecwmrlhx8.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uohndfm25iz6i57vkota.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syfd7lu8qv75fdetc4tk.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ib9f5x5d6bqw5a961uf.png)
 
Link to website: [https://betteryoutubeclient.vercel.app/](https://betteryoutubeclient.vercel.app/)

#### Built By 😎

Arijit Roy - [GitHub](https://github.com/0xCompyler) - @radioactive11 

Kartik Goel - [GitHub](https://github.com/kg-kartik) - @kgkartik 
Boidushya Bhattacharyay - [GitHub](https://github.com/boidushya) - @boidushya 

Yashwin Saini - [GitHub](https://github.com/yash-wins) - @yashwinsaini
Monitor New DEV.to Comments With Azure Cloud IoT Hub and Raspberry PI ☁️
Tags: azuretrialhack, azure, iot, forem
Published: 2022-03-08 23:50:21

**Use the Azure Cloud and Forem DEV API to alert a device when a new comment is made on your DEV.to article. Blink an LED on a raspberry PI and read out the comment using a text to speech engine (connect the Raspberry PI to a speaker e.g. alexa for extra effect).**
**Why this application?, Why not? 😀**

### Overview of My Submission
Get alerted of new comments on your DEV.to articles. 
Azure Cloud app interacts with an end device through the Azure IoT Hub SDK to send the commenter username and comment content. Device reads out comment using a speech engine (and blinks an LED if the end device is a raspberry pi connected to an LED).

### Demo Video
EDIT: Adding a demo video to show the concept working.
 {% youtube https://www.youtube.com/watch?v=X1Y-008UNpY %} 

### Core technologies and kits overview

✔️ [DEV Forem API](https://developers.forem.com/api).
✔️ Azure Linux Virtual Machines.
✔️ Azure IoT Hub.
✔️ Python Requests Module.
✔️ Python Text to Speech Engine.
✔️ Raspberry PI.

If using MQTT:
✔️ Mosquitto MQTT broker.
✔️ Paho MQTT Client.

### Submission Category: 
**Wacky Wildcards**
Uses **Azure Linux Virtual Machines** and **Azure IoT Hub.**


### Link to Code on GitHub

{% github https://github.com/funbeedev/Monitor-Devto-Comments-With-AzureCloud/ %}

### Additional Info

Consider giving the [GitHub repo](https://github.com/funbeedev/Monitor-Devto-Comments-With-AzureCloud/) a ⭐. Contributions and ideas are also welcome!

Plans for the future of this application:
- More use of Azure resources 
- Refactoring 
- Stability improvement 
- Lots more cool stuff with the Raspberry PI

**Consider checking out my website [inspirezone.tech](https://inspirezone.tech/), a developer blog and growing [dev community](https://community.inspirezone.tech/) 💻**
Azure Trial Hackathon - Speech Controlled Web Desktop
Tags: azuretrialhack, webdev, react, javascript
Published: 2022-03-08 23:48:49

### Overview of My Submission

A web-based desktop, called "ReShell", which responds to your voice.

ReShell is a web-based desktop & mobile user interface featuring individual "portals," or collections of apps.

ReShell extends [Create React App](https://create-react-app.dev/) with a window management system, multiple portal handling, some core applications and utilities, and utilizes [Google's zx JavaScript Bash replacement utility](https://github.com/google/zx) to do some file system management.


### Submission Category: 

Wacky Wildcards


### Link to Code on GitHub

{% github https://github.com/zenOSmosis/reshell %}



### Additional Resources / Info

Video demonstrating speech control - 
https://user-images.githubusercontent.com/1139657/157443171-d35decb7-5fd2-460d-b95e-cae7d7b28a80.mov

![ReShell Web Desktop](https://user-images.githubusercontent.com/1139657/157346532-a62db462-292c-4d5d-91d0-17904646d58a.jpeg)


[Source Code](https://github.com/zenOSmosis/reshell)

[Demo](https://reshell.org/speech-commander)
The difference between Web 2 and Web 3.
Tags: blockchain, zuriteam, blockgames, nestcoin
Published: 2022-03-08 23:46:47

## The World Wide Web.
Web technology(Web) is a set of techniques and tools used to communicate between devices on the internet. Web technology is consists of the world wide web, the browser (client-side), Web server, and Web pages. Web technologies developed from Web 1.0, the first stage of the world wide web’s evolution, from fourthly 1991 to 2004. This then developed to  Web 2.0, Which is the basis of the social websites, and finally, the much talk about, Web 3.0, the Semantic Web. Web 1.0 is the first stage of the Web, it is characterized by limited web content creators hence little content available for the users. It consists of static pages which are built using a Common Gateway Interface(CGI) or Server-Side Includes. It is a read-only website. Web 2.0 is the evolution of the web from Web 1.0. In this stage of web evolution, we see a lot of content creators coming into the web space. There is an interaction between people over the internet. This gives rise to social media and networking. It involves the read and writes operation. Web 3.0 is the future of the World wide web in which data is personalized. It gives ownership of data to individuals and it is more than read-write. It also involves interaction. It is a semantic web, such that the A.I. is incorporated into the web and machine able to make create, share and connect through search and analysis.  
   Web 2.0 is a read and write base technology, this gives rise to the interaction between the user and machine. The users can create content like blogs and wikis and this birthed social media and networking, Blogging, and E-commerce.Web 2.0 involves the sharing of content on the Web but Web 3.0 is more than that. Web 3.0 is more than a read-write, it also involves the making of the Web a database. This gives rise to the Live-Streams and webinars. The gain of Web 2.0 on the users' ability to read and write on the web gives rise to the creation of Web Applications using various web Technologies and a scripting language such as Javascript. Web 3.0 brings natural language processing into the web, hence, computers can distinguish information like humans and bring about the creation of Smart Apps. This will make advertising to behavioural unlike interactive advertising as we have in Web 2.0.
      Web 3.0 is a semantic Web, a Web where data are linked. Data are stored on the web, build vocabularies and write rules for handling them. This is utilised in the Blockchains technologies, where data are decentralised on devices and then linked together. This gives rise to Decentralized Application Dapps.In Web 2.0 data can only be shared as we have seen in the creation of the blogs and social networking sites. In conclusion, Web 3.0 is a Semantic Web while  Web 2.0 is a Networking Web.
`**

##The Blockgames
The Blockgames(https://blockgames.gg) is a highly competitive game competition focusing on using blockchain technology to solve a real life problems. The training is runs by zuri team limited( https://zuri.team/) and Nestcoin(https://nestcoin.com. It ia a 2-phased training.