Proposal: "pekoe"

Tue Dec 8 20:41:16 UTC 2020

Hi Antranig,

Thanks for the comments! I’ll definitely want to get feedback from you and others with deep knowledge of Infusion as to how the Pekoe components can be complementary. I imagine that in some cases they could be consumed by Infusion but I’ll confess I don’t have the clearest idea in my head of how that would work at the moment. I hope to learn more as I go.

In terms of your questions about Pekoe itself, my thinking has been that it would be structured as follows:

  1.  A JavaScript class for each component.
  2.  A Rollup configuration which generates:
     *   Browser-ready JavaScript that can be loaded via a script tag without needing a build process.
     *   ES Modules that can be used in different build systems (so that if required, one can import one or more specific Pekoe components into an website’s JavaScript bundle).
  3.  Example HTML markup and instantiation JavaScript which shows how to use each component in context.

In terms of templating, the Nunjucks templates in Pinecone are there largely as a result of the component library tool, Fractal (https://fractal.build) which we used to build the component library (and which accepts “context” data for rendering example components via various templating engines). My thought had been that it would make sense not to specify or mandate a template engine for Pekoe, but rather to provide a usage example which could be adapted for any number of templating languages (Handlebars, Liquid, Nunjucks, etc.) or no templating at all if the circumstances dictated it. To see a bit more clearly the direction I’m going with this idea, you can take a look at a working draft of an accordion component, with the example’s markup and instantiation JavaScript in the “HTML” tab and more detailed usage in the “Notes” tab: https://pekoe.netlify.app/components/detail/accordion.html (source here: https://github.com/greatislander/pekoe/tree/14acbaca60067606191151da3b2d9c6162f6383f). The main distinctions from Pinecone are the absence of CSS and the separation of each component’s instantiation JavaScript into a clearly-documented example so that one doesn’t have to parse that entire pinecone.js file to see how to instantiate a specific component. I’d also like to make it easy for integrators to use only the parts of Pekoe that they need for a project, so that if (say) you want to use a tabbed interface component but don’t need anything else, there’s a browser-ready script that can be included via a script tag or a module for import into a build system for that component alone.

I’d be delighted to discuss this more with you if you have time this or next week.

Cheers,
Ned
—
Ned Zimmerman (he/him)
Senior Inclusive Developer
Inclusive Design Research Centre, OCAD University
https://idrc.ocadu.ca

From: fluid-work <fluid-work-bounces at lists.idrc.ocad.ca>
Date: Monday, December 7, 2020 at 7:28 PM
To: fluid-work at lists.idrc.ocad.ca <fluid-work at lists.idrc.ocad.ca>
Subject: Re: Proposal: "pekoe"
Hi Ned - this sounds like a great project.

I had a look over the Pinecone library and really liked the clean markup and good organisation. It's great
that this collection of components has already been validated through use in several projects.
I've long felt that there is a gap in our lineup within Fluid, since Infusion has by now come to be a
somewhat bulky application framework with a fairly steep learning curve, and we don't have anything clear to
offer users who want to get off the ground quickly with a minimal set of progressively enhanced components,
especially in the increasingly popular static site context.

Infusion has an odd dual role as an ongoing research project in open application design, together with its
actual embedding in various projects and wrapping of components and expression of meta-frameworks such as
the preferences framework - this means it isn't the best fit for every project. It's also somewhat expensive
to support, so we tend not to solicit further uses of Infusion beyond those which are necessary to support
its design. It’s part of our aim in this programme that everyone with the power to use an application should
also have the power to adapt it. A long-term aspect of this aim is that even static sites should in practice
be editable - sounds crazy, but it has to happen somehow!

It seems likely that Infusion and Pekoe might become complementary further down the line, since the upcoming
rewrite of Infusion will be able to make greater use of application and component templates expressed in
pure markup.

When you say that Pekoe will be a "vanilla JavaScript component library", I'm guessing you mean that it will
largely come to consist of

i) https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fplatform-coop-toolkit%2Fpinecone%2Fblob%2Fdev%2Fsrc%2Fassets%2Fscripts%2Fpinecone.js&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371138217%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=NcGroYP2Q%2FuDmYvR2yeBYbxDaeyMiQsP%2FCCXY%2BrMCHw%3D&reserved=0
ii) The module drivers for the various components plus the rollup/webpack config
iii) The component markup

A question I have is - what facilities, if any, you were planning to provide for templating? Is nunjucks, or
some parameterisation point, or else, nothing at all, going to be provided in order to connect consumers of
the markup to the markup? Given you said "vanilla Javascript" I was imagining you were planning for pekoe to
be dependency-free, but it seems like there is something to be done in this area - primarily, what were you
planning to factor out of pinecone in order to create pekoe?

