Rants & Raves

Musings on software, programming, design, and business.

The languages of the browser, HTML, CSS, and JavaScript are berated, harped on, abused, misused, and contorted to do all sorts of things they weren’t designed to do.  HTML in it’s core is a semantic language intended to organize documents and the relationship between them.  CSS is simple, straightforward, but hardly dynamic.  Even with Less and Sass, the resulting output is a flat static stylesheet that was never meant to power rich interfaces.  JavaScript was designed in 10 days and as we all know is the most misunderstood language – thank you Papa Crockford. As someone who writes JavaScript day-in and day-out, I am fully aware of all the issues with it. However, the community is massive and the toolsets are plentiful. What was originally used to perform superfluous tasks is now a great option for a unified language application. Javascript is the only viable way – today – that we have to express a dynamic interface in a browser.

HTML5 has been a big step forward, but it does not really deliver in terms of fluid interfaces, particularly for mobile.  Older methods of DOM access and manipulation are flawed, and ripe with performance issues. Dealing with these issues is complex. Everyday development cycles should be abstracted from having to deal with limitations like these. Famo.us does this for us, and from what I’ve seen so far – it does it well.

Browsers have gotten really good.  Our desktop machines are crazy powerful.  Most of the time folks aren’t cognizant of any performance issues with the sites they browse on their desktop machines.  All of this often masks the limitations of HTML/CSS/JS, or poor implementation by the developer.  On mobile devices however, the cracks in HTML5 start to show.  Although smartphones and tablets today are indeed amazingly powerful for their size, the mobile browsers they tote are a far cry from their desktop cousins.  This is where it becomes quickly apparent that HTML5 is not as magical as we think it is – or have been told it is.  When Zuckerberg – of Facebook –  said “The biggest mistake we made as a company was betting too much on HTML5 as opposed to native” it was a huge blow to the perception of HTML5 in the mobile space.  Recently there have been rumblings of a Front End framework that is solely focused on providing a toolset to use HTML5 in a performant way.  This framework is Famo.us, and it wants badly for the web to win.

Famo.us is alot of things; a 3D layout tool, a physics engine, a native wrapper (yet to be seen), a MVC (yet to be seen), but more importantly it’s an attempt to solve the biggest rendering performance issues of HTML5.  Stabs to crack this nut in the past have fallen short in my opinion.  Sencha Touch is a very mature JS MVC with a rich UI kit, however it is beholden to a heavily nested DOM which will grind your app to a halt if you try to get too fancy.  Ionic framework is a more modern attempt to create a UI kit for mobile, and leverage AngularJS as the app convention.  Although the DOM is much lighter, it doesn’t address a fundamental issue of nested elements, reflows, repaints etc.

Famo.us recently entered a controlled beta – adding a few hundred accounts a day, and allowing access to early guides and documentation.  I am excited to be attending HTML5 Dev Conf for hands on Famo.us training and hackathon, and to be a part of this beta release.  What I have seen so far is very promising.  There are a few things that Famo.us is doing that will give a speed boost to the DOM by addressing how we structure and think about modern web apps.

The Flat DOM

Famo.us uses the concept of surfaces and modifiers for layout. Surfaces are what they sound like, a flat surface – In the DOM represented by a div node.  Surfaces are dumb, they don’t know where they are, they don’t know what size they are.  Modifiers are objects that hold, and can modify the state of a surface.  This can be opacity, x/y/z position, and a host of other properties. A surface’s associated modifiers control its properties, as well as any other surfaces that follow.  This abstraction between surface and modifier allows the developer to chain modifiers and surfaces together, which creates a representational render tree such that a modifier can affect many surfaces below it on the tree.  This concept is central to how one architects the layout.  The association of surfaces is held in the JavaScript code instead of in the markup.  This allows greater flexibility and expressiveness in the tree.   The result is a DOM of surfaces that are siblings, and we avoid the pesky nested DOM tree of yore.

Matrix3D

