More performance tips

In: Uncategorized

10 Aug 2009

I picked up a few more performance tips from this article. Notably, to make links consistent by case. You’re liking already doing this as a single developer or perhaps a small team, but if there are many developers, I can imagine inconsistencies. Also you should always close your tags. If you’re writing proper XHTML, I’m sure you already are.

From this presentation, I picked up a few more tidbits. Never use the with statement. When it’s used, the javascript processor will have to examine the object (up the prototype chain) and the scope (up the scope chain) leading to expensive look-ups.

Never use eval if possible. This includes sending javascript strings to setTimeout and setInterval. Evaluated code must be compiled and interpreted.

Also this post discusses the potential security concerns and memory leaks associated with innerHTML.

Lastly, I want to point out an old tool that I was recently asked about for an IE6 problem. Drip can be useful for detecting those IE6 problems.

Don’t make me click by Aza Raskin

In: Uncategorized

8 Aug 2009

My Notes

The best user interaction is no interaction. The user is unaware that they are interacting with the interface in any way. Lots of good examples of not clicking. Also examples of bad design. Worth watching.

Aza made me rethink a pagination example that I had been working on. I may do the switch to an infinite scroll.

Aside: Although this talk was not about Enso, the speaker is its creator. I actually used Enso for a bit. I enjoyed being able to launch a program quickly by a few keystrokes. Unfortunately, I have literally hundreds of programs installed, and to launch a program required too much set up or too many key strokes. It would have been more useful if there was a good way to make the most frequently used programs appear first by default or to have some sort of convenient setup process for all my favorite programs.

Faster HTML & CSS

In: Uncategorized

8 Aug 2009

My Notes

N.B. Speaker is a Mozilla developer. Notes may not apply across all browsers. Also note this speaker should have practiced his talk a few times. His awkwardness and stumbling is the worst of the google tech talks that I’ve seen.

The frame / rendering tree composed of rendedered elements, viewport, scroll bars, etc.

Order: content -> compute style -> construct frames -> layout -> paint

Style sheets affect rendering tree (visual representation), not DOM tree (structure)

Right most selector should be as specific as necessary but no more

position : fixed very inefficient b/c can not simply shift up rendered doc and repaint diff

:hover should be lmited b/c will cause repaint on every mouse move

The cost of reflow can vary by ancestors e.g. elements that are children of floats will cause recalculations to find parents’ state

display: none incurs repaint cost once but then no additional costs thereafter

visibility: hidden avoids initial painting cost but still incurs layout cost on every change b/c visibility can be overridden, so a visible child of a invisible parent must be poisitioned

Absolutely positioned elements within (relative or absolutely) positioned elements have additional cost

Speed Up Your Javascript

In: Uncategorized

8 Aug 2009

My notes

Scope chains:
-Store out of scope vars as local vars esp. global b/c they’ll be last on scope chain
-Avoid with: add another obj to scope chain -> local vars are now 1 step away. use local vars instead
-Be careful with try-catch: catch augments scope chain
-Use closure sparingly (add 2 contexts to the scope chain)
-Don’t forget var when declaring local vars (takes longer to resolve & pollutes name space)

Data Access:
-Property depth matters so store in local vars if accessed more than once

Loops:
-for … in is very inefficient for iterating over aways
-prevent repeated property look-ups var len = arr.length;
-if you can count down to 0 which evals to false can save a second evaluation
c.f. for (var i=0; i < arr.length; i++) vs. for (i = arr.length; i--;) -- 50% gain!
n.b. will change order of execution
-avoid values.forEach(function () {}) -- function based iteration up to 8x slower!

DOM:
-HTML Collections are live! Look like arrays but aren’t
-var divs = document.getElementsByTagName(‘div’);
-divs is not a static reference
-accessing divs.length queries the # of divs on every access! up to 50-60x slower in browsers
-minimize property access
-if you need to access in order as a snapshot, copy it to a static array

DOM reflow:
-reflow: how size is calculated in browsers
-reflow occurs on initial page load, browser resized, DOM nodes added/removed, new styles applied, layout info retrieved

DocumentFragment:
-DocumentFragment: doc-like object but not visually represented, considered child of doc from which it’s created,
-DocumentFragment when passed to addChild, adds children to DOM
ex. var frag = document.createDocumentFragment();
use doc frags to reflow once instead of for every added node
-alt method: if container element of elements to be added has display:none, will not reflow, then can set display: ” as last step. caution: IE may still calc reflow even with display: none

CSS:
-minimize changes to style property, each change causes reflow
-define classes with all changes and just change className property
-if retrieving layout info, can save value to var to access once

CMS for Real Estate Team and Their Clients

In: Portfolio

25 Jun 2009

The Century 21 Alliance Gold Team

Back-end architecture and server-side information:
The site is hosted using the common LAMP software solution stack controlled and maintained via cPanel and ssh access.

It runs Joomla 1.5, a free open source CMS and MVC web application framework.

A modifed version of minify, another PHP tool, optimally delivers the site’s JavaScript and CSS. The site also incorporates most of the YSlow and Google Page Speed best practices.

To futher optimize the ouput, the modified version of minify invokes YUI compressor, a Java tool, a further compresses the JavaScript and CSS using techniques such as local symbol replacement.

User Interface Design Choices:
The front end compromises several interesting features – many from the YUI Library.

Since all page transitions are controlled via Ajax giving a visitor that fastest, most fluid user experience, the browser history manager tracks the state of the application at all times so that the forward and back buttons maintain their functionality across all “A” grade browsers.

As the user hovers over points of interest in the application, the tooltip provides and draws attention to relevant, contextual information.

The local market data is tied to a data store of all the known markets. As the user types, the field offers autocompletion regardless of whether the user searches by city or zip code.

The chart itself is created dynamically using the Google Chart API and then watermarked using the PHP GD library. The results are cached for set intervals.

The tabs of the market data provide convenient views in a small amount of space.

Dialogs and modal panels with shadow overlays engage the user during specific actions to maximize their attention.

The weather module provides useful information about current, local weather from the National Weather Service. PHP parses their freely available XML data feeds and stores the results.

Both the weather and the market data are customized further depending upon how the user enters the page. The site is part of a Google Adwords Campaign and as such, if the visitor enters with certain information in the URL (passed as GET variables based on their Google search), the user will see customized results for both the weather and market data. Compare http://www.c21gt.com/?kw=Springfield to http://www.c21gt.com/?kw=19081. The server will also reverse lookup school district information to location to account for those searches.

The layout of the page is controlled via CSS. Some points of notes are the sprited images and the image-free rounded corners.

For many, more details about the site and several features not discussed, please feel free to contact me. Walk-throughs are available via dimdim

Older Entries
Newer Entries

About this blog

This portifolio represents a brief sampling of my work. More thorough demonstrations and walk-thrus of my latest and greatest work are available via remote virtual session on DimDim, a free flash based web conferencing tool.

Also note that I recently joined StackOverflow where you will find me asking and answering many web development questions.

Categories

Archives