Lee Munroe » development

Are you an HTML5 web designer?

Lee — Tue, 29 Mar 2011 09:01:10 +0000

HTML5 is quite the buzzword at the minute. A lot of designers and front-end developers will now say “I use HTML5 and CSS3″ rather than just good olde “HTML and CSS” (I’m one of them, depending on the context).

At some point the HTML5 fad will die and we’ll go back to saying HTML (did you ever say you used HTML 4.01?) but until then we’ll throw the HTML5 buzz word around a bit more.

But what does it actually mean to say you use HTML5?

I see HTML5 being broken down into 5 different levels.

1. Doctype

Technically if you use an HTML5 doctype declaration, you’re using HTML5.

Along with your doctype you can tidy up the rest of your head like so.

...

This is simple stuff, and you usually have this saved in some sort of template.

2. Forms

The next level of HTML5 is adding some niceness to forms.

Validation, place holders, calendars, input types can all be declared with HTML5 and in most cases all that is needed is dropping in an extra attribute to your already existent XHTML forms.

3. Layout and elements

We get a bit more advanced now with layout. HTML5 has introduced several new block elements for marking up your layout including header, footer, article, aside, section, figure.


Heading goes here



Something in here


Something else in here



Something to accompany your article here


Copyright 2011

For these new block elements to work across all browsers, make sure you declare them as block level elements and use the HTML shiv script for IE compatibility.

Include this in your head:

And this in your stylesheet:

header,footer,nav,article,aside,section,figure,figcaption,hgroup,audio,video{
display:block;
}

4. Video and audio

There’s a good chance most of you have looked at levels 1 to 3 as most projects require markup, layouts and forms but not all require video and audio.

No longer do you need to embed video and audio into Flash. They now have their own elements and controls you can customise in HTML5.

5. Advanced features and Javascript

I’ve called level 5 advanced features as we’re now diving into Javascript.

Most of the blog articles and books I’ve read on HTML5 cover the 4 levels above but brush over these advanced features, most likely because they deserve full books dedicated to the topic and are more developer than designer related.

These features include:

Canvas
Local/offline storage
Geolocation

How much HTML5 are you using?

To date I’ve only been using levels 1 to 3 myself. I’ve yet to have an excuse or reason to delve any further.

Are you using HTML5? Have you looked at any of the advanced HTML5 features mentioned above?

How to deploy your Rails app with Capistrano (to Dreamhost)

Lee — Wed, 26 Jan 2011 09:01:29 +0000

I’ve been doing a bit of Rails development recently. I’ve actually been doing what I would call ‘basic’ Rails development for a couple of years now on and off.

However, I’d never used Capistrano to deploy a web app before. It was always one of those other things that I would have to learn. But recently, with the re-launched TweetNI, I decided to sit down and figure it out.

It didn’t go quite as smoothly as I had planned so here’s a quick overview to help you get up and running.

What is Capistrano?

Capistrano is a utility and framework for executing commands in parallel on multiple remote machines, via SSH.
— GitHub

Sounds a bit complicated but in a nutshell, you run a command (or two) via Terminal (or Command Line) and your Rails app is ‘automagically’ up and running on your server.

If you’ve ever deployed a Rails app manually like I have before, you might have uploaded the files via FTP, then created your database in PHPMyAdmin, then ‘touched’ the restart.txt file via SSH (yep, so old skool).

Capistrano combines all this into a couple of commands.

Setup Capistrano

Assuming you have Terminal open on a mac, run the following commands:

1. Install the gem

gem install capistrano

2. Tell your app you want to deploy with Capistrano

cd your_app_folder
capify .

3. Configure deploy.rb

There is a new file for you to configure under /config/deploy.rb

I’m going to assume you’re *not* using SVN or Git for this project (it just so happens I didn’t use them for this project).

Copy and paste the following:

require 'bundler/capistrano'

set :application, "tweetni.com" # Your application location on your server goes here

default_run_options[:pty] = true

set :repository,  "."
set :scm, :none
set :deploy_via, :copy

set :checkout, 'export'

set :user, 'username' # Your username goes here
set :use_sudo, false
set :domain, 'tweetni.com' # Your domain goes here
set :applicationdir, "/home/#{user}/#{application}"
set :deploy_to, applicationdir

role :web, domain                 
role :app, domain                          
role :db,  domain, :primary => true 


set :chmod755, "app config db lib public vendor script script/* public/disp*"

namespace :deploy do
  
  task :start do ; end
  task :stop do ; end
  task :restart, :roles => :app, :except => { :no_release => true } do
    run "#{try_sudo} touch #{File.join(current_path,'tmp','restart.txt')}"
  end
  
