My desk, home office and bedroom are usually swimming in books. Here are ten that I’ve been busy with recently and recommend:

Confessions of a Young Novelist
by Umberto Eco

I love Umberto Eco. Reading Name of the Rose in high school got me hooked. Finishing Foucault’s Pendulum (after two tries at various stages in my life) ruined me for lesser conspiracy fiction from that point forward. So this personal, fun romp that loosely covers his career and explores the relationship of fiction, nonfiction and myth making along the way is a must read. Also one of the best book covers I’ve seen this year, I love it.

Supercharged JavaScript Graphics
by Rafaele Cecco

I love that this book is all over the map. It may seem a bit frantic at first, but having good, solid examples of multiple graphics techniques in JavaScript is a great resource. I’m also a sucker for most types of books that discuss code and graphics, so I support the better efforts in this field when they’re worth it. A great add to your UX library.

Angelmaker
by Nick Harkaway

While I try to keep the books on this list focused on design or technology, I’ll definitely include great fiction finds as well. Angelmaker recently came out and needs a lot more attention than it’s getting so far. The Book’s own description says it best, “blistering gangster noir meets howling absurdist comedy as the forces of good square off against the forces of evil, and only an unassuming clockwork repairman and an octogenarian former superspy can save the world from total destruction.” And it has mechanical bees too! Check it out.

Diversity and Complexity
by Scott E. Page

Keeping up with emerging trends in technology, adaptive complex systems are becoming all the rage. This is a great primer on a timely topic.

Design In Nature
J. Peder Zane

Much of the creative process is finding patterns in seemingly unrelated ideas. I think that’s why I’ve always loved Biomimicry. In Design In Nature, Zane takes it a step further to presents a governing Constructional Law in animate and inanimate systems. Rich, thought provoking stuff and at least for me, always helpful as an inspirational boost during those blue sky, divergent thinking sessions.

Practical Rendering and Computation with Direct3D 11
by Jason Zink

There is no better time to learn C++ and DirectX then right now for Windows 8. If you’ve already burned through the easier Game Programming with DirectX 11 type books, this is the deep dive book you’ve ben looking for. The breadth and depth is amazing, but be warned – this is not light reading. This one requires chewing, but is well worth it to take smart, aggressive beginners up to the next level in understanding what’s really going on under the covers.

Origami Tessellations
by Eric Gjerde

I’ve been getting deep into Papercraft and Folding in my down time this year, and this was a great find. From stark, geometric patterns to Arabesque techniques, these paper / fabric folding techniques are awesome to learn and explore for crafting or fashion design.

Shapes for Sounds
by Timothy Donaldson

Now this book is a compound win – typography, graphic design and comparative language studies! The information graphics are pure gold as the author breaks down the origins and commonalities among the alphabet and common phonetic structure of languages around the globe. A must for language lovers and absolutely a stand alone in its design quality and visualization of verbal concepts. Go here for a great review that shows some of the amazing graphics found in the book.

Glitch: Designing Imperfection
Iman Moradi

Yes, this type of book is designer bait, but who can resist? It provides a nice snapshot of the Glitch trend and seems to fit somewhere between Metro and the New Aesthetic. If you’re looking for design that isn’t minimalist yet also is exploring what it means to be digital now that skeumorphism has jumped the shark, start here. There are at least a half dozen app ideas in here just waiting to be fished out.

Karakuri: How to Make Mechanical Paper Models That Move
Keisuke Saka

Finally, this book is papercraft for geeks! I’m not ashamed to say that I learned more about gears, cranks and levers from this book then I ever have before. Building paper based models of simple mechanisms while learning about the time honored art of Japanese Automata is a winning combo and my daughter and I build the functional paper robots together. Geek Win + Dad Win = Buy It.

That’s it for this month. You reading anything amazing? Let me know in the comments!

@rickbarraza

If you have anything to do with the concept, design and development of software, I’m sure you’ve run into this with the word design. Everyone uses the word but most people can’t agree on what it means. Metro face many of the same challenges, since Metro inherits from Design. So before we analyze Metro syntax, let’s tackle the question of design.

What is Design?

Much of the frustration between designers and developers is due to a basic semantic problem. Design is both a noun and a verb.

Most people think of design as a noun. I love the design of that app. In this context, design as a noun is usually collapsed down to simply mean the visual style of the app. When they speak of design they just mean the skin and the visual ornaments tacked on at the end.

