DEV Community

Cover image for Flems.io
Eckehard
Eckehard

Posted on

Flems.io

#javascript #webdev #prototyping #demo

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!

Top comments (7)

Collapse
 
artydev profile image
artydev •

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

Collapse
 
efpage profile image
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.

Collapse
 
artydev profile image
artydev • • Edited

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

Hall of Fame

Thread Thread
 
efpage profile image
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.

Thread Thread
 
artydev profile image
artydev • • Edited

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])
    ])
})
Enter fullscreen mode Exit fullscreen mode

Demo

Thread Thread
 
efpage profile image
Eckehard • • Edited

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

onclick: () => incer(item)
// could be
onclick: (item) => actions.increment(item)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Thread Thread
 
artydev profile image
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) };
});
Enter fullscreen mode Exit fullscreen mode

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

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

Read next

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -

maulikpaghdal profile image

Optimizing React Apps with useMemo and useCallback: A Complete Guide

Maulik Paghdal -

abhay_yt_52a8e72b213be229 profile image

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat -

apollotoday profile image

Deploying Next.js + Pocketbase to a single Fly.io machine

Nick -