teleren/devto huggingface dataset:
Lab 6 Learn from Docusaurus for My SSG: TextHTMLPress
Tags: ssg
Published: 2021-10-31 22:18:15

## Docusaurus Dive-in
Docusaurus will help you ship a beautiful documentation site in no time. Docusaurus is a static-site generator. It builds a single-page application with a fast client-side navigation, leveraging the full power of React to make your site interactive. It provides out-of-the-box documentation features, but can be used to create any kind of site (personal website, product, blog, marketing landing pages, etc).
In one sentence, it is a easy-to-use static site generator, and fully support MarkDown files.

To set up a new website:
- With node.js, `$ npx create-docusaurus@latest my-website classic`
- Run development server, `$ cd my-website`, `npm start`
- Create a new repo and publish it on GitHub.
- Locally, deploy using `$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy`

My website of this repo can be found [here](https://qiwen-yu.github.io/docusarus-example/), the corresponding repo is [here](https://github.com/Qiwen-Yu/docusarus-example).

## Add Features to My Own SSG: TextHTMLPress
The main feature of **Docusaurus** is to help project maintainers focus on the content. Thus, it provides a lot of features to support generate html files from MarkDown files. In this work, I was trying to implement this feature on my own SSG.

### Add Markdown File Support
The **issue** was raised by myself [here](https://github.com/Qiwen-Yu/TextHTMLPress/issues/10). As suggested in the [comment](https://github.com/Qiwen-Yu/TextHTMLPress/issues/10#issuecomment-955925577), there is a package called `python-markdown` which was built for parsing MarkDown files to html style string. Therefore, this package is enough to generate a raw html body with header lines in MarkDown files properly handled.

### Add Markdown Frontmatter Support
The **issue** was raised by myself [here](https://github.com/Qiwen-Yu/TextHTMLPress/issues/11).As suggested in the [comment](https://github.com/Qiwen-Yu/TextHTMLPress/issues/11#issuecomment-955926273), there is a package called `python-frontmatter` to parse yaml style header in markdown file. Once meta data was extracted from the frontmatter, using `yattag` and `jinja2` packages to generate a proper html file with proper tags.

Overall, the **commit** to fix these two issues was [here](https://github.com/Qiwen-Yu/TextHTMLPress/commit/9a3b38e8964426c1da4149767cd4e41c56853828).
Hacktoberfest: Final Challenge
Tags: react, typescript, ux, hacktoberfest
Published: 2021-10-31 22:08:24

## Looking For an Issue
The last issue for the #Hacktoberfest challenge was really difficult to find.

After a long time of trying to find an issue with no luck, I decided to cheat a little and see what repos my classmates were contributing to. Funnily enough, I noticed that 3 of my classmates contributed to the same repo - [usTaxes](https://github.com/ustaxes/UsTaxes). This made me wonder what was so special about that repo, like why would my classmates care about US Taxes in Canada?? Or even generally care about taxes 😵 So I decided to take a look at that repo and see what's going on. I still don't know why they would choose it but I noticed that it had quite a few issues that were manageable and straightforward. So I decided to try and see how it goes, even though I'm not interested in taxes 😅

## Contribution Process
The [issue](https://github.com/ustaxes/UsTaxes/issues/549) I chose was related to the form submissions. Basically, when a user would press enter, the form will submit itself without saving the data. Also, when a user would try to go back and forth between forms, the data will be lost.

I did some research and I found [this article](https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/) explaining the default behaviour when a user presses the enter key. In summary, when that happens, it would try to find the nearest submit button and submit the form. This helped me understand the bug even more.

The way I decided to approach the issue about the enter key is by creating an eventHandler that will catch a  key down event and prevent its default behaviours. 

The other issue required a little bit more of a set up. In basic terms, I had to keep track of the form state and note whether the form had actually changed. This way, if the user changes the page without saving the form, it would trigger an alarm to the user to let the user know that the data will be lost if the proceed without saving.

The way I keep track of it is by listening to an event triggered on a change, and change the form state to a "dirty" state. Then, I used the `Prompt` component of `react-router-dom` to trigger an alarm if the form was on the "dirty" state.

You can view it in more details [here](https://github.com/ustaxes/UsTaxes/pull/699).

## Recap
Overall, Hacktoberfest challenge was a good start to explore open source world. The hardest thing was looking for issues and having to setup everything for the projects. But I definitely learned a lot. I think participating in such challenges or open source projects in general is a great way to practice coding. It also allows you to try something new by working on a real project. Hopefully next time I can be more skilled and experienced to be able to contribute to even more repos. 🙏

oh, and Happy Halloween everyone!!👻🕷🕸💀👽~~~
Slot Composition
Published: 2021-10-31 21:24:55

In developing our card web-component, our group has had the opportunity to familiarize ourselves with the ``<slot>`` element on html. 

**Application**

The ``<Slot>`` function allows for code to be passed along multiple elements found throughout a component. In the context of the card, content such as headers, icons, and text are scaffolded in order to be displayed in the correct position on the page. 

**Example**

The following code contains the information our group chose to display on our learning cards

`` updated(changedProperties) {
    changedProperties.forEach((oldValue, propName) => {
      if (propName === 'type' && this[propName] === 'science') {
        this.myIcon = 'beaker';
        this.header = 'UNIT 1';
        this.subheader = 'CHEM CONNECTION';
      } else if (propName === 'type' && this[propName] === 'idea') {
        this.myIcon = 'lightbulb';
        this.header = 'UNIT 1';
        this.subheader = 'LEARNING OBJECTIVES';
      } else if (propName === 'type' && this[propName] === 'question') {
        this.myIcon = 'question';
        this.header = 'UNIT 1';
        this.subheader = 'DID YOU KNOW?';
      }
    });
  }
``

As you can see, the use of the commands ``this.myIcon``, ``this.header``, and ``this.subheader`` are used on each card, calling upon the information that is needed to be displayed pertaining to the categories 'LEARNING OBJECTIVES', CHEM CONNECTION', AND 'DID YOU KNOW'.

In order for the underlying information to be rendered under the correct header and sub-header, it is called upon using ``this.type`` and scaffolded using ``<slot>`` to format. 

Example:

``render() {
    return html`
      <learning-scaffold>
        <learning-banner slot="banner" type=${this.type}>
          <div class="header" slot="header">${this.header}</div>
          <div class="subheader" slot="subheader">${this.subheader}</div>
        </learning-banner>
        <learning-body slot="body">
          <slot></slot>
        </learning-body>
      </learning-scaffold>
    `;
  }
``

The use of a ``<slot>`` eliminates the need to manually input information throughout each element, making the development of a web component less redundant and more efficient. 

The result of the code above has yielded the following result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsjt8cvipbe4hu31p0zf.png)

The repo containing the code used in the examples can be found below, and I encourage those who are looking to learn more about the ``<Slot>`` element on HTML to check it out.

{% github IST-402-Group-1/project-two no-readme %}
RNSScreen" was not found in the UIManager (Android)
Tags: apps, errors, android
Published: 2021-10-31 21:24:50

---
title: RNSScreen" was not found in the UIManager (Android)
published: true
description: 
tags: #apps #error #android
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umwos4szq1by3yelgu93.png
---
# Step One:
After install any react-native libraries, Re-build project by running
*npx react-native run-android*

## Step Two:
After you see "BUILD SUCCESSFUL" message on your command line.
Now run *npx react-native start* 

BOOM!!!
Day 46/100 Functions
Tags: 100daysofcode, programming, challenge, 100daychallenge
Published: 2021-10-31 20:30:20

"People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones."

Donald Knuth

![functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zmhyrnmpxxt86h1aes4.png)
Joining Hackoctorbefest and the first 2 PR
Published: 2021-10-31 20:29:03


##First PR : [Hacktober_website](https://github.com/aniket328/hacktober_website)


I was first aiming for a doc contribution since in my mind it will be the easiest way to contribute and take part in Hackoctorber for a rusty programmer like me.

When I'm searching for a project or an issue to work on I usually [query](https://github.com/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22%2Chackocterber+sort%3Acomments-asc+language%3Atypescript%2Cjavascript+)
` is:open is:issue label:"good first issue",hackocterber sort:comments-asc language:typescript,javascript ` to look for a project that I'm comfortable to work on

Then I got a chance to take a look at [issue-22](https://github.com/aniket328/hacktober_website/issues/22) of the Hacktober_website where they give us a free chance to just contribute usefull information for the Hackoctoberfest website. I use what I have learned in class and create a workflow.md hopefully act as a guidance for newbie or people like me to start contributing to open source project. Fell free to checkout my [PR-26](https://github.com/aniket328/hacktober_website/pull/26). By the end, I happy to first contribute to a project during Hackoctober but did not think people who run the project pay attention to the contributions since I saw many PR got merged without any comment and guidance.

##Second PR :  [Progress-icons](https://github.com/pxblue/progress-icons)

I came acrross through another [issue-19](https://github.com/pxblue/progress-icons/issues/19). At first I was not sure about what @huayunh try to mention through the issue and I try to ask if she can clarify what is the problem and what I have to do, then after she rephrased her issue statement, I understand there is a deprecated image links in the README.md of the React and Angular directory.The fix is easy where I uuse the image links in the './README.md' to replace for the depricated links. It was an easy fix but it helped to boost my confidence and aiming for another contributions. You guys can check out my [PR-20](https://github.com/pxblue/progress-icons/pull/20)
OOP...What is it?
Tags: javascript, beginners, programming, webdev
Published: 2021-10-31 20:21:14

What is OOP? OOP is short for 'object-oriented programming'. 'Objects' have properties. For example, lets say that 'dog' is the object, and its properties could be: size, breed, color, sex. OOP is a set of techniques that use objects as central principle of program organization. 

The four principles of object-oriented programming are encapsulation, abstraction, inheritance, and polymorphism. 

Encapsulation: When each object keeps its state private inside of a class. In our dog class is where we encapsulate all of the 'dog' logic. Other objects have no direct access to its state.  They would need to call on public functions called methods. 

Abstraction: Objects should only allow publicly certain details while hiding all of the behind the scenes implementation. Only show what is relevant to the other objects.

Inheritance: When objects are very similar but not completely the same, yet they share common logic. Creating a child class that reuses all of the parent class's fields and methods and adds their own to it. This way we form a hierarchy. 

Polymorphism: This happens when defining a parent class with logic to be reused and then the children classes implement their own version of it for themselves. 

This is just a start to explaining OOP. Stay tuned for more!  

Happy Coding!
tsParticles 1.37.2 Released - react-particles-js deprecation notice
Tags: showdev, javascript, webdev, html
Published: 2021-10-31 20:01:00

# tsParticles 1.37.2 Changelog

## Bug Fixes

- Fixed issue with dynamic imports and async loading
- Added browserslist to fix some issues with older browsers (should fix #2428)

---

{% github matteobruni/tsparticles %}

---

## React Particles.js deprecation

As mentioned in the title, the library [react-particles-js](https://github.com/wufe/react-particles-js) is officially deprecated in favor of [react-tsparticles](https://particles.js.org), since they share the same core library.

You can read more [here](https://github.com/wufe/react-particles-js#warning-deprecation-notice), so if you were or are using that library it's recommended to migrate to the tsParticles official React component.

There are also some benefits to this migration:

- React 17.x support, no need to override peer dependencies warnings
- More frequent updates, a new React tsParticles version will be released with the core library, they share the same version so you'll know if you have the right version
- Future proof, since tsParticles v2 is coming with a lot of breaking changes, the React tsParticles component will be ready since day one
- More updated documentation, you'll find every needed information in the same documentation of tsParticles core library since they share the repository and the maintainer
What is Object, Classes, and Design Pattern in JavaScript.
Published: 2021-10-31 19:48:31

JavaScript is one of the popular programming language in the modern world today, and it can be used to builds different things ranging from web applications, mobile apps, machine-learning, blockchain and others.

Object is simple definition simply means a container in which different things can be stored in it.

In Javascript, Object takes in key-value pairs which are not reversed or inserted in order. there are different types of object creation namely using object literals and new Object method.

Object literals created using the curly brackets {}
Task force 4.0 week 1 Journal
Published: 2021-10-31 19:27:35

---
title: Task force 4.0 week 1 Journal
published: true
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--qpHCYMWj--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g9zgldo4mzcwqdkw518.jpeg
description: 
---
Initially, I would like to mention even though week one was a bit challenging, however, was a great experience. But how?

Maybe you're wondering how in the first week, we had a great experience I got you. We started our week by playing a strategic game as a team; to replace an egg from the ground to the top of the bottle using a ring and thread, but unfortunately, none of the team did it. However, we learned that a good strategy is a key to success. On the following day, they gave us codewars to solve, despite that were not easy for me, helped me to realize that I have to improve in problem-solving. On the same day, we learned how to write user stories.  We then had a session on intercultural communication that emphasized how we should be communicating with diverse people by knowing their beliefs and values in advance.

Afterward, we discussed what someone should do before, during, and after the call. In this session, I was introduced to mirro software, which is very helpful for presentation.

Although we had a great experience, we also had challenges. It was very critical for us to submit on time but taught us to be punctual. For example, we were supposed to do a presentation after 1 hour, but we used 15 plus minutes for preparation.

In conclusion, I could not end without saying how our first-week Friday was stunning. On this day, we started by pitching the project, introducing ourselves, and then we had a party along with a critical thinking game we played against former employees. Unfortunately, they beat us.

In short, I would say first week was awesome, looking forward to the second.
React Native Mobile WrapUp Tutorial: Supabase Realtime, ReactHookForm, Modal, FlatList, ImagePicker
Tags: reactnative, supabase, react, tutorial
Published: 2021-10-31 19:19:31


In the final video in the 9 part series, we put together everything we covered to show saving record to Supabase database. In the record we include a reference to an image uploaded to a supabase bucket using the ImagePicker to pick an image from the gallery or take a photo. 

Finally we use react hook form to validate the data before saving it to the database; Then we use supabase realtime to get updates when the table the data is saved to is updated

###Video
{% youtube NNtMJmw9ELI %}

###Links
- KeyboardAwareScrollView - https://www.npmjs.com/package/react-native-keyboard-aware-scrollview
- ImagePicker - https://docs.expo.dev/versions/latest/sdk/imagepicker/
- ReactHookForm - https://react-hook-form.com/
- Supabase - https://supabase.io/

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
My first Hacktoberfest
Tags: hacktoberfest
Published: 2021-10-31 19:17:58

### Intro Heading
Hi guys my name is Alexis, I work as a Data Engineer for a company called Smartway, a startup aiming to reduce food waste in the retail industry.
### Background

It has been 7 years since I started coding, from learning HTML3 basics to working as a Python Data Engineer today. I never took the chance for myself to contribute to Open Source communities, despite the fact that I heavily rely on them on a daily basis.
That's why I decided to change for the better and try to get involved in Python projects for this 2021 edition of the Hacktoberfest.
### Progress
I already got my 4 PRs accepted so I am now waiting for them to be mature.
### Contributions
I contributed to a list of projects aiming to provide a highly configurable discord bot called Pumpkin ! https://github.com/pumpkin-py
- I started by a simple refactoring of existing code in a submodule of the bot in order to replace the usage of the requests library by aiohttp. It was for me a good way to discover how to install the bot locally, make it work and test simple changes.
- Then I had to enhance existing logging system of the bot by providing the list of all users which added specific reaction on  posts to trigger bot actions (like pinning a message or opening a new thread if you are familiar with Discord)
- After that I had a more challenging PR which was a port of a module from one existing deprecated project of the team to the actual bot. It was really challenging as I had to understand more of what are the inner concepts of a Discord module.
- Finally I contribued with a minor new feature which allow to alter user verification status within the bot system. It was not that difficult after the last PR I did.

### Reflections
It was really a great opportunity for me to learn a lot in a short span of time. Many thanks to the Pumpkin-py team for their patience and kindness. I discovered that Discord bot developement is really fun and really well documented. I will definitely try to contribute to the next edition of Hacktoberfest if I can ! For now, my next step in open source is to contribute to the projects I use in a daily basis (hi Dagster) to further my knowledge.
Into frameworks and beyond
Tags: career
Published: 2021-10-31 19:10:28

---
title: Into frameworks and beyond  
published: true
description: 
tags: career
//cover_image: https://direct_url_to_image.jpg
---

Happy Halloween!! 

I am glad to have finished up the data structures and algorithms course this month even though I had a large break in between. 

Anyways moving forward into next month and even more so into next year I am going to focus more into frameworks such as React and Angular as well as just getting a taste of everything in between. 

I am going to be focusing more on projects to put on GitHub. 
I am really excited to have finally have the basics behind me on HTML, CSS and JavaScript. It has been a long ride and I know its just getting started. 
 
This is why I love working with software because there is always something new to learn and something to work on. It is never ending and ever evolving!
Junior Developers & Startups
Tags: freelancers, startup, softwaredeveloper, changingcareers
Published: 2021-11-01 15:01:11

---
title: Junior Developers & Startups
published: true
date: 2021-10-31 19:07:16 UTC
tags: freelancers,startup,softwaredeveloper,changingcareers
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*0_6CjM3q0-dEE53R)<figcaption>Photo by <a href="https://unsplash.com/@perloov?utm_source=medium&amp;utm_medium=referral">Per Lööv</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

A quick clarifier: I said on Friday, Oct. 29th that if you are not funded by Venture Capitalists and you are a startup then you are at risk. The clarifier is that you are most-likely bootstrapping the business, either with your own money or maybe some other method. Being VC funded is its own risk but I will not get into that now.

Now, today’s subject.

#### Acknowledging The Risk

For startups there are many risks. If you have worked for one or started one, you know that very well. But what are the risks really?

I would argue that the risk is knowing what you do well and what you do not do. The temptation as a startup is to try to be the one-stop shop, the sole answer, the ‘right place’, etc. But that does not exist.

#### Know Your Capabilities & Accept It

Sometimes you have to pivot. But if you know you can do something well, do it well and offer it as a service. You do not need to or have to pivot as soon as something doesn’t seem ‘right’ or where there may be more money.

Also, be willing to use tools. Using tools that are built by others does not mean you as a company are ‘incapable’. It means you know what you can and cannot do.

### So, Now To Startups & Junior Devs

The problem is similar for both. As a startup, you want to offer customers and clients the full suite of services. But what does that mean? As a junior developer you want to be ‘capable’ of everything (which is impossible) but you want that so you will get hired.

#### The Answer: Do Less

I don’t know if you hate me for this answer, I will expound more on it tomorrow. But ‘Doing Less’ is an art. It is humility. But it is empowering.

Let me give a quick specific tool for junior developers and startups that will help you learn and scale. For developers it will help you focus on building out applications/projects which if you do will help you focus on getting a job. For startups it will help you focus on delivering the client/customer the sweet sauce (business logic) of their application.

Tool: [hyper.io](https://hyper.io/)

What: Remove need to spend time on DevOps

How: Wraps the cloud for you and gives you a simple API for services (data, search, queue, cache, storage).

Give it a look.
Graphs
Tags: javascript, webdev
Published: 2021-10-31 19:03:17

---
title: Graphs
published: true
description: 
tags: javascript, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Intro to Graphs
                       -Types of Graphs
                       
  
                        
             


###Intro to Graphs

Graphs are used in
-social networks 
-recommendation engines such as 
"People also watched" , "You might also like", "People you might know", "Frequently bought with". 
-Location / Mapping
-Routing Algorithms
-Visual Hierarchy 
-File System Optimization
-Almost everywhere! 


###Types of Graphs
Vertex - a node
Edge - connection between node 
Weighted / Unweighted - values assigned to distances between vertices
Directed / Undirected - directions assigned to distances between vertices