teleren/devto huggingface dataset:
Why do we need to fix slow website speed?
Tags: websitespeed, seo, blogging
Published: 2022-04-11 10:51:31

Its loading speed is very important for a website. Because Google also gives priority to only those websites on its Search Engine Result Page (SERP), which are fast loaded. That is, Fast Loading Speed ​​not only reduces the Bounce Rate. Rather, it also gives a lot of benefit in SERP Ranking.

That is why if you are a WordPress user and want to make your slow WordPress site fast, then this article is especially for you.

## Fast Loading Speed
As you all know that we are currently living in the era of 5G. And speed is one of our biggest priorities. But if you are a blogger then this year (2022) can be very difficult for you. Because after the start of 5G service, the meaning of speed will change completely. And the site loading time will be greatly reduced. That is, the speed which is considered fast today, after the start of 5G service, will fall in the category of Average or Low. That is why if you are a blogger then you should always be ready to deal with this situation.

Although there is already so much competition in the field of blogging! That for a blogger to maintain the ranking of his blog is not less than a challenge. But in 2022 this task is going to be even more challenging. Because after the start of 5G service, the meaning of speed and SEO will change completely. That is why you have to keep everything up-to-date from the structure of your website to the design, SEO, user interface, articles and ranking. At the same time, you will have to walk a step ahead of your competitors. Only then will you be able to survive in the field of blogging.

