1 May 2010, Moon Studios PDX.

I’ve recently gotten into the version control system Git. I’ll be sharing some good nuggets of information relating to getting Git compiled and set up on your Mac.

There’s also a few other surprises in store as well as a new theme for the blog in the works.

Something I’ve been thinking about lately is the dire need for this site to have an updated theme, more compatible with WP 2.7 features. The theme currently in use is a custom job I hacked together in less than a week last summer. It’s pretty stripped down but served it’s purpose for a short time… I originally intended this site to be just an portfolio type site featuring my CV and some work examples. I’ve been reading quite a bit lately about WP Theme Frameworks and am quite intrigued with the possibility of writing a child theme for either Thematic or Theme Hybrid. Basically in the course of writing the current theme for this site I pretty much realized I painted myself into a corner in regards to the markup and use of WP Template Tags. In essence I learned how not to code a WP theme. Like most things in the web development world, I’ve learned things by trial and error. So I think now is the time to put the skills I’ve subsequently learned doing other WP-powered client sites and create a much more functional theme for this site.

Two articles I wrote last summer continue to get tons of traffic, which is very cool. They are “MySQL Administrator on Mac OSX Leopard: A Few Tips and Tricks” and “Setting up PHP, MySQL, and Apache in Mac OSX Leopard.” Both of those articles still get hundreds of pageviews every day. I had intentions of doing more posts along these lines to try to fill a niche that I saw was lacking. Particularly… clear, unambiguous tutorials on how to set up a Mac as a local development suite. I soon realized putting tutorials of that nature together were extremely time consuming. Plus on top of that I started to get really busy with client work the last 4 months or so of 2008. I work a day job too so keeping up with tutorials had to be put on the back burner.

As we are all aware, the current economic conditions have started to impact the frequency of my freelance activities. Put another way, freelancing has been pretty slow so far in 2009. So I’m hoping to provide some more tutorials in the near future. Even though they are time-consuming, I do enjoy writing them. It’s great to give back as I wouldn’t be where I am today if there weren’t hundreds of thousands of excellent web development oriented blogs out there providing top notch information for free! Plus I always learn something new when creating tutorial articles. I’m even considering some screencasts. I know how much I enjoy screencasts from Nettuts, ThemeForest, and CSS Tricks so this may be a good thing for folks coming to my site as well.

If anyone out there has ideas for articles and/or screencasts please leave a comment below or drop me a line.

That’s it for now. I promise things will get a bit more exciting around Superfancy HQ soon!

So here in WA State we have a new law going into effect on 6/12 that’s called the Distressed Properties Law. It will profoundly change how REALTORS® deal with foreclosures. To put it lightly, it has been a big deal for us getting our membership educated on the finer details and protocols called for in this new law.

At Washington REALTORS®, our Communications and IT departments are one and the same. I’m usually involved in bringing certain aspects of our PR campaigns to the web. The Distressed Properties campaign has been no different.

For those of you who attended the Tech Directors Conference in March, particularly those who took part in the Podcasting breakout group, may remember me mentioning the Flash Media Server (FMS) hosting we use for our streaming media. There are a handful of companies out there that specialize in Flash Media hosting… we use a company called Influxis.

So getting back to the Distressed Properties campaign, we produced an hour long DVD for Broker’s to share with agents. We kind of decided as an afterthought that I should prepare a streaming version of the DVD in six chapters for viewing on warealtor.org. So I went ahead and did this last week and officially published it last Thursday (5/29). We have a pretty stripped down account with Influxis that allows for a modest 40 concurrent streams.

So fast forward to Monday morning… we start getting calls from members that they are having issues watching the video. I naively open up my FMS Admin Console and immediately notice our total connections are pegged at 40! We did not anticipate the tremendous response at all! So I was immediately on the phone with Influxis upgrading our account to handle the huge demand. After a quick reboot of my Virtual Host, we were able to host 100 simultaneous streams. Quick and painless for the most part.

But demand kept increasing throughout the day yesterday and overnight so I upgraded again this morning to allow for 200 simultaneous streams! Thankfully working with FMS is pretty easy and Influxis makes upgrading your service a snap as well. It really saved us (me!) a lot of stress.

I realized if we had attempted to host the video locally on our web server it would’ve been toast! There’s just no way it would be able to keep up with demand… we use a Windows 2K3 Server which has no business streaming content! That’s the beauty of using FMS… it’s built specifically to stream Flash files. Not that you can’t host streaming Flash on a generic Linux or Windows server; it can be done but you run the risk of staring down the barrel of a serious crash. Take my word for it.

So next time your association needs to use streaming media, definitely take a look a Flash Media Server. It could save the day and save you a lot of headaches.

You can also buy the FMS software and run it locally if you are so inclined.

