teleren/devto huggingface dataset:
Creating custom webmap animations - Adding easing
Tags: openlayers, animation, maps, webdev
Published: 2020-02-02 17:18:18

---
title: Creating custom webmap animations - Adding easing
published: true
tags: openlayers,animation,maps,webdev
canonical_url: https://www.haakseth.com/posts/custom-webmap-animations-3/
series: custom-webmap-animations
cover_image: https://www.haakseth.com/media/map-animation.png
---

From the previous parts of this series, we have a pretty good animation. There is still one more thing to do to create an even more pleasant animation: Easing.

## Add easing

Right now our animation is linear. In nature, most motion has an acceleration component to it. This mean that we as humans are used to it, and we should use it in web-animations as well, to make our interfaces more pleasant to use.

I found a good source of easing functions for javascript [here](https://gist.github.com/gre/1650294), and some nice visualizations [here](https://easings.net/en). [Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing) also has a well-written article on the subject. For this example, let’s try the following function:

```
const easeInOutCubic = t =>
  t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
```

We can then rewrite our `createNormalizedLineFeature()` function to vary the along length like so:

```
export const createNormalizedLineFeature = (feature, res = 60) => {
  const alongDist = length(feature) / res;
  const normalizedFeature = {
    ...feature,
    features: [
      {
        ...feature.features[0],
        geometry: { ...feature.features[0].geometry, coordinates: [] }
      }
    ]
  };
  for (var i = 0; i < res; i++) {
    const newCoord = along(
      feature.features[0].geometry,
      alongDist * (i * easeInOutCubic(i / res))
    );
    normalizedFeature.features[0].geometry.coordinates.push(
      newCoord.geometry.coordinates
    );
  }
  return normalizedFeature;
};
```

By varying the distance between the points on our route, we get a more pleasing result:

{% glitch animated-route-5 app %}

In the [first part](/posts/custom-webmap-animations-1) of this series, I said that this method works equally well for other map libraries. To put my money where my mouth is, here is the same example in OpenLayers. OpenLayers even provide their own easing functions we can use.

{% glitch animated-route-5b-ol app %}

There are still more things to do for us to improve these animations, but this post is getting long enough. For example:

- Control duration of animation based on actual time in stead of just frames.
- Handle framedrops. For instance, if the browser is struggling, fall back to just showing the route.
- Handle different types of geometries. Routes may consist of multiLineStrings. Also, maybe we want to animate polygons or points?

If you enjoyed this series, or have any feedback, feel free to comment, or contact me on [twitter](https://twitter.com/haakseth). My website is at [haakseth.com](https://www.haakseth.com/).
Connect MQTT.fx.app to AWS IoT using Certificates
Tags: aws, iot
Published: 2020-02-02 17:15:03

---
title: Connect MQTT.fx.app to AWS IoT using Certificates
published: true
description: 
tags: AWS, IoT
---

MQTT is an open OASIS and ISO standard lightweight, publish-subscribe network protocol that transports messages between devices. AWS IoT message broker implementation is based on MQTT version 3.1.1. AWS IoT Core supports MQTT over the WebSocket protocol to enable browser-based and remote applications to send and receive data from AWS IoT Core-connected devices using AWS credentials. AWS credentials are specified using AWS Signature Version 4. WebSocket support is available on TCP port 443, which allows messages to pass through most firewalls and web proxies. [Link](https://docs.aws.amazon.com/iot/latest/developerguide/mqtt-ws.html)

Mqtt.fx is the JavaFX based MQTT Client.

[MQTT.fx.app Download link](https://mqttfx.jensd.de/)


* Profile Name: AWS or as you like
* Broker Address: Get broker address from AWS 
* Broker port: 8883
* Client ID: any random text (need to be unique)
* SSL/TLS:
  * Click on Enable SSL/TLS checkbox
  * Select TLSv1.2 Protocol
  * Check Self Signed certificates box:
      * CA file:  root-CA.crt file
      * Client Certificate File: THING.cert.pem file (download from IoT Core)
      * Client key File: THING.private.key file (download from IoT Core)


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

[AWS IoT Certificate Creation](https://docs.aws.amazon.com/iot/latest/developerguide/device-certs-create.html)
How to get query parameter from URL in Google Data Studio
Tags: datastudio, regex
Published: 2020-02-02 16:52:54


For example, you want to get query parameters from URLs like this:
www.mystore.com/search?q=shoes&color=red

To simplify the process I use Google Sheets as a data source. But you can use raw data from Google Analytics as well:

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


When we have this data in Google Data Studio our goal is to have query parameter as separate columns in our report like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9zm3bv5rwntqpdxuz0kp.PNG)


To do this we have to create, a new field, and use REGEXP  to extract the data from URLs:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5xeehfjk9g0e948ykp0e.PNG)

In code below "q" is the query parameter you want to extract for example "color":
~~~~
REGEXP_EXTRACT(URL, 'q=([^&]+)')
~~~~

If you use Google Analytics as a data source, change the URL with PAGE dimension:
~~~~
REGEXP_EXTRACT(Page, 'q=([^&]+)')
~~~~


Now we can create reports based on new fields:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ei1t5ahq1gd6rg41r7y.PNG)
Minimal mobile friendly dashboard about Coronavirus
Tags: coronavirus, wuhan, nextjs, tailwindcss
Published: 2020-02-02 16:40:58

---
title: Minimal mobile friendly dashboard about Coronavirus
published: true
description: Minimal dashboard to visualize the data coronavirus 😷all over the world 
cover_image: https://www.fda.gov/files/Coronavirus_3D_illustration_by_CDC_1600x900.png
tags: coronavirus, wuhan, nextjs, tailwindcss
---

Hi all, I just felt sick about zoom **in** and **out** the map to read the coronavirus dashboard in my mobile. Therefore, I spent my weekend to created this minimal mobile friendly dashboard to quick peek the status.

Feel free to contribution:
[Github repo](https://github.com/teddylun/coronavirus)
[Demo](https://corona-virus.now.sh)
![](https://github.com/teddylun/coronavirus/blob/master/doc/dashboard.png?raw=true)
What tool do you use for user & dev documentation?
Tags: discuss, documentation
Published: 2020-02-02 16:30:25

---
title: What tool do you use for user & dev documentation?
published: true
description: What tool do you use for documentation and how does documentation process look like in your organisation?
tags: discuss, documentation
---

Hi DEV people 👋

I recently did a quick research of documentation tools and was surprised to find out that the majority of tools are static site generators like [Docusaurus](https://github.com/facebook/docusaurus). 
I was looking for something less techy, so that our clients can easily contribute to documentation of their projects themselves (as well as developers and management team).

**📝 What are you using for documentation (especially user documentation) in your projects or in your organisation?** 

My top-3 list so far:

1. [ReadMe.io](https://readme.com/) - used to be free for private documentation hubs, but it's not the case any more. Great UX for developers and non-technical people. Expensive.
2. [BookStack](https://www.bookstackapp.com/) - open source (Laravel + MySQL) self-hosted documentation hub that looks powerful yet simple. UX is not as exciting as Gitbook or Readme.io, but is good enough.
3. [Archbee](https://archbee.io/) - the cheapest SaaS option I found, looks promising. 


Thank you for sharing!
Singular or Plural? A Cheatsheet for Ruby on Rails Generators
Tags: ruby, rails, todayilearned
Published: 2020-02-14 03:02:16

---
title: Singular or Plural? A Cheatsheet for Ruby on Rails Generators
published: true
date: 2020-02-02 16:21:59 UTC
tags: Ruby,Ruby on Rails,todayilearned
canonical_url: https://shannoncrabill.com/blog/ruby-on-rails-singular-or-plural-generator-cheat-sheet/
---

Ruby on Rails (Rails) is good at doing the manual work for you. With one line, Rails can create the model, controller and view files associated with your application. The downside of using `rails generate` or its shortcut `rails g` is that small mistakes like typos are amplified. If Rails is expecting `user`, and you mistakenly typed `users` it _could_ cause functionality errors. 

This cheat sheet will help to avoid those conflicts.

If you are comfortable working with Rails, Model–view–controller (MVC) architecture `rails generate`, this post is for you.

| Noun                | Singular? | Plural? | Example                                     |
|---------------------|-----------|---------|---------------------------------------------|
| Controller          | No        | Yes     | users_controller.rb, products_controller.rb |
| Migrations / Tables | No        | Yes     | 001_create_users.rb, 002_create_products.rb |
| Model               | Yes       | No      | user.rb, product.rb                         |
| Routes              | No        | Yes     | :users, :products                           |
| Seed Data           | No        | Yes     | seeds.rb                                    |
| Scaffold            | Yes       | No      | rails g scaffold user                       |
| View                | No        | Yes     | /users, /products                           |


## Resources

- [The Rails Command Line – Rails Generate](https://guides.rubyonrails.org/command_line.html#rails-generate)
- [Rails Generators CLI Cheatsheet](https://medium.com/@kevinyckim33/rails-generators-cli-cheatsheet-711295e7a1ed)

### Update

The above chart was updated on February 15th 2020 to include scaffolds. Thank you [timnans](https://dev.to/timnans/comment/lfni) for the suggestion! The table was also put into alphabetical order by noun.


The post [Singular or Plural? A Cheatsheet for Ruby on Rails Generators](https://shannoncrabill.com/blog/ruby-on-rails-singular-or-plural-generator-cheat-sheet/) appeared first on [Shannon Crabill — Software Engineer && Email Developer](https://shannoncrabill.com/blog).
Intro - Types of functions
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-02-02 16:19:30

> A Function in javascript is a collection of instructions that run when the function is invoked.

A normal function declaration in javascript is as declared as below:

```javascript
function square(n){
  return n*n;
}

// Then invoke it as :

console.log(square(5)); // 25
```

While the above is understood, functions can also be declared as `Function expression`:

```javascript
const square = function(n){
  return n*n;
}

// Then invoke it as :

console.log(square(5)); // 25
```

There are many types of functions which I will cover in this 6 part series.

**Different types of functions:**

 - Function declaration and Anonymous functions
 - Arrow functions
 - Methods
 - Immediately invoked function expressions
 - Callback functions
 - Generator functions

Stay tuned for further posts.
Character Encoding Of HTML Document
Tags: html
Published: 2020-02-02 16:00:17

The first line you need inside the head i.e. `<meta charset="utf-8">` is the charset declaration. The `charset` attribute specifies the character encoding used by the document. A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified. It is **extremely important** to declare character encoding just after starting `<head>` tag before any element that contains text, such as `<title>` element and, with in the first 1024 bytes of the document, failing to do so will cause browsers to guess the encoding.

```markup
<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">

      <!--  rest of document -->
      ...
</html>
```

## Is it mandatory to specify character encoding?

Although it is not mandatory however it is a good practice to specify this information explicitly.

If you do not specify `<meta charset="utf-8">` in the HEAD of the HTML document, the browser will look for the `Content-Type` response HTTP header sent from the server.

## What is `UTF-8`?

**UTF-8** (_case insensitive_) is a character encoding capable of encoding all possible characters (called code points) in Unicode. The encoding is variable-length and uses 8-bit code units.

> Unicode provides a unique number for every character

As of HTML5 the recommended charset is `UTF-8`.

## Summary

Choosing the right character encoding is important. Use `UTF-8` if at all possible, especially for multilingual sites.

👉[Link to the original article](https://iteachfrontend.com/how-to-set-character-encoding-of-html-document)
Minimalistic Hacker News Speed Redesign using Figma
Tags: uiweekly, design, figma, tutorial
Published: 2020-02-02 15:52:22

{% youtube tFk2bmhJLNk %}

I was experimenting with this thing called speed design. It's basically an entire video where you record yourself designing or developing something, which seems to be a lot better than the alternative that is having to record a video with my voice overs, considering that I'm very conscious about my voice 🙈

It's difficult to be patiently working on just one thing the entire time, knowing that whatever you do is being recorded, but the experience was fun and the end result seemed a lot more fruitful than the making.

Anyway, this could be the first of many... or the last. I have no clue. Here's my latest upload on YouTube after a million years:
https://youtu.be/tFk2bmhJLNk

I didn't use many resources here:
just a few icons from Ant Design,
Figma, the awesome-est design tool,
and the beloved Hacker News homepage

I just wanted an overview of my design process. Usually, I'm a lot more haphazard and unstructured than this, but every mind is unique :)

Let me know what you think... or don't. 😅
Thanks for reading :)
Add helpful cli to your python libraries... All of them!
Tags: python, bash, tutorial, discuss
Published: 2020-02-02 15:38:06

cli tools are super handy and easy to add to your python libraries to supercharge them.  Even if your library is not a cli tool there are a number of things that a cli can do to your library.

# Example Ideas

Things a cli can do to enhance your library.

🆚 print version
📃 print config
🕶 print readme
📝 print changelog
✏ change config
👩‍🎓 run a tutorial
🏗 scaffold a project with cookiecutter

# 🖱 [Click](https://click.palletsprojects.com/)

[Click](https://click.palletsprojects.com/) is the most popular python cli tool framework for python.  There are others, some old, some new comers that make take the crown.  For now [Click](https://click.palletsprojects.com/) is the gold standard if you want to make a powerful cli quickly.  If you are dependency conscious and dont need a lot of tooling, use [argparse](https://docs.python.org/3/library/argparse.html).


# Project Structure

```
.
├── setup.py
└── simple_click
    ├── cli.py
    └── __init__.py
```

# ❯ cli.py

``` python
# simple_click/cli.py
import click

__version__ = "1.0.0"

@click.group()
def cli():
   pass

@cli.command()
def version():
    """prints project version"""
    click.echo(__version__)


if __name__ == '__main__':
    cli()
```

# ✨ \_\_init\_\_.py

For our simple_click library `__init__.py__` can be left empty.  It is here purely to signify that simple_click is a library.  It is likely that you will import other modules here that need to reside at the top level of your library api, your cli does not need to be at the top of of your api.


``` python
# __init__.py
```
# 🚪 Entry Points

Entry points are the magic that make python cli tools available as their own command without having python before it or the file extension.


``` python
# setup.py

from setuptools import setup, find_packages

# this is the 🥩 meat of this snippet
# simple_click is the command name
# = simple_click is the library name
# .cli is the cli.py file
# :cli is the cli function
#
# the second item is a shorthand alias to the main command

entry_points = [
   "simple_click = simple_click.cli:cli",
   "scli         = simple_click.cli:cli",
]


setup(
    name='simple_click',
    version='1.0.0',
    url='https://github.com/mypackage.git',
    packages=find_packages(),
    entry_points={"console_scripts": entry_points},
   
)

```

# 🕶 See it in action

![See it in action](https://dev-to-uploads.s3.amazonaws.com/i/4zrhvj5yjzyk63np91g9.gif "See it in action")


# 📢 Discuss

What do You wish more python libraries included in their cli?



### Shameless Plug

This page was originally posted on my personal blog [https://waylonwalker.com/b/scli/](https://waylonwalker.com/b/scli/)
Who's using Service Workers?
Tags: discuss, webdev, javascript, serviceworkers
Published: 2020-02-02 15:33:52

DEV runs on Service Workers...

{% link https://dev.to/devteam/instant-webpages-and-terabytes-of-data-savings-through-the-magic-of-service-workers-1mkc %}

I'm wondering if any of the projects y'all work on are making use of this yet, or if you want to identify popular websites that use Service Workers. I know Twitter is one.
Bash Aliases
Tags: bash, aliases
Published: 2020-02-02 15:17:07

Uma das alegrias da vida é fazer mais com menos, e isso é uma das coisas que os *aliases* podem nos trazer.

Um *alias* nada mais é do que uma instrução em que o Shell substitui uma *string* por outra *string* -literalmente um "apelido".

<img src="https://claudiojunior.me/media/aliases_print2.png" width="100%" height="450" style="object-fit: cover;" />

Geralmente criamos um *alias* para digitarmos mais rápido algum comando que é muito utilizado no nosso dia a dia. Por exemplo, podemos digitar apenas um `ll` como abreviação do comando `ls -alh` para listarmos os arquivos e pastas do local atual incluindo conteúdo oculto (`a`) no formato de lista (`l`) e mostrando o tamanho dos itens já formatado (`h`).

Ou até algo como saber seu `ip` usando um simples comando de 2 letras ao invés de digitar algo como `"echo Your ip is; dig +short [myip.opendns.com](http://myip.opendns.com/) @resolver1.opendns.com;"` - muito mais conveniente digitar apenas `ip`.....

Existem duas simples formas de se criar um novo *alias*, podemos criar direto no Shell, criando 1 a 1 com o comando:

```bash
    alias [name=value]
    alias downloads="cd ~/Downloads"
```

Ou editando / criando um arquivo padrão de alias e vinculando ele ao seu Shell - abordagem que eu prefiro. Por exemplo, criamos um arquivo de texto comum:

```bash
    # aliases.zsh
    alias gadd='git add'
    alias gcom='git commit'
    alias gsup='git status'
    alias goto='git checkout'

```

e vinculamos esse arquivo ao `.bashrc` ou `.zshrc` ou qualquer outro que seja seu Shell:

```bash
    # .zshrc
    source aliases.zsh
```

Depois de descobrir esse mundo maravilhoso dos aliases, resolvi criar um personalizado para minhas necessidades, e acho que pode servir de base pra quem procura facilitar o seu trabalho!

Você ver ele [aqui](https://gist.github.com/claudiojunior-me/a4d3d551978e44e612f5dcd496208691)!

Espero que isso te inspire a encontrar atalhos para o seu dia-a-dia! 😁
Daily Challenge #179 - Hide Phone Numbers
Tags: challenge
Published: 2020-02-02 14:30:18

---
title: Daily Challenge #179 - Hide Phone Numbers
published: true
series: Daily Challenge
description: Implement a function that will hide the last 6 digits of a phone number. 
tags: challenge
---
###Setup
Implement a function that will hide the last six digits of each phone number. Your function should be able to understand the separators for US numbers. Phone numbers can be separated by spaces, periods, or hyphens. 

###Examples
Original: `201-680-0202`
Encrypted: `201-6XX-XXXX

###Tests
encryptNum("328 6587120")
encryptNum("212-420-0202")
encryptNum("211-458-7851")

***
_This [challenge](https://www.codewars.com/kata/5953e4a29e93cef2e90000aa) comes from otrebor6 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
finally I got rid of hangouts from gmail web interface
Tags: gmail, google
Published: 2020-02-02 14:27:00

---
title: finally I got rid of hangouts from gmail web interface
published: true
description: 
tags: gmail,google
---

I found this information on Quora but the link was gross so I am just putting the information here.

To get remove the abomination called Hangouts from gmail
> Go to Gmail settings, the gear on the upper right of the Gmail app, and select Settings.
> Select the Chat menu, on the far right of the menu options, opposite General.
Turn Chat off, and Save Changes.

I realize this is not a developer thing... but I cannot tell you the amount of joy I felt when I refreshed gmail in my browser and the ugly Hangout list in the left corner went away.
I have been working on Kubernetes for the past few weeks. Here is my thoughts.
Tags: kubernetes, googlecloud, gke
Published: 2020-02-02 14:24:40

---
title: I have been working on Kubernetes for the past few weeks. Here is my thoughts.
published: true
date: 2020-02-02 14:24:40 UTC
tags: Kubernetes,google cloud,gke
canonical_url: https://blog.yongweilun.me/i-have-been-working-on-kubernetes-for-the-past-few-weeks-here-is-my-thoughts-ck6549r5b0338kbs16jymsoop
---

A few weeks ago, I was fortunate enough to be involved in migration to Kubernetes in my company. We were running our nodeJS-based monoliths app in a single Compute Engine setup and decided a change to run on Google Kubernetes Engine. To be fair, my k...


Read full story on [original post](https://blog.yongweilun.me/i-have-been-working-on-kubernetes-for-the-past-few-weeks-here-is-my-thoughts-ck6549r5b0338kbs16jymsoop)
Staircase Problem
Tags: java, javascript
Published: 2020-02-02 13:53:02

Consider a staircase of size n=4 

   #
  ##
 ###
####

Observe that its base and height are both equal to n, and the image is drawn using # symbols and spaces. The last line is not preceded by any spaces.

Write a program that prints a staircase of size n.

**Function Description**

Complete the staircase function in the editor below. It should print a staircase as described above.

staircase has the following parameter(s):

n: an integer

**Input Format**

A single integer, , denoting the size of the staircase.

Constraints

 0<n<=100

**Output Format**

Print a staircase of size n using # symbols and spaces.

Note: The last line must have 0 spaces in it.

**My Solution**

import java.io.*;
import java.math.*;
import java.security.*;
import java.text.*;
import java.util.*;
import java.util.concurrent.*;
import java.util.regex.*;

public class Solution {
    public static void main(String[] args){
        Scanner sc = new Scanner(System.in);
        int n = sc.nextInt();
        for(int i=1;i<=n;i++){
            for(int k=n;k>i;k--){
                System.out.printf(" ");
            }
        for(int j=1;j<=i;j++){
            System.out.printf("#");
        }
        System.out.println();
        }
    }
}


***Please comment your approach***