teleren/devto huggingface dataset:
✨ How to create Custom Emmet Snippets in VS Code!
Tags: vscode, emmet, snippets, productivity
Published: 2020-11-09 15:42:04

## 👋 Hi again developers! 
### This post covers how you can use Custom Emmet Snippets in VS Code. With VS Code's new release: version 1.51!

> Emmet is very powerful and very productive! And the mix of Emmet & VS Code, is like never before. But sometimes you might want to generate an element that uses a long emmet snippet. [VS Code version 1.51](https://code.visualstudio.com/updates/v1_51#vscode) was released with this one and many more features! So let's begin! 🏃‍♂️


## 1. ➕ Creating a `snippets.json` file

We have to store our snippets inside of a `snippets.json` file. Pick a folder of your choice on your machine, and open that folder in VS Code. Create a new file called `snippets.json`

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604933459631/QOU_xebdJ.png)

Now fill that file as shown below. I have an example snippet for you to try
```json
{
  "html": {
    "snippets": {
      "yourSnippet": ".container>h1.title",
    }
  }
}
```
You can put as many other snippets you want!

## 2. 🔧 Configuration

It is pretty easy and simple to configure this. You can simply go into the VS Code Settings, by pressing `Ctrl + ,` or by going to the ⚙ and clicking on Settings.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604931466800/11pG2Ytr0.png)

Then search for a setting called **Extensions Path** and click on **Edit in settings.json**.

Now simply copy the **folder path** where you have your `snippets.json` file created, and paste that in the `"emmet.extensionsPath"` setting. Like this 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604934125117/Xf_v5nxkI.png)

![DONE](https://i.giphy.com/media/8JW82ndaYfmNoYAekM/source.gif)

That's it! Once you have put the path in the setting, you are good to go and use your own **Custom Emmet Snippets** in VS Code! 

![emmet snippet.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1604935920967/2qyBI9JyF.gif)

I hope this post helped you increase your productivity. Please consider giving it a like 💙, and commenting 💬 below your experience about this feature, and sharing it!

I also have a  [YouTube video](https://youtu.be/UB6cWXzYALk)  if you are interested in watching

{% youtube UB6cWXzYALk %}

Thanks for reading!!! 

VS Code theme used:  [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) 

Font used:  [Cascadia Code](https://github.com/microsoft/cascadia-code)
Debriefing of Hacktoberfest
Tags: hacktoberfest
Published: 2020-11-09 15:41:52

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nwu61qug3n38v0fugkbq.png)

### [Intro Heading]
Hacktoberfest has provided me multitude of new insights and allow me to meet wonderful people around the world.

I was introduce to Hacktoberfest opportunity through friend of mine. I first went in lightheartedly, not knowing the experience that I will have. After making my first PR, I immediately fell love with open source system and I had to participate more.

I then decided to create repo and designed to welcome new folks to make a PR without having in depth knowledge to coding. To my surprise, I came out learning different aspects and languages.

### Background

This is my first year participating to open source and I regret that I didn't participate in earlier events. I am joining Earnst and Young as full stack developer in January and I would love to help others to make their dream come true of becoming a software developer.

### Progress

I had came across a Github repo who made PR so easy and the structure was phenomenal. I then referenced his/her's repo to provide more new folks who's getting into open source by designing my own repo and set of instructions to PR. 


### Reflections
Through this experience, I was able to meet new people around world. I was surprise to see that some region of the  world prefer specific coding language over other. I also learned how many bright minds are out there by seeing what they coded and data structure that they pushed to my repo. I would like send my appreciation all of those who participated on my repo and Hacktoberfest to provide me with this wonderful, eye-opening experience.
How to stop uTorrent automatically starting with Windows?
Tags: utorrent, windows
Published: 2020-11-09 15:40:27

If you have recently installed or updated uTorrent for windows. You would have noticed that nowadays it starts on its own.
I used to disable uTorrent auto startup by disabling it in startup applications. But it does not work anymore.

**Method 1**

**Step 1.**

Open uTorrent 

Start>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fzgacodhbu2jjeah9bec.JPG)

**Step 2.**

>Type uTorrent


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fg96sdco2kcut53sf5bu.JPG)


**Step 3**

> Menu Bar>Options>Preferences


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kdunvz40bh6rcbshltdw.JPG)



**Step 4**

> General>Windows Integration>Uncheck Start uTorrent when Windows Starts

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0161wzt3h5a0wfxpsko5.JPG)


**Step 5** Click on Apply button>Ok

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/03wytm4uchywx4dmyro0.JPG)


