WebReflection::encode (just a click to give it a try)
javascript:(function(src,w,h,i,s){if(this.WebReflectionEncode)return this.WebReflectionEncode();function p(){s.top=(document.documentElement.scrollTop||(document.body&&document.body.scrollTop)||0)+'px'};try{i=document.createElement('<iframe frameborder="0" src="'+src+'"></iframe>')}catch(e){i=document.createElement('iframe');i.src=src};s=i.style;s.border='1px solid black';s.width=w+'px';s.height=h+'px';s.position='absolute';s.right=0;s.zIndex=99999;p();w=setInterval(p,250);(document.body||document.documentElement).appendChild(i);this.WebReflectionEncode=function(){clearInterval(w);i.parentNode.removeChild(i);w=h=s=i=null;this.WebReflectionEncode=null;}})('http://www.3site.eu/encode/',280,320);
P.S. WOW, to make it possible I had to use raw format ... at least now the bookmark link seems to work fine in every browser!
What am I talking about?
We, as developers, too often post code in this or that website/blog, and often we loose our post or its meaning because of enabled html, and some mess in in the code. Basic example:
for(var i = 0; i<length; ++i) ...
Above snippet, extremely common, could cause unexpected problems due to the "i less than length" where the "<" character create a never-ending tag.
How can we solve the problem?
Usually I copy and paste code in a new document via CTRL+N inside Notepad++, and I replace every "<" with < ... but I have to admit: boring stuff!!! I discovered yesterday in Dustin Diaz blog, and I messed up completely a couple of comments, that there is a service, called postable, "to make your code friendly". First of all, I'll never get why that Ajax call exist, safetuze.php will never do anything different from an htmlentities or an htmlspecialchars but apparently I am wrong:- plus signs disappears, probably the author send without the proper encodeURIComponent JavaScript function, annoying
- there is no reason at all to send back the entire textarea, we deal with a field, we would expect to wait only for what we wrote in that field (AHAH way for a textarea?), annoying
- why we have to wait a server side call, is an absolute mistery ... as a plus, I am experiencing an USB pen to surf the web, and every single byte costs, annoying
- a basic page like that with just a call to the server and prototype plus scriptacolous to do it? unacceptable!!!
postable, in my opinion, is a "not that good answer" to a truly common problem ... so
again, how can we solve the problem?
I created a totally cross browser page, thinking about bandwidth, simplicity, and performances. So here I am with en-code, the same purpose of postable, except it just escape code snippets on client side (N times faster) and it does not require an entire framework to do a single thing.3KB Against 183KB
... and only congrats via Web Page Analyzer ...Let me know what you think, enjoy ;)
13 comments:
Coo. This works for me. I have been using postable for years only because someone else did it, and i was being nice linking to it. I can start using this other one now :)
Dustin, you'll not regret it, and if there is any problem just give me a shout. The point is that more I read that page source code, more I was like: WTF? En-code works perfectly with IE5+, opera, chrome, safari, firefox, iphone, android, and probably others, it's 3kb gif excluded but it has not the big background image ... I could speed up even more the service and reduce everything i n a couple of Kb but the point is, still: if you need a couple of characters replacement how can you use all these practices and bytes for it? Annoyed was the only word in my mind. I am sorry forpostable implementation, the idea was really good thoug
Is in spanish but maybe you like it:
http://lost.in/V7
encodes all ISO-8859-15 characters to his own html entity.
cheers!
Marc Palau
http://www.nbsp.es
You might want to check out Hackvertor for more advanced encoding/decoding:- http://www.businessinfo.co.uk/labs/hackvertor/hackvertor.php#PEBodG1sZW50XzE%2BPEBkZWNfZW50XzAoOyk%2BdGVzdDxAL2RlY19lbnRfMD48QC9odG1sZW50XzE%2B
I recently discovered something a little cooler: gists
http://gist.github.com/gists
basically is a snippet repository but is based on git, so someone can modify your snippet and "push back" to you the "patch"
it provide meaningful color syntax and can be embeddable in your posts
Obviously is not the same things but I think is interesting thought ;)
Marc, Gareth, thanks for links I'll have a look later but basically, the main problem is with these characters: <,>,",',&
these are the same escaped by PHP htmlspecialchars function and 99.9% of the case all we need to post our snippets. THe raw format is like encodeURIComponent, except it converts into HTML entities, rather than HEX combinations.
Elegant and simple, and as you mentioned meets the needs of 99% of users who are commenting.
Really nice! It would be nice to have a way to close/resize the popup iframe. Also, when using Safari, the textarea is resizable, and when you resize it, it makes all the buttons disappear (which isn't what was desired, I don't believe).
That second issue isn't a big deal...it was a mistake on my part to resize the text area (I thought it was a mechanism for resizing the entire window).
Nice tool though!
Another nice feature would be the ability to move the iframe, if desired.
Thanks, Andrea!
It's very cool, and I'll definitely add it to my toolbox.
Can you add a "Close" button? :)
Very cool work.
Why pick n' choose which chars to rawencode while providing a blanket decode solution?
http://gist.github.com/139513#L54
Why not also provide a blanket rawencode solution?
Guys, first of all thanks.
About resizable textarea, I need to check if there is a way to block safari cause it could be a common mistake. About size, the first link of this post is just a bookmakable one. Dimension are at the end as width,height, feel free to change it.
The bookmarket works like this: one click to show, another one to close it. You can add a button in whatever form ( it works even in about:blank :D ) and open/close the page which aim is to provide in few bytes the code/encode functionality and nothing else so, again, please feel free to use that target link 3site.eu/encode in whatever way you want. If you want to save the page, just please do not remove/change the footer, CSS are simple as well.
Regards
CSS resize:none should do it for that textarea.
http://www.w3.org/TR/css3-ui/#resize
Anyway, thanks for this short, simple solution.
Post a Comment