teleren/devto huggingface dataset:
Food ERP’s advantages 
Tags: fooderp, erp
Published: 2021-06-15 10:39:44

<p><a href="https://softengine.com/products/softengine/food-one/"><em><strong>Food ERP</strong></em></a> is a system that has the potential to take your company to the top of the food industry. After the implementation of this system efficient allocation of resources is possible. Keep reading this article to know more about the advantages of food ERP.</p>
<p><strong>Improved Collaboration And Workflow</strong></p>
<p>Collaboration is an important part of a prosperous business. Workers are seldom reluctant to work in a collaborative manner however, without coordination and collaborative efforts a company cannot grow to its full potential. So as to negate this issue food ERP should be implemented in the food industry. With ERP software collaboration is child&rsquo;s play, data transfer inter or intra department flows seamlessly. Every set of data is available at a fingertip, one who can access the software can study data also. This tracking of projects in realtime and constant communication across the company. As a consequence, the efficiency of the whole system increases and operational cost reduces.&nbsp;&nbsp;&nbsp;</p>
<p><strong>Flexible Modularity&nbsp;</strong></p>
<p>It is foolish and unfeasible to code an ERP for a specific business but luckily enterprising resource planning system is available with the flexibility of modules. Particular businesses can adopt modules as per their needs. Another aspect involves software implementation. The deployment of software is done through the cloud, just software should be installed on computers and servers.&nbsp;</p>
The current state of RuntDeale!
Tags: cpp, gamedev, watercooler, raylib
Published: 2021-06-15 10:36:18

So... RuntDeale could be further along than I want it to be...
BUT, I am happy with what I got now, considering I've been moving it from language to language constantly (first it started as a web-game in JS, then I made a prototype in Python, then I tried to move to Java, then I eventually, after taking a bit of a break from it, I moved to GoLang... it was working well there, until I found out the [Go bindings](https://github.com/gen2brain/raylib-go) for [Raylib](https://www.raylib.com/) were broken... so then I moved to C, but that was just beyond my understanding, so... FINALLY, I ended up with C++).

