# Growing with the Web

## Featured posts

Friday, 29 November 2013

# The q element

## Introduction

The q HTML element is used to represent an inline quote. Now regular quotes ("") can represent this just fine, surrounding the quote in the q tag differs in that it explicitly indicates that the text is a quote, removing ambiguities that it could be emphasis, irony, etc.

In addition to explicitly stating that the text is a quote, it also provides a way to consistently style all quotes with minimal markup.

## Usage

### A quote

To use the q element, surround the quote with the tag. Ensure you do not add quotes in addition to the q tag or they will come through twice.

<p>Gandalf opened the doors to Moria by saying <q>Mellon</q>.</p>

Sunday, 24 November 2013

# The samp element

## Introduction

The samp HTML element is used to represent (sample) output from a program. It has been around since HTML1, though back it was simply used to markup a sequence of literal characters.

By default samp is an inline element so it won't break the flow of the page, this means that it can be used within a block of text without any problems.

## Usage

### Inline sample output

The samp element can represent a program's output within a paragraph or block of text by simply wrapping the output in the tag.

<p>The browser will say <samp>404 Page Not Found</samp>.</p>

Thursday, 21 November 2013

# You can now inspect pseudo-elements in the Chrome DevTools!

The feature I've wanted for a very long time has finally arrived with Chromium v31; you can now inspect the :before and :after pseudo-elements within the Chrome DevTools! It is such a great quality of life change for anyone who spends a decent amount of time tinkering with CSS.

Previously you would have to find the pseudo-element styles within the styles of the parent, there would be no selection of the pseudo-element in the viewport and the width and height wouldn't display.

Monday, 18 November 2013

# The kbd element

## Introduction

The kbd HTML element is used to represent some form of user input. Typically it represents keyboard input (where its name comes from) but can be used to represent any type of input that can be represented in text, such as voice commands. While it may not be familiar to most web developers it has actually been part of HTML since the first proposal for a specification (HTML1 was 1993!), though the meaning has changed quite a bit since then.

## Usage

There are a few different ways to use it as defined by the HTML5 spec.

### Keystrokes

The kbd element by itself generally represents a keystroke.

<p>Press the <kbd>Space</kbd> key to continue.</p>


When chaining keys together, ideally you would nest each keystroke within their own kbd element.

<p>Press <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> to save.</p>

Sunday, 20 October 2013

# Moving to the US for work

I eventually made it to the US in September and have started working at Amazon! It was a pretty intense period in the couple of months leading up to leaving Australia. I have compiled a list of things that that helped me and also what I wished I had known before starting the move.

There is a tonne of paperwork needed to make a move like this, from tax documents to housing applications, a lot of which you'll need to send or change multiple times. It's pretty important because of this that you keep everything organised so that you can find everything easily.
The vehicle in which you keep your items organised is up to you, make a good effort to keep it up though. Personally I used Google Drive and its fairly new scan functionality to keep all my documents organised and available on all my devices.
Saturday, 12 October 2013

# CSS multi-coloured rectangular borders

The borders in CSS are weighted equally which means if their colours differ, the split between them will be diagonal. This is the reason that CSS triangles work the way they do. Say your design wanted a more rectangular border though, where the top and bottom extended all the way out and covered the bottom portion of the left and right borders.

You can do this a couple of ways.

Wednesday, 9 October 2013

# Greatest common divisor (GCD) with working

The one thing I hated about maths in school and university was the fact that I had to show my working. Of course I knew that it helped the marker see that you understood the problem, but I just found it incredibly tedious. Particularly when I knew the answer right after reading the question.

I recall back in university I was asked many times to find the greatest common divisor (GCD) of two integers using Euclid's algorithm. This is basically the exact situation I described above, you can work out the greatest common divisor in your head fairly easily with a smallish number but to actually show your working can take a quite a bit of writing.

Find the greatest common divisor of 108 and 30

108 = 30 x 3 + 18
30 = 18 x 1 + 12
18 = 12 x 1 +  6
12 =  6 x 2 +  0
^

gcd(108, 30) = 6


So after doing it a couple of times I went ahead and spent a few minutes writing a little program that solved the problem with working shown. I lost the original source but have reproduced it for a little fun. :)

Monday, 7 October 2013

# How to add an icon to the Sublime Text context menu in Windows

Currently the Sublime Text installer doesn't add an icon to the 'Open with Sublime Text' context menu that appears when right-clicking a file. I've only recently switched over to Sublime from Notepad++ which does have the icon and it's just a nice thing to have because it allows you to spot it in the menu faster.

In order to add the icon we'll need to play around in the registry a bit. I wouldn't recommend proceeding if you aren't confident editing the registry as you can totally screw up your computer if you change the wrong thing. This tutorial was made using Windows 8 but I expect the process is very similar if not identical in Windows Vista and Windows 7.

Tuesday, 1 October 2013

# Advanced media queries with SASS and LESS

SASS and LESS both have handy features to allow media queries to be written once and used throughout a project, but both have their own unique was of doing so.

Just as a refresher, here is a regular CSS media query. This one applies two styles to <img> elements, but only when the browser is in the screen category (as opposed to print) and the width of the page is less that 15ems.

@media screen and (max-width: 15em) {
img {
float:none;
width:100%;
}
}


This becomes very difficult to manage when you start using the same query in multiple places, or worse, when there is more than one type of media query. That's where our trusty pre-processors SASS or LESS come in. Not only do they allow us to write the media queries once and use everywhere, but we can place all of them together in their own isolated file to simplify future refactors.

Friday, 27 September 2013

One of the first things I wanted to do after moving was to switch my Google account's country to USA so I could play around with the US-only features on products like Google Now.

After searching for a while I couldn't really find much other than people saying to call them, so I did. Turns out it's all based on the billing address on Google Wallet, here is the process you follow to update your region without waiting.