teleren/devto huggingface dataset:
How the TypeScript Exclude Type Works
Tags: typescript, javascript, webdev, tutorial
Published: 2022-04-08 12:39:46

In TypeScript, the `Exclude` utility type lets us exclude certain members from an already defined union type. That means we can take an existing type, and remove items from it for specific situations.

Let's look at how the exclude utility type works in TypeScript.

### Utility Types
Utility Types are types defined in TypeScript to solve particular problems. If you're new to defining custom types in TypeScript, [read my guide on defining custom types here](https://fjolt.com/article/typescript-creating-custom-types).

## How the Exclude Type works in TypeScript
In TypeScript, we can define a specific type called a union type. A union type is a list of possible values for something. For example:

```javascript
type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"
```

Above, if we give something the type myUnionType, then it will only be able to be 4 values: 🍇, 🍎, 🫐, or 🍋. For example:

```javascript
type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let myString:myUnionType = "🍇"

// This throws an error! "Type '"some-string"' is not assignable to type 'myUnionType'.
let secondString:myUnionType = "some-string"
```

So now we've covered the basics of how union types work, let's talk about Exclude.

### The Exclude Type
Suppose we have a situation where we want to use myUnionType, but we don't want to include 🍋 in the valid list of values. This can happen in real life in an API response - suppose you have a standard API response type, but you want to remove a field in a particular situation from that API type.

That's where we can use Exclude. Exclude has the syntax `Exclude<UnionType, ExcludedMembers>`. We pass in our normal union type, and then say which members we want to remove from it in the second argument.

Let's try it:

```javascript
type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let lemon:myUnionType = "🍋"

// This throws an error! Type '"🍋"' is not assignable to type '"🍇" | "🍎" | "🫐"'.
let noLemonsPlease:Exclude<MyUnionType, "🍋"> = "🍋"
```

The second variable, `noLemonsPlease` throws an error, since we used `Exclude` to remove 🍋 from our union type for this specific variable. That means we can use the type as normal elsewhere, and then exclude members when we feel like it with Exclude.

If we want to remove more than one member, we just have to separate them with a `|`:

```javascript
type myUnionType = "🍇" | "🍎" | "🫐" | "🍋"

// This works!
let lemon:myUnionType = "🍋"
 
let noLemonsPlease:Exclude<myUnionType, "🍋"> = "🍇"
//  ^
//  └ - - Type is  "🍇" | "🍎" | "🫐"

let noApplesOrLemons:Exclude<myUnionType, "🍋" | "🍎"> = "🍇";
//  ^
//  └ - - Type is  "🍇" | "🫐"

let onlyRaspberries:Exclude<myUnionType, "🍋" | "🍎" | "🫐"> = "🍇";
//  ^
//  └ - - Type is  "🍇"

let backToLemons:myUnionType = "🍋"
//  ^
//  └ - - Type is  "🍇" | "🍎" | "🫐" | "🍋"
```

The Exclude type therefore gives us flexibility to remove specific elements when it suits us, and keep them there when we need them again.
Clean Code Tip: AAA pattern for tests: why is it important?
Tags: cleancode, testing
Published: 2022-04-08 12:34:14


Even though many developers underestimate this part, tests should be written even more clearly than production code.

This is true because, while production code is meant to be executed by the application, good tests allow you to document the behavior of the production code. So, the first consumers of the tests are the developers themselves.

So, how can we write better tests? A simple trick is following the *«Arrange, Act, Assert»* pattern.

## A working (but bad) example

As long as the tests pass, they are fine. 

Take this example:

```cs
[Test]
public void TestDateRange_WithFutureDate()
{
    var diff = (new DateTime(2021, 2, 8) - new DateTime(2021, 2, 3)).Days;
    Assert.AreEqual(5, diff);
}
```

Yes, the test passes, but when you need to read and understand it, everything becomes less clear.

So, it's better to explicitly separate the sections of the test. In the end, it's just a matter of readability.

## AAA: Arrange, Act, Assert

A better way to organize tests is by following the AAA pattern: **Arrange, Act, Assert**.

During the *Arrange* part, you define all the *preconditions* needed for your tests. You set up the input values, the mocked dependencies, and everything else needed to run the test.

The *Act* part is where you eventually run the production code. The easiest example is to run a method in the *System Under Test*.

