Blogs about web-development

Keyboard Shortcuts for Web Dev Tools Inspector and Console.

Sometimes, right clicking on something in a browser and picking "Inspect" from the context menu just isn't fast enough for me. I wanted to find a way to quickly open the Inspector and Console tabs in a browser's web developer tools, so naturally I turned to keyboard shortcuts. I've compiled a reference of the commands for Firefox and Chrome here.

Firefox:

• Inspector: Ctrl Shift c (Cmd Option c on OSX)
• Console: Ctrl Shift k (Cmd Option k on OSX)

Even better, the Web Dev tools will open up - with the last active tab - when you hit your F12 key. (In OSX, use fn F12 if you haven't enabled the "Use all F1, F2, etc keys as standard function keys" Keyboard Preference.)

Chrome:

• Inspector: Chrome doesn't have a keyboard shortcut specific to "Elements" (Inspector), but Ctrl Shift i (Cmd Option i on OSX) will open the most recently used tab, just like F12.
• Console: Ctrl Shift j (Cmd Option j on OSX)

The DL Element.

At a conference earlier this year, I was asked what my favorite HTML element was. In fact, I do have one: the Definition List, along with its children Definition Term and Definition Description. The definition list is great because it provides an inherent semantic relationship between two elements - the term and the one or more descriptions. I feel like these elements are under-used; especially considering that they've been around since HTML 4.01.

I was going to invent a clever example to demonstrate the definition list, but I don't think I can do any better than the one provided by the Mozilla Developer Network:

Firefox

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

Here is the source code for that:

Firefox

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

This shows one term (Firefox) along with two definitions of that term. Because it's a list, you can add as many groups of terms and definitions as needed for your content.

Spinning Up a New GitHub Pages Site.

Pages might just be one of my favorite things about GitHub. Though I often use them for lists of links to go along with my presentations, they are capable of much more complex static sites.

Here is a quick reminder of how to set up a new GitHub Pages site:

1. Create a new repo on GitHub.
2. Don't create any new files yet, even licenses or readmes. If you have already created files, then stash them.
3. Clone that repo locally and check out a new gh-pages branch (git checkout -b gh-pages).
4. Pop any files you've stashed. Add any other files you want in your repo.
5. Commit the changes, and then push the gh-pages branch up to Github.

You're done! You can now view your new page at https://[your-user-name].github.io/[your-repo-name]/.

If you have somehow ended up with a master branch with commits, you can remove it thusly:

• On the GitHub site, make the gh-pages branch the default.
• Delete the master branch both on the GitHub site and locally.

Orphans and Widows in Wider CSS Contexts.

Currently, orphans and widows aren't supported unless you're working inside paged media or columns. Phooey on that - I've got a few use cases where it would be nice to use it in other contexts.

Multiline Headline.

Here is a multiline headline inside an element whose width leaves just one word on the bottom line: It would be nice if a declaration of orphans: 4; on the headline caused the browser to reflow the text so that 4 was the minimum number of words remaining in the bottom line of the paragraph.

Flexbox.

Here is a group of images arranged with flexbox, and just one lonely element stretched at the bottom of the group: It would be nice if a declaration of orphans: 2; on the flexboxed element caused the browser to try its best to arrange the child elements so that 2 was the fewest number of children at the bottom row.

Print vs. Online Products.

Let us take a little time to compare and contrast printed products with their online counterparts - such as a printed newspaper and the same newspaper's website.

The printed version is tangible and tactile. Once printed, it can't be revised by the creator, though the user can make notes on the paper. Since it's a tangle product, the user must find a way to dispose of the used product; which may be repurposed as combustion or packing material. Each newspaper will probably only be used by one or two users.

The online version is interactive: searchable and sharable. It is easily updated. The website is much more likely to be seen by users outside of the physical area of the newspaper. Many users will use the same "version" of the paper, which can generate comments and discussions.

These are completely different products, even though they share the same content.