These are chat archives for mithriljs/mithril.js

26th
Jan 2018
cavemansspa
@cavemansspa
Jan 26 00:03
thanks for help @gilbert -- was going for something like this.
Gilbert
@gilbert
Jan 26 00:07
my pleasure
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 05:59
do you guys have state in your components? I'm considering putting all the UI state in its own object, and just passing bits of data as parameters to view functions
Scotty Simpson
@CreaturesInUnitards
Jan 26 08:36
Let the record show that Gitter is absolute crap.
Arthur Clemens
@ArthurClemens
Jan 26 08:55
@LewisAndrewCampbell if it is state that is only useful for that component, for instance isVisible, I keep that in the component
Oscar
@osban
Jan 26 12:49
@foxdonut On the Meiosis Github page, the link to the examples http://meiosis.js.org/examples.index.html is incorrect, I think it should be http://meiosis.js.org/examples.html?
Fred Daoud
@foxdonut
Jan 26 12:57
@osban You are correct, thanks for spotting that! Should be fixed now.
@LewisAndrewCampbell you might like to try Meiosis to handle state. It's a pattern that promotes what you described, having state in a separate object, and passing subsections of it to view functions.
Oscar
@osban
Jan 26 13:01
:+1:
Samuel Elgozi
@samuelgozi
Jan 26 14:29
Hi everyone, i wanted to know if there is a Vuex(Flux) like state management tool for mithril. I was under the impression that it was built-in since the docs compare the size of mithril to vue and react with the state management tool included.
Kevin Fiol
@kevinfiol
Jan 26 14:43
Mithril site says "<8kb gzipped" but the Github README says "8.59 KB gzipped"
Isiah Meadows
@isiahmeadows
Jan 26 15:06
@kevinfiol That needs updated, then...
@samuelgozi There really isn't any built-in state management beyond an optional streams module, but there's numerous patterns out there (I use POJOs, @foxdonut came up with Meiosis, some users have used Flux/Redux, etc.).
We're more concerned over "does it work" rather than "is it pretty". So that's one thing that we try to stay out of. (Mithril aims to get out of your way of actually doing things. If you're actually having to think hard about the framework's opinions while solving a problem, you probably shouldn't be using that framework for that problem.)
spacejack
@spacejack
Jan 26 15:39
@samuelgozi Mithril's redraw system (triggered by events rather than state changes) might make an 'official' state management solution less necessary.
spacejack
@spacejack
Jan 26 19:39
Just came across this small state container lib: https://github.com/developit/unistore
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:13
Question for the community re: the brand-new Alpha release of mithril-timepicker: https://tinyurl.com/ybpghok6
Isiah Meadows
@isiahmeadows
Jan 26 20:14
@spacejack I feel it could be even smaller and simpler. (And IMHO this is an ill-advised use of higher order components.)
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:14
...once you've chosen an hour, should clicking the am/pm switch automatically adjust your hour choice by 12?
I'm thinking yes, but thought I'd try for a sanity check with y'all
Isiah Meadows
@isiahmeadows
Jan 26 20:15
I'd agree @CreaturesInUnitards
It really makes little sense to not retain it. I will point out I find the transition between day/night a little unnecessarily jarring.
If you changed it to, say, fading or something (or even removing the whole thing altogether), it'd probably be a bit less jarring.
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:17
@isiahmeadows thanks! That's the first I've heard of the animation being displeasing. Hmm.
Isiah Meadows
@isiahmeadows
Jan 26 20:18
I think it's neat, just not the most ideal.
(At least for something that's just togglable.)
It was unexpected and didn't fit with my sense of how toggling a binary option should be.
Also, I'd probably go morning/evening or something to that effect for the 24-hour one, rather than numbers. That way, it's a little clearer what you mean (you don't need to do math to figure out what it's talking about).
One other thing: I'm not sure how AM/PM should be light/dark, since noon is approximately midday.
Arthur Clemens
@ArthurClemens
Jan 26 20:22
@CreaturesInUnitards Some other people have thought about such an interface too. Have you seen a Material Design time picker? Demo: http://www.material-ui.com/#/components/time-picker
I find it quite intuitive
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:25
@isiahmeadows this is all great, thanks for taking the time
Isiah Meadows
@isiahmeadows
Jan 26 20:25
:+1:
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:25
didn't fit with my sense of how toggling a binary option should be
what would be your thought?
@ArthurClemens yes of course! In fact I think it was you who initially showed me :)
spacejack
@spacejack
Jan 26 20:26
My thinking was it doesn't go dark after 12pm :)
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:27
@spacejack :stuck_out_tongue:
Arthur Clemens
@ArthurClemens
Jan 26 20:27
huh, did I? Sorry to be in repeat mode.
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:27
@ArthurClemens nonono - it was like a year ago :)
Arthur Clemens
@ArthurClemens
Jan 26 20:27
I don’t remember seeing it in action then.
of which I had some doubts
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:28
possible it was someone else... I know I was looking at the material stuff and Polythene at the same time when I was trying to get the datepicker out the door
spacejack
@spacejack
Jan 26 20:28
Yeah the radial picker is how android's clock works. I really like it.
Not sure about with mouse though
Arthur Clemens
@ArthurClemens
Jan 26 20:29
Would like to add it to Polythene at some point
With mouse it is just pointy-click if you want. Dragging is possible but not required.
spacejack
@spacejack
Jan 26 20:30
I think for mouse/keyboard I'd almost prefer some variant of <input type="number"
Arthur Clemens
@ArthurClemens
Jan 26 20:31
Most time inputs don’t need to be very precise. A 5 min interval is mostly fine.
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:31
In any case, I'm just making something tiny and mithrilly to stylistically match the datepicker. I'm certainly not trying to please every Canadian who thinks the sun doesn't go down at noon :)
Arthur Clemens
@ArthurClemens
Jan 26 20:31
For setting appointments, choosing departing times.
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:34
^ Yes. that's the scenario. In that context the pseudo-analogue dial interface is, to me, too much. I think the grids are simple and predictable.
...but the am/pm animation being "jarring" is a concern for sure
Arthur Clemens
@ArthurClemens
Jan 26 20:36
To me the grid does not have the right “affordance” - when confronted with it, it doesn’t look like a time. I did not have that with the date picker, which looks like a calendar.
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:36
@ArthurClemens ah, I see that.
that's a great point
spacejack
@spacejack
Jan 26 20:37
<input type="number"> lets you click and set increments.
Or type if you prefer
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:38
@spacejack how's the browser support?
Arthur Clemens
@ArthurClemens
Jan 26 20:38
Another direction is the time picker for transit in Google Maps (web version) which is a simple scrollable menu with 30 minute intervals.
And it fits quite naturally next to the date picker
spacejack
@spacejack
Jan 26 20:39
Not sure... not sure if it's stylable either.
Patrik Johnson
@orbitbot
Jan 26 20:41
I think the new google calendar did time picking quite reasonably
though they can get by with half hour precision
Arthur Clemens
@ArthurClemens
Jan 26 20:42
yeah, that is similar to the maps interface
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:42
the 30-minute precision thing isn't an option
spacejack
@spacejack
Jan 26 20:43
Ideally you'd have increment size as an option
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:43

