Don’t Break The Code

Last Saturday at WordCamp Philly, I ran a session on “Building a Plugin in One Night”. Together, with about 50+ attendees, we brainstormed ideas for a new WordPress plugin that I could code that night.

The brainstorming went great, coming up with some good ideas… like plugins to:

  • Help first responders after a disaster (Big Idea!)
  • Add VIM (a Linux editor) shortcut commands to the Visual Editor
  • Disable the Visual Editor on a per-post basis (The Winner)
  • Allow users to create pages from the front end
  • Add easy donations
  • Log into WordPress via Google+ (Brian did it!)
  • Add syntax highlighting to the Visual Editor (Chris did it!)

The concept that the audience voted for me to work on was a way to disable the Visual Editor tab on a per-post basis. The motivation for this is the fact that the autoformatting of the Visual tab will sometimes break a complicated (or not so complicated) HTML structure ruining your code. Folks wanted a way to say, “Hey, WordPress, back off on this page/post.”

And someone (you introduced yourself to me later, but I forget your name) came up with a kick ass name: Don’t Break the Code. It explains the purpose and also harkens back to my days at Haverford College, which has a strong social/academic honor code.

I had hoped for something a little more mainstream. Only a developer or power user will really appreciate a plugin to disable the Visual tab, but that’s okay. The effort would be appreciated.

Turns out there are already a few plugins that either disable the Visual tab or remove other filters to keep WordPress from breaking code. The started trickling in after the presentation wrapped:

… and probably a few more. So we weren’t blazing new ground.

Still, some good ideas came up during the session that could improve the experience of using a plugin like this. Like:

  • Put the checkbox to disable the editor in the screen options area so it doesn’t clutter up the editor
  • Only allow admins to disable the editor. Other roles will see what the admin chose.
  • Allow admins to add a note RE why the Visual Editor is disable.
  • Remove other filters (like wpautop) to lower interference even more.

I spent the spare time I had during that day and then after the after party from midnight to 5:30am the next morning looking through the code in the existing plugins and piecing together the best pieces of them. I liked how “Disable Visual Editor WYSIWYG” just grayed out and struckthrough the Visual tab instead of removing it directly. I liked how Raw HTML put things in the screen options space and also how they allowed for disabling the other filters.

Anyway, the plugin released that morning on GitHub and then later at the Dev Day to the WP repository. You can grab it here:

Don’t Break the Code WordPress Plugin

So far it allows admins to disable the Visual Tab just like we said. I improved on the DVE WYSIWYG plugin by disabling via Ajax for a better user experience (you don’t have to click update for it to take affect). And after trying to copy Raw HTML’s method of placing things in the screen options, decided to scratch that and just code it myself using some tutorials I found online.

It works nicely. I plan to add checkboxes for disabling other filters similar to Raw HTML and also want to include that “add a notice” functionality somehow. I was going to incorporate the syntax highlighting, but that works really well as a stand alone plugin. Chris’s code had some problems on my setup that I hope to look into and patch for him.

Let me know what you think of Don’t Break the Code. If you want to contribute, you can fork and patch via GitHub here.

Thanks!

Don’t Break The Code was last updated on November 10, 2011. Bookmark the permalink.

Unit of Measure PHP Class

For a recent project, we developed a php class that made it easier to work with units of measure. I was surprised that there wasn’t anything like this available out there, so we decided to open source the code once it was in a good state. That day has come.

We will be updating this code (and this blog post) over the next few days and likely down the road as well. But in the meantime, here is a link to the GitHub repository: phpUOM on GitHub.

(If this goes well, we’ll hopefully be open sourcing a bit more of our code in the future.)

Unit of Measure PHP Class was last updated on February 16, 2010. Bookmark the permalink.

Introducing TopWhatever

TopWhateverA new product from Stranger Studios. TopWhatever will change your life. From the about page:

TopWhatever helps you make decisions by walking you through the process of creating a “decision matrix”. Using the matrix, you can weigh your options against the criteria that are important to you.

Some decisions can get complicated quickly. The decisions you end up making can feel subjective rather than objective. TopWhatever helps you take things step by step. You end up with a decision that is sound, with the math to prove it.

