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.

WordPress DC 2017 – HTML, CSS and JavaScript Workshops

wordcampdc

This weekend we had the first ever WordCamp DC.  I have been part of the DC WordPress Community since it’s early days so it felt wonderful to have such a great 3 Day ~500 People Inaugural Event.

On the third day of the event we had 6 workshops running concurrently with Contributor Day:

  1. Beginning WordPress
  2. Beginning Marketing
  3. Beginning Brand/Design
  4. Intro to HTML
  5. Intro to CSS
  6. Intro the JavaScript

The user, marketing and design workshops ran at the same times as the HTML, CSS and JavaScript workshops.  I heard all of the workshops were great, but I wanted to highlight the coding ones since it is a slightly different approach to WordCamp Workshop Tracks I have seen lately that solely focused on JavaScript.

Not Just Teaching JavaScript

This year I have been to a number of camps with JavaScript workshop tracks.  Usually they start with an intro to JavaScript, which I have done, then more advanced workshops on topics like frameworks, the WP API, or new JS features and tools.

WordCamp DC took a more general approach and offered Intro workshops on web design overall, including HTML, CSS and JavaScript.  This has some benefits since many people were able to get a big picture look at the common front-end languages.  The downside is that folks interested in more advanced JavaScript topics did not have a workshop option.

When designing workshop tracks I think it’s important to have a pulse on what your community wants and needs.  This approach worked really well for WordCamp DC, but it might not have been the right choice for all camps.

What I Was Able to Teach About JavaScript in 90 Minutes

You can see the slides and practice files for my workshop here.  The main outline included the following:

  1. JavaScript Language Basics
  2. The DOM
  3. Events

Each section had a few slides and a few practice files.

I am very grateful for Beth Soderberg, one of the camp organizers for TAing my workshop.  With her feedback we went much slower than I would have otherwise.  This was good since most people had very little web design or programming experience.

Even some folks who had taken a few online JS courses shared they learned a lot more about how JavaScript interacts with a page using the DOM.

We were able to work through JavaScript Language Basics and The DOM but did not get through Events or the little project I put together.  So, everyone got homework and I hope a few folks try working through it.

In the future I might leave out a few things in order to make the workshop fit better into 90 minutes.  I have been doing different versions of this workshop for a couple months now and learning a bit more each time about what is essential to include and what is not.

Thoughts on Workshop Lengths

I have written about this a few times, but I want to repeat it here.  Workshops can be a great addition to camps.  However, to have a good workshop it needs to be long enough for people of various abilities to follow along and have enough time to practice as a group and individually.

Sometimes there is not enough time to allow for this, but I do think folks will gain more out of 3-4 hour workshop than a 90 minute one.  Sometimes this means you cannot offer as many workshops or cover as many topics, but it does mean people will leave having absorbed more.

One way around this is rather than trying to teach an actual subject, like HTML, JavaScript or Vue in a single 90 minute workshop, do a live build out of a specific feature or project.  For example, rather than a 90 minute workshop on VueJS and WordPress, a better 90 minute workshop might be How to List Blog Posts with VueJS and WordPress.  You can make clear you’re not teaching all of Vue in 90 minutes, rather showing how it works in action.  As long as you provide enough time for everyone to follow along with coding out the project it can still be a beneficial workshop and you’re more likely to get through everything.

Keep Up the Teaching!

Workshops at WordCamps have been going on long before I started writing about them, but since I am trying to be more involved in teaching JavaScript in person at WordCamps via Workshops, I would like to encourage camps to really think through and plan how they can offer the best workshop offerings at their camps.

Some suggestions I have for WordCamp organizers include:

  1. Poll your community on what it wants to learn about in more depth via workshops
  2. Try to provide 2-4hrs for a single workshop
  3. If you are planning a Workshop Track, make sure workshop leaders discuss with each other how to tie their talks together and not have to reteach the same thing
  4. Have multiple TAs in the audience to help attendees and give feedback to workshop leaders on pacing

I’ll just end again with praise and props to WordCamp DC for coming up with an amazing workshop track.  Everyone I talked to learned something and having workshops on non coding topics was really popular.

 

WordCamp Orange County 2017 JavaScript, Vue, React, Redux, GraphQL & WordPress API Workshops

Wow #WCOC

I have had the wonderful opportunity to attend a number of WordCamps, so it is always exciting when I attend a new (to me) amazing WordCamp. WordCamp Orange County 2017 was one of those Camps.

Props to all of the organizers and attendees for representing so well the diverse and deep nature of the WordPress Community all coming together to help each other (and have fun). So many great talks, and I personally learned a ton from showing up and asking a lot of questions 🙂

WordCamp Orange County was also one of the Camps to reach out to me in response to my tweet asking if any WordCamps wanted a workshop on JavaScript and the WordPress REST API so I was excited to take part in their series of JavaScript and WordPress API Workshops.

Planning The Workshops

Jason Bahl, Jacob Arriola and myself  all did two hour workshops that spanned the following JavaScript and WordPress API topics:

  • Vanilla JavaScript
  • VueJS
  • React & Redux
  • GraphQL and
  • The WordPress REST API

I want to thank Jacob and Jason for the backdoor Slack discussions before the Camp figuring out how we can tie our three workshops together and best plan everything.

Two hours is also not a lot of time to lead a workshop because ideally a workshop has time for the following:

  1. Setting up the local development environment and getting the practice exercises and slides
  2. Time to both code along with the instructor and time to practice what they learned on their own or in groups
  3. Ability for attendees to receive assistance if they fall behind or have questions

