Category: Web Development

All articles related to web development including tips and tricks for other web developers, potential pitfalls, career advice, new and useful tools, and links to important sites.

Block all web notifications in Firefox

Posted on by John Rockefeller

There’s a currently growing trend in website design where website owners request access to send you notifications. I can’t think of a case where this would ever be required or wanted and yet many websites are asking, sometimes even before the content has fully loaded.

To block all notification requests and all notifications from all websites in Firefox, type “about:config” in the address bar and search for “dom.webnotifications.enabled”. Double click that row to set the value to false and enjoy a happy, interruption-free web browse.

While you’re at it, read up on and consider enabling Tracking Protection for all websites. It makes browsing much faster as it skips the ads from shady advertising companies while you’re on your favourite sites.

Please don’t change things just to say you did

Posted on by John Rockefeller

play-buttonIt was a trend during the dark days of the web (read: before html5, when the world required Flash for animations on the web) that designers would create custom, wacky, non-standard navigation elements on their sites in an effort to look more “hip” or “cool.” When you went to any given website that employed this tactic, the first few minutes were spent hovering over icons to figure out what each of them did. This is, of course, after you waited for the website to “load.” This sort of horrible design got so bad that it became known as Flashturbation.

Thankfully, I haven’t seen much of Flashturbation since around the time MySpace died (correlation, not causation, I’m sure).

Still, it crops up from time to time.

Why am I writing about this? I just wanted to call out Red Bull’s website and their decision to break the play button, which has been a dominant design standard since the 1960s. I got halfway down the page before my mouse accidentally hovered over the triangle icon and it was then I discovered that the images were actually videos that could be played.

It’s okay to style an icon. It’s not okay to break it.

Moving a site from Drupal 7 to WordPress

Posted on by John Rockefeller

I’m in the process of moving my videogaming blog, GameBlaster64, over to WordPress. The most recent security vulnerability with Drupal coupled with the fact that core updates must still be done manually has pushed me to head in that direction. Drupal has always been a lot more work than WordPress and I didn’t really need all the extra functionality anyway.

In under a month, GameBlaster64 will be 4 years old. There are hundreds of posts, thousands of pages, and tons of images. It’s going to be 301 redirect galore. To help with this, I wrote a small PHP script to grab the URLs of the taxonomies and articles I’ve been writing. It uses WordPress functions to import blog posts, along with their attached tags from the Drupal 7 database.

Here is my script. If you’re moving from Drupal 7 to WordPress, you’ll hopefully find it useful.

Microsoft is killing it

Posted on by John Rockefeller

Here’s a blog post you wouldn’t normally expect to see on this blog. In the past, I’ve not usually been big on the Microsoft stuff. That is quickly turning around. Take a look at all the amazing stuff they did in the last day:

The only bad thing they did was this:

On Hacker News, a chain of people posted the following, which struck a chord with me:

Who would have imagined it 5 years ago?
 

Who would have imagined it five months ago?

For me, I wouldn’t have even imagined this five days ago.

Placeholder Images For Your Site

Posted on by John Rockefeller

kitten

Sean Yo from last night’s Guelph Web Maker Meetup shared a few awesome web tools I’d never heard of and I thought they were so neat I resolved to share them (and a few extras) today with everyone here.

Every web designer and developer under the sun has used (or at least heard of) the default ‘lorem ispum‘ text that is used as a filler for unfinished text copy on websites that are a work in progress. Well, now us web developers and designers have an option to use something similar for our images as well.

The image on the right should give you some sort of indication where is going… check it:

 

Featured WordPress Plugin: W3 Total Cache

Posted on by John Rockefeller

Let me be straight with you: Every WordPress blog on the web should have this plugin installed.

And, no, I’m also not being paid to say that. :)

W3 Total Cache is exactly what its name suggests: A total caching solution for WordPress blogs. WordPress is a good publishing platform and content management system (CMS) but runs into problems quickly when more than a few visitors hit your site. Even moderately busy websites can buckle under the strain of the database connection pools, stylesheets, Javascript, and HTML that WordPress uses.

Some of the neat features that W3 Total Cache includes:

  1. “Minifies” CSS, Javascript, and HTML by removing all whitespace. To see an example, view the source code of this page. This means there is less data to send to viewers of your website which also means your website loads faster.
  2. Final output is cached and then re-served to the next viewer without having to rebuild. This means that in many circumstances, your blog might only be recreating your site dynamically once an hour. Otherwise, the cached version will be served, greatly increasing the performance and stability of your site.
  3. Uses advanced disk caching techniques to cache output or can also take advantage of Memcache technology (if supported by your server) to increase speed even more.

