Appliness #18 – September 2013

8/13/2019 Appliness #18 September 2013

1/115


2/115

app liness TUTORIALSJAVASCRIPT BOOKMARK / SHARE / TO

Gradient Mapsfor the Web

by Alan Greenblatt


3/115

UTORIALS GRADIENT.JS - GRADIENT MAPS FOR THE WEB

by AlanGreenblatt

2 of 8

In Photoshop, you can manipulate images in all kinds of ways using gradient madjustment layers. You can tint or tone images, easily convert them to black and whitadjust the midtones, or remap all the colors of an image into your own custom colormafor some great creative effects.

What if you couldmanipulate HTML images

using gradient mapadjustment layers.


4/115


Now what if you could do that to HTML content as well?

Not simply images. I meanany HTML content: text, video, images, you name it.

gradientmaps.js, a new open source libraryrecently released on GitHub lets youdo just that, very simply. The library depends on the ability to apply SVG lterto HTML content. That support is currently present only in Chrome and Firefoxbut hopefully the other browsers should be following suit with support in the nearterm. I wrote asupport matrix that details which browsers support SVG lters onHTML content, which will help you know which browsers this library can be useon.

The best way to understand gradient maps is to think in terms of images and lineargradients. The darker parts of the image get mapped to the left side of the gradient,while the brighter parts get mapped to the right side of the gradient.

But remember, were not just talking about images, were talking about HTMLcontent. The image in this case is what actually gets rendered on the screen, be ittext, images, video, etc.

Lets look at an example so youll see what Im talking about. Make sure yoare using Chrome or Firefox to view this, so you can see the gradient maps inaction. Be sure to check this out on your desktop:http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/.

On the right you should see an embedded iFrame. You can change the page youwant to display by typing in your own URL and clicking the Reload IFrame butto

WHAT ARE GRADIENT MAPS?

GRADIENTMAPS.JS EXAMPLE

3 of 8
https://github.com/awgreenblatt/gradientmapshttps://github.com/awgreenblatt/css-graphicshttps://github.com/awgreenblatt/css-graphicshttp://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/https://github.com/awgreenblatt/css-graphicshttps://github.com/awgreenblatt/css-graphicshttps://github.com/awgreenblatt/gradientmaps


5/115


On the left youll see a list of gradient map presets, and below that you can enteryour own custom gradient maps and apply them to the iFrame on the right.

If you click on some of the presets, youll see that the gradients look an awful lotlikeCSS linear gradients, and that is intentional. You can copy/paste directly froma CSS linear gradient. Everything is the same except there is no initial angle, sideor corners.

Due to security constraints with iFrames, the Codepen above will not showembedded Flash video. Instead, if you want to try applying gradient maps to siteslike Adobe TV or YouTube, then you can run the same demo here:http://blattchat.com/gradient-map-on-an-iframe/. Make sure, if you want to view a YouTube video,that you use the embed URL. Or, if you want to see a wacky example of animatedgradient maps, try this out.

The API is really easy to use. First, include the gradientmaps library on your page

Now, you can apply a gradient map to any element using the following JavascriptGradientMaps.applyGradientMap(targetElement, gradientString);

gradientString is specied as a comma separated list of color stops. Each colorstop is a color (specied in RGB, RGBA, HSL, HSLA, a named color or #hex formfollowed by an optional position (specied as either a fraction from 0.0 to 1.0 or apercentage).

For example, heres a gradientString that would convert your content to black andwhite:

black, white

If you want the gradient to start at black, gradually turning to blue at 10%, andthen to full white at 100%, you could do the following:

black, rgb(0, 0, 255) 10%, white

USING GRADIENTMAPS.JS

4 of 8
http://docs.webplatform.org/wiki/css/functions/linear-gradienthttp://blattchat.com/gradient-map-on-an-iframe/http://blattchat.com/gradient-map-on-an-iframe/http://blattchat.com/animating-a-gradient-map/http://blattchat.com/animating-a-gradient-map/http://blattchat.com/gradient-map-on-an-iframe/http://blattchat.com/gradient-map-on-an-iframe/http://docs.webplatform.org/wiki/css/functions/linear-gradient


6/115


There are a few assumptions made when no position is specied. These are thesame assumptions as for a CSS linear gradient:

If the initial color stop has no position, it is assumed to be 0% If the nal color stop has no position, it is assumed to be 100% If a color stop has no position, and it is not the rst or last color stop, it ispositioned half way between the previous and next color stop If a color stops position is less than the previous color stop, it is repositioned to

that of the previously positioned color stop

If you want to remove a gradient map from an element, the following method isavailable:

GradientMaps.removeGradientMap(targetElement);

Thats it. Pretty simple and straightforward.

Behind the scenes, gradientmaps.js is making use of SVG lters, specically thcolor matrix and component transfer lter primitives. When applying a gradientmap, rst an SVG element is added to the DOM, and a lter with a dynamicallygenerated ID is added to the SVG: < lter id= lter-1375725609202/>

A color matrix lter primitive is then used to convert the HTML rendered imageto grayscale, with the darkest colors mapped to black, and the brightest colorsmapped to white.

< lter id= lter-1375725609202>

HOW IT WORKS

5 of 8


7/115

UTORIALSGRADIENT.JS - GRADIENT MAPS FOR THE WEB

A component transfer lter primitive then takes the output from the previous lterprimitive to convert the grayscale intensities to the requested gradient map.

< lter id= lter-1375725609202>

Calculating the actual values for the component transfer primitives individuachannel transfer functions is where the meat of the gradientmap library lies.

The component transfer lter primitive allows you to remap the individual colochannels using transfer functions (feFuncR, feFuncG, feFuncB and feFuncA fRGBA respectively). In our case we are usingtable type transfer functions. Thereare different types of transfer functions that you can read about in thelter effectsspecication. With table type transfer functions, the function is dened throughlinear interpolation of the values specied in thetableValues attribute.In the example above,the red transfer function has its tableValues set to:

1 0 0

The table values will be evenly distributed, meaning the rst value will map reds ovalue 0.0, the last value will map reds of 1.0 and any stops in between will be evenlydistributed. In the case above, the middle 0 will thus map reds of value 0.5. In this

example, the darkest reds will get mapped to full red, and any reds with a value of0.5 or more will get mapped so they have no red.

The problem of course is that we want to be able to add values at arbitrary positionsin the gradient, not just at evenly distributed positions. The library takes care ofthat for you, guring out what set of evenly distributed table values can be usedwith the individual channel transfer functions to achieve the desired effect.

6 of 8
http://www.w3.org/TR/SVG11/filters.html%23feComponentTransferElementhttp://www.w3.org/TR/SVG11/filters.html%23feComponentTransferElementhttp://www.w3.org/TR/SVG11/filters.html%23feComponentTransferElementhttp://www.w3.org/TR/SVG11/filters.html%23feComponentTransferElement


8/115


For example, if you wanted to start at black, go to blue at 10% and then end onwhite:

the library would calculate table values for the transfer function table values at 0%10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% and 100%:

< lter id= lter-1375725609202>

Finally, the target element has its CSS modied, setting -webkit-lter and lter topoint to the dynamically created SVG lter:

-webkit- lter: url(#1375725609202);lter: url(#1375725609202);

When modifying an existing gradient map, the library will look for the existing ltethat is applied to that element, and modify it in place so you dont end up withzombie lters in your DOM. When removing a lter, the CSS lter attributes will breset and the lter will be removed from the SVG element. If the SVG has no othelter children, it will be removed as well, ideally keeping everything nice and tidy

7 of 8


9/115


Id like to the thank the Adobe Web engine team for originally pointing me downthis path and for their support, both technically and legally.

You can nd the all of the code and examples on my GitHub repository:

https://github.com/awgreenblatt/gradientmaps

By all means, let me know if you nd problems or think there are some features toadd. Even better, make the changes yourself and do a pull request. Id love to getothers input on making this better.

I can best be reached on Twitter at@agreenblatt. Thats also a great way to keepup with any major updates or improvements to the library. You can also read aboutsome of my other technical ramblings athttp://blattchat.com. Please do let meknow if you do anything interesting with the library.

Enjoy!

SUMMARY

Alan GreenblattCreative Cloud Evangelist

HIS BLOG

TWITTER

SHARE

GITHUB
https://github.com/awgreenblatt/gradientmapshttps://twitter.com/agreenblatthttp://blattchat.com/http://blattchat.com/http://blattchat.com/http://blattchat.com/https://twitter.com/agreenblatthttps://github.com/awgreenblatthttps://github.com/awgreenblatthttps://twitter.com/agreenblatthttp://blattchat.com/http://blattchat.com/https://twitter.com/agreenblatthttps://github.com/awgreenblatt/gradientmaps


10/115

app liness TUTORIALSCSS BOOKMARK / SHARE / TO

Writing BetterCSS

by Mathew Carella


11/115

UTORIALS WRITING BETTER CSS

by MathewCarella

2 of 8

This article rst appeared on the Flippin Awesome website on August 12, 2013. Ycan read it here.

Writing good CSS code can speed up page rendering. Essentially, the fewer rulethe engine has to evaluate the better. MDN groups CSS selectors in four primarycategories, and these actually follow the order of how efcient they are:

1.ID Rules2.Class Rules3.Tag Rules4.Universal RulesThe efciency is generally quote from Even Faster Websites by Steve Souders whiwas published in 2009. Souders list is more detailed, though, and you can nd thefulllist referenced here. You can nd more details inGoogles best practices for efcientCSS selectors.

In this article I wanted to share some simple examples and guidelines that I use fowriting efcient and performant CSS. This is inspired by, and follows a similar forto, MDNs guide to writing efcient CSS.

Essentially, the fewer therules the engine has to

evaluate the better.
http://flippinawesome.org/2013/08/12/writing-better-css/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSShttp://csswizardry.com/2011/09/writing-efficient-css-selectors/http://csswizardry.com/2011/09/writing-efficient-css-selectors/https://developers.google.com/speed/docs/best-practices/rendering%23UseEfficientCSSSelectorshttps://developers.google.com/speed/docs/best-practices/rendering%23UseEfficientCSSSelectorshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSShttp://flippinawesome.org/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSShttps://developers.google.com/speed/docs/best-practices/rendering%23UseEfficientCSSSelectorshttps://developers.google.com/speed/docs/best-practices/rendering%23UseEfficientCSSSelectorshttp://csswizardry.com/2011/09/writing-efficient-css-selectors/http://csswizardry.com/2011/09/writing-efficient-css-selectors/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSShttp://flippinawesome.org/2013/08/12/writing-better-css/


12/115


As a general rule, dont supply more information than is necessary.

// badul#someid {..}.menu#otherid{..}

// good#someid {..}#otherid {..}

Not only is this not performant but it is fragile, as changes to the HTML can easilbreak your CSS.

// very badhtml div tr td {..}

This is similar to overqualifying and it is preferable to simply create a new CSS claselector.

// bad.menu.left.icon {..}

// good.menu-left-icon {..}

DONT OVERQUALIFY

DESCENDANT SELECTORS ARE THE WORST

AVOID CHAINING

3 of 8


13/115


Lets imagine we have a DOM like this:

Twitter Facebook Dribbble

Following upon the prior rules

// bad#navigator li a {..}

// good#navigator {..}

Whenever possible, use the shorthand syntax.

// bad.someclass { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: #000; background-image: url(../imgs/carrot.png); background-position: bottom; background-repeat: repeat-x;

}

// good.someclass { padding: 20px 10px 20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottom;}

STAY KISS

USE A COMPACT SYNTAX

4 of 8


14/115


// bad

.someclass table tr.otherclass td.somerule {..}

//good.someclass .otherclass td.somerule {..}

Whenever you can, combine duplicate rules.

// bad

.someclass { color: red; background: blue; font-size: 15px;}

.otherclass {

color: red; background: blue; font-size: 15px;}

// good

.someclass, .otherclass { color: red; background: blue; font-size: 15px;}

AVOID NEEDLESS NAMESPACING

AVOID NEEDLESS DUPLICATION

5 of 8


15/115


Following on the prior rule, you can combine duplicate rules but still differentiateclasses.// bad.someclass { color: red; background: blue; height: 150px; width: 150px; font-size: 16px;}

.otherclass { color: red; background: blue; height: 150px; width: 150px; font-size: 8px;}

// good.someclass, .otherclass {

color: red; background: blue; height: 150px; width: 150px;}

