Archive

• Vanilla JS Lightbox Challenge

  April 26, 2021

  Are lightboxes tricky to build? My experience leads me to think yes. I’ve managed to put something together that works as long as I know the number of imgs and URLs to reference. I need to learn how to attach a click event to each a element that can trigger the lightbox. Just typing this out gives me an idea… HUZZAH! I figured it out. It’s not perfect, but I’m so dang happy that came to me.

• Card display with horizontal scrolling

  April 25, 2021

  I really like the Popular This Month section on the CSS-Tricks homepage, and I have wanted to try and build something similar to what they’ve done. It was fun to work on, but there are quite a few things I need to improve before adding something like it to a site. I enjoy trying to rebuild bits of other websites I see. It’s a fun challenge and I learn a lot in the process.

• Learning about a few modern CSS Pseudo Class Selectors

  April 24, 2021

  I read a useful article on Smashing Magazine today that taught me about a few CSS pseudo-class selectors that I wasn’t aware of. I’ve spent a good amount of time today on a challenge involving Object Oriented JavaScript that has left my brain a little tired, so I thought I’d try out some of these selectors for practice. The link to the article can be found within the post’s HTML.

• Interesting float and flexbox technique

  April 23, 2021

  I saw this interesting article, Float an Element to the Bottom Corner by Temani Afif, on CSS-Tricks a few days ago and I thought the technique looked interesting. I’m not entirely sure I’d be ok with the amount of divs I had to use to accomplish this effect, but it may be useful someday.

• Send words into The Void

  April 22, 2021

  Today’s post is a bit silly, but it was therapeutic to make. I think Dave Rupert mentioned something like this on one of the episodes of ShopTalk Show. I haven’t worked with the textarea element in a while, so this helped refresh my memory of the various attribute of the element. The animation could be improved, but I think it had a strong enough effect for a basic version of this.

• Grid row and column span practice

  April 21, 2021

  For a little while now, Apple has been displaying info about their new products in this nifty grid layout during their events. I took a shot at making one based on the new iPad Pro slide shown during the April 20, 2021 event. It’s a pretty fancy looking and powerful machine, along with the new iMacs.

• Simple transition using clip-path

  April 20, 2021

  I know I did another clip-path post yesterday, but this popped into my head as I was transferring old Animal Crossing screenshots of a micro-SD card. It’s a simple and pretty effective transition. What would be neat is to try and only have the full-color image load when the mouse is within a certain distance from the low-quality version. That would be tricky on a touchscreen, but a different presentation or a change of the button text may be all I would need.

• 100 Days of Code - Week 10

  April 20, 2021

  

  I tackled a few new things (well, new to me) in both JavaScript and CSS over the last week.

• Goofing around with clip path

  April 19, 2021

  I wanted to try to do something fancy with clip-path from scratch today, but it ended up being quite goofy. Click on me to get a high-five!

• Practicing with Switch statements

  April 18, 2021

  I did a course on JavaScript Conditionals on Treehouse today and learned about switch () statements. I’ve never used them before and I’m not sure how much I will in the future, but I give them a go to solidify what I learned.