Monthly Archives: November 2011

Thoughts on LESS

Remember that first time you hooked up that second monitor? Remember the productivity boost? The feeling that you could conquer the world? Ok, maybe too far. Using LESS made me feel this way all over again. If you don’t say to yourself “why have I not been using this all along…” you are probably using it wrong.

LESS === MORE

If you are like me the first thing you think of when using a preprocessor is that you are going to have to give up control. Control to tweak the CSS, cause YOU know best and don’t want some program messing with your hard work. I only have one piece of advice for you. Get over yourself. Once you start using LESS you will find out it is extremely flexible and will dramatically cut down on development time. Best of all it will promote reusability. Something severely lacking in CSS.

My second concern with less was actually processing the less files into CSS. Thanks to tools like the LESS app for mac and the Live Reload extension for chrome this is a non issue. As a tip please, please, process LESS files through one of these apps below or through a continuous integration build server and NOT on the client with javascript. Friends don’t let friends using client side less proccessing… Right?

LESS app in action!

LESS Applications

Getting started with LESS

To get started with LESS is super easy.

Step 1: Get one of the applications listed above and add your less file to be processed to CSS on save.
Step 2: Start adding less to your stylesheets.

The documentation for LESS is pretty self explanatory. http://lesscss.org/ Give yourself 15 min and you will have most of less figured out.

Mix it up

In my opinion the most powerful feature of LESS is Mixins. Anyone who has used CSS3 prefixes before or just wanted to write reusable CSS will love this feature. Think of mixins as functions you can reuse in your css.

In the example below we have applied three mixins to the #element id. We gave it 7px rounded corners, set the scale to 0.8 and rotated the element 45deg. We have also enabled a 0.5 second CSS transition. Then upon “hover” we have added another mixin to rotate the element to 0 degrees and scale it to 100%.

Anyone who as ever wrote these effects with prefixes by hand can appreciate how much simpler and more maintainable our css has become. Best of all we can use these mixins in future projects with very little effort!

Just do it

To sum it up… If you were on the fence about getting started with LESS. Stop. Take 10 min. Learn LESS… And start doing less CSS and more of this…

Push Notifications with PhoneGap and Urban Airship

Ever wanted to send push notifications to mobile devices but didn’t know where to start? Luckily, with Urban Airship and a PhoneGap plugin this complicated process is much easier.

Urban Airship

Urban Airship is a service that abstracts away all of the gory details of setting up your own push notification server to negotiate with Apple’s push notification service. Best of all they have a FREE basic plan which you can send 1 million push messages / month.

Enabling Push for iOS and Urban Airship

To enable push on iOS it must be configured in the provisioning profile. Instructions on how to enable push on your application and integrate it with Urban Airship are located here

Configuring Xcode & Urban Airship PhoneGap Plugin

Assuming you have a provisioning profile for your app with push enabled and have exported and uploaded your .p12 certificate to Urban Airship we can get to work. If you haven’t refer back to the link above.

Configuring Xcode

Ok let’s get started. First thing is to create a new “PhoneGap based project” in xcode.

On the next screen you will need to uncheck the box for “Use Automatic Reference Counting”. The Urban Airship phongap plugin was not developed with ARC in mind and will throw errors later when you try to build your app.

PhoneGap Plugin

Next, you will need to download the PhoneGap plugin for Urban Airship. It’s on GitHub.

  1. Follow the GitHub instructions and copy the AppDelegate.h/m files from the sample (UAPhoneGap/Classes) into your project classes folder.
  2. Then, copy the PushNotification.h/m into your projects plugins folder. (UAPhoneGap/Plugins)
  3. Lastly, change the UA_KEY and UA_SECRET in AppDelegate.m to match your Urban Airship app id and secret. Like so.

PhoneGap.plist

In order to use the Urban Airship plugin you need to register it in the PhoneGap.plist file. Make sure you add it just as shown below. Case does matter. Also, note that for iOS 5 devices go.urbanairship.com must be added to the “External Hosts” section. If missing there will be a bunch of “Whitelist exception” errors.

Using the Airship Plugin in your WebApp

First, you will need to add the PushNotification.js file to your project. (see below) Next, you will need to listen for the PhoneGap deviceready event to fire. This event triggers when PhoneGap is loaded and ready to go.

Now we can start processing Airship push requests. It is a two step process, registering and listening. It is a somewhat complicated process so I put wrapped the logic into a github gist if you want to take a shortcut. Otherwise there should be a sample file with the PhoneGap plugin you downloaded earlier.

Testing

After all that setup it is now time to see if it worked. Launch your application from Xcode and target an actual iPhone or iPad. (Note: Push will not work from the simulator)

If you used the gist from above, the Xcode console should display your device token using the line -> window.plugins.pushNotification.log(“Device registered. Device token:” + e.deviceToken); The device token is special to each phone / tablet and contains your device id to negotiate with apples push service.

Push it! Push it real good!

To test we can type our device token from the Xcode console into the Urban Airship tester along with a message and hit send.

And the result…

Subdivision surfaces with three.js

Introduction

Subdivision surfaces are a technique for transforming a lower polygon model into a more detailed model. The algorithm subdivides each face in a model into smaller faces, while maintaining the same approximate surface. The advantage when using subdivision surfaces are that the modeler can continue to work with the less detailed model. This makes the process easier since it is less to keep track of for the modeler. Then when complete, the modeler can “bake” in the subdivisions to create a more detailed model.

More Info on Subdivision Surfaces – Wikipedia

Benefits

When dealing with large JSON models in three.js they can get large in file size. This is because they need to store data for every vertex and face in the model. For example, my Mr. Bird model was about 4.8 megs. However, by using subdivision surfaces a smaller low poly model could be sent. (reducing loading times) Then once the model is loaded a more detailed model could be created using subdivisions.

Example

For an example I modeled a very simple flashlight in Blender. When exporting to the three.js JSON model format the file checks in at 12k. Now that is more like it! By adding more subdivisions the flashlight geometry becomes more complex even though the model is still based on the original low poly geometry. Cool!


VIEW EXAMPLE

Code

Making this all happen is pretty easy. Getting the latest version of three.js should contain a new modifier called SubdivisionModifier. Once the model is loaded the subdivision modifier can be applied and the result will be a more detailed mesh.

Conclusion

For complex scenes subdivision surfaces give the ability to only send the “blueprint” of a mesh over the wire and let three.js do the heavy lifting. This technique should give users less time with lame preloading and more time with awesome webgl interactions.