Archive

• Potential address for site footer

  April 8, 2021

  I wanted to try and sort out a quick and decent looking address element that I could use within this site’s footer. I think I almost have it and hopefully I can get it in place within the next few days.

• The Address Element

  April 7, 2021

  Jeremy Keith recently posted a link to a great newsletter about HTML, 30 Days of HTML. Every day they’ll send you an email about an HTML element and examples of how, when, and why you should use it. I haven’t worked with the address element in a while, so I thought I’d tackle it in today’s 100DaysofCode post. I also had not worked with microformats in a bit, so I wanted to make sure I had the different parts of my address labeled with the correct h-card microformats. It was fun and I need to put it to proper use in the next version of this website.

• Update links when audio plays

  April 6, 2021

  While listening to today’s episode of the Shop Talk Show, 457: CSS Colors Fun, HSL, Updates from Browser Land, Pseudo Selectors, and Responsive Design Questions, Dave and Chris discussed the experience of clicking on links that take you off of a page that has audio playing. I thought I’d give updating links when audio is playing and removing the target="_blank" when the audio is paused. I really like this idea and I think I’ll put it to use whenever I get more audio on this site. I’ll be sure to make it look much nicer.

• 100 Days of Code - Week 8

  April 6, 2021

  This past week was filled with experiments and practice.

• More Clip Path Practice

  April 5, 2021

  I can’t work with clip-path without looking up the syntax. I want to change that, so I thought today’s post would involve clip-path in some capacity. It may have just been for quick reference, but I think I found something neat in polygon clip-paths today!

• Sakura petals take shape

  April 4, 2021

  I had an idea for a 404 page that features sakura petals that initially form 404 and then gradually animate into random positions on the page. I got part of the way there today. I built it using parts of a page I made last June, Sakura petals falling with CSS and JS. I made that before learning more about JavaScript and was able to refactor a good portion of the code. I’ll want to build the page in a way that still looks great for anyone that visits such a page with reduced motion settings. Laying things out with grid feels a bit overboard, but I’ll figure out an alternative some other time. I like refreshing the page and watching the petals float away.

• Simple article with table of contents

  April 3, 2021

  It’s always nice to see a table of contents on a tutorial or long article. They’re even better when you can click on a link within the table to jump to a section within the article or tutorial. Some website even highlight the current section while you’re reading. Mine isn’t that fancy, but I got to work more with position:sticky and try out a few other ideas today. I’ll tackle the fancier version some other time.

• Trying a Secret of Mana-esque menu

  April 2, 2021

  I have been a fan of Secret of Mana for the Super Nintendo (Super Famicom) for a long time, and I always wanted to try to build something similar to the game’s circular menu system. I thought it was a clever idea when I first saw it. My version is far from complete, but it was a fun experiment.

• Trying out new ways to style margins and padding

  April 1, 2021

  I learned about a few CSS logical properties thanks to this article, written by David Bushell. I learned about the margin-block, margin-inline, and padding-block properties today and tried putting them to use in this silly post.

• First attempt at a scroll indicator

  March 31, 2021

  I’ve seen a couple of websites that had a nifty progress bar that changed/updated as I read more of the page. I wondered how tough it might be to build something like that for my site using just CSS, and it turns out to be a little tricky. However, the talented web developer and writer, Preethi Sam, had a handy pen on CodePen that showed one way to build a CSS-only scroll progress bar. I hit a snag on making the markers change from black to essentially transparent until they hit the primary bar, and then I realized I hadn’t assigned a background-color to the parent element.