Press "Enter" to skip to content

Category: Web Apps

Thoughts on APEX Progressive Web Apps

There has been a good deal of buzz around using APEX for Progressive Web Apps (PWA) lately thanks to the excellent work and presentations by Vincent Morneau. You can and should read his Turning APEX into a PWA document. Here I want to share my thoughts on building PWAs with APEX; the possibilities, limits and challenges. This post is less researched and more quickly written than most of mine but not really shorter. It is not based on any actual implementation or hands on investigation. As a member of the APEX development team I must emphasize that this contains my own opinions. Any forward looking statements about APEX are purely speculative and not part of any official statement of direction.

A place I was recently with no cell service.
A place I was recently with no cell service.
1 Comment

Visibility and Size Managed Components

For no particular reason other than I feel like writing about it, I’ll now describe some minor functionality that crept into the APEX 5.1.1 patch release. Typically a patch release shouldn’t and doesn’t have any new functionality but sometimes there is no better way to fix a bug. This topic is for the advanced plug-in developer and anyone curious about the internal details of APEX JavaScript. No screen shots, no demo app, no sample code, just raw information; sorry.


How to identify Survey Builder respondent

It has been a while since I have worked on the APEX Survey Builder packaged application but I still get questions about it. One question that comes up repeatedly is how to associate the questionnaire responses with the person that responded. At first this question surprised me somewhat because survey research is about populations not individuals so surveys should be anonymous. To quote Designing an Effective Survey by Mark Kasunic:

“A survey, when conducted properly, allows you to generalize about the beliefs and opinions of many people by studying a subset of them”

Survey research lets you say with confidence “87% of our customers feel that the produce makes them more productive” not that John Snyders thinks he is more productive after using the product.

Comments closed

Survey Builder Design

One of my first projects after joining the APEX team was creating the Survey Builder packaged application (available in Oracle Application Express 4.2.2). This was my first experience creating an APEX app. A number of people helped out on the implementation (especially on reports) and also helped me learn APEX. I worked on the overall design and functionality and focused on implementing the questionnaire page and questionnaire editing page, both of which required lots of JavaScript. The paper Designing an Effective Survey by Mark Kasunic provided invaluable background information on the survey process and I recommend it to anyone new to conducting survey research.

Survey Builder is a little different from typical APEX apps (if there even is such a thing as a typical APEX app). Here I want to describe a couple of requirements that shaped its design and the resulting APEX implementation. A great thing about APEX is that it comes with a number of fully functional packaged applications such as Survey Builder that you can use as-is, tweak to do what you want or just open up to see how it works. So feel free to install Survey Builder, unlock it, and follow along.

Comments closed

CSS Sprites vs. High Contrast Mode

Using positioned background images (a.k.a CSS Sprites) has a number of benefits:

  • Performance. One of the performance recommendations made by Yahoo’s performance team is to reduce HTTP requests. One way to do this is using the CSS Sprite technique — combining many images into a single background image.
  • Skin-ability. With the img tag the image URL is in HTML markup where it is hard to change. With CSS Sprites the image URL is in a CSS file making it more convenient to change. Sure you can change the contents of the original file but there are reasons for changing the URL. It is not as easy to move the images to a different server or group them in different image files when the URL is not in CSS.

However there are drawbacks. The biggest is accessibility, specifically high contrast mode. In high contrast mode all background images and colors are ignored — replaced with high contrast colors such as white on black or black on white. The other issue is that background images are not always printed.

The prevailing accessibility advice is to not use background images for functional images. The underlying problem is that there is no way in HTML/CSS to identify a background image as being functional. They are all considered decorative. It is also true that not all img tag images are functional but again there is no way to distinguish them for the purpose of high contrast mode. So high contrast mode makes a reasonable assumption that background images are decoration to be removed and img images are functional and must be shown. From here on I’ll call functional images icons. They either convey important information or are interactive (like a toolbar button for example).

I have seen recommendations that functional background images should be replaced with text when high contrast mode is detected. This does not seem right to me at all. A desktop app does not change its toolbar button icons to text in high contrast mode. The assumption is that icons are already designed to have reasonable contrast.

It also just feels right to me that the icon URLs should come from CSS.

Since I care about performance and accessibility I’m not happy with this conflict. I want a solution that puts the icon URL in CSS, works in high contrast mode and allows me to combine icons into a single image file. Here is what I came up with.

Comments closed