RationalSpace

Archive for the ‘Frontend’ Category

Optimising CSS

leave a comment »

Great post on optimising CSS

Written by rationalspace

February 17, 2016 at 4:25 pm

Posted in Frontend, Performance, UI

Sharing videos to play embedded within Facebook

leave a comment »

So you have created good video content and have put it up on your website. How do you make it shareable on facebook?

Well, you can put a share button that facebook provides and the appropriate og meta tags on the page. Here is a set that facebook tells us to put in the page.

Now, in a typical scenario where you might have put your videos on Amazon S3 or your own Server, then clicking on the facebook share button will share the page of your website on which the video is embedded. It will not really embed the video in the news feed of facebook. Embedding in facebook news feed is much more useful as the users can click there itself and play the video. He need not go to one more page and again click play there. So the chances of your content going viral is more if the video that we share on facebook plays there itself.

This basically requires 2 things:

  • All your videos should be hosted on a secure URL i.e a URL starting with “https://” . Now you can get this done by applying for an SSL certificate for your website and enabling that on your server. However, if you are on Amazon AWS, you can do this very simply by using “Cloudfront”. You can create a cloudfront distribution – choose the S3 bucket that stores the videos and configure it.  Cloudfront by default gives an SSL certificate. Cloudfront does not give us very pretty URLs but then it suffices for the purpose of sharing. Also make sure that you have selected support for both HTTP and HTTPS on the cloudfront.
  • You also need a “SWF” / Flash player. Also this player should be hosted on the same S3 bucket which is behind the secure cloudfront. Basically, the flash player URL also needs to be secure. I used flow-player SWF  for this purpose but you can use whatever you like.

Here is a working demo.

Written by rationalspace

April 27, 2015 at 5:45 pm

Posted in Frontend, Social Media

Tagged with ,

css3 features

leave a comment »

Written by rationalspace

March 24, 2015 at 5:10 pm

Posted in Frontend, UI

Tagged with

Browser Caching with response headers

leave a comment »

Everyone is looking for high-speed ,faster websites with response time less than 100ms. Even Google in its quest to crawl more and more websites and increase its gigantic index size,  is now giving more weightage to websites that respond faster.

A lot depends on the communication between the browser and the web server. Nowadays, the browsers are becoming much more smarter – If the resource is already fetched once , then the browser requests it again to the server with the header “If-modified-since” <last modified time>. If the resource has not changed since the last time it was fetched by the browser, the server responds with a status code 304. This basically tells the browser that the requested resource is not modified and it can go ahead and serve it from its cache. So, the response headers sent by your web server play an important role in delivering the resource faster to the user.

This technique of conditional request works well in a desktop environment but when we use the same for mobile applications, it still turns out to be expensive. That’s because browser still needs to make a request to the server to confirm whether it should server from its cache or not. In a mobile scenario, we are constrained in terms of network speed, RAM, CPU of the device etc. So the more requests we make the more is the overhead in rendering the page which should be avoided.

So for things like JS, CSS and images can’t we just tell the browser not to request it since we don’t expect it to be changed frequently anyways?

Looks like we can. We should use headers called “cache-control: max-age: 1 year, public”. This will tell the browser that once it has fetched the resource it need not go again to the server looking for it till the time specified in max-age.

Also we can use another header called “Expires:<Timestamp GMT>”, which basically tells the browser that the resource does not expire till the specified time. So the data value for Expires is an HTTP date whereas Cache-Control max-age lets you specify a relative amount of time so you could specify “X hours after the page was requested”.

Though both these headers end up doing the same job effectively, still it may be better to use both. Cache-control is relatively new and has been introduced only in HTTP/1.1.  It is possible that if your page goes through some old proxies, the header may not be understood.

An advantage of using Cache-Control over Expires is that if you specify only “Expires”, your server may get overloaded with the requests from all users for a resource coming at the same time.

So why don’t you go back and check the headers in your websites? If these 2 are not there, make sure that you put them in!

Note: An awesome resource on web caching

Written by rationalspace

March 2, 2015 at 4:07 pm

Posted in Frontend, Performance

Using JSONP to make requests across domains

leave a comment »

Recently, I came across a requirement wherein we wanted to partner with other websites by giving them widgets of our stock charts. A widget is basically a tool or a piece of information that is useful and mostly just plug and play. Plug and play implies that one could take a small piece of code and embed in his blog/website and the information/widget will start showing up. In our case we wanted to make our charts available to anyone who would like to take it and embed in his/her blog.

This is pretty simple to do if it is some static piece of information like an image or a media file that needs to be shown on the other website. All you need to do is make an http request to your domain from the blogger’s domain. But we wanted our charts to be dynamic. Data should get updated each time a request is made. Now, JSON has been pretty much there for making any type of calls between client and server.

JSON

JSON (Javascript Object Notation) is a convenient way to transport data between applications, especially when the destination is a Javascript application.

JQuery has functions that make Ajax/HTTPD calls from a script to a server very easy and $.getJSON() is a great shorthand function for fetching a server response in JSON. But this simple approach fails if the page making the ajax call is in a different domain from the server. The Same Origin Policy prohibits these cross-domain calls in some browsers as a security measure.

But what about data transfer across domains?

A standard workaround is to make use of Cross Origin Resource Sharing (CORS) which is now implemented by most modern browsers. Yet many developers find this a heavyweight and somewhat pedantic approach. Also, you cannot possibly ask every blogger to first inform you about his domain, then you make an entry in the CORS file and only then would the widget start working for him. Pretty cumbersome, isn’t it?

So what is the way out ? 

JSONP

JSONP (first documented by Bob Ippolito in 2005) is a simple and effective alternative that makes use of the ability of script tags to fetch content from any server.

This is how it works: A script tag has a src attribute which can be set to any resource path, such as a URL, and need not return a JavaScript file. Using this I can fetch data from another server and make the Javascript draw a widget using it.

Here is an example:

Client Side:
$.ajax({
type : 'GET',
url : siteurl+'json/getSomeData.php',
data : {tick:(element.data('id')).toUpperCase(),callback:'callback_fun'},
dataType : 'jsonp',
cache : true,
crossDomain : true,
success : function(data){
}
});


function callback_fun(){
//do something; update your widget etc
}

Server:  PHP script example:

header("Content-Type: application/javascript");
$some_data = db_call(); //some db call
echo (isset($_GET['callback']) ? $_GET['callback'] : '').'('.json_encode($some_data).')';

Note the brackets enclosing in php script echo. Its pretty important.  Also, the callback is important. Won’t work without that.

See a demo here.

Written by rationalspace

February 9, 2015 at 4:20 pm

%d bloggers like this: