The top scalable and modular approaches I covered in the previous article in my CSS Architectures series all have pieces of brilliance that can help you change the way you think about and structure your CSS. They also overlap in many areas, which indicates which aspects of the process of improving your CSS are truly critical. Although you could follow any single approach while constructing a new site to great success, the fact of the matter is that what most of us are doing is trying to make sense of existing CSS run amok.

So, while the approaches I described are great on their own, what we really need is a way to combine the superpowers from them all to combat the evil of crazy code – a sort of “Justice League” of scalable and modular techniques. Furthermore, just as Rome wasn’t built in a day, it’s a fool’s errand to try to correct in one fell swoop thousands of lines of code that lack rhyme or reason. Thus, it’s a good idea to pass over the code in focused waves through a phased approach.

Giving CSS Refactoring a Good Name

Last year, I had a project for a client where I was retained to do exactly that. After studying DRY CSS, OOCSS, SMACSS, and CSSG, I endeavored to distill them into their essential practices. In a moment of insight, I realized that all these approaches boiled down to the well-known adage “measure twice, cut once.” Of course! They all encourage looking at patterns, creating portable styles and modules that can be reused and not adding superfluous and redundant selectors or styles.

Additionally, my client had a lot of code and wanted to have flexibility in terms of the amount of changes that could be made to the CSS.  So, I developed a cohesive, phased plan of attack to reduce the number of lines in my client’s CSS. By the end, all of the practices and techniques for all four scalable CSS frameworks were incorporated, and the process I developed is very effective at reducing lines of CSS.

Once I created the process, I had to figure out what to name it. Taking “measure twice, cut once” as my base, I added CSS to it and this is what I got:

measure twice, cut once css → mtco css → meta coa css → MetaCoax!

So, in this article, I’ll share with you my MetaCoax CSS refactoring process, designed to “de-bloatify” thousands of lines of redundant CSS—improving the readability, simplicity and extensibility of the CSS while keeping the visible design and functionality of the site the same. (Check out the slides from my recent presentation on de-bloatifying CSS.)

To get yourself ready to refactor CSS, here are some suggestions. First, be conversant with specificity and the cascade – it will make a huge difference. I hope that in the first two articles in this series (Part 1, Part 2), I’ve driven home that making selectors and rules overly specific limits their reusability. When using descendent selectors especially, specificity can easily and quickly spiral out of control, and that’s precisely what we’re working to avoid. Second, remember inheritance rules: certain properties are inherited by child elements; thus, how these properties cascade down the DOM should always be kept in mind.

The MetaCoax Process

The MetaCoax process is a four-phased approach. Each phase builds on the previous one, and they all incorporate practices that decrease the amount of code, increase scalability and maintainability and, as an added bonus, lay the foundations for a future-friendly site. We’ll look at a detailed breakdown of each phase and the practices and techniques each encompasses. In this article, I’ll cover phases 1 and 2. Details about phases 3 and 4 will appear in the final article in the series.

Note: An excellent tool to use while you’re going through the MetaCoax refactoring process is Nicole Sullivan’s CSS Lint, which identifies additional places in the CSS to clean up and gives you ideas on how to do so.

Phase 1: Shorten Selectors and Leverage and Layer Rulesets

The first phase is focused on a minimum amount of work to improve a site’s CSS. These changes involve modifying the CSS but don’t touch the current HTML for a site’s pages. The goal is to make the stylesheet a little more lightweight and also easier to maintain and update with a small amount of time and effort. The method involves optimizing selectors while reducing redundancy with smarter reuse of rulesets. Even if you apply only the practices from this phase to your CSS, you’ll see an improvement in maintainability.

Here’s what we’re going to do:

• Shorten selectors chains
  • Kill qualifiers
  • Drop descendants
  • Make the selector chain three or less
• Leverage and layer declarations
  • Leverage the cascade by relying on inheritance
  • Review, revise and reduce !important properties
  • DRY (“don’t repeat yourself”) your rulesets

Shorten Selector Chains

To best optimize selectors, the goal is to use a shallow instead of a deep selector chain, making the chain as short as possible. This practice makes the code easier to work with, and the styles become more portable. Other advantages are reducing the chances of selector breakage, reducing location dependency, decreasing specificity and avoiding specificity wars by preventing overuse of !important declarations.

You have several ways in which you can shorten the selector chain, incorporating practices from all of the scalable architectures I outlined and further applying the “reduce, reuse, recycle” ethos. All of the practices are guaranteed to make the CSS code more forgiving. And isn’t that essentially the goal of updating our stylesheets?

Drop Descendent Selectors

The descendent selector (a b) is one of the most “expensive” combinatory selectors to use to target an element. Other expensive CSS selectors include the universal selector (*) and the child selector (a > b). What makes them expensive? They are very general, and thus force the browser to look through more page elements to make a match. The longer the selector chain and the more checks required, the longer the browser takes to render the styles on the screen. When matching a descendent selector, the browser must find every instance of the key selector (which is the one on the far right) on the page, and then go up the ancestor tree to make the match.

While this might not be a problem for a stylesheet of a few hundred lines, it becomes more of an issue when the size of a document nears 10,000 lines or more. Even more important, in adopting a future-friendly and mobile first approach, long selector chains create a situation where small, less capable devices are forced to load and process unnecessarily large CSS documents.

Overdependence on descendent selectors is a vestige of the days of coding for Internet Explorer 6, as Internet Explorer 6 did not render the other CSS 2.1 combinator selectors at all. Because Internet Explorer 6 usage is now almost nonexistent in the United States and other major markets, it’s completely safe to start employing selectors that are compatible with Internet Explorer 7 and Internet Explorer 8 and let go of the heavy use of descendent selectors once and for all. Table 1 shows the selectors you can use with Internet Explorer 7. All versions of Internet Explorer since then support all the selectors shown here.

Table 1. CSS 2.1 Selectors Safe for Internet Explorer 7.

Note: Check the charts at http://caniuse.com/ and http://www.findmebyip.com/litmus/ to determine the browser support of other CSS selectors.

Instead of the descendent selector, use the child selector. The child selector selects elements that are direct descendants of the parent element—that is, direct children in the first generation—as opposed to a grandchild or great-grandchild, which is what the descendent selector includes. Figure 1 illustrates this selection process.

Figure 1. A Descendent Selector vs. a Child Selector

Although the child selector is still an “expensive” selector, it is more specific. This means that the browser won’t search as far down the inheritance chain to match the key selector. Thus, such a selector targets the element you need much better.

If you must use a descendent selector, eliminate all superfluous elements in it. For example:

.widget li a

would become

.widget a

The style will be applied whether the li is there or not.

Kill Qualified Selectors

Qualifying both #IDs and .classes with elements causes the browser to slow unnecessarily to search for the additional elements on the page to make a match with the selector. It is never necessary to qualify an ID. An ID has one of the highest specificity weights in CSS because it is unique to whatever page it is on, and it will always have a direct match on its own. Qualified selectors also cause the specificity of the selectors to be ridiculously high, necessitating the use of even more specific selectors and the use of !important to trump these super-specific rulesets.

Selectors such as

div#widget-nav div#widget-nav-slider

can be simplified to

#widget-nav #widget-nav-slider

and further whittled down to

#widget-nav-slider

Each provides the same outcome.

Dropping an element class qualifier in selectors lessens the specificity of the selector, which better enables you to correctly use the cascade to override the style if necessary. For example,

li.chapter

would ideally be changed to

.chapter

Even better, because it is more specific to the case of the <li>, you could consider changing the class on your <li> tag, and scoping the CSS to

.li-chapter or .list-chapter

Make It Three or Less

When working on optimizing selectors, institute a “three or less” rule: a combinator selector should have no more than three steps to get to the key selector. For example, take this doozy of a selector:

div#blog-footer div#col2.column div.bestright p.besttitle {margin-bottom: 4px;}

To have three steps or less to get to the key selector, make a change like this:

#col2.column .besttitle {border: 1px solid #eee;}

Leverage and Layer Declarations

The next order of business is to focus on the style declarations themselves. When refactoring bloated CSS down to something more manageable, it’s easy to focus primarily on the selectors and believe that the styles will work themselves out. However, paying attention to what style declarations you’re creating (see Figure 2) and where they go makes a difference as well in moving toward sleek CSS.

Figure 2. Anatomy of a CSS Ruleset

Leverage Inheritance

Often, we think we know something really well when actually we don’t, and inheritance in CSS may just be one of those areas. You might remember that inheritance is a fundamental concept of CSS, but you might not remember exactly which properties naturally inherit and which do not. Table 2 shows the most commonly used properties that get inherited by descendent elements, unless the descendent elements are styled otherwise. (There are other more obscure properties that are inherited as well.)

Table 2. Common Elements Inherited by Descendent Elements

These properties are important to keep in mind when you’re looking for redundant styles to consolidate or eliminate. When you’re updating the stylesheet, properties that can be inherited should be placed in the CSS so that they are best utilized and not repeated. With proper placement of these properties, later redundant style declarations could be eliminated completely.

Review, Revise and Reduce !important Properties

If your CSS boasts an impressive number of !important declarations, then it’s time to reduce it. You should really use !important declarations only in certain instances. Chris Coyier of CSS Tricks recommends using them with utility classes or in user stylesheets. If you use them otherwise, you may end up being branded as selfish and lazy, and who wants that?!

How to cut down on !important? First, keep the specificity of selectors low by following the suggestions I made earlier.  Second, remember that, ideally, new styles should not undo previous rulesets but add to them.

Here’s what I mean: if you find yourself writing new styles to undo an earlier style (and then using !important to try to trump the style in the event of a specificity war), then you need to rethink the older style, distill it down to its necessities, and then create new styles that augment the original style instead of working to undo what’s already there. This is what I think of as “layering” style rulesets. This can also be referred to as “extending” (or “subclassing”) a style, which is part of creating modules in phase 2.

If you have a large number of !important properties for the same styles, I bet those properties could be turned into a portable style that could be applied to multiple elements, which I’ll also talk about when I describe phase 2.

DRY Your Rulesets

To cut down on large numbers of repeated styles in the CSS, a little DRY coding can help. While adopting the full DRY CSS approach may be a bit draconian, being aware of when you repeat the same ruleset and then getting your group on is a great practice.

Phase 2: Restructure, Adjust, and Modularize

The techniques in phase 2 are focused on doing a moderate to high level of work to improve a site’s CSS. The changes encompass altering both the CSS and the HTML of the pages, with the changes to the HTML most likely to involve renaming or reassigning class names. The goal is to give structure and organization to the stylesheet, through grouping styles by category rather than by pages, by removing archaic HTML, clearing the excess from the selectors and creating modules to increase code efficiency.

This phase will further eliminate redundancy, make the stylesheet more lightweight by improving selector accuracy and efficiency and also aid in maintenance. This level of improvement takes more time and effort than phase 1, but it includes the bulk of the work required to make your CSS better and is estimated to dramatically cut down the number of lines of CSS code.

Here is what we are going to do:

• Restructure to refactor
  • Categorize CSS rules in the stylesheet
  • Restructure styles that rely on qualifiers high in the DOM
  • Use class names as key selector
• Begin instituting modules
  • Extend module substyles with a double hyphen (–)
• Create portable helper styles
  • Surgical layout helpers
  • Typographical styles
• Adjust the HTML
  • Eliminate inline styles
  • Decrease use of <span> for better semantics

Restructure to Refactor

Let’s not forget that restructuring the CSS is our main objective. These practices start the process of moving away from thinking about and creating styles that are based on and specific to page components and page hierarchy, and moving toward thinking of styles in a portable, reusable and modular manner.

Categorize CSS Rules in the Stylesheet

In the first article in this series, I suggested creating a table of contents to make finding the sections of the styles in your CSS easier. In this phase of CSS refactoring, I recommend stepping up that process several notches by transforming these sections to the types of styles they describe, following the SMACSS categories. These categories are:

• Base The default styles, usually single element selectors that will cascade through the whole document.
• Layout The styles of the page sections.
• Module The reusable styles of the various modules of the site: callouts, sidebar sections, product, media, slideshows, lists, and so on.
• State The styles that describe how a module or layout looks in a particular state.
• Theme The styles that describe how modules or layouts might look.

So now, your table of contents and document sections will look like this:

/* Table of Contents
- Base
- Layout
- Module
- State
- Theme
*/
…
(later in the document…)
/* =Layout */ (etc.)

This reorganization of the stylesheet helps lay the foundation for the rest of the phase 2 practices and is a part of phase 3 as well.

Restructure Styles That Rely on Qualifiers High in the DOM

This recommendation is one of most important in this whole article: to completely eliminate page specific styles—that is, styles that are based on adding a class to the body element to signify a different page. A style such as this forces the browser to check all the way up the DOM chain to the <body> tag.   Here’s an example:

body.donations.events div#footer-columns div#col1 div.staff span.slug {
display: block;
margin: 3px 0 0 0;
}

This practice is the root of long selector chains, super-high specificity of selectors and the need to use !important to override styles higher up the cascade, as in the following example:

body.video div#lowercontent div.children.videoitem.hover a.title { background: #bc5b29; 
color: #fff !important; 
text-decoration: none; 
}

In other words, it’s bad. Mmkaay?

To fix it, you need to follow all of the previous suggestions, such as three or less, kill the qualifiers and reduce specificity. What you could end up with is something more like this:

.donations-slug {
display: block;
margin: 3px 0 0 0;
}

Use Class Names as Key Selector

Because IDs are highly specific, you should avoid using them whenever possible, as they cannot be reused as classes can. However, in creating classes you want to keep your class names semantic yet portable. The goal is to make a selector as direct as possible. By doing this, you avoid specificity problems and can then even combine styles to layer them as suggested earlier.

From SMACSS, you should instill the practice that when you create selectors, the key selector should be a .class instead of a tag name or an #id.  Always keep in mind that the far-right key selector is the most important one. If a selector can be as specific to the element in question as possible, then you’ve hit the jackpot. This way, the styles are targeted more directly because the browser matches only the exact elements.

Review all places where child selectors are used, and replace them with specific classes when possible. This also avoids having the key selector in the child combinator as an element, which is also discouraged.

For example, instead of doing this:

#toc > LI > A

it’s better to create a class, as shown next, and then add it to the appropriate elements.

.toc-anchor

Begin Instituting Modules

Nothing epitomizes the “measure twice, cut once” adage in the scalable CSS approaches as well as modules, which are the heart and soul of all of them. Modules are components of code that can be abstracted from the design patterns—for example, frequent instances of lists of items with images that float either to the left or right or underneath; these can be abstracted into a module with a base set of styles that every module would share. Then the module can be extended (or skinned) with changes in text, background, font color, borders, floats, and so on, but the structure remains the same.

The best thing about modules is that they are portable, meaning that they are not location dependent. Abstracting a design pattern into a code module means that you can put in anywhere in any page and it will show up the same way, without you having to reinvent the wheel style-wise. Now that’s what CSS was made for, right?! In addition to my earlier suggestions, modularizing your CSS is one of the best ways to dramatically decrease the amount of code.

OOCSS provides a great way to think about how to structure and skin a module and also about what can be made into a module. SMACSS provides clear guidelines on how to name modules and extend them.

Extend Substyles with  –

Although SMACSS gives great guidance for thinking about extending modules, I prefer the technique from CSS for Grownups of extending substyles with –. This makes a lot of sense to me because it is a visual indication that the new style is based on the previous one but is taking it further.

Here’s an example:

#go, #pmgo{
    width: 29px;
    height: 29px;
    margin: 4px 0 0 4px;
    padding: 0;
    border: 0;
    font-size: 0;
    display: block;
    line-height: 0;
    text-indent: -9999px !important;
    background: transparent url("/images/go.jpg") 0 0 no-repeat;
    cursor: pointer; /* hand-shaped cursor */
    x-cursor: hand; /* for IE 5.x */
}
#pmgo{
    margin: 2px 0 0 3px;
    background: transparent url("/images/go.jpg") no-repeat center top;
}

This code could be modified and changed into something more like this:

.button-search{
    width: 29px;
    height: 29px;
    margin: 4px 0 0 4px;
    padding: 0;
    border: 0;
    font-size: 0;
    display: block;
    line-height: 0;
    text-indent: -9999px !important;
    background: transparent url("/images/go.jpg") 0 0 no-repeat;
    cursor: pointer; /* hand-shaped cursor */
    x-cursor: hand; /* for IE 5.x */
}
.button-search--pm{
margin: 2px 0 0 3px;
background: transparent url("/images/go.jpg") no-repeat center top;
}

Create Portable Helper Styles

Along with the process of modularization, portable styles are another handy tool to have in your arsenal. Here are some examples from CSS for Grownups.

Surgical Layout Helpers

By CSS for Grownups’ standards, there’s no shame in having a little extra layout help. While a grid takes care of a lot of issues, these styles may give elements a little nudge when needed (especially in terms of vertical spacing), while eliminating lines of code.

.margin-top {margin-top: 5px;}
.margin-bottom {margin-bottom: .5em;}

Although in most cases we strive to keep names semantic when creating classes, in this instance descriptive names are fine.

Typographical Styles

Typographical styles are perfect if you find that much of your CSS is devoted to changing the font face, size and/or line height. Both OOCSS and CSS for Grownups suggest dedicated typographical styles that are not tied to the element, such as the following:

.h-slug {font-size: .8em;}
.h-title {font-size: 1.5em;}
.h-author {font-size: 1em;}

A great exercise is to search for the properties font, font-size, font-face, and h1 through h6 and marvel at the sheer magnitude of the instances of these properties. Once you’ve had a good laugh, figure out which styles apply to what, which sizes are important, and then start making some portable typographical styles.

Adjust the HTML

While the practices in phases 1 and 2 that we’ve covered so far offer miracles in terms of CSS cleanup, we can’t forget about the page markup. Most likely, as suggested by Andy Hume in CSS for Grownups, you’ll need to make changes to the HTML beyond adding new class names.

Decrease Use of <span> for Better Semantics

