August 17th, 2008
Tips, Tools and Tutorials
Before I got into search marketing, I developed web software for a few different companies here in San Diego (I still do a bit for the time being). Along the way, I’ve found several different tools to be invaluable when it comes to helping me complete my tasks and making my work life easier – I seriously don’t know how I used to develop before some of these tools were around. There are other tools not mentioned here that I’m sure are helpful, so if you know of something significant that I’m missing feel free to leave a comment.
The command line interface or shell, depending on the operating system (OS), is a text input program allowing you to enter text-based commands that control the OS. The CLI is great for web developers because it allows us to, among other things, quickly search or modify a large number of files, run and administer programs, perform automatic updates and patches, etc. all at the control of our fingertips (no point and click necessary). Here is what a typical command line looks like:
So all you really do is type in text commands and receive text output, seems pretty simple right? Don’t let it’s simple interface fool you as this tool could be considered the most powerful tool of them all. I really can’t stress enough how important the command line is – most all computer geeks worth the glasses on their heads know and love this tool. You can even build shell "scripts" (files containing multiple shell commands) to perform complex, automated tasks – making your life very easy. There are even whole books written on the command line interface, so unfortunately I won’t be able to do it much justice right now.
If you’re any web developer worth a hoot, you’ll know what ssh is – a network protocol which allows data to be exchanged between two points in a secure fashion. You’ll need this to remotely and securely login via a shell and administer your web server or web apps. SSH is a nice upgrade from the old, insecure telnet days. A really nice and easy SSH tool I use all the time is Putty for windows, just download it, run it, enter your target host and away you go! If you’re on a Mac or Linux box, you can just open up your pre-existing shell program and use the "ssh" command to start logging in to a remote host.
FTP is pretty standard stuff in web development but is worth mentioning for new or aspiring web developers. FTP is the protocol used to transfer files over the internet, period. So when you transfer a new site or app you just built from your stagging server to your production, FTP is often used to do this. A nice FTP client I use is firefox’s FireFTP pluggin, runs right in the web browser.
I’ve recently discover this wonderful, open source, code versioning control program. I don’t know why but I really like the name too: Subversion allows you to track what changes where made to which files over time. This can be a great way to develop on a test machine and then automatically migrate changes to a live, production machine so that customers experience instant updates (rather than seeing buggy web pages or error messages as you hack away). You can also track which of your employees made which changes to which files, kind of nice when you want to know who screwed up and where. Most linux installations have a form of subversion installed and is a pretty standard way to manage code/file changes. The nice thing about subversion is that it’s not limited to tracking just programming code changes, you can manage any type of changes to any type of file. I’ve also used perforce at my last employer before starting my business, although perforce is not open source and requires a license to run.
FireFox is a popular, open source web browser that is gaining market share – it’s a really good browser, mostly because of the many extensions that are available for the product. One of these great extensions is the Web Developer Toolbar. If you’re dealing with CSS then you will really want to have this tool. The pluggin allows you to view CSS styles of a web page in real time, so you know which piece of code is causing which styling to appear on the page. You can even edit CSS code to have changes appear to your page in real time.
To be honest, I really don’t like Microsoft’s Internet Explorer web browser all that much, but since the majority of internet users are on it, we as web developers need to take it into consideration. The browser is notorious for not following web standards and trying to re-invent the wheel when it comes to interpreting web page code – that means code that displays a certain way on all other browsers might not display the same way on IE, making things difficult for web developers. Go ahead and download the IE CSS extension, it’ll shed light on those pesky IE CSS bugs. Another tip that has helped me a lot is to utilize CSS conditional comments in your web page code to import IE specific style sheets whenever an IE browser accesses your web page.
I’ve been using Adobe’s Photoshop since the late 1990’s, around 10 years now (has it been that long?), and must say that I can’t live without this one. Photoshop is available on windows or mac, while linux has it’s own
open source version call Gimp. One of the single most useful tasks I can do with Photoshop is check to see how many pixels wide something is on a web page. So if I’m modifying a banner ad or looking to fit a new image onto a page and make everything look exactly right and in place, I can take a screen shot (print screen) of the current web page, import the image into Photoshop, highlight the area of interest and check to see how many pixels I have. I’ve also designed countless logo concepts and modified countless more images to fit my perceptions. I’m only scratching the surface of Adobe’s wonderful program, read more about it when you get chance.
Even though I’m currently looking for a replacement program, I use Adobe’s Dreamweaver almost every day to modify web page code. It’s a pretty easy way to open up files via the FTP protocol and just do some straight code edits, or download a complete file set, perform local edits and then upload changes to a remote host. A lot of experience web developers will cringe at the sound of "Dreamweaver" because sometimes the program can create extra, hidden, unwanted code in your files (which I am still unsure of why). Not to mention Dreamweaver’s FTP saving featuring is painfully slow….wait….wait…….wait…FTP error occurred…. try again…. wait….wait……success. Seriously, an FTP file transfer doesn’t take much overhead to run and Dreamweaver has some obvious problems to solve before we see an excellent product – but for now it will have to do. I’m actually on a trend right now to avoid Dreamweaver and jump into more command line editing or CMS editing if I can as those would be cleaner ways to modify code.
The Drupal framework is a very powerful and customizable open source content management system. In laymen’s terms that means it’s like an instant website in a box that you can customize to your liking. Drupal has many different software modules with the purpose of extending it’s functionality. – so you could bolt on a newsletter module, or an image upload module, or an e-commerce module to sell products, etc. You can even create your own custom modules. There are other CMS frameworks out there for web development purposes but none so far that I’ve seen which have such an easy hook system for custom module programming.
• 10 years ago
Very interesting article. Without these tools, there is no life in web development. Thanks for sharing :)
• 10 years ago
Very usefull tools except Drupal :) There are number of frameworks out there and Drupal is not the vest, good but not the best. For FireFox plugins I would add FireBug! this is extreamly useful extension.