teleren/devto huggingface dataset:
Destructuring in JavaScript
Tags: javascript
Published: 2020-06-12 14:39:57

---
title: Destructuring in JavaScript
published: true
description: Basic examples on how to use destructuring in javascript.
tags: javascript
---

Destructuring is introduced as one of the ES6 features. It plays an important role in everyday development as we all deal with objects and arrays. It improves readability of code

Let's say we have a object containing user details

```js
let me = {
  name: 'chakravarthy',
  age: 23,
  social: ['twitter', 'github', 'medium'],
  props: {
    height: 180,
    weight: 63,
  },
  comments: [
    {
      'Dan Abramov': 'you are awesome',
      id: 1,
    },
    {
      'Ben Ilegbodu': 'Nailed it',
      id: 2,
    },
  ],
};
```

In ES5 to get name and age you would do something like this

```js
let myName = me.name;
let age = me.age;
```

We can minimize the code using destructuring

```js
let { name: myName, age, ...rest } = me;
```

So it's a single line of code and you are telling JavaScript to get **name** and age from _me_ object and alias the variable **name** as **myName** and the rest variable will carry the object without name and age. Cool huh!

Did you know that you can assign default values. Let's say a new property _isEmailVerified_ is introduced and you may or may not get it from the api you are calling so you can do something like this

```js
let { isEmailVerified = false } = me;
```

so if there is no isEmailVerified key in object it just assigns false

Dynamic key destructuring also can be done

```js
let dynamic_key = 'social';
let { [dynamic_key]: someVar } = me;
console.log(someVar);
// <- ['twitter', 'github', 'medium']
```

Accessing nested properties

```js
let {
  props: { height },
} = me;
console.log(height);
// <- 180
```
Scrum retrospective template
Tags: agile, scrum
Published: 2020-06-12 15:31:17

| Date       | Team      | Participants        | Writer | Timekeeper |
|------------|-----------|---------------------|--------|------------|
| 2020-01-01 | Team name  | Camille, Fred, Paul | Camille | Fred   |

## Sprint review

### Sprint goal
Name or description of the sprint goal

### Velocity
>**NB:** Velocity = Story points done / Total presence days

| Total presence days | Story points planned | Story points done | Velocity | Successful sprint goal |
|---------------------|--------------|-------------------|----------|------------------------|
| 33 | 65 | 86 | 2.6 | yes |

### Burndown chart

<-- insert burndown image -->

### Sprint ROTI

| Product owner | Developers |
|-----|------------|
| 4/5 | 4.5/5      |

### Demo

| Audience ROTI | Link to the demo |
|-----|------------|
| 3.9/5 |  <-- demo-link -->    |

## Retrospective

### Format: The boat

| The boat | The island | The wind | The anchors | The reef |
|-|-|-|-|-|
| | | | | |
| | | | | |
| | | | | |
| | | | | |

### Thanks

Special thanks to <-- a great co-worker --> for his help during this sprint.

### Chosen topics & actions

| Topic | Actions |
|-|-|
| A topic | A great action linked to this topic |
| Another topic | A smart action |

## Retrospective ROTI
| Team |
|--|
| 4.3/5 |
Too good to miss
Tags: watercooler
Published: 2020-06-12 16:57:24

I got involved with a group of volunteers who won a global AWS hackathon. And I'm tasked with growing the number of engineers. This isn't the hackathon I won recently.

So me, being me... Wanting to help I looked at the current processes and made some suggestions on how to take the prototype to the MLP (Minimum Loveable Product) stage.

The tech stack is Python Flask, AI/ML and AWS.

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

So I'm reaching out to the dev.to community before I publically post the project.

I'll post a link so those interested can sign up to volunteer build something which will help radiologist diagnose 10x faster.

Share and follow for updates 🌞.
Using NgRx actionsBlocklist
Tags: angular, node, redux
Published: 2020-06-12 19:04:42

{% youtube g7SdhtxuJYA %}