The best way to understand how TopWhatever works is to view decisions that have already been made.

So check it out already. Use TopWhatever to make a decision that has been on your mind lately.

Introducing TopWhatever was last updated on February 5, 2009. Bookmark the permalink.

We’ve been busy rolling out new websites!

Stranger Studios has recently launched several great new websites. Check them out!

ComiteSkin.com
Philadelphia-area Dermatologist, Harriet Comite, came to us for a total revamp of her growing practice’s (Advanced Skin Care) existing website. The site is balanced in its appeal to masculine and feminine audiences and conveys loads and loads of information in an easy-to-digest format.
Learn more about this project »

Garrett-Olsen.com
Up-and-coming Kart racer Garrett Olsen needed a web home-base for his growing stardom. The site is built on the WordPress CMS to allow easy updating by the client and his web team. The site is also enhanced by the use of third party sites like Viddler and YouTube, and Flickr.
Learn more about this project »

LuxuryBabyBlog.com
A blog for hip parents to keep track of all that’s cool and “luxurious” for their growing families. The project includes our proprietary mailing list application (that we will hopefully make available as a WordPress plugin shortly), as well as integration with Feedburner for email delivery of blog updates.
Learn more about this project »

VanessaPeanFoundation.org
Stranger Studios has a heart! We helped develop a web presence for the Vanessa Péan Foundation to serve as a hub for all of the foundation’s many meaningful efforts.
Learn more about this project »

We’ve been busy rolling out new websites! was last updated on September 9, 2007. Bookmark the permalink.

Interactive 8-Ball Facebook App

So we’ve jumped on the Facebook bandwagon a bit. You can now install the Interactive 8-Ball application to your Facebook profile.

Why would you want to install I8B on your Facebook profile?
I don’t know, but if you use Facebook as your homepage instead of iGoogle it’s nice to have I8B right there. We also update your profile and mini feed every time you ask a question through Facebook. Although this last bit can get tricky; we had a lady email us to take down a question she asked about a love prospect for fear of being had. (Which only gave us another idea for a Facebook app that we might share at some point.)

And What Happened?
I8B got a ton of traffic. In three days, we got 400 people to install the new application. Traffic to I8B trippled to 800 visits a day and then… leveled out. We actually lost 5-10 users today as people have started to uninstall the application. So growth is not exactly parabolic so far.

I guess we need something more to help the spread. (This blog post? A mention at TechCrunch? Maybe I’ll resubmit I8B to Emily Chang’s eHub.) It would be nice to have the 20,000 users that the other lame-o eight ball application on there has. Of course they got there first and so are high in the app directory and have the catchy URL at apps.facebook.com/eightball. (ours is apps.facebook.com/bettereightball) 😉

What’s next?
A WineLog app for Facebook, duh. The I8B stuff was kind of a primer for work on a WineLog application. And good thing too. It is nice to work out all of the kinks using a brand that we aren’t as invested in. This article helped me a bunch, but it also took a lot of hacking around to figure out what he meant by everything. The toughest part was fixing Facebook’s broken PHP4 client. Don’t even try messing with that unofficial one. If anyone needs help, shoot me an email or IM.

Anyway, a WineLog app would be fun. Again, I would rather just go to WineLog to see what my friends are drinking. But if you spend your day at Facebook, it’s sweet to get notifications on what people are logging. And it will hopefully introduce WineLog to some new folks. Cross your fingers.

UPDATE: Here are links to my versions of the facebook api scripts. Download them and rename them to .php. I hope to comment up the code when I get a chance, so you can see what I changed. But in the meantime, this might be a better starting place for you than Facebook’s version.

facebook.php
facebookapi_php4_restlib.php
IsterXmlSimpleXMLImpl.php

Download all of the above files, rename them to .php, and follow the tutorial instructions here (or do whatever you’re doing). The strange one at the bottom is a library to handle XML objects (PHP5 does this natively I suppose). Read here for more on simplexml44. Or here is the entire simplexml gzip file as I unzipped and installed it on my server.

Interactive 8-Ball Facebook App was last updated on June 28, 2007. Bookmark the permalink.

Introducing Interactive 8-Ball: A Google “Gadget”

