A Deeper Look at HTTP (for WordPress REST API Users)

A Deeper Look at HTTP (for WordPress REST API Users)

HTTP is one of the important protocols underlying the WordPress REST API and the web at large.  In this ~20 minute video we go over all the important aspects of HTTP that you should know about as you prepare to work with the WordPress REST API or any other APIs using JavaScript or other languages.

Some Important Terms:

  • Hypertext Transfer Protocol (HTTP) – A standard for making requests and responses between clients and servers.
  • HTTP Clients – Applications like web browsers or JavaScript apps that make requests to web servers.
  • HTTP Servers – Computers running software like Apache or NGIX that understand HTTP requests and responses.
  • HTTP Requests – Made from a client to a server. Several Request Methods like GET, POST, PUT, DELETE are available. More than just requesting information, can also do things like post new posts or pages in the case of WordPress or edit existing content.
  • HTTP Responses – Made from a server to a client in response to a request.
  • HTTP Messages – The bundle of data passed in requests and respones are referred to as messages. Includes [1] Request or Status Line, [2] Headers, [3] Message Body (optional)
  • HTTP Request Line (w Requests) – Includes the Request Method (GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE), the URI of the page or resource you want to access and the HTTP Version (1.1 is most common, although 2.0 was standardized in 2015 though not fully implemented across the web). This line is only included if we are sending a request.Example: GET javascriptforwp.com HTTP/1.1
  • HTTP Status Line (w Responses) – Includes: HTTP Version, Status Code (1XX informational, 2XXX success, 3XX redirect, 4XX client error, 5XX server error)Examples:
    HTTP/1.1 200 OK
    HTTP/1.1 404 Not Found
  • HTTP Headers – Includes metadata for each request and response sent.  Standard header fields (or metadata options) exist and custom header fields can be created as well.
  • HTTP Message Body – Optional data passed along with a request or response.  For a POST request it could be the new post information like title and content.  For a response we might get an HTML webpage or media asset or JSON in the case of the WP API.

A Brief History of HTTP

  • 1989 – Tim Berners-Lee and his team at CERN
    – Started with ability for a client to send a GET request to a server
    – HTML created at same time as a markup language text sent via HTTP (and we see CSS, and JavaScript come out of this birth as well)
  • 1991 – V 0.9
  • 1996 – V 1.0 – Opened a new connection for each request
  • 1997 – V 1.1 – Allowed for single connection to be used for multiple requests
  • 2015 – V 2.0 – Streams and Multiplexing

To Learn How to Make HTTP Requests

In the JavaScript for WordPress Master Course we learn about how to make all sorts of HTTP requests to the WordPress REST API using the browser, Postman, JavaScript, PHP and the Command Line.

An Introduction to the VanillaPress Project – A mock WordPress front and back end using Native JavaScript

Introducing VanillaPress

After covering an Introduction to JavaScript, JavaScript Language Basics, The DOM, Events, JSON and Local Storage we finally get around to building our first major project, VanillaPress.

VanillaPress is a single page web app that displays posts and pages from a JSON file and even lets you edit and save content to local storage with a Customizer like editor.

In this short video we introduce the app.

 

 

Reverse Engineering VanillaPress V0.1

Now that we have introduced the app we introduce the first major task of the course. Try to reverse engineer VanillaPress V0.1, building out the displaying of a blog post listing page and single page views all based on a single JSON file.

 

 

Taking it Further with JavaScript

If you have figured out how to build out the blog post section of VanillaPress, keep going and build out the rest of the app as introduced in the first video.

In this JavaScript for WordPress Master Course we go in depth into how to build out VanillaPress using best practices like MVC architecture, routing to map URLs to content and views, and eventually how to leverage JavaScript development tools and the latest ES6 JavaScript.

To learn more about building projects like VanillaPress, save a seat in the next JavaScript for WordPress Master Course enrollment period.

An Introduction to Local Storage with JavaScript

Local Storage Basics

Local storage allows us to store JSON data about our app, site or plugin in the user’s browser and access it for faster loading, custom information and offline content.

Support for local storage comes native with the DOM and JavaScript using the following simple commands:

  • localStorage.setItem()
  • localStorage.getItem()
  • localStorage.removeItem()

It is important to remember to pass in valid JSON as well as parse the JSON back out into a native JavaScript object before you use in your app. Often folks save the parsed content as store in their apps.

Watch the Video

In this video we look at how to add, edit and delete local storage information. Follow along and see how simply you can integrate local storage into your app.

 

 

Taking Local Storage Further

In this JavaScript for WordPress Master Course we use local storage again and again when building JavaScript apps with and without WordPress.

To learn more about working with JSON and Local Storage save a seat in the next JavaScript for WordPress Master Course enrollment period.

DOM Event Propagation with JavaScript – Capturing and Bubbling Explained

Basic Terms Explained

Event propagation is an important yet little understood topic. In this post and related video we will go in depth into event propagation, explaining the terms capturing and bubbling and showing examples of when and how to use each.

  • Event propagation – An overarching term that includes the three different phases of DOM Events: capturing, targeting and bubbling.
  • Capturing Phase – When an event occurs in the DOM, notification of the event is passed starting at the top of the DOM tree and passing down through all parent element nodes all the way to the target node where the event occurred.
  • Target Phase – After the capturing phase occurs, the Target phase occurs. The target phase only includes a notification of Node where the event took place.
  • Bubbling Phase – This is the final phase to occur, although many people think this is the first phase. In the bubbling phase a notice is passed from the target Node up through all of the parent Nodes all the way back to the top root of the DOM.

