Blog

Rants, raves, and geeky nonsense!

GhostLab: Bringing love back to website testing

| Posted | Comments |

GhostLab

Every now and then a tool gets released that completely blows me away; something so useful that I just had to buy it immediately. Today, that tool is GhostLab. GhostLab is a simple Mac application that makes synchronized testing for websites easy. If you're on a Mac and you're a web developer, this is one of those apps that you have to take a look at.

Any web developer will tell you that one of the biggest pain points in designing and developing a website is cross-browser testing. It's even more painful when you throw mobile browsers in the mix. Third-party services like BrowserStack offer great solutions to help with this but tend to be hindered a bit by a cumbersome workflow. Sometimes you just want to get in and test something quickly prior to any rigorous testing with services like BrowserStack. That's where GhostLab come in handy.

GhostLab blew me away based on three core features:

Any Site. Any Client.

When it comes to the websites you want to test, GhostLab doesn't care where it is. It can be static files sitting in a folder, a local IP or web address, or any external website. As long as you can get to it locally, GhostLab can test it. Just drag in a folder or URL and GhostLab will set it up so that you can test it. It's that easy. GhostLab has it's own built in server so all it's really doing is tunnelling all the traffic from whatever site your testing through it's own server. By doing so, GhostLab is able to bypass any of the complexity surrounding most workflows when it comes to cross-browser testing. It even works with virtual machines and emulators. As long as the browser you're on can access the GhostLab server then you're good to go!

Synchronized Testing

Imagine being able to open a website within multiple browsers and have it detect scrolling, clicks, reloads, and form inputs from no matter which browser instance you're using. Yep! GhostLab does it! I use CodeKit when developing sites and whenever I make changes to my code CodeKit will automatically refresh my browser window for me. What's neat about this is refreshing that window will also refresh any other browser that's running the same GhostLab site. That's a nice little bump in my productivity.

Another useful feature is the Workspace feature. Usually when I'm testing my code for a responsive design, the chrome and buttons in my browser get in the way of viewing how a site might look at a given screen size. With GhostLab, I can fire off an Open Workspace command and the site will open up into three different chromeless windows sized at three different mobile breakpoints. Very, very handy! Only thing I haven't been able to figure out is how to create and/or update a workspace.

Inspection

This is the killer feature for sure! I can't tell you how annoying it is not having proper inspectors in Internet Explorer much less the absence of them in mobile browsers. GhostLab solves this by utilizing weinre, an open-source remote debugger. I looked at weinre in the past and thought about adopting in but getting it to work was a royal pain. With GhostLab, weinre is built right in so no setup or configuration required. This gives you a Webkit-like inspector for any browser. I personally hate the web inspector in Internet Explorer and prefer the Webkit inspector so having this feature available is a huge time saver for me!

I typically test using a few different virtual machines. I have a couple of Windows VM's for testing different versions of Internet Explorer and other Windows-based browsers. I have the iOS Simulator that I use to test iOS devices. And I have the Android SDK for testing Android-based tablets and phones. Usually, I have to test each of these one at a time and, without inspector abilities or synchronize testing, the process of debugging can be tedious at best. With GhostLab in the mix though, the workflow couldn't be any easier! Not only do I have the power or synchronized testing but full inspection and console access to boot! I'll likely still use BrowserStack for more thorough testing but for a basic testing workflow I don't think you can beat GhostLab. Check it out!

AngularJS and HTML Validation

| Posted | Comments |

So I've started learning more about AngularJS. However, one thing about AngularJS has continued to bug the hell out of me. It has to do with all those 'ng-' attributes that riddle your HTML and make the code invalid. Not that tag attributes are bad per se. It's just that an attribute with a 'ng-' prefix isn't consider valid...at least not yet. So the question becomes: How do I make my HTML valid with AngularJS?

The answer is really quite simple: just add a 'data-' prefix to all your 'ng-' attributes. 'ng-app' becomes 'data-ng-app' and so on. I tested this out with the AngularJS version of the TodoMVC app and it works just fine. The only thing extra I had to do was convert the 'ng-pluralize' custom tag into a span and use attributes to initialize the 'ng-pluralize' directive. Other than that, it validated well and no issues with the app.

AngularJS is a beast; an 800 pound gorilla for sure. Lots to learn! But knowing that I can make it work in a highly valid way is definitely good to know.

Digital Marketers All Got This Thing Wrong About ROI

| Posted | Comments | ,

Some very good insights on how ROI relates to the way people use the web. Even when we're building web applications and sites, we need to think about how we can relate unmeasurable things like UX practices with marketing expectations. After all, when, where, and how people engage your applications and sites will indeed have a direct impact on the success of that site/application.

Health Design Challenge: d+collab // THE PATIENT RECORD

| Posted | Comments |

This is insanely cool! Regardless of whether you're a designer or not, everyone should take a look at this site and review at least the 1st place winner. Seeing where we are now and where we could be is a huge eye opener. I'm a huge proponent of medical record modernization. This will go a long way to moving us in the right direction! :)

SilverStripe: PHP on Rails

| Posted | Comments | , ,

In my last post, I talked about a few problems I have with MODX. In this post, I'm going to introduce a CMS called SilverStripe that I believe can help address some of the problems that developers might have with MODX.

SilverStripe is a content management system developed by SilverStripe Limited, a web development company that has been around since 2000. The CMS originally started as a proprietary system but, with the 2.0 version, the company decided to release it as open source in 2007. Since then, a 3.0 version was released in 2012 with some very welcomed changes. I appreciate the fact that the SilverStripe is a web development company because it means that, through the use of their own system with client sites, they can review how clients use the system and improve useability.

