Work Stuff
Last week of work for 2022 and how it's flown by! I've been in my first dev job for about 10 months now and it's nice to look back and reflect on how far one has come since their humble beginnings: I've progressed a lot, but still so much more to learn! It seems as a junior dev, the more you think you know, the more you don't know!
It was a quiet week for most of the organisation as one can expect, UK is very much like that and people don't want to take on tasks that they know they won't complete before the end of the year, preferring to start fresh in January. It was also a time to say goodbye to some colleagues as they move on to pastures new. I think the turnover in the UK is quite high and having worked in two industries tells me it's not restricted to a particular organisation, culture or sector. Although these will factor into an employee's decision-making, I believe workers in my generation get bored in the same role quickly and are very aware that loyalty no longer pays. If you want to force through a challenging role with more responsibility and presumably more financial gain, you can't wait for those above you to vacate the post, you have to jump ship. Who can blame them? The economic outlook is dire, and people need to do what they can to pull themselves out of poverty or maintain their current living standards, especially for companies that prefer to work in person synchronously.
On the aspect of the work week, I spent most of that time sorting out my build process for my local environment (I'm scared to total the lost man hours trying to troubleshoot the build setup), some content stuff back and forth between teams and general admin.
Self Learning
In my free time this week, I have tried to stick to CodeCademy but I find it difficult to concentrate on lesson after lesson. I've been distracted by Kevin Powell's (at the time) recently posted video (he always produces enticing content!) about creating a parallax feature with CSS mask properties which allows for header text to hide behind parts of an image upon a scroll length. I've always wondered how this is done (previously I've implemented a parallax for a pet project using Material UI so the process was somewhat abstracted away from me). It sparked not only the desire to learn what combination of CSS rules was required but also to start a GitHub repo of a UI library (created probably hacking together stuff from Youtube and random SO searches) created by me, for me, so that I have some base knowledge on how these features work.
Alas, when you start a video and code along and it's only a few minutes long, it somehow ends up taking double or even triple the amount of time to work it out or you get stuck on something and give up!
For me this time, there were parts of the video that you needed some basic knowledge of third-party design software which was skipped through in the video and turned out to be an integral part of the demo: creating the 'mask' SVG layer. I also chose a hard image to create a mask polygon when I should have started with a simpler image. I attempted it but ended up misinterpreting the author's instructions on this which meant that the resultant code to manipulate the mask background didn't work. After not being able to work it out, I thought I needed to take a few steps back to refresh my memory on how parallax effects work, and then investigate CSS mask features and the design-build process.
Fast forward to three or four separate YouTube videos (big shout out to Brad Traversy, Kyle at WebDev Simplified, Red Stapler (link is mentioned in Kevin's Video above), and Online Tutorials) on their take of parallax-like effects), I now have some working demos on the parallax effect (with pros and cons of each) and a better understanding of the CSS mask properties as well as how to create a basic mask SVG in a program like Figma. Suffice it to say, I can go back to the original video and follow along to get the same output- but to be honest, now, I have reached each of the steps from separate videos so I feel I have achieved what I wanted to learn already and then some.
I'm in the process of cleaning up the files, adding commentary and then saving them to GitHub. There's still more to learn about this: is it accessible? is it responsive? can I improve the visuals with more interesting layers?
Well, at least I got it to work and for a junior dev, that's half the battle.