teleren/devto huggingface dataset:
One year as a self-taught dev and employed!📚
Tags: html, codenewbie, career, learning
Published: 2021-03-21 22:20:24

This post, in any way, attempts to be a road map for becoming anything. So don't try and make sense of any particular order I present some of the things I learned. First, because this post would be rather long if I were to enumerate all the fantastic things I came across, and second because they may not follow any particular order, other than how it will come to me while I try to piece this together. 

Soon it will be one year of my journey into teaching myself a new career, and it's funny how it came full-circle. I started to code with HTML and CSS, static websites and not a lot of fuzz. Now, on my 9-5, I do pretty much the same thing, plus a little programming here and there. 

It was crucial to me to get as much of each language's fundamentals as I could think of when I started with them. I put it in such a worldly manner because now I realize that what I thought were fundamental, more often than not, were just the very basics. I just started to brush the surface of the fundamentals. Lol!

Let's take HTML, for example. I realize I know very little about meta tags, ARIA code, or the canvas element and its API. On the other hand, I strive to write semantic HTML considering the content-management side of things and the assistive technology side of things. I can use the srcset property to load images based on the user's device resolution or bandwidth limitation, saving them time with faster loads and money with extra unused downloaded content.

I even had professional experience in the ancient art of HTML tables for newsletter templating. Which in and out itself was a patience exercise, but also a great lesson in building deeply nested structures (and why we should avoid that!)

Between the things, I have professional experience or a solid, researched and tested knowledge on the topic, and things I know very little, are the things I'm acquaintance. Like forms and their input fields! They both are ubiquitous elements of the web. They are also sort of dynamic when passed in attributes, in the way those attributes can trigger a response from the DOM based on conditions. Take in the case of a validation error on a password field, for example. I would say forms and input fields are my topic of choice for studying HTML at the moment.

In particular, because forms are the pillar of the front-end I'm building for my NodeJS back-end project. But that's a topic for the next time I try to write something.

Until next time! Bye!
Need to test API webhooks on local host? ngrok is a great solution.
Published: 2021-03-21 22:14:46

So recently I was trying to incorporate the mailgun api to keep track of user engagement with emails (did they just toss them out, like I usually do for certain mailing lists". So I wanted to add the built-in opened event from mailgun. But before deploying it into the real world I was trying to figure out how to get the webhook locally... You can't very well add localhost:3000 to the webhook, that just won't work.

Enter <a href="http://www.ngrok.com">ngrok</a>. It's a simple little tool that allows IP tunneling. So when you run the program, it will generate a secure url that will forward to your local host.

It's extremely simple and free for small use cases like mine was. It was limited to 40 connections a minute. So heck, I'd just keep my tests slow paced. The only thing I had to remember was in the end I was using a subdomain so that was just adjusting my routes on deploy. But on the $5/month plan it's quite simple. 

To get started all you have to sign up. Download ngrok, on the mac I had to allow my terminal to open it. Mac has some fun security these days. But after you download you should unzip the file somewhere you will remember to access it. I put it in the base folder of the project I needed it, since it's a tool that will be commonly associated with these files.

When you finish that, ngrok will assign an auth token with your account. In the folder you threw ngrok file in you can just enter `./ngrok authtoken YOUR_TOKEN_HERE`.
After that you are pretty much done. All you have to type in the terminal after that is `./ngrok http https://localhost:3000`. You can throw in whatever port you want. I was using rails so 3000 was my backends default. After running that function, it will give you an informational display. It will give you the internet address in a form of `https://SOMETHING.ngrok.io` log request types and where they were headed. When I saw my POST request to /notification from mailgun popping in I was delightfully surprised at the ease of adding this new test tool to my arsenal. It also means I can also test outside network devices for other projects and just see how they load differently depending on networks. 

For something so easy to implement it is vastly useful. Hopefully it's a useful program for you to use.
Sevens – My first React Redux app
Published: 2021-03-21 22:11:22

For this project I decided to try my ‘hand’ at a basic card game.  My previous projects displayed information and often allowed a user to submit a form.  This time around I wanted to create something that was more functional.  Since I would be using both React and Redux it seemed a great opportunity to update and access state throughout the game.  The card game Sevens seemed a good candidate for several reasons.  If you have never played the game a simple overview is this.  Using one deck,  you deal all cards to the players.  I decided on a four-player game so each player receives 13 cards.  To begin the game, you must be able to play a 7.  After that you can play off of the existing cards or play another 7.  The board would eventually resemble something like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl0bv3t2ham6pq3zw4h6.JPG)
 
