I’m currently reviewing some of the CSS pre-processors and perhaps will be using one for my next version of my website. I’m lending towards LESS, but also reviewing Sass and Stylus.
If you are not familiar with pre-processors, then I will summarize what they can do here. CSS pre-processors are a short-handed CSS style sheet that allows for variables, math and other elements to be inserted into them. For example, if you have a specific color scheme for your website, you can make a set of variables (think of the programming term: constants) that define what they are and then just utilize a descriptive name for it where ever you want it to appear. This would allow a designer to change the whole color scheme of the site with only a few changes in the variable section. You could use a find and replace for normal coding but this would mean that the coders need to be absolutely consistent when making the site. Another aspect of this is grouping of elements together in a fashion simple to how a coder would group a set of HTML in a DIV (or SECTION, ARTICLE, ETC) that are related to each other. Pre-processors convert this version of CSS code into normal CSS when the viewer looks at your page thus enabling everyone to be able to view it.
Hierarchical animation is having a static element (like a png file or better yet a section of one on a master sprite) and rotating this element around a point on it. This is in turn linked to children elements that moves with the parent object. For example, you can have a torso, upper arm, lower arm and hand elements that are formed into a parent-children structure (in the order stated). If the lower arm rotates around a point (which should match the elbow) then the hand will move with it. The hand’s personal rotation does not change, only the lower arm. Likewise if the torso moves, then the whole arm and hand structure moves with it.
It also allows for swapping of the elements if you did need more traditional animation. If the hand was a fist and then needed to extend it’s fingers, then it could scroll throw a sequence on the master sprite to cause that very effect to occur.
So, for a limited animation on a site, you could utilize a structure of hierarchical animation to form the majority of it while utilizing some sprite replacement for specific tasks. (think of an image of a mouth being swapped with different vowel sounds to appear as talking.
One game (out of most of them) that utilize this on the iPad is DragonVale. It’s dragons are composes of a series of elements that are then linked together and animated by hierarchical techniques. A few times, you see some sprite swapping occurring such as when a dragon opens it’s mouth to breath fire/ice/whatever.
Even in 3D environments, the use of parts and rotations around fixed points in a parent-child hierarchy is the vast majority as that each actual shape that changes over time adds to the memory needs to store that fragment of virtual change and rotation around points do not add much overhead as compared to new models with a slightly changed vertex/plane structure.
Been on the job hunt for the past three weeks and had a number of good interviews; some of which I just barely missed getting it and I am waiting to hear back on some others. In the meantime, I am continuing to work on my skills and building a project plan for this website. The updating of this site is slower than originally expected since I’m devoting only a smaller portion of my time into this.
Some of the personal projects that I’m working on is building up a library of custom jQuery tools. One of which is a jQuery banner system with a lightbox like drop into the page and add the image banners to cycle through, which having exposed methods to adjust the transitions, timing, click maps, etc. Ideally, this can be utilized for not just banner slides, but also for a “banner” with dynamic animated content which is loaded as needed for slide.
I’m also plan on looking into SASS and LESS (with ASP.NET). SASS and LESS are extensions on CSS3 to provide logic and variable insertion into the stylesheets. These technologies can help make a website more versatile by having less CSS being needing for some dynamic needs. For example, if you were using CSS to stylize something a person loads in a CMS and to apply a border color based on a number of different selections from that CSS, then you can have a variable in the external CSS that would hold the border’s color. The old method of applying this to the page could be by having a classname for each possible option from the CMS then adding it to the HTML element when it is written to the page. The CSS would have to contain all of the possible color options which could be massive. The old style also doesn’t allow for the CMS person to enter his only color from scratch. Another old method of applying this is by inline CSS for the parts that would be dynamic and that would allow for the CMS user to select any color of their choice but inline CSS is not a good web practice (but is still common to be found).
I have moved the prior site into a new blog in order to provide an enhanced user experience including a rapid update cycle for articles and posts. This will enable me to quickly upload new content while ensuring a reasonable workflow.
In the short term, I’ll be expanding the site and including the tutorials and some of the content from the prior one. In the longer term, I will be writing more articles about business concepts and principles and applying them to either business models, pc/video game mechanics (because it’s readily available to collect statistical data from them) and software reviews.