TutsPlus Codepen Challenge 3

๐Ÿ—“ Posted


While reading my RSS feeds, the latest TutsPlus Codepen challenge popped up and naturally I checked it out. I was busy during the previous two challenges, but I was looking for something to occupy me at the moment so this seemed fitting. A day later, I created what you see below.

Itโ€™s not much, but I like it. I learned a bit about using inline SVG in CSS as a background image, hacked some pseudo-elements, and rebuilt a simple datalist clearfix without using Google (mostly from memory though).

One of the bugs I ran into was that I originally wanted to use the Globe with meridians ๐ŸŒ Unicode character inside the the h1:before { content: ''; } however in the process of this I discovered that Codepen has a nasty bug where they only support a subset of Unicode due to their MySQL version not supporting above 3-point Unicode characters.

The other bug I ran into was using inline SVG inside of my LESS CSS. Apparently if you use CSS classes inside your SVG then try to stringify that SVG inline into a background-image: url(โ€ฆ) property, it will try to render the SVG in the DOM. Iโ€™m not sure if Iโ€™m the only one to run into this, but it tripped me up and forced me to base64 encode the SVG after I was done with it and then use that inline in the CSS.

The bottom line is, I turned this:

See the Pen Codepen Challenge #3 by Tuts+ (@tutsplus) on CodePen.

โ€ฆinto this, without modifying any HTML or using Javascript :)

See the Pen Codepen Challenge #3 by Brandon Brown (@brandonb927) on CodePen.

It was a really fun experience and Iโ€™m looking forward to joining in on the next Codepen challenge!