Extensioneering

Dreamweaver Next: CSS Media queries

noreply@blogger.com (Danilo Celic) — Tue, 23 Mar 2010 16:18:00 +0000

A while ago I commented on a possible future Dreamweaver feature that allows moving content from Illustrator into Dreamweaver via copy and paste. There's also an updated video: Canvas for Designers.

Adobe's putting out showing off some potential Dreamweaver features at a new blog: Design and Web. One post shows how we may be doing as part of a workflow that assists with development for multiple screen sizes:
Multiscreen authoring with CSS3

I'm excited to get my hands on this feature as mobile is getting ever bigger. Adobe and Macromedia before that have been crowing over the coming of mobile, and the tools seem to be finally trying to sing the same tune.

You may have heard of event bubbling, but now there are Code Bubbles too

noreply@blogger.com (Danilo Celic) — Wed, 10 Mar 2010 22:26:00 +0000

While roaming around today on Hacker News, I ran across Code Bubbles, which is an interesting way to handle navigating through your code by displaying relevant portions of the code you're looking through in bubbles that allow you to blow up new bubbles as you drill down into your code. Be sure to watch the video on the main page as it will show you a bit more about what these code bubbles really are. It's quite interesting.

If you're a Java developer, then you may want to sign up for their beta program. I don't do much Java (maybe 200-300 lines in the last couple of years), but I'd certainly like to see more about how this type of viewing of code will work, especially if could be expanded into the JavaScript realm.

January 2010 Chicago JavaScript Meetup: I had a great time

noreply@blogger.com (Danilo Celic) — Sun, 31 Jan 2010 23:24:00 +0000

So I had been meaning to go to a (relatively) local JavaScript Meetup for several months, but it always seemed to be scheduled when I was on a business trip, out of town on vacation, or some other event that I needed to be at. But on January 28th, 2010 I was able to attend. The format was supposed to be a few lightning presentations (10-15 minutes) followed by a more in-depth presentation. Unfortunately the person that was supposed to give the longer presentation on MongoDB (a built for scale database that uses JSON like structures to store data) wasn't able to make it so one of the event organizers (Zishan Ahmad) stepped up and gave a quick overview from some links provided by the original presenter.

I especially liked the quick presentation done by Jason Huggins on Node.js. It wasn't a dive dive by any means, nor was it meant to be, but I had heard about Node.js a while ago, and never really took the time to look at it. I could tell that Jason was pretty excited about Node.js and because of that excitement I have since read up a bit more on it. While it is focused on being a Server side implementation of JavaScript, it can be used to perform local processing as well from its own console application. I'm thinking about finding a fun little project to explore what Node.js has to offer.

Bookmarklets: Which do you use?

noreply@blogger.com (Danilo Celic) — Tue, 12 Jan 2010 02:38:00 +0000

I've been interested in bookmarklets for quite a while now, starting with a bookmarklet that takes the current page you're at and jumps up a folder which is quite nice when Google drops you a number of levels deep in a site and you want to see what's up a level especially if you end up on a 404 page (An example of this bookmarklet is called "Up a Directory" which can be found on the Bookmarklet.com's Navigation category).

With the advent of Firebug, I've generally been stopped using them less and less often. I do keep Firebug Lite around for working with IE and Safari, and I will pull out MRI, XRAY from time to time and when I have some layout issues I may use Spry Media's Grid and Crosshairs bookmarklets (not to be confused with Adobe's Spry JavaScript framework).

And there's even some bookmarklets out there specifically for working with the Firebug console. For example, there's jQuerify which dynamically adds the latest version of the jQuery library to the page so that you can run some jQuery selector searches (or anything else jQuery) from the Firebug console.

Are there any bookmarket's that you use and what you use them for? Please share a link to the hosting site.

Pick the next WebAssist t-shirt

noreply@blogger.com (Danilo Celic) — Thu, 24 Dec 2009 19:58:00 +0000

Maybe you don't know it, but I work at WebAssist building Dreamweaver extensions, and it's been a while since we've had any WebAssist swag. It seems that that's about to change what with a contest where you get to help decide what the next WebAssist t-shirt will be. I won't try to sway you at all on which is my favorite, so head on over to the WebAssist blog entry and cast your vote for one of 6 different t-shirt styles and you could a $50 Amazon gift certificate.

Note: contest ends 12/31/09 at midnight

Update: Winner of the the t-shirt contest announced.

Copy and Paste: The future of Adobe application interaction?

noreply@blogger.com (Danilo Celic) — Thu, 08 Oct 2009 02:35:00 +0000

So I wasn't able to make it to MAX 2009 due to another project I was working on ( which I'll try to be better at posting and talk about more that later), so I've been hitting all of the Adobe related blogs and aggregators for any tidbit of information I can get my hands on. I was perusing JD's twitter feed and I saw a mention of "Smart Paste" in Dreamweaver that intrigued me. He links to the Smart Pastevideo posted on YouTube.

