Forem: Fábio Borges

Using Matomo on Angular

Fábio Borges — Tue, 03 May 2022 10:41:49 +0000

If you haven’t heard about Matomo, yet, then you should check this out.

Matomo is a

“Google Analytics alternative that protects your data and your customers' privacy” and that “gives you 100% data ownership”.

This is great news for those of you who are GDPR aware and unfortunately (for some) aren’t able to use cloud services like Google Analytics.

OK, so where can we start?

On this guide, I’ll help you configure an “on-premise” installation of Matomo using Docker with nginx, and running it on Angular.

Reference material

All the info I’m sharing can be found at matomo-org/docker and EmmanuelRoux/ngx-matomo.

Some tweaks can be found in my git matomo-angular-docker

I’m also assuming you already installed docker on your machine.

Setting up your docker

This setup is for Matomo version 3 and includes a database with MySQL image (you could use MariaDB as well), the Matomo app and the web using nginx.

First thing is first, let’s get the docker-compose.yaml file.



version: "3"

services:
  db:
    image: mysql
    command: --max-allowed-packet=64MB
    restart: always
    volumes:
      - db:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=matomo
    env_file:
      - ./db.env

  app:
    image: matomo:fpm-alpine
    restart: always
    links:
      - db
    volumes:
      - matomo:/var/www/html
    environment:
      - MATOMO_DATABASE_HOST=db
      - PHP_MEMORY_LIMIT=2048M
    env_file:
      - ./db.env

  web:
    image: nginx:alpine
    restart: always
    volumes:
      - matomo:/var/www/html:ro
      - ./matomo.conf:/etc/nginx/conf.d/default.conf:ro
    ports:
      - 8080:80

volumes:
  db:
  matomo:

Nothing fancy here, Matomo will be running on port 8080, and you can of course change the values like MYSQL_ROOT_PASSWORD or the restart option (which if you don’t know, keeps restarting the container in case of failure).

In case you didn’t notice, we’re referencing two other files in this compose.

The db.env where we will set some variables for MySQL image



MYSQL_PASSWORD=matomo
MYSQL_DATABASE=matomo
MYSQL_USER=matomo
MATOMO_DATABASE_ADAPTER=mysql
MATOMO_DATABASE_TABLES_PREFIX=matomo_
MATOMO_DATABASE_USERNAME=matomo
MATOMO_DATABASE_PASSWORD=matomo
MATOMO_DATABASE_DBNAME=matomo

And matomo.conf file where we’re defining some behaviour for Matomo nginx.



upstream php-handler {
    server app:9000;
}

server {
    listen 80;

    add_header Referrer-Policy origin; # make sure outgoing links don't show the URL to the Matomo instance
    root /var/www/html; # replace with path to your matomo instance
    index index.php;
    try_files $uri $uri/ =404;

    ## only allow accessing the following php files
    location ~ ^/(index|matomo|piwik|js/index|plugins/HeatmapSessionRecording/configs).php {
        # regex to split $uri to $fastcgi_script_name and $fastcgi_path
        fastcgi_split_path_info ^(.+\.php)(/.+)$;

        # Check that the PHP script exists before passing it
        try_files $fastcgi_script_name =404;

        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param HTTP_PROXY ""; # prohibit httpoxy: https://httpoxy.org/
        fastcgi_pass php-handler;
    }

    ## deny access to all other .php files
    location ~* ^.+\.php$ {
        deny all;
        return 403;
    }

    ## disable all access to the following directories
    location ~ /(config|tmp|core|lang) {
        deny all;
        return 403; # replace with 404 to not show these directories exist
    }
    location ~ /\.ht {
        deny all;
        return 403;
    }

    location ~ js/container_.*_preview\.js$ {
        expires off;
        add_header Cache-Control 'private, no-cache, no-store';
    }

    location ~ \.(gif|ico|jpg|png|svg|js|css|htm|html|mp3|mp4|wav|ogg|avi|ttf|eot|woff|woff2|json)$ {
        allow all;
        ## Cache images,CSS,JS and webfonts for an hour
        ## Increasing the duration may improve the load-time, but may cause old files to show after an Matomo upgrade
        expires 1h;
        add_header Pragma public;
        add_header Cache-Control "public";
    }

    location ~ /(libs|vendor|plugins|misc/user) {
        deny all;
        return 403;
    }

    ## properly display textfiles in root directory
    location ~/(.*\.md|LEGALNOTICE|LICENSE) {
        default_type text/plain;
    }
}

