Tuesday, March 23, 2010

Dreamweaver Next: CSS Media queries

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.

Labels: , ,

Wednesday, March 10, 2010

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

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.


Sunday, January 31, 2010

January 2010 Chicago JavaScript Meetup: I had a great time

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.

Labels: ,

Monday, January 11, 2010

Bookmarklets: Which do you use?

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.


Thursday, December 24, 2009

Pick the next WebAssist t-shirt

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.

Labels: , ,

Wednesday, October 7, 2009

Copy and Paste: The future of Adobe application interaction?

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.

Labels: , ,

Thursday, April 23, 2009

Dreamweaver Design Time Style Sheets and Diagnostic CSS

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.

Labels: , ,

Tuesday, March 3, 2009

Bottom and top Spry tabbed panels on one page

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;
<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;

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>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsBottomTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsBottomTab" tabindex="0">Tab 2</li>

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",
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.


Wednesday, February 18, 2009

Picking out the lint, and other JavaScript handling

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 ( 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.

Labels: , , , , , , ,

Wednesday, January 21, 2009

Web development podcasts, what do you listen to?

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?