teleren/devto huggingface dataset:
why pwa is the future
Published: 2020-05-16 05:12:59

---
title: why pwa is the future
published: true
date: 
tags: 
canonical_url: https://theabbie.github.io/blog/why-pwa-is-the-future
---

PWAs are powerful, effective, fast and app-like. It's hard to imagine a mobile web property that could not be significantly improved via PWA implementation. They can also potentially eliminate the need for many “vanity” native apps that exist today. progressive web apps are for everyone, desktop and mobile users alike. I think it’s important to reiterate that there is no mobile web. Progressive web apps have taken functionality from both native and web apps. They can run fast regardless of mobile operating systems and device types also providing rich functionality as if they were developed for a specific device. Thanks to easy installation, discoverability, automated updates, slow network or even the offline work mode, PWAs can enhance user experience. PWAs do not require different versions for various devices; a single progressive app meets the requirements of all endpoints on which it operates. So, it significantly reduces the amount of efforts that developers provide, and as a result, the cost to create a PWA decreases. The cost is three or four times lower than that of a native mobile app. Nowadays, mobile users prefer apps to browsers as applications compare favorably with browsers, as they are more user-friendly, can operate offline and have a more attractive interface. Progressive web applications provide an advanced user experience by combining the look and feel of mobile applications and the best of website performance. Unlike regular mobile applications, PWAs do not require a long and complex installation process, which significantly improves user experience. Users just download an app, quickly and directly to their devices, and they do not need to go to the App Store or Google Play. It streamlines the procedure and significantly reduces user abandonment. Since iOS 11.3, it’s been possible to run PWAs on Apple devices, but you can forget about compatibility with older devices. PWAs have been around for just a few years, so it shouldn’t come as a surprise that older mobile devices with outdated web browsers don’t support them too well. While this problem will inevitably solve itself in the future Their performance is also not as good as the performance of native apps, which has a lot to do with the fact that JavaScript is a single-threaded programming language. At the moment, access to certain important device features is still missing, including Bluetooth, proximity sensors, ambient light, advanced camera controls, and others. Progressive Web App (PWA) is a web app, developed with features which give it an app like experience while browsing. PWA improves the user experience to the extent that users can feel the same as they do while using native apps.
Deno installation and VScode setup
Tags: deno, javascript, typescript, webdev
Published: 2020-05-16 05:01:05

Deno is a run time of JavaScript and TypeScript. It's created by the same person who created NodeJS -- Ryan Dahl.
Recently They have published the stable version of Deno 1.0.0

We also created a Facebook group for Developers:
[Deno Developers Bangladesh](facebook.com/groups/deno.devs.bd)

## Deno Installation 
**macOS and Linux:** 
`curl -fsSL https://deno.land/x/install/install.sh | sh`
Using Homebrew: `brew install deno`

**Windows:**
`iwr https://deno.land/x/install/install.ps1 -useb | iex`