The idea is interesting, intercept the pasting of content and insert some other content that can then manipulate the pasted content. In the video, they show a vector graphic of a chart copied from Illustrator and pasted into Dreamweaver. What gets inserted is a dynamic CANVAS tag that has its content drawn from a FXG file. They then link up the chart to some data and when viewed in a browser, the chart renders the chart with the data from an XML file. They then show a copying of an animation from Flash and pasted into Dreamweaver. Again a CANVAS tag is dynamically manipulated to display the animation.

As someone that makes his living building Dreamweaver extensions, I'm pretty impressed in how they were able to bend Dreamweaver to their will. I know that pasting Fireworks HTML is processed via teh Dreamweaver extensibility layer, so I'll be sure to investigate how something like this can be done within Dreamweaver. As with all Sneak Peaks, there's the devilish caveat that some things may not make it into any coming release, but it serves well to open the eyes to what the possibilities are with Dreamweaver.

Dreamweaver Design Time Style Sheets and Diagnostic CSS

noreply@blogger.com (Danilo Celic) — Thu, 23 Apr 2009 17:24:00 +0000

From time to time WebAssist ( my employer) in releases some free web development related training/education material called RoadMaps. Recently I contributed to this effort by writing an article on how to use Design Time Style Sheets for page diagnostic purposes. Essentially, what this means is that you can use CSS to visually determine how well your page is doing from a standards/best practices perspective. This is especially useful when taking over pages created by others.

One example discussed in the article uses CSS to cause all links that have an event attached to them, say onclick, to be rendered with a thick red border. This allows you to quickly identify when you may want to move to an unobtrusive method of applying JavaScript on your page. To read more up on the subject, take a look at Diagnostic CSS Styling (Issue 7).

Let me know if you have any questions about the article.

Bottom and top Spry tabbed panels on one page

noreply@blogger.com (Danilo Celic) — Wed, 04 Mar 2009 05:36:00 +0000

I posted a while back about how to create a Spry tabbed panel with the tabs at the bottom of the panel. The changes I suggested will cause other tabbed panels to be broken. I should have warned about that happening in that post, and suggested a different way that allows bottoms and tops to co-exist peacefully. Someone ran into the issue when they wanted to have top and bottom tabs on the same page. Here is what should work to allow both:

1). Add the following code to the head of your document. The styles and functions will be used to make sure that the bottom tabs look and work properly.


<style type="text/css">
<!--
.TabbedPanelsBottomTab {
position: relative;
top: -1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
.TabbedPanelsBottomTabSelected {
background-color: #EEE;
border-top: 1px solid #EEE;
}
-->
</style>
<script type="text/javascript">
<!--
var getBottomTabGroup = function()
{
    if (this.element)
    {
        var children = this.getElementChildren(this.element);
        if (children.length)
        return children[1];
    }
    return null;
};

var getBottomContentPanelGroup = function()
{
    if (this.element)
    {
        var children = this.getElementChildren(this.element);
        if (children.length > 1)
        return children[0];
    }
    return null;
};
-->
</script>

2). Next modify your bottom tabs to look similar to the following code. Note that the main changes from a top tab is that the tabs UL is at the bottom, and that the LIs now have a class of "TabbedPanelsBottomTab" (defined in the STYLE block above):


<div id="TabbedPanels2" class="TabbedPanels">
    <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
    </div>
    <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsBottomTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsBottomTab" tabindex="0">Tab 2</li>
    </ul>
</div>

3). Next, in the constructor for the bottom tabbed panel, change it to (all one line of code if you like):


var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2",
    {
        tabSelectedClass:"TabbedPanelsBottomTabSelected",
        getTabGroup : getBottomTabGroup,
        getContentPanelGroup: getBottomContentPanelGroup
    }
);

The options being passed in tell the bottom tabbed panel to use the "TabbedPanelsBottomTabSelected" CSS class as the class when a tab is selected (this class is defined in the STYLE block added in step 1), as well as override the getTabGroup and getContentPanelGroup methods of the Spry Tabbed panel object to use the functions defined in the SCRIPT block added in step 1.

