teleren/devto huggingface dataset:
Hacktoberfest 3 - canvasboard
Tags: opensource
Published: 2021-10-30 20:44:11

## Intro 

For release 0.2, we are participating in the Hacktoberfest. I started to search for some issue with the label "good first issue" and I end up with one issue in the [Canvasbird](https://github.com/Canvasbird) repo. 
The issue was [Unique name issue while creating workspace](https://github.com/Canvasbird/canvasboard/issues/327).
I started to ask if I could work on it. Then once the issue got assigned to me I started to work on it. 
First I fork the repo, then clone it and install all packages needed to run in my local. 
I tried to reproduce the bug in local once I was able to. I first try to locate the file for that component.

Added a function to get all current folder name
```ts
 private getAllFolderNames(): string[] {
    return [...document.querySelectorAll('h5.folder-title strong')].map(node => node.innerHTML.trim());
  }
```

Used that function above when user updates or create a new folder to catch if the folder have to newest folder has the same name or not.

For updating folder name 
```ts
if (newName === '' || (this.getAllFolderNames().includes(newName) && this.data.find(x => x._id === obj._id).folder_name.trim() != newName)){...}
```
For new folder name 
```ts
if (!this.getAllFolderNames().includes(body.folder_name)){...}
```

After that, I committed my code then created a pull request [PR#436](https://github.com/Canvasbird/canvasboard/pull/436).

I noticed that I had some conflicts to resolve. I updated my branch then committed the fix for the conflict.

Luckily my PR got merged quickly.

## Conclusion
The bug wasn't something complex, but the learning outcome from this issue was very useful. I re-learned Angular a framework I haven't touched for a year. More and more I work on different frameworks I notice my ability to adapt to a new framework improved a lot. I spend less and less time figuring things out and being more efficient at reading documentation.
Kaggle Housing Price Competition Top 7%
Tags: machinelearning, python, jupyter, datascience
Published: 2021-10-30 20:36:12

Housing Prices (top 7%)


Hello everyone,


This is my notebook for the Housing Prices Competition. A major focus for me was to practice my feature engineering. As a result, I went through each column individually to see what I could do to simplify or fill null values. I am sure I will learn ways to do this in bulk faster, but I wanted to just go through one by one to get familiar with the process. As a result I ended up using many different types of transformations including aggregates, ordinal encoding, and one hot encoding.


Kaggle - https://www.kaggle.com/coreyhamren/housing-prices-top-7


GitHub - https://github.com/TheHamhams/Housing-Kaggle
Rails Takes a Backseat..JS is in Front Now!
Published: 2021-10-30 14:51:32

Corny title and weak analogy aside, I've just completed my latest iteration of a movie review application. The objective of this project was to create a single-page application using Ruby on Rails API for the backend and JavaScript/HTML/CSS for the frontend. The two parts of the application communicated asynchronously using JSON. Here is a link to the [frontend repository](https://github.com/atcarter/movieappfrontend) as well as the [backend repository](https://github.com/atcarter/movieappbackend). To try out the application yourself, simply clone both repositories to your machine, run bundle, start the rails server, and open the html file from the frontend in your browser.

###Backend: Rails API

To create the rails backend, I created a new rails project using the `--api` flag. I used the resource generator to create the skeleton of what I needed to handle movies and reviews in rails. To protect the data on the server side, I added validations to both my Movie and Review models. For example, I created a method to put a movie's title in title case before it's persisted to the database. For reviews, I used a validation to make sure that the rating was between 1 and 5.

The biggest change from the last project to this one was that ruby was no longer handling the views for the application. Long gone are the html.erb files (dramatic I know). Instead of rendering the view for a given action (index, show, etc.), I rendered the relevant object in JSON format. To make that process easier, I used the Active Model Serializer gem to convert my rails objects into the JSON that would be fetched by the frontend of my application.

###Frontend: JavaScript/HTML/CSS

Since this was a single-page application, there was only one html file. After thinking about how I was going to display everything on the page, I made the outline of the app in the index.html file. This included the form to create a new review, a section to display all of the movies with all of their reviews, and a form to create a new movie at the bottom of the page. Of course if this app were to be in production, you'd want more control over who's allowed to add/delete movies.

After creating the skeleton of my webpage, I moved on to building my JavaScript files (one per class). I made the MovieApi class to create an instance that would handle the API calls to the rails backend. This is where the methods to READ all the movies in the database, CREATE new movies, and DELETE movies reside. The Movie class is responsible for creating movie objects and displaying them on the webpage. I had two similar classes for my ReviewApi and Reviews, respectively. Using elements that I created in the html file, I added elements that represented the movie and review data to the DOM.
Adding new feature on open source project
Tags: javascript, hacktoberfest, candycrush, gamedev
Published: 2021-10-30 20:09:55

This is my second blog post for Hactoberfest. In the last project, I worked on fixing errors on the big project. Hence, for this time, I tried to find smaller projects to add features to the application. And I found a project called [match-three-game](https://github.com/Alexandria/match-three-game). The game of this open-source project was candy crush which is my favorite game. 
So, I decided to work on this project. In this project, there were lots of issues that were open. But most of them were about UI or functional bugs. As I wanted to add a new feature, I tried to look for an issue about the functional problems. 

I found one [issue](https://github.com/Alexandria/match-three-game/issues/33) which needs to add a new feature to prompt replay the game when the timer is finished. 

This project was quite easy to set up, I just need to use the npm to run and open the index.html file on a browser. 

Before I start to fix the problem, I take some time to read the codes. While I am reading the codes, if I cannot understand what is written in the code. I researched it. As this is not a big program. It does not take a lot of time to fully understand the logic of the program.

After I finished understanding the logic, I started to add a prompt pop up first and put the button on the HTML file.
```
 <div class = "replay_popup" id = "replay_popup">
        <div class = "replay_popup_content">
            <p>GAME OVER</p>
            <p>Do you want to play again?</p>
            <div id = replay_button>REPLAY</div>
        </div>
```
And I added an event listener on the replay button and let it show only when the timer is over.
```
  const replay_popup = document.getElementById('replay_popup');
  const replay_button = document.getElementById('replay_button');

// replay button click event listner
 replay_button.addEventListener("click",replayGame) 

//function to restart the game if replay button clicked.
function replayGame(){ 

      replay_popup.style.display = "none";
      startGame();

  }
```

This is the screenshot after I add a feature.

![Screenshot of Replay Pop-up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbvizs95sugzz0wpkp7u.png)

While I am fixing this code, it was not that difficult which needs research on it, but, it was interested because it was the first experience that I worked on a game with javascript.

After I created a [pull request](https://github.com/Alexandria/match-three-game/pull/70), the project maintainer left a comment "Beautiful". I think it was a good experience to know that there is someone who likes what I developed.

For this issue, everything was going very smoothly. And I also found a bug in this application that, there is some problem in the logic of the application. So, I created an issue on the project about what I found. For the next Issue, I am going to work on that issue what I found.
Formatting Currency in Java
Tags: java, programming, beginners, programmers
Published: 2021-10-30 19:50:56

---
title: Formatting Currency in Java
published: true
description: Formatting currency amounts in Java
tags: java, programming, beginners, programmers
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8b7aitpwc62qjzhfkas.jpg
---
An easy way to output currency in Java is to use the built-in **NumberFormat** class. This lets you format a number like `1000.2399` for output as `$1,000.24`.

NumberFormat rounds to two decimals, adds necessary commas, and includes a `$` in front.

To use NumberFormat, import the class at the top of your program:

```java
import java.text.NumberFormat;
```

Next, create the NumberFormat object and assign it to a variable `formatter`:

```java
NumberFormat formatter = NumberFormat.getCurrencyInstance();
```

Finally, use the `formatter` object to invoke the `format()` method on the amount to be formatted:

```java
double amt = 1000.2399;
String amtFormatted = formatter.format(amt);
```
Note that the result is a `String` value.

Here is a full program example:

```java
import java.text.NumberFormat;

public class NumberFormatExample {
  public static void main(String[] args) {
    NumberFormat formatter = NumberFormat.getCurrencyInstance();

    double amt = 1000.2399;
    String amtFormatted = formatter.format(amt);

    System.out.println("original:    " + amt);
    System.out.println("formatted:   " + amtFormatted);
  }
}
```
Here is the output:
```
original:    1000.2399
formatted:   $1,000.24
```
*Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips and help.*
My Ideas List
Tags: programming
Published: 2021-10-30 19:50:28

1. Correlations between Stock Returns and Free Cash Flow - Besos' recommendation.
2. Data Science + Lord of the Rings in F# - Jupyter Notebook.
   - Rewrite of [this](https://medium.com/@mukund.sharma92/the-lord-of-the-rings-an-f-approach-an-introduction-of-the-blogposts-5d6ad7624fee) using Jupyter Notebooks.
3. Disruptor Deep Dive.
4. Statistics for Performance Engineers.
5. Steganography in Python.
6. Deep Dive into Graph Based Neural Networks.
7. Progressive Overload of React.
   - No backend - just frontend
   - No frontend - just backend
   - Simple backend and frontend
   - backend with frontend auth
   - backend with frontend auth w/ state management
   - backend with frontend auth w/ redux
   - Firebase frontend/backend
   - MERN frontend/backend
   - GraphQL API frontend/backend
   - jest based testing for both the frontend/backend
8. Trace Log only React based presentation.
9. Introvert's Guide To Making Friends With Data.
10. 10 Day Miracle Challenge.
11. Habit Tracker w/ Accountability.
Using Object.defineProperties()
Tags: javascript
Published: 2021-10-30 19:48:18

Hello, today we will learn how to use __Object.defineProperties(/* object */, {
  // properties here...
})__, which has the following arguments:
__object__ (1st arg): The object to define the properties to.

__props__: The properties to add add to the object.

Here's an example: ```javascript
let object = { };

Object.defineProperties(object, {
  a: { value: 4 }
});

console.log(object.a);   // 4
```
To begin, we pass _object_ as the first argument, so we will add properties to _object_. Then, we pass an object (the same as a Python Dictionary) as the second argument. You see that every key will be added to the object _object_. The key _bar_ has another key, __value__, which is 4. So, it's the same thing as this: ```javascript
let object = { };

object.a = 4;
```
But Object.defineProperties() supports adding multiple properties! Remember the interpreter written in JavaScript in the _Making an interpreter in Python_ post? Here's a newer variant: ```javascript
let i = { };

Object.defineProperties(i, {
  stack: { value: [ ] },
  code : { value: null },
  init : {
    value: function (c) {
      this.i = c.i;
      this.d = c.d;
  }},
  run: {
    value: function () {
      for (let step in this.i) {
        switch (step[0]) {
          case "load": this.stack.push(eval(step[1]));
          case "add":
            let b = this.stack.pop();
            let a = this.stack.pop(); 
            this.run(["load", a+b]);
          case "dump": 
            if (!step[1]) console.log(this.stack.pop());
            else console.log(eval(step[1]));
        }
      }
  }}
});
```
With this, goodbye and have a good day!
Truncate Decimals Manually in Java
Tags: java, algorithms, beginners, programming
Published: 2021-10-30 19:45:22

---
title: Truncate Decimals Manually in Java
published: true
description: Java programming
tags: java, algorithms, beginners, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g83rt4n4df3k7z8m7ja9.jpg
---
Given a floating-point number `100.899456`, how would you truncate it to just two decimals?

In other words, how would you convert that number to `100.89`?

You can do this in Java without using a function call. Here’s the algorithm:

1. Multiply the original number by `100` to move the decimal point to the right two places.
1. Cast the result to an integer to remove the remaining decimal places.
1. Divide the result by `100.0` to move the decimal point back to the left two places.

Here’s the full code:

```java
public class Main {  
  public static void main(String args[]) { 
    double x = 100.899456;
	double y = (int) (x * 100) / 100.0;
	System.out.println("before: " + x);
	System.out.println("after:  " + y);
  } 
}
```
And here’s the output:
```bash
before: 100.899456
after:  100.89
```
Thanks for reading! 😀

*Follow me on Twitter [@realEdwinTorres](https://twitter.com/RealEdwinTorres) for more programming tips and help.*
Is it a Leap Year?
Tags: java, algorithms, beginners, programming
Published: 2021-10-30 19:39:55

---
title: Is it a Leap Year?
published: true
description: There is a simple, mathematical way to determine if a year is a leap year.
tags: java, algorithms, beginners, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hexmxfexebdu8v45llo7.jpg
---

There is a simple, mathematical way to determine if a year is a *leap year*.

A year is a leap year if it satisfies either of these conditions:

1. The year is divisible by 400.
1. The year is divisible by 4 and **not** divisible by 100.

It is easy to check for a leap year in a Java program. Use the Java modulo operator (`%`) to determine if a number is divisible by another number. The modulo operator returns the remainder when dividing a number by another number. For example, `4 % 2` is `0`. Since the remainder is `0`, it means that 4 is divisible by 2.

A simple Java program can use an `if` statement, the modulo operator, and some conditions to determine if a year is a leap year.

Here is a Java code snippet that checks if `2016` is a leap year:

```java
int year1 = 2016;
if ((year1 % 400 == 0) || (year1 % 4 == 0 && year1 % 100 != 0)) {
  System.out.println(year1 + " is a leap year");
} else {
  System.out.println(year1 + " is NOT a leap year");
}
```

Here is the output:

```
2016 is a leap year
```

2016 is a leap year. The code snippet above determines that correctly.

*Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips and help.*
Algorithm Development: Verifying a Social Security Number
Tags: java, beginners, programming
Published: 2021-10-30 19:32:21

---
title: Algorithm Development: Verifying a Social Security Number
published: true
description: Java Programming
tags: java, beginners, programming
//cover_image: https://direct_url_to_image.jpg
---
A person's social security number is in a specific format with numbers and dashes:

**nnn-nn-nnnn**

For example, this is an example of a valid  social security number:

**111-22-3333**

Note that this number is fictitious for this article.

To verify that a social security number is valid, follow these rules:

- The social security number must be a string.
- The string must be of length 11.
- Starting with position `0`, there are hyphen (`-`) characters in the 3rd and 6th positions.
- All other characters in the string must be digits in the range `0` to `9`.

Here are some sample social security numbers that **fail** to meet these requirements:

- `111223333` - length is not 11 and hyphens are missing
- `11-1223-333` - hyphens are in the wrong positions
- `111-aa-3333` - non-numeric characters are in positions `4` and `5`
- `111-22-333` - length is not 11

Here is one possible algorithm to verify the format of a social security number:

1. Input the social security number as a string value.
1. Check the length of the social security number.
  - If the length is not equal to 11, output a message that the social security number is invalid and exit the program.
  - Otherwise, continue to the next step.
1. Check that positions `3` and `6` of the social security number are hyphen (`-`) characters. One way to do this is with the Java String [charAt()](https://dev.to/realedwintorres/how-to-java-charat-string-function-1dig) method.
  - If one or both of the positions is **not** the hyphen (`-`) character, output a message that the social security number is invalid and exit the program.
  - Otherwise, continue to the next step.
1. Check that all other positions in the string are numbers in the range `0` - `9`. One way to do this is with the Java String method [isDigit()](https://dev.to/realedwintorres/how-to-java-isdigit-character-function-2g38).
  - If at least one of these characters is **not** a digit, output a message that the social security number is invalid and exit the program.
  - Otherwise, output a message that the social security number is valid.

This just one possible algorithm for verifying the format of a social security number. There are other ways to do this. But algorithm development is the focus here. Develop a solid algorithm *before* writing code. Then it is just a matter of translating the algorithm into real Java statements.

Thanks for reading. 😃

*Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips and help.*
Lab 6 - Adding Docusaurus features
Published: 2021-10-30 19:01:34

## Intro 
For my sixth lab, I have to make a website with Docusaurus and host to GitHub. Also, add some features similar to Docusaurus in my ssg project. 

## Docusaurus 
To initialize Docusaurus I ran the command `npx create-docusaurus@latest my-website classic --typescript`. 
After that, I started to customize the website.
I modified the theme color in the `custom.css` files. 
I also removed all the other docs and blog that was pre-generated from the template and added mine.
I set up my index page to redirect to `/text-ssg-docs/docs/introduction"`
```jsx
import React from 'react';
import { Redirect } from '@docusaurus/router';


export default function Home(): JSX.Element {
  return <Redirect to="/text-ssg-docs/docs/introduction" />;
}
```
I also add my documentation of my SSG project + some of my blog.

To deploy to GitHub I had to follow this instruction [GitHub Deployment](https://docusaurus.io/docs/deployment#deploying-to-github-pages)
Edited `docusaurus.config.js` config file to fix my setup 
```json
title: 'Text-ssg docs',
	tagline: 'Dinosaurs are cool',
	url: 'https://Kevan-Y.github.io',
	baseUrl: '/text-ssg-docs/',
	onBrokenLinks: 'throw',
	onBrokenMarkdownLinks: 'warn',
	favicon: 'img/favicon.ico',
	organizationName: 'kevan-y', 
	projectName: 'text-ssg-docs', 
```
Then I pushed my change to my repo. To deploy I have to run 
`cmd /C 'set "GIT_USER=<GITHUB_USERNAME>" && yarn deploy'` This will make a new branch in my repo and use that branch commit to host the website on GitHub.

## Adding Docusaurus to my ssg project
I decided to use a [third party package](https://github.com/markdown-it/markdown-it) to have the full markdown feature + highlight with [highlight.js](https://highlightjs.org/usage/). [Issue#24](https://github.com/Kevan-Y/text-ssg/issues/24)

First I need to configure markdown-it and highlight
```js 
const hljs = require('highlight.js');

//Markdown config
const md = require('markdown-it')({
	html: true,
	linkify: true,
	typographer: true,
	highlight: function (str, lang) {
		if (lang && hljs.getLanguage(lang)) {
			try {
				return hljs.highlight(str, { language: lang }).value;
			} catch (__) {}
		}

		return ''; // use external default escaping
	},
});

```

Then removes the old part markdown conversion and replace by `dataTreated.content = md.render(data);`.
After that, the implementation is done.
Recap of my experience with hacktoberfest 2021
Tags: hacktoberfest
Published: 2021-10-30 18:14:16

Hello everyone, my name is Dustin. This blog is just about my thought about hacktoberfest 2021 and my experience during the fest.

Hacktoberfest 2021 gave me **A LOT**. Hacktoberfest asked me to contribute 4 projects but I went over and did 6 because when I started to contribute, I got interested and wanted to keep contributing to more projects. 

Contributing to the projects does not mean I only code my part and then submit the work, no. I had to go through the projects, understand it to see how it works and also learn new things in those projects.

[First PR](https://github.com/code4romania/seismic-risc/pull/748)
[Second PR](https://github.com/redxzeta/Awesome-Adoption/pull/90)
[Third PR](https://github.com/rosekamallove/youtemy/pull/75)
[Fourth PR](https://github.com/NotWoods/maskable/pull/65)

Thanks a lot!