Archive

• Improving my Background Color Changer

  March 22, 2021

  I added some simple checks to the input fields on yesterday's Simple Background Color Changer and made some tweaks that I hope help on a mobile screen size. I should make it shift focus back to the element that changes once the functions have completed.

• Simple Background Color Changer

  March 21, 2021

  After trying to figure out if it was possible to extract and display an image's metadata in the browser with only JavaScript, I discovered it wasn't as easy as I hoped. So I built this instead. It's nothing special, just extra practice extracted values from inputs and concatenating them into something usable. I didn't do any checks on the values entered, but it won't work properly unless hex color values are used.

• Text on a path in SVG

  March 20, 2021

  I wanted to do a quick refresher on how to add text that displays along a path in an SVG. While working on this, I came across something I had not encountered before. When placing a link within the text, in order to alter it's color you have to modify its fill attribute, not its color.

• CSS Triangles and the Details Element

  March 19, 2021

  I cannot remember if I've ever made triangles or arrows with CSS before, so I thought I'd give that a shot today. I saw them mentioned in an article on CSS Tricks that talked about animating the arrow in the summary element. I took a shot at that as well.

• Variable Font Refresher

  March 18, 2021

  It has been a bit since I worked with a variable font, so I wanted to work with it again today to help myself remember how to make use of them. Jason Pamental's resources over on his website (rwt.io) are always helpful, so take a look!

• Full-bleeds in CSS Grid

  March 17, 2021

  A couple weeks or months ago I saw and briefly read over Josh Comeau's post about how to do a full-bleed using CSS grid. The layout features a full-bleed class to pop elements out of the grid and drawing more attention to them. I'd like to see how I could put something like that into place on my site, so I tried out the CSS Josh shared in his article.

• Fun link styling

  March 16, 2021

  While checking out the Field Notes website to see if the 50th edition had gone on sale yet, I noticed a fun bit of styling they did on a link within their dispatches page. Their version made use of an SVG, but I went with an HTML entity within my version. It's a nice little effect. Their team did a great job.

• 100 Days of Code - Week 5

  March 16, 2021

  

  This past week was full of new challenges. I got stumped a couple of times and had to decide to call it good on a few posts, but I think I learned quite a bit.

• Making Faces - SVG and JavaScript

  March 15, 2021

  After spending some time away from the code I wrote yesterday and reading a very useful article, I was able to finish this silly prototype. I noticed I had some pretty gnarly typos in my JavaScript yesterday that I'm embarassed to point out, but I am know going to make sure I double check my namespace URIs.

• Playing with an SVG of my old logo

  March 14, 2021

  How hard is it to add an SVG element that makes use of the USE element to place another instance of an SVG symbol into a document using JavaScript? Turns out, it's tough. At least for me at this time. So instead I made my old logo animate when hovered over. This probably won't work on mobile, but at this moment that's ok.