nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: HTML

A Hypertext Markup Language post all versions from HTML 4, XHTML and HTML5.

Internet Explorer 9: Is that light at the end of the tunnel?

Last week Microsoft decided to unveil a technical preview of Internet Explorer 9 at Mix 2010, a conference that demonstrates up and coming Microsoft technology. Since it’s only a preview it’s no where near a complete browser yet, but it gives developers a chance to see what the future holds for the (Microsoft) web.

It comes packed with a whole host of new features…. border-radius at last! With new CSS3 selectors being included too, the life of the Web Developer is becoming slightly easier (and a lot more interesting!). The JavaScript engine has been improved dramatically, and it actually scores quite well on the Acid3 test (55 / 100 for IE9 compared to 20 / 100 for IE8).

Also included are a whole host of HTML5 features including native video support (video tag), audio embedding (audio tag) and some SVG sprinkled in there for good measure. The video codec being used is h.264, YouTube and Vimeo already support this codec which is great news for users. It’s worth noting that Mozilla doesn’t plan on using h.264 due to licence issues since the codec isn’t free. So there could be trouble in store for developers when using the video tag in the future.

Internet Explorer 9 business chart demo

IE9: It's not pretty but it certainly is a step in the right direction.

Hopefully IE9 will finally kill off IE6 (although I really can’t see that happening) as it will only be available on systems running Vista+ operating systems. The reason for this is because IE9 supports DirectX video acceleration using Direct2D, which (apparently) isn’t possible on XP; forcing users to upgrade to Windows 7. It’s an interesting strategy, lets hope it works.

I’m not usually one to praise Microsoft when it comes to Internet Explorer, but IE9 looks very promising.

Mandelbrot Set Renderer using JavaScript and the Canvas API

A couple of weeks ago I happened to notice a tweet on Twitter by Christian Heilmann who linked to Geoff’s Mandelbrot Renderer. Geoff has created a tool that renders the Mandelbrot set using JavaScript and the Canvas API… amazing! I’ve been interested in fractals for a good few years but have never had the chance to look into generating them; so I decided to have a play with Geoff’s version and see what I could come up with.

The Mandelbrot set was named after Benoit Mandelbrot, who first saw the shape at IBM’s Thomas J. Watson Research Centre on March 1st 1980. It’s place is in a field of mathematics called complex dynamics, having not looked at any mathematics for a good few years it took me some time to get my head round exactly what was going on, and I still only have an inkling of what it all means.

Various forms found in the Mandelbrot Set

Here are just a few of the shapes I found using the tool. Why not try it yourself?

The image above – top left is arguably the most famous fractal; the three other shapes have been generated by zooming into the original fractal. The ‘image’ has infinite resolution, you can keep zooming in and it will always generate a new image. I’d say the only limitation is the browser / computer generating it.

One thing you will notice when zooming is the fact the Mandelbrot set is self-similar (or at least close to self-similar). At many points you will notice the original fractal shape, only on a smaller scale. This along with other repeating shapes creates a beautiful image purely generated by mathematics.

Note: Slight update to the render method here.

View a demo here. A few features I added:

  • Add render loader and restyled the form layout
  • User can switch between colour & grey-scale
  • Ability to select a range of hues the render uses
  • Possible to change the saturation and lightness of colours used
  • Ability to rotate the canvas
  • Change the width and height of the render area
  • Select from a set of zoom / position presets
  • A version using the Web Workers API in Firefox 3.5+ (See notes below on usage)

Note: As I mentioned above I have created a version using the Web Workers API found in Firefox 3.5+, but I strongly recommend using the standard version; I created it to see what difference it would make to the render time.

As it is, it makes no difference, in fact it actually makes it worse. The iteration calculation has been offloaded to a worker thread, the worker compiles the data then sends it back to the window. The window then loops through this the data and renders the image since worker threads don’t have access to the DOM for security reasons. This rendering tends to slow the browser down making the UI very slugish. I’ve tried not to use a setTimeout(“function()”, 0), to allow the JavaScript engine to catch up as, but it looks like I may have to in future versions. View a version using the Workers API here.

Big thanks to Geoff for putting the original together. Sliders and event handling was added using jQuery and the excellent jQuery UI. Preview carousel function used jCarousel.

Changing your WordPress Sidebar Markup

While creating a theme for WordPress today I ran into a little problem with my sidebar; the layout of the sidebar didn’t quite fit my needs for the design in-hand. At first I thought it could be a case of delving into the WordPress core code that generates all the widgets and modifying where needed, but that isn’t much fun. You also run the rist of these changes being overwritten next time you update WordPress; there had to be another way.

Purely for styling I needed to add an extra span to the title and a div to the widget wrapper. After searching through the Codex I came across the perfect solution:

1
2
3
4
5
6
7
8
9
10
11
//Custom settings in associative array
$args = array(
    'before_widget'  =>   '<li id="%1$s" class="widget %2$s"><div class="inner">',
    'after_widget'   =>   "</div></li>",
    'before_title'   =>   '<h3 class="widgettitle"><span>',
    'after_title'    =>   "</span></h3>"
);
//Check for register function and register the sidebar
if (function_exists('register_sidebars')){
    register_sidebars(1, $args);
}

You simply create an array with your custom settings and pass it into the register_sidebars function along with the number of sidebars you wish to register; paste that into the functions.php file in your theme and you’re done. If you don’t have a functions.php file you can just create one. All the settings are pretty self-explanatory and with these changing widget markup is easy.

On a side note; I’ve never been a big fan of using nested lists in the sidebar, I’m not sure it’s semantically correct; but I guess it does the job and works even when CSS is disabled.

You learn something new everyday!

Useful websites for a Front-End Web Developer

Over the past few days I’ve compiled a list of websites I use quite frequently that really help speed up the Web Development process. The sites won’t build your pages for you but they can certainly help when it comes to debugging and problem solving.

Clean CSS

I have been using Clean CSS for a few years now to clean up and optimise my CSS. The tool will give you a break down of where you can be making optimisations and also point out potential issues with invalid properties. You can either apply the changes manually, as it gives you a line number (my prefered method) or you can download the output as a file. I must admit I only use it every so often as I’ve merged most of the optimisations into my working process.

An exception to that rule is when working with other peoples CSS, it’s always my first port of call. There’s even the ability to create your own template, so the CSS can be formatted just as you like it when it comes out the other end.

CleanCSS GUI

The CleanCSS interface simple to use with lots of options to play with.

Snipplr

Snipplr has been around for a couple of years now, it’s a excellent place to store all those little snippets of code that you often use. You can view other peoples snippets too, so if you’re looking to a solution to a problem there’s no need to re-invent the wheel; look see if someone else has a solution.

The only real issue I have with Snipplr is the amount of spam it receives, which is a real pity as it’s such a useful tool. Maybe that’s something the developers can look into fixing.

Em Calculator

For a few years now I’ve been setting my font sizes using the relative unit em’s rather than pixels or points. This was due to the fact that if you set your font size in pixels, IE6 users can’t increase the font size due to IE6 being… erm… a truly awful browser; not good at all for accessibility. Luckily IE6 is gradually fading away and IE7+ all scale font sizes properly, so in the future this tool won’t be needed.

The problem with using relative font sizes comes when you have a nested elements. Say you have an unordered list with its font size set to 12px (0.75em) and you want one of your list items to be set to 10px (0.63em). Since we are using relative font sizes the 0.75em has an effect on the lower list items. If you simply set the the list item to 0.63em the text size will be tiny because you are asking the browser to set a size of 0.63em of 0.75em. Not what we wanted at all! This is where Em Calculator comes in useful as it does all the calculations for you. You actually needed to set the list item to 0.83em….duh!

Em Calculator interface for quick relative font size calculations

An example of how Em Calculator works with my example unordered list.

jsFiddle

I’ve mentioned jsFiddle before, it’s a tool that allows you experiment with HTML, CSS and JavaScript and see the results on the same page. In the past couple of days they’ve added a new version of Processing and the RaphaelJS library. A link to my previous post on jsFiddle is available here.

HTML Entity Character Lookup

If you’ve ever had to build a set of multi-lingual HTML emails you will know how tedious it can be to encode all characters so they are valid HTML. Lucky with HTML Entity Character Lookup by LeftLogic it’s simple. Copy and paste the character you want to encode into the tool and it will give you encoded version; do a quick search and replace then you’re done.

HTML Entity Character Lookup by Leftlogic

Quickly lookup character entity's using Leftlogics tool.

For OS X users there’s also a dashboard widget you can use for easy access.

CSS Sprite Generator

Using the sprites method can speed up your page load time by minimising the number of HTTP Requests a users browser has to make to the server. It involves consolidating all your little icons and background images into one file, then moving that one image around using the background-position property.

You could do this manually in Photoshop, or you could get an on-line tool to do it for you. CSS Sprite Generator is my favourite of the sprite generators available. Simply ZIP up the files you want to sprite, upload them to the tool and it will return one large image and all the relevant CSS background-positions for you to copy / paste into your CSS file.

It’s particularly useful when it comes to site navigations. Having the off, on and hover states all in one background image means the user doesn’t see that ugly flash of unstyled content as hovering over the navigation bar, since all states are loaded when the user first hits the page.

Are there any others I’m missing? Post a reply if there are others you use.

jQuery Plug-in: Simple Navigation Animation Stagger

It’s great when you run into old code that you’d completely forgotten about. While reviewing a couple of old sites I’d put together I ran into some old jQuery animation code the client had requested. I’ve used it on a couple of projects in the past, not always on the navigation; it can be used with any set of list items. So I popped it into a jQuery plug-in for quick deployment on future projects. View a demo or download.

jQuery.staggerNaver simply delays each fadeIn animation on a set of list items to create a type of ‘wave’ effect. The plug-in can accept an object with custom user settings:

1
2
3
4
5
6
7
8
9
//Plug-in usage
jQuery(function($){
    $("#ourULorOL").staggerNaver({
        animateTime: 150,
        easing: "swing",
        onePageOnly: false,
        onePageSelector: "#home"
    });
};
  • animateTime: Time taken for fadeIn animation in milliseconds (default: 210)
  • easing: Easing method used, requires the easing plug-in if not default (default: “swing”)
  • onePageOnly: Use only on one page e.g. your home page (default: false)
  • onePageSelector: If you are only using the animation on one page, what selector would identify to jQuery that you are on that page? (default: “#home”)

I’ve included the one page only setting because as with any set of page animation it can sometimes become very annoying, especially if it does it on every page load!

View a demo or download (version 0.1 – updated 25th Feb 2010).

Currently on page 5 of 6« First23456