Do you have any experiences with Flash Media Server?

Resources:
Adobe’s Flash Media Server Page
Influxis Flash Media Hosting
Flowplayer: Flash Video Player for the Web

I must say I spend the vast majority of my day in Firefox which is probably the case for many web developer types out there. It is the de facto browser for development for a myriad of reasons… adherence to W3C standards (for the most part) being the biggest. But I think what gets me most excited about Firefox is the mind boggling array of add-ons available to developers. The foremost of which, in my opinion, is Chris Pedrick’s Web Developer Toolbar.

This add-on has so many amazing features that I will only introduce you to a few that I use regularly… ones that can save you huge amounts of time in debugging and help make your development cycle more efficient in general.

So yeah, I could gush all day about how much I love Firefox but many of you are likely aware of the power FF packs under it’s hood. Discovering the Web Developer Toolbar a couple of years ago was akin to a spiritual awakening for me… majorly geeky I know.

If you’re a standards practicing developer using CSS to control the presentation of your projects, Web Developer has some amazing features for you. The one that gets my vote for slickest is Edit CSS… which allows you to edit the CSS on your page, or any web page for that matter, in REAL TIME!

I can’t tell you how many times I’ve used this to demo different hex colors or font family’s in a layout. But the fun doesn’t stop there. You can edit whole sections of your layout and see the changes right there without having to edit your style sheet and uploading the changes. Pretty sweet!

A lot of times when I’m randomly surfing and I come across a page that piques my CSS curiosity I’ll often use the View CSS feature to peruse the page’s style sheet(s). This is great to check out what sorts of techniques other folks are using in their CSS… essentially it can be a nice educational tool.

Lets move on and look at Web Developer’s image features…

Taking a look at the image menu, you can see what’s at your fingertips. The feature I use most is View Image Information. It’ll display every single image on a given web page and inform you of its properties… including height, width, file size and any alt properties.

Again not only is this useful on your own projects but seeing how other sites are sliced and diced with images is a great learning tool. One other image feature worth mentioning is Replace Images With Alt Attributes. This’ll allow you to toggle on and off all image content in your page to check, for example, how things shape up in a non-visual web browser… like one a sight-impaired user may use to view your page.

Another very powerful Web Developer Toolbar feature within the Information menu is Display Element Information. This is what sold me when I first started using Web Developer.

Essentially you can think of it as a DOM inspector sort of deal that traverses the DOM for each individual block level element on your page and displays the relationships with its parent and sibling elements. If you look above the tab bar in the photo you’ll see a the box that displays the cascade beginning at HTML and traversing all the way down to your selected element. In addition, a dialogue box (the yellow box in the photo) will appear and tell just about anything you’d want to know about any element in your page. Way cool!

Remember the Edit CSS feature I told you about? Well a complementary feature also exists for HTML, appropriately called Edit HTML which is accessible under the Miscellaneous menu.

This also lets you edit your HTML in real time and preview changes without messing with your text editor and ftp client. It’s kind of similar to the “Try-It-Yourself Demos” over at W3Schools. So if you’ve used that before you’ll be right at home with Edit HTML in Web Developer.

Finally I’d like to touch on the window resizing features in Web Developer. Clicking on Resize, you’ll be presented with options to resize your browser window to an exact width and height. A fresh install of Web Developer will come with the option to resize to 800×600… the old school web design resolution standard. I added 1024×768 as that is the resolution I design for these days.

This feature is so simple yet so powerful that I can’t believe this isn’t a standard feature on all web browsers. Anyway you can easily create any resize dimensions you want by clicking Edit Resize Dimensions… and going through the set-up. You could also theoretically set up the browser window to roughly mimic the size of a mobile device, like an iPhone or Blackberry. The resize feature in conjunction with the Display CSS By Media Type feature (allowing you to view your Mobile Style sheet) can really help when optimizing for mobile devices. The iPhone / iPod Touch however are changing things for the better as the Safari browser on those devices completely ignores Mobile style sheets and basically displays as a mini version of a desktop browser. Designing for mobile devices is really tricky… in fact sometimes a plain (x)HTML document is the most effective way to go.

Well this only scratches the surface of what the Web Developer Toolbar is capable of. I’m continually finding new uses for it so I think the best thing to do, like most things, is to just experiment. I’ve found it to be a huge productivity enhancer and it plays a large part in the development of every project I do.

Web Developer is available for Firefox on both Mac and Windows. You won’t be disappointed!

Download Resources:

Web Developer page at Mozilla.org

Chris Pedrick’s Web Developer page

This post is first in a series dedicated to Firefox Add-ons. Hope you enjoyed this first installment.

How do you use the Web Developer Toolbar?

