Results for “web development”

How to do a Medium-style read-time estimate in Jekyll

Medium has brought some interesting ideas to the idea of reading as user experience. Among them: estimated reading time.

A developer or designer using Jekyll who wants to add a Medium-style reading time estimate to a blog template will likely find that accomplishing this a simple matter of getting Jekyll to do some math and output the result – sorta.

The reading time equation is the number of words divided by typical reading speed of words per minute. The only catch is that Jekyll’s math syntax is a bit uglier than syntax used in programming languages such as... More

Updated for her pleasure

As part of the Davidputney.com policy of constantly updating the site, we have updated the site.

  • We have completely rewritten the site’s JavaScript. For the less tech-oriented out there, JavaScript is the code that among other things controls the performance-sapping, battery-draining, processor hogging animations we have gratuitously sprinkled throughout the site to surprise and delight our readers. The code is much better from a purely academic best-practices standpoint, and it’s more efficient.
  • We once again rewrote the site headers and navigation so that the animations will be smoother, and as a side benefit, the HTML code at... More

How to do a copy to clipboard in native JavaScript

As Flash dies a lingering, welcome death and its larger functions are replaced by native code, developers are finding themselves needing alternatives to smaller things it did too. Among them is Flash-based copy to clipboard.

The JavaScript code to do the copy is quite simple, just a single line. Perhaps that’s why when I went looking for JavaScript copy-to-clipboard tips and methods, I found them mainly limited to Stack Overflow threads and the like. I’ve put cobbled them together insights from several and some of my own testing and some insights into a tutorial of sorts.

I also threw... More

Steal this site

Some time this week, some items changed in a database that controls Internet domains and this site quietly made a major technical shift.

It all went well enough that probably no one really noticed a difference. I did take the opportunity to make a few design tweaks here and there that some might notice. But the change to the site is all on the back end.

I’m calling this version Davidputney.com Snow Leopard.

For about the last 10 years, my site has been published using Movable Type. It did its job quietly and competently, but as a technology it... More

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

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

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

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