1. Build your own Instagram Filters
with Javascript
August 2017
http://bit.ly/tf-filters
Please download Sublime Text & Firefox
2. Note
Sublime Text is the text editor we’ll be using. We’ll be
opening our HTML files in Firefox. Please make sure you
have both downloaded and installed.
3. About me
• Michael Kulinski
• Current Thinkful Mentor
• Software Engineer
5. About us
Thinkful prepares students for web development & data
science jobs with 1-on-1 mentorship programs
6. Goals
• Set up static web page using Javascript
• HTML + Javascript basics
• Access third-party library in Javascript
• Build v1 of Instagram app
• Advanced challenges
7. The Starter Code
Download and unzip the starter files into a folder on
your desktop (four files in total). Open index.html and
index.js in Sublime Text.
http://bit.ly/tf-instagram-starter
11. HTML overview
HTML is the content and structure of a webpage
It’s the skeleton of your website.
12. HTML tags
Every tag starts with a “less than” sign and ends with a
“greater than” sign
<html> #this is an HTML opening tag
<body> #this is a body opening tag
<h1>Hello world!</h1> #this is set of
H1 tags
</body> #this is a body closing tag
</html> #this is an HTML closing tag
13. More about tags
• There are opening tags and closing tags — closing tags
have a backslash before the tag name (</html> versus
<html>)
• Tags instruct a browser about the structure of our
website
• There are hundreds of built-in tags though you’ll use
the same few a lot
14. HTML attributes
HTML attributes set properties on an element — the are
attached in the opening tag
<a href=“https://somewhere.com">This is a
link</a>
href is an attribute that sets the destination of a link
<h1 id=“headline”>This is a headline</h1>
id is another attribute that identifies element (for CSS &
Javascript)
15. Basic functions
A function lets you separate your code into bite-sized
pieces which you can use 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.
17. More about basic functions
• Functions can save us time because we can use them
over and over code. They are like 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
19. Javascript overview
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 file. We’ll then
import that file using a similar syntax.
21. What is a third-party “library”?
In JavaScript, we can use third-party libraries to do
cool things. A third-party library is a JavaScript file that
contains a bunch of functions that someone else wrote
for us. There are a ton of these in every language.
23. Importing the CamanJS library
The CamanJS library is included in your starter code.
You’ll import it with this syntax at the top of your
index.html file.
24. Documentation
How do we know what functions we can use? We could
look at the JavaScript file, 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.
25. 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
finding answers through these resources.
28. 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 in built-in functionality)
29. Challenge #2
Instead of making your own filter, try using a built-in filter
Here’s a full list: vintage, lomo, clarity,
sinCity, sunrise, crossProcess, orangePeel,
love, grungy, barques, pinhole, oldBoot,
glowingSun, hazyDays, herMajest, nostalgia,
hemingway, concentrate
30. Challenge #3 (Advanced)
• Add more buttons, each one should add only one filter
• Try cropping your pictures to different sized frames
31. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility! Learn anywhere, anytime, & at your
own pace
• Career transition is the goal
32. Our Program
You’ll learn concepts, practice with drills, and build
capstone projects — all guided by a personal mentor