8 ms·

Connect: behind the front-end experience

273 points by hepha1979 9y ago

pg_bot 9y ago
Stripe's design continually makes me envious. I hope to one day own a product that matches their level of quality.
smpetrey 9y ago
Fucking stupendous. Stripe is continually pushing the envelope. Outstanding work.
amelius 9y ago
Nice. But in my experience, front-end design always requires some hacks here and there, e.g. because of compatibility issues or because of design flaws in CSS. So either the Stripe engineers are ridiculously clever, or they are just avoiding the difficult stuff.
- rimliu 9y ago
  http://dowebsitesneedtolookexactlythesameineverybrowser.com http://dowebsitesneedtolookexactlythesameineverybrowser.com
- bshimmin 9y ago
  Their work is really about as good as it gets, so I don't really see how you could conclude they are "avoiding the difficult stuff" - though quite possibly they don't care very much how their pages render in IE 11 (I don't know!).
- dbbk 9y ago
  There is a section in the post about how they handle fallbacks for older browsers.
billdybas 9y ago
Fascinating read! Web Animations are always so cool, but I never know where to start to incorporate them into my own work. What resources help one reach this level of expertise?
Silhouette 9y ago
It's always interesting to see real world applications of new Web functionality, so kudos to the Stripe team for pushing the envelope in an environment where mistakes could surely be expensive. I hadn't realised that CSS Grid Layout was a viable option for production use yet, for example, so TIL. I do wonder whether sometimes the code here is using trendy tools just to be trendy, though. For example, is const getDistance = (state, rotate) => ["x", "y"].reduce((object, axis) => { object[axis] = Math.abs(state[axis] + rotate[axis]); return object; }, {}); really an improvement on grandpa's version function getDistance(state, rotate) { return { x: Math.abs(state.x + rotate.x), y: Math.abs(state.y + rotate.y) }; } ?
- benaiah 9y ago
  Yeah, that's a strange piece of code, particularly since it introduces mutation (object[axis] = ...) and additional processing (reduce loop and inner function construction) that the naive example doesn't. It is slightly more generalizable to additional dimensions, but that seems awfully YAGNI to me. I suppose it prevents repetition of the Math.abs call and addition, but again that seems like massive overkill. I'd write it as follows, similar to yours: const getDistance = (state, rotate) => ({ x: Math.abs(state.x + rotate.x), y: Math.abs(state.y + rotate.y), }) TBH, this thread is pretty nitpicky, but I do agree with your assessment.
  - Silhouette 9y ago
    TBH, this thread is pretty nitpicky, but I do agree with your assessment. Yes and no. On the one hand, the much more interesting parts here are the new APIs they've been using (and also IMHO the intelligent way they're handling compatibility and polyfills). All credit to the Stripe team both for making these tools work and for sharing what they've learned in the process for the benefit of others. On the other hand, I think there is a real cultural problem in the JS community where newer is equated with better, and those defending that position will not infrequently appeal to authority by saying that Facebook or Stripe or Google or whoever does it so it must be a best practice. Grandpa here is getting awfully bored of young whippersnappers telling him code using new ES6 tricks is better (or, just as bad, that there's something wrong with clear, working code that does things in some older way). A gentle challenge to that assumption in a discussion about how these high profile organisations are using the new technologies doesn't seem either impolite or unjustified.
