Blog on chrispederick.com Full Posts

Improved Web Developer ‘View JavaScript’ Output

The updated ‘View JavaScript’ output in the next version of the Web Developer extension including syntax highlighting and line numbers.

Web Developer View JavaScript output

Chris Pederick

Redesigned Web Developer Options Dialog

A preview of the redesigned and streamlined options dialog for the next release of Web Developer.

Web Developer options dialog

Chris Pederick

Rdio Add Album To Playlist Bookmarklet

A month ago I posted that I wanted to try Rdio, but could not because even their native OS X application requires Flash which I don’t have installed on my laptop. However—although I have not seen a formal announcement—it now appears that they are bundling a version of Flash in with the application.

So I re-activated my Rdio subscription—I had tried the service out a year or so ago—and used the application to match my iTunes music and add it to my Rdio collection.

Setting Up A Scores Playlist

At work I like to listen to movie scores as they typically contain no lyrics which I find distracting when I am writing code. So I set up a ‘Scores’ playlist in Rdio and went to start adding movie score albums to it.

The problem? Rdio only lets you add songs to playlists one at a time—you cannot add an entire album. Adding an album to a playlist one song at a time becomes very tedious very quickly and despite numerous requests to allow adding an album to a playlist, Rdio has yet to add this feature.

Therefore I created a bookmarklet that when clicked on an album page on Rdio adds the entire album—all the tracks that are available for streaming at least—to the chosen playlist.

Using The Bookmarklet

  1. Drag the link above to the bookmarks bar in your browser.
  2. Go to an album page on Rdio in your browser. For example: The Dark Knight.
  3. Click the ‘Add Album To Playlist’ bookmarklet in your bookmarks bar.
  4. For the first track you will be asked which playlist to add the track to and all subsequent tracks will then be added to that same playlist.
  5. Wait for the bookmarklet to add the remaining tracks to the playlist—you will see some flickering of Rdio dialogs appearing and being automatically clicked—and once it has finished a JavaScript dialog will appear telling you how many tracks were added to the playlist.

Rdio bookmarklet dialog

Fragile

As you can tell by the flickering of Rdio dialogs when you use the bookmarklet, this works by basically automating the task of adding each individual track to the playlist. This means that any HTML or CSS changes to the Rdio site will likely break the bookmarklet.

I will be trying to keep the bookmarklet up to date and working if this happens, but I cannot guarantee the timeliness of my support. I have only really tested the bookmarklet in Chrome so let me know if you encounter any issues in other browsers. Also, note that I am not responsible for any problems caused by using this bookmarklet. Hopefully Rdio will add this feature soon and we will not need this hack for much longer.

For those that are interested, here is my scores playlist.

Update: Rdio added support for adding entire albums to playlists in the new Rdio so this bookmarklet is no longer required or supported.

Chris Pederick

Why Web Developer May Finally Be Coming To Safari

When Safari 5 was released a year ago Apple followed the lead of Firefox and Chrome and added support for extensions. A number of people contacted me at the time asking if I would port Web Developer to Safari and I said I would look into the possibility.

When I looked at the Safari extension API it was clearly based on the Chrome extension API and I was initially hopeful that creating a Safari version of Web Developer would not only be possible, but relatively straightforward.

Why Web Developer Does Not Work With Safari (Yet)

My first thought was to add a toolbar button that could open an HTML version of the Web Developer toolbar just like I do in Chrome:

Web Developer for Google Chrome

However, while Safari supports adding custom toolbar buttons they can only execute JavaScript and cannot open HTML popups like Chrome allows. This did not appear to be an issue since Safari extensions are allowed to create entire toolbars—something that Chrome extensions cannot do—and this would be the ideal implementation for Web Developer.

As I started to work on creating Web Developer as a Safari toolbar though, a major shortcoming became clear. Safari toolbars can only contain HTML elements and do not allow those elements to expand outside of the toolbar—expanding menus in the toolbar are not possible.

The only way to work around this limitation is to use HTML select elements—an option that extensions like Safari Developer are using:

