What I learned during the third Ctrl-C Webpage Jam

As the third Ctrl-C Webpage Jam, which is hosted by ~gome, comes to a close, I want to share what I learned during this year's jam.

Last year, I wrote a basic task timer here:

It worked, but it was not pretty. This year, I decided to build on top of it and make it look and work better. The result is here:

Much better, isn't it? It even works fairly well on mobile devices.

Even though it looks very simple compared to modern websites, there are many small details that I had to take into account in order to make the page look and behave the way it does. CSS may be simple at first glance, but it has much more depth than most people realize. Unfortunately, it is also very easy to end up with a stylesheet that is basically unmaintainable.

I also practiced my JavaScript skills too. There were a lot of quality-of-life improvements that I implemented using JavaScript, such as the description field resetting after adding a task.

Here is an incomplete list of what I learned over the course of this jam:

• The viewport meta element is what disables that "desktop site" behavior on mobile
• CSS rules that normalize differences between browsers exist
• Similarly, CSS rules that reset a browser's default styling exist
• There are many CSS units that scale with the user's viewport and font size, and rem is one of the most important ones
• The px unit should not be used with fonts since it disregards the user's preferred font size
• Generally, it is best to design for mobile devices first since it is easier to scale up than scale down
• calc() and clamp() can be very handy when making responsive designs, although I did not find a use for the latter so far
• Margin collapsing exists, and the rules are, well, complicated sometimes
• HTML elements can either be block-level or inline-level content by default, but CSS can be used to change this
• It is not always clear whether labels above fields or to the left of fields are better
• Modern web browsers can do some client-side validation if the attributes for the input elements are specified correctly
• Using the 'timestamp' parameter of the callback passed to the requestAnimationFrame() function can be used to run code less often to conserve CPU time
• A friend told me about CSS Grids, and although I did not use them, they're pretty neat!

Yeah, that's a lot. I'll probably refer to this in the future if I ever forget something. That's the main reason why I write these gemlog posts, after all.

External links

Below are a bunch of links to pages that I consider to be the most important, as they provide information on subtle details that are easy to overlook.

I might go through these CSS exercises in the future, too: