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.

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.

 

Odin Project – Community

I was working through the Odin Project course.

The first course is Web Development 101.
There is a lesson called “Your First Rails Application”.

After learning about the command line, you learn how to configure Git and GitHub.

Then you follow the steps to create a Ruby on Rails web application.
Which you can see here:
https://github.com/rebeccode/OdinSetup

After my initial commit after following all of the instructions – it didn’t work.

I couldn’t figure out why and I wasn’t sure what to do.

I went to the Odin Project Gitter – which is like a community forum and chat for people interested in the Odin project.

I posted my issue:

odinprojectstuck.png

I wasn’t expecting any response – but actually two or three people tried to help me.

One person helped to solve the issue and once I’d made the change he suggested it the code compiled and it worked!

odinprojectunstuck.png

Within 20 minutes of my posting my query on the Gitter chatroom I had managed to fix everything!

I felt this sense of appreciation and pride – for the first time I felt like I’d become part of a community here.

My first rails app can be found here.
It is the code provided by the Odin Project for a kind of car naming list. You can add new cars, edit ones already in the list, and erase them from the list.

I don’t really understand all of what I did there because I was just following instructions. As I progress through Odin it’s going to go back and teach topics in more detail.

Next, I’m going to be learning more in depth about Git and Github.

Accenture Digital Skills Free Courses

FutureLearn (a mass open online course site) is partnered with Accenture and they are providing a bunch of free accredited courses with no deadline (i.e. you get a certificate at the end that you can show with a transcript of what you studied and you can take as long as you like to do them).

Their digital skills courses include:

  • User Experience (UX)
  • Retail
  • Digital Marketing
  • Web Analytics
  • Grow your career
  • Social Media
  • Mobile

Each course takes 2-3 weeks to complete at 1-2 hours per week.

You can look at the details on their website here.

I’m particularly interested in the UX course (that’s how I found this series of courses).

I signed up for them all and I’ll update here about my progress with them and a review at the end.