teleren/devto huggingface dataset:
A little about my literary passion
Tags: reading, transformation
Published: 2021-06-29 02:10:05

I am currently 25 years old, and from a very young age I have enjoyed reading.
But this passion only became more fervent after I was 20.

For a long time I read the wrong way, I wanted to read fast so I could finish quickly and acquire more knowledge quickly.

But it doesn't work like that, when you read, it is a dialogue between you and the author and this needs calm.

When I was younger I couldn't concentrate to read, so I resorted to dynamic reading 'techniques' and the like. But they never worked for me.

So I would pass my eyes over the books and read, but due to my little concentration nothing was stored and worse, I got very frustrated, I kept looking for some magic technique, this doesn't exist.

Well then how did I become a 'real' reader, it's a pretty simple thing really. First quiet, as I said before it's a conversation between you and the reader, I read at the speed I talk a little slower, in fact while imagining the story it makes you occupy your mind with just the story you are reading.

This causes a miracle in your mind, when you start reading and the story just sticks in your brain that is amazing, in the first book or two it may feel bored, but with time this is replaced by a feeling of satisfaction for what you are reading.

Some people will think this is too slow, I need a technique for yesterday, first this does not exist, second the speed and the quantity of reading only increase due to the frequency. I hope you enjoy this advice!
Flatiron Sinatra Project
Published: 2021-06-28 18:12:02

Here we are at project #2 and I can hardly contain my excitement for finally learning how to build a website! For my project I made a web app that will allow users to create lists where they can store movie titles. The app will allow them to create, read, update, and delete (C.R.U.D.) items they add to their user profile within the app. At first this project was hard to comprehend but in the end it all started making sense. Shoutout to the former Flatiron student that made the Corneal gem. You saved me a headache.

After running the Corneal gem and setting the structure for my app I started on my migration folder by creating my tables for users, lists, and movies.

Next would be the models. Each user would have their lists and each list would have it's movies. This would require me to give the users and lists models a has_many relation. Movies and lists would go on to have a belongs_to relation. While adding the realtions I also added validations that would check to see if user input is valid.

When I finished the models I moved on to the controllers. There is the application controller that inherits from Sinatra and a users and lists controller that inherit from the application controller. The user and lists controller are made for the purpose of creating CRUD actions while the application controller is used for giving access to all of the methods like GET and POST.

Once the controllers were finished I started on the routes for each page. 

Create: Done through a GET route and stores the information with a POST route.

Read: Done by adding another GET route which I could use to list all movie lists that belong to a specific user. This is possible because of the activerecord methods has_many and belongs_to that were used in the lit and user models.

Update: Done by using a GET route and adding logic to find the list by it's ID then using extended ruby to add new changes to the list name.

Delete: Delete is done by simply finding the object that you are searching for and using the destroy method from activerecord.

After my routes were done I started on my views to lay out the pages to communicate what options were available to the user. Sinatra uses ERB (extended ruby) which allows us to write html as if it were an html file. Inside of the erb files is where I wrote the form tags that contain code that would would send information to the databases I created back when I made my tables.

Post method: Allowed me to save info to a table within the database.

Patch method: Allowed me to update information within a table.

Since CSS wasn't listed as a requirement I simply left everything the way it was when I used the Corneal gem. This includes the HTML that was included as well.
How to create a new React app from scratch
Tags: beginners, react, github
Published: 2021-06-29 02:03:12

*Note: I have been battle-testing this and reading similar blog posts about how to accomplish the same thing. If you have feedback, I want to hear it! Please comment if you disagree with anything or have a better way.*

Since I spend a lot more of my time working on existing apps, I ~~often~~ always forget how to properly create a React app from scratch that is (1) Properly tied to a git repository, and (2) has a proper `.gitignore` file. So, I'm kinda making this post for myself, but since you somehow landed on this post, I bet it will help you too!

1. Decide what you're gonna call it. It doesn't matter that much because the you can call the resulting webapp something totally different later. For this post, let's call our app `my-foo` (no spaces are allowed, thus the hyphen).
1. In VSCode, from the top menu, select File > New Window. Once the new window opens, select Terminal > New Terminal from the top menu or just type `^~`. In the resulting terminal window, type `npx create-react-app my-foo`. 
`npx` stands for Node Package Executer. We use `npx` instead of `npm` (Node Package Manager) because `npm` requires you to already have `npm` installed, which may not be the case.
4. Once it's done creating the react app you just told it to create, change directories into the new `my-foo` folder by typing `cd my-foo`. 
5. Now that you're in your new directory, it's time to initialize your remote git repository. 
2. Go to your github page, which should be something like `github.com/yourname` (mine is `github.com/mathlete01`), click on the Repositories like at the top, click the green `new` button and create a new repo(sitory) called `my-foo`. LEAVE ALL THE BOXES UNCHECKED.

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

