100 Days of Code

I found 100 Days of Code mentioned in a few tech podcasts I listen to and on Twitter.

It is a challenge to code for at least one hour each day for 100 days.

The rules are that you should share a log of your studies, don’t skip two days in a row, and you should support at least two members of the community each day.

I decided it’ll be a way for me to start 2019 off with accountability and day by day progress.

I attended my first tech Meetup and then I started this blog over 6 months ago, around June 2018.

In that time I have learned how to use the terminal and command Line. Learned how to use Git and GitHub. Relearned HTML and CSS and created my first Google Homepage clone using HTML and CSS.

I have achieved a lot for me in that time but I know deep down I have a lot more potential.

I need to focus my energy into consistent effort if I want to see any big results that would give me the skills to enter the tech industry.

So, that’s why I decided to start 100 Days of Code today.

I forked the repository on GitHub and will be updating my log each day there (check it here) as well as sharing updates on Twitter (check those here).

Advertisements

JavaScript Fundamentals Part 2

Last year, I continued studying on Fundamentals of Javascript in the Odin Project Web Development 101. I decided to start off the New Year by doing a review of what I had studied a month ago.

I did the first JavaScript “Test Yourself” questions in this blog post.

These are the second JavaScript “test yourself” questions here and my answers below.

  • What are the seven data types of javascript?
  1. Number
  2. String
  3. Boolean
  4. Null
  5. Undefined
  6. Object
  7. Symbol
  • Which data type is NOT primitive?

Object.
This is because objects store collections of data and more complex entities.
Whereas, numbers, strings, booleans, null, undefined, and symbol are represented directly. Also, those data types cannot be changed (although, the variables they may be stored in can change).

  • What is the difference between single, double, and backtick quotes for strings?

Single and double quotes are the same. But they need to be used consistently, not mixed – ‘Hi’ or “Hi”
not “Hi’

