Tag Archives: Web Development

On-Demand Webinar: How to Simplify RPG or PHP Mobile Development with jQuery Mobile

One of the challenges with mobile development is giving your applications a modern look and feel that meets users’ expectations. If you’re using WebSmart for mobile web development, you’re most likely already working with jQuery Mobile, which is used in the new mobile templates. It’s also possible to use jQuery Mobile with Presto to give your green screens an even more mobile-optimized UI.

Craig Pelkie and Marcel Sarrasin recently recorded an educational webinar on simplifying mobile web development with jQuery Mobile. jQuery Mobile is a free, touch-optimized web framework that makes it easy to create visually appealing mobile web applications.  This webinar is now available for on-demand viewing.

jQuery Mobile - touch-optimized web framework for tablets and smartphones

Continue reading

WebSmart 9.6 Includes WebSmart Mobile ILE

WebSmart 9.6 is available for download. This version includes the much-anticipated WebSmart Mobile ILE, several helpful IDE shortcuts and a PHP SmartSnippet to call RPG programs using the new open source PHP toolkit for IBM i.  Mobile PHP DB2 templates will be in the next release but are currently available as beta.

WebSmart Mobile ILE web applications

Continue reading

How to Use Chrome Developer Tools to Debug Ajax

Ajax is a popular technique that we’re seeing more of our clients use to create faster and more dynamic web applications. It’s also part of the new WebSmart templates and used in the underlying Presto code. It can, however, be difficult to know where to start when debugging Ajax. How do you tell which component (e.g. HTML, jQuery event, Ajax call, server-side script, Ajax response callback) isn’t working properly?

Continue reading

Improve performance with gzip

I spend a fair amount of time worrying about performance. Within the Professional Services group I work with one of our clients, MedAxiom, developing an increasingly large and complex web application. Yet at the same I want to improve the user experience by speeding things up. One of the simpler ways to make a site faster is enabling gzip compression.

Gzipping components is one of ySlow’s recommendations and Steve Souders also recommends it in his book “High Performance Web Sites”. It’s an Apache module that applies gzip compression to certain output before sending it to the client. Once at the client, the browser unzips the content and displays it to the user. The end result is we’re sending less bytes which takes less time.

I set up a few benchmarks before enabling gzip so I could get an idea of the effect it has. I used Firebug’s Net panel to load each page five times and record the total size of the page and load time, I then took the average of the five loads.  Here are the results:

Page Before After Improvement
Size (kb) Time (ms) Size (kb) Time (ms) Size Time
Nexus home page 1,870 29100 536 14465 71% 50%
Nexus dev home page 2,382 31714 535 17060 77% 46%
Bar graph 633 9885 280 8405 55% 15%
Line graph 619 11450 280 7497 55% 34%

I was blown away by the improvement in load times!  MedAxiom has some pretty heavy Nexus pages so that’s where we saw the greatest improvement.  Yet even on smaller pages we still saw an improvement of 15%-34% in page load times.

Setting up gzip in Apache is pretty easy, you can do it by adding these directives to your Apache config in the appropriate place.

# Load the module that performs the compression.

# Compress all output by default.
SetOutputFilter DEFLATE

# Disable gzipping for images and pdf documents.
# Gzip compression has no effect on these types.
SetEnvIfNoCase Request_URI (gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

Check for Flash-enabled browsers (using JavaScript)

Something most web developers take for granted is the ability of our user’s browser to render Flash. When working with BCD’s product suite, this is particularly true whenever we do any development with SmartCharts. But as you may be aware, there are some browsers which can not actually render Flash objects – namely the iPhone and iPad versions of Safari. These users not only fail to see any of your Flash content, but they also tend to receive a popup error message for every flash object you put on a page. So, in addition to missing out on some key functionality of your page, they also get an annoying alert (or three, or five, or ten…). Continue reading

Stop giving a rendering option to IE 8 users

IE 8 has the dubious advantage of multiple rendering engines to choose from via the “Compatibility Mode” options. Personally, I like this feature, but what I’ve discovered is that a lot of users don’t know this feature exists which leads to the problem of them viewing everything in IE 7 mode by having the “Display all websites in Compatibilty View” setting turned on.

I’m not sure if this option is turned on by default on a fresh install of IE 8 or if users turn it on when they setup IE 8 for the first time (and I mean really, who wouldn’t choose compatibility?). The bottom line though, is if a user has upgraded to IE 8 you want to give them the best experience you can by using the most modern rendering engine.

Microsoft gave us a way to specify the rendering engine by using the X-UA-Compatible http header or meta tag. You can use this to force IE 8 to use the IE 8 rendering mode even if the user has compatibility mode turned on. So, if you’re building a new site, why give your IE 8 users the option to render your beautiful css and html in IE 7 mode?

Here’s how to use the meta-tag option, this tag should be at the top of the <head> section of your page:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Or you can set the http header in your Apache config:

Header onsuccess set “X-UA-Compatible” “IE=8″

If you want to limit the http header to a subset of your domain you can use environment variables in Apache:

SetEnvIf Request_URI “/myapp/” is_my_app=1

Header onsuccess set “X-UA-Compatible” “IE=8″ env=is_my_app

Using SQL Performance Monitor To Find SQL Errors on IBM i

It’s difficult to find which program is producing an SQL error by looking in the joblog, especially for Apache instance jobs (CGI jobs). You can see the error, but you can’t find out the name of the program that issued it. To solve this problem, you can use SQL Performance Monitor tools. You can start an SQL Performance Monitor one of two ways:

  • Use System i Navigator, expand the Databases tree node for the system you are connected to, right-click on SQL Performance Monitors and create a new one.
  • Run command STRDBMON from a command line.

You can limit which jobs get monitored (with either approach). For example, if you want all the INTERNET Apache instance jobs, just specify a job name of INTERNET.

To end the monitor, use the same interface in System i Navigator, or use the ENDDBMON command.

Make sure you create the monitor to collect detailed, not summary information. You can also choose the file and library name in which to store the collected information.

Don’t leave the monitor running for too long- it has a negative performance impact on the system, and it writes lots of data quickly.

You can easily query the output table to find errors. For example, I started a monitor via the System i Navigator which output data to a table called QZG0000048 in library DUNCAN. Using STRSQL, you can find SQL errors and their corresponding program names. Use this query:

SELECT qqi8 as "sqlstate",qqc81 as "sqlcode",qqc104 as
"program library",qqc103 as"program name",qqc21,qq1000 FROM
qzg0000048 WHERE qqrid=1000 and qqi8 < 0 ORDER BY qqstim

There are lots of other fields in this file, too, such as job name, user name, etc. but be careful, because if you try to select all the fields for viewing using STRSQL your 5250 session might end abnormally – some of the fields contain binary data that is illegal to display.