CSS, HTML, and XML in a .js file
Important fact: Unlike web (.htm), rss (.xml), or any other text-based format,
regardless of the domain where the file is stored.
Unfortunatly, the 'unlocked' potential is hampered by the strict rules noted above.
JSON data must be carefully encoded and managed so as to follow the rules.
A single invalid character can destroy (invalidate) an entire data structure, rendering the data unavailable.
This prevents some potentially-useful possibilities:
Say i want to store: (250 bytes)
they take up a lot of extra space, are humanly unreadable, and difficult to edit once encoded. They also require additional processing overhead.
Many tutorials will tell you that there is no way around encoding.
I have developed a technique to place almost any text inside of a .js file, without any encoding or other processing, and retrieve it verbatim to a string variable.
I must mention a limitation to this technique:
It only works in IE and Firefox.
those two browsers cover the over-wealming majority (95%) of surfers in fairness.
So what is the solution already?
How it works:
1. You wrap a little bit of text around the data you want to include.
2. You paste the block into your script file.
3. Your data is available as a string or a function result.
The magic code:
This technique uses 2 different, proprietary aspects of IE and Firefox.
IE returns text contained inside of comments (/* */) within functions when calling the function's .toString() method.
FireFox supports a unique type of data: XML.
XML strings can be defined without escaping.
XML can store arbitrary data inside of CDATA sections.
By combining these qualities into a single function,
I was able to get broad-based browser coverage in a one-stop solution.
The XML data type is a standard, so it is conceivable that safari and opera will support it in the future; let's hope so!
Ok, so nothing is perfect, and a couple things can trip-up the process.
The text you pack in must respect the following minor limitations:
To assist in utilizing the system, i offer some helpful code:
"any string".packIn() returns a new string.
of course, you can D-I-Y by putting
here are a few snippets to help:
bookmark the link below (Firefox only), click it while selecting text on any page, and it will give you a textbox containing packed version.
selection to .js
In IE, this snippet packs any text on clipboard, and pastes the result back onto the clipboard:
store a simple string in a pre-defined var:
add a CSS style sheet from inside a .js file
inject a table into the document
store an entire webpage in a string, write during load.
2. .htm files will execute in browsers.
3. one file can be both. hint: //<html><script src="mypage.htm"> ...
the function will always return a string, and the content is never evaluated.
tailor a specific package by modifying the last part, "return ww;".
you can use the package anywhere you would normaly use a string
-in an array, as a function argument, in the middle of a JSON object, etc.
packIn the big, repetitive sections of your webpage, and serve them from a free server or ip address to lower bandwidth costs incurred on your homepage server.
buddies can share packIn'd blog entries from many web sites - add a <script> tag pointing to each file to subscribe. build a stack (array of strings) as the blogs arrive.
onLoad, turn the array into html and set .innerHTML of document.body with the joined result.
put rich html documentation in your script file. as noted, script files saved with a .htm extension can be viewed right in the browser.
if you don't need to cross domains, a safari/opera fallback could ajaxly GET file-based backups.
this is step two of three in my work at reducing domain restrictions.
step one was set of json encoders
step two uses wraps, not encoding
step three unlocks plain files w/o even wrapping. now in debugging.
if there is interest (indicated by replies, private messages, thanks, etc) i can post more demos.
if anyone gets it to work in opera or safari, i would love a copy.
Upon release, this library is expected to require a license for commercial use.
feel free to contact me for more info.
I appreciate the kind of flexibility you're trying to provide with this solution, but I seriously have to question whether this is the right way to accomplish that... and I can't, in good conscience, recommend a method that does away with best practices for a method that functions in complete absence of a semantically-valid mindset.
Sorry to sound so negative after you've obviously put a lot of work into this, but this is like trying to heal a wound with lemon juice. It's the wrong tool for the job.
this is certainly to be considered an alternate transport.
the origional need was to put unparsed raw text right into code, without having to tediously escape it. this is good for documentation and templating.
i would recommend always using the best method available.
but there are times when xmlHTTRequests cannot be used.
this is something you can use in places where existing solutions fall short.
"selection to .js" link failed. :(
edit the broken bookmark's properties, change location to :
for some reason, it adds </html> to the the end of the textbox, but you can copy around it...
it's been a while since i posted this and recent browser developments have lead to a much simpler version of this capability being widely deploy-able.
Five years is a long time on the web, huh?
Now, a comment transport system works in everything except very early versions of opera that don't support Function.toString(). Even IE6 should be able to handle this system.
I find it useful for building widget modules that use a little CSS to define layout. Instead of having two files to manage in two places (.css + .js), i can put the css inside the js, and yet still edit it naturally in my text editor. I've also created some rich inline documentation complete with hyperlinks, that is later robotic-ally parseable for generating docs/ API refs.
Throwing a parser into the mix means you can create you own "object literals" from non-JSON formats like XML, YAML, or CSV. It's also great for HTML templates, especially complex HTML with nested quoted attributes, no more leaning toothpick syndrome...
Let's get to the code eh? first off, a simple inline code version, boilerplate in red, arbitrary string data in green:
if you want to do this a lot, save yourself the cut and paste using a function prototype method:
you can extend this notion to create self-unpacking functions, for example a CSV can become an array of objects:
one last use: injecting css from scripts without tons of camelCase conversion or string escaping:
you can name the same function and call it as needed if you don't always need to inject it, it's just an example of how to store text-ish data in JS without a lot of maintenance-preventing escaping and packaging.
one caveat with CSS is that you have to strip out all the comments, since they are the same as JS comments.
you can use danml.com/slim to "parse css" and "pretty css", which should remove comments and format the whitespace respectively.
in summation, there are 1,001 use for this, and it's really nice not to have to mess around with IE conditional comments or XML hacks like the OP; all browsers work the same now, use without fear.
I was trying to understand and implement you last bit of code (addCSS)
Although it is "mostly" cut and paste, it does not work as I expect,
but it's probably something I've done to cause the problem. Am I implementing it wrong?
Could you peek at it and comment about where I've gone wrong?
I had expected 6 different heading, but I see only one size.
i do have a much longer, less demo-friendly, more bullet-proof addCSS if you need it:
Apparent issue aside, thanks for checking this out. i was super excited last month when FF switched; i've been waiting 6 years for this, and now it's here.
I will be writing other cool stuff with it; maybe coffeescript right in the js file, or a prototype method to turn a js function into a coffeescript method. Or maybe just some coffee-script-like enhancements without the full burden of a big parser. anyway, i'm glad the language can be safely expanded now that firefox's is onboard. now if only i could compress/minify this code as well...
I was not sure why the font-size setting so it appeared to do nothing special.
If you have the time, could you explain the code settings in the function you supplied?
What are the 'q' setting used for?
Why set the border:0 for abbr and acronym? I thought they were defaulted to 0 anyway.
Why are you setting the 'strong' to 'normal' style and weight?
Finally, what is the 'coffee-script-like enhancement' and 'coffeescript method" of which you speak?
the q settings are to strip the quote marks off of <q> tags, which some browsers apply.
strong has different default styles in different browsers, some weight 400, some 600, etc. This makes them all look the same.
the border value is the same sort of thing.
again, this is just some demo CSS, the point of which is more "look mom no quotes or slashes" than "here's some awesome CSS"...
I have mixed feelings about CoffeeScript, so i hesitate to puiblish this, since it might only encourage its use. Still, it's a lot better than the other fake languages like TypeScript and Dart. If it gets something made that otherwise wouldn't have been made, i guess that's a good thing. Still, most of the enthusiasm around coffeescript comes from people who don't know JS.
Here's a Typical Example of this: http://iamproblematic.com/2012/03/06...-coffeescript/
Typically, people use off-type <script> tags or ajax to fetch these scripts. That's poor for a few reasons:
Idealy, one could use CoffeeScript right along side other JS code, instead of a special routine just for one part of the app. Well folks, this comment thing is the way to do that...
CoffeeScript running in a plain-old <script> file with other plain JS:
Again, i don't know what you call this pattern, i'm open to ideas, but i think it's pretty cool...
Thank you for the explanations.
Without the context of the solution it was difficult to understand the purpose of the suggested changes.
I'll look forward to other possible uses of this function.
|All times are GMT +1. The time now is 01:05 AM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.