teleren/devto huggingface dataset:
Your New React Tour Guide
Tags: react, javascript, beginners
Published: 2021-05-07 15:56:19

Before you read this post , please note that in order to take tour to React you need to have basic understanding of JavaScript, Html and Css.

Let's first start with What is React.

*What is React?*

React is JavaScript library for building complex User Interfaces.It was created by Jordan Walke in 2011 .You may have noticed I said it's library and not a framework. Well it's because React is not the ultimate solution for your problem. It gives you a solid base but to complete a whole application you may need help of other library or frameworks. Frameworks are great . It gives you ready made templates or codes which will help you a lot but for larger application frameworks become a burden programmers. This is programmers tends to work with library which give them freedom to modulate their code bases.


*Why React?*

So, you've been learning JavaScript for 2 months and life is great. Why wouldn't it be ? You can build so many cool apps with JavaScript and show it off with your friends. Now suddenly you have an amazing idea to build a E-commerce app. So you started looking for designs for inspiration and you've finally chosen one. You started Coding 👩‍💻 the logical parts. Suddenly you felt you are writing a lot of duplicate code. For example, your app has a section which contain 20 cards which will be similar in look and different in data.Ok no problem we can always start a foreach loop or map all the details right? Now you are seeing another section requires the same attention and by that time your code is already looking very ugly and not readable at all. 

This is where React comes. The only purpose of React is to build User Interfaces. A User Interface is basically what we see in a website. You just have to tell React what do you want and it will do it for you. Specially for a application which has multiple pages to visit. Building a UI of a medium size application from scratch is not a optimal solution at all. React uses all Html , Css and JavaScript but in a React way . The React language is called JSX . We will describe about JSX in the next section.
Laravel Mail Switcher
Tags: laravel, php, mail, cool
Published: 2021-05-08 04:30:28

Hi guys,

Today I want to share a simple Library that I made for Laravel Application. It called **Laravel Mail Switcher**.

Github Repository: https://github.com/sethsandaru/laravel-mail-switcher

## Use-case
You have a personal Laravel Application (small or medium) or even you're a Startup. Of course, you have a tight budget.

So you probably can't spend much money on Email Provider Services to send out your email to your Users/Customers.

There are a lot of Email Provider Services out there that actually give you a **specific amount per month (for free)** to send out emails.

So, with Laravel Mail Switcher, you will have a big advantage to achieve that. It will automatically **switch** to another email credential once the old one is out of usage for the current week/month.

You don't have to change the **ENV** every time one of the services is running out of usage.

You don't need to manually check to see if the email is running out.

All you need to do is prepare the credential/information and let Laravel Mail Switcher will do that for you.

### Email Services with Free Usage
- Mailgun: 5000 emails for 3-month (about 1666/month)
- Mailjet: 6000 emails per month (but 200 per day)
- Sendgrid: 100 emails per day (3000/month)
- Socketlabs: 2000/month (first month: 40000)
- Sendinblue: 300 per day (9000/month)

And many more... With Laravel Mail Switcher, you can manage the credentials and use all of them until the free usage ran out! Your applications would save a lot of money for emails!!

## How to install?

### Requirement
- Laravel 8.x
- PHP 7.4 or later

### Installation

```
composer require sethsandaru/laravel-mail-switcher
```

