What: Changing the standard straight quotation marks that the q-tag applies to whatever you want:
q {
quotes: "“" "”";
} Where: From the always useful Frontend Focus newsletter.
Photo by Kelly Sikkema on Unsplash
Transition on hover
What: If you put a transition on the :hover instead of on the :link, it only transitions one way. If you put the transition on the :link, it will transition each way. Usually this is exactly what you want because once you move the cursor off the link, the effect will be gradually transitioned back instead of being removed abruptly.
Photo by Hello I’m Nik 🇬🇧 on Unsplash
Shortcode & Autop
I have a little WordPress plugin I use on some of my sites and it employs shortcodes. The shortcodes are not self-closing and they are wrapped in more shortcodes. They’re nested shortcodes. Using them looks like this:
[ltabjes talen="Taal Language"][ltab taal="Taal"]
Content
[/ltab][ltab taal="Language"]
More content
[/ltab][/ltabjes]WordPress wraps p-tags around each of these shortcode tags, and adds more p-tags inside the shortcodes, adding more space than is wanted. All those empty p-tags are a drag. The shortcode_unautop function removes the outer paragraph tags, but not the inner ones. I don’t want to remove wpautop altogether because the content in the shortcode might still need it. How to solve this?
Choosing a Flat-File CMS
The static site generators that seem to be so popular at the moment are not all that appealing to me. I’ve looked at the more popular ones several times and I just can’t convince myself to invest any time in them. WordPress sites, which is what I’ve been building most over the last several years, aside from old-fashioned static sites, can really get on my nerves, both with how slow they are and how much maintenance WordPress itself needs to keep a site safely and functionally up and running. I’ve been eyeing flat-file CMSs for a while now because they’re fast, easy to install, and give my clients a way to manage content.
What: A quick list of flat-file content management systems for reference, with some of my thoughts added when I think those thoughts might be of use to me later. I did a lot of searching around today, a lot of reading documentation and some actual testing. These all seem to be actively maintained, have documentation and demos and/or are free (to try).
Yes, I Still Print Webpages
It’s been years since I had to make a print version of a webpage and support for page-break-before and page-break-after in Chrome seems to have improved in the mean time–even if I’m really supposed to switch to break-after (support for that seems to be lacking in Chrome, Edge, Safari and Internet Explorer).
I knew floats could cripple page breaks but I wasn’t using any floats so I wasn’t sure why it wasn’t working…
Make an Accordion with HTML
What: Make a functional accordion with HTML. CSS is optional for styling and no JavaScript is needed. I love simple, I love lightweight, less is more. And in browsers in which it doesn’t work, all the content is still visible, which also improves accessibility.
Speeding up local install of WordPress in XAMPP
My local installs of WordPress in XAMPP where excruciatingly slow, easily 5 seconds for each page load even with a clean install of WordPress. Local installs are supposed to make development in WordPress easier but 5 second page loads make it harder. I found solutions for this in several places and I’m linking one that has several of them in one answer on Stack Overflow.
Spacing in CSS pseudo-element content
A bit of an abstract title but I’m basically taking about:
h4::after {
content: "";
}
If you have just text in the content property, you can adjust spacing with the letter-spacing and/or word-spacing properties in CSS. Letter-spacing would even work if you have just icons but I had a combination of three icons and a word, and the letter-spacing I wanted between the icons pulled the letters of the word too far apart. You can’t use html in the content property of a pseudo-element like ::before or :: after, so is out.
What: I found my solution on Stack Overflow, see link below, where someone had given a pretty list of the different spaces in CSS as a solution to a similar problem.
Load CSS asynchronously
Came across a short and clear article about loading CSS asynchronously to speed up page rendering.
Animated Poems
Some History
Back in the days when it seemed as if one in five websites was built entirely in Flash, I would use Flash to animate poems I wrote. Inge Raadschelders and I did this together and we called ourselves Blindschelders & Raadsman. When Flash died we gradually stopped making them because there wasn’t an immediately obvious successor to Flash.