teleren/devto huggingface dataset:
🧱🧱🧱 object destructuring in JS: setting default values
Tags: webdev, javascript, beginners, tutorial
Published: 2020-09-27 23:15:26

Want to get better at Web Development 🚀🚀🚀? Subscribe to my weekly newsletter at **[https://codesnacks.net/subscribe/](https://codesnacks.net/subscribe/)**

---


Learn how to set default values when destructuring objects in JavaScript.

Let's briefly see again how destructuring works: 
```js
const pastry = {
  name: "waffle"
};

const { name } = pastry;
console.log(name); // waffle
```

Let's see what happens when we try to access a property of the `pastry` object that doesn't exist:

```js
const pastry = {
  name: "waffle"
};

const { sweetness } = pastry;
console.log(sweetness); // undefined
```

The destructuring mechanism lets us set a default value in the case when the property is undefined.

```js
const { sweetness = 70 } = pastry;
console.log(sweetness); // 70
```

The default is only set if the property is actually `undefined`. So it will not set the default for other nullish values like `false`, `null`, or `0`.

You can even combine defaults and renaming. Let's briefly see how renaming works.

```js
const pastry = {
  name: "waffle",
  tastiness: 100,
};

// let's get the value of tastiness and store it in deliciousness
const { tastiness: deliciousness } = pastry;
console.log(deliciousness); // 100

// and now let's combine renaming and defaults

// tastiness is set, so no default will be used
const { tastiness: palatability = 75 } = pastry;
console.log(palatability); // 100

// sweetness is undefined; the default will be used
const { sweetnewss: sweet = 50 } = pastry;
console.log(sweet); // 50
```

---

Want to get better at Web Development?
[🚀🚀🚀subscribe to the Tutorial Tuesday ✉️newsletter](https://codesnacks.net/subscribe/)
Well. Episode 0.1 done. 0.2 starts this week. 
Tags: opensource
Published: 2020-09-27 23:11:34

As you can see that this blog post is similar to the one I posted a few days ago. Worry not, this post is solely on how I came up with the "inside" idea for my latest CLI, nlinks. 

First off, opensource. I really wanted to work anything related to opensource for a long time. But couldn't because I was lacking in programming skills. Now, I am very far ahead of what I was before. I now know how to interact with other developers, program web apps, work with databases, etc. I don't plan on stopping anytime soon though, so please bear with my daily blog posts as you guys will see it very often. Anyways back to the main part.

When I first got the documentation on what to make, my mind started to fill up with tons of ideas. I was very excited as it was my first ever open source project. I instantly started making notes on what to add and what programming language to use. I had many options to pick from, but I went with a language that's very common and powerful these days, JavaScript. The reason behind JavaScript was, it was the first-ever language I learned when I was in grade 8, and 16 years old. That's 5 years ago, and my love for JavaScript did not fade away, So a no brainer move from me there. 

I went ahead with JavaScript and started my journey with this particular project which will greatly help me in learning more about JS and hone my skills on it. I started implementing lots of random libraries to make myself familiar and I found a very good library named 'Linkinator', this library helps you with check the broken link provided and give you a status code. I had to implement it in a way that it can read from all types of files. The program looks for a link in the file, doesn't matter if there are random characters before or after the link, it will just pick the link and print out the result. There were lots of options to implement on my release 0.1. I implemented a few of them, but the one I liked the most was different colors for different results. This cleared a lot of confusion with very few details.

Completing and uploading the release 0.1 to the world was exciting. I had a few people come over to my code and issue some problems. This helped me understand more about the specific part that was called out. I m really looking for to release 0.2 because we will be implementing lots of new pieces of stuff and do some work with pull requests. Oh, Hacktober is almost here, I am really looking forward to seeing what Hacktober has in the bags. I am fully prepared and ready to keep you guys updated every step. 

Thank you and happy programming.
Abstract Factory Pattern
Tags: pattern, creational, designpatterns, java
Published: 2020-09-27 22:34:14

Provides an interface for creating families of related or dependent objects without specifying their concrete classes.

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

#Participants#
* AbstractFactory: declares an interface for operations that create abstract products.
* ConcreteFactory: implements the operations to create concrete product objects.
* AbstractProduct: declares an interface for a type of product object.
* Product: defines a product object to be created by the corresponding concrete factory. Implements the AbstractProduct interface.
* Client: uses interfaces declared by AbstractFactory and AbstractProduct classes.

#Code#
```java
public class Main {

	public static void main(String[] args) {
		// Abstract factory #1
		AbstractFactory factory1 = new ConcreteFactory1();
		Client client1 = new Client(factory1);
		client1.run();

		// Abstract factory #2
		AbstractFactory factory2 = new ConcreteFactory2();
		Client client2 = new Client(factory2);
		client2.run();
	}
}

public interface AbstractFactory {

	AbstractProductA createProductA();

	AbstractProductB createProductB();

}

public class ConcreteFactory1 implements AbstractFactory {

	@Override
	public AbstractProductA createProductA() {
		return new ProductA1();
	}

	@Override
	public AbstractProductB createProductB() {
		return new ProductB1();
	}

}

public class ConcreteFactory2 implements AbstractFactory {

	@Override
	public AbstractProductA createProductA() {
		return new ProductA2();
	}

	@Override
	public AbstractProductB createProductB() {
		return new ProductB2();
	}

}

public interface AbstractProductA {

}

public interface AbstractProductB {
	void interact(AbstractProductA a);
}

public class ProductA1 implements AbstractProductA {

}

public class ProductB1 implements AbstractProductB {

	@Override
	public void interact(AbstractProductA a) {
		System.out.println(this.getClass().getSimpleName() + " interacts with " + a.getClass().getSimpleName());
	}

}

public class ProductA2 implements AbstractProductA {

}

public class ProductB2 implements AbstractProductB {

	@Override
	public void interact(AbstractProductA a) {
		System.out.println(this.getClass().getSimpleName() + " interacts with " + a.getClass().getSimpleName());
	}

}

public class Client {

	private AbstractProductA abstractProductA;
	private AbstractProductB abstractProductB;

	public Client(AbstractFactory factory) {
		abstractProductB = factory.createProductB();
		abstractProductA = factory.createProductA();
	}

	public void run() {
		abstractProductB.interact(abstractProductA);
	}
}
```
#Output#
```
ProductB1 interacts with ProductA1
ProductB2 interacts with ProductA2
```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
🙄 I'm dropping my side project - here's why.
Tags: startup, html, css
Published: 2020-09-27 22:23:44

I've been working on my side project **buildfaster.co** for the past few months.

But it's time to drop it. (temporarily 🙄)

My original goal with it was to make money and start a business. However, I didn't have a super great idea that was unique and scalable to start with and didn't focus on growing the idea.

## What do I want to try? 😄

So I for the next few months I'm going to pursue some other options such as:

- ReactJS and NodeJS 🧠
- Open Source 👨‍💻
- Blogging ✍
- Freelancing 🧑

I've been wanting to make an open-source CLI for web developers, learn React, and try blogging for fun. 😀

---

It's been a great journey.

Thanks for your support! 🙏

![Thank you meme](https://i.kym-cdn.com/photos/images/original/001/319/292/9bb)
I'm ready for windows 10, here is my debloat script
Tags: windows
Published: 2020-09-27 22:12:24

---
title: I'm ready for windows 10, here is my debloat script
published: true
description: I will look into upgrading to windows 10, going trough my preferences and show my debloat script. I want a Windows 10 system ready for production work and removing unused functionality and visual effects are key.
tags: windows
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4nl0x14od3yxhk5y408l.jpg
---

{% youtube EfrT_Bvgles %}

I will look into upgrading to windows 10, going trough my preferences and show my debloat script. I want a Windows 10 system ready for production work and removing unused functionality and visual effects are key.
Newbie Coder
Published: 2020-09-27 21:40:41

I recently enrolled for GADS( Google Africa Developer Scholarship) program with Andela

Unfortunately, I did not make it the project phase. However much I tried, I did luck the knowledge and confidence especially since am not got with JS. 

Since then I have made up my mind to reinforce my current knowledge in HTML/CSS to build confidence prior to moving on JS. 

I did feel helpless and I do not want to get stuck anymore. I thus need some advice on how to learn and grow as a web developer. 

Currently I have got some good knowledge about HTML/CSS and would like some practice projects to hone my skills too. 

Thanks
Setting up TailwindCSS with SASS in Laravel
Tags: laravel, saas, tailwindcss
Published: 2020-09-27 21:26:38

## Start

*Before beginning, make sure you have [Composer](https://getcomposer.org/) and [npm](https://www.npmjs.com/get-npm) installed.*

First, [create a Laravel project](https://laravel.com/docs/8.x/installation#installing-laravel).

## Install dependencies

Next, **install Laravel's npm dependencies** by running the following commands:
```
npm install
npm install tailwindcss
```
Sass comes with Laravel, so you don't need to install it manually.

### tailwind.config.js

You may want to create a `tailwind.config.js` file by running:
```
npx tailwindcss init
```
in your root folder.

## webpack.mix.js

Inside `webpack.mix.js`, require `tailwindcss`:
```
const tailwindcss = require('tailwindcss');
```

Update your code to read as such:
```
mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
```
where `app.scss` is the name of your main SCSS file.  

For each extra SCSS file you have, add another snippet of code.  Example:
```
mix.sass('resources/sass/app.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
    .sass('resources/sass/app2.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ],
    })
```

## Previewing Changes

To preview changes to your SCSS files as soon as you make them, run `npm run watch` as you edit.  Every time a SCSS file listed in `webpack.config.js` is updated, your files will be built again.  Make sure to disable caching in your browser first, or the newly built files will not be loaded, and the browser will continue to use your old files.

-----

That's it!  Now you're all set.  :smile:
Maintain ratio on elements with unknown heights and contents
Tags: codepen, css, html, webdev
Published: 2020-09-27 21:05:08

<p>Maintain the aspect ratio on HTML elements with unknown heights and contents using SCSS <a href="https://codepen.io/mixins" target="_blank">@mixins</a> and CSS Custom Properties.</p>

{% codepen https://codepen.io/gsarig/pen/xxVzzmY %}
Spring Configuration
Tags: spring, java, dependencyinjection, bean
Published: 2020-09-27 20:54:59

Spring Configuration annotation indicates that the class has @Bean definition methods. 
Spring @Bean Annotation is applied on a method to specify that it returns a bean to be managed by the Spring context.
```java
@Configuration
public class ApplicationConfig {
  @Bean
  public DataSource dataSource() {
    return new DataSource();
  }
}
```
Spring will create as many beans as we define in the @Configuration classes. @Configuration classes are beans too.
```java
public class MySpringApp {
  public static void main(String[] args) {
    // Create the application from the configuration
    ApplicationContext ctx = SpringApplication.run(ApplicationConfig.class);

    // Look up the application service interface
    // Way 1: Casting
    DataSource ds1 = (DataSource) ctx.getBean("dataSource");
    // Way 2: Use typed method
    DataSource ds2 = ctx.getBean("dataSource", DataSource.class);
    // Way 3: Without been id if type is unique
    DataSource ds3 = ctx.getBean(DataSource.class);
  
    // Use the application
    ds1.close();
    ds2.close();
    ds3.close();
  }
}
```
#Creating an Application Context from Multiple Files#
```java
@Configuration
@Import({ApplicationConfig.class, WebConfig.class})
public class InfraetructureConfig {
  @Bean
  public DataSource dataSource() {
    return new DataSource();
  }
}
```
Beware of duplicate beans. In the previous code, if ApplicationConfig.class and WebConfig.class have the same bean id you get the bean from WebConfig because it is the last bean. To avoid that you can use the @Order annotation.
```java
@Configuration
@Order(1)
public class ApplicationConfig {
  @Bean
  public String example(){
    return new String("example");
  }
}
```
#Bean Scope#
The default scope is singleton
```java
DataSource ds1 = (DataSource) ctx.getBean("dataSource");
DataSource ds2 = (DataSource) ctx.getBean("dataSource");
assert ds1 == ds2; // True - Same object
```
Prototype Scope: a new instance is created every time the bean is referenced.
```java
@Bean
@Scope("prototype")
public DataSource dataSource() {
  return new DataSource();
}

DataSource ds1 = (DataSource) ctx.getBean("dataSource");
DataSource ds2 = (DataSource) ctx.getBean("dataSource");
assert ds1 != ds2; // True - Diferent objects
```
Other scopes:
* session
* request
* application
* global
* thread
* websocket
* refresh
* Custom scopes
Common SQL Injections to Watch Out For
Tags: sqlinjection, sql, php, sqlhack
Published: 2020-09-27 20:46:40

#**What is an "Injection"?**

Before we start, we need to know what SQL injection(SQLi) is. SQLi is a web security vulnerability that allows an attacker to interfere with the queries that an application makes to its database. Most commonly it gives these attackers access to information they are not supposed to have, for example, a password. Sometimes this allows attackers to even interfere with the server to perform a DDoS attack. I will briefly write about three types of attacks which include: Retrieving hidden data, Subverting application logic, and Retrieving data from other database tables.

#**Retrieving Hidden Data**

When retrieving hidden data from an unprotected site you can basically change the URL in order to execute an SQL command that you would not want ran through your database.
For example on a website if you are running a SELECT query for some form of data. The attacker would be able to instead run: 

SELECT * FROM `tablename` WHERE 1=1

Which would just give the attacker access to anything in the table being presented.

#**Subverting application logic**

With this method, the attackers are able to do something to a website that is unwanted. For example, being able to log into an account with only the username.

An example statement that would do this is:

SELECT * FROM users WHERE username = 'administrator'--' AND password = ''

This would return the user whose username is "administrator" and effectively just log them in with no password.
 
#**Retrieving data from other database tables.**

In cases where the results of an SQL query are returned within the application's responses, the attacker is able to manipulate that in order to make it expose data from other datasets. This is done via the UNION keyword. An attacker could use something along the lines of:

' UNION SELECT username, password FROM users--

This would display the username and password from everyone who is located in the user's category.

{% youtube tzerwbc3MSA %}



#####**LINKS**
https://www.w3schools.com/sql/sql_injection.asp
https://www.netsparker.com/blog/web-security/sql-injection-cheat-sheet/
https://portswigger.net/web-security/sql-injection
https://owasp.org/www-community/attacks/SQL_Injection
React game under 2h
Tags: react, javascript
Published: 2020-09-27 20:43:48

Yesterday I was waiting for my wife in car, and my Mac charged around: 80%. So I started discovering [react-beautiful-dnd](https://codesandbox.io/s/k260nyxq9v).
My first plan is converting that tutorial to hooks.

When I reached point to fill item list, suddenly click emoji on touch bar, and write this:

```jsx
const [items, editItems] = useState([
  {id: 0, content: '👧🏼 Girl' },
  {id: 1, content: '🥶 Cold' },
  {id: 2, content: '🧚🏼‍♀️ Faerie' },
  {id: 3, content: '🐨 Coala' },
]);
```

Which seems wrong in [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) because id need to be: **string**.

After figure out this problem, and drag and drop list is worked, my next idea - give score to item - lead to this experimental coding turn to game development.

the basic *interaction* between items seems:
```jsx
  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) return;
    const dragged = result.source.index;
    const target = result.destination.index;
    editItems(list => {
      const dif = list[dragged].score - list[target].score;      
      list[dragged].score += 10 * (dragged - target) + dif;
      list[target].score += 10 * (target - dragged) - dif;
      const [removed] = list.splice(dragged, 1);
      list.splice(target, 0, removed);
      return list;
  }
``` 

After this step, I realised, loser score asap going below zero, so if someone score going down turn to zombie.

```jsx
 {id, content: '🧟 zombie', score: 0}
```

Couple of testing show interesting result, the zombie can achieve score. So I think that is good goal for game: zombie earn name by earn score:

```jsx
  {id:'🐼', content: '🧟 of 🐼', score: 42}
```

if every one reach this state (ex-exsistence) then game is over and get the score depend on rounds!

I wrote this post to show how turn react library discovering into game prototype development. Final script is: 137 line long.

You can try by clone the repo:
[ex-exsistence repo](https://github.com/Pengeszikra/ex-exsistence)

Or play with the game:
[final result on vercel :: ex-exsistence](https://ex-exsistence.vercel.app/)
Normalization and the Different Types of Normal Form
Published: 2020-09-27 20:27:40

Hey everyone!
In this weeks post I am going to be explaining the different normal data types that are within my COVID-19 database. In last weeks video, I showcased the COVID-19 database that I had just created and explained the different commands within SQL to edit/add data to different rows and columns. With normalization, I am going to be able to clean up my database tables and make it much more efficient and less crowded with data that is not necessarily needed to get the data that is needed. 

So what is normalization? Normalization is the process of adjusting the data in a database to make it follow a certain set of criteria. There are six different normal data types, and each one builds off of the previous one. For example, in order for it to be second normal form, it must include all of the criteria from first normal form in order for it to be considered second normal form. This is the case for all six forms. So, as shown in my table of behavior, this would be considered first normal form because it meets the criteria of being uniquely identified by a primary key, in this case it is behavior_ID, the data in the table is reduced to it’s simplest form, and no groups are repeated. 
Here is my Behavior table:

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

An example of a data table that could use some cleaning up would be my Risk table. The column that could be eliminated would be the ImmunoCompromised column. The column next to it is MedicalConditions, so therefore if one fills out a particular medical condition that they have, it can be assumed that they have an increased risk of death from the disease due to the fact that it indicates they could potentially be immune-compromised. To fix this, I removed the ImmunoCompromised column using the ALTER command and decided to base whether or not you are at a higher risk of death on MedicalConditions instead. 
As you can see in the image below, I have dropped the ImmunoCompromised column from the table.

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

An example of second normal form within my database would be in the Occupation table. In order for data to be considered second normal form, it has to meet the criteria of everything from the first normal form, and it has to be data that only relates to the table’s primary key. To show this in my Occupation table, all of the data in the table depends on the Employee_ID column because the given employee ID states what your job is and whatever your job is determines the data for the rest of the columns in the table. 

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

In this weeks video, I have gone through the different types of normal forms and demonstrated the differences between them based on my own database. I also did a walkthrough of how to use the ALTER command. Hope you enjoy!
https://www.youtube.com/watch?v=8N__Ob0TDwk
IBM Data Science Capstone: Car Accident Severity Report 
Tags: nurcihantujen
Published: 2020-09-27 20:22:29

Introduction | Business Undertanding
Every year, thousands of lives are lost in traffic accidents in the world and in the United States, tens of thousands of people are injured and billions of dollars in economic loss occur. In 2015, a crash occurred in Washington every 4.5 minutes. Seattle recorded the highest number of car accidents in the state that year, at 14,508 (in second place was Tacoma with just 4,756). Although the city is taking steps to make the roadways safer for citizens, vehicle collisions are still a serious danger.  The economic costs of these crashes totaled $242 billion. Included in these losses are lost productivity, medical costs, legal and court costs, emergency service costs (EMS), insurance administration costs, congestion costs, property damage, and workplace losses.  
In this project, some recommendations will be provided on how to prevent accidents or how to take measures to prevent accidents with less damage, depending on several factors.
Stakeholders:
•	Public Development Authority of Seattle
•	Car Drivers
Data
These traffic records were collected by the SPD (Seattle Police Department) from the year 2004 to 2020. The data consists of 37 attributes and 194,673 collision records. The data set used for this project can be found here!.  
Then, I began choosing columns to use from the dataframe that I created.
Install react-navigation
Tags: reactnative, react
Published: 2020-09-27 20:16:57

hi guys

The same message is displayed when I try to install react-navigation in terminal (powershell)

"npm WARN @react-native-communitycli@4.10.1 requires a peer of react-native@^0.62.0-rc.0 but none is installed. You must install peer dependencies yourself."

my command is

npm i react-navigation react-native-gesture-handler


I also tested these commands:

npm install react-navigation
npm install react-native-gesture-handler

I get the above error every time.