Before W3 Total Cache I was a fan of WP Super Cache. And before that, I used WP Cache. Neither of the latter two can hold a candle to the capabilities and caching power of W3 Total Cache.

For more information on how this plugin can increase your website’s performance, take a look at W3 Total Cache on the WordPress Extend website.

Windows Azure SDK + Visual Studio 2008 Error

Posted on by John Rockefeller
Error creating Windows Azure project in VS2008. Help!

This is not a typical blog post for this blog and I apologize for this one in advance. I’ve been working with some friends from Coffee and Code on gearing up Azure development and I need the community’s help. Your help.

I’ve freshly installed a copy of Windows 7 in VirtualBox. I’ve installed Visual Studio 2008 Professional and its SP1. I’ve also selected .NET framework 3.5 from the Windows features menu. I’ve reinstalled DX11 and Uninstalled then reinstalled the Azure SDK and the Azure VS2008 tools.

Every time I go to create a new project I get this error:

'Grid' object cannot be added to 'Grid'.
Exception from HRESULT: 0x88980406.
Error at object 'System.Windows.Controls.Grid' in markup file.
'Microsoft.VisualStudio.CloudService.Wizard;component/newprojectdialogcontent.xaml'.

After I click OK (the only option available), Visual Studio shows the message in the status bar:

Creating project AppTest ... project creation failed.

I’ve searched on the web and asked around to find a fix for this error as I’d really like to get going on Azure development. Can anyone in the community help me?

Update! I’ve since learned that this is due to a bug between the 3D acceleration in VirtualBox, Windows 7, and Windows Azure SDK.

Breathe New Life Into An Old Computer

Posted on by John Rockefeller

My laptop is an Averatec 3260. 512MB of RAM, 80GB hard disk, and 1.6GHz processor. It’s had the front panel LCD and battery replaced, by me. It’s still missing the front bezel (I thought it looked cooler with it off.) Up until yesterday, the performance of the machine was just above what I’d consider to be “survivable” regardless of OS.

Then, everything changed.

While I was working with Cory Fowler at Red Brick Cafe and then later at my apartment, I was updating my copy of Mandriva Linux from 2009.1 to 2010.0. During installation something must have gone wrong because KDE4 no longer started properly. It kept bringing me back to the login screen. So, instead of using KDE4 I used IceWM.

I haven’t gone back to KDE4 since yesterday. And I’m the hugest KDE4 fan there is.

If you’ve got an old laptop or an old desktop that’s struggling under the weight of Windows XP or KDE4, grab a copy of Mandriva Linux for free and install the IceWM packages. Give it a go. I’m sure you’ll be impressed with the performance of your machine. I know I was! I remember running IceWM a few times when I first started using Linux quite a number of years ago but it has really come a long way since then.

IceWM runs all of the KDE4 programs I care about and even the Gnome programs, too. Watching a video on YouTube is made much easier with the lighter-weight desktop, as is just general browsing.

IceWM offers a lot of customization but some of it is complicated to configure. The easiest thing to do is to replace the God-awful default theme with something way cooler and easier on the eyes. The theme I’m using now is psicopoire.

The Box-Look.org website includes hundreds of awesome themes you can try out. And installing them is actually pretty simple. To install a new theme in IceWM, try this:

  1. Download the tarball
  2. Untar the tarball into the ~/.icewm/themes directory (if it does not exist, create it)
  3. Right-click on the desktop and go to Settings->Themes->Your New Theme’s Name

Does anyone else know any other neat, lightweight software to replace large-scale, heavy applications? I’d love to give them a try.

Google Chrome for Linux Now Available

Posted on by John Rockefeller

The world’s fastest web browser, Google Chrome, has recently been released on the Linux platform. This is big news since it will greatly improve the web browsing performance of many of the world’s netbooks.

I’ve been a huge fan of Google Chrome since it appeared in the summer of last year, but haven’t used it heavily simply because of the lack of Linux support. It is installed on my Windows 7 virtualization, however.

Word on the street is that Google Chrome is also available for Macs, so if that’s your platform, take a look!

One thing that I think is important to note that I haven’t seen anyone pick up on is this line on the Official Google Blog post about Chrome being available for Linux and Mac:

“At Google, most engineers use Linux machines …”

Hmm.. No wonder they’re winning! ;)

Go for it -> Download Google Chrome for Linux

Develop Locally With Linux, Apache, MySQL, and PHP

Posted on by John Rockefeller

If you’d like to develop PHP and MySQL web apps in Linux but you’re not sure how to get started then feel free to follow along with this blog post. For the most part, installation and configuration is simple and straightforward.

Though this article is directed toward users of Mandriva Linux (my Linux distribution of choice for a desktop / web-development PC), the same instructions can apply to many of the different Linux distributions including Fedora, Red Hat Enterprise Linux, Ubuntu, and Eeebuntu. For a huge list and up-to-date news of Linux distributions available to you, take a look at the Distrowatch news site.

The easiest way to install all of the software in the LAMP stack (Linux Apache MySQL and PHP) quickly is to do it using the command-line (also known as the console). Since many new users are uncomfortable with the command-line, feel free to do all of these installations graphically using the software installer from your respective distribution.

If you’d like to proceed using the graphical installer built into Mandriva Linux, use the “Install & Remove Software” icon located in the main menu.

To install apache, mysql, and php using the Mandriva command-line, follow these instructions:

  • Open up a terminal by clicking on the Mandriva star and clicking on Terminal
  • Type “su” and press enter (this will log you in as the administrator or “root” user)
  • Enter your root password
  • Type “urpmi apache php mysql phpmyadmin nano”
  • If asked which version of apache, select a stable version to install (likely the first choice)
  • If asked which version of php, select the apache module version (not CGI or CLI)
  • If asked for permission to install extra software that is required for proper operation of the LAMP stack, select “yes” and proceed

Once the software has been installed, you should be able to open up Firefox and navigate to http://localhost . This should bring up a screen that says “It works!”, meaning that apache has been properly installed.

For reference, Mandriva Linux puts your web files in the directory /var/www/html . Straight away you may not be able to access those folders with your regular user so feel free to change the permissions of the directory recursively by using the command

chown -R yourusername:yourusername /var/www/html

Note that this operation is definitely not secure if you plan on actually hosting your website on the live Internet using this computer, but for local development you should be okay. :) To learn more about file and directory permissions in Linux, take a look at the official documentation.

Before you are able to access your databases through phpmyadmin, you will need to set your MySQL root password using the following command (being sure to change NEWPASSWORD to a password of your choice):

 mysqladmin -u root password NEWPASSWORD

Using Firefox (or whatever browser you normally use) navigate to http://localhost/phpmyadmin . Log into MySQL with your “root” user and the password you just entered into the command-line. This should give you access to your MySQL databases. For more information on how to use phpmyadmin, take a look at the official website.

Let’s create a small Hello World PHP web application by navigating to our web directory and creating it. Use the following commands to achieve this:

cd /var/www/html
nano test.php

In the editor screen that appears, enter

<?php echo "Hello World!"; ?>

Press CTRL-X and save the file before quitting. You should now be able to navigate to http://localhost/test.php and see your hello world application :)

Hopefully this has given you enough information to get you up and running. Please feel free to post comments if you’ve run into problems and hopefully I or another person in the community will be able to help you out.

Have fun with PHP on Linux!

A Month With Mandriva

Posted on by John Rockefeller

Well, it’s been just over a month since I made the switch to Linux from Windows. My distribution of choice for desktop PCs has always been the fantastic Mandriva Linux. Available for free with plenty of included software (Open Office suite, the Firefox web browser, Kopete messenger, Amarok media player, and much more), it’s always done the trick and looks wonderful doing so.

I have two physical hard drives in my PC. The first one is mounted ‘/’ for all my system files and programs. The second drive is my ‘/home’ directory, where all of my documents are kept. All of the system files are kept entirely separate from my documents.This sort of division is done even with one single hard drive automatically by Mandriva so that if I ever need to format or upgrade the operating system I don’t lose any of my pictures, movies, or music, ever.

Me playing Morrowind in Linux
Me playing Morrowind in Linux

Life without Windows is certainly possible. I’m living proof. And the stuff I use my computer for is likely more intense than your average Joe since I’m a web developer. All of the required software that I use on a daily basis is available and runs great in Linux.

