News for hackers. Stuff that matters.
Re:Stripe Elements: Pre-built UI components to help you crea... by MatekCopatek on Tuesday October 03, 2017 @05:53PM (#15396544)
Stripe front end developers are a true inspiration. I know the linked project isn't anything revolutionary, but as someone with a decade of experience in the field, it's impressive to see such attention to detail.

Their work somehow manages to be the right combination of cutting-edge flashiness (think Apple product landing pages) and a very down to earth usability. I can't quite put my finger on it, but it's rare to see interfaces that don't compromise one or the other at least slightly.

If any of you are reading this - congratulations, you should be really proud.

Re:Stripe Elements: Pre-built UI components to help you crea... by TeMPOraL on Wednesday October 04, 2017 @03:27AM (#15398849)
Oh God, yes!

I love the attention to small details they're giving here. It's the kind that I absolutely admire but so rarely see. For example, in the section "Less code. Fewer edge cases." - a) the code "image" scrolls in the direction you scroll, and b) the code is actual code, made to look that way through use of a font (Flow-Circular). They could have went with a nonsense PNG with horizontal lines, but instead, they put actual code. They even went as far to leave this in the HTML just above that place:

<!-- This is a trimmed down real Stripe.js v2 basic integration. The full version would be much longer. -->

Hats off to them.

