Redesigning BootstrapSoftware.com

Posted on by
Reply

Over the seven years I spent with Bootstrap, I’ve seen the company grow from a development company, to a fully evolved team that provides everything from well-defined discovery, smart development, and a refined maintenance/support process. During that time, I was able to add usability and information architecture to the many services that Bootstrap provides today. However, one of the bigger milestones for both Bootstrap as well as my career was the birth of the Creative team last year.

As with any client’s redesign (or initial design for that matter), it’s important to understand the business goals, objectives, identity, and overall brand. Our creative process includes many steps and deliverables in order to identify these points, as well as a game plan on how to achieve the client’s needs. We deemed Bootstrap Software as a client, and treated ourselves no differently.

The User Experience

As part of our research, we studied the competition as well as applying what we know about our previous site visitors. We identified the target user personas, then began to structure how we want to deliver our message using UX design and information architecture techniques.

In parallel to this, we generated and explored various mood boards to get a better idea of the look and feel we wanted to achieve.

Based on feedback and several iterations, we were able to determine the general feeling we wish to convey to our visitors, as well as how our visitors can find the information they need quickly. This brought us to two different design directions; circle and square.

As with any design process, iterations can conceivably go on forever. We tasked ourselves with defining the pros and cons of each direction, then ultimately deciding on one. From there, we took the things we liked from the other and applied more detailed iterations. The end result is the site that you see today.

Interaction Design
The look and feel is only half the battle when it comes to design. What the user sees has been established, now how about when the user starts clicking around? One of the continuing mantras said throughout the discovery process was “no flash”. The whole Internet industry is abuzz with “HTML5”, and we wanted to flex our muscles as a company to show some of the latest and greatest your browser has to offer.

It’s easy for a designer to get carried away with how a site should behave in their mind. This is when it’s important to sync with a front-end tech lead on what we can and cannot do, according to the browser scope of the project. Storyboarding the site interactions is important to convey these ideas, either by conceptual or detailed wireframes.

In the past, we were accustomed to developing the “pixel-perfectness” from browser to browser. However, the industry is gradually seeing the importance of delivering speed and good UX over visual or functional consistency. This is why progressive enhancement is Bootstrap’s approach today over yesterday’s idea of graceful degradation.

Progressive Enhancement
As a front-end developer, I was no stranger to browser sniffing and conditional behaviors. I still cringe when I think about how much Netscape 4’s DOM differed from Internet Explorer. As part of progressive enhancement, the idea instead is to set a baseline that all browsers can understand, then go from there. We use a couple of tools in order to achieve that “reset”, then feature detection:

Because we want to develop our site using HTML5 semantics, it’s great that Modernizr includes an HTML5 shiv that will allow “oldie” browsers like IE6/7/8 to interpret tags like HEADER, NAV, SECTION, etc. For anything more complex, we use Modernizr’s feature detection to determine if the user’s browser can handle certain code. Because our site is almost completely based on CSS3 transitions, here’s one we used multiple times:

if (Modernizr.csstransitions){
// do some awesome stuff
}

CSS3
Everyone talks about HTML5. In layman’s terms, when a user sees something that is accomplished without flash, it’s easy to say “oh, that’s HTML5”. Well, that’s partially right. By definition:

HTML5:
(n) 1. The next version of HTML. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices

In general, HTML5 is the combination of HTML, CSS, and JavaScript. A good chunk of the “magic” in Bootstrap’s new site is in CSS3, both rendering and animations. Because we chose the “circle” route, the site heavily uses rounded corners on elements. If you look at the http requests on our site, the only images that are loaded are the employee images, carousel images, and logos.

Another added benefit of CSS3 transitions is that animations are hardware accelerated. If we tried to achieve the same kind of animation on the “Who We Are” page using JavaScript, the page would get choppy. We made use of the “translate3d” attribute for transitions especially so webkit browsers will take advantage of the acceleration. Try using one of the dropdowns, then repeatedly clicking one of the options.

