Working with JS got you Hoisted?

SO I had a conversation with a co-worker DC Hoth today about some JS funkiness. Not a uncommon thing with JS, eh? Any how, we had this code snippet and at frist blush, looked so innocent. That notion was shattered rather abruptly. The sample went something like this:

On first gaze you’d think line 9 would spit out what? 1 right? wrongo! What is happening here is that JavaScript ‘hoists’ variable definitions up to the top of the function. This means that in reality the above looks like this:

How to avoid this? For one, ‘var scope’ your locals at the top of your function as a best practice. This will help with undefined issues. Note to self….

Posted in CSS3, Flex, HTML5, JavaScript | Comments Off on Working with JS got you Hoisted?

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 on HTML5 Data- attributes

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 on JavaScript and CSS3 transition fun

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 on cf.Objective(), presentations, files, and über goodness

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