News for hackers. Stuff that matters.
Re:Very impressive CSS3 demo: CSS3 Planetarium by stevelosh on Wednesday March 16, 2011 @02:42PM (#2333305)
And here's what it looks like in IE9: http://twitpic.com/4a3kyw/full
Re:Very impressive CSS3 demo: CSS3 Planetarium by mrspandex on Wednesday March 16, 2011 @02:56PM (#2333373)
Also doesn't work in FF 3.6 or Opera 11...
Re:Very impressive CSS3 demo: CSS3 Planetarium by leftnode on Wednesday March 16, 2011 @03:11PM (#2333429)
They weren't just released yesterday...
Re:Very impressive CSS3 demo: CSS3 Planetarium by gkoberger on Wednesday March 16, 2011 @06:36PM (#2334271)
It's a Firefox 4 demo site, so 3.6 isn't supported. It should, however, work on most modern browsers.
Re:Very impressive CSS3 demo: CSS3 Planetarium by trezor on Thursday March 17, 2011 @03:31AM (#2335381)
It works in Chrome latest, but it is a bit laggy on what should be powerful and fairly modern laptop (Core i5, Windows Rating 5.9). I guess it's about 10 fps away from what I would consider "sufficiently" smooth, but maybe that goes more along the lines of showing what people now have come to expect of the web rather than being a shortcoming of HTML/JS-solutions.

As for this thread, today I learned that MSIE9 is actually released. Time to get updating :)

Re:Very impressive CSS3 demo: CSS3 Planetarium by mrspeaker on Wednesday March 16, 2011 @05:15PM (#2333957)
That is really awesome - but one thing (which is just an observation, not a complaint) I've noticed with all the CSS3 super-cool demos like this is that everything is very "linear". All the animation stuff happens in straight lines or repeating patterns (of circles, in the demo) which gives the page a certain feel.

I wonder if it's the start of an effect that will eventually be used to carbon-date websites... "Ah look at this specimen - table based layout, and JavaScript littered with variable names beginning with "mm_" from the late Dreamweaver era. Oooh, now look here... completely linear animations... my guess is it's early 2011! And in such condition!"

Re:Very impressive CSS3 demo: CSS3 Planetarium by arnorhs on Thursday March 17, 2011 @05:06AM (#2335516)
Not all the transitions are linear. In the cases where they are, it's obviously a design choice.

It might be that because they're moving fast that you perceive it that way. But most of the animations have easing. Ease in and out on almost all the animation styles.

http://mozillademos.org/demos/planetarium/css/style.css

Re:Very impressive CSS3 demo: CSS3 Planetarium by Groxx on Wednesday March 16, 2011 @07:33PM (#2334438)
That's interesting... I don't know if it's possible to animate directly on a bezier curve, though that'd be an extremely-useful thing to be able to do.

It looks like all the animatable properties just have ease-in / out timing, and go from A to B. Given that, the best you could do is animate each X/Y direction's behavior, creating a new animation at each bezier curve point, and using the bezier form of the timing function to mimic curved paths.

https://developer.mozilla.org/en/css/css_transitions and https://developer.mozilla.org/en/css/css_transitions

Re:Very impressive CSS3 demo: CSS3 Planetarium by bzbarsky on Thursday March 17, 2011 @07:41AM (#2335780)
The timing function can be an arbitrary cubic bezier; some common ones like ease-in/out and so forth have dedicated keywords.

You should be able to get arbitrary bezier paths if you pick your x and y timing beziers carefully, I'd think... But it does take some thinking.

Re:Very impressive CSS3 demo: CSS3 Planetarium by franck on Wednesday March 16, 2011 @07:40PM (#2334455)
Developer here.

We are glad that many of you found our demo interesting. The point was to explore how we could apply some new browser features to present educational content in an interactive/immersive way.

Sorry about Pluto fans – we were also sad not to include it. We should have put it as an easter egg!

Thanks to people who reported typo/content errors.

We cannot fix them right now though – because we have no control over Mozilla's site. We'll push an update when we get the chance.

Re:Very impressive CSS3 demo: CSS3 Planetarium by isleyaardvark on Thursday March 17, 2011 @10:11AM (#2336115)
Ok, can I gripe about the text that says this about Saturn: "Despite its size (9.4 Earths)..."? While the diameter is 9.4 times that of Earth, the size of Saturn is way larger than 9 individual Earths. Volume-wise you could fit 764 Earths inside Saturn, and that would be a more appropriate metric. The weird hexagon storm on Saturn alone is the size of 4 Earths.
Re:Very impressive CSS3 demo: CSS3 Planetarium by jarin on Wednesday March 16, 2011 @02:41PM (#2333296)
Looks very nice, reminds me of the Elements app for iPad.

P.S. I don't know about you guys, but it still bugs me whenever I don't see Pluto.

Re:Very impressive CSS3 demo: CSS3 Planetarium by nkassis on Wednesday March 16, 2011 @03:15PM (#2333442)
and the ton of other ice dwarfs in the far end of the solar system? Let it rest. Pluto is the first of a new class.
Re:Very impressive CSS3 demo: CSS3 Planetarium by Uchikoma on Thursday March 17, 2011 @08:18AM (#2335867)
Bugged me too.
Re:Very impressive CSS3 demo: CSS3 Planetarium by cosgroveb on Wednesday March 16, 2011 @03:27PM (#2333487)
It says Mt. Everest is 8848KM tall... I believe that should be Meters.
Re:Very impressive CSS3 demo: CSS3 Planetarium by micheljansen on Wednesday March 16, 2011 @02:58PM (#2333378)
It looks awesome on Chrome, but there is a slight glitch in the shape of a flash that occurs once all animation appears to have finished. Anyone else experiencing this?
Re:Very impressive CSS3 demo: CSS3 Planetarium by Griever on Wednesday March 16, 2011 @03:40PM (#2333541)
On Chrome Dev 11.0.696.12 and I'm experiencing the same thing. Seems like a minor complaint though as the rest of the site works flawlessly.
Re:Very impressive CSS3 demo: CSS3 Planetarium by splatcollision on Wednesday March 16, 2011 @03:52PM (#2333582)
Good stuff. Github page is here: http://github.com/littleworkshop/planetarium
Re:Very impressive CSS3 demo: CSS3 Planetarium by checker on Wednesday March 16, 2011 @02:41PM (#2333297)
The article points it out, but the text comes in from different directions depending on whether you're clicking on the planet or scrolling to it from the side.

Nice touch.

Re:Very impressive CSS3 demo: CSS3 Planetarium by sho_hn on Wednesday March 16, 2011 @08:23PM (#2334567)
One thing I notice is that I can't select most of the text. I'd like HTML sites to do better than Flash in this regard -- conformance to established HTML behavior is supposed to be an advantage.
Re:Very impressive CSS3 demo: CSS3 Planetarium by bzbarsky on Thursday March 17, 2011 @08:09AM (#2335846)
This looks like a purposeful action by the page: it calls preventDefault on mousedown events for some reason. :(
Re:Very impressive CSS3 demo: CSS3 Planetarium by rheide on Wednesday March 16, 2011 @03:07PM (#2333415)
I feel sorry for Pluto :(
Re:Very impressive CSS3 demo: CSS3 Planetarium by rkalla on Wednesday March 16, 2011 @02:51PM (#2333347)
I still read this word as "Planeh-arium" in my head. Maybe a bad reference :)
Re:Very impressive CSS3 demo: CSS3 Planetarium by duck on Thursday March 17, 2011 @05:37AM (#2335567)
Very cool, but on every planet I wanted to be able to spin it on it's axis. That would be a demo.
Re:Very impressive CSS3 demo: CSS3 Planetarium by nborgo on Wednesday March 16, 2011 @06:26PM (#2334238)
Moving the left and right arrows with the cursor is a great idea, especially since they don't move until you get close. It might be nicer if they would animate to the position when you first move the cursor over, though. It's kind of jumpy as is.

That pattern just might catch on.

Re:Very impressive CSS3 demo: CSS3 Planetarium by syaz1 on Thursday March 17, 2011 @03:11AM (#2335353)
There's a bug though. If you click on first/last planet then the arrow will not appear at all. Naturally you expect right arrow when clicking the first planet. Vice versa.
Re:Very impressive CSS3 demo: CSS3 Planetarium by necolas on Thursday March 17, 2011 @05:24AM (#2335542)
Really impressive, but it's a shame that this is being labelled "CSS3" or "HTML5" when clearly it relies on a lot of JavaScript. It's a great example of weaving several front-end technologies together...and there should be nothing wrong with saying so.
Re:Very impressive CSS3 demo: CSS3 Planetarium by crowdcs on Wednesday March 16, 2011 @03:04PM (#2333404)
I let out a sigh when I saw redundant but understandably necessary function calls to support all browsers. Is there hope in seeing stuff like this consolidated anytime soon? -moz-transform:... -webkit-transform:... -o-transform:... transform:...
Re:Very impressive CSS3 demo: CSS3 Planetarium by grayrest on Wednesday March 16, 2011 @03:23PM (#2333472)
Not really. The prefixes allow vendors to do experimental stuff without creating (as much) of a backwards compatiblity problem before things standardize. If you don't like it, use a preprocessor:

* http://sass-lang.com/ * http://lesscss.org/ * http://learnboost.github.com/stylus/

The last one is the most promising since it can be made to look exactly like standard css, but it's really rough right now.

Re:Very impressive CSS3 demo: CSS3 Planetarium by nathos on Wednesday March 16, 2011 @03:56PM (#2333596)
Sass, at least with its default SCSS syntax, is a strict superset of CSS3 so it's a good place to start. Your existing CSS files can be processed by Sass without changes.

Combined with some of the great mixins provided with Compass: http://beta.compass-style.org/reference/compass/css3/transfo..., you can eliminate many of the vendor specific declarations.

Re:Very impressive CSS3 demo: CSS3 Planetarium by grayrest on Wednesday March 16, 2011 @05:20PM (#2333984)
They all either are or can be strict supersets of CSS3. What separates stylus is that you can write valid, non-superset CSS3 and invoke the appropriate functions/mixins:

    @import css3

    #transparent {
        opacity: 0.6;
    }

    ----

    #transparent {
      opacity: 0.6;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
    }
That's input/output in stylus. This uses an `opacity` mixin defined that's being invoked without the optional parentheses and with the optional colon+semicolon.

I have the beginnings of the Compass CSS3 library that's on hold while TJ fixes bugs and adds features to cover edge cases. The eventual goal is the ability to write straight CSS3 and have everything work.

Re:Very impressive CSS3 demo: CSS3 Planetarium by bzbarsky on Thursday March 17, 2011 @08:10AM (#2335849)
Yes, once transforms enter CR.

Note, by the way, that right now -moz-transform and -webkit-transform have different syntax, so "consolidation" involves deciding which syntax to standardize on.

Re:Very impressive CSS3 demo: CSS3 Planetarium by estel on Wednesday March 16, 2011 @07:48PM (#2334477)
It does seem a bit odd that all three major browser vendors are able to release interesting web-apps that only run at full-speed in their own browsers. Do they intentionally exploit some exclusive feature to show the other browsers up?
Re:Very impressive CSS3 demo: CSS3 Planetarium by franck on Wednesday March 16, 2011 @07:55PM (#2334499)
There was not any attempt to make it run faster in Firefox 4. The goal is to showcase the Web as a platform and its possibilities. There is clearly no point in making it run well only in one browser.

Besides, we developed this demo on OSX, where performance is comparable among all three supported browsers.

Re:Very impressive CSS3 demo: CSS3 Planetarium by bzbarsky on Thursday March 17, 2011 @08:02AM (#2335825)
The ordering is sometimes the other way. You write the stuff you think is interesting, discover that you're not as fast as you'd like on it, fix whatever performance bugs you find.

Though in this case the demo was actually written after Firefox 4 development was frozen. So the fact that it's particularly fast in Firefox on Windows just has to do with hardware acceleration, nothing else.

Re:Very impressive CSS3 demo: CSS3 Planetarium by kpozin on Wednesday March 16, 2011 @08:01PM (#2334520)
Works very well in Chrome 10.0 beta, barely runs in Firefox 4 RC1 on the same machine. Oh, the irony.
Re:Very impressive CSS3 demo: CSS3 Planetarium by kevingadd on Wednesday March 16, 2011 @10:25PM (#2334842)
Works perfectly in the latest mobile build of firefox (albeit slowly), which is a pleasant surprise - I expected it not to. Alas, for some reason the stock android browser can't even finish loading it.
Re:Very impressive CSS3 demo: CSS3 Planetarium by ch0wn on Wednesday March 16, 2011 @05:31PM (#2334032)
It works perfectly fine in Chrome, but runs very sluggish compared to FF4. Does anyone know which particular part is so much faster in Firefox?
Re:Very impressive CSS3 demo: CSS3 Planetarium by robertk on Wednesday March 16, 2011 @06:11PM (#2334187)
Apparently both Earth and Mercury are the densest planets in the solar system...
Re:Very impressive CSS3 demo: CSS3 Planetarium by baddox on Thursday March 17, 2011 @01:31AM (#2335189)
While that's certainly possible (if they had the same density and no planet was more dense), it's more likely a copy and paste error.
Re:Very impressive CSS3 demo: CSS3 Planetarium by InclinedPlane on Thursday March 17, 2011 @05:08AM (#2335520)
Earth has a higher density than Mercury (5.52 vs 5.43 g/cm^3).
Re:Very impressive CSS3 demo: CSS3 Planetarium by emehrkay on Wednesday March 16, 2011 @03:36PM (#2333530)
My son has to see this
Re:Very impressive CSS3 demo: CSS3 Planetarium by J3L2404 on Wednesday March 16, 2011 @03:02PM (#2333398)
Crashes Safari on iPad iOS 4.3

[EDIT] On iPad 1.

Re:Very impressive CSS3 demo: CSS3 Planetarium by gnok on Wednesday March 16, 2011 @04:23PM (#2333717)
It rendered somewhat incorrectly for me, but it was smooth and didn't crash. I'm on Safari on iPad 2 iOS 4.3.
Re:Very impressive CSS3 demo: CSS3 Planetarium by pluto on Wednesday March 16, 2011 @09:05PM (#2334664)
Hmpfh.
Re:Very impressive CSS3 demo: CSS3 Planetarium by sorbus on Wednesday March 16, 2011 @10:00PM (#2334783)
Ah, novelty accounts. Could we please keep those to reddit, if you don't mind?
Re:Very impressive CSS3 demo: CSS3 Planetarium by mconnors on Wednesday March 16, 2011 @03:29PM (#2333495)
Something you can make in flash in like 10 minutes- and it works on everything ( not mobile ).
Re:Very impressive CSS3 demo: CSS3 Planetarium by richbradshaw on Wednesday March 16, 2011 @04:57PM (#2333879)
We might as well just drop the whole idea of HTML, JS and CSS and just use 3rd party plugins to replace the whole thing. That totally makes sense. Innovation is for idiots.
Re:Very impressive CSS3 demo: CSS3 Planetarium by mconnors on Thursday March 17, 2011 @10:45AM (#2336221)
The only "innovative" thing about this is- its not flash. The reason its not flash is because front end developers, hate flash with a passion that borders, frothing at the mouth psychosis. They hate flash because very simply it takes work off of their desk. At the end of the day, a client still won't want to pay twice as much for something that works on half of modern browsers when in reality his high school kid could have done it in 10 minutes with flash, (unless its for mobile). Its the same stupid argument I've heard for the past 10 years, but the difference today is mobile platforms won't support flash (or it just sucks on mobile) and there is finally an opportunity to kill flash. That pretty much sums it up. Haters will hate, client will still pay for flash, flash sucks on mobile, lame slide shows are not innovative.
Re:Very impressive CSS3 demo: CSS3 Planetarium by kenjackson on Wednesday March 16, 2011 @05:23PM (#2333997)
First, innovation doesn't only happen in a single application and runtime (the browser). Flash has innovated as much as FF4 has. It's weird that the distribution model for the runtime defines what is innovation and what isn't. A runtime that is distributed as a plugin is inherently not innovative, while one that is a monolithic application is. Go figure.

And I think the point of the original poster isn't that we should drop HTML. But rather that this application isn't cool on first principles. You can show this same app to your child as a Flash app and your child should be just as impressed. It's a good work for HTML, but as far as applications distributed by a web server it isn't especially innovative. But we should keep working on HTHML/JS/CSS as it will get better.

Re:Very impressive CSS3 demo: CSS3 Planetarium by daleharvey on Wednesday March 16, 2011 @06:07PM (#2334174)
because its the distribution that is innovative, its nice being able to draw text and images and move them around and stuff but that doesnt quite fall under my definition of innovative, for html and flash

the features of html/css/javascript are not impressive, the fact that you can build increasingly complex application that will work on a common runtime installed on every pc and most people tablets and phones without (barely)any packaging or installation procedures is a modern day miracle

Re:Very impressive CSS3 demo: CSS3 Planetarium by kenjackson on Wednesday March 16, 2011 @07:01PM (#2334345)
the fact that you can build increasingly complex application that will work on a common runtime installed on every pc and most people tablets and phones without (barely)any packaging or installation procedures is a modern day miracle

This requires me to install a whole browser! For some reason the HN crowd sees installing FF4 as free. Installing a plug-in as nearly the equivalent to jail time, a horrendous chore.

With all due respect to all the excitement in mobile (where Flash is nonexistent), HTML5 fundamentally won't change the desktop at all. And certainly looking at an application that I've seen high school students do in Flash is simply not exciting. I salute HTML for finally getting there, but its just not fundamentally very interesting.

Re:Very impressive CSS3 demo: CSS3 Planetarium by bzbarsky on Thursday March 17, 2011 @08:15AM (#2335860)
> Installing a plug-in as nearly the equivalent to jail > time, a horrendous chore.

That's because that's what it generally has been, in the case of Flash. You may want to read http://blog.zpao.com/post/538816688/how-to-install-flash-on-... if you haven't had that particular "pleasure"...

Re:Very impressive CSS3 demo: CSS3 Planetarium by daleharvey on Wednesday March 16, 2011 @07:21PM (#2334401)
Installing a plugin is generally a one click procedure and I made no reference to firefox or plugins.

I wasnt being specific to this one page (which works in chrome as well), but at the same time it can be viewed in browsers going back to mosaic with varying degrees of aesthetic.

html has already changed the desktop and it is only going to go further, there are operating systems coming out that have nothing but a browser, most phones these days come with a browser, we are still in the early stages of building the most ubiqitous and usable computing platform that has ever existed, you might not get excited about it, but I do.

Re:Very impressive CSS3 demo: CSS3 Planetarium by ceejayoz on Wednesday March 16, 2011 @05:20PM (#2333985)
That's an interesting definition of "everything" you have there.
Re:Very impressive CSS3 demo: CSS3 Planetarium by syaz1 on Thursday March 17, 2011 @03:14AM (#2335360)
The only thing I can relate 'everything' with Flash is that everything spikes up. Seeing this demo I noticed no big spikes on CPU, etc.
Re:Very impressive CSS3 demo: CSS3 Planetarium by mconnors on Thursday March 17, 2011 @10:13AM (#2336126)
Well I guess you won't get spikes on any version of IE since that can't even display it.
Re:Very impressive CSS3 demo: CSS3 Planetarium by mconnors on Wednesday March 16, 2011 @04:22PM (#2333710)
can't bury that which is true.
Re:Very impressive CSS3 demo: CSS3 Planetarium by kenjackson on Wednesday March 16, 2011 @04:42PM (#2333800)
Pretty cheap downvotes you're getting here. Wish I could upvote you more than once.