.someclass { font-size: 16px;}

.otherclass { font-size: 8px;}

CONDENSE RULES WHEN YOU CAN

6 of 8


16/115


It is preferable to use semantic names. A good CSS class name should describewhat it is about.

When possible, you should instead use good qualied selectors.

While there are a number of common ways to order CSS properties, this is acommonly used one that I follow.

.someclass { /* Positioning */ /* Display & Box Model */ /* Background and typography styles */ /* Transitions */ /* Other */}

Code that is easier to read is easier to maintain. Heres the format I follow:

// bad

.someclass-a, .someclass-b, .someclass-c, .someclass-d { ...}

// good.someclass-a,.someclass-b,.someclass-c,.someclass-d { ...

AVOID UNCLEAR NAMING CONVENTIONS

AVOID !IMPORTANTS

FOLLOW A STANDARD DECLARATION ORDER

FORMAT YOUR CODE PROPERLY

7 of 8
http://css-tricks.com/new-poll-how-order-css-properties/http://css-tricks.com/new-poll-how-order-css-properties/


17/115


}

// good practice.someclass { background-image: linear-gradient(#000, #ccc),

linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000, 1px 4px 1px 1px #ddd inset;}

Obviously these are just a handful of rules that I try to follow in my own CSS tmake it both more efcient and easier to maintain. If you want to read more onthe topic, I suggest readingWriting Efcient CSS on MDN and Googles guide tooptimize browser rendering.

This article was originally published athttp://blog.mathewdesign.com/2013/07/04/writing-performant-and-quality-css/

WHERE TO GO FROM HERE

Mathew CarellaWeb Developer

H IS BLOG

TWITTER

SHARE

GITHUB
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSShttps://developers.google.com/speed/docs/best-practices/rendering%23UseEfficientCSSSelectorshttp://blog.mathewdesign.com/2013/07/04/writing-performant-and-quality-css/http://blog.mathewdesign.com/2013/07/04/writing-performant-and-quality-css/http://www.mathewdesign.com/http://www.mathewdesign.com/http://www.mathewdesign.com/http://www.mathewdesign.com/https://twitter.com/MathewDurdenhttps://twitter.com/MathewDurdenhttp://www.mathewdesign.com/http://www.mathewdesign.com/http://blog.mathewdesign.com/2013/07/04/writing-performant-and-quality-css/http://blog.mathewdesign.com/2013/07/04/writing-performant-and-quality-css/https://developers.google.com/speed/docs/best-practices/rendering%23UseEfficientCSSSelectorshttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS


18/115

app liness TUTORIALSSVG BOOKMARK / SHARE / TO

SVG Filterson Text

by Chris Scott


19/115

UTORIALS SVG FILTERS ON TEXT

by ChrisScott

2 of 5

This article appeared as a guest post on the CSS-Tricks website on August 9, 2013. Ycan read it here.

There has been a general trend in Web development, for some years now, away from

using images in designs. Only a few years ago software companies would favour usian image of a rounded corner as the best cross-browser solution; the CSS attributborder-radius has made that technique seem very antiquated today. Titles areanother example of this trend, where in the past one may have generated a fancybanner title in Photoshop and used an image to show it on the page. These days wehave web fonts at our disposal and CSS3 to help us achieve shadows and other effectThese solutions load much faster, scale better and are more accessible and semanticalcorrect. But there is even more we can do!

SVG with Filter Effects have a lot of potential for complex text styling. Take a lookthis example:

That line is created using SVG Filter Effects. Its just text. You can select it with ycursor. Search engines can index it. It will scale in size without losing quality. To boit takes very little time to download. You can achieve a whole lot more, too, the scopfor creativity with Filter Effects is huge. The example was created with a library calRaphael.js and an extension I wrote for it. This article talks about the rationale fdeveloping the extension and shows - in brief - how it can be used.

SVG FILTERS

SVG with Filter Effecthave a lot of potential for

complex text styling.
http://css-tricks.com/svg-filters-on-text/http://css-tricks.com/using-svg/http://css-tricks.com/http://css-tricks.com/using-svg/http://css-tricks.com/svg-filters-on-text/


20/115


