Ruby on Rails became a popular web application framework because of how easy it promotes the rapid prototyping methodology used by web developers in rapid development.

Of course, being an open source project also helped Ruby on Rails establish itself as one of the most popular web development tools as well.

New developers often get caught up working with PHP over Ruby on Rails because so many applications are built using the PHP language like WordPress, Joomla, Wikipedia and others.

Because of its popularity, PHP has become one of the most popular “tools” for web developers and Ruby on Rails is often overlooked as a result. However, it is a bit unfair, and ignorant, to compare PHP to Ruby on Rails since one is an actual programming language (PHP) and the other is framework (Ruby on Rails).

To level the playing field, let’s take a look at some of the best sites built with Ruby on Rails:

1. Basecamp

The project management site that started the Ruby on Rails phenomenon.

2. Scribd

Using Ruby on Rails to help the world read, discover and share.

3. Hulu

One of the most popular places to watch your favorite TV shows, movies and Internet videos.

4. CrunchBase

The go to database for the tech companies, people and investors.

5. Slideshare

Share your slide shows with the world to educate, inform and even market your company, products or anything else.

6. Funny or Die

Will Ferrell and team’s humor site.

7. Zendesk

This customer support site turned to Ruby on Rails to help organizations better connect with their customers’ needs when it comes to support.

8. Github

Collaborative social coding hub for to better organize teams.

9. Yellow Pages

The online directory that replaced the phone book and saved millions of trees.

10. MedHelp

Online community focused on health and medical issues.

11. OneHub

Online collaboration portal for sharing files and managing your web development projects.

12. Freckle

Time tracking made simple with Ruby on Rails. Use this as a developer to track time spent on projects or look to it for inspiration.

13. Chowhound

Home to the popular food based message board where visitors can share tips related to dining, eating and food shopping in a local area.

14. Bleacher Report

Want to see how RoR can be used to develop a site that leverages user created content, look no further than Bleacher Report. This site allows users to upload articles and slideshows for other visitors to read and comment on.

15. Corkd

Some sites developed with Ruby on Rails are just for fun. Corkd is a social network connecting wine lovers from all over the web.

16. CrazyEgg

Better user experience comes from testing and data. CrazyEgg creates a heat map of your site showing where users have clicked so you can develop sites that visitors find useful.

17. Get Satisfaction

Allowing businesses to build communities where customers can speak up and businesses can build better products. Lean start-ups find this site especially useful for developing products based on their customer’s needs.

18. Jobster

Turning to the power of Ruby on Rails, Jobster allows visitors to search all of the different job site at once.

19. Twitter (in the early days)

One of the biggest social networking sites there is and probably the most famous of all RoR sites. Twitter has since abandoned Ruby on Rails citing concerns with scalability.

20. 43Things

The largest goal setting community to help people set and meet their goals while being encouraged by other members.

If you have any you think that I left off this list, please feel free to include your thoughts in the comment section!

...

Web developers are hired to make things work on a web site. SEO is often considered an afterthought that is often someone else’s responsibility.

However web developers can do quite a bit to help, or harm, a company’s optimization efforts.

To help visitors find web sites more easily, many organizations are bringing SEO professionals in during the planning phase of a new website.

If you are working without the input of someone who specializes in SEO, these tips can help guide you along the path to search engine bliss.

Basic Little Things

While you may be a highly skilled web developer, you may not be well versed in the word of search engine optimization. If you think that filling the meta keyword tag or jamming a keyword into the first 100 words as often as possible will help your site, keep reading.

If you are familiar with some basic SEO techniques, stay tuned. Part two will get a bit more advanced.

Keyword rich folder structure

When laying out the plans for a new website many developers use folders as a way to better organize files but nothing more. An SEO will actually take this opportunity to get the targeted keywords in front of the search engines once again.

For example, if a company is targeting the keyword kids’ shoes it may be natural for the developer to place all pictures of children’s shoes into an images folder. However, if the folder were named, kids shoes pictures it gets the keyword into the URL another time. For example, www.domainname.com/kids-shoes-pictures/red-hitops.png is much more search engine friendly than www.domainname/images/img0122.png. The search engine won’t know what you are referring to in the latter file.

This should be applied to other files as well, not just images.

A distant cousin of this tip is to make sure that your URLs are search engine friendly. Some applications, like WordPress, have a default permalink that looks a little like this: http://www.domainname.com?p=123. That says little about that page to your visitor and even less to the search engines. Be a nice person and make sure that your website’s URLs are a bit friendlier.

