Archive of: 2021

• Learning about fluid typography and CSS clamp

  February 17, 2021

  I haven't ever worked with the CSS clamp function or the ch unit. After reading Andy Bell's tutorial mentioned inside this post, I thought I'd try them out and followed his tutorial for Fluid Typography. I've read a bit about clamp in the past and I'm excited to work with it more. Andy's article has some great resources, so be sure to check it out!

  100daysofcode, CSS, HTML, typography

• Web Audio API Practice

  February 16, 2021

  Today I'm trying to dabble with the Web Audio API. I've worked through the Basic concepts behind Web Audio API tutorial on MDN and I'm hoping this works. I couldn't properly test locally because of the cross-origin request for the audio file was blocked. I was able to get it working on this site though, and I think it'll be fun to work more with this API in the future!

  100daysofcode, HTML, JS, Web Audio API

• 100 Days of Code - Week 1

  February 16, 2021

  Last Tuesday I decided to start the 100 Days of Code challenge to help me get motivated to work on some personal projects.

  100daysofcode, HTML, CSS, JS, web dev

• Final Fetch

  February 15, 2021

  Oh boy, I had to make today's code tinkering rather troublesome. I think it turned out decent though. I wanted to work with Fetch API and use it to load data from my Treehouse profile into a page. I decided to display it as if I was a character in the Famicom/NES game, Final Fantasy. Click the update info button to load information from my profile into the page.

  100daysofcode, CSS, HTML, JS

• Flexbox and SVG traffic light

  February 14, 2021

  I learned about using the currentcolor keyword within SVG. It's a pretty handy keyword that allows you to pass color values from CSS into paths into SVG. I still have more to learn about it and its best uses, but it was neat to learn about it.

  100daysofcode, CSS, HTML, SVG

• Spinning Record

  February 13, 2021

  I've had a bit of headache while working on today's bit of coding. After spending some time learning about the dialog element, I was thinking about making something with that. However, it's not currently a fully supported standard and requires a polyfill to work across all browsers. So, I went back through some previous coding practice, and decided I'd try to animate a conic gradient. It did not go as easily as I hoped, but I have something that looks like a spinning record now. Actually it looks more like a radar display.

  100daysofcode, CSS, HTML

• Palindrome flip

  February 12, 2021

  Happy Lunar New Year to all! Today I wanted to play with a bit of DOM manipulation and flip today's date since it is a palindrome. This was fun to make.

  100daysofcode, CSS, HTML, JS

• Quiz Prototype

  February 11, 2021

  I've been thinking about building an online vocabulary quiz for the students that my wife and I teach English to every once in a while. So I built my first prototype. This was an interesting exercise and I feel like I will be able build out a viable version with a couple of more hours of work.

  100daysofcode, CSS, HTML, JS

• Playing with clip-path and an orange cat

  February 10, 2021

  Today I wanted to work more with using SVGs within the clip-path property. I spotted this cat earlier today while out for a walk. It was a bit shy, but I got a few good pictures of it. An unfortunate thing I just learned after creating this post is the path doesn't quite fit within the current layout (as of today, 2021/2/10) of these code posts, but hopefully I can sort out a better solution in the future. I tend to build each of these posts on a single HTML page outside of CMS, and end up having to make tweaks afterwards to make things display correctly afterwards. Ah technical debt, we meet again.

  100daysofcode, CSS, HTML, SVG, clip-path

• Practice begins anew

  February 9, 2021

  I'm starting up another stretch of daily coding posts. This is post 001 of 100 posts I hope to complete. Many of them may be one-off posts, but I'm hoping to learn a lot and put what I learn to good use.

  100daysofcode, HTML, CSS