Hacker Newsnew | past | comments | ask | show | jobs | submit | gfat's commentslogin

https://medium.com/bridge-collection/3d1b0a9b810e Stripe using animations back in 2014.


> None of the examples in the article work with js disabled.

Some because of Codepen.io embeds? The ghost and pricing tables should work on their own.


Codepen is certainly part of it. Lots of boxes with nothing inside but centered text saying things like "See the Pen Spooky Boo! by Will Boyd (@lonekorean) on CodePen."

Nothing on that page animates for me, although I'm sure that's my fault. CSS should work, but I've got a whole lot more than just JS disabled in this browser too. For what it's worth I tried to search the page for the words "ghost" "table" and "price" and couldn't find any mention.


Not sure what sort of person downvoted you. I, too, have an issue with a page about CSS tricks requiring JS.

I may write JS for a living but I do browse the internet without it

Edit: someone downvoted you again as I was writing this, heh. Is this even a healthy thing to do on a Saturday morning


Probably because: "i did something unspecified and now it doesn't work" is kind of an annoying comment. More to the point, nobody promised that the page doesn't use javascript, just that the techniques presented do not need js in principle.


It's just weird to me how often people who have their own websites and are perfectly capable of self-hosting demos of things that don't require javascript make the decision to instead use a website to showcase them that requires JS to work or be visible at all.

I fully understand my configuration is unusual. I don't think it's unusual to expect that a certain number of people who don't use JS would be interested in a site that offers cool CSS tricks that don't require it, so it's strange to see those same people being unnecessarily excluded. To the writer's credit they have some source available in their article at least.


Huge fan of his style and dedication to detail. His early work on those Stripe landing pages, like Checkout, was ahead of the time.

You can see his latest work at https://increase.com, another finance API.


> His early work on those Stripe landing pages, like Checkout, was ahead of the time.

In what way? Is there an example of this?

> You can see his latest work at https://increase.com, another finance API.

Interesting how they achieved the three gradient blocks with the angled corners. And the mockup of the app isn't an image - it's actually done in HTML.


> In what way? Is there an example of this?

https://web.archive.org/web/20160301000015/https://stripe.co...

Most hero sections in mid-2010s did not use CSS and JS animations to this extent. Video playback with an overlay gradient was one technique to animate a hero, but that's not the same level of quality and craft as moving DOM elements. IIRC BDC made these in vanilla (according to some design podcasts).

The Bitcoin page is another example of meticulous design work, remaking Vim in HTML here is crazy.

https://web.archive.org/web/20160301000200/https://stripe.co...

Their open-source page too. They go the extra mile here with JS game of life.

https://web.archive.org/web/20160301000519/https://stripe.co...

Animations are more prevalent today (see pages like https://linear.app), but these Stripe pages were shipped years ago and they still hold up.


Interesting. Worthless for the value proposition but visually interesting, to be honest.


Newbie challenges on frontendmentors are better designed than this.


Very cool idea. Is this an open-source project?


Not currently, if you're interested in contributing definitely don't hesitate to reach out to me. Email in my profile.


May I ask whether your goal is to open source eventually, and you haven't done so yet? Or you intend to keep it closed?

If the former, then how about using Codeamigo to highlight various parts of Codeamigo source? Two birds with one stone.


Lots of requests for open source. Can I ask which parts of open source you’re interested in?


I am a beginner React developer. Currently I learn by working on my own project and reading docs.

It occurred to me that you have a working app, presumably written in React. (Actually Tic Tac Toe lesson is not working for me right now, but that is beside the point).

If some of the Codeamigo code were presented as a lesson, it could serve two purposes. To help me learn React and to see in context a working app where the lesson's code has been implemented. It needn't be all of it, just those points you feel might be most instructive. Presumably you wouldn't do that if you are planning to keep the app closed source. Hence my question.


If you're interested in helping out definitely email me at the email in my profile, and please do let me know what isn't working with regards to the React tic-tac-toe lesson!


Cool, thanks


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: