sonofbluerobotFront-End Engineering With Standards

Archive for the ‘dev’ Category

Making Responsive, Accessible, High DPI, CSS Sprites

Posted on: by j.albert.bowden.ii2 Comments

Applying clip on img‘s via media-queries

I love css Sprites so I was quite dismayed to read about problems with iPhone 4 Retina Display (High dpi) and problems with accessibility, both of which will stop a standardista dead in their tracks. Retina Display is a user-agent feature and as such should at least be used to progressively enhance the ux, not degrade it! User-Agent Features are seen as bothersome and/or afterthoughts in most circles, however they are vital for creating unique browsing experiences for each applicable unique user-agent setting. The accessibility issue is a no-brainer, it must be resolved; Accessibility should be a part of your work-flows and not an afterthought. One thing about the bad accessibility in particular stood out to me:

In conclusion, the only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative content. If sprite maps are required then consider using inline positioned sprite maps.

css Background Images and Accessibility

Responsive Design via css media-queries is a principle of progressive enhancement that is a staple of Front-End Engineering and for the most part solves all cross-browser and cross-platform issues. By applying rwd via media-queries, it occured to me that you could use the sprites still, but apply it to inline img‘s via clip property. Then to alter the clip property style settings via media-queries, swapping bigger images for bigger resolutions. It works like a charm, although I’m not sure how accessible they are. You can view the demo here

Or you can jsfiddle with it own your own here.

The style in the demo is shown below:

Style


.abspositioner{position:relative}
.box h2{margin:0}
.box{margin:10px auto; outline:1px solid #000; width:300px}
.spriteclipx{position:absolute; top:0; left:0}
/** width:256px; height:256px; .spriteclipx{clip:rect(0, 256px, 256px, 0)} **/
/** width:128px; height:128px; .spriteclipx{clip:rect(266px, 128px, 394px, 0); top:-266px} **/
/** width:64px; height:64px; .spriteclipx{clip:rect(404px, 192px, 468px, 0); top:-404px} **/
/** width:32px; height:32px; .spriteclipx{clip:rect(478px, 224px, 510px, 0); top:-478px} **/
/** width:24px; height:24px; .spriteclipx{clip:rect(520px, 248px, 544px, 0); top:-520px} **/
/** width:16px; height:16px; .spriteclipx{clip:rect(554px, 256px, 570px, 0); top:-554px} **/
@media only screen  {
  .spriteclipx{clip:rect(0, 256px, 256px, 0)}
}
/** target iPhone portrait display **/
@media screen and (max-width: 320px) {
  .spriteclipx{clip:rect(404px, 192px, 468px, 0); top:-404px}
}

/** target iPhone / iPod Touch with Retina Display **/
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .spriteclipx{clip:rect(266px, 128px, 394px, 0); top:-266px}
}

/** target iPad portrait and landscape **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .spriteclipx{clip:rect(0, 256px, 256px, 0)}
}

Prerendering in Chrome for Instant Pages and Continued User Experience

Posted on: by j.albert.bowden.iiNo Comments

Instant Pages is a new feature by Google which enables prerendering, where the browser grabs and caches most (if not all) likely documents required where the user goes next.

In Chrome 13+, Prerendering allows author’s to dictate which assets/resources are most likely to be necessary for the continued ux.

Prerendering is actually an extension of Firefox’s prefetching; Prerendering fetches all of the necessary resources of the next document.

Note: unlike Firefox, Chrome does not support meta-http and http header triggering methods.

As noted, Firefox supports prefetching via link element which instructs user agents to begin fetching the top-level resource at the url. There are comments about prefetching‘s weaknesses, but I’m going to chalk that up to the cadre of markup illiterate developers and their awesome enterprise code. When used properly, prefetching can lead to a continued ux too.

How to Trigger Prerendering

Trigger prerendering is apparently not so easy to do; it’s only useful to a site with a high degree of certainty of where their users will click next. Trigger prerendering incorrectly can cause the user’s selection load times to actually increase.

Authors can trigger prerendering by simply dropping an link rel="prerender" element into the markup and Chrome follows it, like so:


<link rel="prerender" href="http://example.org/index.html" />

Detecting When Your Site is Being Prerendered

even if you do not proactively trigger prerendering yourself, it is still possible that another site will instruct Chrome to prerender your site.

Prerender Documentation

I’m kind of speechless at that statement. How is that possible? Since it is, I’m going to assume “sites” that practice the black arts will be able to sabatoge your determined prerendering strategy by “telling Chrome” to prerender the wrong documents. That is completely speculative and with no proof, however, the documentation’s explanation is so vague, it leaves me to wonder.

Authors can detect prerendering via the Page Visibility api and/or test individual pages.

Authors can also use Chrome’s Task Manager to detect prerendering:

  • From Task Manager, load the desired test page
  • Look for Prerender in the Task Manager, which looks like so:
  • Prerender Detection via Chrome Task Manager

Refrences

Use h5ai to Beautify Apache Index

Posted on: by j.albert.bowden.iiNo Comments

h5ai is code that beautifies Apache Index. So essentially, instead of just having the plain old Apache Index out-dated markup and styles that show in folder’s without an index page (and if you don’t have them blocked) like so:

Apache Index Default Rendering Screenshot

Screenshot of Apache Index Default Folder Rendering

h5ai makes it much more elegant, like so:

h5ai Beautified Apache Index Rendering Screenshot

Screenshot of h5ai Beautified Apache Index Folder Rendering

I really dig it, but I did have some issues because of how my .htaccess file was set up. I have mine set up to parse php as html and after installing h5ai, my folder index display was erroring. h5ai would compile, but not find any content in the folder(s) as well as spitting out a random string of characters after the closing /html element. After getting some help from @larrrs and @jrsmith I simply changed the default settings referring to header.html and footer.html. I simply renamed them as header and footer and deleted the .html extension from my .htaccess file.

Pretty crude solution, I know, but it did fix my problem. Further investigating also shed to light that parsing php as html actually increases server load, which I was clueless about. Obviously I need to fix that, but just putting the word out there should anyone come across any issue similar to mine.

Support Mozilla Developer Network Badges

Posted on: by j.albert.bowden.iiNo Comments

Promote mdn Spread some Developer Love

Proper documentation and great reference examples are imperatives in webdev, without either, a reference source can (usually is) lacking and in the process, slowing down your own personal growth and development. The Mozilla Developer Network (aka mdn), has been offering up amazing and comprehensive resources for all Open Web developers in such a manner for quite awhile. mdn recently launched a promotional campaign, not just to draw attention to themselves (although, its quite a nice bonus), but moreso to bring awareness to developers that they should require/demand similar resources always and that such resources already do exist.

Promote mdn is offering up four different badge designs, with three design color options, as well as 4 separate document types for better and more concrete specification.

This blog post is simply to draw awareness of the promotion, I actually do not care for the standard way of promoting badges/widgets and should probably blog about that soon. Regardless, I’ve placed my badge selections below for all to see. The badge type (css, html, JavaScript and Toolbox) correlates to that section of in my personal Development Reference Library; I also made a Promote mdn badge that I intend to drop on pages in my Development Reference Library that do not fall under the given categories (it’s also the header image of this post). Check them out yo!.

Promote mdn html

mdn is Developer Powered for html Documents, Demonstrations and More!

Promote mdn css

css Documents by Developers, for Developers on mdn

Promote mdn JavaScript

Better JavaScript Documents for a better Web on mdn

Promote mdn Toolbox

mdn is your Web Developer Toolbox for Documents, Demonstrations and more on html, css, JavaScript and other Web standards and Open Technologies

Promote mdn Docs Default

Web Documents by Developers, for Developers on mdn

Gee, you know that information… really would’ve been more useful to me *yesterday.*

Posted on: by j.albert.bowden.iiNo Comments

The Wedding Singer

  • Linda: No… I don’t need more time, Robbie. I don’t ever want to marry you.
  • Robbie: [takes a deep breath, sighs] Gee, you know that information… really would’ve been more useful to me *yesterday.*

This quote reverberates through my skull often at work, but recently its been more like a daily basis. To keep this short, I recently jumped on board as front-end for a rather large .com that was in the middle of a new release. To make things worse, the guy that I replaced was leading the squad like Jordan lead the Bulls (all 6 Times). So yeah, he’s pretty freaking good. So I’m on the squad now, we’re in the NBA Finals and that damn quote keeps hitting me…back and forth between the ears, in the forehead, square in the mouth, etc.
Let’s keep on track here…finally, after about a month or so into this, I started finding some serious shortcomings, and reached out to peoples in my network. Jonesy, Brunsvold, Zuck and Jaswa have been marvelous in keeping my head level and on track. But I’m singling out Mr. Jaswa in this one, for a great piece he wrote up for me one night, after I hit him up with some ridiculous questions, one after another.The Game Plan, so aptly titled, truly lives up to its name and has had an immense impact on my “game plans” (lame.i.am) pertaining to the site I’m currently redoing and almost as importantly, every project that I’m involved in.
The Game Plan, is a brief outline of what’s really important when developing an interface. Blunt, direct and to the point, this little guy was an eye opener to me and I really can’t thank him enough for the nudge. I had to jump back from what I was doing after reading it to correctly implement it, bringing that quote back into my head. Gee jaswa, you know that information… really would’ve been more useful to me YESTERDAY! Jokes aside, thanks alot chief, this really has helped me out.