the sweet spot, according to all of the focus groups I've conducted*, is 5-minutes

* fictitiously

spacejack
@spacejack
Jan 26 20:45
@isiahmeadows my mithril app state these days usually looks something like:
// state.ts

export const count = stream(0)

export function increment() {
    count(count() + 1)
}

// and then maybe stuff like:
export const count2x = count.map(c => c * 2)
I should make a readonly stream interface though...
Maybe subtraction types would make that easy
Isiah Meadows
@isiahmeadows
Jan 26 20:45
@CreaturesInUnitards My sense of binary toggling doesn't involve a lot of movement beyond the switch. Also, the way you did the light/dark probably rattled me more than even the movement, so that was probably the bigger issue.
Scotty Simpson
@CreaturesInUnitards
Jan 26 20:46
@isiahmeadows ah, gotcha. Thanks!
Isiah Meadows
@isiahmeadows
Jan 26 20:49
@spacejack I typically do similar, except 1. I use classes instead of globals (easier to test in isolation), and 2. I don't bother with the stream boilerplate, since I get about 90% of that from just applying a function to the model data directly.
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 20:50
@foxdonut that looks pretty cool, but it looks like it involves another library. I'll keep it in mind though
Oscar
@osban
Jan 26 20:53
@CreaturesInUnitards Looks good! Personally I think two clicks should be enough to choose a time, so not having to click between am/pm or 00-11/12-23. Also I'd like a choice in minute intervals (like 00-15-30-45), which of course means a different layout...
Isiah Meadows
@isiahmeadows
Jan 26 20:55
@LewisAndrewCampbell It's actually more of a design pattern than a library. All you need is a stream library (which Mithril has), and that's all you really need for it. I've never used it, but it does seem compelling.
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 20:56
@isiahmeadows right, by another library, I meant mithril stream.
Isiah Meadows
@isiahmeadows
Jan 26 20:56
Yeah, but when you npm install mithril, it comes with it.
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 20:56
I still haven't completely figured out mithril (I'm not great at front end web stuff)
Isiah Meadows
@isiahmeadows
Jan 26 20:57
You're not actually adding a dependency, just loading an extra script.
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 20:57
I don't use the node module in the browser, just the script file
and the docs looked like another script was downloaded
look it may be great, but I need be comfortable with core mithril first
Isiah Meadows
@isiahmeadows
Jan 26 20:57
Although it documents loading via require, but it's also available via m.stream.
But if you're just starting out, just stick with the core API first, then branch out.
spacejack
@spacejack
Jan 26 20:58
@LewisAndrewCampbell for now if I were you I'd just put your global app state in a separate script file.
Isiah Meadows
@isiahmeadows
Jan 26 20:58
:arrow_up:
spacejack
@spacejack
Jan 26 20:59
var AppState = {
    foo: 0,
    bar: 'abc',
    etc...
}
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 20:59
@spacejack yes, that's pretty much what I've done
Isiah Meadows
@isiahmeadows
Jan 26 20:59
Don't worry about state management until you understand Mithril. (Also, you'll need to understand JS pretty well first.)
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 20:59
just want to keep my components fairly dumb for now
Isiah Meadows
@isiahmeadows
Jan 26 20:59
Whatever hack works will work. You only really need to care when your app gets larger.
spacejack
@spacejack
Jan 26 20:59
Yeah so mithril's auto-redraw makes it easy - your views will usually update automatically unlike React, Vue, etc.
Scotty Simpson
@CreaturesInUnitards
Jan 26 21:00
@osban you have an example UI?
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 21:00
@spacejack views are supposed to update when you modify data they depend on? hmm, that's actually the issue I'm having right now
spacejack
@spacejack
Jan 26 21:01
No, redraws happen when event listeners fire or when m.request responses come through.
Isiah Meadows
@isiahmeadows
Jan 26 21:01
(Unless you specifically disable them with ev.redraw = false or the background: true option, respectably.)
(But you almost never need to do that.)
spacejack
@spacejack
Jan 26 21:03
For example, assuming that AppState object above you could do:
var component = {
    view: function() {
        return m('.app',
            m('.foo', AppState.foo),
            m('button', onclick: function() {
                AppState.foo += 1
            })
        )
    }
}
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 21:03
https://mithril.js.org/autoredraw.html ok reading this, I hope it solves my problem. I'm fairly stumped. I have my app state in a different object like @spacejack suggested. just trying to ensure that a change in the app state triggers a redraw.
Isiah Meadows
@isiahmeadows
Jan 26 21:04
If it's not redrawing when it's supposed to, call m.redraw().
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 21:05
@isiahmeadows aha, that does the trick. it's basically an issue where it renders itself, but some of its data is the result of a promise
Isiah Meadows
@isiahmeadows
Jan 26 21:05
Yep. If you need to redraw, and it's not redrawing, that's what you need.
spacejack
@spacejack
Jan 26 21:06
m.request returns a promise but will auto-redraw for you when it resolves.
Other promises probably won't though
Isiah Meadows
@isiahmeadows
Jan 26 21:07
(Note: the auto-redraw waits for the next frame, so any async work that doesn't depend on I/O will still do its thing first.)
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 21:12
I'm probably not doing it the best way, because the component renders, the promise resolves, then a re-draw is triggered. but good enough for now
spacejack
@spacejack
Jan 26 21:14
That's generally fine
Oscar
@osban
Jan 26 21:15
@CreaturesInUnitards Well, I suppose you could make it horizontal instead of vertical, with smaller squares, and then 4 rows of 6. Then underneath the minutes section, where you could add or remove rows/squares depending on the setting.
spacejack
@spacejack
Jan 26 21:20
welp it's 4:20
Kevin Fiol
@kevinfiol
Jan 26 21:21
what does that mean
:smoking: ?
Patrik Johnson
@orbitbot
Jan 26 21:27
way past bedtime?
spacejack
@spacejack
Jan 26 21:33
Ok everyone, I have created the perfect one-button time select interface.
Fred Daoud
@foxdonut
Jan 26 21:38
@isiahmeadows thank you :100:
Isiah Meadows
@isiahmeadows
Jan 26 21:38
@foxdonut Welcome! (I assume for clarifying what Meiosis actually is?)
Fred Daoud
@foxdonut
Jan 26 21:38
@isiahmeadows indeed, and very well done so!
Isiah Meadows
@isiahmeadows
Jan 26 21:39
:+1:
(That's pretty good considering I know almost nothing about the design pattern itself.)
Fred Daoud
@foxdonut
Jan 26 21:41
A stream of model-updating functions is scanned over to produce a stream of models. That stream of models is mapped over with a function that renders view(model). That's it!
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 21:43
that actually sounds really cool.
Andrea Coiutti
@ACXgit
Jan 26 21:54
@spacejack did you copy that from the clock of my kitchen oven? :)
Fred Daoud
@foxdonut
Jan 26 21:54
@LewisAndrewCampbell if you'd like to have a look at a simple example: https://codepen.io/foxdonut/pen/NXQEaZ?editors=1010
Note that the tracer is a dev-only tool, you wouldn't need it in production and thus would not need to include meiosis and meiosis-tracer in production.
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 22:07
@foxdonut using streams to represent state was one of those 1960s or 70s ideas everyone forgot about until recently, isn't it?
Scotty Simpson
@CreaturesInUnitards
Jan 26 22:10
@spacejack LOL
Fred Daoud
@foxdonut
Jan 26 22:14
@LewisAndrewCampbell it's possible! I'm not familiar with the history. But you're definitely right about some patterns from decades ago, that are re-emerging lately.
Lewis Andrew Campbell
@LewisAndrewCampbell
Jan 26 22:52

@foxdonut https://en.wikipedia.org/wiki/Lucid_(programming_language)#Model

that's what I was thinking of. it's a bit over my head though!

I need to look into the mithril stream thing actually
"Each variable is an infinite stream of values and every function is a filter or a transformer."
Rasmus Porsager
@porsager
Jan 26 23:24
I'm trying to decide on a keyboard shortcut to copy the current flems url to clipboard as a markdown url.. Any suggestions?
Gilbert
@gilbert
Jan 26 23:24
command + l, command + c? :)
oh, as a markdown url
Rasmus Porsager
@porsager
Jan 26 23:25
Hehe.. Yeah, that's a good one though!
maybe ctrl/cmd+c if no text is selected ? :-S
guess some people use that to copy the current line..
maybe it's overkill.. My hope was to have sharing be doable just by keyboard..
Rasmus Porsager
@porsager
Jan 26 23:33
Which cmd + l, cmd + c is fine for currently, but my thought is that in the future this shortcut will show a prompt for copy a markdown url, copy commit url, copy session url or raw url (also accessible as a button of course)..
Isiah Meadows
@isiahmeadows
Jan 26 23:43