Often times as your NgRx applications grow the Redux DevTools actions log can get too noisy. In my particular instance, as my application grew, their became a large number of actions that fired that were not valuable for myself and the rest of my team during development. With the default maximum number of actions set to just 25 actions, the actions you really care about can quickly become lost during development and debugging. ***That is where `actionsBlocklist` comes to the rescue!***

### HOW TO DO IT
Assuming you have `@ngrx/store-devtools` already installed, just add the following config to the instrument method to your StoreDevtoolsModule in your `app.module`

```
StoreDevtoolsModule.instrument({
  name: 'Store Name',
  maxAge: 25,
  actionsBlocklist: [
    // actions go here as list of string
    userActions.Scroll.type,
    otherFeatureActions.NotImportantAction.type,
    // etc
  ]
})
```

### WHEN TO MAYBE DO IT
To provide a little more context, my application was a single page application (SPA) form that dispatched an action on mouse scroll. So every-time the user scrolled up or down the page it could easily dispatch 25 or more actions. Those actions were important as various features in my application were selecting state based upon where in the application the user scrolled to. So, it wasn't that the actions weren't important but more specifically it wasn't providing value in the Redux DevTools Actions Log.

The following actions *could* be potential candidates to be added to `actionsBlocklist`:

- Actions dispatched by scroll events
- Repetitive actions dispatched with a low debounceTime()
- When multiple actions are often dispatched together
- Actions with no or very little side effects

### WHEN YOU SHOULD NEVER DO IT
Keep in mind adding actions to your `actionsBlocklist` will in-fact *block* them from showing up in your DevTools. Which means it can become very confusing *why* an action isn't being dispatched (even though it really is). So only add actions that you are fairly certain you do not and will not want to see anymore.

The following actions are are things you *do not* want to add to `actionsBlocklist`:

- Actions with side-effects
- Actions that happen infrequently
- Actions triggered by a user action


### CONCLUSION
Ultimately, adding actions to the `actionsBlocklist` is something you shouldn't do until it becomes glaringly obvious when debugging your application with the Redux DevTools. Its something that will scream louder and louder the more your application grows. It will almost beg you to add it!

Other alternatives to consider would be to filter the actions log in the DevTools for the actions you care about *(as long as they are within your configured maximum number of actions)*.

Finally another thing to consider is to add actions to the `actionBlocklist` temporarily during debugging to really find the actions you care about (to fix your temporary problem). *Note: Don't forget to remove them before checking in your code to source control*
100 Days of SwiftUI — Day 22
Tags: 100daysofswiftui, swift
Published: 2020-06-12 21:55:47

---
title: 100 Days of SwiftUI — Day 22
published: true
date: 2020-06-12 21:54:31 UTC
tags: 100daysofswiftui,swift
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-22/
---

