Always uses dashes in filenames

In these days of cloud storage, file synchronisation, and sharing on social media it's more important than ever to properly name files.

Spaces make sense in written language but computers don't like them. Try to use a space in a filename in a URL and it'll replace it with %20. Try to do anything on the command line and you'll have to wrap the filename in double quotes.

The two common conventions are underscores (_) and hyphens (-). One convention used commonly in Unix/Linux filenames is to use underscores to separate words in the file title, and hyphens to separate the title from version number. For example Apache modules take the form of file_name-version.extension, eg. mod_ftp-0.9.6.tar.gz.

Turns out if your filename is ever to be processed by a regular expressions (such as by the Google indexer!) the underscore will be removed and filename concatenated. When using the the \w operator to find words the underscore is ignored, but the hypen is not.

Always use dashes in filenames instead of spaces or underscores.

CSS Selectors

I can never remember the syntax for this stuff.

Select by attribute presence

<p>This paragraph has a <a href='#'>link</a> in it.</p>  
[href] { background : cyan; }

This paragraph has a link in it.


Combine with element

<p title='wigwam'>This paragraph has a title attribute.</p>  
p[title] { background : cyan; }  

This paragraph has a title attribute.

Putting a space between p and [title] would specify the children of paragraph with title attributes.

<p>This paragraph has a couple of <span title='wigwam'>spans</span> with a <span title='wigwam'>title</span> attributes.</p>  
p [title] { background : cyan; }  

This paragraph has a couple of spans with a title attributes.


Target an attribute and its contents

The content of an attribute can also be specified by having the attribute equal something

<p>This paragraph has a couple of <span title='t1'>spans</span> with different <span  
title='t2'>title</span> attributes.</p>  
[title="t1"] { background : cyan; }
[title=t2] { background : yellow; }

This paragraph has a couple of spans with different title attributes.


Target a specific word in the attribute

Using the tilde (~) it is possible to target by a single string in a space separated list.

<p>This paragraph has a couple of <span title='one two three'>spans</span> with different <span title='one three four'>title</span> attributes.</p>  
[title~="one"] { font-weight : bold; }<br/>
[title~="two"] { background : cyan; }

This paragraph has a couple of spans with different title attributes.

It is also possible to target a substring at the end using the dollar ($) sign.

<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='donedown'>title</span> attributes.</p>  
span[title$="one"] { background : cyan; }  

This paragraph has a couple of spans with different title attributes.

To target a substring at the beginning use the caret (^) sign.

<p>This paragraph has a couple of <span title='twotone'>spans</span> with different <span title='onedown'>title</span> attributes.</p>  
span[title^="one"] { background : cyan; }  

This paragraph has a couple of spans with different title attributes.

It is also possible to target an exact match followed by anything separated with a dash using the pipe (|) symbol.

<p>This paragraph has a couple of <span title='one-up'>spans</span> with different <span title='one-down'>title</span> attributes.</p>  
span[title|="one"] { background : cyan; }  

This paragraph has a couple of spans with different title attributes.

Lastly we can do a full text search using the asterisk (*)

<p>This paragraph has a couple of <span title='donedown'>spans</span> with different <span title='doneup'>title</span> attributes.</p>  
span[title*="one"] { background : cyan; }  

This paragraph has a couple of spans with different title attributes.


Attribute stacking

Attribute selection can also be stacked to give even finer control of selection.

<p>This paragraph has a couple of <span class='onetwothree' title='onetwothree'>spans</span> with different <span class='twothreefour' title='onetwothree'>title</span> attributes.</p>  
span[class~='one'][title*="two"] { background : cyan; }  

This paragraph has a couple of spans with different title attributes.


Outputting attributes

An element's attribute can also be used in pseudo-elements for output.

<p>This paragraph has a <a href='https://lewiswalsh.com'>link</a> with a dynamically printed href.</p>  
a:after { content: " (" attr(href) ")"; }  

This paragraph has a link with a dynamically printed href.


Case sensitivity

By default all CSS attribute selectors are case-sensitive. To make the selection case-insensitive add an 'i' to the end of the selection.

[title*="one" i] { }

Javascript Media Queries

Javascript media queries used to be a pain in the butt. I won't go in to why because thanks to window.matchMedia it's now very easy.

window.matchmedia has a matches property which returns a boolean value, so to run it once just use it something like and if statement:

if(window.matchMedia("(min-width: 500px)").matches) {  
  /* the viewport is at least 500 pixels wide */
} else {
  /* the viewport is less than 500 pixels wide */
}

It's also possible to add a listener to call a function to run some code whenever the query return value changes:

if(matchMedia){ // Only run if matchMedia is supported  
  const media_query = window.matchMedia("(max-width : 500px)"); // Create media query
  media_query.addListener(widthChange); // Optional listener with function to run
  widthChange(media_query); // Initial run
}

