
You have probably heard of the Vaporwave or maybe seen one of Vaporwave-themed things on the web, here is a guide to help you understand and explore vaporwave world ! 

Vaporwave is a musical genre and an Art movement emerged on the internet in the early 2010s, it's musical genre is defined by music sampling of 80s/90s Jazz, lounge, elevator music and slowing down famous songs, 

Vaporwave subculture is sometimes associated with an ambiguous or satirical take on consumer capitalism and pop culture, and tends to be characterized by a nostalgic or surrealist engagement with the popular entertainment, technology and advertising of previous decades. It also incorporates early Internet imagery, late 1990s web design, glitch art, anime, 3D-rendered objects, and cyberpunk tropes in its cover artwork and music videos. (Wikipedia)

## Little history 

One day, there was seapunk, a sort of heterogeneous genre where figures of hip-hop of the 1990s mixed with techno-surrealist aesthetics, with images of dolphins, poor quality digital seas, and a horribly turquoise hue. It was a pure product of the internet counterculture, taken from the depths of Tumblr.

Origins of vaporwave are multiple, in 2010, artist Daniel Lopatin, also known as Oneohtrix Point Never, released the album Eccojams Vol for fun. 1 under the pseudonym of Chuck Person.

<iframe width="100%" height="600px" src="https://www.youtube.com/embed/unN7QvSWSTo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The album is a strange and hypnotic assembly of bits of songs from the 1980s, 1990s and 2000s, slowed down, repeated in a loop for far too long, and occasionally dotted with typical sound effects of technologies of that time ( VHS etc ). 

The cover - as well as the title, which recalls the cult game of the Mega Drive Ecco the dolphin - evokes the cases containing the cassettes of the consoles of the 16bit era.

There is also the most popular album and the one that helped popularize vaporwave over the internet **Floral Shoppe** from **Macintosh Plus**

## Art movement :

 <div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/VFtCpeFkd17bVxQFjJEN9A/662644728177852416" data-did="5924b5836215d6cb9ecf93bbe89bfc5b35cdc07c"><a href="https://vaporwave.tumblr.com/post/662644728177852416">https://vaporwave.tumblr.com/post/662644728177852416</a></div>  <script async src="https://assets.tumblr.com/post.js"></script>

Vaporwave artistic movement is basically based on musical and cultural ressources of 1980 and 1990 while also being associated with an ambiguous or satirical take on consumer capitalism and technoculture

The major elements of the Vaporwave design movement are : 

- Usage of early internet references (old web browsers, Windows95, Paint)
- Japanese texts
- Retro computer imagery
- 90s Anime imagery

## Music :

<iframe width="100%" height="600px" src="https://www.youtube-nocookie.com/embed/Ki-fATpXa00" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Now that you know what Vaporwave is, you probably already fallen in love with :)


An introduction to Vaporwave


Depending on your project/app you don't necessarily want to use Google Analytics in your website for various reasons, and you might consider an open-source service/software

There is a list of open source and free web analytics software that I recommend to see :


**[Plausible Analytics ](hhttps://plausible.io/)- My Favorite**
![](/content/images/2020/01/image.png)
Plausible is definetly my favorite analytics software, I use it for graphicmade & Framestack, it's simple to install and provides all the necessary data that you'll need, also it respects your privacy never collect IPs adresses or anything more, this means you can use it without the need of displaying a GDPR banner ;) 


