teleren/devto huggingface dataset:
I promise...I'll catch all
Tags: promise, javascript
Published: 2020-02-25 07:46:03

###Introduction

This article is about error handling in case of Promise.all

### What does Promise.all() do??

The Promise.all() method returns a single Promise that fulfills when all of the promises passed as an iterable have been fulfilled.

For example,
```javascript
const firstPromise = Promise.resolve(3);
const secondPromise = 10;
const thirdPromise = new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000, 'third promise');
});

Promise.all([firstPromise , secondPromise , thirdPromise ]).then(function(values) {
  console.log(values);
});
// output: Array [3, 10, "third promise"]
```

Now, there is something called fail-fast behavior.

Promise.all is rejected if any of the elements within the iterable are rejected. For example, if you pass in two promises of which one resolves after a timeout and one promise rejects immediately, then Promise.all will reject immediately.
Have a look:
```javascript
const p1 = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('one'), 1000); 
});
const p2 = new Promise((resolve, reject) => {
  reject(new Error('rejecting....'));
});

Promise.all([p1, p2])
.then(values => { 
  console.log(values);
})
.catch(error => { 
  console.error(error.message)
});

//console: 
//"rejecting...."

```
In the above code, P1 will resolve and return a response after timeout but since P2 throws an error Promise.all() will reject and exit with an error message.

But, in real life scenarios you don't want the execution to stop just because one promise failure.

If we have to change this, we need to handle each promise to get desired results.


```javascript
const first = new Promise((resolve, reject) => { 
  setTimeout(() => resolve('delayed response'), 1000); 
}); 

const second= new Promise((resolve, reject) => {
  reject(new Error('rejection'));
});

Promise.all([
  first.catch(error => { return error }),
  second.catch(error => { return error }),
]).then(values => { 
  console.log(values[0]) // "delayed response"
  console.error(values[1]) // "Error: rejection"
})
```
Notice the difference in console statements. This time we get response from both the promises even if one promise throws error.

This is because, we are handling each promise within the iterable.

That's how we promise to catch all. Hope this was helpful.
Cheers !!!
Killing specific node processes (*ux)
Tags: node, terminal, linux, selfnote
Published: 2020-02-25 07:39:06