Google Chrome Frame / IE[x]
The benefit of progressive enhancement is that the site will still generally look fine even on the most stubborn of browsers (i.e. IE). Short of forcing the user to switch to a different browser entirely, another option we give our users (for those viewing our site in IE7 or below) is to install a plug-in called “Google Chrome Frame”. This was developed by Google, and is a plug-in for Internet Explorer that generally makes it behave like Chrome. The added bonus is that it automatically updates, just like Chrome. It installs in seconds, and the user can see all of the new and fancy things that Chrome has to offer, while still browsing comfortably in a browser they have grown used to using.

Although realistically we still need to support the browsers our clients task us to develop for, we hope that this “solution” catches on. As we’ve developed more HTML5-friendly sites, the more we’ve realized that IE[x] is the new IE6. Paul Irish, one of the developers on the Google Chrome team and leading front-end developers of the industry, has a great write-up on this.

Responsible Web Development
Whether if we’re developing a generally small site like ours, or an enterprise level web application, we always hold ourselves to the best practices of web development. The front-end in particular is rapidly becoming more robust, and can become unwieldy and harder to maintain when losing focus on how it is built. And with this great power, it means that much more responsibility that falls on the developer.

Wrap-up
Any project can easily stray off the path, especially in our own site redesign considering this project has a very close emotional attachment to all members involved. That is why our process played a crucial role in moving forward with our milestones and eventual site release. It also doesn’t hurt to have a stellar team working beside you every step of the way.

Jeffrey Chew
Director of UI Design & Development

CMS Selection Process

Posted on by
1

Every year, more and more people are using the internet to read the news, go shopping, and pay bills. But the pace of change on the internet has been accelerating faster than anyone expected. As a result, businesses are increasingly looking for technologies that allow them to react quickly and keep their online content fresh.

One such solution is a Content Management System (CMS). A CMS allows site administrators to easily add, update, and delete content on their site. For example, if the business is launching a new product or marketing campaign, administrators can rearrange their homepage to feature the new product, or create a new landing page for an email campaign they sent out to 1 million users. They can even add web analytics tags to track conversions without assistance from their development team.

Of course, not all CMSs are created equal. Each has its strengths and weaknesses, and each has quirks that make it good for certain sites and bad for others. We discovered this as we went through the process of selecting a CMS for one of our clients.

Before we even began thinking about technology, we started with a phase that we call discovery, during which we get to know everything about the client’s business strategies and goals. The idea is to leave no rock un-turned, ensuring that the solution is designed with the client’s needs in mind. Based on our findings, we knew an open-source PHP-based CMS was the best solution for this client.

Once that important decision was made, we evaluated close to 40 different solutions and narrowed the list down to the top five: Concrete5, SilverStripe, Drupal, Joomla, and WordPress. We performed a side-by-side comparison based on the following criteria: Ease of Development, Ease of Design, MVC Architecture, User Registration, User Permissions, Ease of Upgrade, Ease of Administration, Performance, Security, and Licensing. Our main goal was to select a CMS that satisfied as many of the Client’s business requirements as possible and would serve as a solid foundation for future development.

As we compared the solutions, it was quickly apparent that WordPress would not support the breadth of functionality needed, and it would require a large amount of development to add such features as message boards and slideshows.  Drupal and Joomla on the other hand both have a large number of add-on modules, but the quality of the modules varies greatly, since most are developed by individuals and have little or no customer support.

That left two contenders: Concrete5 and Silverstripe, both of which are mature, stable and extensible. After some testing, we found that Concrete5 better suited the needs of the client as it was easier to customize and more intuitive for site administrators.

Once we selected Concrete5, it was time to implement it. Although this CMS was new for Bootstrap’s development team, they found it very easy to work with. More importantly, the client has been very satisfied with the CMS and how easy it is for their administrators to make updates.

If your company could benefit from a Content Management System, please don’t hesitate to contact our sales team by email at sales@bootsoft.com.

Steve Mayotte
Project Manager & Business Analyst

Notifications, Unread Items and Information Overload

Posted on by
Reply

Last week I wrote about the strategies Quora.com employs to engage its users and keep them coming back to the site time and again. A big component of their strategy are notifications–the email and on-screen alerts the application uses to let you know that your attention is needed. Their notifications are tactful and largely welcome.

Unfortunately, however, like many other tools in the software architect’s chest, notifications can quickly cause insane levels of information overload when they’re used without careful thought.

Take for instance the Facebook iPhone app. Every time I open it and navigate to the main menu screen, I have some notifications waiting for me (usually people commenting on one of my wall posts or something similar). I’m alerted to this fact by a little bar on the bottom of the screen highlighted in a different color. This much I’m okay with.

However, if I then choose to close the app at this point without explicitly viewing the notifications, the app icon now has a little red number superimposed on it, telling me how many notifications I didn’t check. If you’re anal like me, this is torture. I now have to go back into the app and view the notifications in order to get rid of that annoying little red number.

“Unread” counts in email and news readers like Google Reader are another good example. Again, because of my mild OCD, I never let my inbox contain any unread messages. I even click on messages I know to be spam just so that they don’t keep notifying me of their unread status. Same goes for Google Reader. If I’m too busy to read everything and I have to skip some articles, I still have to mark them as unread so I don’t have to see that notification anymore. I’ve often thought that these applications should archive (or mark as read) any unread messages automatically after a certain amount of time goes by. If I haven’t read an email in 30 days, I’m probably not ever going to read it.

All of this information desperately begging for our attention leads to apathy at best and resentment at worst. It’s like the boy who cried wolf. Eventually we’re just going to tune it out.

I think the trick here is to think like the user before implementing things like this. Do I really want to receive more than one or two emails per day from a given application? Should notifications be persistent, or should they fade away over time? Should they be mandatory, requiring the user to take a certain action so that they go away? Or should they merely be indicative of an action that is optional? Should the notifications be opt-in or opt-out?

These are crucial decisions to make when creating software, decisions that could lead either to delight or disgust.

Jamie Forrest
Project Manager & Business Analyst

HTML5 showing some promise: GMail achieves full drag-and-drop support

Posted on by
Reply

dragdrop

Cross-browser support be damned, because Google recently released drag-and-drop support for file attachments in GMail last week. Currently, the only supported browsers are Chrome and Firefox 3.6. And no need to turn this on in Google Labs, this feature completely bypassed that and was switched on for all GMail users.

The beauty of this feature is that this works with files outside of the browser. Go ahead and drag files from your file browser or desktop, it will begin uploading once you drop it into the dropbox that appears in your email.

So how does it work? One of the key properties of the new drag-and-drop events is “dataTransfer”. This property is exposed by the following command:

var dt = event.originalEvent.dataTransfer;

The two main methods are “setData()” and “getData()” in the dataTransfer property. “setData()” sets the data type and data to elements. This is usually set in the “dragstart” event. For example, say you have an <li> element on the page:

<li draggable=”true” id=”draggableLI”>This is the element</li>

You then want to bind the “dragstart” event to the element and the data associated with it:

$(‘#draggableLI’).bind(‘dragstart’, function(event){

var dt = event.originalEvent.dataTransfer;
dt.setData(‘text/plain’, ‘HTML5 is groovy!’);

});

Next, we need a receiver. This is done in “getData()”, and is normally set in the “drop” event. Let’s add this to a dropbox div on the page:

$(‘#dropbox’).bind(‘drop’, function(event){

var dt = event.originalEvent.dataTransfer;
var elementText = dt.getData(‘text/plain’);
alert(elementText);

});

There are a handful of other drag-and-drop events, and a list of recommended content types. This example illustrates the basics of what HTML5 drag-and-drop is capable of, and what we can look forward to as more major websites (and smaller ones too) follow Google’s lead.

For a more in-depth article on HTML5 drag-and-drop and the full list of events associated, you can check out an article by Les Orchard from the Mozilla development team:

http://decafbad.com/blog/2009/07/15/html5-drag-and-drop

Jeff Chew
Director of UI Design and Development

HTML5: Underbaked

Posted on by
1

There has been plenty of recent talk of how the HTML5 specification could potentially be a full replacement of Flash, some even arguing that platforms like the iPhone OS doesn’t need Flash support because of this. Although HTML5 has been around for the past couple of years, this new markup specification isn’t slated for W3C recommendation until at least late 2010. It still proves to be a bit unstable and doesn’t have full support in all layout engines. Currently, the browsers that do have a fair amount of support of the new API’s are the recent versions of Chrome, Safari, Firefox, and Opera. Not surprisingly, Internet Explorer is the one at the back of the class. The latest IE8 beta versions do have minimal but fairly unstable support, and is nowhere near the same functionality as other browsers.

Regardless, this hasn’t stopped developers from testing the waters and seeing what HTML5 can bring to the table. Although still a working draft, we’ve been slowly seeing more functionality added into each browser revision, with Chrome and Safari leading the pack. This makes sense of course, considering that both use the Webkit layout engine and HTML5 is being written by Google’s Ian Hickson and David Hyatt of Apple.
There are plenty of articles and examples out in the webiverse, some notable references include:

What to look forward to

In a nutshell, the major benefits of HTML5 include API’s like offline storage and application caching. This opens up many possibilities such as offline web applications, and reducing application startup. Other API’s include the video/audio tags, geolocation, and the canvas tag.

Google has already begun to introduce some HTML5 goodness, with their preview of Google Wave. This is a huge step, as Google was initially pushing their Google Gears extension last year, including the introduction of offline Gmail. Though still buggy, Google Wave shows the potential of what HTML5 can do.

Youtube has also entered the HTML5 realm, with an experimental opt-in preview of their HTML5 video player. Currently, the only browsers supported are Chrome and Safari, and do not have the same amount of features as their tried and true flash player. You can read more and test drive at http://www.youtube.com/html5. However, one of the ongoing debates is the codec to use as the <video> tag standard. This typically was handled in the flash plugin, though now the battle is between H.264 (owned by the MPEG standards organization) and the open-source alternative Ogg Theora. You can read more about the debate at http://arstechnica.com/open-source/news/2009/07/decoding-the-html-5-video-codec-debate.ars.

The Geolocation tag, according to W3C’s Geolocation specification (http://www.w3.org/TR/2008/WD-geolocation-API-20081222), makes use of location information provided by the hosting device. This may not be as useful for desktops, but is a more obvious choice for mobile devices and laptops. Most mobile phones include GPS, and laptops can provide a location via wifi from wifi towers.

And what about animations, you ask? That’s where the <canvas> tag comes in. With the combination of Canvas, SVG, and JavaScript, developers can create flash-like animations to the point of even full-featured games with keyboard interactions. You can find a good number of demos at http://www.canvasdemos.com, though here are some examples worth checking out:

Some great resources for canvas development are at:

https://developer.mozilla.org/en/Canvas_tutorial
http://html5doctor.com/

Are we ready?

HTML5 is definitely shaping up to be a promising future for web and mobile development. We will certainly see the benefits of a less resource-intensive animated and interactive experience without anything additional to install. This could also bridge the gap between mobile apps and the “HTML5 experience” on smartphones and, dare I say, iPads and tablets. However, we are still a bit of a way from solidifying the standards for this new specification, well beyond dotting any i’s or crossing any t’s. Not to mention, we still have to wait for certain web standards challenged browsers to keep up with the rest, even though it still continues to maintain the largest market share for browsers to this day.

So unless we see a huge turn in the browser wars, as well as HTML5 versions of Farmville and Hulu, users will not be uninstalling Flash anytime soon.

Jeff Chew
Interface Guru

What tools do we have in our toolbox?

Posted on by
2

In any professional trade position, there is a standard set of tools that each craftsman needs to be able to complete their work. The carpenter, the plumber, the home chef.

In today’s business and technology climate, in order to get any work done, this list of tools is ever growing and ever changing.

How many tools does it take to build cutting edge web-applications?

To successfully manage a project?

How many do you need to be successful?

Which ones are “the best”?

These are all answers that I am not sure anyone  truly knows.    At Bootstrap, we are always on the lookout for the next best tool; we try many flavors & competing products to try and improve efficiency.   When we can’t find one we like, we build our own.  Here is a recent sample list of tools that get the job done on a daily basis around here:

PRODUCTIVITY TOOLS:

COLLABORATION:

DEVELOPMENT:

  • Version Control
  • Build Managment
    • Custom Build Management Software – “BuildoMatic”
    • ANT
    • Maven

TESTING:

This list is literally the tip of the iceberg, and doesn’t even begin to encompass all the tools running at our offices.  In order to be a productive member of the Bootstrap team, you will likely use, run, review, edit, love, hate, any and all of these tool sets.

Michael Stineman
VP of Service Delivery

Generalization vs. Specialization

Posted on by
1

One of the more difficult tasks in software design is striking a balance between creating a general solution and a more specific one. Should we build something that can handle all sorts of hypothetical future requirements or one that solves a specific problem, but may not work for anything else down the road? Should we take longer and spend more up front but reap dividends down the road? Or should we go quick and dirty now and “cross that bridge when we get to it?”
For example, suppose you were building a web app that facilitated introductions over email. Jane wants to introduce John and Tom. Jane visits a website and enters John and Tom’s emails into a form. The application then sends emails to John and Tom saying that Jane would like to introduce them. John and Tom can click on a link in the email to confirm they would like to be introduced, and the application sends the two of them one another’s email addresses.

Thinking about the data model for this application, you reason that there should be a table that stores each introduction, with fields for Jane, John and Tom’s email addresses. But what if, down the road, you might want the application to support introductions for arbitrary numbers of people, rather than just two? Or what if you may want to handle not just email addresses, but phone numbers, mailing addresses, etc. Should you build the data model now to support these potential features, or should you wait until you need them to implement them?

On the positive side, building a robust data model now would enable you to quickly and easily build new features later; on the negative side, if, for lack of demand, you end up never implementing those features, well then you’ve wasted your time. On the other hand if you only build those things you need right now, over time you will end up with a tangle of spaghetti code.
So what’s the answer? Well, like many other things in life, it depends. It is really a case by case question, and that’s what makes it difficult. There are a few factors to weigh in making this decision:

* What’s the real likelihood of implementing this feature down the road? In the example above I would argue that introducing more than two people to one another at a time is a corner case and therefore not a likely future feature. On the other hand supporting phone numbers and mailing address has a high likelihood.

* What’s the cost of generalizing now? If the present cost of generalizing is just way too high (either in time or money), then you have no choice but to put it off for later.

* Have we been here before? If you find yourself designing something that’s eerily similar to something you’ve done before, and you can foresee having to do it again, you should take the time to generalize now.

I find that many good software engineers fall into the trap of over-generalizing, because that is what they were taught to do in college, and so everything they do just ends up taking forever. On the flip-side, bad coders never plan for the future and just keep heaping crap on top of crap as they go. So keep in mind the guidelines above next time you have to make this trade-off. And also keep in mind that this trade-off is happening all the time in software design, so if you’re not thinking about it, you’re either wasting money or building crummy code.

Jamie Forrest
Project Manager

What do we think is cool?

Posted on by
Reply

What are the best sites out there? What do we think is cool? These are pretty loaded questions. What method would you use to assess them? What makes a  good website?

At Bootstrap, we generally think that the best websites are clearly focused, useful and user friendly.   Whether the topic of the site is food or finance,  real-estate or religion — a good site  has a clearly defined user interface that provides the user with clear direction and easily discernible actions.

Once or twice a year, Bootstrap takes an internal poll to see what excites people on the web. The results range by people’s tastes, their personalities, and what they tend to gravitate to online.

Here are some of the latest results, for better or worse,  with a short description from the reporter why they like it:

2009

http://www.foodgawker.com

Searches food blogs, and presents a wide array of dishes visually. If you want to learn more or get the recipe, just click through.

http://flashtweet.com

Cool app to help get you noticed on Twitter. (Check out that bird logo – designed by one of our own)

http://projects.nytimes.com/crime/homicides/map

Shows where people kill one another in New York City from an an amalgamation of data from different sources. It provides many different ways to look at homicides: time periods (specific years), demographic data of the victim, demographic data of the perpetrator (if known), weapon used, and location.

http://popurls.com/

Aggregator of news aggregators – never need to look anywhere else ever again to find what the Internets think is cool.

http://cliqset.com/

You can easily make yourself super-stalkable, but it’s an app that links into a bunch of the big social sites.

http://www.mapmyrun.com

Provides a mapping tool to allow you to plot and save courses all over the country (haven’t tried internationally). When mapping, it calculates the distance automatically (always useful). There’s also a training log component that tracks your workouts and provides estimated calories burned per exercise.

http://www.rewardtv.com/welcome/sampleGames.sdo

Not cool for its front end so much as what’s going on behind the scenes. It’s really a Nielsen market research site disguised as a TV trivia game for a half a million stay-at-home parents in the flyover states. Big hit with the Top 20 consumer brands spending billions on TV ads trying to gauge message retention.

http://www.bio-bak.nl/?ref-reallyflippingcool

Its Dutch! its Flash! it reminds me of the Addams Family! Its wacky and wild! And did I mention, its Dutch!!

http://www.ted.com

TED talks! So the TED conference (Technology, Entertainment, and Design) is an invitation-only event where people from various industries and scientific backgrounds give <20min talks about… pretty much anything and everything, and then they post the talks online for free. Some reeeeeally incredible stuff in there. They do a great job of making very niche or complex scientific/political/economic disciplines understandable and appreciable to the layperson. I’ve been using the ted talks android app a lot on the train.

http://www.dirpy.com

Converts YouTube videos into MP3′s. Not without it’s kinks (it’s still in Beta), and the sound quality is only as good as the file. But sitll a great way to build up your concert library and locate hard to find tracks.

http://www.apartmenttherapy.com/

Great apartment ideas. Classifieds section that is specialized to mid-century modern/ chic used furniture. Localized to main cities. Shows where the shopping deals are for the week. Linked to unplggd.com, ohdeedoh.com, re-nest.com, and thekitchn.com, all equally cool and are house related

http://www.justmommies.com/get_pregnancycalendar.php?action=Create&month=1&day=26&year=2009&submit=Create+my+pregnancy+calendar

Calendar for pregnant women to enter the due-date and get a day by day calendar that talks about baby’s development and changes that moms should expect. I like that it is individualized by due date and easy to follow because each day has the actual date based on the due-date.

http://foursquare.com/

location-based social networking. i think it’s going to get huge. what i like most about it is how lightweight it is (compared to, say, facebook)

http://www.catalogchoice.org

Green, easy to use, satisfying, interesting crossover from internet to paper world

2008

http://www.woot.com

Singular focus. Good deals. It’s important to remember that a website does not need to do too much. It can be simple and still drive lots of traffic and provide value to consumers.

http://www.okcupid.com

Great algorithms for matching people up. Also, the developers stick in funny content and obscure references wherever possible.

http://thedailywtf.com/

clean,funny, allot of info (what not to do ..) no popup

http://failblog.org/

i’m always amused by the content

http://www.kayak.com

Searches multiple airlines (or other travel) at once to get the best deal. Also allows you to customize your home locations and get a weekly email with avg low fares. It’s simple and does what you need it to do – not confusing.

http://www.umbrellatoday.com/

I am also a fan of the single function website. This one provides a service everyone can benefit from. It also does not ask for more personal information than it absolutely needs.

http://www.geocities.com/icyhotstuntazz/

Why? Because they took over in the 2G+1.

http://www.digg.com

Community based content that “bubbles up” to the front page based on popularity, with users either “digging” or “burying” them. Open discussion about each article, with the ability to digg or bury comments as well. The idea is really simple, but has gained quite a fair amount of popularity.

http://www.zappos.com

Lots of products that can be easily narrowed down because of the amount of drop downs they have.

http://www.milliondollarhomepage.com/

a “why didn’t I think of that” website

http://www.speedtest.net/

For a fairly “boring” task of finding out your upload and download speeds, the interface is very cool, and they provide a good amount of data and easy options to figure out bandwidth to locations worldwide. There are ads paying for the site, but they are really outside the core functions so is easily discernible, and separate from the use of the site.

http://www.fixedgeargallery.com/

Because I like these kinds of bikes and it gave me great examples when I was building my fix. Singular focus, lots of relevant advertisers.

http://www.hopstop.com

So long as you have an address or an intersection, it can get you from any one place in the city to another. You can also use it to map from NYC to other cities close by. Also gives fairly accurate time estimates and re-routes based on construction.

http://www.expedia.com

You don’t have to login to purchase anything.

http://www.etsy.com

Well thought out and organized, clean and simple look that belies its complexity.

http://www.tvrss.net

Complete RSS feed site of torrent files of TV shows. You can either use their combined feed that compiles the latest popular shows as they come in, or you can create an RSS feed based on one particular show, with optional filters.

http://www.yapta.com

Tracks flights you are looking to purchase for lowest fares. Also tracks fares for flights you’ve already purchased and works with the airline to issue a voucher if the price drops below your purchase price. Brilliant!

http://www.ifidie.org/

Funky idea (morbid yet kinda cool), well executed (ok bad pun). Plus my nephew built it.

http://www.sidestep.com.

I like this site because it gives comparison of prices from different hotels, airline flights etc.

http://www.pricegrabber.com

In my opinion, the best site if you want to comparison shop for the best prices on Computers, electronics, and other items. Has user reviews as well as expert reviews of products, and merchant reviews so you know you are dealing with a reputable merchant site. Search results can also give you the best bottom line price based on the cost of the product, tax, and shipping if you enter in the zip code that the item will ultimately be shipped to. -Chew

http://mypokertourney.net/

This is cool because if you like you host your own poker tournaments, you know it can be a burden to figure out what are the blinds, keep a timer, what are the prize allocations, how do the prizes change if additional players buy in or rebuy after the tournament starts. It’s nice to have a program manage all this for you, and provide a nice display of the information for all the players during the tourney. That’s why this is cool, but I’m biased because I created the website.

http://widgenie.com/

Democratizes data analysis & visualization

http://www.befunky.com/

-Kinda like eCards but more room for fun…

http://www.gsmarena.com

1) focus: talks about one thing — cellphones 2) content: great reviews (one of the less biased ones i’ve seen), info, pictures, and comparisons; very comprehensive and updated 3) design: neat and simple

