I don't like web development

Content

The content of a website is whatever you see, read, hear, watch, and etc. It is what gives your site the meat for your audience to chew onto. This is the most important of your website, and if your content is hard to understand, then don’t expect most people to read it.

HTML

If the content is the meat of the site, then the HTML is the skeleton. HTML guides the organization of your content; how should it be read or displayed to the users without any frills or decorations. It also describes what is the type of your content, whether it is an image, article, sections, forms, videos, or others, through the use of various semantic HTML tags.

CSS

The CSS handles how should the lump of bones and meat look like. Using the skeletal structure we defined earlier, we describe the actual visual of your website. It shows the colors, margins, paddings, and other things that should be for aesthetics only.

Javascript

Hoo boy.

I honestly think that most websites misuse Javascript, and as such, is one of the reasons why the web is so bloated.

Here are the only reasons why should you use Javascript:

1. The content should be dynamic; or
2. The content should be interactive.

That’s it.

Wait, what do you mean that the content should be dynamic or interactive?

Good question!

Dynamic content is content where it changes with or without visible input from the user. An example of this is a clock: it’s dynamic, but it does not necessarily need active interaction from the user, only needing the access to the user’s time locale. Another example is Reddit’s how many users are online counter on the sidebar. It is dynamic: it only changes when the amount of online users changes. ^{† †} Interactive content is content where it requires active interaction from the user. This isn’t a POST request. The content of the server changes, but not necessarily the content of the frontend. The nearest example is most of Nicky Case’s works, and their other site, Explorable Explanations. This is where dynamic and interactive content intertwine, but I would define in Javascript terms as something where you need to get user events, such as onclick and family.

Those things are the only things where Javascript should be used. No, tracking users isn’t making the content dynamic nor interactive. Why does CSS-in-JS exist? CSS should not absolutely be dynamic nor interactive.

Unclear HTML Semantic Tags

The two most useful HTML tags are <div> and <span>. However, since bots are stupid, they could not tell what the contents inside those tags are. As such, web crawlers could not understand what your website is all about, and it could seriously impact your SEO or something idk what those words actually mean.

Enter semantic tags.

Semantic tags help identify which content is the most important and which isn’t. It is how you tell a Google bot the difference between a navigation bar, a footer, and an article.

There are some things unclear with these tags.

First, the <article> and <section>. Is an article composed of many sections, or a section is composed of many articles? It is unclear. Since W3Schools sucks, I am currently browsing the MDN docs.

Apparently <section> is so generic it can be used as something like an article or a navigation bar? But isn’t the point of semantic tags is to determine whether something is more important than the other, like how article > navigation bar?

Also what the hell is this?

CSS on its own sucks

When I first started using CSS, it was a godsend. No more inlining styles. Just define the aesthetic in a separate file. I really like the separation of content from style.

Anyways CSS sucks because I’m stupid and the box-sizing is very unintuitive to me. But that’s not the only gripe I have.

You see, I’m not experienced enough to make my website responsive to different screen sizes. Also why is making margin notes so hard! I am very envious of other blogs having fancy things like margin notes, dialogue (like in fasterthanli.me), and admonitions. I really like those, and I wish there was a CSS framework for that. Speaking of…

Why are there so many CSS frameworks

Why.

Originally, there was Bootstrap, and it made sense to use it on sites which are very maximalist.

And then I think everyone hated the grid system^{† †} The frameworks, not the CSS grid. , and so everyone moved to flexbox. Also a lot of frameworks spawned for the past several years and they all look slightly different.^{† †} The visuals are just some variation of Google’s Material Design, which is actually very good!

Also there are a lot of ‘CSS’ frameworks that are bundling with JS. Why? The goal of CSS is to make your content stylish, not make it dynamic nor interactive. Why bundle it with Javascript?

I don’t like building things/I hate the Javascript language/I don’t like node in general

Once upon a time people write CSS and Javascript until they hated it because it does not absolutely scale at all for big websites. Even small websites are a nightmare to style if you have any resemblance of a color scheme. You may say that modern CSS has variables now, but the syntax is very unwieldly (and ugly! personally). So people wrote Less and Sass and Coffeescript and Elm and React and Vue and whatever the hell webdev people come up with every six weeks. The problem with those is obviously browser can’t understand them. So people work around this by compiling these to pure CSS or Javascript. The thing that I don’t understand is that why write the compiler in Javascript. WTF.

Javascript is not my favorite language. It claims to be a functional and prototypical language despite the fact that it’s standard library does not have anything related to iterators until the introduction of EcmaScript 6 (Why is it called EcmaScript?). Also if Javascript is an object oriented language then why does it have weak typing? I know that the core of OOP is bundled state and behavior, but I like my objects to be a specific bundle of state and behavior unless I explicitly converted that object to another type.^{† †} This is why TypeScript exist.

ES6 solved most of Javascript problems. It finally have iterators! Also the only valid for loop to use is for...of and all variable declarations should be let instead. I still don’t understand why var is implemented… like that.

Using other Javascript code is on another level. Originally there is only one Javascript Interpreter: the browser (technically the number of interpreters is the number of browser engines available on the internet). Javascript is just a neat little programming language to make your content more dynamic. And then someone thought it was a good idea to separate the browser engine out of the browser, added some new frills such as namespacing and called it Node.js.

This led to my confusion back then. I did not understand that to basically import something on the web, you just add a script tag and add the link to the CDN, or a file you downloaded earlier. The implications of this is that the more libraries you use, the more bloated your website is. Even helper libraries such as jQuery and Lodash add to the bandwidth usage of your users.

