Ajax + APIs

Ajax + APIs

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 85 Lessons (7h 49m) | 8.48 GB

Remix projects by learning how to work with APIs (how different websites talk to each other) and Ajax (a way of grabbing and working with that data).

Whenever someone says “Twitter has an API”, what they mean is that Twitter has a particular way to let other sites remix their data to create brand new projects.

If you want to make a custom Instagram feed, a Figma-driven client presentation tool, a Bitcoin tracker, or your own redesigned version of Twitter, all of these projects need to communicate back-and-forth with a data source.

Our short online course, aimed at beginners, is designed for people who want to work with APIs (how different websites talk to each other) and Ajax (one way of grabbing and sending that data) together to make remixed projects.

What you’ll learn

  • Learn to work with your own data and external data sources
  • Work with data across several formats such as JSON, XML + HTML
  • Make sites that use services like Figma, Instagram and Contentful to make data-driven sites
  • Using data from sources like Unsplash search to build interactive API-driven sites
  • How to work with sites that don’t have APIs to use with web scraping
  • Making sites that can log in and sign up with Twitter (or other 3rd parties!)
Table of Contents

1 Welcome to the course!
2 What is Ajax + what are APIs?
3 Setting up our Design Knowledge project
4 Setting up Javascript events
5 Adding our data in an static array
6 Making our data an array of objects
7 Moving data into a JSON file
8 Fetching data in the Javascript console
9 Pulling in JSON into the page
10 Cleaning our code with shortcut functions
11 Getting a real data source
12 How SuperHi uses Ajax + APIs
13 Using the random data source
14 Adding styling to our data and site
15 Other data sources
16 Introduction to Coin Price
17 Setting up our HTML and CSS
18 Adding a price checking function
19 Pulling in JSON from our API
20 Changing the currency type
21 Updating HTML on site
22 Adding a setInterval to get every 60 seconds
23 Other features of the Coindesk API
24 Introduction to Uova and Contentful
25 Setting up a static HTML and CSS page
26 How to use Contentful
27 Getting the JSON response from Contentful
28 Taming Contentful data
29 Pulling data from Contentful
30 Using Javascript map to transform our array
31 Adding Ajax-enabled HTML
32 Adding in fuller HTML
33 Ordering data from Contentful
34 More Contentful features
35 Introduction to Unsplash Search
36 How Unsplash’s API works
37 Static site with loading screen
38 Adding form events to our site
39 Fetching the Unsplash search URL
40 Adding Authorization headers
41 Introducing Postman
42 Using Postman to clean up JSON responses
43 Display search results
44 Adding more data from our API response
45 Adding background color to the page
46 Adding final styles
47 Introduction to our client presentation tool
48 The Figma developer documentation
49 Adding our static site with styles
50 How to think about the project with Javascript
51 Adding promise chaining
52 Fetching our Figma file
53 Getting frame ids from Figma
54 Generating images using the Figma API
55 Adding extra query string information
56 Changing the loader to the Figma document title
57 Turning our grid into a slideshow
58 Getting and sending comments using the Figma API
59 Introducing Instafeed
60 Getting our Instagram access token
61 Viewing our data from Instagram
62 Adding Instagram to our site
63 Refreshing our access token
64 Introduction to web scraping
65 How to run a Ruby script
66 Grabbing HTML using HTTParty
67 Installing Nokogiri
68 Parsing and displaying content with Nokogiri
69 Looping over tags in Ruby
70 Grabbing attributes from content
71 Introduction to Minimal Twitter
72 Setting up a Rails project
73 How to display an index.html
74 Adding Omniauth to our project
75 Setting up a Twitter developer account
76 OAuth on Twitter
77 Holding our token and secret
78 Logged in vs logged out with sessions
79 Getting our logged in user’s tweets
80 Printing our tweets
81 Adding link formatting to tweets
82 Adding extra fields and logging out to our project
83 Styling our site
84 Getting it on the internet with Heroku and Git
85 Thank you for joining our course!

Homepage