Building Web UIs

So my new job has been keeping me very busy, which is why I haven’t written a post in a long time. However, since I have a little extra time during these Christmas holidays, I’ve decided to write a little post about some UI coding principles I now embrace. This mostly pertains to HTML\Javascript\CSS. The over-arching philosophy for this is a seperation of interests similar to MVC, but just on the view side things. Whenever possible, I try to use JavaScript for UI functionality: events, calculations, loading (ajax), ui logic, etc.; As for anything visible, I try to use HTML …

Sketch Wireframe Kit

I have used wireframe kits such as this one in the past, but I was never 100% happy with any. The one I used most is the Jaws Sketching Kit but it didn’t have that “sketch” feel to it–the lines were just too perfect and I’m not as into rounded corners anymore. For that reason, I’ve decided to build my own. I’m still missing a few items that I don’t use often for wire-framing, but if I ever do create them, I will update the kit. UPDATE 6-14-2013: I didn’t really have time to write about the sketch kit the first time …

Useful jQuery Plugins Part 2: Layout

Check out Part 1 of this article Part deux of the jQuery plugins focuses on layout. I will talk about 2 awesome plugins that I’ve used before (whether at work or in my ventures). First, what I mean by a layout jQuery plugin is one that places and controls major content elements on a screen. SlideJS This is a great plugin that creates the very popular effect of displaying a set of images that slide through. We’ve seen it before above the fold on the splash page on almost any corporate website–image one will talk about a fancy new product; …

Using JSONP with b1t.co API to Shorten URLs using JavaScript only

I thought that this would be a great post to go over an easy implementation of JSONP, and also the b1t.co API (for JSONP). If you do not want to invest the time and energy in creating some AJAX proxy server-side implementation, there’s a great work around the cross-domain AJAX call issue. It’s simple: You create a function that creates a JavaScript script that points to the web service of another domain You implement a callback funtion that does something with the returned JSON When the JavaScript script get’s “loaded” (aka, when the web service returns the JS response), it …

New Start up – b1t.co

Tom, Nick, and I (affectionately known as Tominick by some) have launched a new website called b1t.co, which is a simple url shortner and QR Code generator. We have plans for more functionality currently available on bit.ly or goo.gl, but this is a great start for now. We’re still ironing out the kinks and have over 11 bugs and improvements before we move past the beta stage. Despite that, b1t.co has already seen over 500 page views! Some key technical features of this project: MVC4 with Razor LESS Stylesheets Bitbucket.org as the repository

Useful jQuery Plugins – Part 1: Scrolling

There are some great jQuery plugins out there that make our life a little easier. I’m not going to talk about any of the jQuery UI components which I use on a regular basis, but rather some of the 3rd party plugins that are available. They are all open source and free (this is the reason why I’m not including isotope). This is the first of a 4 part article. For some reasons I’ve used a lot of different scrolling plugins. The following are very useful plugins to make your pages a little more interactive: Waypoints This is an awesome …

Microsoft 70-480 Exam Notes

I passed Microsoft’s  Javascript, HTML5, and CSS3 Exam with a great mark, and it helped that I made thorough notes. Please note that these notes are incomplete and I also relied heavily on writing out JS code in JSFiddle so that I would better comprehend the code. I will post the links to JSFiddle sometime in the future after I go over them (they are very rough). However, my notes provide a great start and some excellent links. I recommend that you use them as a starting point. You will notice that many of the topics are missing (especially towards …

New UI – The Beta

So I completed the first stage of my new user interface for this blog. You’re looking at it right now, but don’t look too critically as it’s only in the beta phase. As I’m writing this, I’m aware of several layout issues, and some parts aren’t complete at all. For one, I still need to style the comments section of single blog pages. I also need to fix the overflow issue of many categories in the footer. All that aside, I’m very happy with the new look and feel. I will soon post all about this new UI in an …

dgCarousel – a jQuery Plugin

I am the proud new owner (if one can call it that) of an open source project: dgCarousel. It is a simple, easy to use jQuery carousel that takes a set of list elements and converts them into a fixed-width, animated carousel. It’s customizable, extandable, and adaptive (sort of). I decided to start this project for several reasons. First, I wanted to learn how to create jQuery plugins the right way. I wanted to follow their standards and best-practices, which was also an excellent learning experience in adapting and utilizing an existing API. I followed the example from the jQuery …