Posts in the Hacks Category

The Graphical Command Line Interpreter (GCLI) has been removed from Firefox, but screenshot has been revived as :screenshot in the Web Console (⌥⌘K), with most of the same options discussed below. Thus, portions of this article have become incorrect as of August 2018.  Read about the changes in my post Firefox’s :screenshot Command.

Everyone has their own idiosyncratic collection of tools they can’t work without, and I’ve recently been using one of mine as I produce figures for CSS: The Definitve Guide, Fourth Edition (CSS:TDG4e).  It’s Firefox’s command-line screenshot utility.

To get access to screenshot, you first have to hit ⇧F2 for the Developer Toolbar, not ⌥⌘K for the Web Console.  (I know, two command lines — who thought that was a good idea?  Moving on.)  Once you’re in the Developer Toolbar, you can type s and then hit Tab to autocomplete screenshot.  Then type a filename for your screenshot, if you want to define it, either with or without the file extension; otherwise you’ll get whatever naming convention your computer uses for screen captures.  For example, mine does something like Screen Shot 2015-10-22 at 10.05.51.png by default.  If you hit [return] (or equivalent) at this point, it’ll save the screenshot to your Downloads folder (or equivalent).  Done!

Except, don’t do that yet, because what really makes screenshot great is its options; in my case, they’re what elevate screenshot from useful to essential, and what set it apart from any screen-capture addon I’ve ever seen.

The option I use a lot, particularly when grabbing images of web sites for my talks, is --fullpage.  That option captures absolutely everything on the page, even the parts you can’t see in the browser window.  See, by default, when you use screenshot, it only shows you the portion of the page visible in the browser window.  In many cases, that’s all you want or need, but for the times you want it all, --fullpage is there for you.  Any time you see me do a long scroll of a web page in a talk, like I did right at the ten-minute mark of my talk at Fluent 2015, it was thanks to --fullpage.

If you want the browser --chrome to show around your screenshot, though, you can’t capture the --fullpage.  Firefox will just ignore the -fullpage option if you invoke --chrome, and give you the visible portion of the page surrounded by your browser chrome, including all your addon icons and unread tabs.  Which makes some sense, I admit, but part of me wishes someone had gone to the effort of adding code to redraw the chrome all the way around a --fullpage capture if you asked for it.

Now, for the purposes of CSS:TDG4e’s figures, there are two screenshot options that I cannot live without.

The first is --selector, which lets you supply a CSS selector to an element — at which point, Firefox will capture just that element and its descendants.  The only, and quite understandable, limitation is that the selector you supply must match a single element.  For me, that’s usually just --selector 'body', since every figure I create is a single page, and there’s nothing in the body except what I want to include in the figure.  So instead of trying to drag-select a region of the screen with ⇧⌘4, or (worse) trying to precisely size the browser window to show just the body element and not one pixel more, I can enter something like screenshot fig047 --selector 'body' and get precisely what I need.

That might seem like a lot to type every time, but the thing is, I don’t have to: not only does the Web Toolbar have full tab-autocomplete, the Toolbar also offers up-arrow history.  So once I’ve tab-completed the command to capture my first figure, I just use the up arrow to bring the command back and change the file name.  Quick, simple, efficient.

The second essential option for me is --dpr, which defines a device pixel ratio.  Let’s say I want to capture something at four times the usual resolution.  --dpr 4 makes it happen.  Since all my figures are meant to go to print as well as ebooks, I can capture at print-worthy resolutions without having to use ⌘+ to blow up the content, or fiddle with using CSS to make everything bigger.  Also if I want to go the other way and capture a deliberately pixellated version of a page, I can use something like --dpr 0.33.

I have used this occasionally to size down an image online: I “View Image” to get it in its own window, then use screenshot with a fractional DPR value to shrink it.  Yes, this is a rare use case, even for me, but hey — the option exists!  I haven’t used the DPR option for my talks, but given the growing use of HD 16:9 projectors — something we’ve been using at An Event Apart for a while now, actually — I’m starting to lean toward using --dpr 2 to get sharper images.

(Aside: it turns out this option is only present in very recent versions of Firefox, such as Developer Edition 43 and the current Nightlies.  So if you need DPR, grab a Nightly and go crazy!)

And that’s not all!  You can set a --delay in seconds, to make sure a popup menu or other bit of interaction is visible before the capture happens.  If you want to take your captured image straight into another program before saving it, there’s --clipboard.  And there’s an option to upload straight to --imgur, though I confess I haven’t figured out how that one works.  I suspect you have to be logged into imgur first.  If anyone knows, please leave a comment so the rest of us know how to use it!

The one thing that irks me a little bit about screenshot is that the file name must come before the options.  When I’m producing a bunch of figures in a row, having to drag-select just the file name for replacement is a touch tedious; I wish I could put the file name at the end of the command, so I could quickly drag-select it with a rightward wrist-flick.  But all things considered, this is a pretty minor gripe.  Well, shut my mouth and paint me red — it turns out you can put the filename after the options.  Either that wasn’t possible at some point and I never retested the assertion, or it was always possible and I just messed up.  Either way, this irk is irksome no more!

