4 ms·

How I built currency conversion tooltips

65 points by nicbou 4y ago

nailer 4y 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.
- nicbou 4y 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 4y 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.
    - nicbou 4y ago
      The initial design (on paper) let you choose your currency, but I went for something simpler. I like that the tooltips just use :hover styling, and could even work without JavaScript if I set their value on the server side. Something more complex would be a bit more finicky (as are the current glossary tooltips).
gchq-7703 4y 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/incremental-static-regeneration https://nextjs.org/docs/basic-features/data-fetching/increme...
- nicbou 4y 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.
- contingencies 4y 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 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 4y 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 4y ago
Hey, https://allaboutberlin.com/ https://allaboutberlin.com/ is great! Wish I have stumbled upon this earlier :)
lloydatkinson 4y 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-currency-conversion-table/ https://www.lloydatkinson.net/posts/2022/tiny-projects-curre...
- nicbou 4y ago
  I like your website. This design makes reading very pleasant.
  - lloydatkinson 4y 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 4y 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_ 4y ago
> I often have an unreliable internet connection on the U-Bahn, in hotels, in developing countries, and in Brandenburg :D 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 4y 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)"

65 points by nicbou 4y 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.

nicbou 4y 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 4y 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.
  - nicbou 4y ago
    The initial design (on paper) let you choose your currency, but I went for something simpler. I like that the tooltips just use :hover styling, and could even work without JavaScript if I set their value on the server side. Something more complex would be a bit more finicky (as are the current glossary tooltips).

gchq-7703 4y 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/incremental-static-regeneration https://nextjs.org/docs/basic-features/data-fetching/increme...

nicbou 4y 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.
contingencies 4y 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 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 4y 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 4y ago

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

lloydatkinson 4y 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-currency-conversion-table/ https://www.lloydatkinson.net/posts/2022/tiny-projects-curre...

nicbou 4y ago
I like your website. This design makes reading very pleasant.
- lloydatkinson 4y 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 4y 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_ 4y ago

> I often have an unreliable internet connection on the U-Bahn, in hotels, in developing countries, and in Brandenburg :D 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 4y 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)"