function widthChange(media_query){  
  if(media_query.matches){ // If the media query resolves true
    // window width is under 500px wide
    console.log('Under');
  } else {
    // window width is more than 500px wide
    console.log('Over');
  }
}

Neat Vanilla JS on HackerNews

I recently saw this video by Gordon Zhu highlighting the small but extraodinarily clever JavaScript on the Hacker News website.

I felt it would help me if I simplified it and broke down the steps for future reference. I'm using Paul Buchheit's code verbatim, I hope he doesn't mind, full credit to him.

What does this achieve?

This code is called when an anchor (a link) is clicked to vote up an item on Hacker News. It casts the vote and hides the vote up link so it can't be clicked again.

HTML

The markup for this is REALLY simple. It's a perfect example of progressive enhancement. The full URL is present in the HREF so if JavaScript is turned off the onclick is never called but the vote is still cast.

<a id="up_11659026" href="vote?for=11659026&dir=up" onclick="return vote(this);">Vote Up</a>  

JavaScript

No JQuery here! This is concise and elegant vanilla JS. The only JS on the site is following two functions, with the latter calling the former.

function hide(id){  
  var el = document.getElementById(id);
  if (el) { el.style.visibility = 'hidden'; }
}
function vote(node){  
  var v = node.id.split(/_/);
  var item = v[1];
  hide('up_'   + item);
  hide('down_' + item);
  var ping = new Image();
  ping.src = node.href;
  return false;
}

How does it work

  1. When the link is clicked the vote() function is called with the anchor (<a>) element passed as this
  2. The id, up_11659026, is split at the underscore and the parts passed to an array, v
  3. A new var, item, is given the value at v[1], in this case 11659026
  4. Two calls are made to the hide() function, one with the value up_11659026, and one with the value down_11659026
  5. The hide() function looks for an element with the passed id, if it finds it, the visibility of the element is set to hidden
  6. A var is created, ping, and is an instance of JavaScript's Image object.
  7. By setting the src of ping to the href of the clicked element, the URL is called (in this case a vote is cast by the back-end)
  8. Nothing is returned or rendered as it's unnecessary.
  9. We return false to stop the URL being followed by the browser
  10. If JavaScript is turned off in the browser, the URL is followed when clicked and the same outcome occurs.

Node on Ubuntu on Vagrant on Hyper-V

The following is how I got NodeJS running on Ubuntu using Vagrant in Windows with Hyper-V.

Why Hyper-V?

Paying for VMWare goes against my open-source leanings, and I'm a lone dev so any expenses have to be seriously considered.

Virtualbox is a great product and I've used it a lot in the past but I never liked the networking stuff it added to my system. I've tried using Vagrant with Virtualbox on Windows before and always come against folder and file permissions and syncing problems. I have problems with Oracle too.

