Archive

• Simple Spotlight

  April 17, 2021

  I wanted to try out a spotlight that follows the cursor’s position. It turns out this is fairly easy to do if you use CSS custom properties and the mousemove event. The spotlight is a little offset within this code post. I’ll have to sort out why in a future post.

• Spicing up links

  April 16, 2021

  I saw some fantastic link styling on a website called CSS { In Real Life }, designed and built by Michelle Barker, and I thought I’d try and figure out how to recreate it. I don’t think I’ve played with text-underline-offset before, and I’m glad I came across CSS { In Real Life } and its cool link styling. It’s subtle, but really stood out to me. I’m excited to put it into use.

• Practice with the IS selector

  April 15, 2021

  I’ve been hearing about the :is() for a little while now and wanted to try it out. It looks like it will be pretty useful for those times when I have an excess of selectors in the same declaration or set of declarations.

• Trying a keyboard shortcut with Vanilla JS

  April 14, 2021

  I haven’t ever added a keyboard shortcut to a webpage, so I thought I’d give it a try. I wanted to try adding one to the post I made yesterday. I ran into an interesting issue, it looks like I have to click within the browser window to be able to use the shortcut even if I have the page loaded. There’s always more to learn.

• Playing with the Fullscreen API

  April 13, 2021

  The great CSS Tricks never ceases to disappoint me. After just a few seconds on the site, I spotted a fantastic article, How to Leverage the Fullscreen API… and Style It written by Evgeny Klimenchenko, that taught me how easy it is to make an element fullscreen. I’m excited to try this out when I get more games made with PICO-8 and Voxatron games done and posted to my website.

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

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

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

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

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