Visit this: [Setting Guide](https://github.com/sethsandaru/laravel-mail-switcher#how-to-use) to complete the installation!

## In Conclusions

Personally, I got some personal projects and with this opportunity, I don't have to worry about emails anymore (Really budget projects 🤣)

Thanks for reading! Give it a ⭐ if you find out it's useful!
Project 71 of 100 - Email Preferences Page powered by Redux
Tags: react, javascript, 100daysofcode
Published: 2021-05-08 03:32:43

*Hey! I'm on a mission to make 100 React.js projects ending May 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-71-email-settings-redux.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-71-react-redux-mail-preferences-page)

Just an email preferences page powered by Redux.

The only major thing different about this project from yesterday's is that we conglomerated multiple reducers into one with the combineReducers() redux method. Though in this project you only see one reducer so it's less of a dramatic feature.

```JS
import mailPreferences from "./mailPreferences"
const redux = require("redux")
const {combineReducers, createStore} = redux

const rootReducer = combineReducers({
  mail: mailPreferences
})

const store = createStore(rootReducer)

store.subscribe(() => {
  console.log(store.getState())
})

export default store;
```

More Redux tomorrow- finally getting to the `react-redux` package.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
Unlearn and Re-Learn right way at 25
Tags: devjournal
Published: 2021-05-08 03:32:38

## Retrace

Turn 25 this year, lived quarter-life, a graduate, working earning Adult. I have sort of a laid-out plan for future self, a rough plan, let's say an outline maybe entrepreneur, Developer or explorer, let's see.

So I took a bit of time to reflect back, to track my present path, and maybe try to join the dots, corrections if necessary. I'm mean hey as if everything goes as planned. 🤣

Little did I realize, I wasn't going as planned. In fact, It hasn't been correct since school. To be honest, all these years whatever I have learned was only of book knowledge, learning what was only enough to pass the exam. 😑

I wouldn't say all is lost, that was how things were back then. Get good marks in 10th go to nice college for High school, get good marks there get good college for Under Grad, then a job, life is settled.😅

Even now this would be fine to take up and normal. End of story. If that's what I want or you as a reader want, stop here. I/you are settled.🎉

## Connecting Dots — Future

What has already happened can't be changed, but what you can do is go about going forward. I realized to be the best at what you are or want to be, you should have clarity, in-depth conceptual understanding.

So, at 25 I would want myself to learn with more clarity and conceptual. Starting with change with how to learn anything that's new or what you already know, but not in-depth.

Upon a bit of research, I came across this Course on Coursera, [Learning How to Learn](https://www.coursera.org/learn/learning-how-to-learn) — **Barbara Oakley** and **Dr. Terrence Sejnowski** as the name suggests it teaches you from scratch to learn concepts in depth using focused learning, chunking, and other neurological concepts which will help you to learn and remember these concepts better and be an expert.

## Closure

I would want to implement this new change in the way I learn new things or things I already know to learn better.

If you have any other way or techniques which you know or come across please let me know in the comments below.

***Follow for more short write-ups and clap if you like this. See you soon with a follow-up of my progress.***
I've made a Spotify clone with React, Redux, and Typescript
Tags: react, redux, typescript, spotify
Published: 2021-05-08 03:29:51

Hello everyone, I'm sharing this Spotify Clone that I made with React, Redux, and Typescript. If you wanna head straight to the live version you can click on this link: [http://spotifyclooone.netlify.app/](http://spotifyclooone.netlify.app/).

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

If you wanna check the source code head to my Github by clicking here [https://github.com/diogo405/spotify-clone](https://github.com/diogo405/spotify-clone).

## About the project
The project is actually very simple, it's just two pages: Home and Album that pull data from a fake API. 

## Redux & Typescript
I'm not gonna lie if you are new to Typescript your chances to hate it gonna be 100%. Typing almost everything can be very painful for the first time. After a few components, you get used to it and sometimes it saves your ass. My advice is if you wanna taste Typescript start with a Javascript project, not React.

Redux is another thing that's not very pleasant (I've always been a fan of Recoil - simple and easy). They are trying to reduce the boilerplate with the toolkit - and it's better now - but still, there's a lot to be coded to get/set your state (especially with Typescript).

## Fake API
The fake API is a set of async functions that return JSON files in a random interval of 0 to 3 secs. While the data is not ready, I'm using some skeletons as placeholders so the layout doesn't jump too much.

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

## Conclusion
Experimenting with React and Typescript is very interesting as you learn a new way to develop with Javascript and familiarise yourself with a technology that I believe is gonna stay.
6 small Career advice for CodeNewbies
Tags: codenewbie, beginners, career, programming
Published: 2021-05-08 03:16:19

These are my main 6 advices for any individual who is figuring out how to code or simply beginning in an engineer career. I trust you track down these valuable and in the event that you have anything to add leave it in the remarks beneath😉. 

---

If you're interested in learning to code  or if you're just starting out in a coding career then these tips will help you improve your code and problem solving skills. 

### Have a clean goal in mind

If your doing a tutorial make sure you have a clear goal in mind of what you will by the end of it and more importantly why you are learning it. This will help keep you focused and make sure you are only spending time on useful learning. 

### Projects

The best wat to learn is to apply the knowledge by creating mini projects. This will help you retain the knowledge as well as creating a portfolio of work you can refer to. Keep the projects small and simple, so they don't take too long to complete. 

### Make and refractor

While thinking of the best way to solve a problem it's easy to over complicate it. Use what you know to create a solution that works first, once it works you can refractor to make improvements. This will save your time and you will start to see patterns in your refactoring and learn from it. 

### Learn as you go

Don't set out to learn everything -- learn the things you need to complete projects or tutorials. This way your knowledge will accumulate and get more complex over time rather than trying to understand everything within a few weeks. 

### Write pseudo code

Pseudo code is when you write out what the code is doing in normal English. It can be very useful to step away from the code and look at it as a logical puzzle first. Once you figure out the logic then you can translate it to code. 

### Deconstruct other websites

Find something on a website you would like to recreate and try to deconstruct how they did it by looking at the source code. This can be really beneficial since the act of trying to figure it out will help you remember it better and you might learn something you didn't expect on the way. 

---

Hopefully you found this list useful and it will help you improve your coding skills. If you have any other tips add them in the comments.
Starting with Eleventy
Tags: todayilearned, webdev, eleventy
Published: 2021-05-08 03:08:13

I decided to create a static website to quickly access a list of instructions that I used most frequently to clean my home espresso machine. This was a good idea to improve my understanding of using a static site generator, templates, layouts, and data files.

For this project, I utilized Eleventy but there are lots of great options out there. I chose Eleventy because it’s highly configurable, it has 10 templating languages available and I was looking to publish truly static content with something that can be easy to get up and running, although I’m still a novice when it comes to Eleventy and static sites generators 👩‍💻. You can start working with Eleventy if you have some competency in HTML, CSS, and JavaScript. You don’t need to be an experienced developer.

###### Learning Process & Resources

- First I started reading about Static site generators to have a better understanding of the differences between dynamic and static sites. For this topic, I recommend [this](https://tatianamac.com/posts/beginner-eleventy-tutorial-parti/) resource in particular from Tatiana Mac.

- Then I continue working on creating my first basic Eleventy website following the tutorial of [11tyRocks!](https://11ty.rocks/posts/create-your-first-basic-11ty-website/) created by Stephanie Eckles.

- I also looked into the [official documentation] (https://www.11ty.dev/) to learn more about Collections and Layout Chaining.

###### Result
[Website](https://cleanespressomachine.netlify.app/) 
[Repository] (https://github.com/nicoleortizga/BES878-breville)

###### Next Steps

My next project will be a simple landing page using Eleventy and Tailwind CSS with a design and descriptions provided by Frontend Mentor.
Project Universe's pitch deck
Tags: gamedev, investors, crowdfunding, humanity
Published: 2021-05-08 02:39:13

Iteration 1 of Project Universe's pitch is officially complete, let me know what you think!

https://docs.google.com/presentation/d/e/2PACX-1vTEEH1ZsrdcDDUQCOm0bIGRoumdH9W0enJEx3SKRcOEQzOVK8PuGcJTQZZsstNspVvC_rwLOcO0L77P/pub?start=false&loop=false&delayms=3000

Seeking game dev investors, venture capitalists, angels, etc. wanting to help prepare Humanity for our civilization's imminent multiplanet future!
MERN TEST:
Published: 2021-05-08 02:25:34



Imagine, a simple product-comparison MERN app that uses React 16, Redux, latest Node, Mongo, and Mongoose. The index.js requires a product-comparison.js that uses 3 product ids as get params, eg

http://product-comparison.com?products[]=p1001&products[]=p22&products[]=p193

 

Assume there is a class component in product-comparison.js that compares products. Answer the following questions:

We will call ___________ of Redux in ___________ life-cycle method in product-comparison.js.

___________ of Redux will make an API call and post the following payload (provide  sample json object that you will send) ___________ .

API will use this payload and make ___________ Mongoose query.

API will return data (provide sample json object that you will return) ___________ .

_________ will receive this data from API and will dispatch it to _____________ of Redux.

___________ of Redux will update _________ .

___________ in product-comparion. js will update ___________ .

The component in product-comparison.js will get re-rendered to show product details.
How To Choose Which JavaScript Libraries To Use (Part 3)
Tags: webdev, javascript
Published: 2021-05-08 02:04:01

**Choosing the right tools is one of the most important decisions that you'll have to make when you start a new JavaScript project.**  In this four-article series, I'll give you my tips and tactics so you can choose the best libraries for your JS project.

## Documentation Is King

**If you choose a library that you've never used yet. You'll definitely need the documentation.** That's why the quality of the docs is a major factor when choosing libraries for your project.

The ideal documentation should be **easy to read and navigate.** You should be able to learn how the library works, when to use it, and when not to use it. If it includes comparisons with other similar libraries, even better.

But you should also be able to **look up a specific method or object quickly.** If you're already working with the library and you don't know how to do a specific task, the docs should let you find out how to use it.

The ideal docs should be up-to-date and they shouldn't be misleading. The problem is, you don't know if the docs are updated until it's too late. You'll notice it once you added it to your project and find out that it doesn't work as the docs said.

The solution to this? **Google what people say about the docs.** Whether they are good or bad, they'll post it online! Short comments like "The docs are great!" can be useful, but it's better if you can find more detailed opinions with the reasoning behind them.

An example of a detailed opinion: "The step by step tutorials are the main reason why the docs are great because it provides a way for the community to centralise its information."

In the next and last article of this, you'll learn about FOBO, the fear of a better option. And how to handle it.

---

p.s. Did you like what you've read? Every week I send an email with free tips and insights to become a better JavaScript dev. If you're interested, [click here to subscribe](https://nicozerpa.com/newsletter/).
Basic Authentication
Published: 2021-05-08 01:55:31

When using endpoint API, we are most time required to authenticate the request before it can be process.
<br>
 In this post I'll show you how to set basic authentication on your php script.

<li>You'll have to declare variable <b> $basic_1 </b> and assign the value of the function <b> base64_encode("username: your_username") </b> to the variable on your php code. 
<br><br>
<i>
 The username and it value will be given from the endpoint website.
</i><br>
</li>
<code>
<?php
 $basic_1 = base64_encode("username: your_username");
?>
</code>
 You can now use basic authentication on your php code once you call the variable name like the example below



<code>
<?php
 $basic_1 = base64_encode("username: your_username");
$curl = curl_init();

 curl_setopt_array($curl, array(
                       CURLOPT_URL => "https://www.endpoint_url.com/api/v1/auth/login",
                      CURLOPT_RETURNTRANSFER => true,
                      CURLOPT_ENCODING => "",
                       CURLOPT_MAXREDIRS => 10,
                       CURLOPT_TIMEOUT => 0,
                       CURLOPT_FOLLOWLOCATION => true,
                      CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                      CURLOPT_CUSTOMREQUEST => "POST",
                      CURLOPT_POSTFIELDS =>"{\n  \"amount\": 100.00}",
                      CURLOPT_HTTPHEADER => array(
                        "Authorization: Basic ".$basic_1,
                         "Content-Type: application/json"
                       ),
                     ));

?>
</code>
<h3>Conclusion</h3>
This should give a success response
Consistência de estilo entre editores/IDEs
Tags: editor, code, tips
Published: 2021-05-08 01:52:58

Pessoal, hoje vou trazer uma configuração para você colocar no seu repositório para determinar algumad regras que os editores de código/IDEs fiquem padronizados.

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

Você já deve passado pela situação de commitar seu código e no momento de olhar o diff no git, você commitou diversos espaços no arquivo, sendo que você alterou apenas uma linha.

Isso acontece por que seu editor de código (vscode, atom, sublime text etc) possui configurações diferentes de indentação.

Para resolver esse tipo de problema você pode utilizar um arquivo chamado [.editorconfig](https://editorconfig.org). Neste arquivo você vai definir regras como indentação (espacos ou tabs) e charset padrão.

Veja abaixo um exemplo de arquivo com as propriedades disponíveis.

```
# define que a pasta onde o arquivo está, é a raiz do projeto
root = true

# Padrão de de nova linha nk Unix
[*]
end_of_line = lf
insert_final_newline = true

# Charset padrão
[*.{js,py}]
charset = utf-8

# Indentação com 4 espaços
Você pode escolher entre tab ou space
[*.py]
indent_style = space
indent_size = 4

# sobrepor configuração para um diretório específico.
[lib/**.js]
indent_style = space
indent_size = 2
```

Bora implementar esse arquivo nos nossos projetos. 

---

Obrigado pela leitura! Espero que possa ter ajudado. 🚀
What I've learned today - 5 - Using Golang channels as async await
Tags: go, programming, codequality, beginners
Published: 2021-05-08 01:15:04

For people accustomed to using Javascript, they have certainly used or heard about async / await, it is a feature of the language that allows working with asynchronous programming.

Golang has channels and goroutines, allowing this to be used very smoothly, however, people who have just come to the language may not know how to do it, to have a base, I prepared an example that can help to understand.

We will use the public pokeapi api.

## How it is done in Javascript

```jsx
const awaitTask = async () => {
    let response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto');

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response
  }

awaitTask()
    .then(r => r.json())
    .then(r => console.log(r))
```

## How we do it in Golang

```go
package main

import (
	"fmt"
	"io/ioutil"
	"log"
	"net/http"
)

func awaitTask() <-chan string {
	fmt.Println("Starting Task...")

	c := make(chan string)

	go func() {
		resp, err := http.Get("https://pokeapi.co/api/v2/pokemon/ditto")
		if err != nil {
			log.Fatalln(err)
		}

		body, err := ioutil.ReadAll(resp.Body)
		if err != nil {
			log.Fatalln(err)
		}

		c <- string(body)

		fmt.Println("...Done!")
	}()

	return c
}

func main() {
	value := <-awaitTask()

	fmt.Println(value)
}
```

How to make:

- Set the return type to be a channel.
- Create a channel to return a value.
- Add a go func for asynchronous execution.
- Within the function, assign the value to the channel.
- At the end of the function, indicate the return of the channel with the value.
- In the main function, assign the return of the channel to a variable.

I appreciate everyone who has read through here, if you guys have anything to add, please leave a comment.