We need *all the shiny*
-
Recently I have been looking around at 3D printers and circuit board mills, because although I am technically an adult male I am like a little kid when it comes to wanting cool toys.
One thing I have noticed about this market segment is that all of their websites have all the shiny. It is just shit stacked on frameworks, stacked on JS, stacked on shit. Super long load times. Just a total rubbish UX.
Then I looked at the Ultimaker. At first it just seems like another website that stacked so much shit together that they have to preload their logo on a white background so that you do not think the website is not responding. Then it just gets so much worse. 20 second load times according to Chrome web tools.
I remember there used to be a standard that you wanted your site to be loaded and responsive within 500ms because that was the threshold for when people started hitting the back button. Now we have what should be simple marketing sites with load times that can be measured with a calendar. If I started loading their site at the same time as I dialed their number, I could probably have someone on the phone before it gets through loading the website.
@Lorne-Kates, we need to track down whomever thought this was a good idea and give them a savage beating.
-
@Polygeekery What would you rather have, a website without a full-screen background video showing the print head moving in a circle?
-
What. The. Fuck. Loading an old-school flash animation via dial-up would be faster.
And there's absolutely nothing on the index page that justifies the loading time. At least not at the top of the page; the rest can be loaded later.
-
Apparently they've also gone for the "video background" thing, which actually seems to be 32 JPGs on a loop.
-
@asdf said in We need *all the shiny*:
What. The. Fuck. Loading an old-school flash animation via dial-up would be faster.
And there's absolutely nothing on the index page that justifies the loading time.
I would love to see what their bounce rate is. 20 seconds!!
-
http://i.imgur.com/ezfy3BZ.png
Great mobile experience, folks!
If you scroll fast enough, you can just barely see the actual website peeking at the bottom, presumably due to the overlay not keeping up with the scroll.
-
@Polygeekery said in We need *all the shiny*:
20 seconds!!
Did you borrow Lorne's computer and then view the website from Ben's house?
-
I guess this is what they call a classy website
<html class="js sizes applicationcache cookies geolocation history json notification postmessage svg websockets cssescape supports target localstorage sessionstorage websqldatabase svgfilters webworkers svgasimg hashchange inputsearchevent pointerevents audio canvas canvastext video webgl adownload bgpositionshorthand csscalc cubicbezierrange cssgradients multiplebgs opacity csspointerevents no-regions cssremunit rgba preserve3d hidden no-capture fileinput fileinputdirectory formattribute placeholder sandbox no-seamless srcset scriptdefer scriptasync inlinesvg textareamaxlength csschunit cssexunit hsla svgclippaths svgforeignobject smil mediaqueries no-hiddenscroll checked displaytable display-table fontface generatedcontent cssinvalid lastchild nthchild cssscrollbar siblinggeneral no-subpixelfont cssvalid cssvhunit cssvmaxunit cssvminunit cssvwunit formvalidation textshadow indexeddb indexeddb-deletedatabase requestanimationframe raf backgroundblendmode objectfit object-fit no-wrapflow cssanimations csspseudoanimations backgroundcliptext bgpositionxy bgrepeatround bgrepeatspace backgroundsize bgsizecover borderimage borderradius boxshadow boxsizing csscolumns csscolumns-width csscolumns-span csscolumns-fill csscolumns-gap csscolumns-rule csscolumns-rulecolor csscolumns-rulestyle csscolumns-rulewidth csscolumns-breakbefore csscolumns-breakafter csscolumns-breakinside ellipsis cssfilters flexbox flexwrap cssmask no-overflowscrolling cssreflections cssresize shapes textalignlast csstransforms csstransforms3d csstransitions csspseudotransitions userselect no-apng desktop landscape no-touchevents">
-
@loopback0 said in We need *all the shiny*:
@Polygeekery said in We need *all the shiny*:
20 seconds!!
Did you borrow Lorne's computer and then view the website from Ben's house?
I think @ben_lubar started looking at this site last year.
Hopefully it'll be done loading within the next few months
-
If you reload it when the browser has cached it, it still takes nearly 4 seconds to load.
-
@loopback0 said in We need *all the shiny*:
Did you borrow Lorne's computer and then view the website from Ben's house?
Time the full page load yourself. After showing the loading screen for about 6 second, it continues loading the rest of the page, which takes more than 20 seconds according to my measurements.
-
@loopback0 said in We need *all the shiny*:
@Polygeekery said in We need *all the shiny*:
20 seconds!!
Did you borrow Lorne's computer and then view the website from Ben's house?
@ben_lubar won't be able to see it until next Thursday. @Lorne-Kates computer just shit capacitors all over his desk.
-
@asdf said in We need *all the shiny*:
Time the full page load yourself.
@loopback0 said in We need *all the shiny*:
Apparently they've also gone for the "video background" thing, which actually seems to be 32 JPGs on a loop.
edit: Seemingly not a hard refresh. 18.8s to load from scratch in Firefox. 24seconds in Chrome. On a brand new laptop with an i7 on a 150mb connection.
-
@Polygeekery said in We need *all the shiny*:
@Lorne-Kates, we need to track down whomever thought this was a good idea and give them a savage beating.
... and plant some dead hookers in their trunk, for good measure.
-
@Polygeekery OMG I TRIED TO SCROLL DOWN, PLEASE MAKE THE PAIN STOP
-
@Polygeekery said in We need *all the shiny*:
@Lorne-Kates computer just shit
capacitorsvacuum tubes and relays all over his desk.
-
@hungrier Modernizr Abuse is all the rage these days in web dev.
-
@Polygeekery said in We need *all the shiny*:
because although I am technically an adult male I am like a little kid when it comes to wanting cool toys.
I think that would describe many of us. Why be forever young when you can be forever immature instead?
-
What kind of internet connection do you have and where do I get it?
@loopback0 said in We need *all the shiny*:
OMG I TRIED TO SCROLL DOWN, PLEASE MAKE THE PAIN STOP
I chuckled when I saw the following message in the console:
Handling of 'mousewheel' input event was delayed for 112 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.
If your mousewheel handler blocks one core of an i7 for that long, you should remove yourself from the gene pool immediately.
-
@Maciejasjmj said in We need *all the shiny*:
@Polygeekery said in We need *all the shiny*:
@Lorne-Kates computer just shit
capacitorsvacuum tubes and relays all over his desk.
-
@Polygeekery said in We need *all the shiny*:
although I am technically an adult male I am like a little kid when it comes to wanting cool toys.
-
@hungrier said in We need *all the shiny*:
I guess this is what they call a classy website
I smell Modernizr…
@lucas1 said in We need *all the shiny*:
@hungrier Modernizr Abuse is all the rage these days in web dev.
It does come in handy sometimes, I find.
-
@asdf said in We need *all the shiny*:
If your mousewheel handler blocks one core of an i7 for that long, you should remove yourself from the gene pool immediately.
As I read it, the mousewheel handler wasn't necessarily the thing doing the blocking; any code that kept the main thread busy would block it. If other code was running, that would prevent the mousewheel handler from starting, which would delay it.
Since the mousewheel handler can cancel the scroll event, the browser had to wait until it executes before it starts to actually scroll the page. Marking the event handler as 'passive' indicates that the mousewheel handler won't cancel the scroll event, and the browser can start scrolling the page right away, before the event handler has finished.
-
I had to manually remove the loading screen node in the DOM Editor thingy to see any content at all.
That might be related to Ghostery (too lazy to find out), but that wouldn't make the situation better IMO.
-
Luddites. It's just designed for the next decade.
-
-
@hungrier said in We need *all the shiny*:
I guess this is what they call a classy website
<html class="js sizes applicationcache cookies geolocation history json notification postmessage svg websockets cssescape supports target localstorage sessionstorage websqldatabase svgfilters webworkers svgasimg hashchange inputsearchevent pointerevents audio canvas canvastext video webgl adownload bgpositionshorthand csscalc cubicbezierrange cssgradients multiplebgs opacity csspointerevents no-regions cssremunit rgba preserve3d hidden no-capture fileinput fileinputdirectory formattribute placeholder sandbox no-seamless srcset scriptdefer scriptasync inlinesvg textareamaxlength csschunit cssexunit hsla svgclippaths svgforeignobject smil mediaqueries no-hiddenscroll checked displaytable display-table fontface generatedcontent cssinvalid lastchild nthchild cssscrollbar siblinggeneral no-subpixelfont cssvalid cssvhunit cssvmaxunit cssvminunit cssvwunit formvalidation textshadow indexeddb indexeddb-deletedatabase requestanimationframe raf backgroundblendmode objectfit object-fit no-wrapflow cssanimations csspseudoanimations backgroundcliptext bgpositionxy bgrepeatround bgrepeatspace backgroundsize bgsizecover borderimage borderradius boxshadow boxsizing csscolumns csscolumns-width csscolumns-span csscolumns-fill csscolumns-gap csscolumns-rule csscolumns-rulecolor csscolumns-rulestyle csscolumns-rulewidth csscolumns-breakbefore csscolumns-breakafter csscolumns-breakinside ellipsis cssfilters flexbox flexwrap cssmask no-overflowscrolling cssreflections cssresize shapes textalignlast csstransforms csstransforms3d csstransitions csspseudotransitions userselect no-apng desktop landscape no-touchevents">
Modernizer
-
@marczellm It is ...
-
Did anyone else find the hidden hamburger-style menu on the right?
At first I thought it was a display glitch that was following the page as I scrolled. When you scroll it highlights different pieces based on where you are. If you mouse over it tries to do the same highlights as it tracks your cursor around the hexagon (poorly in Firefox).
... 'cause you know, you might need to jump down on the page quickly and going to the bottom-left coordinate of the
hamburgerhaxagon is exactly how I would do that!
-
@quijibo said in We need *all the shiny*:
'cause you know, you might need to jump down on the page quickly
You can't do that by scrolling so there might as well be another way.
-
@loopback0 Page Down or End? Works for me.
-
@RaceProUK It was a joke but if we ignore that for a second then page down still scrolls through the first couple of "pages" pretty slowly. It's impressive work to make what should be a simple website perform so fucking terribly.
-
@anonymous234 said in We need *all the shiny*:
Luddites. It's just designed for the next decade.
In a decade or so we may the performance to load that site in under 500ms.
-
@Polygeekery Exactly.
Of course, by then, people will be making 500MB websites for the next next decade.
-
@anonymous234 said in We need *all the shiny*:
@Polygeekery Exactly.
Of course, by then, people will be making 500
MBTB websites for the next next decade.FTFY
-
@loopback0 said in We need *all the shiny*:
@RaceProUK It was a joke but if we ignore that for a second then page down still scrolls through the first couple of "pages" pretty slowly. It's impressive work to make what should be a simple website perform so fucking terribly.
I think you guys need new machines or operating systems or something. Other than the of the initial delay while stuff loads I don't have any scrolling issues.
-
@boomzilla It's really jerky and slow for the first couple of "pages", but only in Chrome. It's fine in Firefox.
-
@loopback0 said in We need *all the shiny*:
@boomzilla It's really jerky and slow for the first couple of "pages", but only in Chrome. It's fine in Firefox.
Not on my chrome.
Hang on, let me check my privilege...yep, still in sudoers.
-
@boomzilla Stop oppressing people whose browsers can't cope.
-
@loopback0 said in We need *all the shiny*:
@boomzilla It's really jerky and slow for the first couple of "pages", but only in Chrome. It's fine in Firefox.
As an FF user, I'd like to say that that sounds like the exact opposite of `modern' web pages throughout the past few years
-
The fun part is, as I'm testing this damned browser again I found it has something it calls "reader mode" which seems to strip all the fancy JS and CSS out and makes it load faster. So, just for fun:
So... other than broken links because someone can't do CSS menus properly... what exactly was lost? Seriously. Even when fully loaded the page is so
full of whitespaceclean that removing most of the shit has almost no effect on it.Now, the design isn't really ugly or anything, I don't hate it, but damn, did wereally need those 20MBs of shit?
-
@Onyx said in We need *all the shiny*:
other than broken links because someone can't do CSS menus properly
Or spaces, based on this snippet:
-
@RaceProUK
ul
s are hard, let'sgo shoppingadd Modernizr!
-
@Polygeekery "I have a fuckton of JavaScript and I'm not afraid to use it!"
I've said this before and I'll say it again: if your website showing static content cannot work without JavaScript, you're .
There is absolutely nothing of substance on that page that would require JavaScript. Want to use JavaScript to spruce the page up? Sure, go for it! But don't load all the fucking content with it.
-
@Deadfast said in We need *all the shiny*:
I've said this before and I'll say it again: if your website showing static content cannot work without JavaScript, you're .
This × Graham's Number.
-
"Please rotate your device"
-
@Deadfast said in We need *all the shiny*:
Want to use JavaScript to spruce the page up? Sure, go for it! But don't load all the fucking content with it.
This is called Progressive Enhancement, and apparently it's too hard for professionals.
-
See, I wanted a 3d printer, too. But I couldn't figure out what the fuck I'd use it for.
So I decided to be a grown-assed adult and bought a CNC mill instead. Because instead of simply making plastic shit, I can make plastic shit, wax shit, metal shit, wood shit, polyurethane shit, etc. etc. etc just by changing tools and whacking a block of the target material into it. And I can use metal and wood.
$400 for an obsolete model, including a PC, selection of wood-grade tools and a $100 box of machinable wax). Another $200 to rebuild it to modern standards (new stepper motors, throw away the control box and ISA card, plug a new controller in. Oddly enough, the controller is designed for 3d printers and that's the only reason it's so cheap, but BOTH TECHNOLOGIES USE THE SAME STANDARD DRIVER LANGUAGE). Later on I'm also going to fit it with a laser for burning/etching.
Subtractive is better than additive unless you go look at laser sintering. And then they're just for two completely different things.
-
THAT THING COSTS HOW MUCH AND THE PRINT HEAD IS POSITIONED BY COGGED RUBBER BELTS!? JESUS FUCK PEOPLE, SCREW DRIVE IS NOT FUCKING HARD.
-
@Weng
Maybe they are of the school that you shouldn't screw around with serious industrial equipment.