THURSDAY TECH TIP! “When you’re stuck, write your program on paper. I’m serious. It’s magic. This is standard practice in programming competitions. (I think it works because when you don’t have to think about syntax you have more excess brain power to solve the actual problem.)” — Joseph Gentle ⚡

THE TRUTH IS SPOKEN. Stop jumping straight into the code! 🖥️ You have to analyze your problem and truly understand it before you can create a program or system that will help solve it. 👩‍💻

•
•
•
•

#womenintech #tutorial #technology#programming #hacker #softwaredeveloper#code #howtocode #coding #learntocode #developer #learn #technical #learning

For the first few days, everything worked great. There were a couple of obvious bugs in the beta, but none that bothered me. I was able to use the Unity plugin to develop some basic AR experiences, including taking a picture with a 3-D model, but nothing too crazy.

Then, one day, I was on the phone with a friend and the screen blacked out. The phyiscal buttons (Volume, Lock/Wake, and Home) all worked, but nothing happened when I touched virtual buttons on the screen.

This meant I could no longer use my phone productively and it was essentially no better than a brick.

Usually when an iPhone freaks out, the first thing you should do is a hard reset. On all previous phones, this meant pressing the Lock/Wake button and the Home button down at the same time until the phone restarted itself. Unfortunately, for the iPhone 7, the way to do a hard reset had changed and by pressing down the Lock/Wake and Home buttons, all I did was take a ton of screenshots of my phone background.

Luckily, I have an Apple Watch so I was still able to use some of the functionality of my phone, but not all. This meant..

• iMessage on the Apple Watch became my new messaging platform
• I couldn’t accept vemno requests (sorry friends)
• Amazon Echo became my morning alarm
• Calling people via the Apple Watch became a regular thing
• No more music during my runs :(

After a day, I finally googled how to reset an iPhone 7, thinking it had to have changed, and all you have to do is press down the lower Volume button and the Lock/Wake button at the same time. With a hard reset, the phone was back to normal and I would never send messages with iMessage on the Apple Watch ever again.

Now a question for you! How would you adapt if your phone randomly broke during the day?

It lies on the 3rd floor of Columbus Circle’s set of shops and is about 4,000 square feet. As you make your way in, you’ll notice about a fourth of the store is dedicated to Amazon’s technology products, including the Amazon Echo, Amazon Tap, Echo Dot, and the brand-new Echo Show.

This is the first time Amazon has been able to get their technology products in front of real people in their own branded space. There are also various Kindles and Amazon fire tablets in this section.

However, this “tech area” isn’t the only place where Amazon has technology. Throughout the entire store, Amazon uses data to help you decide if something might be worth buying. This starts with the prices.

Nothing in the store has a price tag. By removing the price from the main display, customers might be more tempted to pick up a bunch of things. With their prime membership usually giving them a deal, they feel good about their purchase, even though they might not have purchased books online in the first place. To find the price of an item, a customer can use their Amazon App or scan their item under one of these special wall-mounted scanners. Amazon Prime members usually get a steep discount (30% or more) on the list price.

Amazon also uses the data they have collected from their online empire to inform customers of ratings, reviews, and other important information. Each section of their store nearly matches with a type of search you could make on their website.

Each book is also accompanied with either a customer review or a data fact, such as “97% of reviewers rated this item 5 stars.”

Each card also states when it was last updated, so you have an idea of how recent the information is.

In the back of the store, Amazon provides in-store recommendations based on popular books you have probably read before.

Amazon truly uses the data they have collected in every possible way. Their shopping bags even include “Popular Highlighted Kindle Quotes!”

This store could be seen as Amazon’s brick and mortar bookstore experiment, but rather, it’s testing a new way of selling merchandise. With the books are facing out, presence of reviews and data right next to the merchandise, and lack of price tags, it will be interesting to see if anyone else adopts a similar model in their stores.

Read the article or watch the video!

Today we are going to put a local web application on the Internet with Heroku. Heroku is a place we can host our code so that anyone around the world can see it. Let’s take the code from the Angular Endpoints tutorial and put it on the web. If you haven’t done the Angular tutorial, no worries! We will barely look at that code — we are just focused on getting it on the cloud. We’ll have to use Heroku because our angular code has directives, which are dynamic and won’t work on GitHub Pages.

Going into our folder, we’ll create a new file called package.json. This will contain all the metadata (details) about our application. Most importantly, it will list our dependencies that are needed to run our website and we will install those dependencies later. For now, just fill out your package.json like this…

We name our app, give it a version, and tell it to start at the server.js file. We will be writing the back-end (or server-side) of our application in the server.js file with something called Node.js. Node.js is a platform that allows us to write our server-side in JavaScript instead of some other back-end language. Before, when we created the HTML, CSS, and Angular.js side of our application, we were creating the front-end — now we are writing the back-end.

We also have one dependency, Express (Version 4.13.3), and this is a Node.js framework that makes it easy to get our server up and running. Next, we’ll create our Procfile, which will tell Heroku what command to run and where to look to start our server. In this case, it should look to the server.js file.

Lastly, we will write out server.js file with Node and Express.

First, we require Express and create an Express application. Then, we set the port number, which could evaluate to one of two things. With process.env.PORT, we allow Heroku to set the port number (usually port 5000) and if that doesn’t work, then we default to port 8080.

Next, we write app.use(express.static(__dirname))s so that our static files (images, CSS) can be served and shown on the webpage. __dirname evaluates to the file path of the directory (folder) so all of our static files should be in or nested within this directory. With app.get(), we set up some routing for our application. When it is first loaded (‘/’), we run a function with the request and the response as parameters and tell the response to render the index (really index.html) file. This file will be able to access all of our front-end code, including our directives, since everything is linked inside of it.

Finally, we start our server. In the world of the Internet, users search a URL and by doing so, they send a request. The server, which is always listening for requests, sends a response that contains the webpage. To start our server, we have to get it to listen so we run the app.listen() function with the port number we set earlier and print out that the app is running.

Going to the command line, we’ll cd into our current directory (learn basic command line / terminal here on my channel) and install our dependencies. We will be using npm, which is a part of the Node.js platform, so if you don’t have npm, you can download it here with node. Once in your directory with the package.json file, write npm install. This will install all of our dependencies or in this case, Express.

With our local code set up, we’ll go to the internet and create a Herkou account. To do this, we’ll go to https://signup.heroku.com/login and enter our information.

For primary development language, we’ll choose Node.js and then, we’ll click submit.

Now, we need to confirm our email…

And once it is confirmed, set the password and then proceed with the account.

Our Heroku account is set up! We just need to bring Heroku to our command line so we can push it up to the cloud. To do this, we’ll download the Heroku Command Line Tools at https://devcenter.heroku.com/articles/heroku-command-line.

With the tools downloaded, double check to see if you have it by writing heroku — version

Next, from the command line, we will login with the command heroku login. After entering your information, you should see something similar to this…

We can see if this application works if write go heroku local web in the command line…

… and then go to http://localhost:5000.

There’s our application! Now, this is only running locally on my computer — meaning if you go to localhost:5000, you will not see what I see. We’ll go ahead and stop our localhost with command (or control) C and get this code to the cloud where everyone can see it. To do this, we will deploy with Git. If you don’t have git, you can click here, download it, and come back to continue. You can check if you have git with git — version (similar to how we checked with heroku). Once you have git, you can intialize this directory as a GitHub repository with the command git init. To learn more about how git works, check out these tutorials.

Next, we’ll add all our changes to the staging area with git add . and then commit them with git commit -m “Initing”.

Now, we are ready to push to the cloud (Heroku), which will host our code! First, we’ll make this a Heroku application with the command heroku create.

This creates our application and names it guarded-brook-64454. If you are doing this tutorial along with me, yours will be named something else and that’s okay! If we go back to our Heroku dashboard, we’ll actually see our app created on the site — however, it doesn’t have our code yet!

To get our code up on Heroku, we’ll write git push https://git.heroku.com/guarded-brook-64454.git master. If you are creating your own Heroku app, instead of guarded-brook-64454, you should put your own app’s name.

It may take a minute for this command to run and so go get a coffee or something. Once it’s done you should see something like…

Notice, it says https://guarded-brook-64454.herokuapp.com/ deployed to Heroku. This means if we go to https://guarded-brook-64454.herokuapp.com/, we should see the result of our code — aka our website. Going to this URL…

And we see exactly what we were expecting! If you go to this URL right now, you’ll also see this code (as I won’t be changing it). If we changed our code, added and committed the changes, and pushed the altered code up to this Heroku application, we would see something different (our altered app). That’s it for this tutorial! Check back next Friday for another post.

Things to Remember:

<!-- Package.json -->
- This file holds the metadata for our application.
- All metadata is held within a JSON object.
- This also holds the dependencies that npm install will download.

<!-- Back-End Files -->
- package.json
- Procfile
- server.js

Plus a Little Extra:

<!-- More on Heroku Command Line-->
https://devcenter.heroku.com/articles/heroku-command-line

<!-- What are Node.js, Express, and Procfile? -->
Node.js - a platform that allows us to write our back-end in JavaScript
Express.js - a Node.js framework that makes writing our back-end easier
Procfile - allows us to declare what commands should be run by Herkou - here we are running a web application with Node.js that starts with the server.js file.

Code from this blog post

Read the article or watch the video!

GitHub Pages is a static site hosting service that allows us to put our local webpages on the Internet. In order to use GitHub Pages, first you’ll need a GitHub account. GitHub is a website so we can just go to the www.github.com and create a login.

Here, keep your account public. It’s the free option and just means that anyone can see your projects (which isn’t a huge deal right now).

Next, we’ll need to navigate back to the homepage by clicking the cat icon in the top left corner. Once on the homepage, go to your email and click the link to verify so we can create a new project. Once your email is verified, go ahead and press the Start a Project button.

Now, we can set up our project (website) that will be on the Internet. Here, it says Create a Repository and a repository is just another name for project or folder. Don’t get too caught up in the terminology for now — just know that this is where the code for our webpage is going to go.

Name your project your username.github.io. So if your username is harrypotter, your project name should be harrypotter.github.io. It is very important that it’s named this way because that’s how we get access to GitHub’s free hosting service (GitHub Pages). Go ahead and keep this project public — which just means anyone can see the code — and initialize it with a README. The README usually contains an in depth description of the project, which you can write later. Clicking submit…

And now we have our project! Now how do we get our website code there? Well, we can just create new files and code it all here online or you could upload files from your computer. Another option is to use the command line, which would allow us to code this locally on our own computer with Sublime and then upload it to GitHub through the text-based terminal. If you are interested in that, check out GitHub Terminal Pt. 2 video. You could also do this with the applications that GitHub has, but doing it from the terminal feels a lot cooler.

To use the terminal with git, you’ll need to download the git. The easiest way to do this is to download the applications provided by GitHub by clicking Clone or Download and then Open in Desktop. For the purposes of this tutorial, we will just be using the github website to write our code.

To start developing our website, we’ll go ahead and click Create New File and call it index.html. Inside of here, we’ll just create a simple header that says Hello World.

Then, we’ll scroll down and commit the change by pressing Commit new file. In the text box, you can add a description about the change you made, but we’ll just keep it blank for this tutorial.

Now, if the go to our github.io website, we’ll be able see the results of our code.

And there we see our Hello World. If we go to another computer and try to access this website, we’ll also see Hello World. Right now, anyone in the world can go to a yourusername.github.io website and they will see the results of whatever code is written in the yourusername.github.io repository.

What if we want this header to say Hello Bob instead? Well, we can go back to GitHub and click the file.

Then, we can press the pencil icon and edit the file to have Hello Bob instead along with some extra text.

After committing the change, we can refresh the website and now we see Hello Bob and I am a hacker. If you don’t see this change immediately on your website, try waiting five minutes and refresh again.

You just learned how to use GitHub Pages!! Remember, this will only work with static sites so there can’t be any dynamic angular directives or routing going on because that won’t work. However, you can have directives and routing on other hosting sites, such as Heroku. Due to the fact that classes are back in session for me, tutorials might be coming out every two weeks instead of every week. However, the next post will be on how to use Heroku to host your Angular website so that anyone in the world can access that as well. See you then.

Things to Remember:

<!-- Repository Name for Free Hosting-->
Given the username blondiebytes, the repo name should be...
blondiebytes.github.io

<!-- How to Get Free Hosting -->
1. Create GitHub Account
2. Make a project / repo with the appropriate name
3. Put HTML/CSS code in that repo
4. Go to the appropriate web URL and see your site!

Plus a Little Extra:

<!-- More Information on GitHub Pages -->
https://pages.github.com/

<!-- How to Get More Free Hosting -->
1. Create more accounts
2. Create multiple organizations with one account

<!-- Example of a GitHub hosted-site -->
https://blondiebytes.github.io/

Code from this blog post

Read the article or watch the video!

Today, we’re going to talk about Angular services. A service is something that talks to our controller and helps us organize where we get our data. We have some code here that initializes an Angular application, has a controller that controls the data, and a simple index.html view to display the data. We are going to make it so that it will display the current top Technology stories from the New York Times.

To get our data from the Times, let’s take a look at the New York Times Developer website.

There’s a lot of data we can access from the New York Times, but first we’ll need an API Key. An API is an Application Programming Interface and it’s how we’ll get our data from the New York Times. We can access the API with an API key. This key that will be specifically assigned to us so if we try to hack anything or abuse the API or doing any suspicious, the New York Times will know that it is us and block our access. So let’s go ahead and get an API Key.

We’ll fill out the form with Top Stories V2 selected in the dropdown and once we hit submit, the API key, which will consist of letters and numbers, will be emailed to us. For this tutorial, I’m going to block out my API key because it’s supposed to be a secret — kind of like a password. If I showed it here, you could do some hacky stuff and it would all be pinned on me.

Once we get our key, we can have some fun. We’ll go ahead and go back to the main developer page and scrolling down, click on Top Stories V2.

We’ll click the Try It Out button and mess with their demo set up here.

Right now, we are unauthorized, but once we insert our API key on the left, we’ll be able to use the API.

So inserting our key, we can see what this API does. For the Parameters, we have section and format, where section has the value home and the format is a JSON object. A JSON is just a way we can organize our data in JavaScript so don’t worry too much it for now, just know our data from the New York Times is formatted as a JSON. In this JSON on the right here, we can see what data this API returns. We get a status code, a copyright, and the number of results returned along with a bunch of other stuff. We only really care about the results aka our Top Stories from the Home section.

When we access this data in our Angular application, we will want to iterate through this results array (where each result is an article) showing the title, abstract, and a link to the article. Notice that the API does not give us the full article text since you have to pay to read the New York Times. In other words, the New York Times is allowing us access to some data (article titles, images, etc), but not all of the data it has. To get data on the Top Technology Stories, all we’ll have to do is change the value of the section parameter to Technology instead of Home

Now how do we get this JSON into our code? We’ll use $http, which is another service that allows us to get information from the Internet. We could get the data in the controller like we did in the previous tutorial, but to make our application more organized, we’ll use a service. To do this, we’ll create a new folder called services and put a file called nyt.js inside of it. In the file, we’ll write some code that initializes a new service that uses $http.

To get the New York Times data, we’ll need to add an HTTP GET Request. We can somewhat guess what the endpoint will be by looking at the sample code in the developer demo.

In the JavaScript sample code, the New York Times uses AJAX instead of Angular, but we can make it work for our purposes. We’ll make a GET Request with the URL shown in the demo and then add in our API key as an argument to the api-key parameter.

Now our service is set up — it gets data from the New York Times and returns it! With this the service ready-to-go, let’s access it and use it in our controller.

Here, we insert the service as a dependency, meaning the application won’t work if we don’t have the code for the service. In the controller, we run the service and if it is successful, the function with the data will be run. To see if any of this works so far, we print out the data inside the function. Now, let’s import the service into our view, open a web browser, and see what happens.

And we get the JSON we saw in the demo — except a lot less formatted. Let’s go back to the code and change it so we take what we want from this data, put it in scope, and then access it in view.

If you look back at the JSON object, you’ll see that it had an attribute called results that was an array. Each item in the results array has a title, abstract, and url. Here, we create an object called story and put these properties into it. Finally, we add the story to the list attribute in the scope, which will contain all of our stories (aka our Top Technology articles) in the end.

Now with the data in our scope, we just need to access it in our view.

Here, we access the list attribute from the scope and iterate through all the stories inside of it. We display each story’s title and abstract and give a link to where the user can access the full text. Let’s open this up in the browser and see what we get.

There we go! Now, we have a list of the most recent Top Technology stories, each given with a title, abstract, and a link to their full text. That’s all for now, but next time, we’ll talk about how to host your webpage on a server with GitHub pages and make it available to everyone around the world! See you then.

Things to Remember:

<!-- Example Endpoint for NYT Top Stories V2 API -->
https://api.nytimes.com/svc/topstories/v2/technology.json

<!-- How to Create a Service -->
app.factory('serviceName', ['$http', function($http) {
	// go get data with HTTP request and return it
}])

<!-- How to Make a GET Request with Parameters-->
return $http.get("https://api.nytimes.com/svc/topstories/v2/technology.json", 
       {params: {'api-key': "keyHere"}})
		.success(function(data) {
                    	return data;
        	})
 
        	.error(function(err) {
                    	return err;
        	})

Plus a Little Extra:

<!-- More Documentation on the New York Times API -->
http://developer.nytimes.com/

<!-- How to Access a Service inside of a Controller -->
app.controller('MainController', ['$scope', 'serviceName', function($scope, nyt) {
	serviceName.success(function(data) {
    	// do stuff with returned data
    })
}])

<!-- Example of JSON Object -->
{ 
	"day" : "August 5",
	"favorite_memory" : "Going to the Store"
	"favorite_food" : "Pizza"
	"favorite_candy" : "Skittles"
	"favorite_activity" : "Filmmaking"
}

Code from this blog post

Read the article or watch the video!

Here, we have our list application from last time. We have our to-do list and our books list and when we add an item, it gets added to the list.

But what if we had an ISBN number of a book and needed to add that to our books to buy list? We wouldn’t want just the number to show up. We’d want the title and author of the book to show up instead and we can do this by using the Google Books API.

In our index.html, we call a method called addItem that adds the book to the list. We can change this method so that when it takes the user input, we use the Google Books API to change it and add the result to our list versus just adding the number to the list. To do this, we’ll need to go to our MainController.

We’ll need to change the addItem method so that it checks if the input is an ISBN number and if it is, add the appropriate title and author to the list. What defines an ISBN number? Well, for this case, we’ll say it’s an item that is 10 or 13 characters long and consists of all numbers. If it’s an ISBN number, we’ll print that it is an ISBN number and if it’s not then we’ll print that it is not.

Now, with this in place, we should define the hasAllNumbers function. This may look a little strange at first, but it will make sense in a minute.

Here, we have something called a regular expression. Basically, it will return true or false, based on whether the input matches this expression.

• / means the start of an expression that we are about to define.
• ^ means that we will start our “matching” at the beginning of the input versus in the middle or at the end.
• [0–9] means the input should match any digit 0–9 and combined with the caret in front means the first character should be a digit.
• * means we can have any number of the previous expression, which means in this case, we can have as many digits as we want.
• $ means this should be the end of the input
• / closes the regular expression.

If this is all true for the input and the input matches the rules in the regular expression, then /^[0–9]*$/.test(item); will return true, otherwise it will return false. In other words, our expression above tests if the input consists of all digits — it will return true if it does and false if it doesn’t. It may consist of no characters or 15 characters, but our other test in the if statement checks if it is the appropriate length so we don’t need to worry about that here.

So let’s save this, stop our http-server, and close our browser. The reason we must do this is because of caching issues — the browser still thinks we are running an older version of the code. We’ll restart our http-server, open a browser in incognito mode, and go to our local host URL. Next, we’ll add an ISBN number and if we open the console, we should see “Is an ISBN number” printed out.

If we add something that is not an ISBN number, then “Not an ISBN number” will be printed out.

So our test for ISBN numbers works! Now, we just need to use the Google Books API to convert the input and then add that converted input to the list. Going back to our controller, we’ll add a service called $http. We’ll talk more about services in the next video, but this allows us to hit the endpoint for the Google Books API and get data from the internet.

After doing some research, I found that if we go to the URL https://www.googleapis.com/books/v1/volumes?q=isbn: where the ISBN number is after the colon, we get a JSON object that gives us a bunch of data about a given book. A JSON is just a way of ordering data in JavaScript and we won’t worry about it too much for now. So if we just use a random ISBN number here and open the page, we’ll see some data.

Going back to our MainController, we can get this data into our code by going…

Here, we use the $http service and make a GET request to get data from the https://www.googleapis.com/books/v1/volumes?q=isbn: + item webpage. The data we get depends on what ISBN number (item) the user inputs. If the GET request is successful, then we will run the function with data as a parameter. The value of this parameter will be the data from the webpage.

Going back to the JSON object displayed here, we can see that the title is nested within volumeInfo, which is nested within the first element of the data’s items. We can also see that the author or authors are nested within volumeInfo as well. To access these specific things, we can add some more code to our MainController.

We’ll want to push a new item to our itemList, but what is this item? It should be a String consisting of the title and author from the data we just got from the internet. We have the data so to access the title we’ll write data.items[0].volumeInfo.title and to access the author we’ll write data.items[0].volumeInfo.authors. Now, we’ll just move the itemList.push(item); to the else clause and we will be good to go!

Now, if we go ahead and close all of our windows, stop http-server, start it again, and open an incognito window, we’ll be able to test our new code.

And it works! I hope you learned something in this tutorial and next week, we’ll go more into Angular services. See ya then.

Things to Remember:

<!-- Example Endpoint for Google Books API -->
https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699

<!-- How to Add $http -->
app.controller('ControllerName', ['$scope', '$http', 
	function($scope, $http) { /* implementation */ }])

<!-- How to Make a GET Request -->
 $http.get('https://www.googleapis.com/books/v1/volumes?q=isbn:0747532699').
 	success(function(data){
 		// access data and do something with it
    })

Plus a Little Extra:

<!-- More Documentation on the Google Books API -->
https://developers.google.com/books/docs/v1/using

<!-- Example of JSON Object -->
{ 
	"day" : "August 5",
	"words_of_the_day" : [
				"firecracker", 
				"computer science",
				"software development"
			]
}

Code from this blog post

Read the article or watch the video!

Angular helps us build dynamic web applications, but we haven’t seen all that it can do just yet. Today, we’ll be using a directive to help simplify our code and make it more modular. We will be building off of our To-Do list application from last time so feel free to download the code here if you don’t have it.

Right now, we have a to-do list, but what if we wanted to add a to-buy list? Or even better a “Books I Need to Buy” list since school is coming up. We can do this by adding some more code to our index.html.

These two lists may have different content, but the way they are coded will be very similar — why write the same code twice? That’s where our directive will come in! More on that later, but for now, let’s go to our MainController and mess with some code. We’ll change the way our data is stored, add a new variable, and change our addItem function a bit.

Here, we created two new scope attributes called ‘todo’ and ‘books’. Each of these has its own list property that has an array inside of it. We also changed the addItem function so that it has two parameters and those parameters are accessed inside of the function. Why change addItem? Well we are going to need to add items to both our to-do list and our books list. Why not use the same function for both? By adding parameters, we can specify what item gets added to what list. This will make more sense in a minute. Going back to our HTML, we call our addItem function — however, we don’t call it will any parameters. All we need to do is add our to-do list and our addToDo variable as arguments of the function.

This may look a little strange, but remember, our actual list is stored inside the ‘todo’ attribute of the scope. When we click the button, we’ll go to the controller and run the body of the addItem method. The parameter itemList will get the value of our first argument (todo.list), item will get the value of second argument (addToDo), and addToDo will be added to todo.list. Now, in our HTML, we can write some code for the list of books we need to buy.

As we said before, the code for the book list and the todo list will look similar, even though the content is different. Looking at our code now, it is a bit repetitive. Can we make this more concise? Yes! With directives. Directives help us make our code modular and concise and allow us to bind certain behaviors to HTML elements. We’ll create a new folder called directives inside of our js folder and put two new files inside of it — singlelist.html and singlelist.js. Starting with the singlelist.html, we’ll write some HTML code that will be the template for our directive. We will want this code to work for our to-do list and our books list — meaning that each will run this directive to show the contents of their list. This means we are going to need some parameters as they won’t have the same data.

The code looks pretty similar to what we did in the index.html. We show some kind of title and then iterate through a list. The difference is that first, we only have to write this code once, and second, it’s in a different file — meaning that not everything is in our index.html. This makes our code more modular. Above, mylist is a parameter and its value will change based on what argument we call the directive with. Going to our singlelist.js file, we set up the JavaScript portion of our directive.

Here, we name our directive singlelist and set up how it will work. We set the value of an ‘mylist’ in our scope and set the templateUrl to be the singlelist.html’s file path. Basically, when the directive is called in our view, the argument will be bound to the parameter (mylist), which will be added as an attribute to the scope. Then, with the parameter’s value set in scope, the directive will take the code in our templateUrl and insert it into wherever the directive was called. All we need to do now is import this directive and call it in our HTML code. To import the directive, we’ll write…

Next, we call it in our index.html so that it will actually impact our webpage. Right now, the code for our directive is written, but it isn’t being used in our living breathing webpage — our view — our index.html. To do this, we’ll delete some of our previous code and write…

Notice, we use the same directive for both lists. Here, ‘mylist’ is a parameter that will hold the relevant data (‘todo’ or ‘books’) for a given list. In the first call, ‘todo’ is the directive’s argument and in the second call, ‘books’ is the argument. Right now, the ‘todo’ and ‘books’ objects in scope only have a list inside of them, but we could add more data, such as a title, to beef up these objects.

Now, when we retrieve the title from ‘mylist’ in the directive’s template (singleList.html), we will get the actual title. So if we open the webpage…

We have some security issues. We can fix this by using a module called http-server. To do this, we’ll open the terminal, navigate to our folder with the cd command, and use npm to get our module. If you don’t have npm, you can download it here.

Now that we have the module, we can go ahead and write http-server in our command line and access our webpage. Make sure you are in the folder with the index.html when you run this command.

Opening the webpage, now we have our items and our code looks awesome and efficient!

Let’s think about how we did this. First, we had our index.html, which is like the headquarters of our code. We wrote some code and then added angular by linking it in the index.html, initializing a module in the app.js file, and then creating a controller that would handle our data. We set the ng-app and ng-controller attributes in the index.html and then set data in the scope from the controller file that would eventually be accessed in the view — our index.html. When we saw our code was repetitive, we added a directive that would allow us to use the same block of HTML code in different places. We called the directive from the index.html, the parameter got the value of the argument in singlelist.js, and the code from the template (singlelist.html) was run and inserted into the index.html document.

So far, our code is short and sweet and does everything we want it to do.We have our two lists, one for to-do’s and another for books. However, professors often only post the ISBN number for required books, which means nothing if the user can’t convert the number to a title. What if when we added an ISBN number to our books list, it changed into a little blurb with the title and author? That’s what we’ll do next week with the Google Books API. See ya then!

Things to Remember:

<!-- Create a Function with Parameters -->
$scope.myfunction = function(n, m) {
  		return n * m;
}

<!-- How to Call a Function with Arguments -->
myfunction(5, 10);

<!-- Create a Directive JS File -->
app.directive('nameofdirective', function() {
	return {
		restrict: 'E',
		scope: {
			paramone:'='
		},
		templateUrl: 'js/directives/templateName.html'
	}
})

<!-- How to Call a Directive with Parameters<
<nameofdirective paramone="dataVariableNameFromScope"></nameofdirective>

Plus a Little Extra:

<!-- What restrict = 'E' means? -->
It means we can only invoke the directive through elements 
(instead of through attributes or something else). This 
makes it so all of our code invokes this attribute in 
the same way. 

<!-- How to Call a Directive without Parameter -->
<mydirective></mydirective>

<!-- Parameters VS Arguments -->
The formal parameter is what's given in the function 
declaration/definition where as the actual argument is 
what's passed when calling the function.

<!-- What is http-server? -->
Http-server creates a web server that responds to requests 
from web browsers and serves up local files.

<!-- More Tutorials About Command Line? -->
Check out more terminal tutorials on my YouTube Channel!
http://bit.ly/1ZD8CcG

Code from this blog post

Read the article or watch the video!

JQuery is a library that contains lots of methods which make it much easier to manipulate HTML documents, add animation, along with a bunch of other things. Since JQuery is a library, it has an API that we can use to access its functionality.

API stands for Application Programming Interface and it basically states the methods or functions we can call inside our code if we import the library.

Let’s click on .addClass() method and see what it does.

Say we had a class named blue that made its elements have blue text. We could use the .addClass() method and add the blue class to all of the p elements with something similar to this where we’d have $(“p”).addClass(“blue”). This may be confusing right now, but don’t worry, we’ll figure it out.

To start, we first need to create an index.html and a script.js file. We’ll also put the script.js file in a folder named js and then link our script.js file in our index.html file. This should look pretty familiar since we’ve done it in other tutorials.

Just like we imported bootstrap in the bootstrap tutorial, we need to import jQuery in this post. We can either download it from the Internet and link it locally or we can link it from the Internet. We’ll do the second and after searching for the jQuery CDN, we’ll add it to our code.

Make sure to add it above the our script.js link because we will need to use jQuery in this file. With our jQuery in place, we’ll add one line of HTML code, a header. We’ll add some styling that puts it in the center of the page and gives it a white text color. We can also give it the id hidden and the header will say “I was hidden!”.

Now, when we refresh the page, we’ll see that the header text is there, but we can’t see it unless we highlight it.

With jQuery and CSS, we could make it so that when we hover over it, the text of the header becomes black. To do this, we’ll go into our script.js file and write some code.

Here, the ready function makes sure that the DOM (for now, our HTML elements) have loaded. Once they are loaded, we select our element with the hidden id and call the hover function on it. This means when we over hover the element, the function on lines 2–4 will be run. The function will select “this” element (the element with the id hidden) and in the element’s CSS, the color property will be set to the value black. You could do this for any element, ID, or class and set any property to any value. Next, we have the callback function on lines 5–6 and this is something you have to write out even if you don’t use it. We will leave it empty for now and come back to it later.

Now, when we refresh the page and hover over the header, the text turns black. However, when we stop hovering over the header, the text remains black. What if we want to “re-hide” our message after hovering over it? Going back to the code we can implement our callback function. This will be called once we “leave” or stop hovering over our header, the element with the ID hidden. Let’s add some more code.

Here, we select “this” element again, which is the element with the ID hidden, and hide it from the viewer. This function as with the .css, .hover, and .ready function are built into the jQuery library so we don’t need to worry about how they are implemented. We just need to know the end result. Here, the hide function hides “this” element on the webpages. Essentially, this just sets the display property of “this” element to none, but using .hide() makes the code a bit more concise. Let’s see what happens when we refresh the page.

We hover over the header and leave it. After, the header element is gone — even when we try highlighting it, it cannot be found. With this program, we hid a message in plain sight, displayed the message while the mouse was pointed on it, and then made it disappear when the mouse left it.

For another quick example, we’ll add a button back in our HTML and make it so an alert shows up on the page when we click the button.

Now, we’ll write the JavaScript using the jQuery library to make the button interactive.

Here, we select all the buttons on the page and when one is clicked, we run the function. The function uses the alert method (built into HTML) to alert the user on screen with the message “I’m alerting you!”. Going back to our webpage, we’ll refresh and see what our alert looks like.

And there’s our alert! Could we have done this with plain vanilla JavaScript? Yes, but using the jQuery library makes a lot of this much easier to code and easier to read later on. Next week, we’ll talk about angular.js, which is a structural JavaScript framework that helps you build dynamic web apps. For the first time in the series, we won’t be hard-coding our content — but we will be getting it from somewhere else. I hope you learned something in this week’s post and I’ll see you next time.

Things to Remember:

<!-- How to Import jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- How to Use a jQuery Method -->
 $("button").click(function() {
	// what you want to do when button clicked
});

<!-- How to Create a Callback Function -->
$(document).ready(function(){
    $("#idName").hover(function(){
      // do this when we hover over the element with id idName
    },
  function(){ // 
  	  // body of a callback function
  	  // do this when we stop hovering over the element with id idName
    });
});

<!-- How to Dynamically Set CSS in jQuery -->
$(p).css("font-style", "italic");
$(#hidden).css("display", "none");

Plus a Little Extra:

<!-- How to Select a Class in jQuery -->
$(".className").fadeIn();

<!-- How to Animate Text -->
$("p").animate({left: '250px'});
// this uses animation to move all of the p elements left by 250px

<!-- Reveal Text After Some Time -->
 $("p").show(1000);

<!-- Modify Input Fields -->
$("input").focus(function(){
    // do this when user clicks the input field
});
$("input").blur(function(){
  // do this when input field is not clicked
});

Code from this blog post

How to Use a JavaScript Library: jQuery was originally published in Frontend Weekly on Medium, where people are continuing the conversation by highlighting and responding to this story.

Read the article or watch the video!

Angular.js is a structural framework for dynamic web apps. If that is confusing, don’t worry! Basically, it means we can extend HTML’s syntax to express an application’s components more fully. To start, we’ll create an index.html document and a js folder.

Next, we’ll import the Angular.js framework just like we did for Bootstrap and jQuery. For this tutorial, we will be using Angular 1.

In this tutorial, we’ll be making a to-do list application. To do this, we’ll make an app.js file inside of our js folder and write a line of code that initializes our app (also called module) for us.

To connect our app.js file to the HTML code, we’ll link it over in our index.html. Usually, we put this type of import towards the end of the body.

Although our app.js is imported, there’s still more to do (no pun intended). We need to connect our ToDoList module to our HTML code. To do this, we’ll write ng-app=”ToDoList” as an attribute of the body. This states that everything in the body will be a part of the ToDoList application. Furthermore, this attribute is called an angular attribute because it is part of angular and not plain html.

Next, we’ll create our controller, which will handle the data for our application. To do this, we’ll make a controllers folder inside of our js folder and add a MainController.js file.

Now, we can write some code for our MainController.

Just like most of our files, we’ll import this into our index.html and put it right before the closing body tag.

Now, going back to the MainController, we can set some values in the scope object. For now, we can think of the scope object as something everything in our program can talk to. The view aka our index.html can see what’s in the scope and our controller can set what’s in the scope. This is how the two files communicate and can pass information to and from each other — through the scope object! Thinking in this way, we’ll write some “to-do list” items and put them in the scope of our controller.

Here, we added a list attribute to the scope and set the value of this attribute to an array containing “Clean my room”, “Go to the store”, and “Study Cracking the Coding Interview”. Now, how does our view (our index.html) know about this controller? Sure, the file is imported, but there’s one other thing we have to do. We need to attach it to an element in the HTML code. We’ll attach it by creating a div, accessing its ng-controller controller attribute, and giving it the value “MainController.”

To access the to-do list items in scope, we can write some more code.

The curly braces are called handlebars and they note that these items are coming from the scope object. Without them, our list items would have the literal text list[0], list[1] instead of our actual to-do list items. Refreshing the page, we see the items in our list!

However, looking back at our code, this is somewhat inefficient and only works if we have exactly three items in the list. Instead, we can use an angular directive called ng-repeat to iterate through the items in the list. We’ll learn more about directives later, but for now, just think of them as a tool that helps make our code more modular and concise. We’ll create another div and add ng-repeat as an attribute.

Here, we name each thing in the list an item and for each item, we put it in a li tag. Again, we are accessing the list attribute from the scope object, which was set in the controller. The list attribute has the value of an array that has our to-do’s inside of it. We use the ng-repeat directive to go through the items and put each in their own li tag.

One last thing before we go! We can also add an input field in our HTML so we can add things to our to-do list from the webpage. To do this, we’ll write some more code in our index.html.

This creates an input field and ng-model (another angular directive) binds the input to the variable addToDo. This addToDo is an attribute of the controller’s scope object so it can be accessed again in the index.html file and in the MainController. We’ll also create a button so when the button is pressed, the item in the input is added to the list.

When we click the button, the addItem() function will be run — but this function doesn’t exist yet! Going back to our MainController.js, we’ll add some more code.

Here, we add a new attribute to our scope, addItem, and give it the value of a function. Inside the function, we access our list and push on the addToDo variable, which has the value of the input field from the index.html. Now, if we refresh our page and try to add a to-do… we can!

However, when we refresh the page, our added data will disappear because we haven’t saved it anywhere. Something to think about. In next week’s tutorial, we’ll talk more about angular.js and go into directives, services, routing, and accessing an endpoint from your code! See you next time.

Things to Remember:

<!-- How to Import Angular.js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<!-- How to How to Initialize a Module -->
var app = angular.module('ModuleName', []);

<!-- How to Create a Controller -->
app.controller('ControllerName', ['$scope', function($scope) { 
  	$scope.text = "Value for Text Attribute in Scope"
  	$scope.method = function() { 
  	/* body of function */ }
}]);

<!-- What You Need To Import -->
1. angular framework
2. app.js (modules)
3. controller files

<!-- What You Need To Attach in index.html -->
1. application with ng-app
2. controller with ng-controller

Some Built-in Directives:

<!-- ng-repeat -->
// loop through a collection / array
<div ng-repeat= "color in colors">
	<li> ""color"" </li> // except with handlebars instead of quotes
</div>

<!-- ng-click -->
// execute a method or expression when element is clicked
<button ng-click="changeBackgroundColor()"></button>

<!-- ng-src -->
// use angular to set a source path for an image
<img ng-src="http://www.myblog.com/article/images/">

<!-- ng-href -->
// use angular to set the source for a link
<a ng-href="http://www.myblog.com/article">click here!</a>   

<!-- ng-model -->
// bind input elements to scope attributes
<input ng-model="name"></input>

Code from this blog post