<div class="container">
  <div class="row">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

<div class="progress">
  <div class="bar" style="width: 30%;"></div>
</div>

="btn-group">
  ="btn" href="#">One>
  ="btn" href="#">Two>
  ="btn" href="#">Three>
>

<div id="myCarousel" class="carousel slide">

    <div class="carousel-inner">


]]>
			http://designmagazine.us/twitter-bootstrap-2-bootstrap-goes-responsive/feed/
		0
		
		
		
		http://designmagazine.us/10-useful-htaccess-tricks-to-improve-your-website/
		http://designmagazine.us/10-useful-htaccess-tricks-to-improve-your-website/#comments
		Tue, 14 Feb 2012 22:54:54 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/10-useful-htaccess-tricks-to-improve-your-website/
		
			
 For some reason, the .htaccess file is often overlooked by web designers. If you have no idea what the .htaccess file is, I’ll just give you the Wikipedia definition: “A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration.” But let’s get to it, here are some of the cool things you can do in your .htacces file

For some reason, the .htaccess file is often overlooked by web designers. If you have no idea what the .htaccess file is, I’ll just give you the Wikipedia definition: “A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration.”
But let’s get to it, here are some of the cool things you can do in your .htacces file.
1. Hotlinking protection with .htaccess
Websites that steal your written content can be quite annoying because they can hurt your Google rankings by creating duplicate content. However there is even worst: websites that steal your content AND don’t even make the effort of downloading images and reuploading it on their server. Loading images from your server is called hotlinking, and it’s a bad practice because it steals some of your precious bandwidth.
To preven people from hotlinking your images, just include the following lines in your htaccess file (obviously replace yoursite.com with your site’s URL.
RewriteBase /

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://(www.)?yoursite.com/.*$ [NC]

RewriteRule .(gif|jpg|swf|flv|png)$ /feed/ [R=302,L]
2. Prevent directory browsing
While directory browsing can be useful, it can also cause some security problems. To make your site a bit more secure, prevent directory browsing by including this file in your htaccess.
Options All -Indexes

Image credits: Sens interdit by Frédéric Bisson on Flickr.
3. SEO friendly 301 permanent redirects
I’ve used this one very often, pretty much on every site where I changed the URL structure with a redesign or server move. To redirect old pages to their new address in a user-friendly way, use this structure in your htaccess.
Redirect 301 http://www.yoursite.com/article.html http://www.yoursite.com/archives/article
4. Display a custom 404 error page
When a visitor tries to access some page of your site that doesn’t exist anymore, your server will display a page with the message “404 file not found”. Some CMS allow you to set a custom page for those 404 errors, but the easiest way is still to include the following line in your htaccess file.
ErrorDocument 404 /404.html

Image credits: 404 room by Raphaël Gotter on Flickr.
5. Setting the default page of a directory
If for some reason you need the default page of a directory to be different, it’s very easy to do with htaccess. For example, if you want the file default.html to be the default page, just add this line.
DirectoryIndex about.html
6. Block unwanted visitor based on referring domain
Usually webmasters will not block traffic, but if you notice in your stats that some sites are just sending you spammers or trolls, you shouldn’t wait to block them, that would just help you preserve your nerves. Just add the following code to do so.


RewriteEngine on  RewriteCond %{HTTP_REFERER} spamteam.com [NC,OR]

RewriteCond %{HTTP_REFERER} trollteam.com [NC,OR]

RewriteRule .* – [F] 


7. Specify upload file limit for PHP in htaccess
This one helped me several times when using Drupal on shared hosting, I had to reset upload file limits to allow my clients to upload bigger files and these lines saved me. The first one is maximum file size for uploading, second one is maximum size of the post data , third one is maximum time in seconds a script is allowed to run before it is terminated by the parser and last one is maximum time in seconds a script is allowed to parse input data such as like file uploads, POST and GET data.
php_value upload_max_filesize 20M

php_value post_max_size 20M

php_value max_execution_time 200

php_value max_input_time 200

8. Compress files
Do your users a favor and optimize the loading time of pages by compressing the files you serve on your website, here is an example of how to achieve this.
AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript
9. Cache files
More website speed optimization by caching files.


Header set Cache-Control “max-age=2592000″


10. Force trailing slash
I cannot prove it, but I’ve read countless time that adding a trailing slash at the end of the URL was good for SEO and page load. If you also believe so just add this code in your htaccess.
 

RewriteCond %{REQUEST_URI} /+[^.]+$ 

RewriteRule ^(.+[^/])$ %{REQUEST_URI}/ [R=301,L]







  



Artica Source: 10 useful htaccess tricks to improve your website

]]>
			http://designmagazine.us/10-useful-htaccess-tricks-to-improve-your-website/feed/
		0
		
		
		
		http://designmagazine.us/callback-functions-in-javascript/
		http://designmagazine.us/callback-functions-in-javascript/#comments
		Tue, 14 Feb 2012 11:00:24 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/callback-functions-in-javascript/
		
			
 If you’re fairly inexperienced with JavaScript but you’ve used jQuery, then its likely you’ve used callback functions . But maybe you don’t fully understand how they work or how they’re implemented. In this post, which is based on what I’ve learned about callback functions, I’ll try to enlighten you on this fairly common JavaScript technique

If you’re fairly inexperienced with JavaScript but you’ve used jQuery, then its likely you’ve used callback functions. But maybe you don’t fully understand how they work or how they’re implemented.
In this post, which is based on what I’ve learned about callback functions, I’ll try to enlighten you on this fairly common JavaScript technique. And maybe some of our JavaScript experts can chime in and let me know what I’ve omitted or oversimplified.
What is a Callback Function?
The above-linked Wikipedia article defines it nicely:
A reference to executable code, or a piece of executable code, that is passed as an argument to other code.

Here’s a simple example that’s probably quite familiar to everyone, taken from jQuery:
$('#element').fadeIn('slow', function() {
    // callback function
});

This is a call to jQuery’s fadeIn() method. This method accepts two arguments: The speed of the fade-in and an optional callback function. In that function you can put whatever you want.
When the fadeIn() method is completed, then the callback function (if present) will be executed. So, depending on the speed chosen, there could be a noticeable delay before the callback function code is executed. You can read more about jQuery’s callback functions here.
How to Write a Callback Function
If you’re writing your own functions or methods, then you might come across a need for a callback function. Here’s a very simple example of a custom callback function:
function mySandwich(param1, param2, callback) {
    alert('Started eating my sandwich.nnIt has: ' + param1 + ', ' + param2);
    callback();
}

mySandwich('ham', 'cheese', function() {
    alert('Finished eating my sandwich.');
});

Here we have a function called mySandwich and it accepts three parameters. The third parameter is the callback function. When the function executes, it spits out an alert message with the passed values displayed. Then it executes the callback function.
Notice that the actual parameter is just “callback” (without parentheses), but then when the callback is executed, it’s done using parentheses. You can call this parameter whatever you want, I just used “callback” so it’s obvious what’s going on.
The callback function itself is defined in one the third argument passed to the function call. That code has another alert message to tell you that the callback code has now executed. You can see in this simple example that an argument passed into a function can be a function itself, and this is what makes callbacks possible in JavaScript.
Here’s a JSBin that uses the simple example above.
Make the Callback Optional
One thing you’ll notice about jQuery callbacks is that they’re optional. This means if a method accepts a callback, it won’t return an error if a callback is not included. In our simple example, the page will return an error if we call the function without a callback, like this:
function mySandwich(param1, param2, callback) {
    alert('Started eating my sandwich.nnIt has: ' + param1 + ', ' + param2);
    callback();
}

mySandwich('ham', 'cheese');

You can see this in action here. If you open your developer tools, you’ll see an error that says “undefined is not a function” (or something similar) that appears after the initial alert message.
To make the callback optional, we can just do this:
function mySandwich(param1, param2, callback) {
    alert('Started eating my sandwich.nnIt has: ' + param1 + ', ' + param2);
    if (callback) {
        callback();
    }
}

mySandwich('ham', 'cheese');

Now, since we’re checking to ensure the existence of callback, the function call won’t cause an error without it. You can test this example here.
Make Sure the Callback is a Function
Finally, you can ensure that whatever value is passed as the third argument is in fact a proper function, by doing this:
function mySandwich(param1, param2, callback) {
    alert('Started eating my sandwich.nnIt has: ' + param1 + ', ' + param2);
    if (callback && typeof(callback) === "function") {
        callback();
    }
}

mySandwich('ham', 'cheese', 'vegetables');

Notice that the function now includes a test using the typeof operator, to ensure that whatever is passed is actually a function. The function call has a third argument passed, but it’s not a function, it’s a string. So the test using typeof ensures no error occurs.
Here’s a JSBin with a nonfunction argument passed as the callback.
A Note About Timing
Although it is true that a callback function will execute last if it is placed last in the function, this will not always appear to happen. For example, if the function included some kind of asynchronous execution (like an Ajax call or an animation), then the callback would execute after the asynchronous action begins, but possibly before it finishes.
Here’s an example that uses jQuery’s animate method:
function mySandwich(param1, param2, callback) {
    alert('Started eating my sandwich.nnIt has: ' + param1 + ', ' + param2);

    $('#sandwich').animate({
        opacity: 0
    }, 5000, function() {
        // Animation complete.
    });

    if (callback && typeof(callback) === "function") {
        callback();
    }
}

mySandwich('ham', 'cheese', function() {
    alert('Finished eating my sandwich.');
});

And again here’s that code live.
Notice that although the callback appears later in source order than the animation, the callback will actually execute long before the animation completes. In this case, solving this problem is easy: You just put the callback execution inside the animate method’s callback function (where it says “Animation complete”).
This doesn’t cover all the details regarding asynchronous functions, but it should serve as a basic warning that callback functions will only execute last as long as all the code in the function is synchronous.
Anything to Add?
For most JavaScript junkies, this is probably pretty easy stuff. So forgive me if you were expecting something deeper — this is the best I can do.   But if you have anything else to add or want to correct anything I’ve said, please do so.
 
Related posts:

Triggering CSS3 Transitions With JavaScript
A JavaScript Content Switcher That Works Without JavaScript
Using JavaScript’s Try-Catch Statement






 



Artica Source: Callback Functions in JavaScript

]]>
			http://designmagazine.us/callback-functions-in-javascript/feed/
		0
		
		
		
		http://designmagazine.us/progressive-and-responsive-navigation/
		http://designmagazine.us/progressive-and-responsive-navigation/#comments
		Mon, 13 Feb 2012 11:53:56 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/progressive-and-responsive-navigation/
		
			


]]>
			http://designmagazine.us/progressive-and-responsive-navigation/feed/
		0
		
		
		
		http://designmagazine.us/a-beginners-guide-to-jquery-based-json-api-clients/
		http://designmagazine.us/a-beginners-guide-to-jquery-based-json-api-clients/#comments
		Fri, 10 Feb 2012 10:37:56 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/a-beginners-guide-to-jquery-based-json-api-clients/
		
			


]]>
			http://designmagazine.us/a-beginners-guide-to-jquery-based-json-api-clients/feed/
		0
		
		
		
		http://designmagazine.us/three-super-easy-ways-to-pull-off-a-masonry-layout/
		http://designmagazine.us/three-super-easy-ways-to-pull-off-a-masonry-layout/#comments
		Wed, 08 Feb 2012 06:00:30 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/three-super-easy-ways-to-pull-off-a-masonry-layout/
		
			
 Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights


Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing  items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.
Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width. 


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
What Is a Masonry Layout?
When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

However, if the objects have variable heights, the results are much more difficult to predict. Instead of a nice tight grid, we get something that tends to be fairly scattered. 

The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. It’s a pretty interesting topic and various developers have come up with several ways to go about it. Let’s take a look at three of the current best solutions. 
To go one step further, we’re going to make sure that all three solutions are responsive, meaning the grid will reflow as the window size changes. 
jQuery Masonry

jQuery Masonry is the most popular solution to pull off this type of layout. It utilizes some pretty fancy JavaScript to reflow a series of divs. 
Putting Masonry into practice is pretty easy, all you need is a container that holds a series of divs that you want to arrange masonry style. You can place anything you want inside the divs, in this case I threw in some placeholder images.
Once you have that in order, toss in jQuery and jQuery Masonry. Then you need to create a simple function that identifies your container and targets the class that we used for our Masonry images divs. Here’s a basic example:



<div id="container">

	<div class="masonryImage">

		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/200/food/1" alt="" />

	</div>


]]>
			http://designmagazine.us/three-super-easy-ways-to-pull-off-a-masonry-layout/feed/
		0
		
		
		
		http://designmagazine.us/a-beginners-guide-to-using-ajax-in-your-website/
		http://designmagazine.us/a-beginners-guide-to-using-ajax-in-your-website/#comments
		Mon, 06 Feb 2012 11:00:45 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/a-beginners-guide-to-using-ajax-in-your-website/
		
			
 AJAX is a method that has been around for a while, yet in the past was not something that was used by many developers. Only recently has it been gaining more attention, especially with the rise in web applications that demand a better user experience




AJAX is a method that has been around for a while, yet in the past was not something that was used by many developers. Only recently has it been gaining more attention, especially with the rise in web applications that demand a better user experience. AJAX is not a programming language in itself, but rather a new way to use JavaScript in relation to a web page, and it’s this new technology that can make webpages faster, more user-friendly, and the overall function more efficiently.




AJAX stands for Asynchronous JavaScript and XML, and is used for updating and interacting with a server via JavaScript, therefore allowing far more functionality with the server without having to reload the webpage. In this article, we’ll go over the basics for implementing AJAX into your website.
If You Know JavaScript, AJAX is Easy
If you understand at least the basics of JavaScript, you’ll be able to pick up AJAX quite easily. You can make a page interact with the user with JavaScript alone, and then based on those user interactions you can send, receive, or update page content in relation to the server’s response when needed.
Let’s say we have a simple button, and we want it to update some data on the page. Imagine we have some input fields before this that the update button will take care of.
Update

As seen in the button code above, upon clicking on the button, we can call a JavaScript function updateProfile(). If you know JavaScript, there’s nothing new there. The function that is defined between script tags will then be called:


As is best practice, these script tags and all code in between can be placed right before the body tag. Alternatively the JavaScript can be placed within the header (depending on the site structure or specific needs for this page, it may be smarter). Of course, with larger pieces of code, it should be placed within a JavaScript file .js and the file should be included in the header.
From here on, we can place any code we want executed when that button is pressed inside of this function. Again, nothing new here. With traditional JavaScript, we could manipulate any content that is already in the page, as long as it didn’t need any more data from the server. A good example of using JavaScript only can be found here: Freelance Finances Calculator.
If we needed additional data from the server, we would need to bring in a server-side scripting language and reload the page entirely. That’s where AJAX comes in — to solve this problem. Within the updateProfile() function, we can use AJAX code to interact with the server (via JavaScript!), and we are now able to retrieve, update, and delete information as needed on the server, no reload required.


The XMLHttpRequest and ActiveXObject Objects
In order to begin using AJAX code, you need to tell the browser that it will be interacting with the server. In JavaScript there are two objects that help AJAX work: the XMLHttpRequest and ActiveXObject objects. While these are the basis for object-oriented programming with JavaScript, you don’t need to understand or implement object-oriented concepts to an extent to use AJAX. In fact, we’ll walk you through it right here.
Both objects do the same thing, but they are just meant to support different browsers. The objects are meant to exchange and handle data with the server behind the scenes of the webpage; simple as that.
To tell the browser you will be using AJAX, use the following code (Credit to W3Schools):


The code above is pretty simple. First, we create a variable that will hold our object; whether it is a XMLHttpRequest or ActiveXObject will be dependent on what browser the user is in. (Remember, they both do the same thing.) If we can detect that our browser can handled the XMLHttpRequest object via window.XMLHttpRequest, then we can set our variable to this object. Otherwise, we should set it to the ActiveXObject.
This will be the start of any AJAX code you place into a website. Note that if you are using multiple functions, it may not be the most efficient solution to declare this code at the beginning of every function. If used within several functions, it would be more efficient to set this variable on page load.
Receiving Requests from the Server
Now that AJAX is “all set up” for use in our browser, we can begin the fun part – interacting with our server. Whichever request object is used (based on the browser), there are a set of pre-defined functions we can use to get information from a server via AJAX, send information, or manipulate information.
The first pre-defined property we’ll look into is the onreadystatechange property. The does just what it says, it calls the function it holds (see below) when the readyState is changed. The readyState is just the state our server tells us it’s in: processing, downloading, or completed.
xmlhttp.onreadystatechange = function(){
	// This code will be executed each time the readyState changes
}

Each readyState is defined by a number, and we can check to see if our current readyState equals that number to process our code dependent on what the server’s doing:

ajaxRequest.readyState == 0 // request not initialized
ajaxRequest.readyState == 1 // server connection established
ajaxRequest.readyState == 2 // request received
ajaxRequest.readyState == 3 // processing
ajaxRequest.readyState == 4 // completed and response is ready

For example, if we wanted to execute some code only after the data or actions we’ve requested and ready and have our feedback for us, we’d check to make sure our readyState was at 4:
xmlhttp.onreadystatechange = function(){
	// This code will be executed each time the readyState changes
	if(ajaxRequest.readyState == 4){
		// This code will be executed if our request
		// is completed
	}
}

We can access the data we’re requesting by using either the responseText or responseXML properties respectively. responseText is for retrieving text-based data, while responseXML can be used for retrieving XML based data. Then, using basic JavaScript again, we can use these properties to assign our feedback from the server in a div, or do whatever else we like with it:
xmlhttp.onreadystatechange = function(){
  // This code will be executed each time the readyState changes
  if(ajaxRequest.readyState == 4){
     document.getElementById("myData").innerHTML=xmlhttp.responseText;
  }
}

Hopefully you can understand the logic behind all this, but of course none of the above will do us any good as long as we don’t tell our code what we want to request in the first place. We needed to create a function to handle our request first, and the above code simply explains how we’ll show our data from the server after we’ve requested it.
Sending Requests to the Server
Like with receiving responses from the server, our request object also has pre-defined properties and functions for dealing with sending requests to the server. Anytime we need to send new information, manipulate information, or send instructions of any type to work with our web application, we’ll be sending a request to the server. After we’ve sent the request, we can turn around and use the function we created above (using onreadystatechange) to see our results.
There are two parts to sending a request to the server via AJAX, as seen in the example below:
xmlhttp.open("GET","ourPHPCode.php",true);
xmlhttp.send();

The first prebuilt function, open(), let’s us define what server-side script we’ll be using to communicate with the server. We include our server-side script as the second parameter and it will be processed without refreshing the page. This function also holds a few other arguments that we’ll look into more detail soon.
Included in our server side script ourPHPcode.php, we’ll include the more in-depth instructions that will work with our server. After AJAX opens the server-side script file via the open() method, we can send those instructions out via the send() method.


A Closer Look at Open()
When we are opening a file to send to the server via AJAX, the most important portion item is the link to our server-side file. Beyond this though, we have two more: the method for sending the request and async.
open(method,file,async);
Example: open("POST", "myFile.aspx", false);

The method for the open() function can either be GET or POST. If you are familiar with PHP (and many other similar languages) and sending data via HTML forms, the concept is much the same. GET can be used in most situations, and you can even send values through an URL like with HTML forms:
open("GET", "ourPHPCode.php?email=test@test.com&firsname=Johnny&lastname=Smith", false);

GET will often times get you a cached result, which you may not always want. If you still would like to use the GET method, you can simply create a “new, fresh URL” for the browser to go to by appending a unique ID, so it will send you an uncached result:
open("GET", "ourPHPCode.php?x=", false);

POST can be more secure than GET, and also has no size limitations. If you’re ever working with data sensitive information (like passwords), then use “POST”.
Async, the last parameter, can either be set to true or false. You’ll want to use true the majority of the time, and false can sometimes be used for smaller requests. Setting asynchronous to true simply means you’ll be able to do other functions while your AJAX request is waiting for the server response. (It’s recommended.) 
Working with a Server-Side Language
After we’ve set up our AJAX to request information from a server-side script and also to handle its response, there’s really nothing new or magical about our server-side script. The code is the same, and whatever you do with it will follow the same syntax as always. All AJAX does is help to be the middleman while this script executes and handles all the dirty work, allowing us to eliminate or cut down on the need for page refreshes, and allowing us to execute other functionality on a page while our server-side script is working with the server.
Let’s say we simply want to echo out a string (via PHP) when we change some form input. We’ll use our function that we created above, which defines our AJAX request object, tells the browser what to request, and where to put the response.
Our HTML file (with our AJAX/JavaScript):





	

	

	



Our PHP file ourPHPCode.php.


Using JavaScript’s onChange event, we trigger our JavaScript function, updateProfile(). Within this function we’ve done all our AJAX set up, and sent a request to our PHP file, ourPHPCode.php, which simply echos back our string. Therefore, we use the power of AJAX to echo out this string when our input field is changed. There is no need for refreshing or waiting on a slow response for a server.
Obviously, this example is incredibly simple and very pointless. This is just, at the most basic level, how we can connect a server-side script with an HTML page using the power of AJAX. Within the PHP script, you can take in data from a form (for example if we used the POST method in our open() function, we could just use PHP’s $_POST variable to obtain that information), manipulate it, send it to a server, update information in a database, and return a response via PHP’s echo statement.
Let’s say we have a simple HTML form that asks for a name and email. Below is an example of something more elaborate:
Our HTML/JavaScript page:






	

	First Name;

	

	First Name;

	

	First Name;

	

	

	

	

	




Our PHP Script:


The above shows how we can manipulate form data, and one can see that there’s no difference in how we use our PHP code to work with a server. We could also include a link to a database connection and work with a database with the information we grabbed from the same page. Just like an HTML form or otherwise can use POST to send data, so can AJAX. From a server-side script’s perspective, it’s all the same.
Conclusion
AJAX is a revolution to web technology, allowing our client-side scripting to reach server data as needed, yet still allowing us to code with the faster and often times more user-friendly benefits of client-side. It’s been around for a while, but it’s great to see now how AJAX is really taking off as common practice.
While there are endless tutorials on the web for doing specific things with AJAX, such as creating chat boxes, live feeds, updating info on the fly, and so much more, it’s more important than ever to understand the basis of how AJAX works. Having a true understanding of AJAX can help any developer to use the technology to the fullest and in a wide variety of siutations most efficiently.

Web Design: Say No to Spec
Building Web Apps: File and Directory Structures
Creating a Groupon-Like Count Down Timer
Design Research: Methods and Perspectives


Written by: Kayla Knight for Onextrapixel – Web Design & Development Magazine | No comment




Post Topic(s): Development



     



Artica Source: A Beginner’s Guide to Using AJAX in Your Website

]]>
			http://designmagazine.us/a-beginners-guide-to-using-ajax-in-your-website/feed/
		0
		
		
		
		http://designmagazine.us/5-online-playgrounds-for-html-css-and-javascript-compared/
		http://designmagazine.us/5-online-playgrounds-for-html-css-and-javascript-compared/#comments
		Fri, 03 Feb 2012 06:00:45 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/5-online-playgrounds-for-html-css-and-javascript-compared/
		
			
 Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. 


Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.
Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short. 


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
CSSDesk

