The Eclectic Quill

Website of Joshua McGee

By

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

gravlax-complete

By

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".

Demonstration

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.

Testing

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.)

web-capture.net 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.

Graphics

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.

ajaxload.info generates a variety of animated loader GIFs for you with your chosen colors.

EZGIF generates, decomposes, and edits animated GIFs online.

duri.me generates base64-encoded data URIs of uploaded image files for you, and is super slick.

Design

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.

Inspiration

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.

By

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?

By

Batman called…

Batman called. He says "Make your own damned sandwich"

By

Badass programmers

I strongly recommend everyone (especially non-techies) read the discussion "Who are/were some of the most badass computer programmers?" at Quora.  It's too easy for non-programmers – even for programmers – to forget that all software, at its foundation, is written by human beings.  Everything is somebody's baby.  Just turns out that some mommies and daddies are WAY more badass than others.

My list of utter badasses would include the following:

badass-programmers

  1. Ada Lovelace
  2. Alan Turing
  3. Dennis Ritchie
  4. Donald Knuth
  5. Jeff Dean
  6. Linus Torvalds
  7. Richard Stallman
  8. Steve Wozniak
  9. Tim Berners-Lee

Check out the Wikipedia pages I linked to, and realize just how much they shaped the world we live in.

×
Other Projects
ManyLittleApps
ManabaseCrafter
pjsho.ws
Picflood
Shoot the Rancors!
The Eclectic Quill
CSS Is Awesome
Derange.it!
ScotchTasting.info
Hey, did you know I run a bunch of other projects?