This is the follow-up to update #5 (a little bit later than planned). Summary of changes this week: updating the code page to make it slightly more useful (at least in terms of listing the snippets), fixing vertical alignment of lines and their corresponding numbers on the snippet view page (more on that below), and adding a pop-up window for a more streamlined login and registration process.
Updates to the code page
This is nothing major, I just changed the layout slightly (the buttons have been moved), changed some of the terminology (bundles/singles are now known collectively as “modules”, for now), and added the list of the 5 most recent snippets, as well as some placeholder text for forge and module sections. View demo »
Line number alignment
This one might require a bit of background. Previously, the line numbers were being output in a separate loop from the actual lines themselves, within one giant
<pre> tag nested within a
<th>. The problem with this method is that if a line is ever too wide for the box, then it gets hidden and you have to scroll horizontally to see it, as in the following screenshot:
This method worked for me, because I have a touch pad with horizontal scroll enabled, so I didn’t think much of it. However, it was brought up on the mailing list that this can be inconvenient for users who don’t have a way to easily horizontally scroll, so I decided to look into it again. Although there existed a “toggle wordwrap” link, which users could click to toggle the line-wrapping of the snippet (and so eliminate the need to scroll horizontally), that feature also caused the line numbers to disappear:
I had to do it this way because any line that is wider than the box itself would, when wrapped, push down the content after it, without affecting the placement of the line numbers as well. In other words, you would end up with something like this:
The line numbering here is just plain wrong. In the end, I simply changed the way line numbers and lines are outputted by using a single loop and a
<tr> for each line, and now it looks much better (with word-wrapping used by default):
The only thing that was difficult was getting the styling to match how it looked before, as the change in the HTML structure made it a bit tricky. It should be pretty much the same now, although the corners look a bit off with a dark background.
Streamlined login and registration
We now have a slightly more streamlined login/registration system: simply click any login or registration link and a window should pop up asking you to fill out the combined login/registration form. If you are successfully logged in, you will be returned to the page you were previously looking at. For a demo, click the “Login or register” link at the top right of the code page. (Please don’t actually register because the registration app sends out an activation email by default, and email isn’t enabled on my server so it just won’t work. To test logging in, use the username
test and the password
(Technically, this week. Next blog post will be on Friday, September 14.)
I’ve started working on an app for handling module uploads. It will be similar to snippets in the way that it is structured, but it will be more powerful in that users will be able to upload files rather than being limited to copying and pasting (either a single file in plain text, or an archive containing multiple files). I will try to get the bulk of this done by my next update.
I will continue working on user profiles: layout, features (including the ability to change your default syntax highlighting colour scheme, as mentioned in a previous update), and editing your own profile.
Position in timeline
- August 1-15: Check out codebase, get it running; read all the code and documentation; start learning Mercurial
- August 16-31: Start working on design; start mocking up models and routes for the components
- September 1 - October 15: Work on the core components, with as much test coverage and documentation as is feasible; start implementing the views, models and templates
- October 16-31: Ensure that documentation is thorough and up to date; write any remaining tests that need to be written; test out the user interface and fix any bugs