teleren/devto huggingface dataset:
How to add a string type annotation to a function parameter in TypeScript?
Tags: typescript
Published: 2021-09-08 00:00:00

---
  title: How to add a string type annotation to a function parameter in TypeScript?
  published: true
  tags: TypeScript
  date: Wed Sep 08 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-string-type-annotation-to-function-parameters-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-ad46cff249d11c7ab78f10ef26a82509.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-string-type-annotation-to-function-parameters-typescript)
  
String type annotations can be added to function parameters by declaring the function and then adding the name of the parameter followed by the `:` symbol (colon) and then the type `string` after the symbol.

### TL;DR

```ts
// add string type annotation
// to the parameter name
function greetPerson(name: string) {
  return `Hello ${name}`;
}

// call the function
greetPerson("John Doe"); // ✅ allowed
```

For example, let's say we have a function called `greetPerson` and on calling the function greets the person with the string `Hello` with the name of the person.

So to get the name of the person we can use a parameter called `name`. It can be done like this,

```ts
// a simple function
function greetPerson(name) {
  return `Hello ${name}`;
}
```

Now we need to only allow `string` type values as the value for the parameter `name`. To do that we can add a `string` type annotation to the function parameter. In our case, the parameter is `name`.

It can be done like this,

```ts
// add string type annotation to
// the parameter name
function greetPerson(name: string) {
  return `Hello ${name}`;
}
```

Now let's try to call the function `greetPerson` and then pass a string value as an argument to the function like this,

```ts
// add string type annotation
// to the parameter name
function greetPerson(name: string) {
  return `Hello ${name}`;
}

// call the function
greetPerson("John Doe"); // ✅ allowed
```

As you can see from the above code TypeScript allowed us to pass the string value of `John Doe` to the function parameter `name` since the allowed type for the `name` function parameter is a `string`.

Now let's try to pass another value of `number` type `1` to the `name` function parameter to see what happens,

```ts
// add string type annotation
// to the parameter name
function greetPerson(name: string) {
  return `Hello ${name}`;
}

// call the function
greetPerson("John Doe"); // ✅ allowed
greetPerson(1); // ❌ not allowed. Argument of type 'number' is not assignable to parameter of type 'string'.
```

As you can see that the TypeScript will throw an error saying that the `Argument of type 'number' is not assignable to parameter of type 'string'.` which is also what we want to happen.

See the above codes live in [codesandbox](https://codesandbox.io/s/add-string-type-annotation-to-function-parameters-in-typescript-w4tcl?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
3 ways to remove duplicates in an Array in Javascript
Tags: webdev, showdev, javascript, frontend
Published: 2021-09-07 23:48:21

Let's check, many times (or few) arises the need to remove duplicate elements given in an array, I don't know... it can be because you have to print a list from the super, remove a student that duplicated his record in a form, infinity of things, so let's see some ways to do this:

## 1) Use Set

Using Set(), an instance of unique values will be created, implicitly using this instance will delete the duplicates.

So we can make use of this instance and from there we will have to convert that instance into a new array, and that would be it:

```javascript
let chars = ['A', 'B', 'A', 'C', 'B'];
let uniqueChars = [...new Set(chars)];

console.log(uniqueChars);
```

Output:

```javascript
['A', 'B', 'C']
```

## 2) Using the indexOf() and filter() methods

The indexOf() method returns the index of the first occurrence of the element in the array:

```javascript
let chars = ['A', 'B', 'A', 'C', 'B'];
chars.indexOf('B');
```

Output:

```javascript
1
```

The duplicate element is the element whose index is different from its indexOf() value:

```javascript
let chars = ['A', 'B', 'A', 'C', 'B'];

chars.forEach((element, index) => {
    console.log(`${element} - ${index} - ${chars.indexOf(element)}`);
});
```

Output:

```javascript
A - 0 - 0
B - 1 - 1
A - 2 - 0
C - 3 - 3
B - 4 - 1
```

To eliminate duplicates, the filter() method is used to include only the elements whose indexes match their indexOf values, since we know that the filer method returns a new array based on the operations performed on it:

```javascript
let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = chars.filter((element, index) => {
    return chars.indexOf(element) === index;
});

console.log(uniqueChars);
```

Output:

```javascript
['A', 'B', 'C']
```

And if by chance we need the duplicates, we can modify our function a little, just by changing our rule:

```javascript
let chars = ['A', 'B', 'A', 'C', 'B'];

let dupChars = chars.filter((element, index) => {
    return chars.indexOf(element) !== index;
});

console.log(dupChars);
```

Output:

```javascript
['A', 'B']
```

## 3) Using the includes() and forEach() methods

The include() function returns true if an element is in an array or false if it is not.

The following example iterates over the elements of an array and adds to a new array only the elements that are not already there:

```javascript
let chars = ['A', 'B', 'A', 'C', 'B'];

let uniqueChars = [];
chars.forEach((element) => {
    if (!uniqueChars.includes(element)) {
        uniqueChars.push(element);
    }
});

console.log(uniqueChars);
```

Output:

```javascript
['A', 'B', 'C']  
```

Basically, we have options to solve this type of problem, so don't get stuck anymore and you can use whichever one appeals to you.


<center>
If you liked the content you can follow me on my social networks as @soyleninjs 
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)
How to build a community for Side Project? 
Tags: startup, career, motivation, sideprojects
Published: 2021-09-07 23:27:20

