When I released liteAccordion v1 in February last year, a few people asked if I would consider doing a WordPress version. After releasing v2 in November, I set about creating a plugin that would help users to quickly create and implement horizontal accordions into their WordPress posts and pages.
My latest blog entries.
Book Review: MongoDB in Action
Happy New Year everyone! I’ve been a bit quiet lately, owing to the holidays and work obligations, but I’m going to make a concerted effort this year to be a bit more active on my blog. I don’t, however, count writing skills amongst my talents – I can do tutorials, and how-to’s, but I don’t think I’ll ever be able to write informative, expository articles like some members of the JavaScript community do. I’d rather get my own hands dirty in the code than write about it!
liteAccordion v2
I’ve been promising to release liteAccordion v2 for ages, but I’ve been snowed under with client work as of late. Last night I finally found the time to complete the last few bits and pieces that I wanted to finish before release.
Plugin Home Page: http://nicolahibbert.com/demo/liteAccordion/
Demo Suite: http://nicolahibbert.com/demo/liteAccordion/demo-suite.html
Download: https://github.com/nikki/liteAccordion
Continue Reading →
Terminal Productivity Tips for Web Developers
When I’m working, the three applications I’m guaranteed to have open are Chrome, Textmate and Terminal. Terminal can look pretty intimidating at first, but once you’ve picked up some of the core commands (cd, ls, mv, cp, mkdir, touch, grep, etc.) you begin to wonder how you ever lived without it. Today I’m going to share with you a few of my favourite Terminal commands and shortcuts.
Quick Tip: CSS3 Transition End Event
If you’re working with CSS3 transforms and transitions, you detect the completion of an animation with the vendorTransitionEnd event.
Optimising HTML5 Canvas games
In this blog post I’m going to share a few tips and tricks I’ve picked up from the process of refactoring HTML5 Breakout. Some of these will be common sense performance tips; others might leave you scratching your head a bit. I’ll start with a few general tips, and then move on to the canvas specific ones. (The best stuff is at the bottom).
Curved and sloped tiles in JavaScript platform games
Demo: http://nicolahibbert.com/demo/javascript-tile-map-editor/
If you’ve been reading along recently, you’ll know that HTML5 Breakout is at a stage where I’m not entirely embarrassed by it, and I’m making a start on my next JavaScript game.
I’ve had an idea for a 2d sidescrolling platformer for a while, but I specifically want the player character to be able to move up and down slopes and curves (ala Sonic the Hedgehog). JavaScript game engines are still generally quite young and aren’t particularly full featured – I don’t know of any that implement this functionality out of the box, so I’m going to show you how I’m doing it. It involves separating out the alpha channel using the HTML5 Canvas API, and using this data to build a pixel-level map of where the character’s position should be at any single point on the tile.
HTML5 Canvas Breakout Game
Demo page: http://nicolahibbert.com/demo/breakout/
Some time last year, I started learning the HTML5 Canvas API. One of the most popular tutorials for this was (and still is) Bill Mill’s Canvas Tutorial, where you build up a basic version of Breakout step by step. After completing the tutorial, I carried on cobbling features onto it whenever I learned something new (the starfield was inspired by Mr Speaker for example).
Portfolio Redesign
The redesign of my portfolio has finally gone live, I hope you like it! I wanted something a bit cleaner looking than the old site – I fiddled around for ages in Photoshop, but I’m a really harsh judge of my own work (I never feel like it’s good enough!) so I opted for a customised version of Classica instead. Otherwise I’d never be finished! (And because I really like Orman Clark’s designs.)
There’s an easter egg on the homepage – it’s pretty good, so it’s almost a shame it’s hidden. I think I might put it on it’s own page next week. (I should mention, it uses the HTML5 Canvas API, so it’s been disabled for anything that doesn’t support Canvas. Get a better browser!)
Form Widgets with jQuery UI
Hello! In this tutorial we’re going to (finally!) finish the HTML5 contact form we’ve been developing. Just a quick recap – in part one we went over the HTML markup and discussed the new types of input element; in part two we prettied the form up a little using CSS3; in part three we wrote a JavaScript function to detect whether the user’s browser supports any of the new UI widgets; and in part four we used the jQuery Validate plugin to enable client side form validation. In this tutorial, we’re going to use jQuery UI to enable form widgets if they aren’t supported natively.
Recent Comments