Archive of: 100daysofcode
-
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.
100daysofcode, CSS, HTML, JavaScript
-
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.
100daysofcode, CSS, HTML, JavaScript, fullscreen api
-
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
-
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