teleren/devto huggingface dataset:
If Classic American Authors Were Software Engineers
Tags: books, programming, culture, coding
Published: 2020-04-30 05:00:46

---
title: If Classic American Authors Were Software Engineers
published: true
date: 2020-04-20 21:27:13 UTC
tags: books,programming,culture,coding
canonical_url: https://medium.com/swlh/if-classic-american-authors-were-software-engineers-2c9c4fa25cbd
---

[![](https://cdn-images-1.medium.com/max/2600/1*IDtVmOV2-zlqe7R0joSzQg.jpeg)](https://medium.com/swlh/if-classic-american-authors-were-software-engineers-2c9c4fa25cbd?source=rss-5676ca6163ee------2)

Why Steinbeck would write in machine code, while Capote would be into Java.

[Continue reading on The Startup »](https://medium.com/swlh/if-classic-american-authors-were-software-engineers-2c9c4fa25cbd?source=rss-5676ca6163ee------2)
From Sketch to Vue.js components
Tags: vue, javascript, productivity, design
Published: 2020-04-20 21:03:54

{% twitter 1252215904714264576 %}

Following the previous post,  

> If you haven't read it yet, I recommend you check it out before you start [From Sketch to TailwindCSS](www.dawntraoz.com/blog/from-sketch-to-tailwindcss)

we are going to see how we can approach the design we have in a Vue.js app.

### WHY TO DO IT WITH VUE.JS

[VUE](https://vuejs.org/) is a progressive JavaScript  framework which you can use to build from web interfaces to single page applications.

The **folders and files structure** that we are going to see below can be applied to any type of project, going from *Blade templates* in *Laravel* to a single page app in *Vue.js*.

I have chosen **Vue.js** for this example because we have multiple online platforms that provide us with a development environment already configured, where we can create our application at no cost in real time. 

> I'm talking about [Codesandbox](https://codesandbox.io/), which will be where I make the structure I will explain now.

### IDENTIFY THE DESIGN'S COMPONENTS

Given the same design of the previous post we will continue defining its structure.

![Design example](//a.storyblok.com/f/79165/2000x1600/697f207b42/modern-menswear-fashion-photo-collage.png)

> Designed by my friend [Rocío Pascual](https://www.linkedin.com/in/roc%C3%ADo-pascual-rodr%C3%ADguez-88bb00109/), Graphic Designer in process.

In every design we will have **elements** that are **repeated** on one or several pages, what we aim in this post is to **identify** and **classify** them according to their use in the application.

First, we will identify the *layout* template, the basis for any of the pages of the application, we will name the view as **master** being **layout** the folder.

Then, we will make a **pages** folder which will contain the views that are already designed. For this example we have a list of trendy restaurants, 
that we will name **restaurants**, and a detail page with dishes, named **restaurant**.

Once we have defined the layout and the necessary pages, we can clearly distinguish between two types of **elements**:

-  **Partial**

   The one which is displayed on every page in the *same position* with the *same content*, part of the main layout.

-  **Component**

   The one which appears in *different parts* of the design with *dynamic content*. For example, in this case we can see clearly one: the card repeated below *'More recommendations'* or *'Best dishes'* headings, this component will be named as **post**.

Let's see a version of how our folder structure could be:

![Structure folders](//a.storyblok.com/f/79165/1024x768/943029a359/structure.png)

### MAKE IT REAL

In the following Codesandbox you can see how I have used the structure described above to carry out the project.

TailwindCSS has been used for styles and svgs for iconography as I explain in my post about [use svg](/blog/use-svg)

> Still the dynamic configuration of TailwindCSS in Codesandbox does not have good support, so I have replaced the variables by those of the default theme

{% codesandbox r807f %}
WhatsApp messages as a Service
Tags: twiliohackathon
Published: 2020-04-20 21:02:51

This is my idea for the ongoing [Twilio Hackathon](https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8). A web service that lets you send WhatsApp messages to yourself programmatically, serving as a notification system.

## Some Background

This idea struck me when I was setting up a seedbox. The seedbox, which is hosted on a Google Cloud Instance is used to download torrents (Linux ISOs, of course :P) and then upload them to a folder in my Google Drive. The thing was I had no way of knowing that if the downloaded file has been uploaded to the drive or not other than to refresh the Google Drive website regularly or tailing the logs of my seedbox.

I needed some kind of notification service, which can notify me that the upload is complete. The first thing that came to my mind was emails. I can shoot myself an email using some email provider like Gmail which lets me use the service over SMTP. But emails felt clunky to me and it also came with the risk of the email getting buried in spam. The ideal solution for me was WhatsApp! It would be so nice to send myself a WhatsApp message rather than an email for this kind of notifications. And Twilio's WhatsApp messaging API makes this solution very approachable.

## Use Case

My use case is simple. I needed a service that I can use to send myself notifications on WhatsApp without much fuss.

## Idea

I plan to create a web-service, on which a user can register himself/herself and add some WhatsApp numbers to their account. Then they can use the API to programmatically send messages to previously registered mobile numbers. To make this easier a command-line client would be great. I plan on implementing something like this:

```bash
$ wnotify "File Uploaded"
Message sent to the default number.
```

The user can also create reminders using the WebUI or by sending a message through WhatsApp, which then will be delivered to the user when scheduled.

## Some Implementation Details

I started learning Golang recently and I am thinking of using it in this project. For the WebUI, I am going to use ReactJS as I am quite familiar with it.

I would like the message sending logic to be modular. So in the future, I can easily expand it to services other than WhatsApp, like Slack, Telegram, Mattermost, etc.

This service can also be leveraged for reminders etc. Maybe a plugin system makes sense here.

I would love to hear your opinions about it so please let me know what you think about it. :)

*PS: This is my first post on Dev, so yay!*
The Basics of Redux
Tags: redux, react, javascript
Published: 2020-04-20 20:57:35

#### What is Redux?
Redux is a JavaScript library that focuses on managing application state. It’s commonly used in tandem with Angular or React to compose user interfaces. The core value of Redux is to ensure that applications behave predictably and consistently. 

Imagine you open a music application and navigate to your favorite playlist. The application fetches the songs, displaying your chosen playlist. You then launch your notes application in order to cross reference a few song titles. When you return to your music app, you will find the app in the same state that you left it in - In this case, with your favorite playlist loaded. Maintaining this state requires help from both the user interface as well as the API. 

#### How does Redux work?
Redux acts as a state container for data. Think of this like any other type of storage container. You organize your items into a storage bin in the manner you find most effective. All of your items are now conveniently located in one place. You can easily check the bin to determine what items are currently stored there. Additionally, you can just as easily perform a small action to change out items within the bin. 

Redux operates in the same manner, with the “items” that are stored being data instead. When using Redux, the state of an application’s data is stored in one JavaScript object (the metaphorical “bin”), called the Redux ***store***. While the state is read-only, you can simply define an **action** that will perform a state change. These changes are executed by a function, called a **reducer**, which takes in the current state and the described action, and returns the new state.

#### Why use Redux?
Redux follows the highly performant one-way data flow of React. Whereas passing props can become convoluted and error-prone within a large React application, Redux offers an efficient pattern for storing data, making it much more straightforward to manage and maintain the state of an application. With a little practice, the process of call (dispatching changes with **actions**) and response (processing those changes through **reducers**) is easy to implement and very effective. 

#### Wrap Up
Redux is simply a state management tool for JavaScript applications. It’s intended to be a reliable state container that helps devise a consistent user interface. Though not always necessary for building smaller applications, Redux offers three key benefits that are valuable regardless of application size. 

First, the store acts as a single source of truth, providing a predictable outcome and resulting in fewer bugs when syncing state. Second, due to the rigid process of actions, reducers, and the store, it’s easier to structure and maintain clean code. Finally, with a pattern consisting of small functions that have a single responsibility and are independent, code is easier to debug and test.
Day One/Chapter One
Tags: vue, Vuetify, womenintech, WomenWhoVuetify
Published: 2020-04-20 20:55:58

Today is day one of my coding journey. I'll probably try to post updates on my progress weekly. If you didn't read my previous blog post, I am embarking on a journey to learn how to code by following John Leider's book Learn Vuetify (estimated release Qtr 1, 2021). 

I started by downloading VS Code — Visual Studio Code . VS Code is where the coding adventures take place. I just went to [code.visualstudio.com](http://code.visualstudio.com/) to download it. John also references [Vetur](https://vuejs.github.io/vetur/) and [ESLint](https://github.com/Microsoft/vscode-eslint) as extensions to VS Code to download. He says they help the users coding experience.

In Chapter 1, he takes the reader through building a new Vuetify project using Vue CLI. I will learn how to install and configure editor extensions, keyboard shortcuts (I love keyboard shortcuts!), and how to create reusable code snippets. Seems easy enough…:famous last words: 😬

A list of other programs I installed before starting anything…

[Git](https://git-scm.com/downloads)

[Node](https://nodejs.org/en/)

[Yarn](https://classic.yarnpkg.com/en/docs/install#windows-stable)

Now that everything is installed (I hope…) we can move on…

I opened VS Code and went to the *Integrated Terminal* from the *Command Palette* (Win/Linux: Ctrl+Shift+P; Mac: Cmd+Shift+P)

From there John had to help me switch my terminal to GitBash because he said it was much better.

![https://cdn-images-1.medium.com/max/800/1*OWeA-9oYV2ZkZfeeDKoJbA.png](https://cdn-images-1.medium.com/max/800/1*OWeA-9oYV2ZkZfeeDKoJbA.png)

I followed the prompts to install VueCLI plugins under Getting Started on [cli.vuejs.org](https://cli.vuejs.org/). I got this WARN message below about setting up a git account which John said he will help me do later. So, I’m skipping that for now.

![https://cdn-images-1.medium.com/max/800/1*X4G6Pp9hKThzqKGWnFHRig.png](https://cdn-images-1.medium.com/max/800/1*X4G6Pp9hKThzqKGWnFHRig.png)

I have now moved from Command Prompt to GitBash below (which I just learned is similar to command prompt but prettier) His book had these $-signs in the prompts I was trying to type in and I kept getting errors. I got frustrated and he told me that its just in GitBash and I don’t have to type it in at all. Ugh! So… first thing to make me feel completely clueless 😒

But here we go… we’re learning and making progress!

![https://cdn-images-1.medium.com/max/800/1*W6yddJqoSeFo7TIL1ik4Pg.png](https://cdn-images-1.medium.com/max/800/1*W6yddJqoSeFo7TIL1ik4Pg.png)

I think that's enough for today. I imagine the first few days will just be getting set up with installations, extensions, plug-ins, preferences, etc. Those are important for sure which is why it's Chapter ONE! So, stick with me guys. I'm taking baby steps here. If you're following my journey and you're new to coding too, then let's keep going and dive on in! :D
Should you learn C/C++?
Tags: career, programming, codenewbie, coding
Published: 2020-04-20 20:53:02

Let's get this straight on. Me personally I think you should learn C/C++ because they are a foundation of every computer out there and mastering them can really benefit you. So, you have decided to learn one of these languages. But which one? There isn't a right answer. It's just the matter if you are going to dedicate your time to learning one of these languages. But I will recommend you to learn C first because it's much easier to switch from C to C++ than from C++ to C.

If you are struggling to make a decision, I'll tell you to just GO AHEAD AND LEARN C/C++!
The Dangerous Loop
Tags: firstyearincode, codenewbie, beginners
Published: 2020-04-20 20:42:03

As Software Engineers we all know what loops are. This post is about a special kind of loop - The Learning Loop. Almost every new Software Engineer trying to learn programming will come across this phase in his or her programming pathway. Yes this loop is dangerous, please try not to get stuck in it.

Yes we all love to learn new stuff in tech, Yeah I agree it's cool, but binging online courses like Netflix series is not the way to do it. It's not going to be beneficial to you.

Once you have learned a programming language. You are no longer a newbie in some sense. You can and you should start building something as soon as possible. Maybe a simple application to calculate something, or just use your skills to light up some LEDs using an arduino.

You should take your time and build something with the knowledge you gained before moving on to a new technology. Find your interests and please stay focused.

Now that a lot of platforms are offering their programming courses for free to help people during this pandemic, I've seen a lot people taking courses over and over. There are even folks whose hobby are completing online courses. At the end of the day they learn something a thing or two about those technologies but they have no practical knowledge in what they've learnt. they haven't built anything in it. Never be like them.

Learn something, build something. Learn and Build that should be your slogan as an entry level Software Engineer.
#WebDev on web.dev - OGP doesn't pickup double quote #2627
Tags: webdev, javascript, opensource, frontend
Published: 2020-04-20 20:41:23

{% youtube CuK5SrZdggg %}

Hey y'all, my name is Michael and I'm one of the engineers who works on Google's [web.dev](https://web.dev/) site.

On April 20th at 2 PM PST I'll be doing some coding of the site live on YouTube and would love for you to join in. If you're interested in how stuff get's done on the site, have any web related questions, or just want to chat then you should join!

[(Join the chat here)](https://youtu.be/CuK5SrZdggg)
RSS for Hackers
Tags: node, rss, javascript, webdev
Published: 2020-04-20 20:35:05

We @pipedream launched [RSS for Hackers](https://rss.pipedream.com)!

- Process RSS feeds programmatically, for free
- Run any Node.js code on new items
- Pre-built functions can send data to destinations
- Access events in your app using SSE or REST API

Try it out [https://rss.pipedream.com](https://rss.pipedream.com)
Migrando Ambiente Dev. Manjaro x Ubuntu 20.04
Tags: ubuntu, linux, webdev
Published: 2020-04-20 20:08:47

<p>Aqui gostaria de expor minha experiência em montar um ambiente para desenvolvimento web utilizando o novo ubuntu 20.04.
Nunca fui muito adepto de distribuições Debian-based mas quis respirar ares novos.</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9rf5dyx5gw442an03jcb.png)
Como bom Saltador de distro e entusiasta de linux, estou utilizando a versão beta 20.04, porém até o momento não encontrei nenhum bug.

##Contras 
* Dependências - Sinceramente é até interessante você ter controle sobre o que é instalado no seu sistema mas... você ter que ficar lendo o terminal e baixando em separado cada depedência que seu programa precisa é um tanto quanto trabalhoso. O que por muitas vezes pode tornar a instalação de um aplicativo simples uma tarefa um tanto quanto trabalhosa.
* Repositórios - A Gnome software é uma apresentação muito interessante do catálogo mas também muito limitada aos "gostos" da canonical, no meu caso utilizo o Megasync como serviço de nuvem, não tem no repositório então sou obrigado a entrar no site do serviço baixar um pacote .deb e instalar via terminal e mesmo assim arriscado a faltar uma dependência que deve ser instalada.
* Gnome bloqueado - Ok que a canonical quer ter a identidade visual deles no sistema, mas limitar as customizações do usuário? você não vem com os pacotes necessários para integração com Gnome Extensions para instalar novas extensões, tornando o processo um tanto quanto complicado.

## Prós 
* Drivers - Particularmente sempre tive problema com os componentes do meu setup, meu notebook tem placa hibrida e funciona perfeitamente com desempenho superior ao Manjaro e a instalação foi extremamente simples via interface gráfica, meu fone bluetooth também funcionando perfeitamente com drivers A2DP só quem usa fone bluetooth sabe o que é sofrer para fazer funcionar corretamente.
* Ferramentas de Desenvolvedor - Nesse quesito o ubunto já trás no repositório padrão praticamente todo tipo de editor de texto, IDE e ferramentas de gestão de banco como Mysql Workbench, DBeaver entre outros.
* Leveza - Com certeza essa minha experiência com Gnome 3.36 tem sido superior com o que foi no passado, muito por conta da contribuição da canonical no desenvolvimento e otimização do Gnome.   
* Comunidade - Indiscutivelmente o Ubuntu é a maior comunidade linux, então todo problema que você possa vir a ter, provavelmente você encontra a solução fazendo uma pesquisa rápida no google o que é uma gigantesca vantagem quando você precisar resolver rapidamente um problema sem precisar perder algumas horas lendo algum tipo de documentação.

<p>Estar migrando de uma distro Rowling Release para uma LTS tem sido uma experiência interessante, principalmente pelo fato de não precisar me preocupar a todo santo dia quando inicio meu sistema a rodar um comando no terminal para verificar se não há alguma atualização. </p>
<p>Então posso dizer que o principal atrativo para migrar para o Ubuntu tem sido a estabilidade, deixar de ter tanta preocupação com meu sistema e focar mais em produzir. </p>
Job Seach Week 9
Tags: makers
Published: 2020-04-20 20:21:23

I spent this week redoing the battle challenge from week 3 at Makers it was a lot of fun mainly due to the fact the challenge is very similar to pokemon and I spent a lot of my childhood playing pokemon.

Day 1

On Monday I was wrapping up some of the other projects I had been doing just cleaning up the readme's and having a look at my battle repository so I could get an idea of what had to be done and looking back at it it was quite messy. So I just made a plan on how I would deal with it.
 
Day 2

I got started on the repository on Tuesday it was nice to get back to a project with a front-end and to use capybara and Sinatra. I was glad to get straight into some of the more difficult challenges like removing the global variables with class variables which was easy to do as we learned in the week after the battle challenge in Makers 

Day 3

After I completed all the standard challenges I went back and did some of the additional challenges like making attacks do random damage and adding attacks that have additional effects like a poison effect which was fun and a little challenging.

Day 4

After adding attacks that added effects I knew I'd need a new class to keep track of these effects so I created a status class and added all the functionality for storing the status effects each player has.

Day 5
Finally, I decided to clean up the code making it DRY and readable. I also had to reorganise some of my feature tests because I previously had them all in the one file so I created a file for each [age and put the test for that page in them.

Summary

This week when well I'm very happy with getting the battle app done it was fun to do and to have made my own pokemon battle simulator quite surreal. I also got to see how far I've come since then which is reassuring and get some extra practice with my process.
Transforming Teaching with Teachingo - Update #4
Tags: twiliohackathon, javascript
Published: 2020-04-20 20:00:36

_This is an update on our #TwilioHackathon project progress - you can see the original post here: {% link https://dev.to/chloemcateer3/transforming-teaching-with-teachingo-4lc5 %}_

## Authentication

![Brooklyn Nine Nine, Gina's Face ID!]( https://media.giphy.com/media/5bgMxHIDzsayEyeTWg/giphy.gif)

Because the software is going to be used by schools it needs to be secure - for this we wanted to ensure that not just anyone can access it and join any lesson! We wanted to set up accounts for students and teachers to ensure that only the students that belong to that particular class can access it.

## Keeping passwords secure

Of course we didn't want to store the users password directly in the database, because if the passwords where stored in plain text, it would mean that if anyone, either an attacker or a developer carrying out maintenance on the database would be able to see exactly what people have set as their passwords and so the security of the system would be breached.

To overcome this we wanted some way of salting and hashing them. For this we decided to use [Bcrypt](https://www.npmjs.com/package/bcrypt) - due to some previous experience using it.

![Brooklyn Nine Nine, Terry's passwords!](https://media.giphy.com/media/cd58YHM3cZbNe6aq9X/giphy.gif)

As soon as a user creates an account, I use Bcrypt to salt & hash the password and then store the hashed version of the password in the database. Then once a user tries to log in we can use the Bcrypt `.compare()` function to compare the password the user entered with the hashed version from the database to authenticate them.

## Handling User Sessions

As an extra layer of security, to ensure that users have been authenticated to use the applications services, the project creates user session tokens when the user logs in. To facilitate this, we decided to utilise [JSON Web Tokens (JWT)](https://jwt.io/). Doing so ensures that no one can bypass login and access the services pages by changing the URL or hit the backend API directly.

Once a user successfully logs in, a session token is created for them and this token is sent with each request the user sends. Once the request is being handled, we do a check for two things - one, is the token valid and two, has the token expired. If these checks pass the request is carried out, however if it fails, a 401 error is thrown as the user is not authorised!