teleren/devto huggingface dataset:
RegularElements
Published: 2020-10-16 12:37:13

Quote from site:   "<em>Everything I love about Custom Elements made available for any node, and through CSS selectors.
No Custom Elements, no Shadow DOM, and no polyfills are needed.</em>"

You can test it here : [RegElt](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgCMBXY4+gAmqgY4cALwAdEIQgBaSADcYEgHxi0vdbwASEXgDEIC3gHk0itCwD0nbvRXnrPNQKGiJU2QcUg7GrTv2GACoA7rSqlg62lCBwMLDUxBD0CIggAKyIAJwgAL4U6Ni4qfgAVghUdAxMxHgQWAAOtABOxLzAACYwkKY5vGBNtFi8AORNMADmHIJN0nEwOAxwwwDcqmtond0wABTDRDLyMMMUbarqlaYJMO0AwhhQUGwY1ADW2wCUp2oaxFJw+BA0KYmppAgBZAAyvBEI14gF4NwAJu7CANS8X4Qf6A4GgyGrb45VQ5d7LaKxeKJZJ4ADsiAAzNIAAyIBm5fIgTA4PD4ajCaKVRjMVK5AC6OSAA)

```html
<button class="hi-five">
    Hi Five One
</button>
<button class="hi-five">
    Hi Five Two
</button>
```

```js 
import {define} from 'regular-elements';

define('.hi-five', {
  connectedCallback() {
    this.innerHTML = ' 🖐 ' + this.innerHTML;
  }
});
```
Hacktoberfest Experience
Tags: hacktoberfest
Published: 2020-10-16 12:36:03

## What I Learned From Hacktoberfest