Mike Stineman

Director of Business Development

Service Delivery Manager

Java Application Architecture Lessons

Posted on by
1

Most large modern web application have the following needs/goals:

  • Front-End Isolation (FEI)–Let the front-end developer do h/er job without having to lean on the back-end developer for data or framework education.
  • Easy Persistent Data Access (EPDA)–Provide an easy way to interact with persistent data.
  • Data Flow Visibility (DFV)–Provide an easy way to map data transfer objects to visual data. The application should provide a clearly visible path from visual elements to persistent storage. This IMHO, is the key to low cost maintenance in the face of dynamic resource availability.
  • Easy Service Layer Access (ESLA)–Provide an easy way for services to be accessed in the back end.
  • Easy Ajax (EA)–Provide an easy-to-use AJAX layer.
  • Modular Design (MD)–All tiers should be modular enough to ease maintenance.

Bootstrap has employed several techniques on various projects in order to achieve these goals. Some are highlighted below.

Servlets/JSP/Hibernate/DWR

A couple of our large projects leverage the standard MVC paradigm with Java Servlets for controllers, JSPs for view technolgy and Hibernate to handle the data. The main issue here is the uninhibited use of JSPs. This leads to a tangle of spaghetti code all over the place, which is a UI and back-end nightmare to maintain. There actually exists a class in one of these applications called “HeaderNightmare” and having worked with it for many moons, it’s easy to see the programmer’s frustration. To be fair, this is simply a lack of discipline as JSP does provide the flexibility to go either way. However, that in itself is a caveat. Programmers (all types) need structure and a good spanking (in the form of errors) to avoid them doing naughty things like breaking up an HTML table element among two or more files and linking them with a jsp:include, or putting tons of server-side logic in the JSP files themselves. Lessons learned from this is that goals FEI, DFV and MD are severely hindered.

