teleren/devto huggingface dataset:
Using Multiple WebWorkers With Create React App
Tags: react, webpack, typescript, webdev
Published: 2020-11-23 18:46:39

There are a few great articles about using **one** WebWorker with Create React App. The gist of them is to use [worker-loader](https://github.com/webpack-contrib/worker-loader) and something like [rescripts-worker-loader](https://github.com/linonetwo/rescript-worker-loader)  to modify the Webpack config. Easy (after trying ten times). 

# Problem 
I tried and succeeded to run multiple WebWorkers with Create React App and that was harder. At first I got this lovely error message 


> Conflict: Multiple assets emit to the same filename bundle.worker.js


Yuck!

# Solution
Here's the solution, assuming you're using rescript, and an explanation follows. 

In your rescriptsrc.js add the following: 

```js
function makeMultipleWebworkersWork(config){
    // Change the output file format so that each worker gets a unique name
    config.output.filename = 'static/js/[name].bundle.js'
    // Now, we add a rule for processing workers
    const newRules = [{

        test: /\.worker\.(c|m)?[tj]s$/i,
        type: "javascript/auto",
        include:  config.module.rules[1].include,
        use: [
            {
                loader: "worker-loader",
            },
            {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                },
            },
        ],
        // Here we append all the old rules
    },...config.module.rules]
    // now update Webpack's config with the new rules
    config.module.rules = newRules
    return config
}
module.exports =[
    makeMultipleWebworkersWork,
/*Your other stuff goes here */
]
```

# Explanation

After a day of debugging, I realized that CRA's configuration of Webpack doesn't take filenames into account for output (at least in dev mode), so all the workers get emitted to to the same bundle.worker.js file, but they overwrite each other not append.

The code above configures worker-loader and makes sure each worker goes to a different file, as desired. 

# Why 

I'm building an open source in browser NLP thing. As you might guess, it trains NLP models in the browser interactively. 
Using multiple workers is a great why to crunch a lot of data without blocking the users main thread, e.g. keeping the app responsive and engaging. 

Still a bit early to release it, but follow me here and on [twitter](https://twitter.com/thetalperry)  if you'd like to keep updated.
Programming Languages: What Could They Sound Like?
Tags: programming, languages, music, fun
Published: 2020-11-23 18:27:05

Have you ever wondered what a programming language _may sound like_?

What if programming languages were like nations and each one had their own anthem?

Here's a list of the Top 20 Programming Languages (according to the [TIOBE Index for November 2020](https://www.tiobe.com/tiobe-index/)) and their anthems using Classical music:

## Programming Language Anthems (Top 20)

> Would you use a different piece for your programing language? Add a comment with its name and suggested anthem!

**1) C:**

William Tell Overture: Finale (Rossini)

{% youtube SfKj8G3Ruc0 %}

**2) Python:**

Danse Macabre (Saint-Saëns)

{% youtube G0GVbnoh8Jo %}

**3) Java:**

The Hut on Fowl's Legs (Mussorgsky)

{% youtube HQ9mFCDYBFU %}

**4) C++:**

Ride of the Valkyries (Wagner)

{% youtube D5IL2lKYRNw %}

**5) C#:**

5th Symphony (Beethoven)

{% youtube Ht2rcrCFf_8 %}

**6) Visual Basic:**

Dance of the Little Swans (Tchaikovsky)

{% youtube 99w4FdQBp1U %}

**7) JavaScript:**

Summer, Presto (Vivaldi)

{% youtube Eu_R_OGCuI4 %}

> I am taking the creative freedom to include TypeScript in this Top 20 rank as "JavaScript with Types" 😊

**7.A) TypeScript:**

Dance Of The Knights (Prokofiev)

{% youtube mqhj5pCdaLk %}

**8) PHP:**

Sabre Dance (Khachaturian)

{% youtube mUQHGpxrz-8 %}

**9) R:**

Adagio for Strings, Op. 11 (Barber)

{% youtube ezAaIOGkfAY %}

**10) SQL:**

The Carnival of the Animals, Aquarium (Saint-Saëns)

{% youtube HlXmpwhd_6k %}

**11) Groovy:**

Pomp and Circumstance, Op. 39 (Elgar)

{% youtube 8vTvpUUuH8A %}

**12) Perl:**

Für Elise (Beethoven)

{% youtube YynGFXCTmzw %}

**13) Golang:**

Hungarian Dance No.5 (Brahms)

{% youtube g_aCxaOkzBY %}

