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:

• HTML5 (including next generation additions still in development) Draft Standard (http://whatwg.org/html5)
• HTML5 Wikipedia page (http://en.wikipedia.org/wiki/HTML5)

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:

• Cloth Simulation (http://www.andrew-hoyer.com/experiments/cloth)
• Fred Jones in Adventureland (http://www.watersheep.org/~markh/html_canvas/game.html)
• FreeCiv (http://www.freeciv.net)

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

admin Application Architecture, Uncategorized html5

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:

• MS Word
• MS Excel
• MS Project
• MS Powerpoint
• MS Outlook / Mozilla Thunderbird
• Open Office
• Instant Messaging
  • AIM
  • Yahoo
  • MSN
  • Skype
  • MS Visio

COLLABORATION:

• Google Wave (and assorted tools Waveboard, Waver)
• Basecamp
• Custom Installation of Mantis
• Custom Use Case Management system “EnCase”
• Custom Time Tracking tools

DEVELOPMENT:

• Axure for prototyping
• Adobe Photoshop / Illustrator

• IDE’s
  • Eclipse
  • Netbeans
  • IntelliJ IDEA
  • MS Visual Studio
  • Zend Studio

• Version Control
  • CVS
  • Subversion
• Build Managment
  • Custom Build Management Software - “BuildoMatic”
  • ANT
  • Maven

TESTING:

• Selenium
• Junit
• HTMLUnit
• MS Web Capacity Analytics Tool
• Paessler Web Stress
• Browser Plugins
  • YSlow
  • Web Developer
  • Firebug
  • MeasureIt
  • Many more….

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

mstineman Business, Project Management development, productivity, testing, tools

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

admin Uncategorized

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.geocities.com/icyhotstuntazz/

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

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

mstineman Project Management, Uncategorized

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.

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:

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

• Spring Framework
• Echo2 Framework
• Apache Wicket
• Direct Web Remoting (DWR)
• JSTL
• jQuery

admin Application Architecture architecture, dwr, echo2, hibernate, j2ee, java, jsp, jstl, mvc, mvc II, servlets, spring, wicket

Features of the new application include:

• GPS-based search to locate nearby homes for sale, open houses and recent homes sold
• Ability to sort recently sold properties by location, price and sale date
• Option to view search results in list form or on a variety of maps including street, hybrid and satellite that are marked with “clickable” Coldwell Banker Real Estate icon
• Detailed property listings that include images and a slideshow view
• Direct dial and e-mail functions from the user’s mobile handset to the local Coldwell Banker Real Estate listing agent associated with each property
• Real-time notifications of new properties and open houses identified through the user’s customized saved searches

click here for the press release

admin Uncategorized

gpacheco Business, Project Management discovery, framework, prototype, requirements, wireframe

Several problems can arise when applications contain a mixture of data access code, business logic code, and presentation code. Such applications are difficult to maintain, because interdependencies between all of the components cause strong ripple effects whenever a change is made anywhere. High coupling makes classes difficult or impossible to reuse because they depend on so many other classes. Adding new data views often requires re-implementing or cutting and pasting business logic code, which then requires maintenance in multiple places. Data access code suffers from the same problem, being cut and pasted among business logic methods.
The Model-View-Controller design pattern solves these problems by decoupling data access, business logic, and data presentation and user interaction.

MVC divides an application into three concerns:
• Model - Encapsulates core application data and methods for accessing it.
• View - obtains data from the model and presents it to the user.
• Controller - receives and translates input to requests on the model or the view.
The separation into three concerns is inspired by a information processing model where the controller represents system input, the model represents processing and the view represents the output of the system.

Pros
- Better Maintainability: Orders of magnitude in ease of maintainability.
- Code Faster: Separation of business logic allows for ease of reuse which in turn leads to faster development and less time on tedious maintenance tasks.
- Redesign UI Easily: Ability to reskin entire application very easily.
- Ease of growth: Controllers and views can grow as the model grows; and older versions of the views and controllers can still be used as long as a common interface is maintained.
- Already in used in Enterprise sites such as Yahoo Bookmarks.
- Database Abstraction: Most frameworks can easily switch an entire application to use MySQL, Oracle, or SQL Server. Code is not database specific.

Cons
- Need to become familiar with specific framework

Leading Options

• CakePHP - http://cakephp.org/
• Symfony - http://www.symfony-project.com/
• CodeIgniter - http://codeigniter.com/
• Mojavi - http://www.mojavi.org/

Michael Sleman
Tech Lead

admin Application Architecture framework, lamp, mvc, php

You’d think upgrading from MySQL 4.0 to 4.1 would be a trivial task. Unfortunately it’s not due to the fact that MySQL 4.1 has knowledge of character sets where 4.0 did not. If you have plans for internationalization or are working with other non-English language, now is the time to take the plunge and make sure your data is in utf-8 (unicode) in the database.

The following describes the process of upgrading MySQL from 4.0.16 to 4.1.22.

Step 1 - Put System in Maintenance Mode
Make sure there is no data changing in the MySQL database.

Step 2 - Data Backup
• Make a copy of mysql data directory.

Step 3 - MySQL Upgrade + Data Verification
• STOP SLAVE on slaves if running replication
• Shutdown mysql on all servers
• Modify my.cnf on all servers as follows
• [mysqld]
character-set-server = latin1
default-character-set = latin1

• Upgrade MySQL to 4.1.22 on all servers
• Start MySQL on master database
• Upgrade password handling (mysql_fix_privilege_tables script).
# mysql_fix_privilege_tables rootpassword
• Run following statement for every table to convert from latin-1 to utf-8 character set.
ALTER TABLE tablename CONVERT TO CHARACTER SET utf8 ;
• Modify my.cnf
[mysqld]
# Remove the following two lines
character-set-server = latin1
default-character-set = latin1
# Add
[mysqld]
character-set-server = utf8
default-character-set = utf8
[client]
default-character-set=utf8
• Restart MySQL
• Restart replication

Step 4 - Apache Modifications
• Modify Apache to set.
AddDefaultCharset utf-8
• Turn off maintenance mode

Step 5 - Testing
Test entire application
Issues to expect:
• TIMESTAMP fomat output has changed significantly so scripts that parse a date are very likely broken.
• Check all instances of Load Data Infile
• Syntax for multiple-table DELETE statements has changed

References:
http://dev.mysql.com/doc/refman/4.1/en/upgrading-from-4-0.html
http://dev.mysql.com/doc/refman/4.1/en/charset-conversion.html
http://peter-zaitsev.livejournal.com/12083.html
http://www.w3.org/International/O-HTTP-charset
http://dev.mysql.com/doc/refman/4.1/en/charset-connection.html

Michael Sleman
Tech Lead

admin Database, Version Upgrades Database, lamp, mysql, unicode, utf-8