Now preview your page. The bottom and top tabs should work correctly. Note: The bottom tabs will not look correct in Dreamweaver's design view due to how Dreamweaver handle's the display of Spry widgets is not compatible with the changes made above. In particular, in design view you will likely see the content of each tab, and only see the first tab displayed.

Picking out the lint, and other JavaScript handling

noreply@blogger.com (Danilo Celic) — Wed, 18 Feb 2009 17:15:00 +0000

A while ago I stumbled across a helpful Eclipse plugin called jsLex that helps with working with JavaScript within your applications, and I thought that I should mention it in case someone comes along that is interested in work with Eclipse (and Eclipse based editors) and are doing work in JavaScript. Among the features in the current release that I've found especially interesting are:
Compress/Minify/gzip multiple JavaScript
Concatenate multiple JavaScript (with the ability to specify the order of the files)

But there are a number of other features that I haven't dug into much that could be useful, such as JavaScript Profiling which allows you auto-inject profiling code into your existing JavaScript files. As I said, I've not played with it, mainly as it's not really clear exactly how to go about adding the profile code from the docs. I know that Bob is working on adding documentation for the project so I'm sure that this will be made clearer down the road.

jsLex also includes some "Cloud" functionality, but I'm not there yet, so haven't touched that portion of it at this time, maybe in the future as it seems that a lot of folks are moving in that direction.

The beta version of the plugin also adds Linting JavaScript files with JSLint. As pat on my back, I suggested this feature to Bob Buffone (the developer of jsLex) and he saw the value in it, and was able to add it pretty quickly to jsLex as part of the beta. FWIW: the site lists 1.2.2 as the beta, but the downloaded files indicate 1.2.5 as the beat.

I did run into an issue with jsLEx linting feature when installed into Aptana Studio ( 1.2.1.020234 if it matters) where the Problems panel would randomly remove entries when an entry was double clicked in the Problems panel. Bob tells me that this is Aptana specific, and I do hope that there is a workaround found within jsLex, or an update to Aptana that stops this issue from happening, as it can be annoying when you're trying to nail down some of the issues reported by JSLint. As all things beta, I expect to have a couple of issues here and there, but overall the feature is fairly robust at this point.

I have noticed that the files I've tried linting from Adobe Spry framework will choke JSLint to the point where it will stop reporting "errors". This appears to be mostly due to the coding style the Spry library was written with, not due to functionality issues. As the JSLint site says, it may hurt your feelings, so I do hope the Spry team isn't crying now. ;-)

I had a conversation with Nate Koechley from the Yahoo YUI team when I was at Adobe MAX back in November, and he says that as part of their build process, they always run JavaScript files through JSLint. Perhaps future versions of Spry will consider making JSLint happy part of the coding for future versions of Spry. I'm not religious about JSLint, by any means, but it may be worthwhile to make the effort for Spry.

Web development podcasts, what do you listen to?

noreply@blogger.com (Danilo Celic) — Wed, 21 Jan 2009 16:32:00 +0000

I've been listening to a few web/software development podcasts recently and I wanted to share a few that I find that I make sure to listen to as soon as I find out there's a new one out:
Scott Hanselman: covers software design/development, mostly in an interview format with informative guests as well as thoughtful questions/comments by Scott.

Stack Overflow conversations between Jeff Atwood and Joel Spolsky generally covers the design, development, and progress of the Stack Overflow site, but generally spins away from that pretty quickly, as well as discussion about some interesting questions asked at Stack Overflow.

Boagworld: web design news/commentary from a couple of funny guys: Paul Boag and Marcus Lillington both of HeadScape.

Of course, working at home and being in front of a computer all day, I've yet to move any podcast onto a pod, but who's to question the coining of a new term, it's not like I've ever been accused of using fauxcabulary, right? ;-)

So tell me, what podcats do you listen to that you'd recommend to another developer?

Getting the "skinny" on skinning Spry menus

noreply@blogger.com (Danilo Celic) — Fri, 19 Dec 2008 04:18:00 +0000

Massimo Foti is ever tweaking code he runs across and is probably the biggest reason I ever got into Dreamweaver extensions in a big way. Lately it seems that some of his spare time has been turned on Spry. He recently announced in the Adobe Spry forum that he is releasing a set of skins for the Spry menu bar in Office 2003 styles: Silver, Green, and Blue.

I've thought a good bit recently that skinning Spry widgets would be quite useful, as nobody likes out of the box styles these days. I mean, imagine a Spry version of Themeroller!

Spry 1.7 feature preview updates SpryData for basic xpath functionality