Re:Stripe Elements: Pre-built UI components to help you crea... by Angostura on Wednesday October 04, 2017 @06:24AM (#15399407)
Not to mention the correct use of 'Less' and 'Fewer'. Well done copywriters.
Re:Stripe Elements: Pre-built UI components to help you crea... by pc86 on Wednesday October 04, 2017 @07:39AM (#15399752)
Stripe has some great copy writing for sure, but I don't think correct grammar should be listed as one of the reasons why. :)
Re:Stripe Elements: Pre-built UI components to help you crea... by mstade on Wednesday October 04, 2017 @09:06AM (#15400156)
Wow, that's a pretty cool easter egg! I copied the "image" and pasted into Sublime, and there you go: actual code!

Very cool little detail, color me impressed!

Re:Stripe Elements: Pre-built UI components to help you crea... by khalilravanna on Wednesday October 04, 2017 @10:05AM (#15400521)
Yeah super cool! It's apparently just done by using a font called "Flow-Circular" that comes out looking like that.
Re:Stripe Elements: Pre-built UI components to help you crea... by austenallred on Tuesday October 03, 2017 @09:28PM (#15397634)
Every time I see a Stripe page I just stop and stare for a minute. They're always so, so well done.
Re:Stripe Elements: Pre-built UI components to help you crea... by bpicolo on Wednesday October 04, 2017 @09:29AM (#15400282)
Stripe is gorgeous, though they have one of my pet peeve UI issues on the front page:

The nav Menu buttons are hover elements, and clicking them closes the menu. So if your first instinct is to navigate to "Developers" by clicking it (and it probably is), you're rewarded with a brief view of the menu before it fades back away.

AWS has the same issue on their "My Account" button. ;_;

Re:Stripe Elements: Pre-built UI components to help you crea... by crehn on Wednesday October 04, 2017 @12:30AM (#15398264)
It brings me a lot of joy to see companies like Stripe and Apple put so much effort into polishing their products.

Most companies can't even build their fucking landing pages without inconsistencies in design and content.

I believe a healthy obsession with detail reflects a company's overall attitude and pervades much deeper than visuals.

Thank you Stripe! <3

Re:Stripe Elements: Pre-built UI components to help you crea... by pcurve on Tuesday October 03, 2017 @06:30PM (#15396749)
I agree. It's refreshing to see a company not jumping on the completely flat, mono-color bandwagon.
Re:Stripe Elements: Pre-built UI components to help you crea... by mathattack on Wednesday October 04, 2017 @12:17AM (#15398214)
Sometimes simplicity doesn't seem revolutionary, but a beautiful attention to detail combined with customer empathy can yield dramatic results.
Re:Stripe Elements: Pre-built UI components to help you crea... by jdhzzz on Wednesday October 04, 2017 @06:26AM (#15399418)
The converse of:

“I didn't have time to write a short letter, so I wrote a long one instead.”

― Mark Twain

Re:Stripe Elements: Pre-built UI components to help you crea... by stevoski on Wednesday October 04, 2017 @02:53AM (#15398731)
To add to the praise for Stripe, their API docs are a pleasure to use.
Re:Stripe Elements: Pre-built UI components to help you crea... by speedplane on Wednesday October 04, 2017 @06:28AM (#15399427)
I feel like half of the internet copied Stripe's REST API documentation design. They were the first to make them a pleasure to read, now almost everyone's docs are pretty.
Re:Stripe Elements: Pre-built UI components to help you crea... by sillysaurus3 on Tuesday October 03, 2017 @07:41PM (#15397161)
In the linked page on the right, is that a video? https://i.imgur.com/qloK4xE.png

I was just wondering how they made that.

Re:Stripe Elements: Pre-built UI components to help you crea... by athyuttamre on Tuesday October 03, 2017 @07:58PM (#15397271)
It's all CSS animations!
Re:Stripe Elements: Pre-built UI components to help you crea... by kumaraman on Tuesday October 03, 2017 @09:58PM (#15397748)
I am very curious to how exactly they made these animations! Surely they didn't hand type all of the transforms.

I see a lot more of similar animations appearing on the internet.

Are there tools that people use to help with the animations?

Re:Stripe Elements: Pre-built UI components to help you crea... by afloatboat on Wednesday October 04, 2017 @04:22AM (#15399014)
Most tools put out a lot of unnecessary code and often rely on JavaScript, so my guess would be that this is handwritten. The animation consists of three phases for each element, which they reordered using pixel value transforms. The background containers are fixed in place and the opacity is changed depending on stage 1/2/3. To ensure them not having to adjust any values for smaller devices, they scaled the parent element to fit the browser size. Time consuming, but the best way to get the performance you need.
Re:Stripe Elements: Pre-built UI components to help you crea... by Cenk on Wednesday October 04, 2017 @01:47AM (#15398521)
I’ve used BounceJS in the past: http://bouncejs.com
Re:Stripe Elements: Pre-built UI components to help you crea... by indexerror on Tuesday October 03, 2017 @11:32PM (#15398097)
It can be done using Adobe After Effects and the Bodymovin plugin.
Re:Stripe Elements: Pre-built UI components to help you crea... by squiggy22 on Wednesday October 04, 2017 @01:22AM (#15398438)
..except you will end up with a 300kb js file and a massive Json file. Whilst this plugin generates magic your speed suffers with it.
Re:Stripe Elements: Pre-built UI components to help you crea... by corford on Wednesday October 04, 2017 @10:20AM (#15400605)
http://animista.net/ is quite handy for quickly putting something together.
Re:Stripe Elements: Pre-built UI components to help you crea... by ksec on Wednesday October 04, 2017 @08:51AM (#15400066)
Stripe and Apple. I thought i was the only one noticing these two. Out of all the other Major tech companies. They happens to be the least consumer Web focused and have the best Web page design. ( Stripe isn't really mass consumer facing Web Company, And Apple is more about their Hardware and Software Product rather then Web )

You cant say the same for Yahoo / Oath, Google, Facebook, Amazon or Ebay.

I wish some could share how Apple design and what Apple uses in the Web Stack.

Re:Stripe Elements: Pre-built UI components to help you crea... by colordrops on Wednesday October 04, 2017 @12:54AM (#15398340)
Minor nitpick: there's no way to see the tooltips on the checklist at the bottom on android for more than a second.
Re:Stripe Elements: Pre-built UI components to help you crea... by ghughes on Wednesday October 04, 2017 @01:03AM (#15398368)
And on iOS there’s no way to see them without triggering the copy/paste menu.