HTML Attributes vs. DOM Properties

Found a good summary of HTML Attributes vs. DOM Properties in Angular documentation:

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

• A few HTML attributes have 1:1 mapping to properties. id is one example.
• Some HTML attributes don't have corresponding properties. colspan is one example.
• Some DOM properties don't have corresponding attributes. textContent is one example.
• Many HTML attributes appear to map to properties ... but not in the way you might think! [such as disabled attribute]

Some more info on MDN's Content vs. IDL Attributes, and W3C Web IDL spec.

Additional notes:

• Attributes are initial values. I wonder if that's how HTML form's reset functionality was implemented.
• Aria attributes (used for accessibility) do not have corresponding properties.
• disabled attribute, doesn't have a value, so the mere presence of the attribute sets it disabled. However, the DOM property for disabled has a boolean value.
• JavaScript/DOM has methods to specifically work on attributes, e.g., getAttribute().

HTML Specification

Why in the world are there two HTML specs?

• W3C HTML Syntax
• WHATWG HTML - The Living Standard

This Wired article has some information on it. Basically, it seems WHATWG will be the new stuff that browsers add, then trickle down to W3C as a snapshot specification.

IDE Fonts

Courier New, anyone?

When I started coding in Windows, I liked the font in Turbo C++ a lot. Then when Andale Mono came out, I switched to that in VS from the default. Then to Consolas when that came out. Then, I used Input Font, which is not a mono spaced font. I can cram more text on the screen and it was still pretty enough and legible. I liked it except in cases where I had to line up multi-line assignments. It did have a little quirk when installing on Windows – it's documented on their site.

Then, as I got to learn React, noticed a peculiar font that had italics for the attribute names. Dan Abramov was using it. Afterwards, I noticed John Papa was also using it in VS Code for Angular. The font is called Operator Mono. So I googled it, and found it to be a bit pricey... But I found an alternative that seems to accomplish the similar effect for free with Fira Code font and Script12 BT font. Fira Code also has different ligatures for common programming operators, though your editor needs to support ligatures (VS Code and Atom both do).

Through this Github discussion, found a font that already combines Fira Code and Script12. So I installed that, and also a theme that supports italics. Here's what it looks like in my VS Code:

Not sure if I like the italics actually, will have to try it out for a bit.

Epilogue

I don't remember the name of the font that was used in Turbo C++ for Windows, so I tried to search for it. Alas, Google is unable to find it. The closest I came to is OCR-A, which seems similar enough, and perhaps it might actually be the font that was used, though being purposefully made for OCR, probably not...

npm Install

I've been using npm without giving much thought... Here's a quick post on a couple of options that I wanted to know more about.

npm install [package name] -g (or --global)

• Installs a package in global mode, and not under your local project/package. For Windows, %APPDATA%\npm (e.g., C:\Users\[Username]\AppData\Roaming\npm). Note that this is not where Node.js and npm is installed, that's usually C:\Program Files\nodejs.
• It's mainly for packages with executables, as they will become available from everywhere, since above directory is added to the PATH when you install Node.js (when installed with default options).
• It does not modify package.json of your current project.

An example – let's install Angular CLI:

• npm install @angular/cli -g

After running the command, in the directory mentioned above:

• ng (for bash) and ng.cmd (for Windows) will be added, so you can run ng from any command line window.
• node_modules\@angular will be added.

npm install [package name] --save-dev (or -D)

The package will appear under devDependencies. This means that when you run npm install in production mode, the package will not be installed.

devDependencies are things you need during development and not necessarily in production, such as a unit testing framework.

You might come across npm --save. This has been deprecated, since it's the default option now – npm will add the package under the dependencies section in addition to installing it under node_modules.

How do you run npm install in production mode?

• npm install --production
• If NODE_ENV is set to production, then simply npm install
• To force, regardless of NODE_ENV variable, then npm --only=prod

You can't have a package in both devDependencies and dependencies.

Production mode is more important for server-side apps, i.e., using Node.js. For front-end, if you're just publishing the files after running through a package manager such as WebPack, probably should still be okay to use them as intended, though may need further investigation...

Some other tidbits

• If you run npm install, npm will traverse up to find the root of your project, i.e., the directory with package.json, and install under node_modules from the directory accordingly. If package.json is not found, it will just use the current directory as root.
• In npm lingo, prefix is the root directory of your project, or the global npm directory if -g is used.

Screenshot of Node.js installation step where you specify that npm global directory should be added to the path.

See also: npm docs - npm-folders, npm-install.