Archive of: JavaScript

• 100 Days of Code - Week 14

  May 18, 2021

  

  Cats, lots of cats this past week. I put a bit more work into learning about how to build an accessible slider, created a script for a grid-based gallery that swaps images into a feature area, and built a prototype for an archive of these 100 Days of Code posts.

• Working with toggles, cat photos, and classList

  May 16, 2021

  I’ve had a bit of success implementing a button that toggles the automatic switching of images, and I’ve added the ability to click on a photo to feature it. Just five days left until I hit 100 days straight of these types of posts. I’m going to try and take a bit more time to sort out what I do for the remaining five days.

• Cat gallery tweaks

  May 15, 2021

  Today’s version of the cat gallery does not move photos around and automatically switches out the photo every five seconds. I’ve disabled clicking on photos to change the featured photo until I can add the improved version to my script.

• Iterating through cats and JavaScript

  May 14, 2021

  The automatic switching of featured photos has been added and it appears to work well even after clicking on an image. I hadn’t check the last two versions of this post in Safari and I’ve applied my CSS fixes to this version. Next I’m going to improve how this works and make sure the layout and order of images is maintained as the images are swapped in and out of the featured area. Adding functionality to start and stop the timer will also be added in the final version. This has been fun and I’m looking forward to adding this to my site.

• Randomizing cat photos in a grid

  May 13, 2021

  Today I’ve added some randomization to set a random image as the featured image and added the functionality of switching out the photos whenever you click on one. I’m excited to get to work setting up the timer to rotate them in and out of the featured spot.

• 100 Days of Code - Week 13

  May 11, 2021

  Lots of posts about sliders (or carousels) this past week.

• Learning to build a better slider part four

  May 11, 2021

  The buttons now work to some degree, but I’m trying to sort out an odd issue with the previous button not working properly. The controls now show up only if JavaScript is enabled, which is pretty neat. I still have a bunch to do to finish this up. I may take a break from it for a couple of days and come back to it later.

• Learning to build a better slider part three

  May 10, 2021

  Didn’t get much further today after noticing that I goofed up on my JavaScript from yesterday. I think the lazy loading works properly now, but I’m still trying to troubleshoot an issue with the SVG within the img’s src. Gotta try again tomorrow.

• Learning to build a better slider part two

  May 9, 2021

  Today I’ve gotten through the process of converting the slides into flex objects, implementing a form of lazy loading for images, provided a no JavaScript fallback, and I’ve started working on adding buttons and their functionality. While typing out the scripts that Heydon provides, I noticed that he does not make use of semi-colons. This really threw me off for a bit, but it works just fine. I need to learn more about how essential they are. At the moment, I like using them because it helps me be certain that a line of JS has a finishing point. There’s always more to learn!

• Learning to build a better slider

  May 8, 2021

  Today I started working my way through the slider portion of Heydon Pickering’s book, Inclusive Components. It’s been a good read so far and I’m working through all of it by building a modified version of his example code as I go. I’ve had to double check things quite a bit because of his CSS selector usage (it’s good, I’m just not used to the combinations he uses). I’ll work on it more tomorrow, and by the time I’m done with this I’ll feel much better about the accessibility of the sliders/carousels I build in the future.