Why subscribe to the SDW newsletter?

  • Insight on business technology trends and news.
  • Case studies on ground-breaking innovation.
  • Invitations to SDW events and webinars.
  • Other worthy dispatches from our expert team.
  • No spam. Just cool stuff.


Please leave this field empty.

Go back to skookum.com

Code Samples

7 Comments

Categorizr.js. Device-detection for your responsive websites.

The responsive web is here to stay, yet there are still other multi-device implementation solutions, to mention a few:

  • Head-in-the-sand. Just build your standard, locked website and let your users and their devices do the best they can with it.
  • Responsive design. One code base intelligent enough to bend and change within the device and screen constraints available.
  • Adaptive design.
  • RESSResponsive web design with server-side components.
  • Device-specific web-powered apps. Creating html-based apps specific to the user’s device. Full web-stack (m.yoursite.com, touch.yoursite.com) or hybrid apps (linkedin).
  • Native apps. Website. iOS app. Android app. WinMo app. Blackberry app. Windows app. OSX App. Linux app.

What is categorizr.js?

View Demo

Categorizr.js is a tiny (1.9 kB gzipped) javascript library for progressively enhancing your responsive projects with a more targeted experience (without forking the user off to a separate sub-domain).

I will admit that this began as an experiment for me to write tablet-specific UIs in my responsive workflow. After doing numerous responsive web sites and web apps, targeting desktop vs mobile is a pretty drastic and easy to do thing with media queries and feature detection. Targeting tablets for additional progressive enhancement was a much larger gray area. Brett Jankord had already done the hard work of creating the original categorizr as a php script. I simply ported it and began building on the foundation he laid.

We’ve all used our phones and clicked on an article link from a tweet or search result only to get abducted by the server and dropped at the homepage of said website, completely disconnected from the content we wanted to read (and with no clear path to get back to it).

Categorizr.js hopes to limit this and improve the user experience by making it easy to enhance the core experience of our websites with device-specific styles and behavior. It does this by adding a CSS class of ‘tablet, tv, desktop, or mobile’ to the HTML element for styling hooks, and it gives you javascript access to properties such as ‘categorizr.isTablet’. Usage with a library like yepnope and you could bootstrap your code to load in additional JavaScript or trigger other behaviors.

How does it work?

Categorizr.js enters the black magic community of web development: User-agent sniffing. Yet, before you scream blasphemy, call me a heretic, and burn me at the stake, let’s look a little deeper.

The first thing we need to be mindful of is mitigating the risk of being wrong. With a simple client-side solution, we make it easy to give the user a toggle to quickly switch between views. Furthermore, there is a relatively low and known quantity of desktop-based browsers. This number doesn’t change frantically and is relatively safe to detect. Meanwhile, mobile is blowing up like nobody’s business, so we follow Luke Wroblewski’s advice and go mobile first. If we’re not sure what browser we’re dealing with, we will assume it’s one of the billion mobile phones sprouting up on this planet.

Now the odd-man out is the tablet. The tablet is similar to a desktop in screen real-estate, but much more in line with a smartphone by usage. The haptic interface brings a whole new set of user expectations and possibilities. Herein lies most of the work to be done to keep categorizr.js on the right track. So many web properties already do this, and giving a tablet user a mobile-optimized site doesn’t qualify as one of the seven deadly sins.

Luckily, there are products like WURFL to guide us along the way.

Getting started

Right now the code is ready to go in your front-end stack. If you are using modernizr, I would recommend concatenating categorizr.js with it (if else, putting it in with the rest of your code would not be a bad idea either).

If you’re an ender user, you can include it in your ender build today with ‘ender add categorizr’.

To see all of this in action, check out the demo on Skookum.github.com/categorizr.js and follow the repository github.com/Skookum/categorizr.js

The future

The upcoming work involves:

  • Fleshing out the UA tests on github and ensuring that categorizr.js passes with flying colors
  • Support for node.js as an express or connect plugin
  • A test-extension API (to add your own UA detection points. This would facilitate things such as specific Microsoft-Metro style UI’s and WAP phones).
  • Emit events when a user requests to change deviceType

Let us know how you think you could use categorizr.js in the comments. Follow along on github. Let’s make a better web.


2 Comments

Using WordPress as a User and Authentication Database

WordPress is a great tool and you can hack all sorts of functionality into it, but have you ever thought about using it as a user authentication database for content on your server that is outside the realm of WordPress? Maybe a wiki or media server application that you only want your registered WordPress users to access.

There are some really awesome authentication tools built right into WordPress that you can use verify a username and password within your WordPress install. You can even look at that user’s specific capabilities to determine if they get access or not based on their role or capabilities.

In the following example, I use PHP’s ability to present the user with a basic HTTP authentication dialog box, and then it’s authenticated against the WordPress database.

