Categories
Setup

How I Built the #KOTESOL2020 National Conference Website

There are really 3 different websites in question here, and multiple integrated technologies:

  1. KoreaTesol.org (view site)
  2. Kotesolconf.com (view site)
  3. Live.Kotesolconf.com (view site)
  4. WordPress Plugins
  5. Reflection

The conference organizers originally approached me about helping to build the conference website around the beginning of March. That gave us only about 6 weeks to organize everything to transition from an offline conference to an online conference.

KoreaTesol.org

KOTESOL Main website
Purpose & usage:

The Main KOTESOL website is traditionally the “single source of truth” for all KOTESOL Conferences. It usually includes:

  • Conference information & announcements
  • Speaker information and schedule
  • Information on hotels & the surrounding area
  • Presenter & attendee registration
  • Fees & bank transfer information
Limitations:

Unfortunately, the Main KOTESOL website also has various limitations and constraints we tried to work with (or around):

  • Page building and Post writing are stylistically limited
    • This is to maintain better control over the entire website’s design while allowing non-programmers to update the website without breaking things
    • Basically, the Main site acts as a blog, with the same basic design limitations a simple blog would impose
    • It is assumed that most web editors are copy-pasting text from MS Word documents that require minimal formatting
  • The site itself is running a software that was originally released in early 2011. Although the software continues to receive maintenance updates, it is scheduled to reach “End of Life” in November 2021. So, the site is really due for an update.
Needs:

The conference organizers needed a website built quickly that would look great, function well, and not be as limited as the Main website. Basically, they were asking for:

  • A “flashy”, attractive promotional website to spark interest in the conference (kotesolconf.com)
  • A way to limit access to the conference content to only registered attendees (live.kotesolconf.com)
  • Quick information access
  • A site that could be built quickly
  • A way to create and maintain a “Library of Content” including the Live and pre-recorded presentations (YouTube)
  • Tech support before, during, and after the conference
  • Guidance on the various technologies that could be utilized for the conference, and methods to combine them seamlessly into a single online experience for the day of

Therefore, due to the online conference requirements, and the technical (and stylistic) limitations of the Main website, the conference organizers contacted me about helping to create a new website specifically for the conference.

View my original Statement of Work for the project (Mar 18, 2020)


Kotesolconf.com

Conference Promotional website

View code on GitHub

Purpose & usage:
  • A “flashy”, attractive promotional website to spark interest in the conference
  • Quick information access
  • A site that could be built quickly

After the initial contact in the beginning of March, I drafted a Statement of Work by March 18, with a goal of setting the promotional website “live” by April 2 (2 weeks later).

At that time, I only had minimal information about the conference itself, and the invited speakers. But the team wanted to get something up quickly to begin promoting it.

Luckily, I’ve already built 3 other conference websites in a similar manner for Regional conferences we’ve held in Jeonju in 2017 and 2018, as well as the 2019 National Conference, so I already had a template to use that required minimal rebuilding.

How I built it:

Technologies employed:

  • NodeJS
    • an asynchronous event-driven JavaScript runtime environment that compiles webpages out of the browser serves up a very fast and dynamic website
  • ExpressJS Framework
    • the de facto standard server framework for Node, providing routing and other features that make web application development much faster and easier than using only Node
  • Pug templating engine
    • a popular templating engine for Express and Node which compiles files to HTML and utilizes a simplified syntax, which makes the code more readable, and quickly editable. Pug makes it easy to write reusable HTML and render data pulled from a database or API
  • JSON data files
    • the de facto standard JavaScript data-interchange format. It is easy (and enjoyable) for humans to read and write. It is easy for machines to parse and generate.

These days, JavaScript is one of the fastest growing, and most widely used technologies for building websites that are fast, dynamic, and scalable. How this works with the technology stack employed above:

  1. NodeJS runs on the server to compile the JavaScript (Pug) files into static HTML that is readable by the browser when someone visits the website
  2. ExpressJS builds the API we use to access data stored in our JSON “database” files, and it takes care of routing between different webpages
  3. Pug builds the webpage HTML structure and dynamically renders data that is served to it from the Express APIs
  4. JSON holds JavaScript Objects and arrays of Objects that act as our database, which are accessed by Express and passed into Pug. (Basically, the reason JSON is so great is that I can take an Excel file, export it as CSV, and convert it to JSON. Therefore, the JSON file itself is nothing more than a text-only Excel file.)
Advantages:

The reasons the above combination of technologies is so great are:

  1. Very fast to develop (especially since I had already built a template)
  2. Very fast to server, render, view, access
  3. JSON is a joy to use as I can basically reformat any Excel file into a format that I can easily use as my “database” for the site
Limitations:

However, given the time constraints for this project, I was also faced with the following limitations:

  1. Login / registration:
    • Building a custom login / registration with this technology stack is possible, but would require much more time for development / testing, especially when I haven’t previously built this functionality, and there are other viable options already available
  2. Database:
    • Utilizing JSON files as a “database” means that it’s not really a database I’m accessing and updating, but a single file or collection of files. Therefore, this system, built quickly and in the way I’ve built it, does not function as any kind of CMS where I could go into various webpages to update content. Rather, in order to update the website content, I need to go into a particular file, “Search” for the content to update, then re-upload the “database” file to the server.
  3. Content Management System:
    • Because this system does not function as any kind of CMS, it is not optimized for writing articles, announcements, and updates. Therefore, the second “LIVE” site was also required to help satisfy the needs of this project.

LIVE.Kotesolconf.com

LIVE Conference website

View code for the conference WordPress Child Theme

