Live Website Projects


  • joggoon.com

    joggoon.com began as a personal challenge to build my own version of an online (book) reader. I was working as a UX Engineer for an online publisher and developed an itch to create an online reading experience of my own.

    Though the site has no backend database, I created a flat PHP database to support a small search engine for the site's content. All content is converted from single HTML files downloaded from two sources, manybooks.net and gutenberg.org. Because these two sources have fairly consistent HTML output, I was able to write a conversion script to generate the file format for joggoon. This cut my conversion time by half.

    Work on the project began to wane as my personal and professional demands increased. All in all, I still consider this project perhaps my most aggressive and successful as I still receive an occassional inquiry from homeschoolers and others about using the site.

  • new.joggoon.com

    joggoon 2 was created as a similar personal challenge as joggoon. This time, however, the goal was to create a more client side application. Each book is contained in a single HTML file and the pagination is simply hiding & showing each chapter. More on how joggoon 2 differs in technology from the original joggoon can be found on the site's about page.

    For this project, I limited the content to shorter books and for the most part converted different titles than those found on joggoon. The Library on joggoon 2 is also a bit more visually interesting - another of the features I sought to challenge myself with on this project.

    This project began as a simple "daily challenge" and turned into this result after 9 days over the course of my winter break in 2015.

    I value both joggoon and joggoon 2 as my most enduring personal programming accomplishments.

  • bulletproofpixels.com

    bulletproofpixels was formerly a small freelance web design and development endeavor I ran with my wife. Due to availability contstraints, we have scaled things down and offer consulting for small business websites at an affordable cost.

    We have been hesitant to market bulletproofpixels for fear of becoming flooded with requests for help (as what happened at one point when our business model was more geared toward design and building websites). I am still employed in the Web development business and really don't have the time for extracurricular responsibilities. However, we do still hand out a business card now and then :).

  • Roll the Bones

    Roll the Bones Around my house I have the nickname "the scribbler" due to my passion for writing short stories. I once answered the question "what are you doing" with "just scribbling" as I worked on a story. The name stuck.

    In the normal flow of any one day I can suddenly get an idea for a short story. Sometimes it's only a word, other times it is an entire outline of a story. Sometimes I want to write but just have nothing to stimulate a story. Enter Roll the Bones.

    While Christmas shopping in 2017, I was in a toy store and saw the dice game "story cubes". It grabbed my interest enough to nag at me (I didn't buy the game) for a couple of days, which eventually led to my creating Roll the Bones. It provides me a way to generate a writing challenge when I have a desire to write but am "blocked" for ideas and/or inspiration.

Smaller Projects


  • HTML5/CSS3 Template

    Creating an HTML5/CSS3 template for use as a project "jump-start" or for rapid prototyping has always seemed to be a work in progress. This is the latest version.

    The page has some description of the work, plus I have made some of the core files available for easy viewing.

    View ➤

  • Responsive UI Development Helper

    This is a simple script I wrote to make it easy to develop a responsive UI. All you need to do is add the script at the bottom of the page and it does the rest. There is a dependency on jQuery.

    View ➤

  • Responsive Animated Ad Banners

    I began this project attempting to use only CSS3's animation but quickly ran into problems creating a persisting end state of the animation. With a bit of effort, I did come up with a quirky solution that was less than optimal and I could see that I would have to spend a fair amount of time with each different animation sequence.

    After confirming this to be a known issue with CSS3 animation, I chose to depend on jQuery Transit for the heavy lifting in my animations. This plugin is fantastic and easy to use, allowing me to focus more on the Ad itself rather than overcoming limitations with CSS3 animations. It began to feel much like the CSS hacks of old days CSS.

    The "Header Color Key" on the demo maps the changing bg color of the header to the relative window width. Try resizing the browser or view this page on a tablet or mobile device.

    View ➤

  • Responsive Banner

    A responsive banner component with embedded YouTube videos. The banner responds to changes in the window size e.g. when viewing on tablets. Responsiveness of the image and thumbnails is achieved using media queries with a bit of jQuery help.

    Two particular requirements of the implementation was preserving the size of the controls (the dots) so on smaller devices they were still large enough to click, and the overall component had to be responsive in any browser.

    One particular challenge of the banner were the corners. CSS corners won't work because the image used spans the total width of the two views before and after sliding. And because we need to click on the video thumbnails, using a layer to mask the corners won't work either. Fortunately all that is required are 4 small images to position in each corner with a high z-index. The only downside is that if you change the page background color, these have to be changed to match.

    jQuery is used for two things - sliding the banner and handling the videos. You can read comments in the js file. Chrome and Safari were not cooperative in the case where we might select the video not currently in the popup. In these browsers, the previous video would continue to play (audio) in the background as the newly loaded video played. So we simply use jQuery to change the URL on the iframe source.

    View ➤

  • Styling Checkboxes and Radio Buttons

    These form elements lack CSS 'stylability', which makes for a not-so-user-friendly UX on mobile devices. Leveraging the same strategy used on my homepage slides, we can achieve styleable elements using only CSS. View the source of the demo page for documentation and notes.

    View ➤

  • Responsive Modal Windows

    One of the challenges when using modal windows in mobile development is the lack of support for interior scrolling. If you have modal content that may tend to be larger in height than you wish, the modal height must be defined by the content. On the flipside, in a desktop environment, having a fixed height modal window with scrollable content is desireable.

    The solution offered here is very lightweight and highly configurable. You can set a threshold width that matches your CSS media queries so the width and height of the modal container can be initially fixed, then become fluid once that threshold is reached. The .js file is fully annotated and easy to understand.

    The modal container and overlay are dynamic and are added to the DOM only when requested, then removed when they are closed.

    Content for each instance of the modal is loaded with jQuery Ajax API. The setup is simple: simply class the link 'MODWIN' and point the HREF to the content file.

    View ➤

  • Infinite (Circular) Autoscroll Carousel

    A stab at creating a circular carousel.

    My requirements were [1] showing multiple elements at a time e.g. 3, [2] revealing the overflow on either side just slightly (along with the visual shadowing effect you see here), [3] a full set of controls, [4] indicator dots to show where in the carousel we are, [5] changing text captions for the centered item, and [6] I wanted it to perpetually loop.

    The carousel is not responsive, which, with the above set of requirements, I found near impossible. There are ways to make the carousel responsive, but that was not a top priority at the time and I have no interest at this point in doing any retrofitting to make it so. I'll save that for another time, another project.

    View ➤

  • A Quirk RE 2d Transformations

    I find CSS 2d transformations especially helpful in creating engaging user experiences, such as creative hover states etc. One transformation, scaling, is particularly interesting.

    When you scale an element in the DOM using this transformation, the original real estate filled by the element does not change. This is logical. If you want to scale an image, let's say, on the page, you wouldn't want it necessarily to affect the rest of the content e.g. move things around. This is especially true if the scaling is temporary, such as on a hover state.

    One very advantageous use of scaling is for responsiveness. While I would not recommend using scaling for any and all responsive UIs, it is very valuable when having to deal with certain more complex UI components - such as some of the complex animated components on this site.

    However, when scaling for responsiveness, you have to take into consideration that the DOM does not change and therefore you have to adjust for it. This is rather simple using negative margins. See the example to see it work.

    View ➤

  • HTML5 Forms

    This is a simple contact form illustrating a few of the better supported HTML5 features.

    I added some simple validation code to supplement the HTML5 features, as well as a simple (but effective) spam preventative.

    View ➤

  • CSS/jQuery Animation

    This was the prototype for the animation on my Lab page.

    The initial animation sequence is powered by jQuery i.e. the dropping of the icons into each beaker. Using jQuery's delay() method allows for a pseudo-random feel to the animation. In the final version on my Lab page, I used a random generated value to make the starting sequence truly random.

    The bubbles are pure CSS animation. Once the icon has completed its animated drop into the beaker, a class is added to the container that includes as children each of the bubble elements. This sets off the infinite linear CSS animation.

    As you can see in the final version at the top of this page, I added quite a bit more complexity to the animation.

    View ➤

  • CSS Only Slides

    The key concept is the (non-semantic) use of form elements to get the functionality to activate the CSS animation. There is of course a valid argument against such practice, and I normally would be one of those doing just that, but the ability it provides to create a "no javascript" slide show IMO is just too cool to pass up entirely. The example that inspired me here included layers of backgrounds that moved independent of one another and created an impressive little UI.

    The order of the HTML elements is important, since the :checked pseudo class used to activate the animation depends on those relationships.

    This was the prototype for the slides on my homepage. Unfortunately, this strategy does not function on mobile devices. The alternative, of course, is a simple jQuery fall back, which I have yet to address, so in the meantime mobile devices get a nested list (the structure underlying the slides).

    View ➤

  • CSS/Javascript Time Machine

    A prototype of the final product on my projects page.

    The javascript running the clock in this prototype was not written by me. Javascript clocks have been around a long time and my goal here was not to invent yet another wheel. In fact, the adding of the clock was a latent idea. My initial goal was to have a series of interlocked gears driven by CSS animation and timed properly according to their respective sizes.

    Once I had those two pieces in place (the gears and the clock) as shown here, I was not satisfied with the two as a cohesive unit. So I reworked things a bit - rewriting the JS for the clock, then adding an audio mpg file in the background (using flowplayer) and making the whole show user-controlled. This is the version you see on my projects page.

    Unfortunately, the final version proved very buggy on mobile devices.

    View ➤