Today I Learned HTML, CSS, JavaScript & PHP Tue, 25 Feb 2020 23:40:23 +0000 en-US hourly 1 scroll-margin-top Tue, 25 Feb 2020 23:40:20 +0000 Read morescroll-margin-top

What: CSS-Tricks just posted about this last Friday and since I could have used this that day (!) but didn’t find it until now, I’m adding a note here for myself:

You have a page with a table of contents (with links), or you have a one page website with in-page navigation and you have a fixed header — when you click a link the content scrolls up too far and is hidden by the fixed header. This is not a good user experience, and you can improve it with scroll-margin-top.

How: Use scroll-margin-top on the item that is being covered by the fixed header, like so:


header { position: fixed; top: 0; width: 100%; height: 6em; }
h3 { margin-scroll-top: 6em; }


<header>My fab website</header>
  <nav class="table-of-contents">
      <li><a href="#topic-1">Topic 1</a></li>
      <li><a href="#topic-2">Topic 2</a></li>
      <li><a href="#topic-3">Topic 3</a></li>
    <h3 id="topic-1">Topic 1</h3>
    <p>A whole bunch of text.</p>
    <h3 id="topic-2">Topic 2</h3>
    <p>A whole bunch of text.</p>
    <h3 id="topic-3">Topic 3</h3>
    <p>A whole bunch of text.</p>

Where: as said, Chris Coyier wrote about it @ CSS-Tricks

Thoughts: Support is very good with the exception of IE, which has no support.

On Friday I decided, since it was a rush job and I didn’t have time for complex hacks or prolonged research, that in this case the table of contents was more important than the fixed header and I nixed the fixed header. I might go back and reinstate it…

Photo credit: Photo of dusk at the Hudson River, NY NY, looking towards New Jersey. By me.
]]> 0
Counting Down an Unordered List Fri, 14 Feb 2020 17:47:02 +0000 Read moreCounting Down an Unordered List

What: You have an unordered list and you want to turn it into an ordered one through CSS

How: You can do this with CSS 2.1 and the counter element. Yay! I love CSS.

#koko-analytics-most-viewed-posts-2 ul {
	list-style: none;
	counter-reset: li;

#koko-analytics-most-viewed-posts-2 li::before {
	content: counter(li);
	counter-increment: li;

Why: I can image you’re wondering WHY?! Just use an ordered list!!! Yes, I know, I agree, however…sometimes you can’t. Koko Analytics, a privacy-conscious WordPress plugin that does simple site analytics extremely well and I love this sweet plugin for it, now has a wonderful widget that lets you show your most popular posts.

The HTML for it, like with any widget, is generated for me and it’s giving me an ul to work with. I have no control over that (well… I do, but you know what I mean) but I can easily add some CSS in the customizer. And I think a top 5 of anything is a good moment to turn an ul into an ol. So I did.

Where: There is a good and clear article by Roger Johansson on the adjacent topic Styling ordered list numbers

Thoughts: As said before, this is not how I would usually make an ordered list, of course! This post is just a good excuse to celebrate the existence of the CSS counter because it is awesome and you can use it for fabulous things like numbered chapters, numbered steps in a form, numbered anything!

Photo of viking ship inside the viking museum in Oslo, Norway by me
]]> 0
Hosting Assets: Do It Yourself? Wed, 12 Feb 2020 22:31:17 +0000 Read moreHosting Assets: Do It Yourself?

I have started hosting more and more of the assets for sites, like web-fonts and JavaScripts libraries, stats, with the sites themselves instead of using a CDN / third-party service, largely because I was starting to feel squeamish about my role in helping tech giants follow you across the internet.

This is a process and I’m not a purist, yet. So on this site, as an example, I’m still using Google fonts, served to you directly from Google. This is a WordPress site and I’m using GeneratePress rather than a custom-build theme, because of the time gain it gave me when I set it up. This blog, when I started it a few months ago, was an experiment. I wanted to see if the format would work for me, before I invested my time in designing it. But theme customizers in themes like this rarely allow for custom fonts. And on the rare occasion that they do, Astra has an integrated plugin for example, it has been a hassle to get it to work.

So doing things manually, like with this beautiful service: Google Webfonts Helper, or Font Squirrel (that I always used before most of my sites were made with WordPress), and then adding your own CSS is the best option, but I haven’t yet had a chance to make that change for every single website I have ever used Google Webfonts on, including this one.

And then I came across the article Should you self-host Google fonts? by Barry Pollard and things became a whole lot more interesting.

As another reason to self host he adds speed, of course; loading times matter. There’s more to it, but he makes a good point about HTTP/2:

The theory behind this was that browsers limited the number of connections to each domain (typically to 6 connections) so using another domain gave you 6 more connections. While that may have been true in the past (particularly when browsers limited it to less than 6 domains) and before HTTPS became the norm, now connections are expensive to create. Additionally HTTP/2 actually benefits from one connection (mostly!) so using other domains is often a performance cost rather than gain.

