2018.05.11 EDIT: Here are the speaker slides provided by the group
This weekend, I attended the WordCamp Detroit conference, which was revived after around 6 years of being quiet. Held at Grand Circus, it was a good way to learn a few things related to WordPress, especially on some of the things that are available from a technical perspective.
I mostly stuck to the developer track through the sessions, and took some of the things I took back from each of those sessions.
In particular, my most recent interest is understanding WP-API to be able to integrate it into an Angular SPA, to be able to build a web app with CMS capabilities to allow for customization of data for end customers.
WordPress + React
Adding React to a WordPress project using the following options:
The option of adding React to a WordPress website comes in two forms:
- Brainless CMS
- Using WordPress to serve the front-end and React libraries, and specifically using wp_enqueue_scripts to serve resources.
- Allows for adding smaller functionality to an existing application.
- Headless CMS
- Removing the WordPress front-end, and serving data in WordPress through the WP-API.
- Useful for the SPA design, and can be easily tailored to use any other front-end application.
This talk makes me think about the popularity of React, and how on perspective it seems to be ahead of the other major frameworks, Angular and Vue.js. I’m curious as to how that’s the case, and what it is about React that makes it stand above the others.
How to Build Themes using the WordPress Rest API
For this talk, we went through what the WordPress API is what it’s capabilites are. Like Amit’s talk above, it talks about using a headless WordPress setup, which is becoming a best practice to be able to use the decoupled architecture.
We specifically went through building a mini-theme using the WordPress API, and then related this to moving to a headless WordPress design, allowing for customization to the API to allow for adding fields to different data types.
Rebrand Cities: Crushing the Digital Divide One Website at a Time
Hajj’s talk had to do with the goal of providing websites for small businesses that do not have a website. Statistics show that 46% of small businesses don’t have a website.
Ultimately, this talks was geared towards entrepreneurs, specifically in bringing cost-effective websites to businesses with limited funds. For $300, Rebrand Cities provides a full end-to-end product including photography, branding, web design, and so on.
One of the mentions was in terms of securing brands throughout a business’s tenure – the key was to focus on the social media outlets that they will use, alongside reserving the handles for social media that they will use.
Site Configuration In Code: Configuration Management
Tessa talked about the scenario where a group of developers are working on their own features, which will effect database changes inside of WordPress. Talking about site configuration specifically, the concept of configuration management, or managing your site configuration in code through version control, comes into play.
The wp-cfm plugin is mentioned, which allows for pushing and pulling data between databases. Some of the perks include:
- Less need to copy the full database.
- No need to manually apply database setting changes.
- Track and migrate configuration files using version control.
It tracks everything inside the wp_options table, which covered most of the configuration for the WordPress application.
Some of the terminology that wp-cfm includes:
- Bundle – A group of settings to track.
- Push – Export configuration from your database to the filesystem.
- Pull – Import configuration from the filesystem to your database.
While going through this talk, the tool Pantheon was brought up. This basically serves as a hub for hosting and automated workflow for a WordPress website. Another tool brought up was MergeBot, which allows for syncing of content between environments.
And finally, a security concern – make sure to change file permissions on the /config folder, as the configuration info will be stored in this directory. This will be especially useful when storing API keys.
From Discovery to Design: A Collaborative Approach to a User-Centered Website
This talk stressed about the concept of using collaboration to delier a project that will provide the most value to the user. User-centric
The user-centric design process goes as follows:
- Creating a common understanding of what the goal is.
- Surveying interested parties (user, stakeholders, client design).
- Analytics review.
- Determining pain points and goals.
- Creating a written website plan, potentially with sign-off.
- User Mapping
- Who are we designing for, and what do they need?
- Empathy maps
- Journey maps (Discover, Engage, Convert, Retain, Advocate)
- Advocate for the user’s needs.
- Put user preference over personal preference.
- Document findings and get sign off.
- Information Architecture
- Creating a sitemap for web site flow.
- Leave room for iteration.
- Create page templates (not specific pages).
- UX (wire-framing)
- Work out major content, feature and functionality issues with wires to make design phase more seamless.
- Consistency in design patterns
- Interactions & animations
- Usability & accessibility
After handing off the design to the development team, this design should communicate the user needs, A potential option is to use InVision and provide annotations for what should happen. This helps keep the intent of the design more explicit.
Don’t Shard Your Pants! A WordPress / Amazon Domain Sharding Solution for Images
Kim Kaiser (more information on talk)
The site used in all demos is http://www.enchantedcelebrations.com/
Domain Sharding is a technique where resources for one website are served from multiple domains, improving performance (browsers limit 6 simultaneous connection to one domain).
- Significant increase in page loading speed.
- Ideal for 1000s of small images.
- Time required for extra DNS looking.
- HTTP/2 protocol performs parallelized transfers.
- Website modifications.
WordPress provides a plugin to allow for offloading all media into Amazon S3 and Azure.
Converting Images with Amazon Lambda and S3
How to Be an A11y
This talk defines accessibility as making it easy for everyone to access web content, regardless of how they approach the web.
Approximately 1/5 of people on the web have some form of disability.
How to meet WCAG 2.0 Guidelines
A couple general guidelines:
- Do your images have an ‘alt’ tag?
- Is your markup organized semantically?
- Is your color contrast acceptable?
- Are your headers and buttons descriptive?
- Is there padding around clickables?
- Can a user navigate through all content using only a keyboard?
- Does focus shift to your dynamic elements appropriately?
- Do videos have captions, or transcripts for audio?
There are a few automated tools for determining accessibility: