For those of you who use GoDaddy, I am very curious – why did you decide to go with them? While I use them to host over 40 domain names, I find their overall site and service to be completely gimmicky, spammy and a cluttered mess of sales pitches. I only use them for domains because it is a bit of a pain to transfer elsewhere, though I may just take the plunge and do that soon, ridding myself of the awful user experience that is GoDaddy.com.

Thankfully, Linode was the second most popular host. I’ve been recommending them from before they started sponsoring DevGrow and I cannot say enough good things about their overall service, including bang-for-buck, reliability and customer care. I’ve used them all in the past – 1and1, DreamHost, Host Gator, Slicehost, BlueHost and Media Temple – and NOTHING compares to Linode. On that note, however, it is not for everyone. You have to have a general idea of how to configure your own server to get things working properly, or at least have some interest in it to follow along their stellar guides and tutorials. Someone without any experience can be up and running in a few hours and get everything working smoothly over a day or two. The benefits are well worth it, from the total control you have over your server to the knowledge/experience you gain.

Have some more insight into the hosts I listed out? Provide your feedback in the comments!

New Poll: What Code Editor Do You Use?

I’m curious as to what code editor you guys use on a daily basis. Also, what do you use it for – programming or CSS/HTML? I wish there was a way I could get more info directly in the poll itself but additional details will have to wait until I post the results.

As always, be sure to subscribe to the RSS feed and follow me on Twitter!

The Code

In order to load the share buttons after everything else, we need to do two things. First, we need to edit our post template (single.php) to call a jQuery function after everything has loaded. We call this function in single.php instead of an external JavaScript file since some buttons benefit from the post permalink or title, so we need to make sure our buttons have access to that information as well.

single.php

In the code above, we’re calling the function get_social using jQuery’s window load function instead of the typical document ready – this makes means our function is called after everything has loaded, whereas document ready loads all code immediately after the DOM is ready. Inside the window load event, we call our function and pass the title and permalink so our buttons have access to it.

In the get_social function itself, we can use jQuery’s load function to pass our variables, get the response and populate or div (with the id of “sharing-buttons”). Please be sure to point to the correct URL of your share.php file (which we’ll create next) – you may even want to use the absolute URL to minimize errors (ie http://…).

share.php

The share.php simply contains all of your dynamic button code. Here’s what mine looks like:

In the beginning, I grab the permalink and title variables from either $_GET or $_POST (a bit more future-proof in case our function changes) and use the default button codes provided by these services. Note that I don’t use the permalink or title in any of the above buttons, as these services automatically detect that information from whatever page they’re posted on, however it’s there if you need it!

That should be it though – if you edited your single.php and correctly point to your share.php file in the get_social function, you should be loading your buttons after the rest of the page is completely loaded!

See It In Action

The current DevGrow theme (v3) is using this code in every post. To see it, go to any article posted on this site and immediately scroll to the ‘Share this Article’ section. You should just see the small icons (RSS, email, reddit, etc.) until the entire page has finished loading, after which 3 additional buttons (Digg, Facebook and Twitter) should pop up above it. If you take too long to scroll there you may end up missing it but keep an eye on your status bar – you should see the buttons loaded only after the rest of the page has finished loading.

Caveats and Conclusion

While working on this, I found that some buttons did not function correctly when loaded this way, such as the one for DZone. I didn’t spend too much time trying to figure out why but I assume it has to do with the way their button code extracts the host URL, which it may have had difficulty with since it was being loaded from an external file. While it would’ve been nice to include that button, I found that having a faster loading site is much more important to me than any single service.

Also, please keep in mind that this won’t really change your overall page loading times – it will only make it so that the rest of the site is loaded before the social media buttons. It’s useful if you find these buttons to be slow at times and parts of your page render white/blank until they’re finished loading, which is the issue I was having.

Are any of you doing something similar to this in order to load your content a little faster? Anyone know why the DZone button isn’t working or know how to fix it?

The majority of my web design and development work is done on a 64-bit Windows 7 desktop. For more serious programming projects (pretty much any language other than PHP, HTML or CSS), I do switch over to Ubuntu in VMware Workstation, but nearly all of my web design client work is done in Windows. From my experience so far, Windows 7 has been absolutely stellar for web development – it’s easy to use, fast and just plain works.

Using the Right Software

The key to working in any OS is using the right tools to make your work process as painless and efficient as possible. Thankfully for Windows users, there are plenty of great tools available for web design and development.

Notepad++

This is probably the best text editor available on Windows and best of all, it’s completely open source. Notepad++ supports custom styles, recognizes a multitude of different programming languages and supports third-party plugins. For my setup, I use a slightly modified Ruby Blue style/theme and the following plugins:

• Explorer – Adds a file browser in a pane to the left or right of your editing screen, giving you quick access to your project files
• Zen-Coding (Python-based) – If you don’t know what Zen Coding is, just watch the video. It will change the way you write web pages!

There are a few more installed but these are the two I really can’t live without. I’m still new to Zen Coding but so far it’s been an incredible experience, I highly recommend it!

Adobe Photoshop and Illustrator CS5

These are two tools that are an absolute necessity for serious designers and web devs. I use Photoshop for rough mockups and full compositions before translating them into HTML/CSS in Notepad++. Illustrator is a vector-based drawing tool that is critical for logo design, as you typically want to create something that is scalable without a loss in quality.

For Photoshop CS5, I use the Essentials workspace setting with a few customizations, including having the info panel show by default (very useful for sizing elements). Unlike other developers, I prefer making my mockups to nearly exact scale. It takes a bit longer to do but I like having an accurate depiction of my design and element placement before coding it out. My rulers are (of course) set to pixels and my default document size is 1280px by 840px, which happens to fit perfectly in my 1680px by 1050px desktop resolution (no scrolling required even with side panels displayed).

PuTTY + Pageant

PuTTY is an open source SSH program that just works. It’s dead simple to use and allows you to save profiles to easily connect to your frequently used servers. Pageant comes with the default PuTTY installation and allows you to load/use SSH public or private keys (required for using Git).

TortoiseGit

Git is a version control system made famous by Github, which provides hosting and a plethora of other goodies for your Git projects. I use Git for all of my bigger projects as it makes a) provides an additional level of data security/redundancy and b) makes deploying new code pretty painless (at least for smaller PHP projects).

