Hey, You Got Your Web Platform Docs in my Brackets!

bracketsI was recently talking to Adam Lehman, product manager for Brackets, about ways I could potentially help contribute to the product, perhaps by writing an extension or two.  I wanted to learn how to write a Brackets extension, but I also wanted my efforts to go into something people would find useful, something of real value.

It turned out, the timing of our meeting was perfect.

Continue reading

Controlling Reveal.js Presentations with an Apple Remote

Lately I’ve been building all of my presentations with Reveal.js. It’s great to be able to talk about all the latest HTML5 technologies all the while using HTML5 to drive very compelling presentations.  Where possible, I can demonstrate new technology right in the presentation itself. The one thing I hadn’t been able to figure out was how to remotely drive my Reveal.js presentations while I’m standing 10 feet away from my computer.

Continue reading

Test the Web Forward

The Web is constantly evolving, new W3C specs are being hashed out all the time.  Partial and full implementations of these new specs are showing up in different browsers all the time.  But, if we as a Web community want the Web to evolve, and want people to really trust their businesses and technology on the Web as a platform, there needs to be tests in place to ensure that new specs are implemented consistently, correctly, and meet our expectations.

Test the Web Forward arose from that need.  Representatives from the W3C, Google, Mozilla, Microsoft, Opera and Adobe put together hackathons around the world to teach people about new Web features and to get people to help write tests against these features.

I highly encourage you all to at least get on the mailing list and follow @testthewebfwd and #testtwf.

If you’re going to be in the Seattle area on April 12-13, 2013, you should definitely check out the Test the Web Forward – Seattle event, being hosted by Microsoft.


Asynchronously Loading SVG

If you have some beautiful interactive SVG that you want to embed into your web page, the best option is generally to inline the SVG into the HTML itself.  Then you have access to the SVG DOM and can provide all the interactive behaviors you can dream up.  The problem is, if you have a large SVG file, your HTML quickly gets polluted with all of the SVG content. Continue reading

Building Data-Driven Web Applications with WordPress (WordPress App Design part 3)

In the last post in this series, we built a REST interface to our server data, which consists of Events and Venues. The REST interface provides the functionality to perform all the necessary CRUD (Create, Read, Update and Delete) operations from a client (e.g. a browser or Curl from a command line) and makes use of WordPress roles and capabilities to determine whether the user making the request has the necessary permissions to perform the requested operation.

Our goal in this post is to create a well-structured data-driven Web Application embedded in a WordPress page that makes use of good modern design patterns and leverages the REST interface we built in the previous tutorial. Continue reading

Building a REST interface with WordPress (WordPress App Design Part 2)

Ah, REST… I could definitely use more of that these days.

This is part 2 of the series on Modern Web App Design with WordPress. In the first article I discussed how I’d like to use WordPress to build a modern web application with a REST interface to the server, and an MVC framework such as backbone.js to build dynamic data-driven UI components that can be embedded in WordPress pages.

In this article we’ll be discussing how to build the REST interface using the wp-mvc plugin, taking advantage of all that WordPress has to offer while building a flexible interface to your server. Continue reading

Twitter Boostrap Typeahead Tutorial

Twitter Bootstrap provides an autocomplete/typeahead component which is very easy to use, but is a bit tricky to use (in my humble opinion) when you are working with anything more than a simple String array as your source of autocomplete options. Continue reading

HTML/JS Code in WordPress Posts & Pages

Sometimes, you want to enter a bit of HTML and/or JavaScript into a WordPress page or post.  You can switch to the HTML editor to do this, but very often WordPress will mess with your code when you switch back to the visual editor.  There are plugins which can disable this, but you dont’ necessary want to disable this globally on your site. Continue reading

Modern Web App Design with WordPress – Part 1

I’ve been spending a fair amount of time lately thinking about whether WordPress is a viable platform for building modern web applications. Browse the Web and you’ll find a ton of people saying that WordPress can be used for a lot more than simply blogging. But what exactly does that mean? When is WordPress simply inappropriate and where does it shine? And, if you are going to use WordPress, can you use modern design patterns for web application development? Continue reading

It’s Curtains for You!

I recently went over to the cnet.com site and was confronted with an ad that really surprised me.  The whole home page itself became a set of curtains that parted to reveal an ad from IBM.  The texture of the curtains themselves was the home page.  Of course, this was faked out with Flash.  If you look carefully the curtain texture isn’t exactly what was on the page, but it’s close enough that you don’t really notice. But then I thought, I bet I could do that easily with CSS Shaders, and with the actual content as texture to boot. Continue reading

CSS FilterLab Detailed Walkthrough

