Journal

I created a new codepen.io account and started into the Responsive Web Design Projects for FreeCodeCamp. The very first project in the list is a tribute page, and after a brief introduction to CodePen, I had forked the FCC test suite project and started satisfying the user stories.

One thing that is not specifically required, but that I would like to strive for, is increasing context and accessibility in these projects. Since they are smaller and fairly simple, it would be a great testing ground to mentally start getting a handle for how elements should be grouped and where values and settings need to be added. That being said, lingering on projects too long is objectively Bad™, especially with 111+ projects in the FCC backlog. I discovered the WAVE Accessibility Extension for Firefox, which seems to do a great job of giving examples and showing exactly where my accessibility should be improved. There is a decent amount of work to clean up.

Here’s the current version of the project:

See the Pen FCC Tribute Page: Project 1.1 by maxlepper (@lepperm) on CodePen.


Chances are, unless you’re actively following this blog, the above Pen will already have a proper completed tribute. As of this writing, though, I still have quite a few details to fill in before I can stamp it as “done”. I feel a bit guilty about not aiming for a more fleshed-out page, especially as I read more about Alice Ball’s accomplishments, but fortunately Wikipedia has many well-written references attributed and my intent is primarily awareness/amplification. And completing the page, of course.

Up to this point, Learning Log has not had a favicon, mostly because I haven’t known what to use, but it has definitely been bugging me. Plus, the debugger is constantly screaming at me. At least for the time being, I decided to go with a simple open book, as Learning Log has been, in a sense, me trying to be an “open book” about my experiences. The selection is a bit limited, but I ended up picking the read-book-icon from UXWing, which has a very flexible license agreement that both allows for modification and does not require attribution. I will be keeping them in mind as a solid option going forward! Next up was to create the actual favicon, and I found this great online tool with many simple options. Following the instructions, it was simple to get everything added to the site.

In the files generated, I found a site.webmanifest file, and a little research showed me that this was related to progressive web apps. I’ve done a little bit with this on my portfolio site, so why the heck not try to add it to Learning Log, too? I found a nice-looking PWA Jekyll gem plugin immediately, and set out to get it integrated. The generated web app manifest could be used as-is, and I took a little time to read up on service workers to build out my understanding of what happens behind the scenes.

After tweaking my configuration a little bit, I was able to use Chrome Developer Tools to confirm that the service worker was live and caching my site!

An image confirming my service worker working

Using the DevTools to enable and disable my connection and to try clearing data and changing my blob configurations was very informative, both in terms of comfort with the tools, and understanding how things were being cached. Trying the push messages from DevTools didn’t seem to trigger any kind of response, though, and it looks like I will need to add in some code to take advantage of some of the PWA features. As with most things, I’m realizing, it’s never so simple as slapping in a plugin - but that’s absolutely not a bad thing…I just need to come back to it later. Until then, I will be sure to install the web app on my phone for testing!

It feels like I did not complete nearly as much as I set out to accomplish today, especially looking at my task list, but I feel like I made good steps in terms of understanding and tools at my disposal.

Tasklist

  • => Modify CI/CD rules for Portfolio, AGWSU, and any other sites for new October 1st runner minute restrictions
    • => Build only on Master commits, Dev builds must be triggered manually
    • => Timeout on testing limited to 5 minutes tops and triggered manually
    • => Lighthouse testing on trigger only
  • => Add some way to see a list of all references used across the entire site
  • => Check my favicons
  • Add CodePen social button
  • Add favicons
  • Add a service worker and make my site work as a PWA
  • Work on FCC tribute page project