WinSCP

WinSCP is an open source SFTP, FTP and SCP client for Windows. It’s free, secure and easy to use – what more could you ask from an FTP client?

Firefox, Chrome, IE8, Safari and Opera

These are all of the browsers I use on nearly every client project. I use Chrome as my primary browser and debug my HTML/CSS using the WebKit Web Inspector (inspect element) it comes with. I’ll also debug in Firefox using Firebug from time to time, however most layouts that work in Chrome will also work in Firefox. As the project progresses, I’ll check the layout in IE8, Safari and Opera from time to time to make sure the majority of users will have a similar experience. I try to avoid IE7 and below if at all possible, though I will break them out if the client’s market demands it.

Dexpot

One thing Ubuntu and OSX have that I sorely miss in Windows is the ability to have multiple desktops. Thankfully, there are third-party applications like Dexpot to help rectify this – use this free software to add multiple desktops and an Exposé-like feature to Windows.

XAMPP Lite

XAMPP Lite is a quick and easy way to get Apache and MySQL (with PHPMyAdmin) running on Windows. This is a critical tool to develop and test web applications locally, as it makes the setup and installation of the most common web environment nearly effortless.

Rainmeter, Desktop Gadgets and Sticky Notes

The last few applications are not critical but do help with organization and maintaining your system:

• Rainmeter – Provides incredible skinning options and widgets to your Windows desktop (check out the skins)
• Windows Desktop Gadgets – More widgets for your desktop (I only use two, one for weather and a CPU monitor)
• Sticky Notes – Included in Windows 7 (under Accessories), this is a great application for writing down quick notes and tasks that sits on the desktop

Conclusion

That wraps up the list of essential applications I use on a daily basis on my Windows 7 desktop. For more programming-heavy projects using RoR or Django, or based on NGINX or Lighttpd web environments, I prefer using the latest stable Ubuntu in VMware Workstation. Prior to selling my laptop, I used a 15″ Macbook Pro for travel and for iOS development (and I’m planning on purchasing another one in January).

What is your ideal web development environment? Do you have any other applications you recommend?

Also, please remember to Subscribe to the RSS Feed and Follow me on Twitter!

