teleren/devto huggingface dataset:
POO - Relacionamentos e interfaces (de objetos)
Tags: braziliandevs, oop, interface, programming
Published: 2020-07-12 14:46:11

Imagine que alguém quer ter um amigo e deseja que esse amigo seja verdadeiro. Para isso, um amigo deve se comportar de certa maneira, pois para ser um amigo ele deve fazer o seguinte:

* Confiar

Ou seja, para ser o amigo esperado, ele deve implementar a seguinte interface e fazer as seguintes ações (operações):

```php
<?php

/**
 *
 * @author Raphael da Silva
 *
 */
interface Amigo
{

    public function confiar(): void;

}
```

Agora uma pessoa mais introvertida pode implementar essa interface fazendo as ações (a.k.a operações) do seu jeito (de acordo com a sua implementação):

```php
<?php

/**
 *
 * @author Raphael da Silva
 *
 */
class PessoaIntrovertida implements Amigo
{

    public function confiar(): void
    {

        echo 'Estabelece um vínculo de confiança silenciosa.';

    }

}
```

Além da pessoa mais introvertida, uma pessoa extrovertida também pode implementar a interface e, com isso, ser um amigo também:

```php
<?php

/**
 *
 * @author Raphael da Silva
 *
 */
class PessoaExtrovertida implements Amigo
{

    public function confiar(): void
    {

        echo 'Estabelece um vínculo de confiança bem explícido.';

    }

}
```

Para a pessoa que quer o amigo que atenda a interface `Amigo` **é esperado** alguém que **se comporte dessa forma como a interface representa através de suas operações**. Segue a classe que representa a(o) quem vai ter o amigo:

```php
<?php

/**
 *
 * @author Raphael da Silva
 *
 */
class PessoaQueQuerUmAmigo
{

    public function __construct(
        private Amigo $amigo
    ){}

    public function estabelezerAmize()
    {

        $this->amigo->confiar();

    } 
```
Ter um amigo é algo que expressa uma relação de composição (e injeção de dependência), pois a classe `PessoaQueQuerUmAmigo` tem um objeto do tipo da interface `Amigo` passada como parâmetro no seu construtor.

No uso de interfaces na comunicação entre objetos **tudo gira em torno de ação, confiança e expectiva, assim como acontece nas relação humanas**.
Creating a Responsive Portfolio Website Using Pure HTML, CSS and JavaScript [PART 2]
Tags: html, css, javascript, webdev
Published: 2020-07-12 14:44:03

The first part of the portfolio tutorial was a success. If you haven't seen it yet, click [here](https://dev.to/chaoocharles/creating-a-responsive-portfolio-website-using-pure-html-css-and-javascript-part-1-3k0i) or jump into [my YouTube Channel] (https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=10).

Here is also a link to the portfolio: https://chaoocharles.netlify.app/

If you have been waiting for a part 2, I got you covered. It's now live 🚀 on my YouTube channel. I will still pin the video below. We will cover the about section, the services section and have a final touch on our side nav-bar.

(Recommend: watch till the end).

Enjoy and stay awesome always 💙

{% youtube 5MIQr4hZsB8 %}
How to start a JUnit 5 project in few minutes
Tags: junit5, maven, java
Published: 2020-07-12 14:03:30

In the next minutes you will able to create and run a project using JUnit 5

