Tutorialzine

The Best Free Books, Videos, Tutorials and More for Learning jQuery

Martin Angelov — Thu, 16 May 2013 15:03:07 +0000

jQuery is undoubtedly the most popular JavaScript library on the web today. It is used by 70% of the top websites and is becoming a defacto standard in web development. If you are looking for a programming job, knowing the library is a big plus.

Things have progressed as well in terms of the quality and availability of teaching material. In other words, now is the best time to learn about web development! In this article, you will find a list of resources that I wish were around when I was starting out with jQuery and which I would recommend to every beginner.

First, Meet the jQuery Family

jQuery is a library that makes it easy to work with the DOM, listen for events, animate elements and issue AJAX requests among other things. However, do you know that the jQuery project actually supports three libraries which bare the name jQuery? These are:

The jQuery library. This is the library that people usually refer to when they say jQuery. This is also what the resources in this article are about. The other two libraries build upon it, with specific use cases in mind. There are two versions of jQuery as of this writing: 1.9.1 and 2.0. Version 2.0 drops support for older browsers like IE 6, 7 and 8, so I strongly suggest you download and use version 1.9.1 which works everywhere.
jQuery Mobile is a lightweight framework for building mobile web apps with HTML5. It lets you build ajax-driven and touch-friendly interfaces with toolbars, buttons, listviews and more, that will look and work consistently across mobile devices. This is a library that I can recommend learning after you get the basics of jQuery, as it builds upon it. Here is one of our tutorials to get you started.
jQuery UI. This is a collection of widgets like date pickers, dialogs, progress bars, effects and more aimed at interactive web applications. I feel that this library is losing mindshare as developers are flocking to more modern frameworks, which is why I would recommend learning Twitter Bootstrap instead.

The jQuery Family

So now that you know a bit more about the jQuery family, where do you start?

The First Steps

There has been a remarkable increase in the number and quality of free resources available for web developers in recent years. This is especially true for jQuery. Here is what you should start with:

JavaScript 101 is a good introductory article to JavaScript from the jQuery site. This is where you should begin if you aren’t familiar with the language. You can then continue with some of the free JS books included in the next chapter.
The jQuery Getting Started Guide is a good first step for the beginner. It explains basics like how you should include jQuery in your page, and how to write your first script.
Try jQuery is a very good interactive course with videos and code challenges that you can take for free.

Try jQuery

After you’ve whetted your appetite, you can read some of the books in the next chapter.

Free eBooks

Tutorials and blog posts are good to learn specific techniques but they aren’t much use if you are entirely new at something. This is what books are best at – they give you a complete and systematic overview of a technology, with examples and plenty of detail.

Franky you can’t learn jQuery without first knowing JavaScript, so here are a few books to get you started:

Eloquent JavaScript is a book that doesn’t only teach you JavaScript, but also the basics of programming. It is a great read for those who don’t have much experience with writing code.
Mozilla Developer Network’s JavaScript Guide is another good and succinct overview of the language.
JavaScript Enlightenment is a book that covers advanced concepts like closures, prototypes, complex values, inheritance and more. It is intended to be a short and digestible summary of the language.
Dom Enlightenment is from the same author, and gives you a deep understanding of the relationship between JS and the DOM. The examples will show you the powerful functionality jQuery uses behind the scenes to make your life easier.
Single Page Web Apps in Depth is a book that teaches you how to make your application feel almost native. You will learn about implementing collections, models and views in JS, synchronizing them with your backend, and writing maintainable code.
Learning JavaScript Design Patterns is a book that explores applying well-known design patterns in the software development world to JavaScript applications.
Patterns for Large-Scale JavaScript Applications is a more complex book that focuses specifically on organizing large code bases. Suitable only for experienced JS developers.

Eloquent JavaScript

And of course, here are some great free jQuery books:

jQuery Fundamentals is a must-read book for every jQuery beginner. It explains in depth all the major jQuery features, and has easy to understand examples that you can run directly in your browser.
jQuery Succinctly is a book that has been written to express the concepts essential to intermediate and advanced jQuery development. This is the perfect next step after the jQuery Fundamentals book above.
jQuery has a very good API documentation, full of example code, which is a book on its own right.

jQuery Fundamentals

[Hey, check our brand new jQuery Trickshots book, where you can learn 100 epic tips and tricks for working with jQuery!]

Courses and training

Courses also go a long way to explaining new concepts. They may include professionally edited videos with exercises and example code. Here are some of the best that are available for free:

Try jQuery. I already mentioned it, but it is included here again for completeness. This course includes videos, example code and excersises.
Lessons by appendTo() contains free video lessons on JavaScript, jQuery, events, methods and selectors.
Learn jQuery is the official learning portal for the library. Here you will find tutorials and articles suitable for beginners.
JavaScript interactive is a console-based crash course that involves writing code in your browser and passing challenges.
Learn jQuery in 30 Days is a free newsletter course by tutsplus. After subscribing you will receive a video lesson in your email every day for 30 days.
Learning Advanced JavaScript is a series of tips by jQuery’s creator John Resig.

Learn jQuery in 30 Days

Videos

Videos are a good and lazy way to learn about new programming topics. The presenter spoon-feeds you with tasty web development knowledge while you are comfortably sitting on your couch. What’s not to like!

Here are some of the best jQuery videos that you can watch right now for free:

jQuery for absolute beginners by Nettuts is getting rather old, but you can still learn some of the fundamentals of the library
Learning jQuery is a huge YouTube playlist with a series of screencasts that covers everything from the ready event to submitting forms with ajax.
Ontwik’s jQuery Videos is a growing collection of high-quality videos and lectures on many topics given on conferences around the world (seems to be down in the moment).
JSConf hosts a collection of videos from the popular JavaScript conference.
Fronteers videos this is the video collection of the Fronteers front-end conference. Some of their videos are in Dutch, but there are plenty of interesting English lectures.

Ontwik jQuery Conference Videos

Presentations

Presentations are like videos, but more concise and without a person standing in the way. Here are some of the most popular jQuery presentations:

jQuery in 30 minutes is a bit old but still interesting for beginners.
jQuery proven performance tips and tricks is a great collection of tips for optimizing your jQuery code.
jQuery Anti-Patterns is a presentation that explains how to properly organize your code and stay clear from anti-patterns that will make your application unmaintainable in the long run.
Using objects to organize your code is another presentation that is focused on code maintainability.
jQuery: It’s a library, not a framework reminds you that although jQuery gives you power, it doesn’t keep your code organized, which can pretty soon lead to a spaghetti code mess.
Things you might not know about jQuery was written for jQuery 1.4, but is also applicable to the latest versions of the library.

jQuery: It’s a library, not a framework

Tutorials and Blogs

Of course, tutorials have their place, and are a good choice once you’ve mastered the basics. Here are the best places to find jQuery tutorials:

Our own tutorial collection covers lots of jQuery goodness. We do all kinds of interesting things with the library and show advanced techniques. (Also all our PSDs are available for download from our free to join Member Area).
Nettuts has a large collection of jQuery tutorials. They’ve pretty much moved away from jQuery for their new stuff which is unfortunate.
jQuery Howto is one of the oldest jQuery blogs. They have covered pretty much everything about the library.
jQuery For Designers used to be a very popular tutorial website which unfortunately hasn’t been updated for a couple of years. Anyway the scripts there are useful even today (with the ocasional fix for jQuery 1.9).
Badass JS is a blog that presents awesome developments in the JavaScript world. Although not a tutorial site, the posts there often lead to in depth technical articles and interesting libraries.
DailyJS is another JavaScript/jQuery blog. You can find lots of new plugins here, and it is updated very often.

jQuery Tutorials from Tutorialzine

Misc

And here are some projects and sites that didn’t fit anywhere, but I think that they are worth a look:

