More Related Content
What's hot
What's hot (20)
Similar to Instagram filters
Similar to Instagram filters (20)
More from Thinkful
More from Thinkful (20)
Recently uploaded
Recently uploaded (20)
Instagram filters
- 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
- 4. TA Michael Cruz Software Engineer - ZBrains
- 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
- 8. Demo Double-click on the index.html file and open it in Firefox
- 9. Demo Click “Apply Filter” and the picture should change
- 10. Demo Click “Revert Filter” to change the picture back
- 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.
- 16. Example Declaring a function function doSomething() { alert(“Done!”); } Calling a function doSomething();
- 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
- 18. Lets work through the rest of the HTML
- 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.
- 20. Adding our functions to index.js
- 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.
- 22. The CamanJS Library We’ll be using the CamanJS library (camanjs.com)
- 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.
- 27. Our two functions The right function is “called” when a button is clicked
- 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
- 33. Our Mentors Mentors have, on average, 10+ years of experience
- 34. Web Development Syllabus • Frontend Development (HTML, CSS, Javascript) • Frontend “Frameworks” (React.js) • Backend Development (Node.js) • Electives (Python, Ruby, Swift, Angular, UX) • Computer Science Fundamentals • Technical interviews + Career prep
- 35. Our Results Job Titles after GraduationMonths until Employed
- 36. October 2015 Questions? georgie@thinkful.com schedule a call through thinkful.com