How to Save Wistia Video Player Speed in Local Storage with JavaScript, the Wistia API (and WordPress)

I love Wistia, the professional video hosting company with amazing stats.  I have used them since early on and host all the JavaScript for WordPress videos with them.

They have had an API for a while that lets you control player speed.  Recently, they updated their player  and added speed control right into the controls.

Wistia Video Player Speed

Video Speed Built into Wistia Player

However, there is no caching mechanism for this, so users have to reset the player speed for each video.  This requires 3 clicks, can be a bother, and takes away from the learning experience.

So… this being a JavaScript course and us having covered local storage, I decided to write a little custom code to listen for changes to player speed and save the latest speed in local storage.

Then, when any video on the site loads, it first checks if there is a speed saved in local storage and sets the player speed.

The Basic JavaScript Code

Here is the basic code I used to get this working.  I tried to comment it pretty well so it makes sense what is happening.

// Get the Wistia Player
window._wq = window._wq || [];

// Apply to all Wistia Videos
_wq.push({ id: "_all", onReady: function( video ) {

	// Get speed from local storage
	var localStorePlayerSpeed = JSON.parse( localStorage.getItem( 'video_speed' ) );

	// If local storage speed exisits, set player speed
	if ( localStorePlayerSpeed !== null ) {
		video.playbackRate( localStorePlayerSpeed );
	}

	// Listen for changes in player speed
	video.bind("playbackratechange", function( playerSpeed ) {

		// Save the updated player speed to local storage
	  	localStorage.setItem( 'video_speed', JSON.stringify( playerSpeed ) );

	});
}});

You should be able to just drop this JavaScript into one of your JS files and have it work.

Enqueuing Our JS for WordPress

Since I am using this with WordPress I also have to enqueue this code into my functions.php file.  I would ideally like to release this as a little plugin, but for now adding it to my theme works.

Here is the code I added to my theme functions.php file:

