Jake The Dog CSS image development
I always enjoyed making images using CSS. It keeps my mind working and at the same time I get to learn new things and techniques. I do my work mostly on CodePen.io since everything is there and it’s very user-friendly. However, there are times that I do not have direct internet access, either because I am in some remote location or that I have problems with my ISP.
That was when I tried to find a solution, an alternative not much like CodePen but one that would be close enough. Something that is light, portable, and doesn’t need to be installed. Of course, there’s the conventional approach of saving your work, for example in Notepad++, and switching to your browser to see the changes. This is not an issue if you are barely making any modifications to the code, but since we’re talking about CSS images there will be ALOT of these so-called “small edits”. So I needed something that could automatically preview the output as well as I typed along. Then I found John Cipponeri’s JSTinker on GitHub. It was a clone of JSFiddle with some of its default functionality.
It was an old project and missing some stuff that I wanted so I downloaded it under the MIT license and made some of my personal upgrades.
Improvements included but are not limited to:
- Layout redesign
- Auto-Draw/Live Preview feature
- 500×500 px grid for guide
- Save & Load functionality
Simply download the source files below, extract, and run index.html in your browser, preferrably the latest version of Chrome. Feel free to improve the code or modify it to suit your own needs. The main reason I had this was so that I could work on creating my CSS images without the need to connect to the internet and the constant smashing of the Alt+Tab keys. So I hope you can make it work for you too 😉 Enjoy!