webdev blogs

QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back. When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it’s not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over ... (more...)

There's nothing worse than those long, ugly URLs with twenty variables in the query string. In recent years there have been a number of websites offering a free service where users can create shorter links to these complex URLs. While a short URL is great, the links provided by most of these sites are computer generated and impossible to remember. This weekend I programmed a simple tool to allow users to create their own links and normalize ugly URLs called normalurl.com. Just like other URL rewriting services, this website is completely free and allows anonymous users to easily create new URL redirects. However this ... (more...)

In the interest of following jQuery's motto of "writing less and doing more," let's write a simple slideshow using jQuery, JavaScript and a bit of CSS. For starters, our main goal should be keeping the markup as clean as possible: <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> Now let's use CSS to position the images on top of each other and bring the active image to the top level with z-index: #slideshow { ... (more...)

In a recent post, I wrote that developers should better optimize their JavaScript. Well, that's easier said than done, so I'd like to get down to the nitty-gritty and talk specifically about optimizing jQuery. Please note that this is not about performance tuning of the jQuery library, rather it is about better engineering the code we use to interact with it. If you're not a jQuery programmer, and you have no interest in joining the fad, don't worry—most of the concepts here apply to JavaScript and general programming as well. 1. Beware of class-only selectors A great part about using a JavaScript library like jQuery is its selectors. ... (more...)

Let it not be said that I never fall victim to a web fad: AJAX, jQuery, SEO—I was there with bells on. So when everyone started hating Flash and doing all web animation with HTML/Javascript, I jumped right on board. I thought it was just great! You didn't have to lose any SEO, and most importantly you never had to open that awful Flash GUI. But have you noticed? EVERYONE ELSE IS DOING IT! There's just too much Javascript on the internet these days, and it is bringing many browsers to a halt. My MacBook is less than a year old (2.1GHz, 1GB mem) and Safari has been crashing frequently. In Firefox I ... (more...)

I put a bit of jQuery on my site, animating the links in my art portfolio section. Check it out. I really like jQuery actually, it looks nice, and its a great way to liven up a site's visuals without using Flash and losing all that SEO. The problem is that jQuery, which is essentially JavaScript, is also not very SEO friendly. You can use it pretty much the same way as Flash, in limited quantities where you don't care about searchability. However, when you want to make it SEO friendly, it operates pretty similarly to AJAX. Basically, you don't want jQuery to be the only way you access any content. Any content ... (more...)

Everyone knows the value of improving your workflow. Well it turns out I work a whole lot faster on a Mac, both in web development and web design. I think the OSX developers must have thought a great deal about workflow, because Mac has a lot of great features: from much more drag-and-drop integration between programs than windows, to little things like the mouse command to fly out all windows or show the desktop (this saves me so much time). But workflow on a Mac goes much deeper than these features. Web development is great on a Mac, since the programs you need for coding run very quickly and the terminal is really handy for doing lots ... (more...)

For a while, I've been doing odd design jobs and tutoring high school students to stabilize my income while I do the freelance web development. Recently, this has seemed a bit silly to me so I started applying to full time development positions. I think going full time would be good because I think that a team environment would be really helpful to me. I want to have my code critiqued, so I can become a lot better. I had an interview yesterday for a design/development position, but I'm not sure it went so well, since I didn't know a lot of the lingo. He seemed interested in my 3D and design portfolios though, which is nice because although ... (more...)

About a week ago I started work on YogaEneryHeal.com. The site is relatively small, so I opted to go with plain old HTML pages for the majority of the pages. The only php is on the article page, which is a switch to make coding easier, and the contact page in order to process the form. Overall I wanted the site to be very simple and to have a soothing appearance. I got some great photographs from their photographer and even one that I incorporated into the header (at first I didn't notice how low res the photos were, and I ended up working with one of them, ugh). There was a registered trademark of another company ... (more...)