So I don’t know about you but I do a lot of image editing and optimization in my everyday web development tasks. Typically, in times past, I’ve used Adobe Fireworks CS3 and Adobe Photoshop CS3 for these activities. I’m still a heavy Fireworks user (I just love the CS3 update) but sometimes I want to do some quick and dirty editing without having to deal with the overhead of a desktop app (Photoshop I’m looking at you!). Enter Picnik.

So what is Picnik?

Well it’s an online photo editor with easy to use but powerful editing tools, all from a user-friendly interface in your web browser. All you have to do to get started is upload an image.

I first found out about Picnik about this time last year. Bitnik, the company behind Picnik, is a small operation based in Seattle run by a few ex-Microsoft employees. In the short time they’ve been around Picnik has gone through some pretty awesome changes. When I first started using it, it was pretty basic and still in beta. You could resize, crop, adjust color balance, apply a select few filter effects, apply a border, and a few other useful things.

Throughout 2007 they kept enhancing Picnik to the point that it was beginning to rival some of the most major features of Photoshop. All while remaining user-friendly and easily accessible for even a neophyte. Here’s a screenshot:

As you can see I used it to (partially) create the header image for realtortech.org.

Some techniques in Picnik are just a whole lot more straightforward than Photoshop. For example if you want to create nifty rounded corners on an image all you have to do is select “Rounded Edges” from the Frames menu:

Pretty darn easy and a far cry from the annoyance of accomplishing the same technique in Photoshop.

Probably the coolest thing about Picnik though is it’s extension for Firefox (and now Internet Explorer). This allows you to right-click on any image you find on the web and load it in the Picnik app for editing!

There are so many things you can do and this really only scratches the surface of Picnik’s functionality.

Many of Picnik’s features are available for free but to use some of the extended features you need to sign up for a premium account, which I would highly recommend. It’s cheap too…only $24.95 a year.

Overall, Picnik is a great workflow enhancer and can save a lot of time when you need to do basic to moderately advanced image manipulations.

What are your favorite alternative image editing tools?

It’s official… I exercised my right to vote. You should too. I’ll give you one guess who I voted for…

I wasn’t quite sure what to expect as WordCamp’s are intentionally kind of general in scope so they appeal to the most wet-behind-the-ears beginning blogger to power users to hardcore developer types. This one was no different as there were people of all stripes in attendance. There were people of all ages, but the scales definitely tipped to the younger end of the spectrum… lot’s of hip kids use Wordpress. I definitely felt like the weird old goth guy at the party, but that had more to do with the fact that I rarely go to events like this so I was a bit intimidated. I’ve never been very outgoing so meeting new folks and “networking” is not one of my strong points. There was a lot of “networking” happening.

From what I gathered, there’s a burgeoning tech scene in PDX so I imagine a lot of the people there were used to seeing each other at tech “social” events around town. I didn’t know a soul in the entire place. Being from little ol’ Olympia there isn’t a whole lot going on so I found the atmosphere quite exciting. And I was even able to put faces to a few names I’ve seen online. While I can’t say I made any “connections,” I did meet a few nice folks.

Anyway, the reason I attended was for information overload! And I was not disappointed in the least. The keynote address was given by famous blogger and WP evangelist Lorelle VanFossen. She shared a pretty amazing story about a blogger she met named Glenda Watson Hyatt, known as The Left Thumb Blogger, who was born with cerebral palsy and only has use of her left thumb. She uses Wordpress to communicate with the world — the theme of the keynote was “Changing Lives with WordPress” and this was a very touching example that I will never forget.

The morning breakout session I attended was presented by this bloke named Justin Kistner, “Using WordPress to Manage a Social Relations Program.” He talked about using Wordpress MU, BuddyPress, and bbPress as platforms for “social ecosystems.” Not sure how I jive with the terminology he used, but his presentation gave me many ideas that I think I can apply to my day job. Probably the most fascinating thing was watching the attractive young lady next to me display some pretty sick productivity skills on her MacBook Pro. I couldn’t keep my eyes off her screen and as a result I discovered some interesting web sites and a neat Twitter app for OS X I think I’m going to check out. I noticed she was attempting to live blog so I knew her URL had the word “hazelnut” in it. Being the curious type I looked her up later, checked out her blog, which left me with the impression that kids of today maybe aren’t as square as I thought (even though none of them seem to smoke). Seemed like a very interesting and intelligent young lady and I look forward to following her blog.

Next was lunch, which was WAY too long. We had about an hour and forty-five minutes to kill. Pizza was served, then devoured by all… leaving a ridiculous amount of time to “network.” I met this dude named Vin but I think I scared him away when I told him I work for a “non-profit trade association in Olympia.” He was a pleasant chap but he excused himself pretty quickly to go chat with people not as boring as I. Sometimes appearing like an adult on the surface has strange outcomes. I remember the world before the Internet so it’s hard to relate to these kids today who grew up in a vastly different world. Jeez… I’m starting to sound like my Dad. I should probably get out more…

