I code little toys for fun, either silly things like the End Of The World Notification Service or attempts at more practical things like Afforder, my little budget planner. I love having an idea, typing up a lot of what is essentially logic and creating something that actually works and does a thing. It’s satisfying and I like to approach each little project differently so I learn new things (for instance – Afforder can scale across multiple servers, has multiple cron jobs and sends text messages when it reckons you can’t afford a bill).
Because I’m really just coding what I think are neat ideas, it’s very easy to get stuck on an idea that perhaps isn’t the most sensible or usable. It reminds of writing; if you can, it’s great to step back for a few months and then reread what you’ve written with fresh eyes. You’ll notice things you would have never seen, your brain remembering what you meant to write and ignoring all the doubled words (the the >.<) and horrible tenses you’ve used. You get the overview that a new reader would have encountering your work for the first time. The same is true for small coding projects like these, they’re so quick to make that it’s easy to get lost in your original idea and make something useless.
A few months ago I created alldone.io. I was using a to-do list program called GTD that allowed you a list of lists and a checklist in each one, I frequently wanted to expand these checklists into checklists of checklists and checklists of checklists of checklists. That’s how these projects go: one idea might turn into four ways to realise that idea and they might all require their own steps.
I found a few web-based to-do lists that promised the moon on a stick but delivered an entire galaxy of features, making them bulky and unwieldy. I just wanted a simple infinitely-expanding to-do list.
Basing the interface on GTD application I was using, I went for a horizontal design. You have your first list on the left, you click on an item to mine down and that item’s sublist appears to the right. Click again, and that item’s sublist opens. Infinite lists. Snazzy scrolling animations. CSS schemes for pretty colours.
I had fun making lots of recursive JS functions to handle the reading and modifications of the array and all was good. I popped it online so I could use it and I let my friends know. I even built a permissions system to allow for collaboration on lists and for making them public.
~~~~ wavy lines ~~~~
I have a new job! They want me to fly to San Francisco to meet them, learn things and look at people. It’s super exciting and certainly calls for some extreme-list-making.
All my previous usage of alldone had been forced; I’d been remaking lists from GTD, making demo lists for the website, fiddling and poking and never really using it. Now I was actually needing to use it for what I designed it for and the horizontal system was abysmal. Want to look at two sublists at once? You can’t. Want a nice overview of everything? No. Want to actually make use of your 24″ monitor? Ha, text-wrapping for you.
It was at this point that I reached, what I believe is, the very peak of procrastination. I was putting off making the list of things I already knew I needed to do by instead spending my time improving the list-making website I had created.
It was clear the answer was vertical lists. Just like how you can embed a <ul> in a <li> to create a hierarchy of lists, I could have multiple list items open at once – and their sublists open too. Just as infinite but much more usable.
Now that I had a real list with real-world-things I was worrying about, I understood the purpose of alldone a lot more.
The data structure was already there, so all of the lovely recursive functions that I’d written on a coffee-fuelled marathon but was now terrified of breaking still worked, that was good news. I didn’t want to get rid of the horizontal mode, I’d actually found it an amazing way to present information – such as alldone’s “About” page and the “Changes” page, instead I added a new setting to each list to allow switching between modes.
I turned the list drawing into multiple functions so the horizontal and vertical modes could use the same controls. The biggest change was how the website kept track of which lists were open; previously, it would use a variable called ‘breadcrumbs’, an array of indices that you could follow through the multidimensional array. It worked really well but would only allow for one sublist to be open at a time. When I had the vertical lists displaying but still functioning this way, it was actually more infuriating than before.
As the breadcrumbs method seemed to work well (the html attribute ‘breadcrumbs’ even allowed me to tie jQuery events straight into the data functions), I just made the breadcrumbs into multi_breadcrumbs, an array of breadcrumbs arrays. It didn’t take much fiddling to make the open/close and drawing functions work.
I also added a long-press for editing, as I also realised it was frustrating to have to travel all the way over the edit button on each one.
There’s a few bugs remaining but for now, I’m finding the tool I made really helpful and that’s a very nice feeling.
— I shall not link you to my travel list, I am quite the worrier and the list is the sum of all my worries neatly ordered with sub-worries upon sub-worries. Instead, you can look at the vertical demo list.
Conclusion: step back long enough to forget what you’re doing every once in a while*.
* caution: this advice may not apply if someone is paying you to do the thing that you’re doing.
The vertical lists on alldone.io were all well and good but it was soon pretty apparent that only being able to open one subset of lists at a time was a bit impractical. You’d open one list, then click to open another and the first would close.
This was because alldone was initially built for horizontal lists, you’d have your top-level list on the left – click an item within that and beside that, the new sublist would appear. You could mine down that way with the browser scrolling horizontally. It would keep track of this with a breadcrumbs variable, an array of open indices, and everything would work fine.
To allow multiple sublists to be open at once, I created a multi_breadcrumbs variable – an array of breadcrumb arrays – which allows for many lists to be open at once. Hurrah, you can see it in action here.
I’ve also added alldone.io to GitHub. Find it at http://www.github.com/stevecat/alldone/.
My pet project alldone.io now has vertical lists. My need for lists has grown exponentially in the last few weeks – so, I thought, what better way to proactively action the items in those lists than having a major rewrite of the list making tool?
The only downside is that, because this is an extension of the previous horizontal system (you can switch between them in the settings), you can only delve down through one subset of lists at a time. This can be a bit jarring when trying to look at the children of another item. There’s a solution for this but will have to wait until I’m less busy!
Have a play at http://www.alldone.io/steve/vertical_demo/.
I figured my previous post sitting at the top of the blog looked a bit silly.
I’m starting a support role at a fantastic company in San Francisco in August, so my free time is currently a mix of panicking and planning. I’ve never been to the US before so I’m very excited; I don’t know if I’ll get much time to explore but I’m hoping to head out a day or two early so I can have a wibble around. I’ll post more soon and will try and take some photos when I’m out there.
As I have this blog now, I’ll keep a record of what I do. Learning is fun! While I don’t have any ambition to be a game developer (the game developers I know always seem very stressed), I will enjoy this.
My end goal is an odd game where you have to tend to little carrots with legs and raise them so you can sell them in your café. I think it might take me a while but I’m excited to learn something new.
I’ll most likely just be linking useful guides I’ve found and showing what I’ve done with them but perhaps in a few months time, I’ll be able to produce a useful guide myself!
So far I have been frightened and bewildered by the demo game. I think my vegetable game is a long way off!
update: I have made an orange horse fly with the WASD keys around a jaggedy map. LEARNING.
Check out that lovely basset hound! In the wonderful world of The Triangle today, directly outside my living room, was a dog show raising money for Bourne Free – our local pride festival.
A few friends came down for it and we all grinned like morons for the afternoon.
So. Many. Pugs. Evidence of pug-overdosing after the break.
This is less of a guide and more of an explanation of what I did but I’m hoping someone will find it useful if they’re also considering bodging WordPress into their existing website.
WordPress is quite slow, especially if you only rent a tiny portion of a server, and if – like me – you already run a PHP-driven website and want to incorporate a WordPress blog into it, you might not be so keen on giving up your entire site to the behemoth. If you click on the Photography section above, you’ll see it’s super-fast (I hope) while then coming back to the Blog, you can feel the delay WordPress is adding. It’s all valuable things being loaded but they are unnecessary for the Photography section; if I was to create that section as a Page inside WordPress, it would take just as long with no benefit at all and remove my ability to easily code in more dynamic content without going through WordPress first.
Will this guide apply to you? This will only apply if you’re analysing the URI requests within your code and returning your content based on that. I’m going to talk through incorporating WordPress into an existing PHP CMS that you’ve built. How to take control and hand over to WordPress when your own code hasn’t found something to output, how to keep your design consistent and how to do all of this as a theme so it’s easily transferable. I’m no professional developer, I am self-taught and enjoy dabbling, this won’t be too intense. I’ll first explain how this website works.
This website is very simple. It uses Apache’s mod_rewrite to direct requests via a simple CMS I’ve written. mod_rewrite directs any request, that doesn’t explicitly match a file, to index.php. To simplify (this is actually split over several included files), index.php checks the URI with a simple switch statement and sets $page to whatever should be loaded. If the URI is /photography/dome/ then $page might be set to /content/photo.dome.html. $page is by default the 404 page; if no matches are found, we can present a neat failure.
index.php calls two functions, design_header() and design_footer() – which create, surprisingly, the header and footer – with the correct highlighting and sub-menus, and then includes $page in-between them. Boom. A website.
I wanted one of my pages, specifically the homepage, to be a WordPress blog but struggled seeing how I could just include WordPress as and when I wanted it. This is how I did it:
Downloading and installing WordPress
Head to https://wordpress.org/download/ to download the latest copy of WordPress. I did all of this on my own local server first but there’s nothing stopping you from doing this on your remote server; because we’re not directly modifying WordPress, just creating a theme, it is easily transferable wherever you decide to make it. The intention here is to combine your current website’s root with the root of WordPress but as we want your website to take priority, first extract the downloaded WordPress package to another folder.
Other than index.php, you shouldn’t have any file conflicts as WordPress names its own files wp-in-this-format.php but it’s good to check. If everything looks good, rename your website’s index.php to index.old (or something) and move the WordPress file structure, subfolders and all, into your own website’s.
I’ve spoken to a lot of people who choose to take a creative degree in something they were incredibly passionate about, every single person agrees that several years of intense study in your chosen subject does a great job of leaving you with a degree but zero passion. I studied BA (Hons) Photography, it was a wonderful course and I got to work with some great artists but the stress of the Final Major Project left me with no intention of picking up a camera any time soon.
That was some years ago now. I’ve been trying very hard to get back into photography; it’s difficult as I’m no longer in the creative environment that the Arts Institute provided. I still speak to people from the course but they all feel the same as me.
About two years ago I decided to start a project. My previous projects have always been linear documentary projects, usually presented in a book, where I’d create a character and act the project out through them, recording the results. I’ve always seen it as part-performance and part-documentary. For this new project I’m dealing with measurements, specifically the heaped teaspoon. I love this measurement because it’s less of an exact measure and more of a challenge; if the instructions on this coffee say three heaped teaspoons then I like to try and REALLY heap it on. To that end, I have been visiting my friends kitchens with my Bronica SQA and rolls of Velvia 120 and challenging myself to create the most impressive heaped teaspoons imaginable. Here is one example:
That’s 23 sugar cubes. Quite a feat. I’ve also been quite unconventional in the materials I’ve tried to get a heaped teaspoon of. Namely, fire:
I thought I would tell a story about a time I did something very silly and got to watch it blow up beyond all comprehension. At the time I was very worried about either the subject, his fans or the press hounding me so I removed my connection to it. Today I reveal that I am in fact, Stevie Wotsit.
In the UK we have a rapper called Dappy. He is part of a group called N-Dubz, my only memory of them is a song about Facebook. It was bad. Dappy was even worse than that song. Perhaps to make myself feel better about what I did, I’ll point out that he is officially a bastard with a history of doing horrible things like spitting on people, sending abusive text messages and fighting.
One morning I discovered that Dappy had been kicked in the face by a horse. The internet was full of excitement over this. He wasn’t seriously hurt, there were rumours it was cover for a nose-job and.. it was funny.
I spent five minutes creating a petition on Change.org to Award the horse who kicked Dappy in the face for ‘Outstanding Contribution to Music’ at next BRIT Awards. It was a silly joke for me to post on b3ta and make some other silly people giggle.
It wasn’t very long before someone linked me to NME’s website where they had made an article about my petition. The signatures on my petition were growing quickly, and some of the comments from people were brilliant:
Our music has been systematically raped until it has become devoid of any merit. I applaud this horse for taking a stand.
The horse showed class, discernment and good aim.
I was enjoying myself. And then Reddit happened; this was before I posted on Reddit or even read… it. The post made its way to /r/all and my little petition started to snowball.
I had made viral things before, such as my End Of The World Notification Service and many odd Flash games, so I knew how mad these things could get. And here I was potentially enraging a man known for wearing silly hats and punching people, proudly linking my full name and location to it. I quickly changed it to stevierar and then to Stevie Wotsit when I realised that my stevierar username links straight back to this very website (I am not very smart).
Once I felt suitably detached from it, I sat back and enjoyed reading what people were saying about it. About 1% of people were quite offended but everyone else seemed to take it in the humour intended.
The first big publication to talk about it was The Huffington Post. I enjoy reading that so I was happy to be there. It wasn’t long before The Metro also had an article. It was even in The Mirror. I was hoping, really really hoping, that it’d make the Daily Mail and that they’d choose to be outraged. I’ve always wanted a Hated By The Daily Mail badge. It didn’t happen.
It was appearing everywhere; ClickMusic, Instagrime, Sabotage Times, Gigwise and even Horsemart – a horse magazine.
It was also insanely popular on Twitter. And, I’m proud to say, Jimmy Carr stole my joke and was even called out on it.
Paddy Power, the betting website, gave the horse 250/1 odds of winning.
I spent the week under a constant barrage of messages from friends telling me where they’d seen it, that unconnected friends at their work had been talking about it (apparently that’s quite weird), even that it was on the radio. By the end of the week I assumed it had all died down.
But then the very best thing that could have happened did happen. I was tagged in a photo on Facebook of my Dappy petition in The Sun. I excitedly asked the person who had posted it if was today’s paper or not and it was! I ran (I may have skipped) to Tesco and bought a copy.
I expected to have to spend a little while digging through the Showbiz pages or at least have to delve quite far but no. There it was! Next to Poppy, 23, from Somerset on Page Three (nsfw; pixelated boobs). I was delighted and Stevie Wotsit was even mentioned by name.
That was the last bit of excitement before it really died down; sadly the horse was not nominated but I did at least have a lot of fun. I was also very happy to have quickly unlinked my name from it!
My little vanity-website has been through many changes. I’ve found that the way to get the most enjoyment of it and to make sure that it remains active, is to make it easy for me to update and to make sure the design isn’t too strong. This website has had some hideous designs over the years, all of which I thought were beautiful at the time and all of which put me off from ever using it.
I’ve had this very basic design for a little over a year now and I don’t hate it. I’ve actually added content which is quite a big deal for me, I usually get cross and redo the entire thing each time I want to add a new project.
However, the blog has been difficult. I first made the decision to point the blog subdomain to Tumblr. I did this in anticipation of my dinosaur project going viral and causing me a horrendous bandwidth bill; I was right about that, the dinosaur project was hugely popular and if I had hosted all of those photographs on this little server the internet would have certainly hugged it to death.
But now I have a popular post on Tumblr and I can never move it or do anything with it. Even though I’ll repost it here, it will forever be stuck on Tumblr. I realise now that I should just be hosting image content on Imgur (or somewhere similar).
I was initially going to spend the evening coding a little bespoke blog tool for myself. Things are quite manic and up in the air at the moment and in those situations a little geeky project is nice. Instead, I decided to finally get to grips with WordPress.
This is a theme I’ve created called Stevecat.
I’ve always been put off of WordPress as I find it quite slow, especially as my website has a lot of content that has no need for WordPress to be in memory, so I’ve replaced the WordPress index.php with my own. This creates the header, design and loads any CSS and JS (this is the major change to the normal WP flow). If the homepage is requested or my own URI analyser can’t find a match (i.e. /photography/), it hands over to wp-header.php which will then either deliver the main blog or analyse the URI itself to deliver a sub-page.
I’ve found WordPress theme creation intimidating in the past; The Loop sounded a little scary and it’s really difficult to find an overview of how it works. I found a site detailing the file structure and how to create a very basic theme and from there, using the WordPress Codex, I figured the rest out. I already had the design from the main site, so it was just a case of styling the blog elements, sidebar and creating any features I wanted.
I decided to make use of tags. The sidebar uses get_tags() to grab all current tags and the individual posts show their specific tags using wp_get_post_tags(get_the_ID()) and looping through that. I’ve also made a few headers using the is_tag() and is_date() conditions and a “Return to blog” will appear on tag, date or single views. The site was already responsive and it only took an additional six lines of CSS to make the blog act the same!
All in all, I’m happy to have gone from zero WordPress knowledge at 9pm to making my first post on my own custom theme at 1am. I will probably fiddle more and maybe even play with creating some plugins that could be useful for people.
I’m hoping I can have dinner now but I reckon I’ll probably be fixing whatever errors pop up now that I’ve made my fanfare-post.