WebDev Bootcamp — Week 5

I finished week 5 of the Web Development Bootcamp, which covered concepts like flexboxes, grids, variables and media queries. We had two guest speakers this week: Stuart Langridge, who spoke about JavaScript usage, and Felienne Hermans, who developed a gradual programming language.

Read more about the Bootcamp here:

• Introduction
• Week 1
• Week 2
• Week 3
• Week 4
• Week 6

Schedule

Date	Description	Link
Feb 7 (Mon)	Learn CSS Variables by Building a City Skyline	freeCodeCamp
Feb 8 (Tue)	Learn CSS Grid by Building a Magazine	freeCodeCamp
Feb 8 (Tue)	Guest Session: You Really Don’t Need All That JavaScript, I Promise	YouTube
Feb 9 (Wed)	Project: Build a Product Landing Page Project	freeCodeCamp
Feb 10 (Thu)	Guest Session: How to Read Code?	YouTube

Building a city skyline

For this lesson, we created a city skyline that changes from night to day when you change the width of the screen. This lesson’s focus was on variables, flexboxes and gradients (linear-gradient, repeating-linear-gradient and radial-gradient).

See the Pen City Skyline (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Building a magazine

This lesson was about creating a magazine using grids. We also covered FontAwesome, pseudo-elements (::first-letter, ::before, ::after) and media queries again. It should be noted that for the purpose of this lesson, we used text-align: justify. It is not recommended to do this in real life because it can be difficult for people with dyslexia to read it.

See the Pen Magazine (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Project: Building a product landing page

For our project, we had to create a product landing page that fulfilled 15 user stories, which included creating a navigation bar and a form that enables users to submit their email address, embedding a video and making it responsive.

See the Pen [Project] Product Landing Page (freeCodeCamp) by fadilla-wahyudi (@fadilla-wahyudi) on CodePen.

Guest sessions

This week, we had two guests come over and speak, Stuart Langridge and Felienne Hermans.

Stuart Langridge — You Really Don’t Need All That JavaScript, I Promise

Stuart Langridge is consultant CTO and developer. His talk was mainly about JavaScript and because I haven’t learnt it yet, I didn’t understand much about what he was talking about.

Here are couple key messages that I got from his session:

• Browsers are really good at rendering HTML. It is faster for a browser to load 27,000+ tweets using HTML versus 1 tweet using React (which I learnt is a JavaScript library).
• There are many reasons why a person may not be able to load the JavaScript:
  • They disabled JavaScipt
  • They are not using a browser that supports JavaScript.
  • They are behind a corporate firewall.
  • They may be using using a data plan and it may have disabled the scripting.
  • They may have browser extensions or plugins that are interfering with JavaScript.
  • ISPs can block JS or certain JS libraries (this has personally happen to me where some of my friends could not load bootstrap.min.js)
• If you can achieve the same thing in HTML or CSS, then write it in those languages. These languages have gotten smarter over the years

Felienne Hermans — How to Read Code?

Felienne Hermans is an associate professor at Leiden University. She developed a gradual programming language, called Hedy, that is suitable for kids who want to learn programming and for people’s whose first language may not be English. Her talk was about how to learn how to read code.

Here’s what I took home from her session:

• We have three types of memories:
  1. Short-term memory — items that are held in your memory if you are exposed to it for a few seconds (e.g. a series of letters flashing once on your screen). A person can hold 5-9 things in their short-term memory.
  2. Working memory — works together with your short-term and long-term memory; it helps actively manipulate items in your short-term memory (e.g. performing calculations in your head).
  3. Long-term memory
• It is easier to hold more things in your short-term memory when they are part of your long-term memory. For example, it is easier to remember a short sentence flashing on your screen versus a series of symbols.
• Different types of issues arise when you’re learning a language. Different issues require different solutions:

Issue	Example	Possible solution(s)
Long-term memory	When you see a term/item/thing and you don’t know what it means.	Practice syntax, perhaps use flashcards
Short-term memory	You know other programming languages but with this language, you are unfamiliar with the syntax.	Rewrite it in a programming language that you understand
Working memory	You are familiar with the language and you know what the generally does but it takes you a lot of processing power to understand exactly what is going on. For example, there are too many variables and you find it hard to retain what each variable represents.	Support your working memory. Write it down; draw it out.

• Understanding your own misunderstanding makes you a better programmer.