Design professionals, though, tend to think of design as a verb. I design apps peoples love. In this context, design as a verb is all about the process from the beginning. To understand what Metro is and what it isn’t, more importantly, to understand how to do Metro right, you have to understand this process.

Three Pillars of Great Design

In the Donald Norman classic, Emotional Design: Why we Love (or Hate) Everyday Things, great design can viewed as a synthesis of three targeted disciplines: visceral design, behavioral design, and reflective design.





Visceral design is all about nailing that initial, gut reaction. The goal of visceral design is to brain hack the user by directly appealing to their base, automatic reactions. We can cerebrally talk about beauty only being skin deep, but we all want to experience love at first sight.

Behavioral design is all about solving the right problem, and making sure you are solving it the right way. Is the application functional, dependable, and usable? This model embraces the consumer as a predictable, rational user fixed on performing a task.

Reflective design elevates the solution into the social and moral landscape. What does using this product say about me, my values, my goals, and my network? This product associates me with what larger movement, tribe or belief system?

Cheap design will chase a single pillar at the expense of the other two. Great design architects a solution that is properly balanced upon all three, depending on the goal of the application and the audience it serves. So where does Metro rank?

What is Metro?

At the highest level, Metro is a design philosophy that embraces five core principles:

• Pride of Craftsmanship
• Fast and Fluid
• Authentically Digital
• Do More with Less
• Win as One

When we map these principles to the three pillars of great design, we see that Metro absolutely nails Behavioral Design. With its reductivist and modernist ethos, it promotes content before chrome. It preaches form follows function and embraces the elegance of simplicity.

However, I would also argue that Metro is at the forefront of a radical shift in Reflective Design. This is perfectly encapsulated in the creed Authentically Digital. To understand the deep and significant shift in thinking that this requires, we need to zoom out and put this war cry in its context.

The Rise and Fall of Skeumorphism

When most people speak of design as a noun, they are talking about the feeling they get from the aesthetics. In this post scarcity, hyper consumer based economy, this battle for eyeballs and dollars has been fought primarily targeting this aspect of visceral design.

Unfortunately, the easiest way to nail visceral design, even at the expense of behavioral and reflective design, is to employ skeumorphism. Skeumorphism can be defined as a derivative object that retains ornamental design cues to a structure that was necessary in the original. In other words, making the app mimic the anolog world to invoke desire. Doing this well is a talent. It is also the first thing we are usually drawn to and learn as budding designers.

Skeumorphism in itself isn’t bad. It is one of several techniques at our disposal as design professionals. The Page Flip effect I created a couple posts back is a perfect example of skeumorphism. There is no actual paper, light source, or shadows in the virtual pages you flip, but by manipulating the effect of physical paper turning, the design is targeting the familiar to play upon your emotions when interacting with the digital.

Unfortunately, skeumorphism stopped being one of several ingredients in a well-balanced diet of experience design, and became our primary food group. Skeumorphism is eye candy. Skeumorphism is highly refined, blindingly white brain sugar, and who does’t like sugar? But if skeumorphism is the only trick we needed to learn, we can’t really call ourselves designers since we’re not really solving any problems. We would simply be stylists for hire. Now that may be what a particular client wants, but its not what our profession is all about. Design solves problems.

So the shift in professional design to move away from skeumorphism did not begin with Metro, but it is an emerging movement arising across the world of design and technology as a push back against this sickly sweet, analog mimicry that has saturating everything. We are waking up to a new aesthetic, and shedding crutches that were needed during the analog to digital transition, but may be gratuitous bloat today.

Through a brilliant combination of talent, hard work, luck and timing, it just so happens that Metro is coming out at exactly the right time to be the dominant operating system of this paradigm shift. This is big, deep, radical change. This is change that inspires. This is change that terrifies. This is change that forces reflection.

Please Don’t Be Boring

So while skeumorphism isn’t the only way to achieve visceral design, breaking free from it is not an easy task. It now has decades of momentum and ubiquity in the digital world. It is that easy access box of donuts at work in the morning that tempts us with filters, cow bell, and gimmicks that many of us have stuffed in our toolbox over the years for just that very reason. That tired collection of good old crowd pleasers we can crank out quickly and move on to the projects that really inspired us. We’re all guilt of this. But we should work at stopping it.

…Metro is a forcing function that can help us return to great design.

That is why Metro is hard right now for many designers, because it requires all of us to think differently about our designs from the ground up. But this is a good thing. Edward Tufte says that good design is clear thinking made visible. As such, Metro design doesn’t start with templates, it starts with questions. Are you sure you are solving the right problem? Are you solving it with laser focus and clarity? Are you solving it as fast and fluid as possible? What form would best optimize this function? Is the visual style being true to both the task at hand the desire of the audience? Or is the style treatment simply relying on eye candy to hide a weak concept or poor execution?

It is said that a design is done, not when there is nothing left to add but when there is nothing left to remove. The difference between an amateur and a professional in both design and software is that an amateur becomes obsessed with adding new objects and frameworks, even when not needed. In contrast, a mature professional thinks in terms of refining the solution down to its essence and sustainable framework. In both cases, professionalism is manifest in the ability to strip off all that is unnecessary, but nothing more.

Metro promotes visceral design through pride of craftsmanship. This is not easy to do. This requires thought and talent. Simply stripping all the chrome away down to the bones is no more metro than stuffing everything into a box and using 42 point fonts.

The design of a Metro app is focused on human centered problem solving. Enable the task to be performed quickly and efficiently, but don’t forget the human on the other end. Getting rid of skeumorphism isn’t done to remove any traces of humanity, but to provide space for the authenticity and soul of your application to breathe.

Most importantly, the amount of visceral design has to be appropriate for the task and audience. Pragmatic, task driven apps should plainly manifest the prioritization of behavioral design within Metro. As the content and goals of the application move into the visceral realm (such as luxury goods and services, entertainment experiences, gameplay or creativity products), the aesthetic should match accordingly. In both cases, though, it is the content that dictates the style. There should be no more and no less style than is required by the content and the audience. That is putting content before chrome.

So is Metro a noun or a verb?

Like Design, Metro is both. Metro design requires an investment among everyone involved in building the app, both developers and designers. And while we as designers should be drawn to the elegant simplicity the language affords, let us have no doubt about it – whatever we want to express, engineering will need it in tangible nouns. We all have to speak the same language.

So when you need a crash course in a language, there are two initial steps that are critical. The first is building up a vocabulary of nouns. The second is memorizing a few key phrases that get you up and running as fast as possible. We are in exactly the same position with Metro right now.

The templates and code samples that are available today in the preview version of Visual Studio 11 are exactly that: well executed phrases and nouns for some of the most common scenarios. Start there. Start with the nouns. Memorize those phrases. But it’s not about memory; it is about breaking these simple, entry level phrases down apart and studying them, practicing them again and again until you start to understand how the grammar works.

Even if you are a designer, start with the nouns and phrases. Especially if you are a designer, start with the nouns. It will keep you honest. Because we are so accustomed to speaking skemorphism as our default language, the tendency to want to swap out words or thinking from our current tongue to complete the phrase in Metro may be too strong to resist. But fight this tendency if you want to learn it right. Otherwise, the results will just be a poor example of both.

Languages Evolve

Metro is the dominant language of the emerging Microsoft ecosystem. If this is where we are going to live and work, we should learn to speak it well. It is not defined by those templates, but those templates are the phrase book to get you up and running as a native speaker as quick as possible.

The danger, however, comes when we start believing that those few dozen phrases constitute the entirety of the language and the limits of its ability to be expressive, to inspire, to be visceral. Those nouns and phrases are needed to understand the syntax and are a required first step. But the goal of language is expression. As designers and developers, we need to start with the nouns to work our way up to the verbs and adjectives. Don’t take short cuts, invest in them early. But pushing onward, we move up the spectrum to achieve mastery of the core principles of this new language.

Metro has the power to be a highly efficient language that both enhances and enables the people who use it. But it should not be confined to a small lookup table of compliance. If this is how you think about Metro, you are thinking about it wrong.

What Metro needs are native speakers who have invested the time and energy to understand the beauty of this language and speak it with subtle elegance. Speakers who understand what it is trying to say about technology and its place within our broader world of humanity. Like learning a new language, it will be frustrating at first and may require patience and determination. But the rewards are worth it. Invest in learning the language right. Respect the rules of grammar. But once you’re fluent, make it sing.


@rickbarraza

My desk, home office and bedroom are usually swimming in books. Here are ten that I’ve been busy with recently and recommend:

Responsive Web Design
by Ethan Marcotte

A great little book from the gang at “A Book Apart”, this gets you up to speed quickly on the main ideas behind Responsive Design. Besides the immediate advantages of thinking in terms of mobile first and fluid layouts for websites across devices, I found it a great help in shifting my traditional thinking around apps to a more fluid layout for Metro design as well. I bought it as an ebook first, but ordered the hardcopy as well since I love the book design and want to support such efforts with cash. Thanks to @rainypixels for the recommend.

The Vignelli Canon
by Massimo Vignelli

Massimo Vignelli is one of the most important designers of the last half century, and continues to work down to today. Anyone touching Metro needs to reads this book. I stumbled upon the hard copy at Elliot Bay Books here in Seattle (a must go to haunt for all things [book+epic]), but it seems that Massimo Vignelli has also made a PDF copy freely available off his website. Thanks to @augustdlr for introducing me to Massimo Vignelli.

Imagine
by Jonah Lehrer

Picked up this book at work as part of Microsoft Research and their visiting speaker series. Enjoyed how he contrasts the right brain “Flash of Inspiration” aspects of creativity with the equally important “sense of knowing” drive that keeps one pushing forward when others would give up.

Javascript: The Good Parts
by Douglas Crockford

I know I’m a little bit late to the party on this one, but it has been coming in handy recently as I onramp my very out dated, very dusty web skills. Thanks to @allenjs for the recommend.

The Manual
multiple contributors

Here is a great book (periodical? Website articles via hardcover?) that I just love. Smart writing and great topics. Here is how they self describe and I whole heartedly agree: “Three beautiful, illustrated hardbound books a year, each holding six articles and six personal lessons that use the maturing of the discipline of web design as a starting point for deeper explorations of our work and who we are as designers.” Props to @justsomeguy for the recommend.

Just My Type
by Simon Garfield

If you are a graphic designer, new order “designerd”, or just love fonts, pick up this book. It is a wonderfully entertaining trip through the world of type design. The forward is by Chip Kidd for heaven’s sake! Great stuff.

Distrust That Particular Flavor
by William Gibson

While known primarily as a novelist and one of the founding fathers of cyberpunk, William Gibson has written extensively for magazines, newspapers and media outlets all over the world. This collection of essays spans his 30 year career and are a joy to read. Props again to Microsoft Research and their visiting speaker series that brings these great authors to the Microsoft Campus and give us a chance to meet and interact with the authors.

The Information
by James Gleick

James Gleick is known for writting Chaos and Genius but I’m really digging his new book, The Information: A History, A Theory, A Flood. I haven’t finished it yet, but even just the opening chapter on the data implications of African talking drums alone makes the book worth it.

The Fractal Geometry of Nature
by Benoit B. Mandelbrot

Sometimes you need to hear it straight from the horse’s mouth, and here is Benoit Mandelbrot talking about his own baby, fractal geometry. Picked it up from the Microsoft library, so if you’re a blue badge, you can borrow it once I’m done, natch.

Blank. A Book on Printing
Artpower International Publishing

If you find yourself in Seattle and you love books, go to Elliot Bay Books. But after you’ve gone there, if you love design books of all flavors and Japanese stationary, check out the awesome collection at Kinokuniya Book Store at Uwajimaya Village in the International District. I love this place. Picked up this book on my last visit and has great, glossy pics of modernist and minimalist print design. Great for a serious dose of “Metro style” inspiration for your next Windows 8 project.

That’s it for this month. You reading anything amazing? Let me know in the comments!

@rickbarraza

source: PageFlip.js


A few years back I wrote a tutorial called “The Secret Behind the Page Flip Technique” for Silverlight Developers while working as Creative Director at the experience agency, cynergy.  That blog post isn’t available anymore, and I haven’t touched Silverlight in a while, but even now, I still get several requests for the solution.

As I’ve been on-ramping my skills with HTML5, I decided to kill two birds with one stone and solve from scratch the advanced Page Flip Technique with Canvas. While underlying math is very similar, drawing, rotation and clipping are very different between Canvas in HTML5 and Silverlight, so I had to work out quite a few new tricks, highlighted below.

Handling Touch and Constraints

source: study1.js