# vim: filetype=nginx

Up up we go!

Time to run the docker-compose file. For this, just open your favourite terminal (I like ZSH!) on the root of the folder where you have the file in and execute the command docker-compose up. This will create the needed volumes and images for the new docker containers.

If you now head to your http://localhost:8080/, and you did exactly as I said, you’ll see that Matomo is ready to be configured.

Setting up Matomo

On the Database Setup, make sure you enter the inputs for the values defined on the docker-compose.yaml file.

On the Superuser step just set up your credentials as you want them and then on Set up a Website make sure to define your target, in this example it will be https://localhost:4200 which is where we will be running our angular application.

Problems ahead?

On ending the setup, you might be faced with a warning stating that Matomo has not been configured to run on your localhost 8080 port.

The problem is not the problem, savvy?

To get around this, we need to change Matomo config.ini.php file inside the app container that was created by our compose file.

The deal is that we basically need to tell Matomo that the port we’re using is a trusted host.

To do this, run the following command from same folder where docker-compose.yaml is: docker exec -u 0 -it matomo_app /bin/sh take in consideration that matomo_app is your container name (in some scenarios you might end up with and suffix like matomo_app_1, just check the name using docker ps)

If the command ran successfully, then we should be inside the container.

Now we'll use vi to edit the Matomo configuration file by running the command vi config/config.ini.php (make sure your path is /var/www/html).
Press the key I to insert data, navigate to the [General] section and then append the following:



[General]
trusted_hosts[] = "localhost:8080"
cors_domains[] = *

Once finished the editing, press the ESC key, write :wq and press enter. This will write and quite the editing of the file.

Trusted hosts will allow you to run Matomo in your defined port (in this scenario it’s 8080) and the CORS will allow your local project to call Matomo on the same port (look at me, doing magic and stuff)

Are we there yet?

Almost there, kids. So we got everything up and running, and the only missing link is adding the Matomo package to your angular project and set it up.

On the angular project, install the package npm install --save @ngx-matomo/tracker followed by npm install --save @ngx-matomo/router and then import the modules NgxMatomoTrackerModule and NgxMatomoRouterModule into your app.module, so it looks like this



import { NgModule } from '@angular/core';

import { NgxMatomoTrackerModule } from '@ngx-matomo/tracker';

import { NgxMatomoRouterModule } from '@ngx-matomo/router';

@NgModule({

  imports: [

    // ...

    NgxMatomoTrackerModule.forRoot({

      siteId: 'YOUR_MATOMO_SITE_ID', // your Matomo's site ID (find it in your Matomo's settings)

      trackerUrl: 'http://localhost:8080/', // your matomo server root url

    }),

    NgxMatomoRouterModule,

  ],

  // ...

})

export class AppModule {}

Are we done yet?

Oh, yes, we are! The configuration above is the bare minimum, so you'll have a report for every routing navigation you do. Try navigating back and forward on your angular app and then check the Matomo dashboard, you should see some data appearing.

This was a very fun and educational exercise for me, and I hope I’ve helped you set up your machine as well.
As always, please feel free to advise, share ideas and, comment! See you soon!

Special thanks to Ashkan Forouzani, Tim Gouw and Ricardo Rocha for the photos.

Why you should stop z-index:9999

Fábio Borges — Wed, 14 Apr 2021 14:41:50 +0000

Sometimes you just need to handle your custom modal depth, or maybe you had to deal with sticky positioning. We've all been there and there are better ways of achieving this.

The problem

So I guess you went too far with it, and now you don't actually know what's the difference between z-index:549 and z-index:329. And why the heck is this table button z-index:9999? It's ruining my modal!

I won't get too much on the problem side, I guess if you're here you probably know what's happening, and you just need a better approach so let me try and show you different ways of fixing this.

Solutions

Let's say, for the sake of simplicity, that we have 3 levels of depth: base, footer, and modal.

The CSS var approach (KISS)

Here we just store those 3 index, so we can use them later.

:root{
  --base: 1;
  --footer: 100;
  --modal: 200;
}

And then we can just fetch anywhere in the project like so.

.table{
  var(--base);
}

.modal{
  var(--modal)
}

You might need to use CSS vars to be able to manipulate them in JavaScript but in this scenario it's not clear what's inside those variables, and they will be easily lost between many others you might have, maybe a preprocessor could help.

