teleren/devto huggingface dataset:
Using serviceworker and workbox in react app
Tags: help, react
Published: 2019-12-27 12:33:28

I'm trying to make a react pwa app using the service workers and Google workbox. The custom-service-worker file is in the /public folder of the react app and the default ServiceWorker.js file create by react app is in the /src.
I'm getting below error. Any idea on why this error is occuring? Should I refer to the custom-service-worker.js file in the index.html file?

```
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://127.0.0.1:8080/precache-manifest.293755a47c2781150c8b4c921fc7a770.js' failed to load.
    at http://127.0.0.1:8080/service-worker.js:16:1
```
Here is the content of the service-worker file:

```
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');
if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}
  workbox.routing.registerRoute(
    // Cache CSS files.
    /\.css$/,
    // Use cache but update in the background.
    new workbox.strategies.StaleWhileRevalidate({
      // Use a custom cache name.
      cacheName: 'css-cache',
    })
  );
  workbox.routing.registerRoute(
    new RegExp('https://jsonplaceholder.typicode.com/posts'),
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'app-cache',
    })
  );

```
Implementing Standard Calculator
Tags: c, calculator, bodmas
Published: 2019-12-27 12:02:34

I was recently challenged to develop a standard basic calculator that would evaluate a given expression following the BODMAS rules and of course, return the answer. The one rule to this was that I did not have to use any inbuilt evaluation methods.

So lets get started. I began with an interface that defined the methods I was going to use.

interface IBaseCalculator
    {
        string EvaluateEquation(string equation);
        string EvaluateOperation(string equation, char op);
        double EvaluateAddition(double a, double b);
        double EvaluateSubtraction(double a, double b);
        double EvaluateMultiplication(double a, double b);
        double EvaluateDivision(double a, double b);
    }

I then went ahead and implemented this with a constructor taking in the set of operations that I needed to support. In this case division, multiplication, addition and subtraction. This is the interesting part. I created an array of characters to represent the operations allowed for this calculator.

NOW, in order to make sure the rules of BODMAS were adhered to, I had to declare the array in the order representing BODMAS rule.

The EvaluateOperation method iterates through the equation and starts breaking it down following the BODMAS rules. It does this by invoking the appropriate Evaluate method. In case of multiplication, it calls EvaluateMultiplication.

public string EvaluateOperation(string equation, char op)
        {
            int i = 0;

            if (equation.Contains(op))
                i = equation.IndexOf(op);
            switch (op)
            {
                case '(':
                    throw new NotImplementedException();
                case ')':
                    throw new NotImplementedException();
                case '/':
                    answer = EvaluateDivision(Double.Parse(equation[i - 1].ToString()),
                             Double.Parse(equation[i + 1].ToString()));
                    break;
                case '*':
                    answer = EvaluateMultiplication(Double.Parse(equation[i - 1].ToString()),
                             Double.Parse(equation[i + 1].ToString()));
                    break;
                case '+':
                    answer = EvaluateAddition(Double.Parse(equation[i - 1].ToString()),
                             Double.Parse(equation[i + 1].ToString()));
                    break;
                case '-':
                    answer = EvaluateSubtraction(Double.Parse(equation[i - 1].ToString()),
                             Double.Parse(equation[i + 1].ToString()));
                    break;
            }

Please go ahead and play with the solution located here 
https://github.com/websplee/StandardCalculator/blob/master/StandardCalculator/BaseCalculator.cs
Data sharing between Angular Components
Tags: angular, typescript, tutorial
Published: 2019-12-27 11:56:11


If you are an **Angular newbie** and want to share data between components then this article is for you. **Data sharing between components** are a very important concept which everyone should know.
![enter image description here](https://pbs.twimg.com/media/EMuzCHPVAAAZzH0?format=jpg&name=large)

Go to the **[tutorial with example.](http://www.tellmehow.co/share-data-component-angular/)**
Print number of factorial digits by shell command
Tags: shell
Published: 2019-12-27 11:53:46

---
title: Print number of factorial digits by shell command
published: true
description: 
tags: shell
---

Command to output the number of digits of factorial of 2.

```bash
# $(()): calc by arithmetic expressions
# wc: count the number of digits
$ echo -n $((2 ** 32)) | wc -c
```
Webp - Ignored?
Tags: discuss, webdev
Published: 2019-12-27 11:47:59

---
cover_image: https://www.justgeek.fr/wp-content/uploads/2017/09/webp-logo.jpg
---

We all are familiar with webp image format and the benefits of using it.

For the sake of those who have not yet explored about it -> [WebP](https://developers.google.com/speed/webp)

Despite this, we are not using it the way we should. Why?

It's been more than 9 years since it was released by google. I mean the only question is about public acceptability. So why can't we developers make this our habit to use this format? 

New Post Related to WebP:

{% post https://dev.to/pagalprogrammer/vote-for-webp-20jh %}
Weather data providers: which one?
Tags: help, api, weather
Published: 2019-12-27 11:46:38

---
title: Weather data providers: which one?
published: true
description: Searching for insight into weather data providers
tags: ["help", "api", "weather"]
---

We are planning to provide our users with weather forecast before they book at Playtomic.

To do that, we need a weather data provider O:) We have looked into these 3 (probably the most known):
* https://www.accuweather.com/
* https://openweathermap.org/
* https://darksky.net/

Pricing is not an issue right now. We intent to cache our queries. What I'm worried about is *data accuracy*.

Any experience that you would like to share? It would be really appreciated!
Create Load Balancer for WordPress website
Tags: aws, wordpress
Published: 2020-02-07 01:04:53

---
title: Create Load Balancer for WordPress website
published: true
date: 2019-12-27 11:32:31 UTC
tags: AWS,Wordpress
canonical_url: 
---

> **This article is the continuation of [WordPress with Docker, AWS (ECS, Code Pipeline, Load Balancer, RDS, EFS) Complete Series](https://dev.to/saluminati/high-traffic-wordpress-website-with-docker-aws-ecs-code-pipeline-load-balancer-rds-efs-complete-series-43id/). For better understating, please start from the beginning of the series.**

In this article, we will create the Load Balancer which will sit on top on WordPress instances and balance the load as per increasing the requests from users. The ultimate reason for this approach is to make your website scalable and always available for our clients.

From EC2 console Select Load Balancer and click on **Create Load Balancer**

![](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27114816/001-5.png)

![](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27114826/002-5.png)

On this step, select HTTP/HTTPS

[![](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27114843/003-5-1024x326.png)](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27114843/003-5.png)

### Step: Configure Load Balancer and VPC

[![](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27115300/004-5-1024x534.png)](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27115300/004-5.png)

Make sure you select the correct VPC on this step.

### Step: Configure Security Groups

On this step, we will use the Security Group we created earlier for our Load Balancer.

[![](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27115438/005-3-1024x259.png)](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27115438/005-3.png)

### Step: Configure Routing (Target Group)

Target Group job is to ping your instances periodically to make sure that they are healthy. If it does not receive the response from any of the instance, it raises the alarm and the instance is marked as unhealthly by the Load Balancer and an action can be taken accordingly.

[![](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27120528/006-4-1024x534.png)](https://s3-ap-southeast-2.amazonaws.com/sal-blog/wp-content/uploads/2019/12/27120528/006-4.png)

by doing all these steps, we have successfully created the mechanism for a scalable WordPress website that can serve as thousands of clients with any amazing user experience.

#### Previous

**[Build and Push wordpress project to AWS ECR](https://dev.to/saluminati/build-and-push-wordpress-project-to-aws-ecr-2h7c)**

#### Next

**[Create Task Definition for WordPress Docker Project](https://dev.to/saluminati/create-task-definition-for-wordpress-docker-project-27dp/)**
What I learned in 2019
Tags: watercooler
Published: 2019-12-27 11:06:48

---
title: What I learned in 2019
published: true
description: 
tags: watercooler
cover_image: https://thepracticaldev.s3.amazonaws.com/i/aqbv00esoyyvc357hpkq.jpg
---

They say that hindsight is 2020. So what can I take from this last year?

## I still love Python

I did the first few [Advent of Code](https://adventofcode.com/) challenges, right up to the point where... my week off work ended and I had to go back into the office and found I had no spare time anymore and things weren't as easy as all that. Yeah.

But I decided to do it in Python. I haven't used Python professionally for about 5 years, and am so rusty you'd need a tetanus shot to look at the repo I made.

Now I feel like I could maybe look for work in a Python team again, or at least start going to the local meet-ups in the new year. Maybe that'll be one of my resolutions.


## I'm not a jaded, never-codes-at-home-anymore programmer.

This comes mostly from the same place as the previous point, but I'd slipped into the routine of going home and switching off as completely as possible. I _like_ that I'm not someone who takes work home with me all the time.


## I can batch-cook food in advance like some kind of Adult

I've always been in a little awe of people who prepare their meals in advance. It seems like a very grown-up thing to do, and I'm only in my 40s, so...

I've started making soups and stews and things in a slow cooker and freezing them and feeding myself a proper lunch in the office at least a couple of days a week.


## I _can_ work from home and the world won't end

My office has started encouraging us to take a day from home every week or so, and I'm doing that, with more enthusiasm each time. It's taken me a while to get things set up, and I've tried a few approaches like using my work laptop or using my gaming PC and a remote shell or using a mini PC I keep under the sofa as a dev box... some combination of these seems to be working out for me.

I get an even better lunch this way. A lot of my personal happiness centres around lunch.


## :vertical ball

There's a command in Vim that opens all buffers (`ball`) in their own windows. It splits horizontally by default, but you can override that with the prefix `vertical`. Hence, `vertical ball`.

I love this. It sounds so sporty. It makes me smile every time I type it, and I type it in full even though I could shorten it or map it. _The power of vertical ball_ cannot be contained.

--
Cover image by [Benjamin Davies](https://unsplash.com/@bendavisual) on Unsplash
Handle the Mac's sleep function from the terminal
Tags: mac, osx, caffeinate
Published: 2019-12-27 10:00:01

One of my favorite feature of my Mac is the optmized sleeping schedule to boost the battery life during the day.
But sometimes it's the worst feature in the world. :)
Especially in certain scenario like: downloading files, watching films, reading long articles and much more.

In the past I have used [Caffeine](http://lightheadsw.com/caffeine/) but since a few versions of OSx there is a command line tool called **Caffeinate** with the same features.

## Launch Caffeinate
As I mentioned before, Caffeinate, it's a command line utility, so you need a terminal application.
You can use the integrated terminal of the Mac or you can use other applications like [Hyper](https://hyper.is).
Open you terminal tool, type **caffeinate** and hit return.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/f1hd0pfvfm3jx72yg053.png)

Now your Mac is under caffeine and doesn't go to sleep until you press "Ctrl+C" in the terminal.

## Sleep after a while
The command has many parameters but the most useful, in my opinion, is the timer.
With the parameter **-t** the Mac stay awake for the value of the parameter and then the normal cycle of sleep/awake is resumed with the default behavior. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/0xl2c5h95xyazah3sbvy.png)

For instance, with the value 1800, the Mac sleeps after 30 minutes.

## Other parameters
The tool has other parameters to interact more deeply with the system.
For example you can prevent the display from going to sleep but the other devices can remain with the default cycle.

-d prevent the display from going to sleep
-i prevent the system from idle sleeping
-m prevent the disk from going to sleep
-s prevent the machine from going to sleep if plugged in

Of course you can use these parameters in different ways and you can use multiple parameters in the same command.

Just an example:
caffeinate -d /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome https://netflix.com

This command prevent the display going to sleep if you are watching Netflix from Google Chrome.
A weekend hack that gained 1,300+ users
Tags: showdev
Published: 2019-12-27 03:15:24

Recently I got started to collaborate with a few friends of mine on a weekend project creating a decentralized application with Blockstack. In just over 5 days, we launched a scrappy version of our chat app called Mumble (Rebranding to Bondfire). 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1pdxj0qhztklixtmm35h.png)


Mumble is an encrypted text and voice chat for passionate online communities. We see a need for a “built for all” type of chat app for all type of community. Unlike how community are building their community in slack (that is focused on workplace) and discord (focus for game communication), Mumble is highly focused on pushing features that encourages community engagement.

Most people still uses slack and discord that does not have end to end encryption built on to manage their community. Putting their user's information at risk.

We currently have more than 1,200+ users in less than 6 weeks during beta and plans to expand more. We are also working on a rebrand soon. Feel free to try it out yourself at https://trymumble.com
edotel2
Tags: replit, html, css, javascript
Published: 2019-12-27 09:50:10

Data Coding Edotel2
-index.html
pembuat = (361955401054_Ahmad Mahdan Aziz) dan (361955401040_Devis Alfian Rhamadhani).
-product.html
pembuat = (361955401040_Devis Alfian Rhamadhani).
-product2.html
pembuat = (361955401042_Ayu Irma Wardani).
-teamfix.html 
pembuat = (361955401059_Ratu Bella).
-aboutfix.html
pembuat = {361955401051_Siti duroh hidayah).



{% replit @361955401040/edotel2 %}?signin=true
Can you solve the fastest horse 🐴 algorithm problem?
Tags: programming, javascript, beginners, challenge
Published: 2019-12-27 09:25:25

In this week's article, we dig into something different. 

Let us look at an algorithm problem wherein there are multiple approaches but just one optimum solution. 

### Problem Statement
💈💈💈💈💈💈💈💈💈💈💈💈💈💈💈
----------------------🐎 
💈💈💈💈💈💈💈💈💈💈💈💈💈💈💈
------------🐎 
💈💈💈💈💈💈💈💈💈💈💈💈💈💈💈
--------------------------🐎
💈💈💈💈💈💈💈💈💈💈💈💈💈💈💈
-----------------🐎
💈💈💈💈💈💈💈💈💈💈💈💈💈💈💈
--🐎
💈💈💈💈💈💈💈💈💈💈💈💈💈💈💈

There are 25 horses with you. The problem statement is to find the **top 3 fastest horses** among them. But there is a constraint. You have only 5 parallel race tracks and hence, you can only race 5 horses at a time. 

How would you group the horses and race them so that you find out the top 3 fastest horses in the *_minumum number of races_*?

Give it a shot. After you think you have the answer, check out this video to see if you were correct:

{% youtube P63aaiRFECU %}

Cheers!
My Data Self vs Facebook
Tags: socialmedia, facebook, life, data
Published: 2019-12-27 09:07:08

How is it this day in age that we let certain aspects of our data self get flogged like a horse in a market? I have been toying with the idea of removing myself from Facebook, the social media giant has been playing unfair with our data. But of course, that means WhatsApp and Instagram as well, I mean they own a lot and so much is integrated into our daily lives. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hh46u412zpbqatq04qcq.png)

I ask have we become so accepting of how we allow people to use our personal information and in turn our data self. I mean would you give me your credit card pin number if I offered you $10? Of course not! So why should we accept that companies are willing to sell our data for profit? I simply do not wish to sit here a lecture or stand on some moral high ground but I do ask myself when did it simply become ok. 

Were it not facebook selling the data but some black market organization like say, Hydra (Showing my geek side) the world would be up in arms! But because Facebook is on our phones, tablets, gaming consoles, computers, televisions and pretty much any other device that has a network connection and its the only way we can talk with friends and family across the globe it's just acceptable.

Data is the new oil and it is worth a fortune! But why should we submit our own information to allow this to happen and how much are they actually taking and what are they selling. 

I have still yet to make that break because of a project I was running but after that, I think I'm moving on. I'll stick to Twitter, yes they have data on me but its a fraction of what Facebook has. 

Id love to get some feedback, and Id love to see what others think
# Updating a forked Repo with Origin
Tags: github, coding, programming
Published: 2019-12-27 09:04:37

You are looking to contribute to an awesome project on GitHub and you finally find it and fork the repo. a few weeks later you worked on the forked repo but are afraid the fork is way behind the original repo. how would you keep it up to date? here is how

Below are the steps to always keep the forked repo up to date with its original repo


1.Add the remote/original repo and lets call it upstream
```
$ git remote add upstream https://github.com/original-repo/repo-name.git
```
2.Fetch all branches from remote upstream
```
$ git fetch upstream
```
3.Use git rebase to re-write your master with upstream’s master. Note: rebase will fail, if you have uncommitted changes in your forked master
```
$ git rebase upstream/master
```
4.Push your updates to master using force
```
$ git push origin master --force
```
Progress tracking #100DaysOfFP
Tags: functional
Published: 2019-12-27 08:46:36

---
title: Progress tracking #100DaysOfFP
published: true
description: All the tweets about my 100 (interrupted) days of Functional Progrogramming challenge in one place
tags: functional
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4v7elk0ndxakgaepwjc4.jpg
series: 100 Days Of FP
---

{% twitter 1080944985715998720 %}

Going through a Twitter thread with +100 tweets is not handy at all. So here's the compilation of all the tweets for each day (so far).

### Table of Content

- [01-10](#0110)
- [11-20](#1120)
- [21-30](#2130)
- ...

<!--
- [41-50](#4150)
- [51-60](#5160)
- [61-70](#6170)
- [71-80](#7180)
- [81-90](#8190)
- [91-100](#91100)
-->

## 01-10

[Go to contents](#table-of-content)

{% twitter 1080979563700727808 %}

{% twitter 1081220094838083585 %}

{% twitter 1082757942171090945 %}

{% twitter 1082759921274363910 %}

{% twitter 1083128345490087937 %}

{% twitter 1083128860911247360 %}

{% twitter 1083642141509894144 %}

{% twitter 1083643173505826817 %}

{% twitter 1084936038215233536 %}

{% twitter 1085304388749533185 %}

{% twitter 1085655569380257793 %}

{% twitter 1091263037674274818 %}

{% twitter 1094569910062272512 %}

## 11-20

[Go to contents](#table-of-content)

{% twitter 1097645845145628672 %}

{% twitter 1100166083091288065 %}

{% twitter 1106350004359307264 %}

{% twitter 1110670777173594113 %}

{% twitter 1115502145489514496 %}

{% twitter 1128403336263344128 %}

{% twitter 1128770065346830336 %}

{% twitter 1136397217240158208 %}

{% twitter 1161386789120237571 %}

{% twitter 1161387596020375556 %}

{% twitter 1173326782700953601 %}

## 21-30

[Go to contents](#table-of-content)

{% twitter 1174067442592702465 %}

{% twitter 1174067967434416128 %}

{% twitter 1174436961110700032 %}

{% twitter 1175878924926095360 %}

{% twitter 1176272661346996236 %}

{% twitter 1196176593326096384 %}

{% twitter 1201142344000651264 %}

{% twitter 1201574482017734657 %}

{% twitter 1201614760724303874 %}

{% twitter 1203789851528761346 %}

{% twitter 1207675483313319936 %}

{% twitter 1212090287595696128 %}

# 31-40

[Go to contents](#table-of-content)

{% twitter 1215054708508962816 %}

{% twitter 1216848419714715648 %}

{% twitter 1229705223419105281 %}

{% twitter 1236773673568215047 %}

...

# 41-50

[Go to contents](#table-of-content)

...

# 51-60

[Go to contents](#table-of-content)

...

# 61-70

[Go to contents](#table-of-content)

...

# 71-80

[Go to contents](#table-of-content)

...

# 81-90

[Go to contents](#table-of-content)

...

# 91-100 :tada:

[Go to contents](#table-of-content)

...
Extend usage of styled-components in React
Tags: react, styledcpmponents, typescript
Published: 2019-12-27 08:41:25

If you are a React developer and you are using styled-components as a helpful tool, then this article wrote for you!

As usual, you might create a styled-component and import it in other components then use it.
But what if you want to change some styles of your component on different pages? Or different components?
You can always use **props** for styled-components to change some properties. Right? Like this picture.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8v329xtmwkvvtyh3hsfq.png)

Another way is that export `css` from styled-components and use it in the body of the component.
The `css` function returns a string of passed styles. These styles are **autoperfixed** for cross-browser styles.
Like this picture.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wunwqrkjm5v3m0j8aveu.png)

But these are not enough for me! I want more extendable components.
I don’t know if you knew it, but the `styled` accepts both **object** and **string** for styles.
So this example should be okay. Right?
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mojigkgxeny3t0i9y8lv.png)

So we conclude there are more ways of extending styles of a styled-components!
Now we can be creative and use it to extend our components and create components that can be styled in any way!

For example, we can use a specific `prop` for extending our components.
And if you are using **Typescript** in your projects, you can control the value of that prop.
Like this picture.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/het4mxnn1mgp9nyozajp.png)

In the above picture, we specified a prop named **styles**. Using `React.CSSProperties` we can control the value to only valid CSS properties. That helps us to avoid crashing the app.

I hope this article helps you create beautiful UI components using styled-components.
I would be happy if you comment to me your opinion.