Skip to content

Technology

Entries related to techology in general…

Create CSS gradients using an online tool

I recently needed a gradient background for a page I was making. My usual method of creating gradient backgrounds is to muck around in my image editor until I find some combination I like, then futz around in my text editor getting the syntax just right for CSS gradients across all the browsers.

But then I discovered the Ultimate CSS Gradient Generator from ColorZilla. This handy tool lets you create gradients directly in the browser, and it outputs all the required codes for full browser support. The UI is very much like any image editor's gradient tool:

Drag the slider thumbs, click them to change the colors, click along the gradient to add color stops, etc. This tools works like a charm, and saves me a bit of time and aggravation whenever I need to make a CSS gradient.



Control animated GIF playback on WordPress sites

I wanted to embed an animated GIF in my post about changing the iOS Settings screen. However, because the GIF was about 4MB in size, I didn't want it to auto-load—and in general, I find auto-playing GIFs annoying. I wanted something that would stop and start on click, like this (wonderfully subtle) example GIF…

So I did what any WordPress user would do in such a situation: I went looking for a WordPress plug-in that offered control over GIFs.

I initially found WP GIF Player and GIF Animation Preview. Both did what I wanted, mostly, but they added a bunch of their own HTML and CSS, and/or relied on the WordPress media library (which I don't use). After testing both, I just couldn't get them to work with the GIF and the size/position that I wanted to use. Perhaps there are others that would work, but I got frustrated and gave up searching.

[continue reading…]



Heading into the secure zone…somewhat slowly

My blog is, and has been, hosted with 1and1 for many years. While I've had some minor issues during that time, I've been generally happy with their hosting. Recently I noticed that they now offer a free SSL certificate. The free certificate only covers one domain and no sub-domains, but that's all I needed for robservatory. I must say that 1and1 has made this incredibly easy: Enabling the certificate only took a couple mouse clicks, and it was active a minute or two later.

Getting the site actually secured, though, was and is a different story. You should see the secure site indicator on the front page, at least, indicating that you've made a secure connection to the site…

The "secure site" indicator as seen in Chrome…Safari uses an ugly gray lock.

Once you navigate back into the older posts, however, you'll probably lose the lock indicator. The connection is still secure, but the older posts have hardcoded image paths that start with http://, so they load non-securely.

I'm using that as an excuse to go through my old posts and update broken links, etc. This takes a while, but it's a good thing to do every so often. And note to self, never hardcode the full URL—I have no idea why I did that!

And yes, I could just do a mass replace in the database, but the audit has already helped me fix a couple handfuls of posts with errors.



Out with fluorescent garage lights, in with LEDs

I've converted most of our home to LED lighting—costs have plummeted in recent years, and when you combine LED lights' long lives with low energy costs, the payback period is incredibly short. Newer LEDs are also warmer in tone—we found some "soft light" 60W equivalent bulbs that are nicely warm (and warmer when dimmed). Through all of this, though, I had one area of the house I'd ignored: The garage.

Our garage has six (five overhead, one over a workbench) 48" long fluorescent hanging fixtures. I hate fluorescent bulbs, but the cost to replace them with LED-equivalent fixtures was high—about $300 to do all six. But the other day at Costco, I noticed they had two-pack FEIT 4' LED replacement bulbs—like these at Amazon—for only $18 (versus $28 at Amazon as I write this).

A "normal" 48" fluorescent tube light, as in this Sylania four-pack is around $6 or $7 per light. So while the LED bulbs are more expensive, a $3 difference isn't much at all given the lower engery usage and long life. (And the fluorescents in my garage go out quite often, even compared to indoor incandescents.) So I bought one box, as a test to use over the workbench.

Within a couple minutes of installing the LED tubes, I was headed back to Costco to buy five more boxes—the difference is that notable. Instant on, brighter and more-even light distribution, no flicker, and they should last nearly forever.

[continue reading…]



Construction of the Millau Viaduct

I've long been fascinated by massive engineering projects, whether they be for ships or tunnels or skyscrapers…or in this case, a bridge.

The Millau Viaduct is an amazing structure in the south of France; it spans a deep and wide valley with incredibly tall pylons and an elegant design.

Photo by logopop. [original photo]

While browsing YouTube the other day, for something completely unrelated (isn't it always like that?), I stumbled on this excellent show about the construction of the bridge:

https://www.youtube.com/watch?v=AHACv9hs9ds

Just amazing what they did to get that bridge built—and without a single worker injury of any note, despite working hundreds of feet above the ground for four years.



Easily copy or move a WordPress blog

I was looking for an easy way to make a development copy of the Many Tricks blog, which (like Robservatory) is powered by WordPress. In the past, I've done this manually, but it's a bit of a pain to get the required edits done correctly and make everything work at the new URL.

So this time, I went searching for a plug-in, and found Duplicator. Borrowing from the plug-in's description of itself…

Duplicator gives WordPress administrators the ability to migrate, copy or clone a site from one location to another. The plugin also serves as a simple backup utility. Duplicator supports both serialized and base64 serialized string replacement. If you need to move WordPress or backup WordPress this plugin can help simplify the process.

Once installed, usage is pretty easy: You follow a simple three-step process that creates a new package. Move that package to the new location, expand it, and then run the installer.php file. (I had to rename the three files from the package to remove everything except the filenames; the plug-in adds a bunch of identifying text in front of each filename.)

The installer asks questions about the new site's URLs and database connection info, then does its magic. I had a clone site up and running in minutes, saving what (for me) is usually an hour or so's aggravation. Duplicator should work equally well for moving a WordPress installation to a new host, too, though I haven't tested it in that situation (yet).



A tale of two remotes

Update: Thanks to John for pointing out the obvious: The old remote works with the new Apple TV. So I guess I can go ahead and replace the one in the bedroom.

We recently changed how we use some of our rooms (eliminated a kids' play room), and as a result, decommissioned a television set. With that TV was a new Apple TV; at first I thought "Great, I can replace the old Apple TV in our bedroom."

Then I remembered the remote. For a device that I often use either while running on the treadmill (yea, it's in our bedroom) or in the dark while going to sleep, the new Apple TV remote is unusable: The touch pad is a nightmare to try to use while running, and it's tricky to use in the dark. It's also nearly impossible to tell which side's up in the dark.

So no, new Apple TV, you're not going to replace the old one in our bedroom. I'm not sure what I'll do with the new one; we have another TV it could go on, but there's no open HDMI port (it's an old TV with just two HDMI ports, and it's got an Xbox and a Blu-ray player). Time for an HDMI switch box?

I'd love a non-touchpad remote for the new Apple TV, but I don't see Apple going that direction at all.



Useful site: Find and use fonts at Font Squirrel

I recently tweaked the look here a bit, greatly simplifying the fonts and lightening the visual weight of the site quite a bit.

As part of that process, I wanted to find a larger lighter yet highly legible font. So I went back to Font Squirrel, the same site I used in my 2014 redesign.

They offer a huge assortment of fonts, all licensed for free commercial use, with a nice set of categories and search engine. And free…though the tradeoff is a fairly heavy advertising load. After much looking and testing, I've got the site running on three font families: Open Sans for most of the content and sidebar, Open Sans Condensed for headlines, and Ubuntu Mono for code snippets.

As part of the cleanup, I was able to remove 40+ font-family and font-size statements from the CSS, and the site should scale a bit better on small-screen devices. (I'm still not completely happy with things, so expect minor changes going forward.)

Font Squirrel not only has a great collection of fonts, but they offer a free web font generator. Using the generator, you can create fonts that are embedded in your page, so that they're available even when users don't have those fonts installed locally. Just upload a font you're licensed to use, and Font Squirrel will create a web font, complete with CSS. Upload the converted web fonts to your server, copy and paste the CSS bit into your CSS master file, and you can use the fonts on your site.

There are 20 web fonts on the site now (two forms of 10 font faces across the three font families), and in total, they're 200KB in size—or less than the typical "larger" image I often post here.

There are lots of sites that offer free-to-use fonts; I really like the assortment at Font Squirrel, and the web generator is an added bonus.



Center embedded tweets on WordPress sites

WordPress has a neat built-in feature that, when composing a post, if you put the URL to a specific tweet on its own line, like this…

https://twitter.com/rgriff/status/827901296258584576

…then WordPress will automatically convert it to a tweet link, like this:

By default, though, the embedded tweets will be left-aligned. I wanted them center aligned, as above. And because I just wasted 15 minutes figuring this out, I'm documenting the solution here to save myself future aggravations…

[continue reading…]



Podcast appearance: The Next Track

This week, I made a rare appearance on a podcast other than our own The Committed podcast. I was a guest on The Next Track, a podcast about music and related things, hosted by iTunes AppleScript guru Doug Adams and my regular The Committed podcast cohost Kirk McElhearn.

We spent 30 minutes discussing ripping Blu-rays and DVDs to the Mac. I know, a real stretch topic for me, given I've never written about it!

Anyway, it was a fun show, so if you'd like to hear the voice behind these words, give it a listen.