So being the Gen-X’er that I am, I headed outside to smoke some American Spirits. Across the street from the space, there were a group of WordCamp attendees hanging out in the sunshine. Assuming these were the “smokers” I walked over and much to my chagrin, no one was smoking. Then I got glared at by these girls because I was smoking. What the fuck? Maybe these kids of today are totally fucking square? I understand smoking is kind of frowned upon these days in the sanitized version of the world we’ve become accustomed to living in. I guess the cool kids don’t smoke anymore. Such is life.

Headed over to my car, dropped off my swanky WordCamp t-shirt, gave the girls a call, then headed back in to grab a seat for the WP 2.7 demo given by Automattic’s own Jane Wells. She’s one of the newest additions to the Automattic team… a usability expert. Wish I could have caught up with her to ask some questions for Christina, who is desperately trying to figure out what to do with her Masters in Cognitive Psych. I guess a lot of people with Psych degrees get into usability testing… for obvious reasons. Jane’s presentation was fairly informal but certainly highlighted some major usability enhancements in 2.7. Highly anticipating its release on November 10th.

Woopra is pretty slick. And as it happens, Lorelle, who is involved in the Woopra beta, gave an extensive tour of many of its most jaw dropping features. Woopra is analytics in REAL TIME! Getting an invitation code to the beta is not the easiest thing on earth but Lorelle gave each attendee of the session one invitation code to hook up Woopra on their site of choice! Thank you Lorelle! Now I have three sites hooked up with Woopra. If you haven’t seen Woopra, go check it out and sign up for an account. It took about a month or so for my first 2 sites to be approved for the beta, so unfortunately no instant gratification. But the wait is well worth it.

Next was the session I was most jazzed about… “Extending your Blog through Custom Plug-in Development.” This cat named Dane Hesseldahl was the presenter. While waiting for the session to begin I took a look at his site and I almost peed my pants. Holy shit! This dude is super talented… both as a designer and a developer — which is exactly what I want to be when I grow up. You’ve got to check out his site and see his portfolio… totally drool-worthy.

Dane led us through all the essential aspects of WP plugin creation from initial idea to execution to helpful documentation available at the WP Codex to help if you get stuck. My ten dollar admission was worth it for this session alone. Dane posted his Keynote presentation as well as the files we worked through on his site. I really wish I would’ve talked to this dude but alas it was time for me to go.

I was exhausted and had a two hour drive back to Oly to look forward to. Kinda bummed I had to take off because I found out the evening breakout sessions were quite good. Oh well, there was just no way I was going to make it through the dinner and “networking” time with my sanity intact. It was a good day and my quota for information overload was certainly met.

One last thing… I would say about 90 percent of attendees, myself included, had a MacBook or MacBook Pro. And the number of iPhone’s was mind boggling. I felt like a dweeb with my BlackBerry Curve.

Going to conferences like this in a cool city like PDX, really makes me realize I need to get back to the big city!

It pretty much works as advertised. Like most WP plugins it’s easy to install and activate. To bring it up in your sidebar, you use the nifty template tag:

< ?php sidebarlogin(); ?>

Simple enough. Though it does have one quirk I’d like to point out. When you login with Sidebar Login, it has a pleasant “welcome” greeting, followed by your Username. Like so:

Kinda silly, huh? I think a better behavior for this would be to to use your “Display Name” so it’s a bit more personalized. So instead of in my case displaying “Admin,” it’ll display “Stevie,” which I have setup in the WP Dashboard:

All it takes is a little consultation with the WordPress Codex to produce this helpful document, Function Reference/get userdata to find the info we need.

In the code to the plugin, on or around Line 26 there you’ll find this:

echo $before_widget . $before_title . __("Welcome "). $user_info->user_login  .$after_title;

What we need to do is change $user_info->user_login to use $user_info->display_name. Here is the complete revised line:

echo $before_widget . $before_title . __("Welcome "). $user_info->display_name  .$after_title;

Enacting this change will now display your “Display Name” after you login. Problem solved:

The documentation for this plugin is not very complete so I did a Google search to see if others had this quandary. Much to my surprise I didn’t find anything so I thought I’d share what worked for me.

Thanks to the documentation at the WP Codex and reading through some PHP code, it was a quick solution. Take a look at the document at WP Codex to further experiment with your greeting.

Also thanks to Mike Jolley and his excellent Sidebar Login plugin!

Update 4/20/2009:
Sidebar Login has been updated so it now uses “Display Name” by default.