From the depths comes an update.

I’ve moved my Ruthsarian web site to a new server. The new URL is http://s8.org/ruthsarian/. The migration was essentially five minutes of me doing search and replaces. If something isn’t linking right let me know. The new server is case-sensitive where the old one was not so I’m expecting a few problems to crop up.

The reason for the move is I’m changing jobs and I won’t have that web space available to me once I leave my current employer. On the bright side, my new job will take me back towards web development, meaning I’ll have time and motivation to continue my work here. There might even be some worthwhile content being posted here within the next year.

For now I’ve nothing new to offer. Sorry.

ORA-26704

In my professional life I find myself drifting towards the role of DBA rather than web developer. And to that end I am creating this little blog post about Oracle error ORA-26704.

Recently I was working with a database that was replicating itself, via Oracle Streams, to a second database where the data is then processed to produce report-friendly data that others could report on.

There’s a development version of this setup for, well, development and test purposes. Except the streams components weren’t working quite right.

Oracle Streams has three processes. On the source database you have the capture process picks up the redo logs which store changes to the database. There is also a propagation process which takes these changes picked up by the capture process and ships them out to wherever you tell it. On the destination database you have an apply process which, guess what, applies the changes it receives.

The problem I was encountering was that whenever I tried to start the capture process I’d get this ORA-26704 error. Google was near useless. I couldn’t find anything. Just lists of ORA errors with no explanation as to what they actually mean.

Well I’ve finally solved this one, and it’s quite a simple one. So if you, dear reader, have found your way here from your search engine of choice in search of a solution to your ORA-26704 error, fear not, I am here to share my solution.

The initialization parameter aq_tm_processes is probably set to 0. This is bad. This tells Oracle how many processes it should create for the purpose of monitoring streams. If it’s set to 0, then streams won’t work. Either set this to 1 or set it to nothing and let Oracle tune the value for you.

And then you too will have working streams.

More on Amazon Silk

A small Amazon Silk FAQ is now available on Amazon’s web site. Questions regarding privacy are at the bottom so hopefully you won’t read far enough down to see them.

There you will find Amazon taking the opportunity to tell you how awesome Silk is and then direct you to the Amazon Silk Terms and Conditions if you’re still interested in this silly privacy nonsense. However there is one small, but important piece before we move on to the ToC:

What about handling secure (https) connections?

We will establish a secure connection from the cloud to the site owner on your behalf for page requests of sites using SSL (e.g. https://siteaddress.com).

Amazon Silk will facilitate a direct connection between your device and that site. Any security provided by these particular sites to their users would still exist.

If you use Amazon Silk then Amazon will be able to see everything you do over HTTPS. This is bad. Very, horribly, bad. And should be a red flag for anyone considering purchasing a Kindle Fire. Now about that ToC document.

Straight away they give you the section on privacy and tell you that the Silk ToC includes the Amazon Privacy Notice. They’ve even gone and underlined it for you to make sure you see it. Curiously they don’t actually link to the document. Isn’t that a bit odd? I’ll help you out in a way Amazon.com won’t and point you to the Amazon.com Privacy Notice here.

The basic idea of the Silk ToC is that they keep your information for “generally” no longer than 30 days and that everything you do over the web using Silk Amazon.com sees. Couple that with the privacy notice and Amazon has given themselves the right to look at and analyze everything you do over the web with Silk.

However, there is one piece of news in the ToC:

You can also choose to operate Amazon Silk in basic or “off-cloud” mode. Off-cloud mode allows web pages generally to go directly to your computer rather than pass through our servers. As such, it does not take advantage of Amazon’s cloud computing services to speed-up web content delivery.

So it will be possible to use Silk without putting Amazon between you and the web. It’s unfortunate this option is buried in Amazon’s documentation and I suspect this option will be just as buried in Silk, but it is there. And that’s good, because the Kindle Fire does not support Android Market which makes installing an alternative browser a bit problematic.

If I were in the market for an Android tablet I don’t think Silk would turn me off the Kindle Fire, however I am the type who likes to have as much control over my own hardware as possible and I don’t feel I would have complete control over a Kindle Fire in much the same way I don’t feel I’d have complete control over an iPad. Therefore I would probably look elsewhere.

SSL/TLS Broken and Disabling Javascript Fixes It

In a few days a flaw or attack on SSL/TLS (the stuff that protects your passwords and personal data as it goes across the internet) will be presented at Ekoparty.

The attack requires the attacker be in position to intercept and inject into the data between the client and server, otherwise known as a man-in-the-middle attack. The attack appears to use javascript to send out known plaintext over an encrypted channel and allow attackers to then crack the encryption key using that known plaintext.

The simplest solution to protect yourself is to disable javascript.

As a web developer I look at things like noscript, cross-site scripting, and exploits like this as reasons to believe that users of my web site may not have javascript enabled. Therefore it is vital that javascript not be a critical component to using any site I manage. That doesn’t mean never use it, it only means that your web site still be usable without it. Treat it like Flash, or Java, or any other function that isn’t explicitly defined in the HTML or CSS specs. These things can make life easier for the user, but should never be a requirement.

This latest exploit, with the immediate message to end-users being disable javascript until a fix is ready, puts those web developers who rely on javascript to provide critical function to their site in a bad position. Don’t be one of those developers.

Eventually the practice of at least a white-list approach (see noscript) to Flash, Javascript, etc., if not completely removing them from the browser, will become the norm for even basic web users. It may not happen this year, or even in the next five years, but it’s very likely to happen as attacks on the web layer continue to grow.

printf(“Hello, world!\n”);

I haven’t been blogging much because I really haven’t had much to say. Browsers have gotten to a point where most people are using something that doesn’t require extensive or creative CSS hacks to work with basic CSS-driven layouts which was my bread-and-butter for the middle part of the last decade.

I recently did a bit of contract work which inspired me to work on a new layout which then inspired me to do some spring cleaning and share with you a bunch of old designs I’ve started over the last five years, but never got around to finishing. So hang on, there’s a bunch of new stuff to get through.
Continue reading

Responsive Web Design

Responsive web design is a term used to describe a web design that adapts itself to the end-user’s environment. This isn’t a new concept, but advancements in browser technology as well as a greater increase in viewing environment (desktop, netbook, smartphone, etc.) is allowing for some new and interesting tricks to our bag.

Responsive web design is something that’s been around since the first web designs came out utilizing percent values to define the widths of objects, such as TABLE, DIV, and IMG elements. The idea was that a person on a 640×480 resolution screen can view the web site, but a person with a larger resolution like 1024×768 would be able to see more content on their screen as the layout would expand to the edges of the larger viewport (the area in which a web page is rendered). This idea was somewhat radical back in the early 1990s as most layouts would simply set a fixed width for the layout (usually 780 or 1000 pixels) and state quite plainly on the web site that it was designed to be “best viewed in 1024×768”.

Things got more interesting with CSS. Web designs could now use percentages for margins, padding, and placement of elements within a page. Layouts that would expand and contract with the viewport could be more complicated. Especially handy were the CSS max-width and min-width attributes. These allowed you to set limits on just how much your layout would expand or contract before forcing the viewport to stop resizing the layout. Now layouts could expand and contract, but not so much that they became unusable.

Enter CSS3 media queries.

But first, a small caveat to web developers.

The CSS3 spec is not yet final. In fact there isn’t (or is, depending on your point of view) really a CSS3 spec at all. CSS3 is a collection of modules and therefore somewhat open-ended. You can see a list of some of the CSS3 modules and their curren status here. Some CSS3 modules are currently in an early format and not recommended for implementation, while others have reached a state where it’s not quite final, but browser authors are encouraged to implement these modules and supply feedback to help refine the spec before it becomes final. Media queries are in such a state and as such several modern browsers have already implemented them including the latest releases of Firefox, Chrome, Safari and Opera. So web developers can start making use of them now and those users who run modern web browsers will be able to enjoy your use of CSS3.

At the same time, I do not recommended you rely heavily on CSS3 modules in any designs for the near future, or that if you do, you do so while making sure to check compatibility of the layout against older browsers. While the general public appears to be more capable at keeping up to date with their browser (mainly thanks to the automated update features of several OSes and the increased proliferation of broadband internet connections),  there’s still a significant number of users (over 50% according to this site) who are using Internet Explorer 8 or earlier, which does not support media queries (or much else in the way of CSS3). IE9 will support media queries.

Now that that’s out of the way, what can media queries do for us? Simply stated, you can apply styles based on many attributes of the viewport. To keep things brief-ish and to the point, I’m going to specifically focus on width-related media queries. Let’s see what one looks like:

#frame { width: 1000px; margin: 0 auto; }
@media screen and ( max-width: 480px ) {
  #frame {
    width: 100%;
  }
}

The above example will make an element with the id of “frame” to be 1,000 pixels wide and will center (via the margin value auto for the left and right margin properties) it in the middle of the viewport if the viewport is wider than 1,000 pixels. On the second line is a media query. It begins with @media screen (in place of “screen” you can use “all” for any media, or “print” for print media, etc.) which lets the browser know that the following block of CSS should only be applied to the screen. This is followed by and ( max-width: 480px ) which is the media query. It states that the following block of rules should also only be applied when the viewport is at or less than 480 pixels in width. You can also use min-width to tell the browser the block of rules should only be applied when the viewport is at least 480 pixels wide.

