All posts by Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design and web development techniques. You can check out his work on Dribbble and follow his tweets @jakerocheleau.

All PostsTutorials

Coding a Minimalist Portfolio Layout with Dynamically Sorted Projects

Freelancers and designers are often looking for ways to spice up a typical portfolio layout. You want to show off your most recent works to potential clients, while also offering a quick way to learn about your talents and get in contact. Single-page layouts are great if you have the design capability. But there are also other unique types of portfolio user interfaces which are stunning as well.

In this tutorial I want to demonstrate how we can build a dynamic filtered portfolio list using jQuery. To speed up the development process we can use a jQuery plugin Quicksand to help with the sorting animations. This is a lucrative method for people who build various types of products and want to showcase their work together in one place. You could also link the portfolio images to display embedded text or photobox modal windows.

Read More
All PostsHTMLjQuerySocial NetworkingTutorials

Tutorial: Grabbing Popular Dribbble Shots Dynamically via jQuery

Compared with any other design network Dribbble always seems to come out on top. The quality of submissions is beyond comprehension to most graphics designers, especially with mobile/web user interfaces. There are so many amazing shots published every day but it’s tough to keep up with the constant flow of new publications.

In this tutorial I want to demonstrate how we can build a small webapp which dynamically pulls all the most recent popular shots from Dribbble. The interface is very simple to work with and we want to create all these effects without refreshing the page. For organizing the backend data I’ll be using a custom jQuery plugin named jribbble. It suits our needs perfectly and it’s so easy to get started – even a newbie JavaScript developer could pick this up in a couple hours.

Read More
All PostsSocial NetworkingTutorialsWeb Design

Tutorial: Pulling Your 5 Most Recent Tweets via Ajax

For web developers just breaking into social media there are dozens of fantastic APIs you can work with. Most notably the Twitter API has gotten a lot of attention in recent years. And such rightly so, as the developers at Twitter have been working nonstop to improve endpoints and other miscellaneous settings.

The API has also been online long enough that 3rd party developers have created their own web apps and released the code as open source. In this tutorial I’ll be working with exactly this type of open source jQuery plugin called tweet! which can pull recent tweets from any user account. The plugin also comes with some default styles which we’ll play around with. We could also pull tweet data from searches, lists, and favorites as well.

Read More
Tutorial: Coding a jQuery Popup Modal Contact Form
All PostsCSSHTMLjQueryTutorials

Tutorial: Coding a jQuery Popup Modal Contact Form

Modal windows have become a popular asset for web & mobile developers. iPhone and iPad applications have such a limited screen real estate that it’s useful to bring in additional menus floating on top of the view. This concept also translates well into webpage interfaces where you can hide smaller, minute details.

In this tutorial I’ll demonstrate how we can build a minimalist modal contact form. I’ll be using jQuery along with the fancybox plugin to manage dynamic content. The open source code libraries make scripting so much easier. And we can implement a small Ajax call which submits the form data via PHP on the server end.

Read More