Blog
Sharing what I learn, make, find, think, and enjoy.
-
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.
-
Practice with grid and cat photos
May 12 2021
I’d like to build some sort of image slideshow that shows a group of images and then rotates a random image into the largest element within the group at a preset interval. This is the starting point. I think it would be interesting to build in different grid layouts, based on aspect ration and more, and allow the viewer to customize it. I’ll tackle the customization and fancy stuff once I finally get it working.
-
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.
-
Mocking up a sign up form
May 7 2021
After learning more about accessibility, I’ve realized I need to revisit a lot of the common patterns I’d follow when building things with HTML and CSS. I think I’ll spend the remainder of this project learning more and practicing with a focus on making things as accessible as possible.
-
We meet again slider
May 6 2021
I used to swap product images, links, and more out of an e-commerce website’s slider/carousle multiple times a week. So I’m fairly familiar with how they normally work and are built. Almost all of them I’ve encountered had some JavaScript built-in to make them work, but today I built my first version mostly free of JavaScript. It’s really only used to switch it into and out of fullscreen mode. It also doesn’t change slides on its own. I think that’s alright, as this will probably not be used in such a way. It may not be too tough to add a bit to make it automatically change slides though. I also need to make sure I don’t bother displaying the fullscreen toggle button for browsers that don’t support it, or change how it works.
-
Cursor styles reference
May 5 2021
Today’s post is limited in terms of creativity, but I think it will be quite useful to me in the future. I even learned about a few cursor types I didn’t think I could display on a webpage.