Alternatives to Google Analytics

Over the last few years I’ve been slowing moving away from Google services and products. It was pretty easy to move on from products like Gmail and Chrome, but it’s been tough to get away from Google Analytics.

For a couple months I tried out the self-hosted version of Fathom when it initially launched. It worked, but it was a pain to set up and host. Their new, hosted version looks great, but $14/month is a little steep for someone with a handful of hobby sites.

I just wanted simple, privacy-focused analytics for a reasonable price, but there didn’t seem to be any good options.

A couple months ago, I ran across Plausible in my Twitter feed. I signed up for a free trial and within a couple days I was sold. It was everything I needed. Lightweight and privacy focused analytics for a reasonable price. I purchased the annual plan for $48 and now have it running on three sites.

It’s you’re looking for a Google Analytics alternative, check it out. On the other hand, if you’re still using Google Analytics, you should think about all the free data you’re sending to Google.

Prefilling a Date Input with the Local Date

I’m working on an app that has a date picker and I’d like to prefill it with the current date.

I found Prefilling a Date Input on CSS Tricks, but that code returns a UTC date instead of the local date. After stumbling around for a while, I figured out a solution with JavaScript:

let $localDate = new Date().toLocaleDateString();
$localDate = new Date($localDate);
document.querySelector("#local-date").valueAsDate = $localDate;

toLocaleDateString() converts the date to the local date and then the second line creates a new Date object based on that local date. Without creating the new Date object, I was getting this error:

TypeError: HTMLInputElement.valueAsDate setter: Value being assigned is not an object.

For the record, the date input in my form looks like this:

<input type="date" name="date" id="local-date" required>

Zeit PHP

I have a small PHP project deployed on Zeit that gave me a 502 error after I recently updated it:

502: BAD_GATEWAY 
Code: NO_STATUS_CODE_FROM_FUNCTION

In the logs, I found this error:

./php-fpm: error while loading shared libraries: libcrypt.so.1: cannot open shared object file: No such file or directory

After searching searching the internet for more than a few minutes, I discovered that Zeit changed their PHP builder. In order for older PHP applications to work, the now.json file needs to be updated to use now-php instead of @now/php

As an example, here’s what my now.json looks like now:

{
  "version": 2,
  "alias": "DOMAIN.com",
  "builds": [
    {
      "src": "*.php",
      "use": "now-php"
    }
  ]
}

I discovered the issue on this Github comment:

https://github.com/zeit/now-builders/issues/743#issuecomment-517848979

Learning Node.js 002 – Exporting Projects from Glitch.com

For the last couple weeks I’ve been playing around with Glitch.com. I don’t have much experience with Node.js, so it’s been a good way to learn more about Node.js without having to setup anything locally.

Glitch is great because you can learn a lot by checking out other projects and remixing their code. That being said, there is a pretty steep learning curve with Node.js.  Just to get started, you need to have a pretty good understanding of JavaScript and then you need to learn about npm, view engines, package.json files and so much more.  Glitch.com makes this easier, but there’s still a lot to learn. 

Glitch’s web based code editor is pretty good, but it’s still not the same as using a local editor, so I decided to export my project and develop it locally. It’s easy enough to export a project, but the exported project didn’t work right away.

Starting the project, I got the error:

Error: OAuth2Strategy requires a clientID option

I’m using the passport-oauth package and I discovered that the secrets I saved in the .env file on Glitch weren’t being loaded in my local environment.  Instead of using the .env file in the project, Node.js uses the variables in the .bash-profile file.  You can view those environment variables by adding this line to your project:

console.log(process.env);

To fix the issue with the project exported from Glitch, one option is to move your secrets to the .bash-profile file, but that can get messy, so another option is to use the dotenv npm package.

Add it to your app with:

npm install dotenv --save

And then ensure that it’s referenced in your project with:

require('dotenv').config();

Learning Node.js 001 – Starting an App

Once a shell of an app is created, it can be started with the command node app.js  (assuming that the app’s main file is app.js. Other common names are server.js and index.js)

The alternative way to start an app is with the command npm start. By default npm start will fill look for a start property in the package.json file. For example:

"scripts": {
    "start": "node app.js"
  },

If the package.json file doesn’t contain a start property, npm start will default to node server.js.  Note: this will only work if your main file is called server.js.

The first time I tried using npm start, I got the following error:

npm ERR! Invalid name: "Vert Tracker"
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kevin/.npm/_logs/2018-05-23T22_09_11_616Z-debug.log

Digging around I found that the name property of the package.json file cannot contain spaces or capital letters. After I changed the name to “vert-tracker”, npm start worked. There are other tips on the package.json npm page.