teleren/devto huggingface dataset:
jQuery to VannilaJS (export function using ES6)
Tags: javascript
Published: 2020-03-20 15:21:57

Hi, This script transforms the first letter of each word into a capital letter, except for some words that are part of the arrays of the variables wordContainAt, wordsToIgnore, wordUpperCase.

I'm having trouble refactoring a code made in `jQuery` to` Javascript Vannila`, using the ES6 export.

I think I didn't understand this concept very well, besides not being able to get the `this` object, within the scope of the function.

Can someone help me ?


```javascript
$(window).on('load', function() {
    $.fn.capitalize = function() {
        // words to ignore
        let wordContainAt = '@',
            wordsToIgnore = ['to', 'and', 'the', 'it', 'or', 'that', 'this', 'dos', 'rua-', 'das', 'rh', 'r'],
			wordUpperCase = ['LTDA', 'S.A', 'S.A.', 'SMS', 'LJ', 'CS', 'II'],
            minLength = 2;

        function getWords(str) {
            if (str == undefined) {
                str = 'abc def';
            } else {
                str = str;
            }
            return str.match(/\S+\s*/g);
        }
        this.each(function() {
            let words = getWords(this.value);
            console.log(words);
            $.each(words, function(i, word) {
                // only continues if the word is not in the ignore list or contains at '@'
                if (word.indexOf(wordContainAt) != -1) {
                    words[i] = words[i].toLowerCase();
                } else if (wordUpperCase.indexOf($.trim(word).toUpperCase()) != -1) {
                    words[i] = words[i].toUpperCase();
                } else if (wordsToIgnore.indexOf($.trim(word)) == -1 && $.trim(word).length > minLength) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1).toLowerCase();
                } else {
                    words[i] = words[i].toLowerCase();
                }
            });
            if (this.value != '') {
                this.value = words.join('');
            }
        });
    };

    // field onblur with class .lower
    $(document).on('blur', '.lower', function() {
        $(this).capitalize();
    }).capitalize();
});


/// I need help in this code below
const capitalizeTheWord = () => {
    console.log('teste');
    const inputWordCapitalize = document.querySelector('input.word-capitalize');
    inputWordCapitalize.addEventListener('keypress', (e) => {
        // more code
    });
};
export default capitalizeTheWord();
A Corvid-19 Widget for the Plash Server
Tags: corvid19, svelte, plash
Published: 2020-03-20 15:08:55

Well, with all the noise about the Corvid-19 virus, I decided to make a widget that works with my [Plash](https://sindresorhus.com/plash) [server project](http://customct.com/#/blog/plashserver-series).

I have a full tutorial series on my [personal blog site](http://customct.com/#/blog/plashserver-series). My latest tutorial is [a Corvid-19 widget](http://www.customct.com/#/tutorials/plashserver/covid19widget) and a Text widget. This widget will show the current infection rate for any country you are interestd in. On my background, it shows for Thailand (where I live) and the USA (where I’m from).

This series assumes you know very little about Svelte. I am trying to use it as a way to get more people interested in Svelte framework and know how to use if for their needs. I think it makes a great playground to learn Svelte.

I would love to see your comments on this series. All code is located on my [GitHub repository for the PlashServer](https://github.com/raguay/SveltePlashServer). Fork it, expand it, and send me some pull requests. It would be a lot of fun to have a community contributing to this project.
jquery-particles v1.10.4 released
Tags: javascript, typescript, github, showdev
Published: 2020-03-20 15:05:00

# New jquery-particles version released, 1.10.4.

Github [here](https://github.com/matteobruni/jquery-particles)

--

Checkout the new FontAwesome demo here:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

Here are some demos!

## Characters as particles

[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.matteobruni.it/#chars)

---

## Mouse hover connections


[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.matteobruni.it/#connect)

---

## Polygon mask

[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.matteobruni.it/#mask)

---

#### Background Mask particles

[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.matteobruni.it/#background)

---

#### COVID-19 SARS-CoV-2 particles

[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.matteobruni.it/#virus)

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*

--

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

---

Feel free to contribute to the project!
New Name Who Dis?
Tags: name, domain, password, launch
Published: 2020-03-20 15:01:02

SubsHQ is changing it's name to Tilig! We are about to launch something really special and will be ready for you to use Tilig full time. So far our beta testers have been loving using Tilig, and I think you will too. With a password manager, it's even more important that everything we release must be of the absolute highest quality. That's why I've been using Tilig myself, every single day. With our goal being very ambitious:

> Tilig is the password manager for everyone. 

What I really mean is: Tilig will be the account manager for everyone else. We've found that in the tech community password managers are very popular, but outside of the tech community they are less used, and many people just don't see the point. You'll hear this line a lot: "I use a password manager, but I can't get my partner to use one." We've done some research to figure out why people just don't want to use them, and we found that password managers are just not easy enough. They should be helping you rather than you helping them. You shouldn't have to be a data entry specialist to use a password manager. It should make your life easier, not harder. Our beta testers now say "I look forward to using Tilig because it helps me a lot. It does exactly what I want." This is a quote from an every day beta tester.

Tili means "accounts" in Finnish. We also just really like the name. 

In order to find a great name, we went to [brandbucket.com](https://twitter.com/brandbucket).

We thought of 3 options:

1. Find a name that matched the functionality of our app. e.g. Keepmydamnpasswordssafe.com
1. Find a mythical creature / rare animal / military terminology / famous person from the 1600. e.g. Camazotz.com - A giant, evil vampire bat demon. 
1. Make up a name that sounds fun and is easy to remember. e.g. Tilig.com

We don't have many people building this (myself, and a part time infrastructure expert) and I need to finish this app and not spend tons of time and money coming up with a name. Unfortunately, once you start thinking about names, it's really hard to stop until you have a good one. 

Once we found the name Tilig, and we agreed that we liked it, we started calling our friends and family and asking them to say the name based on how it was spelled. Then we asked others to spell Tilig based on how others pronounced it. From that we got great feedback!

We can't wait to show you the final product very soon!
tsParticles v1.10.4 released
Tags: javascript, typescript, showdev, github
Published: 2020-03-20 14:49:00

# New tsParticles version released, 1.10.4.

## Release notes

- Fixed critical bug on polygon mask drawing, not considering the input options

--

Checkout the new FontAwesome demo here:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

Here are some demos!

## Characters as particles

[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.matteobruni.it/#chars)

---

## Mouse hover connections


[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.matteobruni.it/#connect)

---

## Polygon mask

[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.matteobruni.it/#mask)

---

#### Background Mask particles

[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.matteobruni.it/#background)

---

#### COVID-19 SARS-CoV-2 particles

[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.matteobruni.it/#virus)

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*

--

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

---

Feel free to contribute to the project!
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-03-20 14:44:24

day 11/100 of #100daysofcode #Flutter
Belajar Flutter , dari kursus Udemy from
@maxedapps

learn about Flutter Lifecycle, call initstate, didUpdatedWidget, dispose,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Daily Challenge #209 - Roman Numerals
Tags: challenge
Published: 2020-03-20 14:37:32

---
title: Daily Challenge #209 - Roman Numerals
published: true
series: Daily Challenge
description: Convert Roman Numerals to Integers.
tags: challenge
---
Implement a function that takes a Roman numeral as its argument and returns its value as an integer. You don't need to validate the form of the Roman numeral.

Modern Roman numerals are written by expressing each digit of the number to be encoded separately, starting with the leftmost digit and skipping any 0s. So 1990 is rendered "MCMXC" (1000 = M, 900 = CM, 90 = XC) and 2008 is rendered "MMVIII" (2000 = MM, 8 = VIII). The Roman numeral for 1666, "MDCLXVI", uses each letter in descending order.

Here's a chart to help out:
<pre>
Symbol    Value
I          1
V          5
X          10
L          50
C          100
D          500
M          1,000</pre>

###Example
solution('XXI'); // should return 21

###Tests
solution('I')
solution('IV')
solution('MMVIII')
solution('MDCLXVI')

Good luck!
***
_This [challenge](https://www.codewars.com/kata/51b6249c4612257ac0000005) comes from jhoffner on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Full Stack setup from scratch - Node.js, Express.js, React.js and Lowdb (Part 3)
Tags: node, express, react, heroku
Published: 2020-03-20 14:28:45

1. [Setup](https://dev.to/brunobc/full-stack-setup-from-scratch-node-js-express-js-react-js-and-lowdb-part-1-1dpa)
2. [Filter pages to print](https://dev.to/brunobc/full-stack-setup-from-scratch-node-js-express-js-react-js-and-lowdb-part-2-l3o)
3. [**Deploy to Heroku**](https://dev.to/brunobc/full-stack-setup-from-scratch-node-js-express-js-react-js-and-lowdb-part-3-1ao0)

To deploy to Heroku, you have create an account at Heroku.

>[Heroku](https://www.heroku.com/) is a cloud platform that lets companies build, deliver, monitor and scale apps — we're the fastest way to go from idea to URL, bypassing all those infrastructure headaches.

After creating and logging in into your account, download and install the Heroku cli. Then, open your terminal and type the following command to login Heroku services:


```
heroku login
```
![](https://raw.githubusercontent.com/brunobc/node-react-project/heroku/prints/login.png)

Next, create your app, typing:
```
heroku create filter-pdf
```

![](https://raw.githubusercontent.com/brunobc/node-react-project/heroku/prints/creeate-app.png)

Then, in package.json in the root project, add the script:
```javascript
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix front && npm run build --prefix front"
```

Now, commit that change and push it to Heroku:
```
git push heroku master
```

If you want deploy other branch, so:
```
git push heroku otherBranch:master
```

Then, go to the [heroku dashboard](https://dashboard.heroku.com/apps) page, access your app and check the app's overview section. That is where Heroku will display some building logs.

![](https://raw.githubusercontent.com/brunobc/node-react-project/heroku/prints/dashboard.png)

Once you get a "Deployed" message, you can click on the "Open app" button and see the application running.

I hope this tutorial helps. Thanks.
Reddit spam filters are blocking dev.to
Tags: discuss
Published: 2020-03-20 13:56:35

When I started writing on dev.to I tried to promote my work a few times with Reddit as I did in the past with other resources.

All my posts are always blocked when they have dev.to link, like this one https://www.reddit.com/r/github/comments/fjjiyn/github_actions_when_fascination_turns_into/

Others, not dev.to related, are fine, like these ones:
- https://www.reddit.com/r/github/comments/flso7w/full_automation_of_release_to_npm_and_docker_hub/
- https://www.reddit.com/r/learnjavascript/comments/fltdfo/full_automation_of_release_to_npm_and_docker_hub/

To me, it seems like whatever comes from dev.to is blocked by Reddit. Is it just me or? What is your experience?
What is something important that you think is being overlooked in the tech community? Call us with your answer!
Tags: discuss
Published: 2020-03-20 13:53:03

---
title: What is something important that you think is being overlooked in the tech community? Call us with your answer!
published: true
description: Have your voice heard on our new podcast!
tags: discuss
---
DEV is launching a new podcast (shhhhh 🤫😉) and we'd love for you to be involved! For one of our inaugural episodes, we want to know:

“What important issue is being overlooked in the tech community?”

If you'd like to participate, please : 

- Call our Google Voice at +1 (929)500-1513 and leave a message 📞
- Send a voice memo to pod@dev.to 🎙
- OR, if you don't want your voice recorded...email pod@dev.to with your response and we'll read it aloud for you 🗣

Can't wait to share more info soon! In the meantime, please follow our resident podcast producer, Levi:

{% user levisharpe %}


He's in charge of all this magic ✨
How to Get GitHub Subdomain with GitHub Pages
Tags: webdev, github
Published: 2020-03-20 13:46:14

Have you noticed on the internet where some website's URL has a GitHub domain like this one [reactstrap.github.io](https://reactstrap.github.io/) and wondered how you can get it? Well, it turns out this can be done with [GitHub Pages](https://pages.github.com/). 

GitHub Pages is a static site hosting service where you can host your repository for free and comes with SSL (Secure Sockets Layer) too.

Creating the GitHub page is pretty straightforward and you can set it up and running in 5 minutes or less. Let's go make the website!

## 1. Create a Repository

Go to GitHub and create a new repository called `username.github.io` where the *username* can be your username. Make sure the first part of the repository name matches with your account or else it won't work.

## 2. Clone the Repository

In your computer, go to the folder where you want to store your project and clone the repository there.

``` 
$ git clone https://github.com/username/username.github.io 
```

## 3. Create a File

Next, we will create a simple file and add a little content "Hello World" into the file.

```git
$ cd username.github.io

$ echo "Hello World" > index.html
```
## 4. Push it to Repository

We're almost there. Add the changes you made, then make a commit, and finally push the changes to the repository.

```
$ git add --all

$ git commit -m "Initial commit"

$ git push -u origin master

```

And there you go! Your website is now ready and you can view it by opening the browser and head to ` https://username.github.io`. The URL is short and nice, and it's much better than if you were to do with the old way. Something like that: `https://username.github.io/projectname/`

Hopefully, you find this little guide useful and maybe save a few bucks along the way.

Enjoy!

*Photo by DESIGNECOLOGIST on Unsplash*
What is HTTP?
Tags: beginners, basics, internet
Published: 2020-02-24 15:25:28

HTTP is __H__yper __T__ext __T__ransfer __P__rotocol which involves protocols involving communication between web servers and clients. It can be thought as the messenger of the web. Client is the one who makes the request(HTTP Message) and the server responds(HTTP Message) to that request.

HTTP is state-less i.e. it doesn't remember anything about the previous page when we go from one webpage to another(Cookies and Sessions are additional stuffs, and aren't part of HTTP core). Each request can be thought of as a single transaction. 

HTTP is connection-less i.e. there is no fixed 24*7 connection between the client and the server, rather the connection happens with each request and response cycle. For further requests, there will be more new connections.