I have learned many new stuff like git, github, flutter etc. I have also learned how to create a readme.md file as it was my first time to open source. I have connected to many new and like minded people while contributing for the project. The members of the community were very helpful in every aspect. Also, I have attended many workshops which were great, learned many new things from the workshops.
Overall it was a great experience.
Thank You Digital Ocean for this Open Source festival(Hacktoberfest).
![Hacktoberfest_2020](https://dev-to-uploads.s3.amazonaws.com/i/0bcqttqehdhxprxl1xlb.jpg)
List of the 7 best Spotify Alternative apps to play millions of songs for free
Tags: music, internet, entertainment, spotify
Published: 2020-10-16 12:35:50


It is recommended that you have other options when listening to music directly from your mobile or from any device and with total simplicity. Therefore, Spotify alternatives also show excellent characteristics for the reproduction of any genre of music in streaming and completely free.

1. Google play music

  Top Lists   Jun 19, 2020, 0   851 Add to Reading List
Here you all know about the best Spotify alternatives for listening to music online. You can enjoy the best music streaming, along with other features of considerable interest and benefits.

2. Youtube music
 
Youtube Music is the best Spotify Alternative, this is the best music streaming option out there which includes so many functions for computers, as well as for Android and iOS mobile phones.

It shows an extremely elegant and simple to use interface that, in addition to everything, integrates perfectly with the Google Home speaker.

3. Musicall

As a Spotify alternative, this is one of the best to enjoy streaming music completely free of charge, and thus, it offers an extensive catalog based mainly on the music libraries of the YouTube platform.

You can locate any song, album, or artist and obtain absolutely complete and sectioned results. It allows you to listen to music without an Internet connection and through any device of your choice.

4. Apple music

Apple Music is the most popular service for iOS users to enjoy unlimited streaming that has a monthly subscription plan that can be canceled individually or as a family plan.

This Spotify Alternative allows access to up to 50 million songs and radio stations. For greater coverage, it can be used on Apple Watch and even provides an Android version. Although it is not available for any computer operating system.

5. Last.fm

This app is the best Spotify alternative, thanks to the fact that it is a kind of social network of musical tastes and also, it manages to reproduce music online with the help of YouTube or it allows you to buy it from iTunes directly.

In short, it is a service that works for free and, for greater advantage, it offers reliable data on the most listened to songs in the world in real-time.

6. Deezer Music

Deezer Music has a library that adds more than 53 million songs and allows you to listen to music online, communicate privately with the community and receive various recommendations attached to the musical tastes you specify once you register on the platform.

7. SoundCloud Music

SoundCloud Music is another ideal Spotify alternative to perfectly replace Spotify, we recommend this application where you can directly search for songs of all genres, artists, and other users if you wish.

This Spotify Alternative has been classified as an independent website that is in charge of promoting projects that, until now, are in their first steps and thus, aims to position itself as one of the mainstreaming music apps and, of course, it has succeeded.

SOURCE - https://beebom.com/top-spotify-alternatives/
creating the meditation app like headspace 
Tags: mobileappdevelopment, iosappdevelopment, androidappdevelopment
Published: 2020-10-16 12:33:48

Meditation is the real need of the hour in year 2020 considering the facts of pandemic and economic situation around the world and the job losses and for the reason of pandemic the general tendency is finding the mobile alternative for every thing and HeadSpace is the app for the meditation and other activities,BrillMindz as a Top Mobile App Development Company In Bangalore have all the capabalitites to build the app like headspace

What all to be considered while building a app like HeadSpace?

Have a business idea

	List down what all verticals you will be targeting with the app and some of the verticals 
that you can consider are 
	Mental health tracker
	Yoga
	Weight loss meditation
	Sleep Guide meditation
	Meditation app for the beginners
	Breathe meditation app
	Walking meditation app

Get the platform right 
	The platform on which you develop the app is very important,android and ios are the most targetted platforms you can also make a native apps but when you select the platforms you must be aware of the cost of development also

Right interface
	Since the idea is to build the a meditation app the interface must be very light and easy to use so that the users should not get stressed using the app

Make it Wearable compatible
	The idea of developing the app is to drive the customers and not to loose the customers and with the technology growing day by day in terms of wearable device and foldable device it is very important for the app developers to be updated and move with the technology, If the app developers are frequently updating the app to the technology the customers will not move out of the app

Create a vast list of programmes
The customer usually dont come for one option for a app so it is very important for a app developers to have a large list of programmes for each option available so that you can hold the customers by giving them multiple programmes
Features to include in the meditation app	

Sign in and sign up
User Profile
Meditation programs
Onboarding tutorial
Sleep stories
Push notifications
Search bar
App localization
Play a meditation session
Live Streaming
Estimated cost for development for app like headspace
The cost for development of any app is based on the team ,platform of development and the sources and these factors vary from one app to another app since the cost of the app also varies on the length of the app 
Conclusion
The growing demand for the app like headspace is growing with the increasing customers and BrillmIndz, as a Top Mobile App Development Company In Bangalore can develop these kind of apps with ease
Queue
Tags: hacktoberfest, javascript
Published: 2020-10-16 12:31:25

    class Node {

        constructor(value) {

            this.value = value;

            this.next = null;

        }

    }

    class Queue {

        constructor() {

            this.first = null;

            this.last = null;

            this.size = 0;

        }

        // Add Value in the tail

        enqueue(val) {

            var newNode = new Node(val);

            if (!this.first) {

                this.first = newNode;

                this.last = newNode;

            } else {

                this.last.next = newNode;

                this.last = newNode;

            }

            console.log(`--> You are ${++this.size} Inserted Value and this is a <- ${val}`);

        }

        // Delete Value in head

        dequeue() {

            if (!this.first) return null

            var temp = this.first;

            if (this.first === this.last) {

                this.last = null;

            }

            this.first = this.first.next;
            this.size--;
            console.log(`Delete Successfully 👍👍 `)
            return temp.value;

        }

        // Show Head Value

        peek() {

            return this.first

        }

    }

    var q = new Queue()
XinFin + Chainlink
Tags: blockchain, xinfin, chainlink
Published: 2020-10-16 12:31:00

Xinfin’s smart contract creation tool, Mycontract.co took a new look after the inclusion of new smart contract features like the integration of Chainlink oracles.
https://thecurrencyanalytics.com/19326/xinfins-mycontract-co-expands-chainlinks-oracles-beyond-trade-finance/
How to Deal with Nightmare Clients 🎃
Tags: career, beginners, freelancing, codenewbie
Published: 2020-10-25 17:37:46

---
title: How to Deal with Nightmare Clients 🎃
description: I'll share four strategies to help you deal with nightmare clients… and a new way of thinking that will help you eliminate this problem forever! (It's probably not what you think, but give it a shot anyway.)
published: true
date: 2020-10-16 12:29:00 UTC
tags: career,beginners,freelancing,codenewbie
canonical_url: https://raddevon.com/articles/how-to-deal-with-nightmare-clients/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/81phc9am5xrq671ph57l.jpg
---
I love freelancing, but you’ll eventually come across someone who… giving them the benefit of the doubt, let’s just say their idea of the freelancer/client relationship doesn’t match yours. These nightmare clients can take an awesome project and make it a chore.