I’ll start with CSSDesk because it’s one of the oldest on this list. It’s been around for years now as a quiet and obscure little tool that is extremely helpful for playing with basic web code. CSSDesk is a very simple tool that focuses purely on HTML and CSS. 
What I Like About CSSDesk
There are a lot of things that I just love about CSS Desk. There are three main sections: HTML, CSS and live preview, the sizes of which can all be easily tweaked with a click and drag. I like that you can easily see everything you need in one simple view. There’s no effort or setup here, just load the page and start creating.
There’s also basic syntax highlighting just like all of the other tools on this list. However, one fairly unique feature that you don’t often see in these types of tools is line numbers. It’s such a simple addition but I tend to like line numbers so I really appreciate the inclusion.  

The toolbar features are pretty cool as well, providing some options that you simply don’t find other places. In addition to the standard sharing feature, you also have the option to download what you just built. Further, there’s a set of default tiling background textures that are applied if you don’t manually override them. These are fun if you’re just building a button or widget of some kind and want something other than the typical plain white background.

What I Don’t Like About CSSDesk
Honestly, there’s not much to dislike about this one. Sure, it’s simple and doesn’t have some of the fancy features the other options have, but that’s also what makes it great. I hardly ever use this one anymore but every time I do it’s so nice I think I should stop by more often.
The biggest downside for hardcore coders is the lack of JavaScript support. If this is a deal breaker for you, try checking out one of the other options.
JS Bin

JS Bin is another popular place to tinker around with your code. The design of this app is quite minimal and really allows you to focus on the code. By default, the page only shows the HTML and live preview panes, but you can easily add JavaScript to that as well. 
What I Like About JS Bin
There are quite a few nice features on JS Bin. The first thing that I found myself appreciating is the fact that refreshing the page doesn’t kill your work. The preview updates automatically but for those rare times when you do need a manual refresh, it’s nice that your first instinct (Command-R) doesn’t result in the accidental loss of an hour’s worth of tinkering.

As with CSSDesk, you save, share and download your work. The place where this obviously pulls ahead though is the JavaScript implementation. You can obviously enter your own JS but as a bonus you can choose to include popular libraries like jQuery. 

Another cool feature is the ability to control which panes you see by manipulating the URL. For instance, “http://jsbin.com/#javascript,html,live” will get you all three panes while “http://jsbin.com/#html,live” will just get you two.
What I Don’t Like About JS Bin
To be honest, JS Bin is my least favorite option on this list. It’s not bad, but it definitely lacks the charm of the others. One thing that always gets me is that there’s no dedicated place for CSS, forcing you to embed it into your HTML. This works just fine, but it’s not as nice as the intentional separation seen in the other options.
jsFiddle

jsFiddle has completely taken off in the past few months to a year and is probably the most popular option on this list at the moment. And for good reason, this is one amazing app. Let’s face it, once you dig into jsFiddle, you may never look at any of the other options again. 
What I Like About jsFiddle
There are a ton of great things to cover in my list of reasons why you should use jsFiddle. First up is the layout. There are four panels (HTML, CSS, JavaScript and preview) so you can see everything you need to at once and resize each area on the fly. The layout system here feels really flexible and is actually sort of fun to play with.

While we’re discussing panels, you can customize the CSS and JavaScript panels to utilize your favorite third party tools. You’ll find support for the Sass SCSS syntax and CoffeeScript. 

jsFiddle lets you create a login and view a dashboard of your past saved work. There are a ton of menu options and tools once you’ve saved a fiddle, my favorites are the ability to quickly create a fork and the option to automatically tidy up your messy code structure.   

In addition to the panel customization options, the sidebar has a bunch of other great features as well. For instance, you can quickly add both any major libraries that you want to include (jQuery, MooTools, etc.) and your own JavaScript/CSS resources. 

One last amazing jsFiddle option that I only just discovered the other day: you can embed fiddles into a webpage. This option is found under the share menu and is a great alternative to other code embedding services.
What I Don’t Like About jsFiddle
My main beef with jsFiddle is the lack of an auto update option for the preview. Once you’ve used all the other options on this list and experienced the joys of auto update, it’s hard to put up with manual refreshes every few seconds in jsFiddle.
As far as other features go, it’s the best on the list but that one annoyance often drives me elsewhere if I just want to bust out a quick test. Keyboard shortcuts help, but they’re still not as nice as something automatic. 
Dabblet

Dabblet is a fairly new kid on the block in this genre. Like CSSDesk, it focuses on only HTML and CSS with no JavaScript. However, don’t count it out because it brings some serious innovation to the table that you won’t find in any other editor. 
What I Like About Dabblet
By default, Dabblet is split into three tabs: CSS & Result, HTML & Result and Result. This provides flexibility and focus while allowing you to always keep an eye on the result.

You can change things up with the controls shown below. The split can be vertical, horizontal or taken out completely. There’s also an interesting “behind code” mode where your result is simply the background for the coding area. Notice there’s also a message about using prefix-free. I use Dabblet all the time and never noticed this until just now! This means that you don’t have to use crazy vendor prefixes and can code the simple defaults, the hidden JavaScript will make sure your browsers interprets it correctly. 

