teleren/devto huggingface dataset:
#006 - Operadores Lógicos
Tags: javascript, beginners, frontend, basics
Published: 2021-06-03 16:41:22

Antes de tudo, obrigado pelos acessos que vocês tem dado à estes posts, eu tentarei continuar a faze-los com a mesma frenquencia semanal. Para mais posts de diferentes assuntos acesse meu blog: blog.wmitrut.co

Coloca esse álbum do Nektar que eu econtrei essa semana e manda ver:

{% spotify spotify:album:3FP4eu71M2c09h8M4PyM4p %}


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

Operadores lógicos são operadores que retornam valores booleanos. Além de `true`

 e `false`, estes operadores podem retornar verdadeiros e falseáveis.

Os valores falseáveis não necessariamente são só `false`. Existem 6 valores que podem ser considerados falseáveis:

```jsx
undefined, null, NaN, 0, "", false
```

Todos os valores verdadeiros são aqueles que não são falseáveis. Lembra da tabela verdade? Abaixo anexo uma aula bem completa sobre tabela verdade e valores verdadeiros e falseáveis.

{% youtube s_9HNbY4Zek%}

Em Javascript isto pode ser representado da seguinte maneira:

```jsx
const x = true;
const y = false;

//Se utilizarmos o conectivo && - AND/E, ambos os valores
//tem que ser verdadeiros

x && y //retorna false

//Se utilizarmos o conectivo || - OR/OU, ao menos um dos valores 
// tem que ser verdadeiro
x || y //retorna true

//Já o operador ! - NOT/NÃO, retorna false se for verdadeiro e 
//verdadeiro se for falseável
!x // retorna false
!y // retorna true
!'Mitrut' // retorna false
```

Pronto, para saber a ordem de chamada, pense sempre na ordem normal matemática. Na próxima semana iremos tratar de Condicionais em javascript e depois cair de cabeça em um dos assuntos mais extensos e legais de JS: ARRAYS.
VSCODE View Focus
Published: 2021-06-03 16:26:20

I love when I have coding issues with vague documentation and find open Stack Overflow questions about something I am working on, and then I manage to figure it out and get to post the right answer 😎

https://stackoverflow.com/questions/67683976/vscode-extension-how-to-programmatically-show-view-container-in-panel

![XKCD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2uccdepj4woncx019vk.png)
Forem for iOS is here! ✨
Tags: forem, mobile, meta, ios
Published: 2021-06-03 16:14:11

---
title: Forem for iOS is here! ✨ 
published: true
description: Download the new Forem app on the App Store
tags: forem, mobile, meta, ios
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05xylqzo4i052gscy89g.png
---

One of the guiding principles behind [Forem](forem.com) (the open-source software that powers DEV, [CodeNewbie](community.codenewbie.org), and a growing number of online communities) is that discovery and community connection should be a delightful experience, available to everyone at all times.

### _That's why I'm extremely excited to share that [the Forem app for iOS is now available on the App Store](https://apps.apple.com/us/app/forem/id1536933197)._ 🎉 

For months, our team has been hard at work optimizing the Forem features you know and love for iOS and packaging them into a complete app experience. Now, whether you're at home or living your life in the wider world, all of your favorite communities can travel with you. No more tripping between Safari tabs to find that article, podcast, conversation, or discussion you just can't shake!

### **Let's take a look at some of the unique features you'll get with Forem for iOS...**

> #### Discover & Preview New Forem Communities 
Browse the list of available public Forems or add a privately listed Forem you belong to. Tap into each for a preview before you decide to join. 

> #### Effortlessly navigate between Forems
Our dropdown menu or left-right swiping functionality allows you to explore different communities the way your fingers are trained to do on iOS!

> #### Browse mobile-optimized content
Articles, discussions, and podcasts on public Forems are available for your enjoyment — whether you're a member of them or not.

> #### Share images on the go
Post while the inspiration strikes with our mobile image uploader.  

> #### Stay up-to-date with the latest activities 
Push notifications keep you in the loop with the latest news about your posts, comments, and network. 

... and lots more!

## [>>Download Forem for iOS on the App Store](https://apps.apple.com/us/app/forem/id1536933197)

