Recently I started re-reading a book by now Professor, Ian Stewart, called “Does God play dice?”. A truly fascinating book about how the universe isn’t always predictable. It all comes down to Chaos Theory.
In the first chapter page 14 & 15 the reader is invited to grab a calculator and create a little chaos. With a few key presses it’s possible to create a completely chaotic pattern of numbers. Ian Stewart has also added a little graph to show what that pattern looks like; this is where Flot comes in.
Flot is an pure JavaScript graphing engine for jQuery. It can create great looking graphs in a matter of minutes. Pass your data in an array to Flot, it does all the hard work and a graph pops out the other end using the HTML5 canvas tag with some VML magic. It is even supported by IE, just add a conditional tag with a script tag pointing to excanvas.pack.js.
Using 6 threads to generate chaotic data
The equation to create this set of chaotic data is very simple:
As you can see from the formula above, the equation is a feedback loop. With each iteration a new value of ‘x’ is created and fed back in. The amazing thing about this equation is how simple it is to get both order and chaos. Set your value of ‘k’ to 1 and after a few iterations order is achieved; set ‘k’ to 2 and you get chaos.
I will be posting a demo to play with in the next few days, it isn’t quite finished yet but you can see a screenshot above.
While testing a WordPress theme in various browsers (IE) I noticed a strange issue that was occurring in IE6, but fine in IE7+. After a little head scratching I realised IE6 doesn’t recognise the abbreviation(abbr) tag. I’d never noticed before as I very rarely use the tag.
As a quick fix you could edit your theme:
1
2
3
4
5
6
7
| <!-- From -->
<abbr>Abbreviation here</abbr>
<!-- To -->
<abbr>
<span>Abbreviation here</span>
</abbr> |
Then apply any styles to the inner span rather than the abbr. Or if hard coding a span isn’t your thing you could always use a little bit of jQuery(1.2+) goodness to add the spans for you:
1
2
3
4
5
| jQuery(function($){
$("abbr").each(function(){
$(this).wrapInner('<span></span>');
});
}); |
The effect on page render time will be minimal since we are only grabbing a single tag with no complex selectors.
Full Frontal 2009 - The line up
This post is slightly late as the conference was on the 20th November 2009. But better late than never i guess!
The day was very wet and rainy but that didn’t take anything away from a brilliant conference. Some great speakers there: Simon Willison, Christian Heilmann and Peter-Paul Koch(ppk) to name a few.
The two highlights for me were the very entertaining talk on ‘Optimising where it hurts’ by Jake Archibold and a great introduction to node.js by Simon Willison. It was quite a technical talk and after a long day of listening to various people present it did make my brain hurt a little. I’ve added node.js to the ‘TODO’ list of things to look at… eventually.
Hopefully there will be another Full Frontal in 2010, if there is I’ll be going again.
It’s always interesting running ySlow on a website you are working on, getting that ‘warm fuzzy feeling’ when you finally get that ‘A’. I noticed while using it on nooshu that jQuery was being included twice. Version 1.4 by me in the footer.php and version 1.3.2 being included by a plug-in (or WordPress itself). Not Good. The user gets an extra 40Kb download and an added HTTP request.
A quick way to fix this is to add this to your functions.php file (located in the theme directory). The admin section will still be able to use it’s own version of jQuery due to the if statement.
1
2
3
| if(!is_admin()){
wp_deregister_script('jquery');
} |
If you don’t have a functions.php file you can create a new one and paste that code inside. While in there you may also want to include this:
1
| remove_action('wp_head', 'wp_generator'); |
That will remove your current WordPress version from your ‘head’ tag in your templates. Not a big issue but could be useful information to a malicious individual.
For more information on both functions in the WordPress codex see remove_action and wp_deregister_script
A while ago I was presented with a design that was split into 3 columns all of equal height. This isn’t usually an issue but the content within the columns was going to be content managed by the client so would always be changing (or breaking). The designer was adamant that all the columns should line up across the bottom so I decided to write a quick jQuery plug-in to do this.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| /**
* Simple equal height columns jQuery plugin
* Usage: $(".col").equalCols();
*/
(function($){
$.fn.equalCols = function(){
//Used to sort the array
var sortNumber = function(a,b){return b - a;};
//Empty array
var heights = [];
//Save the jQuery object for manipulation at the end
var $all = this;
return this.each(function(i){
var $this = $(this);
//Push all the heights into the array
heights.push($this.height());
//Once we have looped through all elements
if($.length === i){
//Sort the array
heights.sort(sortNumber);
//Set all elements to the same height
$all.css({'height': heights[0]});
}
});
};
})(jQuery); |
As I haven’t had much need to create custom jQuery plug-ins so far this is great practice. It also shows how easy it is to add functionality using jQuery.
The downside to this is the user will need JavaScript enabled for it to work as is always the case with client side solutions. Since the user can still see the content, even with JavaScript off I see this as no big issue.
Update: I had a comment on my Snipplr account informing me about an example given on the jQuery.map() method API page. A lot less code than what I have above but may take a few minutes to get your head around what exactly is happening.
1
2
3
4
5
6
7
8
9
| $.fn.equalizeHeights = function(){
return this.height(
Math.max.apply(this,
$(this).map(function(i,e){
return $(e).height()
}).get()
)
)
} |
