Archive of: 2021

• Making Moving Bubbles

  March 7, 2021

  Building upon what I made yesterday, I have made the bubbles animate and move upwards and hopefully outside of the viewport. I'm going to work on making the bubbles poppable in the future, but it will have to be done on a different day. I want to make the animations more dynamic as well. At the moment they're just animated via CSS and the specific animation assigned to the bubbles is based on whether they are odd or evenly numbered.

• Making Bubbles

  March 6, 2021

  I played around with randomizing the position of bubbles made from a string taken from a text input. I'll do more with this idea at a later time, but I'm happy that I have the first few steps out of the way.

• Playing with backdrop-filter

  March 5, 2021

  The other day I saw a nifty tool for web design, Glassmorphism CSS Generator (glassmorphism.com), via a tweet from Andy Clarke. It introduced me to the backdrop-filter property, so I thought I would take the time to use it and learn about it. I had to enable flags withing Firefox to get it to work, but it's pretty handy.

• Picture Element Practice

  March 4, 2021

  I've been wanting to get more familiar with the picture element and the srcset attribute, so I made use of a photo of this little bird I spotted on a wire outside my window today. The photo should be square if your device is in portrait orientation, and the photo should be a wide crop if your device is in landscape orientation.

• Object-fit and scaling images within an overflow container

  March 3, 2021

  I'm still not used to using object-fit, so I wanted to play around with it a bit. I made use of it in this post along with transitions to try and recreate this effect I've seen on a number of sites. I'm not sure if this cannot be done with a background image as well, but I took a shot at it using just an img and overflow:hidden set on the wrapping picture element. Something feels wrong about applying the overflow to the picture element, so I probably wouldn't use this same technique on a live site

• Simple Flexbox Header

  March 2, 2021

  I did some practice with Flexbox on Treehouse today and thought I'd try reworking the practice that I followed. I made sure to make use of the supports feature query, and I tried nested media queries this time around. It looks like they worked!

• 100 Days of Code - Week 3

  March 1, 2021

  I’ve made it through another week of the 100 Days of Code challenge. There’s nothing fancy within these posts, but I did learn a few new things related to CSS and JavaScript this week.

• Simple Button Animation Name Swap

  March 1, 2021

  I wanted to see how difficiult it might be to swap out a button's animation. Turns out it is not as difficult as I anticipated. I learned about the CSSKeyframesRule via MDN today, so I think I'll find a way to make use of it for something like this rather than the approach I took today.

• Adding more books to the bookshelf

  February 28, 2021

  I did a quick review on arrays today and the practice got me thinking about how I might approach adding books to yesterday's bookshelf. Unfortunately I didn't use any arrays in what I ended up building and I made use of prompts instead of a modal when prompting for information about the book that would be added. I had fun building it though, and the JavaScript worked after fixing 1 typo on a variable name. I'm quite proud of that.

• Goofing around with grid and more

  February 27, 2021

  Today I wanted to try and build a display of books that would animated when you hovered over them, and when you clicked on them they would display the cover image and more. I quickly got a bit discouraged at the thought of working through how complex that would be, so I went with something more simple. I was watching/listening to this week's new episode of You Look Nice Today while building this. It provided me with plenty of potential titles for books. I'll get back to finishing this idea at a later time.