Apparently, only 0.1% of Web pages use SVG graphics. If that statistic is anythingto go by, theres a good chance that you are probably not using SVG on a regularbasis. Why is SVG used so unpopular? Its only a guess, but the reason I didnt geinto SVG (until I absolutely had to) was its learning curve: SVG is an XML vocabuand is, I think, extremely technical (matrix multiplication for colour shifts, anyoneThe way I got into SVG was throughRaphael.js, a JavaScript Library for creatingvector drawings. Because its a JavaScript library it felt fairly familiar, all of thcomplexity was abstracted away. Before long I was creating complex graphics likea pro.

Raphael has a shortcoming though: no support for Filter Effects. I rememberone of my customers specically requesting a drop shadow for bubbles in a datavisualization which was interactive and animated. The request stumped me for awhile as I bumped into this limit of Raphael. For that project I wrote a very speciextension to Raphael for handling drop shadows. But the same complexity thathad initially put me off SVG was back and worse than ever. Make no mistake, FilteEffects are very, very technical.

So, after that project, I set about building a more full-featured library to make FilterEffects as easy to apply as Raphael makes drawing shapes.

IntroducingFilter Effects for Raphael!

Heres how to use it:

First, the HTML. This bit is dead simple, just adiv with anid :

Everything else is done in JavaScript.

To start an SVG drawing with Raphael you create a paper by referencing the idof the container element:

var paper = Raphael(title-container);

FILTER EFFECTS FOR RAPHAEL

3 of 5
http://w3techs.com/technologies/details/im-svg/all/allhttp://raphaeljs.com/http://chrismichaelscott.github.io/fraphael/http://chrismichaelscott.github.io/fraphael/http://raphaeljs.com/http://w3techs.com/technologies/details/im-svg/all/all


21/115


Now to do some drawing. This example creates some text and sets some of thestyle attributes:

// The rst two arguments are the origin of the textvar title = paper.text(0, 30, Filters are ice cold);title.attr({ ll: MintCream ,font-family: Butcherman ,font-size: 54px ,text-anchor: start});

Now for some effects! The simplest things you can do are shadows, blurring,lighting, embossing and colour shifting. Those require very little coding. Lets trythe emboss effect. Add to the JavaScript:

title.emboss();

You can chain effects, so applying a shadow afterwards is straightforward:

title.emboss().shadow();

Pretty cool, huh? You can take this much further if you want, by creating your owlters. The SVG spec lists (lower level) lter effects which can be combined t

create all kinds of lters (convulsion matrices, in particular, can be used for a vasnumber of operations).

This demo has the full code and some other examples of different effects that canbe achieved:

4 of 5


22/115


What are the downsides to SVG? Well - aside from the pros and cons of vectorover raster (likecanvas ) - there are a couple I can think of: Browser support - You may not be surprised to learn that the graphical trickery

discussed here is not supported in older versions of IE, 10 only. SVG itself wirender in IE9, just without the effects. Firefox, Chrome and Opera have supportedFilter Effects forages

Semantics - Some may have reservations about the semantic validity of usingSVG in documents, certainly thesvg tag doesnt give any clue as to its content;you can use a sensible parent, though

Hopefully this piece has given you a good idea of what lter effects can do andhow Filter Effects for Raphael can do them. Check out the project page onGithub for more details. Thanks for reading!

SHORTCOMINGS

WRAPPING UP

Chris ScottDeveloper & Entrepeneur

HIS BLOG

TWITTER

SHARE

GITHUB
http://caniuse.com/svg-filtershttp://chrismichaelscott.github.io/fraphael/http://chrisscott.org/http://chrisscott.org/http://chrisscott.org/https://twitter.com/_chris_scott_https://github.com/chrismichaelscotthttps://github.com/chrismichaelscotthttps://twitter.com/_chris_scott_http://chrisscott.org/http://chrismichaelscott.github.io/fraphael/http://caniuse.com/svg-filters


23/115

app liness TUTORIALSPHONEGAP BOOKMARK / SHARE / TO

CommercialPhoneGap in the Wild

by Sel-Vin Kuik


24/115

UTORIALS COMMERCIAL PHONEGAP IN THE WILD

by Sel-VinKuik

2 of 11

Working in development, you relish problem solving and nding the optimal platfoon which to deploy your project. Choosing unwisely, especially as a startup digiagency, could cost you dearly. In September 2012, when SMACK (http://smackagency.com) won its rst mobile app project, it was crucial that we got the platform right. Thright technology, to be able to deliver the right functionality efciently and, of coursat the right price to meet budgets.

Traditionally, although theoretically the better solution, hybrid apps in practice wethe poor relation to their native counterparts. However, things were starting to change- the question was, was it enough to choose hybrid, and would the decision pay off.

Our client rst came to uswith the ground-breakingidea for a free, money-saving website throughwhich users would beable to access offers andmembership benets fororganisations, venuesand retailers across theUK. With thousands ofdeals already loggedin the database, anumber which rapidlygrew throughoutdevelopment and pastlaunch, it was imperativethat the system wasscalable to process largequantities of data withinminimal time.

THE PROJECT

Choosing unwisely,especially as a startup

digital agency, could cost you dearly.
http://smackagency.com/http://smackagency.com/http://smackagency.com/http://smackagency.com/


25/115


The mobile app was an essential addition to the website allowing users to accesstheir proles on the go. Using live geolocation based functionality, push noticationcould be congured to alert of any benets coming in to vicinity as the user movesaround.

When it boiled down to it,choosing PhoneGap wasnt aninstinctive decision. PhoneGapwas the exciting upstart I hadhad my eye on since I rst cameacross it in 2010. However, the jury was still out as far as speedand economies were concerned.Coming to it from a webbackground, I strongly supportedthe single-source code baseoffered. However, on the hybridvs. native argument, I remainedrmly on the native side of thefence. Why? Because to delivercommercially viable apps it has tobe considered that there is a hugevariety of devices on the market.Until very recently, all but the top-end devices out there sufferedfrom poor HTML5 support andsluggish JavaScript engines. Thisgave native the upper hand forboth performance and audiencereach, preventing me from evenconsidering deploying a hybridsolution to a full-scale project.

HYBRID VS. NATIVE

3 of 11

Swipe throughthe screens


26/115


When my client rst approached me, devices such as the Nexus 4 and iPhone 5were being unveiled. For Android, the Nexus 4 set a new milestone for mobileprocessing power, and the improvement of JavaScripting on the iPhone 5 createda benchmark above and beyond that seen before. For developers, PhoneGap wasleading the way for hybrid platforms with a strong, growing community and a widevariety of plugin support to access native functionality. For me, that provided theturning point - hybrid applications had nally become a serious contender to nativeapps, and my decision to develop with PhoneGap was made.

When it comes to the app itself, it is worth taking a step back to outline the appback-end. The structure is fairly traditional, the data is stored server-side in a MySQLdatabase, with a Sphinx (http://sphinxsearch.com/) search engine layer on top foroptimised indexing. Practically all of the data stored can be represented withlatitude and longitude coordinates for it to be mapped. Yii framework (http://www.yiiframework.com/) powered PHP controls the logic.

THE TURNING POINT

LETS GET TECHNICAL

4 of 11
http://sphinxsearch.com/http://www.yiiframework.com/http://www.yiiframework.com/http://www.yiiframework.com/http://www.yiiframework.com/http://sphinxsearch.com/


27/115


On the front-end, at the surface jQuery(http://jquery.com/) was used to do a lotof the heavy-lifting in terms of DOM manipulation and Ajax calls. I used parsley(http://parsleyjs.org/) to build a modular validation system, and mustache.js (http://mustache.github.io/) for simple repetitive templating within each page of the app.To maintain as much compatibility towards older devices, the use of transitionsand animations was kept to an absolute minimum. Although it is possible, I wouldadvise that the rule of thumb for any developer would be to always use CSS3 overJavaScript in this case.

You can see a sample of the JavaScript structure, which outlines handling the pagetransitions seamlessly with PhoneGap and jQuery.

/**

* Page constructor */$(document).bind( pageshow , function ( event , ui) {

var $content = $(.ui-page-active);

// Check if page content has already been loaded previously if(!$content.hasClass( initialised )) {

// Show a loading spinner, initially hidden $.mobile.loading( show , { text: Your connection is wonky., textVisible: false });

// Dynamic page initialisation, based on content ID eval(app. + $content.attr( id ) + .init(););

}

});

/** * Page destructor */$(document).bind( pagehide , function ( event , ui) {

app.cleanUp();

});

/**

5 of 11
http://jquery.com/http://parsleyjs.org/http://mustache.github.io/http://mustache.github.io/http://mustache.github.io/http://mustache.github.io/http://parsleyjs.org/http://jquery.com/


28/115


* Page ready */$(document).on( pageready , function () {

// Hide loader $.mobile.loading( hide );

// Flag page as initialised

$(.ui-page-active).addClass( initialised );

});

/** * Global Ajax error handler * Hooks in to jQuery, if connection is ever lost during data population * the loading spinner is updated to notify the user */$(document).ajaxError( function ( event , jqXHR, ajaxSettings, thrownError) {

$(.ui-loader).removeClass(ui-loader-default).addClass(ui-loader-verbose);

});

/** * Example page

*/app.examplePage = {};app.examplePage.init = function () {

// Initialise page, setup interactions, populate data over Ajax

// Trigger page ready when done $(document).trigger( pageready );

};

6 of 11


29/115


Digging deeper, it gets a lot more interesting. When the app is booted it taps into PhoneGaps location listener to track the device position. As PhoneGap usesthe HTML5 geolocation specication this is exceptionally easy. Even locatiotracking when the app is in the background is simply achieved by switching a agin either ADT or Xcode, functionality often considered impossible across the webPhoneGap actually makes this remarkably simple, and this was a key requiremenfor the iMember app.

Once the location has been obtained, the app pings the server for relevant pointsnearby. I found this traditional approach to be much more effective than usinggeofencing, in our case only due to the sheer volume of positional data beingstored in the database. The implementation of Sphinx makes light work of searchingthrough this large data collection to return instant results.

JAVASCRIPT

/** * Device Ready */

document.addEventListener( deviceready , function () { // Listen for location changes

navigator.geolocation.watchPosition( function (position) {

// Success function, send the user location update to the server

} );

}, true);

THE NITTY GRITTY

7 of 11


30/115


PHP

function updateLocation($user, $latitude, $longitude){

// Find the users current location $oldLocation = $user->getCurrentLocation();

// Update the user location $user->updateLocation($latitude, $longitude);

// Use the Haversine formula to calculate if the user has moved a signi cantdistance if(CMath::haversine($oldLocation->latitude, $oldLocation->longitude,$latitude, $longitude

) < 0.1) return false;

// Use Haversine/Sphinx to search the local area for relevant bene ts if($bene ts = $user->nearbyBene ts($latitude, $longitude)) { // Send push noti cations }} Through the use of PhoneGap plugins, iMember further taps into functionality ondevice. For when the user is on the move, the capability to register and receivepush notications was developed using PushPlugin. As location data is being sentto the server, the changes in position are monitored. If the user has moved to anew location where new points of interest are available, a notication is sent. Thereis a good chunk of back-end functionality here to register the device, store thelocation and send the notication. I opted for a bespoke build of our noticationserver, although it is outside the scope of this article, it is much simpler than itsounds and there are some great references online. There are also a good number

of paid services if you dont want the bother of managing a notication server.For iOS, PushPlugin and plugins in general require quite a bit of work to congurwithin Xcode and the iOS Developer Centre. This can be quite daunting to a hybriddeveloper with little native experience, but plugin documentation is continuouslyupdated, and it often comes down to a case of meticulously following instructionsFor those of you working with Android however, youll be pleased to know thatGoogle makes the whole process considerably simpler.

8 of 11


31/115


Probably one of the more deceiving complex pieces of functionality that had to beincluded was tapping in to the social functionality on device. For a web developerits not simply the case of copying in your favourite social widget and hey presto asyou might expect. However, again a PhoneGap plugin was available to assist, andfor this we used the ShareKit.

Again, the setup for iOS can be slightly more complicated than Android, especiallyif you are looking to make use of the recent updates to social in iOS 6 yet stillmaintain iOS 5 compatibility. It is on this note that although PhoneGap can providea single-source principle, it is not the case that writing one piece of code will allowdeployment across all devices. Each OS has it nuances, and this should be handledby splitting out plugin functionality in to modules for devices and even deviceversions. Good code organisation and namespacing cannot be emphasised enough,I included a global switch for devices, so although common functionality can bgrouped together, device-specic alterations can easily be separated out. var IS_IOS = true;

/** * Device Ready */document.addEventListener( deviceready , function () {

// Set global variable to target platforms independently

var platform = device.platform.toLowerCase();

if(platform.indexOf( android ) > -1) IS_IOS = false;

// Register for push noti cationsapp.pushNoti cations.register();

}, true);

/** * Push Noti cations */app.pushNoti cations = {};app.pushNoti cations.register = function () {

// Android if(IS_IOS) window.plugins.pushNoti cation.register({ ecb: app.pushNoti cations.ios });

9 of 11


32/115


// iOS else window.plugins.pushNoti cation.register({ ecb: app.pushNoti cations.ios });

};

app.pushNoti cations.android = function ( event ) {

// Handle push noti cations on Android

};

app.pushNoti cations.ios = function ( event ) {

// Handle push noti cations on iOS

};

One other observation when developing with PhoneGap plugins, or indeed anythird party plugins for a rapidly evolving platform, is versioning and compatibilitEspecially when you begin to mix multiple plugins, unless you have the resourcto contribute to the open-source development, it is often the case that an olderversion of PhoneGap needs to be used to cater across the board.

In order to deliver successful apps, it is crucial that the foundations can performto 100%. Hybrid apps remain the most hotly discussed subjects when it comes tomobile development, however the decision to deploy with hybrid hasnt alwayscome easily in the past.

Hopefully, reading about my experience will help shed some light on the possibilitiethat PhoneGap can offer. Maybe itll even help convince those in camp nativethat there is another way in which to build full-featured, scalable commercial appsIve found that PhoneGap can simplify complex functionality, thus optimising thbuild process.

As the number of hybrid apps grows, so will the community and support, and inturn the requirement for device capability. At SMACK, development is already

IN CONCLUSION

10 of 11


33/115


fully underway to deliver a commercial hybrid HTML5 game, and my next personchallenge is to follow this with a commercial scale augmented reality hybrid appThe golden time for hybrid is dawning, and as PhoneGap improves and ideas andnotions develop, theres no better time to start developing a hybrid app.

Sel-Vin Kuik is the technical director at SMACK, a digital creative agency developiweb apps, mobile apps and digital magazines.

BIO

Sel-Vin KuikTechnical Director

HIS BLOG

TWITTER

SHARE

GITHUB
http://smackagency.com/http://smackagency.com/http://smackagency.com/https://twitter.com/SMACKagencyhttps://twitter.com/SMACKagencyhttp://smackagency.com/


34/115

app liness INTERVIEW VITALY FRIEDMAN BOOKMARK / SHARE / TO


35/115

app liness INTERVIEW VITALY FRIEDMAN BOOKMARK / SHARE / TO

INTERVIEW

V ITALY F RIEDMAN

by Maile Valentinephotos Oliver KernOliverKern Fotograe
http://www.okdv.de/http://www.okdv.de/


36/115

3 of 10

APPLINESS: Hello Vitaly, were bigfans of your work! Thank you forspending time with Appliness. Canyou tell us a bit about yourself?

Thank you so much for inviting me. Itsmy honor and pleasure to be featuredin Appliness Ive been reading it for

a while now. Well, I am one of the guyswho has been doing lots of differentthings on the Web throughout allthese years. I jumped into Web designwhen I studied computer science andmathematics at the university and then,at some point, I realized I am a prettymediocre developer which I was whyI started doing something different. I

was always fascinated by typographyand design, so I explored this directioninstead. At that time I didnt have anymoney and when I was asked about acouple of Web design projects at theuniversity, I jumped into this area withboth feet.

I used to design table-based websites

when I was a kid, back in 1999, butthen I was disillusioned by what I sawas an incredibly time-consuming andimpractical craft. I did create a coupleof websites back then, and I alsoexperimented with Shockwave and

VRML at some point. This is also thepoint when I started writing about theWeb and my experiences with it.

It was the time when everybody triedto gure out what to do with the Web,but the most important thing for mewas the fact that I could publishinganything online and people acrossthe globe could access it. It was afascinating thought. Actually, it stillis. I often think that this is one of the

reasons why I still do my work today.Smashing Magazine features articleson the latest techniques and toolsfor modern web design. Based onyour experience as a web designerand your exposure to the latesttechnologies, what are some of thetools you are most excited about?

To be honest, I rarely get excitedabout tools; nor am I interested intrends or exciting visual treatments.I love clever solutions to hard designproblems. I love seeing CSS trickeryand innovative, smart designs. Thisis why I am particularly interested inresponsive Web design patterns as

well as performance optimizationtechniques which are derived fromsuboptimal real-life projects. Usuallyour solutions have to be pragmaticand work well within given projectconstraints. Thats a gateway tosmart, unusual design choices, in myopinion.

INTRODUCTIO

N

TERVIEW VITALY FRIEDMAN
http://www.smashingmagazine.com/http://www.smashingmagazine.com/


37/115

4 of 10

When I think about new techniques,I tend to think about Atomic Design as proposed by Brad Frost as well asgeneral design of websites as systemsrather than pages. I am also curiousof how we can further improve theoverall user experience of websitesby using ofine storage technologies

and prefetching content in a smartway. I am very curious to see howour deliverables and our projectworkow are changing (and willchange in the future) as responsiveWeb design will become a default forevery project. Overall, processes andworkow fascinate me. The insightsyou can learn from them are much

more profound and empowering thanany standalone tool could provide.

INTRODUCTIO

N

http://bradfrostweb.com/blog/post/atomic-web-design/https://twitter.com/brad_frosthttps://twitter.com/brad_frosthttp://bradfrostweb.com/blog/post/atomic-web-design/


38/115

VITALY FRIEDMANSMASHING MAGAZINE

What were some of the tools orframeworks you and your team usedto redesign Smashing Magazine fora responsive design?

Well, to be honest, we didnt use anyframework at all the whole site wasbuilt from scratch. Ive never been a

big fan of frameworks actually, and itwasnt necessary in our case because

the actual design was quite well,straightforward. We worked in theChrome Devtools all the time and weplayed around with CSS values andproperties. At that point we didntreally have any tools that would help uswith debugging and maintenance oractual testing of media queries, so we

kept resizing the window all the time.5 of 10



39/115

6 of 10

We also used the asterisk techniqueas proposed by Trent Walton ( http://trentwalton.com/2012/06/19/fluid-type/ ) but that was it, actually.We didnt use Photoshop at all, andmost experiments were done directlyin the browser.

Smashing Magazine started as aside project and grew to be a verysuccessful, full-time endeavor. Arethere any plans for expanding yourscope of products or services? Morebook publishing in the future?

Well, personally I love challenges. Itend to explore directions Ive neverthought of or never had experiencein. This is how eBooks and printedbooks and conferences and workshopscame to be. Indeed we are workingon a variety of books at the moment,but I think Ive already found a newchallenge that Id love us to take on inthe nearest future. And no, thats notwhat you are expecting. :-)

Smashing Magazine gainedpopularity very quickly. What didit offer that your readers had beenmissing?

I think that our readers discoveredthat we emphasized the importanceof practical, useful articles that alwaysdelivered on the promise of providingvalue to the reader. Thats what hasbecome our signature, so to say. Ithasnt changed over all these years atall, only the form in which content ispresented and how it double checked

before it goes live, has changed

signicantly. I think that SmashingMagazine appeared at the right timein the right niche and so populararticles helped us grow over time andgain more and more readers over theyears.

Can you tell us about the SmashingConference you organize? What isthe content of the conference? Itsgoal? Are you considering any pureonline events?

When we started planning the SmashingConference ( www.smashingconf.com ), we had a clear idea of whatthe conference should feel like andwhat its purpose should be. It cantbe a generic, quick-paced, ordinaryevent. It has to be special, different,valuable and meaningful. It has tobe smashing in every possible way.At its essence, the SmashingConf is avery hands-on event, with thoroughdiscussions about how we work, whatstrategies and techniques we use andhow we can use them intelligently.Every talk should deliver value andshould serve a purpose; it shouldbe helpful and remarkable, it shouldchallenge, share and inspire. If allpieces of the puzzle come togethernicely, the conference should becomea memorable community event, withpractical insights and takeaways forspeakers and guests alike. It shouldbe an event that everyone remembersand looks forward to again next year.We wanted to apply the very principles,values and philosophy that lie in thevery heart of Smashing Magazine, tothe conference and this is exactly how

it came to be.

SMASHINGMAGAZINE

http://trentwalton.com/2012/06/19/fluid-type/http://trentwalton.com/2012/06/19/fluid-type/http://trentwalton.com/2012/06/19/fluid-type/http://www.smashingconf.com/http://www.smashingconf.com/http://www.smashingconf.com/http://www.smashingconf.com/http://trentwalton.com/2012/06/19/fluid-type/http://trentwalton.com/2012/06/19/fluid-type/http://trentwalton.com/2012/06/19/fluid-type/


40/115

VITALY FRIEDMANTECHNOLOGY

With the rate and frequency at whichnew frameworks and toolsets aredeveloped, what are the importantfactors you take into account

when deciding on the appropriatetechnology to focus on?

Performance and speed. Thats thekey for every single design decisionthat we should make when decidingon an appropriate technology. Ofcourse, every project will have differentrequirements and different scopes as

well as different budgets, but I stronglybelieve that performance should

become the established principlethat should guide and inform designdecisions.The technology is appropriate fora project if it results in a clean,maintainable code that runs fast, is builtwithin the progressive enhancementmethodology (of which I am a strongproponent).

What is still not available that you would like to see for web designersand developers?

Good question. I see a couple of7 of 10



41/115

8 of 10

interesting tools appearing now http://macaw.co , for example. Thesetools try to solve the problem thatdesigners currently have: Photoshopis very difcult to use for responsivedesign. Stephen Hay has beenadvocating using an entirely differentresponsive workow which uses lots ofdifferent tools and Terminal for HTMLprototypes, for examples. It would benice to have a couple of bulletproofapproaches that would ease the processof design and code of responsivewebsites and applications. The toolswe have are either too general or toospecic, so perhaps thats the gap wehave to ll.

Also, I feel that many of us are stillstruggling with the actual responsivedesign process what tools to use,how the deliverables should looklike, what the workow is, how tointegrate everything into a workingenvironment, where content strategyand performance t within the project.So its not only a matter of tools butrather a matter of workow.

What are some of the fundamentalchanges in the process of web designyou have noticed over the years?

There were lots of them. I saw a majorshift from table-based layouts to CSSlayouts, then a slow shift from xed-width layouts to uid layouts, latersprinkled with shiny AJAXness, andnow we see another major shift towardsresponsive layouts which pushes awayxed-width layout even further away.But also the way we think and approach

Web design has signicantly changed.Our processes have matured andour coding practices have improved.There are still some things that keeprepeating themselves as we movealong in our discipline, and there aresome mistakes that are done over andover again, but we should be proud ofwhat we have achieved, and the toolswe have developed.

I vividly remember that day whenFirebug came out. Now, that was abig, big deal. Now we have lots ofuseful, smart tools that signicantlyempower us in our workow and it hasbeen an amazing fundamental shift inthe process as well. I cant wait to seewhat other tools well come up withover time as Web design becomeseven more mature.

How do you feel about promoting web standards vs. proprietaryfeatures? Any exceptions to this?

Perhaps I am a bit too pragmatic,but I would always choose the mostpractical solution over any theoreticaldiscussion. I am a big believer of Webstandards but I can see the advantageof native applications as well. It really

depends on the budget and theaudience and the requirements of agiven project and return on investment.Sometimes a native application makesmore sense (e.g., if you want todevelop a graphics-heavy, rich gameexperience). I am not quite sure that itcan be done within a short timeframeand with a limited budget using CSS/

JavaScript alone.

TECHNOLOGY

http://macaw.co/http://macaw.co/


42/115

VITALY FRIEDMAN& FUN

What do you do for fun?

Music plays a huge part in my life. Ispend a lot of time listening to newmusic, but you can also nd meexploring old bookstores where I takepictures of old manuscripts. I lovetravelling, especially to unfamiliarand obscure places. Its always greatto have a real change in perspectiveand explore how other people think,work and build stuff. I love observingpeople from other industries to betterunderstand what goes into theirprocess and how they do what they

do. Its always fascinating.

Youre a good writer, any projects(past or future) that you can speak ofthat are not related to technology?

Oh thank you for your kind words! Well,I always want to write more. But I amnot talking about books, or magazinesor articles. I am talking about tellingstories. I have some of ideas of howto combine both meaning and newpersonality in everything I do. Letswait and see how it plays out.

9 of 10



43/115

10 of 10

How does the philosophy of carpediem affect your life?

I used to be a perfectionist, but movingaway from this was denitely one ofthe most signicant changes in my lifewhich helped me become better atwhat I do. Pragmatism is good, andbeing human, and hence not withoutmistakes, is what makes you personal,authentic, honest and real. EverydayI make sure that whatever I do, andhowever I feel, that, at the end of theday I feel that it couldnt have beendone otherwise because I want tomake things that matter, and becausewhat I do matters to me and makesme who I am.

TECHNOLOGY



44/115

app liness TUTORIALSCSS BOOKMARK / SHARE / TO

Language-wideFeatures in CSS

by Louis Lazaris


45/115

UTORIALS LANGUAGE-WIDE FEATURES IN CSS

by LouisLazazris

2 of 5

This article rst appeared onImpressive Webs on August 6, 2013. You canread theoriginal post here.

In addition to the unique property/value pairs that CSS offers, there are also asmall handful of language-wide features that can come in handy, including a fewthat are brand new in the spec.

These often go unnoticed, especially by beginners, because when CSS properties

and their possible values are discussed (in tutorials, books, or even in the spec),these features are usually omitted for brevity.

Heres a summary of four language-wide CSS features.

Every CSS property can accept, as its value, the keywordinherit. Like this:

span {font-size: inherit;

}

What this does is cause the targeted element to inherit the specied property valuefrom its parent element. If the parent element does not have that specic propertydened in the CSS, it will inherit the parents computed value (which could be thinitial value or whatever is inherited from that elements parent).

KEYWORD: INHERIT

There are some language-wide features that come in

handy, some which are brandnew in the spec.
http://www.impressivewebs.com/http://www.impressivewebs.com/language-wide-features-css/http://www.impressivewebs.com/language-wide-features-css/http://cssvalues.com/http://www.w3.org/TR/CSS21/cascade.html%23value-def-inherithttp://www.impressivewebs.com/http://www.w3.org/TR/CSS21/cascade.html%23value-def-inherithttp://cssvalues.com/http://www.impressivewebs.com/language-wide-features-css/http://www.impressivewebs.com/language-wide-features-css/http://www.impressivewebs.com/


46/115


Theinherit keyword can come in handy when you want to assign the same valueto a bunch of child elements for properties that dont normally inherit. For example:

.module {box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);

}

.module div {box-shadow: inherit;

}

Now all elements inside the main.module element will inherit its boxshadow value.

Browser support forinherit is excellent. For a long time, nobody usedinherit

because IE6/7 didnt support it except on thedirection property. Now that thosebrowsers are mostly out of the picture, most developers should feel comfortableusing it.

This one is easy to understand and is newly added in the CSS3 spec (although,technically, as with many CSS3 features, it hasbeen in the works for a while).

Every CSS property has an initial, or default value. By dening the value using thkeyword initial , you are telling the browser to render the property using thedefault for that property.

So basically this is the same as not dening the property at all, so you might thinkits mostly useless. Thats partly true, because you probably wont use this muchBut when you do, it can be handy.

For example, you might want to use initial on a property that gets inherited fromits parent by default, likecolor :

body {color: aquamarine;

}

.example {color: initial;

}

KEYWORD: INITIAL

3 of 5
http://www.w3.org/TR/2002/WD-css3-cascade-20020219/%23initialhttp://www.w3.org/TR/2002/WD-css3-cascade-20020219/%23initial


47/115


The .example element will normally have the same color set as that set on thebody. But in this case, were overriding this by letting the color be reset to its initialstate (which is probably black).

Also, this can come in handy when changing styles dynamically with JavaScripThrough a user interaction or other change, a property can be set to its initialstate, even though it may be dened specically be default.

As for browser support, Im really not sure. It seems to work in the latest Chromeand Firefox, but not in the latest Opera or IE10.

This keyword value used to be called default and has now beenchanged to unset.This is very similar to theinitial keyword. Basically, usingunset as the valuewill erase any explicitly dened value that may have been passed to the elementfor that property, or previously dened elsewhere.

body {font-size: 1.5em;

}

.module {font-size: unset;

}

The difference betweenunset and initial is the fact that the unset value couldbe an inherited value. So in a way, this is kind of a combination of the previous twokeywords. When unsetting a value, rst the browser looks for an inherited valueIf none is found (for example, for a property that doesnt inherit, likeborder-color ), then it sets it to the initial, or default value.

Since this is new, I dont think it has any browser support yet.

KEYWORD: UNSET

4 of 5
http://dev.w3.org/csswg/css-cascade/%23valuedef-unsethttp://dev.w3.org/csswg/css-cascade/%23valuedef-unset


48/115


Finally, this is another new one: theall property. Naturally, this one would not beable to take custom values, so it has three possible keyword values:inherit ,initial , and unset the three keywords just discussed.

The all property resets all properties on the targeted element, with the exceptionof direction and unicode-bidi.

.example {all: initial;

}

The spec points out an interesting use case forall when it says:

This can be useful for the root element of a widget included in a page,which does not wish to inherit the styles of the outer page.

As for browser support, due to the fact that the three keyword it accepts are notsupported cross-browser yet, this property is probably not going to be usable forat least a little while.

You Might Also Like: Dont Forget About transition: all

PROPERTY: ALL

Louis LazarisWeb Developer

HIS BLOG

TWITTER

SHARE

GITHUB
http://dev.w3.org/csswg/css-cascade/%23all-shorthandhttp://www.impressivewebs.com/css3-transition-all/http://www.impressivewebs.com/http://www.impressivewebs.com/http://www.impressivewebs.com/https://twitter.com/ImpressiveWebshttps://twitter.com/ImpressiveWebshttp://www.impressivewebs.com/http://www.impressivewebs.com/css3-transition-all/http://dev.w3.org/csswg/css-cascade/%23all-shorthand


49/115


Animating withAngularJS

by Holly Schinsky


50/115

UTORIALS ANIMATING WITH ANGULARJS

by HollySchinsky

2 of 8


AngularJS recently came out with support for CSS3 transitions and animations, as was JavaScript Animations. The support is part of version 1.1.4 (unstable build), but wchanged and rened a bit inversion 1.1.5 so you should start with that version whenyou check it out. I denitely think its worth trying because it allows you to add sofun interactions to your application quickly.

In this article Ill explain a bit about how it all works and include links to a deapplication I created to try things our for yourself. The source to thedemo application is located on my GitHub accounthere as well. I also included some great resources inthe form of links at the end of the post. Theres currently not a lot of documentatioon this subject since it is so new, so I encourage you to check those out as well.

ngAnimate is the name of the newdirective for AngularJS animation support. Theway its applied is by adding theng-animate attribute to any element containing oneof the following directives in the list below:

ngIf ngInclude ngRepeat ngShow / ngHide ngSwitch ngView

HOW IT WORKS...

HTML5 makes life easierfor us by dening the right

element.
http://flippinawesome.org/2013/08/05/animating-with-angularjs/http://angularjs.org/http://code.angularjs.org/1.1.5/http://devgirl.org/files/AngularAnimationsDemo/%23/https://github.com/hollyschinsky/AngularAnimationsDemohttp://docs.angularjs.org/guide/directivehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngIfhttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngIncludehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngRepeathttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngShowhttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngHidehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngSwitchhttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngViewhttp://flippinawesome.org/http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngViewhttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngSwitchhttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngHidehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngShowhttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngRepeathttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngIncludehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngIfhttp://docs.angularjs.org/guide/directivehttps://github.com/hollyschinsky/AngularAnimationsDemohttp://devgirl.org/files/AngularAnimationsDemo/%23/http://code.angularjs.org/1.1.5/http://angularjs.org/http://flippinawesome.org/2013/08/05/animating-with-angularjs/


51/115


The only exception to the above is when you create your own custom directivewith animation support using the$animator service. This is discussed later in thearticle.

Each of these directives causes a change to the DOM, which is how the transitionor animation is triggered. For instance, on anngRepeat they will occur when theitems are repeating, for ngShow /ngHide , when the element is being shown orhidden. You simply specifyng-animate on your element with the name of theclasses youve dened in your CSS to perform the transitions or animations andthey will be applied automatically. Of course, you need to ensure you specify theng-animate on the same element where you have one of the directives mentionedabove (ngRepeat , ngSwitch etc.) dened or nothing will happen.

Heres a quick example of applying a scale type of transition the shorthand way(read on for notation details):

Then in your CSS, you dene a corresponding set of classes prexed withscale that are used to trigger the transition or animation based on the type of event youwant to animate for that directive. More info to come on this

Certain events are supported for each of the directives you can animate. They varyper directive and its important to know which apply for a given directive whenyoure dening your CSS classes to perform the animation.

Heres the list:

Directive Events

ngIf enter/leavengInclude enter/leavengRepeat enter/leave/movengShow/ngHide show/hide

SUPPORTED EVENTS

3 of 8


52/115


Directive Events

ngSwitch enter/leavengView enter/leave

The AngularJS docs describe exactly when those events occur for each of thedirectives supporting animations. So for instance thengIf docs provide thisdescription for the supported enter and leave events:

enter happens just after thengIf contents change and a new DOM element iscreated and injected into the ngIf container

leave happens just before thengIf contents are removed from the DOM You can use this information to determine when your transitions and animationswill actually be triggered.

ngAnimate can be used for both CSS3 animations and transitions, as well as

JavaScript animations but that is beyond the scope of this article. I wanted totake a moment to briey discuss the difference between CSS3 transitions andanimations.

CSS3 Transitionsapply an effect to a style property for a certain duration. You can do things likefade, scale, move, slide, rotate, 3D effects etc.

CSS3 Animations are more complex than transitions and use keyframes to denedifferent points to do things within the animation. These can be looped and auto-started. In addition, they dont have to depend on a DOM change to trigger them.

The difference in using CSS3 transitions versus CSS3 animations withngAnimate is all in the way the CSS classes are dened. A great example can be found in theAngularJS 1.1.5 docs for ngAnimate. Im including it here too for easy reference:

CSS3 TRANSITIONS VERSUS CSS3 ANIMATIONS

4 of 8
http://code.angularjs.org/1.1.5/docs/apihttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimatehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimatehttp://code.angularjs.org/1.1.5/docs/api


53/115


.animate-enter { -webkit-transition: 1s linear all; /* Safari/Chrome */ -moz-transition: 1s linear all; /* Firefox */ -o-transition: 1s linear all; /* Opera */ transition: 1s linear all; /* IE10+ and Future Browsers */

/* The animation preparation code */ opacity: 0;}

/* Keep in mind that you want to combine both CSS classes together to avoid any CSS-speci city

con icts*/.animate-enter.animate-enter-active { /* The animation code itself */ opacity: 1;}

.an imate-enter { -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */ -moz-animation: enter_sequence 1s linear; /* Firefox */ -o-animation: enter_sequence 1s linear; /* Opera */ animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */}@-webkit-keyframes enter_sequence { from { opacity:0; } to { opacity:1; }}@-moz-keyframes enter_sequence {

from { opacity:0; } to { opacity:1; }}@-o-keyframes enter_sequence { from { opacity:0; } to { opacity:1; }}@keyframes enter_sequence { from { opacity:0; } to { opacity:1; }}

CSS3 TRANSITION SAMPLE

CSS3 ANIMATION SAMPLE

5 of 8


54/115


When usingngAnimate for either of the above, the same syntax would be usedto apply the directive, such as:

I highly recommend reading throughthe documentation for further details on howthis is all handled.

When writing your CSS classes to apply your transitions or animations, you dentwo CSS classes for each supported event (enter, leave, show, hide, etc). One isused as a baseline class and the other is dened as an active class where theanimation actually happens. There is a certain notation you need to use to denethese classes. The base class is named asname-event (ie:slide-enter ), whereasthe active class is named the same with the keyword active appended to it (ie:slide-enter-active ).

For example, using a fade type of effect on anngShow or ngHide would requirethese 4 classes to be dened (since show and hide are the supported eventsfor that directive):

.fade-show { -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; white-space:nowrap; position:relative; over ow: hidden;

text-over ow: clip;}.fade-show-active { opacity:1;}.fade-hide { -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;

NAMING CONVENTIONS

6 of 8
http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimatehttp://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimate


55/115


white-space:nowrap; position:relative; over ow: hidden; text-over ow: clip;}.fade-hide-active {

opacity:0;}

Once you dene all of your animations and transitions, you apply them via thengAnimate directive. There are two ways you can describe which CSS classes touse, explicitly or shorthand. Both are shown below:

Explicit:Here you explicitly name the class to apply for each supported event (enter, leaveetc).

Shorthand:The shorthand way of applying them is through a name only, and then that name with

the event appended is implied as the class name. So for instance, in the following,the resulting class names implied will bename-event or rotate-enter androtate-leave , just as above:

Check out thedemo source or links provided for specic examples to understandthe syntax further.

You can customize your AngularJS animation in different ways using the$animatorservice. You could create your own custom animation events or use the built-inones like enter and leave withng-animate in your own custom directive byaccessing them off the$animator service.

APPLYING THE CSS NG-ANIMATE

CUSTOMIZING ANIMATION

7 of 8
http://devgirl.org/files/AngularAnimationsDemo/%23/http://devgirl.org/files/AngularAnimationsDemo/%23/


56/115


You can also dene custom events using the $animator.animate(myEvent,elementfunction, wheremyEvent is your own String andelement is what to apply thetransition or animation to.

I includedan example of dening a custom directive and custom event in the demoapplication if you are interested in seeing how it works.

Demo Application AngularJS 1.1.5 Docs for ngAnimate nganimate.org Great samples here Really nicedetailed article about the new animations support in AngularJS AngularJS and Animation Slides with demos by Gias Kay Lee Animate your AngularJS apps with CSS3 and jQuery article Misko Hevery video talking about the new animation features Swipe Demo and code usingngAnimate Video showing swipe demo and code All About CSS3 Transitions All About CSS3 Animations

RELATED RESOURCES

Holly SchinskyDeveloper Evangelist

H ER BLOG

TWITTER

SHARE

GITHUB
http://devgirl.org/files/AngularAnimationsDemo/%23/customViewhttp://devgirl.org/files/AngularAnimationsDemo/%23/http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimatehttp://nganimate.org/http://slid.es/gsklee/animation-in-angularjshttp://slid.es/gsklee/animation-in-angularjshttp://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jqueryhttp://www.youtube.com/watch%3Fv%3DcF_JsA9KsDMhttps://github.com/jeffbcross/ngswipe-demohttps://plus.google.com/115279700532270609876/posts/L9q6HFFdrgjhttp://www.kirupa.com/html5/all_about_css_transitions.htmhttp://www.kirupa.com/html5/all_about_css_animations.htmhttp://devgirl.org/http://devgirl.org/http://devgirl.org/http://devgirl.org/https://twitter.com/devgirlFLhttps://github.com/hollyschinskyhttps://github.com/hollyschinskyhttps://twitter.com/devgirlFLhttp://devgirl.org/http://www.kirupa.com/html5/all_about_css_animations.htmhttp://www.kirupa.com/html5/all_about_css_transitions.htmhttps://plus.google.com/115279700532270609876/posts/L9q6HFFdrgjhttps://github.com/jeffbcross/ngswipe-demohttp://www.youtube.com/watch%3Fv%3DcF_JsA9KsDMhttp://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jqueryhttp://slid.es/gsklee/animation-in-angularjshttp://slid.es/gsklee/animation-in-angularjshttp://nganimate.org/http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngAnimatehttp://devgirl.org/files/AngularAnimationsDemo/%23/http://devgirl.org/files/AngularAnimationsDemo/%23/customView


57/115

app liness TUTORIALSWEB STANDARDS BOOKMARK / SHARE / TO

Introduction toTopcoat

by Chris Grifth


58/115

UTORIALS INTRODUCTION TO TOPCOAT

by ChrisGrifth

2 of 8


Topcoat is a brand new open source componentlibrary built entirely on web standards (CSSand HTML) and is available attopcoat.io. It wasdesigned to assist developers and designers increating high-performance web and PhoneGapapplications. This project was announced shortlybefore the 2013 Adobe MAX conference and, infact, the ofcial 2013 Adobe MAX conference appwas built using Topcoat for its user interface.

The Topcoat project originally grew out a need fromseveral teams within Adobe (most notably the EdgeReow and Brackets teams), as well as feedbackfrom the PhoneGap developer community forcomponent set that was light-weight, fast, and easilythemeable. Lead byKristofer Joseph, along withGarth Braithwaite and Brian LeRoux, this project isbeing driven by a great group of developers anddesigners.

HTML5 makes life easierfor us by dening the right

element.
http://flippinawesome.org/2013/08/05/introduction-to-topcoat/http://topcoat.io/https://twitter.com/damhttp://flippinawesome.org/https://twitter.com/damhttp://topcoat.io/http://flippinawesome.org/2013/08/05/introduction-to-topcoat/


59/115


The out of the box installation of Topcoat is incredibly simple:

DownloadTopcoat Open index.html to view the usage guides. Copy your desired theme CSS from the css/ folder into your project Copy the img/ and font/ folders into your project (eel free to only copy the

images and font weights you intend to use ) Link the CSS into your page. For instance, if you want to use the mobile ligh

theme use:

Done.

However, you probably will want to create a custom build of only the componentsthat your app is using.

One important thing to remember about Topcoat is that it is not a framework.Topcoats library can be used along with any JavaScript framework (BackboneAngular, etc). It just a collection of CSS and HTML.

As of version 0.5.1, the library consists of:

Button Quiet Button Large Button Large Quiet Button Call To Action Button Large Call To Action Button Icon Button Quiet Icon Button Large Icon Button Large Quiet Icon Button

GETTING STARTED WITH TOPCOAT

EXPLORING THE COMPONENTS

3 of 8
http://topcoat.io/http://topcoat.io/


60/115


List Navigation Bar Search Input Large Search Input Text Input Large Text Input TopCoat Textarea Topcoat Large Textarea

The library ships with both a mobile-friendly set of components, as well as a desktopfriendly version. Each of these versions is also available in both a light or dark styleEach control lives in its own GitHub repository and has no dependencies (not even jQuery), so you can easily assemble just what your app will need (more on that latein this article). When creating mobile apps (or PhoneGap apps) in particular, havinlightweight components can greatly improve the performance (and thus the userexperience).

As an example, lets look at how to implement a list component:

Category

Item 1 Item 2 Item 3

4 of 8


61/115


As you can see there is not a lot of additional markup to create our Topcoat listcomponent. A containingdiv and few additional CSS classes on theul and li elements. The accompanying CSS is also fairly straightforward. Here is generatedCSS for the dark theme:

.topcoat-list__container { padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; over ow: auto; -webkit-over ow-scrolling: touch; border-top: 1px solid #2f3234; border-bottom: 1px solid #eff1f1; background-color: #444849;}.topcoat-list__header { margin: 0; padding: 0.3rem 1.6rem; font-size: 0.9em; font-weight: 400;

background-color: #3b3e40; color: #868888; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); border-top: solid 1px rgba(255,255,255,0.1); border-bottom: solid 1px rgba(255,255,255,0.05);}.topcoat-list { padding: 0; margin: 0; list-style-type: none; border-top: 1px solid #2f3234; color: #c6c8c8;

}.topcoat-list__item { margin: 0; padding: 0; padding: 1.16rem; border-top: 1px solid #5e6061; border-bottom: 1px solid #2f3234;}.topcoat-list__item: rst-child { border-top: 1px solid rgba(0,0,0,0.05);}

5 of 8


62/115


The structure of the CSS follows the BEM (Block, Element, Modier) model. If yare unfamiliar with BEM, take a look atthis article. This structure greatly helps inunderstanding where and how the CSS attributes are being applied to the HTML.The components in Topcoat CSS are authored inStylus, and utilizes many of itsfeatures to allow for a clean separation of resets, from layout, from aesthetic, andbetween platforms. I personally had not worked with Stylus before, but was ableto quickly pick up their stylesheet language.

Although, the team has taken great efforts enable easy customization of eachcomponent, the heart of the project is the actual performance of each component.The team has set up a complete benchmarking suite to measure the performance.

Source:http://bench.topcoat.io/

PERFORMANCE FIRST!

6 of 8
http://bem.info/method/definitions/http://learnboost.github.io/stylus/http://bench.topcoat.io/http://bench.topcoat.io/http://learnboost.github.io/stylus/http://bem.info/method/definitions/


63/115


If fact, this system is also totally open source and can be used as a stand alone toolfor teams looking to nd ways to measure their own applications performance.

What would a component library be complete without an icon set? Topcoat hasincluded them as SVG, PNG or as a semantic icon font. And, yes, they are alsoopen source.

Recently, the team behindEffeckt.css, a new mobile friendly library for performanttransitions and animations, began exploring possible collaboration with the Topcoatteam. Components and transitions are tightly coupled from an actual user interfaceperspective. Often, it is the transitional portion of the component, for example howan overlay appears, that creates the value of the component to the application.This effort just got underway, so keep an eye out for improvements down the road.

Although the minied version of currently clocks in about 13K, you might wisto trim the library down to just the components that your application uses. SinceTopcoat is built usingGrunt, it is relatively easy to edit the build script to generateyour custom library. Here are the steps:

Fork Topcoat from http://github.com/Topcoat/Topcoat Install Node and runnpm install -g grunt-cli and npm install in the

Topcoat directory. Modify the package.json to point to only the controls you need Rungrunt to generate your custom build

ICONS

TRANSITIONS AND ANIMATIONS

CUSTOM BUILDS

7 of 8
http://h5bp.github.io/Effeckt.css/dist/%230http://gruntjs.com/http://gruntjs.com/http://h5bp.github.io/Effeckt.css/dist/%230


64/115


Generating custom themes is also done through the use of Grunt. Here are thesteps:Fork http://github.com/Topcoat/themeModify various variables les to make your changesModify./topcoat-X.X.X/package.json to point to your theme and rungrunt

Remember, Topcoat is totally open source software. There are bugs, and the teamis still solidifying their architecture, so there are many ways to contribute! Here aresome additional links to get you started:

The main home ishttp://topcoat.io Learn more about Topcoat on the wiki:https://github.com/topcoat/topcoat/wiki Get answers via the mailing list:http://groups.google.com/group/topcoat Request features and le bugs via the issue tracker. Note each control in Topcoat

has its own git repo, thus versions, and therefore issue trackers too.http://github.com/topcoat

Tweet the project on Twitter:http://twitter.com/topcoat

CUSTOM THEMES

WHATS NEXT?

Chris GrifthEngineer

H IS BLOG

TWITTER

SHARE

GITHUB
http://topcoat.io/https://github.com/topcoat/topcoat/wikihttps://groups.google.com/forum/%23%21forum/topcoathttps://github.com/topcoathttps://github.com/topcoathttps://twitter.com/topcoathttp://devgirl.org/http://devgirl.org/http://devgirl.org/https://twitter.com/%40chrisgriffithhttps://github.com/hollyschinskyhttps://github.com/hollyschinskyhttps://twitter.com/%40chrisgriffithhttp://devgirl.org/http://chrisgriffith.wordpress.com/https://twitter.com/topcoathttps://github.com/topcoathttps://github.com/topcoathttps://groups.google.com/forum/%23%21forum/topcoathttps://github.com/topcoat/topcoat/wikihttp://topcoat.io/


65/115


Ractive.jsExpressions

by Rich Harris


66/115

UTORIALS RACTIVE.JS EXPRESSIONS AND THE NEW WAVE OF REACTIVE PROGRAMMING

by RichHarris

2 of 9

This article rst appeared on theFlippin Awesome website on August 19, 2013. Youcan read it here.

Dedicated followers of JavaScript fashion will by now have noticed this seasons hnew trend. If you havent spotted it yet, here are a few projects sporting this style othe GitHub catwalk React, Reactive.js, component/reactive and reactive.coffee.

Thats right: reactive programming is the new black.

At a high level, the idea behind reactive programming is that changes in state propagatthroughout a system. Put crudely, this means that in a reactive system wherea = b *2 , whenever the value ofb changes, the value of a will also change, rather than forevebeing equal to whateverb * 2 was at the time of the statement.

When we take this idea and apply it to user interfaces, we eliminate the DOMmanipulation drudgery that dominates web developers lives.

Ractive.js is a new library initially developed to create interactive (hence the namenot to be confused with Reactive.js!) news applications attheguardian.com. It isdesigned to dramatically reduce the effort involved in creating web apps by embracinthese principles.

Dedicated followers ofJavaScript fashion will by

now have noticed thisseasons hot new trend.
http://flippinawesome.org/http://flippinawesome.org/2013/08/19/ractive-js-expressions-and-the-new-wave-of-reactive-programming/http://facebook.github.io/react/https://github.com/mattbaker/Reactive.jshttps://github.com/component/reactivehttps://github.com/yang/reactive-coffeehttp://www.ractivejs.org/http://www.theguardian.com/ushttp://flippinawesome.org/http://www.theguardian.com/ushttp://www.ractivejs.org/https://github.com/yang/reactive-coffeehttps://github.com/component/reactivehttps://github.com/mattbaker/Reactive.jshttp://facebook.github.io/react/http://flippinawesome.org/2013/08/19/ractive-js-expressions-and-the-new-wave-of-reactive-programming/http://flippinawesome.org/


67/115


Lets look at a simple example:

// We create a new ractive, which renders the following to a container element://

Hello, Dave! You have 4 tasks remaining.

var ractive = new Ractive({ el: container, template:

Hello, {{name}}! You have {{tasks.incomplete}} tasksremaining.
, data: { user: { name: Dave , tasks: { incomplete: 4, total: 11 } } }});
// Later we get some new data:

ractive.set( tasks , { incomplete: 5, total: 12 });

// The ractive reacts accordingly, surgically updating the part of the DOM thatis now out of date://

Hello, Dave! You have 5 tasks remaining.

Rather than doing any kind of polling or brute-force dirty checking, this usean elegant dependency tracking system: the text node containing the number ofincomplete tasks depends on the tasks.incomplete keypath, which is a child ofthe tasks keypath. So when we update tasks, we know that we need to check tosee if tasks.incomplete has changed but we dont need to bother checkingtasks.total , because nothing depends on that keypath.

As applications grow in complexity, this means much less work for the developer You might think it sounds like more work for the browser, but its not. The nonreactive way to do interactive UI typically involves re-rendering views regardlesof whether theyve changed, and replacing chunks of perfectly good DOM (whyhello,garbage collector), which is typically much less efcient.

In other words, reactive UI is a win-win better for performance, and better foryour sanity.

3 of 9
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Managementhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management


68/115


This article wont go any further into the basics of what Ractive does or why webuilt it if youre interested, you canfollow the interactive tutorials or read theintroductory blog post. Instead, were going to focus on one of the features thathelps Ractive stand out from its peers, namely expressions.

Expressions allow you to take the logic that only your interface cares about, and putit in your template where it belongs. Yes, I just said that! If youve ever had to debugbadly written PHP (for example), you may well shudder at the suggestion that logicbelongs in templates. But while its true that business logic doesnt belong in yourtemplates, its equally true that a lot of presentation logic aka data massaging doesnt really belong in your code.

(If you still need convincing, heres a couple of good articles on the subject:TheCase Against Logic-less Templates and Cult of Logic-Less Templates.)

Lets take our initial example and turn it into a basic todo app along the lines ofTodoMVC. Our template looks like this ignore the question marks for now:

Hello, {{name}}! You have ??? tasks remaining.

{{#tasks :i}} {{i}}: {{description}} {{/tasks}}

Meanwhile our model, if you want to use MVC terminology, is a simple array oobjects representing tasks:

tasks = [

{ completed: true, description: Add a task }, { completed: false, description: Add some more tasks }. { completed: false, description: Solve P = NP }];

ractive = new Ractive({ el: container, template: template, data: { name: Dave , tasks: tasks }});

THE SECRET SAUCE: EXPRESSIONS

4 of 9
http://learn.ractivejs.org/%23%21/hello-world/1http://www.theguardian.com/info/developer-blog/2013/jul/24/ractive-js-next-generation-dom-manipulationhttp://www.theguardian.com/info/developer-blog/2013/jul/24/ractive-js-next-generation-dom-manipulationhttp://www.ebaytechblog.com/2012/10/01/the-case-against-logic-less-templates/http://www.ebaytechblog.com/2012/10/01/the-case-ag

Appliness #18 – September 2013

Documents

Transcript of Appliness #18 – September 2013