noreply@blogger.com (Danilo Celic) — Tue, 16 Dec 2008 19:39:00 +0000

Looks like some action on the Adobe Spry Framework front and a preview of a change that the 1.7 release will bring. Better basic xpath support in the Spry Data sets are set in the preview that can allow users to avoid including xpath.js which can save ~72kb according to the post on the Spry Team's blog.

I'm looking forward to seeing what else might be included in the 1.7 release. I think that it would be good if the Spry team could post a roadmap for the Spry framework so that we can see what sort of widgets and functionality are being planned. This would allow people to be able to comment on what is proposed, as well as give Spry widget developers some ideas on what to avoid working on so as to prevent duplicate work.

Pesudo Threading in JavaScript: Watch what you're doing

noreply@blogger.com (Danilo Celic) — Sat, 20 Sep 2008 15:13:00 +0000

I was working on some debugging and I wanted to do some logging of some variables that were going through numerous changes. However I didn't want to be littering my code with all the debug/logging code, you just know that I'd leave some of it in and cause me to do more searching and potentially have additional errors down the road.

Anyway, I ended up using the JavaScript object watch method when working with simple values by adding the watch to the parent object. This allowed me to keep my debugging/logging code in just a couple of places. The watch method also allows you to perform data validation by intercepting changes to values.

A basic example:


// Basic logger object
function Logger(){
    this.loggedItems = [];
    this.logItem = function(itemToLog){
        this.loggedItems.push(itemToLog);
    }
    this.showLog = function(){
        alert(this.loggedItems.join('\n'));
    }
}
// Create an instance of the logger object
var myLog = new Logger();

// Basic object
function Person(){
    this.age = 0;
   
    // add watch on age property
    this.watch('age',
               function(prop, oldVal, newVal){
                   myLog.logItem('setting ' + prop + ' to ' + newVal);
     return newVal;
               }
    );
}

// Create new object
var p = new Person();
// set value
p.age = 80;
// drink from the fountain of youth
p.age = 70;
p.age = 60;
p.age = 50;
// Let's see that log
myLog.showLog();
// result:
// setting age to 80
// setting age to 70
// setting age to 60
// setting age to 50

So what this does is to react any time that age is changed. So when age is changed, a function intercepts that change and is passed three parameters, the name of the property that was watched, the old value of the property, and then the new value of the property. This function then returns the value that will be used as the value that is actually assigned to the property when it is changed. In this example, we aren't doing any validation (you know a person can't be -12 years old right?), so we could check the value and if it isn't a valid value being assigned to the property, then we can return the old value and effectively not make any change to the property.

What we are doing instead is logging the new value. This allows us to track the changes to this property as the application runs. In this simple example, we just just show the log after a couple of changes. You could expand this to more of your simple value properties.

When I'm done debugging I just pull the code from the parent objects rather than from many places within the application. Still prone to leaving in some logging code, but it seems less so than logging at every point the property is changed.

A caveat: Changes to an object or adding an element to an array aren't handled with the watch method as the "value" of the property being watched isn't changing, that is, the array contents are changing, but it's still that same array, and it's the array that is being watched, not the contents of the array, same thing with an object.

Of course there are other ways to log and may be some better ways to add the logging in that would even further limit any issues when the debugging is over, but I just wanted to get across the basic usage of the watch method.

So what's with the "pseduo threading" in the post title? Well that is basically from the processing that occurs, it steps through executing each line as it reaches it, until the assignment of the watched property, the processing then breaks off to the function passed into the watch method, does what ever processing needed, then execution picks up where it left off on the next line after the property assignment. So it's sorta "threaded" in that the other code gets executed without being directly called in the code, but it's pseduo in that it's actually executed inline.

Alright, I think that's enough rambling for now.

Help for creating custom Spry transitions

noreply@blogger.com (Danilo Celic) — Sat, 16 Aug 2008 16:16:00 +0000

I've mentioned one way to add more transitions to Spry in Upping Your Transition Count, but that assumes that you have pre-created easing equations. What if you none of the ones you've found meet your needs? Well you can create your own...if you know how to write one. All I've seen in my research is that your function needs to work like f(0) = 0 and f(1) = 1, but really what does that mean to someone that doesn't work with math functions much, and what is the 0 and 1 in this case when easing equations take 4 parameters (at least that's the case with Spry and Robert Penner's equations)?

