12 ms·

I mean god damn stripe has some great front-end engineers.

by khoury 12y ago

solaris999 12y ago
The only thing most of us were thinking, scrolling down that site. I definitely missed some text as my eyes glazed over...
solutionyogi 12y ago
+100. It looks modern yet very readable thanks to great typography. Loads fast. Fully usable on mobile as well. E.g. Gets a hamburger menu on Mobile. The featured client animation is simpler. The spinning globe icon is replaced by a static image. They have absolutely top notch front end engineering talent. This is in huge contrast to the current trend where they want to hijack browser's scrolling behavior for absolutely no gain to the end user.
- platz 12y ago
  Some tradeoffs though; this is what it looks like on IE9 http://i.imgur.com/EkH81zN.png http://i.imgur.com/EkH81zN.png
  - bkrausz 12y ago
    It's working properly in our IE9 VM. Are you getting JS errors? Any other debugging info would be great.
    - platz 12y ago
      IE11 has a feature, Emulation: Document Mode = IE9. No JS errors, so I assume it's a difference of how the "Document Mode = IE9" fails to actually emulate true IE9. Sorry for the false positive.
    - radicalbyte 12y ago
      I recommend you look at image optimization. Loading the /nl flag page from NL takes > 9 seconds. On a connection with 20Mb/s down with one of the best ISPs available. There are 3MB of images on the page; the problem seems to be the high-res map, which weights in at 1.5MB. This image is 2290x798 and it's in an element of 1145x399. I've halved the resolution and converted it to a JPEG, now it's 0.2MB. To make it even easier for you to show the designers I've uploaded it here: http://imgur.com/XcGllGz http://imgur.com/XcGllGz. EDIT: it's worse, almost every image in the carousel is double-sized and unoptimized. Otherwise it's pretty.
      - zsoltgyongyosi 12y ago
        A wild guess, but maybe they target retina displays.
      - ricardobeat 12y ago
        You are talking about the home page, right? Images are double size for retina displays. Your JPEG version is pointless, the flags are placed on top of the background and need an alpha channel. The page is indeed a bit heavy but not enough to impair the experience, first paint is still under 3s. Remember the audience for this page is 90% software developers, with powerful machines and high bandwidth.
        radicalbyte 12y ago
        > flags are placed on top of the background and need an alpha channel Ok, that explains the huge PNGs; can't they be rendered as-is (i.e. include part of the background in the foreground picture? > first paint is still under 3s That's really slow. The jankey animation (yay Apple) and rasterized image rendering is horrible; it's a throwback to the late-90s internet. > the audience for this page is 90% software developers, > with powerful machines and high bandwidth. I.e. me, and I find it horribly slow. I'm using a year old rMBP and I have a pretty good internet connection (20MB/s, 10x what I could get in the UK and I actually get pretty close to the max all the time; for a comparison: http://www.webanalyticsworld.net/2014/08/internet-speed-gap-widens.html http://www.webanalyticsworld.net/2014/08/internet-speed-gap-...). Sure, I'd love fiber, but that's not exactly broadly available (though if I could move my house 1km to the east I'd have it).
  - puranjay 12y ago
    Stripe's product is for developers. I highly doubt there are developers using IE9. It's an audience Stripe can comfortably choose to ignore.
    - true_religion 12y ago
      Whilst that sounds logically. You're replying to someone on HN, who is presumably a developer and detected this bug in IE9.
      - nostalgiac 12y ago
        More than likely that developer checked it in IE9 after seeing the great front-end design, and does not primarily browse the web in IE9 (what sane person would?) Edit: he commented below saying it was IE11 with the IE9 emulation enabled.
    - deleted 12y ago
      [deleted]
- Kalium 12y ago
  I believe the current trend is designed around an Apple-esque disregard for what the user thinks they want.
- threefour 12y ago
  typography...usability...graphics... They do have great design talent :-)
- deleted 12y ago
  [deleted]
