teleren/devto huggingface dataset:
How to change or add text to the browser tab using JavaScript?
Tags: javascript
Published: 2021-08-28 00:00:00

---
  title: How to change or add text to the browser tab using JavaScript?
  published: true
  tags: JavaScript
  date: Sat Aug 28 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/change-add-text-title-of-browser-tab-using-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-f96ae3dfee04b45cf724555f239a3679.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/change-add-text-title-of-browser-tab-using-javascript)
  
To change or add a text to the browser tab, we can set the value of the `title` property of the global `document` object to the text we need to show in the browser tab using JavaScript.

For example, consider we want to show a text called `Home` in the browser tab when the user visits the home page of your website.

So for that, we can use the `document.title` property and set its value to the string `Home`.

It can be done like this,

```js
// Change or add text to the browser tab
// using the document.title property
document.title = "Home";
```

Now the browser tab text will be changed to the text `Home`.

See the above code live in [JSBin](https://jsbin.com/ninokifeye/3/edit?js,output).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Next.js 10
Tags: webdev, javascript, beginners, podcast
Published: 2021-09-15 02:37:33


Original: https://codingcat.dev/podcast/1-4-next-js-10-with-guillermo-rauch

{% youtube https://www.youtube.com/watch?v=Xr4wqU5FyMI %}

## Since we last talked a year ago

1. Zeit became Vercel and gained $21M in funding.
2. Vercel’s $40M Series B happened in December.
3. Next.js 9 added (to name a few)
4. Preview Mode
5. Environment Variables
6. Fast Refresh

* Static Regeneration

1. Next.js Analytics / Commerce
2. Next.js 10 released
3. next/image
4. @next/mdx

## Vercel

* We are now using Vercel and Next.js in our next version of codingcat.dev. It has taken me a little bit of getting used to the CI/CD flow coming from Amplify and Google Cloud Build for Firebase hosting. Can you tell me more about Deploy Preview?
* https://rauchg.com/2020/vercel#preview

## NextJS

1. I have seen a lot of movement to NextJS in the Jamstack community in the last year. What do you think is driving this move from Gatsby to Next? – Brittney
2. What is in store for NextJS in 2021? – Brittney
3. In browser navigation not working in Firefox and editing in dev tools requires the server to be restarted.
4. Images must be in the public folder.

## CodingCat.dev on Next.js

Currently we are running on Firebase as a backend with two separate Next.js sites

1. Admin – Next.js, React, MaterialUI, backed by Firebase
2. Main – Next.js, React, Tailwindcss, backed by Firebase

How can we statically build only our important pages, and then rely on regeneration for the rest? Is it as simple as saying build latest 50 pages and let page props do the rest?

Lighthouse vs. Vercel Analytics how to get 100?

I have read what I will call “way” too much about the Next.js chunks and that Lighthouse complaining about them is basically a non-issue, but is this true?

So in looking at the P99 on Vercel we actually get 100, so what gives, what is this actually showing?

## Guillermo Rauch

“Impossible just takes longer”
CfP for AsyncAPI Conference is open! 😀 🎉
Tags: eventdriven, opensource, contributorswanted, speaking
Published: 2021-09-15 22:33:07

The **Call for Papers (CfP)** for our upcoming [AsyncAPI Conference](https://conference.asyncapi.com/) is open! 😀

It <mark>ends on October 17th</mark>, which means **you have one month to apply**! 😱


## Set aside November 16-18! 🦄
[AsyncAPI Conference](https://conference.asyncapi.com/) is for everyone in the community! 🦄 The main goal is to share and exchange the experiences between existing users and new community members. And have lots of fun. 😁

The community always needs more real examples/use cases of both the **[AsyncAPI spec](https://github.com/asyncapi/spec)** and **[tools](https://www.asyncapi.com/generator)**. That said, we don't want to place any limitations on the community and encourage submitters to share any and all ideas, in any way, shape, or form. The most important is to have some time for community members to share their experiences with each other.

## Dates to Remember:
- **CFP Closes:** <mark>Sunday, October 17 at 11:59 PM PDT</mark>
- **CFP Notifications:** Friday, October 22
- **Schedule Announcement:** Friday, October 29
- **Pre-recorded Video & Slide Due Date:** Friday, November 5 at 11:59 PM PDT
- **Event Dates:** Tuesday, November 16 - Thursday, November 18


## CfP Topic Suggestions
Remember to ✨ have fun ✨ as you select your topic! 😀

Some ideas could be...
- Real examples
- Real use cases
- AsyncAPI spec
- AsyncAPI tools
- etc.

👉🏽 <mark>Don't forget to apply</mark> and **submit your CfPs over [here](https://linuxfoundation.smapply.io/prog/asyncapi_conference_2021/).**

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

## What if I want to sponsor AsyncAPI conference?

If you would like to take a look at our sponsorship levels and learn more about where you can see your logo placements within the AsyncAPI Conference website, go **[here](https://opencollective.com/asyncapi/events/asyncapi-hackathon-and-conference-2021-3156d7af).** 😀 

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

## Want to help with proposals selection?
If you would like to help with the AsyncAPI proposals selection, simply contact us directly on [slack](https://asyncapi.slack.com/join/shared_invite/enQtNDY3MzI0NjU5OTQyLTM5NTlkYzFmZDQyMGVkNzVkOTRhMGU2N2VmMWRlOTdkNWE0YzdjMGQ2NzRlOWU1NGJkYjUyZDEzMzM3ZGYzYzM#/shared-invite/email) or feel free to raise your hand in [our public community GitHub Discussion thread](https://github.com/asyncapi/community/discussions/71) 🧵.

## We can't wait to read your proposals! 🦄

Let us know if there are any questions we can help with!
Use Prometheus and Grafana to Visualize ISP Packet Loss
Tags: opensource
Published: 2021-09-16 07:28:06

## Background

Since people started working from home, poor video/voice call connections have become a very annoying problem. 

However, it's hard for people to diagnose what is the root cause. People start blaming their ISPs, and I feel bad for them. In fact, there are a number of reasons that can cause poor video call connections, but if you can tell us with great confidence that my problem is not from your end.

You should probably start monitoring your ISP  packet loss.

## Prerequisites

- Grafana(You can register a free [Grafana Cloud account](https://grafana.com/auth/sign-in?plcmt=top-nav&cta=myaccount))
- Prometheus (You can [install it](https://prometheus.io/docs/prometheus/latest/installation/) on your Raspberry Pi or NAS)
- Open Source Router OS (OpenWRT, ClearOS, Asuswrt-Merlin etc)

## Process

### Set Up ping_exporter

SSH in to your router > Download ping_exporter

You can check which version you need [here.](https://github.com/czerwonk/ping_exporter/releases)

For example: 

```bash
wget https://github.com/czerwonk/ping_exporter/releases#:~:text=ping_exporter_0.4.7_linux_arm64.tar.gz
```

Extract the file:

```bash
tar -xf ping_exporter_*.tar.gz ping_exporter
```

Move to `/usr/local/bin`:

```bash
mv ping_exporter /usr/local/bin
```

Choose the way you like to get the ISP's DNS servers on your router.

For example:

```bash
cat /etc/resolv.conf
```

Create a `ping_exporter.yaml` file under `/etc/ping_exporter/`:

```bash
targets:
  - <Your ISP's DNS servers>

ping:
  interval: 2s
  timeout: 3s
  history-size: 42
  payload-size: 120
```

Create a `ping_exporter.service` file under `/etc/systemd/system/`:

```bash
[Unit]
Description=ping_exporter

[Service]
User=root
ExecStart=/usr/local/bin/ping_exporter --config.path /etc/ping_exporter/ping_exporter.yaml
Restart=always

[Install]
WantedBy=multi-user.target
```

Reload the service files:

```bash
sudo systemctl daemon-reload
```

Start your `ping_exporter.service`:

```bash
sudo systemctl start ping_exporter.service
```

Check the status of your `ping_exporter.service`:

```bash
sudo systemctl status ping_exporter.service
```

To enable your `ping_exporter.service` on every reboot:

```bash
sudo systemctl enable ping_exporter.service
```

Get the results for testing via cURL:

```bash
curl http://localhost:9427/metrics
```

### Add a target to Prometheus

In your Prometheus configuration file, add the target in the `static_config` section :

```bash
- targets: ["<Your router's ip/dns address>:9427"]
```

The reload your Prometheus’ configuration.

### Create a Grafana Panel

Add a new Panel in your home network's dashboard, we are going to use the `ping_loss_percent` metric.

```bash
ping_loss_percent{instance="<Your router's ip/dns address>:9427",target="<Your ISP's DNS servers>"}
```

![Packet Loss Pannel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y7h6c4o2lgt3mjmkzwd.png)

⚠️  Please note for voice and video calls, any packet loss below 0.05 could be considered acceptable.
My new book about Typescript 4 is published. AMA
Tags: typescript, programming, learning
Published: 2021-09-16 08:48:38

---
title: My new book about Typescript 4 is published. AMA
published: true
description: My latest book TypeScript 4 Design Patterns and Best Practices is out for grabs.
tags: typescript, programming, learning
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p04oa6kyx3z7c4s4qf3t.png
---

 
I'm happy to announce that my book, "TypeScript: 4 Design Patterns and Best Practices" is now available on Amazon:

![img](https://static.packt-cdn.com/products/9781800563421/cover/smaller)

Amazon.com: [link](https://packt.link/3qwmL)
Amazon.co.uk: [link](https://www.amazon.co.uk/TypeScript-Design-Patterns-Best-Practices/dp/1800563426/ref=sr_1_3?dchild=1&keywords=typescript+4&qid=1631781999&qsid=258-2412969-5194553&sr=8-3&sres=1800564732%2C148427010X%2C1800563426%2C0997303727%2CB0948BCH24%2CB08DXSC18H%2C180020616X%2CB08D6T6BKS%2C1379268907%2CB019TLHKVW%2CB096W2JWS3%2CB076ZXN6B9%2CB01MA5JA74%2C1617295345%2CB07WZXYTRH%2C1617295949&srpt=ABIS_BOOK)

Take a hands-on approach and get up and running with the implementation of design patterns in TypeScript learning best practices for writing good testable code.

If you want to ask few questions about the book, or how to write a technical book, then you Ask Me Anything.

Thank you.
Enjoy Embedded Video Calls in your Website
Tags: javascript, webdev, webrtc, angular
Published: 2021-09-16 09:03:43

Arvia can be added to your website with just a single line of code!
This is the new way of connecting with your customers. If someone is interested in your products or services, comes to your website and search for details, right?

But you can grow this relation bigger, faster, and more importantly way more human.

We are taking it to the next level @ Arvia !

With Arvia, you can position a company representative on your website, live and visual. It is a privilege to see and understand customer’s current conditions and moods via their live gestures. This helps you do suggestions, cross-sell your services — products or give more details and showcase the products live.

Would you like to boost up your sales? Would you like to multiply your customer satisfaction rates and grow exponentially? Arvia makes it happen.

Customers can join your store live — anytime, from anywhere in seconds. Customers can go through the products, evaluate new suggestions, ask questions, and shop live, together with your representative.

This is a new era of communication. You need to catch up with your rivals and even pass them to set the bar.

Arvia is fast, easy to use, reliable, and giving you an exclusive opportunity to get more insights from your customers.

Detailed admin panel helps you create, design, and inspect all actions in video call experiences. And you can position yourself (Company) — product, staff, services based on this insightful important data.

You can check out all the features @ arvia.tech

WE ARE ARVIA — Fast, Easy, Cloud, Global!
How to Create a Random Hex Colour Generator in React
Tags: react, html, css, javascript
Published: 2021-09-16 09:19:23

If you’re looking for the source code, then it’s available in the video.

{% youtube PPZQ4-oPnAw %}

In this, we’re going to see how to create a full-screen hex colour generator that generates colours randomly.

We’ll create a separate component for generating this colour, and name it **RandomColor**.

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

###useState
 It is used to store the generated colour and also to update the colour on a button click. It’ll help us in updating the colour of the page reactively. 😏

###getRgb
- This function is used to get a random value. The range of this function is 0 to 255 (because RGB ranges from 0 to 255 🧐).
- `Math.random` generates a floating-point value between 0 and 1. On multiplying with **n**, we will get the value in the range of **0 and n — 1**.
- But it’ll still be in decimal, so we can use Math.floorto get the floor round-off value.

###rgbToHex
- This function is used to generate the hex code of the colour based on the three values of **red**, **blue**, and **green**.
- We are mapping over these 3 values and applying `toString()` function over the value. We can provide a **radix** argument to this function which converts the number as per the base value provided. - Here, we are using **16** which is for **hexadecimal numbers** because hex code colour is made up of **hexadecimal numbers** 🧐.
Then we are checking whether the length of the result is 1 or more, if it’s 1 then we’re adding **0** in front of it to normalize it.
- At last, we’re joining the array and adding a `#` in front of the generated string.

###handleGenerate
This function is called whenever we click on the button. It creates a colour object and then passes those red, blue, and green values to **rgbToHex** function. The returned value is used to update the colour.

At last, we are setting the colour to the `backgroundColor` of the **container** and text `color` of the **button**.

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

The styling part of the application is done like this.

The **container** class is just to make sure the whole screen area is used and the button is placed in the centre. transition is just to provide a smooth **transition** of colour whenever a new colour is generated.

**Button** styling in order to make it look good. **transform** and **box-shadow** are used to provide a 3D effect to the button whenever we hover on the button.

And by doing all this we’ll finally have our random full-screen colour generator complete. It’ll look something like this 🤩👇🏻

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

That’s it, this is where our journey ends. I hope you were able to reach this point. 😃

Thanks!
How to Deploy Your App to Netlify
Tags: react, webdev, netlify, 100daysofcode
Published: 2021-09-16 09:41:06

## 1. Push Your Code to Any Version Control Applications

The first thing you need to do is push your git repository to any version control application. You can use any one of these;

- Github
- Gitlab
- Bitbucket

## 2. Register to Netlify

Once you have a repository inside any given application just signup to **Netlify** and connect them.

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

## 3. Creating New Site

Now, you should be on the team page where you can see your applications which right now you do not have but don't worry we'll add them right now.

In there you can either click "New site from Git" button or you can visit **https://app.netlify.com/start**

**You will see this screen**

![new site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n4gy320kooaon73tcka.png)
 

You should click the button which you are storing your repository right now. In my case it is Github.

## 4. Connecting Accounts

After that, you should see a connection screen where you will connect your Github account with Netlify.

Or if you are connected you will see a text that says **"Authorized"** which indicates that you already connect your account with Github****

## 5. Choose a project

Now select the project(repository) you want and continue

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

## 6. Choosing Site Settings

Now you can choose the owner of this application and choose which branch to deploy. Netlify will listen to that branch and if any changes published it will rebuild your application and run the tests for you.

![Site Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zj0launei1bycfhayjx.png)
 

You can also choose the build command that is needed to run to generate the build folder. This folder name can be different from framework to framework. So make sure to run on your local first to see the folder name.

And once everything is ok deploy your site.

![Site Settings-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihuvjikvrqzyghza6a77.png)
 

## 7. Congratulations

Congratz! You deployed your first application to Netlify.

![Last](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj6dumiar8pasffkkx5s.png)
How And When to use bind, call, and apply in JavaScript
Tags: javascript
Published: 2021-09-16 15:42:30

Call
call quite simply lets you substitute a this context when you invoke a function. Calling the .call() method on a function, will immediately invoke that function.
let Person = {
  name: "Abhishek Patel",
  showname : function(){
                return this.name;
              }
};
let changename = {
  name: "Abhishek"
};
Person.showname; // "Abhishek Patel"
Person.showname.call(changename); // "Abhishek"
When to use call

When you are dealing with an array-like object and want to call an array method. 

Apply
The apply() method is used to write methods, which can be used on different objects

let name={
firstname:"Abhishek",
lastname:"Patel
}
let printFullname=function(home,state)
{
 console.log(this.firstname+" "+this.lastname+"from"+hometown+","+state
}
printFullname.apply(name,"[Sonepur","Bihar"]) //"Abhishek Patel from Sonepur ,Bihar
so in above function "this" will point to "name" object
we can also apply call function in this way
printFullname.apply(name,"Sonepur","Bihar") 

When to use apply

A common use case for apply was to call functions that couldn’t be passed an array of arguments. For example, if you had an array of numbers: let nums = [1,2,3] and you wanted to find the smallest number. You couldn’t just call Math.min(nums) you would instead have to call Math.min.apply(null,nums) to get a minimum.

Bind
Bind creates a new function that will force the "this" inside the function to be the parameter passed to bind().

let name={
firstname:"Abhishek",
lastname:"Patel
}
let printFullname=function(home,state)
{
 console.log(this.firstname+" "+this.lastname+"from"+hometown+","+state
}
let printmyname=printFullname.bind(name,"Sonepur","Bihar")
printmyname() //"Abhishek Patel from Sonepur ,Bihar
So,bind will force "this" to point at "name object
When to use
Async stuff
A very common front-end use case for bind is for anything that will happen asynchronously. For example in a callback that needs access to the original this context. This is especially handy in component based frameworks like React.

Further Reading
 Call()-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
Apply()-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
Bind()-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
Curious Media lab - DocsBarcelona x Garage Stories
Tags: design, techtalks, career, challenge
Published: 2021-09-17 09:28:57

Hello! Sharing this amazing #opencall :)

At Garage Stories we are preparing a lab along our colleagues from #DocsBarcelona to encourage you to work on your first emerging media project (VR/AR/AI) for social impact! Open for creators, artists, filmmakers, storytellers and all sorts of creative minds from all walks of life! 🚀🌍

This year we'll be focusing on these themes:
- conservation of economical balance
- injustices and abuse of power
- the legacy of wars and colonialism

We'll be super excited to have you on board! Please feel free to spread the word!

Curious Media 🕵️‍♀️📹 - https://www.garagestories.org/curiousmedia
18-21 October, 2021 · 4-day virtual workshop · 6pm-9 CET
Cost: 35 €
Applications open now: https://docs.google.com/forms/d/e/1FAIpQLSeiV1IhWuZVvmgRep3DAXOqfCNA6ZC3suHHGnLA-CHgEDdUKw/viewform
Debounce Function in Javascript 🚀
Tags: javascript, functional, webdev, debounce
Published: 2021-09-17 11:59:05

```javascript
let count = 0;

const debounce = (func, delay) => {
	let timer;
	return function(){
		clearTimeout(timer);
		timer = setTimeout(() => {
			func();
		}, delay);
	}
}

let scrollCount = () => {
	console.log(count++);
}

scrollCount = debounce(scrollCount, 500);

window.addEventListener('scroll', scrollCount);
```
How to make a simple unread notification animation (ex: with a bell icon)
Tags: css, animation, fontawesome, csstrick
Published: 2021-09-17 12:53:39

When building **notifications UI elements** it is very common to point out when a user has **new elements to read**. This is achieved in most cases with an animation, for example if we have a bell icon we're gonna to make it swing every # seconds.

**Today we're gonna to see this**, you can find a finished example [in this pen](https://codepen.io/Miralo/pen/KKqmVMa).

As usual we're gonna use FontAwesome and, in this case, the SVG format of the "fa-bell" icon (remember to read the [license indications](https://fontawesome.com/license)). So, when we have it's markdown on our page we will add this animation (Courtesy of [Animate.css](https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/swing.css)).

---

### The animation (part 1)

```css
svg {
    animation: custom-swing 1s;
    -webkit-animation: custom-swing 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
```

The main animation is set, but as you can see it's... too invasive 😜: our bell swings "forever" and fast.

**We need to add some "delay" in the main animation between the swings**, so we will use some Math and logic to get around it.

---

### The animation (2 part)

In few words we need do **edit the keyframe in order to "finish" the animation early**, leaving some "space" as a delay.
At the moment our animation last 1 second, but if we want to our bell swing for 1 second and wait "about" 4 seconds before another one we have to set the animation to 5 seconds.

After this, **we have to "divide" and limit the animation timing to complete in about 1/5 of the total**.

```css
svg {
    animation: custom-swing 5s;
    -webkit-animation: custom-swing 5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
```

Here it is, now we have some delay between the swings, and you can play with duration and percentages as you like to adjust the result!

Photo by <a href="https://unsplash.com/@arturorey?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Arturo Rey</a> on <a href="https://unsplash.com/s/photos/bell?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>