Bloggy Hell

… well, some CSS and one image.

I’ve been really interested in emulating the iOS UI in HTML, CSS and JS. Not for any useful reason, more out of morbid curiosity. It could come in handy for home screen web applications, but for standard webapps, I’m beginning to think the uncanny valley plays too big a role to give good results. Regardless, it’s something I’m still playing with.

One of the elements that is quite different between Mobile Safari and native iOS applications is the rendering of checkboxes. Mobile Safari renders them in a similar way to desktop Safari - as a traditional checkbox, but native iOS application render a slider:

There have been a number of techniques to simulate this in the browser: the most popular is to replace the checkbox with a couple of spans. The problem with this technique is that, unless you code them in via JavaScript, you lose all of the default events that occur, and even if you do, you are bound to forget one.

By accident, I found that you can clear the default styling of a checkbox using the -webkit-appearance: none CSS rule. Which gives us a completely blank state to work with. So let’s start with what the checkbox looks like without any styling:

Next, let’s add  -webkit-appearance: none - you’ll notice the checkbox disappears

Next, we’ll add a background graphic that looks like the slider. This is the one I did. It is terrible, but it’ll do for this example. You’ll notice that it has both the “On” and “Off” sides in one graphic. More on that in a second.

So now we can drop in the CSS to style it:

So what is happening here? It’s pretty straight forward actually. We put a border, and set the height and width appropriately, then set a border radius (we are simulating iOS 5 here, so they are rounded). Next we add our background images, and set the background position so that the “Off” state is showing, using regular old CSS spriting.

Next, we target the checked state, using the :checked pseudo class. This will move the background image to the “On” state when it is checked.

Finally, we add some a slide animation. We create a webkit animation that tweens the background image from one position to the other. Simple really!

Demo

Problems

1. It’s  webkit only at the moment. If you can zero out checkbox styling on Firefox or Opera, it wouldn’t be difficult to implement for them too (Just change the vendor specific CSS and animations). It might also work in IE 10?
2. The animation will always go from On to Off on page load, because the CSS animation will run. You could easily fix this with a line of JavaScript, but if anyone else can suggest a way to do it purely in CSS, I’d be all ears.

I’m building a mobile web app that is basically one HTML file + backbone.js + other JavaScript magic. The app is authenticated, so the user needs to be able to login. Thankfully the server returns a 403 if a request is not authorised to access the requested endpoint. Ideally, if that happened, a login form would pop up, the user would enter their details, and the system would continue on it’s merry way.

With jQuery, this is surprisingly easy.

You can setup global settings using the jQuery.ajaxSetup method. These settings get injected into every AJAX request you make via the jQuery API. The attribute we are interested in setting is the statusCode attribute: in particular the 403 function.

What happens is a 403 response code gets captured, we save the current AJAX object into the context variable, we then call the login form, which gets the user to authenticate and then calls the success function. It just so happens that the context variable stores a hash of the original AJAX request settings, which we pass directly into $.ajax. This in effect replays the query, now with the new authentication token!

The beauty of this (besides the fact that it’s hands off, and nicely abstracted) is that it will handle changing passwords on the server gracefully (it’ll just pop up the login form again), as well as handle incorrect usernames or passwords.

I like Rails. A lot. And you should too - it makes build web stuff fun, and faster. It’s poetry when compared to PHP. Not to mention there is some smart nerds doing work on it, and it has one of the most vibrant and passionate communities around. Unfortunately, the learning curve can be significant, especially if you are learning Ruby at the same time. Me to the rescue!

The guys behind Sitepoint have just launched a new site: Learnable, which is an online training centre, where people not only go to learn stuff, but they can teach stuff too! They ask me to create a Ruby on Rails 3 course for their launch, and it just went live today!

The course is 12 lessons, and covers enough stuff to build a real app - a code snippet library (A bit like pastie or github gists). I’ll be maning the course forums and answering any questions you have, and will appear online via video link up for some live Q&A sessions in the next couple of weeks.

If you are still using PHP, or have been meaning to learn Rails for a while, then go and sign up - it’s only $19.95 (Bargin!).

The only real pre-requisite is a basic grasp of programming - if you understand if statements, for loops and variables, you should be fine. Serious. Go now. It’s awesome. But don’t just believe me, listen to this talking headshot video of me:

https://learnable.com/courses/learning-rails-3-212

While I work on some personal summer projects, I’m looking at getting some front end contract work - you know HTML/CSS/JS sort of stuff.If you know anyone looking to turn pictures into websites, get them in contact with me.Hourly rate negotiable depending on contract length.

I just acquired a 13″ MacBook so I can build some me iPhone and iPad apps, and the allure of Unix on the desktop is a nice added benefit, however it is apparent that the default terminal emulator is kind of balls out of the box. I spend A LOT of time in a terminal, with VIM being my IDE is choice. What many people might not know is that modern terminal emulators support mouse gestures, as does vim (:set mouse=a).

I use this. All the time.Vim 7 supports files tabs, which allows you to open multiple files at once (command :tabe <filename>). Vim being vim, you can navigate your tabs using key sequences (Next Tab :tabn Previous Tab :tabp Move to tab :tabm <number> et al.), but clicking stuff with your mouse is easier.The scroll wheel is also quite useful, which vim also supports.Finally, click and dragging over text in vim with a mouse enters Visual mode, which allows you to yank and delete blocks of text, also quite handy.The problem is, Terminal.app doesn’t support mouse stuff… Out of the box any way.

Step 1: Download and install SIMBL

Step 2: Download and install MouseTerm

Step 3: Restart Terminal.app

Right, so that is sorted, next up: OSX’s stupid keybindings. Ok, I guess it makes sense for the home key to go to the very beginning of the document and end to do the opposite, but really the Windows way of home and end placing the cursor to the beginning and end of the line is more practical. Also, PgUp and PgDn don’t work. So, open Terminal.app then select Preferences from the Terminal menu. Click the Keyboard tab, and paste the following strings into the areas next to the Keys:

home: \33[H

end: \33[F

pgup: \033[5~

pgdn:  \033[6~

FINALLY, these binding don’t place nice with vim, so open up .vimrc and enter the following:

set mouse=a

map ^[[F $

imap ^[[F ^O$

map ^[[H g0

imap ^[[H ^Og0