function wistia_customizations() {
	wp_enqueue_script( 'wistia-player', get_stylesheet_directory_uri() . '/js/wistia-player.js', array(), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'wistia_customizations' );

Of course then I would have my JavaScript in the first code snippet in a file named wistia-player.js.

Taking it Further

Although this does work for my purposes, if a user switches computer or goes from watching on the desktop to mobile it will not remember their last setting.

Taking is one step further could involve saving the player speed as User Meta Data using the REST API.

I’ll hopefully tackle this and release this feature as a little no configuration plugin at some point before the JavaScript for WordPress Master Course is complete.

If you use this or something similar or have faced this problem, please let me know what direction you went!

 

 

Connect WooCommerce Products with LearnDash Courses

I have been happily using LearnDash LMS with WordPress for my JavaScript for WordPress Master Course.

One of the tricks of using WooCommerce and LearnDash together is that you can build your courses separately from your WooCommerce products.

This is helpful for creating bundles that automatically grant access to individual or multiple courses.  In my Master Course I have it broken down into four parts, which are really individual courses behind the scenes.

To accomplish you have to install the Download, Install and Activate the Free LearnDash WooCommerce Integration Plugin from the LearnDash site.

Then after you create your Courses in LearnDash, create a Product in WooCommerce you will have an option to select Related Courses.

Integrate WooCommerce and LearnDash Courses

You will also want to go into WooCommerce Settings > Accounts and make sure to enable “Enable registration on the Checkout page.”

WooCommerce Enable registration on the "Checkout" page

With this configured, when someone purchases the course via WooCommerce on the front-end and creates an account during checkout they will automatically have access to the Related Courses you selected for the product.

You can check this by clicking on a User account and looking at the course access. Mine says Parts but yours will probably say Courses.

LearnDash Check User Enrolled in Courses

I have been quite happy with this combination of WooCommerce and LearnDash for selling my courses since WooCommerce allows me to customize the selling process quite a bit.

I will also add that you will likely want to customize your WooCommerce Emails to include welcome information about the course in addition to the default information.

Hopefully this helps you get up and running selling online courses using LearnDash and WooCommerce.

Good luck and enjoy!

Getting PayPal API Credentials for WooCommerce Refunds

You can process payments in WooCommerce with PayPal using only the account email.  However, in order to refund payments from within WooCommerce you must enter your PayPal API credentials.

Here are the steps for doing that:

  • Login to PayPal
  • Go to Profile > Profile and Settings
  • Click My Selling Tools
  • Go to API Access
  • Select NVP/SOAP API integration
  • Click to view API Username, Password and Signature
  • Add information into WooCommerce PayPal settings

I find it much easier to refund payment directly from within WooCommerce and not need to login to PayPal to refund manually in addition to from within WooCommerce as well.

Deciding What Development Tools to Teach in my JavaScript for WordPress Master Course

js-dev-tools

Since the beginning of 2016 I have been working on my JavaScript for WordPress Master Course.  In the first part of this course I have a section on JavaScript Development Tools.

For the past few moons I have been trying to figure out exactly what JavaScript Development Tools to include in this section and in what order to cover them. It has been quite a process figuring all of this out, so I thought I would share a bit about it.

First Off, What Tools Do We Include?

The first thing I had to figure out what exactly what tools I should include.  Here is the list I finally came up with:

  1. Coding Environments
  2. Command Line Tools
  3. Code Repositories
  4. Task Runners
  5. Transpilers
  6. Error Linting and Debugging
  7. Testing

For the most part I had a pretty good idea of what to include from the beginning.  However, it did take a while to figure out the best order.  I’ll discuss that at the end, but first I thought I’d share a bit about the specific tools I chose from each type of tool.

Coding Environments

When I taught at Treehouse I used Sublime Text for all of the WordPress Development videos.  However, since then, Atom, from Github, came out and I have grown to like it for it’s sleek feel and powerful extensions.

In my informal surveying of WordPress developers, most folks use one of these two coding environments.  However, a few folks do use IDEs (Integrated Coding Environments) and I knew I had to include one in the course.

For the IDE, I chose WebStorm, the JavaScript IDE from the folks at JetBrains, who make the PHP IDE, PhpStorm.

In my course I primarily use Atom with a number of my favorite packages installed.  I do not really go into Sublime Text because it is so similar to Atom and because my course advisor, Wes Bos, has a book on Sublime Text.  I go into WebStom a bit to show what an IDE can offer and then refer people to Know the Code from course advisor Tonya Mork, who gets deeper into developing with an IDE.

Command Line Tools

One of the most important lessons I learned from doing the Week of REST Bootcamp with my friends at Human Made was that it is important to cover basic command line skills before getting into using other tools: navigating directories, understanding how commands and options work, etc. So I do a bit of that to start.

Luckily you do not need to know too much hard core Unix to use JavaScript Development tools, which is a good thing.  However, when installing and customizing tools it does help to have an understanding of the where different configurations are located and how to configure them for easier use.

When it comes to accessing the command line in the course I like to use Atom with the Terminal Plus Package.  However, I highly recommend folks check out the free Command Line Power User Course from Wes Bos for tips on how to use iTerm on the Mac with ZSH, Z and other goodies.  Although I do not explain how I do it in my course, I do have a customized command prompt 😉

Code Repositories

Two important code repositories stand out for JavaScript Development Tools: NPM and Github.

While npmjs.com is the go to repository for loading modern JavaScript libraries, it is also a development mindset in and of itself.  Rely on both libraries and small reusable bits of code from other developers.  I kind of think of it like as plugins are to WordPress so NPM packages are to modern JavaScript development.

In the course we use NPM quite a lot and really try to get folks used to using it as part of their development flow. I do not go into Github too much, just enough to clone repositories and manage your own projects a bit.  From there I recommend folks checkout the official Try Git interactive tutorial.

Task Runners

Task Runners help you run and manage other command line tools.  Three options clearly stood out for talking about in this course: Grunt, Gulp and Webpack.

In our last native JavaScript project of Part I, we use Grunt.  I chose this because it was the earliest of the bunch and has more similar configuration to Webpack in my opinion.  Although we do not use Gulp, I do show how you can do the same things with Gulp as we do with Grunt, just a little differently.

I don’t get into Webpack until later in the course when we get into JavaScript Libraries and Frameworks in Part II.  I figured it was a good idea to switch to this since most React developers prefer React from what I have gathered.  I also want people to have the experience of switching task runners, since being able to adept and switch between tools is an important skill set for a JavaScript developer.

In terms of what the task runners are doing, it generally breaks down to some combination of bundling files, minifying, linting, watching for file changes, and running a local server with live reloading on file changes.

Transpilers

The section on Transpilers exists primarily to discuss Babel, which we use to convert new JavaScript features into code that current browsers will understand.  Now that JavaScript releases new features on an annual basis, having a tool like Babel is essential for being able to let us use new JavaScript in our code and still have our apps work across environments.

In a later section in the course we go over a few of the features of ES6 and work on rebuilding our custom app, VanillaPress with ES6 conventions.  However, next year, there will be ES7 features and the year after that ES8.  I do not plan on updating the course with every new feature of JavaScript at this point, although I will cover the basics and links to resources like Wes Bos’s ES6 course that covers new features in depth.

Error Linting and Debugging

I love error linting tools 🙂  Something about knowing as I code if I’m making any mistakes saves some time, particularly searching for those silly misspellings and similar type things.  I explain the relationship between JSLint, JSHint and ESLint and show how you could use each with our task runners.  In terms of what to choose, I generally agree that ESLint is a good way to go.

For debugging I show how you can use Chrome Developer Tools to insert breakpoints and walk through your code for debugging, although we also get plenty of experience using console.log for simple stuff.  Although I don’t go into depth with it, I do mention that you can also do this internally with WebStorm.

Testing

This was the hardest section for me to do, mostly because I was not sure what testing framework to pick.  Most developers I talk to in the WordPress ecosystem do not take a Test Driven Development (TDD) approach in their projects.  However, I want folks who take my course to have a good foundation as a JavaScript developer outside of the WordPress world so I did feel it was important to at least get folks familiar with how testing works.

At first I thought to use Jasmine since it was one of the older and simpler testing frameworks.  However, a lot of folks like Mocha.  In the end, I decided to go with Tape, in part due to JS education guru, Eric Elliot’s, article on why he uses Tape over Mocha and in part because I felt it was the simplest of the bunch for someone new to testing.

In Part II of the course I will mention a few other testing frameworks as well, since some framework communities have preferred testing frameworks.

Now, What Order to Teach All of This?

In the end I settled on the order above for covering these different tools, however, it took me a while to settle on this order.

Earlier on I had covered Linting quite early and tried to save Git till the very end.  I also did not have command line tools in it’s own section originally and just talked about it in the Coding Environments section.

In fact, originally most of these sections were part of one big Task Runner or Coding Environments section since you commonly use most of these tools through your task runner or coding environment.

Learning about Tasks Runners before learning about the other tools does not give you much to do with a Task Runner, though.  For that reason we start off with a basic configuration for the Task Runners with a number of tools that we don’t get into until later sections.

This follows a teaching convention of dropping folks into a working project that might not make sense on a micro level but is helpful for understanding macro concepts.  Ultimately I felt this approach worked better than trying to talk about each tool individually before combining them in with a task runner, especially since it would mean running all the tools just from the command line to start, which is not really a common practice.

Did I Miss Something?  Have Opinions Otherwise?

My primary occupation is as a teacher.   I have a development background but do not code JavaScript applications day in and out as my primary gig (although that does appeal to me sometimes).

For this reason I rely a lot on people in the community who work with these tools regularly and encounter limitations and strengths of these (and other) tools in different types of environments and projects.  So, if you have thoughts on these different tools, as well as ones that I did not mention, please leave a comment and share your experience!

Want to Learn More?  Enroll in the JavaScript for WordPress Master Course

If you are newer to all of this I would highly recommend you enroll in my JavaScript for WordPress Master Course, where I go in depth into everything I talk about above, plus a whole lot more!

Review of A Week of REST UK 2016

A big thanks goes out to Siobhan McKeown for following through on her idea from near a year ago (or more?) to have  A Week of REST.  The Day of REST conference earlier this year went quite well and plans were made to do a week long version of the conference where attendees would go in depth learning and building a project with JavaScript and the REST API.

I was quite honored to have the opportunity to work with Siobhan, Joe Hoyle and Ryan McCue  on this bootcamp, which aligned so well with my JavaScript for WordPress Master Course.

We started preparing a number of months ago, including meeting in person for a week to build the project and plan the course modules.  I did a nice writeup on our experience preparing for A Week of REST.

Welcome to Matlock

Matlock, UK is home to Human Made headquarters and the event took place in a quant local up the hills from the office amidst a beautiful pond and collection of stone cottages.

20160904_162231.jpg

The course flow went like this:

Day 1 – Setup and Introductions

  • Folks arrived starting around noon
  • We did an overview of the schedule and content
  • Helped get local develop environments setup
  • Hung out and got to know each other

Day 2 – Up and Running with JavaScript Development

  • A few folks came to the morning office yoga I offered
  • I took the first half of the day to do talk about JavaScript Development Tools, ES6 and React Basics
  • Joe took over in the afternoon to talk about the React boilerplate we were using with our app (and can also be nicely adapted for other projects )
  • That night we held a long informal Q&A that raised and answered a number of great questions

Day 3 – The Big Day of Authentication

  • A few more people came to morning yoga 🙂
  • Joe went over how to read posts from the WP API with a nice library he built and I did some exercises on using it with React
  • Ryan rocked the afternoon with an in depth walk through of Authentication, OAuth and the WP Broker they built.
  • By the end of the day we had our live blogging app authenticating with a WP site and pulling in content

Day 4 – Posting via the API & Leveraging Custom Content

  • A few morning folks joined in morning office yoga
  • Ryan walked through the WP Broker OAuth JavaScript library that Joe made for the workshop
  • Then Joe walked folks through the ins and outs of posting to WordPress via the API and JavaScript and working with custom post types and content
  • My work mostly involved doing some example exercises to bridge between the slides and building the project
  • It was pretty cool how fleshed out the Liveblog project was that we built over the week

Day 5 – Taking it Further

  • On the last day I talked about places online folks could go for further learning (including of course my JavaScript for WordPress Master Course)
  • Joe showed some extended features of our app that folks could use for taking things further
  • Then we discussed important related topics like React Native, Redux, React Router and more
  • I’m looking forward to hearing about a number of the projects that attendees had shared about doing

A Big Thanks to Everyone

Matt and Paul helping

Matthew Haines-Young and Paul de Wouters from Human Made were tremendously helpful, walking around helping folks all week.

The attendees, who ranged from full stack JavaScript developers to folks new to React and the API, and everyone did a great job helping one another.

Overall I had a great time and I think the event went really well.  I look forward to the next Week of REST, hopefully in the US 🙂

Joe, Ryan and Zac

What’s Next?

For now I suggest folks check out A Day of REST, a single day conference in Boston on March 9th that will give a big picture overview and real world examples of the WP API in action.

I can also share that a lot of what we covered in A Week of REST is also covered in my JavaScript for WordPress Master Course, which has an open enrollment coming up in the next month.

So, if you missed A Week of REST UK 2016, check out A Day of REST Boston 2017 and my JavaScript for WordPress Course to catch up!

 

 

 

Planning with Human Made for a Week of REST

Last week I had the pleasure of traveling to Northern England to prep for the Week of REST Bootcamp with Joe Hoyle, Ryan McCue and Siobhan McKeown from Human Made.

For those who don’t know about it, A Week of REST is an intensive, week long, in person bootcamp where you learn how to build web apps with the WP REST API, JavaScript, React and Webpack.  This is a follow up to Human Made’s successful Day of REST conference they held earlier this year.

Goals for the Week

20160713_083231.jpg

At the beginning of our week long planning session in the quaint town of Whitley Bay, we set our goals.  We had to build the example app, create the exercises, and hammer out the schedule (along with a few other odds and ends).

20160713_155645

On our first day of planning we set out all the learning objectives (yay for pedagolically sound approaches!) and mocked up the app itself, a Live Blogging app.  It was fun for me to work with such smart, experienced people and also to get to draw wireframes, which I haven’t done since my UI time at Blackboard 🙂

20160713_154759.jpg

From there we decided that Joe would work on the back end of the app and the supporting JavaScript API library that would help with connecting to the WordPress API Authentication Broker.  Ryan focused on building out the React front end of the app, and being DJ.  I took as my task writing exercises that went along with each piece of functionality in the app.  Siobhan focused on some of the bigger picture planning and promotional items.  Then we set out to work.

Getting it Done

I am pretty sure Ryan finished the majority of the app in about a day.  Joe banged out a nice little library to help people connect their sites with the WP Broker and posted it to NPM.  Then came deeper discussions between the two about how to approach one feature or another or even what features the app should include.

20160715_120308

It was a lot of fun working alongside Ryan and Joe.  They are both quite bright, fast and know a heck of a lot about the REST API and building with it.  They also approached the app from a let’s make it something folks would really use perspective.

This Live Blogging App is much more than just a simple demo.  That was refreshing for me because I have often built demo projects that I wish I had more time (or a team like these two) to flesh out further.

My favorite part about working with Joe and Ryan was getting to ask them question after question all day (and evening long).  From why do you setup webpack this way to what ES6 conventions do you think are most used or why does this work that way in React and when should you decouple your app.  Every question got an answer, and several answers led to more questions.  I give Joe and Ryan my deep thanks for patience and playing the role of teachers during that week 🙂

20160713_172721It was also great to have Siobhan on board too who helped with identifying learning objectives, breaking down modules, and assessing how much we could fit into a day.  Felt like I was working with another teacher, which I love, and find leads to good learning.

 

Of course we also took some downtime in traditional web nerd fashion and went to the local WordPress Meetup in New Castle, where Joe spoke about the REST API and Ryan fielded a few questions from the crowd.

Why I Highly Recommend Attending A Week of REST Bootcamp

My first reason for you to attend A Week of REST is that I want to attend.  Even though I’m one of the presenters, I have learned so much in prepping for this workshop and know that I’ll learn even more while there.

You cannot attend a workshop on the WP API and JavaScript with better presenters.  Ryan and Joe work on the API itself and work for Human Made, probably the leading agency for work with the REST API.  In addition to having hands on workshops all day, there are also Q&A sessions every night where you can be like me and ask them all your questions that you have been wondering about the REST API, JavaScript and building apps with it all.  For this reason alone it’s worth attending.

Screen Shot 2016-07-21 at 12.14.39 PM

For those who work for agencies, you will be bringing back a very tangible skill set to your company.  You will have gained insight into planning apps with the REST API, working hands on with best practices for authentication, and you’ll have a solid app that you can use as a boilerplate for your own projects.

A Week of REST is a perfect compliment to my JavaScript for WordPress Master Course too.  Rather than taking potentially months of your time to work through my course, in a week, you get all of the most practical parts on React, OAuth and the API pulled out with a hands on experience.

Please check out the Program Overview on the Week of REST site to get details like location, pricing and what you will learn.  I hope to see some of you there!!!

 

 

 

Zac Gordon Will Be Presenting at A Week of REST with Human Made in the UK!!!

Screen Shot 2016-05-11 at 12.04.59 PM.png

The Week of REST Conference in the UK – Coming later 2016

When I set out to start my JavaScript for WordPress Master Course back in November, Human Made was one of the primary companies I wanted to partner with.  They have Joe, Ryan, Siobhan and many other talented folks who I deeply respect and would love to work with.  They are also the leading company out there promoting the WordPress REST API.

For these reasons, I am super excited and honored to become part of their team for the Week of REST training they will be doing in the UK, later this year.  This is a follow up to the wonderful Day of REST Conference they had earlier this year.

Here is a little information from the splash page for the event:

A four-day residential developer bootcamp, with a focus on building websites and applications on top of WordPress. Learn everything from building a custom API to creating your first application.

Tailored to WordPress developers, the bootcamp will teach you how to leverage the WordPress REST API, creating your own custom APIs, and displaying your data in a frontend JavaScript application. With a strong focus on best practices, you’ll learn everything you need to start building decoupled websites and applications.

I know not everyone will have the means to hop the pond from the States to get over to the UK, but even if you cannot make it, please sign up for their newsletter here.

I can’t speak at this point to anything in regards to a Week of REST here in the States, but I am sure that if a lot of folks show interest and put in requests it would help 🙂

So, please sign up for the newsletter to show your interest in general for the event and if you or your company has the means to get you there for the Week of REST, it will definitely be worth your time!!!

It does not look like this will really be catered to folks new to JavaScript, so if you’re still just getting started or comfortable with JavaScript you will want to check out my JavaScript for WordPress Master Course.

Screen Shot 2016-05-11 at 12.33.10 PM.png

Also, if you were not able to attend the Day of REST Conference back in January, our beloved Brian Krogsgard, of Post Status, is hosting the videos from the conference on his site, so please join.  If you are not a Post Status member, you really are out of the inside loop when it comes to WordPress news, so join the club today 🙂

I will be posting more information on the Week of REST as it gets closer, but let the folks at Human Made know if you’re interested in the event.