Bootsoft To Host The First Create-A-Thon NYC 2013

A Create-a-thon is where designers, developers and marketing wizards rally and work to build a beautiful website for a well-deserving non-profit in a set period of time. In this case, it is 12 hours, and we will be spending Saturday, April 20th, giving back to the community.

For the time being, it is a private event, with participants being from Bootsoft only. Although, the end goal is to take our experiences from this event, and grow and evolve to become a larger, possibly weekend-long event where we can invite designers, developers, and the like from the rest of the web design community. As most know, there are a ton of non-profits that are always deserving of a helping hand, so we want to continue giving back to these great organizations.

The non-profit we will be working with is The Autism Program at Boston Medical Center. They do not have a web presence currently, and we are so excited to build them a great looking, functional site to help them out. We are also excited about the fact that April is Autism Awareness Month, and we feel privileged to be a part of it, and are happy to contribute to the cause.

If you are part of a non-profit, or know of a non-profit, and are interested in applying to be sponsored for future Create-A-Thon’s, please email kate@bootsoft.com . If you are chosen, you will have a whole website created just for you, pro-bono, by the professionals at Bootsoft.

We are anxiously anticipating the 20th, and hope you follow along with us while it happens at either (or both!) of these internet places: https://twitter.com/createathonnychttps://www.facebook.com/createathonnyc

Check out: www.createathonnyc.com

Bootsoft is all Business!

 

Two of the things that make working at Bootsoft special are the amazing people and the casual work environment. Last Thursday, the staff of New York and Buenos Aires offices leveraged these to to pull a prank on Jay. Through some covert ops, we arrived for work as usual on February 7th; however, we were dressed in our finest business wear. In an office where hoodies and jeans are commonplace, it was quite a shock to see people wearing suits and ties.

Jay was quick to notice that something was up, and everyone quietly enjoyed watching his head spin as he tried to figure out why we were all dressed up. Not wanting to be left out, Jay even put on a tie during his lunch break.

When asked why he was so dressed up, Jay mentioned that he was honoring the birthday of American Author, Gay Talese, and also celebrating the 345th anniversary of  Dutch Prince William III dancing in premiere of “Ballet of Peace”. After his convincing arguments, we finally, let him know that the real reason we were all dressed up was simply to pull a prank on him. Jay took the joke in stride, and was the epitome of a good sport. Special thanks to all who participated, for Daniel Engelman for capturing the day and especially to Jay for being gracious!

#LHWInTheMovies

Companies are constantly striving to differentiate themselves from the competition and part of our job as a software consultant is to create a product that helps them achieve this goal. Whether it’s increasing efficiency by simplifying their process or purely taking an idea and bringing it to life, Bootsoft takes on many roles (pun intended) when it comes to client satisfaction. When we were approached by one of our long-standing clients, The Leading Hotels of the World, with a marketing campaign idea combining film and travel, we could not have been more excited.

The main premise was to detail iconic movies that have been filmed on location at LHW member hotels or simply put, #LHWInTheMovies. With 85 featured films and the associated 85 hotels, there was no shortage of brilliant images and back-stories. After the initial discovery meetings, our team was feeding off the energy of enthusiastic project stakeholders excited to celebrate both LHW and the Academy Award’s 85th anniversaries. As one would expect, we incorporated the “must have” social media hooks for Facebook, Twitter, and Pinterest to allow a smooth flow across those sites. Custom verbiage and URL’s were crafted by the client to ensure the messaging was in-line with the rest of their campaign.

To implement the immense amount of static content (in 5 languages nonetheless), we attacked this microsite exclusively on the front end. Breaking from the “traditional way” of including multiple script tags on each page in a specific order, our front end team used Require.js to organize and handle dependencies for the assigned JavaScript files. By doing this, we can call one base file for the page and it will load any module and those modules’ dependencies easily. This boosts performance, as these files are not called asynchronously post page load, i.e. no more JS blocking.

Backbone and Underscore were used to build the dynamic templates for the pages, as well as create a convention for organizing high level JS classes. Finally we marked up the pages using HTML5 and CSS3.With all these factors in place, the code is far more reusable and maintainable.

With a wide range of properties across the globe and movies filmed in every decade dating back to 1925, everyone was eager to share the new site with the world. Check out the final product here and be sure to share with your friends and family. Big thanks to everyone involved on the project!

Moving at the speed of JavaScript – Or The Interpreter!

