davidosomething.com

/uses-2021

Mon, 29 Mar 2021 20:31:48 GMT

I keep this post updated throughout 2021.
Some of the links below are affiliate links. This means that, at zero cost to you, I may earn a commission if you click through the link and finalize a purchase.

Physical setup

I sit on a limited edition SOHO Premier Soft Pad Management Chair in brown Italian leather with a matte black aluminum frame. My previously chair was a generic padded dining chair, but it broke and now I use the seat as a foot rest.

My desk is a 48”x24” Herman Miller Everywhere Rectangular Table. I wish I had gone with the white finish and legs for the table.

A giant AUKEY mouse pad covers the top, granting unlimited mouse travel, and it’s much nicer to have a soft surface than to place my wrists on the bare desktop.

In the corner of the desk is an Amazon Basics Magazine Rack to hold mail and to-do paper items I eventually have to go through.

I have a nice Poppin file cabinet that doubles as a second seat.

Hardware

Main computer

My primary computer is a Mac Pro 5,1 2010. I bought it in an office liquidation auction in 2016. It’s considered end-of-life by Apple, but with third party support through OpenCore bootloader I’m able to continue updating it.

I upgraded it with a wireless AC/bluetooth 4 card, 48GB of RAM, a SAPPHIRE PULSE RX580, two NVMe drives using PCI-E adapters and several SSDs.

For peripherals, I use

A 31.5-inch wide LED light bar clamped to my desk
A 27-inch Lenovo P27u-10 4K IPS Monitor with a built-in USB hub
A VIVO desk mount holds the monitor
An Apple Magic Keyboard because I got used to the Apple scissor feel
A VicTsing gaming mouse silent click and USB rechargeable. I’ve used at least 5 other silent click mice from Amazon, and this one is so far the winner.
A Fujitsu ScanSnap S1300i scanner because I scan everything important
A Canon PIXMA iP110 printer which is really slim

Everything plugs in to a Belkin 8-Outlet surge protector.

Media computer

I use an Intel NUC 7i5BNH as a secondary computer. It is outfitted with

An ElecGear iNUC-H Vertical Stand to take up less desk space
32GB RAM, which is just adequate these days
A 500GB Samsung 970 EVO NVMe for the OS + /home
A 500GB Samsung 850 EVO SSD for document storage
A Logitech K400 Plus keyboard+trackpad

Phone

I’m an Android user on a Pixel 4a. My particular favorite apps are:

Flamingo for Twitter though I don’t think it’s available any more
Sync Pro for reddit
PocketCasts briefly switched to AntennaPod but now back
Feedly Classic you can’t “mark page as read” with the same ease in the new version
Brave blocks ads and is Chromium-based
Tachiyomi for reading endless amounts of manhua and isekai trash.

Audio

On my main computer, I use Sony MDR7506 headphones that I never put on my head. I use them as terrible speakers even though they’re highly praised studio headphones. They’re connected to a Nobsound NS-08E preamp, which I mostly use for the physical volume knob.

My going-out headphones are Samsung Galaxy Buds+, paired only to my phone.

My work headphones are Bose SoundSport Wireless Headphones, paired only to my work computer.

Watch

White Pebble Time running rebble services. I’ve had two pebbles, both Kickstarter backer editions. I still consider the Time the best smartwatch.

Software

My dotfiles, vimrc, zshrc, and Chrome extensions of choice are in GitHub if that’s what you’re into.

CLI tools I use include:

fd for finding files and directories
fzf for fuzzy finding integrated with git, vim, and my shell
ripgrep for finding and filtering files by contents
zinit for managing my zsh plugins
zoxide a fast implementation of autojump / z

On the mac I use Catalina and am scared of Big Sur. I use iTerm2 because I like its window splitting features above all other terminal emulators.

On the NUC and on a second boot drive on the mac I use Manjaro Linux KDE version. Manjaro has the benefits of Arch Linux (IMO, primarily pacman and the AUR) without having to do the setup for the millionth time. Konsole is my terminal emulator because it is non-electron, supports splitting without tmux, 24-bit color, customizable shortcuts and scrollback.

Editor

I still use the HEAD release of Neovim having moved from Vim years ago.

I made my own color scheme called ”meh.” It caters to what I consider important when looking at code.

My programming font of choice is Mozilla’s Fira Mono.

Note Taking

Standard Notes is my note-taking app for the moment. My criteria are full, audited encryption, markdown support, and automatic syncing. I left Joplin Notes because the WebDav sync was giving me issues (though it could have been my server).

Password manager

My password manager is Bitwarden. I moved off of KeepassXC to make it easier on my family, but they are equally good to me.

File sync and backups

I’ve done my best to stop using Dropbox, just so I have one less account to manage. I use Google Drive for one-off document sharing and syncing app settings on any app that natively supports it.

For everything else I use my Synology NAS. My phone automatically backs up photos to it using DS File.

The NAS is running Gitea on Docker. I have my GitHub and GitLab repos are mirrored in case either of those services go down or missing. On both my NUC and Mac (when using Linux), I have /etc backed up using etckeeper and pushing to a remote repo in Gitea.

Google Drive is synced to my NAS as well. Everything is backed up using restic, which send encrypted, incremental snapshots to Backblaze B2.

/uses-2020

Sun, 22 Dec 2019 04:09:21 GMT

This post is out of date and is for archive/comparison purposes only. See the 2021 post here

Physical setup

My desk is a 48”x24” Herman Miller Everywhere Rectangular Table. I wish I had gone with the white finish and legs for the table.

A giant AUKEY mouse pad covers the top, granting unlimited mouse travel, and it’s much nicer to have a soft surface than to place my wrists on the bare desktop.

I have a nice Poppin file cabinet that doubles as a second seat.

Hardware

Main computer

My primary computer is a Mac Pro 5,1 2010. I bought it in an office liquidation auction in 2016. It’s considered end-of-life by Apple, but with third party support I’m able to continue using it.

I upgraded it with a wireless AC/bluetooth 4 card, 48GB of RAM, a SAPPHIRE PULSE RX580, and an NVMe boot drive along side several SSDs. I use OpenCore bootloader for EFI bootscreen and native Catalina support.

For peripherals, I use

A 31.5-inch wide LED light bar clamped to my desk
A 27-inch Lenovo P27u-10 4K IPS Monitor on a…
VIVO desk mount clamped to my desk
An Apple Magic Keyboard because I got used to the Apple scissor feel
A VicTsing gaming mouse with silent click so as not to wake the baby
Sony MDR7506 headphones that I never put on my head… I use them as terrible speakers even though they’re highly praised studio headphones
Some generic 7 port USB 3.0 powered hub
A USB 3.0 Anker hard drive docking station to access my old HDDs
A Fujitsu ScanSnap S1300i scanner because I scan everything important
A Canon PIXMA iP110 printer which is really slim

Everything plugs in to a Belkin 8-Outlet surge protector.

Media computer

I use an Intel NUC 7i5BNH as a media computer, connected to my TV. It is outfitted with

32GB RAM, which is just adequate these days
A 500GB Samsung 970 EVO NVMe for the OS + /home
A 500GB Samsung 850 EVO SSD for document storage
A Logitech K400 Plus keyboard+trackpad

Phone

I’m an Android user on a Pixel 4a.

My particular favorite apps are:

Flamingo for Twitter though I don’t think it’s available any more
Sync Pro for reddit
PocketCasts briefly switched to AntennaPod but now back
Feedly Classic you can’t “mark page as read” with the same ease in the new version
Brave blocks ads and is Chromium-based
Tachiyomi for reading endless amounts of manhua and isekai trash.

Audio

I use Bose SoundSport Wireless Headphones. I haven’t gone full wireless because I like having the neck wire to hang them from when I’m not wearing them.

Watch

White Pebble Time running rebble services. I’ve had two pebbles, both Kickstarter backer editions. I still consider the Time the best smartwatch.

Software

My dotfiles, vimrc, zshrc, and Chrome extensions of choice are in GitHub if that’s what you’re into.

CLI tools I use include:

fd for finding files and directories
fzf for fuzzy finding integrated with git, vim, and my shell
ripgrep for finding and filtering files by contents
z.lua a fast lua implementation if autojump / z
zinit for managing my zsh plugins

On the mac I use Catalina. I use iTerm2 because I like its window splitting features above all other terminal emulators.

On the NUC I use Manjaro Linux KDE version. Manjaro has the benefits of Arch Linux (IMO, primarily pacman and the AUR) without having to do the setup for the millionth time. And KDE Plasma is pretty. Konsole is my terminal emulator because it is non-electron, supports splitting without tmux, 24-bit color, customizable shortcuts and scrollback. It checks all the boxes for me. Terminator and Termite are my other terminal choices. I am not using them because they are libvte-based and I wanted to stay in the KDE world.

Editor

I still use Neovim having moved from Vim years ago. I follow HEAD since I’m prudent enough read the Gitter room and changelogs.

I made my own color scheme called ”meh.” It caters to what I consider important when looking at code.

My programming font of choice is Mozilla’s Fira Mono.

Notes

For note-taking, I converted to Joplin Notes last year. Joplin is cross-platform including mobile apps; it has markdown support, tagging, and end-to-end encrypted syncing. The desktop UI is a bit drab, but customizable via CSS.

Password manager

My password manager is Bitwarden, and I pay for Premium. I moved from KeepassXC to make sharing some passwords easier with my family.

File sync and backups

I wouldn’t be at a loss if I had re-provision with the same settings and restore my files.

For file syncing and sharing I use Dropbox and Google Drive (e.g. my resume, avatars, etc.). I always assume that things in those cloud services can go public at any time. For super private stuff, I have a Synology NAS I can access.

My cloud files and local photos and documents are synced to my NAS. I send encrypted, incremental snapshots of the synced drive to Backblaze B2 using restic running in a Docker container.

A few of my GitHub and GitLab repos are mirrored to a local Dockerized Gitea server in case either of those services go down or missing. Watchtower keeps my Docker containers up-to-date automatically.

On the OS-level, I keep my /etc backed up using etckeeper, and push to a remote git repo as backup.

Website Rebuild for 2020

Mon, 07 Oct 2019 00:00:00 GMT

The 2020 version of davidosomething.com is built on GatsbyJS. At the time of this writing I am working for Squarespace, a company that provides a website builder and CMS as one of its services, so you might wonder why I am not hosting my blog on that platform. The reason is to branch out my knowledge of the website creation field, both for work research and as an exercise.

Changes since the site’s last iteration

Since the 2016 version, I’ve removed commenting from this site. There’s other ways to share a post and leave notes (including just tweeting me), so I’ve opted not to include it.

The changelog output has not made its way back in, but I will probably re-introduce it later.

Thoughts on the tech stack

The tech stack I’m using is the GatsbyJS build system and framework, React, CSS Modules, typography.js, and GraphQL.

Of those, the one I’d previously never used and I’ve have come to like is CSS Modules. There are some flaws with the @values system, but it’s a nice break from using SASS in personal projects and LESS at work.

I was introduced to typography.js since I started this blog using gatsby-starter-blog. It provides some nice handling of defaults, but it is not possible to combine with other frameworks (i.e., you can’t really import rhythym and scale into your CSS Modules are functions AFAIK).

The GraphQL integration into the GatsbyJS framework has been amazing. I’m using it to query static JSON and all my old markdown files from this blog. It’s so much nicer than the configuration based system that Metalsmith had.

GatsbyJS itself has been very nice. I think the biggest barrier to entry (provided you already know the other parts of the stack) is figuring out which gatsby-*.js file to edit and what they do. I’ve also run into some caching issues during hot reload development, so I typically start with a gatsby clean every time I start a coding session.

Lint your markdown files with gulp‑remark‑lint‑dko

Fri, 22 Jan 2016 00:00:00 GMT

I’ve just published on npm, my gulp plugin to lint markdown files using remark and remark-lint. It’s fully functional right now, and you can install it from npm to start using it in your gulpfile:

npm install --save-dev gulp-remark-lint-dko

I am planning to add more features, which you can follow in the README or help contribute with a pull request.

Here’s a screenshot of the output:

Whitespace settings in Vim

Tue, 12 Jan 2016 00:00:00 GMT

For any good programmer, consistent whitespace is a measure of code-quality. Vim has a lot of built-in settings and features for handling whitespace, and this article will go over those with the examples the Vim help pages lack.

For the purposes of this article, tabs are represented as blocks of the character: ░.

Settings

This section pertains to Vim’s built-in settings flags. You can use :help 'somesettingname' with single quotes from within in Vim to see the full details, so the most useful information I can give is an example of how the setting affects editing. (Why the Vim help pages don’t include this? I don’t know.)

To turn a setting on or off, use set settingname or set nosettingname or (set settingname=0 to turn off numeric settings).

Filetype-local settings

Use setlocal in an autocommand or ftplugin instead of set to make the setting specific to the buffer. Example of using an autocommand to set shiftwidth on JavaScript files only:

autocmd FileType javascript setlocal shiftwidth=2

Note that autocommands are executed in the order they are added, so if a plugin decides to use that same autocommand to change the shiftwidth later, it will override yours. That is why I recommend you using an ftplugin instead.

For the ftplugin version, put the line setlocal shiftwidth=2 into the file ~/.vim/after/ftplugin/javascript.vim, where javascript is the name of the filetype you’re changing settings for.

A good understanding of the order in which Vim runs files and commands will help you debug rogue whitespace settings.

Don’t just copy settings from someone else without understanding what they do.

— Everyone in #vim on Freenode

Persistent file-local settings