Only thing I haven’t done is set a cookie that keeps them logged in across browser sessions.

This works great if you’ve got an application that has a rewrite to a single index.php file to serve everything, or else put it into a header file that gets served on every page (above any HTML output since it sends our HTTP headers).

And remember: this security is only as good as WordPress security–which is to say “not very secure” but it sure beats an internal non-password protected server that anyone could access simply by plugging into your physical network and browsing around.


Leave a comment

Scraping Poorly Formatted Data with cURL and phpQuery

cURL is a fantastic way to scrape data from websites. It’s pretty ubiquitous on LAMP servers nowadays, so you probably don’t even have to do anything to enable it and start using it. You can essentially get data that’s behind a login form by spoofing a browser logging into the site.

I’m not going to do a dissertation on the nuances of using cURL. Instead, I’d like to discuss how to process data after you’ve gotten the HTML string from a page using the curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); setting. The general process using cURL to get the data from a password protected site goes something like this:

  1. Make sure your “cookie jar” is set up and working so that your session can be saved while you’re scraping other pages after login.
  2. Get the HTML for the login page.
    1. Get the form post location.
    2. Get any special tokens or hidden variables.
  3. Post to the login script with your authorized username and password.
  4. Scrape any pages you need to get and process them.

Getting auth tokens and stuff

Sometimes login pages make it difficult to figure out what to post because of “authentication tokens” or similar variables that change every time a page is hit and then have to be posted back along with the username and password. This is most common among .NET applications since it’s built right in to the .NET form creation classes. The process of finding these variables is made a lot easier if you use phpQuery. It’s a project that attempts to replicate what jQuery does but with PHP. You pass phpQuery a string with all the HTML content in it and then you can perform selectors and traverse the DOM just like with jQuery. What you do with the HTML after that is up to you.

In the above example, I already had the HTML string of the login page and simply used phpQuery to get all the inputs on the page with a very jQuery-like selector syntax and then looped through the results to get all my input fields for the form so I could use them in my next call to post the data back to the login script.

Getting poorly formatted data and stuff

I consider “well formatted” data to be in formats like JSON, XML, CSV, etc. that are specifically meant for data transfer. But what happens when you need to scrape data from HTML tables or DIVs?

phpQuery to the rescue! You can do the same thing as above but parse the newly acquired HTML string of the data you’re looking for. Here’s an example of looking at a two column table of data to get all sorts of neat stuff and format it into an array. Then I check for an element outside of the table loop and set another variable.

Using the data and stuff

After you’re done with that, you have all this useful data in an array and you can basically do whatever you want to it. Since this example I created originated from code used in a real life client project (with variable names changed to protect the innocent), I went on to take that array and save it out to a JSON file that I could easily read in and do what I wanted to with the data.

You may need to go through some tests to get the right kind of cleaning or data sanitization for your values, but phpQuery makes it really easy to scrape this kind of data if you’re used to jQuery’s selectors and traversing. Instead of scraping the site each time to get the data, I like saving out the html string to a file and then playing with selectors and traversing to get the data I want form a local file so I don’t put a lot of strain on the server.

And don’t forget stealth…

If you’re not sure how friendly the server (or serveradmin) is to you doing this, make sure you set the cURL user agent for each request. I like  pretending I’m GoogleBot, but any common user agent string would suffice so that the server doesn’t explicitly know you’re PHP trying to log in.

By default, cURL spits out a user agent like this (changes based on operating system and version of cURL):

curl/7.15.5 (i686-redhat-linux-gnu) libcurl/7.15.5 OpenSSL/0.9.8b zlib/1.2.3 libidn/0.6.5

If a serveradmin sees that in their logs, they might freak out… so  I like these user agent strings for sneaky data pulls:

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.77 Safari/535.7

Audience participation

How do you use cURL and phpQuery? Any useful scripts or resources to point people to other than their respective documentation sites?


18 Comments

Open an iOS App from an Email

Apple has allowed iOS apps to register their own URL schemes on your devices for a while now, but I’ve never used this functionality in-depth ’till just recently.

Having your app register a URL scheme on a device means that you can open an installed application on a user’s iPhone or iPad in ONE CLICK from their email (or the web, or another application). There are all sorts of apps already using this functionality.

Use Case

We just used this for a project where the client would send confirmation emails to the user after signup. The email would contain an link to a URL. The URL opens in mobile Safari, then launches the app and seamlessly logs the user into the app.

That’s one use case; there’s probably others (let us know yours). Another one could be a URL embeded in text—say someone is reading on their iPad and the content could prompt them to hop over to the app.

Try It Out