saidajigumi 12y ago
I recently implemented a site with a feature similar to the spinning-globe in the International section[1]: a video element overlapped by text in an adjacent element. I ran into a vexing problem in some browsers where the the text that intersected the video appeared somewhat degraded, as if it were a lighter weight than what was actually specified. In Firefox, only the text directly overlapping the video was affected. But in Safari all text in the entire intersecting div showed this effect, even that not over the video. AFAICT, this is some kind of compositor bug, but I haven't been able to dig up any decent information about it. I do note that Stripe's page isn't exhibiting this issue, but don't see anything that appears to be a workaround or otherwise unconventional. Anyone have any color on this? Is this a font-specific rendering issue, e.g. so Stripe's fonts don't exhibit this problem? Or perhaps the presence of a background image on the li tags forces the compositor to behave? TIA! [1] https://stripe.com/connect#international https://stripe.com/connect#international
- sudhirj 12y ago
  Usually happens when the text is above a section of the page that's being hardware accelerated. The browser basically rasterizes the text, which changes the aliasing properties. Either move the text off to a separate sister div, or move the animation to a div with a higher z-index. Or you can set -webkit-font-smoothing: anti-aliased - that will set all of the text to same antialiasing settings as GPU accelerated text.
xasos 12y ago
And back-end as well. Their API is so easy to set up and use.
gdb 12y ago
Always looking for more :-) — gdb@stripe.com.
poxrud 12y ago
It's pretty cool. The entire meteor animation is done on canvas using javascript.
Xorlev 12y ago
It's running at 5 FPS for me on Chrome. 2013 MBP driving 2 non-retina monitors, lid closed. Seems to work a fair bit better on Safari for whatever reason.
ssmoot 12y ago
IMO: It's just awful. 1. Forced waiting for transitions everywhere. For a page I'll probably only ever visit once. You want to ease-in to things. I get it. But you shouldn't hide them. If you want a dithering transition as you scroll, do that. Don't fade-in. There's almost never an excuse for that. 2. What's the point of the "meteor"? To look cool? Is there any point at all to the businesses scrolling in it? Because I don't know how many there are. There's no link to view them all. There's no points to click to go back a pin and re-read one that caught my eye. I don't know. It just feels like people are obsessed with having the coolest Flash splash screens again.
- ProAm 12y ago
  Forced wait is definitely an irritating practice in web today. Not only is is distracting and usually valueless, it's delays what is important: information transfer.
  - apalmer 12y ago
    I am not sure why i need to scroll through 6 screens to see the price instead of just being able to click an icon on the first screen and jump to where i want to jump to. Maybe there is a way that I just couldnt figure out. Why is it folks would never today implement a 6 or 7 step wizard with a bunch of next buttons. but its considered a good idea to do so with scrolling is involved... would also like to see a big down arrow or some kind of standard indicator when a desktop page has this scroll behavoir... i was waiting a the starting screen for quite a while and then clicked on the 4 little icons before i figured out i just had to scroll down forever.
    - nknighthb 12y ago
      There's a pricing link at the top of the page right where it belongs...
pierotofy 12y ago
Looks very good. I just don't like how mesmerizing the meteor animation is. I wasn't even paying attention to the content. Also it could use a navigation bar once you start scrolling?
supercoder 12y ago
* and designers.
hrktb 12y ago
The engineers are good, the designers less so. The whole page is slow to load, solutionyogi must benefit from different optimisations, but on an ipad it seems to get the worse of both worlds. Even after the page is loaded, the sections are mostly blank until the animations kick in. Their features page [1] in comparison has a similar concept but is much clearer, simpler and very fast to load and navigate. [1]https://stripe.com/features https://stripe.com/features
rjvir 12y ago
Whenever I see one of their products, I always think "if it's that good on the outside, imagine how good it is on the inside".
- amelius 12y ago
  I applaud your enthusiasm, but... seriously?
tlogan 12y ago
I was waiting for half an hour thinking that image will change and tell me something more. Then I figured out that I can scroll down. Stupid me. Then it occurred to me that we do the same thing on our home page: we have animation which makes people (stupid like me) wait a little thinking that we will tell them more info - even that info is available only if you scroll down. Stupid me x 2.
Sindrome 12y ago
Took an unusually long time for everything to load and it didn't load from top to bottom, mixed everywhere. But, it is very nice and well formatted. 10/10 would refresh again.