There is a great article on HTML5 Rocks – A resource for open web HTML5 developers about CSS3 and hardware acceleration.  What is not mentioned in that article the the transform matrix3D – which allows a 16 digit matrix of values to describe a point in space in a 3D perspective along with rotation, skew, and scale.  Famo.us wraps this property up and uses it as the main driver of it’s layout engine – flipping brilliant if you ask me.  This allows them to run operations against multiple matrices of modifiers for super performant, complex transitions.  Deeper under the hood Famo.us leverages the JS method “requestAnimationFrame” to know when to update the matrix – ensuring users perveice the UI at 60fps.

Sticky DOM

Nothing really groundbreaking here I would say.  Caching reference dom objects is one of the first things listed in any best practices guide for DOM speed.   Many frameworks have optimized themselves around reducing DOM touches.  They all have their own special flavor on how they get that done, but the concept is straightforward.  I like to think of JS and the DOM as being on opposite sides of a river.  There is a bridge and, as with all bridges, there is a bridge troll.  Everytime the bridge is crossed in order for JS to talk to the DOM, the troll blocks your path and charges a speed tax.  Famo.us’s modifier / surface separation allows the developer to care less about accessing the surface, since the modifier is where all the slick transitioning is handled.

The performance problems that Famo.us is attempting to address, along with the rich catalog of physics, animations, and other features included make it a framework to definitely keep an eye on moving forward. Bootsoft is committed to the open web, and are looking to leverage any piece technology that helps us move that goal forward.  When Famo.us is ready for prime time, we will happily find the right project to unleash it on.

I had the pleasure of attending An Event Apart in Boston back in April. Self-described as, “The design conference for people who make websites”, it was definitely a huge inspiration and learning experience for someone who does, indeed, make websites. The conference consisted of twelve speakers from all walks of the web world. Over the course of two full and informative days, I learned so much about the future of web design and technology. There were a wide range of topics that were touched upon, but I want to focus on what I felt were three underlying themes: responsive design, screen sizes, and user experience. Now, these may not come as a surprise from a web conference, but of course there are new and interesting ways to discuss and think about these topics.As much as I’d like to separate these three topics into sections, I can’t! Due to the fact that they are so relevant each other, I must discuss them through the ideas and guiding principals expressed at an An Event Apart.

One of the big focuses was creativity. There is so much that can be done with the web, and people shouldn’t feel restricted to standards. Don’t be afraid to push forward new ideas just because they’re different from what everyone else does. We have gotten very wrapped up in the PC paradigm where everything is organized by pages, but in reality, the current orientation of various devices has rendered the page fold moot. Jeremy Keith provided an example of the password field, and how the standard is to hide the text and show those all too familiar bullets or asterisks. This was developed as a standard because people has this idea that someone might be standing behind you watching you as you type. Future has shown this to not really be the case. Now, in a world of decreasing screen sizes, keyboards are less tactile and much smaller, so the ability to see what you are typing is pretty integral. It can get very frustrating trying to type a long, complicated password (which is the requirement from many sites nowadays) where you cannot read what you’re typing. A trend that is catching on is having the option to show or hide the password.

Screen Shot 2014-05-30 at 3.17.57 PMScreen Shot 2014-05-30 at 3.18.07 PM

Instead of deciding for the user, give them the option. Just because everyone has been doing the same thing for years, does not mean it’s the perfect solution, especially when we live in a world of ever changing technology.
There are also so great ways to embrace new technology even if it isn’t supported. The beauty of the browser is that it will ignore code it doesn’t understand, so there is no reason to not implement new things and be ahead of the curb instead of playing catch-up when the trend is already established. Some cool ideas that I found particularly interesting were from Luke Wroblewski and Lea Verou. Luke discusses the already familiar media queries and how to use them in more innovative ways, for example, using a vertical media query. Why not consider the fact that people are using so many different screens and that maybe certain screen orientations should consider where the call to action buttons are, or how large the font is. Consider the user and how they are interacting with their screen. Lea Verou talks about color for the web and how to make it more usable for the programmer. From hex codes to rgb, there hasn’t really been an intuitive way of coding color. If someone gets familiar with the convoluted formula, sure they would easily be able to identify a color by hex or rgb., but why should it have to be learned? If someone has any semblance of constructed color, be it from painting or just choosing color schemes, they should be able to figure out how to code color without having to use multiple programs to identify a scheme and figure out hex or rgb. Lea introduces the HSL variant. Using hue, saturation and lightness to determine a color. This form of color thinking is so much more intuitive and logical. I’m glad that this idea has been taken into consideration and pushed forward. Programmers are users too, and there is no reason we shouldn’t be given the opportunity for a good user experience within code.

