teleren/devto huggingface dataset:
Convert an Existing React App to a PWA (Typescript)
Published: 2022-11-14 14:03:34

---
title: Convert an Existing React App to a PWA (Typescript)
published: true
date: 2022-07-07 10:23:59 UTC
tags: 
canonical_url: https://cherylm.hashnode.dev/convert-an-existing-react-app-to-a-pwa-typescript
---

I wanted to convert my existing react app to a PWA because I wanted to publish it on google play store without having to rewrite it with something like react native. To convert an existing react app to a PWA, we need

- A service worker
- A manifest file

### Setup the service worker

copy `service-worker.ts` and `serviceWorkerRegistration.ts` from https://github.com/cra-template/pwa/tree/main/packages/cra-template-pwa-typescript/template/src to the `/src` folder of the existing react app.

> or create a new react app and copy the files over to `/src``npx create-react-app my-app --template cra-template-pwa-typescript` or`yarn create react-app my-app --template cra-template-pwa-typescript`

If you see this error,

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657187655218/O1R1imn6a.png)

add, `as string` to this line,

```
const publicUrl = new URL(process.env.PUBLIC_URL as string, window.location.href);

```

in `index.tsx`, import the service worker and

```
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

```

add this after render

```
serviceWorkerRegistration.register();

```

### The Manifest file

There should be a `manifest.json` in `/public/ , the template can be found [here](https://github.com/cra-template/pwa/blob/main/packages/cra-template-pwa-typescript/template/public/manifest.json)

Edit the name and icons if required.

### Service worker does NOT work in development

To start a production environment locally,

```
yarn global add serve
yarn build
serve -s build

```

### Check that the App is a valid PWA

This can be done by using the [chrome Lighthouse plugin](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en#:~:text=Lighthouse%20is%20an%20open%2Dsource,how%20well%20the%20page%20did.)

Go to the Lighthouse tab in the DevTools, and generate the report

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657188476408/r6IWLJg8K.png)

An install icon shows on chrome url bar for a valid PWA

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657188749258/oVUM6ZVut.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657188811447/sVRVPItNx.png)

The application tab also shows some useful information

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657188893940/udeULlPaI.png)

### Learn more

[How to make PWAs installable](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs)  
[Learn PWA](https://web.dev/learn/pwa/)  
[Making a Progressive Web App](https://create-react-app.dev/docs/making-a-progressive-web-app/)
Runtimeerror: Event loop is closed - asyncio, aiohttp, concurrent request
Tags: python, asyncio, aiohttp
Published: 2022-07-12 08:43:15

Dear community people, I'm trying python's async programming for the first time, and I'm stuck at a particular problem. Here I've posted it on StackOverflow. Could anybody please help- https://stackoverflow.com/questions/72919537/runtimeerror-event-loop-is-closed-asyncio-aiohttp-concurrent-request
Pure CSS Captain Jack Sparrow
Tags: codepen, html, css, webdev
Published: 2022-07-12 08:28:19

---
title: Pure CSS Captain Jack Sparrow
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/abYmoMM %}


<p>Speed Code Video</p>
{% twitter https://twitter.com/asyrafhussin4/status/1546754960620064768 %}
AWS vs Azure vs GCP
Tags: devops, cloud, discuss
Published: 2022-07-12 08:26:53

Nowadays all clouds have similar offerings. AWS is the more mature one - and therefore a solid choice. However, they are hard to work with in many aspects and have a lot of legacy choices - such as everything being region locked. Google cloud is often seen as the most developer friendly and a great choice if you don't want spend hours banging your head against the wall. Azure also offers great developer experience but it's less reliable in my experience.

Since we work very closely with the 3 major clouds to develop our product - [Multy](https://multy.dev?ref=dev.to) - I have written a blog post on what I have learned about the differences in Virtual Machines in AWS, Azure and GCP.

The blog post goes over:
- Regions and availability zones
- Virtual machine types and sizes
- SSH access and default users
- Virtual machine images
- Block storage and disk

If you're interested, have a read at [https://docs.multy.dev/blog/compute-aws-vs-azure-vs-gcp](https://docs.multy.dev/blog/compute-aws-vs-azure-vs-gcp/?ref=dev.to).

Which cloud provider do you prefer?
Today's Fun Joke For Developers - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2022-07-12 08:00:13

---
title: "Today's Fun Joke For Developers - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258a87ad7e.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___!false___

It's funny 'cause it's true.
 -->
Deploying AlertManager Image to Azure Container Registry Using Azure CLI
Tags: azure, docker, tutorial, alertmanager
Published: 2022-07-12 07:53:11

**Goal :**

- Create AlertManager Image to Azure Container Registry using Azure CLI

**Result** 
> 

- Private Container Image rather than Public Docker Hub Image.

**Script**

```
$ResourceGroupName	= "suryarg"
$LocationName		= "eastus2"
$ACRName			= "suryacr"
$ACRUrl 			= "$ACRName.azurecr.io"

