The user generated java script part of zTinker finally works as intended, I think. Still a little bit rough of course. Libraries which are loaded in the head of the markup are now loaded in order, making sure that one is loaded before the next one is (had an issue there). I’ve chosen the system design that users are not supposed to write scripts inside of the markup, but only link to scripts there. I allow for one custom in-editor script to be written in a separate editor and linked to in the markup. Script libraries, my test case has been a responsive menu library, now load properly and do what they should to the preview and the custom script runs as well. Having coded a quick custom script for allowing a change from one page to another there was a final issue with the link result not loading in the preview, but it turned out that it was a simple fix.

I sort of feel satisfied for the moment regarding this project, maybe I will take a break and work on some game projects now. Hopefully nobody will fuck up my test environment while I don’t work on it, because you could… Maybe I should add a admin/login system before I leave it. :)

It’s really getting somewhere and feels great working on a spare time project which I feel inspired by. With the basic feature set and design thoughts around them I’ve been focusing on getting any JavaScript which is necessary to run the pages and especially the preview out of Ztinker codebase and into the hands of the user. I’m referring to the sort of code that they actually need rendered to their page in order for it to work. One issue was that I couldn’t get the scripts to run dynamically in the preview, it turns out scripts in specific needs to be programmatically added (not just as text). I can now the user scripts to run as they should, to a certain degree. I still have to figure out what to do with linked libraries…

So I looked into this project again some time ago and felt that it was good stuff. So I worked a little bit more on it and it’s actually starting to look useful. One change I made was to enforce the design of the setup procedure that I envision. This is that zTinker should consist of one folder and some minor requirements regarding the page’s design to work. Now it is used that I intend to keep it that way. Instead of just rendering the constructed webpages inside of itself it now renders actual files and folder systems thanks to some PHP. I have also started to think about the interface and which tools and methods should be presented to the user. I have also made it so that tabs and newlines are retained during render (though I still have to fix it so that they are kept when stored in a database) and added a script for uploading files.

So I have been playing around a lot with how to conveniently connect to a database from the user’s webpage. I want zTinker to be a combination of graphical, tool assisted web design and open access of and monitoring of the actual web code. I also don’t necessarily need my environment to work with any style of web dev and I will propose a certain approach if that is convenient for me. Therefor it is OK for me to offer a certain way of connecting to database and certain formats of what is contained in databases as long as I’m open with what code I use to achieve that.

For the longest of time I have now tried to get java script to work in it’s own editor will providing full access to included libraries and predefined variables. This hasn’t worked too well. At first I took the same approach as with CSS, trying to let the user adjust a certain script on the page while working in a page that already have the needed jquery libraries. I had a problem with the scope of this libraries and variables though, so I tried another approach where I instead created the full page from scratch all the time. This gave me access to all generated libraries, but the variable and function scope became unclear so it didn’t solve the worst problems and there were also update bugs and less neat code. I went back and forth between and tried to combine my new solution with my old one. In the end I went back to the old solution and just started using AJAX.

Something I got working well in the old solution was the possibility to let jquery dynamically change elements given that the user gave them certain classes and ids. I used this for the jquery GUI editing of size an position before but now I also added a little trick for database connection. You now give an element a certain class, “contain”, which makes that element into a container for database content. You then give it an id which will be used as a reference to fill it with database content. Everything falls into place as you use a specific database structure in which you give your database content the id from your markup so that it knows where it should be inserted. Works pretty well. :)

So I have been working on a way to integrate a database into your zTinker webpage. I initially intended try and add the possibility to connect a phpmyadmin installation to the interface for a fast, robust and common db management solution. However it turns out that phpmyadmin comes with protection against iframe connections. If you have access to the configuration file for your installation you can get around this but this is seldom the case when you hire space from some service provide and I don’t want people to have to set up their own phpmyadmins so I started looking into alternatives. I found this lightweight thing called phpmyedit which is open source and generates a db management page for you. I will probably use a specific generation such as this and then allow the user to insert their own login credentials instead.

It’s however really hard to let people generate their own PHP or other server side code, so I instead looked into having some predefined php environment which javascript would connect to. For this reason I added a new editor to the UI which I call “Couplings”. The intention was to let the user connect certain markup or collections in their database to containers in their local markup. I eventually got javascript to work but I have since experienced all sorts of problems relating to access to the javascript scope of variables that are in the webpage from the start and variables that are added later dynamically.

Making progress though…

Firstly, I’m in Visby for a conference regarding museum exhibitions in Sweden with a project in availability and norm criticism, meaning I have been working from a hotel room during the spare hours. This is bad because I don’t have my good desktop rig, but then again it is often good for my concentration and thereby inspiration. SO, my previous success with finding out just how easy it is to create a webpage which works as a site editor with an iframe came to a abrupt stop.

I realized that appending JS lib references to iframes via the src mime-method did not cause the libraries to actually load. I tried a lot of stuff, including alternate ways of injecting JS libraries into iframes, either with no success or making the page load extremely slow, and deserting iframes all together. Working with something else than an iframe however proved disadvantageous since other ways don’t simulate an actual separate web pages as well.

Eventually, I came up with a working solution. I let the iframe load a normal HTML file which includes necessary libraries and then use an invisible iframe in between in order to be able to use the magic of “encodeURIComponent”. I can then extract the body and other parts from the invisible iframe and replace the contents of my prepared, iframed site. This way the JS lib refs are kept intact and I still have dynamic HTML. For the styling I use a style tag with a certain id which I update the contents of in the prepared webpage.

I have also added separate editors for markup (HTML) and styling (CSS). The next step will be to make it so that resizing divs in the output window actually changes the styling on the editor side. Then I will work on a simple way to connect dynamic database content and after that syntax highlighting and neat editor controls.

So I had been stuck for a while with this very simple page, putting some JS for loading content from another file together with scaling and resizing of divs. This has worked as a idea sprout for myself but was never very representative for what I wanted. I stumbled upon this example on Stack Overflow today where two rows of code basically fixed the basics for my page. Using the method encodeURIComponent on the contents of a text field and appending it to an iframes src with a html mime-type made for a really cool HTML, CSS and JS editor.
Looking good!