Category Archives: WordPress Tips

Learn How I Built the JavaScript for WordPress Master Course and Teaching Site on the “How I Built It Podcast”

“If you’re looking to setup an online course just grab this podcast!”

I love hanging and chatting Joe Casabona.  Naturally, I was excited when I found out he wanted to chat with me on his How I Built it Podcast about how I built my JavaScript for WordPress Master Course.

A lot of folks have asked me content related questions about the course, but this is the first time I really go in depth about actually building the course, from researching content, to building a team, to picking an LMS, all the plugins I used and several of the snags I hit.

It was really fun to talk about all of this and I share a lot of information.  If you’re interested in how things are built and the behind the scenes technologies, I would definitely recommend listening to this episode.

Students may particularly appreciate what has gone into the course.

Episode 9: Zac Gordon & Javascript for WordPress

 

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!

 

 

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!

Guest on WPwatercooler – Beyond Learning JavaScript Deeply

Thanks to George Sephanis for inviting me on the WPwatercooler show this week to discuss what else is worth learning deeply in 2016 besides JavaScript.

Of course, several of the folks on the show, including myself, are still focused on learning JavaScript in 2016,

However, a number of other good areas came up as well:

  1. Ways of Building with a API
  2. Learn Git, WP CLI, Workflow Tools
  3. Still Learn HTML, CSS and SASS
  4. Regular Expressions?!
  5. How to Customize Visual Composer
  6. Use Sketch to Build Mobile First, Responsive Sites
  7. Other ECMA languages like ActionScript?
  8. Learn Hosting More Deeply (ie how and why Pantheon approaches hosting the way they do, NGINX, Linux)
  9. Learn Local Development with DesktopServer, if you haven’t yet
  10. Bring Adaptive Content Delivery to WordPress

Thanks again for inviting me on the show, good times!

How and Where I’ve Been (Re)Learning JavaScript

As I speed down the path to launch for my JavaScript for WordPress Master Course, I have been busily learning and relearning JavaScript anew.

Actually, I have worked with JS for a long time now and even taught college and high school JavaScript courses well before Treehouse.  However, JavaScript has come a long way in the last few years and I’d like to share and give thanks for all of the people and places I have been checking out to sharpen my skills and deepen my understanding.

 

First, A Thanks to Remkus and Wes

First, let’s all give thanks to Remkus de Vries for being the first person to really get a comprehensive study guide out to the community in response to Matt’s homework assignment.  Hopefully we’ve all read his Learning JavaScript in WordPress, Deeply article by now and took notes.

Others have written similar posts since then, but I particularly want to give a shout out to Wes Bos (an advisor to the course and an amazing JS trainer) who wrote an article with tons of resources for learning JavaScript.

 

You Don’t Know JS Book Series

Most of my re-learning of JavaScript has come from reading the series You Don’t Know JS.  This book is so good and really gets into the aspects of JavaScript that most people do not really take the time to learn.

This You Don’t Know JavaScript book series offers a contrary challenge: learn and deeply understand all of JavaScript, even and especially “The Tough Parts”.

Here, we address head on the tendency of JS developers to learn “just enough” to get by, without ever forcing themselves to learn exactly how and why the language behaves the way it does. Furthermore, we eschew the common advice to retreat when the road gets rough.

~ From the Preface of You Don’t Know JS: Up and Running, Kyle Simpson

I will likely make this book series pre-requisite / required reading for the course and will teach about all of the major topics it covers:

  1. Scope
  2. Closures
  3. this
  4. Object Prototypes
  5. Asynchronous programming
  6. Performance
  7. ES6 (ES7 and beyond)

So, big shout out to the You Don’t Know JS Book Series, which you can get for free on Github.  I’d suggest start reading it now if you’re interested in my JS for WP master course 🙂

More JavaScript Books

There are other books on JavaScript as well, but I have already read the Definitive Guide, The Good Parts as well as a number of others.

Here are a few other JS books that have caught my eye and I plan to read through before I finish the course:

 

Learning Via Videos

Lynda.com

A couple of weeks ago, a great member of the WordPress community, Roy Sivan (also an advisor to the course) launched a course on Lynda.com on Building a Single Page Application with AngularJS and WordPress.  That got me to sign up for a free account with Lynda.com so I could watch his course. Morten Rand-Hendriksen also teaches at Lynda and I checked out his courses on the REST API and Grunt and SASS.