I mean god damn stripe has some great front-end engineers.

by khoury 12y ago

I mean god damn stripe has some great front-end engineers.

The only thing most of us were thinking, scrolling down that site. I definitely missed some text as my eyes glazed over...

solutionyogi 12y ago

+100. It looks modern yet very readable thanks to great typography. Loads fast. Fully usable on mobile as well. E.g. Gets a hamburger menu on Mobile. The featured client animation is simpler. The spinning globe icon is replaced by a static image. They have absolutely top notch front end engineering talent. This is in huge contrast to the current trend where they want to hijack browser's scrolling behavior for absolutely no gain to the end user.

platz 12y ago
Some tradeoffs though; this is what it looks like on IE9 http://i.imgur.com/EkH81zN.png http://i.imgur.com/EkH81zN.png
- bkrausz 12y ago
  It's working properly in our IE9 VM. Are you getting JS errors? Any other debugging info would be great.
  - platz 12y ago
    IE11 has a feature, Emulation: Document Mode = IE9. No JS errors, so I assume it's a difference of how the "Document Mode = IE9" fails to actually emulate true IE9. Sorry for the false positive.
  - radicalbyte 12y ago
    I recommend you look at image optimization. Loading the /nl flag page from NL takes > 9 seconds. On a connection with 20Mb/s down with one of the best ISPs available. There are 3MB of images on the page; the problem seems to be the high-res map, which weights in at 1.5MB. This image is 2290x798 and it's in an element of 1145x399. I've halved the resolution and converted it to a JPEG, now it's 0.2MB. To make it even easier for you to show the designers I've uploaded it here: http://imgur.com/XcGllGz http://imgur.com/XcGllGz. EDIT: it's worse, almost every image in the carousel is double-sized and unoptimized. Otherwise it's pretty.
    - zsoltgyongyosi 12y ago
      A wild guess, but maybe they target retina displays.
    - ricardobeat 12y ago
      You are talking about the home page, right? Images are double size for retina displays. Your JPEG version is pointless, the flags are placed on top of the background and need an alpha channel. The page is indeed a bit heavy but not enough to impair the experience, first paint is still under 3s. Remember the audience for this page is 90% software developers, with powerful machines and high bandwidth.
      - radicalbyte 12y ago
        > flags are placed on top of the background and need an alpha channel Ok, that explains the huge PNGs; can't they be rendered as-is (i.e. include part of the background in the foreground picture? > first paint is still under 3s That's really slow. The jankey animation (yay Apple) and rasterized image rendering is horrible; it's a throwback to the late-90s internet. > the audience for this page is 90% software developers, > with powerful machines and high bandwidth. I.e. me, and I find it horribly slow. I'm using a year old rMBP and I have a pretty good internet connection (20MB/s, 10x what I could get in the UK and I actually get pretty close to the max all the time; for a comparison: http://www.webanalyticsworld.net/2014/08/internet-speed-gap-widens.html http://www.webanalyticsworld.net/2014/08/internet-speed-gap-...). Sure, I'd love fiber, but that's not exactly broadly available (though if I could move my house 1km to the east I'd have it).
- puranjay 12y ago
  Stripe's product is for developers. I highly doubt there are developers using IE9. It's an audience Stripe can comfortably choose to ignore.
  - true_religion 12y ago
    Whilst that sounds logically. You're replying to someone on HN, who is presumably a developer and detected this bug in IE9.
    - nostalgiac 12y ago
      More than likely that developer checked it in IE9 after seeing the great front-end design, and does not primarily browse the web in IE9 (what sane person would?) Edit: he commented below saying it was IE11 with the IE9 emulation enabled.
  - deleted 12y ago
    [deleted]
Kalium 12y ago
I believe the current trend is designed around an Apple-esque disregard for what the user thinks they want.
threefour 12y ago
typography...usability...graphics... They do have great design talent :-)
deleted 12y ago
[deleted]

saidajigumi 12y ago

