sveltekit-blog-mdx VS sharp

If its just a blog, and your not talking 1000s of entries, I'd recommend using https://github.com/rodneylab/sveltekit-blog-mdx

SvelteKit plus mdsvex. There are quite a few examples out there, e.g. https://github.com/rodneylab/sveltekit-blog-mdx.

We will run through using the SvelteKit MDsveX starter but if you already have a SvelteKit site, it might make more since for you to follow along but working on a test branch of your own site. If you are using the starter, let’s get going by cloning it locally:

In this post we see how you can modify a Svelte blog site to respond to some Vim keyboard shortcuts. We'll clone the SvelteKit Blog MDsveX Starter to get things going quicker. Then we will create a new component for responding to keyboard shortcuts and add that to the existing blog post template. If you are not yet familiar with SvelteKit, you can still follow along. If you don't like Svelte then the code can also be adapted for use on React or plain HTML/JavaScript sites. Why don't we press on?

git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-hcaptcha-form cd sveltekit-hcaptcha-form pnpm install cp .env.EXAMPLE .env pnpm run dev

Using a script, if we decide we want to use AVIF images instead of WebP or change our image widths, it is pretty easy to regenerate the data files. Likewise if we decide to go for a plain, dominant colour placeholder instead of the low resolution one. You can see a full working example in the SvelteKit Blog MDsveX starter on the Rodney Lab GitHub page.

We'll start with the SvelteKit MDsveX starter and add a responsive image to the home page. We will see how you can generate a low resolution placeholder as well as an alternative dominant colour placeholder. We will generate a WebP Next-Gen format image together with the original JPEG in different sizes so the image looks good on large retina displays without having to download a huge image for small mobile displays. Using the placeholders, we will eliminate image layout shift.

In this post we took a look at how to customise the SEO meta generated by the MDsveX starter. It might seem a little abstract until you customise it for your own projects, so I would definitely say try using it as a next step. As always I am keen to get feedback and to hear how you have used it. You can clone the entire repo from the Rodney Lab Git Page.

I have just added PWA functionality to the MDsveX starter. All you need to do is customise the website configuration file with with site's name and theme colours, then run a script to generate all the different icon sizes automatically. Here is exactly what you need to do in five simple steps. If you are looking for a more general SvelteKit Tutorial or how to get started with SvelteKit I have a couple of posts you will appreciate.

Last thing left is to use our new upload function in our server action. Since I like to upload images in single format and have some more control over them, I will additionally use sharp library. For file name, I'll generate some random string using nanoid:

blur is a technique to blur images while reducing the file size surprisingly. blur works by enlarging the pixels of the image, which reduces the details of the image, and the number of colors also decreases, thus saving storage space. Sharp is a popular image processing library in Node.js, and it supports the blur function. After going through the blur function, the image size at this point is only a few KB, which is reasonable for an image placeholder in the article.

sharp

For simplicity, I will be generating PNGs with JavaScript/Node and the Sharp image library. Any library that can convert between pixel arrays and image files will make the process quite straightforward.

There is also a library that Next.js itself uses: sharp. It can be setup as Node.js service. I even played around a little: image-proxy-service

Sharp Documentation: Link

ESLint does an amazing job in detecting floating promises. I've not had it miss one, ever. When adding this to a project, I've discovered multiple accidental bugs due to a missing "await" keyword--bugs that were extremely subtle and intermittent in many cases.

The only thing it can't do is determine that you actually did handle the promise later. Which is fine. It's a LINTING RULE, and false positives are the name of the game.

What's BAD is when you accidentally miss handling a promise at all. It's an invisible error without the linting rule.

Your other comments...don't even make sense. You're going to build a Lanczos filter by hand? Or you're only going to ... compile ImageMagick to WebAssembly?!, ... an implementation which is tremendously slower (nearly unusably so for large images) than that of Sharp:

https://www.npmjs.com/package/sharp

... which is simply an import away?

No, what you're doing is called "motivated reasoning." You've concluded that Deno is the best, and you're reinterpreting all of my complaints in convoluted ways to support your predetermined conclusion.

Standard fanboy behavior. Or troll behavior. I cite Poe's Law as why it's impossible to tell the difference.