Learning Log: Weekly Update
My daily updates fell off a bit this week. I did a great job with documentation up until last weekend but then I got a bit distracted this week and didn’t do as much. These logs are having an unexpected and interesting side benefit: I’m able to track the ebbs and flows of my learning on a weekly basis.
Also of note is that these longer form log posts are far more difficult when I don’t write daily drafts and updates in my Hugo notebook. I definitely see a correlation between a lack of drafts/notes and a lack of longer log entries!
Anyway, I’m going to write a longer summary of things I’ve explored since last weekend and then ideally get back on track with shorter versions. Since this is a longer update I’m going to group it into key categories.
WordPress and Headless/Decoupled CMS
Much of what I read about this week was the new trend of separating content and appearance and the rise in popularity of headless CMSs such as Netlify CMS and Contentful. Another tool I became aware of this week was Shifter: a WordPress host that brings serverless concepts to existing WordPress sites. This is extremely interesting and I want to learn more about it!
I’m not going to go into too much detail since I’m trying to remember several points throughout the week, but I will say that WordPress and headless CMSs are at the top of my list of things to check out this weekend.
Modern Web Technology/Development
I spent a lot of time refining my Sass skills this weekend. I really love this and should have probably started earlier since people are now using things like Styled Components and scoped CSS.
I’ve been spending a lot of time determining what modern approaches interest me the most and decided that for each new skill I want to practice, I’ll refine a foundation skill that correlates. For example, as I experiment with React and Vue I’ll practice some Vanilla JS/ES6 concepts as well. Or, as I build a layout with CSS Grid or a framework like Bulma I’ll make sure to practice a core CSS skill like floats.
I had a pretty busy week, so most of my learning was front loaded. I also didn’t take notes this week so my recollection is a lot hazier! I’m going back to the daily notes and refined updates since that was a huge help last week.
Project Updates
I made a lot of progress on building out my p5 compress tool. I don’t have a name for this, but basically the goal for the tool is to take a p5 sketch folder that contains the index.html, style.css, and sketch.js and compress it all into a single sketch.html file.
I chose to use Gulp for this because I wanted to practice building a more complex gulp task. So far I’ve accomplished the following things:
- Receives a flag on the command line for the sketch name, finds that folder, and creates a new minified js file with the JavaScript files from the sketch folder.
- Receives an optional command line flag that lets the user decide if the minified sketch should include the p5 libraries. This makes the JS file quite large, but could be useful if a sketch needs to be displayed offline.
To do both of these tasks I had to learn how to pass command line arguments into a Gulp task. To accomplish this I used the npm package yargs to capture the command line arguments passed in and then pass those as variables into my Gulp task.
At a certain point, this led me to do some research about whether I’d be better off writing an npm script or even just a bash script to accomplish this. My reason for using Gulp was twofold:
- Learn Gulp and how to write a more complex task then just CSS processing
- Eventually provide it as a Gulp plugin
I’m planning to work on this over the weekend. I know the steps left to finish it, I just need to figure out the best way to do it!
Videos, Courses, and Podcasts
I’m going to split this section up into three areas. First, standalone videos.
Videos Watched
The video that stands out the most this week is this: Wes Bos: Modern workflow and tooling for frontend developers. I’ve been listening to lots of Syntax episodes this week so I was happy to find a Wes Bos conference presentation about workflow and tooling. The video is already slightly outdated since it’s from 2016 (!), but there was some good insight into the npm scripts vs. Gulp question. I’m going to build my skills with both tools since they each have different use cases.
I also watched two excellent videos about setting up Trellis and Bedrock for WordPress. I’m going to write a longer post about this, but I wanted to be more informed about modern development practices.
Courses Completed
I decided that I wanted to solidify my foundations in HTML and CSS as I worked through new frameworks. I jumped into reading a lot about Bulma and other CSS frameworks, but then I decided that I wanted to practice some foundation skills first. I thought that for every new skill I’m working on I should work to solidify existing skills. This led me to complete the following courses last weekend:
- Pluralsight: CSS Positioning by Sarah Simkins
- Pluralsight: Semantic HTML by Sarah Simkins
- Pluralsight: Getting Started with Emmet by Kristian Freeman
- Pluralsight: Hands-on Responsive Web Design 1… by Paul Cheney
- I finished the parts of this course that I deemed solid for review, namely about using Sass and building a layout.
- Lynda – HTML Essential Training by James Williamson
Taking time to review fundamental HTML and CSS skills is extremely helpful, especially before starting to use a new framework. I didn’t want to try out Bulma, CSS Grid, or something like styled components before rebuilding my foundation skills. This was very helpful and I learned a few new best practices for writing semantic HTML!
I’m going to continue this practice of occasionally refreshing foundation skills when tackling new things as it’s really rewarding.
Podcasts
I’ve been listening to lots of Syntax by Wes Bos and Scott Tolinski. This is a great show and I’ve discovered lots of new things by listening to archived episodes! I particularly enjoyed the mini-episode about BEM CSS.
I’ve also listened to almost the entire episode archive of JAMstack Radio. This has been a great way to absorb lots of information about something I’ve recently become interested in exploring. I’m learning a lot about the philosophies behind JAMstack such as separating content from appearance. Many of the episodes were about using a headless CMS with static site generators. I’m going to continue to check these topics out and will report back as I learn more!
On the Radar
One big thing on my radar is trying out several tools and workflows. I’ve been discovering so many exciting new technologies lately and I want to try out mini-projects for several of them. Some of these are leveling up existing workflows whereas others are completely new.
This post is already quite long, so here are the main things I’m working on:
- WordPress workflows and the JAMstack
- Determining what methods work best for my personal use
- Trying out alternate methods for other projects
I’m going to work on getting back into the daily update process, as it’s quite challenging to think back on an entire week without any notes to go on!