teleren/devto huggingface dataset:
Algumas Vantagens para aprender React
Tags: reactnative, javascript, frontend, developer
Published: 2021-04-15 18:42:53

React é uma biblioteca JavaScript criada pelo Facebook e é a biblioteca JavaScript mais famosa e usada. Outras bibliotecas são angular.js e vue.js. Veja algumas razões pelas quais você deve aprender.

1. O React é fácil de usar. 
React é a biblioteca JavaScript mais usada porque é fácil de usar e amigável para iniciantes. Os aplicativos da Web são construídos com mais rapidez e sem muito estresse com o React.

2. Trabalhos de alta remuneração.
Como um desenvolvedor React , você será classificado como alto e receberá um salário alto. Nos Estados Unidos, o salário médio de um desenvolvedor React é 120 mil por ano. E você também não precisa se preocupar em conseguir um emprego porque é muito procurado. Principais empresas como Facebook, Netflix, Facebook, Instagram, Whats App, Microsoft, Yahoo, Netflix, PayPal, Imdb, Uber, Wix, Atlassian, CloudFalare, Slack, Dropbox, Salesforce, Airbnb, Reddit, BBC e até Hashnode usa react. A maioria das empresas está procurando desenvolvedores de reação.

3. React é Reutilizável 
O React economiza tempo e dinheiro porque é baseado em componentes. E os componentes podem ser divididos e reutilizados.

4. Aplicativos móveis e VR React não são usados apenas para construir sites, mas também para construir aplicativos móveis e VR (realidade virtual). Você pode trabalhar como desenvolvedor Web, desenvolvedor de aplicativos móveis ou até mesmo um especialista em RV.

Outros exemplos rápidpos:

1 React é compatível com SEO 
2 React é estável 
3 React é rápido

Comece a Aprender React hoje !!!!
How to name Rails Concerns? 
Tags: rails, ruby, 5days5blogposts
Published: 2021-04-15 18:28:57

---
title: How to name Rails Concerns? 
published: true
description: `able`, `has` and whatever better describes what the concern groups together.
tags: Rails, Ruby, 5days5blogposts
---

[Rails concerns](https://api.rubyonrails.org/v6.1.3/classes/ActiveSupport/Concern.html) are a handy technique to organize code / logic within your classes. But how do we name these Rails Concerns?

We usually follow these two conventions:

### **able** suffix

We suffix Concerns with `able` when the object we are including the concern to is able to act or behave as the concern describes.

```ruby
module Avatarable
  extend ActiveSupport::Concern
  ...

  included do
    ...
  end
  ...

end
```

The Concern above tells us that the class we include this concern to is able to act / behave as we would expect from an avatar.

We also follow this convention when we can execute the action that the concern describes to the object we are including the concern to.

```ruby
module Subscribable
  extend ActiveSupport::Concern
  ...
end
```

In this case we are making clear we are able to subscribe to objects from the class we include this `Subscribable` Concern to.  

### **has** prefix

We prefix our Concerns with `has` when the logic we are trying to group within our Concern is not describing a behavior but a `has` relation between the class where we will include the Concern to and a second entity. In the following scenario we may have a `User` entity that has mentions within a blogging platform. At some point we may come up with a Concern that groups all the logic tied to a user having mentions. 

```ruby
module HasMentions
  extend ActiveSupport::Concern

  included do
    ...
  end
end
```

In case none of the conventions described above makes sense within a specific scenario we don't follow them and goes with whatever better describes what the concern groups together.


**How do you name your Rails Concerns? What conventions do you follow?**
Code Innovation Series 2021 and Goodies :)
Published: 2021-04-15 18:18:49

#### Winning [Code Innovation series](http://www.incubateind.com/cis)
 


So where do we begin with....