We hope you'll try out the app and let us know what you think. If you love it, consider leaving us a review. 

## When can I start my own Forem?

The short answer: **very soon**.

We’re incredibly excited to empower you to build your own independent community.  Be sure to read Ben’s post here for more insight into our high-level strategy and technical decisions, along with more information about the timeline and next steps for building your own community with Forem.

{% link https://dev.to/ben/forem-s-approach-to-decentralized-social-media-on-mobile-2e1p %}
Integrate Aurora with Ghost.
Published: 2021-06-03 15:46:38

Some days ago, i've released on [Github](https://github.com/itsrennyman/aurora) a Cookie-Free Website Analytics App called [Aurora](https://www.useaurora.app/).

Today I want to show you how easy it is to integrate Aurora with widely used applications such as Ghost, the famous Blogging platform that recently released version 4.0

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

Ghost is a complete platform to run an independent media business, whether you're just getting started as a creator, or scaling to millions of dollars a year in recurring revenue.

### Requirements
- A running Aurora Instance
- A running Ghost Instance

You can find [here](https://github.com/itsrennyman/aurora-integrations/tree/main/ghost) a `docker-compose.yml` file for a quickstart with docker.

### Get the Aurora Tracking Code
To connect your ghost instance with Aurora it will be necessary to obtain the tracking code, you can obtain it by creating a new website directly from the Aurora control panel.

### Use Ghost Code Injection
In Ghost you can inject code across your entire site or on an individual post or page. Since Aurora needs to track analytics across your entire site, we’ll use the global code injection feature which can be found in the Ghost Admin settings menu.

![Ghost Code Injection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im6dv3870m9g5wgaws0r.png)

Aurora requires the tracking code to be in the `<head>` of each page on your site, so paste it into the Header section and hit save.

All done! Your site is now fully integrated with Aurora. Login to your Aurora dashboard and start monitoring your site’s metrics!

--

Have I intrigued you and you want to try Aurora? You can go on the [Official Docs](https://docs.useaurora.app/) and follow the start guide, it's really quick to get started!

Do you have twitter? Let's get connected!(@itsrennyman)
Build a shortest route app like UberEats / Deliveroo in React! (tutorial)
Tags: tutorial, video, clone, react
Published: 2021-06-03 15:47:06

Have you ever wanted to build a delivery app that will calculate the shortest distance from each drop off spot? if so, this is the video for you.

Now, for those of you who have never heard the buzz word Matrix Routing before, it is what we will be using to optimise our multiple deliveries by travel time. 

We are going to be using TomTom Map SDK for Web, to show us the best route for us as the delivery driver, to drop off all three deliveries based on time, taking: 
1. The route into account 
2. The traffic on the roads into account. 
3. The traffic incidents on the roads into account

The final route is calculated using the “Routing API” which by default will do a “car”  route. But it can do way more than that. It can calculate the routes for motorcycles, vans, trucks or pedestrians! As you can image, the results will vary.  

00:00 Introduction
02:17 Signing up to get our API Key from Tom Tom ( click here: https://bit.ly/2S5Ry7x )
03:25 Starting our React App Project
05:43 Adding our Map
14:36 Setting the longitude and latitude by Search box + Adding traffic incidents to the map
20:00 Add a Marker to the Map
26:05 Making the Marker Draggable
28:51 Adding a Popup to the Marker
31:06 Adding Multiple Delivery Points and Calculating the shortest route

Get extra API requests using ANIAKUBOW *after(!)* signing up, here: https://bit.ly/3uCAkvK


{% youtube 43jfFU4FJZo %}

___
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

You can also find me on:
Twitter: https://twitter.com/ania_kubow
Instagram: https://instagram.com/aniakubow

#deliverooClone #uberClone
Data Structures in TypeScript - Array
Tags: datastructures, typescript, array
Published: 2021-06-03 15:43:00

---
title: Data Structures in TypeScript - Array
published: true
description: An array is a common data structure that holds items of the same type, in TypeScript, unlike other languages, an array doesn't have a fixed length.
tags: dataStructures,typescript,array
series: Data Structures in TypeScript
cover_image: https://res.cloudinary.com/dje4crtui/image/upload/v1626974055/articles%20covers/cover_wnn3mp.png
canonical_url: https://ricardoborges.dev/data-structures-in-typescript-array
---

An array is a common data structure that holds items of the same type, in TypeScript, unlike other languages, an array doesn't have a fixed length. Also, in TypeScript, you don't have to re-organize all elements of an array when makings operations like insert or delete.

### Representation

![array](https://res.cloudinary.com/dje4crtui/image/upload/v1622593241/array-img_kn9hp3.png)

* **Elements** are the items stored in an array
* **Index** is the location of an element in an array, it goes from 0 to (array length - 1)


```typescript
/** An array can be written like this **/

const numbers: number[] = [1, 2, 3, 4]
const names = string[] = ['Snake', 'Ocelot', 'Otacon', 'Naomi']

/** Also can be written using a generic array type, Array<elemType> **/

let list: Array<number> = [1, 2, 3, 4]
let list: Array<string> = ['Snake', 'Ocelot', 'Otacon', 'Naomi']
```

### Basics operations

**Traverse** - Print all array items one by one

```typescript
/** 3 ways to iterate an array **/

for(let i=0; i<array.length; i++) {
    console.log(array[i])
}

for(const item of array) {
    console.log(item)
}

array.forEach(item => {
    console.log(item)
})
```

**Insertion** - Add an item

```typescript
/** add to the end **/
array.push(5)

/** add to the beginning **/
array.unshift(0)

/** add in a specific index position **/
array.splice(3, 0, 8) // add 8 in the index 3
```

**Deletion** - Remove an item

```typescript
/** remove from the end **/
array.pop()

/** remove from the beginning **/
array.shift()

/** remove from a specific index position **/
array.splice(2, 1) // remove from index 2
```

**Update** - Update an item

```typescript
/** update element in position 1 **/
array[1] = 7
```

**Search** - Search by an item

```typescript
/** you can traverse an array to find an element by its value, or simply use the .find() function **/

const item = array.find(item => item === 3) // search by an item with value 3
```

### Strings are arrays of characters

All above operations can be performed on strings to solve problems like count the occurrences of a character in a string:

```typescript
let str = "aabbccdd"
let occurrences = 0

for(let i=0; i < str.length; i++) {
    if(str[i] === "c") {
        occurrences++
    }
}

console.log(occurrences) // prints 2
```
Muskurahat Foundation
Published: 2021-06-03 15:03:36

Hey! 

I am Volunteering with **Muskurahat Foundation**, an NGO based in Mumbai. 

Project **KEYtaab**, an initiative by Muskurahat Foundation, aims at providing the underprivileged children from Shelter Homes and orphanages with the holistic development that they lack. 

Through a specially crafted curriculum we are trying to give them a right Upbringing, which they do not get 21st century life skills like critical thinking and problem solving among many others, and improve their emotional well-being through Therapy. 

We are working with **450 children currently**, in 11 shelter homes/orphanages, across 3 cities. 

Donate and help us launch the project in 15 more cities, transforming the lives of 1000+ children.

###To know more, please visit www.muskurahat.org.in

##Please donate by going on this link: https://donate.muskurahat.org.in/?r=rah1093

**Referral Code: rah1093
(Please keep in mind to check the reference code while donating. It will help me track my efforts.)

**Looking forward for your help. Thanks.
9 Shorthands We Need to Know for Writing JavaScript
Tags: javascript
Published: 2021-06-03 15:18:02

### 1 if..else
```js
const x = 100
if(x>100) {
  console.log('over 100!');
} else {
  console.log('OK');
}

console.log((x>100) ? 'over 100!' : 'OK');

// output
OK
```

```js
let result = 0;
if(result ===0) {
  result = 10;
} else {
  result = 100;
}

let result =0;
result = result === 0 ? 10 : 100;

// output
result 10
```


### 2 if with multiple conditions
```js
const x = 'hello'

if(x ==='123' || x === 'world' || x === 'ok' || x === 'hello' ) {
  console.log('hi 👋');
}

const myConditions = ['123', 'world', 'ok', 'hello']
if(myConditions.includes(x)) {
  console.log('hi 👋');
}

// output
hi 👋
```


### 3 Variable
```js
let a = 10;
let b = 10;

let a, b = 10;

// this won't work NG
let a = 10;
let b = 100;

let a, b = 10, 100;

// this is ok
let a = 10, b =100;

let [a, b] = [10, 100];
```


### 4 increment/decrement + α
```js
a = a + 1;
b = b - 1;
c = c * 10;
d = d / 10;

a++;
b--;
c *= 10;
d /= 10;
```


### 5 Spread operator
```js
const x = [1,3,5];
const y = [2,4,6];
const result = y.concat(x);

const result_with_spread = [...y, ...x];

// output
[2, 4, 6, 1, 3, 5]
```


### 6 Template literals
This isn't really short but intuitive.
Especially, if we need to put space in the text, `Template literals` is very useful. 
```js
x = 'hello'

console.log(x + ' world');

console.log(`${x} world`);

// output
hello world
```


### Template literals with a new line
```js
console.log("hello \n" + "world");

console.log(`hello
world`);
```


### 7 pow
```js
const result = Math.pow(10, 3);

const result = 10**3

// output
1000
```


### 8 Object property
The property name and variable name must be the same.
```js
name='koji'
sex='male'

const myObj = {name: name, sex: sex}

const anotherMyObj = {name, sex}

// output
console.log(myObj)
{name: "koji", sex: "male"}
console.log(anotherMyObj)
{name: "koji", sex: "male"}
```

```js
const kojiObj = {name: "koji", sex: "male"};

const {name, sex} = kojiObj;

// output
console.log(name, sex);
koji,male
```


### 9 Repeat
```js
const repeatNum = 10;

let resultString = '';
for(let i = 0; i < repeatNum; i ++) {
   resultString += 'hi ';
}
console.log(resultString);

'hi '.repeat(repeatNum);

// output
hi hi hi hi hi hi hi hi hi hi "
```


cover iamge
Photo by <a href="https://unsplash.com/@hishahadat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Shahadat Rahman</a> on <a href="https://unsplash.com/s/photos/js?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
DevNews Podcast — Season 4 Finale!
Tags: news, podcast
Published: 2021-06-03 15:09:14

---
title: DevNews Podcast — Season 4 Finale!
published: true
description: Listen to S4E8 of the DevNews pod!
tags: news, podcast
series: DevNews Season 4
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

I can't believe the season finale of DevNews is already here 🥺 

{% podcast https://dev.to/devnews/s4-e8-an-elaborate-phishing-hack-autonomous-lethal-drones-a-questionable-m1-security-flaw-and-a-devnews-behind-the-scenes %}

For S4E8, @saronyitbarek and I flipped the script a bit to chat with our amazing producer, [Levi Sharpe](dev.to/levisharpe) about what it's like to make our show.

**True to form, we naturally focused on some of the latest and splashiest stories in developer news as well:** 

- An elaborate fake movie phishing hack
- A questionable M1 security flaw
- The first autonomous lethal drone targeting humans (ummmmm... 😱) 


You can (and should!) follow Levi here on DEV and Twitter at @levisharpe 


_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s4-e8-elaborate-phishing-hack-autonomous-lethal-drones/id1525581923?i=1000524041481)
- [Spotify](https://open.spotify.com/episode/1IrjHcW7poHxtOr5ilXOPW)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzI4?sa=X&ved=0CAQQkfYCahcKEwjw9q3iyLXwAhUAAAAAHQAAAAAQAg)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s4-e8-an-elaborate-phishing-hack-autonomous-lethal-drones-a-questionable-m1-security-flaw-and-a-devnews-behind-the-scenes-84435763)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s4e8-an-elaborate-phishing-HURW8NnXiAm/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=163512063)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.herokuapp.com/podcasts/devnews/episodes/169)

_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season four sponsors, [Scout APM](https://scoutapm.com/devnews) and [Rudderstack](https://rudderstack.com/) ❤️ 


Thank you so much for listening to DevNews this season. See you soon for season 5 👋 

![That's all, folks](https://media.giphy.com/media/upg0i1m4DLe5q/giphy.gif)
Login Form With Validation Using HTML & JS
Tags: html, css, webdev, javascript
Published: 2021-06-03 14:53:19

Hello,

Today I created a Amazing Login Form With Validation Using HTML & JS. This is a simple form have with validation. I hope you like this also comments about your thoughts.

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

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/wvMZOqV %}
Use @entangle to get Pikaday date value on button click in Laravel Livewire. 
Published: 2021-06-03 14:49:51

Recently i wanted to get Pikaday value to livewire component property on seperate action, rather than onSelect event of Pikaday. But i could not find a solution online and had to do it myself hence writing to help somebody looking for something in future. 

And this is the code i used in a blade component e.g <x-date-picker>

```php
@props(['id'])

<div wire:ignore>
    <input
        class="border"
        x-data="{
       // entangle local variable to component property.
        variable: @entangle($id).defer 
        }"
        x-ref="input"
        x-init="
        new Pikaday({
            field: $refs.input,
            format:'M/D/YYYY',
            toString(date, format) {
                // you should do formatting based on the passed format,
                // but we will just return 'D/M/YYYY' for simplicity
                const day = date.getDate();
                const month = date.getMonth() + 1;
                const year = date.getFullYear();
                return `${year}-${month}-${day}`;
            },
            onSelect: function() {
                // assign selected value to variable 
                variable = this.toString();
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>
```

And this is how you going to call this component. 

```
  <x-date-picker                    
                    id="startDate" // this does the thing
                    autocomplete="off"
                    placeholder="Date"
                />
```

the benefit of this approch is that, this does not fire any livewire event on select, so no trip to server untill i fire using another button like this.

```
<x-button wire:click="$refresh" secondary class="text-xs"> Search </x-buttons.link>
```
How to exclude password from mongoose mongodb
Tags: mongodb, mongoose, node, auth
Published: 2021-06-03 14:49:11

While logging or registering the user , we generally return the user data , password or hashed password is also returned along with the data , we do not want to send the hashed password to frontend so how do we exclude.

# exclude password from returned object
## Register
After creating user
```js
const createdUser = await User.create({
  email: email,
  password: await argon2.hash(password),
});
if (createdUser) {
  const { password, ...responseUser } = createdUser._doc;
  return { user: responseUser };
}
```
the ._doc contains the data like `email` , `username` , `password` which we specify in the schema
## Login
```js
let user = await User.findOne({ email: email });
if (user) {
  if (await argon2.verify(user.password, password)) {
    const { password, ...responseUser } = user._doc;
    return { user: responseUser };
  } else {
    return {
      error: [{ field: "password", message: "wrong password" }],
    };
  }
}
```
We do the same thing but after finding the user

Thanks for reading, hearts ❤️ if you liked it and unicorns 🦄 if you loved it, follow if you wanna read more awesome blogs
Parse Cookies in Next.js
Published: 2021-06-03 14:46:29

One thing i love and hate at the same time about node eco-system is, that there is always a package for everything and you have to use npm package/module for everything. Apparently that was also behind the success of nodejs and Ryan hated it and he said it repeatedly. Personally i don't like to use package until it is very essential. 

Anyways so recently i was implementing session in nextjs app and i had to parse cookies to get the token which i did set from my login api Route. I used `querystring` module from nodejs default modules to parse it. Node has some very useful modules and they come along with node, so you always have them with you, whether you use them or not. 

Anyways long story short, this is what i used to parse query string.

```
import qs from 'querystring';
```

```
const cookies = qs.decode(ctx.req.headers.cookie, "; ")
```
`ctx.req.headers.cookie` would have something like this 

```
token: 'token_cookie_value; Proxy_session=e05hujj6o8k6j9r'
```

so anything, in this form can be parsed with this code and it would look like this after parsing. 

```
{
  token: 'token_cookie_value',
  Proxy_session: 'e05hujj6o8k6j9r'
}
```

So thats it. Simple and to the point. You can read more about querystring.parse here 
https://nodejs.org/api/querystring.html#querystring_querystring_parse_str_sep_eq_options

Take care till next time.