Now Try to run `deno --version` in your terminal, if don't works then you might need to add the path on your OS.
For More Installation options [Click Here](https://deno.land/manual/getting_started/installation)
<br>

## Visual Studio Code Setup
1. Create a project directory, Let's say `hello-deno` is the name of the directory/folder.
2. Now create a `index.ts` file and `.vscode` directory, in the root directory.
3. Install the *Deno* extension for vscode. Which is created by *axetroy*.
4. Create a `settings.json` in `.vscode` directory.
5. add `{ "deno.enable": true, }` in `settings.json` file.
6. `console.log("Hello Universe...")` in the `index.ts` file.
7. On your terminal go to the project directory and run `deno run index.ts`

Note: Deno can compile both JavaScript and TypeScript. So, your file extension also can be `.js`
Becoming Homeless
Tags: bash, linux
Published: 2020-05-16 05:00:18

The other day at work I was doing something and accidentally made a folder named tilde.

```bash
ls
~ bin lib spec
```

Oops, well I guess I should remove that.

```
$ rm -r ~
rm: remove write-protected regular file .ssh/config?
```


**Wait… what?!** Oh crap, did that just delete my home directory?

```
$ ls ~
total 0
drwxr-xr-x 17 user group  544 Apr  18 11:45 .
drwxr-xr-x 27 user group  864 Apr  18 10:18 ..
```

Lucky I have rdiff-backup run weekly.  I changed that to *daily*.

Note to self, run `rm -r ./~` next time.

Man what a day.
Exploring Unity Game Engine
Tags: gamedev, unity3d, csharp
Published: 2020-05-16 04:55:49

Hey everyone, as I stated back in my previous post I have started to work on some fun projects and so I figured I would begin by exploring Unity. I started the other day and began by following along with a brackeys tutorial. If you haven't checked out his channel make sure you do he is amazing!

Anyways I began by following his first person shooter series and had a lot of fun but I am never one to follow tutorials for too long because I get super bored and don't learn as well. So I began trying to modify code and do my best to read through the documentation. 

I ended up making a little capsule character that moves around the screen and can shoot a ray trace that isn't visible to the player just yet (still don't know how to do that lol). It's been a lot of fun and I am glad I have tried it, I hope to continue to learn and hopefully I'll have my own game soon.
Simple git aliases for daily purpose
Tags: git, alias, productivity
Published: 2020-05-16 04:54:12

On average, every developer commits their code atleast once a day.

Having some `git aliases` help you quickly make changes and push your code. 

_No more typos_

One of my daily frustrations in the past 🤬 - 

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

Avoid common pitfalls are super important, it helps increase productivity in the long term.

