Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 09 14:40

    foxdonut on gh-pages

    update docs (compare)

  • Aug 09 14:39

    foxdonut on master

    working on docs (compare)

  • Aug 07 13:25

    foxdonut on gh-pages

    update docs (compare)

  • Aug 06 20:30

    foxdonut on master

    working on docs (compare)

  • Aug 05 20:26

    foxdonut on gh-pages

    update docs (compare)

  • Aug 05 20:26

    foxdonut on master

    working on docs (compare)

  • Aug 05 00:51

    foxdonut on master

    working on docs (compare)

  • Aug 05 00:43

    foxdonut on gh-pages

    update docs (compare)

  • Aug 05 00:43

    foxdonut on master

    working on docs (compare)

  • Aug 04 11:07

    foxdonut on gh-pages

    update docs (compare)

  • Aug 04 11:07

    foxdonut on master

    working on docs (compare)

  • Aug 04 10:15

    foxdonut on gh-pages

    update docs (compare)

  • Aug 04 10:14

    foxdonut on master

    working on docs (compare)

  • Aug 04 00:14

    foxdonut on gh-pages

    update docs (compare)

  • Aug 04 00:14

    foxdonut on master

    working on docs (compare)

  • Aug 03 01:40

    foxdonut on gh-pages

    update docs (compare)

  • Aug 03 01:32

    foxdonut on master

    working on docs (compare)

  • Aug 03 00:38

    foxdonut on master

    update docs (compare)

  • Aug 02 12:13

    foxdonut on master

    update docs (compare)

  • Aug 02 12:13

    foxdonut on gh-pages

    update docs (compare)

Fred Daoud
@foxdonut
thanks @cmnstmntmn
I updated the docs and examples, but they are not showing up on meiosis.js.org
Fred Daoud
@foxdonut
ah, looks like I needed to give it an extra nudge :grinning:
Constantin Angheloiu
@cmnstmntmn
hehe :D
Fred Daoud
@foxdonut
@/all I have updated the Meiosis documentation and examples, now with a "cell" to simplify parameter passing, improved services, and nesting: http://meiosis.js.org/docs/toc.html
I am currently working on meiosis-setup to provide TypeScript support.
Patrik Johnson
@orbitbot
:+1: :muscle:
James Forbes
@JAForbes
Cells are v cute @foxdonut 👏
Fred Daoud
@foxdonut
@JAForbes :smiley: thanks!
Constantin Angheloiu
@cmnstmntmn
:clap: awesome @foxdonut !
Fred Daoud
@foxdonut
thanks @cmnstmntmn !
Constantin Angheloiu
@cmnstmntmn
hei, do you know a good resource of implementing a sum types/tagged types, but in typescript?
Fred Daoud
@foxdonut
sorry I do not
Constantin Angheloiu
@cmnstmntmn
ty
Arthur Clemens
@ArthurClemens
@cmnstmntmn What are you looking for?
James Forbes
@JAForbes
@cmnstmntmn It's not a high priority for me right now, but I do plan to add typescript support to sum-type/superouter eventually. I've already started experimenting with it, I think typescript finally can support it with the advent of typed template literals
Constantin Angheloiu
@cmnstmntmn
@ArthurClemens a way to generate and use sum types; creation, folding, guarding
@JAForbes :clap: :star2:
Fred Daoud
@foxdonut
@/all I am working on meiosis-setup's upcoming release documentation and would love some feedback if anyone has a chance to have a look (all sections except TypeScript support which is not written yet): https://meiosis.js.org/docs/setup-toc.html
thank you in advance, I appreciate it!
Barney Carroll
@barneycarroll
😃
Fred Daoud
@foxdonut
(I know, I know, all the cool kids are on Zulip now.. but hopefully some people still have an eye on this page.)
Lewis Campbell
@LAC-Tech

Hi. What's a Zulip?

I'm keen to talk to people using reactive patterns outside react components

