teleren/devto huggingface dataset:
Quick tip: How I optimized my WordPress website using 6 lines
Published: 2022-07-04 14:47:51

I optimized my WordPress website using 6 lines in my `.htaccess` file.

This will only work with HTTP/2 websites (I suppose most of them are in 2022).

Having tested my website with WebPageTest and GTMetrix, I noticed the same render-blocking behaviour for 6 files:

- 2 CSS files (one mine, one WordPress')
- 1 JavaScript file
- 3 font files (.woff2)

The solution was to use early hints (only available in Chrome 103, which is the bulk of my audience).

Here's what I put in my `.htaccess` file, in the root of my website:

```
H2PushResource /wp-content/themes/my-theme/base.css?ver=6.6.2
H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=6.0
H2PushResource /wp-content/themes/my-theme/js/whiskey-functions.js?ver=6.6.2

H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-regular.woff2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-medium.woff2
H2PushResource /wp-content/themes/my-theme/fonts/bentonsans/bentonsans-bold.woff2

```

The only caveat here, and the most important one, is that I needed to put the links exactly the way they are loaded, and that is **including the version parameter**.

That means that whenever I want to update my theme (or WordPress), I need to update my `.htaccess` file and change the version number.

If you want to see how fast it is, check out https://getbutterfly.com/ and browse a few pages. Everything loads almost instantly.
Answers found while trying to sleep
Tags: discuss
Published: 2022-07-04 14:39:37

_This is not backed up by a source and is fully opinionated_

---

## You lie there... trying to sleep...
Then pop! An answer to the problem in you code shows in your mind. Although you want to sleep, you quickly record it to test the next day. And most likely it wasn't good.
<br>
### It happened to you once, right?
At the most unexpected points of life you get an idea. Like in the toilet or walking down a corridor. Well, have you ever wondered why? When you are sitting down all motivated to do coding and nothing interesting happens.
<br>
### My explanation?
When sleeping or not in a mood to ponder, we often feel unsettled, very unfinished. And it might be an issue in your code or something. In that case, your brain might think a little harder to find a solution that you think is correct, but might be horrid. The brain wants to have a good rest, but you are having an issue stuck in your head. So you want to solve it!
<br>
<br>
## Just a little thing ___I___ pondered about...
While doing paperwork. Did you have any experience like this? 🤔
Question: How can I improve views on my ad networks (CPM)?
Published: 2022-07-04 14:31:08

I have a developer blog with lots of technical articles – the code to text ratio is 4 to 1. I have a pretty low CTR rate, and I have 90% desktop visits vs 10% mobile visits. I have always assumed that my website's audience is more “desktop-inclined” as the mobile version is highly optimized.

I currently use CarbonAds and Ethical Ads, both with similar earnings (so I can't quit one over the other).

What are my options here (other than just to increase my traffic)?

If relevant, here is a link to my website – [getButterfly.com](https://getbutterfly.com/)
FCM notifications title missing at bulk send over
Tags: reactnative, firebase, react, webdev
Published: 2022-07-04 14:27:32

Our app is using react version : 16:13:1 and react native : 0.63.2 respectively . 
Basically as I have mentioned that we are currently facing an issue in notifications in which when we are sending notification in to bulk user, the title we are sending with the payload misses out and only description is visible. We have tried and tested out multiple scenarios but the issue arises only when firing notifications to multiple users.


Anyone that has gone through with this issue please help out as this is a long due issue for us and not been resolved even from firebase officials
#GitHub – How to display the status badge for a GitHub Action 🟢🔴
Tags: englishpost, azurestaticwebapps, github
Published: 2022-07-04 16:47:49

---
title: #GitHub – How to display the status badge for a GitHub Action 🟢🔴
published: true
date: 2022-07-04 13:51:40 UTC
tags: EnglishPost,AzureStaticWebApps,EnglishPost,GitHub
canonical_url: 
---

Hi !

Last week I wrote 2 posts about

- [How to create and publish an Azure Static Website](https://dev.to/azure/azure-adding-an-api-to-an-azure-static-web-apps-12-50m8) 
- [How to add an API (HTTP Function) to the site](https://dev.to/azure/azure-adding-an-api-to-an-azure-static-web-apps-2n-42p7) 

It’s a super cool feature ! 😁

GitHub Actions, are an important part of this series, and on the online event, I had this question:

#### How do I display the current status of the last run of an Action?

Lucky me, this one is an easy one. On the Actions section in GitHub, we select the workflow and we have the option to “Create Status Badge”.

![GitHub Action definition with Create Status badge option](https://brunocapuano.files.wordpress.com/2022/07/github-action-definition-with-create-status-badge-option.jpg?w=840)

We can generate the markdown code for this action.

![Create Status Badge markdown
](https://brunocapuano.files.wordpress.com/2022/07/create-status-badge-markdown.jpg?w=494)

The markdown is super simple, and if you want to also use this in other format, like HTML, you just need to add the sufix [/badge.svg] to the action .yml definition.

```
https://github.com/elbruno/AzureApiBadge/actions/workflows/azure-static-web-apps-victorious-wave-00360790f.yml/badge.svg
```

So, once I added this to the Readme.md in my repo, I can see that the build action didn’t succeed.

![badge in readme with an error](https://brunocapuano.files.wordpress.com/2022/07/badge-in-readme-with-an-error.jpg?w=998)

Let’s fix it ! I just need to add an entry HTML file to the Azure Static website, and now it works.

![badge in readme succeeded](https://brunocapuano.files.wordpress.com/2022/07/badge-in-readme-succeeded.jpg?w=1024)

The sample repo is here: [https://github.com/elbruno/AzureApiBadge/tree/master](https://github.com/elbruno/AzureApiBadge/tree/master)

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Run Rubcop on changed files with Git Status
Tags: ruby, rails, rubocop
Published: 2022-07-04 13:46:47

Here me out before you think this is just another post which runs rubocop only on changed files. There's four things different here 

1. We run rubocop on newly added and renamed files as well. No need to stage them.(I found a few tutorials online that don't consider this)
2. Skip deleted files
3. Works on both staged and unstaged files with same code
4. We use Git Status instead, for the sake of first point.

First let me give the command to you straight
```
git status --porcelain | grep -E -v '^(D| D|RD)' | awk '{ print $NF }' | xargs rubocop 
```

## Lets break this down

`git status --porcelain`

This gets all the files that have been changed, added or deleted. `--porcelain` is a easy to parse output format

`grep -E -v '^(D| D|RD)'`

We remove all deleted files and renamed+deleted files if any. We dont want to run rubocop on our deleted files

`awk '{ print $NF }'`

This one is useful for one edge case. When we rename a staged file. For example if we rename a controller , the output of `git status --porcelain` is as follows

```
R  app/controllers/home_controller.rb -> app/controllers/house_controller.rb
```

The `awk` command  with `NF` fetches only the last column

`xargs rubocop`

xargs run the rubocop command on each file

## Alias it

Adding alias requires a small modification to the script. This is because we dont want $NF to be expanded on declaration. 

```
alias rubogit="git status --porcelain |  grep -E -v '^(D| D|RD)' | awk '{ print \$NF }' | xargs rubocop "
```


Let me know if you had any edge case that didn't work with this command
Everything a beginner need to know about JSON in 3 minutes
Tags: json, computerscience, tutorial, beginners
Published: 2022-07-04 13:40:15

JSON is the most popular data format these days. Let's demystify it!

### 1) What JSON is used for?
JSON is a data format commonly used for building Rest API, web services and configuration files.

### 2) How to write JSON documents?
JSON has very simple syntax - it's basically collection of key-value pairs.

### 3) What data types does JSON support?
5 data types (if we will not count "null" as data type):
- Object
- Array
- boolean
- numeric
- text

{% embed https://www.youtube.com/watch?v=02TP6NLpJHw %}
Create Web Components by using Google Lit, publish them on Npm and use them in React, Angular & JS projects
Tags: lit, google, webcomponents, npm
Published: 2022-07-04 13:25:46

Web components are a set of technologies that allow us to create reusable HTML elements, in which all features are encapsulated within their code.

The advantage of using web components is that they can be used anywhere: in HTML/VanillaJS, Vue, #react, #angular project and in any other modern JS framework and library 

**WRITE ONCE, USE EVERYWHERE, ANYTIME ... for real** 😅

However, Native APIs for creating #webcomponents are not very pleasant to use. The DX is horrible 🤮

Frameworks like "Google #lit" greatly simplify their creation and in these slides I'll describe:
➡️ how to create web components using Lit
➡️ publish a web component on npm
➡️ use the web component in vanilla JS, Angular and React

CHAPTERS:
00:00 What are WC?
00:50 MyPanel Component
01:56 Create Lit Projects
02:10 Source Code
03:07 Publish on npm
03:21 How to use
03:52 Use in Vanilla JS
04:10 Use in Angular
04:42 Use in React

[DOWNLOAD PDF SLIDE](https://www.linkedin.com/feed/update/urn:li:activity:6943560854025994240/
)

---
🔗  Follow me on:

* [YouTube](https://www.youtube.com/c/FabioBiondi)
* [LinkedIn](https://www.linkedin.com/in/fabiobiondi)
* [Twitch](https://www.twitch.tv/fabio_biondi)
* [Facebook](https://www.facebook.com/groups/fabiobiondi.training)
Refactoring 007 - Extract Class
Tags: webdev, beginners, javascript, tutorial
Published: 2022-07-04 13:10:14

*Behavior is repeated across the system. But we are missing a concept*

> TL;DR: Put together what belongs together 

# Problems Addressed

- Code Duplication

- Missing Abstraction

- Low Cohesion

# Related Code Smells

{% post https://dev.to/mcsee/code-smell-124-divergent-change-ddl %}

{% post https://dev.to/mcsee/code-smell-143-data-clumps-52f6 %}

# Steps

1. Extract the methods (and accidentally the properties) coupled into a new concept

2. Use the new concept

# Sample Code

## Before

[Gist Url]: # (https://gist.github.com/mcsee/04dfcde00d2d40c8741f9af2fbeba469)
```java
 final class Person {
 
      private String name;
   
      // Below cohesive properties
      private String homeAreaCode;
      private String homeNumber;
      
      public String name() {
          return name;
      }
   
      // Below cohesive behaviour
      public String telephoneNumber() {
          return ("(" + homeAreaCode + ") " + homeNumber);
      }
      String areaCode() {
          return homeAreaCode;
      }
      String officeNumber() {
          return officeNumber;
      } 
 }
 
```

## After

[Gist Url]: # (https://gist.github.com/mcsee/3038811d4e9e821908b54092ad8efaee)
```java
// 1. Extract the methods (and accidentally the properties) coupled into a new concept      
   public class TelephoneNumber {
   
      private String number;
      private String areaCode;
   
      public String telephoneNumber() {
          return ("(" + areaCode + ") " + _number);
      }
      public String areaCode() {
          return areaCode;
      }
      public String number() {
          return number;
      }
   }
   
final class Person {

      private String name;
  
      // 2. Use the new concept
      private TelephoneNumber officeTelephone = new TelephoneNumber();
      
      public String name() {
          return name;
      }
      public String telephoneNumber(){
          return officeTelephone.getTelephoneNumber();
      }
     
  }


```

# Type

[X] Automatic

Most IDEs implement this safe refactor.

# Why code is better?

Logic code is in just one place together with its rules

# Tags

- Classes

# See also

[Refactoring.com](https://refactoring.com/catalog/extractClass.html)

[Refactoring Guru](https://refactoring.guru/extract-class)

# Credits

Image from <a href="https://pixabay.com/es/users/drpepperscott230-1212529/">drpepperscott230</a> on <a href="https://pixabay.com/es/">Pixabay</a>

* * * 

This article is part of the Refactoring Series
VS Code Tip of the Week: The Thunder Client Extension
Tags: vscode, vscodextension, webdev, vscodetips
Published: 2022-07-04 12:55:57

This week's VS Code Tip off the Week is the [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) extension.

> Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code

There's amazing tools out there like [Postman](https://www.postman.com/), [Postwoman](https://dev.to/liyasthomas/postwoman-is-changing-name-igp) (now [Hoppscotch](https://hoppscotch.io/)), etc. but I like the fact that I can use this directly within VS Code.

![Typing thund in the VS Code Command Palette](https://community.vscodetips.com/uploads/articles/w3v74xjb4da0pyeixmcq.png)
 
Select **Thunder Client New Request** from the available items in the list.

![The Thunder Client New Request window open in VS Code](https://community.vscodetips.com/uploads/articles/ampt9xmx8rrm6036eg1a.png)

The New Request window opens with a test [GET request](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) to https://www.thunderclient.com/welcome.

Click the *SEND* button to make the GET request. A response from thunderclient.com is returned.

![The response from the GET request to https://www.thunderclient.com/welcome. The value is the following JSON: {
  "message": "Welcome to Thunder Client",
  "about": "Thunder Client is a hand-crafted lightweight Rest API Client extension for VS Code.",
  "createdBy": "Ranga Vadhineni",
  "github": "github.com/rangav/thunder-client-support",
  "twitter": "twitter.com/thunder_client",
  "auth": "Supported Authentication methods Basic Auth, Bearer Token & OAuth 2.0",
  "graphql": "The client supports Graphql Query & Variables",
  "support": "For Bugs & Feature requests please submit on github",
  "share": "Please spread the word about Thunder Client"
}](https://community.vscodetips.com/uploads/articles/ic9loinj56tpmh56mj6g.png)

There's a lot more you can do with the extension, so I encourage you to check out their repository on GitHub!

{% embed https://github.com/rangav/thunder-client-support %}

Happy VS Coding!
Implement Dark Mode in Tailwind React Application
Published: 2022-07-04 12:42:40

# 1.active dark mode in tailwind.config.js
```
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
    },
  },
  plugins: [],
}
```
# 2. set dark mode in App.js , and pass {dark,setDark} to <Nav /> ,in which we set the toggle method in
```
function App() {
  const [dark,setDark]=useState(false);
  return (
    <div className={dark?"dark":''}>
      <Nav props={{dark,setDark}}/>
      <Routes>
        <Route path="/" element={<Home />}/>
      </Routes>
    </div>
  );
}
export default App;
```
# 3.set the toggle in the <Nav /> component
Nav.jsx,sun and moon are the icon you choose for it
```
function Nav({props}) {
  const {dark,setDark} = props
  const handleClick = ()=>{
    setDark(!dark)
  }
  return (
  <>
   <img src={dark?sun:moon} alt="toggle" className="w-5 h-5 
    absolute cursor-pointer" onClick={handleClick}/>
  </>
export default Nav;
```
# 4. add dark mode to the components ,such as About.js
```
function About(props) {
  console.log(skills)
  return (
    <div id='about' className=' dark:bg-gray-700 dark:text-white'>
   
    </div>
  );
}

export default About;
```
Serverless Authentication with Golang
Published: 2022-12-09 14:09:54

---
title: Serverless Authentication with Golang
published: true
date: 2022-07-04 12:40:16 UTC
tags: 
canonical_url: https://blog.niradler.com/serverless-authentication-with-golang
---

Almost every project needs authentication to serve secure user content.

For most of my side projects, I prefer to pay per use for cost optimization.

continuing my experiment with Golang, I created Golang service that's going to run inside AWS Lambda function and store the data in Dynmodb database, I'm using serverless AWS services to fulfil my requirement of cost optimize service.

[GitHub repo](https://github.com/niradler/serverless-auth-go)

### Features

- Email/password login

- Forgot password

- Provider login using google/github and more

- Multi tenant(orgs)

- Store user data on signup

- Basic roles

- Invite users

- Emails template

- JWT

**Supported routes:**

| method | route | payload | Role | public | description |
| POST | /v1/auth/login | email, password | | true | Login |
| POST | /v1/auth/login/email | email | | true | Passwordless Login |
| POST | /v1/auth/signup | email, password, data | | true | Signup |
| GET | /v1/auth/validate | | | true | ValidateToken |
| POST | /v1/auth/renew | | | false | Get new Token |
| GET | /v1/auth/provider/:provider | | | true | Login with provider |
| GET | /v1/auth/provider/:provider/callback | | | true | Validate provider login |
| GET | /v1/users/me | | | true | Health check |
| PUT | /v1/users/me | data | | false | Update user data |
| PUT | /v1/users/me/password | password,repeated password | | false | Update user password |
| POST | /v1/orgs | name | | false | Create Org |
| POST | /v1/orgs/:orgId/invite | email, role | admin | false | Invite user to me org |
| GET | /v1/orgs/:orgId/users | | admin | false | Get org users |
Are you ready for an amazing competition? 5000000 CCM for the prize
Tags: hack, competition, cryptum
Published: 2022-07-04 12:27:07

We have created a new version of CCNet for privacy purposes. This version includes **PTS** (Public Token Security) encryption, which allows users to hide themselves.
#### How to use PTS passcode?
You want to make a transaction but you don't want anyone to know about you. To do this, you enter your PTS code in the sender field. The receiving user also has the option to give you a PTS code instead of their username, you just enter this PTS code in the reciever input field. If you want very strong privacy, it is recommended to change your PTS code after each transaction.
#### Competition conditions
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfwvzkjrpj2zmn1o46bi.png)
If you have an interest or knowledge in hacking, this competition is for you. The prize is 5000000 CCM. Your task is to identify the nick name of the user who made the transaction with ID number 5 and the nick name of the recipient. The competition time is not limited.
Your browser is the new VPN
Published: 2022-07-04 12:17:53

We all know that feeling when we try to watch a web series, a YouTube video or a web article, and the content has regional restrictions sometimes. The bulk of us simply drops off, while the zealous ones look for an ideal solution. While a VPN seems like a good choice to access region-restricted content, it comes with an arduous setup and a significant detriment to internet speed.

[Try a browser on Neverinstall here.](https://neverinstall.com/spaces/browsers)


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

Say hello to [Neverinstall](https://neverinstall.com/), we are trying to solve this with the help of our servers across three continents and growing. We have built a cloud-based platform that offers a native browsing experience across leading browsers to the user. The user can launch either Chrome, Firefox, or Brave in a region of their choice.

We circumvent the detriment of connection speed by streaming the browser to the user, packing the browser with internet speeds of up to 1 Gbps even when the user has an internet connection 20x slower than that.

[Suggested read - Why your browser is becoming an OS](https://blog.neverinstall.com/why-your-browser-is-becoming-an-os/)

Our platform works similar to a VPN and helps protect the identity and data of the user and does not disclose the IP or other user information to any third party, ensuring privacy at all times.
Thiết bị chống ghi âm
Tags: thietbichongghiam, chongghiam, phasongghiam
Published: 2022-07-04 12:04:12

Thiết bị chống ghi âm, Phá sóng ghi âm, chống ghi âm
Địa chỉ: T4 Trung tâm thương mại Vinh Center Số 2 đường Trần Huy Liệu, Thành phố Vinh - Tỉnh Nghệ An
Số điện thoại: 0819099000
Website: [https://inotex.vn/](https://inotex.vn/)
Tumblr: [https://inotexvn.tumblr.com/](https://inotexvn.tumblr.com/)
Twitter: [https://twitter.com/inotexvn](https://twitter.com/inotexvn)
Flickr: [https://www.flickr.com/people/inotexvn/](https://www.flickr.com/people/inotexvn/)
Soundcloud: [https://soundcloud.com/inotexvn](https://soundcloud.com/inotexvn)
Pinterest: [https://www.pinterest.com/inotexvn](https://www.pinterest.com/inotexvn)
Youtube: [https://www.youtube.com/channel/UCZqTIj970a0l4qDrMqwWE8g](https://www.youtube.com/channel/UCZqTIj970a0l4qDrMqwWE8g)
Linkedin: [https://www.linkedin.com/in/inotexvn/](https://www.linkedin.com/in/inotexvn/)
Twitch: [https://www.twitch.tv/inotexvn](https://www.twitch.tv/inotexvn)
How to Create PR | Protect Specific Branch merge on git push
Tags: github, branch, pullrequest, protection
Published: 2022-07-04 11:45:37

## Managing a branch protection rule
you can create a branch protection rule to enforce certain workflows for one or more branches, such as requiring an approving review or passing status checks for all pull requests merged into the protected branch.

**NOTE**
Protected branches are available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server.

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

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

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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea8doa60o6gzeo2qwnqq.png)
   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5s6j88c85cag6ji92gy.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bau6zpn01ii04nf3t89j.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwnuotck7eovebi0b54x.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2jg2jpr9o3bhe3fgtum.png)
 
For more details you can visit on github repo.
[https://github.com/SyedAsadRazaDevops/how-to-protect-spacific-branch-merg-on-git-push-/blob/main/README.md]