**14) Swift:**

Clair de lune (Debussy)

{% youtube eNyLZkBzn4Y %}

**15) Ruby:**

Dance of the Sugar Plum Fairy (Tchaikovsky)

{% youtube sdduPpnqre4 %}

**16) Assembly:**

Flight of the Bumblebee (Rimsky-Korsakov)

{% youtube M93qXQWaBdE %}

**17) MATLAB:**

Winter, Allegro Non Molto (Vivaldi)

{% youtube 3w4lDsdeeB4 %}

**18) Delphi/Object Pascal:**

Lacrymosa (Mozart)

{% youtube 28TOLw9dluY %}

**19) Objective-C:**

3 Gymnopédies (Satie)

{% youtube nKr-Zhrkfcg %}

**20) Transact-SQL:**

Il barbiere di Siviglia (Rossini)

{% youtube NVmmUb1begA %}
Custom slack command use case - Sharing urls
Tags: engineeringmonday, slackintegration, slack, overengineeringmonday
Published: 2020-11-23 18:24:26

---
title: Custom slack command use case - Sharing urls
published: true
description: As part of our knowledge sharing experience, we've created a custom Slack command to help us with bookmarking the relevant urls for the whole team.
tags: #engineeringmonday #slackintegration #slack #overengineeringmonday
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4oxk395mw06mpzsya1b9.png
---

# As part of our knowledge sharing experience, we've created a custom Slack command to help us with bookmarking the relevant urls for the whole team.

# Why?
Someone shares an interesting url on Slack. If you are busy at that moment, you'll probably ignore it or say to yourself I’ll read it later and probably forget about it.

# What?
So we crated a slack custom integration. You type `shareurl <url>` in slack and this url ends up in our internal blog. On our weekly meet we review the shared urls and authors give the tldr; version to the rest of the team.

# How?
When you type the command with a url, payload is sent to our custom app. 
Url is then parsed and meta data obtained from a 3rd party service. 
App then checks if there is a blog post called *Shared Urls Week {year}-{week number}*
If it does not exist, it creates a blog post via WP api with the appropriate title and adds the content to it (url with its meta-data and slack username)
If it exists, it appends the information to that blog post.

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

Over-engineered or not, we like to play with automation and integrations :)

# Used tools
- https://api.slack.com/legacy/custom-integrations/outgoing-webhooks
- https://developer.wordpress.org/rest-api/reference/
- https://github.com/maknz/slack
What do you evaluate before learning a new programming language? 📊
Tags: discuss, beginners, programming
Published: 2020-11-23 18:19:56

💡 I recently decided to learn a new programming language!

I wanted to automate processes more simply and efficiently than using Java or Golang, which seemed quite verbose for what I wanted to do ... 🛠🖥

Here are some points that caught my attention when choosing #Python

- It is a readable, simple and quick to learn language.

- Multipurpose (Python can be used for Data Science, Machine Learning, Web Development & Automation).

- The community is large.

- There are many Libraries and Frameworks.

- The language is growing fast and is becoming more and more popular.

What about you? What do you evaluate when learning a new programming language? 📊
What is a Progressive Web App ? Why to build a PWA ?
Tags: pwa, webdev, javascript, android
Published: 2020-11-23 18:08:20

Progressive Web App was introduced by Google in 2015.

The term "Progressive Web App" isn't a formal or official name. It's just a shorthand used initially by Google for the concept of creating a flexible, adaptable app using only web technologies.

PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features. For example, web apps are more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by simply sending a link.

On the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. You can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a browser.

PWAs give us the ability to create web apps that can enjoy these same advantages.

---

### The main PWA features

* __Full responsiveness and browser compatibility__

* __Connectivity independence.__ Progressive web applications can work both offline and on low-quality networks.

* __App-like interface.__

* __Push Notifications__ as you can push notifications the same as Native Apps.

* __Self-updates.__ Can Update themselves automatically.

* __Security__ as PWAs are served through HTTPS. So unauthorized users can’t access their content.

* __Discoverability and easy installation.__ As Search Engines can access the like websites and can be shared as links, so installed easy as clicking *Add To Home screen* .

* __Easy Development__ As PWAs is easier than Native Apps in building.

* __Works on both Android and iOS__

---

When you want to build an app you should consider PWAs a choice like Cross platform, hybrid and Native apps.

Here's a comparison between Native, Web and PWAs.