_Update: Instead of this post, check out [this StackOverflow answer](https://unix.stackexchange.com/a/351522/31207) that gives a much better and convenient method of doing this by using `gid` (group id). It puts my method to shame_

_Update: For Windows, run `netstat -a -n -o|findstr 8080` (or any port) in CMD, run `taskkill /pid 20212 /f` with that PID in place of `20212` (or show PID column in Processes tab in Task Manager, find the PID in the first command output and kill it. Kinda messy, but works.)_

I had a VM hosting and running a codebase through NodeJS.

I was accessing the code through ssh in VSCode, while the code ran through a custom script inside the VM itself. It was exposed through ssh port forwarding, but that irrelevant for this story.

So, when I was switching branches, the server script tended to get frozen. I wanted to kill it and its descendants while not hurting the node processes of the VSCode server in the same VM. So I couldn't just run `killall node`.

To get an overall idea about the process state, I first listed down the processes with `pstree | grep node`. There, I could see which node processes spawned which, but without any pids.

So I ran `ps aux | grep node`, which gave me all the node processes with pid and other stats like memory. But it still contained VSCode server processes. So I excluded any line containing `vscode`: `ps aux | grep node | grep -v vscode`.

Voila!

Now I had the pids of each unwanted node process, but I couldn't tell which column was the pid! So I ran `ps aux | head` to find which column it was.

Then I killed all of them with:

```sh
kill -15 2189 2240 # ...
```

Here, 2189, 2240, ... are the list of pids. `-15` modifier means `SIGTERM`.

After testing again with `ps aux | grep node | grep -v vscode`, I saw some processes were too frozen to respond to `SIGTERM`, which meant I then run `kill` with `-9` (`SIGKILL`) instead of `-15`.

So, that's all!
Simple full screen nav menu
Tags: codepen, menu, javascript, navigation
Published: 2020-02-25 07:17:49

---
title: Simple full screen nav menu
published: true
tags: codepen, menu, javascript, navigation
---

<img src="https://dev-to-uploads.s3.amazonaws.com/i/gl2mrxlla995jjojx65f.png">

<p>Minimal full screen navigation menu that fades in and out when toggled with click or esc key</p>

{% codepen https://codepen.io/samuelhowell/pen/NWqRjZw %}
How can you activate Webroot Keycode Activation using this link?

Published: 2020-02-25 07:11:55

The Webroot antivirus software program is one of the proven best Antivirus software where a device or open system of software try to connect with another internet service provider. The threatful viruses, malwares, firmware, trojan, online virus attack can be known to download for the system. You can thereby install the software on the device likewise mobile, tablet or PC.

Toll Free 
USA +1-855-725-3249
UK   08081893304
Visit Us: https://webrootsafe.me/
https://webrootsafe.me/redownload-webroot
Put resume on the blockchain and decentralized insurance, anyone?
Tags: dapps, blockchain, adoption, qotd
Published: 2020-02-25 07:10:51

---
title: Put resume on the blockchain and decentralized insurance, anyone?
published: true
description: dapps that can give you peace of mind 
tags: dapps, blockchain, adoption, QOTD
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85voavkn7xpd8q4hhs9o.jpg)

The world we’re living in is becoming more complex — digital fraud, data breach, (exchange) hacks are on the rise. More unprecedented security challenges that we have to deal with in our lives than ever before. The good thing is blockchain technology could be the ultimate solution for these universal problems, and decentralized applications have more effective approaches in tackling the threats of today.

We've seen [new dapps](https://www.dapp.com/article/securing-your-future-with-new-dapps) that want to shape the regular tech world by creating a decentralized mutual insurance platform (like [Nexus Mutual](https://www.dapp.com/dapp/nexus-mutual)) and building tools (like resume builder tool [BlockResume](https://www.dapp.com/dapp/blockresume)) that respect your privacy. 

Do you think decentralized apps will make people's future life more secure and more enjoyable? And will you move your apps to the blockchain or build new apps on top of the blockchains?
What React app(s) do I build to become really knowledgeable in it?
Tags: help, react
Published: 2020-02-25 06:51:32

I've started building some projects in React but I only seem to be learning new css and JavaScript tricks but not anything in React.

So I was hoping to get some ideas or maybe specific features to implement that will make me use all sorts of lifecycle methods, hooks, redux/context and maybe stuff I still don't know about.

The suggestion can be fullstack, that'll be even better 😬. Thank you!
Buttono, a flexible Sass mixin for creating BEM-style buttons.
Tags: css, webdev, opensource
Published: 2020-02-25 06:32:54

Today I'm excited to share my new open source project with you. It is a Sass(scss) mixin that you can use to create buttons. I hope you guys enjoy it.

Source: https://github.com/hsnaydd/buttono
Website: https://hsnaydd.github.io/buttono/
The stack powering Tradie Training White Card
Tags: language, framework, whitecard
Published: 2020-02-25 05:58:52

---
title: The stack powering Tradie Training White Card
published: true
description: With the many languages and frameworks out there, it can be tricky to pick. But we have made our choice almost a year ago and we're happier than ever!
tags: Language, Framework, Whitecard
---
Tradie Training officially started delivering the White Card course to customers in January 2020, but we started work on the website, student management system and training platform 6 months prior to that.
There were a lot of considerations, including the fact that not everything needed to use the same tech stack.
We ended up using the Elixir language with Phoenix as a framework, using umbrella applications to keep everything nice and tidy. The website is a umbrella application, the student management system is one, the administration is one as well. On top of that we've created more umbrella applications for common code such as the database layer, the PubSub layer etc. This approach turned out to be a massive win for Tradie Training.
We leverage a recent feature of Phoenix, called LiveView, to efficiently display live dashboards and student tracking.
With all of that said, basically Elixir powers almost everything we need. We dropped in Elm and a few other technologies when needed (signup page with client side encryption etc).

You can book your [White Card in Brisbane](https://tt.edu.au/white-card-qld/brisbane) or on the [Gold Coast](https://tt.edu.au/white-card-qld/gold-coast) using our booking system (built in Elm & Elixir 😊)

As you can probably guess from the stack, we love functional programming.

For hosting, we ended up going with render.com. They have a great tutorial on deploying Elixir applications that we followed, and everything just worked straight away. Definitely check them out, I highly recommend them.

Tradie Training is a [registered training organisation](https://training.gov.au/Organisation/Details/45555) and is licensed to issue White Cards on behalf on WorkSafe Queensland.
Chrome Dino
Tags: javascript, webdev
Published: 2020-02-25 05:51:54

<meta name="google-site-verification" content="oOe3AG6SDsjvvUhBoLfnX1e49wYo_8meodlfTPyw6gc" />
Hi, This is Sunil, btw I'm newbie to this community.
Well everyone knows [Google Chrome Dino](chrome://dino/) and if you want to play game with unlimited health ;) then, fire up the console and enter following command.

<code>Runner.instance_.gameOver = function() {};</code>


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

that's it Boom !!
#CodeWithFun
I am a professional JavaScript developer, and I recently performed a refactor of an OOP project. Here's what I got.
Tags: javascript, webdev, tutorial
Published: 2020-02-25 05:24:22

I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

In this video, I review a JavaScript OOP project, identifying and fixing bugs and code smells alike, and explaining my thought processes along the way. I hope you enjoy!

{% youtube N7vAsTwmk14 %}

Happy coding!
How open-source developers can earn income each time their microservices are used by others
Tags: opensource, blockchain, javascript, microservices
Published: 2020-02-25 05:23:10

# Actors on the network
The [MESG Network](https://docs.mesg.com/?utm_source=devto&utm_medium=economy_dev) is an open network where anyone can join and participate in the economy. Each actor has a different role with different incentives in order to maintain a balance within the network. There are no limitations to the number of actors that the same node can have. You can either have a single actor per node, or have all actors on a single node.

## Users
Users can execute any task from any service without worrying about the hassle of maintaining a server or using online services that require monthly fees. In this case, the user would pay on-demand using MESG Tokens and would only pay for what is needed when it's needed.

To guarantee that the service is running correctly, the user can run a Runner and execute the task directly. With this configuration, MESG is used as a traditional server, but still passes through a network, providing fallback in case of server issues.

## Developers
Executions on the network are based on the services that are created by developers. Like any software, maintenance is required to ensure its quality. **To incentivize developers to maintain their services, the developer receives rewards based on the use of their service.**

**Every execution on the network rewards the service's developer, ensuring a reward that's proportional to the use of the service.**

To guarantee the availability of their service, developers might want to run their services on their own, ensuring that the network can always process executions related to this service.

See all the ways to earn tokens, including all the actors on the network, in the [full article](https://blog.mesg.com/token-utility-in-the-mesg-economy/?utm_source=devto&utm_medium=economy_dev)
My First NPM Library - Web Component using StencilJS
Tags: webcomponents, npm, javascript, typescript
Published: 2020-02-25 05:20:24

Hey guys,

This is my first post in dev.to
Loving the community over here.

So here is the thing, I've coding for work form past 3-4 years and have never contributed to open source properly. 

I've been learning a lot over the past years, and thats the thing I realized I've been just learning. Apart from my work stuff haven't been doing anything with programming or coding.

Finally decided to build something, so started looking for some inspiration. Landed on a sweet Library for React called React Spectrum and decided to build something similar to it using **Web Components**.

So here is my library called [Word Spectrum](https://github.com/karthikrp/WordSpectrum) which basically is a colorful and tiny placeholder for paragraphs.

Size: [271Bytes(Minified) and 198Bytes(Min + Gzipped)](https://bundlephobia.com/result?p=@blendedideas/word-spectrum@0.0.3)

Here is a preview.
<img src="https://raw.githubusercontent.com/karthikrp/WordSpectrum/master/assets/ss.png" alt="Word Spectrum"/>

[Codepen Demo](https://codepen.io/karthikrp/pen/XWbpRee)


Please do let me know any improvements which can be made to the library. Also Pull requests are welcome.
That's wrong. It's not mine. How do I fix it?
Published: 2020-02-25 05:16:38

This exact scenario presents itself multiple times a day at any organization. You probably see something less than ideal, it doesn't fall under your purview, and it presents consequences that range from inconveniences to major vulnerabilities. 

## Deep Breath
This will happen to you. You will see someone navigating down a path that trigger battle scars from a previous life, and you **should** say something about it. However, **how you say it is everything.**

I had a team-mate who approached this situation in a less than ideal manner. The way it was communicated? One e-mail to everyone on my team. "This is terrible. This is a huge deal. We can't deploy this." This was a project in the works for 6 months, had a large business buy in, millions of dollars of impact, and now I have a team mate telling leadership this can't be deployed. Talk about an ego check. 

From this single line of communication I went through a major imposter syndrome contemplation, 2 existential crisis, and a series minor heart palpitations. 

On top of the stress of production deployment, I got to spend the rest of my week wondering if I knew what I was doing. At the end of the day, the application was deployed, functionality was successfully delivered, and the sky didn't fall. My team-mate had very valid concerns about the application, but he didn't have all the context. And conversely, I didn't have all the context of his concerns. With the help of the team, we got through it.

## Moving Forward
Keep in mind a few things when approaching these scenarios. 

### Context
Do you know everything about every decision made in this scenario? Probably not. Try to understand their perspective holistically to gain an insight into their methodologies. What are they trying to accomplish? What constraints are out of their control? What are you trying to accomplish?

### End Goal
The "What are you trying to accomplish?" is the next part. When approaching these situations it's best to understand what you're trying to improve or prevent very explicitly. Generally broad stroke or absolutist statements are less effective than approaching something with specific recommendations for improvement. "We can't do it this way." "This won't work." Typically don't provide any guidance to the person on the other end. The flip-side of the coin is providing a holistic view from your end. Help them understand what's going through your mind.

### Human Factor
We're all humans. We will make mistakes. Nobody knows everything. And you don't know the pressures that person has going on in their life. Be nice, learn always, and do the right thing.

What has been your experience with situations like these?! Leave some comments below. I'd love to hear about them!
Exercism Ruby - Two Fer
Tags: exercism, ruby
Published: 2020-02-25 04:46:57

---
title: Exercism Ruby - Two Fer
published: true
description: Two-fer or 2-fer is short for two for one. One for you and one for me.
tags: exercism, ruby
series: Exercism Ruby
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--vZNNvhQv--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/ugyvp6xn69upc1u5evqa.png
---

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

Two-fer or 2-fer is short for two for one. One for you and one for me.

```
"One for X, one for me."
```

When X is a name or "you".

If the given name is "Alice", the result should be "One for Alice, one for me." If no name is given, the result should be "One for you, one for me."


Source [wikipedia Two-fer](https://en.wikipedia.org/wiki/Two-fer)


```rb

require 'minitest/autorun'
require_relative 'two_fer'

# Common test data version: 1.2.0 4fc1acb
class TwoFerTest < Minitest::Test
  def test_no_name_given
    assert_equal "One for you, one for me.", TwoFer.two_fer
  end

  def test_a_name_given
    assert_equal "One for Alice, one for me.", TwoFer.two_fer("Alice")
  end

  def test_another_name_given
    assert_equal "One for Bob, one for me.", TwoFer.two_fer("Bob")
  end
end
```


```rb
class TwoFer
  def self.two_fer name = "you"
    "One for #{name}, one for me."
  end
end
```
Hacktober fest 2019 t-shirt arrived
Tags: hacktober
Published: 2020-02-25 04:45:57

---
title: Hacktober fest 2019 t-shirt arrived 
published: true
description: I made contributions and me received a great deal!
tags: hacktober
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/grwt1zi5ajsyw0m971i3.jpeg
---

Last year approx October I think 😂

I was boring in Twitter when suddenly I saw a Twit about hacktober fest 2019, I have never heard about it and 
like good programmer, searched about it!

Today my T-shirt's here with me!!

So, What do you think?

Thank you #digitalocean #devto
React 16 Datepicker Example with react-datepicker
Tags: react, datepicker, javascript, framework
Published: 2020-02-25 04:37:44

Today, ReactJS has become highly popular because of its extra simplicity and flexibility. Many people are even referring to it as the future of web development. It is estimated that more than 1,300 developers and over 94,000 site using ReactJS.

In this article, I am going to explain about datepicker in React.js application. I will use react-datepicker  NPM package for the datepicker task in our reactjs application. This package offers very easy customization and also allows us to pick date with time. There are also other NPM package available, but I found it super easy to integrate in our React.js application.

#Let's Get Started#

###Create new React App###

Create new react app with the help of create-react-app tool. Run the below command:

 

```npx create-react-app reactjs-datepicker-app```

 

Install DatePicker package inside app folder
Move to project folder with command cd reactjs-datepicker-app/ and install react-datepicker package using npm.

 

```npm install react-datepicker```

 

###Install Bootstrap###
Install bootstrap using below command:

 

```npm install bootstrap --save```

 

###Add Datepacker into Component###

Replace below code with older code in App.js file inside src folder. Below code will create a datepicker.

```
import React from 'react';
import DatePicker from 'react-datepicker';
 
import "react-datepicker/dist/react-datepicker.css";
import 'bootstrap/dist/css/bootstrap.min.css';
 
class App extends React.Component {
 
constructor (props) {
super(props)
this.state = {
startDate: new Date()
};
this.handleChange = this.handleChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this);
}
 
handleChange(date) {
this.setState({
startDate: date
})
}
 
onFormSubmit(e) {
e.preventDefault();
console.log(this.state.startDate)
}
 
render() {
return (
<div>
<div className="text-center">
<form onSubmit={ this.onFormSubmit }>
<div className="form-group">
<DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
dateFormat="MMMM d, yyyy"
className="form-control"
/>
</div>
<button className="btn btn-primary">Choose Date</button>
 
</form>
</div>
</div>
);
}
 
}
 
export default App; 
```

Run below command on  terminal:

```npm start```

On browser at url: http://localhost:3000. Check the app.


###Add Date with time picker into Component###

Replace the below code in the Component file:
```
 <DatePicker
selected={ this.state.startDate }
onChange={ this.handleChange }
showTimeSelect
name="startDate"
timeIntervals={20}
timeCaption="time"
dateFormat="MMMM d, yyyy h:mm aa"
className="form-control"
/>
```
Now run the app and check on browser the picker will have option to pick date and time both, Time format can be set as per the requirement.

Visit https://reactdatepicker.com/ to see the more options available with this package.

Let me know your thoughts over the email pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share with your friends.

This post was originally posted on https://jsonworld.com/demo/
Day 1
Tags: 100daysofcode, css, codenewbie, webdev
Published: 2020-02-25 04:23:50

Picking up where I left off which was learning/working with CSS animations, hover effects, and transitions. 

Today, I learned about svg stroke properties and created a circle progress bar.

{% codepen https://codepen.io/techyt/pen/GRJrBQq %}
Looking for Angular Team (Paid Gig)
Tags: angular, freelance, gig
Published: 2020-02-25 03:52:38

---
title: Looking for Angular Team (Paid Gig)
published: true
description: I need an expert Angular development team to work on an existing project.
tags: #angular, #freelance, #gig
---

I have a fairly straightforward and nearly feature-complete Angular web application (running on heroku with Stripe integration for recurring billing processing) that needs a quality web development team -- preferably one with both a **dedicated QA engineer** _and_ someone **intimate with GitHub and heroku** -- to help carry the ball over the finish line. There are a handful of bugs to fix and a growing list of new features to add, so hopefully this will be a long-term relationship.


Bonus points if you can help migrate from NoSQL to MySQL backend.


Contact me!