teleren/devto huggingface dataset:
Codewar day 1
Tags: javascript, node, competitiveprograming, codewar
Published: 2020-07-29 16:48:47

today i challenge my self to solve minimum 1 codewar challenge everyday. ok lets start the first day!! 

the problem : 
 Your goal in this kata is to implement a difference function, which subtracts one list from another and returns the result.

It should remove all values from list a, which are present in list b.
```javascript
arrayDiff([1,2],[1]) == [2]
```
If a value is present in b, all of its occurrences must be removed from the other:
```javascript
arrayDiff([1,2,2,2,3],[2]) == [1,3]
```
my solving : 
```javascript
const arrayDiff = (a, b) => {
  let arr = a;
  let filterarray = b.forEach((item, i) => {
    let n = item;
    let resultfilter = arr.filter(value => {
      return value !== n;
    });
    arr = resultfilter;
    return resultfilter;
  });
  return arr;
};
```
i know the solving is not good as other. but its worked haha :D
after solving this, i read the most popular answer , and this is the result :
```javascript
function array_diff(a, b) {
  return a.filter(e => !b.includes(e));
}
```
im never hear "includes array function", now i must learn again to get more refference. 

i think array.prototype.includes is very fun to usefull, hope i can use it next time
Fetch any YouTube video’s metadata in 2 lines
Published: 2021-05-09 23:08:50


So, i was looking for a way to quickly get a YouTube video’s metadata without having to setup the developer account and get an API key since i just needed to integrate it as one small feature.

After doing a quick Google search, I came across the oembed API to fetch metadata for any video with using its link. So it goes like dis

