teleren/devto huggingface dataset:
What exactly is JSX?
Tags: flatiron, jsx, react, intro
Published: 2019-06-24 21:45:42

I just started learning React. Oddly, it took a while to wrap my head around JSX and where it fits in the programming terminology I've been studying over the past few weeks. 

JSX seems to be one of those things that experienced developers get, but can't explain struggle to explain to others. But for us newbies for whom everything in programming is completely new, I hope this short post will provide some clarity.

####The short version:
JSX is an XML-like syntax extension of JavaScript.

####In English:
JSX is essentially a way to write HTML code in your JavaScript file. This makes it easy to create React elements (or components

###Where that fits:
React is a JavaScript library for creating user interfaces quickly. React is built completely out of JavaScript code. It creates small sections of reusable code, called components. 

This lets you split the completed user interface into independent, reusable pieces, that are each saved in their own .js file. 

###What it looks like:
- Each .js file in your React app will have a render() method that returns <b>one</b> JSX element

```javascript
class randomComponent extends ReactComponent {

  render() {

    return (
      <div> </div>
    )
  }
export default randomComponent 
```

Meanwhile your App.js file will include something like this:

```javascript
class App extends React.Component {

   render(){ 

    return(
    <div className="App">
      <randomComponent></randomComponent>
    </div>
```
Fortunately FreeCodeCamp.org has a React great tutorial that covers the JSX syntax. [Check it out!](https://learn.freecodecamp.org/front-end-libraries/react)
PyTest assertions
Tags: pytest, python, unittesting
Published: 2019-06-24 21:25:39

---
title: PyTest assertions
published: true
description: 
tags: pytest, python, unit testing
---

You have probably seen how PyTest reports errors:

```python
def test_make_empty_file():
    name = "/tmp/empty_test"
    make_empty_file(name)
    with open(name, "r") as fp:
    > assert not fp.read()
    E assert not 'hello'
    E + where 'hello' = ()
    E      +  where = .read
```

But do you know how it does it? And have you ever seen the error like

```
assertion failed, but when it was re-run for printing intermediate values, it did not fail.
```

I do really recommend reading this article http://pybites.blogspot.com/2011/07/behind-scenes-of-pytests-new-assertion.html
How to set up Let's Encrypt
Tags: linux, ssl, https, certificate
Published: 2019-06-24 21:09:59

---
title: How to set up Let's Encrypt
published: true
description: We will talk about how to set up Let's Encrypt, what is required, what commands to run and what to do with the result. Lastly, we add renew command to keep the cert up to date.
tags: linux, ssl, https, certificate
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vqytsuggcee2v8uuiwla.jpg
---

{% youtube KB29LrDafW4 %}
Do you want a code review? I want to help! [NodeJS/Python]
Tags: discuss, help, beginners, opensource
Published: 2019-06-24 21:07:59

Hey! First, check this thread by @coreyja: https://dev.to/coreyja/do-you-want-a-code-review-i-want-to-help-40k3

I enjoy writing and reading code, and I'm all for open source and free software, so if you have any publicly available source code that you want someone to take a look, you have your guy!

You can reach me out either here or in my twitter (linked to my account). I have a good understanding of Python and NodeJS (and a few other languages, but I prefer to limit this to these at the moment).

Thanks for reading this!
Is Virtualization Technology Enabled On My PC?
Tags: beginners, linux
Published: 2019-06-24 21:07:01

---
title: Is Virtualization Technology Enabled On My PC?
published: true
tags: beginners, linux 
canonical_url: https://lautarolobo.xyz/blog/is-virtualization-enabled/
---

Interested in virtual machines? And you need to know if your PC can run them? Well, you are in the right place!

First the never-fails one:

```
lscpu
```

This command shows a lot of information about your PC, in fact, about your CPU architecture, displaying the number, model, family, and manufacturer ID of your CPU, together with the threads, cores, sockets, nodes and so on. You should search for the line that contains the Virtualization keyword (don’t worry, it’s easy to find).

Actually that’s it. That command _never_ fails. But here are another options, because some times the unpredictable happens.

With the next one, you’ll get ‘vmx’ (Intel) or ‘smv’ (AMD) on the output. Hopefully colored.

```
egrep "(svm|vmx)" /proc/cpuinfo
```

If it doesn’t shows those keywords with colors, don’t worry, I got you covered:

```
egrep --color -i "svm|vmx" /proc/cpuinfo
```

Here, the last one. If nothing worked out, don’t lose hope! This one will do the job.

Some OS come with the cpu-checker package pre-installed. It may be not your case, so here’s how you can installit, quick and easy with

```
sudo apt-get install cpu-checker
```

And then, let the magic happens:

```
sudo kvm-ok
```

If you have virtualization enabled, you’ll see something like

```
INFO: /dev/kvm exists
KVM acceleration can be used
```

Otherwise:

```
INFO: Your CPU does not support KVM extensions
KVM acceleration can NOT be used
```

* * *

Well, that’s it for now. Any thought write it down in the comments. See you next time!
Web Development
Published: 2019-06-24 20:22:32

---
title: Web Development
published: true
description: Process of My Learning
tags: 
---
In this post, I will discuss what I have learned so far. I've been taking a web development course through Udemy. In the course, I have brushed up on my HTML and CSS. I learned new tools for styling, such as Bootstrap, Flex, Grid, and using templates online to style a website. 

In this course, I have also brushed up on my JavaScript and learned how I can use that with React to make reusable components and a responsive website. Right now, I am on the final project where I am building a face recognition website. You input the image address, and it'll display the image and a box around any human faces contained in the image. 

The main reason I've been focusing on web development is because I will be helping on a project's front end. My team right now is considering exploring other avenues that are quicker to complete. I mentioned before we were considering making a career seeking website. However, after a lot of discussion, we've realized that it will take a lot of research, resources and time to complete, so we will think of other ideas we can pursue. 

I'm very excited about learning React. I see a lot of jobs online needing React experience, so if I use what I learn to do the final projects and make projects of my own, I'm sure I'll stand out as an applicant. I also hope to get back into learning app development. While what I'm learning will make it so that I don't have to dabble in HTML and CSS too much to make a website, I still prefer app development. 

In my next post, I hope to talk about the final projects I will have finished from the Udemy course. I also hope to talk about any advances in learning about app development.
Best backend course? 
Tags: ask, help, backend
Published: 2019-06-24 20:17:22

---
title: Best backend course? 
published: true
description: 
tags: ask, help, backend
---

Hey everyone!

I'm wondering if anyone has any good recommendations for a course to sharpen up my backend skills. Ideally in Node or Golang. I'm currently a front-end dev so I am pretty comfortable with front-end React stuff, however, I feel like my backend skills have started to slip. I've looked up some courses, but most I've found tend to be full-stack, with not a whole lot of emphasis on the backend. 

Any recommendations are welcome!

Thanks!
React Hooks: Initial State of Object Pitfall
Tags: react, hooks, object, initialstate
Published: 2019-06-24 20:08:08

---
title: React Hooks: Initial State of Object Pitfall
published: true
description: A pitfall when updating initial state of Object
tags: React, hooks, object, InitialState
---
Recently I ran into an issue with React Hooks where an API call was failing because the steps I needed to complete were encountering some unintended consequences.

I wanted an object to represent a series of steps that needed to be completed one-at-a-time.

![](https://thepracticaldev.s3.amazonaws.com/i/vflg0z6bjbok6yqv1lfc.png)

```javascript
const [stepComplete, setStepComplete] = useState({ 
     stepOne: false,
     stepTwo: false,
     stepThree: false,
});
```
The issue occurred with the way that I was setting the step. I needed to everything the same except for the step I was editing. I had to search around for some time and follow some trial-by-error until I figured out what to do. These were all fruitless approaches:

```javascript
//Nope
setStepComplete.stepOne(true),
//Doesn't update the whole object and so no re-render!
setStepComplete(stepOne: true),
//This deleted the rest of the Object!
setStepComplete(...setStepComplete, stepOne: true)
Eventually I thought to destructure the object through the use of an arrow function:

setStepComplete(state => ({...state, stepOne: true}));
```
And voila! My code was working perfectly!
DEV Conference?
Tags: fun, discuss, eventsinyourcity
Published: 2019-06-24 20:01:53

I was thinking about this today and I would love to meet my fellow #DEVcommunity members in person! Are there any plans for a DEV conference in NYC or elsewhere? I would be super excited to learn from you all irl (and maybe give a talk myself 😏).

> _Photo by Edwin Andrade on Unsplash_
Best DEV.to Posts for Beginners: Week of June 16, 2019
Tags: codenewbie, beginners, tutorial, bestofdev
Published: 2019-06-24 19:49:06

---
title: Best DEV.to Posts for Beginners: Week of June 16, 2019
published: true
escription: These are some of the best beginner posts of the week!
tags: #codenewbie, #beginner, #tutorial, #bestofdev
series: Best DEV.to Posts for Beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/x9acs27zebb19v5rf8ml.png
---

One of the reasons I've been so drawn to DEV.to over other platforms is the super encouraging and helpful community that gathers here. Initially I felt like it was going to be more a place where I sat back and watched, rather than write and contribute, but I've been so pleased to find not only helpful articles and tutorials that I understand, but also that input from new coders and devs is well-received.

I thought it would be nice to compile some of the best posts every week for those of us who still identify as #codenewbies!

[Google's Season of Docs](https://developers.google.com/season-of-docs/) writer application period is open right now, so open source is on my mind a lot. If you're into documentation, check out [Season of Docs](https://developers.google.com/season-of-docs/), and let the first two articles help you through entering the wild world of open source! 

{% link https://dev.to/healeycodes/your-first-open-source-pull-request-a-walkthrough-1omf %}

{% link https://dev.to/dbanty/easing-into-open-source-1fg9 %}

*stands on soapbox, clears throat* My name is Desi, and I love finding bugs. If you want to make my day a little less fun, follow this great flow on debugging to beat me to the punch.

{% link https://dev.to/designpuddle/the-art-of-debugging-2nla %}

If you're digging into Python, this roundup of resources including documentation, frameworks, libraries, and challenges compiles a lot of useful resources in one spot so you can practice and learn without ruining your flow to find the next step.

{% link https://dev.to/prahladyeri/a-collection-of-python-programming-resources-for-the-beginners-1i8k %}

What's a PWA? Why are they important? Learn the basics of progressive web apps with this series!

{% link https://dev.to/paco_ita/a-gentle-introduction-to-progressive-web-apps-step-1-24da %}

Glitch's weekly roundup is, as always, full of fun and useful apps. Remix your own and share them - I love seeing what people make there!

{% link https://dev.to/glitch/on-glitch-this-week-4fo6 %}

###What articles did I miss? Share them below!
Manual Webpack Configuration For React App - Basic Setup
Tags: webpack, react
Published: 2019-06-24 19:41:06

---
title: Manual Webpack Configuration For React App - Basic Setup
published: true
description: Usually create-react-app is enough to create new React applications, and if you need to have some specific settings - you can always eject and alter its webpack configuration. But sometimes you just need to set up a project from scratch. In this tutorial, you will learn how to setup Webpack with Babel and React support. We’ll also configure a dev server.
tags: webpack, react
---

Usually create-react-app is enough to create new React applications, and if you need to have some specific settings - you can always eject and alter its webpack configuration.

But sometimes you just need to set up a project from scratch. In this tutorial, you will learn how to setup Webpack with Babel and React support. We’ll also configure a dev server.

[Article on my website](https://maksimivanov.com/posts/basic-webpack-react-setup/)
Layer webhook issues?
Tags: api, stability, layer
Published: 2019-06-24 19:30:54

---
title: Layer webhook issues?
published: true
description: June 24th layer webhook issues
tags: api, stability, layer
---

Is anyone else experiencing issues with Layer webhooks? One of our customers syncs their Layer chat messages to Stream via webhooks. It seems that today (June 24th) all webhooks from the last 2 weeks were repeated. The end result is that they are sending push notifications/emails to their userbase repeatedly. So far Layer support has unfortunately been unresponsive on this issue. Not quite sure what's going on.
Vim's Secret Language
Tags: productivity, vscode, vim
Published: 2019-06-24 19:23:28

---
title: Vim's Secret Language
published: true
description: A short yet illuminating digression to reflect about Vim's essence and nature
tags: [productivity,vscode,vim]
canonical_url: https://www.barbarianmeetscoding.com/boost-your-coding-fu-with-vscode-and-vim/vims-secret-language/
cover_image: https://www.barbarianmeetscoding.com/images/boost-coding-fu-vscode-vim-banner.jpg
series: Boost Your Coding Fu With VSCode and Vim
---

> This is the chapter [Vim's Secret Language](https://www.barbarianmeetscoding.com/boost-your-coding-fu-with-vscode-and-vim/vims-secret-language/) to the book [Boosting Your Coding Fu with VSCode and Vim](https://www.barbarianmeetscoding.com/boost-your-coding-fu-with-vscode-and-vim).

As you may have noticed, all the Vim operators, counts and motions that you've learned make up a (programming) language of sorts. You can think of operators as functions and counts and motions as arguments, or using an even simpler analogy... **You can think of operators as verbs, counts as adjectives and motions as objects**.

**[The true magic of Vim is composition](https://medium.com/@mkozlows/why-atom-cant-replace-vim-433852f4b4d1)**. As you go building up this vocabulary of operators and motions you will find that you can combine them to your heart's content. Just like you would with the words of a spoken language.

So that, once you know all about the **`cl`**, **`caw`**, **`ciw`**, **`ct.`** of the world, and you go and learn how **`dl`** works, you'll not only be able to use **`dl`**. No. You'll instantly know that you can also combine the **`d`** operator with all the vocabulary of motions you already have at your disposal and **`daw`**, **`diw`**, **`dt.`** until the end of times.

![](https://www.barbarianmeetscoding.com/images/vim-secret-language-reuse.jpg)

**This is very cool**. 

When using Vim you'll feel you are **navigating a meta-universe of text editing**, it's like programming or controlling the very mechanism of editing and writing text. If you're familiar with git and how it feels to use the git command line to work with source control, you can think of Vim as the git of text editing. (Putting aside the fact that Vim predates git by almost 30 years). 

**With Vim, you'll look at a piece of text and you'll no longer see just words or text, you'll see the possibilities of an infinite number of operators and motions being applied at once[^mindblown].**

[^mindblown]: Kadoooosh! MiNDBloWn...
I would love feedback on my TypeScript skills and NPM Module.
Tags: typescript, express, discuss, showdev
Published: 2019-06-24 18:27:15

---
title: I would love feedback on my TypeScript skills and NPM Module.
published: true
description: I need feed back on my TypeSript and plugin for express-auto-route
tags: typescript, express, discuss, showdev
cover_image: http://api.gidgitz.com/uploads/daeb76e1-5ba3-4433-9de2-d2c4e29827cc.png
---
I wrote a post about my first public module plugin, but since then I've re-written most of it using TypeScript. It could definitely use some input as I'm only on week 3 of TypeScript.

{% link https://dev.to/dechamp/first-npm-package-express-autoroute-with-jsonschema-4cma %}

The NPM module I built is for express routing. It will let you create your routes via a config file, as well as setup your middleware, across all routes or per route.

[NPM module - @dechamp/express-auto-route](https://www.npmjs.com/package/@dechamp/express-auto-route)

It comes packaged with 2 optional middleware for both request and response. 

The middleware will enable options in the config to allow you to point to [Json Schema](https://json-schema.org/), which will validate your input to ensure it's qualified. 

It can be configured to work against query, body and params (express path :yourVar).

I plan on adding more TypeScript typings throughout the code, eventually doing away with `"noImplicitAny": false`.

Please feel free to import it to your project, play with it and let me know if it was easy to implement. How was the README.md file? Did it all make sense? 

I understand express is already very easy to use and this package won't have any value to some people, and that is ok. That is not what I'm asking to hear. I'm asking for tips on improve my TypeScript skills, how the package could be improved and if it made your life easier. 


[NPM module - @dechamp/express-auto-route](https://www.npmjs.com/package/@dechamp/express-auto-route)

Thank you so much!
Welcome to the Big Thread Club, Helen Anderson. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-06-24 17:35:34

Helen joins @philnash, @florinpop17 and @lauragift21 in the club as the fourth winner of this badge.

{% user helenanders26 %}

The Big Thread Badge is awarded to the person who creates a discussion thread on the site that sparks the most collective comment love (e.g. score as determined by total ❤️ reactions and adjacent ranking factors).

This was Helen's thread, posted just yesterday:

{% link https://dev.to/helenanders26/what-advice-would-you-give-your-20-year-old-self-33o1 %}

Details about this contest can be found in this post:

{% link https://dev.to/devteam/we-ll-be-adding-more-design-and-moderation-clarity-to-tags-like-help-discuss-etc-we-re-also-introducing-a-new-badge-483a %}

Entry is simple: Start a thread that is bound to spark a lot of comments. Ask the community to tell a certain kind of story and get lots of comments! Even if these threads aren't always answering _the deep questions_, they are often great for seeing what the broader community thinks of a topic and are usually a lot of fun!

DEV employees are not eligible for the Big Thread Badge. 🙂

## **One more thing...**

We are now giving away badges for top posts in certain popular tags (programming language tags mostly). We are giving these badges away on Thursday and the first few snuck out this past week. We're giving these ones out on Thursday to diversify the days we reward folks for doing great work.

Tag winners are based on points whereas top seven is based on traffic + reaction points + editorial.

Anyway, congrats to those who have decorated their profiles a bit more this week!

Happy coding!
Observables: cancelar inscrição (unsubscribe) é importante!
Tags: angular, javascript, rxjs
Published: 2019-06-24 17:06:29

##Não se esqueça de cancelar o subscribe dos Observables!

Quando nos inscrevemos em um Observable, continuamos escutando-o, mesmo depois de abandonarmos o componente que o criou. Isso ocorre mais comumente quando criamos nossos próprios Observables e não nos providos pelo Angular, porém, até para esses é uma boa prática sempre nos desinscrevermos dos Observables no **ngOnDestroy()**.

No exemplo deste post criei 2 links que navegarão entre dois componentes: com-observable e sem-observable. 

No componente **com-observable**, estou usando a função *interval* do rxjs, que cria um Observable que incrementa e emite um número num intervalo de tempo determinado. Me inscrevi neste Observable e os números emitidos serão exibidos no console do stackblitz(na barra inferior, expanda-o), no componente **sem-observable**, apenas exibo um texto informando onde estamos.

Perceba que quando navegamos para o componente **sem-observable**, valores continuam sendo exibidos no console! Se voltamos para o componente **com-observable**, temos 2 observables emitindo resultados para o console! E novos observables serão acumulados a medida que saímos e entramos novamente no componente **com-observable**!

**Podemos concluir que nossa aplicação pode emitir resultados inesperados, ficar muito lenta ou até mesmo quebrar por conta disso.** Por esse motivo é fundamental criar uma variável para armazenar a inscrição e desinscrever-se no **ngOnDestroy()**. 

Agora, no componente **com-observable**, experimente remover o código comentado do **ngOnDestroy()** e experimente novamente navegar entre os componentes e veja que as inscrições não se acumulam mais! 
*Obs: talvez seja necessário atualizar o navegador do stackblitz.*
{% stackblitz angular-observables-unsubscribe file=com-observable.component.ts %}
Caso não consiga ver o embedded, clique [aqui](https://stackblitz.com/edit/angular-observables-unsubscribe).
Familiar day #5
Published: 2019-06-24 17:00:40

For those who are new here, I'm building an open source tabletop roleplaying assistant. Right now, I'm working on the real time aspect of it as I need that for another project. 

From a purely MVP point of view, it's not strictly the best thing to work on, but as I need it for something else, I'm making an exception...

So far, we've created a server that is capable of streaming to multiple clients over server sent events(SSE). I didn't do much over the weekend because the weather was nice, and it's healthy to take breaks.

I haven't made a huge amount of progress today, but I'm just going to talk through the issue that I have. I need to spend some more time thinking about it.


### The issue
Go allows easy composition of HTTP handlers via [middleware](https://www.alexedwards.net/blog/making-and-using-middleware), and I want to ensure that the [library](https://github.com/NickBlow/gqlssehandlers) is reasonably pluggable. In an ideal world, the handlers should be completely separated from any authentication logic. 

However, SSE only allow you to do a GET requests, which means the only way of authentication has to be via a cookie, or a query string. The subscription endpoint also needs to know which client is actually asking for that subscription, and the streaming handler needs to know which client to send the data to. 

For the streaming handler, there's a few solutions, including a short lived token that gets generated on a handshake endpoint as a signed session cookie.

For the subscription handler, it's easy enough to create some authentication, but the userID (or equivalent) does need to be passed in to the subscription adapter. 

What I'm leaning towards right now is a configurable authentication function that's passed into each handler, but that's another layer of configuration on top of the library.

I'll have a think about it and see if I get any closer tomorrow.