What: Say the background of your website is white and you want, for example, a different color header, full width, with content inside the header that’s contained at a lesser width, and centered. Common enough scenario and usually created with one HTML-element (div, section, …) at full width and with a colored background and one HTML-element (div, article, …) with a fixed width and centered, holding the content.
Trying out a new plugin
What: I’m trying out Koko Analytics by Ibericode on this site and on a client’s site. Just two months ago I did a big search on privacy respecting website analytics and couldn’t find anything much of anything that looked promising, especially for potential clients. This looks very promising.
Redirecting to HTTPS
This gave me an internal server error:
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]But this worked:
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]Or, a variation, this might work too:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301][Source]
Photo by Rubén Bagüés on Unsplash
Tweaked my expires headers
I’m adding this to my .htaccess file at the moment:
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# Favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
# PDF
ExpiresByType application/pdf "access plus 1 year"
# CSS
# ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"Photo by Crawford Jolly on Unsplash
Old Enough for Nostalgia
Just thought I’d document what I’ve been reading recently because I’m starting to see a theme here. It’s not a technical Today I Learned, but these articles are making me think about how I see websites and also how my ideas on that have changed.
Styling placeholder text
Not something new I learned, more something I keep forgetting over and over.
::placeholder to change how placeholders look. You’d think I’d remember something so obvious…
If it’s not working, this post over at CSS-Tricks may have some more information on why.
(Actually, what that post taught me, is that there is a difference between pseudo elements and pseudo classes!)
Photo by Vivek Sharma on Unsplash
Pretty lists!
What: Firefox 68+ and Safari 11.1+ support the pseudo-element ::marker yay! Chrome doesn’t yet, and neither do Edge or IE11. It will allow for:
li::marker {
color: #ff3399;
content: "-";
}Not just on list-items either, but also on elements with a display: list-item.
CSS-Tricks has more about this: Finally, it Will Be Easy to Change the Color of List Bullets.
Photo by Max Rovensky on Unsplash
Solving hashes-x.x.x.php missing
I had to clean up a hacked WordPress site recently and one of the steps I took was to scan the entire site with Automattic’s Exploit Scanner.
It needs a hash file for the version of WP you’re scanning and since it hasn’t been updated in 2 years or so, it doesn’t have them. WordPress has had several security updates since, so the plugin doesn’t even have the hash files for older versions of WP. This is easy enough to solve since the plugin itself comes with a hashes-generator.php.
Hooray for text-decoration: underline!
For years the first thing I would do on a new project is add a { text-decoration: none; } in some form or other to the styling of any website. However I was going to make links look, I was not leaving that offensive-looking text-decoration:underline; in place.
But text-decoration is growing up and browser support for the new options is improving, including, for example, the increased support in the recent release of Firefox 70.
My favorite feature is that underline can skip glyphs now, if you want! Followed almost immediately by my second favorite feature: text-underline-offset: <length>; There are more options than just <length>, read more on text-underline-offset here at MDN web docs. Between these two text-decoration: underline; can actually look classy.
Unfortunately, support for text-underline-offset is even less: Firefox and Safari at the moment. Glyph skipping specifically is supported much better with text-decoration-skip-ink in Firefox, Chrome and Opera. And most browsers now support a shorthand version of text-decoration which can also set color. Lovely!
Read more about all of it at MDN web docs.
Photo by Photos by Lanty on Unsplash
:last-of-type but only if it meets other conditions as well
.gallery-item:nth-of-type(3n+2):last-of-type
I was working on a gallery with rows of 3 items per row for which the markup contained <br> after every third .gallery-item and the CSS used floats. It didn’t look how I wanted it to and needed to change it anyway, so I decided to also get rid of the floats and break-tags and use display: flex instead.