Archive of: 2021

• Working more with loading JSON

  March 24, 2021

  I wanted to try building another layout for the data that I loaded in my Final Fetch post I did on the seventh day of this challenge. I learned how to reverse order list elements and tried out flex box's reversing as well.

• CSS Only Tooltip

  March 23, 2021

  Tooltips can be pretty handy and I've never given making my own a try. I tend to stick with the title attribute on elements and have never tried to build my own tooltips. I still need to tweak and improve the fade-out animation.

• 100 Days of Code - Week 6

  March 22, 2021

  This week I tried recreating some neat link styles I saw on the Field Notes website, tried out Josh Comeau’s full-bleed grid tutorial, did a quick refresher on variable fonts, and tried out a few other things with CSS, SVG, and JavaScript.

• 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.