Four Top Wordpress Code Highlighters Reviewed
I recently ran a whole lot of Wordpress code highlighting plug-ins through the grinder and ended up selecting four that, in my opinion, are the worthiest of the lot.
Writing a code highlighter plug-in proves to be a fairly difficult exercise. Your plug-in needs to be smart about its content, or the result will invariably be a disappointment. For instance, if the plug-in is activated using the <pre> tag, then it needs to maintain a stack/counter of <pre> and </pre> tags so that finding a <pre> tag in the code being highlighted doesn’t abruptly terminate the code parsing, disfiguring your blog in the process. I noticed the issue with SyntaxHighlighter, but the other plug-ins may also suffer from it.
SyntaxHighlighter
Tag: [sourcecode language='css']code here[/sourcecode]
My main issue with this plug-in is that it works in visual mode; hence, your source code formatting (tabs etc.) is lost. Other than that, it works well and support a wide range of languages and it offers several very nice features such as ‘copy to clipboard’ or ‘print’. My hope, right now, is that I did not use it correctly.
Rating: 
Highlight source Pro
Tag: <pre lang="enc__php" class="17">code here</pre>
I do not like the use of the class arguments, as it means “start numbering with line 17″ which totally breaks XHTML compliance.
Note the smart use of the enc__ prefix, which, when presents, means that the code being highlighted is encoded using HTML Entities. Add the prefix, you can use the higlighter in visual mode; omit it and work in HTML mode.
Rating: 
FV Code Highlighter
Tag: {code type=php}code here{/code}
Cute display, which will feel immediately familiar to Dreamweaver aficionados. Support PHP, HTML, CSS and XML.
Rating:
WP_CODEBOX
Tag: <pre lang="php" line="1" file="example.php" colla="-">code here</pre>
In my opinion, this is the winner. It works well, looks good and support more languages than any of the others — I counted about 70 different formats!
You can display the code box collapsed or expanded, offer a link to download the code, etc.
Rating:
If you enjoyed this post, make sure you subscribe to my RSS feed!
Flex: How I worked around MOUSE_OUT’s inefficiencies
In Twitterified Client v1, one of the features I really wanted available right off the bat, was that when a user moves their mouse pointer over a twitterer’s avatar, an overlay image is displayed. This image is a menu of sort, allowing the user to send a direct message, a reply or access a more advanced menu. Of course, when the mouse pointer exists the avatar’s region, the overlay image needs to quietly go. Being the Flex newbie that I am, I thought that a straightforward implementation would work:
_imageOverlayPanel.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut); |
In onMouseOut(), I would detach _imageOverLayPanel, remove the listener, and move foward. Unfortunately, when moving my mouse around at a reasonably fast speed, I found out that the overlay panel did not go away, and after a while I had several avatars “polluted” by that overlay panel. I started “tracing” the MOUSE_OUT event and found out that, at least in AIR applications, there is no guarantee that such an event will be triggered. Ouch.
I experimented with, instead, using a timer that would kick in every 500ms and check whether the mouse pointer was still in the avatar’s region. It worked very well but felt a bit clunky and there was a risk of race condition with mouse events.
In the end, I settled for an approach using MOUSE_MOVE, which feels “cleaner” and works almost as well as the timer method:
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMovePossiblyOut); |
private function onMouseMovePossiblyOut(event:MouseEvent):void { if(!_imageOverlayPanel.parent) return; var pt:Point = new Point(event.stageX, event.stageY); pt = _imageOverlayPanel.globalToLocal(pt); if(pt.x < 0 || pt.y < 0 || pt.x > _imageOverlayPanel.width || pt.y > _imageOverlayPanel.height) { _imageOverlayPanel.parent.addEventListener(MouseEvent.MOUSE_OVER, onImageMouseOver); // innerWrapper resumes listening to mouse_over events _imageOverlayPanel.parent.removeChild(_imageOverlayPanel); // overlay panel is detached from innerWrapper } } |
Note that the trick, here, is that I add my mouse listener to the stage rather than the image overlay itself. This allows me to receive mouse events that happen outside the overlay’s region; they are the ones I am interested in.
If you enjoyed this post, make sure you subscribe to my RSS feed!
Twitterified taking off: is private beta a mistake?
Somehow, seemingly out of nowhere, Twitterers have started to notice Twitterified. I guess a few positive reviews help.
But would Twitterified have received these positive reviews, had it not moved to open beta? I think not. The service was in closed beta for a couple months, which allowed me to kill a few gremlins I found in the system, but even so it did not attract enough adventurous users for its own good. So, I followed the “old” web 2.0 advice: release the product (early), even if you feel that it is not ready. Of course, I need to keep an eye on all feedback and fix problems as soon as they are reported. I do not think that an open beta can work any other way. Fortunately, due to the tool’s nature, feedback can be found in a very obvious place 
I consider myself lucky because I already have some experience with scaling applications — thanks to clicdev.com and past experience as a web host — and as a very clueless user interface “victim” I do spend a lot of time thinking about all the ways that an application could confuse me. But even so, that’s no reason to dwell in closed beta country. When I look around, it seems that no matter how talented and how successful web entrepreneurs have been, products launched as closed beta have always had a hard time making it as a mainstream product.
Not that I am thinking of Twitterified’s minuscule critical success as anything mainstream, or that I would dare compare its audience to Pownce! But, interestingly, when I look at Pownce and who its backers are, it doesn’t seem to have achieved the success it seemed poised to. Of course, I am not singling out Pownce. It just happens to be one of the projects I found really interesting.
In conclusion, I do not think that I will every launch anything in closed beta again. It’s just not worth it!
If you enjoyed this post, make sure you subscribe to my RSS feed!
typeface.js is promising
I read today about typeface.js and it’s exactly the lightweight replacement that sifr could use. If you are not familiar with sifr, in a nutshell: use whatever font you want, regardless of whether it is installed on your visitors’ computers or not.
Of course, these days, Flash is more popular than ever but if you are a purist, typeface allows you to do without Flash, using the Canvas element. And, even better, since it’s not Flash, it works on iPhone.
If you are looking for a pixel-perfect solution, however, it is not quite ready yet. Not far, but not quite:
- Text replacement does not allow the user to select text in either FireFox or Safari
- font-stretch support is not rendered correctly in Opera
Now, these weaknesses are, I am sure, only temporary and they are the price to pay for being able to specify your text’s rendering using pure CSS (font-stretch: normal)
If you enjoyed this post, make sure you subscribe to my RSS feed!
Patents: Oh, now this is disgusting
According to The Register, at IFA 2008, in Berlin, some good patent trolling took place. IFA stands for ‘Internationale Funkausstellung’ and is Europe’s largest consumer electronics fair. 69 companies were raided, which beats Cebit’s 51.
“Yes” you point out, “but it’s patent holders’ prerogative and, in fact, obligation, to enforce their patents.”
You are absolutely right but this is not what this is about. We are talking, here, about Italy-based Sisvel, which is one of those outfits that does not actually produce anything but maintains what they refer to as a patrimony. They mean, of course, that their business model consists of buying obscure patents and suing the hell out of everybody. More Sisvel fun here but feel free to Google them for yourself.
Now, what’s really aggravating is how these raids happen on suspicion of wrongdoing. If you are one of the raidees, your only option is to fight it in court, which isn’t really going to help with your current “boothless” situation. Cf. latter link.
Oh, and Sisvel have their own booth at IFA. And I thought that I had an evil neighbour.
If you enjoyed this post, make sure you subscribe to my RSS feed!
Google Chrome: an index of what developers need to know (good and bad)
For quite some time, some of us have heard a very persistent rumor about the new Google browser. Well, here it is. And by that I mean: now. Well, tomorrow. And when you see some of the technological pieces it incorporates, it is definitely months ahead of the other guys (Javascript, you are so sexy!)
You can find the official announcement here.
Philipp Lenssen, at Blogoscoped, does a good job of listing the visually appealing goodies offered by Chrome. He even scanned and posted the comic book he got in the mail.
Here is, for your convenience, a list of what’s exciting for developers (oh yeah, it’s open source!):
Each tab runs its own process. Why, in this day and age, should a modern application that will remain open for days or weeks, stick with a memory model close to that of dinosaurs like VxWorks?
It’s WebKit + the V8 JavaScript VM. With a JIT compiler and all the optimizations offered by a VM, we should start seeing JavaScript performance close to that of native languages. Unfortunately, the DOM is not mentioned. Ideally, all DOM manipulation should be also compiled (with the possibility of inlining, etc)…we will know more as soon as we run some tests.
V8 uses aggressive garbage collection. OK I was a bit dishonest in the previous bullet point. This is a bit less exciting than some might think. Yes, there is a cost with conservative collection, since the gc needs to go through the execution stack and identify pointers heuristically and it is impossible to keep track of actual space allocation. Oh, and no generational collection…so, wait, it’s great that we don’t do that, right?
Well, I do not think that it’s the cat’s meow the Google guys are claiming it to be. Precise pointer housekeeping means that your program may incur quite a dramatic overhead, which of course depends on your program’s structure. For instance, one of the advantages of garbage collection is to reduce the need for synchronization in multithreaded programs. Precise housekeeping, however, requires the re-introduction of safe points, which force the compiler to synchronize bits of code where it is safe to reclaim memory. This would explain why some existing benchmarks show the new JavaScript VMs as not performing so well when simply running dumb loops as opposed to performing lots of local allocations.
Tabs run in their own sandbox. That’s certainly a proven security model and it makes it very hard to meddle with another tab’s content. Note that plugins are exempt, however. I wonder if frames are sandboxed,because if they are this is going to break a great deal of pages, just like AIR does.
Google Gears comes standard. Well, it’s no surprise. But it certainly makes me wonder if I want to change the browser requirements for the professional applications I am working on. After all, it’s been proven that Gears can really help desktop-like applications scale more easily.
OK, that’s what I have for now.
Oh, just a last, non-technical comment: I hope that regular users do not read this page and take its content literally. It makes it look like scammers “send users to a nearly exact copy of their bank’s website” and shows a somewhat different URL. People need to be made aware that they could actually be sent to the VERY SAME link as their bank’s and still fall prey to a scammer, since it is possible to fake that link’s destination through DNS poisoning.
If you enjoyed this post, make sure you subscribe to my RSS feed!
A List Apart: Take The Survey!
Do you make websites? Please take the survey.
If you enjoyed this post, make sure you subscribe to my RSS feed!
How I setup networking for VirtualBox on Ubuntu
Just a quick note: I use VirtualBox daily at work. It provides excellent emulation for my original XP install (the one that came pre-installed on my Dell box!) while my main OS is Ubuntu. Setting up networking is not as straightforward as with VMWare, so here is what I had to do:
First, edit /etc/udev/rules.d/20-names.rules and make sure this line exists:
KERNEL="tun", NAME="net/%k" |
Then create this script - you will run it whenever you wish to reconfigure your network:
#!/bin/bash echo "Erasing old configuration" sudo route del default sudo ifconfig tap0 down sudo ifconfig eth0 down sudo ifconfig br0 down sudo brctl delbr br0 sleep 1 echo "Creating virtual interface" sudo chown chris /dev/sdc1 sudo tunctl -t tap0 -u chris sleep 1 echo "Creating bridge interface" sudo brctl addbr br0 sleep 1 echo "Making physical interface promiscuous" sudo ifconfig eth0 0.0.0.0 promisc sleep 1 echo "Binding bridge to physical interface" sudo brctl addif br0 eth0 sleep 1 #sudo ifconfig br0 10.255.203.34 netmask 255.255.255.0 echo "Configuring IP address" sudo ifconfig br0 198.206.186.210 netmask 255.255.255.0 # sudo dhclient br0 # The new way! sleep 1 echo "Binding bridge to virtual interface" sudo brctl addif br0 tap0 sleep 1 echo "Enabling virtual interface" sudo ifconfig tap0 up sleep 1 #sudo route add default gw 10.255.203.254 echo "Adding default route" sudo route add default gw 198.206.186.254 echo "All done!" |
What’s that, then?
We start by getting rid of any existing configuration; then I change my virtual interface device’s owner to my own user, since I am logged in as a non-root user. Obviously you need to replace ‘chris’ with your own user name. From now on, tap0 will be the virtual interface seen by VirtualBox.
I make sure that my real interface is in promiscuous mode, which then allows me to bind it with a bridge interface.
All that is left to do it configure my bridge interface so that it can take over communicating with the rest of the world!
If you enjoyed this post, make sure you subscribe to my RSS feed!
How To Make The EFF ISP Throttling Tool Work On Leopard
I love the idea of Switzerland, the new EFF tool for checking ISP throttling; unfortunately as of release Zero.0.5, Leopard seems to still be a mere afterthought. Here is how I worked around the few things that were not working out of the box.
First, Switzerland is written in Python and will require Psyco. It’s a good thing since Psyco is all about performance. If you do not have it already installed:
svn co http://codespeak.net/svn/psyco/dist/ psyco-dist cd psyco-dist/ sudo python setup.py install cd .. |
Download Switzerland from https://sourceforge.net/project/showfiles.php?group_id=233013
Extract it and change to its directory; eg
tar zxvf switzerland-0.0.5.tgz cd switzerland-0.0.5 |
The FastCollector provided doesn’t work. So…
rm bin/FastCollector.darwin |
Now when we build FastCollector, it will be available in /usr/local/bin/FastCollector
Here comes the only moderately scary thing for non-developers. Use the patch command to modify switzerland/client/PacketListener.py. This is the input for patch:
diff --git a/switzerland/client/PacketListener.py b/switzerland/client/PacketListener.py index 211b68f..dc0bbcc 100755 --- a/switzerland/client/PacketListener.py +++ b/switzerland/client/PacketListener.py @@ -93,8 +93,7 @@ class PacketListener(threading.Thread): p = platform.system() # Implementing the recommendations from # http://www.net.t-labs.tu-berlin.de/research/hppc/ - if p[-3:] == "BSD" or p == "Darwin": - print p + if p[-3:] == "BSD": cmd = ["sysctl","-w","net.bpf.bufsize=10485760"] try: # Recent FreeBSDs proc = Popen(cmd, stdin=PIPE, stdout=PIPE) @@ -110,6 +109,14 @@ class PacketListener(threading.Thread): proc = Popen(cmd, stdin=PIPE, stdout=PIPE) assert proc.wait() == 0 + elif p == "Darwin": + cmd = ["sysctl","-w","debug.bpf_bufsize=10485760"] + proc = Popen(cmd, stdin=PIPE, stdout=PIPE) + assert proc.wait() == 0 + cmd[2] = "debug.bpf_maxbufsize=10485760" + proc = Popen(cmd, stdin=PIPE, stdout=PIPE) + assert proc.wait() == 0 + elif p == "Linux": vars = [("/proc/sys/net/core/rmem_default", "33554432"), ("/proc/sys/net/core/rmem_max", "33554432"), |
Let’s build and install everything:
sudo python setup.py install |
Well, it was easy (if it worked!)
Let’s create a log directory for Switzerland:
sudo mkdir /var/log/switzerland-pcaps sudo chmod a+wx /var/log/switzerland-pcaps |
And finally let’s run it:
sudo switzerland-client |
or if you wish to run your own server (you need to advertise it too!)
sudo switzerland-client --server yourserveraddress |
Questions?
If you enjoyed this post, make sure you subscribe to my RSS feed!
Twitterified…at last!
I cannot believe that it took me so long to get my ducks in a row.
First, Twitterified was entirely written in Javascript, like most AIR clients. But some testing showed that rewriting in AS3 would dramatically increase responsiveness.
Then, I had to work on my web framework while creating twitterified.com. And finally I was only able to offer a decent video thanks to the overall godness offered by Vimeo.
But hey, here it is! For a limited period of time, if you go to the invite page and enter the code “nexus”, you will be automatically added to the private beta program.
Twitterified powers up your Twitter experience, allowing it to compete with the “new kids”: Pownce, Friendfeed, etc.
If you enjoyed this post, make sure you subscribe to my RSS feed!