@foxdonut

I'm not familiar with the history. But you're definitely right about some patterns from decades ago, that are re-emerging lately.

That brings a few things to mind:

  • OCaml is from 1996, but its ancestor, Standard ML, is from the 70s. BuckleScript and Reason amount to effectively a signal boost for this platform.
  • Common Lisp and Scheme are from the 80s, but their roots go all the way back to the late 50s (only Fortran goes back farther). ClojureScript is gaining popularity and Rust's/Sweet.js's macro syntax are strongly inspired by Lisp's macro syntax, and Julia's multimethods are directly inspired by Common Lisp's. (That language is becoming a really big hit in the data processing circles, although there's a long road for it to unseat R or Python.)
  • Haskell is from 1990, but its roots go back to a few proprietary languages from the 80s (esp. Miranda). Elm is very similar syntactically, and carries similar purity, but it lacks the type system complexity.
  • Self was from 1987, and its prototype-based inheritance model found its way to Lua and JavaScript. Lua is basically everywhere in the gaming world, while JavaScript...I don't need to explain that one.
  • Erlang was from 1986, open sourced in 1996. Elixir was the first language beyond Erlang to gain much popularity on that platform (Erlang/OTP), because it has 1. Lisp's macros, 2. a Ruby-like syntax, and 3. most of the existing benefits Erlang has. (Erlang has a Prolog-like syntax and not very many metaprogramming facilities.) Part of what makes that platform so great for distributed, real-time, fault-tolerant software is because mutation is so highly restricted and not directly shareable. It's extremely popular in telecom companies, but incredibly obscure most everywhere else - well, until Elixir showed up with Phoenix (a Rails-like web framework for Elixir in particular).
  • ALGOL 60 was the first language with lexical closures, and ALGOL 68 featured an expression-based syntax, user-declared types, strong, safe, static structural typing, tagged unions, array/matrix splicing, and first-class concurrency support. (It was also unnecessarily complex in spots, but it was enormously complex for its time and predictably got blasted for it.)
(I just read up on ALGOL to confirm all that - I was only familiar with the fact it introduced several concepts in modern programming language, just not what specific features.)
Dominik Dumaine
@Bondifrench
Jan 26 23:46
Has anybody of you used the scratchpad from Firefox Developer tools? It has even code completion! Doesn't have the plugins of Sublime but looks quite convenient.
Scotty Simpson
@CreaturesInUnitards
Jan 26 23:49
@Bondifrench whoa, that awesome!