teleren/devto huggingface dataset:
adding Docusaurus site!!
Tags: javascript, node, cli, docusaurus
Published: 2021-10-30 03:50:14

Docusaurus can assist you in quickly delivering an attractive documentation site. Docusaurus is a static site generator that creates static pages. It creates a single-page application with quick client-side navigation, taking advantage of React's full capabilities to make your site interactive. Setting up a Dosusaurus site is a super easy task. You only need to change one file by putting your url and other details regarding your repo in the `docusaurus.config.js` file! 

I decided to expand my SSG's capability to convert `.md` files with more accuracy. Elaborating, until now, my tool was converting only to h, p, and bold tags but now it also converts to link, i and code. I choose this as I think the converting to h and b tags was very basic and wanted to convert as many things possible. So, I started by creating an [issue](https://github.com/ritikbheda/commandline-ssg/issues/14), followed by I created a new branch for the same and started to on it. I then prepared notes and sample code in my notebook as I think the regex can be a bit tricky in solving such problems. 
Well I think most of the regex did work well but I regex failed for a few, I then had to rethink and re-implement those parts or leave them for future. So now the SSG tool can convert to `h`, `b`, `i`, `a`, `del` and `code` tags. The things left for the future are converting an image, table and listing tags. I then did testing on it and finally created a [PR](https://github.com/ritikbheda/commandline-ssg/pull/15) and merged it.

I think in the future, for this tool, I will add complete support for markdown files, write tests(probably with jest, might change if I better) and also expand it from SSG to website.
Looking for the "right" one
Published: 2021-10-30 03:18:09

This 2-week's lab called for a 2-part submission.

##1. Docusaurus - create, build, host!
If you've never heard of it - It's a real thing! I was shocked when I heard that was what it was called. 

Docusaurus is basically an application to generate html pages, easily and quickly. I thought it would be relatively difficult to download - to my surprise I had no issues at all. The documentation was extremely simple and left little room for "user-errors".

 
 
After launching the application, I followed the tutorial in the browser and learned how to create a page, documents, and a blog. Once I completed this, I did have to jump through some hurdles trying to host. To be fair, it's never my lucky day when I have to host something on GitHub Pages, but the good news is I love the docusaurus logo!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9giruqcaj99xwke9z2au.png)

---
##2. The Issue
After realizing there was an emphasis in the issue for this lab, I decided to be a little more thorough. Reading the list of the different features to implement, two features pooped out - themes and full markdown support. I knew there were a lot of gaps in my markdown parser, and I felt uncomfortable saying it supports markdown... but only about 40%.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3i4cm8j8d8hidv5d2m1.png)
 

When I was looking at how to implement this, I spent two full days researching a library. So first I actually learned how to search npm packages, which I never really knew how. I quickly realized there's a webpage with all node package modules, and used that site to search more deeply. I chose a package that had everything I needed! I installed it and then went back to the page to save it, and noticed that it stated: 
**Support will end in 06/2021 to support other apps**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abir61iw5y511apvzwzh.png)
 
This is where I realized "Oh no!". That is NOT what I want. I got back to the research and found markdown-it! This was perfect because it would parse line by line. The implementation was very easy, the only hurdle I had to deal with was that my application was using modules. I tested the implementation with a few markdown files, and all was working perfectly!

I feel that I've become more open to exploring other libraries and using them in my implementations. Having spent time researching put me at ease that I was using something dependable. This was not the case when I created the CLI for the SSG. I realized afterwards that a majority of my classmates had opted to use a package to parse the cli arguments. This made me realize how inefficient my approach was. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nm2ls6h9kag0f0oi17tt.png)
Divtober Day 29: Fruit
Tags: codepen, divtober, css, art
Published: 2021-10-30 03:15:30

---
title: Divtober Day 29: Fruit
description: A cartoon of a watermelon holding a sign.
published: true
tags: codepen,divtober,css,art
series: divtober
---


A cartoon of a watermelon holding a sign that reads "Hola!" for divtober 29 (fruit): 