Sorting the jQuery questions on stackoverflow by votes reveals lots of interesting topics that will help you become a better developer. See for yourself.
JavaScript Garden is a growing collection of documentation about the most quirky parts of JavaScript.
jQAPI is an alternative jQuery documentation browser. It has a pretty interface that in my opinion is easier to browse than the official api site.
jQuery Cheatsheet is a quick and neatly organized reference of the entire jQuery API. Highly bookmarkable.
jQuery Deconstructed is a very interesting experiment which visually analyzes and presents the source code of the entire library. Unfortunately it hasn’t been updated for newer version of jQuery.
JavaScript weekly is a weekly newsletter. You will get interesting JavaScript links in your email every Friday.
Unheap is a pretty and tidy collection of jQuery plugins. Everything is neatly organized in categories with links to demos and previews.
jQuery Plugins is the official jQuery plugin site, where you can find lots of plugins organized in categories.
Microjs is a collection of minimal JavaScript libraries (no jQuery plugins here) who are fully featured and lightweight. Only those of small filesize are included here.
JSDB is another collection of useful libraries and plugins, but it is not limited in regards to file size. Sorting the list by popularity reveals lots of life-saving libraries.
CDNJS is a very fast CDN that hosts lots of libraries. You can include jQuery and plugins from their servers, which can speed up your site (and save you some traffic).

Unheap – jQuery plugins and Libraries

Happy Learning!

Know of good learning resources that are not included in this list? Share them in the comment section!

Mini AJAX File Upload Form

Martin Angelov — Thu, 09 May 2013 14:21:17 +0000

In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface.

The HTML

As usual, we will start off with a basic HTML5 document:




	
		
		Mini Ajax File Upload Form

		
		

		
		
	

	

		
			
				Drop Here

				Browse

In the head of the document, I have included two fonts from Google Webfonts, and before the closing tag you can see a number of JavaScript libraries. These are the jQuery library, the jQuery Knob plugin and the dependencies for the jQuery File Upload plugin.

The main element on the page is the #upload form. Inside it is the #drop div (which accepts drag/drop uploads) and an unordered list. This list will hold a li item for each of the transferred files. You can see the markup generated for a file upload below:


	
	Sunset.jpg 145 KB

The input item in the snippet above is hidden with CSS. Its only purpose is to initialize the jQuery Knob plugin, which will output a pretty canvas-based knob control. The input has a number of data-* attributes that modify the appearance of the knob. Later, when we listen for the file upload progress, we will update the value of this input which will cause the knob to get redrawn. The span holds the icon to the right; this can either be a check mark or a red cross.

Mini AJAX File Upload Form

The jQuery Code

There are two ways a visitor can upload files with this form:

By dropping them on the #drop div (in all browsers except IE);
By clicking the browse button. This will simulate a click on the hidden file input, which will bring the system’s file browsing window. Notice that the file input has the multiple parameter set, which will allow more than one file to be selected at a given time (the files will still be uploaded individually though!).

The default behavior of the plugin is to place the files in a queue, but we will make the files upload automatically when they are dropped/selected, which will make the experience more straightforward. You can see the JS below:

assets/js/script.js

$(function(){

    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({

        // This element will accept file drag/drop uploading
        dropZone: $('#drop'),

        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        add: function (e, data) {

            var tpl = $('
');

            // Append the file name and file size
            tpl.find('p').text(data.files[0].name)
                         .append('' + formatFileSize(data.files[0].size) + '');

            // Add the HTML to the UL element
            data.context = tpl.appendTo(ul);

            // Initialize the knob plugin
            tpl.find('input').knob();

            // Listen for clicks on the cancel icon
            tpl.find('span').click(function(){

                if(tpl.hasClass('working')){
                    jqXHR.abort();
                }

                tpl.fadeOut(function(){
                    tpl.remove();
                });

            });

            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },

        progress: function(e, data){

            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);

            // Update the hidden input field and trigger a change
            // so that the jQuery knob plugin knows to update the dial
            data.context.find('input').val(progress).change();

            if(progress == 100){
                data.context.removeClass('working');
            }
        },

        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }

    });

    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});

The jQuery File Upload library comes with its own jQuery UI-powered design that you can use straight away. However, because we need an entirely custom interface, we will make use of the basic version of the plugin, which doesn’t include an interface. To make it work, we are passing a number of configuration options / callbacks. In the code above, these are:

dropZone – This property holds the jQuery selector of the element which will act as a drop target. Files dropped upon it will be added to the upload queue.
add – This callback function is called whenever a file is added to the queue. Inside it, we create the HTML markup that will represent the file, add it to the UL and trigger the data.submit() method. This will cause the added file to be directly uploaded without waiting.
progress – This callback is executed by the plugin every 100ms (configurable). The second argument (the data attribute) holds the file size and how many bytes have been transferred. This allows us to calculate a percentage, and subsequently update the hidden input element, which in turn updates the knob.
fail – This callback function is executed if there is a problem with your PHP script. This would most likely mean that upload.php is missing or throwing some kind of error (use your web browser’s inspector to debug any potential problems here).

See a full list of all the available configuration options in this page. I have included more resources about the plugin in the Resources and further reading section at the end of this tutorial.

The data.context property is preserved between the method calls of the plugin. This way we know which LI item we should update in the progress and fail events.

The PHP Script

jQuery File Upload also comes with a powerful PHP script for handling file uploads that you can put on your server, but for this tutorial, we will build our own. The file uploads sent by the plugin are practically the same as a regular form upload – you can access information about the uploads through the $_FILES array:

As I mentioned further back, although we may select a bunch of files at once, they are uploaded one by one. This makes it even easier to handle them with our PHP script. Currently, the files are simply moved to the uploads folder, but you can extend it by adding authentication or creating records in your database.

We’re done!

I hope that you find this ajax file upload form useful! If you have suggestions or questions, leave them in our comment area.

Resources and further reading

Quick Tip: Convert The Service Chooser App From Backbone.js to AngularJS

Kevin P. — Thu, 02 May 2013 16:51:12 +0000

This is a guest post by Kevin P. a web developer and a reader of Tutorialzine, who suggested a better approach to our Backbone.js form tut from last week, using AngularJS. The resulting code was so much simpler and shorter, that I invited Kevin to share it with you.

The Backbone.js app tutorial from last week shows how to build a dynamic form with JavaScript, jQuery and the Backbone library. It works perfectly well, but there is more than one way to make that form, and here I will show you how to build it with AngularJS. The JS code is only 15 lines, compared to the original 123! And what is more, no additional libraries besides AngularJS are needed!

A few words about AngularJS

AngularJS is a library by Google that aims to clearly separate the HTML rendering from your data. With it, you can declare bindings in your HTML that describe how it should be rendered and to which data model your markup corresponds. If you need to modify any aspect of your page, do it by changing your HTML and CSS; the JS contains your data and the logic behind it – in our example the model are the different services, and the logic is the calculation of the total price.

With AngularJS your code becomes short and easy to understand. This is important as when the code is concise, you can spot where to make changes quickly and is more maintainable.

The HTML

index.html




	
		
		Your First AngularJS App

		
		

		
		
	

	

		
			My Services

			
				
				
					
						
						{{service.title}}${{service.price}}
					
				
			

			total: ${{total()}}

It looks similar to the original with important differences:

The whole HTML is here. No ‘
New attributes describe what to do with the data. ‘ng-repeat‘ declares the template to use for each service (a
with an );
ng-model=”service.selected” associates the checkbox state to a ‘selected’ variable of each service (initially undefined, meaning false);
Placeholders indicate where to insert a value from our model. {{service.price}} puts the price;
Function calls are needed when logic is applied to data. With total() we sum up the price of the selected services;
The jQuery library is not needed!

Services Chooser Form With AngularJS

The JavaScript

The JavaScript is as short as it could be:

assets/js/script.js

function myservices($scope){
    $scope.services=[
        { title: 'web development', price: 200},
        { title: 'web design', price: 250},
        { title: 'photography', price: 100},
        { title: 'coffee drinking', price: 10}];
    $scope.total=function(){
        var t = 0;
        angular.forEach($scope.services, function(s){
            if(s.selected)
                t+=s.price;
        });
        return t;
    };
}

