teleren/devto huggingface dataset:
What are Arrays - Part III
Published: 2022-08-28 23:33:15

![arrays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6uweexl44ushy0733g5n.jpeg)

### Array.map()

You can change one array into another using the `.map(callback)` method.

For example:

```javascript
const numbers = [5, 4, 7, 10]

const tripled = numbers.map(function(number) {
    return number * 3;
});
console.log(tripled); // [15, 12, 21, 30]
```
and 

```javascript
const furBabyNames = ['dutches', 'monty', 'benny', 'lucky', 'chili'];
const furBabyUpperNames = furBabyNames(function(furBabyName){
    return furBabyName.toUpperCase();
});
console.log(furBabyNames); // ['DUTCHES', 'MONTY', 'BENNY', 'LUCKY', 'CHILI'];
```
###Array.includes(item)

The Array `.includes(item)` method is one of the simplest array methods. This is because instead of a callback it takes an element and returns true if that element is in the array and false otherwise.

```javascript
const fruits = ['Grapes', 'Mango', 'Watermelon'];

fruits.includes('Mango'); // true
fruits.includes('Pineapple'); // false
```
###Array.join()

The `join()` method concatenates all of the elements in an array (or an array-like object), separated by commas or a specified separator string, to create and return a new string. If the array only contains one item, that item will be returned without the separator.

```javascript
const furBabies = ['Dutches', 'Monty', 'Benny', 'Lucky', 'Chili'];
furBabies.join('; '); // 'Dutches; Monty; Benny; Lucky; Chili'
furBabies.join(' . '); // 'Dutches . Monty . Benny . Lucky . Chili'
```
Cara Install VueJS 3 menggunakan Vue CLI
Tags: vue, javascript
Published: 2022-08-28 23:10:00

1. Pertama ketikan perintah vue create sebagai berikut

```
vue create vue3
```
_vue3 adalah nama folder nya, kalian bisa ubah sesuai dengan yang diinginkan._
 
2. Pilih versi VueJS nya, karena ingin menginstall VueJS 3 maka pilih Vue 3.
![Memilih Versi VueJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxxit1lq4kedcxs07uub.png)
3. Tunggu beberapa saat untuk proses Installasinya.
![Proses Installasi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f45ojx8th76hdqj799j.png)
4. Proses Installasi selesai.
![Install VueJS3 Selesai](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h78ac844kgt6ulpmo3l.png)
 
5. Masuk ke folder vue3 dengan perintah

```
cd vue3
```
6.Jalankan aplikasi dengan perintah

```
npm run serve
```
![VueJS Running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wy099b4o8ddwy9te2ilq.png)
 
7.Buka aplikasi di browser dengan alamat `http://localhost:8080`
8.Aplikasi berhasil dijalankan.
![VueJS di Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4koamcs57029vgfblpy.png)
Disco.pics - Free and open source image hosting service
Tags: redishackathon
Published: 2022-08-28 22:50:00

### Overview of My Submission

I'm a huge fan of discord, and use it to communicate with my friends, family and teammates. 

One day, a friend of mine told me how he has made a channel just to store and organize his images at one place.
All attachments uploaded to discord have a link automatically generated. These links are shareable, but they are really long. 
Discord has a very high-speed content delivery network (CDN) powered by Cloudflare. 

All of this made us think, "Why not create an image hosting that uses discord's CDN?"

And that's exactly what we did!
But this needed to be BLAZINGLY fast. We wanted to make a good image hosting, with custom embed support, an API, etc. 

This would mean, we have to fetch from the database every time someone loads an image. Redis was the perfect choice for us.


### Submission Category: 

Wacky Wildcards!


