Tag Archives: JavaScript

WordCamp Ann Arbor 2017 JavaScript Workshop

My First WCA2

Zac Gordon teaching JavaScript at WordCamp Ann Arbor

When I put out the call at the beginning of 2017 that I would like to start doing more JavaScript workshops, my good friend Kyle Maurer, from WordCamp Ann Arbor, was one of the first to invite me to come do a workshop.

The Workshop

I have continued to refine the JavaScript for WordPress workshop I have been doing and I think it continues to evolve into a solid workshop covering JS and WP API fundamentals while also building something practical.

In the workshop we cover the following:

  1. JavaScript Language Basics (Programming 101 w JS)
  2. The Document Object Model
  3. Events with the DOM & JavaScript
  4. The WordPress REST API
  5. How to pull the API into JavaScript in a stand alone and theme environment

Of course there was still more I would have liked to include, but I think we did a really good job.

Slide Deck and Resources

20171013_115246

Super Fun Getting to Know Some Students Working in the Field!

You can check out the slide deck and resources for the workshop over here on my 2017 WordCamp Ann Arbor landing page.

A Reflection on WCA2 Social Activities

One of the nice things that WordCamp Ann Arbor did well and a little different was to have non WordPress related breakout sessions on the first day where folks could group up and go on a range of activities from a walk through the Arboretum to Pub Crawling.

20171013_180427

Hanging out with WordCampers at WCA2 2017

At first I was hesitant of these plans, but it turns out it was brilliant and the perfect chance to know some other attendees more deeply.  I had a great time and enjoyed getting to know folks better.

Overall, great job WCA2!  I had heard about your camp for a while and you did not disappoint.  There is rumored to be four Michigan camps in 2018 so I look forward to making it back!

Congrats and well done to all the organizers for WCA2 2017!!!

Zac Gordon Advanced JavaScript Topics Talk at WordCamp San José Costa Rica

Teaching JavaScript Deeply at WordCamp San José 2017

WordCamp San José

¡Pura Vida! Is the best way to start my review of attending WordCamp San José (formally WordCamp Costa Rica).

Organizers Roberto Remedios and Alfredo “El Puas” invited me to do a workshop at WordCamp San José 2017 earlier this year while we were all hanging out at WordCamp Miami (also a great camp to attend).

What started as a JavaScript workshop turned into a talk on advanced JavaScript and sitting in on a JavaScript panel with two other amazing speakers.

Un Poco Sobre WordCamp San José

IMG_2367.JPG

WordCamp San José 2017 took place at La Universidad Latina de San José, Costa Rica.  More than 350 people attended two days of talks with three tracks.

WordCamp San José Talk from Johana about Brand

Most of talks were in Spanish and topics covered everything from Marketing to Development (w plenty of JS) and everything in between.  Many of the talks also included sing language interpretation and a good group benefiting from it.

DSC_0569.JPG

The layout of the venue was great, with a big open area for the sponsors right in front of the three rooms for the talks.  The main sponsors had cool seating areas and the food included amazing breakfast, lunch and treats!

Screen Shot 2017-09-07 at 10.14.39 PM.png

Let’s not forget about the after party either.  The camp hosted everyone with music, food and great atmosphere at a nearby restaurant / club with a pool and hammocks (not pictured).

My JavaScript and WordPress REST API Workshop

Continuing with my 2017 JavaScript Workshop Tour, I ran a 3 hr workshop on the Friday day before the two day of talks. You can see the slides and example files for the workshop here.

Zac Gordon Costa Rica WordCamp San Jose JavaScript Workshop.png

The workshop covered the following:

  1. JavaScript Language Basics
  2. The Document Object Model
  3. Events in JavaScript
  4. The WordPress REST API
  5. Using JavaScript and the API in WP Themes

Unfortunately, my Spanish was not quite good enough to give the workshop in Spanish so props to all the bi-lingual attendees for following the talk, along with questions, in English.