WebComponents/JSP/Hibernate/DWR

This combination provides a nifty solution for DFV. However, the presense of plain JSPs still leads to the possibility of chaos. There is still some dependency between the back end developer and the UI developer because the pages just won’t work with “variables” on them. To over come this, the UI person will have to code the pages before the back-end person, which could be a resource planning nightmare. With some discipline, this is actually not a bad combination. However, the home-grown webcomponents framework can be limiting in the face of changes around other technologies. It is almost always best to use community-accepted open-source techologies over in-house ones.

Spring MVC Customized with WebComponent/JSTL/Hibernate/DWR

This comes very close to achieving our goals, except that we still haven’t achieved full support for FEI. JSTL is a rendering engine, which requires a backend server running and some knowledge of the tags by the front-end dev. It is however fairly intuitive and easy to setup, so that provides a useful compromise that could enable parallel development. The use of Spring gives support for easy access of service objects and visibility into the data paths via wiring of data access and other services.

A Note on UIsAll the examples above fail to address front-end architecture. It is naturally assumed that there is a combination of HTML markup, Javascript, and CSS, but the rules applied on how to combine these on the projects above are not clearly defined. Like the back-end, maintainability would be much easier with clean separation of behaviour and style from content. Assuming a disciplined approach to using logic on the pages, its easy to provide clean separation of styling from markup, but not behavior. Frameworks discussed below also address this issue.

