I did a quick little course on CSS variables on Scrumba today because of an article I read on dev.to
What: Making triangles using CSS
How: The basic idea is a box with width and height set to zero.
You set the four borders, three of which you make transparent.
Border-width then decides the size of the triangle and giving the different sides different border-widths changes the shape of the triangle.
What: Refine edges > Apply > Done!
Where: in Affinity Photo
A client wanted his name as his logo in a handwritten style. He was thinking of a handwritten font; I asked him to actually write his name for me because if you want personal, it’s often good to be personal. He wrote his name for me on paper, took a photo of it and emailed it to me.
I did all the obvious things: increase contrast, select the light background with the Flood Select Tool, Invert Pixel Selection, copy and paste it to a new layer. So far, so good. It looked smooth.
Alright, obviously I won’t be changing all the photos on my website whenever I change my color scheme, so giving the photos a little color in CSS would be so much nicer. And in the night I thought: just use ::before and ::after with blend modes, then you won’t need to add any HTML (so no child theme needed) and you can make the photos look however you want with CSS.
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>.
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
Short article with links and brief descriptions of places where you can learn how to code.
Title: 7 ways to start learning how to code right now for free
Of note: Free. Old article so not very up to date. Not all of them are actual online places to learn to code
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
Also, I like a video here and there but prefer a text, code examples and the occasional well-placed GIF.
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: @ dev.to by Carlos Caballero
Of note: you can build all these things again when you’re trying to learn a new language.
The 7 suggestions:
- To-do app
- Products admin dashboard
- Card memory game
- Paint software
- Make a bot
- Messenger clone
- Chess engine/Chess game
Thoughts: A Poetry Twitterbot as a Blindschelders & Raadsman project? With photos or videos? Without?