Screen Shot 2014-05-30 at 3.13.30 PM
© Luke Wroblewski 2014

Screen Shot 2014-05-30 at 3.11.53 PM
© Lea Verou 2014

Another way to really respect and focus on the user is using research. Investigate the types of people coming to your website, or your competitors’. There are plenty of resources for this kind of research to be done easily. (Chartbeat, etc) the beauty of this method is that there is no longer an excuse for uninformed decisions. The idea that opinions are left up to taste and personal preference becomes irrelevant, and good design and functionality can shine through with research supporting it.

In 2011, a study done by equation research found that 71% of people expect their phones to load almost as fast, if not faster on their phone than their desktop (Source). For many who work in the web, this just seems absurd because it’s a pretty standard fact that of course things load slower on a phone. The truth is, people who are not keeping up with technology in the way that we are, are bound to expect different things. People expect because its smaller it should move faster, or because its a more intimate interaction that it would be faster. The beauty of user research is that we are able to find out users’ beliefs, things that we may not have realized because we forget how involved and informed we are about technology. Another study shows that 90% of user are finishing tasks across multiple devices and screens (Source). This is a really interesting and important fact to know! This makes the understanding and focus on multiple screen experiences so integral to design and development.

We can get very wrapped up in the massive amount of screens that are now on the market, and worrying about how to accommodate all of them. We need to keep focus on the fact that the user is who we are designing for. Continuing to focus on the user will help us move away from us relying on devices, to the devices using us. Think of the actual physicality of using a device; it doesn’t get much more intimate than interacting with your hands. It has always seemed natural to move from using buttons to everything being done on touch screens. If we consider the posture of the user, if they may be laying down or sitting, or standing while using a device, it can really educate us on how to properly design the functionality. Creating accessibility across all devices can include the support for both touch and mouse/stylus across devices. You shouldn’t automatically assume that a certain sized screen is going to be using touch. There are some more features to media queries as well – level 4 includes the ability to identify device orientation, the device’s aspect-ratio, the resolution of the screen you’re viewing, what kind of input is being used (touch or click), and my personal favorite… the light-level. I can see light-level being really neat to work with for color schemes, font sizes and other things. It will use the sensor on your phone (that will automagically change the screen brightness depending on how bright or dim the light is where you are) and you can then change various components depending on the level, whether its normal, dim or washed.

Media Queries Level 4 (Source)

@media (orientation:portrait) { … }


@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }


@media (resolution >= 2dppx)
@media print and (min-resolution: 300dpi)


@media (pointer:coarse)
@media (hover)


@media (light-level: normal)
@media (light-level: dim)
@media (light-level: washed)

All of these considerations of the user can really help drive forward good design and development. Instead of focusing just on the devices and how to accommodate for them, we need to make sure the user is the priority. Another way to ensure a great experience is to allocate time to make sure your page load speed is up to par. Just comparing yourself versus competitors and sites that are well made is a great way to gauge how much work needs to be done. There are some great tools you can use such as ChartBeat (Link), WebPageTest.org (Link), and Page Speed Insights by Google Developers (Link). One way or another these sites can really help you find valuable information about your users and how easily they are able to interact with your site.

I think one way I can sum up my learning experience is a pretty obvious statement, but I believe it’s worth repeating:

DESIGN FOR THE USER!

They are the bread and butter of why we make websites… and don’t forget, YOU are a user too!

