Timeline of a bugfix

2:00pm (yesterday): While reviewing site changes with our designer one day prior to launch, I noticed that the shopping cart functionality was screwed up. Badly. The site is using Commerce for Drupal 7, and when you change options for a product prior to clicking “Add to Cart”, it’s supposed to refresh the form with new details and an updated price. Instead, the form disappears. Obviously, this can’t be launched and fixed later. Continue reading Timeline of a bugfix

Things web developers wish designers knew

Images

  • Keep backgrounds simple. You shouldn’t add things like overlays, semi-transparency, or gradients in Photoshop — those can be added using CSS. This has the advantage of making the overlays/transparency/gradient easy to tweak in code, while increasing the reusability of the image.
  • Save images in as large a size as practical, especially photos. It’s easy for us to scale an image down, not so easy to scale them back up.
  • Don’t bother optimizing image files. We do that before moving them to production anyway. Continue reading Things web developers wish designers knew

pure HTML/CSS star rating widget

I love creating animated components without using JavaScript. This is an example of a form-based five-star rating widget, which fills in a hidden form element (specifically, a set of radio buttons) that can be submitted as part of a form. If the CSS isn’t loaded for any reason, the radio buttons and text labels are displayed as expected, preserving functionality.

See the Pen pure HTML/CSS star rating widget by Martin Blase (@mblase75) on CodePen.

CSS: text over an angled gray background

This was an interesting little problem to solve: How do we make a column of text display on top of an angled background color? Better yet, how do we cut a corner out of the text to make it fit better?

The answer to the first problem was comparatively straightfoward: two nested blocks, one rotated 45 degrees down and the other rotated 45 degrees right back. The second problem was trickier, but can be solved if you’re using a browser that supports CSS Shapes.

3D CSS crop rows

In the spirit of New Earth USA, here’s some minimalist crop rows in 3D CSS.

Let’s look at how this is built. Continue reading 3D CSS crop rows