Monthly Archives: May 2006

tag

Posted on by
Reply

I’m a big fan of Javascript-based WYSIWYG editors as a way of creating rich content for webpages. They’re a much nicer solution than using BBCodes, Wiki codes or Textile-like markup languages. My favourite rich text editor at the moment is TinyMCE which I’m using on this blog. TinyMCE supports a lot more browsers than most of the other rich text editors and is quite nice to work with.

Many of these scripts will use hacks such as taking a textarea, hiding it, creating a new iframe with a blank document with designmode on, and then when the form is submitted copying the HTML from the rich text editor to the original textarea.

The browsers provide quite a low level way so scripts which implement rich text editors such as TinyMCE may be as much as 150KB.

<htmlarea>

It’d be great if a standard tag, similar to textarea but with HTML rich text editing capabilities, could be created. The "htmlarea" will just have to provide a very simple high-level API to make it really easy to add buttons to bold text, insert images, etc. The tag and API could be standardized through the WHATWG in a similar way to canvas (this tag could do for text what canvas did for images).

As more and more rich "Web 2.0" apps allow people to submit their own content, often including multimedia such as videos, flash, pictures and links, this could be a really useful extension to HTML.

Possible benefits: 

  • For web developers, they’d have a great browser-supported and standardized way of creating rich text editors which should be less buggy and work better than editors such as TinyMCE.
  • The rich text editor should be more accessible to those without Javascript.
  • The browser could have an "expert mode" which allows people to choose to always edit their HTML by hand rather than using rich text.
  • There are no constraints by the license of the WYSIWYG editor script.
  • No need to download 150KB from every site that wants a rich text editor.
  • No iframe, copying content hacks.
  • Right click > Edit in [Dreamweaver, Nvu, Frontpage…]
  • Works with the browsers built in spell checker properly (Firefox 2.0 or later)

Sci Fi Pulse: Stargate Deleted Scenes

Posted on by
Reply

The Sci Fi Channel has launched a broadband video channel called Sci Fi Pulse.

At the moment they have 18 deleted scenes and outtakes from Stargate SG-1 but according to Gateworld, they plan to have webisodes of Stargate SG-1, Stargate Atlantis, Battlestar Galatica and other Sci Fi Channel originals. It’s open to people who live outside the US which is great. They also have a couple of behind the scenes from Doctor Who and a whole episode of Battlestar Galatica (the most confusing and wierd TV show ever; Episode 215: Scar)

For any Stargate addicts, the deleted scenes (and presumbly the webisodes when Stargate begins in July) are a must-see.

XPath Checker (Microsummaries)

Posted on by
Reply

It must be Firefox extension day or something There seems to have been some really nice and innovative extensions on Mozilla Update recently.

XPath Checker is another fantastic extension. It’ll probably only appeal to web developers or XML geeks. Simply what it allows you to do is to generate an XPath expression for a piece of data on a website simply by right clicking the element and clicking "View XPath" on the context menu.

It seems to be pretty smart and will present you with the best expression it can – if it finds an id value it’ll use the id in the xpath expression rather than start from the root node and go through loads of child nodes. For example, when I right clicked the "Cow’s Blog" title on the header, it gave the following XPath expression:

id('header')/h1/a

Contrast this to the XPath expression which is created on the BBC News website below which doesn’t use ids. 

I tried it out in the wild on the BBC News website. I right clicked the main news headline and XPath Checker gave the correct XPath expression for the major headline.

XPath Checker 

Another fantastic thing is you can change the XPath expression at the top and the preview below will update with the new matches.

Microsummaries

This sounds like an esoteric and useless extension but it’s absolutely fabulous for writing Microsummaries. Up until now I’ve written the XPath expressions by hand which isn’t too much work but it’s very hard to test. And there’s no way a normal person should be expected to be able to write XPath expressions.

XPath Checker with a few modifications (to generate a microsummary file) could make Firefox 2.0’s microsummary accessible and useful to the average Firefox user. Yet another beautiful and simple extension which stays out of the way when it isn’t required and when it is needed does it’s job well.

Firebug 0.4

Posted on by
Reply

Firebug 0.4 is here! Along with Web Developer Toolbar, it’s a fabulous tool for web developers and turns Firefox into a fantastic environment for building and creating websites.