To be honest, I really don't know (at least not yet), but I have found a tool that can be useful in creating a custom equation. Check out the easing function generator, a Flash application that allows you to use drag and drop or directly enter in some values to see what your easing equation will look like. For use with Spry, make sure to select the F5/FMX radio button at the top of the application. Drag and drop the numbered boxes at the bottom which will change the graph of the curve on the left. Then to see how the new equation changes the movement of an object, click on the red ball, then click elsewhere in the movie and the ball will move to that second location using your equation. Rinse lather, repeat as necessary to get an transition equation that you like.

Once you have an equation, copy the text of the function and paste it into SpryEffects.js at the end of the built in equations. Make sure to give the equation a unique name, and put a comma at the end of the previous equation. growSpecificTransition is the last transition in the default SpryEffects.js file (at least in 1.6.1), and the resulting code would look similar to:
growSpecificTransition: function(time, begin, change, duration)
{
if (time > duration) return change+begin;
var pos = time/duration;
return begin + (5 * Math.pow(pos, 3) - 6.4 * Math.pow(pos, 2) + 2 * pos) * change;
},

myNewTransition: function(t, b, c, d) {
var ts=(t/=d)*t;
var tc=ts*t;
return b+c*(17.495*tc*ts + -42.84*ts*ts + 35.695*tc + -11.2*ts + 1.85*t);
}

Once you add that to your copy of SpryEffects.js, then you can use your new transition like you would any other transition. For example, an accordion could be written as:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {transition: Spry.Effect.Transitions.myNewTransition});

Or because SpryEffects.js automatically adds all transition off of the Spry obejct, youc an use:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {transition: Spry.myNewTransition});

You can also try to integrate your new equation into the Spry Effects Transition Sample (online, or within the Spry download package: /samples/effects/transition_sample.html). Just add your equation to the SpryEffects.js for the sampler and add the name of your equation to the transitions select list, and you should be good to go.

Please post a link to any examples of any fun easing equations you've come up with. Also, if you happen to know how to write easing equations and can explain how in layman's terms, please do post your explanation, thanks!

Speaking at MAX 2008: Extending Spry Framework

noreply@blogger.com (Danilo Celic) — Wed, 30 Jul 2008 18:08:00 +0000

I added the speaker badge a few days ago, but forgot to mention that I'll be speaking at MAX 2008 in San Francisco in November. The title of the session if Extending the Spry Framework, and I'll be giving it on Wednesday, November 19th at 9:30 am - 10:30 am. Check out the session browser select Spry from the Product list to see the Spry related sessions. Here's the session description:

Move beyond the standard widgets, transitions, and effects available with the Spry framework. We’ll explore how both novices and power users can enhance their work by extending existing widgets to add new functionality, building new widgets with custom transitions from powerful Spry base components, and combining multiple visual effects to enhance the user experience.

If you have any thoughts on what widgets you'd like to see added to the framework, please do leave a comment so I can try to work it into the presentation.

If you're coming to MAX, please stop by and we can talk Dreamweaver and Spry!

Conceptual condensation: meaning scales

noreply@blogger.com (Danilo Celic) — Wed, 02 Jul 2008 22:41:00 +0000

Well, I guess that didn't take long, only about 10 minutes since the last one, so here's another in the series.

Hitting one of my frequent blog stops I ran into "meaning scales" on gapingvoid, in particular this quote:

The size of the endeavor doesn't matter as much as how meaningful it becomes to you.

Source: Meaning Scales, People Don't

Conceptual condensation: choice architechs

noreply@blogger.com (Danilo Celic) — Wed, 02 Jul 2008 21:48:00 +0000

Every once in a while I run into a word or term that just seems to resonate with me, and not necessarily because I agree with the concept the words are trying to convey. Find the term for the first time will just make me sit back and think for a while. I've already blogged about one such term: cognitive heatsink.

I ran across another resonating term this afternoon. I've tracked Stephen Few's blog for a bit now. He has an opinionated view on data visualization. I don't know about you, but I like it when folks have a strong passion for something and can articulate that passion, especially if they are strong opinions weakly held. That is, no "staying the course" just because you decided on the course and no amount of new information can ever cause you to change your mind. Anyway, when I read his review of Nudge: Improving Decisions About Health, Wealth, and Happiness I ran into the term: "choice architects".

It's not clear if the term is pulled from the book itself, or is just Few's way of discussing the book, but it just seemed to strike a chord with me regardless of its source. I think that it has stuck with me because I'm finishing up the specification stage of a project where I feel that we've put quite a lot of effort into balancing the huge number of potential choices that could be made by the user against the much smaller number of choices that most folks will want to be able to make most of the time. So I'll be thinking of myself as a choice architect in future projects, and I hope that keeping this new concept in mind will make me better at what I do. That's one reason I'm blogging it today as I can go back later and see if this term really has stuck with me, or if it is just another passing fancy.

