Build Your Own Instagram Filters

Build Your Own Instagram-like Filters
with JavaScript
Visit this link to Download Sublime, Firefox & Starter Code
bit.ly/instagram-dc
WIFI: In3Guest
November 2017

Note
Sublime Text is the text editor we'll be using. We'll
be opening our HTML ﬁles in Firefox. Please make
sure you have both downloaded and installed.
bit.ly/instagram-dc

Instructor
TJ Stalcup
Lead Mentor @Thinkful
API Evangelist @WealthEngine
Pokemon Master
Assistant Instructors
bit.ly/instagram-dc

About you
Your name
What brought you to the workshop tonight?
What is your programming experience?
bit.ly/instagram-dc

About us
Thinkful prepares students for web development and
data science jobs with 1-on-1 mentorship programs
bit.ly/instagram-dc

Goals
Set up static website using JavaScript
HTML + JavaScript basics
Access third-party library in JavaScript
Build v1 of Instagram app
Advanced challenges
bit.ly/instagram-dc

The starter code
Download and unzip the starter ﬁles into a folder
on your Desktop (four ﬁles total). Open index.html
and index.js in Sublime Text.
http://bit.ly/tf-instagram-starter
bit.ly/instagram-dc

Demo
Open index.html in Firefox
bit.ly/instagram-dc

Demo
Click "Apply Filter" to see the image change
bit.ly/instagram-dc

Demo
Click "Revert Filter" to see the image change back
bit.ly/instagram-dc

HTML Overview
HTML is the content and structure of a webpage
It's the skeleton of your website.
bit.ly/instagram-dc

HTML tags
Every tag starts with a "less than" sign and ends
with a "greater than" sign
<html> #an HTML opening tag
<body> #a body opening tag
<h1>Hello, World!</h1>
#a set of h1 tags with content
</body> #a body closing tag
</html> #an HTML closing tag
bit.ly/instagram-dc

More about HTML tags
There are opening tags and closing tags - closing
tags have a backslash before the tag name
(</html>)
Tags instruct a browser about the structure of
our website
There are hundreds of built-in tags but you'll
use the same few a lot
bit.ly/instagram-dc

HTML attributes
HTML attributes set properties on an element -
they are set in the opening tag
href is an attribute that sets the destination of a link
<a href="https://somewhere.com">This is
a link</a>
id is another attribute that identiﬁes elements
(for CSS & JavaScript)
<h1 id="headline">This is a headline</h1>
bit.ly/instagram-dc

Basic functions
A function lets you separate your code into bite-
sized pieces which you can use over and over again.
When you write a function to use later, you are
"declaring" it. When you use (or run) that function
you are "calling" it.
bit.ly/instagram-dc

Example
Declaring a function
Calling a function
function doSomething(){
alert("Done!");
}
doSomething();
bit.ly/instagram-dc

More about basic functions
Functions can save us time because we use them
over and over in code. They are building blocks.
Make your code more organized and easier to read
JavaScript has many built-in functions
You'll write many, many functions in your
programs
bit.ly/instagram-dc

Let's work through the rest of the HTML
<body>
<img id="my-image" src="test-image.png">
<br>
<button onClick="revertFilter()">Revert Filter</button>
<button onClick="applyFilter()">Apply Filter</button>
</body>
bit.ly/instagram-dc

JavaScript overview
<script type="text/javascript" src="index.js"></script>
If HTML is the skeleton of a website, JavaScript is the
brains. JavaScript controls the behavior of our app.
We'll write our JavaScript in the index.js ﬁle.
We'll then import the ﬁle using similar syntax.
bit.ly/instagram-dc

Adding our functions to index.js
function revertFilter(){
//add code here
}
function applyFilter(){
//add code here
}
bit.ly/instagram-dc

What is a third-party library?
In Javascript, we use third-party libraries to do cool
things. A third-party library is a JavaScript ﬁle that
contains a bunch of functions that someone else wrote
for us. There are a ton of these in every language.
bit.ly/instagram-dc

The CamanJS library
We'll be using the CamanJS library. ( )camanjs.com
bit.ly/instagram-dc

Importing the CamanJS library
The CamanJS library is included in your starter code.
Import it at the top of your index.html ﬁle using the
syntax above.
<script type="text/javascript" src="caman.full.min.js"></script>
bit.ly/instagram-dc

Documentation
How do we know what functions we can use? We could
look at the library source ﬁle, if it's short, or better, we
could look at the documentation.
All common libraries will have documentation with a list
of available functions and/or real-world examples.
bit.ly/instagram-dc

Note
A core part of being a developer is constantly learning
new languages, tools, libraries, and frameworks. They
will all be documented and you should get used to
ﬁnding answers through these resources.
bit.ly/instagram-dc

Here's an example
http://camanjs.com/guides/#BasicUsage
bit.ly/instagram-dc

Our functions
The correct function is "called" when a button is clicked
function revertFilter(){
Caman('#my-image', function() {
this.revert();
});
}
function applyFilter(){
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render();
});
}
bit.ly/instagram-dc

Challenge #1
Change out the example image with your own
image
Adjust the filter values in the example code to
update the filter
Make your own filter with at least one new
property (hint: look at built-in functionality)
bit.ly/instagram-dc

Challenge #2
Instead of making your own, use a built-in ﬁlter.
Here's a full list:
vintage, lomo, clarity, sinCity, sunrise,
crossProcess, orangePeel, love, grungy,
barques, pinhole, oldBoot, glowingSun,
hazyDays, herMajest, nostalgia,
hemingway, concentrate
function applyFilter() {
this['vintage']();
this.render();
});
}
bit.ly/instagram-dc

Challenge #3 (Advanced)
Add more buttons, each one should add only one ﬁlter
Try cropping your pictures to diﬀerent sized frames
bit.ly/instagram-dc

For aspiring developers, bootcamps ﬁll the gap
Source: Bureau of Labor Statistics

92%job-placement rate + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs

Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
Local Community
You

1-on-1 mentorship enables ﬂexible learning
Learn anywhere,
anytime, and at your
own schedule
You don't have to quit
your job to start career
transition

Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.com to learn more
Two-week Free Course Trial
Start with HTML, CSS and JavaScript
Unlimited QAs sessions
Option to continue with full bootcamp
Financing & scholarships available
Oﬀer valid tonight only
Benjy Schechner
Education Advisor

Build Your Own Instagram Filters

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Build Your Own Instagram Filters

Similar to Build Your Own Instagram Filters (20)

More from TJ Stalcup

More from TJ Stalcup (20)

Recently uploaded

Recently uploaded (20)

Build Your Own Instagram Filters