**Method 2**

If method 1 did not work for you. You can use another method to disable uTorrent application.


**Step 1: Stop uTorrent application**

Open taskmanager

Press win(Windows key) + r > Type taskmgr 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mfn4q3rggg80auyezyk5.JPG)

**Step 2**

Stop uTorrent in Process

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgfv09w7msijq35jtz32.JPG)

**Step 3**

You have to remove a helper application that comes with uTorrent installation. 

Go to helper directory in your computer.


**C:\Users\<your-user>\AppData\Roaming\uTorrent\helper**

**AppData**

**Note:** AppData folder is hidden in windows 
Go inside your user folder. Then, enable show hidden folders.



**Note: "Your user" depends on the name of the user when you login in your computer.
You will have to go inside the directory. It will be present inside your user directory.**


Inside this **helper** directory there will be a helper.exe file, delete it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i0hq45ioc9aem78014i8.JPG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wbdtav3toh0oytbz4via.JPG)

Done!

uTorrent will not bother you anymore.
Step by step installation of XAMPP on Windows 10
Tags: database, datascience, tutorial
Published: 2020-11-09 15:39:07

# Introduction
XAMPP  is a free and open-source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

XAMPP stands for:

X: Cross Platform, as it supports all the moder operating systems like Windows, Mac OSX, Linux etc.

A: Apache Web Server

M: MySQL database management system.

P: PHP installation

P: Perl scripting language

## How to go about it

###Requirements:
Before stating the installation process, you should have the following;
1. A Computer with windows 10 Properly installed
2. A stable Internet connection