Erik Vullings
@erikvullings
@foxdonut great news about the updated documentation. I'll have a look at it and report back to you!
Fred Daoud
@foxdonut
@erikvullings many thanks!
Barney Carroll
@barneycarroll
Hey Fred! I really like the text and practical content — it represents a conceptual shift I was hankering for without quite realising it. “Meiosis isn’t a library /type-able convention, it’s a pattern” was good food for thought but became a burdensome intellectual whimsy for me. Many times I’ve written apps following the general gist of Meiosis and I’ve always come back to the canonical text and examples and always deviated in weird and ultimately dissatisfying ways. I really like the more authoritative and formal acknowledgment and dependency provision as a tangible proposition.
Barney Carroll
@barneycarroll
I have some presentation criticism: I think the font size is too large on mobile; separately but related there are inlineish horizontal layout bugs here. I do most of my reading on phone so this might be a niche concern. The persistent {previous | up | next} navigation component layout doesn’t work on mobile IMO — the emoji semiology is slightly dissonant too. I think the conditional small viewport width styles ought to lay these out as {up | previous | next}, lay these out vertically, and get rid of the border lines.

⬆️ The topic under discussion

⬅️ What we were discussing
previously

➡️ What we’ll be discussing
next

This would work much better IMO.
Barney Carroll
@barneycarroll
The typography and embedded flems remain fantastic, it’s really a pinnacle of demonstrative technical literature and information architecture 👏🙇‍♂️
Barney Carroll
@barneycarroll
Related to the mobile navigation component styles: one of the side effects of horizontal layout styles on mobile is that inline no-wrap code elements extend beyond the constrained layout. Occasional but regular and necessary inline code elements mean you have to scroll horizontally into layout no-mans-land. Line breaks on inlineish block styles are inevitably ugly but I think they’re the lesser evil.
Lewis Campbell
@LAC-Tech
isn't it inefficient to call the render method of react repeatedly for the same component, as in the examples? wonder if there's a way this might be tweaked
Fred Daoud
@foxdonut

@barneycarroll thank you for taking the time, and for the feedback! much appreciated :thumbsup:

Regarding the mobile experience: would you by chance have a link to an example that does what you describe? It would help me better understand how to make things right.

@LAC-Tech afaik the premise of React is to be able to call render, and React makes sure to optimize performance and reduce actual redraws to a minimum.
Barney Carroll
@barneycarroll
@foxdonut I’ll get on that
Fred Daoud
@foxdonut
@barneycarroll what do you think of something like this? smaller font, better nav. I haven't changed the order yet but Table of Contents (which I'm thinking of changing to just Contents) would be on top.
image.png
Fred Daoud
@foxdonut
Update:
image.png
Erik Vullings
@erikvullings

@foxdonut I promised to review your documentation, but than something came up, and I forgot about it. Sorry for that. Anyways, I did have some time today and here are my notes (based on the desktop version):

INSTALLATION page:

  • Navigation on desktop is slightly misaligned. The NEXT button is not at the right margin.
  • Instead of mentioning "Node.js", I would use "npm".
  • I would have preferred to already see the TypeScript code too, of course, e.g.
    const cells = meiosisSetup<State>({ app });
    Only later, I noticed the chapter on TypeScript. Perhaps this is a good place to mention it here too, as in 'see LINK for the TS version'

PATCHES page:

  • In your flems, you use const meiosisSetup = Meiosis.setup; instead of import { meiosisSetup } from 'meiosis-setup' (I'm not using js, but aren't the {} required there too?). Although that is mentioned before the first flems, it may be good to mention why you do it (because there is no other way in a flems) and include the regular import statement in your flems as comment, as somebody who copies the flems may not be aware of your warning.
  • Perhaps include an example of how to update the state using function patches and using mergerino, since many readers may not know the difference. Also, it would be nice if we could have some examples of how to update the state.
  • While using meiosis, when updating an object, I sometimes make the mistake that mergerino merges properties. So it may be good to add an example that you can easily reset your object using the update({ oldObj: () => newObj }) approach (instead of update({ oldObj: newObj })).

Initial state page:

  • Initial state can also be nested … for me, it is not really clear what you mean with that.