The other thing I wish screenshot could do is let me define a precise width or height in pixels — or, since I’m dreaming, a value using any valid CSS length unit — and scale the result to that measure.  This isn’t really useful for the CSS:TDG4e figures, but it could come in pretty handy for creating talk slides.  No, I have no idea how that would interact with the DPR option, but I’d certainly be willing to find out.

So that’s one of my “unusual but essential” tools.  What’s yours?

• Essential Tool: Firefox’s screenshot Command was published on Thursday, October 22nd, 2015.
• It was assigned to the Browsers, Hacks, and Tools categories.
• There have been twenty-one replies.

At least two of our three kids had a hard time being put to sleep at night.  It wasn’t so much that they objected to sleeping — once they were out, they stayed out all night — as they got very anxious about being left alone.  I’m not talking about one-week-olds here; I’m talking more the 3-9 month range.  We’d cuddle them to sleep, put them down very gently, cautiously trace a silent path along the non-creaking floorboards, noiselessly pull the door shut…and then the wailing would start.

But then we noticed that when we went back in to pick them and soothe them, they would take a great big indrawn breath, hold it, release, and settle down.  We wondered: could they be relaxing because they smelled us, and that scent was triggering feelings of comfort and safety?

From then on, we would put the little one down to sleep, take off our shirt, and arrange the shirt in a wide horseshoe around the head and upper body of the sleeping baby, at least a foot separated on every side to avoid smothering risks.  And…it worked.  There was a lot more sleeping and a lot less waking up wailing.  The scent seemed to give them what they needed to stay relaxed and asleep.

It probably won’t work for every child who has trouble sleeping, but if you’re having the same problem we did, try (safely!) surrounding them your shirt or some other article of clothing that smells like you.  It might be just what they need to settle down and let you get some rest.

• The Scent of a Parent was published on Thursday, October 4th, 2012.
• It was assigned to the Hacks and Parenting categories.
• There have been four replies.

When you have children who are new to walking, getting things out of a car while in a parking lot can be a nerve-wracking experience: you know that your kid is capable of walking in any direction, and also that they’re not really aware of the dangers a parking lot can contain.

Following the philosophy of “don’t baby-proof the environment, make the baby proof for the environment”, we had two parking lot rules that worked out pretty well, used for different stages of development.

1. Hand on the car.  When out of the car, one of the child’s hands must always be touching the car unless a parent is holding their hand.  This sets a bound on how far away they can get from you.
2. Feet on the yellow line.  The lines separating parking spaces are treated as if they’re balance beams.  The child can walk along the line, but not step off of it, unless a parent is holding their hand.  This keeps the child between cars and away from the flow of traffic.

Obviously, these require training periods, and during that training you have to keep an eagle eye on the kid.  And of course you can’t rely on these rules to keep your children completely safe in a parking lot — only you can do that.  In our experience, though, it greatly reduced our stress levels even in busy Christmas-time lots; plus, it was another way to stress the importance of both safety and obedience.

• Parking Lot Safety was published on Friday, June 1st, 2012.
• It was assigned to the Hacks and Parenting categories.
• There have been seven replies.

I get asked from time to time for my number one tip for new parents.  My answer is always a single word.

“Earplugs.”

Seriously.  Get some earplugs.  They don’t have to be fancy; the squishy yellow foam plugs you can get in a cardboard holder for a dollar work just fine.  If you already have some fancier in-ear jobs for rock concerts or woodworking or whatever, those are good too.

Because as much as you love your new baby, and as much as you will work to keep them calm and happy, there will almost certainly be times when they are hurting or uncomfortable or just generally upset and unable to be soothed.  No matter how much you cuddle and sing and swaddle, they will scream and cry.  Some kids will do this rarely.  Others will do it all the time.  (A friend of ours tells how her eldest child screamed more or less non-stop from the day she was born until the day she walked.)  I don’t honestly know which is harder to handle, but I do know that the screaming worked its way through my eardrums and into my brain to induce a panicked pseudo-flight-or-flight response.  It was cumulatively, enormously stressful.

Earplugs do not shut out the cries completely.  You will not be denying your baby’s distress or placing unwarranted distance between you and your child.  Earplugs simply take the raw, serrated edge off their cry, giving you some mental space to cope with it and be a calmer and therefore better parent.  It lets you hang in there longer, putting off the point where you have to put the baby in the crib and walk away for a few minutes.  (And that’s okay too; the baby won’t die if you take five to regroup.)  That means more direct contact with your baby, and possibly a shorter time to a calm baby due to longer, more continuous periods of parental contact.

So: earplugs.  Probably the highest-ROI parental purchase I ever made.

• Plugging Up was published on Friday, April 27th, 2012.
• It was assigned to the Hacks and Parenting categories.
• There have been eight replies.