teleren/devto huggingface dataset:
X-headers, what and why?
Tags: webdev, javascript, beginners, security
Published: 2021-05-27 19:59:42






## Contents

1.  [Intro](#intro)
2.  [X-Content-Type-Options](#x-content-type-options)
3.  [X-XSS-Protection](#x-xss-protection)
4.  [X-Frame-Options](#x-frame-options)
5.  [Summary](#summary)

## Intro <a name="intro"></a>

Continuing on from my previous blog about [website security week](https://jordanfinners.dev/blogs/website-security-week), we're going to talk about a series of `X-` security headers.

These are set as [headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) on your site when it is served up, let's dive in!

## X-Content-Type-Options <a name="x-content-type-options"></a>

This header indicates that the browser should not try and sniff the type of the file served up. Sniffing of the file type would mean the browser modifying the `Content-Type` header that is returned from the server.

Sniffing the file content type could lead to non executable files being made executable, this could lead to bad actors injecting executable code into normal files and could lead to vulnerabilities.
Background on [content sniffing](https://en.wikipedia.org/wiki/Content_sniffing).

It's best not to let the browser sniff the code.

Recommended setting:
```
X-Content-Type-Options: nosniff
```

You can read about it more on [Modzilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options).

## X-XSS-Protection <a name="x-xss-protection"></a>

This header has mostly been superseeded by the Content Security Policy, however its still useful for old browsers.
This header can be set so browsers detect XSS (Cross Site Scripting) and block loading of resources once a Cross Site Scripting attack has been detected.

Recommended setting:
```
X-XSS-Protection: 1; mode=block
```

You can read about it more on [Modzilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection).

## X-Frame-Options <a name="x-frame-options"></a>

This header has mostly been superseeded by the Content Security Policy, however its still useful for old browsers.

This indicates if the site can be loaded in a `<frame>`, `<iframe>`, `<embed>` or `<object>`.
Use this header to ensure you site and content cannot be embedded in someone elses site, this is commonly referred to click jacking attack.

Recommended setting:
```
X-Frame-Options: DENY
```

You can read about it more on [Modzilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).

## Summary <a name="summary"></a>

In summary, setting a few additional headers when serving up your site can really improve the security of your site. It reduces the amount of attack surface there is for attackers and prevent common attacks on websites.

Set those headers now!

Happy Building!
Schedule based website unblocking
Tags: productivity, habitbuilding, requestly, addiction
Published: 2021-06-11 12:52:19

---
title: Schedule based website unblocking
published: true
date: 2021-05-27 19:40:05 UTC
tags: productivity,habitbuilding,requestly,addiction
canonical_url: https://requestly.medium.com/schedule-based-website-unblocking-199d44cb1772
---

![](https://cdn-images-1.medium.com/max/558/1*a8dY-2is_V8Hd7KTK0q2wA.png)

Do you have a habit of spending long amount of time on a website? Do you want to reduce the amount of time you spend on a website without blocking it completely?

If the answer to above questions is a YES, then we might have a solution that might help you in this situation.

![](https://cdn-images-1.medium.com/max/300/1*as7ORaV81c8ZgrsUqSnAdg.png)

### **“Insert Script Rule” to the rescue**

This can be achieved by taking advantage of the Requestly **Insert Script Rule**. Here are the steps to do so:

- Install Requestly ([https://requestly.com/downloads](https://requestly.io/#download-now)).
- Import the Rule by clicking on this [link](https://app.requestly.io/shared-lists/viewer/1622130036940-Schedule-based-unblocking) and then click on **Import List**  Button.

![](https://cdn-images-1.medium.com/max/1024/1*2d_FoP1kame3BS14yVxDTg.png)

- Change the URL to the site you want to block.

![](https://cdn-images-1.medium.com/max/1024/1*tggNsNHog48Gqz-KddN1-Q.png)

- Add the time durations during which you want to unblock and enjoy the site.

![](https://cdn-images-1.medium.com/max/1024/1*wY4o2TYCO0a0_6pl1w5RRA.png)

```
- Add start_time in 's' and end_time in 'e'.
- Time duration need to be in format "HH:MM:SS".
- You can add multiple time durations too.
```

- Click **Save Rule** and you are ready to go.

![](https://cdn-images-1.medium.com/max/220/1*puN8COBnLjJQCoBcUwWfOQ.gif)<figcaption>Productivity Max</figcaption>

### What we do at [Requestly](https://requestly.com/)

- Requestly lets you supercharge your web development by allowing you to setup redirects, modify headers, switch hosts, insert user scripts, cancel requests and much more.
- We are in the process of building our desktop app which lets you intercept request of desktop apps like Spotify, Postman, Slack etc. You can try the beta version from [here](https://requestly.com/desktop).
Create EC2-Template Cloudformation
Tags: aws, docker
Published: 2021-05-27 19:29:06

Les quiero dejar un tutorial muy sencillo de como crear una AWS EC2 con una plantilla de cloudformation, esta trae en un user data que incluye la instalación de Docker.

Todos los pasos lo pueden encontrar en el Video.

El video lo pueden encontrar en el siguiente link:
[Video Create EC2] (https://youtu.be/6ptiGvqyae4)

También les dejo el repositorio de Github donde se encuentra dicha plantilla para desplegar el Stack de Cloudformation.
[Repositorio](https://github.com/cristiannoguera/TemplatesCloufomation/blob/master/templateCreateEC2WithDocker.yml)
My experience trying TDD for the first time in Go
Tags: go, testing, tdd
Published: 2021-05-27 19:10:44

Test Driven Development, commonly referred to as TDD, is the development principle that before writing any code, you should have failing test cases. Though it's been around for a while, it's certainly a buzzword in many developer circles along with "pair programming" and "agile". However, I've never met someone who actually practiced TDD. The idea is that by testing first, you can use tests as a benchmark for success while you're writing the actual functionality.

Sometime last week, I took a ticket to add some fairly standard CRUD (create, read, update, and delete) handlers for managing users and thought this was an excellent opportunity to try TDD for the first time.

The first day, I wrote my tests for some GET routes. We use something called [go-mock](https://github.com/golang/mock) in our unit tests, which allows you to only focus on testing the function you're writing. Because of this, I found that you still needed to have a good idea of the code you want to write while writing out the tests. In our case, we needed to mock out our calls to an external API. If you asked for my opinion after the first day, I would've told you that I could envision the benefits of TDD for something like end to end testing, where it's a black box and you're only verifying that the output is what's expected from a given input. But for unit testing, it wasn't any different than just writing the code first.

The second day, however, made me change my tune.

As I started writing functions that would need to modify what was returned from that external API, I found myself thinking of edge cases that I certainly would not have thought of while writing the code. These would be cases that I would likely catch while writing tests _after_ the fact and would have to rewrite. Or, potentially, I wouldn't even catch them until it was caught in production! I found it not only made me more aware of edge cases but saved time, as well.

I'm not sure how this would work with a more complicated handler that would need to reach out to many more entities. The principle of TDD seems to be that the test is the gold standard for whether your code works, but tests aren't always perfect (at least mine aren't). I'm looking forward to continuing to use TDD in practice and refining my approach to development.

Do you use TDD? How has it helped you in practice? If you don't use TDD, is there a reason?
Autoscaling Apache NiFi with Data Flow Experience on Kubernetes (K8) on AWS
Tags: apachenifi, dataflowexperience
Published: 2021-06-15 17:36:58

---
title: Autoscaling Apache NiFi with Data Flow Experience on Kubernetes (K8) on AWS
published: true
date: 2021-05-27 19:08:00 UTC
tags: apachenifi,dataflowexperience
canonical_url: 
---

## Autoscaling Apache NiFi with Data Flow Experience on Kubernetes (K8) on AWS

[https://www.clouddataops.dev/data-flow-experience](https://www.clouddataops.dev/data-flow-experience)
My Weird But Effective Trick To Learn Any Programing Language In A Day.
Tags: beginners, python, html, css
Published: 2021-05-27 19:03:13

Hello, I am a passionate programmer. I was introduced to programming when I was 13, via a google search on "How To Make Games".
Since then I have always wanted to get good at programming. I found unity3D Game Engine as a result of that google search. Which lead me to the path of learning C#.
##Analyzing My Progress After 2 Years
After 2 Years into unity and C#, I realized that I am not good at programming and I cannot code without the help of tutorials, So that was the point in my life where I felt I am doing something wrong.
And then I started to research more about C# and found out that the C# I am learning in unity is just a framework and the real C# is something different. And C# can be used to build other stuff too(How silly of me).
##Road To Learning Programming Languages Properly
Now was the time that I start learning programming properly. I decided to get started with learning the easiest languages Html and CSS(I know they are not real programming languages).
##Something Amazing Happened
I was able to learn **HTML** in just 1 day and **CSS** in the next day. And I build my own site on the **third** day.
**Fortunately** it was not by luck or any extraordinary IQ level But It was possible through a **strategy** I created and followed.
##The Strategy
So the strategy is pretty simple but not easy. You have to follow these steps to learn any programming language fast.
1. Take pen and paper.
2. Open up a full course on YouTube.
3. Take notes by writing syntax on one side and its purpose on the other side.
4. Take note of definitions so you can explain to someone else or just understand the use of syntax better.
5. Practice each syntax and try to do something on your own with that syntax practically on the computer.
6. Watch the whole 2–4 hour course like an eccentric and follow all 5 steps.
7. Close the tutorial and relax.
8. Sleep nice.
9. Wake up and revise each syntax from the notes.
10. Build something exciting.
11. Start learning another language or just build projects. You are good to go.
Believe it or not but I did it and since then I never forgot the syntax of HTML or CSS.
Later I learned *Python* and then my journey never stopped.
*I would love to listen to your story of learning your first programming language.*



[![DigitalOcean Referral Badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00rcc3tqicv68383vo0r.png)](https://www.digitalocean.com/?refcode=9d6f3f71c1b4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
Affiliate Link☝


##Follow me:
Hire me: https://www.fiverr.com/saifullah02 (For web development Purposes)  
My New Blog: [saifullahusmani.com](https://saifullahusmani.blogspot.com/)
*Follow me here:* https://dev.to/saifullahusmani
*YouTube:* http://bit.ly/saifullahusmani (Programming Tutorials Coming Soon).
*Discord:* https://discord.gg/AKyvy8Y
*Facebook*: https://www.facebook.com/SaifullahUsmani693
Create an array of numbers in the given range

Tags: javascript, reactnative, vue
Published: 2021-05-27 18:58:38

Create an array of numbers in the given range

const range = (min, max) => [...Array(max - min + 1).keys()].map(i => i + min);

// Or
const range = (min, max) => Array(max - min + 1).fill(0).map((_, i) => min + i);

// Or
const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i);

// Example
range(5, 10);   // [5, 6, 7, 8, 9, 10]


#javascript #JavascriptLibraries #javascript30 #javascripting #javascript30 #javascriptbasics #javascriptdeveloper #javascriptiskillingmysoul #javascriptdevelopers #JavaScriptDaily #100DaysOfCode #webdeveloper #website #designer #UI #ux
Storing your Terraform state in Ceph (2021)
Published: 2021-05-27 18:53:08

---
title: Storing your Terraform state in Ceph (2021)
published: true
description: Quick reference on how to store Terraform state in the Ceph S3 clone using the S3 Backend
tags: 
//cover_image: https://direct_url_to_image.jpg
---

_This works with Terraform 1.5.x and earlier. If you're using 1.6 or beyond, try my [newer post on this matter](https://dev.to/thiagoarrais/storing-your-terraform-state-in-ceph-1p1f)_

If you've got access to a Ceph instance, you can use the S3 backend to store the Terraform state.  The usage is pretty much the same as for S3 itself, we just need to make sure to set the following arguments:

* `endpoint`
* `skip_credentials_validation`
* `force_path_style`

`endpoint` should be set to the hostname where your Ceph instance responds.

`skip_credentials_validation` controls if the backend validates credentials against Amazon STS. Since you can't count on STS to validate your Ceph credentials, this should be set to `true`.

`force_path_style` controls if bucket names are specified in subdomains (e.g. `mybucket.myceph.myintranet`) or in paths (e.g. `myceph.myintranet/mybucket`). The path style is more compatible with Ceph, so this also should be set to `true`.

Here is a copy-and-paste friendly version:

```hcl
terraform {
  backend "s3" {
    bucket      = "your-bucket-name"
    key         = "a-key"
    region      = "us-east-1"
    endpoint    = "hostname.for.the.ceph.instance"
    access_key  = "your-access-key"
    secret_key  = "your-secret-key"

    skip_credentials_validation = true
    force_path_style            = true
  }
}
```
Create your own Create React App template
Tags: react, typescript
Published: 2021-05-27 18:49:56

Create React App is a convienient way to start building a new single-page application in React. Your app only needs one build dependency `react-scripts`. Under the hood it uses webpack, Babel, ESLint, and other amazing projects to power your app.

### Make it your own

If you don't like the default scaffold of create react app it really easy to adjust.

* Start by creating a folder called `cra-template`.

* Cd into the folder and run `yarn init -y` or `npm init -y` if your prefer npm. This will generate a basic `package.json` file for you.

* Create a `template.json` with your specific template settings. Any dependencies you add here will be added to the final dependency list.

```json
{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.4",
      "@testing-library/react": "^11.1.0",
      "@testing-library/user-event": "^12.1.10",
      "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
      "extends": ["react-app", "react-app/jest"]
    }
  }
}
```

* Create a `template` folder.

* Inside the `template` folder create a `gitignore` file with the content below. Make sure to omit the dot.

```yml

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
```

* Inside the `template` folder create a `public` folder with the following `index.html`.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>CRA template</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
```

*  Inside the `template` folder create a `src` folder and an `index.tsx` in it.

```ts
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
```

*  Inside the `template/src` folder create a `App.tsx` file.

```ts
import React from "react";

const App = () => {
  return <div>My CRA template</div>;
};

export default App;
```

*  Test that your scaffold is working locally by running

```bash
npx create-react-app my-app --template file:.
```

### Finished code

[Should look something like this](https://github.com/ihaback/create-react-app-template)

### Publish to npm

```bash
npm publish
```

### Use your published template in a project

```bash
npx create-react-app my-app --template your-template-name
```

```bash
npx create-react-app my-app --template barebones
```
Laravel 8.x withExists Method to Eloquent Queries Example
Tags: laravel, php, webdev, mysql
Published: 2021-05-27 18:47:51

###Introduction

Hello Developer, In this blog, I will teach you the relationship withExist Method in Queries. Some days ago, Taylor Otwell merged withExists method to Queries Relationships in Laravel 8.x.

In this blog, you can learn how to use the withExists Method in Your Eloquent Query. You can see the merged request from this link. Let's now see how to use this method:

```
$users = User::withExists('posts')->get();
//...
$isAuthor = $user->posts_exists;
The column name can also be aliased:

$users = User::withExists('posts as is_author')->get();
//...
$isAuthor = $user->is_author;
```

Relations can filter relations, and multiple relation existences can be fetched at the same time:

```
$users = User::withExists([
        'posts as is_author',
        'posts as is_tech_author' => function ($query) {
            return $query->where('category', 'tech');
        },
        'comments',
    ])->get();
//...
$user->is_author;
$user->is_tech_author;
$user->comments_exists;
```

Thank you for reading this blog.
How much do developers make?
Published: 2021-05-27 18:46:18

1 How much do developers make on the East Coast?
- Here are some more east coast developer salaries:

District of Columbia: $112,510
New Jersey: $107,640
Virginia: $113,690

2 How much do developers make on the West Coast?
- Some of the salaries for developers in the west include:

California: $127,950
Washington State: $131,790
Texas: $108,760

3 How much do developers make in the middle states?
- Developers in the middle states can expect a slightly lower average salary than developers on the coasts. For example:

Wyoming: $72,210
North Dakota: $80,620
South Dakota: $75,000
Oklahoma: $86,360

4 Developer salaries by role
- Software developer salary - average $103,620 each year
- Front-end developer salary - $106,637 a year
- Back-end developer salary -  around $122,445
- Full-stack developer salary - $108,089 a year
- Mobile developer salary -  $117,644 a year

🚀 I started to share my knowledge on youtube - BhyluCom
and my chennel link is - https://www.youtube.com/channel/UCTtHQ54k0Ya6UXxrLYoLOFQ?sub_confirmation=1
Understanding While Loop
Tags: javascript
Published: 2021-05-27 18:23:31

I am trying to understand what exactly happens when I use the 'while loop' to execute a code multiple times. 

I was solving a problem on JSHero.net and I found it confusing so I tried explaining the solution to myself in order to get a clear understanding. 

Please study the question, the answer and the simple explanation and let me know if I have understood it correctly.

Stay Safe !!



Question: 

Write a function spaces that takes a natural number n and returns a string of n spaces.
Example: spaces(1) should return ' '.



Answer: 

function spaces (num) {

  let mySpaces = '';

  while (num-- > 0)

    mySpaces += ' '; 

  return mySpaces;

};


Explanation: 

> declare a function spaces
> it has 1 parameter 'num'
> declare a variable mySpaces
> initialize it with an empty string
> we use a while loop as we need to repeat an action multiple times
> in this case we need to add blank spaces to a string 
> our '''empty spaces string''' will be stored in the variable mySpaces
> blank spaces will be equal to the 'num' parameter, which is fed when the function 'spaces' is called
> while loops have: a condition and a code (loop body) 
> our condition is to ensure that the code should execute as long as the num is greater than 0
> our condition is (num-- > 0)
> our code is: mySpaces += ''
> so if our function is called with the following parameter then how would this while loop work
>> spaces (3)
>> first it will check if 3 > 0; which it is and it will execute the code
>> mySpaces = mySpaces + ' '; the result in variable mySpace will now be ' ' (1 space)
>> then since we have used the num as a counter (num--), the loop will reduce 1 from 3 = 2
>> it will check if 2 > 0; which it is and it will execute the code
>> mySpaces = mySpaces + ' '; the result in variable mySpace will now be '  ' (2 spaces)
>> then since we have used the num as a counter (num--), the loop will reduce 1 from 2 = 1
>> it will check if 1 > 0; which it is and it will execute the code
>> mySpaces = mySpaces + ' '; the result in variable mySpace will now be '   ' (3 spaces)
>> then since we have used the num as a counter (num--), the loop will reduce 1 from 1 = 0
>> it will check if 0 > 0; which it is not and it will only execute the code after the while loop
>> we return the mySpaces variable which will give us the final result
Kadence Cloud - Dein Gutenberg Block Verzeichnis in der Cloud
Tags: wordpress, kadence, pagebuilder, wordpressplugins
Published: 2021-05-28 17:24:38

---
title: Kadence Cloud - Dein Gutenberg Block Verzeichnis in der Cloud
published: true
date: 2021-05-27 18:21:51 UTC
tags: Wordpress,kadence,pagebuilder,WordPressPlugins
canonical_url: https://j0e.org/kadence-cloud/
---

![Kadence Cloud Review](https://j0e.org/wp-content/uploads/2021/05/kadence-cloud.png)

Eine WordPress-Blockbibliothek zu erstellen kann wie eine große Aufgabe erscheinen, aber es ist eigentlich sehr einfach und die meiste Arbeit ist bereits für dich erledigt. Alles was du tun musst, ist ein WordPress Konto einzurichten und dann das Kadence Cloud Plugin zu installieren. Und los geht's! Du hast deine eigene Blockbibliothek mit allen Blöcken, die du brauchst, um mit dem Bloggen zu beginnen.

Die Kadence Cloud bietet ganz neue Wege, um deine Inhalte und Designs wiederzuverwenden. Hoste deine …

[Kadence Cloud - Dein Gutenberg Block Verzeichnis in der Cloud](https://j0e.org/kadence-cloud/)