### Overview video
{% embed https://www.youtube.com/watch?v=iprpEQD6liM %}

### Language Used
Typescript


### Link to Code

{% embed https://github.com/discopics/disco.pics %}


### Additional Resources / Info

![OGIMG](https://disco.pics/og-image.png)

![Main page](https://cdn.discordapp.com/attachments/1010857352645316658/1013573935088029809/image_2022-08-29_035052362.png)

![Embed builder](https://cdn.discordapp.com/attachments/1010857352645316658/1013568634314047628/1u118.gif)

### Collaborators

@yxsh


- - - 


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
file validation in python Much easier and more reliable
Tags: python, programming, opensource, security
Published: 2022-08-28 22:48:22


![file validator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1gx8jmhv9dfdevxc8r1.png)If you are looking for a safe way to validate your files, the file validator library will do this for you, this library also supports Django.With this library you can validate files based on extension, size, mimes and magic numbers

1. File validation using the filetype library

2. File validation using the python-magic library

3. File validation using the mimetypes library

4. File validation using the puremagic library

5. File validation with Size

6. Supporting for all mimes

7. File validation simultaneously with all four libraries

You can access it through the link below

[file validator](https://github.com/rzashakeri/file_validator)
Building Address Resolution Services with Redis Search
Tags: redishackathon, microservices, distributedsystems, database
Published: 2022-08-28 22:46:00

### Project Overview

A geocoder is a service for matching addresses to geographic locations. Geocoders use both geospatial queries and full text search to resolve incoming data to addresses and locations from a validated set of addresses.

For example, if a developer wants to resolve `TIMES SQ MANHATTAN` to a full address with coordinates, they may make a request against a forward geocoding API. This API will likely apply a full text search algorithm against a known database of addresses and return a list of potential matches (e.g. `TIMES SQ MANHATTAN` -> `["5 TIMES SQUARE MANHATTAN 10036", "42 TIMES SQUARE MANHATTAN 10036"]`).

Alternatively, if a developer wanted to resolve `(40.768044, -73.982372)`, they could use a reverse geocoding API. A reverse geocoder uses geospatial search to provide validated locations that are near the requested point (e.g. `(40.768044, -73.982372)` -> `2 COLUMBUS CIR MANHATTAN 10019`)

Over the last few days, I built out a geocoder that uses Redis Search to implement both forward and reverse geocoding against approximately 1 million New York City addresses.

![Full Arch Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xxbru3seox07nfqf30w.jpg)

Then, using Redis Pub/Sub, I extended this service to provide a batch address resolution endpoint. With this batch service, developers can make geocoding requests and easily share the resolved addresses. In the video linked below, I go into detail about the system architecture and how Redis enabled this service.

### Project Video

{% embed https://youtu.be/E2SqCKP4cvw %}

### Submission Details 

- Submission Category: Microservice Mavens
- Language Used: Go

A full description of the project is available on the project's GitHub repo below. The gcaas repo contains detail about the data structures used for each component of the application and all sample data shown in the video walkthrough.

{% embed https://github.com/DMW2151/gcaas %}

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Stoa - forum app that use redis as a primary database
Tags: redishackathon, react, tailwindcss, nextjs
Published: 2022-08-28 22:29:40

### Overview of My Submission

Stoa is a small forum app. The inspiration is a need of minimalistic internal forum for organizations. Designed to look like a typical social media app.

The main purpose of the project is to test redis as main database. I am using redisJSON to store documents and RediSearch to perform searches.

Stack:
* Typescript
* Next.js
* tailwindcss
* Redis stack

Some thoughts from mine experience:

Advantages:
* Easy to understand
* Fast integration thanks to [redis-om-node](https://github.com/redis/redis-om-node) library. In dozen minutes, we are ready to start manipulating with documents.
*  We can storage several types of data, not only json.
* RedisInsight app is really helpful during development process. Cool!

Disadvantages:
* It's tricky when we want to build related data structure. We need to handle it by extending an entity class.
* We have to create index on a collection, before starting to search anything. It's tricky for the first time.

[Note]: # (Share what you built, how you built it, and the inspiration behind the idea! Please make sure the project links to the appropriate GitHub repository, and includes the [MIT](https://choosealicense.com/licenses/mit/), [Apache](https://www.apache.org/licenses/), [BSD-2](https://opensource.org/licenses/BSD-2-Clause), [BSD-3](https://opensource.org/licenses/BSD-3-Clause), or [Commons Clause](https://commonsclause.com/) license and a README.)


### Submission Category: 

MEAN/MERN Mavericks

### Language Used

JS/TS/Node.js


### Link to Code

{% github  https://github.com/pavelee/stoa-redis-stack %}

### Additional Resources / Info

![test](https://raw.githubusercontent.com/pavelee/stoa-redis-stack/main/public/dashboard.png)

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
enabling both Google and Microsoft 365 (Azure AD) SSO logins for a Wordpress website
Tags: sso, wordpress, googlecloud, azuread
Published: 2022-08-28 21:59:00


https://www.youtube.com/watch?v=FTKmmJQZk6k

This video shows Datawiza enabling both Google and Microsoft 365 (Azure AD) SSO logins for a Wordpress website. 

Datawiza provides a cloud-native access proxy to secure access to apps, including:
- Business apps, like Oracle PeopleSoft, E-Business Suite, Siebel, SAP and more.
- Homegrown apps written in any language, like JAVA, PHP, .Net, Python, Go and more. 
- Critical tools like Wordpress, Kibana, Kubernetes, Jenkins, Grafana, SuperSet, AirFlow and more. 

Datawiza integrates with any identity provider and MFA (2FA) service, like Microsoft 365 (Office 365; O365; Azure AD), Cisco Duo, Okta, AWS, Google, Auth0, Ping, ForgeRock, OneLogin, ADFS. 

_______________________________________
Learn with Datawiza

The Datawiza blog - https://www.datawiza.com/blog
_______________________________________
Follow Us on Social

Join our Discord Community - https://discord.com/invite/Sn3nbc83Up
Follow us on Twitter - https://twitter.com/datawiza_com
Follow us on LinkedIn -  https://www.linkedin.com/company/datawiza
Welcome Contributors 💐
Published: 2022-08-28 21:53:24

Are you a **beginner** in **react**? Do you want to contribute in open source? Here is my GitHub project built with react and **Material UI**, using Styled components. It is a very new and beginner friendly project. You can practice open source contributions for upcomming open source events like **Hacktober fest** and other **Hackathons**. Make sure to check the link below.

https://github.com/warmachine028/uemcrp

**GOOD FIRST ISSUES CREATED EVERY DAY**.
Contributors will recieve proper guidance if they get stuck in any issue.

Developers and Contributors are welcome.
Redis Hackathon - Session counter
Tags: redishackathon, redis, node, programming
Published: 2022-08-28 21:42:00

### Overview of Session counter

I programmed a Nodejs microservice which uses Redis as Database.

[ms-session-counter github](https://github.com/FedericoAguirre/ms-session-counter/)
[BSD-3](https://opensource.org/licenses/BSD-3-Clause)

### Submission Category:

Microservice Mavens

### Language Used
JS/TS/Node.js

### Link to Code

[ms-session-counter github](https://github.com/FedericoAguirre/ms-session-counter/)

### Additional Resources / Info

[Transactions](https://redis.io/docs/manual/transactions/)
[MULTI](https://redis.io/commands/multi/)
[HINCRBY](https://redis.io/commands/hincrby/)
[EXEC](https://redis.io/commands/exec/)
[HGETALL](https://redis.io/commands/hgetall/)
[PING](https://redis.io/commands/ping/)
[AUTH](https://redis.io/commands/auth/)
[Apache JMeter](https://jmeter.apache.org/)
[Nodejs](https://nodejs.org/en/download/)
[**Redis Developer Hub**](https://redis.info/devhub)

### Collaborators

[Federico Aguirre](https://github.com/FedericoAguirre/)
[Dev to Federico Aguirre](https://dev.to/federicoaguirre)
[email](mailto:federico.aguirre.cardiel@gmail.com)

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
On Generalism or Philosophy of Wide Nets
Published: 2022-08-28 21:28:00

Casting a wide net is more work to shift gears and acclimate oneself to domain specific language, but it leads to stronger opinions and passions fueled by them. It helps me sort what is not really necessary so I can focus on the right things.

My conclusion is that strong opinions matter and are valuable. Also people who hold strong, well-formed opinions are valuable. Can you think of any strong opinion havers in your life? Are you a strong opinion enjoyer? Please discuss in the comment section or tag me on social media. Have a nice day.
Terminal chat application
Tags: redishackathon, redis, go
Published: 2022-08-28 19:56:34

### Overview of My Submission
A very simple chat application inside the terminal. The app uses the pubsub to publish the messages to other channel, implemented using Golang which is the programing language that I recently learn.

### Submission Category: 

- Wacky Wildcards

### Language Used
- Go 1.18 for developing the app.
- Use the bubbletea framework for making the terminal ui.


### Link to Code

{% embed https://github.com/dunkbing/tchat %}

### Additional Resources / Info
None

### Collaborators
@dunkbing
- --
Turning Rainy Days into Productive Coding: Building a Custom Web Server and File Monitor in Go
Tags: go, webdev, programming, javascript
Published: 2022-08-28 21:09:28

---
title: Turning Rainy Days into Productive Coding: Building a Custom Web Server and File Monitor in Go
published: true
description: Go is an excellent language for building small web applications.
tags: go,webdev,programming,javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmh6ba4v6hysyrwb4xuq.png
series: A small, self-contained, cross-platform web server
---

## Once Upon a Time

Today was a rainy day, so what do you do on a day like this? Right! [Programming](https://www.schukai.com/en/manage/).

Since I often have to deal with [JavaScript](https://monsterjs.org/) and the current solutions always kind of annoyed me, I wanted to build my own implementation.

This should not be a big project, but rather a small finger exercise. And actually I want to learn something new.

But learning on dry land is always a bit boring, so I like to combine both. How do you do that? 

So I combine learning with writing a little tool. A small web server that can also monitor file changes. I know something like this already exists, but for me it's always about real results in addition to fun.

The web server is a one-liner in Go and will not be looked at in detail here. Or maybe later.

I described in another article how to monitor file changes and in another article how the program works.

![the cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1hkfkkfbrcodagzci23.png)

**All in all, a successful rainy Sunday.

How was your Sunday? Did you learn anything new?
Opaque Types in Swift
Tags: ios, swift, mobile, programming
Published: 2022-08-28 20:05:28

A function or method with an opaque return type hides its return value’s type information. Instead of providing a concrete type as the function’s return type, the return value is described in terms of the protocols it supports. Hiding type information is useful at boundaries between a module and code that calls into the module, because the underlying type of the return value can remain private. Unlike returning a value whose type is a protocol type, opaque types preserve type identity, the compiler has access to the type information, but clients of the module don’t.

For example, the function in the following example returns a trapezoid without exposing the underlying type of that shape.

Source: https://docs.swift.org/swift-book/LanguageGuide/OpaqueTypes.html



#swiftui #iosdevelopment #iosdevelopers #iosdeveloper #apple #programming #coding #applicationdevelopment #iosdev #appdevelopment #learning #knowledgesharing
Typescript Series - Parameters Utility Type
Tags: javascript, typescript, webdev, beginners
Published: 2022-08-28 19:41:48

I'd like to start by saying that I am doing this series to learn and understand better Typescript, so feel free to correct me or contact me.

## Parameters<Type>

Constructs a tuple type from the types used in the parameters of a function type _Type_.

Examples: 
```
type T0 = Parameters<() => string> // []
type T1 = Parameters<(s: string) => void> // [s: string]
type T2 = Parameters<<T>(arg: T) => T> // [arg: unknown]
```

That means our type should look something like
```
const foo = (arg1: string, arg2: number): void => {}
const bar = (arg1: boolean, arg2: { a: 'A' }): void => {}
const baz = (): void => {}

MyParameters<typeof foo> // [string, number]
MyParameters<typeof bar> // [boolean, { a: 'A' }]
MyParameters<typeof baz> // []
```

Ok so what do we know so far:
- Receives a function
- Infer the types of the function parameters passed
- Return a tuple of the types of the function parameters, if any (no pun intended) or nothing


```
type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer R ) => unknown ? R : never
```

Let's break it down:

`T extends (...args: any[]) => any` You could read this as our type extends a function and could return anything or nothing.

**Understanding the infer keyword**
The infer keyword can be used within a condition in a conditional type to put the inferred type into a variable. That inferred variable can then be used within the conditional branches.

`T extends (...args: infer R ) => unknown ? R : never` So we infer the types of the function parameters. If it does return something, meaning there were parameters, we return the inferred type, otherwise we return never (nothing, ignored by TS)


Thank you!

you can find me here [My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)
Let's build a multiplayer movie trivia/quiz game with socket.io, svelte and node. devlog #12
Tags: devlog, webdev, svelte, socketio
Published: 2022-08-28 19:40:05

## Going back!!

Last time I talked about the implementation of a "back button" so always can get out of the game and back to the start.

The server side code is still the same, just added a if-statement so don't have to run any code if not currently in a game, so if in settings and choose to go back there is no need to do any checks as player can not be in a game.

The Svelte component is simply a button saying back, will probably put in an icon or something later.. for now good enough.

The component is directly in app and is shown if not on the "start screen"

```js
<script>
	export let socket;
	import { activeComponent, gameProps } from '../lib/stores';

	const back = () => {
		if ($gameProps?.id) {
			socket.emit('leave-room', $gameProps.id);
			$gameProps.id = '';
		}
		activeComponent.set('Start');
	};
</script>

<button class="back" on:click={back}>Back</button>

<style>
	button {
		position: absolute;
		top: 10px;
		left: 10px;
		width: 100px;
		padding: 10px;
	}
</style>
```

## Got a can of inspiration?
So I finally got some inspiration to how the UI should be, or well, at least the end game component.

At first I tried using a table, but it did not feel right so I just made it like a list instead

This is how it looks like now:
![game_results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/801vcnpcvleltaeya75q.PNG)

Made it responsive so text n images shrink on mobile. This way of displaying the results as a list is so obvious I did not even think about it before.. haha.. yeah, I suck at UI stuff.

Will also put in the the last round results later.

Also think I will add something similar to the round results so can see who is in the lead of the game, but yeah, that will be for later.

Still need to figure out where to put the chat.. think will just put it on the right side of the screen and if using mobile will add some toggle to bring it on screen.

Yeah, not much happened since last time, but some, and it is progress...
Automatically switching node versions |`nvm use`
Tags: nvm, node, nvmrc, zsh
Published: 2022-08-28 19:28:00

**Issue:**
`npm install` or `npm ci` keeps throwing a ton of errors
Then I realize I am on a different version of node

Instead of remembering about it, checking if `.nvmrc` file exists, then switching to that node version, let `nvm use` do it all the work for you.

I use .zsh shell, so I used this script from nvm-sh#zsh [docs](https://github.com/nvm-sh/nvm#zsh)

```
# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc
```

**Result:**
Blissss. I don't have to ever (hopefully) think about what version of node is currently used when I switch between projects. 

**Resources:**
https://github.com/nvm-sh/nvm#zsh
How to Store Images on GitHub ?
Tags: github, githunt, beginners, webdev
Published: 2022-08-28 19:27:45

#####In this quick walk-through you'll learn how to create a separate branch in your repo to store your screenshots and demo gifs for use in your master's readme.

#### 1. Clone a fresh copy of your repo
In order to prevent any loss of work it is best to clone the repo in a separate location to complete this task.

#### 2. Create a new branch
Create a new branch in your repo by using `git checkout --orphan assets`

This will create and switch you to a new branch called "assets". The `--orphan` flag creates a new branch but without any prior commits. However it does still keep the working tree and index. 

#### 3. Remove files from the working tree
`git rm -rf .`

***THIS WILL DELETE ALL FILES THAT THE WORKING TREE RECOGNIZES*** Any files that were not added to the tree will remain left behind in the folder.

We remove all files from the working tree since we do not want anything but our screenshots and images in this branch.

You can also check what branch you are on anytime by using `git branch`. The branch with the `*` next to it is the current branch.

#### 4. Add your images and screenshots and commit the change
`git add screenshot.png demo.gif logo.png`

`git commit -m "Added Assets"`

#### 4. Finally push your changes
`git push origin assets`


## Use the images in your README
You can now use
`![Demo Animation](../assets/demo.gif?raw=true)`
in your README to have the gif display on your master's readme.