JavaScript seems to be an odd candidate for a language on the rise. After all it’s not new, and in fact is by most accounts a flawed language. Many would argue that it fails to deliver on the 3 pillars of Object Oriented programming; encapsulation, specialization, and polymorphism. Javascript is very loose in it’s typing, and the apparent lack of those types may drive a “classic” programmer out the window. We have functions as first class citizens and can pass them about without a care in the world. The endless flow of callbacks and a-synchronous patterns can quickly turn any well crafted script into an unwieldy goulash. Within the function body of an event handler we suddenly loose scope and find ourselves hanging from the window, looking in on our locally scoped friends we so desperately need. Yet somehow, someway all the “newness” and “hotness” and “hipster meta tech framework jargon ipsum” is leaning on the back of this once berated language.

With the death of Flash there is one way to script that all the browsers you care about can handle, and that is JS. It’s like our “too big to fail” banks and insurance companies. What happens if a browser decides “nah, I don’t like JS, we are going to introduce a new sexy, semantic language that is going to blow the doors of that antiquated piece of junk”, and stops supporting it? People stop supporting that browser. We have parity; Chrome, FF, IE, Safari, Opera etc … IE is no longer the hegemony it once was, and cannot push us around. In fact IE has to play catch up and support the magnificent modern feature set that webkit and Mozilla dream up.

With that, and the increasing efficiency of the JS interpreters we are driven to code the way of the JS Ninja. The FE days of sad code monkeys pushing pixels has given way to some seriously kick-ass client side devs who are moving this wave further and faster. JQuery is almost a forgone conclusion at this point – some of use are running multiple versions *gasp*. It has made selecting, parsing, and manipulating the DOM dead simple, normalized events and AJAX across browsers, gave us simple animations, and brought IMHO brought the first glimpse of sanity to Client Side Programming. WOW, the term “Client Side Programming” was an oxymoron at one point, wasn’t it? Now there is a sea of emerging frameworks, libraries, tool-belts(?) all calling for our attention and loyalty.

We recently built a prototype for client that was purely on the front end. With the help of local storage, an app experience was born that could be stateful for the user and provide an excellent preiview of a potentional product. After much researching and second guessing I arrived a set of libraries and frameworks to use in our venture. They were Require.js, Underscore.js(required by backbone), Backbone.js, and jQuery. Backbone has a hard dependency on Underscore, and looks for either jQuery or Zepto for DOM work. I was fimiliary with jQuery so that was an easy choice. The decision to use Require was inteded to provide structure and convention for JS dependancy management. Node has it’s own built in “require” and as someone who does not do a whole lot with Node – I was envious.


Backbone.js

Backbone claims to be a client side MVC. Model – View – Collection … I hear you, what’s a collection? Where’s the Controller? Backbone had a controller, once, but that is gone now and all that remains is the view – which is actually more like a controller, and where you might think view code should be exists JS templates. JS templates, oh right – and which templating library should I use; mustache, handlebars, underscore/lodash, srender? I’ll say underscore for the sake of simplicity as it’s a hard dependency of Backbone – but I hear people like the handlebars and mustache because they have opinions on logic in your templates. I digress – Backbone, right, so What’s so awesome about it?

  • Nice “extend” synatx for dealing with JS prototype inheritence – very common these days
  • Event Delegation – clean usage of jQuery.delegate, handles the “this” gotcha of the scope bounce with event handlers
  • Patterns for binding views to data models – this is really where the juice is.
  • Native underscore methods of collections (Array of JSON Objects)
  • Reusable code patterns

Underscore.js

Underscore is the only dependancy of Backbone, but shouldn’t be needlesly tied to it. If there is one thing that you take away from this post, it’s that you should go get Underscore/lodash right now. Underscore gives MUCH needed functional tools to JS objects, arrarys, arrays of objects(collecionts) and has some other bonus love as well. There is NO reason why you should not be using underscore, unless your in some larger framework i.e. Sencha. Another glorius takeaway from underscore is that you can now reuse your BackBone data models and collections from Node in the browser, as it has brought all those functional compemenets up. Brilliant!

Require.js

You should be using AMD patterns for your JS, just like you should never use == and always use ===. Require isn’t perfect and can be ugly, but it’s better than nothing and comes with a handy dandy optimizer (r.js) – which runs on Node of course. The learning curve for me was steepest with Require. Not using a singleton global APP object pulls the rug to be sure – it takes some getting used to. In the end it results in better more re-usable JS code IMO.