As this is the second time I've blogged about a term that rolled around for a while in my brain, I think that I'll make "conceptual condensation" a recurring post topic. If you have a term that just seems to stick with you for a while, even if you don't know why at the time you first ran into it, please post the term, your thoughts on why it resonates, and if appropriate include a link to where encountered the term.

Please note: I didn't say or mean condescension in the post title. :-)

How to Create Spry Tabbed panels with the tabs at the bottom

noreply@blogger.com (Danilo Celic) — Wed, 02 Jul 2008 15:06:00 +0000

Spry Tabbed panels in 1.6.1 allow you to have your tabs at the top or on the left. Dreamweaver CS3 & CS4 (try the CS4 beta) will allow you to insert the tabs on the top, but it's pretty easy to change to vertical tab on the left by swapping out the class for the widget wrapper from TabbedPanels to VTabbedPanels. See the Spry Tabbed Panels documentation for more info on how the default tabbed panels work.

However, if you want you tabs to appear on the bottom of the panels, then you're outta luck, by default that is. Fortunately the Tabbed Panels are pretty easy to tweak to allow you to have your tabs on the bottom, by making three small changes. The first is to reorder the code that comprises the widget such that the container for the tabs is after the container for the panel content. So you move from:
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>

To:
<div id="TabbedPanels1" class="TabbedPanels">
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
</ul>
</div>

This change allows for easy display of the tabs at the bottom, because the tabs are now below the content panels.

Then you need to tweak the CSS a bit. You can change the code in the SpryTabbedPanels.css, but you may need the default for some other tabbed panel instance. So if you add the following style block to your page (or add it to a separate CSS file):
<style type="text/css">

</style>

If you compare the selectors to the matching styles in SpryTabbedPanels.css (.TabbedPanelsTab selector lines 67-83, and .TabbedPanelsTabSelected selector lines 105-108), you'll note that there are only two changes, moving from "top:1px;" to "top:-1px" for .TabbedPanelsTab and moving from "border-bottom: 1px solid #EEE;" to "border-top: 1px solid #EEE;". These changes will allow the bottom tab to overlap the bottom of the content making it look seamless for the "selected" tab.

So two down, one to go. The next change is in the JavaScript to allow the Spry Tabbed Panales widget to recognize the reordered tabs and content panels. As with the CSS, I'm putting this code into the page itself rather than modify the Spry files. Add the following to your page (pulled from SpryTabbedPanels.js lines 124-133 and lines 144-153):
<script type="text/javascript">

</script>

The only changes here are moving from "return children[0];" to "return children[1];" in Spry.Widget.TabbedPanels.prototype.getTabGroup.

Both changes reflect the change in order of the tabs and the content panels within the Tabbed panel wrapper div (<div id="TabbedPanels1" class="TabbedPanels"></div>).

Save and preview your page and viola, bottom tabs on your Spry Tabbed Panels.

A couple of things to keep in mind. Dreamweaver won't properly display your tabs and content panels in design view, so you'll lose a bit there, and if your content panels are of differing heights, sat tab 1 content is 200 pixels high and tab 2 is 50 pixels high, then switching tabs will cause the bottom of the tabbed panels to move up and down (taking with them the tabs too).

The former issue can't be worked around without mucking about a good int in Dreamweaver's internals, the second probably can be worked around by setting specific heights for the content areas and then maybe setting an overflow:scroll to allow for content that is too tall to the height you set. I haven't tested that type of change, but should be something like that.

Upping Your Transition Count

noreply@blogger.com (Danilo Celic) — Wed, 18 Jun 2008 02:35:00 +0000

No, I'm not becoming all health conscious, just looking at adding more transitions to those already present withing Adobe Spry's effects library.

Spry includes a few transitions which you can check out in the Effects Transitions Sampler, such as Linear, Sinusoidal, and Pulsate. For a complete list of build in transitions, check out Working with Spry Effects, and scroll down to the "Transition overview" section.

Transitions are within the Spry.Effect.Transitions namespace object located in SpryEffects.js within the Includes folder in the Spry download package. Once that file is open, you'll see the supported effects defined as functions attached to the Spry.Effect.Transitions object. This functions are commonly referred to as easing equations, and are in a specific format, so unless you're familiar with the math involved in creating an easing equation { f(0)=0 and f(1)=1 }, then I suggest you do what I've lazily done and look for pre-exisiting easing equations to play around with. And for that, we have Robert Penner's to work with, or at least start from. So you could take the equations you find at Penner's site and then modify them for JavaScript, but handily, a number of folks have already done that, and one such example is at YUI.