Yay! Now you have a repo for `my-foo`. 
1. On the next screen, it will show three different options. We want the first one, pictured below. Github makes it easy by providing all the commands you need. They make it even easier by providing a button that will copy all those commands to your clipboard. Click that button, then return to your terminal window and paste. Voila!

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

Now you have created a brand-new react app with a both a `.gitignore` and a `README` file that were created by the `create-react-app` command. 

Now go build something great!
Dark Mode is breaking your branding—easy fix!
Tags: webdev, images
Published: 2021-06-29 01:59:47

As more sites and apps support dark mode, I've seen tons of logos and profile avatars saved as transparent PNGs and SVGs begin to break. The fix is simple, though: make sure that your art has a border in a contrasting color. If your art is all black (the most common situation) or otherwise mostly dark, a thin white border will be invisible on a light background, but will set off your art nicely on a dark mode background. Similarly, if your art contains a lot of light color, a dark border will prevent it from washing out on light backgrounds.

Below is my example for both cases. Notice how I add a 10-pixel white border on the first logo to suit the art, and a 1-pixel border *and* a drop-shadow to the second logo to keep it subtle since the art is more complex:
![Demo of logos with transparency shown over backgrounds of their same color, compared to the same transparent logos using a contrasting border.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtp39rvy6eoatyprrp6k.jpg)

That's literally all I have to say! I've seen this a lot in the wild and it's apparent it bears to be mentioned. I hope you didn't need the help, but you're welcome if it did ;)
My first projects with React. :)
Tags: react, javascript
Published: 2021-06-28 18:09:28

A few months ago I started to learn React but suddently I feel boring so I start to develop 2 projects that I knew that I'll be excited to do.
First I made a simple Weather App just to know if I really understand the basic of the library.
When I finished I started with the project using the Spotify API which I have lot of fun, in one version I was trying to create a playlist with the user's top tracks so when I fetch the data in useEffect and badly introduce a dependencie, then the program start the create a lot of playlists and the next scenario was me deleting a lot of playlist. Haha
I wanted to add another things but seeing the documentation I noticed that Spotify have to give you a permission to access different data from the user. Sad New. :(

I think that the only way to improve our own skills is with feedback so, if someone could give some I'll be always gratefull

Here are my projects:
https://weather-joss.netlify.app/


https://jossify-joss.web.app/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj9q1slwe3hr8kdjytca.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkbt6xssxpokde5eexcj.png)

And this are my repositories:
https://github.com/Josafath/Weather-React
https://github.com/Josafath/Spotify-React-App

Sometimes many people (including me) think that in order to be able to create projects we have to read a lot or watch a lot videos but, that's not completely true.

I apologize for my English.
Programming Quantum bookclub
Tags: quantumcomputing
Published: 2021-06-29 01:32:17

[Jeremy Clark](https://twitter.com/jeremybytes) and I have been running a weekly bookclub on quantum computing.  We meet Mondays at 5pm CST and discuss a chapter a week from the O'Reilly ['Programming Quantum Computers'](https://www.oreilly.com/library/view/programming-quantum-computers/9781492039679/) book (shown below)

![Programming Quantum Computers book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6zqqazw7wumfyu0iw0u.png)

## How the Bookclub works

We meet via Zoom for ~1 hour to discuss some or all of the code and examples in each chapter.  We record and post our weekly meetings to a YouTube [playlist](https://www.youtube.com/playlist?list=PLIrLpelK7F7-pGGMKph7dHuJWwEswnXOc).  We also have a Slack to discuss and share more information.

DM Jeremy to join in.

Join us!
How to Add Borders to a Widget In Flutter ?
Published: 2021-06-29 01:20:50

Add a border to a widget is very easy in Flutter. There Are Several Methods to add borders to a widget in a flutter. Here I am come with all possible Methods to add borders to your Widget. So let’s Start this tutorial without wasting your time.

There are Several Methods to Add Borders to a Widget In Flutter. Here I am Explain As Many as possible methods.

1. Adding a border to a Container.
2. Adding a border to a TextField.
3. Border around Image in Flutter

#Adding a border to a Container.
Let’s Suppose we want to make a square with blue borders then all we need to do is Just Use Container and Container has decoration Property that contains BoxDecoration and we will use border Property. Let’s do it together.

First Of all, We are Going to make One Container.
Then just use decoration as BoxDecoration.
Then Use border and give Border.all to the Container.
You can also use borderRadius to give shape to the border.
Here Is My Full code.

###Corner Border Radius to Widget in Flutter

```
    Container(
          height: 170,
          width: 170,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.green,
              width: 3,
            ),
            borderRadius: BorderRadius.circular(15.0),
          ),
          child: Center(
            child: Text(
              'FlutterCorner.com',
              style: TextStyle(
                color: Colors.green,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )
```
Here Is My Corner Border Radius to Widget in Flutter‘s Output.

![How to add borders to a widget in Flutter
](https://fluttercorner.com/wp-content/uploads/2021/05/Screenshot_1620404842-498x1024.png)

Check Out Other Methods to add border to widget at our website at <a href="https://fluttercorner.com/how-to-add-borders-to-a-widget-in-flutter/">Here</a>

#2. Adding a border to a TextField.
#3. Border to Image in Flutter.

Here Is In Detailed Tutorial With Source Code. <a href="https://fluttercorner.com/how-to-add-borders-to-a-widget-in-flutter/">How to Add Borders to a Widget In Flutter ?</a>
My second website
Published: 2021-06-29 01:09:49

Honestly I really love working with react. My project turned out to be almost everything I would have hoped it to be. I only wish netlify would have been able to host my site so that others would be able to enjoy total war three kingdoms as much as I do. It was a lot of work to get the coding right and I still have a ways to go but I will continue to strive until I reach my dream of being a game designer.
🇧🇷 | Produtividade com styled-components
Tags: react, braziliandevs, css, beginners
Published: 2021-06-29 00:04:26

*duas boas práticas para melhorar o seu projeto com essa biblioteca fenomenal*

O **styled-components** é uma biblioteca para estilizar a sua aplicação através do JavaScript e é utilizada principalmente na estilização de projetos React e React Native.

Quando pensamos em estilizar algo, também deveríamos estar pensando em como organizar esses estilos, e para quem está começando no mundo do desenvolvimento frontend, essas duas práticas são fundamentais para a escrita e manutenção de um bom código:

---

> Sempre que possível, crie estilos isolados.

---

### Crie estilos isolados

Através dessa prática temos acesso aos estilos do seu componente de forma mais rápida e isso gera mais produtividade e torna a manutenibilidade seus estilos muito mais fácil.

Uma prática muito utilizada no mercado é criar o arquivo de estilos juntamente com o arquivo principal (`index.js`) do seu componente / página.

Nomear o seu arquivo como `styles.js` ou `styled.js` também é uma boa prática. Esses dois nomes são muito utilizados.

Como exemplo, essa é a estrutura dos arquivos de estilo que utilizei em um template para React, no meu GitHub:

![files structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4lt44meb4ywjrbpi6zd.png)

---

### Crie estilos semânticos

Apesar do styled-components ser muito conhecido e adotado, é comum vermos muitos componentes de agrupamento e que deveriam possui escopo semântico, sendo criados como uma simples `div`. É extremamente importante não esquecermos de utilizar as tags de forma correta  e consciente.

Esse é um exemplo de como criamos e exportamos um componente estilizado com styled-components:

```jsx
export const ExampleComponentContainer = styled.div``;
```

Podemos acessar todas as outras tags como propriedades do styled, como `styled.header`, `styled.nav`, `styled.section`, `styled.article`, `styled.aside`, `styled.footer`, dentre outras.

---

Você pode acessar o template mencionado acima clicando abaixo:

{% github coderamos/template-reactjs no-readme %}

---

Baixe o projeto e comenta aí o que achou :)
Netflix Clone using ReactJS, Python (Flask), and TMDB API
Tags: react, javascript, showdev, python
Published: 2021-06-28 23:33:22

Well, one day I was recommended by YouTube a video named "Build Netflix Clone in React" and I was like.... that's a cool idea. And that is how I spent four days non-stop building a Netflix clone. And here is the  [demo](https://my-watchlist-eba0a.web.app/) :

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624921448789/H64jPqpMy.png)


- I built the front-end in ReactJS and hosted it on firebase.

- For the back-end, I used Python with Flask since I needed some web-scraping work to be done.

- As for getting the info about movies, I used [TMDB](https://developers.themoviedb.org/3/getting-started/introduction) API along with JustWatch for getting the sources where we can stream movies/shows/anime, as shown below for the anime Jujutsu Kaisen:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624922736286/XJr5ZWn8x.png)

If you are interested in the code, you can get the repo [here](https://github.com/keidakira/my-watchlist), if any of you are interested to know how I built it, then I'll definitely write a tutorial on it!
🇧🇷 | Melhorando o seu título no currículo
Tags: curriculo, braziliandevs, linkedin, interview
Published: 2021-06-28 23:30:46

*afinal, é Front End, Front-End ou Frontend?*

Toda vez que preciso preencher o meu cargo em qualquer formulário, fico em dúvida entre Front End, front-End ou Frontend.

Já vi de tudo, inclusive abordagens diferentes dentro do mesmo ~~perfil do LinkedIn~~ currículo.

Mas se existem várias formas diferentes de escrever, qual é a diferença entre elas?

Partindo desse ponto, percebo que existem duas respostas diferentes: a que trata sobre a etimologia dessas palavras e a que trata as diferenças na prática, ou seja, a que mais vai te ajudar a conseguir um trabalho.

E é sobre a segunda opção que eu quero tratar aqui.

Como você já deve ter observado, eu optei pela utilização do termo `Front End` e foi por um motivo bem simples: é o termo buscado no Google dentre as três opções, na **maioria** dos países, inclusive o Brasil.

![google trends results for frontend word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysv2id2phum5b1rgpfdq.png)

---

Acredito que usar o termo correto mais buscado traz mais chances de ser encontrado por um recrutador, visto que os mecanismos de buscas ranqueiam melhor os termos mais buscados em comparação aos menos buscados.

Se o seu objetivo é ser achado por recrutadores fora do Brasil, vale a pena checar no [Google Trends](https://trends.google.com.br/trends/explore?geo=BR&q=front%20end,front-end,frontend) qual é o termo mais buscado lá.

E você, possui alguma justificativa para não usar dessa forma?

Comenta aí :)
PRESENTING HABIT-O-CIRCLE APP: CODED BY CODE GENERATOR: THAT WAS CODED BY ME!
Tags: php, beginners, opensource, watercooler
Published: 2021-06-28 23:09:30

Yes, I did make a code generator that generates codes. It's still in its early stages, but I'm growing fond of it. I don't want a Low Code APP that restricts me in terms of UI and code complexity.

I just want codes that allow me to use them wherever I want.

'I have my sword ready,' I think!!! This will be an open source project. I'll tell you about it later.

This Code Generator coded  HABIT-O-CIRCLE in just 45 Minutes.

# Habit-O-Circle
Habit-o-Circle is intended to help people better manage their lives. You can set goals, manage your personal finances, and break bad habits. Even your friends and you can support each other in breaking bad habits.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fi58i0xc1iau0dyfi7n.jpg)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jccg8dq13rvqyv26ckrw.jpg)
This is OpenSource Project. 


# Features:
- Beautiful Login Screen (Dynamic, new on every login)
- Create Short AIM (Goals) of in Life and self evaluation.
- Create Bad Habit Break period. Also get help by your friends.
- Personal Finance to keep a check on non progressive spendings.


# Languages and Codes
-Used xp.css library which was one of my kindergarden project. I like this library as it is super responsive compared to other heavy libraries which need media quieries etc.
-PHP ( PDO & OOP)
-Codes are generated by my new code generator. This is still in early stages.   


# Installation
-Create a mysql db with name diary.
-import diary.sql
-change in common --> dbconfig.php and config.php
GET SET GO....

# User Addition
You Dont need database to add user. on login.php change in array to accommodate your friends.

# Can I improve it?
- Yes sure welcome!!! Please open an issue or contact me on my email over my profile.
- I really want to remove all datatabels with some new innovative UI. You can Help.

#Github Repo:
{% github Manishfoodtechs/Habit-O-Circle %}
Migration with AWS
Published: 2021-06-28 22:30:53

# About
In this workshop we focus on Migrate & Modernize phase, and learn how to migrate a fictional application to AWS.
Read more: https://application-migration-with-aws.workshop.aws/en/

# Cloudformation Template
region - us-west-2
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hhx9e51s58qcwah3xj8.PNG)

# Stack details
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nue6m3ruez4e7cdw6nz4.PNG)

