GHads mind

developers thoughts & finds

Archive for the ‘Web development’ Category

Chrome 10 javascript trap with variable named ‘performance’

leave a comment »

Just a quick reminder.

Don’t name any of your own javascript variables ‘performance’. Chrome uses this variable internally for its developers toolbox. I used it to measure my own performance metrics which worked perfectly in any other browser, but testing Chrome 10 revealed strange results. In the end I discovered that Chrome 10 used it for its own measurements which made my efforts useless, at least the way I wanted to use the variable.

Greetz,
GHad

Written by ghads

March 25, 2011 at 11:02 am

HTML5 <time> microformat with Grails (UTC dates…)

with 2 comments

As I mentioned last post I’m doing a little pet project with Grails, HTML5 and MongoDB. Now I wanted to include the rendering of dates in StackOverflow style, something like: 5 minutes ago, about an hour ago and such. As HTML5 defines a <time> microformat I naturally wanted to use this one today and also found a nice jQuery plugin to convert times into the format I like: timeago. This one also includes support for the <time> tag by default.

But there’s a catch (as always…). The <time> tag and the plugin depend on ISO8601 UTC dates, which MongoDB stores nicely. But by getting data from MongoDB, you have your java.util.Date class and trouble starts, as there is no default way of formatting and recalculating dates to UTC with one call. Else I could have used the Grails included formatDate tag.

So I first searched for an easy way to format a Date instance to ISO8601 UTC format. Luckily I found the following post that shows how to set UTC for a formatter and the right format string for ISO8601. As this is a two line call and I didn’t want to make a Utils-Class for representation only to call it from the controller and having a String for rendering instead of a Date. And I didn’t want to include the formatter code on every page, I came up with a Grails Filter solution.

By including this class in grails-app/conf:

class MyFilters {
	def filters = {
		addUtils(controller:'*', action:'*') {
			after = {
				// add formatter for UTC dates in ISO8601 format
				SimpleDateFormat ISO8601UTC = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'")
				ISO8601UTC.setTimeZone(TimeZone.getTimeZone("UTC"))
				params["_UTC"] = ISO8601UTC
			}
		}
	}
}

I have a new formatter instance inside the params ready to use for formating dates to UTC in the correct way for the tag:

<time class="timeago" datetime="${params._UTC.format(created)}">${created}</time>

I used an underscore to seperate the utils from regular paramaters used to render the site. For now I don’t care about a new instance for every call, but if you care, just make the formatter static and reduce the scope of the addUtils Filter to only the pages that need it.

Greetings,
GHad

Written by ghads

January 26, 2011 at 3:10 pm

Grails + HTML5 = Works

with 6 comments

Today while building a project to test MongoDB integration with Grails, I was curious whether Grails can emit HTML5. So I just tried to apply to great HTML5 Boilerplate (http://html5boilerplate.com/) template and it worked out wonderful. I just changed the default main.gsp, main.css and application.js and added some more files…

Of course some things need adaption:

- Using jQuery 1.4.4 instead of 1.4.2
- All hardcoded path replaced with ${resource(dir:’images’,file:’favicon.ico’)} for example
- Javascript libs can be embedded with <g:javascript library=”…” /> instead of a hard coded path, when you place your lib file into the web-app/js folder
- For JQuery Fallback loading the src can be exchanged with ${resource(dir:’js’,file:’jQuery-1.4.4.js’)} to avoid hard path coding
- Because of the templating/layout nature of Grails view, JavaScript loading of jQuery and the additional plugins.js and application.js (also via <g:javascript …>) cannot be pushed to the very end of the page, but must be loaded before any part of a page is been decoreted by the template (except for belatedpng)
- I reused the default spinner div, but cleared the default grails code in application.js and introduced two simple functions for showing and hiding the spinner
- For flexible layout I used the following construct plus two additional GSPs header.gsp and footer.gsp

<div id="container">
 <header>
  <g:applyLayout name="header" >
   <content tag="header">
    <g:pageProperty name="page.header" />
   </content>
  </g:applyLayout>
 </header>
 <div id="main">
  <g:layoutBody />
 </div>
 <footer>
  <g:applyLayout name="footer">
   <content tag="footer">
    <g:pageProperty name="page.footer" />
   </content>
  </g:applyLayout>
 </footer>
</div>

This enables the header.gsp and footer.gsp to include portions of the GSP page to show while being modular. The header/footer.gsp looks like:

<%@ page contentType="text/html;charset=UTF-8" %>
<b>Footer begin...</b>
<g:pageProperty name="page.footer" />
<b>Footer end...</b>

While a GSP page may looks like:

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
 <head>
  <title>my title</title>
  <meta name="layout" content="main">
 </head>
 <body>
  <content tag="header">
   … draw the header here…
  </content>
  <h1>Hello ${name}!</h1>
  <content tag="footer">
   … draw the footer here…
  </content>
 </body>
</html>

This allows for dynamic customizing of header/footer portions per page if desired, e.g. to render a status per page, which has its position and styling defined via the layout.

The rendered result of this looks like:

Header begin… … draw the header here… Header end…
Hello World!
Footer begin… … draw the footer here… Footer end…

The HTML5 Validator http://html5.validator.nu/ only complaints about the chrome frame but validates my rendered test page sourcecode without any moaning.

For CSS3, the integration was a nobrainer, I just added everything to main.css, removed all grails styles and used a @import url(styles.css); for a clear seperation of predefined and own styles at styles.css. The W3C Validator for CSS3 doen’t really like the main.css file, but as it comes directly from the boilerplate template I don’t really care. I can now start writing my pet project with HTML5 and CSS3 and can be sure to have maximum compatibility with yesterdays, todays and tomorrows browser and will update my code when a new version of the fantastic boilerplate template comes out.

Oh, for your own integration before going productive don’t forget to add expires to external resources, minify .css and .js files to one and enably GZIP transfer at your server. That should be all for a snappy cool HTML5/CSS3 site done with grails.

Have fun and greetings,
GHad

Written by ghads

January 21, 2011 at 9:43 am

Stuff to check out

leave a comment »

Well, the web is full of surprises especially for people like me who want to try out everything but don’t have the time… I still hope to get some free time over the holidays to get some dev done and to check out all the links I’ve posted recently. Well, I still have some more :-) [no(c)]

