teleren/devto huggingface dataset:
JVM vs JRE vs JDK
Tags: beginners, java, jdk, computerscience
Published: 2021-06-16 03:04:48

Hello everyone!  In this post I am going to go over the differences between the JDK, JRE, and JVM.  When I first started programming in Java I had no idea what the difference between them were.  I knew that I needed a copy of Java on my computer for the programs to run but that was about it.  As I have spent more time with Java I understand the purpose for each component a bit better and why it is important to  know the different between the three.

![JVM-JRE-JDK](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1o9b182qixvus7hw520.png)

In the middle of the diagram above is the JVM.  The java virtual machine is where the program executes.  The benefit of the JVM is that when you compile java files into class files you can expect them to run anywhere that a JVM is installed.  This is not the same as languages like C/C++ which compile to binary that is usable by the machine it was compiled for.  The benefits of a native language is that there is no computational overhead and the program doesn’t need the JVM to run.

The java runtime environment is a set of software used to run java applications.  It contains the JVM, platform core classes, and supporting libraries.  The JRE and JVM combined are required to run java applications.  They are intertwined and depend on each other to function.

Lastly is the java developer kit.  The JDK contains development tools needed to create java applications such as compilers and debuggers.  Those who only wish to run java applications would install the JRE and not the JDK.

This is just the tip of the iceberg for how java applications are developed and ran.  I plan on going into each part of the JDK in depth in the future.  I believe that understanding how the system works under the hood will ultimately make me a much better programmer.  Anyways, that is it for today.  Happy programming!

*Source(s):*
1. Differences between JDK, JRE and JVM. GeeksforGeeks. (2018, August 10). https://www.geeksforgeeks.org/differences-jdk-jre-jvm/.
Guess the Number
Tags: javascript, beginners, gamedev, programming
Published: 2021-06-16 02:52:00

Hi! 

It's me! 

