Archive of: 2021
-
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. -
Tricky times with CSS Grid
March 13 2021
Moo Mini Cards are a great way to get some of your photos printed. They used to make a nifty frame, that fit about 20 or so cards, that allowed you to place mini cards inside in landscape or portrait orientation. I tried to recreate the style of the frame using CSS grid, and I am scratching my head at the moment. I don't think I'll get it working right today, so I'll give it a try some other time. -
Trying out a glitch animation
March 12 2021
I wanted to try to make a glitch animation using CSS animation. It didn't turn out looking too good and my approach probably isn't the best way to do it. I'll give it another shot some other day. -
Animating with audio playback
March 11 2021
Today I wanted to try animating text based on the time elapsed within an audio element. I was wondering if animating a transcript for a podcast could be an entertaining way to provide a more visual presentation for readers of a podcast's transcripts. Making animation an option and not a default would be how I would approach it. Adding in some animations could help add the podcasters' personalities to the transcripts. Now I just need to figure out how to load in a transcript to help with the animation process. What I did today was far too tedious and not ideal for a 30-plus minute podcast. -
Video Graphics Done With HTML, CSS, and JavaScript
March 10 2021
Today I wanted to try displaying and hiding elements placed on top of a video within a grid using JavaScript. It's a decent first attempt and it will be fun to work with in the future. -
100 Days of Code - Week 4
March 9 2021
Another week of the 100 Days of Code challenge down and many more to go. I wonder if what I’m doing is beneficial or worth sharing, but I know every bit of practice helps.
-
Shifting Position Within A Grid
March 9 2021
Today I wanted to see how easy would it be to move an element around on a grid using arrows keys and buttons for touchscreen devices. Turns out it is a bit trickier than I anticipated in terms of tracking the correct values, but I was able to eventually get something working with some code I put to use in my style customizer prototype. I manipulated CSS variables/custom properties to update the position of the yellow square within the grid. I wonder what I'll be able to build on top of this in the future. -
Mock Recipe Listing
March 8 2021
I cannot recall every doing any sort of mockup or prototype of a recipe listing. I think it would be fun to build one that has some animated elements and helps the recipe's viewer keep track of what they have completed so far and the ingredients they need. I think I'll do more with this at a later time and hopefully put it to use on this site if I ever post some recipes.