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

 

 

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.

 

 

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.

 

 

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.

 

 

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.

2 1/2 Hours of FREE Videos from the JavaScript for WordPress Master Course

As we prepare for the 2016 Fall Enrollment for the JavaScript for WordPress Master Course, I wanted to do another post where I shared some of the content for free to help folks get an idea of quality and depth of the coverage of this Master Course.

During the 2016 Summer Enrollment I did a post with 5 Free Videos.  This time I’m taking it a step further and releasing 7 FREE Videos with a combined run time of 2 1/2 hours!  These videos pick up sequentially  after the last group of free videos. Here is the list for this time around:

  • Getting and Setting Form Element Values – Part 2 [38:29]
  • Creating Nodes in the DOM [13:55]
  • Introduction to Events in the DOM with JavaScript [41:28]
  • Event Propagation – Capturing and Bubbling [20:26]
  • An Introduction to Local Storage [14:17]
  • An Introduction to the VanillaPress V1 Project [2:06]
  • Building the VanillaPress V1 Router [19:32]

I picked these specific videos because I think they represent important topics from the sections of the course they represent: The DOM, Events and our first major project, VanillaPress.  Please take some time to watch the videos (I like using 2x speed) and enroll for many more hours of content helping you Learn JavaScript Deeply.

Getting and Setting Form Element Values – Part 2 [38:29]

This video comes a few videos after the Introduction to the DOM video shared in the last free videos post.  In this video you’ll learn how to get and set form values using native JavaScript.

 

 

View Enrollment Details

 

Creating Nodes in the DOM [13:55]

In this video we look at the fundamental skill of creating and appending Text and Element Nodes as well as Document Fragments in the DOM.  This comes after a lot of explanation of the DOM, Nodes and how things work.  This is the first time though that we look at adding our Nodes to the page rather than just getting or setting existing Nodes.

View Enrollment Details

 

 

Introduction to Events in the DOM with JavaScript [41:28]

In this overview video we look at demos of the different types of events you can work with in the DOM API using JavaScript.  In later videos we go in depth into more demos and concepts surrounding Events in JavaScript.

 

 

 

View Enrollment Details Don’t Miss the Tuesday, Oct 25th to Friday Nov 4th Enrollment

 

 

Event Propagation – Capturing and Bubbling [20:26]

Event propagation is one of the fundamental mechanisms of Events in the DOM and something that not a lot of casual JavaScripters really understand.  In this video we go in depth into explaining event propagation and how and when you might want to use capturing or bubbling.

 

 

 

View Enrollment Details Don’t Miss the Tuesday, Oct 25th to Friday Nov 4th Enrollment

 

 

An Introduction to Local Storage [14:17]

Local storage is a valuable tool for JavaScript Developers and in this video we introduce the topic as well as look at all the basic code you will need to work with Local Storage and JavaScript.

 

 

 

View Enrollment Details Don’t Miss the Tuesday, Oct 25th to Friday Nov 4th Enrollment

 

 

An Introduction to the VanillaPress V1 Project [2:06]

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.

 

 

 

View Enrollment Details Don’t Miss the Tuesday, Oct 25th to Friday Nov 4th Enrollment

 

 

Building the VanillaPress V1 Router [19:32]

A router in JavaScript apps plays an important role of monitoring and taking actions based on URL changes.  This video comes after we have built out the model and views for VanillaPress and tackles building our first simple Router.  In later parts of the course we look at more advanced Routers.

 

 

 

View Enrollment Details Don’t Miss the Tuesday, Oct 25th to Friday Nov 4th Enrollment

 

I hope you enjoy and appreciate the content!  Please Enroll in the JavaScript for WordPress Master Course to Learn JavaScript Deeply.