Safari Developer toolbar

I personally see this as a clunky solution with major limitations and poor usability. Therefore I decided to wait and hope that the Safari extension API matured to allow a better implementation of Web Developer.

Why Web Developer May Work With Safari In Lion

Cut to this week and Apple released a bunch of new information about the next release of OS X called Lion. Tucked at the end of their section detailing the new features in Safari in Lion is the following paragraph:

Safari extensions

If I am understanding this correctly it sounds like the Safari extension API will be updated to support HTML popups being opened by custom toolbar buttons just like in Chrome. If this is true then I will once again look into porting Web Developer to Safari.

When?

OS X Lion does not have a firm release date yet, but it is due to be released some time in July and I am currently working on the next release of Web Developer for Firefox. Any development on a Safari version would have to wait until the Firefox update is complete, but I cannot give any estimate as to when this might happen. Just know that I will be investigating the possibility of porting Web Developer to Safari as soon as I have the time once Lion is released.

Chris Pederick

Firefox 4

At the end of January I released new versions of both the Web Developer and User Agent Switcher extensions. These patch releases primarily added support for the then upcoming release of Firefox 4 which eventually came out two months later. Since then I have been extremely busy at work and have not had much time to work on the extensions, but I wanted to give an update about some issues that were found with Firefox 4.

Web Developer

The main issue with the Web Developer extension in Firefox 4 is that the toolbar menus are not checked when they are activated on Mac OS X. This is actually an issue with Firefox 4 and I have filed a bug with Mozilla that they have acknowledged, but are still working on. Hopefully this will be fixed soon as it’s a major issue that affects all toolbar menus in the browser.

There are also a few features in the Web Developer extension itself that have issues in Firefox 4:

  • The toolbar display options always reset.
  • The ‘Mark All Links Unvisited/Visited’ features no longer work.
  • Wildcard cookies can no longer be added.

I’ll be looking to fix all of these issues in the next release of the Web Developer extension.

User Agent Switcher

The User Agent Switcher extension also has a couple of issues in Firefox 4. First of all, the extension is not easy to access in Firefox 4 on Windows. There are currently a couple of ways around this as explained in the screencast below and I’ll be looking to fix this in the next release.

The second issue is that Mozilla removed the ability to override some of the user agent properties in Firefox 4 that you could override in previous versions. Specifically the app code name and vendor and vendor sub properties can no longer be overridden. There is nothing I can do to workaround this, but I will be updating the User Agent Switcher extension to indicate that those properties have no effect in Firefox 4.

Timeline

As always I cannot give estimates for when the extensions will be updated as it depends on how busy I am at work, but I am actively working on them whenever I have free time and will release them as soon as I can.

Chris Pederick

Web Developer 1.1.9 and User Agent Switcher 0.7.3

Patch releases of both the Web Developer and User Agent Switcher extensions have been released for Firefox. These releases primarily add support for Firefox 4 to both extensions as well as fixing a few issues in Web Developer including ‘View Style Information’ being vulnerable to a cross site scripting attack. The full list of changes to the Web Developer extension can be found in the release notes.

Web Developer 1.2

I had originally hoped to release version 1.2 of the Web Developer extension in time for Firefox 4. Version 1.2 will merge the Firefox and Chrome codebases of the extension, as well as adding new features and fixing a number of issues. However, this is still in development which is why I have released this minor update to make sure that Web Developer is at least compatible with Firefox 4.

I’m continuing to work on version 1.2 so look for progress updates on Twitter and Dribbble.

Chris Pederick

Web Developer 0.1 for Google Chrome

I am pleased to announce the release of Web Developer 0.1 for Google Chrome. The extension is available for download on the Google Chrome extension gallery.

Web Developer for Google Chrome

As the version number suggests this is an early stage build of the extension for Chrome that I wanted to release quickly to elicit feedback.

