teleren/devto huggingface dataset:
Vanilla JavaScript Dynamically Calling a Function
Tags: javascript
Published: 2020-07-18 06:00:20

Have you ever had the scenario where you needed to call a function, but based on a variable?

In my most recent use case, I have an area of dynamic modules and loop over them; then, if I find one of these, I want to call the function dynamically.

So how do we go about this?

## Defining our Functions

First, let's start by making our functions.

```js
function customClick(button) {
  button.addEventListener('click', function(event) {
    alert('custom click');
  });
}

function customUppercase(input) {
  input.addEventListener('keyup', function() {
    input.value = input.value.toUpperCase();
  });
}
```

Not very exciting functions but good enough to test with.

For this we are going to use the following `HTML`

```html
<input type="text" data-module="customUppercase" /> <br /><br />
<button type="submit" data-module="customClick">Done</button>
```

## JavaScript Dynamically Calling a Function

Ok, let's start by defining our array of custom objects.

```js
var options = ['Click', 'Uppercase'];
```

We will now loop over these:

```js
for (var i = 0; i < options.length; i++) {
  console.log(options[i]);
}
```

Within the modules we need to get all the types that have the data-module we are passing:

```js
for (var i = 0; i < options.length; i++) {
  var items = document.querySelectorAll('[data-module="custom' + options[i] + '"]');
  for (var j = 0; j < items.length; j++) {
    // Call function
  }
}
```

Now, we need to call the function dynamically!

```js
for (var i = 0; i < options.length; i++) {
  var items = document.querySelectorAll('[data-module="custom' + options[i] + '"]');
  for (var j = 0; j < items.length; j++) {
    this['custom' + options[i]](items[j]);
  }
}
```

That's it! Have a shot at this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="LYGgwom" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript Dynamically Calling a Function">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/LYGgwom">
  Vanilla JavaScript Dynamically Calling a Function</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
YouTube Video | CSS Crash Course - 1
Tags: css, youtube, webdev, showdev
Published: 2020-07-18 05:46:44

Welcome to another beginners course specially targeted at people, who want to start with web-development. You should first learn about HTML, before moving to CSS. **CSS** is known as **C**ascading **S**tyle **S**heets and is used to style websites.

Here is the first part of the series.

{% youtube or1wvlkOqgk %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Failed to set up listener, error code 100, WiredTiger error
Tags: 100daysofcode, mongodb, linux
Published: 2020-07-18 05:15:51

###SocketException: Address already in use

The error:

*2020-07-18T05:35:32.189+0300 E  STORAGE  [initandlisten] Failed to set up listener: SocketException: Address already in use 2020-07-18T05:35:32.189+0300 I  CONTROL  [initandlisten] now exiting 2020-07-18T05:35:32.189+0300 I  CONTROL  [initandlisten]....*

Running `mongod --port 27030` (a different port) fixes it.

###Error code: 100
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sjbh7bcf5r1hnit7axtu.png)
Quick fix run as a super user.It should work but its not recommended - i don't know why.
Can be fixed by changing the user permissions on the data/db directory. Its currently read only run `sudo chmod -R 600 data/db`.

###WiredTiger error

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

Fixed it by changing the wireTiger user group permissions on the db directory. 
`sudo chown mt:mt data/db/WiredTiger*` mt:mt in this case should be your primary user group.
You'll probably to run into another error relating to user group permissions, so it's safer to use `sudo chown -R mt:mt data/db` to change the user group permissions for all directories.

Run `mongod --port 27030` again.

And you should get this

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

End of day 2!
File system based storage has finally shipped to Boost Note
Tags: boostnote, productivity, tool, showdev
Published: 2020-07-18 04:53:56

---
title: File system based storage has finally shipped to Boost Note
published: true
description: 
tags: BoostNote, productivity, tool, showdev
---

# File system based storage
We've released v0.7.0 with File System based storage support on July 1st.

https://boostnote.io/
 
Every note and attachment is stored as a single file so you will be able to access all data directly via any applications and share it via conventional file cloud storage like Google Drive, Dropbox and iCloud.
 
