Page 3 of 3

Re: Split string and retain part before character match?

Posted: Mon Jun 16, 2008 6:43 pm
by JAB Creations
This essentially lets you continue editing your current theme after each $_POST request where as if this script did not exist then while you would still see your implemented changes (due to the session) you would be starting from scratch. Without this you can only edit a theme once per $_POST, each second+ edit starts from scratch (unintended).

All this information (stored in the session variable) has to be repopulated in to input forms if it is to be retained through multiple $_POST. Let's say you change the body element's background-color on the first edit and $_POST. It's retained in the session and cookie. However the second time you use the editor while the body element will still have that background-color because of the session from your first $_POST without this script is necessary to repopulate your original choice that is currently retained in the session. Otherwise after your second $_POST you'd unexpectidly loose the body element's background-color (and anything else from the original $_POST). You'd have to repeatably edit the same things over and over. Considering there are over a hundred values that can be changed without this script the editor is incomplete and highly likely to anger and frustrate visitors.

It's the same with the selectors only *I'm* the only one who will be editing it at any given point (for the editor at least :wink:). If you look at the source code the input forms have IDs and name values that essentially are structured in the following manner...

ce00 = selector #1
ce01 = background-color for selector #1
ce02 = background-image for selector #1
ce03 = border-color for selector #1
ce04 = color for selector #1

ce10 = selector #2
ce11 = background-color for selector #2
ce12 = background-image for selector #2
ce13 = border-color for selector #2
ce14 = color for selector #2

ce250 = selector #25

The last numerical number represents what chunk of data is being referenced. The first (one or two) numbers after 'ce' represent the selector we're dealing with at the given moment.

I hope that explains the role of what I'm doing in this thread and the last portion of my editor?

In general my next step can be best described with this little tidbit of code below though while hardly standards compliant visually demonstrates that I can pass on the splitting procedures and manually create the variables (and arrays if necessary) for the data to generated by the client instead of the server...and then populated in to the form fields. I can just keep on splitting stuff as necessary from this point obviously.

Code: Select all

<script>window['ii01'] = 'background-color: #936; background-image: url(general/11/001.gif); border-color: #cc6; color: #cc9;';var properties = new Array();properties=ii01.split(';');document.write(properties[0] + '<br />');document.write(properties[1] + '<br />');document.write(properties[2] + '<br />');document.write(properties[3] + '<br />');</script>
Any way after this is all done I'm so going to play Face3 with quad jump for like a week straight! :mrgreen:

Re: Split string and retain part before character match?

Posted: Mon Jun 16, 2008 8:09 pm
by Ambush Commander
Things are starting to make a bit more sense. However, your attempts to offload everything to the client with JavaScript variable trickery do not. My personal preference would be to stash everything in $_COOKIE/setcookie (one has to be careful not to avoid the cookie size limit, although it should be possible, but that is the only implementation detail. It's a lot simpler than $_POST, anyway).

By doing this, we totally offset the need to parse CSS or do any fancy string splitting. All we need is a JavaScript routine that takes the info from $_COOKIE and puts it into a dynamically generated stylesheet. The data could be stored in a form as simple as 1>FFF>http://example.com>333>F00|2>F0F> ... where the format is | separated selector_id>bg>color>url>border-color>color (if you urlencode all of your parameters, you can use a more sensible separator like comma or semicolon).

This is, of course, assuming the users are using your UI for editing style, i.e. a set of text fields for every selector which control various CSS properties you would like to allow: if users are submitting actual CSS strings, you'll need a CSS parser. Once again, no need for splitting strings if this happens client-side: just stuff it in a stylesheet, and then use the stylesheet DOM API to pull out the relevant values. Simple, elegant, and reusable.

There is no reason for you to discard the property => value data-sets, and have to reverse engineer from a CSS string. It just doesn't make sense.

Finally, it makes the most sense for PHP to generate the input fields and populate with the previous saved data. This way, you can use a loop, and there's no need for all this JavaScript flying around.

Re: Split string and retain part before character match?

Posted: Tue Jun 17, 2008 12:22 pm
by JAB Creations
I've already tested the absolute maximum size of the string that would be generated by the editor (all values filled and all hex values six digits long) and while it exceeds the 4085 byte string cap once compressed it's well below that cap. All of the browsers that support the editor support the compressed cookie so that isn't a concern whatsoever.

The editor isn't a set of text fields, it's all XHTML/CSS, keyboard accessible, easy, intuitive, etc. These text fields are hidden (except for testing of course so I can track what exactly is going on).

I don't exactly understand why you'd want to do something with PHP/server that can be offloaded to the client? We're talking server to client not vice versa and from the general consensus (that I detect from a lot of replies I get) there is no reason to have the server do something the client can. I'm not exactly micromanaging properties and values at the server either. It's pretty much imploded in to a string and stored to a session variable and cookie and from there pretty much like a single string of validated text. Also I wouldn't be taking these values from the cookie because the cookie is updated after the session plus the cookie is stored at the client while the session is stored at the server. Why revalidate the cookie creating more unnecessary server load if what I need is already sitting there in the session variable?

I am not sure if you've been following many of my threads for the past three months (I only tend to look at threads that either interest me or I might be able to provide some useful answers myself). Essentially my last major sub-project was a serverside validator by using cURL (which kicks total you know what!) It's for a direct import (no editor, just a textarea) that the server creates a temporary file, has the W3C validator validate it, scrap the page for the result using cURL, and then send one of numerous possible messages (valid, invalid, length error, validator error, unable to contact validator, etc). If I had everything split up I'd have to reconstruct the CSS any way before sending it to the validator. Plus this lets people import valid code without having to second guess a proprietary format (since my site will support import/export).

Any way I do appreciate your input I just am not sure we're on the same page as far as this project of mine goes. Still I welcome your opinions.

In the mean time I've finally have begun to concentrate better again of late...check out this snippet of JavaScript code. Again this is a very early stage of working with the JavaScript so I'm trying to visually work with it as plain text before I go deeper in to things like making a function and for loop with the following below (most likely using the [0|1|2|3] as a parameter). My final work from years back and until the day I die will never include things like document.write...just part of making testing phase easier for myself.

Code: Select all

//Set variable from PHP, then split it...window['ii01'] = 'background-color: #936; background-image: url(general/11/001.gif); border-color: #cc6; color: #cc9;';var properties = new Array();properties=ii01.split(';'); //Check *first* split chunk from properties array...     if (properties[0].indexOf('#') == '18') {document.write('properties[0] == background-color<br />');}else if (properties[0].indexOf('#') == '15') {document.write('properties[0] == border-color<br />');}else if (properties[0].indexOf('#') == '8')  {document.write('properties[0] == color<br />');}else if (properties[0].indexOf('url') == '19')  {document.write('properties[0] == background-image<br />');} // Check second...     if (properties[1].indexOf('url') == '19')  {document.write('properties[1] == background-image<br />');}else if (properties[1].indexOf('#') == '18') {document.write('properties[1] == background-color<br />');}else if (properties[1].indexOf('#') == '15') {document.write('properties[1] == border-color<br />');}else if (properties[1].indexOf('#') == '8')  {document.write('properties[1] == color<br />');} // Check third...     if (properties[2].indexOf('#') == '15') {document.write('properties[2] == border-color<br />');}else if (properties[2].indexOf('#') == '18') {document.write('properties[2] == background-color<br />');}else if (properties[2].indexOf('#') == '8')  {document.write('properties[2] == color<br />');}else if (properties[2].indexOf('url') == '19')  {document.write('properties[2] == background-image<br />');} // Check fourth...     if (properties[3].indexOf('#') == '8')  {document.write('properties[3] == color<br />');}else if (properties[3].indexOf('#') == '18') {document.write('properties[3] == background-color<br />');}else if (properties[3].indexOf('#') == '15') {document.write('properties[3] == border-color<br />');}else if (properties[3].indexOf('url') == '19')  {document.write('properties[3] == background-image<br />');}

Re: Split string and retain part before character match?

Posted: Tue Jun 17, 2008 5:07 pm
by Ambush Commander
Since I still don't understand what's going on, I'm going to just comment generally.
I don't exactly understand why you'd want to do something with PHP/server that can be offloaded to the client? We're talking server to client not vice versa and from the general consensus (that I detect from a lot of replies I get) there is no reason to have the server do something the client can.
In the most general terms, there are certainly reasons for the server to do it. One of the biggest ones is accessibility: make sure everything works with JS off, then on. Security is also a big one: you can't offload input validation to the browser. Another is development time: testing JavaScript is notoriously arduous due to all of the different browsers that support it, whereas PHP its one interpreter and one interpreter only. Also speed: JavaScript is generally slower than PHP, and if you put all the computational work to the browser, users are going to complain that things are slow.

I also thing that it's a good idea to go with the path that has least work. PHP can write JavaScript variables, no problem, that's what JSON is for. But there's absolutely no reason for JavaScript to be generating more JavaScript... that's just black magic, and a security vulnerability to boot, as if an attacker can get their own data into the eval'er, insta-XSS without the server ever having touched it.

Now, I don't know if that's what you're actually doing, but it looks like that's what you're doing. But once again, I don't know.
If I had everything split up I'd have to reconstruct the CSS any way before sending it to the validator.
Why not? In this case, a proprietary format might be a good idea, since you're trying to restrict the values and the properties that can be used. You'd have to *deconstruct* the CSS server-side to make sure that it followed your format properly... for the validator, that's not too much of a problem, but for output, it's essential.

Cheers,
Edward

Re: Split string and retain part before character match?

Posted: Wed Jun 18, 2008 3:19 pm
by JAB Creations
I'm getting very close to my goal right now although I've hit a wall where I can't use a parameter to dynamically choose the key to parse in an array. I've posted my latest progress in a new thread in the clientside forum as I thought it would be more appropriately posted there...
viewtopic.php?f=13&t=84319

If speed is a concern then wait until you guys have the chance to hold down the tab key on all the color anchors when my site. You can visually see the rendering speed differences of various browser quite easily. Of course that isn't the intent of the editor. I'll be happy to provide a full-fledged set of CSS that the JavaScript I'm working on (now in the new thread) will be executing on the page onload event so you can test the initial load speed of the editor. IMHO the editor seems to load just fine on the computers I've tested it on. The only time I've noticed a delay in functionality with JavaScript is for my site's music player. If the entire flash object hasn't loaded the pause/play JavaScript functions will request a new page instead of executing the script. It's obvious it has more to do with sheer bandwidth then the number of executions. Additionally even if the editor does slow down towards the end for full fledged usage I would imagine any one using it to that extent by that time would have adjusted their editing behaviors or be patient enough to wait an extra second or two. Besides since I don't advertise on my website or anything it's not as if I'll be loosing money if I don't achieve absolute perfection. When it's finished we'll just have to see. :wink:

The issue with the path of least work is that it increases the efforts of my site's visitors to achieve the same goals. The more effort I make in adapting an easy method for editing the less work they have to do to utilize it. I also fail to see how my script would be susceptible to an attack if I'm always checking $_POST and $_COOKIE data? As far as I can tell it won't matter what they can do with the JavaScript if the server endlessly rejects all forms of attacks. Of course there may be some vulnerability that I'm not aware of...fine with me. I'll learn from the experience though I doubt there is much if any real damage that could happen since this has absolutely no connection with a database.

I'm not interested in a proprietary format because that would only increase the load on the server or the load on my need to constantly tweak the JavaScript. Besides who is honestly going to want to rewrite already valid CSS code?

I'm not necessarily restricting the properties and values. The import feature will allow you to import properties that aren't supported by the editor. I'll just warn people who import of this to expect such properties and their associated values to be lost should they import non-supported CSS, use the editor, and then $_POST. Most people won't be doing that to begin with I expect.

Any way I could really use help on that new thread right now because I've really exhausted my ideas on dynamically selecting an array's key.

Re: Split string and retain part before character match?

Posted: Thu Jun 19, 2008 9:16 pm
by JAB Creations
I've finished the JavaScript+PHP code and have posted a new thread in the critique forum here...
viewtopic.php?f=50&t=84406

I'd love to read people's reactions to what I've posted there. Thanks for all the help and suggestions to everyone who replied in this thread! :)