It all began with our college *CSEA* collaborated with [incubateind](https://www.incubateind.com).

It was an hackathon..
Submission criteria was simple and straight. Fork a github repo and submit your project there. Since it was powered by [Github](http://github.com)

Themes of hackathon were **health/Medical , Education/Learning and Fintech**

Since only two days were provided for the hackathon and with no team, I obviously chose fintech because I had past experience with it. 
#### Idea

* My idea was simple too. Predict the stocks of a company and tell company when to sell or buy stocks based on their previous stock data.

* okay okay ! I won't go deep into the details of the project. But I can vaguely tell you about how I got second runner up prize!

* I used moving averages and exponential moving averages concept in my project to predict when to buy or sell stocks.

* Tools and Languages used were Jupyter Notebook and Python

* Stock Data is taken from yfinance which is available as pip package.

So After coding and all is done, I forked the github repo and submitted the project. Only 5 projects were selected for jury round.
 
Here is the link to all those [5-projects](https://github.com/NIT-C/CISHack-NITCalicut/pulls)

Coming to jury round, I made a presentation using google slides. Again I tried to keep it simple too. I included explanation about the algorithm used, room for development etc

And at last 3 teams were selected and I was third runner-up. The other two teams' themes were Education/Learning.  

All the three teams were provided with Github goodies and Free tickets to github workshops too.

#### Tricks/tips I learn't in hackathon : 
1. Do something that you are good at
2. Teams are good but If you think you can do it alone go for it, because it will save a lot of time
3. Keep your code simple and stupid
4. Be confident and cool
Introducing the Chainlink 2.0 Whitepaper
Published: 2021-04-15 18:11:01

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

We're excited to release Chainlink 2.0, a new whitepaper that presents how Decentralized Oracle Networks will evolve to create a decentralized metalayer that dramatically enhances the functionality of smart contracts and blockchain-based systems. Hope you enjoy!

Link here: https://chn.lk/3sqlDL4
Deploy a Production Ready Hashicorp Vault Node
Tags: hashicorp
Published: 2021-04-15 18:05:07

Vault is a tool for securely accessing secrets. A secret is anything that you want to tightly control access to, such as API keys, passwords, or certificates. Vault provides a unified interface to any secret, while providing tight access control and recording a detailed audit log.
if you want to deploy a production ready node, please check this article. 
https://zaidbaban.medium.com/deploy-a-production-ready-hashicorp-vault-node-1563623956c9
How to Quickly Remove A Committed File From Git Version Control
Tags: github, git, versioncontrol, webdev
Published: 2021-04-15 17:26:03

Remember that awkward moment when you forgot to exempt some files from being version controlled before doing a git commit? Maybe you committed something like the node_modules folder, your .env  file which bears confidential data such as API-keys or database login credentials or you committed User-specific files such as an IDEA configuration file and didn't know how to remove these accidentally committed files from  by version control.  If this was ever you,  this post is for you. 

Like is the case with most files you might want to remove it from version control but not delete them from your local computer because these files are still useful. The good news is Git provides a quick and easy to do this .So how is this done?  We will break this into five short steps.


1. Create a ``.gitignore`` file that's if you that have one in your project folder already.
2. Add the path to the folder or file you want to ignore to the ``.gitignore`` file.
3. Run the following command: ``git rm --cached path/to/file``. Git will list the files it has deleted. The ``--cached`` flag should be used if you want to keep the local copy but remove it from the repository.
4. Verify that the files have been removed from version control using the ``git status`` command.
5. You can now do commits and push changes to the remote repository.

After completing these steps, those files should be removed from version control but not deleted from any local computer. Any other developer who pulls again after you pushed your changes should have no issues. So that's -- simple and plain 😜😜😜.
7 Actionable tips to finding a brandable domain name
Tags: sideprojects, discuss, productivity, domain
Published: 2021-04-15 17:09:41

Everything starts with a domain name. Whether you're starting a side project or a full-fledged SaaS business, a domain name is essential to your overall branding. But when we hunt for a domain name, it feels like all domain names are already taken. We've all faced this before.

Last week, while searching for a domain name, I made this framework to find great domain names that stand out. I will keep it short, and concise.

These are the tips for you:

1. Take a popular English word, and change one letter.
e.g. Binance (Finance), Zillow (Willow), Zomato (Tomato), Ikea (Idea).

2. A Word you love + ly/ify/able/sy/zy
e.g. Shopify, Grammarly, Mashable, Stocksy, Coinzy...

3. Take two common English words and join them together.
e.g. MakeSumo, HubSpot, FireBase, GlassNode, BaseCamp...

4. Create a unique 2/3 syllable word that is easy to pronounce.
e.g. Figma, Envato, Vercel, Discord...

5. Your niche + Animal names
e.g. FoodPanda, DataDog, MailChimp, SurveyMonkey, CoinGecko...

6. Try adding b/e/i/u/un before words you love.
e.g. Udemy, Unsplash, eBay, iStock, bCast...

7. Change the spelling of a common word/phrase, but make it sound the same.
e.g. Lyft, Lyst, Reddit, Flickr, Digg...

8. Add a verb to your domain name.
e.g. GetPocket, UseFluent...

9. Go for ccTLD first, and later buy the .com at a premium price.
e.g. notion.so, foundation.app, copy.ai, codepen.io, dev.to

10. Omit a word or two from a known word.
e.g. Canva (Canvas), Spira (Spiral), Notio (Notion)...

11. Use local translation to make a word.
e.g. Vue (french translation for "View"), Dukaan (Hindi translation for "Shop")


Hope it helps. Follow me on Twitter [@ishfillet](https://twitter.com/Ishfillet) for more actionable tips on UI/design/business. xD

Also, this is my first post on here - react and share it if you like it.
Unused Scanner 2.3 released
Tags: php, composer, console, terminal
Published: 2021-04-15 16:42:12

---
title: Unused Scanner 2.3 released
published: true
description: Scanner for unused composer dependencies
tags: PHP, composer, console, terminal
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z12f9xp8r7fygqiqpihe.png
---

  - Now distributes as phar archive also! You can [download phar](https://github.com/Insolita/unused-scanner/releases/download/2.3.0/unused_scanner.phar) from the [releases page](https://github.com/Insolita/unused-scanner/releases/tag/2.3.0)

  - improved argument parsing

  - added option for show app version only

  - fixed silent output - it really silent now, only status code returned
  - removed nesbot/carbon dependency

Try it now at https://github.com/Insolita/unused-scanner
A este "cacho carrrne" le gusta CSS - Bender (Futurama)
Tags: codenewbie, css, spanish, noob
Published: 2021-04-15 16:38:10

Tener 30 años y ser programadora front end, junior, sin experiencia laboral, y además una motivada en tus ratos libres se hace durillo, no nos vamos a engañar. Si no has pasado por esto, te cuento que la idea es pasarse todo el día haciendo cursos, aprendiendo cosas, perfeccionando skills y buenas prácticas y un largo etc mientras vas recibiendo descartes de procesos de selección.

Y ¡ojo! yo también he sido junior en mi profesión anterior antes de ser senior (vamos, lo normal), pero no es la misma sensación estar empezando en el mundo laboral que pegar un volantazo a mitad de camino. Con el volantazo tienes que sumar a los agobios y preocupaciones habituales de la búsqueda de empleo el síndrome del impostor, que es una movida , y que se encarga de hacerte sentir un fraude cada vez que tiene un ratillo, y recordarte que "algún día se darán cuenta de que eres una estafa".

Pues bien, yo al síndrome de impostor le doy en la cara con CSS. No es la primera vez que digo esto, pero es que es la verdad. Antes de ser "programadora impostora" ya era "dibujanta impostora" (que por cierto, era mucho más impostora como dibujanta y lo hacía con toda la normalidad del mundo, tendría que hacérmelo mirar). Total, que hacer dibujitos me entretiene, me relaja y mantiene mi foco en un lugar constructivo; y si los dibujitos se hacen en CSS y luego puedo añadirle animaciones, transiciones y JavaScript ya ni te cuento.

Por lo visto si a mi síndrome del impostor le sumas la emisión de Futurama en Disney+ y un fin de semana de lluvias y pandemias de por medio resulta esto:

![Bender](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmmrb5mp314yb88bfr7e.PNG)

En realidad hacer a Bender con CSS no ha sido demasiado complicado ya que es un personaje con líneas bastante claras y poquitos detalles, no obstante dejo aquí un cheat sheet que he hecho con las partes que me parecen más rebuscadas por si a alguien le apetece probarlo:

![Bender cheat sheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kesrrw1jyaqthomtf72x.jpg)

Este es el trabajo en Codepen donde también está todo el código, cualquier feedback (si es con amor :)) es bien recibido!:
https://codepen.io/martreyz/pen/vYgdzog

Escrito con -^. .^- por martreyz
MongoDB Vs. MySQL For Beginners
Tags: mongodb, mysql, database, webdev
Published: 2021-04-15 16:07:00

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wdk622fweiugn5122wk.jpg)
If you're a beginner and you're confused which of these databases is the right one for you, you've come to the right place.

### What's MySQL?
**MySQL** is a database with a SQL flavor, which means the data are separated to tables and rows. If a university uses MySQL to store data of students, the database will have a couple of tables (and each table will have row(s) of data) such as that for details of students (which stores the name and ID of students), table for all subjects, table for all courses, etc. In other words, the data are separated (for a good reason). These tables are connected with each other. Now, what if you want to get student X's name, ID, subjects taken, course, and so on? We need to query multiple tables to get his/her data so you'll write more codes which could go wrong. On the flip side, the data are very organized so if you need the list of all subjects, you only need to get the data from the table which stores all subjects. 

### What's MongoDB?
**MongoDB** is a database with a NoSQL flavor, which means here there are no relationships and no tables. MongoDB is a document based database which looks like JSON. Here's an example of MongoDB data in my note taking app. 
```
_id: ObjectId(1234563xyz7l0a1215411160)
title: "Buy milk and eat pizza"
date: 2022-12-01T00:00:00.000+00:00
user_id: "60662a1c59b27b00159811c9"
name: "masteruser"
createdAt: 2021-04-02T06:40:59.830+00:00
updatedAt: 2021-04-02T09:55:01.660+00:00
__v: 0
```
Here, if you wanna get title of a note, the name of author, and so on, you'll write lesser codes as all related data of a user are stored in a document. However, if you want to get all published dates, you need to query all the notes and extract the published date (you'll write more codes which could go wrong).

### Which Database Is For You?
If you're an experienced developer, you know the answer to this: you need to pick the right DB depending on the use case, but since this post is targeted to beginners, here's my answer:

It depends on the language/framework you wanna use it with. If you wanna build a PHP web app, go for MySQL. These two are a solid combination and there are a lot of tutorials out there which will teach you how to connect your MySQL DB using PHP (and the community that use this combo is super large). With the same token, if you're planning to build a web app using Node.js, go for MongoDB, simply because it is much more popular for developers to use MongoDB with Node.js. 

Later on, when you're pretty good at one of these databases, you should totally pick up the other one as it is not difficult to do so. You only need to know a few concepts to get any database up and running.
I built a cute e-shop entirely in Python
Tags: python, webdev, showdev
Published: 2021-04-15 15:43:54

I'm pretty new to web development and am still learning HTML, CSS and JS. I work for [Anvil](https://anvil.works?utm_source=crosspost:dev.to:/learn/examples/shop-template-guide), a platform that allows you to build and deploy full-stack web apps with only Python. It's great for someone like me with an ML background and no web dev experience. 


I'm learning HTML and CSS by styling Anvil apps, so I built a fake online shop using Anvil and tried to make it as pretty as possible with my limited CSS knowledge. [Check it out](https://shop-template.anvil.app/) and let me know what you think!


![GIF of shop app](https://anvil-website-static.s3.eu-west-2.amazonaws.com/learn/examples/shop-template/shop-template.gif)


## Styling Python Components

Anvil is a [drag-and-drop](https://anvil.works/articles/drag-and-drop-builder?utm_source=crosspost:dev.to:/learn/examples/shop-template-guide) web app builder where every UI component is a Python object. I styled some of these components with CSS by applying a [role](https://anvil.works/docs/client/themes-and-styling?utm_source=crosspost:dev.to:/learn/examples/shop-template-guide) to them.

For example, the header images in the app are ColumnPanels styled with a CSS role.

```css
.anvil-role-header-photo {
  background: url(_/theme/header.jpg);
  min-height: 700px;
  background-attachment: fixed;
  background-size: cover;
}
```

TextBoxes and TextAreas have a solid blue border and items in the Cart have a top and bottom border added. 

But for someone who has little experience with CSS, it wasn't too difficult to make an Anvil app look unique!


## Built-in Integrations

Purchases in my app are made through [Stripe](https://anvil.works/docs/integrations/stripe?utm_source=crosspost:dev.to:/learn/examples/shop-template-guide) which is already integrated in Anvil, so I didn't have to do much work there. I just added this to my client-side Python:

```python
charge = stripe.checkout.charge(amount=self.subtotal*100,
                                      currency="USD",
                                      shipping_address=True,
                                      title="Cupcakes & Co.",
                                      icon_url="_/theme/cupcake_logo.png")
```


[Google services](https://anvil.works/docs/client/components/maps?utm_source=crosspost:dev.to:/learn/examples/shop-template-guide) are also already built-in to Anvil, so I added a Google map to the Contact page with a marker to match the theme.

![Image](https://anvil.works/learn/examples/img/shop-template/contact.png)

```python
    self.map_1.center = GoogleMap.LatLng(40.7128, -74.0060)
    self.map_1.zoom = 15
    icon = GoogleMap.Icon(url="_/theme/maps-icon.png")
    self.marker = GoogleMap.Marker(animation=GoogleMap.Animation.DROP, 
                              position=GoogleMap.LatLng(40.7128, -74.0060),
                              icon = icon)
    self.map_1.add_component(self.marker)
```



You can check out the source code [here](https://anvil.works/build#clone:SYHHBAIJKDSXOWE2%3dMFCNC7A4KANXBHP7EK7G357W)!
Q&A Document Retrieval With DPR
Tags: python, datascience, machinelearning, deeplearning
Published: 2021-04-15 15:43:38

{% youtube DBsxUSUhfRg %}

The third video in building a Stoic Q&A app.

In open-domain question answering, we typically design a model architecture that contains a data source, retriever, and reader/generator.

The first of these components is typically a document store. The two most popular stores we use here are Elasticsearch and FAISS.

Next up is our retriever — the topic of this video. The job of the retriever is to filter through our document store for relevant chunks of information (the documents) and pass them to the reader/generator model.

DPR (dense passage retriever) is a dense vector retriever that is trained on question-context pairs. Encoding both accordingly - enabling super accurate similarity indexing.
HTML - CSS - JS | Podcast
Tags: webdev, podcast, html, css
Published: 2021-04-15 15:37:14

{% spotify spotify:episode:596DMRwBMeQSCefRwWwbVT %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin. 

## What's This One About?

In this episode Matt and Mike are back to basics talking all about the roots of all web development - HTML, CSS, and JS. The duo discuss the new and old capabilities of these foundational technologies, discussing what they do, and how to go about learning each of them. They cover topics like flexbox, CSS grid, box model, using specific HTML tags, and much more!

## Show Notes

1:49 - Introduction

3:50 - HTML

19:30 - CSS

44:00 - Flexbox (& Grid) vs Box model

1:03:18 - JavaScript


##Key Takeaways

* Use the tool with the least complexity and overhead to do the job
* Each page should only have one h1 tag to give screen readers the proper context of each page
* Flexbox and Grid make using CSS a great experience


##Social Links

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[Facebook (Html All The Things)](https://www.facebook.com/htmlallthethings)