teleren/devto huggingface dataset:
RASA - Checkpoints
Tags: rasa, chatbot, nlp, ai
Published: 2021-05-20 15:55:12

You can use checkpoints to modularize and simplify your stories. Checkpoints can be useful, but do not overuse them. Using lots of checkpoints can quickly make your example stories hard to understand, and will slow down training.

Here is an example that contains checkpoints:
```yml
# stories.yml
# ... previous content ...
  - story: beginning of flow
    steps:
      - intent: ask_how_i_feel
      - action: utter_ask_user_question
      - checkpoint: check_asked_question

  - story: handle user affirm
    steps:
      - checkpoint: check_asked_question
      - intent: mood_great
      - action: utter_great
      - checkpoint: check_flow_finished

  - story: handle user deny
    steps:
      - checkpoint: check_asked_question
      - intent: mood_bad
      - action: utter_bad
      - checkpoint: check_flow_finished

  - story: finish flow
    steps:
      - checkpoint: check_flow_finished
      - intent: goodbye
      - action: utter_goodbye
```

Checkpoints can have any name.

For this example to work, apart from the code we have from the previous chapters, I have created the following intents:
```yml
# data/nlu.yml
# ... previous content ...
  - intent: mood_bad
    examples: |
      - my day was horrible
      - I am sad
      - I don't feel very well
      - I am disappointed
      - super sad
      - I'm so sad
      - sad
      - very sad
      - unhappy
      - not good
      - not very good
      - extremly sad
      - so saad
      - so sad

  - intent: goodbye
    examples: |
      - cu
      - good by
      - cee you later
      - good night
      - bye
      - goodbye
      - have a nice day
      - see you around
      - bye bye
      - see you later

  - intent: ask_how_i_feel
    examples: |
      - Ask me how I feel
      - Do you want to know how I feel?
      - Ask me about my feelings
```

and added them to `domain.yml`:
```yml
# domain.yml
# ... previous content ...
intents:
  # ... previous intents ...
  - mood_bad
  - goodbye
  - ask_how_i_feel
```

We need the chatbot's responses as well:
```yml
# domain.yml
# ... previous content ...
  utter_ask_user_question:
    - text: How do you feel?
  utter_great:
    - text: Glad to hear that!
  utter_bad:
    - text: I'm sorry to hear that.
  utter_goodbye:
    - text: Bye
```

Let's see this in action:
![Conversation with checkpoint good](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ogz6sjs4rzqt2ib46ni.png)

![Conversation with checkpoint bad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6afe0lmjxj9qq6gzpk0.png)