Remember my first post, [Guess the Number with Python](https://dev.to/voidrizoma/guess-the-number-19j3)? Well, I decided to do the same exercise, now with Javascript.

Let's go.... hands on code!

```
const prompt = require("prompt-sync")({ sigint: true });
let guessesTaken = 0;

console.log("Hola crayola.... ¿Cómo te llamas?");
const name = prompt();

let number = Math.floor(Math.random() * 10) + 1;
console.log(`Hola ${name}.... Adivina el número en el que estoy pensando`);

while (guessesTaken < 6) {
  console.log("Dime un número");
  guess = prompt();
  guessesTaken = guessesTaken + 1;
  if( guess < number){
      console.log("Es un número más alto")
  } else if (guess > number) {
      console.log("Es un número menor")
  }else if (guess == number) {
    console.log(`Felicidades ${name}. ${number} es el número!!`);
    break;
  } else {
    console.log(`uy no ${name}, estaba pensando en ${number}`);
  }
}
```
At a first instance, we need to install prompt-sync node module to use it. Once time we have benn instaled the module, we can continue to code.

We have three variables, one of them we use to create a record or a counter as how many times we try to guess the number. The second variable are use to save the user name. 
Then, we have a third variable, called number that we use the method math to get a randomly number between 1 to 10. And we have two console.log to create an interaction with the user, get the name and a number.

Next, we create a while loop. A while its a loop that execute the core over and over again. We create a loop that the conditional must be menor that 6. In that case, 6 is the number that the user got to try to guess.

Inside a while loop, we have a console.log and a varibale called guess. Then we have trhee conditional sentences. The first compare if the guess is menor that number. And the second if, gonna make a comparison if guess is mayor that number. Then we have anocher conditional that compare the guess and number varibales when the user knows the right number. In this block to code, we must return a succeful message as string, and we can brake the loop.

Finally, the four conditional statement will be retured an error message when the user fails the game.
Publish Websites Using Airtable With 21YunBox
Tags: airtable, 21yunbox, node, javascript
Published: 2021-06-16 02:37:35

---
canonical_url: https://www.21cloudbox.com/cms/publish-websites-using-airtable-with-21yunbox.html
---

In this blog, we will walk through the steps of publishing websites using Airtable with 21YunBox. 


<p>&nbsp;</p>
## Steps to deploy publish websites using Airtable with 21YunBox:

1. Sign up on [21YunBox](https://www.21cloudbox.com/u/signup/)
2. Use this [Airtable base](https://airtable.com/shrlYuICEwEdAUir3) to start, click the `Copy base` button located in the top right corner.
3. Fork this [Airtable starter](https://github.com/21yunbox-examples/airtable-with-21yunbox) on Github
4. Use the following values during creation:


| Runtime      | `Static Site`                             |
| ---------------- | :------------------------------------------: |
| Build Command    | **`yarn && yarn build`** |
| Publish Directory | **`./public`** |

<p>&nbsp;</p>

Click **Advanced Configuration** to add below environment variables:

| KEY                      | VALUE                                       |
| :--------------------:   | :-----------------------------------------: |
| **AIRTABLE_BASE_ID**     | You can find it on your base -> "Help" -> "API documnetation" |
| **AIRTABLE_API_KEY**        | You can find it on Airtable Dashboard -> "Account" -> API |
| **AIRTABLE_TABLE_NAME** | `Destinations` for this starter. If you use a custom base, you can find the name of the base on the tab (top left) |

<p>&nbsp;</p>


...


To read the full content of this post, go to: [https://launch-in-china.21yunbox.com/cms/publish-websites-using-airtable-with-21yunbox.html](https://launch-in-china.21yunbox.com/cms/publish-websites-using-airtable-with-21yunbox.html)

<p>&nbsp;</p>
<p>&nbsp;</p>
4 วิธีอัพเลเวลความเป็น Developer Part 2/2
Published: 2021-06-16 02:33:31

# 3. ดูตัวอย่างโปรแกรมจาก Senior ( หรือโปรแกรมเมอร์ในดวงใจของคุณ )

นี้เป็นวิธีที่เร็วที่สุดที่จะเลเวลอัพสำหรับการเป็น Developer เพราะว่าคุณจะต้องพยายามทำความเข้าใจโค้ดซึ่งแน่นอนว่าส่วนใหญ่จะเป็นสิ่งเหนือว่าความสามารถของคุณ

พยายามทำความเข้าใจมัน และเปรียบเทียบกับโค้ดเดิมของคุณเพื่อดูว่าระดับนั้นเขาเขียนโค้ดแตกต่างกับของคุณยังไง จดโน้ตเอาไว้เล็กๆน้อยๆเพื่อที่จะเอามาปรับใช้ในการทำงานของคุณ

ถ้าหากว่าไม่ได้ทำงานในบริษัทก็อาจจะหาโปรเจคที่เราชอบในซอร์สโค้ดจาก community ของคนที่มีประสบการณ์ พยายามทำความเข้าใจโปรเจคภาพรวมให้ได้

เป็นเรื่องที่ดีมากหากเราสามารถถามคำถามเกี่ยวกับโค้ดถึงเจ้าของโปรเจคได้ เพื่อให้เขาได้รู้ว่าเราจะพยายามจะทำความเข้าใจถึงโปรเจคนี้อยู่นะ คนเหล่านี้ส่วนใหญ่จะมีความสุขที่ได้ช่วยให้คนได้เข้าใจโปรเจคพวกเขามากขึ้น

# 4. ทำความเข้าใจเรื่อง design patterns &  principles

ทั้ง SOLID , KISS , YAGIN , MVC อะไรเกี่ยวกับพวกนี้ แค่ชื่อเรียกก็ฟังดูแปลกๆแล้ว แต่มันคือชื่อเรียกของ design pattern [นี้คือรายละเอียดเกี่ยวกับ design patterns และ principles](https://en.wikipedia.org/wiki/Software_design_pattern)
How to validate with react-datepicker
Tags: reactnative, react
Published: 2021-06-16 02:31:05


Using react-datepicker, you can easily create a datepicker.




In this article, I'll show you how to validate with react-datepicker.




Specifically, let's consider a situation where you need to enter your date of birth, for example, when registering user information for a web service.




The idea is to use a validation to tell the user that they must be at least 15 years old to register.




How to validate with react-datepicker




First, suppose we have a DatePicker component like the one below, and we use the argument maxDate.




If you have a DatePicker component like the one below, you can use the argument "maxDate" to make it impossible to set a date before ●●●●.




```js
<DatePicker
selected={startDate}
onChange={handleChange}
maxDate={TimeValidation}
/>
```



Now, let's look at TimeValidation and see what happens.




By specifying 15 years ago (5475 days ago) from today's date, you can only select dates from earlier dates.



For example, if the year is 2021, only people born before 2006 will be able to enter their date of birth.



![TimeValidation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d51xq3666gvtsv939rmm.png)

 
```js
const initialDate = new Date();

const TimeValidation = initialDate.setDate(initialDate.getDate() - 5475);

```


That's it.




There are many other arguments that can be used in react-datepicker, so please look into them.




I refer to the following article.




[React Datepicker and Timepicker Component with Validation using react-datepicker Example Application](https://www.freakyjolly.com/react-) datepicker-using-react-datepicker/)


[How to validate with react-datepicker off.tokyo](https://off.tokyo/blog/react-datepicker-en/)
Django Defense Against Bot
Tags: django, github, security, tutorial
Published: 2021-06-14 05:05:44

In the previous post, I talked about how we could implement a simple trick to stop bot from continuing to submit a form in our web app. However like I told you, this might not be enough to keep all the bot from doing harm to our website. How to make it better? well another simple way is to implement a ReCaptcha. ReCaptcha is a relatively simple tool to identify if a web form in our site is being submitted by a human being or a robot. For this implementation ReCaptcha, a package called [django-recaptcha](https://github.com/praekelt/django-recaptcha).

## Get Google ReCaptcha API keys

Before we can start using google ReCaptcha Api, first we need to register our application with google. I would propose to use Google ReCaptcha V3.

click on this link [Google ReCaptcha Admin](https://www.google.com/recaptcha/admin/create), and fill in the required information

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ts9p5b7bu27v5qx7hlq.png)

click the submit button and copy your public and private api key

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzx3ihp8tfqvx1vv4a45.png)
 
## Installing django-recaptcha

You can start installing django-recaptcha with the following command in the terminal

```
pipenv install django-recaptcha
pipenv lock -r > requirements.txt
```

## Registering django-recaptcha into your INSTALLED_APP

Open your settings.py and located the INSTALLED_APP list and register django-recaptcha like so 

```python
INSTALLED_APPS = [
    #...
    # Django-recaptcha
    # https://github.com/praekelt/django-recaptcha
    'captcha',
    #...
]
```

## django-recaptcha configuration 

In the settings.py file, add the following setting config anywhere:

```python
# Django-recaptcha
# https://github.com/praekelt/django-recaptcha
RECAPTCHA_PUBLIC_KEY = '<site_key>'
RECAPTCHA_PRIVATE_KEY = '<public_key>'
RECAPTCHA_REQUIRED_SCORE = 0.75
```

replace site_key and public_key from the api key you copied from google recaptcha.

if you are using python-decouple, the config would be 

 ```python
# Django-recaptcha
# https://github.com/praekelt/django-recaptcha
RECAPTCHA_PUBLIC_KEY = config('RECAPTCHA_PUBLIC_KEY')
RECAPTCHA_PRIVATE_KEY = config('RECAPTCHA_PRIVATE_KEY')
RECAPTCHA_REQUIRED_SCORE = config('RECAPTCHA_REQUIRED_SCORE', cast=float)
```

and in your .env file you should add the following

```
RECAPTCHA_PUBLIC_KEY = '<site_key>'
RECAPTCHA_PRIVATE_KEY = '<public_key>'
RECAPTCHA_REQUIRED_SCORE = <value between 0.00 to 1.00>
```

## How to use django-recaptcha

If you want to use a ReCaptcha field inside your form, in your forms.py

```python
from django import forms
from captcha.fields import ReCaptchaField
from captcha.widgets import ReCaptchaV3

class FormWithCaptcha(forms.Form):
    captcha = ReCaptchaField(widget=ReCaptchaV3())
```

## End

Now we are able to block user that fail the ReCaptcha test. This will stop most automated bot attack.
How to Make Airtable Work in China?
Tags: airtable, 21yunbox, cms
Published: 2021-06-16 02:27:21

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-make-airtable-work-in-china.html
---
Previously, we have an [article](https://launch-in-china.21cloudbox.com/solutions/does-airtable-cms-work-in-china.html) explaining why Airtable doesn't work in China already. In this article, we are going to give you solutions in detail about how to make Airtable load super fast in China without switching CMS.

<p>&nbsp;</p>
##  Getting Airtable to work in China
We have two solutions for you to choose from, both of these solutions offer the best loading time experience to your websites' readers as well as your content teams.

<p>&nbsp;</p>
### Solution 1: For teams outside of China
If you are outside of China, your website published with Airtable is slow mainly because of two reasons:

<p>&nbsp;</p>
#### 1\. Airtable doesn't have servers or CDN (Content Delivery Network) nodes in China.

This is obvious, but I still want to put it here because it is just one of the two reasons why your website is slow in China. For longer explaining why servers of airtable are slow in China, read [Does Airtable Work in China?](https://launch-in-china.21cloudbox.com/solutions/does-airtable-cms-work-in-china.html) for reference.

<p>&nbsp;</p>
#### 2\. Your website hosting provider doesn't have servers or CDN nodes in China.

This is another reason why your website is slow in China.

Let's take a look at how this relates to your website and the airtable. If we look at the website deployment process at a high level and say you are making a change on an article on your website. Here are what happen behind the scene:

1. When you press the "Save" or "Publish" button on an article in the dashboard of the airtable, the airtable backend trigger a "build and deploy" message onto the hosting providers (the popular ones outside of China are Netlify and Vercel)


...

To read the full content of this post, go to: [https://launch-in-china.21cloudbox.com/solutions/how-to-make-airtable-work-in-china.html](https://launch-in-china.21cloudbox.com/solutions/how-to-make-airtable-work-in-china.html)

<p>&nbsp;</p>
<p>&nbsp;</p>
Golang and Server-Sent Events (SSE)
Tags: go, sse
Published: 2021-06-16 02:14:29


> Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server  via HTTP connection, and describes how servers can initiate data transmission towards clients once an initial client connection has been established.
Server Sent Event is a good choice when we need to notify the browser.
> -- <cite>[wikipedia](https://en.wikipedia.org/wiki/Server-sent_events)</cite>

If you're working with Amazon API Gateway and WebSocket in order to notify your clients this connection can be more expensive.

SSE can be a good choice when our application needs to send a message to it's clients.

This is a simple example how we can implementing SSE in Go.

```go
//main.go
package main

import (
	"bytes"
	"encoding/json"
	"fmt"
	"math/rand"
	"net/http"
	"time"

	"github.com/gofiber/adaptor/v2"
	"github.com/gofiber/fiber/v2"
)

type Client struct {
	name   string
	events chan *DashBoard
}
type DashBoard struct {
	User uint
}

func main() {
	app := fiber.New()
	app.Get("/sse", adaptor.HTTPHandler(handler(dashboardHandler)))
	app.Listen(":3000")
}

func handler(f http.HandlerFunc) http.Handler {
	return http.HandlerFunc(f)
}
func dashboardHandler(w http.ResponseWriter, r *http.Request) {
	client := &Client{name: r.RemoteAddr, events: make(chan *DashBoard, 10)}
	go updateDashboard(client)

	w.Header().Set("Access-Control-Allow-Origin", "*")
	w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
	w.Header().Set("Content-Type", "text/event-stream")
	w.Header().Set("Cache-Control", "no-cache")
	w.Header().Set("Connection", "keep-alive")

	timeout := time.After(1 * time.Second)
	select {
	case ev := <-client.events:
		var buf bytes.Buffer
		enc := json.NewEncoder(&buf)
		enc.Encode(ev)
		fmt.Fprintf(w, "data: %v\n\n", buf.String())
		fmt.Printf("data: %v\n", buf.String())
	case <-timeout:
		fmt.Fprintf(w, ": nothing to sent\n\n")
	}

	if f, ok := w.(http.Flusher); ok {
		f.Flush()
	}
}

func updateDashboard(client *Client) {
	for {
		db := &DashBoard{
			User: uint(rand.Uint32()),
		}
		client.events <- db
	}
}

```

```js
// JS client
const source = new EventSource("http://localhost:3000/sse")
      source.onmessage = (event) => {
        console.log("OnMessage Called:")
        console.log(event)
        console.log(JSON.parse(event.data))
      }
```

[Repository link](https://github.com/rafaelgfirmino/dev-to/tree/main/SSE)
🌱 Digital Gardening | LIVE replay | 6-6-2021
Tags: blog, webdev, techtalks
Published: 2021-06-16 01:34:26

---
title: 🌱 Digital Gardening | LIVE replay | 6-6-2021
published: true
description: 
tags: blog, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh53zxm1y5fksahkweb5.png
---
Which UI is better?
Published: 2021-06-16 02:12:24

> Being a backend developer, it is really hard to create a good user interface. 

## Problem
I want to create a page for my personal website, where user's can write blog posts. Each post will have a `title`, `description` and `body`. 

I would like to set `min` and `max` length for `title`, `description` and `body`. 

![Lengths](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuw837vtwf32ecn7auer.png)

As you can see in the above image, each has a min and max length, except `body` which has only min length.

## Solution
- 1

I am accepting `title`, `body` and `description` separately. 

![title](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32tvsjwpcdr37k8rhgc6.png)

Here, `title`, `body` and `description` have a message at bottom right corner, indicateing about length.

- 2

In the 2nd solution, i'm accepting all at once.
![All](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcsz9mwty7oqfysc68ni.png)

Here, `is it possible...` will be considered as title and `many time...` will be considered as description. 

Speaking technically: First `h1` tag of markdown will be used as title and first `p` tag of markdown will be used as `description`. 

At the bottom, message for everyone. 

## Which is better?

I can not judge, which UI is better?
How to fix regeneratorRuntime is not defined?
Tags: react, parcel, debug
Published: 2021-06-16 02:07:35

I have ran into a problem, the error is `regeneratorRuntime is not defined` while working with React and [Parcel](https://parceljs.org/) bundler. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmo92vj3ke9zrwuixgfp.png)

The problem appeared after I added an async function and while searching the problem, I found a [stack-overflow solution](https://stackoverflow.com/questions/33527653/babel-6-regeneratorruntime-is-not-defined) but it didn't work. So, don't use this method.


## Solution

First, I found this solution:

- add `import "babel-polyfill";` at the top of the file that you are using the async function.

**BUT**

- later learned that babel-polyfill is deprecated. So, to solve the regeneratorRuntime problem, do this:

- Install regenerator-runtime
`npm install --save regenerator-runtime`
- Update webpack file
`entry: ["regenerator-runtime/runtime.js", "<your enter js file>"]`
- require `import 'regenerator-runtime/runtime'` at the top of the file that you're using async function

I didn't edit webpack, because I'm using Parcel, but just importing regenerator-runtime/runtime at the top of the file solved the problem. 

## Resources

[BABEL/ReferenceError regeneratorRuntime is not defined #9849](https://github.com/babel/babel/issues/9849)
Speed up your florist with Trello 
Tags: productivity
Published: 2021-06-10 09:04:50

**After reading, write how do you like the idea? Should I start developing?**

My wife and I sell flowers and bouquets in our flower shop since 2019. We have 2 florists in our team. I would like to share my idea on how I plan to get additional revenue using **Trello**.

The faster the florist creates a bouquet, the more customers can serve and bring additional revenue to our store. The creation of a bouquet can be divided into stages: 

1. Prepare the ingredients (flowers, pack)
2. Peel the stems of flowers
3. Arrange flowers
4. Pack the flowers

I have an idea how to increase the speed of creating a bouquet without increasing costs and without putting pressure on the florist.

![graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chiy9hi0yk0my0ihixyq.png)

1. Create columns in Trello with the name of each stage
2. Create a card at the initial stage. The florist should indicate on the card the size of the bouquet: small, medium, large (the florist needs to move the card to each column during the process of creating a bouquet).
3. Record the time spent at each stage and save it to the database
4. At each next creation of a bouquet, display on the card the average time at each stage
5. Display on a graph the changes in percentage of the time spent for each stage (for example, the "Pack the flowers" stage took 10 minutes when creating a bouquet for the first time, and 8 minutes when creating a bouquet for the second time, and 7 minutes when creating a bouquet for the third time. On the graph, the progress for the first bouquet will be 0% , the second + 20%, and the third +30%).
6. Display on a graph the progress of all florists for comparison. 

![board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3poyjq22r4p40kyz7upb.png)

The time displayed on the cards will motivate the florist to get the job done faster. The progress graph will also motivate the florist to keep accelerating. And comparing speed with other florists will create a competitive moment, which will also increase motivation.

If you have any suggestions on how to improve this idea please write. 

P.S. Sorry for my English :stuck_out_tongue: