Do you want to speed up CSS file loading? Do you also see this waterfall chart in the Network Tab of your DevTools? There is a simple measure to help the browser optimize loading assets. Preload them.
I think it is superior to bundling. It is less complex and has better caching behavior.
Continue reading →
I am working on the <pico-viewport-stats> element
examples. The web site is a simple HTML page, which I stripped down to the bare minimum. A bit too much!
Continue reading →
<dfn>
HTML is getting more and more semantic it seems. I am seriously wondering what this means for building things like a blog, like this one here. It becomes more and more reasonable to write pure HTML, instead of markdown, doesn't it? Maybe I am just late and just learned about some HTML elements now. What a shame.
Continue reading →
On a friend's linkedin profile I saw some links to his content and since linkedin picks up in traffic and professional relevance, I thought I need to get my site's traffic better shareable.
Continue reading →
More HTML
provides a CBE (Customized Built-in Element) for upgrading heading tags such as H1, H2, ... to render a link-icon beside them, as many know it from github readme files.
I wanted to upgrade all picostitch sites automatically by just including a <script>
which upgrades all headings on the page and adds this functionality.
It is not possible to upgrade a parsed and rendered element (like an H1) afterwards.
Continue reading →
Below, I use the aliases grid-template-rows and grid-template-columns for grid-template:
Continue reading →
Finally I need a CSS grid. Here is my intro to it. If you prefer a video this one (28 minutes) explains grid basics very well. But before learning CSS grid, I need to answer the question if I need it. I know flexbox quite ok, so why not use flexbox.
Continue reading →
There is nothing new about websites being backwards compatible. The HMTL Design Principles from the W3C are from November 2007 and they are not outdated!
Continue reading →
I read the real book a long time ago, but I just moved this blog to use proper <aside>, <article> and alikes today, I had forgotten a lot. But I remember it being the best HTML(5) in depth I ever saw.
https://diveinto.html5doctor.com/ a must read!
Various HTML validator I found:
Continue reading →
<details> HTML element
Click below to see the code which creates this kinda dropdown, it is the <details> element.
Continue reading →
Wondering how to layout and use <section>, <h1>, <h2>, etc. I came across the first place one should read on MDN
Using HTML sections and outlines
also very insightful and more specific is this on the W3C wiki
HTML/Usage/Headings/Missing. If you have 27 minutes to learn how to use all those semantic tags watch Brian Haferkamp's
Semantic Elements and Structure a very well explained video.