teleren/devto huggingface dataset:
My first MAJOR PR
Tags: opensource
Published: 2022-12-12 06:32:09

## Overview 
This day has come and I finally made a PR that I can be proud of! This was a PR to a repository of the web app called [LinkFree](https://github.com/EddieHubCommunity/LinkFree) which is an open-source analog to LinkTree, where people can create profiles about them, and leave some links and some descriptions about them.

## So what I did do?
I my previous article I went more in-depth of what I had to do and how I did and nothing has change since that. Now I just want to say what I did and what value provided. 

LinkFree has this concept called a testimonial. This is like the tab on the user's profile where there is a list of testimonials that other users left for that user. 

My task was to make a way to add testimonials and since this app is very open-source oriented and has its user data in the repo in json format I had to do it using GitHub and GitHub actions specifically. 

What I did was write a template_issue, where users provided user nicknames, testimonial titles and descriptions. Then I created the GitHub action, which was triggered when the new testimonial was created and it parsed the issue, extracted user name, title and description, created a new json file with testimonial data, committed these changes and closed the issue. 

## What I learned? 
Now, I finally feel confident with GitHub workflows and know many things about them such as ways to trigger a workflow, how to use other users' workflow, how to work with issue templates in workflow and soooo many other small things that I went through. 

## PR status
My [PR](https://github.com/EddieHubCommunity/LinkFree/pull/2359/commits) was accepted without any requests for improvements and it was merged in a beta branch of the app where the repo maintainer tests the app. He let me know that it works well and I am extremely happy about it, because I put a lot of effort into it.

## Conclusion
I fall in love with the open-source world and now I understand how it works and I made an impact that I feel proud about!
Java By Example: Constants
Tags: java, beginners, programming
Published: 2022-12-12 06:29:15

Java supports __constants__ of character, string, boolean, and numeric values.

```java
import java.lang.Math;
import java.math.BigDecimal;

class Main {
  public static void main(String[] args) {

    // 'final' declares a constant value.
	final String s = "constant";
    System.out.println(s);

    // A `final` statement can appear before Data Type.
  	final Integer n = 500000000;

    // A numeric constant has type usually declared by user.
  	final Double d = 3e+20 / n;
    System.out.println(d);

    // To convert a numeric constant type
    // It is required to cast to `BigDecimal` first
    // Then cast to other data types (like `BigInteger`)
    final BigDecimal e = new BigDecimal(d);
    System.out.println(e.toBigInteger());
  	
  	System.out.println(Math.sin(d));
  }
}
```

```shell
javac Constants.java
java Constants
# constant
# 6e+11
# 600000000000
# -0.28470407323754404
```


Reference:
[BigDecimal Class in Java - GeeksforGeeks](https://www.geeksforgeeks.org/bigdecimal-class-java/)
[is there anyway to convert from Double to BigInteger? – Java (tutorialink.com)](https://java.tutorialink.com/is-there-anyway-to-convert-from-double-to-biginteger/#:~:text=Answer%20If%20you%20want%20to%20store%20the%20integral,then%20into%20a%20BigInteger%3A%20BigInteger%20k%20%3D%20BigDecimal.valueOf%28doubleValue%29.toBigInteger%28%29%3B)
Java By Example: Variables
Tags: java, beginners, programming
Published: 2022-12-12 06:25:30

In Java, _variables_ are explicitly declared and used by the compiler to e.g. check type-correctness of function calls.

```java
class Variables {
  public static void main(String[] args) {
    
    //You can declares 1 or more variables.
    String a = "initial";
    System.out.println(a);

    // You can declare multiple variables at once.
    Integer b = 1, c = 2;
    System.out.println(b + " " + c);
    
    //'var' will infer the type of initialized variables.
    var d = true;
    System.out.println(d);

    // Variables declared without a corresponding initialization are not able to be called, calling will be resulting in error.
    // Integer e;
    // System.out.println(e);
  }
}
```


```shell
javac Variables.java
java Variables
# initial
# 1 2
# true
```
Using Axios Guide
Published: 2022-12-12 06:23:54

_Below is a beginner guide on how to install and use Axios in React.js_

### how to install 
**using npm:**
`$ npm install axios`

**using yarn:**
`$ yarn add axios`

###how to import:
`import axios from 'axios';`

The import must be added to the top of the react component axios is being implemented in.


###Axios usage:
Axios is a HTTP client library used in React JS and Vanilla JS to make request to a specified endpoint. These request are known as HTTP request. The request usually made are **GET** which is known as Read in CRUD, **POST** is known as Create in CRUD, **PATCH**  is to update in CRUD and lastly **DELETE**.  

### HTTP Request Examples
###GET Request:
`
const [post, setPost] = useState([]);
    useEffect(() => {
    axios.get('url')
   .then((response) => {
      setPost(response.data);
    });
  }, []);`

### POST Request:
`  function createPost() {
    axios.post(baseURL, {
        title: "Hello World!",
        body: "my latest post."
      })
      .then((response) => {
        setPost(response.data);
      });
  } `

### PATCH request:
  `function updatePost() {
    axios.patch(`url/${id}`, {
        body: "an update of my latest post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }`

### DELETE Request:
`  function deletePost() {
    axios.delete(`url/${id}`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }
`

### Using async and await:
 
async-await syntax in axios allows for less code since the **.then** and **.catch** callback functions aren't needed. 

### GET Request with Async-Await

`const [post, setPost] = useState([]);
const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});
useEffect(() => {
     async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);`

### Why should you consider using axios to make your http request:

Axios have built in crud functions to make request simple.
 _Ex:_ axios.get, axios.patch, axios.post, axios.delete.

You'll use less lines of code to make endpoint request since request with axios requires only one **.then()**
Vanilla CSS vs Bootstrap
Published: 2022-12-12 05:43:22

While working on my most recent react project for class, I had the choice of using many different libraries for css to change the appearance  of each element. I essentially chose react bootstrap. At first I thought using a library for css would be way easier then using vanilla but I was very much mistaken. Don't get me wrong Vanilla has it's con as well but I guess we can discuss pros and cons and you can be the judge.

While using Vanilla I liked that it was a simple cut and paste into your Html index, which could be a blessing or curse. When pasting  you do not have full control of your css unable to determine or create your own class names or id. This dilemma makes it difficult to edit or tweek your css to exact desire . 


When using bootstrap I was initially  confused lol. I say this because boot strap had it's on JSX code written and you had to decipher which tags, classNames where needed to be added to your code. Take  look at the example below. 

This an example of React bootstrap code 


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

and below is an example of my personal project code .


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

If you notice most of the bootstrap code was not needed to create the actual form which was a bit annoying. One thing that was beneficial was that i could create my own class or id and customize my css accordingly. 


I personally prefer both depending on what I  need to design and how complex the project may be.
Vendure headless commerce - part 1
Tags: webdev, beginners, javascript
Published: 2022-12-12 06:16:30

A while ago, we started looking at [Medusa](https://daily-dev-tips.com/posts/trying-out-a-medusa-webshop/) as an alternative for a WooCommerce webshop, I'm still busy with this project, but in the meantime began looking at Vendure too.

At first, the website was a little bit of a letdown, and Medusa seemed to do a more appealing job at marketing itself.
However, I quickly came back to this after giving it a try.

A big shoutout to the Vendure team, as they have been super helpful with all my requests and taking the time to help me set up.

In a couple of articles, we'll be looking at Vendure and how we can set up a headless commerce system and link it to some storefronts.

## What exactly is headless commerce?

You might be wondering, what is this headless commerce system?

It's an e-commerce system, but it's not tied to any specific frontend solution.
In the case of Vendure, it's focused on developers who love the modern web, and we see familiar names such as TypeScript, GraphQL, and NodeJS.

We get an out-of-the-box solid system that we can extend and modify to work with our other systems.

This benefit is that a developer can choose whatever frontend stack they want to work in, giving a lot of freedom.
We can quickly hook up multiple solutions and languages to work with, even on the admin side.

## What makes Vendure so great?

I started looking at Vendure because of how flexible their setup was. We get a lot of hooks we can use and a pretty large open-source community that is super helpful.

One of my main selling points was that they provide product variants with facets.
I was particularly struggling with this on Medusa, and it worked great out of the box from Vendure.

The other real benefit was the number of storefronts we could hook into. I liked the Remix storefront a lot as I was exploring Remix in general (so this is very biased).

It also comes with many great options that need little to no modifications to make things change, and more in future articles.

## What to expect

You might be interested in this process, so let's discuss what to expect from the following articles.

- We'll set up the system with the admin interface
- We'll create a storefront
- Importing data
- Setting up products and facets
- Attaching a CDN
- Customizing Vendure
- Deploying

If you are keen on any of the above topics, subscribe to my newsletter and get the latest articles as they are launched.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Inserting scripts dynamically in a webpage
Published: 2022-12-12 06:09:43

Requestly brings you one of the most powerful tool which may prove to be replacement for many browser extensions.
Using “Insert Scripts” rule, you can make on-the-fly changes to a webpage content.

Inject popular libraries or hosted scripts or execute custom code-snippet before or after page load using simple rule builder.

If you love hacking, playing with automations, scraping, changing default website’s behaviour and have some basic knowledge of JavaScript, there’s a lot you can do here.

For example, remove/hide unwanted sections from page, add quick action buttons, add your own libraries to support your script, etc.

Every time the page is viewed, the specified script will be executed and changes will apply, thereby making the user experience seamless.
Similar to any other rules in Requestly, Script rules too can be setup to execute on one or more web pages simultaneously.

here’s a quick demo video:
{% youtube 4dvucRjLwGY %}


**How to create a Script rule using Requestly?**

1. Install Requestly extension if you have not previously installed it.
2. Click on requestly icon in browser toolbar or Open https://app.requestly.io/rules
3. Click on Add (+) Icon to create a new Rule
4. Click on “Insert Scripts” card.


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

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

Enter rule name, description and webpage source where the rule has to be applied.

Select libraries (from available options) you want to include in webpage in order to support your custom scripts.

Click “Add Custom Script” button to add custom scripts which can be of two types:
1. URL- source of an external script
2. Code- JavaScript code snippet

Please note that Code script has a size limit. For longer code, one must create script file in [Requestly File Library](https://app.requestly.io/library) and copy URL to URL type custom script.

Each custom script has an option to be either included before page load or after page load. This provides user more flexibility to achieve multiple use-cases.

The extension ensures that firstly all libraries are inserted as custom scripts might depend on them. After libraries, all scripts meant to be loaded _before page load_ are executed and then all scripts meant to be loaded _after page load_ in the same order as they were added in rule builder.

For security reasons, rules created by a user remains private to him/her unless he deliberately shares with other users.

If you have any query or feedback, please feel free to reach out to contact@requestly.io. We would love to respond to each of them.
Java By Example: Hello World
Tags: java, beginners, programming
Published: 2022-12-12 06:06:35

---
series: [Java By Example]
---

Our first program will print the classic “hello world” message. Here’s the full source code.
```java
class Helloworld {
  public static void main(String[] args) {
    System.out.println("Hello world!");
  }
}
```
To run the program, we need to build our programs into __Byte Code__. 
We can do this using `javac Helloworld.java`.
We can then execute the built java `.class` file directly.
```shell
javac Helloworld.java
ls
# Helloworld.java Helloworld.class

java Helloworld
# Hello world!
```
Java By Example
Tags: java, beginners, programming
Published: 2022-12-12 06:03:59

> __TLDR__: Check out the Java examples shown in the above series

### What is Java
[Java](https://www.java.com/) is an open source programming language designed for building well-architectured, multithread, and reliable software. 

_Java by Example_ is a hands-on introduction to Java using annotated example programs. Check out the first example([Hello World](https://dev.to/alantsui5/java-by-example-hello-world-235m)) or browse the full list above.

### Target Audience
It is a Java beginner tutorial demonstrating the syntax of Java. 
It aims for the audience who already know another programming language (for example JS, Python, C++) and want to learn Java fast.
Is it correct that the child's componentDidMount is called first, followed by the parent's componetDidMount?
Tags: react, help
Published: 2022-12-12 06:00:48


Hello, I'm a React newbie.
I recently read a Medium post about useEffect.
In the article, it is written that if useEffectf is used, a waterfall problem occurs, and the child component is mounted and the useEffect of the child component is called only when all processing is finished in the parent component.
However, in stackoverflow articles, they all say that the child component's useEffect is executed first.

When I actually tested it, the same results as on stackoverflow appeared.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t8wno3yyw2472sfxrfy.png)
Can you tell me which one is correct?

And why is it from child to parent when mounted and vice versa from parent to child when unmounted?

* [medium post](https://javascript.plainenglish.io/react-official-answer-the-right-way-of-requesting-data-in-react18-other-frameworks-also-apply-50d907c1f6c4)
* [stackoverflow post](https://stackoverflow.com/questions/32814970/is-componentdidmount-of-parent-called-after-all-componentdidmount-of-children)
6 alternatives for div tag you need to know and use
Tags: webdev, html, beginners, seo
Published: 2022-12-12 05:50:48

Using more specific HTML elements instead of the `<div>` tag can help improve the readability, accessibility, SEO (Search Engine Optimization), and maintainability of your HTML code. It can also make it easier for you to style and manipulate your content using CSS and JavaScript.

Various HTML elements can be used instead of the `<div>` tag to wrap a section of content, depending on the context. In this article I discuss some of the most important alternatives and explain when to use them.

> Before we move on, remember you can implement your websites or landing pages **with or without** coding on [DoTenX](https://dotenx.com) for **free**. Make sure to check it out and even nominate your work to be showcased there as well.

Let's see some alternatives for the `<div>` tag:

`<section>`: The `<section>` tag is used to define a section of a page or document. It typically contains a grouping of related content, such as a chapter of a book or an article in a magazine.

`<article>`: The `<article>` tag is used to define a self-contained piece of content, such as a blog post or a news article. It typically contains the main text or body of the content, as well as any associated metadata, such as the author and publication date.

`<aside>`: The `<aside>` tag is used to define content that is tangentially related to the main content of a page or document. It is typically used to enclose content such as sidebars, pull quotes, or advertisements that are not directly related to the main content of the page.

`<nav>`: The `<nav>` tag is used to define a section of a page or document that contains navigation links. It typically contains a list of links that allow the user to navigate to other pages or sections of the website.

`<header>` and `<footer>`: As mentioned in the previous answer, the `<header>` and `<footer>` tags are used to define the header and footer sections of a page or document, respectively. They can be used to wrap sections of content that are specific to the header or footer of the page, such as the page or document title, navigation links, or copyright information.

Remember that in general, you should use the most specific and semantically meaningful HTML element that is appropriate for the content you are trying to wrap.

For example, if you have a section of your page that contains a blog post or news article, you should use the `<article>` tag instead of the `<div>` tag. Similarly, if you have a section of your page that contains navigation links, you should use the `<nav>` tag instead of the `<div>` tag.

In some cases, you may need to use the `<div>` tag if there is no other HTML element that is more appropriate for the content you are trying to wrap. However, in general, you should try to use more specific and semantically meaningful HTML elements whenever possible.
Trim trailing zeroes when formatting float in Java
Tags: java
Published: 2022-12-11 17:03:56

Simple problem, but surprisingly non-obvious answer:

The output of
```java
System.out.printf("%f%n", 1.0);
```

is
```java
1.000000
```
however, I really don't want those extra, trailing zeroes **and** I don't want to lose precision in other cases.

Looking again through [the Formatter docs](https://docs.oracle.com/en/java/javase/18/docs/api/java.base/java/util/Formatter.html), I was surprised to find that only a fixed number of decimal places could be specified, such as `%.1f`. That won't work for this problem since `1.0005` gets formatted as `1.0`.

Since this is a "decimal point" problem, it turns out to not be a surprise that [BigDecimal](https://docs.oracle.com/en/java/javase/18/docs/api/java.base/java/math/BigDecimal.html) is the solution.

From this
```java
System.out.println(BigDecimal.valueOf(1.0));
System.out.println(BigDecimal.valueOf(1.00000000));
System.out.println(BigDecimal.valueOf(1.000000001));
```

I get what I wanted:
```
1.0
1.0
1.000000001
```

Note that the [toString](https://docs.oracle.com/en/java/javase/18/docs/api/java.base/java/math/BigDecimal.html#toString()) is actually implemented like [toEngineeringString](https://docs.oracle.com/en/java/javase/18/docs/api/java.base/java/math/BigDecimal.html#toEngineeringString()), but the formatting can be constrained to plain decimal formatting with [toPlainString](https://docs.oracle.com/en/java/javase/18/docs/api/java.base/java/math/BigDecimal.html#toPlainString()).

For example, the following
```java
System.out.println(BigDecimal.valueOf(0.000000005300));
System.out.println(BigDecimal.valueOf(0.000000005300).toEngineeringString());
System.out.println(BigDecimal.valueOf(0.000000005300).toPlainString());
```

outputs
```
5.3E-9
5.3E-9
0.0000000053
```

Finally, to make sure the desire to remove trailing zeroes didn't introduce a huge performance problem, I benchmarked 10 million iterations of each formatting 5,000 random values. BigDecimal formatting seems to be only very slightly slower:

```
formatted took PT5.3975531S
BigDecimal took PT5.6573979S
```
How to set an accessible name to an interactive HTML element?
Tags: html
Published: 2022-12-12 05:29:34

---
  title: How to set an accessible name to an interactive HTML element?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 10:59:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-accessible-name-to-interactive-html-elements
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_f588fa4585.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-accessible-name-to-interactive-html-elements)
  To set an accessible name to an interactive HTML element, you can use the `aria-label` attribute and set its value to a common name as to what the element does.

### TL;DR

```html
<html>
  <body>
    <!--
      Using the `aria-label` attribute to give the button
      a more accessible name for what it does. 
    -->
    <button aria-label="Go Home">Home</button>
  </body>
</html>
```

For example, let's say we have a button on the webpage that goes back to the homepage of the webpage like this,

```html
<html>
  <body>
    <button>Home</button>
  </body>
</html>
```

Now to make the `Home` button more accessible to assistive technologies like screen readers, assistants, etc. we can use the `aria-label` attribute and give a value of `Go Home` since in our case it navigates to the home page of our webpage.

It can be done like this,

```html
<html>
  <body>
    <!--
      Using the `aria-label` attribute to give the button
      a more accessible name for what it does. 
    -->
    <button aria-label="Go Home">Home</button>
  </body>
</html>
```

Now the button is accessible to assistive technologies and has a meaning to what it does.

See the above code live in [codesandbox](https://codesandbox.io/s/set-accessible-name-to-interactive-html-elements-kbd2wr?file=/index.html).

That's all 😃.