Download

How to Use jQuery Mobile

jQuery Mobile is incredibly easy to use, just include the jQuery Mobile files in your header and add a few data attributes to your markup and you’re set. All of the styling is handled by jQuery and the included CSS file, so you can literally create a complete mobile webpage in minutes. In the example below, we’ll create a simple page that loads internal links using a variety of transition effects. The first few steps will outline the generic usage of jQuery Mobile while the rest will take a look at the specific elements used in the demo.

Step 1. Include the jQuery Mobile Files in Header

This step is pretty self-explanatory: just include the framework files. You can download them from the jQuery Mobile site or load the files directly from their site/CDN, which will reduce bandwidth costs and keep your website speedy.

Step 2. Use data attribute in HTML markup

Apply data attribute tags to your HTML, where n is the available feature you want to set, for example:

The data-role element specifies which DIV/block should be used for the header, footer and content, all of which are inside the main page wrapper. Here are the data attributes used in this example:

• data-role – specifies the nature of the wrapper element, can be set to: page, header, content, footer. Two other settings were used in the example to indicate list elements and list dividers, for which the attribute was set to: listview for the main list element and list-divider for the list divider. There are a few other available settings, including collapsible, which creates a collapsible/show-hide block (more info).
• data-position – specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer)
• data-inset – specifies whether element should be within content margins or outside of it (flush or with margin) – set to true or false
• data-transition – specifies which transition to use when loading new pages, can be set to: slide, slideup, slidedown, pop, flip or fade
• data-theme – specifies which design theme to use for elements within container, can be set to: a, b, c, d, e
• data-dividertheme – specifies the theme for the list dividers using same options as data-theme

Step 3. Add content and publish online!

Using the above example, the template found on jQueryMobile.com or creating your own layout, populate the blocks with your own content and upload the files. Currently, jQuery Mobile renders the pages the same on mobile and desktop browsers, so you don’t necessarily need a smartphone to test it out (though having one can help ironing out bugs).

Accessibility and Precautions

Right now, the alpha version of jQuery Mobile (the only one currently available) is compatible with all versions of Safari for iOS and for most browsers on Android. BlackBerry is partially supported and Windows Mobile is sketchy at best, but rest assured that compatibility will only get better with time, as that is the main goal of jQuery Mobile – creating a widely compatible mobile JavaScript framework. You can view the compatibility chart on the official site but should also follow their blog to get the latest updates too.

That said, is it worth investing the time and energy to use jQuery Mobile over the other available mobile frameworks, even though it’s in the alpha development phase right now? I would say yes, absolutely – this is a framework that has huge momentum behind it right now and will only get better with time. As long as you’re staying on top of updates and changes, you should definitely start getting familiar with this framework if you’re planning on doing some mobile-friendly web development.

An additional benefit of jQuery Mobile is that it makes loading pages using AJAX automatic. Add an iPhone home screen icon to your application and iOS will cleverly hide Safari controls, mimicking native applications.

About the Example

The downloadable example above includes is split into a header and footer file for the sake of convenience, feel free to use whatever coding method you prefer. I may end up creating a simple MVC framework using jQuery Mobile that makes it easier to develop a dynamic mobile app, in which case I’ll be sure to post it on this blog. If you’d be interested in something like that, leave a comment below and I’ll try to bump up it’s priority on my huge list of to-dos.

Edit: The first iteration of the jQuery Mobile PHP/MVC Framework is complete.

Conclusion

That wraps it up for part 2 of the Mobile Web Development series. Be sure to check out part 1, an Introduction to Mobile Web Development, if you missed it earlier. In the next part, we’ll take a look at the various other mobile web frameworks out there, so stay tuned!

Also a reminder: the AppSumo giveaway contest ends tomorrow – be sure to check out the details and enter (it takes 30 seconds and is free), you could win nearly $400 worth of support products.

And as always, subscribe to our RSS feed and follow us on Twitter if you haven’t already!

Download

The following zip file contains the PHP class and license information.

The Cache Class

All of the functions are fairly self-explanatory. The __construct function is called when you instantiate the class – all it does is set the variables and create (or load) the cache log file. I chose to use a log file to deal with cache creation and deletion as it reduces unnecessary calls and is a bit faster, in my opinion. If you’d rather just delete expired files, feel free to change that section to however you see fit.

