Archive for the ‘CSS’ Category

Simple Performance Improvement with Large Ehcache Disk Store Data Sets

Thursday, April 29th, 2010

One of my applications has several millions cacheable entries.  In order to cache as much as possible without going back to the database I use both a  memory store and a disk store in my Ehcache configuration.  Loading a serialized item from disk is still faster than loading from a database generally.  That being said I was running into performance issues due to the constant reads and writes to and from the disk store.   Due to the serialized nature of the data file it would block on subsequent accesses resulting in lag and performance issues.  So, how did I address it?  I decided to partition the single cache into multiple caches.  So, rather than using something like:

ehcache.getRegion(CONSTANT).get(id);

I now use:

ehcache.getRegion(CONSTANT + (id % 10));

I now have 10 different cache regions resulting in less concurrent access and better performance.  A very simple trick when you have extremely large data sets.  Remember, partitioning is always your friend regardless of what type of data you use.

UPDATE: This is being done in Ehcache 1.5.0…I understand there are better improvements in Ehcache 2.x, so please consult the documentation for more information.

Push RSS via RSS Cloud

Tuesday, September 8th, 2009

RSSCloud is a built-in mechanism for the RSS protocol that allows clients to immediately receive updates when new content becomes available. This results in immediate notification rather than polling every hour. Our new iPhone application, RSS Viewer, has had a plan to begin supporting RSS Cloud as soon as servers started offering it. Well, that wait will soon be over. As noted on the Wordpress.com blog, all blogs served by Wordpress.com will have RSSCloud enabled. That means that the RSS Viewer servers that power the RSS Viewer application on the iPhone will be able to connect directly to these feeds and immediately provide updates to your iPhone. In other words, when a new post appears on Wordpress.com (or any other RSSCloud based server), within seconds you will be notified on your iPhone. No more waiting for a few minutes before you get the notification. When a post is added, the RSSCloud system immediately pushes the notification to the RSS Viewer servers which immediately pushes the notification to your iPhone via RSS Viewer.


We hope to have RSS Viewer released this week for the iPhone. As RSSCloud is a server-based feature, we will hopefully have support for it within two weeks.

We have just launched support for RSSCloud and Wordpress.com enabled sites. Check out the video below.

Using Spring For Dependency Management

Sunday, April 26th, 2009

Spring is often times considered a web application library similar to the EJB 3.x stack.  However, Spring is so much more and can live in standalone applications as well.  Today I am going to touch on using Spring in standalone applications to handle dependency or configuration management.  I do not mean configuration management in the sense of CMS, but in the sense of handling and creating inner-dependencies between business objects, especially in the aspect of singletons.  One of the biggest issues with applications is high coupling by having to have objects create other objects, assign the relationships, and manage those dependencies.  However, one of the primary goals of any application is loose coupling, which in turn reduces maintenance.  Some of the traditional ways of handling these types of scenarios include:

  • Factories that create the instances and setup the dependencies.  While this abstracts the configuration to a factory, it still requires high coupling in the factory to talk to other factories and know about the objects and their inner dependencies.  It also requires static classes for the factories typically, which reduces testability.  My general rule of thumb is to reduce static classes in order to improve pluggability and testability.
  • Custom XML configuration to setup the dependencies and objects.    This pattern abstracts away all the coupling, but requires yet another XML format to be defined, a custom parser to be written, etc.  This can be a tedious operation depending on how fine grained and customizable the format is.

Spring offers a much better approach to this.  It allows you to use either annotations or XML configuration to setup the dependencies.  The difference with Spring’s XML configuration is that it is highly dynamic and flexible and offers several capabilities.  Further, Spring offers other support including AOP in order to separate and handle cross cutting concerns.  For example, you can easily add security or logging around any method invocation without the associated class having to manage that relationship.  In the end, your objects only deal with the objects they must directly deal with resulting in very loose coupling and high testability.

(more…)

Building Scalable Servers

Thursday, April 2nd, 2009

As part of my new iPhone project to build a new game, I need to have a backend server to communicate with all the members in order to sync and dynamically update on the fly.  Knowing the iPhone and its possibilities, I want to plan for a highly optimistic future in which thousands of concurrent connections take place.  The transactions will be minimal and compressed to conserve bandwidth, but will occur frequently to monitor player actions and provide alerts to other players as they are interacted with.  So, my immediate question was where do I start.  I obviously have two primary choices:  HTTP or proprietary.  Let’s look into each option a little more in depth.

