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.

Read moreCSS triangles

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.

Read moreRefine edges in Affinity

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

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: @ 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:

  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