Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Connect: behind the front-end experience

stripe.com

Post reply on HN
Print view View original

41–50 of 63 posts

Re: Connect: behind the front-end experience

#41

Post by rockostrich »

Silhouette wrote: post #8

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 getDist…

If you were trying to create a generalized getDistance function then the former would be preferred, but for this specific use case the latter outperforms the former by 2 orders of magnitude: https://jsperf.com/reduce-vs-standard/1

Re: Connect: behind the front-end experience

#42

Post by sunnykgupta »

lovincyrus wrote: post #19
nodesocket wrote: post #15

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.

Or perhaps, Stripe has front-end engineers that really know what they're doing.

Stripe has FE engineers who know what they are doing. https://stripe.com/open-source

Re: Connect: behind the front-end experience

#43

Post by sunnykgupta »

anurag wrote: post #16
nodesocket wrote: post #15

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.

...or perhaps Stripes just take pride in their work.

Well deserved pride. It should be customary to showcase a frontend project with brilliant landing pages :)

Re: Connect: behind the front-end experience

#44

Post by pdog »

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/

[2]: https://www.w3.org/TR/css-flexbox-1/

Re: Connect: behind the front-end experience

#45

Post by detaro »

pdog wrote: post #44

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 ca…

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.

Re: Connect: behind the front-end experience

#46

Post by RubenSandwich »

pdog wrote: post #44

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 ca…

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.

These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.

Re: Connect: behind the front-end experience

#47

Post by htormey »

RubenSandwich wrote: post #46
pdog wrote: post #44

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 ca…

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 . These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.

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?

Re: Connect: behind the front-end experience

#48

Post by RubenSandwich »

htormey wrote: post #47
RubenSandwich wrote: post #46

Earlier quoted context omitted.

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 . These come up quite a bit. Look at Pinterest, it is all staggered/made of nonuniform cells.

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?

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....

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-a8....

Re: Connect: behind the front-end experience

#49

Post by pm90 »

nodesocket wrote: post #15

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.

Its definitely well worth it. Presentation is so fucking important outside of the insanely meritocratic programming world... I've seen this play out many many times...

Re: Connect: behind the front-end experience

#50

Post by nojvek »

sunnykgupta wrote: post #43
anurag wrote: post #16

Earlier quoted context omitted.

...or perhaps Stripes just take pride in their work.

Well deserved pride. It should be customary to showcase a frontend project with brilliant landing pages :)

I always imagined they would be called 'Stripers' but now realize why it could go horribly wrong when saying it loud.
Post reply on HN