## Slow WordPress Site?
If You Are A WordPress User And Your Website Is Getting Slow Loading! So it is very important for you to know how to [fix a slow WordPress site](https://aitechtonic.com/how-to-increase-loading-speed-of-wordpress-website/)? That is, how to make it fast? Because if your website is taking more time to load. So it means that the website has some shortcomings. And because of these the bounce rate of the website can increase. Also the ranking of the website can also go down. That's why this guide is very important for you.

By the way, you must have understood that what matters is the loading speed of a website in the field of blogging? Still, let me tell you that the speed of your WordPress website will not be good in 2022! So the website will find it very difficult to rank on Google's Search Engine Results page.

If you are also worried about the speed of your website. Want to know more how to fix your slow WordPress site? So read this article till the end. Because today in this article I will tell you how to optimize WordPress website to get ranking in Google? So let's know how to increase the speed of your WordPress website in the least amount of time?
Flotiq public roadmap
Tags: webdev, productivity, opensource, headlesscms
Published: 2022-04-11 10:48:29

We have created our public roadmap! In this article, we are going to show you what is the reason behind the launch of a public roadmap.

![Flotiq public roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvgayhwg4slj34jcmikz.png)
 
You may have noticed that we recently updated a lot of things in Flotiq. **New brand, logo, website, updated dashboard and the latest - new starters**. In this article, we would like to explain why we decided to create a public [Flotiq Roadmap](https://flotiq.productlift.dev/t/roadmap). 

Maintaining a public roadmap is full of challenges but we decided we can face them and open them to you.

The launch of the public roadmap aims to provide as much information as possible to digital agencies, freelancers, free users or clients. We wanted to share our internal feature development roadmap, but we ran into roadblocks. 

Flotiq is not an open-source project but we listen carefully to our users and analyze their behaviour to fix bugs, improve UX and add new features or functionalities. 

As our team planned, we have done an excellent job of rolling out most of the features on time and we understand the importance of being visible to everyone interested in our project. 

Recently our team has grown up and hence the way of planning and maintaining the roadmap has changed what’s another reason why we like to share that with you transparently. 

Many important launches are planned for New Flotiq and we cannot fail. Because the roadmap is visible to our users, we have greater responsibility for what is published there. We can't just change tickets from one quarter to another without explaining why. 

We decided to rethink our strategy from the ground up to communicate future roadmap adjustments better. We want to develop and outline a roadmap that you can rely on as much as we do. 

**We also appreciate if you vote, react to our ideas or add your own.** 

### As a reminder, here are the latest Flotiq updates:

1. [New branding](https://flotiq.com/blog/flotiq-rebranding-and-updates)
2. [Flotiq components](https://flotiq.com/blog/introducing-flotiq-components-library)
3. [New starters](https://flotiq.com/blog/how-to-speed-up-your-work-process-with-flotiq-starters)
4. [Webhooks](https://flotiq.com/docs/panel/webhooks/#listing-your-webhooks)

We are a team of open-minded people, so we welcome every opinion or suggestion. Let's grow together.
Add avg() to List in Groovy
Tags: groovy
Published: 2022-04-11 10:35:23

---
title: Add avg() to List in Groovy
published: true
description: Add average method to Groovy's List
tags: #groovy
//cover_image: https://direct_url_to_image.jpg
---
```
List.metaClass.avg = {
    return delegate.size() ? delegate.sum() / delegate.size() : 0
}
```
Use:

`assert [1, 2, 3].avg() == 2`
Add left and right trim to String in Groovy
Tags: groovy
Published: 2022-04-11 10:32:29

---
title: Add left and right trim to String in Groovy
published: true
description: Use Runtime Metaprogramming to add ltrim and rtrim to Groovy's String
tags: #groovy
//cover_image: https://direct_url_to_image.jpg
---
Left trim:

`String.metaClass.ltrim = { return delegate.replaceAll(/^* /, '') }`

Right trim:

`String.metaClass.rtrim = { return delegate.replaceAll(/ *$/, '') }`

Usage:

`assert ' Groovy'.ltrim() == 'Groovy'`
`assert 'Groovy '.rtrim() == 'Groovy'`
`assert '      Groovy'.ltrim() == 'Groovy'`
`assert 'Groovy       '.rtrim() == 'Groovy'`
My own capitalizeFully() in Groovy
Tags: groovy
Published: 2022-04-11 10:27:59

---
title: My own capitalizeFully() in Groovy
published: true
description: I made my own capitalizeFully()
tags: #groovy
//cover_image: https://direct_url_to_image.jpg
---
I used to use `org.apache.commons.lang3.text.WordUtils.capitalizeFully()` but I have been having problems. I made my own method in Groovy.

```
def capitalizeFully(String str, String delim=" ") { //optional delimiter
    def li = []
    str.split(delim).each { word ->
        li.add(word.capitalize())
    }
    return li.join(delim)
}
```

`assert capitalizeFully("A silly string with words") == "A Silly String With Words"`
Go Wrapper for Deepgram⛳
Tags: hackwithdg
Published: 2022-04-11 10:14:29

### Overview of My Submission

Just a small Go wrapper for the Deepgram API🐋


## Installation
Install this package with:
```
go get github.com/agouil/deepgram-go
```


## Usage
```go
package main

import (
    "fmt"
    "github.com/agouil/deepgram-go"
)

func main() {
    deepgramClient := deepgram.Deepgram{
        ApiKey: <DEEPGRAM_API_KEY>,
    }
    result, err := deepgramClient.CheckBalance()
    if err != nil {
        fmt.Println(err)
        return
    }
    fmt.Println(
        "Balance:", result.Balance,
        "UserID:", result.UserId,
    )
}
```

### Testing
Run tests with:
```
go test -v
```

### Submission Category: 

Wacky Wildcards

### Link to Code on GitHub

{% embed https://github.com/bkid00/ApiWrapper-ForDeepgram %}


See you guys!!🤗
GRPC Performance in Flutter
Tags: flutter, firebase, grpc, monitoring
Published: 2022-04-11 03:49:55

[Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon) is a quick and easy way to get started monitoring the performance of your apps. It automatically monitors a variety of metrics, including HTTP(S) requests which is a great way to compliment your server-side metrics and understand how your app's users are actually feeling.

That magic doesn't kick in automatically if you're using GRPC to make requests in your Flutter app.  Instead, you can drop in a quick interceptor to measure the performance of GRPC requests and report them to Firebase:

`lib/performance_interceptor.dart`
```dart
import 'package:firebase_performance/firebase_performance.dart';
import 'package:grpc/grpc.dart';

class PerformanceInterceptor implements ClientInterceptor {
  FirebasePerformance _performance = FirebasePerformance.instance;
  Map<String, String> attributes;

  PerformanceInterceptor([this.attributes = const {}]);

  @override
  ResponseFuture<R> interceptUnary<Q, R>(ClientMethod<Q, R> method, Q request,
      CallOptions options, ClientUnaryInvoker<Q, R> invoker) {
    Trace metric = _performance.newTrace(method.path);
    metric.start();
    this.attributes.forEach((key, value) => metric.putAttribute(key, value));

    ResponseFuture<R> resp = invoker(method, request, options);
    resp.then((_) {
      metric.stop();
    });
    return resp;
  }

  @override
  ResponseStream<R> interceptStreaming<Q, R>(
      ClientMethod<Q, R> method,
      Stream<Q> requests,
      CallOptions options,
      ClientStreamingInvoker<Q, R> invoker) {
    return invoker(method, requests, options);
  }
}
```

This class is super simple to use, just pass it alongside the options and channel when constructing your GRPC client:

```dart
import 'performance_interceptor.dart';

...

client = GreeterClient(
  channel,
  interceptors: [
    PerformanceInterceptor()
  ],
);
```

You can also pass attributes (dimensions) that should be passed with each request.  I like to pass the server I'm connecting to:

```dart
client = GreeterClient(
  channel,
  interceptors: [
    PerformanceInterceptor({'host': hostname})
  ],
);
```

Presto!  You've now got performance metric for all your simple GRPC requests!

![Firebase Performance console showing a GRPC-based metric](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvax9k2kbnz71n0d0252.png)
Need a website built
Tags: webdev, desing, html, css
Published: 2022-04-11 10:02:46

Hello Web Designers

I would like a light hand made website from scratch for my online business, The website has to be light and best represent my offline business which i have been a part of for a very long time. Here are a few languages you are supposed to use and a reference site for perspective designers to get an idea what the website will look like 

Languages to be used 

HTML

JavaScript 

SQL

PHP

CSS

[Here](https://rich-flavours.com) is the reference site for any further direction that you may need to picture the project. 
Anyone who can help me please forward it to web designers and i will hire them this project is worth 750USD so hook me up.
WordPress Çok Yavaş – Daha Hızlı WordPress Siteleri İçin 8 Kural
Published: 2022-04-11 10:00:51

WordPress Çok Yavaş
Bu yazımız wordpress kullanarak sitelerini yapan ve wordpress çok yavaş diye şikayetçi olan okuyucularımız için. Yöntemler WordPress üzerinden anlatılsa da herhangi bir sisteme çok kolaylıkla uygulayabilirsiniz.

Başlangıç olarak, WordPress web sitenizin yavaş hızından ve performans hatalarından sorumlu olan temel nedenleri analiz etmeniz gerekir. Performans sorunlarının ayrıntılarına girmek için WordPress geliştiricilerini işe almadan önce, kendi başınıza temel bir inceleme yapın. Daha derin teknik ayrıntılara girmeden, yavaş performansın temel nedenleri şunlardır.

Orijinal içeriği https://dogan.rocks/daha-hizli-wordpress-siteleri-icin-8-kural-wordpress-cok-yavas/ adresinden okuyabilirsiniz.
P5 JS Audiovisualizer
Published: 2022-04-11 02:09:38

One of my favorite things about coding is that I can make fun projects with it like building an audiovisualizer. Here is how to do it in p5! 

Before beginning, make sure to include the p5 sound library and reference it in your HTML file. Next: 

**Step 1. Set up your canvas**

```
function setup() {
createCanvas(windowWidth, WindowHeight);
}

function draw(){
background(0);
}
```
**Step 2. Load the music**
We will create a global variable for the song, and in this example, it will be a local file. We will also create a function that will play the song only when the mouse is clicked, because some browsers do not support autoplay. 

```
const song 


function preload(){
song = loadSoung('example.mp3')
}

function setup() {
createCanvas(windowWidth, WindowHeight);
}

function draw(){
background(0);
}

function mouseClicked(){
if (song.isPlaying()) {
song.pause() 
} else {
song.play() 
  }
}
```

**Step 3. Capture the audio and analyze it**
In this step, we will use Fast Fourier Transform (FFT). FFT will analyze the sound in every frame of the song and return an array with data about the sound. 
```
const song 
const fft 

function preload(){
song = loadSoung('example.mp3')
}

function setup() {
createCanvas(windowWidth, WindowHeight);
fft = new p5.FFT()
}

function draw(){
background(0);
}

function mouseClicked(){
if (song.isPlaying()) {
song.pause() 
} else {
song.play() 
  }
}
```

**Step 4. Visualize the data**
In this step, we will use Fast Fourier Transform (FFT). FFT will analyze the sound in every frame of the song and return an array with data about the sound. This should give you a waveform across the canvas which you can manipulate however you want (like changing colors, or creating a circle)! 
```
const song 
const fft 

function preload(){
song = loadSoung('example.mp3')
}

function setup() {
createCanvas(windowWidth, WindowHeight);
fft = new p5.FFT()
}

function draw(){
background(0);
stroke(255); 
noFill()

const wave = fft.waveform()

beginShape()
for (let i = 0; i < width; i++{
const index = floor(map(i, 0, width, 0, wave.length))

const x = i 
const y = wave[index] * 200 + height / 2 

vertex(x, y)
}
endShape()
}

function mouseClicked(){
if (song.isPlaying()) {
song.pause() 
} else {
song.play() 
  }
}
```
Top 3 CSS tips I wished somebody have told me
Tags: css, webdev, career, codenewbie
Published: 2022-04-11 09:38:46

Hello World!

Welcome back, and here are the top 3 CSS tips I personally wished somebody told me when I started out. As usual, we'll be going straight to the point.

##Tip 1: `@media`

75% of you probably don't know what @media is, well, I am part of that 75% a few weeks ago. You might be thinking, if @media is so hard, why should I learn it? 🤔

Okay, I won't contradict, @media is one of the hardest CSS concepts. Okay, now that I lost 99% of viewers, let's get into @media!

First, let's start with an example.
```
@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}
```

So basically, **the background color will be blue to all devices with a width of less than 600px.**

Understood a word I was saying? Basically, see the `(max-width: 600px)` part? So the **max width of the screen** to **display the style** is 600px. 

Kind of like JavaScript in CSS right? Oh, and btw, you can do that in Javascript too! 

```
var width = window.innerWidth;
if(width > 100){
   alert('Device bigger than 100px');
}
```

**In Summary: @media = JavaScript in CSS**

##Tip 2: CSS Default Font = Bad

No offence to CSS, but your default font sucks. Here is a quick tutorial on changing your font.

1. Visit [fonts.google.com](fonts.google.com).
2. Click on any font that isn't CSS' Default one.
3. Select a Style.
4. Click top view selected families button:
![Selected Font Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2q4np9m8rs6vsac22sf.png)
5. Follow the instructions that pop-up from side

Easy enough, shouldn't take more than a few minutes, remember to say bye to CSS' default font!

## Tip 3: Use libraries

Plain CSS is good, but not very efficient. You can download a popular CSS Library like bootstrap or Tailwindcss. I'll probably write a post about this tomorrow. 

CSS libraries aren't replacing CSS, at the end of the day, any CSS library is basically an addon to CSS.

So, usually, if you're learning CSS, you're probably learning JavaScript too! So with the remainder of this heading, let's talk about a JavaScript library called [CheaterJS](http://cheaterjs.com/).

CheaterJS is basically a module with a lot of common JavaScript functions. Now back to CSS!

##Conclution (Concluding Statements)

Oh, this is the part where I say bye and those sort of stuff. If you hate promotion, this is a good indicator that it's time for you to leave. 

To the 0% which is still reading, farewell, and have a nice day. Please follow me for more stuff like this.(Don't follow me in real life plz.)
redirect_uri_mismatch | Google OAuth
Published: 2022-04-11 09:32:21

Shu kunlarda Google OAuth ishlatib authnetication server ustida ishlayapkan edik. Bir muammo tug'ildi. `localhost` uchun ClientID va ClientSecret olib ishlatdik. Muammosiz ishladi. 

Production serverga deploy qilgandan keyin esa ishlamay qoldi. **redirect_uri_mismatch** error bera boshladi. Men titmagan form va maqolalar qolmadi. Har xil yo'llarini qildim. *Redirect Uri* bir xil edi, lekin ishlamas edi.

Hullas, muammoni o'zim payqab qoldim. Localhost uchun olingan ClientID va ClientSecret ishlatayotgan edik. RedirectUri o'zgardi lekin o'sha ID/Secretni ishlatishda davom ettik.

Tushinishimcha, faqat Google'da (Guthub OAuth da bunday muammo yo'q) ClientID va ClientSecret issue qilyapkanda redirectUri ham shu secretlar ichiga shtrixlab qo'shiladi shekilli. Shuning uchun RedirectUri o'zgarganidan keyin ishlamay qoldi.


Hulosa shuki, Google OAuth ishlatayotganda, agar RedirectUri o'zgartirsangiz, albatta boshqa ClientID/ClientSecret oling ular uchun.
Call to Whatsapp message
Tags: hackwithdg
Published: 2022-04-11 09:27:36

### Overview of My Submission
Some times we can not answer calls and can't respond to them on call for some time, so instead of rejecting their call and telling them to text, we get thier messege and convert it to text and whatsapp it to our own number.


### Submission Category: 

Wacky Wildcards


### Link to Code on GitHub

{% github https://github.com/abhigoyani/callToWhatsapp %}
<!-- [Note]: # (Your repository must include a README) -->
<!-- [Note]: # (You must use and list a permissive license for your code: MIT, Apache-2) -->


### Prerequisites

* python
* DeepGram API key
* Twilio Python Helper Library
* Twilio WhatsApp sandbox
* Subscribed to twilio whatsapp sandbox from your number

<!-- [Note:] # Screenshots/demo videos are encouraged! -->
### Installation

Export Following environment variables

* RECORD_STS_WEBHOOK
* TWILIO_ACCOUNT_SID
* RECORD_STS_WEBHOOK (webhook URL for recording status updates)
* DEEPGRAM_API_KEY
* TWILIO_WHATSAPP_NO
* PERSONAL_WHATSAPP_NO

Now run the flask app which is main.py

Now whenever someone calls your Twilio number Twilio will record the call and once the call ends our flask application will receive a webhook call.
Once our application receives a webhook called DeepGram will take the recording and returns the Text of that recording which will be sent to our number via WhatsApp.


![Whatsapp msg](https://user-images.githubusercontent.com/60034233/162704133-7fca1b5b-9e95-4e77-9d97-4ccb34fb19ca.jpeg)
Working Spotify Clone using React and Spotify API
Tags: react, javascript, node, html
Published: 2022-04-11 09:22:11

## You can get the project from the link proivided in the description of the video.

### Technologies Used :
+ React
+ Styled Components

### Libraries and Assets Used :
+ Spotify API
+ React Icons
+ Axios

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube ajVcLGEw8Xw %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.

## If there are any room for improvements please let me know. You can also fork the repository and give me a merge request if you can implement something more.
How can I create low highlight under text or custom underline in html or css?
Tags: html, css
Published: 2022-04-11 09:21:47

In this small tutorial I will guide you how you can achieve the following low highlight effect or beautiful bold under line under your text.

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

## How to Achieve it?

create a paragraph tag and inside it enclose the text you want to high within span tag with the class name you like.

## HTML

```
<p class="hero-title">You can easily <span class="half-highlight-yellow-2">do underline</span> me.</p>
```

## CSS

```
.half-highlight-yellow-2 {
  background:linear-gradient(180deg, transparent 60%, yellow 60%);
}

```



**<u>check it live on codepen</u>**
https://codepen.io/muneebejazio/pen/QWaxeBY
Netlify Centralized Authentication using MojoAuth
Tags: netlify, passwordless, authentication, magiclink
Published: 2022-11-01 06:51:55

---
title: Netlify Centralized Authentication using MojoAuth
published: true
date: 2022-04-11 09:11:23 UTC
tags: netlify, passwordless, authentication, magiclink
canonical_url: https://mojoauth.com/blog/netlify-centralized-authentication/
---

In this blog, you will learn about netlify centralized authentication using MojoAuth with a working Demonstration. Getting Credentials Let’s get started with creating an account on MojoAuth. Register at MojoAuth Here you just need to follow three simple steps: Login to MojoAuth Dashboard: Create your Fist Project by adding your Website URL and Project Name as displayed on the below screen: For the website URL, Enter the URL of the protected/profile page of your website.

[Read On](https://mojoauth.com/blog/netlify-centralized-authentication/)