Home

Welcome to the Web Experimentation Kit!

I started programming many years ago when I left school. There were no home computers in those days, no printed circuit boards even - the first computer I worked with was built with transistors and miles (literally) of wire. It had 800 "words" (each word could hold 2 instructions) of "Immediate Access Store" where we would load programs created using punched cards. The world changed before I retired but my working life was spent building and maintaining back-end business systems and I dabbled only occassionally in the world of the browser and the server. Now I'm retired I have time learn what I have been missing.

I've gone through a few tutorials - Ruby on Rails, AngularJS, Meteor - but they left me cold and scratching my head. Too much going on behind the scenes, it's not programming as I know it. Then I saw that Python was one of the most popular languages so I learnt that. Having got Python under my belt I needed a way to get it to power a web site and I soon found Flask - which can act as a lightweight web server - and started to write the usual chat room app. That's when I found I also had to learn CSS and JavaScript and I came across W3Schools and the Tryit Editor. I liked the Tryit Editor as I could modify the examples and see immediately how the changes affected what the browser displayed but sometimes I wanted to save the code for future reference and the only way to do that (if I wanted to keep it to myself) was to cut and paste to save to a folder on my disk. I searched for something like the Tryit Editor that would allow me to save and reload my files locally but drew a blank - anything that offers the HTML/CSS/JS live editor scenario (such as jsFiddle and CodePen) runs online.

As it is the server that saves files the answer to my problem was to have both the server and the browser running on my machine - exactly what I was already doing with Python and Flask - and so the WebExKit was born. I had noticed that many others were looking for the same thing so I'm sharing this code in case anyone is still looking.

Other Uses

As well as experimentation (checking out CSS flex containers, alignment options, etc) the WebExKit can be used for any general-purpose functions you require. As an example, I needed something to show me random numbers between 30 and 39 to help me with a project I'm working on. This one line of code added to the "new" template:

<h1 onClick="$(this).text(Math.floor(Math.random() * 10) + 30)">Start</h1>

did the job and I have the function saved and ready for use whenever I need it.

Also, you don't have to limit yourself to just the front-end code - the Python server-side code is also available so you can add new web addresses to test out Ajax calls.

Acknowledgements

I found quite a few "how to write an HTML/CSS/JS live editor" articles on the web but the one that impressed me and proved to be my starting point was the YouTube video by Shai UI. It can be found here https://www.youtube.com/watch?v=jEeYPFFmMcs.

The application uses Ace Editor (https://ace.c9.io/) for code entry.

License

This project is licensed under the GNU GPLv3 License - see the license.txt file for details. Sorry about the spelling of "licence" but GNU created it in American English.

What's Next?

Browse the Wiki pages to find the [Installation Guide] and the [User Guide].