The function “myservices” matches the ng-controller attribute on our form. AngularJS will act only inside our form;
Our data model must be stored into the $scope variable to be accessible from the HTML. We first declare our list of services;
The total() function loops through the services, adding the prices of the selected ones. ‘angular.forEach‘ is a convenient function, a standard ‘for’ could have been used.

You don’t have to worry when your data is read or the total() function called. AngularJS does it for you. Just update the data of the model in JavaScript, and the library will update the HTML.

Go further

AngularJS and Backbone.js are similar in their purpose but solve problems differently. They both give you tools to build highly dynamic web applications. But the usual shortcomings apply – because the application is dependent on JavaScript, these libraries are not good from a SEO point of view.

A good next step is to read the official AngularJS tutorial which explains all the basics, or watch some videos. For a great overview of all the major client-side JS frameworks, you can visit http://todomvc.com/ that implements the same To Do application in each of them.

Check Out jQuery Trickshots – Our First Book!

Martin Angelov — Tue, 30 Apr 2013 14:32:25 +0000

I am happy to announce the release of our first ebook – jQuery Trickshots. Inside it, you will find a collection of 100 kickass tips and tricks for working with jQuery that I have discovered over the years as a JavaScript developer and author for Tutorialzine.

jQuery needs no introduction – it is the most popular JavaScript library in use today, and it drives most of the tutorials on this site. It gives web developers a great deal of power by abstracting away the complex tasks of traversing the DOM, creating elements, handling events and more, while at the same time leveling the play field by working around browser differences.

Here are some of the things that you will read about in jQuery Trickshots:

DOM Manipulation: Tips on chaining, organizing your code, using the power of the DOM to your advantage.
Performance: Learn how to optimize your jQuery code and how to squeeze every bit of performance.
Events: A collection of tricks on working with events, making your code work on touch devices, chaining event handlers and more.
AJAX: Tips on working with deferreds, useful third party APIs, scraping HTML content and more.
Master Class: Making use of little-known jQuery methods, applying old-school JavaScript tricks, isolating code blocks and extending jQuery.
Plugins: A collection of must-know plugins for modern web apps, with examples and live code.

To get a better taste of the book, go ahead and download the AJAX chapter for free!

jQuery Trickshots comes in PDF, Epub and Mobi so you can read it on all your devices. To make the package complete, there are 100 HTML5 & jQuery examples that you can edit and run in your browser!

The jQuery Trickshots Book

The Giveaway

To celebrate the release, we are offering three copies of the book for free, to three lucky Tutorialzine readers. To participate do the following:

Tweet about this post (click);
Leave a comment below, saying what you’d like our next book to be about.

The winners will be randomly chosen on May 7th, 2013, and announced with an update to this post. Good luck!

The winners have been chosen! And they are:

Pablo
Phillip Jacobs
Sam

They have been contacted and have been sent their prizes. Congratulations!

Your First Backbone.js App – Service Chooser

Martin Angelov — Mon, 22 Apr 2013 07:01:28 +0000

Client-side MVC frameworks have gotten increasingly popular with the raise in complexity of in-browser web apps. These frameworks let you organize your JavaScript using the proven MVC pattern. Backbone.js is one of the most popular and is quickly becoming the go-to choice when considering such a framework.

Today we are going to make a service chooser form with Backbone.js, that lets you choose a set of items from a list. A total price field is going to be calculated in real-time with the aggregate price of the services.

Update: We now have a version of this form using AngularJS. See it here.

What is Backbone.js?

Backbone.js is a library that gives structure to web applications by providing models, collections and views, all hooked up together with custom events. It connects your application to your backend via a RESTful JSON interface, and can automatically fetch and save data. In this tutorial we won’t be using the advanced features of the library – everything will be stored client-side. Backbone does not replace and does not depend on jQuery, but the two work together nicely.

Backbone won’t magically solve your problems though – you still have to be smart in the way you organize your code, which can be an issue if you don’t have prior experience with MVC frameworks. Backbone can also be an overkill for smaller applications, where a few lines of jQuery would suffice, so it would better be left for large code bases. The app that we are building here is in the first camp, but it does show the fundamental concepts behind the framework.

The HTML

We are starting off with a regular HTML5 document. I haven’t added the HTML5 shim, so this might not look good in older IEs:

index.html




    
        
        Your first Backbone.js App | Tutorialzine 

        
		

        
		

    

    

		
			My Services

			
				
			

			total: $0

The main element on the page is the form. The UL inside it will be populated with LI items for the services, and the span inside the #total paragraph will hold the price.

Before the closing tag, I have included jQuery, Backbone and the Underscore library (backbone depends on its powerful utility functions). Last comes the script.js file, which you can see in the next section.

Services Chooser Form With Backbone.js

The JavaScript

Here is the overall idea of our Backbone code:

First we will create a service model. It will have properties for the name of the service, the price, and checked - a status field showing whether this service has been chosen or not. An object of this class will be created for every service that we offer;
Then we will create a Backbone collection that will store all the services. It will make it easier to listen for events on all objects at once. In larger apps, you would listen for when items are inserted or removed from the collection, and update the views accordingly. In our case, as the items in the collection are predetermined, we will only listen for the change event (which is raised whenever the checked property is updated).
After this, we define a view for the services. Each view will be associated with a single model, and turn its properties into HTML. It listens for clicks and updates the checked property of the model.
Lastly, we define a master view, which loops through all the services in the collection and creates views for them. It also listens for the change event on the collection and updates the total price.

Since I know you didn’t read all of the above, here is the richly-commented source code:

assets/js/script.js

$(function(){

	// Create a model for the services
	var Service = Backbone.Model.extend({

		// Will contain three attributes.
		// These are their default values

		defaults:{
			title: 'My service',
			price: 100,
			checked: false
		},

		// Helper function for checking/unchecking a service
		toggle: function(){
			this.set('checked', !this.get('checked'));
		}
	});

	// Create a collection of services
	var ServiceList = Backbone.Collection.extend({

		// Will hold objects of the Service model
		model: Service,

		// Return an array only with the checked services
		getChecked: function(){
			return this.where({checked:true});
		}
	});

	// Prefill the collection with a number of services.
	var services = new ServiceList([
		new Service({ title: 'web development', price: 200}),
		new Service({ title: 'web design', price: 250}),
		new Service({ title: 'photography', price: 100}),
		new Service({ title: 'coffee drinking', price: 10})
		// Add more here
	]);

	// This view turns a Service model into HTML. Will create LI elements.
	var ServiceView = Backbone.View.extend({
		tagName: 'li',

		events:{
			'click': 'toggleService'
		},

		initialize: function(){

			// Set up event listeners. The change backbone event
			// is raised when a property changes (like the checked field)

			this.listenTo(this.model, 'change', this.render);
		},

		render: function(){

			// Create the HTML

			this.$el.html(' ' + this.model.get('title') + '$' + this.model.get('price') + '');
			this.$('input').prop('checked', this.model.get('checked'));

			// Returning the object is a good practice
			// that makes chaining possible
			return this;
		},

		toggleService: function(){
			this.model.toggle();
		}
	});

	// The main view of the application
	var App = Backbone.View.extend({

		// Base the view on an existing element
		el: $('#main'),

		initialize: function(){

			// Cache these selectors
			this.total = $('#total span');
			this.list = $('#services');

			// Listen for the change event on the collection.
			// This is equivalent to listening on every one of the 
			// service objects in the collection.
			this.listenTo(services, 'change', this.render);

			// Create views for every one of the services in the
			// collection and add them to the page

			services.each(function(service){

				var view = new ServiceView({ model: service });
				this.list.append(view.render().el);

			}, this);	// "this" is the context in the callback
		},

		render: function(){

			// Calculate the total order amount by agregating
			// the prices of only the checked elements

			var total = 0;

			_.each(services.getChecked(), function(elem){
				total += elem.get('price');
			});

			// Update the total price
			this.total.text('$'+total);

			return this;
		}
	});

	new App();

});

As you can see, you have to extend the classes provided by Backbone, and in the process override the methods that you want to perform differently (for the views you almost certainly want to override the render method). You can further extend them and build hierarchies of classes.