Dabblet has some great saving options as well such as “save anonymously.” It also links to your GitHub account, which coding nerds like will love. 

My favorite Dabblet feature is the super slick hover effect integration in the CSS. They’re easier to show that describe. Here two few examples:

As you can see, hovering over certain bits of CSS brings up these little tooltips that are really great. You can get previews for fonts, colors, sizes, and even images.
What I Don’t Like About Dabblet
Dabblet is a bit quirky from a visual perspective, you either love it or hate it. I personally really enjoy using it but really wish that I had more control over the panel size. Having an auto 50/50 split is great, but I should be able to manually adjust that however I choose. 
As far as I know, there’s also no way to view your HTML and CSS at the same time, which is a little annoying if you’re used to options like jsFiddle where you can keep an eye on everything at once. 
Tinkerbin

Tinkerbin is the closest alternative to jsFiddle that I’ve found. Though it doesn’t have all of the fancy features found in jsFiddle, it has a few tricks of its own that are really nice.
What I Like About Tinkerbin
The default panel layout on Tinkerbin is probably my favorite on this entire list. It’s a very logical layout that puts the code on the left and a nice big auto-updating preview on the right. The HTML, CSS and JavaScript sections are all stacked on top of each other, with optional tabs that allow you to focus on just one of these. 

Further, Tinkerbin supports even more alternate syntax options than jsFiddle. You can choose HTML or HAML; CSS, SCSS (with Compass), the old SASS syntax or LESS; and JavaScript or CoffeeScript. Needless to say, if you dig preprocessors, this is the option for you.

Tinkerbin is the only option that allows you to swap out your preview for a nice, extensive “View Source” window.

What I Don’t Like About Tinkerbin
Even more so than Dabblet, the Tinkerbin layout is completely rigid. Sure, I like the default setup the best, but sometimes I want to make that preview wider and I simply don’t have the option here.
Further, the saving options aren’t the best. There’s no account setup, dashboard, GitHub integration, etc. You simply save your experiments to a shortened URL. 
Conclusion
By now I’m sure you can see the benefits of having a few of these sites bookmarked. I encourage you to experiment as often as possible with new ideas to keep yourself fresh and these services provide an awesome way to do it.
I hope this review has served as a helpful look into the details of each of these solutions. You should now know not only what makes each option unique but also where each falls short. This will help you make an informed decision about which one or two to primarily focus on.
I personally bounce back and forth with all of them fairly regularly but lately I’ve been hanging out mostly in jsFiddle, Dabblet and Tinkerbin. Which of these is your favorite and why?
Artica Source: 5 Online Playgrounds for HTML, CSS and JavaScript Compared

]]>
			http://designmagazine.us/5-online-playgrounds-for-html-css-and-javascript-compared/feed/
		0
		
		
		
		http://designmagazine.us/a-call-for-better-fragment-identifiers/
		http://designmagazine.us/a-call-for-better-fragment-identifiers/#comments
		Thu, 02 Feb 2012 11:00:23 +0000
		admin
				
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		

		http://designmagazine.us/a-call-for-better-fragment-identifiers/
		
			
 Where would the web be without links? 
