Topic: Development

Making <canvas> Games

In my last post, Making <canvas> Art, I introduced the idea of using the HTML5 <canvas> API to create a randomly-generated “northern lights” animation. The effect of the resulting animation is entirely aesthetic in nature. It provides no interactivity beyond the generation of new colors and shapes. In this follow-up post, we’ll use the same technique introduced in the original post, but extend our example to introduce keyboard input and manipulation in order to create a fully interactive game. Continue reading…

Making <canvas> Art

Got <canvas>? Focus your attention, if you will, to the top of this web document. The header area of my website includes animated “northern lights” of a sort, generated using HTML5’s new JavaScript rendering engine called <canvas>. Click anywhere on the page to generate new lights, each with randomized colors and trajectories that alter the appearance of the site header as they slowly move across the page. Continue reading…

Responsive Layouts Using CSS Media Queries

The days of the desktop are numbered. In the past, designing a web interface involved targeting a screen resolution in the vicinity of 960 pixels wide. For many years, this worked, and it worked well, because 99% of online users could easily read and scroll at that resolution, regardless of the browser, operating system, or machine they were using. Times have changed. Continue reading…

Input Prompt Text: A Better Way

It’s a very cool feature to have a form field that has prompt text such as Enter search keywords… right inside the input box, itself. It looks good, it makes sense to users, and it can save a lot of real estate in your design by negating the need for field labels. The problem, however, is that there are about one hundred ways to implement prompt text, and ninety-nine of them are wrong. Let’s look at this thing from all angles and come up with a fantastically simple and reliable way to make this work. Continue reading…

The Perfect jQuery AJAX Request

If you’re into client-scripting, then jQuery AJAX is probably your thing (if it’s not, perhaps it should be!). jQuery has some fantastic support for AJAX, and implementing it into your web application is so easy it’s stupid. The AJAX functionality in the AJAX library is so flexible, sometimes it’s easy to get lost when you’re trying to do something very simple. I’ve come up with a very basic jQuery AJAX template that I use for just about everything I do, and I thought it might be useful to share. Continue reading…

Plug in to Amazon Web Services (AWS) using PHP

I’ve recently started using Amazon Web Services (AWS) to import large amounts of rich content into my weekend-warrior project, ThumbSticks.com. I have to say that I’m quite impressed with Amazon’s dedication to providing their product information in such a transparent and detailed manner. If you’re not familiar with AWS, here is a quick introduction and some useful code snippets to help you get started with AWS in your PHP environment. Continue reading…

Create a Lightbox with jQuery and CSS

The “lightbox” is a unique and useful design tool when used properly. It allows designers to present information that is totally independent from the site theme, and it is especially useful when displaying information that is loaded via AJAX requests (often negating the need for additional post-backs on your pages). There are countless ways to implement lightbox functionality into your site, and almost every option I’ve ever seen is weighed down by extraneous functionality or useless transition animations. It’s quite easy to create your own lightboxes with minimal effort. This tutorial can serve as a quick and easy template to get you started. Continue reading…

IE Corner Inserts via jQuery

I recently had a client whose design demanded rounded corners in a lot of different areas of their site. As I looked through the design documentation, the variety and color of these rounded widgets really started to add up. I quickly decided that pure CSS corners were the best choice for their design. Most users can utilize border-radius to apply the rounded effect without any overhead (the browser does the work), and the remaining users can be handled by a quick and easy bit of jQuery. Continue reading…

A Simple jQuery Tabs Template

I love jQuery; I use it all the time. I also love the great UI controls that come with the jQuery UI library. Unfortunately, I’ve found that a lot of these controls can be a little heavy in terms of required JS/CSS files that your clients will have to download in order to use these controls. Being the minimalist that I am, I really want to drop a small amount of CSS and HTML into my site and quickly get myself up and running with a tab structure that’s both flexible and accessible. Continue reading…