#Create a resource group
az group create --name $ResourceGroupName --location $LocationName

#Create a container registry
az acr create --resource-group $ResourceGroupName --name $ACRName --sku Basic --admin-enabled true


#Log in to Azure Container Registry
az acr login --name $ACRName


#First Pull latest AlertManager Image from DockerHub
docker pull prom/alertmanager:latest

#Then Push into Azure Container Registry
docker tag prom/alertmanager:latest $ACRUrl/alertmanager:SuryaLatest
docker push $ACRUrl/alertmanager:SuryaLatest
```

**Result**



![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx4da6o32t2sg0jhssc3.png)


![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmef7nvig9y8kugxhtk7.png)
I can create any Algorithm
Tags: algorithms, coding, programmin, tree
Published: 2022-07-12 07:28:50

Did you mess ever with any algorithm that you need in your project? Many times we need to implement an Algorithm for our program to fulfil all the business logic. So Algorithm is a major part of a software or application that defines all the business logic

##How I learned Creating Algorithm
I started development in 2014. My first project was on **Multi-Level Marketing binary Structure** also called **MLM Binary 1x2**.

That was not easy for me to create the Tree logics that will generate dynamically.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/238x2n7esfjrqq1id0rb.png)

It was hard for me to develop all the logic behind that tree with  lots of condition.

##No content on the Internet.

In 2014 there was no content on the Internet on how to build complex logic like MLM Binary 1x2. So I deeply did the experiments for almost 30 days. Then finally, I got a solution. I built that web application and provided it to the client. 

The client was so happy because at that time there were very few developers who can do this. And the client ran the project for almost 2 years and earned a lot of money.

## I Taught other people
So after learning those complex logic, I was thinking other developers in the world facing the same issue. So I started a YouTube channel and told other developers how I build this.

Here is the link - [YouTube Channel
](https://www.youtube.com/watch?v=0fBScrC0cKU&list=PLnq9yHs8s_hm6LEwIJ4qlV53U6Fo--YZh) 

## 8 Years in developing Algorithms
So I did not stop here to create complex logic. Then I worked for many Software companies to build complex logic for them. I invested my 8 years to just creating logic. 

## Still Learning
I think the journey in complex algorithm development will never end. Every day I learn new things and get more ideas. I still enjoy to develop Algorithms.

> Creating Algorithms is an Art
dbt (data build tool) explained in 100 words
Tags: programming, database, tutorial, beginners
Published: 2022-07-12 06:51:26

What is dbt ?

Let’s say you have a huge amount of raw data (it can be any kind of data that is not cleaned like urls, duplicates, nulls etc.), and you want to convert this raw data into something meaningful for your data analysis(say reports, ML models etc.); you can use dbt to easily convert this raw data into meaningful data objects like tables, views etc with simple SELECT queries by connecting it with your data warehouse. dbt  takes care of creating , updating , modifying your data tables at scale. You can connect dbt with many modern applications like snowflake, postgres etc 

You can learn about it with a real world example (using shopify or amazon) at in this [dbt beginner guide](https://tipseason.com/dbt-tutorial-real-world-scenario-guide/)
How to use ES6 import in Node Project
Published: 2022-07-12 06:38:14

##ES6 Module

A file containing reusable code is known as a module. Whether or not it is declared, the import modules are in strict mode.
Modules that are exported by another module are imported using the import statement. 

###How to use import Syntax:
import name from 'module-name'

###Importing an entire module: 
import * as name from 'module-name'

###Import default export from a module:
import name from 'module-name'

###Importing a single export from a module:
import { name } from 'module-name'

###Importing multiple exports from a module:
import { nameOne , nameTwo } from 'module-name'

###Importing a module for side effects only
import './module-name'

###Exporting a module
export default module_name

Node JS does not directly support ES6 import. If we attempt to utilize node js import function to directly import modules, an error will be generated. For instance, Node JS would raise the following error if we attempt to import the express module by writing import express from "express".


![import error in nodejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7ivgoznjnmpsq6avvjz.png)

ES modules are experimentally supported by Node. We must make some adjustments to the package.json file in order to enable them. Make sure Node is installed before continuing with the instructions. The steps to do so are shown below.

Add "type": "module" to the package.json file. This is added to enable ES6 modules.
This is how the package.json file should appear:

`//package.json
{
  "name": "index",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}`

Make a file called index.js, and then use ES6 import to write your program. Let's try importing Express in the index.js file as an example.

//index.js
  
import express from 'express';
  
const app = express();
  
app.get('/', async(req,res) => {
    res.send('It is working');
})
  
const PORT = 5000;
  
app.listen(PORT,() => {
    console.log(`Running on PORT ${PORT}`);
})

Another method of utilizing the esm module is to create a different file, such as server.js, which loads esm prior to the application itself. Write the following code in the server.js file.

`//server.js
require = require("esm")(module);
module.exports = require("./index.js");`

We are importing the index.js file, which contains the actual program that has to be run, into the server.js file.

To run the program, type node server.js into the terminal.

Thanks for your time, I have more helpful content like this, please subscribe to be among the first to get them when they are released.
Git basics: remove all local branches
Tags: github, git, beginners
Published: 2022-07-12 06:34:27

There will come a time when you optimize your workflow to ensure PR requests are as small as possible.
Each request can be minimal, so you end up with tons of new local branches that have probably already been merged.

Below is an example of my local daily.dev repo with all the branches I have locally.

![List of many local branches](https://cdn.hashnode.com/res/hashnode/image/upload/v1656744739190/y2r2b2zuy.png)

Time to make some changes and clean up our mess.

## Removing local git branches

We could go to the editor and click remove on the local branches.
However, we wouldn't be developers if we didn't use the terminal correctly.

To delete one local branch, we can use the following command.

```bash
git branch -d BRANCH_NAME
```

However, this will only work for merged branches. If you still want to proceed, you can use the capital D like this:

```bash
git branch -D BRANCH_NAME
```

## Deleting all local branches

However, when we have many local branches, we might want to delete all of them at once.

For that, it's important to note that the delete call can handle multiple files.

First, we have to find all the branches. I used the following command.

```bash
git branch | grep -v \*
```

However, this also includes our master/main branch.

```bash
git branch | grep -v "master\|main"
```

And if you only want to remove merged branches, you can use the following addition.

```bash
git branch --merged | grep -v "master\|main"
```

To execute deletion, we can pass another argument for the delete command.

```bash
git branch --merged | grep -v "master\|main" | xargs git branch -D
```

## Conclusion

We can have many local branches that we might want to clean up in one go.

To delete a single branch, use the following command.

```bash
git branch -d BRANCH_NAME
# use -D for unmerged branches
```

If you want to delete all merged local branches except master/main, use the following command.

```bash
git branch --merged | grep -v "master\|main" | xargs git branch -D
```

> Note: The above only deletes merged branches

If you want to delete all local branches except master/main, use the following.

```bash
git branch | grep -v "master\|main" | xargs git branch -D
```

> Note: The above also deletes unmerged branches

### 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)
CSS: Responsive Design
Tags: css
Published: 2022-07-12 06:23:00

[Media Queries for Standard Devices | CSS Tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
##1. scale images
```
.container{
  width: 50%;
  height: 200px; 
  overflow: hidden;
}
.container img{
  max-width: 100%; 
  height: auto; 
  display: block;
}
```

<!--the container takes up 50% of the screen; the height of the container is fixed to 200px; the max-width of the img is 100% of the container; the height will change in proportion with the width-->
<hr/>
##2. scale background-images

```
div{
  background-image: url();
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
```
<hr/>
##3. 
* The minimum and maximum width of elements can be set using **min-width** and **max-width**.
* Horizontal and vertical padding and margin are set relative to the **width** of a **parent** element.
* When the width of an image or video is set, then its height can be set to auto so that the media scales proportionally. eg:

```
img{
  width: 100%;
  height: auto;
}
```
* `height: 100%` sets the element at 100% height of its parent container
`height: auto` means the element height will depend upon the height of its children
map(), filter() & reduce() in javascript👩‍💻
Tags: javascript, webdev, tutorial, beginners
Published: 2022-07-12 06:09:54

These all are super important and are often used while developing a project or website. `map(), filter & reduce()` are **higher order functions**, i.e. functions which have another function inside them.


### 1. map()
A map function basically iterates and applies a given operation on each element.

``` javascript
arr=[1,2,4,3,5,6]

function checkEven(x){
    return x%2==0;
}
const ans=arr.map(checkEven)
console.log(ans)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57v42c1mahe282dd5mma.png)

