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!