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.

Learning Node.js

I’m slowly attempting to learn Node.js. To do that I’m reading Getting MEAN with Mongo, Express, Angular, and Node, playing around with apps on Glitch, and creating a mini-app. I learn best by jumping in head first so I’m finding it helpful to write code for a real app even though I feel lost half the time. 

Node.js has a pretty steep learning curve, so I’m planning to document some of the challenges that I face along the way, even if it’s a simple bug that takes me a few minutes to figure out. The primary purpose of writing these posts is for my own future reference and to help me internalize the lessons I’m learning.