Wow, that was a lot (in the thought portion).
For the Go version, I've put up two gamedev bug logs on [my YouTube channel](https://www.youtube.com/channel/UCSwxv-A5IL6gTswguxGW0lg).
For the C++ version, I recently released a video showing that the C (not C++) bindings for Raylib work perfectly fine, and I'm happy to be using them in my game.
The video can be found [here (RuntDeale C++ game demo (ver 0.0.0) - Sprites + Audio.)](https://www.youtube.com/watch?v=1y28YL6juSo).

The thumbnail for the video also includes a watermark for the game that I made recently.
The watermark, and the Tweet I put it in can be found [here](https://twitter.com/BaenenCalin/status/1397502021725532161).
This is the artwork that the watermark rests on-top of:
![Artwork of Rainville from RuntDeale. Rainville finally has a clearing between its storming clouds.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltltno49rpl1wvb2jjh4.png)
<br/>
On top of all of this, I've been trying to create clever ways to cut down on my "code footprint", since I still want my game's code to be readable (even if no one except me is interested in it), and one clever way I've decided to solve that issue is by making a custom form of Ini for my game's use case.
I'm planning for it to have "synonym keys" (so I don't have to write multiple lines with similar keybindings), mapping features, and other stuff in that vein.

Anyways, this is getting pretty long, so I'll leave it here.

#<center>Thanks for reading!<br/>Cheers!</center>
Machine Learning Applications: Natural Language Processing
Tags: article
Published: 2021-06-15 21:54:31

---
title: Machine Learning Applications: Natural Language Processing
published: true
date: 2021-06-15 10:05:07 UTC
tags: Article
canonical_url: https://reinforcement-learning4.fun/2021/06/15/machine-learning-applications-natural-language-processing/
---

Natural Language Processing is the ability of a computer to interpret human language.

NLP it’s not only about text processing but also about understanding sentences and documents.

By giving computers the ability to interpret human language, we can build better human-machine interfaces, extract information from non-structured data, and increment automation. Like Apple’s Siri and … 

[Continue reading Machine Learning Applications: Natural Language Processing →](https://reinforcement-learning4.fun/2021/06/15/machine-learning-applications-natural-language-processing/)
Flutter Tutorial - Calendar Event App [2021] With Day View & Week View - Flutter Syncfusion Calendar
Tags: flutter, calendar, app, tutorial
Published: 2021-06-15 10:03:21

Create a Flutter Calendar Event App with different views. Schedule appointments, edit and delete calendar events in Flutter. 

**Syncfusion [Flutter Calendar Widget](https://www.syncfusion.com/flutter-widgets/flutter-calendar): Flexible Event Scheduler**
* Visualize vivid appointments in different views including day, week, month, schedule, and timeline.
* Schedule recurring events and appointments in different time zones.
* Style calendar elements easily.
* Exclude nonworking days and nonworking hours to have a more focused view of your schedule.
{% youtube LoDtxRkGDTw %}
The Unofficial Dev.to CLI
Tags: cli, dev, node, showdev
Published: 2021-06-15 08:29:23


# The Dev.to CLI

Hello, everyone. 

A few months ago, around the first week of December 2020, I started working on this project. The project was a CLI app which used the [Dev.to API](https://docs.forem.com/api) to communicate with the website. I got caught up with other things and couldn't finish the project as I wanted to before making it public in front of the Dev.to community.

**Today, I put the project in community's hands, seeking for reviews, help and in hopes of making it better and usable.**

## [GitHub Repo](https://github.com/abhijit-hota/dev-to-cli)

*This project is a work in progress. Bear with the useless dependencies, ~~bad~~ no documentation and half-implemented features.*

## Roadmap
- ✅ Post a markdown file as an article with front matter validation.
- ✅ Get user's published and unpublished articles
- ✅ Get followers
- ✅ Get user's reading list and navigate to browser
- ✅ Use the Dev.to API key to authorize 
- ❌ Get and cache user info
- ❌ Read articles in terminal
- ❌ Get podcast episodes
- ❌ Use OAuth to authorize 
- ❌ Tests?
- ❌ Consistent API


P.S. This article is posted using the [dev-to-cli](https://github.com/abhijit-hota/dev-to-cli)
Mario in JavaScript using KaboomJS (video)
Tags: tutorial, javascript, kaboomjs
Published: 2021-06-15 09:59:27

{% youtube 2nucjefSr6I %}

In this video I show you how to build a Mario in JavaScript using the Kaboom.js library in my code editor of choice. If you want to see the full course on FreeCodeCamp, click here: https://www.youtube.com/watch?v=4OaHB0JbJDI

In the full course I use a preconfigured environment to code Mario. In this tutorial I create the game from scratch using my code editor of choice. 

Final code here: https://github.com/kubowania/mario

Imgur: https://imgur.com/a/F8Jkryq

___
⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

###You can also find me on:
* Twitter: https://twitter.com/ania_kubow
* Instagram: https://instagram.com/aniakubow
How our team writes React tests and other stuff too
 5 June 2021  8 minute read
Tags: react, javascript, testing, webdev
Published: 2021-06-15 09:54:40

Have you ever worked in a codebase where each test file was different to the next? Different terminology and grouping of test scenarios; different usages of snapshot testing and react-testing-library.

The effect of this meant wasted time reading a full test file to understand its structure before adding another test case. Creating new tests involved making multiple decisions; should I copy the structure of an existing test or create a new one? Should I use snapshot tests?

We solved this problem by defining guidelines to follow, that make writing tests that are easy to read and write, and would reduced wasted time on decisions.

Our guidelines are as follows:

- Group tests by render and user behaviours
- Use a snapshot test to validate render
- Use GIVEN-WHEN-THEN to describe branching logic
- Don't be afraid to stub child components
- Don't re-test functionality of other components
- Use a single expect statement per test
- Accept unit testing UI components can be difficult
- Try use `screen.getByRole`
- Isolate complex component logic, and test separately

For full detail on our approach and each guideline for writing tests see [https://whassup.github.io/blog/article/how-our-team-writes-tests](https://whassup.github.io/blog/article/how-our-team-writes-tests)
A simple image edge detection method
Tags: php, images
Published: 2021-06-15 09:52:30

## A simple image edge detection method

General steps:

1. Zoom pictures to improve efficiency
2. Picture grayscale
3. Calculate edges based on brightness

The third step is the most critical. There are many ways to directly contrast the adjacent brightness.

Instructions:

### Install
```shell
composer require lizhichao/one-img

```

### Example

```shell

$img_path = '1.jpg';
$img = new \OneImg\Border();
$img->setImg($img_path)
    ->scale(300, 300)
    ->outline()
    ->save(); //Output to browser

```

### effect

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


## Code warehouse

[https://github.com/lizhichao/doImg](https://github.com/lizhichao/doImg)

## My other warehouse welcome star

* [A minimalist high-performance php framework that supports swoole | php-fpm ](https://github.com/lizhichao/one)
* [clickhouse tcp client](https://github.com/lizhichao/one-ck)
Authentification
Published: 2021-06-15 06:52:49

# React authentication
## To-do 
Les choses à faire pour avoir une authentification fonctionnelle :
* Formulaire pour envoie du mot de passe et du nom d'utilisateur
* Un système de vérification nom d'utilisateur / mot de passe
* Un moyen de stocker le userId dans le client

## Formulaire
Le formulaire doit contenir un nom d'utilisateur ou adresse mail, combiner avec un mot de passe.

Ces inputs doivent être envoyé au back à l'aide d'axios ou de fetch. La requête doit envoyer avec la méthode POST sur l'url défini au niveau de votre API.

```
fetch(
    'http://auth-react.com/api/login',
    {
        email: email,
        password: password
    },
    headers : myHeaders,
    method: POST
)
```
## Vérification
Dans le routeur qui est appelé par le formulaire une vérification de la concordance utilisateur/mot de passe doit être faites.

Exemple avec une base de données mongodb
```
const express = require('express')
const router = express.Router()

router.post('/login', async(req, res) => {
    const {email, mot_de_passe} = req.body

     try {
         // Recherche d'un utilisateur dans la base de données
        let utilisateur = await Utilisateur.findOne({ email })

        // Aucun utilisateur trouvé
        if (!utilisateur) {
            return res.status(400).json({ error: "L'email est invalide" })
        }

        if (mot_de_passe != utilisateur.mot_de_passe) {
            return res.status(400).json({ error: 'Mot de passe invalide' })
        }

        return res.status(200).json({
            id: utilisateur.id,
            nom: utilisateur.nom,
            prenom: utilisateur.prenom,
        })
    } catch (err) {
        res.status(500).json({ error: 'Serveur erreur' })
    }
}) 
```

> Remarque : si le mot de passé est chiffre ou hasher il faut passer à utiliser la méthode de comparaison de l'outil de chiffrement/hashage utilisé

## Stockage

Une fois que la requête nous retourne l'utilisateur connecté, il suffit de placer le userId et les autres informations nécessaires dans le sessionStorage.

```
sessionStorage.setItem('user', JSON.stringify(response.data))
```
>Remarque: la création de la variable de session se fait dans le then de la requête fetch ou axios.
Blazor Components Examples & Demos | Syncfusion
Tags: blazor, demo, webdev, example
Published: 2021-06-15 09:46:47

**Blazor UI & Data Visualization Components**
The Syncfusion [Blazor components library](https://www.syncfusion.com/blazor-components "Blazor components library") is the only suite that you will ever need to build an application. It contains 70+ high-performance, light-weight, and responsive UI controls in a single package

[DataGrid](https://blazor.syncfusion.com/demos/datagrid/overview "DataGrid")
[Charts](https://blazor.syncfusion.com/demos/chart/line "Charts")
[Diagram](https://blazor.syncfusion.com/demos/diagram/flowchart "Diagram")
[Kanban](https://blazor.syncfusion.com/demos/kanban/overview "Kanban")
[Maps](https://blazor.syncfusion.com/demos/maps/default-functionalities "Maps")
[PDF](https://blazor.syncfusion.com/demos/pdf/hello-world "PDF")
[Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview "Rich Text Editor")
[Scheduler](https://blazor.syncfusion.com/demos/scheduler/overview "Scheduler")
[Calendar](https://blazor.syncfusion.com/demos/calendar/default-functionalities "Calendar")
[TreeView](https://blazor.syncfusion.com/demos/treeview/default-functionalities "TreeView")
[PDF Viewer](https://blazor.syncfusion.com/demos/pdf-viewer/default-functionalities "PDF Viewer")

for more controls
https://blazor.syncfusion.com/demos/
mautic を docker-compose で立ち上げる
Published: 2021-06-15 09:43:43

https://hub.docker.com/r/mautic/mautic

上記のイメージを使う。Dockerhub のページをスクロールしていくと `docker-compose.yml` のサンプルがあるので、それをベースにする。

以下では、サンプルと以下が異なっている。
- メール送信もローカルで済ませたかったので `mailhog` を追加
- mautic のデータディレクトリはローカルにマウント

```yml
version: "3.9"

services:
  database:
    image: powertic/percona-docker
    container_name: database
    environment:
      MYSQL_ROOT_PASSWORD: mypassword
    ports:
      - "3306:3306"
    volumes:
      - database:/var/lib/mysql
    restart: always
    networks:
      - mauticnet
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci --sql-mode=""

  mautic:
    container_name: mautic
    image: mautic/mautic:v3
    volumes:
      - ./mautic_data:/var/www/html
    environment:
      - MAUTIC_DB_HOST=database
      - MAUTIC_DB_USER=root
      - MAUTIC_DB_PASSWORD=mypassword
      - MAUTIC_DB_NAME=mautic3
    restart: always
    networks:
      - mauticnet
    ports:
      - "8880:80"

  mailhog:
    image: mailhog/mailhog
    networks:
      - mauticnet
    ports:
      - "1025:1025"
      - "8025:8025"

volumes:
  database:

networks:
  mauticnet:
```

これで後は `docker-compose up` するだけで起動できる。

## cron の状態がどうなっているか

https://www.mautic.org/getting-started
上記の Getting Started でも cron について触れられているのでコンテナの方がどうなっているのか確認した。

`/etc/cron.d/mautic` の内容を確認したが、以下の内容と同じであった。
https://github.com/mautic/docker-mautic/blob/master/common/mautic.crontab

Dockerhub のページを見てもらって分かる通り、環境変数の設定 (`MAUTIC_CRON_HUBSPOT` のような) で追加できるようである。
How to add a preview of your React (or any other) site when sharing it
Tags: react, seo, html, opengraph
Published: 2021-06-15 09:41:50

Are you struggling with having your website preview looking something like this:
![No picture in preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo3slvkn6lyt04t5kre7.png) 
Whenever you're sharing it on linkedin/facebook/etc, when you're really looking for something like this:
![Man in picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm503wacw75zcjpkf2ys.png)

I had this exact same issue and solved it. Let me show you how.

**The magic is** all in the `index.html` file. Sites such as Linkedin and facebook, and even Discord, use something called the Open Graph Protocol, and this allows you to specify how you want your preview to look like.

**This you will** specify in the `<head>` tag where you have your usual `<meta>` tags  such as `<meta charset="utf-8" />` etc.

The syntax is: 
```HTML
<meta property="og:title" content="Title-name">
<meta property="og:image" content="File-path">
<meta property="og:url" content="Canonical-url">
<meta property="og:type" content="website">
```
**These four tags** are required. There's also optional tags, the most commonly used being `og:description`. You can read more about all the types of tags [here](https://ogp.me/).

**The image can** be anything you want - from very abstract to an actual preview of your site. I made mine by squeezing up my site and finding the right place to screen dump, then I put it in the `assets` folder, and I declared it by: ```property="og:image" content="https://erikkarlsson.dev/assets/prev.png"```

Together with everything else in the header it looked like this:
```HTML
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
<meta property="og:type" content="website">
<meta property="og:title" content="Erik Karlsson">
<meta property="og:description" content="Portfolio page made by Erik in React.">
<meta property="og:image" content="https://erikkarlsson.dev/assets/prev.png">
<meta property="og:url" content="https://erikkarlsson.dev">

...
```
Which looks like this when sharing it on Linkedin:

 ![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v7x8s7mhbw0xg1f54c4.png)

And that's how you do it! Check out [this](https://developers.facebook.com/docs/sharing/webmasters/) if you want to learn more about this topic.
Dragon game
Tags: python, programming, beginners, gamedev
Published: 2021-06-15 00:17:31

Hello!
Ok, let's start! Now, we can create a new game, you know the same book.
I'm gonna put the code first, then I gotta explain it.

``` 
import random
import time

def displayIntro():
    print("You are in a land full of dragons, In front of you,")
    print("you see two caves. In one cave, the dragons id friendly")
    print("and will share his treasure with you. The other dragon")
    print("is greedy and hungry, and will eat you in sight")
    
def chooseCave():
    cave = ""
    while cave != "1" and cave != "2":
        print("Which cave will you go into? (1 or 2)")
        cave = input()
    
    return cave

def checkCave(chooseCave):
    print("You approach the cave...")
    time.sleep(2)
    print("It is dark and spooky...")
    time.sleep(2)
    print("A large dragon jumps out in front of you! HE open his jaws...")
    print()
    time.sleep(2)
    
    friendlyCave = random.randint(1,2)
    
    if chooseCave == str(friendlyCave):
        print("Gives you his treasure!")
    else:
        print("Gobbles you down in one bite!")
        
playAgain = "yes"

while playAgain == "yes" or playAgain == "y":
    displayIntro()
    caveNumber = chooseCave()
    checkCave(caveNumber)
    print("Do you want to play again? (yes or no)")
    playAgain = input()
``` 

In this program we use two modules: random and time module. 

Currently we use functions, the function is a way to say what to do and how. In python the functions has been writing with the statement defines or def. So, we have the firts block to code inside a function called displayIntro.
Inside displayIntro function, we write a few print methods to introduce the user inside the game.

Then we have the chooseCave function. Inside it, we put a empty varibale. Below we can write a while loop. Inside it, we have to compar two options or values: 1 and 2. Those values, are going to be the user options.

The next function we have is called checkCave. In this function we have to write a twice print methods to start the story. Then, we have to question to user which are the way to choose. Immediately we have to do the comparison between his choose and a random number. This is why we use random module. To choose randomdly two options: number 1 or 2. The options that we return to user, depends that return the random module.

Finnaly, we have to do another function to know if the user want to continue or left the game.
Post to Slack WebHook from Bash using Curl - Adventures in WSL2 Scripting #2
Tags: wsl2, bash, linux, slack
Published: 2021-06-15 09:22:50

<figure>
```bash
#!/bin/bash
# URL as supplied in your slack bot
url=https://hooks.slack.com/services/{}/{}/{}

#JSON body
data='{"text": ":interrobang: Unable to do something"}'

sendError()
{
    curl -X \
         POST \
         -H 'Content-type: application/json' \
         --data $data \
         $url
}

#Function that checks something
checkSomething

result=$?
#echo "result: $result"
if [ "$result" != "0" ]; then
    sendError
fi
```
<figcaption>Bash script that on failure sends slack notice.</figcaption>
</figure>

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgef36bqown2qm6edx1f.png">
<figcaption>The Result in Slack.</figcaption>
</figure>
Still 100 CSS loaders for your next project
Tags: css, webdev, beginners, html
Published: 2021-06-15 09:22:13

The fun continue with another collection of 100 CSS loaders!

Always the same rule: **one** div = **one** loader.

----

<center>Also available online 👇</center>
## <center>[css-loaders.com](https://css-loaders.com/)</center>

---

## Table of content

* [The Classic IV](#the-classic-iv)
* [The Colorful](#the-colorful)
* [The Dots IV](#the-dots-iv)
* [The Dancers](#the-dancers)
* [The Bars III](#the-bars-iii)
* [The Line](#the-line)
* [The Dots vs The Bars II](#the-dots-vs-the-bars-ii)
* [The Clones](#the-clones)
* [The Nature II](#the-nature-ii)
* [The Flipping II](#the-flipping-ii)
* [The Famous](#the-famous)

---

### The Classic IV

We have lost the control. I repeat, we have lost the control!

{% codepen https://codepen.io/t_afif/pen/JjWwWMO  %}

### The Colorful

{% codepen https://codepen.io/t_afif/pen/YzZdZej %}

### The Dots IV

{% codepen https://codepen.io/t_afif/pen/qBrLrox %}

### The Dancers

{% codepen https://codepen.io/t_afif/pen/VwpqpxB %}

### The Bars III

{% codepen https://codepen.io/t_afif/pen/vYxvxrV %}

### The Line

{% codepen https://codepen.io/t_afif/pen/mdWaWjv %}

### The Dots vs The Bars II

{% codepen https://codepen.io/t_afif/pen/qBrLrMo %}

### The Clones

{% codepen https://codepen.io/t_afif/pen/JjWwWmp %}

### The Nature II

{% codepen https://codepen.io/t_afif/pen/yLMGMQa %}

### The Flipping II

{% codepen https://codepen.io/t_afif/pen/PopXpXr %}

### The Famous

You all liked The Ben loader so I have made another casting. It wasn't an easy task but some of them accepted to become loader (or maybe not...)

Please no spoils on the comment section.

{% codepen https://codepen.io/t_afif/pen/VwpVaVa %}

{% codepen https://codepen.io/t_afif/pen/vYxQVYq %}

{% codepen https://codepen.io/t_afif/pen/poeQNRp %}

{% codepen https://codepen.io/t_afif/pen/YzZRGqj %}



---

### That's it!

oof, I reached 400! Now it starts to get a bit challenging to create another collection of 100 CSS loaders but you can help with some ❤🦄 and also [some coffees](https://www.buymeacoffee.com/afif). I have read an article saying that virtual coffees can increase the productivity up to 50%. worth trying, no? 😜

---

{% post https://dev.to/afif/still-100-underline-overlay-animations-the-advanced-css-collection-4mol %}