slinger 9y ago
beautiful stuff
RodericDay 9y ago
It's neat and all but I feel like there's something so utterly unnecessary and gratuitous about beautiful bouncy payment web widgets. Makes me sad that CSS programmers make truckloads of money while other workers in the economy rot.
- penagwin 9y ago
  Hehe I don't care about downvotes I just want to do this: 1. CSS isn't a programming language 2. If "workers in the economy rot" while "CSS 'programmers' make truckloads of money" then they aren't in the right industry.
  - icebraining 9y ago
    (2) is exactly what RodericDay is lamenting.
  - allover 9y ago
    (1) CSS is absolutely a programming language, and a difficult one to master at that.
    - kakarot 9y ago
      No, CSS is a presentational / style-sheet language. HTML5 and CSS3 together can provide a Turing-complete environment, but on its own CSS is just absolutely not a programming language. There are no "CSS programmers" and regardless I don't even know of any web developer who gets paid to only write CSS. Just a healthy bit of advice, consider refraining from using absolutes when engaging in discussions where you could possibly be incorrect. It places you in a position where you are unlikely to accept that you are wrong due to personal embarrassment.
      - allover 9y ago
        > No, CSS is a presentational / style-sheet language. That doesn't make it distinct from programming, you've just added more specificity.
lovincyrus 9y ago
Interesting touch for the Accessibility consideration on the site!
nodesocket 9y ago
Their landing pages are just so beautiful, like fine art. I do wonder though the return on investment. The pages must take forever to create. Perhaps Stripe just has that much cash.
- anurag 9y ago
  ...or perhaps Stripes just take pride in their work.
  - sunnykgupta 9y ago
    Well deserved pride. It should be customary to showcase a frontend project with brilliant landing pages :)
    - nojvek 9y ago
      I always imagined they would be called 'Stripers' but now realize why it could go horribly wrong when saying it loud.
- davnn 9y ago
  The landing pages don't look very difficult to implement, but yes, the design is beautiful.
- lovincyrus 9y ago
  Or perhaps, Stripe has front-end engineers that really know what they're doing.
  - sunnykgupta 9y ago
    Stripe has FE engineers who know what they are doing. https://stripe.com/open-source https://stripe.com/open-source
- erbdex 9y ago
  Interesting insights into Stripe's collaboration: https://medium.com/in-progress/design-and-collaboration-at-stripe-304626b59312 https://medium.com/in-progress/design-and-collaboration-at-s...
nagyf 9y ago
Never used stripe before, I haven't even heard much about them before, but their site(and this blog post) is convincing so I was thinking I will try it, but then I bumped into this thread: https://ecommerce.shopify.com/c/payments-shipping-fulfilment/t/worst-experience-with-stripe-payment-gate-how-many-people-using-stripe-151491 https://ecommerce.shopify.com/c/payments-shipping-fulfilment... Well, this isn't so convincing.
- kennydude 9y ago
  Only a few people seem to have issues communicating with them. Weirdly I've not had many issues. Certainly a lot better than some payment providers I've worked with
- Silhouette 9y ago
  That thread is about four years old. Stripe got big very quickly and definitely had some growing pains for a while. Their customer support really was that bad/non-existent for a while. It was a lot of hassle to sort things out when we had a dubious chargeback too. To give credit where it's due, they have improved since. Gone are the days when they were the small developer's payment service and you could expect to reach technical people straight away via their contact addresses, but they do at least seem to reply to messages eventually now. IMHO they still have room for improvement. In particular, 24-48 hours for a first substantial response doesn't seem unusual, and that's far too long for a merchant who might have one of their own customers in limbo or some sort of ongoing dispute or fraud that they need to deal with quickly. But at least Stripe seem to be moving in the right direction and genuinely trying to do better. Our experience of their support is still much better than you'll get from a lot of other payment services if you're only a small merchant.
  - nagyf 9y ago
    Yes, that thread is four years old, but the latest comment is _2_ days old... So they are still having issues apparently.
    - Silhouette 9y ago
svckr 9y ago
Okay, I'm gonna say it: I had to chuckle at the name "Connect", because there is already [0], and _even more so_ with Stripe also naming their user onboarding flow "Express", like [1]. Beautiful work nonetheless. [0] https://github.com/senchalabs/connect https://github.com/senchalabs/connect [1] https://github.com/expressjs/express https://github.com/expressjs/express
pdog 9y ago
How does CSS Grid compare to CSS Flexible Box ("Flexbox") for user interface design? According to W3C: * CSS Grid "defines a two-dimensional grid-based layout system, optimized for user interface design."[1] * Flexbox is "a CSS box model optimized for user interface design."[2] It looks like CSS Grid is optimized for two-dimensional layouts, whereas Flexbox is oriented around a single axis. Are there different use cases? Do they solve the same problem in different ways? [1]: https://www.w3.org/TR/css-grid-1/ https://www.w3.org/TR/css-grid-1/ [2]: https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-flexbox-1/
- detaro 9y ago
  Very simplified, Grid is for defining flexible 2D Grids from various components: you define lines forming a grid, and assign content to grid cells. Flexbox is primarily for layouting things along one axis. It provides some flexibility in the second dimension, and the ability to wrap the axis, but it primarily either organizes a row or a column of things. Grids are also more flexible in where they position things, where Flexbox goes strictly by order and hierarchy in the document.
- RubenSandwich 9y ago
  I'll give an example of something you can't do with a one-dimensional layout system like Flexbox but can do with Grid Layouts: a staggered grid/one made of nonuniform cells: https://i.stack.imgur.com/QI2ol.png https://i.stack.imgur.com/QI2ol.png. These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.
  - htormey 9y ago
    That’s interesting, I didn’t know about that. Didn’t Pinterest migrate its web front end to using react which uses flexbox for its layout system? If so, how did they do this?
    - RubenSandwich 9y ago
      React is just a View layer, you can use whatever layout system you want to use with it. I haven't dug into Pinterest's code but I imagine it's most likely a mix of Flexbox and Multi-column layouts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns.... Edit: See this blog post on how to combine them to achieve the staggered effect: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8....
too_optimistic 9y ago
I love all the effects and they really did them well. I hate that the current trend amongst webdev'ers in that "no added visual effects!" Black text! White background! I think it's because the guys that are hyper focused at the programming side of things don't want to think/care about design stuff because they aren't that good at it.
Horizon_Blue 9y ago
This is what happens when a group of really enthusiastic and bright people come together to collaborate and build something. CSS/JS feels like a one man army against the browser but really great things can be accomplished if you have the right people for it

273 points by hepha1979 9y ago

pg_bot 9y ago

Stripe's design continually makes me envious. I hope to one day own a product that matches their level of quality.

smpetrey 9y ago

Fucking stupendous. Stripe is continually pushing the envelope. Outstanding work.

amelius 9y ago

Nice. But in my experience, front-end design always requires some hacks here and there, e.g. because of compatibility issues or because of design flaws in CSS. So either the Stripe engineers are ridiculously clever, or they are just avoiding the difficult stuff.

rimliu 9y ago
http://dowebsitesneedtolookexactlythesameineverybrowser.com http://dowebsitesneedtolookexactlythesameineverybrowser.com
bshimmin 9y ago
Their work is really about as good as it gets, so I don't really see how you could conclude they are "avoiding the difficult stuff" - though quite possibly they don't care very much how their pages render in IE 11 (I don't know!).
dbbk 9y ago
There is a section in the post about how they handle fallbacks for older browsers.

billdybas 9y ago

Fascinating read! Web Animations are always so cool, but I never know where to start to incorporate them into my own work. What resources help one reach this level of expertise?

Silhouette 9y ago

It's always interesting to see real world applications of new Web functionality, so kudos to the Stripe team for pushing the envelope in an environment where mistakes could surely be expensive. I hadn't realised that CSS Grid Layout was a viable option for production use yet, for example, so TIL. I do wonder whether sometimes the code here is using trendy tools just to be trendy, though. For example, is const getDistance = (state, rotate) => ["x", "y"].reduce((object, axis) => { object[axis] = Math.abs(state[axis] + rotate[axis]); return object; }, {}); really an improvement on grandpa's version function getDistance(state, rotate) { return { x: Math.abs(state.x + rotate.x), y: Math.abs(state.y + rotate.y) }; } ?

benaiah 9y ago
Yeah, that's a strange piece of code, particularly since it introduces mutation (object[axis] = ...) and additional processing (reduce loop and inner function construction) that the naive example doesn't. It is slightly more generalizable to additional dimensions, but that seems awfully YAGNI to me. I suppose it prevents repetition of the Math.abs call and addition, but again that seems like massive overkill. I'd write it as follows, similar to yours: const getDistance = (state, rotate) => ({ x: Math.abs(state.x + rotate.x), y: Math.abs(state.y + rotate.y), }) TBH, this thread is pretty nitpicky, but I do agree with your assessment.
- Silhouette 9y ago
  TBH, this thread is pretty nitpicky, but I do agree with your assessment. Yes and no. On the one hand, the much more interesting parts here are the new APIs they've been using (and also IMHO the intelligent way they're handling compatibility and polyfills). All credit to the Stripe team both for making these tools work and for sharing what they've learned in the process for the benefit of others. On the other hand, I think there is a real cultural problem in the JS community where newer is equated with better, and those defending that position will not infrequently appeal to authority by saying that Facebook or Stripe or Google or whoever does it so it must be a best practice. Grandpa here is getting awfully bored of young whippersnappers telling him code using new ES6 tricks is better (or, just as bad, that there's something wrong with clear, working code that does things in some older way). A gentle challenge to that assumption in a discussion about how these high profile organisations are using the new technologies doesn't seem either impolite or unjustified.

