Background image
logologo symbol

3 - The fundamentals

SPECIALITY - TypeScript Web APIs

Description

This guide is a bit special in the way that when you review this guide you will do the review in person (in the classroom or through a video call on Slack)
The modern browsers offer loads of Web APIs (Application Programming Interfaces) for the developers to use, but some are more commonly used than others.
This guide is all about exploring the endless possibilities that JavaScript (and hence also TypeScript) has to offer. JavaScript has a few built in APIs that you can use and that you have already used like the DOM API and the forms API. Here is a complete overview of all built-in APIs that JavaScript has to offer.
You can use this guide to dive deeper into web development (in a practical way) or have a bit fun with TypeScript.
💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻 The practical: 💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻💻
The most commonly used APIs by web developers are these:
  • DOM - working with HTML elements in the TypeScript
  • Forms - checking validity of inputs and helping users fill out the correct information
  • Fetch - Getting data from external resources (this is what Module 4 is all about)
  • Storage - saving data in the browser so that it stays there even if a user refreshes the page
  • History - going back or forward (like using the back and forward buttons of the browser)
Use the DOM and Form APIs if you want to get a deeper understanding of what we have already been doing in this module.
Use the Fetch API if you want to prepare for what is coming in the next module.
Use the Storage or History APIs if you want to see what is available.
🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️ The Fun: 🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️🕹️
If you want to have a bit of fun (that is often the best way to learn something) here are a few APIs that could be nice to play around with:
  • Canvas - A nice and fun way of creating graphics with JavaScript, you can make games, animations or anything you can think of
  • Web Audio - A fun API to play sounds on a website, you can for example create a digital piano or other instruments
  • Media Capture and Media Stream - Here you can get the video from the users camera and play with that
You can even go a bit out of your comfort zone and use third party libraries (even though that will be strictly forbidden in the final project for this module). Doing that will practice the important skill of reading documentation but you will be doing a lot of that as a web developer. Such 3rd party libraries are for example:
  • Phaser.io - a game engine to create computer games in JavaScript
  • p5 - a library to create fun animations
  • Greensock - a library to create micro-animations for websites
  • aframe.io - a library to create VR with JavaScript

Topics

  • What is a Web API?
  • location & history
  • localStorage
  • Explore Web APIs
  • DOM
  • JavaScript libraries
  • JavaScript standard library
  • API documentation

Goals

Knowledge

Understand what is a Web API
Understand how to get information about Web APIs
Understand the difference between an API and a library

Skills

Be able to use many different kinds of functions
Be able to read documentation and use it in your code
Be able to create something new by combining functions from different APIs

Idea for return

  • Submit:
    • GitHub Repository + GitHub Pages (or equivalent) URLs
      • Add comments for each function explaining what it does and from what API it comes
    • Project description and details (along with what APIs you used in the README.md file
  • Minimum requirements
    • A website that uses at least 2 different APIs
    • Use as many features of the API as you can
  • Practical basic Ideas:
    • A carousel to show more than one picture on the same space on the page
      • Use the DOM API to display the pictures
      • Use location and history APIs to navigate between images using the back and forward buttons in your browser
    • A to-do list that uses the functions that you did in the functions guide to add, remove, edit and delete a to-do item
      • Use DOM API to display/render the list
      • Use localStorage to save the list so it is still there when you refresh the page
    • A page with a collection of things (like news, movies, shop-items etc…) that stores all the data in an array of objects and displays them in a loop
      • Use DOM API to display/render the list
  • Fun playing around ideas:
    • Create a game using the Canvas API and the Web Audio API
    • Make some crazy music with the DOM API and the Web Audio API
    • Create a game using Phaser.io
    • Make a VR website using Aframe
Or just do anything else that you can put your mind to