tldr:
{% gist https://gist.github.com/100lvlmaster/37e26620fe9329597168e2a6188da8ce.js %}
But after a bit of refactoring 🧹…
{% gist https://gist.github.com/100lvlmaster/3dd10cc6940917706a07e971ed3305b7.js %}
The basic HTTP request looks like this…

    [http://youtube.com/oembed?url=${YOUR](http://youtube.com/oembed?url=${YOUR)_VIDEO_URL}&format=json

Gives us a response like this…

    **{
    **"title": "Rick Astley - Never Gonna Give You Up (Video)",
    "author_name": "RickAstleyVEVO",
    "author_url": "[https://www.youtube.com/user/RickAstleyVEVO](https://www.youtube.com/user/RickAstleyVEVO)",
    "type": "video",
    "height": **113**,
    "width": **200**,
    "version": "1.0",
    "provider_name": "YouTube",
    "provider_url": "[https://www.youtube.com/](https://www.youtube.com/)",
    "thumbnail_height": **360**,
    "thumbnail_width": **480**,
    "thumbnail_url": "[https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg](https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg)",
    "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
    **}**

That’s pretty neat :]
[**navinko**](https://navinko.netlify.app)
Object Relationships Intro
Tags: webdev, programming, beginners, database
Published: 2021-05-09 23:06:30

When you are constructing object-oriented programs in programming. You will run into a need to model your related objects/data and save them to a database in a way that is both useful and expressive.

Understanding object relationships will help you identify the proper connections you need to make when modeling your objects in your code. 

These connections make your programs easy to understand for other programmers and make your program very extensible. 

### Object Relationships

Object relationships are the technique of creating hierarchy, relations, and communication with complex data types in your code. Software like Object Relational Mapping Systems and Relational Database Management Systems make it possible to utilize organized classes of objects in your code to create object relationships. 

[UML (Unified Model Language)](https://en.wikipedia.org/wiki/Unified_Modeling_Language) is a great tool to learn to construct object relationships. 

![UML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld7xaymfx95bhwbuuafe.jpeg)

Here are 3 important object relationship types: 

### One to One Relationship

A one-to-one relationship is an association of one object class instance to one single instance of a different class object. 

```
// Example:
Credit Card 
has_one: Credit Card Number 

Credit Card Number 
belongs_to: Credit Card
``` 
### One to Many Relationship

A one-to-many relationship is an association of one object class instance to many instances of a different class object. 

```
// Example:
Customer
has_many: Orders 

Order
belongs_to: Customer 
``` 

### Many to Many Relationship

A many-to-many relationship is an association of many object class instances to many instances of a different class object. 

```
// Example:
Product 
has_many: Customers

Customer 
has_many: Products 
``` 

### Let's chat about object relationships

We learned some important parts to object relationships and now understand 3 important object relationship types. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with object relationships.

Happy Coding,
Terry Threatt
3 obstacles of a beginner junior developer and how to overcome them
Tags: beginners, devops, productivity, timemanagement
Published: 2021-05-09 23:01:43


## 

Being a junior developer at a startup is a tough job, for a self-taught developer and who is also getting a degree in Computer Science. I started out as an intern and transitioned to a full stack junior developer position. And these are the three things that became my kryptonite for a short time.

Since these are problems and since we are problem-solvers, these are my analyzes.
![gif1.gif](https://media.giphy.com/media/xT5LMKYQAjTBqvIvio/giphy.gif)
## **1.Procrastination**
![gif2.gif](https://media.giphy.com/media/26xoplW0VhLLByrAY/giphy.gif)
So , you’ve realized those ugly blockers that are simple to solve yet take a long time to overcome. They really keep you from writing that sweet, well-formatted code. But as soon as you hit those kind of blockers, you take a small break before resuming knowing the time to solve it. This is a form of procrastination.

A good approach would be to remind yourself to snap out of it, but like all habits this will take time to stick.

How i got past this:-

I kept in contact with my project management tool/superior, this kept me focused on the task.

## 2.Decision making
![gif3.gif](https://media.giphy.com/media/Uni2jYCihB3fG/giphy.gif)
Another problem that consumed a lot of my time was small decisions, that were based on the architectures and packages/plugins to use. I would wait to until my boss was free because i didn’t want compromise on the architecture and coding standards. This might’ve been better for some occasions, but in most cases, ` Time is of the essence ` and we wouldn’t want to waste that.

How i got past this:-

I solved the problem in any way first and then took the overhead time to refactor the code. You could always go back but you cant solve it in 3 seconds when you’re asked to.

## 3. Underestimating project ETA
![gif4.gif](https://media.giphy.com/media/RLE2Q5ajPa6GgUxe1z/giphy.gif)
When you think a small task will take 15 minutes but you forget important factors. BUGS, BLOCKERS and the time it takes to find the solution. It completely alters the ETA by adding hours or even days. But you remember your 15 minutes ETA and then you start biting your nails.

It’s always good to ask your experienced counterparts/bosses for directions. One such advice i received was to divide the tasks into smaller tasks and increment time by that. So if a module is it be built, you factor in the time to refactor code, build repository classes, models, and then you estimate your time.

How i got past this:-
> # ‘ Divide and conquer ‘ - someone.

Divide the tasks into smaller sub-tasks and estimate all of their time together.

## But Then Again

Since we’re all different and we navigate through life in our own ways. It’d be nice to hear how **you** overcame these obstacles.
Learning SwiftUI, MVVM and Firebase
Tags: swift, ios, beginners, firebase
Published: 2021-05-09 23:00:18

SwiftUI is such a pleasure for a new iOS developer like myself. When you combine it with Firebase, it’s so much easier now to build robust apps. I want to share my journey in building a simple social media app.




Here are the details, including a GitHub repository:

https://ongomobile.medium.com/learning-swiftui-mvvm-and-firebase-bbc3e5073a25?sk=2209e869c02840ead810a83724cb6b59

Update I added a few more features, updated like button.
Firefighting for Moonshots
Published: 2021-05-09 22:58:56

---
title: Firefighting for Moonshots
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

As the mosquito nets as fish-nets shows, problems can't sometimes be solved as another more immediate problem appears that the solution's resource is spent on, also one moonshot can cause another to fail or appear at a much later time than possible, and at times the solution to one problem and the solution to another problem cause a novel unforeseen problem to surface. 
These are just some of the fires that may need urgent and quick responses.
Ever-speedier responses will be needed as time brings exponentially newer solutions. We would need to catch up ever faster to survive.
Aqui está um tutorial de useState (ou quase)
Tags: react, hooks, tutorial, javascript
Published: 2021-05-09 22:12:24

![React Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m64nayc4xxagczx92wt.png)

Sempre que alguém se depara com o React pela primeira vez, se assusta com os seus hooks e funcionalidades, não é mesmo? Eu mesmo sinto medo de alguns hooks e já fui dormir chorando várias vezes por conta de alguns deles.

Mas fica tranquilo que pelo menos o useState eu posso tentar te ensinar de uma forma simples como se você estivesse no ensino fundamental pela primeira vez.

Em React nós temos vários hooks e um deles é o useState, esse pra mim é o mais simples de entender e aplicar, então vamos ver como que ele funciona.

## Criando e iniciando o useState

O que é o useState? useState é um hook do React a qual nos retorna um array com dois elementos, sendo o primeiro o nosso estado e o segundo uma função para alterar o nosso estado. Além disso, podemos passar como argumento, um estado inicial para o nosso estado. Não entendeu ainda? relaxa que eu vou te explicar. *Veja no exemplo abaixo:* 

```react
import { useState } from "react";

export default function Component() {
  const [state, setState] = useState(0);
```
Aqui nós temos o `state` que é o estado, o `setState` que é a função para alterar o valor do nosso estado e o `useState(0)` que é o valor inicial do nosso estado, nesse caso é o `0` (poderia ser qualquer outro valor, como uma *string* e *boolean*).

## Utilizando o useState na prática

Para entender melhor como funciona o useState, precisamos também entende-lo na prática. E pra isso vou mostrar um exemplo de useState para fazer um contador simplezão.

```react
import { useState } from "react";

export default function Component() {
  const [counter, setCounter] = useState(0);

  function addCounter() {
    setCounter(counter + 1);
  }

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={addCounter}>Adicionar</button>
    </div>
  );
}
```

na linha 4 temos um exemplo de um estado que está recebendo um valor inicial de `0`
```react
const [counter, setCounter] = useState(0);
```
 e uma função logo abaixo na linha 6 que irá acrescentar `1` para nosso estado toda vez que o botão for clicado 
```react
function addCounter() {
    setCounter(counter + 1);
  }
```
para exibir o estado na tela é só adicionar um `{}` no seu HTML com o estado dentro, no exemplo é o h1 (linha 12).
```react
<h1>{counter}</h1>
```

Ao clicar no botão duas vezes automaticamente nosso estado foi exibido na página com o número `2`, graças a nossa funçãozinha chamada `addCounter` que acrescentou 2 vezes.

![estado counter exibindo contagem acima do botão de acréscimo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvftcoob73l4u6d30y63.png)

CONSEGUIMOS, UHUL! criamos um contadorzinho super simples e funcional com o **useState**! Agora é só praticar com outros exemplos que eu tenho certeza que você vai se sair super bem! :heart:
How does Vue.js, Angular, or Ember do data store?
Tags: redux, vue, angular, discuss
Published: 2021-05-09 21:01:48

How does Vue.js, Angular, or Ember do data store? I found React's Redux a bit complicated / messy and have a lot of boilerplates, usually with a lot of selectors after selectors and createSelector(), and tons of reducers.

I know I don't have to use Redux with React, but most projects I have seen (and have to use at work) use Redux.
Let's Get You Started With React Native (If You're A React Developer)!
Tags: reactnative, react, mobile, webdev
Published: 2021-05-09 20:56:03

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

I know that you know React. I know that you don't know React Native. In this post, let's get you started with React Native.

### What's React Native?
A cross-platform (native*) mobile development JavaScript framework made on top of React, so it resembles React in a lot of ways.

### But I wanna learn Flutter/Native development using Java/Kotlin/Swift...
Cool. Why don't you just try making a "Hello, world!" app by following the rest of the post.

> Disclaimer: I'll teach you how to make a React Native app using Expo CLI (in my opinion a great productivity tool, but has it's fair share of haters too). 

##### Step 1:
Install Expo globally.
```javascript
npm i -g expo-cli
```

##### Step 2:
Download Expo Go in your phone to view the app (it has hot reloading too).
App Store: https://apps.apple.com/us/app/expo-go/id982107779
Play Store: https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en&gl=US

##### Step 3:
Initialize a new project.
```javascript
expo init myproject
```

##### Step 4:
Choose a workflow. I recommend managed workflow (blank) for starters. With this workflow, you'll have pure JavaScript project without the underlying Android and iOS codes, so your experience will be similar to building React apps on web. 

##### Step 5:
Type this in App.js.
```javascript
import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function App() {
  return (
    <View>
      <Text style={styles.myStyle}>Hello, world! The sky is blue.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  myStyle: {
     fontWeight: "bold",
  }
});
```

Explanation: In React Native, there are no divs or heading tags. Instead we've got React Native components such as Text and View (equivalent to div in React). As for the styles, we need to import StyleSheet and define our CSS styles there, just like how we'd do it in React. In CSS, you'd write font-weight (kebab case) and in React/React Native, the equivalent is fontWeight (camel case). I assume you know this already.

##### Step 6:
Run the project.
```javascript
npm start
```

##### Step 7:
Expo Developer Tools will be launched on your browser. From your Expo Go app in your phone, scan the provided QR code. Make sure your phone and computer are on the same network. 

##### Done!

As you can see, React Native is very similar to React. Of course, when it comes to cross-platform mobile app development, there are so much of arguments. Some of them include "Flutter Vs. React Native", "Is Cross-Platform Mobile Dev Worth It", and so on. My advice to you is that if you know React already, it wouldn't hurt to learn React Native too. If anything, you can totally forget React Native and move on with your programming journey.
It's time to write!
Tags: firstpost
Published: 2021-05-09 20:38:57

Hello Devs.

I've wanted to do this for a while, but I always found an excuse to get started. But, I founded this post which inspired me to take the first step:

{% post jmfayard/yes-you-should-write-that-firstpost-481 %}

Thank you, @jmfayard .

## Presentation
My name is Víctor. I'm from Colombia and I'm Back-End Software Developer since 2017. 

My day to day is evaluate, design and build requirements and debuggin components builded in Pl/Sql and C# languages, for a good company that offered me the opportunity, without experience and professional title (yes, you can do it and I will talk it in another post).

### My focus in this moment
- Only Back-end 👻
- Design patterns.
- Software Architecture.
- Python, in deep ❤️

### My first programing language
- Java. I love you too.

## Intentions on Dev.to
- Share knowledge.
- Improve writing skills.
- Practice the English language.
- Share and make friends in this industry.

To finish, I leave a preview of what I will talk about in the next post: Different ways to implement recursion (stack and queue).

I forgot, You can follow me on [twitter](https://twitter.com/victorhtorres).

Thanks!
Build a nodeJS server without using express.
Tags: javascript, node
Published: 2021-05-09 20:30:18

Ever wondered how to build a server without using express?

Well, look no further...
&nbsp;
&nbsp;
## Introduction
&nbsp;
While a very convenient framework express is not necessary to get up and running with a server built on nodeJS.

[Looking at how express operates](https://github.com/expressjs/express/blob/master/lib/application.js) you'll realize that under the hood it utilizes the **http** module, and as such you can think of express as a wrapper for http.

With this in mind we shall attempt to spin up a server using the http module alone.
&nbsp;
&nbsp;
## Getting started
&nbsp;
The amount of code we need to write to achieve this is minimal.

```javascript
const http = require('http');

const requestListener = function (req, res) {
  res.writeHead(200);
  res.end("I'm a server");
}

const server = http.createServer(requestListener);
server.listen(8080);
```

Yep, that's all you need.

Assuming you name this file server.js all you need to do is run `node server.js` and go to `http://localhost:8080/` and you will be greeted by this.

![ksnip_20210510-045312](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hntqx0309mx1twu7kuxh.png)

You may notice that the code to achieve this looks eerily similar to how you would do it with express...that's no coincidence.

This really reinforces the concept that Express really is just a functional layer built on top of the http module.
&nbsp;
&nbsp;
## Dissecting the code
&nbsp;
Let's take a closer look at what we've written.

```javascript
const http = require('http');
```
First we require, the http module so that we may use it, this should be already provided with most nodeJS installations so you should need to worry about installing it yourself.

```javascript
const requestListener = function (req, res) {
      ⋮
}
```
We then make a function called requestListener and expect it to take two arguments, a req (short for request) object and a res (short for response) object.

In this simple scenario we don't do anything with the request object.

```javascript
  res.writeHead(200);
```
In the response object that we send back we have a header containing the http status code 200, which marks a successful request.


```javascript
  res.end('Hello, World!');
```
When we end the request we also send back a text body containing our message.

```javascript
const server = http.createServer(requestListener);
```
After this we create a server that calls requestListener when a request is received.

```javascript
server.listen(8080);
```
And finally we tell our server to listen to port 8080 of our localhost for requests.
&nbsp;
&nbsp;
## Summary
&nbsp;
At the end of the day if you are just trying to build something simple, using express is not a necessity and you can achieve the same basic functionality by utilizing the http module.

If however you're building an API server or an app that has a database and some complexity to it, you'd likely benefit from the abstractions and quality of life improvements that express brings to the table.
Find all columns of a collection in MongoDB
Tags: mongodb, schema, analyst, structure
Published: 2021-05-09 20:15:25

Since collections are not structured i.e. all documents don't follow the same structure, it becomes hard to find out the exhaustive list of keys in a document. 

Even though there are answers on Stackoverflow where they have solved it using MapReduce in MongoDB, the easiest way I found was to use the "Analyze Schema" option of MongoDB Compass. It gives an overview of all the keys and data variations in a nice UI. 

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

Comment below if you have an easier way to do this. 

Happy programming!
Beginner, Great! What I got from KubeCon [Virtual]
Tags: kubernetes, community, opensource
Published: 2021-05-09 20:08:33

Being a beginner is a one time opportunity. Ask doubts, attend sessions. For a beginner more than the talks (of course the talks are awesome) the community is what's important. Engage with the community, be open to people. Meeting so many great people at once can be a bit hard (especially for an introvert like me) but understand that they are ready to help you more than you think. But you need to take the initiative and ask.
Getting started with Cloud Native projects and contributing are easier than one might think. [Here](https://gist.github.com/dims/bb219a4a8d9cb88dc2a2dc1f11a537c6) are some resources to get you started.
Between the 101s (for beginners or someone wanting to start out something new), maintainer tracks (everyone can get something out of it), hallway track for meeting amazing people and all, picking one or two to highlight can be difficult. The content is open for everyone and will be released after a few days at [CNCF's YouTube channel](https://www.youtube.com/channel/UCvqbFHwN-nwalWPjPUKpvTA). Also checkout [cloudnative.tv](http://cloudnative.tv) for some amazing content.
New Series: Do You know javascript?
Tags: javscript, codenewbie, showdev, beginners
Published: 2021-05-09 18:56:21

Hey Folks! I want to make a new series for the ultimate basics of javascript like never before. 

In this series, we will be talking about:

- How javascript works?
- How javascript code is executed?
- What is hoisting in javascript?
- How functions work in javascript?
- Window and this keyword, what the heck it is?
- Undefined vs not defined.
- The scope chain.
- Let vs const vs var.. let's debate?
- BLock scope and shadowing.
- Closures in javascript.
- First-class functions.
- Second Class Functions.
- Callbacks.
- Event Loops.
- js engine by Google V8 architecture.
- SetTimeOut().
- Function Currying in javascript.
- Functional Programming in javascript.

Many More...

Thanks For your support.
Keep supporting and I will be bringing this content for you guys.

Happy Coding!

Read my blogs on my personal Gatsby blog website: https://utkarshwhocodesblogs.netlify.app