Online/Multi computer syncs: https://www.mesh.com/Welcome/default.aspx (needs Windows Live ID though…),
Better…: http://www.getdropbox.com/ (50GB for 99$/year)

Adding a social network to your website: http://elgg.org/index.php (Sounds easy and looks good)

A nice Linux distro to try at a VM: http://www.linuxmint.com/

Office 2008 styled apps with JRibbon and A03 look and feel for Java: http://www.pushing-pixels.org/?p=941

MessageFormat for Java description: http://blog.nexaweb.com/post/a-guide-to-java-messageformat-or-how-i-learned-to-stop-worrying-and-love-macros/ (cool for templating)

Runtime class management: http://code.google.com/p/reflections/ (cool for frameworks for example)

Extending Java foreach: http://www.iam.unibe.ch/~akuhn/blog/2008/pimp-my-foreach-loop/

BTW… VirtualBox 2.1 is out with experimental OpenGL3D and x64 Guest under 32-Bit OS support. Must look for a portable edition… Okay, think that’s all for the moment, I’ll post some cool stuff later if I have time.

Greetz, GHad

Written by ghads

December 19, 2008 at 10:34 am

Play! Java Server/Services development

leave a comment »

Just a quick link again: http://www.playframework.org/

Quote from the page:

Discover a clean alternative to bloated enterprise Java stacks. Play! focuses on developers productivity and targets RESTfull Architectures

I just read the examples and it looks really cool for use at home, building some simple home services, for example a media album for all family members and such things. I’ll take a look when I’m finally done with my hardware…

Greetz, GHad

Written by ghads

November 18, 2008 at 12:10 pm

Google-API-Translate-Java

leave a comment »

Only a quick reminder to look at: Google Translation Api for Java

Makes i18n for example a no brainer, because for Menus, Buttons and little instructions, automatic translation should work well. When combined with automatic saved properties files, even offline mode for applications can do well.

Greetz, GHad

Written by ghads

November 13, 2008 at 9:35 am

Simple yet powerful JavaScript Console

leave a comment »

Just discovered Blackbird, an easy to integrate console for JavaScript debugging. Not tried yet, but looks very promising: http://www.gscottolson.com/blackbirdjs/

Next time I need to develop some JS, I’ll integrate it for sure…

Greetz, GHad

Written by ghads

October 15, 2008 at 11:41 am

Grails resources

leave a comment »

Hello again :-)

This time I found a nice blog entry about Grails and an overview of must-reads and resources for developing your first grails website: http://blog.saddey.net/2008/10/11/grails-links-from-my-first-week-with-grails/

Looks worthy for a closer investigation of grails. Well, I wanted to develop my own grails site as a little private side project since summer, but I still have no time. I first need to get my infrastructure right, as my 2 1/2 year old notebook is getting buggy and slow and needs a replacemt and that needs money, which I don’t have (not even banks have money nower days…). Maybe next three month I’ll get new hardware and energy for my side projects. At least I hope so.

Greetz, GHad

Written by ghads

October 13, 2008 at 9:32 am

Useful OS/free tools for admins/technicans

leave a comment »

Back from vacation I found this one some minutes ago at DZone. Must investigate further, I think I’ll compile my own list of useful and to investigate tools soon. Until then, here’s the link: http://www.downloadsquad.com/2008/10/01/24-great-open-source-apps-for-admins-and-technicians/

Greetz GHad

PS: Will post some useful Java stuff next weeks. Stay tuned…

Edit: Got one to investigate further… MetaWidget (http://www.metawidget.org/). Sounds very useful and interesting!

Written by ghads

October 8, 2008 at 8:37 am

Disable Chrome’s input field highlighting

with 2 comments

Just stumbled upon this usefull CSS trick for disabling Chrome’s input field hightlighting:

*:focus {outline: none;}

Written by ghads

September 16, 2008 at 8:23 am

Follow

Get every new post delivered to your Inbox.