After attending An Event Apart, I can certainly say I walked out of there with a ton of knowledge in my head and a skip in my step, ready to get to work on making more innovative and beautiful websites.
Thanks for reading!

On Saturday, April 25th, the Bootsoft Manila team celebrated Earth Day by adopting  and planting 30 Trees at La Mesa Ecopark and La Mesa Watershed Nature Reserve. The day started with an informational lecture about proper gardening and information about the importance of planting more trees.

After the lecture, we finally got our hands dirty! We learned how to make a soil composite (which we can use to garden at home),  and then filled the poly grow bag up with our mixture. We also learned proper planting and watering of plants.

After planting trees, we went on a tour of the Butterfly Haven where we  got to witness a complete life cycle of the butterflies. Of course, we also enjoyed seeing the  butterflies flying and playing with us as we walked through. We loved the scenic view of the garden and collection of different species of butterflies!

We finished our day by painting and designing our own eco-bag that we got to take home for everyday use instead of using a plastic bag (which is bad for the environment!).

Overall, we really enjoyed doing our part to help the environment. We are looking forward to using everything that we learned from this activity in everyday life.

On April 23rd, the Bootsoft New York team made it’s way to Bowlmor Lanes for the fourth year in a row.  As always, the team name and costumes were fantastic:

Bowldozers – Winner of most Team Spirit!

Ten Pin Mafia

Bowleros

Rick Levine bowled an impressive 185 and won the award for Highest Individual Score.

Dave Gould earned the Spare Change award for having the most spares in a single game

Thanks again to all who participated and made it another fantastic event. We can’t wait for next year!

Click here to view more photos from the event.

Bootsoft had another memorable potluck during lunch on March 26th. As always, people used the opportunity to show off their creative culinary skills. In order to keep things exciting, we mixed up the categories which yielded delicious results:

Healthiest Dish went to Daniel Engelman’s Crispy Tofu Cubes with a Tahini/Miso/Lemon dipping sauce


Unhealthiest Dish went to Sally Dankas for her Peanut Butter & Potato Chip Cookies

Boris Bondarenko won the prize for Most Creative Dish with his Roasted Bone Marrow & Parsley Salad

Best All-Around went to the newest Bootsoft team member, Brian Braunstein, for his Pulled Pork and Spicy Hard Cider Glaze (top)

Other delicious items pictured  above are Roasted Brussels Sprouts by David Bebawy, Deviled Eggs by Becky Frost,  and Riceballs by Seung-Yun Shin.

You can check out all the photos here.  Thanks to all for participating!

 

 

The face of front-end development is in a constant state of flux. Web applications are becoming increasingly front-end driven, and the concept of a single page web-app powered entirely by REST-ful web services is the new norm. While libraries like jQuery have dominated the landscape for many years, they no longer provide all of the necessary tools for today’s client-side development world. The result is a major push from the front-end community for more robust tools and frameworks that make up for these deficiencies, one of the most popular of these is AngularJS.  Where jQuery is a toolbelt, Angular is framing, plumbing, and electrical.

Angular isn’t the only solution. Backbone is another popular framework that creates separation in the MVC pattern. It is, in my opinion, the most “bare metal” javascript MVC available in the open-source world. Although it provides some syntactic sugar for wiring events to elements with the scope of a view, it does not offer “two-way” data binding in the way that Angular does.  That is, if you assign a model to a views configuration, the frameworks leaves the work of listening to the model to update the view when data is changed. Building dynamic web applications takes a lot of code, and developers are forced to work with low level tools for DOM manipulation. Starting any new project involves writing a lot of boilerplate code to listen for user input, and then linking all of these listeners to some functionality.

Angular addresses boilerplate bloat code with a more graceful document life-cycle, then allows you to access this functionality through additional HTML attributes/tags/class known as directives. All of the functionality you would have to add using Backbone is moved behind the scenes. The philosophy behind Angular is that web applications are living documents that should update in real time. Creating dynamic client-side applications should not be such a messy endeavor.

