Broken Links

Thoughts on web development and technologies by Peter Gasston

Search

Category: Scripting

Building Preloaded.com: The Front-end

This subject of this post is the redesign of my employer’s website, Preloaded.com, and is cross-posted from the Preloaded blog with permission.

At the beginning of the redesign project we agreed some design tenets: the new site should be a best-practice showcase and an opportunity to learn and use some of the latest web technologies; and it should employ existing services where practical.

Read the full article


Mozilla release Bespin Embedded preview

Mozilla’s Bespin is a code editor built using web technologies. It’s still in its infancy, but shows promise. A new release, Bespin Embedded, lets you use the basic editor functionality on your own websites, using just a couple of lines of Javascript. If you don’t want to download it yourself, I’ve got a working demo. The editor doesn’t really do much at the moment, so this is really only a proof of concept.


Using the GeoLocation API

With the rapid growth of the mobile web, location-aware services are very much in-demand; the GeoLocation API was proposed to cater to this need.

Implementation is spotty at the moment; Firefox 3.5 supports it, as does Safari for iPhone (although not on the desktop, AFAICS). But it’s so simple to use, I’ve no doubt it will be adopted rapidly.

Read the full article


Building HTML5 video controls with JavaScript

The HTML5 video element is now included in Firefox, Safari & Chrome, and on its way in Opera. By using JavaScript to access the media elements API it’s easy to build your own custom controls for it; in this article I’m going to show how I built a (very) basic control interface.

Read the full article


Quick testing for console.log

I’m happy to see that IE8 includes native support for console.log, the JavaScript command which writes information to your preferred debugging tool (mine is Firebug). If you leave it in your code – as I did on my latest project – it throws an error in IE7 & below.

The way around it is to quickly check that the command is supported by your browser, and to provide an alternative (I use that old standby, alert) if not; and the quickest way to do that is with the if…else shorthand:

window.console ? console.log(foo) : alert(foo);

Very quick equal-height columns in jQuery

I’m having a bit of a love affair with jQuery, the Javascript library, at the moment. I know my way around JS but am far from an expert, so jQuery’s simple syntax is a godsend for me, and provides huge savings in my development time.

One quick technique I used yesterday was to make three elements of equal height; it’s very simple and won’t cope with dynamic content, but is perfectly suitable for simple page layouts.

Read the full article


Older

Aside

I’m writing about the CSS3 Multi-column layout module and I notice that WebKit supports a series of proprietary properties: –webkit-column-break-after, –webkit-column-break-before, and –webkit-column-break-inside. However, despite the documentation saying that they’re implemented in Safari 3+, I can’t seem to get any of them to work.

Has anyone reading this ever seen an example of these in action? I’ve searched for demos but have found nothing. If you know anything about this, please leave me a comment; your help would be gratefully appreciated.

[#] 2 Comments