I’ve created a video below as a detailed walkthrough of the Adobe CSS FilterLab, from installation, to configuring & developing custom shaders, to collaborating with others on filter development. Before FilterLab, I used to describe custom shader development as essentially ‘programming in the dark’. No debug statements, no tracing, no nothing. Now you can visually interact with your shader and see realtime errors.  That’s a huge leap forward.

If you have any interest in CSS Custom Filters, using or developing them, I couldn’t recommend FilterLab more. Continue reading

Reveal.js with CSS Custom Filters

With reveal.js you can create fantastic looking presentations that run in your browser, driven purely with HTML/CSS/JS.  Since you have full control over which browser you use when giving your own presentation, it’s not unreasonable at all to make use of some newer browser features that do not have full cross-browser support yet.

With that in mind, I created a reveal.js presentation that uses CSS Custom Filters to achieve some very compelling transitions. Continue reading

WordPress Plugin or Custom Template?

I was playing around with WordPress, trying to create some custom functionality on a page and I quickly ran into a quandary. When do you put code in a plugin and when do you put it in your theme/child theme? It turns out the answer is not what you think, or at least what I thought. Continue reading

Adobe Assigns Flex Trademark to Apache

Yet another good checkpoint for the Apache Flex project. As I’ve mentioned earlier, getting Adobe Flex fully contributed to Apache involved quite a bit of legal footwork; much more I imagine than anyone imagined, other than legal itself perhaps. From an outsider’s standpoint is easy to wonder what could be so difficult? Just zip up the code and send it over. Unfortunately, it’s not so easy.
Continue reading

CSS Shaders & 3D

I’ve been giving several talks lately, talking about the different CSS standards Adobe is involved with, and the contributions we’re making to WebKit.  In order to make things easy, I had created a single web page with links to various demonstrations.  But I wanted something subtle on the link page itself that used CSS shaders in a way that would raise an eyebrow or two, to make people realize something different was going on here. Continue reading

Apache Flex 4.8 Arrives!

Slightly modified photo courtesy of FreeDigitalPhotos.net

Wow!  What a huge milestone for the Apache Flex community.  The legal trials and tribulations are over.  The code transfers are complete.  The votes are in, and the Apache Flex community has truly come together to produce the first official release of Apache Flex, Apache Flex 4.8.0-incubating.

You can find the official announcement here.  The announcement includes all the details you need to get started with the release.

I don’t think anyone anticipated how much work would be involved getting us to this point, but we’re finally here.  Kudos to everyone involved in the process.

As those of you following this know, the Apache Flex podling is still in the incubating stage.  However, having an official release is a huge milestone on the road to a top level Apache project.  A lot has been learned along the way.  Fortunately, future releases won’t have the same legal overhead to go through so should go much smoother.

Now don’t expect anything new and fancy out of this release.  The major goal of this was to produce a parity release with Adobe Flex 4.6.  Many folks have bug fixes and features that they’re dying to put into Apache Flex, but held off for now, to ensure that no new problems were introduced into the code during this initial release.

I urge you all to try it out, and get involved with the community.  If something’s not to your liking, well then just go fix it!

Now the fun begins…


A Little Help Debugging CSS Shaders

Anyone playing around with CSS Shaders has probably discovered very quickly how difficult it is to debug your shader.  There are no debuggers, no breakpoints, not even a simple console.log.  Fortunately, I’ve found a few simple things you can do to prevent you from ripping your hair out. Continue reading

WebKit, and Filters, and Shaders! Oh, my!

CSS Shaders are a new and relatively easy way to bring cinematic effects to the web.  You can find out all about them on the ADC, on the Adobe & HTML site or you can read the actual W3 draft proposal. While there are many articles out there showing how to use shaders, actually building your own custom shader is another story. That’s what we’re going to do here. Continue reading

JavaScript and ActionScript Data Visualization Libaries & Toolkits

Andy Trice recently forwarded me this link: http://selection.datavisualization.ch/#, a great site which showcases the current state of many visualization toolkits & frameworks.  Upon investigation though, it looks like this is a mix of JavaScript & ActionScript libraries, applications for creation of data visualizations and generic helper tools.  Navigating through the list seemed a tricky for the average developer.  As well, there was a bunch of libraries I knew about that I didn’t see listed.  It seemed to me like it would be useful to recreate this list based not on whether I’m trying to create a map or chart for example, but rather based on development restrictions.  If you’re building an HTML/JS application, ActionScript libraries are not very helpful.  Likewise, if you’re building a Flash application, a JavaScript  toolkit may or may not be helpful.

The list will obviously change as new libaries are developed and old ones go by the wayside.  I’m sure I’ve missed off a few as well and so I apologize in advance.  Let me know and I’ll update as I can.  I will try to keep this up to date, but you know how these things go…

Continue reading