Results for “HTML”

HTML native interactive controls using CSS and flexbox

I find myself drawn to clever solutions for common problems.

One recent design I built called for side-by-side buttons. The user could click a button, which would maximize while other the choices would minimize. One solution would be declare CSS styles – btn -- default and btn -- active – and then toggle states on click using JavaScript or jQuery.

Even though the controls were buttons visually, functionally they behaved like radio buttons, something devs already have in their HTML toolbox.

Styling forms can be tricky, but it is possible to apply a little CSS sorcery... More

Ship of fools

It was supposed to just be a tech revision, a release I’d dubbed Davidputney.com Snow Leopard.

But my penchant for tinkering has once again outrun my good sense. So this site also has a visual refresh, too. In fact, Davidputney.com has been visually refreshed more times than Katherine Helmond in Brazil. it’s more of ship of Theseus in that it isn’t the same site any more.

Here was what it looked like when I launched it last fall. Since then a bunch of it has been rewritten to take advantage of modern browser technologies.1 I’ve changed... More

Setting aspect ratios on responsive objects

Responsive design not only caused designers and developers to rethink their entire design process, it caused numerous little head-scratchers along the way.

One problem is how to maintain an an exact aspect ratio on a DOM object on page resize. It’s easy if it contains a presized object, hard if it does not. Adjusting top or bottom padding was always a favorite technique.

Recently I needed a square figure wrapper to contain an image of undetermined size and aspect ratio. The image could be either tall or wide. Despite this, the image would need to center and fill out... More

Flipping the script

I have a particular methodology that I use to write all my JavaScript.

First, I decide to add some sort of gratuitous, showy, processor-hogging, performance sapping JavaScript animation to my site. Then I spend two weeks writing code that is a horrible disorganized mess that is about 90 percent functional but completely breaks every time I try to fix it.

Then throw it out and rewrite it all in about three hours.

Which brings me to the latest addition to this site. I’ve added a scroll progress meter to the top menu bar. I even consulted for several months with... More

Putting my foot(notes) down

I blame my friend for becoming internet famous.

While writing about his voyage through the viral media sausage making machine, I realized that my blog templates had a serious design flaw. I had no place to put my snarky asides.

I needed footnotes. All the cool kids have them on their blogs. 1 John Gruber, for instance.

One of the nice things about having locally sourced, artisanal site that I made myself is that I can just add items as needed. I opened my code editor and wrote up styles for superscript and an ordered... More

Toward a better underline

One of the first things I noticed about iOS8 was that the default underscore style for anchor tags is a proper typographical underline.

Safari in Yosemite has also adopted this method.

These are nice touches that draw the traditions of print typography and the type of sanding-the-bottoms-of-the drawers attention to detail that websites need.

But the state of default browser underlines remains fairly lousy across the board. In an era when more refined web type is common, it’s particularly bothersome for typographical pedants.

When building Cruxnow.com, I adopted the Medium design team’s method of creating bespoke underlines.... More

That is why you fail

I’ve been writing about my efforts to make my site load faster. Read Part 1 here.

But like that young Jedi so long ago, I was not always able to levitate the ship out of the swamp. Probably because I didn’t believe enough.

Either, way, here are some methods that I tried and ended up not using.

What was a wash

  • Lazy loading or concatenating my javascript and didn’t make much of a difference. Likely because my concatenated scripts are only 18K.
  • Paying extra for CDN web hosting. My time to first byte varies widely, from... More

Making Davidputney.com load fast: Part 1

A few years ago, I made a key lime pie for a party. One of my friends was raving about it. “Oh my God. You have to give me the recipe.”

“Well,” I said. “There’s no secret. It’s the recipe on the key lime juice bottle.”

This is sort of how I feel about my web optimization efforts. Smart people at Filament Group and Google and elsewhere have already figured it out. Just follow the recipe.

If it was that easy, we’d all be Gordon Ramsay. Err, maybe not.

But, like with pie, experience has taught... More

The code war

I’ve been to several design conferences in the past couple years, and typically within the first few hours some sort of discussion will break out – usually on Twitter – over “should designers code”.

A lot of pixels and a some vitriol have been also spilled on the subject. But it’s really nothing but a bunfight. Opinions get tossed around but no one actually gets hurt.

My position has always been of course designers should code. Why would you not? It’s the fundamental technology of the web.

But “designers should code” sounds a little bossypants.... More

Kick the tires and light the fires

We’re live. Finally. It still has that new website smell.

I’ve been working on a new Davidputney.com pretty regularly since early October. It’s not so much done as kicked out the door. Please be patient as I still clean up some of the messes that I made.

This replaces an older jQuery-based site that I built over a three-day weekend because I needed a portfolio site to apply for a job. This redesign is about the fourth guise for a domain that I’ve owned for 14 years now, probably to the dismay of other David Putneys who have... More