The Eclectic Quill

Website of Joshua McGee


Vedder Tuesday XL

The song "Future Days" from Lightning Bolt contains one of my favorite Vedder lyrics of all time: "All my stolen missing parts I’ve no need for anymore".  It's such a profound statement on the healing effects of a loving relationship.  I certainly understand.

Future Days

If I ever were to lose you
I'd surely lose myself
Everything I have found dear
I’ve not found by myself

Try and sometimes you'll succeed to make this man of me
All my stolen missing parts I’ve no need for anymore

I believe and I believe ‘cause I can see
Our future days, days of you and me

Back when I was feeling broken
I focused on a prayer
You came deep as in the ocean
It's something I can't hear

All the complexities and games, no one wins but somehow they're still played
All the missing crooked hearts, they may die, but in us they live on

I believe and I believe ‘cause I can see
Our future days, days of you and me

When the hurricanes and cyclones rage
When winds turn dirt into dust
When floods they came and the tides they raised,
Ever closer became us

All the promises at sundown
I met them like the rest
All the demons used to come round
I'm grateful now they've left

So persistent in my ways
Angel I am here to stay
No resistance, no alarms
Please this is just too good to be gone

I believe and I believe ‘cause I can see
Our future days, days of you and me
You and me
Days of you and me


Bob McDonnell on the importance of being a Christian elected official

It is such a joy to watch this guy crash and burn.


I understand the real importance of being Christian elected official, that it's not just what you say but it's also the style of how you say it, and acting in a degree of civility.

From the Garden of Eden… we believe that marriage is between a man and a woman, and other forms of relationships are just not gonna be recognized in Virginia. 

— Former Virginia Governor Bob McDonnell, convicted of 11 counts of corruption after his "I have a broken marriage" defense failed.


Gravlax recipe

Cooking day! My recipe for gravlax is extremely easy:

  1. Take two fillets of defrosted raw salmon (that have previously been deep-frozen), skin left on, of the same size.
  2. Thoroughly cover the orange sides with equal parts salt and sugar, plus black pepper to taste.
  3. Make a sandwich with the two pieces of salmon, skin-side out, containing a bunch of dill.
  4. Wrap very tightly in cellophane wrap, place in a shallow Tupperware-style container, place an identical container on top of it, and place a heavy weight in the upper container.
  5. Refrigerate two and a half days, flipping the sandwich over every twelve hours.
  6. After two and a half days: unwrap, discard dill, rinse salmon thoroughly, and cut thin slices at a bias.

Gravlax recipe in three steps



26 Tools Web Developers Shouldn’t Be Without

Front-end design is tough and time consuming, but also rewarding and tons of fun.  Where the fulcrum sits between those two is often decided by the quality of tools available to the designer.  Here are 26 tools that help shift the balance towards "fun and rewarding".


Need a quick look at how a piece of HTML will look in a browser?  Need to show a client a quick demo of an effect, or ask for help on a forum?

Real-Time HTML Editor is a quick and elegant cut-and-paste preview for HTML snippets.

CodePen is a slick, powerful editor and viewer for complex code snippets with sharing and community features.

JSFiddle is a power tool for rendering code demos with the ability to load a wide range of libraries and external resources and fork your own copies of demos.

Sprite sheets

Sprite sheets allow you to load one large image file instead of lots of small ones, and only show part of the image at a time, to decrease the number of requests and (often) the amount of data a page requires to load.

Stitches is a drag-and-drop HTML5 sprite sheet generator that optimizes positioning of your elements.

Sprite Cow calculates background-position and size of sprites from hand-rolled sprite sheets with a clean HTML5 interface.


Web design would be much easier if you only had to design for one browser and device.  Alas, that is far from the case.  These tools will help to make sure your page looks and works consistently across platforms.

Breakpoint Tester , through its mega-useful bookmarklet, identifies all media query breakpoints in a site's CSS and renders the site at those dimensions side-by-side.

CrossBrowserTesting will automatically take snapshots of a URL in over 1,000 possible configurations of browser, operating system, and plugin.  Very useful to make sure your site degrades cleanly in old browsers.  (This product has a subscription fee.) is a free tool to capture full-page screenshots of a URL.  It can save in a variety of formats and is free to use.

The Page Load Time Chrome plugin shows, at a glance, loading speed for a page in your browser toolbar.  You can get much more detailed information in your developer tools, but I like to have this open for every page to get a quick feel for what's going on.

Google Analytics Debugger , an official Google plugin, switches a site to the debug version of GA with the press of a button.  With it switched on, all calls to Google Analytics are logged verbosely in your console.

Do you use AdBlock ?  No?  Well, your readers do.  Make sure you check your sites with it installed to make sure the site degrades cleanly when ads are removed.


These awesome tools help generate the graphics that every page needs.

Pixlr is simply amazing.  It is an in-browser image editor with all the most-used features of Photoshop available to you, for free, in your browser.  You can export your files anonymously, but make sure to sign up to save to your online library. generates a variety of animated loader GIFs for you with your chosen colors.

EZGIF generates, decomposes, and edits animated GIFs online. generates base64-encoded data URIs of uploaded image files for you, and is super slick.


You need more than graphics, though.  These tools help with icons, colors, fonts, and more.

Favicon Maker , one of my sites, generates multi-resolution favicons and Apple touch icons for your site that you can download as a zip file.

Paletton , in beta as of this writing, is an immensely powerful color palette builder.

Google Fonts gives you free access to hundreds of fonts that you can hotlink for free.

Ultimate CSS Gradient Generator is exactly that: design your color gradients graphically and get the code to show the gradient properly in every browser.

SliderBuilder , another of my sites, lets you design and export slideshows and carousels through a powerful graphical editor.

Reverse Engineering

Every web designer has taken inspiration – sometimes liberally – from work seen on others' sites.  These tools help you figure out how to duplicate something.

With What The Font? , you upload an image of text (say, from a logo or header) and the software identifies the font used.

TinEye does a reverse search for images.  Useful if you're looking for the original of an image you see used online, or a larger version, or one without text or watermarks a later designer might have added.

The jQuerify bookmarklet injects jQuery into a page if it's not already loaded, allowing you to manipulate the DOM in the console.

The ColorZilla Chrome extension is worth installing if just for the eyedropper tool to grab colors out of a webpage.

jsbeautifier pretty-prints Javascript and HTML, and is very useful for de-obfuscating third-party Javascript.


And when you're just looking for inspiration -- effects and plugins you never knew you couldn't live without:

Check out one of my favorite sites, jQuery Rain , which shows you new plugins daily, many of which are free and open-source.

There you go.  See if those help work become more fun and less tedious.


Would YOU do something?

A deity without the power to act is not worthy of worship.  A deity without the interest to act is not worthy of respect.  A deity without the evidence of action is not worthy of belief.

Given the means and opportunity, would you intervene?  Wouldn't anyone?

Other Projects
Shoot the Rancors!
The Eclectic Quill
CSS Is Awesome!
Hey, did you know I run a bunch of other projects?