Firebug’s primary focus is on Javascript. It provides an improved version of the Javascript Console, a Javascript debugger , various inspectors and live editing of the DOM! In the past I’ve tried to debug Javascript in the same way I debug PHP – in PHP I use a print_r() call at various points in the file (a bit like a poor man’s version of breakpoints). I tried to replicate this by using alert() in Javascript but most of the time, it wasn’t very useful. Firebug makes it a lot easier to work with and debug Javascript.

New in this version:

  • Javascript Debugger with breakpoints, line-by-line stepping and variable inspection. Can replace Venkman.
  • Stack Trace
  • Error Debugger: can break on error
  • Console logging

See a full changelog. 

LiveHTTPHeaders is another extension that I love. I rarely use it but it’s there and available when it’s needed. This one is useful for debugging issues with cookies (e.g. checking expiration dates, paths, etc.)

Firefox Drag and Drop Upload Extension

Posted on by
3

I cannot believe how many times I’ve wanted this extension.

Normally, if I want to attach an image file, I use Explorer to find the actual image to use as I can’t stand the Open File dialog. Or the chances are the folder is already open because you were just working on it.

One great Windows feature is the ability to drag a file from Explorer and drop it into an application to open it. I use this a few dozen times each day – in fact it’s about the only time I ever use drag and drop. I can’t be bothered to work out Explorer’s wierd behavior to decide whether you want to move or copy a file.

Dragdropupload for Firefox makes it really easy to upload files to the internet. You can drop an image straight onto the file upload box of Imageshack rather than using the Open File… dialog and trying to find your image.

Dragdropupload:  

Drop files into attachment boxes instead of browse for them or type in the filename. Drop multiple files and fill all the entries. In some websites it allows to add new upload files: in Gmail is possible to drop the files directly over the "Attach a file" link.

Another fantastic thing is if there are two file fields, you can drag and drop two files at once – the extension will populate them both!

This is the kind of thing which should be built into Firefox. It’s a small change and is non-intrusive and it makes it so much easier and pleasant to use the browser. 

Office 2007 Beta 2

Posted on by
3

Office 2007 Beta 2 was released today. I’ve seen all the screenshots and read the posts on Jensen Harris’ blog on how great Office 12 was and it’s great to be able to try it out. It’s a pretty small download – 450MB gives you Word, Excel, Powerpoint, Publisher, Outlook, etc.

When you install Office, you’ll be given the option to Upgrade or to leave old versions. I still use Office 2000 and I didn’t want to be left without an office suite when Office 2007 expires in January so I chose to leave Office 2000 there. I also didn’t bother installing Outlook, etc. The install was quite quick – it took about 20 minutes, no reboot. The first time it started it required activation – this simply involved typing in the license key which was also entered at installation.

My initial thoughts were that Office 2007 was slow and indeed it feels quite a bit slower than Office 2000. The new interface is also very confusing at a first glance and it can take a while to get used to. I’m still not totally used to it.

I’m not going to give a few review or provide tons of screenshots as billions of sites already have; I’m just going to give my first impressions. 

I really love some of the UI improvements. The quick previews when you put your mouse over items is nice but I’ve found it sometimes takes a second or two to show on my system (3 GHz Pentium 4) which ruins the experience a bit.

Microsoft Word 

I love the blogging. You can set up Word with your MSN Space, Blogger account or any blogs which support the MetaWeblog API or the Atom API. It worked first time though I couldn’t work out how to make it upload pictures.

Another thing which I loved was the ease of creating SmartArt. It’s really easy to create some unique diagrams which look fantastic. I don’t know how long SmartArt will stay cool; Frontpage templates were quite cool until every single site started using them.

Blog Post

My god, it even has reflections! 

SmartArt

It is outrageously simple to do some things which are a real pain in the kidneys to do in earlier versions. 

The Beta does have a few bugs and issues – for example I found a dialog with the title &Password but this Beta is very usable.

Word 2007 knocks the socks off OpenOffice, previous versions of Word and all the web based word processors (if they ever were a contender). I have the feeling that I’ll be upgrading to this version when it comes out.

Reflections (Added 21:01)

If you hate reflections, you’re not going to be a fan of Office 2007. It’s unbelievably easy to add a reflection – you can add it to text, images, etc. You can do perspective on images really easily too.

Reflections

Firefox 2.0 now has Safe Browsing

Posted on by
3

I just downloaded the latest build of Firefox 2.0 and it seems that they’ve now integrated Safe Browsing. The Safe Browsing extension seems to be the Google extension – I can’t see any real differences between Google’s Safe Browsing extension and the version integrated into Firefox 2.0. It looks the same, feels the same, even the links link back to Google.

Note: I have reviewed some of the new features in Firefox 2.0 before. Oh, and Microsummaries.

Safe Browsing Screenshot

I am quite disappointed with the state of Safe Browsing at the moment. When I visited the Safe Browsing test page, it took about 3 or 4 seconds for the "Web Forgery" box to come up. I really don’t like the interface – IE’s behavior of blanking the screen and replacing it with a phising warning is a lot nicer.

The good thing is that remote lookups are disabled by default so Google don’t get any more of your personal data. I will be really annoyed if the default web lookup service stays as Google in the final version – Google shouldn’t get the personal data of every single Firefox user.

Safe Browsing Config 

My suggestions: 

  • Safe Browsing should be faster. I shouldn’t get shown the page and then 3 seconds later a warning that it’s phising.
  • Google should not be linked to in the Phising Block page. Instead, any links should point to Mozilla – a party that all Firefox users can obviously trust as that is where they got their browser from.
  • The remote lookup should stay disabled by default (privacy reasons) and if enabled, should download URLs from Mozilla – not Google.
  • The speech bubble doesn’t feel very Firefox. It’d look a lot nicer to use a similar interface used in the "page not found" and the feed reader.
  • Since Firefox is about maintaining choice, should there be an easy way for security products such as Norton or other sites such as Yahoo! to become the choice for determining whether a page is phishing?

Other Thoughts 

  • I’m unsure about the Search box behavior. For some reason, sometimes the results open in a new tab, sometimes in the same tab.
  • Get rid of Google Suggest!!!
  • I think a Spell Check option should be available in the Tools menu. When I see people using Word, many of them still don’t know you can right click on a word to correct the spelling. Firefox 2.0 assumes people will know the right click behavior.

Links

Customer Feedback Form

Posted on by
2

There are certain companies which you can never get a straight answer from. You might spend several hours on the phone listening to Beethoven or wait several days for your e-mail to be answered. And then they probably won’t bother reading what you wrote.

Sometimes I wonder why they don’t just stick this form on their website (try typing). 

Testing your site in Safari

Posted on by
9

Of all the major browsers, Safari is probably the biggest pain in the ass to test with. The vast majority of people use Windows and can test their sites in Internet Explorer, Firefox and Opera pretty easily. You’ll know that a web page should look more or less the same whether you use Firefox on Windows, Linux or OS X so you won’t need to install any other operating systems. Apple don’t make Safari for any platforms besides OS X and OS X is inaccessible to most people as they don’t want to purchase a new computer to test a website.

I believe some Safari users were a bit fed up of web developers forgetting about them and created services which would allow web developers to enter a URL and get a screenshot of their site in Safari. Dan Vine’s iCapture is probably the most famous one but I’ve found that it doesn’t always work and the last time I checked, it only gives a screenshot at the top of the page so it’s useless for whole pages.

Browsercam is another nice tool which is very comprehensive. It costs but there is a free trial. The free trial doesn’t give a screenshot of the whole page; again it is useless for whole pages.

I just came across SafariTest at Snugtech. This is a fantastic tool. It can give you a screenshot of your webpage in Safari at a selection of screen sizes. Not only that, it will show the whole page rather than just the top portion of it. If you’re testing scripts, there is a fantastic VNC service. 

Safari through VNC 

Web Software Vulnerabilities

Posted on by
2

There is a 90 minute Google TechTalk on Google Video about web software vulnerabilities and how to break web software.

It all started out as a place to share physics documents, but has grown into potentially mankind’s largest and most complex creation. The World Wide Web is a lot of things – a soapbox for everyone, a giant shopping mall, an application platform, and unfortunately a hacker’s playground.

As more applications get "web-ified" moving from the desktop or legacy systems onto the web, attackers follow the vulnerabilities. Without sophisticated tools or "1337 5x1llz", web applications are now the most attacked technology, with the majority of attacks categorized as "easily exploitable". 

Should be of interest to anyone who develops web applications. I’ve learnt a couple of things from the video.