View library page (mithril section):

  • The example that you provide is clear. Nonetheless, I don't see me using meiosis in that way. Not yet, anyways. It feels rather unnatural to include the view in my app component. How will this scale when the application grows? Also, I don't like to write cell.state… all the time, nor provide the cell as an input parameter to each action call. Certainly, I could de-structure the cell, so (cell) => would become ({ state, update }) =>, but even in that case, I don't see how to easily access the actions object.
    I am still sticking to your previous pattern, as you can see here: hei/meiosis.ts at main · TNO/hei (github.com). Unfortunately, I cannot share the database model itself, but if you select 'TNO Researcher' in the About tab, you can use the edit functionality too.

Services page:

  • The examples are clear. Does this also mean that you are no longer using the effects pattern?
  • In the loadData example, could the run function also use async/await?

Nested components page:

  • meiosis-setup automatically sets up Meiosis with Nesting and meiosis-setup also provides nested components. feels a bit redundant.
  • I really like this example. I now understand better your intention of how to use nested components. Perhaps you can expand the example a little bit by showing how one component can access the app state (parent or sibling), e.g. if the home page displays the login name (or redirects you to the login page).
    Also, can you show how to deal with actions? In some ways, it seems that you do not need/prefer them anymore, as you use the cell.update method directly, and they are hardly mentioned throughout your documentation. However, I often do prefer actions so I do not duplicate code.

TypeScript support page:

  • Really nice work that you managed to get the typings correct, especially also for the nested components.
  • Perhaps add the nested components example (previous page), but now using TS.
  • Alternatively, but that is quite a bit of extra work, you could create two entry points at the top level, one for JS and one for TS users, so a TS user will see all the examples using TS.
  • The link to the TypeScript API documentation should perhaps be updated to types | meiosis-setup. And it may make sense to add it to the contents too, since also JS programmers can benefit from it.

Stream implementation page:

  • Perhaps add a reason why you would want to change the stream implementation. Is it because you are already using it somewhere else in your code?
  • In case I do want to use a stream implementation in my code, how could I import and use your simple-stream implementation in my (TS) code?
Fred Daoud
@foxdonut
@erikvullings thank you so much! I appreciate your taking the time to read the docs, and I am grateful for all of your excellent suggestions :100: I will notify back here when I am finished making updates.
Erik Vullings
@erikvullings
@foxdonut you're welcome, and I'm happy that I can contribute to your awesome library!
Fred Daoud
@foxdonut

@erikvullings my answers to your feedback are inline below.

INSTALLATION page:

  • Navigation on desktop is slightly misaligned. The NEXT button is not at the right margin.
    --Good point, fixed.

  • Instead of mentioning "Node.js", I would use "npm".
    --Yes, changed.

  • I would have preferred to already see the TypeScript code too, of course, e.g.
    const cells = meiosisSetup<State>({ app });
    Only later, I noticed the chapter on TypeScript. Perhaps this is a good place to mention it here too, as in 'see LINK for the TS version'
    -- I am planning to have 2 versions of the docs, with one being fully in TS.

PATCHES page:

  • In your flems, you use const meiosisSetup = Meiosis.setup; instead of import { meiosisSetup } from 'meiosis-setup' (I'm not using js, but aren't the {} required there too?). Although that is mentioned before the first flems, it may be good to mention why you do it (because there is no other way in a flems) and include the regular import statement in your flems as comment, as somebody who copies the flems may not be aware of your warning.
    -- Clarified why this is necessary. This should not be an issue in the TS version.

  • Perhaps include an example of how to update the state using function patches and using mergerino, since many readers may not know the difference. Also, it would be nice if we could have some examples of how to update the state.
    -- These are already in the example flems, there is a state update with function patch and another using mergerino. Did I misunderstand, did you mean something else?

  • While using meiosis, when updating an object, I sometimes make the mistake that mergerino merges properties. So it may be good to add an example that you can easily reset your object using the update({ oldObj: () => newObj }) approach (instead of update({ oldObj: newObj })).
    -- This is explained in detail in the Meiosis pattern docs. I would prefer not to duplicate that here. I do mention at the very top that the Meiosis pattern docs should be read first.

Initial state page:

  • Initial state can also be nested … for me, it is not really clear what you mean with that.
    -- Good point, I removed it.