(more…)

Flot: jQuery Charting Engine

Monday, February 23rd, 2009

For those who know me, I tend to dislike plugins such as flash as it requires user installation and often times does not work well or at all on handheld devices.  Anyways, one of the spots that flash has worked well is real nice interactive graphs.  The only other suitable solution was using server-side generated images with crazy javascript to re-download images on the fly.  I have always been interested in other approaches, and I came across a neat little jQuery plugin named Flot.  Flot is a pure javascript implementation that provides an API to really create stunning and interactive graphs.  It uses Canvas on modern browsers (Firefox, Safari, Chrome, Opera, etc) and excanvas emulator on Internet Explorer.  The transitions are smooth and appealing.  Plus, you leverage all of the power of jQuery, which is my new preferred javascript library of choice.  On a recent project, I used Flot to create a primary graph with an overview graph beneath it.  The overview graph was similar to Google Finance graphs in providing a full view of the graph.  The primary graph then allowed zooming in.  Above the graph was a jQuery slider that allowed scrolling the graph once zoomed in.  The total effort to build this was just a few hours and literally less than a 100 lines of code.  The simplicity and power of Flot is truly amazing and I highly recommend checking it out in your next projects.

For more examples and screenshots, check out the actual Flot examples.

End IE6 Support on Aug 27 Campaign

Thursday, February 19th, 2009

Microsoft Internet Explorer v6 has long been a crippling effect to web developers worldwide.  It’s slow development pace, lack of continuous updates, shortcomings in web standards, and usage of proprietary standards (ie: ActiveX) all cause developers continued headaches.  Rather than support the new web standards such as CSS 2.1 and CSS 3, HTML5, etc, developers must create workarounds.  This results in less usability, more development time, and maintenance nightmares.  If the internet is to ever see Web 3.0, we must bring IE6 support to an end.  Only then, can developers create all types of interactive and exciting content, creating a new flourishing of content.  For the positive side of life, Internet Explorer v8 is much better in terms of standards and support, although it is still far behind other browsers such as Firefox, Opera, etc.

There are only two ways to cause IE6 to cease to exist:  (1) convince all IE6 users to upgrade (2) force all users to upgrade.  In January 2009, the estimated market share of IE6 was 19% (Browser Market Share).  Unfortunately, that is too many users to either convince or just abandon.  However, we can start warning (ie: forcing) users to upgrade over a time period and once that time period has elapsed, sites immediately stop supporting IE6 and require users to upgrade to view content.  Sometimes the only way to get users to do something is to proactively suggest and eventually force them into it.

That being said, I am beginning the push to start displaying warnings to users that IE6 will be deprecated and no longer supported on August 27, 2009.  Why August 27, do you ask?  Per Wikipedia, IE6 was originally released on Aug 27, 2001.  That means that on Aug 27, 2009, 8 years will have passed.  That is more like 20-30 years in the digital technology age and plenty of time for users to have upgraded to a new version of IE or better yet another browser.

I am calling all web developers to join me in helping to bring IE6 to its final resting place in history.  As a suggestion, here are some examples for how to go about this.

  • Use IE6 javascript detection and on page load show a modal dialog telling the user they are using an older browser that will cause certain features to not work and provide a list of links to other browsers, including IE8
  • Provide an advertisement on the page that informs users that their browser needs to be updated to view improved content on the site
  • Provide a warning at the top of the page informing the user to upgrade with a list of links

Also, mention to the user that on August 27, 2009 their browser will no longer be supported.  If we can get sites to implement this, then maybe we can start causing the market share to quickly drop and eventually deteriorate by its birthday on August 27.

Note that I am not alone in this fight.  See the following:

Web 3.0: Why Flash is not Needed

Friday, February 6th, 2009

As an avid supporter of next generation web technologies and envisioning a web free from plugins and browser dependence, I believe strongly that Flash will not be needed as we move into a Web 3.0 world.  The upcoming features being discussed, implemented, and standardized all help to simplify developer responsibilities that were typically done using Flash.  Even though there are use cases where Flash is useful, the vast majority are not and only require the user to install Flash as a plugin.  In some cases, such as the iPhone, Flash is not even a viable option.  As a result, your website will not function on these next generation devices.

