Connect: behind the front-end experience
stripe.com
Connect: behind the front-end experience
1–10 of 63 posts
Re: Connect: behind the front-end experience
#2Stripe's design continually makes me envious. I hope to one day own a product that matches their level of quality.
Re: Connect: behind the front-end experience
#3Fucking stupendous. Stripe is continually pushing the envelope. Outstanding work.
Re: Connect: behind the front-end experience
#4Nice. 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.
Re: Connect: behind the front-end experience
#5Nice. 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.
Re: Connect: behind the front-end experience
#6Nice. 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.
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!).
Re: Connect: behind the front-end experience
#7Fascinating 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?
Re: Connect: behind the front-end experience
#8It'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;
}, {});
function getDistance(state, rotate) {
return {
x: Math.abs(state.x + rotate.x),
y: Math.abs(state.y + rotate.y)
};
}
?Re: Connect: behind the front-end experience
#9beautiful stuff
Re: Connect: behind the front-end experience
#10It'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 getDist…
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),
})