{% codepen https://codepen.io/alvaromontoro/pen/mdMMzPm %}

And a video of how it was done:

{% youtube k5DLVrswBxM %}

---- 

Initially, I had done a still life, but wasn't too happy with the result (with either of tbh).

{% codepen https://codepen.io/alvaromontoro/pen/bGrrWMQ %}
JavaScript Struggles - Part 2 | Numbers
Tags: javascript, webdev, beginners, tutorial
Published: 2021-10-30 02:12:36

I personally didn't understand how do <abbr title="JavaScript">JS</abbr> act with number, but after I learnt about it.

We have to understand what's the data types of JavaScript, and how to use them. Let me help you with it. 😄
![Let's gooo](https://media.giphy.com/media/1pXrkKeRNDUGS7u3ig/giphy.gif)

##### In <abbr title="JavaScript">JS</abbr> we have three **data types** for numbers: [`Number`](#number), [`null`](#null), [`NaN`](#nan).
I'll explain each of them and give an example for each of them.
* [`Number`](#number): The main Number data type.
* [`null`](#null): intentional absence of any object value.
* [`NaN`](#nan): Not a Number.

---
## Number <a name="number"></a>
whether it's integer like: `1`
or float like: `1.3`

**It is number, if there was a decimal number it'll add it, if not it'll sow up as normal integer.**
```js
console.log(5/2); // Outputs: 2.5
console.log(4/2); /// Outputs: 2
```
> We usually use `Number()` to turn the variable to number.

---
### NULL <a name="null"></a>
Null basically is none. If you made undefended variable it'll equal `null`.

And **it doesn't mean that it's an empty string or 0**.
```js
let nothing; // This variable is undefined.

console.log(null == nothing); // Outputs: true
console.log(null == 0); // Outputs: false
console.log(null == ""); // Outputs: false
```
###### That happens because `null` only equals the undefined variable. `null` and `undefined` are equal but **not identical**.

{% details Null usage %}
> We can use null data type as 0, since <u>it's an object</u>.
> Let's try it:
> ```js
> the_number = null; 
> the_number++; // Add 1 to the null variable
> 
> console.log(the_number); // Outputs: 1
> ```
> So we can use `null` it instead of 0.
###### We can add that `null` is an object data type
{% enddetails %}

---
### NaN <a name="nan"></a>
`NaN` stands for **Not a Number**, and it appears if you you have a **filled string** and converted it to number.
```js
let thing = "Something";

console.log(Number(thing)); // Outputs: NaN
```

But if you compared `NaN` with other `NaN` it'll return 
**false**.
```js
let thing = "Something";

console.log(Number(thing)); // NaN
console.log(Number(thing) == NaN); // false
```
{% details **How to fix this?** %}
> Use the `isNaN()` method instead.
> ```js
> let something = "Value";
> 
> console.log(isNaN(something)); // True
> console.log(isNaN(Number(something))); // True 
> ```
{% enddetails %}
Why aren't my SVGs rendering in Safari?
Tags: webdev, safari, react
Published: 2021-10-30 00:34:57

Recently for work I created a react component where I was passing in an SVG as a prop. Everything looked good in chrome, but when I tested in safari I realized my SVGs weren't showing up. 

After `console.log`ing to make sure the prop was passed in correctly I eventually realized the SVG would only render when a `height` attribute was specified in the component being passed in. 

```javascript
const Header = () => {
    <Menu 
        links={[
        {
          itemName: 'account settings'
          SVG: <AccountIcon height="20rem" />
        }
      ]}
}
```

Another option is to define the `className` of the SVG in the parent component and add styling in the child where it's being rendered. 

```javascript
const Header = () => {
    <Menu 
        links={[
        {
          itemName: 'account settings'
          SVG: <AccountIcon className="svg-icon" />
        }
      ]}
}
```
Top Text to Speech Tools for Websites
Tags: beginners, tutorial, productivity, podcast
Published: 2021-10-30 00:23:34

Some of the top text to speech tools that can be embedded to the websites and blogs are as follows:
1. WebsiteVoice (https://websitevoice.com/)
2. ReadSpeaker
3. NaturalReader
4. TTS Reader
5. Play.ht

What is your favorite text to speech tool that reads content in human like voice for you? Share your feedback in comments.
How to build a Grid system in JavaScript
Tags: javascript, tutorial
Published: 2021-10-29 23:47:36

---
canonical_url: https://thoughtsunificator.me/how-to-build-a-grid-system-in-javascript/
---

While making my [connect four](https://github.com/thoughtsunificator/userinterface.js-puissance4) in JavaScript I thought it would be great to build a reusable and scalable grid system.

That's what I'm sharing with you today.

So first, let's go through the basics, exactly how can we define a grid system?

We could say that a grid is made of cells that are organized into rows.

## Grid

So let's start from here and make a ``Grid`` class that will hold our rows:

``grid.js``
```javascript
class Grid {

  constructor() {
    this._rows = {}
  }

  /**
   * @readonly
   * @type {object}
   */
  get rows() {
    return this._rows
  }

}
```

Here, my ``rows`` variable type is an ``object`` but you could also use an ``array``.

## Row

Now that we have our grid class ready, let's create a ``Row`` class:

``row.js``
```javascript
class Row {

  /**
   * @param {number} x
   */
  constructor(x) {
    this._x = x
    this._cells = {}
  }

  /**
   * @readonly
   * @type {object}
   */
  get cells() {
    return this._cells
  }

  /**
   * @readonly
   * @type {number}
   */
  get x() {
    return this._x
  }

}
```

As you can see ``Row`` is in fact an abstraction of ``x`` in our grid. Just like the ``Grid`` class holds rows our ``Row`` class holds cells.

From here the next step would be to add cells to the grid, so let's create a method inside our ``Grid`` class that'll do just that.

## Adding cells to our grid

``grid.js``
```javascript
/**
 * @param {number} x
 * @param {number} y
 * @returns {Cell}
 */
addCell(x, y) {
  const cell = new Cell(x, y)
  if(!this.rows[cell.x]) {
    this.rows[cell.x] = new Row(cell.x)
  }
  cell._row = this.rows[cell.x]
  this.rows[cell.x].cells[cell.y] = cell
}
```

Now we can do something like:
``demo.js``
```javascript
const grid = new Grid()
grid.addCell(0, 0)
```

Now that we're good with the row part let's dive into the cell part.

## Cell

``cell.js``
```javascript
class Cell {

  /**
   * @param {number} x
   * @param {number} y
   */
  constructor(x, y) {
    this._x = x
    this._y = y
  }

  /**
   * @readonly
   * @type {number}
   */
  get x() {
    return this._x
  }

  /**
   * @readonly
   * @type {number}
   */
  get y() {
    return this._y
  }

}
```

``demo.js``
```javascript
const grid = new Grid()
grid.addCell(0, 0)
```

Let's build a 4x4 grid then.

## 4x4 grid

``demo.js``
```javascript
const size = 4
const grid = new Grid()
for(let x = 0; x < size; x++) {
  for(let y = 0; y < size; y++) {
    grid.addCell(x, y)
  }
}
```

There are lots more that we could do but let's save it for later...

Also, check out the library I made out of this grid system: https://github.com/thoughtsunificator/grid.
My First Hacktoberfest As A Maintainer
Tags: hacktoberfest
Published: 2021-10-29 23:31:29

I've been participating in Hacktoberfest for a few year now and it's always been a fun and interesting experience looking for projects I can lend a hand on. 

This year however I happened to have a few public projects myself, one of my own and a few through work that I'm a  maintainer of, so I figured I might as well open them up to Hacktoberfest contributions and see if there was any interest. I wasn't expecting much, but I was taken by surprise!

I've had public repos in past years, but never something really of interest to a wider audiance or with clear enough needs and defined work. 

So the first thing I did was get a few github issues together for each. The work projects already had some, but I tidied them up and pull a few more from our internal bug tracker. For my own project I went though my local todo list and made issues for them. Finally I labelled the issues and the projects with the "hacktoberfest" tag, and marked a few more straight forward ones as "good first issues".

And then I went about my life. One morning however I saw a message about a pull request against the one repo. Someone had come along and was contributing! I reviewed the work, which was good (and actually improved some existing work), thanked them, and merged. The next morning there was another from the same developer! This issue had some ambiguity so we chatted about the work and before long they came back with changes and it too was merged. I was thrilled as these two issues were things that I had been meaning to get to for a bit, but hadn't had a chance. 

I was even more surprised a few weeks later when someone opened a pull request against the one project with a minor refactor that improved the "pythonic" style of it. There was no issue around it, someone had just read through the code and saw a way it could be better. I don't know for sure that this developer came in via the hacktoberfest, but I suspect they may have. 

So for me, this hacktoberfest helped me cross off a bunch of work from my todo, helped me clarified some of the work that when I documented the issues and agian when I discuss them with the other developer, and showed me some improvements that I hadn't even thought of. Overall a great experience.
How to Organize Android Package / Folder Structure?
Tags: android, beginners
Published: 2021-10-29 23:13:44

**Of course, this is very personal. There is no right or wrong how you would like to organize your Android source code.**

I prefer to organize my source code based on recommended Android app architecture, which is also known as [MVVM architecture](https://vtsen.hashnode.dev/mvc-vs-mvp-vs-mvvm-design-patterns).

![recommended_folder_structure_01.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1636870499209/38QpMZHqw.png)

*Image source: MindOrks*
 
This is what my package/folder structure looks like in Java root folder.

| Package / Folder Name | Description |
| ------- | ------------ |
| ui | UI controller such as activity and fragment |
| viewmodel | Data for the UI |
| repository | Modules that handle data operation |
| local | Room database - SQlite |
| remote | Remote data source - Retrofit | 


This works for a small app, which is exactly what I’m doing now. However, I imagine if your app is huge and contributed by many developers, you may want to break it down into different modules/features instead. 

```
Module1
└─── ui
└─── viewmodel
└─── repository
└─── local
└─── remote
    ...
Module2
└─── ui
└─── viewmodel
└─── repository
└─── local
└─── remote
    ...
...
```

This allows your modules to be exported or shared as generic libraries easily in the future. Since my app is small, I'm good with what I'm doing now.

> **[Updated - July 02, 2022]:** Given that I now have a bit of experience. This is my current package naming convention based on the latest [app architecture guide](https://developer.android.com/topic/architecture).

```
root package
└─── data
     └─── local
     └─── mapper
     └─── remote
     └─── repository
└─── domain
     └─── model
     └─── repository
└─── ui
     └─── screens
     └─── theme
     └─── viewmodel
└─── utils
```
- `mapper` contains extension functions to convert data to and from different layers.

For app reference, you can refer [here](https://github.com/vinchamp77/AndroidNews/tree/master/app/src/main/java/vtsen/hashnode/dev/androidnews).

---

*Originally published at [https://vtsen.hashnode.dev](https://vtsen.hashnode.dev/how-to-organize-android-package-folder-structure)*.
What are some good email providers?
Tags: discuss
Published: 2021-10-29 23:08:27

So, I've got [my own domain](https://oscarablinger.dev) now. Does anyone have a recommendation for some email providers that give me that sweet …@oscarablinger.com email address?

A catch-all email would be pretty important to me – other than that only maybe that I can export my emails easily so I don't loose stuff when I'm not happy with it.
My third accepted PR on Github hacktoberfest
Tags: hacktoberfest
Published: 2021-10-29 23:07:34

Hello every, my name is Dustin. I'd like to talk about my experience of solving another issue on github that are labelled as hacktoberfest 2021. 

## Reasons
The reason behind why I chose this project was because I wanted try something that is more difficult than the first and second issues. So I chose a project that required me to do a bit of React and a bit of Firestore.

## Third pull request
My third pull request was to me not simple but not really hard to deal with. The project is pretty much alike udemy but instead of paid courses, this project provides users with the option of choosing courses from youtube, save, enroll, and learn.

The project can be found [here](https://github.com/rosekamallove/youtemy)
My pull request can be found [here](https://github.com/rosekamallove/youtemy/pull/75)

## Detail
As this issue is quite large so I need to understand what is going on in this project and how project owner handles its flow. Project owner created a user collection containing another collection of enroll courses which was the one I needed to focus on. Because when a user enroll in a course, the details of the playlist will be saved in the database (video descriptions, watched,...). However, when the creator of that playlist adds a new video to that playlist on youtube, I had to figure a way to sync my database with that playlist on youtube. So I thought that when a user goes to watching page, I would make a comparison between the data in my database with youtube API, so that if the amount of videos in my database's less than the amount of videos on youtube API, I would `CHOP` the extra videos off of youtube API and `CONCAT` it with my data. 

```jsx
  const syncPlayList = useCallback(async () => {
    const youtubePlayList = await getVideos(playlistID);

    if (youtubePlayList.length > playlistData.videos.length) {
      // new videos are added to the playlist by creator
      const newVideos = youtubePlayList.slice(playlistData.videos.length);
      handleUpdateCourse(playlistID, uid, newVideos);

      // update dom
      getDataCB();
    }
  }, [getDataCB, playlistData, uid, playlistID]);
```

```jsx
  useEffect(() => {
    if (playlistData && playlistID) {
      syncPlayList();
    }
  }, [playlistData, playlistID, syncPlayList]);
```

```jsx
import { message } from "antd";
import { db } from "../firebase";
import firebase from "firebase";

const videos = [];
const handleUpdateCourse = async (playListId, uid, newVideos) => {
  if (uid === "") {
    message.error("Not Logged In");
    return;
  }

  newVideos.forEach((item) => {
    videos.push({
      videoId: item.snippet.resourceId.videoId,
      watched: false,
      title: item.snippet.title,
      description: item.snippet.description,
    });
  });

  db.collection("users")
    .doc(uid)
    .collection("currentlyEnrolled")
    .doc(playListId)
    .update({
      videos: firebase.firestore.FieldValue.arrayUnion(...videos),
    });
  message.info("Update course successfully");
};

export default handleUpdateCourse;
```
🎃 Tech or Treat! 🎃
Tags: python, dotnet, raspberrypi, azure
Published: 2021-10-29 22:56:18

---
title: 🎃 Tech or Treat! 🎃
published: true
description: Jim and Sam played with pumpkins and made them do cool stuff
tags: python, dotnet, raspberrypi, azure
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkiquw1flrsonxvhm4y6.png
---

For those who celebrate Halloween, October is spooky season. As the northern hemisphere heads into the chill of winter, and the Southern Hemisphere warms up towards summer, October is a month of ghost, ghouls, and other scary things like bugs in your code and failing unit tests 😱.

Pumpkins are a great way to decorate your house, even better if they are powered by cool tech, and light up or make spooky sounds. [Sam Wronski](https://twitter.com/runewake2) and I decided it would be fun to create some Tech or Treat pumpkins.

Check out the 10-second video below to see what I created.

{% youtube ceFcjCqOS6c %}

This was using a Raspberry Pi, some programmable LEDs (WS2812Bs, or NeoPixels as they are also known), and a little bit of Python. Add in some Azure IoT central and I have internet controlled pumpkins.

Sam created these beauties:

![A carved pumpkin lit up by LEDs](https://pbs.twimg.com/media/FC1pcZDUUAI0I6H?format=jpg&name=large)

![A glowing flask](https://pbs.twimg.com/media/FCmFkdkVUAEi0eH?format=jpg&name=large)

Sam used some cool [.NET IoT bindings](https://dotnet.microsoft.com/apps/iot?WT.mc_id=academic-47288-cxa) to control the LEDs. It's always great when there are multiple ways to do something using the technology you know and love!

We had a live stream showing how we got our pumpkins lit up, and you can watch the video below:

{% youtube h5ETn4PTdQA %}

If you want to create a pumpkin yourself, check out our [Tech or Treat GitHub repo](https://aka.ms/TechOrTreatCode) to see some examples of how we did each part, and maybe build your own pumpkin and share it with us!

Lights are for life, not just for Halloween. You can take these code samples and use them for lights for any festive occasion, cool outfit, or just because you can.

 And if you do - please share in the comments below!
My second accepted PR for hacktoberfest
Tags: hacktoberfest
Published: 2021-10-29 22:38:22

Hello every, my name is Dustin. I'd like to talk about my experience of solving another issue on github that are labelled as hacktoberfest 2021. 

## Reasons
The reason behind why I chose this project was because I'd love to do something with React to refresh my knowledge of React and learn more about it

## Second pull request
My second pull request was also simple and easy enough in terms of coding and understanding the code. I have used React for quite a long time so I know how it would be structured and where to find what I'm looking for. 

The project can be found [here](https://github.com/redxzeta/Awesome-Adoption)
My pull request can be found [here](https://github.com/redxzeta/Awesome-Adoption/pull/90)

## Detail
This issue does not depends much on other people's code mainly because this is a completely new component and a new route. My job was to create a 404 page that any undefined route will redirect to and add a route to the route file. 

Code I added to route file
```jsx
<Route path="/404">
  <NotFound />
</Route>

Redirect to="/404" />
```

404 page
```jsx
import { Container, Image } from "react-bootstrap";

import Dog from "../home/dog.jpg";

export default function NotFound() {
  return (
    <Container className="d-flex flex-column justify-center align-items-center">
      <Image src={Dog} rounded fluid />

      <h1>Page Not Found</h1>
    </Container>
  );
}
```