9 ms·

Please, tell me this is Adobe trying to mock IE. It has to be, right? I mean, they've always sort of not valued source code, but this is beyond torturing it. T

Please, tell me this is Adobe trying to mock IE. It has to be, right? I mean, they've always sort of not valued source code, but this is beyond torturing it. This is so inspirationally horrible someone spent hours remaking it, like it should've been: http://studentweb.infotech.monash.edu/~wlay/FIT1012/muse-demo/ http://studentweb.infotech.monash.edu/~wlay/FIT1012/muse-dem....

InclinedPlane 15y ago
Indeed. The inefficiency here is astounding, especially considering the relatively straightforward page layout involved. Original: 1496 lines, 77.9kB Your version: 104 lines, 4.75kB I'd thought we'd progressed beyond the state of a decade ago where Dreamweaver or what-have-you would build you a cumbersome and baroque html splooge to match whatever you had done in the designer, but I guess we haven't advanced that far. Just goes to show you that front-end devs are still as necessary as ever I suppose.
- josscrowcroft 15y ago
  As long as tools like Dreamweaver exist, there will be a need for good front-end developers to clean up the mess.
  - ramen 15y ago
    What a shameful waste of a good front-end developer's time.
    - InclinedPlane 15y ago
      "What a [lucrative] waste of a good front-end developer's time."
      - barnaby 15y ago
        You couldn't pay me enough to _maintain_ that mess. Not even a unit test in sight if something breaks.
- skrebbel 15y ago
  How about we've progressed to the state where HTML is the bytecode you don't want to see anyway, and designers can use modern tools to manipulate it? If the generated markup works, cross-browser and cross-platform (I don't know to what extent it does, but let's assume so), then what's the problem? For many purposes, optimizing the HTML nerd out of the process is a much bigger win than a 20k download (don't forget gzip) is a loss. I know this is going to get me downvotes, but I think the dogmatic "HTML shall be written by hand!!1" attitude all over this thread is just people clinging to the past.
  - barnaby 15y ago
    You're forgetting that when several thousand people access a site per second, even a 1kb difference means thousands of dollars of bandwidth cost and fractions of a second of download speed.... let alone 70KB of difference which would bankrupt your company and turn all of your users away. We don't write HTML/JS/CSS by hand because it's fun, that's for sure. We focus on code-reuse and delayed loading plus AJAX (plus gzip, compress, CDN, cache, etc.) because the customer focuses on speed and the CEO focuses on the bottom line.
    - pierreminik 15y ago
      This. And, not to mention no business owner want to get locked into a solution, they want their "data" transferable and standardized to at least some extend. The code this produces is so horrible you've lost all the time spent with it. Muse dies out, and your time spent in it dies with it.
      - slowpoke 15y ago
        And, not to mention no business owner want to get locked into a solution, they want their "data" transferable and standardized to at least some extend. That's a weird thing to say. Why do many business continue to use things like MS Office - or rather, its fabulous file formats then? Or other vendor-lock-in products? Don't misunderstand me, I'd wish all businesses would think like this, because open standards are infinitely superior to vendor-specific file formats. But unfortunately, most don't.
- waterhouse 15y ago
  And how much is it compressed? Let's see... ~ $ curl -s 'http://studentweb.infotech.monash.edu/~wlay/FIT1012/muse-demo/' | gzip | wc -c 1741 ~ $ curl -s 'http://muse.adobe.com/index.html' | gzip | wc -c 11521 Hmm, so 11.5kB vs 1.7kB with gzip, which I believe browsers can usually handle. That's a factor of 6.6, incidentally. I don't know much about this, but might it still be ok? I thought to check this because of ridiculousfish's old article (note the FAQ at the bottom, "Isn't that a humungous flood of markup?"): http://ridiculousfish.com/blog/archives/2009/06/01/roundy/#fish_made_a_mess http://ridiculousfish.com/blog/archives/2009/06/01/roundy/#f...
  - libria 15y ago
    That factor is exacerbated on a smartphone. Plus, some of them pay for bandwidth.
  - Rantenki 15y ago
    Keep in mind that those connections are all going to be stuck in TCP slow start (gradually improving) for the duration of their communications, meaning that the smaller version gets loaded in 2*RTT, as it will probably fit, in it's entirety, in 2 packets. The larger one is going to take 8 or so packets, meaning a lot more RTTs (probably at least 4, assuming aggressive TCP tuning, and possibly 6. Since RTT can easily be 120ms, these can be substantially larger load times, and that can make a huge impact to user impression: Even small changes in response times can have significant effects. Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006). edit: It has been pointed out below that rfc2581 is going to mitigate this somewhat, and they are absolutely right, although I don't know what the implementation levels on this are in the real world, so my observations above may be obsolete for newer OSs.
    - jsnell 15y ago
      Basic RFC 2581 should hardly count as an aggressively tuned stack, and even it'd do the larger file in 4 roundtrips (syn/synack, req/2 packets, -/4 packets more, -/8 packets more). These days even an initial cwnd of 10 might not count as aggressive any more, given it's the default initial cwnd on recent Linux kernels...
- InclinedPlane 15y ago
  P.S. The big background image is only about 49kb...
