teleren/devto huggingface dataset:
Create a Custom JavaScript Audio Player [Part 2] With Progress Bar
Tags: javascript
Published: 2020-07-30 09:28:09

---
title: Create a Custom JavaScript Audio Player [Part 2] With Progress Bar
published: true
description: In part 2 of our JavaScript audio player tutorial, we'll add some more features as a progress bar component which shows time elapsed, seek bar and next and previous buttons.
tags: JavaScript
---

Originally published [here on YouTube](https://youtu.be/_EDAEboZRMU).
(Give me a thumbs up and subscribe if you found this useful 🙏).

👉 Check out part one [here](https://dev.to/codebubb/create-a-custom-javascript-audio-player-with-playlist-visualizer-1agd)

👉 Get the source code here: https://github.com/codebubb/javascript-audio-player (checkout the master branch for starting point and progress--bar branch for the completed project

👉 The visualisations article on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

01:58 Refactoring original app
03:51 Progress bar elements
09:55 Styling 
12:32 Next / Previous Buttons
18:14 Timer (elapsed time)
21:52 Adding progress bar animation
26:08 Configuring progress as a 'Seek bar'
28:47 Play next track
30:29 Completed Project & Wrap-up

— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So in this follow up tutorial, we'll be adding some more features to our custom JavaScript audio player including a custom progress bar, next and previous buttons as well as adding a seek component to the progress bar and also a continuation feature that moves to the next song when the previous one has finished playing.

In the first tutorial we created a customised audio player but I hadn't really planned on having some of the features that were suggested (in particular the next/previous buttons) and to make life easier we'll start off by doing a bit of refactoring to get our audio player to work the way we'd like it to.

Then we'll move on to adding all of the progress bar elements via JavaScript so we don't need to add any more HTML to our basic placeholder for the app.

Then we'll update our styling for the new progress bar component and work on implementing the next and previous buttons.

Once the buttons are working the way we want them to, we'll create a method that will update the elapsed time for the currently playing audio file and add some animation to our progress bar.

With most of the hard work set up we'll look at creating the 'seek' functionality of the progress bar so that the user can navigate  between sections of the song and we'll add some events to make the next song in the playlist play after the current one has ended.

So I hope you find this follow up tutorial for our custom JavaScript audio player to be useful and don't forget to checkout the first tutorial and the rest of the Junior Developer Central web development tutorials here:
Appstore Connect API Golang Client code
Tags: appstore, go, openapi, appstoreconnect
Published: 2020-07-30 09:19:37

## Apple AppStore Connect API Go client code

Over the weekend, I was testing AppStore Connect API Client in Go.

Announced on [WWDC 2020](https://developer.apple.com/wwdc20/), Apple [published](https://developer.apple.com/sample-code/app-store-connect/app-store-connect-openapi-specification.zip) an OpenAPI specification for AppStore Connect API (more than 250 endpoint APIs ).

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

With [OpenAPI](https://github.com/OAI/OpenAPI-Specification/), I can generate Go client code for AppStore Connect API.

During this process, I experienced difficulties in getting the client code to work.
I realized that I could share my generated code to save others the same trouble.

You can find this Github project with the generated Go code along with instructions.
[AppstoreConnect-OpenAPI-Go](https://github.com/xr1337/appstoreconnect-openapi-go)

What you will find in the Github project:

- Generated Code for Go
- Command used to generate the client code ( in the Makefile )
- An example on how to use the generated code.
- An example on how to use Apple .p8 for JWT signing

## External tools and dependencies used

I used [OpenAPI generator](https://openapi-generator.tech/) to generate the client code.
[JWT-Go](https://github.com/dgrijalva/jwt-go) helped with signing JWT token for testing.

## What can you do with project

Some examples of services that can be automated are:

- User invitation automation
- AppStore release management
- Test Flight
- Certificate management

Hopefully the generated code will help you save time ( instead of manually coding each operation)

## Final Thoughts

If this project is useful to you, I appreciate if you could give it a [star](https://github.com/xr1337/appstoreconnect-openapi-go).
That would help me understand if I should invest more effort into it.
I plan to add in the future:

- More examples
- Automation code generation
- Create tag/release
Laravel 7 Ajax File Upload Example
Published: 2020-07-30 08:59:32

<!-- wp:paragraph -->
<p>Laravel 7 ajax file upload example tutorial. Here, you will learn how to upload file using jQuery ajax in laravel app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As well as how to upload files on MySQL database and web server folder with validation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When you work with any laravel e-commerce app. And want to upload product info in the file, invoice file, text file upload files using ajax with validation in laravel into the database and server folder.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So this tutorial will guide you step by step on how to upload file using ajax with validation in laravel.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Laravel Ajax File Upload Example Tutorial</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Follow the below following steps and uploading a file using ajax with validation in laravel app:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Step 1: Download Laravel New App</li><li>Step 2: Add Database Credentials</li><li>Step 3: Generate Migration &amp; Model</li><li>Step 4: Create Routes For File</li><li>Step 5: Generate Controller by Artisan</li><li>Step 6: Create Blade View For File</li><li>Step 7: Run Development Server</li></ul>
<!-- /wp:list -->
📊 Show your StackOverflow profile status on your readmes!
Tags: showdev, javascript, node
Published: 2020-07-30 08:58:46

Recently, I have made an API to [show your latest Medium articles in GitHub Readmes](https://github.com/omidnikrah/github-readme-medium), Now you can [show your StackOverflow profile status](https://github.com/omidnikrah/github-readme-stackoverflow) on your readmes by using my new project.

### Usage

Copy paste following markdown into your markdown content, and that's it. Easy Easy Tammam Tammam!

Change the `?userID=` value to your StackOverflow's username.

```md
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042)](https://stackoverflow.com/users/6558042/omid-nikrah)
```

[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042)](https://stackoverflow.com/users/6558042/omid-nikrah)
Firefox Relay (Beta)
Tags: firefox, relay, privacy
Published: 2020-07-30 08:56:38

## Wait is over for beta testers for firefox relay
* Firefox relay is a new service  by mozilla which offers a free(at least for now) Email forwarding by creating various aliases.It allows you to sign in with your firefox account and make aliases which will forward emails sent to those aliases to your own email address.This service is still in beta and you could only get access by signing up on the firefox relay website.
*   For now aliases are random combination of words and numbers which will be generated upon "create new alias" button.It allocates a simple button which allows you to stop or turn on email forwarding.The aliases generated are disposable  by clicking a simple "Delete" button.
* This service of mozilla is currently allowing to have an individual 5 aliases at a time.while we can delete any alias to generate a new one.

#### Its time for your thoughts on this service, so what do you think of this project.
Read CLI command output in VSCode
Tags: productivity, terminal, tutorial, vscode
Published: 2020-07-30 08:55:14

---
title: Read CLI command output in VSCode
published: true
description: 
tags: productivity, terminal, tutorial, vscode
---

VSCode can read from `stdin`. You need to use `-` flag to do it.

```sh
[command] --help | code -
```

Example:

```sh
node --help | code -
```
There will be 4 types of tanks in the game
Tags: gamedev, game, indiedev, 2d
Published: 2020-07-30 08:51:52

(Fast, Powerful, Basic and Electric)

Let's name the tanks?

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

Follow dev: https://twitter.com/PAPERTANKS2 https://store.steampowered.com/app/1213020/PAPER_TANKS
Top 9 eCommerce Mistakes to Avoid in 2020
Tags: ecommerce, industry, ecommercemistakes
Published: 2020-08-13 09:13:09

---
title: Top 9 eCommerce Mistakes to Avoid in 2020
published: True
date: 2020-07-30 08:47:47 UTC
tags: ECommerce,Industry,eCommercemistakes
canonical_url: https://www.botreetechnologies.com/blog/9-costly-mistakes-you-should-avoid-when-starting-an-ecommerce-business
---

![common ecommerce mistakes to avoid](https://www.botreetechnologies.com/blog/wp-content/uploads/2020/07/ecommerce-mistakes-for-business.jpg)

Setting up an [eCommerce store](https://www.botreetechnologies.com/ecommerce-app-development) can be an exciting process. However, success is not always guaranteed, regardless of the comprehensiveness of your business plan. The e-commerce space is extremely dynamic, and what worked yesterday may not deliver the goods today. In simple terms, you should be careful and ready to learn before launching yourself into the online business trade.

While it is true that the best kind of learning is through one’s own mistakes, avoiding them altogether is better.

###Read more: [7 Reasons of Choosing Shopify for Online Ecommerce Store](https://www.botreetechnologies.com/blog/shopify-ecommerce-store-development)

Here are common mistakes to avoid when starting an online business:

**1. Not consulting experts**

As stated above, you cannot say you know the e-commerce space if you are not a true enthusiast of the digital corporate world. The market dynamics change so fast that you may fail to follow an idea you learned just a year ago. The best thing to do is to consult e-commerce growth specialists, such as [smart business](https://www.smartebusiness.co.uk/) for useful insights into the dynamics of the industry you are eyeing.

**2. Choosing the wrong platform**

How you select an e-commerce platform can make or break your business. Don’t go for a platform merely because it worked for someone else or because it has many users. Popularity doesn’t automatically translate to success. You need to understand your requirements relative to what the platform has to offer. The needs of your target audience should dictate your choice of a [platform for your ecommerce store](https://www.botreetechnologies.com/blog/why-is-shopify-development-trending-for-ecommerce-and-online-stores).

The post [9 Costly Mistakes You Should Avoid When Starting an ECommerce Business](https://www.botreetechnologies.com/blog/9-costly-mistakes-you-should-avoid-when-starting-an-ecommerce-business) appeared first on [BoTree Technologies](https://www.botreetechnologies.com/blog).
Free resources to learn web development
Tags: webdev, javascript
Published: 2020-07-30 08:42:48

I have listed enough resources to learn no-stack to full-stack.

Please add here if you guys found any useful resources.

###https://www.freecodecamp.org/learn

They accomplish this by creating thousands of videos, articles, and interactive coding lessons - all freely available to the public. They have included machine learning courses, interview preparations, frontend, backend, and more...

###https://www.codecademy.com/catalog/all

Codecademy provides free and paid courses which I found really useful for getting started.

###https://www.sololearn.com/Courses/

Some of us may be heard this site, I used to learn basics from their mobile application years back. They have covered all programming languages and quizzes each.

###https://javascript30.com/

This covers javascript fundamentals after their beginner level. Personally I found this to get to know more about vanilla javascript, which is really more important.

###https://scrimba.com/allcourses

The most favorite way of learning I experienced is scrimba courses. They provide advanced interactive learning while watching the course, play with mentors code on go. They cover mostly everything on the frontend.
Definitely check it out.

{% github sasidharank/sasidharank %}


Don't forget to follow me on twitter - https://twitter.com/sasiKdharan

Disclaimer - I am not promoting any of these sites.
An easy way of accessing elements of a webpage in browser
Tags: javascript, beginners
Published: 2020-07-30 08:41:40

Many times when we’re writing JavaScript code, we want to quickly test if some element on the webpage is present or not or count the list of elements displayed.
For example,

**To count the number of jobs displayed:**

```js
document.querySelectorAll('.job-item').length
```

**To get the text of the button:**

```js
document.querySelector('.btn').innerHTML
```

But it's tedious to type `document.querySelector` or `document.querySelectorAll` every time to do something.

So Chrome developer tools provide an easier way.
Instead of `document.querySelector` we can use `$` and instead of `document.querySelectorAll` we can use $$.

So no more need of typing the long text, just use `$` or `$$` and you’re done.

Check out the below gif to see that in action

![Trick](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/f4415cc7727defcff63bf65b0ac6dddf19541382/trick.gif)

**Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox [here](https://yogeshchavan.dev).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)
Acceleration in the usage of VR Meetings and Conferences due to      
COVID-19
Tags: vrmeetings, vrconferences, covid19, accelerationinvrmeetings
Published: 2020-07-30 08:41:14

We all know that in Business people to people interaction is imperative. Virtual Reality helps in conducting business meetings through VR by eliminating the cost of travel and the best part is we have our colleagues by our side. It not only gives a feeling of walking into a conference but also gives an option of giving a presentation or watching a product demo.

Link to Report: https://www.queppelin.com/virtual-reality-meetings-platform-usage.pdf
Monitoring and Performance Wrap Up - July 2020
Tags: monitoring, performance, bestofdev
Published: 2020-07-30 08:35:35

Hi! I'm Helen, one of your friendly mods looking after the #monitoring and #performance tags. 

At the end of each month, I'll be showcasing some of the great posts, projects, and insights from the Dev community. 

-------------------------

Our first post this month is from [Cédric](https://dev.to/cfabianski) from the [Bearer.sh](https://dev.to/bearer). This post tells the story of rearchitecting with performance in mind.  Sometimes the best solution at the time isn't the best solution forever. 

--------------------------

{% link https://dev.to/bearer/how-rust-lets-us-monitor-30k-api-calls-min-2n30 %}

---------------------------

[Basti](https://dev.to/somedood) returns to the wrap up for a second month with two more posts on "Making the Most out of Asynchronous JavaScript". Check them out for top tips on ES6 promises and async functions.


--------------------------

{% link https://dev.to/somedood/best-practices-for-es6-promises-36da %}

---------------------------

Next up, [Prasanjit](https://dev.to/prasanjit) in their first post here on Dev tackles how to manage forms in React and keeping them performing well as your app scales.

-------------------

{% link https://dev.to/prasanjit/managing-react-forms-efficiently-at-scale-194i %}

---------------------------

[Giancarlo](https://dev.to/gc_psk) from the Angular team then writes about async rendering - the process of rendering items on screen is scattered so that the browser won't block until all items have been rendered.

-----------------------------

{% link https://dev.to/angular/angular-async-rendering-with-a-single-rx-operator-4d6d %}

---------------------------

Sticking with Angular, [Natalia](https://dev.to/anfibiacreativa) then writes about building with Angular, Scully, and super-fast static HTML rendering. Natalia is also participating as a trainer in the upcoming [Angular conference](https://ngconf.co/)


--------------------------


{% link https://dev.to/anfibiacreativa/a-documentation-site-with-angular-and-scully-3aam %}

---------------------------

[Py](https://dev.to/pyricau) is up next with two posts on Android vitals - an initiative by Google to improve the stability and performance of Android devices. Check out both posts for more on tracking performance in production apps.

---------------------

{% link https://dev.to/pyricau/android-vitals-what-time-is-it-2oih %}

---------------------------

Our last post this month is from [Vani](https://dev.to/svaani) who has been investigating the performance of JavaScript holey arrays. They take more steps than a packed array causing performance differences. Check out the post, and the comments for more.

--------------------------

{% link https://dev.to/svaani/performs-better-than-array-n-reports-attached-f0b %}


----------------------------



--------------------------

That's all for this month! Check out the [#monitoring](https://dev.to/t/monitoring/top/month) and [#performance](https://dev.to/t/performance/top/month) tags for more and I'll see you next month for another wrap-up.
Particles websites templates and samples
Tags: showdev, javascript, html, webdev
Published: 2020-07-30 08:31:00

I have started creating some particles animations related templates giving a simpler starting point for adding those animations to your websites.

You can find them here

{% github https://github.com/tsparticles/templates %}

If you have some cool website with these animations feel free to add a pull request.

I'm trying to publish templates for every JavaScript framework supported by [tsParticles](https://github.com/matteobruni/tsparticles) (Vanilla, React, VueJS, Angular, Preact, Inferno, Svelte, jQuery) so everyone can have a template ready to be used.

The first template added is a simple authentication form

![Auth form](https://dev-to-uploads.s3.amazonaws.com/i/6881ll6dexkyc05racme.png)

For now is ready for Vanilla Javascript, React, VueJS and Angular

{% github https://github.com/tsparticles/auth-template %}

{% github https://github.com/tsparticles/react-auth-template %}

{% github https://github.com/tsparticles/vue-auth-template %}

{% github https://github.com/tsparticles/angular-auth-template %}
Multiple Image Upload in Laravel 7.x, 6
Published: 2020-07-30 08:28:47

Laravel 7, 6 multiple image upload with preview example tutorial, you will learn how to upload multiple images with a preview into a database and folder in laravel apps.

When you developing multiple image upload in laravel app. At that time, want to display a preview of each image before uploading it to the database and folder in laravel.

So this multiple image upload in laravel 7 will guide you step by step on how to upload multiple images with preview in laravel. And how to validate multiple image upload in laravel before uploading.


### Laravel 7.x Upload Multiple Images with Preview Example

Just follow below following steps and implement multiple image upload in laravel app. And display preview multiple images in laravel:

1. Install Laravel App
1. Add Database Details in Multiple Image Upload App
1. Generate Migration & Model
1. Add Route
1. Create Controller & Methods
1. Create Blade View
1. Run Development Server


Read full post here [https://www.tutsmake.com/laravel-7-6-upload-multiple-image-preview-tutorial/](https://www.tutsmake.com/laravel-7-6-upload-multiple-image-preview-tutorial/ "https://www.tutsmake.com/laravel-7-6-upload-multiple-image-preview-tutorial/")
Git Explorer at PWA Store!
Tags: productivity, javascript, github, git
Published: 2020-07-30 08:03:22

My second PWA app which I submitted a month ago is now approved, Go and check it out and make sure to FOLLOW it.

<a href="https://www.linkedin.com/posts/gaurav-singh-154348191_git-explorer-activity-6694476336339140608-W0hQ">LinkedIn</a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8vl1gia399u39m15pai.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2218pkxr4bjpm1pa2yf7.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/90avttdv0icoa5m9suxz.png)
diff and patch explained
Tags: github, git, python, beginners
Published: 2020-07-30 07:57:58

diff and patch are the useful commands which help in updating the file with current changes.
* **diff** tells the difference between two files 
* **Patch** is the difference of two files conceptually but as for command patch updates the file with given changes

Let's create a file demo.py with a command _nano demo.py_ with a print statement inside.
``` print(hello world) ```
If we execute demo.py _python3 demo.py_ we will get an error
``` File "demo.py", line 2
    print(hello world)
    SyntaxError: invalid syntax ```
So in this case Let's make an other file _demo_fixed.py_ and correct the error. ``` print('hello world') ``` 
Now if we execute _demo_fixed.py_ file we get the output ``` hello world ```
Let's compare the both of files _demo.py_ and _demo_fixed.py_ to see the difference. ``` diff -u demo.py demo_fixed.py ```
we get the following changes 
``` --- demo.py	2020-07-30 12:35:50.200813874 +0500
    +++ demo_fixed.py	2020-07-30 12:35:35.144740070 +0500
    @@ -1,2 +1,2 @@
    -print(hello world)
    +print('hello world') ```

**-** means statement is deleted & **+** means the statement is added.
Let's write the changes to another file so we can update the changes with original file.
``` diff -u demo.py dem_fiexed.py > changes.diff ```
**>** writes the data & **<** reads the data

Now let's apply the patch or changes to our actual file
``` patch demo.py < changes.diff ``` If we execute the _demo.py_ file now ``` Python3 demo.py ``` we get ``` hello world ```

Finally we updated our _demo.py_ file with the given patch of changes.
------------------------------------------------------------
This is my first post so please let me know about the content and if you find it helpful please do appreciate.