Today was another [challenge day](https://www.hackingwithswift.com/100/swiftui/22), this means: I had to change some code of the GuessTheFlag-project and answer some questions afterwards.

![](https://zeitschlag.net/content/images/2020/06/Simulator-Screen-Shot---iPhone-SE--2nd-generation----2020-06-12-at-23.44.03.png)

It didn't take a lot of time and right now, on a friday evening, I'm quite happy about it. I partially solved the challenges yesterday, but back then, I didn't know, that they were challenges.

I'm exited to see what the next project is going to be about.
Instalando e configurando o Totvs Smartclient no linux (Elementary OS Hera 5.1.5)
Tags: totvs, protheus, linux, smartclient
Published: 2020-06-13 02:37:55

Uma vez ou outra me pego trocando de sistema operacional e como na empresa que trabalho atualmente utiliza-se o ERP Protheus da Totvs, é necessário que eu tenha acesso para realizar algumas tarefas do dia a dia. Então resolvi registrar como configurar o **SmartClient** no Linux, lembrando que é necessário verificar a versão da build do sistema e da arquitetura. No meu caso no momento que escrevi esse artigo, estou utilizando a arquitetura **x64** e a build do Protheus na versão **12.1.25**.

Primeiro passo é entrar no site da Totvs e baixar o **smartclient para linux**. Essa etapa é necessário possuir uma conta na Totvs.
A versão que baixei foi a `20-04-13-P12-SMARTCLIENT_BUILD-17.3.0.16_LINUX_X64.TAR`

Após a conclusão do download é só descompactar os arquivos em uma pasta, aconselho o seguinte caminho. 
> `/home/seu_usuario/TOTVS/smartclient`


Neste mesmo caminho é necessário criar um arquivo de configuração chamado **smartclient.ini**, no qual irá conter todas as configuração de conexão com o servidor. No meu caso eu apenas copiei do servidor da empresa um **smartclient.ini** já configurado e coloquei na mesma pasta do meu smartclient executável.

Com apenas um duplo clique no executável o mesmo deverá abrir.
Em alguns casos é necessário criar um atalho no menu de aplicação do Linux e para isso utilizei o programa **AppEditor**. O procedimento foi criar a pasta `/home/seu_usuario/Applications` e criar um link/atalho do smartclient para dentro dessa pasta.

Após esse procedimento, abri o AppEditor, cliquei em **New Entry** e fiz as seguintes configurações. 

> 
**Display Name**: SmartClient
**Comment**: Totvs Application
**Command Line**: /home/seu_usuario/Applications/smartclient
Para o ícone da aplicação baixei uma [imagem **.png** do smartclient](encurtador.com.br/ayFR1) que pesquisei no google e por fim cliquei em **salvar**.


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

Agora o smartclient irá aparecer no menu de aplicação do sistema. 

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

👍😀❤️
How To Parse XML Response in Postman?
Tags: testing, tutorial, beginners, webdev
Published: 2020-06-13 05:01:18

✅Join us - https://sendfox.com/thetestingacademy

In this video, We are discussing about How to Parse a XML Response in Postman.

Code Share :  https://codeshare.io/aVxy3z

[![How To Parse XML Response in Postman](https://i.imgur.com/wD78VD8.png)](https://youtu.be/4n3FFdoUqDE "How To Parse XML Response in Postman") 


You will learn.
1. Parse the XML to JSON using var jsonObject = xml2Json(responseBody);
2. With Json Object You can parse as normal json.

https://stackoverflow.com/questions/42812012/parse-xml-response-to-another-requests-in-postman.


> ✅✅ More about the API Testing using Postman - https://www.learnapitesting.com


✅ Join Automation NewsLetter -https://sendfox.com/thetestingacademy

✅ Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1

✅ Programming Java -
https://bit.ly/learnjava2020-p1

✅ Test Automation - 
https://bit.ly/learnautomation2020

✅ API Testing - 
https://www.learnapitesting.com

✅ Cypress Tutorial with LIVE Projects -
https://cypresstutorial.com

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Vanilla JavaScript Scroll to Top
Tags: javascript
Published: 2020-06-13 06:40:33

Let's create a `JavaScript` powered scroll to top function.
We will create a button that will sit at the right bottom of the page, and once we click it, it will take us to the top of the page.

## HTML Structure

```html
<button onclick="scrollToTop()" class="scroll-top">☝️</button>
```

That is all we are going to need, we will define some `CSS` and build the scrollToTop function in `JavaScript`.

## CSS Setup

```css
.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99;
  outline: none;
  background-color: #efefef;
  border: 1px solid #333;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
```

The scroll button gets a `position: fixed`, and with the bottom and right, we offset it to the right bottom.
We then do some general styling to make it look like a box.

## JavaScript Scroll to Top

```js
function scrollToTop() {
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
}
```

It's good to note there are many ways of doing this.
We can use the [scrollIntoView](https://daily-dev-tips.com/posts/vanilla-javascript-element-scrollintoview/) like this article. But today, we are using the plain scroll function.

We can define the position we need to scroll to and the behavior.

Another way of doing the scroll can be with `scrollTo`:

```js
window.scrollTo(0, 0);
```

See it in action on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="rebelchris" data-slug-hash="pogyOzm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript Scroll to Top">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/pogyOzm">
  Vanilla JavaScript Scroll to Top</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

Unfortunately, the scroll API is not fully supported!

![Scroll to support](https://caniuse.bitsofco.de/image/element-scroll-methods.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Online Grocery Shopping App - The Best Way To Start Your Online Grocery Store Business
Tags: groceyapp, onlinegroceryshopping, onlinegroceryapp, onlinegrocery
Published: 2020-06-13 09:17:08



Are you looking to launch your own grocery shop or online grocery delivery mobile app? XcelTec’s expert team of E-commerce development will help you to build a full-featured grocery shopping app in just days. We offer an amazing grocery store software & grocery shopping app at just $3999

What we deliver:

-Grocery App for Users
-Grocery Delivery App for Driver Users
-Grocery Store Admin Panel
-Get complete online grocery store within just 1 week

What is our online grocery delivery app?

We build an online grocery app that helps you to build your own grocery mobile app and make an online grocery business successful. This application helps you to give a delightful online grocery shopping experience to your customer. An app developed with the latest technology & attractive UI gives an amazing user experience. Our online grocery app supports multi-languages so you can build your own app n your desired language. Our grocery shopping app is a single store application so you can list out your own products, categorized based on product categories, stripe payment, map explorer, and order management.

We offer you a complete online grocery shopping app for online grocery business at a reasonable price. Selling products online has become essential. Many people shop on their phones – the most valuable real estate is in their hands. XcelTec is your one-stop solution for all your E-Commerce development needs. Contact Us Now. Let’s discuss your requirements.
Follow these youtube developers for becoming multi stack developer
Tags: youtube, developers, follow, programming
Published: 2020-06-13 20:51:24

# Best Youtube Developers
#### [My youtube channel Link!](https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ)
---
## Tutorial

- [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
    - Github: [Brad traversy](https://github.com/bradtraversy)

- [Academind](https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w)

- [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
    - Github: [Dev Ed](https://github.com/developedbyed)

- [Classsed](https://www.youtube.com/channel/UC2-slOJImuSc20Drbf88qvg)

- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)

- [Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw)
    - Github: [WDS](https://github.com/WebDevSimplified)

- [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)

## Css

- [Kevin Powell](https://www.youtube.com/user/KepowOb/videos)

## Vue

- [Program With Erik](https://www.youtube.com/channel/UCshZ3rdoCLjDYuTR_RBubzw)
    - Github: [Erik](https://github.com/ErikCH)

- [Andre Madarang](https://www.youtube.com/channel/UCtb40EQj2inp8zuaQlLx3iQ)
    - Github: [Drehimself](https://github.com/drehimself)

## Flutter

- [RajaYogan](https://www.youtube.com/channel/UCjBxAm226XZvgrkO-JyjJgQ)

- [Reso Coder](https://www.youtube.com/channel/UCSIvrn68cUk8CS8MbtBmBkA)

- [Santos Enqoue](https://www.youtube.com/channel/UCRl79zOEtiLCglAFZJJzEZQ)

- [MTechViral](https://www.youtube.com/channel/UCFTM1FGjZSkoSPDZgtbp7hA)

## Livestream

- [Coding Garden - CJ](https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw)
    - Github: [CJ](https://github.com/w3cj)

## Programming

- [Derek Banas](https://www.youtube.com/channel/UCwRXb5dUK4cvsHbx-rGzSgw)

## Design

- [DesignCourse](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow)

---
To Edit the list, If I missed some awesome developers
Sculpt this repository!
{% github Vuelancer/youtube-developers-2020 no-readme %}
Map and Join and Strings()
Tags: python, functional
Published: 2020-06-14 15:59:53

Sometimes you try to find how to loop an Array and transform its all elements.The map() function can do it for you. In this example, we get all numbers in a list and transform them into strings with **map** and **join**.
example:

```python
my_list = ["natalia","have:",1000,"dolars","in",2020]
list = map(str,my_list)
print(" ".join(list))

```
ELI5: Functions vs. Class/Constructor in Javascript
Tags: codenewbie, javascript, explainlikeimfive, help
Published: 2020-06-14 01:29:59

Hello everyone,

I trust my post finds you well and healthy.

I'm not a posting person, but I'm tired of trying to understand in simple terms what is the difference between Function and Constructor in Javascript. And also, Class?.

Every time I find an article about it, explains by starting that 'Classes in Javascript are not like any other language, and is just for syntax.' or 'Javascript doesn't really have Classes, like Java'.

The thing is, I don't know Java, or C, or any other language. So I don't understand the reference, or what really does that mean. My only reference to Classes is CSS. That what it comes to my mind.

More to that, I recently stumble upon Constructor on FreeCodeCamp. Another topic I've been trying to understand but can't find simple way to explain it. An article in CSS-Tricks 'understanding Javascript constructors' starts: "Having a good understanding of constructors is crucial to truly understand the JavaScript language."

*newbie feeling intensified 

And then it drops this:
"Constructors are like regular functions, but we use them with the new keyword. ". 

What? If they are the same, why should I really learn this? Why is it crucial? Then the article goes on with jargons of things I can't really comprehend as a newbie in a programming language. And without a 'big word alert'.

Can someone please try to explain me this or tell me where I can find explanation? I already tried the big ones (mozilla, w3c schools, eloquent javascript, css-tricks). 

If you took the time to read this, I love you already.

Thank you all in advance and stay safe.
Scala+Stellar Weekly Update June 21, 2020
Published: 2020-06-21 06:20:10

🤔 **Thinking about**

The open beta release of [Vibrant](https://vibrant.cash/) is a great move that fills a market gap, bringing practical applications to users in need. It feels really important. Stellar is tremendous infrastructure at a price that is highly compelling, but infrastructure is not product. For Stellar to really build up significant network effects it needs to balance the brilliance of the infrastructure with consumer products that serve our target customers. Vibrant looks great and is an important step in the right direction. Kudos to the SDF team behind this. Let's Goooooo! 🚀

I've also been thinking about fees and what happens to them when the network reaches 100% utilisation. And what that might mean for business models that currently pay fees on behalf of users.

Finally, I'm super stoked for the scheduled [Turing Complete Contract proposal video](https://www.youtube.com/watch?v=T7FlHKbew4U). It's not until next month, but I find I keep checking to make sure I haven't missed it.

🔙 **Last Week**

_Current SDK_
* Publishing v1 transactions. The existing SDF was already able to parse v1 transactions, now it publishes in v1 by default (v0.13.0)
* Fee bumps. This hot new feature is exposed in the SDF via a `bumpFee` method on `Transaction`.
* TestNetwork testing. A few months ago the Horizon+Core docker quickstart image started taking 5 minutes to start up.  This really impacted the test cycle for integration tests. I finally had enough and started migrating to TestNetwork based testing. To this end, I built a mechanism to efficiently fund a pool of accounts at the start of the integration test and merge them back into friendbot at the end. This means I can integration test quickly and often, without having an impact on FriendBot funds.
```scala
  // Test setup
  private val testAccounts = new TestAccounts(quantity = 20)
  def beforeAll() = testAccounts.open()
  def afterAll() = testAccounts.close()

  // Then, in the test:
  val List(senderKey, recipientKey) = testAccounts.take(2)
```

_SDK Rebuild_
* The SDK rebuild has friendbot support! The SDK will check the Horizon root document to determine if FriendBot is supported and what its URL is. If present, it will use that to create and fund the account.
```scala
// Funding an account on testnet
val horizon = Horizon.sync(Horizon.Endpoints.Test)
val seed = Seed.random
val response = horizon.friendbot.create(seed.accountId)
```


🍕 **Planned (Jun-Aug)**

* SEP-0007 - URI Scheme to Facilitate Delegated Signing
* SEP-0010 - Stellar Web Authentication
* Ongoing SDK rebuild effort.