teleren/devto huggingface dataset:
HTML Basic Elements
Tags: html, css, webdev, codenewbie
Published: 2021-06-27 21:51:38

What in the heck is HTML? HTML stands for hypertext markup language. HTML is a language that is responsible for the structure of a website.

There are endless possibilities when it comes to how to structure a webpage.  HTML uses basic elements that direct the content and how it will be displayed on the page.  These elements use opening and closing tags and are not case sensitive.

Elements include:

*note: the elements go inside of these <>

body: This is the body element -- inside the body element of your document there are the following two elements: h1 and p.

h1: Text Header -- h1 being the largest font size h2, h3, h4, h5 and  h6 being the smallest font size.

p: paragraph -- The browsers automatically add a single blank line before and after the 'p' element.

a: hyperlink element -- If you want to have a website link, create it like this: 'a' href="https://CharityParks.com" Click link to go to website!

b: Bold Text -- Everything inside the 'b' tags are bolded.

br: This is a line break.  There is no content to store in it and it doesn't need a closing tag.

img: Image Tag -- it creates a place for an image that is referenced. It requires src (the specific path to the image) and alt (specifies alternate text for the image in case the image won't display).

There are so many more HTML elements but these are the basics.  Have fun with them and in a future blog post i will give some more examples of how to create beautiful and interesting webpages!
Create a PWA with Sveltekit | Svelte
Tags: svelte, typescript, sveltekit, pwa
Published: 2021-06-27 21:33:27


 I've been using sveltekit and svelte for over a year now. I'm also waiting for it to be matured enough to beat NextJs in terms of community. But I like them both.
 
 So, on this weekend I wanted to turn one of my SvelteKit projects into a PWA. When I wanted to do the same with NextJs projects there were a lot of tutorials. But I couldn't find many guides for svelte beginners.

   That's because svelte has pwa functionality built into it.
   
   

## Note !
### Basic things for all PWAs
 -  A website
 -  manifest.json [ basic icons,names,shortcuts]
 -  service-worker [ for offline cache ]


 So let's get on with it.
 
![lets-go.gif](https://media.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy.gif)

## First:
We'll create a demo Sveltekit project:
```bash
npm init svelte@next my-app
```

![create.png](https://imgur.com/LIfwJFA.png)

Then we'll choose a simple config in vite for the sake of this article:

![config.png](https://imgur.com/uyTDDVf.png)

Choose typescript because `#typescriptgang`:

![svelte-kit-config.png](https://imgur.com/VePlaaP.png)


Now we have a demo project set up with typescript, it will be straight-forward from here on:

![note.png](https://imgur.com/gZLK7Jh.png)

Let's get into our directory:
```bash
cd my-app
```
And run:
```bash
yarn
```
![yarn-output.png](https://imgur.com/v5RgR26.png)

After that,
- In the /static directory, We'll create a manifest.json.
- When svelte compiles the whole application, it copies static files over to the build folder.

![manifest.json](https://imgur.com/WokCIZk.png)

{% gist https://gist.github.com/100lvlmaster/3a7d37a400897114d5c64d88b81e4acc %}

Then we'll refer our `manifest.json` in `src/app.html`.

![app.html](https://imgur.com/s43YGuD.png)

And finally we'll create our `src/service-worker.ts`

_Svelte will automatically detect the service-worker in the src folder's root and then register our service worker during build_.
_Isn't that neat?_

![service-worker.ts](https://imgur.com/0aLDOHU.png)


{% gist https://gist.github.com/100lvlmaster/8e966302b2e03404203e965424cb2bca %}

Now we just need to build our app using `yarn build`:
![build.png](https://imgur.com/PjkpOEy.png)

Now we can preview our build using `yarn preview`:

![preview.png](https://imgur.com/GCYjrnL.png)

😯 thats the _'install app'_ button,

![output-button.png](https://imgur.com/jtwLSiw.png)

Svelte makes it easy to make PWAs.

The source code of this project lies at:

https://github.com/100lvlmaster/svelte-pwa

You can find me at:

https://100lvlmaster.in
x2x definitive guide
Tags: ssh, xorg, kvm
Published: 2021-06-27 20:58:28

So you want to share your clipboard across the machines? `x2x` is free software to do that over x server protocol.
1. Install x server and x2x on both machines. On windows/wsl [use these instructions](https://techcommunity.microsoft.com/t5/windows-dev-appconsult/running-wsl-gui-apps-on-windows-10/ba-p/1493242).

2. On remote system, if you use gdm, edit `/etc/gdm3/custom.conf` to add:

    ```
    [security]
    DisallowTCP=false
    ```
    and restart gdm `sudo service gdm3 restart`.

3. Find out on which display X server is running on remote machine.
    ```bash
    # on remote machine,
    $ echo $DISPLAY # This command assumes that you are logged in using some GUI method, vnc/rdp/nomachine etc.
    # Let's say it was 0.0
    ```

4. On local machine issue below command:
 ```bash
 # on local machine:

 $ ssh -XC remoteMachine x2x -east -to :0.0
 ```

## References
1. [Ubuntu wiki x2xHowTo](https://help.ubuntu.com/community/X2xHowto)
Develop Kusto request from VsCode
Published: 2021-06-27 20:10:05

<sub>Photo by <a href="https://unsplash.com/@casparrubin">Caspar Camille Rubin</a> on <a href="https://unsplash.com/s/photos/query">Unsplash</a></sub>

Finally, a Visual Studio Code extension to easier Observability:
[Kusto Notebooks](https://marketplace.visualstudio.com/items?itemName=donjayamanne.kusto)  only in VS Preview.

It will let you develop Kusto query in your notebook and interact with the result.

It features :
- Run Kusto Queries
- Graphs & Data Viewer
- Code Completion
- Syntax highlighting
- Code refactoring
- Code formatting
- Kusto panel with access to Clusters, Databases, Tables, etc
 

Hope it helps !
Texeech-A pdf read aloud reader
Tags: python, programming, productivity, libraries
Published: 2021-06-27 19:46:44

The name is "Texeech" is given by me.

Inspiration:

The thing that inspired me is that sometimes keeping our eyes glued to the device screen puts some severe effects on our eyes and it becomes tiresome too to read the pdf continually. That is the reason this thing is developed to provide relief to the eyes.

What it does:

The code extracts the document information and converts the text into speech and reads the words aloud following the punctuation rules.

How we built it:

I first import the python library PyPDF2. PyPDF2 acts as a pdf toolkit. The function of this is to extract the document information and if required then encrypt and decrypt the pdf file. From this library the class PdfFileReader is imported.

The second library imported is pytttsx3. This library is used for text to speech conversion. Using pyttsx3 the application invokes the pyttsx3.init() factory function to get a reference to a pyttsx3.Engine instance. During construction, the engine initializes a pyttsx3.driver. The DriverProxy object is responsible for loading a speech engine driver implementation from the pyttsx3.drivers module. After construction, the application uses the engine object to register and unregister event callbacks, produce and stop speech, get and set speech engine properties; and start and stop event loops.

At the end a loop is run to extract information of each page and read it aloud in a specific volume of our choice and also the male or female voice of our choice.

Challenges we ran into:

The challenges I faced was that after multiple attempts and putting the pdf in the correct location was the program able to read aloud the pdf.

Accomplishments that we're proud of:

The programme was debugged successfully and it can help people to listen to it when they feel tired while continually gluing their eyes to the screen.

What we learned:

Learnt the use of two python libraries

What's next for Texeech:

Thinking of building an app for android, to recognize handwritten texts in pdf and reading them aloud and also to read aloud various scientific formulas.

The code repository is given below:
https://github.com/sonu874/Texeech--Text-to-Speech.git

Please feel free to make changes for the improvement of this application.
Replace Graphiql With Graphql Playground Using These Simple Steps
Tags: gatsby, react, graphql, javascript
Published: 2021-06-27 19:43:34

Original Post Link => https://webbrainsmedia.com/blogs/replace-graphiql-with-graphql-playground

Graphiql is the default IDE for working with Graphql API in Gatsby. But Gatsby also support, newer and more featured IDE known as Graphql Playground. Graphql Playground provides us with additional features like a nice fully customizable UI interface, multiple tab options, detailed docs drawer, copy CURL option etc. These features makes building queries easy and fun.
So, lets see how we can swap Graphiql for Graphql Playground.

## Steps To Replace Graphiql To Graphql Playground:

### 1) Install dotenv dependency

For replacing the IDE we need to declare an environment variable and for that environment variable to load in `process.env` we need to use an dotenv package. You can install it by running this command.

```sh
npm install dotenv
```

### 2) Define the environment variable

For gatsby to know that we want to use Graphql Playground we need to define an environment variable `GATSBY_GRAPHQL_IDE=playground`. We can define this variable in an `.env` file. Its a best practice to seperate environment variables for development and production. So, we can define the env files in our root folder like this `.env.development` and `.env.production`.

```
├── node_modules
├── public
├── src
├── static
├── .env.development
├── .env.production
```

Now, In the `.env.development` file define this key value pair.

```
--------------------
||.env.development||
--------------------
GATSBY_GRAPHQL_IDE=playground
```

### 3) Update gatsby-config.js

Inside your gatsby-config.js file at the very top require the dotenv plugin and provide the path to the appropriate `.env` file.

```js
--------------------
||gatsby-config.js||
--------------------
require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {
```

Now when you run `gatby develop`. it will set the `NODE_ENV` to development, and the dotenv package will load the environment variables defined in `.env.development` file.

Finally, go to `http://localhost:8000/___graphql` and use the newer and nicer Graphql Playground IDE.

Original Post Link => https://webbrainsmedia.com/blogs/replace-graphiql-with-graphql-playground
Class Fields in JavaScript 🔥
Tags: webdev, javascript, beginners, tutorial
Published: 2021-06-27 19:30:33

<p><span class='first-letter'>I</span>n JavaScript, there are two types of object fields (properties and methods):</p>

#### 1️⃣ Public 👭
Accessible from anywhere. They comprise the external interface. Until now we were only using public properties and methods.

#### 2️⃣ Private 🔐
Accessible only from inside the class. These are for the internal interface.

Class fields are public by default, but private class members can be created by using a hash `#` prefix.

### Class Field Syntax

- You can define new private members
- You will get error if you break the access rule
- It has public and private static fields, which allow you to declare class member that can be accessed without creating instance of the class

Using variable like `_variableName`, it means we can use that variable only in the class.

<u>example</u>

```js
class GetDateTime {
	_start = 0

	getDate() {
		if(true) {
			this._start = new Date()
		}
	}
}
```

But this does not prevent `_start` variable accessible publicly. Checkout here 👇

```js
let date = new GetDateTime()
console.log(date._start) 
// Thu Jun 24 2021 16:36:06 GMT+0530 (India Standard Time)
```

To create real private instance you can use `#` to create **private variables.**

📝 <mark>NOTE</mark>: You just need to replace `_` with `#`

```js
class GetDateTime {
	#start = 0

getDate() {
		if(true) {
			this.#start = new Date()
		}
	}
}

let date = new GetDateTime()
console.log(date.#start) 
// Uncaught SyntaxError: Private field '#start' must be declared in an enclosing class
```

The encapsulation is enforced by language. 

It has also support for **private methods**.

<u>Example:</u>

```js
class GetDateTime {
	#start = 0

  getDate() {
  	if(true) {
  		return this.#getNow()
  	}
  }

  #getNow() {
  	this.#start = new Date()
  }
}

let date = new GetDateTime()
console.log(date.getDate()) 
// Thu Jun 24 2021 16:55:32 GMT+0530 (India Standard Time)
```

The private methods can only be accessible inside of the class.

**Private static fields**

You can also create private static variable.

The limitation of static variables being called by only static methods still holds.

```js
class GetDateTime {
	static #start = 0

    static getDate() {
  	    if(true) {
  	        this.#start = new Date()
            return this.#start
  	    }
    }
}
console.log(GetDateTime.getDate()) 
// Thu Jun 24 2021 17:53:02 GMT+0530 (India Standard Time)
```

### Reference 🧐

<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">Private Class Fields</a>

<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
Add Random Looping Background Music Using FFmpeg
Tags: ffmpeg
Published: 2021-06-27 19:33:12

---
title: Add Random Looping Background Music Using FFmpeg
published: true
date: 2021-06-27 19:25:36 UTC
tags: FFmpeg
canonical_url: https://donaldfeury.xyz/add-random-looping-background-music-using-ffmpeg/
---

So recently I decided to try adding some background music to my videos so it isn't just me blathering the whole time. Naturally, I turn to my weapon of choice in these cases, FFmpeg.

The music I use for this is from a project called [StreamBeats](https://www.streambeats.com/), you should check it out.

## Select Random Music

For the first part, I wanted to pick a random music file from a directory and use it later. For this, I wrote a simple script:

```
#!/usr/bin/env sh

dir=$1
find "$dir" | shuf -n 1 > tracklist.txt

head tracklist.txt

```

1. I pass in the directory to use
2. I list out of contents of that directory using `find`
3. I pipe that output to `shuf`, which randomizes the list of files. With the `-n 1` flag, it will output only the first line
4. I write the output of all that to a text file for reference later, as well as using `head` to list that file to stdout

## Add Music

Time for the FFmpeg magic:

```
#!/usr/bin/env sh

video=$1
bgm_dir=$2
output=$3
bgm="$(random_music "$bgm_dir")"

ffmpeg -i "$video" -filter_complex \
    "amovie=$bgm:loop=0,volume=0.03[bgm];
    [0:a][bgm]amix[audio]" \
    -map 0:v -map "[audio]" -shortest -c:v copy "$output"

```

1. I have three arguments here

- The video to add the music to
- The directory you want to pick the random music from
- The path to write the new file to

1. We get the music file to load in using the random\_music script and save it for later
2. I'll talk about the important parts of this FFmpeg command

- `amovie=$bgm:loop=0,volume=0.03[bgm];` - this loads the randomly chosen music file to make its audio stream available and with the loop argument set to 0, loops it indefinitely. The `volume` filter is used to adjust the volume of the music to be more "background music" appropriate
- `[0:a][bgm]amix[audio]` - combines the audio from the video and the newly loaded background music into one audio stream
- `-shortest` tells FFmpeg to stop writing data to the file when the shortest stream ends, which, in this case, is our video stream. The audio stream technically never ends since it loops forever.

Tada, you should have a new version of your video with the randomly chosen music looping for the duration of the video.
POC where Angular requests URL of image and Quarkus provides it through a raw copy and base64
Tags: angular, java, github, quarkus
Published: 2021-06-27 19:19:06

A simple POC where Angular requests the URL of an image to the Quarkus back end and then renders the image in the screen. Quarkus returns the image in two ways: (1) a simple copy from the URL of the image; (2) the image encoded in Base64 with the Media Type.

The project is available on GitHub [poc-http-copy-images](https://github.com/felipewind/poc-http-copy-images).

![Flow of the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdf0u0fbtsf5flh1dw7u.png)

# Hypothetical problem to solve

Let's imagine a hypothetical situation where only the backend have access to the URL of some images and you want to render these images on the frontend.

In this POC, I propose two ways of solving this problem:
1. The backend access the URL of the image and expose the same Response object;
2. The backend access the URL of the image, encode it into Base64 and expose it into a JSON object with the Media Type.


# Running the POC

## Mock Server

Optionally, you can run a Quarkus mock server which will provide three endpoints with the below images:
- http://localhost:8090/image/earth.png
- http://localhost:8090/image/moon.jpg
- http://localhost:8090/image/solarsystem.svg

*** Optionally, because you can choose any image from the internet to run the test.

Enter inside the mock-server folder and type:
```
$ mvn quarkus:dev -Ddebug=5006
```

The swagger will be available at:
- http://localhost:8090/q/swagger-ui

![Mock-server swagger backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0wocakt3uuq8rthn87h.png)

## Quarkus backend

Enter inside the quarkus folder and type:
```
$ mvn quarkus:dev -Ddebug=5006
```

The swagger will be available at:
- http://localhost:8080/q/swagger-ui

![Quarkus swagger backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iwjasbrmhbytnr3q4vj.png)

## Angular frontend

Enter inside the angular folder and type:
```
$ npm install
$ ng serve
```

The front end will be available at:

http://localhost:4200/

Ok, in this screen, just put the URL of any image you desire (of the mock or the internet) and click on `Load Image`:

![Load image menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y20z9wkcxmenznaow0u.png)

After clicking in the button, the image will be displayed in two columns, the left one is the raw copy from the URL and the right one is the Base64 version:

![One image rendered in the frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwd57rh2s08l6qe6a42t.png)

Any new image searched will be shown and the previous ones will slide down:

![Two images rendered in the frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac4eq84vkjv4bj5cp59t.png)
Introduction to Law and Artificial Intelligence - Upcoming event
Tags: ai, machinelearning, datascience, deeplearning
Published: 2021-06-27 19:11:56

Join me @ AI Advocates Community to learn how Law affects artificial intelligence and also how artificial intelligence affects the law field.

Many people don't really understand the concept of law and AI.
So AI Advocates Community is advocating for it.

DATE of the event:July 3, 2021

Register for the event using the link below;

https://www.eventbrite.com/e/introduction-to-law-and-ai-tickets-159225560939
MongoDB Crash Course 2021 - DataGrip
Tags: mongodb, database, django, react
Published: 2021-06-27 19:03:49

This is my latest crash course on Bek Brace.
In this course, you will get the fundamentals of MongoDB, how to create an account, to setup the Shell and the Compass; you will also have a comparison between RDBMS and mongoDB, giant customers of, stack overflow survey 2020 and more 

{%youtube EjcAqAJjmEo  %}


We will work on both the mongoDB shell and DataGrip 💾.
You will know about the basic queries and commands in mongoDB 🍃 such as how to create database, tables, insert, find, update, delete document or drop a database and much more ..
I will also show you how to run your database on MongoDB Atlas, by creating a free cluster on a Cloud based server

Link to Download DataGrip 💾
https://www.jetbrains.com/datagrip/?g...

Link to download cheat sheet 🧻
https://github.com/BekBrace/mongoDB_c...

Differences between SQL and NOSQL 💼
https://www.youtube.com/watch?v=-kA2-...

Social Media 🔗
Facebook                     : https://www.facebook.com/bekbrace​​ 
DEV profile                   : https://dev.to/bekbrace​​
Github page                 : https://github.com/BekBrace​
Ignore headers of csv files with papaparse 
Tags: node, papaparse, csv, sequelize
Published: 2021-06-27 18:33:33

I have a csv file that I need to parse and store in a database. I use sequelize for this 

Here is how I defined the model of my table in sequelize : 
```  
    const Person= sequelize.define(
      'person',
      {
        id: {
          type: DataTypes.UUID,
          primaryKey: true,
          defaultValue: uuidv4(),
          allowNull: false
        },
        name: {
          type: DataTypes.STRING,
        },
        age: {
          type: DataTypes.INTEGER,
        }
        }, {
            createdAt: false,
            updatedAt: false,        
            tableName: 'person'
         }
    )
    return Person
  }
```
then I have a csv file "test.csv": 
```
he ,dd
liza, 23
sarah, 22
```

basically I can't change the headers in my csv file and I have to keep the same structure defined in the db, I use papaparse to parse this file :

```
        const papa = require('papaparse');
        const fs = require('fs')
        
        const file = fs.createReadStream(__basedir + "/test.csv");
  

        papa.parse(file, {
          header: true,
          step: async function(results, parser) {
            console.log("Row data:", results.data);
            try{
              await Person.create(results.data)

            }catch(e){
              console.log(e)
            }

          }
      });
```
in output I get the following error :

```
SequelizeUniqueConstraintError: Validation error
```
the name, surname and age fields are null in the database

I am looking for a solution to ignore the headers of the csv file, how can I do that?
Hot-air balloon Retrospective Template
Tags: agile, xp
Published: 2021-06-27 18:20:23


Hi there! This was originally posted on [my blog](https://sonnet.io). Check it out for more stuff like this.

---

I'm a big fan of [Fun retros](https://www.funretrospectives.com), and I like smuggling my doodles into my work\*.

If your retrospectives feel a bit repetitive or you're working with a team you don't know well and want to learn a bit more about them before you hit the ground, check out [Hot-air Balloon, Bad Weather](https://www.funretrospectives.com/hot-air-balloon-bad-weather/). It's quite versatile and works well with remote setups.

And, feel free to use the template I made!

- <a target='_blank' href='https://sonnet.io/images/hot-air-balloon/borders.png'>Version A (borders)</a>
- <a target='_blank' href='https://sonnet.io/images/hot-air-balloon/no_borders.png'>Version B (plain)</a>

It should work fine as a background for Mural, Miro, Figma Jam board or whatever is your jam (fig's mine).

![Retro template](https://sonnet.io/images/hot-air-balloon/preview.png)

---

\* There's still a bunch of businesses in the Square Mile with ponies hidden in their documentation. The more JIRA you use, the more ponies you get.

PS. Speaking of facilitation materials, if you're looking for something less developer-oriented check out the [Hyper Island Toolbox](https://toolbox.hyperisland.com).