View library page (mithril section):

  • The example that you provide is clear. Nonetheless, I don't see me using meiosis in that way. Not yet, anyways. It feels rather unnatural to include the view in my app component. How will this scale when the application grows? Also, I don't like to write cell.state… all the time, nor provide the cell as an input parameter to each action call. Certainly, I could de-structure the cell, so (cell) => would become ({ state, update }) =>, but even in that case, I don't see how to easily access the actions object.
    I am still sticking to your previous pattern, as you can see here: hei/meiosis.ts at main · TNO/hei (github.com). Unfortunately, I cannot share the database model itself, but if you select 'TNO Researcher' in the About tab, you can use the edit functionality too.
    -- Actions are now independent functions. This makes them easier to manage. Making actions coupled to the pattern does not work well with nest cells and nested components. Passing the cell to the action gives it access both to the state and the update function, I find this convenient.
    If you have many calls to cell.state, then you can add just one line at the top const state = cell.state.

Services page:

  • The examples are clear. Does this also mean that you are no longer using the effects pattern?
    -- That is correct. Now that services can handle both synchronous and asynchronous updates, effects are no longer needed.

  • In the loadData example, could the run function also use async/await?
    -- I don't use async/await, but perhaps it is possible...?

Nested components page:

  • meiosis-setup automatically sets up Meiosis with Nesting and meiosis-setup also provides nested components. feels a bit redundant.
    -- There is a reference to nesting from the Meiosis pattern docs. "Nested components" sounds redundant but they are not the same thing. However, they are related, so giving them an entirely different name doesn't make sense in my opinion.

  • I really like this example. I now understand better your intention of how to use nested components. Perhaps you can expand the example a little bit by showing how one component can access the app state (parent or sibling), e.g. if the home page displays the login name (or redirects you to the login page).
    -- Glad to hear it, and thank you for the great suggestion! Indeed I will augment the example showing how to access state from elsewhere, and also how to update state outside of the component.

  • Also, can you show how to deal with actions? In some ways, it seems that you do not need/prefer them anymore, as you use the cell.update method directly, and they are hardly mentioned throughout your documentation. However, I often do prefer actions so I do not duplicate code.
    -- The example does already use actions (loginActions, dataActions), so not sure if you meant something else?

TypeScript support page:

  • Really nice work that you managed to get the typings correct, especially also for the nested components.
    -- Thanks!

  • Perhaps add the nested components example (previous page), but now using TS.

  • Alternatively, but that is quite a bit of extra work, you could create two entry points at the top level, one for JS and one for TS users, so a TS user will see all the examples using TS.
    -- Agreed. Hopefully I can make a fully-TS version of the docs, which would include the nested components example.

  • The link to the TypeScript API documentation should perhaps be updated to types | meiosis-setup. And it may make sense to add it to the contents too, since also JS programmers can benefit from it.
    -- Yes, great suggestion!

Stream implementation page:

  • Perhaps add a reason why you would want to change the stream implementation. Is it because you are already using it somewhere else in your code?
    -- I included this only because it is possible. But you're right, there isn't much reason to do it, so I will remove it.

  • In case I do want to use a stream implementation in my code, how could I import and use your simple-stream implementation in my (TS) code?
    -- Great point, I will add a section explaining this.

Thanks again! I will post back when I have updated the docs.

Erik Vullings
@erikvullings
@barneycarroll thanks for the example! But shouldn't the async be before the (cell) instead?
Barney Carroll
@barneycarroll
Oops you’re right! I thought it was a fat function method 😅
‘Asyncifying’ that services code would look like this:
const service = {
  run: (cell) => {
    if (cell.state.data === undefined) {
      loadData().then(data => {
        cell.update({ data });
      })
    }
  }
}

// 👆 Before & after 👇

const service = {
  run: async (cell) => {
    if (cell.state.data === undefined) {
      cell.update({ data: await loadData() });
    }
  }
}
Erik Vullings
@erikvullings
@foxdonut thanks for your feedback - give me a heads-up when the new version is ready and I'll go through it again.
Fred Daoud
@foxdonut
@barneycarroll thanks!
@erikvullings awesome, will do. thanks!
Erik Vullings
@erikvullings
@barneycarroll yep, that would do it! Thanks for updating the example.