100 Days: Recent Episodes
John Aspinall
A daily audio journal of my journey going through the '100 days of code' challenge. In season one, I concentrate on learning modern JavaScript ES6 and building basic web apps with it. Join me as I review my daily progress, trials and tribulations whilst going though the program and hacking apps togethe. I'm hoping to get some guests on from the 100 days and dev community as well!
- Started a beginners yoga course to help with RSI https://www.youtube.com/watch?v=6we3aNljJPc&list=PL-JjnyV2BH2XrgIAe9bvTLN4J0l-dz4L8&index=1
- Reading and watching video series about XSS
- Wrote my own JSON file containing sample of Blackpool footballers data and got that to display in the quote box. Did this by parsing the JSON file and converting it into an array.
- Nicked a random array number script to print player name to screen.
Send in a voice message: https://anchor.fm/100-days-code/message
- Made my API display its data to the DOM and therefore in a functioning page
- Designed a dashboard, a login component in Sketch and then coded the login into a fully responsive and light/dark toggle switch
Send in a voice message: https://anchor.fm/100-days-code/message
- How can you structure the script to support additional fields without having to change the code
- API watch videos
- API challenge completed
Send in a voice message: https://anchor.fm/100-days-code/message
Spent all day trying to write a script to fix the line break problem, but found you could achieve the result with one line of CSS! Good old Stack Overflow to the rescue!
white-space: pre-wrap;
https://stackoverflow.com/questions/40417527/how-do-i-preserve-line-breaks-when-getting-text-from-a-textarea/40426477
Send in a voice message: https://anchor.fm/100-days-code/message
Decided to knock the official course on the top of of the head for a bit and write some little challenges that I found here: https://gomakethings.com/vanilla-js-projects-for-total-beginners/
First up, was a simple challenge, show and hide and DIV with a button https://gist.github.com/cferdinandi/3f90b47bf442512d555211c38ff8e569
Second was a challenge to mirror text typed from a text-area into another on screen DIV https://gist.github.com/cferdinandi/6c842518ce8df6bd6c229783019c0d08
Send in a voice message: https://anchor.fm/100-days-code/message
- Attached keyboard event listener ‘keyup’ to username field - so this is the 'target' of the listener. So whenever a key is pressed on the keyboard, the event fires and my callback function runs which takes in the keyboard event object.
- Then used the test() method to compare the value property of the keyboard event object with the regex pattern to see if it passed the test and validated.
- Wrote a cople of CSS classes (success and error) to make the border of the username field red or green.
- Then wrote an IF statement within the callback function to apply the green ‘success’ border to the username field if a valid username is entered and red ‘error’ border if not. This was done with the setAttributre method which overrides the class attribute as appropriate.
Send in a voice message: https://anchor.fm/100-days-code/message
- Wrote basic REGEX matching pattern for username form validation
- Learned about the test() method, which compares a regex with a string. This returns a boolean value which I used as the test value in an IF statement when showing the correct validation message to the user
Send in a voice message: https://anchor.fm/100-days-code/message
- Learnt when attaching an event listener on a form, you always attach it to the
- Learnt about using the ‘event object’ and what you can do with it
- Prevent default 'refresh' behaviour of the submit event
- Firefox devtools is better than Chrome here as it visually shows you when you have selected the field.
- Get a reference to the username field and log it to the console. Clue - use the ID of the input field.
- Regex basics. A regular expression (regex) is a matching pattern that only allows a certain combination or pattern of characters to be entered i.e. 4-18 characters and only containing letters and numbers
Send in a voice message: https://anchor.fm/100-days-code/message
- Learned about events and event listeners, including event bubbling and delegation
- Watched videos on events and wrote a small page with a popup modal using the addEventListener method and click event to turn the modal on and close it.
Send in a voice message: https://anchor.fm/100-days-code/message
Just watched videos 52-56 which focused on events.
Send in a voice message: https://anchor.fm/100-days-code/message
- Printed out pre and post flight checklist for easy reference and put on desk
- Successful wrote the code for the challenge on lesson 51 "Adding & removing classes"
-
Always make your variable names and argument names, directly relatable to what values they are representing.
- The requirement argument in the forEach method should always be named as a singular version of the name of the array i.e. ‘player’ should be the argument for array of named ‘players’
- Scheduled my day in Google cal, coding at 9am, journaling and podcast in the evening.
Send in a voice message: https://anchor.fm/100-days-code/message
- Wrote callback function as an arrow function, using the forEach method to print an array of player names.
- TIP - Watch a tutorial video, make a “coding to do” list of things youve just watched by commenting in your app.js file. Then try to do each task without watching the video. Re-watch video only if necessary.
- Worked and getting and setting attributes
- Now on and and removing classes. Got a good challenge coming up re: adding certain classes to a group of
tags based on the text content of each element. I.e. error, success, none.
- Got some great help on the slack group from Sonaksh with regards to error.style.properties not working correctly. Turns out camelCase was the issue
Send in a voice message: https://anchor.fm/100-days-code/message
Does exactly what it says on the tin!
Send in a voice message: https://anchor.fm/100-days-code/message
What I did
- Watched and practiced this video on arrow functions. https://www.youtube.com/watch?v=h33Srr5J9nY
- Just practiced re-writing normal functions as arrow functions. Kinda didn’t get the big deal about them (or the point) apart from they look a bit cleaner, but this really only applies to basic functions were there is only one return statement.
- When there is a lot going on in the return statement block of code, it doesnt really look that different so whats the point? However...
- There is a big difference apparently when using the this keyword which I havent covered yet, so watch this space!
- Post flight checklist
To re-learn
- Callback functions - be able to accurately describe what it is.
Quote of the day
"All progress takes place out of your comfort zone" - Michael John Bobak
Send in a voice message: https://anchor.fm/100-days-code/message
What I did
- Made pre and post coding flight checklist
- And this journal Google Doc
- querySelector method and how its used to query the DOM and capture references to elements and nodes (in variables).
- Learnt how to capture a unique reference to any element on the page using Chrome dev tools.
- Made a GIF recording of it
- Cycled through a nodelist array with a forEach method, to log the entire contents of a ul
- When accessing properties of any element, you dont use parenthesis like you do when calling a method.
To re-learn
- Arrow funtions and callback functions - be able to accurately describe what each one is over the mic
Send in a voice message: https://anchor.fm/100-days-code/message
Tired, did it too late again. Block & focus extension. Had Git merge problem
Send in a voice message: https://anchor.fm/100-days-code/message
I'm learning modern Javascript (ES6 & 7) via the https://www.100daysofcode.com/ #100daysCoding program and thought it would be a useful excercise to make a daily audio journal of my progress. My goals for doing this podcast are:
- Keep me motivated and accountable.
- I remember reading somewhere that the best way to learn a new topic is to teach it to someone else. So Ill try and explain the concepts I've learnt in each episode.
- To help someone else along their own 100 days journey, make connections and friends in the community.
- Get help myself from more experienced Devs.
- To have fun!
I started the challenge on 1st May 2020 and have completed 7 days of the challenge so far so will show my progress below. I'll be doing a new epside after every day going forward.
Here's a link to the Github repo of my progress so far. I've made a 'round-1' branch off the main master repo as I plan to continue doing further rounds when I've completed the first 100 days.
https://github.com/johnasp/100days-code/tree/round-1
Send in a voice message: https://anchor.fm/100-days-code/message