Following a comment on the ASCII art post, I decided it was in need of some fixing. The approach I took when I first wrote the ASCII art generator was a bit of a “shoebox full of code”. I didn’t follow any standards, I used my own conventions, and I didn’t care about polluting the global scope, because I had complete control over it. Now that at least one person has decided to take an interest in the project, I decided it was time for a change. I updated the code to conform with ES5 and please JSList, added some interface features, wrote a very minimal README to explain what’s going on, and PR’d a new version on GitHub. Enjoy.
The main purpose of this blog is to keep track of my various projects and to document them. The end result would be a long list of projects with all the associated metadata which can then be summarised to make browsing them easier. The Project List is a meta project that does just that. Each project on my website gets a file named
project.php associated with it that contains the meta information. They are then gathered by the Project List and can be sorted, filtered, and displayed online. I’ve also added static pages, blogs, and talks to the lists of resources. You can view the Project List to read more it. This was tied in to a major update of my website, as I had to create new preview images and new styles to match the new way of showing the projects. This will probably evolve further over time, but for now it’s fine.
While giving my website a facelift I deciced that the Tangles (Live page) project needed some attention. The page was previously the main game, followed by a mess of buttons and then instructions. I rearranged the content to give a proper introduction and made an in-canvas transition screen between levels. The end result looks much nicer and now it’s almost a completely self contained game. With some more work it could be made into a standalone app for the App Store. This project also benefitted from a higher resolution canvas than the actual element size, leading to better graphics.
As part of the updates to my website I dediced to add some variable width CSS styles. This allows the width of the main container to change in a fluid manner as the user changes the window size. This meant making two major changes.
First the menu had to change in size and content to respond to the changing window size. This now supports window widths down to 610 px. I may add support for window sizes down to 320 px, although to be honest most of the content on this website is not designed to be viewed on such a small device and supporting such antiquated devices seems counterproductive.
The second major change was changing the size of the canvas elements dynamically. This proved to be a bit tricky, since I wanted to keep the dimensions of the canvas the same, while changing the size on screen. It turns out the way to do this is to allow the canvas containter to change, and set the width of the canvas in terms of %. This has the added advantage of allowing the developer to use a higher resolution for the canvas, leading to superior graphics (at the expense of some more CPU time and RAM.)
While updating my website, another project that needed a little attention was the Wolfram rules (Live page) project. Apart from looking a little poor in its presentation, it was an experiment in DOM manipulation where a huhe HTML table was used to display the resulting algorithm. While it was nice to see that the DOM and CSS worked as they should, this project was better suited to the canvas, so I moved over to the canvas and added some colour to improve the presentation.
Before and after
As part of my website’s facelift I decided to update the Conway’s game of life (Live page) project. The content was rearranged to make more sense to the first time user, a the controls organised in a way that made them larger and easier to navigate. I also changed the links to different shapes to be gallery objects (similar to what I had for the Mandelbrot project.) This is also the first page to get the “You might also like…” feature at the bottom, which will soon appear on most other pages when I get time to add them.
Before and after
In the past few weeks I’ve been giving my website a facelift and updating many of the projects that were looking a little less presentable than the rest. One of the biggest changes was to the Alarm clock (Live page). Previously the clock had to be set in the source code (which was easy enough for me to do) and set using a time interval. I updated the code so that any user could set their own alarms and use a fixed time rather than an interval. At the same time I improved the general layout of the page and am now rather pleased with how it looks.