teleren/devto huggingface dataset:
Context vs Redux: What to Choose?
Published: 2021-10-08 12:18:00

{% youtube pk4XwxdYUnY %}
If maintenance and understanding of the data flow in the application is your thing and you care about making the way of passing data more efficient, this episode is a perfect match. 
Context vs Redux: What to choose? Listen to Piotr and get your questions answered 💡

🟣 What is the application state? 
🟣 Passing props through components
🟣 Tools to manage application state: Context API and Redux
🟣 Advantages of Context
🟣 Advantages of Redux
🟣 Which one should you choose?

You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/context-vs-redux-what-to-choose-experts-zone-6)
How to setup Firefox Developer Edition on Ubuntu
Tags: firefox, ubuntu, developer, mozilla
Published: 2021-10-08 12:43:02

Do you want to install and use Firefox Developer Edition on your Ubuntu and don’t know how to go about it?! If your answer is yes, then this article is for you. Am sure you’ve seen some documentations out there but in this one we will add Firefox Developer Edition to our Unity launcher. You’re welcome! 😉

Please follow the steps below…

**Step 1**
Download the firefox*.tar.bz2 file from **[Mozilla’s website](https://www.mozilla.org/en-US/firefox/developer/)**.

**Step 2**
Open Terminal.

**Step 3**
Navigate to the folder where the file is saved.

**Step 4**
Copy firefox*.tar.bz2 file to the /opt folder.
```
sudo cp -rp firefox*.tar.bz2 /opt
```

**Step 5**
Delete the downloaded firefox*.tar.bz2 file.
```
sudo rm -rf firefox*.tar.bz2
```

**Step 6**
Navigate to the /opt directory.
```
cd ~
cd /opt
```

**Step 7**
Un-tar the firefox*.tar.bz2 file in opt folder.
```
sudo tar xjf firefox*.tar.bz2
```

**Step 8**
Delete the firefox*.tar.bz2 file in opt folder.
```
sudo rm -rf firefox*.tar.bz2
```

**Step 9**
Change ownership of the folder containing Firefox Developer Edition /opt/firefox
```
sudo chown -R $USER /opt/firefox
```

**Step 10**
Create the Firefox Developer Edition's shortcut
```
nano ~/.local/share/applications/firefox_dev.desktop
```

The content of this file is,
```
[Desktop Entry]
Name=Firefox Developer 
GenericName=Firefox Developer Edition
Exec=/opt/firefox/firefox %u
Terminal=false
Icon=/opt/firefox/browser/chrome/icons/default/default128.png
Type=Application
Categories=Application;Network;X-Developer;
Comment=Firefox Developer Edition Web Browser.
StartupWMClass=Firefox Developer Edition
```

**Step 10**
Mark the launcher as trusted and make it executable.
```
chmod +x ~/.local/share/applications/firefox_dev.desktop
```

-------------------------

I hope this article has helped you to set-up your new Firefox Developer Edition.

**Thank you**
Week 7 Blog Post
Published: 2021-10-11 16:21:58

#####Write a blog post about considerations when building a web component and considerations when building the element's API (metacognition of the exercise we engaged in)

In order to create a web component is is important to consider what parts and standards are needed. This is good practice when creating any sort of coding project. Some things that we are considering when building a webcomponent are: 
- What are the characteristics of the card?
- What design considerations must we take into account?
- What accessibility concerns do we potentially have?
- What security concerns do we potentially have?
- What "states" does this card have?
- What do we call it?
- What areas do we need to account for flexible content / HTML entry of any kind?
- Do we have room for additional reusable atoms to be produced? 
- What should we call each of them?
 
All of these consideration could be applied to different projects (such as how we used them in our button project.) 

######How you are going to break it down into multiple elements
 
In this assignment our card will have a scaffold, banner, and icon. This will allow the card to be even more usable by the programmer. The banner and icon web components can be interchanged with different banners and icon. This allows for lots of personalization and reusability which is very important. 

######What do you expect to be difficult

I expect splitting up the work for this assignment to be difficult. I do not understand how each person will be able to do a different part of the card and still distribute the work equally. The person working on the scaffold will have to wait until the icon is down etc. Because I am isolating it is also difficult to understand assignment descriptions because most include slang. 

######What's more manageable now that you made the button

After completing the button I have a decent idea of how web components are constructed and then used as their own tag. I also understand the idea of properties and states which in the past I have found difficult. 

https://github.com/3B4B/project-two
Adding new feature using remotes
Published: 2021-10-09 02:51:17

I added a new feature from the [new branch](https://github.com/jjung99/suhheeKim_OSD_release0.1_create_ssg/tree/issue-24) in the cloned repository in this lab. And I updated it to the remote repo using the git merge and push function.

#### The newly added functions are as follows.

- Using the new command option -c and -config, receive the JSON file as an argument.

- Import data corresponding to the SSG option from the JSON file.

- Applying the imported data to the proper value or function (e.g., input, stylesheet etc.)

​
The following is an example of the code I updated. There were many if statements in the code, so the structure was more complicated than I contributed last time. 

First of all, I added json file and put data in it.
```javascript
 fs.readFile(TextArr.length > 1 ? './Texts/'.concat(filename, "/", TextArr[filenum][0], ".", TextArr[filenum][1]) : './Texts/'.concat(TextArr[filenum][0], ".", Text
```
The JSON file was created in the Test directory because the file was read from the directory "Texts".
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgf12900caj8p3ubo9t2.png)
 
Secondly, I added if statements when it accepts -config command option and few other code lines accordingly.

```javascript
            if(options.config){
                const json = args.slice(3).join(' ').toString();
                jsonData = require(`../${json}`);
                filename = jsonData.input;
                url = jsonData.stylesheet;
            }
```
Finally, I pushed it into the working branch of my fork repository. And I reviewed my pull request as well.

I was confused about the concept of [git remote](https://git-scm.com/docs/git-remote) and the clear difference between git [merge](https://www.atlassian.com/git/tutorials/using-branches/git-merge) and [fetch](https://www.atlassian.com/git/tutorials/syncing/git-fetch). However, working on git and trying things after watching the git lecture, I know git fetch is for reading and merge is for updating the code. I can't say I am comfortable using git yet, but I definitely understood that it would be so handy once I practice it a lot.
New feature has been added and working via remotes
Tags: opensource, git, remote, merging
Published: 2021-10-09 02:51:44

#Another contribution  
This week I had a chance to add new feature to a project of another programmer, Jun Song. Jun is friendly and also a professional coder. 

After forking and cloning his project. I created a new branch with the same name as my issue I filed on his repo(issue-11). Then, I helped Jun to add another flag for his CLI tool. In more detail, his tool now can read a JSON file in which users can specify their options. Instead of entering a really long line:
<code>jun-ssg -i "Silver Blaze.txt." --stylesheet "example.com"</code>
Users now can store all of their options in a <code>config.json</code>
```
{
   "input": "Silver Blaze.txt",
   "stylesheet": "example.com"
}
```
And can just simply enter:
<code>jun-ssg -c config.json</code>

After that I merge <code>issue-11</code> branch to <code>master</code>. Then I sent him a request and still waiting for his feedbacks of correction.

#Working and Testing via Remotes
Jun also worked on my project. Firstly, I used <code>git remote add</code> and checked out to his branch to test. He did a really good job on validating users' input as well as supporting my tool to read a config JSON file. I saw no errors so I merged his request to my main branch.
In my opinion, <code>git remote</code> is really useful. It allows you to test a pull request. First it can add the branch of the person who sends the request to our project. Then if you are satisfied, you can merge that branch to our main branch.

#Issues
Jun's codes were well-organized with separated folders for main JS file and utility files. Also, to decorate the output to users, Jun used some packages to change tool's output. This was a really good user experience but for the first time, it made me a little bit confused when reading his codes. On top of that, I tried to run the command with <code>-c</code> flag only but the tool kept telling me to specify input file, then I just realized that he made the <code>-i</code> flag as <code>required</code>. I fixed that and the tool worked well after.
In general, his type of coding was cool and professional, he split his codes into components, which were different functions. Also, keeping the main file and <code>util</code> files into different folders will make you debug more easily. This worth learning.

#Links to repos:
Issue: https://github.com/juuuuuuun/jun-ssg/issues/14
Pull request: https://github.com/juuuuuuun/jun-ssg/pull/15
My issue: https://github.com/nguyenhung15913/OSD600-SSG/issues/14
Jun's pull request: https://github.com/nguyenhung15913/OSD600-SSG/pull/18
How to send a form to an email without any backend
Tags: email, forms, html, nobackend
Published: 2021-10-09 04:03:02

Hi Everyone!
In this post I will be showing you how to send a form in HTML without any backend in multiple ways. Remember to follow me for more posts. Now let's get started! 

The Method attribute of the form must be set to "POST" for each of these ways to work. And the form input fields must have a name attribute that is not empty. I am going to use this basic HTML Markup: 

```html
<div class="container">
  <form action="#" method="POST">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>
```

Now I am going to show you the first way to do this. In the action attribute of the form element add this code: 

```
mailto:you@example.com <!--put your email here-->
```

What this will do is that it will open a new window of the Mail app and it is going to take all the user text in the input fields and put it in an email. Then if the user clicks "SEND", the form data will be sent to you.

The next way we can do this is by using different form submission companies. The ones we will be using are "Formspree" and "FormSubmit". 

I prefer FormSubmit because it requires no registration so I will start with that. The first thing you need to do is go to [Formsubmit.co](https://formsubmit.co). 

Then you need to to copy the code that is pointed to in the image below.

![code-to-copy-image-formsubmit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpoq838jwqhlnwau5h7t.png)

Paste this code in the action attribute of your form. Then enter your email in "your@email.com" and you are all set!

Next let's use Formspree. Go to [Formspree.io](https://formspree.io). Then create a new account by clicking the "Get Started Button". 
Then you will be redirected to this page: 

![Formspree.io Redirect Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fs8gqlp97yc02o5dr9c0.png)

Then click "New Form". Then enter your form name and select what email it will send the submissions to (your email).

Once you create the form, copy the code that the image below shows.

![Copy Formspree Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0flxlsse0kixzzuhnx1k.png)

Then paste that code in the action attribute of your form and you are done!

These are different ways you can send form with HTML without and Backend Code. Thank you for reading my post and if you have any questions, let me know.

Bye for now!
Day 1 of 100 Days of Code and Scrum: How to GraphQL?
Tags: graphql, beginners, 100daysofcode, webdev
Published: 2021-10-09 12:22:31

For context, I'm doing a mixture of 100daysofcode with Scrum elements. See the [challenge post here:](https://dev.to/rammina/100-days-of-code-and-scrum-a-new-challenge-24lp)

## Yesterday

I started learning GraphQL from https://www.howtographql.com. It's a pretty nice GraphQL tutorial because they both have video and text format, and so far I've been enjoying it.

## Today

I kept on plowing through https://www.howtographql.com/basics/2-core-concepts/ and learning more about what GraphQL can do.

Here are some of the things I've learned:

### GraphQL

- GraphQL is strongly typed, which means the typing needs to be declared in advance
- GraphQL uses Schema Definition Language (SDL)
- GraphQL uses queries (GET in REST API), mutations (POST, PATCH, DELETE), and subscriptions (something that lets you listen to mutations and returns response objects)
- mutations allow you to specify a payload to retrieve new information in one call round trip
- subscriptions are like data streams, while queries and mutations are similar to the request-response-cycle
- types serve as entry points for request sent by the client side
- a root field is followed by the payload which is flexible and allows you to retrieve which data you want
- it is much more flexible to query nested information using GraphQL compared to REST API

### Scrum

- a Sprint can be canceled by the Product Owner if the Sprint Goal becomes obsolete
- Product Owners have the option to choose whether to attend a Daily Scrum or not

I'm having a difficulty with getting used to working with the new syntax for GraphQL, since I've been using REST API all this time.

How is everyone doing in their learning journey? Feel free to chat with me in the comments and/via DM!

### DISCLAIMER

This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Ema-Johnia {day-30}
Tags: 100daysofcode, javascript, react, programming
Published: 2021-10-09 17:59:20

#100daysofcode {Day - 30}

Today's learning about JavaScript Localstorage. I've created a shopping cart with ReactJs and if you add products to the cart it will save the data to local storage and you will see the products on the cart after browser refresh or exit.

Link: https://ema-johnia.netlify.app

#learning #javascript #programminglife #react
How to Create Connection With Database in PHP | How to Add Data in Database Using PHP
Tags: webdev, php, database, mysql
Published: 2021-10-10 04:39:45

How to Create Connection With Database in PHP | How to Add Data in Database Using PHp

In this post, I show you the steps to create a connection with your database in PHP and how to add data to MySQL Database. 
In this article, I will also show you how to create a connection with a database in PHP| Add Data into MySQL Database|create a MySQL database in localhost. 

•First open the browser and type 127.0.0.1 or localhost depending on your computer's preference 
•Then click next and select phpMyAdmin from the dropdown list 
•Fill in username, password, db name and click the "Create" button


**Watch Full Video**

{% youtube RwQc7c1FKHc %}
Be careful Of This Java Optional Method
Tags: java, programming, tutorial, webdev
Published: 2021-10-13 22:21:16

## Let's Remember Java Optional 🤓
According to **Oracle** it's "A container object which may or may not contain a non-null value."
Optional was introduced in Java 8 and has been used by the SpringBoot team in many projects.

---

The most common usage of Optionals is in the Spring Data project. Let's look at the `JpaRepository` interface and an example method.
Say we have a User entity with an Id type of integer and that we have a JpaRepository for it

```java
@Repository  
public interface IUserRepo extends JpaRepository<User, Integer>  
{  
    Optional<User> findByUserName(String userName);  
}
```
We defined a method that searches for a user via their user name and returns an `Optional` of a User.

---

## Optional's Convenience Methods 🙌
Optional comes in with many method meant to enable us to write clean and readable code.
- map(..).or(...)
- map(...).orElse(...)
- check out Oracle's [docs](https://docs.oracle.com/javase/8/docs/api/java/util/Optional.html) for the full list.

**However, there is one method with a dangerously unexpected behavior**

---

## Meet The `orElse` Method 👀
According to Oracle's doc:

>     public T orElse(T other) 
> 
> Return the value if present, otherwise return other.

Now, we can add a method call as the parameter of the orElse, which will be run if the Optional is empty, right?

Yes, that's correct, BUT, what if I tell you that it will run anyways regardless of the presence of the value in Optional or not.

---

Let's test it ✍️

```java
@Test  
public void orElseTest()  
{  
    String result = Optional.of("hello").orElse(someMethod());  
    assertThat(result).isEqualTo("hello");  
}  
private String someMethod()  
{  
    System.out.println("I am running !!");  
	return "hola";  
}
```
The test does pass, but we notice that on the console we have the string **"I am running"** printed out.

---

### Why is that? 🤨
- Java runs the method to provide a value to be returned in the *Else* case. 

## So Be Careful ⛔️

We want to be careful if the method inside the `orElse` might have a side effect, because it will be run anyways.

---

## What To Do then? 

You can use the `OrElseGet` method which takes a supplier method to be executed if the Optional exists

Check out this wonderful [comment](https://dev.to/alexismanin/comment/1iol8) for more details.

---

### 👉🏾 Also check out [How to escape NullPointerExceptions in Java using Optional](https://dev.to/jarjanazy/how-to-escape-nullpointerexceptions-in-java-using-optional-pek)
Database says NOPE
Tags: postgres, javascript, todayilearned
Published: 2021-10-18 20:04:40

![password](https://media.giphy.com/media/SXOdjPojfeOXzgc0J1/giphy.gif)

I joined [Virtual Coffee](https://virtualcoffee.io) last week and they have this awesome zoom meeting that members occasionally spin up for pairing and coworking. A great dev named [Travis Martin](https://github.com/LincolnFleet) was adapting an existing project that had an app bundled with a Postgres v9 DB in a docker context, and he was trying to redeploy it in a different context with a newer version of Postgres.  At the point I joined the zoom meeting, the app was having trouble authenticating to Postgres.

I've worked with a few different databases before, and I'd contributed to the [TAU project](https://github.com/Team-TAU/tau) in the past which uses Django and Postgres.  As I tried to make suggestions, I referred to a few of the bootstrapping scripts I encountered on that project, and they helped to some degree of making sure all the pieces were in place in the database server (pasted below):
- check if user exists: `SELECT COUNT(*) AS count FROM pg_catalog.pg_user WHERE usename={db_user}`
- check if database exists: `SELECT COUNT(*) AS count FROM pg_database WHERE datname={db_name}`
- create the database if needed: `CREATE DATABASE {db_name};`
- create the user if needed: `CREATE USER {db_user} WITH ENCRYPTED PASSWORD '{db_pw}';`
- assign privileges: `GRANT ALL PRIVILEGES ON DATABASE {db_name} TO {db_user}; # use with care`
- update user password if needed: `ALTER USER {db_user} WITH ENCRYPTED PASSWORD '{db_pw}'`

However, after using statements like these to make sure the DB server was setup correctly, we still were getting the same error message. Travis verified all sorts of things, like whether the app had access to the environment variables he wanted. We had a big clue when he attempted to authenticate to the Postgres over the `psql` command with the app's credentials, and he didn't get an opportunity to enter a password.  The trick turned out to be that he was logged into the OS with the same username, configured earlier in the deployment process. As we got to reading further in the [Postgres docs](https://www.postgresql.org/docs/12/auth-pg-hba-conf.html), we found that the Postgres configuration file `pg_hba.conf` had the authentication method set to "ident", which relies on a separate 
"ident" service, and in order to get things working, Travis set the authentication method to different option more appropriate for clients leveraging usernames and encrypted passwords.

This was a pretty specific use case, but maybe it'll help somebody!
Make your Blog into a App
Tags: opensource, typescript, mobile, android
Published: 2021-10-19 10:00:13

Hey there, I hope you all are doing great. Recently i have been working on a Expo/Django Project which turns your blog into a app.

## Really?

Yes, you can make an app given that your **website has RSS support** and you are ready to do some set-up process.
(you can turn your *dev.to/[username]* into an app).

## How does it work?

- Basically, it's an app that takes your website's RSS feed and displays it in a nice app UI.
- For my fellow dev's out there, I have used Firebase, Django, expo and few more technology. You can check out the code in the github [repo](https://github.com/Mazahir26/Blog-App).

## Tell me more...

- Ever wanted to reach out to your readers and notify about some updates. if yes, then this app has got you covered, it has Push Notification support.
- Want to know how many users log-in and out of your app. we have got you covered, Custom Analytics(basic).

 > Note: You can add your own Analytics service provider, if 
 you know how to.

- App has Guest login, save for later, and much more.

## Gotchas

- Currently there is no ad's in the app, So there is no revenue generated from this app.
- if you are an expo dev then you can add your own ad service.(if you want to)

## is it Free?

- Yep, its an open-source project.
- At first everything that i have used is free but if u want to scale it up or your readers go crazy with the app. then you might have to pay (not to me but to Heroku or Firebase).

## Where can i find it?

- You can learn more about the app and its features [here](https://github.com/Mazahir26/Blog-App).

## Thank you

Thanks for reading. hope you like it. Peace Out