Mr Branding

Tuesday, October 20, 2015

How to Solve Caching Conundrums

The web wouldn't operate without caching. Between you and the server, there is a browser and any number of proxy servers which cache responses. Much of this is handled transparently by applications which dramatically reduce Internet traffic. However, it can also be the cause of bizarre web application quirkiness if you're not very careful …

Set Your Headers

headers

Caching is controlled by the HTTP status code and the Last-Modified, Etag and Cache-Control headers returned by every request. For subsequent requests to the same URL, the browser/proxy will either:

retrieve the previous data from its own cache
ask the server to verify whether the data has changed, or
make a fresh request.

The Cache-Control header primarily determines this action. It can set up to three comma-separated values:

nostore or nocache
nostore stops the browser and all proxy servers caching the returned data. Every request will therefore incur a trip back to the server.

The alternative is nocache. The browser/proxy will make a server request and pass back Last-Modified (date/time) and/or an Etag (response hash/checksum) in the header. These are present on subsequent requests and, if the response has not changed, the server returns a 304 Not Modified status, which instructs the browser/proxy to use its own cached data. Otherwise, the new data is passed back with a 200 OK status.

public or private
Setting Cache-Control to public means the response is the same for everyone and the data can be cached in browser or proxy stores. It's the default behavior, so it's not necessary to set it.

private responses are intended for a single user. For example, the URL http://ift.tt/1XiyZVj returns a set of messages unique to each logged-in user, even though both of them use the same URL. Therefore, the browser can cache the response, but proxy server caching is not permitted.

max-age
This specifies the maximum time in seconds a response remains valid. For example, max-age=60 indicates the browser/proxy can cache the data for one minute before making a new request.

Your server, language and framework often control these settings, so you rarely need to tinker -- but you can. Presume you wanted to cache an individual user's JSON response to an Ajax request for 30 seconds. In PHP:

[code language="php"]
header('Cache-Control: private,max-age=30');
echo json_encode($data);
[/code]

or a Node.js/Express router:

[code language="javascript"]
res
.set('Cache-Control', 'private,max-age=30')
.json(data);
[/code]

Continue reading %How to Solve Caching Conundrums%

by Craig Buckler via SitePoint

Project Cards Template with CSS and jQuery

A tutorial about creating portfolio template with expandable projects and a full-page navigationby using css and jQuery.

by via jQuery-Plugins.net RSS Feed

The Beginners Guide to WooCommerce: Taxes Report

JavaScript Goes Asynchronous (and It’s Awesome)

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

JavaScript has come a long way since its early versions and thanks to all efforts done by TC39 (The organization in charge of standardizing JavaScript (or ECMAScript to be exact) we now have a modern language that is used widely.

One area within ECMAScript that received vast improvements is asynchronous code. You can learn more about asynchronous programming here if you’re a new developer. Fortunately we’ve included these changes in Windows 10’s new Edge browser—check out the Microsoft Edge change log.

[author_more]

Among all these new features, let’s specifically focus on “ES2016 Async Functions” behind the Experimental Javascript features flag and take a journey through the updates and see how ECMAScript can improve your currently workflow.

First stop: ECMAScript 5 – Callbacks city

ECMAScript 5 (and previous versions as well) are all about callbacks. To better picture this, let’s have a simple example that you certainly use more than once a day: executing a XHR request.


var displayDiv = document.getElementById("displayDiv");

// Part 1 - Defining what do we want to do with the result
var processJSON = function (json) {
var result = JSON.parse(json);

    result.collection.forEach(function(card) {
var div = document.createElement("div");
        div.innerHTML = card.name + " cost is " + card.price;

        displayDiv.appendChild(div);
    });
}

// Part 2 - Providing a function to display errors
var displayError = function(error) {
    displayDiv.innerHTML = error;
}

// Part 3 - Creating and setting up the XHR object
var xhr = new XMLHttpRequest();

xhr.open('GET', "cards.json");

// Part 4 - Defining callbacks that XHR object will call for us
xhr.onload = function(){
if (xhr.status === 200) {
        processJSON(xhr.response);
    }
}

xhr.onerror = function() {
    displayError("Unable to load RSS");
}

// Part 5 - Starting the process
xhr.send();

Established JavaScript developers will note how familiar this looks since XHR callbacks are used all the time! It’s simple and fairly straight forward: the developer creates an XHR request and then provides the callback for the specified XHR object.

In contrast, callback complexity comes from the execution order which is not linear due to the inner nature of asynchronous code:

ECMAScript 5 XHR request callback

The “callbacks hell” can even be worse when using another asynchronous call inside of your own callback.

Second stop: ECMAScript 6 – Promises city

ECMAScript 6 is gaining momentum and Edge is has leading support with 88% coverage so far.

Among a lot of great improvements, ECMAScript 6 standardizes the usage of promises (formerly known as futures).

According to MDN, a promise is an object which is used for deferred and asynchronous computations. A promise represents an operation that hasn't completed yet, but is expected in the future. Promises are a way of organizing asynchronous operations in such a way that they appear synchronous. Exactly what we need for our XHR example.

Continue reading %JavaScript Goes Asynchronous (and It’s Awesome)%

by David Catuhe via SitePoint