I have started the 100 Days of Code challenge to keep myself accountable while I commit to learning React and Node. These two JavaScript frameworks will be used during my Digital Jobs Program paid work placement with Services Victoria as a Web Development intern. I am also working on launching a blog to chronicle my research into digital literacy and digital competence.
Reading the most recent article by Alex Kallaway Take the #100DaysOfCode Challenge. It’s the fastest way to form a coding habit and listening to him speak about #100DaysOfCode on the Stack Overflow Podcast, the CodeNewbie Podcast, and the Learn to Code With Me podcast helped to build the courage to get started.
Today's Progress: Created a new Space on W3schools to share the Digital Competence resources that I have been collecting for a blog I have wanted to create since the beginning of this year. Starting with HTML and CSS for now, but plan to add some interactive features using vanilla JavaScript.
Thoughts: I am a bit nervous about publicly commiting to this challenge for 100 days, but it will help to hold back my natural inclination towards procrastination.
Link to work: Digital Competence Resources - W3schools Space
Today's Progress: Created a div class for content from an Australian context with embedded videos. Also added APA 7th Style references.
Thoughts: Not everything worked as well as I hoped, but I will try again tomorrow to add the styling through CSS that I intended for the sections. Also hoping to use both Flexbox and CSS Grid more effectively to make a mobile first responsive design for this blog.
Link to work: Digital Competence Resources - W3schools Space
Today's Progress: Added more text to the blog and links to external pages. Tweaked the CSS to get the embedded YouTube videos to have a better aspect ratio.
Thoughts: It was a good feeling to see my edits to the code result in the change I wanted. The in-built code editor in W3 Spaces has quite good functionality in both mobile and desktop format with a live preview of the website. https://www.w3schools.com/spaces/
Link to work: Digital Competence Resources - W3schools Space
Today's Progress: Posted my progress through the @Sololearn HTML and CSS tutorials as a code snippet. It is a useful way to keep track of my progress, as well as reinforce the theory through practise.
Thoughts: Trying out different online tutorials has been useful for reinforcing what I learned in General Assembly's Front-End Web Development Course. It is nice to feel like part of the community at Sololearn and the comments section in particular has proven to be very helpful in extending my knowledge.
Link to work: HTML course code snippits
Today's Progress: Read more of the React tutorial in readiness for beginning to use this JavaScript framework during my internship that starts in a couple of days. Created a free AWS account to get familiar with the cloud server that I will be using there. I also need to take a look at the Node documentation.
Thoughts: Feeling a bit overwhelmed by the concepts in these frameworks, so I have not been confident enough to publicly code using React or Node. However, I am confident that they will make more sense once I have a practical way to apply the theory with the project that I will be working on in my internship.
Link to work: React Tutorial fork - Tic Tac Toe
Today's Progress: I didn't get a chance to code today, but I did get back into listening to The CSS Podcast again, which has such a vibrant energy to it and has connected me with some really useful resources for exploring the cascade, specificity, Flexbox and Grid. This is one podcast that I intend to listen to in its entirety.
Thoughts: I'm okay with taking it slow with this challenge as I will not always have an hour to spare for coding each day, but this is a good opportunity to build new habits.
Today's Progress: Took a couple of steps forward in the Tutorial: Intro to React on reactjs.org.
Thoughts: I don't mind taking my time with this tutorial, and it actually recommends that you do so (instead of rushing through). I prefer taking time for concepts to absorb, as rote learning has never had a lasting effect on my memory or indeed how I undertake any new task.
Link to work: React Tutorial fork - Tic Tac Toe on CodePen
Today's Progress: Completed two more steps of the Tutorial: Intro to React on reactjs.org.
Thoughts: I need to debug as it is not working the same as the incremental examples on the tutorial. However, the concepts make sense so far.
Link to work: React Tutorial fork - Tic Tac Toe on CodePen
Today's Progress: Today was my last day at my non-coding part-time job. Unsurprisingly, I did not get much coding done. However, I did chip away a little further at the CSS tutorial on Sololearn (91% complete!).
Thoughts: It is a relief to not be dividing my attention away from my intended career path.
Link to work: Sololearn profile
Today's Progress: Second day as a Software Engineering Intern at Service Victoria and the first day working from home. I'm quite enjoying using the Microsoft Surface Pro 7+ provided to me by work, however I think I will get a separate keyboard and display to make my set up a bit more ergonomic. I completed the Learn the CSS Box Model by Building a Rothko Painting tutorial in freeCodeCamp.
Thoughts: It was exciting to finally officially be able to concentrate fully on my paid work placement for the Digital Jobs Program. Code switching between a non-tech job and where my heart truly belongs as a Front End Web Developer / Software Engineer has been quite draining. I quite enjoyed applying margin, padding, filter, border-radius, and transform properties to create an approximation of abstract art in part 6 of the (New) Responsive Web Design in freeCodeCamp.
Link to work: freeCodeCamp profile
Today's Progress: I had a go at this week's #CodePenChallenge. Making a "Looooong Teeeeext" generator was good fun. I also experimented with using an iframe for the first time, so that the newsletter from which the Challenge found the prompt.
Thoughts: CodePen has been a magnificent source of inspiration for me, especially as someone new to coding. Seeing the work of those that I admire has helped to feel like it is possible for me to be creative with how I respond to coding challenges. This is the first time I have
Link to work: August 2022 #CodePenChallenge: Looooong Teeeeext
Today's Progress: Tried out the browser-based integrated development environment (IDE) JSFiddle as a sandbox to experiment with Font Awesome icons to create a Social Links page for myself.
Thoughts: JSFiddle was very user-friendly and has a an interface that you can jump straight in and use. I particularly appreciate the options for Editor Layout. The range of free icons on offer from Font Awesome is very impressive and again very user-friendly.
Link to work: https://jsfiddle.net/stweffy_88/yq4vt9L2/52/
Today's Progress: No coding today, as I was on a long-haul flight from Melbourne to Manchester, with a two-hour stopover in Dubai. Hence, access to internet to unreliable at best.
Thoughts: I will add a couple of days at the end of the challenge to make up for the days lost in transit during this trip.
Today's Progress: I practised some of the concepts covered in the CSS course on Sololearn. Specifically, CSS properties that I have not used previously including: linear-gradient, text-shadow, letter-spacing, and drop-shadow.
Thoughts: I'm quite happy with how everything turned out and confident that I can use these techniques in future projects.
Link to work: https://jsfiddle.net/stweffy_88/sxtvn2w8/43/
Progress: Completed Learn CSS Flexbox by Building a Photo Gallery project on freeCodeCamp. It helped to demonstrate the utility of the following CSS properties: box-sizing, max-width, flex-wrap, object-fit, and gap.
I also have not used the ::after pseudo elements before, so it was handy to see that in action.
Thoughts: I am happy to have consolidated the practical use of Flexbox a little more and even applied properties and a pseudo element that I have not used in my own projects yet.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Worked out what I needed to fix to progress in the Tutorial: Intro to React - I was missing one curly bracket at the end of the arrow function within the button. Hence, I was able to keep going with the tutorial project of creating a Tic Tac Toe game using React.
Thoughts: It was a relief to figure out that bug, so that I can continue to chip away at this introduction to React.
Link to work: React Tutorial fork - Tic Tac Toe on CodePen
Today's Progress: Recreated the Moon Phases puzzle from Grasshopper in JS Fiddle. It makes use of the D3 library to create SVG animations.
Thoughts: It was a good confidence boost to show myself that I can emulate what I have learned about JavaScript from the puzzles in Grasshopper.
Link to work: https://jsfiddle.net/stweffy_88/79fejd60/124/
Today's Progress: I tried the second CodePen Challenge for August: All Unique Characters. I was inspired by the solution created by @nicoleontech for the original prompt in the newsletter by @cassidoo: nicoleontech/cassidoo-interviewQuestions/unique.js.
Thoughts: This was a useful example of the application of: for loops, comparison operators, indexOf(), and lastIndexOf.
Link to work: August 2022 #CodePenChallenge: All Unique Characters
Today's Progress: Completed the Lifting State Up step of the Tutorial: Intro to React.
Thoughts: React is still confusing to me, but the .slice(), onClick and handleClick code from this step were familiar from my JavaScript knowledge.
Link to work: React Tutorial fork - Tic Tac Toe on CodePen
Today's Progress: Completed 63% of the Learn Typography by Building a Nutrition Label project (Step 1 to Step 42) on freeCodeCamp.
Thoughts: This is good for refreshing CSS layout concepts and it was the first time I have used the clear and overflow properties.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Finished the Learn Typography by Building a Nutrition Label project (Step 43 to Step 66) on freeCodeCamp.
Thoughts: It was useful to see how multiple styles can be added to HTML elements using the class attribute. This was my first use of the :not pseudo-selector to exclude elements that do not match the given CSS rule. Also, I have not used the text-indent property before.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Emulated another Grasshopper app puzzle with a few tweaks. One of these was positioning the red square 50 pixels further away from the top of the screen, to make the four coloured squares look more like a game controller. I also did not include the code from the puzzle explainer pertaining to a color variable and the Grasshopper custom pickRandom() function, so I could just focus on the following d3 concepts: .attr('cx',), .attr('cy',), .on('click',), and .transition().
Thoughts: It was fun to recreate this puzzle in JS Fiddle. The animation possibilities with the d3 JavaScript library are quite interesting to me and I'm glad to have had the chance to explore them through the Grasshopper app.
Link to work: Rebuild of "Walk Around" puzzle from Grasshopper app
Today's Progress: No coding today, as I was attending a wedding.
Thoughts: I will add another day at the end of the challenge to make up for the missed day.
Today's Progress: No coding today, as I had no consistent internet to use while in transit.
Thoughts: I will add another day at the end of the challenge to make up for the missed day.
Today's Progress: Started the Learn Accessibility by Building a Quiz project on freeCodeCamp.
Thoughts: I will take my time with this project and not rush the steps, as Accessibilty is a subject that means a lot to me.
Link to work: freeCodeCamp profile showing progress
Today's Progress: No coding, as I was flying from Manchester back to Melbourne, via Dubai. So there was no consistent internet.
Thoughts: I will have to add five days to the end of this challenge to make up for those that I have missed.
Today's Progress: Researched Cron jobs for a project assigned to myself and the other Software Engineering interns. I will need to learn more about Command Line Interface before I use it, but the theory makes sense for this scheduling automation tool. Continued the Learn Accessibility by Building a Quiz project on freeCodeCamp.
Thoughts: The flow of data between the web scraper, Cron job and JSON schema will be easier to conceptualize with the three interns working on researching each component individually. In the freeCodeCamp project, I have been introduced to the aspect-ratio property.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Progressed to almost halfway through the Sololearn Responsive Web Design course.
Thoughts: Picking up useful tips from this course for my blog that I am designing. I intend to make a mobile first responsive website.
Link to work: https://code.sololearn.com/WnPCf8D4Jyph/?ref=app
Today's Progress: Ironically, did not get any coding done despite a busy day at my Software Engineering internship. It was filled with largely research on System Architecture Diagrams and Cron documentation.
Thoughts: Despite no coding, I am loving my new job. This internship is combining my educational design knowledge and love of facilitating the growth of knowledge in myself and others.
Today's Progress: Completed Step 10 to Step 16 of Learn Accessibility by Building a Quiz project on freeCodeCamp. I had not come across the role or aria-labelledby attribute previously, so I look forward to doing further research into this part of the Web Accessibility Initiative (WAI). https://www.w3.org/TR/role-attribute/
Thoughts: Steadily making my way through the concepts on this project. There may be the temptation to rush tutorials like this, but then the concepts they teach are less likely to be retained.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Reinforced what I have covered so far in the Responsive Web Design course on Sololearn by recreating it in JSfiddle.
Thoughts: I needed to adjust the HTML and CSS to make it work in a text editor outside of the Sololearn environment, but I was successful.
Link to work: Landing Page
Today's Progress: Completed Step 17 to Step 25 of Learn Accessibility by Building a Quiz project on freeCodeCamp. I have not used text that only screen readers can see before, so I will remember to use the CSS rules for the sr-only class that were made for this project. These included overflow: hidden;, clip: rect(0, 0, 0, 0);, and white-space: nowrap;.
Thoughts: This part of the project was an important reminder of how the relationship between the label tag and the ID of the input tag provides a visual reference to the input for those who use assistive technology.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Gained knowledge about Secure Shell Protocol (SSH) to enable access to the GitHub Enterprise Server for my internship.
Thoughts: This is unfamiliar territory for me, but the GitHub Docs are very thorough and help to walk through each step of the process.
Today's Progress: Forked my previous JS Fiddle to continue practising what I am learning in the Responsive Web Design course on Sololearn. I have progressed to the next section which focuses on Making it Responsive.
Thoughts: It was good to reinforce what I have already covered in the Front-End Web Development course at General Assembly regarding media queries, breakpoints, and the CSS properties min-width and max-width.
Link to work: Landing Page - Making it Responsive
Today's Progress: Continued reinforcing my learning from the Responsive Web Design course on Sololearn by coding along in my JS Fiddle.
Thoughts: It is always reaffirming to see a Flexbox layout just work. In particular, the change from horizontal alignment of the three features on a desktop screen to vertical alignment on a mobile screen.
Link to work: Landing Page - Making it Responsive
Today's Progress: As mentioned previously, I have been working on adding an SSH key to GitHub, but I was only successful after a few tries in between tasks at work. The code I was entering into from the guide into Microsoft PowerShell was not working as it should, so I ended up consulting Stack Overflow to find the answer.
Thoughts: I was pretty frustrated after what appeared to be a pretty straightforward task on both GitHub Docs and the YouTube tutorials that I found. However, I have not used Command Line before so the concepts are unfamiliar to me. In the end, I was able to figure out the relative path to the SSH key ~/.ssh/id_rsa.pub. Since neither the terminal in Visual Code nor Microsoft PowerShell would accept the code snippet from GitHub Docs (clip < ~/.ssh/id_rsa.pub), I instead used the Get-Content command instead of clip and it worked.
Today's Progress: Returned to the Learn Accessibility by Building a Quiz project on freeCodeCamp.
Thoughts: Using fieldset and legend are important skills for grouping information in a HTML form together. The nested elements within the fieldset are related to one another and it draws a box around them. The legend tag provides a caption for the fieldset that is visible on the page. The name attribute of the fieldset tag gives the name of the grouping of related elements within.
Link to work: freeCodeCamp profile showing progress
Today's Progress: Coded along to 15.1 LESSON: Responsive Quote & Footer from the Responsive Web Design course on Sololearn.
Thoughts: With a mobile-first responsive design in mind, the following changes were made:
- The padding is increased and the font size is decreased when viewed on a mobile screen.
- When viewed on a mobile screen, the list items in the footer become block level elements. This means that they extend across the whole width of their container, which makes them align beneath each other.
Link to work: Landing Page - Making it Responsive
Today's Progress: I need to be able to switch between versions of Node, so I was asked to try to install Node Version Manager (NVM) and then Node version 16.7.0 (Long Term Support (LTS) at this point in time). I am not able to use the method described for Mac or Linux in the repository (https://github.com/nvm-sh/nvm) as I have been supplied with a Surface Pro 7+ for this internship. When I looked into Corey Butler's NVM for Windows (https://github.com/coreybutler/nvm-windows), I was unable to follow the method described by many articles and YouTube videos as I do not have the administrator privileges required to use the installer on the computer that I have been supplied.
When I researched the other options a little further, I found a Microsoft article which suggested Jason Ginchereau's Node Version Switcher (NVS) because it has the ability to integrate with Visual Studio Code, which is the preferred text editor for this workplace.
Thankfully, NVS worked and I was able to install the LTS version of Node.js (version 16.7.0).
Thoughts: I had not used Command Line Interface prior to this internship, so it has been a bit of a steep learning curve. However, I can see the advantages of being able to use text commands to interface directly with the operating system of a computer.
After trying each of the Windows installation methods suggested by NVM for a couple of days, it was a relief to find that NVS worked straight away. The Visual Studio Code Support was definitely appealing too.
Today's Progress: No coding, as I was busy with studying after work. I have an assignment due on the 19th of September that is worth 40% of my final mark, so that is my priority this week.
Thoughts: Three more days to add to the end of this challenge, but this is my second attempt at the last unit I need to finish the Graduate Certificate of Educational Design.
Today's Progress: I attended two webinars today which introduced Python from different perspectives. First, General Assembly's Programming Essentials with Python for Workshop Wednesdays, which was a good overview of the origins and potential for this programming language in many different digital professions. The second was a teacher PD presented by Zenva to demonstrate their use of Python Turtle to teach students to code, featuring lesson plans that align with the Australian curricullum.
Thoughts: It was random happenstance that these very different approaches to introducing Python occurred on the same day. I had not considered learning Python before it appeared in some of the code I am looking at for my internship. The second webinar was a jolt of nostalgia for me, because I actually did an extracurricular activity when I was in primary school where we used Microworlds. In fact, I still have the floppy disk with the program on it.
Link to work: https://replit.com/@stweffy88
Today's Progress: I have completed lessons 16.1 and 17.1 in Responsive Web Design course on Sololearn, which finished off the Make it Responsive section of the course.
Thoughts: Using rem instead of pixels for the unit of measurement for the font sizes made no difference to what I have been coding along in JS Fiddle, as they were the same ratios (html = 16px, h1 = 48px = 3rem, h2 = 24px = 1.5rem, .btn = 20px = 1.25rem).
Link to work: Landing Page - Making it Responsive