I’ve been updating my A useless analysis of macOS (OS X) release dates post for nearly 13 years now (OMG). Over the years, the one thing that’s bugged me was that I couldn’t find a good way to have fixed column headings on that post’s incredibly long scrolling table.
Hooray for fixed headers! Read on if you’d like to use this trick yourself…
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.
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.
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…
Whether writing here or on Macworld, I often find myself relying on tables to convey lots of data points in an easy-to-read manner. As examples, check out the tables in my Nintendo add-ons pricing rant, or in my analysis on the cost of LED lighting. (Or even in my mother-of-all-tables post on OS X release dates.)
Tables play a key role in all of those articles…but creating tables in HTML (or even Markdown) is, quite simply, a pain in the butt. The syntax is simple enough, but structuring complex tables with some entries spanning multiple rows and/or columns can be time consuming.
Often, too, my work starts in Excel, and it seems like a lot of redundant effort to take Excel’s table-based layout and recreate it in an HTML-based table layout. (Excel has an export to HTML function, but the HTML it builds is heavily styled and needs a lot of editing.)