Tag: code

A CSS only honeycomb grid

When I started working for Fresenius Medical, a coding challenge we often gave to interview candidates was to code a hexagonal grid. They only had to pseudo-code it, on a whiteboard. This was an interesting challenge because there are so many ways to approach it. The only classy solution I’ve seen is on the D3 frontpage. This is a pure javascript solution. But there are various CSS solutions to the problem also.…

A smart PayPal form

I created this smart PayPal form for Trekkers.org. See trekkers.org/donate/. It lets the user switch back and forth between recurring and one-time donations. I couldn’t find a free plugin that can do this.

If this is installed on a WordPress or other CMS site, it is better set up as a plugin. A site owner does not need to lose all functionality just because he/she switches themes.…

A simple related posts widget

If you want to put some related posts in a widget you can use the smart YARPP plugin.

Or, if you merely want to list posts with matching tags, you can put a function in your WordPress theme. In some ways this is better than the fuzzy logic of YARPP because it gives you more control: you just give posts the same tag, and you know they are related.…

Responsive Comment Forms

After you make the front page of your theme responsive (see my previous post), you need to check the other templates. And one area that might break your theme, and resists the simple CSS-media-queries method, is the comments form, typically loaded on the single post template. That’s because forms tend to have fixed widths, and whats more, the width is defined with inline HTML, or at least its defined that way by default in the WordPress comments template.…

putting a loop in your sidebar

The simplest way to put a loop in your sidebar is with Justin Tadlock’s sweet plugin Query Posts. This lets you use the query_posts function, with all of its options, in a widget.

However sometimes you might need a loop that does something unusual. I had a client who has a category of posts with natural history photos from near his home. He wanted an image to pop up, randomly selected, from the category.…

Does your slider make the text flicker?

I see this on lots of sites. Flexslider causes it. Every time the slider moves, text on some other part of the page flickers—on Safari. As far as I know, this is a Safari-only issue. The solution, fortunately, is a little CSS:

-webkit-backface-visibility:hidden;

Just put this on whatever is flickering. It also fixes the annoying lines that grow around the ‘navigation spots’ in Safari.…