As such, there are a few missing features from the Web Developer extension for Firefox, particularly those that require custom interface elements like ‘Edit CSS’ as these need to be rewritten to integrate fully into the browser. Some of the more complicated features as well as configuration options like keyboard shortcuts are also not included in this initial release, but these will be coming soon in future updates.

One feature that unfortunately is missing is ‘Disable JavaScript’ as this is not possible to implement with the current Google Chrome APIs. Please star this bug and hopefully the APIs will be updated.

I haven’t had a chance to upload the source for the extension yet, but I should have something up (most likely on GitHub) soon and will post a link to the repository when I do. Please post any issues or feedback in the Chrome section of the forums.

Chris Pederick

A Sneak Peek At What I’m Currently Working On

Web Developer for Google Chrome.

A sneak peek at what I'm currently working on

Chris Pederick

Web Developer 1.1.8 and User Agent Switcher 0.7.2

Updated patch releases for both the Web Developer and User Agent Switcher extensions have been released.

This version of the Web Developer extension fixes an issue where the ‘View Generated Source’ feature did not work, as well as combining the Firefox and Seamonkey versions of the extension into one build. The User Agent Switcher extension release should hopefully fix the problem with importing user agents in nested folders once and for all.

Apologies for the frequent updates, but hopefully these will be the final patch releases before the next major releases of the extensions.

Chris Pederick

Web Developer 1.1.7 and User Agent Switcher 0.7.1

Patch releases for both the Web Developer and User Agent Switcher extensions have been released. These releases add support for Firefox 3.5 to the Web Developer extension and fix some minor issues with the recent update to the User Agent Switcher extension—the full list of fixes can be found in the release notes.

Web Developer toolbar

Chris Pederick

User Agent Switcher 0.7

I have finally had the time to release a new version of the User Agent Switcher extension. The main changes in this release are the support for folders and separators in the user agent list as well as indicating a non-default user agent has been selected by more than just the icon color. The user agent list has also been updated to include both the Googlebot and the iPhone user agents. A full set of release notes is available.

User Agent Switcher toolbar

Chris Pederick

Webmaster Jam Session 2008

In October I will be at the Webmaster Jam Session in Atlanta, speaking about using the Web Developer extension to develop and debug web sites in a session called Firefox Web Development. The dates for the event are October 3rd and 4th, and even if my session sounds dull there are a ton of other speakers so it should be well worth checking out.

2008 Webmaster Jam Session

Update: My presentation slides are now available.

Chris Pederick

Web Developer 1.1.6

A new version of the Web Developer extension has been released. This release adds support for Firefox 3 as well as fixes for a few issues discovered in the previous version.

Chris Pederick

Web Developer 1.1.5 and User Agent Switcher 0.6.11

Bizarrely (and rather embarrassingly) this is an almost identical post to my last post over 10 months ago. New versions of the Web Developer and User Agent Switcher extensions have been released. These releases are mainly to add support for the upcoming Firefox 3, but also contain a few other bug fixes.

And just like my last post I have redesigned my site—I think everything is working, but let me know if you see anything broken. Maybe I will actually write some posts describing some of the new features like I promised last time.

Chris Pederick

Web Developer 1.1.4 and User Agent Switcher 0.6.10

New versions of the Web Developer and User Agent Switcher extensions have been released. They are both patch releases fixing minor issues, as well as updating the extension download and update URLs to hopefully help with my bandwidth costs.

If you are reading this on chrispederick.com you will also see that I have redesigned my site. I am still working out some of the kinks so let me know if you see anything funky and look for some blog posts in the future describing some of the new features.

Chris Pederick

Illegal Videos

All of my videos on chrispederick.com are uploaded to YouTube and then displayed on my site using the YouTube API. This works well since it allows me to deliver the videos through Flash so that they can play on the majority of computers and reduces the bandwidth usage on my site, while the loss in quality is not a big issue since the videos are not exactly stunning works of art!

However, in the last year I have had three videos removed by YouTube for copyright infringement under the DMCA.

Videos

