Mandarin Design shows something interesting – using CSS to provide Magazine formatting. You don’t see that much in websites – mostly they have ‘website’ style. The page itself isn’t that well formatted – but the things it describes is interesting.
Software Development
Vertical Text in Internet Explorer
Vertical Text
CSS seems to lack an real control over text direction – it should, but of course the reality is different.
What I found was a way of making vertical in IE using some of those pointless filters, and the support IE has for top to bottom, right to left languages. It’s a bit sneaky in doing this – but it works in IE, at least. I haven’t found a way of doing it in Mozilla.
<div style="{ writing-mode:tb-rl;
filter: flipv fliph;
white-space: nowrap;}">
Alpha channel PNGs in IE
Gifs suck. PNGs (Portable Network Graphics) are much better – more colours, freedom from intellectual property rights, and (best of all) an alpha channel for transparency. Some good articles:
– PNG opacity (with some nice examples)
– Fuzzy Drop shadows (like on Google Maps)
– Choosing what image to serve in PHP on the server
Related: Opacity in CSS, being able to see through DIVS – CSS Transparency for IE, CSS Opacity
Ajax Design Patterns
Ajax Patterns Wiki. Worth a look for those of us playing with ‘Ajax’. Silly name, Ajax, really. What’s next? ‘Achilles’ for the next ‘killer app’?
More on patterns although much of this is just good design – e.g. local cacheing where possible, and indicating the ‘newness’ of information (people like that. A web site can feel ‘dusty’)
Faster DoEvents in Visual Basic
This is an interesting way of speeding up DoEvents, which is useful in a loop. It’s expensive, but necessary in your programme if you want it to respond to user actions. GetInputState() is cheaper, and it’s easy enough to use Windows API calls in Visual Basic code.
If GetInputState <> 0 Then DoEvents
Connection pooling in MySQL and Java
A bit of an example. I must try and find a package for dealing with this automatically – certainly creating the connection to database is pretty slow. Sharing those connections is well worth it. Need a bit of a play sometime. I’m also wondering if connection pooling with Javascript’s XMLHTTPRequest object might be a good idea.
Finding the offset of a page item
A couple of functions from my friend Jonathan Beckett for finding the x and y offsets of an item on a page. Basically, it works it’s way back up the DOM finding the offset of each parent item. There may be better ways; I haven’t checked that hard.
function get_x(obj){
var xpos = 0;
if (obj.offsetParent){
while (obj.offsetParent){
xpos += obj.offsetLeft;
obj = obj.offsetParent;
}
}
else if (obj.x) xpos += obj.x;
return xpos;
}
function get_y(obj){
var ypos = 0;
if (obj.offsetParent){
while (obj.offsetParent){
ypos += obj.offsetTop;
obj = obj.offsetParent;
}
}
else if (obj.y) ypos += obj.y;
return ypos;
}
A little reminder for myself
The interesting bit is the overflow. There is also overflow-x and overflow-y, although Mozilla and IE render the scrollbars differently – Mozilla outside the DIV and IE inside the DIV.
<div style="height:200; width:200;
z-index:1; overflow:auto; background-color:#fff;
color:#000">
Thoughts on Coding
When writing web applications, ultimately, you probably want to look at performing load testing. This is most easily done by an application, running a script, and pretending to be a number of users.
Of course, if you’re doing something like, say, creating nodes in some sort of a hierarchy (think messages, or files/folders), then you might need to do some stuff before performing other operations – like see if your node was created, get its ID, that sort of thing.
So here’s my thought – make that easy. Put things like ‘New Node ID = ‘ into HTML comments near the top of the page. That way, it should be possible to find and read them with many of these tools.
At the moment, we’re using OpenSTA, which works. That’s about the best that can be said for it. I like the look of Webload but it’s probably too expensive.
Mouse Pointers and CSS Styles
Mouse pointer styles. E.g.
<span style="cursor: default;">default</span>
| default | pointer |
| auto | text |
| help | crosshair |
| move | wait |
| n-resize | ne-resize |
| e-resize | se-resize |
| s-resize | sw-resize |
| w-resize | nw-resize |
Andy Burns' Blog 