{"tag":"timezone","articles":{"blog\/technology\/privacy-friendly-location-field":{"key":"blog\/technology\/privacy-friendly-location-field","type":"article","published":true,"meta":{"createdAt":"2022-12-17T11:53:21+01:00","publishedAt":"2022-12-17T11:53:21+01:00","group":null,"category":"blog","subcategory":"technology","slug":"privacy-friendly-location-field"},"content":{"en":{"slug":"privacy-friendly-location-field","title":"Privacy-friendly location field?","intro":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_small.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022147.25099601594\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAALCAYAAAAX+i97AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABq0lEQVQ4ja2UwXLTUAxFjyTbExvKhmEKKR\/A\/\/8Dn8GmTNmUKQw0xLEtiYX7TNJMp5NQrWy9J+m+qyuJuycnmLsf+UQEETklzWIRQUQs\/1X5uL7+Ste1bDZ\/5qIifLxa0zTNQfBL2+OHSGHo7sdPzAwzY5qmGW1lkOARZCZkkiS73UBVGSJCRKKq830z3B0RoW5qMpOIQEWJCESEyZ26rshIIpPMpF2tMNNDhlQVVeX1q25BmwnlAfvUvrk4bk9pW2buAT28V84y84Add\/\/nKwxNmx1iOgcA0hj76SKT51Ryjo6i78lMsq6BPYamX\/1M4zDRvLvg9u6W8EBVSRJBWK8\/nFzwWUC7YW7FA6CFoe+fv9B8ekvvI2pKU9fshgFVnZkRYRxHBHAPPJz3l5cHrPzPtJW2LQz5dsAqwwjMFBGlXa0W3UzuyEPTVIXI48JFI+dY0Vb12AGJmeE+4R6LMIV56vq+J5O5jWcWfwoQ7GkoI\/HR6Yee3\/f3dG1LZNJvt7RdxzROqCmq82hXZtzcfAOBq\/V6SXwuSyVGntrUGUHkSUt8sbKXTrWI4C+Jjve8K9+BKQAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_small.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 class=\u0022border-bottom\u0022 width=\u0022480\u0022 height=\u0022147.25099601594\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EA user suggested adding a timezone field to \u003Ca href=\u0022https:\/\/pronouns.page\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Pronouns.page\u003C\/a\u003E.\nThis website lets people, among other things, create a card with info about how they want to be referred \u2013\ntheir pronouns, names, etc. But it also has some generic fields, like age or links,\nso the team was onboard with the idea of adding some more basic info: not just timezone,\nbut while we\u0027re at it, why not also a location?\u003C\/p\u003E\n\u003Cp\u003EWell, adding a location is not as easy as it seems\u2026\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","content":"\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022294.50199203187\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAALCAYAAAAX+i97AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABq0lEQVQ4ja2UwXLTUAxFjyTbExvKhmEKKR\/A\/\/8Dn8GmTNmUKQw0xLEtiYX7TNJMp5NQrWy9J+m+qyuJuycnmLsf+UQEETklzWIRQUQs\/1X5uL7+Ste1bDZ\/5qIifLxa0zTNQfBL2+OHSGHo7sdPzAwzY5qmGW1lkOARZCZkkiS73UBVGSJCRKKq830z3B0RoW5qMpOIQEWJCESEyZ26rshIIpPMpF2tMNNDhlQVVeX1q25BmwnlAfvUvrk4bk9pW2buAT28V84y84Add\/\/nKwxNmx1iOgcA0hj76SKT51Ryjo6i78lMsq6BPYamX\/1M4zDRvLvg9u6W8EBVSRJBWK8\/nFzwWUC7YW7FA6CFoe+fv9B8ekvvI2pKU9fshgFVnZkRYRxHBHAPPJz3l5cHrPzPtJW2LQz5dsAqwwjMFBGlXa0W3UzuyEPTVIXI48JFI+dY0Vb12AGJmeE+4R6LMIV56vq+J5O5jWcWfwoQ7GkoI\/HR6Yee3\/f3dG1LZNJvt7RdxzROqCmq82hXZtzcfAOBq\/V6SXwuSyVGntrUGUHkSUt8sbKXTrWI4C+Jjve8K9+BKQAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022294.50199203187\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EA user suggested adding a timezone field to \u003Ca href=\u0022https:\/\/pronouns.page\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Pronouns.page\u003C\/a\u003E.\nThis website lets people, among other things, create a card with info about how they want to be referred \u2013\ntheir pronouns, names, etc. But it also has some generic fields, like age or links,\nso the team was onboard with the idea of adding some more basic info: not just timezone,\nbut while we\u0027re at it, why not also a location?\u003C\/p\u003E\n\u003Cp\u003EWell, adding a location is not as easy as it seems\u2026\u003C\/p\u003E\n\u003Ch3\u003EPrevious experiences\u003C\/h3\u003E\n\u003Cp\u003EFirst thing that comes to mind when I think of adding a location field in a profile\nis my experience running \u003Ca href=\u0022https:\/\/teamlocked.men\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E #TeamLocked\u003C\/a\u003E (NSFW).\nI thought I implemented it in a pretty neat way \u2013 but turns out I still couldn\u0027t avoid issues.\u003C\/p\u003E\n\u003Cp\u003EI wanted the data to be structured, not just a free text field \u2013\nthat way I could add some smaller or bigger features around it:\nfrom displaying a little emoji flag next to a country name,\nto allowing people to search users by country and province.\u003C\/p\u003E\n\u003Cp\u003ESo I split it into three levels: \u003Ccode\u003Ecountry\u003C\/code\u003E, \u003Ccode\u003Eprovince\u003C\/code\u003E (which depending on context can mean a state, a province, a wojew\u00f3dztwo, etc.) and \u003Ccode\u003Ecity\u003C\/code\u003E.\nFirst two being a selection from predefined lists, while the last one a free text input \u2013\ncause I\u0027m not going to manage a database of all cities, municipalities and villages in the world \ud83d\ude05\nBut even for countries and provinces, I didn\u0027t want to manually manage that list either \u2013\nthose things change constantly, and I\u0027d rather focus on actually running the page.\nSo I delegated the issue to the United Nations. I wrote a script that fetches the list of countries from\n\u003Ca href=\u0022https:\/\/unece.org\/trade\/cefact\/unlocode-code-list-country-and-territory\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E here\u003C\/a\u003E\nand the list of provinces from \u003Ca href=\u0022https:\/\/unece.org\/trade\/cefact\/UNLOCODE-Download\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E here\u003C\/a\u003E,\nputs it into a neat JSON file, and then gets used to generate the select fields.\u003C\/p\u003E\n\u003Cp\u003EI thought that would be simple and unproblematic\u2026 until someone messaged me,\nangry that my website calls his country \u201cTaiwan, Province of China\u201d.\nWhich is not something I stand for, but I checked and indeed that\u0027s how UNECE describes the country code \u201cTW\u201d.\nIt\u0027s some kind of a weird compromise between recognising Taiwan\u0027s independence and pleasing China.\nLet\u0027s give it a separate country code while still calling it a part of another country\u2026 Ugh\u2026\u003C\/p\u003E\n\u003Cp\u003EI changed my script to rename that item on the fly, but then more of similar issues kept coming.\nI checked if Kosovo is on a list \u2013 nope, despite having an ISO country code (XK) and an emoji flag (\ud83c\uddfd\ud83c\uddf0),\nit isn\u0027t included on UNECE\u0027s list. So I added it. The list of British provinces didn\u0027t include London for some reason.\nNorth Macedonia\u0027s name didn\u0027t get updated for a while, and Czechia\u0027s still isn\u0027t.\nEven though I had an automated script and was delegating responsibility to an international authority \u2013\nI still ended up needing to put in manual effort into it.\u003C\/p\u003E\n\u003Ch3\u003EOn Pronouns.page it gets even more complicated\u003C\/h3\u003E\n\u003Cp\u003EDespite unexpected issues, it ended up working really well in the end.\nBut simply applying a similar approach (well, probably just reusing the very same script)\nwouldn\u0027t really fit Pronouns.page well.\u003C\/p\u003E\n\u003Cp\u003EFirst of all, unlike #TeamLocked, an adult dating website, Pronouns.page is family friendly,\nand a lot of its users are minors. I want to make sure that I don\u0027t create a feature\nthat could inadvertedly cause harm. What if a 13-year-old queer kid sees a free text input field\ncalled \u201clocation\u201d and without thinking much just puts in their full home address?\u003C\/p\u003E\n\u003Cp\u003EWe\u0027d also like to avoid unnecessary political conflicts. Don\u0027t get me wrong, we\u0027re quite a political team,\nbut our mission is to tell enbies (and queers in general) that they\u0027re amazing, that they deserve respect\nand recognition of their identity, and that they have a right to shape their language to meet their needs;\nnot to get tangled in endless discussions over which government has jurisdiction over which piece of land.\nActually, many of us are anarchists, so we\u0027d rather see those governments fall than start showing their\nflags as a location indicator and validating the notion that artificial political borders are the best way\nto describe where you are \ud83d\ude05\u003C\/p\u003E\n\u003Cp\u003EThen there\u0027s a question of localisation. In the database we\u0027d of course save the country info\nas a simple country code, but when displaying it \u2013 on a page so heavily focused on language and localisation \u2013\nwe\u0027d have to take into account wheter \u201cDE\u201d should get shown as \u201cGermany\u201d, \u201cDeutschland\u201d, \u201cDuitsland\u201d, \u201cNiemcy\u201d, \u2026\nThere\u0027s databases online that we could use for that, but it\u0027s adding another layer of complexity\u2026\u003C\/p\u003E\n\u003Ch3\u003ELatitude, longitude?\u003C\/h3\u003E\n\u003Cp\u003EThere is a way to describe one\u0027s location that\u0027s super simple and (mainly) independent from politics\n\u2013 just use latitude and longitude, right? Other than the prime meridian being an arbitrary choice,\nit literally just describes one\u0027s location on a globe using simple geometry.\u003C\/p\u003E\n\u003Cp\u003EThere is one problem though, at least for our use case: it\u0027s way too accurate.\nWe want to allow users to share some \u003Cem\u003Every basic\u003C\/em\u003E info about themselves,\nto let others know whether they live nearby or across an ocean \u2013 and not to be their GPS \ud83d\ude05\u003C\/p\u003E\n\u003Cp\u003EWhat if we rounded it to the nearest degree, though? Or 5 degrees?\nThat way we\u0027d only know that someone lives within a rectangle of few hundred kilometers by few hundred kilometers,\ngiving us a healthy dose of inaccuracy and therefore privacy.\u003C\/p\u003E\n\u003Cp\u003EWell, I made a little proof of concept of how selecting one\u0027s location would look like,\nand TBH it\u0027s not too nice or intuitive. It\u0027s just a map with some arbitrary rectangle following your mouse,\nit looks confusing when you live near an edge of such a rectangle,\nit would require some fancier projection than Mercator, it wouldn\u0027t be too easy to use on mobile, etc. etc.\u003C\/p\u003E\n\u003Cp\u003EAll of those potential issues can be overcome, of course, but I\u0027d rather settle for something easier,\nif possible.\u003C\/p\u003E\n\u003Ch3\u003ETimezones to the rescue!\u003C\/h3\u003E\n\u003Cp\u003EWell, the answer has been there all along! We were going to implement timezones anyway, right?\nWe can use that for location information. After all, time and space are very closely related!\u003C\/p\u003E\n\u003Cp\u003EThe simplest way to approach storing one\u0027s timezone would be to save the offset, like \u003Ccode\u003EUTC-5\u003C\/code\u003E.\nBut offset \u2260 timezone! My timezone is UTC+1 now, but in March it will switch\nto UTC+2 even if I don\u0027t move anywhere \u2013 thanks DST \ud83d\ude44\nIt\u0027s more accurate to use \u003Ca href=\u0022https:\/\/www.iana.org\/time-zones\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E IANA\u0027s timezones\u003C\/a\u003E,\nin my case \u003Ccode\u003EEurope\/Amsterdam\u003C\/code\u003E \u2013 that way a library can just calculate the proper offset itself.\u003C\/p\u003E\n\u003Cp\u003EBut as you can see, that format already includes some location information!\nWhy don\u0027t we just use it? Here\u0027s how those timezones look on a map:\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/tz-database-map_big.png\u0022 alt=\u0022A map of IANA timezones\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022414.375\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAPCAYAAACMa21tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFS0lEQVRIiY2TXWyT1xnHf+c97\/v6K3b8Ecc2cUKKFxzyMQIV0FKgzdSWcjHEtKjahoQ6bZPQtptJu5l2k6na7b6ktbsp2lWp+qnSlDRdN9iglPKRilWsgTRNwMHJcOLYJHZi+33fswsDUUrV5Xd1dM7\/HP2f5\/wfoZRSrAcFiLtLpXAsB6EJNKmt6\/p60b9qs2LlyS6+i3c4wKu3Uviyi+wJS8b8OvGCwC5YYIOjFK0HW2h7qgUEFHOjOEonEO5E1WqUxq8g\/GFkPE65MEMuex5fQxNGcA\/+Bj8VUcOybSIeD4Yu64YuLt4hem2OP8kMmtfke0MXWT54GqYs4p\/20JatkKMJlbPoPOom5Ovi82OTBLYEMJMeQpvDKOWgKhXyr9ykMPU5ye0jyIYAy9kvuLy3xvj8dXqn2ghVvHz0nyR\/PdsB4jY7D13kuTMnuNYX4Ur793HaO5AvPP\/8IKUVZg2b\/mgrqiA5\/lo351o3E9j+T\/7y1hE2BG02dl1gUpaIbNvGxh1Rkk9uIJJuxGw0eP3sFI25US58kaM8KwgXL5HPLjCyq8i0AZWCjyqz1FZSvCj2oVsS\/Y5FpKtE94H9hCdm2HNH8nBnF7qNTTjdwlFa6v\/13TiLXXmOf3yeVGYO0VUCPcOYJ040dIer1lUOtO26\/71CgK9tml8WX6I\/2kWmtZdA+TnM6X\/h+TRIprSV5FSU4u4RfKe9dNsBZKrIlt2jBJofJqQ5bDz4C4xAI5Zjobuk64EM7ejwc8IpYL1Xxdng4pJM0709RP9jLWhaPdkKqFo2piZwF8f5TaIFW6a4UV1iZG4TkVgjO1eynE+Os+l8J\/OhRUoD1zj6\/if8YcdP6A70EI9P0N48gK7VPeiajq6UAgXKstHMesaDusGv2w5wPJ7iUIOfvT0C3\/UJEAmgHj4BuHTJ23+fobr8Een4B\/zj9zMU0rNkYv0MnXia3r5T\/DxkUkqP41tJMCO3Me+ZIKZJvrE5TWvT3rulrSLujb1Ts9EMef9AAfPlGiOTC2wtXMaX6mYuZ9O3JYmhGwCUShbDFz9Azw4z1NTG8IVH+dV4ln0dNzmX1tjfsY+H+rYzNvoSydTTvLtcJTP6MT\/Yt58pVWK3vw2raqObEqtSRXeZyMHBwcF7YRBCrDoFvIakN+qloTnGOxOnOfXmMuVinkQsgcejYZoaicZWfAtuvN0JfJcX6DMvcfObOiu9Gt\/qPoQmBMKM4nc3U7azBDUPYxmBmV8hGQmAFDg1G6dmgabQlFLYtnO\/cY5tr22hENwow1tnkxysvEfx1A1+d\/gMN05eByAUcrF5\/5MMtPTT6WnFY3xGeNHFD5M\/o2bV6prgBqTHxdZwmtnYLNWxJRpPFJl750PGfvQsY1cmwHTh2KDPV+YIyiBoktv\/LdPQYOD1yTWmusIBNu2MMaTG2fU3H7d2Pku5J7FGI4VGoxnhZPTHeGJJZiovc8R1GBRosv6eW7g50jyAfXiRz66+zDF3nkNPfZuU0c5CNoc7aaKHzDBSkyilaIp6Uc5qyJSqjzXAH3e1M\/TT3Sw0d3LkkRY6W\/0PTGdvMoh7WJB64iHcfh3TMNcK7r61+O9juG5N0rO0jdPh14i4HyeSbMeQGqh1UspMqj9\/51V1+8zwmn3HcZRSjlJKqWrZUblr1Qfu1jWrVIvTqro0r5auFtVvR95QNaemHOWosflPlHBsSwlNPlDtl5k+dQ6RmSc28Ay61\/ha7b3OKuWgHAtNM1Zb\/SXKTg2vZnBraZImT2J17P8f1bJNPr9CPOkDoOZYKEdh6l9vbj04SqHdNfw\/\/2J3PxbskhoAAAAASUVORK5CYII=\u0022 data-src=\u0022https:\/\/avris.it\/image\/tz-database-map_big.png\u0022 alt=\u0022A map of IANA timezones\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022414.375\u0022\u003E\u003C\/span\u003E\n                \u003Cfigcaption\u003E\n                    \u003Ca href=\u0022https:\/\/commons.wikimedia.org\/wiki\/File:2017a.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\n                        \u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E\n                        commons.wikimedia.org\/wiki\/File:2017a.png\n                    \u003C\/a\u003E\n                \u003C\/figcaption\u003E\n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EIt looks exactly like what we need! It splits the Earth into chunks that look less arbitrary and clunky\nthan some purely geometric lat\/long rectangles. Chunks that are big enough not to give away too much of someone\u0027s location,\nbut small enough to give a pretty good understanding of how far away from you someone is.\nSure, in many cases those splits follow country borders, but at least the assocciated labels focus mostly\non cities and geographical names rather than political ones.\u003C\/p\u003E\n\u003Ch2\u003EImplementing the feature\u003C\/h2\u003E\n\u003Cp\u003ESo, let\u0027s get to actually implementing the timezone field! It ended up being way simpler than I imagined.\nHere\u0027s how the form looks:\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022294.50199203187\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAALCAYAAAAX+i97AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABq0lEQVQ4ja2UwXLTUAxFjyTbExvKhmEKKR\/A\/\/8Dn8GmTNmUKQw0xLEtiYX7TNJMp5NQrWy9J+m+qyuJuycnmLsf+UQEETklzWIRQUQs\/1X5uL7+Ste1bDZ\/5qIifLxa0zTNQfBL2+OHSGHo7sdPzAwzY5qmGW1lkOARZCZkkiS73UBVGSJCRKKq830z3B0RoW5qMpOIQEWJCESEyZ26rshIIpPMpF2tMNNDhlQVVeX1q25BmwnlAfvUvrk4bk9pW2buAT28V84y84Add\/\/nKwxNmx1iOgcA0hj76SKT51Ryjo6i78lMsq6BPYamX\/1M4zDRvLvg9u6W8EBVSRJBWK8\/nFzwWUC7YW7FA6CFoe+fv9B8ekvvI2pKU9fshgFVnZkRYRxHBHAPPJz3l5cHrPzPtJW2LQz5dsAqwwjMFBGlXa0W3UzuyEPTVIXI48JFI+dY0Vb12AGJmeE+4R6LMIV56vq+J5O5jWcWfwoQ7GkoI\/HR6Yee3\/f3dG1LZNJvt7RdxzROqCmq82hXZtzcfAOBq\/V6SXwuSyVGntrUGUHkSUt8sbKXTrWI4C+Jjve8K9+BKQAAAABJRU5ErkJggg==\u0022 data-src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022294.50199203187\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003ETurns out we can just use a built-in JavaScript feature to list all the IANA timezone codes:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs javascript border\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Ethis\u003C\/span\u003E.timezones = \u003Cspan class=\u0022hljs-built_in\u0022\u003EIntl\u003C\/span\u003E.supportedValuesOf(\u003Cspan class=\u0022hljs-string\u0022\u003E\u0027timeZone\u0027\u003C\/span\u003E);\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EI\u0027m already using \u003Ca href=\u0022https:\/\/moment.github.io\/luxon\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E Luxon\u003C\/a\u003E in the project,\nso let\u0027s leverage its timezone features to add the \u201cDetect automatically\u201d button:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022hljs javascript border\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Ethis\u003C\/span\u003E.timezone = DateTime.local().zone.name;\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EYup, that\u0027s it. Well, setting aside all the boring stuff,\nlike migrations, server-side handling, autocomplete component, etc. \u2013\nbut the timezone part itself was incredibly easy!\u003C\/p\u003E\n\u003Cp\u003EI also added switches to let users choose whether their continent\/ocean and location field should be explicitly displayed on their card\n(the full timezone code needs to be published by the API anyway, in order to correctly calculate the offset,\nbut we can decide whether to show it in an easily accessible way).\u003C\/p\u003E\n\u003Cp\u003EAnd here\u0027s how it shows up in the profile:\u003C\/p\u003E\n\u003Cfigure\u003E\n                \u003Cnoscript\u003E\n                    \u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-card_big.png\u0022 alt=\u0022Screenshot of @andrea card on pronouns.page. The timezone section says: \u0022It\u0027s 1:36 PM on a Saturday in my timezone (UTC+01:00)\u0022, next line: \u0022Europe \/ Amsterdam\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022562.82958199357\u0022\u003E                \n                \u003C\/noscript\u003E\n                \u003Cspan class=\u0022hide-noscript\u0022\u003E\u003Cimg src=\u0022data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAVCAYAAAAuJkyQAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEC0lEQVRIiZ2WS29bVRDHf+d1H\/b1tZM4TUp4SJRuEF2wAKniG7DjS\/E9kGCNhBBrVrACNoCE1KYJUVtqkrRNm\/s8DxbObW3HdlJmeXVm5j+\/MzPnirZtA4C1Lc550jTl\/5i1FiEEQoi570IIlFJX+ocQcM6hAY4O7\/PTt1\/zfg82737O3u07nJyckqYpzjmUkpgoYpjnKwNKKVcmCiFcErpo3vtpHICHR\/uYsiSXge+++YqiKGnaBuccVVXx8vycoijWBlxHIYSw1rcTDUwJPTj8m8ODfcZ6h5O6wf76hBc\/\/M55pHBli1ASYRT\/1C13vvwCncWXgq4jcJWgjg6AaNs2VGXJHz\/\/yNu5Yvuju6g0vxLxrHXX5ZxbmVxrvVKsc25e0GQyoShL4ijGGE0I0ybX2tA0DUorCDP3LCXOOXq9lPF4\/Er8n799z3u7nxGcR2iFbxwqh5OjX9ja+hTdi6ibBlqPURqkwGz15orQAAGITEQInqqqSHs99nb2rkVnlmSSvovOEoJ1yEhT24ZnZyU2\/gSdxYjEMHlyzM5GjhkkeB8IzoN8HUN3FVssSRxzXhS0Tcvx8TF1XSOlJATo9VJevHhJmiY0TYuUgvF4TBRFF+zh7HnMW9sO11pcbSETqMixjccWNSYxjHfHRB6aZyVBBHSeICM9L2g0HF4kDoxGozkC3fT4EBgMBh0XICz0RSBtnuCrG9OpcZ6X1XMmBwfc+uBj7KMjqr9Kklu3cULgCZhROidGCDHtodPTp7S2RStFWVYEAkmSYFtLCB4hJNpovPcEH\/DekQ0GKKVxzpHEMb1eurRJZ01K+apw7\/2lARBCTAk554iMuaCQ0baWQCCKIozRl6h1wZfZdcZ\/du8s+mmAPB\/gL1RrpUiSCydAL1l4V60EIcTS8e+EzO6dS77dW7Yu+KKAVXRmE6+6tmViZ+NrgEePH5MPBpyePkUbDSGQD4dk\/f6ld8g5x71798myjBCmjW2MpqprtjY3ieP40vn9\/Qfs7e0x+XdCv9dne3u8shgNsDkcESUx1rppMAFqBQVjDKPhkOFoiHMOax1t25D1+0ynb56EtZad3R0CYenjvEhfAzQHzwh5gq4tyW6O7s+\/VR2lzlk+LKieOoSU6DQif2draaLuaorTM0ZxhjqriW8M5s4sJZR\/eHMpjVWCyhuaIliMNty8ubHUpztbFAVFUZLrHvFFsd55cAGpJd46pFYIJV8Luo7NViOFpKgK5Jpp684HIPiALVvseU2bGKRWSARCS4L1ROMM9SaCFtEOBhlxHJFl2Vo\/KSWyaYi8RyUaYRRCCqKNHtqYpT7XFjQ7bfmaP8dFP50kpBs50ThDmtc7bdVf5BvtoWU76Sqr63rp9+4ZWbT\/AHQe\/FJjtHuyAAAAAElFTkSuQmCC\u0022 data-src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-card_big.png\u0022 alt=\u0022Screenshot of @andrea card on pronouns.page. The timezone section says: \u0022It\u0027s 1:36 PM on a Saturday in my timezone (UTC+01:00)\u0022, next line: \u0022Europe \/ Amsterdam\u0022\u0022 class=\u0022border\u0022 width=\u0022960\u0022 height=\u0022562.82958199357\u0022\u003E\u003C\/span\u003E\n                \n            \u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThe clock is of course dynamic. I used Luxon\u0027s built-in localisation to be able to show for example\n\u201c1:35 PM\u201d on the English version while Polish says \u201c13:35\u201d. I also had to remember to include weekday,\nso that it\u0027s clearer if someone is a day ahead or behind you. One nice extra touch is that since\n\u003Ca href=\u0022https:\/\/fontawesome.com\/v5\/search?q=globe\u0026o=r\u0026s=light\u0026f=classic\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csvg class=\u0022icon\u0022\u003E\u003Cuse xlink:href=\u0022#light-link\u0022\u003E\u003C\/use\u003E\u003C\/svg\u003E FontAwesome has multiple \u201cglobe\u201d icons\u003C\/a\u003E,\neach focusing on a different continent, I could even make the icon dynamic \ud83d\ude09\u003C\/p\u003E\n\u003Ch3\u003ESummary\u003C\/h3\u003E\n\u003Cp\u003EDifferent use cases might require different solutions, but if yours is similar to ours\n\u2013 relatively low accuracy by design, hard to abuse, easy to localise, etc. \u2013\nkeep in mind that timezones could be super helpful.\u003C\/p\u003E\n\u003Cp\u003EIANA timezone encodes so much information: if you know it,\nyou know both approximately \u003Cstrong\u003Ewhere someone is\u003C\/strong\u003E and also \u003Cstrong\u003Ewhat time\u003C\/strong\u003E is it there.\nPretty cool, huh?\u003C\/p\u003E\n\u003Ch3\u003EUpdate\u003C\/h3\u003E\n\u003Cp\u003ETurns out there are still problems with the IANA timezones database.\nKind of expectedly, huh? I knew life can\u0027t be too easy,\nthere\u0027s definitely gonna be controversies around city names,\nI\u0027m just excpecting that there would be \u003Cem\u003Efewer\u003C\/em\u003E than with countries.\u003C\/p\u003E\n\u003Cp\u003ESo the first one we found is this:\nfor the capital of Ukraine IANA uses\u2026 the Russian spelling \ud83e\udd26 (\u003Cdel\u003EKiev\u003C\/del\u003E).\nWe\u0027ve replaced it with the more appropriate one: Kyiv.\u003C\/p\u003E\u003Csvg xmlns=\u0022http:\/\/www.w3.org\/2000\/svg\u0022 style=\u0022display: none;\u0022\u003E\u003C\/svg\u003E","tags":["timezone","location","privacy","card","profile","luxon"],"hasMore":true,"image":"https:\/\/avris.it\/image\/zaimki-timezone-editor_small.png","introLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_mini.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 width=\u0022240\u0022 height=\u002273.625498007968\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EA user suggested adding a timezone field to \u003Ca href=\u0022https:\/\/pronouns.page\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Pronouns.page\u003C\/a\u003E.\nThis website lets people, among other things, create a card with info about how they want to be referred \u2013\ntheir pronouns, names, etc. But it also has some generic fields, like age or links,\nso the team was onboard with the idea of adding some more basic info: not just timezone,\nbut while we\u0027re at it, why not also a location?\u003C\/p\u003E\n\u003Cp\u003EWell, adding a location is not as easy as it seems\u2026\u003C\/p\u003E","contentLite":"\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_mini.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 width=\u0022240\u0022 height=\u002273.625498007968\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EA user suggested adding a timezone field to \u003Ca href=\u0022https:\/\/pronouns.page\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Pronouns.page\u003C\/a\u003E.\nThis website lets people, among other things, create a card with info about how they want to be referred \u2013\ntheir pronouns, names, etc. But it also has some generic fields, like age or links,\nso the team was onboard with the idea of adding some more basic info: not just timezone,\nbut while we\u0027re at it, why not also a location?\u003C\/p\u003E\n\u003Cp\u003EWell, adding a location is not as easy as it seems\u2026\u003C\/p\u003E\n\u003Ch3\u003EPrevious experiences\u003C\/h3\u003E\n\u003Cp\u003EFirst thing that comes to mind when I think of adding a location field in a profile\nis my experience running \u003Ca href=\u0022https:\/\/teamlocked.men\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E #TeamLocked\u003C\/a\u003E (NSFW).\nI thought I implemented it in a pretty neat way \u2013 but turns out I still couldn\u0027t avoid issues.\u003C\/p\u003E\n\u003Cp\u003EI wanted the data to be structured, not just a free text field \u2013\nthat way I could add some smaller or bigger features around it:\nfrom displaying a little emoji flag next to a country name,\nto allowing people to search users by country and province.\u003C\/p\u003E\n\u003Cp\u003ESo I split it into three levels: \u003Ccode\u003Ecountry\u003C\/code\u003E, \u003Ccode\u003Eprovince\u003C\/code\u003E (which depending on context can mean a state, a province, a wojew\u00f3dztwo, etc.) and \u003Ccode\u003Ecity\u003C\/code\u003E.\nFirst two being a selection from predefined lists, while the last one a free text input \u2013\ncause I\u0027m not going to manage a database of all cities, municipalities and villages in the world \ud83d\ude05\nBut even for countries and provinces, I didn\u0027t want to manually manage that list either \u2013\nthose things change constantly, and I\u0027d rather focus on actually running the page.\nSo I delegated the issue to the United Nations. I wrote a script that fetches the list of countries from\n\u003Ca href=\u0022https:\/\/unece.org\/trade\/cefact\/unlocode-code-list-country-and-territory\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E here\u003C\/a\u003E\nand the list of provinces from \u003Ca href=\u0022https:\/\/unece.org\/trade\/cefact\/UNLOCODE-Download\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E here\u003C\/a\u003E,\nputs it into a neat JSON file, and then gets used to generate the select fields.\u003C\/p\u003E\n\u003Cp\u003EI thought that would be simple and unproblematic\u2026 until someone messaged me,\nangry that my website calls his country \u201cTaiwan, Province of China\u201d.\nWhich is not something I stand for, but I checked and indeed that\u0027s how UNECE describes the country code \u201cTW\u201d.\nIt\u0027s some kind of a weird compromise between recognising Taiwan\u0027s independence and pleasing China.\nLet\u0027s give it a separate country code while still calling it a part of another country\u2026 Ugh\u2026\u003C\/p\u003E\n\u003Cp\u003EI changed my script to rename that item on the fly, but then more of similar issues kept coming.\nI checked if Kosovo is on a list \u2013 nope, despite having an ISO country code (XK) and an emoji flag (\ud83c\uddfd\ud83c\uddf0),\nit isn\u0027t included on UNECE\u0027s list. So I added it. The list of British provinces didn\u0027t include London for some reason.\nNorth Macedonia\u0027s name didn\u0027t get updated for a while, and Czechia\u0027s still isn\u0027t.\nEven though I had an automated script and was delegating responsibility to an international authority \u2013\nI still ended up needing to put in manual effort into it.\u003C\/p\u003E\n\u003Ch3\u003EOn Pronouns.page it gets even more complicated\u003C\/h3\u003E\n\u003Cp\u003EDespite unexpected issues, it ended up working really well in the end.\nBut simply applying a similar approach (well, probably just reusing the very same script)\nwouldn\u0027t really fit Pronouns.page well.\u003C\/p\u003E\n\u003Cp\u003EFirst of all, unlike #TeamLocked, an adult dating website, Pronouns.page is family friendly,\nand a lot of its users are minors. I want to make sure that I don\u0027t create a feature\nthat could inadvertedly cause harm. What if a 13-year-old queer kid sees a free text input field\ncalled \u201clocation\u201d and without thinking much just puts in their full home address?\u003C\/p\u003E\n\u003Cp\u003EWe\u0027d also like to avoid unnecessary political conflicts. Don\u0027t get me wrong, we\u0027re quite a political team,\nbut our mission is to tell enbies (and queers in general) that they\u0027re amazing, that they deserve respect\nand recognition of their identity, and that they have a right to shape their language to meet their needs;\nnot to get tangled in endless discussions over which government has jurisdiction over which piece of land.\nActually, many of us are anarchists, so we\u0027d rather see those governments fall than start showing their\nflags as a location indicator and validating the notion that artificial political borders are the best way\nto describe where you are \ud83d\ude05\u003C\/p\u003E\n\u003Cp\u003EThen there\u0027s a question of localisation. In the database we\u0027d of course save the country info\nas a simple country code, but when displaying it \u2013 on a page so heavily focused on language and localisation \u2013\nwe\u0027d have to take into account wheter \u201cDE\u201d should get shown as \u201cGermany\u201d, \u201cDeutschland\u201d, \u201cDuitsland\u201d, \u201cNiemcy\u201d, \u2026\nThere\u0027s databases online that we could use for that, but it\u0027s adding another layer of complexity\u2026\u003C\/p\u003E\n\u003Ch3\u003ELatitude, longitude?\u003C\/h3\u003E\n\u003Cp\u003EThere is a way to describe one\u0027s location that\u0027s super simple and (mainly) independent from politics\n\u2013 just use latitude and longitude, right? Other than the prime meridian being an arbitrary choice,\nit literally just describes one\u0027s location on a globe using simple geometry.\u003C\/p\u003E\n\u003Cp\u003EThere is one problem though, at least for our use case: it\u0027s way too accurate.\nWe want to allow users to share some \u003Cem\u003Every basic\u003C\/em\u003E info about themselves,\nto let others know whether they live nearby or across an ocean \u2013 and not to be their GPS \ud83d\ude05\u003C\/p\u003E\n\u003Cp\u003EWhat if we rounded it to the nearest degree, though? Or 5 degrees?\nThat way we\u0027d only know that someone lives within a rectangle of few hundred kilometers by few hundred kilometers,\ngiving us a healthy dose of inaccuracy and therefore privacy.\u003C\/p\u003E\n\u003Cp\u003EWell, I made a little proof of concept of how selecting one\u0027s location would look like,\nand TBH it\u0027s not too nice or intuitive. It\u0027s just a map with some arbitrary rectangle following your mouse,\nit looks confusing when you live near an edge of such a rectangle,\nit would require some fancier projection than Mercator, it wouldn\u0027t be too easy to use on mobile, etc. etc.\u003C\/p\u003E\n\u003Cp\u003EAll of those potential issues can be overcome, of course, but I\u0027d rather settle for something easier,\nif possible.\u003C\/p\u003E\n\u003Ch3\u003ETimezones to the rescue!\u003C\/h3\u003E\n\u003Cp\u003EWell, the answer has been there all along! We were going to implement timezones anyway, right?\nWe can use that for location information. After all, time and space are very closely related!\u003C\/p\u003E\n\u003Cp\u003EThe simplest way to approach storing one\u0027s timezone would be to save the offset, like \u003Ccode\u003EUTC-5\u003C\/code\u003E.\nBut offset \u2260 timezone! My timezone is UTC+1 now, but in March it will switch\nto UTC+2 even if I don\u0027t move anywhere \u2013 thanks DST \ud83d\ude44\nIt\u0027s more accurate to use \u003Ca href=\u0022https:\/\/www.iana.org\/time-zones\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E IANA\u0027s timezones\u003C\/a\u003E,\nin my case \u003Ccode\u003EEurope\/Amsterdam\u003C\/code\u003E \u2013 that way a library can just calculate the proper offset itself.\u003C\/p\u003E\n\u003Cp\u003EBut as you can see, that format already includes some location information!\nWhy don\u0027t we just use it? Here\u0027s how those timezones look on a map:\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/tz-database-map_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/tz-database-map_mini.png\u0022 alt=\u0022A map of IANA timezones\u0022 width=\u0022240\u0022 height=\u0022103.59375\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003Cfigcaption\u003E\n                    \u003Ca href=\u0022https:\/\/commons.wikimedia.org\/wiki\/File:2017a.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Csmall\u003Ecommons.wikimedia.org\/wiki\/File:2017a.png\u003C\/small\u003E\u003C\/a\u003E\n                \u003C\/figcaption\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EIt looks exactly like what we need! It splits the Earth into chunks that look less arbitrary and clunky\nthan some purely geometric lat\/long rectangles. Chunks that are big enough not to give away too much of someone\u0027s location,\nbut small enough to give a pretty good understanding of how far away from you someone is.\nSure, in many cases those splits follow country borders, but at least the assocciated labels focus mostly\non cities and geographical names rather than political ones.\u003C\/p\u003E\n\u003Ch2\u003EImplementing the feature\u003C\/h2\u003E\n\u003Cp\u003ESo, let\u0027s get to actually implementing the timezone field! It ended up being way simpler than I imagined.\nHere\u0027s how the form looks:\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-editor_mini.png\u0022 alt=\u0022Screenshot of the profile editor on pronouns.page, the timezone section. Header: \u0022Timezone\u0022. Description: \u0022If you fill out this field, your card will tell people what time it is where you live. Optionally, you can also chose to publish your approximate location.\u0022. Then a select box with list of timezones along with a button \u0022Detect\u0022. Then two switches: \u0022Publish the continent in your card: Europe\u0022 and \u0022Publish the area in your card: Amsterdam\u0022\u0022 width=\u0022240\u0022 height=\u002273.625498007968\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003ETurns out we can just use a built-in JavaScript feature to list all the IANA timezone codes:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode\u003Ethis.timezones = Intl.supportedValuesOf(\u0027timeZone\u0027);\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EI\u0027m already using \u003Ca href=\u0022https:\/\/moment.github.io\/luxon\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E Luxon\u003C\/a\u003E in the project,\nso let\u0027s leverage its timezone features to add the \u201cDetect automatically\u201d button:\u003C\/p\u003E\n\u003Cpre\u003E\u003Ccode\u003Ethis.timezone = DateTime.local().zone.name;\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cp\u003EYup, that\u0027s it. Well, setting aside all the boring stuff,\nlike migrations, server-side handling, autocomplete component, etc. \u2013\nbut the timezone part itself was incredibly easy!\u003C\/p\u003E\n\u003Cp\u003EI also added switches to let users choose whether their continent\/ocean and location field should be explicitly displayed on their card\n(the full timezone code needs to be published by the API anyway, in order to correctly calculate the offset,\nbut we can decide whether to show it in an easily accessible way).\u003C\/p\u003E\n\u003Cp\u003EAnd here\u0027s how it shows up in the profile:\u003C\/p\u003E\n\u003Cfigure\u003E\u003Ca href=\u0022https:\/\/avris.it\/image\/zaimki-timezone-card_big.png\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E\u003Cimg src=\u0022https:\/\/avris.it\/image\/zaimki-timezone-card_mini.png\u0022 alt=\u0022Screenshot of @andrea card on pronouns.page. The timezone section says: \u0022It\u0027s 1:36 PM on a Saturday in my timezone (UTC+01:00)\u0022, next line: \u0022Europe \/ Amsterdam\u0022\u0022 width=\u0022240\u0022 height=\u0022140.70739549839\u0022 loading=\u0022lazy\u0022\u003E\u003C\/a\u003E\u003C\/figure\u003E\u003C\/p\u003E\n\u003Cp\u003EThe clock is of course dynamic. I used Luxon\u0027s built-in localisation to be able to show for example\n\u201c1:35 PM\u201d on the English version while Polish says \u201c13:35\u201d. I also had to remember to include weekday,\nso that it\u0027s clearer if someone is a day ahead or behind you. One nice extra touch is that since\n\u003Ca href=\u0022https:\/\/fontawesome.com\/v5\/search?q=globe\u0026o=r\u0026s=light\u0026f=classic\u0022 target=\u0022_blank\u0022 rel=\u0022noopener\u0022\u003E FontAwesome has multiple \u201cglobe\u201d icons\u003C\/a\u003E,\neach focusing on a different continent, I could even make the icon dynamic \ud83d\ude09\u003C\/p\u003E\n\u003Ch3\u003ESummary\u003C\/h3\u003E\n\u003Cp\u003EDifferent use cases might require different solutions, but if yours is similar to ours\n\u2013 relatively low accuracy by design, hard to abuse, easy to localise, etc. \u2013\nkeep in mind that timezones could be super helpful.\u003C\/p\u003E\n\u003Cp\u003EIANA timezone encodes so much information: if you know it,\nyou know both approximately \u003Cstrong\u003Ewhere someone is\u003C\/strong\u003E and also \u003Cstrong\u003Ewhat time\u003C\/strong\u003E is it there.\nPretty cool, huh?\u003C\/p\u003E\n\u003Ch3\u003EUpdate\u003C\/h3\u003E\n\u003Cp\u003ETurns out there are still problems with the IANA timezones database.\nKind of expectedly, huh? I knew life can\u0027t be too easy,\nthere\u0027s definitely gonna be controversies around city names,\nI\u0027m just excpecting that there would be \u003Cem\u003Efewer\u003C\/em\u003E than with countries.\u003C\/p\u003E\n\u003Cp\u003ESo the first one we found is this:\nfor the capital of Ukraine IANA uses\u2026 the Russian spelling \ud83e\udd26 (\u003Cdel\u003EKiev\u003C\/del\u003E).\nWe\u0027ve replaced it with the more appropriate one: Kyiv.\u003C\/p\u003E","words":1554,"readTime":7,"lang":"en"}}}}}