IceArdor's Blog

based on: http://en.wikipedia.org/wiki/Image:Timeline_of_web_browsers.svg

The build numbers are already kinda cluttered, but if I can figure out a way to make it work, I'd do it. Maybe each build should be like "88808 / 3695 / 660". I kinda wanted to only show the build when the circle is hovered over, but I haven't figured out how to do that yet.

Thanks for the feedback. I'm considering including this on Wikipedia so that other people can edit it. Feel free to look at the source code; it's pretty simple. If you know any SVG or JS, please give me some feedback on how to make it better.

Note to self:

I need to edit this: http://my.opera.com/desktopteam/blog/show.dml/759403 Peregrine and Kestrel both existed before Friday February 16 2007. Peregrine became the working Opera copy, and Kestrel branched off of that.

Kestrel's been in the working for a little over a year now.

Note to self: Official date of Kestrel branching off from Opera core: June 20, 2006 (http://my.opera.com/desktopteam/blog/2007/08/31/focus-areas-during-kestrel-development), Which is the same day that Opera 9.00 Final was released, and the same day that v1.6.svg uses.

Yeah, I was thinking about making x="date2pixel(2007,9,4)", and then I could easily stretch it by a factor of 1.2 or 1.5 so that the build numbers don't overlap. Then it'd be worth my time to added in builds for the different platforms.

Another problem I had run into was that by starting the timeline at 2005, this timeline doesn't include any releases before that date, because they are negative values, which can't be displayed. I suppose I could do a horrible javascript hack to add 1000 to every x="" and cx="" value, but by implementing the dynamic system you wrote about, it'll be really easy to change the starting date.

I was thinking like making an xml file with all the data and doing xslt to write the svg page. But I guess I can do the same with JavaScript. So should I just put all of the data in attributes?

Thanks a ton! I'll start rewriting the image when I get back from vacation.

Thanks David.

I've got a lot of reworking to do on the files anyways because Merlin has a minimum font size allowed, and Kestrel can make fonts infinitely small. SVG support is a lot faster on Kestrel too.

Note to self: Add build 9500 to 9.5 Alpha.
Add build 8762 to Kestrel Branch, which is experimental build from Hakon featuring the

version 1.7 is released with a couple updates. Thanks for the recommendations, David. I'm currently debating whether I should use javascipt or xml/xslt to make a more dynamic image (make it easier to manage, show/hide windows, mac, or unix builds, graph the frequency of weeklies being published on a friday vs other day of the week, horizontally stretch the graph, etc).

Will it be faster to render js or xml?

I wanted to see how the xml route would look, so here's a piece of the xml file.

<major id="9Kestrel">
<branch id="9.5x">
<release longname="9.5 Alpha 1" shortname="9.5a1" type="alpha" />
<date year="2007" month="9" day="4" dotw="tuesday" />
<build win="9500" mac="4404" unix="1567" />
</branch>
</major>

Basically, I'd be using XML as a database and XSLT to convert the XML into SVG. While this is more readable, your solution is more elegant. I've never worked with XSLT before, so I'd be better off with the JavaScript.

David, is there anyway that I can loop through all of the x="" values and apply a multiplier on them using javascript, and manipulate the horizontal spacing at runtime? I want to be able to make this file available for people who have javascript enabled and disabled, if possible.

I'm worried that by computing all of the x="" values onLoad, that it'll slow down the rendering of the file severely.

Here's a working copy of what I have. The 9.5a1 has the build (9500) implemented in your javascript system. v1.8a. Best viewed on Kestrel (Merlin evaluated the dx before rotating the text sideways, turning the dx into a dy, essentially. Kestrel fixed this problem)

Thanks David! Your help is greatly appreciated. I was trying to figure out the namespace dtd stuff last night, totally confused because I've never done any of that before (and if you don't know your way around the w3's site, it's VERY confusing and most certainly unhelpful to anyone without a PhD in Legal Documentation.

The other thing I wanted to know is how I can use the current year="" month="" day="" implementation without having an onLoad event on EVERY single tag. If I could call the onLoad event at the top, or even at the beginning of every <g> or <use>, it'd be a lot easier. What code would I need for that?

Lastly, I need to figure out how to use <symbol>s and <use> them later in the code. I'll work on learning that later. I might need help. I might not even need to use symbols if I use attributes to describe win="" mac="" unix="" and then use javascript to write that data. The problem then would be the positioning of the elements. I can't figure out how to use css to position elements. That'd make it a lot easier to say text.build (y: 10;}, but that isn't supported in SVG.



Mabdul, I wasn't sure where to put 8762. 8762 was the experimental build that Hakon Wium Lie gave to us on his blog (not posted on Desktop Team), giving us a technical preview of using the element to embed ogg videos within a document instead of using proprietary codecs like flash or windows media player using the <embed> tag. I never downloaded it, but feature-wise it was probably very similar to Merlin. I would have been happy putting it in with the 9.2x branch, but the filename of the exe he released was http://people.opera.com/howcome/2007/video/op950_8762_video_repack_with_lgpl_signed.exe, making me assume that it was not from the 9.2x branch, but rather the 9.5x branch. However, Kestrel probably had active development at the time and was probably very buggy, and so I doubt that it would have come from the buggy Kestrel branch. In confusion, I put it in the only place where it doesn't satisfy logic. To be even further incorrect, the build really should be called a technical preview, as that's what it is. But it was never called that by Hakon.

I figured out how to make it display in both javascript-enabled browsers and js-disabled. In each tag, I'll include the x="" (for js-disabled) and year="" month="" day="", which will update the x="" value.

By adding in a year="" month="" day="", I can also alter the formula to horizontally stretch the page. How can I embed a slider on the page so the user can choose what factor to horizontally stretch everything by?

I might make a calculator to accomodate for some days having 30 days, others having 31, and February having 28/29. I could also feed the year, month, date values into a function which evaluates what day of the week each build was released on. That was one of my initial hopes, and I think that's finally a possibility. I'm so happy. Thanks.

v1.8a v1.8b v1.8c v1.8d

I've extended the timeline to go all the way back to Opera 2. However, I want to start the initial viewpoint from x=0 to emphasize the work that has been put into this as being Opera 8.x and beyond.

Would I want to use javascript (something like focus()?) or could I use an anchor name (index.html#top)

Update: v1.8 is posted, v1.9a is in progress. date2pixel tool updated as well.

I'm trying to figure out how to make hover events work either by using css or javascript
circle:hover {content: attr(year)}
onMouseOver="displayToolTip(evt)" onMouseOut="hideToolTip(evt)"

Could I get some help, David?

I also want to incorporate a utility that can calculate the probability of a release occuring on each day of the week, among other stuff. (Open up the svg image (1.9a) in a text editor and look at the changelog).

circle:hover for some reason won't fire. I can do *:hover circle, but then that makes every single circle fire when I hover over the svg document. Why isn't it working?

Version 1.9 will display Windows, Mac, and Unix builds. It'll also allow you to hover over a circle and display the year, month, day, and day of the week. I've got everything implemented in parts, and just need to put it together and debug. I'm using the onmouseover and onmouseout events to make the popup. I'm going to hide all of the builds unless you hover over the circle to solve the problem with all the builds running on top of each other. I decided to make this change because adding mac and unix builds will only make it more crowded.

If anyone can find the build numbers for releases prior to 7.5tp1, it'd be greatly appreciated. I can do the formatting, I just have had limited luck on Google, though I have found some build numbers. If you can find windows, mac, and unix build numbers, that'd be even better. Thanks.

Edit: I'm having some troubles with the SVG DOM. I don't know enough. Help? Search through the javascript section to find showBuild(evt) and hideBuild(evt). I'm using the circle for 9.23 as my testcase, so hover over 9.23 to get it to work. 1.9b

Edit2: Build + Day of the Week demo script

I suppose I could just give every tag an id and then reference them by their tag id, but I should be able to access them through the DOM without having to assign individual id's to everyone.

http://www.howtocreate.co.uk/tutorials/jsexamples/movetooltip.html

(When I get time, I'll add in a tooltip like this one to the SVG file for build number and release date)

yeah.... I've been crazy busy, but I'll try to keep working on this. I have been adding in weekly releases. I just haven't changed the layout, thus no new version number. Nonetheless, you'll notice the image for version 1.9 points to 1.9.9 (as it asymptotically approaches 2.0!) Maybe I'll have to celebrate with a new version when Kestrel's released. No promises.

It's looking like these releases are going to asymptotically approach 2.0. I really ought to find more time, but school's more important. It is my plan that sometime in the future, I will learn how to use js and svg and css to make this an interactive document, rather than just an over-sized image. Unfortunately, I know very little javascript, basic CSS, and limited SVG, so I'll have to teach myself that stuff before I can even begin to write a 2.0.

Thanks for updating it, btw.

I uploaded v1.9.12 and fixed the date2pixel html tool (apparently <textarea> isn't a self-closable tag). Thanks a ton, EMeczKa. I've also posted this update on Wikipedia.

Judging by the frequency of releases, and noticing the pattern before Opera 9.0 came out, it looks like Kestrel will take flight within the next 2 months.

1.9.17

oops. I was going to do that. Thanks, I'll get it fixed.

http://en.wikipedia.org/wiki/Image:Timeline_of_Opera_Releases.svg

I've really been slacking off on updating this. Sorry about that.

It is embedded in http://en.wikipedia.org/wiki/History_of_the_Opera_web_browser

Update! One of these days when I get motivated, I'll teach myself JavaScript. Knowing me, that'll be a couple years down the road, so don't keep your hopes up. In the mean time, I've put in the last 3 pages of weeklies from the desktop team blog, plus made a couple tiny changes. This project is mostly for me me learning how to use SVG and ultimately JavaScript.

There are two types of people in this world. There are those who are like Tamil and contribute to Opera when they could be sleeping or relaxing. And there's people like me who snatch every moment to relax when not diligently studying.

Be the Tamil. You'll get much more done, everyone will like you and you might get banned by Opera for a day.