HTML5 Data- attributes

data-attribute what? ha, so, if you seen these before and have not looked at them yet, these are slick. You can check out the 411 at W3C. Yet as slicker-then-grease they are, they are nothing new for you that do not worry about your HTML passing 100% in the standardization department. In fact, I’ve used this approach, lets see, maybe as far back as 2003 or so. In short, you can add ANY attribute you want to a HTML tag and pull it out in JS. Lets consider the following HTML fragment:

Somewhere in JS land in your source you can add the following:

Reload that bad boy and yup, your log should have a line “yuppers, 2003 for sure” in there. This is great for things like dynamically generating form items that have more complex details behind them, or hey, simple things like ordered/unordered lists with some extra details for processing based on user interactions. Take a look at my example used in the previous post

TAKE THREE!!

Around line 49 you will see that I stick the computed coordinates into the DIV elements as attributes rx and ry. Bamm!

Of course if you are worried about passing that W3C validations, use data-rx and data-ry

DK

Posted in CSS3, HTML5, Techy, Universal Mind | Comments Off

JavaScript and CSS3 transition fun

Today I found myself messing around with CSS3 transitions in order to animate some objects on the DOM. Transitions give you some powerful tools for animating content via CSS properties. Now, we actually have several ways of moving things in HTML5 land: transitions, animations, and canvas.

The latter, canvas, is a bit more involved for moving items. Its much more well suited for heavy animations. You know, games, moving sprites, bitmapping and using lots of low-level code to manage and manipulate it all. Using canvas has some incredible possibilities with modern browsers though. Check these out for some awesome examples: http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

Animations work via CSS properties and remind me of old fashioned animators and their keyframes. Separate topic for you readers out there in another post…maybe! Some major differences include the fact that animations can be repeated as well as have directional changes.

Transitions! Lets talk about transitions then. These cool cats are pretty darn swell. Easy to use and even make use of that fancy GPU of yours. How easy are they to use? Simply set them up and let the browser do the tweening so to speak.

That’s the generic non-vendor specific setup. You can transition oodles of properties, for example, the opacity property. The duration and delay of the transition setup should be clear. What’s a timing function? Can we say ‘easing?’ Yes, easing functions. Remember your basic Calculus class? These are AKA position functions! Where the first and second derivatives are velocity and acceleration functions respectively. Right, umm, whatever you say DK! Yeah, so these functions in short depict the ‘movement’ or position of the transitional property. They can be one of: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier

Here we have a setup telling the browser to transition the opacity property from old value to new value for a 0.5 second interval by easing into it and by waiting 0.1 second.

What do you mean by ‘from old value to new value?’ That is, how to kick this party off? Use the CSS properties Luke! In short, you would set the starting value, eg the ‘old value’, in the CSS class where the transition is defined. You would then either introduce a second class or psuedo-selector with the new value. Of course JavaScript can be used to set the new value as well.

In this example hovering your mouse over the element with id of myDiv will result in a fade out after a short delay.

“Can I transition multiple properties at once?” you ask? Why sure! You can expressly list the properties you want to transition, giving each the same or independent transition data. We do this by using a long-hand notation like so here. Also, we could use the ‘all’ property to animate any property we choose in the same way.

Now, to use this in JavaScript, we can simply add the class to the element. Note that we used a class selector this time around, though its not necessary, just mixing it up a bit.

Hey! We just roped JavaScript into this game!
Alternatively we can use JavaScript to tweak the properties at will and leave the second CSS class out of it

While we are speaking JavaScript, lets see how we could setup the transitions in JavaScript! Not hard at all really and yes, we can use ‘ms’ too.

Now that we got that all covered, how about some live examples, eh?
For the first example, I have some code demnstrating creation of HTML elements in JavaScript along with some CSS and the afore mentioned transitions. We also see two ways to set style info on a element.

Example One

After putting that together, I thought I’d lay out the ‘cards’ in rows and animate them. Looking at the code, you might at first think that each card would animate one at a time. In fact they animate in unison since the code loop is indeed short and real fast, it essential is the same as setting the new locations all at once.

Example Two

After seeing this, I wanted to see how to make one card fly at a time. To implement this I made use of setTimeout(). I probably could have used some fancy closure there, but readability is far more important then fancy code tricks in my book. Thus with the setTimeout() use I basically delay the property setting code a wee bit for each element, hence achieving the affect I wanted.

Example Three

While looking at doing this it occurred to me that we could also have listened in for the transition complete event thrown by the browser. This would look similar to the below code piece. I found this was firing for each property though, so might need a wee bit of work to get things well-defined for your use case. Also note, guess what, yup, vendor prefixes exist for this cat.

What properties can you animate in this fashion? Quite a few actually, but not everything. Here is a list from the W3C. Of course some vendors will opt to add more pain and torture to us mere developers….sigh.

http://www.w3.org/TR/css3-transitions/#properties-from-css-

Speaking of vendors! All the CSS above was using the generic property name. You may wish to add the vendor specific prefixes as needed. They are like so below.

Ok folks, hope you enjoyed this little bit. Remember, be responsible! If you catch yourself thinking of introducing blinking text, 30 lashings to you!

Cheers!

Posted in CSS3, HTML5, Techy | Comments Off

cf.Objective(), presentations, files, and ├╝ber goodness