To make special cases for a specific file, you can either make an autocommand specifically to match the filename, or use Vim’s modeline feature. You need set modeline somewhere in your vimrc to make sure the feature is enabled.

A modeline is a comment (in the current syntax) at the beginning or end of your file that Vim will parse commands from and execute. By default, Vim assumes the command is set. Here’s an example of setting the modeline in a vimrc file:

" vim: set ai sw=4:

The double quote at the beginning indicates a VimL comment. This will set set autoindent and set shiftwidth=4 for the buffer. The use of the short form is optional.

Display options

These options affect how whitespace appears in Vim. If someone else were to open your file, they might see something completely different based on their display options.

list and listchars

The option set list will turn this feature on. This is used to highlight trailing spaces, differentiate tabs from regular spaces, and show a continuation symbol when you have set nowrap and a line is longer than the window.

My options are:

set list
set listchars=""                      " reset
set listchars=tab:→\ 
set listchars+=trail:·

Note there is a trailing space after the backslash on the tab line (for escaping the literal space symbol). So 4-character-wide tabs look like this:

    normal code indented with 4 spaces and no trailing spaces
→░░░→░░░code indented with two tabs and with two trailing spaces··
  normal code indented with 2 spaces and no trailing spaces

tabstop=NUMBER

A real tab will be this wide. E.g. set tabstop=4:

→░░░text

With set tabstop=8:

→░░░░░░░text

wrap

The wrap setting affects display lines. When it is off, text appears like so:

This option changes how text is displayed.  It doesn't change the text in the buffer, see 'textwidth' for that.

When it is on, text is displayed as:

This option changes how text is displayed.  It doesn't change the text in the
buffer, see 'textwidth' for that.

When you save the file, the text is saved as one long line — this setting is a display setting only.

Whitespace in lines

These settings affect the actual text content of the file.

backspace

This affects what backspace deletes. With the following settings:

set backspace=indent,eol,start

Before backspace:

→░░░→░░░Code that was indented with two tabs

After backspace:

→░░░Code that was indented with two tabs

The indent can be deleted with backspace. Your settings for expandtab, and shiftwidth will determine how many characters are deleted, so if you have a set tabstop=4 and set shiftwidth=2 and you hit backspace, you will delete two spaces from the tab, leaving a two space indent (if expandtab is on).

expandtab

Use spaces instead of tabs. This is a personal coding preference, and sometimes dictated by your language, but I recommend turning this on (set expandtab) for consistency and overriding it using an autocommand or filetype plugin specific to whatever needs to use real tabs (set noexpandtab).

shiftwidth=NUMBER

This affects all of the auto-indenting settings like cindent. When you use >> or << to indent or un-indent a line it will remove this many spaces (or tabs).

Before:

    Unindented when sw=2
    Unindented when sw=4

After:

  Unindented when sw=2
Unindented when sw=4

softtabstop=NUMBER

This tells Vim how many spaces or to insert when you hit <Tab> in insert mode. If you use real tabs, it will insert spaces until the number of spaces is equivalent to a tabstop, in which case it will merge that many spaces into a single tab.

Example when softtabstop=2 and for varying values of tabstop:

  Indented once, ts=4 sts=2
→░░░Indented twice, ts=4 sts=2
    Indented twice, ts=8 sts=2

When the NUMBER is negative (e.g. -1 or -2 or whatever), this will use the value of shiftwidth. Since I use a shiftwidth of 2, I keep it at softtabstop=-2 so I know how much it counts for, even though it is using the value from shiftwidth. This may have side effects on 3rd party plugins that don’t account for negative values, but I’d sooner fork the plugin than change my value.

shiftround

This is for >> and << indenting. Vim will round odd numbers of leading spaces to the nearest shiftwidth.

Example of when shiftround is on, before:

   Three spaces with shiftwidth=4, indent me

After, the line gets indented to 4 spaces since that was the nearest shiftwidth:

    Three spaces with shiftwidth=4, indent me

I have this setting off (set noshiftround) so I can control odd-numbers of indents, particularly for cases like JSDoc blocks, where you have an extra alignment space that you want to preserve:

    /**
     * <-- alignment space left of asterisk
     */

Example of bad unindenting when set expandtab and set shiftround and you use << to unindent the JSDoc:

  /**
    * <-- alignment space left of asterisk
    */

joinspaces

When you press gj in normal mode, vim takes the line below and moves it to the end of the current line. With this setting on, Vim inserts spaces after punctuation.

Before text. _
After text.

Becomes:

Before text._  After text.

When the cpoptions flag has J, it will become:

Before text. After text._

In all examples, the _ is the cursor position.

You probably want to turn this off so you don’t get extra spaces when coding.

Indenting

autoindent

Starting from insert mode with:

    Indented line 1_

Pressing <CR> (Return/Enter) will put you at the next line, same indent level:

    Indented line 1
    _

You probably want this on if you use smartindent.
This setting is modified by smartindent, cindent, indentexpr, and paste.

smartindent

This setting tells Vim to parse your code a little, and based on curly-braces and keywords defined in the indent syntax for the filetype, it will add an indent going from one line to another.

There are built-in exceptions for lines starting with the character #. For no good reason, in my opinion.

