teleren/devto huggingface dataset:
WebPageTest live audits - Thursdays on Twitch
Tags: webperf, webdev, performance, devops
Published: 2021-06-10 19:17:34

Our team at [WebPageTest](https://webpagetest.org/) tried our hand at [Twitch](twitch.tv/webpagetest) recently and realized it can be more than just a gamer platform! The power of a live streaming platform is truly remarkable especially when you have like- minded professionals in the web performance space coming together, learning together and sharing their insights with everyone else. 

And we are just getting started here with performance audits. Coming soon are building integrations, and even hosting experts and fellow community members. 

We just completed our second session today talking about advanced features on WebPageTest and used the Catchpoint (our company) website as well as Allbirds *(yes to the shoes!)*. 

**You can check out today's broadcast [here](https://www.twitch.tv/videos/1051949599)**
  
In our first session, [Tim Kadlec](https://twitter.com/tkadlec) deconstructed a web performance session for [Joybird](https://joybird.com/), custom furniture and home décor site using WebPageTest per their request. Be right back - This couch in Bentley Daisey color has caught my attention!  

These live performance sessions on Twitch are turning out to be quite enjoyable, with fun banters among our live streamers as well as serious performance insights for the sites we reviews. *It’s all in the chat if you don’t believe me!*

{% twitch CogentMuddyTriangleVoteNay-s9gvLlJus5q_AV3X %}

{% twitch LongBumblingMageCorgiDerp-E5ccINp4x5gyJ4tu %}

{% twitch StormyElatedDonutPoooound-aNDvW0x2pzQ2PYM3 %}

If you want to follow along the sessions Tim used, here are the WebPageTest test result URLs: 
[Desktop] (https://www.webpagetest.org/result/210527_BiDc63_fb4c52e37ef883124ad9db3eba6c4940/) 
[Mobile] (https://www.webpagetest.org/result/210527_AiDcQ6_e9f4005c75530e129eb91c1356d4a737/) 
[Scroll] (https://www.webpagetest.org/result/210527_AiDc8N_968332695195ce2a7bc31996668bec37/) 

You may be wondering “Why Twitch, why not YouTube Live?” If you prefer YouTube Live, please let us know and we’ll figure something out. Also, are you wondering “Why Tim Kadlec, why not me or my friend Jane?” Absolutely! Just let us know who and what topic via **[DM on Twitter](https://twitter.com/RealWebPageTest)**

When’s the next session, you ask? It’s every other Thursday! So go ahead and sign up for alerts and share it with your **[fellow team members and friends](https://www.twitch.tv/webpagetest)**

Looking forward to testing and building with you!
Cryptography for Absolute Beginners | Go from Zero to Cypherpunk
Tags: security, privacy
Published: 2021-06-10 18:46:19

We live in a post-Snowden world. For many, that means assuming none of your digital assets are safe from surveillance.

There are ways, however, to use the internet with insane mathematics in your favor to ensure that no one can see whatever it is that you’re sending to someone else.

Cryptography is an ancient mathematical science that was originally used for military communications, and designed to conceal the contents of a message should it fall into the hands of the enemy. Recent developments in cryptography have added additional uses, including mechanisms for authenticating users on a network, ensuring the integrity of transmitted information and preventing users from repudiating (i.e. rejecting ownership of) their transmitted messages.

Today, encryption is an integral part of many of the tools and protocols we rely on to protect the security of our everyday transactions and online communications. Encryption can be used on the physical layer of the Internet to scramble data that’s being transmitted via cable or radio communications. It adds support for secure communications to plaintext protocols like the Hypertext Transfer Protocol (HTTP), which enables Web browsing, and can protect the integrity of data exchanged through applications like email and mobile messengers. You can also encrypt data that is stored on devices like cellphones or computers, shielding the local copies of emails, text messages, documents, and photos from unauthorized snooping.

How and at what layer your data is encrypted makes a huge difference. Just because a product or service uses encryption doesn’t necessarily mean that everything that’s stored on or sent over that platform is completely private. For example, Google now makes the HTTPS protocol (HTTP over an encrypted connection) the default for all Gmail traffic, which prevents unauthorized users from reading emails while they travel between Google’s email servers and end users’ computers — but it does nothing to stop Google itself from accessing plaintext copies of those conversations. If you don’t want your email provider to be able to read your messages, you have to take additional steps to implement end-to-end encryption, which refers to a system in which “messages are encrypted in a way that allows only the unique recipient of a message to decrypt it, and not anyone in between.” With end-to-end encryption, you encrypt the contents of a message on your local machine or device. That data is then transmitted as ciphertext by the email provider to the intended recipient, who is the only person who can decrypt and read it.

continued - https://vocal.media/geeks/cryptography-for-absolute-beginners
Cannot understand this Javascript NaN practice problem. Please help in explaining it.
Tags: javascript
Published: 2021-06-10 18:32:51

Question: 

Write a function parseFirstInt that takes a string and returns the first integer present in the string. If the string does not contain an integer, you should get NaN.


Example: parseFirstInt('No. 10') should return 10 and parseFirstInt('Babylon') should return NaN.





Answer: 

function parseFirstInt(input) {
  let inputToParse = input;
  for (let i = 0; i < input.length; i++) {
    let firstInt = parseInt(inputToParse);
    if (!Number.isNaN(firstInt)) {
      return firstInt;
    }
    inputToParse = inputToParse.substr(1);
  }
  return NaN;
};





Explanation: 
 
>>> we declare a function 'parseFirstInt' 
>>> it has 1 parameter 'input' 
>>> we declare a variable 'inputToParse' 
>>> we initialize it with a value of the input string
>>> we use a 'for loop' to loop over the elements of the input string
>>> we then declare another variable inside the 'for loop' which is 'firstInt'
>>> we initialize its value with the output we get when we run the parseInt method on variable 'inputToParse'  and store them in the firstInt variable
>>> we then open an if else statement 
>>> our condition is plain & simple
>>> if value of 'firstInt' is NaN then we want it to exit the loop and return NaN
>>> if value of 'firstInt' is not NaN then we want it to execute the block of code in the if / else loop 
>>> we keep checking for the first integer by using the loop 

----------------stopped understanding from here----------------
Highlight Nav-Link on scroll through Section, in React JS;
Tags: react, showdev, npm, scrollspy
Published: 2021-06-10 18:21:11

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

Recently I posted about `Nav-link's to active as you scroll` in my series [10 Lines of JavaScript](https://dev.to/areeburrub/series/12925).
{% post https://dev.to/areeburrub/change-nav-link-s-style-as-you-scroll-4p62 %}

Now, I will tell you how you can do the same in your React websites.

So for this we need to install a package typically named `react-scrollspy-highlight` so first we need to install this package 

### Install Package
```
npm i react-scrollspy
```

### Using it in your project,
first import the library like this 
```import Scrollspy from 'react-scrollspy'```

Then give each section on your page different id and link them to the nav-links

and then use the library like this:

```
  <Scrollspy
        items={ ['section-1', 'section-2', 'section-3'] }
        currentClassName="active" >

    <li><a href="#section-1">section 1</a></li>
    <li><a href="#section-2">section 2</a></li>
    <li><a href="#section-3">section 3</a></li>

  </Scrollspy>
```
mention the id's of Section in form of array in the prop items.

After adding this, create styling for className active, the class under `currentClassName` will be added to section's classList as scroll reach on the section.

> *in case you don't know* : _Those `{ [...] }` curly brackets around the array in prop item is just a way to mention javascript in JSX, this not mean items store an object._

### One more tip for smooth scroll,
Some people get trouble with smooth scrolling and use different libraries to do so but there is a simple css property which will enable smooth-scroll, `scroll-behavior:smooth;` add this to body or html and then the scroll on the page will be smooth.
```
html,body {
  user-select:none;
}
```

_for more: visit [react-scrollspy-highlight](https://www.npmjs.com/package/react-scrollspy-highlight)_

> <a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 
2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
### Read Also:
{% post https://dev.to/areeburrub/hide-navbar-as-scroll-down-in-less-than-10-lines-of-javascript-1i00 %}
### Follow for more:
{% user areeburrub %}
Bash script to count words and characters of multiple documents *.[txt|doc]
Tags: bash, cli, linux
Published: 2021-06-10 18:00:41

![Demo linux doc words counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhhy2r7ajs36pafyvb2q.gif)

a simple tool for people that need to count characters and words of multiple documents from command line interface.

**Supports**: *.txt and *.doc filetype

## Prerequisites 
- a linux distro
- sudo privileges
- unzip package
- catdoc package

## Installation
- [download this script](https://github.com/alfiosalanitri/linux-doc-words-counter)
- open your CLI and type:
```
sudo mv linux_doc_words_counter /usr/local/bin
sudo chmod +x /usr/local/bin/linux_doc_words_counter
```

## Usage
```
linux_doc_words_counter /path/to/archive.zip
```
Cross-origin resource sharing (CORS)
Published: 2021-06-10 17:46:24

Cross-origin resource sharing" (CORS) is a mechanism that allows resources on a web page to be requested from another domain outside the domain from which the resource originated. This is useful for AJAX applications where JavaScript running in the browser may make requests to other domains (e.g. requesting JSON data from a server) or when web pages are served by a web server other than the one that generated them (e.g. when using content delivery networks). CORS is designed to allow safe cross-domain requests, while at the same time preventing malicious cross-domain requests.

In CORS, an HTTP request is made to a server in a different domain using an HTTP method other than GET or HEAD, and includes an Origin header field in the request. The server then checks whether the origin of the request matches any of the origins allowed by the Access-Control-Allow-Origin header field in the response. If so, it returns an Access-Control-Allow-Origin header field in the response containing the origin that was matched. The browser then checks this value against its list of domains and if it matches, allows the resource to be loaded. If it does not match, the resource is blocked from loading.

The following code snippet shows how to use CORS with PHP:

```
<?php header('Access-Control-Allow-Origin: *'); 
   header('Access-Control-Allow-Methods: GET, POST'); 
   header('Access-Control-Allow-Headers: Content-Type'); 
   header('Access-Control-Max-Age: 86400'); 
?> 

<script type="text/javascript"> // Set up headers for CORS 
   var xhr = new XMLHttpRequest(); 
   xhr.open("GET", "https://example.com/api/v1/user", true); 
   xhr.setRequestHeader("Accept", "application/json"); 
   xhr.setRequestHeader("Content-Type", "application/json"); 
   xhr.setRequestHeader("X-Requested-With", 
      "XMLHttpRequest"); 
   xhr.onload = function() { 
      console.log(this.responseText); 
   }; 
   xhr.send(); 
</script>
```
For more information about CORS, see What is Cross Origin Resource Sharing? on MDN Web Docs and Cross Origin Resource Sharing on HTML5 Rocks .

Note: In JavaScript, sending a preflight OPTIONS request to find out what origins are allowed for a given resource is not supported by all browsers
Four things to consider when evaluating incident management platforms
Tags: incident, sre, incidentmanagement
Published: 2021-06-10 17:35:42

When you’re feeling the stress and pain around incidents, making the decision to find an incident management tool is a no-brainer. But how do you choose the one that will work for you, your team, and your business? 

You might be asking yourself:
* Where do I start?
* What do I need to know?
* What questions do I ask?
* What are the options?
* How can I be sure we’re choosing the right tool?

[Read the full post here](https://fh.dev/zq9).

This post was originally published on the [FireHydrant Blog](https://firehydrant.io/blog/?utm_campaign=evergreen&utm_medium=referral&utm_source=devto) on May 26, 2021 by [Robert Ross](https://firehydrant.io/authors/robert-ross/).
Cross-browser testing made easy thanks Comparium
Published: 2021-06-10 17:29:24

Cross-browser compatible site is a very important for any web developer. They use different tools in order to obtain perfectly displayed sites in all browsers. But let's talk about one of the best tools for cross-browser testing Comparium.
Comparium - a free cross-browser testing tool that facilitates [Safari browser emulator](https://comparium.app/blog/safari-emulator/) and other browsers no matter the OS you have installed on your computer. In addition, it allows you to compare the results obtained in automatic and manual modes and run tests in real time to get the best results.
Spending hours coding one webpage 💩
Tags: beginners, webdev, codenewbie, learning
Published: 2021-06-10 17:29:03

So I know I'm a newbie at this coding thing.
But wooh! Who knew it could get this frustrating when you feel like you made some steps ahead in your coding journey.

For the last few days I have been working on my portfolio page, and Have been stuck on one of my webpages trying to get it right.
I know at the stage I am at now I should not really be trying to aim for perfection. But atleast I want to try and aim for a decent looking web page.

The only snag I tend to run into while coding these pages is trying to get the CSS right, for example aligning the the main footer at the bottom of the page to be more centred and not look so tacky.
And for the items on the main page to have the titles above them be more clean and tidy and not all over the place 🤦🏿‍♂️.

If you couldn't tell this is a frustrated post haha.
But As my Dev Mentors (Devs that I follow religiously on Twitter LOL) would say you have to document your experiences when your first coding so that you can learn from your previous mistakes.

Hopefully me just putting out this energy every other day can help me come back to these pages with a calm and rebalanced mindset that can help me make a breakthrough with this.

Its easy enough to follow tutorials to the end and read non-stop documentation but its kinda hard to fix the code your working on there and then with errors flagging up and pages not looking how you want to. Which is why I'm trying to actively seek out real mentors to help aid with this dilemma 😅.

So if you know anyone that can help a young Developer out, I'll be more than happy to study under them.

Thank you very much for reading my Frustrated Rant post.
Mika/Malcolm.
The MTTR that matters
Published: 2021-06-10 17:29:02

“Mean time to X” is a common term used to describe how long, on average, a particular milestone takes to achieve in incident response. There’s mean time to detect, acknowledge, mitigate, etc. And then there’s the elusive “mean time to recover,” also known as “MTTR.”

MTTR, a hotly debated acronym and concept, measures how long it takes to resolve an incident on average. The problem with MTTR, though, **is that it doesn’t matter**.

[Read the full post here](https://fh.dev/mttr-dt)

This post was originally published on the [FireHydrant Blog](https://firehydrant.io/blog/?utm_campaign=evergreen&utm_medium=referral&utm_source=devto) on June 10, 2021 by [Robert Ross](https://firehydrant.io/authors/robert-ross/).
About WebSocket
Published: 2021-06-10 17:25:21

WebSocket is a computer communications protocol, providing full-duplex communication channels over a single TCP connection. The WebSocket protocol was standardized by the IETF as RFC 6455 in 2011, and the WebSocket API specification was standardized by the W3C as an extension to the HTML5 specification.

WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. For example, a desktop browser can use a WebSocket server as a proxy to send requests to another server.

The WebSocket protocol is based on the HTTP protocol. The WebSocket protocol enables two-way communication between a client (e.g., a web browser) and a server (e.g., a web server). It provides full-duplex communication channels over a single TCP connection. The WebSocket protocol does not rely on opening multiple HTTP connections (e.g., TCP connections) for message passing.

The WebSocket protocol uses the HTTP/1.1 Upgrade mechanism, but it is not restricted to HTTP/1.1 requests and responses. A WebSocket connection is established by opening a TCP connection to port 80 (or port 443) at the originating endpoint, which is then used for two-way communication with the remote endpoint. A WebSocket connection through an HTTP proxy can be established by using an HTTP CONNECT method request.

The WebSocket protocol is layered on top of TCP, so it inherits all of TCP's features, such as its flow control mechanisms and security features (such as TLS). In addition, the WebSocket protocol provides many new features that are not present in HTTP/1.1, such as binary message framing and compression of data using message frames.

WebSocket protocols are implemented in various software libraries that are available for different programming languages and platforms, including JavaScript libraries like SockJS and Node.js libraries like Socket.IO and Faye, Ruby libraries like Faye and EventMachine, Python libraries like Twisted and Tornado, Java libraries like Jetty and Ratpack, PHP libraries like PHP-WebSocket and Pusher, C# libraries like Newtonsoft's WebSocket implementation for .NET Framework 4 or SocketRocket, Objective-C libraries like SocketRocket or SocketStream, Scala libraries like Scalatra or Akka HTTP and many others.

The WebSocket protocol has also been implemented in C using libwebsockets or in Erlang using websocket-erlang; both are available on GitHub.
DRY principle and the S of SOLID
Tags: solid, dry, patterns, clean
Published: 2021-06-10 17:21:39

Let's say an arbitrary and completely fictional javascript developer named Aristotle has to create a method that performs some area calculations based on a length. Let's watch him do it:

```javascript
calculateArea(length) {
    return squareArea(length);
}
```

Then Aristotle has been requested to do a very similar calculation, this time based on radius. So in order to respect the [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) (Don't Repeat Yourself) principle, he decides to rewrite the same method with new parameters:

```javascript
calculateArea(param, type) {
    if (type == 'length') {
        return squareArea(param);
    } else {
        return circleArea(param);
    }
}
```

This is okay, right? Because he is not creating two methods for calculating area, so Aristotle is not repeating himself. But then Aristotle realizes rectangles do exist, so he proceeds to do another small adjustment:

```javascript
calculateArea(params[], type) {
    if (type == 'length') {
        if (params.length == 1) {
            return squareArea(params[0]);
        } else {
            return rectangleArea(params[0], params[1]);
        }
    } else {
        return circleArea(params[0]);
    }
}
```

I hope at this point you have realized what a mess this is becoming. Imagine having to deal with every shape in existence.

The problem here is with interpretation of the principle. Aristotle thinks that by having a single method for calculating areas, there will be no area calculations repeated and spread throughout his application. He is centralizing all area calculations in a single entry point. What Aristotle does not know though, is about the [S of SOLID](https://en.wikipedia.org/wiki/Single-responsibility_principle), or the Single Responsibility Principle.

If you think a bit deeper and couple these two principles together, you will realize that the calculateArea method didn't actually need to exist in the first place. This kind of method quickly grows in complexity thus also increasing cost of maintenance. The other methods for area calculation are self-suficient, isolated, and there is no repetition involved. Calculating the area of a square is a different responsibility than calculating the area of a circle.

Maybe this is a bit too exaggerated, but a similar pattern I often see is the boolean last parameter. When you have two very similar responsibilities, instead of creating two methods, you go and add a boolean parameter to the method signature, forking the flow with an if inside the method implementation. All is good, until you realize there is more than a single difference between them, so the boolean is not enough anymore, then you end up adding more than a boolean and more than a single if. And this goes on and on and on ...

When you see that pattern of nested ifs forming, take a step back and "check your principles". ;)
How To Create a Blog With Gatsby
Tags: javascript, gatsby, headless, react
Published: 2021-06-10 16:45:13

A headless CMS is an emerging solution for implementing websites. With that said, there is a point where you have to place the “head” (i.e. start rendering data and display it to the user). In most applicative contexts, having a traditional single-page application is enough. So you can implement your Angular or React app, and that’s all.

In public websites or e-commerce, you also need to have web pages for SEO and indexing purposes. To satisfy this need, tools like Gatsby come to our aid with server-side rendering (SSR). This approach overcomes all the problems of classic websites based on on-demand output computation. Moreover, they work with static generated files, which is very SEO-friendly. Basically, you can write an SPA and generate all the web pages to be consumed as static files. This approach gives the best performance, requires low resources, and allows for a great user experience.
In this article, we will cover the most important principles of headless by implementing a simple blog. 

This example is educational because it covers the most important topics and will let you start to develop a headless solution on your own. This is the roadmap for our journey into the headless world:
1. Introducing the headless CMS
2. Creating the environment
3. Installing the blog from a template
3. Discovering how the blog works



[So, let’s start and Read the full article!](https://betterprogramming.pub/gatsby-blog-react-d5b0d3a5d83c)