teleren/devto huggingface dataset:
Mentoring at Codebar
Published: 2021-01-23 14:53:19

I came across [codebar](https://codebar.io/) a year ago (someone mentioned it to me at the [You Got This](https://yougotthis.io/) conference). Although there was one near me it was on an evening when I already had a regular thing on, and it started half an hour after I finished work in a place that took longer than half an hour to get to in rush hour. At the time I bookmarked it as something I might be able to go to on occasion if I skipped my evening thing and took the afternoon off work.

But then the pandemic happened and they went virtual. Although I had forgotten about them until the end of last year. I found they had a virtual session this week and they were in need of mentors. I didn't have anything specific I needed help with, but my imposter syndrome told me that because I don't know everything and there are lots of people who know more than me, it means I can't be of any use at all.

I reminded it that I know more than I used to and as my teacher friends have said in the past, you only need be one chapter ahead of your students. So I signed up.

On the night I was nervous. What if I was no use to whoever I was paired with? What if they asked about something I knew nothing about? What if I just got confused about how to use Slack and Discord?

As it turned out I had nothing to worry about. My computer behaved itself (for a change, this year!), I had a nice chat and was some help. It turned out to be not entirely different from times at work when someone messages with something that doesn't work and they don't know why - and when I look it's not always obvious why (but sometimes it is) (usually when I'm the one asking it's the most obvious, simple thing in the world that's wrong).

It all worked just as they said it would, really. It would be nice to go to one in the real world and meet more people on the same journey as me, but then the same could be said of a lot of things in the past 10 months.

In the meantime I'll be signing up to do some more mentoring at Codebar in the future.
This CLI Tools for Monitoring like a Pro with Glances, Ctop, LazyDocker and Ncdu
Tags: webdev, monitoring, tools, productivity
Published: 2021-02-06 20:03:23

## Glances

Glances is a cross-platform monitoring tool which aims to present a large amount of monitoring information through a curses or Web based interface. The information dynamically adapts depending on the size of the user interface.

