teleren/devto huggingface dataset:
Promise.all (ES2015) vs Promise.allSettled (ES2020). What's changed? 🤔
Tags: javascript, react, beginners, vue
Published: 2019-08-25 06:46:27

Hey! 👋

Check out today's `⚡️ Dev Tip 💡` 👇

> Follow me on Twitter [@shahzaibkhalid](https://www.twitter.com/shahzaibkhalid) for more Dev Tips! ✨

Let’s say we want to run many promises to execute in
parallel and wait till all of them are ready. 🧐

```javascript
// some dummy promises to play with 🍭
const p1 = new Promise(resolve => resolve('Shahzaib'));
const p2 = new Promise((_ ,reject) => reject('User does not exists!'));
const p3 = new Promise(resolve => resolve('Lahore'));
```

### Promise.all (short-circuits if any of the promises is rejected) 

If any of the passed promises is rejected, the promise
returned by `Promise.all` immediately rejects with that error. ❌

```javascript
Promise.all([p1, p2, p3])
  .then(response => console.log(response))
  .catch(error => console.log(error)); // 👉'User does not exists!'
```

### Promise.allSettled (does not short-circuits)

Waits for all passed promises to settle (either resolved or rejected). 🥳

The resulting array has:
- `{status: 'fulfilled', value: result}` - for successful responses
- `{status: 'rejected', reason: error}` - for errors

```javascript
Promise.allSettled([p1, p2, p3])
  .then(response => console.log(response));

/**
 * 👉 [ {status: 'fulfilled', value: 'Shahzaib'},
 *      {status: 'rejected', reason: 'User does not exists!'},
 *      {status: 'fulfilled, value: 'Lahore'} ] 🚀
 */
```

Hope you learned something new today. Do let me know what do you think about this Dev Tip in the comments below. 👀

Peace. ✌️
Apache Camel #4 - Bean Validation
Tags: java, apache, camel, apachecamel
Published: 2019-08-25 06:38:44

---
title: Apache Camel #4 - Bean Validation
published: true
description: Validate data in Camel
tags: #java #apache #camel #apachecamel
---

There is a lot of cases where we needed to write validation for data input. This "problem" can be easily solved in Camel by using Bean Validation component.

Imagine we have a JSON input in our route and we want to validate payload.

<div class="highlight">
<pre class="highlight javascript">
{
     "name":"Jane Doe",
     "cardNumber":"377198642272436",
     "email":"jane@doe.com",
     "paid":true,
     "price":1.25
}
</pre>
</div>

To do that, we first we must unmarshall that payload to POJO.
But first, we must create a class with the same parameters as JSON and add Hibernate Validation annotations.

<div class="highlight">
     @NotNull
     @Length(min = 1, max = 60)
     private String name;

     @CreditCardNumber
     private String cardNumber;

     @Email
     private String email;
    
     @NotNull
     private boolean paid;

     @Min(0.1)
     private int price;
</div>

And then we add this to our Camel route.
<div class="highlight">
<pre class="highlight javascript">
   //define a datasource for the class you want to validate.
   GsonDataSource dataSource = new GsonDatasource(JsonDto.class);

   //unmarshal JSON to POJO
   .unmarshall(dataSource)

   //Validate data
   .to("bean-validator:someLabelHere)
</pre>
</div>

When that unmarshalled data is sent to bean validator, that objects will be validated by annotations we set for JsonDto fields.

Thank you for your attention.
Jest for Sinon Stubs
Tags: testing, javascript, jest, sinon
Published: 2019-08-25 06:02:15

---
title: Jest for Sinon Stubs
published: true
description: 
tags: #testing #JavaScript #jest #sinon
---

At work, we recently converted from Mocha, Karma, Chai, and Sinon to Jest. It was not immediately obvious what the direct replacement was for ```tsx
sinon.stub(object, 'methodName').callsFake(() => {})
```
Found out Jest provides similar functionality with
```tsx
jest.spyOn(object, 'methodName').mockImplementation(() => {})
```
Awesome CSS Animation Hamburger Menu
Tags: codepen, javascript, html, css
Published: 2019-08-25 05:02:16


---
title: Awesome CSS Animation Hamburger Menu
published: true
tags: codepen, javascript, html, css
---

<p>Awesome Animation CSS Hamburger Menu  - HTML5 CSS3 Tutorial</p>

{% codepen https://codepen.io/ahmadbassamemran/pen/abopOMY %}


<hr/>
[Do Not Forget To Like & Subscribe In The Channel:](https://www.youtube.com/AhmadEmran?sub_confirmation=1)
<hr/>


{% youtube pzBTF31iiCo %}
I’m Starting a Newsletter!
Tags: newsletter
Published: 2019-08-25 04:42:14

---
title: I’m Starting a Newsletter!
published: true
description: Subscribe to my newsletter and get an email every time I publish.
tags: newsletter
cover_image: https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Fnewsletter.png?alt=media&token=3520f578-4b74-4f84-b7bb-31dc5c093734
---

Sign up to get an email every time I publish a new blog post. Hope to catch you in the e-box! 😊

https://ashleemboyer.com/newsletter/
Do you use web assembly? Help me with this 🐙
Tags: webassembly, javascript, question, rust
Published: 2019-08-25 03:53:12

---
title: Do you use web assembly? Help me with this 🐙
published: true
description: 
tags: webassembly, Javascript, question, rust
---

Hi everyone, I have a question about web assembly (I don't know if someone here use it), the thing is that, why this technology has its own variations in other languages? I mean, I can write web assembly code in Python, Java, JavaScript, c#, rust, etc... But this affect the result? If I write my code in Python, will affect the performance if I write the same in rust? Or the output in both would be the same? I'm asking this because I have one idea, which is, all the heavy code that my server needs to be care, I can write in web assembly and the front end does the heavy stuff. Like for example, if I want to rotate an image and then add it some colors, instead of using a lambda function or whatever that needs a server, I can use this awesome front-end technology! What do you think? Thanks!
The Basics: Paragraph Tag
Published: 2019-08-25 02:48:15

`<p> content </p>`

The `<p>` tag defines a paragraph. We use it to wrap to wrap text.

## The Basics: The Paragraph Tag

## Navigation
 * [Codepen Lesson](#chapter-1)
 * [Video Walkthrough](#chapter-2)
 * [Audio Walkthrough](#chapter-3)
 * [Helpful Links](#chapter-4)
 * <a href="https://slides.com/lennyroyroy/deck#/9" target="_blank" class="button">Link to Lesson Slide Deck</a>


### Codepen Lesson <a name="chapter-1"></a>

{% codepen https://codepen.io/lennyroycodes/pen/vwbXpJ default-tab=html,result %}


<iframe height="650" style="width: 100%;" scrolling="no" title="The Basics: The Paragraph Tag" src="//codepen.io/lennyroycodes/embed/preview/vwbXpJ/?height=300&theme-id=37020&default-tab=html,result&editable=true" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/lennyroycodes/pen/vwbXpJ/'>The Basics: The Paragraph Tag</a> by lennyroy
  (<a href='https://codepen.io/lennyroycodes'>@lennyroycodes</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

### Video Walkthrough <a name="chapter-2"></a>

Brief YouTube clip of the lesson.

{% youtube 9RVf3nZi-jw %}

<iframe width="760" height="515" src="https://www.youtube.com/embed/9RVf3nZi-jw?autoplay=0&rel=0" frameborder="0" allow="accelerometer;encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### Audio Walkthrough <a name="chapter-3"></a>

Brief podcast episode of the lesson.

<iframe src="https://open.spotify.com/embed-podcast/episode/2k1PINTB0iVZ0fJeUZ5lUM" width="100%" height="232" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

{% spotify spotify:episode:2k1PINTB0iVZ0fJeUZ5lUM %}
* <a href="https://anchor.fm/lennyroy-robles4/episodes/The-Basics-Paragraph-Tag-e4gf5l" target="_blank">Podcast Link</a>




### Helpful Links <a name="chapter-4"></a>

* <a href="https://www.w3schools.com/html/html_paragraphs.asp" target="_blank">w3 Schools</a>
* <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" target="_blank">MDN</a>
* <a href="http://www.htmlbasictutor.ca/paragraph-tag.htm" target="_blank">HTML Tutor</a>
* <a href="https://slides.com/lennyroyroy/deck#/" target="_blank">Slide Deck</a>
Finally Letting Go of Tutorial Hell
Tags: tutorial, beginners, javascript, html
Published: 2019-08-25 02:04:24

Ever since I realized that web developers would have to figure out a lot of stuff on their own, I've let go of blind tutorial consumption. These days, I try to build projects entirely on my own. Even if I have to battle with bugs for days. There's an awesome feeling that comes with bringing a project into some level of completion.

## What I've been working on
Basically, since I've learned a lot of JS, I felt that I should move unto React. But then, that's just an evil voice in this head of mine. Another voice tells me to build up to 20 projects using vanilla everything. I signed up for 30 days 30 sites and Daily UI. They weren't successfully done. Mostly because of school work and code fatigue. 

Anyways. I went back to an old tutorial project and decided to rebuild it from scratch. Though I didn't eventually do it all from my head. I learned even more things on my own and added more features to the web app. It's basically a color guessing game. Where you have to guess a color given its RGB values. It's hosted [here](https://vicradon.github.io/color-guessing-game-redo/) on a GitHub page.
{% codepen https://codepen.io/vicradon/pen/dybvMbW %}

I really want to work on more, real projects in the future. Preferably with other developers. I also want to start contributing to open source. Although that seems really big right now. Maybe one day, I'd have a story to tell about my developer journey. [Edit: I finally have a story to tell [here](https://dev.to/vicradon/2-years-of-coding-my-journey-25pj)] You can check out the code of the color guessing game [here](https://github.com/Vicradon/color-guessing-game-redo/blob/master).

## Edit
Seeing this post, It makes me reflect on my growth in the past year. Consistency still stands as the best way to grow.
Making a Gatsby site from Meetup event data
Tags: gatsby, react, meetup
Published: 2019-08-25 19:00:08

---
title: Making a Gatsby site from Meetup event data
published: true
tags: gatsby, react, meetup
canonical_url: https://andri.dk/blog/2019/08/gatsby-meetup-site
---

As part of my talk preperation for Aalborg Frontend Meetup, I was going to do a walkthrough of a new Gatsby site and use [gatsby-source-meetup](https://www.gatsbyjs.org/packages/gatsby-source-meetup/?=meetup) to import the upcoming events.

Imagine my surprise, when I discovered that Meetup had stopped issuing API keys.

## gatsby-source-ical

Gatsby has a wonderful collection of source plugins, and one of them happens to be [gatsby-source-ical](https://www.gatsbyjs.org/packages/gatsby-source-ical/?=ical). I'll hand it to Meetup support; they did send me a useful link that indicated they I may not need an API, since they have a calendar feed available.

## Finding the calendar export

First, find your group on [Meetup](https://www.meetup.com), click "Events", "Calendar" and at the bottom there are feed links (if you're logged in).

For our group, the URL is: "[https://www.meetup.com/Aalborg-Frontend/events/ical/](https://www.meetup.com/Aalborg-Frontend/events/ical/)"

## Add the plugin

```
yarn add gatsby-source-ical
```

### gatsby-config.js

```
// In your gatsby-config.js
module.exports = {
	plugins: [
		// You can have multiple instances of this plugin
		// to read source nodes from different remote files
		{
			resolve: `gatsby-source-ical`,
			options: {
				name: `events`,
				url: `https://web-standards.ru/calendar.ics`
			}
		}
	]
}
```

### Query the data

```
{
	allIcal {
		edges {
			node {
				start
				end
				summary
			}
		}
	}
}
```

## Why?

I put this together in case someone else is creating a meetup website with Gatsby and got frustrated with the API change.
Hello World
Published: 2019-08-24 23:28:23

Hi, there.  
I'm `<Mark age=25 hat=true/>` and want to learn a lot of developing stuff and there isn't a better way to learn than by **sharing** and **teaching**.  
Currently I'm learning and practicing `TDD (Test Driven Development), Functional Programming, React, Javascript, HTML` and `CSS`.  
I also want to learn and explore `VueJS, Typescript, BDD (Behavior Driven Development), Python, Go, Data Science` and some Computer Science stuff.  
I'll challenge myself to post here often, so stay tuned (also follow me on Twitter [@HeyMarkKop](https://twitter.com/HeyMarkKop))
Faked SVG path stroke pattern
Tags: codepen, svg, strokepatterns
Published: 2019-08-24 22:50:03

---
title: Faked SVG path stroke pattern
published: true
tags: codepen, svg, stroke patterns
---

<p>A stroke of an SVG shape can have only one constant shape. Though vector drawing apps like Affinity Designer and Adobe Illustrator offers advanced stoke patterns, it has not yet landed in SVG. This little pen uses a very heavy and not very method to generate something which looks like patterns, but certainly is not. It uses a combination of adding many copies of the path and changing the stroke-dasharray to only draw a 1 pixel wide path, which at that given point have the calculated stroke-width. Fun, to play with, but not intended for real-world use.</p>

{% codepen https://codepen.io/netsi1964/pen/yLBMYPo %}
I'm building my first CMS website
Tags: discuss, webdev
Published: 2019-08-24 22:12:04

So I'm building my first CMS website ever and it's kind of overwhelming which framework / solution to pick. I've read a lot about it such as dropal, (now dropsl 8),laravel, keystone.js but I still don't know what to pick, and I feel this might have a huge impact once I start to build the website (mostly static but editable content). What could you share on this?
Outsource: how to organize?
Tags: outsource, github
Published: 2019-08-24 22:12:03

Hello friends!

I have several projects. Source code of them hosted on github.
Long ago I had a friend who helped me to update project by updating source code.
Now he can't help, but I still need to update projects.

I'm not a coder, shame on me but i'm too lazy, please forgive me.
In my dream, the best way for me is to create an issue as a task. In that task I can write what I want to update.
Then I have to find a coder who can do the task.

Coder make a branch for new version of code. Add necessary functions and updates, then he pushes commit to git and we test the result.

I like to create tasks. In this job i'm not so lazy. :)

The question is: how to advertise my tasks and not doing a spam (i hate to span and to bother) and may be there is even better way to solve my quest? 

Excuse me, my English is not native language.
Peace!
Feruz Oripov, The Real MVP.
Tags: opensource, refactoring, meta
Published: 2019-08-24 20:30:07

{% github https://github.com/thepracticaldev/dev.to/pull/3793 %}
{% github https://github.com/thepracticaldev/dev.to/pull/3794 %}
{% github https://github.com/thepracticaldev/dev.to/pull/3808 %}
{% github https://github.com/thepracticaldev/dev.to/pull/3818 %}

{% user feruzoripov %}

This is how great software happens.

![](https://media1.tenor.com/images/3ed84016385a06560957920423fea2f8/tenor.gif?itemid=4088269)
To Code, or Not to Code on Vacation: That is My Question
Tags: discuss, webdev, beginners, help
Published: 2019-08-24 19:17:17

---
title: To Code, or Not to Code on Vacation: That is My Question
published: True
description: I coded on vacation, and now I feel guilty about it. What tips do you have?
tags: #discuss #webdev #beginners #help
---
I just got back from a 2 week vacation. This was my first long vacation since I really have sunk my teeth into passion projects, and I found myself coding more than I anticipated. 

Personally, I *plug in* when I code. I don the oversized headphones, listen to my focus music of choice, and zone out trying to solve problems. When I am home, I rarely set time limits for myself, and I continued that pattern on vacation. Something to note, I find coding therapeutic. I get to stretch my creativity, and I’m a bit of an introvert so coding gives me a chance to recharge from social interactions that I can find draining at times. 

Inadvertently on this vacation, I isolated myself from my friends and family.

![Know that I'm not happy about it](https://media3.giphy.com/media/xUOwGlB5HeAI0yG54A/giphy.gif?cid=790b7611f2ed4764f06cff5741cbeecec9a554eddcb6d555&rid=giphy.gif) 

While everyone seemed content and made no mention of my absence, I could not help but feel like I was missing out on the intention of *vacation*.  Instead of immersing myself in my book or chatting with people in lawn chairs, I spent time in front of my computer screen. Really nothing had changed from my day to day activities other than the setting and that I was working on fun problems by choice. Now that I am back, I am regretting limiting my screen time. I think there is this notion that vacation is supposed to be about reconnecting with people, strengthening existing relationships while also finding some *me time* away from the blue screen light. I cannot help this gnawing feeling that I missed out on some valuable parts of my vacation.

So my questions to the community, do you code while on vacation? If so, when do you find time to code? How do you feel when you code around people? 

Selfishly, I do not want to stop coding when I’m on vacation. So, what tips do you have to help avoid my guilty feelings on future trips? 
![I feel so bad about it](https://media3.giphy.com/media/wHd6y7EUkSKxpaEBbA/giphy.gif?cid=790b761159881bd04b9c5018ff41f874a096a58c3631cefe&rid=giphy.gif)
Fully Accessible Accordion with HTML & CSS(no JS)
Tags: html, css, semantic, accessible
Published: 2019-08-24 17:31:49

---
title: Fully Accessible Accordion with HTML & CSS(no JS)
published: true
description: how to create an accordion using only HTML & CSS(no JS) using semantic markup
tags: html, css, semantic, accessible
---

Recently I came across `details` and `summary` HTML tags. Their basic use is to create an accordion-type UX out of the box.

I have previously worked on creating an accordion-like structure using `div` and `span` and JS to handle opening and closing. On the JS there is logic to keep track which element is open if the user clicks on another one close all and open clicked one. Over time this can get complicated.

Having discovered these tags, I worked a prototype to achieve the functionality with plain HTML & CSS

Let's go over the steps for that

`details` tag is the parent, where the below 2 tags are enclosed.
`summary` tag is where the headline users see by default(like a question for FAQ's) is held.
`p` or `div` can be the response(answer for FAQ's) or more details around the headline.

Every browser supports the accordion-style arrow out of the box. The good part here is that using CSS we can style it however we choose.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ovmpr3bdtauaizikgt6u.png)

Now, let try to style it how we choose. I decided to do see if I can replicate the pattern we have at PayPal.

To do this, we first need to hide the browser's default `marker`

```css
summary::-webkit-details-marker {
  display: none;
}
```

Next step, in my case, add styles for open & close arrows.

```css
// creates the close arrow
summary:after {
  content: "";
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  transition: all 0.3s ease-out;
  border-bottom: 1px solid #cbd2d6;
  border-right: 1px solid #cbd2d6;
  float: right;
}

// creates the open(inverted) arrow.
details[open] summary:after {
  content: "";
  transform: rotate(-135deg);
  margin-top: 8px;
}
``` 


On the `details` tag, there is also an option to have it open by default. Use the `open` attribute to do that. Goes like `<details open>`.

{% codesandbox accordion-with-details-tag-vqwsb %}

Other than Edge & IE(of course) all other [browsers support these tags](https://caniuse.com/#search=details).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/4rybcsci0hoiks60blwd.png)

This is basic(getting starter) guide. For more detailed and advanced examples I recommend [this article](https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/) on CSS Tricks.
What Are Your Thoughts on Self-Comparison?
Tags: discuss, career, productivity, mentalhealth
Published: 2019-08-24 17:20:05

---
title: What Are Your Thoughts on Self-Comparison?
published: true
description: During one of the online courses I have taken, there was a discussion about the social comparison theory.
tags: discuss, career, productivity, mentalhealth
---

It’s effortless to compare one’s self to others. I struggled with it in the past and continuously had to remind myself that my day/life cannot measure up to someone else’s day or life.

During one of the online courses I have taken, there was a discussion about the social comparison theory.

The theory states that we determine our own social and personal worth based on how we stack up against others we perceive as somehow faring better or worse. It can be useful if we compare ourselves to others as a way of fostering self-improvement and motivation if we have a positive image of the self. However, because we are continually evaluating ourselves and others, these evaluations can also promote judgmental, biased, competitive, or superior attitudes.

In fact, some researches have shown that people who often compare themselves to others report negative feelings of deep dissatisfaction, envy, guilt, and remorse, which means that by comparing yourself with others you can ruin your self-esteem!

And comparing yourself with other influencers, for example, on Twitter or Instagram might make you believe that they are leading perfect lives. In reality, people rarely share their hard days on social media.

I hope this mini-post can ignite a discussion in the comments, as I would love to hear your thoughts on self-comparison.

**Have you compared yourself to the people you follow on social media? Do you think they have a better life than you? Why?**

---

_Ilona helps women developers to succeed in their careers without stress via her weekly newsletter. Sign up and [grab her networking cheat sheet as a bonus here](https://www.ilonacodes.com/networking-cheat-sheet)._
Adding ads to OpenSource projects
Tags: discuss
Published: 2019-08-24 17:07:44

### Hi all,###

I'd started my day as always and, when I was checking Twitter, I saw a post with an image showing somebody on github running an experiment about new ways to fund projects.

> **What's the experiment?** Whenever standard 14 is installed, we'll display a message from a company that supports open source. Currently, these are Linode and LogRocket. The sponsorship pays directly for maintainer time. That is, writing new features, fixing bugs, answering user questions, and improving documentation.

I understand how complicated is receiving support to OSS, specially when nobody wants to support your project but there are lot of downloads. In my opinion, there should be better ways to earn money instead of showing ads on terminals, we just have to go deeper and find it out.

What do you think? Do you have a better idea to fund projects?

Here's the [issue](https://github.com/standard/standard/issues/1381) on github if you're interested in check it out.