Tag: Worry

Let a website be a worry stone

Ethan Marcotte just redesigned his website and wrote about how the process was a distraction from the difficult things that are going on right now. Adding new features to your blog or your portfolio, tidying up performance issues, and improving things bit by bit can certainly relieve a lot of stress. Also? It’s fun!

What about adding a dark mode to our websites? Or playing around with Next.js? How about finally updating to that static site generator we’ve always wanted to experiment with? Or perhaps we could make the background color of our website animate slowly over time, like Robin’s? Or what about rolling up our sleeves and making a buck wild animation like the one on Sarah’s homepage?

Not so long ago, I felt a bout of intense anxiety hit me out of nowhere and I wound up updating my own website — it was nothing short of relaxing, like going to the spa for a day. I suddenly realized that I could just throw all that stress at my website and do something half-useful in the process. One evening I sat down to focus on my Lighthouse score, the next day was all about fonts, and after that I made a bunch of commits to update the layouts on my site.

This isn’t about being productive right now — it’s barely possible to focus on anything for me with the state of things. And also I’m certainly not trying to guilt trip anyone into cranking out more websites. We all need to take a breath and take each day at a time.

But! If treating your website like a worry stone can help, then I think it’s time to roll up our sleeves and make something weird for ourselves.

Direct Link to ArticlePermalink

The post Let a website be a worry stone appeared first on CSS-Tricks.

CSS-Tricks

, ,

Let a website be a worry stone

Ethan Marcotte just redesigned his website and wrote about how the process was a distraction from the difficult things that are going on right now. Adding new features to your blog or your portfolio, tidying up performance issues, and improving things bit by bit can certainly relieve a lot of stress. Also? It’s fun!

What about adding a dark mode to our websites? Or playing around with Next.js? How about finally updating to that static site generator we’ve always wanted to experiment with? Or perhaps we could make the background color of our website animate slowly over time, like Robin’s? Or what about rolling up our sleeves and making a buck wild animation like the one on Sarah’s homepage?

Not so long ago, I felt a bout of intense anxiety hit me out of nowhere and I wound up updating my own website — it was nothing short of relaxing, like going to the spa for a day. I suddenly realized that I could just throw all that stress at my website and do something half-useful in the process. One evening I sat down to focus on my Lighthouse score, the next day was all about fonts, and after that I made a bunch of commits to update the layouts on my site.

This isn’t about being productive right now — it’s barely possible to focus on anything for me with the state of things. And also I’m certainly not trying to guilt trip anyone into cranking out more websites. We all need to take a breath and take each day at a time.

But! If treating your website like a worry stone can help, then I think it’s time to roll up our sleeves and make something weird for ourselves.

Direct Link to ArticlePermalink

The post Let a website be a worry stone appeared first on CSS-Tricks.

CSS-Tricks

, ,
[Top]

How to Worry About npm Package Weight

It’s all too easy to go crazy with the imports and end up with megabytes upon megabytes of JavaScript. It can be a problem as that weight burdens each and every visitor from our site, very possibly delaying or stopping them from doing what they came to do on the site. Bad for them, worse for you.

There is all sorts of ways to keep an eye on it.

You could have a peak on Bundlephobia

Bundlephobia will give you a look at the total size — both zipped and unzipped — along with download times, the number of required sub-dependencies it has, and whether or not it can be tree-shaked (tree-shook? tree-shaken?).

Speaking of “phobia,” there is also Package Phobia that shows the publish and install sizes of individual packages:

You could let VS Code tell you right in the editor

Your import and require statements can lett you know the size of that particular inclusion with the Import Cost extension.

You could look at a data visualization

The Webpack Bundle Analyzer does that.

You could check out the sizes with text output

Cost of modules is another analyzer, but it seems like it only looks at package.json rather than the final bundle, then outputs it as a table:

Webpack Bundle Size Analyzer will show you a nested list of dependency weights, including the size of the bundle code itself, which is interesting:

package size will show you the weight of a comma-separated list of packages

package size has a simple CLI syntax for that:


You have another favorite way to keep your project in check?

The post How to Worry About npm Package Weight appeared first on CSS-Tricks.

CSS-Tricks

, , ,
[Top]