Before:

    if (true) {_

After:

    if (true) {
        _

This setting modifies autoindent. It is recommended to use both of them together for consistent behavior.

It is not applied when cindent is on or indentexpr is set.

cindent

This is more programmatic than smartindent and uses even more parsing and some Vim options that can be defined in indent plugins. Your milage may vary with this, so turn it on or off as desired. It produces pretty much the same result as smartindent for C, but might not do anything for other languages where the required Vim options like cinkeys aren’t defined.

This setting modifies the formatting of autoindent.
This setting supercedes smartindent.
This setting is not applied when indentexpr is set.

I leave this off in favor of just smartindent since the languages I work in aren’t always as C-style.

indentexpr

This is typically set by indent plugins (including the ones provided by Vim) to give programmatic rules for indenting. Unless you’re writing custom logic to indent code, you don’t need to set it manually. These settings will override smartindent and cindent, so indent plugins have the greatest priority in determining how to indent.

The indent plugin code for pangloss/vim-javascript is a pretty clear example of how indentexpr works — basically it parses lines of code to determine what the next line’s indent should be.

copyindent

If you have mixed tabs and spaces for some reason, and you’re a strict coder when it comes to whitespace, the mix is probably intentional.

When using autoindent and the copyindent setting is on:

░░░░ ░░░░ code_

Will yield the following on the next line:

░░░░ ░░░░ code
░░░░ ░░░░ another line

When off, you’ll get Vim’s attempt to reconstruct the whitespace:

░░░░ ░░░░ code
░░░░░░░░  another line

This is a good setting to keep on if you like to control your own whitespace.

preserveindent

When this is on:

░░░░ ░░░░ unindentme
░░░░ ░░░░ indentme
░░░░  ░░░░ indentme

And you un-indent your code using << or >>, you get:

░░░░ unindentme
░░░░ ░░░░ ░░░░ indentme
░░░░  ░░░░ ░░░░ indentme

Basically, Vim will keep your original indent pattern if you indent, and remove as little as possible — tabs first, and then spaces. In the last line, you’ll notice Vim detected the tab pattern as <Tab><Space> so it continues to add both every time you indent.

I keep this setting on because I don’t want Vim to change what I probably intentially wrote — which is the only scenario where I would intermix tabs and spaces.

formatoptions and cpoptions

You definitely need to tweak these to your liking, but I think Vim’s help info is sufficient in this case since some visual samples are provided. Check out :help formatoptions, :help fo-table and :help cpoptions.

Plugins

Vim’s built-in whitespace options may be enough for plain text and C code, but for other languages, Vim supports indent plugins. There are many indent plugins that come bundled with vim, and to automatically enable them use this line in your vimrc:

filetype indent on

You may have filetype plugin indent on, which also loads the rest of the filetype related plugins, so that’s fine. If you’re using vim-plug to manage plugins, it will automatically turn the setting on after plugins have loaded, so don’t include the line in your vimrc or things will load twice!

EditorConfig

I recommend using the EditorConfig standard for anyone working in open-source or collaborating with others.

EditorConfig lets you define whitespace standards in an .editorconfig file (but it’s not a linting plugin!).
The rules are grouped by file extension , and it will set the expandtab, shiftwidth, tabstop, softtabstop, and other settings for you after you open a file with a definition in the .editorconfig file you provide.

Many non-Vim text editors and IDEs support EditorConfig, too. This is especially nice because you can keep the file along with your project and other EditorConfig users will automatically be conforming to your whitespace standards.

There are three EditorConfig plugins for Vim. The official one, editorconfig/editorconfig-vim requires Vim to be compiled with Python support (or takes some configuration to use a binary), so check in command mode (:has('python') or :has('python3')) or starting vim with the --version flag:

vim --version

An unofficial one, sgur/vim-editorconfig, is written in pure VimScript so it is technically slower, but for something so simple it is unnoticable. I use this one myself.

There is another unofficial EditorConfig vim plugin written in pure VimScript: dahu/EditorConfig — but it is in alpha and the implementation does not include all the EditorConfig features. Instead, it provides a autocmd hooks so you can implement your own interpretation for things it does not implement like trim_trailing_whitespace and insert_final_newline. I’ve checked out the source code (as I have for all plugins I use) and it’s quite well written so if you want to implement the other features (or don’t need them), it is a viable option.

editorconfig/editorconfig-vim is the official plugin
sgur/vim-editorconfig is the unofficial one that I use
dahu/EditorConfig is another unofficial one with autocmd hooks

Auto-determine whitespace settings

As an alternative to editorconfig, Tim Pope’s plugin tpope/vim-sleuth will run through the current file or similar files and try to automatically determine what expandtab, shiftwidth, etc. settings were used on them during creation and set those on the current file. Another option is ciaranm/detectindent.

tpope/vim-sleuth detects and applies settings on file open
ciaranm/detectindent detects when you run :DetectIndent

Better indent visibility

The listchars option is helpful, but sometimes it gets hard to look at symbols, or you need a better way to distinguish your current indent level. There are two good plugins that can provide you with this. Check the links to their GitHub repos for screenshots.

nathanaelkane/vim-indent-guides changes the background color at each level of indent. I use this one and toggle it on/off as desired using its built-in commands.
Yggdroot/indentLine actually inserts symbols at the start of each indent. This may have some performance problems on large files though, so I’d be wary of it.

Better whitespace visibility

The plugin ntpeters/vim-better-whitespace, similar to nathanaelkane/vim-indent-guides, uses syntax groups to match whitespace. This plugin can set up very visible background colors for whitespace, making sure you don’t miss anything.

ntpeters/vim-better-whitespace

Line splitting

For a bunch of programming languages, you can put code all on one line. Using native Vim, you’d have to manually press <CR> at points to properly break it up into several lines (sure, you could automate it with macros or regex, but every time is different).

The plugin AndrewRadev/splitjoin.vim adds mappings to automaticaly do this for you (for certain syntaxes only). Check out the plugin’s README to see visual examples, and doc/ on how to configure it.

AndrewRadev/splitjoin.vim

Alignment

There are some plugins that will reformat your code for you by adding whitespace to align things together. See each page for examples:

My Vim setup

You can dig through my Vim configuration on GitHub. My whitespace settings and the plugins I use are all in the main vimrc file, and their configurations are interspersed into plugin/, ftplugin/, and after/*/ to cope with the order in which Vim loads files.

my Vim configuration on GitHub

Setting up Vim for JavaScript development

Sat, 09 Jan 2016 00:00:00 GMT

Before you read any of this I will caveat with the fact that Vim is perfectly adequate for modern JavaScript development without plugins. The Vim runtime comes with syntax highlighting and omni-completion already, and you can even configure Vim as a task runner without plugins.

This is geared towards people who already know how to use Vim. E.g., if you understand minutiae like the difference between set autoindent and set indentexpr, and have found neither to your liking, then read on. Otherwise, I highly advise you learn a little more about what the standard Vim runtime comes with.

Installing plugins

I recommend using vim-plug to install plugins. It’s simple, works on both Vim and Neovim, and can perform operations asynchronously.

vim-plug

Syntax

Vim comes with a JavaScript syntax file. It is automatically loaded when you open up a JavaScript file (where the value of filetype is javascript).

By default Vim doesn’t automatically detect filetypes, so if you aren’t using vim-plug (for which the call to call plug#end() enables this), you’ll need to enable it manually by adding this to your vimrc:

filetype plugin indent on

This will enable filetype detection, running filetype specific plugins, and loading filetype specific indentation settings.

You may also need to enable syntax highlighting in your vimrc file if you’re not using vim-plug. To manually enable syntax highlighting, add the following line to your vimrc file:

syntax enable

Plugins that provide better syntax support

The standard JavaScript syntax highlighting is typically adequate, but you may want more features such as ES2015 support, or better distinguishing of keywords.

There are quite a few options:

pangloss/vim-javascript
- Includes custom indent settings. These indent settings are also the ones included in the Vim default runtime now, and the one in the plugin may be trailing what comes with Vim (i.e., Vim has a newer version of the same indent file!)
- Adds special concealing symbols so to make your code pretty at a glance
- Last updated April 2016 with additional ES2015 support (better arrow function and highlighting among other things) and some regex performance updates.
sheerun/vim-polyglot
- This is a plugin that bundles a bunch of language syntax plugins into one. It includes pangloss/vim-javascript at the latest version, as well as some other plugins like mxw/vim-jsx. Worth checking out if you don’t want to maintain syntax plugins on your own, but you should double-check to make sure you aren’t manually adding the bundled plugins outside of the pack (resulting in having the plugin twice).
jelera/vim-javascript-syntax
- Does not include custom indent settings (not that you need them…)
- Updated about once a month according to the GitHub contributors graph
othree/yajs.vim
- This is a fork of jelera/vim-javascript-syntax
- Does not include custom indent settings (again, you might not need one)
- Updated very often to keep in line with ES specifications
bigfish/vim-js-context-coloring
- This is an interesting new method of syntax highlighting. It picks out function scopes from your program by running it through a node.js binary that runs a JavaScript parser and assigns a color to the scope. Things within that scope are assigned a color. Because it requires in-depth parsing of your code, it may not color your code when it is incomplete (i.e., the syntax is not yet valid).
- This syntax plugin can be used in combination with any of the above, and you can toggle it on and off.

With the exception of vim-js-context-coloring, all of these provide ES2015 (ES6) and JSDoc support to varying degrees, which Vim lacks by default. I personally use and recommend pangloss/vim-javascript purely because it has started active development again. I have not experienced any issues since switching to this from othree/yajs.vim.

othree/yajs.vim with es.next.syntax.vim might better suit your needs if you use ES2016 (ES7). The author also writes a few other plugins that can be used in conjunction with it (although they may work with the other syntaxes, too, depending on the syntax groups provided). I’ve used this plugin extensively in place of the default syntax and haven’t had any problems.

Using vim-plug, I recommend installing the plugin like this:

Plug 'othree/yajs.vim', { 'for': 'javascript' }

The additional requirement at the end makes sure the syntax plugin is loaded in a Vim autocommand based on filetype detection (as opposed to relying on Vim’s runtimepath based sourcing mechanism. This way the main Vim syntax plugin will have already run, and the plugin’s syntax will override it.

Plugins that provide better indentation support

Vim’s bundled JavaScript indent may be enough for you, especially if you use a strictly C-style whitespace (Vim’s C-style indent options is even called cindent). Vim, as of August 26, 2016, comes with a modified version of the pangloss/vim-javascript indent rules that does not include the reformatting gq action. This means 99% of people probably won’t need to change their indent file.

Some notable options in this case are:

pangloss/vim-javascript
- Using this entire syntax plugin will provide you with a more JavaScript-y indent for things like switch/case and multi-line var declarations.
- This indent plugin has a side-effect in that it also changes the format expression — that is, if you highlight a block and use gq to reformat it, it will re-indent the code using this plugin as well.
- The Vim runtime (stuff that comes with Vim) may include a newer version of this indent file that does not have the modified gq.
gavocanov/vim-js-indent
- I don’t recommend this one, but I’ve listed it here because you’ll probably find it and have questions. The author no longer uses it, so it should not be considered.
- This is the indent portion of pangloss/vim-javascript, ripped out into its own plugin.
- There are modifications to it, diverging it from pangloss/vim-javascript, notably support for the syntax group names in othree/yajs.vim. That helps it pick out keywords and when you are inside comments if you are using othree/yajs.vim.
- The format expression from the pangloss plugin has been removed.
itspriddle/vim-javascript-indent
- This is a git mirror of Ryan Fabella’s indent script
- It mostly detects closing brackets and parentheses and indents based on what it finds.
jiangmiao/simple-javascript-indenter
- An indent plugin with an option for alignment under functions.
jason0x43/vim-js-indent
- This is a somewhat new (last updated 2014, as of this writing) indent script that also has some TypeScript support. It is based on an older indent script by Tye Zdrojewski and the default JS-in-HTML indent logic that comes with Vim.
- The indent logic starts with normal cindent styles and adds special cases for comments, JSDoc, arrays, and switch/case.

Your best bet is to stick with what comes with Vim by default, and only try out the others if your coding style does not match what the rest of the JavaScript community is converging towards. If there’s a quirk, it is probably better to submit an issue with the pangloss/vim-javascript repo.

During JavaScript development you may find yourself editing a lot of other filetypes that plain JavaScript.

es.next / ES2016 / ES7 support

othree has a syntax plugin that provides support for planned, but not-yet-final EcmaScript features: othree/es.next.syntax.vim. I personally don’t use it since I currently stick to the ES2015 feature set at most.

othree/es.next.syntax.vim

JSX support for React

If you write React and use its optional JSX syntax, adding the following plugin will provide you with syntax highlighting for those inline XML-nodes:

Plug 'mxw/vim-jsx'

This plugin requires a JavaScript syntax plugin from above to define certain JavaScript regions. It specifically mentions pangloss’ extension in the docs but actually supports any of them.

mxw/vim-jsx

JSON

A lot of things use JSON for configuration, so I recommend elzr/vim-json for that. Check out its options, though; I don’t like some of the defaults so I turn them off, but you might want them. Install with:

Plug 'elzr/vim-json'

elzr/vim-json

JSDoc syntax highlighting

If you document using JSDoc, all of the syntax plugins above support JSDoc highlighting already. There’s a plugin called othree/jsdoc-syntax.vim that pulls that support out of othree/yajs.vim, but it is only for adding JSDoc support to other languages like TypeScript.

othree/jsdoc-syntax.vim

JSDoc auto-snippets

The plugin heavenshell/vim-jsdoc can automatically insert JSDoc comments for you if your cursor is on a function definition. It’ll check for the function name, arguments, and add the doc-block comment for you.

I use this plugin quite often (I actually have a fork of it with some additions but hopefully they get merged into the upstream).

heavenshell/vim-jsdoc

jQuery plugins

Files named jquery.*.js are typically jQuery plugins. There’s a specific syntax highlighting plugin for such files: itspriddle/vim-jquery, but it’s pretty old and you’ll have better support combining an up-to-date syntax plugin with the JavaScript libraries plugin in the next section.

itspriddle/vim-jquery

JavaScript libraries

othree has a syntax plugin, othree/javascript-libraries-syntax.vim, that supports special highlighting of functions and keywords for various libraries such as jQuery, lodash, React, Handlebars, Chai, etc. For an extensive list, see the README at the plugin’s homepage.

I personally do use this plugin.

othree/javascript-libraries-syntax.vim

Code completion for Vim

This is what you might know as “autocomplete” or “Intellisense.”

Vim has a built-in completion feature that you can trigger by just using <C-X> (that’s the control-x key) and then another control-key sequence like <C-F> to complete filenames or <C-O> to trigger omni-completion. You should try it before trying to install a bunch of plugins to modify this behavior.

Omni completion

I won’t go into too much detail about this since it isn’t JavaScript specific.

Vim includes basic code completion built in. See this wikia article for information on how to use that. The gist is that the completion system will run a function, the omnifunc, to populate autocompletion pop-up with results.

To use the default completion function, you may need to add this to your .vimrc file:

autocmd FileType javascript setlocal omnifunc=javascriptcomplete#CompleteJS

You might not need to add it if the <C-X><C-O> trigger already works for you, it depends on what version of Vim and the Vim runtime you have.

For even better completion, consider using a plugin like Shougo/neocomplete.vim or Valloric/YouCompleteMe. On Neovim, an option is Shougo/deoplete.nvim.
These plugins will add features like automatically popping up the completion menu, caching of keywords, and integration with other sources of completion than what’s in the current Vim buffer (allowing for multiple omnifuncs).

For portability across my systems without needing a recompile, I use Shougo/neocomplete.vim. Shougo’s plugins and YouCompleteMe both offer roughly the same feature set, though, so whatever might be missing in one can probably be configured into it.

With Shougo/neocomplete.vim, using multiple sources of completion can be done by providing a list of function names like so:

  let g:neocomplete#sources#omni#functions.javascript = [
        \   'jspc#omni',
        \   'tern#Complete',
        \ ]

I won’t guarantee that the above works, since the plugins get updated regularly and neocomplete does not like omnifuncs that move the cursor around when the function is executed.

Extended omni-completion

The plugin 1995eaton/vim-better-javascript-completion provides a somewhat up-to-date JavaScript with HTML5 methods (e.g. localStorage and canvas methods).

This plugin creates a new omni-completion function, js#CompleteJS, and replaces your current JS omnifunc with that. That means you’ll have to use a completion plugin or write some VimL yourself if you want to use it in conjunction with another omnifunc like TernJS in the next section.

1995eaton/vim-better-javascript-completion

Code-analysis based completion via TernJS

TernJS is kind of like IntelliSense if you’ve ever used Visual Studio, or like the autocompletion for many very robust IDEs. It parses your code and extracts various symbols, like function names, variable names, and values.

The official vim plugin can also show you function signatures (what parameters parameters it expects) and can extract values from related files (e.g. CommonJS require()‘d files) if you configure it to do so (via a .tern-project).

The completion is provided to Vim’s auto-completion engine via an omnifunc, tern#Complete. Again, you’ll have to setup your omnifunc appropriately to use TernJS results instead of the default omni-completion results.

Installing via vim-plug, which can run additional commands before plugin installation, is done like this:

Plug 'ternjs/tern_for_vim', { 'do': 'npm install' }

This will install its npm dependencies for you (Tern runs a node-based analyzer in the background while you’re editing).

I use this plugin with many of its extra features turned off, just keeping the completion.

ternjs/tern_for_vim

Function parameter completion

othree has a plugin called JavaScript Parameter Complete that detects when you’re inside a function argument and provides some common autocomplete suggestions for it. This is not a feature that TernJS provides, since Tern only adds existing symbols. For example, if you’re writing an event listener, it’ll suggest things like click, and mouseover for you. You can see all the suggestions it provides in its GitHub source. Install the plugin via:

Plug 'othree/jspc.vim'

On load, the jspc.vim plugin automatically detects whatever omnifunc you already have set as your default. It wraps it with the parameter completion, and falls back to your default if you are not in a parameter completion. Because of this you should specify jspc#omni instead of whatever your default completion is (typically javascriptcomplete#CompleteJS).

othree/jspc.vim

Jumping between CommonJS modules

The plugin moll/vim-node adds keybindings like for jumping to files in your CommonJS require statements.

Plug 'moll/vim-node'

moll/vim-node

CTags are lists of all symbols in your projects (function names, variable names, filenames, etc.). Vim provides ctag support by default, with keybindings to jump to declarations and definitions, and there are a slew of plugins (e.g. ludovicchabant/vim-gutentags) that can auto-generate the tags file for you. Using majutsushi/tagbar, Shougo/unite.vim, ctrlpvim/ctrlp.vim, or a bunch of other plugins (and plugins that work with them — plugin-plugins), you can browse through those tags.

Of particular note on the generation side is ramitos/jsctags, which will generate ctags using TernJS.

Personally, I find ctags too annoying to use since the files need to be regenerated to search them (except with majutsushi/tagbar which runs ctags on every open, but only for the current file). Usually just using git grep or the_silver_searcher is adequate, and there are plugins for those, too (out of scope for this article).

ramitos/jsctags

Linting

While there are actually JSHint, JSLint, eslint, etc. runners for Vim, for your own sanity just use scrooloose/syntastic. It supports a variety of syntax checkers, but you may need to install them first. For example, for eslint support, which is the standard these days, npm install -g eslint first. Refer to syntastic’s wiki page on configuring various JavaScript linters.

Syntastic’s pitfalls are that it is large (it is essentially a linter framework for Vim) and it doesn’t run asynchronously (doesn’t mean it is slow though — depends on the speed of the lint program).

You could alternatively use Vim’s built-in makeprg, which can run any program and output the results to Vim, but you miss out on things like using multiple makeprgs at a time (e.g. JSCS, eslint, and the flow type checker at once) and grouping results. Syntastic actually uses makeprg under the covers, so besides the minimal overhead of configuring some variables it really isn’t any slower.

There’s osyo-manga/vim-watchdogs, which runs linters asynchronously, but the docs are only in Japanese. The plugins Shougo/vimproc.vim and tpope/vim-dispatch can run any tool async, but they aren’t easily configurable as lint-runners. If you follow modern JS design patterns, your JavaScript files should ideally be small modules so running linters asynchronously won’t provide noticeable benefit.

If you’re running Neovim, neomake is an option that’s gaining popularity. It makes full use of Neovim’s asynchronous job support.

Formatting

Vim has a built-in re-formatter for whitespace. Visually select some text and use the = key to re-indent all of it.

For minified JS, there’s a vim plugin, vim-jsbeautify, that can run your code through jsbeautifier for you. I personally don’t use this and prefer to go to the jsbeautifier website, copying and pasting it there if I need to un-minify something.

There’s also Chiel92/vim-autoformat, which supports formatters for many different languages. Of note is jscs and js-beautifier support.

My Vim setup

You can dig through my Vim configuration on GitHub. Please note that this article was written a while ago, and since then I’ve completely switched over to Neovim so a lot of the configuration may not apply to you. The plugins I use are all in the main vimrc file, and their configurations are interspersed into plugin/, ftplugin/, and after/*/ to cope with the order in which Vim loads files.

my Vim configuration on GitHub

Rebuilding davidosomething.com as a static site

Tue, 29 Dec 2015 00:00:00 GMT

I’ve rebuilt my website from the ground-up for the new year, finishing it just in time. This site is now fully static, templates in Handlebars syntax and posts written in Markdown are combined into plain old HTML, where WordPress and PHP were previously providing the templating and storing the post formatting as HTML in a database.

The new stack

Replaced PHP templating with Handlebars
Replaced WordPress serving with Metalsmith generation
Replaced MySQL storage engine with Markdown files in git

There is no more ruby dependency since I am using node-sass instead of ruby-sass and sass-lint instead of the scss-lint gem.

JS-wise I am using es2015, but not really using any of its cool features except arrow functions and dynamic templating. Metalsmith uses generators, so it requires either node version 4.2+ or 0.12 with the harmony flag on; I opted to use node v4.2.

Migrating from WordPress

There was a brief period of time where I secretly added a query parameter to the WordPress version of this site which would cause it to spit out the raw contents of each post as plain text. I only had 40 posts so it wasn’t a big deal to grab each one and reformat them into Markdown using an HTML to markdown converter. I output the post meta data into YAML format above each post and saved it out as the frontmatter for each new markdown file.

The interim scripts I used to clean up the PHP to HTML to Markdown files are left in the github repo in bin/. It’s one of the few times I’ve ever decided to use PHP from the command-line, and also the only PHP in the repo.

SEO

Getting rid of WordPress meant that I would have to do a lot of plugin-provided SEO work myself. I’ve fully marked-up this site using schema.org Microdata. I prefer that over JSON-LD since it is more specific regarding which DOM node represents an entity. Twitter cards, OpenGraph tags, standard meta tags and site validation are all trivial in comparison to the verbosity of Microdata.

Templating

I redid the HTML templating with Handlebars, which is amazingly clean compared to jumping in and out of PHP tags. If you’re doing that in WordPress, consider using twig or something - I really don’t know how anyone can live like that.

Setting up Metalsmith

Metalsmith is like gulp in that it is pretty much just a task runner. Or maybe it is more like broccoli in that it works on a directory (tree) rather than on a stream.

You give Metalsmith the path to your markdown files (or any files), and then tell it to use(someplugin()), which will transform those files. This is not exactly a functional map operation, but it works similarly, and the plugins basically provide a function that serves as the map iteratee.

Despite Metalsmith providing its own CLI tool and being capable of running Gulp plugins, I opted to use it as a JS module from within Gulp. It’s just easier to remember gulp html to generate my html since it is mentally the same as gulp css and gulp js for those respective build steps. Also my CSS task actually operates on two different streams so it was worth keeping Gulp around.

Future plan

I’m looking to switch to gatsby — a react based static site generator. Basically all this does is use react templating instead of handlebars, and uses react’s output to static html to generate the file. Converting handlebars templates to react is trivial (it is practically just wrapping the handlebars template in some React code) and this will have the added bonus of hot-reloading for previewing posts.

Open source

The site source is on github. Kinda nice that there’s nothing to hide (database pws, dot-env files, whatever), now that there’s no backend.

grunt-wendy – CasperJS for GruntJS

Sat, 19 Sep 2015 00:00:07 GMT

grunt-wendy is my latest Grunt plugin. It’s a CasperJS test runner with customizable filtering and formatting options, which CasperJS alone lacks.

Installation

npm install --save-dev grunt-wendy

See the docs and contribute to grunt-wendy on the GitHub repository here: grunt-wendy on GitHub

VS others

Compared to iamchrismiller/grunt-casper and ronaldlokers/grunt-casperjs, the top two Grunt CasperJS test runners (all others are no longer maintained), this task:

adds formatting options to format CasperJS’ output
adds filtering to filter out unwanted CasperJS output
adds option to not fail on conditions — e.g. just output a warning when there are dubious or skipped tests
is version locked to PhantomJS 1.9.7 via the node phantomjs 1.9.11 module — this is a troublemaker for a lot of errors with the other tasks
fully exposes the casper cli (iamchrismiller’s uses options only), including allowing custom test runner instead of just casper test (neither of the others do)
currently maintained by original developer (ronaldloker’s is not, and although pull requests are merged by @gorillamania other chores are not guaranteed: changelog, bump, npm publish)

What’s next?

Planned additions are:

SlimerJS support for gecko (use iamchrismiller’s if you need this) and possibly trifleJS support for IE.
Optional polyfill auto-injection for Function.prototype.bind, since PhantomJS 1.9.7 doesn’t implement it.
Inclusion of other output formats for reporting besides CasperJS’ included xunit xml file

git-my

Sun, 29 Mar 2015 22:39:39 GMT

Git doesn’t track who created branches. This makes it difficult to keep track of your own branches when you have a lot of them checked out locally.

To remedy this, I wrote a shell script that gets all the remote git branches and filters them out based on the last committer. It then lists the ones where you were the last committer.

You can find the script here:
https://github.com/davidosomething/git-my

Here’s a screenshot of it in action:

Linux on the Lenovo Thinkpad W510 – Part 3

Thu, 30 Oct 2014 21:45:11 GMT

The NVidia drivers after 343.22 no longer support the NVidia Quadro FX 880M GPU for the ThinkPad W510 so I had to switch to legacy drivers (340-xx).

To get everything working again, I make some changes to my kernel mode settings and my xorg.conf. In /boot/syslinux/syslinux.cfg and /etc/xorg.conf.d/20-nvidia.conf I am now using this:

20-nvidia.conf

Section "Monitor"
    Identifier     "Monitor0"
    VendorName     "Unknown"
    ModelName      "Unknown"
    HorizSync       28.0 - 33.0
    VertRefresh     43.0 - 72.0
    Option         "DPMS"
EndSection

Section "Device"
  Identifier "Nvidia Card"
  Driver "nvidia"
  VendorName "NVIDIA Corporation"
  BoardName "Quadro FX 880M:

  #Option "NoLogo" "true"
  Option "RegistryDwords" "EnableBrightnessControl=1"

EndSection

Section "Screen"
    Identifier     "Screen0"
    Device         "Device0"
    Monitor        "Monitor0"
    DefaultDepth    24
    SubSection     "Display"
        Depth       24
    EndSubSection
EndSection

syslinux.cfg

LABEL archnvidia
    MENU LABEL Arch Linux (NVidia)
    LINUX ../vmlinuz-linux
    APPEND root=/dev/sda1 rw nomodeset nouveau.modeset=0
    INITRD ../initramfs-linux.img

And in the syslinux.cfg the line DEFAULT arch is now DEFAULT archnvidia to default to the new kernel settings.

How I Work (2014)

Wed, 11 Jun 2014 21:35:24 GMT

Creating a website is just not as simple as it used to be. In order to do things right, I need all kinds of tools: compilers, linters, package managers, optimizers and minifiers, etc. Aside from that I need to consider things like portability, organization, and maintainability.

I just started a new job so I’ve had some time to think about the cleanest way to get everything installed and organized. I follow some basic rules to keep my environments clean. Here are the principles I follow and the reasoning behind them:

Install as many of the dependencies as possible in the userspace.

That is, don’t run npm or bower or others as root / with sudo. This is important because I might be deploying to a shared host or I might run into file permissions problems if my files/binaries are owned or run as root.

Furthermore, if something happens to an executable npm package — like grunt gets hacked so that it deletes the filesystem — I don’t want to run it as root.

On OSX, homebrew is pretty much the only thing I need to install with sudo.

Don’t use system or system package manager binaries.

The versions of Ruby and PHP that comes with OSX are outdated. The ones in the apt sources or pacman may be outdated, but more than likely they don’t match the ones on my server environment.

To get around using the system/system packaged tools, use environment tools like nvm for node (my choice because it’s usually already on CentOS hosts), chruby for ruby, phpenv for php, and virtualenv for python. You may need to install these with sudo so they’re available globally.

There are alternatives for each besides the ones I listed, but the important part is once they’re installed I can use them to install the version I need. Also, they install their respective binaries in the userspace (so I can use npm, gem, composer, and pip without sudo), which ties back into the previous rule.

Everything external needs to be easily upgradable

For instance, it should be trivial to upgrade JavaScript and CSS frameworks. That should be as simple as doing a bower update or composer update, or jam or npm or bundle, whichever you’re dealing with. The hard part should be fixing the things that break after the upgrade.

Another big thing to know: you can specify almost ANYTHING (URLs to individual files, git repositories) as a dependency in bower, bundler, composer, and npm. If you didn’t write it, consider using a package manager to manage it. Whether or not you keep it in version control, it makes it easier to find the original copy.

Only commit clean code

To ensure this, there are linters for every language. I don’t make a big deal out of committing code that doesn’t do what it’s supposed to (sometimes I commit code just to save it — I can squash the commit later before issuing a pull request), but if the indentation is wrong it will be a lot harder to fix.

Adding a lint task to a pre-commit hook is a good idea. So is running the lint tasks through some filewatcher like grunt watch. Neither is mandatory if you’re using an editor with built in linting (e.g. Vim with Syntastic or Sublime/Atom/Brackets with the right plugins) and you’re good about clearing the errors/warnings before you save and commit.

I also run the linter during the build phase on deploy and fail builds on poor code.

Don’t run sites off your system

Welcome to the new world. I use vagrant for everything now, and that’s considered old-school (because it’s slow and memory intensive). The new school way is to run dev servers (even local ones) off of docker. Docker makes creating new servers as cheap as making git branches. On my Linux box I actually plan on running docker with dokku through a VirtualBox anyway, just so I can limit memory and CPU usage more closely.

Again, this is a way to ensure my dev environment mirrors the production server as closely as possible. It also keeps my system lean — I can shut down the VM when I’m not doing dev work and I’ll reclaim all the memory in one command: vagrant suspend. This beats having to stop the nginx, apache, php-fpm, unicorn, etc. processes one-by-one (or writing a shell script to do it). Finally, committing a Vagrantfile or dockerfile with my repo means any other developer can get a working version of the project up and running easily.

Create a developer bootstrap script

It’s simple, it should get a developer up-and-running. Here’s an example:

composer install  # gets framework/plugins/etc.
bundle install    # gets sass/compass
npm install       # gets grunt and plugins, jshint, etc.
vagrant up

The vagrant up command runs the provisioner (chef, puppet, or docker) and triggers a build (run your grunt/gulp/npm/etc. tasks). There’s tools to get a provisioner setup and repos examples on GitHub so you don’t really have to learn those devops DSLs. I prefer Chef for its structure, though.

Check out PuPHPet or rove.io for custom setups, or search GitHub for stacks (even in ansible or salt if that’s your thing).

Branch and test the branches

With my site running through a VM or docker I can easily stage branches locally. A separate shallow git clone can be used if I wanted two instances running side by side. I just change the VM’s port for the branch clone.

I run a local DNS to map my local dev sites, so that’s one challenging thing to manage. In order to remedy that I will eventually set up dokku or a PaaS-like platform such as LayerVault’s Divergence. These would allow me to reach my branches at dev subdomains like newfeature.mysite.dev.

Directory structure

The directory structure I typically use now is something like the below for a WordPress site. Note that anything that can be retrieved or generated is typically not kept in version control (e.g. sqldumps, bower components, node_modules, compiled css, composer packages, etc.).

This is not a rule — some servers don’t allow you to run binaries so your options are either commit the dependencies or upload them from a separate server as part of the deploy script. It’s sometimes advisable to do the latter if you don’t want to be dependent on a dependency archive (packagist/npm/rubygems might be down and you still need to be able to build a mission critical app).

Example for a WordPress site

This is what I use for single-server WordPress sites. For multi-server, or when other kinds of scaling are involved, I’d break it up even more.

- .git/
- assets/  -- PSDs and stuff (versioned separately or symlinked to dropbox)
- sqldump/ -- backups (generated on deploy and kept in S3, glacier, dropbox,
etc.)
- www/ -- work from here
    - config/ -- capistrano, chef cookbooks, etc.
    - log/ -- I put all server logs (error.log, cachegrind, etc) here
    - migrations/ -- custom sql migrations if this were a custom app
    - node_modules/ -- if using any node modules not part of theme
    - public/ -- this is the webroot
    - config/
    - content/
        - themes/
            - mytheme/ -- for redistributable themes, I sometimes keep these in
              a separate repository and use composer to pull it into
              a main project as a dependency, or as a git subtree
                - node_modules/
                - build/
                - components/
                - fonts/
                - img/
                - js/
                - sass/
                    - common/
                        - mixins, variables, extends, fonts, icons
                    - layouts/  -- grid, nav, things that modify sets of modules
                    - modules/  -- media unit, post unit, header, footer
                    - pages/    -- page specific
                    - vendor/   -- 3rd party grids, h5bp, copied css from components/
                - lib/ -- server side
                - release/ -- compiled build ends up here
                    - css/
                - tests/
                - .agignore -- because I use the_silver_searcher
                - .bowerrc -- set build/components as the components dir
                - .gitignore
                - .jshintrc -- for portability, set here instead of in gruntfile
                - .sass-lint.yml -- ditto above
                - Gruntfile.js
                - bower.json
                - config.rb -- compass config
                - package.json
                - style.css
        - uploads/ -- usually a symlink to shared folder between releases
    - plugins/
    - wp/
    - Capfile -- I use capistrano and script the build there
    - Gemfile
    - Gemfile.lock -- sometimes in version control even though it is generated
    - Vagrantfile
    - composer.json
    - composer.lock -- sometimes versioned
    - package.json
    - wp-cli.yml
- .gitignore
- README.md
- TODO.md

Linux on the Lenovo ThinkPad W510 – Part 2

Thu, 29 May 2014 18:25:31 GMT

I’m leaving Linux Mint 16 behind. The RC for Linux Mint 17 is out so maybe that will fix some things, but the main problem I’ve had is with installing packages. Apt just doesn’t cut it, especially when I think back to when I was using ArchLinux. So I’m going back to Arch and the next post will be about that.

Apt’s greatest downfall is that as you add PPAs and when you start needing multiple architectures, the dependency chain breaks and is almost impossible to fix.

Hardware Upgrades

Since I got the laptop, I’ve made some upgrades:

I’ve upgraded the RAM to 16GB.
I’ve completely replaced the keyboard with a new one since I got a refurb. The springy feeling is much better now.
I took apart the casing and replaced the laptop display with a FHD one, 1920×1080. This guide helped.
I replaced the optical drive with a HDD caddy from Lenovo and put a second 240GB SSD in there.

Who says a laptop isn’t upgradable? The screen in particular was super easy and worthwhile.

Display Calibration

One of the things I’ve yet to figure out is how to use the display calibrator. The ThinkPad comes with a Huey Pro in the palm rest that is supposed to detect the colors and calibrate the screen when the lid is closed. I’ve installed DispCalGui but it goes straight to a gray screen and I’m pretty sure the screen is turning off when I close the lid. The Huey Pro is a detected device, though, so I’ll keep looking into it.

Software

The ThinkVantage button can be mapped using the program tpb. I’m mapping it to open a gnome-terminal. Can’t think of anything else I’d use it for.

Linux on the Lenovo ThinkPad W510

Thu, 01 May 2014 22:15:13 GMT

I bought a crappy PC laptop as a backup since my MacBook’s been failing. I’ve gone full Linux on it since I spend most of the day in a terminal and browser, so except for Photoshop I’m comfortable. I’ll probably buy a new MacBook when they release 2014 Pro Retina ones. Until then, I’ll document my experience here.

First off, I’m running Linux Mint 16 Petra with the Cinnamon Desktop Environment. I’ve got to say, it’s really pretty in comparison to Windows 7 that the laptop came with and Windows 8.1 that my Shuttle PC is now running.

Fixes I’ve had to make

Brightness Controls

The brightness keys cause Linux to crash. Also, software controls like panel widgets don’t work. Despite it saying not to on thinkwiki.org, the EnableBrightnessControl registry flag was the right way to enable brightness controls. Switching to a virtual console, changing the brightness, and switching back worked… except that Cinnamon DE crashed upon returning to it.

Here’s what your /etc/X11/xorg.conf file should look like:

Section "Device"
  Identifier "Device0"
  Driver "nvidia"
  VendorName "NVIDIA Corporation"
  BoardName "Quadro FX 880M"
  Option "RegistryDwords" "EnableBrightnessControl=1"
EndSection

Keyboard Mapping

I don’t use Caps Lock. I always remap it to Control. To do this in Linux Mint 16, you need to go to the Regional & Language settings, Keyboard Layouts, and Options in there. Don’t change “Caps Lock key behavior” — change “Ctrl key position” and add “Caps Lock as Ctrl” there. This is so your Caps Lock key doesn’t have two KeySyms associated with it (if you’re familiar with .XModmap settings). Additionally you can add pressing both Shift keys at once to toggle Caps Lock in the “Miscellaneous compatibility options.”

The mdm display manager doesn’t run .XModmap and it’ll take a lot more effort than it’s worth to modify the XClient/.Xsession setup that Mint provides, so I went with the gui setting in this case.

Suspend Mode

I use the proprietary nVidia graphics driver for full 3d support. There system freezes when resuming from suspend. To fix that, add this line to the file /etc/pm/config.d/unload_modules (you may have to create it):

SUSPEND_MODULES="$SUSPEND_MODULES nvidia"

grunt-toggl

Tue, 29 Apr 2014 22:30:24 GMT

Start using grunt-toggl today!

npm install --save-dev grunt-toggl

See the docs and contribute to grunt-toggl on the GitHub repository here: https://github.com/davidosomething/grunt-toggl

Some background

I work for many clients and on multiple projects at a time, so it’s important to keep track of my billable hours. My tool of choice for time tracking is Toggl. Check it out if you’re not already a user — it’s got apps for every device and OS and a great reporting dashboard.

Sometimes I forget to start a Toggl timer when I dive into the fun part of web development. But one thing I pretty much always do at the start of a web project is start grunt. So it makes sense to have something to tie the two together. For that reason, I’ve created a Grunt plugin that automatically starts a Toggl timer. It’s available now on npm.

Basically the plugin creates a new asynchronous Grunt task. The task uses the Request library to make an HTTP request to the Toggl API. There are helper arguments in the task that to find your Workspace and Project IDs, too. Anyway, this is my second Grunt plugin and the first one to use Travis CI for continuous integration. Let me know if you use it!

First week developing on a Mac

Mon, 20 Jun 2011 19:59:45 GMT

The following is a whining session about developing on OSX. It’s not all bad.

I had been using an old (2004) DELL machine at work with Windows XP. Needless to say, the machine was pagefaulting and had a bunch of problems with its RAM. So they finally got me a new computer to work on — a 24″ iMac with an i3 processor. Not exactly a beast, but it’s a big upgrade.

I was using Notepad++ on my PC and I am ridiculously fast on it. Maybe it’s a sad thing, but I’ve never seen anyone move lines and refactor and reorganize code at the speed I can on a PC. That speed, along with file management in Explorer and on the commandline, were the two things I used to benchmark my effectiveness on a PC.

Finder sucks.

Immediately, the crappiest part of OSX is the Finder. Granted, it’s pretty, but you can’t do simple things like cut files for moving without some 3rd party software or AppleScripting. At this point, I have most of the Finder keyboard shortcuts down (window management, opening programs, creating folders) and can do everything without a mouse.

TextMate is nice, but MacVim is free.

Next point — all the good software requires a license. I hear Mac developers all love using TextMate or Coda. I used the trials for each of those up, and TextMate is the winner in that category. Coda is like many programs in one, but not robust enough in any single aspect that I would use it. SublimeEdit, which I experimented on PC for a bit is similar to TextMate, but still requires too much work to get it going. Smultron and TextWrangler are just okay but they lack features like transposing lines of text and column editing. I decided to learn VIM instead (abandoning my emacs roots since aquamacs was hideous) and I’ve gotten pretty fast at it. IMO on a Mac — VIM is still the way to go in terms of non-IDE editors. If I can get a TextMate license I might go that route, but it’s a good idea to learn VIM too since I’m in terminals often and emacs isn’t on every server. I’ll be looking forward to the development of Bespin and Kod for the future.

I want Transmit.

FTP on a mac is a nightmare. This is in part due to the Finder design. I had been using FileZilla on Windows, and it is available on OSX as well, but there are quirks here and there (like a missing bookmarks dropdown). Transmit was lovely, especially the bookmarks screen. I would use that as well if I can convince the company to get a license. I went through Interarchy, Cyberduck (so slow), FileZilla OSX, Fetch, Forklift, and even Finder’s native FTP to decide on Transmit. With the trial expired, I’ve effectively forsaken FTP clients and am using ANT to do all my uploading (which won’t last long since it’s a waste of time to write a build script to up/download some one-off projects). Cyberduck, for its ability to name bookmarks (which Finder cannot) and property as a native OSX app (which Filezilla is not), is my emergency client.

Made for IDEs?

Perhaps I will try the all-IDE route for my next project — Eclipse, Dreamweaver, Aptana, Coda seem to have a lot of features build in like SVN and FTP. I’ve used them before, but that was in the 2GB of RAM/2Ghz CPU days, when it was a pain to load or keep the RAM-hogging IDEs open.

Remote computing on a Mac?

OSX VNC clients all suck (I’m using the built-in CMD-K one, ChickenoftheVNC is outdated and slow, and Jollysfast doesn’t render everything correctly). Maybe I can get an NX server going instead. The Remote Desktop client is alright.

E-mail is nice.

I’m using Entourage as an Outlook replacement. It lacks the ability to traverse through Active Directory groups (displaying users and recursing). I’m sure Outlook 2011 can do this, so this is only a budget limitation. Sparrow and mail.app look nice, but I actually like the web client for gmail.

Interactive version control is pretty but not functional.

I miss the TortoiseGit shell extensions. I have a license for Versions (Cornerstone is pretty much the same, after using the trial) and it’s just not as easy as right clicking to commit. I think there’s a shell extension for SVN out there but not for Hg and git. I guess it’s time I switched everything over to git and commandline it anyway. I’m not even going to try Tower for git since it’s probably like Versions. If it ain’t integrated with Finder, it ain’t worth it.

It’s a UNIX system. I know this.

What I’ve actually liked so far is that OSX has its own terminal and is POSIX compliant. Its UNIXness is great, and with DTerm and iTerm 2 (both free programs) it’s easy to do commandline things (i.e., version control or “touch file.txt” since there’s no context-menu to create a blank file). The AppStore is cool, but I hear Win8 will get one, too. I’m a fan of MacPorts (haven’t tried Homebrew because I already have things going in /usr/local/).

Beachball of doom, unhappy mac face, grey screen of death, shit happens!

Finally, programs still crash ALL THE TIME. I have to force quit things every now and then, too. It’s the software’s fault, of course, but anyone who says Macs don’t crash is probably just browsing the internet all day or crunching numbers.

Shuttle PC - new harddrive, Clonezilla & Windows 7

Fri, 03 Dec 2010 23:12:44 GMT

I bought a new harddrive on sale after Cyber Monday to replace the 250 GB harddrive in my Shuttle. It’s a bare drive, which means it doesn’t come with a SATA cable or box. Now I’ve got a total of 2 TB of storage with 1 TB already full.

I used my super-difficult-to-open Lacie case (pried it open with scissors) to house and connect the bare drive while I formatted it. This was a time when I really wished I had an eSata dock or enclosure.

I did a full format rather than quick; the difference is that a full format attempts to write empty bytes to each sector and does a chkdsk /r at the same time to fix any bad sectors. Knowing that UPS didn’t damage my drive, I felt safer using it as my new primary/boot drive. The full format took about 8 hours D:

Clonezilla was used to image the old harddrive to the new one. I did a device to device image of the entire disk (as opposed to a single partition), which was faster but not necessarily safer than going from the old disk to image, image to new disk. The master boot record and Windows system partition were also preserved in this manner, so I didn’t need to boot from a Windows install/repair CD. I swapped the drives, moving the 250 GB into the Lacie case and the 1 TB into the Shuttle.

The system started perfectly, although some new Hitachi driver had to be installed upon booting. I extended the 250 GB partition to occupy the additional space using the Windows Disk Management tool (right click on My Computer -> Manage). After a final reboot, I’ve got an additional 750 GB to play with.

My Development Setup

Mon, 29 Nov 2010 20:35:48 GMT

Although I primarily develop on a Windows PC, I still consider Linux (also Unix and OSX) the most powerful and practical environment for setting up web and database servers, DNS, and version control repositories (as a master on DVCS). A few of the benefits include:

Using SSH to connect to a Linux commandline is faster compared to RDP’ing or VNC’ing into a Windows machine (also saves battery life on smartphones). Cygwin is a slow alternative.
Package management for easy (and frequent) upgrades.
More robustly integrated file permissions between the file system and web server (that is, IIS doesn’t use NTFS file permissions, but instead Windows account permissions).
File paths and naming make more sense on *nix than Windows. For instance, .htaccess is a system file, not an unnamed file with the htaccess extension.

The setup

For my personal set up, I’ve currently got a VM running on my media center PC with the following:

OpenSSH on port 22
Apache Server 2.2, listening on port 80 for incoming web traffic
Apache Tomcat, listening on port 8080 for incoming web traffic
vsFTPd on port 21
awstats for Apache log file analysis
PHP 5
Railo for Adobe Coldfusion
MySQL
Git – to get node.js and other source
Mercurial – for my own version control
node.js as a daemon
MongoDB (for Hummingbird and anything else)
Hummingbird through node.js server, listening on port 8000 for live analytics… just to play with
Icinga (Nagios fork) for service monitoring

It’s accessible via RDP using VirtualBox’s VRDP on port 4000. That means I can access it using a Remote Desktop client like the one that comes with Windows. With that I can access an X-Windows environment (xinit, or desktops like Gnome, KDE, XFCE) without having to do X11 forwarding to the local computer (such as through XMing or Cygwin/X). For the record, RDP is faster than X11 forwarding but doesn’t allow for seamless integration.

Here are the steps I took to set up my VM

Setting up the host computer

Allow Wake-on-LAN
1. Enable BIOS setting
2. Enable NIC card setting in Windows Device Manager
3. Set up router port forwarding
Install TightVNC Server
1. Run as service
2. Forward ports on router: 5800 for java client, 5900 for vnc clients

Setting up the Virtual Machine

Install Ubuntu Server Edition into new VirtualBox virtual machine
1. Use default LAMP settings
2. Install OpenSSH
Configure VRDP on Port 4000 instead of port 3389. This way, RDPing into 3389 allows you to access the host, 4000 the VM. Forward the ports to the computer with the router.
Create a shared drive to interact with the host computer, follow this: http://ipggi.wordpress.com/2010/03/11/virtualbox-shared-folders-with-ubuntu-server-guest/
Since the machine runs headless most of the time, the VM is opened using VBoxHeadlessTray: http://www.toptensoftware.com/VBoxHeadlessTray/
Install the following tools:
- emacs (or whatever you want for text editing)
- curl
- wget
- unzip
- elinks (or whatever you want)

Setting up LAMP

There’s so many tutorials on this, it’s ridiculously easy. Also, the default config is not bad for development purposes.

Setting up phpMyAdmin

You can basically just let the aptitude installer do everything. The instance will be accessible at http://localhost/phpmyadmin

sudo apt-get install phpmyadmin

Setting up awstats

Follow http://maestric.com/doc/ubuntu/awstats

Setting up the file system and vsftpd

Regular install, then edit the config file in /etc/ and change some permissions:

Add default user to group www-data (apache default group): sudo usermod -a -G www-data username
chmod /var/www, allowing group read and write
Allow owner and group and write using local_umask = 002
Set the default FTP path to /var/www

Setting up Mercurial

Follow this to get apt-add-repository https://help.ubuntu.com/community/Repositories/CommandLine#Adding%20Launchpad%20PPA%20Repositories
Then, follow this to add the mercurial repository and install it http://icephoenix.us/linuxunix/installing-mercurial-1-5-or-1-6-on-ubuntu-lucid-lynx-10-04/. TortoiseHg is not needed since we’re doing everything from the commandline.
I didn’t want to use bitbucket, so I installed hg cgi server (hg serve only allows one unsecured connection at a time) to create my own web based repository:
1. Get the mercurial source tar.gz using wget or elinks
2. Copy hgweb.cgi and all the folders from /templates/ to /var/hg (chmod -R g+w www-data:www-data)
3. Edit hgweb.cgi, set: config = "/var/hg/hgweb.config"
4. Put the repo paths/collections on the drive that is shared with the host (this way the files aren’t stored in the virtual hard disk–you can back them up easily). I mounted my share drive at /mnt/share and created the repos folder in there. Because the share is on a windows host, the permissions are always 777 chowned to root:root
5. More help here: http://mercurial.selenic.com/wiki/HgWebDirStepByStep#Directory_Structure
I had some existing local repositories on my Windows development PC that I wanted centralized onto this computer so I cloned them:
1. Use hg serve on the development PC (can be done through TortoiseHg!)
2. From the VM, hg clone the existing repos (use the development PC’s IP as the source URL)
Currently the repositories are all unsecured, so to secure them:
1. Use apache to password protect repository (no native security in hg, use basic or digest auth. SSH can be used, too, but then why bother with hgweb?)
2. Under directory directive of main.conf in /etc/apache/hg/
```
<Location /hg>
  AuthType Basic
  AuthName "Mercurial repositories"
  AuthUserFile /var/htpasswd/hg
  Require valid-user
</Location>
```
3. See more on Apache security here: http://httpd.apache.org/docs/2.0/howto/auth.html
4. Allow push using http by following the troubleshooting instructions here: http://mercurial.selenic.com/wiki/PublishingRepositories#Troubleshooting

Setting up Railo for ColdFusion

The only thing to note here is that Ubuntu no longer uses sun-java6-jdk. Instead use openjdk-6-jdk or default-jdk (same thing).

Notes on setting up MongoDB

sudo apt-get install mongodb-stable (not mongodb, they’re different).
Set up for PHP/Apache using php’s PECL (need php-dev for phpize and php-pear for pecl)
If mongod won’t start, make sure the default dbpath isn’t locked.

Setting up node.js

Set up a la http://www.codediesel.com/linux/installing-node-js-on-ubuntu-10-04/
After cloning the git repo, check out a stable tag:
- To list tags: git tag -l
- To checkout a tag: git checkout v0.2.4
Node.js can be set up to run as a daemon following this: http://howtonode.org/deploying-node-upstart-monit
See the related post on how to install npm safely (link at bottom).

Hummingbird

Requires STABLE version of node.js
Install via https://github.com/mnutt/hummingbird/blob/master/README.md – the instructions on the Hummingbird site website are outdated.

Icinga

sudo apt-get install icinga
Use NO CONFIG for postfix when it comes to it. You’ll have to set this up later if you want e-mail notifications.
The instance will be available at http://localhost/icinga – username is icingaadmin

Final router configuration

Bridging network connections gives the VM its own network IP. This changes the host’s network IP to a new IP so any previous port forwarding or virtual servers will have to point to the new IP.
1. Select host and VirtualBox connection
2. Bridge connections
Router: Port forwarding
1. Finding your IP addresses:
  1. From the host machine, go to whatismyip.com for the router / external IP.
  2. From the host machine, run cmd > ipconfig for the bridged network IP.
  3. From the VM, type ifconfig for the VM’s network IP.
2. Final port forwarding configuration:
  - 21 to VM for FTP
  - 22 to VM for SSH
  - 80 to VM for HTTP
  - 443 to VM for HTTPS
  - 3389 to Host PC for RDP
  - 4000 to VM for RDP
  - 5800 to Host PC for VNC
  - 5900 to Host PC for VNC
  - 8000-8888 to VM for node.js, Hummingbird, Tomcat and Railo
3. DynDNS setup should be done via router, otherwise forward all to Host machine and use DynDNS updater software on host machine, have host machine forward to VM.

From this point on I was able to access my VM and all of the forwarded ports using the DynDNS address. It’s really convenient to be able to VNC onto the host machine if something needs changing, SSH into the VM to do updates or set up virtual hosts, and do an Hg push to this address as a master repository. Getting all the puzzle pieces working together and having a good setup has really improved my workflow.

Shuttle PC - Part 2

Thu, 28 Oct 2010 15:08:45 GMT

I didn’t read the parts compatibility guide online before buying the RAM and graphics cards so the Shuttle wasn’t working up until last week. Since I couldn’t see anything for lack of graphics and I don’t have another DDR3 compatible machine lying around, I couldn’t test the parts. Shuttle PCs don’t beep on POST so I couldn’t even tell if the motherboard and CPU worked (power and fans worked though). The only way to proceed would be to buy a new compatible graphics card and RAM.

It turns out the GT 240 wasn’t compatible. I bought a (much faster) Radeon 5770, which is running perfectly fine on the 300W power supply. I’ve got a 500W power supply coming in, too, since I’ve put so much stuff into this little box already, might as well make sure none of it gets fried or dies from insufficient power. I also got two 2GB sticks of Transcend DDR3, which I don’t need but might was well keep. The G.Skill Ripjaws sticks work fine, so now I’ve got a whopping total of 12GB in the Shuttle.

Finally, I needed more space so I took apart my Lacie external HDD and plugged it in the Shuttle. Getting that Neil Poulton screwless case apart was a pain in the ass and I almost broke it! There’s now 300 GB out of 1.25 TB available. Definitely going to have to get a bigger HDD, then I’ll put the 250GB HDD into the Lacie case. It took some fiddling to figure out which SATA plugs to use… apparently you can’t boot from all of the SATA connections (only the first two). I’m using 3 out of 4 SATA connections now, and I don’t see where there’s room to use the last one (eSATA via PCI card?).

Putting together my new Shuttle PC

Wed, 20 Oct 2010 12:12:16 GMT

Feeling a bit prodigious, I bought a Shuttle PC the other day (SH55). It totally looks like a toaster, but it’s cool. It’s going to be an always-on HTPC for the living room.

I am completely out of the consumer PC hardware loop and ended up getting the i7-860 (1156) instead of an i5. The major, major difference for these two would be the availability of integrated graphics on the i5, vs two extra cores on the i7. Wish I had gotten the i5, since then I would be able to play with the PC immediately using the integrated graphics.

As it is now, I’m waiting for an EVGA GeForce GT 240 video card. The DirectX 11 compatible cards are too expensive for now. Also, it’s a single slot card that is suitable for the Shuttle stock 300W power supply, so it should be quiet and cool compared to some of the monstrosities out there. This card is just enough since the PC is going to be using the TV as its monitor, with a native 1920 x 1200 resolution.

I got two sticks of 4GB G.Skill Ripjaws DDR3 1333, total of 8GB. Combined with the graphics card, this machine should be able to run Photoshop CS5 swimmingly as well. In the end its way better than any machine I have now. I’m using the HDD and optical drive from my old PC. The harddrive uses SATA revision 1, so it will probably be the biggest bottleneck for the system.

There’s a lot of room for upgrade in the system: new GFX card (maybe a full size one if I change the power supply), two more DIMM slots, and another 3.5 inch HDD (hello SSD!), so this machine should be good for many years.

An Event Apart DC 2010

Mon, 20 Sep 2010 11:02:26 GMT

So I just got back from the Washington, DC iteration of An Event Apart. I feel that if you follow all the speakers’ blogs and read Smashing Magazine’s content (or nontent, as it is), they’re really just saying the same thing. The real experience is paying to see these pioneers and policy-makers speak live and network with them (they are easily approachable at the conference or at the after parties).

The key message this year has been to stop trying to make your site look the same in every browser. You can approach this either through Progressive Enhancement or graceful degradation (neither of which are new topics). Other messages included:

CSS3 and HTML5 are already usable if you design with progressive enhancement in mind
Mobile-first design is a great process to address design
A slew of CSS3 animation and style demos to show how easy it is to spice up a website

An Event Apart’s audience seemed to be made up of mostly designers and developers, which I don’t think is the right crowd since the speakers end up preaching to the choir. The audience should be made up of clients—that is, anyone who wants a website. If you want or have a website, this is where you would go to find out what you should be getting. Clients (i.e., corporations with people who think they know a thing or two about “the internets” and “the twitter” and how “they need a Facebook page”) are the ones asking for useless and backwards things like IE6 and 7 compatibility. That’s like asking for AC on a horse and carriage.

Honda Metropolitan in Boston

Fri, 02 Apr 2010 13:58:46 GMT

The Honda Metropolitan is a 49cc gas-powered scooter. Because of its small size and vehicle classification, it is a very convenient mode of transportation in Boston, where the streets are crowded and parking is expensive.

I did some research on the Honda Met to help out a new owner, and wanted to post a compendium of all the information I found (a lot in some areas, not so much in others). I’m not the expert, the members of urbanscootin.com are, so massive props to them! Some of these are specific to Boston/Massachusetts area, but others, such as technical information, apply to most Honda Metropolitans.

Reviews

Some links to reviews:

Honda Metropolitan Scooter [Review]
Honda’s Little Miracle – The Metropolitan Scooter
Proud Owner of a Honda Metropolitan
Alex Wrege’s blog – Archive for ‘Honda Metropolitan’ This guy’s scooter got stolen :< lot’s of good reading, though
A google search will turn up some more. I didn’t link to the ones on epinions or big sites for that reason.

Metropolitan I or II?

Honda Metropolitan II’s were discontinued in 2005. A stock, unmodified Met II will reach a maximum of 25 MPH. This is only useful to absolutely meet the new moped/limited use vehicle law (see two sections down). Unless it’s an incredible deal for Boston (i.e., $1085, the KBB value, like new), just go for a regular Honda Metropolitan. If you’re experienced with performance tuning you can try to remove the restrictor plate yourself.

Misc. Information

I don’t think people often mention that with a full tank of gas (the tank is only 1.32 gallons), this thing weighs 176 pounds. While this is one of the lighter scooters out there, it is still heavy for most people. Also, there are only two places to lift it: the handlebars and the bar on the rear. If you think a full jug of milk is heavy, you might not be able to lift the scooter off of the kickstand, much less lift it up from a curb. This is light enough for one strong thief to pick up and put in a truck, though. See the securing section for how to avoid that.

Also, there is almost no storage space on the scooter. You can get a basket and a rear trunk, but that doesn’t help much. The seat compartment can only hold a helmet and chain, most backpacks probably won’t fit.

Buying a Honda Metropolitan

Before buying, you should read this article: Buying a 50 CC Scooter in Massachusetts. This will help you decide whether or not you need a scooter and make you a little more aware of what’s involved.

Another factor to consider is that there may be a significant change coming to the Honda Metropolitan in the form of Fuel Injectors for the 2010 or 2011 models; a patent was recently filed for integrating the injector into the scooter (source). So you may want to wait and get a brand new even more fuel efficient scooter.

Since 2002, not much has changed in terms of the look and specifications. The major difference between models is the carburetor, which has gone from 15 to 16 to 18mm. The seat height has been adjusted slightly as well, less than an inch over the last 7 years. You can compare models here: New Vehicle Compare at the PowerSports Network, but you won’t find much.

Finally, color does matter. These little scooters are full of personality, and you might not want the hibiscus or checker pattern. They’re easy to paint, and you can remove the cover and buy replacements, but for most models, here is a listing of the colors you are limited to based on the year the vehicle was released: An Overview of Metropolitan Colors 2002 – present.

Buying from an Official Honda Dealer

While you can get a Vespa (Herb Chambers on Brighton Ave.) or Buddy (Scooters Go Green) within the city limits, there is no place in the city of Boston to buy a Honda Metropolitan. Luckily, the major dealerships in the nearby towns (e.g. Parkway Cycle, GBM) deliver for free (at least, they did when I called). They are also all official dealers so there is not much of a difference who you talk to. Check the Honda Powersports site to find the dealer nearest you.

If you choose to work with a dealer, they should assist you in handling most things such as finding insurance and registering the vehicle. If you are going through official channels, your vehicle may be registered as a Limited Use vehicle (read about the law later).

Buying Online/through Craigslist

If you’re buying from someone online, save a copy of the ad they post. Because the Honda Metropolitan is such a small vehicle, there may be some stolen scooters on sale. Avoid these. I wouldn’t buy from anyone who didn’t provide a phone number, and if they take cash only, find out why they won’t take a check with a bill of sale. A check leaves a paper trace of the sale and is beneficial for BOTH parties.

Whatever the case, make sure the seller has the original documentation for the bike. This includes the original bill of sale from a dealership, any hand-drafted bills of sales in between, the original registration. If available, the owner and service manuals are nice to have, and if the seller has a helmet, lock, and cover, see if they can provide you with it as part of the sale.

For your bill of sale, this site has a pretty standard one: Free Motorcycle Bill of Sale. Just change motorcycle to Honda Metropolitan. The site also provides a pre-purchase inspection checklist that applies to scooters: Motorcycle Bill of Sale (inspection checklist).

The odometer on a Honda Metropolitan only goes up to 9999 and then rolls over, so the only way to tell if a scooter has 100 miles or 10100 miles is to inspect it thoroughly!

That Stupid Law

All of this information can also be found here: Laws in MA, the registration form (you’ll eventually get to it), and in the urbanscootin.com forums (register if you are going to enter the MA scooter world).

A law was passed in 2009 that creates a new category for scooters in between a motorcycle and a moped. The in-between vehicles are considered “Limited Use” motorized bicycles, and are not allowed to have top speeds above 30 MPH among other conditions. For the Honda Metropolitan, this is the only condition under which it fails.

Insurance

Scooter insurance supposedly costs around $100 according to some people on the urbanscootin.com forums. I couldn’t find insurance for less than $400 (Progressive and Metlife), and my company insurance provider (Progressive) does not have Scooter coverage in MA (yet, but it does in other states) so it would fall under Motorcycle insurance. Insurance is not a bad idea if you live in, say, Roxbury, where your scooter will probably get stolen. Only a properly registered scooter can be insured, so you have to register as a Limited Use vehicle if you are getting insurance.

Parking

Luckily the parking requirement is not currently enforced in Boston (source), but if a police officer felt like it, they could. Don’t park anywhere stupid (e.g. fire hydrant, driveway, exits, middle of the sidewalk).

Recommended Registration

If you are one to obey laws to the letter, plan to get insurance for the $2000 vehicle, or you have a Honda Metropolitan in good condition and plan on riding it really fast (above 25 MPH), register as a LU vehicle and get insured.

Otherwise, know that I am not advising you to disobey the law, but you should be aware of these points:

A used Honda Metropolitan may not be able to reach the manufacturer advertised top speed of 42 MPH. Some of them can barely go 30 MPH due to wear, and the Metropolitan II is intentionally restricted to 25 MPH.
If you have a cover, the model number is not visible without lifitng it.
Traffic/police officers don’t carry a chart with scooter top speeds and model numbers.

As long as you don’t ride above 25 MPH and get clocked or park somewhere that an officer would check on your vehicle, you could get away with registering as a moped.

Registering a Scooter

I didn’t do this, so I don’t know any details other than you just bring a completed RMV1 and some cash to the DMV, and you get a sticker (for moped registrations). There is a DMV near the Boylston (Green line)/China Town (Orange line) stop:

630 Washington Street Boston, MA 02111-1615

Accessories

Now that you’ve purchased, (insured,) and registered your vehicle, you need some accessories before you can ride it:

DOT approved helmet – safety first. Price varies, maybe $40.
A U-lock – this is to lock the bike to a chain to a pole. Get a good one, 13/14 mm diameter should fit most chains. A good lock also comes with an anti-theft policy which can act as secondary insurance for your scooter. You need to fill out the form and have the broken lock to claim the theft. Kryptonite no longer uses the old style locks that can be picked with a Bic pen, but make sure you get a really good one. Roughly $100.
A strong chain – A lock is only as good as the chain. 5 feet is JUST enough to go around the back wheel and a street sign. Some locks and chains come as sets. The OnGuard chains are reputable. $50 – $150.
A durable cover – This should not only protect from rain, but should be heavy enough or have a cord that prevents the wind from blowing it off. Boston is windy. Also, a heavy/banded cover may discourage officers from trying to find a model number. Be careful with cheap covers, they may melt on a hot day and in contact with the hot parts of the scooter. Roughly $40.
A batter maintainer/float charger – The Deltran Battery Tender Jr. is the recommended brand by urbanscootin.com. It is the same price as any other brand, but has an ampere rating that is similar to the Honda Metropolitan’s stock Yuasa battery. In other words, it’s the best. Get it for the winter/times when you won’t ride it at least twice a week. No more than $30. Here is the one you should get: Battery Tender 021-0123 Battery Tender Junior 12V Battery Charger. Read more about batteries in the maintenance section.
The Honda Metropolitan Service manual – is optional, but if you got a scooter that may not be in perfect condition or you want to take care of the scooter yourself, you’ll want this. You can order it from Helm Incorporated, do a search for the model (CHF50) to get the manuals you want. $20 – $60 depending on which ones you order.

Didn’t expect the extra costs, huh? That’s like $400 on top of the scooter.

Maintenance

If you ride the scooter often (twice a week for at least five miles a time), use a battery maintainer in the off-season, and change the oil every 1000 miles or year, change the spark plug every 1500 miles, your scooter will be in top shape.

Securing your Honda Metropolitan

The rear frame post is the most secure place to run the chain, but it is difficult to get to. The next best place to run the chain is through the rear tire itself. The platform of the scooter is another option if your chain is long enough. A picture can be found in this thread on urbanscootin.com: Chain/Cable Locks for Scooters..

Use the kickstand lock found under the seat when you put it down to prevent someone from just running away with your scooter.

Grip-Locks are a relatively new thing, and I’m not sure if they’re available in the US, but you can try here: GRIP-LOCK if you feel you need the extra security.

Fueling

The carburetor mixes impure gasoline for you, and is designed to work with regular gas. The owner’s manual recommends that you use only regular, 87 octane, gasoline. You should follow this recommendation, unless a professional recommends otherwise (in which case the reason would most likely be something called “knocking,” which is when the fuel spontaneously ignites and damages the engine). The gas cap is locked as a safety measure to a) prevent people from putting sugar and other things in your gas tank, and b) prevent people from stealing your single gallon of gas in these desperate, desperate times.

