Designing IA for AI - Information Architecture Conference 2024
Build Your Own Instagram Filters
1. 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
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.
bit.ly/instagram-dc
4. About you
Your name
What brought you to the workshop tonight?
What is your programming experience?
bit.ly/instagram-dc
5. About us
Thinkful prepares students for web development and
data science jobs with 1-on-1 mentorship programs
bit.ly/instagram-dc
6. 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
7. The starter code
Download and unzip the starter files into a folder
on your Desktop (four files total). Open index.html
and index.js in Sublime Text.
http://bit.ly/tf-instagram-starter
bit.ly/instagram-dc
11. HTML Overview
HTML is the content and structure of a webpage
It's the skeleton of your website.
bit.ly/instagram-dc
12. 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
13. 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
14. 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 identifies elements
(for CSS & JavaScript)
<h1 id="headline">This is a headline</h1>
bit.ly/instagram-dc
15. 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
17. 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
18. 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
19. 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 file.
We'll then import the file using similar syntax.
bit.ly/instagram-dc
20. Adding our functions to index.js
function revertFilter(){
//add code here
}
function applyFilter(){
//add code here
}
bit.ly/instagram-dc
21. What is a third-party library?
In Javascript, we 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.
bit.ly/instagram-dc
23. Importing the CamanJS library
The CamanJS library is included in your starter code.
Import it at the top of your index.html file using the
syntax above.
<script type="text/javascript" src="caman.full.min.js"></script>
bit.ly/instagram-dc
24. Documentation
How do we know what functions we can use? We could
look at the library source 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.
bit.ly/instagram-dc
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.
bit.ly/instagram-dc
27. Our functions
The correct function is "called" when a button is clicked
function revertFilter(){
Caman('#my-image', function() {
this.revert();
});
}
function applyFilter(){
Caman('#my-image', function() {
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render();
});
}
bit.ly/instagram-dc
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 at built-in functionality)
bit.ly/instagram-dc
29. Challenge #2
Instead of making your own, use 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
function applyFilter() {
Caman('#my-image', function() {
this['vintage']();
this.render();
});
}
bit.ly/instagram-dc
30. Challenge #3 (Advanced)
Add more buttons, each one should add only one filter
Try cropping your pictures to different sized frames
bit.ly/instagram-dc
33. 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
34. Our students receive unprecedented support
1-on-1 Learning Mentor
1-on-1 Career MentorProgram Manager
Local Community
You
35. 1-on-1 mentorship enables flexible learning
Learn anywhere,
anytime, and at your
own schedule
You don't have to quit
your job to start career
transition
36. 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
Offer valid tonight only
Benjy Schechner
Education Advisor