Hossein Zahed

Web Developer, Entrepreneur, Software Educator

What technical details should a programmer of a web application consider before making the site public?

The idea here is that most of us should already know most of what is on this list. But there just might be one or two items you haven't really looked into before, don't fully understand, or maybe never even heard of.

Interface and User Experience

  • Be aware that browsers implement standards inconsistently and make sure your site works reasonably well across all major browsers. At a minimum test against a recent Gecko engine (Firefox), a WebKit engine (Safari and some mobile browsers), Chrome, your supported IE browsers (take advantage of the Application Compatibility VPC Images), and Opera. Also consider how browsers render your site in different operating systems.
  • Consider how people might use the site other than from the major browsers: cell phones, screen readers and search engines, for example. — Some accessibility info: WAI and Section508, Mobile development: MobiForge.
  • Staging: How to deploy updates without affecting your users. Have one or more test or staging environments available to implement changes to architecture, code or sweeping content and ensure that they can be deployed in a controlled way without breaking anything. Have an automated way of then deploying approved changes to the live site. This is most effectively implemented in conjunction with the use of a version control system (CVS, Subversion, etc.) and an automated build mechanism (Ant, NAnt, etc.).
  • Don't display unfriendly errors directly to the user.
  • Don't put users' email addresses in plain text as they will get spammed to death.
  • Add the attribute rel="nofollow" to user-generated links to avoid spam.
  • Build well-considered limits into your site - This also belongs under Security.
  • Learn how to do progressive enhancement.
  • Redirect after a POST if that POST was successful, to prevent a refresh from submitting again.
  • Don't forget to take accessibility into account. It's always a good idea and in certain circumstances it's alegal requirementWAI-ARIA and WCAG 2 are good resources in this area.
  • Don't make me think

Security

Performance

  • Implement caching if necessary, understand and use HTTP caching properly as well as HTML5 Manifest.
  • Optimize images - don't use a 20 KB image for a repeating background.
  • Learn how to gzip/deflate content (deflate is better).
  • Combine/concatenate multiple stylesheets or multiple script files to reduce number of browser connections and improve gzip ability to compress duplications between files.
  • Take a look at the Yahoo Exceptional Performance site, lots of great guidelines, including improving front-end performance and their YSlow tool (requires Firefox, Safari, Chrome or Opera). Also, Google page speed (use with browser extension) is another tool for performance profiling, and it optimizes your images too.
  • Use CSS Image Sprites for small related images like toolbars (see the "minimize HTTP requests" point)
  • Busy web sites should consider splitting components across domains. Specifically...
  • Static content (i.e. images, CSS, JavaScript, and generally content that doesn't need access to cookies) should go in a separate domain that does not use cookies, because all cookies for a domain and its subdomains are sent with every request to the domain and its subdomains. One good option here is to use a Content Delivery Network (CDN), but consider the case where that CDN may fail by including alternative CDNs, or local copies that can be served instead.
  • Minimize the total number of HTTP requests required for a browser to render the page.
  • Utilize Google Closure Compiler for JavaScript and other minification tools.
  • Make sure there’s a favicon.ico file in the root of the site, i.e. /favicon.icoBrowsers will automatically request it, even if the icon isn’t mentioned in the HTML at all. If you don’t have a /favicon.ico, this will result in a lot of 404s, draining your server’s bandwidth.

SEO (Search Engine Optimization)

  • Use "search engine friendly" URLs, i.e. use example.com/pages/45-article-title instead of example.com/index.php?page=45
  • When using # for dynamic content change the # to #! and then on the server $_REQUEST["_escaped_fragment_"] is what googlebot uses instead of #!. In other words, ./#!page=1 becomes ./?_escaped_fragments_=page=1. Also, for users that may be using FF.b4 or Chromium, history.pushState({"foo":"bar"}, "About", "./?page=1"); Is a great command. So even though the address bar has changed the page does not reload. This allows you to use ? instead of #! to keep dynamic content and also tell the server when you email the link that we are after this page, and the AJAX does not need to make another extra request.
  • Don't use links that say "click here". You're wasting an SEO opportunity and it makes things harder for people with screen readers.
  • Have an XML sitemap, preferably in the default location /sitemap.xml.
  • Use <link rel="canonical" ... /> when you have multiple URLs that point to the same content, this issue can also be addressed from Google Webmaster Tools.
  • Use Google Webmaster Tools and Bing Webmaster Tools.
  • Install Google Analytics right at the start (or an open source analysis tool like Piwik).
  • Know how robots.txt and search engine spiders work.
  • Redirect requests (using 301 Moved Permanently) asking for www.example.com to example.com (or the other way round) to prevent splitting the google ranking between both sites.
  • Know that there can be badly-behaved spiders out there.
  • If you have non-text content look into Google's sitemap extensions for video etc. There is some good information about this in Tim Farley's answer.

Technology

  • Understand HTTP and things like GET, POST, sessions, cookies, and what it means to be "stateless".
  • Write your XHTML/HTML and CSS according to the W3C specifications and make sure they validate. The goal here is to avoid browser quirks modes and as a bonus make it much easier to work with non-traditional browsers like screen readers and mobile devices.
  • Understand how JavaScript is processed in the browser.
  • Understand how JavaScript, style sheets, and other resources used by your page are loaded and consider their impact on perceived performance. It is now widely regarded as appropriate to move scripts to the bottom of your pages with exceptions typically being things like analytics apps or HTML5 shims.
  • Understand how the JavaScript sandbox works, especially if you intend to use iframes.
  • Be aware that JavaScript can and will be disabled, and that AJAX is therefore an extension, not a baseline. Even if most normal users leave it on now, remember that NoScript is becoming more popular, mobile devices may not work as expected, and Google won't run most of your JavaScript when indexing the site.
  • Learn the difference between 301 and 302 redirects (this is also an SEO issue).
  • Learn as much as you possibly can about your deployment platform.
  • Consider using a Reset Style Sheet or normalize.css.
  • Consider JavaScript frameworks (such as jQueryMooToolsPrototypeDojo or YUI 3), which will hide a lot of the browser differences when using JavaScript for DOM manipulation.
  • Taking perceived performance and JS frameworks together, consider using a service such as theGoogle Libraries API to load frameworks so that a browser can use a copy of the framework it has already cached rather than downloading a duplicate copy from your site.
  • Don't reinvent the wheel. Before doing ANYTHING search for a component or example on how to do it. There is a 99% chance that someone has done it and released an OSS version of the code.
  • On the flipside of that, don't start with 20 libraries before you've even decided what your needs are. Particularly on the client-side web where it's almost always ultimately more important to keep things lightweight, fast, and flexible.

Bug fixing

  • Understand you'll spend 20% of your time coding and 80% of it maintaining, so code accordingly.
  • Set up a good error reporting solution.
  • Have a system for people to contact you with suggestions and criticisms.
  • Document how the application works for future support staff and people performing maintenance.
  • Make frequent backups! (And make sure those backups are functional) Have a restore strategy, not just a backup strategy.
  • Use a version control system to store your files, such as SubversionMercurial or Git.
  • Don't forget to do your Acceptance Testing. Frameworks like Selenium can help. Especially if you fully automate your testing, perhaps by using a Continuous Integration tool, such as Jenkins.
  • Make sure you have sufficient logging in place using frameworks such as log4jlog4net or log4r. If something goes wrong on your live site, you'll need a way of finding out what.
  • When logging make sure you capture both handled exceptions, and unhandled exceptions. Report/analyse the log output, as it'll show you where the key issues are in your site.

Lots of stuff omitted not necessarily because they're not useful answers, but because they're either too detailed, out of scope, or go a bit too far for someone looking to get an overview of the things they should know. Please feel free to edit this as well, I probably missed some stuff or made some mistakes.

50 Must-have plugins for extending Twitter Bootstrap

Collections of Bootstrap Enhancements

We will start off with two collections of Bootstrap plugins that are the perfect companions to the framework.

Fuel UX

Fuel UX is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more.

Website | Github

Fuel UX

Fuel UX

Jasny

Jasny is another collection of useful interface components for bootstrap. It features controls like input masks, file upload buttons, icons, additional form styles and more. You can either get a version of bootstrap with all the changes integrated, or you can download them separately as plugins.

Website | Github

Jasny Bootstrap

Jasny Bootstrap

Galleries

It is worth noting that you can use any regular jQuery plugin with your bootstrap-powered website. This means that any of the galleries from our jQuery plugin collection will work perfectly fine. What these plugins won’t have though, is bootstrap’s design language and way of doing things. For this reason, check out these three plugins specifically created with bootstrap in mind:

Bootstrap Lightbox

Bootstrap does include a carousel, but it falls short when you need to show a photo in a lightbox. This is where the simple Bootstrap Lightbox plugin comes into play. All you need to do is add the required HTML to the page, and you get a pretty and responsive lightbox with an optional caption.

Website | Github

Bootstrap Lightbox

Bootstrap Lightbox

Simple Lightbox

Simple Lightbox is another lightbox plugin that is simpler that the one above. It requires only that you add a data attribute to the image and to initialize the plugin.

Website

Simple Lightbox

Simple Lightbox

Bootstrap Image Gallery

Bootstrap Image Gallery is a complete gallery solution for bootstrap. After you include the needed files in your page, you get a grid of images which open in modal windows. The gallery can also optionally go into fullscreen mode. Note that there is now an improved version of this plugin which drops the Bootstrap requirement, so you can use it in any project.

Website | Github

Bootstrap Image Gallery

Bootstrap Image Gallery

Dialogs and Notifications

Bootstrap comes with a good modal window implementation out of the box. These plugins make it even better.

Bootbox.js

Bootbox.js is a small JavaScript library that automates the process of creating bootstrap dialogs. It creates the needed markup for you, so all you have to do to trigger a bootstrap dialog is to call a function. It mimics the built-in browser dialogs like alert, confirm and prompt.

Website | Github

Bootbox.js

Bootbox.js

Bootstrap Modal

Bootstrap Modal extends the default bootstrap modal class. It makes the default dialogs responsive and adds the ability to load their content via AJAX automatically for you.

Website | Github

Bootstrap Modal

Bootstrap Modal

Bootstrap Growl

Bootstrap Growl is a jQuery plugin which turns Bootstrap’s notifications into pretty Growl-like alerts. Notifications can be heavily customized; you can choose the position on the screen, dimensions offsets and time to fade out.

Github

Bootstrap Growl

Bootstrap Growl

Bootstrap Notify

Bootstrap Notify is a user-friendly extension to bootstrap notifications. Like the growl plugin above, here you can also heavily customize every aspect of the notifications and where they are shown.

Website | Github

Bootstrap Notify

Bootstrap Notify

Forms

Forms are the necessary evil of web development. They may be tedious and boring to create and to fill in, but they occupy a very important place in our online interactions. Bootstrap brings a long list of enhancements to forms in terms of usability and presentation. It may not offer much else, but the plugins in this section do a great job at changing that.

Bootstrap Form Helpers

Bootstrap Form Helpers is an indispensable collection for enhancing web forms. It comes with 12 custom jQuery plugins that give you everything from date and time pickers, font lists, timezone, language and country fields and more.

Website | Github

Bootstrap Form Helpers

Bootstrap Form Helpers

Bootstrap Tags

Bootstrap Tags is a plugin which can enhance your search boxes by presenting the search terms as tags. The plugin also supports filters, placeholders, popovers and autosuggest as well as a full set of callback functions so you can hook it up with your code. Similar plugins are Tags Manager and Bootstrap Tag.

Website | Github

Bootstrap Tags

Bootstrap Tags

Bootstrap Switch

No mobile interface is complete without a iOS-like switch control, and Bootstrap Switch gives you a perfect implementation that fits nicely into the Bootstrap design language. You can customize the size of the control and the colors by assigning class names to the element. The plugin is really simple to set up, as it wraps around an existing checkbox.

Website | Github

Bootstrap Switch

Bootstrap Switch

Bootstrap Markdown

I’ve mentioned markdown on Tutorialzine before (we even made a lightweight blog system with it ). Bootstrap markdown makes it possible to add markdown editing functionality seamlessly to your projects.

Website | Github

Bootstrap Markdown

Bootstrap Markdown

Bootstrap Maxlength

Bootstrap Maxlength is a neat little plugin which detects the HTML maxlength property of a textfield, and displays an interactive counter of the remaining characters. It is a great addition to text boxes and text areas.

Website | Github

Bootstrap Maxlength

Bootstrap Maxlength

Bootstrap Select

Bootstrap favors native browser controls, which is the reason it doesn’t expose any customization options for them. However, in some projects it is useful to have customizable controls like select boxes, which is exactly what Bootstrap Select does. This plugin gives you a pretty and customizable select box which looks great in your page. For an alternative try with SelectBoxIt, or one of the other well-known plugins like Select2or Chosen.

Website | Github

Bootstrap Select

Bootstrap Select

Bootstrap Multiselect

And for select inputs without the multiple attribute, you can use Bootstrap Multiselect. The plugin creates an intuitive interface for using select inputs with the multiple attribute present. Instead of a select, a bootstrap button will be shown as a dropdown menu containing the single options as checkboxes.

Website | Github

Bootstrap Multiselect

Bootstrap Multiselect

Bootstrap WYSIHTML5

Bootstrap WYSIHTML5 is a beautiful rich text editor for bootstrap that comes in the form of an easy to embed JavaScript plugin. It gives you only basic functionality, but this will be fine for 90% of the use cases. For a bit more advanced editor, try this one or the insanely powerful TinyMCE.

Website | Github

Bootstrap WYSIHTML5

Bootstrap WYSIHTML5

Bootstrap Form Wizard

It is a good practice to split long forms into smaller, contextually similar chunks. This makes them a bit easier to handle. The Bootstrap Form Wizard does that for you and more.

Website | Github

Bootstrap Form Wizard

Bootstrap Form Wizard

jqBootstrapValidation

jqBootstrapValidation is a plugin that makes it easy to validate your Bootstrap forms. It is easy to include into your project and all the validation rules are described as data attributes on the input elements. If you need an alternative plugin, take a look at nod.

Website | Github

jqBootstrapValidation

jqBootstrapValidation

jQuery File Upload

jQuery File Upload is a very powerful and versatile file uploading plugin. See our tutorial about it here. The plugin is not strictly for bootstrap, but all the examples of their homepage use the frontend framework extensively.

Website | Github

jQuery File Upload

jQuery File Upload

Bootstrap Tag Autocomplete

Bootstrap Tag Autocomplete is a library which adds twitter and facebook-like mentions to your content editable text areas. It takes an array of available completions and inserts them as nodes in the text area on a match.

Website | Github

Bootstrap Tag Autocomplete

Bootstrap Tag Autocomplete

Date and Time Pickers

Your web application probably requires dates to be formatted in a specific way, and expecting people to manually type them in is a road that can only lead to frustration. The better approach is to have a widget which lets users simply click or tap on the date they need. The plugins in this category add such functionality to your Bootstrap forms.

Daterangepicker

Daterangepicker is a plugin for Bootstrap that is the perfect addition to your reports page. It lets users choose preset time periods like the last 7 or 30 days (you can define your own presets) and they can also choose an arbitrary time intervals. You only need to pass a few callback functions when instantiating the plugin, and you are ready to go. Check out a tutorial where we used this plugin to update a chart.

Website | Github

Daterangepicker

Daterangepicker

Bootstrap Timepicker

Bootstrap Timepicker is a pretty and touch friendly plugin that lets you turn text fields into time selection controls. It doesn’t have support for dates, but for that you can use one of the next plugins.

Website | Github

Bootstrap Timepicker

Bootstrap Timepicker

Clockface

Clockface is an alternative plugin to the one above. It presents the hours and minutes as text labels in a circle. While it is a bit ugly for my taste, I give it points for originality.

Website | Github

Clockface

Clockface

Bootstrap Datetime

Bootstrap Datetime Picker is a fully featured plugin that lets you turn a text field into a handy date and time picker control. The plugin is pretty and fits nicely with the framework’s design language. It is also fairly easy to customize with CSS. For an alternative check out this plugin.

Website | Github

Bootstrap Datetime

Bootstrap Datetime

Bic_Calendar

Bic_Calendar is a simple calendar widget that can show events loaded through AJAX. An example PHP script is included that outputs the events as a JSON object. The events are then displayed on the calendar and shown in a popup.

Website | Github

Bic_Calendar

Bic_Calendar

Color Pickers

Entering colors is another area that users need help with. You can’t simply think of a color and write down its hex value – you need to visualize it in some way. The plugins listed here help you alleviate this problem by creating color picker controls and swatches.

Pick a Color

Pick a Color is a bootstrap addon that shows an advanced color picker. You can choose colors by modifying one of the presets, by choosing a previously saved one, or generating a color by modifying the hue, saturation and lightness components.

Website | Github

Pick a Color

Pick a Color

Colorpicker for Bootstrap

Colorpicker for Bootstrap is a more traditional color picker – you get a Photoshop-like widget that lets you choose the main color and specific hues. I personally find this easier to use than the above plugin.

Website | Github

Colorpicker for Bootstrap

Colorpicker for Bootstrap

Color Palette

Color Palette is a Bootstrap plugin that displays a grid of color swatches when a text field is focused. The plugin is easy to integrate with your bootstrap project.

Website | Github

Color Palette

Color Palette

Tables

Bootstrap already offers basic table styles that do a great job with simple data. However, what if you’d like that data to be sortable, searchable and presentable on multiple pages? Read on.

Tablecloth

Tablecloth is a plugin that makes your tables pretty. It comes with a number of built-in styles, and it uses plugins like tablesorter internally to make the data in your tables sortable.

Website | Github

Tablecloth

Tablecloth

Data Tables

Data Tables is another table enhancing addon for Bootstrap. This plugin not only makes your tables sortable, but it also makes use of the framework’s pagination controls and makes the data searchable.

Website

Data Tables

Data Tables

Interface Enhancements

This section contains various plugins that enhance the interface of your web app.

jQuery Bootpag

jQuery Bootpag is an enhanced bootstrap pagination plugin. It is very easy to set up – you only have to pass a callback function and listen for the page event. Inside that function, you can update the container element with the content that you need.

Website | Github

jQuery Bootpag

jQuery Bootpag

Tocify

Tocify is a table of contents plugin. It scans your page on DOMReady, looking for headings, and creates a Bootstrap – styled table of contents dynamically.

Website | Github

Tocify

Tocify

Bootstrap Link Preview

Bootstrap Link Preview is a JavaScript library offering a Facebook-like preview for URLs. It is very simple to use and weighs just a few kilobytes. To work around the same origin policy it depends on a PHP script though.

Website | Github

Bootstrap Link Preview

Bootstrap Link Preview

Tab drop

Tab drop is a neat plugin that hides your tabs in a dropdown if they don’t fit in a single row. This can come handy when designing responsive sites that need to work on small screens.

Website

Tab drop

Tab drop

Flippant.js

Flippant.js is a tiny plugin that lets you flip elements to reveal further content with a smooth CSS transition. You can put any content on the back side – simply pass it as an argument to the function call.

Website | Github

Flippant.js

Flippant.js

Hover Dropdown

Another interface enhancement for Bootstrap. With the Hover Dropdown plugin you can activate the framework’s dropdowns on hover in addition to click. This can make for a better user experience with your site.

Website | Github

Hover Dropdown

Hover Dropdown

Social Buttons

Social Buttons is a collection of pretty social networking buttons built with Bootstrap and Font Awesome. This makes them very easy to scale and style.

Website | Github

Social Buttons

Social Buttons

Bootstro.js

Bootstro.js is a bootstrap plugin that lets you build a guided tour for new users. A tour consists of tooltips and overlays which explain the functions of your app. The plugin has plenty of options and callbacks, so it is easy to hook up with the rest of your code. For an alternative, checkout Bootstraptour.

Website | Github

Bootstro.js

Bootstro.js

AJAX

The Bootstrap extensions in this section handle inline editing of content with automatic syncing with your server, extend the framework with AJAX bindings and more.

X-editable

X-editable is a library that enhances Bootstrap with inline editing capability. Clicking an element that is set to be editable, will open up a bootstrap popup with a text field and buttons. In addition, it supports editing inline and has many different types of text controls including rich text editors and date pickers. On a successful edit, the plugin sends an AJAX request to your server.

Website | Github

X-editable

X-editable

Eldarion AJAX

With Eldarion AJAX you can extend bootstrap with automatic AJAX request handling. Simply add the ajaxclass to the button or link you wish to enhance, and the plugin will do the rest. It will send a request and replace the contents of the element with the response from the server. You can also submit forms in the same manner.

Website | Github

Eldarion AJAX

Eldarion AJAX

Typeahead

Typeahead is a library by twitter that offers a fast and fully featured autocomplete control for your site. It supports fetching autocomplete data via AJAX, caching, rate limiting and more. The most common selections are displayed as hints. The library is not dependent on bootstrap, but it can be easily integrated with it.

Website | Github

Typeahead

Typeahead

Conclusion

Bootstrap is a valuable addition to your web development toolbox. Knowing your way around the framework will let you build usable and responsive interfaces with ease. And with the plugins presented here, you can add advanced functionality that fits nicely with the rest of your site.

Scroll to top of page with jQuery

Due to cross browser oddness, some browsers will respond to 'html' and some to 'body'. And maybe its just my luck, but .scrollTop(0) has never worked for me to move the page. Give this a shot:

jQuery('html,body').animate({scrollTop:0},0);

This version is tested and cross browser for all desktop browsers, and mobile devices. You may also use these:

jQuery('body').scrollTop(0);

or this:

jQuery(window).scrollTop(0);

or finally this:

jQuery('html').scrollTop(0);