Event Propagation, Capturing and Bubbling Video

 

 

Taking it Further with Learning JavaScript

Now that you have learned the basics of event propagation it is important for you to build out a demo like the one you have seen in the video above.

If this content was a little advanced for you, you can go back and watch our Introduction to JavaScript Events video. Or if you’re looking to take things further, check out our Local Storage video.

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about Events and much much more!!!

Introduction to Events in the DOM with JavaScript

Some of What DOM Events Can Do

DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include:

  • Mouse events like onclick, on mouse over
  • Keyboard events on for figuring out what keys are pressed and when
  • Form elements like on submit, focus or change
  • Media events like onplay, on pause, on onseeked
  • Drag events like ondrag, ondragenter, ondrop
  • General object events like onload, onresize, onscroll
  • Other – clipboard, print, touch, transition, speech recognition

In this overview video we look at demos of the different types of events you can work with in the DOM API using JavaScript.

Watch the Demos

 

 

Download the Demo Code

Taking it Further with Learning JavaScript

This video introduces a number of different types of Events in JavaScript that this JavaScript for WordPress Master Course goes into much more depth with.

If you are looking for a more advanced JavaScript Events video, check out our post on Event Propagation with Capturing and Bubbling.

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about Events and much much more!!!

Creating and Adding Text and Element Nodes to the DOM

Creating Nodes in the DOM

In the JavaScript for WordPress Course, Part 1 on Learning JavaScript Deeply, we explore the DOM in depth, looking at the relationship between Nodes and DOM. Check out our Introduction to the DOM video if you are new to the DOM.

Once we cover how to work with Nodes, we show how we can create our own Text and Element Nodes and append them to each other to build more complex Node clusters. Watch the videos below to learn how to do this with JavaScript and the DOM.

Adding Nodes to the DOM

Now that we have looked at how to create nodes and append them to each other we can move on to looking at how to add our created elements into the DOM using the same techniques used for appending nodes to each other.

This is the point in working with the DOM where we can finally start adding our own content and building webpages dynamically.

Taking it Further with Learning JavaScript

Once you know how to work with creating and adding DOM nodes, it’s a good idea to move on to Working with Events.

If this content was a little advanced for you, you may also want to go back and look at our Introduction to the DOM video

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about the DOM and much much more!!!

Everything to Know About JavaScript and HTML Forms

What to Know About HTML Forms

One of the most fundamental and common JavaScript skills involves working with forms. In order to work with forms in JavaScript it helps to know about all of the different HTML elements, attributes and options.

In this first set of videos we are going to look in depth at everything you need to know about HTML forms.

What to Know About JavaScript and Forms

Now that we have covered the basics of working with HTML forms, let’s look at how we can get and set form values using JavaScript. This will allow you to do things like validate forms, dynamically control forms, or take over form submissions.

In this set of videos we continue to look in depth at forms, this time focusing on the JavaScript interactions.

Taking it Further

We cover and use loops quite a bit in our course. However, we also go further into functional programs, which operates with a basic starting point of not using Loops.

To learn about Loops and more, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about the programming with JavaScript!!!

An Introduction to the Document Object Model (DOM)

The API You Always Use But Never Knew Existed

Most people do not know that when they use JavaScript to interact with a page, they are really interacting with an API that sits a layer above the actual page we see in the browser. This API is called the Document Object Model or more commonly the DOM for short.

Check out the video below to learn more about the DOM and how it works.

 

To take your learning further, check out our video on how to Traverse the DOM using JavaScript.

If you really want to delve deep into learning JavaScript, reserve a seat for the JavaScript for WordPress Master Course We cover everything you need to know about the DOM and much much more!!!

Loops in JavaScript

When working with groups of objects in JavaScript you will likely run across loops. Loops in JavaScript let us iterate over and perform actions on a collection of items, like arrays or objects.

Introduction to Loops

In this first video we begin to look at Loops with JavaScript. You will learn about the most common loop, the for loop, and how and when you can use it.

Code examples on JSBin >>

Do While and While Loops

Although the for loop is one of the most common loops, it is not the most simple or basic. In this video we look at the do while and while loops.

Code Examples on JSBin >>

For In & For Of Loops

Skipping ahead in the course a bit we come back to some more loops that we have available to us in JavaScript, the For In and For Of Loops.

For In Loops – Allow us to iterate through the properties of an object
For Of Loops – Allow us to iterate through a collection like an array

The For In and For Of Loops are handy tools to have in your belt, and a lot of casual JavaScripters do not know about them.

Code Examples on JSBin >>

Taking it Further

We cover and use loops quite a bit in our course. However, we also go further into functional programs, which operates with a basic starting point of not using Loops.

To learn about Loops and more, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about the programming with JavaScript!!!

A History of JavaScript

The language JavaScript has an amazing history: from its conception as a refusal to port Java to the web and instead create low level to entry yet powerful programming language, to its now yearly release cycles and ability to power both front and back end web apps completely in JavaScript.

Watch the video below to see an animated history of JavaScript.

If you want to learn JavaScript in depth, reserve a seat for the JavaScript for WordPress Master Course.

We start here with the history of JavaScript and how we use JavaScript today and move on through learning everything you need to know to be a full fledged front end JavaScript developer, with a specialization in WordPress and API development.