teleren/devto huggingface dataset:
Reactjs Springboot CRUD Mysql
Tags: react, springboot, mysql, crud
Published: 2020-12-10 14:21:52

# reactjs-springboot-mysql

Link: https://loizenai.com/springboot-react-mysql-crud-example/

Tutorial: SpringBoot + React + MySQL: SpringBoot React.js CRUD Example

In the tutorial, I introduce how to build an “SpringBoot React.js CRUD MySQL Example” project with the help of SpringData JPA for POST/GET/PUT/DELETE requests with step by step coding examples:

– SpringBoot project produces CRUD RestAPIs with MySQL database using the supporting of Spring Data JPA.
– React.js project will consume the SpringBoot CRUD RestAPIs by Ajax then show up on Reactjs component’s views.

List to do:

– I draw a fullstack overview Diagram Architecture from React.js Frontend to MySQL database through SpringBoot RestAPI backend.
– Develop SpringBoot CRUD RestAPIs with the supporting of SpringWeb Framework.
– Implement Reactjs CRUD application with Ajax fetching APIs to do CRUD request (Post/Get/Put/Delete) to SpringBoot Backend APIs.
– I create a testsuite with a number of integrative testcases with CRUD RestAPI requests from Reactjs to do CRUD requests to SpringBoot RestAPIs Server and save/retrieve data to MySQL database.

Related posts: Reactjs + SpringBoot Serial Tutorials ->

1. How to Integrate Reactjs with SpringBoot Tutorial
https://loizenai.com/integrate-reactjs-springboot/

2. SpringBoot + React + PostgreSQL: SpringBoot React.js CRUD Example
https://loizenai.com/reactjs-springboot-crud-postgresql/

3. Tutorial: SpringBoot + React + MongoDB – SpringBoot React.js CRUD Example
https://loizenai.com/springboot-reactjs-mongodb-crud/
How to Configure OpenShift 4 Cluster Nodes: MachineConfig Operator and CoreOS
Tags: kubernetes, openshift, fedora, crio
Published: 2020-12-10 14:19:20

---
title: How to Configure OpenShift 4 Cluster Nodes: MachineConfig Operator and CoreOS
published: true
description: Production OpenShift Cluster in 35 Minutes, Part III
tags: kubernetes, openshift, fedora, crio
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
OpenShift and OKD 4 are using CoreOS for cluster nodes. The only way to configure them is to use Ignition and OSTree. Both of them are automated with MachineConfig Operator, which we will see in this video - how it works and how to use it to customize the cluster:

{% youtube ntP4DVjrRd8 %}

***

Production OpenShift Cluster in 35 Minutes:

* Part I, [First look at OKD 4](https://dev.to/mkdev/first-look-at-okd-4-and-the-new-openshift-installer-2if5)
* Part II, [3 Core Features of OpenShift 4 Cluster Management](https://dev.to/mkdev/3-core-features-of-openshift-4-cluster-management-fedora-coreos-cri-o-and-machineset-api-3i1o)
* Part III, [How to Configure OpenShift 4 Cluster Nodes](https://dev.to/mkdev/how-to-configure-openshift-4-cluster-nodes-machineconfig-operator-and-coreos-4g9b)
* Part IV, [OpenShift 4 Troubleshooting](https://dev.to/mkdev/openshift-4-troubleshooting-your-cluster-is-broken-what-s-next-2lg7)

*You can always hire [our mentors](https://mkdev.me/en/specializations) and learn directly from them!*
A journey of resilience with Jeffrey Chang
Tags: toronto, motivation, codingbootcampstuden, podcast
Published: 2021-02-22 13:18:17

---
title: A journey of resilience with Jeffrey Chang
published: true
date: 2020-12-10 14:08:44 UTC
tags: toronto,motivation,codingbootcampstuden,podcast
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*HzN7KwW8OcYEUvP6nOSkUg.png)

This weekend I got an opportunity to chat with @Jeffrey Chang about his journey.

From working at a bakery to working at an auto shop to becoming a software developer at Telus Digital, he walks us through all of the ups and down’s he went through.

To me personally, Jeffrey’s story stands out as a journey of resilience. A prime example of what determination and grinding it out can do in life.

Some key takeaways:

- Give yourself a shot and take a leap of faith (Jeffrey decided to invest $10,000 for the Bootcamp even when his financial situation was not that easy)
- Stick with it until it clicks, and trust me, it will click soon enough ~ Jeffrey
- Find the positive out of the negative (Jeffrey talked about his “failed” tech interview, which he turned into a positive as it provided him with the desire to learn)
- “Be a sponge and soak up all the knowledge you can” ~ Jeffrey Chang 😛

Some special advice for new grads/juniors:

- Contribute to open source as much as you can. Ask yourself “What can I do to make this project better?”( Additional perk: Get your code reviewed by Senior dev’s around the world for free 😎 )
- Don’t spread yourself too thin, focus on one thing at a time. No more trying to learn docker and Vue.js at the same time.

And finally my favourite quote from the conversation:

“You’re not an idiot, you just do not understand it at the moment” ~ Jeffrey

Please feel free to reach out to Jeffrey if anyone needs any help. He provides his email in the conversation.

We talked about a lot of other cool stuff, join us on youtube, Spotify, and every other place you get your podcast from. (Search for Everyone Sucks)

Spotify: [https://open.spotify.com/episode/7tJlRnv4x9wKC0RbKCAYlg?si=4RHIGYp7Rnu450zoFtBkLg](https://open.spotify.com/episode/7tJlRnv4x9wKC0RbKCAYlg?si=4RHIGYp7Rnu450zoFtBkLg)

Apple Podcasts: [https://podcasts.apple.com/ca/podcast/everyone-sucks/id1477730495?i=1000501827490](https://podcasts.apple.com/ca/podcast/everyone-sucks/id1477730495?i=1000501827490)

{% youtube JiyFK5q4Ag0 %}

* * *
Increase Space on Local Machine Disk
Tags: security, programming, computerscience
Published: 2020-12-10 13:59:08

Are you running low on space, Well Don't worry we will fix that in a few just by following simple steps in the tutorial below

And you will have your data intact after the operation is completed

Links to video

Youtube: [How to Extend Local C : Drive Without Loosing data in PC or Laptop](https://www.youtube.com/watch?v=Akex6h0Zfmo&t=23s)
Github: [larymak](https://github.com/larymak/)
Twitter: [larymak1](https://github.com/larymak1/)
PrimeVue 3.1.0 Brings 12 New UI Components For Vue 3
Tags: vue, vue3
Published: 2020-12-10 13:57:10

Your new favorite UI component library for Vue is updated to bring 12 new components, Localization API and Confirmation API along with numerous improvements.

**12 New Components** 
PrimeVue 3.1.0 is a major release that brings handy new components.

*   [Avatar](https://primefaces.org/primevue/showcase/#/avatar)
*   [Badge](https://primefaces.org/primevue/showcase/#/badge)
*   [CascadeSelect](https://primefaces.org/primevue/showcase/#/cascadeselect)
*   [Chip](https://primefaces.org/primevue/showcase/#/chip)
*   [ConfirmDialog](https://primefaces.org/primevue/showcase/#/confirmdialog)
*   [ConfirmPopup](https://primefaces.org/primevue/showcase/#/confirmpopup)
*   [Divider](https://primefaces.org/primevue/showcase/#/divider)
*   [Knob](https://primefaces.org/primevue/showcase/#/knob)
*   [ScrollTop](https://primefaces.org/primevue/showcase/#/scrolltop)
*   [Skeleton](https://primefaces.org/primevue/showcase/#/skeleton)
*   [Splitter](https://primefaces.org/primevue/showcase/#/splitter)
*   [Tag](https://primefaces.org/primevue/showcase/#/tag)

**Confirmation API** 
Confirmation API makes it trivial to implement the repetitive confirmation tasks, the UI consists of [ConfirmDialog](https://primefaces.org/primevue/showcase/#/confirmdialog) and [ConfirmPopup](https://primefaces.org/primevue/showcase/#/confirmpopup) whereas the API is used via a ConfirmationService with full support for Options API and Composition API. 

**Locale API** 
It is cumbersome to manipulate the translations and localization options on each page so [Locale API](https://primefaces.org/primevue/showcase/#/locale) is created to solve this by offering a reactive global configuration to localize PrimeVue components with ease. 

**Changelog** 
Visit [Changelog](https://github.com/primefaces/primevue/blob/master/CHANGELOG.md) for more information about the improvements. 

**Vue 2 Users** 
If you are on Vue 2, no worries because PrimeVue 2.x is actively maintained, version 2.3.0 will bring these new enhancements to Vue 2. 

**Download** 
PrimeVue is free library to use under MIT License and available at [NPM](https://www.npmjs.com/package/primevue). 

**Roadmap** 
Upcoming enhancements will make PrimeVue even better;

*   Advanced [Data Filtering](https://primefaces.org/primeng/showcase/#/table/filter) (e.g. PrimeNG)
*   Standalone [VirtualScroller](https://primefaces.org/primeng/showcase/#/virtualscroller) (e.g. PrimeNG)
*   New VirtualScroller for [DataTable](https://primefaces.org/primeng/showcase/#/table/virtualscroll) (e.g. PrimeNG)
*   VirtualScroller for [Select components](https://primefaces.org/primeng/showcase/#/dropdown) (e.g. PrimeNG)

Always bet on Prime!
.Net Core - Launch Browser when application start
Tags: netcore, csharp
Published: 2020-12-10 13:47:22

You want to distribute a .Net Core  App and don't want user to have to launch a browser manually.

In your publish settings choose :

 - standalone 
 - single file application

In your program.cs put the following code :

an adaptation of the following post [LaunchBrowser](https://stackoverflow.com/questions/38576854/how-do-i-launch-the-web-browser-after-starting-my-asp-net-core-application/53570859#53570859)

```csharp
  using Microsoft.AspNetCore;
  using Microsoft.AspNetCore.Hosting;
  using System.Diagnostics;
  using Microsoft.AspNetCore.Builder;
  using static System.Runtime.InteropServices.RuntimeInformation;
  using static System.Runtime.InteropServices.OSPlatform;
  using Microsoft.Extensions.Hosting;

  class Program
  {
    static void Main(string[] args)
    {
      string url = "http://localhost:54321/";

      using (var server = CreateServer(args, url))
      {
        StartBrowserWhenServerStarts(server, url);
        server.Run(); //blocks
      }
    }

    /// <summary>
    /// Create the kestrel server, but don't start it
    /// </summary>
    private static IWebHost CreateServer(string[] args, string url) => WebHost
        .CreateDefaultBuilder(args)
        .UseStartup<YourAppName.Startup>()
        .UseUrls(url)
        .Build();

    /// <summary>
    /// Register a browser to launch when the server is listening
    /// </summary>
    private static void StartBrowserWhenServerStarts(IWebHost server, string url)
    {
      IHostApplicationLifetime serverLifetime = (IHostApplicationLifetime)server.Services.GetService(typeof(IHostApplicationLifetime));
      serverLifetime.ApplicationStarted.Register(() =>
      {
        var browser =
            IsOSPlatform(Windows) 
              ? new ProcessStartInfo("cmd", $"/c start {url}") 
              : IsOSPlatform(OSX) 
                ? new ProcessStartInfo("open", url) 
                : new ProcessStartInfo("xdg-open", url); //linux, unix-like

        Process.Start(browser);
      });
    }
  }
```
Create AWS Backup Plan
Tags: devops, aws, backup, cdk
Published: 2020-12-10 13:12:43

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

- AWS Backup is a fully managed backup service that makes it easy to centralize and automate the backup of data across AWS services. 

- Using AWS Backup, you can centrally configure backup policies and monitor backup activity for AWS resources, such as Amazon EBS volumes, Amazon EC2 instances, Amazon RDS databases, Amazon DynamoDB tables, Amazon EFS file systems, Amazon FSx file systems, and AWS Storage Gateway volumes. 

- This article gives an example of how to create backup plans for volumes (root and mount) of multiple instances using AWS CDK based on Tags. For example,
```
Tags
vc:aws-volume:kind - ebs-ddb
```
Any volumes with this tag within a region will be included in the backup plans resource assignment.

###Aws-Backup plan includes two mains thing: **Backup rules** and **Resource assignments**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bcgcoidjfpmhx72zus1i.png)

**1. Backup rule**
The rule says daily backup and the backup will expire after one day
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xzdeui8inakrfp879nnf.png)

**2. Resource assignments**
- It can base on Tag or Resource ID
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kyss8riia29mz6z1p2jp.png)

- This post introduces resource on Tag
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/md94yu5wh37xotzbdh72.png)

###Using AWS CDK (Cloud Development Kit) to create the backup plan
**1. To get familiar with CDK, go to [Your first AWS CDK app](https://docs.aws.amazon.com/cdk/latest/guide/hello_world.html)**

**2. Create cdk-aws-backup project**
```
mkdir cdk-aws-backup
cd cdk-aws-backup
cdk init -l python
```

**3. Create stacks through code**
Source: https://github.com/vumdao/cdk-aws-backup
- Stacks: https://github.com/vumdao/cdk-aws-backup/blob/master/aws_backup/aws_backup_stack.py
- app: https://github.com/vumdao/cdk-aws-backup/blob/master/app.py

**4. Tag the resources using bash script**
Source: https://github.com/vumdao/cdk-aws-backup/blob/master/tag_volume.sh
- The script will loop all instances with name *-ddb-instance and then tag volumes of the instance as `Key=$region:aws-volume:kind,Value=ebs-storage`

**5. Run cdk deploy to create stack**
```
cdk deploy
```

**Note:** This post does not show the output of running cdk deploy because it contain AWS account information, leave comments here if there's any issue or need support
Django and Heroku
Tags: django, heroku, python, experience
Published: 2020-12-10 13:02:04

I have used Heroku for hosting a Node.js/Express application once before. It was really easy. I created a project in Heroku, chained it to my Github project and indicated it as an automatic build. All I did was this. I just saw Heroku identifying my language and platform correctly, building and deploying it. Adding a PostgreSQL instance was not problematic too. I read the connection string from the environment, restored a backup and app get run instantly. Based on this experience, I decided to go the same path for a Django/Python project.

It did not work in the first try. Soon, I realized that I should add many stuff to project so Heroku can run my app. Additionally, as it was the first time that this project was going to be hosted in production, I did some work to get it to work. For instance, used `dj_database_url` for parsing PostgreSQL's connection URL. Then enabled correct `CORS` policy and and set `ALLOWED_HOSTS`.

After set the project to run correctly in a production instance, I added some stuff required by Heroku. It included `Procfile` and `requirements.txt` and their proper content. While searching online, I found [Heroku's formal sample for a bare minimum Django project for Heroku](https://github.com/heroku/python-getting-started). It helped me a lot. Finally, I saw my project's API run correctly and happily.

My Django/Python had an app which was based on server side rendering. I just tried that part and, oh my god! it was not working! `CSS` and `JS` files were not served correctly. I just saw a bunch of `404` errors in the browser's console. Investigating the problem, I realized that it is because of static file not configured correctly. My local had not any problem, But Heroku one showed either 404 error or Heroku build errors. I did about [10 commits](https://github.com/afsharm/wps/) so the problem solved.

I have many experiences with ASP.NET/IIS, it was not surprising me if the IIS configuration is hard. But I expected an easier process with Django/Python. By the way, project is now running in Heroku based on PostgreSQL happily!
Daily Developer Jokes - Thursday, Dec 10, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-10 13:00:19

---
title: "Daily Developer Jokes - Thursday, Dec 10, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Dec%2010%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258febded7.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why couldn’t the user update a file on a shared server?

___A:___ They didn’t have the write permissions
 -->
Finally Native Reactive JDBC Driver for Oracle Database
Tags: java, jdbc, reactive, oracle
Published: 2020-12-10 12:36:07

We finally have Reactive extensions for the Oracle JDBC driver that uses java.util.concurrent.Flow and Reactive streams.

The Reactive Extensions are a set of methods that extend the JDBC standard to offer asynchronous database access.

![Screenshot 2020-12-10 at 5.57.11 PM](https://dev-to-uploads.s3.amazonaws.com/i/ffzndtypsh7xs42xro8n.png)
 
The Reactive Extensions use non-blocking mechanisms for creating Connection objects, executing SQL statements, fetching rows, committing transactions, rolling back transactions, closing Connection objects, and reading and writing BFILEs, BLOBs, and CLOBs.
You can read more details [here](https://docs.oracle.com/en/database/oracle/oracle-database/21/jjdbc/jdbc-reactive-extensions.html#GUID-10293AD5-C9AD-4B99-8C53-879072307D76)
Looking for an easy gamification solution...?
Tags: saas, gamedev, programming, laravel
Published: 2020-12-10 12:25:59

Do you want to gamify your app?

Would you like to enjoy some of the [benefits](https://r4nkt.com/blog/why-gamify-my-app) that gamification can bring to your or your users?

Would you like to save time and money to get a rich set of gamification features?

If you said, "Yes", to any of these questions, then you will want to take a look at [r4nkt.com](https://r4nkt.com).

## What is r4nkt...?

R4nkt is a drop-in service that makes introducing gamification to your application easy. It is meant to be used via API, which means that it is platform-agnostic. It looks to handle as much of the heavy lifting of gamification as possible, currently supporting many common gamification features that will add value to your application.

## Features
Some of its high-level features include:
- Platform-agnostic: Once a r4nkt game is created, it can be managed and used via API from any platform that can make HTTP requests.
- Standard gamification resources: Define your own achievements and the actions and criteria required to earn them. Create and use different kinds of leaderboards for different purposes.
- Quality of life improvements: Features like reactions and achievement stacks aim to improve the quality of life for r4nkt developers.
- Language/Framework Packages: We currently have a [PHP](https://php.net) SDK and a [Laravel](https://laravel.com) package to help get up to speed more quickly. More will be added as time allows and need/interest dictate.
- Flexible admin options: Use the API or our [Laravel Nova](https://nova.laravel.com)-based GUI admin tool.
- Secure: All connections are secure and data is protected.
- Powerful backend: Powered by [AWS](https://aws.amazon.com).
- Respects privacy: R4nkt does not collect your users' personal data...at all.

## What now...?

R4nkt is ready to be opened up to a few people who are in a position to "kick its tires", so to speak. We are hoping for feedback that will help us iron out wrinkles, address any unforeseen pain points or missing functionality, and determine near-future feature development.

## Interested...?

So...if you're interested, please [visit us online](https://r4nkt.com) to register your email address with us or follow us and let us know via [Twitter](https://twitter.com/r4nkt). We will be in touch with you after that.

You can also read a little more on [our blog](https://r4nkt.com/blog/are-you-ready-to-try-r4nkt).

Thanks...! We're looking forward to working with you.
Microblogging
Tags: blogging, watercooler, microblog, microblogging
Published: 2020-12-10 12:22:21

---
title: Microblogging
published: true
description: 
tags: #blogging, #watercooler, #microblog, #microblogging 
//cover_image: https://direct_url_to_image.jpg
---

Some weeks ago, I started microblogging on my regular blog. At first it was just an experiment, but I like it and I think I am going to stick with it.

I found some other examples: 
* https://jlelse.blog/
* https://micro.maiquemadeira.com/

Is anyone else microblogging on his own "plattform" like Jekyll, Hugo etc.?
How to Install FontAwesome with Yarn and Webpacker in Rails 6?
Tags: fontawesome, ruby, rails
Published: 2020-12-10 12:04:14

---
title: How to Install FontAwesome with Yarn and Webpacker in Rails 6?
published: true
tags: 
- fontawesome
- ruby
- rails
canonical_url: https://blog.corsego.com/rails-6-install-fontawesome-with-webpacker
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/m6u6xw2l37try84dz5x7.png
---

# **1. console:**

```
yarn add @fortawesome/fontawesome-free

```

# **2. javascript/packs/application.js:**

```
import "@fortawesome/fontawesome-free/css/all"

```

# **3. Check if it works:**

Add couple of icons in any .html.erb (view) file:

```
<i class="far fa-address-book"></i>
<i class="fab fa-github"></i>

```

That’s it!😊

* * *

# **Relevant links:**

- [see all FontAwesome Icons here](https://fontawesome.com/icons?d=gallery&m=free)
- [Yarn package](https://yarnpkg.com/package/@fortawesome/fontawesome-free)