teleren/devto huggingface dataset:
Reaction to Ably's viral blog post and subsequent outage
Tags: aws, kubernetes, devops, scaling
Published: 2021-07-23 20:53:42

---
title: Reaction to Ably's viral blog post and subsequent outage
published: true
date: 2021-07-23 00:00:00 UTC
tags: aws,kubernetes,devops,scaling
canonical_url: https://jhall.io/archive/2021/07/23/reaction-to-ablys-viral-blog-post-and-subsequent-outage/
---

A few days ago, Ably engineer Maik Zumstrull published a now-viral article detailing how the company manages large-scale computing, [_No, we don’t use Kubernetes_](https://ably.com/blog/no-we-dont-use-kubernetes). Kubernetes nay-sayers gloated.

Then yesterday, somewhat ironically, the popularity of that blog post caused enough traffic to [cause an outage](https://status.ably.io/incidents/725) at Ably. Kubernetes fans gloated.

Today I offer my 2¢ on the whole thing.

First, I didn’t even read the article until this morning. I’ve grown tired of the constant bickering about Kubernetes vs no Kubernetes, as both sides of the debate tend to suffer from the exact same problem: projecting local, situational success to the status of universal truth.

But I digress. I finally read the original article today, and here’s my take:

The point of the article is not, per se, that nobody should use Kubernetes. Rather, it’s framed more as an explanation of how and why Ably, in their specific context, does not use Kubernetes. This is great. Here’s a key sentence from the article that I think serves as a great thesis statement:

> [With Kubernetes] we would be doing mostly the same things, but in a more complicated way.

Notice there’s no statement of universal truth here. It’s a contexual statement, for Ably’s situation. And based on the preceeding description, this conclusion is probably correct.

Now the article does go on to disparage the complexity inherent in managing Kubernetes:

> To move to Kubernetes, an organization needs a full engineering team just to keep the Kubernetes clusters running, and that’s assuming a managed Kubernetes service.

I believe this is going to far. I’ve never seen a small company with a team dedicated to managing Kubernetes. At Ably’s scale, that may well be necessary, but with managed Kubernetes instances, this simply isn’t true. It also ignores the fact that Ably’s home-grown automation also requires management.

So by and large, I like the article as a case study in a viable alternative to Kubernetes. I disagree on the principle of projecting this successful case study to the general/universal case.

And finally, before I close: The outage they experienced most likely would not have been mitigated if they had been using Kubernetes. So gloating is not warranted here, either. According to their public [incident details](https://status.ably.io/incidents/725):

> The cause was a cloudflare misconfiguration that meant that recent blog posts were not being cached, which put unexpected stress on the site.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Centering a Div With Tailwind CSS
Tags: webdev, css, html
Published: 2021-08-18 15:04:02

---
title: Centering a Div With Tailwind CSS
published: true
date: 2021-07-23 00:00:00 UTC
tags: [ webdev, css, html ]
canonical_url: https://thomasstep.com/blog/centering-a-div-with-tailwind-css
---

Somehow centering a `div` still seems to trouble people. I have mostly been working with Tailwind CSS lately and I wanted to quickly share how I center a div with Tailwind. I’ll first show the examples and then describe what is happening.

```
<div class="flex flex-row min-h-screen justify-center items-center">
  I am centered
</div>

```

The same classes work with either `flex-row` or `flex-col`, which set the flexbox’s main axis either horizontally or vertically, respectively. Setting the height with `min-h-screen` is just an easy way to take up an entire screen’s view. The final two classes are where I needed to learn a tiny amount of CSS.

I played around with justification and alignment far too long before I finally looked into what they affect. `justify-content` refers to how the content should be positioned along the main axis, while `align-content` refers to how the content should be positioned along the cross axis. [Justifying content](https://tailwindcss.com/docs/justify-content) and [aligning content](https://tailwindcss.com/docs/align-content) with Tailwind are simple one-to-one mappings between their classes and the actual CSS, so once I understood how the CSS worked, I understood how the utility worked.
Matching Properties and Values in the Object challenge.
Tags: javascript, devops, tutorial, programming
Published: 2021-07-22 23:27:53

* Welcome back I'm sorry that it took me a while to post something. Anyways let's get back straight to it. 
In this post let's make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching name and value pairs (second argument). Each name and value pair of the source object has to be present in the object from the collection.
* For example, if the first argument is `[{ first: "Randy", last: "Skywalker" }, { first: "Alan", last: null }, { first: "Diego", last: "Rivera" }]`, and the second argument is `{ last: "Rivera" }`, then you must return the third object from the array (the first argument), because it contains the name and its value, that was passed on as the second argument.

####Alright let's get to it then. Below is already pre written for you.
```
function names(collection, target) {
  var arr = [];
  // Only change code below this line


  // Only change code above this line
  return arr;
}

names([{ first: "Randy", last: "Skywalker" }, { first: "Alan", last: null }, { first: "Diego", last: "Rivera" }], { last: "Rivera" });
```
* Answer:
```
function names(collection, target) {
  let keys = Object.keys(target);
  
  return collection.filter(function(obj) {
    for (let i = 0; i < keys.length; i++) {
    if (!obj.hasOwnProperty(keys[i]) || obj[keys[i]] !== target[keys[i]]) {
      return false;
    }
  }
    return true;
  })
}

names([{ first: "Randy", last: "Skywalker" }, { first: "Alan", last: null }, { first: "Diego", last: "Rivera" }], { last: "Rivera" }); // console.log would display the entire object [{ first: 'Diego', last: 'Rivera' }]
```
* `!obj` basically means if the `obj` does not.
* There's also a slightly different way of doing the for loop as well.
* Ex:
```
function names(collection, target) {
  let keys = Object.keys(target);
  
  return collection.filter(function(obj) {
    for (let key of keys) {
    if (!obj.hasOwnProperty(key) || obj[keys] !== target[keys]) {
      return false;
    }
  }
    return true;
  })
}
```
React Native & Expo music player application UI
Tags: javascript, reactnative, music, mobile
Published: 2021-07-22 22:39:48

Hello devs,

Musicont is a music player UI built using React Native & Expo for both iOS & Android.

Demo: [https://expo.io/@jsxclan/musicont](https://expo.io/@jsxclan/musicont)

APK: [Download on Google Drive](https://drive.google.com/file/d/1g1KJAXLfmbMMFIT2cGyxq6-jMNtpbwu4/view?usp=sharing)

Source Code: [Source Code](https://github.com/jsxclan/musicont)

![Musicont](https://res.cloudinary.com/jsxclan/image/upload/v1624103352/GitHub/Projects/Musicont/musicont_is0mdg.jpg)

Looking forward to add more features / functionalities. Contributions and suggestions are Welcome ❤

## Features

- Expo SDK 41
- iOS, Android
- React Navigation v5
- PropTypes

## Screenshots:
📷|📷
--- | --- 
|![Home Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7fsd62asgzy9spm6d8x.png)Home Screen|![Drawer Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9t93eikmy9t8u21uie3.png)Drawer Menu|
|![Songs Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kua8z9c9c6z7kutujj7l.png)Songs Screen|![Playing Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucvj1fvm4jaezo4op5xh.png)Playing Screen|
|![Playlists Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f441eb897jf4t9d2rsjn.png)Playlists Screen|![Playlist Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nnt7b8bxezny1xf3me6.png)Playlist Screen|
|![Search Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj0k8p5f5ir3i2joi3h4.png)Search Screen|![Playlists Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vyzx2i2a3jxm4w6b8xv.png)Playlists Screen|

## Contributing

Contributions are _very_ welcome!

If you see an issue that you'd like to see fixed, the best way to make it happen is to help out by submitting a pull request implementing it.

## Bye 👋

Thanks for reading, and have a wonderful rest of your day 🥰
Using TypeScript Interface in React Components
Tags: reactnative, react, typescript
Published: 2021-07-22 22:15:24

One of my favorite parts of writing React components with TypeScript is interfacing all of my components.

Take a simple component:

```ts
export const MyButton = (props) => {
  return <button class={props.type} id={props.id}>{props.title}</button>
};
```

So our component, `<MyButton />` takes a `type`, an `id`, and a `title`. This is fine, however if I was importing this component into another file, how would my editor know what props this component takes?

Enter `interface`.

```ts
interface MyButtonProps {
  id: number;
  type: string;
  title: string;
}
export const MyButton = (props: MyButtonProps) => {
  return <button class={props.type} id={props.id}>{props.title}</button>
};
```

Now, when we import this component into another file, VS Code will know what props this component has. 🎉
Day 414 : The Heat
Tags: hiphop, code, coding, lifelongdev
Published: 2021-07-22 21:54:13

_liner notes_:
- Professional : Not a bad day. Didn't go how I thought though. We had our team meeting and I got to demo a sample application I have been working on. Thing is that right before I was supposed to start, my laptop froze. Same thing happened during my workshop. My laptop is a hater! haha I'm thinking it could be due to the heat. Went inside while the laptop was restarting and did the demo and it worked so that was good. Would have been bad after all that and the demo didn't work. haha After that, I looked to update an earlier demo that was using a very new product. Looks like a few things have changed because when I updated the library, some things stopped working. Good thing I didn't release the blog post and sample app yet. Shouldn't be too many things to change. That's what happens when you build with stuff that is very early. haha

- Personal : I decided to see if I could get the API that I was having issues with Glitch to work in my actual side project. What do you know, it worked. Not sure what the issue was with Glitch. As long as it actually works where I need it to. Also watched an episode of "Fire Force" and studied some Japanese Not a bad night.

![Looking down into a canyon where the river is wrapping around the huge land masses in a U shape in Horseshoe Bend, UT, USA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvfzd220cl565lpwjnzh.jpg)

Going to see if I can get the new API I got working automated into my side project https://untilit.works so that when we are finished with a live broadcast, it will take the archived video and send it to be analyzed and then add the data to the video page along with the recorded video. I also want to be able to call it manually so I can do it for past videos. Can't believe it's already Thursday! Going to go through some tracks for this week's radio show and get ready for Sunday.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 5VuuV2LHAmc %}
️ Counter Up Animation | JavaScript✨
Tags: html, css, javascript, webdev
Published: 2021-07-22 21:46:36

Hey DEVs, in this tutorial we're going to use JavaScript to build a visual Counting Animation. 
A number will start at 0 and it will count up until it reaches the target number.
---
{% youtube 283-YReCRYM %}
---

📚Resources: 
Font-Awesome: https://cdnjs.com/libraries/font-awesome 
Markup: https://www.facebook.com/WebdevMadeEasy 

---
Never Fail Angular Interview
Published: 2021-07-22 21:32:37

I have been interviewing candidates for our angular developer positions a lot lately.
The most important part of our interview process is the technical task (or lately live coding).
It is not very difficult, quite simple really. What we are looking for in a candidate is the ability to think in terms of good case practices and reason about the solution.
Sadly, not many angular developers can do that.
Sure you can write code and it will work, but this is junior level for us. We always look into building better Angular apps and get a lot of inspiration from other programming languages and frameworks.
A lot of times, it could be considered over-engineered, however experience shows, that easy solutions do not scale and become maintenance hell.
This is why we focus on simple solutions instead. These solutions are easy to grasp and can be extended into something bigger in the future.
Some principles like SOLID, Low Complexity and Re-Usable UI will always hold, no matter how big (or small) your solution is.
I have made a YouTube miniseries that explain how to build simple apps and what is the reason behind architectural and design choices.
I hope that during the session with my videos you will get many ‘a-ha’ moments and will learn something new :)
Here is the playlist with valuable videos:

https://www.youtube.com/playlist?list=PL1BlcTalLDBfI4J_kpKS-rh-T1_PjsQw1
Accessing Arrays in JavaScript
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-07-22 20:59:38

Hello Readers! 
This episode of the series **Basic Data Structure in JavaScript: Arrays** includes how to *access an array* in JS.

Before starting that, we need to know two very important things.
 
1)JavaScript arrays are *zero-based* indexed. In other words, the *first element* of an array starts at *index 0*, the *second element* starts at *index 1*, and so on.

2) How to Get an Array Size. 

So, let's start with that.

### Getting Array Size with 'length' property

Typically, all arrays have a `length` property which returns the number of elements or in other words, size of an array. 

Let's see an example of an simple *one-dimensional array* and get it's size.

```js
let petsArr = ['cats','dogs','cows','fishes','birds'];
console.log(petsArr.length);

//output: 5
```
The *output* shows 5 as it has *five* elements occupying five indices from 0 to 4. So the size of this array is 5.

Now, let's see another example of a *multi-dimensional array*:

```js
let petsArr = [
'cats',['bulldog','husky'],'cows','fishes',
{bird1: 'crow', bird2: 'parrot'}
];
console.log(petsArr.length);

//output: 5
```
The *output* is still 5 but it is a complex array which includes another array as it's 3rd element and an JS Object as it's 5th element. But that does not increase the length/size of that array as it is still occupying total 5 indices , from 0 to 4.

###Accessing Array Elements

Now let's talk about `How to Access the Array Elements` in JavaScript.

To access an element in an array, you specify an *index* in the `square brackets []`.

The *basic syntax* is : 
```js
arrayName[];
```
We should not use any spaces between the array name and the square brackets, *like array [0]*. Although JavaScript is able to process this correctly, but this is not the best practice and this may confuse other programmers reading the code. 

The following is a simple example of an *one-dimensional array* :

```js
let numArr = [50,60,70];

console.log(numArr[0]); //output 50

let data = numArr[1];
console.log(data); //output 60
```
As arrays are zero-based indexed, the numArr[0] has the value 50 and the data variable stores the value 60 now.

Another example given below is of an *multi-dimensional array* :

```js
let numArr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
  ];
  console.log(numArr[3]); //output [[10,11,12], 13, 14]
  console.log(numArr[3][0]); //output [10,11,12]
  console.log(numArr[3][0][1]); //output 11
```
The *outputs* clearly show how the multi-dimensional array elements are accessed. The index 3 has the value [[10,11,12], 13, 14], as the index 3 holds another array in it's 0 index, *numArr[3][0]* holds [10,11,12] and the last one simply accessed the data of 1st index of the array [10,11,12] which is 11.

In the next episodes, we will see, how we can modify an array with array indices and other methods as well.
Event Stream - Server Side
Tags: csharp
Published: 2021-07-22 20:38:23

For this post, we're going to explore a way to stream data to the client using a Web Api and C#.

Picture this requirement, you need to process an array of data, lets say of a 100 items, once each item is processed, the api should return data to the client, without SignalR.

To do this, in this example, we will have a worker that will return a `IAsyncEnumerable` and between each iteration, the method will wait between 5 to 10 seconds.

```csharp
//Service.cs
private static readonly Random _random = new Random();

public async IAsyncEnumerable<int> GetData(int amount)
{
	foreach(var item in Enumerable.Range(0, amount))
	{
		// Wait a random amount of time to simulate some work.
		var secondsToWait = _random.Next(5,10);
		await Task.Delay(Timespan.FromSeconds(secondsToWait));
		yield return item;
	}
}
```

With the simulated service in place, we can move on to the `Controller`. For the endpoint, we're going to have an `async Task` `Get` method that will write the result to the Response and send it for every item it was processed.

```csharp
// StreamController.cs
private readonly IService _service;

public StreamController(IService service)
{
	_service = service;
}

[HttpGet("{amount:int:min(1)}")]
public async Task GetStreamData(int amount)
{
	// Set Content-Type to text/event-stream
	Response.Headers.Add("Content-Type", "text/event-stream");
	
	await foreach(var data in _service.GetData(amount))
	{
		// this can be anything, even just a json object
		string dataItem = $"data: {data}\n\n";

		// Convert the text to a byte array
		var utf8DataitemBytes = Encoding.UTF8.GetBytes(dataItem);
		
		// Write the byte array to the HttpResponse
		await Response.Body.WriteAsync(utf8DataitemBytes, 0, utf8DataitemBytes.Length);
		// Push
		await Response.Body.FlushAsync();
	}
}
```

When the endpoint is called, it'll send a new "line" of data instead of waiting for all items to be processed to be sent at once.
Write your own web server in python.
Tags: python, programming, development, coding
Published: 2021-07-22 19:46:39

In python, there are libraries that allow you to write your own web server in a few lines.

For Example:

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

When you run this, your machine will listen on port 8000 for requests.

In a web browser, If you navigate to http://127.0.0.1:8000/

The browser will get the response as below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5inmrscd79r3iwkwp0r.png)
How to Pass Core Web Vitals
Tags: pageloadspeed
Published: 2021-07-22 19:26:33

What Are Core Web Vitals?
These metrics are:

Cumulative Layout Shift (CLS)
Largest Contentful Paint (LCP)
First Input Delay (FID)
To help you pass the core web vitals test, we’re going to explore how to identify issues on your site and optimize your website’s performance in simple steps.

Before you can start working on improving your core web vitals, you need to know where your website is falling behind. So, let’s walk through a simple checklist you can follow to find optimization opportunities:

Check the Google core web vitals report
Identify potential problems
Dig deeper using PageSpeed Insights
Use the core web vitals extension to check individual pages in real-time (optional)

https://prerender.io/how-to-pass-core-web-vitals/
Type4Py: Machine Learning-based Type Auto-completion for Python (VSCode Extension)
Tags: python, machinelearning, productivity, vscode
Published: 2021-07-22 19:19:05

Since Python 3.5 ([PEP-484](https://www.python.org/dev/peps/pep-0484/)), developers can add type annotations to their code. Python's optional static typing improves code comprehension, code completion, program analysis, and more. However, retrofitting type annotations can be a laborious and time-consuming task. 

To accommodate the typing task, we would like to introduce the VSCode extension of [Type4Py](https://arxiv.org/abs/2101.04470), which is machine learning-based type auto-completion for Python. It assists developers to gradually add type annotations to their codebases.

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

We would like to invite Python developers to test our Type4Py's VSCode extension. We very much appreciate your time and feedback.

## Installation
The Type4Py's VSCode extension can be installed from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=saltud.type4py).

## Support
Please let us know your questions, issues, and bugs by reporting them [here](https://github.com/saltudelft/type4py-vscode-ext/issues).
Alternate Middleware Option for Java: POC
Published: 2021-07-22 19:12:22

######*This is the part-2 of the Alternate Middleware Option series*....

After all the analysis and evaluation we decided to choose **PYTHON** as it was fitting best in our point of view.

Now our next step was to build a web application or a desktop application or a mobile application or any such thing that would support us in our idea of choosing Python.
We then decided to *create a website* as a **POC** (proof of concept).
Now, we had this job of creating a website in Python, so we again started to checkout for the ways to do this. And then we came across the two most popular web frameworks; the *Django Web Framework* and the *Flask Framework*.
We again had to pick one among these two...

When we started trying to analyze in order to make a decision in this case, we had these below observations:
**1)** *Django* offered us the **conventional project structure**, whereas *Flask* comes with an arbitrary project structure.
**2)** *Django* use specific names like, for URL (urls.py), models, views etc. This simplifies adding new people to the project as **codebase navigation** is easy for them.
**3)** *Django* was created for the **rapid development** of the complex web apps. Developers have all the **tools** they need to implement and develop; easy, scalable, reliable and maintainable web apps.
**4)** *Django* has huge active developer **community**. There is so much useful content in public domains where as *Flask* has comparatively smaller community than that of Django.

So, after analyzing the above observations, we made a decision of choosing the **Django Web Framework**.