Who doesn’t love Post-it notes? In my previous life, before I started learning CSS, I would ask myself “how can I make a convincing looking Post-it note in Photoshop?” After extensive CSS study and research I have come to realize that some things can be done with CSS alone. That’s right, the post it you see on the right is 100% CSS. Go ahead, check it out. Here is how it is done.

I broke the instructions up into key elements so the uninitiated can get a feel for how I constructed everything. The process itself might be helpful for some people – it was certainly helpful for me. If you aren’t interested in my life story, feel free to skip to the end for a quick ‘plug and play’ code snippet.

Making the Post-it

margin: 25px;
width: 250px;
min-height:175px;
max-height:175px;
padding-top:35px;

This is the basic square that will be built around your content. The height is somewhat complicated because I want the text to begin lower on the Post-it rather than at the top. To ensure the padding doesn’t add any height while still lowering the text, set a min and max parameter on the height.

The Yellow Color

background: rgb(255,255,136); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

This is where much of the magic happens. When you think of a Post-it note you probably think of yellow, right? It’s true, but we need to think in 3D terms. It needs a yellow gradient that fades at a 45-degree angle into a slightly lighter color at the bottom right. This will help with creating a “peeled up” illusion later on. I just used this amazing tool (http://www.colorzilla.com/gradient-editor) to make mine. This code looks like a huge mess, but it’s mostly due to cross-browser support. Speaking of cross-browser support, Internet Explorer 6-9 does not like diagonal gradients so this website provides a nice fallback and converts our diagonal gradient into a horizontal gradient. This is not optimal so I recommend changing the last line of code here:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Either make startColorstr and endColorstr the same number (which will turn off the gradient and make the Post-it a solid color) or change GradientType from 1 to 0 (this will make the gradient vertical instead of horizontal). I chose to remove the gradient.

border:1px solid #E8E8E8;
border-top:60px solid #fdfd86;

I am doing something special with the border. You could easily give this a 1px light grey border and it would look fine, however, Post-its have that sticky glue-like substance on top that, when in use, has a slightly different look than the rest of the Post-it. I created a thick top border that is nearly the same color as the yellow I used. The effect is so slight you almost can’t tell it’s there, but anyone who does will surely appreciate it.

Font Styling

font-family:'Reenie Beanie';
font-size:22px;
text-align:center;

This is my font styling. Consider putting a script font on your post it, something like Marker Felt or Comic Sans, or preferably something interesting from the Google Font API like Reenie Beanie seen here.

A Peeled Corner

Although Post-its are square, the bottom corners tend to peel off the surface a bit when stuck to something. This 3D effect is subtle, but adds a ton to the feel of the note. This is the code to make only the bottom right corner look peeled for most browsers. As usual, sorry IE users

-webkit-border-bottom-right-radius: 60px 5px;
-moz-border-bottom-right-radius: 60px 5px;
-o-border-bottom-right-radius: 60px 5px;

And there we have it. The final code for the Post-it class looks like this:

.postit {
  text-align:center;
  width: 275px;
  margin: 25px;
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;
  border:1px solid #E8E8E8;
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';
  font-size:22px;
  -webkit-border-bottom-right-radius: 60px 5px;
  -moz-border-bottom-right-radius: 60px 5px;
  -o-border-bottom-right-radius: 60px 5px;display:inline-block;
  background: rgb(255,255,136); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

I know what you are thinking. Where is the shadow? Well, the shadow is actually a different piece of CSS. We’re doing more than simply adding a box shadow around the note. We could do that, but then it would look like the Post-it is floating rather than stuck on the wall.

Creating a non-box shadow is a bit of a workaround. We are actually going to be making a shape, giving that shape a shadow, and carefully adjusting that shape/shadow so only about 5% of it is visible. Sounds easy, right? I used this website to fine tune my effect (http://www.wordpressthemeshock.com/css-drop-shadow). It took me some playing to get it right, but I am happy with the result.

The Bottom Corner Shadow

content: "";
width:125px; height: 25px;
-moz-transform:skew(10deg,10deg) translate(-45px,-15px);
-webkit-transform:skew(5deg,5deg) translate(-45px,-15px);
-o-transform:skew(5deg,5deg) translate(-45px,-15px);
transform:skew(10deg,10deg) translate(-45px,-15px)

Here is our shape. It’s a long rectangle that has been skewed to have more acute angles.

position:absolute;
right: 0px; bottom:9px;
z-index: -1;

This positioning hides the box behind our Post-it and makes sure it stays underneath. I ran into an interesting problem when using this on a template sites like the one you are on now. The negative z-index actually put the shadow behind the background, making it invisible. I am not sure if this will be the case on other CMS sites, or other templates, but to get around this problem you simply need to give your background a z-index of 0.

background: rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */

Finally, the shadow. It takes a bit of tweaking to make it show up just right. Also you might have noticed that box-shadow is commented out. This is the IE workaround. IE doesn’t support rotation or skew so the shape that is actually making our shadow doesn’t cast the correct shadow. Without a box-shadow, it is just hidden under the yellow not not bothering anyone. The shadow website I provided above wants you to put together your inline code in a funny way. After you wrap your content in the .postit class, you need to make another empty div just to hold the box shadow. Like this:

<div class="postit">
Here is my postit content
<div class="cornershadow">
</div>
</div>

That is a bit clunky and I always want to do less inline work, so I put my own spin on things. Instead of making a separate class for the cornershadow, which would look like this:

.cornershadow {
  content: "";
  position:absolute;
  z-index:-1;
  right: 0px; bottom:9px;
  width:125px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */
  -moz-transform:skew(10deg,10deg) translate(-45px,-15px);
  -webkit-transform:skew(5deg,5deg) translate(-45px,-15px);
  -o-transform:skew(5deg,5deg) translate(-45px,-15px);
  transform:skew(10deg,10deg) translate(-45px,-15px)
}​

…I used the psuedo class :after to simply put the cornershadow code after all postit class divs! So now all you need to do is make a div class=”postit” and put whatever you want in it!

The complete code:

.postit {
  text-align:center;
  width: 275px;
  margin: 25px;
  min-height:175px;
  max-height:175px;
  padding-top:35px;
  position:relative;
  border:1px solid #E8E8E8;
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';
  font-size:22px;
  -webkit-border-bottom-right-radius: 60px 5px;
  -moz-border-bottom-right-radius: 60px 5px;
  -o-border-bottom-right-radius: 60px 5px;display:inline-block;
  background: rgb(255,255,136); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255,255,136,1) 77%, rgba(255,255,214,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(77%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,214,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* IE10+ */
  background: linear-gradient(-45deg, rgba(255,255,136,1) 77%,rgba(255,255,214,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 fallback on horizontal gradient */
}

.postit:after {
   content: "";
  position:absolute;
  z-index:-1;
  right: 0px; bottom:9px;
  width:125px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40);
  /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */
  -moz-transform:skew(10deg,10deg) translate(-45px,-15px);
  -webkit-transform:skew(5deg,5deg) translate(-45px,-15px);
  -o-transform:skew(5deg,5deg) translate(-45px,-15px);
  transform:skew(10deg,10deg) translate(-45px,-15px)
}

And the inline code:

<div class="postit">Check out this Post-it <br /> It's 100% CSS!</div>

If you want to further increase your Post-it fun consider separating the colored gradient and borders into its own class, naming that class .yellow. Then create a class for other Post-it colors like .blue, .pink, .orange, and so on. That way you get to name your div class=”positit pink” and get different colors. You can also give your Post-its a rotation (like the one I have at the beginning of this post) by wrapping it in a div and giving that div rotate transformation.

According to Statcounter, Chrome was the third most used web browser (13%) worldwide as of November 2010, behind Firefox (31%) and ahead of Safari (4.7%). According to Google,

“The store will be featured prominently in Chrome, helping people discover great apps and developers reach millions of users around the world,” says Google’s blog, noting that in 2010 alone, “the number of people using Chrome has tripled from 40 to 120 million.”

In no time, the TweetDeck has apparently jumped to the head of the pack:

“In the 3 days since the launch of the Chrome Web Store, our Chrome TweetDeck has had 45,851 users and been installed 62,477 times. To give these numbers some context it’s useful to compare them with the “big boys” of the Web Store such as the New York Times (43,542 users – 56,215 weekly installs) and Gmail (40,783 users – 37,921 weekly installs).”

The current layout is as simple and straightforward as a central repository should be. In the long run, the launch is a positive nod for the developer community, which now has yet another distribution channel for their creations in the form of mobile apps, browser applications, add-ons or themes.

In related (and potentially converging) news, Google has also made the case that “Chrome is enterprise ready,” opened the mobile “App Inventor for Android” to all Google account holders and announced Intel-based Chrome OS notebooks from Acer and Samsung to be available in mid-2011, with Verizon Wireless providing integrated 3G cellular connectivity..

Jointly developed by W3C and WHATWG since 2004, HTML5 was created in response to the observation that the HTML and XHTML in common use on the World Wide Web has become a mixture of features introduced by various specifications, along with those introduced by software products such as (various) web browsers.   The ultimate objective being the establishment of more uniform practices as well as to define a single markup language that can be written in either HTML or XHTML.

In this sense,  HTML5 adds many new syntax features to improve inclusion and handling of multimedia and graphic content on the web, new elements are designed to improve the semantic richness of documents and new attributes have been introduced to improve and simplify the semantic expression.  The standards also define the required processing for invalid documents, so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Ancillary benefits promise to increase security, expand storage and offline functionality.

In the end, it’s about a smoother, richer, more useful web.

A mobile Era

While proprietary programs like Flash and Silverlight have dominated the past decade of modern desktop oriented website programming, the complexity and resources associated with such programs makes them unattractive on the mobile web. As a result, developers began responding to user demands through a logical workaround: the mobile application.  In this instance, all content, functionality and experience is contained within an app on top of a smartphones or tablet operating system.

The popularity and ubiquity of mobile apps has steadily increased over the years, Apple’s iPhone launch in 2007 radically altered the expectations that the public had for the mobile web by choosing to use WebKit, the same system that underpinned its desktop Safari browser. In 2008, Google followed suite by using the same open source browser engine to power Chrome, and handset makers like Nokia, Palm, Samsung and RIM have since incorporated WebKit browsers into their devices. As WebKit secures its place of dominance in mobile web browsing, the appeal of HTML5 becomes all the more attractive, considering current support for the standard ranges between 77% – 96% amongst top browsers:

The Convergence

Since many of the nuances have yet to be agreed upon by the collaborating development groups, it’s clear that HTML5 will need time to mature and find its stride.  But as the trend for HTML5 browser support shows that compatibility will strive for perfection in the near term (Microsoft’s IE notwithstanding), web developers can begin programming with the confidence that HTML5 will come through for the mobile masses.

It is very important to define which operating systems and on which browsers the application should be tested. Once you define the browsers on which the system should work, make sure you check all functionality on all browsers. If there is not enough time/budget, you can check the design and the main functionalities of the site with all browsers. Most of the cosmetic problems generally appear in Internet Explorer 6.0. We like to use IETester (http://www.my-debugbar.com/wiki/IETester/HomePage), the application supports all Internet Explorer versions.

For comparing the design of a site on different browsers, there is one tool named Adobe BrowserLab that works great. With it you can compare a web page in one browser next to a page in another browser or overlay the pages entirely. The tool supports the following browsers:

• Chrome 3.0 – Windows
• Firefox 2.0 – OS X
• Firefox 2.0 – windows
• Firefox 3.0 – OS X
• Firefox 3.0 – Windows
• Firefox 3.6 – OS X
• Firefox 3.6 – Windows
• Internet Explorer 6.0
• Internet Explorer 7.0
• Internet Explorer 8.0
• Safari 3.0 – OS. X
• Safari 4.0 – OS X

Make sure that your bug reports are easy to understand

The best testers have the most bug reports resolved. A good bug report is one that assists in resolving an issue. Ensure that your bug reports can easily be reproduced by making them as clear and concise as possible. Here are several steps that you can follow:

1. Reproducibility – inform the developers how often the bug appears

2. Severity – inform the developers of the scale of the bug.

3. Summary – summarize the bug with one sentence – as a title for your report. Be descriptive and concise.

4. Bug Description – this is the most important section.

Be sure to include:

• Location of bug in the software
• URL (if you are testing web pages)
• Testing browsers or environment
• Information about the bug – here you need to explain the input data you used and the sequence of steps you made to cause the bug. This point is quite important make sure that your instructions are clear and reproducible. Make sure that you use the same terminology as the developers.
• Screen shots with comments and explanations. Firefox has one wonderful Add-on “FireShot”, this Add-on can be found also for Internet Explorer.

These days, more and more people in the IT business work with clients or have coworkers that are not from their own country and who communicate in another language. No matter how well you learn to understand a language, there still can be misunderstandings that can lead to problems of all types. It helps to have a pre-planned method and agreed terminology to report bugs.

There must be bugs

Start to test with the idea that there should be bugs. There is not a system that does not have a few errors. This mindset will help you to be more focused on finding problems.

Test situations that should not be executed

Sometimes, due to a variety of reasons, users do not enter something as they are intended to, press buttons out of order, or otherwise misuse the software. It is important to try to account for these situations.
If you have a registration form to test, try doing things OTHER than fill out the form. It was built to accept data, so try not entering anything and pressing the button for registration, enter invalid data such as email that does not have the “@” symbol or very long zip code or name. Use boundary cases (inputs at or just beyond maximum and minimum limits) to attempt to receive errors. There are symbols that can break the database or break the request from the database if they are entered and saved in the system. Such examples are the percentage (%) symbol, inverted commas(“”), and two minuses (–) together.
If you have a combination of actions that need to be done one after another, change their sequence. Make sure that you have checked all situations that you can think of, according to the system you test.

Test real situations

The above tips should not turn the QA process into a highly critical and aggressive testing period. Do not test and report bugs for unrealistic situations. Make sure you have understood the specification for the application and do not tease the developers with unrealistic bugs.

Test like you are a regular user, a computer illiterate user.

Think about the users, question yourself. Is this system user friendly? Can you easily navigate the program? Is the text within the system clear and understandable? Are the error messages helpful? There are a lot of examples in your own personal life. Think about when you sit at home on your personal computer – which sites or programs do you prefer? Why? Which you do not like? Why? Usability is always the answer.

Keep written reports

Sometimes bugs are  shared verbally with the developers. This can work against you.  Make sure that you keep written documentation of all your discussions about issues or anything concerning a project.  The best practice is to have reports on every issue you find.  Sometimes when communicating bugs verbally, many testers complain that the developers take the credit for their work or that managers who calculate the productivity of a tester by the number of bugs he/she reports do not give full credit.

Work to become a Team

Communication with your team members is just as important as knowing good techniques for testing and is key for the successful achievement of a quality product. You need to be flexible. During your work you will meet junior developers that have never worked with testers or people who will disagree with your findings. Some developers just need to get used the fact that they have bugs in their programs. This is normal. You need to persuade them that a tester for a developer is not like a critic for an author. Help them understand that you are a team and you both want the same thing. Prove your statement with facts and knowledge of the system and specifications.

Gain new knowledge

Black box testing uses external descriptions of the software with no knowledge about the internal structure. If you want to become competitive and help further your career, you should take a peak at the source code and ask questions of the developers. For cosmetic issues, you can read and learn about HTML and CSS and report specific CSS styles/areas of a web page that need fixing. Some tools that can help are the Web Developer Toolbar and the Firefox Add-on, Firebug. Some knowledge about Databases also will be helpful, this way you can more clearly understand the processes in the system and the reasons why some bugs appear. With more knowledge of how the software works, you will speed up the developer’s work and make yourself more efficient in the process.

Approving a high quality product is a hard and complicated process. Learn from your mistakes and from the bugs you found. Keep good communication with your coworkers, defend your position in a positive manner, keep learning, and continue testing.

Supported chart types include:

• X-Y charts (line, spline and scatter);
• Pie charts;
• Gantt charts;
• Bar charts (horizontal and vertical, stacked and independent);
• Single valued (thermometer, compass, speedometer).

I am going to explain how to use the chart library and how to create a bar chart with a custom color. To create a chart with JFreeChart library, first you have to make a Dataset object. The chart is generated from this data collection. Next you have to instate the class DefaultCategoryDataset, which is passed to the chart object. In the code below as a data source is used ArrayList, which may come from data base.

// load the data
double[] data = new double[jobTitles.size()];
for (int i = 0; i < jobTitles.size(); i++) {
     data[i] = jobTitles.get(i).getCount();
}
// create the data set
DefaultCategoryDataset dataset = new DefaultCategoryDataset();
for (int i = 0; i < data.length; i++) {
     dataset.setValue(data[i], "Profit1", jobTitles.get(i).getTitle());
}

The next step is to do an object from chart type. The library uses a class named JFreeChart to display the chart. This chart object is an instance, which comes from the method createBarChart of the static class ChartFactory. The method takes as a parameter the formed collection (dataset). There are many properties, which you can pass to the constructor, such as labels, orientation, etc. It is possible to change colors, size, scale and many other characteristics.

You have ready object now and the next step is to send the chart to the web page. For this purpose, the library includes a class named ChartUtilities that provides several methods for saving charts to files or writing them out to streams in JPEG or PNG format. The methods from this class can be used for creating JPEG images for static web pages. The goal, however, is not to save the chart in a hard drive; the goal is to pass the graphic to the application. To do that, you can use the servlet technology and display the dynamic data stream in the jsp pages.

Consequently the next step is to generate BufferedImage from your chart object and to transfer this stream through the session. You should also write the image in the http response writer.

// create the chart
final JFreeChart chart = ChartFactory.createBarChart("Allocation of Duties",
                 "Values", dataset, PlotOrientation.VERTICAL, true, true, true);
// set custom color
GradientPaint gradientpaint0 = new GradientPaint(0.0F, 0.0F,
                 new Color(209, 228, 246), 0.0F, 0.0F, new Color(82, 141, 201));
BarRenderer r = (BarRenderer)chart.getCategoryPlot().getRenderer();
r.setSeriesPaint(0, gradientpaint0);
ChartRenderingInfo info = null;
HttpSession session = request.getSession();
try {
     // create RenderingInfo object
     response.setContentType("text.html");
     info = new ChartRenderingInfo(new StandardEntityCollection());
     BufferedImage chartImage = chart.createBufferedImage(640, 400, info);
     session.setAttribute("chartImage", chartImage);
     PrintWriter writer = new PrintWriter(response.getWriter());
     ChartUtilities.writeImageMap(writer, "imageMap", info, false);
     writer.flush();
} catch (Exception e) {
     e.printStackTrace();
}

Finally you should write the servlet. This is a Java object, which dynamically answers requests and built response to the client. Each servlet has two main methods – doGet(HttpServletRequest request, HttpServletResponse response) and doPost(HttpServletRequest request, HttpServletResponse response). You need to get the chart stream from the session in the servlet. The image is set to an attribute named chartImage in the session. You have to get http session instance from the request and then to retrieve the previously set attribute.

// Process the HTTP Get request
public void mdoGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// get the chart from session
HttpSession session = request.getSession();
BufferedImage chartImage = (BufferedImage)session.getAttribute(“chartImage”);
// set the content type so the browser can see this as a picture
response.setContentType(“image.png”);
// send the picture
PngEncoder encoder = new PngEncoder(chartImage, false, 0, 9);
response.getOutputStream().write(encoder.pngEncode());
}
// Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(re

Have you ever gotten the message The URL [your application url here] did not respond. even when everything seems to be working on your side?
One probable reason is that Facebook has a certain response timeout – approximately 12 seconds. If your page fails to respond in this time, Facebook will leave it and display an error message. I used a few simple tricks and managed to work around this issue. Try them out:

Make the Facebook application lighter:

• The basic idea is to make the page as light as possible on the first load. One way to achieve this is to leave the time consuming tasks like database interaction for later, updating the page with AJAX. (more info)

Speed up your Facebook app:

• You can use “Preload FQL”, that is to send your FQL requests along with the first call, thus making one less roundtrip to the server. (more info)
• Facebook provides a Batch API. With this API, you can combine multiple API calls and send them together as one call. (more info)
• You can do the same thing with multiple queries. Wrap, send, and receive them as one using Fql.multiquery. (more info)

AJAX calls have the same timeout issue (although the timeout here is approximately 13 seconds). Additionally all AJAX calls pass through the Facebook server which slows them down. The result is the following JavaScript error: “error”:1349011,”errorSummary”:”Failed to fetch app Ajax” .

I found a simple solution to avoid it: Use FBJS AJAX and a timer to abort the request when it reaches the time limit and send a new one.

Facebook API Response Time and Error Count

The Facebook API itself sometimes has latency issues causing your app pages to be fetched slower, increasing the risk of reaching the response timeout. Errors in request to their servers are also known to happen. You should always be informed about the Facebook Platform Status.

Syntax Limitations in FQL

The Facebook API allows you to make your own queries using a query language similar to SQL. There is a list of tables you can access (you can only view information; you are not allowed to update the information in any of these tables). You can easily make your own queries, but you should keep in mind that you cannot do a number of normal (for SQL) things such as join tables, use ‘distinct’, ‘limit’, ‘group by’, etc., or use “from” against more than one table. You can easily do these operations in the code, however. Combined with the use of the multiquery functionality, things should work almost as fast as if you were using pure SQL.

Facebook API Changes

As you may guess, the Facebook API still is in development, so you should keep yourself up to date with the constant changes in its platform. Some of these changes are potentially breaking, some features are being deprecated or changed, and some cool new things are being added. It is useful to read the Facebook Developer Roadmap to be informed for the specific changes that have been planned and when to expect them. Here are some of the upcoming ones:

• an open source, faster, slimmer, and more efficient JavaScript Library will be developed – I am personally looking forward to this. It will be of great help, as right now the FBJS is very limited.
• profile boxes, application info sections, and the Boxes tab will be removed – If you want to integrate into the user’s profile, you will be able to do that only with Application tabs.
• formatting on canvas pages will be changed to better highlight an application’s brand – For now, I myself am using fb:dashboard. It not only gives you clean app navigation, but also a great look by positioning the name and icon of your app nicely on every page.

Until recently, some of the API changes, even when prepared for them, had unexpected effects on some applications (in some cases, bugs appeared) and there was nothing we could do about it.
In late February, Facebook introduced a tool to help us prepare for the changes – the Migrations tool. When Facebook announces a new feature or fix, you can first do some testing before going to the Migrations tab in your application settings and choosing to enable it (it is disabled by default).

In conclusion, I can assure you that whatever problems you may stumble upon there is a huge community of developers willing to help you out. Just go to the Facebook Developers Forum. There is also lots of documentation and useful tips in the Facebook Developers Wiki. Have fun!

DECLARE @PageNumber INT
DECLARE @PageSize INT
SET @PageNumber = 2
SET @PageSize = 10
SELECT TOP (@PageSize) * FROM
(
SELECT
ROW_NUMBER() OVER (ORDER BY FieldA) As RowID,
FieldB,FieldC,
TotalRows=COUNT(*) OVER()
FROM TheTable
) TmpTable
WHERE TmpTable.RowID > ((@PageNumber-1)*@PageSize)

One significant advantage of this implementation approach is that there is no need for a second query that returns the total count of the paged data. The total record count is returned as a column in the result set. This minimizes the number of queries that are needed to return a paged result set. If not needed, the “TotalRows” column can be removed from the query.

SEVERE: Servlet.service() for servlet jsp threw exception
java.lang.OutOfMemoryError: Java heap space
at java.lang.StringCoding$StringDecoder.decode(StringCoding.java:133)
at java.lang.StringCoding.decode(StringCoding.java:173)
at java.lang.String.(String.java:444)
at org.postgresql.core.Encoding.decode(Encoding.java:193)
at org.postgresql.core.Encoding.decode(Encoding.java:205)
at org.postgresql.jdbc2.AbstractJdbc2ResultSet.getString(AbstractJdbc2ResultSet.java:1892)
at org.apache.tomcat.dbcp.dbcp.DelegatingResultSet.getString(DelegatingResultSet.java:175)

This was the first time when we had a log where there was a specific row number indicating the error. After looking at the code, we found that the row was in logic, where we assign a field from the database to a string variable. It was nothing unusual, so we decided to check the field in the database table. It was a “text” field in a PostgreSQL database that we access using JDBC driver. After a SELECT length(‘field’) command, we estimated that the biggest field data is about 1 MB! So, if we wanted to take the whole table that would be about 400 MB data fetched in a single click that invoked this method. After that we were able to finally reproduce the server crash, clicking several times on the button that invoked the method fetching this abnormally large amount of data. We had to revise the code so that we take only one field when needed. This solved the crashing issue.

The lesson is that we need to make sure we are not requesting too much data using the SQL statements. Even if we are getting a small amount of columns like in this case, we need to have in mind that one of them could contain a lot of information and make the system crash – especially with lots of concurrent users.

</span><code><script type="text/javascript" src="/app/theme/com/sun/webui/jsf/suntheme4_2-080320/javascript/bootstrap.js"></code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

Now if you change that line to:



</span><code><script type="text/javascript" src="https://www.yourserver.com:8443/ app/theme/com/sun/webui/jsf/suntheme4_2-080320/javascript/bootstrap.js"></code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

The site will now work under HTTPS without any security warnings. Obviously, this cannot be done straightforward because this piece of HTML code is generated by the Woodstock library. The solution we have implemented to resolve this problem is to change the code in the Woodstock library that generates the HTML header of the pages. The following solution is not the most elegant solution; it’s more of a simple workaround to solve this problem in production environment:

1. Open the Woodstock project web site, https://woodstock.dev.java.net/index.html, and go to “Build it Yourself.”
2. Follow the instructions on the “Build it Yourself” page to register and get a CVS access to download the framework source code. The CVS URL will be something like: :pserver:username@cvs.dev.java.net:/cvs. You don’t need NetBeans 5.5, as it is written in the compile instructions.
3. Open the CVS repository with NetBeans and check out the module “woodstock/webui” and branch “Release42″ as a new project.
4. Open the project and edit the “JavaScriptUtilities.java” file in package com.sun.webui.jsf.util in “src/runtime” folder.
5. In method “renderJavaScriptInclude”   change line 578 from:


   </span><code>String jsFile = getTheme().getPathToJSFile(file);</code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

   To:


   </span><code>String jsFile = "https://www.yourserver.com:8443" + getTheme().getPathToJSFile(file);</code><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif; font-size: 13px; line-height: 19px;">

6. Save the file and rebuild the project. During compile, you might notice a lot of warnings, etc – just ignore them.
7. Copy and overwrite the newly compiled webui-jsf.jar and webui-jsf-dt.jar from the Woodstock source code folder “woodstockwebuidist” to the NetBeans subfolder. “visualweb2modulesext”. Keep a copy of the original jar files (see below).
8. Rebuild your WAR file and deploy it on the HTTPS server.

There you go. You should now have your website working under IE with no security warnings. Note that the newly compiled .jar files will work only on the server URL you define in Step 5. They won’t work in localhost development environment, so you might want to change with original .jar files during development phase. Cheers.