teleren/devto huggingface dataset:
Reactjs for front-end with Java backend
Tags: react, java, spring
Published: 2019-11-21 07:32:39

Hi all,

This is the first time we are going to use reactjs in front-end with a combination of Spring boot project. Spring framework is using for backend and exposed API to access data from the server.

Can we use reactjs without installation in the server? by using CDN in the HTML file can we use it. if we use CDN based reactjs library, can we able to get benefits from reactjs(components and other features). 

How can we use reactjs with complete features with java platform? 
please guide to choose the right path for further development. and if you have documents link then please share it with us.
fill HTML forms without JavaScript
Tags: html, forms, autocomplete, payment
Published: 2019-11-21 07:29:06

If you want take easy life for your WEB users, you can tell browser what exactly form value it shudl be populate automatically. And you **don't need JavaScript** for it!

> What make sens fill sedond or third time, what is my name in each page?
- none sens ;) 


## Autocomplete user data

Let's image that I must gaterign phone number nad first user name i my app. Usuall in HTMl we can write that:
```html
<label for="form_name" >First Name: </label>
 <input id="form_name" name="app_name" />
<label for="form_phone" >Phone: </label>
 <input id="form_phone" name="app_phone" />
```

And this is time for super helper **autocomplet=""** form attribute. List of neede option is bellow

the autocomplete attribute | info
-----------|-----------------
given-name | first name
family-name | last name (Surname)
street-address | adress
postal-code | zip code
address-level2 | city
email | user email
tel | phone

So, let's tuning this form. 

```html
<label for="form_name" >First Name: </label>
 <input id="form_name" name="app_user_name"  autocomplet="given-name"/>
<label for="form_phone" >Phone: </label>
 <input id="form_phone" name="app_user_phone" autocomplet="tel"/>
```
At now if user filled this data in another page, on your page this values will be filled automatically too, please check. Simple form attribute but very helped !

## Bonus, Credit Card autocomplete

>don't lose money, have this knowledge !

I usually resignation of payment, when I must fill all information about my credit card, this is boring, additionally on mobile phone for me it give me flustation.

If you see that users resigns in buy 
You can help him, please use this special form attribute intended for credit cards

Credit Card autocomplete attribute | info
-----------|-----------------
cc-name | name on card
cc-number | card Number
cc-csc | card security code
cc-exp | expiry day

```html
<label for="fCardName" >Name on card: </label>
 <input id="fCardName" name="app_card_name"  autocomplet="given-name"/>
<label for="fCardNumber" >Card Number: </label>
 <input id="fCardNumber" name="app_card_number"  autocomplet="cc-number"/>
<label for="fCardSecrect" >CVC: </label>
 <input id="fCardSecrect" name="app_card_csc"  autocomplet="cc-csc"/>
<label for="fCardEnd" >Expiry: </label>
 <input id="fCardEnd" name="app_card_expiry"  autocomplet="cc-exp"/>

```

<hr >

## Summary
>save time your user, and they come back to you.

if you are still **hungry for knowledge**, you will find more HTML  forms attributes:
* all **list of autocomplete** you can find on [WHATWG community](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)
* o read next, **good article** about [autocapitalize, autocorrect and  spellcheck](https://dev.to/deadlybyte/3-html5-input-attributes-to-help-mobile-users-1ofp)

<hr>
Apprenez à développer sur la Blockchain Waves
Tags: wavesplatform, ride, blockchain, smartcontract
Published: 2019-11-21 07:24:33

Rejoignez notre chaîne Waves Dev France, une chaîne dédiée à l'apprentissage du développement d'applications décentralisées (dApp) sur la Blockchain Waves.

https://www.youtube.com/channel/UC2DS9ktTKWGW3NHHV2Ja3_A

Vous y trouverez régulièrement des tutoriaux, des wébinaires et autre vidéos sur les nouveautés liées à la plateforme Waves.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zoiqzo1mue5363lgovz7.png)

De l'ensemble des outils liés à son écosystème en passant par les Smart Contracts, le language RIDE, les NFT, Oracle etc, l'ensemble des sujets seront abordés.

Premier Wébinaire le 17 décembre à 17h

Enregistrez vous!!
https://www.meetup.com/Paris-Waves-Blockchain-Meetup-Group/events/266557857/

A bientôt!!!

Suivez nous sur:
Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr
Facebook : https://www.facebook.com/wavesfr
Dev.to : https://dev.to/gegesures
CV-QAOA - Quantum Variational / Aproximation Algorithms using continuous variable quantum computing 
Tags: qaoa, vqe, quantumcomputing, cvqc
Published: 2019-11-21 06:58:38

