Javascript archive
Abusing text-shadow for fun and profit
2008-09-10 17:29
A while back, when Opera 9.5 was in development, we gained support for getters and setters, and I needed some smoketest to check whether they worked as advertised.
Around the same time, we also added support for text-shadow, as outlined in the documentation for Presto 2.1 standards support (Presto is the core engine of Opera, currently in version 2.1)
So, I ended up testing both at once. See the example. The demo fades some text in and out of the screen, simultaneously deblurring the text as it becomes visible. The fading itself is fairly trivial, with the animation library used taking care of the work.
The script
I'll keep this explanation brief, and gloss over some of the details, but: The majority magic happens in the getters and setters defined. Somewhere in the inlined code on the page, you'll find this:
var e = CSSStyleDeclaration.prototype;
// ... other getters and setters
e.__defineGetter__("blur",function(){ return this._blur_||0; });
e.__defineSetter__("blur",function(val)
{
this._blur_ = val;
this.textShadow = this.shadowX+" "+this.shadowY+" "+val+" "+this.shadowCol;
})
In the actual code, this.shadowX, this.shadowY and this.shadowCol are also attained through getters and setters on a CSSStyleDeclaration, but for the purpose of explaining, you can assume them being hardcoded to 1000px, 0 and #fff, respectively.
So, when the animation library is initialized and animations are set up, we tell it to animate the blur property of the affected element's style
var st = document.getElementById('foo').style;
var anim = new Animator(st,1000,15,
function(){ setTimeout(moveOut,1750) },
forceRepaint);
anim.addProperty("blur",12,1,"px");
So, when the animation is run, the library iterates through all the properties of the animation, and when reaching the blur property, it sets it, but what is actually set is the blur value of the text-shadow, e.g. 1000px 0 3px #fff
The CSS
For the purposes of the CSS, I conjured up a somewhat more minimal example, in the form of a navigation list.
What is happening in this example is pretty much analogous to what is going on in the animated demo. When you hover an element in the list, that element gets some focus, while the rest of the elements are blurred to bring attention to what you currently are hovering.
The first CSS rule to mind here is:
li {
font-weight: bold;
padding: 0.5em 0.5em;
display: block;
overflow: hidden;
color: #333;
background: hsl(40,15%,90%);
border: 2px outset #aaa;
}Specifically, the overflow: hidden rule, which ensures that we clip the element's box if content overflow it. Next, we're applying a rule to all list elements when the list itself is hovered:
ul:hover li {
text-indent: -8em;
text-shadow: 8em 0 0.33em #333;
background: hsl(40,15%,40%);
}
The point of the rule is to move the text out of the element's box, by setting text-indent to -8em and instead setting a text-shadow offset as 8em. Next up here is setting some mild blur (If you can call 0.33em, which I used for dramatic effect), and the same color as the text.
Finally, for this example, the following rule resets the text-shadow to something more sensible:
ul li:hover {
text-indent: 0;
color: #eee;
text-shadow: 1px 1px 2px #333;
background: hsl(40,15%,60%);
}
Closing words
While you can probably do some real cool stuff, and create low-cost effects, I would advise against using it for production use: In both examples, text will become invisible if text-shadow is not supported. From what I have been able to gather, only a limited set of browsers support text-shadow
Either way, it might be fun in 2014 when browsers have caught up to the next level of CSS.
Autosizer 2, UserJS and cross-domain storage
2008-06-17 12:41
Back in 2005, I wrote a UserJS named Autosizer that enhances Opera’s behavior when you view a single image. The script from back then has one inherent problem, though; when you set a resize mode, it would be remembered on a per-site basis, instead of as a global option. Which, frankly, sucks, as I usually prefer a preference to be that, just a preference that sticks, whether I am viewing infinite lolcats or ray tracing examples
Enter Autosizer 2, which fixes this, through a hack, which either is really clever, completely insane, or both. First off, download and install the user script. The script is a complete rewrite of the old script, and has been on a severe diet: There are now only two modes: View in original size, or Fit to screen.
The hack: Iframes, error pages, invalid domains and cross-document messaging
The way this works is roughly:
- When an image is loaded, such as the two example images above, the script creates and injects an iframe pointing to http://0.0.0.0/img — an invalid URL
- Next, the other half of the script activates only on the URL mentioned above, and sets up a few listeners for cross-document messages. It recognizes three settings, one for setting Fit to screen, one for no fit, and one for just retrieving the current setting
- Every 300ms, the iframe will post a message to its parent window, with the current value of the setting.
- The event listeners in the parent window (the image) will, upon getting a message from the iframe set the correct sizing mode.
- The net effect of this is that we now have a cross-domain preference storage for UserJS.
What about security? Well, this is the catch, there is absolutely no security here, so a user script author should never store anything here that is remotely private, nor should an author assume that data stored in this way are not corrupted: A web page can send and retrieve messages in just the same way a user script can.
So, how much data can you store? Well, you have an entire /8 to store cookies on, which is 16 777 216 domains, you can have 30 cookies per domain, of max 4096 bytes each. That is 1.87 terabytes. Just don’t try. Or if you do, write a virtual filesystem implementation or something that gives you infinite geek points.
Should you want to mess around with the autosizer script, it’s licensed under the New BSD License. Enjoy.
File I/O in widgets and the browser
2008-05-07 20:28
Ok, so I had a somewhat mystically titled presentation at XTech, titled Going full circle: Giving Web Applications and Widgets access to device and user data. The slides are here (Should work reasonably well in Firefox, WebKit and Opera — does not work in IE. Navigate with PageUp/PageDown or the mouse wheel)
What the presentation was actually about was File I/O in the context of the browser, or more specifically, in widgets. We produced an input paper to be picked up for standardization.
Further, we will release builds on labs.opera.com shortly, so you can get to play with it shortly, and hopefully also with some example code, so you can get your heads wrapped around this.
Edit: There are now public builds for you to play with here — have fun
Why didn't I get to do this when I was twelve?
2008-04-07 14:08
Dmitri Gaskin is 12. He’s a core contributor to Drupal — and, as evidenced below, gets to do Google Tech Talks before even being a teenager. Impressive.
ACID3: Strike ninety-eight. Make that 100
2008-03-26 21:20
Below is a screenshot of the Acid3, taken straight from one of our developer's machines. It's a screenshot of the builds we use to test core functionality in Opera (cue the weird, minimalistic user interface).
Yes, it says 100/100. I'm not going to say too much about it right now, other than send some Kudos in the general direction of the developers responsible (whom for some reason always seem to keep a low profile), and point to what Anne said earlier when we reached 98.
Note that there is a small rendering glitch left, but we will fix that too in due time. If you want to follow what happens in the future, visit the desktop team blog
Opera 9.5 alpha, Kestrel, released
2007-09-04 14:44 – Leave a comment
The first alpha of Opera 9.5, codenamed Kestrel, is released. The changelog is so long that I can't possibly get through it this decade, but here's a few highlights of improvements, both to the user experience and standards support.
Word count for HTML documents
2007-04-19 13:35 – Seven comments
No, this blog is not turning into some rabid-fanboy-with-a-URL site for Komodo Edit, but I'd like to point to one of the more useful features of Komodo, namely it having the full DOM available to the macros. Which means that doing stuff like this macro to do word count on HTML/XML documents is changed from being a horrible regexp hack, to being totally manageable, and only nine lines of code.
Opera 9.20 beta 1
2007-03-28 15:49 – One comment
Opera 9.20 beta 1 is out the door. Go get it (or come here for a quick tip about one of the new features, speed dial)
Komodo: Open current selection as file
2007-03-22 17:33 – One comment
A Komodo IDE/Komodo Edit macro that allows you to open the current text selection as file.
Komodo Edit add-ons
2007-03-20 16:26 – Three comments
Since switching to Komodo, I've started to build a set of snippets and macros to make editing of markup easier, and I'm now making these available, together with a few dummy objects to give JavaScript autocompletion for Opera-specific properties and methods.
I see a shitstorm coming
2007-03-15 10:17 – Four comments
Apple has asserted intellectual property rights on the bitmap canvas found in the WhatWG spec.
Editor love, baby
2007-03-08 15:48 – Seven comments
Editor Love, or "How I learned to love Komodo Edit" after having been nudged in that direction a couple of days ago.
Steve Yegge talks about ECMAScript 4
2007-02-11 15:50 – Leave a comment
dojo.query: A CSS Query Engine For Dojo
2007-02-05 08:19 – Leave a comment
How To Subclass The JavaScript Array Object
2006-11-20 10:03 – Leave a comment
Being compatible with the dark matter of the web
2006-11-17 10:29 – Leave a comment
Spot the JS error
2006-11-14 14:16 – Five comments
At Hallvord's blog, I found this little JavaScript gem. Can you spot the error?
JavaScript, We Hardly new Ya
2006-11-14 10:13 – Leave a comment
The WHATWG Blog
2006-11-14 10:03 – Leave a comment
Opera Graph Library
2006-11-06 15:17 – Leave a comment
Opera Developer Community site launches
2006-11-01 13:29 – One comment
Opera launches a beta of the new Opera Developer Community site, named Dev.Opera. Here's a quick walkthrough
Event Streaming in Web Browsers
2006-09-01 17:29 – Eight comments
One cool feature we added to Opera 9 is Server-Sent Events from the WHATWG Web Applications 1.0 specification. Using SSE you can push DOM events continously from your web server to the visitor's browser. This creates a lot of exciting opportunities for web application authors.
Aptana
2006-07-25 15:37 – Leave a comment
Opera 9
2006-06-20 10:26 – Seven comments
Opera 9 is out. Go get it: Widgets, BitTorrent, improved standards support
Web 3.1415: Ajax, Ook! and Brainfuck
2006-04-02 17:08 – One comment
A library to assist in authoring Ook! and Brainfuck files for use on the Web 3.1415. Because authoring Web 2.0 apps has become all to easy.
Why Yahoo!'s Event Utility rocks
2006-03-03 09:21 – One comment
Image manipulation in <canvas>
2005-12-29 16:50 – Nine comments
What I did over christmas: Play with the <canvas> element in Opera 9. A few demos of image manipulation in canvas.
Cross-document messaging in Opera
2005-12-01 14:49 – Eight comments
One of the more unknown features of Opera is that it has an implementation of the DocumentMessaging interface from the Web Applications 1.0 specification. This interface allows authors to post messages between documents residing on different domains, without being suspectible to regular Cross Site Scripting vulnerabilities. This is a quick explanation and example of how cross-document messaging works.
Opera Platform SDK - Not your momma's Ajax
2005-11-15 09:00 – Seven comments
It's time to introduce to the world what I, and the team I'm working with are doing at Opera: The Opera Platform SDK, an advanced web application framework for mobile devices.
Why microformats is a good thing
2005-11-08 09:56 – Seven comments
Why microformats is a good thing, why you should embrace them, and use them whenever possible.
Ajax Pages
2005-08-01 14:17 – Leave a comment
ajaxpatterns.org
2005-07-20 13:36 – Leave a comment
Prototype JavaScript Framework
2005-07-20 13:33 – Leave a comment
The mystery argument
2005-07-18 11:19 – Four comments
Mystery Javascript: Opera and Gecko supports optional parameters passed to the function called in the window.setTimeout method, but return different lengths for the arguments array.
Google AJAXSLT
2005-06-23 18:26 – Two comments
Efficient JavaScript code - UserJS.org
2005-06-16 20:28 – Leave a comment
Trixie
2005-06-03 10:41 – Leave a comment
How to detect zoom level in Opera
2005-05-29 23:00 – Four comments
How to measure the current zoom level in Opera using Javascript.
Waiting for Cousteau
2005-05-11 18:27 – Three comments
... or Waiting for UserJS.org. Submit your Opera User JavaScripts for inclusion into the UserJS.org script repository.
User scripting blows up business models
2005-05-09 10:50 – Leave a comment
User JavaScript: Enhance blockquotes
2005-04-27 12:51 – Leave a comment
A User JavaScript for Opera 8 that adds clickable links to blockquotes when blockquotes use the cite attribute, without adding a clickable link.
User JavaScript: Clickable links in plaintext files
2005-04-27 11:43 – Three comments
A User JavaScript for Opera 8 that will make http/https/ftp URLs in plaintext documents clickable
Enhancing AWStats result pages with Opera User JavaScript
2005-04-26 11:28 – Leave a comment
A Opera User Javascript to enhance the keyphrase and keyword output pages with a live search function.
userjs.org
2005-04-20 19:43 – Six comments
A quick update on the creation of and motivation behind the userjs.org site devoted to User JavaScript in Opera, and why I think there is room for more than one site devoted to user scripting.
DHTML demos
2005-04-05 17:30 – Leave a comment
User Javascript changing moronic attitude ;-)
2005-04-01 13:47 – Leave a comment
Advanced User JavaScript: event handling
2005-03-21 22:12 – Leave a comment
User scripts spreading to Opera
2005-03-20 13:36 – One comment
Custom alert
2005-02-28 00:43 – Leave a comment
New site featurette: Filter list
2004-01-24 00:00 – Leave a comment
The filter list allows you to filter your search results, so you'll find what you're looking for faster.
More fun with :target
2003-08-01 19:12 – Three comments
A prototype GUI, using CSS :target to minimize complicated Javascript. Draggable, semi-transparent windows, with an added 58 lines of Javascript to make windows draggable.
Debugging Javascript with Opera
2003-07-24 00:13 – Leave a comment
How to debug Javascript using Opera
Trackback with autoexcerpts
2003-06-16 20:59 – Five comments
Another updated version of the trackback bookmarklets for creating bookmark blogs. Now has the ability to automaticall create excerpts
Trackbacks as bookmarks, update
2003-06-10 01:40 – Five comments
Updated trackmarks-as-bookmarks bookmarklet that also works in Internet Explorer.
Trackbacks as bookmarks
2003-05-22 02:34 – 21 comments
How to use TrackBacks to create a bookmark blog in Movable Type
Javascript performance tests
2003-05-22 00:15 – Leave a comment
6 simple tests to determine raw performance of loops in Javascript.
Javascript performance
2003-05-15 12:00 – Leave a comment
Two different javascript performance tests using a real-world script that adds syntax highlightning and code collapsing to code fragments in HTML pages.
Augh!
2003-05-14 18:55 – Leave a comment
On discovering that you don't understand the exceedingly clever JavaScript you wrote a few months ago.
Updated comment script
2003-03-14 13:42 – Ten comments
An update for the default ECMAScript for the Movable Type comment forms.