There are many JS frameworks and plugins and helpers and tools, and it’s moving super fast. Being able to use one of these tools is the only way to learn, and decide if it’s right for you. There is no right way to use them, though certainly there are wrong ways but the most important thing is keep opening them up, diving head on, and hoping for the best. This is NOT an industry where you can sit still – and I like that way. JavaScript may give way to CoffeeScript of ECMA 6 or Dart, or who knows what – but right now you should know it and love it.

Nailed It! – Byron Matto – January 2013

Byron joined Bootsoft a year and a half ago and has consistently nailed it.  With increased responsibilities in recent months he has continued to put hammer to nail -making him an obvious choice as the recipient of the January 2013 Nailed It! award.

As a front-end developer and tech lead, Byron’s skills are top notch. More than anything, what sets Byron apart is his ability to combine his strong work ethic, excellent teamwork and thoughtful leadership. Despite moving his base of operations to Portsmouth, NH, Byron has maintained a strong presence within the team and has proven an effective manager as Director of User Interface.

Byron is leading us on the cutting edge of front-end technologies having successfully implemented the following tools as part of a highly interactive responsive design tablet project for Pearson:

I am proud to count Byron as a colleague, and I know that he will always deliver work that is on-time  and of the highest quality while simultaneously bringing a humorous, uplifting and creative voice to the table.

 

 

Concrete5 CMS: Impressions and Features

It’s hard to imagine the current state of business, entertainment or media without the remarkable impact and contribution of websites in the modern world.

It has to be noted the influence of a website is derived from a combination of its well organized content and the presentation. Content needs to be managed and updated. One of the key technologies in managing content is a Content Management System; a stand-alone application framework responsible to create, manage and deploy web page content. Much to the relief of non-technical website owners and clients, web CMS systems provides users with the ability to edit, publish, administer and even go back-and-forth between versions of their website contents that is instantly reflected to the other side of the world.

I’d like to quickly dive into a particular web CMS framework called Concrete5 and give some of my insights regarding its unique features and functionalities.

Concrete5 is an open source web CMS written in PHP and MySQL. C5 comes with a set of powerful tools and features that are written using object-oriented concepts and the model-view-controller (MVC) architecture. C5 has become being best known for its sleek interface, ease of use, and fast response as well as a resourceful community. Let’s examine some of the interesting aspects that make C5 special.

In-Context Editing

One of the unique features in C5 is its easy and intuitive ability to edit pages on-the-fly: In-Context editing. With a single click of the edit button from the C5 editing toolbar, page is put under edit mode – highlighting the editable page areas on mouse rollover. Users can make all sorts of changes on the editable areas, preview their changes privately, discard them or, if its ready to go live, they can type a description for their current edit version and then publish it. Changes would instantly go live.

One feature many would find useful during an in-context editing is the Scrapbook. Scrapbook is the “clipboard” version of Concrete5, where editors can simply copy one or many already configured and content managed page areas and paste them into other pages without going through the processes they went through the copied areas.

Themes & Templates


Themes define the look and feel of our entire C5 site. A theme is basically a directory of HTML, PHP, image, CSS and javascript files collaborating to render pages. Ideally, developers are responsible to “concretize” their site designs into a C5 friendly theme directory. By concretizing we mean organising the directory structure as per the C5 convention, define common site elements (headers and footers), define templates (page types in C5), define single pages (pages like login and contact-us) and then insert snippets of PHP codes in order to make page areas editable.

C5 allows one active theme at a time but we may have a number of them ready on our themes dashboard section. This list of themes could be a collection of themes from the fresh C5 install, custom made or downloaded/installed from the concrete5.org Marketplace.

Blocks & Block Areas


Blocks are the smallest display units in Concrete5. As the name implies, they are the building blocks of a page and its these entities users manipulate when a page is put under edit mode. Display units like carousel sliders, page navigators and image galleries make a good candidate for a block. When editing a carousel slider a block, for instance, users can specify the number of slides, its speed and the images and once the page gets published, the block’s controller is smart enough to process these inputs (or configurations) and send the processed data to its view.

One thing that always goes together with a block is a block area. A block area is simply the hole a block lives in. These areas has to be predefined on a page so users can manipulate them to add blocks, layouts or even alter their design on-the-fly (i.e. play with fonts, background colors, spacing, borders and even add an inline CSS code).

