Raymond Camden's Blog - Development

Missed MAX 2013? How to catch up...

Fri, 10 May 2013 16:11:00 -0400

This year was my second MAX as an employee and was both exciting - and pretty tiring. If you weren't able to make it though there is an easy way to catch what you missed.

Keynotes

Monday's keynote was focused on our product announcements and featured our first hardware announcements ever - Mighty and Napoleon. If you haven't heard yet, Creative Suite is now Creative Cloud. You can find out more at the FAQ or feel free to just ask me. By the way - the hardware announcements were a complete surprise to me! Tuesday's keynote was cool as well. It focused on four different creatives discussing their process and showcasing their work.

Sneaks

There isn't a filtered list of the sneaks yet, and it looks like they aren't even all online (there were 12 total), but if you go to the AdobeCreativeCloud channel on YouTube, you can find a playlist called Adobe Max 2013. In this playlist are 6 of the 12 sneaks. Unfortunately, both of the Brackets sneaks are not there. I'm going to do a separate blog post on Brackets and what was sneaked later.

Sessions

Finally, you can view most, but not all, of the sessions, on Adobe TV: MAX 2013 - The Creativity Conference. Note: Not all of the sessions are available currently. For example, two of mine are still being encoded. (I'll blog when each one becomes available.) But there's quite a bit ready now and some damn interesting stuff there. (And to be clear, some great developer content!)

How I'd sell unit testing...

Wed, 08 May 2013 14:48:00 -0400

Someone came up to me after my MAX session on web development debugging and asked for some advice on how to 'sell' unit testing to his clients. This was my response:

Simple. Tell the client you feel unit testing is so important that you're willing to talk about it with him face to face. In fact, you'll even fly him to your location. In order to save money though you're going to use a budget airline that skips testing.

Update to my Edge Inspect Viewer

Tue, 07 May 2013 14:55:00 -0400

Many moons ago I blogged about a proof of concept I built that allowed you to view Edge Inspect screen shots via a nice web interface. This was built in Node using the Express framework. I've finally gotten around to doing some updates to it as well as pushing it up to Github.First, I applied the Topcoat UI framework. This is an open source UI framework for desktop and mobile available for forking on Github. Here is a screen shot of the app in action: And here is a shot of the detail view (I'd like to add a bit more detail here): New features include the ability to filter by operating system or device. Here's a filter on Android: So, like it? As I've said before, I'm still rather new to Node so take this code with a grain of salt. You can download (or fork and improve!) here: https://github.com/cfjedimaster/inspectviewer

Using the Progress event in PhoneGap file transfers

Wed, 01 May 2013 16:08:00 -0400

Earlier today I was happy to hear that PhoneGap 2.7 was released. While perusing the changelist, I thought I read that progress events for file transfers were added in this release. However, I was wrong. FileTransfer has supported a progress event for a few months now. But since I figured this out while halfway through a demo, I figured I'd finish it up anyway and share it on my blog.As you can imagine, the onprogress event is a property of the FileTransfer object. It is passed a progressEvent that is - unfortunately - not documented as far as I can see. The code example though gives you enough information I think to deal with it: So from what I can see - you get a property that determines if the total size is known, and if so, you can get a percentage by using it with the loaded property. Otherwise you're just guessing at the time left, but at least you know something is going on. For my demo, I thought I'd build a simple MP3 downloader/player. I googled for 'free open source music' and came across this incredible MP3 by Kansas Joe McCoy and Memphis Minnie: When the Levee Breaks. Go ahead and listen to it. As much as I love indie music and trance, the sound of old recordings like this is like pure gold to the ears. Anyway - I began by creating an incredibly simple web page. It lists the name of the artists and the song along with a picture. I've included a button that will trigger the download. Also make note of the status div I'll be using for - you guessed it - progress events. Here's a screen shot of it in action. Ok, now let's take a look at the code. Starting from the top, the first thing that may interest you is the file system request. I ask for the temporary file system so I have a place to store the mp3. Once I've got a hook to the file system I then enable the button in my web page and start listening for a touch event. The function that handles the download, startDl, creates the FileTransfer object and points it to the remote MP3. I've used almost the exact same onprogress event as demonstrated in the PhoneGap docs. I changed it to write out a percentage when possible and in other cases, simply append dots to the end of a string. That way people know something is still being transferred. The final portion simply handles the media portion. I didn't bother adding any real controls so it just begins to play the track and that's it. (To be clear, this wouldn't be hard to add, just check the Media API for more information.) Watch the video below to see it in action: As a last tip, note that the docs for Media seem to imply that you need a URI, not a file path. On iOS it seems to require a path, not a URI. Thanks to Simon MacDonald for helping me with this.

