Archive of: April, 2021

• 100 Days of Code - Week 9

  April 13, 2021

  Some of the last week’s post have been practical and some, not so much. I built my first clock, did some more practice with scroll behavior, grid area, grid template area, and the address element.

  100daysofcode, CSS, HTML, JavaScript, practice

• Search to remove

  April 12, 2021

  I wanted to try and build a search form that would place tags around the search terms found within the page, but I’ve had some trouble sorting how to do that. So I built a silly thing that just removes the words or letters you enter from the text within the paragraph. Pointless, but it’s one step towards a solution.

  100daysofcode, CSS, HTML, JavaScript

• Grid Area and Grid Template Area Practice

  April 11, 2021

  CSS Grid has been so interesting to me ever since I heard about it via Rachel Andrew’s book, Get Ready for CSS Grid Layout. It got me excited about working with CSS again. I haven’t made anything amazing with it, but it has helped me a lot in making attractive layouts. Today’s practice however, is not one of those! It’s just practice.

  100daysofcode, CSS, HTML, grid

• Finding the time and displaying it

  April 10, 2021

  Today I built a clock using HTML, CSS, and vanilla Javascript. It was a bit tricky to sort out some parts of it, but I had a lot of fun building it. I almost added in a simple transition that gave it a bit of a better initial transition from its static state to dynamic state, but it caused the second hand to over-animate when it hit 0.

  10daysofcode, CSS, HTML, JavaScript, time

• Scroll Behavior Practice

  April 9, 2021

  I originally wanted to try to do some interesting scrolling animation with this posts and layout a series of rectangles via Javascript that animated as the page was scrolled, but that’s far too much for about 10:30 PM on a Friday night. So I did a bit of scroll-behavior practice as a refresher and to double check how it looks and feels on an iPhone.

  100daysofcode, CSS, HTML, scroll-behavior

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

  100daysofcode, CSS, HTML, address

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

  100daysofcode, HTML, CSS, address

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

  100daysofcode, CSS, HTML, JavaScript, audio, links

• 100 Days of Code - Week 8

  April 6, 2021

  This past week was filled with experiments and practice.

  100daysofcode, CSS, HTML, JavaScript

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

  100daysofcode, CSS, HTML, clip-path