The fresh C5 install comes with several basic blocks like video player, Google maps, HTML editor, forms and so on.

Page Types


One of the signatures of a well crafted website is its consistent design and layout between pages grouped within the same type of category. C5 has a great way of predefining these types of pages as templates where their common components, layouts and design comes incorporated with their blank page instance. From C5 editing toolbar, users are given an easy task of adding a page, select its type and then fill out their desired content within the block areas defined.

This is very helpful for websites heavy-laden with articles, news and the likes that persistently get created every now and then. Moreover, the desire to improve designs and layouts can easily be achieved on the templates which automatically gets propagated to all other instances of the page type as well as to the newly created ones.

Single Pages


On the contrary to page types, single pages in Concrete5 represent pages that are one-off with unique design and layouts. Pages like Login, Contact and About often are presented with their unique design and layout and C5 does not require these to fall under any of the page types defined; for the simple fact that no more than one of these pages would exist throughout the site. Similar to page type templates, however, single pages could still be set up with block areas as desired so that the actual content can be managed by the end user.

The Dashboard


The C5 dashboard is a hub hosting several admin based tools and global settings like the File Manager – a centralized area to manage site assets like images and docs that could be used by page contents, Users and Groups – permissions and access rights, Reports – system logs, and page errors. The dashboard hosts tools where our custom made blocks, themes, page types and so on are activated before they’re ready for use on the main site section.

Besides these visible features, C5 also comes incorporated with different Zend libraries for its internationalization and powerful caching features geared towards optimizing pages for speed and lightness.

Conclusion

All in all, Concrete5 is an inexpensive, well thought and crafted extensible framework that makes content management a friendly task for regular end users. The number of addons and themes available through the C5 marketplace is an important part of its flexibility and success.

Feel like reading more about Concrete5?
http://www.concrete5.org/documentation/using-concrete5/
http://www.webdesignerdepot.com/2012/08/an-introduction-to-concrete5/
http://www.noupe.com/tools/is-concrete5-the-right-cms-for-your-website-73213.html

Nailed It! – Daniel Engelman – November 2012

Daniel Engelman received the November “Nailed It!” award for his efficient, no nonsense, and common sense approach to project management and business analysis.

Daniel has a special knack for taking what might appear to be a difficult undertaking and breaking it down into manageable tasks. He is quick, insightful and reliably delivers projects on time with minimal fanfare.

The best example of this was the release of coldwellbankerpreviews.com, which won the 2012 Outstanding WebAward. There were a lot of great people behind this project, but Daniel’s contribution stands out for his ability to keep the team moving in the right direction while navigating a complex landscape of personalities, requirements and timelines.

If you want a great quality product or an acoustic version of your favorite song, then Daniel’s your guy.

Music, Bootsoft and the Sweet Sound of a Sabbatical

Almost everyone in the office knows about my alter ego as a musician. In fact it may be hard not to notice this, considering how often I arrive at the office with a stand-up bass in my arms.

Bootsoft is extremely accommodating for my playing. I always have the flexibility to run off to an evening performance or rehearsal, or even to the rare (but glorious) lunch-time gig. However, I feel particularly lucky that I work at a company that is not only accommodating, but actively supportive of my musical pursuits.

This summer I was able to take a 6 week sabbatical. I had planned this with the express purpose of staying home and working on music. I got a lot done – had a pretty rigorous practice schedule, logged my hours playing, took a lesson with a reputable bassist, played with a wider arena of musicians, and had the time to become involved in a successful theater project, “Great Comet.”

I also get direct support from my co-workers, who often ask me about what cool gigs I have going on, or how this-or-that group is going. They have even come out to watch me play, whether I’m playing in a late night jazz jam or in an off-broadway show.