Then, since I still had some time on my free account I proceeded to watch all of their intermediate and advanced JavaScript, Angular, React and Backbone courses as well 🙂

Udacity

Another online video site I heard about a lot while at Treehouse was Udacity.  I had never tried them before but I can say that they do have some great JS related content.  I signed up for a free account and checked out the following courses over there:

I liked the Udacity courses, the content was pretty good and not just introduction level JavaScript (although they have that too).  Shout out to Ben Jaffe, the instructor for most of those courses, I dig your style man 🙂

React For Beginners

Wes Bos has a series on React for Beginners.  Since React, Backbone and Angular are newer to me, I have been soaking up everything I can on these frameworks.  I highly recommend watching Wes’s course on React.  I went for the package that lets you download the videos and watch them offline.

EggHead.io

I had not heard of this site until reading Wes’ article that I link to above.  However, the site has so many videos on advanced JS topics that I couldn’t not sign up for a Pro account.

I am currently watching their videos on the following topics:

Frontend Masters

I found this site because Kyle Simpson, the author of You Don’t Know JS, mentioned above, offers several courses there on advanced JavaScript topics.  I have learned a lot from these folks and this is one of the better advanced learning sites out there.  Here are just a few of the great courses they have I’ve been watching:

Articles, Tutorials and More Websites

Once I started building out the actual projects for the JS for WP Master Course I realized (as we all do) that reading books and taking courses wasn’t enough and I had to dig deeper into specifics of the JS language, the WP API, and related frameworks.

In no particular order, I found these resources pretty helpful:

 

All of the JS for WP Master Course Advisors

I am so grateful for the list of 20+ advisors we have for the JS for WP Master Course.

When I taught at Treehouse I would occasionally ping experts with questions, but most of the courses were developed in isolation.  This course is completely different and I’m so much happier building a course with a panel of both technical advisors and experienced educators.

My meetings with the technical advisors mostly involves me picking their brains on specific things I don’t understand yet or just asking open ended questions and listening to them preach, ramble and often talk way over my head 🙂

The craft of an educator comes from an ability to learn something quickly and deeply, process it thoroughly, and reteach it to others in a way that makes sense and promotes the highest learning.  This is my skill and craft.  I also happen to know and love programming,  JS and WordPress, but I am first and foremost a teacher.

A huge thanks to the technical advisors who work with JS and the API on a day to day basis and have experience really getting into developing projects with the skills that the master course will cover.

To mention a few technical advisors specifically: Adam SilversteinBryce AdamsKevin StoverGeorge SephanisNoel TockBrent SheperdScott Bolinger and Josh Pollock.  Thanks folks!

I’ll write more in the future about the advisors (and the one’s with education experience in particular).

 

I Still Have A Lot To Learn

I have the utmost confidence, but I will also share it’s quite daunting to take on building a Masters level course on JavaScript for WordPress.

Most of my learning now has to do with the inner workings of Backbone, the changes in Angular2, how to best build with React and WordPress and the exciting changes with ES6.  Oh, and how to get Webpack working properly :p

Since the JS for WP Master Course will include Backbone, Angular and React projects, I am mostly learning through building at this point.

Shout out to the React and Angular WP admin boilerplates on Github and all of the people who have released Angular or React WP themes or projects.  I am trying to download and explore the code in everything I can find at this point.

 

How Have You Been Learning?

If you decide to wait to learn all of this stuff until my JS for WP Master Course comes out, I don’t blame you 😉

However, if you have been attempting to Learn JavaScript, Deeply on your own, I’d love to know about some of the resources you have found helpful.

PHP for WordPress Talk on WordCamp TV

A couple weeks ago I had a chance to present on PHP for WordPress at WordCamp Baltimore 2015.  Thanks to the good folks who recorded and got everything together to post on WordCamp.tv you can now watch the video of the talk.

Check it out and then head over and learn more about my PHP for WordPress Course at Treehouse 🙂https://videopress.com/videopress-iframe.js

Slides for WordCamp Baltimore – Learning PHP for WordPress Development

I’m very excited to be back at a WordCamp in Baltimore, a town I love.  Today I am speaking on PHP for WordPress, a topic near and dear to my heart since I learned PHP via WordPress and, as a teacher, guide others on this path as well.

After you check out the slide notes, please check out the Trailer for my PHP for WordPress Course from Treehouse.