Opening the gas cap can be tricky if you’ve never seen it done and don’t have the manual. The gas cap is underneath a plastic cover where the floor board meets the seat. Lift the cover using the tab, and you’ll see the metal cap. You need your key to open the gas cap. Put the key in and turn it to the right to unlock the cap. The entire metal cap can then be unscrewed by turning it to the left. It is not attached to the vehicle like a car gas cap, so don’t lose it. When you’re done putting in gas (and a shot of Sea Foam to clean the carburetor if you need it), screw the gas cap back on and lock it. Close the plastic cover, and you’re all set.

Oil Changes

Regular maintenance includes changing the oil every 1000 miles or year, whichever comes more often. Many of the posts on urbanscootin.com agree to use a synthetic oil (but the effect is not much different from non-synthetic), such as Amsoil Synthetic 10w40 or Castrol Syntec 10w40. Just make sure it’s 10w40 and NON energy conserving. Oil should cost around $9.00. Here are some guides:

Kickstarting

If your battery is getting old (4 years or so, if you maintained it well), consider replacing it. Until then, you may have to kickstart your scooter. The Honda Metropolitan has a kickstarter next to the kickstand. To use it, put the scooter on the kickstand and turn it on. Then flip the kickstarter peg out and push it down half way. There is a midway point that gives some resistance, once you ease the kickstarter past that, give it a smooth push (should not get stuck or jerk) all the way to the end. It takes about the same energy as pulling the rip cord on a lawn mower. Don’t literally kick it or stomp on it. Just a strong, fluid push from the midpoint to the end is all it takes.

