teleren/devto huggingface dataset:
Erro no Switch
Published: 2022-01-10 16:12:57

```
export default function Routes(){
    return(
        <BrowserRouter>
            <Switch>
                {/* Rota Client*/}
                <Route path='/' exact component={Home} />
                <Route path='/produtos/:idProduto' exact component={ProdutoDeteils} />

                {/* Rota Admin*/}
                <Route path='/admin' exact component={Dashboard} />

                <Route path='/admin/produtos' exact component={Produtos} />
                <Route path='/admin/produtos/cadastrar' exact component={ProdutoCadastrar} />
                <Route path='/admin/produtos/editar/:idProduto' exact component={ProdutoEditar} />

                <Route path='/admin/usuarios' exact component={Usuarios} />
                <Route path='/admin/usuarios/cadastrar' exact component={UsuarioCadastrar} />
                <Route path='/admin/usuarios/editar/:idUsuarios' exact component={UsuarioEditar} />
            </Switch>
        </BrowserRouter>
    )
}
```
}`
`
All named html colors
Tags: html, css
Published: 2022-01-10 16:37:28

Hello!
I have created a list of all named HTML colors. 

![html color names](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck5nmltw8dnqlu3yy1pq.jpg)

You can find the full list here: [html color names](https://www.colorsdata.com/colors/html_names_codes).

If any color is missing please let me know in the comments! :)
Thank you for your attention and time.
[Day 7] Solidity, why you gotta be like this?
Tags: blockchain, 100daysofcode
Published: 2022-01-10 16:28:08

Day 7, totally forgot to post again.. Yesterday I had another fun day, it was a lot of head banging but it was still a fun time learning. Learning something new is always hard but as this journey progresses I am sure I will get better and better or at least I hope so!  

All of my code can be found at this Github [Repo](https://github.com/ChaseStruse/VideoGameMarketplace)

## What did I do?

- Spent a lot of time diagraming and trying to figure out how to structure the smart contracts using Miro
- Read Ethereum.org documentation
- Started to rearrange setup and deleted old contract and test and started implementing the new way I wanted to go. 

## What did I learn?

- Learned that it is really beneficial to just take time to read and diagram, you don't always have to jump head first in
- Learning to shift my head towards blockchain programming, thinking in solidity is a lot different than something like C#

## Any Side Notes?

- Don't forget to slow down. I'm always so amped and wanting to go straight into the code that I miss some small stuff and create headaches for myself that could have been solved long ago.
100 Days of Learning - Day 6
Tags: 100daysofcode, codenewbie, sql
Published: 2022-01-10 16:04:35

---
series: 100 Days of Learning
---
Hello and welcome to my 100 Days of Learning challenge!

Today I am continuing my efforts in learning SQL for work. I'm a business analyst so I don't get to do any coding in my day-to-day, instead I manage my team's webdev projects (I'm basically product owner/product manager/project manager all rolled into one). I'm excited to get a better understanding of the queries I've been copy-pasting (and start writing my own queries!) and use this to transition into learning more about how the databases are structured in our projects. 

