teleren/devto huggingface dataset:
React Axios Newbie Issues
Published: 2021-10-09 03:06:58

Hi there, I have the following code:
`
.
.
.
const PAGE_DATA_URL = 'http://localhost:3000/dataAPI.html';
.
.
.
function App() {
    const [post, setPost] = React.useState(null);
    React.useEffect(() => {
        axios.get(PAGE_DATA_URL).then((response) => {
          setPost(response.data);
          //pageData = response.data;
          console.log(response.data);
        });
    }, [] );



    return (
        <ThemeProvider theme={theme}>
           
        <div>
            <Navbar  expand="lg" fixed="top" bg="primary">
              
                <Navbar.Brand href="#home">{post.name}</Navbar.Brand>
.
.
.
`

The response.data is logging, but I assume it hasn't loaded by the time Navbar is rendered. If that is the issue, how might I go about waiting for the response before rendering anything?

Cheers!
Divtober Day 9: Homonym
Tags: codepen, divtober, css, showdev
Published: 2021-10-09 02:39:33

---
title: Divtober Day 9: Homonym
description: A cartoon animation of a tree growing.
published: true
tags: codepen,divtober,css,showdev
series: divtober
---

I won't be able to use the computer tomorrow, so I decided to go ahead and build the divtober drawing today.

The word of the day is "homonym", which was an interesting challenge. Two words are homonyms if they are written the same but have different meanings.

In the end, I drew an animated paper boat sinking in a bathroom sink:

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

Once the paper boat sinks in the sink, you will need to rerun the animation to see it again (it doesn't loop). The water drop does loop though... but only on Chrome.
New feature for Static-Site-Generator in Javascript
Tags: javascript, beginners, webdev
Published: 2021-10-09 02:18:35

This week I have to practice using git remotes and merges to collaborate with some code changes. And I found a new partner for this lab, he is [Luigi](https://github.com/LuigiZaccagnini) and we found each other thanks to **Slack**.

First of all, I head into [his repo](https://github.com/LuigiZaccagnini/octo) and create another [issue](https://github.com/LuigiZaccagnini/octo/issues/11) telling him what I am going to improve his code. This new feature would allow the ability to use a configuration file within the `SSG` to allow users specifying the config file instead of typing a long argument. Once he assigns me to the issue, I start to do my work as soon as possible. To be honest, the way he writes his code is completely different from my logic, so it is quite hard for me to understand what is going on inside there. It took me a few hours completing my task. One thing I noticed in his code was that he declared the type for parameter separately, which I should practice how to do this inside my future code. Then I sent him a pull request, we had a conversation to discuss about how we can fix the code and he could [merge](https://github.com/LuigiZaccagnini/octo/commit/bbb930e68627a64135b6e1f1ec32d736e3b81276) my code into his branch.

After he is done his task with my code and send me a [pull request](https://github.com/tcvan0707/txt2html/pull/12), I reviewed it and pulled his code into my machine, I was kind of surprised because a new logic was applied into my code and there were so much things for me to learn. Reviewing a *Pull Request* by fetching to my local machine is way effective than checking it on Github. Once I satisfy with the new feature, I [merge](https://github.com/tcvan0707/txt2html/commit/89268f405619ed56348b0b496339ce816de76225) his work to my `main` branch.
New SSG Feature
Tags: github, javascript, opensource
Published: 2021-10-09 01:50:40

This week we got a __Lab__ 4 about _adding a new feature for the_ __SSG__. It's more like allow the user use a `JSON` file to config the value and run the program. The original request of this __Lab 4__ is updating _someone else's SSG_. 
However, because my __late__ start of the Lab 4, there were only __3__ or __4__ repositories available for me. And all of them were either built in `C++` or `C#` language. And then a lot of __issues__ came after that. 
For the record, `C++` is the __worst language for me__. Beside, I just started to studied the `C#` language __a few weeks ago__. I'm not even familiar with the C# language. So, both of them are nightmare for me. 

##Process
Anyway, I picked a `C#` SSG program to do my __Lab 4__. I followed the steps that the `README` file from the `C#` __SSG__ program. After 2 hours trying, I still __got nothing changed__ in the SSG program. Even though I know the __basic logic__ for _adding the new feature_ (because I had done it on my own SSG before I picked a Lab 4 program), __I have no idea__ how to modify or update the __program__. I tried to __google__ the code I would like to update the program, but due to I'm __lack__ of the knowledge and experience working on `C#` program _I can't make any changes at all_. __Therefore__, I decided to give up the program. 

##Result
I planned to not doing this __Lab 4__ when I gave up the `C#` program. It was an awful experience for me. The reason I'm writing this Blog is I want to try to do the Lab 4 with my own repository. It's a simple code updating for me since I worked on my own program. 
Probably this is not the core for this Lab 4. The main point for the Lab 4 might be allow us have a experience the `git remote` and `git branch` with a real world coding program. Although I didn't experience that `git remote` stuff that much from this Lab 4, I learned that how I can add a new feature to my SSG. Also, I'm getting more and more familiar with the __git__ command.
 
__Still a good result for me!__

Link to my own work: [[Config_Feature]](https://github.com/DerekJxy/My-First-SSG/commit/840d6ea9b09e005d55b9ddfcd7e82be3d2a511e9)
Lab 4 - Adding config option for other student repo
Tags: opensource
Published: 2021-10-09 01:32:54

## Intro
For my fourth lab, we have to implement 1 feature to another student Static site generator CLI. The feature is to add support --config with Config File. I found a repo in python from [lmpham1](https://github.com/lmpham1/cool_ssg_generator). I started to create an [Issue #15] (https://github.com/lmpham1/cool_ssg_generator/issues/15) letting him know that I'm adding this feature to his code.

## Implementation 
I started to folk, clone his repo, and created a new [branch](https://github.com/Kevan-Y/cool_ssg_generator/tree/issue-15) for that issue. 
The way am I going to implement is to check if the config option has some arguments. If it doesn't check if the file is correct json. After that loading the json file and overwrite the arguments for the other option, so in this way, it will skip the other option.

After implementing my code I run some tests on my side when everything looks good. I commit, then push to remote then created a [Pull Request #16](https://github.com/lmpham1/cool_ssg_generator/pull/16). [lmpham1](https://github.com/lmpham1/cool_ssg_generator) found a small bug in my code where I have to check correctly if it was a json file. After fixing it and pushed to the remote. [lmpham1](https://github.com/lmpham1/cool_ssg_generator) merged my PR and the issue that was linked to it was closed automatically.
Lab4 using git remotes and merges on some code changes
Tags: github, remote, tracking
Published: 2021-10-09 01:21:57

This week I practice using git remotes and merges to collaborate with our peers on some code changes which support --config function with config File. 

### How to change code
I used the "argparse" lib to parser the features including --input, --lang and so on. So the same logic, I think it is easy to add the new config feature to my partner's code. However, my partner use the "click" lib which I never used. I search some articles to learn this lib and this [one](https://jwodder.github.io/kbits/posts/click-config/) is every helpful for me. Although I feel the code should be written correctly, the system can't find the --input parameter. I post a draft PR and communicate with my partner through Slack. I am very grateful to his help. He soon found the problem which I am afraid I can't find the problem all day. The issue is that the --input should be optional. ![d2c3c0e51986457b2ed6764ecbb81dc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moge35ai19fv59sfcz5t.png)

### Learn to use git remote

I watched the "Understanding Git Remotes" video three times, and I think I have already understand the concept. The first time I watched the video, I still didn't understand the different for branch and remote. After I watched the video repeatedly and finished Lab4, I should understand the "remote". I summarize as below:
1. when user clone a new repo, system will create the origin remote automatically.
2. How to add your partner's working on repo as a remote to my local repo:
    $ git remote add upstream(can use use any name) <URL - my partner forked from my project repo>
3. How to track branch in my local repo: 
    $ git checkout -b issue-12 oliver-pham/issue-12

#### Reflection

This week I learned how to remote  and sharing commits, branches. How to use tracking branches. I also learned some knowledge about Pythone. The experience I have learned is to communicate more with teachers and classmates, so that I can learn useful knowledge as soon as possible.
DPS909 - Release 0.2 W1
Published: 2021-10-09 01:04:00

For this week, we have officially begun our Hacktoberfest event! We were tasked with finding issues to work on with the tag Hacktoberfest.

After rigorous searching for a proper issue to work on, I found [Nocodb](https://github.com/nocodb/nocodb). This repository posted [this](https://github.com/nocodb/nocodb/issues/627) issue, and I challenged myself to take it.

After reading through the codebase and trying to follow the installing instructions, I was able to get the open source project to successfully execute. A big challenge for me was trying to understand the flow of the code. Understanding what each file did, and how it all came together. 

Once I figured out the code, I began my journey of fixing the bug. The issue brought up that the email field was using the text type, instead of an email type. This would make the input be treated as case sensitive. Instead, the proper way is to have the email field be case insensitive. The author of the issue mentioned that when he entered the email, after typing in a ".", the first letter of the input would be capitalized. When I was trying to reproduce the bug, I was using Chrome, Firefox and Microsoft Edge, and was unable to get the first letter of the email field to capitalize. I believe that this issue is only on Safari, but since I am on a Windows machine, I am unable to test it. Regardless, changing the field to a email type, instead of a text type would most likely resolve this issue.

The authors created steps for Licensing and modifying an existing file. I followed these steps and was able to create a PR with my changes.

I have been able to successfully merge my changes, which could be found in this PR [PR Link] (https://github.com/nocodb/nocodb/pull/632)
OSD600 - My First Hacktoberfest Contribution
Tags: opensource, hacktoberfest
Published: 2021-10-09 00:23:52

## 1. Introduction

After spending some time to search for the issue labeled "Hacktoberfest", I found an interesting project called [My Productivity](https://github.com/MareikeW/dashboard-project). The project uses [Angular12](https://angular.io/guide/setup-local), TypeScript and [SCSS](https://sass-lang.com/install) to create a website where people can track their productivity.

## 2. The issue
To access the dashboard of the website, users are required to sign in first. However, the sign in form has not been created yet so Maireike - the owner of the project has filed [this issue](https://github.com/MareikeW/dashboard-project/issues/34). This is a good opportunity for me to refresh my Angular knowledge thus I asked Maireike to assign this task to me. She replied very quick with an agreement.

## 3. The solution
One nice thing is that Maireike does not require me to follow any specific design but give me the freedom for creation as long as there are some validations.  And all the work was done in the `signin component` which was pre-created.

In `signin.component.html`, I created some heading, a simple form with two input fields used for username and password. 
The `signin.component.scss` file contains all `scss` code used to style the way how sign-in page look like.

For validation, I used `required`, `pattern` atrribute, `ngModel` and `*ngIf` directive to validate inputs and display some warnings to users.

```
<input class="inputField" type="email" name="username" 
id="username" placeholder="Type your email" ngModel 
pattern="[a-zA-Z0-9]*@gmail.com$" required/>

<p class="alert" 
*ngIf="form.controls.username?.errors?.required">
*Email is required!
</p>
        
<p class="alert" *ngIf="form.controls.username?.errors">
*Invalid email address!
</p>
```

Here is what I've created. ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrj5ic94w1j645lcu8fh.png)
 
After testing the form, I committed the changes and submitted a [PR](https://github.com/MareikeW/dashboard-project/pull/38) to the upstream. Luckily, Maireike was totally satisfied with my work and asked for no modification. The PR then quickly got merged. 

## 4. Overall
This process is awesome! At first, I had thought that there is no way I can make it. Surprisingly, everything has gone smoothly. I gain more confidence and excitement to participate in the open source community now. *Little by little one walks far - Peruvian Proverb*

Happy coding!
How to host a Wordpress site on AWS Lightsail FOR FREE!!!
Tags: aws, wordpress, hosting, linux
Published: 2021-10-09 00:01:39

# What is Wordpress?
WordPress is the simplest, most popular way to create your own website or blog. In fact, WordPress powers over 40.0% of all the websites on the Internet. Yes – more than one in four websites that you visit are likely powered by WordPress!

---

# Process
To begin go to the [AWS Control Panel](https://console.aws.amazon.com) and find the search bar. ![search.png](https://i.gyazo.com/01ba53107fb1c84366df94897aa418a8.png)
Now type `Lightsail` and click the first service. Now you should see something like the following:
![lightsail-home.png](https://i.gyazo.com/ef49d1706908f0de55a0fc7a521bba6f.png)
Press the orange button called `Create instance`. Now scroll down and you will see Lightsail by default selected Wordpress. ![wordpress-light.png](https://i.gyazo.com/0b22e6a434e4266c2026cb8af3672d08.png)
Keep scrolling down and you will see instance plan. If you have AWS Free Tier you shouldn't worry this. If you don't have AWS Free Tier then the first 3 months are FREE! I recommend the `$5`/month deal. Name your instance and then press the big button saying `Create instance`. Now wait 3 minutes for your VM (Instance) to load up. To know it is loaded up you will see the Wordpress icon blue and not gray. ![wordpress-vm.png](https://i.gyazo.com/ad47c1a18b55c84610875aa3d3f4f2c0.png)
Click on the terminal icon to the right of the instance name. After that, a new window will pop-up for the VM terminal. Go back to the Lightsail dashboard and find the IPV4 (EX: 127.0.0.1). My VM's ip is `13.59.157.149`. Once copied go to your broswer and paste it in with the following line:
```
13.59.157.149/wp-admin
```
You should see the following:
![wp-admin.png](https://i.gyazo.com/e24197110629aea0b7f683d5995fa3f4.png)
The default `user` is `user` but to find the password we need to go back to the terminal.
Once back in the terminal paste in the line:
```bash
cat bitnami_application_password
```
Select the output and paste it into the password. Once you logged in you are done! You should see the following once logged in:
![admin-wp.png](https://i.gyazo.com/fd08575327983e928c5dc8262ac00e5f.png)
The only thing now stopping you is you creating it! I will soon show you how to connect a domain + SSL!

---

If you found this usful then please share this and follow me! Also check out [my website where I also post everything from here](https://howtoubuntu.xyz)
Azure Storage Replications Basics
Tags: azure, cloud, tutorial, beginners
Published: 2021-10-09 12:55:49

---
title: Azure Storage Replications Basics
published: true
date: 2021-10-09 00:00:00 UTC
tags: azure, cloud,tutorial,beginners
canonical_url: https://www.rupeshtiwari.com/azure-storage-replications-basics/
---

LRS (locally redundant storage) ZRS (zone redundant storage) GRS (geographically redundant storage) RA GRS (read-access geographically redundant storage) GZRS (geographically zone redundant storage) RA GZRS (read-access geographically zone redundant storage)

Availability and Durability Disaster recovery Recovery time objectives (RTO) Maximum acceptable time that an application can be un-available after an incident happen. Read only access to a secondary region

Redundancy in primary region Redundancy in secondary region Read access to data in secondary region

## Local Redundant Storage

![](https://imgur.com/42eGmb4.png)In the **same data center** and **same region**  **3 copies** of your data is saved. Fire or flooding can impact the data center and your data is stored in a single data center only.

## Zone Redundant Storage (ZRS)

![](https://imgur.com/3QYNQt4.png)Within the **same region** you can have **3 availability zones** where **3 copies** of data will be replicated. If your primary azure data center is **down** then azure **repoint** the DNS of the storage account to **other zone**. Each zone is **physically separate**.

**Disadvantages:**

- It is not available for every azure region
- It does not support 
  - archived tier of blob
  - managed, un-managed disks.

## Geo Redundant Storage (GRS)

![](https://imgur.com/hBV2Udw.png)

## Geo Zone Redundant Storage (GZRS)

![](https://imgur.com/x9qKD0E.png)
Working on another repo
Tags: opensource, javascript
Published: 2021-10-08 23:55:30

So this week for our lab we did more practice with working with another person's repo. This week I decided to mix it up a bit and work on a SSG in JavaScript, so I made a pull request for [Ritik's repository](https://github.com/ritikbheda/commandline-ssg). Our task was to add a new feature that would allow the user to input a JSON config file as an argument, that config file would contain a JSON object with all the arguments the user wanted to use for the HTML output. Such as input file, output location, stylesheet, language, etc.

It was pretty easy to get back into JavaScript, although I never made many command line programs using JavaScript. I mainly only had used JavaScript for web development projects. So it was cool to see how Ritik did this using the [Commander package](https://github.com/tj/commander.js/). The feature was pretty simple to add because of Commander. It made it easy to add a new command line flag to accept `-c` or `--config` and then all I had to do was check if this flag existed. If it did then it would update the options to match the ones given in the config.json file, while setting defaults if no setting was given. Otherwise, it would run like normal using given command line arguments. You can find the branch I made [here](https://github.com/joshuali7536/commandline-ssg/tree/issue-12) and the PR [here](https://github.com/ritikbheda/commandline-ssg/pull/13).

The process of forking and creating a issue branch of the repo was pretty simple after doing it last time. Same thing with the commit/merging process. However, I think the biggest problem I have is remembering the commands to do everything. I can't count the number of times I tried to type the command and mixed them up like typing `git add -"message"` or `git commit origin main`. Thankfully Git Bash has keeps a history of previously used commands, but it still is annoying to keep pressing the up arrow key just to find the command I was trying to type. But I think over time I will begin to remember how to type each command with practice. For now I think should create a sticky note on my computer that has the main commands I need. 

From this lab I got some nice practice using remote repos in Git and was able to practice some JavaScript as well. I'm excited to keep working on Git and also doing some pull requests for Hacktoberfest! I will be posting about my first PR for Hacktoberfest soon so look forward to that. Take care!
Importance of Git
Tags: github, codenewbie, codequality
Published: 2021-10-08 23:03:17

It's definitely tedious and often annoying to pause working on a project so frequently to commit to your git repo. However, it is such a fantastic benefit if you do it well.

I've learned that coding projects can so easily become larger than what you had initially expected. They can also change direction midway through the development phase. If you barely know the direction of project in the present, trust me, it will be near impossible to re-learn it in the future.

That's where the beauty of frequent git commits come in.

Of course git is first-and-foremost a version control system, but it is also a fantastic story teller. By having frequent and descriptive commits, you have a much better chance of following along with the train of thought you had at that moment of development.

This mechanism of storytelling has three great purposes:

1. Maybe you want to revisit a project and continue developing it. By reading the few most recent commits, you can put yourself back in that state-of-mind and progress onward with little difficulty.

2. Maybe somebody wants to offer an added feature to one of your existing open-source projects. By reading the README.md and following along with your commit messages, that somebody can better understand how the project was built.

3. Maybe you are applying for a job and the recruiter wants you to explain code from one of your projects. It'd be wonderful to go back in time and see what message you logged at the time of adding that code. Fortunately, the git file offers that pleasure, but only if you've committed your edits descriptively and frequently. It will show to the recruiter that you are highly organized with your logging of changes and know how to get quickly familiar with a project.

I am still working on my efforts to commit more often to git, but I absolutely see the benefits in the tool and know that it's worth the short and temporary hassle.