Purpose & usage:
  • A way to limit access to the conference content to only registered attendees (live.kotesolconf.com)
  • Quick information access
  • A site that could be built quickly
  • A way to create and maintain a “Library of Content” including the Live and pre-recorded presentations (YouTube)

The LIVE site addresses the rest of the project “needs” that the promotional site could not. This includes primarily:

  1. Creating / collecting a Library of Content
  2. Locking that Library of Content behind a registration / login page
How I built it:
  • WordPress
    • Currently powering over 1/3 of the world’s top websites, this CMS is the most popular in the world. In recent years, there’s also been a big push to build a JSON REST API for it that will allow integration with JavaScript technologies like Node (above). This makes WordPress an ideal complement to the website built above.
Limitations:
  • Time:
    • As I expressed earlier in this article, time constraints on this project were one of the biggest limitations. Given enough time, it would have been possible to completely integrate the two sites with a unified login and shared content pulled directly from the WordPress database using the REST API.
  • Two separate sites:
    • As it is, the simplest solution was to create and maintain two separate sites and try to direct all visitors looking for “locked” content toward this LIVE site (requiring login)

In review, the two sites created functioned like this:

  1. Promotional site:
    1. Built very quickly
    2. Provided quick access to information
    3. “Flashy”, including a conference countdown clock, less stylistically limited (more design freedom)
  2. LIVE site:
    1. Built more slowly
    2. Required login / registration
    3. Housed all “locked” or private content (external links) behind the login

WordPress Plugins:

Contact Form 7

  • Created multiple forms for:
    • Volunteering
    • Donations
    • Website Issues
    • General Contact
  • Sending to multiple different email addresses (a different person handles each)

GDPR Cookie Consent

  • Best Cookie Consent footer I’ve found, easy to customize, out of the way

Google Analytics by MonsterInsights

  • Hooked up to Google Analytics – using the same code for both promotional site and Live site, to get usage data for the event

Jetpack by WordPress.com

  • Among other functions, utilizing the Portfolio custom post type for all Speaker profiles (then locking those down to logged in users only)

LH Logged in Post status

  • Lock down the Portfolio custom post type for only logged in users (redirect non-logged in users to the login page)

Quick and Easy FAQs

  • As the name implies, quick and easy, and beautiful design / functionality

Redirection

  • To redirect certain links (like Schedule) to the promotional site which is more complete and has a better design

RegistrationMagic

  • Simple and straightforward, also allows Facebook login (loads of KOTESOL members use Facebook – it seems to be the preferred SNS of the organization)
  • Easy to fit into a normal Page
  • Stat analysis
  • Hides login (no /wp-admin – redirects to /login or whatever I set the page to)
  • Couple of disadvantages:
    • Lost activation emails
    • Can’t login with email (must use username)
    • Sometimes not a clear flow from registration to login to logged in view
    • Profile view is unnecessary (Submissions, etc)

Show Current Template

  • For site development and debugging

Site Kit by Google

  • Additional analytics and other Google things

Sitewide Notice WP

  • Good for updating the site with links and notices to upcoming presentations

Timed Content

  • Perfect solution for making the Zoom access info and YouTube links accessible at a certain time
  • Works automatically on every page it’s enabled – saved me a ton of work / time trying to set things “live” manually

Ultimate Addons for Gutenberg

  • Good for Multi-buttons
  • Tried to use for a Grid of Projects, but wouldn’t recognize “Private” Projects

W3 Total Cache

  • Caching, obviously

Reflection

I’ve compiled my thoughts about Registration / Login on the Conference Stats & Reflection post. Suffice it to say that in the future:

  1. Registration / Login needs further testing, with multiple use-cases, and sign-in methods
  2. Login with username OR email address is necessary (some users – including me – forget their username)
  3. Login status needs to be made CLEAR. This can be done by:
    • Adding a user icon / welcome message on the logged in page / upper-right hand corner of the website
    • Adding the username on BOTH the promotional site and the Live site using the WP REST API
WP REST API Resources:

In fact, linking the two sites more completely with the WP REST API would be a good endeavor for future sites.

I want to be able to verify authentication between the two sites (i.e. if you’re logged into one – the Live, the second site – Promo site – will know it and “unlock” content appropriately). This would allow me to:

  1. not “double-up” on the content – putting Speaker profiles on both sites – which led to some user confusion
  2. and also, retrieve the username / profile picture for both sites to create a more unified “single sign-on” type experience (sign on once in one site, be linked to both sites)

Some resources follow:

  1. Using Express To Build A Node.js Server To Proxy The WordPress REST API (Torque Mag)
  2. How to make WordPress more exciting with the WordPress API, ACF, & Express.js (FreeCodeCamp)
  3. How to Setup and Use WordPress REST API: Basic Authentication (Cloudways)
  4. The Complete Guide to WordPress REST API Basics (Kinsta)
  5. REST API Authentication (REST API Developer’s Handbook)
  6. Plugin: JSON API Auth
  7. Plugin: JSON API
  8. Plugin: JWT Authentication for WP REST API
  9. How to get current logged in user using WordPress Rest Api? (Stack Overflow)
  10. WordPress REST API v2 (Postman Documenter)

By Aaron

Aaron Snowberger is the Technical Chair for the KOTESOL 2020 National Conference. As such, he's building the conference website(s), as well as providing consultation and recommendations for all technical aspects of the online format. In 2019, he was the Conference Chair for the National Conference held in Jeonju, where he also created the conference website, app, posters, and book for the event.

Aaron is a 14-year Jeonju resident, a Google Certified Educator, Trainer, and GSuite Admin, and a professional programmer, graphic designer, and online educator. He has taught ESL for 14 years, and computer-related design and programming courses for 8 years. He is currently employed by Jeonju University.