Tag Archives: Workshop

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.

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 JoseŐĀ 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 JoseŐĀ 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 JoseŐĀ 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 JoseŐĀ 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 JoseŐĀ 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.

 

$100 Off My WooCommerce Development Workshop at WooConf 2016

Screen Shot 2016-03-05 at 10.36.22 PM.png

I’m super excited to head out to Austin on April 6-8 this year for my 2nd¬†WooConf. ¬†This year I will be doing a workshop based on a¬†WooCommerce Theme Development Course I did at Treehouse.

Thanks to the folks at¬†WooCommerce, I have an unlimited coupon code “WOOCONFZAC” for $100 off¬†for anyone who wants to attend¬†the conference for Woo work.

Check out the trailer for the course to get an idea of just some of what we will get into.

 

Of course we will also talk a little about JS and API work with¬†WooCommerce ūüėČ

Check Out My Live Workshop on Making a WordPress Theme with the ZURB Foundation CSS Framework!

Thanks to some encouragement from one of our Treehouse students, Anthony Hind as well as our awesome video team at Treehouse, I was able to do a live workshop this week on how to build a basic WordPress theme with the Foundation Framework from ZURB.

You can find the workshop here on Treehouse.

If you’re interested in learning more check out our other¬†WordPress courses on Treehouse!