Battery

All Honda Metropolitans use a Yuasa AGM (which implies that it is sealed) lead-acid battery, part number YTZ7S. The battery is 12 volts, 0.6 amps (600 mA). More technical specifications can be found here: Yuasa Battery, Inc. YTZ7S. This battery should last for about 5 years with active riding and a Battery Tender during the off-season.

Battery Maintenance

The Honda Metropolitan battery is a 0.6 A battery. Because of this, it requires at least 0.6 amps to charge. An ampere is a measure of current, meaning that higher ampere chargers will charge your batter faster. This is not exactly good, because it also kills the battery faster. You wouldn’t use a $2 phone charger from Chinatown on your new $300 iPhone would you?

Some rules:

Don’t get a trickle charger. If you accidentally leave it on too long, it will start to over charge and kill your battery.
Don’t charge from a car if the car is on. This will just plain kill your battery.

The Deltran Battery Tender Jr

This is a float charger that delivers a current of 0.75 amps. This rating is safe for the Honda Metropolitan battery. This battery maintainer is the Battery Tender, and is recommended for use. You connect the positive clip or ring to the positive connector of your scooter’s battery, the negative clip to a metal surface like the engine (the Honda Metropolitan is negatively grounded, like most things), and then plug the Battery Tender into an outlet (never plug it in to the outlet first, it has to check the battery to determine how much to charge).