All of my games worked out-of-the-box using the Windows games and software emulator* (Read more about the Wine project). I’ve included a screenshot of me playing Morrowind. It runs great. My girlfriend and I played through Max Payne on this PC, as well, and we’re a quarter of the way through the Quest for Glory 2 remake (which is a lot of fun, by the way) on my other Mandriva Linux PC (our media center).

If you’re considering running Linux or if you’ve heard about it and are curious, give Mandriva Linux One a try. It’s pretty simple: You download it and burn it onto a blank CDR. Reboot with the disc in the drive and you can use it right off the disc without actually installing it. If you like it, go ahead and install it. Otherwise, just take the disc out and reboot — nothing has been changed on your computer.

For more information about Linux, try reading some of these sites:

* I realize Wine is technically not an emulator, but when explaining what it does it helps to use that term.

5 Really Great Freelancing Websites + RSS Feeds

Posted on by John Rockefeller

If you are a freelancer you may already read the articles from some of these websites. Possibly on a daily basis. If you’re new to the freelancing game or considering a jump to self-employment, this list might help you out.

These sites typically deal with Web Design or Web Development, though there is very likely a lot of information you could use in any career. If you’re not working with websites, programming, software development, or managing a team, take a look anyway. You may find something you like.

When working from home or on your own, saving time is like precious sugar increasing the flavor and making sweet the rest of the day. Instead of reading each of these websites (and others) on a daily basis by individually going to them one-by-one, use a feed reader such as Google Reader or Akregator. These services are completely free and will pull new articles from the sites you love and put them all in one spot, saving you time.

Okay, enough of that. Onto the list!

1. Web Worker Daily

Web URL: http://webworkerdaily.com/
Feed URL: http://webworkerdaily.com/feed

Daily tips on how to improve your freelancing performance, reduce costs, and build a better business.

2. FreelanceSwitch

Web URL: http://freelanceswitch.com/
Feed URL: http://feedproxy.google.com/FreelanceSwitch

A bit more relaxed, this one is a community of freelancers and can help bring you into a crowd of like-minded people.

3. Lifehacker

Web URL: http://www.lifehacker.com/
Feed URL: http://feeds.gawker.com/lifehacker/full

While not directly related to freelancing, this website has excellent articles on reducing your cost of living, reusing old items in new ways, and living a more successful and fulfilling lifestyle. A definite read.

4. Elance

Web URL: http://www.elance.com/p/landing/provider.html?source=index
Feed URL: (Today’s Jobs) http://www.elance.com/todaysjobs

A website dedicated to either a) finding you work or b) finding professionals to do the work you need done. If you’re either, sign yourself up and start doing business.

5. AllAboutFreelance

Web URL: http://allaboutfreelance.com/
Feed URL: http://allaboutfreelance.com/feed/

Usually funny but very informative. This site should definitely be on your watch list.

Well that should get you started.  I’m always interested in learning about new sites, though. If you’ve got an awesome freelance site, please mention it in the comments. Much appreciated!

Well, I’ve officially made the switch to Mandriva Linux.

Posted on by John Rockefeller

After years of dual-booting between Windows XP and Mandriva, I made the decision to bring the hammer down and get rid of the former. My original intention was to make the switch when I bought a new PC but my hand was forced as I came home from work on Friday to a locked-up Windows XP desktop that never came back.

Fear not: no data was lost as Mandriva can read Windows drives. I backed up my things onto my /home partition and waved goodbye.

It’s been a roller-coaster past with Windows XP: When it first came out, I irrationally hated it. Once I got used to it, I found it actually worked pretty well. Mostly. Sure, it lacked some of the neat features Mandriva had (rotating cube desktop, wallpaper playlists, etc.) and you never quite knew when the next time it would fail was, but it got the job done. Facing a crashed system and being forced to format was always a wonderful experience. Windows doesn’t have separate partitions for your personal files and system files, meaning that when you begin again, you lose everything. Hope you made a backup! Going through the hassle of calling a Microsoft person in India to promise them you only had one copy of Windows installed was always a treat, as well.

When Vista came out I was put off by even more Digital Restriction Management (DRM) but wanted to see how it performed nonetheless. I can honestly say after using it at work for the past year and a half that it will never come close to being installed on my machines. So, that leaves us the little engine that could: Mandriva.

It’s been just over 2 days since breaking up with Windows XP and I have to say, I don’t miss a thing.

