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 …

Classical Inheritance in Javascript

It’s amazing how flexible JavaScript is–it can do anything! It can even do OOP. As our JS implementations become more and more complicated, it’s great that ECMAScript allows us utilize the power of OOP, which should help us with code maintainability, re-use, and task-division. Although interfaces aren’t practical in a dynamic language that encouraged duck-typing, we can still take advantage of controlling variable scope (topic for another day), classes, and (pseudo) inheritance. In this article, I will go over one method of implementing classes and later I will talk about how to inherit that class in a new one. What …

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 …

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 …

Geek Art

Technology has revolutionized modern art. Today, even revolutionary contemporaries like Warhol seem to belong more with modern classics like Picasso or Munch. That’s because modern installations immerse us with media-rich (sometimes interactive) abstractions and realisms. It’s easier than ever for an artist to shoot, edit, and produce a video; artists now can easily make digital sounds previously unheard by human ears. And as the cost of these technologies fall, the frequency of their implementation increases. It’s appropriate that modern art is increasingly digital since our lives are as well. We socialize on social networks instead of bars or homes. We text instead of talk. …

Installing Cordova\PhoneGap for Android on Windows (a suppliment)

Difference between Cordova and PhoneGap When my friend told me about the PhoneGap framework, I was excited to test it out. So I went to their website, clicked on getting started documentation (for android), and began to read the instructions. And there it was. Install eclipse (check), install android-sdk (check), install ADT Plugin (check), and install Cordova. “Wait a second,” I said to myself, “what about PhoneGap?”Clearly there is a PhoneGap download (which I downloaded), and a Cordova download (which I also downloaded). Do I need both? What’s going on here? As it turns out–no, you don’t need both. So …

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 …