You can learn more about checkpoints in the [documentation](https://rasa.com/docs/rasa/stories#checkpoints).

In the next chapter, we will look at OR statements.

Repository for this tutorial:
{% github petr7555/rasa-dev-tutorial no-readme %}

You can checkout the state of the repository at the end of this tutorial by running:
```bash
git clone --branch 13-checkpoints git@github.com:petr7555/rasa-dev-tutorial.git
```
How to fix the NextJS HMR(hot reload) not working error on WSL2
Tags: nextjs, wsl, codenewbie
Published: 2021-05-20 15:45:03

*tl:dr - Transfer your workspace files from the windows environment to the Linux environment*
<br>
While working on your NextJS application inside WSL2, you may have noticed that your saved changes do not immediately reflect on your application. This means that you will have to go through the tedious process of constantly restarting your local development server so that you can see your changes reflected.

Fear not, I come forth with a potential fix for this. The results tend to vary so don't hesitate to leave a comment with your particular scenario so that we can fix it.

<br>
**The Problem…**

When working on NextJS applications inside WSL2, there seems to be an issue with  [HMR (Hot Reload)](https://webpack.js.org/concepts/hot-module-replacement/)  not detecting changes to your code on save. This results in constantly refreshing the server so that you can view your changes.

<br>
**The Solution (The fix that worked for me)…**

After upgrading to WSL2 we are constantly advised to move our workspace from the Windows environment to the Linux environment for performance purposes.


![use_linux_environment_instead_of_windows_environment_for_performance.jpg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yfzisnfchmjf630j4dq.jpg)

Our first step will be to copy our current workspace inside windows to our Linux workspace inside WSL2.



```
cp –R <source_folder> <destination_folder>

e.g
cp -R /mnt/c/<your_folder_name> /home
``` 

Now that we are inside the Linux environment, we can start doing some house keeping by first deleting the node_modules folder and the package-lock.json file.


```
rm –r node_modules package-lock.json
``` 

After that you can run the npm install command to install all the necessary dependencies for the project.

After all the dependencies have been installed you can launch your text editor and start working inside your new environment without any errors.

Congratulations on fixing this error with me!!


<br>
**Additional Info…**

Incase you get some error related to write access when trying to edit files inside your folder you can use the *chown* command in Linux to give ownership access to your specific folder.

```
sudo chown –R <username> <folder_name>
``` 
<br><br><br>
With that problem solved you can now continue with your development and enjoy the many benefits of NextJS and a Linux environment inside WSL2.
 
If this guide was helpful, don't hesitate to drop a like and a comment. Happy coding.
Truncating Text using Chakra UI
Tags: css, html, react, webdev
Published: 2021-05-20 15:41:51

When designing a component, you might need to truncate the displayed text to a fixed number of lines and show an ellipsis. 

This is possible using some CSS properties such as `overflow: hidden;` and `text-overflow: ellipsis;`. However, we would be focusing on how to truncate text using [Chakra UI](https://chakra-ui.com/).

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

## Example: Let's dive into how to truncate the Text below
```jsx
<Text>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
```

There are 2 ways to truncate [Text](https://chakra-ui.com/docs/typography/text) in Chakra UI:


### 1. Passing `isTruncated` prop


The `isTruncated` prop renders an ellipsis(...) when the text exceeds the width of the viewport or maxWidth prop.

```jsx
<Text isTruncated>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
```

See truncated text below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eutcles0bbrv02igplg0.png)

> Note that when using this prop, responsive truncation is automatically set across all screens. 

### 2. Passing `noOfLines` prop
Just as the name implies, this prop is used to truncate the text to a specific number of lines. Simply pass the `noOfLines` prop and set it to the desired no of lines.

```jsx
<Text noOfLines={3}>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
```

**Setting responsiveness using `noOfLines`**
You may want to specify the number of lines the text should be truncated to on different devices. Doing this is pretty straightforward using Chakra's [Array Syntax](https://chakra-ui.com/docs/features/responsive-styles#the-array-syntax)


```jsx
<Text noOfLines={[1,2]}>
  In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
</Text>
```

See truncated text on Desktop
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyiielsxv69r3st6f25b.png)

See truncated text on Mobile
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmtgu6vmw4hgauncjy53.png)



**Quick Note:** If you are new to Chakra UI and would love to get started, visit the [Getting Started Docs](https://chakra-ui.com/docs/getting-started)
Web designer is a good job?
Tags: career
Published: 2021-05-20 15:29:24

If you want to build a website, that's not difficult nowadays, you even don't need to know any code, just search how to build a website, there are billions of results that teach you to step by step build your website. I also wrote one, you can read it <a href="https://www.funwemake.com/know-how-to-step-by-step-build-your-first-website-completely/">here</a>.

Content management system such as WordPress is the most popular website builder, people can use a free template or buy one to quickly build up their site. The template still rigid, lots of setting you can't change at all, HTML and CSS needed to use when you design.

In recent years, visual editors such as Elementor can help the user directly edit the template through drag and drop. It solved lots of users problem, flexible design, and no code required, it made the software become popular.

Therefore, people can easily build up a website just for small money, that's the reason why the internet information boom, anyone can easily release their content through blog, website, and social media.

To be a web designer, the threshold becomes lower as you imagine, anyone who knows how to build a website, they are a web designer too.

As people can build websites themselves, what's will happen? The whole web design market environment will change, the supply over demand. Due to the web designer quality uneven, that's also causing consumer confidence to lower and lower. 

Web design career salary is substantial (average annual salary 60,000 USD in 2021), people are willing to be web design if they can. As a freelancer, zero customers is normal, most of them already quit, what you saw on the internet, they are top-seller at all. Therefore, you can imagine how intensely competitive this industry.

If you want to find a web designer job, that's still fine, you are worth to keep learning how to be a good web designer. However, if you want to be a freelancer like someone else to get incredible income,  I don't want to make you disappointed, but it's the hardest.

Like a freelancer to get lots of customers, that's not about your design skill, marketing is the main point. How to promote yourself, get people's attention could be important than the skill you understand.

Back to the current, deal with code (HTML, CSS, and Javascript) become not that important except for the large websites. Most SMEs and people who needed a website, more care about art design.

A successful freelance web designer they more likely an influencer, not recommended to invest the whole mind doing freelance web designer. Don't be sad, there are still lots of ways can make money online, you can read <a href="https://www.funwemake.com/34-ways-you-can-absolutely-make-money-online/">here</a>.
Is Python or Java a better language for scaling as your web app grows in size?
Tags: python, java, django, springboot
Published: 2021-05-20 15:08:07

The choice between Python and Java when it comes to web development is both intriguing and interesting. Former is a dynamic, interpreted and a more "English like" programming language which feels like a breeze while coding and latter is a statically typed, compiled and a bit more "discipline oriented" language which boasts of more bare metal performance (at least in theory).

In an ideal world where hardware costs are negligible and developer productivity is the only (or major) criteria for choosing a language, Python should always win. But that's already happening now, isn't it!

If you look at the [TIOBE popularity stats for May, 2021](https://www.tiobe.com/tiobe-index/), it seems as though there is a cut-throat competition between Python and Java with Python at 11.87 and Java at 11.74 rating. If these stats are to be believed, both Java and Python are equally preferred out in the wild.

But I don't think that's really happening, at least not in the open source web development world. Python frameworks like Django and Flask are not only ubiquitous among startups and mid sized businesses, you also stumble upon their proponents and problem solvers every now and then in places like Stack Overflow, Reddit and even Dev.TO. It never takes a long time to find an expert helping hand if you come across a problem in any of the popular open source python libraries.

And while the Java enthusiasts keep talking about how mind blowing their spring-boot framework is, I'm not seeing a lot of takers for it at least in the FOSS spectrum. None of the popular online social media platforms like Reddit, Quora, Tildes, etc. use Java, they are all based on a Python or PHP framework.

Now it might well be the case that a good number of humble and creative Java engineers are running lots of cool stuff like Spring-boot behind the closed walls of those corporate enterprises but how are we supposed to know about that, right!

Indeed, if the performance advantage of Java is taken into consideration for a moment, there ought to be lots of stuff running in the open source spectrum as Java is open source too. Granted that its a bit verbose and the number of classes and interfaces you write may increase drastically with the app size but that's no big deal in the long run if your AWS bills also come down due to better performance, isn't it?

Are there any known benchmarks or studies done on any AWS or Linode instances regarding which language performs better at the same level of scaling (like # of web requests per second for example)? If there are, it will be interesting to see their results!
3 ways to centre a div + life advice
Tags: webdev, css
Published: 2021-05-20 15:09:45

---
title: 3 ways to centre a div + life advice
published: true
date: 2021-05-20 15:04:02 UTC
tags: WebDevelopment,CSS
canonical_url: https://blog.daliborbelic.com/3-ways-to-centre-a-lessdivgreater-life-advice
---

A few years ago, when I was a beginner developer such a task, to centre a div, would be easy and hard at the same time. It's super comprehensible yet you're not sure how to do it (although you probably saw it many times while following a boot camp). And then when googling starts and we all know how it goes.

What I want you to know is that this is totally fine! Not knowing something is okay, no matter how simple (or hard) it may look. On the other, what needs to be stressed out is the ability to find the answer (it is also a skill, treat it that way). That is the key! Now, when I'm googling, I kinda feel where (or if) the answer lies on a certain page. You'll get there, keep it up!

Now, let's centre this DIV:

```
<section>
    <div class='centre'>
        test
    </div>
</section>

```

### The Traditional Approach

```
.centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

```

### And then flexbox came

```
.centre {
    display: flex;
    justify-content: center;
    align-items: center;
}

```

### With Grid 🔥

```
.centre {
    display: grid;
    place-items: center;
}

```

Till next time,
Dalibor
Incredible tools for web design.
Tags: webdev, design, tools, productivity
Published: 2021-05-20 15:02:47

1 - CSS Gradient :: cssgradient.io/
    
CSS gradient is an incredible tool that every front-end programmer should have. in it, you create a visual color gradient, and when you find one that you like, you can easily implement it in your code, with the good old Ctrl + c and Ctrl + v.
    
2 - Animista :: https://animista.net/
    
If during the development process you need to make animations. Animalistic is the tool that will facilitate your development. It allows a preview of the animations and that changes all their values. when you're satisfied, the tool still gives you the code that allows this effect to happen
    
3 - ColorHunt :: colorhunt.co/
    
Color hunt is a mandatory site in the development of any site, many times I have seen myself with a second window open on that site during development. This site is responsible for showing several color palettes that make sense! And best of all with their respective hexadecimal codes.
    
4 - Pexels :: pexels.com
    
Pexel.com is the best way to get free images for your website. I recommend.
    
5 - Clippy :: bennettfeely.com/clippy/
    
Clip-path is a CSS property that allows complex shapes to be made. This site addresses this property and helps with the code in the most diverse ways, with its preview you will achieve the most diverse effects. This property and this website are perfect for you to give a program a new look, or add the 10% of detail that takes a program from the ground to the sky.
    
6 - CSS Generator :: cssgenerator.org/
    
This site will help you to create the most diverse CSS filters. It contains several functions and previews.
    
7 - Keyframes.app :: keyframes.app/
    
This site condenses some of the previous sites. Helping in web design by providing several functions and visual tools that helped in creating shadow and color animations.
    
8 - Normalize.css :: necolas.github.io/normalize.css/
    
Normalize.css is a small CSS file that helps your code consistency across multiple browsers, correcting bugs for some inconsistencies that exist between browsers. you as a web designer don't even notice that it's there, and that's great. Because it means that he is doing an important job for you.
    
9 - Voxel.css :: www.voxelcss.com/
    
A CSS library for 3D rendering !!! If you're like me, you're already excited about this concept. the desire to do a project with him just by listening to it. The possibilities vary from animations and games. Worth knowing.
    
10 - Blush :: blush.design
    
blush.design creates beautiful illustrations, made by artists around the world. I'm sure you will recognize these illustrations, because they are being used by several marketing companies



more in: https://programador-de-quintal.webnode.com/

contact me: https://www.linkedin.com/in/caio-braga-3038b5147/
Day 67 of 100 Days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-05-20 14:48:07

I just completed day 67. Unfortunately, I don't have access to my laptop today so I only took the challenge.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl3wjgtvg9ipx2a73ng3.jpg)
Creating Cards In React
Tags: react, cards, bootstrap
Published: 2021-05-20 14:39:02

Creat New App In react using

npx create-react-app my-cards

Enter into your app using


npx create-react-app my-cards

then start your project using


npm start

Now Create Components in src for creating cards
Create Card body component using


import React from 'react';
import './cardstyle.css';

  class CardBody extends React.Component {
    render() {
      return (
        <div className="card-body shadow ">
          
          
          <h2>{this.props.title}</h2>
          
          <p className="body-content">{this.props.text}</p>
          
         
        </div>
      )
    }
  }

  export default CardBody;



then create card header using code



import React from 'react';
import './cardstyle.css';
class CardHeader extends React.Component {
    render() {
      const { image } = this.props;
      var style = { 
          backgroundImage: 'url(' + image + ')',
      };
      return (
        <div className='overflow'> 
        <header style={style} id={image} className="card-header">
          <h4 className="card-header--title"> </h4>
        </header>
        </div>
      )
    }
  }

  export default CardHeader;



Create Card  using code (Note change path of Image and component as per your path)

import React from 'react';
import './cardstyle.css';
import CardBody from'./cardBody';
import CardHeader from './cardHeader';
import AnsMImg from './answerSheetMarking.jpg';

 class Card extends React.Component {
 
    render() {
      return (
        <article className="card">
          <CardHeader image={AnsMImg }/>
          <CardBody title={'Answer sheet marking'} 
          text={'Tool can read printed as well as handwritten answer sheets. Can transform the exam assessment manual process in schools and colleges.'}/>

        <button className="button button-primary" >
          Try it out
        </button> 
        </article>
               
      )
    }
  }
  export default Card;



And Finally your card is ready

Render Card inside The App.js
and you can see your card in browser
"Unable to find current origin/master revision in submodule path" error at Github Action "actions/checkout@v2"
Published: 2021-05-20 14:34:41

When I run following actions (that checkout repository with submodules and update),

```yaml
- name: Checkout
  uses: actions/checkout@v2
  with:
    ref: ${{ github.head_ref }}
    submodules: 'recursive'
    token: ${{ secrets.MY_PAT }}
```

following error has occurred.

```
Unable to find current origin/master revision in submodule path
```

This issue was fixed by `fetch-depth: 0` option at checkout action.
Laravel exists() method Example
Tags: laravel, php, webdev, beginners
Published: 2021-05-20 14:12:19

in this short tutorial we will see how to use  laravel exists() method, we will use exists()  for checking records 

exists contains true if the model taken from database 

let see some example

### Example 1
```php
// For Kids
$kids = User::where('age', '<', 18)->exists();
    
// For men
$mens = User::where('age', '>=', 18)->exists();
``` 
### Example 2

for search email

```php
if (User::where('email', $request->email)->exists()) {
   //email exists in user table
}
```

### Example 3

```php
$posts = Post::where('user_id', Auth::id());
		//Check if posts exists
        if ($posts->exists()) { 
	//Get all the posts by user
            $userPosts = $posts->get(); 
        } else {
            return redirect()->back()->withError('No post found.');
 }
```

### Read also 

[Laravel php artisan inspire command](https://larainfo.com/blogs/laravel-php-artisan-inspire-command-that-can-inspire-you)
[Laravel clear cache without using artisan command](https://larainfo.com/blogs/laravel-clear-cache-without-artisan)
HTML Interview Questions
Tags: html
Published: 2021-05-20 14:11:07

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ish1k2dipxk4xocrfvfg.jpg)
{% gist https://gist.github.com/Md-Kais/3f676cdb55784a6810bed3b3029b0114 %}
Building a serious(ish) project - intro
Tags: javascript, node, react, startup
Published: 2021-05-20 13:55:38

I've been a developer for 8+ years now, working in all kinds of industries. Some full stack jobs, mostly front end jobs. I've created ~35 open source libraries over the years. I'm technically self-taught but I've also learnt _**a lot**_ from some pretty smart people I've had the fortune to work with.

I've finally committed to building a full stack application. I wanted to get some of my thoughts, ideas, and headaches written down as I go through this process. There are a lot of things I've picked up in my career that I just store internally, so hopefully this will force me to start sharing things a bit more!

There will also almost definitely be a lot of things I've never had to deal with before, and things I'll have to learn from scratch. So I also figure it might be good to share these experiences too.

This is probably the first time I've been this excited to make something, and (outside of my actual job) actually want to see it through to the end. Let's see what happens...