The big win with Angular is two-way data binding. In a traditional web app, when a page renders it takes data, merges it with a templating system and then displays that data to the user.  At that point the rendered page is essentially static. Developers have to manually wire events for clicks, hovers, keystrokes etc, that update a data model or collection of models based on those events. The page then has to re-render the page using the template and updated data model.

In Angular, the View and the Model are connected by two-way data binding. Changes that happen in the View immediately affect the Model, and changes in the Model instantaneously change the View. More importantly, Angular sets up all of this functionality under the hood, so coding can be as simple as change a few HTML attributes and calling the template without writing a single line of JavaScript.

Two way binding is a huge timesaver, and also helps the developer think more in terms of the state of the app – which leads to a more consistent experience for the user.  Angular is massively robust and contains many other tools that allow for rapid development.  Dependency injection, custom directives, services, factories, and host of other nuts and bolts place Angular squarely in contention for the go-to JS framework.  I should also note that Angular is a product of our friends at Google, and so we may have a relatively high level of confidence in it’s progression and ongoing maintenance.


I first met Becky in April of last year when she was interviewing for a Quality & Business Analyst position. From the moment we spoke, I knew she was going to be a tremendous asset to Bootsoft. Becky’s solid QA background, strong communication skills and cool as a cucumber demeanor made her a perfect fit for Bootsoft (I was also unabashedly giddy that she had dabbled in Hyperbolic Geometry and Abstract Algebra). Unfortunately, Becky was living in Madison at the time and we would have to wait nearly three months for her to join our team. As expected, she was worth the wait.

Becky hit the ground running and started to contribute immediately. Rather than read all the training materials we have built over the years, she migrated everything to our internal wiki. After that, she went after our auto-test development materials and started critically evaluating our processes looking for inconsistencies with a serious eye for detail. Once she got our existing materials in order, she worked with other Quality Assurance resources in New York, namely Smadar Mavor and Kate Diago, to draft a methodology for creating Agile Use Cases. In summary, she quickly tackled unglamorous tasks that were overdue and badly needed and for that she gets a big fat gold star.

Becky did not stop there; instead she put on a Product Owner cap and collaborated on several Agile projects. In this capacity, her attention to detail was instrumental. She drove story development, corralled clients, managed priorities, and extracted and translated requirements. She has worked on an educational product for a start up, a financial research oriented mobile iPad app, and a SalesForce VIOP integration where her QA and technical skills have certainly been challenged, but she continues to shine.

As noted above, Becky is nailing it and has done so from day one. She has been a tremendous help to me, and I cannot wait to see what else she can do as her career evolves at Bootsoft.

Agile is everywhere. In the 13 years since the publication of the Agile Manifesto, the term has slowly become a common part of the tech vernacular – and that’s a good thing. For years, the majority of us in the development community have pretended that if we just sat still long enough, thought hard enough, made swank models, had a lot of meetings to collect requirements, and incorporated feedback from peer reviews on our designs and specifications that we would create the best product possible. I have a lot of swank diagrams, data models, and technical specifications that I’m pretty proud of, but when the rubber meets the road, ‘stuff happens’ and there is always the regret that we did not have more time for development or find that super key thing that was missed.

Collectively speaking, we have always made up for those mishaps with a lot of coffee, all nighters, a few stressed out PMs and a lot of refactoring. Riding down the waterfall in the best constructed barrel has certainly served us well, but I have always felt like something was fundamentally wrong. Agile taught me that I was not crazy for thinking there was a better way, or that our efforts were misplaced.

Agile Process

Helping lead the way in the Agilification of Bootsoft has been one of the more rewarding professional experiences I have had. There is a greater sense of ownership across the board and quite frankly it just makes sense. Working with clients to shape a product from start to finish is very satisfying. When involved in these type of projects, most team members feel like they have a say in the direction of the product as it develops. They’re not just handed a massive tech spec and told “Go.” At the same time clients can see, touch, and feel the product as it goes through development, which obviously helps build our mutual understand and confidence along the way.