Where would the web be without links? Links are what hold together what we know as the World Wide Web. Without links, the World Wide Web would be more appropriately called the World Wide Set Of Unrelated Pages, or, incidentally, WWSOUP.
While it’s great how simple and effective the process is of “linking” pages together, I think there’s room for improvement.
If you’ve never heard of the term fragment identifier, well, that’s just the official name for the part of a URL that follows the hash symbol (“#”). Some people refer to links with fragment identifiers as “in page links”. So for example, in the following URL, the fragment identifier would be the string “scroll-to-fragid”:

http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid


If you visit the above URL (which is the WHATWG HTML5 spec that discusses fragment identifiers), the page will automatically jump to the section that’s been identified by the browser as the “scroll-to-fragid” section.
Fragment identifiers also come in handy for deep linking and preserving state in Ajax-based applications. So these certainly have an important role on the web.
How Are Fragments Identified?
In order for the browser to correctly identify which section of the page the window should scroll to, the fragment needs to be identified within the HTML by means of the id attribute. This means that if a web developer hasn’t done his job, then there will be no way to link to a specific fragment of any particular document.
So, if you were linking to a document that was five screens long that didn’t have any id attributes in the source, and you wanted to link to a specific section three screens down, you would have no way to do this. You’d have to link to it, then place the words “Scroll down to section B” or something ridiculous like that.
The Problem With Fragment Identifiers
The simple problem that I see with fragment identifiers is that their existence and functionality relies completely on the developer rather than the browser. Yes, the browser needs to read and interpret the identifier and identify the matching fragment. But if the developer doesn’t include any id attributes in the HTML of the page, then there will be no identifiable fragments.
Do you see why this is a problem? Whether the developer has coded identifiers into the HTML has nothing to do with whether or not the page actually has fragments. Virtually every web page has fragments. In fact, sectioning content as defined in the HTML5 spec implies as much. Every element on the page that can contain content can theoretically be categorized as a “fragment”.
So why is it up to the developer (or content creator) to define whether or not a specific portion of the content can be linked to? When any page of content is created, there is no way of knowing which sections of the page are worthy of being identified. The developer or content creator may have a general idea of how a page’s content might be divided up, but ultimately it will be the linking resource that should have full control over what portion of the page they want to highlight.
That, after all, is how linking works. A page that’s displayed as a result of a web-based hyperlink is displayed to the end user only because the referrer (i.e. the page linking to it) defined the link that way. This means that, regardless of what the developer has done behind the scenes in the HTML, all HTML fragments on that page should be identifiable by external referrers.
The Solution: Power to the Browser and User
The solution, as I see it, is for the HTML spec to require that browsers have an internal mechanism for identifying fragments that can optionally be overridden by the developer. Just as the browser, by default, makes all links blue and underlines them, and allows these styles to be changed via CSS, likewise the ability to link to specific sections of a page should be built into the browser, and then the developer should have the option to change this.
Here’s a simple example of how this might be implemented. Suppose you have the following HTML page:
Page Title
Some introductory text.

Page Subhead 1
Some text for subhead 1.

Page Subhead 2
Some text for subhead 2.

Page Subhead 3
Some text for subhead 3.

Page Subhead 4
Some text for subhead 4.

This type of structure is common on almost all blog posts. The post is divided into sections by means of headings, but unless the developer actually hard-codes id attributes onto each heading tag, there is no way to link to any of those unique sections of the page.
To solve this problem, the browser should allow native fragment identifiers that use the HTML elements themselves in a CSS selector-like fashion. So if you wanted to link to “Page Subhead  3″ in that HTML page, you could do something like this:
Check this out!

Notice the string h2:3 that appears after the hash symbol. This tells the browser to link to the third 

 element on the page. This example, of course, is just theoretical, and not meant to imply that this is the way it will be implemented. This is just to illustrate how it could be done without being dependent on developer-added attributes.

Why Should Fragments Be Identified By Users?
The reason fragments should be identifiable by users is because a user, not the content creator or the developer, will ultimately decide whether or not a portion of content is valuable or notable in some way.
Yes, the content creator should have the ability to decide how a page is generally divided, if they choose to do so. But the end user should not be restricted from linking to content fragments just because a developer couldn’t be bothered to add id attributes to every element on the page. And that’s besides the fact that it would be a waste of time for a developer to do that or to have to build a CMS that does it automatically.
Blog Comments Get It Right
Linking directly to someone’s blog comment is very useful. Even if a blog doesn’t have an active link for each comment, it’s pretty easy to use developer tools to find the comment’s id and link to it. I’ve done this many times on Smashing Magazine (they don’t have live links on each comment).
If there was no way to link to an individual blog comment, this would be a great hindrance to linking on the web. It would not be enough to link to the “#comments” section and then hope for the best. So CMSs like WordPress do the right thing by dynamically adding a unique identifier to each comment.
As mentioned, this saves the content creator from having to do it themselves, and puts the identifiability (or, the decision on what’s valuable) in the hands of the user or the referring website.
It’s Already in the Works
Being fearful of writing an article like this and having someone smarter poke holes in my proposal, I ran a draft of this piece by Paul Irish and he pointed out that an improvement to fragment identifiers is already in the works, but in very early stages.
A developer named Simon St. Laurent is hosting an “unofficial draft” of a specification called Using CSS Selectors as Fragment Identifiers. The draft is authored by St. Laurent and Eric Meyer and seems to be in the works for about a year (based on the date on that page). There’s even a jQuery script that attempts to implement this new type of fragment identifier.
And on a related note, media fragments (i.e. deep linking in audio and video, similar to what you can do on YouTube) have now been introduced and have some browser support (evidently WebKit and Firefox). Check out this part of the spec for the syntax.
All credit to Paul Irish for filling me in on these details.
Conclusion
Although implementing better fragment identifiers could be a challenge to support and publicize, for the reasons I’ve explained here, I think it’s a worthwhile addition to the HTML/CSS spec. I’m glad someone is already working on a proposal for this, and I hope this article serves to help make this known so that control of linking to content fragments ends up where it’s supposed to be: in the hands of users.
 
Related posts:

Is it Accurate to call HTML5-Based Code Forking “Graceful Degradation”?






 



Artica Source: A Call For Better Fragment Identifiers

]]>
			http://designmagazine.us/a-call-for-better-fragment-identifiers/feed/
		0