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:
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.
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.