Category Archives: WordPress Updates

WordCamp New York 2017 JavaScript Workshop

WCNYC 2017.png

It’s been a good number of years since I last attended a WordCamp New York.  But it holds a warm place in my heart.  My first WordCamp was WordCamp New York 2008 🙂

This year, my good friend, David Parsons, took up the lead organizer role and put on a great WordCamp New York.

From the venue to the speakers, it all went very smooth and had a nice local camp feel.

Reflections From the JavaScript Workshop

IMG_20171022_003310_556.jpg

My workshop was an adaptation of a similar workshop I have been doing at a number of other camps this year.

However, I learned one important thing this time.

It is important to take the time at the beginning to address who needs to “Learn JavaScript Deeply” from a programmer’s perspective and who just needs to know what it is capable of doing.

I noticed that some people loved learning vanilla JavaScript fundamentals and how to integrate with the WordPress REST API.  However, some people hung around through several hours of the workshop with not really realizing they did not need to learn JavaScript deeply as a developer. Some of these people were just savy website owners.

This supports something I have been saying for a while:

Compared to HTML and CSS, which you can learn a little and do a lot, with JavaScript you have to learn a lot to do a little.

All that said, for folks who wanted to learn JavaScript more deeply (or even just for the first time) I think the workshop went great.

Changes I’m Making for Next Time

There are a few modifications I am going to make for next time though:

  • Add a note at the beginning about “Who Should Be Learning JavaScript Deeply” and who can just learn to “Speak JavaScript”
  • With the decoupled Vanilla JS and WP REST API practice project we will just use fetch instead of introducing Axios or jQuery.
  • Inside of WordPress, when we import our decoupled example into a WordPress theme I am just going to show how to use jQuery AJAX.
  • Rather than try to teach the Backbone client I am just going to mention it at the end.  After teaching it for a while, I think it is best to know some Backbone before trying to use this.

You can view the slides and example files from the workshop here.

Learn More JavaScript!

WCNYC 2017 (1).png

Want to learn more JavaScript?

Head over the JavaScript for WordPress to learn about my Master Course to help you learn JavaScript more deeply.

Data Visualization Talk at WooConf

Wow!  What an honor to attend the 3rd annual WooConf!  Last year I did a workshop on WooCommerce Theme Development.  This year it was all JavaScript, API, and Data Visualization.

I was a little unsure going into the event how the talk would go.  Originally it was a workshop using the Woo API and Chart.js and D3.  However, shortly before the event started, the format was switched to a standard 50 minutes talk.

A Big Thanks!

Luckily, I think that everything went well.  I did a lot of research on Data Visualization as well as related JavaScript libraries.  A big thanks go out to all the folks at the conference who gave me insights into how they do data visualization with their work.  Also shoutout to K. Adam White’s talk at WCEU on data visualization.

Come Out Next Year!

If WooCommerce is how you make your living, you might look into attending WooConf next year.  They put on an amazing conference and I highly recommend it, not just for the talks, but for the networking as well.

Want to learn more about WooCommerce development?  Checkout my WooCommerce Theme Development Course.

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.

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!