One of the most proven and working ideas of how can a side project grow traffic is to build a project community.

A community can be built on top of platforms like Discord, Twitter, or Projectium and should be a group of people sharing ideas that will make the project grow & develop (feedback, insights, opinion).

The best way to grow it is to scale it group-by-group:
1. “Friends & Followers” - 40–100 members
2. “Target users & Early adopters” - 100–600 members
3. “Thematic audience” - 600–4000 members

…and a few other groups that can scale your community to 25K members.

> Same but in details [read here](https://blog.projectium.network/buid-startup-community/).

In order to reach out to people you have to:
* Pack your idea (elevator pitch / oneliner)
* Define key values 
* Define your target audience
* Reach out to people using websites like Reddit, IndieHackers, Projectium, or Twitter.

Building a community is very hard, but it will give you active users & retention. That’s why you should invest time into learning more about how project can build a community and start growing it as soon as possible.

---

From author: A few your years ago I had my own Side Project - A [3D Engine framework](https://github.com/WhitestormJS/whs.js/) and I invested a lot of time to get noticed by other developers. A year later, with 5.5K stars on this project I decided to write a note and share some thoughts that can help.
Enabling brotli compression in Go and Chi
Tags: go, performance
Published: 2021-09-07 23:17:48

## Why Brotli?

Brotli is [supported on most modern browsers](https://caniuse.com/brotli). For browsers that don't support Brotli, the compression method will fall back to gzip or deflate based on the request's `Accept-Encoding` header. **Enabling Brotli compression is an easy performance win**.

Brotli is usually more effective at compressing compared to gzip and deflate. When I enabled Brotli compression for [Highlight](https://highlight.run), I saw response sizes decrease around 40% with no latency increases (for the most part requests were faster!).

## The Code Changes

### Installing Dependencies

```bash
# Install the Chi, older versions of Chi don't support Brotli
go get -u github.com/go-chi/chi

# Install the package that will do the Brotli compression
go get -u gopkg.in/kothar/brotli-go.v0
```

### Enabling Brotli Compression

```go:main.go
r := chi.NewMux()
// /* means to compress all content types that can be compressed.
compressor := middleware.NewCompressor(5, "/*")
compressor.SetEncoder("br", func(w io.Writer, level int) io.Writer {
	params := brotli_enc.NewBrotliParams()
	params.SetQuality(level)
	return brotli_enc.NewBrotliWriter(params, w)
})
r.Use(compressor.Handler)
```

The `"/*"` means to compress all content types that can be compressed. These are the supported types:

```go
var defaultCompressibleContentTypes = []string{
	"text/html",
	"text/css",
	"text/plain",
	"text/javascript",
	"application/javascript",
	"application/x-javascript",
	"application/json",
	"application/atom+xml",
	"application/rss+xml",
	"image/svg+xml",
}
```

That's it, congrats on the easy performance win for you and your users!
How to install JDK 16 on Ubuntu (and Debian)
Published: 2021-09-07 23:17:38

![Ubuntu Java 16.jpg](https://cdn.devdojo.com/images/september2021/ubuntu-java-161.jpeg)

First of all JDK 16 is the open-source reference implementation of version 16 of the Java SE Platform, as specified by by JSR 390 in the Java Community Process. JDK 16 reached General Availability on 16 March 2021. Production-ready binaries under the GPL are available from Oracle; binaries from other vendors will follow shortly.

Well lets begin!

This tutorial is very simple and will show a install and unistall process of JDK 16!

Time to INSTALL! (remember to unistall all past JDK versions)

---
Install commands
```
sudo add-apt-repository ppa:linuxuprising/java
```
Press enter when it tells you.

This may take a while or very short amount of time.

```
sudo apt update
```
This now will take a while.

This command will now install JDK 16
```
sudo apt install oracle-java16-installer
```
Press y when it prompts you

Wait 1-5 minutes max

And you are done!

To test go to your terminal and type
```
java --version
```
![5783e68f1da9cf78fd691cc82a562c6a.png](https://cdn.devdojo.com/images/september2021/5783e68f1da9cf78fd691cc82a562c6a.png)

That is all for installation!

---
When JDK 17 comes out fully maybe you want to unistall JDK 16 to install JDK 17

The first command to unistall is 
```
sudo add-apt-repository --remove ppa:linuxuprising/java
```
This may take a a little amount of time or a while

```
sudo apt-get remove oracle-java16-installer
```
This command will usually take as long as the installation.

Once its done try typing in the command
```
java --version
```
You will get a error message!

---

That is all for Installing/Unistalling JDK 16. Try doing this on other Linux Distros to see if it works. I only tested Ubuntu and Debian. The Ubuntu Server Distro will also work!

# If you found this usful then please comment and follow me! Also check out [my website where I also post everything from here](https://howtoubuntu.xyz)
How to install NodeJS on Ubuntu!
Tags: ubuntu, node
Published: 2021-09-07 23:13:08

How to install NodeJS on Ubuntu!

---
# Option 1: Installing Node.js with Apt from the Default Repositories

Ubuntu 20.04 contains a version of Node.js in its default repositories that can be used to provide a consistent experience across multiple systems.

> Warning: the version of Node.js included with Ubuntu 20.04, version 10.19, is now unsupported and unmaintained. You should not use this version in production, and should refer to one of the other sections in this tutorial to install a more recent version of Node.

To get this version, you can use the apt package manager. Refresh your local package index first by typing:
```
$ sudo apt update
```
Then install Node.JS
```
$ sudo apt install nodejs
```
Check that the install was successful by querying node for its version number:
```
$ node -v
```
### Output
```
v10.19.0
```

---

If the package in the repositories suits your needs, this is all you need to do to get set up with Node.js. In most cases, you’ll also want to also install npm, the Node.js package manager. You can do this by installing the npm package with apt:

```
$ sudo apt install npm
```

This will allow you to install modules and packages to use with Node.js.

At this point you have successfully installed Node.js and npm using apt and the default Ubuntu software repositories. The next section will show how to use an alternate repository to install different versions of Node.js.


#Please comment any suggestions or if it worked!
Making a square photo like Instagram with React Native ✨
Tags: reactnative, beginners, react, javascript
Published: 2021-09-07 22:26:41

I'm going to share with you something I learned today! I needed to show some pictures in a project I'm working on, in a square form. Like Instagram.

Researching, I found that with just one attribute I could achieve what I wanted! (bless you stackoverflow!) and discovered that there is a simple way to solve it.

> The magic is on  ***aspectRatio: 1***

👾👉 First of all, React Native has support for creating styles on components with a fixed proportion. Using this is useful, for example, if you want to have a component that always has the same shape (as I needed!).  

  

👾👉 Second: the ratio is defined by the *width : height*   
  


👾👉Finally here we go: setting the aspect ratio to 1 cause the view to be square: aspectRatio: 1  
  

Here is an example of code.

```
import React from "react";
import { StyleSheet, View, Image } from "react-native";

const SquareComponent= () => {
  return (
      <View style={styles.squareRatio}>
        <Image
      		source={{
        	uri: "https://wallpaperaccess.com/full/317501.jpg",
      		}}
      </View>
  );
};

const styles = StyleSheet.create({
 squareRatio: {
    width: '95%,
    aspectRatio: 1
  }
});

export default SquareComponent
```

✨👉 This is because the ratio is defined by the width : height. 1 : 1 means the width and height are the same.

✨ For example, if you want a view which is 16:9 (the standard TV widescreen ratio) you can set this property: aspectRation: 16 / 9
The same for other aspect ratios.✨

✨ You could do the same with components and views, not only with images :)

Here is my result! ✨🐞 and so simple! ☘

![screen with square picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5adl1u4o1x5hbb5cetfp.png)
Learn to Build React Native Mobile Apps, Intro to Working with React-Navigation DrawerNavigator and StackNavigator
Tags: reactnative, reactnavigation, javascript, mobile
Published: 2021-09-07 22:18:08

This is a blog post to support the code walkthrough video tutorial on using React-Navigation's StackNavigator and Drawer Navigator

### Video
{% youtube uqH00SEmKxg %}

Working with React-Navigation DrawerNavigator and StackNavigator created a sample template application showing how to use a Drawer Navigator with Stack Navigator in React Native. In this example, I have used the latest version of react-navigation for react-native. Walking through the code explaining what I have written instead of typing and talking, please let me know your thoughts.

Join me on my journey of refreshing my memory with React Native and building mobile applications

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smv4y6bn8s6wslp4l5a2.jpeg)


### Source Code
- https://snack.expo.dev/@aaronksaunders/ludicrous-bagel

### Links
- https://reactnavigation.org/docs/drawer-navigator
- https://reactnavigation.org/docs/getting-started
- https://docs.expo.dev/get-started/create-a-new-app/

## Video Series - React Native Refresher
------------------------------------------------------------
Part 1 - Intro to Working with React-Navigation - https://youtu.be/uqH00SEmKxg
Part 2 - React Navigation Drawer Navigator And Authentication Flow - https://youtu.be/5e67b0PBcn4
Part 3 - Authentication And Supabase Login - https://youtu.be/aBuB-Q6vHDE
Part 4 - Authentication, Supabase, And React Hook Form - https://youtu.be/ZU3lXTm9nVY
Part 5 - Supabase Create Account, And React Hook Form - https://youtu.be/lu1JzyBfSOQ
Part 6 - Expo Camera, Supabase Buckets and Image Upload - https://youtu.be/RmlekGDv8RU

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
Linked List VS Array
Tags: algorithms, computerscience, beginners, 100daysofcode
Published: 2021-09-07 22:18:02

Hello everybody, I'm [Aya Bouchiha](developer.aya.b@gmail.com), on this amazing day, we'll talk about the difference between array and linked list.
## Array VS Linked List
### Array
#### Definition
The array is a collection of elements stored at contiguous memory of a similar data type.

+ Array elements are stored in a contiguous block of memory
+ fixed size
+ accessing directly a specific element *O(1)*
+ slow when performing delete and insert operations.
+ fast when it comes to finding an element (binary search)

#### Types of Array

+ one-dimensional array
+ two-dimensional array
+ multidimensional array

### Linked List
#### Definition
A linked list is a linear data structure, in which the elements are linked using pointers, additionally, they are not stored at contiguous memory locations. A Linked List consists of Nodes that contain value ( data ) and a pointer to the next node in the chain. The head pointer points to the first node if the list is not empty, and the last element of the list points to null.

+ Linked List elements are stored randomly.
+ dynamic size
+ for accessing an element we need to pass all linked list elements that are preceded by the specified element O(n)
+ faster than array when It comes to performing insert and deletes operations.
+ take more extra space to store node pointers

for more information about linked lists like the time and space complexity, Linked list's advantages and disadvantages, implementation

#### Types of Linked List

+ Singly Linked List
+ Doubly Linked List
+ Circular Linked List


### References
+ [https://dev.to/ayabouchiha/linked-list-data-structure-4g7k](https://dev.to/ayabouchiha/linked-list-data-structure-4g7k)
+ [https://www.geeksforgeeks.org/linked-list-vs-array/](https://www.geeksforgeeks.org/linked-list-vs-array/)
+ [https://techdifferences.com/difference-between-array-and-linked-list.html](https://techdifferences.com/difference-between-array-and-linked-list.html)
+ [https://www.faceprep.in/data-structures/linked-list-vs-array/](https://www.faceprep.in/data-structures/linked-list-vs-array/)
+ [https://www.studytonight.com/data-structures/linked-list-vs-array](https://www.studytonight.com/data-structures/linked-list-vs-array)
+ [https://www.javatpoint.com/ds-array-vs-linked-list#:~:text=An%20array%20is%20a%20collection,the%20memory%20or%20randomly%20stored.](https://www.javatpoint.com/ds-array-vs-linked-list#:~:text=An%20array%20is%20a%20collection,the%20memory%20or%20randomly%20stored.)
First thoughts on open-source development
Tags: opensource, firstpost
Published: 2021-09-07 21:16:03

Hello hello hello!

I'm Minh and I want to share with you my first thoughts on open source development, as well as why I am taking this DPS909 course and my goals for it. 

My first encounter with the term 'open source' happened almost 3 years ago when I decided to become a volunteer at FSOSS, which is an annual event at Seneca where speakers from popular open source organizations like Mozilla or Red Hat would come to Seneca and give speeches about all the things related to open source development. At that time, I did not get the idea of open source programming at all, as these questions kept circling around my head: "If you publish your code, can't someone else just steal your work and make profits out of it?" or "If anyone can make changes, then what if someone makes 'bad' changes that will ruin the program? Who will decide what changes get approved and what don't?" However, seeing the speaker halls always being packed with people, I thought to myself "Whatever open source programming is, it is popular among the developer community, and I should learn more about it some times in the future". This course offers me a great opportunity to do so, and that's why I'm here. I hope to also make some meaningful contributions to some open source projects so that I can broaden my knowledge and add some cool stuffs to my portfolio.

The project I've chosen to include in this first post is [Spicetify](https://github.com/khanhas/spicetify-cli), which is a command-line tool that allow you to customize your Spotify app to change its appearrance, add extensions or even create a custom app within it. As a heavy Spotify user, I can see myself using this tool a lot. I haven't decided on what to contribute yet. There are some bugs reported in the issues tab that I could try to work on. I could also attempt to create a new extension or a custom app. I will play around with the project a bit before making a decision. Part of the project is written in Go, which is a language I don't know yet and want to learn more about, so working on this project will surely be challenging as well as exciting.

I currently live in Toronto, Canada, but am originally from Vung Tau, Vietnam. Looking forward to working with and learning from other developers and students around the world! 

Happy Coding!
Resume / CV Template created with Bootstrap 5
Tags: codepen
Published: 2021-09-07 21:00:16

<p>Resume/CV template created with Bootstrap 5 by <a href="https://codepen.io/vmoratog" target="_blank">@vmoratog</a> and <a href="https://codepen.io/jdnichollsc" target="_blank">@jdnichollsc</a></p>

{% codepen https://codepen.io/jdnichollsc/pen/LYbdpXW %}

## Supporting 🍻
Our goal is to work on our open source projects full time, thanks a lot for your support!
With your help We know we can change the world together! 🤝

Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

![Wallet address](https://user-images.githubusercontent.com/2154886/123501719-84bf1900-d60c-11eb-882c-98a499cea323.png)

> Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

## Happy coding 💯
Made with ❤️

<img width="150px" src="https://avatars0.githubusercontent.com/u/28855608?s=200&v=4" align="right">
Console.log('Hello World!')
Tags: opensource, beginners, webdev
Published: 2021-09-07 20:57:01

## Who Am I?
I am Kevan Yang from [Martinique](https://en.wikipedia.org/wiki/Martinique) (small French Department island), and this is my first blog in my life. I'm not a person that likes writing😅.
I'm currently studying [Computer Programming & Analysis at Seneca College](https://www.senecacollege.ca/programs/fulltime/CPA.html).
The reason I am taking OSD600 is that it is a challenging class, with the freedom to code. I also wanted to have some experience in open source development and meet some developers to share my passion with.

## Currently
I am currently living in Toronto, Ontario, with the pandemic situation I did not go anywhere.
I mostly use my free time to code and learn, for most of my projects, I use [Next.Js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/), [Typescript](https://www.typescriptlang.org/), [Mongodb](https://www.mongodb.com/), [Cypress](https://www.cypress.io/).

## Open source repo
The trending repository I have chosen is the [web3-react](https://github.com/NoahZinsmeister/web3-react). It is because the web3 to have a new way to login, it allows to login with crypto. This allows us to control our private data and decentralize our data. The data will be store in the blockchain which increases security. This repo is kind of like a React wrapper for web3. Which makes it much more simple to build a modern ethereum app.

Cheers! 🥂

**GitHub**: [Kevan-Y](https://github.com/Kevan-Y)
**LinkedIn**: [kevan-yang](https://www.linkedin.com/in/kevan-yang/)