More on the 100 range gaps next.

Using a preprocessor (SASS)

Same idea here but maybe a bit more organized. The idea here is to store those default values inside the $zindex variable that we can access and manage it better.

$zindex: (
  base: 1,
  footer: 100,
  modal: 200,
);

To fetch the values we can use maps

.modal{
  z-index: map-get($zindex, modal);
}

.footer{
  z-index: map-get($zindex, footer);
}

But why the heck are we gapping 100 values?

Sometimes you might even see it in 1000 range gaps, but the main reason for this is just in case you need to add something in between and since z-index can't handle decimal numbers you're safer doing it this way.
Even if you don't add 99 extra items between depth.

Getting funky with it

Unless you're doing a tiny project you'll probably need to deal with a lot of deeper depth levels, but that's not a problem.

Since we have default values for all the depths lets think in a scenario where you might have the need to have way more management over a modal. Here's what we can do:

$zindex: (
  base: 1,
  footer: 100,
  modal: (
    base: 200,
    footer: 210,
    header: 220,
    close: 230,
  ),
);

.modal{
  z-index: map-get($zindex, modal);

  .modal__btn--close{
    z-index: map-get($zindex, modal, close);
  }

  ... 
}

Conclusion

There's a lot more ways of handling z-index you just need to get creative and keep things organized. It's pretty clear we can all do a better job with it.

Do you have a different or easier way of doing it? Let others know on the comments!

I hope this could help someone out. Cheers, see you soon!

Special thanks to https://unsplash.com/@didsss for the header image :)

How to automate a Javascript project versioning

Fábio Borges — Wed, 30 Dec 2020 17:53:52 +0000

Sooner or later all developers need to handle some sort of versioning their software. If you've been there you know that manual updating versions, changelogs, and tags are prone to error and emotional decisions.

In this article, I'll try to show an easy and automated way of managing your versions following the conventional commiting structure and with the help of standard-version.

Install standard-version

Let us start with installing our package

npm i standard-version -D

Now, for the purpose of easiness add the following script to your package.json

{
  "scripts": {
    "release": "standard-version"
  }
}

How it works

Our package needs us to follow the Conventional Commits Rules in the repository. This means that we must use the correct syntax.

Here is an overview of how it's done:

fix for a PATCH
feat for a MINOR
! scope suffix for a MAJOR

So the commits must follow the pattern scope!: message the ! is optional for a MAJOR.

feat: new reset password button` -> 0.1.0
feat!: new reset password button` -> 1.0.0

Workflow

Now that all is configured and we've understood the ground rules for automated versioning, let's have a look at a simplistic view of how a workflow should be.

Developing a feature on a feature branch

git add .
git commit -m "feat: created a reset password"
git push

Merging to the master branch - this is where the magic happens

git merge origin/feature-branch
npm run standard-version - the package is looking into the commit history and automatically increasing your API version to X.Y.Z
git push —follow-tags origin master - this is pushing your bumped with the changelog file and tags generated

And that's all! You should be able to see on your master branch the corresponding bumped version with the changelog file and all linked to a tag.

Common mistake

According the semver

Major version zero (0.y.z) is for initial development. Anything MAY change at any time. The public API SHOULD NOT be considered stable.

This means that until you intentionally run npm run release -- --release-as major you won't see your major version bumping from 0.y.z to 1.y.z. From this moment on, the package will do its job and bump major versions as well.

Conclusion

Bumping versions based on conventional commiting convention of rules is seen as a good practice in order to have an explicit commit history.
With the help of standard-version we've seen above we are able to automatically bump versions and track changes each time an artifact is released into production.

Special thanks to https://unsplash.com/@csoref for the header image :)

VSCode tips for productivity

Fábio Borges — Tue, 18 Feb 2020 19:56:58 +0000

Hello all, here are some productivity tips for everyday use.

Keybindings

Reload window

For some reason, something that, from time to time, happens is that I get syntax error highlights although nothing is wrong in the code.
For these situations or any of the likes, I've created a key combination to reload the window which acts the same way a reload on an online page would act.

Uppercase and Lowercase

Another one I use a lot, especially when I'm getting classes from Pascal Case into camel case, is to UPPERCASE or lowercase an entire string of text.
I know there's a combination on VS Code for this, however, I like to have my combo.

Zen mode

