What do we think is cool?

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

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