Archives

Two tools for a more sane WordPress development workflow

I will share two tools that have changed how I work on WordPress sites. Roots.io’s Bedrock and Sage 9 starter theme are a quick way to jump into more modern workflow. Both are packed with many tools and technologies, we will look at a handful of my favorites and how they have changed my work for the better.

JAMstacking WordPress

This talk covers how to setup your WordPress website to support the JAMstack. The JAMstack is growing in popularity for architecting modern websites and applications. JAM stands of JavaScript + APIs + Markdown. Benefits of using this stack include improved performance and security.

The JAMstack is a popular phrase for building modern websites and applications using JavaScript + APIs + Markdown. This stack is very popular as it provides improved performance and security. By using this stack, developers can deliver rich user experiences at scale. This will cover general use cases for the JAMstack with WordPress and how to get started. This talk will also include helpful file architecture and scripts to improve the development experience.

Troubleshooting in WordPress

WordPress is awesome, but everyone runs into issues now and then. Whether you own, maintain or build WordPress sites, troubleshooting is a skill set that will save you time and money.

In this session, you will: – Learn about the 7 types of WordPress issues you may encounter and how to diagnose them. – Discover the step-by-step processes that will help you find the root cause of an issue. – Learn what your next steps are once you know the source of an issue. – Learn what information you should be providing when interacting with developers or your web host to help speed up the problem resolution process.

How I built WPBingo.com: a PWA that uses Vue.js, Tailwind CSS, and the WP REST API

Just prior to WCUS 2017 I had the fun idea of creating an interactive bingo board for all of the fun and unique things that we regularly observe within our community. I was able to knock together the original concept after just a couple of hours thanks to utility provided by View and tailwind. Later I connected it to WordPress via the rest API so that I could more easily manage each of the squares available in the data set. Finally, I added a service worker to make the entire experience work offline.

In this presentation I walk you through how I went from idea to prototype to fully functional web app. We’ll cover the purpose served by my chosen frameworks and why I picked those instead of writing plain, vanilla JavaScript and CSS (or competing frameworks, for that matter). While this will not be a deep dive into code, we will review specific code samples and you should get enough detail to build this – or something like it – yourself by the time the session has ended.

Here’s a specific list of the things you can expect to learn during this presentation:

  • Why I chose Vue instead of React for this particular project
  • Some of the neat things that Vue provides to us as developers (Vue.js 101)
  • The benefits of utility-based CSS classes
  • How to register custom REST API endpoints
  • How to make a very simple Progressive Web App (PWA) that uses service workers, local storage, and local caching for resilience against connectivity issues and unintended browser refreshes

Inspector Magic

Do you ever wish you could modify the appearance of something on your WordPress site? Maybe a button color, a font-size, or even make something disappear all together? Come experience the magic of CSS and the browser inspector.

This talk is meant to empower you to be able to make your own styling changes to your website using WordPress’ Customizer. Often there are a few tweaks that we want to make to our sites that don’t require programming a custom template or creating an entire child theme. Do you find yourself saying things like, “I wish I could just change the buttons to blue” or maybe “I just wish I could make the title disappear on this page”? CSS is very powerful and it is the magic behind what makes your site look great. Using Chrome’s inspector tools, learn how to harness that magic to create specific modifications for your website.

Getting Started with WPGraphQL

Pairing a headless WordPress backend with a JS-powered single-page app frontend is rising in popularity. In this talk, we’ll discover the advantages that GraphQL has over REST APIs, and build a single-page React app that fetches data from a WordPress backend using the super cool WPGraphQL plugin. 🚀

In this talk, my mission is to briefly explain what GraphQL is and the advantages it has over REST APIs. I’ll then do a live demo where we’ll build a simple single-page React app that uses Apollo Client to fetch the data it needs from a headless WordPress backend running WPGraphQL, then display it on the page. I’d love for those who attend to leave with an awareness of the WPGraphQL project and a desire to use it to build super cool, fast and interactive things on the web! 😊

Animation Fun with GreenSock

Have you heard about GreenSock? It’s a popular tool used to create all manner of web animations. Perhaps it is something you are curious about and just want to get a taste. In this talk we will explore how to setup and build simple web animations using modern JS in code.

You need to impress the client with catchy, high performance animation for the modern web, that also works well on every device? At one time that was browser and device-dependent technology. It doesn’t have to be that way, not anymore. Explore an amazing JavaScript toolkit called GreenSock, aka, GSAP, with a wide array of plugins. Learning modern JS is fun with animation. By seeing and experimenting, I think you’ll catch the bug too. SVG graphics and animation is code, which means great performance and beautiful, elastic, and interactive things in your theme. In this talk, you will see a live coded introduction, building interactive objects from hover to click.