The views can either create their own HTML, as in the case of ServiceView, or be attached to existing elements. The main view of the application is App, which is bound to the #main form. It initializes the other views and updates the total price in its render method.

The PHP

I also included a line of PHP that will handle the form submissions. All it does is print the names of the selected checkbox fields:

submit.php

echo htmlspecialchars(implode(array_keys($_POST), ', '));

You are welcome to extend it with whatever functionality you need, like sending email, inserting the results in a database and more.

We’re done!

With this our Backbone service chooser form is done! I hope that you find the form useful and that it gives you a good overview of the framework, so you can tell when the time is right to use it.

Resources and further reading:

Improving Your Site’s User Experience

Luke Clum — Thu, 11 Apr 2013 19:16:08 +0000

When it comes to web design, the quality of experience that users have with a site determines whether it’s successful or not – regardless of how visually catchy the design is. A positive experience drives sales and conversions, while a negative one deters visitors from staying or returning. Therefore performance optimization should be a central part of your design process if you’re aiming for high conversions and user satisfaction. Here are some ways to improve your site’s user experience.

Increase Site Speed

Consider how many people take out their phones to quickly check email or look something up when they have a spare second in the day. Whether it’s while waiting for the bus, standing in line for coffee or running to a meeting, they expect to achieve their goal on the web in that short amount of time. Forty percent of users will abandon a page after waiting longer than 3 seconds, and many people share their bad site experiences with others. It’s your job as a designer to make sure your site is loading fast enough to satisfy these standards and to make sure yours provides an experience that gets positive feedback.

To begin the process of improving your speed, first use a site speed testing tool to measure how it’s currently performing. Then make changes like:

Resize or remove large images and files
Reduce the number of plug-ins in your site
Eliminate flash files, which greatly weigh down performance
Cache your site so that it won’t have to take time to fully assemble every time a user accesses it
Always retest your speed after making changes so you know what is effective in improving it.

Clean Up Your Navigation

Reassess your navigation system: does your menu and search field honor conventions in that they are easily identifiable and usable? Minimize the number of options users have when entering your site by combining pages/content and getting rid of low-traffic pages. The fewer options there are, the more direct your site’s purpose is, and the easier it is for users to decide where they want to go. You can evaluate how users currently use your site by carrying out usability tests and referring to your site analytics data.

Mercy Online

This site has a visible search box, an option to easily subscribe to a newsletter and a few clickable links to navigate to other pages.

Aim For High Conversion Rates

You can be sure that a high converting website is also highly usable. Focus on the usability of your site, and user satisfaction (and in turn, conversions) will follow. To maximize usability:

Make your purpose clear. Use recognizable and concise calls-to-action so that users know exactly what they are meant to do with your site. Show users the value your product or service will add to their lives.
Be consistent. Make sure each page of your site sends the same message, and shares the style of design elements and layout.
Make text readable. Tailor your content to be easily perceived while users scan the page. Headlines, variations in font sizes and weights, and breaks in text blocks create a breathable set of information that can be retained even while glancing through it.
Keep it simple. Comparable to the fact that simple navigation makes it easier for users to decide what to do, simplicity in your entire site design keeps users from being overwhelmed with information. Ample white space and a unified style give users a sense of comfort and professionalism, and builds their confidence that they’ll find what they’re looking for quickly.

Red Digital Agency

Red presents a good balance of white space, imagery, text and color to reveal its purpose and capture attention.

Build Trust

Visitors to your site will have a more positive experience if they can trust you. Whether it’s the validity of your information, your protection of their personal information or confidence in the quality of your product, it’s important to give them reason to trust you. You can do this by providing visible contact information, allowing customer feedback, presenting previous customer testimonials and/or client logos, and displaying your SSL certificate if you have a registration or checkout page.

When working to improve your site’s user experience, just remember to consider what your audience is looking for, and test and measure the changes you make to create a more effective and usable site.

50 Amazing jQuery Plugins That You Should Start Using Right Now

Martin Angelov — Mon, 01 Apr 2013 12:47:22 +0000

jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Enjoy!

Dialogs

The browser’s built-in dialogs are easy to use but are ugly and non-customizable. If you want your application to look sharp and professional, you will have to part with the loathed default look. The plugins in this section can substitute the built-in dialogs and can be readily customized.

1. Alertify.js

Alertify (github) is small library for presenting beautiful dialog windows and notifications. It is easy to customize with CSS, has a simple API and doesn’t depend on third party libraries (but plays nicely with them). To use it, include the js file and call the methods of the global alertify object:

// alert dialog
alertify.alert("Message");

// confirm dialog
alertify.confirm("Message", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});

Alertify.js

2. jQuery Avgrund

jQuery Avgrund (github) is another cool dialog solution. It is not as feature-rich as alertify, but it has the Wow! factor that your web app needs. The dialog is shown with an impressive animation that brings it into focus, while blurring and darkening the background.

jQuery Avgrund

Forms

Forms are tedious and boring. Everyone hates filling them. It is even a bigger deal if no client-side validation is present and we are forced to enter the data a second time. The plugins in this section attempt to make things better by enhancing your forms with useful functionality.

3. iCheck

iCheck (github) is a jQuery plugin that enhances your form controls. It is perfectly customizable, works on mobile and comes with beautiful flat-style skins. To use it, include the js and css files in your page, and convert all your radio and checkboxes with a few lines of jQuery.

$(document).ready(function(){
	$('input').iCheck({
		checkboxClass: 'icheckbox_minimal',
		radioClass: 'iradio_minimal'
	});
});

iCheck

4. Long Press

Long Press is a jQuery plugin that eases the writing of accented or rare characters. Holding down a key while typing will bring a bar with alternative characters that you can use. The plugin also has a github page.

Long Press

5. jQuery File Upload

jQuery File Upload (github) is a widget with multiple file selection, drag&drop support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) and is easy to embed into your application thanks to a number of hooks and callbacks.

jQuery File Upload

6. Complexify

Complexify (github) is a jQuery plugin that aims to assess how complex passwords are. You can use it in signup forms to present a percentage to users (like we did in this tutorial). With this plugin you can force passwords to contain a combination of upper/lowercase letters, numbers, special symbols and more. I should note that this is purely a client-side solution, which means that it can be circumvented. This is why you should also check the password complexity on the server side.

Complexify

7. jQuery Knob

jQuery Knob (github) is a plugin for turning input elements into touchable jQuery dials. It is built using canvas, and is fully customizable by setting data attributes on the inputs like this:

The dials can be controlled using the mouse (click and drag; mousewheel), the keyboard, and by using touch on mobile devices.

jQuery Knob

8. Pickadate.js

Pickadate.js (github) is a jQuery plugin that creates a responsive and mobile friendly date selection widget. It is very easy to use and can be customized with CSS. To use it, include the js file and the stylesheet, and call the plugin on your input element:

$('.datepicker').pickadate();

The plugin takes lots of options which you can find in the docs.

Pickadate.js

9. Chosen

Chosen (github) is a powerful widget which converts a select input into a searchable dropdown list. It is easy to customize with CSS, and you can hook your own code thanks to a number of callbacks. The plugin also updates the original element (which is hidden) so that submitting it as a part of a form or reading it with JS will give you the correct result.

Chosen

10. Fancy Input

Fancy Input (github) is a jQuery plugin that makes entering or deleting text in a textboox uber cool. It uses CSS3 animations to achieve the effect. To use it, simply include the JS file after jQuery, and call the plugin:

$('div :input').fancyInput();

Fancy Input

11. Typeahead.js

Typeahead (github) is a fast autocomplete library by twitter. It is inspired by twitter.com’s search box and is full of features. It displays suggestions as users type, and shows the top suggestion as a hint. The plugin works with hardcoded data as well as remote data, and rate-limits network requests to lighten the load.

Typeahead.js

12. Parsley.js

Parsley.js (github) is an unobtrusive form validation library. It lets you validate form fields without having to write a single line of JavaScript. Instead, you have to place data attributes in the input fields that you need to be validated, and Parsley handles the rest. The library works with either jQuery or Zepto and is less than 800 lines long.