Now, the YUI code has the equations in a YAHOO.util.Easing name space, so you don't want to copy that out, so near the beginning of the code sample drop:

YAHOO.util.Easing = {

and at the end, drop:

};

So if you grab all of the code that lies between the two snippets listed above, and then you paste it into SpryEffects,js between lines 81 and 82, then you'll have the listed easing equations available for use in transitions for your effects and widgets. Important: give credit where credit is due, make sure to copy the copyright info for the easing equations along with the equations themselves! As the equations and Spry are both BSD licenses, they mix together well, but pay attention when mixing open and closed source code.

Please note that by default, all of the transitions are added to the Spry object directly (As of Spry 1.6.1 that is done in SpryEffects.js lines 83-86), so if you write your own equation, or use someone else's, please make sure to check the name of the function and ensure that there's no naming conflict because of the potential for overwriting another Spry object's, or for your transition to be overwritten by some other code. For example, naming an easing function Effect, would cause your function to be assigned to Spry.Effect, which would cause an issue for you (or anyone else) that needs the default Spry.Effect object.

So if everything has gone correctly, you can now enjoy 16 new transitions along with the original 8 that are part of Spry 1.6.1.

If you have run across any other transitions or effect tidbits, trivia, or interesting findings for Spry, or that you feel might apply to Spry, please leave a comment so we all can press forward!

Nested Spry Collapsible Panels

noreply@blogger.com (Danilo Celic) — Tue, 03 Jun 2008 23:31:00 +0000

I ran into a project where I wanted to be able to use nested Spry collapsible panels in Spry 1.6.1 but I saw that when I expanded the child panels that they expanded over the border of the parent panel. I'll try to get a sample up soon to show how it didn't work correctly for me. But in the mean time, you can fix it by opening up SpryCollapsiblePanel.js (within a SpryAssets folder is you added the panel via Dreamweaver) and go to line 431, which reads:
this.content.style.height = this.toHeight + "px";

Change that to:
this.content.style.height = "auto";

And you should be good to go. The first fix I had tried set the height to an empty string which worked for any panel that doesn't have a height set in the CSS for the content. If you do have a height set in the CSS for the content, then setting the height to an empty string causes the CSS to take effect and if the CSS height is different than the height that Spry determined the content of the panel to be when the panel opens, then you could get some jumping as the animation finishes and then the height adjusts to the value set in the CSS.

All that and the Kitchen(Cognitive Heat)sink

noreply@blogger.com (Danilo Celic) — Wed, 28 May 2008 21:35:00 +0000

I saw a fascinating keynote speech (video, transcript) the other day by Clay Shirky author of Here Comes Everybody where he discusses what he terms cognitive heatsink. Checkout what he as to say about Gin, TV and Wikipedia and where exactly people do find the time. I've been thinking about this speech for a few days now and just the name of the concept really struck home for me and I have it in my notes widget in my Vista sidebar as a constant reminder until I get struck with the next meme to flow through me.

For more on Clay check out Coding Horror's take on him which has a video where Clay discusses some of the concepts in his new book. I especially like how some technology becomes so important to our social interactions that it practically becomes invisible to what we are doing.

If you've seen either or both, what are you thoughts on what Clay talks about?

Are CDNs for JavaScript libraries a good idea?

noreply@blogger.com (Danilo Celic) — Wed, 28 May 2008 20:59:00 +0000

I was reading Ajaxian and I see that Google has launched what seems to be a CDN (content delivery network) for JavaScript libraries, in particular the following libraries are currently supported:

The discussion over at Ajaxian has it's share of folks in favor as well as detractors and I understand the potential issues where you'd now be dependent on Google's goodwill and server uptime for your site to function properly, but that you could get a potential speed boost as well some caching benefits as well. I knew that dojo was available via a CDN from AOL already, so it seems at first to be a good idea to "prime the pump" of user browser caches, but I'm wondering if this is really it's cracked up to be.

The Google Ajax API entry specifically calls out speed as a benefit of this service, but the Google Ajax Libraries API doesn't list any real world, or theoretical usage stats. I'm sure Google's data centers are plenty fast, but if anyone has done any testing to back this up, I'd really like to see it so we all can see the potential in this. And if it is a Good Idea™ then I'm wondering if Adobe's Spry should jump on that bandwagon too.

So if you have any thoughts on JavaScript libraries, especially any testing done with CDNs, it would be good to hear from you. Comment away!

