Website request: Simple "How To's" page.

[ejnaren]

Is this something you're interested in implementing yourself?

Description

It would be immensely helpful to have a small section of the mithril website show examples of how to do certain common things. Not full application examples or tutorials, but simple cases that could work as a "glossary" of common best practices. Example:

Create elements by looping an array:

Example code

Conditionally include/exclude an element.

Example code

Slots in other frameworks, this is how to do it in Mithril:

Example code

Etc. Etc.

Why

There are a bazillion JavaScript Frameworks. Some are very different from mithril and some are similar. I have tried out me fair share and you always have certain use cases where you need to do X or Y across all the frameworks. Many aspects of mithril are so Intuit that it just works from reading the getting started page. Others are not and you are left figuring it out your self or reading long tutorials on everything else in mithril when all you needed to know was how to do X or Y. In my experience Mithril has the simplicity that many other frameworks lack and coming from React, Riot, Ember, Vue and Svelte it would have been zero threshold entry to mithril if these small examples had just been easy to find on the website.

Possible Implementation

I imagine that a simple page on the website with a collection of these common cases could be perfect. Maybe under the introduction page. Alternatively a few more headlines the introduction page could also solve it.

Or maybe it could just be a "coming from other frameworks" section? Specifically for people who know all about setting up this build tools and everything but want to know the best practices for using Mithril specific csses.

[cavemansspa]

Or maybe it could just be a "coming from other frameworks" section?

there's a nice overview by @pdfernhout coming from a perspective of using several frameworks.

also there are a lot of links at https://github.com/orbitbot/awesome-mithril and https://how-to-mithril.js.org. is that the type of info you're looking for @ejnaren ?

[boazblake]

This also has some of the info you are looking for https://mithril-examples.firebaseapp.com/

[tbreuss]

And not to forget Mithril by Examples, which is perhaps the most comprehensive snippets repo for Mithril.js

[kevinfiol]

@tbreuss I actually think going forward with any site redesign overhaul and perhaps Mithril By Examples can become an official part of the site. It is by far the best resource for idiomatic Mithril solutions.

[tbreuss]

@kevinfiol Thank you 👍

I would hand over the website to the Mithril.js community if there is some interest.

Maintaining Mithril by Examples requires some time, so this could be a classical winwin for both sides 😄

[webketje]

Some ideas of stuff that can use how to/ clarifications. Note some of these are probably demonstrated as part of bigger examples but not specifically highlighted.

• How to implement passthrough attrs (eg a component with 3 custom props, but passes all the other attrs (including event handlers and/ or lifecycle methods to it's root dom node)
• In the 2 examples at https://mithril.js.org/components.html#via-vnodestate it isn't super-obvious that the vnode.state.data will not be updated when the vnode.attrs.text changes in subsequent redraws
• A small docs section showing how dispatching customEvent collapse on a component which has a { oncollapse: handler } will just work
• Using m.route.prefix = '' has a major pitfall for users not aware that the server serving their Mithril solution should have server-side routing that points to /mithril-app for any nested URL's (eg express.use('/mithril-app(/*?)', mithrilRouteHandler), else will result in 404's
• using "child routes" (eg /mail and /mail/:id), but the "child route" renders the child inside a "slot" in the "index" route