Zac Gordon JavaScript and WordPress REST API Workshop San José WordCamp Costa Rica.JPG

I like the 3hr time span for a workshop.  It let’s you really cover fundamentals and give time for practice.  Big thanks to the organizers and attendees for inviting me down to do this workshop.

Next year I am going to try to do it en Español 🙂

My First “Advanced JavaScript Topics” WordCamp Talk

A few moons before the camp started, the organizers asked if I would like to do a talk in addition to the workshop.  I knew I would be recording my Advanced JavaScript Topics section of my Master Course so I submitted an open ended talk entitled “Interesting Things About JavaScript” that was actually a JavaScript homage to Andrew Nacin’s Advanced WordPress Topics talk.

Zac Gordon Advanced JavaScript Topics Talk at WordCamp San José Costa Rica

The talk included a number of different intermediate, advanced, new and, well, interesting things, about JavaScript that I am going into more depth on in my Master Course.

The slides might not be as helpful without the explanations but you may still gleam some things from flicking through the deck 🙂

5 + 1 Question JavaScript Panel

As an added bonus I got to sit in on a panel on JavaScript with Elio Rivero from Automattic and Gabo Esquivel who heads up the JavaScript community in San José.

Zac Gordon JavaScript Panel WordCamp San José w Elio and Gabo

The questions were basically something like this (but in Spanish except for my answers):

  • Panelist Intros
  • Advice for JavaScript beginners (I said CodeAcademy, Treehouse, Wes Bos and of course my free JavaScript videos)
  • Top 3 Good JavaScript Practices (I suggested Testing, Coding Standards and Keep on Learning)
  • Favorite JS Framework and why (Choose the best tool for the job, I like Vue for it’s architecture and ease and React for Gutenberg Blocks etc,  If I was building a huge app or plugin I would also consider Angular)
  • Most challenge JavaScript project (Teaching JavaScript Deeply!)
  • JavaScript for WordPress in 2018 (Gutenberg, JS Widgets, More w Customizer, Keep Learning JavaScript)

Overall a Great Camp with Lots of JavaScript

Muchas gracias a los organizadores y voluntarios de WordCamp San José 2017.  It won the 2017 WordCamp Award for food (rice, beans and real cooked food is soo good) in my opinion.

WordCamp San José 2017 Volunteers

It also had a ton of talks on JavaScript in addition to mine, like Cross Platform React, CSS in JS, Calypso, Angular, GraphQL and even a demo of Caldera Forms in action, which I am definitely checking out for my next WP project that needs JS driven forms.

I am going to start a rumor that in 2018 you may see more than one large WordCamp in Central America around the same time period.  I highly suggest you attend and get some of this Pura Vida WordCamp energía!

Workshopalooza at WordCamp Denver 2017

cropped-logo-website.png

This weekend I had the opportunity to attend WordCamp Denver, a great example of a well attended and run local camp.  The first day included two tracks of great talks.  The second day featured 13 different workshops (including one from me on JavaScript + WP REST API).

  • Site SEO Checkup
  • Flexbox
  • Defining, Mapping and (Sometimes) Automating Your Business Processes
  • 5 Things You Can Do to Get More Traffic to Your Blog
  • Making Your First WordPress Plugin
  • Let’s learn Git. No more excuses.
  • Take back the day with WP-CLI
  • Learn Vanilla JavaScript (& The WP REST API)
  • How to create an intro packet to streamline client screening and onboarding
  • Get Personal – Content Personalization with WordPress
  • Advanced WordPress Features for User / Bloggers
  • Building a Theme
  • How to Attract More Clients with Better Branding

 

13 Workshops in 1 Room, All at Once

Honestly, at first I did not think this idea was going to work.  All of the workshops took place in the same room.

Each workshop included 8 people around a round table (w a monitor rather than a projector).  Some workshops had two groups of tables.

I predicted mayhem.

Actually, this was a GREAT setup and I would actually recommend it to other WordCamps.

