teleren/devto huggingface dataset:
What can we learn from the Facebook outage?
Tags: facebook, postmortem, outage, humanerror
Published: 2021-10-11 09:40:29

---
title: What can we learn from the Facebook outage?
published: true
date: 2021-10-05 00:00:00 UTC
tags: facebook,postmortem,outage,humanerror
canonical_url: https://jhall.io/archive/2021/10/05/what-can-we-learn-from-the-facebook-outage/
---

If you’re like me, you may not have noticed the Facebook/Instagram/WhatsApp outage first-hand. But you’re probably not like me, and you probably found this outage to be a personal nuisance.

Now that things are returning to normal, Facebook has given us a small glimpse into [what happened](https://engineering.fb.com/2021/10/04/networking-traffic/outage/):

> Our engineering teams have learned that configuration changes on the backbone routers that coordinate network traffic between our data centers caused issues that interrupted this communication.

Ah! Human error. Those pesky humans. I hope they learned their lesson.

Not so fast.

It may be easy and tempting to point to the human (or group of humans) who made a configuration error, and call it a day. But at the end of the day, the vast majority of technical failures, be it in IT systems, aircraft accidents, automobile accidens, or burned cupcakes, come down to human error. If we end our investigation there, we’ll never really improve.

So if the human who made the configuration mistake is not to blame, who or what is?

Here are a series of questions you can ask next time you’re faced with this delimma, to put you on the track to a more “human-proof” system:

- Why did the system allow a human to make an erroneous configuration change?
- Why was a human error able to have such a broad impact?
- What safeguards can we put in place to prevent such errors from occurring?
- What systems can we put in place to detect such errors before they cause a catastrophic failure?
- What backups can we put in place so that when there’s a similar failure, we can continue to operate?
- How can we improve the system so that we can detect such failures more quickly in the future?
- How can we recover from such failures more quickly next time?

I’m sure you can use your imagination to double or tripple this list. The point is: Even when human error is involved (and it usually is), that should never end your investigation, or be considered the root cause. Do a [blameless postmortem](https://jhall.io/posts/zero-prep-postmortem/), and [solve every problem twice](https://jhall.io/posts/solve-every-problem-twice/).

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to use the FormData object
Tags: webdev, javascript, html
Published: 2021-10-04 23:32:37

##### *An explanation of what the FormData object is and how to use it with an existing HTML form.*

## What is a FormData object?

To understand what FormData objects are we should first know where they come from. The FormData objects are constructed from the [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) interface. This FormData interface gives us the ability to create key, value pairs with the [FormData constructor](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) to represent our form’s fields and values.

## Using FormData in JavaScript

To demonstrate how to implement the FormData object with Javascript we’ll be using this form for our example.

![Newsletter form](https://cdn-images-1.medium.com/max/2000/1*kw3ehRLoue2Ud25xS0Je8w.png)

Let’s check out what the HTML looks like for this newsletter form.

{% gist https://gist.github.com/CoderJay06/5d2bfd8bca474b1aa6ce595a9637f377 %}

One thing to notice here is that we’ve included the [name](https://www.w3schools.com/tags/att_name.asp) attribute. This is important not to forget because only input fields containing the name attribute will work with the FormData object.

Now that we see how the form is set up let’s head over to our javascript file and code everything out.

{% gist https://gist.github.com/CoderJay06/d6e71191a6709550ddf4cca2533bb252 %}

Here you can see how we’re first listening for our form to be submitted. Once the submit event is triggered we create a new instance of the FormData object passing in the form element that we grabbed from the DOM. This bundles up everything with a name attribute from our form giving us the ability to access submitted input data.

After we create our FormData object we grab the values from the inputs using the [`.get()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/get) method (make sure to pass in the name attribute values here from the inputs, not the class name or id). After this step, if this were a real-world application we would most likely be sending the form data off to a server somewhere with a fetch request. For demonstration purposes though, we’ll just keep it simple and render a message to the user letting them know they’ve signed up.

Let’s go ahead and try out our newsletter form now that we have everything set up.

![Newsletter form with user input](https://cdn-images-1.medium.com/max/2000/1*9BmqY-D7CUMGoCHzabVvXA.png)

Now if we click Signup all our form data will be submitted and we should get a pop-up message letting us know we’ve signed up.

![Newsletter signup message](https://cdn-images-1.medium.com/max/2000/1*0hQN_kBOfvOz5zT00U0Q4A.png)

## Conclusion

FormData objects are a great tool to use with your HTML forms. They allow you to easily access everything from your form without having to individually get and store each element or input value one by one.

Just create a new object from the FormData constructor passing in your form element and utilize the [FormData methods](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that are provided.
Binary Search Trees
Tags: webdev
Published: 2021-10-04 23:17:37

---
title: Binary Search Trees  
published: true
description: 
tags: webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Intro to Trees
                       -Intro to Binary Trees
            
  
                        
             


###Intro to Trees
Trees are a data structure that consists of nodes in a parent/child relationship. Tree data structures brach off from on node to the other in a top-down direction. 

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

Each node can point to another node. 

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

Trees are nonlinear data structures because they branch off of other nodes and do not move in a straight forward fashion. The branching makes trees flexible. Meanwhile, lists are linear data structures because they move from one after the other in a straight line direction. 

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

####When a data structure is not a tree 

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

This picture is a graph not a tree. 
Not a tree because there are nodes that are references other nodes that are not below them. 
###A node can only point to a child. 
####A child can not point to a parent. 

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


The root of a tree is the top node. 
The child is a node directly connected to another node when moving away from the root. 
The siblings is a groups of nodes with the same parent. 
The leaf is a node with no children. 
The edge is a connection between one node and another. 




###Intro to Binary Trees
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swkl26t8iyw7xzw0ea59.png)

A binary tree is when a node can only have a max of two children. A node may have a single child or no children and still be a binary tree. 

###Binary Search Tree 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/349izbaat13m15xtdr5k.png)

Special case of a binary search tree that is sorted in a specific way. BST are used to store data that can be compared. 
Every node to the left of a parent node is always less than the parent. 
Every node to the right of the parent node is always greater than the parent.
Virtualização nos Mac M1? Sim, com UTM
Tags: opensource, m1, virtualization, macbook
Published: 2021-10-04 22:38:15

Como todos já sabem, a Apple resolveu inovar mais uma vez e nos trouxe novas máquinas com seu chip M1. Isso é legal? Sim, mas junto com ele, nos trouxe também problemas de compatibilidade, já que a arquitetura do chip M1 é arm64 e não o tradicional x86_64.

Por conta disto, soluções de virtualização já consolidadas no mercado, como o [VirtualBox](https://www.virtualbox.org/) não funcionam, já que este, funciona somente na arquitetura x86_64.

Porém, o mundo open source é lindo e graças a ele, temos uma solução! E esta solução é o [UTM](https://mac.getutm.app).

O [UTM](https://mac.getutm.app) foi originalmente criado para virtualização em iPhones, porém, como os novos MacBooks também usam o mesmo chip M1, foi criado a versão desktop também.

A instalação do [UTM](https://mac.getutm.app) é muito simples, bastando baixar o .dmg a partir do site ou do repositório do projeto no [GitHub](https://github.com/utmapp/UTM), executar e copiar o UTM para a pasta Applications. Uma alternativa interessante também é a instalação pela Mac Apple Store.

No próprio site do [UTM](https://mac.getutm.app) tem uma galeria, onde você encontra várias opções de distros linux para instalação e até mesmo algumas versões do Windows pode ser executadas. Você pode consultar tudo isto em https://mac.getutm.app/gallery/

Um projeto lindo desses merece uma star no repositório deles no GitHub, https://github.com/utmapp/UTM.

#### Mas Joubert, existe alguma alternativa?

Então, até tem, o [Parallels Desktop for Mac](https://www.parallels.com/blogs/parallels-desktop-apple-silicon-mac/), porém, não é uma solução open source e você precisa ter uma conta para usar, o que para mim não faz o menor sentido.

Até o momento, só conheço essas duas opções que realmente funcionam no Mac M1, caso eu conheça mais soluções ou novidades, volto com novos posts sobre o assunto.
Day 465 : Blast Off!!!
Tags: hiphop, code, coding, lifelongdev
Published: 2021-10-04 21:57:51

_liner notes_:
- Saturday : So I pretty much spent the day prepping for the radio show since I didn't really work on it during the week. Definitely trying to do that again. My co-host was able to join this time, so that was good. Had a really good time. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a photo of DJ Dolo76's vinyl release with an image of Vasquez from the movie "Aliens" with the words Oct 2nd 2021 Today You, Tomorrow Me.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yuq6r53p86xvl5bkbto.jpg)

- Sunday : Had the https://untilit.works event and that went pretty well until the very last segment where I accidentally clicked a button and had to redo it. haha. Other than that, I worked on my side project and looked into some new stuff that I may be able to write a blog post on for work. After that, I watched an episode of "Boruto", "The Walking Dead", "The Walking Dead: World Beyond" and "Talking Dead" to end the night. 

- Professional : Today was a pretty chill day of meeting with team mates and working on my blog post.

- Personal : So, my side project is coming along. I added my shirt shop to it. It's just an iframe with my spreadshirt online shop. I also played around with how I wanted to make a switch. I've seen some tutorials that use use a checkbox and then style that to look like a switch. I was playing around with the range element and only set it to 0 and 1, so it was kind of working like a switch out of the gate and then you can style it to how you like. Still playing around with it.

![Overhead photo of the Kioloa, Australia coast with ocean waves crashing on large brown rocks.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev7nxoz1pvrdh7zolsao.jpg)

Going to play around with that switch a little more and get it looking how I want and then hopefully implement it into my project. Going to watch an episode of "Boruto". Pretty much all I'm planning on doing. Maybe read a chapter of this book I bought. About to get started... blast off!!!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube IdQZxKeSzd8 %}
Scopes and namespace
Tags: python, beginners, programming
Published: 2021-10-04 21:28:57

Namespace is a container that has all the names (of
variables/functions/classes) that you deﬁne. You can deﬁne same
names in diﬀerent namespaces. A name or a variable exists in a
speciﬁc area of the code which deﬁnes its scope. The information
regarding binding between the variables/objects is stored in the
namespace. There are three types of namespaces or scopes.

Built-in These are in-built functions that are available across all
ﬁles or modules.

Global The global namespace has all the variables, functions, and
classes that are available in a single ﬁle.

Local The local namespace are variables deﬁned within a function.

The scopes are nested, which means that the local namespace is
nested within a global namespace which is nested within built-in
namespace. Each scope has its namespace.
Dirty Oat Chai: Coffee & Coding
Tags: javascript, beginners
Published: 2021-10-04 20:58:38

I wanted to give myself a warm welcome to the wonderful world of coding! To begin, I must start with coffee. My regular order is a hot dirty oat chai latte. This is important in case anyone wants to send their warm regards my way with a fresh cuppa :-) We all have our go-tos and regular orders to make ourselves comfortable and get ready to start our days. The basics and ingredients are the same, but our format, uses, needs, and modes of operation differ when it comes to both coffee and coding. Starting off with #javascript. Finishing Phase 1 of Flatiron School’s software engineering program AND my cup of dirty oat chai are both within reach! This will be a technical blog of my journey through school and beyond. Let’s get it going, y’all!
Vim: The good parts
Tags: vim, linux, programming
Published: 2021-10-04 20:55:02

##Introduction
Vim is the dark side of the programming, you can rule everyone with vim. ![the power to rule everyone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hr273cs1tb5aedp0hi5t.png)

##Modes
Vim has several modes with different functions but these are the  most commonly used.
The easiest way to know what mode you are in is by looking at the status bar at the bottom of the editor.

###Normal mode
Normal mode is Vim's default mode. When you are in normal mode you can navigate, perform operations, and destroy your keyboard.

####How to move
**h** -> move to left
**j** -> move to down
**k** -> move to up
**l** -> move to right

**0** -> move to the beginning of the line
**$** -> move to the end of the line

**w** -> move to the next word
**b** -> move to the back word
**e** -> move to the end of current word

**gg** -> move to the beginning of current buffer
**G** -> move to the end of current word

**:q** -> exit from the editor
**:w** -> save the editor

###Insert mode
In this mode you can enter text, delete and edit the document.

####Commands
**i** -> enter insert mode to the left of the cursor.
**a** -> enter insert mode to the right of the cursor.

**I** -> enter insert mode to the beginning of the line.
**A** -> enter insert mode to the end of the line.

**o** -> enter insert mode one line down.
**O** -> enter insert mode one line up.


###Visual mode
In this mode you can select parts of the document, copy them, cut them, delete them and paste them.

####Commands
**y** -> yunk the selected characters.
**d** -> cut or deleted the selected characters.
**p** -> paste.

##Conclusion

If you learnt something from this article, please let me know in the comments.

Thanks for reading.
![100% of the brain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br0b0hp8js1k0x8sxapv.jpg)
Week 2 : Google PM specialization 
Tags: management, projectmanager, agile, methodology
Published: 2021-10-04 20:43:39


Hello All, 

In this article, I will sum up what I have learnt in the course during the week 2 (for those who didn't see my previous posts, I should mention that I decided to wrote articles as a memo of a course that I am taking on Coursera related to Project Management).

So, ready to continue from where we have left last time? :D

This time we will talk about goals and some methods to set them properly.

In the initiation phase, it is important to well-define the goals of your project to get the result expected. 
Having goals that are clear for you, your stakeholders and your team is crucial. It helps you and your team to know what to do, it's like having a roadmap, shared with all people involved, to a specific destination.

There is a lot of methods to set goals, one of the most common one is **SMART Method** (I am sure you know or heard about it before), so what does each letter means? 

1.S for **Specific**: the goal must be specific, not a global or a vague one. For example, saying that you want to lose weight isn't specific, but saying that you want to lose 5kg during 15days, you make it a clear and a specific goal. When setting a goal try to answer these questions: *What do I want to accomplish? Why is this a goal? Does it have a specific reason, purpose, or benefit?*
2.M for **Measurable**: You can tell the goal is measurable by asking *how much, how many, and how will I know when it's accomplished?* Taking the same example about weight, loosing 5kg
make the goal measurable.
3.A for **Attainable**: what is the purpose of setting goals that are not reachable? goals must be challenging but not so hard to reach, otherwise you lose motivation, and you may give up before attending your goal. For our example, you may decide to exercise 30min during 3days of a week instead of 2hour every day.  Break down the goal into smaller parts and see if it makes sense.
4.R for **Relevant**: does it make sense to try and reach this goal? Think about how the goal lines up with other goals, priorities, and values. Deciding to lose weight, may align with your values: Eat healthy / Avoid food waste / Have a good shape...
5.T for **Time-bound**: Time-bound means your goal has a deadline. For our example, we assumed that we can achieve the goal in 15days.

Specific, Measurable, Attainable, Relevant, and Time-bound (SMART) goals are very helpful for ensuring project success.
 
Another method to define goals for a project is **OKRs**. 

OKRs stands for **Objectives and key results**, it helps to establish and clarify the goal of an organization/Project/Person.

![Alt OKRs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j33tqpevju14eaft2gz7.png)
You can learn more about these two methods on the Internet : when it is appropriate to use one instead of the other, what are the pros and cons of each method and more..., and why not share with us what you learnt in the comment section :)

Thanks for reading and have a nice day
FACEBOOK, INSTAGRAM, WHATSAPP ET MESSENGER TOUCHÉS PAR UNE LOURDE PANNE MONDIALE
Published: 2021-10-04 20:31:43

Les réseaux du groupe Facebook sont actuellement en proie à une panne majeure, touchant de nombreux utilisateurs. Aucun des services de l'entreprise n'est accessible.
Les réseaux sociaux du groupe Facebook, Instagram et Whatsapp rencontrent actuellement une panne. 

Selon le site DownDetector, des utilisateurs français ont signalé une impossibilité de se rendre sur ces réseaux sociaux depuis les alentours de 17 heures, heure de Paris. Il est donc impossible d’envoyer ou de recevoir des messages, ou encore de mettre à jour le fil d’actualité de ces plateformes. Le problème ne se limite pas à l'Hexagone. Plusieurs pays, à commencer par les Etats-Unis, sont concernés.
Selon plusieurs spécialistes, la panne est liée à un problème de DNS (Domain Name System), un "annuaire" numérique indispensable pour qu'un nom de domaine facilement mémorisable - par exemple Facebook.com - puisse effectivement renvoyer vers l'adresse du site demandé, qui prend en réalité la forme d'une suite de chiffres baptisée adresse IP.
Creating an Infinitely Zooming image (for ANTI-divtober 😉)
Tags: codepen, showdev, javascript, css
Published: 2021-10-04 20:19:38

\#divtober is a time for CSS artists to come out and play. They have to create a different piece of CSS art each day to showcase their CSS artistry and skill! 

There are already some fantastic entries, such as this one from @alvaromontoro 

{% post https://dev.to/alvaromontoro/ceiling-fan-entry-for-divtober-306p %}

## "anti-divtober"?
I don't have any skill. But I am still going to participate in my own way 😉

Those of you who follow me already know I don't do CSS art or single div stuff, so I am going to join the challenge, but do **everything except** create single div CSS art! 🤣

## So what are the challenges?

{% twitter 1442895061000155136 %} 

| Day | thing to create |
| --- | --- |
| 1 | Fan | 
| 2 | Watch |
| 3 | Quick |
| 4 | Loop |
| 5 | Tired |
| 6 | Hungry |
| 7 | Toxic |
| 8 | Growing |
| 9 | Homonym |
| 10 | Organised |
| 11 | Slice |
| 12 | Squeak |
| 13 | Camouflage |
| 14 | Fancy |
| 15 | Float |
| 16 | Snow |
| 17 | Stack |
| 18 | Shine |
| 19 | Nostalgia |
| 20 | Journey |
| 21 | Magic |
| 22 | Critter |
| 23 | Loud |
| 24 | Smelly |
| 25 | Dip |
| 26 | Spice |
| 27 | Film |
| 28 | Dots |
| 29 | Fruit |
| 30 | Contrast |
| 31 | Spooky |

## Day 1-4 entry
The first 4 days are fan, watch, quick and loop.

So I did a **fan**, **watch**ing a concert, that is part of a **quick** infinite **loop** 😂🤣

{% jsfiddle https://jsfiddle.net/L5eog3df/ result %}

## You're silly
Yeah I know!

You should check out the truly skilled people at https://twitter.com/hashtag/divtober?src=hashtag_click&f=live

Have a great week everyone, keep an eye out for my next entry!