## Table of minutes
* [Minute 1](#1)
* [Minute 2](#2)
* [Minute 3](#3)
* [Minute 4](#4)
* [Minute 5](#5)

### Minute 1 <a name="1"></a>
Download the [project archetype] (https://github.com/luizgustavocosta/maven-archetype-costa-luiz) from my GitHub and follow the readme.md
If you have any doubt check the post [how-to-create-a-maven-archetype-in-5-minutes-1](https://dev.to/luizgustavocosta/how-to-create-a-maven-archetype-in-5-minutes-1jcb)

### Minute 2 <a name="2"></a>
After have the archetype and create the project as the Minute 1 <a name="1"></a> open the project using an IDE such as IntelliJ /Eclipse and let's analyze the first test in JUnit 5.

### Minute 3 <a name="3"></a>
Check the dependencies for sure. The dependencies
junit-platform-commons, junit-jupiter-api, junit-jupiter-engine, junit-jupiter-params, mockito-junit-jupiter should be in place.
![Dependencies](https://dev-to-uploads.s3.amazonaws.com/i/rmkjwsx28dxoq3g2nmet.png)

### Minute 4 <a name="4"></a>
Let see the test class
![Test class](https://dev-to-uploads.s3.amazonaws.com/i/lx52bqwszzg8xuf1ef9e.png)

### Minute 5 <a name="5"></a>
Now is time to you create more tests and make your application more reliable.

Thank you by your time and shortly I'll make available one post more complete about JUnit 5.
Integrating EmailJs with ReactJs
Tags: react, emailjs, emails
Published: 2020-07-12 13:50:29

Almost all the web applications we create, we need to send emails to users, whether it be a support email or verification one. In the below article we will go through all the steps of sending emails directly with ReactJs.
All we need is a basic knowledge of React and EmailJs account.

So developers fasten up your seat belt! Here we go !! :rocket:

**1. Creating EmailJs account**
 * Click on the link and create a free account on EmailJs
 * Select the service  you want to start with. I am using Gmail Service.
 * Connect your account and click on add service.
 * You will see Gmail service in added services .

**2. Creating mail template**
  * In your EmailJs dashboard click on Email Templates -> Create New template. Setup your template name and id.
  * You can configure the template as per your requirement.
  * You can use curly braces for the fields that will receive data from react code as shown below. I have made "To email" field dynamic.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xam4v2zljhz1ve9a2gyo.png)
Woo! Our template is set :tada:

 **3. Time for some code .. :sunglasses:**
 * Create a new React App
 * Install the EmailJs package using command 
   `$ npm install emailjs-com --save`
 * Import Email js in your App.js file
  `import * as emailjs from "emailjs-com";`
 * Grab the service Id and template id from your template-> Copy Code

![id](https://dev-to-uploads.s3.amazonaws.com/i/62g133wprtdcgk3s5hk0.png)

 * Copy your user id from Account-> API Keys -> User ID
 * Modify your App.js file 

{% gist https://gist.github.com/ektaarora3501/e28443388a71ac3d1fbc6c8086c25162 %}

 * Create the handleChange function 
  
{% gist https://gist.github.com/ektaarora3501/3f7e8b2b85fabe3001374c3afc3f9783 %}

And you are done!!!
Woo! now you can send emails directly from react . :tada:

You can find the complete code on my github repository [React-Emailjs](https://github.com/ektaarora3501/React-Emailjs)
Using MySQL Together With Go
Tags: go, sql, tutorial, video
Published: 2020-07-12 13:49:31

{% youtube VAhKkwwl1v4 %}

Code can be found [here](https://gitlab.com/dak425/golang-mysql-example)

Time to start integrating some other tools with our go programs.

I figured a good place to start would be with a SQL database, since its very common to work with one. I chose MySQL for this example, as I have a lot of background with it from my PHP days.

We don't do anything crazy here, just demonstrate how to load the driver, connect to the database, and perform simple queries and prepared statements.

Check it out and let me know what ya'll think. Any feedback is greatly appreciated.

If you liked it and want to know when I post more, be sure to [subscribe] (https://www.youtube.com/channel/UCTHij3Ac5GizLsn5yB4IX_Q?sub_confirmation=1) and thank ya'll again for your time!
สรุปบทความ Quantity Always Trumps Quality (ในมุมของ Software Development)
Published: 2020-07-12 13:49:30

---
title: สรุปบทความ Quantity Always Trumps Quality (ในมุมของ Software Development)
published: true
description: ในการพัฒนา Software การเรียนรู้เกิดจากการทำซ้ำ การลองผิดลองถูกอยู่เป็นประจำ อย่ามัวนั่งเสียเวลาคิดว่าจะทำดีหรือไม่ดี หยุดคิด แล้วลงมือทำ
tags: 
//cover_image: https://direct_url_to_image.jpg
---

จากบทความ [Quantity Always Trumps Quality](https://blog.codinghorror.com/quantity-always-trumps-quality/) เค้าบอกว่า quantity (จำนวน) เหนือกว่า quality (คุณภาพ) เคยมี อ. ลองแบ่งกลุ่มนักเรียนเป็น 2 กลุ่ม โดยกลุ่มหนึ่งจะตัดเกรดจาก quantity อีกกลุ่มตัดเกรดจาก quality ปรากฎว่า กลุ่มที่เป็น quantity ทำได้ดีกว่า และที่แปลกก็คือกลุ่ม quantity มีงานที่มี quality สูงกว่า

ในการพัฒนา Software ที่มีมัก deadline เข้ามาเอี่ยวด้วยเสมอ การที่เราเน้นจำนวนเป็นการที่เราทำซ้ำๆ ทำเยอะๆ และเราจะเรียนรู้จากตรงนั้น ถ้ามันไม่ work เราก็สร้างใหม่เรื่อยๆ จนกว่าเราจะเจอที่มัน work ดังนั้นแทนที่จะมานั่งเสียเวลาไปกับการคิดว่าจะทำดีหรือไม่ดี ให้หยุดคิดซะ แล้วลงมือทำ ซึ่งส่วนใหญ่แล้วคนที่ลงมือทำจะผลิตผลงานออกมาได้ดีกว่า (แต่ๆๆ ก็ให้คำนึงถึงเวลาที่เราลองผิดลองถูกกับเวลาที่ทำเป็นงานจริงๆ ด้วยนะ balance กันให้ดีครับ)

Jeff (ผู้เขียน) ได้ให้คำแนะนำไว้ 3 ข้อตามนี้ ลองตามไปอ่านกันดู

1. [Stop theorizing](http://www.codinghorror.com/blog/archives/000165.html).
2. [Write lots of software](http://www.codinghorror.com/blog/archives/000684.html).
3. [Learn from your mistakes](http://www.codinghorror.com/blog/archives/000300.html).

เลิกเพ้อฝันแล้วลงมือทำกัน 😉

ปล. บทความนี้พูดถึงมุมของ Software Development เท่านั้นนะ
Stop wasting your time in setting up basic things for laravel admin panels
Tags: laravel, php, productivity, beginners
Published: 2020-07-12 13:34:06

For guys out there who don't wanna waste time setting up admin templates every time when creating a new project, here I present you a basic **laravel setup** which you just have to download it and tweak it as you wish.

Note : I have used **Admin LTE** template which is a popular open source WebApp template for admin dashboards. Also uploaded the sql file named **'laravel_admin.sql'** in the root directory.

##Following are the features
1 Login	with validation

2 Admin profile
* admin details are prefilled in the admin form
* can edit the deatils with profile pic too
* jquery validations applied

3 Customer module
* listing of customers with search, pagination and sorting in datatable
* adding, updating and deletion of customers along with laravel validations

**Link**
[https://github.com/ezhurik/laravel-admin-template]

# Perform the following steps after cloning the project
* run composer install after you clone the project
* copy the .env.example to .env or simply rename it to .env or copy from another project and set your configurations and APP_KEY
* Create a symlink  for storage (run this command - php artisan storage:link)
* I have set up virtual host for this project because I prefer my urls to be '/public/' free so I would request to make one to run things smoothly.

**Login credentials**

email: **admin@gmail.com**
password : **123456789**

So whenever you wanna setup a fresh laravel project just download it, setup the database and you are ready to focus on the main logic.
Hope it will help laravel developers to some extend.
Any suggestions to improve code or anything regarding this post is highly appreciable.
Does Product/UX design interest you?
Tags: discuss
Published: 2020-07-12 13:24:23

---
title: Does Product/UX design interest you?
published: true
description: 
tags: #discuss
//cover_image: https://direct_url_to_image.jpg
---

I generally talk about Product/UX design but I'm not sure if dev.to is the right platform(I know what is it about 😅 ) So if you have any interest let me know. 

**Subjects:**
- How to make your website more usable?
- How to strategize about a product (the basics, nothing too complicated)
- How to create a successful marketing landing page?
- Tools to help you design and plan (pre-coding) ?
- etc ..
How to create a nested-list of categories in Laravel blade
Tags: php, laravel
Published: 2020-07-12 12:30:40

Its really difficult to iterate and show Parent child Categories tree or listing in Laravel, sometimes it affect websites performance, 
To solve this problem we need to use a recursive blade.
Just follow this steps to make it happen
1. First of all we need to get all the categories and childs.

To get all categories with childs, create a childs
function inside the Category model 
```
 public function childs()
    {
        return $this->hasMany(Category::class, 'parent_id', 'id');
    }
```
this function will return all categories with its childs 
then fetch categories in your controller like below code
```
$categories = Category::whereNull('parent_id')->with('childs')->get();
```
2.inside your blade 
```
@foreach($categories as $category)
  <li>
   {{{ $category->category_name }}}
   @if(count($category->childs))
   @include('category-partial ',['childs' => $category->childs])
   @endif
  </li>
@endforeach
```
3.Create category-partial.blade which we are using to loop each of the category so that we can show the category without a limit
```
<ul>
@foreach($childs as $child)
    <li>
 <a href="{{{  url('search/?category='.$child->category_name.'-'.$child->id.'&q=') }}}">{{{ $child->category_name }}}</a>
 @if(count($child->childs))
 @include('admin.managechild',['childs' => $child->childs])
 @endif
  </li>
@endforeach
</ul>
```
Brave for a better web
Published: 2020-07-12 12:29:14

Brave can automatically distribute your contributions based on how much time you spend on sites. Or, you can choose to tip sites directly, and even offer a fixed monthly tip amount. 

All of this works while keeping your browsing history private. Your funds are made available to site owners through an anonymous ledger system, so you can’t be identified based on the sites you visit and support. Over 10,000 publishers and content creators have registered to receive Brave Rewards.

Remember: these contributions are optional – browsing the web with Brave is free.
Read More: https://www.bravebrowserforpc.xyz/
Cannot install Angular CLI
Published: 2020-07-12 12:01:24

I have npm version 6.14.5, node version 12.18.2
On executing command "npm install -g @angular/cli" receive below error:
Unexpected end of JSON input while parsing near '...serify
Pls note I did uninstall/install npm and node couple of times, still no luck. Glad if any advice is provided, thanks
Daily Developer Jokes - Sunday, Jul 12, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-12 12:00:07

---
title: "Daily Developer Jokes - Sunday, Jul 12, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jul%2012%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125900b9ff4.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you do when you can't understand your husband's behavior?

___A:___ man man
 -->
Describing For loops in JavaScript
Tags: javascript, notes, beginners
Published: 2020-07-12 11:47:50

# 1. The Standard For loop
```javascript
let numbers = [10,20,30];
for(i = 0; i < a.length; i++ ){
  console.log(numbers[i]);
}
```
👉 We can use `break`, `continue`, and `return` inside of the standard `for` loop.

# 2. forEach Loop
```javascript
let numbers = [1,2,3];
numbers.forEach(function(value){
  console.log(value);
}
```
* Now, we'll get exactly as the same output as in case of the standard for-loop.

👉 We CANNOT use `break` or `continue` inside forEach loop.

👉 We can use the `return` keyword (forEach is anyway a function so it doesn't make any difference to use it)

# 3. For-in Loop
👉 It is used for looping over **object** properties.
* What happens if we loop through an array? 
```javascript
// Looping through Objects
let obj = {a:10, b:20, c:30};
for(let prop in obj){
console.log(prop) //0
console.log(typeof(prop)) //string
}

//Looping through an array
let numbers = [10,20,30];
for(let index in numbers){
console.log(index) //0
console.log(typeof(index)) // string❗
}
```
# 4. For-Of Loop
👉 Use for-of to loop over itterables like arrays.
```javascript
let numbers = [10,20,30];
for(let index of numbers){
console.log(index) //0
console.log(typeof(index)) // number❗
}
```

# **Summary**
1. 📝 The main difference between `for` and `forEach` is the use of `break`, `continue`, and  `return` 
2. 📝 The main difference between `for-in` and `for-of` is the former is used to iterate over **Object properties** and the latter is for **iterables like arrays**.
State & Lifecycle
Tags: react, webdev, state, lifecycle
Published: 2020-07-12 11:16:11

The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases: Mounting, Updating, and Unmounting.

Coming to the State,it contains data specific to a component which might change over time.The state is user-defined , and it should be a plain _JS Object_.

--

_Here's example showing how to use state :_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u7o7amyjz16xhmu3eosg.JPG)

**Using State Correctly :**

+ _Do not modify state directly_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l4xezf75oudpno9o2l7y.JPG)

###### the only place you can directly assign **this.state** is the constructor.

+ _State updates may be asynchronous_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8wz7uk1bhkfqnwlyed46.JPG)

###### setState() is an asynchronous function, so if you want to view/assign the updated value,you should do that inside a callback function to be sure that the updated value of the state is used.
---
When a component is rendered to the DOM for the first time, it is known as **mounting**.
_AND_ when the DOM produced by the component is removed,it is called **unmounting**.

We can declare special methods, called _lifecycle methods_,on component Class to run some code when a component mounts and unmounts.

---
The **componentDidMount()** method runs after the component has been rendered to the DOM :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/11silgvdc7tz5s85ahe8.JPG)
###### In this example, when the compenent color is rendered, the componentDidMount() method fires and changes the state after 3 sec.
###### The output changes from "Favourite color is red " to "Favourite color is yellow".
---
Similarly,the componentWillUnmount() method is called just before the component is removed from the DOM.
Thanks for Reading !
Road to Genius: advanced #47
Tags: javascript, beginners, computerscience, codenewbie
Published: 2020-07-12 11:09:24

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function backtrack(list, tempList, nums, remain, start) {
  if (remain < 0)
    return;
  else if (remain === 0)
    return list.push([...tempList]);
  for (let i = start; i < 💎.length; i++) {
    tempList.push(nums[i]);
    backtrack(list, tempList, nums, 😈 - nums[i], i);
    tempList.pop();
  }
}
function combS(arr, T) {
  const list = [];
  backtrack(list, [], arr.sort((a, b) => a - b), T, 0);
  return list;
}
let A = combS([2, 3, 4], 6);
A = A.length;

// 💎 = ? (identifier)
// 😈 = ? (identifier)
// such that A = 3 (number)
```

I remember this code, we have encountered this on episode 37 (https://dev.to/codr/road-to-genius-advanced-37-104d). So we don't have to reinvent the wheel today.

We've learned from the past that this backtrack algorithm is making an array of all possible combinations from the array to reach some target number. In this particular case there are 3 (`A=3`) possible ways to produce 6 with numbers 2, 3 and 4:
```
6 = 2 + 2 + 2
6 = 3 + 3
6 = 4 + 2
```

The bug 💎 should be `nums` because that's what we are iterating.
And 😈 should be `remain` because at each recursive step it is subtracting a number from the remainder.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/iv42jv31688gkvxzoaxb.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Can you check for prime numbers? - Primality Test
Tags: computerscience, codenewbie, javascript
Published: 2020-07-12 11:08:29

This is one of the simple programs most developers really don't know how to go about. Just imagine getting such this question wrong at a coding interview while you aced all the language specific questions. That will be so sad.

In this post we'll look at how to check whether a value is prime or not using a primality test known as **TRIAL DIVISION**.

## LITTLE EXPLANATION
Now, let's look at how one might go about this problem. Since a prime number is a number with just two divisors (1 and the number itself), a way to solve this problem is to try dividing the number by values between 1 and itself. If none divides perfectly then it's a prime number else it isn't. Hence, the code below
```js
function isPrime(n){
  for(let i = 2; i < n; i++){
    if(n % i == 0) return false;
  }
  return true;
}
```

But guess what? the downside of this code is when it actually finds a prime number. Because to find a prime number the for loop has to run n-2 times. So let's say you are to check whether **13441** is a prime number, then that mean we need **13439** iterations which is too much and what if we are to check for 10<sup>6</sup> numbers? that's lot's of time and computing power. **Hence, we have a nice way of cutting off some of the work.**

## TRIAL DIVISION
With this method, we use a simple mathematical analysis to cut off most of the work that is to be done.

The idea is that: For any composite number(a composite number is the opposite of a prime number) the first divisor apart from 1 can be found between 1 and root of n (where n is the number to be tested).
eg. checking whether 100 is prime.
numbers between 1 and root(100) are 2,3,4,5,6,7,8,9
and fortunately 2 is a divisor of 100. 
This method reduces the number of iterations exponentially making our code look like below
```js
function isPrime(n){
  for(let i = 2; i*i <= n; i++){ // difference on this line i*i
    if(n % i == 0) return false;
  }
  return true;
}
```
So the logic is to iterate from 2 to root(n). 
hence the condition **i<=root(n)**, 
squaring both sides will give the condition **i*i<=n**

And with this, to check whether **13441** is prime we only iterate **115** times instead of **13439** times.

Hope you learnt something today. Thanks