We’re working with some pretty interesting clients, and our work on WineLog is anything but boring. Still, we know how easy it is to get burned out on “work”. For that reason, Kim and I are always on the look out for quick, fun projects we can use to keep the energy level up in our office.

After reading a little blurb somewhere about the recent Google Gadget competition, Kim and I brainstormed for gadget ideas. We had never created a Google gadget (or any other homepage widget) before, and thought the format would be good for our goal of finding a simple, fun side project to work on.

We tried to focus on things that would be (1) fun, (2) different, and (3) easy to complete in one week or so. Among some other great ideas, we had this: “A magic 8-ball game where other users answer your questions.” We did a quick search and didn’t find anything like it out there, registered the domain Interactive8Ball.com, and set to work.

It was soon after registering the domain that we found the official rules page for the Google Gadget Awards competition and ran into a couple snags. First, the rules page uses an 8-ball gadget as an example. That’s good because it means we’re on the right page, bad because we’d probably seem unoriginal no matter how much we change the 8-ball formula. The second snag was that entrants needed to be university students. Technically, I think we just needed a .edu email address. Kim just graduated this past spring and we considered entering under her name, but decided against it. If we did end up winning one of the prizes, I didn’t want to deal with the scandal of entering under false pretenses and trying to steal money from starving college students.

So no competition. But here is the gadget we would have entered:

Let us know what you think.

Introducing Interactive 8-Ball: A Google “Gadget” was last updated on November 6, 2006. Bookmark the permalink.

PhotoCrank

I am pleased to finally be able to write about PhotoCrank, a service that adds clever overlays to the photos you snap on your mobile phone. Since mid-August, Kim and I have been helping the PhotoCrank team with their website’s design and development. The secret is out now; their site went live sometime this morning.

If you’re still reading this, you should take a break and check the service out for yourself. (Here’s the link if you missed it the first time: PhotoCrank.com.) From their blog:

PhotoCrank is a fun and easy way for you to add entertaining graphics and customized captions directly on top of your mobile photos. There is no software required. All you need is the camera phone in your pocket, and it works at the speed of a picture message.

Cranking a photo is as easy as sending a “pix message” from your mobile phone to an email address (like try@photocrank.com). A team of leprechauns and fairies, working for minimum wage, will add the crank over top of your image and send it back to your phone. A version is also stored at PhotoCrank.com for archiving and to send mass emails later.
You can 'crank' photos like this with PhotoCrank

Your carrier will charge you their normal fee for sending a picture message. PhotoCrank will charge you an additional $0.20 to $0.30, which is billed to your cell phone, depending on the package you choose. Right now, PhotoCrank’s part of this charge is waved on the first 3 cranks you send.
Jeff and the crew at PhotoCrank are great to work with, and I’m proud of the application they are releasing this week. Kim and I thought the idea was awesome back when it was just a few sketches and a simple prototype. But now that I’m actually able to crank photos from my own Razr and browse through all the cranks on the website, I’m even more excited about things. I can’t wait for my next night out just so I can create more images like this one:

You can

I’m also proud of the design work Kim did on this project. Take a look at how far things have come from the design for the early prototype we built back in July to the final design of the site launched this week.

Kim also did some print work for PhotoCrank, designing this awesome one-sheet they’ll be handing out at the Demo conference in California, where Jeff and the PhotoCrank team will be presenting later this week. (Be sure to check them out there if you are attending or keeping tabs on that event.)

I have a minute, so I’ll throw in a little praise for myself. The original plan was to handoff a static HTML wireframe, with just the HTML, CSS, and JavaScript components programmed. Jeff and Paul were busy jumping hoops for the phone companies and tweaking PhotoCrank’s porn filter however, so I brushed off my VB and ASP.net skills and helped out with some of the server-side programming. For a couple of weeks, I moved shop over to the PhotoCrank office where I got busy, did some .net development, ate as much as 1 1/2 cheese steaks each day, and brushed up on my devil-sticks skills.
Again, I can’t emphasize how great Jeff, Paul, Cristyn, Yoni, and the others behind PhotoCrank are. This is just the beginning for them. I know they have a lot of plans for their product, and I look forward to working with them in the future.

PhotoCrank was last updated on September 25, 2006. Bookmark the permalink.