Recent Entries »

React animations for a single component

React is a great framework for building web UIs. (And perhaps other UIs as well) I’ve recently started using it in some side projects, and love its ability to easily manage view state and efficiently update the DOM, reducing a lot of the “grunt work” of building dynamic web UIs. On the other hand, it feels relatively lightweight in that it doesn’t impose a lot of structure in how you design your app. This may be a Good or a Bad thing, but the upside is that there isn’t a steep learning curve.

One thing I recently wanted to do with React was to build a component that would animate during its transition from state A to B; an example would be an On/Off button. It is possible to do so with React’s built-in animation addon, but it just required some attention to detail.

Continued

RequireJS shim configuration, jQuery plugins and enforceDefine

If you’re using RequireJS’s shim configuration to load jQuery plugins while setting enforceDefine: true in your configuration, you probably noticed the following uncaught error in your JavaScript console: (The following example is for the iCheck plugin)

Uncaught Error: No define call for iCheck
http://requirejs.org/docs/errors.html#nodefine

Reading the documentation at that URL, yields the following important tidbit. (Emphasis mine)

This occurs when enforceDefine is set to true, and a script that is loaded either:

Did not call define() to declare a module.
Or was part of a shim config that specified a string exports property that can be checked to verify loading, and that check failed.
Or was part of a shim config that did not set a string value for the exports config option.

This means if you have probably defined your shim config like so, because you technically don’t need any exports from a jQuery plugin: (Since they just extend the jQuery object)

 shim: {
    "iCheck": ["jquery"],
  },

This doesn’t define an exports, so that is the cause of the error. To fix this, you can simply define the export to be the function the plugin adds to the jQuery object:

  shim: {
    "iCheck": {
      deps: ["jquery"],
      exports: "jQuery.fn.iCheck",
    }
  },

You can then reference the shim configured module (in this case, iCheck) using a requirejs() or define() call.

SoftLayer data type Java class generator

The SoftLayer REST API doesn’t seem to have an XSD, so you can’t use xjc to generate classes. That’s a shame for a strongly-typed language, since you’d now have to manually create classes based on their Data Type Reference.

I didn’t like that and decided to code up a Java class generator (it’s written in Python) based on the Data Type Reference. You can use it to generate a Java class based on the SoftLayer Data Type you pass in. Enjoy!