That being said, here are my reasons of why Flash is not needed and alternatives using next generation technologies.

1. Canvas

Canvas provides a 2D/3D drawing surface on an HTML page in which you can do almost anything that a standard thick client application (or Flash) would do.  For instance, you can draw lines, shapes, even create reflections.  For example, on Apple’s me.com gallery page, they use canvas to provide a coverflow effect.  The flot jquery charting library uses canvas to create dynamic graphs.  Functionality with canvas is endless, especially when combined with Javascript.  The developer can use the two to create dynamic animations otherwise only possible with plugins such as flash.  As canvas grows in support from browsers (ie: Internet Explorer does not natively support it yet), more libraries will be available to the developer for creating rich features.

2. Javascript Performance

Current generation browsers have old stack-based implementation of javascript that was slow compared to the engines of tomorrow (and in some cases today).  These implementations were good for the Web 1.0/2.0 days where javascript was simple.  However, as sites continue to grow in complexity, features, and richness, javascript performance becomes a bigger deal.  The performance is already hindering many sites causing them to render slowly or to degrade usabilitiy.  Most of the major browsers already have an improved javascript engine in either release or beta including Firefox, Safari, Chrome, and Opera.

3. CSS Animations

Apple Safari, via Webkit, has begun to introduce and propose an extension to CSS for animations.  The animations use a set of keyframes and settings to smoothly create dynamic animations.  This is very similar to what many users do in flash by defining keyframes and then let Flash automatically create the inner frames for a smooth effect.  Webkit does this for several CSS-based settings including color, transparency, positioning or offsets, and even rotations.  Mixing these animations with CSS selectors, you can create a dynamic animation without any javascript code.  Combine javascript and even canvas, you get extremely rich and powerful sites.  Best of all is that you do not require any plugins and will work on any next generation browser as browsers adopt.

4. Media

The upcoming HTML5 specification defines a new set of media tags for adding media content to pages, such as video or audio.  Typically, video players have been created using flash as the only viable option.  Once HTML5 becomes standard, you can simply drop a tag on the page, define the source and options, and automatically you get a player, without requiring flash.  Combine javascript, custom buttons, etc, you can create dynamic video players.

5. Javascript Libraries

Javascript libraries continue to evolve and provide a powerful environment for developers to create rich applications, especially in the UI arena.  For example, jQuery, Yahoo! UI, Dojo, MooTools, etc all provide complex UI elements and inputs for next generation sites.  Further, with the HTML5 set of new input elements (date selectors, time selectors, spinners, etc), you get native browser control.

These are just a few of the reasons of why the next generation web can be plugin free and still allow richer sites that will thoroughly impress your users without sacrificing usability or dependencies.

JSTL with JSF/Facelets

Saturday, October 18th, 2008

In my years of JSF development, especially with respect to Facelets, I have come to both love and hate JSTL. JSTL without Facelets is even more of a nightmare and I would strongly recommend considering otherwise. JSTL with Facelets is a little better, but still requires a full understanding of how Facelets interacts with JSF and JSTL. Without a full understanding, you will most definitely run into unforeseen issues.

First, let’s quickly review the JSF lifecycle. First, restore view will restore a saved UIViewRoot from a postback request. Second, it will apply the request parameters to the input components, perform conversions and validations, update the backing model with the converted values, and invoke actions and listeners accordingly. Finally, it will render the requested view or outcome view.

Now let’s look at Facelets. Facelets defines two different lifecycles: the compile lifecycle and the JSF lifecycle. The compile lifecycle is used to compile a given Facelet and then apply the Facelet to a UIViewRoot in order to construct the component tree. The JSF lifecycle is then activated using the built component tree from the Facelets. Technically the compile phase in Facelets is either part of the restore view phase or the render phase (depending on the facelets configuration and request type). Either way, the compile time phase happens completely before invoking the remainder of the JSF phase. Thus, it is more or less completely independent of each other. The sole purpose of the compile phase is to build the component tree from the Facelet tags. This is similar to how a JSP tag handler creates a UIComponent and adds to the component tree. However, whereas JSP is completely independent of JSF, Facelets is built very well into JSF.