NB – Do not overdo it when it comes to your URLs. Long overly long URLs with parameter/value pairs are not good for SEO and not well liked by humans either.

Bad Image Optimization

Most websites and blogs are filled with images because they really make a site stand out. Unfortunately most developers miss out on yet another way they can help their site’s search engine ranking.

For a test, go to Google images and search for some pictures on any topic you choose. Note how many of these images have file names that are just a string of letters and/or numbers. Probably quite a few. There are even more, I am sure, that use only a single word as the file name.

Using targeted keywords when naming images to be used on your sites can certainly help improve on how favorably the search engines view your site. As can the alt tag. Using a good description for your alt tag, that contains your keywords, will help your website’s usability and optimization.

Too Much HTML, Too Little CSS

Most developers have moved out of the nineties and use CSS to design the aesthetics of a website. However, there are times when HTML is used in lieu of a style sheet and it shouldn’t. Ever.

When a search engine spider crawls a website, it sees CSS as the design elements of the site and HTML as the content elements. If HTML is used for both, the search engines get confused.

Oh, and there are people who advise using CSS to hide keywords in things like headings so that you can use an image with the text in it. The thought is that you get the cool design that goes along with the image without losing the SEO benefit of keywords in the content.

Never. Never. Never. Never hide keywords using CSS or anything else. Even if you have the best intentions this is one of the oldest black hat SEO tricks in the books and the search engines don’t look to kindly on this practice.

In part two of this series we will look at the more intermediate SEO tips you can apply to help make your site a friend of the search engines.

...

HTML5 has made her presence felt around the Internet since its launch.

HTML5 has been helping webmasters to clean up their code by utilising newly introduced features of the same. It won’t be possible for me to touch base with every HTML5 feature, but I will be listing down some of those during the course of this tutorial.

Forms are an integral part of any website that wants its visitors to get in touch with the owner of that website. They bridge the gap virtually between the webmaster and the website visitor.

Here, we will implement a very basic combination of HTML5 with CSS and PHP in order to create a contact form. You might have created a lot of contact forms but our purpose here is to do the same using the appreciable features of HTML5. Let’s do it!

Note: The code below will work with most of the Internet browsers that are being widely used as of today.

Our Goal

For starters, you must have an idea of what we are going to create. It will be a simple contact form as shown below:

Catching up with HTML5

Without further discussions, let’s create our first index.php file. Please be aware that you will require a web server to test index.php file. Explaining the setup of same is out of the scope of this tutorial.

The very initial index.php will look like this:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>My Contact Form</title> </head> <body> <header class="main"> <h1>My Contact Form</h1> </header> <section class="main"> [Form code goes here] </section> </body> </html>

See any differences from your regular html code?

Well, there are few. Let me explain each of them:

The cleanest ever DOCTYPE -In case you haven’t noticed, the above HTML5 code boasts of a very clean DOCTYPE tag. If you have worked with earlier versions of HTML5 then you will understand what I mean and why am I emphasizing on it. If you haven’t seen the DOCTYPE tag before then ignore this and move on. The <header> and <section> tags – Ever used these tags in earlier versions of HTML? Well, now you can and avoid the usage of div tags. Both the tags have been assigned a class “main” so that I am comfortable styling them as I want using my style.css. HTML5 also has a <footer> tag which will be used (obviously) for footer of your webpage.

The Form:

Now, lets talk about the code that will shape our form (the very purpose of this tutorial). The below code will be placed in our section tag (unless you are planning to push your form to the header or footer section of your webpage.)

<form> <label>Your Name:</label> <input name="name" placeholder="Goes Here"> <label>Your Email:</label> <input name="email" type="email" placeholder="Goes Here"> <label>Your Message:</label> <textarea name="message" placeholder="Goes Here"></textarea> <input id="submit" name="submit" type="submit" value="Submit">...

There was a time when Netscape and Internet Explorer were the only browsers a web developer had to worry about.

But in those days, a website primarily consisted of some text, a few images and some hyperlinks. Remember, tables were still all the rage back then.

Nowadays a user may have a few different browsers to choose from, multiple computers running different screen resolutions, a tablet device and a smartphone. And websites, they are a bit more complex than the good old static days.

So to meet the needs of the different screen resolutions, varying browsers and many different devices used to view a website many developers turn to responsive web design. To get the most out of this approach The Heads Up Grid may be your best friend.

