Toasty

Perhaps you noticed our visually-updated Toast messages across the app?

The are these ephemeral messages that just need to tell you something but not stick around. We display them at the top of the screen, centered. Like these:

We have, I dunno, at least a hundred such messages across the app. This change was a nice little UI updated. I think they look a lot better than the yellow-banner thing we had glued to the top. But like all things web development, the whole story is that we were able to make these messages much more versatile, part of our design pattern library, consistent app-wide, and part of our modern stack. Yay 🎉

They are also notable in that it’s the only design pattern where we used a third-party library: react-hot-toast. I’m not sure it will stay that way forever. Perhaps the abstracted code will present some sort of problem, but for now, were were able to have it do exactly what we need, so using it was something of a time saver.

The post Toasty appeared first on CodePen Blog.

CategoriesUncategorized