The page flip above and all the interactive math illustrations work with the mouse, but also work with touch events from an iPhone or iPad and with the msPointer events for Internet Explorer 10 and the Windows 8 Consumer Preview. In order to get this to work, I found some great articles online, most notably Handling Multi-Touch and mouse input in all browsers from the IEBlog. I pulled out what I needed for the platforms I was targeting and wrapped the main functions in a file called PointerFusion.js, which you will find in the code behind. You call PointerFusion.js by passing in a DIV that will house your Canvas element, along with the down, move and up functions you want linked to it like so:


var targets;
if (document.querySelectorAll)
{
targets = document.querySelectorAll(".DivStudy1");
if ( targets.length > 0 ) {
PointerFusion(targets[0], onMouseDown, onMouseMove, onMouseUp);
} else {
return;
}
}


If you look at study1.js, you’ll see that the init() function kicks everything off, and after sending the DIV target to PointerFusion to enable mouse/pointer/touch interactions, sets up the Canvas elements and wires up a resize listener to call SetSizes() so the DIV and Canvas elements can support a responsive layout ( like this blog ) and will continue to work on a smaller iPhone / Windows Phone 7 screen up to an iPad / Microsoft Tablet or full Windows 8 / IE10 browser.

The “math” part of the page flip is very straightforward for this first step, and is all handled in the function renderMath(). Mainly, we setup a point that represents the mouse (or touch, or pointer, etc.) shown above as [M] and a generic follow point [F] that provides some graceful easing. Our red node represents the corner of the page [C] and will always try and align itself to [F]. However, since we are mapping a physical page flip, the corner of the page [C] needs to have two constraints. You can’t turn the page ‘upward’ more than the page width allows without tearing the page, so from Spine Bottom [SB] to the Edge Bottom [EB], we create the first radius constraint [R1]. A physical page being turned also can’t be turned ‘downward’ more than the page diagonal without ripping, so by taking the diagonal from the Spine Top [ST] to [EB], we create the second radius constraint [R2].

So as we finish step1.js, we have a Canvas that dynamically resizes itself to it’s DIV container for a responsive layout, a DIV that is wired for mouse, touch and pointers and renders acceptably in iPhone, iPad, Windows Phone 7, touch optimized Windows 8 experiences, and the common mouse. Dragging your finger moves the corner [C], but only within the constraints defined by [R1] and [R2]. Not a bad start, there is is still a lot more.

Calculating the Critical Triangle

source: study2.js

In order for the page flip technique to work, we need to calculate a critical triangle that gives us the angle of the page being flipped, as well as the angle of the clipping mask. This triangle is formed by finding the bisector [T0] of the corner [C] and the edge bottom [EB]. Once we have [T0], we shoot out a line perpendicular to the bisector toward the page bottom [T1]. You then close up the triangle with [T2].

Here is what the math looks like:


bisector.x = corner.x + .5*(edgeBottom.x - corner.x);
bisector.y = corner.y + .5*(edgeBottom.y - corner.y);
bisectorAngle = Math.atan2(edgeBottom.y - bisector.y, edgeBottom.x - bisector.x);
bisectorTangent = bisector.x - Math.tan(bisectorAngle) * (edgeBottom.y - bisector.y);
if ( bisectorTangent < 0 ) bisectorTangent = 0;
tangentBottom.x = bisectorTangent;
tangentBottom.y = edgeBottom.y;
bisectorBottom.x = bisector.x;
bisectorBottom.y = tangentBottom.y;


The Page and the Clipping Region

source: study3.js

Once we have the critical triangle, we have the angles required to calculate the position and rotation of both the Page sheet and what will become our Clipping Region. If you look at the code for Study3.js, you'll see that the work is done in a function called drawSheets(). The two angles we care about are the pageAngle and the clipAngle. They are calculated like so:


var clipAngle = Math.atan2(tangentBottom.y - bisector.y, tangentBottom.x - bisector.x);
if ( clipAngle < 0 ) clipAngle += Math.PI;
clipAngle -= Math.PI/2;


Placing and rotating the Page canvas (shown in red) is relatively straight forward. The place it at [C] and rotate it by the calculated pageAngle. The code looks like this:


clipctx.save();
clipctx.translate(corner.x, corner.y);
clipctx.rotate(pageAngle);
clipctx.drawImage(sheetctx.canvas,0,-pageHeight);
clipctx.restore();


Calculating the clipping region is a bit harder. We need to make sure the clipping region is fixed to [T1], but rotated by clipAngle. To do this, I wrote a helper function that takes in a point and an angle of rotation and returns that value rotated around [T1]. The function looks like this:


function rotateClipPoint(_p, angle) {
var result = new Point();
_p.x -= tangentBottom.x;
_p.y -= tangentBottom.y;
result.x = (_p.x * Math.cos(angle)) - (_p.y*Math.sin(angle));
result.y = Math.sin(angle)*_p.x + Math.cos(angle)*_p.y;
result.x += tangentBottom.x;
result.y += tangentBottom.y;
return result;
}


Once we have those clipping points, for Study3 we use them define a filled path that represents the clipping region we will use later (shown in blue). In the final step, we will use these calculated points to define an actual clipping path for a canvas that wraps the page canvas being rendered.

Implementing the Clip

source: study4.js

The biggest challenge in implementing the Page Flip technique in Canvas isn't the math, but figuring out the clipping. The problem I ran into was that drawing content from a canvas into another canvas first in retained mode and then applying a clip function wouldn't work. However, if I defined the clip first and then attempted to save() restore() on the drawing context to draw a rotated element, restore() call would also wipe out the clip! If you don't understand what that means, just play with it enough and trust me, you will. It was infuriating.

The way I was able to work around it was two fold. I needed to force a full drawing context reset by setting the width property on the parent canvas and rotate, nest, render and clip from scratch on every loop. There are three canvas and drawing context we are using in Study 4. SheetCTX is the canvas drawing context we are using for our page placeholder ( if you look at the final code for PageFlip.js you will see that SheetCTX is not only responsible for the page being flipped, but also the dynamic shadow of the page curl as well ). SheetCTX is rendered into the drawing context of the wrapper canvas that handles the clipping, called ClipCTX. Once the position and angle of the page is rendered into SheetCTX, ClipCTX uses the clipping points to define a Clipping path region and render SheetCTX into itself. At this point, we render SheetCTX into our main drawing context, CTX to interact with the rest of the elements on the screen. The full function looks like so:


function drawSheets()
{
var pageAngle = Math.atan2(tangentBottom.y - corner.y, tangentBottom.x - corner.x);
var clipAngle = Math.atan2(tangentBottom.y - bisector.y, tangentBottom.x - bisector.x);
if ( clipAngle < 0 ) clipAngle += Math.PI;
clipAngle -= Math.PI/2;
sheetCanvas.width = pageWidth;
sheetctx.fillStyle = "rgba(255,0,0,.3)";
sheetctx.fillRect(0,0,pageWidth, pageHeight);
// CALCULATE THE CLIPPING CORNERS
clipPoint0 = rotateClipPoint(new Point(tangentBottom.x, tangentBottom.y+50), clipAngle);
clipPoint1 = rotateClipPoint(new Point(tangentBottom.x-pageWidth, tangentBottom.y+50), clipAngle);
clipPoint2 = rotateClipPoint(new Point(tangentBottom.x-pageWidth, tangentBottom.y-550), clipAngle);
clipPoint3 = rotateClipPoint(new Point(tangentBottom.x, tangentBottom.y-550), clipAngle);
// RESET THE CLIPCANVAS AND CREATE CLIPPING REGION
clipCanvas.width = WIDTH;
clipctx.beginPath();
clipctx.moveTo(clipPoint0.x, clipPoint0.y);
clipctx.lineTo(clipPoint1.x, clipPoint1.y);
clipctx.lineTo(clipPoint2.x, clipPoint2.y);
clipctx.lineTo(clipPoint3.x, clipPoint3.y);
clipctx.closePath();
clipctx.clip();
// DRAW THE UPDATED PAGE BEING TURNED
clipctx.translate(corner.x, corner.y);
clipctx.rotate(pageAngle);
clipctx.drawImage(sheetctx.canvas,0,-pageHeight);
// DRAW THE CORNER
ctx.drawImage(clipctx.canvas,0,0);
}


Conclusion

The final PageFlip experience shown at the top of this post is built directly on top of Study4, but uses graphics for the Pages being flipped and some well placed (and calculated) shadow PNGs to help sell the illusion. Creating a professional level Page Flip experience in Canvas was a great learning experience for myself and hopefully the code and techniques above will help you ramp up your own skills. For sure there are optimizations that can be done and the technique shown only handles flipping "from the bottom", but the solution should be scalable to fit your needs.

There is a lot of potential with HTML5 and Canvas, even in the face of a more "responsive layout" web and multiple interaction metaphors across different devices. If you create something awesome with any of this, please put a link in the comments. I'd love to check it out!


@rickbarraza

The world changed. We entered what some call a Post-PC world. Other’s call it a PC Plus world – I think they are both true in different ways. But what became painfully evident to me is that the assumptions of unlimited power and unlimited CPU that fueled so many of my projects were no longer sustainable in this particular corner of the future. And that was the corner I was growing increasingly passionate about. By pushing Objective-C and OpenGL optimization in 2008 and their staunch refusal to support plug-in solutions, Apple had fired a resounding shot against managed code in a high experience, devices optimized future. A future where managed code, with all of its developer optimized benefits, was going to have a very real, very hard time competing at the premium experiences level. As I looked across the Microsoft stack at the time, nothing seemed capable of handling this impending shift in the technology landscape. My passions were changing. The world was changing. The face of experience design was changing. And at the time, it didn’t even look like Microsoft was noticing.

The BUILD Conference, September 2011

By September, most of my involvement with Microsoft had been reduced to the part of the future we still had in common – great experiences in the browser. I had the opportunity to build Jitterbugs for the IE9 launch and help push the boundaries of HTML5, but the Windows story had lost its charm and pull for me. As much as I wanted to believe, it didn’t look like Microsoft could be competitive. I started focusing on iPad and iPhone development. I had started unplugging from Redmond and wishing them well in our separate ways.

…then BUILD happened.

The BUILD conference came as a lightning strike. Microsoft came out razor smart, enterprise strong, and swinging for the fences. After the keynote Monday, I was confused. Tuesday I was suspicious. Wednesday I was dazed. But by Friday I was sold. That same Friday, I gave an interview with Dem Delimarsky (@DennisCode) that captured so well the new opportunities I was seeing. Everything was changing. All of a sudden, we were talking ARM based devices for calculations per watt sensitive experiences. We were talking GPU and DirectX 11 and the return of native code. Deep and smart conversations on cost per pixel calcuations. But most importantly, we were talking the key differentiator – an integrated ecosystem of experience and services that spans consumer and enterprise across scales of interaction. From sensors, phones and tablets to desktops and smart rooms to intelligent spaces and the internet of things, a grand unified reality was being born and Microsoft was playing to win. As Steve Ballmer had put it, “the platform is the operating system.” This is the fight I was waiting for. In that one week, I feel in love with Microsoft again.

So a few months later, when I got the call out of the blue that the Coding4Fun team at Microsoft was growing and they wanted to talk, I jumped at the chance. Dan, Clint and Brian have been friends and colleagues for a while, and the more we talked, the more we could see how awesome all of us teaming up our strengths Voltron style could be. A rag tag group of design technologists, hackers and hardware wizards bringing the Maker spirit to all things Microsoft. Painting interactive pictures of what is possible when you marry pixels, code and hardware in this emerging Microsoft ecosystem.

Moving Forward

Especially now, with so much changing, so much risk and so much reward, getting the chance to join a team where our primary mission is to entertain, educate and inspire is a dream come true. All those years ago, I took a chance on Microsoft and it has continued to pay off. It hasn’t always been easy, but I honestly believe there is no better time to invest your talent and energy into Microsoft then right now. I’m still passionate about educating and fostering the designer developer community, and now I’m getting paid to do exactly that. Lead by example and share what you know. I’m having a blast.

So if you’re a unicorn, a hybrid, a design technologist or any other combination of designer/developer wizard, you are desperately needed. You are needed all across the domain of technology, but I personally am betting on Microsoft, because of the huge amount of growth potential. It is all blue ocean opportunity right now on their stack, since everyone else is still fighting in red water territory. So jump in, the water’s fine! Wherever your passion is taking you – from open and responsive web experiences to rich and reach, consumer slash enterprise plays all the way to diving deep into native experiences, coding on the metal across devices at scale, it is full of potential win. Work hard, stay sharp, and keep nimble and together we can build the future one amazing experience at a time. If you’re looking for me, that’s where I’ll be. And I’d love to help you get there too.

So let’s get started. It’s going to be a wild ride!


@rickbarraza