1copenut / c3-eleventy Goto Github PK

The problem

The fonts aren't rendering as well as they used to. The problem is in how they're being offered by the respective providers.

• Type Together's variable font version of Literata has sharp edges. Okay-ish for body copy, but terrible for sub-heads and blockquotes.
• v2 of Public Sans doesn't appear to honor variable font widths. I need the old version or stick to defined font-weight rules.

Possible alternatives

• Hepta Slab
• Voto Serif

• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

• https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
• https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/
• https://csswizardry.com/2020/05/the-fastest-google-fonts/

• Create a simple baseline grid, maybe 2em
• https://24ways.org/2006/compose-to-a-vertical-rhythm
• https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

• Netlify
• Digital Ocean
• Vultr

Consider the pros and cons. Netlify has all you need for turnkey. DO and Vultr have more freedom, but also require more work. Would be better for learning. Maybe you can start with Netlify and cut over as you're ready.

There 4-6 core services that should be written. This issue will capture the copy for accessibility.

• Write first draft
• Proofread (ideally with outside help)
• Add to Markdown file

• https://docs.netlify.com/routing/headers/#syntax-for-the-netlify-configuration-file
• https://answers.netlify.com/t/content-type-header-not-working-in-netlify-toml/7718
• https://datatracker.ietf.org/doc/html/rfc8615

There 4-6 core services that should be written. This issue will capture the copy for accessibility.

• Write first draft
• Proofread (ideally with outside help)
• Add to Markdown file

• https://www.raresportan.com/eleventy-part-four/

The developer tier has 5,000 free events per month, far and away enough for your penny-ante blog. :)

• Include CSP logging https://docs.sentry.io/product/security-policy-reporting/

• https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9
• https://css-tricks.com/reader-mode-the-button-to-beat/
• https://www.smashingmagazine.com/2011/11/the-perfect-paragraph/

• https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/
• https://www.type-together.com/literata-font

This article had some good points: https://www.legendarylion.com/how-to-protect-your-online-business-reasons-behind-the-terms-and-conditions-and-privacy-policy-statements/

• https://florian.ec/blog/cache-busting-eleventy-postcss/

There 4-6 core services that should be written. This issue will capture the copy for accessibility.

• Write first draft
• Proofread (ideally with outside help)
• Add to Markdown file

• Basic interaction with form, other interactions (consider BDD Gherkin in the test cases)
• Axe checks
• Visual regression

HTML5 does a good job with basic validation requirements. Let's do better for a11y and useful error handling.

• https://blog.openreplay.com/form-validation-using-javascript-s-constraint-validation-api
• https://www.bram.us/2022/04/22/progressive-enhancement-and-html-forms-use-formdata/

• https://markus.oberlehner.net/blog/setting-up-eleventy-with-preact-and-htm/
• https://markus.oberlehner.net/blog/building-partially-hydrated-progressively-enhanced-static-websites-with-isomorphic-preact-and-eleventy/

• https://simonhearne.com/2022/caching-header-best-practices/
• https://answers.netlify.com/t/setting-response-headers-only-on-documents/6144/31

• https://csswizardry.com/2020/01/performance-budgets-pragmatically/
• https://web.dev/use-lighthouse-for-performance-budgets/

It's probably safe to leave out @1x images for phones and tablets, but the site should have a background image for desktops, using a simpler media query to serve a lower resolution.

• Thinking JSON-LD. It worked well in previous sites.
• Schema.org for blog posts

This inline JS must be moved to a script with a hash value or it won't work with CSP.

• https://www.troyhunt.com/locking-down-your-website-scripts-with-csp-hashes-nonces-and-report-uri/
• filamentgroup/loadCSS#312 (comment)

• https://github.com/philhawksworth/eleventyone/blob/9e6e838e46d211af7c03dfc01e5e64af8dbd0036/.eleventy.js

• https://www.nexb.com/blog/oss_attribution_obligations.html

• https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/

