If you’ve ever wanted to help build the OpenStreetMap website but found our codebase intimidating, you’re in luck. With the recent addition of Jamie Alessio’s Docker support in pull request #2409, it’s now easier to contribute well-tested changes to the OSM site. I’ve never been comfortable with Rails, Chef, or other Ruby code like the kind we use to build OSM.org. Many helpful changes to the site can be made with small front-end tweaks in just HTML or CSS. The new support for Docker provides a quick way to install a working version of the OSM site on your local computer and preview changes before you contribute.
Here’s a recent change I made to implement Andy Allan’s suggestion for improved inbox/outbox navigation, using Bootstrap navigation tabs in place of plain links. This small design tweak is now live on OSM.org My Messages:

Contrast this with the old look, with simple HTML links in the page header that don’t quite look like usable navigation:

This change took just a few minutes, but I would not have been able to test and contribute without a way to easily run OSM.org locally.
Follow Along
Follow the directions in DOCKER.md to set up a running local version of OSM.org on your computer. It takes about 5-10min to get everything working on my Macbook Pro laptop. When you’re done you can navigate to http://0.0.0.0:3000 to see your local version running (give it about 30 seconds on first load; Rails seems to require some boot time to be ready).
To test features that require a logged-in user, navigate to http://0.0.0.0:3000/user/new and create your account:

The next screen mentions a confirmation email, which you will not receive because you don’t have email configured. Fortunately, there’s a workaround:

The link that would be in the email is also printed to your docker-compose logs -f terminal output. Copy the part starting with “/user” after “openstreetmap.example.com”, add it after “http://0.0.0.0:3000” in your browser, and you’ll have a working user account:

That’s it! When you submit your contribution as a pull request, you can include screen shots showing the results of your work so it’s easier for community members and site maintainers to understand your proposal. A full code test suite will be run automatically as you update Github with your changes, so you’ll know ahead of time if your changes are safe.
Discussion
Comment from benoitdd on 22 March 2021 at 11:25
Looks nice and much more user friendly!
There is probably a bug in the localisation (my settings are in french, I don’t know if it happens for other non-english languages):
Comment from Richard on 22 March 2021 at 13:04
That’s outstanding. 🎉
Comment from mmd on 22 March 2021 at 15:09
French translation will probably be deployed shortly: https://github.com/openstreetmap/openstreetmap-website/commit/1fd5d7f4fece70dfae87ce27644ad31cf972e688#diff-2c5ab6165f7efe573a84107e0e51102ad47cefb0c65629759d7458eee14326e7
Comment from benoitdd on 23 March 2021 at 10:24
@mmd: good news, I didn’t realize it wasn’t translated before and thought it was because of the change @migurski made that something bugged. sorry that I raised a non-existent problem.
Comment from mmd on 23 March 2021 at 10:33
In fact, Michal introduced a few new text labels in English. As always, those labels need to be translated to different languages in a separate step, which happens in an external application “transifex”. This might take a bit, depending on how fast translators complete their work on new text labels. As long as the translated texts are not yet available, you will see the English text instead.
Comment from mmd on 23 March 2021 at 10:35
(translation tool should be translatewiki.net rather than transifex)
Comment from migurski on 23 March 2021 at 15:28
Thanks for the explanation @mmd. I learned from the site maintainers that contributors to the site codebase should touch only the English translation, with Translatewiki contributors picking up the other supported languages:
https://github.com/openstreetmap/openstreetmap-website/pull/2740