Barry Pollard

This, I’ve found, is true, but when I saw the increase in loading times Barry had from switching to self-hosted, I was still a bit shocked: 3 seconds!

Anyway, he does a little more than just a straight up switch, as I’ve been doing, but the biggest improvement is no longer having to wait for Google’s stylesheet.

If you want to know more, definitely read his article, he has all the nitty-gritty worth knowing and it’s a good read!

Photo of Central Park from a top appartment in the Dakota, by me
]]> 0
Always Include Widows and Orphans Tue, 11 Feb 2020 17:38:08 +0000 Read moreAlways Include Widows and Orphans

What: Widows and orphans in CSS refer to leftover lines at the beginning or ending of a page, when you’re printing a website, or to the leftover lines at the beginning or ending of a column when you’re using multicol.

How: You suggest the number of lines left on a page if a paragraph is split across a page or column. For example:

  h3 {
    orphans: 3;
    widows: 3;

Where: The article Orphans and Widows in CSS by Toby Osbourn on

Thoughts: Support is good across browsers, except, oddly, in Firefox, there is a 16 year old open bug report that got some attention two years ago and there doesn’t seem to be any reason why this hasn’t been implemented, except that it just hasn’t. I have to say I’m disappointed in my favorite browser.

On a more personal note, I came across this in one of my own stylesheets for a website I hadn’t spend any time on in the last two / three years and I have no memory of putting them in. I had to look up what it was.

Good article on multicol by Rachel Andrew can be found at Smashing Magazine.

Photo of Haystack Rock at Pacific City, Oregon by me
]]> 0
Joy Mon, 10 Feb 2020 04:23:41 +0000

I recently updated the links page on my personal website, something I hadn’t done in years, and there were some broken links there but I also stumbled again across

I removed it from my links page, largely because the first thing you notice is that your browser is blocking popups. When you look at what’s being blocked it’s

Does that sound scary? It isn’t. Control here means navigation. The website navigation is being loaded in a popup menu. I invite you to go over and see, and allow the popup, it won’t harm you and won’t show you any ads.

The website is by Auriea Harvey, the email address, no idea if it still works, is, which I truly think is worthy of mention, and the home page has, right in the middle, a nice, gray ‘Netscape now 3.0′ button that leads, or once led, to the Netscape download page.

The site is made with framesets and I had a sudden horrible stab of missing working with them, updating different frames in the set to show a different submenu, different page content. No one ever told me to stop using them, but there are good reasons not to and so I stopped because it felt right and I haven’t missed them since. Until now, simply because I suddenly saw again how much fun it is to play with them, and sure you can use AJAX to load a whole page into a div but the sweetness of framesets lies in the ability to create that functionality using just HTML.

It’s alright, the moment passed. is a site, one of many, that influenced me very much when I started making websites, because it is filled with a love of beautiful things, curiosity about the new medium and a certain daring, and maybe a touch, just a very small touch, of anarchy. It’s internet art but most importantly, it is an invitation to explore.

I replaced the link to her website with one to a project of hers that she made with Michaël Samyn: The Endless Forest. They made it a long time ago with a new version in development that should make it available for Linux and Mac as well. In it you are a deer, running around and meeting other deer, but you can’t communicate with words and you just run around a beautiful forest. I love it, I’ll play it after a stressful day. It’s pretty and sweet.

Not every website needs to be an invitation to explore the wild, wondrous mysteries hidden inside, most just need to be a nice, clean communication of someone’s message, serve a goal for a charity, or help a business provide a service. But even personal websites don’t seem to be wild and wondrous or mysterious anymore, or at least, not often enough. Most seem to either be diaries or photo albums. And they can be wonderful, but they are, by and large, not mysteries to uncover.

After looking at Harvey’s old website, I dusted off my old website again and looked at all the broken parts: It also uses popups to show relevant content, haha, Flash, and has a ton of broken links that need cleaning out, also, the random link functionality needs tweaking. But I’ve started reviving that website–the last time I worked on it was almost exactly ten years ago–for starters by switching to HTML5 and cleaning up the old JavaScript and rejuvenating some of the CSS. I think next should be the pruning of and adding to the link list.

This part of the web has declined but it isn’t dead yet and I will be a part of it.

Be curious, not just about the next new technology but how you can play with websites. How many different ways can you communicate? What other esthetics are there to use? How many different ways can something be useless, or pointless, but still fun or interesting?

Experiment and tell me about it! I would love to hear from you.

]]> 0
Auto Sizing Font-sizes Tue, 28 Jan 2020 02:52:38 +0000 Read moreAuto Sizing Font-sizes

What: Changing the font-size and the line-height based on the width of the viewport but without using media queries, to create a smoother experience (with less work).

How: By making both the font-size and the line-height relative to the viewport width, like so:

body {
    font-size: calc(1em + 1vw);
    line-height: calc(1.2em + 1vw);

You can set a base font-size in the HTML, the codepen in the article sets it at 12px. Which is, I guess, a mobile first approach.
There is another method mentioned in the article too.

Where: Molten leading in CSS by Chris Coyier @ CSS-tricks

Thoughts: I might want the line-height to be a lot bigger.

Photo of the Geuzenkade in Amsterdam by me
]]> 0
More on Color Tools Wed, 22 Jan 2020 19:29:08 +0000 Read moreMore on Color Tools

I recently wrote about the disappearance of 0to255 and what to replace it with and today I found another very versatile tool for color: calcolor.

Most common tools to create palettes, I don’t really like. The color combinations that apparently are scientifically sound, I often find depressing, so usually I use coolors, where I can mix and match with my space bar until I’m happy.

calcolor also has a palette function but it’s mostly of the kind that depresses me. An example: Recently I had to do a redesign of a website, one of the things I had to keep of the existing site was the color #A4CFA1, a soft green. This is what calcolor’s palette function does with that:

A screenshot of a palette with the main color #A4CFA1 at
A color palette I can’t imagine using on a live website.

I probably just don’t know how to use palette creators like calcolor to my advantage but for situations like this, coolors is perfect for me.

What I love very much about calcolor and makes me think I will use it often, is:

  1. The blend mode doesn’t just blend in equal steps to black or white, you can blend in equal steps between any two colors.
  2. You can pick a random color and play with it.
  3. It gives interesting color information.
  4. It looks pretty.
This screenshot shows the blending in 10 steps between color #33ff99 and color #ff3399 on the website
Blending in 10 equal steps from one color to another.
]]> 0
Writing less. Tue, 21 Jan 2020 00:49:34 +0000 Read moreWriting less.

A nice old (2016) video of a talk by Heydon Pickering about writing less code. It’s smart, funny, and I agree.

This is, beyond the general concept, what I took from his talk:

body {
    font-size: calc(1em + 1vw);
.grid {
    display: flex;
    flex-wrap: wrap;
    margin: -.5em;
.grid > * {
    margin: .0em;
    flex: 1 0 10em;
.view {
    display: none;
.view:target {
    display: block;

And also, this resource:

Photo of Marykitty at the breakfast table in Loncoln City by me
]]> 0 has disappeared Fri, 17 Jan 2020 16:03:58 +0000 Read has disappeared

My favorite color tool for years and years, the one I’ve used most consistently of any of the tools I’ve used, has been offline now for three weeks and my best guess is that it’s gone for good. One day I used it, all was normal, no notices, nothing, and the next day, it was gone. It left me a little stunned.

0to255 was a tool I used for every project I worked in, in the developer’s own words: “0to255 is a color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more.”
And it was, perfect for shading, perfect for fine-tuning your colors, perfect for me.

For the last three weeks 0to255’s disappearance left a gap in my workflow that I didn’t know how to fill. One makes do, it was fine, but today, I came across a good alternative:

Screenshot of the Tint & Shade Generator

It’s not as pretty as 0to255, it’s not quite the same, but it is close, very close and it works and I’m very grateful to have found it. I’ll fill the gap left with the Tint and Shade Generator, a worthy replacement.

Much love to, thank you for all your years of service, thank you kind developer who left it up and functional for so long, I love you!

Thank you Tint and Shade Generator, much love to you, and thank you kind developer for all the work you’ve put in, much love to you!

]]> 0
More Flat-File CMSs to Choose From Tue, 24 Dec 2019 03:39:58 +0000 Read moreMore Flat-File CMSs to Choose From

There is a first post with a list of flat-file CMSs and this is the second one. Of this list, I haven’t yet installed any, or tried to built a site, I’ve just tried a few of the demos. A quick list of flat-file content management systems with relevant notes and impressions added.

  • FlatPress ⋅ FlatPress has recently been revived and is receiving updates again
  • GetSimple CMS ⋅ I can’t believe I missed this one the first time around; been around forever and it is still getting updates though they seem to be slowing down. On the plus side, for some: it’s included in Installatron
  • Pluck ⋅ The interface looks a little dated but it works well, and is very simple to use. This is still receiving security updates
  • SingleCMS ⋅ This one is new, it launched this year, and you have to pay for it: you pay $39/year per domain. It has a nice front-end editor
  • Sitecake ⋅ This one seems a little different. The content is directly part of the HTML page, in that sense I’m not actually sure it is a CMS (since there is no separation of content and the actual page, with reusable templates) but you can make new pages and edit the pages online.
  • Yellow ⋅ Yellow seems very sympathetic and easy to use. It’s pretty and perhaps a little too minimalist almost but I’m very tempted by it.
  • Bolt ⋅ Not really a flat-file CMS because it uses a SQL database but it is SQLite. Well documented and actively development. Looks very good, and easy to use.

Photo of a butterfly taken at Mount Hebo, Oregon, by me
]]> 0