teleren/devto huggingface dataset:
Get exactly object typeof in JavaScript/JS
Tags: object, javascript, webdev, beginners
Published: 2022-08-04 14:38:44

In these tips, I will share a built-in method in JavaScript that will help you get exact object data type extract for validation or type checking.

So, let's start as you can see below picture where I use type for data type checking but when we want to check between the Array and Object it will show the same output object data type because JavaScript is treated as the object but as a human we see different data type.

![using typeof for object data type checking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gqf9pwwfwusgdw2gk6w.png)

Now we can handle this data type checking using the getPrototypeOf method and its constructor property. Below the picture, you can see the different types of data shown in the output Object is return true and Array is return false. Keep in mind it is very useful when you need exactly object and array type checking.

![using constructor method for object data type checking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m6uek04vmyy9j0r563p.png)


## Are you thinking of real life use case?
Well, let's see the use case suppose you have an API endpoint you don't know after fetching the data will show in an array or object. Or you have an endpoint but the endpoint randomly gives data using sometimes object and sometimes array, now you need to ensure which type of data comes each time.

Below the image, I demonstrate using a fake API that gives random output in array and object. I check if the data type array just simply passes it to another function for the next task. Else if the condition checks the exact object data type and spread that object then wraps it in the array.

![exactly object data type checking real life example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jx3zn1ezofcuzhhkjsnk.png)
Configuring Gofiber API to access session or cookies from JavaScript Side
Tags: go, gofiber, javascript, fetch
Published: 2022-08-04 14:36:00

In this post we gonna learn how to access to api-created cookie or session data from JavaScript side.

## What's inside of Gofiber side (Go) 

Firstly, to access cookie or session data, we have to configure Gofiber app.

```go
app := fiber.New()

app.Use(cors.New(cors.Config{
	AllowOrigins:     "http://localhost:3000",
	AllowCredentials: true,
}))
```

In above, we activated CORS, and defined a server address for JavaScript-used website.

Warning: Using `*` char for `AllowOrigins` property is invalid. Because you might write a specific address for healthy solution.

Then `AllowCredentials` property has to be `true` value.

According to these configs, We can request to this API from `http://localhost:3000` address.

## What's inside of JavaScript Side

For case in above, we can use `fetch` api to request to Gofiber  app.


Get Gofiber app's address `https://localhost:3001`

```js
fetch("http://localhost:3000/example", {
        credentials: 'include'
    })
```


According to example in above, as an option, we can set `credentials` property to `'include'`. Thus we can add cookies or session datas coming from api to browser.
Agora você pode ter o Livebook como um aplicativo no seu computador!
Tags: elixir, livebook, beam
Published: 2022-08-04 14:35:00

Livebook https://livebook.dev/ é um programa que permite que você escreva cadernos de código (_code notebooks_) onde o código é escrito em Elixir. 

E o que é um caderno de código (em inglês, chamamos de _code notebook_, ou só _notebook_)? É um documento que contém código (que pode ser executado se carregado num software como o Livebook) e texto, imagens e outras formas de conteúdo.
 
![Parte do site do Livebook descrevendo os métodos de uso do software](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4fcnr40eh69tebwplfy.png)