Spring/Echo2/Wicket

These frameworks take the front-end developer for a ride in Java land. Echo2, the worse of the two, makes it possible to architect the entire display with just Java code. Wicket at least forces every page to have a backing class, which serves as controller and model for the markup. This does give clean separation and enforces a strict NO SERVER-SIDE LOGIC in the view pages. Wicket and Echo2 both provide clean separation of style and behavior, but it can only be achieved in Java code. The front-end developer has little to do here but learn some Java. This needless to say is a huge hinderance to FEI. The event-based programming style of these frameworks also make it difficult for developers accustomed to traditional request/process/response development. Another big problem with these frameworks is that there is too much magic, which leaves most developers in the dark when a problem occurs. This hinders our beloved need for DFV in a major way.

The appeal that Wicket and Echo2 gained was as a result of the ease of authoring Web 2.0 style components. However, due to the lack of provision for FEI and DFV, I believe these frameworks will not last very long (at least not at Bootstrap).

A Suggested “Silver Bullet”

Well, there is no silver bullet, but based on lessons learned from using all of the above technologies, I propose the following:

  • Spring MVC
  • WebComponents
  • JSTL
  • jQuery
  • DWR

For the view layer, this seems to be the best compromise between the UI personel and the application developer. There are ways to overcome data-related errors with JSTL tags that are not that far of a stretch, thus allowing front and back end personnel to work in a parallel. Spring MVC allows visibility into the data flow from front to back end, easing maintenance.

Perhaps the best feature with this combination is the use of jQuery, which allows the clean separation of behavior from markup, but does not force the UI developer to learn Java. jQuery reportedly co-exists with other Javscript frameworks (e.g. Prototype), so using DWR for Ajax calls would be a breeze (call for case study). DWR provides visibility in the flow of data for ajax calls, which adds to the maintainability factor of the application overall. Using jQuery and CSS also helps maintainance based on their respective mantras of separation.

Martin Constantine
Tech Lead

Resources