Parsley.js

Page scrolling and Parallax

Single page websites that feature a parallax scrolling effect are popular these days. They will probably stay in fashion for some time, as they are perfect for sites with low information density and lots of photos – marketing sites, portfolios and more. These plugins aim to make them easier to develop.

13. Windows

Windows (github) is a plugin that lets you build single page websites with sections that take up the whole screens. The plugin gives you callbacks that are called when new sections come into visibility and handles snapping, so you can easily extend it with custom navigation menus or more. Here is an example:

$('.window').windows({
    snapping: true,
    snapSpeed: 500,
    snapInterval: 1100,
    onScroll: function(scrollPos){
        // scrollPos:Number
    },
    onSnapComplete: function($el){
        // after window ($el) snaps into place
    },
    onWindowEnter: function($el){
        // when new window ($el) enters viewport
    }
});

Windows

14. Cool Kitten

Cook Kitten (github) is a responsive framework for parallax scrolling websites. It organizes the sections of your site into slides and uses the jQuery Waypoints plugin to detect when they come into visibility, which causes the navigation menu to get updated.

Cook Kitten

15. Sticky

Sticky (github) is a jQuery plugin that gives you the ability to make any element on your page always stay visible when scrolling the page. This can come handy in your single-page website to present a sticky navigation menu or sharing bar. It is straightforward to use, the only option you may pass is a top offset:

$("#sticker").sticky({topSpacing:0});

Sticky

16. Super Scrollorama

Super Scrollorama (github) is a jQuery plugin for cool scroll animations. It lets you define tweens and animations that are triggered when an element comes into view, or on specific scroll points.

$(document).ready(function() {
  var controller = $.superscrollorama();
  controller.addTween('#fade',
    TweenMax.from($('#fade'), .5, {css:{opacity:0}}));
});

Super Scrollorama

17. Stellar.js

Stellar.js (github) is a jQuery plugin that provides parallax scrolling effects to any scrolling element. It looks for any parallax backgrounds or elements within the specified element, and repositions them when the element scrolls. You can control the scroll speed of the elements by using data attributes for a true parallax effect. To trigger the plugin, simply call it on your root element (or on window):

$('#main').stellar();

Stellar.js

18. Scrollpath

Scrollpath (github) is another scrolling plugin, but what it gives you that the previous plugin does not, is the ability to define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Scrollpath

Text effects

There has been a huge improvement in web typography in the last few years. From just a handful of web-safe fonts that we could use not long ago, we now can embed custom fonts and enhance them with CSS3. The plugins in this section give you a great deal of control over text.

19. Textillate.js

Textillate.js (github) is a jQuery plugin that combines the power of animate.css and lettering.js, to apply advanced animations on text elements. The animations are CSS3 based, which makes them smooth even on mobile devices. There is a large number of effects to choose from.

Textillate.js

20. Arctext.js

Arctext.js (demo) is a jQuery plugin that lets you arrange each letter of a text element along a curved path. Based on lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius, and applies the proper CSS3 rotation.

Artctext.js

21. Bacon

Bacon (githug) is a jQuery plugin that allows you to wrap text around a bezier curve or a line. This gives you a great deal of typographic control, and as illustrated by the plugin’s home page, the ability to put bacon strips in the middle of your designs (finally!).

Bacon.js

22. Lettering.js

Lettering.js (github) is a simple but effective jQuery plugin for better web typography. What it does, is split the textual content of an element into individual spans with ordinal .char# classes, so you can style each letter individually.

Lettering.js

23. jQuery Shuffle Letters

jQuery Shuffle Letters (demo) is one of our experiments. It creates an interesting effect that randomizes the content of a text element. Here is how to use it:

// Shuffle the container with custom text
$('h1').shuffleLetters({
	"text": "show this text!" // optional
});

The text parameter is optional – if it is missing, the plugin will take the content of the element.

jQuery Shuffle Letters

24. FitText.js

FitText.js (github) is a jQuery plugin for inflating web type. It automatically scales the text of an element to take up the full width of its container. This makes the layout responsive and looking sharp on any device.

FitText.js

Grids

The plugins in this section make it easy to organize content into grids. They calculate the best way to pack your items densely and align them in real time.

25. Gridster.js

Gridster.js (github) is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. Dragging an element causes the others to rearrange and free up place for it, which can be great for user-controlled layouts and dashboards.

Gridster.js

26. Freetile

Freetile (github) is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

Freetile

27. Stalactite

Stalactite (github) is a library that packs page content depending on the available space. It takes a lazy approach and sorts the elements sequentially with the scrolling of the page, which makes for an interesting effect.

Stalactite

Custom scrollbars

Something that we have all wanted to do in one point or another is to customize the appearance of the default browser scrollbars. Some browsers allow this, but it doesn’t work everywhere. The two plugins below make that possible.

28. nanoScroller.js

nanoScroller.js (github) is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup and utilizes native scrolling. The plugin works on iPad, iPhone, and some Android Tablets.

nanoScroller.js

29. jQuery Custom Content Scroller

jQuery Custom Content Scroller (github) is a custom scrollbar plugin that’s fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support (via the jQuery mousewheel plugin), scrolling buttons, scroll inertia with easing, auto-adjustable scrollbar length, nested scrollbars, scroll-to functionality, user defined callbacks and more.

jQuery Custom Content Scroller

Backgrounds

Full screen backgrounds are another popular design trend. The plugins listed here aim to make it easier to set a single image, a gallery or even a video as a background.

30. Tubular.js

Tubular.js is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way:

$('#wrapper').tubular({videoId: '0Bmhjf0rKe8'});

The plugin also supports controlling the video with play/pause, setting the volume and more.

Tubular.js

31. Backstretch

Backstretch (github) is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. It will stretch any image to fit the page or block-level element, and will automatically resize as the window or element size changes. Images are fetched after your page is loaded, so your users won’t have to wait for the (often large) image to download before using your site. For the curious, and those that don’t want to use plugins, there is also a technique that can set a full screen background image purely with CSS.

Backstretch

32. Supersized

Supersized (github) is an advanced full screen background plugin for jQuery. With it, you can show a set of photos as a slideshow that takes the full width and height of the page. This makes it perfect for photography sites, portfolios, or event sites. The plugin comes with lots of options, supports multiple transition effects and can be extended with custom themes.

Supersized

Galleries and image effects

The plugins listed here aim to enhance the way visitors browse images on your site, and let you apply interesting effects that will make your galleries stand out.

33. jQuery TouchTouch

jQuery TouchTouch (demo) is a plugin we released last year that aims to be simple to use and to work on mobile devices. It uses CSS transitions to make animations smoother, and preloads images dynamically. Also, it can be completely restyled by modifying a single CSS file.

jQuery TouchTouch

34. iPicture

iPicture is a jQuery plugin that can create interactive image walkthroughs. It can overlay tooltips and hints on top of the image, and presents rich content like HTML, photos and videos. It is easy to integrate into your site and can be customized and extended with CSS.

iPicture

35. Adipoli jQuery Image Hover Plugin

Adipoli (demo) is a jQuery plugin for creating stylish image hover effects. With it, you can turn images black and white, apply popout, slice and box transitions. To use the plugin, you only need to include the necessary files and define the start and hover effects:

$('#image1').adipoli({
    'startEffect' : 'normal',
    'hoverEffect' : 'popout'
});

This makes it the perfect addition to your gallery or portfolio page.

Adipoli jQuery Image Hover Plugin

36. Swipebox

Swipebox (github) is a lightbox plugin that supports desktop, mobile devices and tablet browsers. It understands swipe gestures and keyboard navigaton and is retina-ready. To enable it, include the plugin JS/CSS files, and add the swipebox class to the images that you want to show in a lightbox:

Like the rest of the plugins in this collection, it can be customized entirely with CSS.

Swipebox

37. TiltShift.js

TiltShift.js (github) is a neat plugin that replicates the tilt-shift effect (which causes real-life object to appear as miniatures) using CSS3 image filters. The bad news is that this only works on Chrome and Safari at the moment, but support should gradually land in other browsers as well.