A HTTP Message has 3 parts:
_Start line_, _Headers_ and _Body_. The message body is optional
The info present in the 3 section varies depending if that is a request or a response.
###For Request:###
startline has the method name telling the server what to do, URL and the version number. 
Headers can be thought as a few key-value pairs like host, accept-language etc.
A message body is the one which carries actual HTTP request data (including form data and uploaded etc.) 

###For Response:###
No method is required in the startline of a response. However it contains the http version and the status code.
A message body may contain HTTP response data from the server ( including files, images etc)
##Some methods used in HTTP:##
Method is a command instructing the server what to do.Method names are always in uppercase.
__GET:__ Every time we visit a webpage, we make a GET request to the server via HTTP.

__POST:__ When adding some data to the server like - submitting a form,creating a blog post, uploading an image. In a POST request, we send data to the server which is then stored in a database.

__PUT:__ PUT request is used to update some already existing data.

__DELETE:__ DELETE request deletes data from the server.

Each Request and Response has a header and a body. 
The Response body is the html or json or whatever is being sent from the server end.

##HTTP STATUS CODES:##
As the name refers to, these are codes referring to different statuses.
It has a range from 100 to 500.

*1XX : Informational*
Request received/processing.

*2XX : Success*
Successfully received, understood and accepted.

*3XX : Redirect*
Further action/Redirect.

