teleren/devto huggingface dataset:
I threw a confetti party on my website, Find out how! | Spotlight of the day series
Tags: spotlightoftheday, uischool, css, html
Published: 2022-02-08 06:56:53

---
title: I threw a confetti party on my website, Find out how! | Spotlight of the day series
published: true
date: 2022-01-31 20:38:11 UTC
tags: Spotlightoftheday,UISchool,css,html
canonical_url: https://codingislove.com/i-threw-a-confetti-party-on-my-website-find-out-how-spotlight-of-the-day-series/
---

Learn how to shoot confetti on your website using HTML canvas and javascript and make it snow!

**Reference links:**

- Canvas-confetti : https://github.com/catdad/canvas-confetti
- Code example : https://codepen.io/Ranjithkumar10/pen/mdqeoVp

{% youtube P-8xgdFUPX8 %}
A peer-to-peer routing protocol to run your decentralized network.
Tags: web3, blockchain, python, p2p
Published: 2022-01-31 20:37:39

qPeer, the road for a NEW INTERNET! 💚 

After a year of research and months of coding & design, qPeer is finally here 😃 The most powerful, easy-to-use peer-to-peer protocol to help you build your decentralized network for your blockchain & dApp ✨ As we know Web3.0 is full of technical problems, with qPeer, we aim to solve those problems with extreme efficiency and scalable design 🔥 Time to give clients their privacy back 👀 Build your app on a decentralized network and be one of the pioneers in a new world, in a new internet 🌏💻

Support the creators:
🎯 Star the repository: https://github.com/Quimzy/qPeer
🎯 Donate in crypto:
Bitcoin: bc1qsrgawhx3g639y9pep7yqa84s26zrtrwwfcx9gd
Ethereum: 0xCaf0726d4eFE5291e23f9351553Cfd2DB1Af7A48
HVM: a massively parallel functional runtime
Tags: functional, haskell, news, blockchain
Published: 2022-01-31 20:26:10

---
title: HVM: a massively parallel functional runtime
published: true
description: This new runtime may speed up pure functional languages by an order of magnitude
tags: functional, haskell, news, blockchain
//cover_image: https://direct_url_to_image.jpg
---

I've just finished the prototype of HVM, a beta-optimal, massively parallel, GC-free runtime for functional programming languages. It may be the key to fully harvesting the parallelism of CPUs and GPUs with no programmer action. It already beats GHC, the fastest functional compiler in the world, in many cases. On its repository, there is a description of how all it works:

[https://github.com/kindelia/hvm](https://github.com/kindelia/hvm)

What do you think?
How to fix Error 404 on Netlify for SPAs built with Reactjs
Tags: react, javascript, netlify, webdev
Published: 2022-01-31 20:25:47


## Introduction

Hosting a React application on the Netlify platform often runs into an "Error 404". This is because an app built with Reactjs is a SPA (Single Page Application). Routing is done on the application and no HTTP calls are made to fetch pages server-side.

To fix this error, 

1. go to the `public` folder of your application
2. create a file name `_redirects`( no file extension)
3. add the following content to the `_redirects` file:
```typescript
/*    /index.html   200
```
4. Rebuild the application and the error is fixed.


This tells Netlify to route all redirects to the `index.html` which is the root entry of your application. In Firebase hosting, this is usually handled inside a config file inside the project root.
Adding React to a website.
Tags: javascript, react, java, typescript
Published: 2022-01-31 20:21:43

React can be added to a website without any special tools or installations.

First, we add React library as two **script** tags to the **head** of the HTML document.

`<script src="https://unpkg.com/react@16/umd
/react.development.js"` cross origin</script>

Next, we need add another script to enable the use of **JSX**.
JSX is a syntax extension to JavaScript, and it is recommended to be used with React.

`<script src="https://unpkg.com/babel-standalone@6/babel.min.js">></script>`

After adding the required script tags, we can start building our React app!

We add a container, that will be used to display something using React.

`<div id="container"></div>`

> You can use any **id ** for your container. React will use it to find container and add content to it.
Convert text to realistic handwriting using Javascript
Tags: codingtutorials, spotlightoftheday, coding, javascript
Published: 2022-02-03 07:13:07

---
title: Convert text to realistic handwriting using Javascript
published: true
date: 2022-01-31 20:18:33 UTC
tags: CodingTutorials,Spotlightoftheday,coding,Javascript
canonical_url: https://codingislove.com/convert-text-to-realistic-handwriting-using-javascript/
---

hello everyone welcome back to another episode of the spotlight of the day series. Today we have a library called [handwritten.js](https://github.com/alias-rahil/handwritten.js) This is a library that helps us in converting text to realistic handwriting.

let me show you an example first.

![](https://raw.githubusercontent.com/alias-rahil/handwritten.js/master/screenshots/lorem-ipsum.jpeg)

This is just text the text is converted into realistic-looking handwriting using the library. if someone sees this, they’ll think that is this actually written by someone by hand. it’s converted it perfectly like almost someone wrote it by hand.  
You can use this library in multiple ways. you can use it using the cli, you can use it in node.js or you can use it in the browser as well. We’ll try to use it in node.js

### Practical use case

let’s say you want to fake your homework and you have some content online you can just copy the content and use this library to convert it into realistic handwriting and you can submit it.

More details are in the full video ![👇](https://s.w.org/images/core/emoji/13.1.0/72x72/1f447.png)

{% youtube https://www.youtube.com/watch?v=AhYO-QIhEc0 %}

The post [Convert text to realistic handwriting using Javascript](https://codingislove.com/convert-text-to-realistic-handwriting-using-javascript/) appeared first on [Coding is Love](https://codingislove.com).
SPO600 W2 - Introduction to 6502!
Published: 2022-01-31 20:18:26

6502!

For week 2, we learned how to start programming in assembly language using 6502!

Assembly language is the more readable way of writing machine language.

It looks something like this:

Example from: 6502 Assembly Language Lab - CDOT Wiki (senecacollege.ca)

```
	lda #$00	; set a pointer at $40 to point to $0200
	sta $40
	lda #$02
	sta $41

	lda #$07	; colour number

	ldy #$00	; set index to 0

loop:	sta ($40),y	; set pixel at the address (pointer)+Y

	iny		; increment index
	bne loop	; continue until done the page

	inc $41		; increment the page
	ldx $41		; get the current page number
	cpx #$06	; compare with 6
	bne loop	; continue until done all pages

```

Lets try to read what is written there.

## The Instructions
The firs 3 letters that you see like `lda`, `sta` or `ldy` are called instructions.
They work like commands and will perform a certain action on the memory( which is something like `#$00`).

The list of instructions are:
```
ADC AND ASL BCC BCS BEQ BIT BMI BNE BPL BRK BVC BVS CLC
CLD CLI CLV CMP CPX CPY DEC DEX DEY EOR INC INX INY JMP
JSR LDA LDX LDY LSR NOP ORA PHA PHP PLA PLP ROL ROR RTI
RTS SBC SEC SED SEI STA STX STY TAX TAY TSX TXA TXS TYA
```
A total of 56 instructions are available.
The ones used in our code are:
Lda (load a)
Sta (store a)
Ldy (load y)
Iny(increment y)
Inc (increment a)
Ldx (load x)
Cpx (compare x)
Bne (branch if not equal)

Something else that we need to understand are where the values are stored. In our case, we use Register-Memory A, X and Y.
`Sta` - this means store the accumulator
`Stx`- Store the X register
`Sty` - Store the Y register

In our example we can see:
Ld (load) a and y (lda and ldy), these mean load values from a and y registers.

We also can see a label on our code: `loop`

The `label` will work together with the `bne` instruction. The` bne` means `branch if not equal`, and it works like a `while true`. Every time the condition is not equal, it will branch to the label, which means it will go back to the start of the loop.

## Finally
This was a really short introduction to 6502 assembly language, but I hope it was helpful to get you to understand how to start on it.
It looks really confusing at first, but when you start to understand how the instructions work it start to make sense and gets easier and enjoyable. 

Thank you for reading!
Deploy Nuxt to Vercel
Tags: vue, nuxt, vercel, deploy
Published: 2022-01-31 19:22:39

Having trouble deploying **Nuxt JS** application to **Vercel**? Yes, me too. Here's how I deploy **Nuxt JS** to **Vercel**. This method is still running on February 1, 2022. Maybe in the future the method of deploying **Nuxt** applications on **Vercel** will change and this method can no longer be used.
***

## 1. Create a file called vercel.json in the project root

This is the contents of the code from the vercel.json file:

```json
{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}
```
***

## 2. Login to Vercel, then click New Project

After logging in, you will be redirected to a kind of dashboard page. Click the **New Project** button to create a new project.

![Vercel New Project button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hergzn3etyi76qq1b500.jpg)
***

## 3. Import project from Git repo

Find your project and click **Import**. I think this is the easiest way to import our project.

![Vercel Import project button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqhpxo4suooa3gvffkso.jpg)
***

## 4. Configure Project

**Vercel** can automatically detect what technology / *framework* we are using in *FRAMEWORK PRESET*. In the **Configure Project** section, click **Build and Output Settings**.

![Vercel Configure Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h99dxzkoszof3nkjide.jpg)
***

## 5. Build & Development Settings

Change *OUTPUT DIRECTORY* to **.nuxt/dist** by clicking *OVERRIDE* on the right.

![Vercel Build & Development Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggkajfgaiyq4pbxnbr33.jpg)
***

## 6. If you prefer yarn

If you prefer to use **yarn**, change it to something like this. Click **Save**, and you're done. Just wait, later your application can be accessed via the URL provided. Usually it will be quick or takes at most 24 hours.

![Yarn Deployment Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyt74c2h4djl4qziev1m.jpg)
***

## 7. That's all

Deploying for free on **Vercel** is useful for testing our application or just want to show our client the appearance or UI.
***

Thanks for reading.
Deploy Nuxt ke Vercel
Published: 2022-01-31 19:10:26

Mengalami masalah ketika *deploy* aplikasi **Nuxt JS** ke **Vercel**? Ya, saya juga. Berikut ini cara saya *deploy* **Nuxt JS** ke **Vercel**. Cara ini masih jalan pada 1 Februari 2022. Mungkin di masa depan cara *deploy* aplikasi **Nuxt** di **Vercel** akan berubah dan cara ini sudah tidak bisa dipakai lagi.

***

## 1. Bikin file bernama vercel.json di root project

Ini isi *code* dari file **vercel.json**:

```json
{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}
```
***

## 2. Login di Vercel, lalu klik New Project

Setelah *login*, maka kamu akan diarahkan ke semacam halaman *dashboard*. Klik tombol **New Project** untuk bikin *project* baru.


![Vercel New Project button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hergzn3etyi76qq1b500.jpg)
***

## 3. Import project dari Git repo

Cari *project*-mu dan klik **Import**. Menurut saya ini adalah cara paling mudah untuk *import project* kita.


![Vercel Import project button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqhpxo4suooa3gvffkso.jpg)
***

## 4. Configure Project

**Vercel** bisa otomatis mendeteksi teknologi / *framework* apa yang kita gunakan di **FRAMEWORK PRESET**. Di bagian **Configure Project**, klik **Build and Output Settings**.


![Vercel Configure Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h99dxzkoszof3nkjide.jpg)
***

## 5. Build & Development Settings

Ganti **OUTPUT DIRECTORY** jadi **.nuxt/dist** dengan cara
klik **OVERRIDE** di sebelah kanan.


![Vercel Build & Development Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggkajfgaiyq4pbxnbr33.jpg)
***

## 6. Jika kamu lebih suka yarn

Kalau kamu lebih suka pakai **yarn**, ubah jadi seperti ini. Klik **Save**, dan selesai. Tunggu saja, nanti aplikasimu dapat diakses melalui URL yang tersedia. Biasanya butuh waktu cepat atau paling lama 24 jam.


![Yarn Deployment Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyt74c2h4djl4qziev1m.jpg)
***

## 7. Sekian

*Deploy* secara gratis di **Vercel** bermanfaat buat *testing* aplikasi kita atau sekedar pengen nunjukkin ke *client* mengenai tampilan / *UI website* yang udah jadi.
***

Terimakasih sudah membaca.
Paracetamol.js💊| #38: Explica este código JavaScript
Tags: javascript, beginners, spanish, webdev
Published: 2022-01-31 18:57:19

## **Explica este código JavaScript**

```js
console.log(Number(2) === Number(2))
console.log(Boolean(false) === Boolean(false))
console.log(Symbol('foo') === Symbol('foo'))
```


-     A: `true`, `true`, `false`
-     B: `false`, `true`, `false`
-     C: `true`, `false`, `true`
-     D: `true`, `true`, `true`

Respuesta en el primer comentario.

---
What is a pg_catalog in postgresql? 
Published: 2022-01-31 18:45:12

- The postgres system is automatically creates and maintains the schema as pg_catalog in each database
- This schema is known as system catalog schema because it towards  information about tables,columns ,other objects and internal bookkeeping information
- PostgreSQL's system catalogs are regular tables. You can drop and recreate the tables, add columns, insert ,update values, and severely mess up your system that way. 
- it is also effectively part of the search_path

https://youtu.be/E4oFcDDWFTU
Github Copilot is hilarious
Tags: github, laravel
Published: 2022-01-31 18:28:03

So I am in the middle of a messy Laravel project I took over. Sometimes when I try to refactor some mess, I just... leave it as it is... then I start to create a comment like:


I just started typing like: // Well, – and it autocompleted like that, wow... a freakin' mind reader!

Then I went as I mean (here it went a bit off, but I continued) tried, then it autocompleted it to "I mean I tried to fix it." Great! I put two more dots and continued with the but and guess what: "but this whole thing is a mess."

```
// Well, it's not really a coupon, but it's a coupon-like thing.
// I mean, I tried to fix it... but this whole thing is a mess.
```

It is just... amazing.😅

Of course, you can utilize GitHub Copilot in a bit better cases, like actually auto-completing code.

For example, I wanted to update the amount on the Invoice whenever an invoice gets saved.

I just typed a quick comment like:

// Update invoice items upon saving Invoice

And bummm... there is the perfect Laravel code.

Of course, it can be off many times, but I find it a beneficial addition.

I'm completely sold on this product, and I hope its monthly cost range will be around a webStorm or PhpStorm.
Sounds in DragonRuby
Tags: dragonruby, ruby, gamedev
Published: 2022-01-31 18:22:43

The sound API in [DragonRuby](https://dragonruby.itch.io/dragonruby-gtk) is a little tricky because at first it seems similar to the sprite API (e.g. using `args.outputs`) but it diverges sharply when you want to have some more control.

So let's take a quick look at audio in DragonRuby!

### Simple Sound Effects

Want to fire off a single sound effect?

Get a sound file in `.wav` format and then add it on to `args.outputs.sounds`:

```ruby
args.outputs.sounds << 'sounds/my_effect.wav'
```

The sound will play once. This is great for one-off sound effects.

### Sound Formats

DragonRuby supports `wav` and `ogg` file formats.

**In versions of DragonRuby before 5.0**, `wav` files would be played once by default, while `ogg` files would loop. This is no longer the case.

For the `args.outputs.sounds` API, both `wav` and `ogg` files will now only be played once.

### Adjusting the Volume Knob

Playing a sound effect in DragonRuby is pretty easy. But what if we need to adjust the volume or some other attribute of the audio? Or maybe loop the audio?

You might think, based on how sprites work in DragonRuby, you could do something like this:

```ruby
# This does not work!
args.outputs.sounds << {
  input: 'sounds/my_music.ogg',
  gain: 0.5,      # Half volume
  looping: true  # Loop the audio
}
```

But this does not work.

Instead, you need to use an entirely different interface: `args.audio`.

`args.audio` is a hash table of sounds.

To add a new sound, assign it with a name:

```ruby
args.audio[:music] = {
  input: 'sounds/my_music.ogg',
  gain: 0.5,
  looping: true
}
```

To adjust an attribute of the audio, access it by the same name:

```ruby
# Turn up the volume
args.audio[:music].gain = 0.75
```

To pause a sound:

```ruby
args.audio[:music].paused = true
```

To completely remove a sound:

```ruby
args.audio.delete :music
```

### More Music Manipulation

This is the full set of options for audio from [the documentation](https://docs.dragonruby.org/#/api/audio?id=setting-additional-audio-properties):

```ruby
args.audio[:my_music] = {
  input: 'sounds/my_music.ogg',
  x: 0.0, y: 0.0, z: 0.0,   # Relative position to the listener, x, y, z from -1.0 to 1.0
  gain: 1.0,                # Volume (0.0 to 1.0)
  pitch: 1.0,               # Pitch of the sound (1.0 = original pitch)
  paused: false,            # Set to true to pause
  looping: false,           # Set to true to loop
}
```

That's it!
How Has Technology Changed Our Lives Positively in 2022?
Published: 2022-01-31 18:19:45

## Top 15 Ways: 
The contribution of technology has totally changed our lifestyle. Below I'm mentioning 15 ways, Hopefully you will enjoy it:)
01: Improving Communication
02: Improving Efficiency
03: Improving Business Sector
04: Extensive Supply of Knowledge
05: Healthcare
06: Employment
07: Protection From Attacks
08: Made New kinds of habits and digital addictions
09: Making Easy of Access to Information
10: Saving Time
11: Making Easy of Mobility
12: Cost Efficiency
13: Created new ways to learn for today’s students
14: Increased Productivity
15: Aids in New Discoveries
Source: <a href="https://getbestelectronicsfind.com/how-has-technology-changed-our-lives/">getbestelectronicsfind.com/</a>
How to avoid every time { npm install }
Tags: javascript, react, npm, github
Published: 2022-01-31 18:02:09

To be very honest with you I'm new to React.js that's why Looking for some sort of demos & Lots of material available on **[GitHub](https://github.com/)**. 

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

Now after garbing such project npm install is necessary for host the complete working project. if there 8 to 10 10 projects git clone repositories for all do the 
npm  install & 
npm start 
I tried to put the node-modules folder and copy that into required working ⚒ project but all in vain.
---***---
Finally I need you to help me guys for avoid this and suitable solution.
making tough decisions fast
Tags: lifehack, decisionmaking
Published: 2022-01-31 17:49:33

Often in work and life we get stuck with a hard-to-make decision. This is a technique I have successfully used numerous times to help myself or other people. It is similar to “Descartes Square”, but I find it easier to memorize and apply.

Basically, you need to compare the best/worst possible outcomes of your action/inaction.

For example, the community has requested you to give 5 minutes “lightning talk”, but you are afraid and unsure. Let’s fill the table below.


Hopefully that technique might save you some time when you need to make a tough decision next time.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur48wmy9jx4jt9hpwilx.png)
Angular Workspace Single App vs. Multi app
Tags: angular
Published: 2022-01-31 17:49:01

Hello all,

I am beginner in Angular and have a question:

What is better for a larger project with different modules (e.g. frontend / backend)?

- All in one app with different modules and components - or.
- Split to different apps in one project / workspace?

Thanks a lot for your opinions and help!
Useful live template for pull requests in IntelliJ IDEA
Tags: intellij, idea, intellijidea, livetemplates
Published: 2022-01-31 17:46:53

Using the pull requests feature in IntelliJ has dramatically improved my personal workflow when reviewing features. It allows you to use all your developer experience from within the IDE, including things like documentation, all your well-known shortcuts, jumping to implementations, finding usages, viewing parameter info and so on.

So first of all a big shoutout to the IDEA team.

It lacks one feature though, which the GitHub UI manages better IMHO: Suggestions. Well IDEA does provide it, in fact, but not so elegant. But it also provides you with live templates: A very powerful feature to insert predefined text snippets into your editor (or wherever you're typing). And mixing both enables you to use suggestions in a more fluent way.

---

To enable such a live template for pull request suggestions, first navigate to _File > Settings > Editor > Live Templates_.

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

Then add a new live template, choose a _Name_, an _Abbreviation_ (the abbreviation is the shortcut which you will use in your editor later using _CTRL + Space_) and a _Description_ and add the following to the _Template text_:

<pre>
```suggestion
$CLIPBOARD$
```
</pre>

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oqpvo8mwll8g67z6shd.png)

Additionally, assign the `$CLIPBOARD$` variable with the `clipboard()` expression, allowing you to insert the copied text as the suggestion directly.

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

You then finally need to enable the live template in _Other_ texts.

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

---

You're then ready to use GitHub's pull request suggestions via the code completion (_CTRL + Space_) using live templates.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f8d5cftcjxe7cg7q99w.gif)

It gets rendered to the known suggestion within the GitHub UI.

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