TiltShift.js

38. Threesixty.js

Threesixty.js (github) is a jQuery plugin that creates draggable 360 degree views. You have to provide the plugin with the path to a collection of images of your product (shot from different angles) and Threesixty.js will assemble them into a interactive view. You can drag or use the arrow keys to explore the object from different angles.

Threesixty.js

39. Swipe.js

Swipe.js (github) is another responsive slider. What makes it stand apart is that it is specifically targeted at touch devices. This allows it to not only understand gestures, but to also react to touch similarly to a native application. It has resistant bounds and scroll prevention and is compatible with browsers from IE7 onward.

Swipe.js

40. CamanJS

CamanJS (github) is a powerful image manipulation library, built on top of the canvas element. With it, you can manipulate the pixels of an image and achieve an almost Photoshop-like control. If you can remember, this is the library we used a few months ago to build a web app with filters similar to Instagram.

CamanJS

41. SpectragramJS

Spectragram (github) is a jQuery plugin that aims to make working with the Instagram API easier. It can fetch user feeds, popular photos, photos with specific tags and more.

SpectragramJS

Misc

This section holds plugins and libraries that don’t belong in the other categories but are worth the look.

42. jQuery Countdown

jQuery Countdown (demo) is a jQuery plugin that shows the remaining days, hours, minutes and seconds to an event, and updates the remaining time with an animation every second. It is easy to use – include the plugin JS and CSS files, and trigger it on document ready:

$('#countdown').countdown({
    timestamp   : new Date(2015, 0, 3) // January 3rd, 2015
}

The countdown will be presented in the #countdown div.

jQuery Countdown

43. List.js

List.js (github) is a library that enhances a plain HTML list with features for searching, sorting and filtering the items inside it. You can add, edit and remove items dynamically. List.js is standalone and doesn’t depend on jQuery or other libraries to work.

List.js

44. jQuery PointPoint

jQuery PointPoint (demo) is a plugin that helps you draw users’ attention to a specific part of the page. It presents a small arrow next to the mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.

jQuery PointPoint

45. Social Feed

Social Feed (github) is a jQuery plugin that presents a feed of the latest public updates on your social accounts. It has a clean design that is built using a template, which you can easily customize.

Social Feed

46. Hook.js

Hook.js (github) is an interesting experiment that brings the “pull to refresh” feature you often see in mobile apps, to the web. You can use this to update your mobile site with new content, fetch new posts and more.

Hook.js

47. jQuery PercentageLoader

PercentageLoader (bitbucket) is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. It makes use of HTML5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary, using vectors rather than images so can be easily deployed at various sizes.

Loader.js

48. Chart.js

Chart.js (github) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!

Chart.js

49. Tooltipster

Tooltipster (github) is a powerful jQuery plugin for displaying tooltips. It works on desktop and mobile browsers, gives you full control over the contents of the tooltips and supports a number of callback functions so you can hook it into your application. If you need something even more lightweght that doesn’t use JS at all, you can give a try to hint.css.

Tooltipster

50. Toolbar.js

Toolbar.js (github) is a jQuery plugin that lets you display a neat pop-up menu. You can choose the actions and icons that are presented in the menu and listen for events. This is perfect for making more of the limited space of a mobile web app interface.

Toolbar.js

51. gmaps.js

gmaps.js (github) is such a useful library that I decided to include it in addition to the 50 plugins above. Gmaps is a powerful library that makes working with Google Maps a great deal easier. You can place markers, listen for events, set the coordinates, zoom level and more, all with a fluid jQuery-like syntax. This is like a breath of fresh air compared to the regular maps JS API, and I highly recommend it.

Gmaps.js

It’s a wrap!

You know of a cool plugin that deserves to be in this list? Share it in the comment section!

Tutorial: Let’s Build a Lightweight Blog System (part 2)

Martin Angelov — Tue, 19 Mar 2013 12:55:06 +0000

As you remember from part 1, in this tutorial we are creating a lightweight blog system that stores posts as markdown files. It uses a number of libraries: for parsing markdown, for creating the RSS feed, and most importantly the Dispatch micro framework for giving the application structure.

In this part, we will create the views and the CSS that will make the site responsive on mobile devices.

The Views

As you remember from the first part, we used a configuration file – config.ini – to write down the configuration settings of the blog. The last two lines of the file hold the name of the file that holds the layout, and the path to the views:

app/config.ini (lines 12-14)

views.root = app/views
views.layout = layout

These settings are used internally by the Dispatch framework. The first line tells it where to find the views for the site (so that you only need to specify a name when rendering them) and the second is the layout. This is an HTML template that is included with every view that you render. This is a standard HTML5 document with a few additional meta tags to make it mobile-friendly:

app/views/layout.html.php




	<?php echo isset($title) ? _h($title) : config('blog.title') ?>

	
	
	
	

	

	
	

	




	

		

		

		
			Home
			Members area
			Contact Us

In the head section I am also including a font from Google Web Fonts, and a HTML5 shim that will make it work on browsers as old as IE8. Throughout this view, I am printing the settings we put in config.ini, by using the config() function provided by Dispatch. This will let you customize the blog solely from the config file. Another function provided by dispatch is site_url() which gives you the absolute URL of your blog, so that you can include stylesheets, images or use it as the base for links.

Notice the call to the content() function. What this does, is print the HTML generated by one of the other views. This allows for other views to be “nested” inside it. For example running this code:

index.php (lines 29-33)

	render('main',array(
		'page' => $page,
		'posts' => $posts,
		'has_pagination' => has_pagination($page)
	));

Will embed the main.html.php template you see below in the view. The page, posts and has_pagination members of the array will be available as variables:

app/views/main.html.php


	
		title ?>

		date)?>

		body?>
	



	Newer



	Older

This will present a list of posts on the screen, with optional back/forward arrows. The other template that also operates with posts, is post.html.php, which shows a single post:

app/views/post.html.php



	title ?>

	date)?>

	body?>

This is the view that you would need to edit if you want to add social sharing buttons or comment widgets from Facebook or Disqus.

And lastly, here is the 404 page:

app/views/404.html.php




	

	404 Not Found | <?php echo config('blog.title') ?>
	

	
	




	
		This page doesn't exist!
		Would you like to try our homepage instead?

Note that this view is a complete HTML5 document. This is because it doesn’t follow the same layout as the rest of the blog. In the Dispatch framework, you can render a view that does not get embedded in the site layout, by passing false as the last argument to render:

app/includes/functions.php (lines 95-97)

function not_found(){
	error(404, render('404', null, false));
}

Now that we have all the fancy HTML printed to the screen, let’s style it!

The CSS

In this part of the tutorial, we will write the CSS that will make the blog pretty and responsive. All these styles are located in the file assets/css/styles.css that you can edit to your liking. One of the reason this blog is so fast to load is because the design is entirely CSS-based, and I haven’t used any images (thanks to a data url trick that you will see in a moment).

Let’s start with the headings:

h1{
	font: 14px 'Open Sans Condensed', sans-serif;
	text-transform:uppercase;
	margin-bottom: 24px;
}

h2{
	font: 48px 'Open Sans Condensed', sans-serif;
}

h1 a, h2 a{
	color:#4f4f4f !important;
	text-decoration: none !important;
}

Next is the content and posts. Notice the background image to .post .date:before.

#content{
	position: absolute;
	font: 16px/1.5 'PT Serif', Times, Cambria, serif;
	width: 580px;
	left: 50%;
	margin-left: -100px;
}

#content p,
#content ul{
	margin-bottom:25px;
}

#content ul{
	padding-left:20px;
}

#content li{
	margin-bottom:5px;
}

/* The actual post styles */

.post{
	padding: 50px 0 15px 0;
	border-bottom: 1px solid #dfdfdf;
}

.post .date{
	font: bold 12px 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	color: #a7a7a7;
	margin: 24px 0 30px 20px;
	position: relative;
}

/* The calendar icon is set as a data url */

