Code Archive

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

  100daysofcode, CSS, HTML, JavaScript

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

  100daysofcode, CSS, HTML, JavaScript

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

  100daysofcode, CSS, HTML, JavaScript, slider, carousel

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

  100daysofcode, CSS, HTML

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

  100daysofcode, CSS, HTML, JavaScript, carousel

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

  100daysofcode, CSS, HTML, cursors

• Learning About Regular Expressions

  May 4, 2021

  Regular expressions seemed a bit difficult in the past, but I think I have a better handle on them after doing a course on Treehouse about regular expressions in JavaScript. Form validation is the first thing that comes to mind, but there are lots of uses I’m not aware of yet.

  100daysofcode, CSS, HTML, JavaScript, regular expressions

• Quick Post Prototype

  May 3, 2021

  I wanted to give myself a 30 to 45 minute challenge today and see what I could come up with in terms of a layout for a post. It’s not particular good, but it really made me want some ramen. Unfortunately I can’t go out and get the good kind right now, so I’ll have to stick with a instant Cup Noodle style cup of ramen from Seiyu.

  100daysofcode, CSS, HTML, prototype

• Neat responsive flexbox layout

  May 2, 2021

  If you haven’t heard of Heydon Pickering, I certainly recommending checking out his website heydownworks.com, and learning all about the things he makes regarding web design and development. I watched a video of Heydon’s CSS Day 2019 talk about the Flexbox Holy Albatross and tried it out in this post. I’m still trying to full wrap my head around it (I feel like I could make a flexbox joke there), but it’s definitely going to be handy in the future.

  100daysofcode, CSS, HTML, flexbox

• CSS Grid Fidget Toy

  May 1, 2021

  I started today’s post off trying to find a way to rotate a grid of divs and try to find a way to make some of those divs stand upright within the rotated grid. That was a bit too difficult, and may not possible in the way I was hoping. So I ended up making this. I’m not sure what it is, but I tried using some JavaScript from my lightbox in another way.

  100daysofcode, HTML, CSS, JavaScript