If you’re serious about being on the web or any database-driven application, you need the proper professional tool. While anyone can go to Home Depot and, theoretically, renovate their house, hiring the big guns with the best tools, despite the cost, often is the better alternative. While I’ll always be an advocate of free and open-source software, PremiumSoft’s $95 Navicat solution is awesome.

And hey, Google, Adobe, and Intel (all who use the tool) can’t be wrong.

While many developers know that the health of your database is the quintessential backbone to EVERYTHING nowadays, being able to view that data, backup that data, and optimize that data is absolute. You may be thinking to yourself, well, I have phpMyAdmin for that. That may be true for perusing data, but setting up indexes and transferring information between two servers is a pain.

This is where Navicat shines.

You can setup up SSH connections between two servers and do a straight transfer between the source and destination, with progress bar, in Navicat. Even before the transfer, options exist to change the database encoding type, setup a proxy, and test the connection.

Additional features that are crucial to more advanced users include creation of stored procedures for improved querying, setting up views for table definitions, and backups that can be saved in many different places.

Check it out!

This is a short tip, but it piggy backs off my two previous posts to get you guys out of the guise of desktop tools and into the terminal!

Haven’t you ever wanted to do a ‘Ctrl-F’ type search on your web files? Wouldn’t it be cool if you could just find in your web server all the instances of an email address so you could update it across files?

Never fear, grep is here.

Grep is a Unix-based utility that does a simple text search on files that you specify. It then returns to the screen where that text is and where it is used. It works just like the search you’re use to in Windows, except for your files on a particular server.

As alluded to before, this is especially useful if you’re trying to comment out or change text on a website, but you’re not sure how often the text is repeated or in what files it appears!

For example, let’s say my boss asked me to update the email address that is listed on our 100-page website anywhere it’s listed. When I log into the terminal (see my SSH posts, again, for instructions on how to do that), I can simply type:

> grep -l 'example@email.com' *

Breaking that down, the ‘grep’ command invokes the tool, the ‘-l’ (dash lowercase L) says to list only the filenames, the ‘example@email.com’ (quotes included because I am using the @ symbol) dictates the text to look for, and the ‘*’ dictates to look in all the files in my current directory. What outputs is a nice list of files to manipulate!

Bonus Tip: Check out grep for Windows!

With the first public beta release in 2003, 8-year old Skype is a Godsend for anyone who is looking for a low-cost alternative to their home phone. Dubbed as the original mainstream voice-over-ip service, this eBay owned company does more than act as phone. Skype is a window to a suite of tools that we can all use to stay connected through small business.

If you don’t have a Skype account, go ahead and create one. It is free. You’ll need a mic and set of speakers to do the basics of making calls.

The casual observer will note that sitting in front of a computer (or having the computer on all the time) can be a big transition from a regular line, but you can easily take it to the next level with a dedicated VOIP Skype phone. I currently have a Linksys CIT400 (Arstechnica review) and it works well. For $30 a year, you can make unlimited calls to U.S. numbers just like a regular phone…and without the need for your computer to stay on.

A few upgrades I have opted for are Skype voicemail, a SkypeIn number (so clients can call a local number), SkypeForwarding to my cell phone if I’m not available (which requires your computer to be on, unfortunately), and conference calling. In one fail swoop, I have a full-featured suite of phone options for less than $50 bucks a year.

The biggest downside is that if you’re pushing everything through your internet connection. If your power ever goes out or if you want local 911 coverage, you won’t be able to use the Skype service. With the ubiquity, however, of mobile phones, this seems like a moot point, but it is something to consider.

Bonus Tip: If you have a built-in webcam, Skype video conferencing works flawlessly! If you want to talk to someone with a Skype account, it’s completely free!

If you’re a web developer, this tool is pretty well known…at least….it should be. For those breaking into the industry, this tool is a MUST HAVE. Built as an extension to the very popular Firefox web browser, Firebug allows a user to dive deeper into any page as they browse. From the Mozilla plugin website:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Installation

As with all Firefox plugins, installation is a one-click process. If you’re using Firefox 2, be sure to install version 1.05. For Firefox 3 users, a beta version of 1.2 is available. I have installed it and it seems pretty stable.

Once installed and you’ve restarted Firefox, simply activate Firebug by clicking the icon in the bottom right of the browser. A green circle with a white checkmark will appear if it is activated.

Viewing HTML

As you navigate, clicking the Firebug icon will show you the HTML of that page in a lower pane. You can expand the each element in the HTML tree and see how all of the (hopeful) divs link together. As you hover over each element, the top pane will highlight the portion of the page that is defined by that element.