end

Make sure you change your app folder, username and domain to your settings.

4. Setup your server

cap deploy:setup

You only need to run this command once.

Each time you deploy, SSH will ask for your password.

5. Deploy

cap deploy:cold
cap deploy:web:enable
cap deploy:migrations

You’re up and running

If everything went to plan you should be up and running.

From now on any time you make any changes you just need to run the following:

cap deploy

On Dreamhost

I don’t know if I did something wrong along the process but after step 5 I couldn’t get my app to run so I sent Dreamhost a little support question and they replied saying:

Sorry about that, I needed to create a symlink to bundle. Give it a try now and write back in if you’re still having an issue.

Not sure if this happens every time but try giving support a shout if it does.

Hope this is helpful to someone.

15 mac apps web designers should have in their dock

Lee — Mon, 20 Oct 2008 14:06:06 +0000

Back in June when I was converting from a PC to a MacBook Pro (best decision I ever made) I asked around to see what apps people recommended for the Mac. There are a lot of nice apps available for Mac OSX that aren’t available for Windows.

I’ve compiled a list of Mac Apps I have in my OSX dock that I use on a daily basis and should be useful to other Mac users and/or web designers.

1. Adobe Creative Suite

An obvious and primary requirement (I feel) all serious web designers should have. I couldn’t get through the day without Photoshop while Illustrator and Flash are constantly called upon. I hear Fireworks is good too, especially for compressing images, but I’ve yet to use it myself.

2. Transmit

Transmit is an FTP client for Mac. Edit remote files, synchronize, search, SSL, tabs; it covers all your daily FTP needs.

3. Coda

Coda is a light-weight all in one text editor. You can edit your code, preview your web page, upload to server (integration with Transmit), edit CSS and run commands in Terminal; all from within this one app. I would use Coda for front-end development.

4. Textmate

Textmate is another text editor that I prefer using for back-end development. Code completion, snippets, syntax colouring are some of the things I enjoy about Textmate along with ease of customizing fonts and colours.

5. CocoaMySQL

CocoaMySQL gives you an interface to work with your MySQL databases. This is a desktop alternative to PHPMyAdmin, which is a lot quicker and in my opinion a lot easier to operate.

UPDATE 13/12/08: CocoaMySQL has been abandoned and replaced with Sequel Pro. Works just as well and looks even better. Check it out.

6. MAMP

MAMP is an easy way to get Apache, MySQL and PHP up and running on your machine. Just by running MAMP all these three services will be up and running, no messing around in Terminal needed.

7. Things

Great app for getting things done. Set yourself project tasks and daily tasks and check them off as and when you get them done.

8. CSS Edit

A very good CSS editor. It allows for real time previews of your website and styles and is a very efficient app allowing you to easily find all styles being applied to certain elements.

9. Transmission

Transmission is used for downloading/uploading torrents over the net. Useful for sharing files with friends and colleagues (among other things)

10. MarsEdit

MarsEdit allows you to compile draft blog posts on your local machine before publishing them live on your blog. I use it daily to take notes on various blog topics I think of and then I can easily compile a blog post over the course of a week.

11. Skitch

I was only recently introduced to this by GoodOnPaper @ FOWA. Allows you to easily share images/screenshots on the web and using the Skitch editor you can add notes to your image or highlight areas of a screenshot. Very useful and saves having to load up Photoshop for simple tasks.

12. Parallels Desktop

You can run Windows XP or Vista on your Mac using Parallels. Handy for being able to test your websites in versions of IE (using Multiple IEs) and if there are any Windows only apps you need to use, e.g. Microsoft Access.

13. Office

A good old favorite for creating text documents, preparing slideshows or looking after sets of data. There are a few Mac alternatives, and of course online alternatives, but I personally prefer Office.

14. Paparazzi

Paparazzi takes full screenshots of webpages. The problem with Cmd+Shift+3 is that it only takes a screenshot of the visible screen. Paparrazi takes the whole height of the page, even below the fold, so it’s great for showing screenshots of your web designs.

15. Twitterific

Easily interact with Twitterland via Twitterific. Saves you having to make the trip to Twitter to see what’s going on as it can retrieve and send tweets for you.

Others worth looking at

Firefox Firefox is a fantastic browser with fantastic extensions for web designers like Web Developer Toolbar and FireBug
Pixelmator Cheap alternative to Photoshop
Lineform Cheap alternative to Illustrator
Flickr Uploader Easily upload your photos to Flickr
Skype Have your conference calls for free over the web

What apps do you use?

Let me know what apps you find useful and you think should be included in the list above.