Check out Brackets Sprint 24

Tue, 30 Apr 2013 09:22:00 -0400

I don't normally do a blog post for new Brackets releases, but I wanted to specifically call out the most recent release, Sprint 24. From the web site, this release includes:

New Quick View: Use your mouse to hover over color, gradient and image values for an in-editor preview.
New Quick Docs for CSS: Press Ctrl+K or Cmd+K on a CSS property to view community generated documentation powered by WebPlatform.org.
Advanced JavaScript Code Intelligence: New JavaScript code intelligence based on the Tern projet. Increased code hinting accuracy, camelCase support and built-in intelligence for RequireJS and jQuery.
Jump To Definition: Instantly locate a function or property definition in your project by pressing Ctrl+J or Cmd+J.
Function Argument / Signature Hints: Press Ctrl+Space inside a function call's ()s to see information on its arguments and their types.
New Project Panel Design: Visual updates to the project panel.
Install Extensions From Toolbar: Install extensions directly from the toolbar.

Here's an example of the Quick Docs support for CSS: And a shot of the hover in-editor preview: But let me pretend I'm Kanye for a moment and talk about the feature I'm really psyched about - the new JavaScript code intelligence. Currently it is only supported in JS files (i.e., not script blocks on a page), but it is amazing how well it works. I was working on a Backbone project last week and the difference in this new engine has truly made a difference in my editing. The previous sprint was the first sprint where I moved to Brackets for a majority of my coding. This sprint just cements it. Remember, you can try this out for yourself, right now, for free, at http://download.brackets.io/.

Code School Kicks Butt

Sun, 28 Apr 2013 10:03:00 -0400

A few weeks ago I blogged about an online course dedicated to Chrome's DevTools. That was my first experience with Code School and I thought it worked very well.This weekend I decided to try their Backbone course. I've been learning Backbone over the past month and as I had a free pass, I thought I'd check it out. The course is very well designed. Each video is approximately 7 or so minutes long, a perfect chunk of content to digest. I've completed the first Backbone course and am mostly through the second, and only once or twice did I need to pause the video so I could mentally "catch up" with the material. Each video is a professional affair. This isn't some guy with a web cam (like most of my videos). I was fascinated by the challenges in the DevTools presentation and was happy to see they worked well in the Backbone course as well. To be clear, these challenges aren't asking you to type exactly a precise line of code. No, if they ask you to do X, then you can (for the most part) write it exactly as you like. I really dig this. Here's a simple example. Imagine you were asked to write a function that added two numbers and returned the result. You could write it like this: Or like so: Most of us would probably prefer the latter. It is more concise and simple. But if you are new to JavaScript, you may be more comfortable with the former. I know when I was learning jQuery, I found many of the examples a bit too hard to parse as they were long lines of things chained together. I intentionally broke those examples up so I could follow the logic better. So as I said - Code School's challenges allow you to write your code as you see fit and not worry about precisely matching some unseen expectation. I love it. Sometimes it doesn't work well. I got some very odd errors a few times. But I never got stuck. Code School costs 25 dollars a month to enroll. Just the one course I took was worth ten times that. Your enrollment covers all of their courses. You can also download the videos and slides so you'll have access to the material later. Want to try it out? This link (for the next 48 hours) will give you a free two day pass (and extend my free trial too :) - http://go.codeschool.com/IyebUA.

