Technical Blogs

Grid based design is used to place boxes (or other shapes) within a webpage. You can define the width of the webpage itself and fill the page with content of differing sizes. For example, if you defined the page as being 12 columns wide there could be 4 x 3 column wide boxes or a single 1 x 12 box. There is lots of room to customise here. A grid based approach will help content stay in a particular alignment when the webpage is responsive in nature. The grid isn't static and if you define 12 columns regardless of the page width, 12 columns will appear either side by side or stacked one above another. If we weren't using grid based design principles, it would be a mission plotting out a static area using x and y axis to create content. Furthermore, if the page shrinks you'd lose the content from the current view.

Responsive webpages are very important as a myriad of devices are in existance. We don't have one set aspect ratio and screen resolution anymore. Tablets, cell phones, laptops and ultra wide monitors to name a few. When creating webpages we need to be cautious that our content is visible on mobile and desktop devices. When building my blog from the start, I've been using percentages in order to achieve a responsive web page. This way, if the window is resized, my content within will still be 60% or 20% of the page, and shrink along with the browser window. To take this further, I look forward to integrating a hamburger navbar menu - as the number of blog posts grow my navbar will start to struggle on a mobile device. It worked as of HTML, CSS & DOM Part One - but it'll be interesting to see how many blogs it can take before not looking nice on mobile.

I understand semantic structure as being the correct layout (organisation) for a website. This can be as simple as having the correct order of elements (head, body, etc). Semantic structure also goes deeper. If you're using a stylesheet, you wouldn't expect to see font coloring defined using HTML and font face (or style) set using CSS. In addition, ID's, classes and other attributes should have names that make sense. The top navbar wouldn't be called 'footer' or 'content'. Usually, it would have the name navbar or navigation. Comments can be really helpful in defining structure and personally I use div container a lot as this makes it easy to find where the actual content begins.

I found my paragraph tags failed verification. Generally, you wouldn't have paragraph tags inside a list item element. However, further research shows while it's not semantic (or perfect), the functionality of the page isn't impacted at all. I'll have to clarify with a tutor to see what other options are available. I tried using span tags, but those also didn't pass. I did further research but couldn't find a conclusive answer. Maybe there isn't one.

A responsive website is one that changes as you minimise (or shrink) the page. During the downsize, all content should re-order and remain visible. Text and other elements, should not run off the page. Responsiveness is important as users browse the internet from so many devices, all with differing screen resolutions. We need to ensure the website is able to respond appropriately to all resolutions.

Mobile first design is very important as most users out there, now have mobile phones. Browsing from mobile is becoming more and more popular. If a webpage can render on mobile, chances are the experience is OK on desktop. Focusing on mobile first, will ensure the website is responsive to most screen sizes.

Frameworks are pre-built components you can use when building a website. The pros are ease of use, hugely available, simple but powerful websites with minimal coding. The cons can be documentation (lack of it), difficult to understand code (class names cannot be customised) and the decision between frameworks can be difficult.

A wireframe is like an outline for your webpage on both desktop and mobile. We use this so we're not programming blindly. This keeps us on track and we know exactly what we have to build and how to build it. Otherwise, many hours could be lost playing around with code and deciding what and where everything should go.

1. I wanted to have a background image behind my text, but this was hard to implement because the picture never turned out to be the right size. Even after resizing, it impacted the text making it hard to read. I feel like a lot of time was spent here.
2. I found it difficult to use the navbar in skeleton css because it didn't match my humburger mobile nav bar. I really wanted to have the hamburger nav bar so I used the Bootstrap framework as they have really awesome nav bars on mobile.
3. Lastly, I tried to code on my desktop computer and use my mac to push the files to GitHub. This bought it's own set of challenges as all the file paths for anchor links and CSS styles, failed to work - leaving me in the dark for a while.

Javascript has the ability to create objects and variables, that can be manipulated and committed to memory as desired. On a website, Javascript is often used to provide interactive elements. Using a calculator for example, HTML code is used to create the skeleton of the page and text. CSS is used to color the background and make the page more appealing to the eye. Lastly, Javascript will be brain behind the scenes that is able to compute math and return an answer to the calculator screen.

Control flow is the order of events that are executed in Javascript. Loops are used to cycle through possible events and provide a solution if a particular event is achieved. For example, brushing your teeth. If you have just woken up, brush your teeth. Else if teeth are already clean, eat breakfast. We could even nest a loop within this, saying while teeth are dirty, continue to brush and then call breakfast function when clean.

Objects can have multiple properties within them. To access data within an object, you can use objectname.dataname to access the information. An example would be an object person, having properties such as age, eye color, height, favourite places and hobbies. Arrays can have multiple dimensons (an array within an array) or just a single layered one. To retrieve data from arrays you can use arr[1] to return the second item in the array. For example, if we have an array with numbers 1-5, arr[3] will return 4 as arrays start at 0. The number index is used to access the array. We can also add additional numbers for multi dimension arrays (arr[3][2]).

Functions are really helpful in Javascript as they allow your main program to appear simple, as it will call multiple functions. The function itself, will contain all of the code and actions within. A function is like a group of statements and variables that will perform a certain task when the function is called. We could have a function for opening a door. We'd only need to call openDoor();. However, within that function there could be hundreds of lines that will unlock the lock, put shoes on, turn the door handle and push the door, later closing the door behind themselves.

A simple problem I encountered was animating the car on my earlier blog so it drives across the screen. I used the dev tools console to solve the problem. I felt a bit defeated but I didn't want to give up because I knew it'd be something new to showcase. I learned that the console is really helpful and I should remember to call the function in javascript.

A problem I had was finding a suitable width for content on my blog page. I spent hours trying to find a balance between the navbar, content, footer and other elements. I realised this was a problem that needed fixing otherwise I'd spiral for hours and get nowhere. To solve this, I used dev tools to play around with styles and elements. I could input code and see the changes live. Once I found the desired balance I could then insert the code into my files and save. I felt positive throughout the process as I could see live changes taking place and correct things quickly. I learned that a lot of time can be saved tweaking code within a browser.

Pseudocode - I'm not very confident using this, as I tend to store logic in my head or on paper to keep my code clean.
Rubber ducky method - Quite confident, I enjoy explaining code line by line as that's how a computer reads it.
Reading error messages - This is my job at Xero. Reading errors and understanding them, before logging via JIRA. Super confident.
Console.logging - Console logging I feel confident with. It's super helpful in Javascript to see if variables are working.
Trying something - I love trying new things success or failure, I enjoy giving it a go.
Googling - Very confident, Googling reputable sources is a skill I've been using over the years.
Asking your peers for help - I enjoy interacting with others, but I tend to only ask those who are willing to help.
Asking coaches for help - Coaches are awesome and they're there to help. Confident to ask any coach for help.
Improving your process with reflection - Slightly confident, I like reflection and learning from mistakes but I need to do this more often.

Parentheses () - Used to pass parameters into a function or to display conditions for statements. A conditional statement will say "If the contents within () is true, then do this. Otherwise don't do it". A function uses () to pass a parameter. For example function(car) is a function that requires a car. You could make car equal to a model and carry out the function for every model, by utilising (car) over and over.
Brackets [] - Used often in arrays for integers and strings. Within the [] symbols you can store lots of information. The array could be numbers from 1-100 as an example, and every number can be accessed alone, in sequence, or any other way you wish.
Braces {} - Curly braces are used for Objects in Javascript. Objects are name value pairs (name: Leslie, age: 25, sex: male, etc), similar to what you'd expect to see in a database. When you receive a personalised email and it contains your name, address, and other information, how do you think this information is retrieved? An object can be used to store and access such information.
Single Quotes ' ' - Single quotes and double quotes are often used interchangeably. The main concern is to stay consistent. Single and double quotes help to distinguish actual text from javascript.
Double Quotes " " - Double quotes are similar to the above. I tend to use them less in Javascript as they're my preference for HTML and CSS. They're commonly used in Javascript to help separate java from text you wish to display on screen.

In Javascript we can create variables and use these to perform calculations or to pass information through code. Some variables we need to access all the time throughout our code so they need to be defined with a global scope. This means no matter where you're coding, you can store and use that variable as it's within scope.
On the other hand, local scope variables cannot be used at any time. You can have a function (a set of code) that contains a local variable within. If code outside of this function tries to store or use that variable, it will error as it's outside of the scope.
Without code one way to think of scope is like items in a house. If a couch is left outside, people inside the house can walk out and use it, as well as anyone passing by. However, if the couch is locked inside, only the people inside the house can use the couch.