cruftlab / tilfeldigeord.no

A new (again) minimal, static website for tilfeldigeord.no, built with Eleventy

Tilfeldige ord

This is the source code behind tilfeldigeord.no. The page is built using Eleventy, with Nunjucks templates.

Attributions

The favicon is the Shuffle icon, by Bootstrap.

Most of the Eleventy stuff is more or less stolen from Max Böck's work, most notably the excellent Emergency Site Kit. So, thanks for that 😄

Also

All the content on the website is in Norwegian, but all the source code is in English. Because why not.

Contributors

Extra very special thanks to these people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

tilfeldigeord.no's Issues

Consider using a CSS framework

It would probably be better to use a CSS framework for styling. This site might be useful to evaluate some of them: https://dohliam.github.io/dropin-minimal-css/

There's also TailwindCSS.

Add functionality to switch words

It should be possible to switch the position of the generated words. For instance, if you get the word "Garnityrtruse", you should be able to change it to "Trusegarnityr", because that's funnier.

Join the 512kB club

An initial scan showed about 15 kB of uncompressed content to load the website, well within the limits to join the 512 kB club

Check that site is valid HTML

This should be done automatically, after building, before publishing.

Add rules for combining words

Currently, all words are combined without any specific rules (just a call to join()). However, this is not correct in Norwegian, and some of the letters should be concatenated in certain cases.

For instance, when combining the words "gebiss" and "skandale", the combined word should not be "gebissskandale" (3 "s"), but "gebisskandale" (2 "s").

Rename 'master' branch to 'main'

Since naming branches 'master' is considered offensive, it should be renamed to 'main'.

Replace logos with SVG

All images could probably be replaced with one SVG, which could be modified to support "dark mode", if it doesn't already (see #44).

Also, the image needs proper attribution. Figure out how to do that 😇

Here it is: https://icons.getbootstrap.com/icons/shuffle/

Validate/lint all files before publishing

This should be done as part of the build, and used as a requirement before merging.

Migrate to GitHub Pages?

Lately, there have been several issues with Netlify, and I think it's time to try out GitHub Pages instead.

Add about page

Would be nice to add a bit of history about the site, how it works, and whatnot.

Get new random word without reloading the page

Right now, you have to reload the page to get a new word. That seems a bit wasteful. It would be better to load the same JS function which runs when the page is ready.

Automatically bump version when merging pull requests

It would be very useful if the version package.json file could be updated automatically, on every pull request. It will need some sort of "classifier", to know whether to bump major, minor or patch version.

Here's an Action that can be used: https://github.com/marketplace/actions/automated-version-bump

Add "serk"

Add web app manifest to allow "A2HS"

It would be nice to allow for "Add to Home Screen" (or "A2HS"), so that you can "install" the site as an app on your phone.

I think what's necessary is to add a Web app manifests file, probably like this?

Fix word sorting

It seems the words are sorted with the wrong locale (kaviar, kål, kefir). It should be possible to specify locale when sorting the words, to make them correct (kaviar, kefir, kål), using Intl.Collator.

This should only be necessary at build time.

Combine only with a certain word

It should be possible to "click" on a given word, and only get combinations which includes that word.

For instance, if presented with the word "fløtespake", you should be able to click on "fløte", and only get combinations containing the word "fløte".

If possible, the selected word should be included in the route (e.g. /ord/fløte)

Split word if too long

If two words are really long, they will overflow on the screen. It would be better if they would dynamically "split" and shown on the line below.

For instance: If the word "blemmegarnityr" is too long for the screen, it should be shown like this:

blemme-
garnityr

Splitting the content should be possible with display: inline-block, but I'm not sure if it's possible to transform the text (add the hyphen) easily.

Add permalink to generated words

Too much left-padding when showing all words

nuff said.

Test for Web Accessibility

It should be relatively simple to make the site compliant in terms of accessibility.

Here be tools: https://a11y.coffee/start-testing/

Add PWA support

After solving #6, it is possible to "install" the site as an app, at least with Android and Firefox.

However, performance is pretty poor, as all pages must be fetched from the server. It would be better if they could all be cached in the client, so everything would work offline.

I think this is done with a service worker, and this seems to also be a requirement to allow "app installation" via Chrome.

Add usage analytics

It would be very useful to add some sort of analytics to the site, to know how much it's used. There's currently nothing.

Ideally, usage should be reported without JavaScript (i.e. using server logs), but I've yet to find a hosting provider that does that (at least for free/cheap). I could of course host it myself, but I'd rather not.

CloudFlare offers Free Website Analytics, and they also have free Pages, which would solve #67.

Add "tilsig"

Add "floskel"

Add støv

Add "støy"

Add "fysak"

Add dongeri

Order of links depend on last edit timestamp

The pages are now ordered based on the timestamp of which it was last edited. They need to show up in the same order every time.

Could consider adding a "order" property in the front matter YAML of each file, and a custom filter.

Consider creating an API

It should be fairly simple to create an API which could be used for, say, a Telegram bot, using the same code base as the main app (see #18). This could be hosted as a Cloudflare Worker for instance.

Probably best to keep things in a monorepo for now, and just perform a split per folder in terms of deployment/build triggers.

Add "dendritt"

Add "digel"

Refactor, put all logic in vanilla JS files

It's a bit untidy to have all the logic in .njk files, and need to run eleventy in order to perform tests. It would be better if all the logic would be put in, say, app.js, and the generated output could be put in, say app.bundle.js (which could contain all the words).

This would also allow for testing with i.e. Jest (by adding a app.test.js file), which doesn't require a bunch words from another file to work.

Check if words are valid before merging

Instead of just accepting every word into the dictionary, they should be looked up and verified before adding them. Not just that the word exists in the Norwegian dictionary, but also that it is a noun and in the correct form (I forget what this is called). I think one of them is m1, but I forgot what that means now 👼

Back in the day, you used to be able to download the whole dictionary as a zip file, which could probably be included here, possibly as a git submodule.

Anyway, it should be possible to verify each word in the list before merging them, and fail if one or more words are "invalid".

Support "dark mode"

It would be nice to allow users to switch themes, at least between "light" and "dark" color schemes.

Here's even a guide on how to make the favicon change colors depending on color scheme: https://css-tricks.com/svg-favicons-in-action/

Upgrade to latest version of 11ty

The app should be upgraded to the current version of 11ty, which is 2.0.1. It seems Dependabot doesn't know how to upgrade 11ty itself, or resolve certain conflicts, so it should be helped along the way.

While doing that, the project should be refactored slightly, to adhere to the latest best practices in 11ty.

Save favorite words?

It could be possible to save your favorite generated words, so you can snicker again later. At some point, however, this was considered a non-goal.

The problem is that being able to save your words would require some sort of backend, which the app currently does not have. That could change, though, if more parts of the app would require a backend, and if enough people would find it useful.

Change word list from JSON to YAML

This would make it easier to edit the word list, and with fewer characters.

Improve SEO

Add stuff like:

• sitemap.xml
• robots.txt

Here are some links to get started:

• Google's Search Engine Optimization (SEO) Starter Guide
• Implementing SEO and Open Graph tags in Eleventy

Add "luffe"

Add soft hyphenation

Some combined words are longer than others, and may be longer than what fits on the screen. Words should have a soft hyphen character between them (­), so that the word automatically breaks where it makes sense.