8

A jQuery plugin boilerplate

I created this boilerplate for a jQuery plugin I’m working on, and you can use it to kick start your own jQuery plugin development. The features of my boilerplate are:

  • Plugin can be customised using options
  • Setters/Getters for options
  • Private and public methods
  • Callback hooks
  • Plugin instances can be destroyed

Continue reading

9

Test your JavaScript skills with js-assessment

I recently discovered js-assessment, a “test-driven approach to assessing JavaScript skills” created by Rebecca Murphey. The js-assessment application contains a series of tests designed to assess a job candidate’s grasp of JavaScript, but it can also be used to gauge your own knowledge of the language. Think of it as a mini Project Euler for JavaScript.

The questions are divided into five topics covering different aspects of the language: arrays, objects and context, functions, asynchronous behavior and Backbone views. If, like me, you have a decent grasp of JavaScript, but wouldn’t feel confident writing “JavaScript programmer” on your curriculum vitae, then I think you’ll find the tests an enjoyable challenge. None of the questions are super difficult, though I confess to needing help from MDN to arrive at a few of the solutions. I definitely learned a thing or two about JavaScript along the way.

Continue reading

1

Don’t believe the hype

This week I came across a new JavaScript framework, called Meteor, which promises to simplify the process of developing web applications. It looks like an interesting project, run by some very smart and talented people, but something about the Meteor marketing pitch rubbed me the wrong way.

The Meteor website is full of claims about how amazingly easy the framework will make web developer’s lives. It will allow us to build “top-quality web apps in a fraction of the time.” Its demo applications require “no programming knowledge.” What “once took weeks, even with the best tools, now takes hours.” In fact, you can “build a complete application in a weekend.”

If building a world class web application was really something that could be done in a weekend, wouldn’t everyone and their dog be CEO of their own Internet startup? If the barrier to entry was as low as the Meteor team would have us believe, then business owners would have no need for developers at all – a few hours of training and they’d have all the skills required to build their own app or website.

Continue reading

6

Launching XAMPP at OSX startup

A few days ago I posted about my experiences setting up XAMPP on OSX. Here’s another little XAMPP tip…

By default XAMPP won’t start the Apache and MySQL services at system startup, so every time you reboot your computer you’ll need to restart them. Wouldn’t it be nice if those services started automatically? One way of doing that is to create a Launch Daemon that runs at system startup and have it start XAMPP for us.

Fire up Terminal, and run the following command:

cd /Library/LaunchDaemons
sudo nano apachefriends.xampp.apache.start.plist

Enter your OSX password when prompted, then in nano paste the following into your new plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>EnableTransactions</key>
<true/>
<key>Label</key>
<string>apachefriends.xampp.apache.start</string>
<key>ProgramArguments</key>
<array>
<string>/Applications/XAMPP/xamppfiles/xampp</string>
<string>startapache</string>
</array>
<key>RunAtLoad</key>
<true/>
<key>WorkingDirectory</key>
<string>/Applications/XAMPP/xamppfiles</string>
<key>KeepAlive</key>
<false/>
<key>AbandonProcessGroup</key>
<true/>
</dict>
</plist>

Save the file and exit nano (control+o, return, control+x).

Now run the following terminal command:

sudo nano apachefriends.xampp.mysql.start.plist

And into this new file paste:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>EnableTransactions</key>
<true/>
<key>Label</key>
<string>apachefriends.xampp.mysql.start</string>
<key>ProgramArguments</key>
<array>
<string>/Applications/XAMPP/xamppfiles/xampp</string>
<string>startmysql</string>
</array>
<key>RunAtLoad</key>
<true/>
<key>WorkingDirectory</key>
<string>/Applications/XAMPP/xamppfiles</string>
<key>KeepAlive</key>
<false/>
<key>AbandonProcessGroup</key>
<true/>
</dict>
</plist>

Save the file and exit nano (control+o, return, control+x).

When you restart your computer the XAMPP Apache and MySQL services should start automatically. You can check this by launching XAMPP Control and checking that Apache and MySQL have green lights displayed next to them.

A note about security

If you’re concerned about the security of your system while running XAMPP, the safest approach is not to run Apache or MySQL at all, in which case you might not want to have those services running while you’re not using them. However, I’m fairly certain that unless you intentionally open up port 80 in your hardware/software firewall your XAMPP server should be invisible outside your local network.

Credit

A hat tip to ‘cwd’, who posted this solution on Superuser. I tried a couple of other approaches before I stumbled upon this one which actually works.

53

Configuring VirtualHosts in XAMPP on Mac

A few weeks back I rejoined the “Cult of Mac” when I replaced my old Asus notebook with a MacBook Pro, and since then I’ve been busy settling into my new OS X workflow. I do all my development locally, so one of the first applications I installed was XAMPP, a cross platform Apache/MySQL/PHP stack. While I know that MAMP is very popular on Mac, I have been using XAMPP for many years so I thought I’d stick with what I know.

Installing XAMPP was a snap, but when I came to create my own Apache VirtualHosts things started getting fiddly. Here are the steps I followed to get everything running smoothly.

Continue reading

12

Responsive elements that retain their aspect ratio

Here is a quick tip for creating responsive elements that retain their aspect ratio as they scale.

The problem

In a fixed width layout it is simple to specify both the width and the height of an element:

.rect {
    width: 800px;
    height: 400px;
}

When creating a responsive layout things get trickier, since (to the best of my knowledge) it isn’t possible to specify a percentage based height that is relative to an element’s width. For example the following CSS rule won’t have the desired result, since the height value will be ignored:

.rect {
    width: 100%;
    height: 50%;
}

Broken aspect ratio

A solution

However, when we specify a padding-bottom value for the same element, the padding measurement is calculated relative to the element’s width:

Continue reading

3

Book Review: Big Deal

Big Deal book cover

Robert Hoekman, Jr is a user experience designer and consultant who is best known for his books about interface design, Designing the Obvious and Designing the Moment. His self-published book Big Deal: On Being Famous to Almost No One tackles a far more personal subject. In Big Deal Hoekman, Jr recounts his rise to the top of the web design field, and describes how his craving for professional notoriety eventually devastated his personal friendships, marriage, and sense of self worth.

The form of celebrity Hoekman Jr discusses in Big Deal has been dubbed “micro-fame”:

My name is Robert Hoekman, Jr, and in certain rooms, under certain circumstances, at certain moments, surrounded by certain people, and when all these very certain things come together, I am a big fucking deal.

In other words, Hoekman, Jr might be unknown to the general public, but within the web design industry he is a bona fide rock star.

Continue reading

0

FormBuilder updated to v1.5

It’s been almost exactly four years since I updated my FormBuilder PHP class, but believe it or not I have been slowly modifying and improving the class during the intervening years. I figured it was high time I rolled those improvements into the public version of the class, so here’s what’s new in version 1.5 of FormBuilder:

  • Better handling of checkbox results in the emailResults method.
  • A custom form submit URL can be passed to the FormBuilder constructor. Useful when using FormBuilder in an environment that is performing URL rewriting.
  • Replaced deprecated ergei functions with preg_match.
  • Checkbox field types are correctly processed when field is not mandatory, and the user didn’t check any of the available options.
  • Added new field type: file (for file uploads). Note that files are currently not emailed when using the emailResults method. Any handling of the uploaded files should be accomplished manually by accessing PHP’s $_Files array.
  • The textbox and textarea field types now accept an optional defaultvalue parameter.
  • Fixed a bug that meant checkboxes had a CSS class of ‘fbheckbox’ instead of ‘fbcheckbox’.

If you encounter any problems with the new version please let me know.

4

How to tell if you’re a web design OG

This morning I’ve been following the hilarious (and cringe inducing) web design OG Twitter meme started by Jeff Croft (if you’re wondering, OG stands for Original Gangster). Here are a few of my favourites:

If you created a website that had “Works best with Netscape Navigator” you may be a #design_og
@_j12

If you remember Adobe PageMill, you may be a web design OG. #design_og
@meyerweb

If you’ve ever said that your “site looks better in Netscape Navigator” you may just be a web design OG! #design_og
@hudsonperalta

If you remember cleaning up bad Word-to-HTML markup by hand in a text editor, you might be a web design OG #design_og
@DataG

If u ever designed an interactive CD-ROM you’re a #design_og
@daveixd

Continue reading