Jeremi Joslin

It's been 2 years that I've stopped blogging on my personal blog. I'm doing more and more experiments, so I'm going to start again. I'm going to talk about my experiments in development.

It's been 2 years that I've stopped blogging on my personal blog. I'm doing more and more experiments, so I'm going to start again. I'm going to talk about my experiments in development.

I's been nearly a year since the last time I build eXo Portal (now GateIn). The Building process is way easier now! Get the sources: $ svn co http://anonsvn.jboss.org/repos/gatein/portal/trunk/ portal Follow the instructions of the README.txt. You will need to : download tomcat install maven 2.2.1 I had error during the build: Embedded error: Error while executing the compiler. Java heap space Just increase the memory to 512 (or 1024): $ set MAVEN_OPTS=-Xmx512m Go grab a coffee (or multiple), the build is long, very long (specially with my Chinese connection). when the build is finish, the tomcat is in "packaging/pkg/target/tomcat/" just type : $ cd packaging/pkg/target/tomcat/ $ ./bin/gatein.sh run and go to http://localhost:8080/portal/.

I's been nearly a year since the last time I build eXo Portal (now GateIn). The Building process is way easier now! Get the sources: $ svn co http://anonsvn.jboss.org/repos/gatein/portal/trunk/ portal Follow the instructions of the README.txt. You will need to : download tomcat install maven 2.2.1 I had error during the build: Embedded error: Error while executing the compiler. Java heap space Just increase the memory to 512 (or 1024): $ set MAVEN_OPTS=-Xmx512m Go grab a coffee (or multiple), the build is long, very long (specially with my Chinese connection). when the build is finish, the tomcat is in "packaging/pkg/target/tomcat/" just type : $ cd packaging/pkg/target/tomcat/ $ ./bin/gatein.sh run and go to http://localhost:8080/portal/.

