How I built currency conversion tooltips

https://nicolasbouliane.com/blog/currency-tooltips

by nicbou • 4 years ago

65 16 4 years ago

nailer• 4 years ago

Instead, I check the user's preferred locales in navigator.languages, and use that to choose which currencies to list.

Old answer: Excellent. That’s how it should be done. So many people seem to ignore things browsers already tell the server.

nicbou4• 4 years ago

While the locale implies a country, it does not imply its currency. Many people set their conputers to en-US without ever living there.

It's a hack in my book, but it's the best hack I could come up with.

masklinn• 4 years ago

While the locale implies a country, it does not imply its currency. Many people set their computers to en-US without ever living there.

And the relation between system and browser language is not always simple. For instance Safari on macOS doesn't (seem to) reflect all the system-configured languages, it just returns the primary (or whatever you configured for safari specifically).

So if you habitually configure your system in en (-US or -GB) then add your "mother culture" as secondary, won't work, you'll get USD or GBP which may mean nothing to your day-to-day.

It's a hack in my book, but it's the best hack I could come up with.

Since it's your own site, why not add a `localStorage` override?

Obviously it requires additional work (a currency picker UI of some sort, and a way to get to it from the tooltip), but it should allow users to fix things up when the defaults are not right for them.

gchq-7703• 4 years ago

I want to cache a guide until it changes, but update the exchange rates every few hours.

We've found that NextJS's Incremental Static Regeneration[0] hits the sweet spot for when we have needed to do this. Specifying a regeneration time allows us to say 'this data can be at most X seconds old' but if thousands of users hit a URL at once only one request is made.

[0] https://nextjs.org/docs/basic-features/data-fetching/increme...

nicbou4• 4 years ago

I think that the page cache is set to 1 day, and dropping it to 12 hours would not strain the server. I'd just save the rates to a file on the server, and create a twig filter that wraps euro amounts with the exchange rate data. I already do this to replace constants (BLUE_CARD_MIN_INCOME) with values from a file.

However server-side generation would mean that exchange rates are cached along with the page by Google and archive.org. An old version of the page would show old exchange rates.

I care a great deal about letting users consume the content even if the website goes down, either through archive.org, Google Cache, CloudFlare, Pocket or their own archives.

contingencies2• 4 years ago

Sorry to be that guy but man cron - periodic execution is an (elegantly) solved problem in the unix world, since 1975. https://en.wikipedia.org/wiki/Cron (And man stat for file age. No DB necessary.)

Particularly today when so many programmers accept re-implementation of systems primitives in higher level languages de jour, there exists a wry truth in the (admittedly somewhat condescending) adage:

Those who don't understand Unix are condemned to reinvent it, poorly. - Henry Spencer

iakov• 4 years ago

This is hilarious. Do you really propose to rebuild front end application every hour, tens to hundreds of pages, just to get the new exchange rate in the app? New tools have new ways to solve things, and this is the case where the new way makes much more sense - it is built in the stack, it scales well, and it solves the problem.

This sounds like an old man with a hammer, reminiscing of times where every single problem was a nail. True, hammer works for the threaded wood screws somewhat, but the new engineers with their electric screwdrivers are more efficient and build sturdier things.

Even if you are hell-bent on doing stuff the Linux way why not propose a pair of Systemd service and timer? At least there will be logs. Cron is such an antiquated way of doing things.

szemy2• 4 years ago

Hey, https://allaboutberlin.com/ is great! Wish I have stumbled upon this earlier :)

lloydatkinson2• 4 years ago

That looks useful. I also built something kind of similar for currencies that I care about as well quite recently.

https://www.lloydatkinson.net/posts/2022/tiny-projects-curre...

nicbou4• 4 years ago

I like your website. This design makes reading very pleasant.

lloydatkinson2• 4 years ago

Thank you! I'm glad to hear that, can't always tell when it's something I'm making compared to someone seeing it for the first time.

MauranKilom• 4 years ago

I often have an unreliable internet connection on the U-Bahn, in hotels, in developing countries, and in Brandenburg.

Ouch, Brandenburg felt that one!

(Brandenburg is a federal state that is "known" for being quite rural and lacking all sorts of infrastructure...)

philw_• 4 years ago

I often have an unreliable internet connection on the U-Bahn, in hotels, in developing countries, and in Brandenburg

It'd be nice to add a `tabindex` value and add a `:focus` part to the tooltip CSS to make it appear for users navigating via their keyboard rather than mouse. If you look up 'accessible tooltips' there might be a few other tips.

netsharc• 4 years ago

Some parts feel over-engineered, do you really need the most current rates, it's not like many currencies fluctuate wildly, unless you want to show crypto values. And people dealing with currencies know between them reading the info and the time they need to pay, the number might be different. Also their bank might have a different rate. So it seems like it's precision when a ~2% imprecision is good enough.

And needing to mouse-over all the numbers would annoy me quickly. Here's the peanut gallery suggestion: just like many sites have a language dropdown, add a dropdown to select the secondary currenc(ies), and all monetary values would then be displayed as e.g. "€175 (£150.05, $182.02)"

How I built currency conversion tooltips

Related Stories