Why would you want such a thing? If a viewport is that narrow and you have wide elements or you have multiple columns, chances are those elements would be very usable at such a narrow width. With a media query you can change the layout to something more usable on a small screen. For example, consider a layout that has multiple columns. At 480 pixels your columns will barely fit a few words per line, if any at all. Reading text becomes very difficult. With a media query you can drop your multiple columns into a single column layout. Now each column will have the full width of the viewport to render its content, making it much more usable.

In the example above I am removing the fixed-width on the #frame element and resetting its width to 100% of the viewport. Smartphone users will be able to view the content of the layout much more easily and without having to scroll horizontally to read each line.

Excellent! Now go and design for the masses!

But… not quite yet. There’s one problem. Some smartphones are a bit too smart. They understand not many web designs are out there that take advantage of these features. Instead these smartphones will scale the rendering of the page. While the screen may only have 480 pixels of width, it’ll render web pages as if it had 1024 pixels of width and then scale it down to fit the screen. Media queries alone won’t fix this problem.

However, there is a solution.

The viewport meta tag allows you to tell browsers how to scale the web page. Most mobile browsers understand this tag including the mobile version of Safari found on may Apple devices and the mobile version of Opera which is found just about everywhere else. So to fix the mobile browser scaling issues, just include the following META tag into your web page:

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

This tag tells the browser to render the web page with a 1-to-1 pixel scaling. Meaning 1 pixel of your web site is 1 pixel on the device’s screen. There are many other attributes you can include in this META tag such as maximum and minimum scaling values or whether the user is allowed to scale the page. Disabling user scaling effectively disables the pinch-zoom feature of many mobile devices. I recommend against it.

One last thing to touch upon before I give you a working example. It’s a simple block of CSS that will help make everything run much more smoothly on a mobile browser:

img { max-width: 100%; }

This little CSS rule allows images to shrink as needed as their containing element shrinks. So a 600 pixel wide image will shrink enough to fit on a 480 pixel wide browser. It’s a cheap, but very useful trick. However I would suggest that you don’t use the exact CSS rule given above. To apply such a thing to all images may have unexpected negative effects on images that you don’t want to have shrink as needed. Instead use a more specific CSS selector such as

#frame .blog-post .post-content img { max-width: 100%; }

The more specific you are, the less surprises you’ll have down the road.

As promised, I have put together a demonstration web page that utilizes all these techniques. Grab a modern browser that isn’t Internet Explorer, open the layout, and start shrinking and growing your browser’s window to see the content and layout change to fit within the width of your window. Pop it open on your smartphone’s browser as well!

MARS: Responsive Layout Demo

The stylesheet is embedded in the source to encourage you to take a look at the whole source for the page. It has also been given some CSS hacks so that the layout will work even in IE 7 and IE 6 (in theory), but all the media query stuff will obviously not work.

One final note.

At home I have a very wide (16:10) monitor, while at work I have a standard (4:3) monitor. I like to set max-widths to my layouts because keeping the distance from end to end of a given line of text small helps reduce eyestrain and the whitespace on either side of the layouts is more visually pleasing. But on a very wide monitor, the whitespace on the sides is too much and it makes the layout look very small. With media queries I can fix this problem by increasing the max-width of my layout frame for those screens with a very large width (over 1280 pixels). I could also increase the font size to help with readability. The point is that media queries aren’t just for keeping your pages usable on a smartphone, but they also help keep them usable on very large screens as well.

A Brief Ping

It’s been nearly half a year since my last post and that needs to be rectified.

There are a few things worth talking about such as the situation with the HTML spec. W3C maintains one HTML spec, while WHATWG maintains another. They were playing nicely, but there’s been a small shake-up recently with WHATWG deciding to drop version numbers from the spec, while the W3C will continue to call the latest spec HTML5. How the hell did we wind up in this situation? Well WHATWG has a great piece in their HTML spec that gives a brief history of the HTML spec. It’s not too long and very much worth reading to get an idea of where HTML came from and where it’s going.

News web sites tend to have a template ready to go whenever there’s “breaking news”. It’s often a big, brightly colored box with bold text usually stating “BREAKING NEWS”. This is quite an attention getter. A fact that is not lost on modern news web site developers. Lately “BREAKING NEWS” web stingers are being used to report extremely mundane news. The reason they are using these stingers at all is to simply grab your attention and get you to click through to read the full story. The problem is these news sites are quickly diluting the news value of their “BREAKING NEWS” stingers and sooner rather than later we’ll start to ignore them alltogether. So what will news web sites do when real breaking news happens? I have some thoughts on that which I’ll save for a later blog post, but it’s something to consider.

A small gift to those who have read this far. Here is a template I put together last week to test palette options. This isn’t a layout. You could use it for a web site, but I haven’t done anything to make it compatible with older browsers. It’s more just to test potential color palettes for web sites. And a great place to find palettes is COLOURlovers.

Now that I’ve given away one of my design secrets, I’m off. I expect there will be less of a delay between this and my next post.