I did a quick little course on CSS variables on Scrumba today because of an article I read on dev.to
CSS triangles
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.
Refine edges in Affinity
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.
@supports makes me happy
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.
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
Duotone
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
Codecademy?
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
Where: @ The Next Web by Harrison Weber
Of note: Free. Old article so not very up to date. Not all of them are actual online places to learn to code
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.
Photo by Alexander Mils on Unsplash
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: @ 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?