DEV Community: Simon Stranks

Week 6-13 - Summary

Simon Stranks — Thu, 20 May 2021 23:13:32 +0000

What a long JavaScript journey!

I purchased a complete JS course through Udemy and have spent the past several weeks working my way through the entire 60+ hour course; completing the challenges, the projects, and importantly making quality notes for reference so the knowledge isn’t lost! I also found a website called ‘Codecademy’ and worked through their tutorial section too, which was also useful.

It was a bit of a slog trying to complete the entire Udemy JS course, but I felt it necessary in order to get a thorough understanding of JS and to have a solid book of notes for reference. The course covered all the fundamentals, some really useful ‘under the hood’ theory on how JS works, and all the way up to the more advanced topics like closure and asynchronous functions.

Reflecting on my JS journey, I admittedly felt a bit intimidated by the language before I began learning. It is a central language of the internet after all! Now I feel it has been demystified and I feel a lot more confident in my ability to expand my learning going forward. I do quite like the style of the language itself, the syntax and features, but then that’s not really surprising given my first language was VBA inside Excel and AutoCAD!

I’m going to have a well-deserved break and start fresh next week, having noticed my energy has been decreasing and fatigue setting in (not helped by the abysmal weather and pandemic). I think I will jump back into the ‘FrontEndMentor’ coding challenges next week and move to the more difficult scenarios, so I can apply my JS knowledge practically. I will look for some other JS challenges or practical applications, as well as start planning a personal project to demonstrate my frontend skills – I had an idea to re-create a book of solo card games that I own.

Thinking ahead, I already have a course and some resources on Python lined up. From my research Python seems to be the next language to delve into, for both its wide scope of application and also for the backend potential use – I think it’s prudent to dive into backend development too, to get a good all round knowledge base. Perhaps when I’ve spent more time practicing my JS skills I may come back and look at Node.JS, algorithms, and more advanced concepts.

A few weeks back, before I became immersed in the Udemy JS course, I completed the lecture and exercises for CS50 Week 2 which involved more programming in the C language. From memory I think it took the better part of two days to complete the exercises – always opting for the more challenging ones! Now that the JS course is done I want to resume my aim to complete a CS50 module a week, to keep the momentum going and also keep my learning diversified!

Week 5 - Summary

Simon Stranks — Mon, 29 Mar 2021 11:42:13 +0000

Week 5, a very hands-on practical week! Most of my work this week consisted of actually writing code as opposed to general researching or tutorials. The principal focus was putting my HTML and CSS (and a dash of JavaScript) learning into action, and this was accomplished through a neat little website a Reddit user recommended to me, at ‘FrontEndMentor’. They have ‘challenges’ where you are provided the final design as an image and have to work to construct it, using only the provided image files and some styling guidelines. The feedback provided by other users was also really helpful and insightful too, a very useful resource!

Using the challenge website, I completed 7 of their ‘newbie’ challenges. This really gave me an appreciation for the frustrations of CSS layout, something that I heard being lamented on many YouTube videos! But it also really drilled home the power of CSS. For as frustrating as it was ‘debugging’ particular niggling issues, like responsive width for example, it left me with a good understanding of utilizing max-widths and width, when to use absolute pixel units or relative % units, and overall, the positioning of elements in general.

I was particularly proud of completing one of the challenges for extra bonus points, which required using CSS only and no JavaScript, to create a series of toggling drop down elements on a landing page. I’d seen the :target pseudo-class used already in a tutorial and knew this was the approach to take. With a bit of experimentation I figured out that by adding the ‘id’ to the <li> itself the ‘:target’ could be used to target multiple elements at once, allowing for the dropdown, bold-text highlight, and arrow rotation, to all be actioned.

Solution URL: @SStranks87
Live Site URL: @Netlify

The last challenge I completed required the use of some simple JavaScript. Having seen the ‘toggle’ property utilized in a tutorial video to add/remove classes, I implemented it to allow for a simple pop-up navigation panel. The JavaScript code was very clean and straightforward with toggle, as opposed to using an ‘if else’ method for alternation of states which I observed in other users submitted challenge code.