(As a note - I drafted this on Friday and then my computer BLUE SCREENED, so I'm catching up on my posts today.)

## My Goals for Today:
- Start the [Combining and Filtering Data with T-SQL](https://app.pluralsight.com/library/courses/combining-filtering-data-tsql/table-of-contents) course on Pluralsight (my work provides me with a Pluralsight account for continuous learning)
- Revisit Colt Steele's Web Developer Bootcamp course and work through a few more lessons

## What I Completed
- I started the SQL course but didn't get very far into it because my computer blue screened and I called it a day

## What I Learned
- This day was kind of a bust, but I did learn how to create my own databases locally, and how to restore a database from a backup. Small progress is still progress. I'm excited to dive deeper.

## Goals for Next Time
- I want to get back to my Survey Form project for the freecodecamp Front End Web Development certification, but that's going to have to be a project for the weekend
- Finish the current SQL course I'm working through
- Finish the section of the Colt Steele course
📦 Top alternatives for "colors" and "faker"
Tags: javascript, webdev, node, opensource
Published: 2022-01-10 16:01:28

For those out of the loop, there are recently some drama about the NPM packages `colors` and `faker`, and here are some articles reporting about it:

- [Open source maintainer pulls the plug on npm packages colors and faker, now what?](https://snyk.io/blog/open-source-maintainer-pulls-the-plug-on-npm-packages-colors-and-faker-now-what/)

- [Dev corrupts NPM libs 'colors' and 'faker' breaking thousands of apps](https://www.bleepingcomputer.com/news/security/dev-corrupts-npm-libs-colors-and-faker-breaking-thousands-of-apps/)

- [Hacker News Discussion](https://news.ycombinator.com/item?id=29863672)

This blog is not to criticise on what happened, but to offer some help for developers who are interested in alternatives for `colors` and `faker`.

## Top alternatives for `colors`

**`chalk`**

Terminal string styling done right

https://npm.im/chalk (131M weekly downloads)
https://github.com/chalk/chalk (17k stars)

**`colorette`**

Easily set your terminal text color & styles.

https://npm.im/colorette (16.9M weekly downloads)
https://github.com/jorgebucaran/colorette (1.4k stars)

**`kleur`**

The fastest Node.js library for formatting terminal text with ANSI colors~!

https://npm.im/kleur (11.8M weekly downloads)
https://github.com/lukeed/kleur (1.3k stars)

👀 More suggestions ➡️ https://pkg.land/colors

## Top alternatives for `faker`

**`chance`**

Chance - Utility library to generate anything random

https://npm.im/chance (589.3k weekly downloads)
https://github.com/chancejs/chancejs (5.8k stars)

**`casual`**

Fake data generator

https://npm.im/casual (57k weekly downloads)
https://github.com/boo1ean/casual (2.8k stars)

**`typeorm-seeding`** (useful if you use typeorm)

A delightful way to seed test data into your database

https://npm.im/typeorm-seeding (35k weekly downloads)
https://github.com/w3tecch/typeorm-seeding (700 stars)

👀 More suggestions ➡️ https://pkg.land/faker

⭐️ ⭐️ ⭐️

psst: https://pkg.land (beta) finds similar packages on NPM for you! check it out, go search [`moment`](https://pkg.land/moment), [`request`](https://pkg.land/request) and more 🚀  

**Do you know any good alternatives for `colors` or `faker` to suggest to the community? Leave a comment below!**
Event Driven Architecture with AWS SQS
Tags: aws, sqs, spring, tutorial
Published: 2022-01-10 16:00:47

What is Message Queue Service?

Before learning the AWS SQS we have to learn what is message queue service first. Message Queue service is “the system that pushes a message into a queue by providing an asynchronous communications protocol”. There are two parties involved in queue service. Those parties are called Sender and Receiver.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdp426scpj0i2h6rhy0g.png)

Read More at [here](https://enlear.academy/event-driven-architecture-with-aws-sqs-d277851442c6)
Where I can watch watch cartoon online ?
Published: 2022-01-10 15:53:39

Watch cartoons online in HD quality at the best watchcartoononline site like kisscartoon You can watch cartoons online for free, unlimited and in the latest version of Watchcartoononline 2.0. Cartoons are the most loved thing to see on TV, but what about the cartoons that aren't on the TV anymore? Watchcartoononline is an illegal website that lets people view and download completely different cartoons for free.
No matter what age, cartoons and anime are a universally loved pastime. While it is possible to get bored watching television, the inner child of every person will be excited when someone mentions cartoons. These old-fashioned cartoons that you grew up with are no longer being aired. We have now created watchcartoononline to help you stream unlimited cartoons and get them for free.
These websites encourage piracy which is completely against the laws of the presidency. We may however present people with authorized alternatives which work equally well to [watchcartoononline](https://infocaptain.com/watchcartoononline/). Have fun!
Weird behavior of javaScript you should know!
Tags: javascript, webdev, programming
Published: 2022-01-10 15:53:26

We know that javaScript sometimes behaves weird as compare to other programming languages, but initially it was design only to make web pages.

But now in today's world, we can do so many things using javaScript with help of other libraries/framework like react, angular.

This weird behaviour is not a fault of javaScript, this is how the language was design in the initial phase. So we should understand why this behaviour happens, so we can take primitive actions based on it.(If we are intending that this should not happen)


![Image1 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grjvghciy63brggmle93.png)
So here, we make one object calling its name **weirdObject** which has property `obj_id` and `obj_name` which is further divided into an object which has property `obj_title` and `type`.

If we run our code with node we get the output as the object considering `obj_id` and `obj_name`.
![Image2 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdmbkaa2ucxn0o48nqni.png)

Now, if we want to change the `obj_id` of the object we can do that in javaScript inspite of using **const** keyword.(It is allowed to change inside property of javaScript whether we use const or not)

![Image3 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yng6lxqi137q4626pbxu.png)

To change this behaviour, we can use **Object.freeze()** method which freezes an object. 

![Image4 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjwoyuhbhw174htvufna.png)

Here the value of `obj_id` not changed. A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, and writability of existing properties, and also prevents the values of existing properties from being changed.


But, what if we want to change value of the `obj_title` from **"My Object"** to **"This Object"** which is present inside `obj_name` object of weirdObject after using `Object.freeze()` method.

Let's see..
![Image5 description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msjc06wjx85zpqollh42.png)

Yes, we can do that..!! This is called **Shallow freeze** which only applies to the immediate properties of the object itself and will prevent future property addition, removal or value re-assignment operations only on object. If the value of those properties are objects themselves, those objects are not frozen and may be the target of property addition, removal or value re-assignment operations.

To make object immutable, we will have to add explicit function which will check is wheather the object has another object present inside it.

Hope this odd behaviour of javaScript information helps you.
Thanks for reading and happy coding!
rails generators 制限設定
Tags: rails, generator, ruby
Published: 2022-01-10 15:49:23

### rails g コマンドで生成されるファイルを制限する
- [ドキュメント](https://api.rubyonrails.org/classes/Rails/Generators.html)

#### `config/application.rb`内に下記のように設定する
```ruby
config.generators do |g|
  g.jbuilder       false
end
① # p config.generators
```
- 各種設定項目はドキュメント内で確認できた `Rails::Generators`
[![Image from Gyazo](https://i.gyazo.com/6ba8469df8413ab6db83a2e7b4a2328b.png)](https://gyazo.com/6ba8469df8413ab6db83a2e7b4a2328b)
- コード①を有効化して、サーバログを確認すると下記のように設定項目を確認できる
[![Image from Gyazo](https://i.gyazo.com/d73274b33ba0798d4e9327de61fa1a05.png)](https://gyazo.com/d73274b33ba0798d4e9327de61fa1a05)

#### ドキュメントに記述されていない項目...
- [skip_routesソース](https://github.com/rails/rails/blob/d5b9618da1ac60c674e8a27c3ab4e33742e9aa9b/railties/lib/rails/generators/rails/controller/controller_generator.rb)

##### わからなかったこと
- ルーティング生成の有無の設定項目である`skip_routes`は、`railsガイド`、`APIドキュメント`、`その他の公式と思われるリソース`を調べたが見つからず`個人ブログ`などの2次、3次などのリソースでしか知ることができなかった。

##### 分かったこと
`rails`のリポジトリにて、`Rails::ControllerGenerator::ControllerGenerator`オブジェクト`class_option`の引数に`skip_routes`が記述されていることを確認できた。上記のコードとどのように絡んでくるかはわかっていないが、`skip_routes true or false`を記述することで、`rails g controller`実行の際に設定を読み込み、`config.generators.skip_routes false`ならば、ルーティング生成を無効にするという動きをすると思われる。

##### 感想
`APIドキュメント`などの公式リソースから情報を読み取っているが、もし公式リソースに情報がない、もしくは見つけられない時の調べ方に課題を感じた。
memory game | react | next js | javascript | css | html

Tags: react, nextjs, javascript, tailwindcss
Published: 2022-01-10 15:43:33


memory game | react | next js | javascript | css | html

https://www.youtube.com/watch?v=BkTyORDsiWE

if you liked our content please subscribe to the channel ,leave a nice comment and smash the like button ...thanks for watching
Cloud Types (Cloud Sevice Models)
Tags: cloud, azure, aws, beginners
Published: 2022-01-10 15:43:05



<p>There are 3 types of cloud service models</p>
<ul>IaaS (Infrastructure as a service)</ul>
<ul>PaaS(Platform as a service )</ul>
<ul>SaaS(Software as a service)</ul>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/faua00lxp7daop9go9ug.png)<br>
Source: Azure webservices
<h4>Lets know some Baiscs of this 3 models</h4>
<b>
Iaas(Infrastructure as a service):</b> On this service, you get most of the controls of your cloud but you avoid the expense of buying and operating your own physical servers and other data centre infrastructure which are costly and complicated. But you get to manage the operating system, storage and networking attributes.<br> 
<b>Uses of IaaS</b>: When you want to run multiple application on a single vertual machine, testing your application on different OS, more control over your website.<br>
<b>PaaS(Platform as a service )</b>: It is for simple things like website hosting. Here you do not need to worry about software licence, OS, storage and networking attributes. Instead, you manage the website or application you develop, so you are getting less control from IaaS.<br>
<b>Uses of PaaS:</b>Web hosting,testing, building and updating.<br>
<b>SaaS(Software as a service):</b>When you want the least management responsibility. Basically microsoft products like office 365, word etc use it(subscription based services).<br>
<b>Uses of SaaS:</b> Hosting webservices like office 365.
Unable to display Chart.js doughnut chart
Tags: chartjs, javascript
Published: 2022-01-10 15:34:59

I am trying to create a doughnut chart with chart.js, Bootstrap 5 and Flask. I used some YouTube videos and Stackoverflow links as reference but my chart is not getting displayed.

I see a white blank area in the chart section. If I click on top of it, it gives me a prompt to save download.png but the image itself if blank/white. Can someone please advise where I am going wrong?

`<!-- Description -->
  <div class="container" style="width: 80%;">
   <div class="row">
    <div class="col-sm-6">
     <canvas id="doughnutChart" width = "300" height = "300"></canvas>
     <script>
      var ctx = document.getElementByID("doughnutChart").getContext("2d");
      var doughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data:{
            labels: {{ cntlabels | safe }},
            datasets: [
                {
                    label: "URL Types",
                    data: {{ cntvalues | safe }},
                    backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)'
                    ],
                    hoverOffset: 4
                }
            ]
        },
        options: {
            responsive: false
        }
      });
     </script>
    </div>
    <div class="col-sm-6">
     <p>Space for bar chart</p>
    </div>
   </div>`
The Flask app is passing the necessary variables:
`return render_template('dashboard.html', fname = first_name, cntlabels = count_labels, cntvalues = count_values)`
Data Visualization - Basic Things To Know
Tags: datascience, machinelearning, python, programming
Published: 2022-01-10 15:15:06

## What is Data Visualization?

Data Visualization is the representation of data in a chart, a graph or other visual representation. One of the basic things to know about data visualization is that it communicates the relationship of data with images.

Data Visualization is the way our brains work and how the brain translates ideas into reality. There’s a Yorùbá adage that says:

    
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dztp8fvmm6ofwedvcu2g.jpg)

> Oun tí ojú àgbàlágbà nri lorí ìjókò, bí ọmọdè bá gun orí igi ojú e kò le rí lae lae

## Breaking it down…

Another basic thing to know about data visualization is that it is a form of visual art that makes us keep our attention on the message that makes us keep our attention on the message.

## Example:

Google Map Traffic Visualization - See [here](https://www.google.com/maps/)

Hard Disk Drive Data Visualization

Visual representation of data etc.

Written by [Rasheedah](https://twitter.com/STEMInstructor_)

If you like this article please like and share. Follow us on [Twitter](https://twitter.com/rollademy). Visit [Rollademy](https://twitter.com/rollademy) to learn more about Data Science free of charge.
React Native Folder Structure 2022
Tags: react, reactnative, javascript, mobile
Published: 2022-01-10 15:08:41

Here I am sharing my knowledge about react native folder structure.

https://youtu.be/LZXjVPn45A8

In this video I explained 3 different folder structure for your react native project. I have shared the best react-native folder structure that I've been using for my react native projects.

For react native projects and videos you can subscribe my youtube channel "JavaScript Centric"

https://www.youtube.com/c/JavaScriptCentric
Working Html Forms WITHOUT BACKEND!!!
Tags: webdev, html, devops, serverless
Published: 2022-01-10 14:52:01

Hi there,
You remember the time when you have to write the useless php code just to make your Html forms work? siting for hours just to make it work properly. For me, It was the most Frustrating thing while coding, who don't loves to make their code short and more readable (if you don't just drop a comment down , I also want to know :P ).

# Introducing to you [**FORMSPREE**](https://formspree.io)

**Formspree** is a service which can make your Html Forms work without typing php!!

![](https://c.tenor.com/GLZUkFLcqeQAAAAS/yawnface.gif)

## How It works?
Actually Formspree work as a PRE-made php project to deliver the forms directly to your mail inbox, Formspree also support 3rd party integrations like 
* Airtable
* ConvertKit
* Discord
* Email
* Freshdesk
* Google Sheets
* Gorgias
* Hubspot
* Mailchimp
* Mailerlite
* Pipedrive
* Slack
* Stripe
* Trello
* Webhooks
* Zapier
* Zendesk

## Say No to SPAM
![](https://c.tenor.com/iI2ol_eC1BgAAAAM/shifttrr-stopspaming.gif)
Formspree has inbuilt *Spam Filter* and also support Captcha or you can even set custom rules for spam filters which is actually a Great Feature!

## How to create
Step 1 - Create a account at [FORMSPREE](https://formspree.io/)
Step 2 - Create a new from in Formspree
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cd7l72m09endl3nk51x.png)
Step 3 - Copy your Form's endpoint and place it as action in your form tag
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5k4s3ljmt7zfexl7sf5.png)
example :
```html
<form
  action="https://formspree.io/f/mjvlkddg"
  method="POST"
>
  <label>
    Your email:
    <input type="email" name="_replyto">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- your other form fields go here -->
  <button type="submit">Send</button>
</form>
```
Step 4 - You are Done :P

by default it redirects user to their Thank you page when someone submits a form, but you can change

Fact :- my website form is also working with formspree , check it out https://codewhiteweb.cf/#contact

![](https://c.tenor.com/uYqsM9uIyuYAAAAC/simple-easy.gif)

Thanks for reading
~ CodeWhite

(I know this post is small than my previous one, but its helpful and also thanks for showing so much support to me, just drop me a comment If you like this post and don't forget to give :P)
Add Firebase To Your Vue JS App
Tags: vue, programming
Published: 2022-01-10 14:32:42

In this Vuejs tutorial, You’re going to learn how to add Firebase to your Vue JS 2 web app in minutes with STEP by STEP instructions.

{% youtube NpDlC2-Zo0U %}

###Create Vue JS Project using Vue CLI

{% youtube 3A57dcz8A8E %}

**STEP 01:** First you need to install [Node.js](https://nodejs.org/en/) & NPM (Node Package Manager) onto your computer if you haven’t done so already.

Check to see if you have installed node with the following command on the Terminal / Command Prompt:

```JavaScript
node -v
```

**STEP 02:** Install **vue** using **vue cli** globally (-g) which is the easiest way to get started with Vue.

```JavaScript
npm install -g vue-cli
```

**STEP 03:** Initialize Vue Project via Web Pack with the following command and change **my-project** to your project name.

```Javascript
vue init webpack my-project
```

Next, you will be asked a series of questions:

- **Project name** (yourprojectname) – The name must be URL friendly (no space)
- **Project description** (A Vue.js project)
- **Author** (SoftAuthor)
- **Vue build** (Use arrow keys) **❯ Runtime + Compiler: recommended for most users**
- **Install vue-router?** (Y/N) **❯** Yes
- **Use ESLint to lint your code?** (Y/N) **❯** No
- **Set up unit tests** (Y/N) **❯** No
- **Setup e2e tests with Nightwatch?** (Y/N) **❯** No
- **Should we run `npm install` for you after the project has been created? (recommended)** (Use arrow keys) **❯** Yes, use NPM

Once you hit enter, it will start downloading and installing dependencies which will take a minute or two.

After that cd to your project.

```Javascript
cd yourprojectname
```

Then,

```JavaScript
npm run dev 
```

At this stage, your project will be compiled and Vue will give you the localhost address. Go ahead and launch it on the browser.

If you already have a Gmail account, go to the [Firebase Console](https://accounts.google.com/signin/v2/identifier?passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.firebase.google.com%2F&followup=https%3A%2F%2Fconsole.firebase.google.com%2F&flowName=GlifWebSignIn&flowEntry=ServiceLogin) and log in.

Once you have logged in, you will see the project explorer window like the image below.

>⚠️ *It may look a bit different depending on when you read this article.*

###Choose Add Project Button

![alt text](https://softauthor.com/wp-content/uploads/2020/04/firebase-console-add-project.png)

###Create project name of your choice and click continue

[Continue Reading](https://softauthor.com/add-firebase-to-vuejs/)