So, why are these phases important? They are because Facelet tags are either TagHandlers (compile-time invocations) or ComponentHandlers (JSF invocations). ComponentHandlers are used to create a UIComponent from the tag and add to the JSF component tree. As a result, the created component is processed as part of the JSF lifecycle (validations, rendering, etc). However, TagHandlers are processed during the compile time phase and do not create components. They merely process some logic that may affect how other handlers get processed. However, they are processed before the JSF rendering lifecycle, which has some big repercussions as I will discuss later.

So what does this have to do with JSTL? Facelets implements JSTL using TagHandlers (yes, Facelets does…it does not use the standard JSTL library which is purely JSP based, not JSF). Thus, every JSTL tag is processed at compile time, not at render time within the JSF lifecycle. This means you need to know how each of the tags operates and how it impacts the component tree. After all, the primary purpose of tag handlers is to affect or build the component tree. It does not have any part in the JSF rendering phase.

For example, the c:if tag is used to apply children handlers when its expression evaluates to true. This means that the expression MUST be able to be evaluated before the restoring or rendering phases. Typically this is not an issue as expressions are available at all lifecycles as they are bound to managed beans and backing beans. The case where this breaks down is when you have components creating variable expressions during the rendering phase. An example of this is the commonly used “var” expression within the h:dataTable. The “var” expression is only valid when rows are being rendered by the data table. Because the if tag is processed before the rendering phase, its expressions would never properly evaluate. This example would always cause unexpected results:


<h:dataTable var="row" value="#{MyBean.data}">
<h:column>
<c:if test="#{row.valid}">
Hello: #{row.name}
</c:if>
</h:column>
&lt/h:dataTable>

You can see how this can be confusing, especially for new developers. If you do not understand the two lifecycles between JSTL and JSF/Facelets, you could spend hours trying to figure out why your data table is not generating content accordingly.

Let’s look at some other examples. One of my favorites is the c:forEach tag. This tag processes a given set of children tags for each iteration. This would seem to mimic the behavior of the dataTable tag. However, the two are very much different. The forEach tag is processed during the compile time phase while the dataTable is processed within the JSF lifecycle. So, why does that matter? Apart from the expressions having to be available as I already discussed, it matters severely to the component tree and memory/performance utilization. When the forEach tag is processed/applied, it applies each of its children for every iteration provided. This means that if the children tag handlers created component instances, then they would create X instances where X is the number of iterations. Let’s look at an example:


<c:forEach var="row" items="#{MyBean.data}">
&lth:outputText value="#{row.name}" />
</c:forEach>

If the MyBean.data expression resulted in 100 values, then you would have 100 HtmlOutputText components in the tree. However, if you used an h:dataTable tag, then you would only have 2 components in the tree. That does not seem all that bad. However, imagine the case where you have a large data set (ie: thousands of rows) and you had several children components. That would result in tens of thousands of components. After serializing all of those components to the state, your state will be thousands of times larger (megabytes rather than kilobytes). This can cause long access times, long download times, etc. Again, not understanding how JSTL interacts with its different phases, can quickly kill an application with unexpected results.

Now that I have showed how JSTL can be bad, let me provide one case where JSTL is very powerful (however, confusing at the same time to newbies). Let’s look at the h:panelGrid component. This component has a “columns” attribute that defines how many columns (ie: td) to create. Each child will represent one of those columns. However, imagine you want to use a panel grid but the column components you want are based on a data list that you would want to iterate over or are based on the same data that you want to avoid typing over and over (for maintenance reasons). Using panel grid with data table will not work as you would only have a single component child (the data table). Howver, let’s look at what forEach did to our component tree: it created a component instance for every child. Thus, we get a proper handling in the panel grid. For example:


<h:panelGrid columns="3">
<c:forEach var="index" start="1" end="6">
<h:panelGroup>
Index: #{index}
</h:panelGroup>
</c:forEach>
</h:panelGrid>

In looking at this you would think that it would fail because you only have a single child when you expect 3 columns. When you understand JSTL within Facelets, you realize the power and how it actually creates a 3×2 grid numbered from Index 1 to Index 6. This is because the end component tree has 6 panel group components as immediate children of the panel grid. Therefore, the panel grid is able to iterate over those panel group components accordingly.

The big point to remember to all of this is understand, understand, and understand the different lifecycles and their impact on each other. Without the understanding, you can quickly become confused on why things are not working as expected. First and foremost, understand how the JSF component tree is impacted and second how EL expressions are evaluated (especially with respect to c:set). A good suggestions is to use the ui:debug tag in Facelets and examine the output component tree to see how it is impacted after compiling/evaluating a Facelet.