Solution URL: @SStranks87
Live Site URL: @Netlify

The mobile responsive @media could be improved on my challenge designs. Whilst I implemented them where required, having spent all my time really digging and understanding the challenge I did not have the time or inclination to really polish off the CSS – I’m trying to maximize my learning productivity ultimately, not create the polished digital statue of David!

All my challenges thus far can be found in my GitHub. Each challenge displays the ReadMe.MD, containing a link to the live-site for each challenge.

Later in the week I watched week 1 (#2) of Harvard’s CS50 course. Having already gotten familiar with the basic programming concepts (e.g. loops) through my self-taught VBA work at my previous job, this lecture was easy to follow. Digging into the concept of data-types brought back memories of writing VBA code and not realising at the time the limitations of using ‘integers’ versus using ‘long’. It took me awhile to figure out that my code was technically correct and that the error was the data-type! A painful, but very applicable learning experience! Seeing some ‘C’ implemented was interesting, and I aim to work through the exercises CS50 provided at some point in the coming week.

I was also recommended to investigate 'CSS Cube' by a user on FrontEndMentor. It is an implementation protocol, similar to BEM. Looks interesting, might try and implement it when I start creating more hefty CSS.

Week 4 - Summary

Simon Stranks — Mon, 22 Mar 2021 00:22:16 +0000

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

Week 3 - Summary

Simon Stranks — Thu, 18 Mar 2021 16:15:16 +0000

So, it begins! Week three began to see more of a lean towards experimentation and curiosity driven independent research compared to the initial two weeks – no ‘tutorial hell’ for me thank you!

Having said that, I did spend a lot of my practical application time working through the ‘Responsive Web Design’ module on freeCodeCamp, in particular the end projects (three completed). It was really useful to work on these, taking them as far as I could on my own, and then when I reached my limit examine their code and work through with the Chrome Dev tools to see how and why I couldn’t get something to work. This highlighted that whilst HTML and CSS are straightforward, remembering how to do specific things and putting it into practice requires.. practice!

JavaScript. Can’t wait to get stuck into this programming language and breath some real interactivity into the equation. I watched a few tutorial videos, a basic introduction and how it relates to the Document Object Model, and functions;

I think JavaScript is what I will need to complete my ‘HTML Tags’ page; a dynamic ‘cheat sheet’ that contains all the tags and all the information, as on W3Schools, but all collected on one static page instead of across many (none of the resources seem convenient enough for my taste).

Another part of the equation will be JSON. I figured out how to store the first two HTML tags worth of information inside a JSON file, and will use the JSON file to hold all of the information required for the page. But after writing out two of the entries I realized I don’t want to spend an entire week copying and filing all the information from W3Schools manually! Why should I, when I know automation could solve this.

Automation will be the final part of the equation. When I get stuck into Python I’ll create a simple web scrapper to pull out all of the necessary information from W3Schools and file it into my JSON. Or at least that’s what I will aim for! I assume it is possible, unless the website blocks such methods perhaps?

Part of the week I spent digging into side-tracks relating to CSS. For example,

Beizer curves; the mathematics behind how the values are calculated, visually, was very insightful.
Linear gradients; how these can be modified, and even used as masks on text to create a nice header title effect.
Psuedo-elements; adding extra shapes to objects, tool-tips, extra form elements.
Accessibility; with CSS putting content off the screen but still ‘there’. Genius!

I’m loving how much there is to know and the ability to be instantly creative, create instant problems, then problem solve instantly!

Week 2 - Summary

Simon Stranks — Mon, 08 Mar 2021 11:47:13 +0000

Two weeks completed. Another long week of learning, but again I’m surprised by just how much ground I have covered. Whilst it has been a bit of a strain trying to cram so much new knowledge into my mind, it hasn’t been too difficult to comprehend the information itself – even managed to wrap my head around some JavaScript code (more below!).
Rounding off my learning from the first week, I finished working my way through some intermediate and advanced HTML guides whilst continuing to add to my GitHub files on HTML and tweaking the formatting.

Whilst thinking about ways in which to apply my skills I stumbled across a ‘Periodic Table of Elements’ example, using CSS and some basic JavaScript. I spent some time examining the code and was successful in deciphering how the SASS and JavaScript code functions. I also realized that the JavaScript can overrule the CSS; the main table flexbox was only set to 5 rows, half of what was displayed on screen, and this was because the JavaScript was inserting new ‘elements’ into rows beyond 5.

I continued to apply my knowledge learned so far, of HTML and CSS, by completing two practical tutorials on how to build responsive websites using CSS and Flexbox. It was really useful to follow these through to completion to see the methodology involved. I continued to learn more CSS throughout the week too, covering a range of sub-topics: SASS and pre-processors, Variables and Custom Properties, the Box Model, Positioning, Units, and Psuedo-Elements.

Presentation is always important. Whilst my GitHub page may seem trivial in comparison to actual coding documentation, I think it is important to demonstrate good presentation even in the small things. So, I created a ReadME.md file to act as a presentational landing page for my GitHub. Using a tutorial, I also successfully added in an ‘action’ so that it dynamically updates the .md to show all my recent blog posts.

I watched a few interesting videos this week, such as how to get involved in open-source work and a ‘CSS Battle’. Both were insightful, giving me the opportunity to see how others in the community get involved and also how they think when coding. The CSS battle was particularly interesting, seeing how two different individuals attempt to reach the same conclusion through code and how their methodology differed.

Continuing with my book, ‘Pragmatic Programmer’, I finished Chapter 2. The concept of ‘Orthogonality’ was interesting, and reflecting on my VBA-AutoCAD programming in my previous job I realized immediately where improvements to the spaghetti code could be made!

Week 1 - First Week of Learning; Summary!

Simon Stranks — Tue, 02 Mar 2021 22:08:23 +0000

My first week of full-time studying completed! It seemed like it was a long week, which is testament to how much new information I absorbed and new skills I put into practice. But the feeling is a positive one, it was a productive week where I learned more than I initially anticipated.

Drawing on my abilities to grapple with new software and technologies, getting to grips with VSCode was comparatively easy compared to AutoCAD as a Landscape Architect. At the end of the week, I was already utilizing various keyboard shortcuts to increase my workflow and not touching the mouse at all, and using the split-screen editing to see the live preview.

The Git terminal was more intimidating at first glance; the command line functionality feels like the Latin language, an older but more revered power. However, this too was short lived for by the weekend I had already learned how to move around directories, create files, initialize a repository, add, commit, and finally push/pull contents to my GitHub repository online.

Learning the basics of HTML was straight forward enough, no real problems with that. Next week I’m going to complete some intermediate and advanced learning to round it off. I don’t think there’s much more to do except keep putting it into practice, and perhaps revisit it later when learning to maximize SEO on websites.

I implemented a few basic CSS styles in my HTML practice explorations and I’m looking forward to learning more about it this coming week. One week in and I’m already tired of HTML’s basic visual rendering – it’s like Netscape, Windows 95, and the birth of internet all over again!

The first chapter of “Pragmatic Programming” was more riveting than I expected it to be in all honesty, as I anticipated it to be dry. In fact, it was really encouraging as I realized it was conveying aspects of professionalism that I was already implementing in my previous role as a Landscape Architect, such as the “Broken Window Theory”. It seems like this book will appeal to my meticulous and consistent proclivities.

I have found two courses I aim to complete during my studies:

Harvard’s CS50 Course
Udacity CS101 Course

These should give a nice background of the more formal learning that comprises Computer Science degree courses, helping to round out my knowledge base (and really test my cognitive ability!).

Plenty of resources and tutorials now on my list to research and learn from, lots of post-it notes stuck to my desk, lots to be getting on with! Onwards and upwards!