Como você pode ver na imagem acima, você pode rodar o Livebook no fly.io ([clique aqui](https://www.youtube.com/watch?v=DSRIL9o5ZiQ) para ver) ou instalar no seu computador (esta é a novidade contada [aqui](https://news.livebook.dev/introducing-the-livebook-desktop-app-4C8dpu)) o _Livebook Desktop app_.

As últimas versões do Livebook tem trazido muitas novidades:
- Code Zen: permite que você esconda tudo que não é código
- A possibilidade de esconder as saídas (opção "Hide outputs")
- Mais de 20 atalhos de teclado (por exemplo, no Windows, "j" vai para a próxima célula e "k" vai para a célula anterior)
- Instalação de pacotes: agora há uma seção no início do documento onde você pode colocar comandos _Mix.install_ que carregarão código de outros no seu caderno de código. Com isto, você pode até mesmo [rodar o Phoenix Live View a partir do seu caderno de código](https://gist.github.com/adolfont/a882fc7c07ab72739a87fa25aedd5142).


**E então, vamos vestir a camisa do Livebook??**


![Vista a camisa do Livebook!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pjts770ccods0xtmu0f.png)
 

Camiseta Livebook do Emanuel Kidoguchi.
Snippet: WP Glossary - Gutenberg aktivieren
Tags: wordpress, functionsphp, wordpresscodesnippet
Published: 2022-08-04 14:33:59

---
title: Snippet: WP Glossary - Gutenberg aktivieren
published: true
date: 2022-08-04 14:24:09 UTC
tags: WordPress,functionsphp,WordPressCodeSnippet
canonical_url: https://bloggerpilot.com/snippet-wpglossary-gutenberg/
---

![Snippet: WP Glossary - Gutenberg aktivieren](https://bloggerpilot.com/wp-content/uploads/2022/08/snippet-wpglossary-gutenberg.png)

Mit diesem Code Snippet aktivierst du für das WP Glossary...

Der Original-Artikel erschien auf [Snippet: WP Glossary - Gutenberg aktivieren](https://bloggerpilot.com/snippet-wpglossary-gutenberg/).
The Easiest Database you could ever need!
Tags: database, python, cpp
Published: 2022-08-04 14:11:21

_As a developer, you might have heard of FireBase. But do you know about.....WaterBase ??_

I've always admired Android in the way of storing persistent data. If you are famaliar with Android Development, you'd know about Shared Preferences. If that's new to you, it is basically a storage utility that Android provides using which you can store data in Key-value form. Shared Preferences are suitable in different situations. For example, when the user’s settings need to be saved or to store data that can be used in different activities within the app.

But...we don't get that awesome feature outside the Android environment. Do we? So I decided to create a lightweight storage utility that provides such behavior and can be used on any platform. And voila🎉...[WaterBase](https://github.com/coderGtm/WaterBase) was born ;)

![WaterBase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19yf63jkdriv5jphmq0u.jpeg)

### So first thing's first. Why the name ?
Ok...so here's my explanation. As we all know that FireBase is a database that is in cloud and can be accessed from anywhere. And so WaterBase is a database on your hard disk that can be accessed from anywhere...just like water...simple and lightweight🪶.
![Swag](https://i.giphy.com/media/62PP2yEIAZF6g/giphy.webp)

### How it's used ?
As promised, in the easisest way...
WaterBase is currently available in C++ and Python


> Talk is cheap. Show me the code.


Ok then...here's the Python version

![Python usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8wxhw78cax0cykboie3.jpg)

And if you rather prefer C++, you're covered:

![C++ usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fweuejamgrk8ti7mgthb.png)

### Explanation
First we create an instance of the class WaterBase. We provide the name of the WaterBase database to use as parameter. If no database exists by that name, a new one is created.

Now let's put some values in our database. WaterBase supports three types of values: Boolean, Integer and String. To save values, use the `db.Save*(key, value)` function

![Save values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohrkbjscaim0v6nugzmz.jpg)

Now if you want to retreive these values, use `db.Load*(key, default_value)` function.

![Load values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgvuao0llx4ommxfdhl8.jpg)

That's all...This is the simplest databse you could ever need. You can find the GitHub repository here.

And one last thing...if you've read till here and are still unsure whether should you use WaterBase or not in a project, then please, please, please drop a comment, describing why you don't wanna use it. It can help me to make WaterBase a better product, more suited for all. You may even consider contributing to the GitHub [repo](https://github.com/coderGtm/WaterBase)
![Untill next time](https://i.giphy.com/media/zDpYQooxkwXkAWMxRK/giphy.webp)
Goodbye!!
Install Gitlab Runner on Ubuntu
Published: 2022-08-04 14:11:00

Run:

```
curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh" | sudo bash
```

Then 

```
sudo apt-get install gitlab-runner
```

Check the version:

```
gitlab-runner -v
```

### Usefull commands:

#### Restart
```
sudo gitlab-runner restart 
```

#### Run queued jobs
```
sudo gitlab-runner run 
```

#### Verify and delete runners
```
sudo gitlab-runner verify --delete
```


### To run jobs concurrently, update the following
```
sudo nano /etc/gitlab-runner/config.toml
```
and update the desired value
```
concurrent = 5 
```
Using jpegoptim to optimize JPEG images
Tags: jpg, jpeg, images, optimize
Published: 2022-08-04 14:05:18

## 1. Batch optimize multiple JPG images

```bash
jpegoptim --strip-all /dir/*.jpg
```

- `jpegoptim` - tool to optimize JPG images (apt install jpegoptim),
- `--strip-all` - removes all meta data from file,
- `/dir/*.jpg` - list of images to optimize (files will be overwritten).

[Open original](https://onelinerhub.com/jpegoptim/optimize_batch_jpg) or [edit on Github](https://github.com/Onelinerhub/onelinerhub/tree/main/jpegoptim/optimize_batch_jpg.md).

## 2. Optimize JPG image

```bash
jpegoptim --strip-all img.jpg
```

- `jpegoptim` - tool to optimize JPG images (apt install jpegoptim),
- `--strip-all` - removes all meta data from file,
- `img.jpg` - input image to be optimized (will be overwritten).

[Open original](https://onelinerhub.com/jpegoptim/optimize_jpg) or [edit on Github](https://github.com/Onelinerhub/onelinerhub/tree/main/jpegoptim/optimize_jpg.md).

## 3. Optimize JPG image to fit to certain file size

```bash
jpegoptim --strip-all -S 100k img.jpg
```

- `jpegoptim` - tool to optimize JPG images (apt install jpegoptim),
- `--strip-all` - removes all meta data from file,
- `-S 100k` - try to optimize so that final file size is less than 100k,
- `img.jpg` - input image to be optimized (will be overwritten).

[Open original](https://onelinerhub.com/jpegoptim/optimize_jpg_limit_size) or [edit on Github](https://github.com/Onelinerhub/onelinerhub/tree/main/jpegoptim/optimize_jpg_limit_size.md).
I created a web server 👨‍💻
Tags: javascript, node, 100daysofcode, tutorial
Published: 2022-08-04 13:40:00


On day 2 of my 100 days of code in learning Node.js, I was able to learn ho to create a web server without using the express framework. So the web server was built by using the Nodejs HTTP module.
So let dive in the tutorial.
**What is a web server and how come Node.js can do that:** A web server can either be a software or hardware that responds to client (i.e browser, it is through a browser we access a web server) request. Web servers store or host websites, content on the internet and when users needed them they make a request to the server. The reason Node.js can do this is because with Node.js we can now run Javascript outside the browser.
So for us to build this server we use a module provided by Node.js called the http module, we initialise it when we start our code. We can save our code in a file called app.js
`const http = require("http");` 

```javascript
const http = require("http");

const server = http.createServer((req, res) => {
res.writeHead(200, {
'content-type': 'text/html'
})
  res.end("<h1>Hello from the server</h1>");
});

server.listen(8000, "127.0.0.1", () => {
  console.log("...listening to requests on port 8000");
});
```
We can now run our web server using node app.js. Visit http://127.0.0.1:8000 and you will see a message saying "Hello from the server".
**NOTE**: this web server is however hosted on a localhost with an IP Address of `127.0.0.1` and on port `8000`. 
**IP address** are special adresses for computers on the internet.
**Port numbers** are like doors into a computer. 
Yay we have finally created our web server 🎉🎉🎉🎉🎉😉
3 code pieces to work with file path in Node.js
Tags: node, javascript, programming, beginners
Published: 2022-08-04 13:40:13

## 1. How to extract filename from path

```js
const path = require('path');
let file = path.basename('/home/joe/image.png');
```

- `require('path')` - module to work with file/dir path,
- `.basename(` - return filename part of a given path,
- `/home/joe/image.png` - sample path to extract filename from.

[Original version](https://onelinerhub.com/nodejs/how-to-extract-filename-from-path), [improve this code](https://github.com/Onelinerhub/onelinerhub/tree/main/nodejs/how-to-extract-filename-from-path.md).

## 2. How to get file extension

```js
const path = require('path');
let ext = path.extname('image.png');
```

- `require('path')` - module to work with file/dir path,
- `.extname(` - returns extension of a given path string,
- `image.png` - sample file path to get extension from.

[Original version](https://onelinerhub.com/nodejs/how-to-get-file-extension), [improve this code](https://github.com/Onelinerhub/onelinerhub/tree/main/nodejs/how-to-get-file-extension.md).

## 3. How to get path dirname

```js
const path = require('path');
let dir = path.dirname('/home/joe/image.png');
```

- `require('path')` - module to work with file/dir path,
- `.dirname(` - return dir part of a given path,
- `/home/joe/image.png` - sample path to return dir for.

[Original version](https://onelinerhub.com/nodejs/how-to-get-path-dirname), [improve this code](https://github.com/Onelinerhub/onelinerhub/tree/main/nodejs/how-to-get-path-dirname.md).
📇How to Make a Button With Awesome Hover Effects 02 | HTML & CSS✨
Tags: html, css, beginners, webdev
Published: 2022-08-04 13:22:15

**How to Make a Button With Awesome Hover Effects 02 Using HTML & CSS, step-by-step from scratch.**

{% youtube uBN1oiB5CIo %}

**Source Code:**

**Markup:**

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button with Awesome Hover Effects</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <a href="#" class="green"><span>Button</span><i></i></a>
  <a href="#" class="blue"><span>Button</span><i></i></a>
  <a href="#" class="red"><span>Button</span><i></i></a>
</body>

</html>
```
**Style:**

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: #27282c;
	flex-direction: column;
	gap: 60px;
}

/* Colors */
.blue {
	--clr: #2979ff;
}
.green {
	--clr: #00c853;
}
.red {
	--clr: #f50057;
}

a {
	position: relative;
	background-color: #444;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	padding: 10px 30px;
	border-radius: 2px;
	transition: all .5s ease;
}
a:hover {
	letter-spacing: 0.25em;
	background-color: var(--clr);
	color: var(--clr);
	box-shadow: 0 0 35px var(--clr);
}

a::before {
	content: '';
	position: absolute;
	inset: 2px;
	background-color: #27282c;
}

a span {
	position: relative;
	z-index: 1;
}

a i {
	position: absolute;
	inset: 0;
	display: block;
}
a i::before {
	content: '';
	position: absolute;
	border: 2px solid var(--clr);
	top: -3.5px;
	width: 10px;
	height: 5px;
	left: 80%;
	border-radius: 2px;
	background-color: #27282c;
	transition: all .5s ease;
}

a:hover i::before {
	width: 20px;
	left: 20%;
}

a i::after {
	content: '';
	position: absolute;
	border: 2px solid var(--clr);
	bottom: -3.5px;
	width: 10px;
	height: 5px;
	left: 20%;
	border-radius: 2px;
	background-color: #27282c;
	transition: all .5s ease;
}

a:hover i::after {
	width: 20px;
	left: 80%;
}
```

🛴 **Follow me for more on:**
YouTube:        https://bit.ly/3oBQbc0
Facebook:       https://bit.ly/3cp2S5W
Instagram: https://bit.ly/3Ihh2EB
Azure Text To Speech with Javascript
Tags: azure, texttospeech, javascript, beginners
Published: 2022-08-04 13:17:31

## Prerequisites
Azure subscription - Create one for free
Create a Speech resource in the Azure portal.
Get the resource key and region. After your Speech resource is deployed, select Go to resource to view and manage keys. For more information about Cognitive Services resources, see Get the keys for your resource.

## Azure Text To Speech Function in the Azure Portal
The status of the created resource can be checked by navigating to the overview tab

![Resource Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/722gzc7i2mo82t31pb8r.png)


The keys and the endpoints of the resource can be found by navigating to "Keys and Endpoints" under the Resource Management Tab.

![Key and Endpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/134s87iibci7p9bsiw6o.png)

That covers the Azure Text to speech configuration in the Azure Portal.

## Coding

1. Create a file named “SpeechSynthesis.js”

2. Install the Speech SDK for JavaScript by opening the command prompt and running the code.

`npm install microsoft-cognitiveservices-speech-sdk`

3. Copy the following code into “SpeechSynthesis.js”

```
(function() {

“use strict”;

//Configure Azure Cognitive service

var sdk = require(“microsoft-cognitiveservices-speech-sdk”);

var readline = require(“readline”);

var key = “YourSubscriptionKey”;

var region = “YourServiceRegion”;

var audioFile = “YourAudioFile.wav”;

const speechConfig = sdk.SpeechConfig.fromSubscription(key, region);

const audioConfig = sdk.AudioConfig.fromAudioFileOutput(audioFile);

// The language of the voice that speaks.

speechConfig.speechSynthesisVoiceName = “en-US-JennyNeural”;

// Create the speech synthesizer.

var synthesizer = new sdk.SpeechSynthesizer(speechConfig, audioConfig);

var rl = readline.createInterface({

input: process.stdin,

output: process.stdout

});

rl.question(“Enter some text that you want to speak >\n> “, function (text) {

rl.close();

// Start the synthesizer and wait for a result.

synthesizer.speakTextAsync(text,

function (result) {

if (result.reason === sdk.ResultReason.SynthesizingAudioCompleted) {

console.log(“synthesis finished.”);

} else {

console.error(“Speech synthesis canceled, “ + result.errorDetails +

“\nDid you set the speech resource key and region values?”);

}

synthesizer.close();

synthesizer = null;

},

function (err) {

console.trace(“err — “ + err);

synthesizer.close();

synthesizer = null;

});

console.log(“Now synthesizing to: “ + audioFile);

});

}());

```
4. Change “YourSubscriptionKey”, “YourServiceRegion” and “YourAudioFile” with the Speech resource key, Speech resource region, and desired output filename respectively.

In order to run your new console application, execute the code;

`node SpeechSynthesis.js`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2i5h1nyllexdozdk3k5.png)
Azure Text To Speech with Postman
Tags: azure, texttospeech, postman, beginners
Published: 2022-08-04 13:11:54

## Prerequisites
Azure subscription - Create one for free
Create a Speech resource in the Azure portal.
Get the resource key and region. After your Speech resource is deployed, select Go to resource to view and manage keys. For more information about Cognitive Services resources, see Get the keys for your resource.

## Azure Text To Speech Function in the Azure Portal
The status of the created resource can be checked by navigating to the overview tab

![Resource Overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/722gzc7i2mo82t31pb8r.png)


The keys and the endpoints of the resource can be found by navigating to "Keys and Endpoints" under the Resource Management Tab.

![Key and Endpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/134s87iibci7p9bsiw6o.png)

That covers the Azure Text to speech configuration in the Azure Portal.

## Configuring Postman

1. Set the Endpoint URL as the Request URL

2. Set the Request URL Type to Post

3. In the Header section,

   - Set the key as "Ocp-Apim-Subscription-Key" and the first key 
     as its value.
   - Set the key as "Content-type" and its key as 
     "application/ssml+xml"
   - Set the key as "X-Microsoft-OutputFormat" and its key as the 
     desired type of audio file format and quality.

![Example of the filled Header section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcyt3wxiww3asolwu5r7.jpg)


4.In the Body section, configure it to raw XML and copy the following code,

```
<speak version='1.0' xml:lang='en-US'><voice xml:lang='en-US' xml:gender='Female'
name='en-US-JennyNeural'>
Hello, I am trying Azure Text To Speech
</voice></speak>
```

![Example Filled Body Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53jaw8wkqlyd709dmiwa.jpg)


5.Then click on the Send button to send the request.

6.To save the audio file received as the response. Click on "Save Response" and then select "save to file". Select the desired location in the "Select path to save file" dialog box and click on "Save"

![Save response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fpbtzwkzohnqrcavx4e.jpg)


![Save to file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85dttt8gbhx7m3kxic9e.jpg)


Simply add the text you need to be narrated in the given code. The Languages can be changed as provided by Azure Cognitive Services.
How to Build a Responsive App Landing Page Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-08-04 12:52:01

{% youtube igNpJ21Hglk %}

How to Build a Responsive App Landing Page Using HTML CSS JavaScript

This video will show you how to build a responsive app landing page using html css javascript

[Live Website](https://codewithsadee.github.io/vast)
[Github Repo](https://github.com/codewithsadee/vast)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/10TdVUtvUEKXtGicF_Dho5zunVbkgdU3M/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
3:49 - File structure
4:14 - Project initial
10:10 - Header
25:33 - Hero section
31:47 - Features section
38:08 - About section
45:50 - App section
48:41 - Blog section
58:14 - Footer
1:10:51 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
What analytics tool do you use in your projects?
Tags: webdev, react, discuss
Published: 2022-08-04 12:42:29

Hey everyone! I'm wondering what people are using as a analytics tool. I know About Google Analytics, is it enough? I'm just starting and I want to know if people visit my site, what page they read most, etc. Maybe you can suggest something to use or just share some thoughts about analytics and what data I should care most.

Thank you