Category Archives: Technology

Range and Replace

I would like to introduce you to the “Range” object in your browser. document.createRange() allows you to select a range of text ( even between elements, and it very well might be the basis for how the mouse is able to select text in a browser, or how chrome and firefox highlight search terms in the browser window.

Even though Range(s) seem to be used for visual elements, you can use them for less visual manipulation of the text in the page. I have also noticed that by using the range object, you can manipulate these objects much faster than you would otherwise through some other functions like ELEMENT.innerHTML() for instance.

I am still hacking on the RANGE object, but for now it’s promising. Later I will provide an update for a few tricks to use the RANGE object as I have had a few problems with the documentation. Firefox, and Chrome ( WebKit ) seem to work a bit differently, but for the most part are the same. Fortunately I am working on browser plugins at the moment so, I don’t have to worry about IE’s limited access to the object.

Here are a few links if you want to get started hacking on the RANGE object.

#NUD National UnFriend Day

I have been using Jimmy Kimmel’s announcement of #NUD or National Unfriend Day as a reason to clean up my social connections.

So far I have been clearing myself off of old Meetup Groups, Google Groups, Yahoo Groups. I have also been removing old apps from my Facebook, Twitter, and MySpace apps. It’s good to to do a bit of social fall cleaning. Not only have I been removing my self from these email lists, groups and other things, but I have been unsubscribing form newsletters that I don’t read any more. It’s great. I think I now get about 20 less emails a day that were otherwise not spam, but I had no continued interest in, and it was blocking my communication with the people and topics I care about.

I recommend for you to take action and to pair down who you spend your attention on. ( in a few cases, I actually friended a few new people, when I discovered they were now married )

My blog here is no exception and I found that I have 444 subscribers, and most of them are some form of bots ( an interesting number in Asian cultures http://en.wikipedia.org/wiki/Tetraphobia ) I would like to apologize if I am deleting a valued reader, but if you are real and have something to tell me, please tweet me @jdavid, or just re-register. ( I think there are only a handful of humans that have registered here on my blog. maybe everyone else was afraid of the bot-apocolypse, so like a good John Conner I am clearing out the junk. )

I have added a few tools to make it harder for bots to register, and to track user activity on my blog. I am hoping that I can start fresh with users that are per-capita more human.

Notes from the Future

here are a few random thoughts about the future of tech.

Next up in sever farms, arm-mobile cores with system on chip gpus. I have direct word that google and facebook are both experimenting with this tech. nVidia is well positioned to take this market in 2-5 years with tegra2/3 / tegraX, and compete with intel/ amd in the low power server space.

There is a growing walled garden api problem. this results in the need for openid and oauth to support 4th party authentication, or granting someone the ability to delegate authority for you. you could think of this like if api’s could act via proxy, representative, assistant, or agent. 4th party delegated identity will be huge, and will allow you to pay for agents that filter and aggregate socially restrictive data. google doesn’t own this, and neither will facebook. there is room for a newcomer.

gov2.0 will happen, i am calling it #agilegov, and it will be less like democracy, and more like wikiocracy/ do-ocracies. others are calling it #bigsocial

3d games, will move into the web, and the web will finally move to 3d in the next decade. there are way to many gaps in platform tools for 3d worlds.

edu2.0, better connect top educators to more students. create smaller more engaging learning tools, or microlessons, that track behavior to a learning group online. think github for edu.

anyways that’s my rant.

Opening social networks/ graphs up to Researcher Collaboration Tools, a UCSF Harvard Profiles collaboration project

For the past few months I have been consulting part time with UCSF and the department of Clinical and Translational Sciences. You might think that has something to do with my browser plugin Babelfin, but Translational Sciences really has nothing to do with language learning, but rather taking exciting patterns in other fields and translating the processes between them. In this case UCSF is focusing on how Social Media and Social Networking can be used in an academic sense for collaboration and messaging rather than games, photo sharing, or virtual resumes.

The UCSF OpenSocial project (http://code.google.com/p/ucsf-opensocial–shindig-apps/ ) started as a Harvard project called Catalyst PROFILES ( http://connects.catalyst.harvard.edu/profiles/about/opensource ). Profiles (as we call it), is a simple social networking server that manages the graph relationships between colleagues, co-authors, and research interests. Profiles looks at relationships differently than Facebook, Linkedin, or event MySpace, but it’s pretty bare bones and limited in what it can do.

The innovative part comes in where UCSF thought it would be neat to extend Profiles without altering it’s code. So, Eric Meeks at UCSF bolted on an Opensocial container named Shindig to Harvard’s Profiles project which allows external apps to run on top of Profiles. This makes for an interesting mix of code, as Profiles is a Microsoft C# ASPX project, and Shindig comes in PHP and Java flavors. Eric rightly choose to implement the Java flavor of Shindig as it’s the most current.

So, this is where I come in, as, I am building the applications that run on the Shindig server accessing the Profiles social graph. In many cases it’s just like building an application that runs on Linkedin, Bebo or MySpace, however, there is no friend graph, but, there are 3 other graphs I can use, co-author, colleague, and interest graphs.

Initially we are keeping it simple, but we plan to extend Opensocial in a standard way so that other universities and research institutions can apply Opensocial to their graph servers. UCSF and Harvard are hoping that their work will make it easier to use Profiles as the graph server, but they are both very excited about creating an open platform that can develop a rich ecosystem of applications that extend their work, and are able to run on other platforms with small tweaks. In the end we want researchers to be able to better collaborate using social tools.

“Attention walls” in UX Design, for productivity in an Attention Economy?

This post is in response to Aza’s design talk on China’s Great Firewall. ( http://www.azarask.in/blog/post/chinas-great-firewall-productivity/ ) In brief Aza asks the question if we can better manage our attentions by controlling the speed at which interfaces and information is rendered. He uses China’s Firewall as an example, that does not explicitly block an activity but discourages it strongly by slowing down the service. And as Google points out speed is a huge factor on the internet and heavily effects user behaviour.

From now, on I’ll call this an “attention wall” or the idea of using design to not just think about how best to layout functionality but to also consider the speed at which it reacts. To actually consider using an anti pattern of slowing down UI to discourage the use of a feature.

Why would we want to set up “attention walls”? For one, when I am programing I find that I use the internet a lot for looking up how to use an API or function, but sometimes find my self getting distracted with email or other activities. Also, you might make elements like Deprecated APIs appear lower on a list of functions or slower to auto-complete. Speed in UX does not necessarily have to be something that is counted in seconds, but it could be a metric that measures the distance from the user’s current focus or attention, and in that sense an “attention wall” is just an obstacle to available information.

So how else might we use “attention walls”? Well, we might pair them with the design element of karma, or micro currencies. So if you were running a corporate IT infrastructure and you wanted to pair down rather than block outside email and social networks. You might just slow them down, unless a user… spends some karma, or social currency on that activity.

This might be carried so far as falling within David Helgason’s notion of ‘Gamification’ of the internet and culture. http://blogs.unity3d.com/2010/01/14/2010-trends/ How we are slowing turning work into play, and play into work. Some people call this ‘serious games.’ It’s the sort of thing where you score badges and points for completing an activity. Popular social networks like gowalla and foursquare have been playing with this for a while, and the trend will probably continue.

So, how might we use this? Well, maybe corporate emails are slowed down, unless you spend a few points to send it at a priority level. This might just add enough of an attention cost to sending that short email to 30 people, that will end up distracting them and creating the habit of checking email every 5 min. If we all send fewer emails in the work place, maybe we can get to checking email the 1st five minuets of every hour, and get us into the productive pattern of not checking email, facebook, or twitter so often in the work place.

One might continue to tie the message sent into a reward system that if the email causes some sort of positive response either externally or internally that more accelerator points are awarded so that user can send more email; ie, the more responsible users get rate limited less.

So maybe as UX Designers think about color, readability, typography and the so many other things they think about, maybe today’s designers need to start thinking about setting up patterns for “attention walls” as we start to face information overload.

Where are the good tech recruiters?

Having been a tech recruiter while I was in high school and being an engineering consultant I have a fairly unique point of view.

  • recruiters will tell you want you need to hear as a developer, a company who passes on you, has no interest in being blunt. however a recruiter has an interest in you interviewing well with their next client
  • being able to talk tech with folks goes miles. if you can talk to an engineer and actually understand what they are looking for, then you can be their advocate, and they will refer you
  • yes you have to hustle, and some hustle on the bottom via numbers, but, you might find other ways to source your phone list.
  • why don’t recruiting companies sponsor tech events, actually putting together great events. build relationships with speakers and attendees. like, duh,….
  • hold programing competitions, the best developers can win more than a cash prize, and even a $1-5k prize is worth it if you can place 2-5 engineers off of one competition.

anyways, that’s my $.02

Re-thinking CSS, Can Javascript replace CSS or Simplify it?

Today Javascript is everywhere.  When the web was born you might have a browser that could support it, but so many browsers do, that it’s almost as common as HTML.  I think it’s been nearly a decade since I have developed a page without any javascript on it.  We use Javascript for core site menues, for google analytics for so much on the site, that if your browser didn’t support Javascript well you might as well not even browse the web.  Even our phones support Javascript, and if that is not enough, 500 million people a month use sites like Facebook that use Javascript to load content dynamicaly like a desktop application.

So now that we have established that Javascript is everywhere you want to be, and just about everyone has it enabled, you probably can say that it’s at least as common as CSS.

One of the core problems with CSS is how static it is, and how hard it is to get consistaint results between browsers, where as with Javascript all browser support the core of Javascript extremely consitaintly.  Infact the largest difference between browsers is found in the DOM ( Document Object Model ) for which CSS must conform to.  However with Javascript frameworks have been built to extend Javascript just enough to even create consitiansy at the Document Object Model.

To this point, it might make sense to actually describe page layout via a proper Javascript framework that can describe page layout consistiantly across browsers.  If this could be accomplished, then, we as web designers might finally be free from multi browser design.  I now for my self that designing for IE5, or IE6 can eat 80% of your dev time.  What cool sites could you design if you were 2-5x more productive?

Now, I am not saying that CSS will go away, but I am saying that for a number of design choices, Javascript might be the tool of choice, as it’s functionality could grow with the framework rather than at the rate of consistian browser implementation.

Consider implementing rounded corners via javascript, in FF, Opera, and Chrome you could use a CSS property, however in IE, you could programaticly solve the problem.  Consider box model consitiancy between the browsers, the framework could addapt quickly.

What about getting more lateral?  CSS can do alot, but what if you wanted to present data in a parrallaxed plane? http://webdev.stephband.info/parallax.html These UX standards can be brought in easily with Javascript, and not CSS.

Maybe I am stating the obvious, but

Javascript is the new default design language on the web.

HTML5 Storage, localStorage, WebDatabase, indexedDB.

For Babelfin, a browser plugin, I have been looking for ways to elegantly store data in the browser for each of the translations of a given word or short phrase.  The goal would be to use a data pattern that was easily portable to the two most popular extensible browsers – Chrome and Firefox.  I decided to start with Chrome durring startup weekend because it has a newer extension model and has simplified a lot of how extentions work.  Firefox still uses xul which is an odd combination of XML and Javascript, where as Chrome uses native HTML and Javascript with a few additional libraries to work with.

So for Babelfin, the goal would be to list a set of phrases that one would want to learn, or that the user might enter, and then the plugin would pre-fetch the translation and store it in the language that the user wants to learn.  If the phrase list is short, using a key-value store like localStorage would make sense, as almost every browser supports it, including IE8, and even though there are small differences, the data model and pattern would still work. However for anything other than the minimal product, a larger data set will be required for more advanced users.  And as a result it would be nice to have a query-able data set.

Twice google has tried to solve this problem, once with Google Gears, and again with Web SQL Database, which works in Chrome, Opera, and Safari, but does not work in Firefox, or IE.  Microsoft and Mozilla do not want to add SQL as a language to browser side logic, and I happen to agree.

The result is IndexedDB, a javascript data storage model in the front end, however,  IndexedDB is not quite CouchDB or MongoDB, but rather a javascript level abstraction of storage data.  Several Mozilla folks seem to think that CouchDB might be built on top of it, and so there is BrowserCouch which will try to do just that.  But, where is the BrowserMongo ( Maybe we can call it Mango, as a Norwegian, told me that Mongo means retard in Norwegian, oops. )

So in any case there is still a gap for Browser Side Storage that is query-able and indexed.  I suppose something could be built on top of localStorage, but it would be a hack until the browsers fully support it.

I am trying to find out how much work it would be to put a stub wrapper on top of Webkit’s Web SQL Database layer and have it look like IndexedDB since that seems to be what Google will support eventually, once they figure out how to thread it, but it would be nice to have something now. 😉

A few XPath links to make YQL and HTML scraping easier.

quick and basic
http://www.w3schools.com/XPath/xpath_syntax.asp

great resource for detailed string functions
http://oreilly.com/catalog/xmlnut/chapter/ch09.html

quick list of all of the functions in xpath
http://www.w3schools.com/xpath/xpath_functions.asp

great example of more sophisticated function selectors
http://www.eggheadcafe.com/articles/20030627d.asp

multiple attribute
http://www.coderanch.com/t/128329/XML/XPATH-selection-based-multiple-attribute

fun with concat
http://blogs.sun.com/rajeshthekkadath/entry/xpath_searching_for_a_text

http://www.xml.com/pub/a/2002/08/14/xpath_tips.html?page=3