teleren/devto huggingface dataset:
Create Chaos In Your Company Today, No I am Serious!
Tags: productivity
Published: 2019-01-14 14:51:17

I am tagging this post as #productivity because I believe that is best way to describe something when you are in state of a chaos.

Nothing fills you up with adrenalin when you are in a meeting and someone slacks you:

"DUUUUUDEEEEEEE we got problems in PROD. Stop what you are doing and come over here!"

Veterans in IT hearing something like that, is just another incident, however for someone that recently started career in IT can be overwhelming and quite depressing.

Quick story:

I was in a meeting few years ago, that very same day I read something about [Chaos Monkey](https://github.com/netflix/chaosmonkey) by Netflix. At that meeting we had some topic to go over the stability of an environment so I said.. 

"What do you (Dev and few DevOps guys/gals) think if we randomly delete some apps, how would our post mortem would look like?" 

Everyone looked at me like I am from some planet Thanos 50/50, saying like "Why would we want to do that?". 

Welllll... the problem is that when you sometimes have new apps and legacy apps and legacy systems, you don't necessarily know what would happen if some disk gets destroyed or some random process gets killed or route53 for xyz.zyz.zy domain vanishes.. or xyz EC2 instance is terminated.

I've plated with chaoskube for Kubernetes for a while now, and must say that sometimes just scares you what could have gone wrong or have not anticipated when building a solid infrastructure.

Go ahead and put something to work that randomly destroys things, your resilience and stability will be greater in long run and you will spend less time tinkering around production problemes. 

Overall you are trying to find dependencies in your infrastructure and applications. 

If app B goes down, app A will become unstable, therefore your tasks is to find way to self heal app B and A. 

And if you do not want to use tools like ChaosMonkey, try something like hitting your site with 15k hits per minute, observe your server load. Find out if your boss head color gets red or purple 😡👿.


By the way, don't go full on mode with ChaosMonkey or if you are on K8s (Chaos Kube) , test it out first in dry run mode.

The main point I am trying to make here is that you need to accompass things that are outside of your comfort level and be prepared for what's coming. There are two ways you can go around it. Ignore the problem and keep restarting your application from time to time because of memory leakage, make a script to restart the application or fix the darn thing so you don't depend on being called at 2am.
What Makes an Effective Code Walk Through?
Tags: discuss, help, beginners
Published: 2019-01-14 17:49:19

---
title: What Makes an Effective Code Walk Through?
published: true
description: How do you guide another person through the forest of confusion you had a hand in creating?
tags: discuss, help, beginners
---
##Hi All!##

First dev.to post, this is exciting!

Throughout my very brief software development career, I've been onboarded to various projects. Each one of these onboarding sessions had a code walkthrough of some sort. There were slide decks, handouts, and an endless sea of confluence pages. These methods (and various combinations), all have their pros and cons, but I can't help but think there must be a better way to go about this.


##Question##

What types of code walk through sessions have you found to be particularly effective and why?
Product page, Bulma message, Password validator & more | Module Monday 25
Tags: showdev, opensource, webdev, javascript
Published: 2019-01-14 16:57:56

---
title: Product page, Bulma message, Password validator & more | Module Monday 25
published: true
description: Module Monday 25
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/v1547253568/product-images_axv2xu.gif
canonical_url: https://guide.anymod.com/module-monday/25.html
---

## Open-source mods for your next project

Everything below is open source and free to use on any website, web app, or anywhere else. [Anymod](https://anymod.com) has hundreds more like these.

Click a mod to see it along with its source code.

### Product page image section
A ready-to-use image section with hover to zoom.

<a class="btn btn-sm" href="https://anymod.com/mod/kdddmr?v=20">View mod</a>

<a href="https://anymod.com/mod/kdddmr?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1547253568/product-images_axv2xu.gif"/>
</a>

### Dismissable message (bulma)
Stylish message that can be read & closed.

<a class="btn btn-sm" href="https://anymod.com/mod/raaakd?v=20">View mod</a>

<a href="https://anymod.com/mod/raaakd?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1547255105/bulma-message_rbg8do.png"/>
</a>

### Form with reCaptcha
Bot-protected contact form that works automatically.

<a class="btn btn-sm" href="https://anymod.com/mod/nkldo?v=20">View mod</a>

<a href="https://anymod.com/mod/nkldo?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1496775673/vjkzhsxndwgxmjpmpqub.png"/>
</a>

### Password input validator
Checks for lowercase, uppercase, number, and length.

<a class="btn btn-sm" href="https://anymod.com/mod/alllmb">View mod</a>

<a href="https://anymod.com/mod/alllmb">
  <img src="https://res.cloudinary.com/component/image/upload/v1547321288/password_75_wtpreo.gif"/>
</a>

### Colorful footer
With message & social media links.

<a class="btn btn-sm" href="https://anymod.com/mod/mlllmn?h1=50&h2=100&v=20">View mod</a>

<a href="https://anymod.com/mod/mlllmn?h1=50&h2=100&v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1547260434/colorful-footer_wmlehn.png"/>
</a>

<hr>

I post new mods [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Songs You Listen To While Coding?
Tags: discuss, askdev, music, programming
Published: 2019-01-14 16:36:17

---
title: Songs You Listen To While Coding?
published: true
description: 
tags: discuss , askdev , music , programming
---

## Do You Listen To Songs While Coding?

I Do! 

#### Here's a songs I listen:

{% youtube hgi2MYAFgE8 %}

Here's the only 0.1% of favourite playlist!

## Share Your Favourite Songs You Like to listen while coding ❤
Reading and Writing Files in C: Part 5
Tags: c, io, file
Published: 2019-01-14 16:24:00

Just as I promised, we will write and subsequently read back a C structure! One caveat though: you need to know about binary files. You can learn more in the previous article.

For testing, the following structure will be used:

```cpp
struct TestStruct
{
    int    a;
    double b;
};
```

First, a connection to a file, specifically, a binary file is needed. Next, we create an instance of `TestStruct` and set our desired values. Finally, using `fwrite()` to write the structure into the file.

```cpp
#include <stdio.h>

typedef struct
{
    int    a;
    double b;
} TestStruct;

int main(void)
{
    FILE *file = fopen("test", "wb");

    TestStruct ts;
    ts.a = 105;
    ts.b = 194.543;

    fwrite(&ts, sizeof(TestStruct), 1, file);
    fclose(file);
}
```

Output:

```cpp
~/Desktop 
➜ clang main.c 

~/Desktop 
➜ ./a.out 

~/Desktop 
➜ cat test 
i!VL7�A`Qh@%                                                                    
~/Desktop 
➜ 
```

Trying to output a file that is saved with a C structure results in garbage.

Let's now read back in the data and see if everything is still correct.

```cpp
#include <stdio.h>

typedef struct
{
    int    a;
    double b;
} TestStruct;

int main(void)
{
    FILE *file = fopen("test", "rb");

    TestStruct ts;

    fread(&ts, sizeof(TestStruct), 1, file);
    fclose(file);

    printf("ts.a = %d\nts.b = %f\n", ts.a, ts.b);
}
```

Output:

```cpp
~/Desktop 
➜ clang main.c 

~/Desktop 
➜ ./a.out     
ts.a = 105
ts.b = 194.543000

~/Desktop 
➜ 
```

Everything was written and read properly.

## Next

This is a short article and there is more to explore but I feel everything that was taught in this series will provide many people with adequate knowledge to accomplish basic and more difficult problems relating to files.
Console.table()
Tags: codenewbie, debugging, beginners, javascript
Published: 2019-01-14 16:21:25

---
title: Console.table()
published: true
description: An introduction to the Javascript debugging tool console.table()
tags: #codenewbie, #debugging, #beginners, #javascript
---

Like all javascript programmers I will frequently throw a *console.log* into my code. I find it so much faster to log to the console than to deal with debugger for quick sanity checks. Recently I came across **console.table** which blew my mind and won a permanent place in my heart.

#What Is It?
It's exactly what it sounds like - it allows you to log your data to the console as a table. Let's say we have the following array:```let people = ["Frank", "Mary", "Bob"]```
If we use *console.log* we get this output in the console:```["Frank", "Mary", "Bob"]```
However, with *console.table* we get:
![Imgur](https://i.imgur.com/U1POfMK.png)

You can see that we get a list of each item in the array as well as the item's index (or position in the array).This might seem like overkill for such a simple array but *console.table* can also be used for objects. In fact the Mozilla Web Documents state: 
    *If data is an array, then its values will be the array indices. If data is an
object, then its values will be the property names.*

##Let's look at an object:
```let courses = {
            math: "calculus",
            science: "biology",
            language: "french"
  }```
*console.log* gives us this:
![log_obj](https://i.imgur.com/ounQpli.png)
while *console.table* gives us this:
![table_obj](https://i.imgur.com/dqZAHbJ.png)

##Now, an array of objects:

Let's look at the following array:```let students = [
    {
      name: "Beth",
      course: "Math",
      age: 25
    },
    {
      name: "Adam",
      course: "English",
      age: 29
    },
    {
      name: "Amy",
      course: "Physics",
      age: 32
    },
  ]```

*console.log* will return:
![log_arr_obj](http://i.imgur.com/oCSnnR3.png)

*console.table* returns:
![table_arr_obj](https://i.imgur.com/fVI9AA6.png)

This is fantastic because now our complicated array of objects is in an easy to read table. For me, it's so much easier to understand and grapple with data when it's in tabular form.  

##One Last Thing...
When using *console.table* you can also restrict the columns that are shown in the table.  Continuing with the array of objects used above, if we only want the student's names and ages logged out we could use the following:```console.table(students, ["name", "age"])```
to return:
![name_age](https://i.imgur.com/DPZXNeg.png)

As you can see, *console.table* gives you a few options to quickly review and analyze your data on the fly. 

What other debugging tools have you stumbled across that could be helpful?
Who's looking for open source contributors? (Jan 14th edition)
Tags: discuss, opensource, contributorswanted
Published: 2019-01-14 15:47:02

Find something to work on or promote your project here.

Please shamelessly promote your project. Everyone who posted in previous weeks is welcome back this week, as always. 😄

Additionally, all are welcome to also create a standalone post in this tag:

{% tag contributorswanted %}

Follow the tag for more posts like this one.

Happy coding!
Login/Logout functionality with Reactjs and Graphql
Tags: help, react, graphql, discuss
Published: 2019-01-14 14:49:21

---
title: Login/Logout functionality with Reactjs and Graphql
published: true
tags: help,reactjs,graphql,discuss
---
I'm trying to build a login/logout functionality using Graphql and Reactjs.
Here's my **schema** file
{% gist https://gist.github.com/RJ-1998/d9eadc2890f6e4edbc08b4631ec7e46f %}
I want to create a login mutation inside which I want to check if the user with certain email-id exist or not and if exists then password matches or not. This logic should be inside the resolve method but I am unable to figure out how to do it.
Here's my **Login** React Component
{% gist https://gist.github.com/RJ-1998/8301e04791a2fd7f212514a6a0ccfbeb %}
I also want to keep track of the token so that the user remains logged in if he or she refresh the page.
If someone has the solution please let me know 🙏
React Tutorial with Popup Authentication
Tags: react, javascript, authentication, reacthooks
Published: 2019-01-14 14:48:10

---
title: React Tutorial with Popup Authentication
published: true
description: Build a React application using popup authentication and React Hooks
tags: #react #javascript #authentication #reacthooks
canonical_url: https://auth0.com/blog/build-react-apps-using-react-hooks-and-auth0-auth-popup/
---

In this post, we are going to build a React application with Auth0 authentication using the popup feature. We will cover some of React’s newest features, starting our app with create-react-app. We will be using React Hooks to write components without using any classes. We will also be using Auth0’s Popup authentication flow and we will be covering how the popup mode might be a good option for your project. 

[Read on ⚛️](https://auth0.com/blog/build-react-apps-using-react-hooks-and-auth0-auth-popup/?utm_source=dev&utm_medium=sc&utm_campaign=reacthooks_authpopup)

![React Tutorial with Popup Authentication](https://thepracticaldev.s3.amazonaws.com/i/wdziyunal366saw55iiw.jpg)
What's your hosting provider horror story and you got through with it?
Tags: discuss, hosting
Published: 2019-01-14 14:43:02

---
title: What's your hosting provider horror story and you got through with it?
published: true
description: In lights of some shady stuff from GoDaddy, what's your horror/drama story with hosting/domain providers and what how was the ending. And if you switched from provider how are you satisfied with it?
tags: discuss, hosting
---

Yesterday I was browsing some webdevelopment subreddits and on the top of the "hot" feed there were 2 posts about GoDaddy. One about how it uses external websites to [capture domain search and taste them](https://en.wikipedia.org/wiki/Domain_tasting) in order resell them to the user who searched for it, and other one was about javascript injection to get usage metrics

1. [GoDaddy is sneakily injecting JavaScript into your website and how to stop it](https://www.reddit.com/r/programming/comments/afgbww/godaddy_is_sneakily_injecting_javascript_into/)
  * [Original post link](https://www.igorkromin.net/index.php/2019/01/13/godaddy-is-sneakily-injecting-javascript-into-your-website-and-how-to-stop-it/)

2. [My last night's horror story. TL;DR stay away from instantdomainsearch.com to search for your domain](https://www.reddit.com/r/web_design/comments/aexz49/my_last_nights_horror_story_tldr_stay_away_from/)


Although I'm from Europe, I always read and heard about Godaddy, as it's one name to get into your head and it seemed to be a big player (even a monopolist?) in Internet Services Provider for Hosting/Domain Registration. But as they are a big player, their [controversy list is big](https://en.wikipedia.org/wiki/GoDaddy#Controversies).

But even just one shady move from a provider lowers our trust on them and makes us look for better alternatives.

Last year at work, we faced some service unavailability on our webpage due to local elections, but after a few days we noticed that the access was still slow, but the wp panel access was fine. After some investigation, we realized that our provider was throttling access to our frontpage. Maybe in hopes that we would tier up the service. After this we tiered up from shared hosting to a VPS on another company.

So, considering these reputation-hurting episodes that affected these companies, what's your drama story with hosting or domain providers and what was the outcome of that.
Understand HTML5 FileReader API to Upload Image and Text Files
Tags: html5css3, javascript, softwaredevelopment, html5filereaderapi
Published: 2020-01-30 14:37:41

---
title: Understand HTML5 FileReader API to Upload Image and Text Files
published: true
tags: HTML5/CSS3, Javascript ,Software Development, HTML5 FileReader API
canonical_url: https://www.positronx.io/understand-html5-filereader-api-to-upload-image-and-text-files/
---

The post [Understand HTML5 FileReader API to Upload Image and Text Files](https://www.positronx.io/understand-html5-filereader-api-to-upload-image-and-text-files/) appeared first on [positronX.io](https://www.positronx.io).

![HTML5 FileReader API](https://www.positronx.io/wp-content/uploads/2019/01/positronx-banner-1625-01.jpg)

In this tutorial, I am going to share with you how you can use **HTML5 FileReader API to upload images and text files from the client side in the web browser**. HTML5 FileReader API provides a convenient way to communicate with local files through the local device. HTML5 FileReader API allows you to upload files or blob in the browser very easily.

## What **HTML5 FileReader API** can do for us?

 [Click here to read more](https://www.positronx.io/understand-html5-filereader-api-to-upload-image-and-text-files/)
Native HTML: Inert
Tags: html, a11y, inert, whatwg
Published: 2019-01-14 14:27:13

Today we'll be looking at the `inert` property, this was suggested by @vinceumo in the comments of my last post, thanks Vincent. `inert` is in the spec but has not yet been adopted by any of the main browsers, that being said, it is available behind a flag in Blink (Chrome and Opera).

`inert` is really important for users navigating your website with their keyboards but also it makes the page a lot more friendly for all users.

## The `inert` property

We finally get to return to the Mozilla site to get our definition! Though [`inert`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#Properties) is only mentioned as part of the `HTMLElement` and does not have its own page just yet.

> [**`HTMLElement.inert`**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert)
Is a [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.

Let's break it down, we know it's a `boolean` property which means it's either `inert` or it's not. This tells us all the syntax information we need.

```html
<!-- The main content is not inert -->
<main id="content">
  ...
</main>

<!-- The navigation panel is inert -->
<aside id="nav" inert>
  <nav>
    ...
  </nav>
</aside >
```
Great, now we know how to use it let's read what it actually does. We see that it instructs the browser to "`act as though the given node is absent`" which means we can't click on, tab to or select the element also its text is hidden from the `find in page` feature you get with most browsers. But, importantly, it remains visible.

## But... Why?

I've taken that same code structure as above and hidden my menu my moving it over to the right, as you would with a slide-in menu. I've written a little bit of JS to tell us which element has is currently selected. Try and tab through past the Anchors you could also try trying to find "Menu-item", you'll see there are 4 results but the browser doesn't know where they are.

{% codesandbox 2zxp75oxr0 %}

This is just one example but think about other things like modal dialog-boxes, their contents when hidden or everything else when the modal is open, or carousels with buttons.

## References

There are some great places to read more about I'd start with the [wicg page](https://wicg.github.io/inert/) about it. There is also @robdodson's a11ycast video from a couple of years back.

{% youtube fGLp_gfMMGU %}

## Signing off

A11y is becoming more and more important as we strive to make the web a place for everyone, attributes like this really are a step in the right direction.

I really hope you learnt something or, at least, enjoyed the read. If I've got something wrong please let me know, that's how we all learn. And please suggest any future post ideas you'd like me to explore.

Thank you for reading.
🦄🦄❤🦄❤❤🦄🦄🦄❤❤
Little announcement version 2 of MySigMail
Tags: vue, email, discuss, showdev
Published: 2019-01-14 14:01:22

---
title: Little announcement version 2 of MySigMail
published: true
description: Little announcement version 2 of MySigMail
tags: #vue #email #discuss #showdev
---

I would like to make a small announcement of version [2](https://github.com/antonreshetov/mysigmail/projects/2) in which a new tool will be presented - WYSIWYG email editor

MySigMail - is open source UI email signature generator [https://github.com/antonreshetov/mysigmail](https://github.com/antonreshetov/mysigmail)

Previously on redit - [post](https://www.reddit.com/r/javascript/comments/achxle/mysigmail_ui_email_signature_generator_on_github/)

Thanks for attention!
The Most Common Mistakes In Database Design
Published: 2019-01-14 12:43:57

---
title: The Most Common Mistakes In Database Design
published: true
description: 
tags: 
---

1 Poor Preplanning
2 Failure to Understand the Purpose of the Data
3 Inadequate Normalization
4 Redundant Records
5 Poor Indexing
6 A Single Table for All Domain Values
7 Poor or Inconsistent Naming Conventions
8 Poor Documentation
9 Inadequate Testing

https://likegeeks.com/database-design-mistakes/

Regards,
Simple Coding, Major Results: JSON-LD and Microdata For Your Website
Published: 2019-01-14 11:56:51

---
title: Simple Coding, Major Results: JSON-LD and Microdata For Your Website
published: true
description: 
tags: 
---
<h2> What Is Structured Data </h2>

When it comes to SEO, many are the ones who keep on forgetting about the fact that Google crawls a website by using an algorithm and the quality of the content is not strictly related to human perception, but everything fluctuates around multiple numerical connections and mentions. To better understand this, links are, in fact, the main ranking reason that Google sees in terms of both quality and relevance. 
Structured data follows a <a href="schema.org">schema markup</a> and combines it with JSON-LD scripts in order to be correctly crawled by the infamous Googlebot. 

<h2> What should I do With My Structured Data? </h2>

Applying structured data is quite easy, since it creates a script which is separated from all the other functions and is, in fact, considered as a basic form of coding, which could be installed in both coded sites and CMS-based ones, by using the <a href="https://www.schemaapp.com/">schema app</a>. Given the fact that there are tons of markups available within the Schema Community and more are being developed right now since it's an open source matter, it's important to use the ones which are most commonly used, such as the Organization, Website and Products one. 

<h2> The Benefits </h2>

Structured data is the main source of information for what concerns rich snippets within the SERP. Not only this is terribly important from a UX point of view but is drastically covered in many marketing case studies, as we can see for certain <a href="https://www.apadmi.com/ios/">iOS app development</a> companies which heavily rely on SEO and organic traffic.
On top of that, the overall markup strategy could definitely boost the organic traffic, since the fetching process will be simplified.



<h2> To Conclude </h2>

Having structured data installed on your site could definitely improve the crawling process for your site and, if done properly, will also confirm your brand's mention online (by using the "sameas" attribute, for example).