![Alt Text](https://raw.githubusercontent.com/nicolargo/glances/develop/docs/_static/glances-summary.png)

Link : [https://github.com/nicolargo/glances](https://github.com/nicolargo/glances)


## Ctop

ctop provides a concise and condensed overview of real-time metrics for multiple containers

![Alt Text](https://github.com/bcicen/ctop/raw/master/_docs/img/grid.gif)

Link : [https://github.com/bcicen/ctop](https://github.com/bcicen/ctop)

## Lazy Docker

All the information you needed in one terminal window with every common command living one keypress away

![Alt Text](https://github.com/jesseduffield/lazydocker/raw/master/docs/resources/demo3.gif)

Link : [https://github.com/jesseduffield/lazydocker](https://github.com/jesseduffield/lazydocker)


## Ncdu


Ncdu is a disk usage analyzer with an ncurses interface and aims to be fast, simple and easy to use,

![Alt Text](https://inconsolation.files.wordpress.com/2014/01/2014-01-31-lv-r1fz6-ncdu.gif)

Link : [https://dev.yorhel.nl/ncdu](https://dev.yorhel.nl/ncdu)


## k9s


K9s is a terminal based UI to interact with your Kubernetes clusters. The aim of this project is to make it easier to navigate, observe and manage your deployed applications in the wild.

![Alt Text](https://user-images.githubusercontent.com/30311254/75324277-e172be00-5876-11ea-962a-2194b4c95f6b.gif)

Link : [https://k9scli.io/](https://k9scli.io/)
How to check that I was redirected to the correct URL with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-06 19:51:50

## Another post from the series “Pinches of Cypress”

Continuing the series, learn how to verify that the user is redirected to the correct URL after a certain action.

Imagine a logout test scenario.

Let's say that after logging out of the application, the user is redirected to the login page. How to test that?

The answer is simple.

`cy.url()`

Let's look at an example.

```js
describe('Logout', () => {
  beforeEach(() => {
    cy.login() // I'll talk about custom commands in another post. Stay tuned!
  })

  it('is redirected to the login page on log out', () => {
    cy.contains('Logout')
      .should('be.visible')
      .click()

    cy.url()
      .should('be.equal', 'https://example.com/login')
  })
})
```

With the return of the `.url()` function call, we can verify that it is the same as an expected URL.

Let's look at another option, in case the `baseUrl` property is defined in the `cypress.json` file.

```js
describe('Logout', () => {
  beforeEach(() => {
    cy.login()
  })

  it('is redirected to the login page on log out', () => {
    cy.contains('Logout')
    .should('be.visible')
    .click()

    cy.url().should(
      'be.equal',
      `${Cypress.config("baseUrl")}/login`
    )
  })
})
```

Tada! 🎉

With the JavaScript [template strings](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings) functionality, we can obtain the `baseUrl` configuration value (through `Cypress.config (“baseUrl”)`) and interpolate it with the `/login` value.

That way, we can run the same test in different environments (with different `baseUrl`s), and everything will continue to work!

___

What do you think about the series?

I'm looking forward to hearing your feedback.

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/05/como-verificar-que-fui-direcionado-para-url-correta/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).
JS: How to implement a Random Background Color Change to make your sites more professional
Tags: webdev, tutorial, javascript, codequality
Published: 2021-02-06 19:44:48

`Hello World!` I decided to start a new series! - A CSS/JS trick in 5 minutes - It will be a concentrate of quick and useful tricks you can apply to your website. I will try to never exceed 20 lines of code and to always go straight to the point. I will start very easy, how to implement a random background color change. 

For that we just need a javascript function:
```
function random_bg_color() {
	let x = Math.floor(Math.random() * 256);
	let y = Math.floor(Math.random() * 256);
	let z = Math.floor(Math.random() * 256);
	let bgColor =  `rgb( ${x}, ${y}, ${z} )`;
	document.body.innerText = bgColor;

	document.body.style.background = bgColor;
}

setInterval(random_bg_color, 2000); // You can easily change Interval here
```
I think there nothing really difficult to explain, we create 3 random variables and assign them to the background. We just need to know how RGB system work (or like Jack said in the comments we could also use HSL).


> RGB defines the values of red (the first number), green (the second number), or blue (the third number). The number 0 signifies no representation of the color and 255 signifies the highest possible concentration of the color. [Pluralsight](https://www.pluralsight.com/blog/tutorials/understanding-hexadecimal-colors-simple)
 
`document.body.innerText = bgColor;` 
This line of code serves to show RGB of the color on screen. 

---

You can have here a live preview:
[Click Me](https://codepen.io/DevLorenzo/pen/PoboRqm)

{% codepen https://codepen.io/DevLorenzo/pen/PoboRqm %}

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

---

Check this article: [The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀](https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g)

{% link https://dev.to/devlorenzo/the-ultimate-compilation-of-cheat-sheets-100-268g %}

---

## **[Subscribe to our newsletter!](https://worldindev.ck.page/)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
Angular 11 + Tensor js in Youtube
Published: 2021-02-06 19:22:41

Please do subscribe and share 
🔴 YouTube channel link : 
https://youtube.com/channel/UCgzAaqAQjS-FVveLQ0WZBCw
Famous in List -
Angular 11 + Tensor js : 
https://youtu.be/FGXwTFy2s_w
.
MRK Tutorials - Free Tutorials & Tips for all
MRK Tutorials  is a channel for learning . We here make learning easy .We promise you the best , we promise you we wont 
compromise , we promise you we teach you everything we know , we promise to learn and teach if we don't know

Simply , MRK Tutorials - Free Tutorials & Tips for all
📖 Tutorials on 
1) web development - HTML ,CSS ,JavaScript ,Angular ,React ,jQuery , Typescript , Rxjs
2) graphic design
3)  web design 
4) Backend - Python , Nodejs 
And much more  
Just go through our channel , it gives good glance and also makes you want to learn more and more

⭐️ Languages 
  1) English
  2) Telugu
  3) Hindi

We are in  - Links Above
🔵Telegram 
🟦 Facebook
🟪 Instagram 
🐦Twitter
Animate a compartir lo que sabés 1 > 0
Published: 2021-02-06 19:06:27

Lo que voy a contar a continuación es algo que dentro de mi círculo (y asumo que en otros también) es algo normal, algo tan incorporado, que a veces pasa desapercibido. 

Todo lo que voy a decir, es basado en mi percepción y experiencia, asi que si no te gusta, te ofende o lo que sea, te pido perdón de antemano. 

Cuando empecé a programar, muchas veces me dió verguenza (f*king diéresis) publicar contenido, todo el tiempo pasaba por la indesición, por la balanza donde se encontraba: si compartir mi conocimiento, que claramente es bajo (aunque desde que me quiero un poco más, esto me importa un poco menos), o si no compartirlo, porque hay muchas personas que saben mucho más que yo, tienen más experiencia, más estudios, en fin, más.

Agredezco día a día tener un amigo como [Juani Gallo](https://twitter.com/JuaniGallo), y una futura amiga como [Bel](https://twitter.com/iamdoomling) (que probablemente crea que no me enseña, pero yo aprecio su paciencia, y le pido perdón por ser tan lento en entender sus bardeadas) que además de ser excelentes mentores, son excelentes personas (sí, son mis empleadores, vengan de a uno a bardearme por tirarles flores).


Bueno, me descarrilé un poco, pero algo que Juani siempre dice es que "1 es mayor que 0", algo que suena simple al principio, pero que para mi significa mucho, y que cada día lo aplico más.

Si vos llegas a creer por un momento que tu poco, bajo, alto, mucho, experto, inexperto conocimiento podría llegar a ayudar a alguien, por más pequeño o tonto que creas que sea, compartilo. Pensá en cuántas veces alguién escribió un tweet, un post de stack overflow, un issue de github, un blog, y a vos te terminó sirviendo (o te hizo quedar como un rey/reina/ente de la nobleza no cis, seamos sinceros). Ni hablar de todo el contenido gratuito que existe de gente que lo hace de buena onda (or for clout kjjjj).

Te prometo que de alguna manera u otra te vas a ver beneficiado por devolverle a la comunidad todo lo que te dió. Y por sobre todo, núnca sabés si tu conocimiento (que vos consideras mal escrito, feo, básico, estúpido, insertar cualquier adjetivo negativo que te venga a la mente) le va a servir a alguién más.


Y para que esto no sea un post que solamente escribí como rant mientas me tomaba una cerveza, les dejo este [repositorio](https://github.com/NicolasCastroGarcia/carousel) (que considero que al igual que este blog, está mal escrito, es feo, básico, estúpido, y también le inserto cualquiér adjetivo negativo que se me pueda ocurrir) con la esperanza de que a alguien le pueda servir, y aprender por lo menos algo. 


Avisame por twitter si crees que mi repositorio puede ser mejorado, o hacé directamente un pull request que va a ser recibido con muchas ganas de aprender, o si no te gusta y pensas que es mejor no desperdiciar el almacenamiento de github, podés mandarme insultos por twitter, al md, o arrobarme.


Para los que se tomaron el tiempo de leer esto, gracias, prometo que voy a leer su contenido si me lo hacen llegar.

Compartí tu conocimiento por mas estúpido que creas que sea, a alguien le va a servir. 

Saludos!
React withGraphQL: Optimistic Response - What & Why
Tags: react, graphql, api, frontend
Published: 2021-02-06 18:34:23

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ct191g70lxq20xm1ekc.png)

## The Problem
You start your new project with React & GraphQL. It's super cool & you tried to make it super-fast. But your backend is reaaaally slow and all these loaders are unbelievably annoying. You are a client-oriented developer and trying your best to solve this problem. Likely for you, as you used GraphQL, we can use the Optimistic UI approach.

> **Official definition:** *Optimistic UI* is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. Once the response is received from the server, the optimistic result is thrown away and replaced with the actual result.

I couldn't say better:)
So we only simulate that the backend sends us the response right away so from the user's perspective every response comes instantly.
<br/>
## How to use?
When we call a mutation we can also pass an additional `optimisticResponse` property and describe what we're going to retrieve from it. That one we would eventually receive from the backend. Here's an example:
```jsx
 updateComment({  
	  variables: { commentId, commentContent },
	  optimisticResponse: {  
		  __typename: 'Mutation',  
		  updateComment: {  
		  id: commentId,  
			  __typename: 'Comment',  
			  content: commentContent,  
		  },  
	  },  
})
```

Basically, when you call this mutation GraphQL will update the cache for this comment with new data instantly.

---------

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

--------- 

Also, you can update the cache manually when data will arrive from the backend but it's a totally new story. For now, check this feature out and write in the comments what do you think about it.

For more details go to the official [GraphQL documentation](https://www.apollographql.com/docs/react/performance/optimistic-ui/)
Redux Hooks
Published: 2021-02-06 17:53:48

Recently I decided I would take my first React-Redux project and refactor it to see how far I have progressed since being in Flatiron School. When I opened up my code it was a bit overwhelming to see how disorganized it felt considering how happy I was with it when I originally wrote it. I was using class components and passing my Redux store state around with the connect wrapper. I figured I would take a shot at refactoring to use hooks everywhere instead. This required transitioning all of my class components into functional components. This was no small task but I was eventually able to complete it. 

Funnily enough I actually stored all of my reducers inside of my index.js file, don't ask me why. So I also went through the process of reorganizing my file structure so that it would be easier to come back to this project and not feel so lost. 

Then I moved on to learning about the different hooks Redux uses. The two I will be focusing on are useSelector and useDispatch. It might just be a sign of the progress I have made since first learning Redux, but I found using hooks was less complicated then when I originally learned how to use the connect wrapper. So here we go, first up is useSelector, this is the equivalent of mapStateToProps. Its very simple to use and it will give you access to your store state. It looks like this

```
const thingIWant = useSelector( state => state.thePieceOfStateIWant)
```

The useSelector function is very smart in that whenever a new dispatch is sent it won't automatically re-render. It will check to see if the value has changed and re-render only if the value has changed. 

The other hook I wanted to mention was useDispatch. It is equivalent to mapDispatchToProps. This hook will return a reference to the dispatch function. It allows you to send a dispatch to the store and update your state there based on the action.type. Its fairly simple to put into action as well.

```
const dispatch = useDispatch()
```
Then you can use this variable to send dispatches to your store like so:
```
dispatch({ type: "WHATEVERTYPE", payload: infoToUpdate})
```

Thats all there is to it, you can set up your reducers the same way you normally would using connect but now you can type out less code in order to gain access to and update your store. I'm really enjoying the process of updating my project and seeing how far I have come. I am still working through quite a lot of things and can't wait to see where the project ends up. Have a great day!
Headphone Handler // React.js & Redux.js Capstone Project
Tags: react, redux, flatiron, javascript
Published: 2021-02-06 17:50:38

Okay, so this project was most definitely one of those most wild rides in this journey.  And it also happens to be the FINAL project in the Flatiron School curriculum.  Fingers crossed the assessment goes well! :) 

Here's a recollection of the events throughout this project week.
.
.
.
##Day 1
Alrighty, it's a new day, new project, but not just ANY project the FINAL project (a.k.a CAPSTONE PROJECT).  It's a bit nostalgic but also nerve racking at how daunting this specific project is because of how much there is to do but in such a short amount of time.  (Relatively speaking in comparison to the first module project where the ENTIRE project was literally 4 files . . .)  

Was able to set up the backend pretty okay with not too many things going wrong.  Put in my associations, serializers, scaffolded the appropriate models (2 of them), bing bang boom, BACKEND. 

Also was able to use `create-react-app` in order to also initialize the frontend into existence.  But that's all I did for that mostly. 

THEN, I connected this project with the master directory of `headphone_handler` to my [GitHub](http://github.com/doosemavis/headphone_handler) as well.  So far so good. 
.
.
.
##Day 2
New day, new progress b/c any amount of progress is progress. 

Following a long with some videos to make sure I'm importing and using the correct information and implementing the correct technical aspects by keeping an eye on the Flatiron Project Checklist.

```
ES6 Code ✅
Use create-react-app generator ✅
Your app should have 1 HTML page to render application ✅
Redux middleware to respond to state changes ✅
Rails API handles data persistence ✅
Use fetch() for GET and POST data from API ✅
```
.
.
.
##Day 3
This is where the uncertainty and imposter syndrome started to kick in a bit unfortunately. lol, but I kept going!!  

Put in quite a bit of JS and React.js code for Headphones and Brands.  Decided to take out the Category aspect that would filter both given the time and network errors I had be having. (Hoping to continue to build out this application for my portfolio in the future!)
.
.
.
##Day 4
Both day 3 & 4 I ended up being stuck on the same section for quite awhile so I tried to take some more mental breaks to help with keeping a clear mind!  (DIDN'T WORK BUT THAT'S OKAY!!) 
.
.
.
##Day 5
As for the last day, Friday, was able to FINALLY fix my reducer and action problems I've been having in order to render any submitted information from my form to the appropriate headphone list which then automatically knows it's association to their Brand!  NIFTY!
```
ES6 Code ✅
Use create-react-app generator ✅
Your app should have 1 HTML page to render application ✅
Follow repo to setup the generator: create-react-app ✅
Redux middleware to respond to state changes ✅
Rails API handles data persistence ✅
Use fetch() for GET and POST data from API ✅
Client-side handles display of data w/ minor data manipulation ✅
There should be 3 routes ✅
There should be 5 stateless components ✅
Make use of async actions and react-thunk middleware ✅
```
Algebraic Data Type(ADT) with TypeScript
Tags: typescript, functional, ocaml, reason
Published: 2021-02-06 17:15:39

![ADT in OCaml](https://dev-to-uploads.s3.amazonaws.com/i/3cxrfxjoiefi94w2ojxe.jpg)

Functional programming languages are awesome. They have a lot of brilliant design decisions, the most mainstream ones are **[Algebraic Data Type (ADT)](https://en.wikipedia.org/wiki/Algebraic_data_type)** and pattern matching.

Simple ReasonML example:
```reasonml
/* Algebraic Data Type */
type coolString = 
  | Uppercase(string)
  | Concat(string, string)
  | Empty;

/* pattern matching */
let string_of_cool_string = fun
  | Uppercase(str) => String.uppercase_ascii(str)
  | Concat(str1, str2) => str1 ++ str2
  | Empty => ""
```
You can think of ADT as enum with additional data/payload and pattern matching as switch by the payloadfull enums.

Naive TypeScript implementation would be:
```typescript
type UpperCase = {
  key: 'UPPERCASE',
  value: string,
}

type Concat = {
  key: 'CONCAT',
  value: [string, string],
}

type Empty = {
  key: 'EMPTY',
}

const makeUpperCase = (value: string): UpperCase => ({
  key: 'UPPERCASE',
  value,
});

const makeConcat = (value: [string, string]): Concat => ({
  key: 'CONCAT',
  value,
});

const makeEmpty = (value: string): Empty => ({
  key: 'EMPTY',
});

type CoolString = UpperCase | Concat | Empty;

const match = (action: CoolString): string => {
  switch (action.key) {
    case 'UPPERCASE':
      return action.value.toUpperCase();
    case 'CONCAT':
      return action.value.join('');
    case 'EMPTY':
      return '';
  }
}
```

As you can see, the TypeScript version is very verbose. The goal of this article is to present one of the possible solutions for lowering the number of lines of code while keeping everything simple and having all static type features.

First, we will write simple type that will represent ADT option and function to create options
```typescript
type Option<Key extends string, Value = undefined> = {
  key: Key,
  value: Value,
};

const makeOption = <Key extends string, Value = undefined>(
  key: Key,
) => (
  value: Value,
): Option<Key, Value> => ({
  key,
  value,
});
```

Having code above usage will be:
```typescript
const Upper = makeOption<'upper', string>('upper')
const Concat = makeOption<'concat', [string, string]>('concat');
const Empty = makeOption<'empty'>('empty');

type CoolString
  = ReturnType<typeof Upper>
  | ReturnType<typeof Concat>
  | ReturnType<typeof Empty>

const match = (coolString: CoolString): string => {
  switch (coolString.key) {
    case 'upper':
      return coolString.value.toUpperCase();
    case 'concat':
      return coolString.value.join('');
    case 'empty':
      return '';
  }
}
```

This way we have extracted boilerplate, so ADT pattern became much cleaner.