WordPress DC 2017 – HTML, CSS and JavaScript Workshops

Leave a reply

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

Leave a reply

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!

Update WooCommerce Order Address Dynamically When Customer Updates Their Address

Leave a reply

The Problem

While working on my JavaScript for WordPress redesign I came across a problem that ultimately had a simple solution, but it took me a while to figure out how to implement it.

During the checkout process in WooCommerce I have removed many of the default fields to make sign up faster.  Since my course is digital I don’t ask for shipping details and the only billing details I ask for is the country and the VAT Code (using this plugin) along with email and password, which is necessary for access to courses.

Screen Shot 2017-06-07 at 3.19.29 AM.png

Checkout page with most fields removed (including billing address)

The problem with this is that when people want to download an invoice it will not have some of the information they may need.

I thought that if a user was able to update their address in their My Account area then the order billing details would also be updated as well.  This is not the case.

Billing (and shipping) details are stored in the post meta for WooCommerce orders. This means that we have to hook in when a user saves their address and update the post meta for all of their orders as well.

The Solution

First I want to say that this is a solution / hack for a very specific problem I have and it is not without consequences.  This solution will update all orders for a custom whenever their save their billing details.  I am fine with this, but your user may not expect this so proceed if this trade off is acceptable for you.

Here is what this code does:

  • Hooks into the woocommerce_customer_save_address action hook.
  • woocommerce_customer_save_address gives us access to customer user ID
  • Then we get the meta data for the customer using get_user_meta().  This includes the updated billing details that were just saved.
  • Following that we pull in all of the orders for that customer using get_posts()
  • From there we loop through all the orders and update the order meta data to match the newly saved customer data.

I want to say again that a WooCommerce users post meta data for a reason.  Just because a user updates their billing information does not mean that they want their past billing details replaced for orders already placed.

This was a bit of a quick hack and I am sure folks could make this more efficient.  Please share if you have ideas or found this useful!

However, this allows me to simplify my checkout process and give customers an easy way to add whatever information they need in their invoices then download them.

How to Redirect to Custom Page After Completing a LearnDash Course

Leave a reply

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

Leave a reply

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 🙂

Local from Flywheel Saves Database SQL Files When Site is Stopped

Leave a reply

I was recently following some troubleshooting steps for Local and removed the docker component that Local automatically sets up via an app called VirtualBox, which it installs during setup.

Right after I did this I realized that I may have also deleted all of the databases for my sites.  Turns out I did.

NOTE: If you remove a site in Local as part of testing, I suggest you do not delete the associated files as well (ie app/public etc).

Luckily, Local has a nice feature that automatically backs up all of your database tables whenever you stop a site.

Since Local stalled and wasn’t stopped properly, I did loose a little bit of data, but not too much 🙂

Screen Shot 2017-05-17 at 2.15.18 AM.png

Thanks Clay and the Local folks for helping me figure this out (check out the forum post).

If you’ve been liking Local, but also notice it freezes up or doesn’t work sometimes, I feel you 🙂

I haven’t done this in the past, but I may look into a DB backup solution for local dev just in case of things like this (my files I save via Dropbox).

LearnDash and WordPress Groups

Add User to LearnDash Group When Orders a WooCommerce Product

1 Reply

LearnDash and WordPress Groups

I love the LearnDash LMS for WordPress.  I use it over at javascriptforwp.com and not only is it powerful out of the box and with plugins, but it’s hooks allow for even more.

One thing LearnDash cannot do out of the box is sell access to Groups via WooCommerce.

A Group in LearnDash, amongst other things, let’s you assign a group of courses to a group of users.  You can add courses over time and those users will automatically get access.

For my JavaScript for WordPress Master Course I wanted to switch from one gigantic course (hundreds of lessons) to a bunch of smaller courses that I could also sell individually.

To do this I setup a new Group in LearnDash called “Master Course” and added my new smaller courses to it.  I also created a new WooCommerce Virtual Product called “Master Course.”

Then I simply added this code to my functions.php:

Here is what this code does:

  • Hook into WooCommerce when an order is marked complete
  • Checks to see if that order includes my Master Course WooCommerce product
  • If so, it adds that user who purchased the product to my LearnDash group

It’s pretty simple and shows the power of hooks in WordPress.

To customize this for your own use you would have to add the Group and Product IDs to the corresponding variables on line 5 and 7.

One thing this doesn’t do is remove a person from a group if they cancel or are refunded the order, since this is something I wanted to do manually.  However, you could easily do this by hooking into the woocommerce_order_status_cancelled or woocommerce_order_status_refunded hooks.

A big thanks to Justin from LearnDash and Ernest from UncannyOwl, who is working on a plugin that will also allow for this functionality.