The start function first checks the current URL to make sure that the base name is not in the “do not cache” list and either a) begins the cache process or b) loads the existing cache. The end function checks to see whether or not the page is being cached and if so, creates the static file and updates the cache log file.

The last two functions are used for deleting cache files. The purge function takes a location (full URL for now) and marks it for deletion, while the purge_all function marks all files for deletion. When a file is marked for deletion, the next time a user visits that page the script will create a fresh cache file (it will not be deleted in advance, simply overwritten).

How to Use the Cache Class

Using the cache class is very easy! Just call the start function at the part of your script where you’d like to start caching and the end function wherever the cache ends. For me personally, I tend to start caching after the header section (where I have dynamic elements, such as username and profile links) and end caching after the footer. I also make use of the doNotCache array to make sure my admin and profile pages are not cached. Lastly, I add the purge_all function to my admin save function, so that whenever I update the site the cache is cleared.

To start the Cache:

And to end the Cache:

Anything outside of the start and end functions are left alone, so be sure to cache wisely.

Conclusion

I wrote this class after having the need for really simple caching that didn’t require a bunch of other libraries to use. If this is useful for your project, I’d love to hear about it in the comments (it would make my day), and I really appreciate any feedback you may have! I know my PHP isn’t pro level (probably not even close) but I hope it’s good enough to use in small projects.

Lastly, if you haven’t subscribed to the RSS feed, please consider doing so to get more posts like this, and follow me on Twitter!

1. W3 Total Cache

This is perhaps the most critical plugin for any blog that gets a decent amount of traffic. W3 Total Cache (W3TC) allows you to:

• Cache your pages so they load much faster (not dynamically generated)
• Minify and compress your HTML, JavaScript and CSS files
• Use a Content Delivery Network (CDN) to quickly serve static media files from multiple subdomains

All of these features serve one purpose: to reduce page load times. Check any popular blog running WordPress and there’s a pretty good chance they are using W3TC (or their own custom caching solution).

2. All-in-One SEO

Search Engine Optimization (SEO) are a set of practices and techniques that help your website rank better in search engines, which in turn generates more traffic. The All-in-One SEO plugin makes your blog a little more SEO-friendly by allowing you to customize titles, keywords and descriptions (META data) for the overall blog and for each post.

Honorable Mention: Platinum SEO Pack – I’ve been told this is just as good (if not better) than All-in-One SEO Pack, however I have not tested it yet personally.

3. Contact Form 7

Ever wanted an elegant, AJAX-powered contact form for your blog? Contact Form 7 makes it super simple to get one up and running within minutes, just customize the form in the administration panel and paste the code in any page or post.

My favorite part about this plugin is that you can create multiple custom forms and do so very quickly using their intuitive backend interface, it’s simple but very effective.

4. WP Greet Box

I’ve just recently installed this plugin (I know, I’m late!) but it’s easily part of the essential plugins list. WP Greet Box displays a custom greeting for users that arrive to your blog posts from a recognized referrer, such as Google, Digg or Reddit. The default install includes greetings for over 30 popular services however you can also add a custom greeting for any referring URL manually.

If you’d like to test this out, search for ‘SliderNav’ on Google and the first result should be a jQuery plugin I wrote a while back. Clicking on it will take you to the post but soon after you should see a box appear under the title that has a Google logo, a link to my RSS feed and the option to display a few other related posts. Very useful for keeping users engaged!

5. Yet Another Related Posts Plugin (YARPP)

At the bottom of every post I write, you’ll find a list of related posts. This is courtesy of YARPP, a related posts plugin with a high level of customization and display options. In my opinion, you should always try to have a list of related posts immediately after your post, as it will help increase user engagement and strengthen your readership, and this plugin makes it easy to do exactly that.

6. Subscribe to Comments

In my opinion, WordPress should integrate this feature into the core – it’s a simple addition that can have a meaningful impact on reader discussions. Subscribe to Comments adds a checkbox beneath your comment form that if checked will send an e-mail notification each time someone comments on the post. It’s especially useful for posts in which the reader expects the author to respond or wants to follow an active/heated discussion.

7. Google Analytics for WordPress