20170827_095815.jpg

Here are what I think are some Pros to this approach:

  • You can cover a lot of different topics
  • It is invigorating to have other workshops going on (folks did not seem as tired after 3hrs)

There are some downsides however:

  • Limited to ~8 people per workshop (other camps have workshops with 30-50 people)
  • Some folks had a hard time hearing with 2 tables and a presenter at the far end of one of the tables
  • Not directly related to this approach in general, but make sure everyone has power and presenters have a monitor with proper cables and adapters.

Although I would have liked to have been able to offer the workshop to more people, I think that this approach worked really well for WordCamp Denver.

 

3 Hours is a Good Length for a WordCamp Workshop

Most of the WordCamp workshops I have seen this year run 90 minutes or 2 hours.  I do not think this is enough time for attendees to practice on their own and cover enough content for people to walk away feeling like they really learned something.

 

20170827_092641.jpg

 

Three hours works well.  You can either move at a nice and relaxed pace and cover a single topic very well.  Or you can go faster and offer more ready made resources like exercise files, templates or example projects.  With this approach you can cover quite a lot of content in 3 hours, while still giving time for practice.

 

My Continually Evolving JavaScript Workshop

I did a lot of work between WordCamp DC and WordCamp Minneapolis modifying the JS for WP workshop I have been giving this year.

You can see the slide deck and example files for the WordCamp Denver version of the workshop here.

I took out a lot of things this time on the DOM (traversing, cloning, deleting), removed most examples that used webpack, and added in more on wp_localize_script and the Backbone API Client.

I also took out a section on JSON (w JSON.parse and JSON.stringify), instead relying on Axios, jQuery or the Backbone Client to get the JSON into a native JS object.  In hindsight this was a mistake.  I think it is valuable to learn if you are taking the approach of trying to learn how things work under the hood in JavaScript.

On the other hand, I could skip over JSON and AJAX completely if we are already inside of WordPress and just use the Backbone API Client.  In the past I have taught AJAX using Axios or jQuery and would really like to start pushing the Backbone Client as the recommended way to make JS WP API requests inside a theme or plugin.

 

20170827_092633.jpg

Even with taking a lot of things out of the workshop, it still has too much for a three hour workshop.  Really I think that this workshop should mostly (90%) focus on JavaScript (and less trying to cover different API implementations).  So an outline like this:

  • JS Basics
  • DOM selection, manipulation and creation
  • Events
  • JSON and AJAX (Then pull in WP REST API as the example)

Currently I am doing a lot more with enqueueing JavaScript in WordPress.  One approach could be to do the entire workshop inside of WordPress themes instead of stand alone JS and HTML files.  This may give it a more JavaScript for WordPress feel as opposed to more just a JavaScript workshop.  It will also ensure if we get cut short that this basic skill gets covered.

I will continue to work on giving and modifying this workshop through the end of this year.  Next week when I give this workshop at WordCamp San José and try out some different approaches mentioned here.

 

Hats Off to Leah Ashley (and other organizers)

Apparently, lead organizer, Leah Ashley, emailed each WordCamp attendee asking them what workshop they wanted to attend.  This resulted in pretty much all workshops completely full.  Great job Leah (and every one who helped and supported you).

If you are in the Denver area I would definitely suggest coming out to this camp in the future.  It was well run, fun and not too overwhelming.  Great job to all the volunteers and folks who made WordCamp Denver and Workshopalooza Denver 2017 possible.

If you want to learn more about JavaScript for WordPress, please check out some of my free JavaScript videos here.

Slides from WordCamp Baltimore – A Year of Learning (and Teaching) JavaScript Deeply

Today I had the chance to speak at WordCamp Baltimore 2016 about my last year of learning and teaching JavaScript Deeply.

I had a great time preparing the slides and getting everything ready and hopefully it all went well 🙂  I’ll add up the video once its on WordPress.tv

 

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!