This week was a very open exploration! At the start I was experimenting with CSS and making a dynamic menu, but this quickly evolved to investigating animations, then SVG graphics and performance issues. The weeks learning was also rounded off with the first lecture in Harvard’s CS50 2021 series, and a slight detour into the world of the vintage BBC Micro Computer (my first computer experience as a child).
I created a sliding side menu using only CSS, using the fixed position and having it off screen until the user hovers over an exposed ‘tab’. The tab was created on the div container of the menu using pseudo-elements; the ‘before’ for the side tab element, the ‘after’ for 90° rotated text sitting inside the tab element. Through this experimentation I discovered animation ‘jitter’ due to margins/pointer interaction, resolved it, and also that using animation keyframes was not a good solution because the animation doesn’t reverse. Through further research I found that just using ‘transition’ on the parent element allows for the animation to reverse – also found you can chain transition animations.
In my research to solve the CSS animation issue I branched out and one of my findings was SVGs (Scalable Vector Graphics). Having already gained some proficiency with Adobe Illustrator in my previous career, I’m going to experiment and create some SVG’s soon, perhaps for some buttons or landing page graphics. The low file size and clarity of the graphics is really appealing, and I think they could make my future portfolio really pop! The SVG Snap library looks interesting.
On the topic of graphics, I have been looking at JavaScript 3D graphic potential. I came across Three.js and some other examples. I’d really like to have a crack at trying to make some simple but effective small graphics. I had an idea of expanding on the ‘Periodic Table of Elements’ examples I found, perhaps with some interactive electron shell graphics. Another idea was to create a simple webpage with graphics and mathematical information on the ‘Platonic Solids’. Always good to aim high and challenge yourself!
Later in the week I completed the first lecture of the Harvard CS50 course, finally realizing after years of using photoshop why RGB is 0-255, and also how binary works! Looking forward to the rest of this course already.
As a detour I watched a video of a computer science teacher reverse engineer a BBC Micro Computer (video below). This dovetailed nicely with Chapter 3 of ‘Pragmatic Programmer’ and the process of debugging. In the video he faced an issue with getting animation sprites to render correctly, and gave a really nice explanation of the hardware level (CPU vs GPU chips vs VGA monitor beam scan frequency) issue and resolution. Having spent many hours on my fathers BBC Micro as a child this was nostalgic for me personally, and really fascinating. Maybe one day I might try some reverse engineering too.
I also completed another HTML/CSS Responsive tutorial. This time it was mobile first, and it was interesting to see how different programmers tackle the same general challenge – not sure I feel mobile first is the correct solution at the moment but that may change.
BBC Microcomputer - Assembly Programming
Top comments (0)