To know more, please check this article!

[Update notes v0.7.0 and next roadmap](https://medium.com/boostnote/update-notes-v0-7-0-and-next-road-map-637af1f6d132)

---

# Boost Note for Teams
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0d46hs5idabvkax4h41c.png)](https://boosthub.io/)

Also, we've revealed a new collaboration wiki service called [BoostHub](https://boosthub.io/).

It will be a collaboration version of Boost Note but much more powerful. The feature, called "Custom Blocks", will let you make custom react components, integrated with various 3rd party app apis like GitHub and Trello, and embed them into markdown contents like MDX.

To know more, please check [this slide](https://www.slideshare.net/kazup/how-to-use-boost-hub).
Made a guide on how to setup WSL 2 on your Windows 10 running machine.
Tags: linux, windows, wsl
Published: 2020-07-18 04:42:46

WSL 2 is a pretty interesting addition to the latest version of Windows 10 (build 2004). It has a lot of potential and is finally out of the Insider preview build's exclusivity. Follow this guide and give WSL 2 a shot yourself!


https://sourajitk.github.io/posts/wsl-2-how-to/


P.S: I've also attached a guide on how to get Nathan Chancellor's (https://github.com/nathanchance) WSL kernel based on the Linux-Next branch.

Have fun!
Use Gravatar Everywhere
Tags: gravatar, duckduckgo
Published: 2020-09-14 11:54:48

---
title: Use Gravatar Everywhere
published: true
date: 2020-07-18 04:01:56 UTC
tags: gravatar, duckduckgo
canonical_url: https://bemnlam.github.io/posts/use-gravatar-everywhere/
cover_image: https://bemnlam.github.io/img/use-gravatar-everywhere/cover-images.001.jpg
---

### What is Gravatar

Your public profile on the internet, provided by Wordpress. See [https://en.gravatar.com/](https://en.gravatar.com/).

### 1. Upload an image to your gravatar account

If you don’t have the gravatar account, create one. Make sure that the email you used to create the account will be the email account you want to link your profile picture.

After that, upload your profile picture to gravatar.

### 2. Use the image everywhere

#### Get your md5 hash of email address

**Ask DuckDuckgo**
You can get the md5 checksum using [duckduckgo](https://duckduckgo.com). Search `md5 {your email address}` and then you will see the hash:
![get a md5 hash on duckduckgo](https://i.imgur.com/D9oVAVX.png)

**Use Command Line**
For MacOS user, you should have the md5 utility installed, go to the terminal and check:

```
❯ which md5
/sbin/md5

```

After that, generate the md5 hash of your email address:

```
❯ md5 -s "myemall@address.com"
MD5 ("myemall@address.com") = ca49930cff2f87bd37bfe71ce21467f

```

The gravatar image url is in this format:

```
https://gravatar.com/avatar/{your md5 hash}?s={size}

```

If you want to have a 200px avatar: `https://gravatar.com/avatar/ca49930cff2f87bd37bfe71ce21467f?s=200`.

Use this image url e.g. in a `<img>` tag:

```
<img src="https://gravatar.com/avatar/ca49930cff2f87bd37bfe71ce21467f?s=200" />

```

And you are good to go!
Fwitter android app v1.0.6 is released on play store
Tags: flutter, dart, opensource, twitterclone
Published: 2020-07-18 03:43:58

A Fwitter is a working Twitter clone written in Flutter using firebase features like auth, realtime database and storage.

## New feature 

* Tweet filter functionality added on profile page.
* User profile pic view added to view user profile picture.
* User can tag other users in tweet, comment and in retweet.
* A notification will send to you if someone tag you in a tweet.
* If user tap on notification from system notification tray, it will redirect to user profile who tagged you.
* Chat list sorted by last message.
* Last message and time is added on chat user list page.

App link:- https://play.google.com/store/apps/details?id=com.thealphamerc.flutter_twitter_clone

Source code:- https://github.com/TheAlphamerc/flutter_twitter_clone

Work progress status:- https://github.com/TheAlphamerc/flutter_twitter_clone/projects

## Contributing

If you wish to contribute a change to any of the existing features or add new in this repo,
please review our [contribution guide](https://github.com/TheAlphamerc/flutter_twitter_clone/blob/master/CONTRIBUTING.md),
and send a [pull request](https://github.com/TheAlphamerc/flutter_twitter_clone/pulls). I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.

## Project Created & Maintained By

[Sonu Sharma](https://github.com/TheAlphamerc) ([Twitter](https://www.twitter.com/TheAlphamerc)) ([Youtube](https://www.youtube.com/user/sonusharma045sonu/)) ([Insta](https://www.instagram.com/_sonu_sharma__))
enchantedForest[5]
Tags: javascript
Published: 2020-07-18 03:13:45

**SAVING SYSTEM**

Today we wrote a saving system for our game. 
It's really starting to feel like a real game now!
Once we add real quests, and you can save your quests and level up and stuff it's going to be super epic!

In writing the saving system we had some adventures.

Most notably our .git file got corrupted somehow, resulting in massive panic, and `cp -r`ing and `scp -r`ing. In the end we found a pro solution though: `rm -rf .git`, and then `cp -r .git` from a different clone of the project. As they say "high quality".

Anyways, as expressed I'm super hyped about the checkpoints saving your progress.

For the curious people out there here's what our `createAccount` function looks like:

```python
    mongo.db.users.insert_one({"username": username, "pwd_hash": pwd_hash, "data": {
        "checkpoint_room" : "llamaPlains", 
        "health" : 50,
        "coins" : 100,
        "mana" : 100, 
        "completedQuests" : [ ], 
        "level" : 1, 
        "xp" : 10, 
        "items" : [ ] 
        }
    })

```


Also, another really nice thing that we did is we kind of messed around with the stats and stuff. Like we made the mana generation rate more reasonable.

Also, @kaisucode made an absolutely epic health bar, that is way better than hearts imo. 

Also a little comic strip for your enjoyment:

> Alek: yo how do you update something in MongoDB?
> Kevin: let me look it up 
> Alek: wait no I can just drop the database
> Alek: how do you insert something into a database?
> *presses up arrow 100 times*
> Alek: found it!
> Alek: Aw crap we're hashing the pwds
> Alek: loolllll *creates account with same pwd, copies hash*
> Alek: drops database again
> Alek: wait should I drop the database again? ok
> Alek: hmmm. 
> Alek: `db.dropDatabase()`
> Alek: `db.dropDatabase()`
> Alek: `db.dropDatabase()`
> Alek: `db.dropDatabase()`
> Alek: Why can't I press tab to autocomplete filenames when I'm `scp`ing. oh wait. lolll.
> Alek: `db.dropDatabase()`
> Alek: `db.dropDatabase()`
> Alek: `db.dropDatabase()`
> Alek: `db.dropDatabase()`
> Alek: ayy it works! ok we're never allowed to modify the database btw.  

Next time we're gonna be making the game more legit. In particular, we will be

- adding the first boss
- adding some more rooms 
- making the quests real
- making the npcs real
- making the merchants real

It's going to feel like a real game!
Get ready!!!!!

Finally, I would like to close with an inspirational thought.
When testing the game saving stuff, we made it save health first. In order to get the test to pass we had to lose health, and then reload the page and have the low health. Getting to a checkpoint took a while though. This prompted the following brilliant realization: if the player died, it respawned close to the checkpoint. 

> You would kill yourself to get to the checkpoint faster?
> Some things are worth dying for.

pretty much.

Ah, what an *enchanting forest*.
How to write regex in natural language
Tags: react, javascript, html, css
Published: 2020-07-18 03:13:35


![How to write regex in natural language](https://i1.wp.com/blogreact.com/wp-content/uploads/2020/07/logo.png?resize=750%2C161&ssl=1)

Everyone knows regex is most powerful feature of JavaScript but at the same time it can give hard time to even experienced developers. Reading your regex after few months sometime become too difficult. In today article we will gonna learn how we can write regex in natural language.

## [Super expressive](https://github.com/francisrstokes/super-expressive)

Two days ago a new game changing library came into reality. This is a JavaScript library that allows you to build regular expressions in almost natural language – with no extra dependencies, and a lightweight code footprint (less than 3kb with minification + gzip!).

On first place why we need a new library for regex. The answer is simple even the regex is so powerful but writing syntax of regex is too complicated. Most of the time we again need to read the docs of regex to create a new regex.

This library solves the issue of complex syntax. It uses the normal natural language words to create a regex.

**Installation**

Like any other npm package you can install this library using npm or yarn.

```
npm i super-expressive --save
```

**Usage**

To use this library first of all you need to import this library.

```
const SuperExpressive = require('super-expressive');
```

**Example**

_Find Mutiple hello in a string._

```
SuperExpressive()
  .allowMultipleMatches
  .string('hello')
  .toRegex();
// ->
/hello/g
```

_Find CaseInsenstive Hello._

```
SuperExpressive()
  .caseInsensitive
  .string('HELLO')
  .toRegex();
// ->
/HELLO/i
```

_Captures the value of a 16-bit hexadecmal number like `0xC0D3`_

```
const SuperExpressive = require('super-expressive');

const myRegex = SuperExpressive()
  .startOfInput
  .optional.string('0x')
  .capture
    .exactly(4).anyOf
      .range('A', 'F')
      .range('a', 'f')
      .range('0', '9')
    .end()
  .end()
  .endOfInput
  .toRegex();

// Produces the following regular expression:
/^(?:0x)?([A-Fa-f0-9]{4})$/
```

Similarly you can create any regex in natural language using this library. I hope you have learned how to write regex in natural language.

[Full docs](https://github.com/francisrstokes/super-expressive)

[How to check an element is in viewport using Intersection Observer API](https://blogreact.com/intersection-observer-api/)
Introducing, Reactive Resume v2!
Published: 2020-07-18 03:12:28

It’s with extreme excitement, happiness and relief that I can now say, introducing… Reactive Resume v2.

With nearly 1.7k stars on GitHub, around 100 closed issues and feature requests, I heard you loud and clear and revamped the project from the ground up, and boy, am I excited to hear what you guys think about this!

Without much ado, here’s the link to the all new Reactive Resume:
#### https://rxresu.me

For those of you who are not aware of the project, here’s the cliff note: Reactive Resume is a free, open source, ad-free, private app that focuses on making the mundane tasks of creating, updating and sharing your resume a piece of cake.

### Screenshots

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

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

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

**Here is a subset of features introduced in the all new revamp:**
- Manage multiple resumes with one account, and sync your data across devices
- Sign in with Google, or sign in anonymously just to test the app
- Send your resume to others with a unique sharable link
- Structure sections and change layouts the way you want to
- Import your existing JSON Resume in one click
- Everything is still free, and always will be.

Here is the link to the GitHub Repository, if you'd like to go through the code (it's in React, hence the name)

{% github https://github.com/AmruthPillai/Reactive-Resume no-readme %}

Also, if you have an itch to contribute to the project, it would be extremely helpful to translate the app into your own language so people across the world would be able to use it with ease.

Please do take a few minutes to go through the app, and if you loved it, let me know in the comments below on what could be better. Thank you so much for all the support!
What is the best Stack for Backend ?
Tags: go, python, ruby, sql
Published: 2020-07-18 03:03:37

Friends,My team got a project to deliver to a client,We are looking at a micro service architecture, Therefore the Frontend is pretty much straight forward since the team is most competent in Vue over React.

However, the puzzle lies in the backend!
What parameters should we apply to chose the best Backend stack . 

Currently the team is competent enough with python,go and ruby.

FYI - The system architecture has predominantly relational data so sql is pretty much a no brainer.
Is it intimidating to work with people smarter than you?
Tags: productivity, leadership, career, learning
Published: 2020-07-18 02:57:44

I was recently on a panel with [COOP](https://coopcareers.org/) which is an organization that is building a diverse movement of upwardly mobile college grads overcoming underemployment through digital skills and peer connections. It was a fantastic experience, and the students who were part of it, were awesome to interact with. During this panel, I was asked a question - 

>>> Was it ever intimidating to work with the enormous amount of talent that you have come across throughout your career?


Yes. There is no way around it, and its not even a thing in the past. If you are honest with yourself, then the unequivocal answer is `yes`. If people say otherwise they are either -
- Not being honest
- Too proud to admit that
- Not challenging themselves enough to be in an environment which has other smart people

Some of the reasons that I think have accentuated my feeling of being daunted include - 
- Being an immigrant, which itself comes with a bunch of baggage
- Having imposter syndrome 
- Being afraid of looking stupid in front of peers or colleagues
- Genuinely not having knowledge in areas that are being talked about

I believe that there are tremendous benefits of being intimidated or surrounded by people who are _much_ smarter than you. In my opinion, most learning occurs at the cusp of discomfort. If you are early in your career, it could be your manager/peers who are challenging or asking you to do certain things you are unfamiliar with. If you are a more senior veteran, it could be your peers/reports, who are challenging or refuting your thoughts but - 
- If you frame it right, it can lead to non-linear gains over time
- You want to surround yourself with people smarter than you because you will never have all the answers, and you need to be able to learn from others 
- You want people to disagree with you for the right reasons. As you get into managerial positions, it can get very easy for an opinion you voice to be interpreted as a task/order. You need people to call you out on your BS if you haven’t fully thought it through, or you have formed an opinion that is not using important inputs that should have been considered.
- Being in an intellectually challenging environment helps you hone your opinions/thoughts. Every time I have taught or mentored students or people, I have always found myself questioning the very basics of my beliefs, using some form of Socratic method. You learn more as a teacher because you always question “why”. I believe that having these very smart people around you helps bring out the same kind of process.

Basically what I am saying is, there is _always_ someone smarter than you in the room, and rather than feeling trepidation, embrace that feeling and use that as a resource to make yourself better.
Installing Kivy using Pipenv
Tags: todayilearned, python
Published: 2020-07-18 02:46:56

Today I learned how to install Kivy using Pipenv. It was easier than I had thought.

Kivy is a Python GUI Framework. Its UI is modern and very cool. It is released under the MIT License.

## Environment

My environment was listed below.

 - macOS Catalina 10.15.5
 - pipenv: stable 2018.11.26
 - Python 3.7.4

## Installing Kivy

Following [the official installation guides](https://kivy.org/doc/stable/installation/installation-osx.html), I run this command. And, the installation was succeeded.

```
$ pipenv install kivy
```

## Installation Confirmation

To confirm the installation, I copied this [Pong Game Tutorial](https://kivy.org/doc/stable/tutorials/pong.html) codes and run them.

I could move the bars on left and right and hit the ball.

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

The Kivy installation was completed.
CORS Reverse Proxy (cors-reverse-proxy)
Tags: showdev, go
Published: 2020-07-18 02:10:31

* Github: https://github.com/kaishuu0123/cors-reverse-proxy
* Docker Hub: https://hub.docker.com/r/kaishuu0123/cors-reverse-proxy

# Use Case
1. For local development environment etc.
2. When you want to load resources (images, JS, etc.) while trusting a specific web application.

# Motivation

I wanted a docker image that would add a simple `Access-Control-Allow-Origin: *` header.

In addition, when I searched on the Internet, I could not find a reverse proxy that suits my purpose so much.
So I made it while enjoying and studying the GO language.

When doing web development, there are times when content loading is blocked due to CORS policy issues. If you have seen the following message in the developer console, I think that you have it.

```
... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

It's very correct, and it may be a necessary protection for security, but there are times when you do not want to be blocked after judging that there is no problem in development

As a workaround, there are 2 patterns

1. A case where `Access-Control-Allow-Origin: *` Header is added by nginx or Apache
2. Install the CORS related package to the middleware of the application and set it

There is a way to create a config file such as nginx or Apache and pass it as a container, but in the first place it is troublesome to prepare a config file just to give `Access-Control-Allow-Origin: *` Header.

So I developed this project.