slinger 9y ago

beautiful stuff

RodericDay 9y ago

It's neat and all but I feel like there's something so utterly unnecessary and gratuitous about beautiful bouncy payment web widgets. Makes me sad that CSS programmers make truckloads of money while other workers in the economy rot.

penagwin 9y ago
Hehe I don't care about downvotes I just want to do this: 1. CSS isn't a programming language 2. If "workers in the economy rot" while "CSS 'programmers' make truckloads of money" then they aren't in the right industry.
- icebraining 9y ago
  (2) is exactly what RodericDay is lamenting.
- allover 9y ago
  (1) CSS is absolutely a programming language, and a difficult one to master at that.
  - kakarot 9y ago
    No, CSS is a presentational / style-sheet language. HTML5 and CSS3 together can provide a Turing-complete environment, but on its own CSS is just absolutely not a programming language. There are no "CSS programmers" and regardless I don't even know of any web developer who gets paid to only write CSS. Just a healthy bit of advice, consider refraining from using absolutes when engaging in discussions where you could possibly be incorrect. It places you in a position where you are unlikely to accept that you are wrong due to personal embarrassment.
    - allover 9y ago
      > No, CSS is a presentational / style-sheet language. That doesn't make it distinct from programming, you've just added more specificity.

lovincyrus 9y ago

Interesting touch for the Accessibility consideration on the site!

nodesocket 9y ago

Their landing pages are just so beautiful, like fine art. I do wonder though the return on investment. The pages must take forever to create. Perhaps Stripe just has that much cash.

anurag 9y ago
...or perhaps Stripes just take pride in their work.
- sunnykgupta 9y ago
  Well deserved pride. It should be customary to showcase a frontend project with brilliant landing pages :)
  - nojvek 9y ago
    I always imagined they would be called 'Stripers' but now realize why it could go horribly wrong when saying it loud.
davnn 9y ago
The landing pages don't look very difficult to implement, but yes, the design is beautiful.
lovincyrus 9y ago
Or perhaps, Stripe has front-end engineers that really know what they're doing.
- sunnykgupta 9y ago
  Stripe has FE engineers who know what they are doing. https://stripe.com/open-source https://stripe.com/open-source
erbdex 9y ago
Interesting insights into Stripe's collaboration: https://medium.com/in-progress/design-and-collaboration-at-stripe-304626b59312 https://medium.com/in-progress/design-and-collaboration-at-s...

nagyf 9y ago