The solution? Apparently most developers’ answer is to just don’t give a shit.

I’m guilty of this! As you notice, this static website uses jQuery to basically implement the navigation bar burger button and the image modals^{† †} Which basically does not work right now. 😭 . I used jQuery because honestly, raw Javascript is just ugly, and jQuery is more familiar to me. However, since modern browsers are now less annoying with their nonstandard practices, jQuery get more and more useless.^{† †} As of this writing, I replaced jQuery with UmbrellaJS, which is only less than 10% of jQuery’s file size.

I was also saddened by the fact that import does not work in browser Javascript (well they do right now). Back then, I thought that javascript can now be namespaced so I can know which functions came from which dozens of libraries I added for my site.

I also wish simply importing scripts does not run its side effects. In Python, you wrap your main code with if __name__ == "__main__" so that your code wouldn’t run arbitrary code. Rust requires an explicit main function so side effects basically does not exist.

Anyways, let’s move on to Node!

What is node?

Node is basically if you take the Chrome’s V8 Javascript engine and interface it with IO. You can now access the filesystem, print to stdout, and do some HTTP stuff. I do not know why would you want Javascript to interface with the outside world especially when it is prone to type errors and most times it is silent unless you "use strict";.

Node’s package manager is called Node Package Manager^{† †} Duh. 🙄 or npm for short. Before I used node, I have already heard of npm horror stories, like left-pad, or - (the package) or even npm audit.

My recent dealings with npm does not make it any better. While working on this blog, I tried to use TailwindCSS. I think the CSS framework is really neat, especially the functionality of purging unused CSS. But to have that feature, I’ll have to use npm.

Currently I actually use yarn, because before writing this blog post I actually want to write a blog about using Tauri to make an asynchronous download manager GUI using Svelte and Rust. Tauri suggested that I use yarn because it works on their machine (yeah).

So coming back to this blog, I found this tutorial on integrating TailwindCSS and Zola. According to this, I should do the following:

1. Do npm init or anything equivalent.
2. Install tailwindcss (not tailwind!), postcss, and autoprefixer.
3. Also install parcel-bundler to have yourself a build system.
4. Create a .css file (which is actually PostCSS), and add a bunch of TailwindCSS boilerplate.
5. Build that with parcel watch or parcel build, to make it work.

Here are a couple problems I’ve discovered:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind base;@tailwind components;@tailwind utilities;

module.exports = leftpad;
function leftpad (str, len, ch) {
  str = String(str);
  var i = -1;
  if (!ch && ch !== 0) ch = ' ';
  len = len - str.length;
  while (++i < len) {
    str = ch + str;
  }
  return str;
}

Use less Javascript

Please do not use Javascript to stimulate something that can be done in HTML or CSS. What do I mean by this? Here are some examples:

• Making a link by using onclick on a div
• Stimulating a textbox^{† †} Twitter does this. Try inspecting any textbox. It isn’t an input. It’s a div.
• Stimulating a <select>
• Adding an hr after every heading (you have :after for this)
• And many other things

Try going on a day of websurfing with Javascript turned off. You’ll be surprised how much reliant a lot of websites on Javascript.

HTML5 exists. CSS3 exists. Use it. Please.

Try using Wasm

If you rely on using Javascript heavily (for example: 3D stuff, single page applications, etc.), then you could benefit from Web Assembly, or Wasm for short. File size wise, JS wins on smaller code, but Wasm scales better on larger programs.

Use alternative protocols

One neat thing I discovered in this pandemic are the Gemini Protocol and the Hypercore Protocol. These offer a lightweight alternative to the HTTP protocol.

With the Gemini protocol, you are definitely restricted with what content you offer to the web. There are no inline links; they must be represented as list of links. Gemini has only three levels of headings, unordered lists, and block quotes, and that’s it. It has no CSS, and thus the styling is up to the reader. It has no Javascript, which adds the benefit of privacy and lightweightedness.

Sure it is restrictive, but isn’t the essence of static websites its simplicity?

If you want your website be dynamic but lightweight, try the Hypercore protocol. It is basically the same as the HTTP protocol, but operates on a peer to peer basis. This opens up some new restrictions. First, your website should be able to be distributed with the limitations of your own bandwitdh. The website is has a lot of jargon for me to comprehend, but I think that it’s a neat idea 🙂.

Things I like about the web

Despite the weird things happening in the internet landscape, I think there are some things I like about web development!

First, HTML+CSS is one of the most robust toolkit for designing user interface. It is the appeal to tools like Electron and Tauri for building cross-platform GUI applications.

Wait, that’s not about web development.

Elm has a really good idea on architecture, however I wish it isn’t so functional. Same with Mint. Javascript is not just a functional language, but it is also an OOP.

Kotlin looks cute! I have not tried it outside of writing Android applications^{† †} Writing Android applications is a nightmare, btw. The documentation is complete, but it is so unreadable to me. Youtube videos does not help. . With its strong typing, it is one of the most feasible programming language as a replacement to Javascript. Brython comes a close second, except you have to include a separate Javascript library to make your Python code run. I want a compiler, not an interpreter. I think that your webpages should be renderable even if your Javascript code fails.

With the advent of Web Assembly, any compiled language could target Wasm and we could stop all of these nonsense. I wish my package manager was like Cargo but as rich as npm. I wish I had the power of something like Haskell and Scala and Python and other nice things Javascript could have been. Any language that doesn’t have the same thing as this in Javascript and I would’ve been fine with it!

But we are stuck with Javascript. Forever. 👻

The end.

/rant