CSM Mobile App Dev Guest Lecture, Fall 2016

Ken Hoff

2016-11-30

A little about me

Hi there! I'm Ken Hoff. You can find out more about me and my work at https://hoff.tech/, and feel free to get in touch at mailto:[email protected].

Some dumb things that I have built

How to be a web developer

What we're going to learn today

Let's get tooling out of the way first

What text editor should I use?

I primarily use Atom for all my development. It's pretty customizable - I use a bunch of community-created plugins with it, including beautifying, linting, and language-specific support.

You can also use Sublime Text, Visual Studio Code, or Notepad++. Even just Notepad or TextEdit works too!

For web development, I generally don't recommend using a big IDE like XCode, Visual Studio, Eclipse or IntelliJ. The project management overhead costs generally aren't worth it for me, as most of my build steps happen from a command line. However, if you've got something that works for you, use it!

What browser should I use?

I primarily use Chrome. I'd recommend that you do too.

It's fine if you want to use Firefox, Safari, or even Edge (the instructions will differ a little bit)

However, I wouldn't recommend using Internet Explorer. Old versions of IE (and even current versions!) have notoriously bad support for some HTML, CSS, and JavaScript features. Check http://caniuse.com/ for more info on which ones.

Writing your first web page with HTML - index.html

Alright, bust open your text editor, and create a new file titled index.html.

Then, put the following in the file and save it:

<h1>Hello, World!</h1>

Then, double-click the file in your Finder/Explorer. It should open up in your browser. (you can also use cmd/ctrl-O from the browser to open the file.)

Debugging HTML, CSS, and JavaScript: the browser's dev tools

To debug sites, we'll be using Chrome's built-in Developer Tools.

Chrome's Developer Tools are located in View > Developer > Developer Tools. You can also right-click anywhere on the page and click Inspect.

You'll mostly be staying in the Elements tab. It has a view for all of the HTML on the page, a view for all the styles on the page (declarations and computed), and you might already have a JavaScript console open. (If you don't see a console anywhere, try hitting Esc - if that doesn't work, click the three dots in the upper right and choose More tools > Console.)

HTML elements

<a href="https://hoff.tech">Hofftech</a>

There's four parts to every HTML element:

Try messing around with a bunch of different HTML elements:

A couple notes:

Starting to lay out our Kiva app

Add a little bit of content for your Kiva app - I've included a title, a section where I'd like to put the list of loans, and some links to relevant pages.

Don't forget to include an html and body tag!

<!-- index.html -->

<html>
    <body>
        <h1>Ken's Kiva.org Loan Display App</h1>

        <div class="navigation">
            <a href="https://www.kiva.org/" target="_blank">Kiva.org</a>
            <a href="http://eecs.mines.edu/Courses/csci498B_fall2016/" target="_blank">Class Syllabus</a>
            <a href="https://hoff.tech/" target="_blank">Hofftech</a>
        </div>

        <div id="loans">
            (This is where all the loans are going to go!)
        </div>
    </body>
</html>

Styling your first web page with CSS - style.css

In order to start appling styles to our page, we need to use the link element to point to an external stylesheet. Put this inside of your head tag on the page, which should be inside the html tag, but as a sibling before the body tag.

<link rel="stylesheet" href="style.css">

(It's possible to use the style element instead, and just declare CSS styles inside the HTML file, but that's not good practice.)

Then, create a style.css file and put it in the same directory as your index.html.

/* style.css */

h1 {
    color: blue;
}

A CSS declaration is composed of two parts:

Selectors

There's a whole bunch of different selectors that we can use to select elements on the page.

Styles

There are tons of different styles that we can apply to our elements - try some of these:

Reference material

And finally, here's a bunch of reference material that you can check out

Adding some style to your Kiva app

Your index.html should now look like this:

<!-- index.html -->

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Ken's Kiva.org Loan Display App</h1>

        <div class="navigation">
            <a href="https://www.kiva.org/" target="_blank">Kiva.org</a>
            <a href="http://eecs.mines.edu/Courses/csci498B_fall2016/" target="_blank">Class Syllabus</a>
            <a href="https://hoff.tech/" target="_blank">Hofftech</a>
        </div>

        <div id="loans">
            (This is where all the loans are going to go!)
        </div>
    </body>
</html>

And I'm going to add some styles to make my Kiva app look a little better. Get creative!

/* style.css */

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    /* these are generally built-in fonts on the system - check out https://fonts.google.com/ if you want some fancy ones */
    color: #333;
    /* apply a very slightly off-black color to our entire body to soften the black */
    margin: 0;
    /* there's always a little bit of margin around the edges of the body tag, so this just removes those. */
}
h1 {
    background-color: #63a541;
    /* the same color that Kiva's site uses */
    border-bottom-color: #49953f;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: white;
    text-align: center;
    padding: 1em;
    /* 1 "em" is equivalent to the height of 1 line of text, and will change depending on how big your font-size is. */
    margin-bottom: 0;
}
.navigation {
    text-align: center;
    background-color: #63a541;
    color: white;
}
.navigation a {
    display: inline-block;
    /* spoooooooky dark magic! I don't have time to go into CSS layout in-depth, so I'm going to leave this as an exercise to the reader. */
    padding: 1em;
    text-decoration: none;
    color: inherit;
    /* "none" and "inherit" are reserved CSS keywords. "none" specifically indicates the zero/null value for a style, and "inherit" says "just use the value that the parent element has" */
    border-right-color: #49953f;
    border-right-style: solid;
    border-right-width: 1px;
}
.navigation a:last-child {
    /* fancy selector: only selects the last <li> in a sequence of <li> elements */
    border-right: none;
}
.navigation a:hover {
    background-color: #49953f;
}

Manipulating your first web page with JavaScript - script.js

Now that your page is all styled up and ready to show some loan data, we can start using JavaScript to listen for user input on the page, make requests across the network, and manipulate the page.

The JavaScript Console

First, open up the Developer Tools on your page, and open the JavaScript console.

Type in the following:

console.log("Hello, World!");

Including JavaScript on your page

We can include JavaScript on our page by using the script HTML element, along with (optionally) the src attribute.

(you can put JavaScript directly inside the script element, but it's better practice to put it inside an external file.)

Inside your index.html, put the following at the bottom of your body element:

<script src="myscript.js"></script>

Then, create a new file myscript.js and put it in the same directory as your index.html:

// myscript.js

console.log("Hello, World!");

Then, head back over to your browser, reload the page, and check the JavaScript console!

A brief history of JavaScript

W3's Short History of JavaScript

The 2016 Javascript Stack

Listening for user interaction

Let's add a button to the page, that, when clicked, loads some loans from the Kiva API.

First thing we'll need to do is actually include the button, then tell the button to run a bit of code every time that it's clicked.

Include a button on your page:

<button id="load-loans-button">Load loans</button>

// myscript.js

document.getElementById("load-loans-button").onclick = function() {
    console.log("Hello, World!");
}

Head back over to the browser, refresh the page, click the button and check the JavaScript console to verify that it works.

Remember: You have to put the script element for your script (myscript.js) at the bottom of your body element!

Your code should now look like this:

<!-- index.html -->

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Ken's Kiva.org Loan Display App</h1>

        <div class="navigation">
            <a href="https://www.kiva.org/" target="_blank">Kiva.org</a>
            <a href="http://eecs.mines.edu/Courses/csci498B_fall2016/" target="_blank">Class Syllabus</a>
            <a href="https://hoff.tech/" target="_blank">Hofftech</a>
        </div>

        <div id="loans">
            (This is where all the loans are going to go!)
        </div>

        <button id="load-loans-button">Load loans</button>

        <script src="myscript.js"></script>
    </body>
</html>

// myscript.js

document.getElementById("load-loans-button").onclick = function() {
    console.log("Hello, World!");
}

Making web requests with JavaScript

Browsers send HTTP requests with XMLHttpRequest.

Unfortunately, it's kind of difficult to use, so people have written libraries that make it easier.

We're going to use jQuery to make simpler HTTP requests. It's a pretty huge JavaScript library, but the part that we're using just wraps XMLHttpRequest.

jQuery's AJAX documentation: http://api.jquery.com/jquery.ajax/

Kiva's API documentation - http://build.kiva.org/api

To include jQuery on your page, put this in your head element:

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

To actually make an HTTP request, we use the $.ajax() method:

$.ajax("http://api.kivaws.org/v1/loans/newest.json")
    .done(function(data) {
        // the request succeeded
        console.log(data);
    })
    .fail(function(error) {
        // the request failed
        console.log(error.responseText);
    });

Clicking the button -> sending the HTTP request

To run our HTTP request code every time the button is clicked, just put it inside your onclick event handler, like this:

// myscript.js

document.getElementById("load-loans-button").onclick = function() {
    console.log("Button was clicked - running our HTTP request...");
    $.ajax("http://api.kivaws.org/v1/loans/newest.json")
        .done(function(data) {
            // the request succeeded
            console.log(data);
        })
        .fail(function(error) {
            // the request failed
            console.log(error.responseText);
        });
}

Manipulating the page with JavaScript

Now that we've got all of our loans in JavaScript, we want to actually show them on the page.

To do that, we've got to create some new HTML elements, and attach them to the page.

I'm going to loop over each one of the loans that we got in response from the Kiva API, create a new HTML element for that loan, and then attach it to another element on the page.

// myscript.js

document.getElementById("load-loans-button").onclick = function() {
    console.log("Button was clicked - running our HTTP request...");
    $.ajax("http://api.kivaws.org/v1/loans/newest.json")
        .done(function(data) {
            // the request succeeded
            for (var i = 0; i < data.loans.length; i++) {
                console.log(data.loans[i]);
                var newElement = document.createElement("div");
                newElement.innerHTML = data.loans[i].name + " - " + data.loans[i].activity
                document.getElementById("loans").appendChild(newElement);
            }
        })
        .fail(function(error) {
            // the request failed
            console.log(error.responseText);
        });
}

Web dev freestyling, if we have time

Things we can do to improve our Kiva app:

What questions are there?

When you realize that web development is your life, forever:

More Dumb Fun Web Stuff

Not strictly web dev stuff, but some programming/systems/teaching-you-to-learn games you might like:

Obligatory Hofftech Pitch

Students: say hi! I can answer questions about life after college, web dev, interviewing, Microsoft, if you need me to look at your code, or even if you just want to get coffee. Totally down to help out students however I can. (you obviously don’t need to pay me)

If you or someone you know is working on a charity, 501c3, or social impact project, let me know. I can usually spend an evening or two on the project in exchange for pizza and beer :D

And if you find someone that needs an app (or anything else) built, definitely get in touch! I’d be happy to hire you on as a subcontractor so you can make some money and get some more experience.

Hit me up at mailto:[email protected].

How to be a web developer

Excelsior! 🚀

Thanks!

mailto:[email protected]

Appendix