Do you have a rampant use of the <span> tag where a more semantic tag would be much more appropriate? Remember, the <span> tag is really for inline elements, not block-level elements, as stated by the W3C (http://www.w3.org/TR/html401/struct/global.html#h-7.5.4), so using <span> for headers and other elements intended to be block-level is technically incorrect.

Here, for example, the spans should really be paragraphs or header tags that indicate where this content fits in the document’s hierarchy. Either of those other elements could have provided a base for the class hooks.

<li>
<a href="/learning/hillman" title="">
<img src="/images/brenda-hillman.jpg" alt="Air in the Epic" />
</a>
<span>Brenda Hillman Essays</span>
<span><a href="/learning/hillman" title="Air in the Epic" class="title">Air in the Epic</a></span>
<span>Brenda Hillman</span>
</li>

The following version of this code would be an improvement from a semantics standpoint:

<li>
<a href="/learning/hillman" title="">
<img src="/images/brenda-hillman.jpg" alt="Air in the Epic" />
</a>
<p>Brenda Hillman Essays </p>
<h3><a href="/learning/hillman" title="Air in the Epic" class="title">Air in the Epic</a></h3>
<p>Brenda Hillman</p>
</li>

Eliminate Inline Styles

Finally, you need to get rid of inline styles. In this day and age, inline styles should rarely if ever be used. They are much too closely tied to the HTML and are akin to the days of yore when <font> tags were running rampant. If you use inline styles to override specificity, then making the changes suggested in this article should already help you avoid specificity wars, effectively eliminating the need for inline styles.

For example, this inline style:

<span class="text-indent: 1em">Skittles are tasty</span>

could easily be turned into its own class that can be applied throughout the document, like so:

.indent {text-indent: 1em:}

Your mission, should you choose to accept it, is to find all the instances of inline styles and see where you can make those styles portable helpers. The property you’re using could easily be made into a portable style that can be reused on the other instances of text.

Try It, It Will Be Good for You!

At the Øredev Web development conference in Malmö, Sweden, I had the pleasure of seeing the brilliant Katrina Owen present “Therapeutic Refactoring.” She suggested that when faced with a deadline, she turns to refactoring horrible code to help her gain a sense of control and rightness in the world.

You can approach restructuring your CSS for the better the same way. By healing what ails your CSS, you can gain a sense of calm and power, while beginning to make the world of your site’s stylesheets a better place, one line of code at a time.

Stick with me, though, because we aren’t quite finished. We have two more phases to cover in the MetaCoax process that will fully oust the evil from your CSS once and for all, and will also enable you to leave a legacy of goodness behind for all of the front-end devs that come after you.

Links for Further Reading

• CSS Lint Pages
• Breaking Good Habits – Harry Roberts’ talk at Front Trends Conference 2012
• Big CSS – Another great Harry Roberts presentation

—–

As the online industry matures, so do approaches to dealing with code for large Web sites. Cleaner CSS is a great starting point, but front-end developers can elevate a site’s stylesheet to another level by applying methodologies that are part of increasingly popular scalable CSS architectures.

By using an approach in its entirety or by applying selected tenets and practices from them all, you can say good-bye to problems that typically plague the CSS for large sites, such as verbose and difficult to read code that’s painful to maintain and update and the redundancy that creates code bloat.

Diagnosing the Origins of Bloated CSS

If you recognize any of the following symptoms or ailments, making your stylesheet modular and more scalable is just what the doctor ordered. To get a proper handle on just how bad things are, search for certain properties and see what the numbers tell you. In Nicole Sullivan’s presentation, the Top 5 Mistakes of Massive CSS, she provides a rubric to diagnose the roots of an overabundance of several key properties:

• A large number of floats means there is an ineffective or nonexistent grid.
• A large number of margins means you need a reset.css (or normalize.css).
• A large number of padding means that the design parameters aren’t explicit and thus multiple developers have tweaked details a lot.
• A large number of font-size means that the cascade is not being leveraged. Headings are probably hidden within the rule sets with font-size as well.
• A large number of !important means that this property is being used to override specificity and, again, that the cascade is not being leveraged.

Any of this sound familiar? It’s okay, you’re in good hands, because now that you’ve diagnosed the origins of your CSS bloat, we can talk about some sure-fire cures.

Scalable and Modular Approaches: The Essentials

The main concepts of the different scalable approaches can be boiled down to two core practices:

1. Reduce, Reuse and Recycle

Reducing means writing the shortest chain of elements possible in selectors, and dropping element qualifiers, much of which I discussed in the previous article. Equally important is creating appropriate selectors by favoring classes over IDs, avoiding the use of elements, and using combinator selectors that more directly target the element you need on the page.

Reusing involves creating generic classes instead of overly specific ones, and combining classes to create different visual outcomes.

Recycling involves better leveraging the cascade to cut down on redundant style declarations, modularizing page components to use throughout the site with minimum code and extending modules through subclassing.

2. Organize, Structure and Inform

Providing good, well-organized information is critical for clarity and understanding. The practices listed in the first article, like providing developer information in the stylesheet and creating a structure in terms of the document itself (by categorizing styles in the document), play a part in the scalable approaches. However, developers can add even more structure by breaking the style categories into multiple documents, indicating structure and meaning through a naming convention for reusable classes and establishing page structure with grids. Web site style guides are the final component for making sure the team is well informed about styles, structure and nomenclature.

An Overview of Scalable and Modular Approaches

Now that I’ve introduced the key concepts, let’s take a look at specific practices that support these concepts through an overview of the best-known and most popular approaches to dealing with large CSS projects. The approaches I’ll cover are DRY (Don’t Repeat Yourself) CSS, Object-Oriented CSS (OOCSS), Scalable and Modular Architecture for CSS (SMACSS), and CSS for Grownups.

DRY CSS

The ease of learning and applying CSS is mitigated by the language’s lack of logic. Unlike programming languages that have reusable components like variables and functions, CSS almost encourages flagrant reuse of selectors and property-value pairs. Indeed, even when redundant and bloated, CSS is perfectly functional.

DRY CSS is based on taking the “don’t repeat yourself” principle of software development very literally. That’s right: when coding CSS, the goal is never to repeat a property-value pair. Ever. I know it seems rather…ah, intense, but it can be done.

Get Your Group On (So to Speak)

The core of DRY CSS is grouping, which at its roots entails structure, organizing, reducing and recycling. Jeremy Clarke, who devised DRY CSS, suggests creating groups of selectors with shared properties, rather than repeating property-value pairs for each selector separately, as is typical when writing CSS. While a group may have many selectors, each property-value pair is defined only once.

The groups actually define shared properties. With DRY CSS, you have to relinquish the deeply ingrained habit of naming classes and IDs based on semantics, like .alert-box for example. Instead, groups use descriptive names based on their appearance or on their role in the design—like .rounded-corners—but then all selectors that share that property should be grouped with that style. While doing this takes away the possibility of mixing and matching, it does lessen the amount of your code.

How do you create a group? Start by naming the group based on its role in the design. Then use the name of the group as an ID at the top of the list and a class at the bottom. Then add the rest of the selectors that share properties above the descriptive class name that they share. Jeremy gives the example shown in Figure 1 in his presentation “DRY CSS: A don’t-repeat-yourself methodology for creating efficient, unified and Scalable stylesheets.”

Figure 1.Example of DRY CSS groupings

What about selectors that don’t immediately seem to be part of a group? Another goal in “drying out” your CSS is to make individual selectors as rare and sparse as possible, employing them only as exceptions. This means you need to perform a mental exercise when you’re coding. As you create a style declaration for a selector, always ask “Why isn’t this part of a group?”—and then figure out how to make it part of a group if you can.

Once you create groups, you need to think about organizing them. Clarke recommends using colors, text, shapes, structures and modules as categories, but he also encourages developers to create whatever categories they feel are best for a project.

Benefits

In his presentation on DRY CSS, Clarke lists many benefits to the approach. Here are some that I feel are most compelling:

• Decreases the size of CSS files. Clearly, this is the prime objective, and by using DRY CSS you more than achieve it.
• Optimises elements and generalizes selectors. The occurrence of this increases as you see their interrelatedness and how they can be inherited.
• Edits to a group affect all its members, which encourages consistency. You can see the members of a group change at the same time, which is a great advantage over making changes to a lot of individual selectors.
• The HTML remains untouched. This is useful for sites with generated HTML that can’t easily be controlled, such as content management systems or blogging tools.
• Encourages thinking through design elements/styles and design patterns and the consistency thereof. This promotes good design practices and uniform updates.

Clarke also asserts that DRY CSS integrates with other scalable architectures, such as OOCSS and SMACSS.

Successes

Clarke had great success applying his approach to the Global Voices site, which also had to support localization into multiple languages. According to Clarke, in developing and applying DRY CSS, the site’s stylesheet went from roughly 4,500 lines to 2,400 lines. That’s an improvement that most front-end developers would welcome.

OOCSS

Object-Oriented CSS starts with pattern recognition: determining what page elements are similarly structured and used frequently on the site. Once a pattern is identified, the design element can be made into a module. Then the module can be skinned for the different ways it shows up across the site.

OOCSS has two key principles. The first is to separate structure and presentation (or structure from “skin”), which means decoupling the structure of an element from its looks, and treating the looks like “skins.” This principle shouldn’t be too difficult to implement, as it’s similar to one of the foundational tenets of Web standards: the separation of presentation and content.

The second principle is to separate the container and the content, which means to use styles that are specific to an element and don’t depend on location. All too often, the common way to create CSS selectors is to attach an ID or a class to an element high in the DOM (like <body>), and then to create long-chain selectors to create variations on elements. This practice is responsible for most heinous CSS transgressions that lead to unwieldy and difficult to maintain stylesheets. Instead, in OOCSS, a container is modified by extending it, which effectively alters the container based on the content. In other words, you add an additional CSS class to provide for the differences in appearance only.

Sullivan breaks down the OOCSS approach into the following steps:

1. Determine the reusable elements sitewide, such as headings, lists (action list, external link list, product list, or feature list), module headers and footers, grids, buttons, rounded-corner boxes, tabs, carousels, toggle blocks.
2. Delineate between:
   • Container and content
   • Structure and skin
   • Contour and background
   • Objects and mixins
3. Mix and match container and content objects to achieve high-performance design.
4. For visual differences, skin the modules. Skins/themes are the module’s presentation—how it looks. The goal is to have very predictable skins, changing only values that can be easily calculated or measured.

Modules: The Building Blocks of a Site

Much of the practice of OOCSS is built on reusable components. Sullivan likens these components to Legos and refers to them as modules. The goal for a module is that it relies neither on the DOM tree nor on specific element types. It should be flexible enough to adapt to different containers and be skinned easily.

Identifying, creating and employing a module is a very DRY aspect of OOCSS. By finding common elements and presentations and abstracting them into reusable code modules, front-end developers don’t repeat themselves and really do practice reducing, reusing and recycling.

An excellent example of a module that can take care of images with text in various forms and incarnations is Sullivan’s .media module. The .media module was developed to handle instances of images floating off to the side of text and related permutations. She gives this example of various forms that the media module can take.

Here is the HTML that forms the structure of the media module:

        <!-- media -->
	<div class="media">
	  <img class="fixedMedia" src="myimg.jpg" />
	 
	  <div class="text">
	...
	  </div>
	</div>

The CSS of the initial module establishes the basis of the style, and any differences come from extending the styles and thus the appearance of the elements.

         /* ====== media ====== */
	.media {margin:10px;}
	.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
	.media .img {float:left; margin-right: 10px;}
	.media .img img{display:block;}
	.media .imgExt{float:right; margin-left: 10px;}

The media module is just the tip of the iceberg. Many more modules, including buttons, grids, carousels, and content, are on the OOCSS project on GitHub.

Benefits

Adopting OOCSS, or at least elements of the system, saves many lines of code. Furthermore, it provides an approach that is easily sandboxed and can be used by everyone on the team.

Successes

One of the biggest and most famous sites that Sullivan has applied OOCSS to is Facebook. According to the numbers given in her presentation CSS Bloat, she and the Facebook team cut CSS bytes per page by 19 percent and HTML bytes per page by 44 percent. Just with headers alone, they reduced the number from 958 to 25, and reduced the site’s response time by half.

SMACSS

SMACSS (https://smacss.com/) is another approach to writing scalable and modular CSS for large-scale sites. According to Jonathan Snook, its creator, “SMACSS is about identifying patterns in your design and codifying them.” Sure, I’m biased, but we could take “codifying” patterns as simply another way of describing the core tenants (reduce, reuse, and recycle; organize and structure), could we not?

Snook has several practices for applying organization and structure to large CSS projects. The core of SMACSS is the categorization of CSS rules. Categories help design patterns become more obvious, thus enabling developers to make better definitions for and of these patterns.

The categories that Snook suggests are:

• Base—These are defaults styles, usually for single element selectors.
• Layout—Divides the page into sections, usually holding modules together.
• Module—Reusable, modular parts of the design: callouts, sidebar sections, product lists, and so on.
• State—Describes how the module or layout looks in a particular state, also in different page views.
• Theme—Describes how modules or layouts might look.

In small projects, these can all be in the same file. In larger projects, multiple files are recommended.

However, there is a trick with the categories, and it involves thinking about what the styles actually do and what part of the site, design and functionality they apply to. This forces developers to ask during the building process “How are we going to code things, and why are we going to code them this way?” Thus, implicit in the categories are guidelines on how the styles are used, which further helps to prevent mixing styles across categories.

What’s in a Name?

The next important part of SMACSS is naming style rules. Clear class names are one of the key ways for knowing the category that a style rule is part of and what it does in the grand scheme of the page.

To indicate the differences between layout, module and state styles, Snook suggests appending prefixes to the class names. For layout, for example, you would add l- or layout-, creating a class name like .l-aside or .layout-aside. To indicate classes that create a state change, use .is-state, such as .is-active or .is-collapsed.

When creating names for modules, which include navigation bars, carousels, dialogs, widgets, tables, icons and so on, use the name of the module itself. For instance, an example module would be called, appropriately, .example (note that it is a class and not an ID). A callout module would be called .callout. If you need to add a state to a module, you know what to do: add .is-state, so, a collapsed callout module would be .callout.is-collapsed.

What about extending (or subclassing) a class? Easy. Instead of using a module’s class name as part of a combinator selector (and thus creating specificity issues), create a new class name based on the original class. For example .pod is extended by creating .pod-callout, and then you apply both styles to the element. With the new style, both styles have the same specificity, and thus the new style rules can play well with the first one.

Focus on Good, Clean Code, and Don’t Worry About “Classitis”

Clearly, one of the objectives of SMACSS (much like OOCSS) is to create shallow instead of deep selectors with the fewest generations of elements, striving for the shallowest selector possible. If you follow the recommendations in the first article in this series, you’re well on your way. But a little reminder never hurts, so to help limit the number of elements in a selector, follow these rules:

• Avoid tag selectors for common elements unless they are completely predictable. Using a class is preferable, even if you think the element is going to stay predictable. This includes qualifying classes with elements.
• Use class names as the right-most (key) selector.
• Use child selectors (e > f) instead of descendent selectors (e f).

Another goal of creating shallow selectors is to eliminate issues with selector specificity. One of the primary ways to ensure that you won’t have any specificity wars within your CSS is to avoid IDs for selectors. Don’t dismiss IDs completely, however. In SMACSS, it’s okay to use them for layout sections and for JavaScript hooks.

Some of us have had the old-school best practice “Don’t use too many classes!” deeply ingrained into our front-end development psyche. However, when it comes to SMACSS (and most of the scalable CSS approaches), you’re better off adding classes to the elements in question and repeating the class in the HTML than you are creating and applying a bevy of overly specific styles, which is the true cause of classitis. You’ll find that using multiple well-named classes clarifies intent and increases the semantics of the elements in question.

Benefits

The benefit of SMACSS is the clarity that comes from being conscious about your coding from the very start. Categories help slash redundancy, and naming conventions greatly aid efficiency in quickly identifying style rules in the CSS.

Successes

Snook developed SMACSS from his experiences working on enormous Web projects, one of the most notable being the redesign of Yahoo mail. He has had great success applying his principles with large sites built by large teams.

CSS for Grown Ups

Andy Hume, the creator of CSS for Grown Ups, jokingly refers to his system as “CSS for grumpy old people.” (You can watch a video here.) Like many of the creators of scalable approaches, Hume is concerned that our industry has become married to archaic, so-called best practices (most, ironically, created by developers who worked alone). He thinks that front-end developers have trudged unwittingly down a path that creates CSS that is feared and despised in most projects. This front-end code adheres to Web standards at ridiculous lengths to keep content and session separate, but it pays no mind to managing style and project complexity.

It’s clear that we need to optimize code for change. With CSS for Grown Ups, the goal is to style modules, not pages, and to go a step further by having a style module library that you can reuse.

Layers, Like an Onion. Or Cakes (or Parfaits)*

Much like the use of categories in SMACSS, CSS for Grown Ups describes styles being in “layers.” A style’s layer is related to:

• Document—From HTML code, element selectors.
• Base styles—Applies to element selectors, typographical styles, colors.
• Module styles—Lists, navigation, promo box, and so on.
• Layout styles—Establishes the grid or columns and page layout.

When creating selectors, be aware of whether they are document, base or module selectors, and make an effort to keep them all at the modular level. How will you know? If there is a tag as part of the selector, it will be a document style. However, if you create a class for it, you release it from the tag and make it a module style.

The goal is to try to avoid styles that are document-, base- or layout-related, and to shoot for ones that are module-related instead. Why? Let’s look at an example:

         .promo-box h2 { ... }

This selector is a module-level selector (.promo-box) combined with a document level selector (h2). This is all well and good at the outset, but what if somewhere down the line the structure of the HTML changes?

Instead, we should be shooting for the document and the module to be less tightly coupled so that the selector can be scaled in the future. This example does just that:

         .promo-box-h { ... }

In this instance, the style is not tied to a document’s element, and is thus far more flexible and portable, as it can be applied to anything, even elements that haven’t yet been invented in HTML.

Free Your Selector Name, and the Rest Will Follow

It should not surprise you that CSS for Grownups epitomizes the tenets of organize, structure and inform. According to Hume, styling with clear, informative class names is “like an API into your document—an API lets you style your document in the most simple and efficient manner.” Class names should be descriptive and should have meaning within the context of the site you’re working on. They should make sense to the members of the team working on the site so that you know which shared terms to reuse.

Like the other approaches, CSS for Grownups advocates creating and using modules. And like OOCSS and SMACSS approaches, the names of the modules should be descriptive and semantic and not tied to location or appearance:

         .promo-box { ... }

CSS for Grownups has a methodology for extending or substyling a module. Just use the module’s name, append it with two dashes (–), and add a clear, informative name for the extension, like so:

         .promo-box--light { ... }

The two dashes indicate that the style is an extension of the first and also that it is dependent on the first. Thus, it must come after the first style in the source order of the CSS in order to overwrite one or more style rules in the original.

Use Helpers. Be a Sharer

To handle presentation issues, Hume recommends using “surgical layout helpers,” which are standalone classes that provide either padding or margin. Here’s an example:

         .margin-top {margin-top: 1em;}

This would be the style you could add to whatever element needed it on the page, instead of wrapping that style into a component. Then these classes can be used on a case-by-case basis when a module needs to be spaced vertically on a page. Use these helper styles in your base stylesheet so that they can be used easily throughout the project.

Finally, writing online style guides is strongly recommended as a way to codify the naming and structure established and to disseminate this information to the team, making it available for those who will work on, add to and alter the site in the future. The style guide and corresponding module library needs be in code so that team members don’t have to reinvent the wheel to implement repeated visual styles.

Benefits

As Hume stated in his presentation at SXSW 2012, “Nobody is really smart enough to style web pages.” And because of this, he argues that we need certain constraints and parameters such as those supplied by CSS for Grownups. Constraints are good—they are a way to manage complexity. Hume developed CSS for Grownups as a way to manage complexity of CSS over large sites, over time and amongst teams of developers. Furthermore, CSS for Grownups creates what Hume calls a “design-meets-development touchpoint,” where the design language of an organization is turned into code, and clear collaboration from both teams results in a higher-quality product.

Successes

CSS for Grownups has roots in the vast amount of work that Hume did while he was at Clearleft, which has had many large clients, such as Channel 4, Amnesty International, and Mozilla. Now that he is at the Guardian, he has successfully applied his system to create a framework for the front-end developers there.

Progress, Not Perfection

In his presentation Breaking Good Habits, Harry Roberts accurately states that “CSS is such a mess that even when you clean it up, it’s still a mess.” Our goal is to make our CSS better, not perfect. So look at each of these approaches with an open mind. Remember, the point is not to drive yourself crazy trying to get your CSS to fit perfectly within some methodology. Even if you adopt only some of the techniques, you still gain the benefits of fewer lines of code that will scale.

The scalable and modular approaches all have pieces of genius and brilliance to them, and are particularly great when you are starting to code a project from scratch. But what do you do when you have to deal with a mountain of existing CSS, whose sheer immensity strikes fear in your heart? The next article will share a process to coax order and sanity into the wildest of CSS beasts, so stay tuned!

Links for Further Reading

• Structuring CSS – State of Play in 2012
• CSS Strategy Square-off
• CSS Architecture
• CSS ID Selectors: Never Say Never

HTML5 introduced a few semantic elements that are not supported in older browsers. Some of these new elements are no different than generic block elements so they don’t pose any compatibility problems. All you need to ensure compatibility is to add a CSS rule to your website that causes the relevant elements to behave like block elements.

But Internet Explorer versions 8 and under pose a challenge. Any element not in the official roster of elements cannot be styled with CSS. That means we cannot make then behave like block elements or give them any formatting.

For example, the following code will not work.

<style>
section {display: block}
</style>
<section>This is on its own line.</section>
<section>This should appear on a separate line.</section>

But that’s not all. These new elements behave as if they don’t exist. For example, the following CSS won’t work, since the section element won’t match the universal selector.

<style>
body * span {color: red}
</style>
<body>
  <section>
    <span>This should be red, but won't be red in IE 8.</span>
  </section>
</body>

Fortunately for us, a workaround exists that allows Internet Explorer (IE) to recognize these new elements allowing them to be styled, and thus giving us full use of these new semantic tags. It’s a tool called HTML5Shiv.

As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context.

But how did we go from IE not even acknowledging the existence of this element, to now being able to use it?

The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works and you don’t even need to use the node returned by that function.

But you need to make sure to call it early on in your website before any of those elements are used, otherwise it won’t work.

You will need to call it for each and every new HTML5 elements like so:

"abbr article aside audio bdi canvas data datalist details figcaption figure "+
  "footer header hgroup main mark meter nav output progress section " +
  "summary template time video"
  .replace(/\w+/g, function(a){ document.createElement(a) });

Notice we’re using the replace method of the string object to succinctly iterate over each contiguous length of characters matched by the regular expression and executing the callback function for each character block which in turn calls createElement.

Here on in, we’ll call this method, “shivving the document”, so that the document can render the new HTML5 elements.

Now our previous two HTML examples work. But that’s not all there is to it.

Pitfall 1: HTML5 and innerHTML

If HTML is being generated using innerHTML and it is called on a node not currently attached to a document (AKA an orphaned node), then it’s deja vu all over again. The following two examples will not render the section element, even though it’s run on a document already shivved.

var n1 = document.getElementById("n1");
n1.parentNode.removeChild(n1);
n1.innerHTML = "<section>Sect 1<\/section>";  //won't work

var n2 = document.createElement("div");
n2.innerHTML = "<section>Sect 2<\/section>";  //won't work

In the second example above, if we append the node to the document first before calling innerHTML, then it will work:

var n2 = document.createElement("div");
document.body.appendChild(n2);
n2.innerHTML = "<section>Sect 2<\/section>";  //works

We can conclude that although we shivved the document earlier on, orphaned elements do not benefit from the shiv when calling innerHTML.

What can we do? For starters, whenever we need to set innerHTML we should append it to the document first. An alternative is to first shiv the document property of the orphan before working with the orphan.

First let’s put our shiv in its own function.

function iehtml5shiv(doc) {
  "abbr article aside audio bdi canvas data datalist details " +
    "figcaption figure footer header hgroup main mark meter nav " +
    "output progress section summary template time video"
    .replace(/\w+/g, function(a){ doc.createElement(a) });
}

The next time we have an orphan element, we can do this:

var n1 = document.createElement("div");
iehtml5shiv(n1.document);
n1.innerHTML = "<section>Sect 1<\/section>";  //works

Notice how it’s just like shivving the document, but on the document property of the element. And notice we’re accessing document instead of ownerDocument. Both are different things as shown here:

alert(n1.document == document);  //false
alert(n1.ownerDocument == document);  //true

Now we have two methods to make sure our call to innerHTML works when handling HTML5 elements.

Pitfall 2: cloneNode

It appears our cousin cloneNode is also susceptible to losing its shiv. Any HTML5 elements which are cloned, or have had their parents cloned, will lose their identity.

Notice how the below element has colons in its nodeName, meaning it’s being confused for an element from another namespace.

var n2 = n1.cloneNode(true);
alert(n2.innerHTML);  //outputs: <:section>Sect 1</:section>

This happens even if the node was already attached to the document.

There isn’t much we can do here except roll out your own implementation of cloneNode, which is trivial enough.

Pitfall 3: Printing

Whenever you print a webpage, IE appears to generate a new document before printing which means all the shiv workarounds are not preserved.

There isn’t much you can do to mitigate this. The HTML5Shiv tool works around this by listening for the onbeforeprint event and replacing all the HTML5 elements on the page with normal elements and then doing the reverse on the onafterprint event.

Thankfully, the HTML5Shiv tool does that nicely for us.

References

• The HTML5Shiv tool: https://github.com/aFarkas/html5shiv
• The story of the HTML5 Shiv: http://paulirish.com/2011/the-history-of-the-html5-shiv/

You have just written a new feature for your awesome application that searches through your database to find ‘x’ and you run some tests to check that the returned result is correct.

Unfortunately, your test fails because it returns more results than expected. At first this is not obvious because it’s been a while since you worked on the application, but eventually you realise that every search should be automatically filtered out by a boolean field.

You may have run into a similar situation where you or someone has forgotten to filter by a value in field x and it’s now potentially showing incorrect data, thereby damaging business. Fortunately, there are some tests in place to catch this.

Let’s work through an example. You have a user table and, with good reason, you are utilizing a boolean field to represent what the state of the user is, perhaps to determine if it is disabled. You could copy data from a “live table” to a “disabled table” but you feel the complexity and overhead to implement this is too high, because of other user related tables.

With the above scenario in mind, I think MySQL Views can improve on this solution. Views are quite simple things. They present a table based on the defined SELECT query. We can create a view that will only return users that are enabled in the system and which will prevent future features from including disabled users.

I’ll explain how to create this view and how to use it in your application. Something to note is MySQL views are only available from version 5.

Here is the basic user table the view will be based on:

CREATE  TABLE `users` (
`user_id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
`first_name` VARCHAR(100) NULL ,
`last_name` VARCHAR(100) NULL ,
`username` VARCHAR(100) NULL ,
`dob` DATETIME NULL ,
`disabled` BIT NULL DEFAULT 0 ,
PRIMARY KEY (`user_id`) );

Below is the query that will create a MySQL view for the above user table.

CREATE OR REPLACE ALGORITHM = MERGE VIEW `v_users_enabled`
(`firstName`, `lastName`, `username`, `dob`)
AS
SELECT `first_name`, `last_name`, `username`, `dob`
FROM `users`
WHERE `disabled` = 1;

How does it work?

Here is a breakdown of the keywords used to create a view.

CREATE OR REPLACE

This creates a new view and is required. Optionally you can add OR REPLACE if you want to make certain it is created but if you know the view exists already you can use ALTER to make changes to an existing view.

ALGORITHM = MERGE

This is an optional statement and by not defining one or explicitly stating ALGORITHM = UNDEFINED, MySQL will choose between two options that best fit the SELECT statement, i.e. MERGE or TEMPTABLE. MySQL will try to choose MERGE over TEMPTABLE where possible because it is more efficient. I will discuss more about the algorithm after going through these core points.

VIEW

Is a required statement and is used to give a name to the view. Crucially a view cannot have the same name as a table because they share the same name space.

The column list part is optional and by default the column names in the SELECT statement are used. If you choose to define column names they are comma separated, must be unique and match the number of columns in the SELECT.

AS

Is required and where you define the SELECT query.

Querying a view is the same as when querying a table. Here’s a simple example:

SELECT * FROM v_users_enabled

More about the algorithm

When defining the algorithm, you have three options to choose from: MERGE, TEMPTABLE or UNDEFINED.

We now know that UNDEFINED lets MySQL choose the appropriate option, but what do the other two options mean?

MERGE is the fastest out of the two options. The view column list replaces what is in the SELECT statement, essentially merging faster than TEMPTABLE as that generates a new temporary table that is queried upon and which has no indexes. MySQL will warn you if you try to use MERGE when a TEMPTABLE should be used and will change it to TEMPTABLE.

When will the TEMPTABLE option be used? If you use any aggregation function, DISTINCT, LIMIT, GROUP BY, HAVING, sub query or literal values (i.e. no table).

Minor performance trade off

Unfortunately, MySQL views will hinder performance rather than improve it. It is important to think about your views and to use MERGE where possible to minimise performance reduction.

Provided your performance budgets can take the hit to better manage complexity and create a useful separation this, in my view, is a worthy trade off because you are taking a query with certain where clauses that may need to be applied to other queries. This is nicely contained within a view and database level users can query against this returning them the correct results, without them having to remember they need these additional where clauses.

The downside of this containment is that it would be possible to write a complex query within the view which is now hidden. Queries with more where clauses on this view will make the overall query a monster and potentially inefficient. A judgement call will need to be made on how complex the view SELECT query can be without compromising performance.

To better optimize for performance when using a view, use the MERGE algorithm and when creating your index add the fields in your WHERE clauses that exist in the view first. It is important they are put in the correct order, as usual when creating indexes for expected queries. You can use EXPLAIN to check your query and make sure its behaving as you expect.

Benefits and Negatives

The benefits of using a view:

• Provide a useful data separation from application by containing the need to remember specific fields the query needs to filter by for all SELECT statements within the database.
• Tables can change over time and you need to add some new fields that you intend to filter by for most SELECT queries. All that needs to change is the SELECT statement with the new fields after altering the tables. Then updating the application will be easier as you may only need to remember to change it in a few places.
• They can make your SELECT queries more readable.

The negatives of using a view:

• When the TEMPTABLE algorithm is used no index is used.
• They could hide a complex query and with querying the view could turn it into a sluggish query.
• Using the MERGE algorithm limits your view SELECT statement to basic querying only.
• You may choose the MERGE algorithm but if MySQL thinks it should use TEMPTABLE then it will change it.
• If your view does not have a one-to-one relationship with the table then it is not updatable.
• When you do add or change a table you will still need to update the CUD statements in your application.
• You cannot associate a trigger with a view.

Noteworthy quirks

If you want to use ORDER BY in your view SELECT statement it is worth noting that this cannot be overridden when you query the view using a different order.

If you decide to put a LIMIT in your view and then use another LIMIT when you query the view it is undefined which LIMIT applies.

If you are interested in making a view updatable see MySQLwebsite.

Conclusion

MySQL views are a useful tool and provide a good solution in particular scenarios. It is clear that views have their limits and it is important to be aware of them. Used in the right way your next app can benefit from flexible containment and control over how the data is accessed.

I’d like to share with you a mysterious internal secret kept within Microsoft for a long time. It’s the real story behind the concept of the CSS Grid Layout imagined by Microsoft for IE10 and Windows Store Apps.

Most of you probably think that this specification was designed to give developers a better layout engine for their websites and applications. But the original motivation was completely different. The very first aim was to be able to create a Tetris-like game in an easy way!

I’m sure you’re not convinced yet. That’s why I’m going to prove it to you using Blend 5 as a companion. Ok, let’s go!

Pre-requisites: to follow this tutorial, you need first to:

1. Download/buy & install Windows 8 RTM on your machine: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx
2. Download & install the free edition of Visual Studio 2012 Express RTM for Windows 8: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx that includes Expression Blend 5 for Visual Studio or use the higher versions.

Step 1: discover the secret behind the CSS Grid Layout thanks to Blend 5

Launch Expression Blend 5 and create a new HTML (Windows Store) project of type Blank App. Name it “TheRealCSSGridStory”:

Replace:

<p>Content goes here</p>

With:

<div class="mainGrid">
</div>

Let’s create a grid containing 10 columns and 20 lines, whatever the screen’s resolution, by using fraction units. For that, add this CSS rule:

.mainGrid {
    display: -ms-grid;
    width: 100%;
    height: 100%;
    -ms-grid-columns: (1fr)[10];
    -ms-grid-rows: (1fr)[20];
}

Select in the Live DOM the <div> mainGrid element and you should obtain this:

Let’s draw a shape inside this beautiful grid. Add this block of HTML inside the main grid:

<div class="shape1">
</div>

And insert this CSS associated with it:

.shape1 {
    -ms-grid-column: 4;
    -ms-grid-row: 3;
    -ms-grid-column-span: 3;
    -ms-grid-row-span: 2;
    background-color: red;
}

You should now see that in Blend 5:

Cool, but nothing yet looks like to a Tetris gaming piece. Let’s work on that. Add these two DIVs inside the shape1:

<div class="line1shape1"></div>
<div class="line2shape1"></div>

and replace the previous .shape1 rule with this block of CSS:

.shape1 {
    -ms-grid-column: 4;
    -ms-grid-row: 3;
    -ms-grid-column-span: 3;
    -ms-grid-row-span: 2;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
}
.line1shape1 {
    -ms-grid-column-span: 2;
    background-color: red;
}
.line2shape1 {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-column-span: 2;
    background-color: red;
}

The shape1 is currently spanning on three columns and two rows. I’ll then create a new grid inside this area defined by three columns and two rows in order to have cells having exactly the same size as the cells of the main grid, whatever the resolution might be.

Once done, I’ll create two lines in order to mimic the Z shape of the Tetris game. You should now have this result:

Even better, play with the various views available in the Device tab and you’ll see that our game is already implementing a responsive design! This is freaking cool, isn’t it?

Here, for instance, is the outputs for the snapped view and the portrait view:

Let’s now resolve another problem.

The Tetris grid gaming grid is composed of squares. Our current responsive design is stretching 100% width. Building a Windows 8 application for the Windows Store will most of the time meet widescreen monitors (current tablets are 1366×768 or 1920×1080 and most desktop PC have a 16/9 ratio). Let’s then assume that targeting a widescreen ratio is addressing almost all cases. To compute the proper responsive width, you need to do: 9/16 * 10/20 (the ratio of the main gaming grid) which equals to: 28.125%.

Add this rule to target the main grid in full screen landscape mode:

@media screen and (-ms-view-state: fullscreen-landscape) {
    .mainGrid {
        width: 28.125%;
        }
}

Let’s now center the gaming grid by using… the CSS Grid Layout again! (And you should now start to believe it was truly designed for Tetris!)

Switch the body element to –ms-grid made of one column and one row:

body {
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 100%;
    height: 100%;
}

Now simply add this attribute to the CSS associated to the the main grid:

-ms-grid-column-align: center;

And the grid is now centered:

At this stage, you’re probably already shocked. “How could I have missed this incredible secret?” you’re wondering to yourself.

Take a breath.

Now that you know THE secret, let’s continue this tutorial together to discover other awesome possibilities delivered by the CSS specifications combined together.

Step 2: moving or rotating a shape

My first idea was to try avoiding JS by using as much CSS as possible. I then first tried to use CSS3 Animations to move and animate the shape on the various rows/columns. But the bad news is that you can’t change the –ms-grid-column or –ms-grid-row values via CSS3 animations. This will then be the job of some JavaScript code.

I then started to think about how I will rotate the shape. CSS Transforms seemed to be perfectly adapted for that. Let’s check that by doing some experiments. Blend 5 is really cool for that as you can directly see live the outcome of your changes.

Add a rotation of 90 degrees on shape1 by adding this class to its DIV element:

.shape1rotated {
    transform: rotate(90deg);
}

I’m sure you weren’t expecting this:

Problem: it’s not properly aligned to the gaming grid. To align our shape to the grid, we need some small adjustments:

.shape1rotated {
    transform-origin: 33% 50%;
    transform: rotate(90deg) translateX(-33%);
}

And we now have the same rotation as a Tetris-like game. Here are two screenshots before/after the rotation:

We can even go further than that by using a transition set on shape1 via this:

transition: all 1s ease-out;

And now, removing/adding the .shape1rotated class on the shape1 DIV will trigger a smooth rotation animation.

Check out the result inside Blend 5 thanks to this short video:

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

At this stage, we could think that this approach is the good one to build our game. But this is unfortunately not yet the case. Here’s why. Try moving the shape by simply changing its –ms-grid-column property. Blend 5 will reflect the changes directly. When not rotated, the shape can be moved up to the 8th column:

So far so good. But when you’re rotating it by adding the .shape1rotated class to the DIV:

You see that there is still 1 row available on the right for the shape’s move. If you think we simply need to move it to the 9th row, you’re wrong! Indeed, here is what we’ll obtain on the 9th row:

You probably forgot that we’re currently moving a DIV element displaying a grid layout of three columns and two rows matching exactly the underlying gaming grid. When moving it, we really have the feeling that this is a block part of the main grid we’re moving. But for this trick to work, we need at least three columns available to contain our shape element. If it’s contained in two columns (when set to the 9th column) or less, it will be “compressed”, as in the screenshot.

There are two ways to resolve that.

1 – Stop using CSS Transforms and draw the rotated shape using another grid definition. For instance, using three divs inside the shape instead of two. But using such an approach will prevent us having the nice CSS Animations in place.
2 – Redefined the main grid to work on 12 columns instead of 10 and we’ll use only the columns from 2 to 11 (a sort of clipping area if you wish). This will resolve our “overflow” problem.

Let’s implement the second solution.

Redefine the main grid using this:

.mainGrid {
    display: -ms-grid;
    -ms-grid-columns: (1fr)[12];
    -ms-grid-rows: (1fr)[20];
    -ms-grid-column-align: center;
    width: 100%;
    height: 100%;
}

To also have the proper ratio, you need to update the associated media query:

@media screen and (-ms-view-state: fullscreen-landscape) {
    .mainGrid {
        width: 33.75%;
        }
}

33.75% = 9/16 *12/20

Let’s also add a “virtual grid” to delimitate the space where we will be able to move the shapes.  Inside the main grid DIV, insert this one:

<div class="virtualGrid">
</div>

Associated with this block of CSS:

.virtualGrid {
    -ms-grid-column: 2;
    -ms-grid-column-span: 10;
    -ms-grid-row-span: 20;
    border-right-style: dashed;
    border-left-style: dashed;
    background-color: #505A5A;
}

It will help to delimit the gaming area with a grey background and some dashed border lines.

Now, if I’m moving the Z shape on column 9, row 2, here is the result:

If I’m rotating it with CSS Transforms, I can move it correctly on column 10:

Bonus – handling the Portrait mode:

If you’d like to support the portrait mode (which is even better for the Tetris grid game), add this CSS Media Query definition:

@media screen and (-ms-view-state: fullscreen-portrait) {
        .mainGrid {
        width: 106.66%;
        }
}

As the ratio need to be computed as = 16/9 * 12/20 = 106,66%.

Step 3: adding some code to handle part of the game logic

Now that we’ve solved the graphics part of the game using only some pure CSS & HTML code, we need the help of JavaScript to move/rotate the shape in the gaming area. We’re going to re-implement the CSS logic via a JS object that’s going to be defined thanks to WinJS.Class.

Open the “TheRealCSSGridStory” in Visual Studio 2012.

Create a TetrisShapeZ.js file in the JS directory and copy/paste this code:

(function () {
    "use strict";
    var ShapeZ = WinJS.Class.define(
    /// Constructor - columnIndex is optional. If provided, defines the column the shape starts in
        function (columnIndex) {
            // We're creating the equivalent of this HTML block :
            // <div class="shape1 ">
            //     <div class="line1shape1"></div>
            //     <div class="line2shape1"></div>
            // </div>
            this._shape1 = document.createElement("div");
            var line1 = document.createElement("div");
            var line2 = document.createElement("div");
            this._shape1.className = "shape1";
            line1.className = "line1shape1";
            line2.className = "line2shape1";
            this._shape1.appendChild(line1);
            this._shape1.appendChild(line2);
            // Boolean to indicate if the shape is in its default orientation mode or not
            // True means not rotated, false means rotated
            this._defaultOrientation = true;
            // Setting the column position in the main grid
            if (columnIndex) {
                this._currentColPos = columnIndex;
                this._shape1.style.msGridColumn = this._currentColPos;
            }
            else {
                this._currentColPos = 1;
            }
            // We always start at line 1
            this._currentLinePos = 1;
            // Boolean to know if the shape can be move/rotate or not
            // If true, this means we've reached the last line possible
            this._fixed = false;
        },
        {
            /// Specify in which HTML element displayed in CSS Grid you'd like to work with
            /// width is the number of columns of the grid & height is the number of lines
            insertIntoGrid: function (element, width, height) {
                element.appendChild(this._shape1);
                this._gridWidth = width;
                this._gridHeight = height;
                // These are the left & bottom max limit for this shape
                // when displayed in default orientation mode
                this._maxLeft = width - 3;
                this._maxBottom = height - 1;
            },
            /// Rotate the Z shape 90 degrees anti/clockwise using CSS Transforms
            /// by simply removing/adding the shape1rotated class
            rotate: function () {
                if (!this._fixed && this._defaultOrientation) {
                    // rotating 90 degrees clockwise, it will trigger also the CSS Transition
                    WinJS.Utilities.addClass(this._shape1, "shape1rotated");
                    this._defaultOrientation = false;
                    // the left limit is now +1 vs the default orientation
                    this._maxLeft = this._gridWidth - 2;
                }
                else {
                    if (!this._fixed && this._currentColPos < this._maxLeft) {
                        // removing the shape1rotated will automatically reset the shape
                        // to its initial matrix and again the CSS Transition will do the
                        // animation for you
                        WinJS.Utilities.removeClass(this._shape1, "shape1rotated");
                        this._defaultOrientation = true;
                        this._maxLeft = this._gridWidth - 3;
                    }
                }
            },
            // Internal function called by public moveLeft/moveRight
            _moveHorizontally: function (direction) {
                if (!this._fixed && (this._currentColPos < this._maxLeft || direction === -1) &&
                (this._currentColPos > 2 || direction === 1)) {
                    this._currentColPos = this._currentColPos + direction;
                    this._shape1.style.msGridColumn = this._currentColPos;
                }
            },
            /// Move the shape on the immediate left column
            /// Test if you've reached the left limit or not
            moveLeft: function () {
                this._moveHorizontally(-1);
            },
            /// Move the shape on the immediate right column
            /// Test if you've reached the right limit or not
            moveRight: function () {
                this._moveHorizontally(1);
            },
            /// Move the shape down on the immediate below line
            /// Test if you've reached the bottom limit or not
            moveDown: function () {
                if (!this._fixed) {
                    this._currentLinePos = this._currentLinePos + 1;
                    this._shape1.style.msGridRow = this._currentLinePos;
                    if (this._currentLinePos === this._maxBottom) {
                        this._fixed = true;
                    }
                }
            }
        }
    );
    WinJS.Namespace.define("CSSTetris", { ShapeZ: ShapeZ });
} ());

Simply read the code to understand what it’s doing. It should be commented enough to be self-explicit.

Add a reference to this script file in default.html and keep only this block of HTML inside the body:

<div class="mainGrid">
    <div class="virtualGrid">
    </div>
</div>

Jump into default.js.

The cool part of having well-documented code is that we now have interesting IntelliSense details like for the constructor:

or the rotate function:

To properly use this code, add this block of JS just after processAll call:

document.addEventListener("keydown", OnKeyDown, false);
mainGrid = document.getElementsByClassName("mainGrid")[0];
myShape = new CSSTetris.ShapeZ(4);
myShape.insertIntoGrid(mainGrid, 12, 20);
init();

And add these two functions:

function init() {
    setInterval(function () {
        myShape.moveDown();
    }, 1000);
}
function OnKeyDown(event) {
    switch (event.keyCode) {
        case KEYCODE_X:
            myShape.rotate();
            break;
        case KEYCODE_LEFT:
            myShape.moveLeft();
            break;
        case KEYCODE_RIGHT:
            myShape.moveRight();
            break;
        case KEYCODE_DOWN:
            myShape.moveDown();
            break;
    }
}

And we’re done! We now have a very basic game using CSS Grid Layout coupled with CSS Transforms & Animations for the graphics part and a couple of JS lines of code to have the beginning of the basics of a Tetris-like game.

Here is a short video demonstrating the final result:

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

You can download the final Visual Studio solution corresponding to the three steps of this tutorial here: http://david.blob.core.windows.net/win8/TheRealCSSGridStory.zip

So, are you now convinced that CSS Grid Layout was made to simplify the creation of Tetris-like games?

Last Thursday I broke with tradition slightly and ran a Talk with the Experts session in the evening (down under), making it a bit more time-zone friendly for our UK audience. It also meant that I was able to swap my usual coffee for a wine, which probably made the session run a bit more smoothly. The subject was PHP and our expert was Lorna Mitchell, tutor of Object-oriented PHP and co-author of PHP Master: Write Cutting-edge Code.

Here is a list of useful resources that came out of the session:

What is PHP? http://en.wikipedia.org/wiki/PHP

A great beginners course on PHP https://learnable.com/courses/php-mysql-web-development-for-beginners-13

Paul’s PHP client for Beanstalkd https://github.com/pda/pheanstalk

Why use frameworks? http://www.phpandstuff.com/articles/top-10-reasons-why-you-should-use-a-php-framework

Unit testing framework http://www.phpunit.de/

Using composition rather than inheritance http://en.wikipedia.org/wiki/Composition_over_inheritance

Static site generators:
http://middlemanapp.com/
http://www.phrozn.info/en/
http://sculpin.io/

An excellent SSH client http://www.chiark.greenend.org.uk/~sgtatham/putty/

Find transcripts of past sessions here http://www.sitepoint.com/forums/showthread.php?873280-Transcripts-From-Past-Sessions

Sign up for email notifications of future sessions here https://www.facebook.com/sitepoint/app_115462065200508

And on the subject of future sessions, next up we have Talk Getting Started in the Industry with the Experts, with SitePoint devs Jude Aakjaer & Ben ‘The Axe’ Axnick. That will be taking place on Wed 1 May at 2pm PDT or you can find out what time it will be at your place here.

If you missed last Thursday’s session but are keen to know what went down, you can read the entire transcript here:

HAWK	Ok, well since Lorna is here, we may as well kick off. The format here is basically a free for all – if anyone has a question then throw it out there now. I’ll monitor the questions and make sure that they all get answered.
mycritte…	can we start w frameworks?
SEO2013	Can we start with – What is PHP? :)
HAWK	Sure thing @mycritter – did you have a specific question relating to frameworks? Here you go @SEO2013 http://en.wikipedia.org/wiki/PHP BTW, I’ll be posting a full transcript of this session up on sitepoint.com tomorrow, along with resources
mycritte…	well, what is the real world benefit of using a fw and which are really right for solid dev?
SEO2013	Thanks for the link. How long on average does it take to learn PHP?
LornaJan…	@mycritter that’s a great starting question!
Jerry	@SEO what prog languages are you familiar with now?
SEO2013	None unfortunately which I’m sure isn’t the answer you wanted :/ I’d really like to learn though.
LornaJan…	Frameworks give you structure, and they also give you a quick start on the things that are the same in every project, they usually have routing, logging, templating … that sort of thing. So they save some of the repetitive work for you
HAWK	I’d also like to plug Lorna’s latest contribution to the Learnable/SitePoint network, which is her course on Object-oriented PHP https://learnable.com/courses/object-oriented-php-2734
mycritte…	@seo2013 you just gotta get the book
LornaJan…	Frameworks also give a common way to do things, so they make it easier to bring in a new developer to the team and that that person pick up the project much more quickly
HAWK	@SEO2013 This is a great beginners course https://learnable.com/courses/php-mysql-web-development-for-beginners-13
LornaJan…	@mycritter I’d say that the benefit is mostly to developers and to speed and quality of development – much more than how much difference it makes to the end product. Frameworks are about getting things done.
mycritte…	@lornaJane, do you use an out of the box framework or a platform like a cms for your web dev?
HAWK	Welcome to anyone that has just joined us. We’re LornaJane is our expert today and we’re currently talking the benefits of using frameworks.
LornaJan…	As for which frameworks are solid – they all have their strengths. For example ZF2 and Symfony2 are totally comprehensive, but they can be pretty heavy if you’re only building something simple. There are lightweight frameworks, where you will need to do some of the work yourself such as Silex or Slim. And then there are frameworks that are more aimed at friendliness than performance – that might be something like CakePHP
LornaJan…	@mycritter I’m a consultant so I work with whatever my client has. My personal projects have been a mix, some ZF, some Slim, depending what I was building. Hope that helps give you some ideas!
TheCliff	Quick question about frameworks?
LornaJan…	@TheCliff go for it
TheCliff	I am curious does heavy frameworks put more load on my server? for rendering and things?
TheCliff	speed of the code being rendered and so on.
MikeH	Lorna, do you have to spend a lot of time with each project learning its environment before being productive, or is there a small enough pool of common frameworks that you generally have it covered?
LornaJan…	@TheCliff yes, it certainly can do. The frameworks can do lots of work in the background to make for easy, rapid development. For a very performant application, a full-stack framework probably isn’t the right tool. For 95% of sites, it’s absolutely fine
ridinQwe…	Php & Mysql “Novice to Ninja” is a pretty good starting point @SEO2013
TheCliff	Awesome answer thanks!
Paul.Ann…	@TheCliff: generally the extra load is negligible, and if you have enough traffic for it to be a problem, you can afford to scale the site across multiple servers. The benefit of writing less/easier code faster with a framework outweigh the execution (in)efficiency.
Jerry	Impressions of Twitter Bootstrap compared to other frameworks? That’s the only one I’ve used, mainly because it was the first I found and was pretty easy to pick up
LornaJan…	@MikeH Many of the frameworks have good documentation and lots of shared ideas. For example many of them are MVC, they have routing, the templating tools are alike even if not exactly the same … and I’m very good at debugging after lots of practice! So I usually dive in and learn that way.
HAWK	I should introduce Paul.Annesley. Paul is a senior dev with the SitePoint group.
Paul.Ann…	An important aspect of using a framework is the security is can provide; default escaping of variables in HTML output, sanitizing user input, handling common gotchas, quoting/escaping database queries to mitigate SQL injection etc.
LornaJan…	@theCliff: That’s a good point from @Paul.Annesley – mostly, the developer’s time will be MUCH more expensive than your hosting costs. So it’s a net win to use the framework and get your product shipped
Paul.Ann…	The flipside of that, is that you inherit any security vulnerabilities present in the framework you use, which happens in all frameworks from time to time.
LornaJan…	@Jerry The twitter bootstrap is more of a frontend framework, this discussion is more about the server-side frameworks which are written in PHP. The learning curve is different for the various frameworks, but as I said, many of them have excellent docs
MikeH	Paul—as a senior dev do you become more specialized or broader in the languages you use server side?
BrandonK…	@Paul.Annesley On that note, for someone who is relatively new to PHP, would you say the benefits of having pre-built security outweigh those of potentially missing certain aspects in our own code?
Jerry	Do you know of any good comparisons of pros/cons for various frameworks?
mycritte…	@lornaJane, on basics, do you have good recommendations for securing our code for beginners. ways to stay ahead of hackers.
Paul.Ann…	@MikeH: Both :) I learned a lot about PHP language and tools. I did so by taking on side projects like creating the PHP client for beanstalkd:https://github.com/pda/pheanstalk … I also learn other languages when I have time, and mainly write Ruby these days.
LornaJan…	@mycritter: The built in functionality of frameworks can really help with security, as they will include database escaping and filtering input values and things
Paul.Ann…	@BrandonKasteler: I certainly pick the benefits of a framework over trying to do it all myself… the latter results in attempting to build your own framework, and you end up with no time to build what you’re setting out to build.
LornaJan…	@mycritter: my top tip though is to use the Filter extension in PHP for the incoming variables. Make that a requirement and it will reward you :)
TheCliff	Would you recommend PHP coders to get into Frameworks — MVC style of programming? I have been coding in PHP for 5 years now. Part of the reason I haven’t gone into Frameworks is because over the past couple of years I’ve put together a great “functions” file that has tons of stuff for me to use during coding to speed things up. I would need to find out if a framework has what my functions do in order for me to consider using it. I am really not sure what a framework really does to speed up writing code. For the most part I just need basic Mysql_query’s, while loops, and basic math. Would a framework really help that much trying to speed up basic php commands?
LornaJan…	@Jerry: framework comparisons are pretty difficult, they are all aimed at doing different jobs so it’s comparing apples to oranges in many cases. I don’t know of any good benchmarks
LornaJan…	@TheCliff: I’d say that for a really basic site, it probably doesn’t matter. Once you start building things that are a bit more dynamic, they will really make your life easier – particularly once you get past the learning curve
HAWK	To anyone that has just joined, welcome. We’re currently talking frameworks, but if you have a question on any aspect of PHP (or OOP PHP) please throw it out there at any stage
Paul.Ann…	I have a general point I’d like to add: PHP started as pretty much a way of embedding bits of code into HTML; making it a templating language. And using it like that is not a bad way to start learning it. But to build a serious website, one needs to learn to separate the templates from the logic of the website. Frameworks make that much easier to do (they provide models, controllers etc, which are pure PHP and don’t contain HTML).
TheCliff	Can you give me a quick example of one way that frameworks save time? Like a type of command or something that it would help with.
BrandonK…	@LornaJane Bookmarked the various frameworks you’ve mentioned to look at later. Thank you kindly for that information.
TheCliff	or a site that would show me why using frameworks save time and how.
MikeH	Lorna—do you work mostly with larger custom apps, or still on (WordPress|Concrete|Magento|LemonStand|Joomla) based sites?
HAWK	@TheCliff http://www.phpandstuff.com/articles/top-10-reasons-why-you-should-use-a-php-framework
LornaJan…	@TheCliff the simplest example is things like building forms, you define a form and the framework does client side validation, server side validation, handles the failures, displays the form itself, and gives you back valid data when it’s done. Saves a lot of repeat code for every form on every project – and you never forget to validate one field
mycritte…	@lornaJane, most of my clients want a cms. there are great options out there. recommendations on going w them vs building proprietary?
LornaJan…	@Cliff: also things like there are database libraries already setup, and logging libraries @BrandonKasteler that’s my pleasure, good luck with those
TheCliff	@lornaJane that could be very useful. I’m looking at that page now @hAWK
mycritte…	@mikeH, just saw your q. great minds think alike ;-)
LornaJan…	@MikeH: I work almost entirely on custom apps, built with frameworks. I’ve got wordpress as my blog, but that’s all (and I didn’t build it myself!). I’m API specialist so I work more with integrating systems, and they are usually framework-built bespoke apps, just because that’s the best tool for these particular jobs
Oatley	Hi Lorna: When writing a class is it always important to follow a design pattern. A lot of my classes seem to follow no design pattern at all. Is this a bad thing?
LornaJan…	@mycritter: going with an existing open source CMS and customising it means that you get all the work done in the existing one for free, your client only needs to pay for the extra bits that are specific to their system, and you only have to do interesting and unusual bits of development, rather than repeating yourself all the time
mycritte…	@oatley, ooh, now we’re getting into the fun stuff ;-)
LornaJan…	stuff like Drupal has loads of extensions and will offer you security updates all the time – and your own code won’t do that with zero work from you :)
MikeH	Specialization begets productivity IMO. Having to swap often between frameworks, libraries or CMS brings a lot of overhead, and requires a lot more research time
LornaJan…	@Oatley: not a bad thing at all. Too many design patterns is a bad thing. Not following patterns isn’t a problem. In fact, if you read a design patterns textbook, you’d probably find many more familiar patterns than you expect. The bottom line is that we’re developers and that means we solve problems. Whether those solutions have complicated-sounding names or not doesn’t matter IMO
ridinQwe…	I’m still really new to PHP, and haven’t touched a framework yet, but wouldn’t it pretty much be like a comparison to jquery and javascript? The dirty work simplified down into managed solutions?
MikeH	@ridinQwerty broadly speaking — yes
LornaJan…	@MikeH That’s not my experience, I find it helpful both in terms of getting things done and in terms of code quality to build on the existing libraries available in the open source world. Switching between them is hard work, but worth it, at least for me
TheCliff	Thanks for that page @hAWK
LornaJan…	@RidinQwerty that’s a nice analogy, yes :) Some frameworks are little more than a few libraries – and you might add a few more to make something you’re comfortable with. But they’re just there to wrap things up and make them quicker to use
Paul.Ann…	@ridinQwerty: main difference; jQuery is a library that you call from your code. A framework generally defines where you should put code so that the framework can call it when appropriate.
HAWK	@TheCliff np
MikeH	@LornaJane I agree on building on their foundations. I just find it hard to keep up with multiple systems.
ccovey	For those of us without code reviews, etc. any ways of knowing when our OOP code is no longer procedural code in class? I feel like mine is haha.
TheCliff	@lornaJane so for beginners what framework would you recommend getting started with? I’ve had tons of people tell me that Yii is the best one as of late. What are your thoughts as far as learning curves, ease of use, etc. are concerned?
MikeH	@ccovey <?php class Ccovey { public function__construct() { $this->isProduceduralInAClass = false; } } ?>
LornaJan…	@ccovey: Method length is usually a clue. If your methods are really long then you’re probably still working in quite a procedural style. Some methods will always end up long though – such as a controller action for a complicated page
Oatley	Apart from your own excellent sitepoint book (which I found out about at you at one of your excellent training courses i attended at Leeds NTI!) what other OOP books would you recommend?
MikeH	@ccovey …problem solved
Paul.Ann…	ccovey: one way is to try writing unit tests for your code… if you manage, it’s probably decent enough OO. If it’s really painful, maybe it needs refactoring to be more OO :)
LornaJan…	@TheCliff: I haven’t used Yii but I’ve had people who do both front end and back end enjoy it. I usually recommend that people get comfortable with OOP, then try out something like CakePHP – it’s not too complicated a framework but is built by smart people and has a fabulous community behind it.
MikeH	@Paul.Annesley speaking of, what is the Unit Testing framework de jour?
ccovey	I have been trying to keep methods under 20ish lines if possible and have started testing on my recent side project
TheCliff	awesome. I’ll look into that!
ccovey	MikeH if only I would’ve known that years ago :)
LornaJan…	@Oatley: PHP Master is the only resource you’ll ever need!! Seriously though, there aren’t a lot of OOP books out there. Once you’re at the level where PHP Master is making sense, you’re better reading the blog articles so make sure you’re subscribed to phpdeveloper.org and the Sitepoint sites including phpmaster.com – that’s where much of the advanced content goes, and it’s properly up to date. Many of the books are pre-PHP 5.3 right now, although I’m seeing updates coming out
ridinQwe…	@Paul.Annesley I probably have awhile before I will be able to ingest what you just said. I’m still goofing around with filling tables with data I create and ect… Not too far along at all in other words. I’ve just gotten comfortable with the front end of things, so it’s time to progress. I’ve got the first two books you guys offer on it though, and am enjoying them. The one on OOP with be the next.
LornaJan…	@ccovey: that sounds to me like you are on the right tracks already, great work
HAWK	I assume you guys know about Lorna’s OOP course…https://learnable.com/courses/object-oriented-php-2734
ridinQwe…	Sure do
Paul.Ann…	@MikeH: sorry for the delay… I believe PHPUnit is where it’s at. http://www.phpunit.de/ I’ve mostly used SimpleTest in the past, but I don’t recommend it, and don’t let the name fool you… it’s not simpler :)
MikeH	Good. I started to dabble with that one a few years ago.
LornaJan…	And what @HAWK said – if you’re looking for an intro to OOP, I have the Learnable course up now, mix of me talking (and drawing pictures!) and showing code, which I hope will help. For those who learn better from reading, the PHP Master book has an OOP chapter but also chapters on Design Patterns and on Databases, using PDO which is also object oriented
Paul.Ann…	I definitely recommend learning to write unit tests if you want to do object oriented proramming.
mycritte…	@lornaJane, are we talking applying OOP to PHP, or implementing new powerful PHP versions?
Oatley	Hi Lorna. Thanks for all your help by the way. Another one for you When I’m writing classes I can never seem to extend them. In examples I constantly see things like cat extends animal, which makes sense. But in the real world I’m never going to be building a ‘cat’! Say I’m building something like a website, what would be a good example of using extends here?
ridinQwe…	I had to switch my email address to join because it said someone was using it, on a unrelated but related note. ?
LornaJan…	@mycritter I can take any questions you have
MikeH	@ridinQwerty same with me. Remembered my email from a chat months and months ago and wouldn’t let me in
Paul.Ann…	Same. Fake email addresses all round :)
ridinQwe…	Lol
HAWK	@ridinQwerty and @MikeH Yeah, that is a very frustrating bug with this s/w – I don’t even know why it stores the emails, I can’t aces them. The good news is that we have our own interface well on the way to completion and with any luck I’ll be using that for the next session.
Paul.Ann…	Related fact: did you know example.com and example.org etc are reserved for testing, so you know nobody will get email sent to them?
LornaJan…	@Oatley For example you might make a base model, and your other models extend from that – same for controllers. Quite often I do this the other way around. When you copy and paste something into another class, then instead you should create a common parent, rather than looking to create a child
mycritte…	guess we should all log out before closing the browser
Jerry	I had to try 3 fake email addresses before I found one it would accept. :)
MikeH	PHP Pros — do you do any front end dev work (excluding personal projects)? Or put another way do you get to focus on the server side?
HAWK	Yeah, sorry about that. Annoyingly, they don’t answer support tickets either so there isn’t much I can do except bin the product.
LornaJan…	@Oatley also if you’re using a framework, have a look around in it’s source code – you’ll see some very good “real” examples there of when classes are extended – and sometimes you’ll want to extend their classes yourself to add things
Jerry	np @Hawk
LornaJan…	@MikeH I do not do any frontend dev work. To put it politely, it’s not where my talents lie :) It isn’t a problem because I do APIs rather than websites a lot of the time
Oatley	Lorna, I’m a ZCE 5.3. Do you know of when/if the exam will involve the very latest version of ph
Paul.Ann…	@MikeH: I’m no pro in frontend stuff, but I like to do some occasionally to keep up to date. I think when you’re working server-side, it’s important to understand how the data you’re pushing to the frontend layer is going to be worked with and displayed.
mycritte…	@lornaJane, when you say “do APIs”, do you mean build or integrate them?
MikeH	Indeed.
LornaJan…	@oatley: I can’t see the ZCE exams updating any time soon. It’s a huge investment for Zend to make that happen and I’m confident they aren’t working on that at the moment
MikeH	Github? Is it as ubiquitous as the all the kids say?
LornaJan…	@mycritter: either/both. I build lots of APIs, but also go in and make systems talk to one another with whatever functionality they have available. I spend more with data and servers than with browsers, by a long way
LornaJan…	@MikeH I think source control is ubiquitous. Many companies use alternative hosting as GitHub is expensive for private repositories, but the idea of having remotely hosted collaborative source control is standard, in my experience
HAWK	Welcome to those of you that have just come in. We’ve mostly talked frameworks so far and are now touching on source control.
Oatley	Thanks Lorna, with extends can you extend anything? For example I see this “has a” vs “is a” debate, so for example would it make sense for something like a class FormBuilder to extend the class validation? (keeping things separate?) thanks.
Paul.Ann…	Oatley: keep in mind inheritance isn’t the only way to bring functionality into a class. Check out http://en.wikipedia.org/wiki/Composition_over_inheritance… you can just write small methods on your class which call out to other classes dedicated to that particular job.
LornaJan…	@Oatley the “is a” and “has a” debate is useful in terms of naming things and thinking about how they go together. If you try to extend one thing into another incorrectly, I usually find that you’ll realise that this makes no sense pretty quickly :) My advice is to try out your ideas on a small scale, and see if you think it works for your application
Paul.Ann…	contrived example which might help illustrate composition, as opposed to inheritance: class Form { public function validate($field) { $validator = new Validator(); return $validator->validate($field); } } so Form is “composed of” Validator… it uses it, but doesn’t have to deal with the complexity of inheriting from it.
Oatley	Thanks Paul & Lorna :-)
Paul.Ann…	it could also have a translate() method which calls out to a Translator class… much harder to extend/inherit from two different base classes :)
Oatley	One thing ive always wondered In a class before you write any methods at the very top you declare your properties (ie public, private, protected) a lot of the time when I have forgotten to do this my script class is fine so why do they need to be declared?
LornaJan…	@Oatley they don’t need to be – if you just start using properties, they work fine. BUT by declaring them, you can document them, and also if you don’t want the properties to be public (which often they shouldn’t be) then you will need to declare them and their visibility
LornaJan…	@Oatley it’s good practice to declare them, but PHP will roll with it if you don’t, it’s very tolerant
Paul.Ann…	@LornaJane: does failing to declare them raise warnings at certain error_reporting levels in modern PHP?
ccovey	Depends on usage
Paul.Ann…	PHP borrows heavily from Java for its class/object model, and Java being a statically compiled language depends on those properties being declared up front.
Oatley	@hawk. Will a article of all the questions and answers today asked be somewhere on would be very useful. Thanks
Paul.Ann…	I seem to remember having problem with __set() and __get() magic methods when not declaring properties. Details hazy.
ccovey	$this->foo += ‘bar’; will throw a warning if not declared. But that is a bit of a different issue
LornaJan…	@Paul.Annesley no warnings from PHP, it’s a backward compatibility thing. PHP 4 had no visibility, so public was the default then, and that’s still the case now. You can just use properties and PHP will assume that you meant to do that
HAWK	@oatley Yup. I’ll post a transcript of the session on sitepoint.com tomorrow :)
Oatley	I’m trying and write a mini framework that creates drivers or for any PDO queries, or read any XML files passed into my system. Is this a good idea, or is it overkill?
Paul.Ann…	Maybe problems with serialize() or json_encode() if you don’t declare them? I’m clutching at straws :) But they should definitely be declared.
HAWK	@oatley And all transcripts of these sessions can be found here http://www.sitepoint.com/forums/showthread.php?873280-Transcripts-From-Past-Sessions
LornaJan…	@Oatley it sounds like a good project to me. You might try to make them as standalone classes – then you can add them to any other project, even if you’re using a framework, by including your classes in the autoloader
Paul.Ann…	Here’s an interesting thing to consider: if you have a site that doesn’t need a database etc, but you want the benefits of using PHP to create it (e.g. shared header/footer/layout/components etc), consider a static site generator. Write your site in PHP, generate it to HTML files, and deploy them to a static website host or Amazon S3. Never get hacked ;) In Ruby-land, I’d recommend http://middlemanapp.com/ for that. Googling around for PHP examples, I see http://www.phrozn.info/en/ and http://sculpin.io/ and various others, but haven’t tried them. @MikeH: going back a bit… I’m a massive fan of git and GitHub. git is not trivial to learn, but I consider it well worth it… definitely one of my most valued development tools. I `git init` and commit to any old directory I write code/docs in, even if it’s just a one-day-one-developer project. And git doesn’t lock you into GitHub… there’s other hosts, or you can host your own, or if you’re a solo developer you can just not push your code to a remote server. Git can run entirely locally, doesn’t need a server.
HAWK	I’m going to jump in and say that we have 5 minutes left of the session (at which point you are welcome to chat amongst yourselves but I’ll cut Lorna free) so if anyone has a question that they haven’t asked, now would be the time
MikeH	@Paul.Annesley I’m pretty ignorant with VC, except that I do understand it’s benefits. Is Git (without the hub) still good for getting code onto different machines? Do you need to setup a host?
MikeH	Never mind, you answered that
Paul.Ann…	@MikeH: git works great over SSH, so you can push/pull easily between any hosts you can SSH between.
MikeH	It might not be something I should admit publicly, but I use Windows and would have to learn SSH too
Paul.Ann…	:) PuTTY is an excellent SSH client: http://www.chiark.greenend.org.uk/~sgtatham/putty/ … it’s been years since I’ve used it though, and I’ve never used git on windows.
LornaJan…	@MikeH You are in good company there, plenty of windows users around
Paul.Ann…	There’s a Windows GitHub client though.
MikeH	Thanks. What about code documenting? I used to use PhpDocumenter, but I couldn’t get the latest version to work
Paul.Ann…	If you have the time and interest, I’d recommend running a linux (Ubuntu?) virtual machine on your windows machine, so you can play with and learn tools like git/php/etc in the environment they were built for.
ccovey	I use gitbash on windows wish comes with ssh already installed for you so then you just need to generate keys ect.
Paul.Ann…	I’m usually running an Ubuntu Server virtual machine on my Mac, which I SSH into.
HAWK	And… that’s a wrap. Thanks very much to everyone that participated. I’ll post a transcript up on SitePoint tomorrow. Don’t forget to check out Lorna’s course https://learnable.com/courses/object-oriented-php-2734 and lastly… a huge thanks to Lorna for her time, and to Paul for stepping in at the last minute to help out. Much appreciated. You’re all free to stick around here for as long as you like, but the session will no longer be moderated. :)
LornaJan…	@MikeH definitely phpDocumentor, I’m sure their IRC channel or mailing list would help you with setup problems
Jerry	Thanks Lorna, Paul, Hawk
HAWK	If you’d like to sign up for email notifications of future sessions, you can do so here https://www.facebook.com/sitepoint/app_115462065200508
MikeH	I’m a generalist, so my to-learn list is as long as my arm. Might not extend to Linux.Thanks @LornaJane, @HAWK
HAWK	No worries @Jerry
LornaJan…	Thanks for having me everyone, some good questions today
HAWK	See ya everyone
Paul.Ann…	Cool, thanks everybody for the questions and interest.
MikeH	Maybe my inability to spell ‘documentor’ was the problem? Thanks
Paul.Ann…	I’m http://twitter.com/pda on Twitter, although you’ll see more about Ruby etc than PHP there ;)
Jerry	GitBash on Windows is handy just for the Unix tools that come with it (grep, etc.)
MikeH	Paul, do you find Ruby (on Rails I presume) to be a lot faster for CRUD like apps than PHP?
Paul.Ann…	@MikeH: honestly, I don’t build many small apps in any language, so it’s hard to comment on that.
Paul.Ann…	I much prefer the Ruby language to the PHP language, despite it being slower and Rails is an impressive framework, but it’s incredibly large and therefore complicated… takes a long time to really learn it. My answer is: web development is hard. :)

We’ve covered most of the basics of Fabric in the first and second parts of this series. In this article, I’ll move on to more advanced features: groups, serialization (and deserialization) and classes.

Groups

The first topic I’ll talk about is groups, one of Fabric’s most powerful features. Groups are exactly what they sound like—a simple way to group Fabric objects into a single entity so that you can work with those objects as a unit. (See Figure 1.)

Figure 1. A Selection Becomes a Group in Fabric

Remember that any number of Fabric objects on the canvas can be grouped with the mouse to form a single selection. Once grouped, the objects can be moved and even modified as one. You can scale the group, rotate it, and even change its presentational properties—its color, transparency, borders, and so on.

Every time you select objects like this on the canvas, Fabric creates a group implicitly, behind the scenes. Given this, it only makes sense to provide access to groups programmatically, which is where fabric.Group comes in.

Let’s create a group from two objects, a circle and text:

       var text = new fabric.Text('hello world', {
	  fontSize: 30
	});
	var circle = new fabric.Circle({
	  radius: 100,
	  fill: '#eef',
	  scaleY: 0.5
	});
	var group = new fabric.Group([ text, circle ], {
	  left: 150,
	  top: 100,
	  angle: -10
	});
	canvas.add(group);

First, I created a “hello world” text object. Then, I created a circle with a 100 px radius, filled with the “#eef” color and squeezed vertically (scaleY=0.5). I next created a fabric.Group instance, passing it an array with these two objects and giving it a position of 150/100 at a -10 degree angle. Finally, I added the group to the canvas, as I would with any other object, by using canvas.add().

Voila! You see an object on the canvas as shown in Figure 2, a labeled ellipse, and can now work with this object as a single entity. To modify that object, you simply change properties of the group, here giving it custom left, top and angle values.

Figure 2. A Group Created Programmatically

And now that we have a group on our canvas, let’s change it up a little:

       group.item(0).set({
	  text: 'trololo',
	  fill: 'white'
	});
	group.item(1).setFill('red');

Here, we access individual objects in a group via the item method and modify their properties. The first object is the text, and the second is the squeezed circle. Figure 3 shows the results.

Figure 3. Squeezed Red Circle with New Text

One important idea you’ve probably noticed by now is that objects in a group are all positioned relative to the center of the group. When I changed the text property of the text object, it remained centered even when I changed its width. If you don’t want this behavior, you need to specify an object’s left/top coordinates, in which case they’ll be grouped according to those coordinates.

Here’s how to create and group three circles so that they’re positioned horizontally one after the other, such as those shown in Figure 4.

       var circle1 = new fabric.Circle({
	  radius: 50,
	  fill: 'red',
	  left: 0
	});
	var circle2 = new fabric.Circle({
	  radius: 50,
	  fill: 'green',
	  left: 100
	});
	var circle3 = new fabric.Circle({
	  radius: 50,
	  fill: 'blue',
	  left: 200
	});
	var group = new fabric.Group([ circle1, circle2, circle3 ], {
	  left: 200,
	  top: 100
	});
	canvas.add(group);

Figure 4. A Group with Three Circles Aligned Horizontally

Another point to keep in mind when working with groups is the state of the objects. For example, when forming a group with images, you need to be sure those images are fully loaded. Since Fabric already provides helper methods for ensuring that an image is loaded, this operation becomes fairly easy, as you can see in this code and in Figure 5.

       fabric.Image.fromURL('/assets/pug.jpg', function(img) {
	  var img1 = img.scale(0.1).set({ left: 100, top: 100 });
	  fabric.Image.fromURL('/assets/pug.jpg', function(img) {
	    var img2 = img.scale(0.1).set({ left: 175, top: 175 });
	    fabric.Image.fromURL('/assets/pug.jpg', function(img) {
	      var img3 = img.scale(0.1).set({ left: 250, top: 250 });
	      canvas.add(new fabric.Group([ img1, img2, img3],
	        { left: 200, top: 200 }))
	    });
	  });
	});

Figure 5. A Group with Three Images

Several other methods are available for working with groups:

• getObjects works exactly like fabric.Canvas#getObjects() and returns an array of all objects in a group
• size represents the number of objects in a group
• contains allows you to check whether a particular object is in a group
• item (which you saw earlier) allows you to retrieve a specific object from a group
• forEachObject also mirrors fabric.Canvas#forEachObject, but in relation to group objects
• add and remove add and remove objects from a group, respectively

You can add or remove objects with or without updating group dimensions and position. Here are several examples:

To add a rectangle at the center of a group (left=0, top=0), use this code:

       group.add(new fabric.Rect({
	  ...
	}));

To add a rectangle 100 px from the center of the group, do this:

       group.add(new fabric.Rect({
	  ...
	  left: 100,
	  top: 100
	}));

To add a rectangle at the center of a group and update the group’s dimensions, use the following code:

       group.addWithUpdate(new fabric.Rect({
	  ...
	  left: group.getLeft(),
	  top: group.getTop()
	}));

To add a rectangle at 100 px off from the center of a group and update the group’s dimensions, do this:

       group.addWithUpdate(new fabric.Rect({
	  ...
	  left: group.getLeft() + 100,
	  top: group.getTop() + 100
	}));

Finally, if you want to create a group with objects that are already present on the canvas, you need to clone them first:

       // create a group with copies of existing (2) objects
	var group = new fabric.Group([
	  canvas.item(0).clone(),
	  canvas.item(1).clone()
	]);
	// remove all objects and re-render
	canvas.clear().renderAll();
	// add group onto canvas
	canvas.add(group);

Serialization

As soon as you start building a stateful application of some sort—perhaps one that allows users to save results of canvas contents on a server or streaming contents to a different client—you need canvas serialization. There’s always an option to export the canvas to an image, but uploading a large image to a server requires a lot of bandwidth. Nothing beats text when it comes to size, and that’s exactly why Fabric provides an excellent support for canvas serialization and deserialization.

toObject, toJSON

The backbone of canvas serialization in Fabric are the fabric.Canvas#toObject and fabric.Canvas#toJSON methods. Let’s take a look at a simple example, first serializing an empty canvas:

       var canvas = new fabric.Canvas('c');
	JSON.stringify(canvas); // '{"objects":[],"background":"rgba(0, 0, 0, 0)"}'

Here I’m using the ES5 JSON.stringify method, which implicitly calls the toJSON method on the passed object if that method exists. Because a canvas instance in Fabric has a toJSON method, it’s as though we called JSON.stringify(canvas.toJSON()) instead.

Notice the returned string that represents the empty canvas. It’s in JSON format, and essentially consists of “objects” and “background” properties. The “objects” property is currently empty because there’s nothing on the canvas, and “background” has a default transparent value (“rgba(0, 0, 0, 0)”).

Let’s give our canvas a different background and see how things change:

canvas.backgroundColor = 'red';
	JSON.stringify(canvas); // '{"objects":[],"background":"red"}'

As you would expect, the canvas representation reflects the new background color. Now let’s add some objects:

       canvas.add(new fabric.Rect({
	  left: 50,
	  top: 50,
	  height: 20,
	  width: 20,
	  fill: 'green'
	}));
	console.log(JSON.stringify(canvas));

The logged output is as follows:

'{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,
"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,
"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,
"perPixelTargetFind":false,"rx":0,"ry":0}],"background":"rgba(0, 0, 0, 0)"}'

Wow! At first sight, quite a lot has changed, but looking more closely, you can see that the newly added object is now part of the “objects” array, serialized into JSON. Notice how its representation includes all its visual traits—left, top, width, height, fill, stroke and so on.

If we were to add another object—say, a red circle positioned next to the rectangle—you would see that the representation changed accordingly:

canvas.add(new fabric.Circle({
	  left: 100,
	  top: 100,
	  radius: 50,
	  fill: 'red'
	}));
	console.log(JSON.stringify(canvas));

Here’s the logged output now:

'{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,
"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,
"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,
"perPixelTargetFind":false,"rx":0,"ry":0},"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red",
"overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,
"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,
"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'

Notice the “type”:”rect” and “type”:”circle” parts so that you can see better where those objects are. Even though it might seem like a lot of output at first, it is nothing compared to what you would get with image serialization. Just for fun, take a look at about one-tenth (!) of a string you would get with canvas.toDataURL('png'):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAK8CAYAAAAXo9vkAAAgAElEQVR4Xu3dP4xtBbnG4WPAQOQ2YBCLK1qpoQE1
/m+NVlCDwUACicRCEuysrOwkwcJgAglEItRQaWz9HxEaolSKtxCJ0FwMRIj32zqFcjm8e868s2fNWoJygl+e397rWetk5xf5pyZd13wPwIEC
BAgQIAAAQIECBxI4F0H+hwfQ4AAAQIECBAgQIAAgQsCxENAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAw
QQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQI
ECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABA
gQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBq
H0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABA
gLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECAsQzQIAAAQIECBAgQ
IDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAgAABAgQIECBAgMDBBATIwah9EAECB
AgQIECAAAECAsQzQIAAAQIECBAgQIDAwQQEyMGofRABAgQIECBAgAABAgLEM0CAAAECBAgQIECAwMEEBMjBqH0QAQIECBAgQIAAAQICxDNAg
AABAgQIECBAgMDBBATIwah9EAECBAgQIECAAAECyw+Qb134RU2fevC8q+5esGWESBAgAABAgQIEFiOwPLMC5AlvO0OBMCBAgQIECAAAECJxQ
QICcE9HYCBAgQIECAAAECBPYXECD7W3klAQIECBAgQIAAAQInFBAgJwT0dgIECBAgQIAAAQIE9hcQIPtbeSUBAgQIECBAgAABAicUECAnBPR
2AgQIECBAgAABAgT2FxAg+1t5JQECBAgQIECAAAECJxQQICcE9HYCBAgQIECAAAECBPYXECD7W3klAQIECBAgQIAAAQInFBAgJwTc9+3z49y
vmNd+dI7PzPHJOW6Y4wNzXD3HlXNc9pZdb85/vzbHK3P8aY7n5vj1HL+Y43dz417f97O9jgABAgQIECBAgMBSBATIKd2JCY5dWNwyx5fn+Pw
cV5U/6tXZ99M5fjjHk3Mjd6HifwQIECBAgAABAgQWLSBAirdnouP6WXfvHHfOcU1x9T6rXp4XPTLHA3NTX9jnDV5DgAABAgQIECBA4NACAuS
E4hMdl8+Kr83xzTmuO+G61ttfnEXfnuN7c4PfaC21hwABAgQIECBAgMBJBQTIJQpOeFw7b71/jtsvccWh3vbYfNB9c6NfOtQH+hwCBAgQIEC
AAAECFxMQIMd8No7C4+F5283HfOtZv/ypOYG7hMhZ3wafT4AAAQIECBDYtoAA2fP+H/1Vqwd3f4jf8y1Lfdkunu7xV7OWenucFwECBAgQIEB
g3QICZI/7O/Fxx7xs9wf3t36r3D3evciX7L7F7+6rIY8u8uycFAECBAgQIE

…and there’s approximately 17,000 characters more.

You might be wondering why there’s also fabric.Canvas#toObject. Quite simply, toObject returns the same representation as toJSON, only in a form of the actual object, without string serialization. For example, using the earlier example of a canvas with just a green rectangle, the output for canvas.toObject is as follows:

       { "background" : "rgba(0, 0, 0, 0)",
	  "objects" : [
	    {
	      "angle" : 0,
	      "fill" : "green",
	      "flipX" : false,
	      "flipY" : false,
	      "hasBorders" : true,
	      "hasControls" : true,
	      "hasRotatingPoint" : false,
	      "height" : 20,
	      "left" : 50,
	      "opacity" : 1,
	      "overlayFill" : null,
	      "perPixelTargetFind" : false,
	      "scaleX" : 1,
	      "scaleY" : 1,
	      "selectable" : true,
	      "stroke" : null,
	      "strokeDashArray" : null,
	      "strokeWidth" : 1,
	      "top" : 50,
	      "transparentCorners" : true,
	      "type" : "rect",
	      "width" : 20
	    }
	  ]
	}

As you can see, toJSON output is essentially stringified toObject output. Now, the interesting (and useful) thing is that toObject output is smart and lazy. What you see inside an “objects” array is the result of iterating over all canvas objects and delegating to each object’s own toObject method. For example, fabric.Path has its own toObject that knows to return path’s “points” array, and fabric.Image has a toObject that knows to return image’s “src” property. In true object-oriented fashion, all objects are capable of serializing themselves.

This means that when you create your own class, or simply need to customize an object’s serialized representation, all you need to do is work with the toObject method, either completely replacing it or extending it. Here’s an example:

var rect = new fabric.Rect();
	rect.toObject = function() {
	  return { name: 'trololo' };
	};
	canvas.add(rect);
	console.log(JSON.stringify(canvas));

The logged output is:

'{"objects":[{"name":"trololo"}],"background":"rgba(0, 0, 0, 0)"}'

As you can see, the objects array now has a custom representation of our rectangle. This kind of override brings the point across but is probably not very useful. Instead, here’s how to extend a rectangle’s toObject method with an additional property:

var rect = new fabric.Rect();
	rect.toObject = (function(toObject) {
	  return function() {
	    return fabric.util.object.extend(toObject.call(this), {
	      name: this.name
	    });
	  };
	})(rect.toObject);
	canvas.add(rect);
	rect.name = 'trololo';
	console.log(JSON.stringify(canvas));

And here’s the logged output:

'{"objects":[{"type":"rect","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","overlayFill":null,
"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,
"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,
"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0,"name":"trololo"}],
"background":"rgba(0, 0, 0, 0)"}'

I extended the object’s existing toObject method with the additional property “name”, which means that property is now part of the toObject output, and as a result it appears in the canvas JSON representation. One other item worth mentioning is that if you extend objects like this, you’ll also want to be sure the object’s “class” (fabric.Rect in this case) has this property in the “stateProperties” array so that loading a canvas from a string representation will parse and add it to an object correctly.

toSVG

Another efficient text-based canvas representation is in SVG format. Since Fabric specializes in SVG parsing and rendering on canvas, it makes sense to make this a two-way process and provide canvas-to-SVG conversion. Let’s add the same rectangle to our canvas and see what kind of representation is returned from the toSVG method:

       canvas.add(new fabric.Rect({
	  left: 50,
	  top: 50,
	  height: 20,
	  width: 20,
	  fill: 'green'
	}));
	console.log(canvas.toSVG());

The logged output is as follows:

'<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700"
xml:space="preserve"><desc>Created with Fabric.js 0.9.21</desc><rect x="-10" y="-10"
rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green;
opacity: 1;" transform="translate(50 50)" /></svg>'

Just like with toJSON and toObject, the toSVG method—when called on canvas—delegates its logic to each individual object, and each individual object has its own toSVG method that is special to the type of object. If you ever need to modify or extend an SVG representation of an object, you can do the same thing with toSVG as I did earlier with toObject.

The benefit of SVG representation, compared to Fabric’s proprietary toObject/toJSON, is that you can throw it into any SVG-capable renderer (browser, application, printer, camera, and so on), and it should just work. With toObject/toJSON, however, you first need to load it onto a canvas.

And speaking of loading things onto a canvas, now that you know how to serialize a canvas into an efficient chunk of text, how do you go about loading this data back onto canvas?

Deserialization and the SVG Parser

As with serialization, there’s two ways to load a canvas from a string: from JSON representation or from SVG. When using JSON representation, there are the fabric.Canvas#loadFromJSON and fabric.Canvas#loadFromDatalessJSON methods. When using SVG, there are fabric.loadSVGFromURL and fabric.loadSVGFromString.

Notice that the first two methods are instance methods and are called on a canvas instance directly, whereas the other two methods are static methods and are called on the “fabric” object rather than on canvas.

There’s not much to say about most of these methods. They work exactly as you would expect them to. Let’s take as an example the previous JSON output from our canvas and load it on a clean canvas:

       var canvas = new fabric.Canvas();
	canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,
fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,
"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,
"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,
"rx":0,"ry":0},"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red",
"overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,
"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,
"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,
"radius":50}],"background":"rgba(0, 0, 0, 0)"}');

Both objects magically appear on canvas, as shown in Figure 6.

Figure 6. A Circle and a Square Rendered on Canvas

So loading canvas from a string is pretty easy, but what about that strange-looking loadFromDatalessJSON method? How is it different from loadFromJSON, which we just used? To understand why you need this method, look at a serialized canvas that has a more or less complex path object, like the one shown in Figure 7.

Figure 7. A Complex Shape Rendered on Canvas

JSON.stringify(canvas) output for the shape in Figure 7 is as follows:

{"objects":[{"type":"path","left":184,"top":177,"width":175,"height":151,"fill":"#231F20","overlayFill":null,
"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,
"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,
"transparentCorners":true,"perPixelTargetFind":false,"path":[["M",39.502,61.823],["c",-1.235,-0.902,-3.038,
-3.605,-3.038,-3.605],["s",0.702,0.4,3.907,1.203],["c",3.205,0.8,7.444,-0.668,10.114,-1.97],["c",2.671,-1.302,
7.11,-1.436,9.448,-1.336],["c",2.336,0.101,4.707,0.602,4.373,2.036],["c",-0.334,1.437,-5.742,3.94,-5.742,3.94],
["s",0.4,0.334,1.236,0.334],["c",0.833,0,6.075,-1.403,6.542,-4.173],["s",-1.802,-8.377,-3.272,-9.013],["c",-1.468,
-0.633,-4.172,0,-4.172,0],["c",4.039,1.438,4.941,6.176,4.941,6.176],["c",-2.604,-1.504,-9.279,-1.234,-12.619,
0.501],["c",-3.337,1.736,-8.379,2.67,-10.083,2.503],["c",-1.701,-0.167,-3.571,-1.036,-3.571,-1.036],["c",1.837,
0.034,3.239,-2.669,3.239,-2.669],["s",-2.068,2.269,-5.542,0.434],["c",-3.47,-1.837,-1.704,-8.18,-1.704,-8.18],
["s",-2.937,5.909,-1,9.816],["C",34.496,60.688,39.502,61.823,39.502,61.823],["z"],["M",77.002,40.772],["c",0,0,
-1.78,-5.03,-2.804,-8.546],["l",-1.557,8.411],["l",1.646,1.602],["c",0,0,0,-0.622,-0.668,-1.691],["C",72.952,
39.48,76.513,40.371,77.002,40.772],["z"],["M",102.989,86.943],["M",102.396,86.424],["c",0.25,0.22,0.447,0.391,
0.594,0.519],["C",102.796,86.774,102.571,86.578,102.396,86.424],["z"],["M",169.407,119.374],["c",-0.09,-5.429,
-3.917,-3.914,-3.917,-2.402],["c",0,0,-11.396,1.603,-13.086,-6.677],["c",0,0,3.56,-5.43,1.69,-12.461],["c",
-0.575,-2.163,-1.691,-5.337,-3.637,-8.605],["c",11.104,2.121,21.701,-5.08,19.038,-15.519],["c",-3.34,-13.087,
-19.63,-9.481,-24.437,-9.349],["c",-4.809,0.135,-13.486,-2.002,-8.011,-11.618],["c",5.473,-9.613,18.024,-5.874,
18.024,-5.874],["c",-2.136,0.668,-4.674,4.807,-4.674,4.807],["c",9.748,-6.811,22.301,4.541,22.301,4.541],["c",
-3.097,-13.678,-23.153,-14.636,-30.041,-12.635],["c",-4.286,-0.377,-5.241,-3.391,-3.073,-6.637],["c",2.314,
-3.473,10.503,-13.976,10.503,-13.976],["s",-2.048,2.046,-6.231,4.005],["c",-4.184,1.96,-6.321,-2.227,-4.362,
-6.854],["c",1.96,-4.627,8.191,-16.559,8.191,-16.559],["c",-1.96,3.207,-24.571,31.247,-21.723,26.707],["c",
2.85,-4.541,5.253,-11.93,5.253,-11.93],["c",-2.849,6.943,-22.434,25.283,-30.713,34.274],["s",-5.786,19.583,
-4.005,21.987],["c",0.43,0.58,0.601,0.972,0.62,1.232],["c",-4.868,-3.052,-3.884,-13.936,-0.264,-19.66],["c",
3.829,-6.053,18.427,-20.207,18.427,-20.207],["v",-1.336],["c",0,0,0.444,-1.513,-0.089,-0.444],["c",-0.535,
1.068,-3.65,1.245,-3.384,-0.889],["c",0.268,-2.137,-0.356,-8.549,-0.356,-8.549],["s",-1.157,5.789,-2.758,
5.61],["c",-1.603,-0.179,-2.493,-2.672,-2.405,-5.432],["c",0.089,-2.758,-1.157,-9.702,-1.157,-9.702],["c",
-0.8,11.75,-8.277,8.011,-8.277,3.74],["c",0,-4.274,-4.541,-12.82,-4.541,-12.82],["s",2.403,14.421,-1.336,
14.421],["c",-3.737,0,-6.944,-5.074,-9.879,-9.882],["C",78.161,5.874,68.279,0,68.279,0],["c",13.428,16.088,
17.656,32.111,18.397,44.512],["c",-1.793,0.422,-2.908,2.224,-2.908,2.224],["c",0.356,-2.847,-0.624,-7.745,
-1.245,-9.882],["c",-0.624,-2.137,-1.159,-9.168,-1.159,-9.168],["c",0,2.67,-0.979,5.253,-2.048,9.079],["c",
-1.068,3.828,-0.801,6.054,-0.801,6.054],["c",-1.068,-2.227,-4.271,-2.137,-4.271,-2.137],["c",1.336,1.783,
0.177,2.493,0.177,2.493],["s",0,0,-1.424,-1.601],["c",-1.424,-1.603,-3.473,-0.981,-3.384,0.265],["c",0.089,
1.247,0,1.959,-2.849,1.959],["c",-2.846,0,-5.874,-3.47,-9.078,-3.116],["c",-3.206,0.356,-5.521,2.137,-5.698,
6.678],["c",-0.179,4.541,1.869,5.251,1.869,5.251],["c",-0.801,-0.443,-0.891,-1.067,-0.891,-3.473],...

…and that’s only 20 percent of the entire output!

What’s going on here? Well, it turns out that this fabric.Path instance—this shape—consists of literally hundreds of Bezier lines dictating how exactly it is to be rendered. All those ["c",0,2.67,-0.979,5.253,-2.048,9.079] chunks in JSON representation correspond to each one of those curves. And when there’s hundreds (or even thousands) of them, the canvas representation ends up being quite enormous.

Situations like these are where fabric.Canvas#toDatalessJSON comes in handy. Let’s try it:

       canvas.item(0).sourcePath = '/assets/dragon.svg';
	console.log(JSON.stringify(canvas.toDatalessJSON()));

Here’s the logged output:

{"objects":[{"type":"path","left":143,"top":143,"width":175,"height":151,"fill":"#231F20","overlayFill":null,
"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":-19,"flipX":false,
"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,
"transparentCorners":true,"perPixelTargetFind":false,"path":"/assets/dragon.svg"}],"background":"rgba(0, 0, 0, 0)"}

That’s certainly smaller, so what happened? Notice that before calling toDatalessJSON, I gave the path (dragon shape) object a sourcePath property of “/assets/dragon.svg”. Then, when I called toDatalessJSON, the entire humongous path string from the previous output (those hundreds of path commands) is replaced with a single “dragon.svg” string.

When you’re working with lots of complex shapes, toDatalessJSON allows you to reduce canvas representation even further and replace huge path data representations with a simple link to SVG.

You can probably guess that the loadFromDatalessJSON method simply allows you to load a canvas from a data less version of a canvas representation. The loadFromDatalessJSON method pretty much knows how to take those “path” strings (like “/assets/dragon.svg”), load them, and use them as the data for corresponding path objects.

Now, let’s take a look at SVG-loading methods. We can use either string or URL. Let’s look at the string example first:

       fabric.loadSVGFromString('...', function(objects, options) {
	  var obj = fabric.util.groupSVGElements(objects, options);
	  canvas.add(obj).renderAll();
	});

The first argument is the SVG string, and the second is the callback function. The callback is invoked when SVG is parsed and loaded and receives two arguments—objects and options. The first, objects, contains an array of objects parsed from SVG—paths, path groups (for complex objects), images, text, and so on. To group those objects into a cohesive collection—and to make them look the way they do in an SVG document—we’re using fabric.util.groupSVGElements and passing it both objects and options. In return, we get either an instance of fabric.Path or fabric.PathGroup, which we can then add onto our canvas.

The fabric.loadSVGFromURL method works the same way, except that you pass a string containing a URL rather than SVG contents. Note that Fabric will attempt to fetch that URL via XMLHttpRequest, so the SVG needs to conform to the usual SOP rules.

Subclassing

Since Fabric is built in a truly object-oriented fashion, it’s designed to make subclassing and extension simple and natural. As described in the first article in this series, there’s an existing hierarchy of objects in Fabric. All two-dimensional objects (paths, images, text, and so on) inherit from fabric.Object, and some “classes”—like fabric.PathGroup — even form a third-level inheritance.

So how do you go about subclassing one of the existing “classes” in Fabric, or maybe even creating a class of your own?

For this task you need the fabric.util.createClass utility method. This method is nothing but a simple abstraction over JavaScript’s prototypal inheritance. Let’s first create a simple Point “class”:

       var Point = fabric.util.createClass({
	  initialize: function(x, y) {
	    this.x = x || 0;
	    this.y = y || 0;
	  },
	  toString: function() {
	    return this.x + '/' + this.y;
	  }
	});

The createClass method takes an object and uses that object’s properties to create a class with instance-level properties. The only specially treated property is initialize, which is used as a constructor. Now, when initializing Point, we’ll create an instance with x and y properties and the toString method:

       var point = new Point(10, 20);
	point.x; // 10
	point.y; // 20
	point.toString(); // "10/20"

If we wanted to create a child of “Point” class—say a colored point—we would use createClass like so:

       var ColoredPoint = fabric.util.createClass(Point, {
	  initialize: function(x, y, color) {
	    this.callSuper('initialize', x, y);
	    this.color = color || '#000';
	  },
	  toString: function() {
	    return this.callSuper('toString') + ' (color: ' + this.color + ')';
	  }
	});

Notice how the object with instance-level properties is now passed as a second argument. And the first argument receives Point “class”, which tells createClass to use it as a parent class of this one. To avoid duplication, we’re using the callSuper method, which calls the method of a parent class. This means that if we were to change Point, the changes would also propagate to the ColoredPoint class.

Here’s ColoredPoint in action:

var redPoint = new ColoredPoint(15, 33, '#f55');
	redPoint.x; // 15
	redPoint.y; // 33
	redPoint.color; // "#f55"
	redPoint.toString(); "15/35 (color: #f55)"

Now let’s see how to work with existing Fabric classes. For example, let’s create a LabeledRect class that will essentially be a rectangle that has some kind of label associated with it. When rendered on our canvas, that label will be represented as a text inside a rectangle (similar to the earlier group example with a circle and text). As you’re working with Fabric, you’ll notice that combined abstractions like this can be achieved either by using groups or by using custom classes.

       var LabeledRect = fabric.util.createClass(fabric.Rect, {
	  type: 'labeledRect',
	  initialize: function(options) {
	    options || (options = { });
	    this.callSuper('initialize', options);
	    this.set('label', options.label || '');
	  },
	  toObject: function() {
	    return fabric.util.object.extend(this.callSuper('toObject'), {
	      label: this.get('label')
	    });
	  },
	  _render: function(ctx) {
	    this.callSuper('_render', ctx);
	    ctx.font = '20px Helvetica';
	    ctx.fillStyle = '#333';
	    ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
	  }
	});

It looks like there’s quite a lot going on here, but it’s actually pretty simple. First, we’re specifying the parent class as fabric.Rect, to utilize its rendering abilities. Next, we define the type property, setting it to “labeledRect“. This is just for consistency, because all Fabric objects have the type property (rect, circle, path, text, and so on.) Then there’s the already-familiar constructor (initialize), in which we utilize callSuper once again. Additionally, we set the object’s label to whichever value was passed via options. Finally, we’re left with two methods—toObject and _render. The toObject method, as you already know from the serialization section, is responsible for object (and JSON) representation of an instance. Since LabeledRect has the same properties as regular rect but also a label, we’re extending the parent’s toObject method and simply adding a label into it. Last but not least, the _render method is what’s responsible for the actually drawing of an instance. There’s another callSuper call in it, which is what renders rectangle, and an additional three lines of text-rendering logic.

If you were to render such object, you do something like the following. Figure 8 shows the results.

       var labeledRect = new LabeledRect({
	  width: 100,
	  height: 50,
	  left: 100,
	  top: 100,
	  label: 'test',
	  fill: '#faa'
	});
	canvas.add(labeledRect);

Figure 8. Rendering of labeledRect

Changing the label value or any of the other usual rectangle properties would obviously work as expected, as you can see here and in Figure 9.

labeledRect.set({
	  label: 'trololo',
	  fill: '#aaf',
	  rx: 10,
	  ry: 10
	}

Figure 9. Modified labeledRect

Of course, at this point you’re free to modify the behavior of this class anyway you want. For example, you could make certain values the default values to avoid passing them every time to the constructor, or you could make certain configurable properties available on the instance. If you do make additional properties configurable, you might want to account for them in toObject and initialize, as I’ve shown here:

       ...
	initialize: function(options) {
	  options || (options = { });
	  this.callSuper('initialize', options);
	  // give all labeled rectangles fixed width/height of 100/50
	  this.set({ width: 100, height: 50 });
	  this.set('label', options.label || '');
	}
	...
	_render: function(ctx) {
	  // make font and fill values of labels configurable
	  ctx.font = this.labelFont;
	  ctx.fillStyle = this.labelFill;
	  ctx.fillText(this.label, -this.width/2, -this.height/2 + 20);
	}
	...

Wrapping Up

That closes the third installment of this series, in which I’ve dived into some of the more advanced aspects of Fabric. With help from groups, serialization and deserialization and classes, you can take your app to a whole new level.

I never met a developer who advocated SEO. Most of the entrepreneurs I know see it as a business essential—like a bank account, or a band name. And copywriters seem divided: SEO is either the way to structure any and all text, or a last-minute add-on to make the marketers happy.

Recently, I was working with a client who realised half-way through copy development that he wanted to include the current website’s existing body text into the new content we were writing.

Why? SEO. He was worried his business would lose search rank if he replaced the current web text.

I suggested keeping the current text intact as it was and framing the new copy around it, but he liked our new copy better. He wanted to shoehorn existing sentences into the new content wherever they might fit (so long as it was fairly high up on the page).

He revised a page of our draft text to integrate these sentences. We’re not talking a lot of copy here: maybe 50-75 words. But it read badly. In fact, the readability scores for his revised text were two full grades higher than our original copy.

When I pointed this out, along with some factual issues in the current text that we were aiming to eliminate with the new text, he gave me this answer:

“Oh, I don’t think that matters. No one will read it anyway—I think they’ll just read the headings here and click through to the product demo.”

Well then, I wondered, why clutter up the page with all these boring words anyway? Let’s delete them, leave the headings, and let the people just click on through (if indeed that’s what they were going to do).

The problem with SEO as SEO

This client saw SEO as a separate issue from communication. Of course we couldn’t delete the words no one was going to read from this page—they were the thing that would get us search traffic.

But once those people came, they wouldn’t bother reading the text, they’d just click through. Right?

Well, maybe. I don’t know about you, but as a searcher, when I click through from a search result, the first thing I do is look for the words I’m searching for on the page that’s displayed. Ideally, they’ll be contained in headings, because I’m scanning at this point, and keywords in headings act like signposts: here’s what you’re searching for.

If not headings, it’s good if keywords are contained in links because they’re scannable too. If not there, then I guess I’ll just have to start scanning actual sentences (yawn). Or maybe I’ll just hit the Back button and try another search result.

I don’t think this is an abnormal use case. I believe this is how a lot of people often behave with search results.

Don’t dismiss SEO. Use it to your advantage. It doesn’t have to be about keyword stuffing to address machine algorithms. SEO can be about providing potential users of your product or service with the information they’re looking for.

SEO can help communication

Woah, what? SEO can help communication? Come on. Who are we kidding here?

Okay, we all know that keywords and phrases are never going to comprise your brand messaging (I hope!) or your entire content (I hope!), though if they’re particular enough, some of them may creep into your brand vocabulary.

But knowing what people are searching for, and how your product or service meets that need, can help you communicate more clearly—and more quickly—with those users.

It can tie your brand closely to the user’s need from the outset.

Search term: washing woollens

It can present your unique offering as the precise solution to a generic problem—at a glance.

Search term: logo design in Melbourne

SEO isn’t just about long-form text and sales speak. It’s about making a page answer the user’s questions clearly and efficiently—from the opening phrase (whether that’s your IA or page headline) to the “Buy [keyword] now” button.

It’s about playing with content elements to tell new arrivals to your site that they’re in the right place. Content elements such as:

• headings and subheadings
• links
• calls to action
• case studies and testimonial blurbs
• and, of course, body content.

If you’re the type who’s happy to keyword-stuff your copy because you don’t think anyone will read it, then do us all a favor: just delete it.

Instead, write something that’s useful for all prospective customers—including those coming through search who don’t know where they’ve ended up.

How well does your website content meet this goal? Do you think SEO can help you communicate with prospective customers and users? Let us know your position on SEO in the comments.

In the first article in this series, I looked at the reasons to use Fabric.js, at its object model and object hierarchy, and at different kinds of entities available in Fabric—simple shapes, images, and complex paths. I also described how to perform simple operations with Fabric objects on a canvas. Now that most of the basics are out of the way, let’s get down to the fun stuff.

Animation

No respectable canvas library goes without an animation facility, and Fabric is no exception. Given Fabric’s powerful object model and graphical capabilities, it would be a shame not to have animation helpers built in.

Remember how easy it is to change the property of any object? You just call the set method, passing the corresponding values:

        rect.set('angle', 45);

Animating an object is just as easy. Every Fabric object has an animate method that, well… animates that object.

        rect.animate('angle', 45, {
	  onChange: canvas.renderAll.bind(canvas)
	});

The first argument is the property to animate, and the second argument is the ending value of the animation. If a rectangle has a -15° angle, and you pass 45 in the second argument, the rectangle is animated from -15° to 45°. The third argument is an optional object specifying finer details of animation, such as duration, callbacks, easing, and so on. I’ll show examples of these shortly.

One convenient feature of the animate method is that it supports relative values. For example, if you want to animate an object’s left property by 100px, you can do it like this:

        rect.animate('left', '+100', { onChange: canvas.renderAll.bind(canvas) });

Similarly, rotating an object 5 degrees counterclockwise can be accomplished like so:

        rect.animate('angle', '-5', { onChange: canvas.renderAll.bind(canvas) });

You might wonder why I always specify an onChange callback here. As I mentioned, the third argument is optional, but calling canvas.renderAll on each animation frame is what allows you to see actual animation. When you call the animate method, it only animates a property value over time, following a specific algorithm (for example, easing). So, rect.animate('angle', 45) changes an object’s angle but won’t rerender the canvas after each change of the angle. And, obviously, you need this rerendering to see the animation.

Remember that there’s an entire object model beneath that canvas surface. Objects have their own properties and relations, and a canvas is responsible only for projecting the objects’ existence to the outside world.

The reason animate doesn’t automatically rerender the canvas after each change is performance. After all, you can have hundreds or thousands of animating objects on a canvas, and it wouldn’t be wise if every one of them tried to rerender the screen. Most of the time, you probably need to explicitly specify canvas.renderAll as the onChange callback.

Other options you can pass to animate are the following:

• from Allows you to specify a starting value of the property being animated (if you don’t want to use the current value).
• duration Defaults to 500 ms. This option can be used to change the duration of an animation.
• onComplete The callback that’s invoked at the end of the animation.
• easing The easing function.

All of these options should be self-explanatory, except perhaps easing. Let’s take a closer look at it.

By default, animate uses a linear function for animation. If that’s not what you need, there’s a slew of easing options available in fabric.util.ease. For example, if you want to move an object to the right in a bouncy fashion, do this:

        rect.animate('left', 500, {
	  onChange: canvas.renderAll.bind(canvas),
	  duration: 1000,
	  easing: fabric.util.ease.easeOutBounce
	});

Notice that fabric.util.ease.easeOutBounce is an easing option. Other notable options include easeInCubic, easeOutCubic, easeInElastic, easeOutElastic, easeInBounce, and easeOutExpo.

Just to give you some idea of what becomes possible with animation in Fabric, you can animate an object’s angle to make it rotate; animate left or top properties to make it move; animate its width and height to make it shrink and grow; animate opacity to make it fade in and out; and so on.

Image filters

In the first article in this series, you saw how to work with images in Fabric. There’s the fabric.Image constructor that accepts an image element. There’s also the fabric.Image.fromURL method, which can create an image instance from a URL string. Any of these images can be thrown and rendered on a canvas just like any other object.

But as fun as it is to work with images, it’s even cooler to apply image filters to them. Fabric provides a few filters by default (you can view them here) and makes defining your own filters easy. Some of the built-in filters you might already be familiar with are a filter to remove a white background, the grayscale filter, or invert or brightness filters. Others might be a little less familiar, such as gradient transparency, sepia, or noise.

Every instance of fabric.Image has a filters property, which is a simple array of filters. Each of the filters in that array is an instance of one of the Fabric filters or an instance of a custom filter.

Here’s the code you use to create a grayscale image. Figure 1 shows the results.

        fabric.Image.fromURL('pug.jpg', function(img) {
	 // add filter
	  img.filters.push(new fabric.Image.filters.Grayscale());
	  // apply filters and re-render canvas when done
	  img.applyFilters(canvas.renderAll.bind(canvas));
	  // add image onto canvas
	  canvas.add(img);
	});

Figure 1. Applying a Grayscale Image Filter

And here’s how to create a sepia version of an image, which results in the image effects shown in Figure 2.

        fabric.Image.fromURL('pug.jpg', function(img) {
	  img.filters.push(new fabric.Image.filters.Sepia());
	  img.applyFilters(canvas.renderAll.bind(canvas));
	  canvas.add(img);
	});

Figure 2. Applying a Sepia Image Filter

Because the filters property is a simple array, you can perform any operation you want with it in the usual way—remove a filter (via pop, splice, or shift), add a filter (via push, splice, unshift), or even combine multiple filters. Any filters present in the filters array will be applied one by one when you call applyFilters.

Here’s how you can create an image that’s both sepia and bright. Figure 3 shows the results.

        fabric.Image.fromURL('pug.jpg', function(img) {
	  img.filters.push(
	    new fabric.Image.filters.Sepia(),
	    new fabric.Image.filters.Brightness({ brightness: 100 }));
	  img.applyFilters(canvas.renderAll.bind(canvas));
	  canvas.add(img);
	});

Figure 3. Combining a Sepia and a Bright Image Filter

Notice that I also passed the { brightness: 100 } object to the brightness filter. That’s because some filters can be applied without any additional configuration (for example, grayscale, invert, sepia), and others provide finer control for their behavior. For the brightness filter, it’s the actual brightness level (0–255). For the noise filter, it’s the noise value (0–1000). For the remove white filter, it’s the threshold and distance values. And so on.

Now that you’re familiar with Fabric filters, it’s time to break out of the box and create your own. The template for creating a filter is pretty straightforward. You need to create a class and then define an applyTo method. Optionally, you might give the filter the toJSON method (support for JSON serialization) or the initialize method (support for optional parameters). Below is an example of the code, with the results shown in Figure 4.

        fabric.Image.filters.Redify = fabric.util.createClass({
	  type: 'Redify',
	  applyTo: function(canvasEl) {
	    var context = canvasEl.getContext('2d'),
	      imageData = context.getImageData(0, 0,
	        canvasEl.width, canvasEl.height),
	      data = imageData.data;
	    for (var i = 0, len = data.length; i < len; i += 4) {
	      data[i + 1] = 0;
	      data[i + 2] = 0;
	    }
	    context.putImageData(imageData, 0, 0);
	  }
	});
	fabric.Image.filters.Redify.fromObject = function(object) {
	  return new fabric.Image.filters.Redify(object);
	};

Figure 4. Applying a Custom Image Filter

Without delving too much into this code, the main action happens in a loop, where I replace the green (data[i+1]) and blue (data[i+2]) components of each pixel with 0, essentially removing them. The red component of standard RGB values stays untouched, essentially painting the entire image red. As you can see, the applyTo method is passed to the main canvas element representing the entire image. From there, you can iterate over its pixels (getImageData().data), modifying them in any way you want.

Colors

Whether you’re more comfortable working with hex, RGB, or RGBA colors, Fabric provides a solid color foundation to help you express yourself most naturally. Here are some of the ways in which you can define a color in Fabric:

        new fabric.Color('#f55');
	new fabric.Color('#123123');
	new fabric.Color('356735');
	new fabric.Color('rgb(100,0,100)');
	new fabric.Color('rgba(10, 20, 30, 0.5)');

Conversion is straightforward as well. The toHex() method converts color instances to hex representation, toRgb() to RGB colors, and toRgba() to RGB with alpha channel.

        new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
	new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
	new fabric.Color('fff').toHex(); // "FFFFFF"

Conversion is not the only step you can take with colors. You can also overlay one color with another or turn it to a grayscale version.

        var redish = new fabric.Color('#f55');
	var greenish = new fabric.Color('#5f5');
	redish.overlayWith(greenish).toHex(); // "AAAA55"
	redish.toGrayscale().toHex(); // "A1A1A1"

Gradients

An even more expressive way to work with colors is via gradients. Gradients allow you to blend one color with another, creating some stunning graphical effects.

Fabric supports gradients through the setGradientFill method, which is defined on all objects. Calling setGradientFill is just like setting the fill value of an object, except that you fill the object with a gradient rather than a single color. Below is some sample code, with the visual effect shown in Figure 5.

        var circle = new fabric.Circle({
	  left: 100,
	  top: 100,
	  radius: 50
	});
	circle.setGradientFill({
	  x1: 0,
	  y1: 0,
	  x2: 0,
	  y2: circle.height,
	  colorStops: {
	  0: '#000',
	  1: '#fff'
	}
	});

Figure 5. Applying a Gradient Fill to an Object

In this example, I create a circle at location 100,100, with a 50px radius. I then set its fill to a gradient from white to black that spans the entire height of that circle.

The argument passed to a method is an options object, which expects two coordinate pairs (x1, y1 and x2, y2), as well as a colorStops object. Coordinates specify where a gradient starts and where it ends. The colorStops object specifies which colors a gradient is made of. You can define as many color stops as you want, as long as they range from 0 to 1 (for example, 0, 0.1, 0.3, 0.5, 0.75, 1, and so on). Zero (0) represents the beginning of a gradient, and 1 represents its end.

Here’s code that creates a left-to-right, red-blue gradient. Figure 6 shows the results.

        circle.setGradientFill({
	  x1: 0,
	  y1: circle.height / 2,
	  x2: circle.width,
	  y2: circle.height / 2,
	  colorStops: {
	    0: "red",
	    1: "blue"
	  }
	});

Figure 6. A Gradient Created Using Color Stops

The code below shows a five-stop rainbow gradient, with colors spanning even 20 percent intervals. Figure 7 shows the results.

        circle.setGradientFill({
	  x1: 0,
	  y1: circle.height / 2,
	  x2: circle.width,
	  y2: circle.height / 2,
	  colorStops: {
	  0: "red",
	    0.2: "orange",
	    0.4: "yellow",
	    0.6: "green",
	    0.8: "blue",
	    1: "purple"
	}
	});

Figure 7. A Rainbow Gradient

Which cool versions can you come up with?

Text

What if you want to display not only images and vector shapes on a canvas but also text? Fabric has you covered through fabric.Text objects.

There are two reasons for providing text abstraction in Fabric. First, it allows you to work with text in an object-oriented fashion. Native canvas methods—as usual—only allow you to fill or stroke text on a very low level. By instantiating fabric.Text instances, you can work with text just like you work with any other Fabric object—move it, scale it, change its properties, and so on.

The second reason is to provide much richer functionality than what the canvas element gives us. Some of the Fabric additions include:

Multiline support Native text methods, unfortunately, simply ignore new lines.
Text alignment Left, center, and right. Useful when working with multiple lines of text.
Text background Background also respects text alignment.
Text decoration Underline, overline, and strikethrough.
Line height  Useful when working with multiple lines of text.

Here’s a “hello world” example:

        var text = new fabric.Text('hello world', { left: 100, top: 100 });
	  canvas.add(text);
	});

That’s right! Displaying text on a canvas is as simple as adding an instance of fabric.Text at a specified location. As you can see, the only required parameter is the actual text string. The second argument is the usual options object, which can have any of the usual properties, such as left, top, fill, opacity, and so on.

But, of course, text objects also have their own text-related properties. Let’s look at some of them.

fontFamily

Set as Times New Roman by default, the fontFamily property allows you to change the font family used to render a text object. Changing the property immediately renders text in the new font. Figure 8 shows the effects created by using the following code.

        var comicSansText = new fabric.Text("I'm in Comic Sans", {
	  fontFamily: 'Comic Sans'
	});

Figure 8. A Change to the fontFamily Property

fontSize

Font size controls the size of rendered text. Note that unlike with other objects in Fabric, you can’t change a text object’s width and height properties directly. Instead, you need to change the fontSize value to make text objects larger, as you can see in Figure 9. (Either that, or you can use scaleX/scaleY properties.)

        var text40 = new fabric.Text("I'm at fontSize 40", {
	  fontSize: 40
	});
	var text20 = new fabric.Text("I'm at fontSize 20", {
	  fontSize: 20
	});

Figure 9. Controlling Font Size

fontWeight

Font weight lets you make text look thicker or thinner. Just as in CSS, you can use keywords (such as normal or bold—see Figure 10 for an example) or numbers (100, 200, 400, 600, 800). Whether you can use certain weights depends on the availability of that weight for a chosen font. If you’re using a remote font, you need to be sure you provide both normal and bold (as well as any other required weight) font definitions.

        var normalText = new fabric.Text("I'm a normal text", {
	  fontWeight: 'normal'
	});
	var boldText = new fabric.Text("I'm at bold text", {
	  fontWeight: 'bold'
	});

Figure 10. Font Weight Can Be Controlled by Keywords or Numerical Values

textDecoration

You use text decoration to add underline, overline, or strikethrough to text. Again, this is similar to CSS, but Fabric goes a little further and allows you to use any combination of these decorations together. So, you can have text that’s both underlined and overlined, underlined with strikethrough, and so on, as you can see in Figure 11.

        var underlineText = new fabric.Text("I'm underlined text", {
	  textDecoration: 'underline'
	});
	var strokeThroughText = new fabric.Text("I'm stroke-through text", {
	  textDecoration: 'line-through'
	});
	var overlineText = new fabric.Text("I'm overlined text", {
	  textDecoration: 'overline'
	});

Figure 11. Examples of text decorations

textShadow

Text shadows consist of four components: color, horizontal offset, vertical offset, and blur size. These effects might be very familiar if you’ve worked with shadows in CSS. Lots of combinations are possible (see Figure 12) by changing these values.

        var shadowText1 = new fabric.Text("I'm a text with shadow", {
	  textShadow: 'rgba(0,0,0,0.3) 5px 5px 5px'
	});
	var shadowText2 = new fabric.Text("And another shadow", {
	  textShadow: 'rgba(0,0,0,0.2) 0 0 5px'
	});
	var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
	  textShadow: 'green -5px -5px 3px'
	});

Figure 12. Examples of Text Shadows

fontStyle

A font style can be one of two values: normal or italic. This is similar to the CSS property of the same name. The following code shows some examples of using fontStyle, and Figure 13 shows the results.

        var italicText = new fabric.Text("A very fancy italic text", {
	  fontStyle: 'italic',
	  fontFamily: 'Delicious'
	});
	var anotherItalicText = new fabric.Text("another italic text", {
	  fontStyle: 'italic',
	  fontFamily: 'Hoefler Text'
	});

Figure 13. Examples of Italic Font Styles

strokeStyle and strokeWidth

By combining strokeStyle (color of the stroke) and strokeWidth (its width), you can achieve some interesting text effects, as shown in Figure 14. Here are a couple of code examples:

        var textWithStroke = new fabric.Text("Text with a stroke", {
	  strokeStyle: '#ff1318',
	  strokeWidth: 1
	});
	var loremIpsumDolor = new fabric.Text("Lorem ipsum dolor", {
	  fontFamily: 'Impact',
	  strokeStyle: '#c3bfbf',
	  strokeWidth: 3
	});

Figure 14. Text Effects Using strokeStyle and strokeWidth

textAlign

Text alignment is useful when you’re working with a multiline text object. With a one-line text object, the width of the bounding box always matches that line’s width, so there’s nothing to align.

Allowed values for textAlign are left, center, and right. Figure 15 shows right-aligned text.

        var text = 'this is\na multiline\ntext\naligned right!';
	var alignedRightText = new fabric.Text(text, {
	  textAlign: 'right'
	});

Figure 15. Right-Aligned Text

lineHeight

Another property that might be familiar from CSS is lineHeight. It allows you to change vertical spacing between text lines in multiline text. In the following example, the first chunk of text has lineHeight set to 3, and the second one to 1. The results you see are shown in Figure 16.

        var lineHeight3 = new fabric.Text('Lorem ipsum ...', {
	  lineHeight: 3
	});
	var lineHeight1 = new fabric.Text('Lorem ipsum ...', {
	  lineHeight: 1
	});

Figure 16. Examples of Line Height

backgroundColor

Finally, backgroundColor is what allows you to give text a background. Note that a background fills only the space occupied by text characters, not the entire bounding box, as you can see in Figure 17. This means that text alignment changes the way the text background is rendered—and so does line height, because background respects vertical spacing between lines created by lineHeight.

        var text = 'this is\na multiline\ntext\nwith\ncustom lineheight\n&background';
	var textWithBackground = new fabric.Text(text, {
	  backgroundColor: 'rgb(0,200,0)'
	});

Figure 17. Text Background Effects

Events

The event-driven architecture is the basis for some amazing power and flexibility within a framework. Fabric is no exception, and it provides an extensive event system, starting from low-level mouse events to high-level object ones.

These events allow you to tap into different moments of various actions happening on a canvas. Do you want to know when the mouse was pressed? Just observe the mouse:down event. How about when an object was added to a canvas? In this case, object:added is there for you. And what about when the entire canvas is rerendered? Just use after:render.

The event API is very simple and resembles that of jQuery, Underscore.js, or other popular JS libraries. There’s an on method to initialize the event listener, and an off method to remove it.

Here’s an example:

        var canvas = new fabric.Canvas('...');
	canvas.on('mouse:down', function(options) {
	  console.log(options.e.clientX, options.e.clientY);
	});

In this code, I’m adding the mouse:down event listener onto the canvas and giving it an event handler that will log coordinates of where the event originated. In other words, the handler will log where exactly on the canvas the mouse was pressed. The event handler receives an options object, which has two properties: e, which is the original event, and target, which is a clicked object on the canvas, if any. The event is present at all times, but the target exists only if a user actually does click an object on the canvas. Also, the target is passed to handlers of events only where it makes sense—for example, for mouse:down but not for after:render (which denotes that the entire canvas was redrawn).

        canvas.on('mouse:down', function(options) {
	  if (options.target) {
	    console.log('an object was clicked! ', options.target.type);
	  }
	});

This example will log “an object was clicked!” if you click an object. It will also add the type of object clicked.

Some of the other mouse-level events available in Fabric are mouse:move and mouse:up. Generic events include after:render, and there are also selection-related events: before:selection:created, selection:created, selection:cleared. And finally, object events include object:modified, object:selected, object:moving, object:scaling, object:rotating, and object:added.

Events like object:moving (or object:scaling) are fired continuously every time an object is moved (or scaled) even by a pixel. On the other hand, events like object:modified or selection:created are fired only at the end of the action (object modification or selection creation).

Note how events are attached right onto the canvas (canvas.on('mouse:down', ...)). As you can imagine, this means that events are all scoped to canvas instances. If you have multiple canvases on a page, you can attach different event listeners to each of them. They’re all independent and respect only events that are assigned to them.

For convenience, Fabric takes the event system even further and allows you to attach listeners directly to canvas objects. Take a look at this code:

        var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
	rect.on('selected', function() {
	  console.log('selected a rectangle');
	});
	var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
	circle.on('selected', function() {
	  console.log('selected a circle');
	});

Here I’m attaching event listeners directly to rectangle and circle instances. Instead of object:selected, I’m using the selected event. Similarly, I could have used the modified event (object:modified when attaching to the canvas), the rotating event (object:rotating when attaching to the canvas), and so on.

Check this events demo for a more extensive exploration of Fabric’s event system.

In the next article, I’ll move on to more advanced features: groups, serialization (and deserialization) and classes.

This article was originally published at http://msdn.microsoft.com/en-us/magazine/jj856929.aspx and is reproduced here with permission.

What do you actually know about PHP…? Why not test your knowledge by answering the questions below (you can find the answers at http://quizpoint.com/)?

1. What was the original definition of the acronym PHP?

2. PHP is a loosely typed language. What does this mean?

3. What are magic quotes?

4. Why might you use “htmlspecialchars($name, ENT_QUOTES, ‘UTF-8′)”?

5. What does the following code output?

<?php
$var1 = “Hi”;
$var2 = 3;
$var2 = $var1;
$var1 = “Bye”;
echo $var2;
?>

No matter what you scored, we’re confident that our experts can shed some light on your burning PHP questions. Make sure you join our free Talk Object-Oriented PHP with the Experts session at 7am BST this Thursday April 11th.

Our expert is Lorna Mitchell – tutor of the Learnable course Object-oriented PHP and co-author of PHP Master: Write Cutting-edge Code

The session is a 1 hour text based chat session where you are free to ask any questions that you may have. A full transcript of the session will be posted up on SitePoint later in the day in case you can’t make it.

You can find more info on the session in this forum post or find out what time the session will take place in your part of the world here.

A link to the chatroom will be posted in the above forum post on the day, as well as via our Twitter and Facebook pages.

Why do avatar uploads restrict us on file size? You know, “Please select an image (maximum 50 KB).” And why haven’t photo manipulation Web apps come to fruition, since canvas has been around for a while?

The answer to both these questions comes down to performance. Until now we’ve needed a slow plug-in or a route via a server to create and modify files in the browser. But for Internet Explorer 10, Firefox and Chrome users, developers have in their arsenal the awesome File API to make these operations possible natively in the browser.

The File API is a new JavaScript API that lets you read and write binary data objects that represent files in Web applications. In a nutshell, you can read user-selected files into Web apps and download new data objects as files from Web apps. Let’s take a deeper look.

Breaking Down the File API

The File API (as defined by the W3C) is not one type but a collection of typed objects, functions and methods.

FileList

FileList is a typed object that exists in numerous places. First, as a property on a form input element whose type is “file”. Second, as part of the event dispatched on a drop file event or the Clipboard event (as a result of copying and pasting).

For example, let’s say you have a form input control such as this:

<input type=file onchange="console.log(this.files.length)" multiple />

Whenever the user clicks the form input and selects a file, this action dispatches the onchange event handler, and the FileList object (located at this.files relative to the input element) has some new entries on it. In this example, the number of files the user has selected is printed to the browser console.

Although the FileList object behaves similarly to a native Array—in that you can iterate through its contents as you can with an Array—a FileList contains only immutable instances of File objects (described next).

File

The File object represents an individual file of the FileList. The File object contains a hash of read-only metadata about the file, including name, last modification date, size and type. It is also used as a reference and can be passed to the FileReader to read its content.

Blob (Binary Large Object)

The Blob interface exposes the raw binary data of a file. Remote data can be served as a blob object via XHRRequest—if xhr.responseType is set to “blob”. The new blob object is an instance of the Blob API and includes native methods such as blob.slice(i,i+n), which can be used to slice a big blob object into smaller blob objects. (I’m using the phrase “Blob interface” when talking about the JavaScript object type, and “blob object” to refer to a single instance of the Blob interface.)

In addition, with the Blob interface constructor, tiny blob objects can be merged back together again with this interface.

new Blob([blob, blob,...])

You’ll find an example in the BlobBuilder demo, which loads a single MP3 file and then breaks it into different audio files (tracks) that are each applied to their own <audio> tag for playback. In the demo, the user can reconstruct the MP3 in another order by merging the tracks, and even download the new blob object as an MP3.

Note: The W3C has deprecated the BlobBuilder in favor of Blob. Both produce the same result but in different ways. Also, WebKit’s BlobBuilder varies between Internet Explorer and Firefox, so it’s best to feature-detect for Blob first.

FileReader

The FileReader interface takes a File or Blob object and reads its content —File or Blob objects are just references to something stored on the local computer. FileReader can be optimized for reading files of various types—for example, Text(UTF-8), ArrayBuffer(for binary) or base64 data-uri. The following example shows how to get the text of a file using FileReader, given a blob object instance.

	var reader = new FileReader();
	reader.onload = function(e){
	       console.log(e.target.result);
	}
	reader.readAsText(blob);

Similarly, you can read other content using the read method that best suits the type of file: readAsArrayBuffer (great for working with large binary files) or readAsDataURL (great if you want to quickly embed content into a DOM object, like an image or an audio file).

The FileReader includes the several event listeners: onerror, onloadstart, onabort and onprogress (which is useful for creating a progress bar for large files and for catching problems).

URI Schemes

URI Schemes are URIs representing objects in the document. A resource can be a File or a Blob, and its corresponding URL is known as an Object URL. Given a Blob or a File reference, you can create an Object URL by using createObjectURL. For example:

var objecturl =  window.URL.createObjectURL(blob)

returns a URL that references the resource object, something like “blob:http%3A//test.com/666e6730-f45c-47c1-8012-ccc706f17191″.

This string can be placed anywhere a typical URI can be placed—for example, on the src of an image tag,  if the object URI is of an image that is. The object resource lasts as long as the document, so refresh the page, and it’s gone.

FileSaver

The FileSaver interface exposes methods to write blobs to the user’s Downloads directory. The implementation is rather neat and straightforward:

window.saveAs(blob, "filename")

However, none of the browsers currently have this. Only Internet Explorer 10 supports a simple alternative: navigator.msSaveOrOpenBlob as well as navigator.msSaveBlob. But as you’ll see, there are shim’s that can create a similar functionality, albeit without a slick user experience.

So that’s all rather low-level nuts and bolts about the File API, and it’s a lot to digest as an abstract concept. But don’t worry. Coming up is a cooking class for how to turn those ingredients into something you can chew on.

Join the Party and Build an Example

I thought I’d dress up for the party (Figure 1) and create my own little photo manipulation tool at http://adodson.com/graffiti. Check it out. Select an image from your file system, scribble over the screen, and then download your masterpiece—all using the File APIs (plus a few canvas methods and pointer events).

Figure 1. The Graffiti File API App

Implementing the Graffiti App

Even with the garish picture, this app has a rather simple premise:

• Select an image as a backdrop by using File + FileList and FileReader.
• Load the image into the canvas tag and manipulate the image with the HTML5 Canvas API.
• Download the new image using Blob (or BlobBuilder), saveAs (or saveBlob) or an anchor tag hack with Object URLs.

Step 1: Selecting a File

There is more than one way a user can select an image for this app.

• Pick a file using form input
• Drag and drop a file
• Copy and paste a file from the Clipboard

Each of these approaches wires up its listeners to trigger a custom function, named readFile(), which uses an instance of FileReader to extract the file data and add the user image to the canvas. Here is the function’s code.

	// readFile, loads File Objects (which are also images) into our Canvas
	// @param File Object
	function readFile(file){
	  // Create a new FileReader Object
	  var reader = new FileReader();
	  // Set an onload handler because we load files into it asynchronously
	  reader.onload = function(e){
	    // The response contains the Data-Uri, which we can then load into the canvas
	    applyDataUrlToCanvas( reader.result );
	  };
	  reader.reaAsDataURL(file);
	}

Here, readFile takes the File reference (shown later) and creates a new instance of the FileReader object. This function reads the data as a DataURL, but it could also read the data as binary or even as an ArrayBuffer.

To wire up the function, you use a File reference as a parameter by taking one of the approaches mentioned earlier.

Pick a File Using Form Input

The FileAPI doesn’t (alas) currently define a native method to trigger file selection. But the old trusted form input with type=file does the job quite well:

<input type="file" name="picture" accept="image/png, image/jpeg"/>

As ungainly as the form input element is, it does have some new additional attributes that are perfect for this app.

The accept attribute hints at which file types are acceptable. In this example, that’s PNGs and JPEGs. It’s left to the device to handle this appropriately (Windows, for instance, opens the users Pictures library by default and shows only files of these types).

The multiple tag lets a user select one or more files in one step.

Next, you need to bind event listeners to the change event of the form input so that a user’s selection automatically triggers readFile:

	document.querySelector('input[name=picture]').onchange = function(e){
	     readFile(e.target.files[0]);
	}

This code simply takes the first user-selected file (regardless of whether the multiple attribute was used) and then calls readFile, passing in the file as the first parameter.

Input a little style

The form input box shown here is not really in keeping with my aesthetics, or probably yours. So, position it absolutely over another element of your choice with an opacity of zero (but be prepared for it to have a fixed width, which may interfere with other elements). Or a little more complicated: dispatch a custom click event on an input box positioned off the screen. Read more on this discussion here.

Drag and Drop Files

Files can be dragged in from File Explorer and use a similar event model to the form input hack. The “drop” event occurs when a user releases the image over the canvas. The event contains a property called dataTransfer, which has a child property named files. In the following code, e.dataTransfer.files is an instance of a FileList (as mentioned before, the FileList contains a list of File references), and the first File item is the parameter for readFile. This is supported in Webkit, Firefox and Internet Explorer 10. Here’s an example:

	// stop FireFox from replacing the whole page with the file.
	canvas.ondragover = function () { return false; };
	// Add drop handler
	canvas.ondrop = function (e) {
	  e.preventDefault(); e = e || window.event;
	  var files = e.dataTransfer.files;
	  if(files){
	    readFile(files[0]);
	  }
	};

Copy and Paste File Data

Clipboard data can be accessed when the user pastes content into the document. This data can be a mix of text and images and not a FileList with only File references, as in the form input control or in dragging files.

In the code below, the Clipboard data is traversed and entries corresponding to the type and kind properties, which are  “*/image” and “file” respectively, are filtered out. The item’s File instance is obtained using getAsFile(), which is passed to readFile.

	// paste Clipboard data
	// Well not all of it just the images.
	document.onpaste = function(e){
	  e.preventDefault();
	  if(e.clipboardData&&e.clipboardData.items){
	    // pasted image
	    for(var i=0, items = e.clipboardData.items;i<items.length;i++){
	      if( items[i].kind==='file' && items[i].type.match(/^image/) ){
	        readFile(items[i].getAsFile());
	        break;
	      }
	    }
	  }
	  return false;
	};

That concludes the first step. I’ve shown three approaches to obtaining a File reference and loading file data into the document. I’d love to know if there are other ways, so please send comments.

Step 2: Load the Image onto the Canvas

The readFile function in step 1 hands over a generated data-url to another custom function, applyDataUrlToCanvas. This function draws a selected image on the canvas. Here’s how it works:

• Find the width and height of the image.
• Find the orientation of the image.
• Draw the best fit of the image on the canvas.

Find the Width and Height

Using the DOM Image function, you can easily determine the dimensions of any image. It’s a handy technique and goes something like this:

	var img =  new Image();
	img.onload = function(){
	  // img.width
	  // img.height
	}
	img.src = dataURL;

Find the Orientation

Unfortunately, there’s a gotcha with the width and height, and it’s a big one: the picture could have been taken in portrait mode and saved in landscape, or the image could have been taken upside down.

Some cameras, instead of saving an image in the correct orientation, provide an Orientation property within the image’s EXIF data. This can be read from the binary data of the image.

Converting the data-url to a binary string is easy:

	var base64 = dataUrl.replace(/^.*?,/,'');
	var binary = atob(base64);

And fortunately, there’s an open source EXIF client-side library, written by Jacob Seidelin, which will return the EXIF data as an Object. Yes, awesome!

	<script src="http://www.nihilogic.dk/labs/exif/exif.js"></script>
	<script src="http://www.nihilogic.dk/labs/binaryajax/binaryajax.js"></script>
	<script>
	var exif = EXIF.readFromBinaryFile(new BinaryFile(binary));
	//exif.Orientation
	</script>

The Orientation property is an integer in the range 1–8 corresponding to four rotations and four flips (rather redundant).

Draw the Image to Canvas

Having discovered the Orientation value, you can rotate and draw on the canvas. If you want to see my algorithm, just dig into the source code, which you can find at http://adodson.com/graffiti/ and https://github.com/MrSwitch/graffiti.

Step 3: Download the Image

The last step is to download the modified image. Within the FileAPI’s repertoire, you can use the Blob interface for creating files in the client. Wrap that up with the new msSaveBlob in Internet Explorer 10, or the download attribute hack (coming up) in other modern browsers, and together they enable you to download files in the client.

Try it yourself in the demo. Click on the Download button.

The demo uses the canvas.toBlob method in Internet Explorer 10 to get the file reference of the image that is currently drawn within the canvas tag. For Chrome and FireFox, the toBlob shim works great.

	canvas.toBlob(function( file ){
	  // Create a blob file,
	 
	  // then download with the FileSaver
	}

Make a copy of a Blob Object instance

We should be able to skip this step, but because of a quirk in all the browsers, you can’t use the FileSave API directly from the Blob instance returned by canvas.toBlob. You need to copy it.

The BlobBuilder interface used for creating new Blob references is supported in Internet Explorer 10, Chrome and FireFox. But this interface has already been superseded by the Blob constructor, which has limited support right now.

First, shim away vendor prefixes of the BlobBuilder:

	// Shim the BlobBuilder with the vendor prefixes
	window.BlobBuilder || (window.BlobBuilder = window.MSBlobBuilder||window.MozBlobBuilder||window.WebKitBlobBuilder);

Next, future-proof your code and test for the Blob constructor. Otherwise, construct a BlobBuilder to build the blob. (It’s best to wrap the methods in a try-catch.) Blob is buggy in the current Chrome for Android browser. Here is the code.

	var blob;
	if('Blob' in window){
	  try{
	    // The new Blob interface
	    blob = new Blob([file],{ "type" : "image\/png"});
	  catch(e){}
	}
	if(!blob){
	  try{
	    // The deprecated BlobBuilder interface
	    var bb = new BlobBuilder();
	    bb.append( file );
	    blob = bb.getBlob("image\/png");
	  }
	  catch(e){}
	}

Downloading the Blob with FileSaver

The FileSaver API is also a standard yet to be adopted by any of the current crop of browsers. However, in the case of Internet Explorer 10, you can use the msSaveBlob function (which is awesome), and for Chrome and FireFox, you can at least future-proof them with vendor prefixes. So, the saveAs function needs some massive shimming:

window.saveAs || (window.saveAs == window.navigator.msSaveBlob || window.webkitSaveAs || window.mozSaveAs || window.msSaveAs /** || URL Download Hack **/ );

This fallback (described in full at https://gist.github.com/3552985)shims up the FileSaver interface using the Object URL for our new image. For browsers that support the download attribute on the anchor tag, the shim defines the href as the Object URL and then dispatches the click event to force it to download or otherwise open in a new tab. Oh, what tangled webs we weave.

Finally, given the blob and a file name, the saveAs method initiates the download:

	var name = 'Graffiti.png';
	if(window.saveAs){
	  // Move the builder object content to a blob and
	  window.saveAs(blob, name);
	}
	else{
	  // Fallover, open as DataURL
	  window.open(canvas.toDataURL());
	}

Here, if the saveAs shim is incompatible, the fallover will open a new tab with a base64 Data-URL. This works in Internet Explorer 9, but Internet Explorer 8 is limited to a DataURI’s length of 32 KB.

Wrapping Up

If you haven’t already played around with the File API, I strongly urge you to. The FileAPI opens up a lot of potential for making desktop-like apps for the browser. You might want a little more control over where you save files and even overwrite the existing file. But for now, security airs on the side of caution, so you’re unlikely to see features like these soon. The specs are still in flux, but what I’ve highlighted in this article has seen some huge investment by browser vendors and is unlikely to change much, if at all. Please don’t quote me though.

If you need to support older browsers, take a look at my dropfile.js shim for Internet Explorer, which shims the FileReader and creates a base64 Data-URI, as well as Downloadify for a Flash-based shim replacement to FileSaver.

Resources

• “Save/download data generated in JavaScript”
• File API drafts at W3C
• “New Blob Constructor in IE10”
• “Creating Files Through BlobBuilder”
• “Working with files in JavaScript, Part 1: The Basics”

This article was originally published at http://msdn.microsoft.com/en-us/magazine/jj835793.aspx and is reproduced here with permission.

In this article, I’ll introduce you to Fabric.js—a powerful JavaScript library that makes working with the HTML5 canvas element a breeze. Fabric provides a missing object model for canvas, as well as an SVG parser, a layer of interactivity, and a whole suite of other indispensable tools. It is a fully open-source project, licensed under MIT, with many contributions over the years.

I started developing with Fabric three years ago after discovering the pains of working with the native canvas API. I was creating an interactive design editor for printio.ru—my startup that allows users to design their own apparel. The kind of interactivity I wanted existed only in Flash apps in those days. Now, very few libraries come close to what is possible with Fabric, so let’s take a closer look.

Why Fabric?

Canvas allows you to create some absolutely amazing graphics on the Web these days, but the API it provides is disappointingly low level. It’s one thing if you simply want to draw a few basic shapes on a canvas and forget about them. If you need any kind of interaction, to change a picture at any point, or to draw more complex shapes, the situation changes dramatically. Fabric aims to solve this problem.

Native canvas methods allow you only to fire off simple graphic commands, blindly modifying the entire canvas bitmap. Do you want to draw a rectangle? Use fillRect(left, top, width, height). Want to draw a line? Use a combination of moveTo(left, top) and lineTo(x, y). It’s as if you’re painting a canvas with a brush, layering more and more oil or acrylic on top, with very little control.

Instead of operating at such a low level, Fabric provides a simple but powerful object model on top of native methods. It takes care of canvas state and rendering and lets you work with objects directly.

Here’s a simple example that demonstrates this difference. Let’s say you want to draw a red rectangle somewhere on the canvas. Here’s how you would do it with the native canvas API:

// reference canvas element (with id="c")
var canvasEl = document.getElementById('c');
 
// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvasEl.getContext('2d');
 
// set fill color of context
ctx.fillStyle = 'red';
 
// create rectangle at a 100,100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);

The code below shows how you do the same thing with Fabric. The result of both approaches is shown in Figure 1.

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');
 
// create a rectangle object
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
});
 
// "add" rectangle onto canvas
canvas.add(rect);

Figure 1 Red Rectangle Drawn with Fabric or Native Canvas Methods

At this point, there’s almost no difference in the size of the rectangle—the two examples are pretty similar. However, you can already see how different the approach to working with canvas is. With native methods, you operate on context—an object representing the entire canvas bitmap. In Fabric, you operate on objects—you instantiate them, change their properties, and add them to the canvas. You can see that these objects are first-class citizens in Fabric land.

Rendering a plain red rectangle is too simple. You can at least have some fun with it and perhaps the shape slightly. Let’s try 45 degrees, first using native canvas methods:

var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
 
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);

And here’s how you do it in Fabric. (See Figure 2 for the results).

var canvas = new fabric.Canvas('c');
// create a rectangle with angle=45
var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20,
    angle: 45
});
 
canvas.add(rect);

Figure 2 Red, Rotated Rectangle Drawn with Fabric or Native Canvas Methods

What’s happening here? All you have to do in Fabric is change the object’s angle value to 45. With native methods, however, more work is required. Remember that you can’t operate on objects. Instead, you have to tweak the

positioning and angle of the entire canvas bitmap (ctx.translate, ctx.rotate) to suit your needs. You then draw the rectangle again, remembering to offset the bitmap properly (-10, -10) so that it’s still rendered at the point of 100,100. As a bonus, you have to translate degrees to radians when rotating the canvas bitmap.

I’m sure you’re starting to see why Fabric exists and how much low-level boilerplate it hides.

Let’s take a look at another example: keeping track of canvas state.

What if at some point, you want to move the rectangle to a slightly different location on the canvas? How can you do this without being able to operate on objects? Would you just call another fillRect on a canvas bitmap? Not quite. Calling another fillRect command actually draws a rectangle on top of whatever is already drawn on the canvas. To move the rectangle, you need to first erase any previously drawn content and then draw the rectangle at a new location (see Figure 3).

var canvasEl = document.getElementById('c');
...
ctx.strokRect(100, 100, 20, 20);
...
// erase entire canvas area
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.fillRect(20, 50, 20, 20);

Here’s how you would accomplish this with Fabric:

var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
...
rect.set({ left: 20, top: 50 });
canvas.renderAll();

Figure 3 Red Rectangle Drawn at a New Location

Notice a very important difference: with Fabric, you don’t need to erase the content before attempting to modify any content. You still work with objects simply by changing their properties and then render the canvas again to get a fresh picture.

Objects

You saw in the last section how to work with rectangles by instantiating the fabric.Rect constructor. Fabric, of course, covers the other basic shapes as well—circles, triangles, ellipses, and so on. The shapes are exposed under the fabric “namespace” as fabric.Circle, fabric.Triangle, fabric.Ellipse, and so on. Fabric provides seven basic shapes:

• fabric.Circle
• fabric.Ellipse
• fabric.Line
• fabric.Polygon
• fabric.Polyline
• fabric.Rect
• fabric.Triangle

To draw a circle, just create a circle object and add it to canvas.

var circle = new fabric.Circle({
    radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
    width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
 
canvas.add(circle, triangle);

You do the same thing with any other basic shape. Figure 4 shows an example of a green circle drawn at location 100,100 and a blue triangle at 50,50.

Figure 4 A Blue Triangle and a Green Circle Drawn with Fabric

Manipulating objects

Creating graphical objects—rectangles, circles, or something else—is only the beginning. At some point, you will probably need to modify your objects. Perhaps a certain action will trigger a change of state or play an animation of some sort. Or you might want to change object properties (such as color, opacity, size, position) on certain mouse interactions.

Fabric takes care of canvas rendering and state management for you. We need only to modify the objects themselves. The example earlier demonstrated the set method and how calling set({ left: 20, top: 50 }) moved the object from its previous location. In a similar fashion, you can change any other property of an object.

As you would expect, Fabric objects have properties related to positioning (left, top), dimensions (width, height), rendering (fill, opacity, stroke, strokeWidth), scaling and rotation (scaleX, scaleY, angle), and flipping (flipX, flipY).Yes, creating flipped object in Fabric is as easy as setting the flip* property to true.

You can read any of these properties via a get method and set them via set. Here’s an example of how to change some of the red rectangle’s properties. Figure 5 shows the results.

var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
 
rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);

Figure 5 Red, Rotated, Stroked Rectangle Drawn with Fabric

First, the fill value is set to “red”. The next statement sets the strokeWidth and stroke values, giving the rectangle a 5 px stroke of a pale green color. Finally, the code changes the angle and flipY properties. Notice how each of the three statements uses slightly different syntax.

This demonstrates that set is a universal method. You will probably use it quite often, and it’s meant to be as convenient as possible. What about getters? There’s a generic get method and also a number of specific ones. To read the width property of an object, you use get(‘width’) or getWidth(). To get the scaleX value, you would use get(‘scaleX’), getScaleX() and so on. There’s a method like getWidth or getScaleX for each of the “public” object properties (stroke, strokeWidth, angle, and so on).

You might have noticed that in the earlier examples, objects were created with the same configuration hash as the one we just used in the set method. You can “configure” an object at the time of creation or use the set method later:

var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });
// or functionally identical
var rect = new fabric.Rect();
rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

Default Options

At this point, you might wonder what happens when you create an object without passing any “configuration” object. Does it still have those properties?

Yes. When specific settings are omitted during creation, objects in Fabric always have a default set of properties. You can use the following code to see this for yourself:

var rect = new fabric.Rect(); // notice no options passed in
 
rect.getWidth(); // 0
rect.getHeight(); // 0
 
rect.getLeft(); // 0
rect.getTop(); // 0
 
rect.getFill(); // rgb(0,0,0)
rect.getStroke(); // null
 
rect.getOpacity(); // 1

This rectangle has a default set of properties. It’s positioned at 0,0, is black and fully opaque, and has no stroke and no dimensions (width and height are 0). Because no dimensions are given, you can’t see it on the canvas. Giving it any positive values for width and height would reveal a black rectangle at the top-left corner of the canvas, as shown in Figure 6.

Figure 6 How Default Rectangle Looks When Given Dimensions

Hierarchy and Inheritance

Fabric objects do not exist independently of each other. They form a very precise hierarchy. Most objects inherit from the root fabric.Object. The fabric.Object root object represents (more or less) a two-dimensional shape, positioned in a two-dimensional canvas plane. It’s an entity that has left/top and width/height properties, as well as a slew of other graphical characteristics. The properties listed for objects—fill, stroke, angle, opacity, flip*, and so on—are common to all Fabric objects that inherit from fabric.Object.

This inheritance allows you to define methods on fabric.Object and share them among all child “classes”. For example, if you want to have a getAngleInRadians method on all objects, you would simply create it on fabric.Object.prototype, as follows:

fabric.Object.prototype.getAngleInRadians = function() {
    return this.getAngle() / 180 * Math.PI;
};
 
var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...
 
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...
 
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true

As you can see, the method immediately becomes available on all instances.

Even though child “classes” inherit from fabric.Object, they often also define their own methods and properties. For example, fabric.Circle needs a radius property, and fabric.Image—which we’ll look at in a moment—needs getElement and setElement methods for accessing and setting the HTML <img> element from which an image instance originates.

Canvas

Now that you’ve learned about objects in some detail, let’s get back to canvas.

The first thing you see in all of the Fabric examples is the creation of a canvas object— new fabric.Canvas(‘…’). The fabric.Canvas object serves as a wrapper around the <canvas> element and is responsible for managing all the Fabric objects on that particular canvas. It takes an ID of an element and returns an instance of fabric.Canvas.

You can add objects to it, reference them from it, or remove them, as shown here:

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
 
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
 
canvas.remove(rect); // remove previously-added fabric.Rect

Managing objects is the main purpose of fabric.Canvas, but it also serves as a configuration host. Do you need to set the background color or image for an entire canvas, clip all contents to a certain area, set a different width and height, or specify whether a canvas is interactive or not? All these options (and others) can be set on fabric.Canvas, either at the time of creation or later.

var canvas = new fabric.Canvas('c', {
    backgroundColor: 'rgb(100,100,200)',
    selectionColor: 'blue',
    selectionLineWidth: 2
    // ...
});
 
// or
 
var canvas = new fabric.Canvas('c');
canvas.backgroundImage = 'http://...';
canvas.onFpsUpdate = function(){ /* ... */ };
// ...

Interactivity

One of the unique built-in features of Fabric is a layer of interactivity on top of the object model. The object model exists to allow programmatic access and manipulation of objects on the canvas, but on the outside—on a user level—there’s a way to manipulate those objects via the mouse (or via touch on touch devices). As soon as you initialize a canvas via the new fabric.Canvas(‘…’) call, it’s possible to select objects (see Figure 7), drag them around, scale or rotate them, and even group them (see Figure 8) to manipulate them in one chunk!

Figure 7 Red, Rotated Rectangle in Selected State (Controls Visible)

Figure 8 Rectangle and Circle Grouped (Controls Visible)

If you want to allow users to drag something on the canvas—let’s say an image—all you need to do is initialize the canvas and add an object to it. No additional configuration or setup is required.

To control this interactivity, you can use Fabric’s selection Boolean property on the canvas object in combination with the selectable Boolean property of individual objects:

var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable

But what if you don’t want an interactivity layer at all? If that’s the case, you can always replace fabric.Canvas with fabric.StaticCanvas. The syntax for initialization is absolutely the same:

var staticCanvas = new fabric.StaticCanvas('c');
 
staticCanvas.add(
    new fabric.Rect({
        width: 10, height: 20,
        left: 100, top: 100,
        fill: 'yellow',
        angle: 30
    }));

This creates a “lighter” version of canvas, without any event-handling logic. You still have the entire object model to work with—adding, removing or modifying objects, as well as changing any canvas configuration. All of this still works, it’s only event handling that’s gone.

Later in this article, when I go over the custom build option, you’ll see that if StaticCanvas is all you need, you can even create a lighter version of Fabric. This could be a nice option if you need something like non-interactive charts or non-interactive images with filters in your application.

Images

Adding rectangles and circles to a canvas is fun, but as you can imagine by now, Fabric also makes working with images very easy. Here’s how you instantiate the fabric.Image object and add it to a canvas, first in HTML and then in JavaScript:

HTML

<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">

JavaScript

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {
    left: 100,
    top: 100,
    angle: 30,
    opacity: 0.85
});
canvas.add(imgInstance);

Notice that you pass an image element to the fabric.Image constructor. This creates an instance of fabric.Image that looks just like the image from the document. Moreover, you immediately set left/top values to 100/100, angle to 30, and opacity to 0.85. Once an image is added to a canvas, it is rendered at location 100,100 at a 30-degree angle and is slightly transparent (see Figure 9). Not bad!

Figure 9 Slightly Transparent and Rotated Image, Rendered with Fabric

If you don’t really have an image in a document but only a URL for an image, you can use fabric.Image.fromURL:

fabric.Image.fromURL('my_image.png', function(oImg) {
    canvas.add(oImg);
});

Looks pretty straightforward, doesn’t it? Just call fabric.Image.fromURL, with a URL of an image, and give it a callback to invoke once the image is loaded and created. The callback function receives the already created fabric.Image object as its first argument. At that point, you can add it to your canvas or perhaps change it first and then add it, as shown here:

fabric.Image.fromURL('my_image.png', function(oImg) {
    // scale image down, and flip it, before adding it onto canvas
    oImg.scale(0.5).setFlipX(true);
    canvas.add(oImg);
});

Path and PathGroup

We’ve looked at simple shapes and images. What about more complex, richer shapes and content? Meet Path and PathGroup, the power couple.

Paths in Fabric represent an outline of a shape, which can be filled, stroked and modified in other ways. Paths consist of a series of commands that essentially mimic a pen going from one point to another. With the help of such commands as move, line, curve, and arc, Paths can form incredibly complex shapes. And with the help of groups of Paths (PathGroup), the possibilities open up even more. Paths in Fabric closely resemble SVG <path> elements. They use the same set of commands, can be created from <path> elements, and can be serialized into them. I’ll describe more about serialization and SVG parsing later, but for now it’s worth mentioning that you will probably only rarely create Path instances by hand. Instead, you’ll use Fabric’s built-in SVG parser. But to understand what Path objects are, let’s create a simple one by hand (see Figure 10 for the results):

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

Figure 10 Simple Path Rendered with Fabric

Here you instantiate the fabric.Path object and pass it a string of path instructions. It might look cryptic, but it’s actually easy to understand. M represents the move command and tells the invisible pen to move to point 0, 0. L stands for line and makes the pen draw a line to point 200, 100. Then, another L creates a line to 170, 200. Lastly, z forces the drawing pen to close the current path and finalize the shape.

Since fabric.Path is just like any other object in Fabric, you can also change some of its properties, or modify it even more, as shown here and in Figure 11:

...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);

Figure 11 A Simple, Modified Path

Out of curiosity, let’s take a look at a slightly more complex path syntax. You’ll see why creating paths by hand might not be the best idea:

...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));

Here, M still stands for the move command, so the pen starts its drawing journey at point 121.32, 0. Then there’s an L (line) command that brings the pen to 44.58, 0. So far so good. Now comes the C command, which stands for “cubic bezier.” This command makes the pen draw a bezier curve from the current point to 36.67, 0. It uses 29.5, 3.22 as a control point at the beginning of a line, and 24.31, 8.41 as the control point at the end of the line. This

whole operation is then followed by a dozen other cubic bezier commands, which finally create a nice-looking shape of an arrow, as shown in Figure 12.

Figure 12 Complex Path Rendered with Fabric

Chances are, you won’t work with such beasts directly. Instead, you can use something like the fabric.loadSVGFromString or fabric.loadSVGFromURL method to load an entire SVG file and let Fabric’s SVG parser do its job of walking over all SVG elements and creating corresponding Path objects.

In this context, while Fabric’s Path object usually represents a SVG <path> element, a collection of paths, often present in SVG documents, is represented as a PathGroup instance (fabric.PathGroup). PathGroup is nothing but a group of Path objects, and because fabric.PathGroup inherits from fabric.Object, it can be added to a canvas just like any other object and manipulated the same way.

Just like with Paths, you probably won’t be working with a PathGroup directly. But if you stumble on one after parsing a SVG document, you’ll know exactly what it is and what purpose it serves.

Wrapping Up For Now

I’ve only scratched the surface of what’s possible with Fabric. You can now easily create any of the simple shapes, complex shapes, or images; add them to a canvas and modify them any way you want—their positions, dimensions, angles, colors, strokes, opacity—you name it.

In the next article in this series, I’ll look at working with groups; animation; text; SVG parsing, rendering and serialization; events; image filters and more. Meanwhile, feel free to take a look at the annotated demos or benchmarks, join the discussion at Stack Overflow or go straight for the docs, wiki, and source. You can also learn more about HTML5 Canvas at the MSDN IE Developer Center, or check out Rey Bango’s An Introduction to the HTML 5 Canvas Element on Script Junkie.

Have fun experimenting with Fabric! I hope you enjoy the ride.

This article was originally published at http://msdn.microsoft.com/en-us/magazine/jj856929.aspx and is reproduced here with permission.

One of the techniques we talk about in Jump Start Responsive Web Design is called Selective Content Loading (SCL). This technique is really useful in situations where you want to load small pieces of data into an already loaded page in a structured way. When would this be useful?

• When you have serious bandwidth issues between your server and the end user’s device (for example, on a mobile connection that is moving on a poor network with lots of errors and having to deal with cell handoff).
• When your pages are largely the same structurally from page to page and simply reloading the content saves many requests.
• If you have chunked your content nicely and want to simply load in the next piece in the sequence (for example, infinite scrolling on a Twitter feed)

Some of these issues can be dealt with by good caching and using local storage and these should definitely be explored as good practices generally. However, even with smart asset caching you still require server round trips to retrieve a document, all the page HTML still has to be sent to the browser and then the browser still has to render the page.

If your page has only added a couple of additional bits of data (for example, a tweet) or is only changing a small amount of content (for example, the details for a product) then SCL may be a good option for you. This doesn’t work in every circumstance and it also causes a number of possible issues with URLs, browser history and what content gets spidered on a “page” by search engines (if this important to you).

Recapping our approach from Jump Start RWD, this is what we’re going to do conceptually:

• On the first page request we’ll load up all of the page content including the site navigation, content layout, CSS and JS files as normal.
• After the page has loaded we’ll override all of the links in our page to make them XHRs rather than a standard request for a document.
• We’ll then process the response (the XHR response will only be the internal page content in JSON rather than the entire page) and overwrite the content that was in the page.
• We can then use pushState() to modify our browser history (so the URL updates to something shareable and we can go backwards if needs be).

Here’s an example that should illustrate the point simply. The content has been truncated purposefully in order to keep this concise.

We’re going to set up a page that can load content about books without having to reload the entire page, just the pertinent content. We’ll also use pushState() from the History API to ensure that if the user wants to share or come back to the URL they’ll be able to do so.

To make things simple to express, we’re going to use jQuery for the DOM manipulation and a JavaScript templating library called Handlebars.js. If you haven’t checked out JavaScript templating options and what they can do, Handlebars is an excellent choice to get your feet wet.

The core of our solution relies on the fact that URLs can respond differently depending on whether they are an XHR or a normal HTTP request. If the server gets a normal request then the view will deliver the full HTTP response (containing all the document and then the JS, CSS etc). If the server gets an XHR, it will respond with JSON which only contains data about the book requested.

So, as an example, the standard HTTP response for the “Frankenstein” page looks like this:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
var original = null;
var backtostart = true;
 
  <script type="text/javascript">
      ($(document).ready(function() {
          var source = $("#story-template").html();
          var template = Handlebars.compile(source);
 
          var story_link_handler = (function(evt) {
              evt.preventDefault();
              $.get(this.href, function(data) {
                  $("#contentarea").html("");
                  $("#contentarea").html(template(data));
                  history.pushState({url:data.location}, data.title, data.location);
              }, "json");
          });
 
          $("ul#storylist li a").bind("click", story_link_handler);
 
          $(window).bind("popstate", function(evt) {
              if (event.state) {
                  url = event.state.url;
                  $.get(url, function(data) {
                      $("#contentarea").html("");
                      $("#contentarea").html(template(data));
                  }, "json");
               backtostart = false;
              } else {
               if (! backtostart) {
                  backtostart = true;
                      $("#contentarea").html("");
                      $("#contentarea").html(original);
               } else {
                 original = $("#contentarea").html();
                    backtostart = false;
               }
            }
          });
 
      }));
  </script>
</head>
<body>
  <ul id="storylist">
      <li><a href="mobydick">Moby Dick</a></li>
      <li><a href="gulliverstravels">Gulliver's Travels</a></li>
      <li><a href="frankenstein">Frankenstein</a></li>
  </ul>
  <div id="contentarea">
      <article id="story">
          <h1>Frankenstein</h1>
              <h2>Mary Shelley</h2>
              <p>Doctor creates artificial life</p>
          </article>
      </div>
<script type="text/javascript" src="handlebars.js"></script>
      <script id="story-template" type="text/x-handlebars-template">
      <article>
          <h1>{{title}}</h1>
          <h2>{{author}}</h2>
          <p>{{synopsis}}</p>
      </article>
      </script>
  </body>
</html>

NB you can download code used in this article in a zip file linked at the end of this article

However, the equivalent JSON response for an XHR will look like this instead:

{
  "location": "/frankenstein",
  "title": "Frankenstein",
  "author": "Mary Shelley",
  "synopsis": "Mad doctor creates artificial life"
}

All the code required to make the selective loading work is requested and loaded in the first request. After that, we only get the data and then load it into the template. Let’s take a look at how the code works.

  <script id="story-template" type="text/x-handlebars-template">
      <article>
          <h1>{{title}}</h1>
          <h2>{{author}}</h2>
          <p>{{synopsis}}</p>
      </article>
  </script>

NB you can download code used in this article in a zip file linked at the end of this article

Handlebars uses a script element to create a template for what an article looks like (this content won’t be rendered by the browser as it won’t take an action on its type). Variable locations are defined using {{variable}} syntax. You can do a lot more with Handlebars (conditionals, loops, block execution etc) that we aren’t using in this instance though. Note the ID for the script, we need this so we can pass it into the Handlebars template compiler.

In our document ready function, we grab the HTML from the template script tag we defined above and then we compile it into a template object we can use with new data later.

  var source = $("#story-template").html();
  var template = Handlebars.compile(source);

Next, we define a function we can use for our link onclick event handler. Here we’re simply stopping the actual request to the file by preventing its default behaviour. From there we make a jQuery XHR that returns JSON to the URL that was defined in the link’s HREF attribute.

  var story_link_handler = (function(evt) {
      evt.preventDefault();
      $.get(this.href, function(data) {
          $("#contentarea").html("");
          $("#contentarea").html(template(data));
          history.pushState({url:data.location}, data.title, data.location);
      }, "json");
  });

When the response comes back, we simply overwrite the div content area that holds all our book data.

$("#contentarea").html(template(data));

We also use pushState() to push the URL we just requested onto the browser history so we can go backwards using the back button.

history.pushState({url:data.location}, data.title, data.location);

That’s not quite the whole picture with pushState(), though, in order for it to “just work” for the user. We next create a popstate event handler on the window so that when the user hits the back button we can update the content with the appropriate data for the book. In this case we’re going and getting the data again using an XHR. With pushstate, it’s possible to store data in a state object. In our case the amount of data is small and it’s bad practice to load up the user’s browser with additional data (especially on mobile) so only do it if you can guarantee it’s a tiny amount.

  $(window).bind("popstate", function(evt) {
      if (event.state) {
          url = event.state.url;
          $.get(url, function(data) {
              $("#contentarea").html("");
              $("#contentarea").html(template(data));
          }, "json");
      }
  });

One of the things we need to consider with this technique is what happens when the browser gets back to the start of the list. That is, you’ve popped all of your XHRs off the stack and you’re back to where you started.

To remedy this, we use a flag to determine if we’re back to the start or not and we save the content that was in #contentarea so we can replace it. You can use other techniques such as simply hiding the original content area or storing the original document’s JSON.

We then update the popstate event to check if there’s no event.state. If so, we revert to our original form.

$(window).bind("popstate", function(evt) {
              if (event.state) {
                  url = event.state.url;
                  $.get(url, function(data) {
                      $("#contentarea").html("");
                      $("#contentarea").html(template(data));
                  }, "json");
               backtostart = false;
              } else {
               if (! backtostart) {
                  // revert the content to the original
                  backtostart = true;
                      $("#contentarea").html("");
                      $("#contentarea").html(original);
               } else {
                 // store original content to retrieve later
                 original = $("#contentarea").html();
                    backtostart = false;
               }
            }
          });

Finally, we add our click event handler to all the relevant links. In our instance, we’re just using the links in the list, but in practice you could do this to a whole range of links based on class or HREF attributes.

$("ul#storylist li a").bind("click", story_link_handler);

The rest of the page is the page structure and the actual content that was requested – in this case the /frankenstein URL.

As can be seen, this approach gives us a nice, responsive setup. The initial page request is a little heavier (in this case about 1Kb) but provides all of the scaffolding needed to layout the page and provide the interactions. Subsequent requests get the benefit of only having to return very small snippets of data, which are then loaded into the template.

The URL is updated using pushState() which means the user can still share the URL using intents or copy and paste and that URL will work properly for whomever it is shared with. You also get the benefit that each document still exists properly – this means search engines can still correctly index your site, if that’s needed.

One of the things we need to be careful of with this technique is that if we have content that exists in many different templates, the benefits from only loading the snippets of data via XHR will be destroyed by having to load all of the different content templates into the first page request and masking it from the user until it’s used. Don’t forget, all of the HTML still has to be loaded, regardless of whether it’s used or not.

Where this technique works particularly well is in an “infinite scroll” scenario such as a stream of content or very long article. The content type doesn’t change almost at all (or only within a very defined way)—this technique does for “page content” as a whole what the lazy loading technique does for images within a page. If you’ve taken the time to chunk your content, this can be especially effective as it means you can avoid the user hitting “goto page 2” even though search engines will follow happily.

Download code files used in this article

Delve further into the world of responsive web design in Andrew’s new book with Craig Sharkie: Jump Start Responsive Web Design.

In the last article Creating Custom Menus in Drupal we saw how to respond to URLs,  how to create menus and sub-menus in Drupal and how to pass parameters that can be used to alter the output of the menu callback functions.

These features might meet your needs for the most of the modules you want to build on top of Drupal, but in addition to these, the Drupal menu system also provides us with more functionality such as passing default arguments to your callback function, using wild cards in menu urls, creating tabbed menus etc…

These features can be very useful and can help you structure and design  your module in an easier and more efficient way. In this article we are going to see some of these functionalities and learn how you could use them in your Drupal module.

Creating the module

Let’s start by creating a separate module called advancemenudemo. To do this create a folder advancemenudemo sites\all\modules\custom and add two files called as advancemenudemo.module and advancemenudemo.info in it. Add the following code to the advancemenudemo.info file:

;$Id$
name = advancemenudemo
description = A module to demo drupals menu system Part 2
package = Menu Demo Package
core = 7.x
files[] = advancemenudemo.module

If everything has gone correctly you should now see your module in the Drupal module list as seen below.

Passing Default Arguments in your Menu

In the last article we saw that the Drupal menu system passes any additional parameters in the URL as arguments. In many modules there is one common generic menu callback function, which responds to multiple menu items.

Some menu items might have an extra parameter and some might not. In order to use the same callback function the menu item in Drupal can define default arguments that will be passed to the callback function. And the callback can have its normal code which would expect certain arguments to process the output.

We add default arguments for our menu items as follows:

/**
* Implementation of hook_menu().
*/
function advancemenudemo_menu() {
  $menuitems['menudemo'] = array(
  'title' => 'My Menu',
  'page callback' => 'advancemenudemo_mymenu_page_callback',
  'page arguments' => array('Product', 'view'),
  'access callback' => TRUE,
  'type' => MENU_NORMAL_ITEM,
  );
return $menuitems;
}
function advancemenudemo_mymenu_page_callback($firstparameter = '', $secondparameter ='') {
  $result = 'My Menu URL was hit';
  $result.='<br> The first parameter passed to the url is :<b>'.$firstparameter.'</b>';
  $result.='<br> The second parameter passed to the url is :<b>'.$secondparameter.'</b>';
  return $result;
}

In the above code we have specified the menu item parameter

'page arguments' => array('Product', 'view')

Two default arguments that are the product and view respectively will be passed to the callback function.

Now if you click on the menu item the output will be as follows

If you want to specify that the first argument passed to the callback function is a product and the second argument to the callback function should be fetched from the URL, you can update the menu item definition as follows:

$menuitems['menudemo'] = array(
  'title' => 'My Menu',
  'page callback' => 'advancemenudemo_mymenu_page_callback',
  'page arguments' => array('Product', 1),
  'access callback' => TRUE,
  'type' => MENU_NORMAL_ITEM,
  );

Here you are specifying to the Drupal menu system that the first argument sent to the function advancemenudemo_mymenu_page_callback should be ‘Product’ and the second should be the first parameter in the URL after menudemo.

Now, if you go to the URL <your dupal installation path>/menudemo/edit the output will be as follows:

Note: – Drupal caches the hooks that a module implements, so you might have to go to Administration » Configuration » Development » Performance and do a clear cache to take into consideration the new changes in the hooks implemented by your module in Drupal 7.

Using Wild Cards in Menu

Sometimes you might want to respond to the URL in that you might not want to hardcode some parts of the URL, and that could be anything that then would be passed to your callback function.

Drupal lets you specify such wild cards in your URL. You have to use the % sign to signify a wild card. To define a URL with any word after menudemo in the URL you will have to specify the following menu item in your advancemenudemo_menu function:

$menuitems['menudemo/%'] = array(
  'title' => 'Wild Card Menu',
  'page callback' => 'advancemenudemo_mymenu_page_callback2',
  'page arguments' => array(1),
  'access callback' => TRUE,
);
function advancemenudemo_mymenu_page_callback2($firstparameter = '') {
  $result = 'My Menu URL with wildcard was hit';
  $result.='<br> The wildcard value parameter passed to the url is :<b>'.$firstparameter.'</b>';
  return $result;
}

In the above code we are specifying the menu item with a wildcard and the callback function is advancemenudemo_mymenu_page_callback2.The element at position 1, which is the wildcard string, will be passed as the argument to the callback function.

The function advancemenudemo_mymenu_page_callback2 just prints the value of the wildcard argument.

Now if you go to the URL <drual installation>/menudemo/view you will see the output as follows:

Loading objects with wild card

Sometimes you might not just want the wildcard value passed directly to the callback function, but might want to take that value and then do some processing or fetch some other information based on that argument, and then pass that information to the callback function.

The Drupal framework allows you to do that by specifying a load function that will be written after the wildcard in the menuitem definition. The value you specify in the definition an function with _load appended to it will be called with the value of the wildcard and the output of that function will be used as argument to the callback function.

To specify a load function with the wildcard the menu definition will be as follows:

$menuitems['menudemo/%/product/%product_id'] = array(
  'title' => 'Wild Card Menu With Load',
  'page callback' => 'advancemenudemo_mymenu_page_callback_with_load',
  'page arguments' => array(1,3),
  'access callback' => TRUE,
  );
function product_id_load($id)
{
  //Here one can load a product from the database
  //or a file etc..
  $product = array();
  if($id=='1')
  {
    $product['name'] = 'Shirt';
    $product['quantity'] = '5';
  }
  else if($id=='2')
  {
    $product['name'] = 'Jeans';
    $product['quantity'] = '3';
  }
  return $product;
}
function advancemenudemo_mymenu_page_callback_with_load($action, $product)
{
  $result = 'My Wild Card Menu With Load URL was hit';
  $result.='<br> The action parameter passed to the url is :<b>'.$action.'</b>';
  $result.='<br> The product parameter passed to the url is :<b>'.implode(" : ",$product).'</b>';
  return $result;
}

As the value in the second wildcard we have specified as %product_id the load function product_id_load will be called. In this argument we have just returned an array defining the product with that id. You could fetch the details in the load function from a database or from some file.

Now if you visit the url <drupal installation>/menudemo/view/product/2 you will see the output as follows:

Creating a Tabbed menu

The Drupal framework also lets you create tabbed menus. To define a tabbed menu first we have to define a normal menu item, then define a local default task, and then define different local tasks depending on the number of tabs you want. The menu definition to create three tabs is as follows:

$menuitems['menudemo/producttab'] = array(
  'type' => MENU_NORMAL_ITEM,
  'title' => 'Product Tab',
  'page callback' => 'advancemenudemo_mymenu_tabbed_callback',
  'page arguments' => array('Main Product Tab'),
  'access callback' => TRUE,
  );
  $menuitems['menudemo/producttab/default'] = array(
  'type' => MENU_DEFAULT_LOCAL_TASK,
  'title' => 'Default primary tab',
  'weight' => 1,
);
  $menuitems["menudemo/producttab/viewall"] = array(
  'type' => MENU_LOCAL_TASK,
  'title' => 'View All',
  'page callback' => 'advancemenudemo_mymenu_tabbed_callback',
  'page arguments' => array('View all Product Tab'),
  'access callback' => TRUE,
  'weight' => 2,
);
$menuitems["menudemo/producttab/editall"] = array(
  'type' => MENU_LOCAL_TASK,
  'title' => 'Edit All',
  'page callback' => 'advancemenudemo_mymenu_tabbed_callback',
  'page arguments' => array('Edit all Product Tab'),
  'access callback' => TRUE,
  'weight' => 3,
);
function advancemenudemo_mymenu_tabbed_callback($firstparameter = '') {
  $result = 'Tabbed menu';
  $result.='<br> The menu clicked is :<b>'.$firstparameter.'</b>';
  return $result;
}

In the above code we have created a Product Tab and two sub tabs: View all Product tab and Edit all Products tab. The callback function just displays whichever tab is clicked.

If we click on one of the tabs you should see the output as follows:

Conclusion

Drupal has a very strong and flexible menu system. It provides a rich set of features and does all the complex work behind the scenes to provide to  the module an easy interface to work with URLs and produce the content for a particular URL.

Drupal gives you ways with minimal code to create simple menu items through to more complex tabbed menus by adding a few lines of code to your Drupal module. Drupal does the complex work of parsing the URL and converts  it to a function call in your code by even fetching the arguments of passing default arguments in case the arguments are not passed.

Based on this infrastructure, your module can provide easy navigation to the user with minimum code.

Have fun adding amazing menus to your next Drupal module.