If you’re looking to plan a WordCamp JavaScript talk or workshop track I recommend you encourage the presenters to discuss and organize their talks a bit during Camp planning stages for the best flow for attendees. This also happened with the WordCamp Miami Learn Deeply Tracks and that made a huge difference there as well.

I will say that even though we did feel we could have done more with more time, the workshops were a success in my opinion, and I think that other WordCamps should definitely follow the example of WordCamp Orange County and WordCamp Miami with planning JavaScripty talk or workshop tracks 🙂

 

Zac’s Workshop – Vanilla JavaScript and (a little WP API)

I went up first with a workshop on Vanilla JavaScript. After a quick JS 101 pop quiz,  the workshop focused on DOM and Event fundamentals that can often be tricky or frustrating without an understand how the DOM API really works under the hood with JavaScript.

I got some feedback from folks who use jQuery regularly that this gave them some ideas for how they could do a few more things with VanillaJS that they had previously just used jQuery for. I’m not anti jQuery, especially since it is already loaded in so many places in WordPress, but, I do think it’s powerful to know how things work under the hood with Vanilla JavaScript.

I’m excited to continue to improve this workshop as I continue my JavaScript Workshop Tour at more WordCamps this year.

Jacob Arriola’s VueJS Workshop

Jacob did a great job not only delivering his workshop, but completely theming the project to the WCOC 2017 Super Hero Theme. Way to go above and beyond mate 😉 Jacob has been using VueJS at work for Zeek Interactive and you can tell he likes it’s ease of use combined with incredible power. (Side note, Arron Holbrook, also listed below, was a huge help in refining the plugin and wp apis section of my upcoming Udemy course, tx mate!)

Attendees got a chance to build out a Vue app and learn about the essentials of the framework. I overheard a number of folks talk about how well Jacob explained things and how easy Vue is to use. I definitely think this will inspire a number of companies to spin up small Vue projects in the coming moons.

Jacob is an active member of the WordPress and JavaScript community in the WCOC area and I definitely recommend you say hi and start a conversation with him next time you see him.

 

Jason’s React, Redux & GraphQL Workshop

WordCamp Orange County was lucky to have Jason leading a workshop that got into all of this, especially GraphQL.  Like Jacob, Jason presented a really strong case for working with the React, Redux and GraphQL stack in decoupled environments with WordPress.

He did a ton of prep work for this talk, including writing out a series of blog posts walking through everything he covered. Jason has done a lot of work in the arena of bringing GraphQL to WordPress and his workshop was amazing.

Jason went over getting up and running with React and then introduced Redux in a really clear and structured way that showed how you can save on queries to the API. The app he everyone got to build was a Netflix style site and it really showed off the power of these tools in action.

The part that I was most interested in hearing about was GraphQL and I was not disappointed. First, Jason showed how much more performant GraphQL is compared to the internal REST API for decoupled projects (10 times?!!). Then he showed how we can leverage GraphQL for grabbing data into our app and plugging it into the React / Redux architecture.

I highly suggest you go check out this tutorial series and follow GraphQL on Twitter.

 

My Overall Thoughts on JavaScript Workshops and Tracks at WordCamps

I am very grateful to be involved with the WordPress Community during these days of more interest in and talks and workshops coming out on JavaScript and API Driven WordPress Development.

If you help organize or influence your local WordCamp, I encourage you to follow the example of WordCamp Orange County and WordCamp Miami in helping your community become more inspired and confident with JavaScript and WP REST API (or GraphQL ;))

Leverage your local community of experts (both within WordPress and outside of it) and feel free to reach out to me for ideas or involvement 🙂

Happy JavaScripting!

How to Redirect to Custom Page After Completing a LearnDash Course

One of the features I recently finished for the my redesign of my JavaScript for WordPress site was to have users taken to a special page once they complete a course.

You can do this a number of ways, but here is how I did it:

 

1. Setup Congratulations Pages for Each Course

The first thing I did was create a parent page called Congratulations with the url of “/congrats.”

Then I created Child Pages, one for each course.  Those pages looked something like this.

Screen Shot 2017-06-02 at 2.29.43 PM.png

You can see the badge displayed and the number of points earned (I use BadgeOS and BadgeOS LearnDash Add-on).

The most important thing I did was give each page the same slug as the course it is tied to.  If I didn’t do this, then the next step wouldn’t work as coded.

 

2. Add This Code to Your Functions.php

The next step was to find the LearnDash hook that fires when a LearnDash course completes.

Luckily there is a learndash_course_completion_url hook that let’s return a URL and the redirect happens automatically.

This code gets the slug for the completed course and then creates a new URL string of “/congrats/course-slug.”

NOTE: This will only work if you you did these two things from Step 1.

  • Create a parent page with the URL slug of “congrats”
  • Create child pages for each course using the same URL slug as the course

 

Hope this Helps!

If you have a LearnDash account you can access the list of Action and Filter Hooks here.  Since that page is password protected, thought I would share this snippet with you.

Hope it helps!

Get Lesson Object for a Topic in LearnDash

While customizing LearnDash I came across an issue in the topic.php file where the $lesson_post variable was returning null even when there was a parent lesson for the topic.

So, after digging around at the LearnDash source code a bit I came up with this simple solution to grab the lesson whenever I needed using the topic post which is accessible via $post.

Not sure if others will find this helpful, but there are not a ton of extensive docs or articles on developing for LearnDash so wanted to share 🙂