Christmas Card 2018 Autopsy

Rausch Family 2018 Christmas Quiz

We recently announced our 2018 Christmas Card. Every year, my wife and I design and develop a digital Christmas card. These cards are opportunities to explore new technologies or techniques, and they usually turn into more trouble than they seem to be worth.

In this post, I’ll dissect the process and product of our Christmas Card. View the card at 2018ccard.now.sh. Check out the code on GitHub at awayken/2018-christmas-card.

Continue reading “Christmas Card 2018 Autopsy”

Building AVR, Part 3: JavaScript Architecture

Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.

This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.

This is the story of the JavaScript architecture for AVR.

Continue reading “Building AVR, Part 3: JavaScript Architecture”

Building AVR, Part 1: Project Architecture

Once AIM was built, we needed a product to display the inventory that had been managed. The AutoConX Vertical (Responsive), or AVR, is a white-label product that allows publishers (newspaper or magazine) list inventory from sellers in their area. It’s a digital classified system that offers a lot of customization and flexibility.

This project was trickier than AIM because AIM was a brand new product. AVR, however, had to be a modern and responsive site that met all the publishers’ expectations from the legacy product. Publishers wouldn’t switch unless they saw real value in the new system. We had to build a product that we would put our own products on.

This is the story of the project architecture for AVR.

Continue reading “Building AVR, Part 1: Project Architecture”

Building AIM, Part 3: JavaScript Architecture

We needed to build an inventory system, one that was free from the restrictions of our legacy system. We wanted to build a system that could describe any piece of inventory: from cars to carpets, from houses to job listings. We needed an interface for our sellers to actually manage that inventory. That interface is the AutoConX Inventory Manager, which we call AIM.

This is the story of the JavaScript architecture for AIM.

Continue reading “Building AIM, Part 3: JavaScript Architecture”

Building AIM, Part 1: Project Architecture

We needed to build an inventory system, one that was free from the restrictions of our legacy system which could only describe automotive, agricultural and recreational inventory for dealerships across the United States. We wanted to build a system that could describe any piece of inventory: from cars to carpets, from houses to job listings. The process started with our database structure and maintenance areas. Then came a REST API to give us a nice separation of concerns. Once that was in place, we needed an interface for our sellers to actually manage that inventory. That interface is the AutoConX Inventory Manager, which we call AIM.

This is the story of the project architecture for AIM.

Continue reading “Building AIM, Part 1: Project Architecture”

jSimpleFader

TL;DR Introducing jSimpleFader, a jQuery plugin to simply fade between images.

UPDATE You can now visit the jSimpleFader Github Page for a live demo, since I know you’re lazy.

UPDATE Added a new option: animationStyle. Right now, the values are fade or crossfade.

UPDATE Added a new option: links. Set this to an array of hyperlinks you want to wrap around your images.

It’s something I’d done a hundred times before. You have a folder of images,  numbered in sequence, that you want to fade and rotate through on your webpage. It’s a simple rotator (although, strictly speaking, nothing rotates) that I’ve copy and pasted from project to project with tweaks here and there. So when our designer asked if I knew of any good jQuery plugins that did that, I decided I should just make one myself. Introducing: jSimpleFader.

jSimpleFader is a jQuery plugin to simply fade between images. All it really needs is the total number of images you have, and it rotates through them. The code is straightforward. Just call $('#fader1').simplefader( 10 ); That’s it.

The plugin tries to do a lot of figuring out for you. Your images don’t need any particular naming convention; they just need a number in them. You don’t even need any particular HTML structure; there just needs to be an <img> somewhere. The script has a simple limitation: your images should start numbering at 1, although the first image doesn’t have to be the one on your webpage.

After the number of images, you can pass in an object of options. Here are the options you can set:

  • speed – the speed of rotation in ms (default: 5000)
  • animationSpeed – the speed of fading animation in ms (default: 600)
  • animationStyle – the style of animation: fade, crossfade (default: fade)
  • links – an array of hyperlinks

Like all jQuery plugins, you can have multiple faders on one page, with their own options, and everything should work fine.

Check out the project on Github, and feel free to participate.