teleren/devto huggingface dataset:
Home "Office"
Tags: productivity, beginners, workstations, watercooler
Published: 2020-08-19 16:21:37

I have seen a lot of posts on Twitter, LinkedIn, Instagram, etc. about others' work-from-home setups. Some of them are crazy dope!! Am I slightly jealous? You betcha! 

I dream of having something cool this one day:
![Great home office setup](https://dev-to-uploads.s3.amazonaws.com/i/s4gszfrmgwed2wxxd3d0.jpg)

### BUT

I have not actually earned any income from my coding ventures yet. In fact, I am pretty in the red if you count my tuition for Flatiron and costs associated with my HP laptop I bought specifically for school. 

It means I am STILL coding on just my laptop. I have it set up at the pass-through between my kitchen and my living room. (I am actually really grateful, because I get the benefits of a standing desk, and it cost me nothing!)

![My laptop sitting on the pass-through between my kitchen and living room](https://dev-to-uploads.s3.amazonaws.com/i/k6vkakfb2c33shybbvh3.jpg)

If I do not feel like standing, which is not very often, I put my laptop on the kitchen table and make it work. 

Or maybe you are somewhere in the middle of minimal and "dream" setup, like my friend, [@Charles Jerome Desiderio](https://twitter.com/CJDesiderio)

![Charles' home setup](https://dev-to-uploads.s3.amazonaws.com/i/mgr4yeu4q8iunn6hzuom.jpg) 

Definitely an improvement to my current situation, but missing 2-3 monitors, and definitely not enough LED lights... JK, Charles!

### What is my point?

If you have the resources to create an awesome home setup, you should! Investing in yourself and your craft is important and I fully support "going all out". I know that when I am finally able to purchase extra monitors, my dream Mac and whatever else will make developing both more efficient and enjoyable, 

I will...
![Treat yo self!](https://dev-to-uploads.s3.amazonaws.com/i/nulz43h515p3ix777cnu.gif)

But until then, in the incredibly wise words of Project Runway's Tim Gunn, "MAKE IT WORK". I encourage you to use whatever resources you have. 

Not to toot my own horn, but I feel like I have achieved A LOT with a fairly basic HP laptop. 

One day we will have all the cool gizmos and gadgets. For now, we work with what we have and that is enough!
JavaScript Object Items Order
Tags: javascript, webdev
Published: 2020-08-19 16:17:27

### The Bug :bug:

I had to solve an issue with the order of items in a dropdown. The problem was that items in the dropdown were sorted wrongly (in a different way than from the server).

For example, data from the server were in this order:

```javascript
const items = [{
    id: "/product/id/2",
    title: "product 2"
  },
  {
    id: "/product/id/1",
    title: "product 1"
  },
  {
    id: "/product/id/4",
    title: "product 4"
  },
  {
    id: "/product/id/5",
    title: "product 5"
  },
];
```

There was a function which mapped that data from the server into an object, something like this:

```javascript
function mapToObject(items) {
  return items.reduce((acc, item) => {
    acc[item.id] = item;
    return acc;
  }, {});
};
```

Because JavaScript (for objects) does not (always) follow the insertion order, the result of that function was:

```javascript
{
  "/product/id/1": {
    id: "/product/id/1",
    title: "product 1"
  },
  "/product/id/2": {
    id: "/product/id/2",
    title: "product 2"
  },
  "/product/id/4": {
    id: "/product/id/4",
    title: "product 4"
  },
  "/product/id/5": {
    id: "/product/id/5",
    title: "product 5"
  }
}
```

The result of that function led to the wrong order of items in the dropdown.

### Why does it happen? :mag:

{% stackoverflow 38218582 %}

### The Solution :rocket:

I wanted to keep "similar structure" because the dropdown can have a lot of items (for example, I would have to iterate over all items to get a selected item) so I solved the issue with a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object - guarantees the keys will be iterated in order of insertion and it has similar features like _Object_.

```javascript
function toMappedItems(items) {
  const map = new Map();
  items.forEach(item => map.set(item.id, item));
  return map;
}
```

The result of that new function is:

```javascript
0: {"/product/id/2" => {id: "/product/id/2", ...}}
1: {"/product/id/1" => {id: "/product/id/1", ...}}
2: {"/product/id/4" => {id: "/product/id/4", ...}}
3: {"/product/id/5" => {id: "/product/id/5", ...}}
```

So it is easy to work with that result and it keeps the order of items from the server.

The whole problem and solution are "simplified". The main take away is to not rely on the order in _Object_. :tada:
The Good Place - A GitHub Action 🍤
Tags: actionshackathon, javascript, github, showdev
Published: 2020-08-19 16:16:36

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)

The Good Place may have ended, but you can be an architect of your own neighborhood (your repository) with **The Good Place** action! This GitHub Action:

- **Replaces curse words** in Issues and Pull Requests with approved words in The Good Place

![Feature 1](https://dev-to-uploads.s3.amazonaws.com/i/pqalv5dfcs6nqua7459m.png)

- **Comments a forking accurate GIF** when you first label an issue (supports GitHub's [default labels](https://docs.github.com/en/github/managing-your-work-on-github/about-labels#using-default-labels))

![Feature 2](https://dev-to-uploads.s3.amazonaws.com/i/m2r5sbuo6rxwnqjmfwd0.png)

### Submission Category
[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

I absolutely LOVE this show! I can't get the idea out of my head so here it is. This is an entry for **Wacky Wildcards**. 🍤

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

More info about the action can be found here:
{% github https://github.com/jayehernandez/the-good-place %}

Or, you can create a new file titled `action.yml` inside the .`github/workflows` directory of your repository and copy the code below.

```yaml
on:
  issues:
    types: [opened, edited, labeled]
  issue_comment:
    types: [created, edited]
  pull_request:
    types: [opened, edited]
  pull_request_review_comment:
    types: [created, edited]
jobs:
  build:
    runs-on: ubuntu-latest
    name: The Good Place
    steps:
      - name: The Good Place Action
        uses: jayehernandez/the-good-place@v1.1
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
```

`v1.1` introduces a fix for the Scunthorpe problem as flagged in this [comment](https://dev.to/moopet/comment/144nj)!

### Additional Resources / Info

The action was created using JavaScript and the [Octokit API](https://developer.github.com/v3/libraries/). The documentation provided for Octokit was easy to understand for beginners like me. GIFs used were from [GIPHY](http://giphy.com/).

Huge thank you as well to the [JavaScript Actions](https://lab.github.com/githubtraining/github-actions:-writing-javascript-actions/) course of the GitHub Training Team which taught me the basic concepts I needed to learn. I highly suggest that you check that out if you'd like to create your own.

[Note]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)

---

Are you a fan of The Good Place? Let me know what you think about this action!

![The Good Place GIF](https://media.giphy.com/media/l3mZ8lWBBH5DORycU/giphy.gif)
Weird behaviors of javascript: Primitive Types and Reference Types
Tags: javascript, beginners
Published: 2020-08-19 16:08:07

I recently learned a difference between Primitive types and Reference types.
I thought it would be great to write a blog post about this topic.

## Let's start with a code snippet

```js
let a = 1;
let b = a;

console.log(b); // 1

a = 2;

console.log(b); // 1
```

Well this looks okay let's do the same thing with an object

```js
let a = {
  someText: 'Hello',
};

let b = a;

console.log(b); // { someText: "Hello" }

a.someText = 'Hi';

console.log(b); // { someText: "Hi" }
```

This performed unexpected isn't it?
You will understand why this happens by the end of this post, let's dive into it.

## What are primitive and reference types

In Javascript, we have 6 primitive types

1. String
2. Number
3. Boolean
4. null
5. undefined
6. Symbols (ES6)

and 3 Reference types

1. Object
2. Array
3. Function

## Primitive types

Primitive types stored in a fixed-sized memory,
so exact value of "a" stored in memory,
I think an example would be more helpful here

We created variable "a", it placed into memory like this

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/78h80kwcycj4ml9ptq9h.png)

then we copied memory value of variable "a" to variable "b"


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

That seems okay let's see what happens with Reference types

## Reference Types

Reference types are more complex and take up more space compared to Primitive types.
They can't be stored in fixed memory so they stored in a random location in memory
let's see it's diagram


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

Notice that the value stored in memory is not the real value itself, its reference to real value.
When we copy the variable "a" to "b" we copy the Memory value (Reference to real object). That's why they're called reference values.
When we copy the variable "a" we don't copy the real value, we copy reference to real value.


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

That's why "b" is also changed when we change the property of "a".

## Source

- https://github.com/leonardomso/33-js-concepts
  - Section 3. Value Types and Reference Types

## Thanks for reading
If you have any questions feel free to ask below.
[Challenge] log("this") or log("this").withData({})
Tags: challenge
Published: 2020-08-19 16:06:24

> _This challenge is intended for **JavaScript**, but you can complete it with any language you like and can._

****

Fun little challenge. Hope you enjoy it :smile:

## Challenge Description
You need to create a function called **log** that receives a string and prints the string prepended with *"log:"*. Easy. 

Wait, `log` also returns an object with one method **withData**, which receives any data. If **withData** is called, it should print the message passed to **log**, prepended with *"withData:"* and appended with the data.  

Check the following scenarios to understand the challenge better.


#### Scenario 1
If we call just `log("test");` a message should be logged containing the message _"log: test"_.

```js
log("test"); // > log: test
```

#### Scenario 2
But if we call the method `withData` as follows `log("test").withData({ user: 'keff' });`; It should log only the message _"withData: test { user: 'keff' }"_.

See how the message from just `log("test")` is not printed. This is because the logic from `log()` is ignored when we call `.withData()`.

```js
log("test").withData(2); // > withData: test 2
```

### Can you accomplish this behavior?

💪 **Best of luck!** 💪 

---
Add class to item slider without JQuery
Tags: jquery, javascript, developer
Published: 2020-08-19 15:54:10

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/erq99tjls422pg1uxajo.jpg)

We have the following case: 
We want to add a class to the banners of a slider carousel, but without considering the banners that have the class *.cloned* (This class is generated for the operation of the slider)

We have the following HTML:
```javascript
<div class="owl-stage">
  <div class="owl-item cloned"></div>
  <div class="owl-item"></div>
  <div class="owl-item"></div>
  <div class="owl-item"></div>
  <div class="owl-item"></div>
  <div class="owl-item cloned"></div>
</div>
```


The javascript code would be the following:

```javascript
const slider = document.querySelectorAll('.owl-stage .owl-item');
slider.forEach((comment,i) => {
    !comment.classList.contains("cloned")
        ?comment.classList.add("banner_"+i)
        :null
})
```


With this code we validate if it does not have the class *.cloned* and then we add the class we want otherwise we do nothing (*null*)
```javascript
!comment.classList.contains("cloned")
```

This way our html would look like this
```html
<div class="owl-stage">
  <div class="owl-item cloned"></div>
  <div class="owl-item banner_0"></div>
  <div class="owl-item banner_1"></div>
  <div class="owl-item banner_2"></div>
  <div class="owl-item banner_3"></div>
  <div class="owl-item cloned"></div>
</div>
```


There may be other ways to do it but this saved me from a hurry, I hope it helps you. And as I always say, never stop learning.

👨🏻‍💻 Enjoy code!
Join us at jCloud Day!
Tags: java, azure, beginners, opensource
Published: 2020-08-19 15:49:57

### Take the Azure Dev Challenge 🏆
1. Complete any one of the Microsoft Learning Path from [here](https://docs.microsoft.com/en-us/users/arkodyutisaha/collections/0n4nt8ok83kmo3?wt.mc_id=AID3018160_QSG_454579&ocid=AID3018160_QSG_454579&WT.mc_id=jcloud-devto-arsaha)
2. Share your MS Learn Profile and achievement badge with [#jCloudDay](https://twitter.com/hashtag/JCloudDay?src=hashtag_click) on Twitter 
3. Subscribe to [Microsoft.Source](https://aka.ms/jcloud) newsletter and keep learning

> Note: Only valid submissions will receive an [Azure Hero Badge](https://www.microsoft.com/skills/azureheroes) via Twitter DMs. If you've any questions regarding the Azure Dev Challenge, drop us a line on the comment section below. 

## About jCloud Day 🎬
Hello everyone! Microsoft is excited to join [jCloud Day Conference](https://aka.ms/MSFTJCloudDay) as the main sponsor. jCloud Day is a single day, virtual, developer-focussed, community-driven conference on Java and Cloud. The event has been tailor-made with the objective of encouraging and helping Java developers upskill and be up-to-date on the latest Java and Cloud technologies. The event is absolutely free and open for all. 
> Grab your jCloud Day Conference tickets [here](https://aka.ms/MSFTJCloudDay) 🎟️

## Meet our Speakers 🎙️ 
{% user sandraahlgrimm %} `Go serverless with Java and Azure Functions (11:50 AM - 12:20 PM IST)`

{% user rorypreddy %} `Java on Azure: Building springboot microservices (12:35PM - 01:10PM IST)`


*Follow [Azure](https://dev.to/azure) organization 🔖  for content/updates from Cloud Advocates and other Microsoft Technology professionals.*
Create a 'user is typing...' animation with React and CSS
Published: 2020-08-19 15:47:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rf4nb3r7qsn2u9fjrf47.gif)
Today I am going to show you how to create an animation to show that a user is typing. If you have used chat rooms like Slack or Discord you may have noticed this effect. 

First let's assume we have a chat box component that is listening and updating a value in state to indicate if a user is typing or not.

```
class ChatBox extends React.Component {
    state = {
        isTyping: false
    }

    render() {
        <div><div>
    }
}
```


Next lets make the typing animation component. Essentially this will be a div with 3 divs in it. Some css tricks will turn it into a rectangle with 3 dots in it though.

```
const Typing = () => (
  <div className="typing">
    <div className="typing__dot"></div>
    <div className="typing__dot"></div>
    <div className="typing__dot"></div>
  </div>
)
```

Now some css to style and animate our three divs.


```
.typing {
  width: 5em;
  height: 2em;
  position: relative;
  padding: 10px;
  margin-left: 5px;
  background: #e6e6e6;
  border-radius: 20px;
}

.typing__dot {
  float: left;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  background: #8d8c91;
  border-radius: 50%;
  opacity: 0;
  animation: loadingFade 1s infinite;
}

.typing__dot:nth-child(1) {
  animation-delay: 0s;
}

.typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loadingFade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
```


Last step is to add our animation in to our ChatBox when this.state.isTyping is true.


```
class ChatBox extends React.Component {
    state = {
        isTyping: false
    }

    render() {
		  const { isTyping } = this.state;
		
		  return (
          <div> { isTyping ? <Typing /> : null } <div>
    )}
}
```


And that's all there is to it!
🗜️ 3ObjectsStreamZip is a PHP library to stream objects from AWS S3 as a zip file.
Tags: showdev, php, aws, s3
Published: 2020-08-19 15:41:00

---
title: 🗜️ 3ObjectsStreamZip is a PHP library to stream objects from AWS S3 as a zip file.
published: true
description: S3ObjectsStreamZip is a PHP library to stream objects from AWS S3 as a zip file.
tags: showdev, php, aws, s3
//cover_image: https://direct_url_to_image.jpg
---

{% github wgenial/s3-objects-stream-zip-php %}
API Automation Testing with Javascript
Tags: javascript, testing, webdev, tutorial
Published: 2020-08-19 15:39:54

API testing is extremely important to ensure your application's business logic or the functionality of the APIs are working properly as well as to ensure they are performant and secure. 

#### Some of the advantages of doing API testing:
- Early application access: You can start testing the APIs the moment they are built without having to wait for the UI layer to be ready
- Test speed: API automation testing is a lot quicker and covers more application ground in less time compared to browser testing
- Easier to maintain: If you've worked on browser tests then you probably are aware of with some of the pain points around flaky tests. With API tests, you don't have to worry about that as tests are a lot more stable and consistent (most of the times)

#### There are primarily two ways of performing API testing:
- Manual: by using tools like Postman or any other API console 
- Automation: programmatically running your API tests using the programming language of your preference 

---

In this tutorial series, we will walk through both the options but mainly focussing on the latter option (Automation)

{% youtube ZSVw3TyZur4 %}

### **Some of the items we will be covering in this series:**
- **Basics**
  * What is an API?
  * What is REST API?
  * Different types of API Methods
  * What contains in an API Request?
  * What is API testing and the advantages of API testing 
  * What technologies we will be using for API testing
- Installation / Configuration
- Write API automation tests with Javascript 
  * using **Mocha, Chai JS, and SuperTest HTTP Library**
- **Scale API automation test framework**
     * Learn how hooks work and when to use it
     * Write some negative tests to increase our test coverage
- **Generate fake test data** to make tests more dynamic 
- Generate **HTML reports using Mochawesome reporter**
- Integrate tests with **Jenkins** 
- and a lot more...

I will be uploading new content every week on each of the above topics, so **Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel** to get notified of new videos 👍

--- 

Meanwhile, if you are interested in learning WebdriverIO, check out my free tutorial series here 😄 -
https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.

...

Follow @automationbro on Twitter for all the latest updates
🚗 Consultar preços médios de veículos diretamente na FIPE.
Tags: javascript, showdev, opensource
Published: 2020-08-19 15:37:53

---
title: 🚗 Consultar preços médios de veículos diretamente na FIPE.
published: true
description: Consultar preços médios de veículos diretamente na FIPE.
tags: javascript, showdev, opensource
//cover_image: https://direct_url_to_image.jpg
---

{% github giovanigenerali/precodeveiculo %}
A new npm is coming
Tags: node, npm, javascript, rust
Published: 2020-08-19 15:04:16

No, I'm not talking about npm v7! 🙀

A new package manager is under development and it's not written in JavaScript.

The Orogene team is working on «a next-generation platform and package manager for Node.js-compatible and frontend JavaScript projects!»

## Who is behind this?

Just 3 cool devs with Kat Matchán included!

And what do we know about Kat? Well, they were working for npm some  time ago, and were a member of the team who released the major improvements to npm v6 after the Yarn 🧶 release. So, Kat knows about caching and how to improve the package system.

Yarn was a rough competitor in that time, 🥵 many of us switched to yarn and now we're back into npm.

Kat works for Microsoft's NuGet nowadays.

## Why is orogene built using Rust?

Rust 🦀 is a powerful language: thread-safe and memory safe without using a garbage collector. We can expect better speed than that of a statically typed language with a performance similar to C++.

A benchmark here:

{% twitter 1289788330427613186 %}

## What about the node_modules?

Orogene removes the necessity for the `node_modules` folder using a similar approach to `pnpm`.

You can use this in wrapper shell too:

{% twitter 1288981513430695936 %}

### Where is the package.json?

{% twitter 1294840416383021057 %}

It seems the JSON format is too strict for some people. It's a bit scary to think about leaving the `package.json` behind to  embrace a new format for defining dependencies in Orogene. Even-though this hasn't been confirmed, the team is considering it. 

### Is there a create command?

We can expect the standard commands in Orogene, like [create](https://twitter.com/zkat__/status/1292251092089102341):

{% twitter 1292251092089102341 %}

The `rm -rf` won't be needed when `create-react-app` accepts `oro` as a known package manager.

### A healthy community

{% twitter 1294813706551848960 %}

Kat wants to build a collaborative and healthy community around this project where each member can express their ideas in a safe and free environment.

### When Orogene will be available?

There is no company behind this, just FOSS enthusiasts working in their free time. Kat said we can expect a beta [coming for March 2021](https://twitter.com/zkat__/status/12922527814960005130). We can see this project growing in public in their [repository](https://github.com/orogene/orogene) and help with [ideas and feature requests](https://github.com/orogene/rfcs).

Any open source project is welcome and we've the best wishes for this team! And if this comes alive, npm, yarn and other package managers could find improvement opportunities.
AzureFunBytes New Episode Reminder - 8/20/2020 2 PM EDT - Combos! @Azure and @datadoghq with @ryan_maclean
Tags: azure, kubernetes, beginners, tutorial
Published: 2020-08-19 14:42:53

This Thursday 8-20-2020 2PM EDT, we start our first AzureFunBytes series: Combos! Discover products from that help you get more from your Azure  experience. To help me, [@ryan_maclean](https://twitter.com/ryan_maclean) from [@datadoghq](https://twitter.com/datadoghq)!  Just in time for [#KubeConEu](https://twitter.com/hashtag/KubeConEu?src=hashtag_click) we’ll see how Azure Kubernetes Service and Datadog combo!

{% youtube 6xEsofJQI6A  %}

We'll work on creating an AKS cluster and then discuss how we can monitor, find pain points and alert our team about a microserviced web application.

AzureFunBytes! - Byte-sized content with a live Twitch show!

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EDT Thursday. You can also find the recordings there as well.

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes

Join me, ask questions, and learn about Azure!

Useful Docs:
Azure Kubernetes Service (AKS) - https://cda.ms/1vq
App Service documentation - https://cda.ms/1vr
Azure Container Registry documentation - https://cda.ms/1vs
Microsoft Learn: Azure Fundamentals - https://cda.ms/1jV
Microsoft Azure: $200 Free Credit https://cda.ms/1tj