Many people like to leave the wires connected and just disconnect the charger. Leaving a wire attached is referred to as pigtailing.

Troubleshooting

Most issues revolve around starting the Honda Met. Here’s what you should be checking:

Battery issues

If your scooter dies/stalls after starting, check your battery. You can use a multimeter if you know how, or just take the battery out to an auto shop. They supposedly check it for free. With batteries, you get what you pay for, and Yuasa is a good brand. If your battery cannot hold a charge, you should replace it with an aftermarket battery of the same type. Yuasa’s aftermarket brand is Motocross and goes for about $84 at Battery Stuff. If you decide to go with another brand, make sure it is an AGM battery (or at least “sealed,” if not AGM, which will not last as long, chemically, without a battery maintainer) and pre-filled/activated/charged YTZ7S.

Here’s how to change the battery: How to Change a Battery on a Honda Metropolitan

You can learn a lot about lead-acid batteries on the Battery Tender website: Introduction To Lead Acid Batteries

Spark Plug

If it wasn’t the battery, it could be that the spark plug is dirty. You can take it out with a socket wrench. If the head is black, you can replace it. If it’s brown you can spray some special cleaner on it. Replacement just involves getting a new spark plug (bring the old one to a car shop) and putting it in. Here’s some reference material:

Carburetor

