teleren/devto huggingface dataset:
Creating web music player in Howler.js and JQuery
Tags: jquery, howlerjs, tutorial, javascript
Published: 2021-07-07 10:00:40

Today we will learn with you how to create a simple music player in Howler.js and JQuery libraries. I recommend howler.js if you want to put a song on your website. Let's get to work! We can write these codes in our HTML file:
```html
<!DOCTYPE html>
<html>
	<head>
		<title>Web Music Player</title>
		<script src="https://unpkg.com/howler@2.2.3/dist/howler.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<body>
		<script src="./sound.js"></script>
		<button id="play">Play</button> <!--Play button-->
		<button id="pause">Pause</button> <!--Pause button-->
		<button id="voladd">Vol+</button> <!--Add volume button-->
		<button id="volmin">Vol-</button> <!--SUbtract volume button-->
	</body>
</html>
```
In Howler.js we write the song file and the volume:
```js
var howler = new Howl({
   src: ['./auf.mp3'], // file name
   volume: 0.5 // volue
});
```
We will add functions in JQuery to the keys written in our HTML file above.
```js
$(document).ready(function(){

   $("#play").on("click", function(){}); // this function for play button
   $("#pause").on("click", function(){}); // this function for pause button
   $("#voladd").on("click", function(){}); // this function for add volume button
   $("#volmin").on("click", function(){}); // this function for subtract volume button

});
```
Now we will combine the code written in Howler.js into our file where these JQuery codes are written and attach several methods of Howler.js to the functions written in JQuery for our music player.
```js
$(document).ready(function(){

   var howler = new Howl({
      src: ['./auf.mp3'], 
      volume: 0.5 
   });

   $("#play").on("click", function(){
      howler.play(); // this method for playing music
   });
 
   $("#pause").on("click", function(){
      howler.pause(); // this method for pause music
   }); 

   $("#voladd").on("click", function(){
      var vol = howler.volume(); // this method get currently volume music
      vol += 0.1; // adding volume
      if(vol > 1){
         vol = 1; // If the volume is greater than 1, it is equal to 1
      }
      howler.volume(vol) // This method determines the volume
   }); 

   $("#volmin").on("click", function(){
            var vol = howler.volume(); // this method get currently volume music
      vol -= 0.1; // subtracting volume
      if(vol < 0){
         vol = 1; // If the volume is smaller than 0, it is equal to 0
      }
      howler.volume(vol) // This method determines the volume
   }); 

});
```
You can see the results on [github](https://github.com/Jahongir2007/web-music-player). I hope you enjoyed this article.
Create a Website to sell online Courses at no cost with BuddyX  and TutorLMS
Tags: lms, wordpress, webdev, php
Published: 2021-07-07 09:54:50

Now with BuddyX theme support for free WordPress LMS plugin TutorLMS  . Checkout BuddyX theme features and TutorLMS Demo
https://buddyxtheme.com/demos/
https://lms-demos.buddyxtheme.com/tutorlms/
Port react tutorial in vuejs
Tags: vue, showdev, webdev
Published: 2021-07-07 09:38:07

To improve my vuejs skill I decided to take the tic-tac-toe game from the reactjs tutorial and re-implement it in vue 2.x + vuex

The result is available on Github under CC0 license, [here](https://github.com/mirkoperillo/vue-tic-tac-toe)
Every comment or suggestion to improve the code is welcome :pray:
Elasticsearch - No mapping found for [field_name] in order to sort on
Published: 2021-07-12 08:39:58

---
title: Elasticsearch - No mapping found for [field_name] in order to sort on
published: true
date: 2021-07-07 09:24:51 UTC
tags: 
canonical_url: https://adithya.dev/elasticsearch-no-mapping-found/
---

I use [Laravel Scout](https://laravel.com/docs/8.x/scout) (sometimes PHP) with Elasticsearch making use of this great package [Scout Elasticsearch driver](https://github.com/babenkoivan/scout-elasticsearch-driver). This allows for the possibility of sorting / ordering records directly from Elasticsearch.

Once you create your index, write a query to sort your records by a field to get the latest posts, you might be hit with the following error

```
Elasticsearch\Common\Exceptions\BadRequest400Exception: 

{
	"error": {
		"root_cause": [
			{
				"type": "query_shard_exception",
				"reason": "No mapping found for [field_name] in order to sort on",
				"index_uuid": "Rk1oQl22TH6vKzgTJCn57w",
				"index": "index-name"
			}
		],
		"type": "search_phase_execution_exception",
		"reason": "all shards failed",
		"phase": "query",
		"grouped": true,
		"failed_shards": [
			{
				"shard": 0,
				"index": "index-name",
				"node": "Nd1diFCdQVO9T-gx1dfazg",
				"reason": {
					"type": "query_shard_exception",
					"reason": "No mapping found for [field_name] in order to sort on",
					"index_uuid": "Rk1oQl22TH6vKzgTJCn57w",
					"index": "index-name"
				}
			}
		]
	},
	"status": 400
}

 in file /var/www/html/vendor/elasticsearch/elasticsearch/src/Elasticsearch/Connections/Connection.php on line 675

```

No reason to panic, your query statement, connection with Elasticsearch is all good. The reason this error pops up is because you have no data in your mapping, therefore Elasticsearch cannot sort it. If you're coming from MySQL, this is a weird quirk to get used to.

From [Elasticsearch documentation](https://www.elastic.co/guide/en/elasticsearch/reference/7.13/sort-search-results.html#_ignoring_unmapped_fields):

> Ignoring Unmapped Fieldsedit   
> By default, the search request will fail if there is no mapping associated with a field. The **unmapped\_type** option allows you to ignore fields that have no mapping and not sort by them. The value of this parameter is used to determine what sort values to emit.   
>   
> If any of the indices that are queried doesn’t have a mapping for `price` then Elasticsearch will handle it as if there was a mapping of type `long`, with all documents in this index having no value for this field. Here is an example of how it can be used.

```
GET /_search
{
  "sort" : [
    { "field_name" : {"unmapped_type" : "long"} }
  ],
  "query" : {
    "term" : { "product" : "chocolate" }
  }
}
```

With PHP / Laravel, you can either append `unmapped_type` or fill up your data before the initial search. Either of the approaches should solve it.
5 Top Secret Gems Of Python Libraries Untold To The Data Science World
Tags: python, datascience, machinelearning, computerscience
Published: 2021-07-07 09:00:08

Topic: 5 Top Secret Gems Of Python Libraries Untold To The Data Science World

https://modularml.blogspot.com/2021/06/5-top-secret-gems-of-python-libraries.html

One of the most incredible things about practicing Python is its continuity of open-source libraries. There is a library for fundamentally anything. If you have studied some of my preceding blogs, you may have remarked that I am a big supporter of low-code libraries.

That is not because I am procrastinating to type code but because I fancy investing my time operating on a project with values. If a library can work a problem, why not preserve your valuable time, and give it a try? 

Today, I will present you with five libraries you have never heard about, but you should attach them to your portfolio. Here is the link to the article. Would you please share your valuable feedback as it helps me to learn from my mistakes and motivates me to write more and more content?

#python #datascience #education #project #blogs #opensource #pythonlibraries #datascientist
Typescript hints in your code samples
Tags: typescript, webdev
Published: 2021-07-07 08:33:11

Adding code samples to your website is an excellent idea. It shows how the code should look like. It's hard to image npm package docs without code samples.

Existing solutions are good when we want to show JavaScript code samples. But what, when we want to show TypeScript code, types alongside with code?

… [Shiki Twoslash](https://github.com/shikijs/twoslash) is the library you are looking for.

### What is Shiki?

[Shiki](https://github.com/shikijs/shiki) is a syntax highlighter. Is based on text mate grammar. The same technology that powers [VS Code](https://code.visualstudio.com/) syntax highlighting.

![](https://cdn-images-1.medium.com/max/1600/1*1reV249DP4NRz3QzRyFIHQ.png)

### What is Twoslash?

[Twoslash](https://github.com/shikijs/twoslash) is a Shiki addon. It’s adding TypeScript compiler hints. Same as we can see in VS Code. You can check which

You can display typescript hints in two types.

**Static:**

```ts
const msg = "Hi world" as const;
//    ^?
```

![](https://cdn-images-1.medium.com/max/1600/1*JyjpO0K5zqT9z9WgK3xScg.png)

**Dynamic:**

```ts
ts twoslash
// Removes 'readonly' attributes from a type's properties
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};
type LockedAccount = {
  readonly id: string;
  readonly name: string;
};
type UnlockedAccount = CreateMutable<LockedAccount>;
```

![](https://cdn-images-1.medium.com/max/1600/1*xArLCxPJk0JmggJqP-LEpw.gif)

Note: You need to attach JavaScript code to have interactive code hints.

### There is more

Shiki Twoslash supports more functionalities:

* mixing static with dynamic mode
* showing typescript errors
* vs code themes

Also, we come with plugins for the most popular tools: Eleventy, Docusaurus, Gatsby, and more.

You can read more about all options on [shiki twoslash website](https://shikijs.github.io/twoslash/).

***

To get in touch with me [you can find me on Twitter.](https://twitter.com/Perfect7M)
Add uniqui item to the array
Published: 2021-07-07 08:32:15

code
```
const handleQualityChange=(e)=>{
    if(quality.find((i:any)=>i===e.target.value)){
      const index = quality.indexOf(e.target.value)
      quality.splice(index,1)
      console.log({quality})
    }else{
      quality.push(e.target.value)
      console.log({quality})
    }
  }```
DigitalOcean deploy conference - June 2021 - All product sessions
Tags: devops, startup, linux, database
Published: 2021-07-07 07:49:32

Some of my favorite sessions from the recently concluded [deploy conference](https://deploy.digitalocean.com/) by DigitalOcean:

##Opening Keynote With DigitalOcean CEO Yancey Spruill
{% youtube CCnZQtPnTc0 %}
___
##Accelerating Modern App Development Using Managed MongoDB and DigitalOcean
{% youtube 3WuN-_6I0FI %}
___
##Is Kubernetes Right for Me? Choosing the Best Deployment Platform for Your Business
{% youtube jTejW6EE9WA %}
___
##Be the Boss of Your Base: Tips to Master MongoDB Like a Pro
{% youtube k9LKfcUc17U %}
___
##Finding the Right DigitalOcean Virtual Machine Type for Your Business
{% youtube _xFpX8fGdeY %}
___
##Grow Your Business with Scalable Apps Using DigitalOcean App Platform
{% youtube f-eAgjy1Z0w %}
___
##Building Production-Ready Apps With App Platform, DigitalOcean's Reimagined PaaS
{% youtube ekn4nxH49mQ %}
___
##Networking Best Practices To Power Your Kubernetes Deployment
{% youtube 87P6ONP9B9o %}
___
##Kubernetes Starter Kit for Developers: Becoming Productive From Day 1
{% youtube lH_e0tKtyx8 %}
Awesome List of Distributed System Projects
Tags: systemdesign, architecture, distributedservices, go
Published: 2021-07-07 07:38:29

---
title: Awesome List of Distributed System Projects
published: true
description: Learn how to build distributed services from real world open source projects
tags: systemdesign, softwarearchitecture, distributedservices, golang
//cover_image: https://direct_url_to_image.jpg
---

I have recently dug into distributed system design. I have found lots of open source projects to inspire from 💫

So I decided to start composing an awesome list on GitHub:

https://github.com/roma-glushko/awesome-distributed-system-projects

The list currently contains projects like:
- Databases (SQL, NoSQL, KV)
- Locking services
- Streaming Services
- Message Queues
- Task Schedulers
- File Systems
- OS, Service Discovery
- frameworks and components

Most of the projects are written in Golang, some in Java, Erlang, C++ and a few in Python, Rust, Kotlin.

Hope this is going to be helpful 🙌
Feel free to give it a star if you like it and share your fav projects which is not yet on the list 🚀
Looking into Java paint functions by example
Published: 2021-07-07 06:50:58

---
title: Looking into Java paint functions by example
published: true
description: I started to use a lot of the paint functions in Java at work and I wanted to create an example that could teach me about the different shaders available in Java. The paint interface is not something you come across if you don't draw things in Java but having an understanding of the possibilities could be beneficial.
tags:
cover_image: 
---

{% youtube uOiaLoTBPbA %}

I started to use a lot of the paint functions in Java at work and I wanted to create an example that could teach me about the different shaders available in Java. The paint interface is not something you come across if you don't draw things in Java but having an understanding of the possibilities could be beneficial.
2 ways of making your form inputs accessible
Tags: html, react
Published: 2021-07-07 06:36:34

Recently, my team has been working on accessibility for testing. And we've had problems with getting our input elements to be following the principles of the [testing-library](https://testing-library.com)

As per the [priority](https://testing-library.com/docs/queries/about/) in the docs, we should be using `getByRole` most often for the test to resemble how the user interacts with it in the browser. For example:
```javascript
// get the textbox that has the label of 'Bar'
getByRole('textbox', { name: 'Bar' });
```
So for us to use `getByRole`, we should make sure that the `<input />` is related to the `<label />`. 

There are 2 ways we can do this:
```javascript
<label htmlFor="foo">Bar</label>
<input id="foo" type="text" />
```
and
```javascript
<label>Bar
  <input type="text" />
</label>
```
This way, we can make sure that our form elements are accessible, not only by the user but also by our tests.

Cheers! :coffee: :beer:

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
Problems and Nuisances
Tags: startup, onlinebusiness, productmanagement, opinion
Published: 2021-07-07 06:31:19

*Identifying the user issues worth solving is very crucial but often ignored*

In the course of my study on product management, I've identified two categories of user issues: **Problems** and **Nuisances**.

**Problems** are difficulties that affect the user so much, they are willing to spend time and money to solve them.

**Nuisances** feel like problems at the moment but are quickly ignored or forgotten.

Let's take an example:

My mobile hangs almost once every month and needs a restart. If somebody asks me about this, I would rave for half an hour about how terrible my phone is. If they ask me if I would buy their hang-free phone, I would instinctively say yes!

But will I? No! Because it's a nuisance that seems important in that moment. I'm totally fine with my phone the rest of time.

**[Subscribe to my blog to get more articles!](https://srikarkashyap.com/#/portal/signup)**

**This misidentification of nuisances as problems seems to plague non-tech companies the most**. A laundry list of features is made and the development outsourced to a vendor, with negligible or zero user surveys or demand identification. Most of these features are often obscure and unused.

But don't throw away the nuisances yet! **In many cases, nuisances solved with 10X efficiency have a potential niche market for themselves**. These markets rarely overlap with the original markets.

A clock that slows down every month by five minutes? Nuisance. A clock that doesn't slow down for decades or centuries? **Atomic clock** (with important scientific applications).

A browser that slows down when using dozens of tabs? nuisance. Most people rarely use dozens of tabs simultaneously. But a browser that solves this problem 10X using data centers? **Mighty App**. A niche market with an entirely different userbase.

Can you think of any more examples that prove (or disprove) this distinction?

**TL;DR**: Solve problems. Unless you can solve the nuisance 10X better. Then do that!

**Recommended reading on identifying problems**
- Talking to Humans
- The Mom Test

**[Subscribe to my blog to get more articles!](https://srikarkashyap.com/#/portal/signup)**
How we grow a decentralised network
Tags: startup, community, opensource, blockchain
Published: 2021-07-07 04:10:26

Growing something new when the market is dominated by an existing player is difficult. Here's an update on how we are doing :)

We are a startup building an open source decentralised network called [CENNZnet](https://cennz.net/). Our goal is to build the ideal platform for DApp(Decentralised Apps) developers. We make the benefits of blockchain approachable, and address the issues DApp developers are currently facing.

As a new blockchain network, we had to bootstrap the network by providing some nodes before we invite others to join. We started and maintain some nodes on AWS to give our network a kick start. Since we hadn't yet got a community of network participants, the original development team made all the decisions on the business logic of the network.

Then we encourage our users (DApp developers), as well as investors to join the network. When people contribute computational power to the network, they are rewarded with tokens. DApp developers also get the benefit of having a more reliable and faster connection by using a dedicated node for their DApps.

As we grow the participants of the network, we also continue to develop the technology and educate the network participants about blockchain, so that we can get to a fully decentralised stage where all network decisions are made by the community.

To learn more about our journey and plans, check out this article: [Are we Decentralised yet?](https://medium.com/centrality/are-we-decentralised-yet-783ae9f81422)
Java/ Create Mail Merge and Merge Text Value in Word 
Tags: java, word, mailmerge
Published: 2021-07-07 06:27:59

Mail merge in Word document a very powerful function for users to write and send personalized letters or e-mails to many different people at the same time. This article will demonstrate how to create a mail merge template and then merge the text value into the template with the help of Free Spire.Doc for Java.

**Import Jar Dependency (2 methods)**
● Download the Free [Spire.Doc for Java](https://www.e-iceblue.com/Download/doc-for-java-free.html) and unzip it, then add the Spire.Doc.jar file to your Java application as dependency.

● Directly add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.doc.free</artifactId>
      <version>3.9.0</version>
   </dependency>
</dependencies>
```

**Sample Code**
```java
import com.spire.doc.*;
import com.spire.doc.documents.Paragraph;
import java.text.SimpleDateFormat;
import java.util.Date;

public class MailMerge {
    public static void main(String[] args) throws Exception {

        String output = "mailMerge.docx";

        //Create a Document instance
        Document document = new Document();

        //Add a section
        Section section = document.addSection();

        //Add 3 paragraphs to the section
        Paragraph para = section.addParagraph();
        Paragraph para2 = section.addParagraph();
        Paragraph para3 = section.addParagraph();

        //Add mail merge templates to each paragraph
        para.setText("Contact Name: ");
        para.appendField("Contact Name", FieldType.Field_Merge_Field);
        para2.setText("Phone: ");
        para2.appendField("Phone", FieldType.Field_Merge_Field);
        para3.setText("Date: ");
        para3.appendField("Date", FieldType.Field_Merge_Field);

        //Set the value for the mail merge template by the field name
        Date currentTime = new Date();
        SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String dateString = formatter.format(currentTime);
        String[] filedNames = new String[]{"Contact Name", "Phone", "Date"};
        String[] filedValues = new String[]{"Robert Chan", "+1 (69) 123456", dateString};

        //Merge the specified value into template
        document.getMailMerge().execute(filedNames, filedValues);

        //save the document to file
        document.saveToFile(output, FileFormat.Docx);
    }
}
```

**A snapshot of the result document**
![mail merge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl4fghj2ekt36pbiadsi.jpg)
UI Dev Newsletter #64
Tags: html, css, javascript, a11y
Published: 2021-07-07 06:21:50

- [7 GitHub projects essential for every Javascript developer 👨🏽‍💻 🚀](https://bit.ly/3dHDoRr)
Ankit Anand shares amazing and popular GitHub projects that will help you become a better Javascript developer.


- [Images and screen reader users](https://bit.ly/2UqpFaT)
Chris Ferdinandi shows how to use the alt attribute with img elements to provide descriptive text that can be read aloud by screen readers and other assistive technology.


- [Do I have to “Try again in a few minutes”?](https://bit.ly/3Atm9gI)
Frank W. explains what might be a better way to have products keep delivering value even when they glitch.


- [Positioning Overlay Content with CSS Grid](https://bit.ly/3ApFHCD)
Ryan Mulligan shows how to use CSS Grid and alignment properties to create component layouts that contain multiple overlapping elements.


- [prefers-reduced-motion and browser defaults](https://bit.ly/3ApFOhx)
Bruce Lawson proposes some default behavior for reduced motion and shares a temporary CSS workaround.


- [Useful global CSS](https://bit.ly/3wl53OG)
Jack Domleo shares a set of useful global CSS defaults to add to your site alongside a reset stylesheet (with explanations).


- [Glassmorphism CSS Generator](https://bit.ly/2UXqPei)
Zoltán Szőgyényi shares a CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.


- [A complete guide for Apple displays.](https://bit.ly/3dEutk0)
A complete guide for Apple displays.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Cost optimization
Tags: cost, optimization, costoptimization
Published: 2021-07-07 06:00:16

Cloud cost optimization enables analysis of your resource usage, assigning the right resources to a workload, shaping them to meet demand, and enabling them to meet security and compliance in a phased manner. Vmayo Cloud provides unlimited scalability to the organization but with the right cloud strategy you can reduce IT costs by charging for the resource you use.

AWS and Microsoft azure use total resources from cloud customers, even if they do not use some resources.

Transparency
Governance
Predictability
Business Intelligence 
Tags: business, intelligence, businessintelligence
Published: 2021-07-07 05:57:58

Business intelligence leverages data and services that convert data into actionable insights that inform the organization’s strategic and strategic business decisions. Business intelligence tools use data sets and present analytical findings in reports, summaries, dashboards, graphs, charts, and maps, providing users with detailed information about the state of the business.

The Business Intelligence Initiative is for making better business decisions that enable organizations to increase revenue, improve operational efficiency, and gain a competitive advantage over business rivals. To achieve that goal, business intelligence combines various methods for managing and analyzing data in tandem with analytics, data management, and reporting tools.

Data Preparation
Key Performance Indicators
Data Visualization
Big Data Analysis
Data Scientist