# Stack creation complete
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n8j2l34b83cevcauol8.PNG)

# Deployed environment
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whpzavl2i3bkmwykty1d.PNG)

# AWS Migration hub connected
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb6nhj7g2y7mnukhxzrp.PNG)

# Database migration
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4gcoqtlypf9wywy2mnd.PNG)

# Setup networking

RI-SG security group
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8x3z0m609uik61enkym.PNG)

DB-SG security group
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sixu77aoc5sznrf68ov.PNG)

# Create target DB
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8dc4pcfmhawbls57cpa.PNG)

# Database created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/loo8pnhdykqkuz6t4nv7.PNG)

# Created replication instance
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0e0yef4aywbn9q0f8an.PNG)

# DMS replication instance created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h15hfgyk100nwjeh6if.PNG)

# SSH into DbServer with Cloud9 and granted privileges
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrcj7auuz7cx630xbmeo.PNG)

# Created a folder for bin logs
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7siry1j5ndyfff31assw.PNG)

# MySQL service restarted
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tlda18frbfv1qdl4g0a.PNG)

# Binary logging status is now set to ON
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v3walciq83349rsssns.PNG)

# Source and Target endpoints created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63k7y70zvq8rcwkm3qlq.PNG)

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

# DMS task created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tkibuz9w02atgxxxo6h.PNG)