Cheers on a great-looking and well-organised library, and I think it would be a great addition to the tools
that Fluid supports for accessible web development.

Antranig

On 03/12/2020 18:55, Ned Zimmerman wrote:
> Hello all!
>
> Last year, Cheryl, Dana, Jon and I worked on a design system and component library
> <https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fpinecone.platform.coop%2F&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371138217%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=rNYrpAQjE1mvNLaclEChocHAAsQo4lKhwRxaevGbILs%3D&reserved=0> for the Platform Co-op Development Kit. We called it Pinecone, drawing a
> connection between the principles of atomic design <https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fatomicdesign.bradfrost.com%2Ftable-of-contents%2F&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371138217%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=ptspWx6aaXzdpd9cpJ9lLsGEeRW%2F%2FBqPIZQTrf0HznY%3D&reserved=0>
> and the “twin pines” symbol <https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgeo.coop%2Fstory%2Fpraise-pines&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371138217%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=0Xoi9NKtDfOqfJHFgm%2FMZPcNjIVR7Bh0P6eoM%2FM4w%2FM%3D&reserved=0> that has long been associated with the
> cooperative movement. We worked to make each Pinecone component progressively-enhanced (when possible) and
> to support assistive technology users through accessibility best practices.
>
> We learned a great deal working on Pinecone and while the visual design is distinctively that of the
> Platform Co-op Development Kit, much of the underlying code has been repurposed in various in-house websites
> at the IDRC: the IDRC’s website <https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fidrc.ocadu.ca%2F&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371138217%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=W7xf%2Bpdn%2BAtO1obNNIBAp%2BQ0r9E4apx%2B0rgg1ZJPPS4%3D&reserved=0>, the forthcoming Community-led co-design kit
> <https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fsecure-web.cisco.com%2F1QvuCdvCOiq3X-WkiAwQu6llsXHL6U3jDntZBlaA3CYbEJY8cSZYWuVfh3KydBdXcMgrV2cTxdOP5IZdluU8DgmOMXt_N0gyt3pmGYz5t55aCe_wG0viYq42GqIQrYvf09vL5q82DBx4F-N3ZMNC1s4NYEx7C6xLlbWa4cNx8SX0enTkMmd7eu2ottqGQrJMvwEltt_DPHmh4VpHXrrYlwRubehTXuHGi0LbkIycR6S5QxnLV5ny2BIA5b3fC9bDqN4UL3pezVfdxZ6D09j1yO6Wvi3nKBaS81zu9unqqfrlJ2CY59n32FMR-n2LGLjCttF4JkKfp0PrkIunOFc7TAFCtRqE_O3Mc6j74jTdRbLBDMm1q91OIR51vx3Eio4Bwyl6m8ZyTUeGeHq_1UciG7Jm5ecG44xGPUk6OuRcDsyyF5bwA9PFMDlf-UBQyldefc2hVg4xFZXPK2D1pDmfMsSi5hLbloGEmoPp_0lxn3Jo%2Fhttps%253A%252F%252Fco-design.netlify.app&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371138217%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=%2BarHrnHdFyEL%2B1vxOyy5pviG%2Bizhjqrz1qf0D6%2FFEDo%3D&reserved=0>,
> and others.
>
> I’d like to propose that some of the most frequently-used interactive components from Pinecone be extracted
> into a new, lightweight vanilla JavaScript component library, which won’t include any CSS but will include
> well-documented guides for integration of one or many components into any web project. I’m thinking we could
> call it “pekoe”, which fits thematically into the Fluid Project’s naming scheme and is a quasi-acronym for
> (p)rogressively-(e)nhanced (co)mponents. I’m eager to hear your thoughts!
>
> Cheers,
>
> Ned
_______________________________________________________
fluid-work mailing list - fluid-work at lists.idrc.ocad.ca
To unsubscribe, change settings or access archives,
see https://can01.safelinks.protection.outlook.com/?url=https%3A%2F%2Flists.idrc.ocad.ca%2Fmailman%2Flistinfo%2Ffluid-work&data=04%7C01%7Cnzimmerman%40ocadu.ca%7C529ac1e59b164a2d7dd908d89b07dd36%7C06e469d12d2a468fae9b7df0968eb6d7%7C0%7C0%7C637429805371148213%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=gAu%2BvTvUdHWFzPcWtXRCzg4MT06jBXv%2BZar%2BNARh7lY%3D&reserved=0
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20201208/8451af03/attachment.html>