**[Kibana ](https://www.elastic.co/fr/products/kibana)- The powerful**
![](/content/images/2020/01/image.png)
Kibana is one of my favorites, it's a solution that uses server logs to show data, it's extremely powerful and you can get very precise data about activity in your website and your server It can even use Machine Learning, also you can personalize the dashboard as you like

**[Matomo ](https://fr.matomo.org/)- The revolutionary**
![](/content/images/2020/01/image-1.png)
Matomo is web analytics much like Google Analytics, that you can install on your server and manage it yourself or you can use the managed paid version

Mataomo includes features like Heatmaps, Sessions Recordings, A/B Testing, Funnels, Goals, Form Analytics

**[Open web analytics](http://www.openwebanalytics.com/) - The Classic**
![](/content/images/2020/01/image-2.png)
It's literally Google Analytics but in open-source they even have the same design, you have the features that you can find in Google analytics, plus Heatmaps, Privacy controls and more...

**[Aws Stats](https://awstats.sourceforge.io/) - Good old log analyzer**
![](/content/images/2020/01/image-3.png)
The good old log analyzer, it's a software you can install on your server it shows data depending on your web server logs ( NGINX logs, apache logs)

**[Fathom - the simple one](https://usefathom.com/)**
![](/content/images/2020/01/image-4.png)
Fathom is a simple-yet-powerful analytics software it's built on Go and React and provide the most important data you need, It's available in GitHub ( MIT License )

**[Ackee - the beautiful one](https://ackee.electerious.com/)**
![](/content/images/2020/01/image-5.png)
Ackee Analytics is self-hosting software solution you need to install on your server to work, it tracks data for you without using cookies, so you get anonymized data which is good for your users' privacy ( and no GDPR to worry about lol )


Open source alternatives to Google Analytics


Monitoring your server can sometimes be difficult, but it's essential for you to monitor your server to know which apps are actually using the most of your ressources, is your machine running out of memory ? is it time to upgrade or attach a new volume ?

This article will help you scaffold your Monitoring using Prometheus & Grafana to get a working monitoring solution and in less than 10 minutes, bonus you don't need to use Grafana in your machine since Grafana Cloud offers a free tier.

You'll be able to monitor your Linux Machine in the end of this article and be able to understand how does it work

## Chapter 1 : Initializing prometheus & the node-exporter using Docker

### The Docker-compose file

```yaml
version: "3.8"

services:
  node_exporter:
    image: quay.io/prometheus/node-exporter:latest
    container_name: node_exporter
    command:
      - "--path.rootfs=/host"
    network_mode: host # port 9100 is exposed by default
    pid: host
    restart: unless-stopped
    volumes:
      - "/:/host:ro,rslave"
  prometheus:
    image: quay.io/prometheus/prometheus:latest
    container_name: prometheus
    network_mode: host
    volumes:
      - "./prometheus/prometheus.yml:/etc/prometheus/prometheus.yml"
```

### Node exporter ?

But what is an exporter ?

> An exporter is software that you installs in your machine, it collect data metrics from something and export it - or make it available for another service to use it for monitoring or analytics purposes in this case Grafana dashboards

What is Prometheus ?

> Prometheus is a time series database used for collecting metrics you would export using an exporter, you can think of it as big monitoring software block that collect multiple sources of metrics from anywhere and then store it time-based and provides you a way to query on these metrics, the goal at the end is to link your big prometheus " monitoring tower " to your Grafana instance

What is Node exporter ?

> It is one of the "exporters" that Prometheus provide you with, The Node one is used to collect system data, like :

- bootime
- Cpu Frequency
- Ram Usage
- Network requests
- Storage Usage
- More

## Chapter 2 : Understand what is going on

### Prometheus.yml config file

```yaml
global:
  scrape_interval: 15s # By default, scrape targets every 15 seconds.

  # Attach these labels to any time series or alerts when communicating with
  # external systems (federation, remote storage, Alertmanager).
  external_labels:
    monitor: "codelab-monitor"

# A scrape configuration containing exactly one endpoint to scrape:
# Here it's Prometheus itself.
scrape_configs:
  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
  - job_name: "prometheus"

    # Override the global default and scrape targets from this job every 5 seconds.
    scrape_interval: 5s

    static_configs:
      - targets: ["127.0.0.1:9090"]

  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
  - job_name: "node-exporter"

    # Override the global default and scrape targets from this job every 5 seconds.
    scrape_interval: 5s

    static_configs:
      - targets: ["127.0.0.1:9100"]
```

### How will it work ?

- Node exporter will collect machine metrics and will export it via a port **:9100**
- Prometheus will be initialized and active in port **:9090** we'll add the port **:9100** to the list of target to check
- Prometheus will be able to get data from the Node exporter since we explicitly listed the URI Port to check in the prometheus.yml
- When accessing the Prometheus web page we'll be able to see the metrics in a time table

### Back to Docker

You probably noticed that I used the network mode host, that's because Node exporter need to access the host system, you can find more informations about that [here](https://github.com/prometheus/node_exporter#docker)

## Chapter 3 : Let's do it

### Prometheus 

- In a folder, copy the **docker-compose.yml** contents to a **docker-compose.yml** file
- Create a **prometheus** folder in your root folder
- In your **prometheus** folder create a **prometheus.yml** config file and copy the prometheus config below
- Initialize the docker-compose

```bash
docker-compose up -d
```

- Your Docker config should be working and everything up
- Check that your targets are up in the prometheus dashboard 

![Prom Targets](/img/posts/grafana/targets.png)

- You can now explore all the metrics that the Node exporter provides you with 

![Prom Targets](/img/posts/grafana/explorer_metrics.png)

- Here for example we can see memory usage by time 

![Prom Targets](/img/posts/grafana/memory_metrics.png)

### Grafana 

Grafana offers a free tier of their Hosted instances, just grab one at [Grafana.com](https://grafana.com/), 

- Grafana probably already installed a Dashboard in your account you can delete it or just keep it 
- Now you have to link your Prometheus that you installed in your machine to Grafana 
- Go to Configuration > Data Sources 
- Choose Prometheus 
- In URL put the URL of your Prometheus service it should have the port :9090 and start with http
- Choose Access : Server 
- And your good to go ! 

When using grafana you can either choose to make your own panels/dashboards OR use Dashboard templates, we'll use a pretty useful Grafana dashboard that I found complete : [this one](https://grafana.com/grafana/dashboards/1860) 

- Go to Grafana 
- Click on the "+" Icon 
- Select Import 
- Put the Grafana dashboard URL or ID (1860)
- Click on load

Congratulations 🥳 , you know have a complete dashboard that monitor your linux machine and it should looks like this : 

![Grafana Dashboard](/img/posts/grafana.png)


Simply monitor your Linux machine with Grafana & Prometheus


When developing your app you actually build a version of the app that your users will download and use but when you make an update to your app and publish it to the store you are not sure if all your users will update their version of the app or not, then you have to deal with fragmentation 

### What fragmentation means ? 
![](https://images.unsplash.com/photo-1529610542-3d3fa2e6535c?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ)
Fragmentation is when not all users have the same version of the app unlike website that actually serves the same version of the website to all users, in the mobile world you will have to deal with latest-version users and with users that still have that version with that bug or that legacy API that you plan to shutdown 

With OTA updates all your users will automatically receive the latest version of your app, remember that Messenger UI update that occurred on your mobile without having updated the app from the store? ***well that was an OTA update***

### When to configure your app for OTA updates ?

You should configure your app to support OTA updates from day one so all versions of your app can be updated, even the legacy ones 

- For testing purposes : maybe you want to test a new feature and later do a rollback or stick with the actual version
- Security issues : you know that your app must be secure and you are afraid you will deal with security bugs and you need to fix and deploy the security patch for all your users
- API updates : maybe some of your legacy apis will not longer work with users with previous versions of your apps
- You want your users to always have the latest version : maybe in a context of a online game or realtime apps all your users should have the same version so your app work properly

### How to configure your app for OTA updates ? 

It depends on your platform and how you built it, by the way there is some links to help you :) 

## For React Native Apps (iOS/Android) :

- Expo Docs (the eaaasy way) : [Expo Docs](https://docs.expo.io/versions/latest/guides/configuring-ota-updates/ )

- With Microsoft CodePush : [Codepush](https://microsoft.github.io/code-push/)

#### Articles

- Understanding React Native Deployments : [Article link](https://medium.com/react-native-training/understanding-react-native-deployments-6e54157920b7)

## For Nativescript (Angular/Vue):


- Enable Live Updates of Your iOS and Android Apps Using NativeScript AppSync : [Article link](https://www.nativescript.org/blog/enable-live-updates-of-your-ios-and-android-apps-using-nativescript-appsync)

## For Hybrid apps (apps built with HTML/CSS) :

### Ionic : 

- Deploy a Live Update : [Article Link](https://ionicframework.com/docs/appflow/quickstart/deploy)

- Ionic Appflow : [Appflow](https://ionicframework.com/appflow)

## For Flutter (Dart/Google) :

#### Articles
[Flutter](https://medium.com/apolloblog/building-an-in-app-updater-ota-in-flutter-b0becddee8ca)

## For Android (Java/Kotlin/Android SDK) :

It's slightly more difficult to configure over-the-air updates in native android and iOS apps :/ 


Update android application using OTA : [Link](https://stackoverflow.com/questions/22527685/update-android-application-using-ota)

## For iOS Native apps (Swift/Apple) :
[Great article ](https://medium.com/swlh/updating-users-to-the-latest-app-release-on-ios-ed96e4c76705)


Blog

An introduction to Vaporwave

Open source alternatives to Google Analytics

Simply monitor your Linux machine with Grafana & Prometheus

When and why you should consider OTA updates for your mobile app