Auto-escaping code blocks in Reveal.js

Thu, 25 Apr 2013 10:06:00 -0400

Warning - this falls into the "Cool, but may not be a good idea category." I'm a huge fan of the Reveal.js framework for HTML-based presentations and I've already posted a few of my utilities/tips/etc for making it work better (or at least better for me). One issue I've run into a few times lately is escaping HTML for code slides.Reveal.js has great support for code coloring (color coding?). Here's a quick screen shot of an example: In general this works simple enough. Here is how a typical code slide would look. But if you want to include HTML in your slide then you run into a problem. As you might expect, your HTML will be rendered as, well, HTML, not source code. Typically this isn't a huge deal. Code samples are short and if you type fast, you can replace < and > in a few minutes, but after doing this a few times, and preparing to do some slides focused on HTML5 development, I thought there might be a cooler way. By default, Reveal.js initializes itself immediately. I modified the code to do this after the DOMContentLoaded event and did some hacking: As you can see, I simply make use of querySelectorAll to find all of my code blocks. (I could make that selector a bit more precise.) I then simply grab the HTML, escape the < and > characters, and then update the innerHTML property. Voila!

New Brackets extension - JSDownloader

Wed, 24 Apr 2013 11:14:00 -0400

Over the weekend I was working on a small project and needed a copy of jQuery. I try to avoid the CDN as I find myself at airports without wifi access sometimes so I did what I normally do:

Go to jQuery.com
Click the download link
Click for the latest minified version
Right click, save as

That's what I always do - but it kinda bugs me. I had heard of a tool called Bower that I thought might help. It's a package manager for the web. In theory, it would do what I wanted. I went to the command line, installed it via npm (have I said before how much npm rocks?), and then fetched a copy of jQuery like so: bower install jquery. This worked - and it was epic cool - until I realized how much it grabbed... Ugh. Don't get me wrong - this was still quicker then my old process. And I "get" the idea behind the metadata involved here and why it would be useful in the future. Bower is pretty damn powerful and I definitely recommend folks take a look at it. But what if you just want a copy of the library, one time, and that's it? I decided to whip up a quick Brackets extension as a proof of concept. Clicking the "Run JSDownloader" menu option opens up a dialog of options: Clicking the library fires off a process to download it: And yeah... that's it. Simple, direct, exactly what I need. There's a few caveats though. Right now it only supports "single file" downloads. I've got basic architecture in there to support a list of files, but it isn't complete. The idea is that if you provide a list of files, it will create a subdirectory based on the name of the library (as in: currentdir/jqueryui/) and then copy the resources there. But this isn't complete yet because... The second issue is that Brackets still doesn't support binary file writes in extensions. In theory I could do so if I hook up a Node module to my extension, but... honestly it feels like a bit much. I'd rather just wait a bit and hope for support in a future sprint. Finally, there is no support in Brackets yet for refreshing the project view. So while the extension certainly works, you need to do a reload to see the files show up. So - where did that last of four projects come from? This is kinda cool I think. In order to "drive" the data list, my extension reads from a simple JSON packet. Here's how it looks now: While this file is in the extension itself, my code reads the GitHub version of it instead: This means folks could add a new library by just committing to my GitHub repo. I don't have a nice UI to refresh the cache, but if folks end up using and contributing to this extension, I'll add it. Download/Fork the code here: https://github.com/cfjedimaster/brackets-jsdownloader

Article Posted (Again) : Building a Google Maps Application with Updating Markers

Mon, 22 Apr 2013 08:53:00 -0400