Here it basically returns where an element is even or not and modifies value of each element present.


###2. filter()

This function takes an array and check a condition on each element and filters out false values.

```javascript
arr=[1,2,4,3,5,6]

const ans=arr.filter(function checkEven(x){
    return x%2==0;
})
console.log(ans)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7qylej97shkyf49azlf.png)

Here all the false values are removed. These functions **do not reflect changes** in the main array, `arr`.

###3. reduce()
boils down the output of an operation over the whole array to a single answer.

It takes an `accumulator` that keeps track of ans at every step and a `current` element. Here our `ans` is the accumulator and `x` is the current element of the array.

The `},0)` part, this zero is the initial value of the accumulator `ans`.

```javascript
arr=[2,4,6,6,8,9,22]

const ans=arr.reduce(function checkMax(ans, x){
    ans=ans>x?ans:x
    return ans;
},0)

console.log(ans)
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmzclxsnk923w9bkbyac.png)

Here we keep track of maximum element and compare it with current to update it if bigger than max.

>You can even pass **arrow functions** inside these functions. ⭐ [MDN -Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
How Does Plaid Work With Cash App In Connecting Your Bank Account?
Tags: career, devops, angular, github
Published: 2022-07-12 05:55:06

Are you one of those who want to be aware of [How Does Plaid Work With Cash App](https://www.square-cash-app.com/blog/how-does-plaid-work-with-cash-app/)? Plaid on Cash App helps you to link your bank account to your Cash App account wallet with optimum ease. However, it works as an intermediate layer between your Cash App account and your financial institute. In case of any kind of problems with the same, you should try approaching the Cash App support professionals who will assist you in every possible manner.
What Prepaid Cards Work With Cash App? For A Genuine Guide
Tags: javascript, beginners, tutorial, python
Published: 2022-07-12 05:54:00

Are you one of those needy users who are still searching for a genuine guide to understand [What Prepaid Cards Work With Cash App](https://www.square-cash-app.com/blog/what-prepaid-cards-work-with-cash-app/)? There are several companies such as Visa, MasterCard, and Discover that offer debit cards and you can link them to your Cash App account wallet as per your needs and requirements. However, if you face any kind of hassle and hurdle, you should contact Cash App support specialists who will assist you out in every possible manner.
Introduction to servelessland in aws
Tags: aws, serverless, beginners
Published: 2022-07-12 05:43:34

If you ask software developers what software architecture is, you might get answers ranging from “it’s a blueprint or a plan” to “a conceptual model” to “the big picture.” It’s undoubtedly true that architecture, or lack thereof, can make or break software.Good architecture may help to scale a web or mobile application, and poor architecture may cause serious issues that necessitate a costly rewrite. Understanding the implication of choice regarding architecture and being able to plan ahead is paramount to creating effective, high-performing, and ultimately successful software systems.
**Serverless**- A means of building applications that scale automatically without maintaining, running or patching infrastructure.
Developers around the world are already running serverless applications in production without worrying about servers.As a developer I would choose serverless architecture mainly because:
- Moving away from servers and infrastructure concerns as well allows the developer to primarily focus on code, don't care where the server is.

- Code is liability.How little code can I write by taking advantage of AWS managed services stitched together with direct integrations.

- Less code,less stuff to go wrong.

- Focus on business logic.
In the traditional app development environment,before you start coding there's a number of tasks to think about such as 
to provision,maintain,secure, patch and update servers ,configure load balancing, network access and backups while in the serverless app development before you start coding all you need to think about is what runtime to choose.

- Don't want to pay when app is not running.

- Want their application to scale on its own.

**Serverless services on AWS**

Compute- AWS Lambda, AWS Fargate

Application integration -Amazon EventBridge,AWS Step Functions,Amazon Simple Queue Service (SQS),Amazon Simple Notification Service (Amazon SNS),Amazon API Gateway,AWS AppSync

Data Store -Amazon Simple Storage Service (Amazon S3),Amazon DynamoDB,Amazon RDS Proxy,Amazon Aurora Serverless
Convert SVGs from Stroke to Path
Tags: bash, inkscape, svg, icomoon
Published: 2022-07-12 05:19:14

I had to convert more than one thousand SVG files from stroke to path. That's because [IcoMoon.io](https://icomoon.io/) can't handle SVG files with strokes. Instead you have to provide the SVG files for your font containing only path elements.

This bash script does the job for you. You only need to install [Inkscape](https://inkscape.org/) and add it to the Windows PATH (`C:\Program Files\Inkscape\bin` in my case).  

Then you run the script below in the folder with the SVG files.
`bash stroke2path.sh`

```bash
mkdir -p _output

for i in *.svg
do
   inkscape --actions="select-all;selection-ungroup;select-all;selection-ungroup;select-all;object-stroke-to-path;" --export-filename=- $i > _output/$i
   echo "done with "$i
done
```
[GitHub Gist](https://gist.github.com/saulodias/dfd2a22e6eb53cdb48a3ca2dd992519d)

The repeated actions are kind of a hack to make sure everything is ungrouped before we can convert it to path. You might get some error messages because of that, but that should not affect the end result.