• https://www.elastic.co/blog/how-i-added-a-search-bar-to-my-website-in-20-minutes-with-elastic-site-search

This should be managed by Netlify in the _TOML file, but check before shipping.

• https://www.smashingmagazine.com/2011/11/the-perfect-paragraph/
• https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

Might not be necessary, but there's something to be said for web components to re-create components like accordions, tabs.

Thinking the big ones for now:

• Twitter
• Facebook open graph

https://piccalil.li/tutorial/fluid-typography-with-css-clamp/

• https://dev.to/brewhousedigital/using-purgecss-with-bootstrap-and-eleventy-j7p
• https://www.11ty.dev/docs/watch-serve/

• https://11ty.recipes/recipes/add-a-sitemap/
• https://developers.google.com/search/docs/advanced/robots/intro (This file should go in document root, and will need copied)

Thinking the following:

• Nesting
• Autoprefixer?
• Maybe the container query polyfill?
• Others? https://www.postcss.parts/

• https://lit.dev/blog/2022-02-07-eleventy/

• Add a humans.txt file
• Add a security.txt file

Apparently in the rush to block out the elements, I forgot to build a skip-nav link in. Since I'm not supporting IE11, this should be fairly straightforward.

Explore OSWASP Zap or other pentest tool to fuzz the basic site

https://dev.to/marionauta/avoid-notches-in-your-pwa-with-just-css-al7

Want to make sure we don't accidentally leave the <nav> unusable at mobile sizes on new iPhones.

The only way I can see to use CSP nonces is to self-host an NGINX server. Found a way to protect the replacement value:

• https://www.11ty.dev/docs/data-js/#example-exposing-environment-variables
• https://scotthelme.co.uk/csp-nonce-support-in-nginx/
• https://krvtz.net/posts/easy-nonce-based-content-security-policy-with-nginx.html

• Add it to the base layout, so it's picked up by all the child layouts
• Look for ways to add nonces even without a server-side rewrite. Possibly this article from Scott Helme: https://scotthelme.co.uk/csp-nonces-the-easy-way-with-cloudflare-workers/ UPDATE: This is not possible. Hashes it is: https://csp.withgoogle.com/docs/faq.html#static-content
• Set up reporting with https://report-uri.com/

See:

• https://dev.to/marcellothearcane/how-to-csp-your-netlify-projects-4ff1
• https://www.uriports.com/blog/creating-a-content-security-policy-csp/

• https://support.google.com/webmasters/answer/9008080?hl=en

• https://github.com/gregives/eleventy-critical-css

There 4-6 core services that should be written. This issue will capture the copy for accessibility.

• Write first draft
• Proofread (ideally with outside help)
• Add to Markdown file

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
• https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns

Guidance

• https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#use-github-actions
• https://github.com/marketplace/actions/cloudflare-pages-github-action
• https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions
• https://developers.cloudflare.com/pages/how-to/custom-branch-aliases/
• https://www.youtube.com/watch?v=fcHJZ4pMzBs

Considerations

• main for prod, development | staging for testing purposes
• Staging URL for testing
• Tag each release using GHA

• https://adrianroselli.com/2019/12/responsive-type-and-zoom.html
• https://www.w3.org/WAI/WCAG21/Techniques/failures/F94.html

The text doesn't scale linearly because of the --fluid-screen: 100vw declaration in _variables.css. Will need to find another means to scale text. Screenshots below show text at 100% and 400%, 1280px width in Chrome Big Sur.

A better way might be Andy Bell's Fluid Typography with CSS Clamp ( https://piccalil.li/tutorial/fluid-typography-with-css-clamp/ ). Will investigate in a CodePen and circle back.

100% (default)

400% zoom

There 4-6 core services that should be written. This issue will capture the copy for accessibility.

• Write first draft
• Proofread (ideally with outside help)
• Add to Markdown file

• https://levelup.gitconnected.com/how-to-unit-test-html-and-vanilla-javascript-without-a-ui-framework-c4c89c9f5e56