teleren/devto huggingface dataset:
JS Sets: The Missing Methods
Tags: javascript, webdev, programming
Published: 2021-10-19 07:18:58

So, whilst `Set`s were a great addition to JavaScript, there did seem to be some glaring omissions. The most obvious of these were the basic set operations: `union`, `intersection`, and `difference`.

We can easily add these with Metho:
```js
import * as metho from "metho"

const target = Set.prototype

export const union = Metho.add(
  target,
  function(set) {
    return new Set([...this, ...set])
  }
)

export const intersect = Metho.add(
  target,
  function(set) {
    return new Set([...this].filter(i=>set.has(i)))
  }
)

export const difference = Metho.add(
  target,
  function(set) {
    return new Set([...this].filter(i=>!set.has(i)))
  }
)

const a = new Set([1, 2, 3])
const b = new Set([3, 4, 5])

// everything from both sets
console.log( a[union(b)] )       // Set(5)[ 1, 2, 3, 4, 5 ]

// everything that exists in both set a and set b
console.log( a[intersect(b)] )   // Set [ 3 ]

// everything that exists in set a, but not in set b
console.log( a[difference(b)] )  // Set [ 1, 2 ]


```
I have made these extensions available in the `metho-set` library
{% github jonrandy/metho no-readme %}
{% github jonrandy/metho-set no-readme %}
Machine learning course in Gurgaon
Tags: programming, tutorial, testing, productivity
Published: 2021-10-19 07:11:47

Machine learning is not a single technique or technology, but is rather a field of computational science that incorporates numerous technologies to create systems that can learn from the data in their environment and then make predictions and take actions when confronted with a new situation.
Currently, machine learning has been used in multiple fields and industries. for example, medical diagnosis, image processing, prediction, classification, and learning association.
 
Where to learn?
A lot of institutes/colleges/companies are offering this course. Choose any one where you have good feedback.

iClass Gyansetu conducts classes with faculties from Microsoft, Amazon. It’s advisable to learn with people who are working in top companies in the world. Gyansetu provides a free demo session with trainers. Don’t miss it! Talk to the trainer today.

Placement
You will be undergoing a major job-focused project at Gyansetu which makes your interview process easy. Also, the Gyansetu placement team will build your cv and profile on job portals and refer you to many companies/ consultancies.

Duration
Machine Learning with Python course will take almost 5 months to complete.

Contact
Phone No- +91-8130799520/ 9999201478
Website- www.gyansetu.in
Variables Comparison JS✍
Tags: javascript, variables
Published: 2021-10-19 07:10:29

👉 var -> Var can be re-assigned, re-defined and has a function-scope. When we declared outside the function, it has a global scope and it attached itself to the window object.

👉 let -> Let can be re-assigned. It’s scope is within a block of code.

👉 const -> Const cannot be re-assigned or re-defined. It’s scope is within a block of code.
Classifying song lyrics with Natural Language Processing and AutoML
Tags: machinelearning, tutorial
Published: 2021-10-19 09:43:02

---
title: Classifying song lyrics with Natural Language Processing and AutoML
published: true
date: 2021-10-19 07:08:47 UTC
tags: machinelearning,tutorial
canonical_url: https://julsimon.medium.com/classifying-song-lyrics-with-natural-language-processing-and-automl-1a31b9f717a9
---