Finally, the *Assert* part, where you check that everything worked as expected.

```cs
[Test]
public void TestDateRange_WithFutureDate()
{
    // Arrange
    var today = new DateTime(2021, 2, 3);
    var otherDate = new DateTime(2021, 2, 8);

    // Act
    var diff = (otherDate.Date - today.Date).Days; 

    // Assert
    Assert.AreEqual(5, diff);
}
```

You don't need to specify in every method the three different parts, but personally, I find it more readable.

Think of tests as physics experiments: first, you set up the environment, then you run the test, and finally, you check if the result is the one you were expecting.

## Conclusion

This is a really simple way to improve your tests: keep every part separated from the others. It helps developers understand what is the meaning of each test, and allows for easier updates.

Happy coding

🐧
Better Code Saul S1E1: Object Calisthenics
Tags: bettercodesaul, programming, codingpatterns, objectcalisthenics
Published: 2022-04-08 12:20:08

It's out my first episode of the good coding patterns advocating series "Better Code Saul". The first episode is called "Object Calisthenics"

You can check it on my slides.com account

[https://slides.com/kevincittadini](https://slides.com/kevincittadini
)
_Disclaimer:_
I didn't come up with the "Better Code Saul" name. I've found it browsing around the internet but couldn't came up to any author or TM intellectual property, so I'm just using it for my free/open slides :)

Enjoy
Create Responsive Table using HTML and CSS Only
Tags: css, html, codenewbie, webdev
Published: 2022-04-08 12:16:48

Many website using Responsive table using HTML and CSS Only, So do you want to add responsive table to your website?

Yes! 

When writing a long posts sometimes we need to use responsive table to explain things in a better way. Tables help to understand easily for the readers. 

A responsive table will display its content horizontal scroll bar if the screen is too small to display the full content. Resize the browser window as per device size.

Great!

Now, time to provide you **Responsive Table using HTML and CSS Only**.

So let's start.

##Responsive Table HTML Code

```
<div>
 <table class="restable">
<caption class="rescap">Simple Responsive Data Table</caption>
<tbody>
<tr>
<th class="resth">Name</th>
  <th class="resth">Score</th>   
  <th class="resth">Status</th>
  </tr>
  
<tr class="restr">                                      
  <td data-label="Name" class="restd">Ravi</td>
  <td data-label="Marks" class="restd">178</td>
  <td data-label="Status" class="restd">Pass</td>
  </tr>
<tr class="restr"> 
  <td data-label="Name" class="restd">Prem</td>
  <td data-label="Marks" class="restd">169</td>
  <td data-label="Status" class="restd">Pass</td>
  </tr>
<tr class="restr"> 
  <td data-label="Name" class="restd">Alex</td>
  <td data-label="Marks" class="restd">97</td>
  <td data-label="Status" class="restd">Fail</td>
  </tr>
<tr class="restr"> 
  <td data-label="Name" class="restd">Gale</td>
  <td data-label="Marks" class="restd">120</td>
  <td data-label="Status" class="restd">Pass</td>
  </tr>
</tbody></table>
</div>
```

##Responsive Table using Pure CSS Only

```
/*CSS for Responsive Table By technicalarp.com*/
  .restable
   {border-collapse:collapse;
   width:100%;
   overflow: hidden;
   }
   .rescap{
     border-left:4px solid #009879;
     padding:15px;
 font-family:georgia;
 font-weight:bold;
 font-size:20px;
 background-color:#dddddd;
 color:#990a00;
 text-align:left;
 overflow:hidden;
 margin-bottom:4px;
 width:100%;
 }
.resth{ 
    padding:12px 15px;
    background-color:#009879;
    color:#ffffff;
    font-family:georgia;
    font-size:20px;
    font-weight:bold;
    border:1px solid #dddddd;
    text-align:center;
    }
.restr{
    border:1px solid #dddddd;}
 .restd{padding:12px 15px;
    font-family:arial;
    font-size:20px;
    text-align:center;
    border:1px solid #dddddd;
    }
.restr:last-of-type{
    border-bottom: 2px solid #009879;
    }
.restr:nth-of-type(even){
    background-color: #f3f3f3;
    }
```


![Responsive Table using HTML and CSS Only](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uledvnd7g7b87xizgu5h.png)

If the above table work for you then congrats, and if not why not try another code.