- nickolai 15y ago
  Hopefully this issue will get back on the table with increasing mobile internet usage, and people bouncing off because of poor load times. I cant count the number of times I have to hit the back button just because it takes too long to load. I really do not want to see that 1mb picture of your dog mascot, but i was actually interested in your 5kb product description... Oh well if you dont care about your site, you probably dont care about selling your product either.
tiddchristopher 15y ago
The original does have at least one advantage: preloaded hover images. It's nice for them to improve usability a tiny bit, along with all the bloat. I can't imagine a complete newcomer to HTML and CSS hacking together a page and having it come out nearly as bad. Any designer who can learn design can easily learn to code better than Muse, in my opinion.
- strager 15y ago
  Sprite sheets?
  - tiddchristopher 15y ago
    I can't tell whether you're suggesting a solution or taking a guess as to what Muse did. I think it's the latter. Sorry if I interpreted your question incorrectly. :) They're using a hidden div full of <img> elements to load the hover images before they're requested by an actual hover. It's all the way at the bottom of their code code: <div class="preload_images"> [Removed for brevity] </div> Sprite sheets are another option (using the sliding doors technique), but they're a bit more ungainly. They would save a couple HTTP requests, but that extent of optimization isn't necessary on most sites. Unless I've already combined all my stylesheets into one file, I certainly wouldn't start combining images. What really matters is perceptible lag to a user, and either technique work just as well for that. I find Adobe's technique kind of neat, and I'll probably use it in some of my future websites.
    - hammerdr 15y ago
      The windowing technique isn't ungainly when its done automatically for you a la SpriteMapper :) http://yostudios.github.com/Spritemapper/ http://yostudios.github.com/Spritemapper/
    - minikomi 15y ago
      Or you could inject them into the Dom so they load, but don't exist anywhere on the page..
godsped 15y ago
To add insult to injury, the layout is broken in chromium on Ubuntu. Whereas the remake you posted is running as expected. http://i.imgur.com/otaOc.png http://i.imgur.com/otaOc.png
- dcordeiro 15y ago
  Speaking of which, "Adobe Air is not available for your system." :-P
  - godsped 15y ago
    True, I have not come to expect anything else, so I run a WIN7 virtual box, no biggie.
doublesprout 15y ago
Dreamweaver required you to know quite a bit about HTML. Muse is like InDesign/Photoshop, which people use to do mockups of designs (not UIs/wireframes) today. It cuts translation to code from the workflow. That's a meaningful shortening of the feedback loop for a designer. As for the rest of us, we don't have to be concerned till Muse starts learning the quirks and features of CSS faster than ourselves.
AlexCP 15y ago
Seriously, you have to learn how to use css sprites...
chadgeidel 15y ago
Thanks for that. I know a little about ancient-style table-layout web dev, but didn't know what the "proper way" of laying out that site would have been.

InclinedPlane 15y ago

Indeed. The inefficiency here is astounding, especially considering the relatively straightforward page layout involved. Original: 1496 lines, 77.9kB Your version: 104 lines, 4.75kB I'd thought we'd progressed beyond the state of a decade ago where Dreamweaver or what-have-you would build you a cumbersome and baroque html splooge to match whatever you had done in the designer, but I guess we haven't advanced that far. Just goes to show you that front-end devs are still as necessary as ever I suppose.

josscrowcroft 15y ago
As long as tools like Dreamweaver exist, there will be a need for good front-end developers to clean up the mess.
- ramen 15y ago
  What a shameful waste of a good front-end developer's time.
  - InclinedPlane 15y ago
    "What a [lucrative] waste of a good front-end developer's time."
    - barnaby 15y ago
      You couldn't pay me enough to _maintain_ that mess. Not even a unit test in sight if something breaks.
skrebbel 15y ago
How about we've progressed to the state where HTML is the bytecode you don't want to see anyway, and designers can use modern tools to manipulate it? If the generated markup works, cross-browser and cross-platform (I don't know to what extent it does, but let's assume so), then what's the problem? For many purposes, optimizing the HTML nerd out of the process is a much bigger win than a 20k download (don't forget gzip) is a loss. I know this is going to get me downvotes, but I think the dogmatic "HTML shall be written by hand!!1" attitude all over this thread is just people clinging to the past.
- barnaby 15y ago
  You're forgetting that when several thousand people access a site per second, even a 1kb difference means thousands of dollars of bandwidth cost and fractions of a second of download speed.... let alone 70KB of difference which would bankrupt your company and turn all of your users away. We don't write HTML/JS/CSS by hand because it's fun, that's for sure. We focus on code-reuse and delayed loading plus AJAX (plus gzip, compress, CDN, cache, etc.) because the customer focuses on speed and the CEO focuses on the bottom line.
  - pierreminik 15y ago
    This. And, not to mention no business owner want to get locked into a solution, they want their "data" transferable and standardized to at least some extend. The code this produces is so horrible you've lost all the time spent with it. Muse dies out, and your time spent in it dies with it.
    - slowpoke 15y ago
      And, not to mention no business owner want to get locked into a solution, they want their "data" transferable and standardized to at least some extend. That's a weird thing to say. Why do many business continue to use things like MS Office - or rather, its fabulous file formats then? Or other vendor-lock-in products? Don't misunderstand me, I'd wish all businesses would think like this, because open standards are infinitely superior to vendor-specific file formats. But unfortunately, most don't.
waterhouse 15y ago
And how much is it compressed? Let's see... ~ $ curl -s 'http://studentweb.infotech.monash.edu/~wlay/FIT1012/muse-demo/' | gzip | wc -c 1741 ~ $ curl -s 'http://muse.adobe.com/index.html' | gzip | wc -c 11521 Hmm, so 11.5kB vs 1.7kB with gzip, which I believe browsers can usually handle. That's a factor of 6.6, incidentally. I don't know much about this, but might it still be ok? I thought to check this because of ridiculousfish's old article (note the FAQ at the bottom, "Isn't that a humungous flood of markup?"): http://ridiculousfish.com/blog/archives/2009/06/01/roundy/#fish_made_a_mess http://ridiculousfish.com/blog/archives/2009/06/01/roundy/#f...
- libria 15y ago
  That factor is exacerbated on a smartphone. Plus, some of them pay for bandwidth.
- Rantenki 15y ago
  Keep in mind that those connections are all going to be stuck in TCP slow start (gradually improving) for the duration of their communications, meaning that the smaller version gets loaded in 2*RTT, as it will probably fit, in it's entirety, in 2 packets. The larger one is going to take 8 or so packets, meaning a lot more RTTs (probably at least 4, assuming aggressive TCP tuning, and possibly 6. Since RTT can easily be 120ms, these can be substantially larger load times, and that can make a huge impact to user impression: Even small changes in response times can have significant effects. Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006). edit: It has been pointed out below that rfc2581 is going to mitigate this somewhat, and they are absolutely right, although I don't know what the implementation levels on this are in the real world, so my observations above may be obsolete for newer OSs.
  - jsnell 15y ago
    Basic RFC 2581 should hardly count as an aggressively tuned stack, and even it'd do the larger file in 4 roundtrips (syn/synack, req/2 packets, -/4 packets more, -/8 packets more). These days even an initial cwnd of 10 might not count as aggressive any more, given it's the default initial cwnd on recent Linux kernels...
InclinedPlane 15y ago
P.S. The big background image is only about 49kb...
nickolai 15y ago
Hopefully this issue will get back on the table with increasing mobile internet usage, and people bouncing off because of poor load times. I cant count the number of times I have to hit the back button just because it takes too long to load. I really do not want to see that 1mb picture of your dog mascot, but i was actually interested in your 5kb product description... Oh well if you dont care about your site, you probably dont care about selling your product either.

tiddchristopher 15y ago

The original does have at least one advantage: preloaded hover images. It's nice for them to improve usability a tiny bit, along with all the bloat. I can't imagine a complete newcomer to HTML and CSS hacking together a page and having it come out nearly as bad. Any designer who can learn design can easily learn to code better than Muse, in my opinion.

strager 15y ago
Sprite sheets?
- tiddchristopher 15y ago
  I can't tell whether you're suggesting a solution or taking a guess as to what Muse did. I think it's the latter. Sorry if I interpreted your question incorrectly. :) They're using a hidden div full of <img> elements to load the hover images before they're requested by an actual hover. It's all the way at the bottom of their code code: <div class="preload_images"> [Removed for brevity] </div> Sprite sheets are another option (using the sliding doors technique), but they're a bit more ungainly. They would save a couple HTTP requests, but that extent of optimization isn't necessary on most sites. Unless I've already combined all my stylesheets into one file, I certainly wouldn't start combining images. What really matters is perceptible lag to a user, and either technique work just as well for that. I find Adobe's technique kind of neat, and I'll probably use it in some of my future websites.
  - hammerdr 15y ago
    The windowing technique isn't ungainly when its done automatically for you a la SpriteMapper :) http://yostudios.github.com/Spritemapper/ http://yostudios.github.com/Spritemapper/
  - minikomi 15y ago
    Or you could inject them into the Dom so they load, but don't exist anywhere on the page..

godsped 15y ago

To add insult to injury, the layout is broken in chromium on Ubuntu. Whereas the remake you posted is running as expected. http://i.imgur.com/otaOc.png http://i.imgur.com/otaOc.png

dcordeiro 15y ago
Speaking of which, "Adobe Air is not available for your system." :-P
- godsped 15y ago
  True, I have not come to expect anything else, so I run a WIN7 virtual box, no biggie.

doublesprout 15y ago

Dreamweaver required you to know quite a bit about HTML. Muse is like InDesign/Photoshop, which people use to do mockups of designs (not UIs/wireframes) today. It cuts translation to code from the workflow. That's a meaningful shortening of the feedback loop for a designer. As for the rest of us, we don't have to be concerned till Muse starts learning the quirks and features of CSS faster than ourselves.

AlexCP 15y ago

Seriously, you have to learn how to use css sprites...

chadgeidel 15y ago

Thanks for that. I know a little about ancient-style table-layout web dev, but didn't know what the "proper way" of laying out that site would have been.