Hi just discovered that clamp is not supported on iOS 12 and many people use it yet. :( It would be fine to generate a fallback too, as explained here https://www.bronco.co.uk/our-ideas/creating-a-clamp-fallback-function-in-sass-scss/ or any other fallback you know. What do you think?

Merge checklist:

• [x] Test the major browsers the app supports:
  • [x] Chrome
  • [x] Firefox
  • [x] Safari
• [x] Test on an actual mobile device.
• [x] Test with a screen reader.
• [x] Fix any validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-24--zen-ptolemy-a47e6d.netlify.app%2F
• [x] Test the app for basic functionality (all inputs, validation, copy to clipboard, preview, etc.).
• [x] Verify that all external links have the correct attributes (noreferrer noopener).
• [x] Test link sharing functionality (SSR on the /calculate route).
• [x] Verify that robots.txt is valid: https://www.google.com/webmasters/tools/robots-testing-tool?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=%206062598
• [x] Validate JSON-LD: https://validator.schema.org/#url=https%3A%2F%2Fdeploy-preview-24--zen-ptolemy-a47e6d.netlify.app%2F
• [x] Verify that performance scores are acceptable.
  • [x] Lighthouse (done as part of Netlify build step)
  • [x] WebPageTest: https://www.webpagetest.org/
• [x] Verify that all meta tags have remained unchanged:
  • [x] Title (regular and OG): Fluid Type Scale - Generate responsive font-size variables
  • [x] Description (regular and OG): Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any existing design system.
  • [x] Keywords: fluid type scale, type scale, CSS clamp
  • [x] Author: Aleksandr Hovhannisyan
  • [x] Canonical URL: https://www.fluid-type-scale.com/
  • [x] Twitter and OG preview image: https://www.fluid-type-scale.com/assets/images/thumbnail.png.
• [x] Verify that social media preview images are still working (https://cards-dev.twitter.com/validator).
• [x] Verify that mobile/tablet/desktop still look and function the same.
• [x] Verify that no-JS experience is acceptable:
  • [x] The page loads, even though it's not interactive/hydrated.
  • [x] Users can change form values.
  • [x] Users can submit the form.
  • [x] On submit, users are redirected to the submission page.
  • [x] The output updates accordingly and any requested fonts load correctly.
• [x] Verify that the /calculate route is not indexed (excluded from sitemap).

Description

This ticket is to support two related enhancements:

• URL sharing
• No-JS form submissions

When a user changes the parameters in the form, the app should update its URL with the serialized query parameters, thus allowing them to share the URL. On page request, the app would read those query parameters on the server side and use them to populate the app's initial state.

The app should also support no-JS form submissions for the (admittedly rare) case where a user may have JavaScript disabled. In that case, on form submission, users should be redirected to a page whose URL consists of query parameters assembled from the form's data.

Requirements

• names for all of the inputs
• a form action pointing to a dynamic route
• the 11ty serverless plugin

The basic idea is then to supply the 11ty serverless query params to the React component and use those to initialize its state. SSR will then return the code output.

Additional context, ideas, or considerations

• Not currently possible with Slinkity because it does not work with 11ty Serverless.
• If and when this is possible, XSS will need to be defended against very carefully.
• Easy to implement if we migrate to a framework like Next.js.

• Added proper return value typing to state reducer
• Removed rounding control since it's not really contributing much
• Improved mobile UX for preview so the range input is closer to the table
• Upgraded slinkity

On the following video, we see the total width taken by the number varies when the values change:

https://user-images.githubusercontent.com/9340937/150575548-45cfbe7d-dca7-4833-92c4-d64d4af315fe.mp4

This can be improved using CSS:

.my-class-for-numbers {
  font-feature-settings: "tnum"; /* optional */
  font-variant-numeric: tabular-nums;
}

font-variant-numeric alone should be enough.

Knowledge reference:

• The Smallest Difference by Robin Rendle
• font-feature-settings on MDN
• font-variant-numeric on MDN

Foremost, thank you for creating such a graceful and simple tool 🙏

I was looking around for a straight-forward solution to fluid typography and yours is by far the easiest with just the right amount of customization and modern Tailwind-like naming convention out of the box.

I was wondering if you have considered adding variables for fluid line-heights? One for body text and one for headings.

I suppose it may be an overkill to use clamp() for line-height since the variation between min/max is so small. On the other hand, it would make your tool a true plug & play typographic solution.

Related ticket: #17

Overview:

• Moves the project to Next.js
• Adds TypeScript
• Supports URL sharing/SSR for a dedicated calculate route

Merge checklist:

• [x] Test the major browsers the app supports:
  • [x] Chrome
  • [x] Firefox
  • [x] Safari
• [x] Test on an actual mobile device.
• [x] Test with a screen reader.
• [x] Fix any validation errors: https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-20--zen-ptolemy-a47e6d.netlify.app%2F
• [x] Test the app for basic functionality (all inputs, validation, copy to clipboard, preview, etc.).
• [x] Verify that all external links have the correct attributes (noreferrer noopener).
• [x] Test link sharing functionality (SSR on the /calculate route).
• [x] Verify that robots.txt is valid: https://www.google.com/webmasters/tools/robots-testing-tool?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=%206062598
• [x] Validate JSON-LD: https://validator.schema.org/#url=https%3A%2F%2Fdeploy-preview-20--zen-ptolemy-a47e6d.netlify.app%2F
• [x] Verify that performance scores are acceptable.
  • [x] Lighthouse (done as part of Netlify build step)
  • [x] WebPageTest: https://www.webpagetest.org/
• [x] Verify that all meta tags have remained unchanged:
  • [x] Title (regular and OG): Fluid Type Scale - Generate responsive font-size variables
  • [x] Description (regular and OG): Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any existing design system.
  • [x] Keywords: fluid type scale, type scale, CSS clamp
  • [x] Author: Aleksandr Hovhannisyan
  • [x] Canonical URL: https://www.fluid-type-scale.com/
  • [x] Twitter and OG preview image: https://www.fluid-type-scale.com/assets/images/thumbnail.png.
• [x] Verify that social media preview images are still working (https://cards-dev.twitter.com/validator).
• [x] Verify that mobile/tablet/desktop still look and function the same.
• [x] Verify that no-JS experience is acceptable:
  • [x] The page loads, even though it's not interactive/hydrated.
  • [x] Users can change form values.
  • [x] Users can submit the form.
  • [x] On submit, users are redirected to the submission page.
  • [x] The output updates accordingly and any requested fonts load correctly.
• [x] Verify that the /calculate route is not indexed (blocked in robots.txt).

• Instead of consuming the state context internally within each form input group, we now pass down only the data the components need and memoize them to prevent unnecessary re-renders. React dev tools were highlighting lots of re-renders for some of the inputs.
• Debounces URL updates to fix a console warning.
• Cleans up code output logic for indentation.
• Renames api/* => schema/* to match terminology used by libraries like zod and yup. Also renames getValue => parse, etc.

Seeing this on the /calculate route:

{"errorType":"ReferenceError","errorMessage":"module is not defined in ES module scope\nThis file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.","trace":["ReferenceError: module is not defined in ES module scope","This file is being treated as an ES module because it has a '.js' file extension and '/var/task/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.","    at file:///var/task/___netlify-handler.js:1:1","    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)","    at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:60:5)","    at /var/runtime/deasync.js:23:15","    at _tryAwaitImport (/var/runtime/UserFunction.js:74:12)","    at _tryRequire (/var/runtime/UserFunction.js:162:21)","    at _loadUserApp (/var/runtime/UserFunction.js:197:12)","    at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)","    at Object.<anonymous> (/var/runtime/index.js:43:30)","    at Module._compile (internal/modules/cjs/loader.js:1085:14)"]}

• Added an Alert component to communicate time-sensitive information to screen readers (e.g., copy-to-clipboard state).
• Nested <code> as a child of the output and removed redundant styling set on the output element.
• Removed hard-coded padding from the copy-to-clipboard button and used a spacing variable instead.
• Cleaned up the styling for the rounding group.

|Before|After| |-|-| |||

Datalist doesn't show in Firefox for numeric inputs (https://caniuse.com/datalist), but the input still works. This seemed like the path of least resistance for allowing custom inputs but also suggesting values natively. The alternative is to conditionally render an additional input for a custom input, but that seems a bit heavy handed.

Tested with NVDA and VoiceOver on:

• Chrome 97
• Firefox 96
• Safari 15.1

Works well!

Roughly what it looks like in Chrome/Edge/Safari:

Currently, the /calculate route is never cached, so every request for the same URL will trigger a new SSR build:

That's fine since a majority of users are unlikely to visit the same URL, but if multiple team members share the same URL and visit it, then there's no point in regenerating that page every time.

Unfortunately, Netlify's Next.js integration does not support caching SSR pages:

Cache control for SSR pages isn’t supported. As an alternative, you can use incremental static regeneration (ISR) pages instead and leverage the caching functionality that comes with On-demand Builders on Netlify.

Not entirely sure how on-demand builders would work with getServerSideProps, though.

Context: I'm currently self-hosting Inter for performance using https://google-webfonts-helper.herokuapp.com/.

Unfortunately, the app is currently using an outdated version of Inter that renders the uppercase letter A with two little weird holes that are very noticeable on mac OS (and only mac). See issue here: https://github.com/majodev/google-webfonts-helper/issues/130.

Workarounds that have come to mind:

• Don't self-host the fonts and instead link to Google Fonts. Noticeably worse for performance per #8.
• Use https://github.com/takanorip/eleventy-google-fonts/. Downside: it returns the CSS for all charsets rather than just latin.
• (Temporary patch) Use different sample text and hope people don't notice 😅 Footer text also contains an uppercase A from my name, so this wouldn't really work.
• Use a different font 😞 Inter is so pretty though...