Just as an FYI, today my first article on flippin' awesome! was published this morning: Building a Google Maps Application with Updating Markers In the article I discuss how to create a Google Map that automatically refreshes marker data every few seconds. The idea being that you may have data for moving items (trucks, dragons, users with jetpacks) and your map can automatically update the display in near real time.The article focuses on the client-side aspect of the application with a little bit of time spent on the server-side. I wanted to share one little tip that I didn't think was relevant to the article but that my readers may find interesting. I had originally planned on sharing a live demo of the map with the article. While it is trivial to fire up a Node app, I was curious if I could a) use a subdomain off my main server and b) use port 80 even though Apache was using it for my virtual servers. Turns out this is rather easy. I'll be honest and say I do not grok this code 100% (hell, not even 1%), but it worked perfectly fine both on my local OS X Apache as well as my live Windows server. My read of this is - listen for the domain nodetest.dev and proxy all requests, back and forth, to the server at 127.0.0.0 on port 3000. As I said, I was able to hit my subdomain just fine and Apache handled the proxy perfectly. I ended up not sharing this because my server-side logic didn't constrain truck movement, so after running for a long time, the data points wandered off the main view port.

Another reason to attend MAX - Hack on Brackets and PhoneGap

Thu, 18 Apr 2013 13:44:00 -0400

Attending MAX? Or going to be in LA at the same time? Use Brackets or PhoneGap? Both teams will be hosting a hackathon on Monday and Tuesday from 1 to 6PM. A MAX ticket is not required to attend. There will be free wifi and a comfy place to sit. While a MAX badge isn't required, if you are not registering for MAX you must register on the EventBrite site. For more details, see http://dev.brackets.io/hack/adobemax/. No prior experience required!

Proof of Concept - Connecting a Node app with Brackets

Tue, 16 Apr 2013 14:28:00 -0400

In one of the more recent Brackets sprints, Node.js was added to the core of Brackets. If you read my blog you know I've been playing a bit with Node.js lately. I've yet to deploy any "real" web site/app using Node, but I've built a few applications and demos as a way to help learn the platform. In a recent Twitter conversation the idea of using Node.js within an extension came up and I had a good idea I thought I'd try out.A few months back I blogged about a Node.js project I created called MockData. The idea was to provide a fake datasource of JSON data for client-side testing. So if you needed to prototype an app that would generate a list of people, you would fire up the server and access the resource by passing in query parameters that 'shape' the result data. So for example: http://localhost:3000/?num=rnd:10&author=name&age=age&gender=oneof:male:female&salary=num:150000 This returns: I built the project, released it up on GitHub (https://github.com/cfjedimaster/mockdata) and didn't really think about it again until last week. The app I built is easy to use... if you know Node. But I bet that I could make it even easier by integrating it into Brackets itself. There are a couple of useful links for this. The first being on the Bracket's wiki: Brackets Node Process: Overview for Developers. The second is a sample GitHub project: https://github.com/joelrbrandt/brackets-simple-node I won't repeat the docs, but will encourage you to read them carefully. I'll be honest and say I don't think I grok them 100% quite yet, but I was able to get things working. The warning about abandoned Node processes is a serious one. In my testing I had to force quit Brackets a few times. That's probably something stupid I did. I'll also point out that you don't want to forget about restarting Node on every change to your Node.js code. As you go back and forth between extension code and pure Node.js code, you can forget this. Two things that hit me that are not in the guides were:

For some reason, if I forgot to var scope a variable, I'd get errors. Typically this isn't a critical error. But for my Node.js stuff under Brackets, it was. So I had one non-var-scoped variable in my original Node.js demo that ran just fine as is, but not in Node.js under Brackets.
If you console.dir from Node.js in Brackets, you just get an object Object string. Skip that and use console.log(JSON.stringify(foo)) instead.

So did it work? Heck yes! Here's the menu item I added... Which then fires off the request and presents a nice dialog to the user: At which point you can start playing with it in your JavaScript code. I'm considering adding a nice little icon so that you can click and copy the URL to your clipboard in case you forget. There's also the issue of documentation. I know how to massage the server to get what I want, but I should provide a quick reference guide. Anyway... what do you think? You can download the bits below. If one person says this is cool I'll add it to GitHub.

Join me at Adobe MAX

Fri, 12 Apr 2013 11:47:00 -0400

