The following blog category showcases many of the sites that I have completed. Each post elaborates on what frameworks were used and how they work:
The following list contains websites where I have played a significant role in their development at Booj
In 2012 all of the websites being built at Booj were not responsive. I was able to implement Bootstrap 2 as the new front end framework allowing all of the sites to become responsive. The process involved moving our design department to grid based design method as well as training them on mobile first design. The next step involved setting up LESS on the platform and setting up Grunt to compile all the LESS into css for production. The process also involved converting many of the components of the site to work with the new framework. Now, all new sites and any redesigns are built using these practices. Recently, Bootstrap 3 came out and I was able to update the code base to allow for this change. Because of the changes that I had implemented, the update went very smoothly.
Some of the major benifits when we moved to the bootstrap framework were that we were finally able to standardise our processes as well as standardise our front end code base. The change also greatly improved site performance and sped up the go-live process significently.
McEenearney Associates is a real estate company in the DC area where the Metro Rail is very prominent. They asked if we could build a Google map that had the rail stations on it where clients could find properties near a station. The finished product uses a custom overlay of the rail map using google map tiles. This allow us to zoom in on rail line just like you would on a normal map. Each station on the map is clickable and allows you to find properties within a radius of that point. You can also toggle the map to see a regular map projection and then toggle the rail stations and routes. Once the user is ready to see their properties, they can click through to a full results page. This project was written in PrototypeJS because we had not started the conversion of the site to jQuery.
Baird And Warner wanted a gallery with a "Ken Berns" effect so I created this jQuery plugin that uses HTML5 canvas to animate the images with a pan/zoom effect. It also fades in a caption and link for each image. The gallery has a pager as well as a fallback to a simple cross fade for browsers that do not support the canvas element.
jQuery, jQueryUI, REST
Lifestyle Search is an application I built using the REST API for Onboard Informatics. This application uses jQuery Sliders to rank the importance of lifestyle attributes that are important to the end user. A bubble shows the ranking as you move the slider. Once you choose your rankings, the request hits OnBoard and returns areas that meet the criteria. From here, I take the data and display it in tabs along with the scores for each term. You are able to compare the scores using either a national level or your local scores. The math for this was done in a controller on our system and it is the only know lifestyle search to do this. You are also able to view the location on a map and see how many properties are in that area.
jQuery, Google Maps
In this application, the client wanted to plot lots on a map. The plots would be color coded and be clickable to show more information about the particular lot. This application uses jQuery and the Google Maps API along with Polygons to accomplish these goals.
jQuery, Google Maps, Google Places
This is an application where the user can locate points of interest around a marker. In this case, the marker is the center of a community. They can choose from a list of Locations or use the Autocompleter. They can then choose a radius in miles. From here, I query the Google Places api to get all of the points and display the pins. I also display all of the results in a list below the map. When the user clicks either a pin or one of the items in the list, I again query Google to get more information about the place and display it in an info window.
This is a seach form where the property counters on the side of the form update as the user changes items in the form. I used a form change event to start off the couter plugin. The plugin first serializes the form and then does an ajax request to the server to get back a count. In this case, I use 2 requests to pull the open house count as well as the regular count. When the server returns the count I update the couters with the new value. The Ajax request has an abort method built in to cancel current request if a new one occures. This improved performace significantly. In addition, the counter remains within the view port as you scroll through the form. This is accomplished using a bunch of math based on the current scroll postion and the postion of the counter. This plugin is also built in a very modular fashion and is used on most search forms on Booj projects. It's configured using an options object on instantiation.
jQuery, Images, Responsive
This is a full screen gallery plugin I wrote that is used on most Booj sites. The plugin loads up a carousel of all the images allowing the user to scroll through. The images are loaded on demand to save bandwidth and they are resized to fit within the viewport. They also scale based on the current screen size. The user can manually scroll through or they can enable the slideshow feature to autoplay the photos. When they close the full screen mode, they are presented with a similar gallery that is not full screen. You may ask why I wrote a plugin to do this when there are a million other plugins out there. One reason was the format of our image urls. Another was licensing issues and another was the need to fully customize each gallery for each client. That was very difficult to do using third party galleries.
note: Clicking through to view a property on the results page to see the gallery.
jQuery, Ajax, Rest, SVG, Google Maps, Google Charts
This is a pretty heavy duty applcation I wrote to show real estate market trends in your area. It's basically a seller's tool. The application first makes you add the property you wish to sell. Then, I do a series of REST calls to gather all the sold properties, for sale properties and a few other types that are near your property. You are able to filter the results by things like price, beds, baths, condo etc... You are also able to change the search radius and choose to search within the same community. Next, I plot all the results on a map. I also create 2 tabs. One for sold properties and the other for for sale properties. Both tabs have a list view, graph view, and a bubble chart view. The list view simply lists out each property and allows you to sort them. The graph view uses google charts to display several charts to help you see trends in the area. The bubble charts are an svg bubble chart that I wrote using Raphael. You are able to zoom in on the chart to get a better view of where your property sits in relation to other properties. It also aggregates the data so the size of the dot corrilates to the number of properties within that value. You can also click the dots to to see the property and view it on the map. In addition to all this, the app allows you to save your data and come back to it. The app also lets you setup emails that come to your inbox showing the most recent trends. You are also able to setup multiple properties and manage all of the emails within the app.
jQuery, Responsive, Open Source
I needed a way for a large list of items to clear the row above it but remain responsive so that you could have 2 columns on a tablet and say 3 columns on a desktop. Bootstrap doesn't support this so I built this code to handle the situation. There is also a js file to allow IE 8 to work with this.
jQuery, Responsive, Retina Display, Open Source
Currently you can add support for high dpi images using css but that doesn't work or make sense when you have a dynamic set of images. I created this project to handle the problem and to allow for high dpi images to be served up only if the device supports it. I used modernizer, jQuery, and HTML5 Data to accomplish this.