.post .date:before{
	width:18px;
	height:18px;
	position:absolute;
	content:'';
	left: -22px;
	top: -1px;
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..')
}

This is the Data URI scheme, which allows for data which would normally be a separate file to to be presented inline. So by encoding the icon in base64 and placing it directly in the background property, I am saving a request to the server.

Next, we have the left static bar, which always takes up the full height of the page:

aside{
	position: fixed;
	width: 250px;
	height: auto;
	top: 0;
	left: 50%;
	bottom: 0;
	margin-left: -460px;
	padding-top: 65px;
}

aside p.description{
	font-size: 13px;
	line-height: 1.8;
	margin-bottom: 40px;
	color:#787878;
}

/* The main navigation links */
aside ul{
	font: bold 18px 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	list-style:none;
}

aside ul li a{
	text-decoration:none !important;
	display:inline-block;
	padding:0 3px;
	margin:2px 0 2px 10px;
}

aside ul li a:hover{
	background-color:#389dc1;
	color:#fff;
}

aside p.author{
	position: absolute;
	bottom: 20px;
	height: 30px;
	font-size: 12px;
	color: #888;
}

The Main Bar

After this, we will style the pagination arrows:

.pagination-arrow{
	display: inline-block;
	font: bold 16px/1 'Open Sans Condensed', sans-serif;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 20px 15px;
	color: #555 !important;
	padding: 8px 12px;
	text-decoration: none !important;
	text-transform: uppercase;
	position: relative;
}

.pagination-arrow.newer{
	padding-left: 20px;
}

.pagination-arrow.older{
	padding-right: 20px;
	float:right;
}

.pagination-arrow.newer:before,
.pagination-arrow.older:before{
	content: '';
	border: 5px solid #555;
	border-color: transparent #555 transparent transparent;
	width: 0;
	height: 0;
	position: absolute;
	left: 3px;
	top: 12px;
}

.pagination-arrow.older:before{
	left:auto;
	right:3px;
	border-color: transparent transparent transparent #555;
}

I am using an old border trick to create triangular arrows with CSS. Next are the styles, specific to the 404 page:

.message{
	padding-top:50px;
}

.message h1{
	font-size:36px;
	margin-bottom: 18px;
}

.message p{
	font-size:13px;
}

.center{
	text-align:center;
}

And lastly, we have the media queries, that will tweak the layout depending on the resolution of the device:

/* Small tablets */

@media all and (max-width: 1024px) {
	aside{
		left: 5%;
		margin-left: 0;
		width: 25%;
	}

	#content{
		left: 35%;
		margin-left: 0;
		width: 60%;
	}
}

/* Smartphones */

@media all and (max-width: 840px) {

	h2{
		font-size:36px;
	}

	aside{
		margin-left: 0;
		position: static;
		width: 90%;
		padding: 5% 5% 0 5%;
		text-align: center;
	}

	aside .description{
		margin-bottom: 25px;
	}

	aside li {
		display: inline-block;
	}

	aside ul{
		text-align: center;
	}

	aside .author{
		display: none;
	}

	#content{
		position: static;
		padding: 5%;
		padding-top: 0;
		width: 90%;
	}
}

With this our lightweight flat-file blog is ready!

Done!

One benefit of using a flat file system is that it is much simpler to set up and deploy. Thanks to the markdown format, it is also incredibly easy to write blog posts. As everything is a file in the blog folder, you can use git to manage your blog’s revisions and to deploy it. The system is also highly customizable and with some CSS you can adapt it to your existing website.

Tutorial: Let’s Build a Lightweight Blog System (part 1)

Martin Angelov — Thu, 14 Mar 2013 20:17:22 +0000

In this tutorial, we will be making a lightweight blog system with PHP and CSS3. The blog posts will be stored in a folder as files (in the markdown format). The system will not use a database and will not have an admin panel, which makes it perfect for small blogs with only one author. It will have an RSS feed and a JSON read-only API, and will feature a completely responsive design that adapts to the screen size of the device.

In this first part, we are going to write the PHP backend, and in part 2, we will code the HTML and CSS. Let’s begin!

The posts

Posts will be named in the following pattern: 2013-03-14_url-of-the-post.md and they will be stored in the posts/ folder. The first part is the date of the post (you can optionally include a time as well if you have more than one post for that day), followed by an underscore, and the title of the post. The underscore is used by the system to separate the title from the date. This convention also has the benefit that posts can easily be sorted by publication date. When displayed on your blog, this post will have an URL like http://example.com/2013/03/url-of-the-post

Each post will be in the markdown format (hence the extension). The only requirement is that the first line of the markdown document is formatted as a H1 heading. For example:

# The title of the blog post

Body of the blog post.

This will make the first line a H1 heading. If this is the first time you’ve seen markdown, the next section is for you.

What is markdown

Markdown is a lightweight format for writing text. It has a minimal and intuitive syntax, which is transformed into HTML. This makes it perfect for our simple blog system, as it won’t have an admin panel nor database – all the posts will be stored in a folder as files.

We can’t simply display the raw markdown directly, first we have to transform it into HTML. There are a number of libraries that can do this (in every major language), but for this tutorial I chose the PHP Markdown library, as it integrates nicely with composer.

Composer

Composer is a dependency manager for PHP. With it, you can declare what libraries your project depends on, and they will be downloaded automatically for you. We will use it to include two libraries in this project:

PHP Markdown, which I mentioned above;
RSS Writer, which will output the RSS feed for the blog.

You could simply download these libraries and use them straight away, but let’s see how we can do the same with composer (note that you need to follow these steps only if you are starting from scratch; the zip accompanying the tutorial already includes all the necessary files).

First we have to declare which packages the current project depends on, in a file named composer.json:

{
    "require": {
	"dflydev/markdown": "v1.0.2",
	"suin/php-rss-writer": ">=1.0"
    }
}

You can obtain the specific identifiers for the libraries and their versions from the composer package repository, or by following the instructions that each library included on its github repo.

The next steps are to install composer into your project (follow these instructions), and to run the install command. This will download all the appropriate libraries and place them in the vendor/ folder. All that is left is to include the composer autoloader in your php scripts:

require 'vendor/autoload.php';

This will let you create instances of the libraries without having to include their PHP files individually.

Lightweight PHP Blog System

The configuration file

I am using one additional PHP library - Dispatch. This is a tiny routing framework that I’ve mentioned before. It will let us listen for requests on specific URLs and render views. Unfortunately it doesn’t have Composer support at the moment, so we have to download it separately and include it into the project.

A neat feature of this framework is that it lets you write configuration settings in an INI file, which you can access with the config() function call. There are a number of settings you need to fill in for your blog to work:

app/config.ini

; The URL of your blog
site.url = http://demo.tutorialzine.com/2013/03/simple-php-blogging-system/

; Blog info

blog.title = "Tutorialzine Demo Blog"
blog.description = "This is a lightweight and responsive blogging system.."
blog.authorbio = "Created by ..."

posts.perpage = 5

; Framework config. No need to edit.
views.root = app/views
views.layout = layout

These settings are used throughout the views, so when you are setting up a new blog you won’t need to edit anything else.

The PHP code

Here is our main PHP file:

index.php

// This is the composer autoloader. Used by
// the markdown parser and RSS feed builder.
require 'vendor/autoload.php';

// Explicitly including the dispatch framework,
// and our functions.php file
require 'app/includes/dispatch.php';
require 'app/includes/functions.php';

// Load the configuration file
config('source', 'app/config.ini');

// The front page of the blog.
// This will match the root url
get('/index', function () {

	$page = from($_GET, 'page');
	$page = $page ? (int)$page : 1;

	$posts = get_posts($page);

	if(empty($posts) || $page < 1){
 		// a non-existing page
 		not_found();
 	}

     render('main',array(
     	'page' => $page,
		'posts' => $posts,
		'has_pagination' => has_pagination($page)
	));
});

// The post page
get('/:year/:month/:name',function($year, $month, $name){

	$post = find_post($year, $month, $name);

	if(!$post){
		not_found();
	}

	render('post', array(
		'title' => $post->title .' ⋅ ' . config('blog.title'),
		'p' => $post
	));
});