Still not sure if you're going to Adobe MAX this year? Check out my sessions below: Working Faster and Smarter with Edge Inspect Debugging Your Web Apps Advanced PhoneGap Build Or just check out the entire catalog here. I think we've got a great lineup this year and some really cool speakers. Finally, if the price is a sticking point for you, you can register using the code MXSM13 for 300 dollars off. Every time you do this, a piece of chocolate cake is overnight Fedexed to my house. Don't hold back - sign up today! p.s. Oh, and apparently a little band called the Black Keys will be there too...

New project: Service Data Format Library

Wed, 10 Apr 2013 06:36:00 -0400

Yesterday while on the road (ok, technically, in the air), I thought it might be kind of cool if there was a "library" of common JSON responses. I've used AJAX mocking services before (hell, I've even built one), but if you don't know the "form" of a remote service, then you can't really mock it, right? To be honest, there probably aren't that many services out there that people need to mock, but if you had an example JSON packet you could use right away, I kinda thought that might be useful. I've created a new project on GitHub for this: ServiceDataFormatLibrary. It has a grand total of one example so far, but I figured I'd put it out there and see who wants to help flesh it out.

Check out Flippin' Awesome!

Mon, 08 Apr 2013 14:22:00 -0400

I'm a few days late for this (been a busy couple days) but my buddy and coworker Brian Rinaldi recently launched a new site, Flippin' Awesome. The site covers the entire gamut of web-related articles - from design to code to everything in between. Check it out!

Quick Code Sample - Add your Behance portfolio to your web site

Fri, 05 Apr 2013 07:44:00 -0400

A few months ago Adobe acquired Behance, a sort-of "LinkedIn for Artists" (thanks TechChrunch for that description). At the time I didn't really pay attention, but earlier this week I spent some time on the site and was incredibly impressed. I think it is fair to assume that a majority of my visitors here fall more on the developer side than designer, but I'd still recommend you check the site out. Even as a non-designer, I found the site really cool. It is a pleasure to use. You can also use the site as a way to keep up with your favorite designers. Currently there are over one million users so there's a pretty huge community already. For a good example, check out the work from my coworker Greg Wilson: http://be.net/gwilson Cool, right? I was very happy to see that Behance had an API. I plan on creating a demo of this sometime next week. In the meantime though I noticed that there was no way to embed portfolio data on another site via a simple widget. I thought it might be kind of fun to build that. Every user has a public RSS feed, so I thought there might be a nice little script I could build to allow folks to embed portfolios on their personal site. Turns out, I just started reading a book on this very topic ("Third Party JavaScript"), so what I've written now may be pretty bad. It works of course, but I'm hoping this book gives me some ideas on how to do it better. (And I promise - when I finish the book I'll return to this script and tell you guys what I changed.) I began by creating a simple page. You can see the script tag pointing to my behance script. I needed a way to specify a user so in this case I went with a global variable. It's possible to pass in variables via the query string, but this causes problems if you use async/deferred script tags. Now let's look at the actual script. This may be a bit complex so let me break it down for you. Start at line 43 (notice - I know the Gist displays are a bit broken lately, sorry). I check for the global variable and if it doesn't exist, I exit immediately. Otherwise, I use JSON/P to open a connection to Google's Feed API. This lets me bypass cross-domain security issues as well as turn the RSS feed at Behance into a much simpler JSON structure. One little nit here. Notice that I have to specify a callback function. All of the code on this page is meant to be self-contained. I don't want to leak out into the global variable scope and blow away any code you may have written yourself. But for the callback to work it needed to be visible globally. So to get around that, I create a randomly named function. You can see that logic in lines 5 to 11. Outside of that - the code is relatively simple. Take those results. Draw it into the DOM. And that's it. The CSS portion is a bit messy. You can see it as one ginormous string in line 57. That's probably something I could do better. Over all though I'm pretty happy with the result. I want to thank Greg Wilson for helping me improve the design. You can see the example here: http://www.raymondcamden.com/demos/2013/apr/2/test.html I've got one little CSS issue I'd love some help with. The last thing I did was add the Behance logo to the top header. This pushed over the name a bit. If anyone has a fix for that, I'd appreciate it. If anyone makes use of this code, please let me know.