...more recent posts
And speaking of Markitup (see my last post) here is what I need to remember to do to modify the buttons in the toolbar (this is for 1.1.9 - I think 2.0 will have a more reasonable approach to this.)
To remove a button you must edit set.js and remove the buttons entry in 'markupSet:'. Then edit set.css and remove the corresponding button css entry. AND THEN ALSO renumber all subsequent css buttons, decreasing their count by one. So, for instance, if you remove the strike through button ( .markItUp .markItUpButton6 a ) you must then rename the next button - .markItUpButton7 - to .markItUpButton6. and .markItUpButton8 to .markItUpButton7, etc....
Not to be a wise ass (because I love Markitup!) but that's like how I would code something! Makes changing things a pain.
I've spent the last few weeks looking into various textarea enhancements and replacements to make it easier for users to submit HTML formatted text to websites. I've never liked the full on wysiwyg textarea replacements (like tinyMCE or CKeditor). I think they shelter the user too much from HTML. I want to make it easier, but not hide the HTML completely behind the button bloat of a Microsoft Word clone. So I played with wmd-editor, which cleverly bills itself as a wymiwyg (what you see is what you mean) editor which inserts markup for you (in this case Markdown instead of HTML) while showing you a preview of the HTML alongside the textarea. Very nice idea. This is what stackoverflow.com uses. Here's a demo. Note that the contents of the textarea are displayed below the textarea, and the displayed HTML changes as you make changes in the textarea.
But as much as I tried to convince myself that Markdown was a good idea, I just couldn't swallow it in the end. It's no easier to read or to learn than plain HTML, so why not just use the real thing? Safety is one reason, but if you're sanitizing input with HTML Purifier (see last post) this reason loses a lot of it's value.
And also, as cool as the live preview is, it was causing me some problems depending on where the textarea was embedded on the page.
So finally I found Markitup which for me is perfect. It does Markdown, but also has a ton of other options, including HTML (also Textile, Wiki Syntax,, BBcode, or you can roll your own plug-in.) It has something similar to the wmd live preview, except instead of relying fully on javascript for the preview (which I was having trouble modifying because I'm not as fluent in javascript as I am in PHP), Markitup renders a preview on each return (or any time you want it to render by clicking on a preview icon in the toolbar). The preview is shown in an iframe using an ajax call to the server - this way I can process the text with my own PHP code (inserting <br> tags for line breaks, etc...) Perfect. I'm going to be rolling it out to one of my sites for testing this week and I'm incredibly hopeful about it. This is one of the last missing pieces for Geneva.
It's at version 1.1.9 now, but the sneak preview of version 2.0 is blowing my mind. Unfortunately I can't find any info on a release date. The last commits for 1.1.9 were in Oct of 2010. Hopefully it will be soon, as 2.0 has everything I want.
HTML Purifier is incredibly awesome. It's a set of scripts you can run user submitted HTML content through before displaying on the web (or, better, before saving to the database so you only have to run it once on submitted content) and it will remove any non-whitelisted HTML tags, as well as foiling various possibly nefarious acts (e.g., script attributes on tags, etc...) It also does a great job of cleaning up unclosed tags so that individual posts don't screw up formatting of an entire page. Seems like a mandatory thing to have if you are accepting HTML content from users (and clearly if you accept from anonymous users.) It's just incredibly robust.
One issue I ran into though (it's pretty complex) is that URLs in links were being replaced by '%5C'. The problem was that I was running the HTML through mysql_real_escape_string before HTMLPurifier. You need to do HTMLPurifier first, and then mysql_real_escape_string. I have no idea why, but that is the case. Maybe this will help someone else.
Image map for detailed information. Might need this for an upcoming project.
Browserling is a new cross browser testing web application built with stackVM. They run IE 5.5, 6, 7, 8, 9, FireFox, Opera, and Safari instances on their servers, and you can use these browsers remotely through a virtual machine inside Google Chrome on your local machine. So unlike browsershots.org (which is free or something for-pay like LitmusApp) which just sends you back screenshots of your specified web page as seen in different browsers, Browserling actually lets you interact with the web page. But...
I haven't been able to get it to work. Or, rather, it works, but it shows me a random page rather than the one I request. So not very useful on that count. Hopefully they get it worked out because this would be a really great tool.
HTTPS-everywhere is a FireFox extension from the EFF that helps secure a limited number of popular sites which already support some form of encryption over HTTPS by rewriting links in page to always use HTTPS. In other words, some popular sites like Gmail, Wikipedia, and Facebook, allow you to use HTTPS to browse securely, but they make it a tiny bit difficult by not always defaulting to HTTPS. So some links on a secure page will point to other parts of the site using regular HTTP. The HTTPS-everywhere extension will rewrite such links to help you stay connected securely.
Bunch of front end links for my own uses (and so I can finally close some of the 50+ tabs I have open). I'm doing a lot more client side stuff lately, especially using jquery. I still hate fiddling with HTML and CSS, but not nearly as much as I used to, and javascript is sort of fun although I'm not nearly as comfortable there as in PHP on the server. In any case:
Markup.io - super clever bookmarklet that lets you draw on any webpage, and then share your results. Great for communicating while tweaking web page design.
Common security mistakes in web applications, and the ha.ckers.org cross site scripting cheat sheet. You have to understand this stuff if you are building web apps.
jQuery.pidCrypt - a jQuery plugin to impliment the pidCrypt library
SVG-edit - web-based, Javascript-driven SVG editor that works in any modern browser. Link is to a demo - pretty fun to play around with. Not going to replace illustrator, but it is pretty amazing what can be built in modern browsers.
Zoom-info - pretty simple jQuery image effect that I happen to like. Also Rocketbar, persistent headers and footers, from the same place.
jQuery BBQ - simple, yet powerful bookmarkable #hash history. There are many different implementations of this idea, but this seems to be the most complete. And, sort of humerously, jQuery starwipe, from the same place. From the page:
With jQuery Star Wipe you can enable the single best transition ever created, the star wipe, in any recent WebKit browser!....Only works in modern browsers, but indeed, probably the single best page transition ever.
Why do I need this plugin?
If you even have to ask, then you don’t need it. In fact, you’re not even allowed to look at the live example. Just go away, now.
Protocol relative URL from Paul Irish. Helps with the problem when creating pages with image links when you don't know whether the page will be on http: or https:. It's amazing to me that there is always some other cool trick that I have never heard of before.
jQuery Face Detection (like the technology behind tagging people in FaceBook.)
And finally, one server side piece of goodness: Google's mod_pagespeed for Apache:
...[A] module for the Apache HTTP Server called mod_pagespeed to perform many speed optimizations automatically. We’re starting with more than 15 on-the-fly optimizations that address various aspects of web performance, including optimizing caching, minimizing client-server round trips and minimizing payload size. We’ve seen mod_pagespeed reduce page load times by up to 50% (an average across a rough sample of sites we tried) -- in other words, essentially speeding up websites by about 2x, and sometimes even faster.
Spamhaus, the venerable spam blacklisting service, is starting an invite only whitelist. (Blacklists say "we think these addresses are spammers" while whitelists say "we think these addresses are not spammers"; both can be used by email servers to reduce the amount of spam delivered to users.) The invite only part means, I would guess, that this list will be a big business type thing (I doubt I'll be able to be listed, but I'm sure Chase and Verizon will have no problem). This is the sort of issue that can be tricky in the sense that it seems to split the web into tiers based on something like corporate size, and this seems to cut against the democratic spirit of the web. On the other hand, spam is a ridiculously annoying problem, and this seems like it will only help the situation. So it's a good example of something the younger me might have been against on principle, but which I'm now in favor of for purely pragmatic reasons. The best internet isn't the one that exists somewhere in my dreams; it's the best one we can actually make in reality.
Is the Stuxnet worm targeting the Iranian nuclear infrastructure? Slashdot discussion is here. Debka (grain of salt, etc...) says that Iran has confirmed this to be the case. Pretty interesting.
I've run into an issue where I was hitting the memory limit of Safari on the iPad (loading in very large image galleries) which was causing the browser to crash. (ouch!) It turns out that there is possibly no direct way to unload images from memory in this case, but you can force something to the same effect by changing the src of images you want to unload to point to a small (1x1px) image file. This will unload the real (large) image from memory, replacing it with the small one. Details at the link.