I recently implemented a site with a feature similar to the spinning-globe in the International section[1]: a video element overlapped by text in an adjacent element. I ran into a vexing problem in some browsers where the the text that intersected the video appeared somewhat degraded, as if it were a lighter weight than what was actually specified. In Firefox, only the text directly overlapping the video was affected. But in Safari all text in the entire intersecting div showed this effect, even that not over the video. AFAICT, this is some kind of compositor bug, but I haven't been able to dig up any decent information about it. I do note that Stripe's page isn't exhibiting this issue, but don't see anything that appears to be a workaround or otherwise unconventional. Anyone have any color on this? Is this a font-specific rendering issue, e.g. so Stripe's fonts don't exhibit this problem? Or perhaps the presence of a background image on the li tags forces the compositor to behave? TIA! [1] https://stripe.com/connect#international https://stripe.com/connect#international

sudhirj 12y ago
Usually happens when the text is above a section of the page that's being hardware accelerated. The browser basically rasterizes the text, which changes the aliasing properties. Either move the text off to a separate sister div, or move the animation to a div with a higher z-index. Or you can set -webkit-font-smoothing: anti-aliased - that will set all of the text to same antialiasing settings as GPU accelerated text.

xasos 12y ago

And back-end as well. Their API is so easy to set up and use.

gdb 12y ago

Always looking for more :-) — gdb@stripe.com.

poxrud 12y ago

It's pretty cool. The entire meteor animation is done on canvas using javascript.

Xorlev 12y ago

It's running at 5 FPS for me on Chrome. 2013 MBP driving 2 non-retina monitors, lid closed. Seems to work a fair bit better on Safari for whatever reason.

ssmoot 12y ago

IMO: It's just awful. 1. Forced waiting for transitions everywhere. For a page I'll probably only ever visit once. You want to ease-in to things. I get it. But you shouldn't hide them. If you want a dithering transition as you scroll, do that. Don't fade-in. There's almost never an excuse for that. 2. What's the point of the "meteor"? To look cool? Is there any point at all to the businesses scrolling in it? Because I don't know how many there are. There's no link to view them all. There's no points to click to go back a pin and re-read one that caught my eye. I don't know. It just feels like people are obsessed with having the coolest Flash splash screens again.

ProAm 12y ago
Forced wait is definitely an irritating practice in web today. Not only is is distracting and usually valueless, it's delays what is important: information transfer.
- apalmer 12y ago
  I am not sure why i need to scroll through 6 screens to see the price instead of just being able to click an icon on the first screen and jump to where i want to jump to. Maybe there is a way that I just couldnt figure out. Why is it folks would never today implement a 6 or 7 step wizard with a bunch of next buttons. but its considered a good idea to do so with scrolling is involved... would also like to see a big down arrow or some kind of standard indicator when a desktop page has this scroll behavoir... i was waiting a the starting screen for quite a while and then clicked on the 4 little icons before i figured out i just had to scroll down forever.
  - nknighthb 12y ago
    There's a pricing link at the top of the page right where it belongs...

pierotofy 12y ago

Looks very good. I just don't like how mesmerizing the meteor animation is. I wasn't even paying attention to the content. Also it could use a navigation bar once you start scrolling?

supercoder 12y ago

* and designers.

hrktb 12y ago

The engineers are good, the designers less so. The whole page is slow to load, solutionyogi must benefit from different optimisations, but on an ipad it seems to get the worse of both worlds. Even after the page is loaded, the sections are mostly blank until the animations kick in. Their features page [1] in comparison has a similar concept but is much clearer, simpler and very fast to load and navigate. [1]https://stripe.com/features https://stripe.com/features

rjvir 12y ago

Whenever I see one of their products, I always think "if it's that good on the outside, imagine how good it is on the inside".

amelius 12y ago
I applaud your enthusiasm, but... seriously?

tlogan 12y ago

I was waiting for half an hour thinking that image will change and tell me something more. Then I figured out that I can scroll down. Stupid me. Then it occurred to me that we do the same thing on our home page: we have animation which makes people (stupid like me) wait a little thinking that we will tell them more info - even that info is available only if you scroll down. Stupid me x 2.

Sindrome 12y ago

Took an unusually long time for everything to load and it didn't load from top to bottom, mixed everywhere. But, it is very nice and well formatted. 10/10 would refresh again.