teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-02-24 20:02:14

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Wisdom of the Crowd

Pierre scraped 70 "Best Programming Book" listicles and whittled down the recommendations into one manageable list. 

{% link https://dev.to/daolf/the-25-most-recommended-programming-books-of-all-time-5fel %}

#2. Scratch That!

Davide shares an endearing story of using Scratch to build a math game with their kids. Regardless of age, we all experience similar joys and pains of coding.

{% link https://dev.to/dvddpl/i-got-bored-with-asking-my-son-for-multiplication-tables-so-we-programmed-together-a-little-game-with-scratch-1ci7 %}

#3. Document Object Model

Iqra gives us a visual overview of the DOM and how we can change the content displayed on a web page.

{% link https://dev.to/iqramqra/a-beginners-guide-to-dom-manipulation-45bk %}

#4. Bells & Whistles

Alvaro walks us through all their considerations for developing an interactive resume -- something to consider if you're on the job hunt!

{% link https://dev.to/alvaromontoro/developing-an-interactive-resume-with-html-and-css-5007 %}

#5. Gamification 👾

John shares six platforms to learn programming, the fun way! Each platform has a different approach but they all encourage you to study via play.

{% link https://dev.to/selawsky/learn-to-code-by-playing-these-games-4618 %}

#6.Unnecessary Repetition

If TypeScript is starting to feel like a burden...this post is for you. Wojciech a pattern for writing tests that help avoid unnecessary repetition.

{% link https://dev.to/wojciechmatuszewski/writing-unit-tests-with-react-typescript-and-react-testing-library-1nmg %}

#7. Not a Big Deal

Jared helps us realize we don't need to be a math whiz to understand Big O. In this tutorial, you’ll learn the fundamentals of Big O logarithmic time complexity with examples in JavaScript.

{% link https://dev.to/nielsenjared/big-o-logarithmic-time-complexity-gng %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Nullish Coalescing and Optional Chaining in Javascript 
Published: 2020-02-24 19:39:27

## Nullish coalescing (??):
You might have encountered scenarios, where you needed to assign a default value to a variable(x) if the expression or variable from which the value of x is to be derived or deducted, is undefined or null but not when it is false, 0, or ''(empty string). 
This is almost impossible with the popular `||` logical operator which you would have used to assign a different value if the boolean evaluation of the prior value (resulting from the expression or variable) is a falsy.



This would be our reference object:

```
const obj = {
  val: '100',
  test: 30,
  absent: 0,
  exam: 70,
  grades: {
    test: 23,
    exam: 49
  }
}
```

```
const removeScoreForAbsence = obj.absent || 0
console.log(removeScoreForAbsence) // 0

const inexistentValue = obj.valueThatDoesNotExist || 10
console.log(inexistentValue) // 10
```
The problem with using the || logical operator as depicted above is that if we had wanted to assign the value of obj.absent to `removeScoreForAbsence` regardless of its value unless it is `undefined` or `null`, then this would have been impossible since the boolean evaluation of an emptyString, false, and 0 result in falsy.

Hence, nullish coalescing. So what does nullish coalescing bring to the table? Well, it assigns the value to the variable unless it is undefined or null

```
const checkMe = obj.absent ?? 10
console.log(checkMe) // 0

const checkAgain = false ?? 20
console.log(checkAgain) // false

const checkNull = null ?? 25
console.log(checkNull) //25

const checkUndefined = obj.undefined ?? 35
console.log(checkUndefined) // 35
```


## Optional Chaining (?.)
Let's assume you are a Frontend developer consuming a RESTful API with deeply nested results, where the absence of a key whose value is another object is very possible, you have probably had instances where you had to write an if/else block as dabble down the nested object, or use the `&&` (AND) logical operator in the process of assigning your value.

Let's use a simple example here:
```
const obj = {
  info: {
    type: 'human',
    firstName: {
      val: 'tolumide',
      firstLetter: 't'
    }
  }
}
```

If we had wanted to get the value of the `firstLetter` in obj above, what we would usually do would be to do a sort of type or value checking to confirm the existence of such nested keys in the object before accessing its values and then do a type check before we continue with its value.
```
const letter = obj && obj.info && obj.info.firstName && obj.info.firstName.firstLetter

console.log(letter) //t

if(letter){doWhatever()}
```
With optional chaining however, we can write less code

```
const theLetter = obj?.info?.firstName?.firstLetter
console.log(theLetter) //t
```

<<Using Optional chaining with Nullish coalescing>>
```
const proveIt = obj?.info?.lastName?.firstLetter ?? 'no name'

console.log(proveIt) //no name
```

Good luck applying this 😃👍

PS: I love feedback. If you have any please drop one below or reach out to me on.

>> twitter => [@tolumide_ng](https://twitter.com/tolumide_ng)
>> gitHub => [@tolumide-ng](https://github.com/tolumide-ng)
Where do Open Source developers get their motivation to keep developing?
Tags: opensource
Published: 2020-02-24 19:35:19

After years of making a living using Open source code and tools I decided to develop something others would find useful as my contribution to the open source community. 

I dug around on GitHub looking for inspiration and decided to build a [Desktop Invoicing App](https://github.com/tngoman/Offline_Invoicing) with Electron.

Now that its done I don't have the motivation to keep working on it with just the hope that someday someone will find it useful. What signals do you use to tell if your open source project is making an impact even if it's tiny one? 

Knowing that would be enough for me to keep going. In the absence of such "signals", what keeps you going?
+75 product / engineering job opportunities in politics
Tags: career
Published: 2020-02-24 19:25:02


Hi all,

Cultivate is deploying a new model for building a deeper bench of diverse tech talent in politics. We're looking for the best and the brightest in product + engineering to apply by Feb. 28th: https://compassfellowships.org.

The top 25 fellows will get free training, mentorship and access to ~75 full-time, long-term jobs working in the progressive movement. Salaries range from $85k - $185k depending on the role. Please pass along to friends of your that would be the right fit!

- Sarah
Synchronous and Asynchronous observables
Tags: sync, async, rxjs
Published: 2020-02-24 19:20:41

---
title: Synchronous and Asynchronous observables
published: true
description: Are observables sync or async? It depends on the way they are written.

tags: sync, async, rxjs

---


[Live example here](https://stackblitz.com/edit/async-sync-rxjs)

###Are observables synchronous or asynchronous?

<b>It depends on how they are built.</b>
<br>

If you look over [RxJS dev docs](https://rxjs-dev.firebaseapp.com/guide/observable) you'll find this: 
<br>`Observables are lazy Push collections of multiple values.`

<p>
I've seen that it's a lot of confusion about this on the internet as a lot of people assume that they are 
asynchronous because observables are presented as a new way of handling asynchronous code.
Let me further explain why I say that it depends by using two examples with a custom rxjs operator:
</p>
**RxJS operator:**
In RxJS an operator is just a function that accepts as 
input and observable and further returns a new Observable.

**1.Synchronous observable:**

```ts
const simpleBlockingOperator = (noOfLoops: number) => <T>(source: Observable<T>): Observable<T> =>{
  return new Observable(observable => {
    source.subscribe({
      next: no =>{
        let loops = 0;
        while(loops !== noOfLoops) {
          loops++;
        }
        console.log("Done loooping" + loops, " ", noOfLoops)
        return observable.next(no)
      },
      error: error => observable.error(error),
      complete: () => observable.complete()
    })
  })
};
```
In the above example we've created an rxjs operator which will loop as many times until we pass `noOfLoops`. Because our
code is synchronous will result in a blocking operation and trying to click in other parts of the page will not be possible as the main thread is blocked with our process of data.

**2.Asynchronous observable:**
```ts
const simpleNonBlockingOperator = (noOfLoops: number) => <T>(source: Observable<T>): Observable<T> =>{
  return new Observable(observable => {
    source.subscribe({
      next: no =>{
        setTimeout(() => {
          let loops = 0;
          while(loops !== noOfLoops) {
            loops++;
          }
          console.log("Done loooping" + loops, " ", noOfLoops)
          return observable.next(no)
        }, 0);
      },
      error: error => observable.error(error),
      complete: () => observable.complete()
    })
  })
};
```

In our async operator we've used `setTimeout`, this `setTimeout` will assure that the main thread will not get blocked because `setTimeout` 
is a browser API and our code will be moved to the event loop.

[More on how JS works](https://www.youtube.com/watch?v=8aGhZQkoFbQ)

##Conclusion

As you have already seen the observables are not by default async and it strongly depends on how they are written.

[More tutorials on JS](https://danielpdev.io)
[Follow me on twitter](https://twitter.com/danielpdev)
JavaScript vs WebAssembly, see the difference
Published: 2020-02-24 19:17:39

As a younger lad, exploring the world of Programming, a very dear friend and mentor of mine showed me the wonderful Conway's Game of Life.  It's more a simulation than a game.  My mentor had implemented theirs in C, printing the results to the console. 

I saw it as a fun way to try and think about performance. While the logic is straight forward the calculation is heavy, especially compared to anything else you're doing as a Web Developer.  

I'm not a low-level developer. Which means my implementation was in JavaScript.  My first attempt was bad, like REALLY bad.  I kept working on improving performance, until I came to what I have now.

[My JavaScript implementation of Conway's Game of Life](http://game-of-life-js.s3-website.us-east-2.amazonaws.com/).  I'm sure there's ways to improve the performance, but I haven't found any online.  Most of the beautiful versions online only display on a smaller screen (and thereby reducing the number of calculations). 

Now let’s talk about Web Assembly.  Depending on who you ask Web Assembly is somewhere between the next version of Silverlight (bad) to a JavaScript killer (good?).  

In order to see for myself, I set out to find a Web Assembly implementation of Conway’s Game of Life.  I found an example in the creators of [AssemblyScript](https://github.com/AssemblyScript/assemblyscript).

[Here it is!](http://game-of-life-wasm.s3-website-us-east-1.amazonaws.com/)

LOOK HOW BUTTERY SMOOTH THAT IS!

MY God, Web Assembly blows my implementation out of the water.

WebAssembly offers a real, tangible benefit with its near native performance.  Any technologies built ontop of WebAssembly, to me, just got more exciting.  This includes the afformentioned AssemblyScript and Blazor.
Clever Removal of Duplicates from Arrays
Tags: webdev, productivity, computerscience, javascript
Published: 2020-02-24 18:25:56

Removing duplicates is one of those things we need to do somewhat frequently but we also want to make sure we do it efficiently. Doing it by hand can easily lead to inscrutable code and a lurking performance issue. Typically, in JavaScript we’ll be removing duplicates from an array since that’s our typical go-to data structure.

So here’s a very cool and tricky way to remove duplicates from an array with just one line of code.

The first piece we need is the Set object. This is one of the new objects available in recent versions of JavaScript. It’s something we don’t typically use much. The Set object is very cool because it’s a collection a little like an array, but it ONLY allows unique items. If we try to add a duplicate item to its collection, then it just silently doesn’t add the item. So if we give it five 3’s, then it’ll only have one item in it, a single 3.

The Set object’s constructor will take in any iterable object, which includes arrays. So we can give a Set an array, and it’ll load in the elements and any duplicates won’t get loaded. We do that like this:



Now that we have a Set with the unique items we want, we just need to turn that back into an array. Here the Array.from method comes to the rescue. This static method will take any array-like or iterable object, and create a new array from it. So when we pass in our Set to Array.from, it’ll create a new array with the elements of the Set.



So combining these, in a single line of code, we can remove duplicates from an Array with nice, concise code.



Happy Coding!

Signup for my newsletter at [here.](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=&utm_content=&utm_campaign=blog)
Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
Session Storage vs Local Storage vs Cookie
Tags: javascript, tutorial, beginners, html
Published: 2020-02-24 18:24:32

The main purpose of this post is to give you a brief overview of these features:

#### Session storage

- stores data only for a session, meaning that the data is stored until the browser (or tab) is closed
- data is never transferred to the server
- can only be read on client-side
- storage limit is about 5MB
- opening multiple tabs/windows with the same URL creates `sessionStorage` for each tab/window

```javascript
// Write
sessionStorage.setItem('key', 'value');

// Read
let data = sessionStorage.getItem('key');

// Delete
sessionStorage.removeItem('key');

// Delete all
sessionStorage.clear();
```

#### Local storage

- stores data with no expiration date
- storage limit is about 5MB
- data is never transferred to the server

**Cons:**

- plaintext, hence not secure by design
- limited to string data, hence need to be serialized
= can not be used by web workers
- XSS
- can only be read on client-side

```javascript
// Write
localStorage.setItem('key', 'value');

// Read
let data = localStorage.getItem('key');

// Delete
localStorage.removeItem('key');

// Delete all
localStorage.clear();
```

#### Cookie

- stores data with expiration date
- storage limit is about 4KB
- cookie is sent to the server with each request
- can be read/write on client-side and server-side (if the cookie is marked as `HttpOnly` than it is inaccessible to client-side scripts)

```javascript
// Write
document.cookie = "key=value";

// Read
let x = document.cookie;

// Update
document.cookie = "key=new value";

// Delete - for deletion you should set expiration parameter to past date
document.cookie = "expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
```
Make Bounding Boxes for Artificial Intelligence with UDT
Tags: ai, data, computervision, machinelearning
Published: 2020-02-24 18:20:11

---
title: Make Bounding Boxes for Artificial Intelligence with UDT 
published: true
description: Draw bounding boxes over images in preparation to build an Artificial Intelligence
tags: artificialintelligence,data,computervision,machinelearning
---

# Label Bounding Boxes with the Universal Data Tool

Labeling your data with bounding boxes is an essential first step before training a machine learning algorithm. The [Universal Data Tool](https://universaldatatool.com) is a free, open-source application that makes this process simple.

Before you start, you should have either...

- A directory of images
- A file where each line is an image url (this is what I'll use)

## Configure the Job

To begin navigate to [universaldatatool.com](https://universaldatatool.com) or download the [latest release from github](https://github.com/UniversalDataTool/universal-data-tool/releases). I'll use the web version for now.

![homepage of udt](https://wao.ai/blog/static/home-a038bb57955551dae2b3e7e56becc98f.png)

Click "Create from Template" and select Computer Vision, then configure it to only do bounding boxes. If you also want to label each bounding box with a classification, you can also configure that here.

![udt computer vision configure](https://wao.ai/blog/static/computer-vision-configure-baea61bbdc1f3d1cdc2a3393d9402ec2.png)

## Import the Data

Navigate to "Samples", then to the "Import" page. Click "Paste Image URLs", paste the image urls and click "Add Samples".

![udt sample grid](https://wao.ai/blog/static/imported-samples-b8227ad9155958e58bff5c16b72b7c48.png)

## Label the Data

You can now begin labeling. Click the "Label" button at the top, then click on any sample to begin. Samples will turn blue as they're labeled.

![label hand](https://wao.ai/blog/static/label-hand-b5d242c74d4a8acd8f40c32ae108600c.png)

![some completed](https://wao.ai/blog/static/some-samples-completed-cbd9a8bd92e6ecf8a0d192ffc49c9759.png)

## Wrapping Up

When you're done, navigate to the "Settings" tab and click Download JSON. The resulting file can be loaded into the Universal Data Tool again, or parsed for usage with a machine learning algorithm.

That's it! You now have everything you need to add bounding boxes to a image dataset.
How do you organize all the keyboard shortcuts you've acquired over your career?
Tags: discuss, igotblistersonmefingers, productivity
Published: 2020-02-24 18:14:58

‪I'd like to hear how people have coped with the situation of running out of space on your keyboard due to the copious amounts of keyboard shortcuts you have programmed. Plus, the issue of a shortcut conflict when an app is open in the background with the same shortcut keys that you're trying to use but instead are only wreaking havoc on your other app. 

It's also the concept that I've truly exhausted all the easy ways to use/remember the shortcuts I need everyday only to have another piece of software come into my life and I gotta figure out where I can harbor this New Key on the Block. So my question truly is: after you've used up all the standard Modifier + letters shortcuts and your pinky has grown an extra half inch for reaching all the way to the numbers row while still holding CMD + Opt with the same hand for the last month what do people do to accommodate this issue?
A New Way of Dispatching Actions With Ngxs for Angular
Tags: javascript, angular, redux, typescript
Published: 2020-02-24 18:12:12

Another fundamental priority in development is trying to limit the use of boilerplates to the minimum. In general, it’d be good practice to keep the code as simple as possible and to avoid verbosity to keep technical debt under control.

For me, there’s nothing more frustrating than a file with hundreds of lines of code, and that’s why I’m always looking for ways to write in a cleaner and clearer way. In this piece, I’ll show you a better way to dispatch actions to an Angular NgXs Store.

<b>The problem</b>

Writing boilerplate code for our state management can be a long process. If we’re working on a complex app with a wide range of operations handled by the Store, we might need tens of different @Select() functions (as well as Action declarations).
When it comes to dispatching actions from our components, we can easily find situations like this below, where we’re dispatching multiple updates to the Store to perform a series of different actions before routing to the success page:

<b>The Solution: Introducing the Dispatch Decorator</b>

@ngxs-labs/dispatch-decorator is another interesting experimental feature for NGXS developed by NGXS Labs.

Even though it’s still not part of the official NGXS package, it’s likely to become an official feature shortly. The package allows us to use the @Dispatch decorator without injecting the Store in the constructor of our component. Moreover, it helps us writing code that is much more compact.

We can install it using the script:
`npm i @ngxs-labs/dispatch-decorator`

And we can include it in our app.module.ts:

`import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';
import { NgxsDispatchPluginModule } from '@ngxs-labs/dispatch-decorator';
@NgModule({
imports: [
NgxsModule.forRoot(CartState, ProductState),
NgxsDispatchPluginModule.forRoot()
]
})
export class AppModule {}`

Now, we’re ready to replace our calls to the Store with the @Dispatch decorator:

`import { Dispatch } from '@ngxs-labs/dispatch-decorator';
export class PurchasePageComponent {
 @Input() defaultState: any;
constructor() {}
showSuccessPage(): void {
this.resetAllStates();
this.goToPage(['success']);
}
@Dispatch() resetAllStates = () =>[
new ResetAnimationState(this.defaultState),
new ResetPurchaseState(),
new HideHeader(),
new ResetAnswers(),
new ResetCartState(),
new ResetCarouselState(),
new ResetUserState()
];
@Dispatch goToPage = (route: any) => new RouterGo({path: route});
}`


Much better. Enjoy!
15 Tips For Someone New To Web Development
Published: 2020-02-24 18:01:03

On Twitter we asked the [egghead](https://egghead.io/) community for advice for new developers:


{% twitter 1229903764716490753 %}


Tons of developers gave out some awesome advice and we wanted to share some with the dev.to community. 


1) The fundamentals are always a good start.

{% twitter 1229912686822952960 %}

2) Don't get stuck on the "right way".

{% twitter 1229923421804470273 %}

3) Make a journal for your future self.

{% twitter 1229932170485129217 %}

4) Hang out with veterans to see they don't know it all.

{% twitter 1230220935921201152 %}

5) Get a study buddy!

{% twitter 1229990169618657280 %}

6) You can learn a lot from your mistakes.

{% twitter 1229904201989414913 %}

7) You don't have to chase the newest thing.

{% twitter 1229908741182676993 %}

8) Build things you don't think you're ready for.

{% twitter 1230335467222183936 %}

9) It gets easier with time.

{% twitter 1230115633716699137 %}

10) Don't forget to network.

{% twitter 1230124500605423616 %}

11) Communication is important.

{% twitter 1230033920432885760 %}

12) Don't compare yourself to others.

{% twitter 1230162032642658310 %}

13) Don't worry about what you don't know yet.

{% twitter 1229908420716826624 %}

14) Keep on building.

{% twitter 1229907232302751744 %}

15) Don't give up.

{% twitter 1229906933605228544 %}

Of course this wasn't all of the great advice from this thread. Check it out if you want to read them all.

Share any advice you have for new developers in the comments.