teleren/devto huggingface dataset:
.NET Basic Introduction
Tags: webdev, csharp
Published: 2021-06-11 16:33:11

.NET as a whole is what they call "Developer Platform" i.e. Languages + Libraries
.NET can be written in [C#](https://docs.microsoft.com/en-us/dotnet/csharp/) , F# or Visual Basic.
C# is one of language in .NET
`.NET Core- Win, Mac, Linux`
`.NET Framework- Websites, Apps for Windows`
`Xamarin/Mono- .NET for Mobile`
<img src="https://dotnet.microsoft.com/static/images/illustrations/swimlane-architecture-framework.svg?v=ZuTW7j9pS1oiuMqx3E-Xvb9OEM_8ajDEcHbecyjRtLA">

>ASP.NET
Free. Cross-platform. Open source.
A framework for building web apps and services with .NET and C#.

#ASP basic Introduction- Reference w3School Old [Article](http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/aspnet/aspnet.asp.html)
```
Classic ASP - Active Server Pages
Active Server Pages (ASP), also known as Classic ASP, was introduced in 1998 as Microsoft's first server side scripting engine.

ASP is a technology that enables scripts in web pages to be executed by an Internet server.

ASP pages have the file extension .asp, and are normally written in VBScript.

If you want to learn Classic ASP, visit our Classic ASP Tutorial.

ASP.NET
ASP.NET is a new ASP generation. It is not compatible with Classic ASP, but ASP.NET may include Classic ASP.

ASP.NET pages are compiled, which makes them faster than Classic ASP.

ASP.NET has better language support, a large set of user controls, XML-based components, and integrated user authentication.

ASP.NET pages have the extension .aspx, and are normally written in VB (Visual Basic) or C# (C sharp).

User controls in ASP.NET can be written in different languages, including C++ and Java.

When a browser requests an ASP.NET file, the ASP.NET engine reads the file, compiles and executes the scripts in the file, and returns the result to the browser as plain HTML.

ASP.NET Razor
Razor is a new and simple markup syntax for embedding server code into ASP.NET web pages, much like Classic ASP.

Razor has the power of traditional ASP.NET, but is easier to use and easier to learn.

ASP.NET Programming Languages
This tutorial covers the following programming languages:

Visual Basic (VB.NET)
C# (Pronounced C sharp)
ASP.NET Server Technologies
This tutorial covers the following server technologies:

Web Pages (with Razor syntax)
MVC (Model View Controller)
Web Forms (traditional ASP.NET)
ASP.NET Development Tools
ASP.NET supports the following development tools:

WebMatrix
Visual Web Developer
Visual Studio
This tutorial uses WebMatrix for Web Pages, and Visual Web Developer for MVC and Web Forms.

ASP.NET File Extensions
Classic ASP files have the file extension .asp
ASP.NET files have the file extension .aspx
ASP.NET files with Razor C# syntax have the file extension .cshtml
ASP.NET files with Razor VB syntax have the file extension .vbhtml
```
JavaScript Quick Tip: Make Function Arguments Required With Default Parameters
Tags: javascript, typescript
Published: 2021-06-11 16:24:16

Have you ever written code like this?

```JavaScript
const myFunction = (argument) => {
  if (argument == null) {
    throw new Error('argument is a required argument');
  }
}
```

Guarding against invalid arguments is perfectly fine. It's way better than failing at some random point in your function with a usually pretty obscure error message. But writing guard statements over and over again can bloat code pretty fast.

You could, of course, write a helper function for this, like the one below, which is already better.

```JavaScript
const assertPresent = (value, name) => {
  if (value == null) throw new Error(`${name} is a required argument`);
};
```

You can then assert the presence of a parameter on the first lines of your function like this:

```JavaScript
const myFunction = (argument) => {
  assertPresent(argument, 'argument');
  // further processing...
};
```

In my opinion, however, this still drives the reader away from the most important part of your function: its actual logic. Gladly, there is another way that moves assertions from the body of your function to its parameter list.

## The Code

You can use default parameters to make function arguments required. For this to work, you first need a helper function that immediately throws an error:

```JavaScript
const required = (parameterName) => throw new Error(`${parameterName} is a required argument`);
```

And you can then integrate this function like this:

```JavaScript
const myFunction = (argument = required('argument')) => {
  // processing...
};
```

From now on, when users call your functions like this:

```JavaScript
myFunction(); // => Error: argument is a required argument
```

an error is thrown because not providing the argument triggers the required function, which immediately throws a readable error message.

This way prevents that your function body gets bloated with assertions you can move to the function's head. And it preserves semantics way better.

### One Caveat

This solution is not fully functionally equivalent to the original code. Default parameters don't catch null because it's an explicitly set reference. If you need to handle null properly, you won't be able to do it with the default parameter solution.

## The Whole Tip As An Image

If you like visual content more, or if you want to store it for later, I put all this into one single image for you. I hope you like it!

![A picture showcasing the above code](https://cdn.hashnode.com/res/hashnode/image/upload/v1623430607774/K6fhH1nIS.png)

## Before You Leave

If you would love to read even more content like this, feel free to visit me on [Twitter](https://twitter.com/intent/follow?screen_name=oliverjumpertz) or [LinkedIn](https://www.linkedin.com/in/oliverjumpertz/).

I'd love to count you as my ever-growing group of awesome friends!
WAO: How do you get promoted?
Tags: watercooler, discuss, wronganswersonly
Published: 2021-06-11 16:14:50

_Cover photo by [Michal Matlon](https://unsplash.com/@michalmatlon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/wrong-answer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
 
---

## Wrong Answers Only

Whether getting that "Senior" title, going into management, or going above Senior, how do you get recognized and promoted?

---

Comment your wrong answer!
How To Get Black Working in PyCharm in 2021
Tags: pycharm, python, black
Published: 2021-06-11 15:58:58

---
title: How To Get Black Working in PyCharm in 2021
published: true
description: A quick guide to getting Black working _in the background_ on Pycharm
tags: pycharm, python, black
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2brfzj1q4ub4c2ojlyj.jpeg
---
tl;dr install [this plugin](https://plugins.jetbrains.com/plugin/14321-blackconnect) and have  PyCharm start `blackd` via a shell script on launch. Reassign the "reformat code" keyboard shortcut to call the plugin.

## Immediate Performance Issues

Whilst making my yearly pilgrimage from vim to PyCharm (I usually go back to vim after a bit), I found it less than straightforward to apply the [black](https://black.readthedocs.io/en/stable/) formatter instead of using PyCharm's built-in "reformat code" settings.

For those who don't know what black is, it's a way to never think about formatting in Python ever again.

After following [the Black docs](https://black.readthedocs.io/en/stable/integrations/editors.html#pycharm-intellij-idea) about setting black up in PyCharm, I found the file watcher for it to be incredibly slow, interrupting the flow of my work while I waited for it to format a single file.

So I instead turned off the file watcher and remapped the "reformat code" keyboard shortcut to instead call `black` on the currently displayed file. This is great, but it also opens a terminal and displays the executed command as well as

```bash
Process finished with exit code 0
```
_every single time_ the code is reformatted. A little research yielded a `--quiet` parameter to `black`, but for whatever reason this didn't silence the output, at least not when executed via PyCharm.

## Plugin?

Jetbrains IDEs have a pretty decent plugin marketplace and community. Maybe not on par with VSCode by now, but then again there's a lot more (nice) batteries included in Jetbrains IDEs than VSCode. 

A quick search yielded [BlackConnect](https://plugins.jetbrains.com/plugin/14321-blackconnect), which glues PyCharm to a `blackd` daemon. It requires installing and running `blackd` (`pip install black[d]`), but it's nice and fast and doesn't bring attention to itself. I remapped the "reformat code" keyboard shortcut to invoke BlackConnect.

### A Little Bit of Configuration

Making it work on startup requires an extra step, though: I made an `on_pycharm_startup.sh` file containing a single command `blackd`, did `chmod +x` on it, then added it to Tools>Startup Tasks. Boom! Black works quickly and silently when manually called via keyboard shortcut.

A note: BlackConnect has a "reformat on save" option, but it's just as slow as and less reliable than running `black` from a file watcher. Maybe this will change at some point.
How to recover an EC2 instance that doesn’t boot up
Tags: aws, ec2, troubleshooting, snapshot
Published: 2021-06-11 15:55:10

**Background**

* Often, you might face issues with your EC2 and in some cases it doesn’t even boot up for you to check and troubleshoot the error. To know more about the error “EC2 instance unable to boot up properly”, check
```
EC2 -> Action -> Instance Setting -> Get System Log
```

**Steps**

*Traditional way*

* Stop the instance
* Unmount the root volume and attach the root volume to another instance running the same AMI.
```
[root@instance-1]:/
$ lsblk
NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda 202:0 0 10G 0 disk
â”œâ”€xvda1 202:1 0 1M 0 part
â””â”€xvda2 202:2 0 10G 0 part /
xvdf 202:80 0 50G 0 disk /prod/applc/wls
xvdg 202:96 0 20G 0 disk /prod/applc/logs
xvdh 202:112 0 10G 0 disk
â”œâ”€xvdh1 202:113 0 1M 0 part
â””â”€xvdh2 202:114 0 10G 0 part
```
* In example above, root is /dev/xvdh
```
mount -o nouuid /dev/xvdh2 /mnt
```
* Check if the /mnt eg disk space full, or see /mnt/var/log/dmesg
* Check if /mnt/etc/fstab got any issue with mount point.
* If you don’t put the “nouuid” option, the mount will fail if the volume had the same UUID as the current root volume.
* After fixing the issue, detach the Volume and attach back.
* When attached back as root, make sure to mount as /dev/xvda or /dev/sda1

*Snapshot method*

If the above steps still don’t work, then you need to restore from SNAPSHOT. Do the following —

* EC2→snapshot. Select the root snapshot and then Action → Create Image.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfuww1mlzjgjqof8pn0t.png)

* Change Virtualization type to Hardware-assisted.
* Add the snapshot data volume, ensure the dev/sdx match the current instance and the size.
* This will create a new AMI image which you can then use to spin up a new EC2 instance.
* Once you test and verify this new EC2 instance is fine, you can stop the new instance, take the final backup before you terminate the instance.
* If need to reuse the same IP then respin up the new AMI image with the IP required.
Why I started the YoungCTO.tech Career Talk
Published: 2021-06-11 15:51:09

With AWS being very popular and now it really encompasses a lot of technology, this potentially also means a lot career are also using AWS itself directly or indirectly.

This IT Career Talk is to showcase that the IT field has varied beginnings and also varied career paths. Not many IT practitioners are invited to share their stories in the startup communities or within the public itself.

I wanted to put identities out there that perhaps one may relate to or envision themselves.  This would hopefully encourage others to see which IT journey they could potentially follow OR even allow them to forge their own unique path. 

Much like how we need diversity in our typical tv shows or movies, our youth (and ourselves) also needs to see the IT practitioners are human and relatable individuals.


PODCAST: https://anchor.fm/youngcto
YOUTUBE: https://www.youtube.com/c/YoungCTO
WEBSITE: https://youngcto.tech/
How to create a Mock response in APIGateway
Tags: aws, apigateway, html, static
Published: 2021-06-11 15:47:27

**Goal**

To return a static html response for your website.

**Steps**

a. First create an API endpoint, choose below type.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm84zkqb92o1wsudu8ym.png)

b. Select Regional.

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hdze9x6r6tqoj4sh62r.png)

c. Create a resource, for example sureroute-test-object.html and create method GET, then Click on GET.

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8h1mnjm28bhmekilvve.png)

d. Select the Integration Request and select Mock.

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

e. In the method response, change the default reponse body content type to text/html.

![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j44laedxfz3vl5azmn93.png)

f. In the Integration Response, replace the Mapping Template with Content-Type text/html.

![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x5z9z4x5jaxdfvnd5ok.png)

g. Then add the html file into it.

![7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a14145fcfs76ztinfh0x.png)

h. Then Select Action Button → Deploy API, create a new Deployment stage.

![8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1i5rzerq6tdkuy55h24.png)

i. Then go to Custom domain names → <any custom domain> → API mapping tab → Configure API mapping.

j. Create a new API mapping and fill in the below.

![9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax8socirivrkophojrem.png)

h. Thats it, now test the link and you will get result similar to below !

![10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k0puquxs06htmcek6a7.png)
Blocking bots using AWS WAF
Tags: aws, waf, bots, apigateway
Published: 2021-06-11 15:40:46

**Example to block bots on APIGateway**

* First create a condition. Below example condition is to match a header —

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hpdniszo4udbqckz9i7.png)

* Then create a rule. A rule can have multiple condition. Ideally a rule condition is a group of related checks.

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yi6gyhv0fwnomhu9w4a4.png)

* Then associate the rule to the web-acl that the APIGateway endpoint points to.

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m7g7jn65r5cyxasv13u.png)

* Example below is a webacl used by an app endpoint.

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac9n0d57khku8rjcwb60.png)
AWS Workspaces overview
Tags: aws, workspace, desktop, activedirectory
Published: 2021-06-11 15:37:00

