teleren/devto huggingface dataset:
TypeScript Function Overloads
Tags: webdev, functionoverload, javascript, typescript
Published: 2021-09-26 15:18:47

---
title: TypeScript Function Overloads
published: true
date: 2021-09-01 07:20:49 UTC
tags: webdevelopment,functionoverload,javascript,typescript
canonical_url: https://medium.com/@redin.gaetan/typescript-for-everyone-function-overloads-a08b473926ce
---

#### When to use TypeScript Function Overloads

![](https://cdn-images-1.medium.com/max/1024/1*mngs7X90zguBi1HjG_jkBw.jpeg)

I have to admit that I found out about this feature recently. But I would like to share it with you because I find it really easy to understand and simplify code. But like all features, it has its own use cases, and sometimes we should not use this syntax.

### When Should We Use TypeScript Function Overloads

Suppose you have two ways to get a user – by its id, which is a number – or by its name (string), first name (string), and birthdate (Luçon DateTime).

Here we have the same method with different parameters.

A first approach could be:

```
function getUser(idOrName: string | number, firstName?: string, birthDate?: DateTime): User {
  ...
}
```

But it’s not really relevant because it means that we could also use it like this:

```
getUser(name, firstName);
```

And that’s not what we expected to write.

We only want to can do:

```
getUser(id);
getUser(name, firstName, birthDate);
```

So this is how to implement what we expect:

```
getUser(id: number): User; // (1)
getUser(name: string, firstName: string, birthDate: DateTime): User; // (2)
getUser(idOrName: string | number, firstName?: string, birthDate: DateTime): User {
  if(typeof idOrName === number) {
    (1)
  } else {
    // (2)
  }
}
```

Rules:

- The implementation must handle all cases.
- The implementation signature must be the last.

### When Should We Not Use TypeScript Function Overloads

Suppose now we have an interface Identity that contains name, first name, and birthDate. It could be tempting to write this:

```
interface Identity {
  name: string;
  firstName: string;
  birthDate: DateTime;
}

getUser(id: number): User;
getUser(identity: Identity): User;
getUser(idOrIdentity: number | Identity): User {
  ...
}
```

But that’s not the simplest way to code this. That’s better:

```
interface Identity {
  name: string;
  firstName: string;
  birthDate: DateTime;
}

getUser(idOrIdentity: number | Identity): User {
  ...
}
```

You should always prefer the union type when it’s possible. This is a Typescript recommendation, and as you can see, it’s more simple.

Remember that function overload is useful when you don’t have the same number of parameters.

Thanks for reading.

### Learn More

- [How to Undo a GIT Commit](https://medium.com/@redin.gaetan/how-to-undo-a-git-commit-7942cdf6c211)
- [Install Jest for Angular](https://dev.to/gaetanrdn/jest-and-angular-install-fg3)
- [Angular for everyone: All about it](https://link.medium.com/SXPQgRn7xjb)
Installing Open-WC on Windows 10
Published: 2021-09-01 07:13:37

Everything involving Open Web Components will be using **Noje.js**. The instructions to get Node.js installed are as follows:

1. Go to [nodejs.org](https://nodejs.org/).
2. Look under the "Download for Windows" heading.
3. Click on left button to install the LTS version.

The Node installation should come with the package manager **npm**. You should also install **yarn**, an alternative to npm. Using npm, which can be opened by typing in "npm" in Windows search, you should execute this command to install yarn:
```
npm install -g yarn
```

All your projects will be located in the following directory, which should be created if you have not so:
`C:Users\user\Documents\git\edtechjoker`

In that directory, using npm, execute the command `npm init @ open-wc` to initialize Open-WC. That should lead you to prompts to create a new project, which should have:
* a web component
* options for linting, testing, and demoing checked
* created without typescript
* be named hello-world
* installed using yarn

To check to see if you have done everything right, type the following commands to go into the hello-world directory, and fire up your webpage.
```
cd hello-world
npm start
```

Note: The hello-world directory must be in lowercase, as it is not just a naming convention but how the project functions.
3 Ways to set default values
Tags: javascript, 100daysofcode, tutorial
Published: 2021-09-01 06:58:47

### 1. Variables

The [nullish coalescing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) is a logical operator that returns its right-hand side operand when its left-hand side operand is `null` or `undefined` and otherwise returns its left-hand side operand. We can use this to set default values, for example when we receive a list that has not been set to an array yet:

```
const bookList = receivedBooks ?? [];
```

### 2. Parameters

We could use the *null coalescing operator* to set defaults for variables in functions but there is a better way, [default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters):

```
function calculateArea(width, height = 100) {
    return width * height;
}

const area = calculateArea(50);
console.log(area); // 5000

```

### 3. Objects

We can also give default value once we destructure object properties. ES6 destructuring default values only kick in if the value is `undefined`.

```
const rectangle = { height: 400 };
const { height = 750, width = 500 } = rectangle;
console.log(height); // 400 - comes from rectangle object
console.log(width);  // 500 - fallback to default

```

## Links
- [nullish coalescing operator (`??`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)
- [default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)
Where to Store Data for Your Applications in Azure? . Part 1
Tags: azure, serverless, infrastructure, database
Published: 2021-09-01 06:54:32

My name is **Ali**.I am a .NET evangelist and an AZURE Architect. 

Most of applications in the world need to persist data somewhere. You can use a simple text file, any RDBMS or one of the NO-SQL concepts. 

If Azure is your choice of Cloud Provider, you would have multiple options to store data in this platform, but you should know the difference between the options to decide which is the best for your scenario. 

In this series of articles, I have a plan to go through all the options we have to store data for your application in the AZURE platform.

I am going to follow these steps as I listed below : 

1- Introducing Data Storage Options in the AZURE
2- The reason and usage of each 
3- Compare the options 
4- Giving you a working sample 

Lets go for the first item. 

**Introducing Data Storage Options in the AZURE**

1- AZURE SQL Database

If you are familiar with Microsoft SQL Server, you can work with this AZURE SQL very easy. The difference is that Microsoft will take care of Scalability, Performance and Safety of your data efficiently. It is one of the most famous Data stores in the AZURE. 
![SQL AZURE DataBase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3harzo59w4cu6r7ibw2o.png)

2- AZURE Database for MySQL

Totally same as SQL Server, if you are familiar with MySQL database, Microsoft just provides you the same but it helps you to have a very scalable , fast and safe version instance of MySQL on their VMs.

![MySQL on the AZURE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m21a743jcpmy7d2cwm39.png)

3- AZURE Database for PostgreSQL

PostgreSQL and MariaDB are also supported in the AZURE platform. Microsoft gives developers variety of options to use as a data store on its platform.

![PostgreSQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75blp67kmp62qxfeo315.png)


4- Azure Cosmos DB

Azure Cosmos DB is a fully managed NoSQL database for modern app development. It is an evolution of AZURE document DB which offers several APIs to work with data including Table Storage, MongoDB and Graph. Single-digit millisecond response times, and automatic and instant scalability, guarantee speed at any scale. Business continuity is assured with SLA-backed availability and enterprise-grade security. App development is faster and more productive thanks to turnkey multi region data distribution anywhere in the world, open source APIs and SDKs for popular languages. As a fully managed service, Azure Cosmos DB takes database administration off your hands with automatic management, updates and patching. It also handles capacity management with cost-effective serverless and automatic scaling options that respond to application needs to match capacity with demand.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3h14bdepyk7zik4hyals.jpg)

Since the next option is AZURE Storage which is AZURE specific and has multiple components that should be well explained, lets continue the article in the next chapter which is part 2!.

More to come soon....

Ali
Efficiently Browsing Commit History in Git
Tags: git, github
Published: 2021-09-01 06:53:42

Git's [git-log](https://www.git-scm.com/docs/git-log) package offers some powerful options for surfing through our commit histories.

We can use the default `git log` command to view the past five commits:

```sh
git log
```

But viewing five commits at a time is not very efficient, especially in larger and more active repositories.

We can pass `oneline` to the `--pretty` flag to print several more commits to the console, with each commit occupying just one line each:

```sh
git log --pretty=oneline
```

Using the `--pretty` flag will open an interface where you can use the up and down arrow keys to scroll through your commits.

To quit this interface, press the <kbd>Q</kbd> key.

Anyway, if you don't need to see the full commit hash on each line, I'd recommend this cleaner alternative which just displays an abbreviaton of the full hash on each line to save space:

```sh
git log --oneline --decorate
```

Also, if you're working with lots of branches, throwing in the `--graph` flag might help you visualize them a bit better:

```sh
git log --oneline --decorate --graph
```

## Conclusion

While this article has hardly scratched the surface of what you can do with passing options to `git log`, I hope these commands help you skim throguh your commits more productively!
Computer Networks: A humble Introduction
Tags: computerscience, tutorial, computernetworks
Published: 2021-09-01 06:26:22

> 📡Disclaimer: A lot of concepts in this subject are interlinked, so it is completely okay to not understand every bit of jargon thrown at you in this post. The aim is to get the big picture overview.

## A textbook definition 📚

A computer network is a **group of computers** that use a set of *common* communication *protocols* over *digital* interconnection to *share resources* located on or provided by network nodes.

Of course, you are bamboozled by the definition 👀🥴 Let me break down the terminology,

1. protocol - rules that are needed to be followed while communication/sharing of resources.
2. digital - meaning data/resources/message is transferred in the form of 0s and 1s.
3. network nodes - various devices that make up the network, for eg: your computer is a node as it is connected to the Internet( a network of networks! ). It is like an endpoint or redistribution point of communication.

This all might sound boring so let's understand the working of a real computer network at a high level,

## How does a simple computer network work?
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjlj9wzbst6mjapp2dy6.jpg)

Let's say you are in some network. (most probably your SIM operator's or wifi's network ).

Your computer is **host1** and it has a **chrome(** browser ) process running inside it.

Say this process wants to go to GOOGLE. So we typed [www.google.com](http://www.google.com) in the search bar and pressed enter.

Our modus operandi would look something like this,

1. Reach google's network - a network somewhere in the US in which google server (**host2**) is located.
2. Then after reaching that network in the US, we need to reach **host2** - the server itself.
3. And finally, we'll need to reach the **process** in **host2** which returns google.com's web page.

So, we aim is to get *Network ID* - to reach destination network, *Host ID* - to reach destination host and *port number* - to reach destination process

We don't need to worry about port no. because for some standard services like web service, it is fixed.( 80 for HTTP, 21 for FTP ). Thus for most well-known services, they are already defined.

And to get NID and HID, we need to convert the domain name into a special type of number: **Internet Protocol Address** short for *IP address* because IP address contains the **two** parts that we need, NID and HID. This conversion is done by the DNS-Domain Name System/Service provided by your ISP.


![Frame 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1eonz5jmnc2dg1ch6qh.jpg)

In the next post, we shall discuss more about these so called IP addresses :)
Galera Cluster Recovery
Tags: mariadb, galera
Published: 2021-09-01 06:09:12

今天一个 galera 集群中有一个无法同步数据，因为只是测试环境，懒得深入研究，直接把 statefulset scale 到1，删除 pvc/pv, 然后重建集群，结果新节点无法加入集群，报错

> Failed to open channel 'galera' at : -110 (Connection timed out)

参考
[Galera Cluster Recovery][]


[Galera Cluster Recovery]: https://mariadb.com/kb/en/galera-cluster-recovery/
The ephemeral miniconf - Adam Russell 
Tags: perl, raku
Published: 2021-09-01 05:59:17

# Speaker announcement: Adam Russell
Adam is a Sr. Principal Engineer with Optum. His primary work is with Graph Databases and developing graph based applications and analytics, with a broader interest in Knowledge Representation and Reasoning. Previous uses of Perl include all the code for his PhD dissertation which was in the areas of Computational Geometry and Data Visualization.

Adam uses Perl extensively for algorithm development and rapid prototyping purposes in his current work. He also runs the [Perl CS discord](https://discord.gg/vNXP2PkZ) (a server about Perl and algoritms :smiley:) and blogs frequently on his [personal blog](http://www.rabbitfarm.com/cgi-bin/blosxom/) and also on [livejournal](https://adamcrussell.livejournal.com/) (being often featured in [PerlWeekly](https://perlweekly.com/a/adam-russell.html)!).

![Adam Russell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nah4e9a3yj5ygtor9dms.png)

He can be found on Twitter [@adamcrussell](https://twitter.com/adamcrussell)

## Talk
Adam plans on speaking on developing game playing AIs using Perl. In particular, a generalized game playing framework he is working on to facilitate reproducible results in that area.

![Game and AI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv6lrfripilhwyxl90x0.png)
React/Redux Final Project
Published: 2021-09-01 05:04:32

The final project. After months of learning the benefits of React and Redux, it was time to build out my final project! Throughout my planning process, I wanted to create an app that met all of the requirements but also would allow me to add on different features as I grow my coding knowledge. A couple of project ideas came to mind, but at the end of the day, I decided to create a workout planning app call Workout Planner. 

The concept is that the user would enter their workout for the day and they could collaborate with other users and help keep each other accountable. This project is still a work in progress, due to the fact that there are so many features that I would like to add on as well. 

- The project requirements were as followed:
- There should be 5 stateless components
- There should be 3 routes
-The Application must make use of react-router and proper RESTful routing. 
- Use Redux middleware to respond to and modify state change
- Make use of async actions and redux-thunk middleware to send data to and receive data from a server
- Your Rails API should handle the data persistence with a database. You should be using fetch() within your actions to GET and POST data from your API - do not use jQuery methods.


Once I completed the backend solution of my project it was now time to focus on FrontEnd. 

What I took away from the project overall was how React moved information throughout my application, along with the help of Redux. 

Here is an example of the Redux flow without Thunk: 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lcs2kn6aid78mynnbof.png)

This image shows you the importance of Redux within an application and how useful it can be with a developer is building out large apps. 

Overall, the project taught me a lot and it showed me what I can do with a bit of hard work and coffee!
HNG8 INTERNSHIP
Published: 2021-08-17 14:47:55

Hi, I am Oguntuga Mayowa, an intern of the HNG8 Tech-Training and also an aspiring world-class Front-end developer. Within these few weeks, I hope to bring my existing design skills to the table and rise to the level above intermediate as a front-end web and mobile specialist.

**My Goals for the HNG8 Program**

1. Improve my problem-solving
2. To familiarize with the industry-standard tools and platforms used by pros in the real world
3. To learn more about Teamwork
4. To make new friends in order to improve my net worth.

**My Tech-Stack**
1. Html, CSS,
2. NodeJS/Javascript/ReactJS
3. UX/UI design



My favorite resource for learning Front End development is [freecodecamp](https://www.freecodecamp.org/learn/front-end-libraries/)  a series of all the Front End Development Libraries. 


 
At the end of the 16 weeks Internship, I would want to have achieved the following skills and become a professional Front End Developer + UI/UX Designer


1. **HyperText Markup Language (HTML)** is a markup language that uses a special syntax or notation to describe the structure of a webpage to the browser. Complete step-by-step beginner tutorials for HTML can be found here 
%[https://www.freecodecamp.org/learn/responsive-web-design/]




2. **Cascading Style Sheets (CSS)**, this specifies to the browser how to display the text and other content that is written in HTML. Beginner tutorial for CSS can also be found at
%[https://www.freecodecamp.org/learn/responsive-web-design/]



3. Front End Development Libraries, libraries such as Bootstrap, React.js, Jquery, and Redux are all very key and important elements to becoming a professional in Front End Development. Gary Simon is my mentor and a great tutor in Front End Development, here is a beginner tutorial 
%[https://www.youtube.com/watch?v=QA0XpGhiz5w]




4. **UI/UX Design**
UI/UX Design, at the end of the eight weeks I hope to become a professional UI Designer using Figma. Starting learning UI design a month ago using 
 [By Gary Simon](https://www.youtube.com/watch?v=Gu1so3pz4bA&t=604s) 

%[https://www.youtube.com/watch?v=Gu1so3pz4bA&t=604s]



5. **GIT**
GIT is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.  
%[https://www.youtube.com/watch?v=WbwIoQYP6no]
 


6.  **Figma**
Figma is a web-based design tool with real-time collaboration. It's like Craft Freehand but with all the features of Sketch (and more). It works in web browsers, and there are also native apps that let you work offline.
Learn More.  
%[https://www.youtube.com/watch?v=3q3FV65ZrUs]

Shoutout to HNG for making this possible   [Check them out here](https://zuri.team)  or 
[Here](https://internship.zuri.team) or [here](https://training.zuri.team)
Seeking for Ideas in Building a Course
Tags: startup, webdev, python, discuss
Published: 2021-09-01 04:49:51

Photos is from [Amador Loureiro](https://unsplash.com/photos/BVyNlchWqzs) through Unsplash

Hi there this is Max.I am seeking for ideas in building a course for developers that does Web development & Python for startups.

So I was wondering what might be interesting to you? Here's my list of titles I have thought of for a course that I am building.

* Test Driven Development with Django
* Breaking Into Startups with Python
* Full Stack Python Development for Startups
* Startup Python Developer's HandBook
* 3 Levels of Building a MVP
* Data Scrapping with Python

Do leave a message in the comments on what you might be interested in learning or creating.
Hello There...
Published: 2021-09-01 04:45:58

My name is Neel Ghosh, and I am a Junior at Penn State. I am majoring in Information Science & Technology in the Integration path. I am familiar with coding in Java and SQL, and I am new to JavaScript and web development. I would like to at least be aware of if not familiar with the full stack of web developing, of which the front-end I am the least familiar with.

Outside of the classroom, I am mostly an indoors person, although I am trying to change that by getting more physically active through biking and lifting. In my spare time, I am also an active music listener. I mostly too classical and metal music, in which I don't listen to it in the background as a lot of people do.

I hope this blog gave some insight into who I am.
New Computer
Published: 2021-09-01 04:40:51

I'm in the market for a new computer. A mac.

They're priced high, but I think they're generally worth what you pay for. Few operating system hiccups, simple and well-designed (and familiar) UI/UX, they've performed well for me, and have high build quality. I'm on a 2017 13" MacBook Pro with these specs:

Processor: 2.3 GHz Intel Core i5
Memory: 8 GB 2133 MHz LPDDR3
Graphics: Intel Iris Plus Graphics 640 1536 MB
Storage: 121 GB HD

First, I'll point out the comically small hard drive. It's actually been one of my biggest issues - I've run out of space. And I believe that degrades performance as I think the hard drive is used by memory in some cases to offload some work and I've gotten an awful (and persistent) message at times that I've run out of application memory.

The other main issue is that the letter 'p' doesn't work. That's the result of spilling some liquid on the keyboard shortly before the bootcamp started. P is the only key that never regained functionality. I've been using a wireless external keyboard. And while it's a solution - it's a pain. A lap doesn't really have room for a keyboard and a laptop.

Other than those two issues, I really like this computer. Well there is something else -- I've been working solely on this small laptop screen without an external monitor. I'm ready to upgrade to an external and take advantage of all the benefits of more screen real estate.

So my options appear to be these:

Keep current laptop but offload some files to free up storage space and hope that solves the performance issues. And then buy an external monitor.

Buy an iMac (desktop) with a nice big screen - move some of my laptop's files to the desktop and then have two computers: one laptop one desktop.

Buy a new MacBook and an external monitor. This is the most expensive option. But probably the best from a performance standpoint. A strong workstation (including screen space) that I can take anywhere.

What's stopping me from pulling the trigger now? I think Apple might be dropping new MacBook and iMac models soon. So I feel like I'm kind of in limbo. How long am I willing to wait? I don't know.