Mailing List
Articles Atom Feed
Comments Atom Feed
Twitter
Reddit
Facebook
Happy Christmas!
Posts will resume in the new year.
I have a random snowflake generator for you that I wrote a while ago - my current project is taking longer than I thought :D
Edit: It can be found here Random Snowflake Generator).
Recently I found a post on reddit by someone called am2064 about a 'one file wiki' called 'Minty Wiki' written in PHP. I took a look and whilie it was cool, I found it to have some bugs in it. I also found that it needed an extra PHP file to parse markdown to make it work properly. Still, I thought it was a cool idea so I decided to have a go myself.
694 lines of code later, I had something that worked and I thought that I might post about here on my blog. It is by no means finished, but it is in a somewhat usable (hopefully secure) state. I decided that markdown was the most logical choice for editing pages, so I modified Slimdown (by Johnny Broadway) to add internal link parsing and tweaked the bold/italics code to be mroe like Gmail's chat amongst other things. I first found Slimdown when looking for a lightweight markdown parser for comments on this blog.
I named my creation 'Pepperminty Wiki' (after the wiki that gave me the idea). It currently allows you to create and edit pages (although you need access to the server's files to delete pages currently), list all current pages, and view a printable version of a page. It even has a 'search' box that allows you to type in the name of the page you want to view. The search box has an HTML5 <datalist> to provide the autocomplete functionality.
To use it yourself, simply download index.php in the github repository below and put it in a folder on your server. Make sure that you have enabled write access to the folder though, or else you will start to see to rather strange error messages :)
To configure it, simply open the file you downloaded with your favourite text editor. You will find the settings (along with an explanation of each) at the top of the file. Make sure that you change the usernames and passwords!
You can find it on github here: Pepperminty Wiki
A (uneditable) version can be found here: Demo
Soon I will write up a technical post about my efforts to improve the performance of Pepperminty Wiki.
This week I have some clouds for you, rendered via the HTML5 <canvas>. I wrote these in early 2013. I have not had a lot of time this week, but something cool is coming soon :)
The clouds themselves are stored in an array, and are composed of a random number of circles. This array is then iterated over 60 times a second and rendered using the HTML5 <canvas>. setInterval() is used to schedule the drawing of the frames, but I really should go back and upgrade that to requestAnimationFrame().
Link: HTML5 Canvas Clouds
atom.gen.phpSince this website gets a lot of spam (ongoing investigations are currently in force in order to analyse the spambots' patterns, a post will be made here when they have been stopped) and this website also has a comments feed powered by atom.gen.php, I have had a chance to test atom.gen.php out in the wild with real data.
I discovered, unfortunately, that the script didn't handle invalid utf-8 and non printable characters very well, and this lead to the feed getting broken because XML doesn't like certain specific characters. This has now been fixed.
If you handle user input and use atom.gen.php to turn it into a feed, you will want to grab an updated copy of the script (quick link here) and overwrite your previous copy in order to fix this.
As well as fixing that, I also added a new option, $usecdata. This controls whether the <content> tag's contents should be wrapped in <![CDATA[...]]>. This should add extra protection again html / javascript injection attacks breaking your feeds. It defaults to false, though, so you need to manually enable it by setting it to true.
The reference has been updated accordingly.
If you find another bug, please comment below. You will recieve full credit at the top of the file (especially if you provide a fix!).
Today marks the release of a larger project that I have been doing, called Imaanvas. It has been in the works for months and is meant to be a web based version of a program called MSW Logo, which is now called FMS Logo. It has a few tweaks, though, to make it slightly easier to use. It was orignally written for a year 5 class in a primary school.
It also does not come with all the commands present in Logo, so if you find that a command is missing please comment below and I will try to add it for you as soon as I have some spare time. (You can also write the command yourself, and I can add it that way, but will probaby need the original source code for that - gulp is used to compact the code - send me an email if you want the code)
Immanvas is a horribly complex piece of code - so if you encounter any bugs (which is likely), please either leave a comment below, or send me an email. Remember to be descriptive about the bug that you have found, otherwise I won't be able to track it down and fix it! Also remember that Imaanavs is meant for modern browsers, so if Imaanvas doesn't work in your browser, try upgrading it to it's latest version.
This post is late since essential maintenance work had to be carried out to try and reduce the amount of spam that is being posted.
The online tool I am releasing today is another one of the projects I did a while ago (December 2013 in this case). The difference here is that someone asked me to build it for them. The tool allows you to stich a number of still images into an animated gif.
Having an online version of the tool on a server that I own seems like a good idea (so I can keep it up to date) - so I am releasing it on this site for you to use.
It uses a javascript library called gif.js to render the still images as an animated gif. Please bear in mind that all the rendering is done on your computer! Nothing is uploaded to the server at all. If you refresh the page, everything will be reset.
A description of the options and known issues can be found below. If you just want to skip all that and play around with it for yourself, please follow this link:
A description of all the options available can be found below:
| Option | Description |
|---|---|
| Repeats | The number of repeats. -1 = no repeat, 0 = repeat forever. |
| Default Delay | The default delay each still image should be given when first dragged into the tool. Remember to set this before you drag all your images in to save time! |
| Frames per second | An alternative method of setting the default delay. Simply enter the number of frame you want to show per second. |
| Workers* | The number of threads to use to render the animated gif. For optimum performace enter the number of cpu cores you have. This will speed up the rendering process for large gifs. |
| Quality* | The quality of the resultant gif. In the code this is referred to as the pixel sample interval. I don't really understand this setting myself - if you do, please leave a comment below and I will update both this post and the tool itself. |
A '*' indicates an advanced setting.
Since I forgot to post last wednesday, I will post twice this week :)
A while ago I played around with creating a parallax effect with stars on an HTML5 Canvas. After tiding up the original code I wrote a little bit, I have decided to release it in this website. It will not, however do well as a screensaver due to the high CPU / GPU usage it induces because of the inefficiencies in the code.
It can be found here: parallax scrolling stars
I will (hopefully) write a technical post in the near future that will explain how it works, including an explanation behind the high CPU / GPU usage.
In an effort to make XML generation simpler in PHP, I have written another PHP class, called simpexmlwriter.
Much like atom.gen.php, everything you need is all packaged up into one file - simply download and require simplexmlwriter.php and you are ready to start. Links can be found near the bottom of this post.
The same system is in place for contributions and feature requests: post a comment below to either request a feature or link to a modified version of the code and I will consider either merging your changes or adding the feature that you request.
It also has a 'reference' - just like atom.gen.php. A link can be found near the bottom of this post.
If you are still reading this and you are not interested in code, there will be a few things that you may be interesting in appearing on this website soon.
Edit 11th May 2020: Since I made this post, I've discovered about a much better and safer way to generate XML. I suggest reading this newer post instead: Generating Atom Feeds. I'm leaving this post otherwise intact for historical interest.
This week I am releasing atom.gen.php, the PHP script that powers this blog's Atom feed (which you can find here!).
This PHP class has been designed to be simple and easy to use (apart from the addentry() function which needs tidying up :D), and quick to get started with. I have also created a basic example showing you how to use it and a 'reference' that covers all of the functions and properties that are available for use. Links to both the script and the 'reference' can be found at the bottom of this post.
Although I have tested it, it is entirely possible that you will come across a bug. If you do, please post about in the comments below.
You may also find that atom.gen.php does not do everything that you want it to. In this case, you have two options: either post a comment down below and I will consider adding the feature you request, or adding the feature yourself. If you add the feature or fix a bug yourself, please post a comment down below along with a link to the modified code and I will merge your changes and give you full credit for all the work you have done.
I made a spotlight demonstration using (almost) pure CSS!
A little bit of javascript is used to make the spotlight follow the mouse. You can also click through the layer in from of everything that makes the spotlight work because of the pointer-events: none; CSS styling rule.
It can be found below.
The (editable!) source code can be found here. A full screen version of the demo above can be found here.