For the most part, developers have used tools like Photoshop for grid-based designs. This presents problems in a live browser since things don’t always carry over as planned. To alleviate issues that come up in complex page structure it is commonplace to turn to doing much of the design work in the browser with the help of Firebug.

At least it was for Jason Simanek. So he created The Heads Up Grid to make life a bit easier.

The Heads Up Grid is a tool built with HTML, CSS and JavaScript touted as “an overlay grid for in-browser website development”.

And when it comes to responsive design, it is the perfect tool.

Using The Heads Up Grid is simple to use. Start by downloading the file provided on the homepage and then uploading them to your web server. Next, define the following in the code provided:

Page units in pixels or percentage Column units in pixels or percentage Page width by number Number of columns by number Column width by number Gutter width by number The top margin for the page by number Row height by number

You then repeat the process for different browser widths you can set up multiple grids that are rendered based on the browser.

You can also set the left and right margins as well as whether or not the grid loads automatically.

<link href="headsupgrid/hugrid.css" type="text/css" rel="stylesheet" /> <script src="headsupgrid/jquery-1.6.2.min.js"></script> <script src="headsupgrid/hugrid.js"></script> <script type="text/javascript"> definegrid = function() { var browserWidth = $(window).width(); if (browserWidth >= 1001) { pageUnits = 'px'; colUnits = 'px'; pagewidth = 960; columns = 6; columnwidth = 140; gutterwidth = 24; pagetopmargin = 35; rowheight = 20; makehugrid(); } if (browserWidth <= 1000) { pageUnits = '%'; colUnits = '%'; pagewidth = 94; columns = 2; columnwidth = 48; gutterwidth = 4; pagetopmargin = 35; rowheight = 20; makehugrid(); } if (browserWidth <= 768) { pageUnits = '%'; colUnits = '%'; pagewidth = 96; columns = 2; columnwidth = 49; gutterwidth = 2; pagetopmargin...

JavaScript earned popularity with web developers because of how responsive it is for users. Since it runs locally in the user’s browser, there is no waiting for the server-side computations to run.

And what you can do with JavaScript is pretty fascinating when it comes to dynamic page effects and user interactivity.

But even something as simple, and lightweight, as JavaScript can be improved upon. That is where the JavaScript frameworks come into play. Using these frameworks allows a developer to do more with less code through chaining and can speed up the development process by using code that already exists.

Below, you will find some of the most preferable JavaScript frameworks that can improve your skills as a web developer.

1. Script.aculo.us

Script.aculo.us is an add-on for prototype, a java frame work. Its job is to assist developers in creating dynamic websites. This add-on facilitates the developer with tranquil cross browser user interface java libraries such as animation, drag and drop, AJAX controls, etc. to create stunning websites and web apps in a jiffy just like those you would find on sites from IKEA, CNN and NASA.

2. jQuery

jQuery is a revolutionary JavaScript library. This succinct java script library is used by many popular web giants like Google, digg and Technorati, etc. JQuery simplifies HTML document traversing, event handling, animation and AJAX interaction for quick and smooth web development.

3. Dojo Toolkit

Get Dojo to create inspiring and powerful desktop and mobile apps. Create enterprise grade apps with grids and charts; or use dojo’s lightweight core to create animations, easy CSS syntax query and to manipulate the DOM. For mobile and desktop apps Dojo API contributes to HTML5 capabilities such as geolocations, touch screens and much more.

4. Sencha Ext JS4 Framework

Sencha Ext is a cross-browser JavaScript frame work used to build rich web apps. Generate touch charts embedded with gesture-based interactions, glossy animations and many other supple styling options to maximize data’s aesthetics and usability. Sencha.io is a cloud service that facilitates your ability to send data to mobile devices faster and with lower costs.

5. Prototype

A complete power packed JavaScript framework prototype is the codebase of choice for web app developers around the globe. Prototype features unique, easy to use toolkit for class driven development along with a full AJAX library.

6. Uize JavaScript Framework

Uize JavaScript is an open source framework that comes with a number of features. Uize is a server agnostic, totally user dependent and can be used on any platform and server language like Java (Apache Tomcat), C# (IIS / ASP.NET), Visual Basic (IIS / ASP), C/C++, Perl (Perl / Apache), PHP, Ruby (Ruby on Rails), Python, etc. Uize supports mobile devices and comes with built-in widgets slideshow, calendar, date picker, slider, marquee, dialog, menu, mag view and much more.

Uize is enriched with many JavaScript features such as animation, inheritance, events, modules, libraries, templates, widgets, localization, documentation, code compression, build scripts.

7. Qooxdoo

A universal JavaScript framework, aid you to create enormous applications on numerous platforms. It uses an object-oriented programming model which helps create innovative RIAs. Easily create interactive interfaces even if you do not have strong command over HTML and CSS. Qooxdoo supports developers with an advanced client server communication to develop an abstract transport layer that supports queues, timeouts and implementations via XMLHttpRequest, I-frames and scripts.

8. Zepto

Zepto is a compact JavaScript framework for mobile webkit browsers with a jQuery compatible syntax. It helps you focus more on your creation with a 2-5k library that handles the most basic work with a nice API.

9. DHTMLX Touch

The DHTMLX touch JavaScript framework is compatible with all major browsers for mobile platforms that support HTML5. DHTMLX Touch offers a complete set of frame works that allows developers to create striking and vigorous web applications for mobile and touch devices like the iPhone, iPad and Android etc.

10. YUI Library

This industrial strength JavaScript library was built by Yahoo! front end engineers and global contributors. Offering a scalable, fast and robust library with complete set of JavaScript, CSS utilities and controls, YUI is another free library developed under BSD license. YUI comes in handy to help developers build rich and interactive web apps using DOM scripting, DHTML and AJAX techniques.

11. SPRY JavaScript Framework

SPRY is especially for those who do not consider themselves a JavaScript guru.

Any server-side technology (ColdFusion, PHP, ASP.Net, etc.) is compatible with Spry and working with it is so easy that anyone with basic web development skills can create cool, robust web apps.

12. Moo Tools

MooTools is a squashed, modular JavaScript frame work using the precise Object-Oriented approach helpful for the intermediate to advanced JavaScript developer. Its well documented, elegant and coherent API allows developer to write cross browse, powerful and flexible code. MooTools code undergoes with strict standard compliance and doesn’t throw any warnings. It’s extensively documented and has meaningful variable names.

13. SproutCore

SproutCore is a great example of an open source framework for building mind boggling and innovative web apps that create a great user experience. Using the power of HTML5 to leverage the latest web technologies, SproutCore is also compatible with all browsers.

All these frameworks are for those adventures developers who keep on exploring new tools in the JavaScript arena. YUI, JQuery and Prototype are probably the famous one, but the rest are there yet to explore.

...

jQuery has quickly become one of the most popular JavaScript libraries out there today. One of the main reasons is because of how efficient it is because when using it, developers are able to write less code.

jQuery is also great tool for creating animations and effects for your websites, UI’s etc. It gives us the ability to add many of the things we want out of JavaScript without bloated code.

Let’s look at the anatomy of a basic jQuery statement.

First thing we see is a dollar sign. The dollar sign represents jQuery. If you’re familiar with WordPress, it uses jQuery in what’s called “no-conflict” mode. Statements normally look like this:

jQuery(".myDiv").fadeIn("slow"); jQuery(".myNextDiv").css({display:"none"});

No-conflict mode is used if you’re using other libraries. The dollar sign might mean something else in another library so no-conflict mode is advised. Now that we know what the dollar sign represents let’s move on to the next section. Next up is the selector; simply put the selector can be any element in your HTML document. In JavaScript there are only two ways to select objects.

document,getElementById document.getElementsByTagName

The former being limited to only elements that had id’s, the latter being too general in it’s selection at times.

In jQuery we can select any element available to us. This is something developers always wanted from JavaScript; being able to select any element without having to create extra unwanted id’s just for functionality. jQuery helps to keep our code as semantic as possible.

Next there is a dot that connects the next section we’ll talk about; functions and callbacks. It’s pretty much a given that if we’re creating a jQuery statement, we’re going to do something. Hence we need some sort of function; to probably hide something, fade it in, add extra HTML markup etc. those are all some sort of function.

These functions can also have extra parameters or options. Lets look at the anatomy of jQuery again and pay closer attention to the function. We are fading in a div and telling it to fade it in slowly. That slow written in quotes is a parameter or option. Using parameters are optional, as are callbacks but they give you as the developer more control instead of sticking with the preset. Now let’s talk about callbacks.

A callback is simply a function that is executed after the function that called it is completed. In our case, we could for example after our div has faded in create an alert saying “You just faded in this div!”. Here are the two basic approaches:

$(".myDiv").fadeIn("slow", function(){alert("You have just faded in this div!");}); $(".myDiv").fadeIn("slow", alertMe);

The first method is an anonymous function with the alert inside of it. This is the method I use most of the time as I never find an instance that I use the same callback for different functions.

If you are more comfortable with the latter, then approach number two is better. Your callback is just a function you have already created. Ensure that your function is created before the callback is executed or you’ll encounter an error, another reason why the anonymous function is used a lot. You will not encounter that error if you’re using an anonymous function. Which one you choose to use is up to you.

Now that we better understand statements, we need to find the most efficient way that our jQuery code runs when all the components have loaded; the document, scripts etc. Javascript developers will be familiar with the onload event. jQuery has something better, the ready event.

This is how we set it up:

$(document).ready(function() { //All our jQuery code inside here })

Let’s use our understanding of the anatomy of a jQuery statement. We are selecting the document, if the document is ready we execute our code. This is the best way of ensuring that our scripts run when and only when the document is ready.

Now that you understand the anatomy of a jQuery statement and how to execute it properly you can use it as an alternative to writing JavaScript on your own in many instances.

For full documentation on the jQuery library, go to http://docs.jquery.com/.

...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site.

WordPress Firewall 2

Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one of the best security tools you can use to protect against vulnerabilities in web applications like SQL injections, cross-site scripting and PHP injections.

Ideally, this should be the first plug-in you activate on your WordPress site because not only will it protect WordPress against directory traversal attacks, SQL injections, remote code injection and executable file uploads, but it will also help stop any of these attacks from being launched against most other plug-ins.

AskApache Password Protect

Many attacks nowadays are automated using robots that exploit the different known security holes that exist in web applications, like WordPress.  The robots are programmed to seek out vulnerable websites and launch their specific attack. They continuously scour the Internet looking for new targets. When they come across a 403 Forbidden status they move on to the next available target because they know their exploit will not work here. To achieve this, a .htpasswd file needs to be created with a username and password can be created to protect your wp-admin, wp-includes, wp-content, plugins, etc. from these bots.

The AskApache Password Protect plug-in creates this file for you and encrypts the password. It also offers you the flexibility of managing security modules right from the WordPress Admin Panel.

WP Security Scan

A security audit can easily cost over $40,000 to have professionals run automated scans against your website looking for vulnerabilities and then test each piece of exploitable code that is found by hand. Most web developers don’t have an extra forty grand laying around to spend on a security audit.

Luckily, the WP Security Scan plug-in can help them find possible vulnerabilities that exist in:

Passwords File permissions Database security WordPress admin

This plug-in also removes the WP Generator META tag and hides the version of your WordPress software1.

BackUp WordPress

This post isn’t just about keeping the bad guys out but also about protecting what you have. That’s why I included this plug-in.

BackUp WordPress will backup up everything on your WordPress site protecting all of your files and the database using either a zip file or mysquldump. By default the backup will run once a day and store the last 10 days of files in the wp-content/backups directory. You also have the option to instruct the plug-in to send the backup files to you via email for more secure storage.

While this plug-in is extremely simple to configure and use, it also has plenty of options for more advanced users as well.

One thing to note – regularly test your backups by restoring your files on a test server or dummy WordPress installation. There is nothing worse than having to restore data only to find out that the backups were not configured properly.

Secure WordPress

From the makers of the WP Security Scan plug-in comes the last of our essential security add-ons for any site running WordPress.

Secure WordPress removes all of the extra information and services that can give a human attacker too much useful information about your site and the software you are running. Some of the things that this plug-in disables are:

The error-information provided at the login page The wp-version1 on the frontend and in the dashboard for non-admins Really Simple Discovery Windows Live Writer capabilities Any reference to the version on URLs from scripts and stylesheets in the frontend Plug-in and theme update information to non-admins

There are many other plug-ins that can be used in addition to, or in place of, the ones mentioned here. Just remember that with any plug-in, make sure you trust the developer. You could be installing something that promises to be the panacea of blog protection only to later find out it was nothing more than malware designed to open your site to attack.

1. Removing the current version of WordPress from your site is a security tactic that is the cause of some really interesting debate. The theory behind it is that it makes it harder for a human attacker to know what vulnerabilities exist on your site. In theory this makes sense, but security through obscurity should not be the only line of defense.

Additionally, you should be running the most recent version of WordPress on your blog to ensure that vital security patches are in place so it should be rather easy for an attacker to guess what version you are running.

...