To get started, I used the create-react-app generator, it provides a React application starter to build a single-page React app.  Next, I installed React-Redux.  This allows your React components to read data from a Redux store, and dispatch actions to the store to update data.  React Redux also provides a connect function which allows you to connect your components to the store.  The <Provider /> makes the Redux store available to the rest of the app.

Continuing with the front-end I installed Redux-Thunk.  Redux-Thunk is middleware used to handle asynchronous actions in Redux. By default, Redux action creators do not support asynchronous actions like fetching data, so we need to utilize Redux Thunk. Using this middleware avoids running into a problem where the action creator returns an action before the data is fetched.  Last I installed React Router.  React Router allows single page applications (SPA) to navigate through multiple views without having to reload the entire page.

For the back-end I used the rails generator  new my_api –api  .  Using this generator will configure your application to start with a more limited set of middleware than normal.  It will not include any middleware primarily useful for browser applications (like cookies support) by default.  It will also make ApplicationController inherit from ActionController::API instead of ActionController::Base.  This leaves out any Action Controller modules that provide functionalities primarily used by browser applications.  It will skip generating views, helpers, and assets when you generate a new resource.

Once both the front-end and back-end were working and properly connected, it was time to play some cards.

Since this was my first project using React and Redux, I did find it challenging.  In the end I gained an appreciation for how Redux allows you to share state across components.  I would certainly use it again.
Testing in production, is that the way to go?
Tags: discuss, help, todayilearned, learning
Published: 2021-03-21 22:11:07

---
title: Testing in production, is that the way to go?
published: true
description: What are the trade offs of testing in production, a productive discussion.
tags: discuss, help, todayilearned, learning
//cover_image: https://direct_url_to_image.jpg
---

Today I'm not coming with a post but rather with a question on an interesting topic: **Testing in production**. Is that something you'll do? What are the tradeoffs?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8raxrqlwbyoc38vnl3wi.jpg)

Short story:
This week I worked on releasing a new App interacting with data form existing services. 

The App was having some issues and I wanted to debug locally to fix them, whereas other person insisted to deploy and test in production then fix.

We needed to submit the App to AppStore and PlayStore and his argument was to speed up the review process, mine was that fixing it locally would be cheaper, then we would submit and App that we knew was working.

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

Any experiences on the topic? What would you have done? What would be your take? 

Happy debate and thanks for sharing your ideas. :)
Change behaviour of button on different pages.
Tags: react
Published: 2021-03-21 14:02:43

I am creating a React app like blogging page. In the navbar I have included three buttons:
1.Write 
2.Your Articles - to view articles posted by the user
3:Logout

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/589o4oh175qv1crv20c0.png)
 
Now I wanted to change behavior of Write button to submit type when I am writing articles and change text to Publish.
Here is expected output:

 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qenycaqttoppv0v4vad.png)
 
I did google and read some articles but was not getting proper solution.

To solve this problem:
1. I passed submitHandler method as prop from parent component to Navbar
2. created a newstate using useState hook in parent component and passed as prop.
I defined newstate like this:

const [navitems, setNavitems] = useState({
    item1:{text:"Write",type:'submit'}, item2:{text:'Your Article',type:''}, item3:{text:'Logout',type:''}
  });

passed newstate as prop to navbar.
In total there are two props passed to navbar.(submitHandler, navitems)

setter method is passed as prop to component, which will render when we are writing article, call it as "createComponent"

In the createComponent I called setter method "setNavitems" in useEffect and changed the button text=Publish and type=submit;