If a user has your app installed on their device, all you have to do is send them to my-great-app://whatever/ and Safari will resign to the background and your app will open. Why don’t you try it? I know you’ve got the Facebook app installed on your iPhone. Just clear your address bar and type (or click the link): fb://profile

Go ahead, I’ll wait.

It opened the Facebook app and took you to your profile page (or gave you a big fat cryptic error message if you don’t have the Facebook app installed). Facebook allows a LOT of options that you can pass to the application to take you into various parts of the app.

Process

So enough about the Facebook app. What does a developer do if they want to pass a bunch of data to the app—without actually defining what needs to be passed using a bunch of if/else or switch statements?

It’s fairly trivial to add url scheme to your application’s Info.plist:

  1. Register the url scheme in your Info.plist. Lets say: my-great-app://
  2. In the application delegate, implement this method and return YES:
    application:openURL:sourceApplication:annotation:
  3. That’s it!

I wrote a method you can add to your application that allows the passing of data through the url with key/pair values like so:

my-great-app://user_id/27/token/really9385long5892data/email/user@yourservice.com/

When the user clicks a link like that, or you auto-redirect them from your site to that URL, you can parse the URL into an NSDictionary with this code. Here’s the method and an example implementation along with some pretty badass comments so you know what the heck is going on:

Let me know in the comments if you find this useful at all or if you make changes to it.


2 Comments

Don’t Let String Sanitization Slow You Down

If you’ve ever taken a gander at a string sanitization class or library, you’ve probably noticed the amount of code necessary to keep the script kiddies at bay. We’re talking about slow string manipulations, i.e. string replacements and regular expressions.

Most MVC Frameworks today come with some form of sanitization or input filtering class built in. The problem with many of these libraries is that they fail to clean some of the more creative attack vectors. To combat this, some people use drop in libraries like OWASP AntiSamy or HTML Purifier to ensure their data is getting scrubbed clean. HTMLPurifier, for instance, uses a Smoke Test via the ha.ckers.org XSS attack list (the de-facto standard for finding attack vectors to test, might I add) to ensure they’re cleaning anything and everything. Continue reading


2 Comments

An intro to 3D in the Browser with WebGL and Three.js

As part of our ongoing programming R&D at Skookum Digital Works, we’ve recently been experimenting with WebGL. If you’re new to the technology and 3d in general, it can be quite a daunting task to get up to speed. Here’s a quick WebGL primer (along with Three.js) to get you started.

WebGl is not your Grandma’s Javascript.

WebGL is awesome. It is a very low-level api that extends JavaScript to allow the generation of 3D graphics via the canvas element. The cool thing is that it actually uses the power of your gpu to render the graphics, allowing video-game quality results without any plug-ins. Its important to know that this is bleeding edge tech, the 1.0 specification was just released in March which leads us to…

Browser Support

As you can see by the above chart, all of the “cool” browsers are WebGL ready. (Safari does require support enabled via the command line). Then of course we have IE. Sadly the folks at Redmond decided not to include the tech in their latest browser. Hopefully things will change with IE 10.

Not for the Faint of Heart

A drawback (of sorts) is that WebGL is basically a wrapper for openGL. The good part about this is that the possibilities are endless. The bad part is that if you are not familiar with 3d/game development then the learning curve is quite high. Here is a brief run-down on the process for creating a cube in straight WebGL:

  1. Get canvas element with webgl context
  2. Set viewport
  3. Configure depth buffer
  4. Create perspective matrix
  5. Create modelview matrix
  6. Create and compile shader(s) and shader program(s)
  7. Create vertex array
  8. Create and bind vertex buffer…

View the source on the following demo to see what I mean.

http://skookumx.com/webgl/demo1/

All that for a white box? Yep. Believe it or not that “box” is actually an unlit cube in 3d space, and as you can see it is no trivial task setting things up to render it.

Introducing Three.js

Theres got to be an easier way! Well there is, the answer is Three.js. This WebGL 3D engine from mrdoob is EPICALLY AWESOME! In a nutshell it allows you to easily render 3d scenes with a minimal amount of code, allowing you to focus on the fun stuff. Look at it like jQuery for WebGL.

Check out how much shorter our code is recreating that first demo with three.js

http://skookumx.com/webgl/demo2/

Much easier! We simply:

  1. Create a scene object
  2. Create a camera object
  3. Add models/primitives to the scene
  4. Add light(s) to the scene
  5. Render!
The other cool thing about Three.js is you can pick from a 2d canvas or svg renderer as well. The performance will be different and not all cool 3d api options will be available, but its good knowing that you have the option if you want to create something basic with maximum browser visibility.

The Fun Stuff

Ok enough with the boring boxes. Here is a demo where we dynamically add spheres to the scene, and then rotate that scene based on the coordinates of our mouse.

http://skookumx.com/webgl/demo5/

