teleren/devto huggingface dataset:
🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭
Tags: javascript, node, webdev, beginners
Published: 2020-08-16 17:17:18

Hello ! 🧑‍🌾

Promises are available since ES2015 to simplify the handling of asynchronous operations. 

Let's discover 2 Promises and their differences:

* [Promise.allSettled(iterable)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled)
* [Promise.all(iterable)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)

Both of them take an `iterable` and return an `array` containing the fulfilled Promises.

❓ So, __what is the difference between them__?

## Promise.all() 🧠

The __Promise.`all()`__ method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises. 

![Promise all](https://dev-to-uploads.s3.amazonaws.com/i/loq7cd72u055wl92yq2u.png)
<figcaption>All resolved</figcaption>

As you can see, we are passing an array to Promise.all. And when all three promises get resolved, Promise.all resolves and the output is consoled.

Now, let's see __if one promise is not resolved__, and so, if this one is reject. What was the output ? 🛑

![Promise all failed](https://dev-to-uploads.s3.amazonaws.com/i/gcpmjldpgbfc8xgqgh10.png)
<figcaption>1 failed</figcaption>

`Promise.all` is rejected if at least __one of the elements are rejected__. For example, we pass 2 promises that resolve and one promise that rejects immediately, then `Promise.all` will reject immediately. 

## Promise.allSettled() 🦷

Since ES2020 you can use `Promise.allSettled`. It returns a promise that __always resolves__ after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

For each outcome object, a *`status`* string is present :

* `fulfilled` ✅
* `rejected` ❌ 

The value (or reason) reflects what value each promise was fulfilled (or rejected) with.

 Have a close look at following properties (*`status`*, *`value`*, *`reason`*) of resulting array.

![allSettled](https://dev-to-uploads.s3.amazonaws.com/i/brvijnemnpmm9qvauhvp.png)

### Differences 👬

* __Promise.all__ will reject as soon as one of the Promises in the array rejects.
* __Promise.allSettled__ will never reject, it will resolve once all Promises in the array have either rejected or resolved.

### Supported Browsers 🚸
 
The browsers supported by JavaScript __Promise.allSettled()__ and __Promise.all()__  methods are listed below:

* Google Chrome
* Microsoft Edge
* Mozilla Firefox
* Apple Safari
* Opera

Cheers 🍻 🍻 🍻 

If you enjoyed this article you can follow me on [Twitter](https://twitter.com/TrustedSheriff "TrustedSheriff") or here on [dev.to](https://dev.to/viclafouch) where I regularly post bite size tips relating to HTML, CSS and JavaScript.

{% link https://dev.to/viclafouch/github-profile-the-right-way-to-show-your-latest-dev-articles-bonus-398m %}

{% link https://dev.to/viclafouch/cancel-properly-http-requests-in-react-hooks-and-avoid-memory-leaks-pd7 %}
Beginners Guide to web development   Part 1 
Tags: codenewbie, 100daysofcode, webdev
Published: 2020-08-16 17:10:50

Brand new to programming and want to become a web developer?

 Here some guide to excel in your web development journey according to Cat McGee (@catmcgeecode):

Step 1. Get yourself a text editor that you like

I know you want to dive right into coding, but you need to know where to put this code first!.There tons of text editors there like sublime 3 Atom e.t.c but i recommend using VScode.
The industry favourite is VSCode and it's great for beginners too https://t.co/BeuQJ0TlAR

Step 2: Learn HTML

There are plenty of resources and quick-start tutorials like on W3Schools, FrontendMasters but I recommend that you have a broad learning of HTML (it also helps with accessibility!)

Free Codecademy course: https://t.co/GrFm3PaJvO

Step 3: Learn CSS

You could spend years learning CSS, and most web devs are still learning and discovering something new every day. For now, you want to learn how to connect a stylesheet & know basic styling.

Free Codecademy course: https://t.co/MnkDMboB6M

Step 4: Build!

 Now you know enough to build something, so build something! You may still feel like you know nothing, but feel free to search the internet as much as you need to. We all do. 

If you're stuck for ideas, Geeks for Geeks has some great ones https://t.co/NPCM2OoT2Z


If you have Questions suggestions leave a comment and i will give response to the best of my abilities
Where do I go from here?
Tags: help, webdev, career, computerscience
Published: 2020-08-16 17:06:15

Hey there! I'm a Computer Science student currently in my third year. I've always wanted to be a web developer and I started on it the day I began college. I'm done with

1. HTML/CSS (Sass,Variables,Responsive)
2. Web components
3. Javascript
4. ReactJS , SvelteJS , ElectronJS  
5. NodeJS (Express - Rest APIs and SSR Apps,Authentication,CLI Tools)
6. Golang (Fiber,Cobra)
7. MySQL , MongoDB , CouchDB , PostGREs
8. Python,Java,C/C++ for problem solving

Where do I go from here? I wanted to gain some exposure working on the production side of things but been having difficulty getting an internship. Can someone guide me through what are the technologies that I should tackle next?

Also can someone guide me through the lifecycle of building a complete web application that is secure , stable , scalable and maintainable? i.e an Application that if I make , I can be proud to sell to a potential client.
Top 5 Cloud Server Management Application
Tags: php, servermanagement, cloud, controlpanel
Published: 2020-08-16 17:05:58

{% youtube G7R_t56VB18 %}

Managing VPS, AWS Ec2, Google Cloud Machine, or any other VPS to host PHP apps could be painful. Use SAAS based cloud server management applications to deploy and manage your application more efficiently.

Here are my top 5 cloud-based easy to manage server control panel to manage PHP based web applications.

1. [RunCloud](https://runcloud.io/r/nmGeKGvQeb6V)
2. [Serverpilot](https://serverpilot.io/a/d9d1932d4ca1)
3. [Forge](https://forge.laravel.com/)
4. [Moss](https://moss.sh/?ref=9c0c3e770732)
5. [Ploi](https://ploi.io/register?referrer=PZH...)

If you got your own favorite please share in the comment.

thanks
Deploying Gatsby on Netlify 💻
Tags: gatsby, webdev, beginners, javascript
Published: 2020-08-16 16:58:15

## How can you deploy Gatsby on Netlify? 🤔

1. Go to <a href='https://www.netlify.com'>Netlify</a>
2. Singup or login via github/gitlab or your choice 😅. I will be login via github.
3. Click `New Site` from Git
    <img src='https://i.imgur.com/p1KJrMl.png' alt='New Site Gatsby' />
4. Select Github or any option
    <img src='https://i.imgur.com/ESbkKhu.png' alt='New Site Gatsby' />
5. Give access to netlify for selected Repos
    <img src='https://i.imgur.com/RoGdyEx.png' alt='Install Netlify' width={50}/>
6. Pick a repository (example: `gatsby-intro`)
7. Click on repo name with right accordian button
    <img src='https://i.imgur.com/HMrTaYh.png' alt='Select Project from github' />
8. Click on Deploy Site
    <img src='https://i.imgur.com/f5UjQ5W.png' alt='Deploy Site' />
9.  You can check the building status here
    <img src='https://i.imgur.com/qmmevZ3.png' alt='Check Build status' />
10. Once its get deployed, you will see published status ✅ or ❌

You can also deploy specific branch in `Netlify`. Once you create pull request it will automatically create the building part.

URL of `Netlify` is different, that we can changes from general settings in change site name.
MagicLeapでTextMeshProのSpriteAssetが片目が描画されないときに確認したいこと
Tags: unity3d, magicleap
Published: 2020-08-16 16:51:04

とりあえず対症療法だけどメモ

ProjectSettings > XR Plug-in Management > MagicLeapSettings にあるForceMultipassにチェックを入れることでとりあえず描画できる

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

ただSinglepassStereoRendeeringのほうがパフォーマンス的にはよいのでできればTextMeshProで利用しているマテリアルをSinglepassに対応したものに差し替えたほうが良いかも
Deploy to firebase without external action
Tags: actionshackathon
Published: 2020-08-16 16:47:47

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


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)
This github action template allow you to deploy you react app to Firebase hosting without using external action.

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

### Yaml File or Link to Code

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

{% github https://github.com/trthong95/url-shortener %}

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)
Sidekiq Batch Complete Callback
Tags: ruby, sidekiq, rails, sidekiqbatch
Published: 2020-08-16 16:36:29

## Scenario
This week, I got stuck with an issue where race condition was happening between jobs completion and **complete** callback of Sidekiq batch. One more situation added to this was manually retrying the jobs(**don't take me wrong but my job logic was in such a way that i need to do it**) instead of the sidekiq retry options. 

I assume the race condition was because of mainly below 2 reasons.

* There were retry jobs in the queue but my complete callback has a limitation that it gets triggered if at least the jobs in the batch have executed at least once. 
* The other thing was the retry jobs weren't executed in the same batch. 


## Solution

So started digging for the solution, I found one, That made me quite exciting as it was much simple solution, where one can open the batch at any time and add the jobs in the same batch like extending the batch by adding the jobs into it. 

So basically this does the complete callback to be triggered when all the retry jobs being completed and the whole problem looked very simple like making a cup of coffee. Thought of sharing over here, So if someone gets stuck the same can find a solution right way.

### Creating the Sidekiq Batch and adding jobs into it
```
batch = Sidekiq::Batch.new
batch.description = "Upload the spreadsheet"
batch.jobs do
 SpreadsheetWorker.perform_aysnc(data, batch.bid)
end
```

### Scheduling the job and adding retry jobs in the batch
```
class SpreadsheetWorker
  include Sidekiq::Worker

  def perform(row, batch_id)
   begin
   # Do your stuff
    
   rescue
    batch = Sidekiq::Batch.new(batch_id)
    batch.jobs do
      SpreadSheetWorker.perform_aysnc(row, batch_id)
      # SpreadSheetWorker.set(queue: 'batch_callback')perform_async(row, batch_id)
    end
   end
  end
end
```
One more interesting or flexibility that Sidekiq gives to us is, Overriding the Sidekiq queue and assigning to different queue when scheduling the job like below.

```
SpreadSheetWorker.set(queue: 'batch_callback')perform_async(row, batch_id)
```

This makes my retry jobs to execute in a different queue to save us a time to complete the batch and trigger callback instead of waiting in the same queue as previously scheduled jobs and wait for its turn to be get executed.

So this was for today. Will meet you again with one more issue I encountered next week.

Source: [Github](https://github.com/mperham/sidekiq/issues/2250)
 
_**Auf wiedersehen!!!**_
Dart & Flutter Easy Wins 15-21
Tags: dart, flutter
Published: 2020-08-16 16:32:04

---
title: Dart & Flutter Easy Wins 15-21
published: true
description: Easy ways to improve your Dart & Flutter code. Published weekly.
tags: dart, flutter
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://codewithandrea.com/tips/dart-flutter-easy-wins-15-21/
series: Dart & Flutter Easy Wins
---

I recently started a series of [daily tweets](https://twitter.com/search?q=from%3Abiz84%20Easy%20Win&src=typed_query&f=live) about easy ways to improve your Dart & Flutter code. I called this **Easy Wins**. 

To make these easier to find, I'm sharing 7 tips every week here.

## 15. Need to shallow copy a list or collection? Use the spread operator. 

More info here: [Clone a List, Map or Set in Dart | StackOverflow](https://stackoverflow.com/questions/21744480/clone-a-list-map-or-set-in-dart)

![Need to shallow copy a list or collection? Use the spread operator.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/015.shallow-copy.png)

## 16. Need to invoke a callback but only if it's not null? Use the "?.call()" syntax.

![Need to invoke a callback but only if it's not null? Use the "?.call()" syntax.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/016.callable-functions.png)

## 17. Implement a "call" method in your Dart classes to make them callable like a function.

![Implement a "call" method in your Dart classes to make them callable like a function.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/017.callable-classes.png)

## 18. Want a more ergonomic API for working with dates and times? Use extensions.

This API and many more are available in the [dartx package](https://pub.dev/packages/dartx).

![Want a more ergonomic API for working with dates and times? Use extensions.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/018-duration-extension.png)

## 19. Need to execute multiple Futures concurrently? Use Future.wait.

![Need to execute multiple Futures concurrently? Use Future.wait.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/019-future.wait.png)

## 20. Want to selectively import some APIs in a package? Use show & hide.

![Want to selectively import some APIs in a package? Use show & hide.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/020.show-hide.png)

## 21. Use "import as" to avoid name collisions with other packages.

![Use "import as" to avoid name collisions with other packages.](https://codewithandrea.com/tips/2020-08-16-dart-flutter-easy-wins-15-21/images/021.import-as.png)


More tips coming next week. [Subscribe via RSS](https://codewithandrea.com/rss.xml) for updates!

Happy coding!
Loading multiple models
Tags: android, vrgame, devlog, opengles2
Published: 2020-08-16 15:16:09

# The Current Way
Prior to this development, if I wanted to load multiple different models I had to load each one in the <code>VrRenderer</code>s <code>onSurfaceCreated</code> method and then pass the vertices, normals and indices to a <code>GenericGameObject</code>, there is nothing majorly wrong with this but I wanted to make the process a bit easier. 

# The New Way
## model data
First I created a dto class (data transfer object) called <code>ModelData</code> which is used to pass the vertices, normals, UVs and indices for a 3D model between other classes. I changed the <code>ObjectFileParser</code> to return the parser data as a <code>ModelData</code> object and similarly I changed the <code>GenericGameObject</code> to take in a <code>ModelData</code> object.
## Loading all the models
To load the model data I created a <code>ModelLoader</code> class which parses all the available models object files in its <code>init</code> function and puts the resulting <code>ModelData</code> objects into a <code>HashMap</code> with the file name as the key. 
The <code>ModelLoader</code> class can then be used to get the <code>ModelData</code> object for any already parsed model.
In the event that a requested model is not in the <code>HashMap</code> then a default cube is returned. 

## Using the <code>ModelLoader</code>
I create an instance of the <code>ModelLoader</code> class in the <code>MainActivity</code>s <code>onCreate</code> method and pass it via the <code>VrGlSurgaceView</code> to the <code>VrRenderer</code> so I can generate <code>GenericGameObject</code>s with any of the parsed model data.
In anticipation of adding a tile based system into the game in future, I created a few basic 20x20 tiles which I added to the <code>ModelLoader</code> to be used in the game.

![New Models in the scene](https://dev-to-uploads.s3.amazonaws.com/i/z0armflgogfjzrfelhka.png)

# Conclusions
This development is a stepping stone to implementing a tile map style world and as such is only a small change from the previous version.
Now that I have a basic environment in the game, I have the following observations:
* The SKyBox texture does not make sense with the scene now being all above 0.0 on the y axis.
* Each "tile"s are one single colour each which is not ideal.
* Similarly the floor is as reflective as the other parts of the models, again this is not what I want. 
* The specular lighting on the models is in a very different place from one eyes camera to the other, this indicates to me that the distance between each camera is too great, but I shall need to trial this in my VR headset to confirm.
* A small observation is that the light is currently coming from directly above the player at the moment and it would be nice to have this orbiting the scene and maybe changing colour at "Dusk" and "Dawn".

Until next time, the source code at this point in the project can be found [here](https://github.com/longevity-software/AndroidVrGameDemo/releases/tag/B1.7).
How to create a custom file upload button
Tags: html, css, javascript, beginners
Published: 2020-08-16 16:13:14

---
title: How to create a custom file upload button
published: true
description: creating a custom file upload button
tags: #html #css #javascript #beginner
cover_image: https://cdn.pixabay.com/photo/2020/04/30/15/34/code-5113374_1280.jpg
---

I find the default HTML file upload button rather ugly. Annoying enough, there seems to be no way to style it directly. Here is how I created a custom file upload button.

### 1. Use a label tag and point its *for* attribute to the *id* of the default HTML file upload button

```html
<!--default html file upload button-->
<input type="file" id="actual-btn"/>

<!--our custom file upload button-->
<label for="actual-btn">Choose File</label>
```

By doing this, clicking the **label element** in the browser toggles the default HTML file upload button (as though we clicked it directly). 

The output of the above code is below. As you can see, we only have a **Choose File** text (from the label element) a few pixels to the right of the actual upload button. 

We can click the **Choose File** text, and it will toggle the upload window (Click it and see)

{% codepen https://codepen.io/wizardofcodez/pen/oNxxJeV %}

### 2. Style the label element and hide the default HTML file upload button

We hide the default HTML file upload button in the browser by adding the **hidden** attribute to the tag like so

```html
<input type="file" id="actual-btn" hidden/>
```

Now we style the label element to look more like a button.

```css
label {
  background-color: indigo;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}
```

Now we have this beautiful custom button, which actually works like the original file upload button:

{% codepen https://codepen.io/wizardofcodez/pen/dyMMwgx %}


At this point, we are done. But there is one more glitch to fix.

With the default file upload button, there is a ***no file chosen*** text beside the button (scroll up to the first codepen window), which gets replaced with the name of the file we will be uploading. Unfortunately, we don't get to see that with our custom button. How do we do that?

What I did was to include a **span tag (with an id of file-chosen)** right after our custom file upload button. 

In the javascript file, I listen to the ***change event*** on the original file upload button(which we have hidden). A **file object** is returned which contains the details(such as name, file size etc) of the file uploaded.

Then I set the **text content** of the **span element(with the id of file-chosen)** to the **name** property of the file object returned. The final result is below. Test it out.

{% codepen https://codepen.io/wizardofcodez/pen/XWddObO %}

Kindly leave your comments and questions down below
Installing without Fear
Tags: linux, bootloader
Published: 2020-08-16 15:32:10

Note to self:

If you want to make sure some nice GNU/Linux installer does not touch certain drives just run
`echo 1 > /sys/block/sdX/device/delete` in a **root** shell and the drive will vanish from the system.

Shamelessly stolen from: https://askubuntu.com/questions/554398/how-do-i-permanently-disable-hard-drives
Make A Beautiful Github Profile With A Readme File
Tags: devops, github, beginners
Published: 2020-08-16 15:30:01

While I was browsing through some of the popular tech blogs and trends I usually follow as well as YouTube vids, I came across a few articles and videos on how to update your Github profile and modifying it with a lucrative look and some colors as well as introductions before showcasing your code contributions to the opensource world. Below is an example of my Github profile. You can feel free to use mine or this link to some of the most lucrative Github profiles as a template.

My profile:
https://github.com/chaddyc

List of Lucrative Profiles:
https://github.com/chaddyc/creative-profile-readme

How to create a profile README?

You can create a README.md file whenever you create a repository. To modify your profile on Github like the examples above you have to create a repository with the same name as your username and add a README.md file. The README.md file is where you make your configurations and design your profile look.
If you already have a project in a repository named the same as your username and is interested in setting up a profile-level README, then I would recommend either renaming that repository or remodifying the existing repository’s README based on what makes the most sense in your particular situation.

Furthermore as mentioned above is a repository that was originally created by coderjojo that lists a few excellent Github profile designs if you want to use any of them as a template to modify your own Github profile and create a lucrative introduction for your Github profile.
Well Defined Learning Problem
Tags: datascience, machinelearning, 100daysofcode, asquero
Published: 2020-08-16 15:18:22

A computer program is said to learn from experience E with respect to some class of tasks T and performance measure P, if its performance in tasks T, as measured by P, improves with experience E.

#Features in a Learning Problem
* The class of tasks (T)
* The measure of performance to be improved (P)
* The source of experience (E)

#Examples of Well Defined Learning Problem
##Checkers Learning Problem
* Task (T): Playing Checkers
* Performance Measure (P): Percent of games won against opponents.
* Training Experience (E): Playing practice games against itself.

##Handwriting Recognition Learning Problem
* Task (T): Recognizing and classifying handwritten words within images.
* Performance Measure (P): Percent of words correctly classified.
* Training Experience (E): A dataset of handwritten words with given classifications.

##Robot Driving License Problem
* Task (T): Driving on public four-lane highways using vision cameras.
* Performance Measure (P): Average distance travelled before an error (as judged by a human observer).
* Training Experience (E): A sequence of images and steering commands recorded while observing a human driver.

*This tutorial is originally published at - https://www.asquero.com/article/well-defined-learning-problem/*

####Also Read -

**Different Types of Machine Learning Algorithms -** https://www.asquero.com/article/different-types-of-machine-learning-algorithms

**Advantages and Disadvantages of different types of machine learning algorithms -** https://www.asquero.com/article/advantages-and-disadvantages-of-different-types-of-machine-learning-algorithms

**Advantages and Disadvantages of Machine Learning -** https://www.asquero.com/article/advantages-and-disadvantages-of-machine-learning