teleren/devto huggingface dataset:
Adding business hours to your chatbot
Tags: chatbot, cognitive, shortposts
Published: 2020-08-14 10:45:22

Stackoverflow is the best place to find use cases along with numerous questions. One such question that hit my radar was 

*How do I make my Chatbot to ONLY answer from 6 pm to 8 am - IBM Watson* 

or

Adding business hours to a chatbot

This is part of my shortposts (quick and short answers). For in-depth understanding, please check the `Check` section below.
> The question was IBM Watson Assistant specific.

## Challenge
I accepted the challenge and here's what I came up with 

1. Create a top node called `input` and under `If assistant recognizes`
2. Add `now().before('18:00:00')` and `now().after('8:00:00')` as shown in the image below - **Time is in 24 hour format**
3. Assistant responds --> Text --> `We are open only between 6 PM and 8 AM every day`
4. Then assistant should --> Skip user input
  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n3u4hzfel7f2b1koober.png)

5. Add another node called `welcome` and under welcome
6. Assistant responds --> Text --> `Welcome, how can I help?`

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

Check the [Expression language documentation](https://cloud.ibm.com/docs/assistant?topic=assistant-dialog-methods#dialog-methods-dates-reformatDateTime) to understand more about the use of `now()`

Once done, click `Try it` to see the chatbot to respond only between the times mentioned

[Link](https://stackoverflow.com/questions/63369399/how-do-i-make-my-chatbot-to-only-answer-from-6pm-to-8am-ibm-watson) to the Stackoverflow questions

## Check 

- [Getting Started](https://cloud.ibm.com/docs/assistant?topic=assistant-getting-started) with IBM Watson Assistant
Hyphenate anything
Tags: javascript, functional
Published: 2020-08-14 10:34:25

If you're like me and keep running low on horizontal space in web design nowadays. Don't worry - I have a nice solution.

Hyphenate!

If you do not care at all about language and words and breaking them in the "correct" way this is the way to do it.

```js
function addSoftHyphensToWord(word) {
	return word.split('').join(String.fromCharCode(173));
}

function addSoftHyphens(text) {
	return text.split(' ').map(addSoftHyphensToWord).join(' ');
}
```

And in your CSS you add these rules.

```css
.break-with-manual-hyphens {
	word-break: break-all;
	hyphens: manual;
}
```

Now your text will break anywhere. This is great.

Until next time.
Recursion recipe
Tags: javascript, functional
Published: 2020-08-14 10:33:20



I think recursion is really hard. It’s not like it's really hard. It’s just that I kind of always has to redo my functions many times before I get it right.

So I will try to make a small recipe for doing recursion on a nested data structure.

Say we have this data:

```js
[{
  label: "i am root",
  href: "/",
  children: [{
    label: "i am a leaf",
    value: "/leafnode-1",
    children: null
  }]
}]
```

And maybe we want to turn this into a navigation or something like this:

```html
<ul>
  <li>
    <a href="/">i am root</a>
    <ul>
      <li><a href="/leafnode-1">i am a leaf</a></li>
    </ul>
  </li>
</ul>
```

And this is our output functions. First the outer function that will render the <code>&lt;ul&gt;</code> element in our example. It will take a node and a function to render the list. 

```js
function renderList(node, innerFn) {
  return `<ul>${innerFn(node).join("")}</ul>`;
}
```

The inner function (innerFn) will return an array with the output of our next function.

And so. This is the function to render the list. It will take an item as argument and the outer function to render a sublist. And so on.

```js
function renderItems(item, outerFn) {
  return `
    <li><a href="${item.href}">${item.label}</a>
      ${outerFn(item.children)}
    </li>
  `;
}
```

And this is the "behind the scenes" function that connects the functions and does the mapping.

```js
function createRecursionFunction({ 
  innerFn,
  outerFn,
  renderLeaf,
  isLeafNode 
}) {
  function _outerFn(node) {
    if (isLeafNode(node)) {
      return renderLeaf(node);
    }
    return outerFn(node, _innerFn);
  }
  function _innerFn(node) {
    return node.map(function mapper(i) {
      return innerFn(i, _outerFn)
    });
  }
  return function(data) {
    return _outerFn(data);
  };
}
```

Now we can use our factory to create a brand new function. But first let's make a function to check if we’re in a leafnode and render an empty string if that is the case.

```js
function isLeafNode(node) {
  return node === null;
}

function renderLeaf() {
  return '';
}
```

```js
const createMenu = createRecursionFunction({
  outerFn: renderList,
  innerFn: renderItems,
  renderLeaf: renderLeaf,
  isLeafNode: isLeafNode,
});

const htmlMenu = createMenu(data);
```



Now we have a flexible recursion function factory that will take your data an inner and an outer function as arguments.

I haven't used this in production myself. But I imagine it could be handy.

Until next time.
Javascript Arrays
Tags: javascript
Published: 2020-08-14 10:31:29


Remember how to spell <del>lentgh</del> <del>lenght</del> length. It is very good when working with arrays in javascript.

You could also create a small helper function like this:

```js
function size(arr) {
  return array.length;
}
```

Size is much easier to spell than length. This will also work for strings.

Would like to know the size of an object? You could use our nice function to do this:

```js
const obj = {
  keyA: "A",
  keyB: "B",
}

size(Object.keys(obj)); // 2
```

That is sweet.

Hope you find this useful or funny. Until next time.
FastestNotes.com
A keyboard first oriented app for notes, tasks and projects.
Tags: productivity, webdev, javascript, serverless
Published: 2020-08-14 10:15:45

Hey,

On my journey so far in the software area, but not only, I've experienced a lot of tools to organize work. 

I felt that I was doing something wrong, I was losing a lot of time by organizing a project, work breakdown, tasks creation and estimates.

For me is like this: once I decide to start a project, I want to do the work breakdown quite fast and in a structured way, I want to be able to estimate each work task and start working right away without losing precious time or ideas.

I had to scratch my itch! ☺️

Approximately 6 Months ago I've decided to start a project that fulfilled my need. A keyboard first oriented app, simple and powerful structured, tasks, notes, with possibility to estimate and report (daily) the work time vs. estimate for each task.

I've just released the version 1.1 of the FastestNotes app: https://fastestnotes.com

Give it a try, maybe it will work for you too.
DataTable of choice for React-based applications?
Tags: react, datatable, datagrid, table
Published: 2020-08-14 05:56:12

---
title: DataTable of choice for React-based applications?
published: true
description: 
tags: react, datatable, datagrid, table
---

Hello everyone,

It's been a while I haven't been active here, so I am really feeling good creating this post!

At my current workplace, I had this requirement where we were dealing with at least 5M+ rows of data at any given time, spanning 130-170ish columns, so I had to build a DataTable from scratch mainly for performance reasons. This got me curious because at the time I looked for open source alternatives, there weren't any good enough. (This is done now)

I'm looking to gather more information from fellow React devs here. When you are working on an application and have to choose a DataTable/DataGrid, which one is your favorite out there, and why?

Are there any specific features you look for before choosing one over another or the choice is very random? 


Looking forward to hearing your experiences, thank you.
How do you manage your reading list(s)?
Tags: reading, help, organisation
Published: 2020-08-14 09:55:04

As programmers, we require lots of reading on a daily basis. Be it code, documentation or any article that interests us. However there isn't enough time to read all the interesting articles you come across, so you save them for later (in a reading list)

Over time, **reading lists get larger and larger if not dealt with properly**, I want to know how you manage this problem

1. Do you use an app (ex. Pocket, Instapaper, etc.) to manage tour reading lists?
2. Do you have your personal routines to deal with this problem? (ex. getting through maximum possible articles on weekends, deleting old articles, etc.)
3. What would be your ideal app to help fix this problem for you?

I'm asking this because I've had this problem for a long time, and I really want to do something to fix it. Thanks
Deploy React Apps on Github Pages
Tags: react, webdev, github, tutorial
Published: 2020-08-14 09:53:59

We have been learning and creating lots of fun stuff and I believe we have a good idea on how to build React apps. It's time for us to know how to deploy those apps and have a live URL to show our progress off!

We have been using [Create React App](https://create-react-app.dev/) to develop our React applications, so let's see what they have to offer for our deployment process!

## Create React App

The only magic command we need is `npm run build`. Running this command will create a build folder for us with all of our code sitting in it waiting to be deployed to production.

In this folder, all our Javascript and CSS will be included in the static folder. Let's see what we are going to do with the contents of this folder in order to have it up and running on [Github Pages](https://pages.github.com/)!

## Github Pages

Since I mostly use Github for version control, I'll take further advantage of it and use Github Pages to host my apps on it for free.

Luckily, there is a package that would help us take care of this and prevent us from reinventing the wheel, the `gh-pages` package. We install the package normally with `npm install gh-pages` and it would handle the building and updating of the gh-pages branch for us, whenever we let it know we're ready. Let's see how it works!

## How It Works

Normally, our app will be deployed on a subdomain with our username on [github.io](http://github.io) like any other app, so to keep our app well informed about our root URL, we need to add a `homepage` attribute to our package.json file and assign the URL to it

```javascript
"homepage":"https://yourGithubUsername.github.io/yourRepositoryName",
```

After that, we need to make sure we add a couple of scripts to run the build command for us and generate our build folder and then take the contents of that folder and publish it our to gh-pages branch

```javascript
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
```

Now all we need to do is run `npm run deploy` every time we make changes and want to deploy our app and it will be up and running on the server.

One last thing we should remember to do is enable Github Pages in our repository settings and set the default branch to gh-pages

![gh-pages default branch.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1597397113507/3xRFYKSB4.png)

By this mini deployment, I shall end my eighth baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on [Twitter](https://twitter.com/R_anaEm), there and everywhere!
Auto-Update README.md According To Source Code
Tags: actionshackathon
Published: 2020-08-14 09:49:33


### My Workflow

This action assists with keeping README.md files up to date with your application's outputs.

Some use cases for auto-generating text blocks in a README.md file
- Showing available commands of the CLI that you've created (`--help`)
- Results after querying an API endpoint
- Bragging with tests results

How it works
1. Add `<! -- replacer_start -->` before the text block
1. Add `<!-- replacer_end -->` after the text block
1. Set the inputs
   - src-file-path
   - dst-file-path

For more information, jump to the [Getting Started](https://github.com/unfor19/replacer-action#usage) section

### Submission Category: 
- Maintainer Must-Haves
- DIY Deployments

### Yaml File or Link to Code
[View in GitHub Market Place](https://github.com/marketplace/actions/replacer-action)

{% github https://github.com/unfor19/replacer-action %}

[pipeline.yml](https://github.com/unfor19/replacer-action/blob/master/.github/workflows/testing.yml)
```yaml
name: Update README.md
on:
  push:
    branches: [master]
    paths-ignore:
      - "README.md"

jobs:
  update-readme:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Prepare source file
        run: |
          echo "<div>$(whoami)</div>" > test_results.log
      - uses: unfor19/replacer-action@v1.0.0
        name: Update README.md file
        with:
          src-file-path:   "test_results.log"
          dst-file-path:   "README.md"
          start-value:     "<!-- replacer_start -->"
          end-value:       "<!-- replacer_end -->"
          git-user-name:   "GitHub Actions"
          git-user-email:  "githubactions@meirg.co.il"
          git-commit-msg:  "Updated by GitHubActions"
          git-skip-commit: false
          git-skip-push:   false
          create-backup:   true
```

### Additional Resources / Info

Repositories which are using this workflow

- [replacer](https://github.com/unfor19/replacer) - replacer-action is based on this repository and also uses replacer to auto-generate the help message
- [bargs](https://github.com/unfor19/bargs) - Parsing command-line arguments in Bash easily, read more about it in this [blog post](https://dev.to/unfor19/parsing-command-line-arguments-in-bash-3b51). This repository is generating tests results automatically, see [here](https://github.com/unfor19/bargs#usage-output)

Feel free to doubt/ask questions/contribute to this project, any feedback is good feedback.
About TeQHow — You're all in one station about Technology!
Tags: technology, teqhow, howto, information
Published: 2020-08-14 09:47:01

We’re living in the 21st century and are moving towards modernization and technological advancements. Walking forward along with the advancement is crucial so as to stay-up-to-date and smart. But how will you stay updated and inform? The only medium to stay updated is news and technology related websites like our TeQHow.

Who and What is TeQHow?
I think by the name itself you have guessed what exactly this website is about. Yap, that’s right Technology, anything about technology. If you’re a tech-savvy a person who likes to keep themselves updated with all the news and updates in the technological world then congratulations, you’ve landed on the right website to know everything about technology.

To keep you up-to-date and to educate you with everything and anything technology related stuff, this website “TeQHow” was created.

What TeQHow provides you with?
When you land our home page, you will see there are 6 (Six) main sections – SOFTWARE, SECURITY, HOW TO, ROUTERS, PRINTERS, and COMPUTERS.

SOFTWARE the section provides software-related information from antivirus to Windows and Mac OS software. Next is the SECURITY, it provides information about security and protection software and application. The HOW-TO section is interesting and helpful as it will guide you through processes that you don’t how to proceed with. ROUTERS section is all about Wi-Fi and routers and the PRINTERS section is information about printer related stuff.

Lastly, on the tab you will find the COMPUTERS section, I know you have guessed it what you will know by clicking on it.

Our First Priority
We believe to grow one’s knowledge more you need to educate others and that is why our the first priority is to educate and inform you about the latest updates in the technology and also if you want to know about devices or maybe a walkthrough to install or update, we’re there to provide you the support.

Let’s grow together in this technology-driven world!!
Learn Version Control with Git and GitHub: Part 2
Tags: beginners, tutorial, git, codenewbie
Published: 2020-08-15 00:54:54

---
title: Learn Version Control with Git and GitHub: Part 2
description: In this video, we learn to branch, and explore all things collaboration: remotes, forks, push/pull, and pull requests—the skills to contribute to open source!
published: true
date: 2020-08-14 09:46:00 UTC
tags: beginners,tutorial,git,codenewbie
canonical_url: https://raddevon.com/articles/learn-version-control-with-git-and-github-part-2/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9oxgw75qhv2jg6truch6.jpg
---
We’re back to wrap up the Git\-It workshop, and it’s going to be awesome! If you haven't seen part one, circle back and [watch it now](https://raddevon.com/articles/learn-version-control-with-git-and-github-part-1-2/).

What You’ll Learn in this Video 🎓
-----------------------------------------------------------------------------------------------

* ⚡ How to connect a Git remote
* ⚡ How to push changes to a remote
* ⚡ How to fork a project
* ⚡ How branches work
* ⚡ How add collaborators on your GitHub project
* ⚡ How to make a pull request (This is how you contribute to [open source](https://raddevon.com/articles/how-do-i-contribute-to-open-source-projects/) projects.)
* ⚡ How to merge and clean up old branches

{% youtube QpyExoMNu7Y %}

Resources 🧰
-------------------------------------------------------------------------

* 🔨 [The Git\-It workshop](https://github.com/jlord/git-it-electron)
* 🔧 [GitHub Desktop](https://desktop.github.com/)

Ask any questions you have here (👇), [in the YouTube comments](https://youtu.be/wi8vQsaBqy0) or to me directly [on Twitter](http://twitter.com/raddevon). Now, get out there and start protecting your code!

Git lets you turn back the clock in your codebase to a time when things were better. A Big Goal lets you do the same thing with your aspirations to transition into a web development career.

Having a Big Goal allows you to get back to **why you’re doing this**. You can revert your enthusiasm, your drive, and your willpower back to nearly what it was when you first started. Take [my free email course](https://raddevon.com/stick-with-web-development/) to figure out your Big Goal. It will keep you from losing all your progress half way through.
Disco Disco
Tags: showdev, html, css, codepen
Published: 2020-08-14 09:31:21

A quick learn and implement from the following post. Read the original post for details! :unicorn:
{% post https://dev.to/dailydevtips1/css-disco-text-2dcf %}
#### Web Dev Notes
* On hover, the background will change color too
* Use of text-shadow to create glowing effect
* Use of filter:hue-rotate() in animation to change color
{% codepen https://codepen.io/tlylt/pen/RwarzLq %}
Entdecken Sie, wie einfach es ist, PST-Dateien zu teilen
Tags: splitpst, pstsplitter, dividepst, breakpst
Published: 2020-08-14 09:26:15

Teilen Sie Ihre PST-Dateien intelligent und sicher auf. PST ist ein gängiges Dateiformat von Outlook, mit dem Einzelpersonen und Unternehmen Notizen, Nachrichten, Dokumente, Journale, Ereignisse, Adressen usw. speichern. PST unterstützt den Outlook-Client. Die Dateierweiterung ist sowohl im Unicode- als auch im ANSI-Format verfügbar. Das PST-Unicode-Format hat eine Speicherkapazität von bis zu 50 GB, was heutzutage ein beliebtes Format von Outlook ist. Große PST-Dateien können leicht beschädigt werden. Um Ihre wichtigen Outlook-Daten vor Beschädigung und Beschädigung zu schützen, ist es sinnvoll, Ihre großen PST-Dateien aufzuteilen.

##Hier kostenlos herunterladen
https://www.softaken.com/split-pst-pro

Nun müssen Sie sich fragen, wie Sie Outlook-Dateien aufteilen können. Wenn Sie es manuell tun, kann es einige Zeit dauern. Warum nicht ein Werkzeug benutzen? Softaken hat ein innovatives Split PST Pro vorgestellt. Das Programm ist mit mehreren Funktionen geladen. Es kann PST-Dateien in wenigen einfachen Schritten aufteilen.

* Die Smart App ist so konzipiert, dass PST-Dateidateien beliebiger Größe, sowohl ANSI als auch Unicode, aufgeteilt werden können.
* Schnelle Geschwindigkeit, um Zeit zu sparen
* Einfache Handhabung, weniger technischer Ansatz
* Teilen Sie alle PST-Elemente auf
* Unterstützung von MS Outlook 2002, 2003, 2007, 2010 und 2013
* Eine kostenlose Demoversion ist verfügbar
* Bezahlbarer Preis

Was willst du mehr? Wenn Sie an dem Programm interessiert sind, gehen Sie dessen Details durch.

**Unterstützt verschiedene Dateidivisionen**

Benutzer des Programms können PST-Daten in drei verschiedene Typen aufteilen. Sie können Dateien nach Jahr, Größe und Ordner aufteilen. Wenn sie Outlook-Dateien nach Jahr aufteilen möchten, erstellt die App für jedes Jahr eine separate Datei, z. B. für die Aufteilung von 2004 bis 2010. Dies bedeutet, dass Sie über 7 separate PST-Daten verfügen. Teilen Sie Outlook-Daten nach Datum, wobei Sie ein bestimmtes Datum für die Aufteilung auswählen können. Übergroße Dateien werden nach Wahl des Benutzers aufgeteilt. Die Größe reicht von 5 MB bis 10 MB. Wenn Sie einen großen Ordner haben, den Sie teilen möchten, können Sie dies tun, indem Sie Daten nach Ordner teilen wählen.

**Archivdatei-Abteilung**

Die App kann Archivdateien nach Jahr, Datum, Größe und Ordner aufteilen.

**Protokollbericht zur Qualitätsprüfung**

Benutzer können sich Sorgen über die Qualität der geteilten Daten machen. Unsere Ingenieure wissen das sehr gut. Die App zeigt nach Abschluss des Aufteilungsvorgangs einen Vergleichsbericht an, der den Ordnernamen, den Pfad und die Anzahl der Elemente enthält.
What is actually CORS?
Tags: http, webdev, cors
Published: 2020-08-14 09:19:06

Probably you run into CORS trying to make some request, and don't even understand why it throws you an error in your console. In this post, i want to make it clear what is CORS. Let's begin.

Cross-Origin-Resource-Sharing(CORS) - is just a mechanism that gives access to browser to download resource across domain boundaries. What does it mean? This means that browser restricts cross-origin HTTP request initiated from script for security reason. Fetch API and XMLHttpRequest follow the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). It means that unless the response from other origins has the right CORS headers you cannot download resource from origin other than application was loaded.

# **Here we have requests that use CORS:**
* Invocations of the XMLHttpRequest or Fetch APIs.
* Web Fonts (for cross-domain font usage in @font-face within CSS), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.
* WebGL textures.
* Images/video frames drawn to a canvas using drawImage().
* CSS Shapes from images.

# **Accessible methods**
There are "simple" requests that don't trigger CORS preflight. But this requests must follow all the conditions below:

1. One of the allowed methods:
 * GET
 * HEAD
 * POST

2. Apart from the headers automatically set by the user agent the only headers which are allowed to be manually set are those which the Fetch spec defines as a "CORS-safelisted request-header", which are:
 * Accept
 * Accept-Language
 * Content-Language
 * Content-Type (but note the additional requirements below)
 * DPR
 * Downlink
 * Save-Data
 * Viewport-Width
 * Width

3. The only allowed values for the Content-Type header are:
 * application/x-www-form-urlencoded 
 * multipart/form-data 
 * text/plain

4. No event listeners are registered on any XMLHttpRequestUpload object used in the request; these are accessed using the XMLHttpRequest.upload property.
5. No ReadableStream object is used in the request.

# Let's imagine a little dialog between server and client:

- Client: Hey server! Give me some data, please.

- Server: Hi, firstly let me check if your request is 
          "simple" or not. If yes i'll give you data and list of 
allowed methods and allowed origins in response.

- Client: Okay, no problem. Do your work.


For additional information thanks [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) and [Wikipedia](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)