CSS Sprites

Saturday, October 18th, 2008

I decided to take the plunge and begin making my site more YSlow compliant. I had already enabled GZip through a custom GZip filter and browser caching for static resources. My next task was to limit the number of resources being served. My first part here was first minifying and combining all javascript and CSS resources. This reduced the number of requests to two for these types of resources. Next was background images. The best way to do this is by using sprites. A sprite is an image that includes one or more other images. CSS is then used to provide offsets into the sprite where the image is actually defined. As a result, you only need a couple of images rather than many. Within my site, this makes a drastic improvement with all the unique background images I use.

I decided to look for an automated tool to convert my CSS and background images automatically. In my findings I came across the utility SmartSprites. This utility uses CSS comments to annotate the CSS file with information about how to create the sprites. Once completed, it processes the CSS file and all images and creates an updated CSS file and sprite images. The CSS updates include the proper background-position attributes that declare the associated offsets. All in all, it was a very useful tool that I highly recommend. It got my images from 15+ to 3 without the hassle of manually creating the sprites.

In using the tool however, I had a couple of issues (which is more of my ignorance for not reading the documentation :) Anyways, here are some helpful tips and advice.

First, the tool uses Ant to launch the process. However, not enough memory wasallocated to the JVM which caused OutOfMemory errors for me. Note that not everyone will need to handle this step. Unfortunately I took several images on my site into one large sprite, so I needed the extra memory. To resolve the memory issues, I merely provided Ant more memory (-Xmx1g) to ensure I had plenty. I did this by creating an antrc_pre.bat file in my home directory with the line:

SET ANT_OPTS=-Xmx1g

Once I had enough memory, I was now ready to start annotating. The first thing I did was define the sprite references at the top of the CSS file. The sprite references allow you to use multiple sprites in the same file. Note that the examples below appear to wrap the lines. Unfortunately that is an issue with the blog software. All examples below should be on a single line in the CSS without wrapping.


/** sprite: sprite; sprite-image: url('../images/sprite.png'); sprite-layout: vertical */

The sprite-layout defines which way to layout images within the sprite. For standard images, this is not important. However, for images with background-repeat, it is very important as CSS and browsers use the image to repetitively show the image over and over. If using the wrong layout, you will get very unexpected results. The best thing to do here is to use three sprites: one for non-repeating images, one for repeat-y based images, and a third for repeat-x images. For example:


/** sprite: sprite; sprite-image: url('../images/sprite.png'); sprite-layout: vertical */
/** sprite: repeatx; sprite-image: url('../images/sprite-horizontal.png'); sprite-layout: vertical */
/** sprite: repeaty; sprite-image: url('../images/sprite-vertical.png'); sprite-layout: horizontal */

Again, make sure those examples are on three separate lines without wrapping. Now that we have our sprites defined, we can being applying to CSS classes. The proper way to do this is to apply a comment after the associated background-image line. You will use the proper sprite reference depending on the type of background repetition.

If using a non-repeating image, use the following example:


.css-class
{
background-image: url('../images/image.jpg'); /** sprite-ref: sprite; */
background-repeat: no-repeat;
}

This example uses a relative path (highly suggested if not required) to obtain the image. In my setup I used a directory structure such as:

build
+ styles
- style.css
+ images
- image.gif

If using repeating images, use one of the following examples:


.repeat-x
{
background-image: url('../images/image.jpg'); /** sprite-ref: sprite; sprite-alignment: repeat; */
background-repeat: repeat-x;
}
.css-class
{

background-image: url(’../images/image.jpg’); /** sprite-ref: sprite; sprite-alignment: repeat; */
background-repeat: repeat-y;
}

Again, verify that the comments are on the same line as the background image without wrapping. With each image properly annotated, we can now build our updated stylesheet and sprites. To do so, just execute the ant process command (make sure to update the build.properties file first). If everything goes according to plan, you should now have new sprite images and stylesheets that you can use in your layouts.

Here are some things to consider before annotating images. If the image is only used on one or a few pages (such as titles, headers, etc), consider not annotating these images unless very small. If the images are large in size, you will end up with a very large sprite which will reduce performance. In such a case you are better off just having those few pages use another image that will be cached.