Every so often you come across a site that is so amazingly obvious that you think “why didn’t I think of that!”, jsFiddle is one of those sites. It allows you to paste your HTML, CSS and JavaScript code, and view the result all in the same page…simple! There are other sites out there that do the same such as Jsbin, but they just don’t do it as well.
My favourite feature that really stands out is being able to include one of the many popular JavaScript library’s by simple toggling a drop-down box; it even has different versions of each library to choose from. This is a really handy feature if you are a plug-in developer; keep your plug-in code in jsFiddle and quickly see if the latest version of the library breaks it.
Quickly view your code change at the touch of a button
Library’s included so far are:
- Mootools Core
- jQuery
- Prototype
- YUI
- BBC Glow
- Dojo
- Processing.js
A couple of other features available are the easy to access code examples for each library and ability to run Ajax requests directly in the page. It’s like a mini IDE in your browser, all it needs now is an error console; maybe that is on their to-do list. If you don’t use JavaScript library’s and just want vanilla JavaScript, they have that option too.
As an example I’ve added my charactersLeft jQuery plug-in to jsFiddle, take a look here. Very cool huh!
With every new release of jQuery more and more features are added. A set of features I use all the time for manipulating the DOM are the prepend() and append() methods. In addition to these methods you also have prependTo() and appendTo(); they vary slightly in the fact that you create your new content first, then choose an element to add it to:
1
2
3
4
5
6
7
8
| //Create our content
var appendHTML = "<p>I'm going to be added to the DOM</p>";
//Select our element, then add the html
$("#container").append(appendHTML);
//Create our content, then select the element to append to
$(appendHTML).appentTo("#container"); |
Prep-end works exactly the same only it adds the content as the first-child of the container rather than the last-child.
With version 1.4 of jQuery came a great addition to both methods;they can now accept a function which returns the index in the current set of elements, and the original HTML string of the element. The addition allows you to loop through a whole set of elements and easily add content to the beginning / end whilst including the original content:
1
2
3
4
5
6
7
8
9
10
11
| //Loop through all <p> tags and prep-end "I love jQuery."
$("p").prepend(function(index, html){
var newHTML = "I love jQuery. " + html;
$(this).html(newHTML);
});
//Loop through all <p> tags and append ", now with added spice!"
$("p").append(function(index, html){
html += ", now with added spice!";
$(this).html(html);
}); |
Very handy! I’ve put together a little demo to demonstrate this functionality in action.
You often find that most small websites that require a CMS don’t require all the features that some of larger solutions offer. While the likes of MODx, Expression Engine and even WordPress are amazing platforms to work from, they can be a little overkill for very small sites. (WordPress isn’t strictly a CMS, but it can be hacked to perform similar actions).
I decided to look for a simple solution; that’s when FrogCMS popped up. It’s free, open-source and very simple to setup. Upload to your server, create your MySQL database with relevant privileges, run the install script and there you go. A big plus point with Frog is the administration page is very straight forward to use, so even the most technophobic client shouldn’t have a problem editing their pages.
Clean and simple administration area.
The templating system is a breeze to use if you know a bit of basic PHP. For example say you want to add a main navigation that automatically updates as you add pages:
1
2
3
4
5
6
| <ul id="mainNav">
<li id="first"><a <?php echo url_match ('/') ? ' class="active"': ''; ?> href=" <?php echo URL_PUBLIC ; ?>">Home</a></li>
<?php foreach($this->find('/')->children() as $menu): ?>
<li> <?php echo $menu->link($menu->title, (in_array($menu->slug, explode('/', $this->url)) ? ' class="active"': null)); ?></li>
<?php endforeach; ?>
</ul> |
The ‘foreach’ just loops through the children off the main site route and generates the navigation as an unordered list. Defining editable areas in a layout is just as simple:
1
2
3
4
5
6
7
8
9
10
11
| //Add a snippet
<?php $this->includeSnippet('top-navigation'); ?>
//Add your main page content
<?php echo $this->content(); ?>
//Add another area of content called 'sidebar'; Controlled via a tab on the page admin.
<?php echo $this->content('sidebar'); ?>
//Test to see if we have content, then show
<?php if ($this->hasContent('sidebar')) echo $this->content('sidebar'); ?> |
Even with just those simple lines of code it is possible to create a dynamic user managed website. If it doesn’t do exactly what you want you could always write a plugin to fill the gap.
The only negative point I have to say is that it doesn’t seem to get updated very often, but for most projects that shouldn’t be a problem as it’s already has a solid code base with lots of support and docs available.
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.
