Discovered Pencil today, a nifty free/open source mockup tool. Initially I wasn’t going to try it because it is advertised as a Firefox extension, and I didn’t want yet another firefox extension installed. But then I found you could download a standalone version. So far, it works pretty good, my only complaint is that I there isn’t a grid view OR at least I don’t know how to turn it on.
CSS Shorthand Property Order
You can use a shorthand notation for setting certain CSS properties, for example:
div.example {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
Is the same as:
div.example {
margin: 10px 20px 30px 40px;
}
Nothing revolutionary there.
However, I always have trouble remembering the order, so I came up with my own Gen-Y acronym (mnemonic) - trbl for trouble remembering. Get it?
That is, top right bottom left. Might be helpful next time you are writing some CSS and can’t remember the order…
Update: as a number of people have correctly pointed out, a better, more traditional way of remembering this would be to think of a clock – going clockwise from 12 (top) -> 3 (right) -> 6 (bottom) -> 9 (left).
May 2, 2010 | In Web Development | 5 Comments
Dummy HTML Content
Very handy if you need some dummy HTML content: http://html-ipsum.com/
May 1, 2010 | In Web Development | No Comments
Web Development with NotePad++
I’ve started using NotePad++ as my primary editor for web development – HTML, CSS, JavaScript and PHP. Notepad++ gives you everything you need, but you do have to turn on a few settings.
Autocompletion.
This will prompt for you to complete repeated or known text for the relevant language you are working with:
- Settings > Preferences > Backup/Auto-Completion
- Tick enable auto-completion on each input, and leave it as function completion. You can start from the 2nd character or more if you find it annoying. Press the <enter> or <tab> keys to automatically populate the full word.
TextFX Settings
TextFX can perform automatic closing of (X)HTML and XML tags through the following setting:
- TextFX > TextFX Settings > Autoclose XHTML/XML <Tag>
NotePad++ Run in Various Browsers
By default, NotePad++ has a number of browsers included in the Run menu including:
- Firefox
- Internet Explorer
- Safari
- Chrome
However, depending on where these browsers are installed on your computer they may not work. For example, I have Firefox Portable installed, so, the command to launch it is D:\Programs\Firefox\FirefoxPortable.exe.
To update the shortcuts listed on the Run menu, you need to edit the file shortcuts.xml in the NotePad++ installation directory (e.g. C:\Program Files\NotePad++\shortcuts.xml). However there’s a catch. You can’t edit this file with NotePad++. Instead, edit with another text editor (e.g. plain old NotePad). If you edit this file with NotePad++ the changes won’t persist – and the file will be reset back to its defaults.
Here’s the change I made to the file for Firefox Portable:
<Command name="Launch in Firefox" Ctrl="yes" Alt="yes" Shift="yes" Key="88"> D:\Programs\Firefox\FirefoxPortable.exe "$(FULL_CURRENT_PATH)" </Command>