![](https://cdn-images-1.medium.com/max/1024/1*c7u7Sr1QG3DBjt-0IS3srg.png)

In this video, I use [AutoNLP](https://huggingface.co/autonlp), an AutoML product designed by [Hugging Face](https://huggingface.co), to train a model that classifies song lyrics according to their genre.

Then, I use [Spaces](https://huggingface.co/spaces) to build and deploy a test web page, where I paste some lyrics and predict them.

The page is public and you can try it for yourself :)

{% youtube qAn90KEmriI %}

Dataset and preprocessing notebook: [https://huggingface.co/datasets/juliensimon/autonlp-data-song-lyrics-demo](https://huggingface.co/datasets/juliensimon/autonlp-data-song-lyrics-demo)

Spaces page: [https://huggingface.co/spaces/juliensimon/song-lyrics](https://huggingface.co/spaces/juliensimon/song-lyrics)
Top 5 Best Online Code Editors
Tags: codequality, webdev
Published: 2021-10-19 07:02:20

Hello Guys 👋 In this blog post i will tell you the top 5 best online code editors (No Downloads!).

Before we move further please subscribe to my youtube channel ( i post coding tutorials ) - https://youtube.com/codingfire?sub_confirmation=1

## **No 1. Stackblitz**

Stackblitz claims to be the fastest, most secure
dev environment on the planet and in my opinion it is actually very fast.. Stackblitz is also very easy to use.

> Website Link - https://stackblitz.com/

![StackBlitz Image](https://i.stack.imgur.com/teoDX.png)


## **No 2. Codesandbox**

Codesandbox it is pretty famous and i guess many of you who know this website right ?. But for those who dont know let me tell you. it is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps, or components on any device with a web browser.

The best part of codesandbox is that codesandbox is not only available for pc but also for tab / android devices. Good thing right ? 😊

> Website Link - https://codesandbox.io/

![Codesandbox Image](https://codesandbox.io/static/video-e6a34ad1b9555966b2b8be018e27c2a2.png)

## **No 3. Replit**

Replit allows users to write code and build apps and websites using a browser. Not only apps and websites but you can also code python in the browser and more. The site also has various collaborative features, including capability for real-time, multi-user editing with a live chat feed. Coooolll...

> Website Link - https://replit.com/

![Replit image](https://appedus.com/wp-content/uploads/2021/02/Repl.it-Funding-Round-2.png)

## **No 4. Codepen**

Now codepen is not just an online code editor. in codepen you can also share your projects with others, discover other projects, follow each other, fork pens and more

> Website Link - https://codepen.io

![Codepen](https://martech.zone/wp-content/uploads/2021/03/codepen-html-css-javascript-testing.png)

## **No 5. Jsfiddle**

JSFiddle is an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. 

> Website Link - https://jsfiddle.net/

![jsfiddle](https://res.cloudinary.com/practicaldev/image/fetch/s---cRJS076--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://thepracticaldev.s3.amazonaws.com/i/5zzr3h0foe04onjolqx7.png)

So i think all done. Thankyou for giving your time and reading this blog i hope you liked it

Also dont forget to subscribe to my youtube channel 😊 - https://youtube.com/codingfire?sub_confirmation=1  🙏
Fetch both price and product data from stripe in a single api call
Tags: nextjs, stripe
Published: 2021-10-19 06:52:04

## Use Case

 - I want to display products in my web app that show the product's name, description and price. Similar to the below screenshot

![product card that shows plant picture, product name and price](https://cdn.hashnode.com/res/hashnode/image/upload/v1634622991134/1a9vevy3l.png)

- I want to use the Stripe Dashboard as my source-of-truth.

- Upon visiting my simple store, I would like my customers to receive the latest product information.

## The Problem

I tried to fetch all the `product` data, but that didn't work since it doesn't contain the prices for those products.

I tried to fetch the `price` data, but the `product` field only contains an ID for the product and not the rest of the data.

> 🤔 "Do I really have to get all of my price data, then iterate over each price just to get the product data?"

Neither the  [Stripe Price docs](https://stripe.com/docs/api/prices/list?lang=node)  or the  [Product docs](https://stripe.com/docs/api/products/list?lang=node) address this use case. A quick google search confirmed my initial approach:


![StackOverflow answer confirming my initial assumption](https://cdn.hashnode.com/res/hashnode/image/upload/v1634623505257/c1VeNjOHm.png)

But for such a common task, it just wasn't sitting right with me.


{% twitter 1450200714664349699 %}

## The Solution

Special shoutout goes to my buddy  [Nick (@dayhaysoos)](https://twitter.com/Dayhaysoos). He let me know that prices can use the `expand` parameter to get the corresponding product information. 

After a quick search through the  [Stripe docs for "expand"](https://stripe.com/docs/expand), the solution became clear: 

```js
import Stripe from 'stripe'

const Home = ({ productPriceData }) => {
	console.log({ productPriceData })

	return <div>display stripe data</div>
}

export async function getServerSideProps() {
	const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

	const productPriceData = await stripe.prices.list({
		expand: ['data.product'], // 🎉 Give me the product data too
	})
	console.log(JSON.stringify(productPriceData, null, 2))

	return {
		props: { productPriceData },
	}
}

export default Home
```

## 🗒️ Quick Notes

- Expand can be used for just about any API call, but will only go 4 levels deep on what it returns.
- It's showcased here, but just to be clear, you can dig into an object with dot-notation: `data.product.nestedKey.nestedKey2`
- I was going to use the `revalidate` key in `getStaticProps` to be cool, but then I realized that if a user refreshes the page, they should _always_ see the correct price.
HTML tags | canvas
Tags: html, tags, canvas
Published: 2021-10-19 06:46:35

It is used to **draw graphics and animations using JavaScript**. There are two APIs available for this: [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).

The `<canvas>` element **is transparent** as it is just a container for graphics.

To make it more accessible, **an alternative content must be provided within** `<canvas>`, which will be displayed in browsers with JavaScript disabled or that do not support the element.

You can **give a dimension** to the `<canvas>` by giving a value in pixels to its `width` and `height` attributes. It could also be done by assigning values ​​to it with CSS, but doing so resizes the image during rendering to fit the size assigned with styles, which can cause the final result to appear distorted. It is therefore better to **use the attributes of the** `<canvas>` **element directly**, either in the HTML itself or assigning them with JavaScript. **By default, browsers usually bring a size of 300px wide by 150px high**.

**There is a maximum size** for the `<canvas>`, which varies with browsers but is typically 32,767 pixels. If the width and/or height are greater than that, the element will not be usable and the commands to draw will not work.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | [Support](https://caniuse.com/canvas)
CompileSwift – October MacBook Pro Event, Trick or Treat?
Tags: apple, compileswift, hardware, podcast
Published: 2021-10-20 03:08:57

---
title: CompileSwift – October MacBook Pro Event, Trick or Treat?
published: true
date: 2021-10-19 06:32:56 UTC
tags: Apple,CompileSwift,Hardware,Podcasts
canonical_url: https://peterwitham.com/apple/cs-s03-e15/
---

{% spotify spotify:episode:0szgUJsnjRHy8A5L32ZDh8 %}

Apple held an October 2021 event to introduce the new MacBook Pro laptops. In this episode, I go into the details and my thoughts on the new machines. Are they what developers asked for, or are they falling short? You’ll have to listen to find out.

### Subscribe / Follow The Podcast
[Follow in your podcast player here](https://followthepodcast.com/compileswift)
Laravel 8 with Bootstrap (Part 1)
Tags: beginners, laravel, bootstrap, livewire
Published: 2021-10-19 06:17:54

Sometimes we have trouble with Tailwind CSS. Now we have jetstrap package to solve this problem. This package converts auth blade and profile blade for bootstrap. We will see how to do that.
![Laravel 8 with Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3dfwrfdrtijooj86d6i.png)
 
First and foremost, we must establish a Laravel 8 application.

```
composer create-project laravel/laravel bootstrap-app
```

Go to the our project file.
```
cd bootstrap-app
```
####Configuration of a Database

Open your IDE's.env file to see the configuration.

![Configuration of a Database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p6cqpn10yfpyj9xva01.png)
 
The command above only install Laravel, however, if you want to install Jetstream together then either

```
composer require laravel/jetstream
```
We must install one of the stacks, either a livewire or an inertia stack; in this example, I will only use a livewire stack because it has already set up everything I need for the app's installation..

```
php artisan jetstream:install livewire
```
![with tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py0kpynbz139vv59kjfr.png)
 
Now we can install magical package for this project.

```
composer require nascent-africa/jetstrap --dev
php artisan jetstrap:swap livewire
```

![with bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wulsgkwwerjhvm2vk4jg.png)
 
 
####Bringing It All Together for Installation

To remove tailwindCSS from your package, remove it together with any of its dependencies after installing Jetstrap.Then install and build your NPM dependencies, and then migrate your database.
```
npm install && npm run dev

php artisan migrate
```
Test Our Project

```
php artisan serve

```
Let's meet again for the brand new tutorial.
SQL vs NO-SQL
Tags: beginners, webdev
Published: 2021-10-19 06:12:16

### What is SQL?

SQL Stands for Structured Query Language is a standardized programming language that's used to manage relational databases and perform various operations on the data in them.
SQL is used to communicate with a database.
You can easily create and manipulate the database, access and modify the table rows and columns, etc. 
Examples of SQL  MySQL, Oracle, SQL Server, PostGre, etc.

### Advantages of SQL:
* High-Speed Query Processing
* Standardized Language
* Portability
* More than one Data View

### What is NO-SQL?

NoSQL databases are non-tabular databases and store data differently than relational tables. NoSQL databases come in a variety of types based on their data model. The main types are document, key-value, wide-column, and graph. They provide flexible schemas and scale easily with large amounts of data and high user loads.
Examples of NoSQL are MongoDB, DynamoDB, Cassandra, etc.

### Advantages Of NO-SQL:
* Flexible schemas
* Horizontal scaling
* Fast queries due to the data model
* Ease of use for developers

### SQL vs NO-SQL
```
       SQL                     vs                NO-SQL

1.SQL is a relational                1.No-SQL is a non-relational
database management system.            or distributed database 
                                         management system.
 
2.The query language used            2.The query language used in 
in this database system is            the No-SQL database systems
a structured query language.           is a non-declarative query 
                                         language.

3.The schema of SQL databases        3.The schema of No-SQL Data-
 is predefined, fixed,                 base is a dynamic schema
 and static.                            for unstructured data.

4.It follows the ACID model.         4.It follows the BASE model.

5.These databases are vertically     5.These databases are 
 scalable.                              horizontally scalable.

6.The database type of SQL           6.The database type of No-
is in the form of tables, i.e.          SQL is in the form of 
in the form of rows and columns.        document key-value, and 
                                              graphs.

7.Complex queries are easily         7.NoSQL databases cannot 
 managed in the SQL database.           handle complex queries.

8.All SQL databases require          8.Many No-SQL databases do 
object-relational mapping.              not require object- 
                                          relational mapping.

9.This database is not the           9.No-SQL database is a 
 best choice for storing               perfect option for storing 
 hierarchical data.                      hierarchical data.

10.SQLite, Ms-SQL, Oracle,          10.Redis, MongoDB, Hbase, 
PostgreSQL, and MySQL are              BigTable, CouchDB, and 
examples of SQL database systems.      Cassandra are examples of 
                                        NoSQL database systems.
Difference between HTTP1.1 vs HTTP2
Published: 2021-10-19 06:10:52

HTTP1.1
> It supports connection reuse i.e. for every TCP connection there could be multiple requests and responses, and pipelining where the client can request several resources from the server at once. However, pipelining was hard to implement due to issues such as head-of-line blocking and was not a feasible solution.
> It is relatively secure since it uses digest authentication, NTLM authentication.
> Expands on the caching support by using additional headers like cache-control, conditional headers like If-Match and by using entity tags.

HTTP2
> Uses multiplexing, where over a single TCP connection resources to be delivered are interleaved and arrive at the client almost at the same time. It is done using streams which can be prioritized, can have dependencies and individual flow control. It also provides a feature called server push that allows the server to send data that the client will need but has not yet requested.
> Security concerns from previous versions will continue to be seen in HTTP/2. However, it is better equipped to deal with them due to new TLS features like connection error of type Inadequate_Security.
> HTTP/2 does not change much in terms of caching. With the server push feature if the client finds the resources are already present in the cache, it can cancel the pushed stream.
FIRST! - An Introduction
Tags: webdev, beginners, introduction, programming
Published: 2021-10-19 05:58:32

You are now reading my first blog post. Not just wherever you happen to be reading this, but my first blog post, ever. I am being encouraged/made-to start a technical blog by my coding boot-camp: [Flatiron](https://www.flatironschool.com). Sharing my thoughts and opinions publicly, in a forum, is not something I’m naturally comfortable with, but I really love coding (whatever that means) and I’m willing to do whatever it takes to be the best, and maybe help/inspire others, as well.

---

### What to expect?

At first, you can expect articles centered around basic HTML/CSS/JS, like “making a fetch call”, or “the difference between findIndex() & indexOf()”, etc., but coming from a novice. Sharing my own struggles with a given topic will hopefully be more endearing to other novices facing similar struggles.

---

### Who am I?

My name is Eric Hafvenstein. I’ve been learning HTML/CSS/JS for around seven months now and I’m about five weeks into a 40 week software-engineering course, on-line, with Flatiron. I’m still pretty green, but programming feels natural to me. I’m 33 years old, so thinking about all the years I should have been programming is dismaying, for sure. I was so close too! I remember, as a teenager, moving files around and hiding them from my mother in the File Explorer and using MS-DOS. I couldn’t tell you what I was doing with MS-DOS, but I did use it. I was one nudge away, but life became about more than computers and video game, I guess (mostly girls).

Although I am sad that I’m not a programmer with close to 20 years experience, I am overjoyed that I finally found something I’m this passionate about! Programming is just fun! Whenever I get a relatively complicated piece of code to execute, I feel like I cleared a grueling dungeon.

---

### *Finally*

These last seven months of programming have changed my life! In fact, it’s led me to Flatiron and to here, this blog post that you’re still reading. Thanks, btw, I really appreciate you getting this far. This is the end of, what I hope is, the first of many articles I post throughout my adventures in programming.

#### Credits

---

##### - [**pixellife**](https://www.dafont.com/pixellife.font) font in cover image by [**William Clifford**](http://www.williac.com/)
Python e Redis: Utilizando Pub/Sub
Tags: redis, python, pubsub
Published: 2021-10-19 05:48:09

Acredito que você já tenha ouvido falar sobre o conceito de `publisher/subscriber`, certo? E você sabia que o Redis possui essa comunicação nativamente?

De maneira muito sucinta, vou mostar um exemplo prático e simples utilizando Redis e Python usando a comunicação `publish/subscriber`.

## O que preciso?

Para esse exemplo são necessárias três ferramentas instaladas na sua máquina:

- Python 3.8 ou superior
- pip
- Redis

Os detalhes de instalação vou pular porque esse exemplo pode ser feito em qualquer SO. Basta seguir a documentação de instalação de cada item.

Por fim, uma vez instalado o pip, vamos instalar o redis (ah, para quem não sabe, o `pip` seria o `npm` do python) com o comando abaixo:

```shell
pip3 install redis
```

## O Script

Crie um arquivo chamado `app.py` e cole esse script:

```python
from redis import StrictRedis
from time import strftime, sleep

client = StrictRedis(host="localhost", port=6379)

subscriber = client.pubsub()
subscriber.psubscribe('channel_test')

while True:
    messages = subscriber.get_message()
    now = strftime('%d/%m/%Y:%H:%M:%S')

    if messages:
        print(f'{now} - {messages["data"]}')
    else:
        print(f'{now} - Nothing here!!!')
    sleep(1)
```

## Explicando cada linha
Importação do redis para o projeto (obviously) , importação de formatação de data da classe time e também o sleep, que vai fazer com que nosso while sofra uma pausa de 1 segundo em cada iteração.
```python
from redis import StrictRedis
from time import strftime, sleep
```

Conexão com o redis
```python
client = StrictRedis(host="localhost", port=6379)
```
Especificando que vamos nos subscrever num canal chamado `channel_test`
```python
subscriber = client.pubsub()
subscriber.psubscribe('channel_test')
```
Bloco while que vai ficar rodano sem parar o processo de `subscribe`. Uma vez que seja publicada alguma mensagem no canal `channel_test`, vai ser printado no console.
```python
while True:
    messages = subscriber.get_message()
    now = strftime('%d/%m/%Y:%H:%M:%S')

    if messages:
        print(f'{now} - {messages["data"]}')
    else:
        print(f'{now} - Nothing here!!!')
    sleep(1)
```

## Publicando no canal
Redis instalado? Tá na hora de usar esse carinha.
No terminal/prompt, rode o comando:
```shell
redis-cli
```

Se tudo tiver ocorrido bem na instalação e o redis estiver rodando, você deve estar com o shell do redis habilitado.

Para publicar, basta digitar:
```shell
publish channel_test "um conteúdo qualquer aqui"
```

Ah, a gente ainda não executou nosso script python. Pelo terminal, acesse o diretório de onde está nosso __app.py__ e execute com o comando:
```shell
python app.py
``` 

## Resultado

Script rodando? Redis rodando? Publish realizado? 
Pah, a mágica acontece ...

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn0oeua25mv2cyh6mkuu.png)

Agora exercite sua criatividade e implemente outras coisas bacanas usando `redis` como `publisher/subscriber` e seja feliz =D =D =D