That’s not to say Agile is always the right choice. Tackling an Agile project requires a close-knit team of highly motivated individuals. It requires discipline; albeit a more creative kind of discipline, but discipline none the less. It requires more training. The Agile methodology has only recently hit universities and most of us have waterfalling ingrained in our DNA. Unraveling traditional methods and educating clients and colleagues is no small task.

You’ve also got to take the time upfront to reap the rewards. People are resistant to to long retrospectives, planning, and estimation sessions because most of us are simply so scared from a seemingly relentless line of unproductive meetings. We all have a tendency to  fall back on old habits and comfortable ways of working. You need a few ah-ha moments to keep the shift in style and tactics in place. It is not as easy as enacting a new policy and insisting everyone follow. It requires coaching and determination. I guess this is why they invented the scrum master – to keep everyone honest about the process and priorities.

Despite this, I am a convert. There is a better way, and Agile is it. Agile will lead you to a better product faster. In other words – you can believe the hype.

In November 2013, Typhoon Haiyan (Yolanda), struck the Visayas region of the Philippines. It was the strongest storm ever recorded (category 5),  and as a result it destroyed many homes and historical facilities, tore families apart and claimed many lives. In the wake of the storm, the International community came together to extended their donations, relief and rescue mission to all affected areas.

Bootsoft’s Manila office also wanted to do their part in the relief efforts and did not think twice about setting aside the employee Christmas party to host a gift giving party to the children of Tacloban, and providing a Noche Buena to the families that were taking refuge at Hospicio de San Jose.

Bootsoft Manila Team who had a great time hosting a party and wishing them a better tomorrow after the tragedy.

Nothing compares to the fun and fulfillment seeing them enjoying and smiling like nothing happened.

Food for their Christmas Eve Celebration

The smile on the kids faces were priceless!

Overall, the event was in the true Christmas spirit of giving back. The team enjoyed seeing smiles on the faces of children you would normally see on TV crying and asking for help. In fact, the event was so popular with the team that it’s highly likely there will be future events where Manila Gives Back!

Early last year, Bootsoft introduced the Bootsoft Learns Together program (BLT). The big goal being to continue to grow and learn new and interesting things. One cool thing about the program is that the topic is not limited in scope to what we do here at Bootsoft — or maybe it is, since we’ve been known to dabble in everything from music, to puzzling, to art, and of course software! Another cool benefit is that Bootsoft donates BLT hours for all employees, so you can actually do this while at work!

The development group decided that we would learn Scala. A small group of us signed up for a functional programming course via the popular learning site, Coursera and chugged on for several weeks. The class itself was comprised of lectures, quizzes, and homework. The lectures were about 5 to 15 minutes long per session, with an embedded quiz. Homework assignments were due weekly and got fairly involved, especially towards the end. All in all, it was a great learning experience. The group got together once a week to talk about the class and share ideas on the material itself, including applying our new-found knowledge to future project work.

Riding our Scala-high, we immediately got together to talk about our next learning adventure. That talk resulted in us deciding to attend and iOS class. The class we signed up for was an ongoing series offered by Stanford University. These were real full classroom lectures that were recorded and published. The format was therefore very different than what we were used to from the Scala class. In fact, most of us agreed that we were bored with the delivery of the material (mostly due to the length of each lecture). As a result, we decided to try using the class material as reference to aid in building some real iOS projects in-house. This effort resulted in three projects, two of which were dropped. The final of the three is still on-going and will be released to the public later this year.

We learned from the iOS class that it was next to impossible to keep up with Apple’s lightening pace of iOS version releases without sacrificing real project work and deadlines. We also learned that it was much easier to stick with the class to the end if the format was more suited to a heavy multi-tasking environment. That is, bite-sized chunks over long drawn-out sessions.

Generally, though we got something started and now it is once again in full effect, as a couple of team members have picked up Mongo DB for developers, another online course that is formatted very much like the Scala course and shows great promise for usage in future projects at Bootsoft.