Category: Work

HTML5, CSS3, Microformats and Disqus

An older couple enjoys the view
I can add captions to photos

I spent the weekend updating this site to HTML5, CSS3 and Disqus in an effort to refresh things and learn more about the new technologies for work. I haven’t made any effort to test for IE compatibility yet, and I don’t know when I will.

I created this theme in 2008 so it needed a fresh coat of paint and the hope is that with this update I can move forward with a couple ideas I’ve had for a long time now. No pressure though.

I also updated my sidebar to support WordPress widgets and marked up my contact page with the hCard microformat.

some of the tools I used

Critique my code and design in the comments.

How to integrate Twitter and Facebook and not annoy your friends

There are things that make sense in a Twitter timeline that don’t make as much sense in Facebook’s news feed that can lead to your Facebook friends being annoyed or even confused. These things include @replies, #hastags, retweets, and links in your status updates. Follow these steps to integrate Twitter and Facebook and reduce the chances your friends will hide you from their news feed.

If you have the official Twitter Facebook application installed, remove it now.

Install yakket. Yakket will allow you to add filters to prevent tweets that match a certain criteria from updating your Facebook status.

Follow yakket’s instructions for configuring the app. Once that is done and working, pay special attention to the following set of instructions.

  • Step 2

    • Add the following keywords, via, rt, http://, #
  • Step 3

    • Select, “Sync Tweets to Facebook UNLESS I use my keyword(s)”
  • Step 4

    • Select, Do not post tweets containing @
    • Select, Do not post retweets
    • Select, Do not strip hash tags from my tweets (if your keyword is a hash tag, yakket will still strip the keyword hash)

Once that is all done you should be all set. I can’t promise you won’t annoy your friends anymore, but at least it won’t be because you use Twitter to update your status.

What about my links?

Links are ugly in a Facebook status update, use Facebook’s attach feature to share links. It adds a nice preview of the website and you can add your thoughts about it without mucking up your status with a link.

An example of Facebook's attach link feature

How about sharing my Foursquare or Gowalla or {insert app here} updates?

Any website or app worth their salt will offer Facebook connectivity so you can share your activity in a more native fashion. For instance, when I check in on Foursquare it posts a link, my status update and a thumbnail of the location.

An example of Foursquare's Facebook implementation

HTML 5′s “real deal” video player

  • update, 2010-02-03 – Tried it again this morning and had the same results. CPU spikes well over 100% and the UI is unusable.

John Gruber writes,

Seriously, this is the real deal — full-screen H.264 playback with no Flash, no browser plugins, full iPhone OS support, and sane CPU usage, better in every single regard than any video player ever made with Flash.

Have a look for yourself.

What I experienced is nothing like Gruber describes. I saw my browser lock up and my CPU usage spike and stay spiked while the video played. I sent it to Matthew and he experienced the same performance issues.

I look forward to better implementations and support from browsers. Better performance, real full screen, sharable implementations.

Subversion merge cheat sheet

At the office we are responsible for managing our source code in Subversion. Since no one here is all that familiar with Subversion I had to do some research and bug Matthew to find out how to merge back and forth from trunk to branch.

This is a little cheat sheet that I added to our wiki as well.

svn merge

These are command line processes.

Merge a branch back to the trunk

  • From the branch, svn log –stop-on-copy, this returns the revision number where the branch began (XXXX)
  • From trunk, svn update which will return the last revision number (YYYY)
  • From trunk, svn merge -r XXXX:YYYY path/to/branch where XXXX is the branch’s revision and YYYY is the latest revision
  • Last but not least svn commit the changes back into trunk with a nice message

Merge from trunk to a branch

  • From the branch, svn log –stop-on-copy, this returns the revision number where the branch began (XXXX)
  • From trunk, svn update which will return the last revision number (YYYY)
  • From the branch, svn merge -r XXXX:YYYY path/to/trunk where XXXX is the branch’s revision and YYYY is the latest revision
  • svn commit

For both of these processes I have had more success going directory to directory, example merge the web directory and the src directory separately. Also be sure to svn update both the branch and the trunk to be sure you have the latest source code.

Blog upgrade, Subversion

I upgraded my blog to WordPress 2.6 today, imported it all into Subversion and can now update the blog through SSH. I also installed the iPhone WordPress app, posting this from it now.

I see a couple small things wrong and still need to go back through some old posts and link up some photos, but it’s fine for now.

VisitKC Launched!

KC HomepageWhile I was away on vacation VisitKC launched successfully.

I worked on the homepage Flash and a simple slide show that integrates with our REIgnition CMS on the Locals and Meeting Planners homepages.

Since its on the homepage, I had to take special care in loading the Flash and all of its assets. Each “scene” is loaded individually, but in the end the parallax layers work as they would if everything were static. It was a lot of work, but doesn’t compare to the amount of work the rest of the team put into the site.

1172: Definition fl.video:VideoEvent could not be found.

I came across this error and am blogging about it so I won’t forget the solution and maybe it will help someone else.

1172: Definition fl.video:VideoEvent could not be found.

In order to access a number of the “fl” packages you need to have a component in your library. In this case I added the FLVPlayback component and all was well. Apparently you can use flash.utils.getDefinitionByName as well.