Do you Want to try 5+ Responsive Table Code?

You can find Bootstrap table code, Pure CSS code and many more visit: [Add Responsive Table In Blogger](https://www.technicalarp.com/2021/09/add-responsive-table-in-blogger-post.html)

Again, Thanks for visiting. Follow for more upcoming amazing content.

See you in new valuable content.
CSS Mirror Editing with Sourcemapped files (Sass, React…)
Tags: vscode, sass, editing
Published: 2022-04-08 12:15:31

---
title: CSS Mirror Editing with Sourcemapped files (Sass, React…)
published: true
description: The Edge Developer Tools extension for VS Code allows you to live edit CSS files and see the changes in your source files. In the past it didn't support any abstractions like Sass. Now it does.
tags: vscode, sass, editing
canonical_url: https://christianheilmann.com/2022/04/08/css-mirror-editing-with-sourcemapped-files-sass-react-we-need-you-to-make-it-better/
---

Using the [Edge Developer Tools for VS Code](https://aka.ms/devtools-for-code) extension, you can live edit files in the browser developer tools and all the changes are also happen in your source files. That way you never lose a change you did to your web projects in the developer tools. It makes tweaking a layout much more convenient than jumping in between editor and browser all the time. 

One huge request we got from users was to support Sass, CSS-in-JS and many other abstractions. This is now possible, if you target [Edge Canary](https://www.microsoftedgeinsider.com/download/canary) as the functionality is only available in Edge > 101. 

![Sourcemaps demo running inside Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7upu91e0vviy30houvqg.png)

You can see the editing in action in the following screencast:

{% youtube iNMimVf1w24 %}

To make it easier for you to play with this, we're [providing a demo app](https://github.com/MicrosoftEdge/Demos/tree/main/css-mirroring-sourcemaps-demo) that already has a `launch.json` that targets Canary for you. You can [download the app as a zip](https://github.com/MicrosoftEdge/Demos/raw/main/css-mirroring-sourcemaps-demo/demo.zip) and use it like this:

1. Make sure you have the Microsoft Edge DevTools for Visual Studio Code extension installed
1. Clone this repo or [download the app as a zip])(https://github.com/MicrosoftEdge/Demos/raw/main/css-mirroring-sourcemaps-demo/demo.zip) and unpack it
1. Open the folder in Visual Studio Code
1. Run `npm i` in the Terminal
1. Run `npm start` in the Terminal
1. Switch VS Code to "Run and Debug" and run "Launch Edge and Attach DevTools" (the project is already configured to use Edge Canary, just make sure you have it installed)
1. Start editing Styles in DevTools and watch them sync!

We have an [issue open in the Extension repository](https://github.com/microsoft/vscode-edge-devtools/issues/965) and we'd love to get your feedback there!
How do software developers from different parts of the world collaborate?
Tags: opensource, beginners
Published: 2022-04-08 12:05:36

When you're working with software developers from around the world on a project, you need to know:

- What changes were made since your last collaboration
- Who made those changes
- When were those changes made
- Why were those changes needed

Messaging your teammates about which file you're changing and telling them to keep their fingers off is not the optimal workflow. Neither is storing .zip snapshots of your code on a shared online drive.

To get around this issue, we use a version control system (or a VCS).

A VCS allows multiple people to work on the same set of files in structured harmony.

Team members can work on any project file on their local version and merge their changes into a shared version.

The latest version of a file or the whole project is always in a shared location managed by the VCS.

Learn More about Version Control Systems: https://learn.grey.software/concepts/version-control
Meet Setplex at NAB Show 2022
Published: 2022-04-08 11:49:15

If you’re a content provider looking for end to end [IPTV / OTT platform solutions](https://setplex.com/en/), or the best in [white label OTT app](https://setplex.com/en/apps.html) creation, stop by our booth at the convention!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78qdq9f9n1lkm7q9zt4y.jpeg)

On April 23-27, 2022, Setplex will join other innovators, digital pioneers, and content experts at NAB Show 2022 at the Las Vegas Convention Center.

## Why Visit Setplex?

**Are you a…**

- IPTV/OTT Operator
- MSO/ISP
- Broadcaster/Satellite
- Content Owner/Syndicator
- Government

…then we want to talk with you! Setplex offers a true A-Z, end-to-end OTT / IPTV Platform solution. 

Setplex has incorporated the whole television experience with a modern day platform, combining state-of-the-art technology with the traditional TV feel. Offer your viewers thousands of hours of top quality HD and standard definition content with plenty of interactive services all through a single device.

We’re in the business of technological innovation, creating groundbreaking IPTV/OTT systems that transform how end users consume content and interact with all kinds of media.

## How To Find Us

West Hall, Booth #W9717 (interactive map)
[Contact Us / Set a Meeting](https://setplex.com/en/inquiry-form.html)

Originally published on Setplex Blog [here](https://setplex.com/blog/meet-setplex-at-nab-show-2022/).
Lists in your reading list
Tags: discuss
Published: 2022-04-08 11:47:19

So I was going through my [reading list](/readinglist), and it was a bit hard to navigate what posts are there, even with the tags sorting there.
Then I remembered a feature in GitHub where you star repos and you can sort them into lists.
I think that the list feature would be a good idea in your dev.to reading list as well.

Who agrees with me, and who thinks it’s a useless feature and not worth it?
React, Vue and Svelte: Comparing Checkbox Binding
Tags: javascript, react, vue, svelte
Published: 2022-04-08 11:36:28


## Checkbox Binding in...
You should not fear checkbox binding in any of these frameworks. At least, one checkbox is easy to handle :)
But as we delve deeper into Form Binding, you'll see that Vue and Svelte offer something fluid.

Check it out 🚀

### React
[Live Example](https://stackblitz.com/edit/vitejs-vite-3me5id?file=src/App.tsx)

```jsx
const [checked, setChecked] = useState<boolean>(false);
const handleCheckbox = () => setChecked(!checked);

<section>
  <h2>Checkbox</h2>
  <input
    type="checkbox"
    id="checkbox"
    checked={checked}
    onChange={handleCheckbox}
  />
  <label for="checkbox">Checked: {checked.toString()}</label>
</section>
```

### Vue
[Live Example](https://stackblitz.com/edit/vitejs-vite-ccx1rd?file=src/App.vue)

```jsx
const checked: Ref<boolean> = ref(false);

<section>
  <h2>Checkbox</h2>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label htmlFor="checkbox">Checked: {checked.toString()}</label>
</section>
```

### Svelte
[Live Example](https://stackblitz.com/edit/vitejs-vite-bx52ug?file=src/App.svelte)

```jsx
let checked: boolean = false;

<section>
  <h2>Checkbox</h2>
  <input type="checkbox" id="checkbox" bind:checked={checked} />
  <label for="checkbox">Checked: {checked}</label>
</section>
```
[beginner] Install third party application on AWS EC2
Tags: aws, beginners, ec2
Published: 2022-04-08 11:35:10

In this solution I installed Mattermost application using open source package

Following are the brief steps implemented in this solution.

· Create Custom VPC to build the solution.
· Implement 2 different subnets (one public and the other private) in a this VPC
· Implement Route table and make connection to internet gateway for internet capability to public subnet.
· Implement NAT Instance along with another custom route entry which will allow private instance to connect to internet securely.
· Allow Public subnet only to connect to private instance like a bastion host.
· Install and configure MySQL on an Ubuntu 18.04 instance on the private subnet.
· Install and configure Mattermost on an Ubuntu 18.04 instance on the public subnet.
· Configure the security groups to allow the ports as shown in the architecture.
· Test the installation by accessing the IP of the public instance in a browser via the port 8065.
· Monitor application in cloudwatch.

Complete solution is published [here](https://medium.com/@vikasmishrastudyonly/beginner-install-third-party-application-on-aws-ec2-and-self-managed-by-team-1b1143956cb5)
Tauri + TypeScript and Svelte Templates
Tags: taur, typescript
Published: 2022-04-08 11:23:48

## Tauri + Rollup.js + TypeScript Tempalte
https://github.com/dannygim/tauri-demo/tree/main/template-tauri-typescript

```shell
npx degit dannygim/tauri-demo/template-tauri-typescript tauri-ts-app
cd tauri-ts-app
npm install
npx tauri dev
```

## Tauri + Rollup.js + TypeScript + Svelte Tempalte
https://github.com/dannygim/template-tauri-svelte

```shell
npx degit dannygim/template-tauri-svelte tauri-svelte-app
cd tauri-svelte-app
npm install
npx tauri dev
```
Smart list of values in SQL with LISTAGG
Tags: database, sql, programming
Published: 2022-04-08 11:17:57


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

👉LISTAGG(): aggregates the values of a column by concatenating them into one string. Adding overflow management for a very long list of values.😀😀😁😁😁😂😂😅😅🤣🤣🤣🤣😱💥💨

Documentation: https://docs.oracle.com/en/database/oracle/oracle-database/19/sqlrf/LISTAGG.html#GUID-B6E50D8E-F467-425B-9436-F7F8BF38D466

Gist: https://gist.github.com/loiclefevre/1ae2e9f496e0156277feeff1b6e03242
Python map() Method Explained
Tags: python, map
Published: 2022-04-08 10:46:03

Do you know that it's possible to process **iterables** without a Loop? The `map` method is really useful when you need to perform the same operation on all items of an iterable (list, sets, etc).

The `map()` method takes two arguments: 
- a function object
- an iterable or multiple iterable

The function passed to the `map()` method will perform some action on each element of the iterable passed as an argument.

### Example

```python
>>> fruits = ["lemon", "orange", "banana"]
>>> def add_is_a_fruit(fruit):
...     return fruit + " is a fruit."
...
>>> new_fruits = map(add_is_a_fruit, fruits)
<map object at 0x7f7fe85e6460>
>>> new_fruits = list(new_fruits)
>>> new_fruits
['lemon is a fruit.', 'orange is a fruit.', 'banana is a fruit.']
```

Notice that you have to convert the returned map object into an iterable so you can work with it easily.

It's also possible to use `map()` with lambda functions. 

```python
>>> new_fruits = map(lambda fruit: fruit + " is a fruit.", fruits)
>>> new_fruits = list(new_fruits)
>>> new_fruits
['lemon is a fruit.', 'orange is a fruit.', 'banana is a fruit.']
```

You can learn more about the method [here](https://docs.python.org/3/library/functions.html#map).


*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
Docker Desktop for Linux on Ubuntu 22.04
Tags: docker, ubuntu, tutorial
Published: 2022-04-08 10:28:00

So, Docker Desktop for Linux (Beta) is here, so is Ubuntu 22.04 (Beta).

## Docker Desktop for Linux (Beta)

Docker Desktop for Linux is around since early 2022, but we still have to bear a bit longer before the official version is out. As [the official documentation](https://docs.docker.com/desktop/linux/) says, it is only available on: 

- Debian
- Ubuntu 21.04
- Ubuntu 21.10

But it also works on Ubuntu 22.04. Why is it not listed there, because Ubuntu 22.04 does not exist yet.

## Ubuntu 22.04 (Beta)

The beta version of Ubuntu 22.04 is also released, 3 weeks prior to the official release. If you want to test it, you can follow [this tutorial](https://linuxconfig.org/how-to-upgrade-ubuntu-to-22-04-lts-jammy-jellyfish).

## Install Docker Desktop for Linux

I learned about Docker Desktop for Linux at Docker Community All Hands #5. I had Ubuntu 20.04 installed on my machine at the time, and upgraded it to 21.10 over night to test Docker Desktop.

Then recorded all the steps of installing Docker Desktop:

{% youtube vfT7zsf_pUs %}

## Docker Desktop on Ubuntu 22.04 (Beta on Beta)

The next day Ubuntu 22.04 (Beta) became available. Some stuff that worked on my Ubuntu 20.04 were faulty on 21.10, so I assumed an upgrade to the newest version would fix them (how little I knew).

I installed Ubuntu 22.04 (which was not easy, as the kernel was first damaged, so I booted with an old kernel version and installed the kernel again). And my Docker Desktop for Linux stopped working, as I expected (the official docs had said that much). The old Docker native Docker daemon would not start as well, although it was always Ubuntu-upgrade-proof.

So, I followed the Docker Desktop installation steps again from the very beginning, and after a fresh install Docker Desktop for Linux started working again.

## Conclusion

- Docker Desktop for Linux and Ubuntu 22.04 are both beta, they might not work as smoothly as you expect.
- Docker Desktop installation also sets up a few things, so after an OS change you might need to install it again.
- This post was only trying to claim that Docker Desktop works on Ubuntu 22.04. It does not review any of the two products. The reviews might come in future posts.