Codevember - a currentColor practice

Last month I participated in Codevember, which is a challenge to code every day in November.

See the Pen 2019 Codevember by Katy DeCorah (@katydecorah) on CodePen.

Set up

Before I started the challenge, I knew that I wanted to build a collection. To keep my collection consistent, I created a border CodePen that I referenced in each daily project:

See the Pen 2019 Codevember - border by Katy DeCorah (@katydecorah) on CodePen.

Challenges

To keep myself challenged, I also decided to stay strict to:

• a color scheme currentColor and white.
• a single div.

Using currentColor afforded me flexibility in changing the color scheme, especially in adding a color picker to the first CodePen.

I found that in Chrome you need to trigger a repaint when switching currentColor on background and I was able to do so with:

div,
div::before,
div::after {
  /* trigger repaint */
  outline: 1px solid;
  outline-offset: 51vmin;
}

The code looks inelegant, but was the best way I trigger a repaint without affecting the elements.

Too much code

I’m glad I tried out Codevember, but I think this will be my first and last. Coding every day for a month is too much code. I also didn’t have enough free time to visit projects made by other participants, which didn’t make me feel as connected to the spirit of the challenge. I’m looking forward to next year’s Codevember, where I’ll be cheering from the sidelines.