The three videos are all of outdoor sporting events filmed as a spectator: two of motor racing at Brands Hatch in England and one of the Red Bull Air Race over San Francisco. I have uploaded the three videos to Vimeo for reference, although I do not know how long they will last before being asked to be removed:

Email Notification Of Infringement

The videos were up on YouTube for a few months before I received an email saying the two motor racing videos were being removed at the request of ITV and another email a few months later saying the Red Bull Air Race video was being removed at the request of IMG Media.

The emails were all the same with just the third-party and video changed. Here is what the Red Bull Air Race email said:

This is to notify you that we have removed or disabled access to the following material as a result of a third-party notification by IMG Media claiming that this material is infringing:

Red Bull Air Race

Please Note: Repeat incidents of copyright infringement will result in the deletion of your account and all videos uploaded to that account. In order to avoid future strikes against your account, please delete any videos to which you do not own the rights, and refrain from uploading additional videos that infringe on the copyrights of others. For more information about YouTube’s copyright policy, please read the Copyright Tips guide.

If you elect to send us a counter notice, please go to our Help Center to access the instructions.

Please note that under Section 512(f) of the Copyright Act, any person who knowingly materially misrepresents that material or activity was removed or disabled by mistake or misidentification may be subject to liability.

The copyright tips contain some examples of copyrighted content and this is most likely the one that applies to my videos:

Videos of live concerts, even if you captured the video yourself

Even if you took the video yourself, the performer controls the right to use his/her image in a video, the songwriter owns the rights to the song being performed, and sometimes the venue prohibits filming without permission, so this video is likely to infringe somebody else’s rights.

What Is The Point?

So it appears as though legally the third-parties are in the right in asking YouTube to remove these videos, but my question is what is the point? None of the videos is longer than 90 seconds and the quality is not great so I do not think anybody is really going to be watching these instead of the television footage.

Surely the more likely scenario is that someone might see these clips and think that touring car racing or the Red Bull Air Race looks cool and maybe they will check it out the next time it is on television or live in their area. By removing these videos it seems to me that they are just removing free advertising for their product.

Hopefully media companies will wake up to the possibilities of online video, but in the meantime I guess I’ll just have to stick to videos of cats like this one from Abby:

Chris Pederick

Web Developer 1.1.3

Version 1.1.3 of the Web Developer extension has been released. This is another patch release containing what I hope are the last major issues that were discovered in the previous version. With the major issues resolved this version has also been uploaded to Firefox Add-ons.

Chris Pederick

Web Developer 1.1.2

Version 1.1.2 of the Web Developer extension has been released. This is another patch release containing a few more fixes for bugs that were discovered in the previous version.

Chris Pederick

Web Developer 1.1.1

Version 1.1.1 of the Web Developer extension has been released. This is a patch release containing a few fixes for bugs that were discovered in the previous version.

Chris Pederick

Web Developer 1.1

I am pleased to announce that version 1.1 of the Web Developer extension has been released. The complete list of new features and bug fixes can be found in the history with the biggest change being the replacement of the sidebar with something I am calling the “dashboard”.

Dashboard

The dashboard provides similar functionality to the sidebar in that it allows content to be displayed without hiding the page for features like ‘Edit CSS’ and ‘Edit HTML’. However, because it is a custom component it can now be used in Mozilla and Seamonkey (as well as still supporting Firefox and Flock), docked to any side of the screen and supports using multiple sidebar features at the same time through the use of tabs. For example, you can now ‘Edit CSS’ and ‘Edit HTML’ on the same page at the same time.

Changes From The Beta Release

Changes from the beta release include the addition of search functionality to the ‘Edit CSS’ and ‘Edit HTML’ features and new icons by famfamfam, as well as a number of bug fixes.

Localization & Firefox Add-ons

The localized build is still version 1.0.2 as I do not have any updated translations yet, but once I receive a few I will update the localized build. If you would like to help localize the extension please read the localization documentation.

Let me know if you see any problems, but as long as there are no major issues I will be uploading this version to Firefox Add-ons in the next few days.

Chris Pederick