teleren/devto huggingface dataset:
Updating React Form Layout, and Simple CSS Spacing Solution
Tags: react, codenewbie, javascript, css
Published: 2020-09-28 01:51:07

There are a lot of features I want to add to my final portfolio project, "MOODetails".  The purpose of this app is to take note of prompts to certain moods, and to differentiate between those that are and are not within your control. 

##Updating Form Layout

Before working on the additional features, I really wanted to update how the form looked because I found it too bland:

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

Here is what the original code looked like for the form portion of the above image:

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

I decided to put the form into React-Bootstrap's `Card` component, as well as `Col` (columns).  Things were beginning to get jumbled with the additions, so I modified the spacing as well for better readability.  Now, the code looks like this:

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

Though the code looks a bit longer and taking up more lines, I still think this looks much cleaner. 

##Spacing

The next thing I want to fix here is the spacing between the mood image and the form:

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

So originally, I was using break (`<br>`) tags to deal with the spacing issue, but this definitely made my code look clunky:

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

To solve this problem, I simply added class names to the components where I wanted to add a padding to the bottom so that I could manipulate them in the CSS file:

*Mood.js*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1fi3mnvuq17zkimm3nmh.png)

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

Aaaaaaand *voila*!  I've got the appropriate spacing between mood name, mood image, and form:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3his1usculzwvhc9eki5.jpg)

##Helpful Links

[React Bootstrap documentation on forms](https://react-bootstrap.github.io/components/forms/)

[Use Carbon to embed code snippets in a blog](https://carbon.now.sh/)
*There were some inconsistencies in the coloring here, but it still looks pretty nice!*
Django and SQL; What is Django?
Published: 2020-09-28 01:30:55

# Background
I have a fair amount of experience with [Django](https://www.djangoproject.com), which is a Python based web development framework. The beauty of Django is the abstraction within creating fully functional websites. Developers have access to Python libraries as normal, but Django also makes working with databases easy. Models are database tables, and those are easy to create. Adding data is three lines of code. In total, developers only need to edit four files to send data to a database. Django also comes with a built in admin page to view data graphically. 

## Experience
I will go talk about the technical aspect of this project in the video later on. For now, I am here to tell you about my experience working with Django. I created a simple form that sends data to a model, then the data is viewed in the admin page. This is my third site built with Django, so I have a fair bit of experience with the framework. It isn't much, but it is live at [sparkedscience.com](sparkedscience.com). Django is easy to learn with the tutorial on their website, so creating the site was not an issue. To be honest, most of the code needed to work with databases needs to be referenced. I found myself constantly using the tutorial and documentation to get the right fields for my model to create database tables. To send data to the database, you have to have a form. Django requires some added lines of code for security reasons. There is a line to make sure the form is valid and completely filled out. Another line in the HTML file prevents cross site attacks with a csrf token. There is yet another part in the code to ensure the user is POSTing data, instead of GETting data. This extrapolation of not having to custom build these security features is an amazing bonus to using Django. One downside is that it is difficult to use in production. Many developers do not use Django as a development framework as it is newer. I have been trying to get a website into production with Django for months on Raspberry Pis with no luck. Reclaim Hosting does support Django with an easy [five minute tutorial](https://blog.umersoftwares.com/2019/09/django-shared-hosting.html) that I found from their forums. Django comes with an admin page already created so developers can manage their databases while the site is up. Overall, I enjoy working with Django as it extrapolates many painful aspects of web development and comes with a graphical admin page.

## Technical Database Video
[![Youtube Video](http://img.youtube.com/vi/UnQJjXNlkQI/0.jpg)](http://www.youtube.com/watch?v=UnQJjXNlkQI)
Bootcamp Java Developer Day #8
Tags: java, bootcamp
Published: 2020-09-28 01:19:47

#### Day 8:

Done the first challenges + Started another course. This one is focused on Java Collections and Streams. 

#### 7) Completed: Introduction to Java Programming

This part was composed by three challenges level super easy. I aced them fast.


#### 8) Started: Implementing Collections and Streams with Java

The first topic is List and I used these modules:
- java.util.ArrayList;
- java.util.Collections;
- java.util.Iterator;
- java.util.List;
Styling for GitHub README
Tags: beginners, css, github, html
Published: 2020-09-28 01:04:41

# Styling Tips for README

Markdown has limited styling, but you can leverage some HTML for a better viewing experience on a Github repository.

## Line Break

#### Markdown

![3 empty space](https://dev-to-uploads.s3.amazonaws.com/i/0r23qkb33xvze1za4iby.png)

```
3 Empty Spaces`   `   
Second line
```

#### HTML

![</br>](https://dev-to-uploads.s3.amazonaws.com/i/3n7d7fyn120kif7068z5.png)

```
HTML</br>Second Line
```

## Allign

##### Markdown

![Table markdown](https://dev-to-uploads.s3.amazonaws.com/i/5ai7as6hlgitrgdizoik.png)

```
| Default | <- Left <- | -> Center <- | -> Right -> |
| ------- | :--------- | :----------: | ----------: |
| Text    | Left       | Center       | Right       |
```

##### HTML

![p left](https://dev-to-uploads.s3.amazonaws.com/i/ym4bm4x3x6xord5eq1j7.png)

```
<p>Left</p>
```

![p center](https://dev-to-uploads.s3.amazonaws.com/i/gw9kqlq4c6dpsf7pcj35.png)

```
<p align="center">Center</p>
```

![p right](https://dev-to-uploads.s3.amazonaws.com/i/yx7wd7clddsz7u77qvjm.png)

```
<p align="right">Right</p>
```

![a](https://dev-to-uploads.s3.amazonaws.com/i/zo597pafwxm5d5qrxxj1.png)

```
<a><img alt="Left"></a> <a><img align="right" alt="Right"></a>
```

![table](https://dev-to-uploads.s3.amazonaws.com/i/8z6lk2wvnys0ivwvx1fe.png)

```
<table>
<tr>
<td valign="top" width="33%">
<h2 align="center">Col 1</h2>
-----------------------------
-----------------------------
-----------------------------
-----------------------------
</td>
<td width="34%">
<h5 align="center">Col 2</h5>
<p align="center">Missing valign="top"</p>
</td>
<td valign="top" width="33%">
<h2 align="center">Col 3</h2>
-----------------------------
-----------------------------
-----------------------------
-----------------------------
</td>
</tr>
</table>
```
Database Normalization
Published: 2020-09-28 00:29:03

For this lab I chose the database admin centric topic to discuss. The term database normalization refers to the process that is used to organize information into a database made of tables and columns. There are three normalization forms, each form has they're own set of rules that are made to satisfy different sets of data. 

For this project, the first two forms are the ones I will discuss- the first and second normal forms.

The first normal form has the following conditions:
1. Rows are not ordered
2. Columns are not ordered
3. Duplicated data
4. Intersections of rows and columns always have a unique value
5. There are no hidden values in columns

An example of a first normal form table in my data base would be the Geographic Location table. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tom5ba7yvgeygqb87ox8.JPG)

The second normal form has the following conditions:
1. The table must be in 1 NF and the non-key columns must depend on the primary key
2. The partial dependencies are removed and placed in a separate table
A potential example of second normal form in my data base could be seen in the Company table. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p0r1h6mc7s13coop3dya.JPG)
By switching the primary key from zip code to industry, the non-key columns hours per week, number of employees and location would depend on it. Depending on what type of work one has, the hours would differ, whether someone could work at home or have to go in to to work, along with number of employees would all be effected. 

Below is a video of me going more in-depth with this topic and how I altered my database so the Company table fits the second normal form criteria.
https://drive.google.com/file/d/1NaOsJ0VTV6fuZgZaOb2eNCPSuewi5myK/view
15 Resources I Learned Something From This Weekend
Tags: ruby, podcast, rails, resources
Published: 2020-09-28 00:20:58

I wanted to get a lot of writing done this weekend but unfortunately I had to take care of a cranky app instead. 

It's been awhile since I have posted though, and since I know how my brain works, there was some inner worry that I'd keep slipping out of my (once regular) habit of writing.

For my own mental health, I promised myself I would post something, but I needed to do it quickly. After digging through my browser history for something, it dawned on me that there was a lot of great content in there that some of y'all may find interesting as well!

Without further adieu, here are 5 blog posts, 5 projects, and 5 podcasts that I read/listened to this weekend:

## Blog Posts

- [Rails Performance: When is Caching the Right Choice? - Honeybadger Developer Blog](https://www.honeybadger.io/blog/rails-caching-alternatives/)
- [Churn vs. Complexity vs. Code Coverage - FastRuby.io | Rails Upgrade Service](https://www.fastruby.io/blog/code-quality/churn-vs-complexity-vs-coverage.html)
- [A 1588x Render Speed Increase With Solr Caching on Rails to Solve All Your Performance Issues - NRoweGT: Atlanta Ruby on Rails Consultancy](http://blog.nrowegt.com/use-and-abuse-solr-caching-on-rails-to-solve-all-performance-your-issues/)
- [Code Audit: How to Ensure the Quality of Your Ruby on Rails Application](https://rubygarage.org/blog/how-to-do-code-audit-for-ruby-on-rails-apps)
- [Will Johnson | How Does The Model Interact With The Database In Ruby on RailsHow Does The Model Interact With The Database In Ruby on Rails | Will Johnson](https://williamjohnson.dev/how-does-the-model-interact-with-the-database/)

## Projects

- {% github gregnavis/active_record_doctor no-readme %}
- {% github ViliusLuneckas/rails-cache-inspector no-readme %}
- {% github soutaro/steep no-readme %}
- {% github ParamagicDev/snowpacker no-readme %}
- {% github foambubble/foam no-readme %}

## Podcasts 

- [Should You Interview Job Candidates Via Slack Or TikTok? | FounderQuest](https://www.founderquestpodcast.com/episodes/should-you-interview-job-candidates-via-slack-or-tiktok)
- [#166 Country of Liars | Reply All](https://gimletmedia.com/shows/reply-all/llhe5nm/166-country-of-liars)
- [5by5 | Ruby on Rails Podcast #337: Chipping Away at a Monolith with Tori Huang](https://5by5.tv/rubyonrails/337)
- [How open source saved htop (The Changelog #413)](https://changelog.com/podcast/413)
- [The Art of Product: 144: Launching SavvyCalpauseplayskip-backwardskip-forward](https://artofproductpodcast.com/episode-144)

## Summary

After that list, any guesses as to what I've been up to recently?

If you found something on this list interesting, let me know! I'd love to chat about your thoughts about any of the above resources so reply in the comments or [tweet at me!](https://twitter.com/andrewmcodes).

Hopefully I can finish a bigger post I'm working on by next weekend, but for now, happy coding!!
Common SQL Injection Attacks and How to Prevent Them (Option 2)
Published: 2020-09-28 00:03:57

#Method 1: Stacked Queries

This method involves completing one SQL statement and then writing a completely new one. For example, a website has users input a username to view information, and the SQL statement is, "SELECT * FROM Users WHERE Username='username'". If stacked queries are supported, then a user can input "'; SELECT * FROM *;" and get the contents of the entire database when SQL runs "SELECT * FROM Users WHERE Username=''; SELECT * FROM *;".

To prevent this, do not allow stacked queries if you have the option. For instance, when using mysql and php, use the statement "mysqli_query" instead of "mysqli_multi_query". The former will stop stacked queries while the latter permits them.

#Method 2: Error Based Injection

This method makes use of SQL error messages that are displayed to the user. The code is somewhat complicated, but the concept is simple. A user attempts to do something that will almost certainly create an error, such as converting a table name to an integer, and then gains information from the resulting error message. Once a user knows the names of various tables, they will have a much greater ability to compromise the database.

To stop this attack, make sure that internal SQL errors are never displayed to a user. SQL errors should be handled before they make it to the user to stop users from gaining information from them.

#Method 3: Boolean Based Injection

In this attack, a user appends various conditions to a conditional statement. In the example of searching a users list with the SQL code "SELECT * FROM Users WHERE Username='username'", username could be set to "myusername' AND *conditional statement*". If your user information is returned, then the conditional statement is true. If it isn't, then the statement is false. By performing a series of these queries, an attacking can gather a variety of information about the database.

To prevent this attack (and most SQL attacks), user input should never be run as SQL code. There are many ways to do this, with varying levels of potential vulnerability, but the safest method is to use prepared statements. This passes user input to SQL as a parameter to a prewritten statement. Doing this ensures that SQL will not interpret what the user entered as SQL code. It will be treated as whatever data type it is meant to be.

#A Video Demonstrating an Injection Attempt

{% youtube TBMPegtZKvc %}
Different ways to use environment variables in Golang
Tags: go, environmentvariables
Published: 2020-09-30 04:35:10

---
title: Different ways to use environment variables in Golang
published: true
date: 2020-09-28 00:00:00 UTC
tags: Go,Environmentvariables
canonical_url: 
---

Learn about environment variables and different ways to use them in your Golang application.

   
[Read On](https://www.loginradius.com/engineering/blog/environment-variables-in-golang/)
How to check if two buffers are equal in Node.js?
Tags: node
Published: 2020-09-28 00:00:00

---
  title: How to check if two buffers are equal in Node.js?
  published: true
  tags: Nodejs
  date: Mon Sep 28 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-two-buffes-are-equal-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-5f50533b6ccb99994f28d37c66ff6a82.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-two-buffes-are-equal-nodejs)
  
To check whether 2 `Buffer` instances are equal, We can use the `equals()` method in the `Buffer` Instance in Node.js.

Let's say we have 2 buffers, one made from the string `Hello World` and another buffer made from Hex code `48656c6c6f20576f726c64` ( this is a hex representation of the string `Hello World` 🦄).

```javascript
// String buffer
const strBuff = Buffer.from("Hello World", "utf-8");

// Hex Buffer
const hexBuff = Buffer.from("48656c6c6f20576f726c64", "hex");
```

Now let's check if both buffers made from the string and the hex are equal using the `equals()` method in the `strBuff` buffer object.

```javascript
// String buffer
const strBuff = Buffer.from("Hello World", "utf-8");

// Hex Buffer
const hexBuff = Buffer.from("48656c6c6f20576f726c64", "hex");

// check if both buffers are equal
const isEqual = strBuff.equals(hexBuff);

/*
    The method will return true
    because both buffers have the same content
    even though their encoding is different
*/
console.log(isEqual); // true
```

- The method accepts a valid buffer as an argument.
- It will return boolean `true` if the buffers are equal and `false` if not.

### Feel free to share if you found this useful 😃.

---
Decorator Pattern
Tags: structural, pattern, designpatterns, java
Published: 2020-09-27 23:44:54

Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9lpd1qr1eop7wyy92ec1.png)

#Participants#
* Component: defines the interface for objects that can have responsibilities added to them dynamically.
* ConcreteComponent: defines an object to which additional responsibilities can be attached.
* Decorator: maintains a reference to a Component object and defines an interface that conforms to Component's interface.
* ConcreteDecorator: adds responsibilities to the component.

#Code#
```java
public class Main {

  public static void main(String[] args) {
    ConcreteComponent c = new ConcreteComponent();
    ConcreteDecoratorA d1 = new ConcreteDecoratorA();
    ConcreteDecoratorB d2 = new ConcreteDecoratorB();
    d1.setComponent(c);
    d2.setComponent(d1);
    d2.operation();
  }
}

public interface Component {
  void operation();
}

public class ConcreteComponent implements Component {

  @Override
  public void operation() {
    System.out.println("ConcreteComponent.operation()");
  }
}

public abstract class Decorator implements Component {

  protected Component component;
  
  public void setComponent(Component component) {
    this.component = component;
  }

  @Override
  public void operation() {
    if (component != null) {
      component.operation();
    }
  }
}

public class ConcreteDecoratorA extends Decorator {
  
  private static final String ADDED_STATE = "ConcreteDecoratorA.operation()";
  
  @Override
  public void operation() {
    super.operation();
    System.out.println(ADDED_STATE);
  }
  
}

public class ConcreteDecoratorB extends Decorator {
  
  @Override
  public void operation() {
    super.operation();
    addedBehavior();
    System.out.println("ConcreteDecoratorB.operation()");
  }

  private void addedBehavior() {
    System.out.println("ConcreteDecoratorB.addedBehavior()");
  }
}
```

#Output#
```
ConcreteComponent.operation()
ConcreteDecoratorA.operation()
ConcreteDecoratorB.addedBehavior()
ConcreteDecoratorB.operation()
```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
How do you deal with the endless stream of interruptions that we have nowadays?
Tags: discuss, career
Published: 2020-09-27 23:39:29

Programming is deep work and requires concentration, we all know that.

However, there are some days that I can help but interrupt myself by browsing Twitter or Hacker News when I'm stuck with a task. Which only makes things worse.

How do you deal with that? I can see that being laser-focused would make me much more productive but I have been having trouble reaching that kind of concentration.
Data Structures - Pt 3 : Binary Trees
Tags: beginners, datastructures, binarytree
Published: 2020-09-27 23:33:18

For me, binary trees are the most difficult data structure to comprehend, possibly because they are not a linear data structure. I am still not the expert on this data structure but I want to share what I have learned for other beginners.

Binary trees have nodes that hold data and a reference to their children.
 * The top node of a binary tree is referred to as the root node. It is the only node without a parent.
 * In a binary tree, each node can only have 2 immediate children(one left child, one right child).
 * A child is any node directly underneath a given node.
 * Nodes on the same level of a tree that share the same parent node are referred to as siblings.
 * A node that doesn't have children(bottom node) is referred to as a leaf. 

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

One specific type of binary tree is a Binary Search Tree.
 * In a binary search tree, the left child will always be less than the parent node and the right child will be greater than the parent node.

Iterating through the elements of a tree is called Tree Traversal. There are 2 main ways to traverse through a tree:
 1. Breadth-First Search - iterates through each level of a tree from left to right
 2. Depth-First Search - iterates through elements starting from the root, down to the root's left child, down the left child's left child, and so on until it reaches the left leaf. Then it backtraces to the parent and down to the right child and so on until it backtraces to the root. The process then starts again with the root's right child. For example, in the binary search tree above, using depth-first search would go traverse the tree in the following order: 
[ 20, 14, 9, 3, 11, 19, 57, 31, 62, 72 ]

If you have any suggestions for basic information to add, or any resources to help learn more about binary trees, please do not hesitate to comment!
Adapter Pattern
Tags: structural, pattern, designpatterns, java
Published: 2020-09-27 23:21:27

Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3j3wyo7079pr95u7idzh.png)

#Participants#

* Target: defines the domain-specific interface that Client uses.
* Adapter: adapts the interface Adaptee to the Target interface.
* Adaptee: defines an existing interface that needs adapting.
* Client: collaborates with objects conforming to the Target interface.

#Code#

```java
public class Main {

	public static void main(String[] args) {
		Target target = new Adapter();
		target.request();
	}
}

public interface Target {
	void request();
}

public class Adapter implements Target {
	Adaptee adaptee = new Adaptee();
	
	@Override
	public void request() {
		adaptee.specificRequest();
	}
}

public class Adaptee {
	void specificRequest() {
		System.out.println("Called specificRequest()");
	}
}

```
#Output#
```
Called specificRequest()
```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}