// The JSON API
get('/api/json',function(){

	header('Content-type: application/json');

	// Print the 10 latest posts as JSON
	echo generate_json(get_posts(1, 10));
});

// Show the RSS feed
get('/rss',function(){

	header('Content-Type: application/rss+xml');

	// Show an RSS feed with the 30 latest posts
	echo generate_rss(get_posts(1, 30));
});

// If we get here, it means that
// nothing has been matched above

get('.*',function(){
	not_found();
});

// Serve the blog
dispatch();

The get() function of Dispatch creates a pattern that is matched against the currently visited URL. If they match, the callback function is executed and no more patterns are matched. The last get() call sets up a pattern that matches every URL in which case we show a 404 error.

Some of the functions you see above are not part of the Dispatch framework. They are specific to the blog and are defined in the functions.php file:

get_post_names() uses the glob function to find all the posts and to sort them in alphabetical order (as the date is the first part of the file name, this effectively sorts them by their publishing date);
get_posts() takes the list of names returned by get_post_names() and parses the files. It uses the Markdown library to convert them to HTML;
find_post() searches for a post by month, day and name;
has_pagination() is a helper function that is used in the views (we will look at them in the next part);
not_found() is a wrapper around Dispatch’s error function but renders a view as the message;
generate_rss() uses the RSS Library we mentioned above, and turns an array of posts into a valid RSS feed;
generate_json() is only a wrapper around json_encode, but I included it for consistency with the generate_rss function.

And here is the source:

app/includes/functions.php

use dflydev\markdown\MarkdownParser;
use \Suin\RSSWriter\Feed;
use \Suin\RSSWriter\Channel;
use \Suin\RSSWriter\Item;

/* General Blog Functions */

function get_post_names(){

	static $_cache = array();

	if(empty($_cache)){

		// Get the names of all the
		// posts (newest first):

		$_cache = array_reverse(glob('posts/*.md'));
	}

	return $_cache;
}

// Return an array of posts.
// Can return a subset of the results
function get_posts($page = 1, $perpage = 0){

	if($perpage == 0){
		$perpage = config('posts.perpage');
	}

	$posts = get_post_names();

	// Extract a specific page with results
	$posts = array_slice($posts, ($page-1) * $perpage, $perpage);

	$tmp = array();

	// Create a new instance of the markdown parser
	$md = new MarkdownParser();

	foreach($posts as $k=>$v){

		$post = new stdClass;

		// Extract the date
		$arr = explode('_', $v);
		$post->date = strtotime(str_replace('posts/','',$arr[0]));

		// The post URL
		$post->url = site_url().date('Y/m', $post->date).'/'.str_replace('.md','',$arr[1]);

		// Get the contents and convert it to HTML
		$content = $md->transformMarkdown(file_get_contents($v));

		// Extract the title and body
		$arr = explode('', $content);
		$post->title = str_replace('','',$arr[0]);
		$post->body = $arr[1];

		$tmp[] = $post;
	}

	return $tmp;
}

// Find post by year, month and name
function find_post($year, $month, $name){

	foreach(get_post_names() as $index => $v){
		if( strpos($v, "$year-$month") !== false && strpos($v, $name.'.md') !== false){

			// Use the get_posts method to return
			// a properly parsed object

			$arr = get_posts($index+1,1);
			return $arr[0];
		}
	}

	return false;
}

// Helper function to determine whether
// to show the pagination buttons
function has_pagination($page = 1){
	$total = count(get_post_names());

	return array(
		'prev'=> $page > 1,
		'next'=> $total > $page*config('posts.perpage')
	);
}

// The not found error
function not_found(){
	error(404, render('404', null, false));
}

// Turn an array of posts into an RSS feed
function generate_rss($posts){

	$feed = new Feed();
	$channel = new Channel();

	$channel
		->title(config('blog.title'))
		->description(config('blog.description'))
		->url(site_url())
		->appendTo($feed);

	foreach($posts as $p){

		$item = new Item();
		$item
			->title($p->title)
			->description($p->body)
			->url($p->url)
			->appendTo($channel);
	}

	echo $feed;
}

// Turn an array of posts into a JSON
function generate_json($posts){
	return json_encode($posts);
}

At the top of the file, we have a number of use statements, which import the necessary namespaces (read more about PHP’s namespaces).

The last thing we need to do, is to rewrite all requests so they hit index.php. Otherwise our fancy routes wouldn’t work. We can do this with an .htaccess file:

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond $1 !^(index\.php)
RewriteRule ^(.*)$ index.php/$1 [L]

If a file or folder does not exist, the request will be redirected to index.php.

It’s a wrap!

Continue with the second part, where we are creating the views and the responsive CSS design.

Design Tips For Developers

Luke Clum — Tue, 05 Mar 2013 20:35:38 +0000

Professionals in both fields seem to have realized of late that it helps for designers to have an understanding of web development, and for developers to know about good design practices. And yet, this awareness doesn’t often get carried very far in practice. It feels so much safer to stay within your sphere of comfort, where arcane design terms don’t get tossed around with bewildering frequency. But a lot of headaches and misunderstandings can be evaded by understanding just a few of the basic principles that underlie good design.

1. Space

The hallowed concept that designers call white space (otherwise known as negative space) is one of the most essential components of web design. It’s the margins, the padding, the letter spacing and line height within text; it’s every part of the site that isn’t filled with some eye-catching object (meaning that patterns and images can sometimes be a part of white space, as long as they recede from focus, rather than grab at it).

White Space

For example, this blog has plenty of white space, although you might at first think that the patterns on the top and sides don’t count. But they do, because they’re low-contrast and restful to look at. That’s the point of white space; it rests the eye, creating pauses in content intake that stops users from getting overwhelmed by an excess of information. Notice how all the sections in the sidebar take up so much space to say very little; this makes the text more readable and sections more distinguishable. All these spaces are what makes this site feel so clean, well-organized, and welcoming.

Tips on White Space:

Make sure blocks of text are always broken up with shorter paragraphs, lists, or images.
Soft textures, patterns, and images can be used as white space, but don’t overdo them. Too many conflicting elements become confusing, no matter how low-contrast they are.

2. Contrast

There are a lot of ways to achieve contrast in design, but at least a few of them must be employed to make a website look good. There’s contrast in color; people unconsciously respond to this whenever they see a brightly-colored button against a neutral background. There are also ways to use contrasting sizes and shapes. In all its forms, contrast is used to call out important sections, and add a sense of movement and interest to elements that would look static and plain if they were too similar.

Bold Contrast

This website uses all three types of contrast mentioned above: the bright, flat blocks of color pop out against the light, textured background. The organic shape of the logo on the left contrasts with the rest of the type, which are all blocky and architectural. Furthermore, the title typeface stands out because it’s so much larger than the others.

Tips on Contrast:

Refer to common color rules, using a color wheel to determine which hues look most striking when put together.
Typefaces don’t always need to be very different in scale and in shape, but at least one of these contrasts will always help a design.

3. Balance

The last major concept to conquer is one that deals with the arrangement of the page. If a layout is too lopsided, it won’t look right. On the other hand, if it’s completely centered, it risks looking stale and boring. Balance is struck when the visual weight on one side of a page is countered by elements on the other side.

Visual Balance

For example, you might at first identify this site as being off-balance because the banner and the logo are both on the left-hand side. However, the visual weight they give to that side of the page are met on the other side with the navigation bar and a striking photo.

Tips on Balance:

Half close your eyes when you check a page for its balance. The elemental block shapes will be easier to identify, and distracting details will be less apparent.
Balance doesn’t mean exactly equal. A large block of orange on one side of a page can be balanced by an orange button on the other side.
Check out some infographic design tips to get a better sense of balance; layout is one of the most important considerations in this field.

Developers shouldn’t feel like they need to get an arts degree to have a working understanding that gives designers a leg up with their work. All it takes is a general understanding to be able to cooperate in creating great web design. An understanding of these few principles will add immeasurably to your interaction with designers, and the visual aspects any project.