Here two playlists with my reviews on 2 separate Jupyter Notebooks on QAOA for continuous variable quantum computing

-> This is Jack Ceroni's work: continuous variable quantum computing https://www.youtube.com/watch?v=mdzSbkmpPPI&list=PLsedzcQz4wyU1leMCCzcSw8JDdX5QCl3S

-> This is Michal Stechly's work: https://www.youtube.com/watch?v=qTIkTh4_oEQ&list=PLsedzcQz4wyWP7PP93c7WoKLQYtEh8TTM

Have fun :)
Procedural Generation with a Quantum Computer
Tags: proceduralgeneration, quantumcomputing, minetest, gaming
Published: 2019-11-21 06:54:04

Here a playlist of me playing with a James Wooton Project about procedurally generating maps for minetest using a quantum computer

https://www.youtube.com/watch?v=zg7BzZJPnac&list=PLsedzcQz4wyVM5udLhPvDj50uG_x3UFPP

Enjoy!
Refactor to Redux Toolkit and Prototying OBS Websocket
Tags: todayilearned, devjournal, blog
Published: 2019-11-21 06:51:35

### Check Out the Stream @ [https://twitch.tv/talk2megooseman](https://twitch.tv/talk2megooseman)

# Today Objective

✅ Going to try prototyping using OBS-Websocket for a brand new feature I want to do for Stream Closed Captioner