Ever wonder how a page is constructed? Ever gaze in amazement on what cool CSS trick an author has used to generate a page?

Firebug can tell you.

Debugging HTML / CSS

On the flip-side, you can debug your own pages by right-clicking them on the page and selecting ‘Inspect element’. This will open the lower pane of Firebug and take you directly to the portion of html that generates it. If that html element has a CSS class or ID, the details of that CSS entity is displayed on the right side of the lower pane.

Even better, if multiple declarations are acting on an element in a CSS file, you’ll see the entire stylesheet build. Perhaps your style.css is making your links blue with no background, while your screen.css is making your links red with a yellow hover. Now you can see which declaration is getting the higher precedence.

Tons of Features

Without a doubt, Firebug is the Swiss army knife for web developers. In addition to simple HTML viewing and debugging, you can view the Javascript included on a page, the element details for embedded Flash objects, and the DOM tree structure. You can also view the speed of how certain elements are rendered. If your site is slow, simply look at the different elements and see which is taking the longest to download.

The single coolest thing, however, that makes Firebug a hands-down favorite is the ability to edit the HTML in the page right in the console.

Curious to see what a site would look like with a different font? Interested to see what your site would look like with a different background image?

Simply change the CSS of the page directly inline in the Firebug pane and the page in the top pane will update. If you’ve got a dual screen setup, you can pop-out the Firebug pane and have your HTML editor on screen and your test site on the other!

Have fun…and Firebug away.

At Blogging While Brown, it was mentioned in one of the panels that having your own domain name was crucial to establishing your brand. The biggest hurdle for most people, however, is that having a sole domain name usually means looking at a non-free host for your website. While that isn’t completely true, as Wordpress.com and Blogger.com provide tools for your domain name to point to their servers, venturing out on your own is worth it.

Just….be careful.

If you signup for any shared hosting plan, you’re essentially going out and buying a used Kia from ebaymotors without a test-drive. Forget the fact that its a Kia, non-tested, non-reviewed hosts are a nightmare if your site gains popularity.

While I won’t rip anyone who has a shared host, because I know $50 / year is within people’s budgets, consider opting for a secure shell (SSH) upgrade. Some shared hosts offer it, and trust me, it will make your site management a TON easier. If we stick to the Wordpress platform, learning even the most basic commands can allow you to easily install plugins, backup your database, upgrade your Wordpress version, change the permissions of certain folders, and edit files…all from the same screen. If your current hosting provider doesn’t offer the option, consider migrating to a virtual private server (VPS). I recommend Spry.

I wrote about this topic briefly in a previous post, but I wanted to give you some specific tasks to reiterate the point.

If you’re on a Mac, Terminal is built-in. If you’re on a Windows machine, check Putty.

Note: Commands to actually type into the terminal window are preceeded by ‘>’.

Logging In

> ssh <username>@<yoursite.com>

If you get a question asking you to authenticate, answer ‘yes’, otherwise, type your password at the next prompt. You should then be greeted by a message stating the last time you logged in an a prompt with your <username>@<yoursite.com>. The text within the following ‘[ ]‘ is the directory you are in.

Check Your Current Path

> pwd

Most shared hosts will return ‘/home/’.

View the List of Files

> ls -la

A detailed list of files, their permissions, their filesize, their owner, and their last edited date appear. Most shared hosts have a ‘www’ directory virtually pointed to a ‘public_html’ directory.

Install a Plugin in Wordpress

> cd www/wp-content/plugins

This changes your directory to the plugins directory, assuming the typical installation. If you forget a folder name, press the Tab key on your keyboard and it will auto-fill the folder name if it exists. If you press the Tab key twice, it will list the files to choose from.

> wget <url_of_plugin>.zip

This will download the zip file of the plugin to the ‘plugins’ directory. Easiest way is to navigate to http://wordpress.org/extend/plugins, search for your plugin, right-click the ‘Download’ link, copy the link location, and paste the link after your ‘wget’.

> unzip <plugin_filename>.zip

Unzip the plugin in the ‘plugins’ folder. A folder with the name of the plugin with it’s contents is created.

> rm <plugin_filename>.zip

Remove the .zip file of the plugin in the ‘plugins’ directory. Be sure to include the ‘.zip’ extension so you remove the zip file and not the folder.

Now just navigate to your plugins menu in the Wordpress admin menu and activate! Pretty simple, eh? If you ever need help, some blog consulting, or are looking to purchase some hosting from a Black business, contact me over at Bright Plum.