I’ll share **four strategies** to help you deal with clients like these… and a new way of thinking that will help you eliminate this problem forever! (It’s probably not what you think, but give it a shot anyway.)

{% youtube fUbU6Hq1TTo %}

If you need some help getting your freelance business going, I built a course just for you. Check out [my **Freelancing Crash Course**](https://raddevon.com/enroll-in-the-freelancing-crash-course/)! It’s free and comes straight to your inbox.
Show DEV: Free privacy-respecting analytics for your personal or indie project
Tags: showdev, opensource, javascript, vue
Published: 2020-10-16 12:02:00

---
title: Show DEV: Free privacy-respecting analytics for your personal or indie project
published: true
description: piratepx is a simple, privacy-respecting, no cookie, zero JavaScript, 35 byte counter pixel for websites, mobile apps, server-side APIs, CLIs, and just about anywhere else
tags: showdev, opensource, javascript, vue
---

Hey friends!

I just wanted to take a quick moment to show off a fun little side project I recently launched:

[🏴‍☠️ piratepx](https://www.piratepx.com/)

I call it just a little analytics insight for your personal or indie project. You can add it to your website, mobile app, server-side API, CLI, or just about anywhere else.

It's very simple on purpose, as my goal going in was to host it myself (so you don't have to) and make it 100% free. It's also completely [open source](https://github.com/piratepx/app) for full transparency.

It probably won't put a huge dent in Google Analytics usage, or even replace other privacy-respecting analytics options out there for most people, but my hope is it'll be useful for you if you're just looking for something simple and free.

Let me know what you think!

P.S. I had fun trying a few new things with this project, including [Fastify](https://www.fastify.io/) for the backend (instead of Express) and [Vue.js v3](https://v3.vuejs.org/) + [Vite](https://github.com/vitejs/vite) for the frontend. I hope to write up a full post on my experience with those, but I'm happy to answer any questions here as well!
Daily Developer Jokes - Friday, Oct 16, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-10-16 12:00:08

---
title: "Daily Developer Jokes - Friday, Oct 16, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Oct%2016%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259ae4191d.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Why did the developer cancel their dinner plans?

___A___: They were unable to fulfil peer dependencies
 -->
µHTML
Published: 2020-10-16 11:53:11

Andrea makes part to a certain type of developpers, those who innove and create constantly.
Very few are as productive as him in frontend developpement.
I absolutetly don't know him personnaly, but I am very impressed by his work.

Look at his site on [WebReflection](https://github.com/WebReflection)

Here a sample code from one of his numerous libraries **µhtml**
See how you can 'render' in 'render' !!!

You can see it in action here : [µhtml](https://flems.io/#0=N4IgtglgJlA2CmIBcA2AjAOgMwFYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAHgBGAVzZsBAAmgBeADogJbagFoesCDwDW8AE5qAfCurz5By2ID002QLPcQpeAh5sIA8kzQkLBAAXzwaekZmACtyXgEhESYIMAAHPmM2eWB2Tjx5Y2EoExD5QmM+MHk1KVzYNUtLfmpSLIAhGTkrJXkPLzljeSUzbMtrZtb5Jy6h+Sg+HikGQQwARykTAE8AZU94bwyACj79gYBKAG4xgvg2KWMrfilBIZHC6mLjQ+mBfLqAA2u1gAwnpDKQkPIACTAJ6CELXf6XSwhK7UJp+LKg-RGQY9E4HPEjYDXCZZH7deQdZzUY57QnIqw3O4PMrPby+KxSVJQWhCQ5wthnUZM6yFFlWd6fQ7zRbLNgYCR8KCbP4cWCA0XWeRiCDUVIyXpsTYIVQgADu0DYLCQACYAAz21IADzU8gAbrRYBszcVCLQpLAsp7vfA1PYLFrrGIoBB3fIBLocUoYYdhcN5NzefyANQ5wVnEKR7Ul+TYwzyWgAc1oeqQQNLMIpAr4zyFCKjOvssfdxe1SLR1lRKMa1HLuMOAHIAMQabRJwwmSdnQ5oR2MtwEnx+US2212gCcWntSHtoXCIDoDFEGB4pDiIGaiTYolCAF0CHpqAZ-FRL5FRFyNx7i4Jh2DYVIIXsexnlSAwq1vSp7FyAABLAMHtDAABZuwgVpkI4DBYjcY1UiiUgeGMCBUhfEI3xCIA)

```js
import {html, render} from "uhtml"

const Button = selector => {
  const button = document.querySelector(selector);
  return count => render(button, html`
    Clicks: ${count}
  `);
};

const Clicker = selector => {
  const button = Button(selector);
  return function update(count) {
    return render(document.body, html`
      <input style="width:200px" value="default value"/>
      <div onclick=${() => update(++count)}>
        Click again:
        ${button(count)}
      </div>
    `);
  };
}

Clicker('#btn-clicker')(100);
```
MY FIRST HACKTOBERFEST 
Tags: hacktoberfest2020
Published: 2020-10-16 11:31:24

What I Learned From My first Hacktoberfest2020

I participated in the HacktoberFest for the first time this year and I'm very happy to complete it successfully.It was really nice experience to participate in hacktoberfest . I did never tried before due to some kind of fears like what if I'm not succed and if I'm wrong but this time i believed on my self and keep just one thing in my mind that if unfortunately I'm not getting results in my favour then also I got to learn atleast how to contribute,How to do case study, atleast I gain an experience which is priceless. This was really good step of participating through contributing in an open source. This event helped me gain experience in how to contribute to the open source projects and I got to learn a lot from it. It was a fun experience. Thanks for giving this oppurtunity @digitalocean. #hacktoberfest
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-16 11:28:08

Uff, Finally ! Completed this year #hacktoberfest2020 challenge
successfully🔥 with " 22+ Valid PRs "😁😅 Swags arriving soon....✌Amazing experience and learned a lot of new stuff....😎.
It was a super amazing initiative by DigitalOcean for those who were looking for open-source opportunities.

This Was My 2nd Time Hacktoberfest, last Year i was able to complete only 5 Valid PRs

## What I Contributed in Hacktoberfest

Mostly I contributed Different Different Algorithms in C++/JavaScript/Python
Also, I contributed a IPL Visualization Jupyter Notebook.

## What I Learned From Hacktoberfest

Learned Lots of lots of Algorithms, Data Structures implementations and Competitive coding questions 

![Hacktoberfest](https://dev-to-uploads.s3.amazonaws.com/i/yxmurrpvjdbffiwfobou.png)
Completed Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-16 11:25:22

Since I was unaware about open source platform, Hacktoberfest 2020 gave this opportunity to get into the world of open source and help others around the globe.

Hacktoberfest 2020 gave me this opportunity to get into open source and do some contributions by pulling requests in repository of other people and improve/add feature in them.
A silly bug that sneaked into production
Tags: todayilearned, ruby
Published: 2020-10-16 11:15:55

So, this is what happened.

I was in the middle of some task and suddenly had to make a context switch to a different task that I had pushed earlier. I forgot to handle a failure case and the code went to production already. But the change was pretty simple.

I had to add a condition to some existing code that looked similar to this,

![Good code](https://github.com/rahulramfort/blog/blob/master/ruby/2_til_precedence/no_error.png?raw=true
)

Consider this is the condition that I had to add.

![Buggy code](https://github.com/rahulramfort/blog/blob/master/ruby/2_til_precedence/the_bug.png?raw=true
)


With this done, I asked myself if I should test this out before pushing and the genius in me replied that this was a simple change and I could go ahead without any testing. I also had this[ pre-commit hook](https://dev.to/rahul_ramfort/a-simple-pre-commit-hook-that-saves-you-big-time-5g9e) to save me from any syntax errors. So, I felt I was pretty much covered and good to go.

I pushed it, the pre-commit hook passed, shipped to prod as well 🚀 and I went back to my other task.

Within a few minutes, our error monitoring tool started showing even more errors, this time 100% of the requests were failing compared to the negligible 1% requests that were failing earlier.

Guessed what could have gone wrong already? Kudos to you.👏

If not, here's the error that will help you find it.

```
TypeError (class or module required)
```

If you think that `MyObject` is not a class or module, *you're wrong*. Because that piece of code was already in production and is syntactical fine.

So what could have gone wrong? Give it a moment to look into it again. 

Okay, here it goes, I didn't tell ruby explicitly about the execution precedence and as a result, it considered `MyObject && (self.some_validation? || self.other_validation?)` as the argument to the method `self.is_a?`. 

So the result of `MyObject && (self.some_validation? || self.other_validation?)?` is either one of these.

```
MyObject && true #true
MyObject && false #false
```

As a result, the argument to `self.is_a?` is now a boolean,
```
self.is_a? true
```
which throws the error, * TypeError (class or module required) *

The fix is pretty simple though, just add a bracket to let ruby know the precedence of the execution.

![Fix for the bug](https://github.com/rahulramfort/blog/blob/master/ruby/2_til_precedence/fix_bug.png?raw=true
)

Days like these are bound to happen and it just makes you more humble and makes you learn the nuances of the language.
javascript array for-each
Published: 2020-10-16 11:15:29

javascript forEach() method calls a function once for each element in an array , callback function is not executed for array elements without values.

The <a href="https://askavy.com/javascript-each/">javascript each</a> method use a callback function for each element of an array with 3 parameters

1 – array item
2 – array index
3 – array

array item (value) parameter in for each loop

```javascript
     const numbers = [1, 2, 3, 4, ];
     numbers.forEach((item) => {
       document.write(item) ;      // output 1 2 3 4
       document.write("<br />") ;
     }) ;

```

optional parameter index in foreach method

```javascript

      const numbers = [1, 2, 3, 4];
      numbers.forEach((item, index) => {
        console.log("Index: " + index + " Value: " + item);
      });

Output
Index: 0 Value: 1
Index: 1 Value: 2
Index: 2 Value: 3
Index: 3 Value: 4

```

javascript array foreach using key and value

```javascript
      const numbers = [1, 2, 3, 4];
      numbers.forEach((value, key) => {
        console.log("key: " + key + " Value: " + value );
      });

```

javascript foreach object

```javascript
    const obj = {
        name: "value1",
        rank: "value2",
      };

     Object.keys(obj).forEach((key) => {
        console.log(key, obj[key]);
      });

Output
name value1
rank value2
```

The Object.values() function return an array with index and values

```javascript

    const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.values(obj).forEach((val) => {
        console.log(val);
      });

OutPut
Avy
Captain

```

The Object.entries() function returns an array of entries. An entry is an array of length 2, where entry[0] is the key and entry[1] is the value

```javascript

      const obj = {
        name: "Avy",
        rank: "Captain",
      };

      Object.entries(obj).forEach((entry) => {
        const [key, value] = entry;
        console.log(key, value);
      });

OutPut
name Avy
rank Captain

```

JQuery Each Function

```javascript

      const yourArray = [1, 2, 3, 4];

      $.each(yourArray, function (key, value) {
        console.log("key: " + key + " Value: " + value);
      });

Output
key: 0 Value: 1
key: 1 Value: 2
key: 2 Value: 3
key: 3 Value: 4

```
Merge Sort
Tags: hacktoberfest, javascript
Published: 2020-10-16 11:08:22

function merge(arr1, arr2){

    let results = [];
    
    let i = 0;
    
    let j = 0;
    
    while(i < arr1.length && j < arr2.length){
    
        if(arr2[j] > arr1[i]){
        
            results.push(arr1[i]);
            
            i++;
            
        } else {
        
            results.push(arr2[j]);
            
            j++;
            
        }
        
    }
    
    while(i < arr1.length) {
    
        results.push(arr1[i]);
        
        i++;
        
    }
    
    while(j < arr2.length) {
    
        results.push(arr2[j]);
        
        j++;
        
    }
    
    return results;
    
}

function mergeSort(arr){

    if(arr.length <= 1) return arr;
    
    let mid = Math.floor(arr.length/2);
    
    let left = mergeSort(arr.slice(0,mid));
    
    let right = mergeSort(arr.slice(mid));
    
    return merge(left,right);
    
}

mergeSort([10,24,76,73,72,1,9])