Artifact from SCSS. Unless still usefull?

https://medium.com/@bretdoucette/part-4-what-is-event-delegation-in-javascript-f5c8c0de2983

As per advice from @pascalw 👍

I'd suggest https://typespecimens.xyz/builder/demo/ ?

Accessing multiple fonts is cumbersome in the current setup. Also, order of fonts is not guaranteed because of the nondeterministic way 11ty processes _data files:

The non deterministic order seems to be caused by 11ty. 11ty adds global data files to the global data file in an non-deterministic order. Even if it didn't, relying on ordering of object keys is not very safe. So best is probably to generate a list of fonts somewhere, where we control the order of that list.

@pascalw proposes this:

Generate src/fonts/meta.json and fill it:

{
  "fonts": [
    {
       "name": "font one",
       "selector": "font-one"
    },
    {
       "name": "font two",
       "selector": "font-two"
    },
  ]
}

Then we can avoid generating fonts.js, as this JSON can directly imported instead via Webpack, giving us access to the same data we need. An author can tweak the order of fonts by editing the meta.json file. We'd also be able to work with arrays instead of objects, further simplifying things.

Instead of generating a single specimen, allow the build process to take multiple directories of fonts and build a single specimen for each one.

Combined with a --watch parameter, relevant specimens would auto-update whenever one of their fonts changes. So you'd always have an up-to-date "specimen archive"

localhost:1234 Homepage with links to all fonts
localhost:1234/recursive Recursive Variable Specimen Page
localhost:1234/bungee Bungee Specimen Page
etc.

• loader
• message for when var fonts are support

Currently using snake-case, based on personal preference. Would be great if the linter caught deviations.

(Bonus would be if you could config your own preference so folks could easily switch to camelCase, BEM, etc.)

Open Graph, Twitter etc.

To answer the question "why is that file there and why do I need images in my JavaScript?"

Do not mutate files, but write them once all data is gathered (see #58 (comment))

(Optionally, clear out _data dir before generating new fonts, so as to not confuse the site that's being built with old fonts.

Preferably I'd keep the code clean of anything related to an actual font. So folks would have to check out the repo, add a font, build the site.

Maybe just clean up #28 and add instructions? "Check our repo, download and store a font in this dir, run the yarn stuff"

Run the linters before comitting, making sure you'll get a warning about code smells before it ends up on Github

Should be a little more than just raw HTML, but nothing too fancy.

There's many more things we can extract from the font. Users now manually add this info, as is done here (private repo at the moment).

We could hook this up to the Wakamai Fondue Engine and generate controls for layout features, localization, language support etc.

https://github.com/chrissam42/Flont ?

Or is the automatically done if the browerlist includes a non-ES6-understanding browser?

This is the logo, so we can link to it. Eternal respect to Guido Theelen for the logo!

After running node _tools/generateFontData.js we should:

• Fill font family name in styles for body (font-family: example-font, monospace;)
• Fill in axes in :root and * declarations
• Fill in const fontName = "..."; in main.js

E.g.

MyFont-Bold.woff2
MyFont-Light.woff2
MyFont-Regular.woff2
MyFont-Condensed.woff2

Will be seen as four fonts. It's up to the author to create a proper dropdown to choose between these weights/styles.

We should have some user-definable mapping so we can fill that dropdown better, in an order we decide. Something like:

Weight dropdown
MyFont-Light = Light
MyFont-Regular = Regular
MyFont-Bold. = Bold

Add eleventyConfig.addPassthroughCopy({ "src/public": "." }); to eleventy config, see https://github.com/etunni/Arapey-Minisite/blob/master/.eleventy.js#L56

• Create JS data for FontFaceObserver so it will observe multiple fonts
• Create stylesheet with multiple fonts
• Split up CSS variables and font-family stuff (note to self: re-setting CSS variables on each elements is bad!)
• Generate all elements in the side per font, instead of just once

(Breaking) changes

• Font is not applied side-wide, but should be applied "locally" on elements by their classname

Like Flont does!

https://almanac.httparchive.org/en/2019/resource-hints

@markboulton suggested

The current glyph table dumps all characters sequentially; it would be better to group glyphs by type, as is often done in specimens.

@RoelN said,

I had a quick look at grouping those characters by type. It looks like Unicode categories aren't directly usable. For instance, the "Currency Symbols"-block doesn't contain the $.

The "Character Viewer" on Mac has a better categorisation, maybe we can tap into that and refine as needed

Alternatively we can look at groupings in existing specimens. Some of that can be automated, but it'd be a mostly manual process. (I would be interested in such a list for Wakamai Fondue myself, by the way! Beats a "dumb character dump")

It seems to me that a good source of such glyph metadata, libre licensed, is https://github.com/schriftgestalt/GlyphsInfo/blob/master/GlyphData.xml which is fully documented at https://glyphsapp.com/tutorials/roll-your-own-glyph-data and there's a freeware macOS app https://glyphsapp.com/tools/editglyphdata for dealing with it, but its standards compliant XML so any editor can do :)

It would be awesome if we could:

• Minify HTML
• Embed external resources (e.g. "when CSS is less than 8K" or when a custom attribute is set on the script/link elements?)

Variable font animations should be made as performant as possible:

• Use requestanimationframe when triggering from JS
• Use Intersection Observer to detect elements in view
• Debounce/throttle?

And concat on build? Or since this needs to be light on JS, just offer the one file and not interfere?

https://github.com/kabisa/specimen-skeleton/blob/master/src/js/main.js#L130

As per https://www.zachleat.com/web/preload/

Javascript is now placed just before the </body> tag. Placing it in the head and using either defer or async allows the browser to start downloading the assets earlier.

We should avoid the --wght variable, and use font-weight instead.

This means the --wght variable doesn't need to be set, and should be removed from the font-variation-settings rule.

To disable Jekyll processing by GitHub Pages.

This makes deployments faster and also prevents issues with GitHub Pages trying to process deployments as it if were a Jekyll site, which it isn't.

Currently errors when no named instances select is present, so do a if(instances){ ... }

Specimen boilerplate is to the point, but boring.

Suggestions:

• Specimen Sketch (refers to sketching, the first step in developing a new typeface)
• Specimen Skeleton (skeletons are way cooler than "boilerplates") 💀

https://github.com/kabisa/specimen-skeleton/blob/master/src/js/main.js#L101

Use el.isIntersecting instead of checking the ratio