Hyper-V on the other hand is baked natively in to Windows 8.1 and higher (I'm using Windows 10). It's straightforward to enable, configure and plays nicely with the Windows filesystem and networking stack.

Why Ubuntu?

I've used it more than any other Linux distribution. I'm very familiar with configuring it and running it in production. I dare say the steps I outline below are fairly 'box' agnostic though.

Step 1. Install Vagrant

Head on over to https://www.vagrantup.com/downloads.html to download the installer, run it and wait for it to finish.

Step 2. Enable Hyper-V

Go to Uninstall or change a program, you can find this in the toolbar on This PC, via the control panel, or just search for it.

Next click on Turn Windows features on or off on the left side of the screen. And make sure Hyper-V is checked.

Enabled Hyper-V

You might have to reboot to fully enable Hyper-V but once it's enabled you can check it under the performance tab in the task scheduler

Check Hyper-V is enabled

Step 3. Create Hyper-V network switch

This step is really important. If you do not do this, Vagrant will not be able to connect to the box. So hit your Start button and search for Hyper-V Manager. Once in, find Virtual Switch Manager...

Hyper-V Virtual Switch Manager link

In the 'Virtual Switch Manager' select New virtual network switch, now you have three choices:

New virtual network switch

External creates a network switch that is connected to your system's physical network. This will allow your Vagrant box to connect to the outside world, and vice versa.

Internal creates a network switch that allows your host system and the virtual machines in Hyper-V to talk to each other. If you select this option, your Vagrant will not have internet access.

Private creates a network switch that can only be used by the virtual machines. This is useless for Vagrant.

I suggest using External as it means I can use apt-get etc. So select External and hit Create Virtual Switch. All you need do now is give your virtual switch a name. Hit 'OK' and close the Hyper-V Manager.

Step 4. The Vagrantfile

Now we have the host operating system set up and Vagrant installed it's time to actually create a Vagrant box.

In the directory your project with be in type the following command:

vagrant init  

This will create a single file called Vagrantfile in your directory. This file is all you need and is where you'll put your instructions for setting up your Vagrant box.

Ignoring all the comments and remmed out statements, the basic Vagrantfile looks like this:

Vagrant.configure(2) do |config|  
  config.vm.box = "base"
end  

That's it. The base box is the default and is all well and good, but I want 64bit Ubuntu. So change "base" to "hashicorp/precise64". If you want a different base system, you can find more pre-built boxes at https://atlas.hashicorp.com/boxes/search

Next we have to tell Vagrant to use Hyper-V as I think it defaults to 'Virtualbox', so add the following line:

Vagrant.configure(2) do |config|  
  config.vm.box = "hashicorp/precise64"
  config.vm.provider "hyperv"
end  

Finally, we want to make sure the Vagrant box has access to the public network (the internet) so we can grab apt packages and the like. So add the following line:

Vagrant.configure(2) do |config|  
  config.vm.box = "hashicorp/precise64"
  config.vm.provider "hyperv"
  config.vm.network "public_network"
end  

This is the absolute basics we need. Save your Vagrantfile and we're ready to fire it up.

Step 5. vagrant up

One quirk of Vagrant on Hyper-V is that it must be run as Administrator. So whether you're using Command Prompt, Powershell, Cygwin, or Git Bash, you need to make sure you run it as Administrator.

So to get things going open your CLI window, navigate to your project folder and type:

vagrant up  

If you see an error regarding the provider, you may need to force the use of Hyper-V:

vagrant up --provider=hyperv  

If all goes well, you should see something along the lines of the following. It might take a while as it has to download the virtual hard drive for the Ubuntu version we selected. Also, because we're using Linux with Windows, Vagrant needs to set up a Samba share. So you'll need to enter your Windows credentials.

$ vagrant up
Bringing machine 'default' up with 'hyperv' provider...  
==> default: Verifying Hyper-V is enabled...
==> default: Importing a Hyper-V instance
    default: Cloning virtual hard drive...
    default: Creating and registering the VM...
    default: Successfully imported a VM with name: precise64
==> default: Starting the machine...
==> default: Waiting for the machine to report its IP address...
    default: Timeout: 120 seconds
    default: IP: 192.168.1.174
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 192.168.1.174:22
    default: SSH username: vagrant
    default: SSH auth method: password
    default:
    default: Inserting generated public key within guest...
    default: Removing insecure key from the guest if it's present...
    default: Key inserted! Disconnecting and reconnecting using new SSH key...
==> default: Machine booted and ready!
==> default: Preparing SMB shared folders...
    default: You will be asked for the username and password to use for the SMB
    default: folders shortly. Please use the proper username/password of your
    default: Windows account.
    default:
    default: Username: xxxxx
    default: Password (will be hidden):
    default: Password (will be hidden): xxxxxxxx
==> default: Mounting SMB shared folders...
    default: C:/Users/lewis/Desktop/vagrant test => /vagrant

If you see something like above then everything ran fine. You can SSH in to your box by typing vagrant ssh

Some useful Vagrant commands are:

vagrant upCreate a box or start from halt
vagrant haltGraceful shutdown
vagrant destroyRemove the box
vagrant suspendPause box at exact state
vagrant resumeResume from suspend
vagrant reloadReboot, maybe after a config change
vagrant provisionRe-run the provisioning stuff
vagrant sshSSH in to your box

More can be found on the Vagrant website

Step 6. Provisioning and NodeJS

Every time you create a box from a Vagrantfile or vagrant up after a vagrant destroy, Vagrant will create your box from scratch. While we could install all the software we need each time, it makes sense to tell Vagrant to do it for us. This is known as provisioning.

To get started with provisioning NodeJS, create a new file called bootstrap.sh. This is a bash script where we'll put in the commands we need to run. I'm going to install NVM, the node version manager. This is because NodeJS release new versions very fast so I'm happy to actually select my NodeJS version manually.

#!/usr/bin/env bash

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash  

Now in your Vagrantfile add the following line. The important part here is at the end, priveleged: false. By default provisioning scripts run as sudo but we want NVM installed as the vagrant user.

config.vm.provision :shell, path: "bootstrap.sh", privileged: false  

So now your whole Vagrantfile should look like this:

Vagrant.configure(2) do |config|  
  config.vm.box = "hashicorp/precise64"
  config.vm.provider "hyperv"
  config.vm.network "public_network"
  config.vm.provision :shell, path: "bootstrap.sh", privileged: false
end  

In your bootstrap.sh you would also put anything else you want run automatically. Such as setting environment variables, pulling from a remote repository, or even installing a database system like Redis.

All done

This is just basic steps to get NodeJS running in Ubuntu with Vagrant using Hyper-V on Windows. There is a lot more to Vagrant than I can cover here, so I suggest you start with their Getting Started guide.