*4XX : Client Error*
Request doesn't have what it needs.

*5XX : Server Error*
Server couldn't fulfill some valid request.
Build Chatbots with Dialogflow - Step By Step Guidelines
Tags: android, ios, cloud
Published: 2020-03-20 13:25:51

Dialogflow from Google (earlier known as API.ai) is a great platform for developing chatbots for multiple platforms. Earlier when Dialogflow was known as API.ai, they had an Android and iOS client library to integrate chatbot into mobile apps. But after merging into Google, the existing library is not getting updated; rather we are seeing Dialogflow added to Google’s Cloud platform and a new Java-based client API is being developed.

In this article, I will show you how you can integrate a chatbot developed in Dialogflow using the new Java client API. 

Click here: https://dzone.com/articles/build-chat-bots-with-dialog-flow-step-by-step-guid
Bootable Win10 USB from macOS
Published: 2020-03-20 13:09:32

I recently needed to build a new bootable USB to get Windows 10 back onto my desktop PC. Having not done this in quite some time, I didn't realise just how difficult this was going to be.

Starting from Microsoft's website, I download the latest ISO for Windows 10, created a bootable USB, mounted the USO, copied the contents and then tried to install my OS. It didn't work, as a PC will not boot an exFAT partition. I then wasted £32 on uuBYTEISOEditor, which also didn't work. UNetBootIn didn't work either.

The issue with a lot of these tools is that while the USB will boot, the moment you click the Install Now option, you'll run into "media not found" errors, which no amount of USB port switching will fix.

What I ended up doing to get a bootable USB was the following:

Format your USB drive from the command line:

`$ diskutil eraseDisk MS-DOS "WINDOWS10" MBR disk2`

This pops the FAT32 filesystem on your USB, which is what Windows wants for a bootable USB. Ironically, this also means that a very particular file will not fit on that particular filesystem. That file is located at `sources/install.wim` and needs to be fixed before we can use it, as its over 4GB in size and cannot be copied to a FAT32 file system.

Mount your ISO file to access the contents (it's just an archive):

`$ hdiutil mount ~/Downloads/Win10_1909_English_x64.iso`

This will mount the ISO image as:

`/Volumes/CCCOMA_X64FRE_EN-US_DV9`

Now copy everything except `install.wim` to your USB:

`$rsync -avh --progress --exclude=sources/install.wim /Volumes/CCCOMA_X64FRE_EN-US_DV9/ /Volumes/WINDOWS10`

Once that's done, install the tool you'll need to deal with the oversize file:

`$ brew install wimlib`

Instead of splitting `install.wim`, we're going to compress it, which takes a little longer but was the solution I went for first and found to work:
`
$ cd ~/Downloads
$ cp /Volumes/CCCOMA_X64FRE_EN-US_DV9/sources/install.wim .
$ chmod u+x install.wim
$ wimlib-imagex optimize install.wim --solid`

On my 2018 15" MacBook Pro, this took about 18 minutes to complete.

The file compressed some more, you can copy it off to your USB:

`$ cp install.vim /Volumes/WINDOWS10/sources/`

Unmount the USB:

`$ diskutil unmount /dev/disk2`

Now slot the USB into your Windows machine and install Windows. I'm just left wondering why this had to be so difficult.