search

CSS-Tricks / coding-fonts

https://coding-fonts.css-tricks.com/
MIT License
461 stars 67 forks source link

Handle Cloudinary url failing #66

Closed landjonathan closed 2 years ago

landjonathan commented 3 years ago

It seems Cloudinary takes a bit to process new screenshots. It took about 7 minutes after merging Cartograph for the URL https://res.cloudinary.com/css-tricks/image/fetch/w_1600,q_auto,f_auto/https://coding-fonts.css-tricks.com/screenshots/cartograph-cf/css-light.png to stop returning a 404. The simple https://coding-fonts.css-tricks.com/screenshots/cartograph-cf/css-light.png was fine.

This makes me think there should be a fallback for Cloudinary erroring out. Since we already host the originals as part of the site, it makes sense to add a bit of robustness.

Can srcset do this natively? Maybe we need to complicate the onerror listener?

chriscoyier commented 3 years ago

Yeah it's a little curious how badly Cloudinary is performing for us. I found the 1200 version of the character set would return a 404 even though the original was perfectly fine in place.

I'm not sure how to handle it really. I guess if the 404 happens really fast and triggers onerror, it could fall back to the non-Cloudinary version? I guess that's fine, it's just lying to the srcset syntax (which cannot do error handling as far as I know).

landjonathan commented 3 years ago

Another direction I've been thinking about is a build plugin that handles creating the WebP and resized files. Netlify's default build image has ImageMagick installed, which comes with WebP support. Then we could use a <picture> element with <source>s to handle responsive sizes and browser fallbacks (I also think the <source> syntax is much nicer than srcset). This way we keep only originals in the repo, but serve all the versions reliably from the same origin. Am I missing other advantages that Cloudinary provides?

chriscoyier commented 3 years ago

We could chase that down, that'd be interesting to explore anyway. What we were getting from Cloudinary is:

  1. Don't have to make sizes ourselves
  2. Global CDN that presumably does images particularly well?
  3. Serves in correct format (WebP is great, but the "auto" format means we never have to think about it).

And if we do this as a Netlify build step, that means being tied to Netlify. Also fine, but it's always interesting to think about what things have hooks in you. I wonder if we could do it at the GitHub Action level?

MuTsunTsai commented 2 years ago

Looks like this is still an issue as of today.

chriscoyier commented 2 years ago

The root of this is that the screenshots were at locations that included like /FontName/, but there was an update that linked to them at lowercase /fontname/, and unfortunately Git apparently isn't case sensitive like that and the trick is the folder of screenshots has to be removed, committed, changed to lowercase, and re-committed. If any are broken like this anymore, just open issue with specific font and I'll look.

The slowness I can't really do anything about for now, but seems to have not been so bad lately.