Flems.io

Today I would like to do some advertising. Do you know

Flems.io ?

Flems.io is a simple, but very smart prototyping platform ideal for testing oder demonstration of HTML/CSS/Javascript or even Typescript. Ok, simple might not be the right wording, it´s just super simple to use. Under the hood, it provides quite a lot:

Flems supports TypeScript, LiveScript and Babel (standalone) compilation too. You can add CSS & JS dependencies by specifying a full URL pointing to the desired file, or by giving a reference to an NPM package (and optional path) - these will be taken from unpkg.com (See the documentation for more info.)

Flems.io is similar to online editors like CodePen or JSFiddle, but has one unique selling point. You do not need an account or any external memory: Flems.io stores all data in the URL!. This is ideal for short tests and demos provided on dev.to or other online media.

Flems-URL´s can get quite long as they store all information + page settings, so you might push the limits using windows desktop links, which are limited to 256 characters. But using Flems-URL´s on online platforms like dev.to is usually not a problem. Unlike other platforms Flems.io does not require any initialization, so it is up and running in no time. It´s best usable for short demos or just for a quick test of some lines of code.

Here is an example, i alredy provided here

EXAMPLE

Happy coding!

Comments

[artydev]

Hy Eckehard,
Yes it's a great tool, written in Mithril

[Eckehard]

Oh, didn´t know this.

Mithril is nice and it has some very interesting features. It just features pretty much the same approach like VanJS. They compose the DOM by composing functions manually, which is very similar to composing the DOM by composing HTML.

I prefer an approach where you can control DOM composition using Javascript. Think of elements that are built differently depending on current conditions like screen width, day time or whatever.

But I should definitively dig a bit deeper into Mithril.

[artydev]

It is my first beloved library :-)
Here is an example I posted 4 years ago :

Hall of Fame

[Eckehard]

Thank you for the example. Currently my time is a limited, but I´ll try to rebuild this page in DML to see, if it is really an advantage to have some kind of view controller. In my oppinion it is not, but I´m always curious to learnnew things.

[artydev]

You are right, sadly time is limited.

Mithril does not impose to return view method in every component .
Look at this very simplified example

const State = () => ({
    mithril: 0,
    apprun: 0,
    hyperapp: 0,
    svelte: 0,
    stencil: 0,
    global: 0
});
const Actions = state => ({
    increment: (lib) => {
        state[lib] += 1;
        state[global] += 1
    },
});

const 
  global = "global"
  , div = "div"
  , h1 = "h1"
  , button = "button"
  , h2 = "h2"

const 
  state = State()
  , actions = Actions(state)
  , report = count => m("div.report", `like(s) : ${count} (${(count && 100 * count/state[global]).toFixed(2)} %)`)
  , incer =  (item) => actions.increment(item)

const Card = (state, actions, item) => {
    return m(div,
        m(h1, item),
        m(button, {onclick: () => incer(item)},  m("span", "Vote \u2192 \ud83d\udc4d")),
        m(div, report(state[item]))
    );
}

const libs = ["mithril", "apprun"]

m.mount(document.body, {
    view: () => m(div, [
        libs.map(lib => Card(state, actions, lib)),
        m(h2, "Number votes : ", state[global])
    ])
})

Demo

[Eckehard]

Is there any reason you used an external function for increment?

onclick: () => incer(item)
// could be
onclick: (item) => actions.increment(item)

It feels more convenient to me to use functions instead of string constants, ending with the same syntax like VanJS or DML (For sure it would be easy to use some kind of "generator" to simplify the creation).

const  button = (...args) => m("button",...args)

Building DOM elements as nested object is a pretty common approach, but it feels a bit limiting to me, as you cannot use advanced programming methods to build your objects. I would tend to create UI-Elements using generator functions or class methods, that implement some common behavior.

[artydev]

No there is abolutely no reason, just a personal choice.

const State = () => ({ count: 0 });

const Actions = state => ({
  increment: () => state.count += 1,
  decrement: () => state.count -= 1
});

const state   = State();
const actions = Actions(state);

const Counter = (state, actions) =>
  m('div',
    m('h1', 'Counter'),
    m('p', state.count),
    m('button', { onclick: actions.increment }, '+'),
    m('button', { onclick: actions.decrement }, '-'),
    Child(state, actions)
  );

const Child = (state, actions) =>
  m('div',
    m('h2', 'Child'),
    m('p', state.count * 2),
    m('button', { onclick: actions.increment }, '+'),
    m('button', { onclick: actions.decrement }, '-'),
  );

  m.mount(document.body, () => {
  return { view: () => Counter(state, actions) };
});

Of course, "generator" are also py preferred choice.

Mithril, is a very nice and mature framework :-)