As the name suggests, this plugin by Yoast allows you to add Google Analytics code to your blog. You may be thinking ‘well, I can easily do that by editing my theme templates!’ and you would be correct. However, you’d have to edit every theme you use with your personalized analytics code and that can be pretty annoying. It makes much more sense to use a plugin that allows you to embed any analytics code on any theme without having to manually change files – this keeps things organized, systematic and efficient.

8. Popularity Contest

Alex King’s Popularity Contest is by far the best plugin to determine which posts and pages are popular based on a number of customizable criteria, including views (from multiple sources), comments, pings and trackbacks. It also provides a customizable function to display your popular posts in whatever format you’d like.

You can see the plugin in action in the sidebar to the right, under Popular Articles.

9. Google XML Sitemaps

As I mentioned in a previous post, submitting your XML Sitemap to Google can be crucial in improving the number of pages indexed by the search engine. Unfortunately, WordPress doesn’t generate an XML sitemap by default. Thankfully, there are multiple plugins available that take care of this (of which I prefer this one).

10. Akismet

This isn’t higher up on the list because this plugin is included by default in every WordPress install. If you haven’t used or activated it yet, stop whatever you’re doing and make it your first priority to do so. Even on a fairly small blog like this one, Akismet has prevented more than 2000 spammy comments from being posted. It is by far the most useful WordPress plugin, hence it’s inclusion with the core package.

Parting Thoughts

Since I use these plugins in just about every WordPress install I do, it would be nice to have a plugin that downloads and installs them in one shot. Does anyone know of a plugin that does this? If not, it seems like it could be very popular, at least in the web design/development circle.

Are there any other plugins you consider essential? Share them in the comments!

So one thing is clear: you want/need your own website. But how do you go about making one? Where do you even start? Whether it’s for your business, personal blog or any obscure reason, understanding how the web works and establishing an online presence is crucial in today’s high-tech world.

Understanding the Web and How Websites Work

According to Wikipedia, a website can be defined as a “collection of related web pages, images, videos or other digital assets that are addressed relative to a common Uniform Resource Locator (URL).” Simply put, it’s a collection of internet-accessible files stored somewhere and identified by an URL/address. Let’s take a look at some more definitions first:

• HTML – HyperText Markup Language, the name of the syntax/code used to create web page files (usually ending in .html)
• Host – A host makes your files accessible on the web by storing your files on a server/computer and providing a persistent internet connection
• Web Server – The actual machine or piece of hardware where your files are stored (usually by your host)
• IP Address – The numerical address of your Web Server; All computers connected to the internet have an IP address, even yours
• Domain Name – The actual address of the website, ie www.mydomain.com
• Registrar – The company that has permission from ICANN to sell domain names, like GoDaddy
• DNS – Domain Name Servers, used to connect a domain name to a host/server

Now that we have a basic understand of the terms involved, let’s take a look at how they are connected. A website is a collection of HTML files and digital assets (images, scripts, videos, etc.) stored on a web server (provided by a host) that makes it accessible by anyone via a persistent internet connection. How do you find that website? Using a domain name, which is the online address of your website. The domain name is purchased from a domain registrar and before it can be used, it must point to the correct domain name servers that correctly directs traffic to your web server’s IP address. It may sound a bit convoluted at first but thinking about it in simpler terms might help to better grasp the concept:

In the above diagram, the green arrow represents the request you make when you enter a URL into your browser and the blue arrow represents the response sent back. What’s important to note is that many hosts offer all of these services, so from one server you can get hosting (web server access) for your files and complete domain name setup.

Further Reading:

1. Wikipedia Article on Websites
2. HowStuffWorks: How Web Pages Work
3. How Websites Work by Quackit

Creating Your First Website

Now that you have an understanding of how websites work, it’s time to create your first web page. The below steps will take you through the entire process, from picking a domain name to uploading your files.

1. Picking the Right Host

This can be a bit complicated depending on your needs but for nearly all starters, a simple shared hosting plan is enough to host a basic website. I suggest Media Temple’s Grid Service to most of my clients and Host Gator to those feeling a little cheaper. Both providers have been around for a long time and are fairly consistent in their services.

2. Getting a Domain Name