### Step1: Download Xampp
Firstly, go to the official Xampp website and download the windows version
[Click here](https://www.apachefriends.org/download.html)

![screencapture-apachefriends-org-download-html-2020-11-01-11_08_31_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604226026611/ijSFnDWCy.jpeg)

### Step 2: Run the installation package
Double click on the installation package or right click and click 'run as administator'


![Screenshot (15)_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604226759237/0kekxA22I.jpeg)


### Step 3: Choose the location for installation. It is recommended to use the default location. Click next

![Screenshot (20)_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604226927544/CI9p1T_rZ.jpeg)

### Step 4: Select your default installation language in the dropdown on the top left

![Screenshot (21)_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604227082950/iq3RGldtG.jpeg)

### Step 5: Uncheck or check the box
If you don't want to be redirected to the apache and friends site for more details on Xampp. Click on the next button to continue. This will start up the installation process. Just seat back and wait for the installation process to complete


![Screenshot (22)_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604227706534/B1liTPa5t.jpeg)

![Screenshot (25).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604228112170/_aut7YJG8.png)

### Step 6: Prompt
Occasionally, the installation process will prompt you to allow network access for the apache server. Once you permit this, the installation process will smoothly continue.

![Screenshot (26)_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604228136936/97wRdFikh.jpeg)


### Step 7: Finalizing the installation
Once this is all done the finale installation page appears. If you want to run Xampp instantly, check the box and click on finish. 

![Screenshot (28)_LI.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1604228342281/ER13Lawcd.jpeg)

![Screenshot (30).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604228592140/ewdAdLXQ5.png)

# Congratulation
Felicitation, you have successfully installed Xampp on your windows 10

![undraw_online_wishes_dlmr (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1604228477307/TYrZv8SDR.png)
Changing Your AWS Default Profile
Tags: aws
Published: 2020-11-09 14:20:04

As I've been working with AWS recently, I find myself struggling to do really simple things. Newbie errors. I [recently documented my struggles](https://dev.to/aohibbard/connecting-to-aws-amplify-3gi) with configuring an Amplify backend and wanted to return to the subject to reveal another issue that I had: changing the default profile.

Before beginning, I wanted to say a bit about what Amplify is. According to [AWS's description](https://aws.amazon.com/amplify/):
>AWS Amplify is a set of products and tools that enables mobile and front-end web developers to build and deploy secure, scalable full stack applications, powered by AWS. With Amplify, you can configure app backends in minutes, connect them to your app in just a few lines of code, and deploy static web apps in three steps.
In short, Amplify is a quick way to set up a backend. I'm using it in a shared project to run the backend of a React application.

Now my struggle: I was running a shell script in the application to create an account in the backend of the web application, and the script required that I call on my AWS profile alias. When you configure an AWS account the first time, the profile name will default to "default." For some reason, the script did not like the name 'default', even when assigned to an environment variable. 

AWS does not have the clearest documentation for how to change the name of a profile, but it turns out to be pretty easy. If you have configured your settings correctly, you should have two local files that contain your account settings such as API key: `~/.aws/config` and `~/.aws/credentials`. If you're in an editor like VS Code, these might not be visible so just run `open` before the path and you'll get something like a .rtf with your AWS configuration. You'll notice that in both files, account settings are listed and they having a header set in brackets, which contains the profile name. For the profile named default, simply delete the word default and assign the name you want. It must match in the two files. Save the two files. And that's it.

If you want to preserve this account as the default one, just remember the alias you have given the profile run the command `export AWS_PROFILE=<my_profile>` (with <my_profile> acting as the name of your profile). You can perform this step whenever you want to change the default AWS profile. And that it. Three simple steps to change the name of your AWS default profile.
Can everyone learn to code?
Tags: discuss, healthydebate, programming, learning
Published: 2020-11-09 15:16:51

I've wondered recently: can everyone learn to code?

The prideful egotistic elitist on my left shoulder whispers "No"; while the hopeful inclusive optimist on my right shoulder answers "Yes, of course!"

I definitely think anyone _could_ learn to code. Or said another way, there seems to be no correlation to race, gender, country, family or educational background and a person's ability to code. But could everyone? Are there people who can code and those who can not?

Or are the desires to become a programmer distributed in a way that "can" and "can't" become indistinguishable from "will" and "won't"?

![Kronk with his angel on his shoulder saying "No, no. He's got a point."](https://i.imgflip.com/3lac66.png)
Build a Hosted Dashboard from Google Sheets Data with WayScript
Tags: startup, wayscript, tutorial, serverless
Published: 2020-11-09 15:01:26

{% youtube mz8DFYgx4i0 %}

Introduction
------------

If you’re looking for a quick and simple way to create a dashboard to display data from Google Sheets, look no further than WayScript. Using the following script, you can have a dashboard up and running in under 2 minutes.

Building our Script
-------------------

First, an HTTP Trigger is needed to provide a URL in order to host the dashboard. Once this is added, a Dashboard Response module is attached to the tree. This allows the data to be displayed on the dashboard itself.  
  
Now, it’s time to import the data from Google Sheets. Insert a Google Sheets module between the Trigger and Response modules. At this point, your tree should look like this.  
  

![tutorial step #1](https://wayscript.com/blog_img/143/1.png)

  
  
Now that the Google Sheets module is inserted, choose a file to read from the toolbar on the left. When the file is loaded, import the desired columns; this creates variables that are used for the chart later in the script. It’s now time to add the chart that you want displayed using the Chart module and inserting it after the Sheets module.  
  
Begin creating the chart by selecting the type of chart desired and then inputting the aforementioned variables created from the imported columns. In the image below, a line chart has been selected and the corresponding column variables have been inserted into the x and y-axes. This generates a preview of the chart.  
  

![Tutorial step #2](https://wayscript.com/blog_img/143/2.png)

  
  
Next, the chart must be passed onto the Dashboard Response module. To do this, click on the module and navigate again to the toolbar to the left. At the bottom there is a “chart” box; drag this to the title box input above.  
  

![Tutorial Step #3](https://wayscript.com/blog_img/143/3.png)

  
  
Finally, turn the HTTP Trigger on by switching the slider to the active position. Click on the URL that appears, and the dashboard with the created chart opens in a new tab. WayScript provides the effortless ability to create this important tool that allow users to easily share data with others. To see the step-by-step process of creating this script, watch our YouTube video below!

  
  

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/marketplace/IPGJJGIe).
Jordan Scrapes California. Soon to be in AWS Lambda
Tags: webscraping, california, javascript, secretaryofstate
Published: 2021-01-29 12:46:16

---
title: Jordan Scrapes California. Soon to be in AWS Lambda
published: true
date: 2020-11-09 14:23:00 UTC
tags: WebScraping,california,Javascript,secretaryofstate
canonical_url: https://javascriptwebscrapingguy.com/jordan-scrapes-california-soon-to-be-in-aws-lambda/?utm_source=rss&utm_medium=rss&utm_campaign=jordan-scrapes-california-soon-to-be-in-aws-lambda
---

<iframe title="Scraping California Secretary of State. Part 1" width="640" height="360" src="https://www.youtube.com/embed/Z0AX9yBlNAk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Another great video today!

This improves upon the scraping done for California in a [previous post](https://javascriptwebscrapingguy.com/jordan-scrapes-secretary-of-states-california/).

This is the first part of the series which will be showing scraping California, submitting it to AWS Lambda so it can be run on regular basis, and inserting the data into AWS DynamoDB.

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [Jordan Scrapes California. Soon to be in AWS Lambda](https://javascriptwebscrapingguy.com/jordan-scrapes-california-soon-to-be-in-aws-lambda/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
1 Introduction
Published: 2020-11-06 06:04:13

MongoDB is a NoSQL database solution.
#1. Installing MongoDB
Install mongodb from mongodb.com
during installation the custom option and service option was selected in windows machine.
A data folder have to be created to store the data
In my windows machine I've created `C:\data\db`
The bin folder address is added to my environment variables

#2. Running MongoDB
Command to stop the automatically running mongodb server `net stop MongoDB`
Then running the mongodb server `mongod --dbpath "C:\data\db"`
On another terminal start mongodb shell `mongo`

#3. Some Operations
**Viewing all the databases** `show dbs`

**Creating & connecting** (if not exist) OR **connecting** (if exists) `use shop` 'shop' is my database name.

**Inserting one data in the collection**  named `products` is `db.products.insertOne( { name: "A book", price: 12.99 } )`
The `products` collection will be created if it not exists.

**Retrieving all the data of a collection** `db.products.find()`
To get a prettier output `db.products.find().pretty()`

#4. Few Stories Behind the scene
These are the layers of the big picture.
Previous layer communicate with the next next layer and thus the flow goes from Frontend to Database.
* Front-end UI
* Backend(server)
    Drivers(eg. nodejs, python, java)
    MongoDB Shell
* MongoDB Server
* Storage Engine
* Database

N.B: storage engine read and write data in two places.
Database - in this case process is slow
Memory - in this case the process is fast
srr-elapsedtimer | A new angular library for your project
Tags: angular, typescript, npm, angularlibrary
Published: 2020-11-09 14:13:59

Hey guys! 😊 I created a small Angular library named 'srr-elapsedtimer' which lets you to create a customizable elapsed timer which can be used in your Angular projects! Check it out and see whether it would be useful for your projects! Thank you! 😊 
https://www.npmjs.com/package/srr-elapsedtimer
Bahnschrift as System Font
Tags: configuration
Published: 2020-11-09 14:13:04

As someone who is always desperately (and yet unconsciously) seeking new and creative ways of avoiding what I actually intend to be doing, I have encountered the concept of Custom System Fonts many times over the years, and yet I do not recall any of them resulting in an outcome other than concession. Usually, whatever font you choose is going to look like shit and break stuff.

For instance, when I attempted to change Windows 10's system font to Acumin Pro (my latest typographical crush) recently, it was gorgeous!... And then I opened CopyQ, my clipboard manager, and saw this:

![CopyQ Broken Text](https://dev-to-uploads.s3.amazonaws.com/i/9pem4oes8tqa46x0a5vf.png)

I probably should’ve given up there, but instead, I reached out to my latest pet reference, Read It!

"[What's a good alternative system font?](https://www.reddit.com/r/Windows10/comments/dohzey/whats_a_good_alternative_system_font)" asked Leo_Grum to which FatFaceRikky replied with "Apparently MS wants or wanted to replace Segoe UI with Bahnschrift. Not sure if this plan is still current" along with a hyperlink to [Bahnschrift's Microsoft Documentation page](https://docs.microsoft.com/en-us/typography/font-list/bahnschrift).

*Bahnschrift* = *Railroad Writing*

I don't actually know anything about typography, but those of you who do will have your curiosity stimulated by the document, I'm sure:

> The current version of Bahnschrift began development in 2016. At the time, Google, Apple, Adobe, and Microsoft partnered to develop a common implementation of variable font technology and Bahnschrift was chosen to become Microsoft’s first variable font. To prepare for the transition from static to variable, the Bahnschrift source was completely rebuilt from the ground up by Aaron Bell of Saja Typeworks and was expanded in weight, character set (adding Extended Latin, Greek, and Cyrillic) and manual hinting to ensure high quality rendering on a wide range of devices.

![Bahnschrift Type Banner](https://www.davidblue.wtf/wp-content/uploads/Bahnschrift-Header.jpg)
Automation Fest: E-commerce Automation With Quickwork
Published: 2020-11-09 13:58:49

 Learn...
⚡ How to connect your e-commerce platform to Quickwork!
🤩 How to use integrations and APIs to automate e-commerce without any coding!
💸 How to build an e-commerce chatbot on WhatsApp or Facebook Messenger using your existing e-commerce store!

{% youtube STedHXEF1As %}