The dev notes of Matt Guest


The next big thing is always right around the corner.

Codrops is one of my favorite places to browse when I’m bored or looking for inspiration. They have some of the coolest and most complete demos I’ve come across for everything from interesting and modern menu systems to slideshow transitions. All of their demos are smooth and polished, and I always end up clicking and watching everything move over and over again for way too long.

Well, Codrops is now also home to one of the most well put together CSS references I’ve seen yet. It seems to include every property, @rule, function, data type, and psuedo-class in the spec, each complete with descriptions, examples and browser support references.

Check it out!
Codrops CSS Reference
Introducing the Codrops CSS Reference


I’ve been messing around with the Famo.us framework a bit in my spare time lately. I’ll have more to say about it soon, after I find some time to actually create something and see how it all works in practice. For now I’ll just say that it’s an interesting approach to get some big performance gains out of html apps that require highly interactive and animated interfaces.

The people over at Famo.us have taken a fairly drastic approach, basically rebuilding how html is rendered in the browser. It is able to render your application, all built in javascript and using some familiar html and css syntax, using the DOM, Canvas, and WebGL. They’ve even built in a physics engine to make transitions more interesting than can be achieved with standard ease transitions. There’s a set of custom Angular directives available to make building with the framework a bit closer to html, but I think that part of the project is a younger, and it didn’t seem to work as well as advertised for me.

I’m on the fence about what kinds of applications this framework could make sense for, given the steep learning curve and drastic deviation from standard practices. Right now I’m thinking that it’s definitely not something you’d want to use for your standard website, but a mobile app that is meant to be packaged to look native using something like Cordova might benefit from the performance gains Famo.us offers.

Just to give you an idea of how different coding for Famo.us is from normal html/css/js, here is one of the code samples they provide that creates a red square and animates it to the coordinates 100, 300 in your view:

var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');

var mainContext = Engine.createContext();

var surface = new Surface({
  size: [100, 100],
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: '#FA5C4F'
  }
});

var stateModifier = new StateModifier();

mainContext.add(stateModifier).add(surface);

stateModifier.setTransform(
  Transform.translate(100, 300, 0),
  { duration : 1000, curve: 'easeInOut' }
);

See it in action

Like I said, I hope to dive into it further soon, and when I do I’ll be back with more detailed information – maybe even a tutorial – but if you want to check it out for yourself, the Famo.us University has a well put together series of interactive tutorials you can complete right on their site. Fair warning though, Famo.us is not for the feint of heart. From the marketing copy on their site and the brevity of their tutorials, it seems as though they may be underestimating just how foreign this type of development may be for most people that were raised on html and haven’t had to build interfaces in code.


A long time coming

The domain mattguest.com has been in my possession for many years, much to the chagrin of at least two other Matt Guests that have made their existence known to me. I first registered it when I was working for a small ISP in the late 90s.

Over the past 17 years or so (17 years, really?) it has directed people to many different personal blogs and projects of mine. A few times in the lulls between I’ve let registration on it lapse, only to be lucky enough to snatch it up again before one of my doppelgangers noticed.

At one time it was focused on Macromedia’s Coldfusion, then a short period of .NET and Java related posts, a big span of Flash and Flex experiments, and for a time it was all about iOS game development.

At different points in my career when I was freelancing it made itself useful as a portfolio site to showcase my work.

And then, for the longest time it just laid dormant. Sometimes showing a hopeful coming soon message, and at others just aimlessly pointing to nowhere. I was working hard, but didn’t have much to share. The web was changing, and I was still only occasionally dipping my toe in to test the waters, waiting for the tipping point where it made sense to jump ship.

While I was putting all of my energy into the big frontend platform at the time, Adobe’s Flex (you can laugh now, but only a few years ago it was still THE major player), browsers were competing in an intense arms race, and they were growing up fast in the process.

Finally the time was right and I was given the uncertain task of heading up the creation of an entirely html based platform to take our company’s offerings in a new and exciting direction. I went into it with nothing but a basic knowledge of jQuery, an “I’m pretty sure this can be done” attitude, and the excitement that can only be felt when running headlong into high risk, high reward territory. It’s amazing how fast one can get up to speed when your reputation and the fate of a huge project you believe in is on the line.

Blog resurrected, interest renewed

Over the last few years of successes and failures I have grown to truly love javascript. It’s loose, but flexible. It can be unbearably messy and strikingly elegant, and it provides a thousand ways to solve any given problem. As much as I’ve come to appreciate javascript as a language, in the context of front end web development, it’s nothing without its two additional partners – html and css.

These three separate technologies are incredibly different from each other in syntax and purpose, but inextricably intertwined. They can be combined in so many different ways, and made to play off of each other with beautiful harmony once you fundamentally understand all three well enough to truly gain control over their delicate dance. The platform that the modern DOM and javascript runtimes provide is incredibly powerful, and I am still amazed on a regular basis by what can be achieved using a little html, css, and javascript.

By the time I finally felt that I had gained a healthy understanding of modern front end web development, I realized I had a lot to say about it. A few false starts later, and mattguest.com has been pulled once more from it’s perpetual cycle of use and retirement to serve as my sounding board.

The never ending road ahead

Seriously, it never ends. And you need to be ok with that if you want to thrive in this accelerated new world.

The web as we know it is constantly changing. New standards are always on the horizon, frameworks rise and fall, design trends wax and wane, and browsers synchronize and deviate. It never stops evolving.

It’s our job as software developers to keep up, to push and help shape the curve, because there is precious little time to catch up when the next big thing you overlooked starts gaining traction.

Since this inaugural post has already gone off the rails, bordering on the pseudo-philosophical, it feels appropriate to wrap it up with a couple of quotes that I just looked up:

“Learning is not attained by chance, it must be sought for with ardor and attended to with diligence.”
— Abigail Adams

“Live as if you were to die tomorrow. Learn as if you were to live forever.”
— Mahatma Gandhi

I imagine Mrs. Adams and Gandhi had loftier goals in mind than building web apps when they penned these quotes, but I think their sentiments still apply.

–matt