Having an hour to kill at starbucks without internet, I'm giving a look at the code of Tornado (framework made by the guys of friendfeed). I discovered something quite interesting: the secure cookie. The concept of the secure cookie is instead of storing data in the session (usually stored in a database as by default in Django) storing the data in a cookie. But, you will tell me it's not secure, anyone can change the value and, for example, see the website with the id of another user. So to make sure the user can't change (or if he does, we can detect it), they sign the request with a secret key. Every time we want to get the value, they check if the signature is valid. The value is stored in clear, so don't store anything a user should not view. The cookie will look like this: uid=1234|1234567890|d32b9e9c67274fa062e2599fd659cc14 Parts: uid is the name of the key 1234 is your value in clear 1234567890 is the timestamp d32b9e9c67274fa062e2599fd659cc14 is the signature made from the value and the timestamp The interesting code (from Tornado's web.py): def set_secure_cookie(self, name, value, expires_days=30, **kwargs): """Signs and timestamps a cookie so it cannot be forged. You must specify the 'cookie_secret' setting in your Application to use this method. It should be a long, random sequence of bytes to be used as the HMAC secret for the signature. To read a cookie set with this method, use get_secure_cookie(). """ timestamp = str(int(time.time())) value = base64.b64encode(value) signature = self._cookie_signature(value, timestamp) value = "|".join([value, timestamp, signature]) self.set_cookie(name, value, expires_days=expires_days, **kwargs) def get_secure_cookie(self, name): """Returns the given signed cookie if it validates, or None.""" value = self.get_cookie(name) if not value: return None parts = value.split("|") if len(parts) != 3: return None if self._cookie_signature(parts[0], parts[1]) != parts[2]: logging.warning("Invalid cookie signature %r", value) return None timestamp = int(parts[1]) if timestamp < time.time() - 31 * 86400: logging.warning("Expired cookie %r", value) return None try: return base64.b64decode(parts[0]) except: return None def _cookie_signature(self, *parts): self.require_setting("cookie_secret", "secure cookies") hash = hmac.new(self.application.settings["cookie_secret"], digestmod=hashlib.sha1) for part in parts: hash.update(part) return hash.hexdigest() The main use I see for this is to scale. if you don't need to store a lot of things in your session, you can store it in a cookie, so you have one request less to the session store (database or server). Also, you can add easily new server without problem of session replication. What do you think about this?

We want to get data from a google spreadsheet and display it as a chart using gRaphaël. We are going to transform the following spreadsheet into a bar graph. gRaphaël’s goal is to help you create stunning charts on your website. gRaphaël is based on raphael.js. Raphael.js is a small JavaScript library that should simplify your work with vector graphics on the web. It currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. You can download the code of the sample at the end of this article. 1. Loading data from a Google Spreadsheet in javascript Google spreadsheet offers to serve its data thanks to the Google Data Protocol. The Gdata format that suite to our needs is JSONP. They call it JSON in script. Basically, what we are going to do, is include a script tag in the page that point to the spreadsheet data and when the data is loaded, it will call a function with this data in parameter. 1.1 Preparing our spreadsheet Create a spreadsheet that look like our (2 columns: the first one contain the label, and the second one the data) Save and publish the spreadsheet (Warning! Don't publish private data!) Click on "More Publishing Options," change file format to ATOM & generate URL The URL should look something like 'http://spreadsheets.google.com/feeds/list/[spreadsheetid]/[worksheetid]/public/values.' Find the parts of the URL that match the example below and keep them for the second part. 1.2 Loading the spreadsheet data /* * Specify the information about our spreadsheet */ var spreadsheet_id = "tiRm6cBSE3AZJnyLC6Wlysw", worksheet_id = "od6"; /* * Creates a script tag in the page that loads in the * JSON feed for the specified spreadsheet_id/worksheet_id. * Once loaded, it calls loadGraphJSON. */ function getJSON() { var script = document.createElement('script'); script.setAttribute('src', 'http://spreadsheets.google.com/feeds/list' + '/' + spreadsheet_id + '/' + worksheet_id + '/public/values' + '?alt=json-in-script&callback=loadGraphJSON'); // insert the script tag into the header document.documentElement.firstChild.appendChild(script); } /* * Extract the information we need into 2 lists (data and labels) * We iterate over the rows (json.feed.entry) * and extract our day and distance columns int 2 lists. * Once this list created, we call drawChart to draw the graph. */ function loadGraphJSON(json) { var data = []; var labels = []; for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; //this is our first column labels.push(entry["gsx$day"].$t); // this is our second column // We need to convert it to float because we get the data as string data.push(parseFloat(entry["gsx$distance"].$t)); } drawChart(labels, data); } Now that we have loaded the data from the google spreadsheet, we can pass to the second part of this article: displaying the data with raphael.js. 2. Displaying the data with raphael.js We are going to need some javascript library. insert them at the beginning of your page in the header tag. you can find them on the raphael.js website, or at the end of this article in the downloads. We can now pass at the interesting part: drawing the chart with raphael.js. function drawChart(labels, data) { /* * Create an instance of raphael and specify: * the ID of the div where to insert the graph * the width * the height * Tip: Remember that the reference point (0, 0) is at the top left position. */ var r = Raphael("holder", 600, 300); /* * Create the chart at the position with the parameters: * * pos on the x axis where the drawing start * * pos on the y axis where is drawing start * * width * * height * * the values: it needs to be a list of list since you can have multiple data * * extra parameters: * stacked: Putting stacked to false seems to create a problem with the labels * type: the end of the bar, it can be: round sharp soft */ var chart = r.g.barchart(10, 10, 580, 280, [data], {stacked: true, type: "soft"}); /* * Create an hover effect to display the value when the mouse is over the graph. */ chart.hover(function() { // Create a popup element on top of the bar this.flag = r.g.popup(this.bar.x, this.bar.y, (this.bar.value || "0") + " km").insertBefore(this); }, function() { // hide the popup element with an animation and remove the popup element at the end this.flag.animate({opacity: 0}, 300, function () {this.remove();}); }); /* * Define the default text attributes before writing the labels * you can find pore information about the available attributes at: * http://raphaeljs.com/reference.html#attr * and in the SVG specification: * http://www.w3.org/TR/SVG/ */ r.g.txtattr = {font:"12px Fontin-Sans, Arial, sans-serif", fill:"#000", "font-weight": "bold"}; /* * We write the labels. * There is a bug not fixed at the time of writing this article. We added a patch to * g.bar.js : http://github.com/DmitryBaranovskiy/g.raphael/issues#issue/11 */ chart.label(labels); /* * Set all the bar greater or equals than 15 to red */ // iterate over all the bar for (var i = 0; i < chart.bars[0].length; i++) { var bar = chart.bars[0][i]; // if the value of the bar is greater or equals to 15 we change the color to red if (bar.value >= 15) { bar.attr("fill", "#bf2f2f"); bar.attr("stroke", "#bf2f2f"); } } } You have now a beautiful Graph. see the result Download The code of this howto is available on github: http://github.com/jeremi/raphael-graph-demo. Download the source Links Source code raphael.js gRaphaël graph label bugfix (applied to g.bar.js in the source) another sample for loading data from a spreadsheet to a google maps (I reused their text for preparing the spreadsheet)