Since I have written article in createComponent I have to submit it from the same page to send data to server but as per the design wireframe I have to remove submit button and and submit through publish button which is in another component(Navbar).

To solve this I thought to render a different navbar looking very similar to previous and hide original. I did not liked the solution as it was using more resources for small functionality, I was rendering a complete new DOM node.

Then I used another way, passed the same submitHandler as prop to createComponent and called it onSubmit event, parent of Navbar and createComponet are same so I lifted the state and passed a new state as props to the createComponent
here it is:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf09wur68finlxkjr711.png)
 
article is not handlingchange on createComponent and it is is stored in parent component.

Finally I was able to submit the article from the parent component by calling calling dispatch in submitHandler function
100 Bytes Of Wisdom: Day 30
Tags: career, journey, advice, managers
Published: 2021-03-21 22:04:38

---
title: 100 Bytes Of Wisdom: Day 30
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice, managers
//cover_image: https://direct_url_to_image.jpg
---

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

Managers come in all shapes and sizes and some are definitely better than others. One time I had a conversation with my manager towards the end of my time at one company, and to be fair I was eyeing the door so I was pretty honest about my career ambitions outside of the company.  To my surprise and delight, my manager loved the conversation, and was suggesting companies to apply for that would suit my best next steps. I asked him, "are you even allowed to suggest this stuff?" and he said, "Sam, I care about you as a software engineer, not just you as a software engineer here". It was nice. It was selfless. I still recommend that company to others today. 

It was a long term mindset by him, but one that has worked out for him. 

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
The separation of back and front
Tags: php, backend, fullstack
Published: 2021-03-21 21:31:43

I have been reading a lot of post about PHP and wich framework is the best nowadays. Many developers said that Laravel is the winner. Other prefer Symfony or Drupal. There are a lot of reason to decide using one despite another. But I have not read nothing about the separation of backend and frontend. 

When I started my career we used to mix the back and the front in the same project. In my case (using Symfony) I developed a lot of webapps using the TWIG template system. Mixing backend and frontend code in the same file. That was the way we get used to be. It worked and there was no reason to change.

After a couple of years I decided to separate a little bit the responsability and I started using frontend frameworks (Angular, jQuery) to call the backend service and returning just json data from the back. In the end the frontend was server by the backend that was serving data to the frontend (booom). It was a step to be closer to my new setup.

After a few projects injecting Vue in the frontend side, we decide to separate completely the front from the back. This was a natural step because the projects we developed were usually based on a native mobile/web experience and the same API develop for the smartphone apps could be consumed by the web side. This decision was a point in our organization. 

Now we are able to undestand the scope of a project and we can separate and distribute the develop flow more efficiently than the time we mixed front and back at the same time
Introduction to MPI programming
Tags: c, mpi, programming
Published: 2021-03-21 21:25:51

MPI stands for Messaging Passing Interface. It is a standard that allows communication between processes. Thanks to that we can write high-performance parallel programmes.

## Basic commands
To use MPI commands you have to include the library.
```c
#include <mpi.h>
```
Before using MPI functions, you have to initialize it.
```c
int main(int argc, char** argv){
  ...
  MPI_Init(&argc, &argv);
}
```
You have to also remember to finish MPI at the end of your programm.
```c
MPI_Finalize();
```

In MPI application there are many processes. They might be grouped in a group called **communicator**. Each process in a group has its own identifier called a **rank**. 

You can get a rank of the currently running process.
```c
int currentProcessRank;
MPI_Comm_rank(MPI_COMM_WORLD, &currentProcessRank);
```

And also the count of processes inside the communicator.
```c
int processCount;
MPI_Comm_size(MPI_COMM_WORLD, &processCount);
```

**MPI_COMM_WORLD** is a default communicator. It groups all the processes when the program started.


Each process makes some calculations but in the end, we almost always want to calculate the final value. We can do it by MPI_Reduce(...) function. An example of the function call is shown below.
```c
MPI_Reduce(&process_calc_val, &final_value, 1, MPI_DOUBLE, MPI_SUM, 0, MPI_COMM_WORLD);
```
In that example, we sum the calculated values from each process. The result of this operation will be stored in the *final_value* variable.

### P2P communication

MPI allows us to exchange messages between processes. P2P (Peer to Peer) communication is possible.
The command to send a message is as follows:
```c
int MPI_Send(void *buf, int count, MPI_Datatype datatype, int dest, int tag, MPI_Comm comm)
``` 
So for example we use the code below to send some value to process with rank 1.
```c
int some_value = 5;
MPI_Send(&some_value, 1, MPI_INT, 1, 0, MPI_COMM_WORLD);
```
To receive the message, below command is used.
```c
int MPI_Recv(void *buf, int count, MPI_Datatype datatype, int source, int tag, MPI_Comm comm, MPI_Status *status);
```
Process 1 can receive a message from process 0. 
```c
int received_value;
MPI_Recv(&received_value, 1, MPI_INT, 0, 0, MPI_COMM_WORLD, MPI_STATUS_IGNORE);
```

Note that *MPI_Send(...)* and *MPI_Recv(...)* are blocking functions.

## Compiling
To compile the program put the line below in the terminal.
```bash
mpicc name.c -o name
```
And run it by:
```bash
mpirun -np <process count> ./name
```
Overthewire.org Bandit Level 0 -> 1
Published: 2021-03-21 21:15:18

This is the first in a series that will show how I solve the overthewire.org Bandit puzzles as I am completing them and learning how to better navigate and use linux terminal.