SilverStripe is more of a framework than a CMS. The core of SilverStripe is a framework known as Sapphire, which can be used much in the same vein as other PHP frameworks like CodeIgniter and FuelPHP, allowing applications to be built using no CMS at all. In fact, the CMS portion and every other addon to SilverStripe are nothing more than modules added onto the framework, which lends itself to being highly extensible.

Everything in the framework follows a heavy MVC model. When I showed this system to a seasoned Rails developer, he looked at it and said, "That's Ruby on Rails!". Yes, Rails developers will be pleased to find that there are similarities between Ruby on Rails and SilverStripe.

Easy Data Modeling

When I sit down to start developing a site, the first thing I do is try to get a handle on how the information is structured and how it might be managed. Not only does SilverStripe make this easy but the database itself will reflect your data model to the letter.

Both the model and controller classes are handled in a way that makes it easy to extend any PHP class in the system however you'd like. The two main classes that you're most likely to use in the system are the DataObject and Page classes. The DataObject class is the default class that is used to manage every data model in the system. In fact, the Page class is just an extension of the DataObject class. For every class you create, you'll likely extend off of either the DataObject or Page class depending on how you'll use the data.

Every class you create can have its own set of relationships with other classes: one to many, many to one, many to many, you name it. Within any class you can easily filter and return whatever information you want. In most cases you don't have to write a lot of code because the management of relationships is handle automatically for you. The best part of this is that the classes of information you create in the system are reflected in the database in a normalized manner. Any DataObject classes you create will have a table with the same name in the database with index tables created for many to many relationships. It's as simple as that. No ambiguity between your model and how it's stored.

And here's the kicker: SilverStripe manages the database for you! With a simple URL command, any changes you make to your data model will be reflected in the database automatically. The neat part of this is that it's done in a non-destructive way. If you decide to add, edit, or delete a field name or table, SilverStripe will update the database in a way so that none of your data gets destroyed. You might need to go in and do some maintenance to the database away from SilverStripe but, aside from that, SilverStripe does its best not to do anything destructive to your data.

Quick Interfaces Using Scaffolding

Models are handled in a way that is not only easy but allows for quick scaffolding for easy management of the data from within the SilverStripe administration UI. This is the part that completely blew me away. I was amazed at the fact that I can give SilverStripe a model and, with a few lines of code, can have a complete way to administrate all the information from within the UI. Even complex data models can be scaffolded quite easily! Amazing stuff!

Just like MODX components, you can create stand-alone areas of the CMS for managing data. However, unlike MODX, the management of information from within pages is not only easier but is managed in a way that accurately reflects your data model.

For instance, as mentioned in my previous post, imagine you have a Staff model that is attached to a specific Staff page. In SilverStripe, this is as easy as creating a StaffHolder page that has a one-to-many relationship with a Staff model. Whenever you set a page with the StaffHolder template, SilverStripe will automatically create an extra tab called Staff where you can easily add individual records for each staff member. This information can then be easily parsed and used from anywhere on the site.

While this is a simple example, you can create even more complex relationships with your data and implement them in a way that makes it easy for your clients to manage the information within the UI. Not only does this empower your client with the ability to manage their data more effectively, it can be done very easily with not a lot of code and/or knowledge. All it requires is solid knowledge about PHP classes.

Easy Templating

Just like MODX and Rails, management of templates and views is easy. The management of views are very similar to how Rails works in that each view reflects the class that is responsible for the view. Simple placeholders are used for information like the title, content, and other data related to each page or dataset. Logic can be added to a view to help facilitate things like if statements, loops, menus, and other bits of logic.

Unlike MODX though, you can't manage your views from within the CMS. All view files are managed on the file system using various files with a .SS extension. In fact, all files related to the programming of a site are managed on the file system. The only thing that is managed using a database and the UI is the content itself. Upside of this is that all view, classes, and other files can easily be managed with a versioning system like SVN or Git.

Good Documentation, Great Community

When I first started to dive into SilverStripe, I picked up their book SilverStripe: The Complete Guide to CMS Development. Granted, this is an old book. It was written in 2009 and covers an older 2.3 version of SilverStripe. Even then, you can still learn a lot about the philosophy of SilverStripe as well as the basics of how the system works. Through the use of a step-by-step tutorial format, you can quickly get a good understanding of how data modeling, scaffolding, objects, and templates work, all the fundamentals required to build great websites. Still, it would be nice to see a second edition of the book that covers the new 3.0 version and goes farther in the exploration of the system.

Aside from that, the SilverStripe open source site has fair amount of documentation on the system and API, including short tutorials and howto's using the new 3.0 system.

But what truly makes SilverStripe great is the community. Like MODX, SilverStripe has a vibrant community of talented developers contributing to the project and writing all kinds of modules to extend the system in infinite ways. A short visit to GitHub will show you an extensive list of SilverStripe related resources.

From Amazing to Awesome

To give you a taste of just how awesome SilverStripe can be, take some time to visit the SilverSmith project. This addon by Aaron Carlino (AKA UncleCheese) for SilverStripe allows you to quickly and easily write tons of code with just one command. In fact, just watch the videos about the SilverSmith CLI and the links off the SilverSmith project site. My jaw literally dropped! Imagine scaffolding your entire site with just a YAML file and a text file. It basically allows you to do what would take you a few hours to do and do it in just 30 minutes. Insane!

While the CLI is in alpha, the best is yet to come. Aaron has plans of building a native Mac app that allows for visually building your initial data model as well as adding the ability to use plugins for direct integration of other SilverStripe modules. I can't wait!

So, there you have it! A fairly decent review of SilverStripe and it's benefits. Is it a full replacement for MODX? Maybe. Is it perfect? No. There are definitely some areas that could use improvement. But, even then, it's still a great system and very useable in a production environment. Try it and decide for yourself. For Rails developers looking for a solid solution with PHP, SilverStripe might just be the ticket! :)