As you can see the code is not much longer, and plays nice with others libs like jQuery and sugar. Remember to animate using the requestAnimationFrame instead of setInterval for maximum efficiency.

The Grand Finale

Now if you are still craving more (I know you are). Just take a look at this last demo. It is a modified version of the great app from airtight.cc called the Rutt-Etra-Izer. I have tweaked it to allow the selection of a Skookum’s twitter account. Once the account is selected it will pull in that person’s main profile picture and perform the effect. The z-depth of the lines is determined by the lightness or darkness of the pixel. And you can see the rendering speed of Three.js/WebGL by adjusting the parameters in real time at the left. Have fun!

http://skookumx.com/webgl/finale/


12 Comments

Peeling away the interface in an iOS app

Update: thanks to Elliott’s comment, I was able to remove the screen capturing portion of the code since UIKit captures the screen FOR us immediately before the animation fires. This eliminates a lot of memory usage. Thanks Elliott!

I’m a big fan of the Square iPhone app. It is a great service with a  beautiful and extremely well-designed interface.

But this isn’t a commercial for Square—I’m going to walk you through step-by-step how to implement that really cool page curl animation they use when you hit the “Clear” button. Don’t know what I’m talking about? Here’s the effect in action:

Square Page Curl AnimationSo if you have got an application that does something and then clears the screen, how do you go about implementing this in your own app?

Read on to find out


Leave a comment

Safely Handling MySQL Transactions in Zend Framework

Preface

If you’re using Zend MVC and attempting to store transactional data, below is a quick and easy way to handle exceptions while still allowing rollbacks.

The code will essentially ensure that your transaction safely fails if an exception is thrown (i.e. the dreaded Integrity constraint violation: 1062 Duplicate entry) and fall back on your error controller for handling the exception. You can then deal with these exceptions in any manner you see fit by utilising Zend_Log_Writer_Stream.

Code Example


Leave a comment

Re-thinking the State Dropdown with Autocompletion

There are all too many web forms that requiring filling in contact information. I believe the state dropdown is one of those gems that everybody has a snippet of code in their stockpile. The annoyance of having to go out and search for a state array or database to populate the dropdown is far too great. I had an aha moment this morning…

The two most popular solutions for a user entering their state are to either make a free form text field with a max length of 2 or provide all states in a neat little dropdown in ascending order. Both solutions have their caveats. The problem with the free form text field is that it is prone to user error. The problem with the dropdown is that although it’s autocompletion is not ideal; only savvy users might fully understand it’s capabilities of using a sequence of keys for matching. This is where jQuery autocompletion comes into play.

The Benefits

  1. It gives the user the option of using a free form text tool or a dropdown.
  2. The autocompletion suggestions are limited to only the characters already entered, giving the user a limited set of choices for rapid scanning.
  3. The states are already pre-filled and the work is done for you if you use this code.
  4. It degrades gracefully, providing a default state dropdown in the event the user doesn’t have javascript enabled.
  5. You can custom style it. Either provide a jQuery UI css include or write your own. I would personally suggest adding something dropdown-esque to the text input to give a visual indication of it’s usage.
  6. Matching on partial state names with a preference of two-digit state codes.

The Drawbacks

  1. It requires the user to have javascript enabled for nifty functionality.
  2. The jQuery library is required. This could be a blessing or a curse depending on the website you are working on.

Live Demo

You can view a minimalist live demo of the state dropdown functionality here at JS Bin. To view the full source and play with this demo yourself, click on the Edit button in the upper right hand corner of the demo.

The Meat & Bones (JavaScript)

It Needs Your Help

This demo needs some TLC in the design department. If you feel so inclined, modify your own version on JS Bin and post the link in the comments section to give people a more suitable demo.


1 Comments

A Clean URL Generator for Zend Framework

As a developer, we’re often left with the responsibility of making game time decisions in regards to SEO. I take it upon myself to maximize keyword relevancies for each and every page; starting with the URL, title, and H2 tag (leaving the H1 solely to the site name). Many people take for granted things like Permalink generation in WordPress. If you were to delve behind the scenes, into the depths of the code, you would realize that there is much more to that pretty hyphenated link than meets the eye.

I have created a multi-purpose generator which uniquely generates clean URLs given the target table name, column name, input string, and maximum column length. The generator will not only strip or replace unwanted characters, but also only output full words. In the event of a clean URL collision (duplicate), the method will recurse and incrementally test postfix integers until a unique URL is generated. The only requirements are that you have instantiated $this->_db to your database adapter prior to calling this method. The easiest usage for this method is to drop it in a base class that would be inherited by all of your models.

Source code can be found here on github.

Forks and pull requests are welcome.

Credit goes to Matteo Spinelli for the initial code that spawned this extension


Page 2 of 3123