[Bandit level 0 -> level 1](https://overthewire.org/wargames/bandit/bandit1.html)

# Bandit Level 0 → Level 1
## Level Goal

The password for the next level is stored in a file called readme located in the home directory. Use this password to log into bandit1 using SSH. Whenever you find a password for a level, use SSH (on port 2220) to log into that level and continue the game.
Walkthrough

This level is simple enough just login to the server using given username and password.

```
~$ ssh bandit0@bandit.labs.overthewire.org -p 2220
bandit0@bandit.labs.overthewire.org's password: bandit0
```
Once logged in I only needed to read the contents of the readme file.

```
bandit0@bandit:~$ ls
readmebandit0@bandit:~$ cat readme
```

The output from the cat readme command is the password for the next level.

First level is simple enough all that is needed is to read a file.
List of APIs to use for creating JavaScript/React App
Tags: beginners, react, api, javascript
Published: 2021-03-21 21:08:54

Hello,Dev Friends.In this article I have written about a list of certain public APIs which you can use for practice as a beginner in React/JavaScript.Before starting with creating Apps in React using Public APIs,learn React basics and about fetch/axios,http requests,JSON.Learn to read the documentation of any API for its usage.

So,here goes the list:

1.Quotes API:
[API Link](https://api.quotable.io/random)
You can generate random quotes on clicking a button using this API.Make use of fetch and useEffect.
[Github Repository](https://github.com/kritika27/quotes-generator-react)
[Demo](https://dazzling-edison-76c948.netlify.app/)

2.Currency Converter:
[API Link](https://api.exchangeratesapi.io/latest)
This API has currency exchange rates which you can use for creating currency converter app.
[Github Repository](https://github.com/kritika27/currency-converter-reactjs)
[Demo](https://vigorous-wiles-69bb0f.netlify.app/)

3.Robohash API:
Website-https://robohash.org/
This API is used for generating unique robot/alien/monster images by adding any text at the end of the above url.
[Github Repository](https://github.com/kritika27/superrobos-react-robohash)
[Demo link](https://affectionate-almeida-56a8ef.netlify.app/)

4.Random user API:
[API Link](https://randomuser.me/api/)
You can generate random user and his/her details by using this API.

5.Weather API:
Website-https://openweathermap.org/api
Search for weather of any city with the help of the given API.Generate your API key for usage.

6.OMDB Movie API:
Website-http://www.omdbapi.com/
Search for the movies through this API and you can also display Single movie details separately by using React Router.API key is required.

7.Covid-19 API:
[API Link](https://covid19.mathdro.id/api)
Through this API you can generate Covid-19 data of different countries.
[Refer to this tutorial]
(https://www.youtube.com/watch?v=khJlrj3Y6Ls)

There are many APIs but I don't want to overwhelm someone who is starting with React/JavaScript.You can start with these APIs first for practice.

Happy Coding :)
You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27).
Changing Background Color in JS(project for beginners)
Tags: html, css, javascript
Published: 2021-03-21 20:53:39

This is an easy project for beginners.
* Step 1: Create a basic HTML and CSS with a button and give a default background color.
```
<div id="background">
    <h1>Changing Background Color</h1>
    <button onclick="clickFunction()">Click Me</button>
</div>
```
* Step 2: Add a event listener or onclick function to button.
* Step 3: Create an Array of colors and once button is clicked the background will change. Use `Math.random()` to pick color randomly.
```
function clickFunction()
 {
    let bg = document.getElementById('background');
    console.log(bg);
    let colors = ["red", "green", "blue", "yellow"];
    
    const colorIndex = parseInt(Math.random()*colors.length);
    bg.style.backgroundColor = colors[colorIndex];
 }
```
One second to read GitHub code with VS Code
Tags: github
Published: 2021-03-21 20:25:18

---
title: One second to read GitHub code with VS Code
published: true
description: Use github1s.com to read a GitHub public repository with online VS Code editor
tags: github
cover_image: https://raw.githubusercontent.com/mohitjaisal/github1s/master/resources/images/Github1sDemo1.gif
---

When you stumble upon an open source project in GitHub that looks cool, you might want to check its code base before you actually dive into it.

Of course, you can check the source code in the website  but here is a way more convenient way.

Just add 1s to github.com in the link and you can browse the whole project in online vscode.

![github1s.com how it works](https://raw.githubusercontent.com/conwnet/github1s/master/resources/images/demo.png)

For example, DEV repository link is [https://github.com/forem/forem](https://github.com/forem/forem). Thus, You can check the source code in this link: [https://github1s.com/forem/forem](https://github1s.com/forem/forem)

I find it super useful, one of the best things I got to know in 2021.
Método filter - JavaScript
Tags: javascript, tutorial, webdev, beginners
Published: 2021-03-21 20:19:58

O método **filter()** cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.

---

## **Parâmetros**

**callback -** Função passada como referência, será executada para cada índice do array e esta função tem que retornar **true** para manter o valor no novo array ou **false** para ignorar o valor, ou seja só serão mantidos os valores que passar pela função e retornar **true**. Esta função de **callback** pode receber 3 argumentos.

&emsp; **element -** O elemento que está sendo processado no array. 

&emsp; **index -** O índice do elemento atual que está sendo processado no array. (Opcional)

&emsp; **array -** O array para qual **filter** foi chamada. (Opcional)

---

### Sintaxe

```jsx
const newArray = numbers.filter(functionCallback);
```

---

## **Retorno**

O método **filter()** retorna um novo array contendo os elementos que passaram no teste da função.

---

## Exemplo

Criando um novo array com elementos que tenha o valor maior ou igual 18

```jsx
const numbers = [10, 6, 8, 19, 18, 20];
function isBigEnough(value) {
	return value >= 18;
}

const newArray = numbers.filter(isBigEnough);
// newArray -> [19, 18, 20]
```

<a href="https://www.notion.so/elianbecali/filter-406bd8837f4845369cc17287070b60da" target="_blank">Método filter | Notion
</a>
<a href="https://www.youtube.com/watch?v=j3IBD76Fo2o" target="_blank">Método filter | Youtube
</a>
Random Quote Machine
Published: 2021-03-21 20:19:36

<p>Show random quotes using "Random Famous Quotes" API
(<a href="https://www.mashape.com/andruxnet/random-famous-quotes" target="_blank">https://www.mashape.com/andruxnet/random-famous-quotes</a>)</p>

{% codepen https://codepen.io/t0s1n/pen/eYgOYjy %}