Love it or hate it. I'm not very keen on this one but I do know a couple of people who like it and use it a lot. This feature allows the user to enter the 'flow state' and focus only on the code - it's really good if you know your way around shortcuts.
You can access the zen mode through the command palette doing cmd + shift + p and write zen mode. To exit just repeat the steps.

Incredible long files

Fortunately, VSCode allows us to search inside our files in a friendlier way than just scrolling through 1000 lines of code.
By doing cmd + p and typing @, we get a list of the current file organized methods and properties that we can select and navigate directly into. If you want an in-depth list, you can use the @:

Go to line

We can also use the go-to command by doing cmd + p and typing :
This one is pretty easy and we do have a keybinding for it but I find this way faster and easier on the brain.

Too much info?

If you find it hard to memorize these commands just "ask for help" by doing cmd + p and typing ?. You'll get a full list of the available commands.

That's all folks, I hope you find my tips helpful.
Do you have any productivity tips to share? Leave it on the comments, I'll be glad to check them out!

Cover photo by Hello I'm Nik 🍌 on Unsplash - Thanks!

My 2019 in a nutshell.

Fábio Borges — Thu, 26 Dec 2019 16:12:58 +0000

Last year, around the same day, I created the classical new years' resolution list, but this time it was different. I went and try to do everything on it.

Read 10 to 12 books this year
I've never been much of a reader and never liked books either. But one lovely day I got curious about what do great minds in my field have in common.
People like Bill Gates, Elon Musk, Steve Jobs, Jeff Bezos, and many others have an interest in reading, side by side with things like waking up early, have a quiet and alone time, pre organize the day and so on.
So I started reading books about personal finance, which is something I'm interested in, and I highly recommend you start with something you will like aswell - I'm not into fiction/romance but that's ok ( I think ).
I then moved slowly to more technical books and the last one I bought was Steal Like an Artist - by Austin Kleon which is a small book with some insights on how to be creative that I found useful for the next topic.

Start freelancing
I always had a crush on front end development but never went after something outside my 9 to 6 job as a full-stack. This year I changed it by doing some freelancing.
The extra money is great, but have you ever done something different for yourself? I've not only improved my skills as a developer but also as a communicator and web designer. Being a freelance made me aware of the importance of organizing my CSS, have a good and simple deploy pipeline, and I started using Figma for the first time. I've also become more aware of my value as a professional which is something everyone should be.

Invest in my work
I bought a couple of online courses to help me improve some specific skillset like angular, react and CSS.
I also had an old beaten laptop which would from time to time get stuck during boot and couldn't really handle my unorganized universe of 1000 tabs on chrome and so I bought myself a brand new MacBook Pro 15''. As a first time using macOS it was a bit of a struggle but everything is fine now, and NPM runs smoother as well. So win-win plus I can now sit on Starbucks working - just kidding!

Minimalism
Oh boy... Let me tell you... Everything I owned I had probably two or three of it. This was turning my home office into an unorganized hell aswell as my life. But not only that, I was trying to do so much at once that I was procrastinating everything around me. So, new year new me, I started cleansing my mindset. I've donated a lot of clothes, shoes, throw away unnecessary stuff like broken chargers and headphones, old parts of laptops, old demo CDs and the biggest thing of all, I scanned all my receipts and invoices and threw every paper on the trash.
There's still a long way to go but I've found myself a bit more productive, more organized and the air is a bit more breathable now.

Financial Education
So after getting some cleansing on my mind, I decided it was time for me to take a short leech on my money spending. I fixed a budget for monthly spend on leisure, house expenses, and investments. Since I started to question myself "what's the value this item can bring to my life" I started buying less and thus spending less, so my monthly budget decreased and I've been able to apply the remaining money to lower some credits I have. Less is more.

Health & Mindfulness
I'm a remote worker so I find myself locked "in the basement" for days in a row. This has led me to a decrease in my immune system and thus my calm and zen posture ended up revealing that I have some sort of fake nervous personality and so I started getting some problems with health. This was the year I started to make this a priority in my life and thus trying to chill a bit more, definitely leaving the house more often and just enjoy life - I must say my new minimalist lifestyle is helping here as well.

So this is it! I didn't plan it, however, I'm finishing this year by writing my first (of many, so I hope) posts on dev.to.
I'll try to keep it going next year but maybe focusing more on web development.
I hope you guys liked this and don't forget it's never too late to start something. You are your only concurrence and enemy, beat your self and become better than yesterday.