Last week I spent a few days in Minneapolis for cf.Objective() 2011. It was a intense knowledge packed few days to say the least. Sessions were well populated, diverse, and authoritative covering many topics dear to the modern ColdFusion developer and soon to be modern CF developer. Several UI topics were covered as well covering much in the JS world, Elliot Sprehn talk on Angular really got my attention. JS has come so far since Flex debuted!

While there it was announced that next year is a go for cf.Objective() 2012. Be sure to follow the news and http://www.cfobjective.com/ for more and get out there!

Below are my presentation slides and any associated code for each of my two presentations there.

Cheers!
DK

Flex_ColdFusion_love_affair

flex_components_301

Posted in AIR, ColdFusion, Flex, Techy, Universal Mind | Comments Off

Google’s Chrome browser is evil!

Ok, I admit it, I used a sensational subject line. So what. Google is really the new evil, well we certainly could call it a entry on the top 5 list of fashionably evil companies of late. Will it be on top? We shall see. But I digress.

I’ve been using the Google Chrome browser for several months now. I find it far better then Safari, using less resources, fast, etc. Upon the first install, the beta version of course, I imagine I saw a link to or saw the text of the EULA or TOS flash by in a series of NEXT depresses. It is too bad, some interesting wording was in there, in a place most consumers have become accustomed to not reading at all, legalese, eh? Did you read it dearest reader? I thought so. So what are the interesting parts?

11. Software updates
11.1 The Software which you use may automatically download and install updates from time to time from Google. These updates are designed to improve, enhance and further develop the Services and may take the form of bug fixes, enhanced functions, new software modules and completely new versions. You agree to receive such updates (and permit Google to deliver these to you) as part of your use of the Services.
20.2 From time to time, Google Chrome may check with remote servers (hosted by Google or by third parties) for available updates to extensions, including but not limited to bug fixes or enhanced functionality. You agree that such updates will be automatically requested, downloaded, and installed without further notice to you.

Hmmm….I MUST agree to updates of Chrome, eh? In fact, there is no way to turn this off! On a MAC there are some possible ways around this But WTF? I can’t easily shut this off as a feature? Sure, forcing updates means ultimately a more secure product, but its my choice damn it! Take that away and you are evil, and I don’t mean in the Knievel way. Heck, even the ubiquitously evil Microsoft allows this, eh?

So, that aside, its a great browser and works a treat when debugging my Flash Platform based applications. Oh wait, except for one small caveat. Google decided to bundle Flash Player 10.1 with Chrome. Hey, that’s awesome! Google is helping to spread the Flash wealth, nice. What’s that Steve? Yeah, whatever.

Why would I complain about this? Google Chrome pushes Flash Player 10.1 Release. This is really pretty cool, as then Chrome updates can push out the new plugin in case of, ahem, security issues for one. As a Flash Platform developer, this pains me no end though! Why? Consider this: I work in Flash daily and constantly use the debug player to do that work. I’ve set Chrome as my default browser ( brownie points G? ) I kick off the debugger with Flash Builder and rock the code, yeehaw! A nice “forced upon me” Chrome update comes along with out any real notification that happens to update Flash Player and bammmm! I waste productive time watching Flash Builder spin endlessly trying to connect to a debug player. ugh!

With this setup Chrome literally points to using the packaged Flash Player installed with Chrome. There is no way to directly change things in Chrome to point to using a external Flash Player plugin version. So, that magical update of Chrome can cost me a hour of time when suddenly the Flash Player in use is now the one Google deems apropos release Flash Player 10.1. yikes! Just to be clear here, the setup now IGNORES your system installed Flash Player plugin.

So, what can a developer do? aha!! or beter maybe: SHAZZAM!!!! Form of a pail of settings…oh, sorry. Open Chrome and navigate to about:plugins There you will find a listing of plugins available to Chrome and links to enable/disable. Just disable the stock Flash Player, usually the first on the list, and enable the installed one likely the second entry. Here is a screen-shot of what I’m talking about.

GoogleChromePluginsSettings

Posted in AIR, Flex, misc, Personal, Techy, Universal Mind | 2 Comments

Flash Camp Atlanta 2009

Howdy Readers! So the summer of Flash Camp love is hitting the streets of Atlanta, GA! It will happen on August 28th at the Georgia World Congress Center in downtown Atlanta.

There’s going to be be a awesome mix of some local hotshot Flash Platform gurus as well as some out-of-towner Flash Patform gurus. This list includes Jesse Warden, Ben Stucki, Christian Saylor, Carl Smith, Greg Wilson, href=”http://www.davidtucker.net/” target=”_blank”>David Tucker, Leif Wells, and me (Douglas Knudsen). Topics will cover the gamut of creativity and development using the Flash Platform.

This Flash Camp will be uber special! If you are new to the Flash Platform, come on out for the introductory session geared for people new to the Flash Platform. This early session will provide a overview of products in the Flash Platform line including Flex and AIR. Maybe you are new to the game or a manager needing the 5,000 foot view in order to lead your teams into the future of RIA, this is the schizzle!

August 28th is a Friday too, so after a flood of low-cost high-quality information, you can hit downtown Atlanta for some R-and-R! Within walking distance from the Georgia World Congress Center there is the awesome, biggest, baddest, Atlanta Aquarium. Near to that is the new World of Coke, Centennial Olympic Park, and of course a plethora of places for good eats, drinks, and such in the likes of Midtown and Poncey/Highlands areas.

Get out and register now for Flash Camp Atlanta. That means click the hyper you just read back there now! Group discounts are available and the early bird ends soon!

peas

DK

Posted in AIR, Flex, Universal Mind | Comments Off