Try draining the carburetor. Then run seafoam through your gas tank (with some clean gas) and let it run. This will clean out your carburetor. If it still doesn’t start, you may have to jet (remove and clean) your carburetor (or have a professional do it for a fee). Here’s how to drain the carb: How to Drain Carb?

Here’s how to jet: Jetting the Carburator

All Else

The air filter works in a tight system with the spark plug and carburetor. I’d check that next: Replacing the Air Filter

The fuel pump is another obvious thing to check: Fuel Pump Replacement, you might even want to check it before the battery.

If your scooter is old, it might be overheating so the coolant needs to be replaced. Here’s some resources:

For anything else, unless you’re a greasemonkey, find someone to do it for you.

Conclusion

The Honda Metropolitan has been around for almost a decade now, with almost no change in technology, so much of the information about it is pretty solid. If you have any questions I recommend going to my primary source, http://www.urbanscootin.com/. If you have any corrections or suggestions for this article, post a comment and let me know.

Tips for Faster PSD to HTML Conversions

Sat, 27 Feb 2010 21:33:38 GMT

Ever wonder how those PSD to HTML services do the job with such a quick turnaround, sometimes guaranteeing valid code in 24 hours on even the most complex PSDs? The task is roughly 40% breaking up the PSD logically, 20% coding, and 40% moving elements around until everything fits together. Here are some tips I’ve learned from years of experience and trying to find new techniques in those tutorials the web has too many of.

Photoshop Techniques

I usually start a conversion by preparing the assets. Working with the design first (as opposed to starting with the framework) also gives me a better sense of where everything goes.

Save for Web

Alt+Ctrl+Shift+S, or on Macs, Cmd+Opt+Shift+S. This is the key combination you’ll use to save every piece of the PSD you’re going to use for your design. From the Save for Web window, you can choose the best filetype for the image you’re saving based on quality and size.

Convert to Smart Object

For groups of layers (including text) that doesn’t use layer blending options and aren’t affected by adjustment layers, select the layers and/or groups involved and convert them to a Smart Object. A Smart Object is a temporary vector object that you can modify as a separate file (a PSB file). The modifications will appear in the original PSD. Double click on the smart object in the layers menu to edit it as if it were a new image. From the Smart Object edit window, you can Save for Web.

Selecting Layers

Ctrl+Click on the layer thumbnail to select the contents of the layer. This beats using the wand tool or something to select the transparent pixels around it. You can also do Ctrl-shift and Ctrl-Alt clicks on additional layer thumbnails to add and subtract them from the selection.

Copy merged

A godsend of a shortcut. Ctrl+(Macs: Command)+Shift+C. I use this for layers that have blending options set or are affected by adjustment layers. After you’ve copied it, do a Ctrl+(Macs: Command)+N and paste to the new file. Then Save for Web.

Slicing’s other use

I feel that slicing is an outdated method to chop up a PSD because complex designs will use overlays of all kinds. Slicing has other uses, though. Sometimes I’ll slice the document and have Photoshop generate HTML for me. I then open the generated document in Firefox and use Firebug to get the computed sizes for block elements later on.

Actions

Actions are so underused! These are macros that you can create simply by recording what you do. You can create an action that does any of the things I’ve listed above for you. For instance, next time you make a selection, start recording an action as you Copy Merged -> Create a New File -> Paste -> Save for Web. Stop recording and save your action (you might have to delete the steps after the Save for Web dialog appears). Next time you make a selection that needs to be Copy Merged and saved into a new file, just run the action and save as a new name! Here is a more in-depth tutorial on creating Photoshop Actions.

Text

Take note of the font-face and font-sizes in pixels used before you dive into the HTML. It’s okay to use pixel font sizes these days, but if you’re old-school like I am at least you can find the relative size now that you have them all.

Flattened Versions

Save a flattened version of the site. Print it out if you want. This will be useful for reference by eye, and for working with the Pixel Perfect Firebug extension. Finally, invert the colors of a flattened version and save it as a new file. You’ll also want this for Pixel Perfect.

Creating the HTML and CSS

This part should be simple—it just involves creating the <div>, <span>, headers, and paragraphs you need. If you took note of the font information like I told you to above, now is a good time to define it in your CSS. Besides putting a body background color/image in, the font stack really helps everything look like it’s nearing completion.

Frameworks and Resets

If you haven’t already formed your own, try adopting the popular ones (not if you’re on a deadline, though). Fluency with pre- or self-built, HTML and CSS frameworks means you already have the groundwork complete and only need to add more block elements as needed. You shouldn’t waste any time finding a reset or creating the same <div id="wrapper"> you do for every layout.

Quickly get Image Dimensions

For Windows users, in Explorer you can add a Dimensions column to the detail view. Right click on the column names and Dimensions should be one of the options available.

Design in Firefox

The number of development tools in Firefox makes it the single, indisputably best browser for web development. This is not to say it is the best at rendering, or fastest browser (both of which are Opera 10.5 beta at the time of this writing), but it is close enough and will make your job easier.

HTML Validator

If you’re on a PC this instant validation cue on the bottom right of the browser is incredibly helpful. Just make sure it’s always green. Double click it to see the errors if it isn’t. If you’re on a Mac, you can use the shortcut provided in the Web Developer extension for quick validation.

Web Developer

The designer and framework you’re using and should have covered most things this extension would be used to debug, but there are a few things left that it can help with.

One thing I do is test visited link status by going to Miscellaneous -> Visited Links to test the style of visited links. I also do a Forms -> Populate Form Fields to test form field fonts.

Again, you can access a quick shortcut to HTML validation with this extension. Use it for both regular and generated source validation. Validate your CSS as well!

Finally, Ctrl+(Macs: Command)+Shift+F will is a quick and lightweight alternative to Firebug for finding out computed styles. Just hover over your element. Press the keys again to finish.

Computed Sizes with Firebug

As I mentioned before in the Photoshop Slicing section, sometimes I’ll slice the document and have Photoshop generate HTML for me. I then open the generated document in Firefox and use Firebug to get the computed sizes for block level elements.

In Place CSS Editing with Firebug and the Arrow Keys

One of the best things about Firebug is the ability to edit CSS in place. From either the HTML or CSS tab, you can add and edit rules and properties by clicking on them. If you put the cursor on a numeric property you can use the up and down arrow keys to increment and decrement the value (tip: use Shift+Arrow to increment by 10). In this way, you can move and resize block elements and change margins and paddings. Don’t forget to copy the final value into your CSS document.

Pixel Perfect and Inverted Overlays

Firebug is much more useful with Pixel Perfect. This extension lets you place elements on the browser screen and adjust their position and opacity. Drag the overlaid image to reposition it. Use the panel to hide or adjust opacity. I usually add a flattened version of the design and an inverted color flattened version. With the inverted version, set the opacity to 0.5. If your block level elements are in the correct place, the screen should turn gray. Anything that doesn’t match up to the PSD exactly will be in color (this works similar to the Photoshop “Difference” blending mode). You can use this with the Firebug technique described earlier to quickly get everything in the exact pixel location.

Here’s an example of the inverted overlay on top of this post, one pixel off:

And here is the same overlay when the elements are in the exact positions (I shifted the overlay, but for designing you should shift the elements):

Using Firefox and Firebug to do your design, you’re just moving blocks around with the arrow keys. It’s WYSIWYG editing without the pitfalls!

Closing

I’m not a fan of those rapid PSD to HTML shops only because I am wary of the quality of work they produce. I’m sure there are a few good ones, but I still prefer to do it myself. If you’ve got any tips or tricks of your own, leave me a comment!

References

Firebug
Pixel Perfect Firefox Extension
Using Actions to Automate Tasks in Photoshop

jQRPG — An Old-School Style RPG in jQuery

Fri, 19 Feb 2010 13:55:19 GMT

JavaScript/jQuery and CSS compatibility is finally at a decent state amongst major browsers (IE and ACID3 notwithstanding). At least, similar/the same DOM manipulation behavior can be reproduced across those browsers. Not only that, but the JavaScript rendering speed of engines other than Trident (IE’s) is quite fast. With these developments, it is actually possible to create playable games (really, check those links out!).

The Demo

In about 4 hours I’ve created a demo RPG here using jQuery, JavaScript, CSS, and the Javascript jQuery Hotkeys Plugin. I’m surprised no one has created a complete, working one yet, as tile-based RPGs are much easier to make than action games with collision detection.

If anyone is interested, I might continue building this, adding in turn-based menu battles (oh boy!), a shop system, and AJAX saving and loading with an HTML5 backend. Leave a comment!

Outro

Not that I’m against Flash (looking at you, Apple), but JavaScript is much easier to learn and there is much potential in using it for things other than special effects and Web Applications. We’ve already recreated all the basic elements used in the Nintendo games of yore using CSS and jQuery; e.g., sprite animation (with many techniques) and parallax scrolling. Combined with the super fance sliding, fading, easing, and opacity animations we are already afforded, the browser is a feature rich playground for game developers. Hopefully we’ll see more techniques emerge, and with them more games. I am looking forward to jQuery being the new QBASIC.

References

Understanding @font-face and Typography

Thu, 04 Feb 2010 12:58:10 GMT

davidosomething.com currently uses the @font-face CSS rule to load and define fonts. The key point is that fonts, and not typefaces, are defined. A font is “any variant in a typeface’s size and style” (Jon Tan).

A key element missing from many @font-face resources online (e.g., tutorials, and CSS generators like Font Squirrel) is the definition of weight and style in the @font-face rule. These two properties are vital when you want to properly use a typeface. Many professional typefaces come in multiple files, splitting a typeface into bold, light, italics, oblique, and combinations of those. The font Aurulent used on davidosomething.com is one example, coming in four styles:

Aurulent Sans on Font Squirrel

A Demonstration of the Problem

Let’s take a look at what happens when you use this very typical CSS rule:

strong { font-weight: 700; }

with this HTML sample:

<strong>Hello world!</strong>

The CSS generated by Font Squirrel for Aurulent Sans (not to pick on them, others may do the same) looks like this:

/*
 * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish.
 *
 */

/*
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * @vendor:     Stephen G. Hartke
 * @licenseurl: http://www.fontsquirrel.com/license/Aurulent-Sans
 *
 *
 */

@font-face {
  font-family: 'AurulentSansRegular';
  src: url('AurulentSans-Regular.eot');
  src: local('Aurulent Sans Regular'), local('AurulentSans-Regular'), url('AurulentSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'AurulentSansItalic';
  src: url('AurulentSans-Italic.eot');
  src: local('Aurulent Sans Italic'), local('AurulentSans-Italic'), url('AurulentSans-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'AurulentSansBold';
  src: url('AurulentSans-Bold.eot');
  src: local('Aurulent Sans Bold'), local('AurulentSans-Bold'), url('AurulentSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'AurulentSansBoldItalic';
  src: url('AurulentSans-BoldItalic.eot');
  src: local('Aurulent Sans BoldItalic'), local('AurulentSans-BoldItalic'), url('AurulentSans-BoldItalic.ttf') format('truetype');
}

Properly defined, though, it should really look like this:

@font-face {
  font-family: 'Aurulent Sans';
  /* font-style/font-weight are normal/normal (400) when not specified */
  src: url('AurulentSans-Regular.eot');
  src: local('Aurulent Sans Regular'), local('AurulentSans-Regular'), url('AurulentSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Aurulent Sans';
  font-style: italic; /* not oblique! */
  src: url('AurulentSans-Italic.eot');
  src: local('Aurulent Sans Italic'), local('AurulentSans-Italic'), url('AurulentSans-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Aurulent Sans';
  font-weight: bold; /* or 700, but for semantics sake */
  src: url('AurulentSans-Bold.eot');
  src: local('Aurulent Sans Bold'), local('AurulentSans-Bold'), url('AurulentSans-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Aurulent Sans';
  font-style: italic;
  font-weight: bold;
  src: url('AurulentSans-BoldItalic.eot');
  src: local('Aurulent Sans BoldItalic'), local('AurulentSans-BoldItalic'), url('AurulentSans-BoldItalic.ttf') format('truetype');
}

In some browsers, such as Google Chrome 4 and 5.0beta (and probably other WebKit browsers but I am too lazy to test), the normal weight is used.

Mozilla Firefox 3.6 does a thing called faux bold, which uses math (devil’s magic!) to stretch the font and make it appear bold. The result is the top sample, while the true bold Aurulent Sans is on the bottom:

The difference is pretty clear in the letters e, w, and r. If you care enough about typography to be using @font-face, the top rendering should be considered blasphemous. Using the handcoded CSS with styles and weights in place, the true bold is used.

Font-family != Typeface != “font-face”

Once again:

A typeface is the collective design for a type family (e.g., the Garamond family).
A font is a typeface variant (e.g., Garamond Bold 12pt).
A font-face is your CSS font definition for a typeface, but may contain a fallback font in another typeface (see here) (e.g., src: url('garamond.otf'), local('Times New Roman');).
A font-family is a collection defined by font-faces. The members of a font- family are declared in each @font-face tag, counterintuitively. A font-family does not have to consist of one typeface! An example is the following:

CSS:

@font-face {
 font-family: 'VerdaTica';
 src: local('Helvetica');
}
@font-face {
 font-family: 'VerdaTica';
 font-style: italic;
 src: local('Verdana');
}
em { font-style: italic; }
body { font-family: VerdaTica, Sans-serif; }

HTML:

<p>I'm in Helvetica!</p>
<p>I'm in italic Verdana!</p>
<p>We're different font-faces (i.e. fonts, and also different typefaces) in the same font-family!</p>

Final Remarks

The w3c is redefining typography. What’s next, @char-face to let us define our own ampersands? @scar-face to let us define our own font texture overlay? (see what I did there)?

Cited

Typeface != Font http://jontangerine.com/log/2008/08/typeface–font
Font Squirrel | Free Font Aurulent Sans by Stephen G. Hartke http://www.fontsquirrel.com/fonts/Aurulent-Sans
beautiful fonts with @font-face http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Using Notepad++ for Web Development

Tue, 02 Feb 2010 09:27:01 GMT

I like real IDEs for console and application programming, but for web development I’ve always felt most comfortable using a text editor. Notepad++ is my editor of choice because it is fast and feature rich.

Editor Settings

Go to Settings -> Preferences to change the default settings for NP++.

I turn on Multi-Editing Settings, which allows you to make multiple selections and edit them at the same time. Basically, this gives you multiple cursors that output the same text. I switch the Folder Margin Style to Circle tree, just as a preference. I also turn on the vertical edge, setting it to Line mode at 80 columns. There are plenty of other things to switch around if you just poke around in there. Next, I go to Settings -> Style Configurator and change my global font settings.

Useful Plugins

The default interface of NP++ is perfectly fine for web development, but with a few changes, it becomes much more powerful. One of the best things you can do is enable the Explorer plugin. Plugins can be added by going to the Plugins dropdown menu and using the Plugin Manager. Several plugins come installed by default. I typically add to the defaults: Compare, Explorer, MultiClipboard, Subversion, WebEdit, and XML Tools. Here are some tips regarding plugins:

Enable the Explorer and MultiClipboard plugins in their respective menus in the Plugins menu. Check the settings for these plugins to see what they can do.
If you use Subversion, the Compare plugin can do quick checks against the base. Or, with any of the Tortoise versioning tools and the Explorer plugin, you never need to leave NP++ to do your version control.
Turn on the Console Dialog if you need to do anything from the command line. It even has special variables you can use (type ‘help’). If you type cmd from the console, you get a standard DOS prompt.
WebEdit gives you buttons that turn NP++ to a web editor with code wrapping. Use it by highlighting some text and clicking a button. The text will automatically be wrapped in tags. Read the instructions in Notepad++pluginsdocWebEditWebEdit.txt to learn how to add more.

Keyboard Shortcuts

There are a few gems I’ve really come to love: Ctrl-D to duplicate a line and Ctrl-(Shift)-U to toggle case. I also add Ctrl-; as short date format (I always liked that combination from Excel). The TextFX shortcuts are good things to map. You can add keyboard shortcuts through Settings -> Shortcut Mapper.

davidosomething.com

/uses-2021

Physical setup

Hardware

Main computer

Media computer

Phone

Audio

Watch

Software

Editor

Note Taking

Password manager

File sync and backups

/uses-2020

Physical setup

Hardware

Main computer

Media computer

Phone

Audio

Watch

Software

Editor

Notes

Password manager

File sync and backups

Website Rebuild for 2020

Changes since the site’s last iteration

Thoughts on the tech stack

Lint your markdown files with gulp‑remark‑lint‑dko

Whitespace settings in Vim

Settings

Filetype-local settings

Persistent file-local settings

Display options

list and listchars

tabstop=NUMBER

wrap

Whitespace in lines

backspace

expandtab

shiftwidth=NUMBER

softtabstop=NUMBER

shiftround

joinspaces

Indenting

autoindent

smartindent

cindent

indentexpr

copyindent

preserveindent

formatoptions and cpoptions

Plugins

EditorConfig

Auto-determine whitespace settings

Better indent visibility

Better whitespace visibility

Line splitting

Alignment

My Vim setup

Setting up Vim for JavaScript development

Installing plugins

Syntax

Plugins that provide better syntax support

Plugins that provide better indentation support

Related syntaxes

es.next / ES2016 / ES7 support

JSX support for React

JSON

JSDoc syntax highlighting

JSDoc auto-snippets

jQuery plugins

JavaScript libraries

Code completion for Vim

Omni completion

Extended omni-completion

Code-analysis based completion via TernJS

Function parameter completion