HTML, CSS, JavaScript & PHP
I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn’t figure out why.
The CSS I was using for the items in my grid was grid-template-columns: repeat(5, 1fr) and it clearly wasn’t working. Why not? And what to do about it?
I received 60 documents to put online, beautifully named, but with SPACES!!! Aaaah!
Thankfully, you can bulk remove them in a powershell: hooray! This simple, understandable and beautiful solution on Stack Overflow shows you how:
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 in Firefox and Chrome-based browsers…
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?
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.
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.