New Dibolmi.com on Rails

Been working on a new Dibolmi.com after some morrocan hackers decided to deface my website due to some vulnerabilities in the portfolio software I was using at the time. Wow what a mouthful. Anyways, I’ve been learning Ruby on Rails, so thought I would take this as an opportunity to start migrating my site over. Ruby on Rails has turned out to be relatively easy for me to move over to from PHP Once I got the hang of the syntax and what was what in relation to PHP. Only miff is that Prototype is DEEPLY ingrained in Ruby on Rails. Would prefer to work with mootools. I’ll have to fiddle around some more to figure out how to use mootools instead of prototype for talking back and forth to server. But overall, I’m impressed with it, and like how quick one is able to push out a site with minimal code.

Mootools Javascript Fisheye Dock Menu Example

I’m currently working on a mootools javascript fisheye dock menu example. You can see the fisheye example here: http://www.chrisesler.com/mootools/fisheye/index.php. I’ve taken some inspiration by the fisheye script developed by John Pennypacker at http://www.pennypacker.net as well as some help I got from Inviz (from mootools fame). The script is still a little buggy, but it works in all browsers as far as I can tell with the exception of the IE 6 and below PNG issue. I’ll work that out. But it works great in firefox, camino, safari, and IE 7. I’ll post more of my progress as I go along.

JoomlaOS

It seems some of my javascript experiments with Mootools inspired (in part) the new joomlaOS theme (see post). Thats a first for me! Guess I will still keep hacking away at mootools to come up with more useful javascript examples! Go see my current Mootools examples.

Mootools Javascript - Draggable Window Example

I originally posted this on the freewebsfarms.com forum.

Mootools is the latest incarnation from the Mad4Milk team who brought us MooFX javascript library and Mooglets. Mootools takes the best from prototype and MooFX and makes one lean and powerful little javascript library to do some amazing effects. I plan on posting more examples of mootools usage once I figure out more. The current documentation and examples are sparse, which is where this example comes in.

Here’s something thats a hack of the draggable windows from mooglets mixed in with the goodness of the new Mootools. It was inspired by mooglets windows as well as the mootools drag drop example by Jonathan Snook.

FIRST: add something like this to your styles.

.dragger {width:100px;background-color:#EFE;border:1px solid pink;margin: 2px; padding: 2px;}
.container {background-color: #66CCFF; width: 110px; height: 200px;border:1px solid pink;position:relative;z-index:50;padding:4px;}

SECOND: in the head add something like this. Obviously this comes after you’ve included the latest mootools script.

<script type="text/javascript">

var indexLevel = 1;

function dragContainerInit(el){

var fadeIn = new fx.Opacity(el.parentNode, {duration:300});

var dragContainerOptions = {

handle: el,

onStart: function(){
var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
fadeIn.custom(1,.5);
indexLevel++;
el.parentNode.style.zIndex = indexLevel;
}.bind(this),

onComplete: function(){
var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
fadeIn.custom(.5,1);

}.bind(this)
};

el.style.cursor = 'move';

el.parentNode.makeDraggable(dragContainerOptions);

}

window.onload=function()
{

/* setup draggables */

var draggables = document.getElementsBySelector('.dragger');
draggables.each(function(el){dragContainerInit(el);});

}
</script>

THIRD: In your HTML, add something simple like this.

<div class="container">
<div class="dragger">Drag me</div>
</div>

<div class="container">
<div class="dragger">Drag me 2</div>
</div>

This should give you draggable boxes with a nice transparency fade when dragging the handle.

LIVE EXAMPLE

NEXT EXAMPLE: Mootools table row and column highlighting.

Progress of new website

I stated in my last post I was going to redo my website in more detail. I’m trying to follow the direction setforth by Kelly Goto’s book “Web Redesign 2.0″ - which is a great book by the way.

I’ve gotten so far as to trying to layout and simplify the structure of the content I want to present. I’m not entirely sure of what content a personal site such as mine should portray, but I’m trying to build ChrisEsler.com  and Dibolmi.com as my respective brands. ChrisEsler.com is going to push mostly my online skills for developing websites and user interfaces with various web technologies such as Ajax, PHP, Databases (MySQL and Postgres). Dibolmi.com is going to be more centered on my print design skills - where book design is my primary focus, although thats not all I do.

My web framework/content management system called Landscape is going through a major rehaul. I’ve rewritten a lot of it to be more object oriented. The plugin architecture is far easier to implement as well as custom tags. I’m even working on making database calls directly from the template itself that can be parsed directly into the template without having to write php code by building a template tag right in the system. So far the template parser is wicked fast compared to before - but its pretty barebones right now. There is still things to do, such as rebuilding the URL rewrite and interpretation mechanism. I’ve also figured out a way to dynamically generate keywords for the page based on parsed content. However, this functionality eats some processing time so I need to figure out a way to cache output.

Things are good on the book design front. I’m working on the April-August 2007 market and trade books for my primary publisher. Going to be a busy weekend on top of finishing a ecommerce site I’m implementing with Joomla.

Thats the quick update. I will probably setup the new system once I get the template system to more polished state.

Krugle - Code Search Engine

I had signed up for the Krugle service when I first heard about it from Ajaxian. It was promising to be a search engine to find source code - of everything (php, java, perl, c, you name it). Well they got an overwhelming response, and had to back off a bit till they had the resources to handle the demand.

I just got my account code the other day, and signed up for the Beta. It looks very promising. The interface is nice and fairly intuitive. Lots of use of Ajax here to make requests and manipulate the gui. If you click on a search result, it enableds a side pane that allows you to look at the code and the repository where it is located. All in one place. Pretty impressive. Very little lag time.

There needs to be some minor cleanup of the gui, but overall its a good project, and I can’t wait to to see the final version. If you haven’t signed up for a Krugle account, I reccomend heading over to their site and sign up for the Beta.

QooxDoo Javascript UI Library

A while ago I discovered a pretty amazing library for UI design written entirely in javascript. What surprised me though is how little attention it was getting. No, it’s not Prototype or Dojo - they get tons of attention. The javascript library I’m talking about is called QooxDoo.

First thing you’e probably saying is ‘Cooks what??’. Heres a snippet from their website stating just how to pronounce the name.

What impresses me most about this javascript is the superb UI it generates. It has most of what you need to develop a Web 2.0 application. It is still fairly early in its development, but the strength of the community behind it has made it come a long way. It has the ability for a windowing system, ajax communication, excellent menu system, event capture, themes, and much more than I could ever write in a day. I suggest you vist their website for a demo.

I’m currently learning more about how to use this script to generate a UI. I’ve also figured out how to integrate CPAINT with it to do ajax communication with my PHP scripts that do the talking to my postgres and mysql database.

I plan on working out a simple application like a contacts list just to show the power of this open source project. And yes. It is free. Qooxdoo uses the LGPL as their license.

So check it out.

Ajax tooltip

I was looking for an ajax tooltip the other day, and I happened to find one that was actually pretty good. The tooltip itself is called “Bubble Tooltip“. This is very similar to the netflix tooltip.

What makes it easy is that you use basically one image for the background of the tooltip. If you want a fancy tooltip such as their example, you need to make the image a PNG to have the best transparency. You then write some basic css for the top and bottom of the tooltip.

Even though this is a pretty impressive ajax tooltip, I think I could do something similar with Prototype. I’ll try to write a new ajax tooltip script that utilizes Prototype since that is what I’ve been using mostly when I write ajax script.

http://web-graphics.com/mtarchive/001717.php