Images and ::before & ::after

I learned today that the pseudo-elements ::before and ::after don’t work with the img-element. As I went looking I found out that the CSS spec is very unclear on this. It has to do with the fact that <img> doesn’t have its actual content on the page/in the HTML, it pulls it in from elsewhere. This makes it a replaced element. Form elements are also replaced elements. It is also an empty element, like <br> and <hr>.

Rule of thumb (for now) seems to be that empty elements can’t have ::before and ::after applied with the exception of <hr>.
Other empty elements with which ::before and ::after wont work (may) include form elements and <br>.

Photo by Jack Krasky on Unsplash


I wanted a duotone effect on the photos on this site and at first I thought I would like to create it through CSS but what I found seemed to require adding extra HTML, which isn’t something I want to spend my time on for this site (I’m using GeneratePress and I’m not in the mood for a child theme at the moment), and as I was searching for different ways to create the effect, I came upon this little tutorial for Photoshop.

Title: Digging into Duotone: How to Create & Use Colorized Images in Web Design

Read moreDuotone

Little crash course for Frontend development

At the end of this article there was suddenly a mention of a free online crash course for anyone curious about frontend development.

Title: Frontend Development Crash Course

Where: @ Skill Pathway

Of note: Free

It all looks polished. There is 4 hours and 20 minutes of video material. You’ll learn “HTML, CSS, SCSS, Bootstrap 4, Git, Github Pages and a sprinkle of JavaScript and jQuery.”

Thoughts: It looks like in some ways it’s too close to my current level which feels a bit like a problem I keep running into, either I know 80% of the material already or I have no idea what they’re talking about and it’s too hard. I know I’ll learn something new if I take the crash course but I’m looking specifically for something with more than a sprinkle of JavaScript.

Also, I like a video here and there but prefer a text, code examples and the occasional well-placed GIF.

What to build

Little article about what to build to challenge yourself, learn more and build a portfolio.

Title: Do you want to be a Top Developer? You Must Build Things! – 7 Apps to Build

Where: @ by Carlos Caballero

Of note: you can build all these things again when you’re trying to learn a new language.

The 7 suggestions:

  1. To-do app
  2. Products admin dashboard
  3. Card memory game
  4. Paint software
  5. Make a bot
  6. Messenger clone
  7. Chess engine/Chess game

Thoughts: A Poetry Twitterbot as a Blindschelders & Raadsman project? With photos or videos? Without?

Photo by Ethan Hu on Unsplash