teleren/devto huggingface dataset:
WSL2 for web development
Published: 2020-09-03 16:36:47

---
title: WSL2 for web development
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3cfeq3t3gcvwq5teid8t.jpg
---

With the release of build 18361, Windows 10 introduces a new version of his Windows Subsystem Linux. It's amazing. It works very well for me, and that's how I have done.

I wouldn't say I like Windows as a development environment. I love Linux, and I love to use the terminal.  I've to say that I'm not bound to any particular kernel version or Linux distro. I like fundamental Linux utilities that speed up my routine.

### Prerequisites
- Windows 10 build 18361


## Part One: How to install
Open PowerShell as admin and type as follow.

```shell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
``` 
If you restart your computer, you can install a Linux distro downloading it on the Microsoft Store, but you will use the first version of WSL. Follow me to update.

WSL 2 has  [a lot ](https://docs.microsoft.com/en-us/windows/wsl/compare-versions) of improvements compared to its predecessor, to update type as follows.

```shell
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
``` 
Now you have to set WSL 2 as the default version (it will be in the upcoming Windows versions).

```shell
wsl --set-default-version 2
``` 
99% you get this error `0x1bc` because WSL 2 runs a real Linux kernel and you don't have one, you can install it from [here](https://aka.ms/wsl2kernel).

Now repeat the above command to set the default version to WSL2 finally. Restart your computer. 
Now you can install a Linux distro of your choice ([here](https://docs.microsoft.com/en-us/windows/wsl/install-win10#install-your-linux-distribution-of-choice)  all those available). I chose Ubuntu 20.04 because it has all the tools I need out of the box.
Launch the Linux app you've just installed, follow the on-screen instructions, and enjoy your Linux distro running inside Windows. 

## Part two: Node setup
To set up the Node environment, I highly recommend using nvm for two main reasons:

1. You can easily switch between Node versions
2. nvm installs Node in your home folder. It would be best if you never used npm with "sudo" (useful resources [here](https://dev.to/brylie/don-t-use-sudo-with-npm-install-56p9))

To install nvm, open your WSL, move to your home directory typing `cd` and type:

```shell
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
``` 
Now relaunch your terminal.

Type `nvm` for a list of all available commands. 

To install the LTS version of Node (and NPM) type as follow.

```shell
nvm install lts
``` 

That's it. Now you can use Node and NPM. 

```shell
npm i -g //installs packages globally without sudo
```
How to move forward and backward between commits in git
Tags: git, github, beginners, howto
Published: 2020-09-03 16:31:52

We always keep moving forward and backward between commits in `git`. Once you checked out a previous hash `git log` no more shows the next commits, we end up rebasing or resetting, but git provides a way to see all the commits, and we can checkout the next commits too from a previous state.

The simple and easiest way to do this is:


```bash
git log --online --all
```


Consider this example:

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

Here if we check out to commit id `95613ab Fix more TOC links` and then see the git history with `git log` or `git log --oneline` you will only see:

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

As we see here we missed the commits ahead of `95613ab`. You can see the HEAD with `git show-ref --head` but it will not show the commits in between the `HEAD` and the commit you checked out. So if you do `git log --oneline --all` you will get the whole history with the commit where the `HEAD` is right now.

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


Let us know if you know the better solution for this problem.

Cheers.
EDTF, a way to deal with uncertain dates
Tags: iso8601, mongodb, ecmascript, edtf
Published: 2020-09-03 16:31:39

---
title: EDTF, a way to deal with uncertain dates
published: true
description: Alternative title: Let's make date/time *less* precise!
tags: iso8601,mongodb,ecmascript,edtf
cover_image: https://p0.pikrepo.com/preview/868/115/old-calligraphy-manuscript.jpg
---


Working with digital humanities means delving into projects with a fair share of uncertain dates (e.g. "*Spring, 1850*") and periods ("*starting possibly around 1860, ending January 1865*").

I know what you're thinking, fellow architect/engineer/developer. *Uuugh, I can't even imagine how to describe and query this.*

Luckily, there's a standard for that. It's called EDTF (*Extended Date/Time Format*) and it is implemented over ISO 8601, the format ECMAScript - and, by extension, MongoDB - uses for date/time storage.

This is the basic ISO 8601 mask we all know and love:
```
yyyy-mm-ddThh:mm:ss[.mmm]z
```
Soothingly constant, right? Well, all the following are valid Level 1 EDTF strings:

- `1964/2008` - interval beginning sometime in 1964, ending sometime in 2008
- `2004-02-01/2005-02` - interval beginning on February 1, 2004 and ending February 2005
- `1984?` - possibly the year 1984, but not definitely
- `1985-04/..` - interval starting at 1985 April, end open
- `2001-21` - Spring, 2001

...yes, 21. The 21-24 code sequence refers to 'Spring', 'Summer', 'Autumn' and 'Winter'.

Level 2 ups the ante. Remember the `21 - Spring` code? Well, it comes back with a vengeance, sporting beauties such as...

- `1950-25` - Spring (Northern Hemisphere), 1950
- `1950-29` - Spring (Southern Hemisphere), 1950
- `1950S2` - some year between 1900 and 1999, estimated to be 1950
- `[1760-01,1760-02,1760-12..]` - January or February of 1760 or December 1760 or some later month

If you want to read the full standard you're clearly a masochist. Oh, and [here's the link](https://www.loc.gov/standards/datetime/). 

<sub>Cover image: [Old Calligraphy manuscript, Pikrepo](https://www.pikrepo.com/fczcf/old-calligraphy-manuscript
)</sub>
Dev.to Article Stats GitHub Action
Tags: actionshackathon, devto, stats, github
Published: 2020-09-03 16:27:38

### My Workflow
I made a [GitHub Action](https://github.com/marketplace/actions/dev-to-stats) that pulls stats from the Dev.to API. It currently just counts the total comments, page views, and reactions across all of your published articles.

I'm currently using the action to periodically collect the stats and save them in a [repo](https://github.com/kasuboski/stats) under `stats/dev-to.json`.

### Submission Category: 
This is a Wacky Wildcard entry, but it's fun to collect stats :wink:.


### Yaml File or Link to Code
It's a Typescript Action. Creating it from the template was fairly straightforward. Figuring out how to run it locally was a little rough.
{% github kasuboski/dev-to-stats-action %}

The repo where my stats are being aggregated.
{% github kasuboski/stats %}


### Additional Resources / Info
My workflow uses this action to [push changed files back to the repo](https://github.com/marketplace/actions/add-commit)
PostGIS databases and Shapefiles
Tags: postgis
Published: 2020-09-03 16:26:34

This is a very good article about PostGIS:

https://medium.com/@tjukanov/why-should-you-care-about-postgis-a-gentle-introduction-to-spatial-databases-9eccd26bc42b

GIS stands for geographic information system

https://www.emtec.digital/think-hub/blogs/tools-for-gis-database-spatial-queries/

How to install PostGIS on Mac:
https://morphocode.com/how-to-install-postgis-on-mac-os-x/
CSS Media Queries BreakPoints
Published: 2020-09-03 16:23:07


@media only screen and (max-width: 991px) {...}

@media only screen and (max-width: 767px) {...}


@media only screen and (min-width: 768px) {...}

@media only screen and (min-width: 992px) {...}




/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {...}
@media only screen and (min-width: 320px) and (max-width: 479px){ ... }
How to Copy a Big Object or Array From Console to Clipboard
Tags: javascript, beginners, webdev, drops
Published: 2020-09-03 16:22:45

Have you ever found yourself trying to `Ctrl-C` a `console.log()` output, only to get mad when it doesn't really work with long Objects and Arrays?

![Gif showing a failed attempt to copy a big object](https://dev-to-uploads.s3.amazonaws.com/i/655smltt9jovq8khg6gm.gif)

## Here's what you should do instead:

1 - Right-click the `console.log()` output
2 - Click "Store as global variable"
3 - Run `copy(temp1)`
4 - `Ctrl-V` it wherever you want

![Gif showing how to copy a long object](https://dev-to-uploads.s3.amazonaws.com/i/0rix6lr6mkjolggmprbu.gif)

Success! You may find that useful when debugging complex data structures or request payloads.

Let me know in the comments what else `copy()` might be useful for! 😄

---

Cover photo by [Paolo Nicolello](https://unsplash.com/@paul_nic?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on Unsplash

*Why the cover photo is a monkey? Well, I make the same face when I'm debugging.*

--- 

## Hey, let's connect 👋

[Follow me on Twitter](https://twitter.com/paladini_dev) and let me know you liked this article! 

And if you *really* liked it, make sure to share it with your friends, that'll help me a lot 😄
Why padding in a div affects other elements?
Tags: html, css, webdev, codenewbie
Published: 2020-09-03 16:20:14

This problem is documented in the official MDN docs.

>By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added - MDN

To handle this behavior, we make use of the `box-sizing` attribute and set it to `border-box` for all elements. Like so:

```css
* {
  box-sizing: border-box;
}
```

>`border-box` tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. - MDN

This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content.

The result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.

Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%
Promote programming and earn money
Tags: javascript, css, html, webdev
Published: 2020-09-03 16:08:55

⌨ Do you like technology? If yes, we have something for you!

Join our efforts to promote programming and JavaScript in a fun and entertaining way :)

Summon The JSON: JavaScript printed deck helps to make people familiar with programming while playing a card game. 🂠 🂠 🂠

It is received also with great enthusiasm by the pro dev community around the world because it also helps to learn programming functions.

Now you can join us and earn money! Become a STJ affiliate. You will receive:

- 5% of each sale made with your link $$$
- access to your affiliate panel showing your income 📈
- affiliate links to share on social media etc. 🔗
- ready to use creatives 📷 

Join STJ Affiliates now. Visit https://enlistly.com/account/sign_up/zNN9gAdDEXAQOsnL to create your free account and start earning money! 👍 👍 👍
#100DaysOfCloud | Day 10
Tags: aws, sqs, elasticbeanstalk, 100daysofcloud
Published: 2020-09-03 16:08:18

What Did I Learn -

In an SQS environment I can configure an EC2 auto scaling group to work along side the messaging queue based on how many messages are in the queue. SQS is pull based used to decouple components. SNS is push based and is able to send messages either by SMS, email, SQS, or HTTP. SES is scale-able and designed for marketing email notifications, can be sent to an S3 bucket. For Elastic Beanstalk there are 4 deployments, all at once, which everything is updated at once and instances are out of service while update is taking place, rolling, where each batch of instances is taken out while the deployment happens, rolling with additional batches, where elastic beanstalk launches additional batch of instances, deploys new version in batches, no down time for performance needed applications.

What Did I Do - 

We created a Kinesis stream, for this we will head to CloudFormation > Create a new stack, then specify the template URL as `https://s3.amazonaws.com/kinesis-demo-bucket/amazon-kinesis-data-visualization-sample/kinesis-data-vis-sample-app.template` then we name the stack then create the stack. We head to EC2 and we can see the instance that was generated, then we head to Kinesis, and streams and we can see our shards that were generated, then head to DynamoDB and tables and you can see our Kinesis stream that was generated. Then immutable deployment updates, where whole new instances across the board are created in new ASG, when new instances pass checks then they are moved to existing ASG and old instances removed.

For Tomorrow -

Tomorrow we are going over Dev theory with CICD with CodeDeploy
Enable syntax highlighting in your code snippets
Tags: productivity, codenewbie, codequality
Published: 2020-09-03 16:07:24

<span>Photo by <a href="https://unsplash.com/@cdr6934?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Chris Ried</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

I've noticed this on web on some sites they didn't have syntax highlighting for their code snippets the code is just white text on black background.
When you add your code snippets on the web or here on dev.to you can specify the language of the snippet in markdown while using it in that way the syntax highlighting is enabled.You can add it html and markdown.So it provides better readability. Hope this helps out someone.

**Example code snippet without specified language:**

```
const funYou = () => console.log("I am function 😃");
funYou();
```
```
def add(n1,n2):
    return n1 + n2
```

```
echo "Hello World"
```

```
{
   "Name": "jack",
   "Age": 25,
   "Location":"Spain"
}
```


You can add syntax highlighting by just adding the language name after 3rd backtick. just like following example:
<br/>

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


<br/>

**Example code snippet with specified language:**

```javascript
const funYou = () => console.log("I am function 😃");
funYou();
```


```python
def add(n1,n2):
    return n1 + n2
```

```shell
echo "Hello World"
```

```json
{
   "Name": "jack",
   "Age": 25,
   "Location":"Spain"
}
```

<br/>

#### **Conclusion:** All major languages are supported with markdown. This is just a suggestion that I want to make so if someone didn't know now you know. As always thanks for reading.

<br/>


#### **Connect with me:**

<a href="https://github.com/Pratham82/"><img src = "https://img.shields.io/badge/github-%222222.svg?&style=for-the-badge&logo=github&logoColor=white"></a>
<a href="https://www.linkedin.com/in/prathamesh-mali-20582318a/"><img src="https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" /></a>
<a href="https://twitter.com/Pratham_82"><img src="https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white" /></a>
<a href="mali.prathamesh82@gmail.com"><img src = "https://img.shields.io/badge/gmail-%23E4405F.svg?&style=for-the-badge&logo=gmail&logoColor=white" href="www.google.com" ></a>
How to make your own lookalike Facebook avatar
Tags: just4fun, tutorial
Published: 2020-09-03 16:04:18

Facebook recently has launched Avatars - a Bitmoji competitor, which allow users to make a lookalike avatar of themselves for use as profile picture or stickers in chat and comment. 

Let's learn how to use it to create a lovely avatar for yourself in this video:

{% youtube Sv-UykiUDz8 %}

Here's the virtual-lookalike version of me:

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

You can customise a lot of things, from skin colour to hair style, face shape, body shape, nose, mouth, eye shape, makeup, eyewear, outfit, headwear, and other accessories.

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

Then the app will automatically generate different stickers that you can use anywhere in your messenger chat or facebook posts and comments.

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

Have fun!

---

If you like the article, please [subscribe to our Youtube channel](http://bit.ly/techschoolguru) and [follow us on Twitter](https://twitter.com/techschoolguru) for more tutorials in the future.
Array 101: Spiral Traversal
Tags: cpp, beginners, codenewbie, tutorial
Published: 2020-09-03 15:56:17

This is a series of implementation problems for beginners in programming. The first part is on spiral traversal in two dimensional array.

##Question:
Given a two dimensional array with n row and m column.
We need to give the output a one-dimensional array in spiral order.

###input:
inputArray[][] ={
{1, 2, 3, 4},
{12,13,14,5},
{11,16,15,6},
{10, 9, 8, 7},
}
###output:
{1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16}

##Solution
Traverse the given array in right, down, left, and upward directions. 
One corner case is that we need to check if the total element in the spiral 1D array is already equal to row*column.

```
vector<int> spiralTraverse(vector<vector<int>> array) {

	int column = array[0].size();
	int row = array.size();

	vector<int>spiralArray; // output array

	int i = 0, j = 0, x = 0;

	int rowCount = row -1;
	int columnCount = column;
	int count=0;
	while (spiralArray.size() < row*column) {

		x = 0;

		while (x < columnCount) {
			spiralArray.push_back(array[i][j]);
			j++, x++; count++;
		}  //traverse right side through columns

		j--;
		columnCount--;
		i++; x = 0;
	  if(count < row*column)
		 while (x < rowCount) { // traverse downwards  through rows
			spiralArray.push_back(array[i][j]);
			i++, x++; count++;
		 } 
		
		rowCount--;
		x = 0, i--;
		j--;
		if(count < row*column)
		 while (x < columnCount) { // traverse left side
			spiralArray.push_back(array[i][j]);
			j--, x++; count++;
		 }
		columnCount--;

		j++;
		i--;
		x = 0;
    
		if(count < row*column)
		 while (x < rowCount) { // traverse upward through rows
			spiralArray.push_back(array[i][j]);
			i--, x++; count++;
		}
		rowCount--;
		i++;
		j++;
	 }

	return spiralArray;
}
```
COVID-19 Hits Las Vegas: Total Shutdown
Published: 2020-09-03 15:43:05



On Tuesday, the governor of Nevada Steve Sisolak ordered all nonessential businesses to close for a month in response to the COVID-19 threat. This includes all Las Vegas casinos as well as entertainment facilities: bars, restaurants, etc.

Sisolak’s order came into effect on March 19 and is to last for at least a month. Shutdowns are practiced nationwide. Self-isolation has proven to be the only trustworthy way to prevent the spread of the disease so far. 

According to American Gambling Association (AGA) 438 <a href="https://bigwinguide.com" style="color:red;">casinos mobile 2020</a> and 196 Native American casinos have been closed all over the country. That is approximately the two-thirds (64%) of all gambling institutions nationwide. It would cost the national economy over $21.3 billions. 

As of today, there are over 307 thousand people infected with COVID-19 all over the world according to the research published by world health organizations. Over 26 thousand people have been infected with the virus in the USA alone. According to the recent information, approximately 300 Americans have died of complications caused by the disease and about 176 have recovered.
Beginner Webpage form
Tags: webdev, html, css, beginners
Published: 2020-09-03 15:37:33

Hello guys,
Today I created a responsive from as a project of HTML/CSS.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xllr08d0g0o56y54hkp.jpg)

I am learning htmls/css as I have other works to di I can't give much time there.
But Learning is a continous process.
We need to learn things side by side.
##Link
You can see my project [here](https://jsfiddle.net/417age5k/1/).


##Hope You guys like it.
And it would be great help if you comment or suggest anything.
Thanks.
How to integrate Swagger UI in a .NET Core Web API application | Amoenus Dev
Tags: dotnet, swagger, tutorial, api
Published: 2020-09-03 15:35:28

---
title: How to integrate Swagger UI in a .NET Core Web API application | Amoenus Dev
published: true
description: Learn how to integrate Swagger with your .Net Core Web API (with a bonus at the end)
tags: dotnet, swagger, tutorial, API
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6ojhcswic3ckz0nju01m.png
canonical_url: https://amoenus.dev/swagger-for-dotnet-core-webapi
---
[Swagger](https://swagger.io/) tooling allows you to generate beautiful API documentation, including a UI to explore and test operations, directly from your routes, controllers and models.
Setting it up is simple but requires some code changes.
To enable swagger integration for your .NET Core Web API project you will need to:
- Install Swashbuckle.AspNetCore package from NuGet
- Change the `Startup.cs` class of your Net Core Web API application.
   - Add using statement for `OpenApiInfo` 
   - Modify `Configure(IApplicationBuilder app, IWebHostEnvironment env)`
   - Modify `ConfigureServices(IServiceCollection services)`

## Changes for `Startup.cs`
### Installing Swagger
From your project folder install the Swagger Nuget package (6.1.4 for this instance)
```Terminal
dotnet add package Swashbuckle.AspNetCore --version 6.1.4
```
### Using statement
```CSharp
using Microsoft.OpenApi.Models;
```
### Changes for `ConfigureServices()`
In the `ConfigureServices()` method you should add
```CSharp
services.AddMvc();
services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo
    {
        Title = "My Awesome API",
        Version = "v1"
    });
});
```
### Changes for `Configure()`
In the `Configure()` method you should add
```CSharp
app.UseSwagger();
app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "My Awesome API V1");
});
```
I prefer to enable it only for development
```CSharp
if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "My Awesome API V1");
    });
}
```
## Taking it for a spin
After all these changes, we are finally ready to test our new integration.
```Terminal
dotnet run
```
Navigate to [localhost:4200/swagger](localhost:4200/swagger) to see the SwaggerUI 
> Note: your port may be different

## Bonus: Customisation
Now that you have Swagger configured, you might want to change the default theme.
You can learn how to do this in this [blog post](https://amoenus.dev/swagger-dark-theme) 

Did you have any questions or feedback? Please share them in the comments 🤗