More broadly speaking, there is a musical culture at the office. We have a shared music server so we can listen to and recommend albums to each other, and on some afternoons we will get into a Turntable room together and DJ music as a group (tune in to http://turntable.fm/bootsoft some time for a listen!). I am also not the only musician in the office that can be seen running off to gigs in the evenings, and so several company events have featured planned or impromptu performances by “The Bootsoft Band”, with vocals, guitar, bass, mandolin, drums, etc.

Suffice to say, we have a very musically supportive community here are Bootsoft.  And this all goes without mentioning some of my co-workers’ strong penchants for karaoke…

The ABC’s of QA to PM

When presented with the opportunity to move from QA (Quality Assurance) Lead to Project Manager (PM) I jumped at the chance. After years working in QA moving towards project management felt natural. In university I studied Computer Science and have been working in the software industry since I graduated. I have had varying roles from Software Engineer to Manual QA tester and a few things in between. I started out working as a software engineer on an anti virus product for a multinational software company. Being constantly immersed in the low level detail and code frustrated me. I always felt like I was missing out on something, the bigger picture, the client feedback. I noticed the QA team moving from developer to technical writer to product team discussing issues and providing input and it was then I knew that this was where I should be working.

As QA I loved the amount of communication that was required with Developers and PMs, the view of the release as a whole, how changes would impact users and the responsibility of ensuring a quality delivery.  Getting into the technical details of any given feature on a daily basis was also a part of the role that I enjoyed, but I relished the change in aspects and moving out of the detail again to come back to the customer view of the feature. The ability to be both focused on detail while also maintaining a firm grasp on the big picture is one of the skills a good QA Lead can port to a new role as PM.

For me Project Management is a natural next step from QA Lead for a lot of reasons. Working in software projects a QA Lead will have full exposure to the software development life cycle and is already experienced at working with everyone on a software development team and in particular dealing with developers and pm’s. A QA Lead is also extremely customer focused and usually, if there is a QA team to lead, used to delegating tasks, organizing workloads and communicating to team members. These skills are critical to anyone wanting to hit the ground running as a new software development team PM.

Don’t quit your QA Lead role just yet though, there are challenges. Coming from QA could mean you are somewhat less technical than the developers on your team, as in my case. This means I rely more heavily on my tech lead and architect for guidance on the work estimate and system impact of required changes. This can be a good or a bad thing as there is a fine line between allowing a tech lead to fulfill his or her role and the danger of becoming too comfortable with allowing all the technical decisions to fall to another more knowledgeable team member. I need to make a conscious effort to be constantly learning the inner workings of the system and also recognize team member’s tendencies to over or under estimate work effort and adjust plans accordingly. On the positive side of this, needing input from members of the team in order to make decisions empowers the team and I think reinforces the sense of ownership and pride in the team product.

Some QA habits are difficult to shake. The concept of approving the release of a build with a known bug, no matter how small, is completely contrary to a QA Analyst’s instincts. A PM needs to be more pragmatic in approach. There are larger things at stake and prioritization, scheduling and budget are new factors that need to be considered that are not part of the QA world. Budget, especially, is something that a QA Lead is particularly sheltered from and is an aspect that a QA Lead will be green to. But it’s nothing that some mentoring and a little experience won’t address.

A small adjustment in communication style is probably required too. As QA you find a bug and need to consider every possible part of the application that could be affected. Testing needs to be as wide as possible and estimates need to be conservative, leaving room for bug fixing of bug fixes. The PM on the other hand is being fed this info and will likely need to communicate some plan to the client. This communication cannot be hysterical or overly conservative. It needs to be calculated, adjusted for reality and conveyed in a calm manner. And then there’s the responsibility. There’s a great difference between being one of the team and being the one responsible for everyone on the team making their deadlines. It can easily make for a micro-management style but I am fighting the urge and trusting in my team and I’m happy to say that so far it’s all going well!

In short I think the most vital skills to any PM are communication, organization and familiarity with the SDLC and the varying roles and personality types on a software development team. These all overlap with the skill set required by a good QA Lead. If you are a Quality Assurance Lead looking for a new challenge then this could be the move for you. If you are a company looking to hire a new PM from within, I would suggest following in the steps of the management at Bootsoft and taking a look at your QA team. The challenges of making a career shift from QA Lead to Project Manager are not negligible but it is a shift that opens up a whole new world of opportunities to an experienced Quality Assurance professional ready for something new.

Nailed It! – Máire Hanly – October 2012

Within her first year at Bootsoft, Máire Hanly has proven to be an invaluable resource. Máire’s many accomplishments include: acted as QA Lead on one of the most complex projects in Bootsoft history, trained additional QA resources, and most recently, transitioned to Project Manager for one of our largest accounts. Despite having limited knowledge of the project prior to joining the team, Máire quickly proved to be an effective project manager by utilizing her strong communication skills, attention to detail and knack for organization. These attributes, along with her confidence and pleasant demeanor, made her a stand-out as a recipient for the first “Nailed It!” award.