**Introduction**

This document briefs about high level overview, design and architecture of AWS Workspaces.

**Architecture**

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bm80w35bbv1sbata6by.png)

**Design**

*Desktop:*

* Provision either Windows or Linux desktops and quickly scale to provide thousands of desktops to workers.

*Client:*

* Users access their WorkSpaces by using a client application from a supported device or, for Windows WorkSpaces, a web browser, and they log in by using their directory credentials.

*SOE:*

* Create your own custom image which you can use for provisioning new Amazon WorkSpaces.

*Security:*

* Use MFA for additional security. Use AWS KMS to encrypt data at rest, disk I/O, and volume snapshots.

*Pricing:*

* You can pay either monthly or hourly, just for the WorkSpaces you launch.

*AD:*

* Create a standalone managed directory for your users, or connect your WorkSpaces to your on-premises directory using Active Directory Connector, Create a new directory using Microsoft AD and add users, assign Amazon WorkSpaces to users in your Microsoft AD.

* There must be a VPN or Direct Connect circuit in place between your VPC and your on-premises environment.

* Also, various ports have to be opened between your VPC and your on-premises environment to allow AD Connector to communicate with your on-premises directory.

*Association:*

* Each WorkSpace is associated with a virtual private cloud (VPC), and a directory to store and manage information for your WorkSpaces and users.