MAXin' and likely not relaxin'

noreply@blogger.com (Danilo Celic) — Wed, 28 May 2008 15:00:00 +0000

Registration for Adobe MAX North America has been opened and they have posted a bit of information about the tracks and pre-event labs. From folks that I've talked to it seems as this event is going to be quite big, bigger than previous years, where it was damn big. Check out the latest information about the San Francisco event: http://max.adobe.com/na/

I've not been able to make MAX for a few years now, not even when it was in my backyard so to speak last year when it was in Chicago, but I did enjoy the 2005 event in Anaheim (check out video #5, that's me, boy is it painful watching yourself speak, I hope I don't use that many ums and ahs all the time!). I gave a low level view of getting started with Dreamweaver extensions. It is a large event so it can be tough making sure you're able to attend all the sessions and speak with all of the presenters that you'd like to, but it's quite the experience.

Beta get a bucket

noreply@blogger.com (Danilo Celic) — Wed, 28 May 2008 04:03:00 +0000

Looks like the Dreamweaver and Fireworks teams are taking a more open approach to validating the work they've done so far with the updates for the CS4 release and have put out to the world beta offerings of Dreamweaver CS4 and Fireworks CS4. I also see that there are some videos on Adobe TV, take a look at the Dreamweaver CS4 feature videos. I've not looked much at the Fireworks offering just yet, but the Dreamweaver feature descriptions look intriguing and what was shown in the videos offers a great look into what has been cooking up in the labs of Adobe.

I'm not overly impressed with the new look of the application, but I knew that they would be going that way given what was done with I think Photoshop and Flash among others in the CS3 releases. I hope that I grow used to the all gray all the time look.

I think that of the features called out in the "New Features" list I'll be most interested in the JavaScript code hinting as I've often turned to JSEclipse an Eclipse plug in for editing JavaScript files when I'm working with some library code with lots of objects that I don't know intimately, or that have a good bit of nested object namespacing such as YUI or Spry . I'll also be playing around with Live View, Related files, and HTML data sets, which I assume Spry uses as it has HTML data sets.

So grab a bucket and go check out the betas!

Starting out on the curve

noreply@blogger.com (Danilo Celic) — Wed, 28 May 2008 02:50:00 +0000

I've been involved with Dreamweaver since I got a copy of Dreamweaver 1.2 ( for free on a CD that came with a British technology magazine that I don't recall the name of). I think that Dreamweaver 3 was about to come out or that it was just out and the 1.2 freebie was the incentive was to get 3 with an upgrade price. I was immediately struck with how lacking my then svelte Notepad-Netscape 3 driven development seemed so lacking. :-)

From there thinking back a bit, it seems that the learning curve really hasn't flattened out.

After getting Dreamweaver 4 and Fireworks 4 studio I really started looking more at the way that Dreamweaver was truly built to be extended and I rooted around in the configuration folder and learned a ton. I struck up some friendships on the Dreamweaver forums and on the recommendation of Angela Buraglia I volunteered and was accepted to join Team Macromedia for Dreamweaver in early 2002 or so (has it been that long already?). With the Adobe purchase of Macromedia a couple of years ago I became part of the Adobe Community Experts with my primary focus still being Dreamweaver. Along the way I've written a number of articles and tutorials at CommunityMX a great resource site for all things Adobe, contributed a chapter to a book and have been the technical editor for quite a few Macromedia and now Adobe product related books.

I'm working at WebAssist (3 years June 1st this year, time files) where I mainly build extensions for Dreamweaver using the fantastic extensibility layer as well as coding ASP (JavaScript & VBScript), ColdFusion and PHP.

But as with all things, nothing stays the same; so I'm always looking for something to learn to stay on the up good side of the curve (notice a trend here? I'm parenthetical)(he says parenthetically). I've been doing a good bit of playing around and reading up on JavaScript libraries including Adobe's Spry, Script.aculo.us jQuery, and MooTools among many many others and how they can be used to enhance the user experience. When WebAssist had their latest redesign I helped put in some Moo.fx flavored actions. Intriguing also are content replacement/enhancements such a sIFR, swfIR and SoundManager. I've also been thinking a bit about the possibilities that Adobe AIR (and by extension Flex) offers to web developers like me by bringing the technologies I know to the desktop.

I hope to be able to keep on learning new and interesting technologies as well as learn about new ideas and trends, both in the realm of the technology I work with and the greater world at large. So join me and I'll join you in this fantastic learn experience that is life.

Well I guess that's enough linking around, so I'll sign off this initial post.