Steff.me > Journal

Archiving Scribble

Mon, 4 Jul 2011 10:42:10 GMT

After receiving yet another 'your domain is about to expire!' email from GoDaddy, I decided to let it do just that. I'm finally shutting down Scribble, and archiving it to some dusty corner of my back-up hard-drive. I wouldn't be at all surprised if you're never heard of Scribble, but it was in building the site during my spare time at university that made me want to do what I'm doing today. I won't go into any details on how I built the app (mainly because it was so long ago, and I can't remember everything), but for nostalgia's sake I wanted to give it one final farewell.

Scribble's Homepage — Logged out

What is Scribble?

Scribble is a small, light-weight to-do list tool. We like to keep things simple and easy, so that's exactly what Scribble was designed to be.

Scribble started out as a simple to-do list application. I created Scribble to solve my own major problem: keeping track of university assignments. I have an absolutely terrible memory, and the idea of a centralised list of things I need to get done that I could open on any computer on campus really appealed to me. I had checked a whole slew of GTD and todo-list apps but none of them seemed to fit with what I wanted.

Scribble's Homepage — Logged in

I started with the basics; adding, deleting and editing to-do's (be a bit of a rubbish to-do application otherwise, wouldn't it). As there were multiple university assignments running at the same time, I added the ability to prioritize to-do's over others and sorting so that you could list them by priority or date added. I also added tagging, so I could tag the module each to-do was associated with and sort by that too.

While all well and good, I still had one problem left: I kept losing the files I was working on for each of the assignments. After completing a to-do, I'd email the file to myself so that I could wander up to campus, print it off and hand it in. Well, in the mass amounts of emails, I'd lose track of which version I was meant to be submitting. So, I decided to add file uploads to Scribble. I could assign myself a to-do saying X needs to be done, then when I completed it, mark it as done and upload the corresponding file. I encorporated Scribble into my workflow, which let me upload a file, tag it with the module and version number, delete the previous version and repeat until I was finished with the assignment. I didn't need anything as advanced as a version control system, not for simple documents and essays. Of course, this is before the days of Dropbox — where the majority of my files now live.

Getting "social"

When a university class assigned a group project, it was time to update Scribble to allow users to interact. I created a really basic way of allowing a user to assign another user a to-do, all you had to do is know the other person's username. When the other person logged in, they would be presented with a message saying they've had new tasks assigned to them. Viewing the list of assigned tasks, the assignee could then either choose to accept the tasks, or ignore them; whichever they chose, the assigner would be sent an email with the decision.

Scribble — Suggested to-do's

A friend's list seemed too advanced for Scribble; I had been reading 37signals "Getting Real". Reading the chapter on Feature Selection, I decided that it was down to the user to track their own friends. If you wanted to manage your friends, just create a to-do, tag it as "friends" and keep updating it with the users. Need to keep people separate, and remember who you are doing that maths class with? Create multiple todos, and tag them as friends and "maths class". It was a simplistic way of doing it, but it worked for me and didn't require me to spend too much time implementing new features.

Bookmarklets