![comparison](https://cdn.hashnode.com/res/hashnode/image/upload/v1655475693631/nSJmqVSas.jpeg)

---

I really Advise anyone to Learn Progressive Web Apps and start building Web Apps as PWAs.

[**Subscribe to my newsletter**](https://amrelmohamady.hashnode.dev/)
Day 4 -> 40 days of code.
Published: 2020-11-23 17:56:48

Arrow function 
It's the shortest function which we can use in the JavaScript.
It's just simple like other function the only difference is it use => that's why we think it's complicated. In real it's the simplest way to declare a function in JavaScript.
Let's see what does it mean
Normal function.
eg. 
function printdata(x)
{
 console.log(x);
}
printdata('normal function');

On the other hand if we use arrow function it's looks like this
eg. 
const printdata = (x)=>
{ 
console.log(x);
}
printdata('arrow function');

Just do some task using arrow function like factorial of a number , basic calculation by passing parameters eg. Adding, multiplication. Then you will get to know more about this function.
How do I enable 3PC on FireFox?
Tags: help, watercooler, cookies, security
Published: 2020-11-23 17:40:42

So, I want to ENABLE 3PC on FF, but every time4 I look at a site, it tells me to go to a checkbox that doesn't exist, or, it tells me to change my security from "Standard" to "Custom".

Like, no, god damn. I want to enable 3PC, that's it!

Is there any way to enable 3PC without interfering with my current FF security settings (without using a non-existent checkbox, panel, window, etc...)?
Building a Stripe Webhook Server in Typescript with AWS CDK - Part 1
Tags: aws, cdk, typescript
Published: 2020-11-23 17:25:08

---
title: Building a Stripe Webhook Server in Typescript with AWS CDK - Part 1
published: true
description: In this series of posts I am going to walk you through the steps I took to create a Stripe webhook endpoint in AWS.
tags: aws,cdk,typescript
cover_image: https://cdn.substack.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd9ca45ba-4727-4065-94e2-24128fddc877_2240x1260.png
---

Apologies for not taking the time to convert these into Dev.to friendly markup. Please head over to my substack for the full articles. 

Part 1 - Describing the stack
https://awscloudsa.substack.com/p/building-a-stripe-webhook-server
Part 2 - Implementation, configuration and deployment
https://awscloudsa.substack.com/p/building-a-stripe-webhook-server-d12
Truncate Text In React.js and JS
Tags: react, javascript, beginners
Published: 2020-11-23 16:55:56

Truncate is to shorten by cutting off a part , it has a lot of uses , you might have a post or description you wanna cut short if its longer or more than a certain amount of text. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rpk1uvjyh68rm9ss2rpo.JPG)
ill explain how the bellow code works , you could copy and paste code to your project
```javascript
class Cover extends Component {
    state = {
      banners: [informations or text we wanna truncate (let say i have 300 words)],
    };
  }
  render() {
    //reduce your information or text 
    const truncate = (input) =>
      input?.length > 300 ? `${input.substring(0, 254)}...` : input;

    return (
      <div>
            {truncate(this.state.banners.overview)}
      </div>
    );
  }
}
```  
this code is basically telling the code if your input is greater than 300  it should reduce to 254 and add 3 dots 
```javascript
const truncate = (input) =>
      input?.length > 300 ? `${input.substring(0, 254)}...` : input;
``` 
we later called the function in our return and added what we wanna truncate or cut
```javascript 
{truncate(this.state.banners.overview)} 
```
meet thanksbot
Tags: showdev, culture, javascript
Published: 2020-11-23 16:49:01

The cover of my grandmother’s journal reads:

>_It’s not happy people who are thankful_
>_It’s thankful people who are happy_

I can’t know for sure, but I think this little nudge has made a difference on her outlook over the years. I do know that thanksbot has changed mine over the course of 2+ years, and I’m very excited to share it with you today. 

[thanksbot](https://github.com/workingdirectory/thanksbot/) is an open source chat app for Slack that records individual messages of affirmation and shares them periodically with your workspace. Send thanksbot a direct message to record an appreciative note for a colleague; once you’ve double-checked the message it will be recorded and stored for later. Then at the designated time, thanksbot posts all the messages in aggregate for everyone to enjoy: 

![thanksbot sample text](https://dev-to-uploads.s3.amazonaws.com/i/qhcdhn35sk48o99dz18z.png)

thanksbot provides a gentle nudge to practice being thankful, improving moods and modifying behavior over time. The app sends a periodic, unintrusive reminder to help people build a reflex for sharing messages: 

![thanksbot reminder text](https://dev-to-uploads.s3.amazonaws.com/i/3j3vems5c9i2h3ohnlt8.png)

An earlier version of this tool was developed for internal use at Bocoup in 2016. The team liked getting the surprise positive affirmation, and it helped raise awareness for the unseen things people were doing to help one another. The “good feelings” were also reciprocal - it not only felt good to receive the affirmation publicly, and also felt good to write messages knowing it would make someone happy later.

In collaboration with Katie Broida and with support from Bocoup, thanksbot has been completely re-written and made available for your community via the Slack store or GitHub . We hope thanksbot encourages more positive affirmations and joy in your community workspace, as it did in ours years ago. I’m excited for you to try it out - please let us know what you think on Twitter ([@kbroida](https://twitter.com/kbroida) & [@jorydotcom](https://twitter.com/jorydotcom)). 

If you like using thanksbot, there are several people to recognize: Michael Champlin for the gracious kitty logo; Ben Alman, Pam Druin, Isaac Durazo, Bob Holt, Tyler Kellen, Jess Klein, and many other past and present Bocoupers contributed to this idea. We’re also grateful to the OpenJS Foundation and W3C TAG Slack communities for beta-testing.
WTF is Rust? The Illustrated Notes
Tags: rust, illustrated
Published: 2020-11-23 16:46:55

---
title: WTF is Rust? The Illustrated Notes
published: true
description: Illustrated notes on the basics of the Rust language
tags: rust, illustrated
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/m3dbyfcdjvect2vlehcs.png
---

The [Rust programming language](https://www.rust-lang.org/) keeps winning the middle-school popularity contest of the developer world: "most loved" on [Stack Overflow surveys](https://insights.stackoverflow.com/survey/2019#technology).

![stackoverflow](https://dev-to-uploads.s3.amazonaws.com/i/6wz9nsscvjx9e70np2n0.png)
 
So, what's this Rust thing and why is everyone enamoured?

Let's explore...

![WTFRust_1](https://dev-to-uploads.s3.amazonaws.com/i/iz58kqzpxuwqw2p8q9ra.png)

![WTFRust_2](https://dev-to-uploads.s3.amazonaws.com/i/vtal437vsru30jdb2k7l.png)


![WTFRust_4](https://dev-to-uploads.s3.amazonaws.com/i/lsj1xf0v7owkqzb7tkoz.png)

This happy balance Rust manages to strike – between speed, control over memory, and human-friendliness is what makes it so popular.

The kind of programmes you can write with Rust would otherwise be made in a language like C or C++. A lot of developers find the C-suite challenging to work with, so this friendly alternative is very welcome!

**It's got the Goldilocks Effect going on.   Not too slow, not too dangerous, not too complicated – just right.**

---

The Rust community is also infamous for being welcoming, open, and encouaging to newcomers. Fostering that kind of culture is very likely why it's gained so much traction in the last few years.

Anyone who hangs out in Developer World long enough realises frameworks and languages are identities much more than they're tools. You belong to Team React, or Camp Python, or the Rust Crew.

And no one wants to join a bunch of judgey gatekeepers.

![WTFRust_5](https://dev-to-uploads.s3.amazonaws.com/i/d49przduerjok68p26s5.png)

![WTFRust_3](https://dev-to-uploads.s3.amazonaws.com/i/nc7671f66sp5cbkea9ux.png)

![WTFRust_6](https://dev-to-uploads.s3.amazonaws.com/i/enlx0cemgo2afip3sadp.png)

---

I've just done a sweeping and completely incomplete overview of Rust here. But it's enough to point you in the right direction.

While researching and making these I watched [Pascal Precht](https://twitter.com/PascalPrecht)'s egghead course that shows you how to [Write Your First Rust Programme](http://bit.ly/39EPEyl)

![write-your-first-program-with-the-rust-language](https://dev-to-uploads.s3.amazonaws.com/i/lcnx9guhiegsu998ikz5.png) 

It's free 20 minute course that shows you all the basics.

---

👁‍🗨 If these are hard to read, you can download a free high-res PDF version [on the course itself](http://bit.ly/39EPEyl).
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!
How to add HotKeys in React
Tags: react, keydown, hotkey, keycode
Published: 2020-11-23 16:43:40

So, I was looking for this for longer than it took to write and so, I thought I'd better share it.

Usage...

```javascript
        <HotKey keys={["ArrowUp"]}>
           <SomeClickableComponent />
        </HotKey>
```

Optional parameters [scope, callback]...

The default scope is the whole document and the default callback is to click the first child.  Keep in mind, you can map more than one key, since keys attribute accepts a string or an array of strings.  see [keycode.info](https://keycode.info/)

```javascript
        <HotKey keys={["Enter","Space"]} scope={window.document} callback={myfunc}>
           <SomeClickableComponent />
        </HotKey>
```

Here's the code...

```javascript
import React from 'react'
import { useEffect } from 'react'

export function HotKey(props){

    const scope = props.scope || window.parent
    useEffect(()=>{
        scope.addEventListener("keydown",onKeydown)
        return ()=>{
            scope.removeEventListener('keydown',onKeydown)
        }
    })

    let keys = props.keys; // see https://keycode.info/
    if (!keys || !keys.length) return;
    if (typeof keys == 'string' || keys instanceof String) keys = [keys]

    const parent = React.createRef()
    const onKeydown = props.callback || ((e) => {
        if (keys.indexOf(e.code)>=0){
            parent?.current?.children?.[0]?.click()
            }      
    })

    return <div data-hotkey={props.keys} ref={parent}>
        {props.children}
    </div>

}

export default HotKey
```

git [https://github.com/chadsteele/hotkeys](https://github.com/chadsteele/hotkeys)

doc [https://dev.to/chadsteele/how-to-add-hotkeys-in-react-4610](https://dev.to/chadsteele/how-to-add-hotkeys-in-react-4610)
How to get production access to AWS Simple E-mail Service
Tags: aws, devops, discuss, help
Published: 2020-11-23 16:42:28

Here I will tell you about how you can get production access for the AWS SES. If you have any website and you want to send emails to your users and want to get so many subscribers to your blog or for your website then it's a good choice to send them emails and remind them about your website. So there are so many websites that will provide you this type of service for email marketing. But some of them are very expensive and some of them are cheaper. Here we are choosing AWS Simple E-mail service because its pricing is not much as compare to other services.

## Pricing for  AWS SES
![AWS Pricing](https://blog.prashantpandey.ml/static/2ffe1784f057460d92e12633c5be7227/8d68c/pricing.png)

For sending emails from AWS SES you need an AWS account and in this free account you don't have any production access to your SES service but its the sandbox access, means that you can only send emails to the verified emails from your SES dashboard, so for production access you have to request higher sending quotas for email.

![Sandbox](https://blog.prashantpandey.ml/static/1839933f96e1801d42f74fcc730a58d9/f73a1/sanbox.png)

## Requesting a quota increase 
So requesting a higher sending quota for Amazon SES, open a case in AWS Support Center, here is the link to the instructions 
[Amazon docs](https://docs.aws.amazon.com/pinpoint/latest/userguide/channels-email-manage-limits.html#channels-email-manage-limits-increase-case) 

You have to describe your use case effectively because if you do not describe it correctly they will not accept your request. So you have to convince them that you are not misusing their service. I also applied it for and here is my use case description.

![Use Case](https://blog.prashantpandey.ml/static/8ba77dc1f993102ef05c943ecec921ca/ce206/sesrequest.webp)

I added my official website and described how I am managing the bounce emails, complaints 
and unsubscription and they give me the production access to the service.

![AWS Reply](https://blog.prashantpandey.ml/static/30924e86047e5fdcebb598f14e40aaa7/6d63c/awsreply.webp).


Thanks for reading !!!!!
Push and deploy Front End  projects to GitHub Page step by step
Published: 2020-11-23 16:39:50

**In the terminal:**
```
git init    //.git file
git config --global user.name "my git user name"
git config --global user.email "my git user email"
git add .
```

**Go to GitHub, create repository:**
create New Repository,
```
git commit --m "first commit"
git remote add origin ..... //copy and paste
git push -u origin master //copy and paste
```

**Deploy to gh-pages**
In package.json:
```
“homepage”: “https://tinayanuk.github.io/appname”
“scripts”: {
“deploy”: “gh-pages -d build”
}
```
In terminal:
```
npm run build
npm run deploy
```
Spot Instance & Spot Fleet
Tags: aws, tutorial
Published: 2020-11-23 16:38:48

Spot fleets are where things get even more interesting. With a normal spot instance request, you place a bid for a specific instance type in one specific AZ and hope you get it. With spot fleets, you can request a variety of different instance types that meet your requirements. Additionally, you can spread your spot fleet bet across multiple AZs to increase the likelihood of getting your instance fulfilled.


{% youtube Pp7_-zmpzQc %}