Backtick quotes are extended functionality quotes. They allow us to embed variables and expressions into a string using  backticks:
stringtext ${variable} stringtext `

  • Which type of quote lets you embed variables/expressions into a string?

Backticks.

  • How do you embed variables/expressions into a string?

Using the dollar sign and { } brackets together.
The variable or expression would be written within the curly brackets.

  • How do you escape characters in a string?

​​​​​You can escape characters, like a  single, double, or backtick quote with a backslash before them \’ \” \`

  • What is the difference between slice/substring/substr?

These are three ways to extract part of a string.
The parameters are different in each:

  1. slice(start, end)
  2. substring(start, end)
  3. substr(start, length)

Slice extracts part of a string and returns the extracted part in a new sting.
Substring is similar to slice. Substr is different because you choose the length of the string you want to get, rather than the end point of the original string.

  • What are methods?

A method is a bit of functionality that is built into the language. They are properties which contain a function. So, slice(), substring(), and substr() are methods.
Also, indexOf() and search() are methods.

  • What are the three logical operators and what do they stand for?

&& AND

|| OR

! NOT

  • What are the comparison operators?

> greater than
< less than
>= greater than or equals
<= less than or equals
== equality check
!= not equals

  • What is nesting?

When we put something inside something else.
In JavaScript, we can nest if statements within each other. For example,
if (condition) {
xyz } else if (condition) {
zyx } else {
abc }

  • What are truthy and falsy values?

A value that evaluates as true in a Boolean context is truthy.
A value that evaluates as false in a Boolean context is falsy.

  • What are the falsy values in Javascript?
  1. false
  2. undefined
  3. null
  4. 0
  5. NaN
  • What is the syntax for an if/else if/else conditional?

if (condition) {
xyz } else if (condition) {
zyx } else {
abc }

  • What is the syntax for a switch statement?

switch (expression) {
case choice 1:
run this code
break;
case choice 2:
run this code
break;
default:
actually, just run this code
}

  • What is the syntax for a ternary operator?

(condition) ? run this code : run this code instead;

  • What is the relationship between null and undefined?

Null is a value. It means “nothing, empty, no value”.
Whereas, Undefined means there is a variable but “value has not been assigned”.

If you test equality:
null == undefined would be true
null === undefined would be false

This is because with strict equality they need to be the same type to return true. Null is an object, but undefined is a type of value itself.

  • What are conditionals?

Conditionals are statements which execute a block of code is certain conditions are true.
Conditional statements include:

  1. if
  2. else
  3. else if
  4. switch

 

JavaScript Fundamentals Part 1

I started working on the Fundamentals of Javascript in the Odin Project Web Development 101.

These are the first “test yourself” questions here and my answers below.

  • How do you declare a variable?

You write “let”, “const”, or “var” followed by the name of the variable you want to create.

  • What are three different ways to declare a variable?

You can use “let”, “const”, or “var”.

  • Which one should you use when?

“Let” is the currently accepted way to declare a new variable. You should use it for any new variable, except constant (unchanging) variables, these can be declared with “const”.
“Var” is the older way of declaring variables. There are reasons for not using it because of it’s behaviour, but it is still seen in older scripts.

  • What are the rules for naming variables?
  1. Use letters, digits, $ or _
  2. First character cannot be a digit
  3. They are case sensitive – use camelCase
  4. Do not use non-English letters
  5. There are reserved words (e.g. let, class, return, function)
  6. Define the variable before using it
  7. Make names concise but descriptive and logical
  • What are operators, operands, and operations?

Operators – they define the operation to be performed between two operands.

Operands – the things operated on (like numbers)

Operations – when we perform an action between two numbers or variables (like division, addition, incrementation)

  • What is concatenation and what happens when you add numbers and strings together?

Concatenation is when two things get added together as a string. Like, “My” “3rd” “Dessert” when added would become “My3rdDesert”.

If you add numbers and strings together they will concatenate into a string. Like, “2” “Apples” would be “2Apples”.

  • What are the different type of operators in JavaScript?

+ Addition
– Subtraction
* Multiplication
/ Division
% Modulus
++ Increment
— Decrement
= Assignment
/= Division assignment
+= Addition assignment
-= Subtraction assignment
*= Multiplication assignment

** Exponentiation

=== Strict Equality
!== Strict Non-Equality
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to

Rarely used bitwise operators:
& AND
| OR
^ XOR
~ NOT
<< LEFT SHIFT
>> RIGHTSHIFT
>>> ZERO-FILL RIGHT SHIFT

  • What is the difference between == and ===?

== is equality.
=== is strict equality.
e.g. let x = “123”;
let y = new Number(123);

x == y is true.
x === y is not true.
Equality is just the same value. But strict equality needs to be the same value and the same type (x is a number, y is a number object).

  • What are operator precedence values?

Similar to high school math – PEDMAS (parenthesis, exponents, multiplication, division, addition, subtraction). These are calculated in JavaScript in order of precedence. The operators are also included in this precedence list.

  • What are the increment/decrement operators?

Increment and decrement take the value and then change it. Increment adds 1 to the value. Decrement minuses 1 from the value.

  • What is the difference between prefixing and post-fixing them?

Prefix – returns new value:
If you put the increment/decrement operator first (prefix) it will perform the action of incrementing/decrementing and then returns the new value to be used right away.

Postfix – returns old value:
If you put the increment/decrement operator second (post-fix) it will return the old value first, then increment/decrement the value.

  • What are assignment operators?

Assignment operators assign a value to a variable.

They are also able to change the value while assigning it.
E.g.,
n *= 3+5 is short for n = n *  (3+5)

The assignment operators have the same precedence as a normal assignment operator, so they run after most other calculations are already done.

  • What is the “Unary +” Operator?

Unary operator acts on a single operand to operate.

For example, x = +x;

If you had let a = 10 then console.log(-a) it would show “-10”.

Whereas, in a binary operation like x + y there are two operands. This means the “+” acts as addition and concatenates them.

 

Google Layout HTML/CSS Project

I am (still) working on the web development 101 section of the Odin Project curriculum.

The first project you are tasked with is using your basic HTML and CSS knowledge to copy the design and layout of the Google Homepage (easier task) and/or the Google Search Results page (difficult task).

Screen Shot 2018-11-22 at 18.24.37.png
You have to build this webpage as part of the Odin Project curriculum

I wrote about finishing the easier page just before Halloween. It’s taken me almost a month, but I finally finished the Hard challenge after a full day coding at home today.

The Process

I started from planning out the layout on paper and figuring out what I needed to do, how the page would be divided and what sections I would need to create.

IMG_2968.jpg
Image © Rebeccode

Then, I started coding and trying things out.

I also had a chance to practice my terminal and git skills to keep versions of the data as I added and changed things.

I had a hard time getting my head around layouts, so I tried to make the Homepage using floats. And then make the search page mostly using flexbox. It was tricky but I found using cheat sheets like this one helped a lot.

Quick Tip:
A lot of times I was confused about why something worked or didn’t work. I tried commenting out the CSS (by hitting Command and /) to see what effect taking out the code made.

The Result

I’m really happy with the result and it is the first time I really “built” something substantial using my coding skills since I was a kid, so it’s a really proud moment!

Screen Shot 2018-11-22 at 18.25.56.png

It’s live here.

Google Homepage Clone

I built my first ever project following with the Odin Project syllabus:

I used HTML and CSS to re-create the Google homepage. The project focuses on arranging the page visually and not actually building in any functionality (so the links don’t go anywhere and the search box doesn’t work).

It was much, much more difficult than I expected.

I also used the command line and Git and GitHub the whole time, so you can see all of my commits. I tried to copy the rules for making commits and writing commit messages.

I kept using a lot of trial and error and I still feel like I don’t quite understand all the display and position attributes fully and their behavior sometimes confused me.

It was extremely fun but extremely challenging.

It is live here.

HTML and CSS Basics – Learning Outcomes Quiz

The Odin Project shows you the learning outcomes at the beginning of the lesson. Then invites you to test yourself on those questions after studying the materials.

These are the questions from HTML and CSS Basics in the Web Development 101 Course.

Note: These are just my answers from my current (limited) understanding. So, if you notice any mistakes or misunderstandings, please leave a comment below.

  1. Why do we separate HTML and CSS?
    Efficiency.
    1) One CSS file can affect many webpages.
    2) If you need to make a change you only need to change on file, not every page where you want the style to change.
    3) Reduced loading time/bandwidth use.
  2. What are classes and IDs (and how are they different)?
    Classes and IDs are ways to specify an element of the HTML. We specify the class or ID in the HTML element. Then we use that as a reference in the CSS to apply styles to that element. It also allows us to apply the same style to many different kinds of elements.
    Classes are less specific – use a dot in the selector in CSS (.class)
    IDs are more specific – use a hash in the selector in CSS (#ID)
  3. What are elements?
    Elements in HTML are things contained in tags. For example,
    <header>The Header</header>
  4. What are tags?
    Tags are the things that identify the element in HTML. For example,
    <br> <a> <h1> 
  5. What are attributes?
    Attributes are in the opening tag of an HTML element. They control the behavior of the element or provide information about it. For example,
    href="link.html"    alt="alt text" 
  6. What are forms?
    Forms are inputs for data from the user of the website. The user can input in the form and submit it. Forms are specified within the HTML.
  7. What is a div?
    A divider in the HTML. It is often used as a container for other HTML. It allows us to specify and apply CSS to that particular section.
  8. What are selectors?
    Selectors are the way we target an HTML element. For example, the tag itself, a class, an ID, an element within a class, or a behavior.
    p div a h1
    .content .navbar
    #content-top #biglist
    .content:hover
    .content p
  9. What are properties?
    Properties are the things we can change and specify for in CSS. For example,
    color: ;  font-face: ; padding: ;
  10. What are values?
    Values are the actual values we input into the properties to decide the size or color.
    For example,

    red sans-serif 10px
  11. What is the “query string” in a URL and what does it do?
    It shows what was submitted from a form. It appears when the form submission method is set to”get” (which is the default). It is only used for non-sensitive data like searches in a search engine. Since it is a string in the URL, it allows you to bookmark that webpage.
  12. What is the difference between “pixels” and “ems”?
    Pixels are set sizes on the page, like 12px is 12 pixels wide on the screen. It is measured relative to the screen size. They are useful for use in exact control of design but it takes away control from the user.
    Ems is relative to the default font size of the document. 1em is 100%. For example, if your default font size is set to 12px:
    0.5em is 6px
    1em is 12px
    1.5em is 18px
    2em is 24px
    They are useful for allowing flexibility in displaying well and adapting to different view ports. It is more fluid design and more accessible for users with sight issues.
  13. How do CSS styles for a particular element get inherited? i.e. how does an element get its “default” styles?
    Default styles already exist in HTML and CSS. Unless you specify otherwise the default CSS rules will apply.
    If you specify a CSS rule for a particular element it has singled out that element so it is more specific than the default, so it will override the default.
    CSS in inherited based on specificity and order in the CSS file. Styles of the same specificity level which are found lower in the CSS document will be applied (as the document is read from top to bottom). If we imagine the computer running down the document, first it will see “.content-box {color: red;}” and make the text red, then see “.content-box {color: blue;}” and make it blue.
    This order can be overriden if one is more specific. For example, if it was”#todaysnews {color: blue;}” then “.content-box {color: red;}”  the first is an ID so it is more specific and would override the class, which is less specific.
  14. What are two CSS attributes you can change to push an element around on the page?
    I feel unsure of this question as the phrase “push around” is a bit vague – does it mean to change position on the page. Or when you resize the window, the content will move around and be flexible in it’s position?
    During the CSS lessons we covered:
    display
    position
    float
  15. What are the three different ways to include CSS in your project or use CSS to style a particular element?
    Inline – inside the HTML element that you want to style
    For example,
    <h1 style=”color:red;padding:10px”>
    Internal – Write the CSS within style tags inside the head of the HTML document.
    <style>
    h1 {
    color: red;
    padding: 10px;
    }
    </style>
    External – in a style.css document which is linked to in the head of the HTML document.
  16. What is the “default stylesheet” or “user agent stylesheet”?
    These are both names for the default CSS stylesheet set by the browser.

  17. Why use a CSS reset file?
    If you want to reset the default stylesheet you can use a CSS reset file. For example, the default stylesheet automatically has some padding so you can override this with 0 padding.
    This allows you to start your style coding from a baseline that should avoid issues – like the browser automatically adding padding and making your calculations for your layout off.

 

How much would a coding Bootcamp really cost in Japan?

I was wondering how much financial commitment is really involved in joining a coding bootcamp.

A coding bootcamp typically involves not working and studying full-time for 9-12 weeks to devote all your time to learning programming.

There are two big coding bootcamps that opened in Japan over the past two years:

  1. Le Wagon
  2. Code Chrysalis

I am not seeking to assess their contents and benefits here, just the money matters of studying full-time in Tokyo, Japan.

Note: All numbers below are based upon publicly available information at the time of writing and current exchange rates.

Tuition Fees

Le Wagon Code Chrysalis
Tuition ¥790,000 ¥1,030,000
US Dollars $7,031 $9,167
British Pound Sterling £5,372.00 £7,004.00

The Le Wagon course is 9 weeks, whereas the Code Chrysalis course is 12 weeks. So, their weekly tuition is actually pretty similar:

Le Wagon Code Chrysalis
Weekly Tuition ¥87,778 ¥85,833

How much money would I actually need, though?

If we assume you have a rent of 70,000 yen and bills of 10,000 yen and put aside 4000 yen per day for travel and expenses:

Le Wagon Code Chrysalis
Living Expenses ¥252,000 ¥336,000
Rent ¥175,000 ¥210,000
Bills ¥25,000 ¥30,000
Total Expenses ¥452,000 ¥576,000
Grand Total ¥1,242,000 ¥1,606,000
US Dollars $11,054 $14,293
British Pound Sterling £8,445.60 £10,920.80

And, if you do get a job immediately after graduation, it will still be one more month before you receive your first months wages. So, you will need to keep aside at least two months living expenses.

That would make the grand total:

Le Wagon Code Chrysalis
Grand Total ¥1,642,000 ¥2,006,000
In US Dollars $14,614 $17,853
British Pound Sterling £11,165.60 £13,640.80

I think it is not possible to work during the bootcamps as their are so intensive and need your full time and focus in order to succeed during them.

I’d say that’s a pretty big financial commitment. Comparatively, a year of university study tuition fees can be up to £9,250 in the U.K.

Is it possible for me?

I definitely can’t answer that – it depends on how much you have in savings, how much passive-income you make and many other factors.

However, Code Chrysalis note on their website that you can discuss financing options with them, though.

Is it worth it?

Another question I can’t answer. I did these calculations purely out of curiosity.
There are a lot of YouTube videos, Quora questions, and reddit threads online talking about whether bootcamps are worth it or not.