Never used stripe before, I haven't even heard much about them before, but their site(and this blog post) is convincing so I was thinking I will try it, but then I bumped into this thread: https://ecommerce.shopify.com/c/payments-shipping-fulfilment/t/worst-experience-with-stripe-payment-gate-how-many-people-using-stripe-151491 https://ecommerce.shopify.com/c/payments-shipping-fulfilment... Well, this isn't so convincing.

kennydude 9y ago
Only a few people seem to have issues communicating with them. Weirdly I've not had many issues. Certainly a lot better than some payment providers I've worked with
Silhouette 9y ago
That thread is about four years old. Stripe got big very quickly and definitely had some growing pains for a while. Their customer support really was that bad/non-existent for a while. It was a lot of hassle to sort things out when we had a dubious chargeback too. To give credit where it's due, they have improved since. Gone are the days when they were the small developer's payment service and you could expect to reach technical people straight away via their contact addresses, but they do at least seem to reply to messages eventually now. IMHO they still have room for improvement. In particular, 24-48 hours for a first substantial response doesn't seem unusual, and that's far too long for a merchant who might have one of their own customers in limbo or some sort of ongoing dispute or fraud that they need to deal with quickly. But at least Stripe seem to be moving in the right direction and genuinely trying to do better. Our experience of their support is still much better than you'll get from a lot of other payment services if you're only a small merchant.
- nagyf 9y ago
  Yes, that thread is four years old, but the latest comment is _2_ days old... So they are still having issues apparently.
  - Silhouette 9y ago

svckr 9y ago

Okay, I'm gonna say it: I had to chuckle at the name "Connect", because there is already [0], and _even more so_ with Stripe also naming their user onboarding flow "Express", like [1]. Beautiful work nonetheless. [0] https://github.com/senchalabs/connect https://github.com/senchalabs/connect [1] https://github.com/expressjs/express https://github.com/expressjs/express

pdog 9y ago

How does CSS Grid compare to CSS Flexible Box ("Flexbox") for user interface design? According to W3C: * CSS Grid "defines a two-dimensional grid-based layout system, optimized for user interface design."[1] * Flexbox is "a CSS box model optimized for user interface design."[2] It looks like CSS Grid is optimized for two-dimensional layouts, whereas Flexbox is oriented around a single axis. Are there different use cases? Do they solve the same problem in different ways? [1]: https://www.w3.org/TR/css-grid-1/ https://www.w3.org/TR/css-grid-1/ [2]: https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-flexbox-1/

detaro 9y ago
Very simplified, Grid is for defining flexible 2D Grids from various components: you define lines forming a grid, and assign content to grid cells. Flexbox is primarily for layouting things along one axis. It provides some flexibility in the second dimension, and the ability to wrap the axis, but it primarily either organizes a row or a column of things. Grids are also more flexible in where they position things, where Flexbox goes strictly by order and hierarchy in the document.
RubenSandwich 9y ago
I'll give an example of something you can't do with a one-dimensional layout system like Flexbox but can do with Grid Layouts: a staggered grid/one made of nonuniform cells: https://i.stack.imgur.com/QI2ol.png https://i.stack.imgur.com/QI2ol.png. These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.
- htormey 9y ago
  That’s interesting, I didn’t know about that. Didn’t Pinterest migrate its web front end to using react which uses flexbox for its layout system? If so, how did they do this?
  - RubenSandwich 9y ago
    React is just a View layer, you can use whatever layout system you want to use with it. I haven't dug into Pinterest's code but I imagine it's most likely a mix of Flexbox and Multi-column layouts: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns.... Edit: See this blog post on how to combine them to achieve the staggered effect: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8....

too_optimistic 9y ago

I love all the effects and they really did them well. I hate that the current trend amongst webdev'ers in that "no added visual effects!" Black text! White background! I think it's because the guys that are hyper focused at the programming side of things don't want to think/care about design stuff because they aren't that good at it.

Horizon_Blue 9y ago

This is what happens when a group of really enthusiastic and bright people come together to collaborate and build something. CSS/JS feels like a one man army against the browser but really great things can be accomplished if you have the right people for it