* Directories are managed through the AWS Directory Service, which offers the following options:

- Simple AD, AD Connector, or AWS Directory Service for Microsoft Active Directory, also known as AWS Managed Microsoft AD to authenticate users.

*Gateway:*

* The login information is sent to an authentication gateway, which forwards the traffic to the directory for the WorkSpace.
* After the user is authenticated, streaming traffic is initiated through the streaming gateway.

*ENI:*

* Each WorkSpace has two elastic network interfaces (ENI) associated with it: an ENI for management and streaming (eth0) and a primary ENI (eth1).
* The primary ENI has an IP address provided by your VPC, from the same subnets used by the directory.
* This ensures that traffic from your WorkSpace can easily reach the directory.
* Access to resources in the VPC is controlled by the security groups assigned to the primary ENI.

*Workspace:*

* It creates VPC, IGW by default.
* Sets up a Simple AD directory in the VPC.
* Creates the specified user accounts and adds them to the directory.

*Clean Up:*
* Remove WorkSpaces, Deregister/Delete directory.
How to make teams more productive (WDS #3)
Tags: webdev, javascript, productivity
Published: 2021-06-11 15:35:54

Disclaimer this is 100% satire. For fun on a Friday (Web Dev Satire #3)

## Everyone wants to be more productive
---
Managers might try to block off time to focus on coding or keep you out of meetings. This is the worst way to have a productive team. 

Here's an outline for any manager trying to squeeze some more code out of developers.

---

## Outline
---
### More Meetings
I'm not just talking about more meetings, though that is part of it. We want meetings with no clear goal and scattered no more than two hours apart. This ensures that developers are hyper-focused for that two-hour gap. 

The less clear the meeting is, the better. Developers are natural problem solvers. Help them work out those muscles with practice. Title your sessions vaguely "Afternoon Debug" or "Productive Morning meeting."

---

### Code fast
This is what we are after, a short, sweet code. It makes sense that we need short-sweet time to accomplish our goals. Why write tests or dig into details of the code? Developers don't make mistakes.

---

### Switch Systems Slowly and often
Change is good as long as it's drawn out. If you're using Slack, switch to Microsoft Teams. Make sure you don't do this all at once. It should be a month or two processes where developers need to respond to messages in both at any given time.

While doing this, transfer other internal systems. Shock and awe your developers with the amount of unnecessary change.

---

![Screen Shot 2021-06-11 at 11.21.06 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjy84c00lqj3kjzh2dp9.png)
 
*This is the ideal workday. You make not like it, but this is peak performance.*


In case it isn't clear by now, this is satire! Happy Friday, and keep coding! :)
A dashboard service for quality control of client projects
Tags: devops, agile, startup, productivity
Published: 2021-06-11 15:35:46

Even before the widespread introduction of CI/CD practices and various manifestos for quality development, we committed ourselves to making sure that every project was successful.

To do this, we strove to be early birds in the development world. We introduced new methodologies and were the first to try promising tools and offer them to our clients. To prevent the quality of work from suffering during our expansion, we decided to develop an internal product development metrics dashboard for controlling the quality of projects.

In six months, we developed a [Ruby on Rails application called Pulse](https://evrone.com/pulse): a quality management dashboard that displayed all current projects and their statuses on one screen.
Confusing attribute selector
Tags: html
Published: 2021-06-11 15:31:12

![sdg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzyh0b3qu6ge3xauxrww.png)
 I find some attribute selectors sometimes confusing. Here is the three attribut selector I find confusing. This article will help those who also have confusion about these attribute selectors.

#1. [attribute ~= "value"] Selector
Suppose we have html code like this:
```
  <p class="team1 member">First Paragraph</p>
  <p class="team2 member">Second Paragraph</p>
  <p class="team3">Third Paragraph</p>
```
If i use the above selector in CSS, it looks like this
```
p[class ~="member"] {
  background-color: red;
}
```
The above CSS only will be applied on The first 2 paragraph element, Because "member" is one of the class of the p element. There may be more than one class or only one class. NO matter what this rule works

#2.  [attribute |= "value"] Selector
This attribute applies to only those selector which starts with the specified value
Suppose this is the html
```
  <p class="member-team">First Paragraph</p>
  <p class="member first">Second Paragraph</p>
  <p class="team3">Third Paragraph</p>
```
and now we use css
```
p[class |="member"] {
  background-color: red;
}
```
Above CSS applies to only first and third paragraph element. Because Value has to alone or there should be a hypen after the value. Only then selector will match

#2.  [attribute *= "value"] Selector
In the case of this selector it doens't matter where the value is .It may be at the beggining, at the endign , in the middle or the value may be part of a long word. No matter what if the value exists, this selector will match.
Button Animation Using HTML CSS & JS
Tags: html, css, webdev, javascript
Published: 2021-06-11 15:16:51

Hello Guys,

Today I created a Amazing Button Loading Animation with HTML & JS. This is simple Loading Button Animation using JavaScript after a button click I added setTimeout Function to removed the loader class. If you find this useful in a post like and save this post also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/qBrJaqy %}
Gooey loading bar with plain CSS (+ Interaction with JS)
Tags: css
Published: 2021-06-11 15:13:22

![GIF of a Gooey loading bar using CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2cyzrueuhm1zbpc51y6.gif)

Loading bars are everywhere, they are one of the essential components of the modern world applications. So why to make them boring when you can add interactivity. Although there are existing tools which can help in this, we are going to use plain CSS, that too under 30 lines of code.

The essential components of this approach are `filter: contrast(50);` , `filter: blur(15px);` & `@keyframes `

On top of it, you can add interaction to the loading bar by using jQuery's `draggable()` function.

Check out the codepen below for demo.

{% codepen https://codepen.io/anweshgangula/pen/yLaZqPK %}
Bootstrap 5 Responsive Product Grid Views
Tags: bootstrap, css, html, webdev
Published: 2021-06-11 14:43:49

Product in Grid View mostly uses in eCommerce websites to show products with names. So here we made a simple Responsive Product Grid View in Bootstrap 5 with CSS3.

In this element, we used cards with row-column and utility class for colors. Also, we modify the bootstrap class and make it more user-friendly we used utility classes. Here, we also used bootstrap release icons, and also we used images from amazon. To make it responsive we used CSS media queries.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/bootstrap-5-responsive-product-grid-view/)