There are many providers that offer domain names for a variety of prices. In reality, they are all resellers for ICANN and whoever sells the most can usually offer the cheapest prices. Personally I use GoDaddy because they are one of the cheapest (use CHRIS3 coupon during checkout for $7.95 domains) but their website feels a bit spammy. Throughout the entire purchasing process, they’ll suggest purchasing a million of their other services (including hosting) but I would personally advise against those.

3. Configuring Your DNS

When you register for your domain name, you’re given the option to edit it’s DNS information. If you skip this, you can find it (at least in GoDaddy) under Manage Domains by checking the relevant domain name and selecting Set Nameservers from the top menu. Enter the addresses of the DNS servers your host provided when you signed up with them to let GoDaddy know where to send visitors when they enter your URL.

4. Creating a Basic Web Page

As I mentioned earlier, HTML provides the backbone for web pages. In fact, you can right-click on any website and click View Source to see the HTML code that is powering the site. While it may look daunting at first, HTML is not really that complex and can be learned within a few days with some patience. On your desktop, create a blank file and call it index.html, then enter the following HTML into it:

The above code will produce this, a simple white page with the words ‘Hello Word’ written on it. HTML is all about tags that must be opened and closed. Every page should have a head section with a proper title, this is the text that is visible in the title bar of your browser. The body section is where any content you want shown on the website itself should go – in this example we have a simple paragraph (<p>) with that contains the ‘Hello World’ statement. Also note that each tag must be closed properly and in the correct order.

5. Upload and Sit Back

Now that you have your first web page ready, you need to get it online by uploading the file to your web server. This is done using an FTP, or File Transfer Protocol, program like FileZilla (OS-independent) or WinSCP (Windows only). When you signed up for your host, you should have received an e-mail that contains an FTP address, usually ftp.mydomain.com, and some login credentials. Start the FTP program, enter your credentials and transfer the index.html file from your computer to the public_html folder (or sometimes www) on your web server.

Congratulations! Your Website is Now Online

If you have properly configured your host, purchased a domain name and set your DNS information, entering your URL into a browser should load up your Hello World page.

Make it Better With Open Source Software

The example above is too simple for any practical use and chances are, you want something that looks nice and has more functionality. While I would definitely recommend learning as much about building websites as you can first, there are a few ways to get a nice website up very quickly and with limited knowledge. Open source software makes this possible, there are literally hundreds of blogging platforms and content management systems that you can install to have a very complete website running in minutes.

Most of these scripts require the minimum of PHP and MySQL, both of are included in 99% of shared hosting services. Create a database, upload the script and point your browser to the install file, the rest is taken care of automatically. The best part is that open source software is completely free to use, so definitely check it out.

A Few Open Source Options:

1. WordPress Blogging Software
2. phpBB Forum Software
3. FrogCMS Content Management System

Conclusion

This article is meant to be a very basic introduction into the very big world of web development. It’s meant for my friends who have always expressed interest in creating a website but don’t have the time to invest in learning to make one. Feedback is appreciated and comments are always welcome!

Also remember to subscribe to the RSS Feed and follow @ThinkDevGrow on Twitter!

A honey pot trap involves creating a form with an extra field that is hidden to human visitors but readable by robots. The robot fills out the invisible field and submits the form, leaving you to simply ignore their spammy submission or blacklist their IP. It’s a very simple concept that can be implemented in a few minutes and it just works – add them to your contact and submission forms to help reduce spam. I’ve used them extensively in my last few projects, I’ve found it to be well worth the small time investment.

Contact Form Example

Here is an example of a simple contact form that uses the honey pot spam prevention method:

The HTML:

The PHP:

The CSS:

In the above example link, I added some optional CSS to make it look a little nicer. Also, you’ll notice the actual e-mail form doesn’t work, as the to e-mail address is a fake one. The contact form part is just to illustrate the honey pot, the important thing to notice is that the last text field is hidden using CSS (the entire paragraph) and that if text is entered in the field, the entire form fails.

Conclusion

This concept is certainly not my own and in fact, there is even an entire project dedicated to catching spammers using dummy forms and blacklisting their IP addresses (rightfully called Project Honey Pot). Again thanks to Aaron for reminding me about this technique, I’ve been meaning to do a write up on it for a while now. This post is also thanks to Forrst, I’m quite pleasantly surprised at the amount of interesting information I’m finding there.