Technology Musings

June 10, 2010

Snippets / Cross-browser DIV Rotation by arbitrary degrees in CSS and/or javascript


I've spent most of the day on this, so I thought I would share.  Most people don't know this, but CSS3 has some *really* cool stuff coming - auto-rounded corners, gradients, and.... DIV rotations!  Unfortunately, it will be about 5 years before any of this becomes mainstream.  IE8 only has the very beginnings of CSS3 support.

So is there any way to get this on current browsers?  Yes!  The fine folks at have given us a way to do some of these cool effects using existing CSS.  If you just want, just go their, edit the stylesheet on the web page (yes! it is editable!), and copy/paste the resulting CSS into your CSS file.

But what if you want dynamic rotation?  Well, I looked at the CSS3Please source code, and figured out how it was all being calculated.  The IE6, IE7, and IE8 part is the worst, because it relies on a DirectX Matrix transform operation (isn't Internet Explorer always fun to work with?).  Not superfun, but do-able.  However, to get this calculated, we will need a Matrix library.  So, first, download and install the sylvester javascript library.  Then, put this javascript into your page:

<script src="sylvester.js"></script>
<script type="text/javascript">
function degreesToRadians(num) {
	return (num) * Math.PI / 180;
function createIEMatrixString(M) {
	return 'M11=' + M.e(1, 1) + ', M12=' + M.e(1,2) + ', M21=' + M.e(2,1) + ', M22=' + M.e(2,2);
function rotateElement(e, deg) {
	deg_str = deg + "";
	rotate_transform = "rotate(" + deg + "deg)";
	matrix_str = createIEMatrixString(Matrix.Rotation(degreesToRadians(deg)));
	filter_str = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', " + matrix_str + ")";["rotation"] = deg_str + "deg"; // CSS3 = rotate_transform; // Moz = rotate_transform; // Opera = rotate_transform; // Webkit/Safari/Chrome = filter_str; // IE 6/7 = filter_str; // IE 8["zoom"] = "1"; // ??? Probably IEs

Now, you can just do:

rotateElement(document.getElementById("whatever"), 20);

And that will rotate the element.  Note that this *sets* the rotation, so if I do this several times it will only keep the rotation at what I set it to, it won't keep on adding rotations.

Anyway, a little bit of work, a little bit of code for your client to download, but it works.

UPDATE - just found this jquery plugin that *might* do something similar, but haven't looked at it closely yet.

June 08, 2010

General / An Index to My Old IBM DeveloperWorks Papers


I often have to refer people to my old IBM DeveloperWorks papers, but it always takes so long to find them.  Therefore, I am going to post links to them all here to make them easier for me (and you) to find.  The dates were pulled from the IBM site, and some of them seem incoherent.  If I find the true release dates of the papers I'll put them in later.

Series 1: Theoretical Computer Science for Practical Computer Programmers

In this series, I introduced a lot of material that is usually only studied in theoretical computer science, and showed how it could be useful for practical programming:


  • Inside Memory Management (2004/11/16) - a look at a variety of ways that memory is managed in different systems.  Includes a functional memory manager (malloc/free implementation) written in C.  Covers manual memory management, reference counting systems, pooled allocation systems, and garbage collection.  Sadly, I was not aware of Apple's combination of reference counting and autorelease pools at the time I wrote this.
  • Better Programming Through Effective List Handling (2005/01/05) - this is an introduction to how linked lists work, why they are so useful for a variety of tasks, and how languages such as Scheme take advantage of them in interesting ways.  Starts in C, and includes a simple introduction to Scheme.
  • Higher Order Functions (2005/03/31) - Discusses how higher-order functions (functions that take a function as a parameter and/or functions that return a new function as a result) work and how they can be used to good benefit in programming.  Also discusses the relative equivalence of closures and objects, and when to use each one.  It begins using scheme, and then shows how to use everything in C.
  • Mastering Recursive Programming (2005/6/16) - this is an introduction to all of the fun associated with recursive programming.  It starts with a simple introduction to recursion, and moves on to how recursion can be used to write programs that are provably correct, how (and why) to convert loops to recursion, how tail-calls work, and how tail-calls are implemented in assembly language.
  • Continuations and Advanced Flow Control (2006/05/24) - continuations are an amazing, generalized flow-control construct from which you can implement just about any other flow control you want (threading, throw/catch, generators, and prolog-style backtracking computations).  The paper gives an introduction to a variety of flow-control structures (with various examples in Python, Prolog, and Java), and then shows how each one can be implemented using Scheme's continuation constructs.  Probably needed more explanation on the backtrack stuff - it's pretty amazing, but quite a bit different from the way we normally think about computation.
  • Lazy Programming and Lazy Evaluation (2006/12/18) - this is an introduction to delayed evaluation, how it is implemented, and how it can be used practically.  Shows how to use lazy evaluation to make use of infinite lists.  Examples are in Scheme and Java.

Series 2: Metaprogramming

Metaprogramming is one of my favorite subjects.  In this series I give an introduction to several kinds of metaprogramming and how they are done.  I wish I knew ruby when I wrote these, as Ruby's metaprogramming system is just awesome!

  1. Introduction to Metaprogramming (2005/10/20) - describes several metaprogramming systems, including CPP, M4, and Embedded SQL.  Then shows how and why you might want to build your own metaprogramming system.  Then I introduce Scheme's macro system, and how to do many of the same things that were in the other metaprogramming systems.
  2. Metaprogramming Using Scheme (2006/05/02) - goes in-depth on how to write metaprogramming systems with Scheme, and then shows how this creates a super-easy way to make domain-specific languages.  (Most DSLs are better done as metaprogramming systems for more general-purpose languages IMHO).  Compares the flexibility of a Scheme-based DSL to XML-based configuration languages.
  3. Enterprise Metaprogramming (2006/02/28) - describes the computational equivalence between graphical and textual metaprogramming systems, and why each one would be useful in different circumstances.  It also shows how that even with the advance in ease of use of computer programming languages, there will always be a split between the roles of a domain expert and a programmer - no tool can bridge the gap.  It then describes the Model-Driven Architecture (MDA), and how it can be used to extend the concept of metaprogramming further.  An example MDA application is given in Scheme, which produces both a set of C++ structs and corresponding SQL data definition statements from a single diagram built by the Dia program.

Assembly Language for the Power Architecture Series

When I got a PowerPC Mac I wanted to learn PowerPC assembly language, but didn't have time.  I thought, "hey, if I can convince IBM to pay me to write about it, that would give me a good excuse to learn it".  That birthed this article series:

  1. Programming Concepts and Beginning PowerPC Instructions
  2. The Art of Loading and Storing on PowerPC
  3. Programming with the PowerPC Branch Processor
  4. Function Calls and the PowerPC 64-bit ABI

PlayStation 3 Programming with the Cell Broadband Engine

IBM's Cell processor (called the Cell Broadband Engine) was the driving force behind the PS3.  It had a main processor and eight vector processors (each vector processor was a full-blown processor, though very limited).  Given the right workload, and the processor would scream.  However, if it wasn't programmed carefully, it would actually be slower than most other processors.  This is especially difficult because the vector processors actually used a different assembly language with a different memory model than the main processor.  This series walks a programmer through everything they need to know, from installing Linux on their PS3 to writing, complling, and linking their code.

  1. An Introduction to Linux on the PS3
  2. Programming the Synergistic Processing Elements of the PS3
  3. Meet the Synergistic Processing Element
  4. Program the SPU for Performance
  5. Programming the SPU in C/C++
  6. How to Make SPE and Existing Code Work Together
  7. Removing Obstacles to Speedy Performance

There was supposed to be a final paper where I applied everything to a scientific application, but I got worn out by the end and just had to stop.