Bonus Tip: How to upgrade your version of Wordpress in 3 steps via SSH (including backing up your database)

As a web professional, having a testing environment is a must. Yeah, I could spend additional money and time trying to configure a leased virtual private server (VPS), but these days, I’m on a tighter budget. Can’t I just use what I already have to create an online space that my clients can access when I’m building their site?

Of course I can, with the help of port-forwarding.

Port-forwarding is a simple concept with your router. We all know that in order to connect to the internet, our cable supplier provides us a cable-modem that communicates to their service and provides us a high-speed connection and an IP address. If you have multiple computers in the house, in order to share that internet connection, you need a router, preferably a wireless router. That router is bundled with web-based software that allows you to manipulate how your computers not only connect to the internet, but how the internet connects to your computers. Port-forwarding is the management of this incoming connection.

Many web protocols (surfing the web, FTP, SFTP / SSH, etc.) utilize certain ports to connect computers to servers. When you browse to a website, your computer connects to that server on port 80. In fact, navigating to http://yourwebsite.com and http://yourwebsite.com:80 yield the same result. If you wanted to run a website off of your computer, a person navigating to that website would try to connect to your computer on that same port. But, if someone looks up your website, and your internet provider routes the connection to your home and ultimately your router, how does the router know which computer to send that connection to serve up that website? By setting up port-forwarding, you tell the router that if an incoming connection appears on this port, forward the connection to this computer and this port.

So how do you port-forward? Luckily, there is a mighty repository of how-to instructions for your router to port-forward a variety of different protocols (Xbox Live, BitTorrent, etc.) over at portforward.com. If you want to setup a quick webserver, check out MAMP for Macs and WAMP for Windows machines. Then all you need is your IP address (navigate to ipchicken.com to find that out) and you’ve got a website running on your computer at home for a test environment. Remember to port-forward from port 80 to your webserver port, usually 8888.

Bonus tip: Instead of having to type in the IP address to navigate to the test website, signup for a free Dynamic DNS account.

The web has often been described as a series of pipes. Data shooting back and forth between machines as soon as you can think about it. While this analogy isn’t technically correct, it serves the purpose. Many of the blogs that you frequent within the community are points of origins within these pipes. A popular technology that serves this information is packaged code called Wordpress. It is written in PHP, provided as open-source, and actually powers this blog. When you type in the address ‘BlackWeb20.com’ in your browser, your computer sends a request along a ‘pipe’ to a service that has a list of a lot addresses. This service connects with other services to find the numerical address of ‘BlackWeb20.com’, communicates back to your computer that address, and you are taken there. When you connect to that address, the Wordpress code is interpreted, processed, and presented to you in the mashable form of this great blog! In short, Wordpress is a platform to present content through the pipes.

What about when you are downloading a file? Even better, what about when you have your website, and you want to put a file on it for people to download? This process is called File Transfer Protocol, or FTP. Instead of your browser requesting the details of a mashed up page to read, you make a request for a file to be downloaded or placed to a particular location. Most, if not all browsers, natively support the downloading of files directly. They are, therefore, considered a FTP tool, or client. There are, however, better FTP clients. For the Mac, I prefer Cyberduck. For the PC, I prefer Filezilla. Extending the idea of downloading and uploading files, these professional clients go far beyond pictures, mp3’s, and videos. When one migrates their website, installs plugins for Wordpress, or sets up a new website environment, these tools become essential. They allow you to transfer files via a protocol in a bulk manner, expeditiously.

The next logical question is can you securely transmit these files? That is where SSH comes into play. Secure Shell (SSH) is a preferred protocol by system administrators (the people who maintain, fix, and upgrade your server) via the command line. It is a secure way of transmitting data using a shared encryption key. With a little practice, SSH can quickly allow a user to upload, unpack (or unzip), edit, create, save, open, and confirm necessary files for your website. Don’t get me wrong. There are secure methods via the FTP clients I mentioned above as well (called SFTP), but learning and utilizing the commands of SSH takes your game to the next level! On the Mac, the Terminal is a native SSH client. On the PC, you can download Putty for free. The most common commands you can start off learning are:

• wget <location>: download a file from a particular <location>
• cd <directory>: change to <directory>
• ls: list the files in the current directory
• nano or vi <file>: open <file> in a text editor
• rm <file>: remove <file>

*You’ll want to replace the words in the brackets <> with the actual names and locations of the entities you are manipulating.

If you have any further questions about anything I’ve discussed, please don’t hesitate to contact me at Bright Plum.