Drop grunt and npm?

[chris34]

IMO npm has more drawbacks from security side than benefits (in short: if you install grunt via npm you get hundreds of packages where you dont know what most of them really do. Furthermore, there seem to be CVEs found in another dependency weekly…)

I just thought about which jobs grunt currently has and how they can be replaced:

• Compress all static files (*.ttf, *.js, *.css, *.ico, *.svg) with gzip → this can be also easily done in Python with a small modified collecstatic management command.
• Run autoprefixer on all CSS-files → That was/is quite convenient for browser-prefixed CSS-attributes, but do we really need this any more?
• Generate sprites → Just drop it and use no sprites? With HTTP >= 2 sprites should have a smaller (or no?) impact on performance. This would be also a good chance to switch to SVG icons everywhere.
• jshint → just add static analysis for JS in the CI?
• For less.js (that converts all less-files to CSS-files) there are IMO more options
  • just let developers use the version of their linux-distribution (drawback: it could be outdated)
  • use a reimplementation like https://github.com/lesscpy/lesscpy (that is written in pure Python)
  • migrate to SASS: https://sass.github.io/libsass-python/index.html is available via pypi
  • migrate to pure CSS: This still misses some less features like mixins or loops, but most browsers support features like CSS variables nowadays.
• minifcation (in contrast to uglification you can still review the result…)
  • LESS or SASS can compress the CSS. Otherwise there are tools like https://github.com/ndparker/rcssmin
  • JavaScript can be minified with https://github.com/ndparker/rjsmin
  • SVG can be minified with https://github.com/scour-project/scour

[KaiserBarbarossa]

My Opinion:

Compressing files could also be done via webserver configuration. But I don’t know how much work would that be for ubuntuusers.de.

SVG everywhere is good, especially for responsive design. At the moment there are just a few SVG in our theme.

SASS/SCSS is (from my opinion) at the moment the more future-proof solution because it’s probably more used in big style frameworks like Bootstrap. From my point of view a conversion to SASS/SCSS would be a litlle work but a good solution. SCSS is probably better because it is more similar to CSS.

[chris34]

Compressing files could also be done via webserver configuration. But I don’t know how much work would that be for ubuntuusers.de.

Usage of gzip for all static files is the simplest problem IMO. The main benefit of compressing them once at deployment is performance. The static files only change upon deployment, and there we can compress all statics with the best setting (aka gzip -9). In comparison, most webservers will compress the files on every request. Latter wastes IMO resources and time for the end-user (and also has a lower compression ratio). That's still fine for example for HTML which can change more often.

SVG everywhere is good, especially for responsive design. At the moment there are just a few SVG in our theme.

Ok, we seem to have the same opinion here. The only drawback of 'SVG everywhere' I can imagine, is that page rendering on an old crappy smartphones could be slower, as SVGs have to be rasterized first. However, i haven't tested the impact in the wild.

SASS/SCSS is (from my opinion) at the moment the more future-proof solution because it’s probably more used in big style frameworks like Bootstrap. From my point of view a conversion to SASS/SCSS would be a litlle work but a good solution. SCSS is probably better because it is more similar to CSS.

Challenge accepted to convert it to SCSS? And is vanilla CSS not even more future proof, as it most likely will just work as is? ;)

Nevertheless, i just saw, that libsass (which is available via pypi and that i linked in the first post) is marked as deprecated → https://github.com/sass/libsass "there are no plans to add additional features or compatibility with any new CSS or Sass features". The recommendation is to use Dart Sass. Latter should be installed by downloading a binary according to https://sass-lang.com/install. I'm currently unsure, whether that's better than pipy/npm (and that's the topic)…

[Lyra2108]

First of all: I would vote for getting rid of npm as well, because I dislike that you lose the overview of dependencies in JS as soon as you use a single one :/

migrate to SASS: https://sass.github.io/libsass-python/index.html is available via pypi

I think that this might be a good way to go because as far as I am informed (which is not really well) LESS is a little bit on the losing side compared to SASS, isn't it?

[chris34]

Nevertheless, i just saw, that libsass (which is available via pypi and that i linked in the first post) is marked as deprecated → https://github.com/sass/libsass "there are no plans to add additional features or compatibility with any new CSS or Sass features".

Quite 'funny' in this context → https://github.com/sass/libsass-python/issues/326

So if someone wants to convert it to SCSS, I'm open for it (just be sure, it will compile with libsass). There could be even LESS→SCSS-conversion tools out there.

If all things go wrong, we can still just download Dart Sass and call the CLI from python IMO.

[KaiserBarbarossa]

FYI: Once I started migrating all icons to SVG here.

[chris34]

FYI: Once I started migrating all icons to SVG here.

hrm, seems like we did some duplicate work. Please say somehow that you are working on something. F.e. open a PR (Even if it's not perfect or finished partly). Otherwise, others will not notice what you did.