####Table of contents
* [git status](#git-status)
* [git commit](#git-commit)
* [git push](#git-push)
* [git add and commit](#git-add-commit)
* [git add, commit and push](#git-add-commit-push)
* [git stash](#git-stash)
* [git stash apply](#git-stash-apply)
* [git push --set-upstream](#git-push-upstream)
* [git checkout](#git-checkout)

_ps: These are aliases I have been using personally, feel free to create and share your own_ ☺️

##1. <a name="git-status"> git status 👉 gs</a>
Before - 
```bash
git status
```

After -
```bash
gs
```

Setup code -
```bash
alias gs='git status'
```



##2. <a name="git-commit">git commit 👉 gc</a>
Before - 
```bash
git commit -m 'Adding integration test cases'
```

After -
```bash
gc 'Adding integration test cases'
```

Setup code -
```bash
alias gc='git commit -m $2'
```

##3. <a name="git-push">git push 👉 gp</a>
Before - 
```bash
git push
```

After -
```bash
gp
```

Setup code -
```bash
alias gp='git push'
```

##4. <a name="git-add-commit">git add . && git commit -m 👉 gac</a>
Before - 
```bash
git add .
git commit -m 'Adding integration test cases'
```

After -
```bash
gac 'Adding integration test cases'
```

Setup code -
```bash
alias gac='git add . && git commit -m $2'
```

##5. <a name="git-add-commit-push">git add . && git commit -m && git push 👉 gacp</a>
Before - 
```bash
git add .
git commit -m 'Adding integration test cases'
git push
```

After -
```bash
gacp 'Adding integration test cases'
```

Setup code -
```bash
alias gacp='git add . && git commit -m $2 && git push'
```

##6. <a name="git-stash">git stash 👉 gst</a>
Before - 
```bash
git stash
```

After -
```bash
gst
```

Setup code -
```bash
alias gst='git stash'
```

##6. <a name="git-stash-apply">git stash apply 👉 gsta</a>
Before - 
```bash
git stash apply
```

After -
```bash
gsta
```

Setup code -
```bash
alias gsta='git stash apply'
```

##6. <a name="git-push-upstream">git push --set-upstream origin 👉 gpst</a>

This syntax is the one I forget the most 🤷‍♀️

Before - 
```bash
git push --set-upstream origin integration-tests
```

After -
```bash
gpst integration-tests
```

Setup code -
```bash
alias gpst='git push --set-upstream origin $1'
```

##6. <a name="git-checkout">git checkout 👉 gco</a>

Before - 
```bash
git checkout staging
```

After -
```bash
gco staging
```

Setup code -
```bash
alias gco='git checkout $1'
```

These are the aliases that I use __everyday__ for the past few years. No typos, no errors and super handy.
OAuth'ing Bad - Understanding OAuth 2.0s Authorization Grant Flow
Tags: todayilearned
Published: 2020-05-16 04:41:09

Out of all the OAuth Flows, I feel like Authorization Grant Flow brings almost all the possible platoons in making up the OAuth protocol. Remembering the key components and their roles are key. In order to explain the following terms,
- Resource Owner
- Client
- Authorization Server
- Authorization EndPoint
- Token End Point
- Auth Code
- Bearer Token
- Protected Resource and how they are all wired together. But just that I will be using Breaking Bad Analogy to explain the same. Below are image and the link to my hosted video that does the same.

## Video Explanation
[![Video](http://img.youtube.com/vi/DEGjFpRluXY/0.jpg)](http://www.youtube.com/watch?v=DEGjFpRluXY "OAuth'ing Bad - Understanding OAuth 2.0s Authorization Grant Flow")
Simple end to end CD pipeline with Gitlab, Docker and Ansible
Tags: docker, cd, gitlab, ansible
Published: 2020-05-16 03:48:06

Prerequisites: 
1) Basic knowledge of how Git lab, Git lab runner and Docker will work
2) Git lab account  --- https://gitlab.com
3) 2 Linux VM's 
       one for installing Git lab runner and the second one is target node

Basic knowledge of how Git lab and Git lab runner will work
  Git lab: 
  Git lab runner: 
  Docker:
Use Strict - JS (Spanish)
Tags: javascript, webdev, beginners
Published: 2020-05-16 02:59:03

## Introducción.

Use strict ya no es necesario desde el ECMAScript 6, pero me motive a escribir esta publicación, ya que últimamente he estado trabajando en proyectos muy viejos, mejorando el control y limpieza en código.

## ¿Qué es use strict?

**Use strict** se refiere a un "modo estricto", esta es una funcionalidad de ECMAScript 5 que permitió en su momento desarrollar todo un código o partes del mismo, ejecutarse en un contexto "estricto".

Es una expresión literal, es compatible con versiones anteriores JS e innecesaria en ECMAScript 6.

La funcionalidad de utilizar el use strict es indicar que el código o parte de esté, debe ejecutarse previniendo que se tomen ciertas acciones erróneas o malos hábitos de programación y de esta manera arrojando más excepciones.

## Beneficios:

* Obtenemos errores comunes (mala sintaxis) en nuestro código y nos muestra la excepción.

* Las partes más inseguras (peligrosas) o inútiles en JS están prohibidas o lazan errores en ejecución.

* Es más legible el código evitando funcionalidades confusas y malos hábitos de programación.

* Utilizar use strict mejora nuestro código y facilita escribir código más seguro.

* Cuando use strict esta desactivado permite propiedades, variables y objetos no existentes (no declarados) haciendo inseguro el código.

## ¿Cómo usar use strict?

* Use strict se encuentra desactivado por default, para activar el modo estricto en un script, es necesario agregar la directiva entre comillas dobles "use strict".

* Colocar la directiva depende hasta qué punto deseas utilizarla, es decir si se coloca en el inicio del archivo el modo estricto afectara a todo el script, pero también puede utilizarse en una función en específico.

### Modo estricto en todo el script:

```Javascript
"use strict";

x = 7; // ReferenceError: x is not defined 

// Variables declared successful execution.
var x = 7, y = 7;
var res = x + y;
```

### Modo estricto en una función:

```Javascript
// Code in non-strict mode.
name = "Alfredo";

function fun() {
    // Code in strict mode.
    "use strict";
    lastName = "Urbano"; // ReferenceError: x is not defined 
    var lastName = "Urbano"; // Variable declared successful execution.
}
 
// Code in non-strict mode.
fun();
nickName = "Ferillo";
```

## Los navegadores que soportan 'use strict' son:

!['use strict'](https://dev-to-uploads.s3.amazonaws.com/i/r9kpp6wqf07menltfmri.png)

Fuente: [Can i use](https://caniuse.com/#feat=use-strict) 

## Conclusión.

¡Puedes usar el modo estricto en todos tus programas de JS! Si deseas tener un mejor control en tu código, más seguro, escribir código más limpio y evitar usar variables no declaradas, usa el modo estricto de ECMAScript 5.

## Referencias.
* https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Modo_estricto

* https://www.w3schools.com/js/js_strict.asp

* https://caniuse.com/#feat=use-strict

Espero les guste :)
GitHub | Download a file from a Private Repository in GitHub
Tags: github
Published: 2020-05-16 02:52:51

I wrote a series of Bash scripts. They make my work on Google Cloud Platform (GCP) easier.

Since the PORT 25 for mail service is strictly blocked by GCP, and at the same time, building mail service on my own is quite complex. So, under [Google's Suggestion](https://cloud.google.com/compute/docs/tutorials/sending-mail), I decided [to use SendGrid](https://cloud.google.com/compute/docs/tutorials/sending-mail/using-sendgrid).

SendGrid utilizes a bot called GitGuardian to scan public repositories on GitHub, and would temporarily suspend your account if you accidentally pasted SendGrid's API key in it.

So, better save the API key in private repositories.

##To download a file from private repository

####1. You need to generate a Personal Access Tokens.
According to [this GitHub help page](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line):

1. In the upper-right corner of any page, click **your profile photo**, then click **Settings**.
1. In the left sidebar, click **Developer settings**.
1. In the left sidebar, click **Personal access tokens**.
1. Select the **scopes**. To use your token to access repositories from the command line, select **repo**.
1. Click **Generate new token**.
1. Give your token a **descriptive name**.

Let's suppose your actual token is 1234567abcdefg

####2. Embed Token into the link.

1. Open the file in GitHub web page and click "Raw"

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

2. Copy the link of this raw file, maybe something like this:
https:// raw.githubusercontent.com/**GITHUB_ACCOUNT**/**REPOSITORY_NAME**/**BRANCH_NAME**/**FILE_NAME**.**EXTENTION_NAME**?token=**SOME_NUMBERS_LETTERS**

3. Reform the link as
https:// **1234567abcdefg@**raw.githubusercontent.com/**GITHUB_ACCOUNT**/**REPOSITORY_NAME**/**BRANCH_NAME**/**FILE_NAME**.**EXTENTION_NAME**

As you see, "?token=**SOME_NUMBERS_LETTERS**" are removed. Insert the token you generated from GitHub + @ right after "https://"

##To use the link
```bash
curl -s -O https://1234567abcdefg@raw.githubusercontent.com/GITHUB_ACCOUNT/REPOSITORY_NAME/BRANCH_NAME/FILE_NAME.EXTENTION_NAME
```

Hope this would help! Cheers! 🍻
What was the dumbest thing you ever did in the world of computers 
Tags: discuss
Published: 2020-05-16 02:09:51

I wanna know the dumbest things you've done and mistakes you've made 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hovrafndq0raglafc1yf.png)
In the the world of computers , programing , and development
Redesign my portfolio! It loads very fast ⚡
Tags: javascript, alpinejs, css, webdev
Published: 2020-05-16 01:46:27

Hi, everyone!

#####This is my second attempt for writing a blog.

![Alt text of imag](https://media.giphy.com/media/PvvSfSDFoAL5e/giphy.gif)

So I learned web development around 2 years ago. I decided to build my portfolio using Bootstrap4. my old portfolio used to load in 3.5 seconds and had a performance score of 69. most of the content on the previous portfolio was static means I have to change HTML to change my project listing. so I decided to rebuild (and redesign) my portfolio site using  [AlpineJs](https://github.com/alpinejs/alpine) and [Bootstrap4](https://getbootstrap.com)

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

After 5 days of working non-stop, I've finally migrated my site over to AlpineJs! You may notice the site is a little faster:

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

####Why AlpineJS ?
{% link https://dev.to/nugetchar/starting-with-alpinejs-hjn %}

You are right: why would you bother learning, AGAIN, a new tool while there are so many others, with such huge communities around them?
Well here are a few pros:
* you get to follow the evolution of a library from the beginning, and, why not, contribute,
* while React, Vue is acclaimed by a lot of developers, AlpineJS presents a much lighter way of doing front-end Web, much closer to the basics than today's framework.
* I have a data source as a JSON file so loading data from JSON and parsing in HTML is easy in Alpine. (NO MORE STATIC CONTENT  🎉)

###How I optimize speed
* Eliminating render-blocking resources([ using async and defer]('https://web.dev/render-blocking-resources/?utm_source=lighthouse&utm_medium=unknown'))

```html
<link rel="stylesheet" href="build/all.css" media='all' />

<script src="build/app.js" defer></script>
```
* Used [Purge](https://purgecss.com/) to remove unused css.

* Using CDN to serve static content with good cache policy
I used netifly CDN to serve static content.

* Used webp images for better compression ratio

* Used module bundler(Webpack) to minify and bundle files



Here is the link to my [portfolio](https://pushpak1300.github.io/).

Here is the link to Source Code [github](https://github.com/pushpak1300/pushpak1300.github.io).

I'm also planning to add dark mode on site.🌙 

would love to receive some feedback on my portfolio site🍍

Did I miss anything? Let me know in the comments :)

**Thank You!**
Enforce order on async operations
Tags: rxjs, async, javascript
Published: 2020-05-16 01:19:37

Say we have two methods: foo and bar
```javascript
const foo = function() {
  setTimeout(() => {
    console.log('foo')
  }, 100)
}

const bar = function() {
  setTimeout(() => {
    console.log('bar')
  }, 50)
}
```

We want to make sure that 'foo' is printed before 'bar'.

Here is how you can do it with rxjs (6.5).

```javascript
import {of, defer, Subject} from 'rxjs'
import {concatAll} from 'rxjs/operators'
const foo = function() {
  const subjectFoo = new Subject()
  setTimeout(() => {
    subjectFoo.next('foo')
    subjectFoo.complete()
  }, 100)
  return subjectFoo
}

const bar = function() {
  const subjectBar = new Subject()
  setTimeout(() => {
    subjectBar.next('bar')
    subjectBar.complete()
  }, 100)
  return subjectBar
}

const source = of(defer(foo), defer(bar))
source.pipe(concatAll()).subscribe(console.log)
```

> I know I am changing the signature of foo and bar. This might not be possible in some cases.

A few things to note:
1. Let your function return a `Subject`;
1. Complete the `Subject` in the callback of the async operation;
1. `defer` the functions and build a observable; make sure you put them in the right order
1. Concat all of them with `pipe(concatAll()`
1. Subscribe to the final observable.
Swift talk about Swift
Tags: Swift, Xcode
Published: 2020-05-16 00:10:34


Swift was first introduced in 2014 at Apple’s Worldwide Developers Conference.

It is the primary programming language for Xcode. It is compatible with Objective-C and is used for iOS, macOS, watchOS and tvOS.

The primary goal when developing Swift was to build a general-purpose programming language with a modern approach to safety, performance and software design patterns. Basically, the goal was to create the best language possible for developing apps from a range of devices as well as diversity in the functions of the app itself.
FREE PDF: Creative Coding for Kids (an interesting read for adults too)
Tags: javascript, codenewbie
Published: 2020-05-16 00:08:24

I want to share with you a free book (340 pages) by [Tariq Rashid](https://www.youtube.com/channel/UCO6iBPzIvUdzxcf87BN24FQ). Tariq wrote this book to offer young and new coders a very gently introduction into the world of JavaScript and coding in general.

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

Tariq was generous enough to share a free copy of this his with the users of [codeguppy.com](https://codeguppy.com) site. You can download the PDF from the following direct location:

Download:
[https://codeguppy.com/site/download/tariq/creative_coding_for_kids.pdf](https://codeguppy.com/site/download/tariq/creative_coding_for_kids.pdf)

The book first introduces the reader into the world of coding and graphics, then progresses towards implementation of some unique and impressive programs.

The following are just a few examples:

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

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


All programs presented in the book are provided in source code on [codeguppy.com](https://codeguppy.com)

Have fun!
FCC: Tribute Page Task
Tags: codepen, webdev, freeCodeCamp, design
Published: 2020-05-16 00:06:23

I just finished my first web design project task on [freeCodeCamp](https://www.freecodecamp.org/). Designed in Honour of Captain Thomas Sankara (The Upright Man).
Deployed with Heroku, you can preview design at → [captainsankara](https://captainsankara.herokuapp.com/index.html)
or check out the codepen below.
Feedbacks are highly appreciated.
 {% codepen https://codepen.io/absallam/pen/XWmxbpj %}
Test to measure your skills: which HTML snippet would you have written?
Tags: html, webdev, beginners
Published: 2020-05-16 00:02:27

##If asked to build this component, which HTML would you probably write?
![Calendar icon](http://rmion.com/udemy/mockup.jpg)

###1
```html
<div>
  May
  10
</div>
```
###2
```html
<div>
  <p>May</p>
  <p>10</p>
</div>
```
###3
```html
<div>
  <h3 id="month">May</h3>
  <h1 id="date">10</h1>
</div>
```
###4
```html
<div class="wrapper">
  <div class="container">
    <div class="month--outer">
      <div class="month--inner">
        <p id="month">May</p>
      </div>
    </div>
    <div class="date--outer">
      <div class="date--inner">
        <p id="date">10</p>
      </div>
    </div>
  </div>
</div>
```
###5
```html
<dl>
  <dt id="month">May</dt>
  <dd id="date">10</dd>
</dl>
```

Answers:
1. Brand spankin' new
2. Beginner
3. Junior
4. Junior who thinks you're coding like a Senior, but has a lot of bad habits to un-learn
5. Senior
Find most retweeted tweets of the #rspatial bot
Tags: r, rstats, rspatial
Published: 2020-06-09 14:42:25

---
title: Find most retweeted tweets of the #rspatial bot
published: true
date: 2020-05-16 00:00:00 UTC
tags: r, rstats, rspatial
canonical_url: https://statnmap.com/2020-05-10-find-most-retweeted-tweets-of-the-rspatial-bot/
---

Bots that retweet #rspatial and #BioImageAnalysis tweets are working well. It is now time to add a little functionnality with the best retweeted tweet of the month, a function added to {tweetrbot} package.Last summer, with Marion Louveaux, we built two Twitter bots that retweet #rspatial and #BioImageAnalysis tweets. That’s our way to collect news of our preferred communities. If you are interested, I presented in this blog post how to “Create \[such\] a twitter bot on a Raspberry Pi 3 using R” I especially created package {tweetrbot} so that my Raspberry Pi can take care of this retweet task.

See more: [Find most retweeted tweets of the #rspatial bot](https://statnmap.com/2020-05-10-find-most-retweeted-tweets-of-the-rspatial-bot/)