⬜ Finishing moving Stream-CC extensions UI to use Redux Toolkit [https://redux-toolkit.js.org/](https://redux-toolkit.js.org/)

{% github https://github.com/Palakis/obs-websocket %}

# Notes

### Redux

Starting the stream off with continued of adding Redux Toolkit to the project. Along the way trying to reorganize and refactor and configuration and build processes that are currently existing in the project.

One thing want to configure, set things up for absolute imports for easier include path.

In order to set this up so that `@` is the absolute start of the file path I needed to config webpack and create a `jsconfig.json` file.

Here is the snippet of the change I made in webpack:
```javascript
    resolve: {
    	extensions: ['*', '.js', '.jsx'],
    	alias: {
    		'@': path.resolve(__dirname, 'src/'),
    	},
    }
```
This change was made the module portion of the webpack config, this makes it so that I can import absolute path for my files like this `'@/utils/Constants` 

But this sort of import path doesn't play nice with VSCode path IntelliSense so there is one more step. Creating a `jsconfig.json` file to tell it what the `@` means.
```javascript
    {
      "compilerOptions": {
        "baseUrl": "./src/",
        "jsx": "react",
        "paths": {
          "@": ["src/"]
        }
      }
    }
```
### OBS Websocket

Spent some time taking a look at prototyping using OBS Websocket and its API to send captions as part of the stream. This will be awesome since the captions will show up native and that means the captions will also show up in the VODs.

If you don't know what OBS Websocket is. Its a plugin for OBS that exposes events so that you can remotely subscribe or controls aspects of your OBS and stream. 

And the experiment was a huge success. Tried out connecting to the web socket on [codesandbox.io](http://codesandbox.io) with a hard-coded string and it work!! [https://codesandbox.io/s/eloquent-ganguly-v291z](https://codesandbox.io/s/eloquent-ganguly-v291z)

So next step will be to integrate this as part of the Stream-CC dashboard with input field for settings. So that we can start streaming the CC text straight to OBS.

# Shoutouts and Thanks

rw_grim

> Thanks for the 11 month resub
Thank you for the 200 bits

CodingGarden
> Thanks for the raid

JamesMontemagno
> Thanks for the 110 bits
Thanks for gifting a sub to JuanCarlospaco

# Future action items

⬜ Integrate OBS Websocket JS into dashboard [https://codesandbox.io/s/eloquent-ganguly-v291z](https://codesandbox.io/s/eloquent-ganguly-v291z)
My friends won't read my stuff
Tags: jokes
Published: 2019-11-21 06:30:15

Can we have a **#meme** tag DEV Team, Please Thanks ;)

<img src = "https://drive.google.com/uc?export=view&id=1M6WGnDaGbamyWb0XxOOxwVky67ng4OG2" height="400px">
<figcaption>Me right now</figcaption>
Why you should be using async/await
Tags: javascript, tutorial
Published: 2019-11-21 05:39:30


​Promises are an incredibly important part of JavaScript. It allows us to hook into the completion of asynchronous calls, making chained asynchronous operations simple.
​
But there is a (not so) tiny downside - Promises are not the best solution in terms of prettiest syntax.
​
The `async` and `await` keywords are syntactic sugar for Promises. They aid in presenting the asynchronous code in a synchronous way. They introduce no new concepts, but they change the way that Promise-based code is written.
​
## Before/after async/await
​
Here is some code that uses plain Promises:
​
```js
const doAsynchronousStuff = ...; // function that returns a Promise
​
doAsynchronousStuff().then(result1 => {
  return doAsynchronousStuff(result1);
}).then(result2 => {
  return doAsynchronousStuff(result2);
}).then(result3 => {
  return doAsynchronousStuff(result3);
}).catch(e => {
  // handle the error
});
```
​
Notice the use of callback functions. However, with `async/await` this becomes:
​
```js
try {
  const result1 = await doAsynchronousStuff();
  const result2 = await doAsynchronousStuff(result1);
  const result3 = await doAsynchronousStuff(result2);
} catch (e) {
  // handle the error
}
```
​
Notice how it looks just like regular, synchronous, non-Promise-based code, except it supports waiting for the Promise to be resolved!
Collapse
Why you should develop STO Platform?
Published: 2019-11-21 05:38:59

Security Token Offering (STO) is the latest fundraising strategy used by crypto startups across the globe. STO is a credible and reliable crowdfunding strategy where tokenized security assets are involved.

<h3>Security Tokens are usually classified into three different types:<h3>

<b>Debt Tokens<b>

Debt Tokens are the security tokens that represent debt securities for fundraising.

<b>Asset-Backed Tokens<b>

Asset-Backed Tokens are the tokens that are used to enhance the potential of raising the funds with asset securities. 

<b>Equity Tokens<b>

Equity Tokens are the ones that represent the ownership of the company. They guarantee equity rights both for the investors and the issuers. 

<h3>Importance of STO Platform:<h3>

Cryptocurrency startups can now start developing an <a href="https://icoclone.com/blog/sto-issuance-platforms-best-sto-platform-development-services/">STO Issuance Platforms</a> primarily with the following set of steps:

-Preparation Stage
-Pre-STO
-STO
-Post STO

To develop the best STO Platform, it is important to come up with a unique business idea to stand out from the crowd. You should integrate a variety of features in your STO Issuance Platform to bring in profits.

Moreover, Security Token Offering is going to be a hassle-free task when compared to ICOs. There are a couple of reasons behind it:

<b>Global Investor Participation<b>

Security tokens aren’t restricted towards a particular location. Those who pass the Howey Test and develop in accordance with SEC Guidelines can instantly get started with their fundraising scheme.

<b>Regulatory Compliance<b>

Since they are composed of regulatory compliance, STO Development is considered to be a credible and trustworthy task.

<b>Liquidity<b>

Security Tokens enable higher fractional ownership and thus bring in lower investment. Since a great number of people will purchase smaller stakes, most of the assets are considered to be liquid on the blockchain.

<h3>Looking to develop the best STO Platform?<h3>

If you are looking to develop the STO platform, you can instantly get in touch with Icoclone, the top-notch <a href="https://icoclone.com/blog/sto-development-company-security-token-offering-services/">STO Development Company</a> across the globe. We have a rich set of expertise in bringing in, feasible solutions!

Get in touch with us instantly for your unique business ideas!
Day 2
Published: 2019-11-21 05:23:19

Hey everyone,

Super late entry but unfortunately I had to work late today so I didn't get to code until 10:30 tonight! Tonight I decided to try something a little out of the box and I wanted to create a game using python. I figured this would be an easy entry into python and game development plus I figured it would be better to try something a little easier since I am pretty sleepy!

So once I opened my computer I began looking into pygame documentation when I remembered a framework that one of my friends had told me about named Turtle! I like using turtle due to it being more light weight and easier to use from what I've seen so I began a deep dive into more documentation. 

After some reading I got started on the game and I got a base game working that calculates the score and allows two users to play. I hope tomorrow I can put some finishing touches on it and upload it to my website! 

I hope you all have an amazing night and hopefully you all have an awesome morning and day tomorrow!
How to make a meme
Tags: creators, imgur, memes
Published: 2021-05-24 12:55:14

---
title: How to make a meme
published: true
date: 2019-11-21 05:20:35 UTC
tags: creators,imgur,memes
canonical_url: https://medium.com/tech-epic/how-to-make-a-meme-782667a08d9a
---

#### go to [https://imgur.com](https://imgur.com/)

![](https://cdn-images-1.medium.com/max/720/1*v0YXeTb9sPkH--DTAgXi6w.png)

If you’re on social media, you already know what an internet meme is. Still, for the uninitiated, a meme is a funny picture that goes viral on the web. It comes in various forms, though most of them feature photos or illustrations emblazoned with witty text usually written with caps lock on. But what if you want to make your own meme? There are websites that will allow you to quickly customize your meme from a host of existing ones. All you need to do is to choose a image template, type in your desired text, and share away. However, you can also create a whole new meme from scratch and, fortunately, it’s pretty easy to do.

Jump to [**Meme** Generator](https://en.wikipedia.org/wiki/Imgur#Meme_Generator) — [**Imgur**](https://imgur.com) is an American online image sharing community and image host founded by Alan Schaaf in 2009. Contents. 1 History.

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

The fastest and easiest way on the Internet to **create** your own  **memes**!

* * *
Show off your #Hacktoberfest Swag! 🦄
Tags: hacktoberfest, watercooler, discuss, meta
Published: 2019-11-21 04:56:47

Hey everybody! I got my Hacktober stuff in the mail. 

How do you like the stickers? This year's design is pretty rad.

![Developer with Practical Dev Stickers](https://thepracticaldev.s3.amazonaws.com/i/hzas7v5wj6j138rl85ro.jpg)
Snapshot/Restore Elasticsearch using Curator
Published: 2019-11-21 04:54:42


Well, first things first you will need Elasticsearch curator installed on your system.
I prefer installing it using pip as its easy peezy lemon squeezy. Just do
pip install elasticsearch-curator
There are other insane ways of installing it like using apt you can go to apt curator install instructions and follow the instructions there.
Now, the easy part. Follow along with the steps:

- Create a snapshot directory.

```mkdir -p /elasticsearchData/es-backup```

- Now, we need to give elasticsearch permissions to write to this directory. Provided the user running elasticsearch service is elasticsearch.

``` chown -R elasticsearch:elasticsearch /elasticsearchData/es-backup ```

- Now we will give this backup path to elasticsearch by making an entry to the elasticsearch.yml

```nano /etc/elasticsearch/elasticsearch.yml
and add
path.repo: ["/elasticseacrhData/es-backup"]```

- Next, we need to restart elasticsearch server. If you are on Ubuntu/Debian fire the below command.

```sudo systemctl restart elasticsearch```

- Now we will add the created repository on to elasticsearch.

```curl -XPUT -H "Content-Type: application/json;charset=UTF-8" 'http://localhost:9200/_snapshot/esbackup' -d '{
 "type": "fs",
 "settings": {
 "location": "/elasticsearchData/es-backup",
 "compress": true
 }
}'```

where esbackup is the name of the repository where ES data will be backed up.
You should get this ```{"acknowledge": true}``` response.

- Now, we can take backup by firing a curl command. But here we will use Elasticsearch Curator for backup and restore.

- You can get the yml files for curator here.
{% gist https://gist.github.com/shiveshsky/8615cb5236132815a61c77d3005d0a9e.js %}


Required yml file for curatorTo take backup go to the scripts folder and run

```/path/where/curator/is/installed/envs/envname_py3/bin/curator ./action_snapshot.yml - config ./curator_conf.yml```

To restore from the backup go to the scripts folder and run.

```/path/where/curator/is/installed/envs/envname_py3/bin/curator ./action_restore.yml - config ./curator_conf.yml```

Voila, you will see your backup RESTORED.
Login with Google in Laravel 6 using Socialite
Published: 2019-11-22 12:52:58

---
title: Login with Google in Laravel 6 using Socialite
published: true
date: 2019-11-21 04:40:52 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/laravel-6-socialite-login-with-google-gmail-accountexample.html
---

Here i will explain you step by step login with google account in laravel 6 using socialite laravel 6 socialite provide api to login with gmail account we can easily login using google account in laravel projectAs we know social media is a become more and more popular in the world every one h
em vs rem in CSS Font Size
Tags: css, beginners, webdev
Published: 2019-11-21 03:31:34

# em
Take this HTML as an example:
```html
<div id="outer">
    <h1 class="heading">Outer heading</h1>

    <div id="inner">
        <h1 class="heading">Inner heading</h1>
    </div>
</div>

```
And the following CSS:
```css
#outer { font-size: 30px; }
#inner { font-size: 20px; }
.heading { font-size: 3em; }
```
This is the result:

![em font size](https://thepracticaldev.s3.amazonaws.com/i/w1vw47wiu03tp4ywl59v.png)

If you inspect the headings in dev tools, switch to computed tab, the outer heading has font size 90px and the inner has 60.

That's because em based on its parent's font size. 
If I didn't specify a font size for #inner, the two heading would have the same size.

# rem
rem is a little bit different. Let's change the .heading font size unit from em to rem:
```css
.heading { font-size: 3rem; }
```
The two headings now have the same size:
![rem](https://thepracticaldev.s3.amazonaws.com/i/dsh48txhuyg98bhv2h1u.png)

rem doesn't base on the element's parent font size. It based on the root element's font size, which is the html element.

If you don't specify a font size for html, the default value is 16px in m any browsers.

As I inspected the headings in dev tools, switched to computed tab, font size of the headings is 48 (16 * 3).
I've created monor - an interactive monorepo command executor
Tags: monorepo, typescript, cli, node
Published: 2019-11-21 02:26:05

---
title: I've created monor - an interactive monorepo command executor
published: true
description: 
tags: monorepo, typescript, cli, nodejs
---

I've created monor, which is an interactive monorepo command executor. It filters all commands under Yarn Workspaces and executes them concurrently.

https://github.com/acro5piano/monor

![image](https://raw.githubusercontent.com/acro5piano/monor/master/demo-96c1d58d40ca44a1fe157b0bd0295b43.gif)

# What is monorepo?

Monorepo is a common pattern to management multiple packages.

The key concept is to include all related code into one repository other than split into multiple repositories. In monorepo project, each package can refer to each other which enables to sync packages version and dependencies.

A lot of open source projects, including React/Vue/Babel ...etc, use this pattern nowadays to manage their huge codebases.

# What is Yarn Workspace?

Yarn Workspace is a simple tool to manage monorepo. It is built-in feature of Yarn so if you use Yarn it means you can use Yarn Workspace out of the box.

For more information, please take a look at:

https://yarnpkg.com/lang/en/docs/workspaces/

# Why monor?

Every time I run Yarn Workspaces commands, we have to type `yarn workspace @myapp/package start`, which is a kind of hard work.

With `monor`, you can select your workspaces command interactively.

# Getting started

Install it globally:

```
npm -g install monor
```

Then just run `monor` to list all of your commands under your workspaces:

```
monor
```

# Features

- Read all `scripts` package.json under yarn workspaces' packages
- List and execute commands interactively
- Run multiple commands concurrently

# Development Status

Still in Beta. If you have any suggestions or feature requests, feel free to open new issues or Pull Requests!

Please run the following commands after you clone it:

```
yarn install
yarn example
yarn test:unit
yarn test:e2e
```
Gotta Learn Em' All - Amázons (Web Services)
Tags: aws
Published: 2019-11-21 02:23:28

---
title: Gotta Learn Em' All - Amázons (Web Services)
published: true
description: 
tags: aws
---

I had been sitting on this video for about a year but never had the time to finish editing it so I decided it was time to ship it.
Right Tool for the Job
Tags: productivity, career, computerscience, collaboration
Published: 2019-11-21 00:54:01



Could our tools; the good ones, things we use to __successfully get things done__ -- create __blind spots in our minds__?  Programming languages?  Productivity software?  [Collaboration techniques?](https://dev.to/frankfont/mobbing-for-everything-44kk)  [Words?](https://medium.com/@frankfont123/reality-and-a-joke-5ed34ddb85b6)

##Good enough

Many people are familiar with some variation of the quip "to a person with a hammer, everything is a nail."  This idea, this insight really, has been around for perhaps hundreds of years.  ([Lookup "law of the instrument" if you are curious about the idea's origins.](https://en.wikipedia.org/wiki/Law_of_the_instrument))

__Success doing things a particular way diminishes our interest and sometimes our awareness that there are better ways.__

Better might mean faster, or it might mean more repeatably, or more sustainably; or better might mean all of those things and more.

And sometimes finding a better way of "getting to a goal" exposes opportunities for outcomes that were otherwise impossible.

##So success creates blindness?  

Yeah, maybe sometimes it does.

##Hopeless? 

No. Acknowledging our tools change us is the first step toward [__harnessing this effect to our mutual benefit__](https://bigfathom.org).  When we tap into clues of our blind areas we can change our tools and powerfully impact what we will see.  And there are clues.  And we can see more.