The way I was using Scribble started to change from the initial "to-do list app", to remembering articles I wanted to read or videos I wanted to watch with the sound turned up (because that wouldn't be a great idea in the middle of class). So, I built two bookmarklets to help me add new items to Scribble.

Scribble — Bookmarklets installation help

Version one was the 'quick scribble'. Clicking the bookmarklet grabbed the page title along with any text you had selected within the document, and added it as a link to the top of your Scribble list.

Version two was 'scribble this'. This embedded the 'new to-do' form to the top of the page you were on, giving you the ability to write any text you wanted and set a priority on it. This version would also add a default value to the textarea, picking up the title of the page you were on and any text you selected. Both bookmarklets also appended a link back to the original page you were viewing.

Realising that a few of my scribbles were funny videos (of cats), I decided to embed the videos right into Scribble so that I could save myself the click. I implemented embedding for various video sites, including: YouTube, flickr, Vimeo, Metacafe, Viddler, Revision3, Qik, Hulu, Funny or Die and College Humour. I also added image embedding, from flickr and Picasa.

After graduating this is all I used Scribble for — browsing the web and saving articles to read later.

Mobile

When I got my hands on an iPhone, I realised I needed to add a mobile version of Scribble — it was the future, and I was excited to be able to carry around all my to-do's in my pocket. http://m.scribbleit.net/ wasn't an iPhone specific site exactly, but a stripped down 'mobile' version. No images, no video embedding, just a simple list and a way to add and track your scribbles.

Scribble's Mobile Homepage — Logged out
Scribble's Mobile Homepage — Logged in
Scribble Mobile — Sorted list
Scribble Mobile — Complete to-do
Scribble Mobile — New to-do

The mobile version of Scribble offered all of the same features as the main site — suggestions, sorting, editing etc. — less the file uploading.

Extras

In the spirit of throwing the kitchen sink into the app, I decided to add a few other features that I didn't really use, but thought were cool. Just to list a few:

RSS feed
RESTful API
Twitter integration — DM @scribbleit your to-do, and it would be added to the top of your list (which reminds me, I need to delete that account).
Email todo@scribbleit.net and the content would be added to the top of your list.

End of an era

So that's Scribble; the to-do list app you never knew and will forget about as soon as you close this page. If you made it this far, I'd like to thank you for allowing me the self-indulgent moment to reflect on why I got into this business to begin with: creating things is fun. The knowledge I gained in building the web app was well worth the time and effort I invested into it. Before starting, I'd never touched PHP or JavaScript, and I was only just getting started playing with HTML and CSS.

If it weren't for Scribble, I would be doing something very different for a living, and I wouldn't have discovered the passion I have for the web.

Fluid Inconsistencies

Wed, 01 Dec 2010 20:37:06 GMT

In developing the next version of Gridinator, I wanted to make sure that everything that I was allowing in the pixel and em based layouts were available in the percentage ones too. That meant I needed to write fluid prefixes, suffixes and a few other things that are a little bit more complex in a liquid layout.

So this is where I ran into some major inconsistencies in the way different browsers render percentage values. While I'm well aware that things don't have to look the same in every browser, it just seems to strike me as odd that CSS3 features keep getting touted on the front of browser homepages, and yet something as fundamental as a percentage would be rendered incorrectly (or, rather, not as well as would be expected).

The image above shows a comparison of a Gridinator generated grid as displayed in Firefox, Safari, Chrome, Opera and IE6 through to IE9. To make it a fair test, the browser window was set to 940px in each case (thus giving IE6 a fighting chance, as it would normally ignore the max-width attribute). Each column is floated left except for the last one in each row, which is floated right.

Anything strike you as odd?

I don't know what I was expecting, but I was hoping for consistency between the modern browsers at least. Opera ignores the decimal places, Safari and Chrome seem to round to one decimal place, and who knows what IE8/9 are doing. Interestingly, it seems that Firefox rounds almost perfectly, as do Internet Explorer 6 and 7. This means that Internet Explorer is getting worse at rendering percentages in the more standards compliant versions than the ones us webbies have wanted dead for some time.

So, what is the answer? Is the hope of a truly flexible, fluid grid just a dream? Do we have to just settle for using CSS3 media queries and use things like Less Framework? Don't get me wrong, I have nothing against the noble pixel, but I really want to push forward and use more responsive designs with true fluidity.

Update: I've put the source HTML/CSS online so you can test for yourself.

Static Textpattern Forms and Pages

Fri, 22 Oct 2010 10:34:09 GMT

When I started work on redesigning this site, I also made the switch from WordPress to Textpattern. There was one thing that I really started to miss while developing the site — files for templates. WordPress had made this so easy in its theming system, which uses PHP files, thus allowing the use of an external text editor. Instead, Textpattern forces you to use a textarea in the admin interface, and saves the markup in a database. Since I like to have syntax highlighting and the ability to quickly edit multiple templates at once, I decided to create a little workaround to allow me to use files for both page and form templates.

Warning & Disclaimer

Before I begin, if you are allergic to looking at source code I recommend you look away now. Still here? Then let's begin, and don't say I didn't warn you.

The modifications made here are to the Textpattern 4.2.0 core library files, as such any updates to Textpattern will require you to repeat this process. While unlikely (I run this on all my Textpattern installations), I take no responsibility if your install breaks as a result of making these changes. If you would like a quick and easy method of having static page files only (ie: not forms), then please read this post by Mr. Hicks which explains how to achieve this with a lot less effort.

Getting started

This guide is based on creating the template folder outside of your textpattern folder at the same level as it. If you would like your templates somewhere else, modify the location in each case below. You will also need to enable "Allow PHP in pages?" in Advanced Preferences of the Admin tab, if you haven't already.

Pages

First, the templates for pages. In the textpattern folder, open the file publish.php. On line 482 is the start of the textpattern() function (do a search for 'function textpattern' in your favourite text editor). We want to edit this function to try and import a file, should it exist, before looking in the databse for the page HTML.

Replace lines 496 to 498 with the code shown in the Gist below — start copying from $html. The ... indicates that there is more code not shown, and the function textpattern() is to show what function you are editing in the file.

View code on GitHub

Textpattern will now look for page templates in templates/pages/ folder. Make sure to set up your sections and corresponding page templates as you want them. Create a new file in the pages folder with the same name as the page template you wish to use: default.php, for example, if you wish to overwrite the default page.

Forms

Following the same process as for pages above, open the file textpattern/lib/txplib_misc.php. On line 1589 you will find function fetch_form($name) (do a search for 'function fetch_form' in your favourite text editor). Replace this function with the one below:

View code on GitHub

Error pages

Just one more step left, 404/error pages (error_default in a standard Textpattern install). If you'd like a static error page too, there's one more step you need to do.

In the file textpattern/lib/txplib_misc.php, on line 1827, you'll find a function called txp_die (do a search for 'function txp_die' in your favourite text editor). Simply replace the code in that file with the code below.

View code on GitHub

And you're done! Congratulations, you now have a Textpattern install that can use template files!

Ignoring iOS < 4 when embedding Typekit

Wed, 20 Oct 2010 19:29:53 GMT

If you are a user of Typekit you might be aware of a small problem reported on the Typekit blog:

Mobile Safari on iPhone OS 3.1+ will crash when rendering multiple weights and styles of SVG webfonts

If you are one of the people who use multiple font weights, I've written a little script to browser-sniff for iOS under version 4 and not include the Typekit embed script.

The first is JavaScript; where you would normally put try{Typekit.load();}catch(e){}, replace it with the first gist.

The second is a PHP version. It doesn't even embed the Typekit JS source if an iOS < 4 is detected, which saves some bytes — useful on a mobile browser, especially if it doesn't support the feature anyway.

View code on GitHub

"CMD+F" for Mobile Safari

Mon, 10 Oct 2011 15:35:03 GMT

Find on page (CMD+F on a Mac) was never something I really felt like I needed in Mobile Safari, until I bought an iPad. As the experience is more than the iPhone, it felt like it needed more of the features from a desktop version of the application. In an effort to learn more pure JavaScript I decided to create a bookmarklet to solve the problem. While I'm sure there are others out there, I created this for myself as a way to back away from relying on jQuery and teach myself some raw JS.

Features

It reports how many results are found for your search keyword, and allows you to easily step through them.
Text that is contained within a hidden element (display:none or visibility:hidden) are not shown; it highlights only what you're able to see.
Native-ish look and feel for both the iPad and iPhone.
It doesn't break the content of the page you search on, so multiple searches can be made without any issue.

Known issues

Text within different nodes cannot be highlighted together — if part of a word is bold, it is considered a different word in terms of the search.

Example: JavaScript

The word "JavaScript" above is considered three words — "Java", "Scr" and "ipt", as part of the text is within a <strong> tag. As such, it won't get highlighted in a search for "JavaScript".

Download

CMD+F is free and open source. It is available to install from the installation guide here, and you can view the source and fork it on GitHub.

Update: Before you complain about the installation process, please read this post by Marco Arment regarding the state of bookmarklets on Mobile Safari.

The Return of Steff dot Me

Tue, 05 Oct 2010 08:10:41 GMT

A while back I intentionally broke the site in order to push me to redesign it and rethink the content I was putting out. Unfortunately, that didn't work and I just ended up with a broken site sitting online for months. So, after a (very) long break, Steff dot Me is once more!

The details

I've made the switch away from WordPress, and this site is now powered by Textpattern. It's taking a bit of getting used to, but ultimately I felt a bit trapped by WordPress and needed a bit more freedom — less of a blogging engine and more of a content management system.

The layout for this site makes use of a fluid grid generated by Gridinator (it actually uses a new version, more on that soon!), combined with @media queries, which has let me jump on the bandwagon of responsive web design.

You can view the grid by pressing G (or two-finger tap on an iOS device — warning: can be slow on long pages, and will lockup Mobile Safari until the grid is shown/hidden) as I'm using #grid from Analog, which I have modified slightly to make use of the Gridinator class names and thus making it fluid. As part of the responsive design, the leading and vertical rhythm of #grid adapts to the size of the browser.

The type in use is Adelle for headings and navigation, and Proxima Nova for body text. This is being served via the wonderful Typekit. You can view more details about the fonts used on this website on Typekit.

This site is marked up with HTML5 (for border-radius and text-shadow, obviously), and uses Modernizr to give IE the kick it needs to use the new elements, while providing feature detection for any snazzy things I want to progressively enhance. That being said, if anything looks a bit broken in any of the non-modern browsers, I don't overly care (sorry, but this is my personal site and it's my choice... just upgrade already).

Steff dot Me in its various incarnations of responsiveness with @media queries and a fluid layout. How meta is it to see a screenshot of the article you're reading in the article?

Going forward

The goal of this new site — more than anything — is to give me the freedom to create. Whether it be in the form of writing in the journal section or experimenting in the lab; the aim is to just keep playing with and learning the new web technologies as they develop. It's certainly an exciting time for the web, and I'm happy once again to have a part of it where I can express myself.