How To Install An Aptana Color Theme

Posted on by John Rockefeller

This is the most requested item out of any of my blog posts or pages. People are always asking “how the heck do I use your Aptana color themes?” It’s actually easier than you think. Follow the un-aliased arrows in this 5-step tutorial to theming bliss. If you haven’t already, open Aptana.

1. Click on Window -> Preferences

aptana-1

2. In the pop-up window, expand Aptana -> Editors

aptana-2

3. Click the Import button for whichever language you want to import the colors into

aptana-3

4. Select the .col color file that you’ve downloaded from my site (or others)

aptana-4

4. Click OK

Okay, okay. This one goes without saying. I just figured I should throw it in.

Hopefully this has gotten you off-the-ground with respect to Aptana color themes. If you have any questions, please feel free to post comments and I’ll do my best to get back to you. Thanks!

Wake Yourself Up With Onlineclock.net

Posted on by John Rockefeller
www.onlineclock.net
www.onlineclock.net

Since just after boxing day of 2008, I’ve been following the Everyman sleep pattern. I’ve stumbled a few times and had to reset, either from sickness or missing a nap. When things are running smoothly, I rely on Onlineclock.net to wake me up, wherever I am.

The site is simple and sweet. When you first navigate there, it displays the current time in red. You select from two drop-down menus what time you’d like the alarm to go off at. Make sure your sound is on and hit the sack. Nap time!

Unlimited Awesome: Linux script to convert mods to mp3

Posted on by John Rockefeller
Listening to Purple Motion in iTunes :)
Listening to Purple Motion in iTunes :)

One day, Philipp Keller got fed up with installing sound libraries to listen to old-skool music files, so he decided to write a script that takes the hassle out of it and convert any mod to an mp3 file. Now you can download his script for free and use it on your own Linux box to convert your precious mod collection to mp3 for on-the-go listening.

Last.fm Integration

Playing your music modules as mp3 files has the added effect of allowing you to scrobble your music to Last.fm. Typically, playing anything but an mp3 causes Last.fm to disregard your tune. I know that if Last.fm or the WinAmp Audioscrobbler plugin took my mod playing seriously, I’d have a way different collection. Now I can.

Open source rules. Long live music modules!

Aptana Color Themes

Posted on by John Rockefeller
Aptana Studio Rules
Aptana Studio Rules

When I develop at home and at work I use Aptana Studio. I purchased a license for myself at home and I use the community edition (read: free version) at work. It’s a wonderful editor with a ton of features and great community. One thing it lacks, however, is a good set of themes, out-of-the-box.

So what, you ask? Just go and download some third-party custom themes from the web!

Pishaw! It’s not that easy. I’ve done a few Google searches but not a whole lot turns up, to be honest. And that’s a shame because I bet a lot of developers are in the same boat as me.

I’ve been tinkering with themes over the past few weeks and I’ve decided to start releasing some on my site for everyone to use. The themes page will grow over time as I continue to release themes. I’d appreciate any feedback you have. The Aptana Themes page is not only for my themes, they also include some of the best themes I’ve found around the web. If you have a theme you’d like me to put up, send it to me and I’ll do just that.

Anyway, without further ado, I present the Aptana Themes page!

Mandriva 2009.0 Is Almost Here!

Posted on by John Rockefeller

The newest version of Mandriva is almost here! Released just a few days ago, the second release candidate of Mandriva includes the long awaited switch to KDE4. A release candidate, for those not aware, is the versions of Mandriva (and other software) that are considered nearest to the final cut. Once these final few versions pass with a minimum of bug reports, the software is released in full.

If you’re interested in trying out Mandriva Linux, you should try last season’s stable 2008.1 version. If you’re a current Mandriva user and want to see the latest and greatest (at the risk of system stability), check out 2009.0 RC2.

For more information, check out the DistroWatch page for Mandriva Linux.

Need a Color Picker? Try Nattyware’s Pixie.

Posted on by John Rockefeller

This thing is really handy. It’s tiny — it only takes up 8k of RAM (which is what’s left over on a typical Vista install :)), it’s loaded with features, and it works as advertised.

If you find yourself wondering what the hex color value of an item on your screen is, this tool will tell you. Simply start the program then hover your cursor over any color to retrieve its hex, HTML, RGB, CYMK, and HSV color values instantly.

Download Pixie now.